1 Reply Latest reply on Dec 10, 2009 1:37 PM by RyanOConnell

    CompositionElement sizing issue needs to be addressed.

    tyjohnston

      Ok, so it's not just the PosterFrame and VideoElement inside a SerialElement that's sizing wrong.  It's anything inside a Parallel or Serial Element that includes an element with a temporal trait, and a static element such as RTMPPosterFrameElement, PosterFrameElement, or ImageElement.

       

      I just tried to use ScaleMode.LETTERBOX with a ParallelElement that included a progressive AudioElement, and ImageElement.  The ImageElement does not size properly, and can be replicated in your ExamplePlayer flex project.

       

      Just add the MediaPlayerWrapper to a container with a smaller fixed size (like a canvas container at 320x240 ).  You will notice that no Serial or Parallel Element with a static element will scale properly.

       

      This needs to be addressed.  The direction for this functionality is great!  Having a Posterframe for Audio and Video is a must ... but it currently does not size properly.  The only acceptable ScaleMode is NONE.

        • 1. Re: CompositionElement sizing issue needs to be addressed.
          RyanOConnell Level 2

          The Layout system was created after our UI components, and a separate UIComponent was created to work with the Layout system.  We have a backlog item to fix this in the current sprint, starting today.  I have a work around below which demonstrates how to use this little know component call a RegionGateway.   Cheers!

           

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

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

          layout="absolute"

          creationComplete="init()"

          xmlns:players="com.adobe.strobe.players.*">

          <mx:Script>

          <![CDATA[

          import org.osmf.media.MediaPlayer;

          import org.osmf.metadata.Metadata;

          import org.osmf.gateways.RegionGateway;

          import org.osmf.layout.RegistrationPoint;

          import org.osmf.display.ScaleMode;

          import org.osmf.layout.LayoutUtils;

          import org.osmf.proxies.TemporalProxyElement;

          import org.osmf.utils.URL;

          import org.osmf.media.URLResource;

          import org.osmf.image.ImageLoader;

          import org.osmf.image.ImageElement;

          import org.osmf.composition.SerialElement;

           

          private static const REMOTE_IMAGE:String = "http://mediapm.edgesuite.net/osmf/image/adobe-lq.png";

          private static const REMOTE_IMAGE2:String = "http://mediapm.edgesuite.net/strobe/content/test/train.jpg";

          private var region:RegionGateway;

          private var serial:SerialElement;

           

          private function init():void

          {

          serial = new SerialElement();

          serial.addChild(new TemporalProxyElement(5, new ImageElement(new ImageLoader(), new URLResource(new URL(REMOTE_IMAGE)))));

          serial.addChild(new TemporalProxyElement(5, new ImageElement(new ImageLoader(), new URLResource(new URL(REMOTE_IMAGE2)))));

          serial.addChild(new TemporalProxyElement(5, new ImageElement(new ImageLoader(), new URLResource(new URL(REMOTE_IMAGE)))));

          serial.addChild(new TemporalProxyElement(5, new ImageElement(new ImageLoader(), new URLResource(new URL(REMOTE_IMAGE2)))));

           

          for( var itr:Number = 0; itr < serial.numChildren; ++itr)

          {

          LayoutUtils.setLayoutAttributes(serial.getChildAt(itr).metadata, ScaleMode.LETTERBOX, RegistrationPoint.CENTER);

          LayoutUtils.setRelativeLayout(serial.getChildAt(itr).metadata, 100, 100, 0, 0);

          }

           

          region = new RegionGateway(serial.metadata);

          wrapper.addChild(region);

          serial.gateway = region;

           

          var mediaPlayer:MediaPlayer = new MediaPlayer(serial);

          invalidateDisplayList();

          }

           

          protected override function updateDisplayList(w:Number, h:Number):void

          {

          super.updateDisplayList(w,h);

          if (region)

          {

          LayoutUtils.setAbsoluteLayout(region.metadata, stage.stageWidth, stage.stageHeight);

          }

          }

           

           

          ]]>

          </mx:Script>

          <mx:UIComponent

          id="wrapper"

          width="100%"

          height="100%"

          />

           

          </mx:Application>