Presentation is loading. Please wait.

Presentation is loading. Please wait.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls Outline 18.1 Introduction 18.2.

Published byMay Barber Modified over 8 years ago

Similar presentations

Presentation on theme: " 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls Outline 18.1 Introduction 18.2."— Presentation transcript:

1  2001 Prentice Hall, Inc. All rights reserved. 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  2001 Prentice Hall, Inc. All rights reserved. Outline 2 Path1.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Path control 11 12 13 14 15 16 Path animation: 17 18 <object id = "oval" 19 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 20 21 22 23 24 <param name = "Shape" 25 value = "PolyLine( 2, 0, 0, 200, 50 )" /> 26 27 28 29 30 The Repeat method indicates how many times the path is traversed. A value of –1 indicates that the path should loop continuously. The Target parameter specifies the id of the element that is targeted by the path control. The Bounce parameter when set to 1reverses the element’s direction on the path when it reaches the end. Setting AutoStart to a non-zero value starts the element along the path as soon the page loads. The classid attribute identifies the DirectAnimation path Control. Lines 18-27 use the object element to place the Path Control on the page.

3  2001 Prentice Hall, Inc. All rights reserved. Outline 3 Program Output When executed the header Path animation:will traverse a path defined by the program.

4  2001 Prentice Hall, Inc. All rights reserved. Outline 4 Path2.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Path Control - Multiple paths 11 12 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 23 24 25 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 33 Programming Tip Icons 34 Each span element is controlled by a corresponding object element.

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

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

7  2001 Prentice Hall, Inc. All rights reserved. Outline 7 Path2.html 103 104 <object id = "SEOPath" 105 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 106 107 108 <param name = "Shape" value = 109 "PolyLine( 3, 300, -50, 300, 340, 260, 295 )" /> 110 111 112 113 <object id = "TDTPath" 114 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 115 116 117 <param name = "Shape" value = 118 "PolyLine( 3, 500, -50, 300, 340, 310, 325 )" /> 119 120 121 122

8  2001 Prentice Hall, Inc. All rights reserved. Outline 8 Program Output This application creates PolyLine paths for seven separate objects that create a splash screen effect.

9  2001 Prentice Hall, Inc. All rights reserved. Outline 9 Path3.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Path control - Advanced Paths 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 22 23 24 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 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  2001 Prentice Hall, Inc. All rights reserved. Outline 10 Path3.html 33 <object id = "oval" 34 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 35 36 37 38 39 <param name = "Shape" 40 value = "Oval( 100, 80, 300, 60 )" /> 41 42 43 44 45 46 <object id = "swarmPath" 47 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 48 49 50 51 52 <param name = "Shape" 53 value = "Polygon(6, 0, 0, 400, 300, 450, 50, 320, 54 300, 150, 180, 50, 250 )" /> 55 56 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" /> 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 second parameter gives an id to the event. The first parameter determines the point at which the time marker is placed along the path. The capability ability to execute certain actions at any point along an object’s path is implemented with the AddTimeMarker method.

11  2001 Prentice Hall, Inc. All rights reserved. Outline 11 Path3.html 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 77 78

12  2001 Prentice Hall, Inc. All rights reserved. Outline 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  2001 Prentice Hall, Inc. All rights reserved. Outline 13 Sequencer.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Sequencer Control 11 12 13 div { font-size: 2em; 14 color: white; 15 font-weight: bold } 16 17 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 29 30 31 <!-- 32 function show( object ) 33 { 34 object.style.visibility = "visible"; 35 } 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  2001 Prentice Hall, Inc. All rights reserved. Outline 14 Sequencer.html 36 37 function start() 38 { 39 sequencer.Item( "showThem" ).Play(); 40 } 41 42 function runPath() 43 { 44 pathControl.Play(); 45 } 46 // --> 47 48 49 50 51 52 <div id = "line1" style = "position: absolute; left: 50; 53 top: 10; visibility: hidden"> 54 Sequencer DirectAnimation 55 56 <div id = "line2" style = "position: absolute; left: 70; 57 top: 60; visibility: hidden">ActiveX Control 58 59 <div id = "line3" style = "position: absolute; left: 90; 60 top: 110; visibility: hidden"> 61 Controls time intervals 62 63 <div id = "line4" style = "position: absolute; left: 110; 64 top:160; visibility: hidden">For dynamic effects 65 66 <object id = "sequencer" classid = 67 "CLSID:B0A6BAE2-AAF0-11d0-A152-00A0C908DB96"> 68 69 Lines 66–68 add the Sequencer Control to the Web page. All the parameters for the Sequencer Control are set via scripting.

15  2001 Prentice Hall, Inc. All rights reserved. Outline 15 Sequencer.html 70 <object id = "pathControl" 71 classid = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6"> 72 73 74 75 76 <param name = "Shape" value = 77 "PolyLine( 2, 0, 0, 250, 0 )" /> 78 79 80 81 82

16  2001 Prentice Hall, Inc. All rights reserved. Outline 16 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  2001 Prentice Hall, Inc. All rights reserved. 17 18.6 DirectAnimation Sprite Control Fig. 18.5Source image for Sprite Control (walking.gif).

18  2001 Prentice Hall, Inc. All rights reserved. Outline 18 Sprite.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Sprite Control 11 12 13 14 15 <object id = "walking" style = "width: 150; height: 250" 16 classid = "CLSID:FD179533-D86E-11d0-89D6-00A0C90833E6"> 17 18 19 20 21 22 23 24 25 26 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  2001 Prentice Hall, Inc. All rights reserved. Outline 19 Program Output The image frames animated using Sprite.html.

20  2001 Prentice Hall, Inc. All rights reserved. Outline 20 Sprite2.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Sprite Control 11 12 <script type = "text/javascript" for = "bounce" 13 event = "onmouseover"> 14 <!-- 15 bounce.Stop(); 16 bounce.PlayRate = -3; 17 bounce.Play(); 18 // --> 19 20 21 <script type = "text/javascript" for = "bounce" 22 event = "onmouseout"> 23 <!-- 24 bounce.Stop(); 25 bounce.PlayRate = 1; 26 bounce.Play(); 27 // --> 28 29 30 31 32 33 Sprite Control 34 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  2001 Prentice Hall, Inc. All rights reserved. Outline 21 Sprite2.html Program Output 35 <object id = "bounce" style = 36 "width:75; height:75" classid = 37 "CLSID:FD179533-D86E-11d0-89D6-00A0C90833E6"> 38 39 40 41 42 43 44 45 46 47 48 49 Animation of a ball bouncing.

22  2001 Prentice Hall, Inc. All rights reserved. 22 18.7 Animated GIFs Fig. 18.8Viewing 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 " 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls Outline 18.1 Introduction 18.2."

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. Chapter 28 – Multimedia: Audio, Video, Speech Synthesis and Recognition Outline 28.1 Introduction 28.2.

 2004 Prentice Hall, Inc. All rights reserved. Chapter 28 – Multimedia: Audio, Video, Speech Synthesis and Recognition Outline 28.1 Introduction 28.2.
 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.
Cascading Style Sheets

Cascading Style Sheets
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
1 XHTML Cascading Style Sheets™ (CSS). 2 Inline.html 1 2

1 XHTML Cascading Style Sheets™ (CSS). 2 Inline.html 1 2
 2002 Prentice Hall, Inc. All rights reserved. Chapter 4 – Cascading Style Sheets (CSS) Outline 4.1Introduction 4.2Inline Styles 4.3Creating Style Sheets.

 2002 Prentice Hall, Inc. All rights reserved. Chapter 4 – Cascading Style Sheets (CSS) Outline 4.1Introduction 4.2Inline Styles 4.3Creating Style Sheets.
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.

Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Cascading Style Sheets SP.772 May 6, 2002. CSS Useful for creating one unified look for an entire web site. Helps to seperate style from content. Can.

Cascading Style Sheets SP.772 May 6, CSS Useful for creating one unified look for an entire web site. Helps to seperate style from content. Can.
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.
Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.

Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.
 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.
 2008 Pearson Education, Inc. All rights reserved. 1 12 Document Object Model (DOM): Objects and Collections.

 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.
1 Dynamic HTML -Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style Sheets 6.4 Conflicting Styles 6.5 Linking External.

1 Dynamic HTML -Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style Sheets 6.4 Conflicting Styles 6.5 Linking External.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate.
Using color and fonts in HTML and XHTML Please use speaker notes for additional information!

Using color and fonts in HTML and XHTML Please use speaker notes for additional information!
1 XHTML Tables A table is a matrix of cells, for displaying content in rows and columns The cells can include almost any element Some cells display row.

1 XHTML Tables A table is a matrix of cells, for displaying content in rows and columns The cells can include almost any element Some cells display row.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.

HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
TECH2018 Multimedia and the Internet More about CSS and Page Layouts.

TECH2018 Multimedia and the Internet More about CSS and Page Layouts.

Similar presentations

Ads by Google