HOWTO : developing flex with gvim

[delfick]

hello.

for quite a few years I've been interested in flash, and have moved from developing flash stuff in the flash ide with no actionscript whatsoever, to doing stuff in the ide with an extensive amount of actionscript, to using a combination of just actionscript2 and kagswf (as in no ide ) to now using flex (actionscript3 and mxml)

Anyway, it took quite a bit of searching to be able to do this in linux (more so when I was working with actionscript2 than with flex) and there is quite a few threads on this forum asking for ways to develop flash in linux.

So I've decided to put down here how I've got gvim to play nice with actionscript3 and mxml.


First download the flex3 sdk from here :
http://www.adobe.com/products/flex/f...ads/index.html

then extract that to wherever you want, on my computer I've chosen :
/usr/local/flex


Then in the terminal, we need to make the mxmlc compiler executable :
$ sudo chmod +x /usr/local/flex/bin/mxmlc

then we need to make that folder part of your $PATH so that you only have to type "mxmlc" in the terminal to run it. To do this we first open this file /etc/bash.bashrc :
$ gksudo gedit /etc/bash.bashrc

(I'm not sure if this is the best place to put this (it doesn't work when i put it in ~/.bashrc), hopefully someone can clarify that )

and add the following at the top :
export PATH=${PATH}:/usr/local/flex/bin

then when you have your flex project you can use mxmlc to compile your main mxml file (I assume you already know how to make a flex project, if not, this place here is a good place to start (it's where I started ))

mxmlc usage is as follows :
mxmlc [options] <target mxml file>

Second we set up gvim to have proper syntax highlighting for the .mxml and .as files.

here is my ~/.vim folder which holds the actionscript2, actionscript3 and mxml syntax files, as well as my custom colours file (you can use whatever colours you want) :
http://delfick755.googlepages.com/hiddenVim.tar.gz

then to make sure that the right syntax highlighting is applied to those files, make sure the following is in your ~/.vimrc file

au BufNewFile,BufRead *.mxml set filetype=mxml
au BufNewFile,BufRead *.as set filetype=actionscript
syntax on

and some nice things to have in your ~/.vimrc (unrelated to actionscript)

set number
set nocompatible
set history=50          " keep 50 lines of command line history
set ruler               " show the cursor position all the time
set showcmd             " display incomplete commands
set showmode            " display the mode you are in everytime
set mouse=a             " mouse works in all modes
set incsearch           " do incremental searching
set showmatch           " balancing brackets like in emacs
set wrap!               " linewrapping off
set ignorecase          " evident
set nostartofline       "to keep the cursor at the same horizontal location when
set tabstop=4           " number of spaces that a <Tab> in the file counts for
set laststatus=1        " show status line only if there are more than one windows
set shiftwidth=4        " size of tabs by default
set backup              "  backUps!!
set title               "see filename in Xterm title
imap ZZ <esc>:wq!<cr>   " ZZ saves and leaves as well in insert mode
set autoindent
set smartindent
source $VIMRUNTIME/mswin.vim  " make it behave like windows

Thirdly change the mime information so that you don't get annoying messages about the file not being the expected type when you double click .as files.

Go into ~/.local/share/mime/packages (or create that directory first if it doesn't exist)

then add a file called actionscript.xml with the following in it

<?xml version="1.0" encoding="UTF-8"?>
	<mime-info xmlns="http://www.freedesktop.org/standards/shared-mime-info">
		<mime-type type="text/actionscript">
			<sub-class-of type="text/plain"/>
			<comment>Actionscript Source Code</comment>
			<glob pattern="*.as"/>
			<glob pattern="*.as2"/>
			<glob pattern="*.as3"/>
		</mime-type>
	</mime-info>

then add another file called mxml.xml with the following in it

<?xml version="1.0" encoding="UTF-8"?>
	<mime-info xmlns="http://www.freedesktop.org/standards/shared-mime-info">
		<mime-type type="text/mxml">
			<sub-class-of type="text/xml"/>
			<comment>Mxml Source Code</comment>
			<glob pattern="*.mxml"/>
		</mime-type>
	</mime-info>

then do

update-mime-database ~/.local/share/mime

(if you want this to be a system wide setting then do the same, but in /usr/local/share/mime)

Fourthly install the linux debugger flash player and the flashtracer extension so you can see trace statements

first, download the debugger flash player from here http://download.macromedia.com/pub/f...nux_dev.tar.gz

Unpack it to the desktop, then unpack the archive found in the plugin/debugger folder, and run the flashplayer-installer file

Then install the firefox FlashTracer extension, as found here https://addons.mozilla.org/en-US/firefox/addon/3469

and create a file in your home folder called mm.cfg and add the following to it

TraceOutPutFileName=/home/iambob/.macromedia/Flash_Player/Logs/flashlog.txt
ErrorReportingEnable=1
TraceOutputFileEnable=1
MaxWarnings=100

(change "iambob" to your username)

Then in the options for flashtracer, make the output file equal to the first line above, so for me it would be "/home/iambob/.macromedia/Flash_Player/Logs/flashlog.txt"

...

Hopefully this has helped some people, I certainly would have liked to have this back when I started trying to figure out how to make this work

have fun.

[bobbwhy]

Hey Delfick, very nice tutorial.. I got along alright.. but when I tried compiling the sample descriptor* application that came with the sdk..
no dice.. Unsupported file type was thrown.

Please let me know what your system configuration is?

thanks!
Robert

[delfick]

Originally Posted by bobbwhy Hey Delfick, very nice tutorial..

thnx

Unsupported file type was thrown.

so what exactly are you doing to get this error?
and what exactly is the error ?

[bobbwhy]

Thanks for reply...
Ok.. so I downloaded the sdk ..
put it in /usr/local/flex

changed the permissions to 755 (and anyway they are all under my username so should not matter)

(did not yet alter path.. but from /usr/local/flex/samples did this:

../bin/mxmlc descriptor-sample.xml

it churned away for a sec.. then gave me:

loading configuration file /usr/local/flex/frameworks/flex-config.xml

Error: Unsupported file type: /usr/local/flex/samples/descriptor-sample.xml


Now.. I am very new to flex.. so maybe I am missing something very simple.. ? I will keep looking.. meanwhile.. thanks very much.

[delfick]

mxmlc compiles mxml files, not xml files

[bandito40]

This tutorial worked great. After trying swfmill, adst, elcipse which all gave one problem or another, I can finally start building flash movies.

Thanks,

Carl

http://www.gaihosa.com

[delfick]

Originally Posted by bandito40 This tutorial worked great. After trying swfmill, adst, elcipse which all gave one problem or another, I can finally start building flash movies.

I know the feeling

Thanks,

no probs

I'm glad it helped.

[rtoot3]

ok well i did what you said and it worked for one file. but one of the action script files i made didnt work

this is what the file said

var message = "Hi there Flash!";
var FirstName = "Ryland"
trace(message);
trace("Hi there, " + FirstName + ", nice to meet you.");

i saved it as testflash.as to my desktop and typed mxmlc testflash.as into the terminal here is what the output said:

Loading configuration file /usr/local/flex/frameworks/flex-config.xml
/home/ryland/Desktop/testflash.as: Error: A file found in a source-path must have an externally visible definition. If a definition in the file is meant to be externally visible, please put the definition in a package.

do you know wats wrong?

[delfick]

you need a bit more in the file than that

you have two options, either use mxml to describe the stage via something like this

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	width="100%" height="100%">

	<mx:Script>
		<![CDATA[
			
			import flash.events.*;
			
			[Bindable]
			private var message:String = "hello";

			private var message1:String = "hello";
			private var message2:String = "hi";

			private function changeMessage(event:Event):void
			{
				if (message == message1)
				{
					message = message2;
				}
				else
				{
					message = message1;
				}
			}

			
		]]>
	</mx:Script>

	<mx:Panel width="50%" height="50%">
		<mx:TextArea width="100%" height="100%" id="logger">
			<mx:text>{message}</mx:text>
		</mx:TextArea>
	</mx:Panel>

	<mx:Button label="change the message" click="changeMessage(event)"/>

</mx:Application>

I recommend going through this http://examples.adobe.com/flex2/inpr.../explorer.html
and for more thorough documentation, http://livedocs.adobe.com/flex/2/lan...ge-detail.html

or even http://livedocs.adobe.com/flex/2/lan...e-summary.html

and definitely this http://livedocs.adobe.com/flex/201/h...ges_049_1.html

and this blog.flexexamples.com



or you can do it via pure actionscript. But I can't remember off the top of my head how exactly to do that. Here is something I've adapted from something i saw the other day (10 minutes, 13 seconds into http://www.gotoandlearn.com/player.php?id=73)

package
{
	import flash.display.*;
	import flash.text.*;
	import mx.controls.Button;
	import mx.containers.Panel;
	import flash.events.Event;

	//swf metadata
	[SWF(width="600", height="400", backgroundColor="#FFFFFF", framerate="30")]

	public class Start extends Sprite
	{
		private var theTF:TextField;
		private var theButton:Button;
		private var thePanel:Panel

		[Bindable]
		private var message:String;

		private var message1:String = "hello there";
		private var message2:String = "second message";

		public function Start():void
		{
			thePanel = new Panel();
			theTF = new TextField();
			theButton = new Button();

			thePanel.percentWidth = 50;
			thePanel.percentHeight = 50;
			addChild(thePanel);

			theTF.text = message;
			//i think you need to use event handlers for it to actually change when message changes
			thePanel.addChild(theTF);

			theButton.label = "label";
			//then you use event handlers (easy, but I can't remember how) to make it do something when clicked on
			thePanel.addChild(theButton);
		}

		private function changeMessage(event:Event):void
		{
			if (message == message1)
			{
				message = message2;
			}
			else
			{
				message = message1;
			}
		}
	}
}

though it doesn't work and I have no idea why, and don't have time atm to figure out why...
(but when mxml is compiled, it is converted into actionscript classes before being compiled, so anything you can do in mxml, you can do in actionscript)

morale of the story, it's easier to do it in mxml

and example slightly more related to your question is this

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	width="100%" height="100%"
	creationComplete="init()">

	<mx:Script>
		<![CDATA[

			private function init():void
			{
				var theMessage:String = "Hi there Flash!";
				var firstName:String = "Ryland";
				trace(theMessage);
				trace("Hi there, " + firstName + ", nice to meet you.");
			}


		]]>
	</mx:Script>

</mx:Application>

Also, I've updated the tutorial to show how to be able to read trace messages...

[rtoot3]

wait one more thing. so am i supposed to write mxml code and then use the mxmlc command to turn it into flash, or do i write action script and then use the mxmlc command to turn it into flash?

sorry if i missed some obvious information