The Open Source Media Framework went live a few weeks ago with it’s first release 1.0, I already worked with various sprint versions of it, and lately created a final project using OSMF.
Something that I was missing was the capability of displaying a Sprite or Text Element inside a Serial- or Parallel-Element.
So I’ve wrote a simple class named “InteractiveDisplayObjectElementt” that will handle this need:
public class InteractiveDisplayElement extends MediaElement { private var displayObjectTrait:InteractiveDisplayObjectTrait; private var _sprite:Sprite; public function InteractiveDisplayElement( displayObject:Sprite=null) { super(); this.sprite = displayObject; } public function set sprite( value:Sprite ):void { _sprite = value; updateSprite(); } public function get sprite():Sprite { return _sprite; } private function updateSprite():void { var sprite:Sprite = new Sprite(); sprite.addChild( _sprite ); if ( displayObjectTrait == null ) { displayObjectTrait = new InteractiveDisplayObjectTrait( sprite ); addTrait( MediaTraitType.DISPLAY_OBJECT, displayObjectTrait ); } displayObjectTrait.setSize( sprite.width, sprite.height ); }
Extending the MediaElement class enables you to create a visible displayelement that can be attached to any kind of OSMF container including the serial & parallel elements, this is aswell the class being used for all kind of non-loadable elements.
So basically we are passing a Sprite to our new element to be placed in it, as soon as it’s set we call up the updateSprite() method that will add the passed sprite to the displaylist and assign it to the InteractiveDisplayObjectTrait (class following below)
The second class built was the InteractiveDisplayObjectTrait, this was only to keep the structure and logic of OSMF kind of in “place”, with it you can set the size of the element separately.
internal class InteractiveDisplayObjectTrait extends DisplayObjectTrait { public function InteractiveDisplayObjectTrait(displayObject:DisplayObject, mediaWidth:Number=0, mediaHeight:Number=0) { super(displayObject, mediaWidth, mediaHeight); } public function setSize(mediaWidth:Number, mediaHeight:Number):void { setMediaSize(mediaWidth, mediaHeight); } }
With it you are now able to use simple as well complex sprites in your Composition elements, below an example of how I tested the newly built class.
... var aniHolder:Sprite = new Sprite(); sp.addChild( aniHolder ); var ball:Sprite = new Sprite(); ball.graphics.beginFill(0xff0000,1 ); ball.graphics.drawCircle( 0, 0, 8 ); ball.graphics.endFill(); aniHolder.addChild( ball ); TweenMax.to( ball, 2, { x: 400, repeat:-1, yoyo:true, ease:com.greensock.easing.Bounce.easeInOut}); var _spriteElement2:InteractiveDisplayElement = new InteractiveDisplayElement( aniHolder ); layout = new LayoutMetadata(); layout.left = 400; _spriteElement2.addMetadata( LayoutMetadata.LAYOUT_NAMESPACE, layout ); _pararellElement.addChild( _spriteElement2 ); ...
What do you need to know about the code above? Well as you see I’m only creating a red circle that is being added to the aniHolder sprite, with the help of tweenmax I’m animating the circle to bounce left to right and viceversa, then I create a new InteractiveDisplayElement (the class we created before) assign a layout to it and add to the ParallelElement (this could also be a serialelement or a simple mediacontainerSprite).
The OSMF – SpriteElement by Tiago's Weblog, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 2.5 Switzerland License.
We know tons of work went into the framework. Time to celebrate and start creating some awesome media players!
But…
If I create a mx.controls.Label with a text and pass it to the InteractiveDisplayElement nothing is presented. It works with TextField but not with any Flex Component. Why?
Because the mx.controls.Label has a base class of UIComponent and not Sprite. Change the Class extension to it and it should work fine, let me know the result.