NOTE TO THE MODERATORS: I know that double posting is discouraged. I am placing this tutorial here because this is where this discussion of buttons started earlier today. Because I hope it will be of use to others (who might not see it here) is why I am also starting it as a new thread. As a fairly new member here I assure you - and the Forum at large - that this will not be a regular practice.
(Sorry if I offend anyone here by going through all the steps…since one never knows who knows what about what under these circumstances.)
Go to the Insert Menu and create a new movie clip symbol. Name it button_mc. (Be sure to click on the movie clip option even though we are creating a button.) This automatically takes you to the timeline for the movie clip.
In the timeline create four layers. From the top downward name the layers in this order: Actions, Labels, Text and Background. (If you wish to add a sound effect to your button you can add a 5th layer at the bottom for your sound.)
Click on the first frame of the Actions layer and open your Actions panel. Put in a stop(); action the purpose of which is so that the timeline of your button does not just play through. At the 20th frame of the Actions layer place another keyframe and in your Actions put another stop(); action. This will keep the playhead from playing through to the end when you are in the second (_over) state of your button.
Close the Actions panel. (The rest of the AS - to make the button function - will be placed later in the Actions layer on the main timeline.)
Extend all four (or five) of your layers out to say the 35th frame.
At the 10th frame of your Labels layer insert a keyframe. At the 25th frame of the Labels layer insert another keyframe. Click anywhere on the frames between the 1st and 10th frame of this layer. In the Property Inspector area under where it says Frame type in _up. Move to the frames between frame 10 and 20 of the Labels layer, clicking anywhere. In the Property Inspector type in _over. Finally in the last segment of the Labels layer click anywhere and in the Property Inspector type in _out.
The first segment will be what your button will be doing when it is not selected. (Nothing.) The second segment will be when you rollOver the button with your cursor (It will animate outwards.) The final section (_out) will be when you rollOut of the button and the button animates back to its original position.
Click on the first frame of your Background layer. Selecting the rectangle tool, select what colors you want for the fill and stroke colors for your button. With the colors selected, draw a rectangle for the size of your button as you want it in your closed state. (Remember to make it big enough to hold your text but not so big that it would be huge when you animate it outwards.)
At the 10th frame of your Background layer insert a keyframe. This is where your animation will start from. At the 20th frame on this layer insert another keyframe. (The length of these segments you can adjust depending upon how fast or slow you want your animation to take place. BUT this keyframe must be even with wherever you placed the second stop(); in your Actions layer.)
With the keyframe you just created on the Background layer selected click on your rectangle and select the Free Transform Tool in the toolbox. (The second one from the top on the left hand side.)
Your free transform handles should now be on your rectangle. Move the right side out to wherever it is you’ll want your button to go to. (As an alternate idea you could make the button extend upwards, downwards or to the left.)
With the rectangle where you want it in your extended position, click anywhere between the two keyframes that are the starting and ending point of your animation. In the Property Inspector go to the dropdown menu for tweens. (It is in like the middle of the Property Inspector at the top.) Select Shape as the type of tween you are executing. A solid arrow should appear between your two keyframes against a slightly green backing.
If you move the playhead back and forth you can see how your button will animate to its out position.
At the 25th frame of your Background layer insert another keyframe. (This should be right under where your _out label starts on your Labels layer.) Go to the last frame of the layer (frame 35) and insert another keyframe.
Now you want your button to go back to the same spot that it started in.
Go back to frame one of your Background layer. Right click (or control-click on a Mac) on frame one. A menu will appear. Move down to where it says Copy Frames and release. You’ve now copied the place where the button started out at. Go back to frame 35 of this layer. Right click on it (or control-click if on a Mac) and move down to where it says Paste Frames. Frame 35 is now the same state as frame 1 where we started.
Once again create another Shape Tween between your last two keyframes on this Background layer. When you move the playhead back and forth over this section you will see your button animate back to its starting position.
OK, onto the Text.
Click on the first frame of the Text layer. Selecting the Text Tool, click on or around the button. (It does not have to be perfectly within the box. After your text is typed then you will move it into position.) Type whatever the button is going to be in your website. (Home, Contact, About Us, etc.)
With your Text typed, select your Selection Tool and move your text centered into the rectangle.
When your button animates to the right you will want the text to go with it.
Place a keyframe at the 10th frame. (This should line up with the keyframe in your Background layer and where your _over label starts in your Label layer.) This will be the starting point of the animation for the text so apart from placing a keyframe here, we do nothing.
Place another keyframe on the Text layer at the 20th frame. This should coincide with the keyframe on the Background layer as well as with the second stop(); action in the Actions layer.
With this keyframe selected in your Text layer use your Selection Tool to move your text to the center of the now extended button. (Hint: If you hold down the Shift Key while you drag the text to the right it will keep it on the same _x level that you started from.)
With the text positioned, right click (control-click on a Mac) on the area between the two keyframes you just created on the Text layer. At the top of the menu is the Create Motion Tween. Select it. Now as you run your playhead across you can see how your button AND the text will animate out.
Of course you’ll want the text to return to where it started from when the button goes back to its starting position.
At the 25th frame of the Text layer place another keyframe. (Under the start of the _out label heading.) This is where the animation will start from so we add nothing to this keyframe.) At the 35th frame of the Text layer place another keyframe. As we did with the rectangle, we want the text to return to the precise place it started from. Copy the first frame of the Text layer and Paste it on to the 35th frame.
Now the entire animation is complete.
(If you wanted to get more advanced and add a sound effect to the button animating out: on that 5th layer (which you can or don’t have to have) add a keyframe at frame 10. You will have had to import some sort of a sound effect (a click or something) to your library.
Add another keyframe on this layer to frame 20. Select frame 10. In the Property Inspector is a Sound section with a drop down menu. In the drop down menu will appear a list of whatever sounds you’ve imported to your library. Select the one you want for your sound effect. (Note: it should be a short sound effect so that it fits into this range of frames.))
If you have not been doing so along the way (always a good idea), Save your file. Return to your main timeline.
Presently (assuming you started from a brand new file) there is nothing on your stage or on your timeline.
In your main timeline create a second layer. Name the top layer Actions and the one below it Buttons.
With the buttons layer selected, drag from the library an instance of button_mc. on the stage will appear the button movie clip you just created. Of course it won’t do anything yet until you add the ActionScript.
With the instance on the stage go to the Property Inspector and give the instance the same name of button_mc.
Now you are ready to make it all work.
Click on frame one of your Actions layer in the main timeline and open your Actions panel.
In the Actions panel go to the Target Path icon (third from the left at the top of the Actions panel (the crosshairs one). In the panel that opens up select your buttons_mc and hit OK. The keyword “this” will appear before the button name. Highlight it and delete it.
The entire code you will need is this:
button_mc.onRollOver = function() {
button_mc.gotoAndPlay("_over");
}
(button_mc is referencing the movie clip named button_mc which connected to it has the label named _over)
This code gets your button to expand.
To get it to close the code:
button_mc.onRollOut = function() {
button_mc.gotoAndPlay("_out");
}
(Be sure to include the " " marks or this will not work.)
Now as nice as all this is, in a running website you obviously want the button to connect to something (i.e., to open another page or to run another movie clip). Although we have not created that “something” here, the code that you would add might look something like this:
button_mc.onRelease = function(){
loadMovie(“lamps.swf” , emptyLamps_mc);
}
or
button_mc.onRelease = function(){
gotoAndPlay(“scene2”, 1);
}
There are numerous creative possibilities you can play with here. How fast or slow your animation takes place when you rollOver and rollOut is determined by how many frames you have in your Motion and Shape tweens. You might want to have the color of your button change as it animates out. Then have it change back to its original color when you rollOut. Just a few thoughts.
I hope this proves of interest and useful to some of you.
Christian (small_guy) Seaborn
seaborn.christian@gmail.com
[QUOTE=BetaWar;2102152]I was wondering if ayone knows where we could find a tutorial to do the type of thing in hermtheworm’s link up top. It seems like a cool idea and everything but I keep having trouble with it. When I try to make it grow all it does is skip to the end… then go back (if I am lucky).
Yes, I am a nood at Flash but I am trying to get better… :)[/QUOTE]
