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

    Change background image of canvas

    flx23

      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();
                          _image.load(imageByteArray);
                          _image.maintainAspectRatio=true;
                          _image.transform.colorTransform=ct;

       

      After this i have image in the _image object

       

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

       

      AppCanvas.setStyle("backgroundImage",?);

       

      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..

       

      Thanks

        • 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">
              <mx:Script>
                  <![CDATA[
                      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:Script>
             
              <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"/>
                  <mx:TextInput/>       
              </mx:VBox>
             
          </mx:Application>

           

          - 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