Download presentation
Presentation is loading. Please wait.
Published byCamron Bradford Modified over 9 years ago
1
Chapter 14 Events, Scripts and Interactivity
2
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.
3
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.
4
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.
5
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.
6
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.
7
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
8
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
9
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
10
Multimedia Scripting ► Scripting language Perform computations on the attributes of objects Create new objects Affecting their appearance and behavior Triggered by event
11
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
12
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)
13
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
14
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
15
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
16
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
17
Text animation ► SPAN= layer Apply positioning style ► Layer 1: (40,35), Layer 2: (540,300) visibility property= hidden ► P. 466
18
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
19
► 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
20
► Show-Hide Layers ► Change Property ► Drag Layer add basic drag and drop functionality
21
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
22
Flash ► Timeline with selections, Fig. 14.5 ► Levels, Fig. 14.6 ► Tell Target Sent an event from one object to other Movie control
23
► 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
24
► 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
25
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
26
Lingo ► Categories Score scripts ► Same as behavior Scripts of members Movie scripts Parent scripts, new
27
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
28
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.