Hello there are over media is back with a basic timeline control tutorial to create, play and stop buttons using Flash ActionScript 3.0. In this tutorial, we are going to see basic action scripting in Flash ActionScript makes flash special by working on the interactive experiences. In this file, we'll create an animation which can be controlled by the play and stop buttons. We started with ActionScript 3.0. New File and Save it. Name the very first layer as animation where the actual animation will take place.
Draw a circle and convert it into movie clip named Baldwin. Let's have a quick and simple animation for the ball here. We have just shifted the bonds position Now, add a new layer and name it action where we will work on the action script. Right click on its blank frame and select actions to get the action panel or simply press f9 on the keyboard for the shortcut given give the stop action do it. That means even if you taste the movie clip now, the animation won't play for now, because it's been stopped with the action to it. Now, it's time to add the play and stop buttons.
Add a new layer for them and name it as button. Go to Windows menu, common libraries buttons. Here you can find all the preset buttons which can be used. Go through all the buttons, but pick out the needed play and stop buttons and drag them to the stage on the button layer. If you test now, play and stop buttons may animate, but won't work for the ball animation. We need to add ActionScript for both of them.
So, going back we need to add the instance names for the buttons. You get the instance name field in the Properties panel. Name the instance name for the play button at play underscore btn. And for the stop button, name it as stop underscore btn. These are the names which will be used for the scripting. from Windows menu library, open the current Documents Library.
Add a folder as movie clip and shift the ball one movie clip into that folder. Similarly, add one more folder as button and shift both play and stop buttons in that folder. folder and naming system helps in fast working, especially for big files. Now, shift the action layer at the top most position in the timeline, it's time to add the actions for the buttons now. So again, select the action frame and press f9 for the action panel, we will first add the action for the play button as the ball is already stopped. Here, we add the function to start on the mouse event.
And below that, adding the event listener along with the buttons instance name Just read carefully how the action is actually worked out. Let's check the movie. Click on Play button, and it's really working right? This is nice. So let's add a similar action for this stop button. Write the function and mouse event.
Add the event listener to the stop, underscore btn which is the instance name for the stop button. If you notice, between the function and event listener, we have added open and close brackets inside that open and close bracket We have added the actual action, which will be performed by the particular button. Now let's test the movie clip which is almost ready. Look at that it's working. That's great. In this file will create an animation which can be controlled by the play and stop buttons.
Here, we will create a single movie clip for the animation and also for the buttons. So start with a new Flash file and save it at the same time wherever you want. Create an exact circle on a new animation named layer and convert it into a movie clip. named a movie clip as animation underscore MC. Step inside and again convert the ball into a new movie clip and name it bond one name the same to each layer. Let's create a fast animation of the ball here.
We are ready with the ball motion. Exit to main stage. This animation underscore MC movie clip is going to be used in the action script. So name its instance to as animation underscore MC. That's the animation at this stage. It's working fine.
Now it's time to add the buttons. So add a new layer and name it button. Go to Windows menu, common libraries, buttons and take a look at the default buttons available in the common library. Out of all of them Grab the needed play and stop buttons and place them on the stage. hit Ctrl plus enter. Here exactly what we want is to stop the ball animation.
When we click on stop and play the animation when we hit the play button. So, before we add the action script, give the instance name as play underscore btn to play and stop underscore btn. To stop in the timeline, add a new action layer. To add the action script do it. Press f9 to get the Actions panel. We need to add a function to make the animation stop first.
Read carefully how we are adding the action script. After the function, add the instance name between the open and close bracket on which that function will be applied. That is animation underscore MC. Now let's add event listener for stop button below and call the above function do it. Play and test the movie clip. It starts with the animation of the ball, and it stops when we click the Stop button.
That means we can add a similar action for the play button to again start the ball animation. In the same panel, add the function for the play button. Add the instance name of the animation which we want to play between the brackets This is done. Now below, add the event listener for play button. Again, let's test the movie clip. Finally, both the buttons are working well.
That means our action script is up to the mark. Let's see how the scripting works when the animation is in one movie clip, and buttons are in another movie clip. First of all, save the file by any name you want. named the blank layer as animation draw a perfect circle on that. Animation layer selected, press f8 and choose movie clip. Name it, animation underscore MC, step inside it, and again convert the circle into a new movie clip named as Baldwin also named that layer as Baldwin, where it's animation will be done, extend and create a new keyframe at frame 60 and another new keyframe at 30.
We move the ball to other position on frame 30. Apply motion to into the frames and check the ball animation. Now, we need the buttons which will control the animation play of this ball. Those buttons will be on another layer as well as those will be a different movie clip. So add a new layer on the main scene and name it as buttons. Now, go to Windows menu, common library buttons, and you see a library full of different style buttons available out of it, find and drag the exact buttons of play and stop below the ball.
Done. We got both of them, select them and convert them into a single movie clip named button underscore MC. Step inside and name the layer also as button. Now on the main stage, we have two movie clips ready with us. Out of that to the ball, give the instance name as animation underscore MC, and to the buttons name the instance name as button underscore MC. Similarly, we need to give different instance names to individual buttons.
Give play underscore btn as the instance name to play and stop underscore btn to stop. Now, the animation should play when we hit play and should stop when we hit stop. For that, we need to add ActionScript add a new layer named action. Select that frame and press f9 to open the script panel. Watch carefully how we are adding the script. We are using the instance names in the action scripts.
In the same space, we are giving the action to the stop button. Don't forget to add the instance name of stop button. Done. Let's test the movie. Yes, the stop button is working exactly like we wanted. Now, let's add the similar action for the play button.
The play button is also inside the same movie clip named button underscore MC. So instead of stop, we will replace it with play for the play button action and The animation should start when plays clicked. Let's taste both the buttons now. Yes, both the buttons are functioning properly. We did this by keeping the ball animation and buttons in different movie clips. Hope you liked learning about scripting, play and stop out of media.
We'll be back with some more action script fun. Thank you for watching.