1 / 22

Dynamic HTML Path Sequencer

Learn how to control multiple paths and use sprite ActiveX controls in dynamic HTML. Includes time markers, animated GIFs, and internet resources.

monicatownsend
Download Presentation

Dynamic HTML Path Sequencer

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 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls Outline 18.1 Introduction 18.2 DirectAnimation Path Control 18.3 Multiple Path Controls 18.4 Time Markers for Path Control 18.5 DirectAnimation Sequencer Control 18.6 DirectAnimation Sprite Control 18.7 Animated GIFs 18.8 Internet and World Wide Web Resources

  2. Lines 18-27 use the object element to place the Path Control on the page. The classid attribute identifies the DirectAnimation path Control. Setting AutoStart to a non-zero value starts the element along the path as soon the page loads. The Bounce parameter when set to 1reverses the element’s direction on the path when it reaches the end. The Target parameter specifies the id of the element that is targeted by the path control. The Repeat method indicates how many times the path is traversed. A value of –1 indicates that the path should loop continuously. 1 <?xml version ="1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <!-- Fig. 18.1: path1.html --> 6 <!-- Introducing the path control --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Path control</title> 11 </head> 12 13 <body style = "background-color: wheat"> 14 15 <h1 id = "headerText" style = "position: absolute"> 16 Path animation:</h1> 17 18 <object id = "oval" 19 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 20 <param name = "AutoStart" value = "1" /> 21 <param name = "Repeat" value = "-1" /> 22 <param name = "Duration" value = "2" /> 23 <param name = "Bounce" value = "1" /> 24 <param name = "Shape" 25 value = "PolyLine( 2, 0, 0, 200, 50 )" /> 26 <param name = "Target" value = "headerText" /> 27 </object> 28 29 </body> 30 </html> Path1.html

  3. Program Output When executed the header Path animation:will traverse a path defined by the program.

  4. Each span element is controlled by a corresponding object element. 1 <?xml version ="1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <!-- Fig. 18.2: path2.html --> 6 <!-- Controlling multiple paths --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Path Control - Multiple paths</title> 11 12 <style type = "text/css"> 13 14 span { position:absolute; 15 font-family:sans-serif; 16 font-size:2em; 17 font-weight:bold; 18 filter: shadow( direction = 225 ); 19 padding: 9px; 20 } 21 22 </style> 23 </head> 24 25 <body style = "background-color: lavender"> 26 27 <img src = "icons2.gif" 28 style = "position: absolute; left: 30; top: 110" /> 29 30 <span id = "titleTxt" 31 style = "left: 500; top: 500; color: white"> 32 Multimedia Cyber Classroom<br /> 33 Programming Tip Icons</span> 34 Path2.html

  5. A separate object tag is added for each object that we wish to set a path for (lines 59-120). 35 <span id = "CPEspan" 36 style ="left: 75; top: 500; color: red"> 37 Common Programming Errors</span> 38 39 <span id = "GPPspan" 40 style = "left: 275; top: 500; color: orange"> 41 Good Programming Practices</span> 42 43 <span id = "PERFspan" 44 style = "left: 475; top: 500; color: yellow"> 45 Performance Tips</span> 46 47 <span id = "PORTspan" 48 style = "left: 100; top: -50; color: green"> 49 Portability Tips</span> 50 51 <span id = "SEOspan" 52 style = "left: 300; top: -50; color: blue"> 53 Software Engineering Observations</span> 54 55 <span id = "TDTspan" 56 style = "left: 500; top: -50; color: violet"> 57 Testing and Debugging Tips</span> 58 59 <object id = "CyberPath" 60 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 61 <param name = "Target" value = "titleTxt" /> 62 <param name = "Duration" value = "10" /> 63 <param name = "Shape" 64 value = "PolyLine( 2, 500, 500, 100, 10 )" /> 65 <param name = "AutoStart" value = "1" /> 66 </object> 67 Path2.html

  6. 68 <object id = "CPEPath" 69 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 70 <param name = "Target" value = "CPEspan" /> 71 <param name = "Duration" value = "4" /> 72 <param name = "Shape" 73 value = "PolyLine( 3, 75, 500, 300, 170, 35, 175 )" /> 74 <param name = "AutoStart" value = "1" /> 75 </object> 76 77 <object id = "GPPPath" 78 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 79 <param name = "Target" value = "GPPspan" /> 80 <param name = "Duration" value = "5" /> 81 <param name = "Shape" value = 82 "PolyLine( 3, 275, 500, 300, 340, 85, 205 )" /> 83 <param name = "AutoStart" value = "1" /> 84 </object> 85 86 <object id = "PERFPath" 87 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 88 <param name = "Target" value = "PERFspan" /> 89 <param name = "Duration" value = "6" /> 90 <param name = "Shape" value = 91 "PolyLine( 3, 475, 500, 300, 340, 140, 235 )" /> 92 <param name = "AutoStart" value = "1" /> 93 </object> 94 95 <object id = "PORTPath" 96 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 97 <param name = "Target" value = "PORTspan" /> 98 <param name = "Duration" value = "7" /> 99 <param name = "Shape" value = 100 "PolyLine( 3, 600, -50, 300, 340, 200, 265 )" /> 101 <param name = "AutoStart" value = "1" /> 102 </object> Path2.html

  7. 103 104 <object id = "SEOPath" 105 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 106 <param name = "Target" value = "SEOspan" /> 107 <param name = "Duration" value = "8" /> 108 <param name = "Shape" value = 109 "PolyLine( 3, 300, -50, 300, 340, 260, 295 )" /> 110 <param name = "AutoStart" value = "1" /> 111 </object> 112 113 <object id = "TDTPath" 114 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 115 <param name = "Target" value = "TDTspan" /> 116 <param name = "Duration" value = "9" /> 117 <param name = "Shape" value = 118 "PolyLine( 3, 500, -50, 300, 340, 310, 325 )" /> 119 <param name = "AutoStart" value = "1" /> 120 </object> 121 </body> 122 </html> Path2.html

  8. Program Output This application creates PolyLine paths for seven separate objects that create a splash screen effect.

  9. Lines 12–21create an event handler for the onmarker event. The parameter that the onmarker event receives (defined here as marker in line 13) identifies the marker that fired the event. The if control structures that follow change the zIndex attribute of element pole to correspond to the time marker in our Path Control that actually fired the event. 1 <?xml version ="1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <!-- Fig 18.3: path3.html --> 6 <!-- Oval paths and time markers --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Path control - Advanced Paths</title> 11 12 <script type = "text/javascript" for = "oval" 13 event = "onmarker ( marker )"> 14 <!-- 15 if ( marker == "mark1" ) 16 pole.style.zIndex += 2; 17 18 if ( marker == "mark2" ) 19 pole.style.zIndex -= 2; 20 // --> 21 </script> 22 </head> 23 24 <body style = "background-color: #9C00FF"> 25 26 <img id = "pole" src = "pole.gif" style = 27 "position: absolute; left: 350; top: 80; 28 z-index: 3; height: 300" /> 29 30 <img id = "largebug" src = "animatedbug_large.gif" 31 style = "position: absolute; z-index: 4" /> 32 Path3.html

  10. The capability ability to execute certain actions at any point along an object’s path is implemented with the AddTimeMarker method. The 1 appended to the AddTimeMarker function is a sequential identifier. The last parameter determines whether to fire the parameter every time the object’s path loops past the time marker. The first parameter determines the point at which the time marker is placed along the path. The second parameter gives an id to the event. 33 <object id = "oval" 34 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 35 <param name = "AutoStart" value = "-1" /> 36 <param name = "Repeat" value = "-1" /> 37 <param name = "Relative" value = "1" /> 38 <param name = "Duration" value = "8" /> 39 <param name = "Shape" 40 value = "Oval( 100, 80, 300, 60 )" /> 41 <param name = "Target" value = "largebug" /> 42 <param name = "AddTimeMarker1" value = "2, mark1, 0" /> 43 <param name = "AddTimeMarker2" value = "6, mark2, 0" /> 44 </object> 45 46 <object id = "swarmPath" 47 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 48 <param name = "AutoStart" value = "-1" /> 49 <param name = "Repeat" value = "-1" /> 50 <param name = "Relative" value = "1" /> 51 <param name = "Duration" value = "15" /> 52 <param name = "Shape" 53 value = "Polygon(6, 0, 0, 400, 300, 450, 50, 320, 54 300, 150, 180, 50, 250 )" /> 55 <param name = "Target" value = "swarm" /> 56 </object> 57 58 <span id = "swarm" style = 59 "position:absolute; top: 0; left: 0; z-index: 1"> 60 61 <img src = "animatedbug_small.gif" 62 style = "position:absolute; top: 25; left: -30" /> 63 <img src = "animatedbug_small.gif" 64 style = "position:absolute; top: 0; left: 0" /> 65 <img src = "animatedbug_small.gif" 66 style = "position:absolute; top: 15; left: 70" /> Path3.html

  11. 67 <img src = "animatedbug_small.gif" 68 style = "position:absolute; top: 30; left: 5" /> 69 <img src = "animatedbug_small.gif" 70 style = "position: absolute; top: 10; left: 30" /> 71 <img src = "animatedbug_small.gif" 72 style = "position: absolute; top: 40; left: 40" /> 73 <img src = "animatedbug_small.gif" 74 style = "position: absolute; top: 65; left: 15" /> 75 76 </span> 77 </body> 78 </html> Path3.html

  12. Program Output The onmarker events fire when the large image is at the leftmost and rightmost extremes of its oval path, creating the appearance that the bee image is flying alternately behind and in front of the image of the pole.

  13. Lines 19–28 use a JavaScript event handler for the oninit event that fires when the sequencer loads. The Item object creates a grouping of events using a common name. The at method of the Item object takes two parameters: number of seconds to wait, and action to perform when that period of time has expired. 1 <?xml version ="1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 18.4: sequencer.html --> 6 <!-- Sequencer Control --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Sequencer Control</title> 11 <style type = "text/css"> 12 13 div { font-size:2em; 14 color: white; 15 font-weight: bold } 16 17 </style> 18 19 <script type = "text/javascript" for = "sequencer" 20 event = "oninit"> 21 <!-- 22 sequencer.Item( "showThem" ).at( 2.0, "show( line1 )" ); 23 sequencer.Item( "showThem" ).at( 4.0, "show( line2 )" ); 24 sequencer.Item( "showThem" ).at( 6.0, "show( line3 )" ); 25 sequencer.Item( "showThem" ).at( 7.0, "show( line4 )" ); 26 sequencer.Item( "showThem" ).at( 8.0, "runPath()" ); 27 // --> 28 </script> 29 30 <script type = "text/javascript"> 31 <!-- 32 function show( object ) 33 { 34 object.style.visibility = "visible"; 35 } Sequencer.html

  14. Lines 66–68 add the Sequencer Control to the Web page. All the parameters for the Sequencer Control are set via scripting. 36 37 function start() 38 { 39 sequencer.Item( "showThem" ).Play(); 40 } 41 42 function runPath() 43 { 44 pathControl.Play(); 45 } 46 // --> 47 </script> 48 </head> 49 50 <body style = "background-color: limegreen" onload = "start()"> 51 52 <div id = "line1" style = "position: absolute; left: 50; 53 top: 10; visibility: hidden"> 54 Sequencer DirectAnimation</div> 55 56 <div id = "line2" style = "position: absolute; left: 70; 57 top: 60; visibility: hidden">ActiveX Control</div> 58 59 <div id = "line3" style = "position: absolute; left: 90; 60 top: 110; visibility: hidden"> 61 Controls time intervals</div> 62 63 <div id = "line4" style = "position: absolute; left: 110; 64 top:160; visibility: hidden">For dynamic effects</div> 65 66 <object id = "sequencer" classid = 67 "CLSID:B0A6BAE2-AAF0-11d0-A152-00A0C908DB96"> 68 </object> 69 Sequencer.html

  15. 70 <object id = "pathControl" 71 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 72 <param name = "AutoStart" value = "0" /> 73 <param name = "Repeat" value = "1" /> 74 <param name = "Relative" value = "1" /> 75 <param name = "Duration" value = "2" /> 76 <param name = "Shape" value = 77 "PolyLine( 2, 0, 0, 250, 0 )" /> 78 <param name = "Target" value = "line4" /> 79 </object> 80 81 </body> 82 </html> Sequencer.html

  16. The fourth line at the end of its PolyLine path. Program Output The Sequencer Control is used to display four lines of text sequentially; when the fourth line of text has been displayed, the Sequencer Control then starts that fourth line on a PolyLine path, using the Play method of the Path Control.

  17. 18.6 DirectAnimation Sprite Control Fig. 18.5 Source image for Sprite Control (walking.gif).

  18. Sprite Controls are used for dynamic control over animation. It allows you to control the rate of payback for images or individual frames. The object tag (lines 15–23) inserts the Sprite Control into a Web page. Setting the AutoStart property to a nonzero value starts the animation automatically when the page loads. NumFramesAcross and NumFramesDown—specify how many rows and columns of frames there are in the animation file. 1 <?xml version ="1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <!-- Fig 18.6: sprite.html --> 6 <!-- Sprite Control --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Sprite Control</title> 11 </head> 12 13 <body> 14 15 <object id = "walking" style = "width: 150; height: 250" 16 classid = "CLSID:FD179533-D86E-11d0-89D6-00A0C90833E6"> 17 <param name = "Repeat" value = "-1" /> 18 <param name = "NumFrames" value = "5" /> 19 <param name = "NumFramesAcross" value = "3" /> 20 <param name = "NumFramesDown" value = "2" /> 21 <param name = "SourceURL" value = "walking.gif" /> 22 <param name = "AutoStart" value = "-1" /> 23 </object> 24 25 </body> 26 </html> Sprite.html

  19. Program Output The image frames animated using Sprite.html.

  20. When the user moves the mouse over the Sprite Control, the event handler calls the Stop method. This action plays the animation in reverse at three times the normal speed. The script then calls the Play function to restart the animation. The onmouseout event handler sets the PlayRate back to the default of 1 when the user moves the mouse cursor off the animation. The PlayRate method controls the rate at which frames are displayed; 1 is the default value. 1 <?xml version ="1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <!-- Fig. 18.7: sprite2.html --> 6 <!-- Events with Sprite Control --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Sprite Control</title> 11 12 <script type = "text/javascript" for = "bounce" 13 event = "onmouseover"> 14 <!-- 15 bounce.Stop(); 16 bounce.PlayRate = -3; 17 bounce.Play(); 18 // --> 19 </script> 20 21 <script type = "text/javascript" for = "bounce" 22 event = "onmouseout"> 23 <!-- 24 bounce.Stop(); 25 bounce.PlayRate = 1; 26 bounce.Play(); 27 // --> 28 </script> 29 </head> 30 31 <body> 32 33 <h1>Sprite Control</h1> 34 Sprite2.html

  21. 35 <object id = "bounce" style = 36 "width:75; height:75" classid = 37 "CLSID:FD179533-D86E-11d0-89D6-00A0C90833E6"> 38 <param name = "Repeat" value = "-1" /> 39 <param name = "PlayRate" value = "1" /> 40 <param name = "NumFrames" value = "22" /> 41 <param name = "NumFramesAcross" value = "4" /> 42 <param name = "NumFramesDown" value = "6" /> 43 <param name = "SourceURL" value = "bounce.jpg" /> 44 <param name = "MouseEventsEnabled" value = "True" /> 45 <param name = "AutoStart" value = "-1" /> 46 </object> 47 48 </body> 49 </html> Sprite2.htmlProgram Output Animation of a ball bouncing.

  22. 18.7 Animated GIFs Fig. 18.8 Viewing an animated GIF in Photoshop Elements. (Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.)

More Related