Tutorial :Displaying huge, scrollable images in Image?


I'm trying to show image files (jpg, png, gif) that can be larger than the available display area. I've embedded an Image inside a cCanvas (to get scrolling), but the large images are not completely displayed.

Very large images (e.g. 2480 x 3507) have the top or the top and bottom of the image clipped withing the scrolling Image.

What is the largest graphic one can display using the mx.controls.Image ?



The 2880 pixels limit is for BitmapDatas, for DisplayObjects there's a limit of 8191 pixels. You can bypass these limits by using the BitmapDataUnlimited-class available here: http://code.google.com/p/bitmapdataunlimited/

However, if performance is important I'd recommend letting such large images consist of multiple smaller ones instead. Even if you don't reuse these smaller ones or take care of removing them from the displayList or setting their visible-property to false there will still be a performance gain as flash automatically detects that they're outside of the stage and wont have to be rendered.


I forgot saying that the 2880px-limit only applies when manually creating BitmapDatas, images bigger than that can still be loaded in, and their BitmapDatas (which are bigger than 2880px) can be accessed and manipulated. You could easily have a Bitmap with a bitmapData as large as the viewport, then you can set its bitmapData by doing something like:

viewportBitmapData.copyPixels(sourceBitmapData, new Rectangle(x,y,viewportWidth, viewPortHeight), new Point(0,0))  

When scrolling, you could simply do the above on each frame Or if performance is important, you can when scrolling (if scrollingDistance is less than viewportSize) use viewportBitmapData.scroll(x,y) to shift the whole bitmapData, and then copy only the new pixels.


I've read that the limit is 2880 pixels per dimension in Flash 9. In Flash 10 the limit is higher. Check to see which version you're compiling for.

You could potentially chop the image into smaller pieces and assemble them in Flex.


If makes a difference which FlashPlayer you are targetting:

versions VS maximum bitmapsize

flashplayer -9 : 2880x2880 px
flashplayer 10 : 4096x4096 px
flashplayer 11 : unlimited

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »