Flash 5 Tutorial
By SiteownersDesign.com2005-03-15
Buttons
|
|
The button symbol is equiped with the ability to change it's appearance according to what state the button it. Theree exists four states, Up, Over, Down and Hit. You can see buttons in their normal state which is the Up state. You can then interact with it by rolling your mouse 'over' the button. When you click on the button, it's state will be 'down' as long as the mouse remains pressed. A button can also have an assigned action when a certain state is reached, because of this, there are four frames to define each state of your button.
States of the button:
1. Up is the state used whenever the mouse pointer is not over the button.
2. Over is used when the mouse pointer is over the button.
3. Down is the state attained when the button is clicked.
4. Hit is invisible and defines the area where the button will react to the mouse pointer.
Creating Buttons:br> To create a button, you need to first have a symbol. On your menu, go to "Insert" and choose "New Symbols" or hit CTRL+F8 on your keyboard. The "symbols Properties" window will open, choose button, and call it button 1. Click OK.
(As shown in figure 2.9)
(Figure 2.9)
You will be taken to a new stage, called button 1. In this stage, you will notice four frames. Frame 1, "UP" is the main frame. This will be the button, when nothing is being done to it by the user. Frame 2, "Over" is the 2nd part of the button. When the user's mouse is on your button, Frame 2 will appear, and frame 1 will disappear. Frame 3, "Down" is the part of the button that is clicked on. When a user clicks on the button, they will see the image on Frame 3. Finally frame 4, "Hit" is the frame that lets you decide where you want the button to be activated. Example, if you have a square button, and the "Hit" frame is a circle shape, when you are viewing your movie with the button in it, only a circle around the square will be considered by Flash the button.
(Frames shown in figure 3.0)
(Figure 3.0)
In frame 1, draw a rectangle shape, and then add some text to it. The drawing you just added to frame 1 is now what users will see. Now, click on frame 2, and hit F6 on your keyboard, this will add a new keyframe, and you will notice your button from frame 1 is copied over. You can either leave it as is, but that's not exciting or change it's look. Give the text a bold look, and change the color of your square. When users put their mouse over the button, they will now see what's on frame 2. Select frame 3, and hit F6 once again. You do not have to do this if you do not want to. Frame 3 is only viewed if the user clicks on your button, but then again, it's up to you. The image from frame 2 is now copied onto frame 3, you can modify it the way you want it to look. Select frame 4, and hit F6 again. In frame 4, you do not have to change anything, because no matter what, no one will ever see what's on frame 4. You now have a new button, return to the stage,
and from the library, slide you new button onto it. Now you may want to add some actions to your button, read the following for more details on how to do so.
Adding Actions:
You have created a button, you may want to assign an action to it now. This could server useful if this button will be used on a web site, you can redirect users to another web page with it. From your stage, right-click on your button, and select "Action". You are now in the Action Panel. From the Basic Actions button, select the getURL command. Now type in a URL of your choice, and close the Action Panel.
(As shown in Figure 3.1)
(Figure 3.1)
Your button has now a link assigned to it. If you want to test it out, go to "Control> Enable Simple Buttons" or press CTRL+ALT+B and you can now click on your button.
Save your movie as button 1.fla and continue to the Sound section, you will need your button for this next section.
Tutorial Pages:
» Flash 5 Tutorial Introduction
» Drawing
» Symbols
» Layers
» Type and Text
» Buttons
» Sounds
» Animation
» Saving Flash Files
|
