2 Replies Latest reply on Apr 28, 2010 9:15 AM by lucasishuman-svaaj3

    Understanding OSMF layouts?




      im a seasoned actionscript developer but just starting out with osmf. i am having trouble understanding how layouts and layout rendering works.


      i have a control bar with all of my ui controls. i also have a 'share' button/panel that i want to live over the video (in depth). i have been making these items custom classes that extend LayoutTargetSprite. then i have create a separate layout renderer for each and layout container to add each to stage. is this the right approach?


      there also seems to be a problem with the inital positioning of my items. i setting the alignment properties for the layout target metadata, but everything is appearing top-aligned (i want bottom). i feel like i need to override the 'measure' or 'measuredWidth'/'measuredHeight' methods in my ui classes to return the size i want the targets to be so they are positioned properly, maybe?


      this resource has been helpful, but seem a little out of date...?



      i also want to update the control bar size on stage resize, so i should use the LayoutTarget 'layout' method to update the dimensions of the control bar to fit the new width? or should i update the 'width' property of my control bay layout metadata? or something else?


      thanks for any tips or resources that might be helpful,


        • 1. Re: Understanding OSMF layouts?
          RyanOConnell Level 2

          Hi Lucas, 


          We don't recommend making layout renderers for each item that needs to be laid out.  In fact you shouldn't be creating layout renderers at all (they are created automatically by the MediaContainer).  The best way to layout Media is to add LayoutMetadata to the MediaElements.  If you want to integrate layout into your controls, which aren't MediaElements, I wouldn't suggest you place them manually on the stage, and do you yourself.  If you absolutely need to use the OSMF layout system, I would recommend creating a MediaElement to wrap your controls, and then give the wrapper the layout metadata you need.   The easiest approach though, is to look at the OSMFPlayer example, which has a skinnable player.  You can specify image for every button in the player, as well as background color, etc....


          We will be releasing a white paper on the subject of layout in the coming weeks.   I'll be sure to include a section on laying out your player controls.


          Ryan O'Connell

          OSMF Engineering

          • 2. Re: Understanding OSMF layouts?
            lucasishuman-svaaj3 Level 1

            thanks a lot for the info, that helps a lot. cheers, lucas