Question

I am building a Flex application with ActionScript 3. Unfortunately I’ve hit a wall with this one…

I would like to be able to apply an upSkin to my dynamically generated button like this:

//this theSkin variable is dynamic in my app, but for this example it's a simple string
var theSkin:String = "http://www.mypicturedomain.com/images/myimage.gif";

var navBtn:Button = new Button();
navBtn.id = "thumb1";
navBtn.width = 60;
navBtn.height = 45;    

//skin the button
navBtn.setStyle("upSkin", theSkin);

//add the button to my canvas
myCanvas.addChild(navBtn);

When I attempt this, I get this error:

TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Loader@3dac941 to Class.

How do I skin this button with my image dynamically? A couple of things to consider:

1. The upSkin image must be remote. It can’t be local.
2. The button must be generated dynamically (it’s in a for loop).

Any help/ideas would be much appreciated at this point!

Answer 1

I solved my problem by going with a HorizontalList component instead of a canvas. Much easier! Just had to stick my images in an array and make sure that itemRenderer was set to mx.controls.Image so it would display the items in my array collection as images. Once my array was made, I just had to create an arraycollection out of it then assign a data source to the horizontallist. It looks something like this:

private function myFunction():void{

    var thumbArray:Array = new Array("http://www.something.com/mypic1.png", "http://www.something.com/mypic4.png", "http://www.something.com/mypic3.png");
    var myArrayCollection = new ArrayCollection(thumbArray);

    imageScroller.dataSource = myArrayCollection;

}

<mx:HorizontalList itemRenderer="mx.controls.Image" columnWidth="80" rowHeight="64" x="0" y="0" id="imageScroller" width="640" enabled="true" borderStyle="none" backgroundAlpha="1" borderColor="#FCA000" backgroundColor="#1C1C1C"></mx:HorizontalList>

Hope this helps someone else!