Flash Tutorial: Play movie clip with mouse click: Version 2
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
could u tell me pls about something on masking.
Sure Nadim, I was actually thinking of what my next tutorial would be, and masking is a great topic. I’ll post a new tutorial later today, and you can check it out. Thanks for posting!
Nadim,
Check out this tutorial on using masks in Flash. If you have any further questions, I’d be happy to help you out!
http://mikestickney.com/wordpress/flash-tutorial-working-with-masks-in-flash/
hey this was really useful thanksfor posting this up.
Hi!
any help?
just read your tutorial! nice
But I wonder if you can help me in some matter ?
I want to be able to use a button, and the button wont work before the third time I press it.. For example you press on a ball, and nothing happens. You push it a second time and nothing happens. Yu push it a third time and i turns green and run away
Christer
if you still need help with that here is how you do it :
make a new mc ( Movie Clip) anme it what ever you want
put 3 frames on it oppen oppen actions panel and put “stop();” in each frame draw what ever you want int this case is a ball so draw it and convert it in to a graphic then place it in the stage now put it on the second and third frame but on the third frame use a motion twin and make it move and in the last frame of it put other “stop();”
now go back to the main movie and put this on the main line
“onMouseDown = function() {
_root.[the label of your movie clip goes here].play();
}”
now test your movie and it should work
and nice tut here thnx for it
Thanks for the additional info Pepe. I think I understand what you are trying to do here, and yes, that it’s a way to solve Christer’s problem.
Basically, what Pepe is suggesting is to add 3 frames to the beginning of the ball animation, with a stop() action applied to each frame. For these first three frames, there should be no ball movement. By clicking, you are telling the movieclip to begin playing… in this case only 1 frame since we added a stop. So, first click goes to frame 2 (stops), second click goes to frame 3 (stops). third click goes to frame 4, where your animation starts and will continue to play until the end. Hopefully that makes sense for you.
Thanks for reading, and Pepe, thanks for commenting with your solution, I appreciate it!
– Mike
Hy Mike!
I have a problem but i dont know how write it … I made a scrolling thumbnail (following the mouse) whit masking i followed a tutorial to do (http://www.gotoandlearn.com/player.php?id=25) and its working fine , and i tryed to do when someone click to a thumbnail than the original picture showing up ( i did a photogallery before working like this but there i dont have scrolling thumbnails u can see this http://forfun.extra.hu/galery/levyke_szulinap.swf) and i used this solution here whit the scrolling thumbnails but when i try to click to the thumbnail isnt working here … ( my english is not perfect so i uploaded the .fla to my website u can download from here http://rapidshare.com/files/108762533/sikasszo3.fla.html) I saw that u are helpful and i thinked i write my problem and if u have some time than u can help me … I tryed everything ,i read everything what i`m founded but noting …:sad:
I`ll give my yahoo id maybe there we can talk better ( id: legyenmarjona )
Thx a lot and sry for my english
Hi levyke,
Hmmm… interesting. First off, since you have your larger “photos” movie clip nested into your “panel” mc, the mask you have applied is covering the “photos” movie clip as well, so even if the code was working, you wouldn’t be able to see it because it is happening underneath the mask.
However that said, I your code does look correct, and it still doesn’t seem to be working. I only took a quick glance at it since I don’t have very much time right now, but it should be working.
Either way, as a quick fix, move your “photos” mc to your main timeline, above your “mask” layer. Then, on each thumbnail, modify the script to look like this:
on(release) {
_root.photos.gotoAndPlay(“image0″);
}
Of course the “image0″ would change for each thumbnail.
This should do the trick. Let me know how you make out. If you need a sample file, I can probably set one up for you tomorrow, but I think this should get you started.
Thanks for reading!
– Mike
Huhh…
Thx for the tip it`s working … I tried before to place the photos to the main timeline but i think i wrote wrong …
Thx again i worked whit this abaout 30 hours but isnt worked …
really thx…
Ohh and i have another question , if i make a preloader i need to write the stop(); command to the last frame , but if i`ll do than the scrolling not working can u tell me why??? If u watched the other gallery then u saw which preloder , there its working because there i dont have scrolling animation …
And really really thx again
Hi Levyke,
Glad you got it working so far. Not sure what you mean about the last frame of your preloader. There are quite a few different ways to create preloaders, and off the top of my head, I don’t know why you’re scroll wouldn’t work after a preloader. When I have some more time, I’ll try and see what I can do.
Thanks for reading, glad I could help you out!
– Mike
Hi Mike!
I dont know how but i did somehow whit preloader and working fine … If u want to see go to http://forfun.extra.hu/galery/sikasszo05.html
Thx again for the helping , maybe later i ask few thing from u , i`m learning now the flash and i`m very newbie …
Great Levyke, glad to see you got everything working. Your gallery looks really nice!
– Mike
Hy Mike!
I have the same problem like before just now i did`t made the photos mc behind the mask , i made everything like before but when i click to the thumbnail isnt working …
If u know the problem pls let me know …
here is the fla http://rapidshare.com/files/109607903/szilveszter08.fla.html
And thanks!
Ehh sry … :oops:It was my fault because i didnt gived an instance name to the photos mc in the animaton when the site is loeaded …
Sry for wasting your time …
Yes, this is fine. But I did not understand why the script is inserted in the second frame. Also when the circle is clicked, it stops and again it is clicked it plays from the left, not from the position where it stopped. Motion tweening can be inside the movie clip and used as instance or directly on the stage? Please tell me.
Hi Rajesh,
Not sure where your problem is coming from. My only thought is that on your layer with mc_ball, you have 2 seprate keyframes. On this layer, your clip should span 2 keyframes (you will only see one dot on this layer in your timeline).
The script is needed on the second keyframe because we are essentially toggling between the two frames of our main timeline. The script between these two frames is telling our movie clip timeline to either play or to stop. That is also why our moviclip layer should span two keyframes. Otherwise, each frame is adding a new instance of our mc_ball movieclip (which would make the animation start from the beginning, or left side, with the second click).
Hopefully this helps clear things up a little, and as always the source code is provided at the bottom of the tutorial which might help give you a better idea of what is happening.
Thanks for reading!
– Mike
Great post, thanks for the useful info
[…] on mouse click. This tutorial focuses on the AS, so some basic Flash animation knowledge is assumed.http://mikestickney.com/wordpress/flash-tutorial-play-movie-clip-with-mouse-click-version-2/gotoAndPlay Flash Tutorials — Getting started with Actionscript 3Jul 6, 2006 … A 4 chapter long, […]
In response to person that asked about masking, one thing you can do instead of worrying about masks is save an image/picture with transparency to a PNG file and load that into Flash. That’ll automatically have the transparency so no need to deal with masking manually or in code.
Hi Knight Chat,
Yes, you can import a transparent PNG directly into Flash, but personally I prefer working with masks. Also, there are so many different effects you can do with masks that importing a PNG won’t work, so learning masks and using masks is quite useful. They are not very hard to set up and work with, so the payoff is quite worth it.
Thanks for reading,
-Mike
i have a movie clip named “curly” and a button on the stage. when you press the up arrow on the keyboard, it plays the movieclip “curly”. the actionsript on the button looks like this:
on(keypress “”){
curly.gotoAndPlay(1);
}
the movieclip itself just has a “stop();” action on the first frame.
this works and is ok. the problem is that i want the movieclip “curly” to play straight through to the end. what happens now is that when you press the up arrow while “curly” is playing, “curly” turns off or disappears or something…
how do i get the movieclip to play straight through till the end regardless of what the user does?
please help!
thanks
sorry, it posted wrong: the actionscript above has the word “up” inside a “” inside quotation marks after the word “keypress”
thanks
for some reason when i post it the symbols of sideways v’s disapear. there is the word “up” between two sideways v’s.
Hi Ima,
Not sure what is going on here… at first thought my answer would be that on key press, instead of “curly.gotoAndPlay(1)”, you need to just say “curly.play()”. What’s happening is that on the keypress, you’re going to frame 1, which has a stop action. This way, when they press the up button, since the movieclip is already playing, nothing will happen until it plays all the way through (until the stop action at frame 1). Once played all the way through, if the user hits the up arrow again, the clip should play from the beginning again.
Hopefully this helps, but if you still have a problem you can try sending the file to contact@spitshine-design.com and I can take a look.
Thanks for reading,
Mike
[…] View Tutorial: Play movie clip with mouse click in Flash […]
Thanks so much, I was trying to figure out how to get an “Incorrect” movie clip to pop up and then disappear after 2 seconds. I couldn’t figure it out until I found your tutorial and that short piece of code I was missing. Thank you!
Hi i was just trying to apply yout turorial to a mc i made. so i copyied your code. But the mc starts already when i start the movie and stops when i’m clicking on it. Whats wrong? Thanks for the answer.
onClipEvent (mouseDown) {
stop();
_root.links.stop();
onMouseDown = function () {
_root.links.play();
};
}
Hi desperate desperado,
I apologize for the delay in getting back to you… Not sure what the problem is exactly. If you send me the file (contact@spitshine-design.com), I can take a look at it and try to trouble shoot it for you.
In the meantime, have you tried downloading my source file (available at the bottom of this tutorial). If not, try taking a look at it and comparing it to what you have to see if you can see any discrepancies.
Thanks for reading,
Mike
Hey i know your really busy. But i am working on a project. And i would like to know if it is possible to combine the Target (mc_scope) tut with a masking tut so the user can only see whats under the Scope. I know how to mask and make the Crosshair now. But i need to figure out how to combine these and make the masking Crosshair with my mouse.
Great tutorials. Exactly what i was after.
Thanks a lot duuuude
-NapalmFist (AltTabReviews)
Hey…I need ur help. Instead of playing movie clip after the mouse clip, I want to run a series of keyframes with bitmap images. Can you pls help me with that.
This website is Great! I will recommend you to all my friends. I found so much useful things here. Thank you.e
How would I make a movie clip play once then dissapear by clicking on it (for instance shooting something then the death animation plays then the whole movie clip dissapears)
I need one from anyone,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,I want to play MC on mouse click, and if I release mouse click MC will back to our main position like example: If I want to make one game. when I m press mouse click my mc_ball will go up and if I released mouse click ball will come down.
how can I do plz help me
If possible plz send a mail on khushalyashoda@gmail.com
I looked at this tutorial and it helped me figure something out but I am still having a little trouble.
I have a movie clip that I would like to play and then when it is clicked on, pause. Then when it is clicked again, continue from where it left off. So far I can get the movie to stop using the code above, however I can’t get it to continue playing on the second click.
Any advice? I’m sure there is a really simple answer, but I’m relatively new to the action scripting part of Flash.:razz:
Thanks man, you have no idea how many people you helped with this!
Hi ! Thx for the tutorial. I want to make water ripple effect on image as mouse moves. Ripple should follow mouse. How to do it ? Any good tutorial . Will u please help me ?
Hey I like the tutorial, I was watching it in hopes that I could figure out something similar. I am new to flash, and I am putting up my website, and I want to be able to start the website out playing a video, and then when it stops on a certain frame, the buttons appear, then, when you click the buttons to go to another page, another section of the movie plays, and then when it stops, buttons appear again. An example of this is http://www.upshot.net/.
Thanks a milion
Flash Tutorial: Play movie clip with mouse click: Version 2…
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….
i have a problem
i made a loop but i want it to stop at a certain point of my flash but i don’t know how.
i have tryed root_myloop_mc.stop(); and myloop_mc.stop(); (i did write it well)
but it didn’t work
Very useful… thanks a lot!
Due to overwhelming response to this tutorial, comments for this post are closed. If you are having problems, please refer to other users comments above, as the issue may already have been addressed.
Thanks for reading,
Mike