Flex 3 Cookbook: Chapter 8, Images, Bitmaps, Videos, Sounds
Pages: 1, 2, 3, 4, 5, 6, 7, 8

Section 8.9: Smooth Video Displayed in a Flex Application

Problem

You need to control the smoothing of a video that is played back in an application.

Solution

Create a custom component that contains the flash.media.Video component, and then set Video's smoothing property to true.

Discussion

To smooth video—that is, to make the video look less pixilated—you need to access the flash.media.Video object. Video smoothing, like image smoothing, requires more processing power than un-smoothed playback and can slow video playback for large or extremely high-quality videos.

The Flex VideoDisplay component does not allow you to set the smoothing property of the flash.media.Video object that it contains, so you must create a separate component that adds the lower-level Flash Video component and set the smoothing property:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" 
creationComplete="setup()">
    <mx:Script>
        <![CDATA[

            private var vid:Video;

            private var nc:NetConnection;
            private var ns:NetStream;
            private var metaDataObj:Object = {};

            private function setup():void {
                vid = new Video(this.width, this.height);
                vid.smoothing = true;
                this.rawChildren.addChild(vid);
                vid.y = 50;
                this.invalidateDisplayList();
            }

            private function startVid():void {
                nc = new NetConnection();
                nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
                nc.connect(null);
            }

            private function netStatusHandler(event:NetStatusEvent):void {
                ns = new NetStream(nc);
                metaDataObj.onMetaData = this.onMetaData;
                ns.client = metaDataObj;
                vid.attachNetStream(ns);
                ns.play("http://localhost:3001/Trailer.flv");
            }

            private function onMetaData(obj:Object):void 
            {
                    trace(obj.duration+" "+obj.framerate+" "+obj.bitrate);
            }
                var i:int = 0;
                for each(var prop:Object in obj)
                {
                    trace(obj[i] + "  :  " + prop);
                    i++;
                }
                trace(obj.duration+" "+obj.framerate+" "+obj.bitrate);
            }

        ]]>
    </mx:Script>
    <mx:Button  click="startVid()" label="load" x="50"/>
    <mx:Button click="ns.resume()" label="resume" x="120"/>
    <mx:Button click="ns.pause()" label="pause" x="190"/>
</mx:Canvas>

Section 8.10: Check Pixel-Level Collisions

Problem

You need to check whether images with alpha transparency regions are colliding with other images.

Solution

Draw the data of both images to a BitmapData object and use the BitmapData.hitTest method.

This excerpt is from Flex 3 Cookbook. This highly practical book contains more than 300 proven recipes for developing interactive Rich Internet Applications and Web 2.0 sites. You'll find everything from Flex basics and working with menus and controls, to methods for compiling, deploying, and configuring Flex applications. Each recipe features a discussion of how and why it works, and many of them offer sample code that you can put to use immediately.

Discussion

The BitmapData object possesses a hitTest method that works similarly to the hitTest method defined by DisplayObject with one notable exception: whereas 's hitTest method returns true if the point given intersects with the bounds of the object, BitmapData's hitTest method returns true if the pixel at the point given is above a certain threshold of alpha transparency. The signature of the method is shown here:

public function hitTest(firstPoint:Point, firstAlphaThreshold:uint, secondObject:
Object, secondBitmapDataPoint:Point = null, secondAlphaThreshold:uint = 1):Boolean

If an image is opaque, it is considered a fully opaque rectangle for this method. Both images must be transparent to perform pixel-level hit testing that considers transparency. When you are testing two transparent images, the alpha threshold parameters control what alpha channel values, from 0 to 255, are considered opaque. The method's parameters are as follows:

firstPoint:Point

A position of the upper-left corner of the BitmapData image in an arbitrary coordinate space. The same coordinate space is used in defining the secondBitmapPoint parameter.

firstAlphaThreshold:uint

The highest alpha channel value that is considered opaque for this hit test.

secondObject:Object

A Rectangle, Point, Bitmap, or BitmapData object.

secondBitmapDataPoint:Point (default = null)

A point that defines a pixel location in the second BitmapData object. Use this parameter only when the value of secondObject is a BitmapData object.

secondAlphaThreshold:uint (default = 1)

The highest alpha channel value that's considered opaque in the second BitmapData object. Use this parameter only when the value of secondObject is a BitmapData object and both BitmapData objects are transparent.

In the following code sample, each corner of a rectangular image is checked for collisions against a PNG file with alpha transparency:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="1500" height="900">
    <mx:Script>
        <![CDATA[
            import flash.display.BlendMode;

            private var mainBmp:BitmapData;
            private var dragBmp:BitmapData;
            private var hasDrawn:Boolean = false;

            private function loaded():void{
                if(!hasDrawn){
                mainBmp = new BitmapData(mainImg.width, mainImg.height, true, 
0x00000000);
                dragBmp = new BitmapData(dragImg.width, dragImg.height, true, 
0x00000000);
                hasDrawn = true;
                this.addEventListener(Event.ENTER_FRAME, showHits);
                }
            }

            private function showHits(event:Event):void
            {
                mainBmp.draw(mainImg);
                dragBmp.draw(dragImg);
                if(mainBmp.hitTest(new Point(0,0), 0xff, dragImg.getBounds(this).
topLeft)){
                    trace(" true ");
                    return;
                }
                if(mainBmp.hitTest(new Point(0,0), 0xff, dragImg.getBounds(this).
bottomRight)){
                    trace(" true ");
                    return;
                }
                if(mainBmp.hitTest(new Point(0,0), 0xff, new Point(dragImg.getBounds
(this).left, dragImg.getBounds(this).bottom))){
                    trace(" true ");
                    return;
                }
                if(mainBmp.hitTest(new Point(0,0), 0xff, new Point(dragImg.getBounds
(this).right, dragImg.getBounds(this).top))){
                    trace(" true ");
                    return;
                }
                trace(" false ");
            }

        ]]>
    </mx:Script>
    <mx:Image id="mainImg" source="../assets/alphapng.png" cacheAsBitmap="true"/>
    <mx:Image cacheAsBitmap="true" id="dragImg" mouseDown="dragImg.startDrag(false, 
this.getBounds(stage)), loaded()" rollOut="dragImg.stopDrag()"
mouseUp="dragImg.stopDrag()" source="../assets/bigshakey.png"/>

</mx:Canvas>