Flash 3.0: Introduction

Flash Basics

Flash is a vector graphics editor and an animation and authoring tool used for creating animation and interactivity for web pages. The Flash authoring environment consists of:

Drawing tools you use to create graphics.   The Stage, where you create and view individual frames from a movie.

Commands and controls to manipulate graphics, control playback, and otherwise facilitate making movies. The Timeline, where you define the movie over time.

Controlling the Stage

The Stage is what you see when you watch a Flash movie.

The Stage controls the pixel dimensions of the final movie. The default movie size is 550 pixels by 400 pixels. The minimum size is 18 pixels by 18 pixels; the maximum is 2880 pixels by 2880 pixels. A movie can contain scenes of only one size, and all frames must be the same size as the scene.

Optionally, you can set the Stage size to equal the number of inches or pixels that enclose all objects in the scene; or you can set the scene size to the maximum print area available. This area is determined by the paper size currently selected in the Page Setup dialog box, minus the current margins.

To change the size of the active movie:

Choose Modify > Movie and choose one of the following options:

1- Enter values in Width and Height to specify the size in pixels.
2- Set stage size so that there is an equal amount of space around the content by choosing Match Contents.
3- Set stage size so it matches maximum available print area by choosing Match Printer.

Movie Properties dialog box

The Modify > Movie command opens the Movie Properties dialog box. Use the options in this dialog box to change settings for the current Flash movie.

Frame Rate Controls how quickly the frames of the current movie are displayed when playing back an animation. The rate is specified in frames per second (fps). If you specify a frame rate of 10 fps, each frame of the animation is displayed on the screen for 1/10 of a second, and a 100-frame animation plays for 10 seconds. Dimensions Controls the size of the Stage and the output frame size of all the frames in the movie. Specify any size from .25 inches by .25 inches to 40 inches by 40 inches. Match Printer Scales your movie so that it fits exactly on the paper of the current printer, minus the space allocated for the margins. Match Contents Scales your movie to the smallest size that completely encloses the contents of every scene. Grid Shows or hides the drawing grid. You can set grid spacing by entering a value into the Spacing box. Colors Specifies a grid color or background color for the scenes of your movie. Ruler Units Sets the default units for this movie. Ruler Units affects both the display of the rulers, and how numbers in dialog boxes initially appear, for example, movie size and grid spacing. The default is inches.

Shapes, groups, and symbols

Shapes, groups, and symbols are the main visual objects you work with as you create a Flash movie.

When you use one of the drawing tools, such as the pencil tool, you create a single element on the Stage.

When you have created several shapes, you can group them together to work with them as a single object.

When you create something you want to reuse in the movie, make it into a symbol. Flash stores each symbol in a movie only once, regardless of how many times it is used. A symbol can include shapes, groups, and even other symbols. Symbols can also incorporate animations and interactions.

Using the Timeline

Use the Timeline to define the contents of the movie over time. The numbers across the top of the Timeline show the number of frames. Frames represent a point in time when the movie can change. You can define the number of frames per second.

The rows in the Timeline correspond to layers. Layers help you organize different parts of a movie such as the background and foreground elements. Each animated shape, group, or symbol requires its own layer.

The Timeline header shows the frame numbers of the animation. The downward pointing arrow is the current frame pointer. Two side-pointing arrows, onion skin range markers, appear when onion skinning is turned on. To go to a new frame in the animation, click in the Timeline header or drag the current frame pointer to the desired position. To stop an animation and deselect any selected frames, click in the Timeline header.

Using layers

A newly created Flash movie contains a single layer. Add more layers to help organize the movie and separate elements for animation. Choose Insert > Layer to create new layers. Each row in the Timeline corresponds to a separate layer in the current movie.

By using layers, you can control content in the following ways:

-Place elements on separate layers to change them more easily and make logical groupings.
-Place the background on one layer and each of the animated objects on different layers. Place each element you want to animate on a different layer. Flash can only tween one group or symbol on a layer.
-Create motion path layers to define the path that a tweened animation should follow.
-Create a mask layer to define which parts of another layer are visible.
-Lock layers to prevent any accidental changes once you have finished working on the content.
-Hide a layer to focus on the content of other layers, or hide all layers but one.

It is very important to know which layer you are working on. Flash adds all new elements to the current layer. Click the name of a layer to make it the current layer.Selecting an object, does not make the object's layer the current layer.

When you select an object, Flash displays a black dot next to its layer. In the illustration to the right, the eyes layer is the current layer, even though an object on the mouth layer is selected. If you were to draw something on the Stage, it would be placed in the Moving Planets layer .A crossed-out eye icon indicates a hidden layer. Hidden layers are not displayed as part of the page. Use hidden layers to hide guide layers or to unclutter a scene while you work on elements in the current layer. A lock icon indicates a locked layer. The contents of a locked layer can't be changed. Use Lock to lock an imported bitmap image into the background or to prevent changes to certain elements of a scene. A hand icon indicates a normal layer. Objects on a normal layer can be edited. Choose Normal to unlock a locked layer or to make a specific hidden layer visible again. A pencil icon indicates the current layer. Flash places all new objects on the current layer. Most drawing and pasting affects only the current layer.

Click the Layer icon to open the pop-up menu for each layer. The layer icon changes to a pencil to indicate the current layer. The layer icon is a hand for normal layers. Use the Layer pop-up menu to create, rename, or change settings for the current layer.

Changing layers

You can manipulate graphic elements on any visible, unlocked layer.

If no layer is designated as the current layer, it is not possible to draw, paste, or place anything on the Stage. Whenever an action produces an unexpected result, make sure that you are working in the appropriate layer.

When there are more layers than can be displayed in the Timeline area, scrolling controls are available to the right of the layer time strips. You also can resize the Timeline and layers.

To help you distinguish layers to which the various elements of a scene belong, use the colored outlines feature from the Layer pop-up menu. This displays all objects in the layer as outlines in the specified color; the bounding boxes of placed bitmap and OLE objects also appear in the specified color.

Using scenes

A scene is a section of a movie. You can divide a Flash movie into scenes to help organize your work and change the order of scenes to quickly rearrange a movie. Use scene names as targets for actions.

Using the Library window

Choose Window > Library to open and close the Library window for the current movie. The Library stores all symbols, bitmaps, and sounds for the current movie. Use the Library to view all the symbols available in the movie, place a new instance of the symbol on the Stage, and edit existing symbols.

Use the Select Unused Media command on the Library pop-up menu to find symbols in the Library that are not used in the movie. Once you located unused symbols, you can delete them to make the movie smaller.

Note: Double-click the symbol name to display the Symbol Properties dialog box.

The Filter buttons let you show or hide symbols, sounds, or bitmaps in the library. The Play button plays the animation or sound for the symbol or sound that is currently displayed in the Preview window. Status shows whether the currently selected symbol is a sound, a bitmap, or a symbol. A symbol also displays information about how many frames it has, if the symbol is a button or has animation, and the zoom percentage of the preview. A sound displays information about the playing time (in seconds) and the amount of memory the sound uses (in kilobytes). The Preview window displays the symbol, bitmap or sound wave for the item that is currently selected in the Library list. List shows the names of all of the symbols, sounds, and bitmaps available in the movie. The current selection is highlighted.

Library pop-up menu: Create Symbol creates an empty symbol and opens the new symbol for editing. Edit opens the symbol currently selected in the list for editing. Delete removes the current symbol. Duplicate copies the current symbol once you enter a new name. Properties opens the Symbol, Bitmap, or Sound Properties dialog box for the current symbol. Select Unused Media to highlight all the symbols in the current library that do not appear in the movie. Use it to locate and remove unused symbols. Update refreshes every instance of the current symbol with any changes that may have been made. Play runs any animation or plays any sound in the current symbol. Antialias turns on antialiasing for the current symbol.

The Libraries menu displays the button and animation libraries included with Flash. These include: Buttons, Graphics, Movieclips. and Sounds. You can also add your own Libraries to the Libraries menu by placing a Flash file in the Libraries directory in the Flash folder.

Using the Inspector window

Use the Inspector window to view and change important information about selected objects. The inspector displays:	-The type of object (shape, symbol, and so on).
-The exact location of the top left corner relative to the top left corner of the Stage in the unit of measure specified in Movie Properties. -The width and height in the current unit of measure specified in Movie Properties. -The symbol name, settings, and actions (if applicable) .

Enter new values in the location or size fields to move or resize a selected object.

If you select multiple objects, the location and size fields display values for a rectangle enclosing all the selected objects.

Controlling movie playback

Use commands on the Control menu, buttons on the Controller, or keyboard commands to control movie playback.

Testing movies

Although Flash can play movies in the authoring environment, some animation and interactive functions do not work unless the movie is exported in its final format. Using commands on the Control menu, you can export the current movie as a Shockwave Flash movie and immediately play the movie in a new window. You can also use this window to test downloading performance.

To test all interactive functions and animation:

Choose Control > Test Movie or Control > Test Scene.

Flash exports the current movie as a Shockwave flash movie, opens it in a new test window, and plays it exactly the same way as the Shockwave plugin or Active X control would. All interactive functions and animation work properly.

While viewing a movie in the test window, commands on the Control menu perform their usual functions.

Test Movie and Test Scene export to real SWF files, not temporary files. The SWF files are a created in the same location as the FLA file. You can copy these files to a web server instead of using the Export Movie command.

When Flash exports with Test Movie or Test Scene, it uses export settings you define with Control > Settings. The Settings dialog box contains the same options as the Export Shockwave Flash dialog box.

Viewing the Stage

View the entire Stage on the screen, or a particular area of your drawing at high magnification, by changing the magnification level. The maximum magnification depends on the resolution of your monitor and the movie size.

Use the techniques illustrated below to magnify or reduce your view of the stage:

To zoom in on a certain element, select the magnify tool in the drawing toolbar and click the element To zoom in on a specific area of your drawing, drag a rectangle with the magnify tool. Flash sets the magnification level so that the specified rectangle fills the window.

Choose a percentage from the Zoom Control pop-up menu. Percentages larger than 100% zoom in. Use Ctrl+Spacebar +Enter to zoom in or Ctrl+Spacebar+Alt +Enter to zoom out.

Use commands on the View menu to adjust your view of the Stage.

100% command Sets the zoom level to 100% so that your drawing appears as close as possible to actual size. This is the same as using the zoom controls on the toolbar.

Show All Sets the zoom level to display the contents of the current frame. If the scene is empty, the entire scene is displayed.

Show Frame Sets the zoom level to display the entire scene.

Work Area Makes the work area that surrounds the frame of your movie visible. The work area is shown as a light gray area. Use the Work Area command when you need to work with parts of your drawing that are partly or completely out of the scene. For example, to have a bird fly onto the screen, you would initially position the bird off-screen in the work area. To see the most Work Area and Stage, choose View > Work Area and View > Show All.

Grids and rulers

The Grid command shows or hides the drawing grid in all scenes. This is the same as turning Show Grid on in the Movie Properties box, accessed by choosing Modify > Movie. You can set grid spacing by choosing Modify > Movie and entering a value into the Grid Spacing box.

Rulers can appear along the top and left sides of the movie. When rulers are displayed, and you move an element into the scene, lines indicating the element's dimensions appear on the rulers.

Regardless of the currently chosen units, you can enter numeric values in any dialog box in any of the recognized measurement units. Simply include the appropriate abbreviation with the entered value (for example, 0.25" or 10 pt).

Drawing

Use Flash drawing tools to create images for your movie. Import Macromedia FreeHand, Adobe Illustrator, and other vector-based graphics, as well as bitmapped images from Adobe Photoshop and other sources.

Drawing in Flash is easy once you understand a few basic concepts such as using the tools, selecting, connecting, and segmenting.

Select the various tools and their modifiers in the drawing toolbar. Depending on the tool selected, the appearance of the toolbar changes, and modifier buttons and pop-up menus appear in the lower half of the toolbar. These tool modifiers define how the selected tool operates. For example, when the pencil tool is selected, you can choose a thickness, color, and style for the lines drawn; and you can specify whether the lines are to be automatically smoothed or straightened.

Groups, text, and bitmaps

Groups, text, and bitmaps have several similarities in Flash. Flash handles each of them as a single object comprised of discrete elements. A group is a collection of elements you have grouped together. You can select and move a group as a single object. In group editing mode, you can edit individual elements within the group. Text is very similar to a group. You can select and move it like a single object, or edit the text. You can also break it apart and convert it to a graphic to create unusual effects. Bitmaps are also single objects that can be broken up into discrete elements. Once you break up a bitmap, you can convert it to a group of vector graphics.

Animation

Create animation by changing the content of the Stage in successive frames. Place each object you animate on a separate layer. Every frame where something on the Stage changes is a keyframe. Use the Timeline to move between frames, create keyframes, and change the current layer.

There are two basic approaches to creating an animation sequence in Flash: frame-by-frame animations, and tweened animations.

Symbols

A symbol is a reusable object that can include all the functions of a Flash movie. A symbol can include multiple frames and layers, just like a scene in a regular movie. Flash stores symbols in the Library. Instances of a symbol appear as separate elements, but each is linked to a master symbol. Changes you make to the master symbol are automatically made to its instances.

There are three behaviors for symbols: graphic, button, and movie clip.

A graphic symbol is like a limited version of a movie within a movie. It has its own Timeline for animation and can contain all the graphic elements of a movie, even other symbols. When the Timeline of the main movie stops, all animated graphic symbols also stop. Interactive controls and sounds do not work in graphic symbols. Graphic symbols are the best choice for still images you want to reuse or animation you want controlled by the main Timeline.

A button symbol has a four-frame Timeline that defines the mouse-up, mouse-down, and mouse-over states of the button. Button symbols automatically respond to standard mouse events and display the appropriate frame content. Place movie clip symbols in the frames of a button Timeline to create animated buttons. You can also assign actions to instances of button symbols.

A movie clip is similar to a graphic symbol, but works as a completely functional, interactive, and self-contained movie that plays independently of the main movie's Timeline. All interactive controls work in a movie clip and all sounds play. A movie clip can even contain other movie clips. Use movie clips when you need a fully functional portion of movie that you can reuse as a symbol instance.

A good example of a movie clip is a navigation control device with animated buttons. Each animated button can include several movie clips showing the button animating in different states. The animated buttons on the navigation device keep animating and continue to function as controllers for the main movie even when the main movie has stopped.

Note: Interactivity and animation in movie clip symbols do not work when you play a movie in the Flash authoring environment.

Every instance of a symbol can also have its own properties, including actions and color effects. See Changing instance properties.

Using symbols in your movies dramatically reduces file size; saving several references to a symbol requires less storage space than saving a complete description of the element for each occurrence. Using symbols can also speed movie playback because a symbol needs to be downloaded to a browser only once.

Although they aren't symbols, sounds and bitmaps are also stored in the Library. If a bitmap is duplicated in a movie, Flash stores the bitmap only once to reduce file size. You can use many clips from a single sound file and Flash stores the sound file only once.

Interactivity

Attaching actions to buttons and frames adds interactivity to Flash movies—including starting to play, jumping to a new frame, displaying a new movie, or going to a new web site.

Attach actions to a frame to make something happen when the movie reaches that frame. Frame actions are useful for creating pauses or for making a movie load a new movie.

Use other symbols and frame actions inside symbols to create more complex interactivity. For example, place a movie clip inside a button to create an animated button.

Sound

Flash offers a number of ways to use sounds. You can make sounds that play continuously, independent of the Timeline, or you can synchronize animation to a sound track. Attach sounds to buttons to make them more responsive. Make sounds fade in and out for a more polished sound track.

There are two types of sounds in Flash, event sounds and stream sounds. An event sound must download completely before it begins playing and continues playing until explicitly stopped. Stream sounds begin playing as soon as enough data for the first few frames has been downloaded and synchronizes the sound to the Timeline for playing on a web site.

Adding sounds to a movie involves creating a layer for the sound, assigning the sound, and setting options in the Sound panel of the Frame Properties dialog box.

The sampling rate and degree of compression significantly affect the quality and size of sounds in exported movies. Control the exported quality and size of individual sounds with the Sound Properties dialog box, or define settings for all sounds in the movie in the Export Shockwave Flash dialog box.

Final production

When you finish making a Flash movie, you have several choices of how to deliver it. The most common form of delivering movies is in the Shockwave Flash format. Use Shockwave Flash movies to play movies in the following ways:

- In Internet browsers such as Netscape and Internet Explorer.
- With the Flash ActiveX control in ActiveX hosts such Director, Authorware, and Microsoft Office.
- In RealPlayer version 5 or later. RealPlayer can play Flash movies with improved streaming sound compression.
- As a type of stand-alone application called a projector.

When you create a movie in Flash, you work with the Flash movie file format (FLA). To distribute the movie, you export it as a Shockwave Flash (SWF) file. If this movie is for the web, you also must create an HTML document that displays the movie in a web browser.

A number of important HTML parameters control how a Flash movie plays in a web browser. By default, a Flash movie begins playing as soon as it opens in a web browser and loops indefinitely; the movie also anti-aliases text and graphics, unless the computer is too slow to keep up with the animation while anti-aliasing. You can change these and other settings with the Aftershock utility included with Flash, or by manually entering the HTML parameters yourself.

Flash can export still images for use in other image-processing and page-layout applications. It can also export movies as AVI or QuickTime videos.

You can also export movies for use with Flash Generator. Generator is a web server application that dynamically adds data—such as stock ticker text or sports scores—to a Flash movie that has been prepared and exported as a template file.

HTML and Scripting Options

Once you've exported a Shockwave Flash movie, you must create an HTML document that activates the movie. There are number of important HTML parameters that control how a Flash Movie plays in a web browser. By default, a Flash movie begins playing as soon as it opens in a web browser and loops indefinitely; it also anti-aliases text and graphics, unless the computer is too slow to keep up with the animation while anti-aliasing. You can change these and other settings with the Aftershock utility included with Flash, or by manually entering the HTML parameters yourself.

Upload your completed HTML document and Shockwave Flash movie to a web server to let others view the movie using any web browser equipped with the Shockwave Flash Player. The player is included with Flash and is also available as a free download from the Macromedia web site.