2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 15 - Dynamic HTML: Filters and Transitions Outline 15.1 Introduction 15.2 Flip filters: flipv and fliph 15.3 Transparency with the chroma Filter 15.4 Creating Image masks 15.5 Miscellaneous Image filters: invert, gray and xray 15.6 Adding shadows to Text 15.7 Creating Gradients with alpha 15.8 Making Text glow 15.9 Creating Motion with blur Using the wave Filter Advanced Filters: dropShadow and light Transitions I: Filter blendTrans Transitions II: Filter revealTrans 2001 Prentice Hall, Inc. All rights reserved. Outline 2 Flip.html 1 2 The flip filter body { background-color: #CCFFCC } table { font-size: 3em; 16 font-family: Arial, sans-serif; 17 background-color: #FFCCCC; 18 border-style: ridge ; 19 border-collapse: collapse } td { border-style: groove; 22 padding: 1ex } Text 33 Text Line 32 applies a filter using the style attribute. The filter applied is fliph, which flips the affected object horizontally. 2001 Prentice Hall, Inc. All rights reserved. Outline 3 Flip.html Program Output Text 39 Text Line 38 applies multiple filters separated by spaces as values of the filter attribute. In this case, the flipv filter is also applied, which vertically flips the object to which the filter is applied. 2001 Prentice Hall, Inc. All rights reserved. Outline 4 Chroma.html 1 2 Chroma Filter Chroma Filter: 33 The chroma filter applies transparency effects dynamically into the image. Lines 19 sets the filter properties dynamically. This is the color value from the select drop-down list (lines 4148) passed in as an argument to the function. Line 20 turns on the filter by setting its enabled property to true. If None (line 43) is selected from the drop-down list, the filter is disabled. 2001 Prentice Hall, Inc. All rights reserved. Outline 5 Chroma.html Program Output 34 None 43 Cyan 44 Yellow 45 Magenta Black The onchange event fires whenever the value of a form field changes. In this example, an onchange event occurs when the user makes a new selection in the colorSelect drop-down list. The user decides to apply the chroma filter to the color yellow. 2001 Prentice Hall, Inc. All rights reserved. Outline 6 Mask.html 1 2 Mask Filter Mask Filter

AaBbCcDdEeFfGgHhIiJj 24 KkLlMmNnOoPpQqRrSsTt The mask filter is applied to an h1 element which overlaps an image. Line 21 sets the color parameter for the mask filter. Applying the mask will make the foreground of that h1 element (the text inside it) transparent, so you can see the background image through the letters in the foreground. 2001 Prentice Hall, Inc. All rights reserved. Outline 7 Program Output Applying the mask filter to an image allows you to create an image mask, in which the background of an element is a solid color and the foreground of an element is transparent to the image or color behind it. 2001 Prentice Hall, Inc. All rights reserved. Outline 8 Misc.html 1 2 Misc. Image filters cap { font-weight: bold; 14 background-color: #DDDDAA; 15 text-align: center } Normal 23 Grayscale 28 Xray 34 Invert 35 The gray filter applies a grayscale image effect, in which all color is stripped from the image and all that remains is brightness data. 2001 Prentice Hall, Inc. All rights reserved. Outline 9 Misc.html The xray filter applies an x-ray effect, which basically is an inversion of the grayscale effect. The invert filter applies a negative image effectdark areas become light and light areas become dark. 2001 Prentice Hall, Inc. All rights reserved. Outline 10 Program Output This is a display of the effects of the three different types of filters on the image at the top left corner. 2001 Prentice Hall, Inc. All rights reserved. Outline 11 Shadow.html 1 2 Shadow Filter Property direction of the shadow filter determines in which direction the shadow effect is applied. Function runDemo, cycles through the direction property values, from 0 to 315, and update property innerText of the h1 element ( shadowText ) to match the current shadow direction. 2001 Prentice Hall, Inc. All rights reserved. Outline 12 Shadow.html Program Output Shadow Direction: The padding CSS style is applied to the h1 element. Otherwise, the shadow effect is partially cut off by the border of the element. Property color specifies the color of the shadow that is applied to the text. 2001 Prentice Hall, Inc. All rights reserved. Outline 13 Alpha.html 1 2 Alpha Filter

35 The opacity property determines what percentage the specified gradient starts. The finishopacity property determines what percentage the specified gradient finishes. The alpha filter is used to achieve gradient and transparency effects. The style property of the filter determines what style of opacity should be applied. 2001 Prentice Hall, Inc. All rights reserved. Outline 14 Alpha.html Opacity (0-100): 38 FinishOpacity (0-100): 44 Style: Linear Circular 54 Rectangular There are 4 styles of opacity that can be applied to an image, each represented by a value 0-3: uniform opacity (0), linear gradient (1), circular gradient (2) and rectangular gradient (3). 2001 Prentice Hall, Inc. All rights reserved. Outline 15 Program Output The user selects linear opacity to apply to the image at a start percentage of 100 and end percentage of 10. The default image has circular opacity applied at a start percentage of 100 and an end percentage of 0. 2001 Prentice Hall, Inc. All rights reserved. Outline 16 Glow.html 1 2 Glow Filter Glow Filter: 63 Glowing Text Lines 3340 increment or decrement the strength property of the glow filter based on the value of upDown. The if structures at lines 42 and 49 toggle UpDown, when strengthIndex reaches either 1 or 10 Lines 45 46 change the color attribute of the glow filter based on counter. The parseInt function is used to assign a proper hexadecimal value to the color property. Add padding to prevent the borders of the element from cutting off the affects of the glow filer. 2001 Prentice Hall, Inc. All rights reserved. Outline 18 Glow.html Color (Hex) 69 Strength (1-255) 74 82 Clicking the Run Demo button starts a cycle that oscillates the filter strength, cycling through the colors in colorArray after every loop. 2001 Prentice Hall, Inc. All rights reserved. Outline 19 Program Output The color and strength selected for the glow filter will be applied to Glowing Text on the right of the table. 2001 Prentice Hall, Inc. All rights reserved. Outline 20 Blur.html 1 2 Blur Filter Blur filter controls 59 The direction property is incremented when the strength of the blur filter is 0 (i.e., when an iteration has completed). The value assigned to the direction property cycles through all the multiples of 45 between 0 and 360. 2001 Prentice Hall, Inc. All rights reserved. Outline 22 Blur.html Direction: above 64 above-right 65 right 66 below-right 67 below 68 below-left 69 left 70 above-left Strength: 76 Add original? If the user checks the checkbox, a value of true is selected, and an image of the original is added to the blurred image. 2001 Prentice Hall, Inc. All rights reserved. Outline 23 Blur.html 95

106 Initial values are assigned to the blur filter. 2001 Prentice Hall, Inc. All rights reserved. Outline 24 Program Output A blurred image without an original copy added on top of it. A blurred image with an original copy added on top of it. 2001 Prentice Hall, Inc. All rights reserved. Outline 25 Wave.html 1 2 Wave Filter The wave filter allows you to apply sine- wave distortions to text and images. 2001 Prentice Hall, Inc. All rights reserved. Outline 26 Wave.html 37 Here is some waaaavy text The phase property indicates the phase shift of the wave. Increasing this property only shifts the wave in space. The freq property determines the frequency of the wave appliedi.e., how many complete sine waves are applied in the affected area. The strength property is the amplitude of the sine wave that is applied. The add property adds a copy of the text or image underneath the filtered effect. The add property is useful only when applying the wave filter to images. 2001 Prentice Hall, Inc. All rights reserved. Outline 27 Program Output The phase of the wave filter is incremented every 5 seconds. Outputs reflecting the phase at different intervals is displayed to the left. 2001 Prentice Hall, Inc. All rights reserved. Outline 28 Dropshadow.html 1 2 DHTML dropShadow and light Filters The color property specifies the color of the drop shadow. The offx and offy properties determine by how many pixels the drop shadow is offset. The effect of dropshadow is seen in the background in black. The effect of light is seen in the brighter portions of the text. 2001 Prentice Hall, Inc. All rights reserved. Outline 30 Conelight.html 1 2 Cone lighting var upDown = true; 13 var counter = 0; 14 var moveRate = -2; function setLight() 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, 21 marquee.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 ); window.setInterval( "display()", 100 ); 26 } function display() 29 { 30 counter++; if ( ( counter % 30 ) == 0 ) 33 upDown = !upDown; 34 Lines 1819 add our first cone light source, using the addCone method. 2001 Prentice Hall, Inc. All rights reserved. Outline 31 Conelight.html 35 if ( ( counter % 10 ) == 0 ) 36 moveRate *= -1; 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 } 46 else { 47 marquee.filters( "light" ).moveLight( 48 0, 1, 1, 3, 0 ); 49 marquee.filters( "light" ).moveLight( 50 1, -1, 1, 3, 0 ); 51 marquee.filters( "light" ).moveLight( 52 2, moveRate, 0, 3, 0) ; 53 } 54 } When used on cone sources, the moveLight method moves the target of the light. 2001 Prentice Hall, Inc. All rights reserved. Outline 32 Program Output The two outputs display the light filter aimed at different sections of the image. 2001 Prentice Hall, Inc. All rights reserved. Outline 33 Blendtrans.html 1 2 Using blendTrans

28 Some fading text The blendTrans transition creates a smooth fade-in/fade-out effect. The apply method initializes the transition for the affected element. The visibility of the element is set to hidden this takes effect when we invoke method play in line 18. The filter to blendTrans and the duration parameter to 3. This determines how long the transition takes. Transitions are set as values of the filter CSS property, just as regular filters are. 2001 Prentice Hall, Inc. All rights reserved. Outline 34 Program Output Text fading using the blendTrans transition. 2001 Prentice Hall, Inc. All rights reserved. Outline 35 Blendtrans2.html 1 2 Blend Transition II Blend Transition Demo The function then toggles the whichImage property, and calls function blend so that the whole process starts again, now transitioning from image2 back to image1. Two overlapping images are placed on the page, with id s image1 and image2 (lines 5363). When the transition is complete, image1 s onfilterchange event (line 60) fires. 2001 Prentice Hall, Inc. All rights reserved. Outline 37 Program Output Because there are two images in the same place, when image1 fades out, it appears that image2 fades in to replace it. 2001 Prentice Hall, Inc. All rights reserved. Outline 38 Revealtrans.html 1 2 DHTML Transitions

Transition 0: Box In Again two images will be used to demonstrate the blending and reblending of transitions. 2001 Prentice Hall, Inc. All rights reserved. Outline 41 Program Output Examples of the possible types of transitions that were displayed when running the application. 2001 Prentice Hall, Inc. All rights reserved. Outline 42 Program Output