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
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Comments 0
Log in to post a comment