Design Center Tutorial
Creating a simple Flash document
Table of Contents
Creating a file and adding graphics
To build an application in Flash CS3 Professional, you create graphics with drawing tools and import additional media elements into your document. Next, you define how and when you want to use each of the elements to create the application you have in mind.
When you author content in Flash, you work in a Flash document file. Flash documents have the file extension .fla (FLA). A Flash document has three main parts:
- The Stage is where your graphics, videos, buttons, and so on appear during playback. The Stage is described later in this document.
- The Timeline is where you tell Flash when you want the graphics and other elements of your project to appear. You also use the Timeline to specify the layering order of graphics on the Stage. Graphics in higher layers appear on top of graphics in lower layers.
- The Library panel is where Flash displays a list of the media elements in your Flash document.
ActionScript™ code allows you to add interactivity to the media elements in your document. For example, you can add code that causes a button to display a new image when the user clicks it. You can also use ActionScript to add logic to your applications. Logic enables your application to behave in different ways depending on the user's actions or other conditions. Flash includes two versions of ActionScript, each suited to an author's specific needs.
Flash includes many features that make it powerful but easy to use, such as prebuilt drag-and-drop user interface components, built-in behaviors that let you easily add ActionScript to your document, and special effects that you can add to media objects.
When you have finished authoring your Flash document, you publish it using the File > Publish command. This creates a compressed version of your file with the extension .swf (SWF). You can then use Flash Player to play the SWF file in a web browser or as a stand-alone application.
Creating a simple Flash document
To illustrate the basic steps of creating any FLA document, this tutorial guides you through the process in a simple tutorial. This short tutorial is just a sample of the Flash workflow. The first step is to create a new document in Flash.
- Choose File > New.
- In the New Document dialog box, Flash File (ActionScript 3.0) is selected by default. Click OK.
In the Property inspector, located by default at the bottom of the workspace, the Size button displays the current Stage size setting as 550 x 400 pixels.
The Background color swatch is set to white. You can change the color of the Stage by clicking the swatch and selecting a different color.
(+) view larger
Figure 1: The Property inspector, showing the Stage size and background color.
- Choose File > Save.
- Choose a location for the file on your hard disk, name the file SimpleFlash.fla, and then click Save. Remember this location, 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 document, you are ready to add some artwork to the document.
- Select the Oval tool from the Tools panel.
Figure 2: The Oval tool in the Tools panel.
- Select the No Color option from the Stroke Color Picker.
Figure 3: Selecting 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. Make sure the fill color contrasts well with the Stage color. In this example, we chose a blue fill color with a red Stage color.
- With the Oval tool still selected, draw a circle on the Stage by Shift-dragging on the Stage. Holding the Shift key constrains the Oval tool to a circle.
Figure 4: The circle shape drawn on the Stage.
