Chapter 31 - Dynamic HTML:

tacitmarigoldInternet and Web Development

Jan 25, 2014 (3 years and 6 months ago)

232 views



2003 Prentice Hall, Inc. All rights reserved.

1

Chapter 31
-

Dynamic HTML:
Path,

Sequencer and Sprite ActiveX Controls

Outline

31.1

Introduction

31.2

DirectAnimation Path Control

31.3

Multiple Path Control

31.4

Time Markers for Path Control

31.5

DirectAnimation Sequence Control

31.6

DirectAnimation Sprint Control

31.7

Animated GIFs

31.8

Web Resources




2003 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.





2003 Prentice Hall, Inc. All rights reserved.

3

31.1 Introduction

•
Additional DirectAnimation controls

–
Path Control

–
Sequencer Control

–
Sprite Control



2003 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
”



2003 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



2003 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



2003 Prentice Hall, Inc.

All rights reserved.

Outline

7

path1.html

(1 of 2)

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. 31.1: path1.html
--
>

6
<!
--
Introducing the path co
ntrol
--
>

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 =
"positio
n: absolute"
>

16

Path animation:
</h1>



Use
absolute

positioning



2003 Prentice Hall, Inc.

All rights reserved.

Outline

8

path1.html

(2 of 2)

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>



Start on page load

Run animation continuously

Take two seconds to complete

Reverse direction when done

Add two points to path

Set the target to
h1

tag



2003 Prentice Hall, Inc. All rights reserved.

9

31.2 DirectAnimation Path Control

Fig. 31.1 Demonstrating the DirectAnimation
Path

control.



2003 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



2003 Prentice Hall, Inc.

All rights reserved.

Outline

11

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. 31.2: path2.html
--
>

6
<!
--
Controlling multiple path
s
--
>

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


path2.html

(1 of 5)



2003 Prentice Hall, Inc.

All rights reserved.

Outline

12

path2.html

(2 of 5)

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

sty
le =
"left: 500; top: 500; color: white"
>

32

Multimedia Cyber Classroom
<br />


33

Programming Tip Icons
</span>


34

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>


Each element to be moved has
its own named
span

tag



2003 Prentice Hall, Inc.

All rights reserved.

Outline

13

path2.html

(3 of 5)

50

51
<span id =
"SEOspan"


52
style =
"left: 300; top:
-
50; color: blue"
>

53

Software Engineering Observations
</span>

54

55
<span id =
"EPTspan"


56
style =
"left: 500; top:
-
50; color: vi
olet"
>

57

Error
-
Prevention 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

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>


Assigning a
Path

to the
titleTxt

element



2003 Prentice Hall, Inc.

All rights reserved.

Outline

14

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
-
00
A0C90833E6"
>

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

<para
m 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"
/>


path2.html

(4 of 5)



2003 Prentice Hall, Inc.

All rights reserved.

Outline

15

path2.html

(5 of 5)

99

<param name =
"Shape"
value =

100


"PolyLine( 3, 600,
-
50, 300, 340, 200, 265 )"
/>

101

<param name =
"AutoStart"
value =
"1"
/>

102

</object>

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 =
"EPTPath"

114

classid =
"CLSID:D7A7D7C3
-
D47F
-
11D0
-
89D3
-
00A0C90833E6"
>

115

<param name =
"Target"
value =
"EP
Tspan"
/>

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>




2003 Prentice Hall, Inc. All rights reserved.

16

31.3 Multiple Path Controls

Fig. 31.2 Controlling multiple elements with the
Path

control.



2003 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



2003 Prentice Hall, Inc.

All rights reserved.

Outline

18

path3.html

(1 of 3)

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 31.3: path3.html
--
>

6
<!
--
Oval paths and time mark
ers
--
>

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


Creating a JavaScript
event

Change the
zIndex

of the
pole image



2003 Prentice Hall, Inc.

All rights reserved.

Outline

19

path3.html

(2 of 3)

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

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


Put large bug on
Oval

path

AddTimeMarker
s to fire
the
mark1

and
mark2

events



2003 Prentice Hall, Inc.

All rights reserved.

Outline

20

path3.html

(3 of 3)

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>

7
7
</body>

78
</html>




2003 Prentice Hall, Inc. All rights reserved.

21

31.4 Time Markers for Path Control

Fig. 31.3 Adding time markers for script interaction.



2003 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



2003 Prentice Hall, Inc.

All rights reserved.

Outline

23

sequencer.html

(1 of 4)

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. 31.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




2003 Prentice Hall, Inc.

All rights reserved.

Outline

24

sequencer.html

(2 of 4)

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/javascrip
t"
>

31
<!
--

32



function
show( object )

33


{

34


object.style.visibility =
"visible"
;

35


}

36

37



function
start()

38


{

39


sequencer.Item(
"showThem"
)
.Play();

40


}


oninit

handler to generate
sequence of events

Using
Item

and
at

to group actions



2003 Prentice Hall, Inc.

All rights reserved.

Outline

25

sequencer.html

(3 of 4)

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 =
"l
ine4"
style =
"position: absolute; left: 110;

64


top:160; visibility: hidden"
>
For dynamic effects
</div>


Start targeted element along path



2003 Prentice Hall, Inc.

All rights reserved.

Outline

26

sequencer.html

(4 of 4)

65

66

<object id =
"sequencer"
classid =


67

"CLSID:B0A6BAE2
-
AAF0
-
11d0
-
A152
-
00A0C908DB96"
>

68

</object>


69

70
<object id =
"pathControl
"

71
classi
d =
"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"
va
lue =
"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>


Adding the
Sequencer Control



2003 Prentice Hall, Inc. All rights reserved.

27

31.5 DirectAnimation Sequencer Control

Fig. 31.4 Using the DirectAnimation Sequencer Control.



2003 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





2003 Prentice Hall, Inc. All rights reserved.

29

31.6 DirectAnimation Sprite Control

Fig. 31.5 Source image for Sprite Control (
walking.gif
).



2003 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




2003 Prentice Hall, Inc.

All rights reserved.

Outline

31

sprite.html

(1 of 1)

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 31.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 =
"CL
SID: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>


Placing a Sprite
Control on the
page



2003 Prentice Hall, Inc. All rights reserved.

32

31.6 DirectAnimation Sprite Control

Fig. 31.6 Simple animation with the Sprite Control.



2003 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



2003 Prentice Hall, Inc.

All rights reserved.

Outline

34

sprite2.html

(1 of 3)

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. 31.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


The
onmouseover

event handler

Play in reverse,
three times faster

Must stop animation
before adjusting
PlayRate



2003 Prentice Hall, Inc.

All rights reserved.

Outline

35

sprite2.html

(2 of 3)

21

<script type =
"text/javascript"
for =
"bounce"

22

event =
"onmouseout"
>


23

<!
--


24



bounce.Stop();


25



bo
unce.PlayRate =
1
;


26



bounce.Play();


27

//
--
>


28

</script>


29
</head>

30

31

<body>

32

33
<h1>
Sprite Control
</h1>

34


The
onmouseout

event handler



2003 Prentice Hall, Inc.

All rights reserved.

Outline

36

sprite2.html

(3 of 3)

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>


Enabling mouse
events



2003 Prentice Hall, Inc. All rights reserved.

37

31.6 DirectAnimation Sprite Control

Fig. 31.7 Responding to mouse events with the Sprite Control.



2003 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




2003 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



2003 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 file

Optimized version

File type

Forward one
frame

Go to last
frame

Browser preview button

Back one
frame

Go to first
frame