JavaScript and Flash ActionScript

JavaScript and Flash ActionScript share a syntactical core - ECMAScript edition 2. This gives JavaScript coders a leg up on using one of the most popular animation formats Flash .swf files.

Macromedia has a been a vigorous user of JavaScript. Its whole Mx line of products use JavaScript as the macro scripting language either explicitly as in the case of Dreamweaver Mx and Fireworks Mx or behind the covers in the case of Freehand Mx. But perhaps one of the most intriguing uses of JavaScript is in the animation scripts for Flash - ActionScript.

ActionScript is a subset of ECMAScript 1.0 edition which roughly corresponds to Netscape's JavaScript 1.4. This makes ActionScript about 1 version behind the latest JavaScript technology. But more importantly, it means JavaScript developers are at an advantage in picking up and using ActionScript. In effect, from day one they know all the syntax, operators, and major statements of ActionScript.

Now some developers may say "big deal, who cares about Flash animations ?". Well as it turns out - quite a lot of folks in the software business. First, Adobe has thrown in the towel on SVG and adopted Flash's .swf file format for animations as has just about every other major player in the graphics, 3D modeling and image design field. Both Adobe and Corel have also adopted ActionScript (or a subset) for their Live Motion 2 and RAVE animation tools respectively. Second, the documentation and demo-creation tools are exploding with Flash Help and Flash demo systems. The advantage is that the .swf file format is very efficient in storing the rich set of still images, audio, and video used in demos. Some vendors like eHelp's RoboDemo provide output in .FLA as well as .swf format making it simple to add ActionScript routines to their demos. Finally, Flash 5.x and 6.x plugins are available on 98% of all browsers. Given the explosion of Flash-based banner ads, Flash data components and complete Flash websites - Flash usage has moved well beyond the 'skip intro' excesses of the Dot.Com bust era. Bottom line -Flash .swf animations are a major web development fixture and ActionScript is the scripting language for Flash.

What You Already Know

If you are proficient in JavaScript, 65-75% of your skills will immediately transfer over to ActionScript because as noted, ActionScript, like JavaScript derives from the same ECMAScript 262 standard. Thus, the rules for creation of variables, arrays, functions, and objects are identical. As well, nearly identically the same syntax is used for operators, statements, logical expression and flow of control statements as illustrated with the following code snippet in ActionScript:

var cities = ["Albany", "Cairo", "Dublin", "Lima", "Warsaw"];
for (ii = 0; ii <cities.length; ii++){
  // spell out the names of each city backwards
  jj=cities[ii].length;
  while ( --jj >=0) trace(cities[ii].charAt[jj);
}

Comments, scoping of variables, and the object model are the same. There are some omissions in ActionScript of syntax and scripting capabilities that JavaScript coders may find disconcerting. Most notable - ActionScript does not support the the exception handling capabilities of JavaScript. Missing are the basic statements: try, catch, finally and throw. Statement labels for break and continue statements are not allowed in ActionScript. Regular Expressions are not supported. ActionScript date function will not parse human readable dates like "July 4 , 2002". The eval() function is severely restricted in what type of expressions can be supplied in ActionScript. In sum there are about a dozen of these type limitations.

But on the other hand ActionScript is more lenient than ECMAScript/JavaScript on case sensitivity - variable names and identifiers are case insensitive. Likewise a reference to an undeclared variable causes a runtime error where as ActionScript allows for them. Some developers think this leniency has been carried to an extreme with ActionScript just ignoring undeclared functions (often a typo error), while JavaScript will produce a runtime error, flagging the offending function ms-reference. This party is ambivalent - there are times I want the program to continue functioning and others when I want the error flagged.

The object syntax of ActionScript is so easy because it is simple and has optional formats:

//First we define a class, sprite, and its properties
function sprite(rad, scolor, xx, yy, rotate){
  this.radius = rad; this.color = scolor;
  this.xpos = xx; this.ypos = yy; this.angle = rotate;
}
//Now to create a sprite object is easy
var graydot = new sprite(.25, 0x333333, 0, 50, 20);
var bigGreen = new sprite(10, 0x33FF33, 5, 500, 0);
// And references to the objects properties can be made two ways
var size = graydot.radius;
var size = graydot['radius'];

And this simplicity continues into the definition of the methods and classes for a function -see Colin Moock's ActionScript for Flash Mx 2nd Edition or Bhangall et alia's excellent ActionScript Reference Guide for all the details on declaring and using objects in ActionScript - the chapters resemble the equivalent sections on objects/classes in David Flanagan's JavaScript: the Definitive Guide precisely because the syntax is so very similar. However, there is a major difference between the two scripting languages - the many predefined objects in JavaScript and ActionScript do differ.

A Class of Differences

As noted, the predefined classes in JavaScript and ActionScript are anywhere from slightly to substantially different. These differences are due to the fact that JavaScript is designed primarily to support web pages through document/windows/elements classes while ActionScript is devoted to control of animations through the Stage/MovieClip classes. The Table below summarizes these major differences in predefined classes:

Table 1- Predefined Classes in ActionScript vs JavaScript
Class	ActionScript	JavaScript
area	no - has own drawing API	yes complete
argument	yes complete	yes complete
Array	yes - less toSource(), valueOf()	yes complete
Boolean	yes - less toSource()	yes complete
Button	yes - generally different from JS	yes - part of Form object
Color	yes complete	no - part of Body, CSS and other objects
Date	yes - less to parse(), toTimeString(), valueOf()	yes complete
Document	no - MovieClip is dominant object	yes complete
element	no, embodied in special objects like key, etc	yes complete
form	no seen in special objects like Button etc	yes complete
function	yes - less arity, caller, constructor, length	yes complete
global	partial - greatly simplified, syntax change	yes complete
Key	yes - very different	yes - very different, kbd syntax, properties, methods
_level	yes	no - Netscape Layer is analogous
location	no - but should be	yes complete
Math	yes complete	yes complete
MovieClip	yes	no, document/element => Stage/MovieClip
Mouse	somewhat analogous	MouseEvent - somewhat analogous
Number	yes - less many methods, properties	yes complete
Object	yes - again much simplified	yes complete
RegExp	no - 3rd party regular expression	yes complete
Selection	yes - analogous	no buried in specific Form objects
Sound	yes complete	no but should be
Stage	yes	no, document/element => Stage/MovieClip
String	yes - core set of 12 methods, key properties	yes complete
Textfield/TextFormat	yes	no - spread over Style, text, textarea etc
this	yes complete	yes complete
XML	key point of divergence	key point of divergence

As one can see from the table there are some core similar classes with ActionScript clearly being the subset of JavaScript. There are times when programming in ActionScript I would have dearly loved to have some more of those JavaScript classes implemented in ActionScript. For example, the Windows class or the location/URL class would be very useful for managing Flash's many new forms and data components. Likewise ActionScript's sound and color classes could be usefully imported into JavaScript.

But the two critical points of divergence are JavaScript's Form oriented objects like textfield, select field, radio button which are largely implemented as Flash components. There is not the logical hierarchy as in JavaScript. But JavaScript has failed to add any new form components virtually from the origin of the language in 1995. Of even more concern is the divergence in the handling of XML. ActionScript has two predefined classes, XML and XMLSocket, for handling XML whereas JavaScript has only one, non-standard Microsoft JScript oriented XML class. Its a bit disconcerting that XML which has managed to stay close to standard among all the major players is subject to different definitions and processing methods when implemented in major scripting languages like ActionScript and JavaScript.

The XML Handwriting on the Wall

So this divergence in XML implementations is a bellwether. The likelihood is that the two scripts will continue to diverge over time. as we have seen from the table there are already substantial differences in the predefined classes. And with Flash adding database connectivity while JavaScript struggles with two rival implementations of database operations- the Netscape original and the Microsoft JScript latest ASP.NET incarnation; convergence of the scripts becomes more unlikely. Web Services, threading and asynchronous messaging have little reason to converge because the base XML classes are different along with some event and error handling syntax.

This seemingly inevitable divergence in programming models is hardly welcome among programmers. Already programmers have to make a false choice: between Java and Microsoft's C# clone. Developers of Web applications also must cope with knowing at least 6-8 programming languages and syntaxes: HTML, XML, UML, SQL, JavaScript, ActionScript, Java and/or C# and/or PHP and/or Perl and/or C/C++. But lets not dismiss some major blessings here - ActionScript and JavaScript share a remarkably consistent math, string and object defining syntax along with nearly uniform operators, logical operations, and flow of control statements. My gosh look at the world of system administration where BSH, DCL, JCL, Rexx, WSH is just the tip of the batch scripting iceberg.

The new E4X XML extensions to ECMAScript will be the signpost. These extensions (the first major ones to JavaScript in 4 years are being proposed not by Netscape but BEA) truly simplify XML processing in JavaScript They involve changes to the for-loop and other syntactical changes to streamline XML-tree processing. First, of course, they have to be accepted by ECMA and then implemented by the JavaScript vendors. Then the ball comes to Macromedia's court where major additions and changes to Macromedia's XML and XMLSocket pre-defined classes would have to be made. This is not a sure thing. Despite this prospect, JavaScript and ActionScript coders will still be pleasantly surprised how extensively their skills transfer between the two scripting environs. No small blessing these days when for example, moving between XSL:FO, XSLT, CSS, XPATH and WSDL - all a part of the overall XML architecture, can be a challenge. This developer is counting his JavaScript and ActionScript blessings and outright praying for convergence.

Jacques Surveyer is a developer and consultant