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

Get Adobe Flash player


Summary:

Simple Shape Tween in Flash

    ●   Shape Tweens are one of the most interesting effects you can accomplish with Flash. ~

    ●   Shape Tweens can be very effective in communicating a story or concept, especially if used to convey transformation or motion. They work with text, images and vector drawings.


Learn About:

Shape Tween Classic Tweens Filters Movie Clips

• Some understanding of tweening is helpful. ~

  •   This tutorial is part of the Aesop's Fables and the Drag and Drop projects.

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

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 YOUR PROJECT in Flash

 

 

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

… make a new layer & name it something.


Step #2: Colors ~

Go to: Window > Color or hit the keyboard shortcut letters: Cmd(⌘)+Shift(⇧)+F9

+ +

… click on stroke …

… and set the stroke color to none = null.

… click on Fill Color

… change the Fill Color to whatever looks good.


Step #2: Select the Polystar Tool ~

Select the Polystar Tool usually located under the Rectangle Tool.

With the Polystar Tool still selected, click on Options in Properties …

… and select Star from the Style drop down.


You DON'T have to use these settings!


Change the Number of Sides and the Star point size to whatever you like …


Do your own THinG!


Try difFerent stuff!


Step #3: Create a Star ~

Draw your star on the stage.

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

Get Adobe Flash player


Step #4: Movie Clip ~

Double-Click the star …

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

Get Adobe Flash player

… and hit F8 f8(or Right-Click and select: ) and make a Movie Clip.

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

Get Adobe Flash player


Step #5: Double-Click the Star AGAIN ~

Double-Click on the Star AGAIN

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

Get Adobe Flash player

 


Now you are working INSIDE the Movie Clip.

movie within a movie

Remember: A Movie Clip is a movie WITHIN a movie.

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

Get Adobe Flash player

 


Step #6: Insert a Keyframe ~

Click on Frame 1 and hit f6 (or Right-Click and select: ) to insert a 2nd Keyframe - now you should have 2.

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

Get Adobe Flash player

Then Right-Click on approximately Frame 20 and Insert keyframe.

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

Get Adobe Flash player


Step #7: Delete the Star ~

Click on Frame 20 and delete the star from Frame 20 only.

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

Get Adobe Flash player


Step #8: Draw Another Shape ~

Now, select the Brush Tool or hit the keyboard shortcut letter (B) …

brush tool

… and draw a different object on the stage, a heart shape or whatever.

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

Get Adobe Flash player


Adjust the lines (if necessary) using the Selection Tool

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

Get Adobe Flash player

 

 

Experiment with this feature.

 

 

Flash is GREAT for drawing because you can adjust the lines!

 


Step #9: Break Appart ~

You may need to break appart all the objects on each frame. Click each frame and hit the keyboard shortcut: Cmd(⌘)+B until all the shapes are broken.

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

Get Adobe Flash player


Step #10: Create Shape Tween ~

Then Right-Click somewhere between the frames and select "Create Shape Tween"

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

Get Adobe Flash player




Hit the keyboard shortuct: Cmd(⌘)+Enter

to view your Shape tween.

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

Get Adobe Flash player

Experiment with colors and shapes, almost ANYTHING can be tweened!

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 #11: Add Time at the Beginning and End ~

Click on Frame 1 and hit F5 a bunch of times to add 10 or 15 frames …

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

Get Adobe Flash player

… and do the same to the last frame: Hit F5 and add a bunch of frames to the end.

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

Get Adobe Flash player


Step #11: Make it go Backwards ~

Right-Click on Frame 1 and select Copy Frames …

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

Get Adobe Flash player


Right-Click and paste on Frame 50 (or wherever you ended).

If necessary, Right-Click between new frames and select "Create Shape Tween" again …


Step #12: Filters ~

Go back to Scene 1 …

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

Get Adobe Flash player

… and then go to: Window > Properties > Filters & add Drop Shadow.

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

Get Adobe Flash player

Add Bevel too, and any others you want …

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

Get Adobe Flash player


Last Step: Save and View your work ~

View your work by hitting the keyboard shortcut: Cmd(⌘)+Enter cmd enter

Save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.fla]

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

Get Adobe Flash player

 

•   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.