flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright...

transcript

562 Dynamic HTML: Filters and Transitions Chapter 17

17Dynamic HTML:

Filters and Transitions

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>The flip filter</TITLE>9

10 <STYLE TYPE = "text/css">11 BODY { background-color: #CCFFCC } 1213 TABLE { font-size: 3em;14 font-family: Arial, sans-serif;15 background-color: #FFCCCC;16 border-style: ridge ;17 border-collapse: collapse }1819 TD { border-style: groove;20 padding: 1ex }21 </STYLE>22 </HEAD>2324 <BODY>2526 <TABLE>2728 <TR>29 30 <TD STYLE = "filter: fliph">Text</TD>31 <TD>Text</TD>32 </TR>3334 <TR>35 36 <TD STYLE = "filter: flipv fliph">Text</TD>37 <TD STYLE = "filter: flipv">Text</TD>38 </TR>3940 </TABLE>4142 </BODY>43 </HTML>

Fig. 17.1 Using the flip filter (part 1 of 2).

iw3htp_17.fm Page 562 Friday, May 5, 2000 6:08 PM

Chapter 17 Dynamic HTML: Filters and Transitions 563

Fig. 17.1 Using the flip filter (part 2 of 2).

No filters applied

flipv filter applied

fliph filter applied

Both fliph and flipvfilters applied

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>Chroma Filter</TITLE>9

10 <SCRIPT LANGUAGE = "JavaScript">1112 function changecolor()13 { 14 if ( colorSelect.value ) { // if the user selected a color,1516 // parse the value to hex and set the filter color.17 chromaImg.filters( "chroma" ).color = 18 parseInt( colorSelect.value, 16 );19 chromaImg.filters( "chroma" ).enabled = true;20 }21 else // if the user selected "None", 2223 // disable the filter.24 chromaImg.filters( "chroma" ).enabled = false;25 }2627 </SCRIPT>28 </HEAD>2930 <BODY>3132 <H1>Chroma Filter:</H1>3334 <IMG ID = "chromaImg" SRC = "trans.gif" STYLE = 35 "position: absolute; filter: chroma">3637 38 <SELECT ID = "colorSelect" ONCHANGE = "changecolor()">39 <OPTION VALUE = "">None40 <OPTION VALUE = "00FFFF">Cyan41 <OPTION VALUE = "FFFF00">Yellow42 <OPTION VALUE = "FF00FF">Magenta43 <OPTION VALUE = "000000" SELECTED>Black44 </SELECT>4546 </BODY>47 </HTML>

Fig. 17.2 Changing values of the chroma filter (part 1 of 2).

Fig. 17.2 Changing values of the chroma filter (part 2 of 2).

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>Mask Filter</TITLE>9 </HEAD>

1011 <BODY>1213 <H1>Mask Filter</H1> 1415 16 17 <DIV STYLE = "position: absolute; top: 125; left: 20; 18 filter: mask( color = #CCFFFF )">19 <H1 STYLE = "font-family: Courier, monospace">20 AaBbCcDdEeFfGgHhIiJj<BR>21 KkLlMmNnOoPpQqRrSsTt22 </H1>23 </DIV>2425 <IMG SRC = "gradient.gif" WIDTH = "400" HEIGHT = "200">26 </BODY>27 </HTML>

Fig. 17.3 Using the mask filter .

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>Misc. Image filters</TITLE>9

10 <STYLE TYPE = "text/css">11 .cap { font-weight: bold; 12 background-color: #DDDDAA;13 text-align: center } 14 </STYLE>15 </HEAD>1617 <BODY>18 <TABLE>19 <TR CLASS = "cap">20 <TD>Normal</TD>21 <TD>Grayscale</TD>22 <TD>Xray</TD>23 <TD>Invert</TD>24 </TR>2526 <TR>27 <TD><IMG SRC = "harvey.jpg"></TD>28 <TD><IMG SRC = "harvey.jpg" STYLE = "filter: gray"></TD>29 <TD><IMG SRC = "harvey.jpg" STYLE = "filter: xray"></TD>30 <TD><IMG SRC = "harvey.jpg" STYLE = "filter: invert"></TD>31 </TR>32 </TABLE>3334 </BODY>35 </HTML>

Fig. 17.4 Filters invert, gray and xray.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>Shadow Filter</TITLE>9

10 <SCRIPT LANGUAGE = "JavaScript">11 var shadowDirection = 0;1213 function start() 14 {15 window.setInterval( "runDemo()", 500 );16 }1718 function runDemo() 19 {20 shadowText.innerText = 21 "Shadow Direction: " + shadowDirection % 360;22 shadowText.filters( "shadow" ).direction = 23 ( shadowDirection % 360 );24 shadowDirection += 45;25 }26 </SCRIPT>27 </HEAD>2829 <BODY ONLOAD = "start()">3031 <H1 ID = "shadowText" STYLE = "position: absolute; top: 50;32 left: 50; padding: 10; filter: shadow( direction = 0,33 color = red )">Shadow Direction: 0</H1>34 </BODY>35 </HTML>

Fig. 17.5 Applying a shadow filter to text (part 1 of 2).

Fig. 17.5 Applying a shadow filter to text (part 2 of 2).

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>Alpha Filter</TITLE>9 <SCRIPT LANGUAGE = "JavaScript">

10 function run() 11 {12 pic.filters( "alpha" ).opacity = opacityButton.value; 13 pic.filters( "alpha" ).finishopacity = opacityButton2.value;14 pic.filters( "alpha" ).style = styleSelect.value;15 }16 </SCRIPT>17 </HEAD>1819 <BODY>2021 <DIV ID = "pic" 22 STYLE = "position: absolute; left:0; top: 0; 23 filter: alpha( style = 2, opacity = 100, 24 finishopacity = 0 )">25 <IMG SRC = "flag.gif">26 </DIV>2728 <TABLE STYLE = "position: absolute; top: 250; left: 0;29 background-color: #CCFFCC" BORDER = "1">30 31 <TR>32 <TD>Opacity (0-100):</TD>33 <TD><INPUT TYPE = "text" ID = "opacityButton" SIZE = "3"34 MAXLENGTH = "3" VALUE = "100"></TD>35 </TR>36 37 <TR>38 <TD>FinishOpacity (0-100):</TD>39 <TD><INPUT TYPE = "text" ID = "opacityButton2" SIZE = "3"40 MAXLENGTH = "3" VALUE = "0"></TD>41 </TR>42 43 <TR>44 <TD>Style:</TD>45 <TD><SELECT ID = "styleSelect">46 <OPTION VALUE = "1">Linear47 <OPTION VALUE = "2" SELECTED>Circular48 <OPTION VALUE = "3">Rectangular49 </SELECT></TD>50 </TR>51 52 <TR>

Fig. 17.6 Applying the alpha filter (part 1 of 2).

53 <TD ALIGN = "center" COLSPAN = "2"><INPUT TYPE = "button" 54 VALUE = "Apply" ONCLICK = "run()"></TD>55 </TR>56 </TABLE>5758 </BODY>59 </HTML>

Fig. 17.6 Applying the alpha filter (part 2 of 2).

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>Glow Filter</TITLE>9 <SCRIPT LANGUAGE = "JavaScript">

10 var strengthIndex = 1;11 var counter = 1;12 var upDown = true;13 var colorArray = [ "FF0000", "FFFF00", "00FF00", 14 "00FFFF", "0000FF", "FF00FF" ];15 function apply() 16 {17 glowSpan.filters( "glow" ).color = 18 parseInt( glowColor.value, 16);19 glowSpan.filters( "glow" ).strength = 20 glowStrength.value;21 }2223 function startdemo() 24 {25 window.setInterval( "rundemo()", 150 );26 }2728 function rundemo()29 {30 if ( upDown )31 glowSpan.filters( "glow" ).strength = strengthIndex++;32 else33 glowSpan.filters( "glow" ).strength = strengthIndex--;34 35 if ( strengthIndex == 1 ) { 36 upDown = !upDown;37 counter++;38 glowSpan.filters( "glow" ).color =39 parseInt( colorArray[ counter % 6 ], 16 );40 }41 42 if ( strengthIndex == 10 ) {43 upDown = !upDown;44 }45 }46 </SCRIPT>47 </HEAD>4849 <BODY STYLE = "background-color: #00AAAA">50 <H1>Glow Filter:</H1> 51

Fig. 17.7 Applying changes to the glow filter (part 1 of 2).

52 <SPAN ID = "glowSpan" STYLE = "position: absolute; left: 200; 53 top: 100; padding: 5; filter: glow( color = red, 54 strength = 5 )">55 <H2>Glowing Text</H2>56 </SPAN>5758 <TABLE BORDER = 1 STYLE = "background-color: #CCFFCC">59 <TR>60 <TD>Color (Hex)</TD>61 <TD><INPUT ID = "glowColor" TYPE = "text" SIZE = 6 62 MAXLENGTH = 6 VALUE = FF0000></TD>63 </TR>64 <TR>65 <TD>Strength (1-255)</TD>66 <TD><INPUT ID = "glowStrength" TYPE = "text" SIZE = 3 67 MAXLENGTH = 3 VALUE = 5></TD>68 </TR>69 <TR>70 <TD COLSPAN = 2>71 <INPUT TYPE = "BUTTON" VALUE = "Apply" 72 ONCLICK = "apply()">73 <INPUT TYPE = "BUTTON" VALUE = "Run Demo" 74 ONCLICK = "startdemo()"></TD>75 </TR>76 </TABLE>7778 </BODY>79 </HTML>

Fig. 17.7 Applying changes to the glow filter (part 2 of 2).

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>Blur Filter</TITLE>9 <SCRIPT LANGUAGE = "JavaScript">

10 var strengthIndex = 1;11 var blurDirection = 0;12 var upDown = 0;13 var timer;1415 function reBlur() 16 {17 blurImage.filters( "blur" ).direction =18 document.forms( "myForm" ).Direction.value;19 blurImage.filters( "blur" ).strength =20 document.forms( "myForm" ).Strength.value;21 blurImage.filters( "blur" ).add =22 document.forms( "myForm" ).Add.checked;23 }2425 function startDemo() 26 {27 timer = window.setInterval( "runDemo()", 5 );28 }2930 function runDemo( ) 31 {32 document.forms( "myForm" ).Strength.value = strengthIndex;33 document.forms( "myForm" ).Direction.value = 34 ( blurDirection % 360 );3536 if( strengthIndex == 35 || strengthIndex == 0 )37 upDown = !upDown;3839 blurImage.filters( "blur" ).strength = 40 ( upDown ? strengthIndex++ : strengthIndex-- );4142 if ( strengthIndex == 0 ) 43 blurImage.filters( "blur" ).direction = 44 ( ( blurDirection += 45 ) % 360 );45 }4647 </SCRIPT>48 </HEAD>4950 <BODY>51 <FORM NAME = "myForm">

Fig. 17.8 Using the blur filter with the add property false then true (part 1 of 3).

5253 <TABLE BORDER = "1" STYLE = "background-color: #CCFFCC">54 <CAPTION>Blur filter controls</CAPTION>5556 <TR>57 <TD>Direction:</TD>58 <TD><SELECT NAME = "Direction">59 <OPTION VALUE = "0">above60 <OPTION VALUE = "45">above-right61 <OPTION VALUE = "90">right62 <OPTION VALUE = "135">below-right63 <OPTION VALUE = "180">below64 <OPTION VALUE = "225">below-left65 <OPTION VALUE = "270">left66 <OPTION VALUE = "315">above-left67 </SELECT></TD>68 </TR>6970 <TR>71 <TD>Strength:</TD>72 <TD><INPUT NAME = "Strength" SIZE = "3" MAXLENGTH = "3" 73 VALUE = "0"></TD>74 </TR>7576 <TR>77 <TD>Add original?</TD>78 <TD><INPUT TYPE = "checkbox" NAME = "Add"></TD>79 </TR>8081 <TR>82 <TD ALIGN = "center" COLSPAN = "2"><INPUT TYPE = "button"83 VALUE = "Apply" ONCLICK = "reBlur();"></TD>84 </TR>8586 <TR>87 <TD COLSPAN = "2">88 <INPUT TYPE = "button" VALUE = "Start demo" 89 ONCLICK = "startDemo();"> 90 <INPUT TYPE = "button" VALUE = "Stop demo" 91 ONCLICK = "window.clearInterval( timer );"></TD>92 </TR>9394 </TABLE>95 </FORM>9697 <DIV ID = "blurImage" STYLE = "position: absolute; top: 0; 98 left: 300; padding: 0; filter: 99 blur( add = 0, direction = 0, strength = 0 ); 100 background-color: white;">101 <IMG ALIGN = "center" SRC = "shapes.gif">102 </DIV>103104 </BODY>105 </HTML>

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>Wave Filter</TITLE>9

10 <SCRIPT LANGUAGE = "JavaScript">11 var wavePhase = 0;1213 function start() 14 {15 window.setInterval( "wave()", 5 );16 }1718 function wave()19 {20 wavePhase++;21 flag.filters( "wave" ).phase = wavePhase;22 }23 </SCRIPT>24 </HEAD>2526 <BODY ONLOAD = "start();">2728 <SPAN ID = "flag" 29 STYLE = "align: center; position: absolute; 30 left: 30; padding: 15;31 filter: wave(add = 0, freq = 1, phase = 0, strength = 10)">32 <H1>Here's some waaaavy text</H1>33 </SPAN>3435 </BODY>36 </HTML>

Fig. 17.9 Adding a wave filter to text (part 1 of 2).

Fig. 17.9 Adding a wave filter to text (part 2 of 2).

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>DHTML dropShadow and light Filters</TITLE>9

10 <SCRIPT LANGUAGE = "JavaScript">11 function setlight( ) 12 {13 dsImg.filters( "light" ).addPoint( 150, 150,14 125, 255, 255, 255, 100);15 }1617 function run() 18 {19 eX = event.offsetX;20 eY = event.offsetY;2122 xCoordinate = Math.round( eX-event.srcElement.width/2, 0 );23 yCoordinate = Math.round( eY-event.srcElement.height/2, 0 );2425 dsImg.filters( "dropShadow" ).offx = xCoordinate / -3;26 dsImg.filters( "dropShadow" ).offy = yCoordinate / -3;2728 dsImg.filters( "light" ).moveLight(0, eX, eY, 125, 1);29 }30 </SCRIPT>31 </HEAD>3233 <BODY ONLOAD = "setlight()" STYLE = "background-color: green">3435 <IMG ID = "dsImg" SRC = "circle.gif" 36 STYLE = "top: 100; left: 100; filter: dropShadow( offx = 0,37 offy = 0, color = black ) light()" ONMOUSEMOVE = "run()">3839 </BODY>40 </HTML>

Fig. 17.10 Applying light filter with a dropshadow (part 1 of 2).

Fig. 17.10 Applying light filter with a dropshadow (part 2 of 2).

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD><TITLE>Cone lighting</TITLE>89 <SCRIPT LANGUAGE = "JavaScript">

10 var upDown = true;11 var counter = 0;12 var moveRate = -2;1314 function setLight() 15 {16 marquee.filters( "light" ).addCone( 0, marquee.height, 8,17 marquee.width/2, 30, 255, 150, 255, 50, 15 );18 marquee.filters( "light" ).addCone( marquee.width, 19 marquee.height, 8, 200, 30, 150, 255, 255, 50, 15 );20 marquee.filters( "light" ).addCone( marquee.width/2, 21 marquee.height, 4, 200, 100, 255, 255, 150, 50, 50 );2223 window.setInterval( "moveLight()", 100 );24 }25 26 function moveLight()27 {28 counter++;2930 if ( ( counter % 30 ) == 0 )31 upDown = !upDown; 32 33 if ( ( counter % 10 ) == 0 )34 moveRate *= -1;35 36 if ( upDown ) {37 marquee.filters( "light" ).moveLight( 0,-1,-1,3,0 );38 marquee.filters( "light" ).moveLight( 1,1,-1,3,0 );39 marquee.filters( "light" ).moveLight(2,moveRate,0,3,0);40 }41 else {42 marquee.filters( "light" ).moveLight( 0,1,1,3,0 );43 marquee.filters( "light" ).moveLight( 1,-1,1,3,0 );44 marquee.filters( "light" ).moveLight(2,moveRate,0,3,0);45 }46 }47 </SCRIPT>4849 <BODY STYLE = "background-color: #000000" ONLOAD = "setLight()">5051 <IMG ID = "marquee" SRC = "marquee.gif" 52 STYLE = "filter: light; position: absolute; left: 100;

Fig. 17.11 Dynamic cone source lighting (part 1 of 2).

53 top: 100">5455 </BODY>56 </HTML>

Fig. 17.11 Dynamic cone source lighting (part 2 of 2).

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>Using blendTrans</TITLE>9

10 <SCRIPT LANGUAGE = "JavaScript">11 function blendOut() 12 {13 textInput.filters( "blendTrans" ).apply();14 textInput.style.visibility = "hidden";15 textInput.filters( "blendTrans" ).play();16 }17 </SCRIPT>18 </HEAD>1920 <BODY>2122 <DIV ID = "textInput" ONCLICK = "blendOut()" 23 STYLE = "width: 300; filter: blendTrans( duration = 3 )">24 <H1>Some fading text</H1>25 </DIV>2627 </BODY>28 </HTML>

Fig. 17.12 Using the blendTrans transition .

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>Blend Transition II</TITLE>9

10 <SCRIPT LANGUAGE = "JavaScript">11 var whichImage = true;1213 function blend() 14 {15 if ( whichImage ) {16 image1.filters( "blendTrans" ).apply();17 image1.style.visibility = "hidden";18 image1.filters( "blendTrans" ).play();19 }20 else {21 image2.filters( "blendTrans" ).apply();22 image2.style.visibility = "hidden";23 image2.filters( "blendTrans" ).play();24 } 25 }2627 function reBlend ( fromImage ) 28 {29 if ( fromImage ) {30 image1.style.zIndex -= 2;31 image1.style.visibility = "visible";32 }33 else {34 image1.style.zIndex += 2;35 image2.style.visibility = "visible";36 }37 38 whichImage = !whichImage;39 blend();40 }41 </SCRIPT>42 </HEAD>4344 <BODY STYLE = "color: darkblue; background-color: lightblue" 45 ONLOAD = "blend()">4647 <H1>Blend Transition Demo</H1>4849 <IMG ID = "image2" SRC = "cool12.jpg" 50 ONFILTERCHANGE = "reBlend( false )" 51 STYLE = "position: absolute; left: 50; top: 50; width: 300;52 filter: blendTrans( duration = 4 ); z-index: 1">

Fig. 17.13 Blending between images with blendTrans (part 1 of 2).

5354 <IMG ID = "image1" SRC = "cool8.jpg" 55 ONFILTERCHANGE = "reBlend( true )" 56 STYLE = "position: absolute; left: 50; top: 50; width: 300;57 filter: blendTrans( duration = 4 ); z-index: 2">5859 </BODY>60 </HTML>

Fig. 17.13 Blending between images with blendTrans (part 2 of 2).

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 6 <HEAD>7 <TITLE>24 DHTML Transitions</TITLE>89 <SCRIPT>

10 var transitionName = 11 ["Box In", "Box Out",12 "Circle In", "Circle Out",13 "Wipe Up", "Wipe Down", "Wipe Right", "Wipe Left",14 "Vertical Blinds", "Horizontal Blinds",15 "Checkerboard Across", "Checkerboard Down",16 "Random Dissolve",17 "Split Vertical In", "Split Vertical Out",18 "Split Horizontal In", "Split Horizontal Out",19 "Strips Left Down", "Strips Left Up",20 "Strips Right Down", "Strips Right Up",21 "Random Bars Horizontal", "Random Bars Vertical",22 "Random"];2324 var counter = 0;25 var whichImage = true;2627 function blend() 28 {29 if ( whichImage ) {30 image1.filters( "revealTrans" ).apply();31 image1.style.visibility = "hidden";32 image1.filters( "revealTrans" ).play();33 }34 else {35 image2.filters( "revealTrans" ).apply();36 image2.style.visibility = "hidden";37 image2.filters( "revealTrans" ).play();38 } 39 }4041 function reBlend( fromImage )42 {43 counter++;4445 if ( fromImage ) {46 image1.style.zIndex -= 2;47 image1.style.visibility = "visible";48 image2.filters("revealTrans").transition = counter % 24;49 }50 else {51 image1.style.zIndex += 2;

Fig. 17.14 Transitions using revealTrans (part 1 of 5).

52 image2.style.visibility = "visible";53 image1.filters("revealTrans").transition = counter % 24;54 }5556 whichImage = !whichImage;57 blend();58 transitionDisplay.innerHTML = "Transition " + counter % 24 +59 ":<BR> " + transitionName[ counter % 24 ];60 }61 </SCRIPT>62 </HEAD>6364 <BODY STYLE = "color: white; background-color: lightcoral" 65 ONLOAD = "blend()">6667 <IMG ID = "image2" SRC = "icontext.gif" 68 STYLE = "position: absolute; left: 10; top: 10; 69 width: 300; z-index:1; visibility: visible;70 filter: revealTrans( duration = 2, transition = 0 )" 71 ONFILTERCHANGE = "reBlend( false )"> 7273 <IMG ID = "image1" SRC = "icons2.gif" 74 STYLE = "position: absolute; left: 10; top: 10; 75 width: 300; z-index:1; visibility: visible;76 filter: revealTrans( duration = 2, transition = 0 )"77 ONFILTERCHANGE = "reBlend( true )">7879 <DIV ID = "transitionDisplay" STYLE = "position: absolute; 80 top: 10; left: 325">Transition 0:<BR> Box In</DIV>8182 </BODY>83 </HTML>

flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright...

Documents