AnimateCC Play and Stop Buttons

hi in this video we're going to make buttons and make them interactive in animate CCS so we're going to use ActionScript 3 so what I mean by that is if we go to file new we're going to create an ActionScript 3 document what we're creating I'll just play this little animation stop and a play button buttons stop and play their motion so to start with I'm just gonna quickly delete one of these buttons so that you can show I can show you how I created it to create a new button it is insert new symbol and under type you need to select button give it a name ok now you need to create your button like draw it so I'm going to draw a little square these are the different states of the button up is the button normally where nothing's happening to it over I'm gonna insert a new keyframe is when the mouse is over the button so I'm gonna have the button turned red when the mouse goes over it down is win the mouse over and you're clicking on it I'm not gonna do anything for that but you could make it change color hit is the shape it uses for collision detection so I'm going to insert a keyframe and just leave that frame in there so that I've got that shape the same shape is the rest of the button so it knows that that's the part that we want to decide whether or not the mouse is hit it or not get back to the scene and now in the library I've got my stop button and I can drag that in just gonna use the mouse so I'm using the keyboard to move that around this particular button and has properties and an instant incidence name that that means that I can have multiple of the same button and have them do different things so we need to actually name this button so I'm going to call the stop button if we look at the play button next to it it's called play button so we're going to refer to those names in the ActionScript so that's why I would name them the ActionScript I've made a layer for the ActionScript to get into the into we right click and click on actions unfortunately you can't see it because my I've only how many sampling so much so the screen size but the last option in this list is actions and it will get up bring up this code yours obviously will blank because you haven't written any code but I'll explain this code and what it does this first line here imports the ability to do Mouse events within the animation you don't actually have to write it once you write some of this code down here it'll put it in there for you but you can write it in there if you want these bits of code with a double slash that you can see they're faded out grey the double slash means ignore it so basically these are just notes for me or someone else looking at my code so that I can remember what the bits do so the actions could persist he doesn't actually read or do anything with these these lines they're just our notes for me we have functions and this particular animation we have two functions functions are a bit of code that you can call generally speaking with a more complicated program you might call and reuse them and lots of parts of your program and this case we're only going to call them in one little bit of code but function is a reusable bit of code that you can call to typing function to tell it it's a function click stop is the name of this particular function I could have call it whatever I want it's just a name with I could have called it gobbly if I really wanted to but in this case just for being sensible I call it quick stop it's an event that's a mouse event so it's something's happening with the mass in between the curly brackets is the actual code for this function that's what's gonna run when this function is called in this particular case all it's doing is stopping the animation that's what all this code does it a function is really usual bit of code this one's involved using a mouse and it runs this bit of code to stop the animation this bit of code here is for calling that particular event so this one stop button this is what I'm telling that msec that were referring to that button that I could that's the name of that button if you remember it's adding a listener and event listener to that button so it's telling the the animation to look at that button to see if anything happens through that it's something that happens with them and in this particular case math up means that someone is clicked on that button and the list for the math point point on that button and what what will happen then is it will run this function this is click stop is russain telling this event listener to run click the quick stop function that we created and that will stop the animation the second half of this code is doing the same thing with the play button so we've got a function I've got a click play I could have call it whatever I wanted to call it that's what I called it it's a event and it's a mass event and in between these curly brackets is the code that the function will run and in this case it'll play the video we need to call this function so the play button that's the little triangle button that particular instance of a button is called play button we're adding a listener to that button it's the Mouse event and the mouse is clicked on that a released it'll run click play and that's how this code works and that will create your buttons

Channel: Mark Rotondella

Views: 16,534

Keywords: Animate, CC, Flash, Play, Stop, Buttons, 2018, Animate CC

Id: lEA4N9HULhs

Length: 5min 37sec (337 seconds)

Published: Fri Jan 26 2018