art, life and software development

A small primer of some of the metadata tags of AS3 and their uses

Customising your SWF - using the metatags in the following manner will allow you set various parameters for the compiled swf
[SWF(backgroundColor="#FFFFFF", frameRate="31", width="550", height="400")]

Embedding image assets
[Embed(source="assets/images/background.jpg")]
protected var Background:Class;

[Embed(source="assets/images/background1.jpg")]
public var Background:Class;

Embedding Events for the Flex Framework for MXML compatibility
[Event(name="introStateLoaded", type="net.designstreet.DesignStreetEvent")]

The one thing alternative Flex Builder Linux and other Flex IDE alternatives (AXDT, FDT...) have been missing is a design view for flex component layouts. Well it seems the problem has been solved with the AIR application DesignView. DesignView is a "GUI tool for Flex applications layout composition", providing the basic functionality of the Flex Builder Design View. This is the work of Max and Mike McMullin and I for one really commend them for their work. I must confess that there is some way to go to bring it up to the level of functionality of the Flex/FlashBuilder design view but, it does the job and is a perfect design view option for FlexBuilder Linux, AXDT and FDT. AXDT has integrated it into their Eclipse plugin. This addition really elevates the posibilities of AXDT as a serious swf building alternative IDE to FlexBuilder. Please note that you may need to set up the Adobe player security settings within the Eclipse AXDT plugin folder or you will be sandboxed. The location path will be something like this "/home/ayo/gallileo/plugins/org.axdt.mxml_0.0.7.0/designview.index.html". The designview project is hosted at sourceforge. You can do your MXML layout using the online version tool that will generate the code you need from your layout. The AIR option is preferable in my view because you can load your existing MXML files into it.

The Adobe Open Source Media Framework is a rich media scaffolding designed to create a unified platform for the deployment of rich media on the web. It is based on the Open Video Player codebase an earlier code-base developed and designed to extend the Adobe rich-media codebase and improve the tools available to the rich media developer. The OSFM brings a unique point of view to rich media development in that it encapsulates the media deployment elements (video, audio and images) into one interface that can be accessed and changed at runtime depending on the asset to be deployed. It is delightful to work with, however in its current iteration, version 0.4 there are lots of features lacking or not working properly. Developers are well adviced not to look to this release as a product development framework but, as a work in progress that will definitely change. Having said that, its unique development viewpoint makes it a future winner in the development of rich media players and such other rich media development vehicles.

Although technical and deployment information is sketchy at best there is a reasonable swathe of it online if you Google OSFM to give you some background of the framework. This blog- post will focus on explaining the technical virtues of the framework, showing the current pitfalls of the framwork (from the blog writers point of view) and looking at code to build a video player that utilises HTTP and RTMP as the deployment protocol.

The OSMF looks at 3 separate elements in order to compose the visual experience. These elements are namely the, Media elements, Media composition and the Media configuration.

• Media elements are the actual media types - videos(flv, f4v ...), audio (mp3, mp4 ...) and images(jpg, png)
• Media compositions are the media elements as in the video, audio and image deployment classes and their spacial and compositional relationships
• Media configurations consist of their spatial regions, their behaviours (called Traits), and how you configure and arrange them (overlays and such).

In order to pull off this saparation of responsibilities, the OSMF has 3 main classes, the MediaElement, the interface IMediaTrait and the CompositionElement

• The MediaElement is the rich media deployment vehicle. Thic class is based on the Open VideoPlayer codebase. In the OSFM classes its code can be found in the package com.adobe.strobe.players. The class is MediaPlayerWrapper.as. This is the Flex version (I have not tried the Flash CS4 version - though I'm sure its a facsimile of sorts). The MediaElement may be a simple video delpoyment or a collection of media experiences e.g pre-roll video, main video and post-roll video. The MediaElement has subclasses like the VideoElement and the AudioElement that allow you to programme to an interface rather than a concrete implementation.
• The IMediaTrait holds the various behaviours for the target media being deployed. Traits are of different types. The behaviours for the IViewable trait for instance are for media that is visual like video and images. For the IPlayable interface its for media that is playable like videos and audio files. In effect an audio element would have IPlayable, IAudible and ITemporal (time based) traits. In the case of non visible or audible traits there are the ILoadable traits - dealing with NetConnections and NetStreams and their accoutrement.
• The CompositeElement is the mixer allowing you to compose your media. Two main calsses that stand out here are the SerialElement and the ParallelElement that allow you to choreograph the deployment of your media.

This is a basic overview of the framework. Now lets look at a basic video player deployment. I have put in no controls playbutton and so on. This player will just auto play but it gives you the general jist of the matter. The application is coded in AXDT with the Gumbo SDK. The OS is Ubuntu 9.04 and the IDE is Eclipse Galileo.


Please Note: In order to stream from Flash Media Server, you need to put the Application.xml file inside the streaming application folder look for the < StreamManager > tag and add
<VirtualDirectory><Streams>/C:\lalalalala </Streams> </VirtualDirectory>. If you do not do this it will not stream. In the alternative stream from the VOD application
In addition the useInstance boolean for the FMSURL does not work so you cannot stream with the default instance based URI. Your URI must have the full path e.g application/streams/instancefolder/stream where application is the application folder in the FMS applications folder

ActionScript 3.0

/**
* @author ayo
* @description: Understanding the Adobe Open Source Media Framework
*
*/

package net.designstreet.media
{

import com.adobe.strobe.players.MediaPlayerWrapper;
import flash.events.Event;
import mx.containers.Canvas;
import mx.core.UIComponent;
import org.openvideoplayer.display.MediaPlayerSprite;
import org.openvideoplayer.display.ScaleMode;
import org.openvideoplayer.events.*;
import org.openvideoplayer.image.ImageElement;
import org.openvideoplayer.image.ImageLoader;
import org.openvideoplayer.media.MediaElement;
import org.openvideoplayer.media.MediaPlayer;
import org.openvideoplayer.media.MediaPlayerState;
import org.openvideoplayer.media.URLResource;
import org.openvideoplayer.net.NetLoader;
import org.openvideoplayer.traits.*;
import org.openvideoplayer.traits.ILoadable;
import org.openvideoplayer.traits.LoadState;
import org.openvideoplayer.traits.MediaTraitType;
import org.openvideoplayer.utils.FMSURL;
import org.openvideoplayer.utils.URL;
import org.openvideoplayer.version.Version;
import org.openvideoplayer.video.*;
import org.openvideoplayer.video.VideoElement;


public class DSt_OSMF_Player extends Canvas
{

//private static const REMOTE_IMAGE0:String = "http://www.adobe.com/ubi/globalnav/include/adobe-lq.png";
private static const REMOTE_STREAM:String = "rtmp://myserver/clearwater/darkwater/wolverine";
//private static const REMOTE_IMAGE1:String = "http://www.adobe.com/ubi/globalnav/include/adobe-lq.png";

private var _strobeplayer:MediaPlayerWrapper;

/**
*
*
*
*/
public function DSt_OSMF_Player()
{
assemble();
}


/**
* Play media
*/
public function playStrobe():void
{
var melement:MediaElement = null;
melement = new VideoElement(new NetLoader(), new URLResource(new FMSURL(REMOTE_STREAM, true)));
_strobeplayer.element = melement;
//
}

/*
* Assemble the player bits
*/
private function assemble():void
{
_strobeplayer = new MediaPlayerWrapper() ;
_strobeplayer.width = 640;
_strobeplayer.height = 360;
addChild(_strobeplayer);
_strobeplayer.scaleMode = ScaleMode.LETTERBOX;
_strobeplayer.autoPlay = true;
playStrobe()
}
}

}

MXML

< ?xml version="1.0" encoding="utf-8"? >
< mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:dst="net.designstreet.media.*"
layout="vertical"
>
<mx:Script>
<![CDATA[

]]>
</mx:Script>
<dst:DSt_OSMF__Player id="dstplayer"
top ="10"
left ="0"
bottom ="0"
right ="0" />


</mx:Application>

Main Application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:dst="net.designstreet.media.*"
layout="vertical"
>
<mx:Script>
<![CDATA[

]]>
</mx:Script>
<dst:DSt_OSMF__Player id="dstplayer"
top ="10"
left ="0"
bottom ="0"
right ="0" />


</mx:Application>

Thats it!