Creating a simple FLA file
This tutorial guides you through the process of creating a basic FLA document. You'll use this workflow when authoring projects in Flash Professional. The first step involves creating a new document:
Choose File > New.
In the New Document dialog box, the ActionScript 3.0 file type is selected by default (see Figure 2). If ActionScript 3.0 is not selected, select it now. Click OK.
The New Document dialog box showing the Flash Professional file types
Figure 2. The New Document dialog box displays the file types you can create in Flash Professional.
Use the workspace drop-down menu located on the upper right of the screen to select the Essentials workspace layout option (see Figure 3). This step ensures that the layout of the panels in Flash Professional match the arrangement of the panels displayed in the screen shots for this tutorial.
Note: Later, you can create a preset of your own custom workspace by positioning the panels in any way that you prefer. Choose the New Workspace option and enter a name to save your personal configuration. Once it's saved, you can reset the workspace by choosing its name from the workspace menu.
Choosing the Essentials option to see the workspace layout used by the tutorial
Figure 3. Select the Essentials option to see the workspace layout used for this tutorial.
Click the Properties tab in the upper right side of the user interface to view the Property inspector, which displays the Stage properties for the file when no other objects are selected.
By default, the Property inspector is vertically aligned along the right side of the workspace. The Size section displays the current Stage size setting as 550 × 400 pixels (see Figure 4). The Stage background color swatch is set to white. You can change the color of the Stage by clicking the swatch and selecting a different color in the color picker that appears.
Property inspector showing the Stage size and background color
Figure 4. The Property inspector displays the Stage size and the background color.
Tip: You can set the background color of the Stage in the Flash movie by choosing Modify > Document or by selecting the Stage and then modifying the Stage color swatch in the Property inspector. There's no need to draw a rectangle to define the background color. When you publish your movie, Flash sets the background color of the published HTML page to the same color as the Stage background color (if you choose to generate an HTML file).
Choose File > Save.
Select the location to save the FLA file on your hard disk. Name it SimpleFlash.fla and then click Save. Make a note of the location where you save the FLA file because you'll need to find this directory at the end of this tutorial.
Drawing a circle on the Stage
After you've created your Flash document, you are ready to add some artwork to the project. Drawing shapes is a common task in Flash. When you use the drawing tools in the Tools panel, the vector graphics you create can be edited at any time. The following steps describe how to create a circle; later, you'll use this circle to create some basic animation. Follow these steps:
Select the Oval tool from the Tools panel (see Figure 5).
Oval tool in the Tools panel
Figure 5. Tools with a triangle in the bottom left corner contain more than one option; click and hold the shape tool icon to select the Oval tool from the list that appears in the Tools panel.
Use the stroke color swatch in the Property inspector to select the No Color option (red diagonal stripe) from the Stroke Color Picker (see Figure 6).
Selecting the No Color option in the Stroke Color Picker
Figure 6. The universal "no" symbol (red diagonal stripe) indicates that the color swatch is set to the No Color option in the Stroke color picker.
Select a color of your choice from the Fill color picker, located directly below the Stroke color picker. Choose a fill color that contrasts well with the Stage color. In this example, an oval with a blue fill color is displayed on top of a red Stage color.
Whenever you draw a vector shape, you have the option of selecting two drawing modes: Merge drawing mode and Object drawing mode. For the purposes of this tutorial, click the drawing mode button to select the Object drawing mode at the very bottom of the Tools panel. When the Object drawing mode is selected, the button will appear darker and selected, as shown in Figure 7.
Object drawing mode
Figure 7. The Drawing mode button is a toggle that alternates between modes; choose Object drawing mode by clicking the button to make its background appear darker.
To learn more about the two drawing mode options, see the Drawing modes section of the Flash Professional online documentation.
While the Oval tool still selected, press and hold the Shift key. Draw a circle on the Stage by Shift-dragging on the Stage (see Figure 8). The Shift key is a modifier key; when you press and hold the Shi