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

Discussion

There are two approaches to displaying an image when using the Image component: You can set the source for the Image class in MXML or you can pass a URL to load and use the img.load method:

img.load("http://thefactoryfactory.com/beach.jpg");

Before you load the image, though, you want to attach an event listener to ensure that each ProgressEvent is handled:

img.addEventListener(ProgressEvent.PROGRESS, progress);

In the progress method, which is handling the ProgressEvent.PROGRESS event, a UIComponent is redrawn by using the bytesLoaded property of the Image:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="loadImage()">
    <mx:Script>
        <![CDATA[

            private var m:Matrix;

            private function loadImage():void {
                var m:Matrix = new Matrix();
                m.createGradientBox(450, 40);
                img.addEventListener(ProgressEvent.PROGRESS, progress);
                img.load("http://thefactoryfactory.com/beach.jpg");
            }

            private function progress(event:Event):void{
                grid.graphics.clear();
                grid.graphics.beginGradientFill("linear", [0x0000ff, 0xffffff], 
[1, 1], [0x00, 0xff], m);
                grid.graphics.drawRect(0, 0, (img.bytesLoaded / img.bytesTotal) * 300,
40);
                grid.graphics.endFill();
            }

        ]]>
    </mx:Script>
    <mx:Canvas id="grid" height="40" width="300"/>
    <mx:Image id="img" y="40"/>
</mx:Canvas>

Section 8.17: Enable Image Upload in Flex

Problem

You want to enable users to upload images via Flex to be stored on a server.

Solution

Create a FileReference object and attach the appropriate filters so that users can upload the correct image types only. Then listen for the complete handler from the object and send the uploaded image to a server-side script.

Discussion

Image upload in Flex as well as in Flash relies on the use of the FileReference class. The FileReference object, when invoked, creates a window by using the browser's normal upload window and graphic and sends the image through the Flash Player when the user has selected a file for upload. Add an event listener to the FileReference object to indicate that the user has selected a file:

fileRef.addEventListener(Event.SELECT, selectHandler);

Then add a method to upload the file that the user has selected:

private function selectHandler(event:Event):void {
            var request:URLRequest = new URLRequest("http://thefactoryfactory.com/
upload2.php");
            fileRef.upload(request, "Filedata", true);
        }

After the file has been uploaded, send it to a PHP script to save the uploaded image:

package oreilly.cookbook
{
    import mx.core.UIComponent;
    import flash.net.FileFilter;
    import flash.net.FileReference;
    import flash.net.URLRequest;
    import flash.events.Event;

    public class _8_17 extends UIComponent
    {

        private var fileRef:FileReference;

        public function _8_17() {
            super();
            startUpload();
        }

        private function startUpload():void {
            //set all the file types we're going to allow the user to upload
            var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif,
*.png)", "*.jpg; *.jpeg; *.gif; *.png");
            var allTypes:Array = new Array(imageTypes);
            fileRef = new FileReference();
            fileRef.addEventListener(Event.SELECT, selectHandler);
            fileRef.addEventListener(Event.COMPLETE, completeHandler);
            //tell the FileRefence object to accept only those image
            //types
            fileRef.browse(allTypes);
        }

        private function selectHandler(event:Event):void {
            var request:URLRequest = new URLRequest("http://thefactoryfactory.com/
upload2.php");
            fileRef.upload(request, "Filedata", true);
        }
        private function completeHandler(event:Event):void {
            trace("uploaded");
        }
    }
}

Because the file has already been uploaded, you can deal with the data on the server, moving the file to (in this case) a folder called images:

$file_temp = $_FILES['file']['tmp_name'];
$file_name = $_FILES['file']['name'];
$file_path = $_SERVER['DOCUMENT_ROOT']."/images";
//checks for duplicate files
if(!file_exists($file_path."/".$file_name)) {
    //complete upload
    $filestatus = move_uploaded_file($file_temp,$file_path."/".$file_name);
    if(!$filestatus) {
        //error in uploading file
    }
}

Section 8.18: Compare Two Bitmap Images

Problem

You need to compare two bitmap images and display the differences between them.

Solution

Read the bitmap data from two images and use the compare method to compare the two images. Set the difference of the two images as the source of a third image.

Discussion

The compare method of the BitmapData class returns a BitmapData object that contains all the pixels that do not match in two specified images. If the two BitmapData objects have the same dimensions (width and height), the method returns a new BitmapData object, in which each pixel is the difference between the pixels in the two source objects: If two pixels are equal, the difference pixel is 0x00000000. If two pixels have different RGB values (ignoring the alpha value), the difference pixel is 0xFFRRGGBB, where RR/GG/BB are the individual difference values between red, green, and blue channels. Alpha channel differences are ignored in this case. If only the alpha channel value is different, the pixel value is 0xZZFFFFFF, where ZZ is the difference in the alpha value.

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="800">
    <mx:Script>
        <![CDATA[
            import mx.core.BitmapAsset;

            private function compare():void {
                var bmpd1:BitmapData = new BitmapData(img1.width, img1.height);
                var bmpd2:BitmapData = new BitmapData(img2.width, img2.height);
                bmpd1.draw(img1)
                bmpd2.draw(img2);
                var diff:BitmapData = bmpd2.compare(bmpd1) as BitmapData;
                var bitmapAsset:BitmapAsset = new BitmapAsset(diff);
                img3.source = bitmapAsset;
            }

        ]]>
    </mx:Script>
    <mx:Image id="img1" source="../assets/mao.jpg" height="200" width="200"/>
    <mx:Image id="img2" source="../assets/bigshakey.png" height="200" width="200"/>
    <mx:Button click="compare()" label="compare"/>
    <mx:Image id="img3"/>
</mx:VBox>