Short – Simplifying Actionscript for Designers

Posted on the September 15th, 2010 under AS 3.0, flash by Vipin

Here is a nice library from Arul, which is made to remove the verboseness of Action Script 3.0.

Short

When Action Script 3.0 was introduced with Adobe Flash CS3, it was a game changer and it definitely changed the way applications are coded in Flash. We moved to true Object Oriented Programming and the complexities and beauties of Software Engineering.

That’s the developer part of the story. Designers? This change left the designers in a complex web of codes which was too verbose and I have seen people getting lost, or they didn’t want to add those simple scripts (or actions) they used to add to the movies.

For adding an action to a button you could do below prior to CS3 release.

On the button itself:


onClick{

}

or on the frame


buttonInstance.onClick(){

}

But see what is required to do the same in CS3 or later releases of Flash:

on the frame (and only on the frame. No script is allowed on the button or movie clip):


buttonInstance.addEventListener(MouseEvent.CLICK,buttonClickHandler);

function buttonClickHandler(e:Event)

{

//Code here...

}

Here is what you should do to add an enterFrame event and animate an object.


this.addEventListener(Event.ENTER_FRAME, eventHandler);

function eventHandler(e:Event):void

{

//Code here...

}

Here is where Short comes in as a great help. Short tries to simplify things again and put that smile back on Designer’s face, to some extend.

The above tasks simplifies to:

on the frame:


_.to = this;

_.button.onClick=function(){

//

}

or even simpler, as you used to do before:


$(instance).onClick=function() { }

//For enterFrame checks
$(stage).onEnterFrame=function(){ }

//Roll over
$(instance).onRollOver=function(){}

Only additional thing you are adding is just the $(..), which way easier than the ‘Flash’’s native coding.

Now, on to how to configure the Flash IDE for using Short. Head to the Google Code page of Short and grab the latest SWC (Short.swc) from the download page.

If you are a designer and needs to use this in all the work you are doing, it make sense to add the library permanently. Follow below steps.

1. Download the SWC
2. Go to the folder <installation Directory>\Common\Configuration\ActionScript 3.0\libs\ and copy the SWC here. The path looked like below on my Windows XP machine with Flash CS5

C:\Program Files\Adobe\Adobe Flash CS5\Common\Configuration\ActionScript 3.0\libs

Now open up Flash IDE and start writing ‘Short’ codes.

If you want to add the SWC on a project basis, follow below steps.

  • Select ‘File’ from menu.
  • Choose Publish Settings
  • Click the Flash tab
  • Select Flash Player 10 and ActionScript 3.0
  • Click Settings
  • Select the Library path tab
  • Add Short.swc

Good to go.

If you are using Short with Flex/Flash Builder(I dont know one will use this with Flex/Flash Builder), you can copy the SWC to the ‘libs’ folder or add using property panel of the project.

More details in the Google Code home page for Short. Short was demoed at the Adobe Flash Platform Summit 2010.

Leave a Reply




XHTML::
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>