Chapter 14 Events, Scripts and Interactivity

Key Points ► Actions, usually implemented by scripts are executed in response to events, such as mouse clicks or key presses, thus providing enhanced interactivity. ► The standard for World Wide Web client-side scripting comprises the ECMAScript language, which interacts with elements of the Web page and browser via objects in the W3C Document Object Model (DOM). ► Fourth generation Web browsers only provide partial and incompatible implementations of these standards. JavaScript and dynamic HTML are loosely used to refer to the available implementations.

Key Points ► ECMAScript is object-based, and the DOM provides host objects that correspond to the document elements of a Web page, so that these can be created and changed dynamically by scripts. ► Event handlers are associated with elements and events by event-related HTML attributes, such as onClick and onMouseOver. They are used to implement rollover buttons and to add animation to Web pages.

Key Points ► Host objects corresponding to style elements and stylesheets allow scripts to alter the appearance of a page dynamically. ► Behaviours are parameterized actions provided by an authoring system (e.g. Director, Dreamweaver or Flash) to implement a limited repertoire of actions without scripting.

Key Points ► When a timeline is used to organize a multimedia production, actions can be associated with time- based events, such as the playback head entering a particular frame, and can control playback by causing a jump to a particular frame. ► Xtras can be used to extend Director and embed custom C++ code in a Director movie. Applets can be used to embed executable content in Web pages.

Introduction ► OS  Event-driven system ► Double-clicks ► Associate actions with events ► A pre-defined set of actions (behaviors) to perform common tasks, such as opening a file ► Scripting language  A small programming language with facilities for controlling user interface elements and multimedia objects.

Reasons for Using Actions ► Reason for associating actions with events  To provide interactivity ► Users can control the system’s behavior. ► Users can direct the flow of information that they receive. ► Events that occur at specific times  Allow time-based behavior and synchronization to be introduced into systems  Actions in timeline ► Provide non-linearity

Scripting Fundamentals ► C++, Java  Control structures, abstraction mechanisms, and built-in data types ► Scripting languages  Some Control structures and a few basic types  May provides some abstraction mechanisms  Provides objects and data types that belong to some ‘existing system’ ► Relational database system  Relations and tuples

Multimedia Scripting ► Provide objects corresponding to the elements of a multimedia production ► It is not adequate to provide a type for each medium- text, sound, video, and so on- the types of objects are available need to take account of the way in which media objects are combined within the production. ► A scripting language for use with XML or HTML, objects must be provided that correspond to document elements and to elements of user interface such as windows.  Time-line based system, such as Flash ► Objects= frames and various object elements that may apear inside them

Multimedia Scripting ► Scripting language  Perform computations on the attributes of objects  Create new objects  Affecting their appearance and behavior  Triggered by event

WWW Client-side Scripting ► Server-side  Enable an HTTP server to communicate with other resources, such as databases, and incorporate data obtained from them into its response.  Web pages dynamically form time-varying data ► Client-side  Appearance and behavior of Web pages  Allowing code has been downloaded from Internet to rin on your system.  Scripts cannot ► access any local resources such as files ► make any network connections ► Their interaction with server is limited to requesting new resources and posting information form HTML forms. ► Secure but limited  Provide feedback to user

Scripting ► First scripting: Netscape LiveScript  Change to JavaScript ► Microsoft: Jscript ► ECMA (European Computer Manufactures’ Association)  ECMAScript based on JavaScript and Jscript  Object-based  Objects= ► elements in HTEM document and Styles ► Components of browser interface ► W 3 C’s Document Object Model (DOM)

ECMAScript Syntax ► Untyped language  The same variable can hold a string at one time, a number at another and a boolean at another. ► Unicode characters ► Arrays, objects ► Built-in objects: Math, Date, host objects

Objects ► Creation and manipulation of objects ► Not organized into hierarchical classes ► Properties  Named data items ► Methods  Functions ► P. 455 ► document.write: dynamically generated content ► Fig. 14.2: Prompting for user, P.457 Data Function Property Method Object Event Handler

Event Handlers ► Table 14.1 ► P. 459,  onMouseOver=“in_image()” onMouseOut=“out_of_image()” ► Updating src property  Improvement of animated GIFs  Using Script ► Arrange for animation to be stared and stopped by a control ► onMouseOver=“start-animation()” onMouseOut=“stop_animation()” ► setTimeout (code, delay)  Execute code after a delay

Scripts and Stylesheets ► Content appearance: stylesheets ► Altering stylesheets  documet.all.intro.style.color=‘black’  Docuemt.stylesheet[0].rules[1].style.color= ‘fuchsia’ ► stylesheet[0], first STYLE, starting at zero  Absolute Positioning

Text animation ► SPAN= layer  Apply positioning style ► Layer 1: (40,35), Layer 2: (540,300) visibility property= hidden ► P. 466

Behavior ► A set of parameterized actions ► A suitable interface for attaching behavior to elements of production  Much of necessary for scripting is removed  Without having to acquire programming skills  Parameterized actions= behavior  ECMAScript behavior

► Behaviors in PDF is fixed ► Modern browser  Arbitrary behaviors can be written in scripting language  Macromedia Dreamweaver ► Dreamweaver’s behaviors palette (Fig. 14.4) ► Behavior groups  Display status message and popup message display  Check browser’s capabilities ► Check Browser, Check Plugin  Control over browsers and page elements ► Control shockwave or Flash, Control sound behaviors  Concerned with images and motion graphics ► Swap Image, Preload Images

► Show-Hide Layers ► Change Property ► Drag Layer  add basic drag and drop functionality

Timeline Scripting and Behavior ► Scripting: interactivity and non-linearity ► Flash ► An action is attached to a key frame simply by selecting the key frame and appropriate menu command, choosing one of the available behavior, and entering values for its parameters ► The action is trigged when playback reached the frame to which it is attached. ► Button= special symbols  Four frames= up, over, down, hit area ► Timeline behavior  Play, Stop, Go To

Flash ► Timeline with selections, Fig ► Levels, Fig ► Tell Target  Sent an event from one object to other  Movie control

► Dreamweaver  Offer timeline interface  Timeline= behavior channel, allows actions to be attached to any frame  Several layers can be controlled by the same timeline.  Several different timelines can be attached to the same page.  Hand-crafted scripting vs prefabricated behaviors

► Dreamweaver only ships with a behavior that causes a timeline to go to a specific numbered frame, not to the next or previous one. ► P. 478, movie control, up(), down() ► Behavior + timelines + scripts = dynamic Web pages

Director ► Director  Combination of scripts with a timeline  Provides behaviors that can be attached to frames or sprites to implement the same range of time-based actions and control as Flash.  Message Sprite behavior ► like Tell Target in Flash ► Control one sprite from another  Compose behaviors by combining actions  Scripting language: Lingo ► English-like

Lingo ► Categories  Score scripts ► Same as behavior  Scripts of members  Movie scripts  Parent scripts, new

Beyond Scripting ► Scripts  Lack features: such as file input and output ► Director’s Xtras  Code modules in C or C++  Form support for new media types to networking and database management  Four types ► Transition Xtras: dissolves, wipes,… ► Tool Xtras: new functions to authoring environment ► Sprite Xtras: new classes to cast members ► Scripting Xtras: new command to Lingo, such as fileio extra  Prescribe interface

Java Applets ► Small program in Java ► HTML: ► HTML: ► Formatted and positioned using CSS ► Java VM ► Interpreter ► Security: may not read or write local files ► Java 2D, Java 3D, Java Sound