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.