In this tutorial video we're gonna learn how to make button symbols function in animate CC now before you do this video, it's
Important that you know how to make button symbols
And if you don't know how to make button symbols there are YouTube videos on my channel for creating a button symbol
Creating an animated button symbol adding sound to a button symbol. There's all kinds of button symbol
YouTube tutorial videos on my channel so make sure to check that out
The other thing you need to know is that we're going to be working with actionscript 3.0
So we're gonna mostly be working with the code snippets panel in the ActionScript section if you're using
HTML 5 make sure you're using the HTML 5 canvas
Section and you might not have the exact same stuff that we do in the ActionScript
But they function pretty similarly so make sure to look through there and these concepts should still apply
okay, so let's go ahead and see what we have in our animation and then talk about what we want to have happen with the
particular buttons in this project
We'll hit command return or control enter and as you can see it's a basic sprite animation
We have this ninja run in jump on the enemy run out and the enemy is dead and moves through
We created this really simple version of the animation so that you can focus on just creating the buttons so
What we want to have happen is we don't want the animation to start
Automatically we want to wait and have a user click the play animation button so that we can easily
Jump to that start of the animation and they can kind of choose when they want to start watching it
Then as it runs through at the very end we're gonna have a button where they can download the sprite assets
So they might be able to try this sprite animation on their own
And we're gonna also have a button that replays the animation so they can see it again
this means at the very end of the
Animation we don't want it to constantly be looping because every time it loops
It's gonna loop back to that go button and it's just gonna sit there and wait for him to click go
alright, so let's go ahead and
Start on frame 1 now on frame 1. That's when our animation automatically starts
We don't want it to start on frame 1 because we actually want somebody to see a play button
on frame one and have it have them wait to click it now before we actually start moving things around
It's important to note that I have the actions panel and code snippets panel open
so make sure you go up to your window menu and open the actions and code snippets panels if you don't see them and
Then feel free to drag and drop them and manipulate your workspace. Whatever works best for you okay in the library panel
We have a bunch of buttons already created play button replay and sprite assets buttons
So again watch that tutorial video if you don't know how to make your own button symbols alright
So we need to make space for our Go button and we're gonna do that by clicking down here and dragging
So we can highlight all of our assets so far
And then we want to click and drag down to the next frame or even frame 5 it
Doesn't really matter because we're gonna jump it down to a different point in time
So we'll go ahead and just move it to frame 2 and
That leaves frame 1 open and empty and waiting for our button so we need to create a new layer and call it
Go
button
and
We only want it to appear on this particular frame
We don't want it to appear across all these other frames so for that Go button layer
It automatically added as many frames as we're in your particular project so
Click and drag so you can highlight all those other frames, and then let go when you're at the second frame
So leave the first keyframe alone, and then just highlight all the others right-click and choose remove frames
so that's going to make sure that this go button is only on frame 1, so I'm going to go to my library panel and
Click the play button symbol and drag it onto my stage now. You can call this play start go whatever makes sense to you so
When somebody clicks this play animation I want it to jump to frame 2 and start playing the animation
so
Let's go ahead and see how this works before we've added any script
So we saw a little flash of that button a tiny tiny little flash, and then when it loops
It's gonna come back and show that flash real quick right now
And then it goes away so our first thing to do is add a stop script so that it stops
Looping or playing the timeline on this particular frame frame one
So we'll go ahead and create a new layer and call this actions with a capital A
And this is where all the action script for our project is going to sit
So we'll go to the code snippets panel in the ActionScript section
And we're gonna go to timeline navigation and choose stop at this frame
We'll double click that code snippet in a bit
And it's gonna give you a comment explaining what this snippet does and then there's our code to stop it at this frame on
frame one of the actions layer
You can see a little a and that means there are actions on that particular frame
This is gonna stop our animation on frame 1, so let's test that out command return or control enter
Good it stopped. It's waiting for the user to do something so now they can click on play animation, and it should play it ah
We've got a problem. It didn't do anything well. That's because we need to add
ActionScript to this particular button that tells it where it should jump to in the timeline and start playing
Before we can do this though
We need to actually give this an instance name
so we'll go to the properties panel and
The instance name has to be different than the symbol name so as we look in the properties panel for this
particular symbol
You can see it's an instance of the button play symbol, and the name of that symbol has particularly particularly
BTN at the beginning so we know it's a button symbol
And then I add a unique name that tells me what button this is so this is my play button
When I do an instance name it has to be different than that
But I still want to kind of know that it's a button symbol
And I want to know that it's actually the play button so I just reverse those and type play
underscore BTN
So make sure you don't do put any spaces
And then if you put capital letters you have to make sure that you remember that for later when you're looking at your code ok
So now that that has an instance name
We can add a code snippet to it, so let's go down to timeline navigation, and it's a good idea for code snippets
just look through all these and see what they do and maybe test it out on a sandbox project
Where you just try and see what they do and see if you can make it work so stop at this frame
nope
we don't want to click on it and have it stop at this frame one because it's already stopped at this frame two because we
Want to actually play something with this so we have the option to click to go to a frame and stop well
I don't want to go to frame two and then just stop because then he's just gonna stand there
I actually want it to go to frame two and then start playing so let's see if we have something related to that
So the third one is click to go to frame and play, this is awesome now
There are also click to go to next frame and play previous frame
We could do the next frame and play wherever that is, but we might move this down layer
So so it might not always be the next frame so in my mind
It's best to always just do click to go to frame and play
So with that symbol selected and an instant theme in the properties panel double click on that code snippet
and let's see what it says in code, so
In the ActionScript it now says that play underscore BTN so there you see that instance name in in
well in play in the ActionScript
So it's important that you make sure to add that instance name or else animate will put some generic thing like
button symbol 1
And if you have multiple button symbols you're gonna be confused about which is which and what ActionScript applies to which button
so this is saying that the instance name the object with the instance name of play underscore BTN is listening for a mouse click and
When it hears that mouse click?
It's gonna perform this function now your function might be a little bit different it might still say this name
But it might not be underscore 4 it might not even have a number or it might be a different number
This is just because you can't have the same named function in your ActionScript
This you can't have this more than once and I've done like 8 tutorial videos because I keep messing up with this particular tutorial video
So that's why it looks like
We have this number right here, so don't worry. If yours doesn't say that or if yours is a different number
It's just because it can't have the same name ok so again once it hears that mouse click
It's gonna perform that function and when it performs that function basically, it's gonna go to and play frame
five well our animation doesn't start on frame five it actually starts on frame two so make sure you change this to frame two and
This still isn't the most
Helpful method because what if eventually I move my animation down to frame 20
Then I have to always remember to come back here in script input frame 20
But we'll get into that as soon as we see if this is actually gonna work, so command return or control enter
And it's just gonna wait here and as soon as I click. It should go to frame 2 and start playing fantastic it works, but
as it loops back, it's gonna go back to that button and
Wait again, so we might need to add a stop script at the end of our animation
But let's talk about this real quick again if we move our animation anywhere other than frame 2 then this is gonna become
dysfunctional
Script, so it's a better idea to choose where the start of your animation occurs so you can choose either of these key frames
Usually it's harder with a motion tween key frame because it doesn't tell you that there's a label there
So I know that this animation starts on frame 2
And when I click on that particular frame?
You can also do it on any of these other layers?
It's up to you, but you can add a frame label
So this is where I know my animation should start, so I'm gonna call it start animation
When I click off you can see that on a frame 2 at the beginning of this ninja run layer
There's a little red flag
And then it puts the name of the label if it has space to do so
So that means that in my code, I can actually have it jump to that frame label
And it's always gonna jump there no matter where that is so if later on this frame label is on ten or a hundred
It's always gonna jump there and I won't always have to come back and fix my script
So I just need to come in here and instead of having it go to frame two
I'm gonna have it go to that label
So you always have to put quote quote and then put the label name inside of those quotes
and it has to be perfect so if you capitalize the s and the a
When you created the frame label you have to put it here
If there's no space make sure there's no space and make sure it's all in
quotes on either end of it and inside of these parentheses
So this should mean that it should work again, and it'll work exactly the same. It's just that now it'll jump to that frame label
All right, so let's see if that works click, and it does start playing great
So let's go down to the very end of our timeline
and
let's stop it at this particular frame, so we'll click on this frame and go to stop at this frame and
It's gonna add ActionScript to stop it so it doesn't automatically loop now
We need to add our other buttons, so we'll put that underneath the actions layer and call this end
buttons
Now we don't want those buttons to appear until the very last frame, so we need a blank keyframe here
We'll right-click and choose insert blank keyframe
go to our library and click and drag our buttons onto the stage and
Then put our replay button on this stage, so those buttons don't appear until the very last frame
But good thing we put that stop script because it's gonna stop and wait for you to do something at this frame
So we need to do the same thing here replay button is interesting because you're just jumping to a frame again
And you're actually jumping to the exact same frame so if they click this we want to have it jump to that same frame label
So we'll click on that replay button and we'll do click to go to frame and play now
Here's one thing I wanted to show you if you forgot to do an instance game. It'll give you a warning here
You can click OK and it'll give it a generic instance name, which is never good
So I'll hit cancel click on the replay button go to properties and give this as an instance name of replay
underscore BTN
Okay, so now that that has an instance name
I can go click to go to frame and play and I don't even have to remember. What frame number
It is because I know that that frame label was called start
animation don't forget the quotes ok
So last thing is we need to actually make this button jump to our URL now buttons can do a lot of different things
They can go to a website
They can mute music they can jump to a particular frame they can go to a different scene in your animate project
They can show or hide a movie clip
And I do have a tutorial video on how to use the buttons to show or hide an object
They can start a movie stop a movie they can start or stop a movie clip
There's a lot of things buttons can do so make sure you look through all these code snippets because that'll give you a hint of
The things that it can do so for this particular button that gets sprites will go ahead and call this
sprite
underscore BTN and
After we add the instance name. We're going to not go to timeline this isn't timeline animation or a navigation now
It's just actions, so we're gonna click to go to web page so double click
And it says when the sprite button is clicked it's gonna perform this function again this
underscore five might be different or missing for you and
When we click that it's gonna go to a particular URL, so make sure you have the full URL
We want to take them to game art
2d so they can get these same assets, so we'll click right click and copy notice
It doesn't have HTTP, but it's hidden
It's still in there so that's why it's a good idea to always come in here and copy
So we'll go ahead and paste that and it's gonna take them to that particular website
It's gonna open up in a new blank window, so let's go ahead and see this final project
we'll click Play and
it starts playing the animation and
then we should be able to
Stop at this particular frame click to get the assets, and that's working hit replay go back voila
You're done