Contents

1. Introduction
2. Creating a New Project
   • Frame Size, Rate, and Background Color

3. Graphics Tools
   • Lines and Fills
   • Gradients
   • Text and Breaking it Apart

4. The Timeline and Frames
   • The Timeline
   • Frames and Keyframes
   • Adding a Blank Keyframe
   • Extending a Keyframe
   • Dividing a Keyframe
   • Dragging and Rearranging Frames
   • Layers

5. Simple Animation
6. Symbols and Instances
   • Symbol Types
   • Rotating and Resizing Symbols and Graphic Objects
     
7. Tweening
   • Motion (remember, only one per layer!)
   • Shape
   • Easing
   • Guide Layers
8. Glossary
9. Further Assistance

---

PLEASE NOTE! This page relies heavily on animated GIF's in order to simulate Flash animation. If the image below doesn't move, try a different browser.

---

Introduction

If you're truly intrigued by where Flash came from, go here to hear the creator's own story of the development of this technology.

Flash is a web animation technology that uses vector-based graphics rather than bitmap-based ones. Bitmaps are made up of many individual pixels on a grid, and can be difficult to scale because they are inherently resolution dependent (example: when you make a scanned photograph very large or very small, it becomes just a bunch of blocky pixels). Vectors, on the other hand, are made up of many individual, scalable objects that are defined by mathematical equations; therefore, they will always render at the highest quality. Vectors are also able to support transparency (and so can overlap without difficulty), whereas bitmaps always have a rectangular shape.

With Flash, you can create almost any kind of animation, interactive menus, interactive movies, games...almost anything you can draw.

---

Starting a New Project

Select File > New. A totally blank animation appears.

Frame Rate, Size and Background Color

To change an animation's basic properties, select Modify > Movie. You can select a frame rate (the number of pictures which go by every second, 12 is a good number), the dimensions of each frame (in pixels), as well as choosing a background color for the entire project.

---

Graphics Tools

Eraser Tool

It erases. Nuff said.

 

Eye Dropper

this tool is very useful when working with color. Click on any color visible on your screen, and the eyedropper will make it your selected color.

 

Ink Bottle Tool

use this tool to control the color, style, and width of lines and shape outlines.

 

Lasso

use this tool for selecting vector art in an irregular shape.

 

Line

this tool creates lines which you can later bend or modify their length or line weight.

 

Oval

this shape tool creates different shapes and sizes of ovals. Hold the SHIFT key to create a perfect circle.

 

Rectangle Tool

this shape tool creates rectangles of different sizes and shapes. Hold the SHIFT key to create a perfect square.

 

Paint Brush

use this tool to create freehand fills as if you were painting with a wide brush.

 

Paint Bucket

use this tool to change the color of fills. Fills include solid colors, linear gradients, and circular gradients.

 

Pencil Tool

Use it to draw shapes by hand, which Flash will convert into vector graphics.

Lines and Fills

A line is just that, a line, who's width is determined by Flash's Stroke panel.

A fill is the "paint" that covers a shape, such as a circle or triangle. These shapes are created with the polygonal tools (Oval and Rectangle) as well as using the Paintbucket tool on the inside of an empty frame created with lines.

This controls the color of your line. This controls the color of your fill.

Clicking the will eliminate either lines or fills from your new polygons.

Gradients

A gradient is a fill in which one color fades into another. There are two kinds of gradients, radial and linear.

Radial gradients can be multiple colors...

...or just two.

You can add them to any fill using the Paint Bucket tool .

Linear gradients work the same way; one color fades into another from left to right.

To create a fill using a radial gradient:

1. Select a polygonal shape tool, such as the Oval, Rectangle, or Paintbrush (Yes, in Flash the paintbrush trails is a shape.).
2. From the Fill panel, select Linear Gradient or Radial Gradient.
3. Create a new shape on your stage.

To add a gradient to an existing fill:

1. Select the paint bucket tool.
2. From the Fill panel, select Linear Gradient or Radial Gradient.
3. Click on an existing fill. (The point you click on determines the exact center of a radial gradient.)

Text and Breaking it Apart

To accompany your lines and shapes, you will probably want some text within your Flash project. Until you break it apart text remains in a special format, so that it can be edited and retyped. However, to fully take advantage of the graphic effects possible in Flash, you will need to break apart your text. This will look the same on your screen, but alter the way it is read by your computer.

---

The Timeline

What's really amazing about programs like Flash is their ability to represent time as a graphical object, something that can be manipulated with the click of a mouse. The timeline section of the project window displays every frame of your project as a colored coded square within a numbered grid.

Every fifth frame appears gray, making them easy to count at a glance. The red square is your play head. Dragging it around with the mouse lets you "scrub" through your project, previewing it as you work by simulating the animation process.

Frames and Keyframes

These are examples of keyframes. The keyframes on the left are one frame longwhile the ones on the right are eight frames long. The keyframes on the bottom are blank. The keyframes on top are gray and have black dots, telling you that they contain objects.

To work with the contents of a certain keyframe, click its first frame (the one with the black dot). It is now selected and its contents will appear on the stage.

To add a blank keyframe:

1. Click on an empty section of the timeline.
2. Press F7 or choose Insert > Blank Keyframe.

To extend a keyframe:

1. Select a keyframe by clicking its first frame.
2. Click on the small box on the right side of the keyframe.
3. Drag the mouse left and right to make the keyframe longer or shorter.

A long keyframe can be divided into smaller keyframes with identical contents. The cut can occur at any frame within the keyframe.

To divide a keyframe:

1. Select a keyframe by clicking on it.
2. Choose the frame where you want to divide by moving the play head. This will be the first frame of the second keyframe.
3. Press F6 or choose Insert > Keyframe

Dragging and rearranging keyframes:

1. Move the mouse cursor over a full keyframe; the pointer will become a hand icon.
2. Click the mouse and drag the frame to where you want it. It can move left and right, and between layers.

Layers

Layers are divisions within your project's timeline which are useful for organizing you work, designating the way objects overlap, and isolating elements for tweening (more about this later). This is the layers section of the Project Window:

To add a new layer: click the button, or choose Insert > Layer.

To rename a layer: Double click on its title and type a new one.

To Select a layer: Single click on its title in the Layers section of the main project window.

To make the layer invisible: Select the layer then click the button.

To lock the layer (to protect it while working on other layers): Select the layer and click the button.

To outline a layer: Select the layer and click the colored box button. This will turn all images in the layer into color coded outlines.

To remove a layer: Click on the layer's title from the layer and click the button.

---

Simple Animation

Here is an example of simple animation.

Here is the first keyframe.

Here is the second keyframe.

Here is the third keyframe.

Put them together and you get... simulated motion! We tend to take this for granted, yet it was a pretty neat trick 100 years ago.

---

Symbols and Instances

A symbol is a self contained object within a Flash animation which can be used multiple times. This is very useful for making changes throughout an animation. Say you are animating a picture of a rocketship, and the same rocket appears in 30 different frames. If you decide later on that your rocket needs to be blue instead of red, or have the words "Big Bertha" emblazoned on the side, imagine what you must do if each rocket is a collection of lines and fills. 30 frames must be individually changed and perfectly matched! You may as well give up and start over, unless your rocket is an symbol! By creating a picture as a symbol, you create a "master copy" which sits in your project's library. Making changes to the master symbol will effect all its instances throughout your Flash project.

To create a symbol from a picture you have already drawn:

1. Select all the elements of the picture you wish to be part of your instance. Use the rectangular marquee, the lasso, or click on elements while holding down the SHIFT key.
2. Choose Insert > Convert to Symbol from the menu bar.
3. Give your symbol a name, and select it's type (graphic symbols are the most basic). For a description of the types of symbols, click here.
4. The new symbol should now reside in your Library.
   

To create a new symbol from scratch:

1. Choose Insert > New Symbol from the menu bar.
2. Give your symbol a name, and select its type.

Symbol Types:

Symbols come in three varieties:

Movie Clip:

Movie clips are generally used by advanced Flash users to create animations which can start and stop interactively. An animated Movie clip will play continuously, even if it is placed in a project only one frame long.

 

Graphic:

This is your basic Flash symbol. Its animation is dependant on the project's timeline. This means that if a Graphic Symbol is 35 frames long, and it is placed in a project only 24 frames long, the symbol's animation will reset on the 24th frame.

Button:

Buttons are symbols with only four frames, each with a predetermined function.

Rotating and Resizing Symbols and Graphic Objects

To make freehand changes to an object's size:

1. Select the symbol by clicking on it.
2. Choose Modify > Transform > Scale.
3. Click on the corners of the object and drag them to the desired size (Holding the SHIFT key will keep them proportional).

To apply freehand rotations to an object:

1. Select the symbol by clicking on it.
2. Choose Modify > Transform > Rotate.
3. To rotate the object, click on it's corners and drag them back and forth (Holding the shift key will rotate your object in 45† increments).

To precisely rotate an object, or resize it by an exact percentage:

1. Select the symbol by clicking on it.
2. Choose Modify > Transform > Scale and Rotate.
3. Enter precise values in the Scale and Rotate boxes.
4. Click Ok.

---

Tweening

Frame by frame animation, though sometimes useful, is time consuming and has a tendency to create very large files. Flash simplifies matters with a kind of animation called Tweening. By telling Macromedia Flash to create a tween between two frames, the program will automatically generate a smooth series of frames that fill the inbetween space (In-be-TWEEN, get it?).

Shape Tweening

Shape tweening creates an animated transition from one vector image to another. You may have seen similar effects on TV or in movies, where one person or object "morphs" into another. Here is an example in which a red square becomes a blue circle.

To create a shape Tween:

1. Create two keyframes on the timeline using the F6 key.
2. Fill each keyframe with a different vector graphic.
3. Lengthen your first keyframe using the F5 key. This defines the length of the transition. (Your ending frame can be as long or short as you want it.)
4. Select the very first frame of the start keyframe. From the Frame window choose the Tweening menu and select Shape.
5. Test your shape tween by choosing Control> Test Movie.

On your timeline a shape tween will look like this:

Here are some tips on creating a good shape tween.

• Avoid tweening between fills (solid shapes) and lines. This creates gaps and discontinuities as you can see below.
  
• If you decide to modify your shape tween, select the first frame of the tween and choose Tweening > None from the frame window. Doing this before making any changes to your start and finish keyframes will avoid glitches.
• It is a good idea to make two copies of your start and finish keyframes by selecting then and pressing F6. This way the tween can be completed deleted without losing your vector art.
• Even text can be shape-tweended! Select a text box and choose Modify > Break Apart from the taskbar. This converts the text into a group of vector images, which Flash can then translate into a normal Shape Tween animation. Here's an example:
  

Motion Tweening

Motion tweening works a lot like shape tweening. By telling Macromedia Flash to create a tween between two frames, the program will automatically generate a smooth series of frames, a transition between the first and last.

There are two basic rules of Motion Tweening:

1. Only instances of symbols can be motion tweened! No independent lines, fills, or text!
2. Only one symbol per layer can be motion tweened! (You can make as many layers as you want. Remember to name them so you don't get confused).

To Create a Motion Tween:

1. Create two blank keyframes on the timeline using the F7 key.
2. Fill each keyframe with instances of the same symbol.
3. Move, flip, and resize the instances in one or both frames. Your animation will be the transition between the two, so the differences are what make it interesting.
4. Lengthen your first keyframe using the F5 key. This defines the length of the transition. (Your ending frame can be as long or short as you want it.)
5. Select the very first frame of the start keyframe. From the Frame window choose the Tweening menu and select "Motion."
6. Test your shape tween by choosing Control>Test Movie.

On your timeline a motion tween will look like this:

Easing

Easing is an option used in tweens that allow you to control the motion of a tween by simulating accelerationg or deceleration. There are two kinds of easing, in and out.

This is an example of Easing In. The tween (in this case the car) appears to accelerate.

 

This is an example of Easing Out. The car appears to "put on the brakes" as it nears the end of the tween.

To change the Easing of a tween:

1. Create a normal motion or shape tween.
2. On the Timeline, click the first frame or the tween.
3. Find the Frame panel and enter a value between 100 and -100 in the Easing box. Negative values are for "easing in" positive for "easing out.

Guide Layers

Guide layers allow you to direct a motion tween, and make a symbol take an indirect path to its destination.

To Create a Guide Layer:

1. Click the Guide Layer button on the Layers section of the stage. This creates a new layer which is invisible in your final project.
2. Create a new, blank keyframe for your Guide Layer by pressing F7.
3. Draw an unbroken trail that never intersects itself. Imagine this is a track and your symbol will be the train.

Here's an example of a good guide layer:

To Match a Motion Tween to a Guide Layer:

1. Create a Motion Tween using the steps from the previous section.
2. Extend the duration of the guide layer keyframe by clicking on it and then pressing F5. It needs to have the same duration as the motion tween.
3. Using the mouse, grab the symbol from the first frame of the motion tween (it's important to click in the very center of the symbol).
4. Drag the symbol to the begining of the Guide Layer's path and move the center of the symbol (shown as a small circle) onto the begining of the path.
5. Now drag the symbol from the ending from frame of the tween onto the very end of the path.
6. Test your Guide Layer by choosing Control>Test Movie (or pressing ALT + ENTER).

A guide layer in action:

 

---

Glossary:

Alpha: the amount of transparency in a symbol insance. When Alpha = 100% the symbol is opaque. When Alpha = 0% it is completely transparent (i.e. invisible).

Bitmap: any picture file not made of vectors, such as JPEG's GIF's and BMP's.

Frame: a single incrimate or picture on the Flash timeline. Animation happens when large numbers of these are displayed in fast succession. In Hollywood movies this is when a series of photographs are projected on a screen at a rate of 24 frames per second.

Frame rate: the number of frames that pass the screen every second.

Inspector: a window which contains options to control the characteristics of selected objects such as texture, stroke, etc.

Instance: a duplicate of a symbol. Instances can be changed in size, copied, and deleted without altering the original symbol, which resides in your library.

Keyframe: A keyframe is an object that resides on your timeline. It can last for many frames, yet unless it has been tweened, keyframes are homogenous.

Library: A panel within Flash displaying all your project's symbols, sounds, pictures, etc.

Object: any entity within your Flash project, such as a polygon, a line, or a bitmap.

Onionskin: This option displays several (you decide how many) frames at once. The single frame highlighted in the timeline will remain solid, while the other frames appear somewhat transparent. Onionskin is useful for aligning and spacing graphics across multiple frames.

Panel: a window which contains options to control tool characteristics, or collections of assets.

Scrub: to grab the red play head with the mouse and drag it back and forth across the timeline, simulating the final animation process.

Stage: the central "screen" of your main project window. When working with Flash this is where all the graphics and animation are previewed.

Symbol: a self contained object within a Flash animation which can be used multiple times.

Timeline: part of the Project window where frames, keyframes, and tweens are arranged on a numbered grid.

Tween: a method of simplifying the animation process. Flash is given initial and final keyframes, and generates a series of inbetween frames.

 

---

 

Further Assistance

For further assistance using Flash, please visit the Digital Media Center or ask a DMC Specialist.