4 Replies Latest reply on Apr 23, 2010 10:20 AM by bringrags

    Applying Pixel Bender Filters to MediaElements

    kkonrad Level 1

      Hi,

       

      I want to apply a Pixel Bender Filter to an ImageElement. In general I do this like:

       

      var shader:Shader = new Shader(new PBFilter() as ByteArray);
      
      var filter:ShaderFilter = new ShaderFilter(shader);
      
      var image:Image = imageElement as Image;
                      
      image.filters = [filter];

       

      Now ImageElement doesn't support the .filters parameter. Are there any plans for this function in a future release of OSMF? Or are there different ways to apply a Pixel Bender filter? Thanks

        • 1. Re: Applying Pixel Bender Filters to MediaElements
          bringrags Level 4

          If you're working with the MediaPlayer, then you can assign the filter to the MediaPlayer's displayObject property once the image is loaded:

           

          mediaPlayer.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, onStateChange);

          mediaPlayer.media = imageElement;


          function onStateChange(event:MediaPlayerStateChangeEvent):void

          {

             if (event.state == MediaPlayerState.READY)

             {

                mediaPlayer.displayObject.filters = [filter];

             }

          }

           

          If you're working with the ImageElement directly (and no MediaPlayer), then you would need to access the element's DisplayObjectTrait, which holds the DisplayObject.

          • 2. Re: Applying Pixel Bender Filters to MediaElements
            kkonrad Level 1

            Thanks again for your help Brian. This works great on Image and Video Objects now. But what should I do when I work with a SerialElement for example and I just want to apply an effect on the second image of three dynamically? I tried to access the the MediaElement through serialMedia.getChildAt(0) but what I get is a VideoElement/ImageElement Object. I need a pure Image/VideoObject (as DisplayObject) with the filters property.

            • 3. Re: Applying Pixel Bender Filters to MediaElements
              kkonrad Level 1

              I just reused the functionallity of the MedieElementEffect class from the Transition-Example I found in the Blog. In the source code I added a Filter and removed the Fade.

              • 4. Re: Applying Pixel Bender Filters to MediaElements
                bringrags Level 4

                The DisplayObject will be null until the MediaElement is actually loaded and ready to display (which, for children of a SerialElement, usually doesn't happen until just before they're played/displayed).  So you'd need to add a listener for the DisplayObjectTrait being added to the child element:

                 

                secondChildElement.addEventListener(MediaElementEvent.TRAIT_ADD, onTraitAdd);


                function onTraitAdd(event:MediaElementEvent):void

                {

                   if (event.traitType == MediaTraitType.DISPLAY_OBJECT)

                   {

                      var displayObjectTrait:DisplayObjectTrait = event.target.getTrait(MediaTraitType.DISPLAY_OBJECT);

                      trace(displayObjectTrait.displayObject);

                   }

                }

                1 person found this helpful