Chapter 14Chapter 14Events, Scripts and Events, Scripts and

InteractivityInteractivity

Key PointsKey Points

► ActionsActions, usually implemented by , usually implemented by scriptsscripts are executed in are executed in response to response to eventsevents, such as mouse clicks or key presses, , such as mouse clicks or key presses, thus providing enhanced thus providing enhanced interactivityinteractivity. .

► The standard for World Wide Web client-side scripting cThe standard for World Wide Web client-side scripting comprises the omprises the ECMAScriptECMAScript language, which interacts wit language, which interacts with elements of the Web page and browser via objects in th elements of the Web page and browser via objects in the W3C he W3C Document Object Model (DOM)Document Object Model (DOM). .

► Fourth generation Web browsers only provide partial anFourth generation Web browsers only provide partial and incompatible implementations of these standards. d incompatible implementations of these standards. JaJavaScriptvaScript and and dynamic HTMLdynamic HTML are loosely used to refer to are loosely used to refer to the available implementations. the available implementations.

Key PointsKey Points

► ECMAScript is ECMAScript is object-basedobject-based, and the DOM provi, and the DOM provides des host objectshost objects that correspond to the docum that correspond to the document elements of a Web page, so that these can bent elements of a Web page, so that these can be created and changed dynamically by scripts. e created and changed dynamically by scripts.

► Event handlersEvent handlers are associated with elements an are associated with elements and events by event-related HTML attributes, such d events by event-related HTML attributes, such as as onClickonClick and and onMouseOveronMouseOver. They are used to . They are used to implement implement rollover buttonsrollover buttons and to add and to add animatanimationion to Web pages. to Web pages.

Key PointsKey Points

►Host objects corresponding to Host objects corresponding to stylestyle elem elements and ents and stylesheetsstylesheets allow scripts to alter allow scripts to alter the appearance of a page dynamically. the appearance of a page dynamically.

►BehavioursBehaviours are parameterized actions pr are parameterized actions provided by an authoring system (e.g. Directovided by an authoring system (e.g. Director, Dreamweaver or Flash) to implement a or, Dreamweaver or Flash) to implement a limited repertoire of actions without scriplimited repertoire of actions without scripting. ting.

Key PointsKey Points

► When a When a timelinetimeline is used to organize a multimedi is used to organize a multimedia production, actions can be associated with a production, actions can be associated with titime-basedme-based events, such as the playback head en events, such as the playback head entering a particular frame, and can control playbatering a particular frame, and can control playback by causing a jump to a particular frame. ck by causing a jump to a particular frame.

► XtrasXtras can be used to extend Director and embed can be used to extend Director and embed custom C++ code in a Director movie. custom C++ code in a Director movie. AppletsApplets ca can be used to embed executable content in Web n be used to embed executable content in Web pages. pages.

IntroductionIntroduction

►OSOS Event-driven systemEvent-driven system

►Double-clicksDouble-clicks

► Associate actions with eventsAssociate actions with events► A pre-defined set of actions (behaviors) to A pre-defined set of actions (behaviors) to

perform common tasks, such as opening a fileperform common tasks, such as opening a file► Scripting languageScripting language

A small programming language with facilities for A small programming language with facilities for controlling user interface elements and controlling user interface elements and multimedia objects. multimedia objects.

Reasons for Using ActionsReasons for Using Actions

►Reason for associating actions with Reason for associating actions with eventsevents To provide interactivityTo provide interactivity

►Users can control the system’s behavior.Users can control the system’s behavior.►Users can direct the flow of information that they Users can direct the flow of information that they

receive.receive.

►Events that occur at specific timesEvents that occur at specific times Allow time-based behavior and Allow time-based behavior and

synchronization to be introduced into systemssynchronization to be introduced into systems Actions in timelineActions in timeline

►Provide non-linearityProvide non-linearity

Scripting FundamentalsScripting Fundamentals

►C++, JavaC++, Java Control structures, abstraction mechanisms, aControl structures, abstraction mechanisms, a

nd built-in data typesnd built-in data types► Scripting languagesScripting languages

Some Control structures and a few basic typesSome Control structures and a few basic types May provides some abstraction mechanismsMay provides some abstraction mechanisms Provides objects and data types that belong tProvides objects and data types that belong t

o some ‘existing system’o some ‘existing system’►Relational database systemRelational database system

Relations and tuplesRelations and tuples

Multimedia ScriptingMultimedia Scripting

► Provide objects corresponding to the elements of a multProvide objects corresponding to the elements of a multimedia productionimedia production

► It is not adequate to provide a type for each medium- teIt is not adequate to provide a type for each medium- text, sound, video, and so on- the types of objects are availxt, sound, video, and so on- the types of objects are available need to take account of the way in which media objable need to take account of the way in which media objects are combined within the production.ects are combined within the production.

► A scripting language for use with XML or HTML, objects A scripting language for use with XML or HTML, objects must be provided that correspond to document elementmust be provided that correspond to document elements and to elements of user interface such as windows.s and to elements of user interface such as windows. Time-line based system, such as FlashTime-line based system, such as Flash

► Objects= frames and various object elements that may apear inside Objects= frames and various object elements that may apear inside themthem

Multimedia ScriptingMultimedia Scripting

►Scripting languageScripting language Perform computations on the attributes of Perform computations on the attributes of

objectsobjects Create new objectsCreate new objects Affecting their appearance and behaviorAffecting their appearance and behavior Triggered by eventTriggered by event

WWW Client-side ScriptingWWW Client-side Scripting

► Server-sideServer-side Enable an HTTP server to communicate with other resources, suEnable an HTTP server to communicate with other resources, su

ch as databases, and incorporate data obtained from them into ch as databases, and incorporate data obtained from them into its response.its response.

Web pages dynamically form time-varying dataWeb pages dynamically form time-varying data► Client-sideClient-side

Appearance and behavior of Web pagesAppearance and behavior of Web pages Allowing code has been downloaded from Internet to rin on youAllowing code has been downloaded from Internet to rin on you

r system.r system. Scripts cannot Scripts cannot

► access any local resources such as filesaccess any local resources such as files► make any network connections make any network connections ► Their interaction with server is limited to requesting new resources Their interaction with server is limited to requesting new resources

and posting information form HTML forms.and posting information form HTML forms.► Secure but limitedSecure but limited

Provide feedback to userProvide feedback to user

ScriptingScripting

► First scripting: Netscape LiveScriptFirst scripting: Netscape LiveScript Change to JavaScriptChange to JavaScript

► Microsoft: JscriptMicrosoft: Jscript► ECMAECMA

(European Computer Manufactures’ Associatio(European Computer Manufactures’ Association)n) ECMAScript based on JavaScript and JscriptECMAScript based on JavaScript and Jscript Object-basedObject-based Objects= Objects=

► elements in HTEM document and Styleselements in HTEM document and Styles►Components of browser interfaceComponents of browser interface

► WW33C’s Document Object Model (DOM)C’s Document Object Model (DOM)

ECMAScript SyntaxECMAScript Syntax►Untyped languageUntyped language

The same variable can hold a string at one timThe same variable can hold a string at one time, a number at another and a boolean at anote, a number at another and a boolean at another.her.

►Unicode charactersUnicode characters►Arrays, objectsArrays, objects►Built-in objects: Math, Date, host objectsBuilt-in objects: Math, Date, host objects

ObjectsObjects

► Creation and manipulation of objectsCreation and manipulation of objects► Not organized into hierarchical classesNot organized into hierarchical classes► PropertiesProperties

Named data itemsNamed data items► MethodsMethods

FunctionsFunctions► P. 455P. 455► document.write: dynamically generated contentdocument.write: dynamically generated content► Fig. 14.2: Prompting for user , P.457Fig. 14.2: Prompting for user , P.457

Data

Function

Property

Method

Object

Event Handler

Event HandlersEvent Handlers

► Table 14.1Table 14.1► P. 459, P. 459,

onMouseOver=“in_image()”onMouseOver=“in_image()”onMouseOut=“out_of_image()”onMouseOut=“out_of_image()”

► Updating src propertyUpdating src property Improvement of animated GIFsImprovement of animated GIFs Using ScriptUsing Script

►Arrange for animation to be stared and stopped by a controlArrange for animation to be stared and stopped by a control►onMouseOver=“start-animation()”onMouseOver=“start-animation()”

onMouseOut=“stop_animation()”onMouseOut=“stop_animation()”► setTimeout (code, delay)setTimeout (code, delay)

Execute code after a delayExecute code after a delay

Scripts and StylesheetsScripts and Stylesheets►Content appearance: stylesheetsContent appearance: stylesheets►Altering stylesheetsAltering stylesheets

documet.all.intro.style.color=‘black’documet.all.intro.style.color=‘black’ Docuemt.stylesheet[0].rules[1].style.color=Docuemt.stylesheet[0].rules[1].style.color=

‘fuchsia’‘fuchsia’►stylesheet[0], first STYLE, starting at zerostylesheet[0], first STYLE, starting at zero

Absolute PositioningAbsolute Positioning

Text animationText animation

►SPAN= layerSPAN= layer Apply positioning styleApply positioning style

►Layer 1: (40,35), Layer 2: (540,300)Layer 1: (40,35), Layer 2: (540,300)visibility property= hiddenvisibility property= hidden

►P. 466P. 466

BehaviorBehavior

►A set of parameterized actionsA set of parameterized actions►A suitable interface for attaching behavior A suitable interface for attaching behavior

to elements of productionto elements of production Much of necessary for scripting is removedMuch of necessary for scripting is removed Without having to acquire programming skillsWithout having to acquire programming skills Parameterized actions= behaviorParameterized actions= behavior ECMAScript behaviorECMAScript behavior

► Behaviors in PDF is fixedBehaviors in PDF is fixed► Modern browserModern browser

Arbitrary behaviors can be written in scripting languaArbitrary behaviors can be written in scripting languagege

Macromedia DreamweaverMacromedia Dreamweaver►Dreamweaver’s behaviors palette (Fig. 14.4)Dreamweaver’s behaviors palette (Fig. 14.4)►Behavior groupsBehavior groups

Display status message and popup message displayDisplay status message and popup message display Check browser’s capabilitiesCheck browser’s capabilities

► Check Browser, Check PluginCheck Browser, Check Plugin Control over browsers and page elementsControl over browsers and page elements

► Control shockwave or Flash, Control sound behaviorsControl shockwave or Flash, Control sound behaviors Concerned with images and motion graphicsConcerned with images and motion graphics

► Swap Image, Preload ImagesSwap Image, Preload Images

►Show-Hide LayersShow-Hide Layers►Change PropertyChange Property►Drag LayerDrag Layer

add basic drag and drop functionalityadd basic drag and drop functionality

Timeline Scripting and Timeline Scripting and BehaviorBehavior

► Scripting: interactivity and non-linearityScripting: interactivity and non-linearity► FlashFlash► An action is attached to a key frame simply by An action is attached to a key frame simply by

selecting the key frame and appropriate menu selecting the key frame and appropriate menu command, choosing one of the available behavior, command, choosing one of the available behavior, and entering values for its parametersand entering values for its parameters

► The action is trigged when playback reached the The action is trigged when playback reached the frame to which it is attached.frame to which it is attached.

► Button= special symbolsButton= special symbols Four frames= up, over, down, hit areaFour frames= up, over, down, hit area

► Timeline behaviorTimeline behavior Play, Stop, Go ToPlay, Stop, Go To

FlashFlash

►Timeline with selections, Fig. 14.5Timeline with selections, Fig. 14.5►Levels, Fig. 14.6Levels, Fig. 14.6►Tell TargetTell Target

Sent an event from one object to otherSent an event from one object to other Movie controlMovie control

►DreamweaverDreamweaver Offer timeline interfaceOffer timeline interface Timeline= behavior channel, allows actions to Timeline= behavior channel, allows actions to

be attached to any framebe attached to any frame Several layers can be controlled by the same tSeveral layers can be controlled by the same t

imeline.imeline. Several different timelines can be attached to Several different timelines can be attached to

the same page.the same page. Hand-crafted scripting vs prefabricated behavHand-crafted scripting vs prefabricated behav

iorsiors

►Dreamweaver only ships with a behavior tDreamweaver only ships with a behavior that causes a timeline to go to a specific nuhat causes a timeline to go to a specific numbered frame, not to the next or previous mbered frame, not to the next or previous one.one.

►P. 478, movie control, up(), down()P. 478, movie control, up(), down()►Behavior + timelines + scriptsBehavior + timelines + scripts

= dynamic Web pages = dynamic Web pages

DirectorDirector

►DirectorDirector Combination of scripts with a timelineCombination of scripts with a timeline Provides behaviors that can be attached to Provides behaviors that can be attached to

frames or sprites to implement the same range frames or sprites to implement the same range of time-based actions and control as Flash.of time-based actions and control as Flash.

Message Sprite behaviorMessage Sprite behavior► like Tell Target in Flashlike Tell Target in Flash►Control one sprite from anotherControl one sprite from another

Compose behaviors by combining actionsCompose behaviors by combining actions Scripting language: LingoScripting language: Lingo

►English-likeEnglish-like

LingoLingo

►CategoriesCategories Score scriptsScore scripts

►Same as behaviorSame as behavior

Scripts of membersScripts of members Movie scriptsMovie scripts Parent scripts, newParent scripts, new

Beyond ScriptingBeyond Scripting

► ScriptsScripts Lack features: such as file input and outputLack features: such as file input and output

► Director’s XtrasDirector’s Xtras Code modules in C or C++Code modules in C or C++ Form support for new media types to networking and Form support for new media types to networking and

database managementdatabase management Four typesFour types

►Transition Xtras: dissolves, wipes,…Transition Xtras: dissolves, wipes,…►Tool Xtras: new functions to authoring environmentTool Xtras: new functions to authoring environment►Sprite Xtras: new classes to cast membersSprite Xtras: new classes to cast members►Scripting Xtras: new command to Lingo, such as fileio extraScripting Xtras: new command to Lingo, such as fileio extra

Prescribe interfacePrescribe interface

Java AppletsJava Applets

►Small program in JavaSmall program in Java►HTML: <OBJECT>HTML: <OBJECT>►Formatted and positioned using CSSFormatted and positioned using CSS► Java VMJava VM► InterpreterInterpreter►Security: may not read or write local Security: may not read or write local

filesfiles► Java 2D, Java 3D, Java SoundJava 2D, Java 3D, Java Sound