art, life and software development

Setting up FDT4 for developing an AIR application should be easy. However there is a paucity of information on how to do this on the web in a simple and concise way. A lot of the information for the set up in Linux is out dated and tends to lean towards a time when the AIR sdk support for Linux was fragile at best and thus you needed to fiddle and twiddle with the AIR SDK in order to gain any success. After googling, yahooing and binging for information as well as ploughing through Adobe and other sources of information I found that its actually quite easy to develop an AIR application in Linux. This method has been tested in FDT4 and FB4Linux - the unofficial port of the Adobe FlashBuilder4. The operating system is Ubuntu Maverick 10.10 64bit.
You need to have the following:

• FB4Linux or FDT4 or both (I have both).
• The very latest AIR SDK
• The different Flex SDK's for Flex/Actionscript developement - try Adobe Hero the latest Flex SDK

The procedure is as follows using Adobe Hero:-
Setting up the IDE for AIR development:

1. Download the latest SDK for the AIR
2. Download the Adobe Hero Flex SDK
3. Unzip the Adobe Hero SDK into your Flex SDK folder. This is the folder that FB4Linux and FDT4 reference the target SDK for compilation reside.
4. Open FB4Linux and/or FDT (dependent on your choice of IDE). Using your IDE, assign the target SDK to the IDE.
5. Unzip the latest AIR SDK and copy the contents over the target Flex SDK. In my case I unzipped the contents of the AIR SDK over the Flex Hero SDK.

N.B In previous set-up you had to go into theSDK, change the adt and adl in the bin folder to adt_lin and adl_lin. Please do no do this. I found that when I did this FB4Linux could not find the adl to launch the debug  version that you need to see in development. This procedure is no longer needed.

Developing with MXML or ActionScript 3.0
Now that you are set up, use your IDE to create an AIR project. Do not bother about creating the Application Descriptor XML document. In FDT4 and FB4Linux this document is auto generated -Thank God. In FDT4 the document is autogenerated in the bin folder when you launch the debug application. In FB4Linux the document is generated when you create the FlashBuilder AIR project. You're looked after in both IDE's.

In FDT4 if you want to create the AIR project with Actionscript do the following:
Create an Actionscript class. Call it what you want. For the most basic basic AIR app use the following code:
package {
    import flash.text.TextField;

    /**
    public class AIRtest2 extends Sprite {
        public function AIRtest2() {
            var tf:TextField = new TextField();
            tf.text = "HMMMM an AS3 AIR app";
            tf.width = 150;
            tf.height = 20;
            tf.x = 200;
            tf.y = 200;
            addChild(tf);
        }
    }
}

In FDT4 if you want to create the AIR project with MXML do the following:
Create an MXML WindowedApplication class. Call it what you want. For the most basic basic AIR app use the following code:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:Label text="FINALLY!!" horizontalCenter="0" verticalCenter="0"/>

</s:WindowedApplication>


Click on the Debug button in FDT or FB4Linux. Voila, you should see the ADL debug player with your application. This worked for me, I hope it works for you

Finally the Linux Flex/Actionscript community and Ubuntunistas in particular have an IDE that is fully supported on Linux. FDT has long been touted as an IDE at par with FlashBuilder and FlashDevelop. Some of its features are certainly outstrip the aforementioned IDE's on the other hand there are things that it lacks. Having said that for the Linux user the idea of a fully supported Flex-Actionscript IDE is a real boon. Since Adobe pulled the plug on Linux support for Flex there have been precious few options and most are hacks that are unsupported or unofficial. For the professional these options are untenable and risky especially for the development of commercial projects. FDT4 have been sagacious enough to recognise that the Linux group is a viable market segment and we welcome their support. I implore all Linux user to do as much as they possibly can to support FDT and feed back into the development team in order that the product may some day outstrip FlashBuilder in performance, feature-set and penetration.
Without a shadow of a doubt there are kinks to be ironed out - importing FlashBuilder projects can sometime be flakey - the larger the project the more flakey. I find that rebuilding the project for FDT4 is a faster safer option. There seems to be a lack of certain key shortcuts that exist in FlexBuilder, off the top of my head I can think of multiline duplication and ASDoc tag creation, 2 shortcuts that I really miss. Having said that the ability to create variables in classes from the point of declaration is simply BOSS.
I'm still a newbie to FDT4 but I like it more everyday and I have pretty much started developing exclusively in the IDE. If you are a Linux Flex/Actionscript developer looking for the IDE - look no further.

The only way to describe using the Ubuntu OS and the daily pleasant surprises I get is to compare it to Christmas coming everyday. Honestly its no exaggeration. In my view no OS is better, Ubuntu is just BOSS, period!!! ... and it keeps getting better.
The latest 'Christmas present' comes in the shape of fb4linux a port of the Adobe FlashBuilder for the 'nix' platform. I give my heartfelt THANKS to the wonderful person who has spearheaded this project. Once set up its a perfect working copy of FlashBuilder. I really was not keen on the idea of installing Wine in order to experiece FlashBuilder, and though I could install in VirtualBox that would mean I'd be developing in Windows which I did not want to do.  There is the usual problem of there not being a designview in this IDE as well but, I've been developing on FlexBuilder for Linux for so long that frankly I do not miss it at all.
I installed fb4linux on Ubuntu Karmic 64-bit, my Eclipse build was Gallileo. By Golly does it rocket when you compile, you hit F11 and before you can say 'F11' your build is up. There are some set up procedures to adhere to if you are developing on a 64 bit linux distro. You need to set up a 32 bit Eclipse build as neither FlexBuilder nor FlashBuilder can be run on the 64 bit versions of Eclipse. The instructions for doing this are detailed quite clearly  on this blog .
I have copied the main parts of the blog post relevant to setting up FlashBuilder here (this was how I set it up) on the assumption that you have downloaded Eclipse Gallileo and the fb4linux project zip. With a Ubuntu Karmic 64 bit you need to install ia32-sun-java6-bin and all its dependencies.

1. For 64 bit: In a terminal window run “sudo update-alternatives –config java” and select ia32-java-6-sun as your jre of choice.
2. Unpack your Eclipse download and place it where you want it to be, I like /usr/local/bin/eclipse-galileo, by running “tar zxf eclipse-SDK-3.5RC2-linux-gtk.tar.gz” to unpack it.
3. For 64 bit: Move the eclipse.sh script into your eclipse install folder and run “chmod a+x eclipse.sh“.
4. For 64 bit: Set java back to the regular 64 bit variety using the same method as step 1 (but obviously selecting just java-6-sun).
5. Untar the fb4linux package in a folder of your choice. I would suggest you have a parent directory called FB4Linux and untar your package in here. Mine was placed here home/ayo/Adobe Flash Builder Beta 2 Linux
6. Download the Flash Player 10 debug player for Linux from Adobe. Create a directory wherever you like and place the standalone player there. Mine was placed here '/home/ayo/DebugFlash/
   

Please restart Eclipse after you have done this to be certain that Eclipse works. Once you are in Eclipse go to Help>Software Updates> Configuration. Add the path to where you untarred your download of fb4linux. Thats it - done. Well almost. You need to create an 'sdks' folder in the parent folder, in my case the 'Adobe Flash Builder Beta 2 Linux' directory. You need to set up your SDKs and the location of your web browser and standalone player, in my case /home/ayo/DebugFlash/flashplayer.
Now create your first test project and enjoy the goodless of Ubuntu and FlashBuilder

For a very LIMITED time only download FB4Linux here

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!