digital multimedia, 2nd edition nigel chapman & jenny chapman chapter 16 this presentation ©...
TRANSCRIPT
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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
© 2004, MacAvon Media Productions
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