Adobe Flash can seem like a complex program to learn. One reason for this seeming complexity is that you can use it for so many different things, such as cartoon animations, media players, and sophisticated software. This tutorial is suitable for you if you’re opening Flash for the first time. It shows you some of the fundamental aspects of the program and how to get started using them to build a real project. You don’t need to know anything about Flash or animation to complete this tutorial; in fact, you’ll discover how easy it is to start using Flash to add elements to your web pages.
This is Part 1 of a three-part article on how to build a simple animated banner in Flash and add it to a web page using Adobe Dreamweaver. You’ll learn how to create a file and modify its settings, import and add graphics to the Stage from the library, and create layers in Part 1. In Parts 2 and 3 you’ll add an animation and create a button that opens a browser window. Then you’ll specify publish settings and add the banner to a web page.

Note: This article uses Adobe® Flash® CS4 Professional. If you still use Flash CS3 and not Flash CS4 Professional, please read this article. If you’re still using Flash 8, you can read this earlier version of this article. And if you’re still using Flash MX 2004, you can read this even earlier version of the article.

Requirements
To complete this article, you will need the following software and files:

Adobe Flash CS4 Professional
Try
Buy

Sample files:
gnome1.zip
files for part 1 and 2

Prerequisite knowledge:
None whatsoever.

Table of Contents

  • Creating a document and changing its properties
  • Importing graphics
  • Using layers and the timeline
  • Testing your progress

Creating a new document

You can create all kinds of different elements for the web or for CD-ROMs and devices using Flash. First, you create a file in the Flash authoring tool, which you use to output SWF files. SWF files are the files that you can put online when you embed them in a web page. The Adobe Flash Player plug-in then displays the SWF file, so your website visitors can view or interact with the content.

Your SWF file can contain video, MP3 sound, animations, images, data, and so forth. The benefit of using an SWF file over other formats is that the Flash Player plug-in is incredibly common. Let’s get started building a banner:

1. Open the Flash CS4 Professional application.

By default, Flash displays the Start Page (see Figure 1), which enables you to select a recently edited document, create new kinds of documents (Flash files, ActionScript files, and so on), or create a new document using a prebuilt template.

Note: Click to enlarge all images in this article.

Figure 1. By default, Flash displays the Start Page when it is launched.

Figure 1. By default, Flash displays the Start Page when it is launched.

2. Click Flash File in the Create New column on the Start Page to create a blank document. If Flash doesn’t display the Start Page (the feature might have been disabled earlier if you share a computer), you can select File > New from the main menu to create a new document. Make sure the General tab is active, select Flash document, and click OK.

Tip: Your recent Flash documents will display in the Open a Recent Item column, which can save you from searching your hard drive for Flash files.

3. Select File > Save As from the main menu. Name the new file banner.fla and click Save when you’re done. Flash saves editable documents as FLA files. From the FLA document, you export (or compile) SWF files that you can embed in an HTML page. Flash Player, installed on most computers, plays the SWF files that you export from Flash.

It’s a good idea to save a new document when you start working with it (and often thereafter) so you don’t lose any of your hard work. After you finish saving the file, proceed to the following exercise where you will change the document’s properties.

Changing document properties

At this point you’re looking at a blank canvas surrounded by many controls (see Figure 2). The large white square is called the Stage, and it’s where you place assets you want to display in the SWF file, such as images, buttons, text, or animations. The Stage and panels are commonly called the Flash workspace or authoring environment.

Figure 2. The Flash authoring environment includes a Stage where you can place and manipulate assets.

Figure 2. The Flash authoring environment includes a Stage where you can place and manipulate assets.

Around the Stage you see a variety of panels. The panel on the left is called the Tools panel (see Figure 3), and is either arranged in a single column or a double column.

Tip: Click the double arrow at the top of the panel to toggle the Tools panel between a single column and a double column.

This panel includes tools you can use to create and modify documents, such as tools you use to draw and make selections.

Figure 3. Use the Tools panel to draw and make selections. You use the Selection tool (the black arrow, selected) to make selections in these tutorials.

Figure 3. Use the Tools panel to draw and make selections. You use the Selection tool (the black arrow, selected) to make selections in these tutorials.

A panel on the right side of the Flash application is titled Properties (select Window > Properties if you don’t see the panel). This panel is called the Property inspector (see Figure 4), and enables you to change various properties of whatever is currently selected in your document (such as an image or asset, text, or a frame) or set properties for the entire SWF file (such as the frame rate, Stage color, or dimensions). If you don’t have any objects or frames selected, the Property inspector enables you to modify properties for the document itself.

1. Open the Property inspector (select Window > Properties) and click the button next to the text that says Size to open the Document Properties dialog box.

Note: Make sure you don’t have a frame selected. Click the Stage if you don’t see this button.

Figure 4. Click this button in the Property inspector to open the Document Properties dialog box. You can then change the size and color of the Stage.

Figure 4. Click this button in the Property inspector to open the Document Properties dialog box. You can then change the size and color of the Stage.

The button displays the current dimensions of the FLA file (550 x 400 pixels). By default the Stage size in a new Flash document is 550 pixels wide by 400 pixels high. When you click this button, you open the Document Properties dialog where you can change several document-wide properties (such as the Stage dimensions, color, and document frame rate).

2. In the Document Properties dialog box, type 160 into the Width text box and 600 into the Height text box.

When you type new values into these text boxes, you resize the dimensions of your FLA document. There is a reason that you need to use these specific dimensions. Because you’re creating a banner, you should use a standard banner size. In this tutorial, you’re creating a “wide skyscraper.” For a list of standardized banner sizes, check out the Interactive Advertising Bureau’s page on Interactive Marketing Units.

Tip: You can also create banners from an Adobe template by selecting File > New from the main menu. Select the Templates tab and choose one of the templates in the Advertising category.

3. Click OK when you finish entering new dimensions in the Document Properties dialog box to return to the authoring environment.

When you return to the authoring environment, notice how the dimensions of your document change. You can also change the current document’s background color and frame rate directly in the Property inspector, without going to the Document Properties dialog box. You’ll find information about frame rate in Part 2 of this tutorial.

Remember to save your work (File > Save) before you continue.

Importing graphics into a document

When you work with Flash, you’ll often import assets into a document. Perhaps you have a company logo or graphics that a designer has provided for your work. You can import a variety of assets into Flash, including sound, video, bitmap images, and other graphic formats (such as PNG, JPEG, AI, and PSD).

Imported graphics, whether you import them to the Stage or to the Library, are stored in the document’s library. The library stores both the assets that you import into the document and symbols that you create within Flash. A symbol is a vector graphic, button, font, component, or movie clip that you create once and can reuse multiple times as instances. For more information on symbols and instances in Flash, see these sections of Flash Help.

So you don’t have to draw your own graphics in Flash: You can import an image of a garden variety gnome from the tutorial source files. Before you proceed, make sure that you download the source files for this article (if you haven’t done so already) and extract the images to the same directory as your banner.fla document.

In the following exercise, you will select the frame into which you want to import the asset on the Timeline. Then you can import the image onto that frame, which appears on the Stage.

1. Select frame 1 on the Timeline, and then select File > Import > Import to Stage to import an image into the current document on the selected frame. You’ll see the Import dialog box (see Figure 5), which enables you to browse to the file you want to import.

Figure 5. Browse to the folder on your hard drive that contains an Adobe Photoshop CS4 file called gnome.psd to import into your Flash document.

Figure 5. Browse to the folder on your hard drive that contains an Adobe Photoshop CS4 file called gnome.psd to import into your Flash document.

2. Navigate to the directory where you extracted the support files, select the gnome.psd file, and click Open (Windows) or Import (Macintosh).

The image imports onto the Stage on the frame that you selected, and is also stored in the document’s library. Note that you do not need Photoshop to import this file.

Note: You can drag assets from the library onto the Stage several times if you want to see several instances of the artwork. Your file size doesn’t increase if you use several instances on the Stage. The SWF file only stores the information of the original symbol or asset from the library and treats each instance like a duplicate.

3. Select Window > Library to open the Library panel.

You’ll see the image you just imported, gnome.psd, in the document’s library. You can drag the area above the Search box to resize the preview.

4. Click the Selection tool and select the instance on the Stage.

If you look at the Property inspector you’ll notice that you can modify the graphic’s width and height, as well as the image’s X and Y position (also called coordinates) on the Stage. When you select an object on the Stage, you can see and modify the current coordinates in the Property inspector (see Figure 6).

Figure 6. The X and Y coordinates match the registration point, which is the upper left corner of this random movie clip symbol.

Figure 6. The X and Y coordinates match the registration point, which is the upper left corner of this random movie clip symbol.

7. With the graphic instance (of the gnome) still selected, type 0 into the X text box and type 0 into the Y text box if they aren’t already set to 0, as shown in Figure 6.

Setting new coordinates moves the upper left corner of the image to the upper left corner of the Stage. You can drag the bitmap image around the Stage using the Selection tool instead of changing coordinates in the Property inspector. You should use the Property inspector when you need to set a specific position for an object, as you did in this step.

Remember to save the document before you proceed to the next exercise.

Note: You can also import sound files into your FLA documents. This isn’t covered in this tutorial, but you can find out more information if you do a search on “importing sounds” in the Help panel (F1).

Introducing layers and the timeline

The Timeline is below the Stage in the default workspace when you first open Flash. The Timeline (see Figure 7) helps you organize assets in your document, and also controls a document’s content over time. To help control content, timelines in Flash contain layers and frames.

Figure 7: The Timeline lets you organize and control content using layers and frames. This example of a timeline contains many layers and frames that include static assets and forms of animation across frames (that represent time).

Figure 7: The Timeline lets you organize and control content using layers and frames. This example of a timeline contains many layers and frames that include static assets and forms of animation across frames (that represent time).

Flash documents can play over a length of time, like videos or sound, which is measured using frames. Layers are like transparencies that stack on top of one another; each layer can contain images, text, sound, code, or animations that appear on the Stage. You’ll learn more about frames and timelines in Part 2 of this tutorial.

The FLA file you’re working on has one layer (Layer 1) with contents on a single frame (Frame 1). This is the default way that a Flash document opens, with a default new layer and one blank frame.

In this exercise, you lock and rename Layer 1. Often you’ll want to place objects in a particular position on the Stage. To help you keep those objects in place, Flash enables you to lock layers so you cannot, for example, select the items of a layer on the Stage and accidentally move or alter them.

1. Select Layer 1 in the Timeline and click the dot below the lock icon, as shown in Figure 8.

Figure 8. Lock a layer so its contents aren't accidentally moved or deleted from the Stage. You can also prevent inadvertently adding other assets to that layer by drawing or pasting on the Stage. Note that you can still manipulate frames in the Timeline on that layer, even if it’s locked.

Figure 8. Lock a layer so its contents aren't accidentally moved or deleted from the Stage. You can also prevent inadvertently adding other assets to that layer by drawing or pasting on the Stage. Note that you can still manipulate frames in the Timeline on that layer, even if it’s locked.

With your only layer locked, you need to add new layers before you can add any other objects to the Stage. You cannot add new objects to a locked layer.

2. Select the Selection tool in the Tools panel and double-click the name Layer 1. When you double-click a layer name, you can modify the name.

3. Type background into the layer name to rename the layer, and save your file.

When you start building projects with many layers, layer names like Layer 1 and Layer 14 don’t help you determine what’s on that layer. Giving layers a descriptive name is a good practice to adopt.

Tip: You can also organize layers into layer folders. For more information, do a search on “layer folders” in the Help panel (F1).

Creating a new layer

In just about any Flash project where you use imported graphics and animation, you’ll need to create at least a few layers. You need to separate certain elements onto their own layers, particularly when you start to animate objects. You can also stack graphics on top of each other, and even create a sense of depth or overlapping by using multiple layers.

1. Select the background layer on the Timeline and click the New Layer button to create a new, empty layer.

Figure 9. Click New Layer to insert a new layer above the currently selected layer.

Figure 9. Click New Layer to insert a new layer above the currently selected layer.

2. Double-click the name of the new layer so the layer’s name becomes editable.

3. Type animation to rename the new layer.

Graphics on the Stage stack according to the layers on the Timeline. For example, anything you put on the animation layer will appear above the image on the background layer. You will add animation to this second layer in Part 2 of this tutorial.

Be sure to save your progress before moving on.

Tip: If you need to reorganize your layers, you can use the Selection tool to select and drag a layer above or below other layers on the Timeline.

Importing into the library

In an earlier exercise, you imported the gnome.psd image directly onto the Stage. You can also import assets directly into the library instead of onto the Stage, and then drag the asset onto a selected layer on the Stage. You use this technique to import an Illustrator file in the following exercise. Note that you do not need Illustrator installed in order to import this file.

1. Select File > Import > Import to Library.

A dialog box appears where you can select a file from your hard drive. Find the folder of this tutorial’s source files on your hard drive.

2. Select join_us.ai in the tutorial’s source files and click Open (Windows) or Import to Library (Macintosh). Another window opens where you can control how the illustration imports.

3. Make sure all of the checkboxes are selected (as shown in Figure 10), and click OK to import the AI file.

Figure 10. Make sure all of the checkboxes are selected, so you import all parts of this file.

Figure 10. Make sure all of the checkboxes are selected, so you import all parts of this file.

Tip: In some situations, you might want to control how the illustration imports, such as by not importing certain elements of that file. To do so, you can deselect layers or folders that you do not want to import into Flash.

The illustration imports into the library, where you can manipulate it further, or drag it onto the Stage when ready. A graphic symbol is also created at this time (see Figure 11).

4. Open the Library panel (Window > Library).

The assets for the illustration you just imported to the library are contained in a new folder (see Figure 11), and Flash creates a graphic symbol of the illustration called join_us.ai.

Figure 11. Assets are imported into the library as a graphic symbol, and a folder of vector assets used within that symbol.

Figure 11. Assets are imported into the library as a graphic symbol, and a folder of vector assets used within that symbol.

5. Double-click the name join_us.ai in the Library (assuming it’s the first asset you imported into the Library), and type join_us to rename the graphic symbol.

6. Click the Selection tool in the Tools panel.

7. Select frame 1 of the animation layer, and then select the join_us graphic symbol in the library and drag it onto the Stage. Move the illustration on the Stage to just above the gnome’s head in the image, as shown in Figure 11.

Figure 12. The illustration imports to the library as a graphic symbol, and then you drag the graphic symbol onto frame 1 of the animation layer. Adjust the image until it approximately matches this figure.

Figure 12. The illustration imports to the library as a graphic symbol, and then you drag the graphic symbol onto frame 1 of the animation layer. Adjust the image until it approximately matches this figure.

When you drag something onto the Stage, you will see it in the SWF file when the file plays. You’ll test this in the following exercise.

8. Select File > Save to save your document before moving on.

Test your progress

To finish, you can test your document in Flash. This tests the SWF file in Flash Player. For example, you can see how your code works in Flash Player, see how animations play on the Timeline, test user interactivity, and more. It’s much faster than uploading your work to a server each time you want to see the SWF file in action:

1. Select Control > Test Movie from the main menu.

The test environment opens and plays your document in Flash Player. You can now see the compiled SWF file version of your FLA document. You will often use the Test Movie command to view your progress when you work on a FLA file.

2. Click the SWF file’s close button to return to the authoring environment.

3. Select File > Publish > Publish Preview > HTML

A browser window opens with your SWF file embedded in it.

Note: You can publish a document without previewing it. Select File > Publish to do so.

4. Find the folder on your hard drive where you saved banner.fla at the beginning of this tutorial.

When you open this folder, you should see an additional SWF file called banner.swf. This is the compiled version of the banner.fla document. When you want to create a finished version of your file to upload, you’ll want to make additional publish settings in Flash before you compile your SWF file. You’ll look at these settings in Part 3 of this tutorial.

To see the completed and published file for this part of the tutorial, find banner_pt1.fla in the folder of source files for this tutorial.

Where to go from here

In a very short period of time, you have set up a FLA document, imported and arranged assets in a FLA file, created and modified layers, and tested a SWF file. You’re on your way to creating a banner in Flash so you can embed it in an HTML page using Dreamweaver. In Part 2 and Part 3 of this tutorial, you will create and modify symbols, create an animation, add some simple ActionScript for a button that opens a web page, and add the banner to a website. Proceed to part 2 here!

Note: I’m currently formatting part 3 for this site, so if you have found this page from Google or something, sit tight…