Drop Down Menu and Linking It: Flash Tutorial!

Check this video out at Hi-Res here: http://www.tutvid.com/tutorials/flash/tutorials/dropDownMenu.php

In this tutorial we will start from scratch and build a navigation bar and then convert one of

the buttons to a drop down button. We will also learn how to link the buttons within the drop

down to sites and pages out on the web!
Check out www.tutvid.com for more videos and downloads!

---

Closed Caption:

orey welcome to the v_ tutorial brought
to you by updated dot com
here on this video tutorial using flash
eight n actionscript two point how we're
going to create the strata manure i'm
going to explore it and show you exactly
x like we roll over a button the button
like top
and the case of contact but we'd
actually set up
you drop down menu
and it's the drop in when you're going
to create
and you see it's got buttons inside of
it
that we can use
the rest of the buttons i have not
create drop them each part
but by the time he finishes tutorial you
are going to be perfectly capable of
setting up buttons
on your own
so let's get started creating new flash
document and okay
going to select the canvas and we're
going to come in here to the size of a
change the size to six hundred
by three hundred
the frame rate twelve
okay class proffesional
we're going to name the first where nad
bark
buttons
and we are going to
our buttons here
going to select or fill as the plaque
two-way gradient
there to the bottom of the color picker
that's going to draw up your rectangle
sucked the properties pala change the
width to one hundred and height to try
twenty
i'm going to grab phil transform tool
andrew tate egregious going straight up
and down
chica asked like that
nikunj again a little bit move the
center of the gradient
spread out a little
just like that perfect
i'm going to select this button
i'm going to create a button symbol f
eight
select type
and we're going to mean this
matt bargain meet again
so they really creator first button
and what we need to do now is go inside
this button
and we're going to hold in the old keith
or the option key if using a mac and
dragged artwork of the hitler
and uh... we're going to select the a
player again and this artwork we're
going to hit as they can convert this to
a movie clip symbols under tight that
movie clip
and here we're going to saint no borrow
bt yan
this is the but
hurts not really a button some movie
clip
inside of that button
but that's beside the point
we're going to hold out hope again and
duplicate the up frame it's the over
frame
only over free because this is a movie
clip we can't edit the color properties
of it
select that movie clip
properties panel
color brightness
and set the brightness to twenty
so it's going about twenty percent
brighter
was among rolls over it
correct scene one
and we're going to duplicate this button
for times
just like that
i'm going to hit
washing to select them all and i'm going
to hit commander control k and this
brings up your own twine
now the align talent has this option
called to stage we want to make sure
it's d selected
that's what it looks like that that's
selected managers decide it looks like
that
what we're going to be doing centuries
aligning these objects to reach other
so i'm going to hit
align vertical centers
c_f_ pulls all vertical centers up
and i also want to a water space excuse
me for a myspace at myspace evenly
horizontally
just like that
german in
a little bit now i'm going to check to
stage and now i'm going to want to
vertical center of the stage
case instead of a line vertical centers
of themselves
no one ever to sound stage
khmer controls k excuse me gets read of
the align pal
now what you want to show you have
selected under snapping a snap to align
what is going to do is when we select
our bonds because essentially just click
them together just like that
we go
click them rights
there we go
so now it looks like we have a seamless
bar here
but really
their individual buttons
adequate command
we're commander control enter excuse me
you can see we can roll over individual
buttons and they light up
exactly what we want to
let's create a new era name text
click
now this lehrer we're trying to create
some text
i'm gonna lock a nap or buns layer and
bring dislike that little colored box
there on that layer that's going to give
me a outline i don't know if you guys
can see i'm a double click on larry
property change the outline color to
dark blue
that ought to be a little easier to see
it means we have changed around us
ignore that the hum
so we've got a outlined here and alma
textile air
actually don't sit down one point yet
get a little ahead of myself
got a textile and set your filter white
stripped down
and just take the word home
just like that
right here we have this as the aerial
font face and we have twelve as our size
noble no doubt
and also makes you a line
this tech center
which makes it easier to edit later on
if you were to change this words
something different
price we've got home pulled down all
ltte and shift and just pull a copy out
and holding out shift constrained she
dished rate online
although we are
slightly inclined in there
so we're going to
change this text
to keep were
contact
and this word to world history
and this word to the work
that help
analysts not least will change this to
something like
type feared because not really that he
has to throw in there
all right so because the nap or buttons
layer is locked we can ask select all
the text connecticut okay to bring about
wine gala
uncheck to stage camera want all these
to their vertical centers
there we go to a little bit better
amarasgn species of course not actually
with a space was often just a minute
terminal
off the visibility of both layers your
second birthday outline though
what we can do is select all of these
and we're going to drop into the very
middle of our bar just like that looks
good
adjust
words so they're in the center's
approximately of the buttons that day
gobel wanted to the top three button is
this town buttons that
we've got a text
of the home and tight fit aligned
response don't worry about the ones the
center we're gonna fix that just a
second
select them all
bartel flash to space them
evenly horizontally
so it's gonna centered these three in
between the two
and
piece of text
so now those three
piece of tax or one of the button
exception to help
which needs to be adjusted just a little
bit to make it look
just like that connecticut ok gets rid
of
the i want out
and we can put theirs layers back to
normal film urge that they normally are
we want to create symbols out of peach
of these piece of tax from him every
movie clip symbols by the way
and you can say home
t x t
and see
art i'm going to do with the rest of the
menopause
this movie piloted a i'll be right back
so i'd have all of these as our movie
clips named his street exeter turks are
all right we are going to
create a new layer and call this contact
menu
and i am a misconduct many because for
each of the drop down menu should have a
separate lehrer we're only doing contact
many in this video but
just for you
making other menus
you don't want it
put each menu on its own layer am
at least doing it this way
because that's who make a much easier to
edit in the future you could actually do
everything auto meyer but
i'm doing it this way
so contect menu which got somewhere here
we're going to grab the rectangle tool
sekhar color tui light gray
and control out rectangle
grab the properties ballot
and make the width one hundred remember
when they're buttons one hundred pixels
wide
so we want
this to be one hundred ex-wife
and we're also going to
sat r height to seventy five
yeah yeah will either to me five because
we're going to curb on sixteen pixels
tall
so that'll be about five of them right
now
because we've snap to alliance like to
begin a great beneath the contact button
and it's going to alliant perfectly with
the edges the contact them
so it's very nice ridge selectmen email
and we're going to prepare to a movie
clip symbol as well
and we're going to mean that menu back
so no systematic gentlemen you're it
double click into it
and we're going to create a symbol of
this
rationing this mainu back
related name that layer back
retreat to new layers here rimming the
top layer ads for actionscript
and this middle layer of engineer mask
on the middle layer we're going to draw
a mass grave now which can make the mask
green something easy for you to see
and stroll the mask mover
the entire
right we have a right click on the mask
layer exit before recording a mask where
select the mask f_a_
cover symbol
pretty movie clip symbol and name it
menu mask
okay we are now going to ray click on
that layer and move down had mask you
can see we can see our menu
now what we need to do is
our flash movie is twelve frames per
second
that's frame rate of our movie airs
so we want this man you come down and a
half a second sort of come out of the
six
frame and we're going to insert the key
frame there
now what i'm going to do is i'm going to
unlock both of my own mask and back
players here and you can see the mask
automatically covers at the back where
when everything's on walked
out here on the ski frame we want the
back to be completely showing
assured the first frame we want the back
to be hidden
so i'm going to hit q which is the
hockey for free transform
going to hold the all key i'm going to
push my mask
the reason i hope all this because i
don't hold all you can see crashes into
the middle
threshold all to push it up
just like that
so the mask is going to start out of
here for a lock
these layers now you can see that the
back where completely disappears
but because that mask is a movie clip
weakened motion tween
so i'm going to rate click between a
steep
key frames and hickory motion tween
what this does is it shoes the drop down
menu just like that
now what we need to do is create to stop
action one on this for strength
over close princy
semicolon
going copy that
move over to the strength
at the actions palak
and paste it there
so we now have our stop
actions at both ends of this
drop them in
that's going to prevent the movie
or this
drop down from playing
and once dropped as playdates this topic
and so it doesn't just keep repeating
what we need to do is
trigger distraught them any to play once
i mean roles are the contact lenses
selected
their contact menu key frame
and you're gonna see there's a center
reference point
of the menu back
each click that
and that's going to bring up the movie
clip properties daniela properties panel
we want to give us an instance name of
let's just call it
contact menu
we're going to
come over here to map or a bunch of
unlocked and select the contact button
breathe the actions pallet and we're
going to say on over parentheses
role over overthrew the capital of
clothes princy
open curly bracket a curly brackets by
the way are between the p ki
and slash ki
rate above
the enter key for the return key
hit that return key twice to put a close
curly bracket there
we've got to lying to one i'm on rite
now and type
contact
menu with a capital m
seek instance name which created
play open close princy semicolon so on
rollover contact when he's going to play
bypass
that sab actually put it to be getting a
bit and play
if we export the movie we can see the
only rollover contact
drops of any doubt
but doesn't take it back up
let's take a right now
come back to the contact many and
doubleclick pat reference point
to get inside of that movie clip
select the mass clarinet new layer
skip a new layer above the mask
and name of this
flame bt m
because what we need to create is aid
button that surrounds they struck down
area
that one or use a rolls over that
it pulls this backup
so organ trade is key frame out to hear
because it's when this comes down that
we want this button to appear not when
it's
coming down and i want up
become a problem
we're going to dry grab the rectangle to
excuse me and we're going to create one
thin rectangle just like that
using them on the scale of it
now i'm going to move the server to the
very edge
of the menu
and the holdout ault and shift
duplicate intrepid over a copy of that
now i'm going to copy that and paste it
so that they're going to hit free
transform
and legal route eight this holding shift
to make sure stays perfectly straight
and move this tata just a menu we don't
want to go but the button
community that
just like that
given a copy and pace that again
and this stand the bottom
now there's going to select and cut off
these top wings pennies pot of wings
here using the direct selection ki
virtual excuse me i'm just
gravel with the selection
now i'm going to select that
frame is now one sheep
an american birthday to assemble
in movie clips are a bunsen blacks
usually not a movie clip a button
and we're going to call that frame bt n
we're going to kid fierce no we don't
need to this instance name actually
what we're going to do is
set up a couple more frames actually one
more frame to be specific
so i'm going to a selectors frames i'm
going to hit insert key frame
melt the mask
i want the mask at this point i'm going
to shut off that frame button blair
the mask i want to go all the way back
up again unlock those layers
and to select that mask
with the free transform tool holdout
altogether
anshul crunch it back up
so it's cut instantly hide
when it goes to that frame
it's very good and it we are going to
clear key frame
to get river frame button at that point
because we're not going to need
the manual of the spirit that point
we only want this frame button to appear
for though one
framed that that's not actually set
alright then that we are going to come
over the ski friends actionscript layer
and we're going to set this action to
girl to and stop
princy which can have one
because what that's going to stake a
straight back to frame one and just stop
the movie there's are a stop action are
but worse was a good to a stop because
of that was software gets back
so email what we need to do
is
we're going to select this
frame button
rib action and say on
rollover
vocal curly bracket close curly bracket
we can either say next frame
ghar now i've been extra network or a
little more which was a pleasure
keep a nice and simple
just like that
and now
watch this export the movie
i roll over
and of course the frame actually shows
up and we need to make that frame
invisible
for at the point that out
we do a different visible by double
clicking on it and just dragging this
rate over the area
now there's no artwork on up over down
so it's invisible
you can see we go back out
it's now this trick ways color
that's just telling it there's a hairy
their and the button is in fact
invisible
let's play this movie again
you can see
that when i come down here it's open and
my rollover it goes away
now the only problem is
because we put that lol
frame going across the top
you can see it doesn't go away
one of you
very goes away sometimes
if we just uh...
wait on the button and then roll down
we need to take care of that obviously
and the solution is actually quite
simple all we need to do
is select that button hit q and stretch
this out
stretches and the frame rests on the
very top of the button
okay that's going to provide us wraxall
hitting it
and also just right click on this list
for a minute and certain blank kiefer
and that's all i frame but meyer now we
have framed definitely disappears iraq
continues like playing the seventh so
now you can see what we wait we can just
move down into this and i would come up
out
or move off the side of the spear spd
so now the top
all that's left to do excuse me is
placed buttons on this drop him a u_n_
link them up to website or whatever you
want it
so let's go ahead and do that
let's get out of here
and what we need to do is create a new
symbol
so we're going to do that by
hitting and search
new symbol
and creating a symbol to sway is
essentially you're creating the symbol
beef recreate the artwork usually we
create your working cover to assemble
doing it this way you create the symbol
before you control the artwork
so we're going to create a button symbol
here and we're going to call it
nenu
inner
bt m
because these are the inner buttons of
that many that's going to drop down
we're just going to create a simple
little but here
grab the rectangle tool we're going to
grab this light gramps
try rectangle
grab the proper album sipowicz to one
hundred which happens to be the exact
with afoot
or regular navigation bar buttons and
that many of the drop stamp emigrants at
the height to fifteen that we can fit
five of them in there
we are going to make this in movie clips
and
f eight movie clip
am i reading this menu
inner
movie clamp
button
and only confuse somebody all right now
on hold on the alternate option can't
ride that upstate over the hit state
sort button is clickable
uh... and we're going to duplicate that
upstate to the overstay as well select
the overstate
selecting the click and
adjuster brightness now the bravest
we're going to city negative twenty so
this is getting a little bit darker when
you've roll over it
now we'd like to see you on our but has
completely disappeared
is resting over here in the library
and is right here menu inner bt ur
utica play it
and it gets darker
so that's
are button
now what we need to do
is
get that out here and get into our menu
so what we need to do here
select the contact many lair
doubleclick back in there
now we want these buttons to be masked
off as well so create new layers inside
and ask you to get by selecting at baka
layer
and creating a new layer and the new
layer will automatically be in the mask
but we're going to create
that's a four buttons here
and we'll just do what i did before with
the buns
well name them
you
mii
c_e_o_
and
hendry
man
so we've had four different labels here
for four different buttons
and on each of these layers we're going
to place one of those
so many grab movie clip in a select the
you layer
and replace it great out here
made on walking back player
so i can see where i need to place these
remember snap to align is still turn on
cisco limine nicely in a corner
we hold any all key actually close the
library
going to select that button i'm going to
hold any ulti and duplicate up to me
layer
and then click and drag
dragnet rate down
ault drag up to see uh... layer
i'm going to drag this loves
dragnet click it into place
and i will do the same here
with that last button
so just like that we have our buttons
and their protest the movie nell
we had these buttons hall buttons light
up
now one thing i quickly want to do
before we go and make all of these
buttons individual buttons
click inside of this button
and i really shit done this before i
created overstate
i didn't
where you take the
darkest gray just before you get the
black and i'm just going to type
you
you with a capital y
because you is the first button
berkshire at the tax probably should
have size down to about ten
just like that
and one other thing we want to do is
align this left if we align center and
we get to words that are any more than
three letters
the worst mister spilling off outside of
definitely don't want that
now noticed that the issue
has been placed all the rest were
buttons has because he chose buttons are
simply instance of this button
this bit of text of moved to the
overstate anne
control
or command shift the pace that rate in
place
so now all these buttons having you on
both the over and the upstate sc
now i did not convert the text of simple
so dogra dissemble we're going to do now
is caught the modify symbol and
duplicate this symbol as well and we're
going to name this you bt n
we're going to select the second one
before modifying symbol duplicate sim
recently
ni bt n
missile at this one
modify symbol
and this is the
c_e_o_ beating him
and on the last one is the angry man
bt an
got that a little off screen there
rate they're angry man beating up white
now what we can to is doubleclick inside
each of these
and i can switch this to you
medicine for the overstate
just like that
to the same here
c_e_o_
c_e_o_
and
last but not least
angry man
delicacy in one way to test the movie
and you can see olver buttons
are perfect
right in their they've got a text
all that's left to do now is link them
up with something
so
in order to do that we are going to go
back into
our contact menu here
coble click back into it resume at a
little bit
and all you need to do is such a pretty
simple
he select the button we'll see you
acts of husseini because we're gonna do
my website
which is
gracie on
renewed
police
when the user releases the mouse button
after click
open close curly brackets will b c get
in all lower case and then you are
eleanor uppercase
parentheses
h_t_t_p_
colin four slash four slash but
before you do that yet the cheap
apprentices by the way
h_t_t_p_
colon four slash four slash delete to
delete dot
tempted dot com
animal say com ar
and we'll say underscore blank
now will open it any blank window
and finish the lined with a cynical
of course
close those parentheses they're around
dot com
we quickly checked the superscript as
any errors contains no errors perfect
and mail
breed export this
many drops down to click me
and up pops
firefox
just like that we have created a drop
down menu with with the buttons in it
and
there you go that's it
i hope you are something from this one i
hope you enjoyed it please go check the
site out the site is that we delete
delete dot tut in dot com
and thank you very much for watching