1 / 28

Chapter 14 Events, Scripts and Interactivity

Chapter 14 Events, Scripts and Interactivity. Key Points. Actions , usually implemented by scripts are executed in response to events , such as mouse clicks or key presses, thus providing enhanced interactivity .

tekli
Download Presentation

Chapter 14 Events, Scripts and Interactivity

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 14Events, Scripts and Interactivity

  2. Key Points • Actions, usually implemented by scripts are executed in response to events, such as mouse clicks or key presses, thus providing enhanced interactivity. • The standard for World Wide Web client-side scripting comprises the ECMAScript language, which interacts with elements of the Web page and browser via objects in the W3C Document Object Model (DOM). • Fourth generation Web browsers only provide partial and incompatible implementations of these standards. JavaScript and dynamic HTML are loosely used to refer to the available implementations.

  3. Key Points • ECMAScript is object-based, and the DOM provides host objects that correspond to the document elements of a Web page, so that these can be created and changed dynamically by scripts. • Event handlers are associated with elements and events by event-related HTML attributes, such as onClick and onMouseOver. They are used to implement rollover buttons and to add animation to Web pages.

  4. Key Points • Host objects corresponding to style elements and stylesheets allow scripts to alter the appearance of a page dynamically. • Behaviours are parameterized actions provided by an authoring system (e.g. Director, Dreamweaver or Flash) to implement a limited repertoire of actions without scripting.

  5. Key Points • When a timeline is used to organize a multimedia production, actions can be associated with time-based events, such as the playback head entering a particular frame, and can control playback by causing a jump to a particular frame. • Xtras can be used to extend Director and embed custom C++ code in a Director movie. Applets can be used to embed executable content in Web pages.

  6. Introduction • OS • Event-driven system • Double-clicks • Associate actions with events • A pre-defined set of actions (behaviors) to perform common tasks, such as opening a file • Scripting language • A small programming language with facilities for controlling user interface elements and multimedia objects.

  7. Reasons for Using Actions • Reason for associating actions with events • To provide interactivity • Users can control the system’s behavior. • Users can direct the flow of information that they receive. • Events that occur at specific times • Allow time-based behavior and synchronization to be introduced into systems • Actions in timeline • Provide non-linearity

  8. Scripting Fundamentals • C++, Java • Control structures, abstraction mechanisms, and built-in data types • Scripting languages • Some Control structures and a few basic types • May provides some abstraction mechanisms • Provides objects and data types that belong to some ‘existing system’ • Relational database system • Relations and tuples

  9. Multimedia Scripting • Provide objects corresponding to the elements of a multimedia production • It is not adequate to provide a type for each medium- text, sound, video, and so on- the types of objects are available need to take account of the way in which media objects are combined within the production. • A scripting language for use with XML or HTML, objects must be provided that correspond to document elements and to elements of user interface such as windows. • Time-line based system, such as Flash • Objects= frames and various object elements that may apear inside them

  10. Multimedia Scripting • Scripting language • Perform computations on the attributes of objects • Create new objects • Affecting their appearance and behavior • Triggered by event

  11. WWW Client-side Scripting • Server-side • Enable an HTTP server to communicate with other resources, such as databases, and incorporate data obtained from them into its response. • Web pages dynamically form time-varying data • Client-side • Appearance and behavior of Web pages • Allowing code has been downloaded from Internet to rin on your system. • Scripts cannot • access any local resources such as files • make any network connections • Their interaction with server is limited to requesting new resources and posting information form HTML forms. • Secure but limited • Provide feedback to user

  12. Scripting • First scripting: Netscape LiveScript • Change to JavaScript • Microsoft: Jscript • ECMA(European Computer Manufactures’ Association) • ECMAScript based on JavaScript and Jscript • Object-based • Objects= • elements in HTEM document and Styles • Components of browser interface • W3C’s Document Object Model (DOM)

  13. ECMAScript Syntax • Untyped language • The same variable can hold a string at one time, a number at another and a boolean at another. • Unicode characters • Arrays, objects • Built-in objects: Math, Date, host objects

  14. Objects • Creation and manipulation of objects • Not organized into hierarchical classes • Properties • Named data items • Methods • Functions • P. 455 • document.write: dynamically generated content • Fig. 14.2: Prompting for user , P.457 Property Object Data Function Event Handler Method

  15. Event Handlers • Table 14.1 • P. 459, • onMouseOver=“in_image()”onMouseOut=“out_of_image()” • Updating src property • Improvement of animated GIFs • Using Script • Arrange for animation to be stared and stopped by a control • onMouseOver=“start-animation()”onMouseOut=“stop_animation()” • setTimeout (code, delay) • Execute code after a delay

  16. Scripts and Stylesheets • Content appearance: stylesheets • Altering stylesheets • documet.all.intro.style.color=‘black’ • Docuemt.stylesheet[0].rules[1].style.color=‘fuchsia’ • stylesheet[0], first STYLE, starting at zero • Absolute Positioning

  17. Text animation • SPAN= layer • Apply positioning style • Layer 1: (40,35), Layer 2: (540,300)visibility property= hidden • P. 466

  18. Behavior • A set of parameterized actions • A suitable interface for attaching behavior to elements of production • Much of necessary for scripting is removed • Without having to acquire programming skills • Parameterized actions= behavior • ECMAScript behavior

  19. Behaviors in PDF is fixed • Modern browser • Arbitrary behaviors can be written in scripting language • Macromedia Dreamweaver • Dreamweaver’s behaviors palette (Fig. 14.4) • Behavior groups • Display status message and popup message display • Check browser’s capabilities • Check Browser, Check Plugin • Control over browsers and page elements • Control shockwave or Flash, Control sound behaviors • Concerned with images and motion graphics • Swap Image, Preload Images

  20. Show-Hide Layers • Change Property • Drag Layer • add basic drag and drop functionality

  21. Timeline Scripting and Behavior • Scripting: interactivity and non-linearity • Flash • An action is attached to a key frame simply by selecting the key frame and appropriate menu command, choosing one of the available behavior, and entering values for its parameters • The action is trigged when playback reached the frame to which it is attached. • Button= special symbols • Four frames= up, over, down, hit area • Timeline behavior • Play, Stop, Go To

  22. Flash • Timeline with selections, Fig. 14.5 • Levels, Fig. 14.6 • Tell Target • Sent an event from one object to other • Movie control

  23. Dreamweaver • Offer timeline interface • Timeline= behavior channel, allows actions to be attached to any frame • Several layers can be controlled by the same timeline. • Several different timelines can be attached to the same page. • Hand-crafted scripting vs prefabricated behaviors

  24. Dreamweaver only ships with a behavior that causes a timeline to go to a specific numbered frame, not to the next or previous one. • P. 478, movie control, up(), down() • Behavior + timelines + scripts= dynamic Web pages

  25. Director • Director • Combination of scripts with a timeline • Provides behaviors that can be attached to frames or sprites to implement the same range of time-based actions and control as Flash. • Message Sprite behavior • like Tell Target in Flash • Control one sprite from another • Compose behaviors by combining actions • Scripting language: Lingo • English-like

  26. Lingo • Categories • Score scripts • Same as behavior • Scripts of members • Movie scripts • Parent scripts, new

  27. Beyond Scripting • Scripts • Lack features: such as file input and output • Director’s Xtras • Code modules in C or C++ • Form support for new media types to networking and database management • Four types • Transition Xtras: dissolves, wipes,… • Tool Xtras: new functions to authoring environment • Sprite Xtras: new classes to cast members • Scripting Xtras: new command to Lingo, such as fileio extra • Prescribe interface

  28. Java Applets • Small program in Java • HTML: <OBJECT> • Formatted and positioned using CSS • Java VM • Interpreter • Security: may not read or write local files • Java 2D, Java 3D, Java Sound

More Related