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.
I have the same problem: my Sprite object is displayed, but it’s positioning is very strange.
If I use UIComponent it is not displayed at all.
Tiago, describe please why it’s so strange and how to lay Sprite or UIComponent over MediaElement with a DisplayObjectTrait.
In addition. I’m using almost identical approach as your’s. Just without InteractiveDisplayObjectTrait but with original DisplayObjectTrait.
In InteractiveDisplayElement’s constructor I call
super();
addTrait( MediaTraitType.DISPLAY_OBJECT, new DisplayObjectTrait(sp, mediaWidth, mediaHeight) );
Why do you need an addition Sprite object in InteractiveDisplayElement.updateSprite? This function works correct only at first call. At second it only changes size.
@Denis: I think the reply to your comments is either simple or very complicated, I assume heavily that if you don’t use my InteractiveDisplayObjectTrait, the element will be positioned with it’s default settings, when calling it’s setSize function the element will be replaced based on the final completed layout, basically a refresh of the controllers and layout.
updateSprite only needs to be set once, and the element is either being called once and if there is a need to change the element you simply destroy it and set it up again.
Does it make sense?
Thanks for reply Tiago.
Unfortunatly no.
My main question is: why UIComponent is not displayed when it is wrapped with InteractiveDisplayElement while Sprite is displayed.
Does UIComponent too complicated?
Also I have a very strange problem with positioning of InteractiveDisplayElement:
If I use ImageElement to test, everything is OK. But replacing ImageElement with InteractiveDisplayElement(Sprite) causes changing of Sprite’s size and position.
I definetly stuck.
mail me your file / project to tiago.dias[at]six4rty.ch
Sorry for late reply.
I have solved the problem. But I want to add to your post some points.
You can use InteractiveDisplayElement or OSMF class LayoutTargetSprite.
container.addMediaElement(InteractiveDisplayElement)
or
container.layoutRenderer.addTarget(LayoutTargetSprite)
To snap to DisplayObject of DisplayObjectTrait of MediaElement you should use InteractiveDisplayElement and change it’s size in accordance with DisplayObject (DisplayObjectTrait dispatches DisplayObjectEvent.MEDIA_SIZE_CHANGE).
To lay your InteractiveDisplayElement over other MediaElement use property index of LayoutMetadata (MediaElement’s LayoutMetadata.index = 0 and InteractiveDisplayElement’s LayoutMetadata.index = 1).
Hope this will help someone.