8 Replies Latest reply on Sep 13, 2006 9:41 AM by DreamasterFlex

    having trouble using the loader to manipulate a gif

    DreamasterFlex
      Why won't this code work?

      public var url:String = "Image.gif";
      var request:URLRequest = new URLRequest(url);
      loader.load(request);
      var bmpimage:Bitmap = Bitmap(loader.content)
      this.addChild(bmpimage);

      ------ see, if I simply do this.addchild(loader) then it works fine, but I need
      to convert the loader object into a bitmap, then create a BitmapData object
      from it, manipulate the image and then eventually send it to the display list,
      but for now, when I run the .swf compiled from the code above all I get is a blank
      screen! Does anybody have any ideas?

      Thanks for any help,
      DreamasterFlex


        • 1. Re: having trouble using the loader to manipulate a gif
          peterent Level 2
          You have to wait for the image to load before you can use its content. Add a complete event listener to the image and in the listener function, do the Bitmap thing.
          • 2. Re: having trouble using the loader to manipulate a gif
            DreamasterFlex Level 1
            First of all, thanks for responding. I kind of hate being a pest but I'm getting stumped again.
            Ok, I'm going to post my code(s), most of which come almost straight from your Examples. I origionally had a heck
            of a time finding a way to get addchild to work at all with the Flex MXML stuff going on, finally found your geometric
            sprite example and whiddled it down to the bare basics. Now I'm trying to combine the BmpData/Loader example with it.
            The results upon compile is everything working except only one image ever gets displayed in my pale yellow box, and that's the
            image.gif from the addchild(loader) line. The good news is, the other addchild's aren't blanking my screen out anymore.
            I've added (and removed) other code and confirmed that the completeHandler function is indeed being executed even though
            it doesn't appear to be. I really need help getting that image as a bitmap object to the screen.

            Here is the mxml code: (called firstapp.mxml) Actionscript code follows below it.

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
            xmlns:example="displayextension.*"
            xmlns="*"
            layout="vertical"
            creationComplete="initApp()"
            >
            <mx:Panel title="Anaglyph Panel" width="100%" height="100%">
            <mx:Script>
            <![CDATA[
            public function initApp():void
            {
            canvas.initCanvas(0xF5F1D1, 0x000000);
            }
            ]]>
            </mx:Script>

            <mx:Label id="title"
            fontSize="24"
            fontStyle="bold"
            text="3D Image Creator" />

            <mx:Label id="subtitle"
            fontSize="12"
            text="Trying to get some code going here" />

            <mx:TextArea id = "mainTxt" width="400"/>

            <mx:FormItem label="What kind of shape would you like to describe?">
            <mx:ComboBox id="shapeNameCbo" change="initApp()">
            <mx:dataProvider>
            <mx:Array>
            <mx:String>Circle</mx:String>
            <mx:String>Triangle</mx:String>
            <mx:String>Square</mx:String>
            </mx:Array>
            </mx:dataProvider>
            </mx:ComboBox>
            </mx:FormItem>

            <example:DrawingCanvas id="canvas" width="500" height="200" />

            </mx:Panel>
            </mx:Application>



            AND HERE IS THE ACTIONSCRIPT FILE called DRAWINGCANVAS.AS in the filefolder displayextension:

            package displayextension
            {
            import flash.display.DisplayObject;
            import flash.events.MouseEvent;
            import flash.geom.Point;
            import flash.geom.Rectangle;
            import flash.display.Bitmap;
            import flash.display.BitmapData;
            import flash.display.Loader;
            import flash.display.Sprite;
            import flash.events.*;
            import flash.net.URLRequest;
            import mx.core.UIComponent;

            public class DrawingCanvas extends UIComponent
            {
            public var bounds:Rectangle;
            public var lineColor:Number;
            public var fillColor:Number;
            public var size:uint = 80;
            public var url:String = "Image.gif";
            public function DrawingCanvas(w:Number = 500, h:Number = 200, fillColor:Number = 0xFFFFFF,

            lineColor:Number = 0x000000)
            {
            super();
            this.bounds = new Rectangle(0, 0, w, h);
            configureAssets();
            }

            public function initCanvas(fillColor:Number = 0xFFFFFF, lineColor:Number = 0x000000):void
            {
            this.lineColor = lineColor;
            this.fillColor = fillColor;
            this.width=500;
            this.height=200;
            drawBounds();
            }

            public function drawBounds():void
            {
            this.graphics.clear();

            this.graphics.lineStyle(1.0, this.lineColor, 1.0);
            this.graphics.beginFill(this.fillColor, 1.0);
            this.graphics.drawRect(bounds.left - 1, bounds.top = 1, bounds.width + 2,

            bounds.height + 2);
            this.graphics.endFill();
            }

            private function configureAssets():void {
            var loader:Loader = new Loader();
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
            loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);

            var request:URLRequest = new URLRequest(url);
            loader.x = size * numChildren;
            loader.load(request);
            addChild(loader);
            }

            private function duplicateImage(original:Bitmap):Bitmap {
            var image:Bitmap = new Bitmap(original.bitmapData.clone());
            image.x = size * numChildren;
            addChild(image);
            return image;
            }

            private function completeHandler(event:Event):void {
            var loader:Loader = Loader(event.target.loader);
            var image:Bitmap = Bitmap(loader.content);

            var duplicate:Bitmap = duplicateImage(image);
            var bitmapData:BitmapData = duplicate.bitmapData;
            var sourceRect:Rectangle = new Rectangle(0, 0, bitmapData.width, bitmapData.height);
            var destPoint:Point = new Point();
            var operation:String = ">=";
            var threshold:uint = 0xCCCCCCCC;
            var color:uint = 0xFFFFFF00;
            var mask:uint = 0x000000FF;
            var copySource:Boolean = true;

            bitmapData.threshold(bitmapData,
            sourceRect,
            destPoint,
            operation,
            threshold,
            color,
            mask,
            copySource);
            }

            private function ioErrorHandler(event:IOErrorEvent):void {
            trace("Unable to load image: " + url);
            }
            }
            }
            • 3. Re: having trouble using the loader to manipulate a gif
              peterent Level 2
              I'm willing to help, but a good description of what you are trying to do would help to clarify things. I know you are trying to load images and manipulate the bitmap. But could you put it into context?
              • 4. Re: having trouble using the loader to manipulate a gif
                DreamasterFlex Level 1
                :) I hope our exchange can eventually help other people get started too.

                K, The "ultimate goal" if you will is to have Flex create an Anaglyph, which is one of those RED/BLUE 3D with the eyeglasses images. The program does this by taking two gif or jpg images of the same size, and then, pixel by pixel there is a matrix multiplication done using the color values of from the same corresponding pixels from each image, of which the total final result should be the Anaglyph image.

                I tend to program in "functional stages" so instead of worrying about the matrix stuff just yet, I was going to have it make a color replacer, it might be cool for example to read each pixel from the bitmap data object, do a test for black and replace it with white, and vice versa.

                But besides that, I guess the two other things I don't know how to do is have a "Choose image from hard drive" buttons, and the other part is, (more importantly because I can always use text boxes or hard code the image names for now) is in order to do the matrix multiplication I need to split the RGB values up into 3 seperate numbers instead of one UINT, and then eventually take the resulting RGB's back into a UINT format.

                That's a lot of info, and a lot of stuff... but if you could help me get my code above to where I can say, take a black and white "image.gif" and invert the colors by using GetPixel and SetPixel and have the inverted image display side by side with in the origional in my pale yellow window then maybe I can run with the rest? :) I don't want to use any of the other functions (like threshold), just need to literally test the value something like this:

                if (pixelcolor == 0xFFFFFFF)
                { imagedata.setPixel(x,y,0X000000); }

                What do you think?

                Man this stuff is cool.

                Thanks a ton,
                DreamasterFlex
                • 5. having trouble using the loader to manipulate a gif
                  DreamasterFlex Level 1
                  Any ideas on this? My gut feelings says this might be a scope issue with addchild??? Or I found a bug in Flex? :)
                  I was able to code my program in C++ as a console program, and I found out the matrices simplify down to just a couple of
                  multiplications, so the math part of it is easy. But I really want to get this going with Flex.

                  Please just help me get that addchild(image) (gif coverted to a bitmap object) to the screen and I bet I can take off from there.


                  DreamasterFlex
                  • 7. Re: having trouble using the loader to manipulate a gif
                    peterent Level 2
                    Sorry for the delay.

                    But besides that, I guess the two other things I don't know how to do is have a "Choose image from hard drive" buttons, and the other part is, (more importantly because I can always use text boxes or hard code the image names for now) is in order to do the matrix multiplication I need to split the RGB values up into 3 seperate numbers instead of one UINT, and then eventually take the resulting RGB's back into a UINT format.

                    The Flash Player cannot read files from your hard-drive. That's a security violation and there is no way around it. You can select a file for uploading to a server, send it there, then load it from the server, but that's all you can do.

                    You can pick apart an RGB value using logial bitwise operators. Take color = 0xFFAABB.

                    To get RED: (color & 0xFF0000) >> 16;
                    To get GREEN: (color & 0x00FF00) >> 8;
                    To get BLUE: (color & 0x0000FF);

                    I would also extend Canvas and not UIComponent as it will be easier to work with. For example, adding a child will get Canvas to automatically size and measure things.
                    • 8. having trouble using the loader to manipulate a gif
                      DreamasterFlex Level 1
                      UPDATE: I think I figured out what was going on. You have to set a flag on the compiler to not use network
                      resources, that's why I was only getting one image when I compiled your BitmapExample.as script from the
                      loader/bitmap class documentation.

                      TO DO THAT: COMPILE LIKE THIS:
                      mxmlc BitmapExample.as -use-network=false

                      Peace,
                      DreamasterFlex