|
In this tutorial you will
learn the following:
- Make a button with a
glowing mouseover effect.
- Adding sound to a release
action that is global to a symbol
- Add separate sounds for
mouse rollover and mouse rollout.
- Create a MENU
1. Open a new movie
2. Creating
a Button
 a. Create a rectangle shape of any kind in Frame one of Layer 1.
B.
Highlight the shape and select INSERT =>
CONVERT TO SYMBOL Select Button as the properties of this symbol and call it
button C. Hold down the
Control key and Hit the "L" to bring up your library ( or select WINDOWS =>
LIBRARY). Open the Button Symbol.
D. Click on Frame 2 (over) of your button
symbol. Right click and Select INSERT KEYFRAME.
 E. Click on Frame 4 (HIT) of the
button and right click and select Insert frame.
F. On Frame 2 select the fill of your
rectangle. Open your fill panel by clicking WINDOW=>PANEL=>FILL, Select radial
gradient. To edit gradient range, Click on the Left hand gradient colorbox
colored by clicking the gradient color box that appears on the right.. Select
the color white or a very pale color from the color fill box on the right.
Select the right hand gradient colorbox and select the darker color you chose
for the button on frame 1.
G. Right click on layer 1 of the button
symbol and select insert layer. Call it sound
H. Right click on Frame 3 (RELEASE) and
INSERT KEYFRAME.
I. Open your sound panel by clicking the
WINDOWS=>PANELS=>SOUND
J. Select the "Click" sound from the scroll bar on the
sound panel. Select event so it plays in entirety no matter what when this
button is clicked.
3.
Return to Scene 1.
A. Lock Layer 1.
4.
Setup the Frame Work for your Scene
A. Click on Frame 40 of layer 1 and right
click, selecting INSERT FRAME
B. Right click on Frame 1 and INSERT NEW
LAYER. Call this layer Sounds. Right click on layer SOUNDS and INSERT NEW LAYER
called Labels. Right Click on Labels Layer and select INSERT NEW LAYER called
Actions.
C. Click on Frame 2 layer Action and insert
keyframe. Insert a keyframe in Frame 2 on the Sound layer and the Label layer.
D. Place a keyframe in Frame 11 of both the
Action, Sound and Label Layers by right clicking on these frames and inserting
keyframes. Place a key frame in Frame 10 and Frame 40 of the Actions Layer.
Your frame work should look like
this:
5. Frame
Labels -
A. On the Labels layer click in Frame 2
and open the frame panel. Assign Frame two the label OVER for mouse over.
Click in Frame 11 of the Labels Layer and assign it the label OUT for mouseout.
B. Lock Labels Layer.
6.
MouseOver Sound -
A. Click on frame 2 of the Sounds layer.
Open the Windows panel Sound. Select the sound bird_loon.wav in the scroll
bar. Select the syn to Stream so it will only play as long as you are within
the "OUT" Label.
7. Mouse
Roll Out Sound -
A. Click in Frame 11 of the Sounds
layer. Select the bird_07.wav from the scroll bar and select the syn as Stream
so it will only play while within these frames.
B. Lock Sound Layer
8.
Actions on the main timeline
A. Frame 1 Actions Layer
1. Click on Frame 1 of the Actions
Layer. Bring up the Actions Panel by selecting WINDOWS=>ACTIONS
Click the + sign => Basic Actions
=> Stop all sounds
Click the + sign => Basic Actions => Stop
2. Frame 1 should appear like this:
stopAllSounds ();
stop ();
B. Frame 10 Actions Layer
1. Click on Frame 10 and add the
following script-
Click the + sign => Basic Actions
=> Goto
2. It now appears like this:
gotoAndPlay (1);
3. Below the scene is set to scene-
- Current Scene
- type - Frame number
- Frame - 1
- Goto and Play CHECKED
4. Uncheck Goto and Play check box so
your script now looks like this:
gotoAndStop (1);
C. Frame 40 - Actions Layer
1. Follow the directions for frame10
so that that actions in
frame 40 look like frame 10
D. Lock Action Layer
9. Building and scripting
the Menu.
 A. Mouse Rollover
1. Click your button symbol
once to highlight it.
2. Open your Actions panel by holding down control and hitting
the "L" key (or windows => Actions)
3. Click the +sign => Basic Actions =>Goto.
4. Select the on release line and
uncheck release below. Check rollover.
 5. Select the actions GotoANDPlay and set
the type to "Frame Label", frame Over
B.
 Mouse
Rollout
1. Starting with the action scriping on the gotoAndPlay actions continue with
scripting. 2. Click the
+sign => Basic Actions =>Goto.
3. Select the on release line and uncheck release
below. Check rollout.
 4. Select
the actions GotoANDPlay and set the type to "Frame Label", frame Out
C. Duplicating and labeling the
buttons
1. Highlight the button and select
edit copy, edit paste. Drag the new button down right under the first button.
2. Select edit paste 2 more times and
drag each button under one another till all four are lined up.
 3.
Select all four buttons by using the arrow tool while holding down the shift
key and select each.
4. Align your buttons by opening the align panel at
WINDOWS=>PANELS=>ALIGN and clicking the left alignment button
5. Select the Text tool and type your
text for each button on top of the buttons. Use the Character panel to select
the text font, size, color, etc. Bear in mind the mouse over effect will
lighten the button so you want a color that will contrast. Align the
text ontop of each button. You may want to use the outline feature for
that layer, the square next to the lock on the layer/timeline, so you can view
the edges of your buttons clearly.
6. Un do the outline
mode for layer 1 by clicking the square.
D. Scripting Button Actions
1. Button 1- Click on the first
button. Select the last line of action script ion the action script panel.
Select + sign => Basic Actions => GetURL
2. Fill in the URL and select a window
if you want to specify.
3. Repeat for the other 3 buttons.
Each button should have three major
actions. Below is an example.
| 
