|
Menus within
Menus within Menus...
If you examine the
diagram on page 3, youll see that each of the categories in the
services submenu have submenus themselves. Each of these have already
been built for you and are under the clip.m.services folder (clip.m.animation,
clip.m.consulting, clip.m.training, clip.m.design.)
In clip.m.services, we can build the submenu system as we did above in
clip.m.maincategories. It appears as follows:

Recall that in clip.m.maincategories,
we surrounded the services submenu with empty buttons on the top, bottom,
and right side. Because there are further fly-outs for the services submenu,
well have to remove the empty button placed at the right side of
the menu clip or else the submenus will never have the opportunity to
display themselves!
In this clip (clip.m.services), we have to place the same empty buttons
around the submenus. However, well reference a different script.
If we referenced rolloverStart.as, as we did in clip.m.maincategories,
rolling over these empty buttons would cause Flash to still display the
services submenu. We will want rollover at these points to display only
the main categories. As a result, well reference a script Ive
created called rolloverStartSub.as, which includes the following code:
on
(rollOver) {
_parent.gotoAndStop(1);
}
Rather than going
to and stopping on the first frame of the current Timeline, we go to an
stop on the first frame of the parent Timeline, which in this case is
the Timeline of clip.m.maincategories.
Finally, when the clip.m.services Symbol was created, it was created from
a duplicate of clip.m.maincategories. Wed place three (3) references
on three of the buttons in that Timeline (preferences, services, and profile.)
Each of these buttons will go to the appropriate frame Label, such as
1, 2, 3. etc. Because the services menu references four (4) submenus,
we need to add the following include on the fourth button (design):
#include
"xscripts/rollover4.as"
This file goes to
and stops on a frame labeled 4.
Preview the movie. m0012.swf
Limiting
the Motion of the Menu
Our final step involves
limiting the range of motion for the menu to ensure that the main categories
are never obscured from view. To do so, we only need to place constraint
arguments in the startDrag method used in clip.menu. If we examine the
button.empty Instance in the button.drag Layer of clip.menu, we currently
have the following script:
on
(press) {
this.startDrag();
}
on (release,
releaseOutside) {
stopDrag();
}
on (rollOver)
{
mainCat.gotoAndStop(1);
}
We need to modify
the second line:
this.startDrag();
to:
this.startDrag(false,20,7,522,312);
The arguments for
the startDrag method are lock center, left, top, right, and bottom, as
in:
this.startDrag(lock
center,left,top,right,bottom);
If lock center is
set to true, the Instance will align its center point to the edge of the
mouse pointer.
The remaining values are values from the left and top of the screen, and
right and bottom of the screen.
View the file mfinal.swf
and if you like, look at the file in Flash, mfinal.fla.
Conclusion
This is just one method
of creating a dynamic, drop-down or fly-out menu. There are of course,
other methods, such as controlling the visibility of each of the clips
with script. Furthermore, as you continue to use Flash, youll probably
find other methods to use to achieve your objectives.
Robert Ross is
a courseware developer for TrainingTools.com. He is also a full-time instructor
at XtraNet in Toronto, Canada. He has been developing multimedia, video,
animation, and web projects for 5 years. He is the author of many TrainingTools
Learning manuals, including Learning Flash 5, Learning Dreamweaver 4 (with
Charlie Walker), Learning Photoshop 6 (with Charlie Walker) and others.
|