placing loaded image on several location

[Spirit Wolf]

Hi,

I'm loading my images into a gallery with the help of xml. For each image I make a new object of an graphic symbol to place the the image in. This graphic symbol, which then holds the image, I want to place on two different locations. One for the thumbs and one for the main image (I'm not using seperate thumb images because it is no use when each image is only around 10Kb). The other one I want to place on an other location for full viewing. My "thumbnails" will allways be shown.

The problem is that when I use addchild right after the image is loaded, it loads it only on the last location I used addchild. Like it takes the image on the first location and just relocates it to the other location.

Cheers

[neznein9]

A child can only be in one place in the display tree at once...so you need to create multiple versions of the same image...when your loader finishes you should be able to create multiple Bitmaps using the BitmapData stored in loader.content.

[Spirit Wolf]

But a loader only holds one image at a time. So if it goes through the whole list, you are only left with the last image. I have only been able to get the image when I call a function with the eventlistener Event.INIT of the contentloaderInfo. Because I also neede the height and width of the image and only then I was able to get that info.

I think I don't understand the concept of the Bitmap/BitmapData and that is why I'm having trouble. I can make the Bitmap, but how do I approach it then? How can I give it a name. How can I say that I want that image to be on that location and at a certain point also at the other location.
Anyone have a usable sample code maybe?

Cheers

[neznein9]

The Loader holds a BitmapData object when you load an image. BitmapData is the raw information about each pixel - basically it's a big Array with color values in it. Because it's so simplified, it can't be directly added to the stage like that, you need an interpreter to convert that array of data into the actual image - that is where Bitmap comes in. Bitmap is the converter that gives your big pixel-grid all the properties you need to put it on stage - like .x and .y, and alpha, and addChild, etc. etc.

The trick here is that you can't add the same Bitmap to the stage more than once, but you can make more than one Bitmap using the same BitmapData:

function onImageLoaded(e:Event):void{
    //  this is where the magic happens!
    var a:Bitmap = new Bitmap(e.target.loader.content);
    var b:Bitmap = new Bitmap(e.target.loader.content);
    
    a.smoothing = true;
    b.smoothing = true;
    
    a.scaleX = a.scaleY = .1;
    
    a.x = 200;
    a.y = 400;
    
    b.x = 50;
    b.y = 30;
    
    thumbnailBar.addChild(a);
    imgGallery.addChild(b);
} 

[Spirit Wolf]

I get this error:
TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Bitmap@113739d1 to flash.display.BitmapData.

I tried calling the function with an eventlistener like this:

imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);

and

imageLoader.contentLoaderInfo.addEventListener(Event.INIT, onImageLoaded);

both give the same error.

[neznein9]

Sorry my fault - I misread my own old code :P

The Loader brings in a Bitmap, not a BitmapData - so you'll just need to dig a little deeper to get at it...replace the two earlier lines with these and see if that works:

var a:Bitmap = Bitmap(e.target.loader.content);
var b:Bitmap = new Bitmap(a.bitmapData); 

[Spirit Wolf]

Well,
thank ... you ... so ... very ... much . That worked just fine! I have tested it with my current gallery and now I can use it for my new gallery i'm making.

But can you answer some of my questions, just so that I comprehend it better?
My Loader is called "imageLoader". So if I would use var a:Bitmap = Bitmap(imageLoader); , would that give the same effect as your way of coding?
"a" is a bitmap, so why do you use a.bitmapData in the line for creating the b?

Can I put reference names on each bitmap? For the current gallery it isn't necessary because both bitmaps are displayed at the same time (second is for a "reflection"). But for the new gallery, the second image is only displayed at a certain time, when the first bitmap is one of the bitmaps that is selected for displaying. So I need some kind of referencing that first and second bitmap know each other.

But hey, thanks a lot... now my current gallery looks like I wanted it to look .

Cheers

[neznein9]

Glad it's working!

My Loader is called "imageLoader". So if I would use var a:Bitmap = Bitmap(imageLoader); , would that give the same effect as your way of coding?
"a" is a bitmap, so why do you use a.bitmapData in the line for creating the b?

Since we're using an eventListener, it doesnt even matter what your Loader is called - you should only reference things by the event's target so you can keep your code flexible - for example, you could use any number of different Loaders with that function and it would still work

As for the a/b thing, remember that the Loader is a DisplayObject - so when it get's loaded it can hold either a MovieClip (swf) or Bitmap (jpg/png). The problem is that there's some ambiguity in the code now (since swf's dont have pixels and bitmaps dont have timelines, etc. etc) so we have to hard-cast the Loader's content into what we need. Consider this:

trace(e.target.loader.content);
//  DisplayObject

trace(Bitmap(e.target.loader.content));
//  Bitmap 

Theyre the same object, but the second line is letting Flash know it can be more specific. Since bitmaps are a subclass of DisplayObject, you can treat them as either one (it's the whole square = rectangle but rectangle != square deal).

Anyway, I think it's wasteful to bring in a Bitmap and then just use it to make copies, so I used the original as the bitmap in "a", then (since you can't use the same Bitmap) I just stole a's bitmapData and made a second Bitmap for it for "b". If you wanted to make clean duplicates in a loop or something you'd need to re-cast the loader.content each time...not efficient but here's how:

for(var i:int = 0; i < 10; i++){
    var bm:Bitmap = new Bitmap( Bitmap(e.target.loader.content).bitmapData );
    //  notice we're using the event's target's loader object's content,
    //  which we're declaring to be a bitmap, and using that bitmap's 
    //  bitmapData...go nesting!!
    addChild(bm);
} 

Can I put reference names on each bitmap? For the current gallery it isn't necessary because both bitmaps are displayed at the same time (second is for a "reflection"). But for the new gallery, the second image is only displayed at a certain time, when the first bitmap is one of the bitmaps that is selected for displaying. So I need some kind of referencing that first and second bitmap know each other.

Instance names are another topic I could spout off about for a couple pages but to keep this super-long post a little less-long, lets just say that you need to use a variable and stuff your images in there. The favorite is an Array...just push in each new bitmap as it's created and you can step through them in order. If you need data that matches up with what's in the array (say a reflection image), you should take a look at the Dictionary class.

Anyway, sorry I got so wordy on this one - I hope it helps!