Photo Shape Tweens	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Photo Shape Tweens

Free Flash Tutorial

This tutorial will show you how to create a Shape Tween with a Photo-Painted Shape. This is a very simple and slightly different animation technique.

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

Example: Download the Flash file  Beg 035a

A Photo painted into a Shape Tween.

Definition: I am using the Photo very broadly and in fact you can use any Bitmap type image: Bitmap

It is possible to break apart Jpeg photos which means that they can be Shape Tweened!

A Photo	A Photo Broken Apart: Modify > Break Apart (Ctrl B)

The 'Shape' of a photo is just a rectangle and as such does not really have much of a Shape to Tween. Having said that it is worth looking at what happens. Below is an example of a photo Tweened into a shape and back again:

Example: Download the Flash file  Beg 035b

Photo Shape Tweened. An odd result.

Flash allows you to paint photos and then you can do things like this:

Example: Download the Flash file  Beg 035b

A Photo painted into a Shape Tween.

You will see that the above image is actually made of a matrix pattern of the original photo:

Matrix Pattern.

To create the above type of effect you will need to Paint with a Photo.

Step One: Painting Photo Effect

You will need to have a Jpeg type Photo to create this effect. If you don't have one:

1. Right click (Mac Ctrl click) on the following photo and select: Save Picture As...

   
   Right click and Save Picture As...

   Note: Remember where you saved it to!

1. Open a new Flash file: File > New > General Tab > Flash Document > OK
   
   
2. Import the photo into the Flash Library: File > Import > Import to Library
   
   
3. Select the Brush tool:
   
   
4. Then: Paint a Shape


My Shape.

5. Open the Color Mixer Panel: Window > Color Mixer (Shift F9)
   
   
6. For Type select: Bitmap



Your shape should fill with the Photo image:

Step Two: Setting up the Shape Tween

1. In Frame 1 select the: Keyframe
   
   
2. If the Property Inspector is not open, open it by going: Window > Properties > Properties (Ctrl F3)
   
   
3. In the Property Inspector for Tween select: Shape

   
   From the drop down menu select: Shape

4. Right click (Mac: Ctrl click) on Frame 15 and select: Insert Blank Keyframe


The Timeline should now be green and a dashed line.

Note: The dashed line will turn into an Arrow after you paint your shape into frame 15:

Step Three: Painting the Second Photo

1. Select the Brush tool:
   
   
2. Still on Frame 15 paint another: Shape

The next Shape should have the Photo Fill by default:


My next Shape.

Step Four: Testing the Movie

1. Save your file: File > Save (Ctrl S)
   
   
2. Go to: Control > Test movie (Ctrl Enter)

   
   You should see something similar to this.

3. Close the Test Window:

Well that's it so have fun Shape Tweening!!

Cross Ref: Shape Tweening

Cross Ref: Clip Art, Vector Shapes and Shape Tweens