2 6

Path animation:

30 Path1.html Lines 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 Repeat method indicates how many times the path is traversed. A value of –1 indicates that the path should loop continuously. 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."> 2 6

Path animation:

30 Path1.html Lines 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 Repeat method indicates how many times the path is traversed. A value of –1 indicates that the path should loop continuously. 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.">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

Chapter 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls

Published byRose Beasley Modified over 6 years ago

Similar presentations

Presentation on theme: "Chapter 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls"— Presentation transcript:

1 Chapter 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls
Outline Introduction DirectAnimation Path Control Multiple Path Controls Time Markers for Path Control DirectAnimation Sequencer Control DirectAnimation Sprite Control Animated GIFs Internet and World Wide Web Resources

2 The classid attribute identifies the DirectAnimation path Control.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 4 5 <!-- Fig. 18.1: path1.html > 6 <!-- Introducing the path control --> 7 8 <html xmlns = " <head> <title>Path control</title> </head> 12 <body style = "background-color: wheat"> 14 <h1 id = "headerText" style = "position: absolute"> Path animation:</h1> 17 <object id = "oval" classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "AutoStart" value = "1" /> <param name = "Repeat" value = "-1" /> <param name = "Duration" value = "2" /> <param name = "Bounce" value = "1" /> <param name = "Shape" value = "PolyLine( 2, 0, 0, 200, 50 )" /> <param name = "Target" value = "headerText" /> </object> 28 </body> 30 </html> Path1.html Lines 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 Repeat method indicates how many times the path is traversed. A value of –1 indicates that the path should loop continuously. 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.

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" " 4 5 <!-- Fig. 18.2: path2.html > 6 <!-- Controlling multiple paths --> 7 8 <html xmlns = " <head> <title>Path Control - Multiple paths</title> 11 <style type = "text/css"> 13 span { position: absolute; font-family: sans-serif; font-size: 2em; font-weight: bold; filter: shadow( direction = 225 ); padding: 9px; } 21 </style> </head> 24 <body style = "background-color: lavender"> 26 <img src = "icons2.gif" style = "position: absolute; left: 30; top: 110" /> 29 <span id = "titleTxt" style = "left: 500; top: 500; color: white"> Multimedia Cyber Classroom<br /> Programming Tip Icons</span> 34 Path2.html Each span element is controlled by a corresponding object element.

5 <span id = "CPEspan" style = "left: 75; top: 500; color: red"> Common Programming Errors</span> 38 <span id = "GPPspan" style = "left: 275; top: 500; color: orange"> Good Programming Practices</span> 42 <span id = "PERFspan" style = "left: 475; top: 500; color: yellow"> Performance Tips</span> 46 <span id = "PORTspan" style = "left: 100; top: -50; color: green"> Portability Tips</span> 50 <span id = "SEOspan" style = "left: 300; top: -50; color: blue"> Software Engineering Observations</span> 54 <span id = "TDTspan" style = "left: 500; top: -50; color: violet"> Testing and Debugging Tips</span> 58 <object id = "CyberPath" classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Target" value = "titleTxt" /> <param name = "Duration" value = "10" /> <param name = "Shape" value = "PolyLine( 2, 500, 500, 100, 10 )" /> <param name = "AutoStart" value = "1" /> </object> 67 Path2.html A separate object tag is added for each object that we wish to set a path for (lines ).

6 Path2.html 68 <object id = "CPEPath"
classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Target" value = "CPEspan" /> <param name = "Duration" value = "4" /> <param name = "Shape" value = "PolyLine( 3, 75, 500, 300, 170, 35, 175 )" /> <param name = "AutoStart" value = "1" /> </object> 76 <object id = "GPPPath" classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Target" value = "GPPspan" /> <param name = "Duration" value = "5" /> <param name = "Shape" value = "PolyLine( 3, 275, 500, 300, 340, 85, 205 )" /> <param name = "AutoStart" value = "1" /> </object> 85 <object id = "PERFPath" classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Target" value = "PERFspan" /> <param name = "Duration" value = "6" /> <param name = "Shape" value = "PolyLine( 3, 475, 500, 300, 340, 140, 235 )" /> <param name = "AutoStart" value = "1" /> </object> 94 <object id = "PORTPath" classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Target" value = "PORTspan" /> <param name = "Duration" value = "7" /> <param name = "Shape" value = "PolyLine( 3, 600, -50, 300, 340, 200, 265 )" /> <param name = "AutoStart" value = "1" /> </object> Path2.html

7 Path2.html 103 104 <object id = "SEOPath"
classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Target" value = "SEOspan" /> <param name = "Duration" value = "8" /> <param name = "Shape" value = "PolyLine( 3, 300, -50, 300, 340, 260, 295 )" /> <param name = "AutoStart" value = "1" /> </object> 112 <object id = "TDTPath" classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "Target" value = "TDTspan" /> <param name = "Duration" value = "9" /> <param name = "Shape" value = "PolyLine( 3, 500, -50, 300, 340, 310, 325 )" /> <param name = "AutoStart" value = "1" /> </object> </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.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 4 5 <!-- Fig 18.3: path3.html > 6 <!-- Oval paths and time markers --> 7 8 <html xmlns = " <head> <title>Path control - Advanced Paths</title> 11 <script type = "text/javascript" for = "oval" event = "onmarker ( marker )"> <!-- if ( marker == "mark1" ) pole.style.zIndex += 2; 17 if ( marker == "mark2" ) pole.style.zIndex -= 2; // --> </script> </head> 23 <body style = "background-color: #9C00FF"> 25 <img id = "pole" src = "pole.gif" style = "position: absolute; left: 350; top: 80; z-index: 3; height: 300" /> 29 <img id = "largebug" src = "animatedbug_large.gif" style = "position: absolute; z-index: 4" /> 32 Path3.html 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.

10 The second parameter gives an id to the event.
<object id = "oval" classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "AutoStart" value = "-1" /> <param name = "Repeat" value = "-1" /> <param name = "Relative" value = "1" /> <param name = "Duration" value = "8" /> <param name = "Shape" value = "Oval( 100, 80, 300, 60 )" /> <param name = "Target" value = "largebug" /> <param name = "AddTimeMarker1" value = "2, mark1, 0" /> <param name = "AddTimeMarker2" value = "6, mark2, 0" /> </object> 45 <object id = "swarmPath" classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "AutoStart" value = "-1" /> <param name = "Repeat" value = "-1" /> <param name = "Relative" value = "1" /> <param name = "Duration" value = "15" /> <param name = "Shape" value = "Polygon(6, 0, 0, 400, 300, 450, 50, 320, , 150, 180, 50, 250 )" /> <param name = "Target" value = "swarm" /> </object> 57 <span id = "swarm" style = "position:absolute; top: 0; left: 0; z-index: 1"> 60 <img src = "animatedbug_small.gif" style = "position:absolute; top: 25; left: -30" /> <img src = "animatedbug_small.gif" style = "position:absolute; top: 0; left: 0" /> <img src = "animatedbug_small.gif" style = "position:absolute; top: 15; left: 70" /> The capability ability to execute certain actions at any point along an object’s path is implemented with the AddTimeMarker method. Path3.html 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.

11 Path3.html 67 <img src = "animatedbug_small.gif"
style = "position:absolute; top: 30; left: 5" /> <img src = "animatedbug_small.gif" style = "position: absolute; top: 10; left: 30" /> <img src = "animatedbug_small.gif" style = "position: absolute; top: 40; left: 40" /> <img src = "animatedbug_small.gif" style = "position: absolute; top: 65; left: 15" /> 75 </span> </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 The Item object creates a grouping of events using a common name.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 18.4: sequencer.html --> 6 <!-- Sequencer Control > 7 8 <html xmlns = " <head> <title>Sequencer Control</title> <style type = "text/css"> 12 div { font-size: 2em; color: white; font-weight: bold } 16 </style> 18 <script type = "text/javascript" for = "sequencer" event = "oninit"> <!-- sequencer.Item( "showThem" ).at( 2.0, "show( line1 )" ); sequencer.Item( "showThem" ).at( 4.0, "show( line2 )" ); sequencer.Item( "showThem" ).at( 6.0, "show( line3 )" ); sequencer.Item( "showThem" ).at( 7.0, "show( line4 )" ); sequencer.Item( "showThem" ).at( 8.0, "runPath()" ); // --> </script> 29 <script type = "text/javascript"> <!-- function show( object ) { object.style.visibility = "visible"; } Sequencer.html 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.

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

15 Sequencer.html 70 <object id = "pathControl"
classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> <param name = "AutoStart" value = "0" /> <param name = "Repeat" value = "1" /> <param name = "Relative" value = "1" /> <param name = "Duration" value = "2" /> <param name = "Shape" value = "PolyLine( 2, 0, 0, 250, 0 )" /> <param name = "Target" value = "line4" /> </object> 80 </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. The fourth line at the end of its PolyLine path.

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

18 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 4 5 <!-- Fig 18.6: sprite.html --> 6 <!-- Sprite Control > 7 8 <html xmlns = " <head> <title>Sprite Control</title> </head> 12 <body> 14 <object id = "walking" style = "width: 150; height: 250" classid = "CLSID:FD D86E-11d0-89D6-00A0C90833E6"> <param name = "Repeat" value = "-1" /> <param name = "NumFrames" value = "5" /> <param name = "NumFramesAcross" value = "3" /> <param name = "NumFramesDown" value = "2" /> <param name = "SourceURL" value = "walking.gif" /> <param name = "AutoStart" value = "-1" /> </object> 24 </body> 26 </html> Sprite.html 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. NumFramesAcross and NumFramesDown—specify how many rows and columns of frames there are in the animation file. Setting the AutoStart property to a nonzero value starts the animation automatically when the page loads.

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

20 The script then calls the Play function to restart the animation.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 4 5 <!-- Fig. 18.7: sprite2.html --> 6 <!-- Events with Sprite Control --> 7 8 <html xmlns = " <head> <title>Sprite Control</title> 11 <script type = "text/javascript" for = "bounce" event = "onmouseover"> <!-- bounce.Stop(); bounce.PlayRate = -3; bounce.Play(); // --> </script> 20 <script type = "text/javascript" for = "bounce" event = "onmouseout"> <!-- bounce.Stop(); bounce.PlayRate = 1; bounce.Play(); // --> </script> </head> 30 <body> 32 <h1>Sprite Control</h1> 34 Sprite2.html 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.

21 Sprite2.html Program Output
<object id = "bounce" style = "width:75; height:75" classid = "CLSID:FD D86E-11d0-89D6-00A0C90833E6"> <param name = "Repeat" value = "-1" /> <param name = "PlayRate" value = "1" /> <param name = "NumFrames" value = "22" /> <param name = "NumFramesAcross" value = "4" /> <param name = "NumFramesDown" value = "6" /> <param name = "SourceURL" value = "bounce.jpg" /> <param name = "MouseEventsEnabled" value = "True" /> <param name = "AutoStart" value = "-1" /> </object> 47 </body> 49 </html> Sprite2.html Program Output Animation of a ball bouncing.

22 18.7 Animated GIFs Fig 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.)

Download ppt "Chapter 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls"

Similar presentations

Chapter 16 Dynamic HTML: Data Binding with Tabular Data Control.

Chapter 16 Dynamic HTML: Data Binding with Tabular Data Control.
© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.

© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.
 2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 30 - Dynamic HTML: Structured Graphics ActiveX Control Outline 30.1Introduction 30.2Shape Primitives.

 2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 30 - Dynamic HTML: Structured Graphics ActiveX Control Outline 30.1Introduction 30.2Shape Primitives.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Cascading Style Sheets

Cascading Style Sheets
Presenter: James Huang Date: Sept. 26, 2014 1.  Introduction  Basics  Lists  Links  Forms  CSS 2.

Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.

JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.
Very quick intro HTML and CSS. Sample html A Web Title.

Very quick intro HTML and CSS. Sample html A Web Title.
Working with Special Effects Creating Rollovers, Menus, Filters, and Transitions.

Working with Special Effects Creating Rollovers, Menus, Filters, and Transitions.
INTRODUCTORY Tutorial 7 Creating Liquid Layouts. XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a.

INTRODUCTORY Tutorial 7 Creating Liquid Layouts. XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a.
With CSS, a color is most often specified by: a HEX value - like #ff0000 an RGB value - like rgb(255,0,0) a color name - like red“ Example h1.

With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ Example h1.
CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.

CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.

Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
CSS(Cascading Style Sheets )

CSS(Cascading Style Sheets )
CSW131 Steven Battilana 1 CSW 131 – Chapter 5 (More) Advanced CSS Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston,

CSW131 Steven Battilana 1 CSW 131 – Chapter 5 (More) Advanced CSS Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston,
กระบวนวิชา 25 3208 CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.

CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
17/10/11. 2  The form element ( ) is used to include a number of form elements together so that they can be referenced by some other code in order to.

17/10/11. 2  The form element ( ) is used to include a number of form elements together so that they can be referenced by some other code in order to.
 2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 31 - Dynamic HTML: Path, Sequencer and Sprite ActiveX Controls Outline 31.1Introduction 31.2DirectAnimation.

 2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 31 - Dynamic HTML: Path, Sequencer and Sprite ActiveX Controls Outline 31.1Introduction 31.2DirectAnimation.
INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.

INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.

Similar presentations

Ads by Google