Flash 5-Compatible Components

Building Flash 5 components is more of an art than building Flash MX components; it takes time and quite a few neat tricks to make it work. At the beginning of the chapter, I said that nearly every MX component could be made to be Flash 5-compatible. This is true, but it is not without a little bit of extra work. Realize that you cannot use any MX-specific commands, such as the drawing methods, and you cannot directly set up the relationship between code and graphics via registerClass.

Something new to Flash MX, which should have been added a long time ago, is the ability to save the FLA file in the format of a past version of Flash. This means you can work in the Flash MX authoring environment but save the file as Flash 5, provided that you do not use any MX commands.

Modifying the Component Definition

Let's demonstrate making Flash 5 components by making the Particles component from Chapter 10 to be Flash 5-compatible. Follow these steps:

  1. Make a copy of the component's FLA and rename it ParticlesComponent_Flash5.fla; for now, keep the file MX.

  2. Open the library, and then open the Component Definition dialog box for the Particles component.

  3. In Flash MX, you are allowed to add descriptive phrases for each parameter, but Flash 5 does not allow such a thing. In Flash 5, only the variable name column in Flash MX corresponds to the Variable column in Flash 5, so to set the variable identifier for a particular parameter, you must input under the Name column. Take all the text under the Variable column and put it in the corresponding entries under the Name column. Be sure you have deleted all text from under the Variable column. The Component Definition dialog box should now look something like Figure 12.6.

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

  4. After you have fixed the parameters, you need to save the file as Flash 5. The reason you changed the Component Definition dialog box first is because in the process of a file being saved from MX to Flash 5, the Component Definition gets mucked up and is a pain to fix. To save as Flash 5, select File Save As and select Flash 5 from the Save As Type drop-down menu.

  5. As soon as you press the Save button, Flash informs you of all the Flash MX features that will be lost when you save as Flash 5. Continue to save as Flash 5; you will have to do without those features.

At this point, if you look in the Component Definition dialog box again, you will see that all Number and String data types have been changed to Default. Flash 5 components can have only three data types: Array, List, and Default. However, the Default behaves the exact same way as String. Furthermore, if you look in the side panel of any Actions window (see Figure 12.7), you can see the commands that cannot be used-the ones that are highlighted yellow.

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

Modifying the Component's Class

We now need to modify the code for the component to be Flash 5-compliant. We cannot use the two-part inheritance that associates the component with the code anymore, but we can do our best to approximate it. First, we remove the commands #initclip and #endinitclip from the top and bottom of the actions, as they cannot be used in Flash 5. Also, delete these two lines from the actions:

         Object.registerClass ("ParticlesComponent", ParticlesClass);         ParticlesClass.prototype = new MovieClip (); 

The good news is that the component's class can be used with only a few changes. The first change we need to make is to set the parameters of the component in the class somehow. You can do this manually by going through each parameter and attaching its respective variable to the class via the prototype object. For our component, you can use the code in Listing 12.3.

Listing 12.3: Creating Properties in the Component's Class for All of the Component's Parameters

start example
            ParticlesClass.prototype.frame_delay = Number (frame_delay);            ParticlesClass.prototype.graphics_linkage = graphics_linkage;            ParticlesClass.prototype.particle_creation_type      =            particle_creation_type;            ParticlesClass.prototype.convergence_radius = Number (convergence_radius);            ParticlesClass.prototype.convergence_x = Number (convergence_x);            ParticlesClass.prototype.convergence_y = Number (convergence_y);            ParticlesClass.prototype.max_acceleration = Number (max_acceleration);            ParticlesClass.prototype.stage_width = Number (stage_width);            ParticlesClass.prototype.stage_height = Number (stage_height);            ParticlesClass.prototype.creation_handler = creation_handler;            ParticlesClass.prototype.deletion_handler = deletion_handler; 
end example

Notice that we have wrapped the parameters that need to be of Number data type with the Number object in order to safely convert its data type. The actions in Listing 12.3 directly create new properties in the class for every parameter in the component.

Previously, we could simply use the keyword this to refer to the Timeline of the component, but we no longer have the luxury. Instead, we are going to create an extra property in the class named timeline, which will hold a reference to the component's Timeline.

         ParticlesClass.prototype.timeline = this; 

Now, we must take on the painstaking task of going through the entire class and finding all references to the component's Timeline, and replacing that reference with the newly added timeline property. Fortunately for us, our component needs only about five corrections. The first appears in the class constructor where we referenced this._x and this._y; it should be changed to this:

         this.timeline._x = 0.0;         this.timeline._y = 0.0; 

Next, in the create_particle method, we encounter the bit of code that attaches a random particle to the stage. Instead of attaching a movie to this, we now need to attach to this.timeline. Also, before, we were using the fact that attachMovie returns a reference of the newly attached movie clip, but this is not the case in Flash 5. So, we need to get the reference to that attached movie ourselves. It is done with this code:

         // attach a new particle to the stage         this.timeline.attachMovie (linkage, "particle" + this.depth, this.depth);         var _mc = this.timeline["particle" + this.depth]; 

The only other two places we need to make timeline adjustments are where we call the creation and deletion handlers. Instead of referencing the _parent of this we need to reference the _parent of this.timeline.

         this.timeline._parent[this.creation_handler] (_mc);         this.timeline._parent[this.deletion_handler] (_mc); 

There are more changes to be made to the code, but they will come later. For now, we need to figure out a bigger problem. In the previous file, we had set up such a close relationship between the component movie clip and the component's code that an instance of the component was treated exactly as an instance of the class. But we do not have this extra anymore, so we have to manually create an instance of the class via the new keyword. So create another layer in the component named Initialization, and add the following code.

         component = new ParticlesClass (); 

Modifying Functions and Methods

Now, we have all the functionality of the component bundled up into the instance of the class; how do we unleash its power? We need some way of firing the various event handlers of the component, such as onEnterFrame or onMouseDown. The way you could determine things like mouse down, key down, and so on is through the user of onClipEvent. It provides the means to detect all of the event handlers that were provided in Flash MX. And, luckily enough, we have a movie clip that does not have an entirely useful purpose in our component: the label movie clip. We can add movie events to the label movie clip that will fire all the various events that were written in the component's class. In the particular case of our component, we used only one event: onEnterFrame. But typically a component will use many events, so we fire every event from the onClipEvent actions in the label. Listing 12.4 shows how it is done.

Listing 12.4: Using a Movie Clip's onClipEvent Actions to Fire the Events of the Component

start example
           onClipEvent (load)           {              _parent.component.onLoad ();           }           onClipEvent (unload)           {              _parent.component.onUnload ();           }           onClipEvent (enterFrame)           {              _parent.component.onEnterFrame ();           }           onClipEvent (mouseDown)           {              _parent.component.onMouseDown ();           }           onClipEvent (mouseMove)           {              _parent.component.onMouseMove ();           }           onClipEvent (mouseUp)           {              _parent.component.onMouseUp ();           }           onClipEvent (keyDown)           {              _parent.component.onKeyDown ();           }           onClipEvent (keyUp)           {              _parent.component.onKeyUp ();           }           onClipEvent (data)           {              _parent.component.onData ();           } 
end example

This provides Flash MX functionality through Flash 5 commands. The component is almost entirely functional. The only parts of the component that need to be changed are the methods that we added to give the user control over the component through the use of ActionScript. These are methods that stop and start the stream, change the frame delay, and so on. In order to have those methods provide the same type of functionality as they do in MX, the user needs access to them as if they were directly attached to the movie clip. We can accomplish this by creating intermediate functions that are directly attached to the movie clip, and all they do is call the corresponding methods in the component class. Listing 12.5 shows the code that accomplishes this.

Listing 12.5: Functions to Handle ActionScript-Related Functionality That You Have Given to the User

start example
           stop_stream = function ()           {              this.component.stop_stream ();           }           start_stream = function ()           {              this.component.start_stream ();           }           change_frame_delay = function (delay)           {              this.component.change_frame_delay (delay);           }           change_convergence_point = function (x, y)           {              this.component.change_convergence_point (x, y);           }           change_convergence_radius = function (radius)           {              this.component.change_convergence_radius (radius);           } 
end example

With the last line written, you are done converting a Flash MX component to Flash 5. The process was not entirely tedious, and in the end it is definitely worth it. Be warned that sometimes in the middle of the development process, you might hit Ctrl+S to save the file, and Flash will suddenly inform you that you are using a Flash MX element and the file must be saved in the MX format. Don't worry when this happens; simply hit Cancel and do the Save As routine to save the file as Flash 5. Flash will again warn you that all Flash MX-related content will be removed, at which point you can see what MX-specific elements you accidentally used.

The Hidden Power of Flash Components
The Hidden Power of Flash Components
ISBN: 0782142109
EAN: 2147483647
Year: 2002
Pages: 111

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net