Using event actions

Show / Hide

1. Let's create two symbols that will behave as buttons - "Show" and "Hide".

2. Add instance name - "HideElement" to the "Hide" symbol.

   

3. Select the symbol named "Hide" and go to the Events tab.

4. Add a "CLICK" event and a "Hide" action.

5. In the action options select the target to be "Self".

   

6. Select the symbol named "Show" and go to the Events tab.

7. Add a "CLICK" event and a "Show" action.
8. Set Target to be Instance.
9. Click on the button for selecting a target name.

10. Select the target name from the list to be HideElement with symbol name Hide.

    

11. Export and preview the result.

Play / Pause

1. Let's create two symbols that will behave as buttons - "Play" and "Pause".
2. Create a symbol - "Animation" with instance name "AnimationElement" and add a Motion tween to it in the main (Scene) timeline.
3. Enter in the "Animation" timeline.

4. Convert the shape to symbol with name "AnimationNested" and create a Classic Tween for it.

5. Select the symbol named "Play" and go to the Events tab.

6. Add a "CLICK" event and a "Play" action.

7. Set the following options for the first action - This action will play all the animations in the main (Scene) timeline.

   • Target: "Current scene".
   • Play nested animations: "enabled" - We need to enable this option because we want the AnimationNested's timeline to be played too.

   

8. Repeat the steps from 3. to 6. for the symbol named "Pause" with action type - "Pause".

   

9. Select the "AnimationElement" and add a "CLICK" event.

10. Add "Play" action with the following options - This will play and loop the animation in "Animation" timeline (The Classic Tween we've created in step 4.).

    • Target: "Self".
    • Iteration-count: infinite - will loop the animation.

    

11. Export and preview the result.

Goto and play / stop

We will extend the sample created in the Play/Pause section.

But before that we will:

• Reuse "Play" and "Pause buttons" - You can create new ones or just duplicate the existing ones.
• Change the text of the buttons with "GotoAndPlay" and "GotoAndStop".
• Reuse the symbol "Animation" and its animations.

After this is done we can continue with the other steps:

1. In the main (Scene) timeline create a new Layer - "Labels".

2. Add "start", "mid" and "end" label names corresponding to 1st, 13th and 25th frame boxes.

   

3. Do the same in the "Animation" timeline.

   

4. Select the symbol named "GotoAndPlay" and go to the Events tab.

5. Add a "CLICK" event and a "Goto and play" action.

6. Set the following options for the first action - This action will play all the animations and the nested one in the main (Scene) timeline starting from "mid" label.

   • Target: "Current scene".
   • From: "mid (Labels)".
   • Play nested animations: enabled.

   

7. Repeat the steps from 4. to 6. for the symbol named "GotoAndStop" with action type - "gotoAndStop".

8. Change From action options to be the "start (Labels)" frame label - This will stop the animation in the "start" label.

   

9. Export and preview the result.

Play from to

We will extend the sample created in GotoAndPlay/GotoAndStop section.

But before that we will:

• Reuse one of the "GotoAndPlay" or "GotoAndStop" buttons - You can create a new one or just duplicate the existing one.
• Change the text of the buttons with "PlayFromTo".
• Reuse the symbol "Animation" and its animations.
• Reuse the Layer with label names.

After this is done we can continue with the other steps:

1. Select the symbol named "PlayFromTo" and go to the Events tab.
2. Add a "CLICK" event and a two "playFromTo" action.

3. Set the following options for the first action - This action will play all the animations in the main (Scene) timeline starting from the "start" label and finish in the "mid" label.

   • Target: "Current scene".
   • From: "start (Labels)".
   • To: "mid (Labels)".
   • Play nested animations: enabled.

   

4. Export and preview the result.

JavaScript

We will extend the sample created in the PlayFromTo section. What we will gonna do is that when playing the animation finishes we will log a message "Animation finished" using console.log.

1. Select the "PlayFromTo" button.
2. Check "Wait to finish" checkbox.
3. Add "JavaScript" action and click the button near the bin icon.

4. In another window, a text redactor will be opened. There type the following code: console.log('Animation finished!');.

   

5. Export and preview the results - Click on the button and wait for the animation to finish. Then check the console.

   

JavaScript file

We will extend the sample created in the PlayFromTo section. What we will gonna do is that when playing the animation finishes we call a function from an external JavaScript file.

1. Create a new JS file named "message.js" with the following content:

   function onFinish(message) {
       console.log(message);
   }
   

2. Navigate to the "Document tab" and add this file.

3. Select the "PlayFromTo" button.
4. Check "Wait to finish" checkbox.
5. Add "message.js" action (JS file will be listed as an action option in the action list).
6. Select the "onFinish" method.

7. Type in the "message" parameter - "Animation finished!".

8. Export and preview the results - Click on the button and wait for the animation to finish. Then check the console.