Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 16 This presentation © 2004, MacAvon Media Productions Scripting & Interactivity

Digital Multimedia, 2nd editionNigel Chapman & Jenny Chapman

Chapter 16

This presentation © 2004, MacAvon Media Productions

Scripting & Interactivity

© 2004, MacAvon Media Productions

16

• Associate actions with events, so when the user does something, something happens in response (interactivity)

• Most events initiated by user actions

• Mouse clicks, mouse movements, key presses, &c

• Actions defined by little programs (scripts) in a scripting language

Event-Driven Systems

536


16

• '…a programming language that is used to manipulate, customize, and automate the facilities of an existing system.' [ECMAScript Specification]

• Provide control structures and basic types for computation, plus objects and data types belonging to some host system

• e.g. JavaScript: core language plus objects representing browser window, document, etc

Scripting Languages

537–538


16

• Standard based on JavaScript and JScript (Netscape and Microsoft scripting languages for WWW)

• Produced by European Computer Manufacturers' Association (ECMA)

• Only defines a core language, which is not computationally self-sufficient

• Must be augmented with host objects to manipulate a host system

• e.g. JavaScript = ECMAScript + host objects for a Web browser (W3C DOM)

ECMAScript

538–539


16

• Three types: number, string and Boolean

• Numbers and arithmetic follow usual rules, using C-like operators (+, -, *, /, %)

• Internally all arithmetic is double-precision floating point

• String literals in " " or ' ', usual \ escapes, + used as concatenation operator

• Boolean values are true or false; combine with Boolean operators (!, &&, ||)

• Results of comparisons are Boolean

Values and Expressions

540–543


16

• Named locations that can hold a value

• ECMAScript variables are untyped

• The same variable can hold a number, string or Boolean at different times

• No need to declare variables before use, but you can

• var book = "Digital Multimedia", edition = 2;

Variables

543–544


16

• = is the assignment operator

• Simple assignment: variable = expression;

• Left hand side can be more complicated

• Compound assignment operators +=, *= etc provide shorthand for common pattern:

• x += a is equivalent to x = x+ a etc

• x++ and ++x are equivalent to x += 1

• Pre- and post-increment

Assignment

544–545


16

• Sequence, iteration (loops), selection (conditionals – if…)

• S1 ; S2; …

• ; is a statement terminator

• if (E) S1 else S2

• else S2 may be omitted

• S1 and S2 may be blocks – sequences within { … }

Control Structures

545–546


16

•var commission = amount * 0.1; // 10% = 0.1if (commission < 10) payment = 0;else payment = commission;

• Note use of comment

• Alternative version

•payment = amount * 0.1; if (payment < 10) payment = 0;

Conditionals

547


16

• while (E) S

• for (initialization; condition; increment) S

• For-loop is a neater and more compact equivalent for the common pattern:

• initialization;while (condition){ S ; increment; }

Loops

546–549


16

•var ss = "", i = 0;while (i < repetitions) { ss += s; ++i; }

•or, equivalently:

•for (var ss = "", i = 0; i < repetitions; ++i) ss += s;

Loop Examples

548–549


16

• Aggregate data structures

• Collection of values that can be treated as a single entity and may be assigned to a variable

• An array is an aggregate data structure consisting of a sequence of values

• Each element of the array can be identified by a numerical index – its position in the sequence

Arrays

549


16

• Array a, a[0], a[1], a[2],… are its first, second, third,… elements

• N.B. Index values start at 0, not 1

• If E is any expression with a numerical value of 0 or more, a[E] gives the value of the array element at the corresponding position

• e.g. if x = 9, a[2*x + 1] is the same as a[19], but the value of x can be computed dynamically

Indexing Arrays

549


16

• Create an array:

• a = new Array();

• No need to specify the number of elements, the array will grow as needed

• Number of elements in a is a.length

• Highest element is a[a.length-1]

• a[a.length] is the first free element

Array Operations

550


16

• Use loops of the form:for (var i = 0; i < a.length; ++i)

• For example:

var total_users = 0;for (var i = 0; i < browser_users.length; ++i) total_users += browser_users[i];var mean_users = total_users/browser_users.length

Iterating Over Arrays

551


16

• Array indexes may be strings

• Implement lookup tables – mapping from strings to values

• month_values["Jan"] = 0; month_values["Feb"] = 1;month_values["Mar"] = 2;

• Use same indexing notation as numerically indexed arrays:

• month_values[month_name]

Associative Arrays

551–552


16

• Form of abstraction

• Give a name to a computation (define a function), perform the computation by using the name (call the function)

• Black box

• Arguments ⇒ Result

Functions

553


16

• function (formal parameters) { body }

• Formal parameters behave like variables within function body

• Values of arguments are assigned to the formal parameters when the function is called

• Body may include a return statement; the value of the following expression is the result

Function Definition

553–554


16

•function rake_off(amount) { var payment; var commission = amount * 0.1; if (commission < 10) payment = 0; else payment = commission; return payment; }

•var year_total = 12*rake_off(11450);

Function Example

553–554


16

• ECMAScript is object-based

• An object comprises

• A collection of named data items, known as properties

• A collection of operations (functions), known as methods

• Use dot notation to access properties and methods: the_win.x_pos, the_win.close(), etc

Objects

554–555


16

• Math

• Properties are useful constants, such as Math.PI, Math.SQRT2, Math.E

• Methods provide trig functions, exponentials and logs, random numbers,…

• Array

• All arrays inherit properties and methods, e.g. Array.length

• String

• Useful methods for operating on strings, inherited by all strings

Built-in Objects

556–557


16

• Scripts can modify browser's display in response to user events (e.g. rollovers), validate form input

• W3C Document Object Model (DOM) defines a language-independent, abstract interface to Web browser

WWW Client Scripting

558


16

• document provides an interface to the HTML document currently being displayed

• Properties hold title and elements of the HTTP request (URL, referrer, etc)

• write method writes its argument into the current document

• Dynamically generated content

• getElementById returns an object corresponding to an element with an id

The document Object

558–559


16

• Use the script element to embed a script

•<body><script type="text/javascript">document.write('<h1>' + document.title + '</h1>');</script></body>

• Script is executed at the point it is encountered, its output replaces the script element

• Scripts may be placed in the document's head

Scripts in Web Pages

559–561


16

• Elements may have special attributes, whose name identifies a class of events, value is a piece of code to execute when the event occurs

• onClick, onMouseOver, onKeyPress, …

• Often the value is a call to a function (event handler)

• Usually defined in a script in the document head

Event Handlers

562


16

• Implemented by changing the src attribute of an img element

• The document.images array contains objects for all images in the document

• Use onMouseOver and onMouseOut handlers to change the image as the cursor moves over and leaves the image

Rollovers

562–563


16

• Handlers defined in document head:

•function in_image() { document.images['circlesquare'].src = 'images/circle.gif';}function out_of_image() { document.images['circlesquare'].src = 'images/square.gif';}

• Trigger element

•< img src="images/square.gif" alt="square or circle" onMouseOver="in_image()" onMouseOut="out_of_image()" id="circlesquare" />

Rollover Example

563


16

• Each element's object has a style property, which has properties corresponding to the styles applied to the element

• By assigning to properties of the style, the element's appearance, position etc can be changed

•document.getElementById('intro').style.color = 'black'

Scripts and Stylesheets

566–567


16

• For common tasks, remove the necessity for scripting by providing parameterized actions, known as behaviours

• Behaviour is an abstraction of a class of actions (e.g. display a message); specific action is generated by providing values for the behaviour's parameters (e.g. text of a message)

• Authoring systems (Dreamweaver etc) provide an interface for applying behaviours and setting parameter values

Behaviours

570–573


16

• Flash's ActionScript language is ECMAScript with a set of host objects corresponding to elements of Flash movies

• Also has objects for analyzing XML data, communicating with servers, … for building Web applications with Flash front-ends

• Use Flash's Actions panel to create scripts

• Just type code, or build scripts by adding constructs from a list and supplying parameters

Scripting in Flash

573–574


16

• Attached to any keyframe

• Create a layer for scripts with keyframes where needed

• Define functions in a dummy frame at start of movie

• Executed when the playhead enters the frame

• Modify order of playback with goToAndPlay etc functions

Frame Scripts

575–576


16

• Initialization at start of movie

•var loop_count=0;

• Label start of loop loop

• Script attached to last frame of loop

•if (++loop_count < 6) gotoAndPlay("loop");

Loop 6 Times

575–576


16

• Type of symbol that responds to user input

• Somewhat redundant now, but originally the only way to do so, and often convenient

• Animations with exactly four frames

• Up, Over, Down and Hit

• First three correspond to states of the button, Hit defines the area in which it responds to mouse events

Button Symbols

576–577


16

• Create instances of button symbols by dragging on to the stage

• Attach event handlers to button instances

• Events: press, release, releaseOutside, rollOver, rollOut, dragOver, dragOut, keyPress

• Visual rollover effect happens automatically if Up and Down frames are different

• Conventional button control just needs on(release) { … } handler

Button Actions

577–578


16

• Any movie clip can receive events and have scripts attached to it

• Slightly different, more general set of events than for buttons

• As well as user input, movie clips can also respond to events related to loading and unloading and the receipt of data

Movie Clip Actions

579


16

• Scripts can control the behaviour of movie clips

• Possibility of interactive animation

• If you want to control a clip, you must give it an instance name

• Can then call methods and access properties using the instance name and dot notation

• theClip.stop()

• theClip._alpha

Movie Clip Objects

579–583

Documents

Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 16 This presentation © 2004, MacAvon Media Productions Scripting & Interactivity