Thursday, September 18, 2008

Flex: The Unix Geek's Ideal Flash Environment

For a new project I'm working on, I've decided to implement the necessary Flash code in Flex instead of the usual Flash Authoring Environment. For those who don't know, Flex allows you to write XML and JavaScript and compile it to a .swf instead of using the traditional GUI timeline based tools.

While Adobe charges money for the GUI authoring environment (for both Flash and Flex), they actually give away the Flex command line compiler for free. And best of all, folks have integrated it in nicely with Emacs.

Turns out, you can quickly and cleanly develop Flash apps using your favorite Unix tools. How cool is that?

The Flex API is huge so I'm very much wrapping my head around it. But so far, it appears to offer a complete GUI programming API, accessible by the elegant ActionScript programming language (which, of course, has deep roots with Scheme). It's an impressive combo.

Here are a few resources I've found useful to getting started:

  • The API Docs - Can't do much without these
  • Adobe's Getting Start Doc - Adobe does a great job of introducing Flex and making clear what it is and isn't.
  • Flex Compiler Shell - the very cool utility that turns the rather crude command line compiler into a rally useful tool. This now comes with Flex, you don't need to download it separately.
  • Bootstrapping an ActionScript Only App - Flex encourages you to program in both XML and ActionScript. I'd rather program in ActionScript only, which isn't really a problem. Accept, getting an app to start with just ActionScript isn't obvious. This link provides a nice recipe where you use a single .mxml file, and the rest of your code base is in ActionScript.
  • emascript-mode.el - This is a nice Emacs mode for editing ActionScript. Combine this with auto-insert mode, and you're good to go.
  • Fast Flex compilation for Emacs - this mode is a life saver. It wraps up fcsh, and allows you to recompile your project files in just a second or two. It also updates Emacs so it jumps to the write line in the file when a compilation error occurs.
  • Emacs and Flex in the wild - An actual programmer talks about using Emacs and Flex together
  • Migrating from ActionScript 2 to ActionScript 3 - This is a very useful document that will bring you up to speed on the latest and greatest ActionScript.

Did I miss any resources? Share them in the comment below - Thanks!

7 comments:

  1. Anonymous9:36 AM

    Another nice fit for this collection is the Flex command-line debugger.

    ReplyDelete
  2. Ah man, thanks so much for those Emacs links! I've been running fcsh manually using a shell buffer.

    ReplyDelete
  3. Anonymous1:40 PM

    they have released flex builder as a plugin for eclipse for linux.

    ReplyDelete
  4. Anonymous1:45 PM

    As an alternate to using fcsh..etc, you can also create a Makefile for your Flex project and pass the appropriate switches (-compiler.incremental -keep)to the Flex compiler. Then from emacs just type (M-x compile). With -compiler.incremental the Flex compiler does its own dependency checking and caching, as with fcsh, so the Makefile doesnt even have to be that complicated. The sample below is an extract from a larger project so has some other cruft.

    ##### BOF ###########################
    # SOURCE_FILES=$(wildcard *.mxml)
    SOURCE_FILES=\
    simple/SimpleApplicationExample.mxml

    SOURCE_DEP=$(patsubst %.mxml, %, $(SOURCE_FILES))

    MX=~/bin/mx3

    SOURCE_BASE=/home/flex/flex3_dev/dev

    SOURCE_PATHS=\
    -compiler.source-path+=$(SOURCE_BASE)/flexmdi \
    -compiler.source-path+=$(SOURCE_BASE)/swc/locale/en_US

    LIB_PATHS=\
    -compiler.library-path+=$(SOURCE_BASE)/swc/charts.swc \
    -compiler.library-path+=$(SOURCE_BASE)/corelib/bin/corelib.swc

    NAMESPACES=\
    -namespace http://flexmdi.googlecode.com/ \
    /home/flex/flex3_dev/dev/flexmdi/manifest.xml

    USE_NETWORK=-use-network=true

    FLEX_LICENSES=

    MX_FLAGS=$(SOURCE_PATHS) $(LIB_PATHS) $(NAMESPACES) \
    $(FLEX_LICENSES) \
    -benchmark \
    -compiler.incremental \
    -keep

    all: $(SOURCE_DEP)

    modules: $(MODULE_DEP)

    .PHONY: all clean

    .SECONDEXPANSION:

    SimpleApplicationExample: simple/SimpleApplicationExample

    simple/SimpleApplicationExample: $(patsubst %, %.mxml, $$@)
    $(MX) $(MX_FLAGS) \
    $(USE_NETWORK) \
    -compiler.source-path+=$(SOURCE_BASE)/tracer \
    -output $(patsubst %.mxml, ~/flex3_dev/bin/worbit/%.swf, $(notdir $<)) \
    -- $<

    #REMOVE_CACHES = $(if $(strip $(CACHE_DIRS)), rm -r $(CACHE_DIRS))

    CACHE_DIRS = $(strip $(foreach dep, $(SOURCE_DEP), $(wildcard $(dep)_*.cache)))
    REMOVE_CACHES=$(if $(CACHE_DIRS), rm -rvf $(CACHE_DIRS))

    #GENERATED_DIR = $(wildcard generated)
    #REMOVE_GENERATED = $(if $(GENERATED_DIR), rm -r $(GENERATED_DIR))

    GENERATED_DIR = $(strip $(foreach dep, $(dir $(SOURCE_DEP)), $(wildcard $(dep)generated)))
    REMOVE_GENERATED=$(if $(GENERATED_DIR), rm -rvf $(GENERATED_DIR))

    clean:
    $(REMOVE_CACHES)
    $(REMOVE_GENERATED)

    ########## EOF #############

    ReplyDelete
  5. Hey All -

    Thanks for all the useful suggestions and links.

    You guys all rock!

    -Ben

    ReplyDelete
  6. How did you get charts.swc?
    I've been looking everywhere for the file or for charting-source.jar. No luck. It's a part of flex builder 2, but no obvious linux download.

    Thanks.

    ReplyDelete
  7. Anonymous10:22 AM

    In animation scheme use the correct timeline,or ask some suggestion from flash designer programmer expert.

    ReplyDelete