/[PLT]*/ presents:

The ActionScript Markup Language

Nathan Rogan Shaun Salzberg Anand Rajeswaran Sergio Biasi Team Member : Nathan

„ Role : Project Manager System Architect System Integrator Programmer ASML

ASML is a language that recognizes a subset of HTML, CSS, and JavaScript on a webpage with the intent of translating it into an SWF file.

HTML ASML CSS Compiler Flash SWF File JavaScript Motivation

„ Most web programmers are already familiar with HTML, CSS, and JS, but do not know ActionScript „ However, there are many benefits of using Flash over these other languages: Flash is sleek and professional-looking Flash is easily updated with dynamic content „ ASML thus allows these web designers to create Flash files for their sites without the overhead of learning ActionScript „ This has the potential to be very marketable Added Benefit

„ Further, since ASML is a pure subset of HTML, CSS, and JS, if the ASML compiler is not available for some reason, the browser rendering the page will still render something closely akin to the intended SWF file, albeit in the form of regular HTML, CSS, and JS. „ In essence, ASML fails gracefully. Team Member : Anand

„ Role : System Architect Tester and Validator Programmer Parts of an ASML Program

„ Object Code This is the HTML-style ASML code It goes in the webpage’s .html file All code is contained in a div tag marked with id = “ASML_” „ Style Code This is the CSS-style ASML code It goes in a separate .css file with the same name as the div tag id „ Logic Code This is the JavaScript-style ASML code It goes in a separate .js file with the same name as the div tag id Object Code Structure

Style Code Structure

//ASMLOBJECT_somename.css

#ASML_somename { // CSS-style styles // for the entire SWF // For example: // font-family: arial; // color: blue; } #somestyle1 { // CSS-style style attributes // for a particular object }

#somestyle2 { // CSS-style attributes // for a particular object } Logic Code Structure

// ASML_somename.js

function ASML_somename() { // JS-style code to initialize SWF }

function somefunc1() { // JS-style code }

function somefunc2() { // JS-style code } Team Member : Shaun

„ Role : System Architect Tester and Validator Programmer Supported Subsets

„ ASML-supported HTML-style objects: Tags: div, script, input, img, label, textarea, form Attributes: id, class, name, disabled, onclick, onmouseover, onmouseout, src, type, value, checked, maxlength, readonly, rows, cols, and action „ ASML-supported CSS-style attributes background-color, background-image, background-position, font-family, font-size, font-weight, color, height, width, position, left, top, z-index „ ASML-supported JavaScript-style code functions, if statements, for loops, arithemtic operators, setting of styles, innerHTML, getElementById The ASML Compilation Process

HTML ASML_MAIN.js CSS Interface. Style Code JS ASML Logic Code Translator Object Code

YourFlashFile.swf Adobe Action Flex Script

yourdomain.com wecompile.com Team Member : Sergio

„ Role : Tools Guru Tester and Validator Programmer Tools Used

Lexical Scanner Specification Flex lex.yy.c (asml.l) Other C code GCC Syntactical Parser Specification Bison asml_tab.h (asml.y) asml_tab.c

Adobe ActionScript ASML ASML SWF Flex (.as) Translator Source File Tools Used

Team Environment Flex Bison GCC Member Nathan Windows Vista 2.5.2 1.2.4 3.4.5

Anand SunOS 5.9 2.5.4 1.2.8 4.2.3

Shaun CYGWIN 2.5.2 1.2.4 3.4.4

Sergio Windows XP 2.5.2 1.2.4 4.3.0 What We Learned

„ Parsing and code generation with Flex and Bison „ ActionScript (fortunately, no longer needed) „ How to work remotely and read many, many e-mails „ What all but one of our team members looks like… A Working Example