This is a question I have been asked before, and remember asking myself about 10 Months ago. I had heard them mentioned, but failed to see how they could be useful. How wrong I was! What we are going to do here is learn why frame labels are awesome, and just how useful they can be.
STEP 1
First set up the stage with a frame rate of 31, rename the first layer to ’stuff’ and create a new layer called ‘buttons’. Create a third layer called ‘actions’ and lock it. Lock the ‘buttons’ layer and select the ’stuff’ layer.
Do you remember the blob from our earlier tutorial? Well, we need him now! If you don’t have your own Blob-thing yet, shame on you! Go here and make one, it’ll only take 5 mins, then come and carry on here! But if you really can’t be bothered, draw a square on the stage and convert it to a movieclip.
STEP 2
Lock the stuff layer and select the buttons layer. Create 3 buttons on the stage, with instance names of BTN_1, BTN_2 & BTN_3. If you are unsure how to do this, go and complete the buttons tutorial. Your stage should now look something like this:
STEP 3
Select all three layers on the timeline, then go to frame 180 and press f5 to enter new frames, this will give us some space to work with. Lock all layers except the ’stuff’ layer. On this layer, drag your movie clip off to the left of the screen so it is not on stage. Go to frame 59 and press f6 to enter a new keyframe. Then, on frame 60, press f6 again. Select frame 59, and keeping the same vertical position, put your movieclip off to the right of the stage. Create a motion tween between frames 1 - 59.
On frame 60, Drag another instance of your movie clip to the left of the stage, lower and to the left of the first one. Go to frame 119 and enter a new keyframe, and the same on frame 120. On frame 119, as befor drag the movie clips off to the right of the stage and insert a motion tween between frames. Lastly, on frame 120 drag a third instance of your movie clip to the stage and place it near the others off to the left of the stage. Go to frame 180, hit f6, and drag the movie clips to the right of the stage. Add a motion tween once again.
STEP 4
Next, lock the stuff layer and unlock the actions layer. On frames 1, 59, 119 and 180 create a new keyframe and enter the ( ’stop();’ ) command.
stop();
This will stop the timeline when it reaches this point.
STEP 5
Now we need to add the frame labels. Create a new layer below the actions layer and rename to ‘labels’, then lock this layer. On frames 2, 60 and 120 add a new keyframe. Select frame 2, and in the properties panel you will see a box with <frame label> in it:
In this box type ‘number1′. Select frame 60 and call this frame ‘number2′, and call frame 120 ‘number3′. These names are what we will call in actionscript to make the movie jump to these frames. Now for the actionscript.
STEP 6
Select the actions layer and press f9 to enter the actions panel, then add the following actionscript:
BTN_1.onRelease = function(){
gotoAndPlay("number1");
}
BTN_2.onRelease = function(){
gotoAndPlay("number2");
}
BTN_3.onRelease = function(){
gotoAndPlay("number3");
}
If you have completed the buttons tutorial you will know what is happening here, but i will break it down just in case. The first line is calling the button and saying when released to run the function ( ‘BTN_1.onRelease = function(){’ ). The second line is the function, telling the timeline o gotoAndPlay the frame with the label “number1″ ( ‘gotoAndPlay(”number1″);’ ). This is repeated for all three buttons.
STEP 7
Press Ctrl + enter, and press your buttons to see everything in action. Done. The beauty of frame labels is that instead of telling the timeline to go to a specific frame number, if you move the frame label to somewhere else on the timeline you do not have to alter your code as the frame label is still named the same.
Have a play, mess things up a bit and see what happens. Enjoy!
Signing off,
The Dude
Questions? Ask them! Sign up now and email The Dude, or leave a comment below.
Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
Hey thats pretty cool dude
Thanks for that, i’ve seen the “label” field before and never really looked into it. I actually really needed this for school haha!
Thanks mate.
Glad I could help
I found your site on technorati and read a few of your other posts. Keep up the good work. I just added your RSS feed to my Google News Reader. Looking forward to reading more from you down the road!
AlexMs last blog post..Расписание движения поездов Москва — Адлер
Really appreciate having this explained properly and how it connects. learning flash in reverse right now (from a design background) thank you very kindly!
I found your blog on google and read a few of your other posts. Keep up the good work. Look forward to reading more from you in the future. And as a designer, I think you have a pretty nice layout
Your blog rocks dude!
morison donys last blog post..Laptop DVD Drives