OSMF Custom Media Elements

A good argument for using a framework is the ability to extend the built in capabilities of the framework. For example, there was a comment on the ‘Getting Sstarted with OSMF Plugins‘ post that asked about using embedded images in theWatermarkPlugin sample.

Here are the steps that I took to get an embedded asset (instead of a ‘loadable’ asset) to show as a watermark:

1. Create a new class that extends MediaElement (this is a simple element, but you could extend any existing element depending on your needs). I named mine StaticImageElement.

package com.realeyes.osmf.plugin.element
{
  public class StaticImageElement extends MediaElement
  {
    ...
  }
}

2. Add a private Bitmap property with a getter and setter to the class – I named mine _bitmap.

private var _bitmap:Bitmap;

...

public function get bitmap():Bitmap
{
  return _bitmap;
}

public function set bitmap( value:Bitmap ):void
{
  if( value != _bitmap )
  {
    bitmap = value;
  }
}

3. In the setter for the bitmap property add the DisplayObjectTrait to the StaticImageElement

addTrait( MediaTraitType.DISPLAY_OBJECT, new DisplayObjectTrait( _bitmap as DisplayObject, bitmap.width, bitmap.height ) );

4. The completed class is pretty simple because we get to use everything already created for OSMF.

package com.realeyes.osmf.plugin.element
{
  import flash.display.Bitmap;
  import flash.display.BitmapData;
  import flash.display.DisplayObject;

  import org.osmf.media.MediaElement;
  import org.osmf.traits.DisplayObjectTrait;
  import org.osmf.traits.MediaTraitType;

  public class StaticImageElement extends MediaElement
  {
    private var _bitmap:Bitmap;

    public function StaticImageElement()
    {
      super();
    }

    public function get bitmap():Bitmap
    {
      return _bitmap;
    }

    public function set bitmap( value:Bitmap ):void
    {
      if( value != _bitmap )
      {
        _bitmap = value;

        addTrait( MediaTraitType.DISPLAY_OBJECT, new DisplayObjectTrait( _bitmap as DisplayObject, bitmap.width, bitmap.height ) );
      }
    }
  }
}

5. Create the embedded asset in the WatermarkPluginElement class

[Embed( "/assets/osmf_logo.png" )]
protected static const OSMF_LOGO:Class;

6. Now all we need to do in the WatermarkProxyElement set the bitmap property on a new instance of the StaticImageElement instead of creating an ImageElement with the watermark URL and ImageLoader.
Before:

var watermark:ImageElement = new ImageElement( new URLResource( watermarkURL ), new ImageLoader() );

After:

var watermark:StaticImageElement = new StaticImageElement();
watermark.bitmap = new OSMF_LOGO();

Bonus points for developing with a framework – more specifically OSMF! The embedded watermark shows up.

Download the original sample code:

download: OSMF Plugin Samples (722.43KB) added: 25/08/2010 clicks: 1051 description: Samples from the RMAUG presentation on OSMF plugins.

UPDATE: I’ve created an additional custom MediaElement called InteractiveImageElement.as. Thanks for the idea @cucu_adrian! The new element handles rollover and rollout by adjusting the image’s alpha property and setting the cursor to a button cursor. It also navigates to a url specified in the class – this would be any easy thing to make configurable though.

download: InteractiveImageElement.zip (774B) added: 24/11/2010 clicks: 463 description: Custom OSMF MediaElement that adjusts the cursor & alpha on rollover and goes to a URL when clicked. See the following articles for details and usage: http://www.thekuroko.com/2010/08/articles/presentations/getting-started-osmf-plugins/ http://www.thekuroko.com/2010/11/articles/code/osmf-custom-media-elements/