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]

Identifying Multiple Screens with Adobe AIR

While working on a presentation about Native Windows & Adobe AIR I ran into the Screen class. The screen object provides information about the display screens available to an application allowing you to position applications/windows on different screens. I say screens and not monitors because of a little caveat that the livedocs have in them:

Note that there is not necessarily a one-to-one correspondance between screens and the physical monitors attached to a computer. For example, two monitors may display the same screen.

I thought I’d have a little fun to get my code fingers back after a week in Cabo San Lucas, and create a little AIR app that identifies each screen. The basics are:

  1. Identify the Screens – I knew I had 2 screens, so that was easy. The screens property is an array of Screen objects, so you can work with as many as the user has.
  2. Create something to identify the windows – I used transparent windows with a label to make things simple.
  3. Then position the new windows on the screens.

[as]

private var _screenOne:Screen;
private var _screenTwo:Screen;

private function _identScreens( p_event:MouseEvent ):void
{
// I know I have 2 screens so I’ll just grab those
_screenOne = Screen.screens[0];
_screenTwo = Screen.screens[1];

// Now lets identify the screens
var identOne:IdentWindow = new IdentWindow();
identOne.title = “Screen One”;
identOne.screenLabel = “1”;

// open the irst window and set its position on the first screen
identOne.open( true );
identOne.nativeWindow.x = ( _screenOne.bounds.width / 2 ) – ( identOne.width / 2 );
identOne.nativeWindow.y = ( _screenOne.bounds.height / 2 ) – ( identOne.height / 2 );

var identTwo:IdentWindow = new IdentWindow();
identTwo.title = “Screen Two”
identTwo.screenLabel = “2”;

// open the second window and set its position on the second screen
identTwo.open( true );
identTwo.nativeWindow.x = ( _screenTwo.bounds.right – ( _screenTwo.bounds.width / 2 ) ) – ( identTwo.width / 2 );
identTwo.nativeWindow.y = ( _screenTwo.bounds.bottom / 2 ) – ( identTwo.height / 2 );
}
[/as]

Very straight forward and simple, but a fun little exercise.

You can download and install the app (with source) using the badge below:

[airbadge] Identify Screen Sample, http://www.thekuroko.com/wp-content/plugins/downloads-manager/upload/IdentifyScreens.air, 1.0, badge image.jpg[/airbadge]

Or, download the zip’ed flex archive:
[dm]2[/dm]

Sending XML in Flash

So you want to send XML in flash? There are some things that you need to watch out for.

ONE: We’re working with the XML object.

[as]
var myXML:XML = new XML();
var theXML:String = “”;
myXML.parseXML(theXML);
[/as]

TWO: If you are are expecting a response, use the sendAndLoad() method. You will need to create an XML object to catch the response from your server. The sendAndLoad() method takes 3 parameters:

url – where to send the XML

target – The XML object that receives the downloaded data (this can also be a LoadVars object depending on the data that is returned from the service)

method – GET or POST HTTP protocol. This parameter is optional.

[as]
var responseXML:XML;
myXML.sendAndLoad(“http://www.realeyesmedia.com/”, responseXML, “POST”);
[/as]

Now what happens if you don’t expect a response from the server? Do you use send()? Not if you don’t want the page to redirect.

The send() method can GET or POST your XML data to a page, but your Flash piece page is expected to redirect. So, what do you do. Well, just use sendAndLoad() and create a dummy XML object for the 2nd parameter. You won’t receive a response, but the XML will be sent to the server just the same.

powered by performancing firefox

Mixing Series Types in Flex 2 Charts

Becareful when you mix series types in the Flex 2 (BETA 2) Charting Components. All of the documentation says that any chart that extends the CartesianChart can use other series types. This is true but you run into issues beacuse the chart tries to format the series data based on its chart type (makes sense, except we now what to combine series types).

For example if you had an <mx:ColumnChart> with a <mx:ColumnSeries> and <mx:LineSeries> , the chart would result in something like the following:
seriesTypes_column.jpg
Notice how the line doesn’t quite line up with the column chart.

If we change the <mx:ColumnChart> to an <mx:CartesianChart>, problem solved. The CartesianChart takes the data for what it is and doesn’t try to shoehorn the series in to a specific display. Now check out the ColumnChart, the line series lines up with the column chart.

seriesTypes_cartesian.jpg

Update: It should be becareful what type of chart you use. Basically if you are mixing series types, then use the CartesianChart and you won’t run into this problem. Basically what happened below is we tried to force data displayed as a line into a ColumnChart because we used the ColumnChart control. If you use the CartesianChart you won’t have this problem. Thank you Ely!

Flex Charting

I’ve been playing with the Flex 2 Charting components quite a bit latley.

The charting components include Bar, Column, Line, Area, Pie, Plot, HLOC (High/Low/Open/Close) & Candlesitck charts. That is quite a set of charts that allow you to visualize your data right out of the box.

Some of the cool features:

  • You can link up data to your charts and change the data at runtime based on user input, live data feeds etc.
  • Its pretty easty to create drag and drop charts with multiple data series for your chart.
  • Styling your chart is a no-braininer with CSS and inline in the MXML .
  • You can also extend the charts for your own custom charts.

Setting up the data is fairly straight forward using a HTTPService, RemoteObject or WebService tags with a Model tag.

I was working on a sample for label rotation and it turned out to be just a good general sample. So, I’ve posted it here.

FYI: In the current BETA release there is a little bug with label rotation. You have to embed a font to rotate the labels and when you do that, the ends of the label are cliped off. Adobe knows about the bug and hopefully it will be fixed.

This sample uses an to get an external XML file. Then I break the data into different models for the different charts. I’ve set up the bar chart to accept a click to update the selected ‘company’ and update the charts on the bottom (the ComboBox will do the same thing).

Check out the app here (you can right-click to view the source).
View the source here.

10 Minute RSSReader & Flex For Free

Macromedia announced the Flex Builder 2 Public BETA so I thought I’d play with it and see what I thought. I’m loving some of the new layout features they have added. It makes the initial layout so easy!Check out the list of features that have been added on the Adobe Labs site.
Free Flex SDK Announcement!

As I was playing, I put this blog reader together in about 10 minutes.


Very simple, but very cool. It will read in an RSS 2.0 feed URL and let you cycle through the articles. You can choose from 3 pre-defined feeds ro enter your own. Oh yeah, this appwill only work locally bacuse it is reading in images and the flash crossdomain policy will get in the way.

View the source here.

Download the source here.

Of course you’ll need the updated 8.5 player to view it.

The Flex Builder 2 Public BETA is available on the labs site: labs.macromedia.com