Notice: register_sidebar was called incorrectly. No id was set in the arguments array for the "Sidebar" sidebar. Defaulting to "sidebar-1". Manually set the id to "sidebar-1" to silence this notice and keep existing sidebar content. Please see Debugging in WordPress for more information. (This message was added in version 4.2.0.) in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 4147

Notice: The called constructor method for WP_Widget in mts_Widget_Tabs is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3902

Notice: The called constructor method for WP_Widget in mts_ad_widget is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3902

Notice: The called constructor method for WP_Widget in mts_ad_300_widget is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3902

Notice: The called constructor method for WP_Widget in swt_tweet_widget is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3902

Notice: The called constructor method for WP_Widget in Facebook_Like_Widget is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3902
OSMF Custom Media Elements

OSMF Custom Media Elements


Notice: Undefined index: mts_posttop_adcode in /home1/jccrosby/public_html/admin.crsby.com/wp-content/themes/playbook/single.php on line 19

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]


Notice: Undefined variable: defaults in /home1/jccrosby/public_html/admin.crsby.com/wp-content/themes/playbook/functions.php on line 340

Notice: Undefined index: mts_postend_adcode in /home1/jccrosby/public_html/admin.crsby.com/wp-content/themes/playbook/single.php on line 28

Notice: WP_Query was called with an argument that is deprecated since version 3.1.0! caller_get_posts is deprecated. Use ignore_sticky_posts instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 4031
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 *