Lesson 10 - Getting Started

Modifying your Movie

By modifying your Movie, you are creating the basic settings for the movie. To modify your movie, go to Modify > Movie or open the Properties Panel:

  1. Frame Rate determines the speed of your movie. 30 fps means that your movie will cycle through 30 frames in one second. This will make sense once you have
    created animation.
  2. Dimension is the size of the movie on the screen. Remember that standard monitor size is 800 x 600 pixels, so exceeding this can create problems. It is
    advisable to create a movie with the same dimensions as your background image.
  3. The Background Color is the color your stage will appear when no objects are covering it.

Setting Your Stage

Flash is set up much like Photoshop, it uses a hierarchy of layers to determine the appearance of the objects on the Stage. An object that occupies a Frame on Layer 5, topmost in the hierarchy on the Layers Panel will appear above the background image, occupying Layer 1. Although Flash’s Layer system is simplified, it shares many of the same features: the visibility of Layers can be toggled, they can be Locked (this locks their position and their ability to be edited until they are unlocked), Layers can freely be created and can have as many objects or as little objects as you want on them. Also as with Photoshop, Layers can act as masks. In addition to that, a Path on a Layer can act as a motion guide. This will all be explained later. The first task is setting your stage:

  1. To bring external image files into Flash, they must be imported, File > Import (cmmd + r, ctrl + r) created animation.
  2. Once a file is Imported, it no longer has to be imported to be used, whether it is deleted or you want to use multiple instances of it. Flash keeps an inventory of all imported and created symbols in the Library. To access the Library, go to Window > Library (cmmd + l, ctrl + l). Putting an object on the Stage is as simple as dragging it from the Library onto the Stage. Keep in mind that it will occupy whatever Layer you currently have highlighted.
  3. If you are using a background image, it is most logical to place it in the bottommost layer.
  4. Whether or not you know where you want to place your images, you can import all images you want to use and just delete them off the stage (click on them with the Arrow tool [v] and simply press delete). They will still remain in the library for easy access.

Creating Symbols

Once you have imported your objects they can be placed on Layers and moved around the Stage. Unfortunately, an imported object can’t take advantage of Flash’s animations capabilities. An object (such as your imported graphic) must be converted to a symbol to be gain certain capabilities. There are three types of symbols in Flash. Graphics: A Graphic is a static object. This object can be repeated on the Stage an unlimited number of times with minimal effect to the file size. Each time a graphic is placed on the stage it is called an Instance of the Graphic. Each instance of the Graphic can be scaled in size, rotated, and can have effects (alpha [transparency], tint, brightness,
etc.) applied to it. Graphics can also be motion tweened, which will be explained later. Buttons: Buttons are graphics with four states- Up, Over, Down, and Hit. The Up state is how the Button appears on the stage, the Over state is how it appears when the mouse is over the Hit area, the Down is the appearance when the mouse presses down on the Hit state, and Hit is the area in which the button is active. Each state of the button can be a different image or a variation of the same Instance of a Graphic. Actions can be applied to Buttons, this will be explained later. Movie Clips: A Movie Clip is an entire Timeline contained in a single frame. This will make sense when working on a Timeline later.

  1. To make an object a symbol, simply click on the object. When it is highlighted, go to modify > Convert to Symbol (F8). Remember to name your new Symbol and select which type of Symbol you are creating.
  2. This new symbol will now appear by name in the Library for further use. Once a symbol is on the stage, you can double click on it to edit it.

Working on a Timeline

One of the key differences between Photoshop and Flash is that Flash incorporates a Time Line. Whenever a Flash movie is played, it is continuously playing. If there is only one frame, then the movie appears static because the single frames is looping indefinitely. To understand this further, place an object on a new layer. You can select this Frame by clicking on it in the Time Line Layers Panel. With the frame selected (it will turn black), add a frame Insert > Frame (F5). To test your movie go to Control > Test Movie (cmmd + enter, ctrl + enter).

  1. Once again, the movie should appear static. This is because the movie is looping an unchanging set of frames. By simply inserting frames, you prolong the same Instance on the timeline.
  2. Now click on the second frame you have just created on the Time Line. You are going to make this into a Key Frame, Insert > Create Key Frame (F6). Key Frames are different from normal frames. Instead of prolonging the same Instance, the instance can be modified (size, effect, rotation) and moved to a different location on the stage. A new key frame can also hold new objects or fewer objects, or a completely different symbol. After you have created a new key frame, try moving your object around and altering its appearance. Once again, test your movie.
  3. You will notice how the object now rapidly bounces back and forth. This is because unless you create an action to stop the movie, the Time Line will loop indefinitely.
  4. Once again click on the first Key Frame in your Time Line. Insert a few more Frames and retest the movie. Now you will see that the object holds for longer, then jumps to the next Key Frame, then repeats.

The key to creating animation is what is called Tweening, which is smoothly moving from one Key Frame to another.

Tweening

In Flash it is possible to smoothly transition from one Key Frame to the next by creating a Motion Tween between the two frames. Motion Tweens work when working with the same instance in the same layer.'

  1. In the layer you have been altering on the Time Line you should have a Key Frame on Frame 1, followed by a number of Frames, with a new Key Frame further down the Time Line. Make sure the second Key Frame has both a new location and a new size. Now click on the first Frame. When it is selected, create a Motion Tween, Insert > Create Motion Tween. You can click on any frame in between and you will see the smooth transition. Once again, test your movie.
  2. Tweening is not limited to two Key Frames, you can freely Tween from one Key Frame to another to another. You can only Tween ONE symbol per layer.

Motion Guides

Although Motion Tweening allows for complex animations, transitioning from one place to another is always done on a straight path. The can be changed with Motion Guides. A Motion Guide is a Path drawn in Flash that acts a Path for the Tween. To create a Motion Guide:

  1. Create a new Motion Guide above the Layer you with to Guide, Insert > timeline > Motion Guide.
  2. In this Motion Guide, use the Pen Tool to the desired Path. Using the Pen tool takes some getting used to, but it is very similar to the one found in both Photoshop and Illustrator.
  3. Once your Path is created, make sure it spans the time length of the Layer below it on the Time Line.
  4. Now select the first Key Frame on your Image Layer. Using the Arrow tool, drag it from its center to the starting point of the Motion Path you have just created. It should snap onto it.
  5. Now select the destination Key Frame. From its center snap it onto the end of the path.
  6. Now create a motion Tween as you had done before. It should follow the motion path.

Movie Clips

Now that you understand concept of a Time Line, you can use the Movie Clip Symbol. A Movie Clip is an entire Time Line condensed into a single frame. Movie Clips, like Graphics can be Motion Tweened. The application of this will become obvious.

  1. To create a Movie Clip, go to Insert > Create New Symbol
  2. Once you are in the Movie Clip as seen from the nesting above the stage, proceed just as you had before. Once you are done created whatever animation you want, you can return to the Stage by clicking on Stage above your viewer window. Your Movie Clip is now in your Library to use.
  3. Drag it onto the scene and it will occupy a single frame. This symbol can now be tweened and affected just like a still movieclip.

Last but not least, are buttons. Jump to the next lesson to learn about those...

Back to Lesson 9 . On to Lesson 10a