Flash & JavaScript

Flash & JavaScript Mariela Hristova October 19, 2004 INF 385E – Fall 2004 – School of Information

Agenda • Flash • basics, uses, examples, pros & cons • JavaScript • basics, uses, examples, pros & cons Sorry for standing, but it helps me with timing.

Flash

Flash content is Animated Interactive Efficient Complex It can be found On the Web In PlayStation consoles In ATMs In handheld devices Background

Software • Macromedia MX Flash • FLASHtyper • SWiSH • MIX FX • + Various tools on the Web

Design Graphics creation Timeline for Animation Symbols for Buttons Sound effects Code Action Scripts Event Handlers Arrays Built-in Objects Functionality Publishing Options: Flash Player format, SWF format, HTML.

Embedded in HTML Uses both OBJECT and EMBED for browser compatibility Text for Flash content could come from a separate file. <object width="550 height="400"> <param name="movie" value="somefilename.swf"> <embed src="somefilename.swf" width="550" height="400"> </embed> </object> Integration with HTML

Navigation Animation Headers Web site intros Interaction Interface sliders color selection function icons Games Uses & Examples • Free Range Graphics • concept animation for publicity and activism

Pros Works well with HTML Great for internet-based applications Standards compliant Improved usability Cons Long loading times Interferes with search engines Breaks the BACK button Flawed accessibility Requires Flash Player Pros & Cons

JavaScript

Background • created by Netscape in late 1995 to allow for interactive Web pages • JavaScript is different from Java

Definition JavaScript is scripting language that is • cross-platform • object-oriented • integrated / embedded in HTML • Language Elements • Operators • Control Structures • Statements • Core Objects • Array • Date • Math

Extension: Client vs. Server • Client-Side • Objects to control a browser • Document Object Model – DOM • Server-Side • Communication with a relational database • File manipulation on a server • Continuity of information for applications

Events & Actions <HEAD> </HEAD> <BODY> <FORM> <form> F: <input type="text" name="F" value="32"> <br> C: <input type="text" name="C" value="0"> <br><input type="button" name="calc" value="calc" onClick="this.form.C.value=(5/9)* (this.form.F.value-32)"> <br> </form> </FORM> </BODY> • Basic Attributes • ONLOAD • Event Attributes • onMouseOver • onMouseOut • onClick

<html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event") } </script> </head> <body onload="message()"> </body> </html> Arrays Strings Browser objects Document objects Functions defined in HEAD or externally called in the BODY Objects

Uses & Examples Dynamic Drive Dynamic Drive DHTML & JavaScript Code library Open Cube DHTML Menu / JavaScript Menu Developer • Navigation • Animation • Calendars • Dynamic content • Syndication • Form verification & control • Browser control: mouse extras, pop-up windows, scroll bars, etc.

Pros Saves bandwidth Easy to implement Adds interaction Instant gratification Works well with HTML Cons Java plug-in required Browser-specific DOM implementations Disorienting if overdone Dubious security Pros & Cons

Conclusion Dynamic Content and Functionality What choices do we have?

References Flash Tutorial. (2004). W3Schools. Retrieved on October 16, 2004, from http://www.w3schools.com/flash/default.asp JavaScript Overview. (n.d.). Enterprise Edition Server-Side JavaScript Guide. Retrieved on October 16, 2004, fromhttp://docs.sun.com/source/816-5930-10/intro.htm#13092 Nielsen, Jakob. (2000). Flash: 99% Bad. Useit.com. Retrieved on October 16, 2004, from http://www.useit.com/alertbox/20001029.html Thiele, James. (2002). Hands-On JavaScript: Overview. Retrieved on October 15, 2004, from http://www.eskimo.com/~jet/javascript/handson/overview.htm Raynolds, Mark, et al. (1996). Special Edition Using JavaScript. Retrieved on October 15, 2004, from http://kavosh.irost.net/books/jscript/toc.htm

Flash & JavaScript