The Flash Authoring Environment

Open Flash MX and you're in the Flash authoring environment. Your Flash MX authoring environment is an FLA (.fla) file containing all of your movie's assets, while your published movie, or SWF (pronounced swiff) is a compressed product of this environment that you'll embed in HTML for Web playback.

The FLA's application window contains the Stage, the Timeline, the main Menu, the Toolbar, and any open panels such as the Library, Properties panel, Info panel, and so on, depending on which Panel Set Layout you chose the first time you launched Flash. This main window view, shown in Figure 1-1, is where you assemble your movie, so it's also called the Edit Movie window. You edit buttons, Movie Clips, and other Symbols in the Library's Edit Symbol window (Lesson 3) and switch back to the Edit Movie mode to place them on the Stage and Timeline.

Figure 1-1: The Flash authoring environment.

Please note that we've taken some screenshots on a Macintosh and some on a Windows 2000 Professional interface. We've done this throughout this course so you can see that although you may be using one operating system, the Flash application runs about the same on whichever one you're using.

The Stage defines your movie's width, height, playback speed, and background color. You can set these definitions in the Property Inspector panel along with your movie's Publish Settings.

Directly below the Timeline in the application window are shortcut buttons to the Scene and Library panels, and a Zoom control. You can magnify your view of the Stage by either choosing a setting from the Zoom pop-up menu or typing a number in the percentage field. Once you've zoomed in, some areas of the Stage may not be visible. To move the Stage around, click the Hand tool in the Toolbox (or press your keyboard's space bar to temporarily change your cursor to the Hand tool) and you can move the Stage around in the main window.

Flash MX has a standard application menu bar running across the top of the window. The menus (File, Edit, View, Insert, Modify, Text, Control, Window, and Help) and their items complement (and sometimes duplicate) the process of creating, working within, and publishing/exporting your Flash movie.

The Toolbox

Flash panels

The Flash MX panels enable you to edit, organize, and view the objects, colors, text, scenes, and frames (and their behavior) of your movie. You can show or hide panels by collapsing them, group panels together as you like, resize panels as you work, or rearrange them any way you want and save and name your layout in the Windows menu. Most of the Panels also have a pop-up menu of additional options and settings.

We discuss the individual panels we'll be using in greater detail as we work through the rest of the lessons.

the Timeline

The Timeline is the most important element of Flash MX because it controls the sequence and order of what is visible on the Stage and, therefore, in your finished movie. Like a film, the Timeline is comprised of individual frames, from left to right beginning with Frame 1. A Flash movie's playback is measured by the number of frames played per second, and the Timeline, shown in Figure 1-3, controls the pace of the movie by moving the playhead (a red highlight and vertical line indicating the current frame) through the frames.

Figure 1-3: The Flash Timeline.

Flash allows you to move the Timeline and use it as a floating panel, or to dock it on any side of the Stage. To move the Timeline, click in the gray area above Layer 1, drag the Timeline to the side or bottom of the Stage, and then release it.

Layers

The Timeline is also divided from top to bottom into layers, beginning with Layer 1. The layers of a Flash movie are like clear sheets of film you can stack and rearrange to produce different spatial effects and visual depth. For instance, a large image on a top layer obscures any smaller images on the bottom layers, shown in Figure 1-4.

Figure 1-4: Flash Layers can be stacked.

By rearranging the stacking order of the layers, you can produce different perspectives, shown in Figure 1-5.

Figure 1-5: You can also rearrange layers to produce different perspectives.

To change the stacking order of layers, click and drag a layer up or down the list and drop it where you want it. You can organize and group your layers into folders by clicking the Folder icon, naming the folder whatever you want to, and dragging and dropping a layer into the folder.

After placing an object on a layer on the Stage, you can control its appearance and behavior by manipulating its position on the Stage in coordination with a frame in the Timeline. This process is the basis of animation in Flash. You find out more about this later in this course.

You can add or create a new layer by selecting Insert > Layer or by clicking the Insert Layer button at the bottom of the Timeline. To rename a layer, just double-click the layer's name and type in a new one, or choose Modify > Layer to access the Layers Properties dialog box, shown in Figure 1-6, and type a new name into the Name field. Other settings in the Layer Properties dialog box enable you to change the layer's outline color, change the layer's height in the Timeline, or set the type of layer as normal, guided, or masked. You also can access this dialog box from the Timeline by double-clicking the layer icon to the left of the layer name.

Figure 1-6: The Layer Properties dialog box.

There are several ways to delete a layer:

While working in one layer, you may want to lock all of the other layers to avoid inadvertently editing the wrong layer. To do this, Option+click (Mac) or Alt+click (Windows) the bullet in the Lock column of your current layer. To unlock all of the other layers, simply Option+click or Alt+click the Lock column bullet again.

You can lock a layer by clicking the bullet in its Lock column. A lock icon appears in place of the bullet, and the layer is uneditable. Clicking the lock icon unlocks the layer; a bullet replaces the lock icon to signify an editable layer. You can also lock and unlock all the layers by clicking directly on the Lock icon (at the top of the Lock column, above the topmost layer).

In the bar above the top layer are two other icons: an Eye and an Outline of a box. The Eye icon displays or hides layers, and the Outline icon displays a layer's content in outline form. These two icons control layers in the same ways as clicking the Lock icon

Scenes

Continuing on with the movie theme, Flash brings you Scenes. Scenes are ways to break up your Flash movie into sequential sections. For example, you can make a short animation and place it in a scene for use as a splash screen. Each scene has its own Timeline and Stage, and you can add, delete, duplicate, or access scenes, or change a scene's name and playback order, in the Scene panel. To launch the Scene panel, shown in Figure 1-7, select Modify > Scene or Window > Scene. Or to quickly jump between scenes, click the Scene icon by the Zoom field under the Timeline.

Figure 1-7: The Scenes Panel.

To rearrange the playback order of scenes, click and drag a scene's name up or down the list in the Scene panel. To rename a scene, double-click the scene's name and type in the new name. And to duplicate a scene, choose a scene by its name and click the Scene panel's duplicate icon.

The Library

The Flash Library, shown in Figure 1-8, stores and organizes all of your movie's symbols and sounds, as well as any imported files. When you create a new symbol or import a graphic or sound, these items are automatically stored in the Library for reuse within your Flash movie. Library items are represented by icons that indicate their file type, and a thumbnail view of the item itself is shown in the Library window. Items can be put into folders, which you can name and organize by clicking and dragging the icons up and down in the Library. To create a new folder in the Library window, click the New Folder button at the bottom of the window. You click and drag items to move them from folder to folder.

Figure 1-8: Your Flash movie's Library.

The Library window also contains columns that enable you to sort your items by name, type, modification date, usage number, or linkage status by clicking the column head. Finally, the Library's Options pop-up menu allows you to modify items in a variety of ways.

To use a Symbol in your movie, drag it from the Library's display window and drop it on the Stage. We'll explore the use of Symbols in more detail in Lesson 3.

You can also open and use the Libraries of other Flash movies in your current movie, allowing you access to another movie's previously created or imported files. Do this by selecting File > Open as Library or File > Open as Shared Library.

Go ahead and take a look at Flash MX's built-in Libraries for sounds, buttons, and other items available by selecting Window > Common Libraries. Again, to use an item from any Library, simply drag its thumbnail image from the Library's window and drop it on the Stage.

Vector Graphics and Import Graphic Files

Vector graphics, the kind of graphics created by the Flash draw and paint tools, are created of lines, curves, and fills -- mathematical formulas easily rendered by computers. Bitmap graphics, like those in photographs or files made in Photoshop, are made of tiny dots called pixels. Vector graphics can be scaled to any size without losing their clean, sharp resolution (their image integrity). Bitmap graphics, because they are made of pixels, lose their image integrity when scaled or transformed any way other than reducing in size.

You can import a variety of image files into Flash: bitmaps -- JPGs or JPEGs, GIFs, PNGs, PICTs, and TIFFs, to name a few. To import an image file to the Stage, choose File > Import or use Command+R or Ctrl +R. To import an image file to the Library, choose File > Import to Library. The Import dialog box is shown in Figure 1-9.

Figure 1-9: The Import dialog box.

moving on

Now that you know your way around the Flash authoring environment, let's get to our next lesson, Lesson 2. We'll jump straight into learning the most exciting feature of Flash: animation. Before you move on be sure to do the assignment and take the quiz. 

Assignment: Work with properties

This assignment will provide you with three tasks to help you learn how to work in Flash's authoring environment, your Flash movie, or .FLA.

To change your movie's appearance, you edit your movie's properties in the Properties panel, which by default, should be open and visible at the bottom of your Stage. In the future, you'll note that this Properties panel changes depending on what you have selected on the Stage. If you have nothing selected, the default view of the Properties panel is the movie's Properties panel. To access the Properties panel, shown in Figure 1-10, from the main Menu, choose Window > Properties, or press Command+F3 or Control+F3.

Figure 1-10: Your Movie's Properties Panel.

1. Change the Stage's dimensions to 800 x 600 by entering values in the Width and Height fields. (The default movie size is 550 x 400 pixels.)
   
2. Change the number in the Frame Rate field to 15. For Web animation, 12 fps (frames per second) usually works best.
   
3. Select black (#000000) as a new background color from the Background pop-up menu. The default color is white.
   
4. Click the button next to Publish, and check Flash on the Formats tab.
   
5. Choose the Flash tab, and select Flash Player 6 from the Version menu. Click OK.

Create a custom Panel Layout:

1. Select Window > Panel Sets, and choose Default Layout.
   
2. Rearrange the Panels to best suit your working style, or choose one of the Designer or Developer layouts.
   
3. Save your layout by choosing Window > Save Panel Layout (you'll give it a name the first time you save it).

Draw a perfect sphere and fill it with a color gradient:

1. Select the Oval tool from the Toolbox.
   
2. In the Colors section of the Toolbox, choose a stroke color from the Stroke Color tool by clicking the paint chip pop-up menu and then clicking a color.
   
3. From the Fill Color tool directly beneath (look for the Paint Bucket icon), choose one of the white, red, green, or blue gradients.
   
4. Move your cursor to the Stage, and press the Option (Mac) or Alt (Win) key. Click and drag your mouse to draw the sphere (you'll see a little circle next to your cursor indicating you are drawing a perfect shape). Release your mouse and the key you're holding down, and you have a perfectly round sphere shape.
   
5. With the Arrow tool, marquise-select (click and drag) your new sphere and press the F8 key on your keyboard, or choose Insert > Convert to Symbol. Enter a name for your sphere in the Convert to Symbol dialog box. Choose Movie Clip for Behavior, and click OK.

Now you have a Symbol in your Library ready to animate in Lesson 2.

Quiz

Question 1
Flash automatically stores imported image files in the ______.

A) Panels
B) Stage
C) Library
D) Scenes

Question 2
The Flash Timeline consists of what elements that are fundamental to the process of animation?

A) Layers
B) Scenes
C) Frames
D) Bitmaps

Question 3
What's the purpose of the stacking order of Layers?

A) To store and organize your imported art and symbols
B) To customize your panel sets
C) To create vector graphics
D) To store and organize objects on the stage

Question 4
What's the difference between a SWF file and an FLA file?

A) One is vector and one is bitmap.
B) One is the authoring file and one is for playback on the Web.
C) One is for Layers and one is for Frames.
D) One is on the Stage and one is in the Library.

Question 5
Playback of a Flash movie is measured by the number of ___________.

A) frames played per second
B) objects in the Library
C) Layers in your movie
D) times you publish your movie

Question 6
Scenes are helpful because they ___________________.

A) optimize and compress a movie
B) can be saved as a custom layout
C) break up your Flash movie into sequential sections
D) are stored in the Library for reuse

Question 7
Why are vector graphics better for Web playback? (Check all that apply.)