Your First Flash Button
Published in Uncategorized.
Note: This tutorial is written for flash 8, however it is very similar to the procedure followed to do the same thing in other versions.
Select a shape tool and create what you want your button to look like.
I used the brush tool to create a flower.

Select your button image with the black selector and press F8. (Covert to symbol)

Name it whatever you’d like. Make sure “Button” is selected.
Double click on the button to get into the button editing window.
You can see that you are inside the button if you look above the timeline. It should say Scene 1 and then your button name. To get out of the button editing, just click Scene 1.

To go back to the button, double click the button.
In the button editing part:
Click on frame 2 (this is the over state) and hit key F6(this creates a keyframe) and do the same for frames 3 and 4 as well.
You can see what each frame does because it is written above it.
The last frame labeled “hit” is important because it represents the space where the mouse can click. It is best to keep it about the same size.
I changed the colors of my flower for each one. It looks more proffessional when you keep the changes subtle. Change the Up, Over, Down, and Hit frames as you wish.
Now create a new layer in the button editor. (Insert>Timeline>Layer) You can also click the icon of a leaf of paper with a plus sign on it, at the bottom of the layers list.

Name this layer buttontitle. (Double click the name and it should let you edit it)
The first frame should already be a keyframe, you can tell by the empty circle. In here use the Text tool (The “A”) and create a text box where you can write whatever you want. EX: Home, back, next, skip.

You can edit font size, color, face, and more in the properties panel below.
Go back to Scene 1.
Create a new layer, name it Actions.
Select the button and look down in the properties panel. Where it says <Instance Name>, give the button an instance name.

I gave mine the name zap.
Click the Actions layer. You should be in the first frame Open the actions panel. (hit F9)
Paste this:
stop();
zap.onRelease = function(){
gotoAndStop(2);
}
You can probably tell from the script that it’s function is to tell the button to go to frame 2 when someone presses it. Put the instance name of your button where I put “zap”.

Note where it says gotoAndStop(1);
That number is the frame that the button will take you to.
My frame 2 is empty, so I need to put something in it.
I added keyframes on frame 2, then I made a new layer, named it Picture.
Then I put a photo in it.
The button can be used for a slideshow, skipping an intro, or make multiple buttons for a menu. Just remember their instance names and make each one go to a specfic frame. (Like a FAQ frame, or a Home frame.)
Tip: When using a font that your users might not have, be sure to right click the text and press “Break apart” twice so that everyone can see the text correctly. You cannot edit the text after you do this. Put all the text on a different layer above the button.
Here’s the final flash movie.

Subscribe to the RSS