Driving with Flash - A Simple Flash MX 2004 Tutorial

We will create a very simple animation in Flash MX 2004. Keep in mind that I'm not teaching illustration. ;) This tutorial will cover the following: Renaming, inserting, and moving layers. selecting items, grouping, creating symbols, flipping, scaling, the library, pointer tool, modifying document properties, magnification, paint brush, pencil, properties inspector, frames, keyframes, motion tweens, motion guides, orient to path, and the publish settings dialog box.

In order to complete this tutorial, you will need to download and save flc_1.fla to your hard drive.

Open Flash, click Start > Programs > Macromedia > Macromedia Flash MX 2004

Click File > Open and navigate to the flc_1.fla file you saved to the hard drive, select the file and click Open. An image of a red car will open. The white area around the image is called the "stage". The stage is where all of the items that you want in your movie should be placed or drawn. Anything on the gray area outside of the stage will not be visible in your movie.

Click File > Save As and name the file caranimation and click Save. The file will automatically have an FLA extension. FLA is the native file format for Flash. The FLA file retains all of the individual layers, animation, and other movie settings. The FLA file is the file that you edit if you want to make changes to your movie.

Working with Layers

Notice the Timeline at the top of the screen. The Timeline contains Layers and Frames. Items that you draw should layer image be placed on separate layers. For example, the car is currently on its own layer called Layer 1. When we draw the road for this exercise the road will be placed on its own layer called background. It's important to give your layers descriptive names so that you can easily find and edit items in your animation.

Rename Layer 1 car by double clicking the words Layer 1 in the timeline and typing car. Press the Enter key to confirm your changes.

Zooming

From the menu, click View > Zoom In

The Selection Tool

The Selection tool (black arrow) is used to select items on the stage. The car is actually made up of many pieces, if you click on a piece of the car with the Arrow tool , the red body for example, a mesh pattern will appear indicating that the object is selected. If you click around the car, you will notice that it is made up of many shapes or pieces.

Flash Symbols

In order to animate an object in Flash, the "pieces" must be grouped and converted into a symbol. Symbols: Symbols are object containers; they keep objects compartmentalized. Objects are graphics, sounds, text, buttons, photos, shapes, etc. There are several types of Symbols: Graphic, Button, Movie Clip, Sound, and Font. In order to animate or apply special effects to an object it must first be converted into a symbol. Special effects include: Adjusting the tint and alpha settings, rotation, easing, and motion tweens. Symbols should also be used any time an object will be used multiple times in a movie. Symbols can be re-used over and over again in a movie. When you use a symbol in the Flash movie it's called an "instance" of the symbol. One of the nice things about using symbols is that you can make changes to one "instance" of the symbol and it will update all the occurrences of that symbol in your movie. In essence if you plan to move an object on the stage it should be converted to a symbol first. To my knowledge, almost all objects should be converted to symbols; the only time you don't want to convert an object to a symbol is when you plan to use shape tweening on the object. Another positive thing about symbols is that converting an object to a symbol reduces the overall file size of a movie. Symbols are stored in the Flash Library. For a more detailed description of Symbols read this tutorial at the University of Texas Austin.

Graphic Symbol: Used to contain graphics without animation. They are essentially still images. Any time you import a photo, add text, or shapes to the stage it should be converted to a graphic symbol. After converting an object to a graphic symbol it can then be animated using motion tweening. Page 30 of your Flash book shows some sample objects would be converted to Graphic Symbols. To convert an existing object to a Graphic Symbol select the object on the stage and select Modify > Convert to Symbol.
Button Symbol: Used to contain buttons. If you want to create a button in your Flash movie, select Insert > New Symbol.
Movie Clip Symbol: Used to contain graphics that are animated and other symbols. Movie clips contain their own Timelines and can function independently of the main timeline. A movie clip can and will contain other symbols including graphic, sound, font, and button symbols. You can have many movie clips in a Flash document. The great thing about using a Movie Clip Symbol to hold animation is that the symbol can then be reused in the same document or in other documents. Typically when you are creating a Flash animation you want to begin the process by creating a movie clip symbol. To create this type of symbol select Insert > New Symbol.

Converting an Image to a Graphic Symbol

Select the Arrow tool , draw a rectangle around the outside of the car. All of the pieces of the car should be selected (with a mesh pattern). You can also click Edit > Select All or press CTRL+A.

With the object still selected, click Modify > Group from the menu. We want the car to drive from left to right. Currently, the car is facing the wrong direction. With the car still selected, click Modify > Transform > Flip Horizontal. then click Modify > Convert to Symbol. In the Convert to Symbol dialog box, type car for the name, select Graphic as the Behavior, set the Registration point to Center (see image to the right) and click Ok. A thin blue line will appear around the car to indicate that it is now a symbol.

The Flash Library

Flash Library You can see all of the symbols in your movie by clicking Window > Library. The library is a storage area for graphics, photos, sounds, and other animations. It is important to keep your library organized. At the bottom of the library window there is a new folder icon , you should create folders inside your library for graphics, buttons, sounds, etc. I have a tutorial for organizing Flash Libraries that you may want to review.

If you click Window > Other Panels > Common Libraries > Buttons, you will see that all of the buttons are organized in folders by button type. This makes finding a particular symbol much easier. You may think that your car has disappeared from the library, but if you look closely at the library panel, you should see that there are two libraries. The Library - caranimation.fla and Library - Buttons.fla. Notice that there is an arrow to the left of each Library. The arrow pointing to the right indicates that the library is "hidden", the arrow pointing down, indicates that the Library is visible. click the arrow to the left of the car animation library to expand it and you should see your car symbol.

It is also important that you delete library items that aren't being used. You can easily select the items in the library that aren't being used in your movie by clicking the library options button in the upper right-hand corner of the library and clicking Select Unused Items. Deleting the items that aren't being used in your movie will help to keep the final file size small which is very important when you are creating web graphics.

Using an Instance of a Symbol

To practice, select the car on the stage with the arrow tool and press the delete key. Don't worry, the car is still stored in the Library. Drag the symbol next to the car in the Library to create a new instance of the car on the stage.

With the pointer tool , drag the car on the stage to the bottom of Car off the stage the stage. You may want to click View > Magnification > Fit in Window so you can see the entire stage. We want the car to drive onto the stage, so drag the car to the left until it is completely off the stage (the car should be totally off the white stage area).

Changing the Document Properties

Before we continue with animation, we should create a background for our movie. We want a green background, so it's easiest to change the entire background of the movie to green. Click Modify > Document. In the Document Properties box click the color chip next to the Background Color and select a shade of green. In the Document Properties the movie dimensions can be changed and the Frame Rate (speed of animation). Click Ok to confirm the background color change. Next we will draw a road and other background objects.

Working with Layers

When you work in graphic programs it is important to place different elements of your image on separate layers. Create a new layer in your movie by clicking the new layer icon or clicking Insert > Timeline > Layer. A new layer will appear in the Timeline called "Layer 3" (the layer number will increase each time you add a new layer).

Rename the layer by double clicking the words "Layer 3" and typing background. Currently our background layer is at the top of the layer stack. This means that whatever we draw on this layer will appear on top of the car, obstructing the car. We want the background to be behind the car, so the background layer must appear below the car layer. In the Layers panel, hold down your left mouse button on the background layer and drag it below the car layer.

Drawing in Flash

Be sure that the background layer is still selected (the layer name should appear black when it is selected). Click View > Magnification > Show Frame to display the entire work area. Select the Paint Brush and set the fill color in the colors palette to a dark gray, select the round brush shape in the options palette, and use the largest brush size. Draw a curved line from the lower left corner to the upper right corner of the stage. This will be our road. Note: Each tool that you select has a different set of options available, some tools do not have any options. The Properties box a the bottom of the work area also changes when you select different tools.

Properties Inspector Choose the Pencil tool . In the Properties box, change the fill color to white, the line style to dashed and the thickness to 1. In the Options area select Smooth from the Pencil mode (Smooth is a wonderful option for people who do not have a steady hand when they draw!). Draw another line through the middle of the road, this will be the dividing line. Notice that as you draw the line appears solid, when you are finished drawing the line it appears dashed.

You can use the ellipse, rectangle and other drawing objects to create buildings, ponds, and other items on your stage. Practice drawing buildings, trees and other items. Remember to change your options (colors, lines, etc.) as your draw.

You can convert these objects to Graphic Symbols when you're finished drawing.

Modifying Symbols

You may notice that the car is too big for the road, because it is a symbol we can easily resize it. Select the Selection tool and click frame 1 of the car layer and double click the car. Select Modify > Transform > Scale and Rotate and set the Scale to 50% and click OK. Click the Scene 1 link just below the Timeline to exit the symbol editing mode.

Animating the Car

Select the car layer. Right click in frame 40 and select Insert Keyframe from the menu. You will notice that your car is still visible, but the road has disappeared. When we inserted a keyframe on frame 40, it copied the car to all 40 frames, it did not copy the road. Select frame 40 of the background layer and insert a keyframe there. The road now appears in all 40 frames of the movie.

Right click between frames 1-40 on the car layer (it is important that the car layer is selected because that is the layer we will add motion to) and select Create Motion Tween. An arrow will now appear across frames 1-40 indicating that animation has been added to the frames. Note: If for some reason the car rotates after you create the Motion Tween, click between frames 1-40 and in the Properties panel and set the Rotate to None.

Right click the car layer and select Add Motion Guide. A new layer will appear called Guide:car. Click the Guide layers off Guide:car layer to be sure that it's the only layer selected. Select the Pencil tool and draw a line along the road (background layer). This line will be the path that the car follows. To make the next steps easier, turn off the visibility of the road by clicking the eye next to the background layer (an X will appear to indicate that the layer visibility has been turned off. The guide line should now be visible and the road is not visible. Click the first frame of the Guide:car layer. Select the Pointer tool and be sure that the Snap to Objects button (magnet) in the options area is turned on. Select the center point of the car (circle with a +) and drag the car to the beginning of the guide line. You will notice that the center point changes to a hollow circle when the car is in the correct position. Release the mouse when you see the hollow circle. Select frame 40 of the Guide:car layer and drag the car to the end of the guide line, release the mouse when you see the hollow circle. Note: If the Snap to Objects button was turned on before you drew the path on the Guide: car layer the car may have already snapped to the end of the path in frame 1. If so, you only have to move the car to the end of the path on frame 40.

Turn the visibility back on the background layer. Click frame 1 of the background layer. Press the enter key to see your movie. You will notice that the car is not very realistic looking when it follows the road. Click frame 1 of the car layer and check the Orient to Path box in the Properties box. Press the Enter key again to watch your movie or from the menu or click Control > Test Movie to see a full size movie.

Publishing the Movie for the Web

Click File > Publish Settings. You can export your movie to a variety of file formats SWF, HTML, GIF, MOV, JPEG. Windows Projector and Macintosh Projector create standalone files that can be viewed on machines that do not have a Flash viewer installed. Make sure that Flash and HTML are selected. The files will have the same name and be saved in the same folder as your original Flash project (FLA) file. Click the Publish button. Two files will be created; an HTML file and a SWF file. The SWF file is the actual animation. Both of these files (HTML and SWF) must be uploaded to the internet in order to see your animation. SWF files are very small, our final animation is only 3KB. You do not need to upload the FLA file. If you want to make changes to your movie, you need to edit the FLA file and Publish the HTML and SWF files again. Here is my completed project.

If you would like your movie to resize to fill the browser window, there is a tutorial at Moock.org.

You can find additional Flash and other tutorials on my tutorials page or on my Macromedia Resources page.

If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.

Stop by my Amazon Store for gifts for the web developer.