Ever wanted to pause at the best bit in your animation? Or maybe let the viewer pause, and look in detail at your well crafted animation? Well in this tutorial, I shall be showing you how to add a Pause, and play button into your animation!
 

[This is what you will be creating]

How To Make It Happen

1. Firstly, download and open the .FLA file into flash. This will have the bare bones of what we need to make in the example. If you wish to not use the example at all, this will also be very easy to do, and i shall explain what to do along the way. We now have to go to our library folder, so go to Window/ Library, or press CTRL+L to access it alternatively. Now drag and drop the two buttons into place in the Button layer, and put them where you feel necessary*.
    
2. Now that we have the animation open, you will see that I have already created the animation for you! This is where, if you are not following the example file, you can go wild and create something really cool and special! But please make sure to stay within the animations layer.

   

   [ Try to stay only within the animations layer for your designs]
    

3. We now have to go to our library folder, so go to Window/ Library, or press CTRL+L to access it alternatively. Now drag and drop the two buttons into place in the Button layer, and put them where you feel necessary*.

[*If you are not following the .FLA File , You should create two buttons called Play and Pause]

 

4. You now have to highlight the Pause button, and input this code into the Actions Panel.

on (press) {

stop();

}

6. Highlight the Play button and input this code into the Actions panel

on (press) {

play();

}

7. Time to test your animation. You should see a blue square morph into an orange circle and back again, and if you press the pause button, it should stop the animation on its current frame, then press play to resume the action.

Congratulations! You have just incorporated buttons into your animation!
 

The Theory

on (press) {

stop();

}

What this does, is it tells the animation to stop on it's current frame. OnRelease tells us that, when the button is released, it will do the next command. The next command is Stop(); which tells it to stop on the current frame.

on (press) {

play();

}

 

This tells the movie to play again. As explained above, OnRelease tells the button that, once it is released, it should do the next command. Play(); tells the animation that it can start to run again.

	Note
If your animation didn't work, are you sure that you stuck to the guidelines of the tutorial clearly? Did you try to jump into the deep end straight away and try to make the whole thing all by yourself? Why not complete the tutorial as it is meant to be done, and then make it your own way?

You can download the final source also:

Download ZIP

Hope you enjoyed the tutorial, and for extra advice, try the kirupa.com forums.
Thanks for reading!

Blabj By Default

 

 

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇

-Blabj