You can now apply graphic effects filters to text, movie clips, or buttons on the stage. These effects include glow, bevel, and drop shadow. Figure 8.1 shows a movie clip before and after the bevel filter has been applied to it. You can apply the filters with the Filters menu, which is grouped with the Property inspector whenever an object that can have filters applied to it is selected (see Figure 8.2).

Figure 8.1. Movie clip with a filter applied to it.

Figure 8.2. Filters panel, with Bevel filter selected.

The new blend modes let you blend the colors in overlapping movie clips to create composite images. Modes include multiply, lighten, darken, add, subtract, difference, alpha, and invert. Figure 8.3 shows a movie clip without a blend mode next to two overlapping movie clips with the invert blend mode applied to one of them.

Figure 8.3. Movie clip with invert blend applied to it.

If no movie clips or images are located below the blended movie clip, it blends with the stage color.

Blend modes can be applied to a movie clip with the Property inspector (see Figure 8.4).

Figure 8.4. Accessing the blend modes with the Property inspector.

The radial gradients have been improved and now enable you to move the focal point of a gradient on the shape to which it’s applied to. You can also have more stops (colors) in the gradient, and you have a choice of spreading methods (pad, reflect, and repeat).

The Fill Transform tool has been replaced and expanded with the Gradient Transform tool (see Figure 8.5). It gives you much more control over how gradients are applied to shapes. Additionally, gradients and bitmap fills can now be applied to lines, which are also known as strokes, without requiring that they be converted to fills.

Figure 8.5. Using the Gradient Transform tool handles to modify a gradient.

In Flash 8, you have more control over the strokes you draw than ever before. In previous releases, strokes were limited to a maximum size of 10 pixels. This maximum size has now been increased to 200 pixels, which is plenty of room to take advantage of the new feature just mentioned: the capability to color strokes with a gradient fill.

You can now also choose how lines are joined (miter, round, or bevel, as shown in Figure 8.6). Caps, which are the end points of lines that are not joined, also have new settings available (none, round, and square, as shown in Figure 8.7). All of these settings enable you to draw more cleanly and precisely, and can be set in the Property inspector.

Figure 8.6. Line joins: miter, round, and bevel.

Figure 8.7. Line end caps: none, round, and square.

Normally in Flash, when you draw a shape and then another that overlaps the first shape in the same layer, the two shapes meld into one. This is considered normal behavior that helps keep the file size down by not accounting for additional points when shapes overlap. However, Flash 8 gives you a new option for drawing shapes on the stage. When the new Object Drawing model is turned on, which you can do with the button at the bottom of the Tools panel, it creates new objects that don’t meld with other objects when you draw on the stage (see Figure 8.8). This new option is found in the Line, Oval, Rectangle, Pen, and Pencil tool options. I like to think of it as a kind of “auto-grouping” mode.

Figure 8.8. Turning on the Object Drawing model in the toolbox options.

This is a sticky option for all of the tools that use it, which means that after you turn it on, it stays on for all tools until you turn it off. Object Drawing is turned off by default when you first enter the program. Although it remains to be seen what effect this will have on overall file size, you might want to try this option if you have worked extensively in “grouping” analogy illustration applications such as FreeHand.

Be aware that you need to double-click the drawing object on the stage to enter into edit mode for that object so that you can edit the actual shape, color, or other properties of the vectors that make up a drawing object created while in Object Drawing mode. Shapes drawn in normal mode are editable without double-clicking. To return a Drawing Object to behaving like a regular shape (with no need to double-click and edit), select it and choose Modify, Break Apart. The shapes will now be merged.

In MX 2004, the Undo feature was locked at the Document level, which meant that you had to work back through the history of every step in the document no matter on what timeline they occurred. In this version, to the joy of many, Object-Level Undo is back. With Object-Level Undo mode, each object on the Stage and in the library has its own undo list. As a result, you can once again undo changes to one object without affecting any other object.

However, the default setting for undo remains at the Document level and follows the History document changes. To turn on Object-Level Undo, go to Edit, Preferences (on a PC) or Flash, Preferences (on a Mac). In the General Preferences tab, select Object-Level Undo from the Undo options.

Flash 8 offers better text rendering with FlashType, which integrates subpixel rendering technology. This makes text, especially at smaller fonts, much more readable than it has been before now. Another improvement to text in this release is the addition of Bitmap Text Scrolling, which uses the bitmap surfaces capability to provide high-speed text scrolling.

In addition, improvements in the WYSIWYG text display enable you to have a more uniform experience of your text as it appears in the authoring environment versus how it appears when the .swf file is played in the Flash Player. In other words, what you see in the authoring environment is much more like what you get in the published .swf.

Macromedia has made a number of significant improvements to Flash’s performance with this release. Movie clips and vector images are now represented as cached bitmaps to improve rendering performance. When complex vector images or multiple instances of the same image with different effects applied are cached as a bitmap, every frame doesn’t have to be redrawn from the vector data. Chapter 9, “Working with Vector Artwork, Bitmaps, and Static Text,” explores the difference between vector and bitmap images in more depth.

Flash 8 introduces features for code development and run-time access to expressive features with ActionScript. These include the following features:

New features for media and components include an all new video codec and the new FLVPlayback component.

The Color Mixer panel offers many tools for selecting colors for fills and lines (see Figure 8.13). Color types include solid color, linear gradient, radial gradient, and imported bitmaps. In previous versions, these types could be applied only to fills. In Flash 8, you can now apply these color types to lines as well.

Figure 8.13. Color Mixer.

You can select your color from the color mixer in different ways:

You get experience with the color mixer in the coming chapters, especially Chapters 9 and 10, “Animation Basics.”

Filters are special effects or design shortcuts. They can be applied to objects from the Filters panel, which is grouped with the Property inspector at the bottom of the workspace.

Filters can be applied to text fields, movie clips, and buttons, either alone or in combination with other filters. They can be added to or removed from an existing object at any time in the development and design process. The available filters include the following:

Combinations of filters can be saved as presets, which can be renamed or deleted.

When working in the Flash authoring environment, you write and edit ActionScript in the Actions panel. To open the Actions panel (see Figure 8.14), go to Window, Development Panels, Action, or use the F9 keyboard shortcut.

Figure 8.14. The Actions panel.

You can think of a movie as a stack of transparent sheets that you have painted with the elements of your animation (see Figure 8.17). If you were to look through the stack of sheets, you would see the painted areas of the sheets below, as long as they were not covered by an area where the sheet above it is painted. In Flash, rather than use sheets of transparent paper, you use layers.

Figure 8.17. A stack of transparent sheets with artwork.

One thing that often confuses new Flash authors is the stacking order of layers in a Flash movie. In a Flash movie, the stacking order matches the spatial order—in other words, the closer the layer is to the top, the more above the stage it will be. The bottom layer on the timeline is always the closest layer to the stage visually. You can think of the stage as a desk on which the stack of sheets is sitting. The sheet on top of the stack is the farthest from the surface of the desk.

Dragging one layer above another changes the stacking order of layers. You can also select several layers and drag them at once.

To add a new layer, click on the Add Layer button at the bottom-left corner of the timeline. You can also add a new layer by right-clicking on the name of an existing layer, and selecting the Insert layer from the context menu. To delete a layer, you can click on the Delete button or right-click on the layer’s name and select Delete Layer.

Layer folders can help keep layers organized when a project gets big or complex. You can use them to group related layers into a folder that can be expanded or collapsed as you work (see Figure 8.18). You can drag any layer into or out of any folder after the folder has been created. If you select multiple layers into a folder, their order before being moved is maintained in the folder.

Figure 8.18. Timeline with folders, open and closed.

Sometimes the references to frames in Flash can get a bit confusing. As mentioned previously, frame numbers on the timeline tell you where you are in terms of time in an animation. Frames are represented visually on the timeline as rectangular boxes with nothing in them. Frames add time for the content of a keyframe to play. Their only function is to play whatever the previous keyframe (to their left) contains.

A keyframe is a frame that stores a reference to content on the stage that occurs at that frame number and on that layer. Keyframes that include graphic content are represented by a filled circle on the timeline.

A blank keyframe is represented by an open circle in a frame (see Figure 8.19). This is a keyframe without any visual content. Blank keyframes also serve as a place for code to be attached so that it runs when the playback reaches that particular frame. A blank keyframe therefore is a good place to store your frame-based code. Keyframes with code attached always have a small letter a above them to let you know they contain code.

Figure 8.19. Frames and keyframes (filled and empty) on the timeline.

Onion skinning is a viewing mode that lets you see the previous frame while drawing in a new frame. The term comes from traditional animation techniques, which used “onion skin” paper that was thin, like the layers of skin on an onion. The paper allowed the animator to see through the layers of drawings as they worked on them.

This sounds a lot like working with layers, so what’s the difference between layers and onion skinning? With layers, you see everything that is on all the layers at a certain point in time as if looking through a single stack of transparent sheets. With onion skinning, you view the visuals in keyframes for more than one frame at a time.

Onion skinning is not visible when you publish your .swf file; it’s just an author-time tool. You can toggle any of the onion skinning options on and off at any time in the authoring environment with buttons on the bottom of the timeline. Figure 8.20 shows onion skinning turned on for a short animation. The position of the circle at each frame is visible on the stage at once. If you use the outline option for onion skinning, just the outlines of the visual elements for each frame are visible, except for the frame currently being edited. If you’d like to have more than one frame available for editing at once, set the Edit Multiple Frames option, which makes all keyframes within the onion markers. To set the onion markers (the brackets on the number line of the timeline) drag the brackets along the timeline.

Figure 8.20. Onion skinning toggle buttons.

At the top of the tool panel, you’ll find the Arrow tools: the Selection tool (V) and the Subselection tool (A) (see Figure 8.22).

Figure 8.22. The Arrow tools.

The Selection tool (V) is the black arrow, and it lets you directly grab, select, and move any element on the stage. To select an object, just click on it. Double-clicking selects any contiguous parts of a shape. To add to a selection, hold the Shift key down while you select. To remove elements from your selection, hold the (Option) [Alt] key while you select. After a selection has been made, simply hold the mouse down and drag the selection to a new place to move the elements.

You can also drag in any blank area of the stage to create a selection marquee to include an entire shape. However, be aware that when you are using the normal drawing mode in Flash, if you miss a portion of a shape when you are using this method of selection, you cut the shape.

Approaching any deselected vector shape with the mouse cursor enables you to manually edit that shape by dragging and pushing the unselected outlines and fills. It’s as if you are selecting the space around the shape, and pushing that space into the shape, like pushing on a water balloon. The indicator for the tool changes depending on whether you are over a corner or a curve point. To move a corner point, drag to a new location. Hold the (Option) [Alt] key while dragging to place a new corner point. Pull in the middle of any line portion to create a curve point. This is covered in more detail in Chapter 9.

The Subselection tool is the white arrow with black outline (A). It enables you to view and manipulate the points of any vector object. Select any line and drag the corner points or change the selected curve points by manipulating the Bezier handles (see Figure 8.23). Vector objects and Bezier handles are discussed in later chapters.

Figure 8.23. Manipulating a curve’s handles with the Subselection tool.

With the Free Transform tool, you can change the dimensions of a selected object by dragging the handles at its sides or corners (see Figure 8.24). In addition, you can rotate the object by positioning the mouse a little outside the corner handle of the shape or object. The rotation usually occurs around the center of the selection, but you can adjust the center of rotation by dragging the white dot in the middle of the selection to another position.

Figure 8.24. The Free Transform tool applied to a line.

You can manipulate the horizontal or vertical skew of a selected object by dragging from somewhere between any of the rotation and scale points. Drag in the direction you want the shape to skew (lean).

When a shape is selected while the Free Transform tool is in use, the Envelope and Distort options become available in the lower options. These options give you additional control points that you can use to distort the shape. Use curve points for both the Distort option and the Envelope option. Figure 8.25 shows the Free Transform tool applied to a line, with the Envelope option turned on. One of the control points has been used to create a curve in the previously straight line.

Figure 8.25. Using a control point in the envelope of the Free Transform tool to create a curved line.

As mentioned in the “What’s New in Flash” section, in Flash 8 the Fill Transform tool has been expanded into the new Gradient Transform tool. It can be used for both gradient transformations and to manipulate bitmap fills. Note that a gradient or bitmap fill must be present on the stage and selected before you can use the Gradient Transform tool on it.

Flash offers two types of gradients: Linear and Radial. You can choose which type of gradient you want to use, as well as the colors for them, in the Color Mixer panel and add them with the Paint Bucket tool. (Both the color mixer and the Paint Bucket tool are discussed later in this chapter.) A linear gradient transitions from one color to another in one direction. A radial gradient transitions from the center of one color out to another color. When you have your gradient fill, you can transform the scale, location, and rotation of the gradient with this tool (see Figure 8.26). In addition, the focal point of radial gradients can now be adjusted.

Figure 8.26. Rotating the linear gradient in a selected fill.

The Gradient Transform tool also enables you to manipulate a bitmap fill’s size and rotation. Flash 8 also enables you to manipulate the tiling skew of bitmap fills.

The Line tool lets you draw by clicking on a start point and then dragging to the endpoint of the line you want to draw (see Figure 8.27). Turn on the Snap to Objects option to see a circle indicator appear when you approach other objects and want to easily and precisely connect the line to that object. In Flash 8, you can also turn on an additional cue called Stroke Hinting in the Property inspector to give you a preview of where your line will interact with other lines.

Figure 8.27. Drawing with the Line tool.

The Lasso tool (see Figure 8.28) lets you define and select an odd-shaped area by drawing the selection. This is especially useful when working with bitmaps that are broken apart or traced, which is discussed in more detail in Chapter 9. The Lasso tool has a Magic Wand option that selects areas of like colors in broken-apart bitmaps. It does not function for any vector shape.

Figure 8.28. The Lasso tool.

The Pen tool enables you to draw complex illustrations by manually creating corner points and curve controls that make up your drawing (see Figure 8.29). To begin your drawing, create corner points by clicking on the stage and create curve points by clicking and dragging in the direction you want the curve to grow. To complete your drawing, double-click at the last point in the drawing, or close the shape by clicking on the beginning point.

Figure 8.29. Drawing with the Pen tool.

The Text tool lets you place text fields on the stage (see Figure 8.30). After a new field has been placed, you can modify its properties with the Property inspector. You can set an alpha value (the transparency level) for the text with the Text (Fill) Color property. You can also add any of the filter effects discussed earlier in the chapter by selecting the field and choosing the Filters tab in the Property inspector group.

Figure 8.30. Using the Text tool to place a text field on the stage.

After the Oval or Rectangle shape tool is selected, you can draw the shape by clicking and dragging on the stage. Features of the shape, such as line thickness and color, can be preset with the Property inspector before you draw your shape on the stage.

A PolyStar tool is also available to create a more complex shape. You can access it by clicking on the little black triangle in the bottom-right corner of the Rectangle Tool button (see Figure 8.31). In the Property inspector, you can find additional options for the PolyStar Tool, including an option to create a polygon or a star, the number of sides, and the angle at the points.

Figure 8.31. The Polystar tool is accessed through the Rectangle Tool button.

The Pencil tool is a freeform drawing tool that lets you draw lines and curves that follow the movement of the mouse as you drag it across the stage. The accuracy of your drawing is controlled by the Smoothing option in the lower part of the toolbox. You can choose from the following options:

Usually you will want to use the Smooth option to keep the number of points you draw down and with that the file size. In Flash, keeping the file size small is a concern because larger sizes take longer for the end user to download. Figure 8.32 shows a line drawn in the Ink mode next to a line drawn in the Smooth mode of the Pencil tool. Drawing in Flash is discussed in more detail in Chapter 9.

Figure 8.32. The line on the left was drawn with the Pencil tool in Ink mode. The line on the right was drawn in Smooth mode.

Although the Brush tool (see Figure 8.33) is similar to the Pencil tool in how it draws, it is different in that the Brush tool draws fills (shapes without outlines). The Pencil tool draws lines. The Brush mode, which is set in the toolbox options, enables you to set how your brush stroke fills in the space when other graphic elements are already present. For example, you can set it to Paint Behind to have your stroke visible only where there are no existing lines or shapes. The strokes are there, and are visible if you later move the covering objects. This is discussed in more detail in Chapter 9.

Figure 8.33. A stroke made with the Brush tool, with a linear gradient selected as the fill color.

You can use the Paint Bucket and Ink Bottle tools (see Figure 8.34) to change the colors of graphic elements that you’ve already drawn. The Paint Bucket tool adds a fill to a closed shape. A closed shape is a shape that has an outline with no breaks.

Figure 8.34. Eraser tool Faucet option.

The Ink Bottle tool enables you to change the properties of strokes (outlines) instead of fills. You can also use the Ink Bottle tool to add an outline to an existing shape that does not currently have an outline.

The Eyedropper tool enables you to sample the color of a fill or line and then apply it to another object with the Ink Pot or Paint Bucket tools. When dealing with a stroke, the Eyedropper tool also collects the line width and stroke type information to be added to the new line.

The Eraser tool can come in handy because it lets you erase previously drawn graphic elements. The tool has several settings in its options, which are available on the lower toolbox when it is selected:

The Eraser tool also has a Faucet option, which lets you select and delete a single element (based on color selection) at once (see Figure 8.34). This can save a lot of time when cleaning up traced bitmaps.