Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

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 of a button that animates on mouse down (click).

 

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

 



Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.