Creating a simple document in Flash CS4 Professional

This article applies to Adobe Flash CS4 Professional. For the latest information—and especially if you are using Flash Professional CS5—please refer to the updated version of this tutorial, Creating your first Flash Professional CS5 document.

Adobe Flash CS4 Professional is an authoring tool that designers and developers use to create presentations, applications, and other content that enables user interaction. Flash projects can include simple animations, video content, complex presentations, applications, and everything in between. In general, individual pieces of content made with Flash Professional are called applications (or SWF applications), even though they might only be a basic animation. You can make media-rich applications by including pictures, sound, video, and special effects.

The SWF format is extremely well suited for delivery over the Internet because its files are very small. This is due to its extensive use of vector graphics. Vector graphics require significantly less memory and storage space than bitmap graphics because they are represented by mathematical formulas instead of large data sets. Bitmap graphics are larger because each individual pixel in the image requires a separate piece of data to represent it.

To build an application in Flash CS4 Professional, you create vector graphics and design elements with the drawing tools, and import additional media elements like audio, video, and images 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 Professional, you work in a document called a FLA file. FLA files have the file extension .fla (FLA). While viewing a FLA file, you'll notice the Flash CS4 Professional user interface (see Figure 1) is divided into five main parts:

• The Stage is where your graphics, videos, buttons, and so on appear during playback.
• The Timeline controls the timing of when elements in the movie appear on the Stage. 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 Tools panel holds the general set of tools used for selecting objects on the stage and drawing vector graphics.
• The Property inspector displays editable information about any selected object.
• The Library panel is where media elements and symbols are stored and organized.

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 CS4 Professional uses ActionScript 3.0 when an ActionScript 3.0 or Adobe AIR file is created, or ActionScript 1.0 and 2.0 when an ActionScript 2.0 file is created.

Flash includes many features that make it powerful but easy to use, such as prebuilt drag-and-drop user interface components, built-in motion effects which you can use to animate elements on the Timeline, and special effects that you can add to media objects.

When you have finished authoring your FLA file, you publish it using the File > Publish command (Shift+F12). 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 FLA file

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 workflow you'll use while authoring in Flash Professional. The first step is to create a new document:

1. Choose File > New.
2. In the New Document dialog box, Flash File (ActionScript 3.0) is selected by default. Click OK.
3. Click the workspace drop-down menu un the upper right of the screen and select the Essentials workspace layout option (see Figure 2).

4. Click the Properties tab in the upper right side of the user interface to view the Stage properties for the file.
5. In the Property inspector, located by default vertically along the right side of the workspace, the Size button displays the current Stage size setting as 550 × 400 pixels (see Figure 3). 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.

6. Choose File > Save.
7. 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 for the document:

1. Select the Oval tool from the Tools panel (see Figure 4).

2. Click the stroke color swatch in the Property inspector and select the No Color option from the Stroke Color Picker (see Figure 5).

3. 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.
4. With the Oval tool still selected, draw a circle on the Stage by Shift-dragging on the Stage (see Figure 6). Holding the Shift key constrains the Oval tool to a circle.

You can turn your new artwork into a reusable asset by converting it to a symbol. A symbol is a media asset that can be reused anywhere in your document without the need to re-create it. Symbols can contain images and animations along with other types of content.

1. Click the Selection tool in the Tools panel (see Figure 7).

2. Click the circle on the Stage to select it. A bounding box selection appears around the circle.
3. With the circle still selected, choose Modify > Convert to Symbol (or press F8) to bring up the Convert to Symbol dialog box (see Figure 8).

   Note: You can also convert a graphic into a symbol by selecting it and dragging it into the Library panel.

4. Click OK. A square bounding box appears around the circle. You have now created a reusable asset, called a symbol, in your document. In this case, you created a movie clip symbol. (For more information about symbols, read the online documentation about them.)

   If the Library panel is not open, choose Window > Library. The new symbol appears in the Library panel.

Animating the circle

Now that you have some artwork in your document, you can make it more interesting by animating it to move across the Stage:

1. Drag the circle to just left of the Stage area (see Figure 9).

2. Right-click the dot (also called the keyframe) on frame 1 of the Timeline and choose the Create Motion Tween option from the menu. Notice that the Timeline is automatically extended to frame 24 and the red marker (current frame indicator or playhead) is located at frame 24 (see Figure 10). This indicates that the timeline is ready for editing at 1 second—that is, at frame 24 when the frame rate is 24 fps. (For more information about the Timeline, read the online documentation about it.)

3. Select the circle on the Stage and drag it to the right of the Stage area. This step just created the tweened animation. Notice the dot (keyframe) which appears at frame 24. Also notice the motion guide line showing the path of motion between frame 1 and frame 24 (see Figure 11).

4. In the Timeline, drag the red playhead back and forth from frame 1 to frame 24 to preview the animation by scrubbing the Timeline.
5. Add a change in direction in the middle of the animation by dragging the playhead to frame 12 and then moving the circle to another location on the screen. Notice the change in the motion guide line and the new dot on the Timeline at frame 10 (see Figure 12). The dots on the Timeline are keyframes which mark where (at what frame) objects change on the screen.

6. Experiment with changing the shape of the motion guide path. Click the Selection tool in the Tools panel and then click a section of the motion guide line and drag it to bend the line shape (see Figure 13).

7. Choose Control > Test Movie to test the FLA file.
8. Close the Test Movie window.

When you finish your FLA file, you are ready to publish it so it can be viewed in a browser. When you publish the file, Flash Professional compresses it into the SWF file format. This is the format that you place in a web page. The Publish command can automatically generate an HTML file with the correct tags in it for you.

To publish the FLA file and view the SWF in a browser:

1. Choose File > Publish Settings.
2. In the Publish Settings dialog box, select the Formats tab and verify that only the Flash and HTML options are selected (see Figure 14). This action causes Flash to publish only the SWF file and an HTML file. The HTML file is used to display the SWF file in a web browser.

3. In the Publish Settings dialog box, select the HTML tab and verify that Flash Only is selected in the Template pop-up menu (see Figure 15). This template creates a simple HTML file that contains only your SWF file when displayed in a browser window.

4. Click OK.
5. Choose File > Publish and open your web browser.
6. Choose File > Open in the web browser.
7. Navigate to the folder where you saved your FLA file. The SimpleFlash.swf and SimpleFlash.html files are there. Flash Professional creates these files when you click Publish.
8. Select the file named SimpleFlash.html.
9. Click Open. Your application displays in the browser window.

Congratulations! You have now completed your first FLA file.

Where to go from here

There are many places you can go to learn more about working with Flash CS4 Professional:

• The Flash Developer Center's Getting Started section outlines where to go next, depending on your interests.
• Adobe TV's Flash channel provides many video tutorials that show you what you can do with Flash.
• Adobe product manager Doug Winnie's article, Introducing Flash CS4 Professional, discusses how some of the biggest features of Flash CS4 Professional can improve your application development workflow.