art, life and software development

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!

Swapping depths in Actionscript 2 style was easy, you simply typed

this.swapDepths(this._parent.getNextHighestDepth())

and you were up and running. Not so with AS3, the getNextHighestDepth() is gone. The alternative is the 'setChildIndex' which is applied to the container Sprite/MovieClip/UIContainer or whatever container you may be using. IN this case I had a UIComponent names 'thumbs'. It held a number of UIComponents named "thumbs" + x.
In order to swap depths I used this

var box:UIComponent = getChildByName('thumbs');
box['setChildIndex'] (box.getChildByName('thumbs0'), box['numChildren'] - 1);

It's getting a bit irritating to find that when a goodish bit of industry standard software is released, Linux builds always gets released last or not at all. As an Actionscript developer it was nice to know for a while that Adobe had my back and was actually putting some effort into the development of FlexBuilder for Linux. I've used the IDE for over a year and inspite of its obvious shortfalls compared to the Windows version its been great. Now that's coming to an end since it seems that Adobe feels its no longer worth the time and effort to continue that development program. So once again its time to jump into the wild and see what is out there re, Linux - Actionscript / Flex development.
I've been trialing quite a few and in all honesty none come close to FlexBuilder for Linux (of the ones I have tried). However there are a few promising options out there and my hope is that as more attention comes to bear on these tools theire development teams get all the support they need (financial and otherwise) to make these tools true contenders.
My recommendations for the moment are:

1. IntelliJIDEA: Of all the IDEs out there this seems to be the most complete and competitive. Actually it does seem to have quite a few features  that are an improvement on the FlexBuilder/Eclipse format. It has all the debugging features. It also provides and import from Eclipse feature - though I must comfess I was not very successfull using that feature and got a whole gang of errors - from a project that compiled prefectkly in Eclipse. Installiation is a bit ropey in Ubuntu - and I've found myself constantly having to reset the IDEA_JDK=$JDK_HOME in order to activate the IDE. On occasion I've also found the typing to be a tad slow. However when its settled its a very good IDE. I'm not sure if its because I'm not conversant with it but, its customisation features seem to be quite limited. I'm sure this will improve when the user base expands.

2. AXDT: This is a plug into Eclipse and I found it quite comfortable after installation. Installation though was an absolute pain in the neck. The documentaion is scant and if you try to install unto any version of Eclipse before 3.5 you will really find yourself up against it. I lost 2 Eclipse setups on account of my initial efforts. However on Eclipse Gallileo it installed like a breeze. It is worthwhile to read the installation instructions. Once installed its quite nice and can be somewhat FlexBuilderesque - no doubt because of my familiarity with the Eclipse interface. However it is obviously a work in progress and the first thing you will notice is the lack of a debug feature. In addition it seems impossible to get AXDT to allow you view the compile project in the external browser no matter how many times you set it to do so - though that may be my fault. There's stil a lot of work to be done here but when completed it will be a joy to work with. Its customisation features are none-existent and as I said before, there is virtually no documentation.

3: FDT: Probably better than AXDT - In fact I'm sure it is but its very expensive and so I did not try it

4: Spket: A work in progress no doubt but, may actually turn out to be the best of the lot. Its wierd my saying so because it does not compile Actionscript or MXML at the moment - which I guess should be the core functionality of any Flash building IDE. Its built on Eclipse os its interface is very familiar and it has a lovey drag and drop feature for moving compinents from the library unto the MXML editor - not visual - still it is very nice. However until it can actually run and debug Actionscript it remains just a nice concept

The Actionscript 3 DisplayObject behaves in such a manner that if it is in front of another object mouse enabled behaviours on the lower object will not me mouse accessible. This is quite useful and on occasion I have used a simple technique of creating a transparent Movieclip or Sprite and toggled the visible property or just removed it from the display stack.
I remember this because I had to dig deep to temember a time when the way to do this was to create a MovieClip and within it have an invisible button where you set the useHandCursor to false. The good ole days of Actionscript 2.0

I have blogged about this before but, the proof of the pudding is in the eating. This weekend I have been doing some processor hungry development on Windows - no choice in the matter really. I started first on a desktop which is an extremely fast machine with WIndows XP installed. It had more memory and resources allocated than my virtualised XP set up. To my irritation compiling got slower as I worked. The compiled swf started to flicker and  changes between Flash Develop and Flash CS3 got harder with each iteration. Every so often to get back to useful work rates I had to restart the machine.

After the first night of this i decided to migrate my work to my virtualized environment in Ubuntu. It has 1.5 G of ram allocated to XP there. To my amazement it seems this performs much better. No flickering images and a fast compile. Weird and definitely wonderful.

In order to get your html address variables into Flash these are the steps you need to take. This solution assumes that you are embeding your flash file with SWFObject 1.5. Please note this is for SWFObject 1.5. SWFObject 2.0 uses and entirely different set of methods to embed and pass variables to the swf.
Step 1:
Embed your swf in the HTML doc
< script type="text/javascript" src="swfobject/swfobject.js" ></ script >

< script type="text/javascript" >
// <![CDATA[
var so = new SWFObject('testload.swf', 's-moderate', '100%', '100%', '10', '#222222');
so.addVariable('shirt', getQueryParamValue("shirt"));
so.useExpressInstall('swfobject/expressinstall.swf');
so.addParam('menu', 'false');
so.write('content');
// ]]>
< /script >

Step 2
Inside your AS3 document retrieve your variables like so

var myshirt:String = this.loaderInfo.parameters.shirt

That's it

1
1,2
1,2,3
1,2,3,4
2
2,1
2,1,3
and so on...
It was one of those days when I truly wished I had stuck to my Maths. Anyroad it was back to the grindstone to find a solution for this little pickle. This is the general idea of the solution.
You begin by extraction the data from the XML and having it in an array. Next you nest 4 'for (var i:int = )' loops, for each subsequent loop the initial count parameter is set to a +1 increment of the previous loop initial count. In the first loop you add the first item in the array to the end of the array.

var c:int = 0
for (var i:int = c; i < _list.length-3; i++)
{
_displaylist.push( _list[i] )
var b:int = i +1;

The idea being that as you loop through you set up the array so that
each item in the array has a chance at being the first item in the
loop. Having set up the loop you set up a counter which increments every time the combination algorithm is run till you get to the end of the initial array. This counter sets up a recursion of the algorithm till the end of the intial list is reached. This counter sets the value for 'c'.

This is the conplete combination function:

public function combinate(c:int = 0):void
{


for (var i:int = c; i < _list.length-3; i++)
{
_displaylist.push( _list[i] )
var b:int = i +1;
for (var j:int = b; j < _list.length-2; j++)
{
_displaylist.push(_list[i] +' + '+_list[j] );
var c:int = j +1;
for (var k:int = c; k < _list.length-1; k++)
{
_displaylist.push(_list[i] +' + '+_list[j] +' + '+_list[k] );
var d:int = k +1;
for (var l:int = d; l < _list.length; l++)
{
//trace (_list[i],_list[j],_list[k],_list[l])
_displaylist.push(_list[i] +' + '+_list[j] +' + '+_list[k] +' + '+_list[l]);
}
}
}
}

if (_count < 16)
{
//trace ('count',_count, _list.length)
_list.push(_list[_count])
_count++
combinate(_count)
}else{
var m:int = Math.floor(_displaylist.length/1000);

var mlist:Array = []
for (var n:int = 0; n < m; n++)
{
mlist.push({label: (n * 1000) + ' - ' +( ((n +1)* 1000) -1), data: n * 1000});
}
_droplist = new ArrayCollection(mlist);
drop.dataProvider = _droplist;

//print()
}
}


The prototype of the application can be seen here. Ignore the 'Upload XML' that is for the final version. you will not be able to upload anything. I hope you find it useful.

Adobe has just released an update for the new FLVPlayback component. The component is a more stable offering providing support for Dynamic Streaming (multibitrate) and DVR. Adobe has also released the new DVRCast application that makes it easy to add DVR-enabled live streams to your website using Flash Media Server 3.5. Both tools can be downloaded from http://www.adobe.com/go/fms_tools/. I will be putting up my experiments with the new FLVPlayback soon.

Over the last few years I have been developing and streamlining an MVC scaffold for use in my projects for MagicLantern. One of the goals of this scaffold was to provide support in the Model so I could immediately use it for Flash Media Server development without going through all the set up motions. It also had to be flexible enough to allow for easy modification by sub-classes of the Model. Highest on the list of goals though was that it had to be accessible to any developer with an understanding of MVC - no trying to learn about plugin interfaces and facades, just setup and use. I think I have arrived there with MagicMVC. It is the scaffold on which this prototype of a multiuser video chat application in Papervision3D is built.

It works nicely so far, the Model can be extended by a subclass to facillitate developer specific classes, but all that is generally needed is for the Wrapper class to send the FMIS URI to the model / subclassed model when the model is instantiated and the rest is up to the developer to do as they please. This prototype is a bit buggy as it is still in development, but it works well. Please use headphones and a microphone and PLEASE make sure you have a camera.

As a Flash Media Server developer I come across the occasional file that refuses to stream or playback. This usually leads to guess work, a bit of trial and error and then the formulation of various hypothesis as to why the file failed. Sometimes that explanation is not enough for the client or video producer who will swear that their video production tool is top notch and that the developer is the clueless one.
Thanks to Adobe and a nifty little command line utility, that bridge has now been crossed. "The FLVCheck tool can be used to analyze FLV files before they are deployed on Flash Media Server. In addition, the tool can also add or update metadata to reflect file duration correctly. The tool verifies that metadata is readable, specifies an accurate duration, and checks that the FLV file is seekable by Flash Media Server. The tool supports unicode filenames".
(FMIS Admin Guide)

The use case I am describing here is for Linux specifically Ubuntu/Studio 9,04 Jaunty however I believe the same procedure applied to Windows.

• Download the tool from HERE

• Unpack it to a folder of your choice.

• Open Terminal (or command prompt), and change directory to the folder you unpacked the tool. On my computer that was the command:

cd '/media/disk/INTERACtIVE/UTILITIES/FLVChecklinux'

To do a basic check of the video, the following is the format. Please note the command may vary in Windows:

./flvcheck [-option] <file ...>

In my case it was:

./flvcheck -f '/media/disk/MEDIA/VIDEO/Adding_a_Launchpad_PPA_s_key_to_Ubuntu.flv''

This was my feedback:

09-05-20 14:29:25 /media/disk/MEDIA/VIDEO/Adding_a_Launchpad_PPA_s_key_to_Ubuntu.flv passed

Adobe provides a list of FLVCheck errors, please take a look at the documentation to identify your unique error

Adobe has decided that with the release of Gumbo (Flex 4) the Flex Builder IDE will bear the new name of Flash Builder. I personally think its a good idea - Its always been a but funny calling myself a Flash developer when I hardly ever open Flash nowadays. It will also clear up all the confusion on the Flex/Flash argument, God knows how tired I get trying to explain to people that Flash and FlexBuilder create the same thing, a SWF. Some folks seem to think that somehow or other a Flex SWF is somehow different or more grown up. Anyroad its a brilliant idea and long overdue.