Using Free Transforming To Show Perspective in Flash

In this tutorial, I will show you how to display perspective (near to far) using objects in Flash with help of the Free Transform Tool. For a simple example of this, I will be showing you how to make a car from the distance become near.

Step 1: Creating The Flash Document:

After you have opened Flash, create a new document and resize your new Flash document in the Properties Inspector. To do this, click on the Size button with the default dimensions on the Properties Inspector

Within the Document Properties window, make the dimensions of your Flash document 500 x 383. This will be the size of the background that we will be using. After the width has been set to 500 and height to 383, press the “OK” button, and your Flash document will automatically resize for you.

Step 2: Importing The Images:

We are now ready to import the images (the car and the background) that we will be using into the Library in Flash. The images that I will be using in this tutorial can be downloaded here (background image and car). (Courtesy of Clipart.com)

To import the images into the Library, from the File menu, choose Import to Library, and an “Open” window will appear. From the “Import to Library” window, select the files that we will use in this tutorial and then press “OK”.

To open the Library (if it is not already open yet), press the F11 key, and the Library will automatically open for you. You will also see the files that you imported, and your Library should look similar to the image below.

After the files have been imported into the Library, we are now ready to place them on the Stage; however, we will do this sequentially and not both objects at the same time. First, drag the file that we will use for the background (with the trees and the road) onto the Stage by dragging the filename.

When the background has been dragged onto the Stage, use your mouse and keyboard to nudge the image into the center of the stage so that all corners are flush.

Step 3: Layering:

Before we place the car on the Stage, we will need to divide the Timeline into different layers. To do this, click the “Insert Layer” button on the bottom left-hand side of the Timeline, and a new layer (defaulting to the name of “Layer 2”) will automatically be created on top of Layer 1.

With the second layer (Layer 2) selected in the Timeline, drag the car image from the Library and place it at the top / far end of the road on the background image. The stage should look like the image below:

Step 4: Free Transforming:

As you can probably tell, the car is out of proportion with the rest of the image. To resize the car so that it is proportional, we will be using a tool from the Toolbox called Free Transform. With the Free Transform Tool selected from the Toolbox, click once on the car, and then use the crosshairs around the car to resize it to a normal proportion so that it looks far away.

Step 5: Getting The Car in Motion:

Now that we have both images set on the Stage, we are ready for the car to be set in motion. To allow the image to have the properties that we want attached to it, we will need to convert it to a graphic. To do this, select the car on the stage and press the F8 key. This will make the “Convert to Symbol” window appear.

Within the “Convert to Symbol” window, please enter the following parameters and then press “OK”:

  • Name: Green Car
  • Behavior: Graphic

Now that the car has been converted a graphic object, we are almost ready to set it in motion. To give the car time to move, we will need to extend the time in the Timeline. To do this, with Layer 2 selected, click on the 30th keyframe in the Timeline and then press F6. This will copy all of the frames between 1 and 6 for Layer 2. After this has been performed, do the same for Layer 1. The Timeline should look like what I have provided below.

Select keyframe 30 of Layer 2 in the Timeline. With this keyframe selected, click the car once with the Free Transform Tool selected from the Toolbox, and then resize the car to a large scale using the crosshairs. After the car is to a larger scale, move the location of the car to the bottom of the road / nearer to you.

Step 6: Tweening

To give the car motion from point A to point B, we will need to add an element to the Timeline called Tweening. To do this, select any of the keyframes between 1 and 30 for Layer 2 in the Timeline. With one of these keyframes selected, from the “Tween” options in the Properties Inspector, select the “Motion” option. This will shade Layer 2 a bluish color with a straight line through it and animate the car to travel down the road.

To test the Flash animation that you have just created, from the Control menu, select the Test Movie option. Your Flash animation should look like the example that I have provided below.

By Chad Sweely

Chad Sweely is a staff writer and Flash Designer for FlashNewz.

Leave a comment