OSMF Custom Media Elements

OSMF Video Sample

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]

Adobe Marketplace and the GTrack OSMF Plugin

The Adobe Marketplace launched recently:

Adobe Marketplace is the ultimate destination for all things Adobe — If you’ve created a technology or service that enhances or integrates with Adobe AIR, Photoshop, or the Open Source Media Framework, we invite you to register with the largest community of AIR users, Photoshop enthusiasts and OSMF developers in the world.

We’ve added the GTrack plug-in (part of the REOPS project) as an offering in the OSMF marketplace. You can check out the Marketplace offering here.

New things have been added to the OSMF Marketplace on a daily basis, so keep your eye on it for great tools, times and downloads!

Mobile Development is Exploding – Hello PlayBook!

I didn’t go to Adobe Max this year (yes I’ve kicked myself) but I think some of the news and tools that were announced there have me extremely excited! One of the more exciting items was RIM’s announcement surrounding the Playbook and Adobe AIR. The coolest part of the announcement, the free PlayBook for any vendor with an approved app in the BlackBerry App World (details here). Go BlackBerry – sounds like a generous reward for getting some apps built!

Needless to say, I’ve started playing around with the PlayBook SDK and have compiled a list of resources that helped me to get going.

Getting things up and running on the Mac was pretty straight forward.

Win 7 64bit was  a different story. The installer says it doesn’t support 64bit. There is salvation though thanks to kurlu.com you can force the installer to use a 32-bit JDK.

BlackBerry PlayBook Dev Resources:

UPDATE (11/18/2010):

The PlayBook Simulator with a couple "out-of-the-box" apps playing nicley.

I got the PlayBook environment up and running and just for kicks tried to get a few of the apps that I’ve been working on.In the image above the selected app is a Flex 4.5 (Hero) based app. The app on the right is an ActionScript 3 based app. No code was changed to accommodate the PlayBook and 95% of everything in both apps  is working. The only thing that isn’t working off the bat was the video playback in the AS3 project – I did expect that though.

OSMF 1.5 is in the Wild!

Open Source Media Framework (OSMF) is an open software framework for building robust, feature rich video players and applications based on the Adobe® Flash® Platform.

OSMF has two key objectives:

  1. Enable content providers to focus on the user experience, rather than player plumbing
  2. Enable ecosystem partners to focus delivering best-in-class services, instead of player integration

OSMF 1.5 has been released! Grab it here.