Featured FLA
» Author: Bugra Ozden
» Title: Skatalog v9 - product catalog
» Description: Create your product catalog easly and publish on your website or Create your image gallery, documents list, portfolio. Fully XML Driven
» More by Bugra Ozden
Featured Site
» Posted in the Flash Kit Links section
» Title: Creative DW Image Show PRO
» Description: Creative DW Image Show PRO is a Dreamweaver extension which enables the user to create multimedia presentations. It combines the features of the popular Creative DW Image Show with the ability to add professional text effects to slides (similar to After Effects). The product is very customizable: the user can choose the duration of the transition effects, the slide motion start and end position, zoom and panning type for both images and texts.
For this tutorial we'll just duplicate the above movie.
It goes without saying but to be thorough... open Flash 5. Create a new movie
200 x 200, 15fps. We'll start by creating most of the symbols necessary to
complete the project. To apply this menu technique in a real project you may
have to go about creating pieces as you go.
Create a new Button symbol and name it "Center".
(This will serve to activate the menu.)
Create two layers, "Dot" & "Text" with the "Dot"
layer on top.
In the "Up" frame of the "Dot" layer,
create a circle 20 x 20, filled and stroked with black and center it by
selecting the center square in the right hand section of the Info panel.
On the same layer with the single keyframe in the "Up" frame selected,
click in the "Hit" FRAME (not the label) and press
F5. You should now see a continuous grey bar from the "Up" frame
to the "Hit" frame.
Again, on the same layer in the "Over" frame create a new Keyframe
by pressing F6. Fill the circle with a different color. This will allow for
a color change to reinforce the fact that the button is actually active when
rolling over it with the cursor.
In the "Over" frame of the "Text" layer create a new
keyframe by selecting that frame and pressing F6.
In the same frame and layer place a text label on screen to appear centered
and directly under the dot.
With the same frame selected click in the next frame over and press F5.
Your text will now appear during the "Over" and "Down"
states of your button. Do not allow the text to appear in the Hit frame of
your button unless you specifically want the text to act as an activation
point for your button. Use of text in this manner usually results in a strobe
effect. If you want the text to serve as an activation point for your button
create a box the size of your text block and place the box in the Hit frame.
In the Library palette duplicate the "Center" Button symbol
4 times and rename each one differently. (I used "Circle 1", "Circle
2", etc.)
In each new Button symbol change the circle shape fill color in the
"Up" and "Over" frames as well as changing the label name
in on the "Text" layer in the "Over" and "Down"
frames. (I made each fill in the "Up" frame of each symbol different
to make it bluntly obvious which button I was dealing with.)
Go back to the "Center" Button symbol and open the symbol
for editing.
Double-click the circle graphic in the "Up" frame. (Double-clicking
ensures you've selected the fill and outline of a shape.)
Select "Convert to Symbol" from the "Insert" menu or
press F8. You should see a new Graphic symbol appear in the Library.
Name it "Dot" and ensure it's centered by again selecting the center
square in the right hand portion of the Info panel.
Create a new Graphic symbol in the Library and name it "Background".
Open the symbol for editing.
Create a circle. Select and delete the outline. Using the "Info"
panel, select the shape, resize it to 150 x 150 and center it. Fill the circle
with a dark blue. Close the symbol and return to "Scene 1".
Again, create a new Graphic symbol in the Library and name it "Mask".
Open the symbol for editing. (We're going to make the "net" that
catches mouse roll over/roll out events which in turn will deactivate the
menu.) (Follow these next steps very carefully!)
Create a square shape. Select and delete the outline. Again, using the "Object"
palette, select the shape and resize it to match the window size of your movie
(in this case it's 200 x 200). With the center point option enabled in the
Info panel as before, position the shape centered on the "X" axis
and slightly below on the "Y" axis. (Mine is set to X:-100, Y:-85.)
Fill the shape with a neutral color like gray.
Open the symbol "Background", select the circle shape and copy
it.
Open the symbol "Mask" and "Paste in Place" the circle
shape over the top of the gray square shape.
With the symbol "Mask" still open, deselect the circle shape by
clicking in the area around the two shapes now on screen.
Reselect the circle shape and delete it. We've now punched an exact hole
through our "net". I'll explain the madness later.
Jason Lampitt is an Interactive Developer for a major media development firm in Englewood, Colorado. He has a background in fine art as well as graphic design and has been developing multimedia titles for the past 6 years. Jason has a passion for bringing design to life through multimedia and helping
others to understand the sometimes complex and confusing world of
interactive development. In his spare time Jason is an active outdoorsman,
mountain biker and family man.
Tutorials Home
Tutorials » Interactivity/Navigation
Hidden, Animated Rollover Menu's: Flash 5 Update!
