Graphics in Flash

Using Gradients

Filling shapes with gradients can be used to give the object a 3D effect. A gradient is simply a gradual transition between colors. In Flash 8 Professional, you can create gradients containing up to 16 colors. The two types of gradients available in Flash are radial and linear. A radial gradient does the color transition using a circular pattern; a linear gradient makes the transition in a straight line.

In this exercise, you create a linear gradient for the bar that will separate the logo and title from the image in the slide show.

1. Select the Rectangle tool and draw a rectangle that is 550 pixels wide and 15 pixels high.

Apply a solid fill with no stroke. Open the Color Mixer panel by pressing Shift+F9.
When the Color Mixer opens, select the fill color chip and select Linear from the drop-down list. The Color Mixer changes to indicate a gradient has been selected.

Black and white is the default gradient that appears in both the Fill color chip and in the gradient bar in the Color Mixer. This won’t work with our design. The plan is to have a gradient that transitions from the Dark Blue #000034 to the Light Blue #D5D7E2 used in the color palette for the project.

Click on one of the arrows to change its color. You can do this change by entering the color value directly into the input box, clicking on the Color Picker to choose the color, or clicking once on the arrow to open the Color Palette and choosing one from there.

Click and hold on the selected arrow and then release the mouse. When the Color Palette opens, select the Dark Blue color chip added earlier in this lesson. The gradient will change to reflect your choice. Select the other arrow and enter the value into the Hexadecimal input area. The gradient now transitions from dark blue to light blue.

To give the separator a bit of a rounded 3D effect, the gradient should transition from light to dark back to light. Move the dark blue slider to the middle of the gradient bar. Click once under the bar, to the right of the dark blue. When you release the mouse, a pointer has been added. Select it and set its color to Light Blue. Close the Color Mixer.

Custom colors aren’t the only colors that can be saved. If you have a gradient you will be using on a regular basis, save the swatch, and every time you open the Fill Color Picker it will be grouped with the gradients at the bottom.

2. Select the bar with the gradient and select the Gradient Transform tool.

The Gradient Transform tool is located directly under the Subselection tool on the Tools panel. When you select the Gradient tool, you will notice the selection changes on the Stage. The icons you see are identified in the following image.

Mouse over the rotation handle and then click and drag the handle in a circular motion to rotate the gradient 90 degrees. The gradient might seem to disappear because of the narrowness of the shape it is filling. To make the gradient visible in the bar, the gradient needs to be resized. Click and drag the Resize Gradient handle until it touches the bottom of the bar. Release the mouse, and the gradient transitions through the bar.

3. Switch to the Selection tool and move the bar to an x value of 0 and a y value of 50 in the Property inspector.

With the bar selected, right-click (PC) or Control -click (Mac) and select Convert to Symbol from the context menu. When the Convert to Symbol dialog box opens, name the symbol Gradient and select the Graphic radio button. When you click OK, the symbol will appear in the library, and the outline for the symbol turns blue. This change in color tells you the object is now a symbol.

You can use the context menu to convert an object to a symbol or you can select Modify > Convert to Symbol.

Symbols can be changed from one type to another. Select the symbol in the library and select Properties from the Library Options menu. The Symbol dialog box will open, and you can select a new symbol type from the list. If you aren’t a fan of menus, right-click (PC) or Control-click (Mac) on the symbol in the library and then select Properties from the context menu.

4. Select the Separator layer and draw a box filled with the medium blue color and no stroke that is 550 pixels wide by 40 pixels high.

This bar will be used as a background for the navigation buttons and will serve to separate the content from the text that will describe the image. In the Property inspector, set the x and y coordinates for this bar to 0 and 465, respectively. Lock the Separator and Title layers and save the document.

Sometimes you will place an image or symbol in the wrong layer, only to discover this fact after you have precisely placed it into position. If that happens to you, select the object and select Edit > Cut. Click on the layer where the object is supposed to be and select Edit > Paste in Place. The object on the Clipboard will be pasted into the same location on the Stage as that from where it was cut. The keyboard command is Ctrl+Shift+V (PC) or Cmd+Shift+V (Mac)

Using Grids, Guides, Rulers and Snapping in Flash

As you may have noticed in this lesson, there is a lot of precision placement of objects in a Flash movie. The x and y coordinates in the Property inspector are used to precisely position objects on the stage. In fact, you will be using ActionScript in Lesson 6 that uses an object’s x and y coordinates to move that object from one location on the Stage to another. The 0,0 point for the Stage is the upper-left corner and for am object in a symbol, the 0,0 point is the + sign you see in the center of the Stage when you are in symbol-editing mode.

Guides, grids, rulers, and snapping also help with the precise positioning of objects on the Stage. These tools are available to assist you to manually place objects on the Stage with a degree of precision that is simply unavailable when dragging an object from the library onto the Stage. When you use guides or the grid on the Stage, they are visible only while you are creating the movie. They will not appear when the SWF file is created.

You can turn on the grid by selecting View > Grid > Show Grid. When the grid appears, the Stage will look like it has been overlaid with graph paper. You can change the size of the squares in the grid by selecting View > Grid > Edit Grid to open the Edit Grid dialog box. In this dialog box, you can change the size of the squares in the grid, the color of the grid lines, whether objects snap to the grid lines, and even how accurate the “snapping” will be. To turn off the grid, select View > Grid > Show Grid.

Guides are simply lines on the Stage used for object placement. Guides are created by selecting View > Rulers and dragging a guide from either the horizontal or vertical rulers that appear. You can see the guides by selecting View > Guides > Show Guides. You can also change the guide settings by selecting View > Guides > Edit Guides.

As you can see, the Edit Guides dialog box allows you to change the color of the guides, whether they are visible or not, have objects snap to them, and even lock them so they can’t be accidentally moved. Like the Edit Grid dialog box, you can also choose how close an object is to a guide before the object snaps to it.

1. Turn on the rulers and select the Buttons layer.

Select the magnifying glass and zoom in on the left edge of the Medium Blue bar at the bottom of the Stage. Drag a horizontal ruler from the top ruler and place it at the 500-pixel mark. Place another guide at the 10-pixel mark on the vertical ruler. These guides will be used to align the buttons used for the navigation in the movie.

When you zoom in on an object, you don’t necessarily need to use the scroll bars to move around the Stage. If you hold down the spacebar, the magnifying glass cursor will change to a grabber hand. If you click the mouse and drag, you can move around the Stage. When you release the spacebar, the grabber hand will be replaced with the magnifying glass. If you need to zoom out, press Alt (PC) or Option (Mac) and a minus sign will appear in the magnifying glass. Click the mouse, and the screen will zoom out. If no cursor appears in the magnifying glass, you have reached maximum magnification, which is 2000%.

If you want to quickly return to the 100% view of the Stage, double-click the Magnifying Glass tool in the Tools panel. Another handy magnifying glass trick is to “marquee” the area in which you want to zoom in by clicking and dragging the magnifying glass over it. When you release the mouse, the area will be in the center of the screen.

You can also set the screen magnification by the numbers .Enter a value into the Stage View percentage located in the upper-right corner of the Timeline and press Enter (PC) or Return (Mac).

2. Drag a copy of bImage01.jpg from the Button_Images folder in the library and place the lower corner of the image where the guides intersect.

The buttons will be spaced 10 pixels apart from each other. Drag a vertical guide from the ruler and place it against the left edge of the image. Note the value on the horizontal ruler and place another guide 10 pixels from that value. Drag the bImage02.jpg file from the Button_Images folder and place it against the new guide. Repeat this for the remaining images in the folder. When the images are in place, turn off the guides and the rulers.

3. Click the first image and press F8 to open the Convert to Symbol dialog box.

Name the symbol Button1 and set its type to Movie Clip. With the button selected, give the instance name of Button01. Repeat this for the remaining four symbols. When you finish, each of the buttons will appear as a movie clip in the library.

You could have just as easily selected the Button type, but it is now becoming a common practice to use movie clips in place of buttons when ActionScript is involved.

4. Save the file and select the Images layer.

Open the Images folder in the library and drag a copy of Image01.jpg to the Stage. Use the Property inspector to place it at 0 on the x axis and 65 on the y axis. Convert the image to a Graphic symbol named Image1.

5. Select the text layer and add a text box under the button bar.

Enter the following text:

“The coastal rain forest on the West Coast of Vancouver Island is an amazing place.”

With the text box selected, use the following settings in the Property inspector:

• Text type: Static text

• X: 9

• Y: 531

• Font: _sans. You can choose your own font. We chose _sans because it is available to everybody.

• Size: 12 points

• Color: White #FFFFFF

• Style: Bold

• Alignment: Left

6. With everything in place, you can now concentrate on making the movie interactive. Save the file.

... NEXT

Who is tom green?

Teacher, author, raconteur. Here's a run down of what I have been up to over the past few years. My Bio.

Classes

• The Flash interface:
  Week 1
• ActionScript basics:
  Week 2
• Working with graphics:
  Week 3,4
• Working with text:
  Week 5
  
• Working with audio:
  Week 6,7
• Animation basics:
  Week 8
• Video basics:
  Week 9,10
• Building Stuff:
  Week 12,13,14

Class Project 1