Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter

Advanced HTML
Frames & Tables
Rounded Table Corners
Flash 5
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics


Related Links
Macromedia Downloads
More Flash 5 Sites

Sitemap | Contact | Link To Us | Advertise
Report A Problem
Home : Tutorials : Flash 5 : Part 6

Flash 5 Tutorial
Part 6 - Layers & Buttons


In the last parts I have taught you how to create simple animations. In this part I will explain how Flash's layers work and how you can create simple buttons.


One major feature of Flash is that, like several image editing programs, everything you do is put into layers on the screen. Layers are like pieces of transparent plastic. You can put pictures text and animation on them. Layers higher up have their content over the top of layers lower down. So far everything you have done has been contained in one layer, though.

Layers are controlled through the timeline, which you have seen before:

As you can see, there is only one layer in this animation, Layer 1. The first thing you should do is to rename this layer. Although your animation will work with it being called Layer 1 it is much easier to understand what you are doing if you use proper names for your layers. Doubleclick on the name and type in Scrolling Text.

Now you will want to put in some content for this layer. Make a symbol with the text:

This is my Flash Animation

And make it a symbol. Now move it right off the left edge of the stage. Insert a keyframe at frame 120 and in that frame move the text to off the other side of the stage. Now make a motion tween. Your text should 'scroll' across the screen.

Now you can add another frame. Click the little icon on the timeline with a + sign on it. This will add a new frame above the one you are currently using. Rename this to Circle.

In this layer make a circle which is very small, make it a symbol and then animate it to grow much bigger in 120 frames.

This should show you how, when you create a second layer it is completely independent of the other layers but that layers above another layer overlap them.


For the second part of this tutorial I will show you how to make basic button. Create a new movie. In the first frame draw a rectangle. Then put some text on it using the text tool saying 'Frame 2'. Now select both the text and the rectangle and create a symbol. This time make it a Button.

Now double click on the new symbol and the button editor will open. This is slightly different to what you have seen before. The timeline now only has three frames, each with its own name:
  • Up - The normal state of the button
  • Down - How the button looks when your mouse is over it
  • Click - How the button looks when your mouse button is down
  • Hit - The area which will trigger mouse events

You will need to create a keyframe in each of these frames. Go to the second frame and change the colour of the rectangle. Then do the same in the third frame. The fourth frame does not need changing. It is invisible but, as the button image is in there, the correct area will trigger the button. Now click on Scene 1 at the top above the timeline.

You are now returned to your movie. Create a new Blank Keyframe in frame 2 and just insert the text 'Frame 2'. This will allow us to see when the button has worked. Press Ctrl+Enter on the keyboard to test the movie (so that the buttons work). As you can see, it just loops the 2 frames continuously. Click the close button to return to the editor.

To stop Flash from repeating the frames over and over you will need to insert a frame action (more about these in the next part). Right click in frame 1 and choose Actions. Double click on Stop in the left column and then close the box. Now use Ctrl+Enter to play your movie again. This time only frame one will be displayed and you can test your button. It does not yet take you to frame 2 though.

To do this, return to the editor and right click on the button. Choose Actions (like you did for the
frame). Double click on GoTo. This will bring up some options at the bottom of the screen. Frame Number is already selected so type 2 in the Frame box. As you want the movie to stop when you arrive there, uncheck the Goto and Play option. Close the Actions box and play your movie.

Now when you click the button it will show frame 2, just as you wanted.

Part 7

In part 7 I will explain more about how to use actions to control your movie and how you can actually use them for simple (and some advanced) scripting in Flash.

© 1999 - 2001