Page 1 of 4 123 ... LastLast
Results 1 to 10 of 40

Thread: HOWTO : developing flex with gvim

  1. #1
    Join Date
    May 2006
    Location
    Victoria, Australia
    Beans
    648
    Distro
    Ubuntu 12.04 Precise Pangolin

    HOWTO : developing flex with gvim

    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

    Code:
    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)
    Code:
    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

    Code:
    <?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

    Code:
    <?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
    Code:
    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
    Code:
    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.
    Last edited by delfick; October 7th, 2008 at 04:01 AM.
    if u find some of my ideas weird...look at my avatar for the reason
    http://delfick.storage.googlepages.c...ycfuserbar.png

  2. #2
    Join Date
    Dec 2007
    Beans
    8

    Re: HOWTO : developing flex with gvim

    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

  3. #3
    Join Date
    May 2006
    Location
    Victoria, Australia
    Beans
    648
    Distro
    Ubuntu 12.04 Precise Pangolin

    Re: HOWTO : developing flex with gvim

    Quote Originally Posted by bobbwhy View Post
    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 ?
    if u find some of my ideas weird...look at my avatar for the reason
    http://delfick.storage.googlepages.c...ycfuserbar.png

  4. #4
    Join Date
    Dec 2007
    Beans
    8

    Re: HOWTO : developing flex with gvim

    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.

  5. #5
    Join Date
    May 2006
    Location
    Victoria, Australia
    Beans
    648
    Distro
    Ubuntu 12.04 Precise Pangolin

    Re: HOWTO : developing flex with gvim

    mxmlc compiles mxml files, not xml files
    if u find some of my ideas weird...look at my avatar for the reason
    http://delfick.storage.googlepages.c...ycfuserbar.png

  6. #6
    Join Date
    Aug 2007
    Beans
    100

    Re: HOWTO : developing flex with gvim

    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

  7. #7
    Join Date
    May 2006
    Location
    Victoria, Australia
    Beans
    648
    Distro
    Ubuntu 12.04 Precise Pangolin

    Re: HOWTO : developing flex with gvim

    Quote Originally Posted by bandito40 View Post
    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.
    if u find some of my ideas weird...look at my avatar for the reason
    http://delfick.storage.googlepages.c...ycfuserbar.png

  8. #8
    Join Date
    Apr 2008
    Location
    Placelandia
    Beans
    91
    Distro
    Ubuntu 8.04 Hardy Heron

    Re: HOWTO : developing flex with gvim

    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?
    Hey! You just found my signature!

  9. #9
    Join Date
    May 2006
    Location
    Victoria, Australia
    Beans
    648
    Distro
    Ubuntu 12.04 Precise Pangolin
    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
    Code:
    <?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)

    Code:
    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

    Code:
    <?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...
    Last edited by delfick; May 19th, 2008 at 10:59 AM.

  10. #10
    Join Date
    Apr 2008
    Location
    Placelandia
    Beans
    91
    Distro
    Ubuntu 8.04 Hardy Heron

    Re: HOWTO : developing flex with gvim

    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
    Hey! You just found my signature!

Page 1 of 4 123 ... LastLast

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •