How To Make Butter Fly!

Level: Intermediate
Requirements: Flash MX or higher
Language: Actionscript

This tutorial will take you through the basic steps for making a continuously moving ‘object’ such as a walking person or a flying bird. I choose to make a pack of butter fly because I liked the joke :o). This tutorial is about the basic steps for creating the movement and not about creating the artwork. If you have never used Flash before I suggest you work through the tutorial ‘Flash MX for Beginners’ as I have assumed some basic knowledge of Flash.

The tutorial was created in Flash MX but will also work if your using Flash 8

Step 1: Setting UP THE STAGE.

Open up Flash and create a new stage about 500px by 300px should give you enough room to fly around in. Set the frame rate to 31 frames per second.

Select the black arrow from the tool bar.

In your timeline rename layer 1 “butter”.

Step 2: START DRAWING.

Using the Rectangle tool draw a shape that looks a bit like a pack of butter. I also added a little bit of corner to the shape for a better effect. You can of course create your image using a different graphics programme and then import that image into Flash.

Select the ‘butter’ on the stage and then press F8 to bring up the “Convert to Symbol” box. Give it the name ‘butter’ and the behaviour “Movie Clip”. Click OK.

The ‘buttter’ will now have a blue line around it indicating that it is now a Movie Clip. Double click on the newly made ‘butter’ Movie Clip to go to its sub timeline. The info bar will change to read “Scene 1 Butter” and you will see a new timeline.

Again rename layer 1 ‘butter’ and lock the layer by clicking on the small dot next to the layer name and below the padlock icon. The dot will change into a padlock. This ensures that you don’t accidentally select the butter image.

Step 3: MAKE THE WINGS.

Make a new layer and rename it ‘wing one’. Draw a wing shape and position it appropriately in relation to the butter shape. Select the wing shape and create a new Movie Clip as we did in step 5 except this time you will select the wing shape and call the movie clip wingone.

Double click on the newly created wingone movie clip. Again the info bar will change to show we are now in a sub of the sub … Scene 1 – butter – wingone. Again you will see a new timeline appear.

On Layer 1 move along the timeline to frame 70 and right mouse click then select “Insert Keyframe”.

You will see that a grey line appears between frame 1 and frame 70 with a black dot in frame 1 and frame 70 indicating that they are now keyframes.

Right click anywhere between frame 1 and 70 and select “Create Motion Tween”.

Make sure that the keyframe in frame 70 has the motion tween on it. Click in frame 70 so that it shows as a black frame then on the stage select the wing and then select the “free transform tool”.

The shape will now have a black border that will allow you to ‘reshape’ it. In the middle of this black border you will see a white circle, this is the image anchor point. Move this circle to the bottom centre of the shape. This anchor point needs to be in the same place in each keyframe (I have never managed to find out how to make Flash keep this anchor point properly across keyframes so this is my ‘cheat’: Right click on frame 70 and choose “copy frames”, go to frame 1 right click and choose “paste frames” now both frames have the same anchor point.) Go back to frame 70.

From the top middle black square drag the top of the shape down to just past half way.

Insert a new keyframe at frame 115. (Right click choose “Insert Keyframe”.) Another nice little cheat: we want the wing to return to its starting point so, go to frame 1 right click and choose “copy frame” go back to frame 115 right click and choose “paste frame” hey presto we’re back where we started with a nice smooth movement!

Time to see some action! Click on Scene 1 in the info bar to take yourself back to the main stage. Hit Ctrl Enter to preview your butter flying, with one wing at the moment.

Close the preview window to return to the main stage. Double click on the butter Movie clip to go back into the first level sub clip. Info bar should read “Scene 1 – Butter”

Step 4: MAKE THE SECOND WING.

Insert a new layer call it ‘wing two’. Drag this layer down so that it’s at the bottom of the layer list. The second wing will now be behind the butter, as it should be.

Now you can either draw a new wing or copy wing one. To copy wing one double click on the ‘wingone’ Movie clip until you see the info bar telling you your at Tween 1, basically you will no longer go anywhere when you double click.

Select the wing shape and copy it, either use right click copy or ctrl c.

Go back to the ‘butter’ Movie clip by clicking on butter from the info bar.

Select layer wingtwo then click anywhere on the stage and paste the wingone copy. Position it appropriately.

Lock “wing one” and “butter” layers.

Make a new Movie Clip from “wing two” (step 8).

Repeat steps 9 to 16 for movie clip wing two to create the second wings movement.

Now we have butter that’s wings are moving but it’s not flying anywhere yet!

You should now be in the main stage area “Scene 1”.

Adjust the position of the butter Movie clip to a suitable starting place for instance the top left of the stage.

Insert a keyframe at frame 120 and right click to create the motion tween. Whilst on frame 120 move the Movie Clip to its finishing point for instance the bottom right corner.

Hit Ctrl enter to preview your movie.

To publish your final movie select File – Publish.

You can get much more creative in the movement of the clip by using a motion guide.

The frame rate can be changed to suit your animation as can the setting of the keyframes. And much more detail can, of course be added.

That’s it.
Of course this is just the very basic principle, there are many great effects that can be achieved once you’ve got the basics working.