9 Replies Latest reply on Apr 17, 2010 2:44 AM by David_F57

    Applying filter to s:bitmapImage makes images disappear!?

    MarkTaylor46

      I wonder if anyone can help... I am attempting to apply a filter to s:bitmapImage but no matter if I do this in as3 or mxml as soon as i apply the filter the whole image disappears! I have tried this with different sorts of filter (dropshadow, glow) etc. but all do the same thing? Without any filter the image is show perfectly fine!

       

      The source of my s:bitmapImage is generated programmatically at runtime and is linked via a binding...

       

      Can anyone tell me what I am doing wrong?

       

       

      Thanks,

       

      Mark.

        • 1. Re: Applying filter to s:bitmapImage makes images disappear!?
          MarkTaylor46 Level 2

          Thought i'd fixed but no -it's still not working...

          • 2. Re: Applying filter to s:bitmapImage makes images disappear!?
            David_F57 Level 5

            hi,

             

            I think it has something to do with how the spark bitmapimage is generated, it primarily functions with embedding, there is no dynamic magic happening when it instantiates, to change it at runtime involves forcing the replacement of its content, I suspect that the filtering is effected by this 'fudge' over the more dynamic abilities of mx image.

             

            David.

            • 3. Re: Applying filter to s:bitmapImage makes images disappear!?
              David_F57 Level 5

              Hi,

               

              just one more thing, it may be worth while seeing if you could apply the filter to the content before adding it to the bitmapimage, if I have time over the weekend it would be an interesting experiment.

               

              David.

              • 4. Re: Applying filter to s:bitmapImage makes images disappear!?
                MarkTaylor46 Level 2

                Thanks for the suggestion - i switched from s:bitmapImage to mx:Image and everything is now working fine....

                 

                Just goes to show that the latest is not necessarily the best!!

                 

                 

                Thank you for your help....

                 

                 

                Regards,

                 

                Mark.

                • 5. Re: Applying filter to s:bitmapImage makes images disappear!?
                  CoreyRLucier Adobe Employee

                  Did you file a bug with an example?

                   

                  -C

                  • 6. Re: Applying filter to s:bitmapImage makes images disappear!?
                    David_F57 Level 5

                    Hi Corey,

                     

                    I will have a look over the weekend on the interaction with bitmapimage to see what happens to a) embedded with filters, b)embedded class with filters and finally c) updating content with filters. Then its a matter of whether its a bug or an enhancement request

                     

                    David.

                     

                    [edit] just looked at the clock its already the weekend, i'll have a look now..

                    • 7. Re: Applying filter to s:bitmapImage makes images disappear!?
                      David_F57 Level 5

                      hi,

                       

                      The following code uses a spark bitmapimage that has a blur filter and the filter seems to work with out issue.

                       

                      <?xml version="1.0" encoding="utf-8"?>

                      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"

                         xmlns:net="flash.net.*" creationComplete="application1_creationCompleteHandler(event)">

                       

                      <fx:Script>

                      <![CDATA[

                      import mx.controls.Alert;

                      import mx.events.FlexEvent;

                      import mx.utils.ObjectUtil;

                       

                      import spark.filters.BlurFilter;

                       

                      private var ldr:Loader = new Loader();

                       

                      private  function btn_click(evt:MouseEvent):void  {

                      var arr:Array = [];

                      arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));

                      fileReference.browse(arr);

                      }

                       

                      private  function fileReference_select(evt:Event):void  {

                      fileReference.load();

                      }

                       

                      private  function fileReference_complete(evt:Event):void {

                      ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);

                      ldr.loadBytes(fileReference.data);

                      //Alert.show(ObjectUtil.toString(fileReference));

                      }

                       

                      private function onComplete(event:Event):void

                      {

                      ldr.contentLoaderInfo.removeEventListener( Event.COMPLETE, onComplete );

                      img.source = ldr.content;

                      }

                       

                       

                      protected function application1_creationCompleteHandler(event:FlexEvent):void

                      {

                      img.filters = [blur];

                      }

                       

                      ]]>

                      </fx:Script>

                       

                      <fx:Declarations>

                      <net:FileReference id="fileReference"

                         select="fileReference_select(event);"

                         complete="fileReference_complete(event);" />

                       

                      <s:BlurFilter id="blur" blurX="8" blurY="8"/>

                      </fx:Declarations>

                      <s:BitmapImage id="img" left="0" right="0" top="0" bottom="0" source ="@Embed('test.jpg')" fillMode="repeat"/>

                       

                      <s:HGroup>

                      <s:Button id="btn"

                         label="Browse"

                         click="btn_click(event);" />

                      <s:Button id="btn2"

                         label="Add Filter"

                         x="50"

                         click="img.filters=[blur]" />

                      <s:Button id="btn3"

                         label="RemoveFilter"

                         click="img.filters=[]" />

                      </s:HGroup>

                      </s:Application>

                      • 8. Re: Applying filter to s:bitmapImage makes images disappear!?
                        MarkTaylor46 Level 2

                        David, thanks for looking at this for me. I tried to simplify my code to give you an example, along the way I found it may/may not be to do with the filter. Try the following code containing an mx:image tag - work fine right.... now change the tag from mx:Image to S:BitmapImage and the image disappears!!!!

                         

                        This is wierd eh?

                         

                        <code>

                        <?xml version="1.0" encoding="utf-8"?>
                        <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                               xmlns:s="library://ns.adobe.com/flex/spark"
                                               xmlns:mx="library://ns.adobe.com/flex/mx"
                                               creationComplete="init();">
                            <fx:Declarations>
                                <!-- Place non-visual elements (e.g., services, value objects) here -->
                                <s:GlowFilter id="myGlow" color="0xff0000" blurX="4" blurY="4" strength="4" alpha="1"/>
                            </fx:Declarations>
                           
                            <fx:Script>
                                <![CDATA[
                                    [Bindable]
                                    private var theBMP:Bitmap;
                                    private var theText:TextField;
                                    private var theTF:TextFormat;
                                   
                                    private function init():void {
                                        theBMP = new Bitmap();
                                       
                                        theText = new TextField();
                                        theTF = new TextFormat();
                                        theTF.color = 0xff0000;
                                        theText.defaultTextFormat = theTF;
                                        theText.text = "hello" ;
                                       
                                        theBMP.bitmapData = new BitmapData(300,216,false,0x515151);
                                        theBMP.bitmapData.draw(theText);
                                       
                                    }
                                   
                                ]]>
                            </fx:Script>
                            <mx:Image id="myBI" source="{theBMP}" width="100%" height="100%"/>
                        </s:WindowedApplication>

                        </code>

                         

                         

                         

                        Thanks again for your help,

                         

                        Mark.

                        • 9. Re: Applying filter to s:bitmapImage makes images disappear!?
                          David_F57 Level 5

                          Hi,

                           

                          I thought the binding may be an issue, how Adobe percieve this would be interesting as I don't believe that the bitmapimage should be bindable as its not really the role of bitmapimage(more about being a static holder for embedded graphics).

                           

                          Anyway some minor changes and all seems to work

                           

                          <?xml version="1.0" encoding="utf-8"?>

                          <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

                             xmlns:s="library://ns.adobe.com/flex/spark"

                             xmlns:mx="library://ns.adobe.com/flex/mx"

                             creationComplete="init();">

                          <fx:Declarations>

                          <!-- Place non-visual elements (e.g., services, value objects) here -->

                          <s:GlowFilter id="myGlow" color="0xff0000" blurX="4" blurY="4" strength="4" alpha="1"/>

                          </fx:Declarations>

                           

                          <fx:Script>

                          <![CDATA[

                          private var theBMP:Bitmap;

                          private var theText:TextField;

                          private var theTF:TextFormat;

                           

                          private function init():void {

                          theBMP = new Bitmap();

                          myBI.filters = [myGlow];

                          theText = new TextField();

                          theTF = new TextFormat();

                          theTF.color = 0xff0000;

                          theText.defaultTextFormat = theTF;

                          theText.text = "hello" ;

                           

                          theBMP.bitmapData = new BitmapData(300,216,false,0x515151);

                          theBMP.bitmapData.draw(theText);

                          myBI.source=theBMP;

                           

                          }

                           

                          ]]>

                          </fx:Script>

                          <s:BitmapImage id="myBI" width="100%" height="100%"/>

                          </s:WindowedApplication>