Summary:

Trace a Butterfly 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 and Drag and Drop Projects.


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

Other People's Work:

Here are some examples of work inspired by this tutorial.

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

Get Adobe Flash player

Step #1: Open your Project in Flash ~

Click to view project

    ●   If you are working on the Aesops Fables Project open that ...

    ●   OR, the Drag and Drop Project ...

 

… if you ABSOLUTELY have not project right now, open a new document in Flash

… (Remember: all these tutorials are intended to be applied to YOUR PROJECT) …


Step #2: Find a Butterfly ~

Go on-line and find an image of a colorful Butterfly and copy it.

Create a New Layer, paste your butterfly and lock lock your other layers.


Step #3: Free Transform Tool ~

Maybe it's too big? Get the Free Transform Tool or hit the keyboard shortcut letter (Q) …

free-transform-Fl.png

 

… hold the shfit key Shift (⇧)shift keyand shrink to fit the stage area:

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

Get Adobe Flash player


Your image MUST be within the white "Stage" area or it can not be seen when you play your video.

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

Get Adobe Flash player

 

 

 

Remember: Everything outside the "Stage" area cannot be seen.


Step #4: Convert to Symbol ~

Whth the image on the stage selected, hit f8(or Right-Click and select: ) and make a Movie Clip.


Step #5: Lower The Alpha ~

Then, open the Properties panel (if necessary) by hitting Cmd (⌘) +F3, or go to: Window > Properties and click on Color Effect.

Where it says "Color: None" go to: Alpha.

 

 

 

 

Lower the Alpha using the slider so you can see through the image slightly.


Step #6: Add a Layer & Lock the Background ~

Create a new layer above the picture and call it "Outline:"

insert layer\

Lock the background layer by hitting the lock icon to keep from accidentally drawing on the wrong layer.

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

Get Adobe Flash player

Lock all your layers while you're not using them!


Step #7: Format the Brush ~

Select the Brush Tool or hit the keyboard shortcut letter (B) …

brush

Lower the Brush size - Start small ~

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

Get Adobe Flash player

Also, make sure Object Drawing mode is UNCLICKED

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

Get Adobe Flash player

 

 

 

 

Again, have Object Drawing un-clicked -

 

Step #8: Smoothing ~

Open Properties again, and raise the smoothing level.

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

Get Adobe Flash player

Note: The higher the smoothing number, the smoother your lines will be …

Now begin to trace around the outline of your figure.

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

Get Adobe Flash player


TRY IT! With the Smoothing set both high, draw another line and compare:

bad => better

SAVE YOUR WORK FREQUENTLY by hitting the keyboard shortcut Cmd(⌘)+S - Drawing in flash is FUN!


Step #9: Colors & Fill ~

Go to: Window > Color or hit: Shift (⇧) + Cmd (⌘) + F9 shift key f9 and click on Fill Color

… and select Radial in the Fill Style.


Step #10: Color Selector ~

Double-Click the color selector …

… and select a color for that gradient.

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

Get Adobe Flash player

Set the other side too …

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

 

Ooops! ~

 

 

If you add too many selectors, just drag them into space to remove …

 

 

 


Step #11: Paint Bucket Tool ~

Get the Paint Bucket Tool paint bucketor hit the keyboard shortcut letter: (k) …

… pick a Fill Color from the color palette, …

… select Close Large Gaps

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

Get Adobe Flash player

… and then click to fill the area.

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

Get Adobe Flash player

Be as creative as possible with colors & lines.


Step #12: Delete the Background ~

Select the layer the background layer is on and delete it.


Step #13: Symbols and Registration points ~

Hit the keyboard shortcut Cmd (⌘) +A to select everything and then hit f8(or Right-Click and select: ) and make a Movie Clip. , and set the Registration point of the Movie Clip in the direction your butterfly's head is pointing.


For instance, if you butterfly's head is pointed up …

… then set the Registration point: top-center

Or, if your butterfly is facing to the right, set the Registration point accordingly.


Step #14: Filters ~

Then, in Properties, click Filter

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

Get Adobe Flash player

… and add Drop Shadow

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

Get Adobe Flash player

… and maybe add Bevel too …

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

Get Adobe Flash player


Experiment with all the settings you see here. Try different things - take a risk!


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.


When you're ready to make the wings flap, continue with the next tutorial …


Other Resources: