The ActionScript Markup Language

Size: px

Start display at page:

Download "The ActionScript Markup Language"

Peregrine Hudson
5 years ago
Views:

1 /[PLT]*/ presents: The ActionScript Markup Language Nathan Rogan Shaun Salzberg Anand Rajeswaran Sergio Biasi

2 Team Member : Nathan Role : Project Manager System Architect System Integrator Programmer

3 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 Adobe Flash SWF file. HTML CSS JavaScript ASML Compiler Flash SWF File

4 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

5 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.

6 Team Member : Anand Role : System Architect Tester and Validator Programmer

7 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_<id> 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

8 Object Code Structure  <html> <head> <script src="mootools.js /><script> <script src="asml_somename.js type="text/javascript"></script> <link href="asml_somename.css" type="text/css"></link>  </head> <body> <script src=" </body> </html>  <div id="asml_somename" > <! HTML-style ASML code --> <script>asml_somename();</script> </div>

9 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 }

10 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 }

11 Team Member : Shaun Role : System Architect Tester and Validator Programmer

12 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

13 The ASML Compilation Process HTML CSS JS Interface.swf ASML_MAIN.js Style Code Logic Code Object Code ASML Translator YourFlashFile.swf Adobe Flex Action Script yourdomain.com wecompile.com

14 Team Member : Sergio Role : Tools Guru Tester and Validator Programmer

15 Tools Used Lexical Scanner Specification (asml.l) Syntactical Parser Specification (asml.y) Flex Bison lex.yy.c Other C code asml_tab.h asml_tab.c GCC SWF Adobe Flex ActionScript (.as) ASML Translator ASML Source File

16 Tools Used Team Member Environment Flex Bison GCC Nathan Windows Vista Anand SunOS Shaun CYGWIN Sergio Windows XP

17 What We Learned Parsing and code generation with Flex and Bison ActionScript (fortunately, no longer needed) How to work remotely and read many, many s What all but one of our team members looks like

18 A Working Example

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks