1.  2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 31 - Dynamic HTML: Path, Sequencer and Sprite ActiveX Controls Outline 31.1Introduction 31.2DirectAnimation Path Control 31.3Multiple Path Control 31.4Time Markers for Path Control 31.5DirectAnimation Sequence Control 31.6DirectAnimation Sprint Control 31.7Animated GIFs 31.8Web Resources

2.  2004 Prentice Hall, Inc. All rights reserved. 2 Objectives In this chapter, you will learn: –To be able to use the DirectAnimation multimedia ActiveX controls, including the Path, Sequencer and Sprite controls. –To be able to add animation to Web pages with the DirectAnimation ActiveX controls. –To use the Path Control to specify the path along which an animated Web page element moves. –To use the Sequencer Control to control the timing and synchronization of actions on a Web page. –To use the Sprite Control to create animated images for a Web page.

3.  2004 Prentice Hall, Inc. All rights reserved. 3 31.1 Introduction Additional DirectAnimation controls –Path Control –Sequencer Control –Sprite Control

4.  2004 Prentice Hall, Inc. All rights reserved. 4 31.2 DirectAnimation Path Control Path control –More advanced/precise than CSS –Allows objects to travel pre-defined paths for complex animation effects –Must set style of object to be moved to “ position: absolute ”

5.  2004 Prentice Hall, Inc. All rights reserved. 5 31.2 Shape Primitives Commands passed through param tags –AutoStart Determines if animation will start on page load Non-zero yes, zero no –Play Start element on its path if AutoStart is false –Repeat How many times to repeat -1 indicates infinite times –Duration Amount of time to traverse path in seconds

6.  2004 Prentice Hall, Inc. All rights reserved. 6 31.2 Shape Primitives Commands passed through param tags, cont. –Bounce If non-zero, animation reverses at end of path –Shape Determines path Use PolyLine to create points –Target Shape controlled by path

7.  2004 Prentice Hall, Inc. All rights reserved. Outline 7 path1.html (1 of 2) Use absolute positioning

8.  2004 Prentice Hall, Inc. All rights reserved. Outline 8 path1.html (2 of 2) Start on page loadRun animation continuouslyTake two seconds to completeReverse direction when doneAdd two points to pathSet the target to h1 tag

9.  2004 Prentice Hall, Inc. All rights reserved. 9 31.2 DirectAnimation Path Control Fig. 31.1 Demonstrating the DirectAnimation Path control.

10.  2004 Prentice Hall, Inc. All rights reserved. 10 31.3 Multiple Path Controls Possible to move multiple elements at once –Create Path control for each element –Assign each a PolyLine path to follow

11.  2004 Prentice Hall, Inc. All rights reserved. Outline 11 path2.html (1 of 5)

12.  2004 Prentice Hall, Inc. All rights reserved. Outline 12 path2.html (2 of 5) Each element to be moved has its own named span tag

13.  2004 Prentice Hall, Inc. All rights reserved. Outline 13 path2.html (3 of 5) Assigning a Path to the titleTxt element

14.  2004 Prentice Hall, Inc. All rights reserved. Outline 14 path2.html (4 of 5)

15.  2004 Prentice Hall, Inc. All rights reserved. Outline 15 path2.html (5 of 5)

16.  2004 Prentice Hall, Inc. All rights reserved. 16 31.3 Multiple Path Controls Fig. 31.2 Controlling multiple elements with the Path control.

17.  2004 Prentice Hall, Inc. All rights reserved. 17 31.4 Time Markers for Path Control AddTimeMarker –Execute action at any point along path –JavaScript event s

18.  2004 Prentice Hall, Inc. All rights reserved. Outline 18 path3.html (1 of 3) Creating a JavaScript event Change the zIndex of the pole image

19.  2004 Prentice Hall, Inc. All rights reserved. Outline 19 path3.html (2 of 3) Put large bug on Oval path AddTimeMarker s to fire the mark1 and mark2 events

20.  2004 Prentice Hall, Inc. All rights reserved. Outline 20 path3.html (3 of 3)

21.  2004 Prentice Hall, Inc. All rights reserved. 21 31.4 Time Markers for Path Control Fig. 31.3 Adding time markers for script interaction.

22.  2004 Prentice Hall, Inc. All rights reserved. 22 31.5 DirectAnimation Sequencer Control Call functions at specific time intervals –Simpler interface than JavaScript window.setInterval New objects and parameters –Item Grouping of elements under a common name –at Seconds to wait, action to perform

23.  2004 Prentice Hall, Inc. All rights reserved. Outline 23 sequencer.html (1 of 4)

24.  2004 Prentice Hall, Inc. All rights reserved. Outline 24 sequencer.html (2 of 4) oninit handler to generate sequence of events Using Item and at to group actions

25.  2004 Prentice Hall, Inc. All rights reserved. Outline 25 sequencer.html (3 of 4) Start targeted element along path

26.  2004 Prentice Hall, Inc. All rights reserved. Outline 26 sequencer.html (4 of 4) Adding the Sequencer Control

27.  2004 Prentice Hall, Inc. All rights reserved. 27 31.5 DirectAnimation Sequencer Control Fig. 31.4 Using the DirectAnimation Sequencer Control.

28.  2004 Prentice Hall, Inc. All rights reserved. 28 31.6 DirectAnimation Sprite Control Sprites –Animated images –Allow more control than traditional animated GIFs –Control amount of time between each frame through code

29.  2004 Prentice Hall, Inc. All rights reserved. 29 31.6 DirectAnimation Sprite Control Fig. 31.5 Source image for Sprite Control ( walking.gif ).

30.  2004 Prentice Hall, Inc. All rights reserved. 30 31.6 DirectAnimation Sprite Control Sprite control parameters –CSS properties width and height –Repeat -1 to loop indefinitely –NumFrames Total number of frames in animation –NumFramesAcross and NumFramesDown How many rows/columns the image has –SourceURL –AutoStart Non-zero will start with page load

31.  2004 Prentice Hall, Inc. All rights reserved. Outline 31 sprite.html (1 of 1) Placing a Sprite Control on the page

32.  2004 Prentice Hall, Inc. All rights reserved. 32 31.6 DirectAnimation Sprite Control Fig. 31.6 Simple animation with the Sprite Control.

33.  2004 Prentice Hall, Inc. All rights reserved. 33 31.6 DirectAnimation Sprite Control Sprites may be controlled dynamically –Respond to user input –PlayRate Can be negative, plays in reverse –MouseEventsEnabled

34.  2004 Prentice Hall, Inc. All rights reserved. Outline 34 sprite2.html (1 of 3) The onmouseover event handler Play in reverse, three times faster Must stop animation before adjusting PlayRate

35.  2004 Prentice Hall, Inc. All rights reserved. Outline 35 sprite2.html (2 of 3) The onmouseout event handler

36.  2004 Prentice Hall, Inc. All rights reserved. Outline 36 sprite2.html (3 of 3) Enabling mouse events

37.  2004 Prentice Hall, Inc. All rights reserved. 37 31.6 DirectAnimation Sprite Control Fig. 31.7 Responding to mouse events with the Sprite Control.

38.  2004 Prentice Hall, Inc. All rights reserved. 38 31.7 Animated GIFs GIF is a standard format –Sprites compatible only with Internet Explorer –Animated GIFs work in any graphical browser –Made up of frames –May be created in many programs PhotoShop Elements

39.  2004 Prentice Hall, Inc. All rights reserved. 39 31.7 Animated GIFs PhotoShop Elements –Saves each frame in a layer –Save For Web feature GIF file type Check Animate box Set Frame Delay, Loop and Transparency

40.  2004 Prentice Hall, Inc. All rights reserved. 40 31.6 DirectAnimation Sprite Control Fig. 31.8 Viewing an animated GIF in Photoshop ® Elements. [Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated.] Original fileOptimized version File typeForward one frame Go to last frame Browser preview buttonBack one frame Go to first frame