Previously, we learnt how to create a basic shape tween on the stage and some basic navigation around the flash interface. But what other methods of creating movement on the stage are there? In this lesson we will learn how to create create a Movie Clip and add a motion tween.
STEP 1
Open up a new Flash AS2 document, and rename the first layer to ’stuff’ and set the framerate to 31. Select the circle shape tool, and set the border colour to none. Draw a circle on the stage and select it.
STEP 2
Now, we are going to turn this circle into a Movie Clip by pressing f8 to bring up this panel:
This panel can also be reached by going to Modify > Convert to symbol, but do try to learn the shortcut keys!
Ensure that Movie Clip is selected, and the registration point is centered the same as in the image above. Name this movie clip MC_shape. You will notice that this Movie Clip is now visible in the library on the right of your screen:
STEP 3
Double click on MC_shape that is on your stage. This will take you ‘inside’ the movie clip. Here you can create animations unaffected by the main timeline. Click on frame 30, and press f6 to create a new keyframe and give you some frames to work with. Select frame 15, and press f6 again to add another key frame. On this frame, choose the selection tool and hover over the top edge of the circle until the cursor changes. Click and drag the shape up to distort it. Do the same on the bottom edge, and bring in the sides until your shape looks similar to this:
STEP 4
Right click on a frame between 1 and 15, and create a shape tween. Do this again on a frame between 15 and 30. If you now select frame 1 and hit enter, you should see your shape animate. (If you are using flash 8, this option is under tween in the properties panel).
STEP 5
Now, by the timeline select ’scene 1′ to exit the movie clip and go back to the main timeline.
You will see there is still only one frame on the main timeline, so go to frame 120 and press f6 to create a new keyframe. On frame 1, put your movie clip on the left, just off the stage. Go to frame 120, and put the movie clip in the same vertical position but just off the right hand side of the stage. Right click anywhere on the timeline between these frames and create a motion tween.
STEP 6
Hit CTRL+enter, and watch your ‘blob’ bounce across the screen! Ok so its nothing particularly fancy, but this should give you a basis to work from. The key thing to remember is that the timelines are seperate from each other. As we move more into character animation in the future, you will see how useful this can be!
BONUS TUTORIAL - ADDING A SHADOW
The blob looks ok, but he does not look like he is bouncing enough. He’s more just sort of ’sliding’ across the screen. To fix this, we will add a shadow to the animation.
STEP 7
Double click MC_shape to go into the movieclip timeline. Rename layer 1 to ‘blob’, create a new layer called shadow and drag it below the ‘blob’ layer. Next, select the circle shape tool, ensure border is set to none and fill colour is set to black, then draw an elipse at the base of your blob.
STEP 8
Select the elipse on the shadow layer, press f8 to Convert to Symbol. Select Graphic, registration point centre and call it GPH_shadow.
<—–*TIP* —–>
I find it is a good idea to name Movie Clips, Graphics and Buttons MC_, GPH_ and BTN_ so they stay grouped in the library.
<—–*END TIP*—–>
STEP 8
Next, select GPH_shadow and in the properties panel select the ‘filters’ tab. Select add filter > blur and set the vaue to 20 quality medium.:
Your shadow should now look similar to this:
STEP 9
Now we need to animate the shadow to make it look like the blob is bouncing. On the shadow layer, add a keyframe on frame 30 (f8) and frame 15, to match the blobs movement. Click on frame 15 of the shadow layer and select the transform tool then shrink the shadow down. Also, in the properties panel go to color > alpha and set to 50%. Frame 15 should look something like this:
STEP 10
Right click a frame between 1 and 15 on the shadow layer and select Motion Tween, and again between frame 15 and 30. Now hit CTRL + Enter and see your blob bounce!
You can now have a play about, try adding some eyes or something, use your imagination! (I did not use my imagination, and just added eyes)
The Blob <— Check out the blob in action!
I hope you enjoyed this tutorial and maybe even learnt something from it! If you have a tutorial request, please leave a comment and we will do our best to fulfill your wishes! S
The Dude
Not a member yet? Why not! Sign up now to enter our contests and recieve updates.
Help me out by voting for this tutorial
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!
[...] Finished making “my blob” in about 30 minutes the tutorial i used wasn’t clear on a few of the important details to create the perfect blob. After you do this tutorial you will begin to understand that Flash isn’t as complex as you may think. It’s all about the art of illusion Flash designers could be described as digital illusionists. Do the tutorial [...]
A Motion Tween Shortcut
Because you’ll likely use motion tweens a lot, there’s a great shortcut to know. Just right-click your starting keyframe (on a Macintosh, use Control+click), and then select the option Create Motion Tween from the list that pops up.
I’ve tried to follow this tutorial and all I get is my blob wobbling to itself in the same position - it does not move across the stage as required.
What am I doing wrong?
I’ve got Flash CS4 on a PC running XP
I’ve tried it in both AS2 and AS3, neither one works.