Updates since SP version:
- Added several parts
- Fixed up a few errors
- Improved understandibility
- Added contents (immediately below)
Updates since version 2.0:
- Added images (click on them to enlarge)
- Added examples
This tutorial will tell you:
- How to make a basic button
- How to make an animated button
- How to make a button carry out a basic function, such as go to another frame
- How to make a button link to a website
Throughout this tutorial, there are lots of small pieces of script. Script will be shown in blue, and parts of script that need to be customised will be red.
Explanations of the script will be green.
Introduction:
Welcome to my button tutorial! This tutorial will teach you how to make good buttons, and took ages to make. I hope it helps!
Creating a basic button:
Draw, say, a circle, or a piece of text that says 'Play' or something.
This will be your play button.
Select it.
Press [F8] to make it a symbol.
Name it whatever you want, (something like 'button' or 'play' is recommended' and check the checkbox labelled 'Button'. Click OK.
Double Click on your button to open up edit mode. You will see 4 frames at the top, all labelled.
The first is 'Up', then 'Over', then 'Down', and, finally, 'Hit'.
'Up' is what will be seen when your mouse is NOT touching the button.
'Over' is what is shown when the mouse IS touching the button.
'Down' is what is shown when you click on the button and
'Hit' is the area that defines what part of the button can be clicked on.
Select the 'Hit' frame and press [F6] to add a keyframe. Now put a rectangle or something to say where you can click. You can leave this as just the same as your up frame, but if you have thin text, clicking can get annoying if there's no proper hit area.
Press [F6] again on the 'Over' and 'Down' frames.
Now edit those frames to what you want for those particular parts.
At the top of the screen, above the timeline, you will see something like 'Scene 1' '[button name]'. Click the one that says 'Scene 1' (or whatever the name of the scene you're working on is called) to return to the normal working stage.
Put your button on the stage wherever you want. Assuming you are making a play button, it would go on the first frame, probably centered (using the align toolbar - ctrl + k).
This will be your basic button. However, as there is no scripting, your button won't actually do anything. Continue to learn how to make it work.
Scripting for the button:
Hit F9. This opens the actions panel.
Make a new layer for actions (if there isn't already one).
On the frame of your movie that the button is on, and on the actions layer, enter the actionscript:
stop();
(this only applies to those that want their movie to stop when it reaches the button)
Now select the button itself and enter this actionscript:
on(release){
play()
}
The stop(); action stops the movie from playing.
The on(release){
play()
}
actions tell the computer that when the button is released, play the movie.
The finished product
More button scripts:
You could also choose to go to a designated frame by putting
on(release){
gotoAndPlay("Scene xxx", yyy)
}
(replace xxx with the scene name and
replace yyy with the frame number.
The script
gotoAndPlay("Scene xxx", yyy)
}
This script tells the movie to go to the selected scene and frame of that scene.
To make the movie go to, then STOP at a certain frame, replace gotoAndPlay with
gotoAndStop.
To make it go to the next frame, replace
("Scene xxx", yyy)
} with
(nextFrame)
}
The script (nextFrame)
} basically tells the movie to go to the next frame.
Or to make it go to the previous frame, replace
(nextFrame) with
(prevFrame).
The script (prevFrame) basically tells the movie to go to the previous frame.
Also, you can make a button send you to a website. To do this, use the button script:
on(release){
getURL('http://www.awebsite.com');
}
The getURL('website'); script tells flash to open the website specified in the user's default browser.
Creating an animated button:
After turning an image into a button, changing the 'Hit' area, and adding keyframes, go to a frame that you want to animate, then select it's contents.
Hit F8, and make it a movie clip.
Double click it to go to editing mode for the MC (movie clip).
Now you can animate it. If you want it to loop, just leave it as it is once you've animated, but if you want it to stop playing when the movie clip reaches a certain point (rather then continue playing indefinitely), make a new layer in the MC andput a keyframe where you want it to stop.
Select the keyframe, and open the actions panel.
Put the script
this.stop();
on it.
This script tells the object you are working on (this.) to stop when it reaches this frame. A related piece of script is _root.. This tells flash that the next command is intended to work on the main movie.
You can repeat this process for the other frames (except 'hit', that would be stupid) and have your whole button animated.
The finished product
Now your button is animated! Yai!!1
Conclusion:
That's my tutorial for now, I may add more at some point, but this is all I can think of at the moments. Happy animating!
-The Scarecrow