Skip to content
August 29, 2008 / Shrikant Patil

Flex UI SnapShot Component

The Bitmap API of the Flex framework is advantageous to implement Bitmap related Flex Applications.  Flash Player utilize the Bitmap API to render the every visual object within SWF as a bitmap (i.e get cached).  Only the Visual Objects which are marked as “dirty” will be redrawn on every frame of  interval. So The amount of resources used to render each frame is significantly reduced.

Every Flex visual components are drawn initially, and then cached as a Bitmap within the Flash Player. This is point where this component emerged. If the component is cached as Bitmap then we can create a Snap Shot of the component using Bitmap API. I worked on this point and i come up with a component ‘UISnapShot‘.

The Component UISnapShot extends the Image class. It has a property UITarget to which we need to pass the id of any visual UI Component. Using that reference of the component creates the BitmapData object, and assign the Bitmap to source property of the UISnapShot (extended Image component) component.

you can take the whole Flex application’s Snapshot:
To do so you need to pass ”mx.core.Application.application” to UITarget property of the component.

Here is the sample code how to use the component:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:ns1="flexScript.*">
<mx:DataGrid id="myGd" x="95" y="59" xmlns:com="*">
    <mx:columns>
    <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
    <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
    <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
    </mx:columns>
</mx:DataGrid>
<ns1:UISnapShot id="snapUI" x="95" y="209" width="302" height="168"/>
<mx:Button label="Snap DataGrid"
click="snapUI.targetUI=myGd" x="192.5" y="29"/>   
</mx:Application>

Here is the UISnapShot Component source code.


package flexScript
{
    import flash.display.BitmapData;
    import flash.geom.Matrix;
    import flash.display.Bitmap;
    import mx.controls.Image;
    import mx.core.UIComponent;

    public class UISnapShot extends Image
    {
        private var UITarget:UIComponent;

        public function UISnapShot()
        {
            super();
        }

        public function set targetUI(trgt:UIComponent):void{
            UITarget = trgt;
            drawUISnapShot(UITarget);
        }

        private function drawUISnapShot(target:UIComponent):void{
            var UIBData:BitmapData = new BitmapData(target.width,target.height);
            var UIMatrix:Matrix = new Matrix();
            UIBData.draw(target, UIMatrix);
            source = new Bitmap(UIBData);
            invalidateDisplayList();
        }
    }
}

The component can be extended to add more flexibilities.

Advertisements

4 Comments

Leave a Comment
  1. Rajeev goel / Apr 7 2009 5:50 pm

    often the next requirement is to save the image on server.
    bitmap data is verbose (3-4 bytes for each pixel). If one uses ASCII encoding to send data, that adds to bloat.
    one can use Jpeg encoder to reduce the size of image by converting bitmap data into Jpeg. read more: http://henryjones.us/articles/using-the-as3-jpeg-encoder

  2. Shane O'Sullivan / May 29 2009 3:04 pm

    Thanks for that tip, I used a slightly modified version and it works perfectly.

  3. Levii / Jul 17 2009 3:25 am

    When I try to pass “mx.core.Application.application” I get

    Severity and Description Path Resource Location Creation Time Id
    1118: Implicit coercion of a value with static type Object to a possibly unrelated type mx.core:UIComponent. UI Tests/src UISnapShot.mxml line 12 1247800988809 967

    I’m trying to create a tabbed panel that displays thumbnails of the windows on mouseover – but am 1.) getting the above error and 2.) not enitrely sure how to get all visual content of a specific tab (using the default flex tab panel)

    Any ideas? Thanks in advance.

    //Levii

    • Shrikant Patil / Jul 17 2009 6:27 am

      Levii,
      It is hard to get what problem facing about without code. You can drop me a mail @ mr.shrikant.patil@gmail.com, with some more detailed and sample code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: