AS3 Dynamically change image of object

Question

How does one change image of already created object
Let's say I have an empty class named Icon and on runtime I want to change its image to something and add it on stage. The image can be from the library as another object or just a bitmap.

var icon1 = new Icon(myIcon);
...

public class Icon extends MovieClip {
public function Icon(icon:Class) {
    //change image
    addChild(this);
}

EDIT: in java I used to do it like this:

new Icon(myIcon);
...

public class Icon {

public Image image;
public String icon;

public Icon(String icon) {

        ImageIcon ii = new ImageIcon(this.getClass().getResource(icon + ".png"));
        image = ii.getImage();
        this.icon = icon;
    }

and on paint method I just type icon1.image to show on screen and also can change image if needed by accessing this variable.

Is this possible to do it something like this on as3?

Answer 1

Let's say I have an empty class named Icon and on runtime I want to change its image to something

Before code make sure you prepared by following these example steps...

1) Open the Library (ctrl+L) and right click to choose "create new symbol" of MovieClip type and give it the name Icon then look at the Advanced tab further below...

2) Tick the box called "Export For ActionScript" and that should auto-fill a box called Class with text saying Icon . Click OK and you are ready.

3) Add one or two images to Library and right-click to choose "properties" and again like step (2) in the linkage section you tick the "Export for AS" option and give a name you prefer to type later via code. We'll assume you chose names like Pic1 and Pic2 . Notice as well that the "base Class" for these bitmaps is bitmapData ? That's the data you change to update your image by code.

So to update dynamically by code... Create a bitmap and update its pixel data with any bitmapData from Library. Something like:

//# in your imports...
import flash.display.MovieClip;
import flash.display.Bitmap;    
import flash.display.BitmapData;
import flash.utils.getQualifiedClassName;
import flash.utils.*;

....

//# in vars declarations...
public var my_icon : Icon = new Icon ();
public var my_BMP : Bitmap;
public var str_Type : String = ""; //later holds library object type for checks

....

//# later in your code
stage.addChild(my_icon); //looks invisible since empty

my_BMP = new Bitmap; //create new instance
my_icon.addChild ( my_BMP ); //add the empty bitmap into Icon

change_Icon ( Pic1 ); //parameter can be Library's Bitmap or Movieclip 

Making the change_Icon function...

If you just kept it bitmaps (PNG files?) you could use a simple function like this...

public function change_Icon ( in_Param : Class ) : void
{
    my_BMP.bitmapData = new in_Param as BitmapData; //replace pixels of existing bitmap container
}

But since you say it could be anything, sometimes a Bitmap or sometimes a MovieClip, well in that case you have to check the input and handle accordingly.

public function change_Icon ( in_Param : * ) : void
{
    //# Check the input type and handle it 
    str_Type = String ( getDefinitionByName( String( getQualifiedSuperclassName(in_Param) ) ) );

    if ( str_Type == "[class BitmapData]" )
    {
        trace ( "this object is a Bitmap..." );
        my_BMP.bitmapData = new in_Param as BitmapData; //replace pixels of existing bitmap container
    }

    if ( str_Type == "[class MovieClip]" )
    {
        trace ( "this object is a Movieclip..." );

        var temp_MC = new in_Param();
        var temp_BMD : BitmapData = new BitmapData( temp_MC.width, temp_MC.height );

        my_BMP.bitmapData = temp_BMD; //assign data to this bitmap
        temp_BMD.draw (temp_MC); //update by drawing
    }

}

Answer 2

After adding your icons (image files) to your library, converting them to MovieClips and setting their AS linkage like this, for example :

You can use, for example, a Sprite object to load your icon inside your Icon class instance where your Icon class can be like this, for example :

package  {

    import flash.display.Sprite;

    public class Icon extends Sprite 
    {
        private var _icon:Sprite;

        public function Icon(IconClass:Class): void
        {
            _icon = new IconClass();
            addChild(_icon);
        }

        public function changeIcon(IconClass:Class): void 
        {
            removeChild(_icon);
            _icon = new IconClass();
            addChild(_icon);
        }

    }

}

Then in your main code, you can use that class :

import Icon;

var icon:Icon = new Icon(PHPIcon);
addChild(icon);

then to change the icon, you've just to call the changeIcon() function :

icon.changeIcon(JSIcon).

Edit :

If you don't want to call addChild() to add your Icon class's instance to it's parent container, the constructor of your Icon class can be like this for example :

public function Icon(container:DisplayObjectContainer, IconClass:Class): void
{
    container.addChild(this);
    _icon = new IconClass();
    addChild(_icon);
}

then for its instance

var icon:Icon = new Icon(this, PHPIcon);

Hope that can help.

Answer 3

Thanks finally now I have a base class to work with on future projects, I also use list so all I have to do is call new Icon(myIcon, x, y, this);

package  {

    import flash.display.Sprite;
    import flash.display.DisplayObjectContainer;

    public class Icon extends Sprite {
        public static var list:Array = new Array();
        private var icon:Sprite;
        private var n:int;

        public function Icon(IconClass:Class, x:int, y:int, container:DisplayObjectContainer):void {
            container.addChild(this);
            icon = new IconClass();
            n = list.push(this);
            addChild(icon);
            this.x = x; this.y = y;
        }
        public function changeIcon(IconClass:Class):void {
            removeChild(icon);
            icon = new IconClass();
            addChild(icon);
        }
        public function removeIcon():void {
            this.parent.removeChild(this);
            list.splice(n-1,1);
        }
    }
}