In this tutorial video we're going to learn how to create
animated button symbols in animate CC
So these are going to be really simple animated buttons
I have some more tutorial videos in terms of how to create more complex animated buttons that have
Sprite animations and also how to add sound to buttons on my youtube channel so make sure you check those out
After you learn how to do these basic animated buttons so in this particular project what we want to have happen is
when we hover over this particular
Replay button the arrow is going to constantly twirl and rotate and then as we hover over this mute button
We're going to have this X flash from black to white so that people know that if they click
It's going to mute the sound, so let's see how we do this now you do have to know how to make button symbols
So if you don't know how to do that check out that YouTube tutorial video on my youtube channel
alright, so let's go ahead and get inside of this particular replay button and we will zoom in so we can focus on this and
we have our up over and down States for this particular button and
Each one of them has a base shape for the button, and then this replay symbol
This replay symbol was created with basic graphics in animate CC if you double-click to get inside of this one
You can see that. It was a group together because we have two objects we first have a
Circle made out of the oval primitive tool
and it has a different start angle and angle and an inner radius to create that kind of doughnut hole in the middle and
Then we just created this basic triangle using the polygon
I think the polystar tool
And then change the number of sides and then modified it with the direct selection or the sub selection tool
So it's just basic graphics that created this and those same graphics are grouped on each of these different States
Now what I want to have happen is when it's hovered over on the over state
I want this particular symbol to rotate so in order to do this
I'm gonna click the object the grouped object, and you might not have this grouped it might just be one object and that's okay, but
In order for me to animate the I actually need to convert this to a symbol
So I'm gonna go ahead and click on that object and go to modify and choose convert to symbol, and I'm gonna call this MC
Replay rotate so that gives me an idea that this is the replay button
But this is when is actually going to rotate and click OK
Now when it's converted to a symbol I can double click to get inside of it
So now we're in the MC replay rotate symbol in the button replay in scene 1
So I'll go ahead and double click and double click to get back in there
So now we need to do is we need to actually animate this inside of this internal, MC
Replay rotate now the tricky thing is is this actually needs to be a symbol again
So that we can animate
Animate it on this timeline and not animated out in the button replay because we can't animate it out here since it has
three different states
And that's it or the three different states that we're using we can't do an animation that lasts longer than that all right
so let's double click to get inside of here and
We want to make this one rotate so we need to add a motion tween and again
We can't do a motion tween until we make this a symbol, so let's go to modify and convert to symbol and call this
MC replay
Internal
Internal ok so click OK and we're gonna. Just stay in here. You don't have to get into that symbol again
We just needed to in needed it to be converted to a movie clip symbol
so we could add a motion tween, so now we should be able to go to insert motion tween and
we want to say by this point in time go ahead and click on your tween and
I'll actually click on the end of my tween and I want it to rotate two times
So I'll click two and hit enter/return
Make sure you click on the tween or else the rotate option will not show up in your properties panel
Because it'll think you're trying to change their properties for this symbol and not the tween so
Now by the 24th frame so one second in sense our
Animation is 24 frames per second it will rotate two times
That's gonna. Be really fast for me, so if I want to stretch this out
Can so stretch it out to about the hundredth frame so that means within about what three to four seconds
it's gonna rotate twice and
It'll get a smoother slower animation, and then it's gonna make sure and go back to home
That's why it said to I did it two times right here and didn't rotate with the transform tool
Because I wanted it to be in the exact same position
When it looped back to frame one so that it could constantly be looping in that movie clip
Alright, so let's go back out to scene one and let's do the animation for the mute button well double click to get inside it
Again if I double click
This is made into a group so I group these items together
And these are all just made with rectangles, and this one is made with the polystar tool, or a rectangle that was
Messed with with the subselection tool to bring these two corners in
Alright, so let's go back out and on the overstate
I want this particular graphic to be a movie clip so that when somebody hovers over it it animates
So I'm gonna have that group selected and go to modify convert to symbol and call this MC mute
Flash so that way, it's gonna flash black and white that that x4 mute. Okay. We'll click OK and
It already says it's already taken
Because I've done this one before
So I'll just put mute flash 2 and click OK
Now when I get into it. All that I need to do is change the flashing now
There's no motion tween involves, but involved with this
It's just a change in color
So we don't have to do that convoluted symbol within symbol within the button symbol like we had to do with the replay
so from frame 1 to frame 10
I kind of like it to be white so I'm gonna go ahead and go to frame 10 and hit f5
So that it lasts for 10 frames and then on frame 10 or 11 well
Yeah, this is 10 on frame 10
I want it to look a different way, so I'm gonna hit f6 on my keyboard or go up to insert timeline and choose
keyframe
So that's gonna
Give me a second copy of this graphic that I can now get into and change these - X's - black
Okay, so from frames one through nine. It's white on frame ten
It's black and I also want to want that to last the same amount of time, so I'll go about nine frames down and hit
f6 no undo ctrl Z or command Z and
F5 just to give it a frame we don't need a new keyframe f6
We'll add a new keyframe f5 will just add frames so that it adds more time
So basically it's gonna stay white for ten frames black for ten frames and then loop back and do white and then black etc
so let's go ahead and
go back to our scene and
Zoom out and we're gonna test out how this worked actually we're gonna zoom in a little bit so we can see this
So the best way to work with buttons and test them out is to go to
Control and choose enable simple buttons so with that simple buttons enabled. I should be able to
hover over each one of these and
Well, it doesn't seem like that's showing it's probably because they're movie clips
So we'll go ahead and change and take that simple buttons off
We're actually gonna just test so you can go up to test or you can go to test movie in animate or you can hit?
Command return or control enter on your keyboard
So as I do this this particular game has a go button at the beginning
And then it has music and that music is a little overwhelming so I'm gonna go ahead and play it and then talk
(music playing)
Okay, so I just muted the sound with that and now when I hover over the replay you can see that it
starts such whirl and
Then when I hover over the mute button you should see the X
Flashing so that's a really simple way to create animated buttons as to nest movie clip symbols
inside of your button symbols on whatever state you want that animation to occur whether it's the Upstate the overstate the downstate
Ignore the hit state that that part. You can't even see so there's no point to doing animation on the hit state