1. Home
2. Design Center
3. Tutorials

Design Center Tutorial

Creating a simple Flash document

Adobe

 

Adobe® Flash® CS3 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 are called applications, even though they might only be a basic animation. You can make media-rich Flash applications by including pictures, sound, video, and special effects.

Flash is extremely well suited to creating content for delivery over the Internet because its files are very small. Flash achieves this through 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.

Requirements

To follow along with this article, you will need the following software:

Flash CS3 Professional

• Try (Professional)
• Buy (Professional)

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 four main parts:

• The Stage is where your graphics, videos, buttons, and so on appear during playback. The Stage is described further in.
• 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.

1. Choose File > New.
2. 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.

3. Choose File > Save.
4. 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.

    

   

   Figure 2: The Oval tool in the Tools panel.

2. Select the No Color option from the Stroke Color Picker.

    

   

   Figure 3: Selecting the No Color option in the Stroke Color Picker.

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. Holding the Shift key constrains the Oval tool to a circle.

    

   

   Figure 4: The circle shape drawn on the Stage.

Creating a symbol and adding animation

You can turn your new artwork into a reusable asset by converting it to a Flash symbol. A symbol is a media asset that can be reused anywhere in your Flash document without the need to re-create it.

1. Click the Selection tool in the Tools panel.

    

   

   Figure 5: The Tools panel with the Selection tool selected.

2. Click the circle on the Stage to select it. A crosshatch pattern appears over the circle.
3. With the circle still selected, choose Modify > Convert to Symbol.
4. In the Convert to Symbol dialog box, type my_circle into the Name text box. Notice that the default behavior is set to Movie Clip.
5. 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.
6. 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.

    

   

   Figure 6: The circle shape moved to the left of the Stage area.

2. Click Frame 20 of Layer 1 in the Timeline.

    

   

   Figure 7: Selecting Frame 20 of Layer 1 in the Timeline.

3. With Frame 20 still selected, choose Insert > Timeline > Keyframe. A keyframe is added in Frame 20. A keyframe is a frame where some property of an object is explicitly changed. In this new keyframe, you will change the circle's location.

    

   

   Figure 8: Inserting a keyframe in Frame 20.

4. With Frame 20 still selected in the Timeline, drag the circle to just right of the Stage area.
5. Select Frame 1 of Layer 1 in the Timeline.
6. In the Property inspector (its default location is at the bottom of the Flash application window), choose Motion from the Tween pop-up menu.

    

   

   (+) view larger
   Figure 9: Choosing a motion tween in the Property inspector

   An arrow appears in the Timeline in Layer 1 between Frame 1 and Frame 20.

   

   Figure 10: The Timeline with an arrow indicating a motion tween.

   This step creates a tweened animation of the circle moving from its position in the first keyframe in Frame 1 to its new position in the second keyframe in Frame 20.

7. In the Timeline, drag the red playhead back and forth from frame 1 to frame 20 to preview the animation by scrubbing the Timeline.
8. Choose Control > Test Movie to test the FLA file.
9. Close the Test Movie window.

Publishing your file

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 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 Flash file and view it 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. 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.

    

   

   (+) view larger
   Figure 11: The Flash and HTML options on the Formats tab.

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

    

   

   (+) view larger
   Figure 12: Choosing Flash Only from the Template menu.

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 creates these files when you click Publish.
8. Select the file named SimpleFlash.html.
9. Click Open. Your Flash application displays in the browser window.

Congratulations! You have now completed your first FLA file.

Where to go from here

For more information about working with Flash CS3 Professional, check out the Flash Design Center, Flash Developer Center and Adobe Video Workshop.

About the author