How to add images dynamically in AS3? - image

Question

Ok, i want to add a series of images, and then be able to drag and drop each one of them. I have all of my images embedded in a class Images. s0,s1,s2 are instances of image classes. Now this is what i've done
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
function init(e:Event = null):void
{
var a:Array = new Array();
var imageContainer:Sprite = new Sprite;
var imgClass:Images = new Images();
for (var i:int = 0; i < 9; i++) {
a[i].push(imgClass.(s+String(i)));
imageContainer.addChild[a[i]];
}
stage.addChild(imageContainer);
imageContainer.addEventListener(MouseEvent.MOUSE_UP, takeIt);
imageContainer.addEventListener(MouseEvent.MOUSE_DOWN, dropIt);
function takeIt(event:MouseEvent) {
event.currentTarget.startDrag();
}
function dropIt(event:MouseEvent) {
event.currentTarget.stopDrag();
}
}
}

Answer 1

I have rewritten your code a bit, but I have not been able to test it sorry.
The first think I notices is that your init method was inside your Main method. Then your takeIt and dropIt method were inside the init. I am not to sure if that would actually work, but I have fixed it up in the code below.
In my code I assume that the image instances you have in the Images class are instances of Bitmap. This means that inside the for loop I had to add each one to a Sprite so you have access to startDrag and stopDrag. I listen for the MOUSE_DOWN event on each image, and set the image to the selectedImage var and do startDrag. I also listen for the MOUSE_UP on the stage, and drop the currentImage.
package
{
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class Main extends Sprite
{
private var selectedImage:Sprite;
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
var imageContainer:Sprite = new Sprite();
var imgClass:Images = new Images();
for (var i:int = 0; i < 9; i++)
{
var imgInstance:Bitmap = imgClass['s' + i.toString()] as Bitmap;
var imgSprite:Sprite = new Sprite();
imgSprite.addChild(imgInstance); // Put image in a sprite so we can use startDrag on it.
imageContainer.addChild(imgSprite);
imgInstance.addEventListener(MouseEvent.MOUSE_DOWN, img_mouseDownHandler);
}
addChild(imageContainer);
stage.addEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler);
}
private function dropSelectedImage():void
{
if (selectedImage)
{
selectedImage.stopDrag();
}
}
private function img_mouseDownHandler(e:MouseEvent):void
{
dropSelectedImage();
selectedImage = e.currentTarget as Sprite;
selectedImage.startDrag();
}
private function stage_mouseUpHandler(e:MouseEvent):void
{
dropSelectedImage();
}
}
}
To build your images in a loop you could also just manually build the array, then loop through the array like so:
var images:Array = [imgClass.s0, imgClass.s1, imgClass.s2, imgClass.s3, imgClass.s4, imgClass.s5, imgClass.s6, imgClass.s7, imgClass.s8];
for each (var img:Bitmap in images)
{
var imgSprite:Sprite = new Sprite();
imgSprite.addChild(img); // Put image in a sprite so we can use startDrag on it.
imageContainer.addChild(imgSprite);
imgInstance.addEventListener(MouseEvent.MOUSE_DOWN, img_mouseDownHandler);
}
Hope this help. Feel free to ask me to elaborate or explain anything else in the comments.