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.

[actionscript3]
package com.realeyes.osmf.plugin.element
{
public class StaticImageElement extends MediaElement
{

}
}
[/actionscript3]

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

[actionscript3]
private var _bitmap:Bitmap;

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

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

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

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

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

[actionscript3]
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 ) );
}
}
}
}
[/actionscript3]

5. Create the embedded asset in the WatermarkPluginElement class
[actionscript3]
[Embed( "/assets/osmf_logo.png" )]
protected static const OSMF_LOGO:Class;
[/actionscript3]

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:

[actionscript3]
var watermark:ImageElement = new ImageElement( new URLResource( watermarkURL ), new ImageLoader() );
[/actionscript3]

After:

[actionscript3]
var watermark:StaticImageElement = new StaticImageElement();
watermark.bitmap = new OSMF_LOGO();
[/actionscript3]

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

Download the original sample code:
[dm]10[/dm]

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.
[dm]11[/dm]

Comments
  1. @cucu_adrian
  2. jccrosby
  3. Vladi
  4. Carl Leiner
    • jccrosby

Leave a Reply

Your email address will not be published. Required fields are marked *