The latest version of ELIPS Studio has just been released. It brings the ability for developers to create native mobile apps in ActionScript and Flex for mobile devices running Google’s Android platform.

With this new release, developers can now address all major smartphone platforms (iPhone, Android, Symbian, Windows Mobile) from a single code base using powerful web 2.0 languages and technologies from Adobe.

The next version of ELIPS Studio will bring the support of MacOSX as desktop development platform.

If I were Adobe I’d buy French OpenPlug toute suite and turn ELIPSE studio into AIR Mobile (or Mobile AIR).

Try it for yourself, my macbook sounds like it’s getting ready for lift off on that page.

I can’t wait for the animated HTML5 ads that can’t be blocked without turning off Javascript

Poor coding is poor coding be it in Flash or Javascript. The blame doesn’t lie with the platform but with ignorant developers who write inefficient code.

Step 1: Setup

The directory structure I used was as follows.

convert.rb (the ruby script)
compile.sh (the shell script)
fonts/ (a directory for font files - .ttf and .otf)
as/ (a directory for the generated ActionScript)
swfs/ (a directory for the compiled swf files)

Step 2: Prep fonts

Ok told a tiny white lie when I said it was all automated. Since (to my knowledge) you can’t inspect a font file to determine if it’s normal, regular, bold, italic, or bold italic (the weights and styles Flex understands) you’ll have to set up a naming convention that the Ruby script can parse. You’ll be using the font name to create an ActionScript class so it should also be a legal name.

Here’s an example using the Arial family.

Arial.ttf (regular fontWeight and normal fontStyle)
Arial_Italic.ttf (regular fontWeight and italic fontStyle)
Arial_Bold.ttf (bold fontWeight and normal fontStyle)
Arial_BoldItalic.ttf (bold fontWeight and italic fontStyle)

Step 3: The Ruby Script

require 'find'

# delete any previous as
Find.find( 'as' ) do | as |
  if File.extname( as ) == ".as"
    File.unlink as
  end
end

# generate new as
Find.find( 'fonts' ) do | font |
  if File.file?( font )
    # extension name
    ext = File.extname( font )
    # is font
    if ext == ".ttf" || ext == ".otf"
      # file name
      full_name = File.basename( font )
      name = File.basename( font, ext )
      # font weight and style
      font_weight = ""
      font_style = ""
      if full_name.include? "_Bold" + ext
        font_weight = "fontWeight='bold',"
      end
      if full_name.include? "_Italic" + ext
        font_style = "fontStyle='italic',"
      end
      if full_name.include? "_BoldItalic" + ext
        font_weight = "fontWeight='bold',"
        font_style = "fontStyle='italic',"
      end
      # generate as
      f = File.new("as/#{name}.as",  "w+")
      f.write "package
      {
        import flash.display.Sprite;

        public class #{name} extends Sprite
        {
          [Embed(source='../fonts/#{full_name}', fontName='#{name}', #{font_weight} #{font_style} unicodeRange='U+0000-U+00FF,U+2100-U+214F')]
          public var Font:Class;
        }
      }"
      # some helpful output
      print ',"', "#{name}", '"'
    end
  end
end

In TextMate you can open this script and hit Command-R to run it, or run it via the command line ‘ruby convert.rb’. Once the script runs you’ll have generated ActionScript files in the ‘as’ directory ready to be compiled.

Step 4: The Shell Script

echo "<h2>Fonts Custom Compile</h2>";
echo "<code> Started @ `date "+%H:%M:%S"`</code><br />";

for i in `cd as/; ls *.as`; do
  swf=`echo $i |  awk -F. '{print $1}'`
  swf="$swf.swf"
  "/Applications/Adobe Flex Builder 3/sdks/3.3.0.4589/bin/mxmlc" -file-specs="as/$i" -o="swfs/$swf" -managers="flash.fonts.AFEFontManager" 2>&1;
done

You’ll need to customize the script for your Flex SDK location, mine is at "/Applications/Adobe Flex Builder 3/sdks/3.3.0.4589/bin/mxmlc". The hidden gem in there is -managers="flash.fonts.AFEFontManager", about 90% of fonts will compile without it but the rest were blowing up until I added that argument.

Again with TextMate you can run the script with Command-R. Each font will take about five seconds to compile, my set of over 100 fonts took over ten minutes

That’s it! The SWFs are compiled and ready to be runtime loaded into a Flex app. Creating the ActionScript for 100+ fonts would have been a multi-day process but with a little scripting it took less than an hour.

The secret is to override the updateDisplayList method and use the skin’s current name in a switch statement to apply different Degrafa strokes and fills to the button. Click to view an example with source.

<?xml version="1.0" encoding="utf-8"?>
<GraphicBorderSkin xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="http://www.degrafa.com/2007">

    <mx:Script>
        <![CDATA[

            //////////////////////////////////////////////////////////////////////
            //
            // PRIVATE VARIABLES
            //
            //////////////////////////////////////////////////////////////////////

            [Bindable]
            private var awidth:Number=0;

            [Bindable]
            private var aheight:Number=0;

            //////////////////////////////////////////////////////////////////////
            //
            // PROTECTED METHODS
            //
            //////////////////////////////////////////////////////////////////////

            override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
            {
                super.updateDisplayList( unscaledWidth, unscaledHeight );

                awidth = unscaledWidth;
                aheight = unscaledHeight;

                // drop shadow is actually a black 'glow'
                var glow:GlowFilter = new GlowFilter();
                glow.color = 0x000000;
                glow.alpha = 1;
                glow.strength = .75;
                glow.quality = BitmapFilterQuality.MEDIUM;

                // which skin state?
                switch ( name )
                {
                    case "upSkin":
                        buttonRect.fill = upFill;
                        buttonRect.stroke = upStroke;
                        glow.blurX = 4;
                        glow.blurY = 4;
                        break;

                    case "overSkin":
                        buttonRect.fill = overFill;
                        buttonRect.stroke = overStroke;
                        glow.blurX = 5;
                        glow.blurY = 5;
                        break;

                    case "downSkin":
                        buttonRect.fill = downFill;
                        buttonRect.stroke = downStroke;
                        glow.blurX = 3;
                        glow.blurY = 3;
                        break;
                }

                // apply filter
                this.filters = [glow];
            }

        ]]>
    </mx:Script>

    <!-- FILLS -->
    <fills>

        <!-- UP -->
        <LinearGradientFill id="upFill" angle="90" >
            <GradientStop ratio="0" alpha="1" color="#666666" />
            <GradientStop ratio=".5" alpha="1" color="#333333" />
            <GradientStop ratio=".5" alpha="1" color="#000000" />
            <GradientStop ratio="1" alpha="1" color="#666666" />
        </LinearGradientFill>

        <!-- OVER -->
        <LinearGradientFill id="overFill" angle="90" >
            <GradientStop ratio="0" alpha="1" color="#666666" />
            <GradientStop ratio=".5" alpha="1" color="#333333" />
            <GradientStop ratio=".5" alpha="1" color="#000000" />
            <GradientStop ratio="1" alpha="1" color="#666666" />
        </LinearGradientFill>

        <!-- DOWN -->
        <LinearGradientFill id="downFill" angle="90" >
            <GradientStop ratio="0" alpha="1" color="#000000" />
            <GradientStop ratio=".5" alpha="1" color="#333333" />
            <GradientStop ratio=".5" alpha="1" color="#444444" />
            <GradientStop ratio="1" alpha="1" color="#777777" />
        </LinearGradientFill>

    </fills>

    <!-- STROKES -->
    <strokes>

        <!-- UP -->
        <SolidStroke id="upStroke" color="#ffffff" alpha="1" weight="1.5" />

        <!-- OVER -->
        <LinearGradientStroke id="overStroke" angle="90" weight="1.5">
            <GradientStop alpha="1" ratio="0" color="#ccffff"/>
            <GradientStop alpha="1" ratio="1" color="#66ccff"/>
        </LinearGradientStroke>

        <!-- DOWN -->
        <SolidStroke id="downStroke" color="#f4f4f4" alpha="1" weight="1.5" />

    </strokes>

    <!-- GEOMETRY -->
    <geometry>
        <RoundedRectangleComplex id="buttonRect" height="{aheight}" width="{awidth}"
            bottomLeftRadius="4" bottomRightRadius="4" topLeftRadius="4" topRightRadius="4" />
    </geometry>

</GraphicBorderSkin>

In the example below there are two models in Rails, ‘Group’ and ‘Category’, Group has_many Categories and Category belongs_to Group. Here’s the Flex code for the Categories DataGrid, groupName is the labelFunction that spits out a Category’s Group name (equivalent to @category.group.name in ruby):

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

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;

            private function groupName( item:Object, column:DataGridColumn ):String
            {
                return item.group.name;
            }

        ]]>
    </mx:Script>

    <mx:DataGrid id="dataGrid" width="100%" height="100%">
        <mx:columns>
            <mx:DataGridColumn headerText="Name" dataField="name" />
            <mx:DataGridColumn headerText="Group" labelFunction="groupName" />
        </mx:columns>
    </mx:DataGrid>

</mx:VBox>

The blog, which was about 50/50 Ruby/Flex, will probably now swing wildly to ActionScript/Flex topics as I’m all business in the front from here on out. I now have smarter people than me to take care of the back-end (which at OpenSoft is Java and PHP, with a dash of Ruby thrown in for kicks).

Consulting was fun but a bit scattered, I always had like four projects in various stages of completion (not recommended). Not only was I switching between Ruby and Flex but also between design, business development, tech support, accounting, collections, db admin, server admin and on and on. However I learnt a ton, and really only because I was working for myself could I decide to take a day or two off to learn Rails or Flex. If you’re on the younger side (or have limited attachments, i.e., single, no mortgage) I highly recommend consulting for a couple of years to learn new skills and build a reputation.

So my conversion to the dark side is now complete, five jobs ago I was designing Teletubby books for the BBC and now I’m an evil flex developer.

PS OpenSoft is looking for a couple more ActionScripters, Flex jobs in OC are still pretty rare so send me a resume if you’re interested (alastairdotdawson at farheapdotcom).

1. The Concrete Facade class called ApplicationFacade broadcasts a STARTUP Notification.

2. The STARTUP Notification triggers the StartupCommand command object which registers the KeyDataProxy proxy, and StageMediator mediator.

3. StageMediator mediator registers a KEY_DOWN Event handler to the stage to intercept key presses. It also registers to receive KEYUPDATE Notifications.

4. User presses a key generating a KEY_DOWN Event that is intercepted by the key down event handler in the StageMediator.

5. StageMediator broadcasts a KEYDOWN Notification with the character code of the key in the notification body.

6. The KEYDOWN Notification triggers the StoreKeyCommand command object, which accesses the KeyDataProxy proxy and updates the model (data object).

7. The KeyDataProxy proxy stores the data in a data object (just a property in the proxy in this case).

8. The KeyDataProxy proxy broadcasts a KEYUPDATE Notification with the character code of the key in the notification body.

9. The KEYUPDATE Notification handler in StageMediator intercepts the KEYUPDATE Notification and traces the key value.

In my updated example I trace out each action to clarify when (and in which file) they occur. Make sure you have PureMVC in your class path before running the demo.

I should say plans for Ruby as they are looking for a project owner to work on the port. I’d volunteer myself (famous last words) but while I love Ruby I don’t know the ins and outs of the language as well as I do ActionScript.

In any case having one framework “to rule them all” would be a great boost to productivity as you wouldn’t have to mentally switch gears between the front (Flash/Flex) and back (PHP/Ruby etc.) ends.

Some of the more interesting sessions:

Extending Web to the Desktop with AIR
Monday, March 24, 2008
9:00 AM – 10:00 AM US/Pacific

Getting Started with Flash Lite 3 and CS3
Monday, March 24, 2008
11:00 AM – 12:00 PM US/Pacific

Building Rich Internet Applications with Flex 3
Monday, March 24, 2008
4:00 PM – 5:00 PM US/Pacific

Introduction to Adobe Blaze DS
Tuesday, March 25, 2008
9:00 AM – 10:00 AM US/Pacific

Integrating Salesforce.com and Flex
Tuesday, March 25, 2008
11:00 AM – 12:00 PM US/Pacific

Building AIR Applications with Flash CS3
Tuesday, March 25, 2008
1:00 PM – 2:00 PM US/Pacific

Adobe AIR Local Data Storage Options With Emphasis on Using Embedded SQL Databases
Wednesday, March 26, 2008
9:00 AM – 10:00 AM US/Pacific

Flex and Java – Tying the Knot!
Wednesday, March 26, 2008
4:00 PM – 5:00 PM US/Pacific

Flex Data Services
Thursday, March 27, 2008
9:00 AM – 10:00 AM US/Pacific

Blood from a Stone: Flash Game Optimization on Low-end mobile devices
Thursday, March 27, 2008
1:00 PM – 2:00 PM US/Pacific

Flex Visual Data & Charting
Thursday, March 27, 2008
4:00 PM – 5:00 PM US/Pacific

AIR Native Drag and Drop
Friday, March 28, 2008
1:00 PM – 2:00 PM US/Pacific

Flex Architecture
Friday, March 28, 2008
4:00 PM – 5:00 PM US/Pacific