Simple Animation in Flash
I read a question on a Flash forum recently asking for help in animating a logo of a person riding a bike. They uploaded the drawing they wanted and since I’m that kind of guy who tries to help I answered him…
Here’s what I wrote in case any of you want to learn this yourself!
Here's an image of the logo... ALL RIGHTS RESERVED
Here is what you should do:
Open your image in something like Photoshop and lasso the first wheel and hit CTRL-X to cut it from the image. The wheel will disappear. Then go to File> New and create a new file. Hit CTRL-V to paste the wheel into the new file you just created. Save it as “wheel 1″
do the same for the second wheel and save it as “wheel 2″
save the rest of your image as “bike”.
Open Flash
Hit F8 and a dialog box will come up. Call it “Bike animation”.
Now Hit F11 and your Library will come up. Double click the Bike Animation clip and it will open in the timeline. Nothing will be there yet though.
Now go to File> Import> Import Image
Navigate to the freshly created files on your computer and click OK
You images will appear on the timeline.
Click and drag to select them all or hold down Shift and click each one. then right click on the art on the stage and select “Distribute to layers” the files will now all be on their own layer.
Manipulate the two wheels to where you want them on the stage. If they are beneath the bike then reorder the layers how you want them to bem by dragging them above or below the others. Right Click on each wheel and select Transform. The blue box around your wheel should change to black and have little handles at each corner. There will also be a little white dot roughtly in the center of the image. This is your pivot point. If it is not already, move it to the center of your wheel. Do the same for the 2nd wheel.
Now go to the 8th frame on the timeline.
Hit F6 on your keyboard.
This will make the total length of the scene 8 frames long. You should have two dots one on the first frame one on the last frame. Do the same for each layer so they are all the same amount of frames.
Now select the two wheels and right click on the selected area and select “Motion Tween”.
Now your two wheel layers will be blue with an arror going form the first frame to the last frame.
Go to frame 4 on the first wheel and right click and select create keyframe from the pulldown menu that comes up. When you do you will see a new black dot.
Rotate the wheel by right clicking the wheel and selecting transform. When you move the mouse to one of the corners the mouse will change to a rotate icon. Rotate the wheel sideways.
Do the same for your other wheel.
Under the timeline to the left under the layers area you should see “Scene 1>Bike Animation” Click Scene 1 and the bike will disappear.
Now hit F11 again and the Library will come up again. Drag the bike animation clip from the Library onto the Stage.
Place it where you want it. You can also resize it.
Now hit Ctrl Enter and your little film should play. Tweak until it looks good to you.
If you want the bike to move up and down as it animates, then go to frame 8 on the main stage and hit F5 . This will give you a frame range of 8 frames again like we did earlier BUT it will not put a keyfraem at the end of the sequence. We’ll do that in a second.
Go to frame 8 and right click on it and select Create Motion Tween. Again your frames will change to blue etc.
NOTE: When a Tween is invoked in Flash, you can ONLY select a keyframe and not any fraem. it HAS to have a black dot on it for you to be able to select it.
Right click on the bike on frame 1 and select Transform and move the pivit point (white circle) to the bottom of the black box. Now go to frame 4 and right click and select create keyframe. Now select the top middle controller on the transform box and squish your drawing slightly to make it seem like it’s lowering a bit. Only the top will squish and the bottom of the drawing will stay as is because of the pivot point’s position.
Hit CTRL enter and your little bike guy should animate and slightly go up and down as well!
Here’s what it essentially will look like.
The drawing itself is not the best to animate with mostly because of the odd shaped wheels but you can clearly get the idea. He should also be able to animate his legs up and down but that’s a lesson for another time.
Original FLA file can be downloaded here.
You’re an animatin’ fool!
That’s about it.
I hope this helps
UPDATE: Flash is weird sometimes and tweening images especially a circle can be troublesome because if it rotates around too far between two keyframes Flash takes the shorter way and rotates the opposite direction so in order to get the wheels to turn correctly you have to do it in small increments by rotating a bit on the 2nd frame, then going to the 4th frame and rotating a little more and so on. Also when animating a wheel it’s hard to see the rotation correctly because it all pretty much looks the same so a trick you can do is to double click inside the wheel clip, place a small square at the top of the wheel and then go back tot he stage and animate the wheeel. this way you can see how far it turns each keyframe! When you’re done simply remove the square and you’re good to go!
