COM531 Multimedia Technologies

1. COM531 Multimedia Technologies Lecture 7 – Flash AS and Flash Catalyst

2. What is Interactivity? • Automated response to user activity • Example applications • Reactive elements • Simulations • Tutorials • Quizzes • Interactivity in Flash: • Events call actions to be performed on targets • Defined using ActionScript

3. Managing Flash Projects • Scenes • Divide timeline into manageable sections e.g. Introduction, conclusion, index, etc. • Useful for long/complex movies • Libraries • Organise assets using folders • Share assets between projects • e.g. logos, audio/video • Movie Explorer • Overview of project structure • Access and edit assets

4. Testing Flash Movies • Bandwidth profiler • Test delivery with differentbandwidths • Identify download delays • Show streaming • Debug Movie • For validating complex scripts • Real time values for variables, movie clip properties… • Test manually • Different platforms and browsers • Different connections (e.g. modem)

5. Publish Settings • Select formats for publication • Range of formats supported • Flash, HTML, GIF, QuickTime… • Configure settings for each format • Filenames • Alignment • Size • Looping • Quality • Publish preview for each format • Test appearance and functionality

6. Publish as HTML • HTML is native language of web • Flash can automatically create HTML • Based on range of built-in templates • HTML produced not always appropriate • Change HTML of each page • Manually or with an authoring tool • Customise Flash templates • Affects all published pages

7. Flash Accessibility • Web content should be accessible to all users • Regardless of ability/disability • Issues • Visual, time-based media not suitable for all users • Requires Flash player (plug-in) • Limited support for screenreaders • Benefits • Animation can be more accessible to some users • Supports multiple media (audio, video, text…) • Vector graphics scale without deterioration • Allows keyboard access • Player ensures cross-platform consistency

8. Improving Accessibility • Provide text equivalents in HTML • For entire movie using [d]link • Provide text equivalents in Flash • Increases accessibility to screen readers • Specific software required to process • Only for movie clips • Provide keyboard controls to movies (play, stop…) • Publish movie content in range of formats • Images, text, audio/video…

9. Object-Oriented Scripting • ActionScript is an object-oriented scripting language • Scripting languages organise information into groups called classes • Classes and objects are just ways to group together chunks of information

10. Terminology • Class • Instance • Object

11. Classes & objects • Classes are groups of objects that share characteristics, e.g. rectangles • Shared characteristics allow you to create a blueprint for those objects • A software blueprint for an object is called a class

12. Object-Oriented Scripting You can create multiple instances of these classes, which are called objects Real-world analogy: “Bicycle" class You can have many objects of the same kind (e.g. A bicycle, your bicycle is just one of many bicycles in the world) Using object-oriented terminology, we say that your bicycle object is an instance of the class of objects known as bicycles

13. Object-oriented terminology Class: Defines the common characteristics of a bicycle. Like a plan Objects: Physical manifestation of bicycle class. Each object is a instance of the bicycle class

14. Instances Using the bicycle class, you can create any number of bicycle objects from the class When you create an instance of a class each instance gets its own copy of all the instance variables defined in the class

15. Instances

16. Classes & objects • Bicycles have states (current gear) • Bicycles have behaviors (change gears, brake) in common However, each bicycle's state is independent of and can be different from that of other bicycles

17. Objects vs. Classes • Objects and classes seem very similar • In the real world, it's obvious that classes are not themselves but the objects they describe • A blueprint of a bicycle is not a bicycle

18. Objects vs. Classes

19. Class & Instances in Flash

20. Class & Instance in Flash

21. Classes & objects • Classes are groups of objects that share characteristics i.e. software blueprint • Object is the physical manifestation of a class • Each object is an instance of the class

22. Action Script Script applied to an action Basic structure of an action whenSomethingHappens (input variables) { do stuff }

23. Target Event on (press) { setProperty ("MyTarget", _height, "100"); } 100 Action MyTarget 50 MyTarget ActionScript • Scripting language used in Flash to create advanced interactivity and animation • Allows the execution of different actions in a movie depending on what a user does or on what frame of the movie is being played • Similar structure and syntax to JavaScript • Example script:

24. Creating ActionScript • Does not require: • Detailed understanding of language • Hand-coding of scripts • Actions panel • Graphical interface to ActionScript • Build custom scripts using pre-written pieces of code • Define events, targets and actions • Scripts are validated automatically

25. Actionscript Fundamentals • ActionScript is a programming language • Subject to usual programming language constraints • Has its own syntax and structure

26. Some uses of ActionScript • Create multiplayer games • Create engaging, user-aware navigation • Send data to middleware, like PHP and Cold Fusion • Communicate with JavaScript

27. Benefits of using ActionScript • Allow for a more responsive Web site • Allows inclusion of dynamic data • Make your site more accessible to readers

28. ActionScript limitations • ActionScript can't talk directly to a database. Middleware like PHP, Cold Fusion, or ASP is needed to do this.** • Can't use exception handling i.e. try, throw, or catch (Error handling in Javascript) • Exceptions provide error-handling capabilities for programs. An exception is an event that occurs during the execution of a program that disrupts the normal flow of instructions **This functionality can now be achieved using Macromedia Flash Remoting

29. ActionScript Functionality Two ways to add ActionScript to Flash movie • Frame Actions – code associated with particular keyframes of the movie • Custom classes – code that resides in an external file • Flash component interactions create events and the associated actions are programmed as event handler functions • Event model used is DOM2, so event handlers are registered with addEventListener

30. Events • Events call an action • Dependent on user activity or autonomous • Single event can trigger multiple actions • Mouse events • Mouse movement, button clicks • Keyboard events • Keystrokes, text entry • Frame events • Occur automatically on entering frame • Attached to timeline of movie or movie-clip

31. Actions • Wide range of pre-defined actions • Movie control • Stop, play, go to frame, etc. • Movie Clip control • Set property, play/stop, etc. • Parameters can be customised • Actions can be: • Performed on multiple targets • Conditional (If, then, else…)

32. myTarget2 myTarget3 myTarget1 Targets • Target is object on which action is performed • Current movie • Movie-clip instances • External applications – e.g. browsers • Defining targets • If no target defined action affects current object • Movie clip instances require unique name • Define path from current object to target

33. Learning Interactions • Templates for creating interactive assessment • Range of question types available • MCQ, drag-and-drop, hotspot, etc. • Parameters can be customised • Question, answers, feedback, etc. • Use Clip Parameters panel • Submissions can be tracked • Data sent to LMS • Quiz templates • Integrate a set of learning interactions

34. Action Buttons • Means of providing movie controls • e.g. Play, Stop, Rewind • Button states • Pre-defined keyframes in timeline • Can contain layers, animation, images, etc. • Built-in actions can be attached to buttons • Range of button sets provided by Macromedia

35. Object and Frame Actions Two basic kinds of actions in Flash • Object actions • Frame actions

36. Object Actions - Movie Clips • Object actions are chunks of ActionScript code that are attached to an object • Usually an object is a symbol that is either a button or a movie clip • Graphic symbols don’t have actions

37. Object and Frame Actions

38. Object Actions An object action is associated with an instance of a symbol, not with the symbol itself

39. Object Actions Both shapes are instances of the same movie clip symbol, but only one of them has an action attached to it The function is always attached to this object instance, no matter where in the movie it appears Object actions aren’t concerned with what frame the movie is currently on (as long as the object actually exists in the movie at that frame)

40. Event handlers The function you saw was a “onClipEvent” and is known as an event handler An event is something that happens: i.e. a movie loads, user presses a mouse button An event handler constantly looks for events and lets ActionScript know when one of them occurs

41. Event handlers

42. Typical Event handler • OnmouseDown refers to what the mouse button is doing • If mouse button was pressed, then onClip-Event(mouseDown) is called, and everything inside the first set of curly braces is executed OnmouseDown { startDrag(this); }

43. Object Actions Drag fish

44. Methods • startDrag is what's called a method • A method does something In this case drag what was clicked

45. Methods A method is something an object can do or something you can do to an object. For example, here are some things methods can do: • Stop a movie clip • Go to a certain frame and start playing there • See if a movie clip is over another movie clip • Hide the mouse cursor • Set the volume of a sound being played

46. Targets • Notice that we didn't use startDrag(), but used startDrag(this). • The startDrag method requires a target i.e., it needs to know what it should start dragging

47. “this” command • The easiest way to reference the current object is just to call it “this” • The other way to refer to the object is absolute i.e. startDrag(_root.drag_fish) • Where drag_fish is the name of the instance of the fish symbol • The _root part means "start looking from the top of the movie hierarchy"

48. Object actions: onClipEvent Object actions on a movie clip have to be inside of an onClipEvent. Possible events are: • load • unload • enterFrame • mouseMove • mouseDown • mouseUp • keyDown • keyUp

49. Object Actions: Buttons The only real difference between actions that are attached to buttons instead of movie clips is that the event handler for buttons is “on” instead of onClipEvent Otherwise, they're pretty much the same

50. Object Actions Buttons The events for on are: • press • release • releaseOutside • rollOver • rollOut • dragOver • dragOut • keyPress