Chapter 31 - Dynamic HTML:

tacitmarigoldInternet και Εφαρμογές Web

25 Ιαν 2014 (πριν από 3 χρόνια και 5 μήνες)

224 εμφανίσεις



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