Home › Blogs › Rick Winscot's blog

HTML5: AS3 Scripting Host

Tue, 12/27/2011 - 17:02 — Rick Winscot

Imagine being able to script in HTML5 with whatever language floats your boat... JavaScript, ActionScript, AppleScript... too good to be true?

First off - let me state for the record that this isn't another rant on Flash vs HTML5. Meh.

What this is, is an 'experiment' that explores the notion of an interchangeable / dynamic "Scripting Host" that is set via the HTML <script/> tag. What kind of languages you ask? How about...

* JavaScript
* ActionScript
* AppleScript
* VBScript
* DashScript
* Dart

...to name a few!

What would said web-app look like with ActionScript 3 as the scripting host? Maybe something like this:

  1. <html>
  2. <head>
  3.   <title>HTML5: ActionScript 3 Scripting Host</title>
  4.  
  5.   <script type="text/actionscript">
  6.   <![CDATA[
  7.  
  8.   // This block is essentially an import.
  9.   namespace controls = 'mx.controls';
  10.   use namespace controls;
  11.  
  12.   // Anything outside of a function is executed
  13.   // as soon as it is loaded.
  14.   var b:Button = new Button();
  15.   b.label = 'dynamic button';
  16.   b.styleName = 'cbutton';
  17.  
  18.   // Example of using closures.
  19.   b.addEventListener( 'click', function() {
  20.     Console.print('button clicked!');
  21.   } );
  22.  
  23.   // Example of named functions.
  24.   b.addEventListener( 'mouseOver', onMouseOver );
  25.   b.addEventListener( 'mouseOut', onMouseOut );
  26.  
  27.   // Interact with the application body (a canvas).
  28.   App.body.addChild( b );
  29.  
  30.   /**
  31.    * Handling events just like you would in a compiled app.
  32.    */
  33.   function onMouseOver( e:Event ):void
  34.   {
  35.     Console.print( e.currentTarget.label + ' mouse over! ' );
  36.   }
  37.  
  38.   function onMouseOut( e:Event ):void
  39.   {
  40.     Console.print( e.currentTarget.label + ' mouse out!' );
  41.   }
  42.  
  43.   ]]>
  44.   </script>
  45.  
  46.   <stylesheet src="sample/application.css"/>
  47.  
  48. </head>
  49.   <body><!-- declarative parsing yet to come! --></body>
  50. </html>

Imagine being able to script in a web application with your language or choice, one that has first-class access to native OS operations (read: faster not necessarily more secure), or mix-and-match as needed. Isn't this where Google is headed with ChromeOS?

Where's the code / sample you say? Links below... knock yourself out.

[ example: AS3 Scripting Host Implementation ]
[ source: AS3 Scripting Host Project ]