All vector objects are editable. As the complexity of your document increases, you can protect artwork from being inadvertently changed by storing it in special modes called groups and symbols. Groups provide a quick way to seal a shape by storing it in a bounding box that can only be edited by entering a group editing mode. Groups are created on the Stage and are not stored anywhere else. For items that are more global to your movie, you can convert them into symbols. The basis for interactivity and animation in Flash resides in its use of these reusable objects.
You can create artwork and then save that artwork as a symbol that is stored in the Library of your Flash document. Symbols are an efficient way to build your movies because you can reuse these assets as instances on the Timeline, and Flash will only store it in your file once. Apply ActionScript to control a movie clip symbol instance and to add interactivity, place art inside of button symbols to create hit states, or apply a variety of transparency and color effects to instances on the Stage. The Library stores all of the reusable art and objects in your movie including symbols, sounds, video clips, bitmaps, and components. It can be organized and sorted for easy access to your movie’s assets. A Library can also be shared with other Flash documents.
When you group artwork on the Stage, you prevent it from interacting with other artwork on the same layer. Grouping essentially stores the artwork in a bounding box that can only be edited by entering a special group editing mode, which you can easily do by double-clicking the group. For example, if you draw a shape over another shape on the same layer, the strokes and fills of the second shape will cut through or replace the strokes and fills of the shape directly beneath it. Grouping your artwork prevents this from happening. You can also use grouping to combine several shapes into one group so you can manipulate them simultaneously. You can ungroup artwork or objects that have been grouped by using the ungroup option or by breaking them apart. Doing so removes the bounding box and the artwork can be freely edited.
When objects are grouped they appear on top of shapes that aren’t grouped on the same layer. Each subsequent group that is created will appear on top of the last. This is called the stacking order. Flash allows you to change this order with the Arrange command. You can send a group or symbol to the bottom of this stack or bring one at the bottom to the top. Additionally, you can change the order incrementally.
Select the group whose stacking order you want to change.
Click the Modify menu, point to Arrange, and then click:
• Bring To Front. The selected object is brought to the top of the stack.
• Bring Forward. The selected object is brought up one level in the stacking order.
• Send Backward. The selected object is brought down one level in the stacking order.
• Send To Back. The selected object is brought to the bottom of the stack.
The Library panel is where all of the reusable assets in your Flash movie are stored. An asset is any artwork or object you have made into symbols, such as fonts, graphic symbols, movie clips, and buttons. Flash also stores bitmaps, sounds, video clips, and components in the Library. You can also open libraries from other Flash files to quickly transfer assets from one project to another. In Flash, you can use a single Library panel to view the library items of multiple Flash files at the same time.
Click the File menu, point to Import, and then click Open External Library.
Navigate to the drive or folder where the Flash movie containing the Library is located.
Select the library file.
Click Open.
The Library appears docked underneath the Library of the active project.
Did You Know?
You can use sample common libraries included with Flash and create your own. To use a common library, click the Window menu, point to Common Libraries, select the library type you want from the submenu, and then drag items from the library to your document. To create a common library, create a Flash file (.fla) with a library containing the symbols you want, and then save the file to the Libraries folder located in the Flash application folder on your hard disk.
FL 2.1
You can organize your Library assets into folders, sort the items, duplicate symbols or change their behavior. You can sort items (New!) by name, type, date, use count, or ActionScript linkage identifier. If you have a long list of items in your Library, you can search (New!) for the ones you want. The improved Library panel also allows you to set properties on most multiple Library items at once (New!).
Click the Window menu, and then click Library.
Use any of the following options to organize items in the Library panel:
• Search. Click in the Search box, start to type the name of the item you want to find. As you type, the list of Library items narrows to display the items that match what you typed.
Click X in the Search box to display all the items in the Library panel.
• Sort. Click the name header to sort the Library items from A-Z or Z-A.
• New Folder. Click the New Folder button, type a name, and then press Enter (Win) or Return (Mac).
• Use Folders. Select a Library item from the list and drag it to the folder where you want to store it. Click the triangle to expand/collapse the folder.
• Delete Item. Select the items you want to delete, and then click the Delete button.
• Rename Item. Double-click the item you want to rename, type a new name, and then press Enter (Win) or Return (Mac).
Click the Options menu on the Library panel.
A menu of options for adding, deleting, organizing, and configuring Library items appears, such as:
• New Font. Create a font symbol to embed a font in a movie.
• New Symbol. Create a symbol.
• Duplicate. Make a copy of the selected items.
• Edit or Edit With. Edit items in a library. Select the item first.
• Linkage. Define properties to share library assets for runtime or author development time.
FL 2.7
Using symbols is an efficient way to add artwork or elements to your Flash movie. When you create a symbol, it is stored in the Library where it can be reused as an instance in the Timeline. You can turn graphics or animations you’ve made into symbols or create a new one from scratch. There are three default symbol types you can choose from: graphic, movie clips, and buttons. How you use the symbol will determine which of these three types to use. Symbols have their own discrete Timelines. Think of a symbol as a package containing artwork that you can open and close. You enter a symbol editing mode to make changes and when you leave this mode the artwork is protected.
In the Timeline, select every frame in the animation that you want to make into a symbol.
Click the Edit menu, point to Timeline, and then click Copy Frames.
Click the Insert menu, and then click New Symbol.
Type a name for the symbol.
Select a movie clip or graphic symbol.
Click OK.
Flash enters a special symbol editing mode.
Select the first frame of the Timeline.
Click the Edit menu, point to Timeline, and then click Paste Frames.
See Also
See “Editing in Symbol Mode” on page 140 for information on editing symbols in symbol editing mode.
When you need to change or modify a symbol, you must enter a special symbol editing mode. Entering this mode allows you to view and edit the symbol’s Timeline. Any changes you make are stored in the Library, and all other instances of the symbol are updated with these changes. You can choose to enter the symbol mode, entirely replacing the view of the main Timeline, or view the symbol in context to the main Timeline. Additionally, you can open the symbol mode in a new window.
When you are finished making changes to a symbol, you can return to the main Timeline in several ways:
a. Click the Back button or the Scene name on the Edit bar to return to the parent scene.
b. Click the Edit Scene button on the Edit bar, and then click another Scene name.
c. Click the Edit menu, and then click Edit Document to return to the main Timeline.
d. Press
+E (Mac) or Ctrl+E (Win).
An instance is a copy of a symbol. When you use a symbol in your Timeline you are using an instance of it. You can animate an instance of a symbol and apply a variety of effects to it without affecting the original symbol in the Library. You can also use multiple instances of the same symbol. When you change the properties of an instance in the Timeline, you are only applying these changes to that copy, or instance, of the symbol. In this way, you keep the file size down because Flash only keeps track of the changes you’ve made while preserving the symbol in the form you created. If you have several instances of a symbol in your movie and you want to edit the artwork, you can make changes to the master symbol. When you do this, all of the instances of that symbol will be updated with these changes.
Symbols have three specific types that are set when you first create the symbol: graphic, movie clip, and button. You can change these types for a symbol’s instance by selecting it and then selecting a new type option in the Property Inspector. Do this when you need the instance to display a behavior different than its parent symbol. Alternately, you can change the behavior of the parent symbol itself in the Library. All subsequent instances that you create from this symbol will exhibit the new behavior.
Open or expand the Library panel.
Select the symbol from the list.
Click the Properties button at the bottom of the Library window to open the Symbol Properties dialog box.
Select a different symbol type option.
Click OK.
The symbol displays a new behavior. All subsequent instances will default to this behavior.
Did You Know?
If you are already using instances of a symbol in your movie, they will not be affected by a change in behavior. Flash allows you to change the types of instances separately from your symbol’s default behavior. To update the instance to a new symbol, select it on the Stage, and then change the type in the Property Inspector.
Symbols are used in the Timeline as instances. If you apply motion or color effects to an instance, you only affect that instance, not its parent symbol. If you would like to swap the parent symbol for another symbol, while retaining any effects and/or animation that have been applied to the instance, you can use the Swap Symbol feature. All of the effects are preserved but are instead applied to and referencing the new chosen symbol. Alternately, if you are using several instances of a symbol and want to change the content (the master symbol itself) of one of these instances without affecting the other instances, you can duplicate and swap that symbol in the Swap dialog box. Essentially you create a new master symbol linked to your instance that is no longer related to the original master symbol and all its instances.
If necessary, open the Property Inspector.
Select the instance on the Stage.
Click Swap in the Property Inspector to open the Swap Symbol dialog box.
Timesaver
Control+click (Mac) or right-click (Win) the instance on the Stage, and then click Swap Symbol.
Click a symbol from the list.
Click OK.
The instance is now linked to a new symbol.
Select the instance on the Stage.
Click Swap in the Property Inspector.
Click the Duplicate Symbol icon in the bottom left-hand corner of the dialog box.
Enter a new name.
Click OK.
The instance is now linked to a new symbol, copied from the original master symbol.
Click OK.
See Also
See “Breaking Symbols Apart” on page 155 for information on breaking symbols apart in symbol editing mode.
Graphic symbols can be used for static images and for animations that are in sync with the main Timeline. There are three instance options available to them: Loop, Play Once, and Single Frame. Set the instance to Loop if you want the symbol’s Timeline to play continuously. Play Once plays the Timeline of a graphic symbol once and then stops. Single frame sets the instance to display as a single frame contained in the graphic symbol’s Timeline. Unlike movie clip symbols, an animation contained in a graphic symbol can be seen in the main Timeline without having to export the Flash movie. However, any ActionScript and sounds that have been included in a graphic symbol’s Timeline will not work.
Select a graphic symbol instance on the Stage.
Click the popup in the Property Inspector, and then select from the following graphic options:
• Loop. The Timeline in the graphic symbol will loop continuously.
• Play Once. The Timeline in the graphic symbol will play once and stop. If there is no animation in the symbol or if there is only artwork on one frame, it will be treated as a static graphic.
• Single Frame. Sets the instance to a single frame in the Timeline of the master symbol. When this is selected, the graphic symbol is treated as a static graphic.
Use buttons to add interactivity to your movie. Button symbols have their own four-frame Timeline. The first three frames define the states of the button: up, over, and down. The first frame is the Up state, which is the appearance of the button when in its normal, non-active state. The second frame is the Over state, which is triggered when the user places their mouse over the button. The third frame is the Down state, which appears when the user presses the button with their mouse. The fourth frame—which is invisible outside of the symbol editing mode—defines the active area. This is the area that the user must place their mouse over to activate the other states of the button. You can assign actions, such as sound or animation, to instances of buttons that tell Flash what to do when the button is clicked.
Click the Insert menu, and then click New Symbol.
Type in a name for the symbol.
Click the Type popup, and then click Button.
Click OK.
Place artwork in the keyframe of the first frame.
This represents the button’s Up state, its normal, inactive state.
Click the Insert menu, point to Timeline, and then click Keyframe to add a keyframe in the second frame (the Over state).
Change the artwork or add new artwork in this frame.
Click the Insert menu, point to Timeline, and then click Keyframe to add a keyframe in the third frame (the Down state).
Alter the artwork or add new artwork in this frame.
Click the Insert menu, point to Timeline, and then click Keyframe to add a keyframe in the fourth frame (the active area).
Add a simple graphic (a rectangle or oval, for example) to define the active area.
To assign a sound to a state of the button, select the state’s frame in the Timeline, open the Property Inspector, and then:
a. Select a sound from the Sound popup menu.
b. Select an event from the Synchronization popup menu.
Click the Control menu, and then click Test Movie to test your button by exporting the movie.
See Also
See “Enabling and Disabling Buttons” on page 152 for information on turning buttons on and off.
Flash allows you to test your buttons within the development environment without having to export the movie. You can test the behavior of simple buttons by toggling the Enable Simple Buttons feature on and off. When buttons are enabled, you can’t select them or enter their symbol editing mode normally. Disable this feature if you need to enter the symbol mode. You can quickly see how the different states of your button behave without having to export the whole flash movie. Any ActionScript applied to the button will be ignored.
Place a button on the Stage.
Click the Control menu, and then click Enable Simple Buttons to enable the button.
Timesaver
Press Ctrl+Alt+B (Win) or Option+
+B (Mac) to toggle the enabling and disabling of simple buttons.
Place the mouse over the button to test the Over state.
Press down on the button to test the Down state.
To disable the button, click the Control menu, and then click Disable Simple Buttons.
Did You Know?
Regardless of whether buttons are enabled or disabled, they will be functional when you export your movie. The Enable Simple Buttons command is only relevant to the Flash development environment.
Buttons do not require graphics to be placed in the hit state frames (the first three frames). As long as the active area contains a shape, the button will be invisible but will be functional and ActionScript can be applied to it. The active area is the fourth frame in the button symbol Timeline. An instance of an invisible button appears as a transparent blue shape in the main Timeline, but it will not be visible in the exported movie.
Click the Insert menu, and then click New Symbol.
Click the Type popup, and then click Button.
Click OK.
Click the Insert menu, point to Timeline, and then click Keyframe to add a keyframe in the fourth frame (the active area).
Add a simple graphic (a rectangle or oval, for example) to define the active area.
Make sure the first three frames remain empty.
Return to the main Timeline.
Drag the invisible button from the Library to the Stage.
Invisible buttons appear as transparent blue shapes but are invisible in the final export.
Movie clip symbols operate independently on the main Timeline. When you want an animation to loop on a single frame in the Timeline, you can store this animation in the Timeline of a movie clip that will sit on this frame. Movie clip instances can have actions applied to them and can be controlled from anywhere in the Flash movie through ActionScript. They can contain animations, interactive controls, sounds, and even other movie clips. Unlike graphic symbols, you can only see the first frame of the movie clip in the main Timeline. Export your movie to see the movie clip play.
Click the Insert menu, and then click New Symbol.
Click the Type popup, and then click Movie Clip.
Click OK.
Add your content to the Movie Clip Timeline.
Return to the main Timeline by clicking the Back button or the Scene name on the Edit bar.
Drag the movie clip symbol to the Stage from the Library.
To change movie clip properties, select the clip on the Stage, and then change options in the Property Inspector.
• Symbol. Movie Clip, Graphic, or Button
• X and Y position
• Width and Height
• Color. Brightness, Tint, Alpha, and Advanced
Click the Control menu, and then click Test Movie to test the movie clip symbol by exporting the movie.
Sometimes you’ll need to break a symbol instance so that it is no longer linked to the master symbol. You might do this if you want to add something to the symbol without affecting the other instances. In this way, the content inside the symbol will become a simple graphic that you can adjust without affecting the master symbol you made it from or any of its instances.
You can alter the properties of an instance of a symbol without affecting the master symbol. Any transform applied to an instance can be animated with motion tweening. Flash will gradually draw the frames in between one transform to another. This is how you create movement in Flash. Change the scale of an instance or rotate and skew it. You can perform these functions interactively with the Free Transform tool. You can also add values in the Transform panel, or access additional Transform options in the program’s Modify menu. Distort and Envelope cannot be applied to instances and are disabled on the Tools panel options when the Free Transform tool is selected.
Select the instance on the Stage.
Click the Modify menu, point to Transform, and then click one of the following:
• Free Transform. Transforms the object freely.
• Scale. Constrains the transform to scale.
• Rotate And Skew. Constrains the transform to rotate and skew.
• Scale And Rotate. Constrains the transform to scale and rotation changes.
• Rotate 90° CW. Rotates the selected object 90° clockwise.
• Rotate 90° CCW. Rotates the selected object 90° counter-clockwise.
• Flip Vertical. Flips the object along a vertical axis.
• Flip Horizontal. Flips the object along a horizontal axis.
• Remove Transform. Removes any transform effects applied to the selected instance.
You can change the tint, brightness, or transparency of an instance in the Color popup located in the Property Inspector. This feature appears whenever an instance is selected on the Stage. If you would like to add a color to the instance, you can do so by selecting the Tint color style. Choose a color and then choose the amount of color that will be applied. You can adjust the Brightness (that is, how much white or black will be added) of an instance by choosing the Brightness color style. An instance can also be made transparent by altering the Alpha color style. An Alpha of zero will make the instance invisible, though it can still be selected and animated. This is useful when you want an object to fade on or off the Stage. You can also create unique composite image effects by varying color and transparency and applying a blend to two or more overlapping movie clips instances.
Select the instance on the Stage.
Click the Style popup in the Property Inspector, and then click Alpha.
Enter a value between 0 and 100 (0= invisible, 100= fully visible).
Timesaver
You can use the slider to the right of the field to interactively change the level of Alpha applied.
If you need to apply a color style with alpha you must use the Advanced option.
Select the movie instance on the Stage.
Click the Style popup and adjust the color and transparency.
Click the Blending popup, and then select a blend.
Position the movie clip with the blend over another symbol.
To achieve the effect you want, you will need to experiment with the color and transparency of the movie clip and blend mode.
An instance can have only one color style (Brightness, Tint, or Alpha) applied. To apply multiple color styles, you must use the Advanced feature in the Property Inspector’s Color popup menu. This option allows you to change the percentage of Red, Green, or Blue (0% -100%) added or subtracted as well as the constant values of RGB (-255 to +255). Additionally, there is an Alpha scale that can be applied to each of these options. Apply a color, brightness, or alpha style to an instance and then access the Advanced options to make adjustments. The applied color style is preserved. Experiment with this features until you get the effects that you need.
Select the instance on the Stage.
Click the Style popup in the Property Inspector, and then click Tint, Brightness or Alpha and apply an effect.
Click the Style popup again, and then click Advanced.
Add or subtract percentages or values of RGB and Alpha.
Did You Know?
You can go directly to the Advanced panel to add color effects without having applied any Brightness, Tint, or Alpha. If you have already chosen one of these options and then enter the Advanced settings, your previous applied effect will be preserved and the sliders in the Advanced Settings window will reflect this change. For example, if you have added a tint of red to your instance, the sliders in the Advanced setting will show that red has been added.
In previous versions, Flash scales movie clips equally in height and width. For many rectangular movie clips, this method of scaling doesn’t work very well at the corners. In Flash, a method called 9-slice scaling is used. A movie clip is visually divided into nine areas, or slices, with a grid overlay (dotted lines called slide guides). Each area of the grid is scaled separately, except the corners, which provides more accurate results. The slide guides are set at 25% of the symbol’s height and width by default. Before you can scale a movie clip, you need to enable 9-slice scaling. To edit a movie clip, you need to use symbol-editing mode.
Flash allows you to set general preferences to customize the highlight, or selection, color of elements in Flash to make them easier to see. In the General category of the Preferences dialog box, you can select different colors for different types of elements, including drawing objects, drawing primitives, groups, symbols, and all other elements. If you don’t want to set individual colors, you can use the layer color for all elements.
Click the Flash (Mac) or Edit (Win) menu, and then click Preferences.
Click the General category.
Select the Use Layer Color option to use the current layer’s outline color, or select the option, and then select the color you want for the following elements:
• Drawing Objects.
• Drawing Primitives.
• Groups.
• Symbols.
• Other Elements.
Click OK.