2 Replies Latest reply on Jan 7, 2010 10:18 PM by flx23

    Change background image of canvas

    flx23 Level 1

      hi Experts


      I have set a background image to a canvas:--


      now on change of hslider i am applying the color trandform to it.


      Please go through the code:-


                          var ct:ColorTransform = new  ColorTransform();
                          ct.redOffset = BrightnessSlider.value;
                          ct.blueOffset = BrightnessSlider.value;
                          ct.greenOffset = BrightnessSlider.value;
                          var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(AppCanvas);
                          var imageByteArray:ByteArray = imageSnap.data as ByteArray;
                          _image=new Image();


      After this i have image in the _image object


      Now i want to apply it to the background image of canvas




      another approach that came in mind was to create a test.png 0 bytes image in my app and then write the generated byte array to it.but was unsuccessful to do so..because my i am creating a web app.. and was unable to import:-


      import flash.filesystem.*;


      Please tell me how can achieve this..



        • 1. Re: Change background image of canvas
          Jason Szeto Level 3

          Okay, this is a bit hackier than I thought it would be, mainly because the backgroundImage of the canvas's skin isn't

          directly accessible.


          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
                      import mx.core.mx_internal;
                      import mx.events.SliderEvent;
                      use namespace mx_internal;
                      protected function hsRed_changeHandler(event:SliderEvent):void
                          var ct:ColorTransform = new ColorTransform();               
                          ct.redOffset = hsRed.value;
                          var bi:DisplayObject = main.rawChildren.getChildAt(main.rawChildren.getChildIndex(DisplayObject(main.border)) + 1);
                          if (bi)
                              bi.transform.colorTransform = ct;


              <mx:HSlider id="hsRed" value="0" minimum="0" maximum="255" snapInterval="10" change="hsRed_changeHandler(event)"/>
              <mx:VBox id="main" backgroundImage="@Embed('adobelogo.JPG')" backgroundSize="100%">
                  <mx:Button label="First Button"/>
                  <mx:Button label="Second Button"/>


          - Jason

          • 2. Re: Change background image of canvas
            flx23 Level 1

            Excellent jason


            Thanks  a lot..i was unable to find a way to achieve this ..


            What about mx_internal namespace what role did it played here..can u elaborate it a lil about it.


            Thanks Again