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.
Pay particular attention to the instructions for this layer. From it you can
build the other three button layers and their motion guide layers that you will
need to complete this tutorial.
Create a new layer below the previous and name it "Section 1".
Place a Blank Keyframe at Frames 3 and 22.
Select Frame 3 and place the Button symbol "Circle 1" (or whatever
you've named your first button) in that Keyframe. In this case we will not
center the button. It needs to be off to the side. However, with the center
point option enabled in the Info panel, place the symbol instance at X:62.5,
Y:0.
Open the Instance panel and ensure that the Behavior is set to "Button"
and Options is set to "Track as Menu Item".
Place a Keyframe (F6) at Frames 6, 9, 12, 15, 18 and 21.
Select Frame 3. Open "Effect" panel (a tab in the Instance panel),
choose the "Alpha" effect from the drop down menu and give
the setting a value of 0.
Select Frame 6. With the center point option enabled in the Info panel,
Position the symbol at X:0, Y:62.5.
Select Frame 9. With the center point option enabled in the Info panel,
Position the symbol at X:-62.5, Y:0.
Select Frame 12. With the center point option enabled in the Info panel,
Position the symbol at X:0, Y-62.5
Select Frame 21. Open the Effect panel, choose the "Alpha" effect
and give it a value of 0.
Tween frames 3 - 15 and Frames 18 - 21. The result for Frames 3 - 15 should
be the symbol moving in a clockwise diamond shaped fashion returning to it's
point of origin and it should fade up as it travels between the first two
Keyframes. For Frames 18 - 21 the symbol should just fade out. This looks
good but let's give it a little more polished look by adding a motion guide.
Select the layer and add a motion guide by going to the "Insert"
menu (Ctrl+click on Mac and PC).
On the new layer insert a Blank Keyframe (F7) at Frames 3 and 16.
Select Frame 3 and create a circular path. (You can do this by creating
a circle and deleting it's fill.)
With the "Use Center Point" option checked, center the path and
give it a dimension of 125 x 125.
Click and drag the playback head over frames 3 - 15. Your button should
now follow a circular path. To make the motion path invisible just turn that
layers' visibility off.
Now, lets set up the button so it will actually navigate! Select the object
in Frame 15 of layer "Section 1" (select the item on the stage not
in the timeline) and assign the following.
on (release) {
playClip(_level0.navigation);
_level0.gotoAndPlay("Nav1");
}
playClip(_level0.navitation0); references the custom function we
set up in frame one of the layer "Frame Actions & Labels".
By placing the function in frame one we can access that function from anywhere
in this timeline or by referencing this timeline from others within a project.
The argument (stuff in parenthesis) tells Flash which timeline to play.
In this case that timeline is "Navigation". Remember, we stopped
playing this timeline at Frame 16 when the Stop action was issued
from the "Frame Actions & Labels" layer.
_level0.gotoAndPlay("Nav1"); tells the referenced timeline
(in this case the top level timeline "_level0") to jump to a specified
label. We haven't created this label or the timeline it exists in yet so
don't think you've missed something.
You can follow these same steps for the remaining buttons remembering that
your other buttons don't need to make the trip all the way around thus you won't
have as many Keyframes. Don't forget to apply the same "on (release)"
Action to the Button symbol instance in the Frame 15 Keyframe for each
button. You'll only need to change the label in the "_level0.gotoAndPlay"
command line.
When finished your timeline should look like this...
There are a couple of things to mention. Notice you can't see that an Action
has been assigned to the Button symbols in Frame 15 (Hint: look at the keyframe
for layers "Section 1", "Section 2", etc. in Frame 15. There
are Actions assigned to Button symbol instances... not frames.). Also
remember that this timeline stops at Frame 16 because of the assigned Frame
Action in the layer "Frame Actions & Labels. This allows the user
to make a selection from the menu that has just been animated onto the screen.
The timeline continues to play when we access our custom function by releasing
the mouse on one of our Button symbol instances. Our custom function
then issues a "play();" command on the timeline we've specified.
Once the playback head reaches Frame 25 it encounters a Frame Action that tells
Flash to go back to and play Frame 1 where a "stop();" action
is then encountered. This timeline then waits to play again until the playback
head is instructed to move to the frame labeled "Activate Nav".
You may have also noticed that I only have one motion path for all four buttons.
You can have individual motion paths or a single one like in this example.
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!
