Creating Nonlinear Workflow AnimationsUpdated 9 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"**