7 Replies Latest reply on Sep 30, 2010 5:02 PM by mdmave

    CrossFading SerialElement?

    mdmave Level 1

      Hi, I am somewhat new to OSMF, so forgive me if this has been answered already.


      I am trying to crossfade some images with the latest sprint of OSMF.


      I am using the SerialElement's CURRENT_CHILD_CHANGE event, but running into some issues.


      In the event handler I would like to fade between the previously showing element and the new element. These eventually may be videos but for now I am only using Images. I am creating DurationElement instances from the ImageElements and adding them to the SerialElement before setting the mediaPlayer instance's media property.


      Here is the code so far: http://pastie.org/1192248


      The commented out code:

      // xFade.bitmapFrom = ImageSnapshot.captureBitmapData(_mediaPlayer.displayObject);

      // xFade.bitmapTo = ImageSnapshot.captureBitmapData(DisplayObjectTrait(event.currentChild.getTrait(MediaTrait Type.DISPLAY_OBJECT)).displayObject);

      // xFade.play([_mediaPlayer.displayObject]);


      is what I wanted to do for the transition. What I am seeing though is just popping from one element to the other. I think the _mediaPlayer.displayObject is not what I think it is. Please help!

        • 1. Re: CrossFading SerialElement?
          bringrags Level 4

          MediaPlayer.displayObject maps to the DisplayObject of the MediaElement that's assigned to the MediaPlayer, which in this case is the SerialElement.  A SerialElement's DisplayObject is not the DisplayObject of the current child.  Rather, it's a container class which the current child's DisplayObject is placed within (this allows us to apply layout metadata consistently within a SerialElement, by assigning it to the container rather than to the child, which often changes).  You're probably better off targeting the DisplayObject of each child MediaElement, e.g.:


          var displayObjectTrait:DisplayObjectTrait = imageElement.getTrait(MediaTraitType.DISPLAY_OBJECT) as DisplayObjectTrait;

          var displayObject:DisplayObject = displayObjectTrait.displayObject;


          Note that the trait will be null until the image has been loaded and added to the stage, so you may need to listen for the corresponding event.  The easiest way to do this is to use TraitEventDispatcher:


          var dispatcher:TraitEventDispatcher = new TraitEventDispatcher();

          dispatcher.media = imageElement;

          dispatcher.addEventListener(DisplayObjectEvent.DISPLAY_OBJECT_CHANGE, onDisplayObjectChange);

          function onDisplayObjectChange(event:DisplayObjectEvent):void


              // Now access DisplayObjectTrait.displayObject...


          • 2. Re: CrossFading SerialElement?
            mdmave Level 1

            Thanks Brian. I tried using the DISPLAY_OBJECT_CHANGE event along with a TraitEventDispatcher. Im not sure if its an OOO issue but I am never seeing the onDisplayObjectChange handler being run.


            I put the creation of the dispatcher inside the for loop that was creating imageElements. I also tried to create it outside the loop, but neither case caused the dispatcher to dispatch. I saw some potentially handy properties in the DisplayObjectEvent, namely oldDisplayObject and newDisplayObject. Ideally these would both be imageElements, but maybe I am jumping ahead. Do I need to add the dispatcher when the currentChild property changes on the durationElement or is it ok to add the imageElement directly to the media property of the TED?





            • 3. Re: CrossFading SerialElement?
              bringrags Level 4

              A dispatcher only works with one MediaElement -- in your current code sample, it will listen for changes to the last ImageElement in the loop.  You would

              probably need to create multiple dispatchers (one per ImageElement).

              • 4. Re: CrossFading SerialElement?
                mdmave Level 1

                I did move the dispatcher creation to inside the loop. However I am never seeing the handler get called.

                • 5. Re: CrossFading SerialElement?
                  mdmave Level 1

                  Another thing I noticed is that MediaPlayer extends TraitEventDispatcher. Not sure if that factors into this use case or not.

                  • 6. Re: CrossFading SerialElement?
                    bringrags Level 4

                    Hmm, I'm not sure why you wouldn't get the event from the dispatcher.  I'd probably need to look a bit closer into it to see what's going on.  In the meantime, you could use the less concise approach of listening at the trait level.  Your loop function would add the following listener:


                        for (var i:uint = 0; i < photos.length; i++) {
                              var imageElement:ImageElement = new ImageElement(new URLResource(photos[i]));
                              imageElement.addEventListener(MediaElementEvent.TRAIT_ADD, onTraitAdd);




                    And the listener would look something like this:

                                private function onTraitAdd(event:MediaElementEvent):void
                                    if (event.traitType == MediaTraitType.DISPLAY_OBJECT)
                                        var displayObjectTrait:DisplayObjectTrait = MediaElement(event.target).getTrait(MediaTraitType.DISPLAY_OBJECT) as DisplayObjectTrait;
                                        if (displayObjectTrait.displayObject == null)
                                            displayObjectTrait.addEventListener(DisplayObjectEvent.DISPLAY_OBJECT_CHANGE, onDisplayObjectChange);
                                private function onDisplayObjectChange(event:DisplayObjectEvent):void
                                private function handleDisplayObject(displayObject:DisplayObject):void


                    Obviously, this is a bit more code than the other example, so it might be best to isolate it in a subclass of ImageElement (CrossFadingImageElement?).

                    • 7. Re: CrossFading SerialElement?
                      mdmave Level 1

                      Thanks Brian! I will check this out. One thing I notice thats different is that you are listening for the DISPLAY_OBJECT_CHANGE event on the imageElement's DisplayObjectTrait.displayObject. I don't think I ever tried getting that.


                      If you want here is the project in fxp form: