Filters and Transitions

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
2004 Prentice Hall, Inc. All rights reserved.
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 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
Outline
flip.html (1 of 2)
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 </style> </head> td { border-style: groove; padding: 1ex } table { font-size: 3em; font-family: Arial, sans-serif; background-color: #FFCCCC; border-style: ridge ; border-collapse: collapse }
2004 Prentice Hall, Inc.

All rights reserved.
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
<body> <table> <tr>  <td style = "filter: fliph">Text</td> <td>Text</td> </tr> <tr>  <td style = "filter: flipv fliph">Text</td> <td style = "filter: flipv">Text</td> </tr> </table> </body>
Outline
flip.html (2 of 2)
45 </html>

fliph filterapplied
Nofiltersapplied
Both fliph andflipv filtersapplied
flipv filterapplied
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 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  -->
Outline
chroma.html (1 of 3)
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <body>
// --> </script> </head>
Outline
<h1>Chroma Filter:</h1> <img id = "chromaImg" src = "trans.gif" style = "position: absolute; filter: chroma" "Transparent Image" /> <form action = "">   <select onchange = "changecolor( this.value )"> alt =

51
</body>
52 </html>
Outline

15.4 Creating Image masks Background is a solid color Foreground is transparent to the image or color behind it
1 2 3 4 5 6 7 8 9 10 11
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   --> --> 
Outline
mask.html (1 of 2)
12 13 14 15 16 17 18 19 20 21 22 23 24 25

26 27 28 29 30
</div> <img src = "gradient.gif" width = "400" height = "200" alt = "Image with Gradient Effect" /> </body>
Outline
mask.html (2 of 2)
31 </html>

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 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
Outline
misc.html (1 of 2)
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 </body> 47 </html>
<td><img src = "hc.jpg" alt = "normal scenic view" /></td> <td><img src = "hc.jpg" style = "filter: gray" alt = "gray scenic view"/> </td> </tr> <tr> <td>Xray</td> <td>Invert</td> </tr> <tr> <td><img src = "hc.jpg" style = "filter: xray" alt = "xray scenic view"/> </td> <td><img src = "hc.jpg" style = "filter: invert" alt = "inverted scenic view"/> </td> </tr> </table>
Outline
misc.html (2 of 2)

15.6 Adding shadows to Text

shadow filter
Showing effect
Three-dimensional appearance
1 2 3 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
Outline
shadow.html (1 of 2)
11 12 13 14 15 16 17 18 19 20 21 22 23 24

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 </html> }
shadowText.filters( "shadow" ).direction = ( shadowDirection % 360 ); shadowDirection += 45; // --> </script> </head> <body onload = "start()"> <h1 id = "shadowText" style = "position: absolute; top: 25; left: 25; padding: 10; filter: shadow( direction = 0, color = red )">Shadow Direction: 0</h1> </body>
Outline
shadow.html (2 of 2)

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 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  </script> </head> <body> --> 
Outline
alpha.html (1 of 3)
23 24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
<div id = "pic" style = "position: absolute; left:0; top: 0; filter: alpha( style = 2, opacity = 100, finishopacity = 0 )"> <img src = "flag.gif" alt = "Flag" /> </div> <table style = "position: absolute; top: 250; left: 0; background-color: #CCFFCC" border = "1"> <tr> <td>Opacity (0-100):</td> <td><input type = "text" id = "opacityButton" size = "3" maxlength = "3" value = "100" /></td> </tr> <tr> <td>FinishOpacity (0-100):</td> <td><input type = "text" id = "opacityButton2" size = "3" maxlength = "3" value = "0" /></td> </tr> <tr> <td>Style:</td> <td><select id = "styleSelect">
Outline
alpha.html (2 of 3)

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 </body> 67 </html> <tr> </tr>
<option value = "1">Linear</option> <option value = "2" selected = "selected"> Circular</option> <option value = "3">Rectangular</option> </select></td>
Outline
alpha.html (3 of 3)
<td align = "center" colspan = "2"> <input type = "button" value = "Apply" onclick = "run()" /> </td> </tr> </table>

15.8 Making Text glow

glow filter adds an aura of color around text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
Outline
glow.html (1 of 4)
25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
function startdemo() { window.setInterval( "rundemo()", 150 ); } function rundemo() { if ( upDown ) { glowSpan.filters( "glow" ).strength = strengthIndex++; } else { glowSpan.filters( "glow" ).strength = strengthIndex--; } if ( strengthIndex == 1 ) { upDown = !upDown; counter++; glowSpan.filters( "glow" ).color = parseInt( colorArray[ counter % 6 ], 16 ); } if ( strengthIndex == 10 ) { upDown = !upDown;
Outline
glow.html (2 of 4)

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 }
} // --> </script> </head> <body style = "background-color: #00AAAA"> <h1>Glow Filter:</h1> <span id = "glowSpan" style = "position: absolute; left: 200;top: 100; padding: 5; filter: glow( color = red, strength = 5 ); font-size: 2em"> Glowing Text </span> <table border = "1" style = "background-color: #CCFFCC"> <tr> <td>Color (Hex)</td> <td><input id = "glowColor" type = "text" size = "6" maxlength = "6" value = "FF0000" /></td> </tr> <tr> <td>Strength (1-255)</td> <td><input id = "glowStrength" type = "text" size = "3" maxlength = "3" value = "5" />
Outline
glow.html (3 of 4)

76 77 78 79 80 81 82 83 84 85 86 87 </body> 88 </html>
</td> </tr> <tr> <td colspan = "2"> <input type = "button" value = "Apply" onclick = "apply()" /> <input type = "button" value = "Run Demo" onclick = "startdemo()" /></td> </tr> </table>
Outline
glow.html (4 of 4)

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 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 4 5 6 7 8 9 10 11 12 13 14 15 16
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
Outline
blur.html (1 of 5)
17 18 19 20 21 22 23 24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
} function startDemo() { timer = window.setInterval( "runDemo()", 5 ); } function runDemo( ) { document.forms( "myForm" ).Strength.value = strengthIndex; document.forms( "myForm" ).Direction.value = ( blurDirection % 360 ); if ( strengthIndex == 35 || strengthIndex == 0 ) upDown = !upDown; blurImage.filters( "blur" ).strength = ( upDown ? strengthIndex++ : strengthIndex-- ); if ( strengthIndex == 0 ) blurImage.filters( "blur" ).direction = ( ( blurDirection += 45 ) % 360 ); } // -->
Outline
blur.html (2 of 5)

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
</script> </head> <body> <form name = "myForm" action = ""> <table border = "1" style = "background-color: #CCFFCC"> <caption>Blur filter controls</caption> <tr> <td>Direction:</td> <td><select name = "Direction"> <option value = "0">above</option> <option value = "45">above-right</option> <option value = "90">right</option> <option value = "135">below-right</option> <option value = "180">below</option> <option value = "225">below-left</option> <option value = "270">left</option> <option value = "315">above-left</option> </select></td> </tr> <tr> <td>Strength:</td>
Outline
blur.html (3 of 5)

76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
<td><input name = "Strength" size = "3" type = "text" maxlength = "3" value = "0" /></td> </tr> <tr> <td>Add original?</td> <td><input type = "checkbox" name = "AddBox" /></td> </tr> <tr> <td align = "center" colspan = "2"> <input type = "button" value = "Apply" onclick = "reBlur();" /></td> </tr> <tr> <td colspan = "2"> <input type = "button" value = "Start demo" onclick = "startDemo();" /> <input type = "button" value = "Stop demo" onclick = "window.clearInterval( timer );" /></td> </tr> </table> </form>
Outline
blur.html (4 of 5)

101 102 103 104 105 106 107 108 109 110 </body> 111 </html> </div> <div id = "blurImage" style = "position: absolute; top: 0; left: 300; padding: 0; filter: blur( add = 0, direction = 0, strength = 0 ); background-color: white;"> <img align = "middle" src = "shapes.gif" alt = "Shapes" />
Outline
blur.html (5 of 5)

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 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
Outline
wave.html (1 of 2)
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
// --> </script> </head> <body onload = "start();"> <span id = "flag" style = "align: center; position: absolute; left: 30; padding: 15; filter: wave(add = 0, freq = 1, phase = 0, strength = 10); font-size: 2em"> Here is some waaaavy text </span> </body>
Outline
wave.html (2 of 2)
41 </html>

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 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  -->
Outline
dropshadow.html (1 of 3)
11 12 13 14 15 16 17 18 19 20 21 22 23 24

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 }
xCoordinate = Math.round( eX-event.srcElement.width / 2, 0 ); yCoordinate = Math.round( eY-event.srcElement.height / 2, 0 ); dsImg.filters( "dropShadow" ).offx = xCoordinate / -3; dsImg.filters( "dropShadow" ).offy = yCoordinate / -3; dsImg.filters( "light" ).moveLight( 0, eX, eY, 125, 1 ); // --> </script> </head> <body onload = "setlight()" style = "background-color: green"> <img id = "dsImg" src = "circle.gif" style = "top: 100; left: 100; filter: dropShadow( offx = 0, offy = 0, color = black ) light()" onmousemove = "run()" alt = "Circle Image" />
Outline

49
</body>
50 </html>
Outline

1 2 3 4 5 6 7 8 9
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
Outline
conelight.html (1 of 3)
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
} function display() { counter++; if ( ( counter % 30 ) == 0 ) upDown = !upDown; if ( ( counter % 10 ) == 0 ) moveRate *= -1; if ( upDown ) { marquee.filters( "light" ).moveLight( 0, -1, -1, 3, 0 ); marquee.filters( "light" ).moveLight( 1, 1, -1, 3, 0 ); marquee.filters( "light" ).moveLight( 2, moveRate, 0, 3, 0); } else { marquee.filters( "light" ).moveLight( 0, 1, 1, 3, 0 ); marquee.filters( "light" ).moveLight( 1, -1, 1, 3, 0 );
Outline

51 52 53 54 55 56 57 58 59 60 61 62 63 64 </body> 65 </html> } </script> </head> }
marquee.filters( "light" ).moveLight( 2, moveRate, 0, 3, 0) ;
Outline
<body style = "background-color: #000000" onload = "setLight()"> <img id = "marquee" src = "marquee.gif" style = "filter: light; position: absolute; left: 25; top: 25" alt = "Deitel movie marquee" />

15.12 blendTrans Transition Example of the blendTrans transition

Creates a smooth fade-in/fade-out effect
1 2 3 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   </script> </head> -->
Outline
blendtrans.html (1 of 2)
11 12 13 14 15 16 17 18 19 20 21 22

23 24 25 26 27 28 29 30 31 </body> 32 </html> <div id = "textInput" onclick = "blendOut()" style = "width: 300; filter: blendTrans( duration = 3 )"> <h1>Some fading text</h1> </div> <body>
Outline
blendtrans.html (2 of 2)

1 2 3 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
Outline
blendtrans2.html (1 of 3)
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 } } } } }
image2.filters( "blendTrans" ).play();
Outline
function reBlend( fromImage ) { if ( fromImage ) { image1.style.zIndex -= 2; image1.style.visibility = "visible"; else { image1.style.zIndex += 2; image2.style.visibility = "visible";
whichImage = !whichImage; blend(); // --> </script> </head> <body style = "color: darkblue; background-color: lightblue" onload = "blend()">

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
<h1>Blend Transition Demo</h1> <img id = "image2" src = "cool12.jpg" onfilterchange = "reBlend( false )" style = "position: absolute; left: 50; top: 50; width: 300; filter: blendTrans( duration = 4 ); z-index: 1" alt = "First Transition Image" <img id = "image1" src = "cool8.jpg" onfilterchange = "reBlend( true )" style = "position: absolute; left: 50; top: 50; width: 300; filter: blendTrans( duration = 4 ); z-index: 2" alt = "Second Transition Image" </body> /> />
Outline
66 </html>

15.13 revealTrans Transition

revealTrans filter
Create professional-style transitions From box out to random dissolve
1 2 3 4 5 6 7 8 9 10
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
Outline
revealtrans.html (1 of 4)
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 if ( fromImage ) { image1.style.zIndex -= 2; image1.style.visibility = "visible"; function reBlend( fromImage ) { counter++; } } } else { image2.filters( "revealTrans" ).apply(); image2.style.visibility = "hidden"; image2.filters( "revealTrans" ).play(); function blend() { if ( whichImage ) { image1.filters( "revealTrans" ).apply(); image1.style.visibility = "hidden"; image1.filters( "revealTrans" ).play(); var counter = 0; var whichImage = true;
Outline

52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 } } }
image2.filters( "revealTrans" ).transition = counter % 24; else { image1.style.zIndex += 2; image2.style.visibility = "visible"; image1.filters( "revealTrans" ).transition = counter % 24;
Outline
whichImage = !whichImage; blend(); transitionDisplay.innerHTML = "Transition " + counter % 24 + ": " + transitionName[ counter % 24 ]; // --> </script> </head> <body style = "color: white; background-color: lightcoral" onload = "blend()">

74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
<img id = "image2" src = "icontext.gif" style = "position: absolute; left: 10; top: 10; width: 300; z-index:1; visibility: visible; filter: revealTrans( duration = 2, transition = 0 )" onfilterchange = "reBlend( false )" alt = "Programming Tips" /> <img id = "image1" src = "icons2.gif" style = "position: absolute; left: 10; top: 10; width: 300; z-index:1; visibility: visible; filter: revealTrans( duration = 2, transition = 0 )" onfilterchange = "reBlend( true )" alt = "Icons" /> <div id = "transitionDisplay" style = "position: absolute; top: 70; left: 80">Transition 0: Box In</div> </body>
Outline
91 </html>

Filters and Transitions

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Filters and Transitions

Uploaded by

Copyright:

Available Formats

Dynamic HTML: Filters and Transitions

2004 Prentice Hall, Inc. All rights reserved.

Objectives In this lesson, you will learn:

2004 Prentice Hall, Inc. All rights reserved.

15.1 Introduction Filters

2004 Prentice Hall, Inc. All rights reserved.

15.2 Flip Filters: flipv and fliph

vertically and horizontally, respectively

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

Both fliph andflipv filtersapplied

2004 Prentice Hall, Inc. All rights reserved.

15.3 Transparency with the chroma Filter

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

// --> </script> </head>

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

15.5 Miscellaneous Image Filters: invert, gray and xray

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc. All rights reserved.

15.6 Adding shadows to Text

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

15.7 Creating Gradients with alpha

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 </body> 67 </html> <tr> </tr>

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc. All rights reserved.

15.8 Making Text glow

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

15.9 Creating Motion with blur

blurring text or images in a certain direction

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

15.10 Using the wave Filter

distortions to text and images on Web pages

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc. All rights reserved.

15.11 Advanced Filters: dropShadow and light

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.

2004 Prentice Hall, Inc.