Saturday, January 10, 2009
In this tutorial we will make an Advance Animated Button in Flash.
Here is the preview
Requirements - Flash with AS 1/2/3. I'm making this with ActioScript2 because it is easier for beginners to apply actions on buttons in AS2 than AS3/AS4
Level - Beginners.
Estimated Time - 20 Min.
Step 1.First draw a Rounded Rectangle on stage with the Rectangle Tool and change the Redius in the Properties field. See the image.
Step 2. Convert it into Movie Clip(will explain latter why Movie Clip). Name it as but_sym_mov
Step 3. Now create another Movie Clip and name it button_mov. And insert the symbol you just created in-to it. Then add some Filters(available in Flash 8 pro or higher) like Drop Shadow on it.
Note- Some versions(not sure which one) of Flash does not supports adding Filters on Graphics Symbol. Thats why I told to make Movie Clip not Graphic Symbol.
Step 4. In this Movie Clip make two Key Frames one on Frame 12 and another on Frame 24.
Step 5. On Frame 12 select the object and press "Q" button in keyboard to enter Free Transform Mood. Now hold down the "Shift" key and drag from the corner to increase it's size.
When you are done add Motion Tween on the Frame 1 & 13.
Step 6. Now add another Layer above it and name it Action. Put this code on this layer's Frame no. 1 & 12.
stop();
Step 7. Go back to stage and insert this Movie Clip(button_mov) on stage, and give it Instance Name of ani_but.
Here I'm making this a little long because - when I made this types of buttons in shorter process they do not perform well if there is more than one button.
Step 8. Insert a Button Symbol, and put the but_sym_mov in its Hit Frame only.
Step 9. Go back to stage and put this newly created button in another layer above the original movie clip. Place this button with the exact size and positin of the the movie clip.
Press F9 while the button is selected. Now put this Script in action window and you are done.
on (rollOver) {
_root.ani_but.gotoAndPlay(2);
}
on (rollOut) {
_root.ani_but.gotoAndPlay(13);
}
1 Response to "Animated Rollover Rollout Button in Flash"
January 11, 2009 2:23 AM
Post a Comment