| You have already used several fills in this lesson. The menu background graphic you created used fills without any strokes. You used hexadecimal values to select fill colors, although you could have used the color swatches as well. Color Mixer gives you more control over fills than the Tools panel does, and it should already be open in the TechBookstore panel set. If not, open Color Mixer by selecting Window > Color Mixer. You can create gradient and bitmap fills using the controls in this panel. With bitmap fills, you fill an area using a bitmap graphic that was imported into Flash. You should already have several bitmaps in bookstore5.fla, and you have an Import button to import a new image for the fill. Select Bitmap from the drop-down list in Color Mixer.  The bitmaps currently in the library are then shown in Color Mixer. If you select one of these bitmaps, it is selected as the current fill. Note Bitmap fills are tiled when filling in an area. To resize the bitmap fill, use the Fill Transform tool, which can scale, rotate, and skew bitmap fills. You will use the Fill Transform tool with gradients later in this exercise.
You can fill a shape with a gradient, which is a gradual transition from one color to another. There are two kinds of gradients that can be created with Flash: linear and radial. A radial gradient makes the transition in a circular fashion, whereas a linear gradient makes the transition along a straight line. You can apply up to 16 colors to either gradient type to make more complex graphics and use the Fill Transform tool to precisely control the gradient focal point. In this exercise, you create gradients for several of the assets in the main SWF file. You should have a rectangle and a circle that you created in the first exercise of this lesson moved off the Stage. The fill for both of these elements will be modified. 1. | Save a new version of bookstore5.fla as bookstore6.fla in the TechBookstore folder on your hard drive.
You should version up whenever you plan to make significant changes.
| 2. | Unlock the background layer. Move the rectangle that you created in the first exercise back onto the Stage and create a gradient using Color Mixer.
In the first exercise, you created a rectangle that was 779 pixels by 15 pixels. Select that rectangle and move it back onto the Stage. Expand or open Color Mixer, and select Linear in the Fill Type drop-down list. A color palette will show below the drop-down list, and your rectangle will have a linear gradient applied to it straight away.
 Click the color pointer on the left side of the gradient definition bar. Then enter #CCCCCC into the hexadecimal text field just above and press Enter. Alternately, you can press on the color pointer and select a color from the swatches menu that appears. The color pointer on the right side of the gradient definition bar should still be set to white. If it is not, click the color pointer on the right side of the gradient definition bar and change the color to white (#FFFFFF).
Tip You can change the color using the RGB text fields on the right. Tip To add a color to the gradient, click over the gradient definition area somewhere. A new color pointer appears so that you can add a color. Remember, you can add up to 16 colors. You can remove the color by dragging a color pointer away from the bar. | 3. | Modify the gradient with the Fill Transform tool.
If, for some reason, the gradient you added was not applied to your rectangle, select the Paint Bucket tool from the Tools panel and click your rectangle now. That process applies the gradient. The gradient still needs to be scaled and rotated, though, and you will use the Fill Transform tool for that purpose.
Select the Fill Transform tool from the Tools panel and click the gradient fill in your rectangle. A series of control handles appear.
 Mouse over the rotation handle at the upper-right corner of the rectangle and click and drag it downward to rotate the gradient 90 degrees clockwise. Thus, the gradient transition will be vertical instead of horizontal. However, now the transition is barely visible because of the narrow rectangle. To make the gradient visible, you need to resize the gradient. Click the square control handle on the Fill Transform tool, which is now below the shape, and drag it upward. Let the bounding box snap to the side of the rectangle, so the gradient is the same height.
| 4. | Convert the rectangle to a graphic symbol and move it onto the Stage directly under title.png.
Using the Selection tool, make sure that the entire rectangle is selected. Because you drew this graphic in the Object Drawing model, you need to click it only once (double-clicking it puts you into edit-in-place mode. Use the keyboard shortcut F8 to convert the rectangle into a graphic symbol or select Modify > Convert to Symbol from the main menus. Name the new symbol grBar.
In the Property inspector, place the symbol instance at 0 for x and 109 for y, which puts it just below the title.png image. In the library, drag the symbol grBar into the graphics folder, just to stay neat and organized.
Note Any time you select a symbol, an object drawn In the Object Drawing model, or a grouped item, you see a blue outline, indicating that the item is selected. This is referred to as a bounding box. | 5. | Open the grMenuGraphic symbol from the graphics folder in the library. Fill the shape on the gradient layer with a linear gradient.
Double-click the graphics library folder icon and then double-click the icon for grMenuGraphic to enter symbol-editing mode. You need to zoom in on the graphic, either with the Zoom tool or with the Zoom options in the edit bar. Right- or Control-click on the gradient layer in the Layers pane and select Lock Others from the context menu. This ensures that you are only editing the graphic on the gradient layer.
You use the same gradient that was used for the rectangle. Because you have not changed the fill type since the last exercise, you can select the Paint Bucket tool and click once on the shape in the gradient layer to apply the fill.
Using the Fill Transform tool, rotate the gradient 90 degrees clockwise to make the gradient vertical. Then resize the gradient to the same width of the shape.
 When you finish, click Scene 1 in the edit bar to return to the main Stage.
| 6. | Move the circle that you created onto an empty part of the Stage and fill it with a radial gradient. Convert it to a symbol and then move it to its own layer.
You made a circle in the first exercise, and it is used to create a glow behind the imported logo. Return to the Color Mixer; this time, select Radial from the drop-down list. Click the left color pointer for the gradient and type #00cc00 into the hexadecimal field just above the gradient definition bar. This selects a bright green color. Although it might not appear too appealing at this point, the glow is mostly hidden and quite transparent. When you finish creating the site, it matches part of the default component set used in the Tech Bookstore.
Select the color pointer on the right side of the gradient definition bar. This time, you set this end of the gradient to fully transparent by clicking the arrow button next to the Alpha field and sliding it to 0 or by typing 0 into the Alpha field directly and pressing Enter.
 Make sure that the circle is filled with the gradient and then convert it to a symbol using the keyboard shortcut F8. Name the symbol grGlow, make it a graphic symbol, and move it to the graphics folder in the library.
On the Stage, select the background layer and insert a new layer above it. Name this layer glow animation. Cut the grGlow instance from the Stage in the background layer and paste it into the new layer.
Tip You should use gradients sparingly because they can increase file size significantly. | 7. | Save your changes.
|
|
