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.

You mean it is the thumbnail of the application? And you want the thumbnail to be BitmapData or what? — Andy Li, Oct 19 '09 at 15:34
Hmmm... Well, application? They are mxml files and I use them as components in my main application. I need a thumbnail of each component I use... I suppose that BitmapData would be cool, yes =) — errata, Oct 19 '09 at 15:43

score 2 · Accepted Answer · answered Oct 19 '09 at 16:24

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 andy@onthewings.net
 * @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;
        }
    }
}

I've just found out that there is `ImageSnapshot` class in Flex which should be better that my old function. Use its `captureBitmapData` function :) — Andy Li, Oct 19 '09 at 16:30
Hey hello and thanks for this great help! I was playing around with BitmapData and ImageSnapshot classes but I still cannot get thumbnails for pages in my book... I can successfully make a thumbnail for first page (which is immediately rendered), but I was not so much successful with other 'unrendered' pages... Anyway, thank you one more time! — errata, Oct 19 '09 at 20:47

Thumbnails for mxml components in Flex

1 Answers1

Linked