Hi guys!


This article will give you all the information you need to create your own Nonlinear Workflow animation.


Get to know the Nonlinear Workflow actions:


1. GotoState - an action that will take you to the specified state number in the workflow.

Example: GotoState "11", will take you to state number 11.


2. Goto - an action that will take you a certain number of states back or forth, relative to the location of the animation in the workflow.

Example: Goto "-3" will take you 3 states back. Goto "2" will take you 2 states forward.


3. EndWorkflow - an action that will end the workflow.



Creating an interactive .swf file in Adobe Animate CC:


The sky is the limit when it comes to creating animations! Here we will show you the simplest way of applying these capabilities to your workflow, by creating a simple .swf file with touch-triggered buttons.


1. Open Adobe Animate CC and Create a new 1080X1920 ActionScript 3.0.

2. To add a simple button, Click on the Oval tool and create a round shape on the Stage. You can add text to the shape using the Text tool.


3. In order to transform it to a button, we will first need to change the shape we drew to a Movie Clip. Select the shape with the Selection tool (black arrow) and click CTRL+8. Give the Symbol a name of your choosing and click ok.

 


4. In The "Properties" window, change the <Instance Name> to "Blue_Button". If the "Properties" window is not open, click Ctrl+F3.


5. Time to add the action! Click Ctrl+F9 to open the "Actions" Window.


6. add the following code:


import flash.events.MouseEvent;
import flash.events.StatusEvent;

{Insert instance name here}.addEventListener(MouseEvent.MOUSE_DOWN, onBtn1Touch);

function onBtn1Touch( event : MouseEvent ) : void
{
var e : StatusEvent = new StatusEvent(StatusEvent.STATUS, true);
 e.level = "{insert desired action here (Goto/GotoState/EndWorkflow)}";
 e.code = "{insert number here}";
dispatchEvent( e );
}


Example:


In this example, we set the "Blue_Button" to take us to state number 3 when touched.


To create more Buttons, repeat steps 2-6.


Example 2:


In this example, we will add a red button that will take me 2 steps back in my workflow. Since I now have 2 buttons, I will add the following lines to my action:


Under:

Blue_Button.addEventListener(MouseEvent.MOUSE_DOWN, onBtn1Touch);


Add: 

Red_Button.addEventListener(MouseEvent.MOUSE_DOWN, onBtn2Touch);


Now, we will add the function:

function onBtn2Touch( event : MouseEvent ) : void
{
var e : StatusEvent = new StatusEvent(StatusEvent.STATUS, true);
e.level = "Goto";
e.code = "-2";
dispatchEvent( e );
}


This Function will take me -2 states in the workflow, meaning 2 states back.


Example 3:

In this example, I will add a green button that ends the workflow.


7. Once you are happy with your creation, Select File-> Publish Settings (Or Ctrl+Shift+F12) to Publish your .swf file.



**When Loading the animation in your workflow, Remember to Set the "Next State Trigger" to "Event"**