 2004 Prentice Hall, Inc. All rights reserved. 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 mask s 15.5 Miscellaneous Image Filters: invert, gray and xray 15.6 Adding shadow s 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 blendTrans Transition revealTrans Transition

 2004 Prentice Hall, Inc. All rights reserved. Objectives En este capítulos aprenderemos a: –Utilizar filtros para lograr efectos especiales. –Combinar los filtros para lograr una mayor variedad de efectos especiales. –Ser capaz de crear transiciones animadas entre páginas Web. –Modificar filtros dinámicamente utilizando DHTML.

 2004 Prentice Hall, Inc. All rights reserved Introduction Filters –Causan cambios persistentes Transitions –Temporeros –Permite la transferencia de una página a la otra con efectos visuales placenteros Ejemplo: random dissolve

 2004 Prentice Hall, Inc. All rights reserved Flip Filters: flipv and fliph Filtros flipv and fliph tipo espejo pueden cambiar la imagen vertical y horizontalmente respectivamente.

 2004 Prentice Hall, Inc. All rights reserved. Outline flip.html (1 of 2)

 2004 Prentice Hall, Inc. All rights reserved. Outline flip.html (2 of 2)

 2004 Prentice Hall, Inc. All rights reserved. No filters applied flipv filter applied fliph filter applied Both fliph and flipv filters applied

 2004 Prentice Hall, Inc. All rights reserved Transparency with the chroma Filter chroma filter aplica efectos de transparencia dinámicamente –Without using a graphics editor to hard-code transparency into the image onchange –Fires when the value of a form changes

 2004 Prentice Hall, Inc. All rights reserved. Outline chroma.html (1 of 3)

 2004 Prentice Hall, Inc. All rights reserved. Outline chroma.html (2 of 3)

 2004 Prentice Hall, Inc. All rights reserved. Outline chroma.html (3 of 3)

 2004 Prentice Hall, Inc. All rights reserved Creating Image masks Background es un color sólido Foreground es transparente a la imagen o al color que esta detras.

 2004 Prentice Hall, Inc. All rights reserved. Outline mask.html (1 of 2)

 2004 Prentice Hall, Inc. All rights reserved. Outline mask.html (2 of 2)

 2004 Prentice Hall, Inc. All rights reserved Miscellaneous Image Filters: invert, gray and xray invert filter –Negative image effect Las áreas oscuras se vuelven claras y las claras se vuelven oscuras gray filter –Grayscale image effect Se elimina el color de la imagen, solo permanece laparte brillante xray filter –X-ray effect En un efecto invertido del grayscale

 2004 Prentice Hall, Inc. All rights reserved. Outline misc.html (1 of 2)

 2004 Prentice Hall, Inc. All rights reserved. Outline misc.html (2 of 2)

 2004 Prentice Hall, Inc. All rights reserved.

15.6 Adding shadows to Text shadow filter –Showing effect Apariencia de 3 dimensiones con efectos de sombra La sombra da la vuelta al texto.

 2004 Prentice Hall, Inc. All rights reserved. Outline shadow.html (1 of 2)

 2004 Prentice Hall, Inc. All rights reserved. Outline shadow.html (2 of 2)

 2004 Prentice Hall, Inc. All rights reserved Creating Gradients with alpha alpha filter –Gradient effect Progresión gradual del color inicial al color final –style Uniform opacity ( value 0) Linear gradient ( value 1) Circular gradient ( value 2) Rectangular gradient ( value 3)

 2004 Prentice Hall, Inc. All rights reserved. Outline alpha.html (1 of 3)

 2004 Prentice Hall, Inc. All rights reserved. Outline alpha.html (2 of 3)

 2004 Prentice Hall, Inc. All rights reserved. Outline alpha.html (3 of 3)

 2004 Prentice Hall, Inc. All rights reserved.

15.8 Making Text glow glow filter incluye un aurea de color alrededor del texto.

 2004 Prentice Hall, Inc. All rights reserved. Outline glow.html (1 of 4)

 2004 Prentice Hall, Inc. All rights reserved. Outline glow.html (2 of 4)

 2004 Prentice Hall, Inc. All rights reserved. Outline glow.html (3 of 4)

 2004 Prentice Hall, Inc. All rights reserved. Outline glow.html (4 of 4)

 2004 Prentice Hall, Inc. All rights reserved Creating Motion with blur blur filter crea una ilusión de movimiento al borrar (blurring) el texto o imagen en una dirección en particular. –Add Añade una copia de la imagen original sobre la imagen borrosa –Direction Determina en cual dirección el blur filter se aplica –strength Determina cuan fuerte el efecto de borrar es

 2004 Prentice Hall, Inc. All rights reserved. Outline blur.html (1 of 5)

 2004 Prentice Hall, Inc. All rights reserved. Outline blur.html (2 of 5)

 2004 Prentice Hall, Inc. All rights reserved. Outline blur.html (3 of 5)

 2004 Prentice Hall, Inc. All rights reserved. Outline blur.html (4 of 5)

 2004 Prentice Hall, Inc. All rights reserved. Outline blur.html (5 of 5)

 2004 Prentice Hall, Inc. All rights reserved Using the wave Filter wave filter - Permite al usuario aplicar distorsiones al texto e imágenes enlas páginas Web. –add Añade una copia al texto o imagen bajo el efecto ya filtrado –freq Determina la frecuencia de la ola aplicada –phase Indica la fase de cambio de la ola

 2004 Prentice Hall, Inc. All rights reserved. Outline wave.html (1 of 2)

 2004 Prentice Hall, Inc. All rights reserved. Outline wave.html (2 of 2)

 2004 Prentice Hall, Inc. All rights reserved.

15.11 Advanced Filters: dropShadow and light dropShadow –Crea una versión oscura de la imagen y la pone detras de la imagen. –offx and offy properties Determinea por cuantos pixels la caida de sombra se pasa –color property Especifica el color de la caida de sombra light filters –Más poderoso y avanzado filtro en Internet Explorer 6.0 –Permite una simulación de una fuente de luz brillando en la página Web que proviene del cursor. –Todos los parámetros y métodos se especifican por código –addPoint Añade una punto de fuente de luz

 2004 Prentice Hall, Inc. All rights reserved. Outline dropshadow.html (1 of 3)

 2004 Prentice Hall, Inc. All rights reserved. Outline dropshadow.html (2 of 3)

 2004 Prentice Hall, Inc. All rights reserved. Outline dropshadow.html (3 of 3)

 2004 Prentice Hall, Inc. All rights reserved. Outline conelight.html (1 of 3)

 2004 Prentice Hall, Inc. All rights reserved. Outline conelight.html (2 of 3)

 2004 Prentice Hall, Inc. All rights reserved. Outline conelight.html (3 of 3)

 2004 Prentice Hall, Inc. All rights reserved blendTrans Transition Ejemplo de la transición blendTrans –Crea un efecto suave de fade-in/fade-out

 2004 Prentice Hall, Inc. All rights reserved. Outline blendtrans.html (1 of 2)

 2004 Prentice Hall, Inc. All rights reserved. Outline blendtrans.html (2 of 2)

 2004 Prentice Hall, Inc. All rights reserved. Outline blendtrans2.html (1 of 3)

 2004 Prentice Hall, Inc. All rights reserved. Outline blendtrans2.html (2 of 3)

 2004 Prentice Hall, Inc. All rights reserved. Outline blendtrans2.html (3 of 3)

 2004 Prentice Hall, Inc. All rights reserved.

15.13 revealTrans Transition revealTrans filter –Crea transiciones con un estilo profesional –Tiene varios efectos. Desde box out hasta random dissolve.

 2004 Prentice Hall, Inc. All rights reserved. Outline revealtrans.html (1 of 4)

 2004 Prentice Hall, Inc. All rights reserved. Outline revealtrans.html (2 of 4)

 2004 Prentice Hall, Inc. All rights reserved. Outline revealtrans.html (3 of 4)

 2004 Prentice Hall, Inc. All rights reserved. Outline revealtrans.html (4 of 4)

 2004 Prentice Hall, Inc. All rights reserved.