download swf here
download open fla here
you can use button symbols to create
buttons also you can use movie clip symbols to to creat more powerful buttons. With movie clip buttons, you have much more control over the behaves of your buttons.
with symbol button you can add a little animation with putting a movie clip symbol to the over state. but there is no more to do if you want to go further by adding special animation when you are moving away from your button . really a whole lot you could do there if you were using a simple button symbol.
in this tutorial, you will learn how to make rollover and rollout animations on a movie clip button.
we're going to create buttons that expand out sideways on rollover and animate back to their original size on rollout.
Create the "states" for your button.
For this tutorial, we're going to create an up state, an over state, and an out state.
The up state : will contain the button at its default size and position,
The over state :will contain an animation of the button's background expanding to the right,
The out state,: it will animate back to its original size.
The up state will consist of a single frame and will reside in frame one, which we've already created. With frame one selected for the "Labels" layer, go to the Properties Inspector and type up into the frame label text field. For the over state, click on frame 10 for the "Labels" layer, hit F6 to add a new keyframe, and with this new keyframe selected, enter over into the frame label text field in the Properties Inspector. This frame (frame 10) will be the beginning of the rollover animation. You're going to make this 10 frames long, so the animation will end in frame 20. So, to add a little breathing room, jump over to frame 30 on the Labels layer, add a new keyframe, and label this one out. This animation will also take up 10 frames, so it will end in frame 40. Click on frame 40 for the Labels layer and hit F5 to extend the frames out so that you can read the final label in the timeline.
Now we need to add our stop actions. By default, a movie clip symbol will start playing through its timeline, and that's not what we want. By default, we want our movie clip button to stay in frame one until we hover over it. We also need to add stop actions to the end of our over animation and our out animation. So click on frame one, hit F9 to open up your actions, and type stop(); into your actions panel. Then, close your actions panel.
We can easily copy this stop action to frames 20 and 40 by doing the following:
5. Create the over and out animations. Since the text of the button isn't going to change, go ahead and click on frame 40 for the text layer and hit F5 to stretch the frames across the entire animation. Then, before you create the animation for the background of the button, select the rectangular background and convert it to a movie clip symbol. Call it whatever you like. (This symbol does not need an instance name.)
With your background converted to a movie clip, add keyframes to frame 10 and frame 20 of the background layer.
Frame 10 will contain the beginning keyframe of the animation, and frame 20 will contain the ending keyframe of the animation.
Leave frame 10 alone. Click on frame 20, switch to the Free Transform Tool and stretch the shape out to the right about 10 or 20 pixels
If the shape stretches out in both directions when you try to resize the width, simply hold onto Alt while you drag it out, and the left edge will stay in place.
Right-click anywhere between frames 10 and 20 on the background layer and click on Create Motion Tween. The over state is now complete.
Click on frame 30 for the background layer (the beginning of the out state) and add a new keyframe. This new keyframe will retain the expanded size of the button.
In this state, we want the button to animate back to its original size.
To create the ending keyframe for this animation
(since it needs to be the exact same size as it's starting size),
right-click on frame 1 for the background layer, click on Copy Frames, then right-click on frame 40 and click on Paste Frames. Then right click between frame 30 and 40 and select Create Motion Tween. Your animations are now complete, and your timeline should look like this:
6. Return to the main timeline. At this point, we're done editing the movie clip button's timeline. Click on Scene 1 on the edit bar (the bar right below the timeline) to return to the main timeline.
7. Code your movie clip button. Create a new layer on the top of the layer stack in the main timeline and call this new layer Actions. Lock this layer by clicking on the layer underneath the padlock icon, click on frame 1 for the Actions layer, and hit F9 to open up your actions panel. Enter the following code into your actions:
Line 1 sets the buttonMode property of the movie clip to true. Without this, your button would still work, but the user would not see the hand cursor when they hovered the mouse cursor over the movie clip.
Line 2 sets up the event listener for the rollover. When the user rolls the mouse cursor over the button, this event triggers a function called onButtonOver, which we created starting on line 5. Inside this function, we're simply telling our button movie clip to go to the frame labeled over and start playing. It will then play until it reaches a stop action.
Line 3 sets up the rollout event listener, which triggers the onButtonOut function, which tells the movie clip to go to the frame labeled out.
Notice that there's nothing in this code that explicitly returns our movie clip to the up state. This is because it's really not necessary. The end of the out state looks exactly like the up state, so it really doesn't make a difference. But if we wanted to, we could have just left out the final stop action at the end of the movie clip timeline, and instead of stopping at frame 40, it would simply loop back to frame 1 where it encounters the stop action there. Doing this would result in the exact same visual result.
8. Bump up the frame rate. One last thing... For a nice, smooth animation, bump the frame rate up to 24 frames per second. This will give you a quicker, smoother animation. To do this, simply double-click on the frame rate displayed at the bottom of the timeline and enter in a new value.
Your final file should look something like this
download swf here
download open fla here
download open fla here
you can use button symbols to create
buttons also you can use movie clip symbols to to creat more powerful buttons. With movie clip buttons, you have much more control over the behaves of your buttons.
with symbol button you can add a little animation with putting a movie clip symbol to the over state. but there is no more to do if you want to go further by adding special animation when you are moving away from your button . really a whole lot you could do there if you were using a simple button symbol.
in this tutorial, you will learn how to make rollover and rollout animations on a movie clip button.
we're going to create buttons that expand out sideways on rollover and animate back to their original size on rollout.
create the button movie clip
- create a simple rectangle with a text centered on top of it.
- select the rectangle and the text, hit F8 to convert to a symbol, select Movie Clip and call it whatever you want.
- Even though this graphic is going to look and act like a button, we want to make it into a movie clip in order to take advantages of all the benefits of using a movie clip symbol.
- select your new movie clip button, and give it an instance name in the properties inspector. I'm giving my button an instance name of btn_mc.
- Double-click on your movie clip to go into the movie clip's timeline. In the movie clip's timeline, you're going to create a few different states for your button
- Then use frame labels to label these states.
- Create a new layer called "Labels" and another new layer called "Actions."
- Keep these two layers at the top of your layer stack for easy access.
- Also, we need to separate the background of the button and the button text into separate layers. An easy way to do this is to select the Selection Tool in your toolbar, click once outside of your artwork to deselect everything (don't double-click, or it will take you back to the main timeline), then right-click on the background rectangle and click on "Distribute to layers." This will send the background rectangle to a new layer just below the current layer. Here's what your layer stack should look like now:
Create the "states" for your button.
For this tutorial, we're going to create an up state, an over state, and an out state.
The up state : will contain the button at its default size and position,
The over state :will contain an animation of the button's background expanding to the right,
The out state,: it will animate back to its original size.
The up state will consist of a single frame and will reside in frame one, which we've already created. With frame one selected for the "Labels" layer, go to the Properties Inspector and type up into the frame label text field. For the over state, click on frame 10 for the "Labels" layer, hit F6 to add a new keyframe, and with this new keyframe selected, enter over into the frame label text field in the Properties Inspector. This frame (frame 10) will be the beginning of the rollover animation. You're going to make this 10 frames long, so the animation will end in frame 20. So, to add a little breathing room, jump over to frame 30 on the Labels layer, add a new keyframe, and label this one out. This animation will also take up 10 frames, so it will end in frame 40. Click on frame 40 for the Labels layer and hit F5 to extend the frames out so that you can read the final label in the timeline.
Now we need to add our stop actions. By default, a movie clip symbol will start playing through its timeline, and that's not what we want. By default, we want our movie clip button to stay in frame one until we hover over it. We also need to add stop actions to the end of our over animation and our out animation. So click on frame one, hit F9 to open up your actions, and type stop(); into your actions panel. Then, close your actions panel.
We can easily copy this stop action to frames 20 and 40 by doing the following:
- Click on the keyframe in frame one of the Actions layer (where you just entered your stop action).
- With this keyframe selected, hold onto Alt , click on the keyframe again, and drag to the right.
- Release the mouse button at frame 20, and you should see a new keyframe copied to frame 20 with the stop action applied to it.
- Perform steps 1-3 again, this time for the end of the out animation in frame 40.
5. Create the over and out animations. Since the text of the button isn't going to change, go ahead and click on frame 40 for the text layer and hit F5 to stretch the frames across the entire animation. Then, before you create the animation for the background of the button, select the rectangular background and convert it to a movie clip symbol. Call it whatever you like. (This symbol does not need an instance name.)
With your background converted to a movie clip, add keyframes to frame 10 and frame 20 of the background layer.
Frame 10 will contain the beginning keyframe of the animation, and frame 20 will contain the ending keyframe of the animation.
Leave frame 10 alone. Click on frame 20, switch to the Free Transform Tool and stretch the shape out to the right about 10 or 20 pixels
If the shape stretches out in both directions when you try to resize the width, simply hold onto Alt while you drag it out, and the left edge will stay in place.
Right-click anywhere between frames 10 and 20 on the background layer and click on Create Motion Tween. The over state is now complete.
Click on frame 30 for the background layer (the beginning of the out state) and add a new keyframe. This new keyframe will retain the expanded size of the button.
In this state, we want the button to animate back to its original size.
To create the ending keyframe for this animation
(since it needs to be the exact same size as it's starting size),
right-click on frame 1 for the background layer, click on Copy Frames, then right-click on frame 40 and click on Paste Frames. Then right click between frame 30 and 40 and select Create Motion Tween. Your animations are now complete, and your timeline should look like this:
6. Return to the main timeline. At this point, we're done editing the movie clip button's timeline. Click on Scene 1 on the edit bar (the bar right below the timeline) to return to the main timeline.
7. Code your movie clip button. Create a new layer on the top of the layer stack in the main timeline and call this new layer Actions. Lock this layer by clicking on the layer underneath the padlock icon, click on frame 1 for the Actions layer, and hit F9 to open up your actions panel. Enter the following code into your actions:
Line 1 sets the buttonMode property of the movie clip to true. Without this, your button would still work, but the user would not see the hand cursor when they hovered the mouse cursor over the movie clip.
Line 2 sets up the event listener for the rollover. When the user rolls the mouse cursor over the button, this event triggers a function called onButtonOver, which we created starting on line 5. Inside this function, we're simply telling our button movie clip to go to the frame labeled over and start playing. It will then play until it reaches a stop action.
Line 3 sets up the rollout event listener, which triggers the onButtonOut function, which tells the movie clip to go to the frame labeled out.
Notice that there's nothing in this code that explicitly returns our movie clip to the up state. This is because it's really not necessary. The end of the out state looks exactly like the up state, so it really doesn't make a difference. But if we wanted to, we could have just left out the final stop action at the end of the movie clip timeline, and instead of stopping at frame 40, it would simply loop back to frame 1 where it encounters the stop action there. Doing this would result in the exact same visual result.
8. Bump up the frame rate. One last thing... For a nice, smooth animation, bump the frame rate up to 24 frames per second. This will give you a quicker, smoother animation. To do this, simply double-click on the frame rate displayed at the bottom of the timeline and enter in a new value.
Your final file should look something like this
download swf here
download open fla here
1 comment:
Did you know that that you can earn money by locking special pages of your blog / website?
All you need to do is to join CPALead and run their Content Locking tool.
Post a Comment