CompositionElement sizing issue needs to be addressed.

Question

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.

Answer 1

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>