List of Figures

Chapter 1: What are Components and Why Should I Care?

Figure 1.1: Would it be immodest of me to tell you that I was the model for this illustration?

Figure 1.2: You can tell components apart from movie clips, buttons, graphic symbols, bitmap symbols, and audio symbols by their icons.

Figure 1.3: The Properties panel clearly indicates what type of object you have selected—in this case, a movie clip.

Figure 1.4: The Properties panel displays several indicators when you have selected a component.

Figure 1.5: The component user interface is like a control panel on a machine.

Figure 1.6: The Properties panel for a component with a custom user interface. You must click the Launch Component Parameters Panel button to view the custom UI

Figure 1.7: The components that come with Flash MX

Figure 1.8: The interactive elements in this Flash interface are generated using components.

Figure 1.9: Dragging the navigation bar around produces a bouncy or springy animation effect.

Figure 1.10: One of the components is easier to pick out than the other.

Figure 1.11: The user interface for Springy Thingy provides a quick and easy way for customizing the characteristics of the component.

Figure 1.12: This concentration game for the Musco Family Olive Company was created using components.

Figure 1.13: There is an instance of the concentration for each level of the game. Each instance has the parameters set differently.

Chapter 2: Using Components 101

Figure 2.1: The Chapter2_A_Modified.fla sample file is dotted with multiple instances of two separate components.

Figure 2.2: Multiple copies of two components are used in this example to generate a rich, textured, animated background.

Figure 2.3: You can open the panel by selecting Component Parameters from the Windows menu.

Figure 2.4: You can right-click or Control+click to produce a pop-up menu from which you can select Component Parameters.

Figure 2.5: The Properties panel also offers access to a component's parameters.

Figure 2.6: The default user interface for the Component Parameters panel

Figure 2.7: The Component Parameters panel often opens up too large.

Figure 2.8: Open the Component Definition dialog box for the Zoom component.

Figure 2.9: You use the Component Definition dialog box to create components.

Figure 2.10: There are nine value types for component parameters.

Figure 2.11: The Transition parameter has a List value type.

Figure 2.12: The Array value type requires a separate dialog box so that you can enter multiple values.

Figure 2.13: Brackets in a value field help to identify that the field is an Array value type.

Figure 2.14: The Font Name value type provides a means for the user to specify any font that is on the user's local system.

Figure 2.15: The Color value type provides a means for the user to specify a color for an object or text.

Figure 2.16: You can open the standard (for your given OS) color picker from the pop-up color picker for the Color value type.

Figure 2.17: The Component Parameters panel for the Zoom component

Figure 2.18: When you test the movie, you will see the combined effect of multiple instances of the two different components.

Figure 2.19: The Zoom Component and its related resources are now in the Component Test file's library.

Figure 2.20: Duplicates of the Zoom component instance are positioned on the stage so that they are some distance apart from each other.

Figure 2.21: Editing the movie clip within any instance of the Zoom component changes all of the other Zoom component instances.

Figure 2.22: The Zoom component works the same with an animation as it did with a static image.

Chapter 3: Using Components with Custom User Interfaces

Figure 3.1: The plug-in interface for Xaos Tools' Terrazzo

Figure 3.2: The plug-in interface for Procreate's KPT Effects

Figure 3.3: The opacity sliders in the third-party plug-in interfaces are similar to the opacity slider in Photoshop.

Figure 3.4: A custom UI that creates a concentration game

Figure 3.5: A word-search game

Figure 3.6: A dynamic drop-down menu

Figure 3.7: A collapsible menu

Figure 3.8: Save the Chapter3_A_Start.fla file to your local hard drive.

Figure 3.9: The Spikes Background component

Figure 3.10: The Component Parameters panel displays an error message because it cannot access a necessary.swf file.

Figure 3.11: The Component Parameters panel displays the custom user interface.

Figure 3.12: The first screen of the custom UI for the Spikes component in advanced mode

Figure 3.13: Adjusting the Graphic Linkage parameter

Figure 3.14: Click the add button (the plus sign) to add another item in the Graphic Linkage parameter array.

Figure 3.15: Open the Spikes SM Assets folder and select the Spikes 1 movie clip.

Figure 3.16: Selecting Linkage from the pop-up menu

Figure 3.17: The Linkage Properties dialog box for the Spike 1 movie clip

Figure 3.18: Creating another movie clip

Figure 3.19: Changing the name to Spike 5

Figure 3.20: The Advanced button in the Duplicate Symbol dialog box provides access to Linkage property settings.

Figure 3.21: Editing the Spike 5 movie clip

Figure 3.22: Notice that the component has used the movie clip with the lightning bolt line you added.

Figure 3.23: Editing the Number Of Graphics and Behavior parameters

Figure 3.24: The second screen in Advanced mode

Figure 3.25: The Spikes Component now distributes the shapes all over the stage.

Figure 3.26: Resize the Component Parameters panel so that it is much smaller.

Figure 3.27: The Component Parameters panel opens to the size that it was when it was last closed.

Figure 3.28: Resize the Component Parameters panel to view the entire custom UI.

Figure 3.29: The Graphics Linkage parameter in the 3D Spin Menu works the same as the Graphic Linkage parameter in the Spikes custom UI.

Figure 3.30: The arrays on the next page in advanced mode work the same as the Graphics Linkage parameter.

Figure 3.31: The Mouse Factor parameter utilizes a slider that keeps the user from entering a value that won't work with the component.

Chapter 4: Button Components

Figure 4.1: PixelButton.fla

Figure 4.2: The movie shows nine buttons on the stage.

Figure 4.3: The PixelButton component features a custom icon in the library.

Figure 4.4: The first page of the Component Parameters panel for an instance of the PixelButton component

Figure 4.5: The change that you make to the Button Text parameter is reflected on the instance of the component.

Figure 4.6: Changes to the Text Size parameter are reflected on the instance of the Pixel-Button component on the stage.

Figure 4.7: Edits to the R, G, and B fields are automatically reflected in the Hue, Saturation, and Brightness fields.

Figure 4.8: If the value for Text Font parameter is not a font name on your system, Flash will display a default font (or possibly no font).

Figure 4.9: If you enter the name of the font correctly, you will see the font displayed on the instance of the component.

Figure 4.10: Even small errors will result in no font being displayed (the first letter is lowercase instead of uppercase in this example).

Figure 4.11: Changes to the Inner Bevel Color and Outer Bevel Color parameters are shown on the stage with Live Preview.

Figure 4.12: Adjustments made to the Rollover Inner Bevel Color and Rollover Outer Bevel Color parameters are not visible on the stage unless you publish or test the movie.

Figure 4.13: Dimension changes for the button will be reflected on the stage, but the selectable area for the button remains the same.

Figure 4.14: The Band Spacing parameter determines the width of the outer bevel.

Figure 4.15: The outer bevel can push too far into the button if you specify higher values for the Band Spacing parameter.

Figure 4.16: When you select Load Movie for the value of the Action Type parameter, the parameters related to Load Movie appear.

Figure 4.17: When you select URL for the value of the Action Type parameter, the parameters related to loading a URL appear.

Figure 4.18: Flash MX can draw shapes programmatically.

Figure 4.19: Macromedia Extension Manager provides an easy way to install and remove components to and from the Components panel.

Figure 4.20: Select Flash MX from the drop-down list.

Figure 4.21: Open the Pixel-ComponentSet.mxp file from the Chapter 4 directory.

Figure 4.22: The Macromedia Extensions Disclaimer

Figure 4.23: Selecting PixelComponentSet from the pop-up menu

Chapter 5: Interface Components

Figure 5.1: The take2.fla file

Figure 5.2: Test the movie and notice the drop-down menu.

Figure 5.3: The Drop Down Menu component is located toward the upper left of the stage.

Figure 5.4: The first screen of the component parameters for the Drop Down Menu component

Figure 5.5: The parameters for the Drop Down Menu component begin on page 2 of the custom UI.

Figure 5.6: Select the first item in the Menu Items parameter and the Sub Item For Main Item #1 parameter.

Figure 5.7: You can assign actions to your buttons using the Edit Click Action button.

Figure 5.8: The text field toward the bottom of the Click Action Parameters screen contains a simple ActionScript command that references a label named "A1."

Figure 5.9: Select Item 5 in the Menu Items parameter, and the last item in the Sub Item For Main Item #5 parameter will automatically be selected.

Figure 5.10: The gotoAndStop command references the frame labeled "E3".

Figure 5.11: Selecting Load URL from the list field of the Action parameter

Figure 5.12: Entering a new URL for the second item in the Sub Item For Main Item #5 parameter

Figure 5.13: Entering a new URL for the third item in the Sub Item For Main Item #5 parameter

Figure 5.14: Turning on the Flash and HTML options

Figure 5.15: View the take2.html file in a browser to test the movie.

Figure 5.16: Add a new layer above the Banner layer named Video.

Figure 5.17: Creating a place for your video

Figure 5.18: Changing the dimensions of the newyork.fla file

Figure 5.19: Positioning the video at 235 X and 333 Y using the Info panel.

Figure 5.20: Selecting Item 2 in the Menu Items parameter and Item 3 in the Sub Item For Main Item#2 parameter

Figure 5.21: Loading a movie in the Action parameter

Figure 5.22: The newyork.swf movie loads into the proper position.

Figure 5.23: Item 1 is selected in both the Menu Items parameter and the Sub Item For Main Item #1 parameter.

Figure 5.24: Simple Script is already selected, and a script is already in the Simple ActionScript parameter.

Figure 5.25: The instance name of the movie clip is "content."

Figure 5.26: The "content" movie clip contains content associated with each submenu item. The content for each submenu item is located on keyframes, and each keyframe has a label that is referenced in the gotoAndStop(); functions.

Figure 5.27: Clicking the submenu items under the Instructors heading both displays a different frame of the movie clip with the instance name "content" and loads a movie.

Figure 5.28: The Advanced Script option is selected.

Figure 5.29: Open the Actions panel to view the ActionScript on the Function layer.

Figure 5.30: The white dot represents the "videoholder" movie clip that is used for loading the movies.

Chapter 6: Animation Components

Figure 6.1: Begin a new FLA file to test this chapter's components.

Figure 6.2: The default appearance of the published Parallel Bars component

Figure 6.3: The component parameters for the Parallel Bars component

Figure 6.4: The Parallel Bars with custom settings

Figure 6.5: Two similar Parallel Bar components, each with different Color Points values

Figure 6.6: Abstract grid space illusions created using two Parallel Bars components

Figure 6.7: The default appearance of the Pond Ripples component

Figure 6.8: Two duplicates of the Pond Ripples component. The ripple on the right has Color Mixing Chaos set at 100%.

Figure 6.9: The Pond Ripples component can take on many different appearances. These ripples have a small value set for Centerpoint Offset and a bit of transparency.

Figure 6.10: The default appearance of the Concentric Path component

Figure 6.11: The intricate construction process of the Concentric Path can be seen in these timed screen captures.

Figure 6.12: By overlaying two or more Concentric Path components, you can create complex color patterns.

Figure 6.13: Setting small values for XYZ Rotation creates a concentric path that appears to spin about its center.

Figure 6.14: The default appearance of the Pebbles component

Figure 6.15: The Pebbles Component can generate a simple star field.

Figure 6.16: The default appearance of the Seeds Component

Figure 6.17: This illustration shows a sequence of the Seed breathing cycle. Note the subtle, asynchronous variations in individual seed size between frames.

Figure 6.18: The Seeds Component with some color and a large number of seeds

Figure 6.19: The seeds in this example have been compacted around the edge of the component by setting the values of the Inner Radius and Outer Radius very close to each other.

Figure 6.20: An unusual shape has been created by the Seeds component using seeds the same color as the background, placed over a black disc. The seeds in this example are perfect spheres.

Figure 6.21: After you have dragged the Seeds component into your movie, your library will contain all the elements required to build the seed arrangement.

Figure 6.22: Editing the SeedShape movie clip

Figure 6.23: An irregular, hand-drawn shape as the PondShape

Figure 6.24: The resulting pond ripple

Figure 6.25: Another irregular, hand-drawn shape as the PondShape

Figure 6.26: The resulting Pond Ripple arrangement resembles a broken timepiece.

Figure 6.27: Using the same shape modification techniques as in the previous section, the Parallel Bars component can render moving fields of text.

Figure 6.28: The Pebbles component in this example is using a custom-drawn shape to produce a random field of drifting symbols.

Figure 6.29: A custom shape for the PebbleShape movie clip

Figure 6.30: Some additional inspirational Pebble arrangements using custom shapes

Figure 6.31: A combination of the Pond Ripple and Seeds components produced this complementary design.

Figure 6.32: Screenshots of a movie containing multiple components

Figure 6.33: Multiple screenshots of the Parallel Bars component with a custom BarShape using the word hope

Figure 6.34: Due to the random nature of the Pond Ripples component, the same setup will produce thousands of different arrangements.

Figure 6.35: A Seeds component being used as a mask for the high resolution Concentric Path component below it. The result is an unusual organic-shaped construct.

Figure 6.36: A Parallel Bars component being used as a mask for a Pebbles component below it. This might have made for some great wallpaper in 1973.

Figure 6.37: By embedding a Concentric Path component as the SeedShape for the Seeds component, we produce something greater than the sum of its parts.

Chapter 7: Text Effect Components

Figure 7.1: Components installed through the Extension Manager

Figure 7.2: Use the Components panel to add the text effects to your movie.

Figure 7.3: Folder structure created by the components

Figure 7.4: The live preview shows what the text will look like when fully animated.

Figure 7.5: The Flush Text effect in midaction. The text is uncovered slowly by a series of animated rectangles.

Figure 7.6: Add multiple sets of text for the component to loop through.

Figure 7.7: Text can flow into two or more lines through the use of the line break tag <br>.

Figure 7.8: The increased flush densities do not necessarily result in a better effect.

Figure 7.9: The stage in the Textfield_Testing.fla file. The bottom two text fields use an embedded font.

Figure 7.10: When the movie is published, one text field disappears.

Figure 7.11: Open the library's menu to create a new shared font.

Figure 7.12: The text effect scrambles the letters of a message across the screen and then rotates each letter to its final place.

Figure 7.13: Even though most HTML tags have been disabled in the ScrambleTextEffect component, you can still use the line break tag to create text that flows into two or more lines.

Figure 7.14: Use a negative kerning value to make the letters of the text set fit closer together.

Figure 7.15: Test the SpinEffect01_Sample.fla file. The letters fly from the foreground to center stage.

Figure 7.16: Use a small value for the spin radius to produce different effects. This also constrains the component to a smaller area, if you want.

Figure 7.17: The line break tag is the only HTML tag you can use with the SpinTextEffect component.

Chapter 8: Video and Audio Components

Figure 8.1: The open Audio-Player.fla file

Figure 8.2: Test the movie to experiment with the various functions.

Figure 8.3: The library of the AudioPlayer component holds assets for developers and designers.

Figure 8.4: The first frame of the movie with a streamed sound

Figure 8.5: Make sure there are enough frames to accommodate the sound, but not too many frames.

Figure 8.6: Folder hierarchy for the player's graphics

Figure 8.7: Do not transform a graphic directly if the Properties panel says it is a library symbol.

Figure 8.8: Edit only the vector graphics (the Shape objects) inside of a symbol.

Figure 8.9: Control buttons for the audio

Figure 8.10: Buttons for managing a list of favorites

Figure 8.11: Use the Align panel to center your graphic.

Figure 8.12: Sliders and backgrounds for the volume and pan controls

Figure 8.13: Graphics of the playlist item and scroll buttons

Figure 8.14: Individual graphics that make up the graphical rendering of the audio's progress. All four parts provide the user with helpful information about the audio, such as streaming and playing progress.

Figure 8.15: Use the Info panel to get the numeric values you will enter into the component's parameters.

Figure 8.16: The folder hierarchy of the layers in the AudioPlayer component

Figure 8.17: The initial dialog box when importing a QuickTime video

Figure 8.18: Set options that pertain to your video here. You'll encounter this dialog box any time you import a video, no matter the file type.

Figure 8.19: Selecting a frame rate ratio

Figure 8.20: Test the movie to experiment with the various functions.

Figure 8.21: Give the AudioPlayer component an instance name.

Figure 8.22: Create play, stop, and pause buttons that will be used to control the audio player.

Figure 8.23: Actions placed on the external Play button

Chapter 9: Game Components

Figure 9.1: The open quiz.fla file

Figure 9.2: Test the Quiz game to observe how it functions with the current or default settings.

Figure 9.3: The Component Parameters panel for the Quiz component

Figure 9.4: Setting the Game Time and Question Time parameters

Figure 9.5: The game flashes a "Too Late" message when time has run out.

Figure 9.6: You can edit the movie clips to change the graphics, but be sure to leave the instance names for the movie clips as they are.

Figure 9.7: The quiz.txt file conforms to a specific structure in order to work properly with the Quiz component in Flash.

Figure 9.8: Open the concentration.fla file and go to the first frame on the Game scene.

Figure 9.9: The Component Parameters panel for the Concentration Game component

Figure 9.10: Editing the parameters for the Concentration Game component

Figure 9.11: Editing the X Placement and Y Placement parameters

Figure 9.12: Placing the clown.jpg image on the stage

Figure 9.13: The first object in the upper-right corner has the instance name "object1a."

Figure 9.14: Edit the object1 movie clip and replace the original artwork with the pic1 movie clip.

Figure 9.15: Replace the artwork in all of the objects with the corresponding movie clips in the Pic library.

Figure 9.16: The background image shows through when the player makes a match.

Chapter 10: Creating Components

Figure 10.1: Open the Component Definition dialog box to define its parameters.

Figure 10.2: You can choose from many data types for your parameters.

Figure 10.3: The Component Definition dialog box with all the parameters added

Figure 10.4: When a movie clip is made into a component, its icon in the library changes.

Figure 10.5: By making a movie clip a component, Flash automatically creates an onClipEvent function, which is used to initialize the variables associated with the component's parameters.

Figure 10.6: The RandomSquares component generates… just what it says.

Figure 10.7: Randomly scattering particles on the screen

Figure 10.8: Component definition for the Particles component

Figure 10.9: Give the component a linkage name.

Figure 10.10: Open the sample file to view the controls for the component.

Figure 10.11: Create graphics for the particles used in the component.

Figure 10.12: With a small customization to the component, you can make the particles continuously stream from wherever the mouse is positioned.

Chapter 11: Component Extras

Figure 11.1: The Component Definition dialog box for the RandomSquares component

Figure 11.2: The custom UI for the component

Figure 11.3: Click the Check Parameters button to view a readout of any errors in the values you are using.

Figure 11.4: Selecting the Flash UI Components set in the Components panel

Figure 11.5: Add the options for the drop-down menu through the Component Parameters panel.

Figure 11.6: You can embed the UI movie into the component and make the UI display only in the Component Parameters panel.

Figure 11.7: A custom icon replaces the default for the component.

Figure 11.8: Be careful when positioning the graphic of the icon within the bitmap image.

Figure 11.9: Add the live preview SWF to the component through the Component Definition dialog box.

Figure 11.10: You can edit the XML file by dragging it into a simple text editor such as Notepad.

Figure 11.11: Make sure to allow the component to be displayed in the Component panel.

Figure 11.12: Create the MXP file by double-clicking the MXI file and selecting the name of the MXP package.

Figure 11.13: After you open the MXP file of the component, it should appear in the Components panel.

Chapter 12: Troubleshooting Components

Figure 12.1: Linkage properties for a component

Figure 12.2: Components in the library add kilobytes to your movie even if they are not on the stage.

Figure 12.3: The user who views this file will need to download nearly 100 KB before the movie begins to play.

Figure 12.4: Open the library big enough to view many symbols at once and have the Linkage column in full view.

Figure 12.5: The bandwidth profile reports that only 6 KB needs to download for the movie to start playing.

Figure 12.6: The Component Definition dialog box for the Flash 5 component

Figure 12.7: Commands that cannot be used in Flash 5 are highlighted yellow.