Graphics in Flash

Constructing the Slide Show Interface

With the assets for the slide show in place, you can now concentrate on the interface. This will involve using the tools in the Tools panel to build the interface and then converting the images to symbols. To add a bit of “zip” to the interface, the separator will use a gradient fill to give it a 3D look.

1. Open the file you have been working on, if you have closed it, and add six layers to the Timeline.

To add a layer, click the Add Layers button on the Timeline.

Your Timeline now has seven layers. From the top layer down, name them as follows:

• Actions
• Text
• Images
• Buttons
• Separator
• Title
• Logo

Adding layers to a movie has no effect on the final file size. The advantage of using layers is they can be used to hold individual pieces of content. This makes access to content on the Stage a lot easier because you can see where it is. It is also a common practice to include an Actions layer if ActionScript will be used in the movie.

Finally, click the Size button on the Property inspector to open the Document Properties dialog box. Set the Stage width to 550 pixels and the height to 575 pixels. Set the Stage color to Dark Blue by clicking on the Background color chip in the Document Properties dialog box and clicking the Dark Blue chip at the bottom of the Color Picker. Click OK. The Stage resizes, and the background appears dark blue.

2. Select the Logo layer and drag a copy of the Logo symbol to the Stage.

Obviously, the logo needs to be resized. Select the logo and in the Property inspector, set its x and y positions to 0,0. When you press Enter (PC) or Return (Mac), the logo moves to the upper-left corner of the Stage. Using the Property inspector is a great way to precisely position objects on the Stage.

With the logo selected on the Stage, select the Free Transform tool. When you select this tool, the logo will be surrounded with a solid box with handles. You will also notice a white dot in the center of the selection. That white dot is the object’s center point, and any transform done with this tool will be done using the center point. If you were to scale the logo, it would expand or contract inward or outward from that center point.

Drag the center point until it is over the handle in the upper-left corner of the selection. Place the cursor on the lower-right corner and watch for the Scale icon to replace the cursor.

 

Press Shift and drag the selected corner diagonally upward toward the center point. As you drag, the width and height numbers in the Property inspector change. When the width value equals 77, release the mouse.

Lock the Logo layer by clicking the dot in the Logo layer that is located under the Lock icon. By locking a layer, you are ensuring that you don’t accidentally select the logo and move it out of position.

3. Select the Title layer, click the Text tool, and click once on the Stage.

The text you will be adding is the slide show title, meaning that it will appear on every screen. In this case, the text won’t be coming from an external source or moving around. In this situation, select Static Text from the Text Type drop-down list on the Property inspector.

Enter the words The British Columbia Rain Forest.

The text will appear onscreen and reflect the default text format for Flash in the Property inspector. Select the text with the Text tool and use these formatting settings in the Property inspector:

• Font: Times
• Style: Bold
• Size: 20 points
• Color: White (#FFFFFF)
• Alignment: Left.
• Width: 326
• Height: 27
• X: 210
• Y:11

... 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