Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Summary:

Butterfly Flapping its Wings in Flash

    ●   This is one of 3 tutorials which end with the butterfly flapping it's wings, flying around in a circle or any path you choose.


Learn About:

Brush Tool Smoothing Color Gradients Free Transform Tool

  •   This tutorial is part of the Aesop's Fables, Drag and Drop and Run and Jump Platform Game Projects.


1 - Butterfly    2 - Flapping Wings    3 - Fly Along a Path

Other People's Work:

Here are examples of work inspired by this tutorial.


Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #1: Open your Project in Flash ~ ~

Open the Butterfly you created from this tutorial


Double-Click on the butterfly movie clip with the Selection Tool

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


… OR - if you don't have a Movie-Clip yet, select all and hit f8 (or Right-Click and select: ) and make a Movie Clip - making sure to set the registration point in the same direction the head of your butterfly is pointing.

Now Should Now Be Working INSIDE the Movie Clip.
movie within a movie



Step #2: Trace Around the Wing ~

Get the Lasso Tool or hit the keyboard shortcut letter (L) …

… and trace around the wing.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #3: Cut the Wing ~

Now, Right-Click & Cut the wing or hit the keyboard shortcut: Cmd(⌘) +X

right click

… make a new layer, call it Right-Wing and go to: Edit > Paste-in-place.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #4: Left Wing ~

Make a ANOTHER new layer called left wing …

left wing

… cut the left wing off …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and paste it on the other layer.

2 wings

 

 

 

 

All parts of your butterfly should be separated into layers.



Step #5: Keyframes & Onion Skin ~

Make sure all your layers are locked lock except the one you are working on, and then hit F6 to insert a new keyframe …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Click on the Onion Skin button. This allows you to see the outline of the all the frames.


Step #6: Start the Wings Flapping ~

Then select the Free Transform Tool or hit the keyboard shortcut letter (Q) …

free transform

… and squeeze the wing down slightly …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

~ OR ~

If your butterfly wing is side-view, you can distort and, holding Cmd (⌘) grab the corner and pull down.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

You may also need to adjust the position of the wing to keep it connected to the butterfly.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #6: More Flapping ~

Hit F6 again to create a third new keyframe and squeeze the wing even smaller.

Repeat the process as many time as necessary …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Hit the keyboard shortcut: Cmd (⌘) +Enter cmd enter to view your Work. Your movie clip might look something like this:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #8: The Other Wing ~

Now do the other side - lock the right layer and unlock the other …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and insert a Keyframe into Frame 2 by hitting F6.

hit f6

Holding Cmd (⌘) cmd key, skew the right-wing the same way you did before …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

If you have a 3rd layer, hit F5 f5 to add empty frames and complete timeline - something like this:

timeline

Go back to Scene 1 …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and add backgrounds, flowers, clouds, be creative!

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Last Step: Save and Attach ~

Save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.fla]

Attach it!

  •   ALWAYS save your projects using the following naming convention:
FIRST_NAME_LAST_NAME_PROJECT_NAME

  •   DO NOT name your project any other way - Improperly named projects will not receive credit and you will be sad.

  •   NEVER leave your work on the desktop or depend on a flash drive - instead, save your work in a folder you can find later - preferably on a virtual drive where it can be backed up.


Then continue to making a your butterfly follow a path …


Other Resources: