Flash/Flex development in Linux : Minibuilder

Adobe no longer develops Flash/Flex Builder for Linux. I’ve found a promising opensource alternative : Minibuilder. It’s an IDE built with Adobe Air.

flash platform

flash platform

Let’s see how to install and use this tool:

1. Firstly, we install Adobe Air : (http://www.sizlopedia.com/2008/04/06/how-to-install-adobe-air-on-ubuntu/ )

user@computer:$ wget http://airdownload.adobe.com/air/lin/download/1.5/AdobeAIRInstaller.bin
user@computer:$ chmod +x AdobeAIRInstaller.bin
user@computer:$ ./AdobeAIRInstaller.bin

2. Java installation

user@computer:$ apt-get install sun-java-jre

3. Flex installation 3.5 ( URL : http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk )

Unzip it somewhere.

4. Download minibuilder: (URL :  http://minibuilder.googlecode.com/files/AirMiniBuilder-1.0-alpha-3.air )

user@computer:$ Adobe\ AIR\ Application\ Installer /$FULL_PATH/AirMiniBuilder-1.0-alpha-3.air

5. After installing minibuilder, it will autostart. It will tell us about something called MBCompiler, the full path to the script will be at the bottom of the window:
Example : /opt/AirMiniBuilder/share/MBCompiler/start

Having installed MBCompiler we can double-click on “Check again” y the warning will disappear.
We also have to write the path to flex in “SDK Path”.

And that’s all. Let’s start with a little project.

We use the “Create New Project” tab:

Minibuilder

Minibuilder

We choose:
Project target : “Flash Player AS3

It supports two frameworks : Flex and AsWing. We’ll use Flex.
Add (some) Flex support

Project name: “hola mundo”.

That source code which appears is called MXML, a markup language which is used to place Flex components and binding code to events.

Editor Minibuilder

Editor Minibuilder

We click on “Compile and Quickrun”. It’s not really fast, far from MTASC or Haxe speed…

When I run it I wasn’t able to see anything. I think that It was because of the fact that my system was trying to use SWFDEC as runtime. We’ll find the swf file in the bin-debug folder, so we can test it ourshelves.

We’ll see a few buttons (“AAA”,”BBB”…) because It’s being used “Application.as”.

Now It’s just all about learning Flex. If you come from MTASC I’ll tell you that Flash classes are located as “Flash Player API”:

So we can use Flex framework components: http://livedocs.adobe.com/flex/3/html/help.html?content=controls_01.html or we can use the Flash Player API.

http://livedocs.adobe.com/flex/3/html/help.html?content=Part3_Flash_Player_APIs_1.html

We can use both approaches. In the following example, It’s used Netstram and Netconnection instead of Flex’s VideoDisplay component but you could use Flex buttons aswell:

http://blog.flexexamples.com/2008/03/01/displaying-a-video-in-flex-using-the-netconnection-netstream-and-video-classes/

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/01/displaying-a-video-in-flex-using-the-netconnection-netstream-and-video-classes/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;

            private var nc:NetConnection;
            private var ns:NetStream;
            private var video:Video;
            private var meta:Object;

            private function init():void {
                var nsClient:Object = {};
                nsClient.onMetaData = ns_onMetaData;
                nsClient.onCuePoint = ns_onCuePoint;

                nc = new NetConnection();
                nc.connect(null);

                ns = new NetStream(nc);
                ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");
                ns.client = nsClient;

                video = new Video();
                video.attachNetStream(ns);
                uic.addChild(video);
            }

            private function ns_onMetaData(item:Object):void {
                trace("meta");
                meta = item;
                // Resize Video object to same size as meta data.
                video.width = item.width;
                video.height = item.height;
                // Resize UIComponent to same size as Video object.
                uic.width = video.width;
                uic.height = video.height;
                panel.title = "framerate: " + item.framerate;
                panel.visible = true;
                trace(ObjectUtil.toString(item));
            }

            private function ns_onCuePoint(item:Object):void {
                trace("cue");
            }
        ]]>
    </mx:Script>

    <mx:Panel id="panel" visible="false">
        <mx:UIComponent id="uic" />
        <mx:ControlBar>
            <mx:Button label="Play/Pause" click="ns.togglePause();" />
            <mx:Button label="Rewind" click="ns.seek(0); ns.pause();" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>
Leave a comment

0 Comments.

Leave a Reply


[ Ctrl + Enter ]