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

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

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

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)

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

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;

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

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 { … }

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;

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; }

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;

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

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

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

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

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]

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

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

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);

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

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

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

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

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

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

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

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" />

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'

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

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

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

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");

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

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

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

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