This tutorial shows how to control the timeline in a Flash movie. You will learn the essential commands: how to play a movie, how to stop it, how to jump to a particular frame on the timeline.
1 Open a new Flash document. Create a simple motion tween animation that consists of, let’s say, 30 frames. If you are a beginner and don’t know how to do this, I suggest you check the tutorial on creating a basic motion tween animation.
Test your movie, to see if your animation is working properly, before proceeding to the next step and ActionScript.
2 Lock the layer with the animation (you can call it animation or whatever you like). Create a new layer and call it actions. Your timeline should look like the image below.
Stopping the animation
3 The first thing we’ll do is stop the movie from playing, right in the middle of it. Right click in frame 15 of layer actions and choose the Insert Keyframe option from the pop-up menu.
In a Flash movie, ActionScript can be placed in keyframes on the timeline, on movie clips, inside movie clips (on movie clip’s own timeline) and on buttons. ActionScript cannot be placed inside a button!
Press F9 (ALT+F9 on a Mac) or choose Window > Actions and the Actions panel will appear. On top of the window, Actions – Frame should be written, indicating that you are entering the code in a keyframe. Click inside the area for code writing (the right side of the Actions panel) and type
stop();
Close the Actions panel. You should see a small letter “a” inside the frame 15 on the actions layer of your timeline. That is Flash’s way of indicating that some ActionScript code is to be found on that frame.
Test your movie (Control > Test Movie) and you should see it stop right in the middle of animation. Close the movie test window. Now, there is no way of making the animation continue, unless we place something in our movie that will make it possible (or delete the ActionScript we just entered, which we don’t want to do). So, let’s place a button in our movie that will enable us to start the animation again.
Basic interactivity with a button
4 To save time, we will put a ready-made button on the scene. Create a new layer and call it button.
Go to Window > Common Libraries > Buttons and you will see the Button Library appear. Choose a playback-type button and drag it onto the scene.
Be sure that the button is selected: lookm in the Properties panel below the scene and see if it says Button on its left side. If you are not sure if the button is selected, click somewhere on the scene, and then click the button (once). This is important, because if you don’t select the button, you may accidentaly place the ActionScript code on the timeline, which will produce an error, because the ActionScript code intended for a button won’t work on a keyframe in the timeline.
5 Press F9 (ALT+F9 on a Mac) or choose Window > Actions and the Actions panel will appear. On top of the window, Actions – Button should be written (be sure to check that), indicating that you are entering the code on a button. Click inside the area for code writing (the right side of the Actions panel) and type
on (release) {
play();
}
Close the Actions panel. Test your movie, you will see the animation, which will stop in the middle, when it reaches the frame where we put the ActionScript stop(); command. Now press the button, and it will continue, reach the end, start from the beginning and stop again.
The code we entered literally tells Flash: “When the mouse is pressed and released over this button, begin playing the movie from the current frame.” Now, why did I say pressed and released? Well, position your mouse over the button, click it, but don’t release it. Nothing will happen until you release it. If you want to know how to make the button work with different mouse clicks (click and drag, release outside, etc) I suggest you check the tutorial on Creating a flash ad banner from start to finish, where the different possibilities of interaction with the mouse are explained along with the notions of events and event handlers.
6 With the button still selected, open the Actions panel again, and replace the line with the stop(); command with the following (the modified code is shown in bold):
on (release) {
gotoAndPlay(20);
}
Test the movie. When the animation stops, click the button and you’ll see the movie jump to the frame specified between the parenthesis (20 in our case) and start playing from that point on (all the frames in between are skipped). If you want the movie to jump to a certain frame and stop there, type the following code:
on (release) {
gotoAndStop(20);
}
If something isn’t functioning properly, check that you typed the code correctly AND that you placed it on the button, NOT on the timeline. Also, you have to pay attention to the way you’ve written the commands: it has to be gotoAndStop(); because Flash is case-sensitive – you cannot write gotoandstop(); or GoToAndStop(); and expect it to work.
OK? Cool 🙂 Now you’ve just made your first interactive Flash movie! If you want, put other buttons on the scene (you can put them on the same layer with the already present button, there aren’t going to be any errors because the buttons aren’t animated), and give different functionality to each button: play, stop, etc.
One last thing: if you wanted, say, make the animation loop between the first and the tenth keyframe, insert a keyframe (right-click and choose Insert Keyframe) in frame 10 in the actions layer. Open the Actions panel and write
gotoAndPlay(1);
in it. That’s it. No on(release) command is necessary, because that kind of code is reserved for a button. Test your movie, and you will see it loop between the 1st and the 10th keyframe.
action script 2 only, cant get to work with 3.
thanks
J
Yes, this is for AS 1 and 2
Hi,
Your explaning , I find it much better than other sites for a beginner.
I tried ” Controlling the timeline with ActionScript ” and found i found it half sucess. But when I put Button , it did not play to the end. Pls,help
this to complete.
Thanks & Regards
Nada
Good Evening Nada,
I’ve been using Flash for about a year now and can do the basics. I want to know more about ActionScript. I want to learn how to do smooth animation. Can you help?
Many Thanks
Paul.
Paul: To have smoother animations, you should increase the speed of your movie. Go to Modify > Document properties and increase theFPS (frames per second) value. 30 fps should be fine.
Wow this helps way more than I ever thought someone on the web would provide w/out money!!! (no Im being serious…)
Any ways thank you Luka!
Hello, I tried to apply action script:
on (release) {
gotoAndPlay(20);
}
on a button, but it said “current selection cannot have actions applied to it” I did not why. I applied it to the button not the timeline (I selected the button and make sure it got selected). FYI, I applied a stop action script on the same keyframe but in different layer (this stop action script is not on a button or anything, it’s on the timeline). Does it matter? Thanks!
Hi,
I am working on my new website at present. It opens with some flash amimation obviously running along a timeline, but I want it to get to a point where the timeline stops but there’s a 3D carousel menu on the last frame, I’m coding this using actionscript 2 (learning how to do it from an online tutorial). However because there’s a stop action in the last frame to prevent the movie from looping flash player doesnt read the actionscript code on the lines below that activate and run the 3d carousel menu.
I want people to be able to choose portfolio items from the carousel, each link sends the viewer to respective html & css pages that match the design of the flash movie.
Can you help me please it’s probably a simple suggestion you could make but I can’t seem to find tha answer anywhere online or in either of the two books I have.
Thanks,
Marc
What I mean is that I need the timeline to stop but the 3D carousel to still work on the last frame.
Sorry I wasn’t very clear previously, well it is early o’clock and I’ve been up all night working on this. lol!
Marc
hey man you can’t apply the action on the button because you are using actionscript 3.0 so you have to change the the action from flash settings actionscript 2.0
Thanks it very simple and its working also
nice tutorial, it help me so much.
Thanks
I’m trying to use a simple button (i.e., button, innerButton, overClip, upClip) with a stop(); & I STILL can’t get it to stop looping!!! What am I doing wrong? I have CS3 & CS4, AS3 & I’ve tried everything I can think of…
amazing !nice post can any body tell me how i can do it with Action Script 3 ??
thanks
can somebody help me? I’d like to stop for a while and play again between each frames.
i want to know how to do thi
variable count = 0;
if this layer .frame go to frame 60 then
{
variable = “something”;
count = +1
}
this is a great tutorial i appreciate it alot and it worked magnificently thank you ……………………………..!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Hey Luka,
First off, thanks for this nice tutorial, it’s very helpful for a beginner like me 🙂
However, Im trying to create the effect until stp 5 but in AS3, could you help on that? I have been reading arround and found very different line scripts…something looking like
home_btn.addEventListener(MouseEvent.CLICK, homebuttonClicked);
function homebuttonClicked(event:MouseEvent):void
{
gotoAndStop(0)
}
My second question : is AS3 more efficient than AS2 ? like if I decide to make something in AS2 does it mean that I can’t export my movie as a flash10 version?
Thanks in advance
I tried this Actionscript 2.0 code and its not working. Could it be because my buttons are in a separate movie and I am trying to control the scene? Is “Scene 1” an appropraite name?
THANKS! Thank you so much!
Can you control the Tween length in actionscript, for example in the timeline the tween that I have start from frame 1 to frame 10. Can I make in activescript expaned it from frame 1 to frame 20.
Thank you
nicely explained – clear and simple.
I have put stop commandson my actions layer. The first one works – the second one doesn’t . can’t work out why.
When I test the movie, it stops at the home page- but not the next one.
Edward,
Sydney Australia
Oh also…I have movie clips in there. Would they conflict with the main time line?
thanks,
Ed
its very us full for us
Sir,
I was struggling hard to get the simplest actions of action script by going through various sites, but none could give me clear explanations. Your step by step teaching is excellent. When I followed your steps, believe it or not, I could easily understand, pick up the task and manipulate them without a single mistake, that too, in a single attempt. Even if you offer coaching on action script 1,2 and 3 by demanding a fee, I will gladly look forward to join. I think no one could be compared to your teaching. Your are unique.
M. Joseph Jayapal
@ M. Joseph Jayapal Thank you so much for your kind comments. Words like these keep this site alive!
on(press){
if(MC=play)
{
stop();
}
else if(MC=stop)
{
play();
}
}
For this code, when i play the movie i can stop it but when it’s being stop i can’t play it again.. why? Do you know?
really enjoyed your explanations. thanks
hi
I am creating custom flash animation and trying to import into articulate…..
there is a try again button in flash … i have wrote the code as
_root.loadMovie(_root._url), this single line code works in flash and when i tried to click the try again button in articulate, the entire flash movie moves left side ,
first click it moves leftside, second and third click it remains in same left side, it does not move more than that position,
can anybody help me to solve this problem……
if i write other codings than i mentioned above its working perfectly
Thanks,
Ramamoorthy K
Hello James
try _root.play();
James,
Note that you are assigning MC=play instead of comparing (==) , so confirm this and try _root.
James,
Note that you are assigning MC=play instead of comparing (==) , so confirm this and try _root.play()
Really nice article about controlling the timeline with as 3.0
hey, great tutorial thank you! I see two mistakes in it however, and it took me like two days to understand what those are.
In your step 6 you write: With the button still selected, open the Actions panel again, and replace the line with the stop(); command with the following (the modified code is shown in bold):
on (release) {
gotoAndPlay(20);
}
The correct version should be: With the button still selected, open the Actions panel again, and replace the line with the
on (release) {
play();
}
command with the following (the modified code is not shown in bold as there is no bold text in step 6 of my tutorial.)
on (release) {
gotoAndPlay(20);
}
Now with this correction the step 6 in your tutorial would work 🙂
Sir/Madam, It’s really super, its so easy to follow…..
Thank’s for it……..
Have Flash CS3 trial version, is the action script disable in this?
if not how do I do the gotoAndStop script?
10X for all friends. for best Tutorial
Hi Luka,
I am a regular visitor of this website, specially of your tutorials. I will be highly obliged if u will post something advanced on timeline controlling as _currentframe, totolFrames, reverse frames. And also make clear to me differences between _root and _parent.
Thanks
Ravi Bhadauria
Hi, everyone: Help please
I am this following script all on one button
on(rollOver){
gotoAndPlay(542);
}
on(rollOut){
gotoAndPlay(541);
}
on(release){
gotoAndPlay(651);
}
and somehow i have to click twice to bring me to frame 651 (regardless of the click speed, so its not a double click)
Anyone know why that happens? How should i fix it?
i’ve create a montaj with sound.. and a stop button.. but when i clikck stop button.. the music doesn’t stop.. just the image stop.. help me with the coding please..
Nice tutorial , it helped me a lot. in my Flash presentation
Thanks
How to call from a movie clip timeline to mail scene? If you have any solution please help me.
how do i make a play button play different movie clips that are placed on to a timeline in actionscript 3
Nice thanks for the great tutorial I will have to try this out this weekend.
[…] Controlling the timeline with ActionScript | Flash ExplainedOct 6, 2008 … Test your movie, you will see the animation, which will stop in the middle, when it reaches the frame where we put the ActionScript stop(); … […]
Thanks so much Luka, I completed a diploma in graphic design and covered all this but its been 2 years since the course and I haven’t made a flash website since around that time, this really helped to remind me about the basics!
Also everyone if you can’t be bothered remembering all the things to type, you can find them in the list of actions to the right in the actions window (i only know this is the case for Flash CS4)
Thanks Again!!!
Hi,
am working on flash site using flash cs 5.can any one tell me how to use audio in flash which will play after click on button.and that audio should continue til some scene more.I tried to drag audio directly from liblary to scene,but then it applies to scene.not to button.can anyone suggest me what will be the right process to call audio?