wt basics

8/10/2019 wt basics

1/62

2004 Prentice Hall, Inc. All rights reserved.

Chapter 15 - Dynamic HTML:

Filters and Transitions

Outline15.1 Introduction

15.2 Flip Filters:flipv

andfliph

15.3 Transparency with thechroma

Filter

15.4 Creating Image masks

15.5 Miscellaneous Image Filters:invert

,gray

andxray15.6 Adding

shadow

s to Text

15.7 Creating Gradients with alpha

15.8 Making Textglow

15.9 Creating Motion withblur

15.10 Using the waveFilter

15.11 Advanced Filters:drop hadow

andlight

15.12blendTrans

Transition

15.13 revealTransTransition

8/10/2019 wt basics

2/62


Objectives

In this lesson, you will learn: To use filters to achieve special effects.

To combine filters to achieve an even greater variety of

special effects.

To be able to create animated visual transitions betweenWeb pages.

To be able to modify filters dynamically, using DHTML.

8/10/2019 wt basics

3/62

8/10/2019 wt basics

4/62


15.2 Flip Filters:flipv

andfliph

flipvand fliphfilters mirror text or imagesvertically and horizontally, respectively

8/10/2019 wt basics

5/62

2004 Prentice Hall, Inc.

All rights reserved.

OutlineOutline

flip.html

(1 of 2)

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< -- Fig. 15.1: flip.html -->

6< -- Using the flip filters -->

7

8

9

10The flip filter

11

12

13body { background-color:#CCFFCC}

14

15table{ font-size:3em;

16font-family:Arial, sans-serif;

17background-color:#FFCCCC;

18border-style: ridge;

19border-collapse:collapse}

20

21td { border-style:groove;

22padding:1ex}

23

24

25

8/10/2019 wt basics

6/62



OutlineOutline

flip.html

(2 of 2)

26

27

28

29

30

31< -- Filters are applied in style declarations -->

32Text

33Text

34

35

36

37< -- More than one filter can be applied at once -->

38Text

39Text

40

41

42

43

44

45

8/10/2019 wt basics

7/622004 Prentice Hall, Inc. All rights reserved.

No filters applied

flipv filter applied

fliph filter applied

Both fliph and flipvfilters applied

8/10/2019 wt basics


15.3 Transparency with thechroma

Filter

chromafilter applies transparency effectsdynamically

Without using a graphics editor to hard-code transparency

into the image

onchange Fires when the valueof a form changes

1

8/10/2019 wt basics

9/62



OutlineOutline

chroma.html

(1 of 3)

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 < -- Fig 15.2: chroma.html -->

6 < -- Applying transparency using the chroma filter -->

7

8

9

10 Chroma Filter

11

12

13 < --

14functionchangecolor( theColor )

15 {

16 if( theColor ) {

17 // if the user selected a color, parse the

18 // value to hex and set the filter color.

19 chromaImg.filters( "chroma").color = theColor;

20 chromaImg.filters( "chroma" ).enabled = true;

21}

22 else// if the user selected "None",

23 // disable the filter.

24 chromaImg.filters( "chroma").enabled = false;

25 }

26

8/10/2019 wt basics

10/62



OutlineOutline

chroma.html

(2 of 3)

26 // -->

27

28

29

30

31

32 Chroma Filter:

33

34

37

38

39< -- The onchange event fires when -->

40 < -- a selection is changed -->

41

42 None

43 Cyan

44 Yellow

45 Magenta

46

47 Black

48

49

50

51

8/10/2019 wt basics

11/62



OutlineOutline

chroma.html

(3 of 3)

51

52

8/10/2019 wt basics


15.4 Creating Imagemasks

Background is a solid color Foreground is transparent to the image or color

behind it

1

8/10/2019 wt basics

13/62



OutlineOutline

mask.html

(1 of 2)

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< -- Fig 15.3: mask.html -->

6< -- Placing a mask over an image -->

7

8

9

10Mask Filter

11

12

13

14

15Mask Filter

16

17 < -- Filter parameters are specified in parentheses, -->

18< -- in the form param1 = value1, param2 = value2, -->

19< -- etc. -->

20

22

23AaBbCcDdEeFfGgHhIiJj

24KkLlMmNnOoPpQqRrSsTt

25

26

8/10/2019 wt basics

14/62



OutlineOutline

mask.html

(2 of 2)

26

27

28

30

31

8/10/2019 wt basics


15.5 Miscellaneous Image Filters: invert,

grayand xray

invertfilter Negative image effect

Dark areas become light and light areas become dark

grayfilter

Grayscale image effect All color is stripped from the image, only brightness data

remains

xrayfilter

X-ray effect Inversion of the grayscale effect

1

8/10/2019 wt basics

16/62



OutlineOutline

misc.html

(1 of 2)

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 < -- Fig 15.4: misc.html -->

6 < -- Image filters to invert, grayscale or xray an image -->

7

8

9

10 Misc. Image filters

11

12

13 .cap{ font-weight: bold;

14background-color: #DDDDAA;

15 text-align: center}

16

17

18

19

20

21

22 Normal

23 Grayscale

24

25

8/10/2019 wt basics

17/62

8/10/2019 wt basics


8/10/2019 wt basics


15.6 Addingshadows

to Text

shadowfilter Showing effect

Three-dimensional appearance

1

8/10/2019 wt basics

20/62

2004 Prentice Hall, Inc.All rights reserved.

OutlineOutline

shadow.html

(1 of 2)



4

5 < -- Fig 15.5: shadow.html -->

6 < -- Applying the shadow filter -->

7

8

9

10 Shadow Filter

11

12

13 < --

14varshadowDirection = 0;

15

16 functionstart()

17 {

18 window.setInterval( "runDemo()", 500);

19 }

20

21functionrunDemo()

22 {

23 shadowText.innerText =

24 "Shadow Direction: "+ shadowDirection % 360;

25shadowText.filters( "shadow").direction =

8/10/2019 wt basics

21/62


OutlineOutline

shadow.html

(2 of 2)

26( shadowDirection % 360);

27shadowDirection += 45;

28}

29// -->

30

31

32

33

34

35Shadow Direction: 0

38

39

8/10/2019 wt basics

22/62

1

8/10/2019 wt basics

23/62


OutlineOutline

alpha.html

(1 of 3)



4

5 < -- Fig 15.6: alpha.html -->

6 < -- Applying the alpha filter to an image -->

7

8

9

10 Alpha Filter

11

12 < --

13 functionrun()

14

{

15 pic.filters( "alpha" ).opacity = opacityButton.value;

16 pic.filters( "alpha").finishopacity =

17 opacityButton2.value;

18 pic.filters( "alpha").style = styleSelect.value;

19 }

20 // -->

21

22

23

24

25

26

8/10/2019 wt basics

24/62


OutlineOutline

alpha.html

(2 of 3)

27 style = "position: absolute; left:0; top: 0;

28 filter: alpha( style = 2, opacity = 100,

29 finishopacity = 0 )">

30

31

32

33

35

36

37 Opacity (0-100):

38

40

41

42

43 FinishOpacity (0-100):

44

46

47

48

49 Style:

50

51Linear

8/10/2019 wt basics

25/62


OutlineOutline

alpha.html

(3 of 3)

52

53 Circular

54 Rectangular

55

56

57

58

59

60

62

63

64

65

66

67

8/10/2019 wt basics

26/62


8/10/2019 wt basics

27/62


15.8 Making Textglow

glowfilter adds an aura of color around text

1

8/10/2019 wt basics

28/62


OutlineOutline

glow.html

(1 of 4)



4

5 < -- Fig 15.7: glow.html -->

6 < -- Applying the glow filter -->

7

8

9

10 Glow Filter

11

12 < --

13 varstrengthIndex = 1;

14varcounter = 1;

15 varupDown = true;

16 varcolorArray = [ "FF0000", "FFFF00", "00FF00",

17 "00FFFF", "0000FF", "FF00FF"];

18 functionapply()

19 {

20 glowSpan.filters( "glow").color =

21parseInt( glowColor.value, 16);

22 glowSpan.filters( "glow" ).strength =

23 glowStrength.value;

24 }

25

26functionstartdemo()

8/10/2019 wt basics

29/62


OutlineOutline

glow.html

(2 of 4)

27 {

28 window.setInterval( "rundemo()",150);

29 }

30

31 functionrundemo()

32 {

33 if( upDown ) {

34 glowSpan.filters( "glow" ).strength =

35 strengthIndex++;

36 }

37 else {

38 glowSpan.filters( "glow").strength =

39 strengthIndex--;

40 }

41

42 if( strengthIndex == 1) {

43 upDown = upDown;

44 counter++;

45 glowSpan.filters( "glow").color =

46parseInt( colorArray[ counter % 6], 16);

47 }

48

49 if( strengthIndex == 10) {

50 upDown = upDown;

51}

8/10/2019 wt basics

30/62


OutlineOutline

glow.html

(3 of 4)

52 }

53 // -->

54

55

56

57

58 Glow Filter:

59

60

63 Glowing Text

64

65

66

67

68 Color (Hex)

69

71

72

73 Strength (1-255)

74

76

8/10/2019 wt basics

31/62


OutlineOutline

glow.html

(4 of 4)

77

78

79

80

82

84

85

86

87

88

8/10/2019 wt basics

32/62


15.9 Creating Motion withblur

blurfilter creates an illusion of motion byblurring text or images in a certain direction

Add

Adds a copy of the original image over the blurred image

Direction Determines in which direction the blurfilter is applied

strength

Determines how strong the blurring effect is

OO1

8/10/2019 wt basics

33/62


OutlineOutline

blur.html

(1 of 5)



4

5 < -- Fig 15.8: blur.html -->

6 < -- The blur filter -->

7

8

9

10 Blur Filter

11

12 < --

13 varstrengthIndex = 1;

14 varblurDirection = 0;

15 varupDown = 0;

16 vartimer;

17

18 functionreBlur()

19 {

20 blurImage.filters("blur" ).direction =

21document.forms( "myForm").Direction.value;

22 blurImage.filters( "blur").strength =

23 document.forms( "myForm").Strength.value;

24 blurImage.filters( "blur" ).add =

25 document.forms("myForm").AddBox.checked;

O tliO tli26

}

27

8/10/2019 wt basics

34/62


OutlineOutline

blur.html

(2 of 5)

27

28 functionstartDemo()

29 {

30 timer = window.setInterval( "runDemo()", 5);

31 }

32

33 functionrunDemo( )

34 {

35 document.forms( "myForm").Strength.value =

36 strengthIndex;

37 document.forms( "myForm").Direction.value =

38 ( blurDirection % 360);

39

40 if ( strengthIndex == 35|| strengthIndex == 0)

41 upDown = upDown;

42

43 blurImage.filters( "blur").strength =

44 ( upDown ? strengthIndex++ : strengthIndex-- );

45

46if( strengthIndex == 0)

47 blurImage.filters( "blur" ).direction =

48 ( ( blurDirection += 45) % 360);

49 }

50 // -->

O tliO tli51

52

8/10/2019 wt basics

35/62


OutlineOutline

blur.html

(3 of 5)

52

53

54

55

56

57

58 Blur filter controls

59

60

61 Direction:

62

63above

64 above-right

65 right

66below-right

67below

68 below-left

69 left

70above-left

71

72

73

74

75Strength:

O tliO tli76

8/10/2019 wt basics

36/62


OutlineOutline

blur.html

(4 of 5)

77 maxlength = 3 value = 0 />

78

79

80

81Add original?

82

83

84

85

86

87

89

90

91

92

93

95

97

98

99

100

O tliO tli101

102

8/10/2019 wt basics

37/62


OutlineOutline

blur.html

(5 of 5)

102

106

108

109

110

111

8/10/2019 wt basics

38/62


15.10 Using thewave

Filter

wavefilter allows user to apply sine-wavedistortions to text and images on Web pages

add

Adds a copy of the text or image underneath the filtered effect

freq

Determines the frequency of the wave applied

phase

Indicates the phase shift of the wave

O tlineO tline1

2

8/10/2019 wt basics

39/62


OutlineOutline

wave.html

(1 of 2)



4

5 < -- Fig 15.9: wave.html -->

6 < -- Applying the wave filter -->

7

8

9

10 Wave Filter

11

12

13 < --

14 varwavePhase = 0;

15

16 functionstart()

17 {

18 window.setInterval( "wave()", 5);

19 }

20

21functionwave()

22 {

23 wavePhase++;

24 flag.filters( "wave").phase = wavePhase;

25 }

OutlineOutline26

// -->

27

8/10/2019 wt basics

40/62


OutlineOutline

wave.html

(2 of 2)

27

28

29

30

31

32

37 Here is some waaaavy text

38

39

40

41

8/10/2019 wt basics

41/62


15 11 Advanced Filters: and

8/10/2019 wt basics

42/62


15.11 Advanced Filters: drop hadowand

light

dropShadow

Creates a blacked-out version of the image, and places it

behind the image

offxand offyproperties

Determined by how many pixels the drop shadow is offset

colorproperty

Specifies the color of the drop shadow

Filter:dropShadow(offx=0,offy=0,color= ) light()

8/10/2019 wt basics

43/62


lightfilters

Most powerful and advanced filter in Internet Explorer 6.0

Allows simulation of a light source shining on Web page

All parameters and methods are set by scripting

addPoint

Adds a point light source

addPoint(x,y,height,R,G,B,strength)

Img.filters(light).addPoint(15,15,40,255,255,255,100)

Another important method of light ismoveLight(index,x,y,heigth,abs/rel)

OutlineOutline1

2

8/10/2019 wt basics

44/62


OutlineOutline

dropshadow.html

(1 of 3)



4

5 < -- Fig. 15.10: dropshadow.html -->

6 < -- Using the light filter with the dropshadow filter -->

7

8

9

10 DHTML dropShadow and light Filters

11

12

13 < --

14 functionsetlight( )

15 {

16 dsImg.filters( "light").addPoint( 150, 150,

17 125, 255, 255, 255, 100);

18 }

19

20 functionrun()

21{

22 eX = event.offsetX;

23 eY = event.offsetY;

24

OutlineOutline25 xCoordinate = Math.round(

26eX-event.srcElement.width / 2, 0);

8/10/2019 wt basics

45/62


OutlineOutline

dropshadow.html

(2 of 3)

27 yCoordinate = Math.round(

28 eY-event.srcElement.height / 2, 0);

29

30dsImg.filters( dropShadow ).offx =

31xCoordinate / -3;

32 dsImg.filters( dropShadow ).offy =

33 yCoordinate / -3;

34

35dsImg.filters( light ).moveLight(

360, eX, eY, 125, 1 );

37}

38// -->

39

40

41

42

43

44

48

OutlineOutline49

50

8/10/2019 wt basics

46/62


OutlineOutline

dropshadow.html

(3 of 3)

OutlineOutline1


8/10/2019 wt basics

47/62


OutlineOutline

conelight.html

(1 of 3)


4

5 < -- Fig 15.11: conelight.html -->

6 < -- Automating the cone light source -->

7

8

9 Cone lighting

10

11

12 varupDown = true;

13 varcounter = 0;

14 varmoveRate = -2;

15

16 functionsetLight()

17 {

18 marquee.filters( "light").addCone( 0, marquee.height,

19 8, marquee.width / 2, 30, 255, 150, 255, 50, 15);

20 marquee.filters( "light").addCone( marquee.width,

21marquee.height, 8, 200, 30, 150, 255, 255, 50, 15);

22 marquee.filters( "light").addCone( marquee.width / 2,

23 marquee.height, 4, 200, 100, 255, 255, 150, 50, 50);

24

25 window.setInterval( "display()", 100);

OutlineOutline26

}

27

8/10/2019 wt basics

48/62


OutlineOutline

conelight.html

(2 of 3)

28 functiondisplay()

29 {

30 counter++;

31

32 if( ( counter % 30) == 0)

33 upDown = upDown;

34

35 if ( ( counter % 10) == 0)

36 moveRate *= -1;

37

38 if( upDown ) {

39 marquee.filters( "light" ).moveLight(

40 0, -1, -1, 3, 0);

41 marquee.filters("light").moveLight(

42 1, 1, -1, 3, 0);

43 marquee.filters( "light").moveLight(

44 2, moveRate, 0, 3, 0);

45 }

46else{


48 0, 1, 1, 3, 0);


50 1, -1, 1, 3, 0);

OutlineOutline51

marquee.filters( "light" ).moveLight(

52 2, moveRate, 0, 3, 0) ;

8/10/2019 wt basics

49/62


OutlineOutline

conelight.html

(3 of 3)

53 }

54 }

55

56

57

59

60

63

64

65

8/10/2019 wt basics

50/62


15.12blendTrans

Transition

Example of the blendTranstransition

Creates a smooth fade-in/fade-out effect

OutlineOutline1


8/10/2019 wt basics

51/62


OutlineOutline

blendtrans.html

(1 of 2)


4

5 < -- Fig 15.12: blendtrans.html -->

6 < -- Blend transition -->

7

8

9

10 Using blendTrans

11

12

13 < --

14 functionblendOut()

15 {

16 textInput.filters( "blendTrans").apply();

17 textInput.style.visibility = "hidden";

18 textInput.filters( "blendTrans").play();

19 }

20 // -->

21

22

OutlineOutline23

24

8/10/2019 wt basics

52/62


OutlineOutline

blendtrans.html

(2 of 2)

25

26

28 Some fading text

29

30

31

32

OutlineOutline1


8/10/2019 wt basics

53/62


OutlineOutline

blendtrans2.html

(1 of 3)

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

4

5 < -- Fig 15.13: blendtrans2.html -->

6 < -- Blend Transition -->

7

8

9

10 Blend Transition II

11

12

13 < --

14 varwhichImage = true;

15

16 functionblend()

17 {

18 if( whichImage ) {

19 image1.filters( "blendTrans").apply();

20 image1.style.visibility = "hidden";

21image1.filters( "blendTrans").play();

22 }

23 else{

24 image2.filters( "blendTrans").apply();

25 image2.style.visibility = "hidden";

OutlineOutline26

image2.filters( "blendTrans").play();

27 }

8/10/2019 wt basics

54/62


OutlineOutline

blendtrans2.html

(2 of 3)

28 }

29

30 functionreBlend( fromImage )

31 {

32 if( fromImage ) {

33image1.style.zIndex -= 2;

34 image1.style.visibility = "visible";

35 }

36 else{

37 image1.style.zIndex += 2;


39 }

40

41 whichImage = whichImage;

42 blend();

43 }

44 // -->

45

46

47

48

50

OutlineOutline51

Blend Transition Demo

52

8/10/2019 wt basics

55/62


blendtrans2.html

(3 of 3)

53

58

59

64

65

66

8/10/2019 wt basics

56/62

8/10/2019 wt basics

57/62


15.13revealTrans

Transition

revealTransfilter

Create professional-style transitions

From box out to random dissolve

OutlineOutline1


8/10/2019 wt basics

58/62


revealtrans.html

(1 of 4)


4

5 < -- Fig. 15.14: revealtrans.html -->

6 < -- Cycling through 24 transitions -->

7

8

9

10 24 DHTML Transitions

11

12

13 < --

14 vartransitionName =

15 ["Box In","Box Out",

16 "Circle In","Circle Out",

17 "Wipe Up","Wipe Down","Wipe Right", "Wipe Left",

18 "Vertical Blinds","Horizontal Blinds",

19 "Checkerboard Across","Checkerboard Down",

20 "Random Dissolve",

21

"Split Vertical In","Split Vertical Out",

22 "Split Horizontal In","Split Horizontal Out",

23 "Strips Left Down","Strips Left Up",

24 "Strips Right Down","Strips Right Up",

25 "Random Bars Horizontal","Random Bars Vertical",

26 "Random"];

OutlineOutline27

28varcounter = 0;

8/10/2019 wt basics

59/62


revealtrans.html

(2 of 4)

29varwhichImage = true;

30

31 functionblend()

32 {

33if( whichImage ) {

34image1.filters( "revealTrans" ).apply();

35image1.style.visibility = "hidden";

36image1.filters( "revealTrans" ).play();

37 }

38else{

39image2.filters( "revealTrans" ).apply();

40image2.style.visibility = "hidden";

41image2.filters( "revealTrans" ).play();

42 }

43}

44

45functionreBlend( fromImage )

46{

47 counter++;

48

49if( fromImage ) {

50image1.style.zIndex -= 2;

51image1.style.visibility = "visible";

OutlineOutline52

image2.filters( "revealTrans" ).transition =

53 counter % 24;

8/10/2019 wt basics

60/62


revealtrans.html

(3 of 4)

54 }

55 else{

56 image1.style.zIndex += 2;


58 image1.filters( "revealTrans").transition =

59counter % 24;

60 }

61

62 whichImage = whichImage;

63 blend();

64 transitionDisplay.innerHTML = "Transition "+

65 counter % 24+ ": "+ transitionName[ counter % 24];

66 }

67 // -->

68

69

70

71

73

OutlineOutline74

8/10/2019 wt basics

61/62


revealtrans.html

(4 of 4)

76 width: 300; z-index:1; visibility: visible;

77 filter: revealTrans( duration = 2, transition = 0 )"

78 onfilterchange = "reBlend( false )"alt =

79 "Programming Tips"/>

80

81

86

87 Transition 0: Box In

89

90

91

8/10/2019 wt basics

62/62

Documents

wt basics