Browse DevX
Sign up for e-mail newsletters from DevX


Master the Time-saving Power of Flash Components, Part 2 : Page 3

In part 1 of this series, you learned to build components that worked with multiple versions of Flash. In this follow-up you'll learn all the little extras that allow you to customize, extend, and distribute your components, for maximum ease and peace of mind.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Step 7: Enhance the Component with a Custom Class
So far, to keep things simple, I've added the bare minimum of ActionScript to the component to make it function. However, I'm not taking advantage of some of the best features of components. So, I'm going to add some additional code that will integrate my component more fully into the Flash object model. Here again, I'll show the code and then discuss it.

(For clarity, I've numbered the lines, but be sure not to include these numbers in your file if you're following along. Alternately, you can get the code here.)

1 #initclip 2 function FMAStamper() { 3 this.swapDepths(1000); 4 this.stampBack._alpha = this.sBackAlpha; 5 this._x = Stage.width - 20; 6 this._y = Stage.height - 20; 7 } 8 Object.registerClass("stamper", FMAStamper); 9 FMAStamper.prototype = new MovieClip(); 10 #endinitclip

The first new item is that all the code appears within the #initclip/#endinitclip structure. This allows you to execute code only when the component is initialized. This is great for initializing variables or otherwise doing things that you only want to do once.

First, define a function for this component, and call it "FMAStamper." (It's good practice to name your variables with names a user probably won't choose for his/her own code.) Inside this new function the existing code is unchanged.

Now, register this function as a custom class, associating it with the Linkage ID you gave the component. This more tightly integrates the component into the Flash Object Model and allows you to easily instantiate the component programmatically. Again, you must select the component in the library, and use the "Linkage..." option. You must give the component the same Linkage ID as you register with the class, above. You have likely already used Linkage IDs with MovieClips or sounds, or other assets you want to introduce with ActionScript.

Finally, in doing the above, Flash will change the type of this component from MovieClip to the new class. However, I still want to be able to control it the same way all MovieClips are controlled. So, I must inherit all the MovieClip properties, methods, eventHandlers, etc., by using line 9. This creates a MovieClip prototype within the custom class and grants access again to all the MovieClip goodies.

Step 8: Add Getter and Setter Wrappers
The ActionScript that I've written so far is fine for a fully self-contained component. However, the existing model doesn't allow you to use ActionScript to easily query, or change, any of the component's settings. For example, if you wanted to change the background alpha of the component remotely, you would have to already know the name of the variable "sBackAlpha" and change that variable value directly. To begin with, this is inconvenient. You will have to remember the name of that variable, and no one else would ever know what it is, making this component decidedly less useful.

Additionally, it's not good practice to directly expose your core variables to the outside world. The best way to handle this is to both insulate your code and provide a user-friendly way for users to access your parameters. Do this by creating "getter" and "setter" wrappers. This is not a requirement, just good coding practice. These are just function constructs that "wrap" around your variable assignments and other executions, using familiar syntax that allow users to get, and set, values where appropriate. This way, users don't have to know or remember obscure variable names.

To do this, set up functions that are available throughout the life of the component instance. Set them up as prototypes of the custom class you've created.

FMAStamper.prototype.setBackgroundAlpha = function(whichAlpha) { this.sBackAlpha = whichAlpha; }; FMAStamper.prototype.getBackgroundAlpha = function() { return this.sBackAlpha };

An instruction might read something like:


The component must be updated after every remote change. So, make a minor change by defining one last function to do the update, and move anything that happens after the component's initialization to the update function. At runtime, the component only needs to move to level 1000 once, and it only needs to be positioned in the lower right hand corner of the stage once. But, the alpha value must be updated every time it is called. The final script shows this change. (Note the call to update() at initialization and in the setter, and don't forget to omit line numbers if you're copying from these notes.)

1 #initclip 2 function FMAStamper() { 3 this.swapDepths(1000); 4 this._x = Stage.width - 20; 5 this._y = Stage.height - 20; 6 this.update(); 7 } 8 Object.registerClass("stamper", FMAStamper); 9 FMAStamper.prototype = new MovieClip(); 10 FMAStamper.prototype.setBackgroundAlpha = function(whichAlpha) { 11 this.sBackAlpha = whichAlpha; 12 this.update(); 13 }; 14 FMAStamper.prototype.getBackgroundAlpha = function() { 15 return this.sBackAlpha 16 }; 17 FMAStamper.prototype.update = function() { 18 this.stampBack._alpha = this.sBackAlpha; 19 }; 20 #endinitclip

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date