Chapter 14 Events, Scripts and Interactivity

1
Chapter 14Events, 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 systems 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
• W3Cs 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

Property
Object
Data
Function
Event Handler
Method
15
Event Handlers

• Table 14.1
• P. 459,
• onMouseOverin_image()onMouseOutout_of_image(
  )
• Updating src property
• Improvement of animated GIFs
• Using Script
• Arrange for animation to be stared and stopped by
  a control
• onMouseOverstart-animation()onMouseOutstop_a
  nimation()
• setTimeout (code, delay)
• Execute code after a delay

16
Scripts and Stylesheets

• Content appearance stylesheets
• Altering stylesheets
• documet.all.intro.style.colorblack
• Docuemt.stylesheet0.rules1.style.colorfuchs
  ia
• stylesheet0, 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
• Dreamweavers behaviors palette (Fig. 14.4)
• Behavior groups
• Display status message and popup message display
• Check browsers 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
• Directors 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 ltOBJECTgt
• Formatted and positioned using CSS
• Java VM
• Interpreter
• Security may not read or write local files
• Java 2D, Java 3D, Java Sound