Flash Tutorial: Play movie clip with mouse click: Version 2
This entry was posted on Sunday, March 16th, 2008 at 7:58 pm and is filed under ActionScript tutorials, Flash, Flash Tutorial, Tutorials, Web Design.
You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.
Flash Tutorial: Play a Movieclip on Mouse Click
Level: This is a basic ActionsScript tutorial that focuses on the ActionScript involved. An intermediate knowledge of the Flash animation tools that includes creating symbols, creating motion tweens and creating frame labels is required.
Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.
Description: In this Flash tutorial, I will demonstrate and explain the ActionScript involved to play a movie clip on mouse click. This tutorial focuses on the AS, so some basic Flash animation knowledge is assumed.
Demo:
Let’s get started!
Select “File > New” (command-”N”) and select Flash File (ActionScript 2.0) to open a new Flash document file. Save the file, and give it the appropriate name. I will call this “mouseclickPlay_tut1.fla”. Feel free to make the document dimensions (“Modify > Document or “command-J”) whatever you like, but I chose to use a size of 400 x 200 pixels. Add a new layer to the timeline and label the top one “actions” and the bottom one “ball”.
The first thing we need to do is create a simple animation. For this tutorial, I simply created a circle that will move horizontally across the stage. I will assume the reader of this tutorial has some knowledge of creating a movie clip in Flash, so I will just walk through this quickly without much detailed instuction.
—- ads by google —-
First, on the “ball” layer, draw a circle on the stage, and position against the left side. Select the cirlce and choose “Modify > Convert to Symbol” (F8), give the symbol a name (I will use “mc_ball”) and choose the Movie Clip radial. Double click on the new symbol (either on the stage or in the Library), to bring you into editing mode. Click on the circle again to select it, and again choose “Modify > Convert to Symbol” (F8), give your symbol a new name (I will use “img_ball”), and this time select the “Graphic” radial. Going back to your movie clip, add some frames to your timeline, however many you want, it doesn’t matter, I will make mine 35 frames long. Add a new keyframe. On the last frame of your movie, move the circle off to the right side of your stage. Select any frame between 1 and 35 and select “Insert > Timeline > Create Motion Tween”. You should now have a simple animation of the ball sliding across your stage.
This is the animation we will use for this demonstration. Now it’s time to focus in on the purpose of this article, which is to have the animation only play after the user clicks on the mouse.
Going back to our .fla file, click on our circle movie clip and give it an instance name of “mc_ball” in the Properties window.
Now, on the main timeline, in frame 1 of the “actions” layer, add the following code to the Actions Panel (“Windows > Actions” or alt-F9):
stop();
_root.mc_ball.stop();
onMouseDown = function() {
_root.mc_ball.play();
}
Let me explain the code above:
stop();
stops our main timeline
_root.mc_ball.stop();
stops the animation of our “mc_ball” instance (since we only want it to play after the user clicks their mouse)
onMouseDown = function() {
perform the actions between the curly brackets when user clicks their mouse
_root.mc_ball.play();
}
The actions between the curly brackets tell our “mc_ball” instance to begin playing.
That’s technically the end of the tutorial, but what if we want our movie clip to play on one mouse click, but then stop if we click the mouse again? Well, that’s just as easy, and I’ll show you how right now!
Going back to our .fla file, add a second frame to all layers of the timeline. On frame 1 of our “actions” layer, in our Actions panel, make the below code change in blue (the green is what will stay the same)
stop();
_root.mc_ball.stop();
onMouseDown = function() {
_root.play();
}
This new code tells the player to play our MAIN timeline. Notice, we now only have a stop function on our “mc_ball” instance. What we are doing is telling our main timeline to go to the next frame, which is where we will tell our animation to begin playing.
In frame 2 or our “actions” layer, add the following code to the Actions panel:
stop();
_root.mc_ball.play();
onMouseDown = function() {
_root.play();
}
You’ll see that this code is quite similar to the code on our first frame. The difference is we are now telling our “mc_ball” instance to begin playing when we get to this frame. We also stop our main timeline again as we did above.
What we are essentially doing on the mouse click is toggling between frame 1 and frame 2 of our main movie. Whenever we hit frame 1 of our main timeline, our movieclip stops… whenever we hit frame 2 or our main timeline, our movieclip plays.
I hope you found this Flash ActionScript tutorial helpful, and I’ve tried to comment the source file for everyone to make sure it’s clear. As always, if you have any questions or comments please leave them below!
Source Files (Flash 8): Flash Tutorial: Play movie clip on mouse click
Flash Tutorial: Working with Masks in Flash
very nice
any help?
It was my fault because i didnt gived an instance name to the photos mc in the animaton when the site is loeaded …
