Create Dynamic images as2 code to as3

Question

So I have a function to create images dynamically in as2, telling some parameters, the problem I am facing is that I need to add this function to a file that has as3, so is incompatible, can anyone please help me translate it to as3?

   function goGetUrl(dir:String){
    getURL(dir, "_blank");
  }

 function createImage(str:String,
                        movieName:String,
                        nombreIma:String,
                        index:Number,
                        dir:String, 
                        buttonName:String
                        )
    {   
        var mc:MovieClip    = MYMOVIECLIP.createEmptyMovieClip(movieName, MYMOVIECLIP.getNextHighestDepth());
        var image:MovieClip = mc.createEmptyMovieClip(nombreIma, mc.getNextHighestDepth());
        image.loadMovie(str);
        image._y = (index * 160);
        image._x = 10;
        mc.onRelease = function(){
            goGetUrl(dir);
        }
        target = MYMOVIECLIP.attachMovie("MYCUSTOMBUTTONONLIBRARY",buttonName,MYMOVIECLIP.getNextHighestDepth(),{_x: 300, _y: (image._y + 60) });
        target.onRelease = function(){
        goGetUrl(dir);
        }
    }

So I call it like inside a loop:

for (i=0; i < Proyecto.length; i++) {
    ...
    createImage(imagePro, "nom"+i,"im"+i, i , myurl, "btn"+i);  
   ...
}

For example the getURL(dir, "_blank"); does not work, I think I can chage it by:

navigateToURL(new URLRequest (dir));

also I know that getNextHighestDepth() is not available in as3

shanethehat shanethehat · Accepted Answer · 2011-08-25T09:28:55

First, here's how is looks as a direct translation:

function goGetUrl(dir:String)
{
    //getURL becomes navigateToURL
    navigateToURL(new URLRequest(dir), "_blank");
}

function createImage(str:String,movieName:String,nombreIma:String,index:Number,dir:String, buttonName:String)
{   
    //replace createEmptyMovieClip with a new movieclip.
    //addChild automatically adds to the highest available depth
    this[moviename] = MYMOVIECLIP.addChild(new MovieClip()) as MovieClip;
    //movieclip no longer has a load method, so use a Loader instead
    this[nombreIma] = MovieClip(this[moviename]).addChild(new Loader()) as Loader;
    Loader(this[nombreIma]).load(str);
    //properties no longer start with an underscore
    Loader(this[nombreIma]).y = (index * 160);
    Loader(this[nombreIma]).x = 10;
    //using an anonymous function here feels dirty
    MovieClip(this[moviename]).addEventListener(MouseEvent.CLICK,function() { goGetUrl(dir) });
    //AS2 identifiers are replaced by class names
    this[buttonName] = addChild(new MYCUSTOMBUTTONONLIBRARY()) as MYCUSTOMBUTTONONLIBRARY;
    this[buttonName].x = 300;
    this[buttonName].y = this[nombreIma].y + 60;
    MYCUSTOMBUTTONONLIBRARY(this[buttonName]).addEventListener(MouseEvent.CLICK,function() { goGetUrl(dir) });
}

This is quite unpleasant in AS3 terms. There is lots of casting required and the click handlers are anonymous functions, which is about as slow to execute as an event handler will get. I would personally create a custom class that you can instantiate multiple times, and store the references in a Vector for easy access. Something like this:

package {

    import flash.display.Sprite;
    import flash.display.Loader;
    import CustomLibraryButton;
    import flash.net.URLRequest;
    import flash.net.navigateToURL;

    public class CustomImageDisplay extends Sprite
    {
        private var loader:Loader
        private var button:CustomLibraryButton;
        private var link:String;

        public var index:int;

        public function CustomImageDisplay($index:int,$img:String,$link:String):void
        {
            _index = $index;
            link = $link;
            init($img);
        }

        private function init($img:String):void
        {
            //init image loader
            loader = addChild(new Loader()) as Loader;
            loader.load($img);
            loader.x = 10;
            loader.y = _index * 160;

            //init button from library
            button = addChild(new CustomLibraryButton()) as CustomLibraryButton;
            button.x = 300;
            button.y = loader.y + 60;

            //add a listener to the whole thing
            this.addEventListener(MouseEvent.CLICK, handleClickEvent);
        }

        private function handleClickEvent(evt:MouseEvent):void
        {
            navigateToURL(new URLRequest(link), "_blank");
        }

    }
}

You could use that like this:

var imageButtons:Vector.<CustomDisplayImage> = new Vector.<CustomDisplayImage>(Proyecto.length);
for (i=0; i < Proyecto.length; i++) {
    imageButtons[i] = this.addChild(new CustomImageDisplay(i,imagePro,myurl)) as CustomDisplayImage;
}

The cool thing here is that mouse event in the class will bubble, so if you wanted to know which image component had been clicked from your main code you would add a listener to the stage, and check the event object like this:

this.stage.addEventListener(MouseEvent.CLICK,handleMouseClick);

function handleMouseClick(evt:MouseEvent):void
{
    if(evt.currentTarget is CustomDisplayImage) {
        trace("The image button index is: " + CustomDisplayImage(evt.currentTarget).index);
    }
}

Create Dynamic images as2 code to as3

1 Answers