Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/19/comparing-two-bitmap-images-using-the-bitmapdata-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import flash.display.BitmapData;

            [Bindable]
            [Embed(source="assets/bug.png")]
            private var BugIcon:Class;

            [Bindable]
            [Embed(source="assets/bug_add.png")]
            private var BugAddIcon:Class;

            private var diff:BitmapData;

            private function init():void {
                var bmd1:BitmapData = new BugIcon().bitmapData;
                var bmd2:BitmapData = new BugAddIcon().bitmapData;
                diff = BitmapData(bmd1.compare(bmd2));
                img3.source = new Bitmap(diff);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="image 1 alpha:"
                    direction="horizontal">
                <mx:HSlider id="img1_alpha"
                        minimum="0"
                        maximum="1"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="img1.alpha = img1_alpha.value;" />
                <mx:Image source="{BugIcon}" />
            </mx:FormItem>
            <mx:FormItem label="image 2 alpha:"
                    direction="horizontal">
                <mx:HSlider id="img2_alpha"
                        minimum="0"
                        maximum="1"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="img2.alpha = img2_alpha.value;" />
                <mx:Image source="{BugAddIcon}" />
            </mx:FormItem>
            <mx:FormItem label="diff image alpha:">
                <mx:HSlider id="img3_alpha"
                        minimum="0"
                        maximum="1"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="img3.alpha = img3_alpha.value;" />
            </mx:FormItem>
            <mx:FormItem label="scale:">
                <mx:HSlider id="scale"
                        minimum="1"
                        maximum="4"
                        value="1"
                        liveDragging="true"
                        tickInterval="1"
                        showTrackHighlight="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Canvas>
        <mx:Image id="img1"
                source="{BugIcon}"
                scaleX="{scale.value}"
                scaleY="{scale.value}" />
        <mx:Image id="img2"
                source="{BugAddIcon}"
                scaleX="{scale.value}"
                scaleY="{scale.value}" />
        <mx:Image id="img3"
                scaleX="{scale.value}"
                scaleY="{scale.value}" />
    </mx:Canvas>

</mx:Application>

View source is enabled in the following example.

 

In this mini-application we look at how to take a snapshot of the video at each cue point. We then take that bitmap, and bind it to a TileList control’s data provider so our TileList shows handy video cue points, along with an HTML-formatted label of the cue point name/time/type.

Full code after the jump.

Also note that when we create the HTML-formatted itemRenderer, we have to escape the <b> tags as <b>.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.CuePointEvent;
            import mx.collections.ArrayCollection;

            [Bindable]
            private var arrColl:ArrayCollection = new ArrayCollection();

            private function copyBitmap(source:DisplayObject):Bitmap {
                var bmd:BitmapData = new BitmapData(source.width, source.height);
                bmd.draw(source);
                return new Bitmap(bmd);
            }

            private function videoDisplay_cuePoint(evt:CuePointEvent):void {
                var bm:Bitmap = copyBitmap(evt.currentTarget as DisplayObject);
                arrColl.addItem({bitmap:bm, cuePointName:evt.cuePointName, cuePointTime:evt.cuePointTime, cuePointType:evt.cuePointType});
            }
        ]]>
    </mx:Script>

    <mx:Panel id="panel" layout="horizontal">
        <mx:HBox paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" backgroundColor="black">
            <mx:VideoDisplay id="videoDisplay" source="http://www.helpexamples.com/flash/video/cuepoints.flv" cuePoint="videoDisplay_cuePoint(event)" top="5" />
        </mx:HBox>

        <mx:TileList id="tileList" columnCount="1" dataProvider="{arrColl}" width="{videoDisplay.width}" height="{videoDisplay.height + 10}" verticalScrollPolicy="on">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox paddingBottom="0" paddingTop="0">
                        <mx:Image source="{data.bitmap}" toolTip="{data.cuePointTime}" maintainAspectRatio="true" scaleX="0.5" scaleY="0.5" />
                        <mx:Text textAlign="left">
                            <mx:htmlText>name: &lt;b&gt;{data.cuePointName}&lt;/b&gt;&lt;br /&gt;time: {data.cuePointTime} &lt;br /&gt;type: {data.cuePointType}</mx:htmlText>
                        </mx:Text>
                    </mx:HBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:TileList>
    </mx:Panel>

</mx:Application>

 

As an added bonus, we also create a custom item renderer consisting of an HBox container, Image control, and a Label control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/03/duplicating-images-using-the-bitmap-and-bitmapdata-classes/ -->
<mx:Application name="Image_content_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
 
            [Bindable]
            private var arrColl:ArrayCollection = new ArrayCollection();
 
            private function dupeImage(source:Image):void {
                var data:BitmapData = Bitmap(source.content).bitmapData;
                var bitmap:Bitmap = new Bitmap(data);
 
                arrColl.addItem({image:bitmap, label:"item #" + (arrColl.length + 1)});
            }
        ]]>
    </mx:Script>
 
    <mx:HBox>
        <mx:Panel title="Source image">
            <mx:HBox verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
                <mx:Image id="img1" source="assets/logo.png" />
            </mx:HBox>
 
            <mx:ControlBar>
                <mx:Button label="Copy image" click="dupeImage(img1)" />
            </mx:ControlBar>
        </mx:Panel>
 
        <mx:TileList id="tileList" dataProvider="{arrColl}" width="300" height="200" columnCount="4" verticalScrollPolicy="on">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:VBox>
                        <mx:Image source="{data.image}" />
                        <mx:Label text="{data.label}" />
                    </mx:VBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:TileList>
    </mx:HBox>
 
</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

Download source (ZIP, 1K) | View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/02/finding-a-pixels-color-value-using-the-bitmap-classes-and-getpixel/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private var bm:Bitmap;
            private var bmd:BitmapData;

            private function image_complete(evt:Event):void {
                /* Create Bitmap from Image content. */
                bm = img.content as Bitmap;

                /* Create new BitmapData object. */
                bmd = new BitmapData(img.contentWidth, img.contentHeight);

                /* Draw Bitmap into BitmapData. */
                bmd.draw(bm.bitmapData);
            }

            private function image_mouseMove(evt:MouseEvent):void {
                /* Get the pixel currently under the mouse cursor. */
                var color:int = bmd.getPixel(evt.localX, evt.localY);

                /* Convert the color value from a number to Hex string. */
                var colorStr:String = color.toString(16).toUpperCase();

                /* Set the swatch Box instance's backgroundColor style to the color under the mouse cursor. */
                swatch.setStyle("backgroundColor", color);

                /* Make sure colorStr is at least 6 characters. */
                colorStr = "000000" + colorStr;

                /* Make sure colorStr is at MOST 6 characters. */
                lbl.text = "#" + colorStr.substr(colorStr.length - 6);
            }
        ]]>
    </mx:Script>

    <mx:Zoom id="zoom" />

    <mx:VBox>
        <mx:Image id="img" source="image1.jpg" completeEffect="{zoom}" complete="image_complete(event);" mouseMove="image_mouseMove(event)" />

        <mx:HBox>
            <mx:Box id="swatch" width="{lbl.height}" height="{lbl.height}" />
            <mx:Label id="lbl" width="100" fontFamily="_typewriter" fontSize="16" />
        </mx:HBox>
    </mx:VBox>

</mx:Application>

View source enabled in the following example.