Creating Nonlinear Workflow AnimationsUpdated 10 months ago
Hi guys!
This article will give you all the information you need to create your 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. To transform it into 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"**