Sacramento New Technology High School

31 - Butterfly Movie Clip - Advanced ~

Step #1: Find a picture ~

Find a side view image of a colorful Butterfly...

Step #2: Open Flash ~

Go to: File > Import > Import to Stage and import the picture or just copy and paste.

Maybe it's too big? Use the Free Transform Tool to shrink it down to size:

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

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

Step #3: Convert to Symbol ~

Make sure the image on the stage is selected.

Hit (F8) and select Movie Clip.

Convert the image to a Movie clip.

Step #4: Lower The Alpha ~

Then, open the Properties panel by hitting Ctrl+F3, or go to: Window > Properties

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

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

Step #5: 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 icon to keep from accidentally drawing on the wrong layer.

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

Step #6: Format the Brush ~

Then, select the Brush Tool or just hit the letter (B).

brush

Lower the Brush size - Start small ~

Step #7: Smoothing ~

Open Properties (If you don't see Properties, hit Ctrl+F3 or go to: Window > Properties.)

Change the color to Black and raise the smoothing level.

Note: The higher the smoothing number, the smoother your lines will be, the lower, the rougher.

Now begin to trace around the outline of your figure.

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

bad => better

SAVE YOUR WORK FREQUENTLY by hitting Ctrl+S

Drawing in flash is FUN & interesting!

Step #8: Colors & Fill ~

Go to: Window > Color or hit Shift+F9

Select Radial in the Fill Style

Select your color for one side of the gradient.

Set the other side too...

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

Step #9: Paint Bucket Tool

Click the Paint Bucket Tool

...and click to fill the area.

Be as creative as possible with colors & lines.

SAVE YOUR WORK - Ctrl+S

Step #10: Another Movie Clip ~

Select the layer the Butterfly drawing is on, which selects everything, and hit F8

Save your butterfly as ANOTHER Movie Clip.

Step #11: Open the Movie Clip ~

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

Notice you now have two icons on the timeline. That means you are working on a "Movie INSIDE the main Movie."

movie within a movie

Step #12: Right Wing ~

Get the Lasso Tool

lasso tool

Trace around the wing.

Right-Click & cut the wing.

right click

Make a new layer and call it Right-Wing and Paste-in-place.

Step #13: Left Wing ~

Make a new layer called left wing...

left wing

Paste the wing again into another layer.

2 wings

All the parts of the butterfly are all separated into individual layers in the timeline.

This layering is essential to make the wings move independently.

Step #14: Keyframes & Onion Skin ~

Hit F6 to insert a new keyframe & make sure all layers are locked except the one you are working on...

hit f6

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

onion skin

Step #15: Start the Wings Flapping ~

Select the Free Transform Tool

free transform

Hold the Ctrl key down.

ctrl

Grab the corner and pull down...

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

Step #16: More Flapping ~

Hit F6 again to create a third new keyframe, hold down the Ctrl key and squeeze the wing even smaller.

Skew the Wing a so it is a little smaller...

Repeat the process as many time as necessary...

Hit Ctrl+Enter to view your Work. Your movie clip might look something like this:

Step #17: The Other Wing ~

Don't forget about the other wing.

Select the other wing layer and lock it.

Insert a Keyframe into Frame 2 - Right Wing - by hitting F6

hit f6

Holding the Ctrl key, skew the right-wing the same way you did before...

Complete timeline might look like this:

timeline

Save your Work - Hit Ctrl+Enter to view.

Step #18: Motion Tween ~

Go back to Scene 1

Then, right-click on approximately Frame 100 & select
Insert Keyframe

Also, right-click somewhere in between the keyframes again & select Create Motion Tween.

create motion tween

If you see a blue line - you know it worked.

blue line

Step #19: Motion Guide Layer ~

Click Add Motion Guide button.

motion guide

The icon looks like this!

guide

The guide layer should appear on top...

guide_layer

Step #20: Draw Your Guide Line ~

Then, select the: Pencil Tool

pencil tool

Select: Smooth at the bottom of the Panel

smooth

In the Guide Layer, click on Frame 1 & with the Pencil tool still selected, draw a wavy line, or any likely path a butterfly might take.

Important! The line must not cross over itself!

Step #21: Position the Butterfly ~

Drag the butterfly to the start of the line.

The registration point of the symbol must be directly over the top of the guideline.

The registration point looks like this.

Step #22: The End~

Click the last frame at end of the timeline...

Drag the butterfly to the end of the path.

Hit Enter and play it - see if it works.

If it doesn't work, you may need to position the movie clip again. You might not have gotten the registration point exactly on the line.

Save your work!

Step #23: Orient to Path ~

Try "Orient to Path" in the Properties menu.

Click somewhere on the Motion Tween

click motion tween

Select "Orient to Path"

Orient to Path may not work for you, but it's good to know...

Last Step: Save and Export your work ~

NOTE: If you put your .swf file in a web page, you may need to make it transparent.