Thumbnails for mxml components in Flex

Question

Is it possible to make some kind of 'dynamic' thumbnails for mxml components which I'm using in my application? By 'dynamic' I mean if I change some layout in mxml component, my thumbnail refreshes according to new layout without any screen capturing, photoshoping or similar =)

Edit:
I am using a FlexBook component, which makes a 'book' of mxml components (because each page has many independent interactions). I think that problem could be that bitmap data does not exist until I actually start to turn pages. But I would like to get bitmap data on creation complete.

Thanks!

---

Ok, let me try to explain little more because I see this is more complicated than I thought it will be..

I am using a FlexBook component, which makes a 'book' of mxml components (because each page has many independent interactions). I think that problem could be that bitmap data does not exist until I actually start to turn pages. But I would like to get bitmap data on creation complete...

Thanks for help!
m.

Answer 1

Here is a function I coded long time ago. It takes a DisplayObject(mxml components are DisplayObject too), it will return a Bitmap of it.

You may write a handler to listen for Event.RENDER of the mxml component to update the Bitmap when the component is changed.

Another thing you can try on the FlexBook component is to set creationPolicy="all"...

/**
 * This function returns a Bitmap that have the same look of a given DisplayObject.
 * Ref.: http://qops.blogspot.com/2008/05/bitmap.html
 * @author Andy Li [e-mail]
 * @version 20080529
 */
package net.onthewings{
    import flash.geom.Point;
    import flash.geom.Rectangle;
    import flash.geom.Matrix;
    import flash.display.DisplayObject;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.PixelSnapping;
    import flash.display.Stage;

    public function bitmapEquivalentOf(obj:DisplayObject, extendsRectSidesBy:Number = 0, clipOutside = null,alpha:Boolean = true):Bitmap {
        if (obj.width && obj.height) {
            var bitmapData:BitmapData = new BitmapData(obj.width, obj.height, alpha, 0xFFFFFF);
            var rect:Rectangle = obj.getBounds(obj);
            var matrix:Matrix = new Matrix;
            matrix.translate(-rect.x, -rect.y);
            bitmapData.draw(obj, matrix);
            var bitmap:Bitmap = new Bitmap(bitmapData, PixelSnapping.AUTO, true);
            bitmap.x = rect.x;
            bitmap.y = rect.y;
            var ebd:BitmapData;

            if (clipOutside) {
                var h:Number;
                var w:Number;
                if (clipOutside is Stage) {
                    h = clipOutside.stageHeight;
                    w = clipOutside.stageWidth;
                } else {
                    h = clipOutside.height;
                    w = clipOutside.width;
                }
                if(!(h && w)){
                    return null;
                }
                var pt:Point = obj.localToGlobal(new Point(rect.x,rect.y));
                ebd = new BitmapData(w, h, true, 0xFFFFFF);
                ebd.copyPixels(bitmap.bitmapData,new Rectangle(-pt.x,-pt.y,w,h),new Point(0,0));
                bitmap =  new Bitmap(ebd, PixelSnapping.AUTO, true);
            } else if (extendsRectSidesBy) {
                ebd = new BitmapData(bitmapData.width+extendsRectSidesBy*2, bitmapData.height+extendsRectSidesBy*2, true, 0xFFFFFF);
                ebd.copyPixels(bitmap.bitmapData,bitmap.bitmapData.rect,new Point(extendsRectSidesBy,extendsRectSidesBy));
                bitmap =  new Bitmap(ebd, PixelSnapping.AUTO, true);
                bitmap.x = rect.x - extendsRectSidesBy;
                bitmap.y = rect.y - extendsRectSidesBy;
            }
            return bitmap;
        } else {
            return null;
        }
    }
}