Dynamic HTML: Filters and Transitions Outline 15.1 15.2 15.3 15.4 15.5 15.6 15.7 15.8 15.9 15.10 15.11 15.12 15.13

Introduction Flip Filters: flipv and fliph Transparency with the chroma Filter  Creating Image masks Miscellaneous Image Filters: invert, gray and xray Adding shadows to Text Creating Gradients with alpha Making Text glow Creating Motion with blur Using the wave Filter  Advanced Filters: dropShadow and light blendTrans Transition revealTrans Transition

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 between Web pages.  –  To be able to modify filters dynamically, using DHTML.

15.1 Introduction • Filters  –  Cause changes that are persistent

• Transitions  –  Temporary  –  Allow transfer from one page to another with pleasant visual effect • For example, random dissolve

15.2 Flip Filters: flipv and fliph • flipv and fliph filters mirror text or images

vertically and horizontally, respectively

1

?>

2


3

Outline

"http://www.w3.org/TR/xhtml "http://www. w3.org/TR/xhtml1/DTD/xhtml1-str 1/DTD/xhtml1-strict.dtd" ict.dtd" >

4 5



-->

flip.html (1 of 2)

7 8 9 10

> filter

11 12 13



25

© 2004 Prentice Hall, Inc.

26



27 28

Outline

29 30



31



32

Text

33



34

flip.html (2 of 2)



35 36



37



38

Text

39

Text

40



41 42

fliph" >Text	Text	Text
Text	flipv" >Text

43 44 45



© 2004 Prentice Hall, Inc.

fliph filter applied

Bothfliph and flipv filters applied

No filters applied

flipv filter applied

15.3 Transparency with the chroma Filter  • chroma filter applies transparency effects

dynamically  –  Without using a graphics editor to hard-code transparency into the image

• onchange  –  Fires when the value of a form changes

1

?>

2


3

Outline

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

4 5



6



chroma.html (1 of 3)

7 8 9 10

> Filter

11 12

<script type = "text/javascript" "text/javascript"> >

13



27



28

Outline



29 30

chroma.html (2 of 3)



31 32

Chroma

Chroma Filter:

Filter:

33 34


35

"position: absolute; filter: chroma"

36

"Transparent Image" />

alt =

37 38

>

39



40



42

>None None

43

>Cyan Cyan

44

>Yellow Yellow

45

>Magenta Magenta

46

>

47 48 49

Black Black

50

© 2004 Prentice Hall, Inc.

51 52



Outline

chroma.html (3 of 3)

© 2004 Prentice Hall, Inc.

15.4 Creating Image masks • Background is a solid color  • Foreground is transparent to the image or color   behind it

1

?>

2


3

Outline

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

4 5



mask.html (1 of 2)

-->

7 8 9 10 11

> Filter

12 13



14 15

Mask

Mask Filter

Filter

16 17



18



19



20



27 28

Outline
29 30 31

alt = "Image with Gradient Effect" />

mask.html (2 of 2)

© 2004 Prentice Hall, Inc.

15.5 Miscellaneous Image Filters: invert, gray and xray • invert filter   –  Negative image effect • Dark areas become light and light areas become dark 

• gray filter   –  Grayscale image effect • All color is stripped from the image, only brightness data remains

• xray filter   –  X-ray effect • Inversion of the grayscale effect

1

?>

2


3

Outline

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

4 5



-->

misc.html (1 of 2)

7 8 9 10

> filters

11 12



18 19 20 21

>

22



23



24



25



© 2004 Prentice Hall, Inc.

26



28

Outline



31



32



33



34



35



36



37



40



43



44

Normal	Normal	Grayscale	Grayscale
27 "normal scenic view" />	29 alt = "gray scenic view"/> view" /> 30 misc.html (2 of 2)
Xray	Xray	Invert	Invert
38 alt = "xray scenic view"/> view" /> 39	41 alt = "inverted scenic view"/> view" /> 42

45 46 47



© 2004 Prentice Hall, Inc.

15.6 Adding shadows to Text • shadow filter   –  Showing effect • Three-dimensional appearance

1

?>

2


3

Outline

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

4 5



-->

shadow.html (1 of 2)

7 8 9 10

> Filter

11 12

<script type = "text/javascript" "text/javascript"> >

13



30



31

Outline

shadow.html (2 of 2)



32 33

>

34 35

)" >Shadow Direction: 0

0

38 39



© 2004 Prentice Hall, Inc.

15.7 Creating Gradients with alpha • alpha filter   –  Gradient effect • Gradual progression from starting color to target color 

– style • Uniform opacity ( value 0) • Linear gradient ( value 1) • Circular gradient ( value 2) • Rectangular gradient ( value 3)

1

?>

2


3

Outline

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

4 5



-->

alpha.html (1 of 3)

7 8 9

>

10

Filter

11

<script type = "text/javascript" "text/javascript"> >

12



21



22



23 24



25

© 2004 Prentice Hall, Inc.

26 27



Outline

alpha.html (2 of 3)

32 33 34

>

35 36



37

(0-100):

38



41 42 43 44

(0-100):

47 48



49



50



56



alpha.html (3 of 3)

57 58



59



63



64

Opacity	Opacity (0-100):	39 40 size = "3" maxlength = "3" value = "100" />
FinishOpacity	FinishOpacity (0-100):	45 46 size = "3" maxlength = "3" value = "0" />
Style:	Style:	> © 2004 Prentice Hall, Inc. 51 >Linear Linear 52 > 53 Outline Circular Circular 54 >Rectangular Rectangular 55
> 60 61 onclick = "run()" /> 62

65 66 67



© 2004 Prentice Hall, Inc.

15.8 Making Text glow • glow filter adds an aura of color around text

1

?>

2


3

Outline

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

4 5



-->

glow.html (1 of 4)

7 8 9

>

10

Filter

11

<script type = "text/javascript" "text/javascript"> >

12



54



55

Outline

glow.html (3 of 4)



56 57 58

Glow

Glow Filter:

Filter:

59 60



63

Glowing Text

64



65 66 67

#CCFFCC" >

68

(Hex)

69



71



72



73

(1-255)

74



77



78



79

Outline



84



85

Color	Color (Hex)	70 maxlength = "6" value = "FF0000" />
Strength	Strength (1-255)	75 size = "3" maxlength = "3" value = "5" /> © 2004 Prentice Hall, Inc. 76
> 80 81 onclick = "apply()" /> 82 glow.html (4 of 4) 83 onclick = "startdemo()" />

86 87 88



© 2004 Prentice Hall, Inc.

15.9 Creating Motion with blur • blur filter creates an illusion of motion by

 blurring text or images in a certain direction – Add • Adds a copy of the original or iginal image over the blurred image

– Direction • Determines in which direction the blur filter is applied

– strength • Determines how strong the blurring effect is

1

?>

2


3

Outline

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

4 5



6



blur.html (1 of 5)

7 8 9

>

10

Filter

11

<script type = "text/javascript" "text/javascript"> >

12



© 2004 Prentice Hall, Inc.

51 52



Outline

53 54 55

>

56 57

#CCFFCC">

58

controls

blur.html (3 of 5)

59 60



61



62



73 74 75



© 2004 Prentice Hall, Inc.

76



Outline



79 80



81

original?

82



83

blur.html (4 of 5)



84 85 86



90 91



92



98 99 100

Blur

Blur filter controls

Direction:	Direction:	> 63 >above above 64 >above-right above-right 65 >right right 66 >below-right below-right 67 >below below 68 >below-left below-left 69 >left left 70 >above-left above-left 71 72
Strength:	Strength:	77 78 maxlength = "3" value = "0" />
Add	Add original?
> 87 88 89 onclick = "reBlur();" />
> 93 94 95 onclick = "startDemo();" /> 96 97 onclick = "window.clearInterval( timer );" />

© 2004 Prentice Hall, Inc.

101 102



109 110 111



© 2004 Prentice Hall, Inc.

15.10 Using the wave Filter  • wave filter allows user to apply sine-wave

distortions 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

1

?>

2


3

Outline

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

4 5



-->

wave.html (1 of 2)

7 8 9 10

> Filter

11 12

<script type = "text/javascript" "text/javascript"> >

13



27



28

Outline



29 30

>

31 32

wave.html (2 of 2)


33

style = "align: center; position: absolute;

34

left: 30; padding: 15;

35

filter: wave(add = 0, freq = 1, phase = 0,

36

strength = 10); font-size: 2em" >

37

Here is some waaaavy text

38



39 40 41



© 2004 Prentice Hall, Inc.

15.11 Advanced Filters: dropShadow and

light • dropShadow  –  Creates a blacked-out version of the image, and places it  behind the image – offx and offy properties • Determined by how many pixels the drop shadow is offset

– color property • Specifies the color of the drop shadow

• light filters  –  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

1

?>

2


3

Outline

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

4 5



6



dropshadow.html (1 of 3)

7 8 9 10

>

11 12

<script type = "text/javascript" "text/javascript"> >

13



39



40



41 42



43 44


45

style = "top: 100; left: 100; filter: dropShadow(

46

offx = 0, offy = 0, color = black ) light()"

47

onmousemove = "run()" alt = "Circle Image" />

48

© 2004 Prentice Hall, Inc.

49 50



Outline

dropshadow.html (3 of 3)

© 2004 Prentice Hall, Inc.

1

?>

2


3

Outline

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

4 5



-->

conelight.html (1 of 3)

7 8 9

lighting

10 11

<script type = "text/javascript" "text/javascript"> >

12

var upDown = true true; ;

13

var counter = 0;

14

var moveRate = -2 -2; ;

15 16

function setLight()

17

{

18 19 20 21 22 23

marquee.filters( "light" ).addCone( 0, marquee.height, 8, marquee.width / 2, 30 30, , 255 255, , 150 150, , 255 255, , 50 50, , 15 ); marquee.filters( "light" ).addCone( marquee.width, marquee.height, 8, 200 200, , 30 30, , 150 150, , 255 255, , 255 255, , 50 50, , 15 ); marquee.filters( "light" ).addCone( marquee.width / 2, marquee.height, 4, 200 200, , 100 100, , 255 255, , 255 255, , 150 150, , 50 50, , 50 );

24 25

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

© 2004 Prentice Hall, Inc.

26

}

27

Outline

28

function display()

29

{

30

counter++;

31 32

conelight.html (2 of 3)

if ( ( counter % 30 ) == 0 )

33

upDown = !upDown;

34 35

if ( ( counter % 10 ) == 0 )

36

moveRate *= -1 -1; ;

37 38

if ( upDown ) {

39

marquee.filters( "light" ).moveLight(

40

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

41

marquee.filters( "light" ).moveLight(

42

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

43

marquee.filters( "light" ).moveLight(

44

2, moveRate, 0, 3, 0);

45

}

46

else {

47 48 49 50

marquee.filters( "light" ).moveLight( 0, 1, 1, 3, 0 ); marquee.filters( "light" ).moveLight( 1, -1 -1, , 1, 3, 0 );

© 2004 Prentice Hall, Inc.

51

marquee.filters( "light" ).moveLight(

52

2, moveRate, 0, 3, 0) ;

53 54

} }

55



56



57


58

Outline

conelight.html (3 of 3)

onload = "setLight()" "setLight()"> >

59 60


61

style = "filter: light; position: absolute; left: 25;

62

top: 25" alt = "Deitel movie marquee" />

63 64 65



© 2004 Prentice Hall, Inc.

15.12 blendTrans Transition • Example of the blendTrans transition  –  Creates a smooth fade-in/fade-out effect

1

?>

2


3

Outline

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

4 5



6



blendtrans.html (1 of 2)

7 8 9 10

> blendTrans

11 12

<script type = "text/javascript" "text/javascript"> >

13



21



22



© 2004 Prentice Hall, Inc.

23 24



Outline

25 26



30 31 32



© 2004 Prentice Hall, Inc.

1

?>

2


3

Outline

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

4 5



6



blendtrans2.html (1 of 3)

7 8 9 10

> II

11 12

<script type = "text/javascript" "text/javascript"> >

13



45



46



47 48 49

>

50

© 2004 Prentice Hall, Inc.

51

Blend

Blend Transition Demo

Demo

52

Outline

53


54

onfilterchange = "reBlend( false )"

55

style = "position: absolute; left: 50; top: 50;

56

width: 300; filter: blendTrans( duration = 4 );

57

z-index: 1" alt = "First Transition Image"

blendtrans2.html (3 of 3)

/>

58 59


60

onfilterchange = "reBlend( true )"

61

style = "position: absolute; left: 50; top: 50;

62

width: 300; filter: blendTrans( duration = 4 );

63

z-index: 2" alt = "Second Transition Image"

/>

64 65 66



© 2004 Prentice Hall, Inc.

15.13 revealTrans Transition • revealTrans filter   –  Create professional-style transitions  –  From box out to random dissolve

1

?>

2


3

Outline

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

4 5



-->

revealtrans.html (1 of 4)

7 8 9 10

> Transitions

11 12

<script type = "text/javascript" "text/javascript"> >

13



68



69



70 71 72

>

73

© 2004 Prentice Hall, Inc.

74


75

style = "position: absolute; left: 10; top: 10;

76

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

77

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

78

onfilterchange = "reBlend( false )" alt =

79

"Programming Tips" />

Outline

revealtrans.html (4 of 4)

80 81


82

style = "position: "position: absolute; left: 10; top: 10;

83

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

84

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

85

onfilterchange = "reBlend( true )" alt = "Icons" />

86 87

In