MICROMEDIA FLASH
Micromedia Flash
The Stage and workspace Like films, Flash movies divide lengths of time into frames. The Stage is where you compose the content for individual frames in the movie, drawing artwork on it directly or arranging imported artwork on it. For more information on frames
Viewing the Stage
You can change your view of the Stage by changing the magnification level or moving the Stage within the Flash work environment. You can also adjust your view of the Stage using the View commands.
Zooming
When the Stage is magnified, you may not be able to see all of it. The Hand tool lets you move the Stage to change the view without having to change the magnification.
To move the Stage view:
Flash comes with rulers and guides that help you draw and lay out objects precisely. You can place guides in a document and snap objects to those guides, or turn on the grid and snap objects to it.
Using the grid
When the grid is displayed in a document, it appears as a set of lines behind the artwork in all scenes. You can snap objects to the grid, and you can modify the grid size and grid line color.
To display or hide the drawing grid:
Choose View > Grid > Show Grid.
To turn snapping to grid lines on or off:
Choose View > Grid > Snap to Grid.
To set grid preferences:
Using guides
You can drag horizontal and vertical guides from the rulers onto the Stage when the rulers are displayed. You can move guides, lock guides, hide guides, and remove guides. You can also snap objects to guides, and change guide color and snap tolerance (how close objects must be to snap to a guide). Draggable guides appear only in the Timeline in which they were created.
Creating a new document Each time you open Flash, the application creates a new file with the FLA extension. You can create additional new Flash documents as you work. To set the size, frame rate, background color, and other properties of a new document, you use the Document Properties dialog box.
To create a new document and set its properties:
Flash lets you set preferences for general application operations, editing operations, and Clipboard operations.
To set preferences:
You can choose keyboard shortcuts in Flash to match the shortcuts you use in other applications, or to streamline your Flash workflow. By default, Flash uses built-in keyboard shortcuts designed for the Flash application. You can also select a built-in keyboard shortcut set from one of several popular graphics applications, including Fireworks, Adobe Illustrator, and Adobe Photoshop. To create a custom keyboard shortcut set, you duplicate an existing set, and then add or remove shortcuts from the new set. You can delete custom shortcut sets.
To select a keyboard shortcut set:
To rename a custom keyboard shortcut set:
To organize a movie thematically, you can use scenes. For example, you might use separate scenes for an introduction, a loading message, and credits.
When you publish a Flash movie that contains more than one scene, the scenes in the movie play back in the order they are listed in the Scene panel in the Flash document. Frames in the movie are numbered consecutively through scenes. For example, if a movie contains two scenes with ten frames each, the frames in Scene 2 are numbered 11-20.
You can add, delete, duplicate, rename, and change the order of scenes.
To display the Scene panel:
Double-click the scene name in the Scene panel and enter the new name.
To duplicate a scene:
Click the Duplicate Scene button in the Scene panel.
To change the order of a scene in the movie:
Drag the scene name to a different location in the Scene panel.
Using the Timeline The Timeline organizes and controls a movie's content over time in layers and frames. Like films, Flash movies divide lengths of time into frames. Layers are like multiple film strips stacked on top of each other, each containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead.
Layers in a document are listed in a column on the left side of the Timeline. Frames contained in each layer appear in a row to the right of the layer name. The Timeline header at the top of the Timeline indicates frame numbers. The playhead indicates the current frame displayed on the Stage.
The Timeline status display at the bottom of the Timeline indicates the selected frame number, the current frame rate, and the elapsed time to the current frame.
Note: When an animation is played, the actual frame rate is displayed; this may differ from the movie frame rate if the computer can't display the animation quickly enough.
You can change the way frames are displayed, as well as display thumbnails of frame content in the Timeline. The Timeline shows where there is animation in a movie, including frame-by-frame animation, tweened animation, and motion paths.
Changing the appearance of the Timeline
By default, the Timeline appears at the top of the main application window, above the Stage. To change its position, you can dock the Timeline to the bottom or either side of the main application window, or display the Timeline as its own window. You can also hide the Timeline.
You can resize the Timeline to change the number of layers and frames that are visible. When there are more layers than can be displayed in the Timeline, you can view additional layers by using the scroll bars on the right side of the Timeline.
To move the Timeline:
Drag from the area above the Timeline header.
Drag the Timeline to the edge of the application window to dock it. Control-drag to prevent the Timeline from docking.
To lengthen or shorten layer name fields:
Drag the bar separating the layer names and the frames portion of the Timeline.
To resize the Timeline, do one of the following:
The playhead moves through the Timeline to indicate the current frame displayed on the Stage. The Timeline header shows the frame numbers of the animation. To display a frame on the Stage, you move the playhead to the frame in the Timeline.
When you're working with a large number of frames that can't all appear in the Timeline at once, you can move the playhead along the Timeline to easily locate the current frame.
To go to a frame:
Click the frame's location in the Timeline header, or drag the playhead to the desired position.
To center the Timeline on the current frame:
Click the Center Frame button at the bottom of the Timeline.
Changing the display of frames in the Timeline You can change the size of frames in the Timeline, and display sequences of frames with tinted cells. You can also include thumbnail previews of frame content in the Timeline. These thumbnails are useful as an overview of the animation, but they require extra screen space.
To change the display of frames in the Timeline:
Frame labels are useful for identifying keyframes in the Timeline and should be used instead of frame numbers when targeting frames in actions such as Go To. If you add or remove frames, the label moves with the frame it was originally attached to, whereas frame numbers can change. Frame labels are included when you publish a document as a Flash movie, so avoid long names to minimize file size.
Frame comments are useful for making notes to yourself and others working on the same document. Frame comments are not exported when you publish a document as a Flash movie, so you can make them as long as you want.
To create a frame label or comment:
Named anchors simplify navigation in Flash movies by letting viewers use the Forward and Back buttons in a browser to jump from frame to frame or scene to scene. Named anchor keyframes are indicated in the Timeline by an anchor icon. If you prefer to have Flash automatically make the first keyframe of each scene a named anchor.
A named anchor keyframe in Scene 1
To make a selected keyframe a named anchor:
Layers are like transparent sheets of acetate stacked on top of each other. Layers help you organize the artwork in your document. You can draw and edit objects on one layer without affecting objects on another layer. Where there is nothing on a layer, you can see through it to the layers below.
To draw, paint, or otherwise modify a layer or folder, you select the layer to make it active. A pencil icon next to a layer or folder name indicates that the layer or folder is active. Only one layer can be active at a time (although more than one layer can be selected at a time).
When you create a new Flash document, it contains one layer. You can add more layers to organize the artwork, animation, and other elements in your document. The number of layers you can create is limited only by your computer's memory, and layers do not increase the file size of your published movie. You can hide, lock, or rearrange layers.
You can also organize and manage layers by creating layer folders and placing layers in them. You can expand or collapse layers in the Timeline without affecting what you see on the Stage. It's a good idea to use separate layers or folders for sound files, actions, frame labels, and frame comments. This helps you find these items quickly when you need to edit them.
In addition, you can use special guide layers to make drawing and editing easier, and mask layers to help you create sophisticated effects.
For an interactive introduction to layers, choose Help > Lessons > Understanding Layers.
Creating layers and layer folders
When you create a new layer or folder, it appears above the selected layer. A newly added layer becomes the active layer.
To create a layer, do one of the following:
As you work, you may want to show or hide layers or folders. A red X next to a the name of layer or folder name indicates that it is hidden. Hidden layers are not preserved when a movie is published.
To help you distinguish which layer objects belong to, you can display all objects on a layer as colored outlines. You can change the outline color used by each layer.
You can change the height of layers in the Timeline in order to display more information (such as sound waveforms) in the Timeline. You can also change the number of layers displayed in the Timeline.
To show or hide a layer or folder, do one of the following:
Editing layers and layer folders
You can rename, copy, and delete layers and folders. You can also lock layers and folders to prevent them from being edited.
By default, new layers are named by the order in which they are created: Layer 1, Layer 2, and so on. You can rename layers to better reflect their contents.
To select a layer or folder, do one of the following:
You can rearrange layers and folders in the Timeline to organize your document.
Layer folders help organize your workflow by letting you place layers in a tree structure. You can expand or collapse a folder to see the layers it contains without affecting which layers are visible on the Stage. Folders can contain both layers and other folders, allowing you to organize layers in much the same way you organize files on your computer.
The layer controls in the Timeline affect all layers within a folder. For example, locking a layer folder locks all layers within that folder.
To move a layer or layer folder into a layer folder:
Drag the layer or layer folder name to the destination layer folder name.
The layer or layer folder appears inside the destination layer folder in the Timeline.
To change the order of layers or folders: Drag one or more layers or folders in the Timeline to the desired position.
To expand or collapse a folder: Click the triangle to the left of the folder name.
To expand or collapse all folders:
Right-click (Windows) or Control-click (Macintosh) and choose Expand All Folders or Collapse All Folders from the context menu.
Using guide layers
For help in aligning objects when drawing, you can create guide layers. You can then align objects on other layers to the objects you create on the guide layers. Guide layers do not appear in a published Flash movie. You can make any layer a guide layer. Guide layers are indicated by a guide icon to the left of the layer name.
Previewing and testing movies
As you create a movie, you'll need to play it back to preview animation and test interactive controls. You can preview and test movies within the Flash authoring environment, in a separate test window in Flash, or in a Web browser.
Previewing movies in the authoring environment To preview movies, you use commands in the Control menu, buttons on the Controller, or keyboard commands.
To preview the current scene, do one of the following:
To play the movie in a continuous loop:
Choose Control > Loop Playback.
To play all the scenes in a movie:
Choose Control > Play All Scenes.
To play a movie without sound:
Choose Control > Mute Sounds.
To enable frame actions or button actions:
Choose Control > Enable Simple Frame Actions or Enable Simple Buttons.
Previewing movies in a Web browser
For the most accurate representation of a Flash movie, you should preview it in your default Web browser.
To test the movie in a Web browser:
Choose File > Publish Preview > HTML.
Using the Movie Explorer
The Movie Explorer provides an easy way for you to view and organize the contents of a document and select elements in the document for modification. It contains a display list of currently used elements, arranged in a navigable hierarchical tree. You can filter which categories of items in the document are displayed in the Movie Explorer, choosing from text, graphics, buttons, movie clips, actions, and imported files. You can display the selected categories as movie elements (scenes), symbol definitions, or both. You can expand and collapse the navigation tree.
The Movie Explorer offers many features to streamline the workflow for creating movies. For example, you can use the Movie Explorer to do the following:
To view the Movie Explorer:
Choose Window > Movie Explorer.
To filter the categories of items displayed in the Movie Explorer:
In the Find text box, enter the item name, font name, ActionScript string, or frame number. The Find feature searches all items currently displayed in the Movie Explorer.
To select an item in the Movie Explorer:
Click the item in the navigation tree. Shift-click to select more than one item.
The full path for the selected item appears at the bottom of the Movie Explorer. Selecting a scene in the Movie Explorer displays the first frame of that scene on the Stage. Selecting an element in the Movie Explorer selects that element on the Stage if the layer containing the element is not locked.
To use the Movie Explorer options menu or context menu commands:
You can save a Flash FLA document using its current name and location, or save the document using a different name or location. You can revert to the last saved version of a document. You can also save Flash MX content as a Flash 5 document.
You can save a document as a template, in order to use the document as the starting point for a new Flash document (this is similar to how you would use templates in word-processing or Web page-editing applications). For information on using templates to create new documents.
When you save a document using the Save command, Flash performs a quick save, which appends new information to the existing file. When you save using the Save As command, Flash arranges the new information into the file, creating a smaller file on disk.
To save a Flash document:
Choose File > Revert.
To save a document as a template:
When printing frames from a Flash document, you use the Print dialog box to specify the range of scenes or frames you want to print, as well as the number of copies. In Windows, the Page Setup dialog box specifies paper size, orientation, and various print options—including margin settings and whether all frames are to be printed for each page. On the Macintosh, these options are divided between the Page Setup and the Print Margins dialog boxes.
The Print and Page Setup dialog boxes are standard within either operating system, and their appearance depends on the printer driver selected.
To set printing options:
Choose File > Print Preview.
To print frames:
Choose File > Print.
Symbols and instances Symbols are reusable elements that you use with a document. Symbols can include graphics, buttons, video clips, sound files, or fonts. When you create a symbol, the symbol is stored in the file's library. When you place a symbol on the Stage, you create an instance of that symbol.
Symbols reduce file size because, regardless of how many instances of a symbol you create, Flash stores the symbol in the file only once. It is a good idea to use symbols, animated or otherwise, for every element that appears more than once in a document. You can modify the properties of an instance without affecting the master symbol, and you can edit the master symbol to change all instances.
You can edit symbols in several ways: in place on the Stage, in a new window, or in symbol-editing mode. When you edit a symbol, the Timeline window displays only the Timeline of the symbol you are editing.
Using panels
Panels in Flash help you view, organize, and change elements in a document. The options available on panels control the characteristics of symbols, instances, colors, type, frames, and other elements. You can use panels to customize the Flash interface, by displaying the panels you need for a specific task and hiding other panels.
Panels let you work with objects, colors, text, instances, frames, scenes, and entire documents. For example, you use the Color Mixer to create colors, and the Align panel to align objects to each other or the Stage. To view the complete list of panels available in Flash, see the Window menu.
Most panels include a pop-up menu with additional options. The options menu is indicated by a control in the panel's title bar. (If no options menu control appears, there is no options menu for that panel.)
To open a panel:
Select the desired panel from the Window menu.
To close a panel, do one of the following:
Drag the panel's border (Windows) or drag the size box at the panel's lower right corner (Macintosh).
To expand or collapse a panel to its title bar:
Click the collapse arrow in the title bar. Click the collapse arrow again to expand the panel to its previous size.
To show or hide all panels:
Press Tab.
To close all panels:
Choose Window > Close All Panels.
Arranging panels
You can rearrange the order in which panels appear within panel groups. You can also create new panel groups and dock panels to existing panel groups.
To move a panel:
Drag the panel by its title bar.
To add a panel to an existing panel group: Drag the panel by its title bar onto another panel.
To create a new panel group:
Drag the panel by its title bar, away from other panel groups.
Using panel sets
You can create panel sets in custom arrangements, and you can save these custom panel layouts. You can reset panel display to the default layout (displaying the Color Swatches, Actions, and Components panels and the Color Mixer to the right of the application window) or to a custom layout that you have saved previously.
To save a custom panel set:
Open the Panel Sets folder inside the Flash MX application folder on your hard drive and delete the Panel Sets file.
Working with the Library panel
The Library panel is where you store and organize symbols created in Flash, as well as imported files, including bitmap graphics, sound files, and video clips. The Library panel lets you organize library items in folders, see how often an item is used in a document, and sort items by type.
To display or hide the Library panel:
Choose Window > Library.
Working with the Actions panel
The Actions panel lets you create and edit actions for an object or frame. Selecting a frame, button, or movie clip instance makes the Actions panel active. The Actions panel title changes to Button Actions, Movie Clip Actions, or Frame Actions, depending on what is selected.
To display or hide the Actions panel: Choose Window > Actions.
Using the Property inspector
The Property inspector simplifies document creation by making it easy to access the most commonly used attributes of the current selection, either on the Stage or in the Timeline. You can make changes to the object or document attributes in the Property inspector without accessing the menus or panels that contain these features.
Depending on what is currently selected, the Property inspector displays information and settings for the current document, text, symbol, shape, bitmap, video, group, frame, or tool. When two or more different types of objects are selected, the Property inspector displays the total number of objects selected.
To display or hide the Property inspector:
Choose Window > Properties.
Using the toolbox The tools in the toolbox let you draw, paint, select, and modify artwork, as well as change the view of the Stage. The toolbox is divided into four sections:
Choose Window > Tools.
To select a tool, do one of the following:
Context menus contain commands relevant to the current selection. For example, when you select a frame in the Timeline window, the context menu contains commands for creating, deleting, and modifying frames and keyframes. Context menus exist for many items and controls in many locations, including on the Stage, in the Timeline, in the Library panel, and in the Actions panel.
To open a context menu:
Right-click (Windows) or Control-click (Macintosh) an item.
Using the library The library in a Flash document stores symbols created in Flash, plus imported files such as video clips, sound clips, bitmaps, and imported vector artwork. The Library panel displays a scroll list with the names of all items in the library, allowing you to view and organize these elements as you work. An icon next to an item's name in the Library panel indicates the item's file type.
You can open the library of any Flash document while you are working in Flash, to make the library items from that file available for the current document.
To display the Library panel:
Choose Window > Library.
To open the library from another Flash file:
Position the pointer between column headers and drag to resize.
You cannot change the order of columns. To use the Library options menu:
To edit library items, including imported files, you choose options from the Library options menu. You can update imported files after editing them in an external editor, using the Update option in the Library options menu.
To edit a library item:
You can rename items in the library. Changing the library item name of an imported file does not change the file name.
To rename a library item, do one of the following:
When you delete an item from the library, all instances or occurrences of that item in the document are also deleted by default. The Use Count column in the Library panel indicates whether an item is in use.
To delete a library item:
To make organizing a document easier, you can locate unused library items and delete them.
Note: It is not necessary to delete unused library items to reduce a Flash movie's file size, because unused library items are not included in the SWF file.
To find unused library items, do one of the following:
You can use the sample libraries included with Flash to add symbols, buttons, or sounds to your documents. You can also create your own sample libraries, which you can then use with any documents that you create.
To create a sample library for your Flash application:
Flash provides various tools for drawing freeform or precise lines, shapes, and paths, and for painting filled objects.
When you use the Pencil, Line, Oval, Rectangle, or Brush tool to draw a line across another line or painted shape, the overlapping lines are divided into segments at the intersection points. You can use the Arrow tool to select, move, and reshape each segment individually.
Note: Overlapping lines that you create with the Pen tool do not divide into individual segments at intersection points, but remain connected.
A fill; the fill with a line drawn through it; and the two fills and three line segments created by segmentation
When you paint on top of shapes and lines, the portion underneath is replaced by whatever is on top. Paint of the same color merges together. Paint of different colors remains distinct. You can use these features to create masks, cutouts, and other negative images. For example, the cutout below was made by moving the ungrouped kite image onto the green shape, deselecting the kite, and then moving the filled portions of the kite away from the green shape.
To avoid inadvertently altering shapes and lines by overlapping them, you can group the shapes or use layers to separate them.
Drawing with the Pencil tool
To draw lines and shapes, you use the Pencil tool, in much the same way that you would use a real pencil to draw. To apply smoothing or straightening to the lines and shapes as you draw, you can select a drawing mode for the Pencil tool.
To draw with the Pencil tool:
You can use the Line, Oval, and Rectangle tools to easily create these basic geometric shapes. The Oval and Rectangle tools create stroked and filled shapes. The Rectangle tool lets you create rectangles with square or rounded corners.
To draw a straight line, oval, or rectangle:
To draw precise paths as straight lines or smooth, flowing curves, you can use the Pen tool. You can create straight or curved line segments and adjust the angle and length of straight segments and the slope of curved segments.
When you draw with the Pen tool, you click to create points on straight line segments, and click and drag to create points on curved line segments. You can adjust straight and curved line segments by adjusting points on the line. You can convert curves to straight lines and the reverse. You can also display points on lines that you create with other Flash drawing tools, such as the Pencil, Brush, Line, Oval, or Rectangle tools, to adjust those lines.
Drawing straight lines with the Pen tool
To draw straight line segments with the Pen tool, you create anchor points—points on the line that determine the length of individual line segments.
To draw straight lines with the Pen tool:
You create curves by dragging the Pen tool in the direction you want the curve to go to create the first anchor point, and then dragging the Pen tool in the opposite direction to create the second anchor point.
When you use the Pen tool to create a curved segment, the anchor points of the line segment display tangent handles. The slope and length of each tangent handle determine the slope and the height, or depth, of the curve. Moving the tangent handles reshapes the curves of the path.
To draw a curved path:
When you draw a curve with the Pen tool, you create curve points—anchor points on a continuous, curved path. When you draw a straight line segment, or a straight line connected to a curved segment, you create corner points—anchor points on a straight path or at the juncture of a straight and a curved path.
By default, selected curve points appear as hollow circles, and selected corner points appear as hollow squares.
To convert segments in a line from straight segments to curve segments or the reverse, you convert corner points to curve points or the reverse.
You can also move, add, or delete anchor points on a path. You move anchor points using the Subselection tool to adjust the length or angle of straight segments or the slope of curved segments. You can nudge selected anchor points to make small adjustments.
Deleting unneeded anchor points on a curved path optimizes the curve and reduces the file size.
To move an anchor point:
Drag the point with the Subselection tool.
To nudge an anchor point or points:
Select the point or points with the Subselection tool and use the arrow keys to move the point or points.
To convert an anchor point, do one of the following:
Click a line segment with the Pen tool.
To delete an anchor point, do one of the following:
You can adjust straight segments to change the angle or length of the segment, or adjust curved segments to change the slope or direction of the curve.
When you move a tangent handle on a curve point, the curves on both sides of the point adjust. When you move a tangent handle on a corner point, only the curve on the same side of the point as the tangent handle adjusts.
To adjust a straight segment:
Select the Subselection tool and drag the segment.
Note: When you click the path, anchor points are revealed. Adjusting a segment with the Subselection tool may add points to the path.
To adjust points or tangent handles on a curve:
To paint with the Brush tool:
To reshape a line or shape outline, you can drag on any point on a line using the Arrow tool. The pointer changes to indicate what type of reshaping it can perform on the line or fill.
Flash adjusts the curve of the line segment to accommodate the new position of the moved point. If the repositioned point is an end point, you can lengthen or shorten the line. If the repositioned point is a corner, the line segments forming the corner remain straight as they become longer or shorter.
When a corner appears next to the pointer, you can change an end point. When a curve appears next to the pointer, you can adjust a curve.
To reshape a line or shape outline using the Arrow tool:
You can reshape lines and shape outlines by straightening or smoothing them.
Note: You can adjust the degree of automatic smoothing and straightening by choosing preferences for drawing settings.
Straightening makes small straightening adjustments to lines and curves you have already drawn. It has no effect on already straight segments.
You can also use the straightening technique to make Flash recognize shapes. If you draw any oval, rectangular, or triangular shapes with the Recognize Shapes option turned off, you can use the Straightening option to make the shapes geometrically perfect. (For information on the Recognize Shapes option.Shapes that are touching, and thus connected to other elements, are not recognized.
Shape recognition turns the top shapes into the bottom shapes.
Smoothing softens curves and reduces bumps or other variations in a curve's overall direction. It also reduces the number of segments in a curve. Smoothing is relative, however, and has no effect on straight segments. It is particularly useful when you are having trouble reshaping a number of very short curved line segments. Selecting all the segments and smoothing them reduces the number of segments, producing a gentler curve that is easier to reshape.
Repeated application of smoothing or straightening makes each segment smoother or straighter, depending on how curved or straight each segment was originally.
To smooth the curve of each selected fill outline or curved line:
Select the Arrow tool and click the Smooth modifier in the Options section of the toolbox, or choose Modify > Smooth.
To make small straightening adjustments on each selected fill outline or curved line:
Select the Arrow tool and click the Straighten modifier in the Options section of the toolbox, or choose Modify > Straighten.
To use shape recognition:
Select the Arrow tool and click the Straighten modifier, or choose Modify > Straighten.
Erasing
Erasing with the Eraser tool removes strokes and fills. You can quickly erase everything on the Stage, erase individual stroke segments or filled areas, or erase by dragging.
You can customize the Eraser tool to erase only strokes, only filled areas, or only a single filled area. The Eraser tool can be either round or square, and it can have one of five sizes.
To quickly delete everything on the Stage: Double-click the Eraser tool.
To remove stroke segments or filled areas:
You can modify shapes by converting lines to fills, expanding the shape of a filled object, or softening the edges of a filled shape by modifying the curves of the shape.
The Convert Lines to Fills feature changes lines to fills, which allows you to fill lines with gradients or to erase a portion of a line. The Expand Shape and Soften Edges features allow you to expand filled shapes and blur the edges of shapes.
The Expand Fill and Soften Fill Edges features work best on small shapes that do not contain many small details. Applying Soften Edges to shapes with extensive detail can increase the file size of a Flash document and the resulting SWF file.
To convert lines to fills:
Object snapping can be turned on using the Snap modifier for the Arrow tool, or the Snap to Objects command in the View menu.
If the Snap modifier for the Arrow tool is on, a small black ring appears under the pointer when you drag an element. The small ring changes to a larger ring when the object is within snapping distance of another object.
To turn object snapping on or off:
Choose View > Snap to Objects. A check mark is displayed next to the command when it is on. When you move or reshape an object, the position of the Arrow tool on the object provides the reference point for the snap ring. For example, if you move a filled shape by dragging near its center, the center point snaps to other objects. This is particularly useful for snapping shapes to motion paths for animating.
Note: For better control of object placement when snapping, begin dragging from a corner or center point.
To adjust object snapping tolerances:
You can set drawing settings to specify snapping, smoothing, and straightening behaviors when you use Flash drawing tools. You can change the Tolerance setting for each option, and turn each option off or on. Tolerance settings are relative, depending on the resolution of your computer screen and the current magnification of the scene. By default, each option is turned on and set to Normal tolerance.
To set drawing settings:
The Stroke Color and Fill Color controls in the toolbox let you select a solid stroke color or a solid or gradient fill color, switch the stroke and fill colors, or select the default stroke and fill colors (black stroke and white fill). Oval and rectangle objects (shapes) can have both stroke and fill colors. Text objects and brush strokes can have only fill colors. Lines drawn with the Line, Pen, and Pencil tools can have only stroke colors.
The toolbox Stroke Color and Fill Color controls set the painting attributes of new objects you create with the drawing and painting tools. To use these controls to change the painting attributes of existing objects, you must first select the objects on the Stage.
Note: Gradient swatches appear only in the Fill Color control.
To apply stroke and fill colors using the toolbox controls, do one of the following:
To change the stroke color, style, and weight for a selected object, you can use the Stroke Color controls in the Property inspector. For stroke style, you can choose from styles that are preloaded with Flash, or you can create a custom style.
To select a solid color fill, you can use the Fill Color control in the Property inspector.
To select a stroke color, style, and weight using the Property inspector:
To create and edit solid colors and gradient fills, you can use the Color Mixer. If an object is selected on the Stage, the color modifications you make in the Color Mixer are applied to the selection.
You can create any color using the Color Mixer. You can choose colors in RGB, HSB, or expand the panel to use hexadecimal mode. You can also specify an alpha value to define the degree of transparency for a color. In addition, you can select a color from the existing color palette.
You can expand the Color Mixer to display a larger color space in place of the color bar, a split color swatch showing the current and previous colors, and a Brightness control to modify color brightness in all color modes.
To create or edit a solid color with the Color Mixer:
You can transform a gradient or bitmap fill by adjusting the size, direction, or center of the fill. To transform a gradient or bitmap fill, you use the Fill Transform tool.
To adjust a gradient or bitmap fill with the Fill Transform tool:
Locking a gradient or bitmap to fill the Stage
You can lock a gradient or bitmap fill to make it appear that the fill extends over the entire Stage and that the objects painted with the fill are masks revealing the underlying gradient or bitmap. For information on applying a bitmap fill.
When you select the Lock Fill modifier with the Brush or Paint Bucket tool and paint with the tool, the bitmap or gradient fill extends across the objects you paint on the Stage.
Using the Lock Fill modifier creates the appearance of a single gradient or bitmap fill being applied to separate objects on the Stage.
To use a locked gradient fill:
Computers display graphics in either vector or bitmap format. Understanding the difference between the two formats can help you work more efficiently. Using Flash, you can create and animate compact vector graphics. Flash also lets you import and manipulate vector and bitmap graphics that have been created in other applications.
Vector graphics Vector graphics describe images using lines and curves, called vectors, that also include color and position properties. For example, the image of a leaf is described by points through which lines pass, creating the shape of the leaf's outline. The color of the leaf is determined by the color of the outline and the color of the area enclosed by the outline.
When you edit a vector graphic, you modify the properties of the lines and curves that describe its shape. You can move, resize, reshape, and change the color of a vector graphic without changing the quality of its appearance. Vector graphics are resolution-independent, meaning they can be displayed on output devices of varying resolutions without losing any quality.
Importing sounds
You place sound files into Flash by importing them into the library for the current document.
Note: When placing a sound on the Timeline, it is recommended that you place it on a separate layer.
You can import the following sound file formats into Flash:
To import a sound:
Adding sounds to a movie
To add a sound to a movie from the library, you assign the sound to a layer and set options in the Sound controls in the Property inspector. It is recommended that you place each sound on a separate layer.
To add a sound to a movie:
You can associate sounds with the different states of a button symbol. Because the sounds are stored with the symbol, they work for all instances of the symbol.
To add sound to a button:
Using sounds with Sound objects
You can use the Sound object in ActionScript to add sounds to a movie and to control sound objects in a movie. Controlling sounds includes adjusting the volume or the right and left balance while a sound is playing.
To use a sound in a Sound action, you assign an identifier string to the sound in the Symbol Linkage dialog box.
To assign an identifier string to a sound:
To define the starting point of a sound or to control the volume of the sound as it plays, you use the sound-editing controls in the Property inspector.
Flash can change the point at which a sound starts and stops playing. This is useful for making sound files smaller by removing unused sections.
To edit a sound file:
Starting and stopping sounds at keyframes
The most common sound-related task in Flash is starting and stopping sounds at keyframes in synchronization with animation.
To stop and start a sound at a keyframe:
The MP3 compression option lets you export sounds with MP3 compression. Use MP3 when you are exporting longer stream sounds such as music sound tracks.
If you are exporting a file that was imported in MP3 format, you can choose to export the file using the same settings the file had on import.
To export an imported MP3 file with the same settings the file had on import:
Selecting objects with the Arrow tool
The Arrow tool lets you select entire objects by clicking an object or dragging to enclose the object within a rectangular selection marquee.
Note: To select the Arrow tool, you can also press the V key. To temporarily switch to the Arrow tool when another tool is active, hold down the Control key (Windows) or Command key (Macintosh).
To select a stroke, fill, group, instance, or text block:
Select the Arrow tool and click the object.
To select connected lines:
Select the Arrow tool and double-click one of the lines.
To select a filled shape and its stroked outline:
Select the Arrow tool and double-click the fill.
To select objects within a rectangular area: Select the Arrow tool and drag a marquee around the object or objects that you want to select. Instances, groups, and type blocks must be completely enclosed to be selected.
Selecting objects with the Lasso tool To select objects by drawing either a freehand or a straight-edged selection area, you can use the Lasso tool and its Polygon Mode modifier. When using the Lasso tool, you can switch between the freeform and straight-edged selection modes.
To select objects by drawing a freehand selection area:
Select the Lasso tool and drag around the area. End the loop approximately where you started, or let Flash automatically close the loop with a straight line.
To select objects by drawing a straight-edged selection area:
You can hide selection highlights in order to edit objects without viewing their highlighting. Hiding highlights enables you to see how artwork will appear in its final state while you are selecting and editing objects.
To hide selection highlighting:
Choose View > Hide Edges. Choose the command again to deselect the feature.
Grouping objects
To manipulate elements as a single object, you need to group them. For example, after creating a drawing such as a tree or flower, you might group the elements of the drawing so that you can easily select and move the drawing as a whole.
When you select a group, the Property inspector displays the x and y coordinates of the group and its pixel dimensions.
You can edit groups without ungrouping them. You can also select an individual object in a group for editing, without ungrouping the objects.
To create a group:
Choose Modify > Ungroup, or press Control+Shift+G (Windows) or Command+Shift+G (Macintosh).
To edit a group or an object within a group:
You can move objects by dragging them on the Stage, cutting and pasting them, using the arrow keys, or using the Property inspector to specify an exact location for them. You can also move objects between Flash and other applications using the Clipboard. You can copy objects by dragging or pasting them, or while transforming them. When you move an object, the Property inspector indicates the new position.
When moving an object with the Arrow tool, you can use the Snap modifier for the Arrow tool to quickly align the object with points on other objects.
Deleting objects
Deleting an object removes it from the file. Deleting an instance on the Stage does not delete the symbol from the library.
To delete objects:
Within a layer, Flash stacks objects based on the order in which they were created, placing the most recently created object at the top of the stack. The stacking order of objects determines how they appear when they are overlapping.
Drawn lines and shapes always appear below groups and symbols on the stack. To move them up the stack, you must group them or make them into symbols. You can change the stacking order of objects at any time.
Layers also affect the stacking order. Everything on Layer 2 appears on top of everything on Layer 1, and so on. To change the order of layers, drag the layer name in the Timeline to a new position.
To change the stacking order of an object:
Transforming objects freely
You can use the Free Transform tool to freely transform objects, groups, instances, or text blocks. You can perform individual transformations or combine several transformations, such as moving, rotating, scaling, skewing, and distortion.
To transform freely:
When you apply a Distort transformation to a selected object, dragging a corner handle or an edge handle on the bounding box moves the corner or edge and realigns the adjoining edges. Shift-dragging a corner point tapers the object—that is, it moves that corner and the adjoining corner an equal distance and opposite direction from each other. The adjoining corner is the corner opposite the direction you drag. Control-dragging (Windows) or Command-dragging a middle point on an edge moves the entire edge freely.
Distorting by edge, corner, and taper, respectively
You can distort graphic objects by using the Distort command. You can also distort objects when freely transforming them. Note: The Distort command cannot modify symbols, bitmaps, video objects, sounds, gradients, object groups, or text. If a multiple selection contains any of these, only the shape objects are distorted. To modify text, first convert the characters to shape objects.
To distort graphic objects:
Scaling an object enlarges or reduces the object horizontally, vertically, or both. You can scale an object by dragging or by entering values in the Transform panel.
To scale objects by dragging:
To scale an object with the Transform panel:
Rotating an object turns it around its transformation point. The transformation point is aligned with the registration point, which defaults to the center of the object, but you can move the point by dragging it. You can rotate an object by using the Rotate commands, by dragging with the Free Transform tool, or by specifying an angle in the Transform panel. When you rotate an object by dragging, you can also skew and scale the object in the same operation. When you rotate an object using the Transform panel, you can scale the object in the same operation.
To rotate and skew objects by dragging:
You can flip objects across their vertical or horizontal axis without moving their relative position on the Stage.
To flip an object:
You can create three types of text fields: static, dynamic, and input. All text fields support Unicode
You can also create scrolling text fields.
To create text, you place text blocks on the Stage using the Text tool. When creating static text, you can place text on a single line that expands as you type, or in a fixed-width block (for horizontal text) or fixed-height block (for vertical text) that expands and wraps words automatically. When creating dynamic or input text, you can place text on a single line, or create a text block with a fixed width and height. Flash displays a handle on the corner of a text block to identify the type of text block:
You can shift-double-click the handle of dynamic and input text fields to create text blocks that don't expand when you enter text on the Stage. This allows you to create a text block of a fixed size and fill it with more text than it can display to create scrolling text.
After you use the Text tool to create a text field, you use the Property inspector to indicate which type of text field you want and set values to control the way the text field and its contents appear in the Flash movie.
To set preferences for vertical text:
Drag its resize handle.
To switch a text block between fixed-width or fixed-height and extending:
Double-click the resize handle.
Setting text attributes
You can set the font and paragraph attributes of text. A font is an assortment of alphanumeric characters in a particular typeface design. Font attributes include font family, point size, style, color, character spacing, auto kerning, and character position. Paragraph attributes include alignment, margins, indents, and line spacing.
By default, font information is embedded in a published Flash movie (SWF file). You can choose to use device fonts, rather than embedding font information (horizontal text only).
Setting alignment, margins, indents, and line spacing
Alignment determines the position of each line of text in a paragraph relative to edges of the text block. Horizontal text is aligned relative to the left and right edges of the text block, and vertical text is aligned relative to the top and bottom edges of the text block. Text can be aligned to one edge of the text block, centered within the text block, or aligned to both edges of the text block (full justification).
Margins determine the amount of space between the border of a text block and a paragraph of text. Indents determine the distance between the margin of a paragraph and the beginning of the first line. For horizontal text, indents move the first line to the right the specified distance. For vertical text, indents move the first line down the specified distance.
Line spacing determines the distance between adjacent lines in a paragraph. For vertical text, line spacing adjusts the space between vertical columns.
To set alignment, margins, indents, and line spacing for horizontal text:
To set alignment, margins, indents, and line spacing for vertical text:
When you create text, you can specify that the Flash Player use device fonts to display certain text blocks, so that Flash does not embed the font for that text. This can decrease the file size of the movie and increase legibility at text sizes below 10 points.
To specify that text be displayed using a device font:
Select the Arrow tool and click a text block. Shift-click to select multiple text blocks.
Breaking text apart You can break apart text to place each character in a separate text block. Once you break text apart, you can quickly distribute the text blocks to separate layers to easily animate each block separately. For information on distributing objects to layers.
Note: You cannot break apart text in scrollable text fields.
You can also convert text to its component lines and fills to reshape, erase, and otherwise manipulate it. As with any other shape, you can individually group these converted characters, or change them to symbols and animate them. Once you've converted text to lines and fills, you can no longer edit them as text.
To break apart text:
Linking text to a URL (horizontal text only)
You can link horizontal text to a URL to let users jump to other files by clicking the text.
To link horizontal text to a URL:
An alert box indicating missing fonts in a document appears the first time a scene containing a missing font is displayed on the Stage. If you publish or export the document without displaying any scenes containing the missing fonts, the alert box appears during the publish or export operation. If you choose to select substitute fonts, the Font Mapping dialog box appears, listing all missing fonts in the document and letting you select a substitute for each.
Note: If the document contains many missing fonts, a delay may occur while Flash generates the list of missing fonts.
You can apply the missing font to new or existing text in the current document. The text is displayed on your system using the substitute font, but the missing font information is saved with the document. If the document is reopened on a system that includes the missing font, the text is displayed using that font.
Text attributes such as font size, leading, kerning, and so on may need to be adjusted when the text is displayed in the missing font, because the formatting you apply is based on the appearance of the text in the substitute font.
Controlling text with ActionScript A dynamic or input text field is an instance of the ActionScript TextField object. When you create a text field, you can assign it an instance name in the Property inspector. You can use the instance name in ActionScript statements to set, change, and format the text field and its content using the TextField andTextFormat objects.
The TextField object has the same properties as the MovieClip object, and has methods that let you set, select, and manipulate the text. The TextFormat object lets you set character and paragraph values for the text. You can use these ActionScript objects instead of the text Property inspector to control the settings of a text field.
You can use a text field's variable name or instance name to assign it text that contains HTML tags. Flash preserves the rich text formatting applied to the text field with ActionScript.
If you assign a variable to a text field, the text field displays the variable's value. You can use ActionScript to pass the variable to other parts of the movie, to a server-side application for storing in a database, and so on. You can also replace the value of the variable by reading it from a server-side application or by loading it from another part of the movie. For more information on using variables, see About variables. For more information about connecting to external applications,
Symbols, instances, and library assets overviewSymbols, instances, and library assets overview
A symbol is a graphic, button, or movie clip that you create once in Macromedia Flash MX and can reuse throughout your movie or in other movies. A symbol can include artwork that you import from another application. Any symbol you create automatically becomes part of the library for the current document. (For more information on the library.
An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be very different from its symbol in color, size, and function. Editing the symbol updates all of its instances, but applying effects to an instance of a symbol updates only that instance. You can also create font symbols in Flash.
Using symbols in your movies dramatically reduces file size; saving several instances of a symbol requires less storage space than saving multiple copies of the contents of the symbol. For example, you can reduce the file size of your movies if you convert static graphics such as background images into symbols that you then reuse. Using symbols can also speed movie playback, because a symbol needs to be downloaded to the Flash Player only once.
You can share symbols among Flash movies as runtime or author-time shared library assets. For runtime shared assets, you can link assets in a source movie to any number of destination movies, without importing the assets into the destination mov
For an interactive introduction to using symbols and instances, choose Help > Lessons > Symbols.
A symbol in the library and two instances on the Stage, with effects applied to the instance on the right
Creating symbols
You can create a symbol from selected objects on the Stage, or you can create an empty symbol and make or import the content in symbol-editing mode. Symbols can have all the functionality that you can create with Flash, including animation.
By using symbols that contain animation, you can create movies with a lot of movement while minimizing file size. Consider creating animation in a symbol when there is a repetitive or cyclic action—the up-and-down motion of a bird's wings, for example.
You can also add symbols to your movie by using runtime or author-time shared library assets.
Symbol Properties dialog box in basic and advanced views. The dialog box is titled Create New Symbol if you are creating a new symbol, and Convert to Symbol if you are converting a graphic to a symbol.
To convert selected elements to a symbol:
To create a new empty symbol:
Duplicating a symbol lets you use an existing symbol as a starting point for creating a new symbol.
To duplicate a symbol using the Library panel:
Once you've created a symbol, you can create instances of that symbol wherever you like throughout the movie, including inside other symbols. When you modify the symbol, all instances of the symbol are updated.
Instances are given default names when you create them. You can apply custom names to instances in the Property inspector.
To create a new instance of a symbol:
To create a button:
By default, Flash keeps buttons disabled as you create them, to make it easier to select and work with them. When a button is disabled, clicking the button selects it. When a button is enabled, it responds to the mouse events that you've specified as if the movie were playing. You can still select enabled buttons, however. In general, it is best to disable buttons as you work, and enable buttons to quickly test their behavior.
To enable and disable buttons:
Choose Control > Enable Simple Buttons. A check mark appears next to the command to indicate buttons are enabled. Choose the command again to disable buttons.
Any buttons on the Stage now respond. As you move the pointer over a button, Flash displays the Over frame; when you click within the button's active area, Flash displays the Down frame.
To select an enabled button:
Use the Arrow tool to drag a selection rectangle around the button.
To move or edit an enabled button:
When you edit a symbol, Flash updates all the instances of that symbol in the movie. Flash provides three ways for you to edit symbols. You can edit the symbol in context with the other objects on the Stage using the Edit in Place command. Other objects are dimmed to distinguish them from the symbol you are editing. The name of the symbol you are editing is displayed in an information bar at the top of the Stage, to the right of to the current scene name.
You can also edit a symbol in a separate window, using the Edit in New Window command. Editing a symbol in a separate window lets you see both the symbol and the main Timeline at the same time. The name of the symbol you are editing is displayed in the information bar at the top of the Stage.
You edit the symbol by changing the window from the Stage view to a view of only the symbol, using symbol-editing mode. The name of the symbol you are editing is displayed in the information bar at the top of the Stage, to the right of the current scene name.
When you edit a symbol, all instances of the symbol throughout the movie are updated to reflect your edits. While editing a symbol, you can use any of the drawing tools, import media, or create instances of other symbols.
To edit a symbol in place:
You create animation in a Macromedia Flash MX document by changing the contents of successive frames. You can make an object move across the Stage, increase or decrease its size, rotate, change color, fade in or out, or change shape. Changes can occur independently of, or in concert with, other changes. For example, you can make an object rotate and fade in as it moves across the Stage.
There are two methods for creating an animation sequence in Flash: tweened animation, and frame-by-frame animation. In tweened animation, you create starting and ending frames and let Flash create the frames in between. Flash varies the object's size, rotation, color, or other attributes evenly between the starting and ending frames to create the appearance of movement.
About tweened animation Flash can create two types of tweened animation, motion tweening and shape tweening.
Creating keyframes
A keyframe is a frame where you define changes in the animation. When you create frame-by-frame animation, every frame is a keyframe. In tweened animation, you define keyframes at significant points in the animation and let Flash create the contents of frames in between. Flash displays the interpolated frames of a tweened animation as light-blue or light-green with an arrow drawn between keyframes. Because Flash documents save the shapes in each keyframe, you should create keyframes only at those points in the artwork where something changes.
Keyframes are indicated in the Timeline: a keyframe with content on it is represented by a solid circle, and an empty keyframe is represented by an empty circle before the frame. Subsequent frames that you add to the same layer will have the same content as the keyframe.
To create a keyframe, do one of the following:
Flash distinguishes tweened animation from frame-by-frame animation in the Timeline as follows:
The frame rate, the speed at which the animation is played, is measured in number of frames per second. A frame rate that's too slow makes the animation appear to stop and start; a frame rate that's too fast blurs the details of the animation. A frame rate of 12 frames per second (fps) usually gives the best results on the Web. QuickTime and AVI movies generally have a frame rate of 12 fps, while the standard motion-picture rate is 24 fps.
The complexity of the animation and the speed of the computer on which the animation is being played affect the smoothness of the playback. Test your animations on a variety of machines to determine optimum frame rates.
Extending still images When you create a background for animation, it's often necessary that a still image remain the same for several frames. Adding a span of new frames (not keyframes) to a layer extends the contents of the last keyframe in all the new frames.
To extend a still image through multiple frames:
To use a shortcut to extend still images:
New layers created during the Distribute to Layers operation are named according to the name of the element that each contains:
Creating frame-by-frame animations
To create a frame-by-frame animation, you define each frame as a keyframe and create a different image for each frame. Each new keyframe initially contains the same contents as the keyframe preceding it, so you can modify the frames in the animation incrementally.
To create a frame-by-frame animation:
Normally, Flash displays one frame of the animation sequence at a time on the Stage. To help you position and edit a frame-by-frame animation, you can view two or more frames on the Stage at once. The frame under the playhead appears in full color, while surrounding frames are dimmed, making it appear as if each frame were drawn on a sheet of translucent onion-skin paper and the sheets were stacked on top of each other. Dimmed frames cannot be edited.
To simultaneously see several frames of an animation on the Stage:
Click the Onion Skin button. All frames between the Start Onion Skin and End Onion Skin markers (in the Timeline header) are superimposed as one frame in the Movie window.
To control onion skinning display, do any of the following:
For spotlight effects and transitions, you can use a mask layer to create a hole through which underlying layers are visible. A mask item can be a filled shape, a type object, an instance of a graphic symbol, or a movie clip. You can group multiple layers together under a single mask layer to create sophisticated effects.
To create dynamic effects, you can animate a mask layer. For a filled shape used as a mask, you use shape tweening; for a type object, graphic instance, or movie clip, you use motion tweening. When using a movie clip instance as a mask, you can animate the mask along a motion path.
To create a mask layer, you place a mask item on the layer that you want to use as a mask. Instead of having a fill or stroke, the mask item acts as a window that reveals the area of linked layers that lie beneath it. The rest of the mask layer conceals everything except what shows through the mask item. A mask layer can contain only one mask item. You cannot have a mask layer inside a button, and you cannot apply a mask to another mask.
To create a mask layer:
To add an action to a Flash document, you must attach it to a button or movie clip, or to a frame in the Timeline. The Actions panel allows you to select, drag and drop, rearrange, and delete actions.
You can use the Actions panel in two different editing modes: normal and expert. In normal mode you write actions by filling in parameter text boxes. In expert mode you write and edit actions directly in a Script pane, much like writing scripts with a text editor.
To display the Actions panel, do one of the following:
Select an instance of a button, movie clip, or frame.
The Actions panel title changes to reflect the selection.
To navigate through the Actions toolbox, do the following:
In normal mode you build scripts by selecting items from the Actions toolbox, the list on the left side of the Actions panel. (You can also select actions from the Add (+) button pop-up menu.) The Actions toolbox separates items into categories such as Actions, Properties, and Objects, and also provides an Index category that lists all items alphabetically. When you click an item once, its description appears at the upper right of the panel. When you double-click an item, it appears on the right side of the panel, in the Script pane.
In normal mode you can add, delete, or change the order of statements in the Script pane; you can also enter parameters for actions in text boxes above the Script pane. The Actions panel also lets you find and replace text, view script line numbers, and "pin" a script—that is, keep a script in the Script pane when you click away from the object or frame. You can also use the jump menu to go to any script on any object in the current frame.
To display the Actions panel in normal mode:
To add an action to the Script pane, do one of the following:
In expert mode you create scripts by entering ActionScript directly into the Script pane on the right side of the Actions panel. You edit actions, enter parameters for actions, or delete actions directly in the Script pane, much as you would create a script in a text editor. You can also use the Actions toolbox (the left side of the Actions panel) and the Add (+) button to add actions to the Script pane, but the parameter text boxes don't appear. You cannot move statements with the Up Arrow and Down Arrow buttons or delete statements with the Delete (-) button.
Like normal mode, expert mode lets you use the buttons above the Script pane to find and replace text, set and remove debugging breakpoints, view line numbers, and insert target paths; it also allows you to use the jump menu and the Script Pin button.
In expert mode you can also check syntax for errors, automatically format code, and use code hints to help you complete syntax. In addition, the punctuation balance feature helps you pair parentheses, braces, or brackets.
To display the Actions panel in expert mode:
Automatic indentation is turned on by default. To turn it off, deselect Automatic Indentation in ActionScript Editor preferences.
When automatic indentation is turned on, the text you type after ( or { is automatically indented according to the Tab Size setting in ActionScript Editor preferences. To indent another line in the Script pane, select the line and press Tab. To remove the indent, press Shift+Tab.
To use punctuation balance, do the following:
While working in the Actions panel, you can switch between normal mode and expert mode at any time. When you switch modes, Flash maintains your script's formatting unless you change the script. For example, if you write a script in expert mode with your own style of indentation and switch to normal mode to view it, but make no changes, the formatting does not change. If, however, you modify the script in normal mode, Flash removes your custom indentation and formats the script using the Auto Format Options settings.
To switch editing modes, do one of the following:
You cannot use normal mode to view an expert mode script that contains errors. If you try, you'll receive the message "This script contains syntax errors. It must be edited in expert mode."
You can use normal mode to view an expert mode script that uses ActionScript elements that are not supported by the current publish settings. However, if you export such a script, you'll receive a warning message.
Using code hints When you work in the Actions panel, Flash can detect what action you are entering and display a code hint—a tooltip containing the complete syntax for that action or a pop-up menu listing possible method or property names. In expert mode, code hints appear for parameters, properties, and events when you enter certain characters in the Script pane. In normal mode, code hints appear for parameters and properties (but not events) in the parameter text boxes when the Expression box is selected.
To enable automatic code hints:
To assign an action to a movie clip:
ActionScript, the scripting language of Macromedia Flash MX, allows you to create a movie that behaves exactly as you want. You don't need to understand every ActionScript element to begin scripting; if you have a clear goal, you can start building scripts with simple actions. You can incorporate new elements of the language as you learn them to accomplish more complicated tasks.
Like other scripting languages, ActionScript follows its own rules of syntax, reserves keywords, provides operators, and allows you to use variables to store and retrieve information. ActionScript includes built-in objects and functions and allows you to create your own objects and functions.
The ActionScript syntax and style closely resemble that of JavaScript. Flash MX understands ActionScript written in any previous version of Flash.
This chapter introduces you to ActionScript as an object-oriented scripting language and provides an overview of ActionScript terms and basic programming concepts such as functions, variables, statements, operators, conditionals, and loops. It also deconstructs a sample script so that you can begin to understand ActionScript syntax. The online ActionScript Dictionary contains a detailed entry for every ActionScript element.
To begin scripting with ActionScript right away, complete the ActionScript tutorial (Help > Tutorials > Introduction to ActionScript).
Differences between ActionScript and JavaScript
ActionScript is similar to the core JavaScript programming language. You don't need to know JavaScript to use and learn ActionScript; however, if you know JavaScript, ActionScript will appear familiar to you.
This manual does not attempt to teach programming in general. There are many resources available that provide more information about general programming concepts and the JavaScript language.
In object-oriented scripting, information is organized into groups called classes. You can create multiple instances of a class, called objects, to use in your scripts. You can create your own classes and use the built-in ActionScript classes; the built-in classes are located in the Objects folder of the Actions panel.
When you create a class, you define all the properties (characteristics) and methods (behaviors) of each object it creates, just as real-world objects are defined. For example, a person could be said to have properties such as gender, height, and hair color and methods such as talk, walk, and throw. In this example, Person would be a class, and each individual person would be an object, or an instance of that class.
Objects in ActionScript can be pure containers for data, or they can be graphically represented on the Stage as movie clips, buttons, or text fields. All movie clips are instances of the built-in class MovieClip, and all buttons are instances of the built-in class Button. Each movie clip instance contains all the properties (for example, _height, _rotation, _totalframes) and all the methods (for example, gotoAndPlay, loadMovie, startDrag) of the MovieClip class.
To define a class, you create a special function called a constructor function. (Built-in classes have built-in constructor functions.) For example, if you want information about a bicycle rider in your movie, you could create a constructor function, Biker, with the properties time and distance and the method getSpeed, which tells you how fast the biker is traveling:
function Biker(t, d) {
this.time = t;
this.distance = d;
this.getSpeed = function() {return this.time / this.distance;};
}
In this example, you create a function that needs two pieces of information, or parameters, to do its job: t and d. When you call the function to create new instances of the object, you pass it the parameters. The following code creates instances of the object Biker called emma and hamish.
emma = new Biker(30, 5);
hamish = new Biker(40, 5);
In object-oriented scripting, classes can receive properties and methods from each other according to a specific order; this is called inheritance. You can use inheritance to extend or redefine the properties and methods of a class. A class that inherits from another class is called a subclass. A class that passes properties and methods to another class is called a superclass. A class can be both a subclass and a superclass.
How scripts flow Flash executes ActionScript statements starting with the first statement and continuing in order until it reaches the final statement or a statement that instructs ActionScript to go somewhere else.
Some actions that send ActionScript somewhere other than the next statement are if statements, do..while loops, and the return action.
A flow chart of the if..else action
A flow chart of the do..while action
An if statement is called a conditional statement or a "logical branch" because it controls the flow of a script based on the evaluation of a certain condition. For example, the following code checks to see if the value of the number variable is less than or equal to 10. If the check returns true (for example, the value of number is 5), the variable alert is set and displays its value, as shown here:
if (myNumber <= 10) {
alert = "The number is less than or equal to 10";
}
You can also add else statements to create a more complicated conditional statement. In the following example, if the condition returns true (for example, the value of number is 3), the statement between the first set of curly braces runs and the alert variable is set in the second line. If the condition returns false (for example, the value of number is 30), the first block of code is skipped and the statement between the curly braces after the else statement runs, as in the following:
if (number <= 10) {
alert = "The number is less than or equal to 10";
} else {
alert = "The number is greater than 10";
}
For more information, see Controlling flow in scripts.
Loops repeat an action a certain number of times or until a certain condition is met. In the following example, a movie clip is duplicated five times:
i = 0;
do {
duplicateMovieClip ("myMovieClip", "newMovieClip" + i, i);
newName = eval("newMovieClip" + i);
setProperty(newName, _x, getProperty("myMovieClip", _x) + (i * 5));
i = i + 1;
} while (i <= 5);
Controlling when ActionScript runs
When you write a script, you use the Actions panel to attach the script to a frame on a Timeline, or to a button or movie clip on the Stage. Scripts attached to a frame run, or execute, when the playhead enters that frame. However, scripts attached to the first frame of a movie may behave differently than those attached to subsequent frames because the first frame in a movie is rendered incrementally--objects are drawn on the Stage as they download into the Flash Player--and this can effect when actions execute. All frames after the first frame are rendered all at once when every object in the frame is available.
Scripts attached to movie clips or buttons execute when an event occurs. An event is an occurrence in the movie such as a mouse movement, a keypress, or a movie clip being loaded. You can use ActionScript to find out when these events occur and execute specific scripts depending on the event.
Actions attached to a button or movie clip are enclosed in special actions called handlers. The onClipEvent and on actions are called handlers because they "handle" or manage an event. You can specify one or more events for each handler. Movie clip and button actions execute when the event specified by the handler occurs. You can attach more than one handler to an object if you want different actions to execute when different events occur.
Several onClipEvent handlers attached to a movie clip on the Stage
The onClipEvent action handles movie clip events, and the on action handles button events. You can also use the on action with movie clips to create a button movie clip, a movie clip that receives button events.
Movie clip events and button events can also be handled by methods of the MovieClip and Button objects. You must define a function and assign it to the event handler method; the function executes when the event occurs. You can use event methods to handle events for dynamically created movie clips. Event methods are also useful for handling all events in a movie in one script: you don't have to attach the script to the object whose event you are handling.
For example, if you have a button on the Stage and you use the Actions panel to add a trace action, the following code appears:
on (release) {
trace("You clicked me!");
}
You could use a method to create the same effect, as in the following:
myMovieClip.onRelease = function() {
trace("You clicked me!");
ActionScript terminology Like any scripting language, ActionScript uses its own terminology. The following list provides an introduction to important ActionScript terms in alphabetical order.
Actions are statements that instruct a movie to do something while it is playing. For example, gotoAndStop sends the playhead to a specific frame or label. In this manual, the terms action and statement are interchangeable.
Boolean is a true or false value.
Classes are data types that you can create to define a new type of object. To define a class, you create a constructor function.
Constants are elements that don't change. For example, the constant Key.TAB always has the same meaning: it indicates the Tab key on a keyboard. Constants are useful for comparing values.
Constructors are functions that you use to define the properties and methods of a class. For example, the following code creates a new Circle class by creating a constructor function called Circle:
function Circle(x, y, radius){
this.x = x;
this.y = y;
this.radius = radius;
}
Data types are a sets of values and the operations that can be performed on them. The ActionScript data types are string, number, boolean, object, movieclip, function, null, and undefined. For more details on these language .
Events are actions that occur while a movie is playing. For example, different events are generated when a movie clip loads, the playhead enters a frame, the user clicks a button or movie clip, or the user types at the keyboard.
Event handlers are special actions that manage events such as mouseDown or load. There are two kinds of ActionScript event handlers: actions and methods. There are only two event handler actions, on and onClipEvent. In the Actions toolbox, each ActionScript object that has event handler methods has a subcategory called Events.
Expressions are any legal combination of ActionScript symbols that represent a value. An expression consists of operators and operands. For example, in the expression x + 2, x and 2 are operands and + is an operator.
Functions are blocks of reusable code that can be passed parameters and can return a value. For example, the getProperty function is passed the name of a property and the instance name of a movie clip, and it returns the value of the property. The getVersion function returns the version of the Flash Player currently playing the movie.
Identifiers are names used to indicate a variable, property, object, function, or method. The first character must be a letter, underscore (_), or dollar sign ($). Each subsequent character must be a letter, number, underscore, or dollar sign. For example, firstName is the name of a variable.
Instances are objects that belong to a certain class. Each instance of a class contains all the properties and methods of that class. All movie clips are instances with properties (for example, _alpha and _visible) and methods (for example, gotoAndPlay and getURL) of the MovieClip class.
Instance names are unique names that allow you to target movie clip and button instances in scripts. You use the Property inspector to assign instance names to instances on the Stage. For example, a master symbol in the library could be called counter and the two instances of that symbol in the movie could have the instance names scorePlayer1 and scorePlayer2. The following code sets a variable called score inside each movie clip instance by using instance names:
_root.scorePlayer1.score += 1;
_root.scorePlayer2.score -= 1;
Keywords are reserved words that have special meaning. For example, var is a keyword used to declare local variables. You cannot use a keyword as an identifier. For example, var is not a legal variable name.
Methods are functions assigned to an object. After a function is assigned, it can be called as a method of that object. For example, in the following code, clear becomes a method of the controller object:
function reset(){
this.x_pos = 0;
this.x_pos = 0;
}
controller.clear = reset;
controller.clear();
Objects are collections of properties and methods; each object has its own name and is an instance of a particular class. Built-in objects are predefined in the ActionScript language. For example, the built-in Date object provides information from the system clock.
Operators are terms that calculate a new value from one or more values. For example, the addition (+) operator adds two or more values together to produce a new value. The values that operators manipulate are called operands.
Parameters (also called arguments) are placeholders that let you pass values to functions. For example, the following welcome function uses two values it receives in the parameters firstName and hobby:
function welcome(firstName, hobby) {
welcomeText = "Hello, " + firstName + "I see you enjoy " + hobby;
}
Properties are attributes that define an object. For example, _visible is a property of all movie clips that defines whether a movie clip is visible or hidden.
Target paths are hierarchical addresses of movie clip instance names, variables, and objects in a movie. You name a movie clip instance in the movie clip Property inspector. (The main Timeline always has the name _root.) You can use a target path to direct an action at a movie clip or to get or set the value of a variable. For example, the following statement is the target path to the variable volume inside the movie clip stereoControl:
_root.stereoControl.volume
Variables are identifiers that hold values of any data type. Variables can be created, changed, and updated. The values they store can be retrieved for use in scripts. In the following example, the identifiers on the left side of the equal signs are variables:
x = 5;
name = "Lolo";
customer.address = "66 7th Street";
c = new Color(mcinstanceName);
Dot syntax
In ActionScript, a dot (.) is used to indicate the properties or methods related to an object or movie clip. It is also used to identify the target path to a movie clip, variable, function, or object. A dot syntax expression begins with the name of the object or movie clip followed by a dot, and ends with the element you want to specify.
For example, the _x movie clip property indicates a movie clip's x axis position on the Stage. The expression ballMC._x refers to the _x property of the movie clip instance ballMC.
As another example, submit is a variable set in the form movie clip, which is nested inside the movie clip shoppingCart. The expression shoppingCart.form.submit = true sets the submit variable of the instance form to true.
Expressing a method of an object or movie clip follows the same pattern. For example, the play method of the ballMC instance moves the playhead in the Timeline of ballMC, as in the following statement:
ballMC.play();
Dot syntax also uses two special aliases, _root and _parent. The alias _root refers to the main Timeline. You can use the _root alias to create an absolute target path. For example, the following statement calls the function buildGameBoard in the movie clip functions on the main Timeline:
_root.functions.buildGameBoard();
You can use the alias _parent to refer to a movie clip in which the current movie clip is nested. You can also use _parent to create a relative target path. For example, if the movie clip dog is nested inside the movie clip animal, the following statement on the instance dog tells animal to stop:
_parent.stop();
Curly braces
ActionScript statements are grouped together into blocks with curly braces ({ }), as in the following script:
on(release) {
myDate = new Date();
currentMonth = myDate.getMonth();
}
Semicolons
An ActionScript statement is terminated with a semicolon. For example, the following statements are terminated with semicolons:
column = passedDate.getDay();
row = 0;
If you omit the terminating semicolon, Flash will still compile your script successfully. However, using semicolons is good scripting practice.
Parentheses
When you define a function, place any parameters inside parentheses:
function myFunction (name, age, reader){
...
}
When you call a function, include any parameters passed to the function in parentheses, as shown here:
myFunction ("Steve", 10, true);
You can also use parentheses to override the ActionScript order of precedence or to make your ActionScript statements easier to read. (See Operator precedence.)
You also use parentheses to evaluate an expression on the left side of a dot in dot syntax. For example, in the following statement, the parentheses cause new Color(this) to evaluate and create a new Color object:
onClipEvent(enterFrame) {
(new Color(this)).setRGB(0xffffff);
}
If you didn't use parentheses, you would need to add a statement to evaluate the expression:
onClipEvent(enterFrame) {
myColor = new Color(this);
myColor.setRGB(0xffffff);
}
Uppercase and lowercase letters
Only keywords in ActionScript are case sensitive; with the rest of ActionScript, you can use uppercase and lowercase letters interchangeably. For example, the following statements are equivalent:
cat.hilite = true;
CAT.hilite = true;
However, it's good practice to follow consistent capitalization conventions, such as those used in this manual, to make it is easier to identify names of functions and variables when reading ActionScript code.
Because ActionScript is not case sensitive, you must not use variable names that match built-in ActionScript objects. For example, the following is not allowed:
date = new Date();
Instead, use the variable names myDate, theDate, and so on.
If you don't use correct capitalization with keywords, your script will have errors. When Colored Syntax is turned on in the Actions panel, keywords written with correct capitalization are blue by default.
Comments
In the Actions panel, use comments to add notes to scripts. Comments are useful for keeping track of what you intended, and for passing information to other developers if you work in a collaborative environment or are providing samples.
When you choose the comment action, the characters // are inserted into the script. Even a simple script is easier to understand if you make notes as you create it:
on(release) {
// create new Date object
myDate = new Date();
currentMonth = myDate.getMonth();
// convert month number to month name
monthName = calcMonth(currentMonth);
year = myDate.getFullYear();
currentDate = myDate.getDate();
}
When Colored Syntax is turned on in the Actions panel, comments are pink by default in the Script pane. Comments can be any length without affecting the size of the exported file, and they do not need to follow rules for ActionScript syntax or keywords
About data types
A data type describes the kind of information a variable or ActionScript element can hold. There are two kinds of data types: primitive and reference. The primitive data types—string, number, and boolean—have a constant value and therefore can hold the actual value of the element they represent. The reference data types—movie clip and object—have values that can change and therefore contain references to the actual value of the element. Variables containing primitive data types behave differently in certain situations than those containing reference types.
String
A string is a sequence of characters such as letters, numbers, and punctuation marks. You enter strings in an ActionScript statement by enclosing them in single or double quotation marks. Strings are treated as characters instead of as variables. For example, in the following statement, "L7" is a string:
favoriteBand = "L7";
You can use the addition (+) operator to concatenate, or join, two strings. ActionScript treats spaces at the beginning or end of a string as a literal part of the string. The following expression includes a space after the comma:
greeting = "Welcome," + firstName;
Although ActionScript does not distinguish between uppercase and lowercase in references to variables, instance names, and frame labels, literal strings are case sensitive. For example, the following two statements place different text in the specified text field variables, because "Hello" and "HELLO" are literal strings.
invoice.display = "Hello";
invoice.display = "HELLO";
Number
The number data type is a double-precision floating-point number. You can manipulate numbers using the arithmetic operators addition (+), subtraction (-), multiplication (*), division (/), modulo (%), increment (++), and decrement (--). You can also use methods of the built-in Math object to manipulate numbers. The following example uses the sqrt (square root) method to return the square root of the number 100:
Math.sqrt(100);
Boolean
A Boolean value is one that is either true or false. ActionScript also converts the values true and false to 1 and 0 when appropriate. Boolean values are most often used with logical operators in ActionScript statements that make comparisons to control the flow of a script. For example, in the following script, the movie plays if the variable password is true:
onClipEvent(enterFrame) {
if (userName == true && password == true){
play();
}
}
Object
An object is a collection of properties. Each property has a name and a value. The value of a property can be any Flash data type, even the object data type. This allows you to arrange objects inside each other, or "nest" them. To specify objects and their properties, you use the dot (.) operator. For example, in the following code, hoursWorked is a property of weeklyStats, which is a property of employee:
employee.weeklyStats.hoursWorked
You can use the built-in ActionScript objects to access and manipulate specific kinds of information. For example, the Math object has methods that perform mathematical operations on numbers you pass to them. This example uses the sqrt method:
squareRoot = Math.sqrt(100);
The ActionScript MovieClip object has methods that let you control movie clip symbol instances on the Stage. This example uses the play and nextFrame methods:
mcInstanceName.play();
mc2InstanceName.nextFrame();
You can also create your own objects to organize information in your movie. To add interactivity to a movie with ActionScript, you'll need many different pieces of information: for example, you might need a user's name, the speed of a ball, the names of items in a shopping cart, the number of frames loaded, the user's zip code, or the key that was pressed last. Creating custom objects allows you to organize this information into groups, simplify your scripting, and reuse your scripts.
Movieclip
Movie clips are symbols that can play animation in a Flash movie. They are the only data type that refers to a graphic element. The movieclip data type allows you to control movie clip symbols using the methods of the MovieClip object. You call the methods using the dot (.) operator, as shown here:
myClip.startDrag(true);
parentClip.getURL("http://www.macromedia.com/support/" + product);
Null
The null data type has only one value, null. This value means "no value"—that is, a lack of data. The null value can be used in a variety of situations. Here are some examples:
The undefined data type has one value, undefined, and is used for a variable that hasn't been assigned a value.
About variables
A variable is a container that holds information. The container itself is always the same, but the contents can change. By changing the value of a variable as the movie plays, you can record and save information about what the user has done, record values that change as the movie plays, or evaluate whether a condition is true or false.
It's a good idea always to assign a variable a known value the first time you define the variable. This is known as initializing a variable and is often done in the first frame of the movie. Initializing variables helps you track and compare the variable's value as the movie plays.
Variables can hold any type of data: number, string, Boolean, object, or movie clip. The type of data a variable contains affects how the variable's value changes when it is assigned in a script.
Typical types of information you can store in a variable include a URL, a user's name, the result of a mathematical operation, the number of times an event occurred, or whether a button has been clicked. Each movie and movie clip instance has its own set of variables, with each variable having its own value independent of variables in other movies or movie clips.
Naming a variable
variable's name must follow these rules:
In Flash, you do not need to explicitly define a variable as holding either a number, a string, or other data type. Flash determines the data type of a variable when the variable is assigned:
x = 3;
In the expression x = 3, Flash evaluates the element on the right side of the operator and determines that it is of type number. A later assignment may change the type of x; for example, x = "hello" changes the type of x to a string. A variable that hasn't been assigned a value has a type of undefined.
ActionScript converts data types automatically when an expression requires it. For example, when you pass a value to the trace action, trace automatically converts the value to a string and sends it to the Output window. In expressions with operators, ActionScript converts data types as needed; for example, when used with a string, the + operator expects the other operand to be a string:
"Next in line, number " + 7
ActionScript converts the number 7 to the string "7" and adds it to the end of the first string, resulting in the following string:
"Next in line, number 7"
When you debug scripts, it's often useful to determine the data type of an expression or variable to understand why it is behaving a certain way. You can do this with the typeof operator, as in this example:
trace(typeof(variableName));
Scoping a variable
A variable's "scope" refers to the area in which the variable is known and can be referenced. There are three types of variable scope in ActionScript:
Local variables are available within their own block of code (delineated by curly braces).
Timeline variables are available to any Timeline if you use a target path.
Global variables are available to any Timeline even if you do not use a target path.
You can use the var statement to declare a local variable inside a script. For example, the variables i and j are often used as loop counters. In the following example, i is used as a local variable; it only exists inside the function makeDays:
function makeDays() {
var i;
for( i = 0; i < monthArray[month]; i++ ) {
_root.Days.attachMovie( "DayDisplay", i, i + 2000 );
_root.Days[i].num = i + 1;
_root.Days[i]._x = column * _root.Days[i]._width;
_root.Days[i]._y = row * _root.Days[i]._height;
column = column + 1;
if (column == 7 ) {
column = 0;
row = row + 1;
}
}
}
Local variables can also help prevent name collisions, which can cause errors in your movie. For example, if you use name as a local variable, you could use it to store a user name in one context and a movie clip instance name in another; because these variables would run in separate scopes, there would be no collision.
It's good practice to use local variables in the body of a function so that the function can act as an independent piece of code. A local variable is only changeable within its own block of code. If an expression in a function uses a global variable, something outside the function could change its value, which would change the function.
Variable declaration To declare Timeline variables, use the set variable action or the assignment (=) operator. Both methods achieve the same results.
To declare local variables, use the var statement inside the body of a function. A local variable is scoped to the block, and expires at the end of the block. A local variable not declared within a block expires at the end of its script.
To declare global variables, use the _global identifier before the variable name. The following example creates the global variable myName:
_global.myName = "George";
To test the value of a variable, use the trace action to send the value to the Output window. For example, trace(hoursWorked) sends the value of the variable hoursWorked to the Output window in test mode. You can also check and set the variable values in the Debugger in test mode.
Using variables in a script
You must declare a variable in a script before you can use it in an expression. If you use an undeclared variable, as in the following example, the variable's value will be undefined and your script will generate an error:
getURL(myWebSite);
myWebSite = "http://www.shrimpmeat.net";
The statement declaring the variable myWebSite must come first so that the variable in the getURL action can be replaced with a value.
You can change the value of a variable many times in a script. The type of data that the variable contains affects how and when the variable changes. Primitive data types, such as strings and numbers, are passed by value. This means that the actual content of the variable is passed to the variable.
In the following example, x is set to 15 and that value is copied into y. When x is changed to 30 in line 3, the value of y remains 15 because y doesn't look to x for its value; it contains the value of x that it received in line 2.
var x = 15;
var y = x;
var x = 30;
As another example, the variable inValue contains a primitive value, 3, so the actual value is passed to the sqrt function and the returned value is 9:
function sqrt(x){
return x * x;
}
var inValue = 3;
var out = sqr(in);
The value of the variable inValue does not change.
The object data type can contain such a large and complex amount of information that a variable with this type doesn't hold the actual value; it holds a reference to the value. This reference is like an alias that points to the contents of the variable. When the variable needs to know its value, the reference asks for the contents and returns the answer without transferring the value to the variable.
The following is an example of passing by reference:
var myArray = ["tom", "dick"];
var newArray = myArray;
myArray[1] = "jack";
trace(newArray);
The above code creates an Array object called myArray that has two elements. The variable newArray is created and is passed a reference to myArray. When the second element of myArray is changed, it affects every variable with a reference to it. The trace action sends tom, jack to the Output window.
In the next example, myArray contains an Array object, so it is passed to function zeroArray by reference. The zeroArray function changes the content of the array in myArray.
function zeroArray (theArray){
var i;
for (i=0; i < theArray.length; i++) {
theArray[i] = 0;
}
}
var myArray = new Array();
myArray[0] = 1;
myArray[1] = 2;
myArray[2] = 3;
zeroArray(myArray);
The function zeroArray accepts an Array object as a parameter and sets all the elements of that array to 0. It can modify the array because the array is passed by reference.
Operator precedence
When two or more operators are used in the same statement, some operators take precedence over others. ActionScript follows a precise hierarchy to determine which operators to execute first. For example, multiplication is always performed before addition; however, items in parentheses take precedence over multiplication. So, without parentheses, ActionScript performs the multiplication in the following example first:
total = 2 + 4 * 3;
The result is 14.
But when parentheses surround the addition operation, ActionScript performs the addition first:
total = (2 + 4) * 3;
The result is 18.
Operator associativity When two or more operators share the same precedence, their associativity determines the order in which they are performed. Associativity can be either left-to-right or right-to-left. For example, the multiplication operator has an associativity of left-to-right; therefore, the following two statements are equivalent:
total = 2 * 3 * 4;
total = (2 * 3) * 4;
Numeric operators
Numeric operators add, subtract, multiply, divide, and perform other arithmetic operations.
The most common usage of the increment operator is i++ instead of the more verbose i = i+1. You can use the increment operator before or after an operand. In the following example, age is incremented first and then tested against the number 30:
if (++age >= 30)
In the following example, age is incremented after the test is performed:
if (age++ >= 30)
The following table lists the ActionScript numeric operators:
Operator
Operation performed + Addition * Multiplication
/
Division %
Modulo (remainder of division) -
Subtraction
++
Increment --
Decrement
Comparison operators
Comparison operators compare the values of expressions and return a Boolean value (true or false). These operators are most commonly used in loops and in conditional statements. In the following example, if the variable score is 100, a certain movie loads; otherwise, a different movie loads:
if (score > 100){
loadMovieNum("winner.swf", 5);
} else {
loadMovieNum("loser.swf", 5);
}
The following table lists the ActionScript comparison operators:
Operator
Operation performed <
Less than
>
Greater than <=
Less than or equal >=
Greater than or equal
String operators
The + operator has a special effect when it operates on strings: it concatenates the two string operands. For example, the following statement adds "Congratulations," to "Donna!":
"Congratulations, " + "Donna!"
The result is "Congratulations, Donna!" If only one of the + operator's operands is a string, Flash converts the other operand to a string.
The comparison operators >, >=, <, and <= also have a special effect when operating on strings. These operators compare two strings to determine which is first in alphabetical order. The comparison operators only compare strings if both operands are strings. If only one of the operands is a string, ActionScript converts both operands to numbers and performs a numeric comparison.
Logical operators Logical operators compare Boolean (true and false) values and return a third Boolean value. For example, if both operands evaluate to true, the logical AND operator (&&) returns true. If one or both of the operands evaluate to true, the logical OR operator (||) returns true. Logical operators are often used in conjunction with comparison operators to determine the condition of an if action. For example, in the following script, if both expressions are true, the if action will execute:
if (i > 10 && _framesloaded > 50){
play();
}
The following table lists the ActionScript logical operators:
Operator
Operation performed
&&
Logical AND
||
Logical OR
!
Logical NOT
Assignment operators
You can use the assignment (=) operator to assign a value to a variable, as in the following:
password = "Sk8tEr";
You can also use the assignment operator to assign multiple variables in the same expression. In the following statement, the value of a is assigned to the variables b, c and d:
a = b = c = d;
You can also use compound assignment operators to combine operations. Compound operators perform on both operands and then assign that new value to the first operand. For example, the following two statements are equivalent:
x += 15;
x = x + 15;
The assignment operator can also be used in the middle of an expression, as in the following:
// If the flavor is not vanilla, output a message.
if ((flavor = getIceCreamFlavor()) != "vanilla") {
trace ("Flavor was " + flavor + ", not vanilla.");
}
This code is equivalent to the slightly more verbose code that follows:
flavor = getIceCreamFlavor();
if (flavor != "vanilla") {
trace ("Flavor was " + flavor + ", not vanilla.");
}
The following table lists the ActionScript assignment operators: Operator
Operation performed =
Assignment +=
Addition and assignment
-=
Subtraction and assignment *=
Multiplication and assignment
%=
Modulo and assignment
/=
Division and assignment
<<=
Bitwise shift left and assignment
>>=
Bitwise shift right and assignment
>>>=
Shift right zero fill and assignment
^=
Bitwise XOR and assignment
|=
Bitwise OR and assignment
&=
Bitwise AND and assignment
Checking a condition
Statements that check whether a condition is true or false begin with the term if. If the condition exists, ActionScript executes the statement that follows. If the condition doesn't exist, ActionScript skips to the next statement outside the block of code.
To optimize your code's performance, check for the most likely conditions first.
The following statements test several conditions. The term else if specifies alternative tests to perform if previous conditions are false.
if (password == null || email == null) {
gotoAndStop("reject");
} else if (password == userID){
gotoAndPlay("startMovie");
}
Repeating an action
ActionScript can repeat an action a specified number of times or while a specific condition exists. Use the while, do..while, for, and for..in actions to create loops.
To repeat an action while a condition exists:
Use the while statement.
A while loop evaluates an expression and executes the code in the body of the loop if the expression is true. After each statement in the body is executed, the expression is evaluated again. In the following example, the loop executes four times:
i = 4;
while (i > 0) {
myMC.duplicateMovieClip("newMC" + i, i );
i--;
}
You can use the do..while statement to create the same kind of loop as a while loop. In a do..while loop, the expression is evaluated at the bottom of the code block so the loop always runs at least once, as in the following:
i = 4;
do {
myMC.duplicateMovieClip("newMC" +i, i );
i--;
} while (i > 0);
To repeat an action using a built-in counter:
Use the for statement.
Most loops use a counter of some kind to control how many times the loop executes. Each execution of a loop is called an iteration. You can declare a variable and write a statement that increases or decreases the variable each time the loop executes. In the for action, the counter and the statement that increments the counter are part of the action. In the following example, the first expression (i = 4) is the initial expression that is evaluated before the first iteration. The second expression ( i > 0) is the condition that is checked each time before the loop runs. The third expression (i--) is called the post expression and is evaluated each time after the loop runs.
for (i = 4; i > 0; i--){
myMC.duplicateMovieClip("newMC" + i, i + 10);
}
To loop through the children of a movie clip or object:
Use the for..in statement.
Children include other movie clips, functions, objects, and variables. The following example uses trace to print its results in the Output window:
myObject = { name:'Joe', age:25, city:'San Francisco' };
for (propertyName in myObject) {
trace("myObject has the property: " + propertyName + ", with the value: " + myObject[propertyName]);
}
This example produces the following results in the Output window:
myObject has the property: name, with the value: Joe
myObject has the property: age, with the value: 25
myObject has the property: city, with the value: San Francisco
You may want your script to iterate over a particular type of child—for example, over only movie clip children. You can do this with for..in in conjunction with the typeof operator.
for (name in myMovieClip) {
if (typeof (myMovieClip[name]) == "movieclip") {
trace("I have a movie clip child named " + name);
}
}
Using the Array object
The Array object is a commonly used built-in ActionScript object that stores its data in numbered properties instead of named properties. An array element's name is called an index. Arrays are useful for storing and retrieving certain types of information such as lists of students or a sequence of moves in a game.
You can assign elements of the Array object just as you would assign the property of any object:
move[0] = "a2a4";
move[1] = "h7h5";
move[2] = "b1c3";
...
move[100] = "e3e4";
To access the second element of the above array, use the expression move[2].
The Array object has a built-in length property that is the value of the number of elements in the array. When an element of the Array object is assigned and the element's index is a positive integer such that index >= length, length is automatically updated to index + 1.
Returning values from a function
Use the return action to return values from functions. The return action stops the function and replaces it with the value of the return action. If Flash doesn't encounter a return action before the end of a function, an empty string is returned. For example, the following function returns the square of the parameter x:
function sqr(x) {
return x * x;
}
Some functions perform a series of tasks without returning a value. For example, the following function initializes a series of global variables:
function initialize() {
boat_x = _root.boat._x;
boat_y = _root.boat._y;
car_x = _root.car._x;
car_y = _root.car._y;
}
Calling a user-defined function
You can use a target path to call a function in any Timeline from any Timeline, including from the Timeline of a loaded movie. If a function was declared using the _global identifier, you do not need to use a target path to call it.
To invoke a function using the Actions panel in normal mode, you use the call function action. Pass the required parameters inside parentheses. You can call a function in any Timeline from any Timeline, including a loaded movie. For example, the following statement invokes the function sqr in the movie clip MathLib on the main Timeline, passes it the parameter 3, and stores the result in the variable temp:
var temp = _root.MathLib.sqr(3);
To call a user-defined function in normal mode:
Enter the target path to the name of the function. Pass any required parameters inside parentheses.
The following example uses an absolute path to call the initialize function that was defined on the main Timeline and requires no parameters:
_root.initialize();
The following example uses a relative path to call the list function that was defined in the functionsClip movie clip:
_parent.functionsClip.list(6);
About built-in objects
You can use built-in Flash objects to access and manipulate certain kinds of information. Most built-in objects have methods (functions assigned to an object) that you can call to return a value or perform an action. For example, the Date object returns information from the system clock and the Sound object lets you control sound elements in your movie.
Some built-in objects have properties whose values you can read. For example, the Key object has constant values that represent keys on the keyboard. Each object has its own characteristics and abilities that make it useful in a movie.
The built-in Flash objects are divided into four categories within the Objects folder in the Actions panel: Core, Movie, Client/Server, and Authoring.
You can create a custom object with properties and methods to organize information in your scripts for easier storage and access. After you create an object or class, you can create or instantiate copies of that object in a movie.
An object is a complex data type containing zero or more properties and methods. Each property, like a variable, has a name and a value. Properties are attached to the object and contain values that can be changed and retrieved. These values can be of any data type: string, number, Boolean, object, movie clip, or undefined. The following properties are of various data types:
customer.name = "Jane Doe";
customer.age = 30;
customer.member = true;
customer.account.currentRecord = 000609;
customer.mcInstanceName._visible = true;
The property of an object can also be an object. In line 4 of the previous example, account is a property of the object customer and currentRecord is a property of the object account. The data type of the currentRecord property is number.
Creating a custom object To create a custom object, you define a constructor function. A constructor function is always given the same name as the type of object it creates. You can use the keyword this inside the body of the constructor function to refer to the object that the constructor creates; when you call a constructor function, Flash passes it this as a hidden parameter. For example, the following is a constructor function that creates a circle with the property radius:
function Circle(radius) {
this.radius = radius;
}
After you define the constructor function you must create a new instance of the object. Use the new operator before the name of the constructor function and assign the new instance a variable name. For example, the following code uses the new operator to create a new Circle object with a radius of 5, and assigns it to the variable myCircle:
myCircle = new Circle(5);
Note: An object has the same scope as the variable to which it is assigned.
Creating inheritance
Inheritance is a means of organizing, extending, and reusing functionality. Subclasses inherit properties and methods from superclasses and add their own specialized properties and methods. For example, reflecting the real world, Bike would be a superclass and MountainBike and Tricycle would be subclasses of the superclass. Both subclasses contain, or inherit, the methods and properties of the superclass (for example, wheels). Each subclass also has its own properties and methods that extend the superclass (for example, the MountainBike subclass would have a gears property). You can use the elements prototype and __proto__ to create inheritance in ActionScript.
The following example defines the constructor function Bike: function Bike (length, color) {
this.length = length;
this.color = color;
}
The following code adds the roll method to the Bike class:
Bike.prototype.roll = function() {this._x = _x + 20;};
Instead of adding a roll method to the MountainBike class and the Tricycle class, you can create the MountainBike class with Bike as its superclass:
MountainBike.prototype = new Bike();
Now you can call the roll method of MountainBike, as in the following:
MountainBike.roll();
Viewing the Stage
You can change your view of the Stage by changing the magnification level or moving the Stage within the Flash work environment. You can also adjust your view of the Stage using the View commands.
Zooming
- To zoom in on a certain element, select the Zoom tool and click the element. To switch the Zoom tool between zooming in or out, use the Enlarge or Reduce modifiers or Alt-click.
- To zoom in on a specific area of your drawing, drag a rectangular selection marquee with the Zoom tool. Flash sets the magnification level so that the specified rectangle fills the window.
- To zoom in on or out of the entire Stage, choose View > Zoom In or View > Zoom Out.
- To zoom in or out by a specified percentage, choose View > Magnification and select a percentage from the submenu, or select a percentage from the Zoom control at the lower left corner of the application window.
- To display the contents of the current frame, choose View > Magnification > Show All, or choose Show All from the Zoom control at the lower left corner of the application window. If the scene is empty, the entire Stage is displayed.
- To display the entire Stage, choose View > Magnification > Show Frame or choose Show Frame from the Zoom control at the lower left corner of the application window.
- To display the work area surrounding the Stage, choose View > Work Area. The work area is shown in light gray. Use the Work Area command to view elements in a scene that are partly or completely outside of the Stage. For example, to have a bird fly into a frame, you would initially position the bird outside of the Stage in the work area.
When the Stage is magnified, you may not be able to see all of it. The Hand tool lets you move the Stage to change the view without having to change the magnification.
To move the Stage view:
- In the toolbox, select the Hand tool. To temporarily switch between another tool and the Hand tool, hold down the Spacebar and click the tool in the toolbox.
- Drag the Stage.
Flash comes with rulers and guides that help you draw and lay out objects precisely. You can place guides in a document and snap objects to those guides, or turn on the grid and snap objects to it.
Using the grid
When the grid is displayed in a document, it appears as a set of lines behind the artwork in all scenes. You can snap objects to the grid, and you can modify the grid size and grid line color.
To display or hide the drawing grid:
Choose View > Grid > Show Grid.
To turn snapping to grid lines on or off:
Choose View > Grid > Snap to Grid.
To set grid preferences:
- Choose View > Grid > Edit Grid.
- For Color, click the triangle in the color box and select a grid line color from the palette.
The default grid line color is gray. - Select or deselect Show Grid to display or hide the grid.
- Select or deselect Snap to Grid to turn snapping to grid lines on or off.
- For grid spacing, enter values in the text boxes to the right of the horizontal and vertical arrows.
- For Snap Accuracy, select an option from the pop-up menu.
- If you want to save the current settings as the default, click Save Default.
Using guides
You can drag horizontal and vertical guides from the rulers onto the Stage when the rulers are displayed. You can move guides, lock guides, hide guides, and remove guides. You can also snap objects to guides, and change guide color and snap tolerance (how close objects must be to snap to a guide). Draggable guides appear only in the Timeline in which they were created.
Creating a new document Each time you open Flash, the application creates a new file with the FLA extension. You can create additional new Flash documents as you work. To set the size, frame rate, background color, and other properties of a new document, you use the Document Properties dialog box.
To create a new document and set its properties:
- Choose File > New.
- Choose Modify > Document.
The Document Properties dialog box appears. - For Frame Rate, enter the number of animation frames to be displayed every second. For most computer-displayed animations, especially those playing from a Web site, 8 fps (frames per second) to 12 fps is sufficient. (12 fps is the default frame rate.)
- For Dimensions, do one of the following:
- To specify the Stage size in pixels, enter values in the Width and Height text boxes.
The default movie size is 550 x 400 pixels. The minimum size is 1 x 1 pixels; the maximum is 2880 x 2880 pixels. - To set the Stage size so that there is equal space around the content on all sides, click the Contents button to the right of Match. To minimize movie size, align all elements to the upper left corner of the Stage, and then click Contents.
- To set the Stage size to the maximum available print area, click Printer. This area is determined by the paper size minus the current margin selected in the Margins area of the Page Setup dialog box (Windows) or the Print Margins dialog box (Macintosh).
- To set the Stage size to the default size, click Default.
- To specify the Stage size in pixels, enter values in the Width and Height text boxes.
- To set the background color of your movie, click the triangle in the Background Color box and select a color from the palette.
- To specify the unit of measure for rulers that you can display along the top and side of the application window, select an option from the pop-up menu in the upper right.
- Do one of the following:
- To make the new settings the default properties for your new document only, click OK.
- To make these settings the default properties for all new documents, click Make Default.
- Choose File > New from Template.
- In the New Document dialog box, select a category from the Category list, and select a document from the Category Items list.
- Click OK.
Flash lets you set preferences for general application operations, editing operations, and Clipboard operations.
To set preferences:
- Choose Edit > Preferences.
- Click the General, Editing, Clipboard, Warning, or ActionScript Editor tab, and choose from the respective options as described in the procedures that follow.
You can choose keyboard shortcuts in Flash to match the shortcuts you use in other applications, or to streamline your Flash workflow. By default, Flash uses built-in keyboard shortcuts designed for the Flash application. You can also select a built-in keyboard shortcut set from one of several popular graphics applications, including Fireworks, Adobe Illustrator, and Adobe Photoshop. To create a custom keyboard shortcut set, you duplicate an existing set, and then add or remove shortcuts from the new set. You can delete custom shortcut sets.
To select a keyboard shortcut set:
- Choose Edit > Keyboard Shortcuts.
- In the Keyboard Shortcuts dialog box, choose a shortcut set from the Current Set pop-up menu.
- Select a keyboard shortcut set as described above.
- Click the Duplicate Set button.
- Enter a name for the new shortcut set and click OK.
To rename a custom keyboard shortcut set:
- In the Keyboard Shortcuts dialog box, choose a shortcut set from the Current Set pop-up menu.
- Click the Rename Set button.
- In the Rename dialog box, enter a new name and click OK.
- Choose Edit > Keyboard Shortcuts and select the set that you want to modify.
- From the Commands pop-up menu, select Drawing Menu Commands, Drawing Tools, or Test Movie Menu Commands to view shortcuts for the selected category.
- In the Commands list, select the command for which you want to add or remove a shortcut.
An explanation of the selected command appears in the Description area in the dialog box.
- Do one of the following:
- To add a shortcut, click the Add Shortcut (+) button.
- To remove a shortcut, click the Remove Shortcut (-) button and proceed to step 6.
- If you are adding a shortcut, enter the new shortcut key combination in the Press Key text box.
- Click Change.
- Repeat this procedure to add or remove additional shortcuts.
- Click OK.
- Choose Edit > Keyboard Shortcuts. In the Keyboard Shortcuts dialog box, click the Delete Set button.
- In the Delete Set dialog box, choose a shortcut set and click Delete.
To organize a movie thematically, you can use scenes. For example, you might use separate scenes for an introduction, a loading message, and credits.
When you publish a Flash movie that contains more than one scene, the scenes in the movie play back in the order they are listed in the Scene panel in the Flash document. Frames in the movie are numbered consecutively through scenes. For example, if a movie contains two scenes with ten frames each, the frames in Scene 2 are numbered 11-20.
You can add, delete, duplicate, rename, and change the order of scenes.
To display the Scene panel:
- Choose Window > Scene.
- Choose View > Go To and then choose the name of the scene from the submenu.
- Click the Add Scene button in the Scene panel.
- Choose Insert > Scene.
- Click the Delete Scene button in the Scene panel.
- Open the scene you want to delete and choose Insert > Remove Scene.
Double-click the scene name in the Scene panel and enter the new name.
To duplicate a scene:
Click the Duplicate Scene button in the Scene panel.
To change the order of a scene in the movie:
Drag the scene name to a different location in the Scene panel.
Using the Timeline The Timeline organizes and controls a movie's content over time in layers and frames. Like films, Flash movies divide lengths of time into frames. Layers are like multiple film strips stacked on top of each other, each containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead.
Layers in a document are listed in a column on the left side of the Timeline. Frames contained in each layer appear in a row to the right of the layer name. The Timeline header at the top of the Timeline indicates frame numbers. The playhead indicates the current frame displayed on the Stage.
The Timeline status display at the bottom of the Timeline indicates the selected frame number, the current frame rate, and the elapsed time to the current frame.
Note: When an animation is played, the actual frame rate is displayed; this may differ from the movie frame rate if the computer can't display the animation quickly enough.
You can change the way frames are displayed, as well as display thumbnails of frame content in the Timeline. The Timeline shows where there is animation in a movie, including frame-by-frame animation, tweened animation, and motion paths.
Changing the appearance of the Timeline
By default, the Timeline appears at the top of the main application window, above the Stage. To change its position, you can dock the Timeline to the bottom or either side of the main application window, or display the Timeline as its own window. You can also hide the Timeline.
You can resize the Timeline to change the number of layers and frames that are visible. When there are more layers than can be displayed in the Timeline, you can view additional layers by using the scroll bars on the right side of the Timeline.
To move the Timeline:
Drag from the area above the Timeline header.
Drag the Timeline to the edge of the application window to dock it. Control-drag to prevent the Timeline from docking.
To lengthen or shorten layer name fields:
Drag the bar separating the layer names and the frames portion of the Timeline.
To resize the Timeline, do one of the following:
- If the Timeline is docked to the main application window, drag the bar separating the Timeline from the application window.
- If the Timeline is not docked to the main application window, drag the lower right corner (Windows) or the Size box in the lower right corner (Macintosh).
The playhead moves through the Timeline to indicate the current frame displayed on the Stage. The Timeline header shows the frame numbers of the animation. To display a frame on the Stage, you move the playhead to the frame in the Timeline.
When you're working with a large number of frames that can't all appear in the Timeline at once, you can move the playhead along the Timeline to easily locate the current frame.
To go to a frame:
Click the frame's location in the Timeline header, or drag the playhead to the desired position.
To center the Timeline on the current frame:
Click the Center Frame button at the bottom of the Timeline.
Changing the display of frames in the Timeline You can change the size of frames in the Timeline, and display sequences of frames with tinted cells. You can also include thumbnail previews of frame content in the Timeline. These thumbnails are useful as an overview of the animation, but they require extra screen space.
To change the display of frames in the Timeline:
- Click the Frame View button in the upper right corner of the Timeline to display the Frame View pop-up menu.
- Choose from the following options:
- To change the width of frame cells, choose Tiny, Small, Normal, Medium, or Large. (The Large frame-width setting is useful for viewing the details of sound waveforms.)
- To decrease the height of frame cell rows, choose Short.
- To turn tinting of frame sequences on or off, choose Tinted Frames.
- To display thumbnails of the content of each frame scaled to fit the Timeline frames, choose Preview. This can cause the apparent content size to vary.
- To display thumbnails of each full frame (including empty space), choose Preview in Context. This is useful for viewing the way elements move within their frames over the course of the animation, but previews are generally smaller than with the Preview option.
Frame View pop-up menu
Frame labels are useful for identifying keyframes in the Timeline and should be used instead of frame numbers when targeting frames in actions such as Go To. If you add or remove frames, the label moves with the frame it was originally attached to, whereas frame numbers can change. Frame labels are included when you publish a document as a Flash movie, so avoid long names to minimize file size.
Frame comments are useful for making notes to yourself and others working on the same document. Frame comments are not exported when you publish a document as a Flash movie, so you can make them as long as you want.
To create a frame label or comment:
- Select a frame.
- If the Property inspector is not visible, choose Window > Properties.
- In the Property inspector, enter the frame label or comment in the Frame Label text box. To make the text a comment, enter two slashes (//) at the beginning of each line of the text.
Named anchors simplify navigation in Flash movies by letting viewers use the Forward and Back buttons in a browser to jump from frame to frame or scene to scene. Named anchor keyframes are indicated in the Timeline by an anchor icon. If you prefer to have Flash automatically make the first keyframe of each scene a named anchor.
A named anchor keyframe in Scene 1
To make a selected keyframe a named anchor:
- If the Property inspector is not visible, choose Window > Properties.
- Type a name for the keyframe in the text box in the Property inspector.
- Select the Named Anchor option.
- Select the named anchor keyframe in the Timeline.
- Deselect the Named Anchor option in the Property inspector.
Layers are like transparent sheets of acetate stacked on top of each other. Layers help you organize the artwork in your document. You can draw and edit objects on one layer without affecting objects on another layer. Where there is nothing on a layer, you can see through it to the layers below.
To draw, paint, or otherwise modify a layer or folder, you select the layer to make it active. A pencil icon next to a layer or folder name indicates that the layer or folder is active. Only one layer can be active at a time (although more than one layer can be selected at a time).
When you create a new Flash document, it contains one layer. You can add more layers to organize the artwork, animation, and other elements in your document. The number of layers you can create is limited only by your computer's memory, and layers do not increase the file size of your published movie. You can hide, lock, or rearrange layers.
You can also organize and manage layers by creating layer folders and placing layers in them. You can expand or collapse layers in the Timeline without affecting what you see on the Stage. It's a good idea to use separate layers or folders for sound files, actions, frame labels, and frame comments. This helps you find these items quickly when you need to edit them.
In addition, you can use special guide layers to make drawing and editing easier, and mask layers to help you create sophisticated effects.
For an interactive introduction to layers, choose Help > Lessons > Understanding Layers.
Creating layers and layer folders
When you create a new layer or folder, it appears above the selected layer. A newly added layer becomes the active layer.
To create a layer, do one of the following:
- Click the Add Layer button at the bottom of the Timeline.
- Choose Insert > Layer.
- Right-click (Windows) or Control-click (Macintosh) a layer name in the Timeline and choose Insert Layer from the context menu.
- Select a layer or folder in the Timeline, then choose Insert > Layer Folder.
- Right-click (Windows) or Control-click (Macintosh) a layer name in the Timeline, then choose Insert Folder from the context menu.
The new folder appears above the layer or folder you selected.
As you work, you may want to show or hide layers or folders. A red X next to a the name of layer or folder name indicates that it is hidden. Hidden layers are not preserved when a movie is published.
To help you distinguish which layer objects belong to, you can display all objects on a layer as colored outlines. You can change the outline color used by each layer.
You can change the height of layers in the Timeline in order to display more information (such as sound waveforms) in the Timeline. You can also change the number of layers displayed in the Timeline.
To show or hide a layer or folder, do one of the following:
- Click in the Eye column to the right of the layer or folder name in the Timeline to hide that layer or folder. Click in it again to show the layer or folder.
- Click the eye icon to hide all the layers and folders. Click it again to show all layers and folders.
- Drag through the Eye column to show or hide multiple layers or folders.
- Alt-click (Windows) or Option-click (Macintosh) in the Eye column to the right of a layer or folder name to hide all other layers and folders. Alt-click or Option-click it again to show all layers and folders.
- Click in the Outline column to the right of the layer's name to display all objects on that layer as outlines. Click in it again to turn off outline display.
- Click the outline icon to display objects on all layers as outlines. Click it again to turn off outline display on all layers.
- Alt-click (Windows) or Option-click (Macintosh) in the Outline column to the right of a layer's name to display objects on all other layers as outlines. Alt-click or Option-click in it again to turn off outline display for all layers.
- Do one of the following:
- Double-click the layer's icon (the icon to the left of the layer name) in the Timeline.
- Right-click (Windows) or Control-click (Macintosh) the layer name and choose Properties from the context menu.
- Select the layer in the Timeline and choose Modify > Layer.
- In the Layer Properties dialog box, click the Outline Color box and select a new color, enter the hexadecimal value for a color, or click the Color Picker button and choose a color.
- Click OK.
- Double-click the layer's icon (the icon to the left of the layer name) in the Timeline.
- Right-click the layer name and choose Properties from the context menu.
- Select the layer in the Timeline and choose Modify > Layer.
- In the Layer Properties dialog box, choose an option for Layer Height and click OK.
Editing layers and layer folders
You can rename, copy, and delete layers and folders. You can also lock layers and folders to prevent them from being edited.
By default, new layers are named by the order in which they are created: Layer 1, Layer 2, and so on. You can rename layers to better reflect their contents.
To select a layer or folder, do one of the following:
- Click the name of a layer or folder in the Timeline.
- Click a frame in the Timeline of the layer you want to select.
- Select an object on the Stage that is located on the layer you want to select.
- To select contiguous layers or folders, Shift-click their names in the Timeline.
- To select discontiguous layers or folders, Control-click (Windows) or Command-click (Macintosh) their names in the Timeline
- Double-click the name of a layer or folder and enter a new name
- Right-click (Windows) or Control-click (Macintosh) the name of a layer or folder and choose Properties from the context menu. Enter the new name in the Name text box and click OK.
- Select the layer or folder in the Timeline and choose Modify > Layer. In the Layer Properties dialog box, enter the new name in the Name text box and click OK.
- Click in the Lock column to the right of the name of a layer or folder to lock it. Click in the Lock column again to unlock the layer or folder.
- Click the padlock icon to lock all layers and folders. Click it again to unlock all layers and folders.
- Drag through the Lock column to lock or unlock multiple layers or folders.
- Alt-click (Windows) or Option-click (Macintosh) in the Lock column to the right of a layer or folder name to lock all other layers or folders. Alt-click or Option-click in the Lock column again to unlock all layers or folders.
- Click the layer name to select the entire layer.
- Choose Edit > Copy Frames.
- Click the Add Layer button to create a new layer.
- Click the new layer and choose Edit > Paste Frames.
- Click the triangle to the left of the folder name to collapse it, if necessary.
- Click the folder name to select the entire folder.
- Choose Edit > Copy Frames.
- Choose Insert > Layer Folder to create a new folder.
- Click the new folder and choose Edit > Paste Frames.
- Select the layer or folder.
- Click the Delete Layer button in the Timeline.
- Drag the layer or folder to the Delete Layer button.
- Right-click (Windows) or Control-click (Macintosh) the layer or folder name and choose Delete Layer from the context menu.
You can rearrange layers and folders in the Timeline to organize your document.
Layer folders help organize your workflow by letting you place layers in a tree structure. You can expand or collapse a folder to see the layers it contains without affecting which layers are visible on the Stage. Folders can contain both layers and other folders, allowing you to organize layers in much the same way you organize files on your computer.
The layer controls in the Timeline affect all layers within a folder. For example, locking a layer folder locks all layers within that folder.
To move a layer or layer folder into a layer folder:
Drag the layer or layer folder name to the destination layer folder name.
The layer or layer folder appears inside the destination layer folder in the Timeline.
To change the order of layers or folders: Drag one or more layers or folders in the Timeline to the desired position.
To expand or collapse a folder: Click the triangle to the left of the folder name.
To expand or collapse all folders:
Right-click (Windows) or Control-click (Macintosh) and choose Expand All Folders or Collapse All Folders from the context menu.
Using guide layers
For help in aligning objects when drawing, you can create guide layers. You can then align objects on other layers to the objects you create on the guide layers. Guide layers do not appear in a published Flash movie. You can make any layer a guide layer. Guide layers are indicated by a guide icon to the left of the layer name.
Previewing and testing movies
As you create a movie, you'll need to play it back to preview animation and test interactive controls. You can preview and test movies within the Flash authoring environment, in a separate test window in Flash, or in a Web browser.
Previewing movies in the authoring environment To preview movies, you use commands in the Control menu, buttons on the Controller, or keyboard commands.
To preview the current scene, do one of the following:
- Choose Control > Play.
- Choose Window > Toolbars > Controller (Windows) or Window > Controller (Macintosh) and click Play.
- Press Enter (Windows) or Return (Macintosh). The animation sequence plays at the frame rate you specified for the document.
- To step through the frames of the animation, use the Step Forward and Step Backward buttons on the Controller, or choose those commands from the Control menu. You can also press the < and > keys on the keyboard.
- To jump to the first or last frame in a movie using the Controller, use the First Frame or Last Frame button.
To play the movie in a continuous loop:
Choose Control > Loop Playback.
To play all the scenes in a movie:
Choose Control > Play All Scenes.
To play a movie without sound:
Choose Control > Mute Sounds.
To enable frame actions or button actions:
Choose Control > Enable Simple Frame Actions or Enable Simple Buttons.
Previewing movies in a Web browser
For the most accurate representation of a Flash movie, you should preview it in your default Web browser.
To test the movie in a Web browser:
Choose File > Publish Preview > HTML.
Using the Movie Explorer
The Movie Explorer provides an easy way for you to view and organize the contents of a document and select elements in the document for modification. It contains a display list of currently used elements, arranged in a navigable hierarchical tree. You can filter which categories of items in the document are displayed in the Movie Explorer, choosing from text, graphics, buttons, movie clips, actions, and imported files. You can display the selected categories as movie elements (scenes), symbol definitions, or both. You can expand and collapse the navigation tree.
The Movie Explorer offers many features to streamline the workflow for creating movies. For example, you can use the Movie Explorer to do the following:
- Search for an element in a document by name
- Familiarize yourself with the structure of a Flash document created by another developer
- Find all the instances of a particular symbol or action
- Replace all occurrences of a font in a document with another font
- Copy all text to the Clipboard to paste into an external text editor for spell checking
- Print the navigable display list currently displayed in the Movie Explorer
To view the Movie Explorer:
Choose Window > Movie Explorer.
To filter the categories of items displayed in the Movie Explorer:
- To show text, symbols, ActionScript, imported files, or frames and layers, click one or more of the filtering buttons to the right of the Show option. To customize which items to show, click the Customize button. Select options in the Show area of the Movie Explorer Settings dialog box to view those elements.
- From the options menu in Movie Explorer, choose Show Movie Elements to display items in scenes, and choose Show Symbol Definitions to display information about symbols. (Both options can be active at the same time.)
In the Find text box, enter the item name, font name, ActionScript string, or frame number. The Find feature searches all items currently displayed in the Movie Explorer.
To select an item in the Movie Explorer:
Click the item in the navigation tree. Shift-click to select more than one item.
The full path for the selected item appears at the bottom of the Movie Explorer. Selecting a scene in the Movie Explorer displays the first frame of that scene on the Stage. Selecting an element in the Movie Explorer selects that element on the Stage if the layer containing the element is not locked.
To use the Movie Explorer options menu or context menu commands:
- Do one of the following:
- To view the options menu, click the options menu control in the Movie Explorer's title bar.
- To view the context menu, right-click (Windows) or Control-click (Macintosh) an item in the Movie Explorer navigation tree.
- Select an option from the menu:
- Go to Location jumps to the selected layer, scene, or frame in the document.
- Go to Symbol Definition jumps to the symbol definition for a symbol that is selected in the Movie Elements area of the Movie Explorer. The symbol definition lists all the files associated with the symbol. (The Show Symbol Definitions option must be selected. See option definition below.)
- Select Symbol Instances jumps to the scene containing instances of a symbol that is selected in the Symbol Definitions area of the Movie Explorer. (The Show Movie Elements option must be selected.)
- Find in Library highlights the selected symbol in the document's library (Flash opens the Library panel if it is not already visible).
- Rename lets you enter a new name for a selected element.
- Edit in Place lets you edit a selected symbol on the Stage.
- Edit in New Window lets you edit a selected symbol in a new window.
- Show Movie Elements displays the elements in your movie, organized into scenes.
- Show Symbol Definitions displays all the elements associated with a symbol.
- Copy All Text to Clipboard copies selected text to the Clipboard. You can paste the text into an external text editor for spell checking or other editing.
- Cut, Copy, Paste, and Clear perform these common functions on a selected element. Modifying an item in the display list modifies the corresponding element in the movie.
- Expand Branch expands the navigation tree at the selected element.
- Collapse Branch collapses the navigation tree at the selected element.
- Collapse Others collapses the branches in the navigation tree not containing the selected element.
- Print prints the hierarchical display list currently displayed in the Movie Explorer.
You can save a Flash FLA document using its current name and location, or save the document using a different name or location. You can revert to the last saved version of a document. You can also save Flash MX content as a Flash 5 document.
You can save a document as a template, in order to use the document as the starting point for a new Flash document (this is similar to how you would use templates in word-processing or Web page-editing applications). For information on using templates to create new documents.
When you save a document using the Save command, Flash performs a quick save, which appends new information to the existing file. When you save using the Save As command, Flash arranges the new information into the file, creating a smaller file on disk.
To save a Flash document:
- To overwrite the current version on the disk, choose File > Save
- To save the document in a different location and/or with a different name, or to compress the document, choose File > Save As.
- If you chose the Save As command, or if the document has never been saved before, enter the file name and location.
- To save the document in Flash MX format, choose Flash MX Document from the Format pop-up menu. If an alert message indicates that content will be deleted if you save in Flash MX format, click Save As Flash MX if you wish to continue.
- Click Save.
Choose File > Revert.
To save a document as a template:
- Choose File > Save As Template.
- In the Save As Template dialog box, enter a name for the template in the Name text box.
- Choose a category from the Category pop-up menu, or enter a name to create a new category.
- Enter a description of the template in the Description text box (up to 255 characters). The description will be displayed when the template is selected in the New Document dialog box.
- Click OK.
When printing frames from a Flash document, you use the Print dialog box to specify the range of scenes or frames you want to print, as well as the number of copies. In Windows, the Page Setup dialog box specifies paper size, orientation, and various print options—including margin settings and whether all frames are to be printed for each page. On the Macintosh, these options are divided between the Page Setup and the Print Margins dialog boxes.
The Print and Page Setup dialog boxes are standard within either operating system, and their appearance depends on the printer driver selected.
To set printing options:
- Choose File > Page Setup
- Set page margins. Select both Center options to print the frame in the center of the page.
- In the Frames pop-up menu, choose to print all frames in the movie or only the first frame of each scene.
- Actual Size prints the frame at full size. Enter a value for Scale to reduce or enlarge the printed frame.
- Fit on One Page reduces or enlarges each frame so it fills the print area of the page.
- Storyboard options print several thumbnails on one page. Enter the number of thumbnails per page in the Frames text box. Set the space between the thumbnails in the Story Margin text box. Select Label to print the frame label as a thumbnail.
Choose File > Print Preview.
To print frames:
Choose File > Print.
Symbols and instances Symbols are reusable elements that you use with a document. Symbols can include graphics, buttons, video clips, sound files, or fonts. When you create a symbol, the symbol is stored in the file's library. When you place a symbol on the Stage, you create an instance of that symbol.
Symbols reduce file size because, regardless of how many instances of a symbol you create, Flash stores the symbol in the file only once. It is a good idea to use symbols, animated or otherwise, for every element that appears more than once in a document. You can modify the properties of an instance without affecting the master symbol, and you can edit the master symbol to change all instances.
You can edit symbols in several ways: in place on the Stage, in a new window, or in symbol-editing mode. When you edit a symbol, the Timeline window displays only the Timeline of the symbol you are editing.
Using panels
Panels in Flash help you view, organize, and change elements in a document. The options available on panels control the characteristics of symbols, instances, colors, type, frames, and other elements. You can use panels to customize the Flash interface, by displaying the panels you need for a specific task and hiding other panels.
Panels let you work with objects, colors, text, instances, frames, scenes, and entire documents. For example, you use the Color Mixer to create colors, and the Align panel to align objects to each other or the Stage. To view the complete list of panels available in Flash, see the Window menu.
Most panels include a pop-up menu with additional options. The options menu is indicated by a control in the panel's title bar. (If no options menu control appears, there is no options menu for that panel.)
To open a panel:
Select the desired panel from the Window menu.
To close a panel, do one of the following:
- Select the desired panel from the Window menu.
- Right-click (Windows) or Control-click (Macintosh) the panel's title bar and choose Close Panel from the context menu.
- Click the control in the panel's title bar to view the options menu.
- Click an item in the menu.
Drag the panel's border (Windows) or drag the size box at the panel's lower right corner (Macintosh).
To expand or collapse a panel to its title bar:
Click the collapse arrow in the title bar. Click the collapse arrow again to expand the panel to its previous size.
To show or hide all panels:
Press Tab.
To close all panels:
Choose Window > Close All Panels.
Arranging panels
You can rearrange the order in which panels appear within panel groups. You can also create new panel groups and dock panels to existing panel groups.
To move a panel:
Drag the panel by its title bar.
To add a panel to an existing panel group: Drag the panel by its title bar onto another panel.
To create a new panel group:
Drag the panel by its title bar, away from other panel groups.
Using panel sets
You can create panel sets in custom arrangements, and you can save these custom panel layouts. You can reset panel display to the default layout (displaying the Color Swatches, Actions, and Components panels and the Color Mixer to the right of the application window) or to a custom layout that you have saved previously.
To save a custom panel set:
- Choose Window > Save Panel Layout.
- Enter a name for the layout and click OK.
- Choose Window > Panel Sets.
- From the submenu, choose Default Layout to reset panels to the default layout, or choose a custom layout that you have saved previously.
Open the Panel Sets folder inside the Flash MX application folder on your hard drive and delete the Panel Sets file.
Working with the Library panel
The Library panel is where you store and organize symbols created in Flash, as well as imported files, including bitmap graphics, sound files, and video clips. The Library panel lets you organize library items in folders, see how often an item is used in a document, and sort items by type.
To display or hide the Library panel:
Choose Window > Library.
Working with the Actions panel
The Actions panel lets you create and edit actions for an object or frame. Selecting a frame, button, or movie clip instance makes the Actions panel active. The Actions panel title changes to Button Actions, Movie Clip Actions, or Frame Actions, depending on what is selected.
To display or hide the Actions panel: Choose Window > Actions.
Using the Property inspector
The Property inspector simplifies document creation by making it easy to access the most commonly used attributes of the current selection, either on the Stage or in the Timeline. You can make changes to the object or document attributes in the Property inspector without accessing the menus or panels that contain these features.
Depending on what is currently selected, the Property inspector displays information and settings for the current document, text, symbol, shape, bitmap, video, group, frame, or tool. When two or more different types of objects are selected, the Property inspector displays the total number of objects selected.
To display or hide the Property inspector:
Choose Window > Properties.
Using the toolbox The tools in the toolbox let you draw, paint, select, and modify artwork, as well as change the view of the Stage. The toolbox is divided into four sections:
- The Tools section contains drawing, painting, and selection tools.
- The View section contains tools for zooming and panning in the application window.
- The Colors section contains modifiers for stroke and fill colors.
- The Options section displays modifiers for the selected tool, which affect the tool's painting or editing operations.
Choose Window > Tools.
To select a tool, do one of the following:
- Click the tool you want to use. Depending on the tool you select, a set of modifiers may be displayed in the Options area at the bottom of the toolbox.
- Press the tool's keyboard shortcut.
Context menus contain commands relevant to the current selection. For example, when you select a frame in the Timeline window, the context menu contains commands for creating, deleting, and modifying frames and keyframes. Context menus exist for many items and controls in many locations, including on the Stage, in the Timeline, in the Library panel, and in the Actions panel.
To open a context menu:
Right-click (Windows) or Control-click (Macintosh) an item.
Using the library The library in a Flash document stores symbols created in Flash, plus imported files such as video clips, sound clips, bitmaps, and imported vector artwork. The Library panel displays a scroll list with the names of all items in the library, allowing you to view and organize these elements as you work. An icon next to an item's name in the Library panel indicates the item's file type.
You can open the library of any Flash document while you are working in Flash, to make the library items from that file available for the current document.
To display the Library panel:
Choose Window > Library.
To open the library from another Flash file:
- Choose File > Open as Library.
- Navigate to the Flash file whose library you want to open, and click Open.
The selected file's library opens in the current document, with the file's name at the top of the Library panel. To use items from the selected file's library in the current document, drag the items to the current document's Library panel or to the Stage.
- Drag the lower right corner.
- Click the Wide State button to enlarge the Library panel so that it displays all the columns.
- Click the Narrow State button to reduce the width of the Library panel.
Position the pointer between column headers and drag to resize.
You cannot change the order of columns. To use the Library options menu:
- Click the control in the Library panel's title bar to view the options menu.
- Click an item in the menu.
To edit library items, including imported files, you choose options from the Library options menu. You can update imported files after editing them in an external editor, using the Update option in the Library options menu.
To edit a library item:
- Select the item in the Library panel.
- Choose Edit to edit an item in Flash.
- Choose Edit With and select an application to edit the item in an external editor.
You can rename items in the library. Changing the library item name of an imported file does not change the file name.
To rename a library item, do one of the following:
- Double-click the item's name and enter the new name in the text field.
- Select the item and click the properties icon at the bottom of the Library panel. Enter the new name in the Symbol Properties dialog box and click OK.
- Select the item and choose Rename from the Library options menu, and then enter the new name in the text field.
- Right-click (Windows) or Control-click (Macintosh) the item and choose Rename from the context menu, and then enter the new name in the text field.
When you delete an item from the library, all instances or occurrences of that item in the document are also deleted by default. The Use Count column in the Library panel indicates whether an item is in use.
To delete a library item:
- Select the item and click the trash can icon at the bottom of the Library panel.
- In the warning box that appears, select Delete Symbol Instances (the default) to delete the library item and all instances of it. Deselect the option to delete only the symbol, leaving the instances on the Stage.
- Click Delete.
To make organizing a document easier, you can locate unused library items and delete them.
Note: It is not necessary to delete unused library items to reduce a Flash movie's file size, because unused library items are not included in the SWF file.
To find unused library items, do one of the following:
- Choose Select Unused Items from the Library options menu.
- Sort library items by the Use Count column
You can use the sample libraries included with Flash to add symbols, buttons, or sounds to your documents. You can also create your own sample libraries, which you can then use with any documents that you create.
To create a sample library for your Flash application:
- Create a Flash file with a library containing the symbols that you want to include in the permanent library.
- Place the Flash file in the Libraries folder located in the Flash application folder on your hard drive.
- Choose Window > Common Libraries, and select a library from the submenu.
- Drag an item from the common library into the library for the current document.
Flash provides various tools for drawing freeform or precise lines, shapes, and paths, and for painting filled objects.
- To draw freeform lines and shapes as if drawing with a real pencil, you use the Pencil tool.
- To draw precise paths as straight or curved lines, you use the Pen tool.
- To draw basic geometric shapes, you use the Line, Oval, and Rectangle tools.
- To create brushlike strokes as if painting with a brush, you use the Brush tool.
When you use the Pencil, Line, Oval, Rectangle, or Brush tool to draw a line across another line or painted shape, the overlapping lines are divided into segments at the intersection points. You can use the Arrow tool to select, move, and reshape each segment individually.
Note: Overlapping lines that you create with the Pen tool do not divide into individual segments at intersection points, but remain connected.
A fill; the fill with a line drawn through it; and the two fills and three line segments created by segmentation
When you paint on top of shapes and lines, the portion underneath is replaced by whatever is on top. Paint of the same color merges together. Paint of different colors remains distinct. You can use these features to create masks, cutouts, and other negative images. For example, the cutout below was made by moving the ungrouped kite image onto the green shape, deselecting the kite, and then moving the filled portions of the kite away from the green shape.
To avoid inadvertently altering shapes and lines by overlapping them, you can group the shapes or use layers to separate them.
Drawing with the Pencil tool
To draw lines and shapes, you use the Pencil tool, in much the same way that you would use a real pencil to draw. To apply smoothing or straightening to the lines and shapes as you draw, you can select a drawing mode for the Pencil tool.
To draw with the Pencil tool:
- Select the Pencil tool.
- Select Window > Properties and select a stroke color, line weight, and style in the Property inspector.
- Choose Straighten to draw straight lines and convert approximations of triangles, ovals, circles, rectangles, and squares into these common geometric shapes.
- Choose Smooth to draw smooth curved lines.
- Choose Ink to draw freehand lines with no modification applied.
Lines drawn with Straighten, Smooth, and Ink mode, respectively
- Drag on the Stage to draw with the Pencil tool. Shift-drag to constrain lines to vertical or horizontal directions.
You can use the Line, Oval, and Rectangle tools to easily create these basic geometric shapes. The Oval and Rectangle tools create stroked and filled shapes. The Rectangle tool lets you create rectangles with square or rounded corners.
To draw a straight line, oval, or rectangle:
- Select the Line, Oval, or Rectangle tool.
- Select Window > Properties and select stroke and fill attributes in the Property inspector.
- For the Rectangle tool, specify rounded corners by clicking the Round Rectangle modifier and entering a corner radius value. A value of zero creates square corners.
- Drag on the Stage. If you are using the Rectangle tool, press the Up and Down Arrow keys while dragging to adjust the radius of rounded corners.
For the Oval and Rectangle tools, Shift-drag to constrain the shapes to circles and squares.
For the Line tool, Shift-drag to constrain lines to multiples of 45° .
To draw precise paths as straight lines or smooth, flowing curves, you can use the Pen tool. You can create straight or curved line segments and adjust the angle and length of straight segments and the slope of curved segments.
When you draw with the Pen tool, you click to create points on straight line segments, and click and drag to create points on curved line segments. You can adjust straight and curved line segments by adjusting points on the line. You can convert curves to straight lines and the reverse. You can also display points on lines that you create with other Flash drawing tools, such as the Pencil, Brush, Line, Oval, or Rectangle tools, to adjust those lines.
Drawing straight lines with the Pen tool
To draw straight line segments with the Pen tool, you create anchor points—points on the line that determine the length of individual line segments.
To draw straight lines with the Pen tool:
- Select the Pen tool.
- Select Window > Properties and select stroke and fill attributes in the Property inspector.
- Position the pointer on the Stage where you want the straight line to begin, and click to define the first anchor point.
- Click again where you want the first segment of the straight line to end. Shift-click to constrain lines to multiples of 45° .
- Continue clicking to create additional straight segments.
- To complete an open path, double-click the last point, click the Pen tool in the toolbox, or Control-click (Windows) or Command-click (Macintosh) anywhere away from the path.
- To close a path, position the Pen tool over the first anchor point. A small circle appears next to the pen tip when it is positioned correctly. Click or drag to close the path.
- To complete the shape as is, choose Edit > Deselect All or select a different tool in the toolbox.
You create curves by dragging the Pen tool in the direction you want the curve to go to create the first anchor point, and then dragging the Pen tool in the opposite direction to create the second anchor point.
When you use the Pen tool to create a curved segment, the anchor points of the line segment display tangent handles. The slope and length of each tangent handle determine the slope and the height, or depth, of the curve. Moving the tangent handles reshapes the curves of the path.
To draw a curved path:
- Select the Pen tool.
- Position the Pen tool on the Stage where you want the curve to begin, and hold down the mouse button.
The first anchor point appears, and the pen tip changes to an arrowhead. - Drag in the direction you want the curve segment to be drawn. Shift-drag to constrain the tool to multiples of 45° .
As you drag, the tangent handles of the curve appear.
- Release the mouse button.
The length and slope of the tangent handles determine the shape of the curve segment. You can move the tangent handles later to adjust the curve. - Position the pointer where you want the curve segment to end, hold down the mouse button, and drag in the opposite direction to complete the segment. Shift-drag to constrain the segment to multiples of 45° .
- To draw the next segment of a curve, position the pointer where you want the next segment to end, and drag away from the curve.
When you draw a curve with the Pen tool, you create curve points—anchor points on a continuous, curved path. When you draw a straight line segment, or a straight line connected to a curved segment, you create corner points—anchor points on a straight path or at the juncture of a straight and a curved path.
By default, selected curve points appear as hollow circles, and selected corner points appear as hollow squares.
To convert segments in a line from straight segments to curve segments or the reverse, you convert corner points to curve points or the reverse.
You can also move, add, or delete anchor points on a path. You move anchor points using the Subselection tool to adjust the length or angle of straight segments or the slope of curved segments. You can nudge selected anchor points to make small adjustments.
Deleting unneeded anchor points on a curved path optimizes the curve and reduces the file size.
To move an anchor point:
Drag the point with the Subselection tool.
To nudge an anchor point or points:
Select the point or points with the Subselection tool and use the arrow keys to move the point or points.
To convert an anchor point, do one of the following:
- To convert a corner point to a curve point, use the Subselection tool to select the point, then Alt-drag (Windows) or Option-drag (Macintosh) the point to place the tangent handles.
- To convert a curve point to a corner point, click the point with the Pen tool.
Click a line segment with the Pen tool.
To delete an anchor point, do one of the following:
- To delete a corner point, click the point once with the Pen tool.
- To delete a curve point, click the point twice with the Pen tool. (Click once to convert the point to a corner point, and once more to delete the point.)
- Select the point with the Subselection tool and press Delete.
You can adjust straight segments to change the angle or length of the segment, or adjust curved segments to change the slope or direction of the curve.
When you move a tangent handle on a curve point, the curves on both sides of the point adjust. When you move a tangent handle on a corner point, only the curve on the same side of the point as the tangent handle adjusts.
To adjust a straight segment:
- Select the Subselection tool, and select a straight segment.
- Use the Subselection tool to drag an anchor point on the segment to a new position.
Select the Subselection tool and drag the segment.
Note: When you click the path, anchor points are revealed. Adjusting a segment with the Subselection tool may add points to the path.
To adjust points or tangent handles on a curve:
- Select the Subselection tool, and select an anchor point on a curved segment.
A tangent handle appears for the point you selected. - To adjust the shape of the curve on either side of the anchor point, drag the anchor point, or drag the tangent handle. Shift-drag to constrain the curve to multiples of 45° . Alt-drag (Windows) or Option-drag (Macintosh) to drag tangent handles individually.
To paint with the Brush tool:
- Select the Brush tool.
- Select Window > Properties and select a fill color in the Property inspector.
- Click the Brush Mode modifier and choose a painting mode:
- Paint Normal paints over lines and fills on the same layer.
- Paint Fills paints fills and empty areas, leaving lines unaffected.
- Paint Behind paints in blank areas of the Stage on the same layer, leaving lines and fills unaffected.
- Paint Selection applies a new fill to the selection when you select a fill in the Fill modifier or the Fill box of the Property inspector. (This option is the same as simply selecting a filled area and applying a new fill.)
- Paint Inside paints the fill in which you start a brush stroke and never paints lines. This works much like a smart coloring book that never allows you to paint outside the lines. If you start painting in an empty area, the fill doesn't affect any existing filled areas.
- Choose a brush size and brush shape from the Brush tool modifiers.
- If a pressure-sensitive tablet is attached to your computer, you can select the Pressure modifier to vary the width of your brush strokes by varying the pressure on your stylus.
- Drag on the Stage. Shift-drag to constrain brush strokes to horizontal and vertical directions.
To reshape a line or shape outline, you can drag on any point on a line using the Arrow tool. The pointer changes to indicate what type of reshaping it can perform on the line or fill.
Flash adjusts the curve of the line segment to accommodate the new position of the moved point. If the repositioned point is an end point, you can lengthen or shorten the line. If the repositioned point is a corner, the line segments forming the corner remain straight as they become longer or shorter.
When a corner appears next to the pointer, you can change an end point. When a curve appears next to the pointer, you can adjust a curve.
To reshape a line or shape outline using the Arrow tool:
- Select the Arrow tool.
- Drag from any point on the segment to reshape it.
- Control-drag (Windows) or Option-drag (Macintosh) a line to create a new corner point.
You can reshape lines and shape outlines by straightening or smoothing them.
Note: You can adjust the degree of automatic smoothing and straightening by choosing preferences for drawing settings.
Straightening makes small straightening adjustments to lines and curves you have already drawn. It has no effect on already straight segments.
You can also use the straightening technique to make Flash recognize shapes. If you draw any oval, rectangular, or triangular shapes with the Recognize Shapes option turned off, you can use the Straightening option to make the shapes geometrically perfect. (For information on the Recognize Shapes option.Shapes that are touching, and thus connected to other elements, are not recognized.
Shape recognition turns the top shapes into the bottom shapes.
Smoothing softens curves and reduces bumps or other variations in a curve's overall direction. It also reduces the number of segments in a curve. Smoothing is relative, however, and has no effect on straight segments. It is particularly useful when you are having trouble reshaping a number of very short curved line segments. Selecting all the segments and smoothing them reduces the number of segments, producing a gentler curve that is easier to reshape.
Repeated application of smoothing or straightening makes each segment smoother or straighter, depending on how curved or straight each segment was originally.
To smooth the curve of each selected fill outline or curved line:
Select the Arrow tool and click the Smooth modifier in the Options section of the toolbox, or choose Modify > Smooth.
To make small straightening adjustments on each selected fill outline or curved line:
Select the Arrow tool and click the Straighten modifier in the Options section of the toolbox, or choose Modify > Straighten.
To use shape recognition:
Select the Arrow tool and click the Straighten modifier, or choose Modify > Straighten.
Erasing
Erasing with the Eraser tool removes strokes and fills. You can quickly erase everything on the Stage, erase individual stroke segments or filled areas, or erase by dragging.
You can customize the Eraser tool to erase only strokes, only filled areas, or only a single filled area. The Eraser tool can be either round or square, and it can have one of five sizes.
To quickly delete everything on the Stage: Double-click the Eraser tool.
To remove stroke segments or filled areas:
- Select the Eraser tool and then click the Faucet modifier.
- Click the stroke segment or filled area that you want to delete.
- Select the Eraser tool.
- Click the Eraser Mode modifier and choose an erasing mode:
- Erase Normal erases strokes and fills on the same layer.
- Erase Fills erases only fills; strokes are not affected.
- Erase Lines erases only strokes; fills are not affected.
- Erase Selected Fills erases only the currently selected fills and does not affect strokes, selected or not. (Select the fills you want to erase before using the Eraser tool in this mode.)
- Erase Inside erases only the fill on which you begin the eraser stroke. If you begin erasing from an empty point, nothing will be erased. Strokes are unaffected by the eraser in this mode.
- Click the Eraser Shape modifier and choose an eraser shape and size. Make sure that the Faucet modifier is not selected.
- Drag on the Stage.
You can modify shapes by converting lines to fills, expanding the shape of a filled object, or softening the edges of a filled shape by modifying the curves of the shape.
The Convert Lines to Fills feature changes lines to fills, which allows you to fill lines with gradients or to erase a portion of a line. The Expand Shape and Soften Edges features allow you to expand filled shapes and blur the edges of shapes.
The Expand Fill and Soften Fill Edges features work best on small shapes that do not contain many small details. Applying Soften Edges to shapes with extensive detail can increase the file size of a Flash document and the resulting SWF file.
To convert lines to fills:
- Select a line or multiple lines.
- Choose Modify > Shape > Convert Lines to Fills.
Selected lines are converted to filled shapes. Converting lines to fills can make file sizes larger, but it can also speed up drawing for some animations.
- Select a filled shape. This command works best on a single filled color shape with no stroke.
- Choose Modify > Shape > Expand Fill.
- In the Expand Path dialog box, enter a value in pixels for Distance and select Expand or Inset for Direction. Expand enlarges the shape, and Inset reduces it.
- Select a filled shape.
Note: This feature works best on a single filled shape that has no stroke. - Choose Modify > Shape > Soften Fill Edges.
- Distance is the width in pixels of the soft edge.
- Number of Steps controls how many curves will be used for the soft edge effect. More steps will provide a smoother effect but will also create larger files and be slower to draw.
- Expand or Inset controls whether the shape will be enlarged or reduced to soften the edges.
Object snapping can be turned on using the Snap modifier for the Arrow tool, or the Snap to Objects command in the View menu.
If the Snap modifier for the Arrow tool is on, a small black ring appears under the pointer when you drag an element. The small ring changes to a larger ring when the object is within snapping distance of another object.
To turn object snapping on or off:
Choose View > Snap to Objects. A check mark is displayed next to the command when it is on. When you move or reshape an object, the position of the Arrow tool on the object provides the reference point for the snap ring. For example, if you move a filled shape by dragging near its center, the center point snaps to other objects. This is particularly useful for snapping shapes to motion paths for animating.
Note: For better control of object placement when snapping, begin dragging from a corner or center point.
To adjust object snapping tolerances:
- Choose Edit > Preferences and click the Editing tab.
- Under Drawing Settings, adjust the Connect Lines setting.
You can set drawing settings to specify snapping, smoothing, and straightening behaviors when you use Flash drawing tools. You can change the Tolerance setting for each option, and turn each option off or on. Tolerance settings are relative, depending on the resolution of your computer screen and the current magnification of the scene. By default, each option is turned on and set to Normal tolerance.
To set drawing settings:
- Choose Edit > Preferences and click the Editing tab.
- Connect Lines determines how close the end of a line being drawn must be to an existing line segment before the end point snaps to the nearest point on the other line. The available options are Must Be Close, Normal, and Can Be Distant. This setting also controls horizontal and vertical line recognition—that is, how nearly horizontal or vertical a line must be drawn before Flash makes it exactly horizontal or vertical. When Snap to Objects is turned on, this setting controls how close objects must be to snap to one another.
- Smooth Curves specifies the amount of smoothing applied to curved lines drawn with the Pencil tool when the drawing mode is set to Straighten or Smooth. (Smoother curves are easier to reshape, while rougher curves match more closely the original line strokes.) The selections are Off, Rough, Normal, and Smooth.
Note: You can further smooth existing curved segments using Modify > Smooth and Modify > Optimize. - Recognize Lines defines how nearly straight a line segment drawn with the Pencil tool must be before Flash recognizes it and makes it perfectly straight. The selections are Off, Strict, Normal, and Tolerant. If Recognize Lines is off while you draw, you can straighten lines later by selecting one or more line segments and choosing Modify > Straighten.
- Recognize Shapes controls how precisely you must draw circles, ovals, squares, rectangles, and 90° and 180° arcs for them to be recognized as geometric shapes and redrawn accurately. The options are Off, Strict, Normal, and Tolerant. If Recognize Shapes is off while you draw, you can straighten lines later by selecting one or more shapes (for example, connected line segments) and choosing Modify > Straighten.
- Click Accuracy specifies how close to an item the pointer must be before Flash recognizes the item. The options are Strict, Normal, and Tolerant.
The Stroke Color and Fill Color controls in the toolbox let you select a solid stroke color or a solid or gradient fill color, switch the stroke and fill colors, or select the default stroke and fill colors (black stroke and white fill). Oval and rectangle objects (shapes) can have both stroke and fill colors. Text objects and brush strokes can have only fill colors. Lines drawn with the Line, Pen, and Pencil tools can have only stroke colors.
The toolbox Stroke Color and Fill Color controls set the painting attributes of new objects you create with the drawing and painting tools. To use these controls to change the painting attributes of existing objects, you must first select the objects on the Stage.
Note: Gradient swatches appear only in the Fill Color control.
To apply stroke and fill colors using the toolbox controls, do one of the following:
- Click the triangle next to the Stroke or Fill color box and choose a color swatch from the pop-up window. Gradients can be selected for the fill color only.
- Click the Color Picker button in the color pop-up window and choose a color from the Color Picker.
- Type a color's hexadecimal value in the text box in the color pop-up window.
- Click the Default Fill and Stroke button in the toolbox to return to the default color settings (white fill and black stroke).
- Click the None button in the color pop-up window to remove any stroke or fill.
Note: The None button appears only when you are creating a new oval or rectangle. You can create a new object without a stroke or fill, but you cannot use the None button with an existing object. Instead, select the existing stroke or fill and delete it. - Click the Swap Fill and Stroke button in the toolbox to swap colors between the fill and the stroke.
To change the stroke color, style, and weight for a selected object, you can use the Stroke Color controls in the Property inspector. For stroke style, you can choose from styles that are preloaded with Flash, or you can create a custom style.
To select a solid color fill, you can use the Fill Color control in the Property inspector.
To select a stroke color, style, and weight using the Property inspector:
- Select an object or objects on the Stage.
- If the Property inspector is not visible, choose Window > Properties.
- Choose a color swatch from the palette.
- Type a color's hexadecimal value in the text box.
- To select a stroke style, click the triangle next to the Style pop-up menu and choose an option from the menu. To create a custom style, choose Custom from the Property inspector, then choose options in the Stroke Style dialog box and click OK.
Note: Choosing a stroke style other than Solid can increase file size. - To select a stroke weight, click the triangle next to the Weight pop-up menu and set the slider at the desired weight.
- Select an object or objects on the Stage.
- Choose Window >Properties.
- Choose a color swatch from the palette.
- Type a color's hexadecimal value in the text box.
To create and edit solid colors and gradient fills, you can use the Color Mixer. If an object is selected on the Stage, the color modifications you make in the Color Mixer are applied to the selection.
You can create any color using the Color Mixer. You can choose colors in RGB, HSB, or expand the panel to use hexadecimal mode. You can also specify an alpha value to define the degree of transparency for a color. In addition, you can select a color from the existing color palette.
You can expand the Color Mixer to display a larger color space in place of the color bar, a split color swatch showing the current and previous colors, and a Brightness control to modify color brightness in all color modes.
To create or edit a solid color with the Color Mixer:
- To apply the color to existing artwork, select an object or objects on the Stage.
- Choose Window > Color Mixer.
- To select a color mode display, choose RGB (the default setting) or HSB from the pop-up menu in the upper right corner of the Color Mixer.
- Click the Stroke or Fill icon to specify which attribute is to be modified.
Note: Be sure to click the icon, not the color box, or the color pop-up window will open. - If you selected the Fill icon in step 4, verify that Solid is selected in the Fill Type pop-up menu in the center of the Mixer.
- Click the arrow in the lower right corner to expand the Color Mixer.
- Click in the color space in the Color Mixer to select a color. Drag the Brightness control to adjust the brightness of the color.
- Enter values in the color value boxes: Red, Green, and Blue values for RGB display; Hue, Saturation, and Brightness values for HSB display; or hexadecimal values for hexadecimal display. Enter an Alpha value to specify the degree of transparency, from 0 for complete transparency to 100 for complete opacity.
- Click the Default Stroke and Fill button to return to the default color settings (white fill and black stroke).
- Click the Swap Stroke and Fill button to swap colors between the fill and the stroke.
- Click the None button to apply no color to the fill or stroke.
- Click the Stroke or Fill color box and choose a color from the pop-up window.
- To add the color defined in step 5 to the color swatch list for the current document, choose Add Swatch from the pop-up menu in the upper right corner of the Color Mixer.
- To apply a gradient fill to existing artwork, select an object or objects on the Stage.
- If the Color Mixer is not visible, choose Window > Color Mixer.
- To select a color mode display, choose RGB (the default setting) or HSB.
- Select a gradient type from the Fill Type pop-up menu in the center of the Color Mixer:
- Linear Gradient creates a gradient that shades from the starting point to the end point in a straight line.
- Radial Gradient creates a gradient that shades from the starting point to the end point in a circular pattern.
- The gradient definition bar appears in place of the color bar in the Color Mixer, with pointers below the bar indicating each color in the gradient.
- Click the arrow in the lower right corner to expand the Color Mixer.
- To change a color in the gradient, click one of the pointers below the gradient definition bar and click in the color space that appears directly below the gradient bar in the expanded Color Mixer. Drag the Brightness control to adjust the lightness of the color.
- To add a pointer to the gradient, click on or below the gradient definition bar. Select a color for the new pointer as described in step 9.
- To reposition a pointer on the gradient, drag the pointer along the gradient definition bar. Drag a pointer down and off of the gradient definition bar to remove it.
- To save the gradient, click the triangle in the upper right corner of the Color Mixer and choose Add Swatch from the pop-up menu. The gradient is added to the Color Swatches panel for the current document.
You can transform a gradient or bitmap fill by adjusting the size, direction, or center of the fill. To transform a gradient or bitmap fill, you use the Fill Transform tool.
To adjust a gradient or bitmap fill with the Fill Transform tool:
- Select the Fill Transform tool.
- Click an area filled with a gradient or bitmap fill.
When you select a gradient or bitmap fill for editing, its center point appears, and its bounding box is displayed with editing handles. When the pointer is over any one of these handles, it changes to indicate the function of the handle.
Press Shift to constrain the direction of a linear gradient fill to multiples of 45° . - To reposition the center point of the gradient or bitmap fill, drag the center point.
- To change the width of the gradient or bitmap fill, drag the square handle on the side of the bounding box. (This option resizes only the fill, not the object containing the fill.)
- To change the height of the gradient or bitmap fill, drag the square handle at the bottom of the bounding box.
- To rotate the gradient or bitmap fill, drag the circular rotation handle at the corner. You can also drag the lowest handle on the bounding circle of a circular gradient or fill.
- To scale a linear gradient or a fill, drag the square handle at the center of the bounding box.
- To change the radius of a circular gradient, drag the middle circular handle on the bounding circle.
- To skew or slant a fill within a shape, drag one of the circular handles on the top or right side of the bounding box.
- To tile a bitmap inside a shape, scale the fill.
Locking a gradient or bitmap to fill the Stage
You can lock a gradient or bitmap fill to make it appear that the fill extends over the entire Stage and that the objects painted with the fill are masks revealing the underlying gradient or bitmap. For information on applying a bitmap fill.
When you select the Lock Fill modifier with the Brush or Paint Bucket tool and paint with the tool, the bitmap or gradient fill extends across the objects you paint on the Stage.
Using the Lock Fill modifier creates the appearance of a single gradient or bitmap fill being applied to separate objects on the Stage.
To use a locked gradient fill:
- Select the Brush or Paint Bucket tool and choose a gradient or bitmap as a fill.
- Select a Linear Gradient or Radial Gradient from the Fill Type pop-up menu in the center of the Color Mixer before selecting the Brush or Paint Bucket tool.
- Click the Lock Fill modifier.
- First paint the areas where you want to place the center of the fill, and then move to other areas.
- Select the bitmap you want to use.
- Select Bitmap from the Fill Type pop-up menu in the center of the Color Mixer before selecting the Brush or Paint Bucket tool.
- Select the Brush or Paint Bucket tool.
- Click the Lock Fill modifier.
- First paint the areas where you want to place the center of the fill, and then move to other areas.
Computers display graphics in either vector or bitmap format. Understanding the difference between the two formats can help you work more efficiently. Using Flash, you can create and animate compact vector graphics. Flash also lets you import and manipulate vector and bitmap graphics that have been created in other applications.
Vector graphics Vector graphics describe images using lines and curves, called vectors, that also include color and position properties. For example, the image of a leaf is described by points through which lines pass, creating the shape of the leaf's outline. The color of the leaf is determined by the color of the outline and the color of the area enclosed by the outline.
When you edit a vector graphic, you modify the properties of the lines and curves that describe its shape. You can move, resize, reshape, and change the color of a vector graphic without changing the quality of its appearance. Vector graphics are resolution-independent, meaning they can be displayed on output devices of varying resolutions without losing any quality.
Importing sounds
You place sound files into Flash by importing them into the library for the current document.
Note: When placing a sound on the Timeline, it is recommended that you place it on a separate layer.
You can import the following sound file formats into Flash:
- WAV (Windows only)
- AIFF (Macintosh only)
- MP3 (Windows or Macintosh)
- AIFF (Windows or Macintosh)
- Sound Designer II (Macintosh only)
- Sound Only QuickTime Movies (Windows or Macintosh)
- Sun AU (Windows or Macintosh)
- System 7 Sounds (Macintosh only)
- WAV (Windows or Macintosh)
To import a sound:
- Choose File > Import to Library.
- In the Import dialog box, locate and open the desired sound file.
Adding sounds to a movie
To add a sound to a movie from the library, you assign the sound to a layer and set options in the Sound controls in the Property inspector. It is recommended that you place each sound on a separate layer.
To add a sound to a movie:
- Import the sound into the library if it has not already been imported.
- Choose Insert > Layer to create a layer for the sound.
- With the new sound layer selected, drag the sound from the Library panel onto the Stage. The sound is added to the current layer.
You can place multiple sounds on one layer, or on layers containing other objects. However, it is recommended that each sound be placed on a separate layer. Each layer acts like a separate sound channel. The sounds on all layers are combined when you play back the movie. - In the Timeline, select the first frame that contains the sound file.
- Choose Window > Properties and click the arrow in the lower right corner to expand the Property inspector.
- In the Property inspector, choose the sound file from the Sound pop-up menu.
- Choose an effect option from the Effects pop-up menu:
- None applies no effects to the sound file. Choose this option to remove previously applied effects.
- Left Channel/Right Channel plays sound in the left or right channel only.
- Fade Left to Right/Fade Right to Left shifts the sound from one channel to the other.
- Fade In gradually increases the amplitude of a sound over its duration.
- Fade Out gradually decreases the amplitude of a sound over its duration.
- Custom lets you create your own In and Out points of sound using the Edit Envelope.
- Choose a synchronization option from the Sync pop-up menu:
- Event synchronizes the sound to the occurrence of an event. An event sound plays when its starting keyframe is first displayed and plays in its entirety, independently of the Timeline, even if the movie stops. Event sounds are mixed when you play your published movie.
An example of an event sound is a sound that plays when a user clicks a button. If an event sound is playing and the sound is instantiated again (for example, by the user clicking the button again) the first instance of the sound continues to play and another instance begins to play simultaneously. - Start is the same as Event, except that if the sound is already playing, no new instance of the sound is played.
- Stop silences the specified sound.
- Stream synchronizes the sound for playing on a Web site. Flash forces animation to keep pace with stream sounds. If Flash can't draw animation frames quickly enough, it skips frames. Unlike event sounds, stream sounds stop if the movie stops. Also, a stream sound can never play longer than the length of the frames it occupies. Stream sounds are mixed when you publish your movie.
An example of a stream sound is the voice of a character in an animation that plays in multiple frames. - Enter a value for Loop to specify the number of times the sound should loop.
For continuous play, enter a number large enough to play the sound for an extended duration. For example, to loop a 15-second sound for 15 minutes, enter 60.
Note: Looping stream sounds is not recommended. If a stream sound is set to loop, frames are added to the movie and the file size is increased by the number of times the sound is looped.
- Event synchronizes the sound to the occurrence of an event. An event sound plays when its starting keyframe is first displayed and plays in its entirety, independently of the Timeline, even if the movie stops. Event sounds are mixed when you play your published movie.
You can associate sounds with the different states of a button symbol. Because the sounds are stored with the symbol, they work for all instances of the symbol.
To add sound to a button:
- Select the button in the Library panel.
- Choose Edit from the options menu in the upper right corner.
- In the button's Timeline, add a layer for sound.
- In the sound layer, create a regular or blank keyframe to correspond to the button state to which you want to add a sound.
For example, to add a sound that plays when the button is clicked, create a keyframe in the frame labeled Down. - Click the keyframe you have just created.
- Choose Window > Properties.
- In the Property inspector, choose a sound file from the Sound pop-up menu.
- Choose Event from the Synchronization pop-up menu.
Using sounds with Sound objects
You can use the Sound object in ActionScript to add sounds to a movie and to control sound objects in a movie. Controlling sounds includes adjusting the volume or the right and left balance while a sound is playing.
To use a sound in a Sound action, you assign an identifier string to the sound in the Symbol Linkage dialog box.
To assign an identifier string to a sound:
- Select the sound in the Library panel.
- Choose Linkage from the options menu in the upper right corner of the panel.
- Right-click (Windows) or Control-click (Macintosh) the sound name in the Library panel, and choose Linkage from the context menu.
- Under Linkage in the Symbol Linkage Properties dialog box, select Export for ActionScript.
- Enter an identifier string in the text box, and then click OK.
To define the starting point of a sound or to control the volume of the sound as it plays, you use the sound-editing controls in the Property inspector.
Flash can change the point at which a sound starts and stops playing. This is useful for making sound files smaller by removing unused sections.
To edit a sound file:
- Add a sound to a frame or select a frame already containing a sound.
- Choose Window > Properties.
- Click the Edit button on the right side of the Property inspector.
- To change the start and end points of a sound, drag the Time In and Time Out controls in the Edit Envelope.
- To change the sound envelope, drag the envelope handles to change levels at different points in the sound. Envelope lines show the volume of the sound as it plays. To create additional envelope handles (up to eight total), click the envelope lines. To remove an envelope handle, drag it out of the window.
- To display more or less of the sound in the window, click the Zoom In or Out buttons.
- To switch the time units between seconds and frames, click the Seconds and Frames buttons.
- To hear the edited sound, click the Play button.
Starting and stopping sounds at keyframes
The most common sound-related task in Flash is starting and stopping sounds at keyframes in synchronization with animation.
To stop and start a sound at a keyframe:
- Add a sound to a movie.
- Create a keyframe in the sound layer's Timeline at the frame where you want the sound to end.
A representation of the sound file appears in the Timeline. - Choose Window > Properties and click the arrow in the lower right corner to expand the Property inspector.
- In the Property inspector, choose the same sound from the Sound pop-up menu.
- Choose Stop from the Synchronization pop-up menu.
When you play the movie, the sound stops playing when it reaches the ending keyframe. - To play back the sound, simply move the playhead.
The MP3 compression option lets you export sounds with MP3 compression. Use MP3 when you are exporting longer stream sounds such as music sound tracks.
If you are exporting a file that was imported in MP3 format, you can choose to export the file using the same settings the file had on import.
To export an imported MP3 file with the same settings the file had on import:
- In the Sound Properties dialog box, choose MP3 from the Compression menu.
- Select Use Imported MP3 Quality (the default setting). Deselect this option to choose other MP3 compression settings, as defined in the procedure below.
- In the Sound Properties dialog box, choose MP3 from the Compression menu.
- Deselect Use Imported MP3 Quality (the default setting).
- For Bit Rate, select an option to determine the bits per second in the exported sound file. Flash supports 8 Kbps through 160 Kbps CBR (constant bit rate). When you are exporting music, set the bit rate to 16 Kbps or higher for the best results.
- For Preprocessing, select Convert Stereo to Mono to convert mixed stereo sounds to mono (monaural). (Mono sounds are unaffected by this option.)
Note: The Preprocessing option is available only if you select a bit rate of 20 Kbps or higher. - For Quality, select an option to determine the compression speed and sound quality:
Fast yields faster compression but lower sound quality.
Medium yields somewhat slower compression but higher sound quality.
Best yields the slowest compression and the highest sound quality.
Selecting objects with the Arrow tool
The Arrow tool lets you select entire objects by clicking an object or dragging to enclose the object within a rectangular selection marquee.
Note: To select the Arrow tool, you can also press the V key. To temporarily switch to the Arrow tool when another tool is active, hold down the Control key (Windows) or Command key (Macintosh).
To select a stroke, fill, group, instance, or text block:
Select the Arrow tool and click the object.
To select connected lines:
Select the Arrow tool and double-click one of the lines.
To select a filled shape and its stroked outline:
Select the Arrow tool and double-click the fill.
To select objects within a rectangular area: Select the Arrow tool and drag a marquee around the object or objects that you want to select. Instances, groups, and type blocks must be completely enclosed to be selected.
Selecting objects with the Lasso tool To select objects by drawing either a freehand or a straight-edged selection area, you can use the Lasso tool and its Polygon Mode modifier. When using the Lasso tool, you can switch between the freeform and straight-edged selection modes.
To select objects by drawing a freehand selection area:
Select the Lasso tool and drag around the area. End the loop approximately where you started, or let Flash automatically close the loop with a straight line.
To select objects by drawing a straight-edged selection area:
- Select the Lasso tool and select the Polygon Mode modifier in the Options section of the toolbox.
- Click to set the starting point.
- Position the pointer where you want the first line to end, and click. Continue setting end points for additional line segments.
- To close the selection area, double-click.
- Select the Lasso tool and deselect the Polygon Mode modifier.
- To draw a freehand segment, drag on the Stage.
- To draw a straight-edged segment, hold down Alt-click (Windows) or Option-click (Macintosh) to set start and end points. You can continue switching between drawing freehand and straight-edged segments.
- If you are drawing a freehand segment, release the mouse button.
- If you are drawing a straight-edged segment, double-click.
You can hide selection highlights in order to edit objects without viewing their highlighting. Hiding highlights enables you to see how artwork will appear in its final state while you are selecting and editing objects.
To hide selection highlighting:
Choose View > Hide Edges. Choose the command again to deselect the feature.
Grouping objects
To manipulate elements as a single object, you need to group them. For example, after creating a drawing such as a tree or flower, you might group the elements of the drawing so that you can easily select and move the drawing as a whole.
When you select a group, the Property inspector displays the x and y coordinates of the group and its pixel dimensions.
You can edit groups without ungrouping them. You can also select an individual object in a group for editing, without ungrouping the objects.
To create a group:
- Select the objects on the Stage that you want to group.
You can select shapes, other groups, symbols, text, and so on. - Choose Modify > Group, or press Control+G (Windows) or Command+G (Macintosh).
Choose Modify > Ungroup, or press Control+Shift+G (Windows) or Command+Shift+G (Macintosh).
To edit a group or an object within a group:
- With the group selected, choose Edit > Edit Selected, or double-click the group with the Arrow tool.
Everything on the page that is not part of the group is dimmed, indicating it is inaccessible. - Edit any element within the group.
- Choose Edit > Edit All, or double-click a blank spot on the Stage with the Arrow tool.
Flash restores the group to its status as a single entity, and you can work with other elements on the Stage.
You can move objects by dragging them on the Stage, cutting and pasting them, using the arrow keys, or using the Property inspector to specify an exact location for them. You can also move objects between Flash and other applications using the Clipboard. You can copy objects by dragging or pasting them, or while transforming them. When you move an object, the Property inspector indicates the new position.
When moving an object with the Arrow tool, you can use the Snap modifier for the Arrow tool to quickly align the object with points on other objects.
Deleting objects
Deleting an object removes it from the file. Deleting an instance on the Stage does not delete the symbol from the library.
To delete objects:
- Select an object or multiple objects.
- Press Delete or Backspace.
- Choose Edit > Clear.
- Choose Edit > Cut.
- Right-click (Windows) or Control-click (Macintosh) the object and select Cut from the context menu.
Within a layer, Flash stacks objects based on the order in which they were created, placing the most recently created object at the top of the stack. The stacking order of objects determines how they appear when they are overlapping.
Drawn lines and shapes always appear below groups and symbols on the stack. To move them up the stack, you must group them or make them into symbols. You can change the stacking order of objects at any time.
Layers also affect the stacking order. Everything on Layer 2 appears on top of everything on Layer 1, and so on. To change the order of layers, drag the layer name in the Timeline to a new position.
To change the stacking order of an object:
- Select the object.
- Choose Modify > Arrange > Bring to Front or Send to Back to move the object or group to the top or bottom of the stacking order.
- Choose Modify > Arrange > Bring Forward or Send Backward to move the object or group up or down one position in the stacking order.
Transforming objects freely
You can use the Free Transform tool to freely transform objects, groups, instances, or text blocks. You can perform individual transformations or combine several transformations, such as moving, rotating, scaling, skewing, and distortion.
To transform freely:
- Select a graphic object, instance, group, or text block on the Stage.
- Click the Free Transform tool.
- To move the selection, position the pointer over the object within the bounding box, and drag the object to a new position. Do not drag the transformation point.
- To set the center of rotation or scaling, drag the transformation point to a new location.
- To rotate the selection, position the pointer just outside a corner handle and drag. The selection rotates around the transformation point.
Shift-drag to rotate in 45° increments.
Alt-drag (Windows) or Option-drag (Macintosh) to rotate around the opposite corner. - To scale the selection, drag a corner handle diagonally to scale in two dimensions. Drag a corner handle or a side handle horizontally or vertically to scale in the respective direction only. Shift-drag to resize proportionally.
- To skew the selection, position the pointer on the outline between the transformation handles and drag.
- To distort shapes, press Control (Windows) or Command (Macintosh) and drag a corner handle or a side handle. Shift-Control-drag (Windows) or Shift-Command-drag (Macintosh) a corner handle to taper the object—to move the selected corner and the adjoining corner equal distances from their origins. For more information on distorting objects.
- To end the transformation, click outside the selected object, instance, or text block.
When you apply a Distort transformation to a selected object, dragging a corner handle or an edge handle on the bounding box moves the corner or edge and realigns the adjoining edges. Shift-dragging a corner point tapers the object—that is, it moves that corner and the adjoining corner an equal distance and opposite direction from each other. The adjoining corner is the corner opposite the direction you drag. Control-dragging (Windows) or Command-dragging a middle point on an edge moves the entire edge freely.
Distorting by edge, corner, and taper, respectively
You can distort graphic objects by using the Distort command. You can also distort objects when freely transforming them. Note: The Distort command cannot modify symbols, bitmaps, video objects, sounds, gradients, object groups, or text. If a multiple selection contains any of these, only the shape objects are distorted. To modify text, first convert the characters to shape objects.
To distort graphic objects:
- Select a graphic object or objects on the Stage.
- Choose Modify > Transform > Distort.
- Place the pointer on one of the transformation handles and drag.
- To end the transformation, click outside the selected object or objects.
- Select a shape on the Stage.
- Choose Modify > Transform > Envelope.
- Drag the points and tangent handles to modify the envelope.
Note: The Envelope modifier cannot modify symbols, bitmaps, video objects, sounds, gradients, object groups, or text. If a multiple selection contains any of these, only the shape objects are distorted. To modify text, first convert the characters to shape objects.
Scaling an object enlarges or reduces the object horizontally, vertically, or both. You can scale an object by dragging or by entering values in the Transform panel.
To scale objects by dragging:
- Select a graphic object or objects on the Stage.
- Choose Modify > Transform > Scale.
- To scale the object both horizontally and vertically, drag one of the corner handles. Proportions are maintained as you scale. Shift-drag to scale nonuniformly
- To scale the object either horizontally or vertically, drag a center handle.
- To end the transformation, click outside the selected object or objects.
Note: When you increase the size of a number of items, those near the edges of the bounding box might be moved off of the Stage. If this occurs, choose View > Work Area to see the elements that are beyond the edges of the Stage.
To scale an object with the Transform panel:
- Select the object or objects.
- Choose Window > Transform.
- Enter a scale value between 1 and 1000 for vertical, horizontal, or both.
- Select Constrain to maintain proportions.
- Press Enter (Windows) or Return (Macintosh).
Rotating an object turns it around its transformation point. The transformation point is aligned with the registration point, which defaults to the center of the object, but you can move the point by dragging it. You can rotate an object by using the Rotate commands, by dragging with the Free Transform tool, or by specifying an angle in the Transform panel. When you rotate an object by dragging, you can also skew and scale the object in the same operation. When you rotate an object using the Transform panel, you can scale the object in the same operation.
To rotate and skew objects by dragging:
- Select the object or objects on the Stage.
- Choose Modify > Transform > Rotate and Skew.
- Drag a corner handle to rotate the object.
- Drag a center handle to skew the object.
- To end the transformation, click outside the selected object or objects.
- Select the object or objects.
- Choose Modify > Transform > Rotate 90° CW to rotate clockwise, or Rotate 90° CCW to rotate counterclockwise.
- Select the object or objects.
- Choose Window > Transform.
- Click Rotate.
- Enter a rotation angle.
- Press Enter (Windows) or Return (Macintosh) to apply the rotation.
- Select the object or objects.
- Choose Modify > Transform > Scale and Rotate.
- In the Scale and Rotate dialog box, enter values for Scale and Rotation.
- Click OK.
- Select the object or objects.
- Choose Window > Transform.
- Click Skew.
- Enter angles for the horizontal and vertical values.
You can flip objects across their vertical or horizontal axis without moving their relative position on the Stage.
To flip an object:
- Select the object.
- Choose Modify > Transform > Flip Vertical or Flip Horizontal.
You can create three types of text fields: static, dynamic, and input. All text fields support Unicode
- Static text fields display text that doesn't change characters dynamically.
- Dynamic text fields display dynamically updating text, such as sports scores, stock quotes, or weather reports.
- Input text fields enable users to enter text in forms or surveys.
You can also create scrolling text fields.
To create text, you place text blocks on the Stage using the Text tool. When creating static text, you can place text on a single line that expands as you type, or in a fixed-width block (for horizontal text) or fixed-height block (for vertical text) that expands and wraps words automatically. When creating dynamic or input text, you can place text on a single line, or create a text block with a fixed width and height. Flash displays a handle on the corner of a text block to identify the type of text block:
- For static horizontal text blocks that extend, a round handle appears at the upper right corner of the text block.
- For static horizontal text blocks with a defined height, a square handle appears at the upper right corner of the text block.
- For static vertical text with right-to-left orientation that extends, a round handle appears at the lower left corner of the text block.
- For static vertical text with right-to-left orientation and a fixed height, a square handle appears at the lower left corner of the text block.
- For static vertical text with left-to-right orientation that extends, a round handle appears at the lower right corner of the text block.
- For static vertical text with left-to-right orientation and a fixed height, a square handle appears at the lower right corner of the text block.
- For dynamic or input text blocks that extend, a round handle appears at the lower right corner of the text block.
- For dynamic or input text with a defined height and width, a square handle appears at the lower right corner of the text block.
- For dynamic scrollable text blocks, the round or square handle becomes solid black instead of hollow.
You can shift-double-click the handle of dynamic and input text fields to create text blocks that don't expand when you enter text on the Stage. This allows you to create a text block of a fixed size and fill it with more text than it can display to create scrolling text.
After you use the Text tool to create a text field, you use the Property inspector to indicate which type of text field you want and set values to control the way the text field and its contents appear in the Flash movie.
To set preferences for vertical text:
- Choose Edit > Preferences and click the Editing tab in the Preferences dialog box.
- Under Vertical Text, select Default Text Orientation to make new text blocks automatically orient vertically.
- Select Right to Left Text Flow to make vertical text automatically flow right-to-left.
- Select No Kerning to prevent kerning from being applied to vertical text. (Kerning remains enabled for horizontal text.)
- Select the Text tool.
- Choose Window > Property inspector.
- In the Property inspector, choose a text type from the pop-up menu to specify the type of text field:
- Choose Dynamic Text to create a field that displays dynamically updating text.
- Choose Input Text to create a field in which users can enter text.
- Choose Static Text to create a field which cannot update dynamically.
- For static text only: in the Property inspector, click the Text Direction button and select an option to specify the orientation of the text:
- Select Horizontal to flow text left to right horizontally (the default setting).
- Select Vertical Left-to-Right to flow text vertically, left to right.
- Select Vertical Right-to-Left to flow text vertically, right to left.
Note: Layout options for vertical text are disabled if the text is dynamic or input. Only static text can be vertical.
- To create a text block that displays text in a single line, click where you want the text to start.
- To create a text block with a fixed width (for horizontal text) or fixed height (for vertical text), position the pointer where you want the text to start and drag to the desired width or height.
- Select text attributes in the Property inspector
Drag its resize handle.
To switch a text block between fixed-width or fixed-height and extending:
Double-click the resize handle.
Setting text attributes
You can set the font and paragraph attributes of text. A font is an assortment of alphanumeric characters in a particular typeface design. Font attributes include font family, point size, style, color, character spacing, auto kerning, and character position. Paragraph attributes include alignment, margins, indents, and line spacing.
By default, font information is embedded in a published Flash movie (SWF file). You can choose to use device fonts, rather than embedding font information (horizontal text only).
Setting alignment, margins, indents, and line spacing
Alignment determines the position of each line of text in a paragraph relative to edges of the text block. Horizontal text is aligned relative to the left and right edges of the text block, and vertical text is aligned relative to the top and bottom edges of the text block. Text can be aligned to one edge of the text block, centered within the text block, or aligned to both edges of the text block (full justification).
Margins determine the amount of space between the border of a text block and a paragraph of text. Indents determine the distance between the margin of a paragraph and the beginning of the first line. For horizontal text, indents move the first line to the right the specified distance. For vertical text, indents move the first line down the specified distance.
Line spacing determines the distance between adjacent lines in a paragraph. For vertical text, line spacing adjusts the space between vertical columns.
To set alignment, margins, indents, and line spacing for horizontal text:
- Select the Text tool.
- To apply settings to existing text, use the Text tool to select a text block or text blocks on the Stage.
- Choose Window > Properties.
- In the Property inspector, click Format Options and set the following options:
- To set alignment, click the Left, Center, Right, or Full Justification button.
- To set left or right margins, click the triangle next to the Left Margin or Right Margin value and drag the slider to select a value, or enter a value in the numeric field.
- To specify indents, click the triangle next to the Indent value and drag the slider to select a value, or enter a value in the numeric field. (Either the right or left line is indented, depending on whether the text flows right to left or left to right.)
- To specify line spacing, click Format options. Click the triangle next to the Line Spacing value and drag the slider to select a value, or enter a value in the numeric field.
To set alignment, margins, indents, and line spacing for vertical text:
- Select the Text tool.
- To apply settings to existing text, select a text block or text blocks on the Stage.
- Choose Window > Properties.
- In the Property inspector, click Format Options and set the following options:
- To set alignment, click the Top, Center, Bottom, or Full Justification button.
- To set top or bottom margins, use the Left or Right margin control. Click the triangle next to the Left Margin value to set the top margin or the Right Margin value to set the bottom margin and drag the slider to select a value, or enter a value in the numeric field.
- To specify indents, click the triangle next to the Indent value and drag the slider to select a value, or enter a value in the numeric field.
- To specify line spacing, click the triangle next to the Line Spacing value and drag the slider to select a value, or enter a value in the numeric field.
When you create text, you can specify that the Flash Player use device fonts to display certain text blocks, so that Flash does not embed the font for that text. This can decrease the file size of the movie and increase legibility at text sizes below 10 points.
To specify that text be displayed using a device font:
- Select text blocks on the Stage containing text that you want to display using a device font.
- Choose Window > Properties.
- In the Property inspector, choose Static Text from the pop-up menu.
- Select Use Device Fonts.
- Select the horizontal text that you want to make selectable by a user.
- Choose Window > Properties.
- In the Property inspector, choose Static Text from the pop-up menu.
- If the text is not already specified as using a device font, select Use Device Fonts.
- Click Selectable.
- Open the library to which you want to add a font symbol.
- Choose New Font from the Options menu in the upper right corner of the Library panel.
- In the Font Symbol Properties dialog box, enter a name for the font symbol in the Name text box.
- Select a font from the Font menu or enter the name of a font in the Font text box.
- If desired, select Bold or Italic to apply the selected style to the font.
- Click OK.
- Select the font symbol in the Library panel.
- Do one of the following:
- Choose Linkage from the Options menu in the upper right corner of the Library panel.
- Right-click (Windows) or Control-click (Macintosh) the font symbol name in the Library panel, and choose Linkage from the context menu.
- Under Linkage in the Linkage Properties dialog box, select Export for Runtime Sharing.
- In the Identifier text box, enter a string to identify the font symbol.
- In the URL text box, enter the URL where the SWF movie file that contains the font symbol will be posted.
- Click OK.
- Select the Text tool.
- Drag to select characters.
- Double-click to select a word.
- Click to specify the beginning of the selection and Shift-click to specify the end of the selection.
- Press Ctrl+A (Windows) or Command+A (Macintosh) to select all the text in the block.
Select the Arrow tool and click a text block. Shift-click to select multiple text blocks.
Breaking text apart You can break apart text to place each character in a separate text block. Once you break text apart, you can quickly distribute the text blocks to separate layers to easily animate each block separately. For information on distributing objects to layers.
Note: You cannot break apart text in scrollable text fields.
You can also convert text to its component lines and fills to reshape, erase, and otherwise manipulate it. As with any other shape, you can individually group these converted characters, or change them to symbols and animate them. Once you've converted text to lines and fills, you can no longer edit them as text.
To break apart text:
- Select the Arrow tool and click a text block.
- Choose Modify > Break Apart. Each character in the selected text is placed into a separate text block. The text remains in the same position on the Stage.
- Choose Modify > Break Apart again to convert the characters to shapes on the Stage.
Linking text to a URL (horizontal text only)
You can link horizontal text to a URL to let users jump to other files by clicking the text.
To link horizontal text to a URL:
- Use the Text tool to select text in a text block.
- Use the Arrow tool to select a text block on the Stage, to link all the text in the block to a URL.
- If the Property inspector is not already displayed, choose Window > Properties.
- For Link, enter the URL to which you want to link the text block.
An alert box indicating missing fonts in a document appears the first time a scene containing a missing font is displayed on the Stage. If you publish or export the document without displaying any scenes containing the missing fonts, the alert box appears during the publish or export operation. If you choose to select substitute fonts, the Font Mapping dialog box appears, listing all missing fonts in the document and letting you select a substitute for each.
Note: If the document contains many missing fonts, a delay may occur while Flash generates the list of missing fonts.
You can apply the missing font to new or existing text in the current document. The text is displayed on your system using the substitute font, but the missing font information is saved with the document. If the document is reopened on a system that includes the missing font, the text is displayed using that font.
Text attributes such as font size, leading, kerning, and so on may need to be adjusted when the text is displayed in the missing font, because the formatting you apply is based on the appearance of the text in the substitute font.
Controlling text with ActionScript A dynamic or input text field is an instance of the ActionScript TextField object. When you create a text field, you can assign it an instance name in the Property inspector. You can use the instance name in ActionScript statements to set, change, and format the text field and its content using the TextField andTextFormat objects.
The TextField object has the same properties as the MovieClip object, and has methods that let you set, select, and manipulate the text. The TextFormat object lets you set character and paragraph values for the text. You can use these ActionScript objects instead of the text Property inspector to control the settings of a text field.
You can use a text field's variable name or instance name to assign it text that contains HTML tags. Flash preserves the rich text formatting applied to the text field with ActionScript.
If you assign a variable to a text field, the text field displays the variable's value. You can use ActionScript to pass the variable to other parts of the movie, to a server-side application for storing in a database, and so on. You can also replace the value of the variable by reading it from a server-side application or by loading it from another part of the movie. For more information on using variables, see About variables. For more information about connecting to external applications,
Symbols, instances, and library assets overviewSymbols, instances, and library assets overview
A symbol is a graphic, button, or movie clip that you create once in Macromedia Flash MX and can reuse throughout your movie or in other movies. A symbol can include artwork that you import from another application. Any symbol you create automatically becomes part of the library for the current document. (For more information on the library.
An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be very different from its symbol in color, size, and function. Editing the symbol updates all of its instances, but applying effects to an instance of a symbol updates only that instance. You can also create font symbols in Flash.
Using symbols in your movies dramatically reduces file size; saving several instances of a symbol requires less storage space than saving multiple copies of the contents of the symbol. For example, you can reduce the file size of your movies if you convert static graphics such as background images into symbols that you then reuse. Using symbols can also speed movie playback, because a symbol needs to be downloaded to the Flash Player only once.
You can share symbols among Flash movies as runtime or author-time shared library assets. For runtime shared assets, you can link assets in a source movie to any number of destination movies, without importing the assets into the destination mov
For an interactive introduction to using symbols and instances, choose Help > Lessons > Symbols.
A symbol in the library and two instances on the Stage, with effects applied to the instance on the right
Creating symbols
You can create a symbol from selected objects on the Stage, or you can create an empty symbol and make or import the content in symbol-editing mode. Symbols can have all the functionality that you can create with Flash, including animation.
By using symbols that contain animation, you can create movies with a lot of movement while minimizing file size. Consider creating animation in a symbol when there is a repetitive or cyclic action—the up-and-down motion of a bird's wings, for example.
You can also add symbols to your movie by using runtime or author-time shared library assets.
Symbol Properties dialog box in basic and advanced views. The dialog box is titled Create New Symbol if you are creating a new symbol, and Convert to Symbol if you are converting a graphic to a symbol.
To convert selected elements to a symbol:
- Choose Insert > Convert to Symbol.
- Drag the selection to the Library panel.
- Right-click (Windows) or Control-click (Macintosh) and choose Convert to Symbol from the context menu.
- In the Convert to Symbol dialog box, type the name of the symbol and choose the behavior—Graphic, Button.
- For Registration, click on a square in the diagram to place the registration point for the symbol.
- Click OK.
To create a new empty symbol:
- Choose Insert > New Symbol.
- Click the New Symbol button at the bottom left of the Library panel.
- Choose New Symbol from the Library options menu in the upper right corner of the Library panel.
- In the Create New Symbol dialog box, type the name of the symbol and choose the behavior—Graphic, Button, or Movie Clip.
- Click OK.
- To create the symbol content, use the Timeline, draw with the drawing tools, import media, or create instances of other symbols.
- Click the Back button at the left side of the information bar above the Stage.
- Choose Edit > Edit Document.
- Click the scene name in the information bar above the Stage.
- On the main Timeline, select every frame in every layer of the animation on the Stage that you want to use.
- Right-click (Windows) or Control-click (Macintosh) any selected frame and choose Copy Frames from the context menu. Choose Cut if you want to delete the sequence after converting it to a movie clip.
- Choose Edit > Copy Frames. Choose Cut Frames if you want to delete the sequence after converting it to a movie clip.
- Deselect your selection and make sure nothing on the Stage is selected. Choose Insert > New Symbol.
- In the Create New Symbol dialog box, name the symbol. For Behavior, choose Movie Clip, then click OK.
Flash opens a new symbol for editing in symbol-editing mode. - On the Timeline, click Frame 1 on Layer 1, and choose Edit > Paste Frames.
This pastes the frames (and any layers and layer names) you copied from the main Timeline to the Timeline of this movie clip symbol. Any animation, buttons, or interactivity from the frames you copied now becomes an independent animation (a movie clip symbol) that you can reuse throughout your movie. - Click the Back button at the left side of the information bar above the Stage.
- Choose Edit > Edit Document.
- Click the scene name in the information bar above the Stage.
Duplicating a symbol lets you use an existing symbol as a starting point for creating a new symbol.
To duplicate a symbol using the Library panel:
- Select a symbol in the Library panel.
- Right-click (Windows) or Control-click (Macintosh) and choose Duplicate from the context menu.
- Choose Duplicate from the Library options menu.
- Select an instance of the symbol on the Stage.
- Choose Modify > Duplicate Symbol.
The symbol is duplicated and the instance is replaced with an instance of the duplicate symbol.
Once you've created a symbol, you can create instances of that symbol wherever you like throughout the movie, including inside other symbols. When you modify the symbol, all instances of the symbol are updated.
Instances are given default names when you create them. You can apply custom names to instances in the Property inspector.
To create a new instance of a symbol:
- Select a layer in the Timeline.
- Choose Window > Library to open the library.
- Drag the symbol from the library to the Stage.
- If you created an instance of a graphic symbol, choose Insert > Frame to add the number of frames that will contain the graphic symbol.
- Select the instance on the Stage.
- Choose Window > Properties if the Property inspector is not visible.
- Enter a name in the Instance Name text box on the left side of the Property inspector (below the Symbol Behavior pop-up list).
To create a button:
- Choose Edit > Deselect All to ensure that nothing is selected on the Stage.
- Choose Insert > New Symbol, or press Control+F8 (Windows) or Command+F8 (Macintosh).
To create the button, you convert the button frames to keyframes.
- In the Create New Symbol dialog box, enter a name for the new button symbol, and for Behavior choose Button.
Flash switches to symbol-editing mode. The Timeline header changes to display four consecutive frames labeled Up, Over, Down, and Hit. The first frame, Up, is a blank keyframe.
- To create the Up state button image, use the drawing tools, import a graphic, or place an instance of another symbol on the Stage.
You can use a graphic or movie clip symbol in a button, but you cannot use another button in a button. Use a movie clip symbol if you want the button to be animated.
- Click the second frame, labeled Over, and choose Insert > Keyframe.
- Change the button image for the Over state.
- Repeat steps 5 and 6 for the Down frame and the Hit frame.
The Hit frame is not visible on the Stage, but it defines the area of the button that responds when clicked. Make sure that the graphic for the Hit frame is a solid area large enough to encompass all the graphic elements of the Up, Down, and Over frames. It can also be larger than the visible button. If you do not specify a Hit frame, the image for the Up state is used as the Hit frame.
You can create a disjoint rollover, in which rolling over a button changes another graphic on the Stage. To do this, you place the Hit frame in a different location than the other button frames.
- To assign a sound to a state of the button, select that state's frame in the Timeline, choose Window > Properties, and then select a sound from the Sound menu in the Property inspector.
- When you've finished, choose Edit > Edit Document. Drag the button symbol out of the Library panel to create an instance of it in the movie.
By default, Flash keeps buttons disabled as you create them, to make it easier to select and work with them. When a button is disabled, clicking the button selects it. When a button is enabled, it responds to the mouse events that you've specified as if the movie were playing. You can still select enabled buttons, however. In general, it is best to disable buttons as you work, and enable buttons to quickly test their behavior.
To enable and disable buttons:
Choose Control > Enable Simple Buttons. A check mark appears next to the command to indicate buttons are enabled. Choose the command again to disable buttons.
Any buttons on the Stage now respond. As you move the pointer over a button, Flash displays the Over frame; when you click within the button's active area, Flash displays the Down frame.
To select an enabled button:
Use the Arrow tool to drag a selection rectangle around the button.
To move or edit an enabled button:
- Select the button, as described above.
- Use the arrow keys to move the button.
- If the Property inspector is not visible, choose Window > Properties to edit the button in the Property inspector, or Alt-double-click (Windows) or Option-double-click the button (Macintosh).
- Choose Control > Enable Simple Buttons. Move the pointer over the enabled button to test it.
- Select the button in the Library panel and click the Play button in the Library preview window.
- Choose Control > Test Scene or Control > Test Movie.
When you edit a symbol, Flash updates all the instances of that symbol in the movie. Flash provides three ways for you to edit symbols. You can edit the symbol in context with the other objects on the Stage using the Edit in Place command. Other objects are dimmed to distinguish them from the symbol you are editing. The name of the symbol you are editing is displayed in an information bar at the top of the Stage, to the right of to the current scene name.
You can also edit a symbol in a separate window, using the Edit in New Window command. Editing a symbol in a separate window lets you see both the symbol and the main Timeline at the same time. The name of the symbol you are editing is displayed in the information bar at the top of the Stage.
You edit the symbol by changing the window from the Stage view to a view of only the symbol, using symbol-editing mode. The name of the symbol you are editing is displayed in the information bar at the top of the Stage, to the right of the current scene name.
When you edit a symbol, all instances of the symbol throughout the movie are updated to reflect your edits. While editing a symbol, you can use any of the drawing tools, import media, or create instances of other symbols.
To edit a symbol in place:
- Double-click an instance of the symbol on the Stage.
- Select an instance of the symbol on the Stage and right-click (Windows) or Control-click (Macintosh), and choose Edit in Place from the context menu.
- Select an instance of the symbol on the Stage and choose Edit > Edit in Place.
- Edit the symbol as needed.
- Click the Back button at the left side of the information bar at the top of the Stage.
- Choose the current scene name from the Scene pop-up menu in the information bar at the top of the Stage.
- Choose Edit > Edit Document.
- Select an instance of the symbol on the Stage and right-click (Windows) or Control-click (Macintosh), and choose Edit in New Window from the context menu.
- Edit the symbol as needed.
- Click the Close box in the upper right corner (Windows) or upper left corner (Macintosh) to close the new window, and click in the main movie window to return to editing the main movie.
- Double-click the symbol's icon in the Library panel.
- Select an instance of the symbol on the Stage and right-click (Windows) or Control-click (Macintosh) and choose Edit from the context menu.
- Select an instance of the symbol on the Stage and choose Edit > Edit Symbols.
- Select the symbol in the Library panel and choose Edit from the Library options menu, or right-click (Windows) or Control-click (Macintosh) the symbol in the Library panel and choose Edit from the context menu.
- Edit the symbol as needed on the Stage.
- Click the Back button at the left side of the information bar at the top of the Stage.
- Choose Edit > Edit Document.
- Click the scene name in the information bar at the top of the Stage.
You create animation in a Macromedia Flash MX document by changing the contents of successive frames. You can make an object move across the Stage, increase or decrease its size, rotate, change color, fade in or out, or change shape. Changes can occur independently of, or in concert with, other changes. For example, you can make an object rotate and fade in as it moves across the Stage.
There are two methods for creating an animation sequence in Flash: tweened animation, and frame-by-frame animation. In tweened animation, you create starting and ending frames and let Flash create the frames in between. Flash varies the object's size, rotation, color, or other attributes evenly between the starting and ending frames to create the appearance of movement.
About tweened animation Flash can create two types of tweened animation, motion tweening and shape tweening.
- In motion tweening, you define properties such as position, size, and rotation for an instance, group, or text block at one point in time, and then you change those properties at another point in time. You can also apply a motion tween along a path.
- In shape tweening, you draw a shape at one point in time, and then you change that shape or draw another shape at another point in time. Flash interpolates the values or shapes for the frames in between, creating the animation.
Creating keyframes
A keyframe is a frame where you define changes in the animation. When you create frame-by-frame animation, every frame is a keyframe. In tweened animation, you define keyframes at significant points in the animation and let Flash create the contents of frames in between. Flash displays the interpolated frames of a tweened animation as light-blue or light-green with an arrow drawn between keyframes. Because Flash documents save the shapes in each keyframe, you should create keyframes only at those points in the artwork where something changes.
Keyframes are indicated in the Timeline: a keyframe with content on it is represented by a solid circle, and an empty keyframe is represented by an empty circle before the frame. Subsequent frames that you add to the same layer will have the same content as the keyframe.
To create a keyframe, do one of the following:
- Select a frame in the Timeline and choose Insert > Keyframe.
- Right-click (Windows) or Control-click (Macintosh) a frame in the Timeline and choose Insert Keyframe.
Flash distinguishes tweened animation from frame-by-frame animation in the Timeline as follows:
- Motion tweens are indicated by a black dot at the beginning keyframe; intermediate tweened frames have a black arrow with a light-blue background.
- Shape tweens are indicated by a black dot at the beginning keyframe; intermediate frames have a black arrow with a light-green background.
- A dashed line indicates that the tween is broken or incomplete, such as when the final keyframe is missing.
- A single keyframe is indicated by a black dot. Light-gray frames after a single keyframe contain the same content with no changes and have a black line with a hollow rectangle at the last frame of the span.
- A small a indicates that the frame has been assigned a frame action with the Actions panel.
- A red flag indicates that the frame contains a label or comment.
- A gold anchor indicates that the frame is a named anchor.
The frame rate, the speed at which the animation is played, is measured in number of frames per second. A frame rate that's too slow makes the animation appear to stop and start; a frame rate that's too fast blurs the details of the animation. A frame rate of 12 frames per second (fps) usually gives the best results on the Web. QuickTime and AVI movies generally have a frame rate of 12 fps, while the standard motion-picture rate is 24 fps.
The complexity of the animation and the speed of the computer on which the animation is being played affect the smoothness of the playback. Test your animations on a variety of machines to determine optimum frame rates.
Extending still images When you create a background for animation, it's often necessary that a still image remain the same for several frames. Adding a span of new frames (not keyframes) to a layer extends the contents of the last keyframe in all the new frames.
To extend a still image through multiple frames:
- Create an image in the first keyframe of the sequence.
- Select a frame to the right, marking the end of the span of frames that you want to add.
- Choose Insert > Frame.
To use a shortcut to extend still images:
- Create an image in the first keyframe.
- Alt-drag (Windows) or Option-drag (Macintosh) the keyframe to the right. This creates a span of new frames, but without a new keyframe at the end point.
New layers created during the Distribute to Layers operation are named according to the name of the element that each contains:
- A new layer containing a library asset (such as a symbol, bitmap, or video clip) is given the same name as the asset.
- A new layer containing a named instance is given the name of the instance.
- A new layer containing a character from a broken-apart text block is named with the character.
- A new layer containing a graphic object (which has no name) is named Layer1 (or Layer2, and so on), because graphic objects do not have names.
Creating frame-by-frame animations
To create a frame-by-frame animation, you define each frame as a keyframe and create a different image for each frame. Each new keyframe initially contains the same contents as the keyframe preceding it, so you can modify the frames in the animation incrementally.
To create a frame-by-frame animation:
- Click a layer name to make it the current layer, and select a frame in the layer where you want the animation to start.
- If the frame isn't already a keyframe, choose Insert > Keyframe to make it one.
- Create the artwork for the first frame of the sequence.
You can use the drawing tools, paste graphics from the Clipboard, or import a file. - Click the next frame to the right in the same row and choose Insert > Keyframe, or right-click (Windows) or Control-click (Macintosh) and choose Insert Keyframe from the context menu.
This adds a new keyframe whose contents are the same as those of the first keyframe. - Alter the contents of this frame on the Stage to develop the next increment of the animation.
- To complete your frame-by-frame animation sequence, repeat steps 4 and 5 until you've built the motion you want.
- To test the animation sequence, choose Control > Play or click the Play button on the Controller.
Normally, Flash displays one frame of the animation sequence at a time on the Stage. To help you position and edit a frame-by-frame animation, you can view two or more frames on the Stage at once. The frame under the playhead appears in full color, while surrounding frames are dimmed, making it appear as if each frame were drawn on a sheet of translucent onion-skin paper and the sheets were stacked on top of each other. Dimmed frames cannot be edited.
To simultaneously see several frames of an animation on the Stage:
Click the Onion Skin button. All frames between the Start Onion Skin and End Onion Skin markers (in the Timeline header) are superimposed as one frame in the Movie window.
To control onion skinning display, do any of the following:
- To display onion skinned frames as outlines, click the Onion Skin Outlines button.
- To change the position of either onion skin marker, drag its pointer to a new location. (Normally, the onion skin markers move in conjunction with the current frame pointer.)
- To enable editing of all frames between onion skin markers, click the Edit Multiple Frames button. Usually onion skinning lets you edit only the current frame. However, you can display the contents of each frame between the onion skin markers normally, and make each available for editing, regardless of which is the current frame.
For spotlight effects and transitions, you can use a mask layer to create a hole through which underlying layers are visible. A mask item can be a filled shape, a type object, an instance of a graphic symbol, or a movie clip. You can group multiple layers together under a single mask layer to create sophisticated effects.
To create dynamic effects, you can animate a mask layer. For a filled shape used as a mask, you use shape tweening; for a type object, graphic instance, or movie clip, you use motion tweening. When using a movie clip instance as a mask, you can animate the mask along a motion path.
To create a mask layer, you place a mask item on the layer that you want to use as a mask. Instead of having a fill or stroke, the mask item acts as a window that reveals the area of linked layers that lie beneath it. The rest of the mask layer conceals everything except what shows through the mask item. A mask layer can contain only one mask item. You cannot have a mask layer inside a button, and you cannot apply a mask to another mask.
To create a mask layer:
- Select or create a layer containing the objects that will appear inside the mask.
- With the layer selected, choose Insert > Layer to create a new layer above it.
A mask layer always masks the layer immediately below it, so be sure to create the mask layer in the proper place. - Place a filled shape, type, or an instance of a symbol on the mask layer.
Flash ignores bitmaps, gradients, transparency, colors, and line styles in a mask layer. Any filled area will be completely transparent in the mask; any nonfilled area will be opaque. - Right-click (Windows) or Control-click (Macintosh) the mask layer's name in the Timeline, and choose Mask from the context menu.
The layer is converted to a mask layer, indicated by a mask layer icon. The layer immediately below it is linked to the mask layer, and its contents show through the filled area on the mask. The masked layer name is indented, and its icon changes to a masked layer icon.
To display the mask effect in Flash, lock the mask layer and the masked layer.
- Drag an existing layer directly below the mask layer.
- Create a new layer anywhere below the mask layer.
- Choose Modify > Layer and select Masked in the Layer Properties dialog box.
- Select the layer you want to unlink.
- Drag the layer above the mask layer.
- Choose Modify > Layer and select Normal.
- Select the mask layer in the Timeline.
- Click in the Lock column to unlock the mask layer.
- If the mask object is a filled shape, apply shape tweening to the object as described in Tweening shapes.
- If the mask object is a type object or graphic symbol instance, apply motion tweening to the object as described in Tweening instances, groups, and type.
- When you've completed the animation operation, click in the Lock column for the mask layer to lock the layer again.
- Select the mask layer in the Timeline.
- Double-click the movie clip on the Stage to edit the clip in place and to display the movie clip's Timeline.
- Apply motion tweening to the movie clip
- When you've completed the animation procedure, click the Back button in the Edit in Place window to return to movie-editing mode.
- Click in the Lock column for the mask layer to lock the layer again.
To add an action to a Flash document, you must attach it to a button or movie clip, or to a frame in the Timeline. The Actions panel allows you to select, drag and drop, rearrange, and delete actions.
You can use the Actions panel in two different editing modes: normal and expert. In normal mode you write actions by filling in parameter text boxes. In expert mode you write and edit actions directly in a Script pane, much like writing scripts with a text editor.
To display the Actions panel, do one of the following:
- Choose Window > Actions.
- Press F2.
Select an instance of a button, movie clip, or frame.
The Actions panel title changes to reflect the selection.
To navigate through the Actions toolbox, do the following:
- To select the first item in the Actions toolbox, press Home.
- To select the last item in the Actions toolbox, press End.
- To select the previous item in the Actions toolbox, press the Up Arrow or Left Arrow key.
- To select the next item in the Actions toolbox, press the Down Arrow or Right Arrow key.
- To expand or collapse a folder, press Enter or Spacebar.
- To insert an item into a script, press Enter or Spacebar. (This is the same as selecting Add to Script from the item's context menu.)
- To scroll up a page of items, press Page Up.
- To scroll down a page of items, press Page Down.
- To search for an Actions toolbox item by initial character, type the character. This search is not case-sensitive. You can type the character multiple times to cycle through all the items that start with that character.
In normal mode you build scripts by selecting items from the Actions toolbox, the list on the left side of the Actions panel. (You can also select actions from the Add (+) button pop-up menu.) The Actions toolbox separates items into categories such as Actions, Properties, and Objects, and also provides an Index category that lists all items alphabetically. When you click an item once, its description appears at the upper right of the panel. When you double-click an item, it appears on the right side of the panel, in the Script pane.
In normal mode you can add, delete, or change the order of statements in the Script pane; you can also enter parameters for actions in text boxes above the Script pane. The Actions panel also lets you find and replace text, view script line numbers, and "pin" a script—that is, keep a script in the Script pane when you click away from the object or frame. You can also use the jump menu to go to any script on any object in the current frame.
To display the Actions panel in normal mode:
- Select Windows > Actions.
- Click the arrow in the upper right corner of the Actions panel to display the pop-up menu, and choose Normal Mode.
- Click anywhere in the Actions panel. Then press Control+Shift+N (Windows) or Command+Shift+N (Macintosh).
- Click a category in the Actions toolbox to display the actions in that category, and click an action.
- Select a line of code in the Script pane.
To add an action to the Script pane, do one of the following:
- Click a category in the Actions toolbox to display the actions in that category. Then either double-click an action, drag it to the Script pane, or right-click (Windows) or Control-click (Macintosh) and select Add to Script.
- Click the Add (+) button and select an action from the pop-up menu.
- Press Escape and a shortcut key. For example, Escape+st adds a stop action. (To view a list of shortcut keys, select View Esc Shortcut Keys in the Actions panel pop-up menu; select this option again to hide the list.)
- Select a statement in the Script pane.
- Click the Delete (-) button or press the Delete key.
- Click the Up or Down Arrow button.
- Select the statement and drag it up or down.
- Add an action to or select a statement in the Script pane.
- Enter values in the parameter text boxes above the Script pane.
- To go to a specific line in a script, choose GoTo Line from the Actions panel pop-up menu or press Control+G (Windows) or Command+G (Macintosh); then enter the line number.
- To find text, click the Find button above the Script pane, choose Find from the Actions panel pop-up menu, or press Control+F (Windows) or Command+F (Macintosh). Enter the text you want to find in the dialog box that appears.
- To find text again, press F3 or choose Find Again from the Actions panel pop-up menu.
- To replace text, click the Replace button above the Script pane, choose Replace from the Actions panel pop-up menu, or press Control+H (Windows) or Command-H (Macintosh). Enter the text you want to find and the text you want to replace it with in the dialog box that appears.
In expert mode, Replace scans the entire body of text in a script. In normal mode, Replace searches and replaces text only in the parameter box of each action. For example, in normal mode you cannot replace all gotoAndPlay actions with gotoAndStop.
In expert mode you create scripts by entering ActionScript directly into the Script pane on the right side of the Actions panel. You edit actions, enter parameters for actions, or delete actions directly in the Script pane, much as you would create a script in a text editor. You can also use the Actions toolbox (the left side of the Actions panel) and the Add (+) button to add actions to the Script pane, but the parameter text boxes don't appear. You cannot move statements with the Up Arrow and Down Arrow buttons or delete statements with the Delete (-) button.
Like normal mode, expert mode lets you use the buttons above the Script pane to find and replace text, set and remove debugging breakpoints, view line numbers, and insert target paths; it also allows you to use the jump menu and the Script Pin button.
In expert mode you can also check syntax for errors, automatically format code, and use code hints to help you complete syntax. In addition, the punctuation balance feature helps you pair parentheses, braces, or brackets.
To display the Actions panel in expert mode:
- Select Windows > Actions.
- Click the arrow in the upper right corner of the Actions panel to display the pop-up menu, and choose Expert Mode.
- Click anywhere in the Actions panel. Then press Control+Shift+E (Windows) or Command+Shift+E (Macintosh).
- Click the Check Syntax button.
- Choose Check Syntax from the Actions panel pop-up menu (at the upper right of the panel). Syntax errors are listed in Output window.
- Press Control+T (Windows) or Command+T (Macintosh).
- Click the Auto Format button.
- Choose Auto Format from the Actions panel pop-up menu.
- Press Control+Shift+F (Windows) or Command+Shift+F (Macintosh).
- Choose Auto Format Options from the Actions panel pop-up menu.
The Auto Format Options dialog box appears.
- Select any of the check boxes. To see the effect of each selection, look in the Preview pane.
Automatic indentation is turned on by default. To turn it off, deselect Automatic Indentation in ActionScript Editor preferences.
When automatic indentation is turned on, the text you type after ( or { is automatically indented according to the Tab Size setting in ActionScript Editor preferences. To indent another line in the Script pane, select the line and press Tab. To remove the indent, press Shift+Tab.
To use punctuation balance, do the following:
- Click between braces, brackets, or parentheses in your script.
- Press Control+' (Windows) or Command+' (Macintosh) to highlight the text between braces, brackets, or parentheses.
The highlighting helps you check whether opening punctuation has correct corresponding closing punctuation.
While working in the Actions panel, you can switch between normal mode and expert mode at any time. When you switch modes, Flash maintains your script's formatting unless you change the script. For example, if you write a script in expert mode with your own style of indentation and switch to normal mode to view it, but make no changes, the formatting does not change. If, however, you modify the script in normal mode, Flash removes your custom indentation and formats the script using the Auto Format Options settings.
To switch editing modes, do one of the following:
- Choose Normal Mode or Expert Mode from the Actions panel pop-up menu (at the upper right of the panel) or from the View Options pop-up menu above the Script pane. A check mark indicates the selected mode.
- To switch to normal mode, press Control+Shift+N (Windows) or Command+Shift+N (Macintosh).
- To switch to expert mode, press Control+Shift+E (Windows) or Command+Shift+E (Macintosh).
You cannot use normal mode to view an expert mode script that contains errors. If you try, you'll receive the message "This script contains syntax errors. It must be edited in expert mode."
You can use normal mode to view an expert mode script that uses ActionScript elements that are not supported by the current publish settings. However, if you export such a script, you'll receive a warning message.
Using code hints When you work in the Actions panel, Flash can detect what action you are entering and display a code hint—a tooltip containing the complete syntax for that action or a pop-up menu listing possible method or property names. In expert mode, code hints appear for parameters, properties, and events when you enter certain characters in the Script pane. In normal mode, code hints appear for parameters and properties (but not events) in the parameter text boxes when the Expression box is selected.
To enable automatic code hints:
- Choose Preferences from the Actions panel pop-up menu (at the upper right of the panel).
- On the ActionScript Editor tab, select Code Hints.
- Click the Show Code Hint button above the Script pane (at the right side of the Actions panel).
- From the Actions panel pop-up menu (at the upper right of the panel), choose Show Code Hints.
- Press Control+Spacebar (Windows) or Command+Spacebar (Macintosh).
- Type an open parenthesis [(] after an action name.
The code hint appears. - Enter a value for the parameter. If there is more than one parameter, separate the values with commas.
- Type a closing parenthesis [)].
- Click outside the statement.
- Press Escape.
- Type a dot after the suffix of an object name.
- Type an open parenthesis [(] after an event handler name.
- To navigate through the code hint, use the Up and Down Arrow keys.
- To select an item in the menu, press Return or Tab, or double-click the item.
- Choose one of the menu items.
- Click outside the statement.
- Type a closing parenthesis [)] if you've already typed an open parenthesis.
- Press Escape.
To assign an action to a movie clip:
- Select a movie clip instance and choose Window > Actions.
- Click a folder in the Actions toolbox (at the left side of the panel). Double-click an action to add it to the Script pane (at the right side of the panel).
- Drag an action from theActions toolbox to the Script pane.
- Click the Add (+) button and choose an action from the pop-up menu.
- Use the keyboard shortcut listed next to an action in the Add (+) button pop-up menu.
- In the parameter boxes at the top of the panel, select parameters for the action as needed.
Parameters vary depending on the action you choose. For detailed information on the required parameters for each action, see the online ActionScript Dictionary in the Help menu. To insert a target path for a movie clip into a parameter text box, click the Insert Target Path button above the Script pane.
ActionScript, the scripting language of Macromedia Flash MX, allows you to create a movie that behaves exactly as you want. You don't need to understand every ActionScript element to begin scripting; if you have a clear goal, you can start building scripts with simple actions. You can incorporate new elements of the language as you learn them to accomplish more complicated tasks.
Like other scripting languages, ActionScript follows its own rules of syntax, reserves keywords, provides operators, and allows you to use variables to store and retrieve information. ActionScript includes built-in objects and functions and allows you to create your own objects and functions.
The ActionScript syntax and style closely resemble that of JavaScript. Flash MX understands ActionScript written in any previous version of Flash.
This chapter introduces you to ActionScript as an object-oriented scripting language and provides an overview of ActionScript terms and basic programming concepts such as functions, variables, statements, operators, conditionals, and loops. It also deconstructs a sample script so that you can begin to understand ActionScript syntax. The online ActionScript Dictionary contains a detailed entry for every ActionScript element.
To begin scripting with ActionScript right away, complete the ActionScript tutorial (Help > Tutorials > Introduction to ActionScript).
Differences between ActionScript and JavaScript
ActionScript is similar to the core JavaScript programming language. You don't need to know JavaScript to use and learn ActionScript; however, if you know JavaScript, ActionScript will appear familiar to you.
This manual does not attempt to teach programming in general. There are many resources available that provide more information about general programming concepts and the JavaScript language.
- The European Computers Manufacturers Association (ECMA) document ECMA-262 is derived from JavaScript and serves as the international standard for the JavaScript language. ActionScript is based on the ECMA-262 specification.
- Netscape DevEdge Online has a JavaScript Developer Central site that contains documentation and articles useful for understanding ActionScript. The most valuable resource is the Core JavaScript Guide.
- ActionScript does not support browser-specific objects such as Document, Window, and Anchor.
- ActionScript does not completely support all of the JavaScript built-in objects.
- ActionScript supports syntax constructs that are not permitted in JavaScript (for example, the tellTarget and ifFrameLoaded actions and slash syntax). However, the use of these syntax constructs is not recommended; instead, use ActionScript elements that are like those in JavaScript (for example, with, _framesloaded, and dot syntax).
- ActionScript does not support some JavaScript syntax constructs, such as try, catch, throw, and statement labels.
- ActionScript does not support the JavaScript Function constructor.
- In ActionScript, the eval action can only perform variable references.
- In JavaScript, toString of undefined is undefined. In Flash 5 and Flash MX, for Flash 4 compatibility, toString of undefined is "".
- In JavaScript, evaluating undefined in a numeric context results in NaN. In Flash 5 and Flash MX, for Flash 4 compatibility, evaluating undefined results in 0.
- In JavaScript, when a string is evaluated in a Boolean context and the string has a nonzero length, the result is true; if the string doesn't have a nonzero length, the result is false. In ActionScript, the string is converted to a number. If the number is nonzero, the result is true; otherwise, the result is false.
In object-oriented scripting, information is organized into groups called classes. You can create multiple instances of a class, called objects, to use in your scripts. You can create your own classes and use the built-in ActionScript classes; the built-in classes are located in the Objects folder of the Actions panel.
When you create a class, you define all the properties (characteristics) and methods (behaviors) of each object it creates, just as real-world objects are defined. For example, a person could be said to have properties such as gender, height, and hair color and methods such as talk, walk, and throw. In this example, Person would be a class, and each individual person would be an object, or an instance of that class.
Objects in ActionScript can be pure containers for data, or they can be graphically represented on the Stage as movie clips, buttons, or text fields. All movie clips are instances of the built-in class MovieClip, and all buttons are instances of the built-in class Button. Each movie clip instance contains all the properties (for example, _height, _rotation, _totalframes) and all the methods (for example, gotoAndPlay, loadMovie, startDrag) of the MovieClip class.
To define a class, you create a special function called a constructor function. (Built-in classes have built-in constructor functions.) For example, if you want information about a bicycle rider in your movie, you could create a constructor function, Biker, with the properties time and distance and the method getSpeed, which tells you how fast the biker is traveling:
function Biker(t, d) {
this.time = t;
this.distance = d;
this.getSpeed = function() {return this.time / this.distance;};
}
In this example, you create a function that needs two pieces of information, or parameters, to do its job: t and d. When you call the function to create new instances of the object, you pass it the parameters. The following code creates instances of the object Biker called emma and hamish.
emma = new Biker(30, 5);
hamish = new Biker(40, 5);
In object-oriented scripting, classes can receive properties and methods from each other according to a specific order; this is called inheritance. You can use inheritance to extend or redefine the properties and methods of a class. A class that inherits from another class is called a subclass. A class that passes properties and methods to another class is called a superclass. A class can be both a subclass and a superclass.
How scripts flow Flash executes ActionScript statements starting with the first statement and continuing in order until it reaches the final statement or a statement that instructs ActionScript to go somewhere else.
Some actions that send ActionScript somewhere other than the next statement are if statements, do..while loops, and the return action.
A flow chart of the if..else action
A flow chart of the do..while action
An if statement is called a conditional statement or a "logical branch" because it controls the flow of a script based on the evaluation of a certain condition. For example, the following code checks to see if the value of the number variable is less than or equal to 10. If the check returns true (for example, the value of number is 5), the variable alert is set and displays its value, as shown here:
if (myNumber <= 10) {
alert = "The number is less than or equal to 10";
}
You can also add else statements to create a more complicated conditional statement. In the following example, if the condition returns true (for example, the value of number is 3), the statement between the first set of curly braces runs and the alert variable is set in the second line. If the condition returns false (for example, the value of number is 30), the first block of code is skipped and the statement between the curly braces after the else statement runs, as in the following:
if (number <= 10) {
alert = "The number is less than or equal to 10";
} else {
alert = "The number is greater than 10";
}
For more information, see Controlling flow in scripts.
Loops repeat an action a certain number of times or until a certain condition is met. In the following example, a movie clip is duplicated five times:
i = 0;
do {
duplicateMovieClip ("myMovieClip", "newMovieClip" + i, i);
newName = eval("newMovieClip" + i);
setProperty(newName, _x, getProperty("myMovieClip", _x) + (i * 5));
i = i + 1;
} while (i <= 5);
Controlling when ActionScript runs
When you write a script, you use the Actions panel to attach the script to a frame on a Timeline, or to a button or movie clip on the Stage. Scripts attached to a frame run, or execute, when the playhead enters that frame. However, scripts attached to the first frame of a movie may behave differently than those attached to subsequent frames because the first frame in a movie is rendered incrementally--objects are drawn on the Stage as they download into the Flash Player--and this can effect when actions execute. All frames after the first frame are rendered all at once when every object in the frame is available.
Scripts attached to movie clips or buttons execute when an event occurs. An event is an occurrence in the movie such as a mouse movement, a keypress, or a movie clip being loaded. You can use ActionScript to find out when these events occur and execute specific scripts depending on the event.
Actions attached to a button or movie clip are enclosed in special actions called handlers. The onClipEvent and on actions are called handlers because they "handle" or manage an event. You can specify one or more events for each handler. Movie clip and button actions execute when the event specified by the handler occurs. You can attach more than one handler to an object if you want different actions to execute when different events occur.
Several onClipEvent handlers attached to a movie clip on the Stage
The onClipEvent action handles movie clip events, and the on action handles button events. You can also use the on action with movie clips to create a button movie clip, a movie clip that receives button events.
Movie clip events and button events can also be handled by methods of the MovieClip and Button objects. You must define a function and assign it to the event handler method; the function executes when the event occurs. You can use event methods to handle events for dynamically created movie clips. Event methods are also useful for handling all events in a movie in one script: you don't have to attach the script to the object whose event you are handling.
For example, if you have a button on the Stage and you use the Actions panel to add a trace action, the following code appears:
on (release) {
trace("You clicked me!");
}
You could use a method to create the same effect, as in the following:
myMovieClip.onRelease = function() {
trace("You clicked me!");
ActionScript terminology Like any scripting language, ActionScript uses its own terminology. The following list provides an introduction to important ActionScript terms in alphabetical order.
Actions are statements that instruct a movie to do something while it is playing. For example, gotoAndStop sends the playhead to a specific frame or label. In this manual, the terms action and statement are interchangeable.
Boolean is a true or false value.
Classes are data types that you can create to define a new type of object. To define a class, you create a constructor function.
Constants are elements that don't change. For example, the constant Key.TAB always has the same meaning: it indicates the Tab key on a keyboard. Constants are useful for comparing values.
Constructors are functions that you use to define the properties and methods of a class. For example, the following code creates a new Circle class by creating a constructor function called Circle:
function Circle(x, y, radius){
this.x = x;
this.y = y;
this.radius = radius;
}
Data types are a sets of values and the operations that can be performed on them. The ActionScript data types are string, number, boolean, object, movieclip, function, null, and undefined. For more details on these language .
Events are actions that occur while a movie is playing. For example, different events are generated when a movie clip loads, the playhead enters a frame, the user clicks a button or movie clip, or the user types at the keyboard.
Event handlers are special actions that manage events such as mouseDown or load. There are two kinds of ActionScript event handlers: actions and methods. There are only two event handler actions, on and onClipEvent. In the Actions toolbox, each ActionScript object that has event handler methods has a subcategory called Events.
Expressions are any legal combination of ActionScript symbols that represent a value. An expression consists of operators and operands. For example, in the expression x + 2, x and 2 are operands and + is an operator.
Functions are blocks of reusable code that can be passed parameters and can return a value. For example, the getProperty function is passed the name of a property and the instance name of a movie clip, and it returns the value of the property. The getVersion function returns the version of the Flash Player currently playing the movie.
Identifiers are names used to indicate a variable, property, object, function, or method. The first character must be a letter, underscore (_), or dollar sign ($). Each subsequent character must be a letter, number, underscore, or dollar sign. For example, firstName is the name of a variable.
Instances are objects that belong to a certain class. Each instance of a class contains all the properties and methods of that class. All movie clips are instances with properties (for example, _alpha and _visible) and methods (for example, gotoAndPlay and getURL) of the MovieClip class.
Instance names are unique names that allow you to target movie clip and button instances in scripts. You use the Property inspector to assign instance names to instances on the Stage. For example, a master symbol in the library could be called counter and the two instances of that symbol in the movie could have the instance names scorePlayer1 and scorePlayer2. The following code sets a variable called score inside each movie clip instance by using instance names:
_root.scorePlayer1.score += 1;
_root.scorePlayer2.score -= 1;
Keywords are reserved words that have special meaning. For example, var is a keyword used to declare local variables. You cannot use a keyword as an identifier. For example, var is not a legal variable name.
Methods are functions assigned to an object. After a function is assigned, it can be called as a method of that object. For example, in the following code, clear becomes a method of the controller object:
function reset(){
this.x_pos = 0;
this.x_pos = 0;
}
controller.clear = reset;
controller.clear();
Objects are collections of properties and methods; each object has its own name and is an instance of a particular class. Built-in objects are predefined in the ActionScript language. For example, the built-in Date object provides information from the system clock.
Operators are terms that calculate a new value from one or more values. For example, the addition (+) operator adds two or more values together to produce a new value. The values that operators manipulate are called operands.
Parameters (also called arguments) are placeholders that let you pass values to functions. For example, the following welcome function uses two values it receives in the parameters firstName and hobby:
function welcome(firstName, hobby) {
welcomeText = "Hello, " + firstName + "I see you enjoy " + hobby;
}
Properties are attributes that define an object. For example, _visible is a property of all movie clips that defines whether a movie clip is visible or hidden.
Target paths are hierarchical addresses of movie clip instance names, variables, and objects in a movie. You name a movie clip instance in the movie clip Property inspector. (The main Timeline always has the name _root.) You can use a target path to direct an action at a movie clip or to get or set the value of a variable. For example, the following statement is the target path to the variable volume inside the movie clip stereoControl:
_root.stereoControl.volume
Variables are identifiers that hold values of any data type. Variables can be created, changed, and updated. The values they store can be retrieved for use in scripts. In the following example, the identifiers on the left side of the equal signs are variables:
x = 5;
name = "Lolo";
customer.address = "66 7th Street";
c = new Color(mcinstanceName);
Dot syntax
In ActionScript, a dot (.) is used to indicate the properties or methods related to an object or movie clip. It is also used to identify the target path to a movie clip, variable, function, or object. A dot syntax expression begins with the name of the object or movie clip followed by a dot, and ends with the element you want to specify.
For example, the _x movie clip property indicates a movie clip's x axis position on the Stage. The expression ballMC._x refers to the _x property of the movie clip instance ballMC.
As another example, submit is a variable set in the form movie clip, which is nested inside the movie clip shoppingCart. The expression shoppingCart.form.submit = true sets the submit variable of the instance form to true.
Expressing a method of an object or movie clip follows the same pattern. For example, the play method of the ballMC instance moves the playhead in the Timeline of ballMC, as in the following statement:
ballMC.play();
Dot syntax also uses two special aliases, _root and _parent. The alias _root refers to the main Timeline. You can use the _root alias to create an absolute target path. For example, the following statement calls the function buildGameBoard in the movie clip functions on the main Timeline:
_root.functions.buildGameBoard();
You can use the alias _parent to refer to a movie clip in which the current movie clip is nested. You can also use _parent to create a relative target path. For example, if the movie clip dog is nested inside the movie clip animal, the following statement on the instance dog tells animal to stop:
_parent.stop();
Curly braces
ActionScript statements are grouped together into blocks with curly braces ({ }), as in the following script:
on(release) {
myDate = new Date();
currentMonth = myDate.getMonth();
}
Semicolons
An ActionScript statement is terminated with a semicolon. For example, the following statements are terminated with semicolons:
column = passedDate.getDay();
row = 0;
If you omit the terminating semicolon, Flash will still compile your script successfully. However, using semicolons is good scripting practice.
Parentheses
When you define a function, place any parameters inside parentheses:
function myFunction (name, age, reader){
...
}
When you call a function, include any parameters passed to the function in parentheses, as shown here:
myFunction ("Steve", 10, true);
You can also use parentheses to override the ActionScript order of precedence or to make your ActionScript statements easier to read. (See Operator precedence.)
You also use parentheses to evaluate an expression on the left side of a dot in dot syntax. For example, in the following statement, the parentheses cause new Color(this) to evaluate and create a new Color object:
onClipEvent(enterFrame) {
(new Color(this)).setRGB(0xffffff);
}
If you didn't use parentheses, you would need to add a statement to evaluate the expression:
onClipEvent(enterFrame) {
myColor = new Color(this);
myColor.setRGB(0xffffff);
}
Uppercase and lowercase letters
Only keywords in ActionScript are case sensitive; with the rest of ActionScript, you can use uppercase and lowercase letters interchangeably. For example, the following statements are equivalent:
cat.hilite = true;
CAT.hilite = true;
However, it's good practice to follow consistent capitalization conventions, such as those used in this manual, to make it is easier to identify names of functions and variables when reading ActionScript code.
Because ActionScript is not case sensitive, you must not use variable names that match built-in ActionScript objects. For example, the following is not allowed:
date = new Date();
Instead, use the variable names myDate, theDate, and so on.
If you don't use correct capitalization with keywords, your script will have errors. When Colored Syntax is turned on in the Actions panel, keywords written with correct capitalization are blue by default.
Comments
In the Actions panel, use comments to add notes to scripts. Comments are useful for keeping track of what you intended, and for passing information to other developers if you work in a collaborative environment or are providing samples.
When you choose the comment action, the characters // are inserted into the script. Even a simple script is easier to understand if you make notes as you create it:
on(release) {
// create new Date object
myDate = new Date();
currentMonth = myDate.getMonth();
// convert month number to month name
monthName = calcMonth(currentMonth);
year = myDate.getFullYear();
currentDate = myDate.getDate();
}
When Colored Syntax is turned on in the Actions panel, comments are pink by default in the Script pane. Comments can be any length without affecting the size of the exported file, and they do not need to follow rules for ActionScript syntax or keywords
About data types
A data type describes the kind of information a variable or ActionScript element can hold. There are two kinds of data types: primitive and reference. The primitive data types—string, number, and boolean—have a constant value and therefore can hold the actual value of the element they represent. The reference data types—movie clip and object—have values that can change and therefore contain references to the actual value of the element. Variables containing primitive data types behave differently in certain situations than those containing reference types.
String
A string is a sequence of characters such as letters, numbers, and punctuation marks. You enter strings in an ActionScript statement by enclosing them in single or double quotation marks. Strings are treated as characters instead of as variables. For example, in the following statement, "L7" is a string:
favoriteBand = "L7";
You can use the addition (+) operator to concatenate, or join, two strings. ActionScript treats spaces at the beginning or end of a string as a literal part of the string. The following expression includes a space after the comma:
greeting = "Welcome," + firstName;
Although ActionScript does not distinguish between uppercase and lowercase in references to variables, instance names, and frame labels, literal strings are case sensitive. For example, the following two statements place different text in the specified text field variables, because "Hello" and "HELLO" are literal strings.
invoice.display = "Hello";
invoice.display = "HELLO";
Number
The number data type is a double-precision floating-point number. You can manipulate numbers using the arithmetic operators addition (+), subtraction (-), multiplication (*), division (/), modulo (%), increment (++), and decrement (--). You can also use methods of the built-in Math object to manipulate numbers. The following example uses the sqrt (square root) method to return the square root of the number 100:
Math.sqrt(100);
Boolean
A Boolean value is one that is either true or false. ActionScript also converts the values true and false to 1 and 0 when appropriate. Boolean values are most often used with logical operators in ActionScript statements that make comparisons to control the flow of a script. For example, in the following script, the movie plays if the variable password is true:
onClipEvent(enterFrame) {
if (userName == true && password == true){
play();
}
}
Object
An object is a collection of properties. Each property has a name and a value. The value of a property can be any Flash data type, even the object data type. This allows you to arrange objects inside each other, or "nest" them. To specify objects and their properties, you use the dot (.) operator. For example, in the following code, hoursWorked is a property of weeklyStats, which is a property of employee:
employee.weeklyStats.hoursWorked
You can use the built-in ActionScript objects to access and manipulate specific kinds of information. For example, the Math object has methods that perform mathematical operations on numbers you pass to them. This example uses the sqrt method:
squareRoot = Math.sqrt(100);
The ActionScript MovieClip object has methods that let you control movie clip symbol instances on the Stage. This example uses the play and nextFrame methods:
mcInstanceName.play();
mc2InstanceName.nextFrame();
You can also create your own objects to organize information in your movie. To add interactivity to a movie with ActionScript, you'll need many different pieces of information: for example, you might need a user's name, the speed of a ball, the names of items in a shopping cart, the number of frames loaded, the user's zip code, or the key that was pressed last. Creating custom objects allows you to organize this information into groups, simplify your scripting, and reuse your scripts.
Movieclip
Movie clips are symbols that can play animation in a Flash movie. They are the only data type that refers to a graphic element. The movieclip data type allows you to control movie clip symbols using the methods of the MovieClip object. You call the methods using the dot (.) operator, as shown here:
myClip.startDrag(true);
parentClip.getURL("http://www.macromedia.com/support/" + product);
Null
The null data type has only one value, null. This value means "no value"—that is, a lack of data. The null value can be used in a variety of situations. Here are some examples:
- To indicate that a variable has not yet received a value
- To indicate that a variable no longer contains a value
- As the return value of a function, to indicate that no value was available to be returned by the function
- As a parameter to a function, to indicate that a parameter is being omitted
The undefined data type has one value, undefined, and is used for a variable that hasn't been assigned a value.
About variables
A variable is a container that holds information. The container itself is always the same, but the contents can change. By changing the value of a variable as the movie plays, you can record and save information about what the user has done, record values that change as the movie plays, or evaluate whether a condition is true or false.
It's a good idea always to assign a variable a known value the first time you define the variable. This is known as initializing a variable and is often done in the first frame of the movie. Initializing variables helps you track and compare the variable's value as the movie plays.
Variables can hold any type of data: number, string, Boolean, object, or movie clip. The type of data a variable contains affects how the variable's value changes when it is assigned in a script.
Typical types of information you can store in a variable include a URL, a user's name, the result of a mathematical operation, the number of times an event occurred, or whether a button has been clicked. Each movie and movie clip instance has its own set of variables, with each variable having its own value independent of variables in other movies or movie clips.
Naming a variable
variable's name must follow these rules:
- It must be an identifier.
- It cannot be a keyword or an ActionScript literal such as true, false, null, or undefined.
- It must be unique within its scope
In Flash, you do not need to explicitly define a variable as holding either a number, a string, or other data type. Flash determines the data type of a variable when the variable is assigned:
x = 3;
In the expression x = 3, Flash evaluates the element on the right side of the operator and determines that it is of type number. A later assignment may change the type of x; for example, x = "hello" changes the type of x to a string. A variable that hasn't been assigned a value has a type of undefined.
ActionScript converts data types automatically when an expression requires it. For example, when you pass a value to the trace action, trace automatically converts the value to a string and sends it to the Output window. In expressions with operators, ActionScript converts data types as needed; for example, when used with a string, the + operator expects the other operand to be a string:
"Next in line, number " + 7
ActionScript converts the number 7 to the string "7" and adds it to the end of the first string, resulting in the following string:
"Next in line, number 7"
When you debug scripts, it's often useful to determine the data type of an expression or variable to understand why it is behaving a certain way. You can do this with the typeof operator, as in this example:
trace(typeof(variableName));
Scoping a variable
A variable's "scope" refers to the area in which the variable is known and can be referenced. There are three types of variable scope in ActionScript:
Local variables are available within their own block of code (delineated by curly braces).
Timeline variables are available to any Timeline if you use a target path.
Global variables are available to any Timeline even if you do not use a target path.
You can use the var statement to declare a local variable inside a script. For example, the variables i and j are often used as loop counters. In the following example, i is used as a local variable; it only exists inside the function makeDays:
function makeDays() {
var i;
for( i = 0; i < monthArray[month]; i++ ) {
_root.Days.attachMovie( "DayDisplay", i, i + 2000 );
_root.Days[i].num = i + 1;
_root.Days[i]._x = column * _root.Days[i]._width;
_root.Days[i]._y = row * _root.Days[i]._height;
column = column + 1;
if (column == 7 ) {
column = 0;
row = row + 1;
}
}
}
Local variables can also help prevent name collisions, which can cause errors in your movie. For example, if you use name as a local variable, you could use it to store a user name in one context and a movie clip instance name in another; because these variables would run in separate scopes, there would be no collision.
It's good practice to use local variables in the body of a function so that the function can act as an independent piece of code. A local variable is only changeable within its own block of code. If an expression in a function uses a global variable, something outside the function could change its value, which would change the function.
Variable declaration To declare Timeline variables, use the set variable action or the assignment (=) operator. Both methods achieve the same results.
To declare local variables, use the var statement inside the body of a function. A local variable is scoped to the block, and expires at the end of the block. A local variable not declared within a block expires at the end of its script.
To declare global variables, use the _global identifier before the variable name. The following example creates the global variable myName:
_global.myName = "George";
To test the value of a variable, use the trace action to send the value to the Output window. For example, trace(hoursWorked) sends the value of the variable hoursWorked to the Output window in test mode. You can also check and set the variable values in the Debugger in test mode.
Using variables in a script
You must declare a variable in a script before you can use it in an expression. If you use an undeclared variable, as in the following example, the variable's value will be undefined and your script will generate an error:
getURL(myWebSite);
myWebSite = "http://www.shrimpmeat.net";
The statement declaring the variable myWebSite must come first so that the variable in the getURL action can be replaced with a value.
You can change the value of a variable many times in a script. The type of data that the variable contains affects how and when the variable changes. Primitive data types, such as strings and numbers, are passed by value. This means that the actual content of the variable is passed to the variable.
In the following example, x is set to 15 and that value is copied into y. When x is changed to 30 in line 3, the value of y remains 15 because y doesn't look to x for its value; it contains the value of x that it received in line 2.
var x = 15;
var y = x;
var x = 30;
As another example, the variable inValue contains a primitive value, 3, so the actual value is passed to the sqrt function and the returned value is 9:
function sqrt(x){
return x * x;
}
var inValue = 3;
var out = sqr(in);
The value of the variable inValue does not change.
The object data type can contain such a large and complex amount of information that a variable with this type doesn't hold the actual value; it holds a reference to the value. This reference is like an alias that points to the contents of the variable. When the variable needs to know its value, the reference asks for the contents and returns the answer without transferring the value to the variable.
The following is an example of passing by reference:
var myArray = ["tom", "dick"];
var newArray = myArray;
myArray[1] = "jack";
trace(newArray);
The above code creates an Array object called myArray that has two elements. The variable newArray is created and is passed a reference to myArray. When the second element of myArray is changed, it affects every variable with a reference to it. The trace action sends tom, jack to the Output window.
In the next example, myArray contains an Array object, so it is passed to function zeroArray by reference. The zeroArray function changes the content of the array in myArray.
function zeroArray (theArray){
var i;
for (i=0; i < theArray.length; i++) {
theArray[i] = 0;
}
}
var myArray = new Array();
myArray[0] = 1;
myArray[1] = 2;
myArray[2] = 3;
zeroArray(myArray);
The function zeroArray accepts an Array object as a parameter and sets all the elements of that array to 0. It can modify the array because the array is passed by reference.
Operator precedence
When two or more operators are used in the same statement, some operators take precedence over others. ActionScript follows a precise hierarchy to determine which operators to execute first. For example, multiplication is always performed before addition; however, items in parentheses take precedence over multiplication. So, without parentheses, ActionScript performs the multiplication in the following example first:
total = 2 + 4 * 3;
The result is 14.
But when parentheses surround the addition operation, ActionScript performs the addition first:
total = (2 + 4) * 3;
The result is 18.
Operator associativity When two or more operators share the same precedence, their associativity determines the order in which they are performed. Associativity can be either left-to-right or right-to-left. For example, the multiplication operator has an associativity of left-to-right; therefore, the following two statements are equivalent:
total = 2 * 3 * 4;
total = (2 * 3) * 4;
Numeric operators
Numeric operators add, subtract, multiply, divide, and perform other arithmetic operations.
The most common usage of the increment operator is i++ instead of the more verbose i = i+1. You can use the increment operator before or after an operand. In the following example, age is incremented first and then tested against the number 30:
if (++age >= 30)
In the following example, age is incremented after the test is performed:
if (age++ >= 30)
The following table lists the ActionScript numeric operators:
Operator
Operation performed + Addition * Multiplication
/
Division %
Modulo (remainder of division) -
Subtraction
++
Increment --
Decrement
Comparison operators
Comparison operators compare the values of expressions and return a Boolean value (true or false). These operators are most commonly used in loops and in conditional statements. In the following example, if the variable score is 100, a certain movie loads; otherwise, a different movie loads:
if (score > 100){
loadMovieNum("winner.swf", 5);
} else {
loadMovieNum("loser.swf", 5);
}
The following table lists the ActionScript comparison operators:
Operator
Operation performed <
Less than
>
Greater than <=
Less than or equal >=
Greater than or equal
String operators
The + operator has a special effect when it operates on strings: it concatenates the two string operands. For example, the following statement adds "Congratulations," to "Donna!":
"Congratulations, " + "Donna!"
The result is "Congratulations, Donna!" If only one of the + operator's operands is a string, Flash converts the other operand to a string.
The comparison operators >, >=, <, and <= also have a special effect when operating on strings. These operators compare two strings to determine which is first in alphabetical order. The comparison operators only compare strings if both operands are strings. If only one of the operands is a string, ActionScript converts both operands to numbers and performs a numeric comparison.
Logical operators Logical operators compare Boolean (true and false) values and return a third Boolean value. For example, if both operands evaluate to true, the logical AND operator (&&) returns true. If one or both of the operands evaluate to true, the logical OR operator (||) returns true. Logical operators are often used in conjunction with comparison operators to determine the condition of an if action. For example, in the following script, if both expressions are true, the if action will execute:
if (i > 10 && _framesloaded > 50){
play();
}
The following table lists the ActionScript logical operators:
Operator
Operation performed
&&
Logical AND
||
Logical OR
!
Logical NOT
Assignment operators
You can use the assignment (=) operator to assign a value to a variable, as in the following:
password = "Sk8tEr";
You can also use the assignment operator to assign multiple variables in the same expression. In the following statement, the value of a is assigned to the variables b, c and d:
a = b = c = d;
You can also use compound assignment operators to combine operations. Compound operators perform on both operands and then assign that new value to the first operand. For example, the following two statements are equivalent:
x += 15;
x = x + 15;
The assignment operator can also be used in the middle of an expression, as in the following:
// If the flavor is not vanilla, output a message.
if ((flavor = getIceCreamFlavor()) != "vanilla") {
trace ("Flavor was " + flavor + ", not vanilla.");
}
This code is equivalent to the slightly more verbose code that follows:
flavor = getIceCreamFlavor();
if (flavor != "vanilla") {
trace ("Flavor was " + flavor + ", not vanilla.");
}
The following table lists the ActionScript assignment operators: Operator
Operation performed =
Assignment +=
Addition and assignment
-=
Subtraction and assignment *=
Multiplication and assignment
%=
Modulo and assignment
/=
Division and assignment
<<=
Bitwise shift left and assignment
>>=
Bitwise shift right and assignment
>>>=
Shift right zero fill and assignment
^=
Bitwise XOR and assignment
|=
Bitwise OR and assignment
&=
Bitwise AND and assignment
Checking a condition
Statements that check whether a condition is true or false begin with the term if. If the condition exists, ActionScript executes the statement that follows. If the condition doesn't exist, ActionScript skips to the next statement outside the block of code.
To optimize your code's performance, check for the most likely conditions first.
The following statements test several conditions. The term else if specifies alternative tests to perform if previous conditions are false.
if (password == null || email == null) {
gotoAndStop("reject");
} else if (password == userID){
gotoAndPlay("startMovie");
}
Repeating an action
ActionScript can repeat an action a specified number of times or while a specific condition exists. Use the while, do..while, for, and for..in actions to create loops.
To repeat an action while a condition exists:
Use the while statement.
A while loop evaluates an expression and executes the code in the body of the loop if the expression is true. After each statement in the body is executed, the expression is evaluated again. In the following example, the loop executes four times:
i = 4;
while (i > 0) {
myMC.duplicateMovieClip("newMC" + i, i );
i--;
}
You can use the do..while statement to create the same kind of loop as a while loop. In a do..while loop, the expression is evaluated at the bottom of the code block so the loop always runs at least once, as in the following:
i = 4;
do {
myMC.duplicateMovieClip("newMC" +i, i );
i--;
} while (i > 0);
To repeat an action using a built-in counter:
Use the for statement.
Most loops use a counter of some kind to control how many times the loop executes. Each execution of a loop is called an iteration. You can declare a variable and write a statement that increases or decreases the variable each time the loop executes. In the for action, the counter and the statement that increments the counter are part of the action. In the following example, the first expression (i = 4) is the initial expression that is evaluated before the first iteration. The second expression ( i > 0) is the condition that is checked each time before the loop runs. The third expression (i--) is called the post expression and is evaluated each time after the loop runs.
for (i = 4; i > 0; i--){
myMC.duplicateMovieClip("newMC" + i, i + 10);
}
To loop through the children of a movie clip or object:
Use the for..in statement.
Children include other movie clips, functions, objects, and variables. The following example uses trace to print its results in the Output window:
myObject = { name:'Joe', age:25, city:'San Francisco' };
for (propertyName in myObject) {
trace("myObject has the property: " + propertyName + ", with the value: " + myObject[propertyName]);
}
This example produces the following results in the Output window:
myObject has the property: name, with the value: Joe
myObject has the property: age, with the value: 25
myObject has the property: city, with the value: San Francisco
You may want your script to iterate over a particular type of child—for example, over only movie clip children. You can do this with for..in in conjunction with the typeof operator.
for (name in myMovieClip) {
if (typeof (myMovieClip[name]) == "movieclip") {
trace("I have a movie clip child named " + name);
}
}
Using the Array object
The Array object is a commonly used built-in ActionScript object that stores its data in numbered properties instead of named properties. An array element's name is called an index. Arrays are useful for storing and retrieving certain types of information such as lists of students or a sequence of moves in a game.
You can assign elements of the Array object just as you would assign the property of any object:
move[0] = "a2a4";
move[1] = "h7h5";
move[2] = "b1c3";
...
move[100] = "e3e4";
To access the second element of the above array, use the expression move[2].
The Array object has a built-in length property that is the value of the number of elements in the array. When an element of the Array object is assigned and the element's index is a positive integer such that index >= length, length is automatically updated to index + 1.
Returning values from a function
Use the return action to return values from functions. The return action stops the function and replaces it with the value of the return action. If Flash doesn't encounter a return action before the end of a function, an empty string is returned. For example, the following function returns the square of the parameter x:
function sqr(x) {
return x * x;
}
Some functions perform a series of tasks without returning a value. For example, the following function initializes a series of global variables:
function initialize() {
boat_x = _root.boat._x;
boat_y = _root.boat._y;
car_x = _root.car._x;
car_y = _root.car._y;
}
Calling a user-defined function
You can use a target path to call a function in any Timeline from any Timeline, including from the Timeline of a loaded movie. If a function was declared using the _global identifier, you do not need to use a target path to call it.
To invoke a function using the Actions panel in normal mode, you use the call function action. Pass the required parameters inside parentheses. You can call a function in any Timeline from any Timeline, including a loaded movie. For example, the following statement invokes the function sqr in the movie clip MathLib on the main Timeline, passes it the parameter 3, and stores the result in the variable temp:
var temp = _root.MathLib.sqr(3);
To call a user-defined function in normal mode:
- Choose Window > Actions to open the Actions panel.
- In the Actions toolbox (at the left of the panel), click the Actions folder, then click the User-Defined Functions folder.
- Double-click the call function action.
- In the Object box, enter the target path of the movie clip in which the function was defined. You can use the Insert Target Path button to enter the target path.
- In the Method box, enter the name of the function.
- In the Parameters box, enter the names of parameters, if any, separated by commas.
Enter the target path to the name of the function. Pass any required parameters inside parentheses.
The following example uses an absolute path to call the initialize function that was defined on the main Timeline and requires no parameters:
_root.initialize();
The following example uses a relative path to call the list function that was defined in the functionsClip movie clip:
_parent.functionsClip.list(6);
About built-in objects
You can use built-in Flash objects to access and manipulate certain kinds of information. Most built-in objects have methods (functions assigned to an object) that you can call to return a value or perform an action. For example, the Date object returns information from the system clock and the Sound object lets you control sound elements in your movie.
Some built-in objects have properties whose values you can read. For example, the Key object has constant values that represent keys on the keyboard. Each object has its own characteristics and abilities that make it useful in a movie.
The built-in Flash objects are divided into four categories within the Objects folder in the Actions panel: Core, Movie, Client/Server, and Authoring.
- The Core objects are also core objects in the ECMA specification on which ActionScript is based. The ActionScript Core objects are Arguments, Array, Boolean, Date, Function, Math, Number, Object, and String.
- The Movie objects are specific to ActionScript. They are Accessibility, Button, Capabilities, Color, Key, Mouse, MovieClip, Selection, Sound, Stage, System, TextField, and TextFormat.
- The Client/Server objects are ActionScript objects you can use to communicate between a client and a server. They are LoadVars, XML, and XMLSocket.
- The Authoring objects are for customizing the Flash authoring application. They are CustomActions and Live Preview.
You can create a custom object with properties and methods to organize information in your scripts for easier storage and access. After you create an object or class, you can create or instantiate copies of that object in a movie.
An object is a complex data type containing zero or more properties and methods. Each property, like a variable, has a name and a value. Properties are attached to the object and contain values that can be changed and retrieved. These values can be of any data type: string, number, Boolean, object, movie clip, or undefined. The following properties are of various data types:
customer.name = "Jane Doe";
customer.age = 30;
customer.member = true;
customer.account.currentRecord = 000609;
customer.mcInstanceName._visible = true;
The property of an object can also be an object. In line 4 of the previous example, account is a property of the object customer and currentRecord is a property of the object account. The data type of the currentRecord property is number.
Creating a custom object To create a custom object, you define a constructor function. A constructor function is always given the same name as the type of object it creates. You can use the keyword this inside the body of the constructor function to refer to the object that the constructor creates; when you call a constructor function, Flash passes it this as a hidden parameter. For example, the following is a constructor function that creates a circle with the property radius:
function Circle(radius) {
this.radius = radius;
}
After you define the constructor function you must create a new instance of the object. Use the new operator before the name of the constructor function and assign the new instance a variable name. For example, the following code uses the new operator to create a new Circle object with a radius of 5, and assigns it to the variable myCircle:
myCircle = new Circle(5);
Note: An object has the same scope as the variable to which it is assigned.
Creating inheritance
Inheritance is a means of organizing, extending, and reusing functionality. Subclasses inherit properties and methods from superclasses and add their own specialized properties and methods. For example, reflecting the real world, Bike would be a superclass and MountainBike and Tricycle would be subclasses of the superclass. Both subclasses contain, or inherit, the methods and properties of the superclass (for example, wheels). Each subclass also has its own properties and methods that extend the superclass (for example, the MountainBike subclass would have a gears property). You can use the elements prototype and __proto__ to create inheritance in ActionScript.
The following example defines the constructor function Bike: function Bike (length, color) {
this.length = length;
this.color = color;
}
The following code adds the roll method to the Bike class:
Bike.prototype.roll = function() {this._x = _x + 20;};
Instead of adding a roll method to the MountainBike class and the Tricycle class, you can create the MountainBike class with Bike as its superclass:
MountainBike.prototype = new Bike();
Now you can call the roll method of MountainBike, as in the following:
MountainBike.roll();