15.3. Extending Flash Although it's not nearly as extensible as Director or Photoshop, for example, Flash can still be extended beyond its out-of-the-box configuration. Flash extensions are essentially limited to the authoring environment, but when it comes to enhancing the authoring experience, Flash is very flexible and allows you to create custom commands, tools, panels, behaviors, and more. (This limitation also has the side benefit of keeping the runtime player lean and the end-user experience standardized.) Space limitations prohibit an exhaustive look into all of the possibilities, but this book will still give you some experience in extending Flash. In Chapter 2 you created a basic command using the History panel, and in this chapter you will make your own simple component. 15.3.1. Building Your Own Component You've used components several times in this book. Components are valuable tools that can both help an ActionScript novice build rich interactive experiences and assist ActionScript veterans with rapid prototyping. However, you've also seen that stock componentsparticularly the Flash v2 components that ship with Flash 8 and Flash MX 2004can add considerably to your file size. In larger projects delivered over broadband this can be relatively unnoticeable, but in small projects the size changes can be significant. So, this project will be to adapt the preloader script you wrote in Chapter 12 and build your own smaller version of a component. The first step in creating a component is to package the assets and ActionScript necessary for the component as a self-contained unit. Start by turning your preloader script and its associated text field into a movie clip: Open my_preloader_03.fla, located in the 15 folder. This file contains the preloader script you created earlier, without the buttons and other extraneous material. Save it as my_component.fla in the 15 folder. Select frame 1 of the actions and text layers, then right/Ctrl-click and choose Copy Frames from the contextual menu. Press Ctrl/Cmd-F8 to open the Create New Symbol dialog box. Create a movie clip symbol and name it My Loader Self. The name you use for this movie clip becomes the name of the component that appears in the Components panel later. You will make two versions: one version will load assets into itself, and the second version will load assets into a remote target. In Edit mode for My Loader Self, right/Ctrl-click on frame 1 of Layer 1 and choose Paste Frames from the contextual menu. The frame contents and layer names that you copied earlier will be pasted into the timeline. Position the text field at (0, 0), so the clip's registration point can be used to align instances of the component on the Stage. The registration point is the only thing you'll see when you drag this component on-Stage, and if you know the registration point is in the upper-left corner of the text field, you can use it to accurately position the component.
Your preloader script was originally written to load a specific image (water. jpg) into a specific place (the container_mc clip). To use the existing script in a component, the code has to work in any situation. To pull this off, you need to generalize the code by making the name and path of the file into which the component will load configurable options: In Edit mode for My Loader Self, select frame 1 of the actions layer and open the Actions panel. Modify the loadClip() statement in the preloader script by replacing the hard-coded pathname of the demo water image with the following variable (change shown in bold): my_mcl.loadClip (fileToLoad, container);
As an additional nicety, change the depth in which the asset loads from the previous hard-coded 1 (change again shown in bold): var container:MovieClip = this.createEmptyMovieClip("container_mc", this.getNextHighestDepth());
The last step simply ensures that Flash renders the movie clip in front of all other objects on the same level and layer in the current movie clip, increasing the chances that you won't have to fool around with stacking order when you use your component. However, the fileToLoad variable is important. You may have noticed that you haven't defined this variable anywhere. That's because this placeholder variable will be defined within the Flash interface, in the Component Parameters panel. Now turn the symbol into a compsonent: Right/Ctrl-click on the My Loader Self symbol in the Library and choose Component Definition from the contextual menu. The Component Definition dialog box shown in Figure 15-9 opens. In the Parameters section of the dialog box, you need to define the fileToLoad variable you used earlier. Click the Add Parameter button (the + sign) to create a new parameter. Enter a descriptive string like File to load: in the Name field for the parameter, and press Enter/Return. In the Variable field, enter the variable name, fileToLoad. As is true with nearly all ActionScript, case matters, so type it exactly the same way you did in the script. Skip over the Value field for a moment. From the Type drop-down list (which is used to specify the data type for the variable), choose String. Finally, enter path/asset.ext into the Value field. This is an optional stepmany developers leave string default values blank, which is one way to remind the user that a path can be specified, and that any asset Flash can load externally is supported (in Flash 8, that means SWF, JPG, GIF, and PNG files). The Component Definition dialog box should now look like Figure 15-9. Figure 15-9. The Component Definition dialog box 
Your component is now functional, but don't stop just yet. In case you share this component with others, make the user experience friendlier: Click the Set button next to the Description label and enter some descriptive text that will be displayed in the Flash authoring interface when this component is selected. Try something like Loader with feedback at registration point: "Loading: X%". (The sample file has more descriptive text, if you want to get ideas later.) Click OK to set the text. Back in the Component Definition dialog box, in the Options section, check the "Display in Components panel" option and type Loader with Percentage Text, Loads in Self into the "Tool tip text" field. As a tool tip, this text should be shorter than the description. Click OK to close the dialog box. Notice that the icon for the My Loader Self symbol in the Library panel has changed to a component icon. All that's left to do now is to put in the parameter values. Get a fresh start by deleting everything from the Stage and dragging in the component anew, to the upper-left corner of the Stage. (This is not necessary, but it will help show you that no other code is at work during your test.) Remember, the registration point of this component will be the registration point of the loaded asset. Select the component and show the Component Parameters tab in the Properties panel, as seen in Figure 15-10, or the Component Inspector (Window  Component Inspector). Figure 15-10. The Component Parameters tab  Click in the "File to load" field and type http://www.flash8projects.com/water.jpg. Save your work and test your movie. Compare your file to my_component_02.fla.
Congratulations. Not only have you authored your first component, but the resulting file is only about 500 bytes, or half a kilobyte! That's approximately 1/64th of the size of the component you set out to rewrite. Good work! 15.3.1.1. Further customizing your component The drag-and-drop simplicity of this component is great, but the loading status information always appears where the asset is loaded. What if you wanted to replicate the multi-graphic example you created in Chapter 12, where the text always appeared in the lower-left corner, regardless of the asset load location? Add one more parameter to your component to make the load target configurable as well: Go back to your file in progress and right/Ctrl-click on the component to begin editing. Select frame 1 of the actions layer again and open the Actions panel. Modify the loadClip() statement once again, this time replacing the load target. Replace container with whereToLoad (change again shown in bold): my_mcl.loadClip (fileToLoad, whereToLoad);
You no longer need the first line, so delete the following text: var container:MovieClip = this.createEmptyMovieClip("container_mc", this.getNextHighestDepth());
Right/Ctrl-click on the component in the Library, and choose the Component Definition option again. Add a parameter to tie in with your new variable. Enter Where to load: in the Name field, whereToLoad in the Variable field, and _parent. container.mc in the Value field, and make sure String is selected in the Type drop-down menu. Edit the descriptive text and the tool tip string to change the references to the asset loading into the component itself. Instead, mention in both places that the asset is loaded into a remote location. OK the dialog to go back to the Library. Rename the component My Loader Remote. Go back to the main timeline. Create a movie clip in the upper-left corner of the Stage and give it a symbol and instance name of container_mc. You can now move your component to any location you want, and the asset will still load in the targeted component. Save your work and test your movie. Your file should now resemble my_compononent_03.fla.
The preceding code won't work if you specify 1 for the whereToLoad parameter. Although you can still use the loadClip() method to load into a level, the component will not understand the string "1" as a level. For maximum flexibility, the user of the component could specify a level number instead of a string without worrying about the component's implementation. You can modify the code to convert the whereToLoad parameter to a number, if necessary, by replacing this code: my_mcl.loadClip (fileToLoad, whereToLoad);
with this: if (isNaN(parseInt(whereToLoad))) { // treat destination as movie clip object my_mcl.loadClip(fileToLoad, whereToLoad); } else { // treat as level number my_mcl.loadClip(fileToLoad, parseInt(whereToLoad)); }
An ambitious developer might also warn the component user if the specified target clip or level doesn't exist. However, a full discussion of writing custom components is beyond the scope of this book. This project's goal is to help you understand universal issues, such as how to define parameters to generalize your components. If you'd like to try to add support for level numbers, you can compare your attempt with my_component_04.fla. 15.3.2. Adding Your Component to the Flash Interface All that remains is for you to export the component so that it can be stored in the Flash install directory and accessed via the Components panel: Continuing from where you left off, right/Ctrl-click on My Loader Self in the Library and choose Export SWC File from the contextual menu. In the Export File dialog box, name the file My Loader Remote.swc and save it in the 15 folder. (Feel free to export My Loader Self, too, if you want to use both components.) Save and close your file.
Now you have a compiled component that, once installed, will appear in the Components panel. Add it to the Flash install directory and test it: Locate My Loader Remote.swc in the 15 folder and copy it to the clipboard. Paste a copy of My Loader Remote.swc into the Flash 8 components configuration folder. The location of this folder can vary from Flash version to Flash version and operating system to operating system, but at the time of this writing the most probable locations for Flash 8 component installation were as follows:
Windows -
C:\Program Files\Macromedia\Flash 8\<language>\Configuration\Components
Mac -
Macintosh HD/Applications/Macromedia Flash 8/Configuration/Components For additional locations, consult the Macromedia web site. It's a good idea to create a subfolder in the Components directory, named Custom or something similar, into which you can put components that you install by hand. This will keep things organized. Back in Flash, open the Components panel's Options menu and choose Reload. The new My Loader Remote component should appear in the list.
If your new component doesn't appear in the Components panel, you may need to restart Flash. Last but not least, test the new component in a new file and make sure it does what it's supposed to: Create a new Flash document and save it as component_test.fla in the 15 folder. Drag the My Loader Remote component onto the Stage. Create a movie clip in the upper-left corner and give it an instance name of container_mc. In the Properties panel's Parameters tab, enter http://www.flash8projects.com/water.jpg in the "File to load" field. If the "Where to load" field does not already contain _parent.container_mc, enter that text in the field. Save and test your movie.
There is one small catch to using the loading components you've created: they only work with Flash Player 7 or later. Although ActionScript 2.0 can be used when exporting to Flash Player 6 format, that version of the player doesn't support recent classes such as MovieClipLoader. When creating Flash content, it's best to decide which version of the Flash Player you'll be publishing to prior to starting your project. Many of the most powerful features of ActionScript are supported only in Flash Player 7 or later, but you can still accomplish a reasonable amount of goals with Flash Player 5 compatibility. 15.3.3. Intermediate to Advanced Component Features There are several additional options that can be explored when creating your own components. Some are user-interface related, such as the Live Preview option for components with a significant visual portion and the ability to create a custom interface so you don't have to rely on the Component Parameters tab or the Component Inspector panel. Others include the ability to add actions for your own components to Flash's Actions panel and help for your own components to the Macromedia Help system. | ActionScript Spotlights | If you take one thing away with you after reading this book, it should be that the power to unlock Flash's true potential comes through learning ActionScript. The Flash interface provides many ways to get started creating wonderful art, animations, designs, and even basic applications and prototypes. Flash 8 offers the Flash designer a greater number of interface-based tools than any previous upgrade, including its filters, blend modes, custom easing, and more. Yet even the best timeline artists have only scratched the surface of what is possible. The following list covers some of the key ActionScript highlights presented throughout this book. Whenever possible, try to revisit these topics and continue to hone your ActionScript skills. Chapter 3:"Your First Script" "Frame Scripts" "Semicolon;"
Chapter 4:Chapter 5:"Properties" "Methods" "Functions"
Chapter 6:"Controlling the Character with ActionScript" "Absolute and Relative Target Paths" "Movie Clip Event Handlers"
Chapter 7:Chapter 8:Chapter 9:Chapter 10:Chapter 11:"Custom Anti-Aliasing" "CSS"
Chapter 12:Chapter 13:"Flash Cookies: Local Shared Objects" "Sending Results with a Form" "Loading and Sending Variables"
Chapter 14:Chapter 15:If the early looks at ActionScript 3 (in alpha release at the time of this writing) are any indication, more will soon be possible with Flash than ever before. Look for Rich Shupe's Learning ActionScript 3, an upcoming title from O'Reilly. |
These tasks vary in complexity and require at least a minimal amount of comfort with XML. Coverage is outside the scope of this text, but there are a few online resources dealing with the creation of components and other Flash extensions that include these features. See the appendix for details. One additional feature that is likely within the grasp of even a moderately determined entry-level user is the packaging of a component or other extension for installation through the Macromedia Extensions Manager. This software should be included with your Flash installation, but it can also be downloaded from Macromedia's web site, free of charge. By creating a small XML file, you can package your component or extension into an installer that will automatically place your software in the appropriate directory, making manual installation unnecessary. Sample files are distributed with the Extensions Manager, so if you're up to it, try bundling up your component for distribution. |
