Trick for adding properties to a sprite object

I remember the days of AS2 when I was able to add dynamic properties to a movieclip and able to access them within some event. Now working with AS3 I still able to do the same, yet, if I use more effective Sprite class, then this is not possible becase Sprite is not synamic class. I fell it verry inconvinient to add properties to a sprite object in the following situation.

  1. for(var i:uint=0; i<=5; i++){
  2.         var sp:Sprite=new Sprite;
  3.         sp.x=i*25;
  4.         addChild(sp);
  5.         draws(sp);
  6.         sp.addEventListener(MouseEvent.CLICK, clickHandler);
  7. }
  8.  
  9. function clickHandler(evt:MouseEvent){
  10.         // can not track which sprite is clicked
  11. }
  12.  
  13. function draws(s:Sprite){
  14.         s.graphics.beginFill(0xff0000,1);
  15.         s.graphics.lineTo(20,0);
  16.         s.graphics.lineTo(20,20);
  17.         s.graphics.lineTo(0,20);
  18.         s.graphics.lineTo(0,0);
  19.         s.graphics.endFill();
  20. }
  21.  

Many a times I found suggestion to use either Movieclip class or to use another associative array that keeps record of the sprites created in the for loop along with other custom properties like index of the array( in the above example ‘i’). The later was good, yet I need to traverse through the loop to get some custom property by comparing the index property or some times ‘name’ property of the sprite- something like the code segment given below.

  1. var _arr:Array=new Array;
  2. for(var i:uint=0; i<=5; i++){
  3.         var sp:Sprite=new Sprite;
  4.         sp.x=i*25;
  5.         addChild(sp);
  6.         draws(sp);
  7.         var customProperty:uint= i*23;
  8.         sp.name=String(i);
  9.         _arr.push(customProperty);
  10.         sp.addEventListener(MouseEvent.CLICK, clickHandler);
  11. }
  12.  
  13. function clickHandler(evt:MouseEvent){
  14.         trace(_arr[Number(evt.target.name)]);
  15. }
  16.  
  17. function draws(s:Sprite){
  18.         s.graphics.beginFill(0xff0000,1);
  19.         s.graphics.lineTo(20,0);
  20.         s.graphics.lineTo(20,20);
  21.         s.graphics.lineTo(0,20);
  22.         s.graphics.lineTo(0,0);
  23.         s.graphics.endFill();
  24. }
  25.  

The above code runs fine but it’s still not a good piece of code because it eliminates the next renaming to the sprite to properly run the code.
While exploring through the documentation, I found flash.utils.Dictionary class which found more effective solution to the above problem. Dictionary class is some what a hash table where we can keep non primitive objects along with primitives used in arrays. The solution to the above problem with the use of Dictionary class is as follows:

  1. var dict:Dictionary=new Dictionary;
  2. for(var i=0; i<=10; i++){
  3.          var sp:Sprite=new Sprite;
  4.          draws(sp);
  5.          sp.x=(i+1)*25;
  6.          sp.y=100;
  7.          this.addChild(sp);
  8.          var customProperties:Object=new Object;
  9.          customProperties.distance=i*45;
  10.          customProperties.speed=i+45;
  11.          dict[sp]=customProperties;
  12.          sp.addEventListener(MouseEvent.CLICK, track);
  13.  
  14. }
  15. function draws(s:Sprite){
  16.          s.graphics.beginFill(0xff0000,1);
  17.          s.graphics.lineTo(20,0);
  18.          s.graphics.lineTo(20,20);
  19.          s.graphics.lineTo(0,20);
  20.          s.graphics.lineTo(0,0);
  21.          s.graphics.endFill();
  22. }
  23. function track(evt:MouseEvent){
  24.         trace(dict[evt.target].distance + "   " +dict[evt.target].speed );
  25. }
  26.  
This entry was posted in Flash. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>