You have been introduced to the Flash drawing tools and know that Flash is a vector-based drawing program. You know that you can modify and transform shapes, lines, and fills. You know that when two shapes of the same color overlap, strange things can happen when you try to separate them. You know that grouping your shapes prevents this from happening. You learned that you can fill with gradients or even translucent colors by selecting these options from the fill panel and mixer panels.
Now that you know some basics about drawing in Flash, let's talk about the difference between vector and raster art. Then, we'll examine the timeline so we can create some animation.
Vector vs. Raster - What's the difference?
Raster art is also known as bitmapped art. This is not the same as the file extension .bmp although .bmp is a bitmapped file. Other familiar bitmapped art file formats are: .psd, .jpg, .gif. Programs associated with bitmap creation, painting and editing are: Adobe Photoshop, Jasc Paintshop pro, Corel PhotoPaint, MS paint. Bitmap art is based on pixels. Pixels are picture elements.
If you magnify a bitmap image, you'll see that it is composed of tiny dots of color. The image is described to the computer by each dot's specific location on a grid and each dot's specific color value. You can think of bitmap or raster art as a mosaic of colors. Bitmapped artwork contains a fixed number of pixels so if you resize or change the resolution of the file, the image can lose detail and get jaggy edges and blurred interior spaces. Bitmaps are used for continuous tone graphics such as photographs or images with complex gradients.
When you create or edit raster art, you modify the pixels. The pixel data that describes the image is fixed to a grid of its particular size. Since each pixel has a specific location in the grid, every time you modify the pixel data, you are changing the quality of its appearance. Bitmap graphics are dependent upon the resolution of your image. If you modify the resolution, you lose pixel data. Therefore, bitmap graphics cannot be scaled without loss of data.
Vector graphics describe images using lines and curves in addition to position and color properties. Vector graphics are really mathematical algorithms that describe points through which the lines pass to create the shape of the image. The beauty of vector graphics is that you can scale, transform, and edit these graphics without losing any data so the image maintains its quality. Vector graphics are not dependent on your resolution so they can be displayed on output devices of any resolution and maintain the quality. Vector creation programs include Flash, Freehand, Adobe Illustrator, and Corel Draw. Vector graphics are smaller file sizes than bitmaps and maintain crisp detail of edges when enlarged or reduced. One exception to this is vector graphics filled with complex gradients.
Vector graphics are used for illustrations, logos, type and graphics that need to be scaled to different sizes. For example a company logo would be used on stationery, business cards, website, envelopes, brochures, etc. Each of these outputs may require a different size of the same logo. Vector graphics ensure quality of crispness when they are moved, resized, or have color changes.
In Flash, we don't have to worry about the resolution of our images. Since Flash is designed for the web, the resolution is 72 dpi - the common screen resolution represented in dots per inch. Flash uses vector graphics by default. While Flash is vector-based, you can import bitmap images into Flash. In addition, you can create a special kind of curve when you use the Pen tool in Flash called a Bezier Curve. A Bezier Curve is a curve made of points, direction, and speed. A normal curve is made of points only. The advantage of Bezier curves is that it allows a natural curve and therefore a natural motion based on perception using animation techniques.
Why would I want to import a bitmap into Flash?
Good question! Sometimes you may want to incorporate drawings or photographs that were scanned, captured, or created in a bitmap program. You may have an image such as the screenshot of the Flash interface used in Lesson 2 interface movie. Instead of creating all the buttons and the interface in Flash, it was quicker to import the image as a .gif file.
Avoid the use of bitmaps in this course. We may import them towards the end if some of you need to use them for an effect in your final project. Bitmaps dramatically increase the file size of Flash. Animating bitmaps can make your movie huge. There is a trace bitmap feature that people think will convert bitmaps to vectors of smaller file sizes. The trace bitmap often increases the file size of imported bitmaps.
Flash MX 2004 can import a variety of image types such as Adobe Illustrator v.CS (10), FreeHand, .gif (including transparent .gifs and animated .gifs), .jpg, .png, and now .pdf files and .eps files. If you have QuickTime 4 or later version installed, you can now import Photoshop .psd files, ,pict files and .tiff files into Flash MX 2004. You can read about importing these file formats in the chapter on Working with Color and Images in the MX 2004 edition of the textbook.
So let's stick to Flash's vector tools and get moving with animation.
The timeline is where you will organize and control the movie's content over time. When you open Flash, you will have one layer called 'Layer 1' on the left of the timeline. On the same row as Layer 1 you will have a grid of white and gray rectangles. These are the frames associated with each layer. The numbers 1, 5, 10, 15, etc in increments of 5 above the row indicate the frame number. The red rectangle that is over the number 1 and has a red vertical line below the frame is called the playback head. The playback head indicates the current frame.
When you start working with symbols, you may have multiple timelines for one movie. To differentiate between the main timeline which is also known as the _root timeline, and the timeline of a symbol, look above the timeline to see if the name of the symbol appears. In my timeline image above, there is no symbol name, so I know I'm working in the main timeline or _root.
What's a layer?
Before we describe layers, let's discuss animation.
What is animation? Animation is the appearance or perception of movement over time by changing either location, placement, size, color, or other transformation of elements.
Think of early cartoons. The studio employed animation artists to create characters. For instance, we may have a giant mouse grinning inside the house in one image and standing in fear with a shocked look on his face in another image. The artist would create the starting image of a mouse grinning in the house and the ending image of a scared mouse looking into the mouth of a big cat. The images that were used to get from the starting image to the ending image were often drawn by production artists. They created the 'in-between' images. Each change in movement or scene was created on clear acetate sheets which were layered on top of one another. Only the parts of the mouse that changed needed to be drawn on a new sheet of acetate. The artist would then flip through the sheets to see how the image moved. This is similar to a flip-book technique. And in turn, this is similar to the layers and keyframes used by Flash.
An interesting aside about animation: The first picture animation was invented in 1831 by Joseph Antoine Plateau. He used a phenakistoscope to create the illusion of movement. Did you know that in 1897 a popular way of viewing pictures was with a Kinora viewer? The user turned a handle and a reel revolved causing the pictures to flip over against a peg while the viewer used an eyepiece to see the moving pictures. Animation has come a long way over 100 years and thanks to Flash, animation on the web has become a lot easier to create and view!
The illusion of movement in Flash is created by a series of images that tell a story. The timeline reflects the order and storage of all the images that are positioned on the stage. We've already created some images in Flash. When you draw on the stage, you'll notice that the timeline gets filled in with a black dot in frame 1. The timeline is actually like a spreadsheet with the rows being layers and the columns being frames. An intersection of a layer and a frame is a cell. When you did your homework for lesson 2, you created several shapes and drawings and they all went into layer 1, frame 1. Even if you grouped some of the elements, it still might have been confusing to select one group or element. This is one reason layers come in handy.
Layers are an organization tool. Name your layers descriptively. Naming descriptively allows you to find your elements. When you look at a timeline that has multiple layers you want to be able to identify your elements quickly. To name a layer, double click on the black reversed text that says Layer 1. When you double click the layer name area will look like the screenshot below, indicating that it is selected and can now be modified.
Type your layer name, such as self-portrait, pet, landscape, cat, cat wheels, etc.
You'll notice a pencil on this layer and that the text is still reversed out white on black. The black indicates that this is the current selected layer and the pencil indicates that the layer is editable. This means you can create or modify on this layer. If we click the lock button you'll see that the layer is still selected but no longer editable. The pencil has a red diagonal indicating it is disabled.
Let's draw something on the stage. Once we draw, we should note a round dot appearing in layer 1, frame 1. If it doesn't work for you, be sure your layer is NOT locked. If you try to edit or create content on a locked layer, you will get a warning graphic of a pencil with a circle with a diagonal through it. You have to click on the lock icon in the layer itself to unlock the layer. Then, when you draw something on the stage, a black filled circle appears in layer 1, frame 1.
The top row of the timeline has 2 icons in addition to the lock. When you click on these icons on the top row, it will affect ALL the layers in your timeline. In other words, you can turn off the visibility of all the layers at once. You can lock all the layers at once. You can view all the layers by their outlines at once. The benefit of this is apparent when you have many layers with content close to one another and want to make an element or modification to one layer. You can lock all the layers by clicking on the lock in the top row and then click the lock on the selected layer you want to modify to unlock only that layer.
The eye icon lets you toggle the visibility of the elements on a layer. The third icon is a square with a bold black outline. This enables you to view your elements by their outlines only. Don't confuse outlines with strokes. Even filled shapes without strokes will have outlines on the stage when you click the outline box of the appropriate layer. The blue color in the outline box for layer 1 means that if I view my layer 1 outlines, the outlines will be blue. doubleclicking the blue box will bring up the layers properties box and allow me to select another color for the outline. I can select different colored outlines for different layers. When I use the outlines option, the solid blue box turns into a hollow box with a blue outline indicating that I'm viewing my elements on that layer in outline view only.
The icon to the left of the layer name looks like a sticky note. Double clicking will bring up the layer properties box which you also accessed by double-clicking on the outline button. We will use the layers properties window later in the course to create guides for motion and masks.
More Practice
Let's create a new layer. There are several ways to create a new layer. You can right-click on the current layer and select Create New Layer from the context-sensitive menu. This will insert the new layer on top of the current layer and it will be named Layer 2 by default. You can also click the Add New Layer button on the bottom left of the timeline and this will insert the new layer on top of the current layer and it will be named Layer 2 by default. You can delete a layer by selecting the layer and clicking the trashcan viewed on the right of this image.
I've added a new layer and renamed it cat. A different color is assigned to the outlines by default but I have not chosen to view this layer in outline view so the green square remains solid.
Layers come with a stacking order. This means that elements on one layer will be covered by elements on the layers above them if they are in the same location on the stage. In Flash, the higher up the layer is to the top of the timeline, the closer that layer's content will appear on the screen. You can click-hold-and-drag layers above or below other layers to rearrange the stacking order. Using Layers will enable you to add perceived DEPTH to your work.
Layers help you organize your work. The Distribute to Layers command is extremely helpful in organizing selected items. Note that Distribute to Layers works differently for different objects. Distributing symbols, groups, or textboxes will distribute each individual element on its own individual layer. Distributing primitives will result in either one object on one layer if they are touching, or separate objects on separate layers if they are not touching. Distributing symbols result in layers given the names of the symbols. Use the Distribute to Layers feature to organize and maintain more control over your work.
Macromedia Help defines layers this way: "In Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004, layers are analogous to transparent sheets of acetate stacked on top of each other. In the areas of a layer that don't contain content, you can see through to content on the layers below. Layers assist you in organizing content in your document. For example, you can keep background art on one layer and navigational buttons on another. Additionally, you can create and edit objects on one layer without affecting objects on another layer." The power of layers is apparent when we begin to animate. So let's get back to the timeline and do some basic tweening.
Getting back to our timeline, we notice the circle in frame 1 of each new layer. By default, Flash adds a keyframe to frame 1 of each layer.
What's a keyframe?
A keyframe is a special frame that defines a change in your content. Let's take our cat and put it in the center of the stage in frame 1. Then let's add a keyframe to frame 10 and move the cat to the top of the stage in frame 10. Frame 10 indicates a change in position. Keyframes indicate changes in location, color, scale, transformation, shape, etc. of an element.
How do you add a keyframe to frame 10?
Select the cat layer. Click on frame 10 and the frame will turn blue on the PC to indicate that it's selected. Right click on the frame and go to 'Insert Keyframe'. You can also select the frame and go to the Insert menu to Insert>Insert Keyframe. Select the frame and use the keyboard command of F6. Flash will insert a black circle in the keyframe, and it will change all the frames from frame 1 through frame 9. Here is what the result will look like: The black filled circle in the keyframe indicates that Flash copied all the content in frame 1 and inserted it into frame 9.
INTERACTIVE Flash DEMO
Flash is asking to keep the original keyframe in all the frames from frame 1 through and including frame 9. It has added a white rectangle to frame 9 to indicate that it's the last frame displaying the content created in frame 1. I love the way our textbook identifies keyframes: "A keyframe indicates that something important happens at the point in the timeline where the keyframe is located".
The timeline shows us movement displayed over time. Flash uses frames per second to measure this movement over time. Theoretically on a linear timeline with 120 frames, and a frame rate of 12 frames per second...you'd have a 10 second movie. I say theoretically because as you get more advanced in Flash, you'll see that you don't have to use the timeline in a linear fashion.
Now we will follow the timeline according to Flash's default 12 frames per second in a linear fashion meaning that the playback head will go from frame 1 to your ending frame in succession. If you had 12 frames, Flash would take one second to move through frame 1, 2, 3, through 12. This doesn't necessarily mean that the movie would play back in one second on all your viewer's computers. Bandwidth and the user's individual computer resources will affect the final playback speed of your movie.
Keyframes indicate a significant change. I'm going to take my cat and move it from the center of the stage in frame 1 to the top of the stage in frame 10. The change involved is position or location on the stage. Watch the cat jerk into its new position.
INTERACTIVE Flash DEMO
To get a more elegant movement from the image in frame 1 to the image in frame 10, let's tween between the 2 keyframes. We will use a motion tween to create smooth movement from the image in the middle of the screen to the image on the top of the screen.
INTERACTIVE Flash DEMO
Did you see the difference between just moving an object on the stage and tweening an object between two keyframes? Now let's make our first animation.
Please continue to the next section of this lesson.
