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

2. 536
Event-Driven Systems
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

3. 537–538
Scripting Languages
'…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

4. 538–539
ECMAScript
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)

5. Values and Expressions
540–543
Values and Expressions
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

6. Variables Named locations that can hold a value
543–544
Variables
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;

7. Assignment = is the assignment operator
544–545
Assignment
= 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

8. 545–546
Control Structures
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 { … }

9. 547
Conditionals
var commission = amount * 0.1; // 10% = 0.1 if (commission < 10) payment = 0; else payment = commission;
Note use of comment
Alternative version
payment = amount * 0.1; if (payment < 10) payment = 0;

10. Loops while (E) S for (initialization; condition; increment) S
546–549
Loops
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; }

11. 548–549
Loop Examples
var ss = "", i = 0; while (i < repetitions) { ss += s; i; }
or, equivalently:
for (var ss = "", i = 0; i < repetitions; ++i) ss += s;

12. Arrays Aggregate data structures
549
Arrays
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

13. 549
Indexing Arrays
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

14. Array Operations Create an array: a = new Array();
550
Array Operations
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

15. 551
Iterating Over Arrays
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

16. Associative Arrays Array indexes may be strings
551–552
Associative Arrays
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]

17. Functions Form of abstraction
553
Functions
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

18. Function Definition function (formal parameters) { body }
553–554
Function Definition
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

19. 553–554
Function Example
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);

20. Objects ECMAScript is object-based An object comprises
554–555
Objects
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

21. 556–557
Built-in Objects
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

22. 558
WWW Client Scripting
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

23. 558–559
The document Object
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

24. Scripts in Web Pages Use the script element to embed a script
559–561
Scripts in Web Pages
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

25. 562
Event Handlers
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

26. Rollovers Implemented by changing the src attribute of an img element
562–563
Rollovers
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

27. Rollover Example Handlers defined in document head:
563
Rollover Example
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" />

28. Scripts and Stylesheets
566–567
Scripts and Stylesheets
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'

29. 570–573
Behaviours
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

30. 573–574
Scripting in Flash
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

31. Frame Scripts Attached to any keyframe
575–576
Frame Scripts
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

32. Loop 6 Times Initialization at start of movie var loop_count=0;
575–576
Loop 6 Times
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");

33. Button Symbols Type of symbol that responds to user input
576–577
Button Symbols
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

34. 577–578
Button Actions
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

35. 579
Movie Clip Actions
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

36. Movie Clip Objects Scripts can control the behaviour of movie clips
579–583
Movie Clip Objects
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