CHAPTER 1 - Define properties for a new document and create a gradient background

To learn how to create a movie in Flash, let’s start from the very first step in the process: opening a new file. Then, by completing this section, you’ll learn how to complete the following tasks:

• Open a new file and define document properties
• Create and transform a gradient background

Open a new file
Now you’re ready to create your own version of the tutorial movie.
1 Choose File > New.
2 Choose File > Save As.
3 Name the file mystiletto.fla and save it within your Flash MX application folder, in the Tutorials/FlashIntro/My_Stiletto sub folder.

Note: As you complete the tutorial, remember to save your work frequently.

Define document properties

Configuring document properties is a common first step in authoring. You can use the Property inspector and Document Properties dialog box to specify settings that affect the entire movie, such as the frames per second (fps) playback rate, and the Stage size and background color.

1 If the Property inspector isn’t open, choose Window > Properties. In the Property inspector, verify that 12 is the number in the Frame Rate text box.

The movie will play at 12 frames per second, an optimal frame rate for playing animations on the Web.

Note: If the Property inspector is not fully expanded, click the white triangle in lower right corner.

2 The Background Color box indicates the color of the Stage. Click the down arrow on the Background Color box, then move the Eyedropper tool over the color swatches to view their hexadecimal values in the Hexadecimal text box.

Find and click the gray color swatch with the hexadecimal value of 999999.

.........................................Hexadecimal text box










............................Select this shade of gray

4 To resize the Stage, click the Size button, which indicates the size of the Stage. In the Document Properties dialog box, type 640 px in the first Dimensions text box and 290 px in the second Dimensions text box. Verify that Pixels is selected in the pop-up menu, and click OK.

The Stage dimensions change to reflect the new settings of 640 x 290 pixels.

Specify grid settings

On the Stage, you can align objects along horizontal and vertical grid lines. Even when the grid is not visible, you can snap objects to it. Now you’ll modify the distance between the horizontal and vertical grid lines, and create a grid in alignment with the Stage borders.

1 Choose View > Grid > Edit Grid.

2 In the Grid dialog box, type 10 px in the grid width text box and 10 px in the grid height text box.

3 Select Snap to Grid and verify that Show Grid is not selected.

Objects will now snap to the grid, even when the grid is not visible.

4 Verify that Normal is selected for Snap Accuracy, and click OK.

Snap accuracy determines how close an object must be to a grid line before snapping to it.

Create a gradient background
A gradient displays subtle variations of a color, or transitions between two or more colors. In the finished tutorial file, the background is a gradient that blends black and dark blue with a transparent area that allows part of the gray Stage color to be displayed. You achieve this effect using the Color Mixer.

Note: While gradients offer interesting effects in movies, overuse of gradients can adversely affect computer processor speeds and decrease the speed at which an animation plays. When designing a movie, consider both your artistic and performance requirements to determine the best use of gradients.

Draw a rectangle
Earlier in the tutorial, you created a grid that aligned against the Stage and allowed you to snap objects to the grid lines. Now you’ll draw a rectangle that snaps to the area of the grid bordering the Stage.

1 In the pop-up menu above the right side of the Stage, enter 75% to view the entire Stage.

This setting indicates your magnified or scaled-down view of the Stage. The setting does not affect the actual size of the Stage in your movie, which you specified in the Document Properties dialog box.





2 In the toolbox, select the Rectangle tool.



3 In the toolbox, click the Stroke Color control. Select No Stroke (the button with the red diagonal line above the color palette).












The selected fill color of the shape is unimportant; you’ll soon change the color.

4 Starting from the upper left corner of the Stage, drag to the lower right corner of the Stage to draw a rectangle that covers the Stage. When you release the pointer, the rectangle snaps to the edges of the Stage, along the hidden grid.

Note: While completing the tutorial, you may find it useful to undo a change you’ve made. Flash can undo several of your recent changes, depending on the number of undo levels you have set in Preferences. To undo, choose Edit > Undo or press Control+Z (Windows) or Command+Z (Macintosh). Conversely, you can redo what you’ve undone by choosing Edit > Redo or pressing Control+Y (Windows) or Command+Y (Macintosh).


Specify a color for the gradient
Dark blue is the first color you’ll add to your gradient.

1 In the toolbox, select the Arrow tool. On the Stage, click inside the rectangle to select the fill.

When you drew the rectangle, the Property inspector displayed properties for the Rectangle tool. When you select a shape that has already been created, the Property inspector displays properties for the shape.

2 If the Color Mixer is not open, choose Window > Color Mixer.

3 To expand the Color Mixer, click the white arrow in the panel title bar.

Click here to expand the panel









4 If the Color Mixer is not fully expanded, click the arrow in the lower right of the panel.













5 In the Fill Style pop-up menu, select Radial. 6 Click the gradient slider to the left of the gradient bar to select it.





Gradient bar

Gradient slider






7 Click the color box in the upper left corner of the window to open the color palette. Use one of the following methods to select dark blue:

• Type 000066 in the hexadecimal value text box and press Enter or Return.
• Move the eyedropper over the color swatches until you find the dark blue with the hexadecimal value of 000066, then click the swatch to select it.

Click this shade of blue








Change the alpha value

In the Color Mixer, the Alpha text box indicates the transparency of the color, with 0% indicating that the color is completely transparent, and 100% indicating the color is completely opaque. You’ll specify an alpha value of 0% to create a gradient that includes dark blue and black along with the gray Stage color that shows through the transparent areas of the gradient.

• In the Color Mixer, either type 0 in the Alpha text box and press Enter or Return, or move the Alpha slider to 0.

Add a second gradient color
You’ll now add black to the gradient.

1 In the Color Mixer, click the gradient slider to the right of the gradient bar to select it.

2 Click the color box to open the color palette and select the black with a hexadecimal value of 000000.

Remember, you can either type the hexadecimal value in the Hexadecimal text box and press Enter or Return, or you can find and select the color swatch with the same hexadecimal value.














Transform the gradient fill

When you transform an object, you rotate, scale, or skew it. You can transform a fill using the Fill Transform tool.

1 In the toolbox, select the Fill Transform tool. On the Stage, click anywhere inside the rectangle.

An ellipse that indicates the shape and location of the gradient appears around the Stage.

The ellipse has controls for the location, width, scale, and rotation of the radial gradient.














2 Drag the center control to the left of the Stage so that it’s approximately 1/3 of the distance from the left edge of the Stage, as shown in the following illustration.


















As you change the shape and placement of the ellipse, the shape and placement of the color transitions on the Stage change accordingly.

3 Drag the square handle on the ellipse, which controls gradient width, to the left to make the ellipse narrower; the approximate shape of the ellipse is shown in the following illustration.


















4 Drag the circular middle handle, which controls the size of the gradient, to the right to make the ellipse larger, as shown in the following illustration.


















5 Drag the bottom circular handle, which controls the rotation of the ellipse, toward the left to rotate the ellipse to the approximate angle shown in the following illustration.


















Name and lock a layer

The gradient shape appears on Layer 1 in the Timeline, currently the only layer in your document. In preparation for adding and moving additional objects on the Stage, you’ll rename and lock the layer. In the next section of the tutorial, you’ll create a new layer.

As you learned in the Understanding Layers lesson, by locking the layer, you ensure that you or other users don’t make inadvertent changes to objects on the layer.

1 In the Timeline, double-click the Layer 1 name and type Background to rename the layer.

2 Click away from the layer name, then click the padlock icon to lock the layer.

.
.
==============================================
.
Contents
Trademarks
CHAPTER 1 - Introduction to Flash MX Tutorial
CHAPTER 1 - What you should know
CHAPTER 1 - View the completed movie
CHAPTER 1 - Analyze the stiletto.fla file
CHAPTER 1 - Define properties for a new document and create a ...
CHAPTER 1 - Create and mask vector art
CHAPTER 1 - Tween bitmap effects within a movie cl...
CHAPTER 1 - Load dynamic text at runtime
CHAPTER 1 - Add animation and navigation to button...
CHAPTER 1 - Add streaming and event sounds
CHAPTER 1 - Organize your Library panel
CHAPTER 1 - Test download performance and publish ...
CHAPTER 1 - The next steps
.
CHAPTER 2 - Introduction to ActionScript Tutorial
CHAPTER 2 - View a completed movie
CHAPTER 2 - Initialize the movie
CHAPTER 2 - Save and retrieve information
CHAPTER 2 - Display information in a dynamic text ...
CHAPTER 2 - Write an expression
CHAPTER 2 - Control the flow ofthe movie
CHAPTER 2 - Create commands and reuse code
CHAPTER 2 - Use a built-in object
CHAPTER 2 - Test the movie
CHAPTER 2 - The next steps
.
CHAPTER 3 - Introduction to Components Tutorial
CHAPTER 3 - Types of components
CHAPTER 3 - View the completed form
CHAPTER 3 - Create a form
CHAPTER 3 - The next steps
.
==============================================