Introduction to Macromedia's Flash

WIT 2002

Flash 1

NOTE: These lessons pertain to Flash version 5.0. Eventually, we will update it to reflect version MX.

Introduction to Flash:

What is Flash and why is it important
Demonstration of some Flash sites
Getting oriented in Flash
Creating animation in Flash

Link to Lesson 2

What is Flash and why is it important

Flash is a development tool for building interactive web sites; extends WAY beyond capability of HTML by including possibility of animation, interactivity, games, data entry, etc. etc.

"Macromedia Flash 5 fuses the precision and flexibility of vector graphics with bitmaps, audio, animation, and advanced interactivity to create brilliant and effective Web experiences that attract and engage visitors."

Advantages of "vector graphics":

shorter download times
scalbility (images will look good no matter how big they become)

Flash also offers "streaming" content, meaning that users can be using the application, or viewing introduction screens, while additional content is loading in the background.

Includes a scripting language, ActionScript, that allows for interactivity and interfaces with "back ends" such as databases or image banks.

The "animation" in Flash is a result of a series of still images (like old fashioned movie film or cartoons).

The files you create in Flash are *.fla files. To play them over the web, they must be converted to .swf ("swif") files. Also, Flash allows you to "publish" movies, which means it creates the *.swf and also an *.html file to load it properly.

Demonstration of some Flash sites

Matinee Sound and Vision
Evian.com
Flash Planet Gallery
Coke.com
Cruddog
Arty the Astronaut
A Map/Zooming application I developed (username "guest" and password "arsenic"; see the great book that helped me to make this)

Getting oriented in Flash

Open up Flash on your computer.

The Stage the area that contains content that will be seen by the viewer (white initially). To alter the properties of the movie (size, background color), double-click the frame rate (FPS) in the timeline.
The Work Area - the grey area that surrounds the "stage" and can be used to store stuff temporarily during construction
The Library - panel used for storing every image and element used in the creation of a movie (there are also "Common Libraries" that contain pre-constructed elements and can be used to share things you create between movies.)
The Timeline - the main controller for Flash "action." See below for more.
The toolbar - used for selecting tools and controlling options
Panels - floating windows that contain relevant controls:
- Info - position and other info about any selected element
- Transform - to change the size or position of any element
- Stroke - controls the appearance of lines
- Fill - controls fill color and patterns
- Instance - when you put a button or image into a movie, the "original" remains in the library, and a copy is used. This copy is called an "instance," and it can have its own name and other properties.
- Effect - used for modifying the brightness, tint, or opacity ("alpha")
- Frame - for options dealing with one frame only
- Sound - for adjusting sound elements
- Mixer - for making new colors
- Swatches - for choosing colors from a palette
- Character - for fonts
- Paragraph - formatting such as alignment
- Text Options - for controlling whether text is static, dynamic, selectable, changable
- Actions - for controlling scripts affiliated with elements
- Movie Explorer - for looking at all the elements of your movie and how they fit together

The Timeline

Flash uses layers like Photoshop. Layers are built up from the bottom to the top, and can be more or less transparent.

When a Flash movie "plays," the "playhead" moves from frame to frame. Each layer responds according to its own timeline to the movement of the playhead. Layers can be "empty" until the right point in the movie when the layer has some action. (Actions are controlled by the "actions" panel and can start, or stop, based on events such as when the movie loads, when a frame is "played," or what happens to an object or user response.

Here is the timeline from the Chicago Accretions Application I created for Chicago WebDocent

To zoom in and out on your stage, use the "Zoom" box on the lower left of the screen.

Grids and rulers can be turned on and off (and snapping to the grid) in the View menu. You can add a guide by clicking and dragging from a ruler onto the stage.

NOTE: Flash has a number of very sophisticated and somewhat complicated drawing tools and features. We will NOT focus on these during these lessons, but on the animation features. I urge you to BUY THE BOOK at Utrecht if you want to learn more about drawing and painting in Flash.

Also, Flash comes with seven Lessons that can help you to learn Flash basics. They are available by clicking Help|Lessons. The following is adapted from the Animation lesson.

Creating animation in Flash

Key concept: Flash will "tween" your animation by filling in frames between defined keyframes with appropriate intermediate changes to your elements. (Tweening is a neologism meaning "changing what's between.")

This is the movie we will create in this lesson

Here's the final "FLA" file. (to get it, right-click or control-click and choose "save link as" or "save target as")

Activity 1

Resources:

Save each of the following to a new folder on your desktop (right-click or control-click and choose "save link as" or "save target as")

bird.swf

sky.swf

pinwheel.swf

Open Flash and create a "new" movie.

Rename Layer 1 "Bird." (Right-click or ctrl-click and choose Properties.)

Choose File|Import... and go to the bird.swf file you saved just now, and open it.

Move the Bird onto the lower left corner of the stage.

Notice that there is a keyframe (black bullet) in frame 1 of the Bird layer.

Create a new keyframe in frame 60 by ctrl-clicking and choosing Insert Keyframe. You should get a highlighting from frame 1 through 59. That shows that frames 2 through 59 are repeating the content in the Keyframe in frame 1. (That is, the bird.)

To show the bird flying, we'll need to move the bird in the new Keyframe in frame 60, and add a "motion tween."

Select frame 60. Move the bird to the upper left corner. Right-click (ctrl-click) in one of the frames between 1 and 60, and choose Insert Motion Tween.

The bird will be converted to a symbol (because only symbols can have motion tweens; more on this later) and each frame between 1 and 60 will have a bird in a slightly different position. Click on some frames to see this.

Now, to test the motion, click Control|Rewind and then Control|Play. Pretty cool, huh?

Save your movie as bird.fla.

Activity 2

Now, we're going to add some additional animation. Create a new layer (Insert|Layer) and rename it Pinwheel.

So that we don't mess up the bird layer, click the bullet in the "Lock" column on the timeline.

Let's also add a background. Create a new layer. Now drag it to the bottom of the Layer stack, and name it Background.

Notice that the Background layer is highlighted in black. This is the "active layer," and any changes you make will apply only to that layer (unless the changes are to the movie or an individual frame, in which case they apply to all unlocked layers).

Insert the sky.swf file into the background layer. Move the image so the top left corner is at the top left corner of the stage.

The image will have to be resized. To see the "resize" or "scale" handles, right-click (ctrl-click) and choose Scale. Then drag the bottom right handle up to the border of the stage. Then drag the bottom center handle down to the edge of the stage.

Save your file.

Activity 3

Click on the Pinwheel layer to activate it.

Let's put the pinwheel.swf file onto the stage, in the upper left corner.

Your screen show now look like this (notice the playhead is on frame 60; it would look different if the playhead was on any other frame, because the bird would be in a different place):

Now we're going to animate the pinwheel. First, we'll create keyframes in the pinwheel layer at frame 15, 30, 45, and 60. To do this, right-click (control-click) at the appropriate frames and choose "Insert Keyframe."

Now, let's move the pinwheel image in each new keyframe. In frame 15, move the pinwheel to the upper right. In frame 30, move the pinwheel to the lower right. In frame 45, move the pinwheel to the lower left.

Now, create motion tweens by right-clicking (control-clicking) on the pinwheels layer timeline between frame 0 and 15, and choosing Create Motion Tween. Do the same between frames 15 and 30 and between frames 30 and 45, and between frames 45 and 60. Your screen should look like:

Test the pinwheel animation by clicking Control|Rewind and then Control|Play.

Now, let's rotate the pinwheel in the three new corners. Click Window|Panels|Transform. Select frame 15 and select the pinwheel. Change the rotation to 60 degrees. Change the pinwheel in frame 30 to 120 degrees, and the pinwheel in frame 45 to 180 degrees.

Test the animation again.

Save your file.

Activity 4

Now, we're going to add some control buttons to the movie.

First, let's "stretch" the canvas (or work area) so that we can fit some control buttons on the screen. To do this click Modify|Movie and change the height to 450 px (pixels). A new white area should appear at the bottom. Change your view to Show All:

Let's make this new white area dark blue. First, you'll need to unlock the background. Then make sure the background is the active layer. Select the rectangle tool. Make sure the Stroke and "Fill" colors are dark blue. Then click and drag in the white area to make the new box. Now, lock the background again.

Save your file.

Create a new layer called "Controls." Make it the top layer.

Open the "Common Library: Buttons" by clicking Window|Common Libraries|Buttons. Each of the "folders" in this library contains a button set.

Let's use the VCR Gel button set. Double-click the folder icon to open it. Now, drag the buttons onto the dark blue area. We don't need the STOP or the RECORD buttons. Don't worry about placing them exactly (we'll do that in a moment):

Now, select close the Library panel. Then, select all of the buttons by choosing the arrow tool and clicking and dragging a box around all the buttons. They will be "highlighted" with blue boxes around them. When they're all selected, line them up and space them by opening the Align panel, and then choosing the appropriate buttons on the panel. (Play with all of them to see what they do.)

Save your movie.

Activity 5

The buttons don't work yet because we need to assign actions to them. Make sure the group of buttons is NOT selected. Then, right-click (control-click) them one at a time, and assign the following "Basic Actions" to them:

Go to frame number 1 Go to previous frame Stop Play
Go to frame number 59

(59 instead of 60 so we can go to "end" without restarting)

Test by making sure that simple buttons are enabled (Control|Enable Simple Buttons) and then trying each button to see if it works. If so, save your movie.

To make the animation loop, choose frame 60 in layer pinwheel, and right-click (control-click). Choose Actions. Then, choose Basic Actions, Go to, Frame number 1, make sure Go to and Play is checked.

Now, enable "Frame actions" by clicking Control|Enable Simple Frame Actions. Test the loop by playing the movie and seeing if it loops back to the beginning.