in this tutorial video I'm going to show you how to create a button symbol in adobe flash
a button symbol is a unique type of symbol that has four different states that let people
know when their hovering over a button and when they've clicked on a button and what
area of the button is active so let's preview our animation and see what kind of buttons
that we can create I'll do command return or control enter on a PC okay so with this
animation as you can see it automatically started the minute I previewed this video it didn't give me a chance to
click and say play and then at the same time it stops and then it just sits there so I can add
two buttons to my project I can add a button to the beginning that's going to allow
the person to choose when it should start playing and I can add a button to the end
that allows it to replay and I can even add a button that's gonna mute the sound for now
were just gonna create one button for the replay action the first thing you need to
do for a button is make sure that it has it's own layer so I'll go ahead and call this layer
replay btn for button I made sure that all my other layers were locked so that it didn't
interfere with them in any way now the first time that you create a layer it's going to
create one layer that's as long as the longest part of your animation and the first frame
on that layer is going to be a blank key frame because it assumes you want to add content
to the first frame of that new layer however because this is a replay button I could've
added if this was let's say the start button then I do want that button to appear on the first frame but unfortunately
this is the replay button so I want it to only appear on the very last frame of my animation
so I need to add a blank key frame here I'll go to insert time-line and blank key frame
or f7 on your keyboard as a short cut so now I have a blank key frame on that layer that
I can start creating my button with now here's one way that you can make buttons you can
go to the window menu common libraries and choose buttons and when you open that up it
has a lot of different pre-made buttons that adobe flash has already created for you so
if I toggle down with the buttons oval we have a blue button and a gold button and I
have a rectangle LABEL aqua rectangle flat blue so it's gonna try to create some stylized
buttons for you and you can change the text on those buttons and sometimes it'll even
have the up over down and hit states on those buttons for you but were going to create
our own this is just an option for you if you need it we're going to create our own
so I'll go ahead and click on that key frame that very last key frame of my replay button
layer and I'm going to grab a shape so I'll do the rectangle and let's say I want to make
it about fifteen rounded edges and I'm gonna do kinda of a hot pink and because this is
a kids animation I'm gonna make it really easy for them to press this button and
read this button so I'll make it really big and I can move it around if I need to and
that's the start of my button and I probably want to add a stroke so it's a little bit
more defined from the outside edges so my buttons going to include both a shape and
text it could just be text but you have to make sure that that text is still easy to
click for people so now that I've got my shape down I'll grab my text tool and I'll change
this to let's do chalk duster and white to CORDINATE and I'll type replay and it looks
like that's right aligned so I'll do center and make it much bigger and try to line it up oops lets go ahead
and make I have a bunch of different settings here from a previous project so now I have
my replay button ready to convert to a button symbol so I need to make sure that I select
both the shape and the text that make up that button so I can click and then hold shift
and then click the second object and it'll high light both of them and go to modify and
convert to symbol now I need to change this to button and I'm gonna call this btn replay
this is how I always name my symbols I always give myself um a couple of letters to show
me what kind of symbol this is so it's either btn of gfc for graphic or mc for movie clip
and then the first letter of every word after that is capitalized and I make sure to name
it a specific name so I know what button this is I'll click okay and now this has been converted
into a symbol if I go into the library panel you can see I have the button replay symbol
here I can click here and do the up over down and hit state but I actually like to see it
in context with the rest of the graphics around it so with that symbol selected on the stage
I can double click and know you can see I'm in that button inside of scene one and my
time line has up over down and HIT states this means that when it's up when a mouse
is not over the button it's gonna be pink and it's gonna have the word replay when a
mouse hovers over it I want to change the color or the way it looks so I want it to
be the exact same size exact same shape the exact same font I just want to change the
color so instead of trying to remake all of this I'm gonna hit f6 on my key board which
is the same thing as doing insert time line key frame and it's gonna copy whatever content
was on the key frame right before it so it made a copy of that pink square and that replay
text now all I have to do is click on that shape and change the color and that's a little
bit crazy so I can go ahead and do that and then my down state I can hit f6 again and
go ahead and change maybe the background for this one I want it to be blue okay and then
the HIT state is the active area of that button so you want it to be at least as big as the
entire button and the text it contains and if you want it to be a tiny bit bigger this
buttons already huge anyway so it's not necessary but if you had a tiny little button down here
you'd probably want to make it a little bit bigger for people who have problems with the
mobility of their hands but otherwise this HIT state I can create a new HIT state that's
based on the shape but if you don't put anything there it's gonna take whatever shape was in
the DOWN so we'll just leave it like this so we'll go back and let's go ahead and do
control enable simple buttons and now you can see when I'm off of the button it's that
regular pink and when I hover over it it turns green and my mouse changes to a hand icon
and then when I click that's the down state so when it's pressed down it turns to that
blueish teal color so that gives the user an indication that this is an interactive
button that they can click and the HIT state allows it so that even if I get this close
to the button it doesn't change the HIT state is the exact shape that the button made so
as soon as I touch it it starts to change now this buttons not finished it doesn't do
anything it's just a graphic right now what we need to do is we need to add action script
that tells it when somebody clicks on this button it should go back to the start of the
movie and play it again we'll get into that in the tutorial video on action script two
point 0 and another tutorial on action script three point 0 so you can see the difference
in the same button between the action script styles