2) Start by making the circle, or visible portion
of the "button" by drawing the circle, converting it to a
graphic symbol (select the item, "Insert>Convert to Symbol")
and name it "Circle", of all things. We do not need an instance
on the stage just yet, just create the symbol for use later.
3) Return to the main timeline. Create a two color
gradient that goes from the color you desire (I used #006699 for the
demonstration) with 100% alpha to white with 0% alpha. Draw a rectangle
with no lines and our new gradient for a fill. Convert that rectangle
to a graphic symbol and call the symbol "Gradient"
4) Select the new "Gradient" symbol and
convert it to a new movie clip symbol and name it "GradientAni",
in the movie's library, ("Window>Library") you should have
a graphic symbol called "Gradient" and a movie clip symbol
called "GradientAni". This should have made our new "GradientAni"
movie clip containing an instance of the "Gradient" symbol.
Note: that we are not yet naming the instances of the movies, only
the symbols themselves, you know you are on the right track when the
names appear in the Library window.
5) In the "GradientAni" timeline, (you can
be sure you are there by checking the top left under the toolbar, it
lists the level you are editing on) the first frame should contain our
"Gradient" graphic symbol. Copy it to another frame by selecting
the frame on the time line, then hold the CNTRL key down and click and
drag the frame to the 20th frame location. You should notice that the
cursor has a box surrounding a "+" sign by it. This is the
easy way to copy and paste between frames and keep the same location
for the transferred contents. Repeat the copy and paste into the 40th
frame location. Select the first frame and insert a motion tween ("Insert>Motion
Tween") do the same for the 20th frame. Change the 1st and 40th
frame instances to 0% alpha by selecting the appropriate frame and double-clicking
the "GradientAni" instance to bring up its properties and
select the "Color Effect" tab. Choose "Alpha" from
the Drop-down list labeled "Color Effect" and set the slider
to 0.
6) Name the current layer "Gradient",
insert a new layer above "Gradient" and name it "AltFrame".
AltFrame is how we control the gradient flow and "reverse"
the direction of play without actually playing in reverse. For each
frame, starting with frame 40, insert a blank keyframe and insert the
following action script:
Set Variable: "altframe" = "1"
Work your way toward the front (frame 1) increasing the value that
altframe is set to by one so that by the time the first frame is reached,
the value of the altframe variable will be set to by the frame is 40.
To make the entry easier, you can select all of the action script in
one frame, then copy, paste and edit it by right-clicking the selected
actions.
7) Insert a new layer above "AltFrame" and
name it "Events". In the first frame of the new "Events"
layer, insert the following action script:
Stop
Set Variable: "start" = 1
// Variable = String, Value = Expr.
In the second frame insert the following action script:
Set Variable: "start" = 0
// Variable = String, Value = Expr.
In the 20th frame insert the following action script:
If (out = 1)
// Condition = Expr.
Go to and Play (21)
Else
Stop
Set Variable: "stop" = 1
//
Variable = String, Value = Expr.
End If
Note: The Else action is added by selecting the "If" action
and clicking the "Add Else/ ElseIF" Button.
In the 40th frame insert the following action script:
Go to and Stop (1)
The Stop variable is used to stop the play head on frame 20 when the
mouse is still over the button. The button we have yet to create sets
the "Stop" variable using the On Mouse actions.
8) In the main timeline, insert a new button symbol
and call it "TransparentBtn". In the "Up" frame
of the "TransparentBtn" insert a new instance of the "Circle"
graphic symbol we created in step 2. Select the "Hit" frame
and insert a blank keyframe ("F7" or "Insert>Blank
Keyframe") Draw rectangle that covers the circle and is the size
that you want the button to be. This rectangle is the area where the
button will be active. Color and lines do not matter in the "Hit"
frame. It is best to make it stand out with a bright fill like red.
9) Return to the main movie timeline and select the
instance of the "GradientAni" symbol and name it "Ani1"
(Right-Click the instance to bring up its "Properties" dialog
box, type "Ani1" in the box labeled "Instance Name:")
10) Type in a text box with the text you want to label
the button with. This text box should be on the main timeline in the
same layer and frames as the rest of the symbols. Position it where
you want it to be in relation to the button. I made the text color the
same as the background of the movie to simulate a Mask effect over the
animation sequence and make the text appear to fade in as the animation
fades in behind it.
11) Edit the "Properties" of the "TransparentBtn"
instance on the stage by right-clicking on the circle and insert the
following action script:
On (Roll Over, Drag Over)
If (active ne "/Ani1")
//
Condition = Expr.
Begin Tell Target ("/Ani1")
//
Target = String
Set Variable: "out"
= 0
//
Variable = String, Value = Expr.
If (start = 1)
//
Condition = Expr.
Go to and Play (2)
Else
Go to and Play (altframe)
//
Frame = Expr., Expression = Expr.
End If
End Tell Target
End If
End On
On (Roll Out, Drag Out)
If (active ne "/Ani1")
//
Condition = Expr.
Begin Tell Target ("/Ani1")
//
Target = String
Set Variable: "out"
= 1
//
Variable = String, Value = Expr.
Go to and Play (altframe)
// Frame = Expr., Expression = Expr.
If (stop = 1)
Set Variable: "stop" = 0
// Variable = String, Value = Expr.
Go to and Play (altframe)
//
Frame = Expr., Expression = Expr.
End If
End Tell Target
End If
End On
On (Release)
Begin Tell Target (active)
// Target = Expr.
Play
End Tell Target
Set Variable: "active" = "/Ani1"
// Variable = String,
Value = String
Begin Tell Target ("/Ani1")
// Target
= String
Go to and Stop (20)
End Tell Target
Get URL ("../tutorials.html", window="_blank")
// URL =
String, Window = String
End On
As you can very well tell, this is the brains of the operation. This
is where you could get lost, but give it a go and see if you can follow
along. Let's break it down... The first If of the RollOver, DragOver
mouse event keeps the active animation from changing as it is rolled
over. Notice "active ne Ani1" the ne is the
"not equal" operand for strings. Setting the variable "out"
= 0 tells the animation "Ani1" that the mouse is currently
over the button. The next if, (If start = 1...) handles when the animation
is on the high end, fading out and the button is rolled over again,
it switches to the altframe, which is on the other side of the 20th
or stop frame and begins fading in again, or if it is at the beginning
(i.e. start=1) it begins play of fading in. On to the RollOut, DragOut.
Again, the first If statement keeps the active animation from changing
as it is rolled out of. Setting the variable "out" = 1 tells
the animation that the mouse is no longer over the button. Since at
this point the animation will be no greater than at the 20th frame (for
the roll out to occur, the rollover must occur first which kicks the
playhead over to the fade in range of frames,) we go ahead and use a
simple GoTo and Play action to continue the animation to the fade out
range of frames. The next If statement (If stop = 1...) frees the animation
to continue past the 20th frame if it is stopped there, and again uses
altframe to kick the playhead over to the fade out range. The "On
Release" mouse event handles when the mouse is clicked on the button.
It tells whatever animation is currently active to continue past the
20th frame to fade out, set the "active" variable to the button's
animation sequence, skips the fade in range and stops the playhead at
the 20th frame of its animation sequence and activates the URL associated
with the button. I told you it was complicated! Is your brain fried
now? Mine sure was figuring all this out!
12) Nope we're not done yet, you still only have one
button! From the main timeline, select all of the symbols and group
them together. Make sure you have all of the symbols positioned correctly
and grouped, this is how you get around having symbols in one unit without
having to have buttons and movie clips embedded within each other, that
gets very confusing! Copy the group to another location. Then edit the
group by double clicking it. Change the text label to what you want
the other button to be. Right-Click on the animation sequence (it is
not visible but should have been positioned to the right of the circle
of the "TransparentBtn". Edit its properties and change its
name to "Ani2". Hit "Ok" to return to the Group
and edit the action script of the button. That's right, the long string
of action script that we just went through. This is easy though. Change
every place that the script makes reference to "Ani1" to "Ani2"
there are a total of six places that it is referred to, twice in each
Mouse event. If you have changed the name of this buttons corresponding
"GradientAni" symbol, you can use the target editor for three
of them, saving a little effort. Repeat this step for each button you
wish to have.
13) Finally, Insert the following action script into
the first frame of the movie containing the buttons:
Set Variable: "active" = "/Ani1"
// Variable = String, Value = String
Begin Tell Target ("/Ani1")
// Target = String
Go to and Stop (20)
End Tell Target
Stop
Change the setting of "active" here to control which button
is highlighted when the movie loads. You may want to have none active,
it depends on how you want to use it.
Notes on using your Flawless Rollover Buttons:
- You can have as many buttons as you wish and they can perform the
functions of any other buttons. To use them for some other purpose,
just replace the Get URL action with the action you wish the button
to perform. The only limitation I can imagine is making them draggable,
but if anyone works up a method to do so, let me know.
- To use them for navigation in a frames site, check the name of the
frame you want to change in the frames page frameset, then insert
that name into the "Window" parameter of the "Get URL"
action. The default frame options in Flash are the generic HTML references
to frames based on position relative to the calling frame.
Version 2 of these Rollover Buttons
has been developed and the tutorial
is now ready. The update demonstrates
how to change the three symbols
as presented in this tutorial into
one combined movie clip for ease
of use. This format also greatly
reduces the overall size of the
.swf file when many buttons are
used. The drawback is the creation
of the symbol itself can be quite
complicated. The logic is the same
as here, but with the added complexity
of working across multiple timelines
automatically. This next tutorial
will rely heavily on the Symbol
Combinations - (Intermediate)
tutorial.
Next
Tutorial: Flawless Rollover Buttons,
Version 2 - (Advanced)
