Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Animated Buttons

402 Animation
Flash Compatibility: MX 2004 (Principles and ActionScript are the same in Flash MX / Flash 5 / Flash 4)

Written by: Phil

Length: 2200 words

Assumed Knowledge: None but some knowledge of Tweening and Nesting would be useful.

Level: Easy to Medium

Access: Members Bonus tutorial. For the full version you must: LOG ON To become a Member: Click here

For Free Tutorials: See listings: Free Tutorials

The aim of the tutorial is to learn how to create animated buttons in Flash. It is surprisingly easy!! Animated buttons have become a intrinsic part of web pages and not only help the user know that they are on an active link but 'zap up' the design of a page. Have a look at some of the examples below:

Example: Download the Flash file Ani 402a

Example of a button that animates on rollover.

Note: This is the movie that you will build in this tutorial. Having said that - once you can build this animated button you should be able to build an variation - including buttons with more sophisticated graphics and or animation.

Example: Download the Flash file Ani 402b

Example: Download the Flash file Ani 402c

Example of a button that animates on rollover and stops animating on mouse down.

Example: Download the Flash file Ani 402d

Example of a button that stops animating on rollover.

The principles of creating animated buttons are the same if you are making a simple animation (as above) or your animation is more 'designery'. Remember that the animation can be as long as you wish. Have a look at the button below:

Example: Download the Flash file Ani 402e

Example of a button with a longer animation.

In the button above the auto play animation is interrupted when you roll over the button with your mouse. You then get a new animation 'Click Now, Check out the free tutorials' then the animation reverts back to the auto play animation.

In any Flash button there are three basic states where you can place the animation:

Up: When the Mouse is not over the button
Over: When the Mouse is over the button
Down: When the Mouse is over the button and you click (and hold).

The example below clearly shows all three states:

Example: Download the Flash file Ani 402f

Example of the three states that a button can have: Up, Over and Down.

Note: Using ActionScript you can create additional states. See the note at the end of this tutorial.

Creating an Animated Button

Example: Download the Flash file Ani 402a

The button you are going to make.

Step one: Setting up the Document

1. Open a new Flash Movie.
2. Go to: Modify > Document (Short Cut Key: Ctrl + J)
3. Set the size to: 100 x 40 pixels

   Note: Your button could be any size. It could also be part of a larger Flash movie such as the on the webwasp home page.

4. If you wish select a: Background Colour
5. Click: OK

This is a members only bonus tutorial. For the full text you must: LOG ON

For Free Tutorials: See listings: Free Tutorials