Nidia Lizbeth Ramírez Zazueta

Grupo 601

Diseño digital

Lic. Yazmin Muñoz Sánchez

 Introducción

Para hacer animaciones más vistosas, flash nos permite desarrollar

animaciones de distintas maneras.

Las que vamos a estudiar aquí se refieren a los filtros, que son estilos que
se agregan a un símbolo con la finalidad de hacerlo más vistos. Y darles
ciertas configuraciones para la animación.

Por otro lado, Flash, al ser una aplicación de animación, nos permite
exportar e importar videos para poder utilizarlos dentro de la animación,
dando paso a una cantidad indefinida de posibilidades a la hora de crear
contenido dentro de la aplicación.

2
 Filtros

Filtro de Sombra:

Sus opciones son las siguientes:

✓ .alpha: determina la transparencia de la sombra (de 0 a 1).

✓ .angle: determina el ángulo de la sombra.

✓ .blurX: determina la cantidad de desenfoque horizontal.

✓ .blurY: determina la cantidad de desenfoque vertical.

✓ .color: determina el color de la sombra (escrito 0xRRVVAA).

✓ .distance: determina la distancia de la sombra al objeto

✓ .hideObject: booleano, esconde el objeto dejando sólo la sombra

(segunda imagen).

✓ .inner: booleano, hace que la sombra sea interior.

✓ .knockout: booleano, activa el filtro extractor, hace que el objeto se

vuelva del color del fondo.

✓ .quality: número de veces que se aplica el filtro. Puede tomar los

valores 1, 2 ó 3. Calidad baja, media y alta, respectivamente.

✓ .strength: determina la intensidad de la sombra.

El Filtro Desenfocar

Utilizando este filtro podremos hacer que la imagen se muestre

desenfocada:

Sus opciones son las siguientes:

✓ .blurX: determina la cantidad de desenfoque horizontal.

✓ .blurY: determina la cantidad de desenfoque vertical.

3
 ✓ .quality: número de veces que se aplica el filtro. Puede tomar los
valores 1, 2 ó 3. Calidad baja, media y alta, respectivamente.

El Filtro Iluminado

Utilizando este filtro podremos añadirle un efecto de iluminación a la

imagen:

Sus opciones son las siguientes:

✓ .alpha: determina la transparencia de la iluminación (de 0 a 1).

✓ .blurX: determina la cantidad de desenfoque horizontal.

✓ .blurY: determina la cantidad de desenfoque vertical.

✓ .color: determina el color de la iluminación (escrito 0xRRVVAA).

✓ .inner: booleano, hace que la iluminación sea interior.

✓ .knockout: booleano, activa el filtro extractor, hace que el objeto se

vuelva del color del fondo.

✓ .quality: número de veces que se aplica el filtro. Puede tomar los

valores 1, 2 ó 3. Calidad baja, media y alta, respectivamente.

✓ .strength: determina la intensidad de la iluminación.

Filtro de Bisle

Utilizando este filtro podremos añadirle un bisel a la imagen:

Sus opciones son las siguientes:

• .angle: determina el ángulo del bisel.

• .blurX: determina la cantidad de desenfoque horizontal.

• .blurY: determina la cantidad de desenfoque vertical.

• .distance: determina la distancia que abarcará el bisel en el objeto.

4
 • .highlightAlpha: determina la transparencia del color de resaltado
(bisel).

• .hightlightColor: determina el color del resaltado (escrito 0xRRVVAA).

• .knockout: booleano, activa el filtro extractor, hace que el objeto se

vuelva del color del fondo.

• .quality: número de veces que se aplica el filtro. Puede tomar los

valores 1, 2 ó 3. Calidad baja, media y alta, respectivamente.

• .shadowAlpha: determina la transparencia del color de sombra del bisel.

• .shadowColor: determina el color de la sombra del bisel

(escrito 0xRRVVAA).

• .strength: determina la intensidad del bisel.

• .type: indica el tipo de bisel a aplicar. Puede tomar los

valores inner, outer y full. Interior, exterior y completo,
respectivamente.

El Filtro Iluminado Degradado

Utilizando este filtro podremos añadirle una iluminación (como en el filtro

anterior) a la imagen, pero con la característica de que esta iluminación
estará compuesta por un degradado:

Sus opciones son las siguientes:

• .alphas: determina matriz de valores de transparencia alfa (de 0 a 1)

para los colores correspondientes de la matriz colors.

• .angle: determina el ángulo de la iluminación.

• .blurX: determina la cantidad de desenfoque horizontal.

• .blurY: determina la cantidad de desenfoque vertical.

• .colors: conjunto de colores que definen el degradado

(escritos 0xRRVVAA).

5
 • .distance: determina la distancia de la iluminación al objeto.

• .knockout: booleano, activa el filtro extractor, hace que el objeto se

vuelva del color del fondo.

• .quality: número de veces que se aplica el filtro. Puede tomar los

valores 1, 2 ó 3. Calidad baja, media y alta, respectivamente.

• .ratios: matriz de proporciones de distribución de color para los colores

correspondientes de la matriz colors (de 0 a 255

• .strength: determina la intensidad de la iluminación.

• .type: indica la colocación de la iluminación. Puede tomar los

valores inner, outer y full. Interior, exterior y completo,
respectivamente.

Filtro Bisel degradado

Igual que el filtro que hemos visto anteriormente, este filtro es capaz de
mostrar un bisel sobre el objeto, pero añadiendo un degradado a la forma de
éste:

Sus opciones son las siguientes:

• .alphas: determina matriz de valores de transparencia alfa (de 0 a 1)

para los colores correspondientes de la matriz colors.

• .angle: determina el ángulo del bisel.

• .blurX: determina la cantidad de desenfoque horizontal.

• .blurY: determina la cantidad de desenfoque vertical.

• .colors: conjunto de colores que definen el degradado

(escritos 0xRRVVAA).

• .distance: determina la distancia que abarcará el bisel en el objeto.

• .knockout: booleano, activa el filtro extractor, hace que el objeto se

vuelva del color del fondo.

6
 • .quality: número de veces que se aplica el filtro. Puede tomar los
valores 1, 2 ó 3. Calidad baja, media y alta, respectivamente.

• .ratios: matriz de proporciones de distribución de color para los colores

correspondientes de la matriz colors (de 0 a 255).

• .strength: determina la intensidad del bisel.

• .type: indica la colocación del bisel. Puede tomar los

valores inner, outer y full. Interior, exterior y completo,
respectivamente.

El Filtro Ajustar Color

Utilizando este filtro podremos cambiar todas las características

correspondientes al color de la imagen:

Sólo tiene una opción: .matrix.

En ella escribiremos una matriz de 20 elementos (4x5) que indicarán la

cantidad de cada color, su intensidad, brillo, saturación y contraste.

Videos

Con Flash cada vez es más fácil añadir vídeos a nuestras presentaciones
o webs. En particular Flash 8 incorpora una serie de características que

7
 facilitan la tarea al máximo y permiten el uso de vídeos como si se tratase
de cualquier otro objeto en pantalla.

A continuación explicaremos cómo hacerlo y cuales son las mejores

alternativas. Utilizaremos el siguiente ejemplo para documentar algunos de
los pasos que deberemos realizar.

Importando Vídeos

Lo primero que deberemos hacer es transformar nuestro vídeo de

formato avi, mpeg, mov, wmv o dv al formato que utiliza Flash: flv.

Este formato, además de crear archivos de vídeo de buena calidad muy

comprimidos, te permitirá introducir puntos de referencia desde donde
controlaremos la interacción del entorno de la película con el vídeo.

Haz clic en Archivo → Importar → Importar vídeo para empezar a

configurar el archivo .flv que crearemos.

Aquí deberás seleccionar el archivo que quieres importar para utilizarlo en tu

película. Haz clic en el botón Examinar y búscalo en tus carpetas. Cuando lo
hayas encontrado pulsa el botón Aceptar y estarás listo para seguir pulsando el
botón Siguiente.

También es posible marcar la opción Ya se ha implementado en un

servidor Web, Flash Vídeo Streaming Service o Flash Communication
Server. En este caso deberás introducir la URL del archivo, que previamente
habrá sido preparado para poder utilizarlo en Flash.

Puedes elegir entre varias opciones, si seleccionas cualquiera de ellas

verás su descripción en la derecha de la pantalla. Te adelantamos que para
la implementación de vídeo para Streaming deberás disponer de un servidor
(de pago) que transmita tu vídeo al usuario de una forma óptima.

La opción Descarga progresiva, a pesar de no ser la más aconsejada para

conexiones de baja velocidad (sobre todo para archivos muy grandes) es la
más utilizada por aquellos que no disponen de los recursos necesarios para
contratar los servicios de un servidor de vídeo en formato Stream.

8
 Ahora es cuando realmente configuraremos el archivo de salida. Antes
que nada pulsa el botón Mostrar configuración avanzada.

Verás 3 pestañas. La primera te servirá para ajustar la compresión y

calidad del vídeo. Puedes seleccionarla directamente en el desplegable de
arriba del todo o cambiar alguna de las opciones que te aparecen en la
pestaña Codificación.

Desde aquí podremos configurar puntos en nuestra película.

Existen dos tipos de puntos de referencia diferentes: el de Navegación y

el de Evento.

Creando puntos de Navegación podremos referenciarnos más tarde a

ellos para saltar en la película. Sería algo así como crear capítulos sobre los
que podremos navegar utilizando botones y ActionScript.

El punto de Referencia de Evento nos permitirá crear interacciones con el

resto de objetos en la película. Estos puntos nos permitirán pasar
parámetros que podremos recuperar mediante ActionScript.

Hay 3 de Navegación, a los cuales acudiremos pulsando los botones para

saltar entre los capítulos de la película. Luego hemos añadido 4 puntos
de Evento desde los que pasaremos un parámetro que hará que se muestre
determinado fotograma de un clip que se encontrará en el Escenario.

Desde la pestaña Recortar y Ajustar podrás modificar el tamaño del vídeo

y su duración.

Desde aquí podrás seleccionar un estilo de controles predeterminado,

elige uno o selecciona Ninguno para crear tú mismo los controles (como
veremos a continuación) y pulsa el botón Siguiente.

El sistema te avisará de que el vídeo está debidamente configurado y

pasará a importarlo. Cuando haya terminado lo añadirá directamente sobre
el Escenario.

El Componente FLVPlayback

9
 Si ya tuvieses el archivo importado a flv no haría falta que realizases las
acciones anteriores, sólo deberás insertar en el escenario un componente
que incorpora Flash para la reproducción de éste.

Abre el Panel Componentes desde Ventana → Componentes y haz clic

sobre FLV Playback - Player 8. Arrastra un
componente FLVPlayBack al Escenario.

Desde el Panel Parámetros podrás configurarlo. Allí encontrarás las

siguientes opciones:

• autoPlay: puede tomar los valores true o false. Indican si el vídeo debe
reproducirse nada más abrir el archivo o esperar a una orden para
empezar a reproducirse.

• autoRewind: puede tomar los valores true o false. Indica si el vídeo

deberá volver a la posición inicial despés de haberse reproducido
completamente.

• autoSize: puede tomar los valores true o false. Indica si el control

deberá ajustarse al tamaño del vídeo, o por el contrario deberá ser el
vídeo el que se ajuste al tamaño del control.

• bufferTime: especifica el número de segundos que se almacenarán en

la memoria antes de que se inicie la reproducción del vídeo.

• contentPath: indica la ruta del archivo que se deberá reproducir.

• cuePoints: indica los puntos de referencia que están incluidos en la

película. Una vez importada la película a formato flv no pueden ser
modificados.

• isLive: puede tomar los valores true o false. Este campo se utilizará
para la transmisión de vídeo en vivo y sólo podrá utilizarse a través de
un servidor de Streaming.

• skin: desde aquí puedes modificar la apariencia de los controles de la

película y seleccionar uno entre los predefinidos.

10
 • skinAutoHide: puede tomar los valores true o false. Indicará si los
controles se pueden esconder para volver a aprecer cuando el cursor
se sitúe sobre la película.

• totalTime: indica el tiempo total del vídeo.

• volume: de 0 a 100. Indica el volumen máximo del vídeo.

Una vez insertada la película mediante la adición de este componente o

por importación deberemos darle un nombre de instancia para poder
referirnos a él. Hazlo desde este mismo panel o desde el Panel Propiedades.

Uso de Componentes para la Reproducción

Usar componentes para controlar la película es muy sencillo, sólo deberás

arrastrarlos desde el Panel Componentes al Escenario y escribir unas pocas
líneas en el Panel Acciones.

Para añadir estos componentes haz clic en el elemento FLV Playback

Custom UI y arrastra el que tu quieras al Escenario, veamos cuales son sus
funciones.

• BackButton: retrocede el flujo del vídeo al punto de referencia

inmediatamente anterior o en su defecto al inicio de éste.

• BufferingBar: muestra el progreso de descarga del vídeo.

• ForwardButton: avanza el flujo del vídeo al punto de referencia

inmediatamente posterior o en su defecto al final de éste.

• MuteButton: establece el volumen de la película directamente a 0.

Actuaría de forma similar a la línea:

miVideo.volume = 0;

11
 • PauseButton: pausa la película en el momento en el que se pulse el
botón.

• PlayButton: reaunda (o comienza) la reproducción a partir de donde se

encuentre el cabezal de reproducción de vídeo.

• PlayPauseButton: una mezcla de los dos anteriores, es capaz de pausar

y reanudar la reproducción desde un mismo control.

• SeekBar: desde esta barra avanzar y retroceder manualmente por la

línea de flujo de la película.

• StopButton: detiene la reproducción y posiciona el cabezal de

reproducción al principio del vídeo.

• VolumeBar: permite el aumento o disminución del volumen del vídeo

mediante una barra de volumen.

Una vez añadidos los componentes necesarios al Escenario tendrás

que darle un nombrede instancia y luego escribir lo siguiente (dependiendo
de los controles que hayas arrastrado) en el Panel Acciones del fotograma

miVideo.playButton = miBotonPlay;

miVideo.pauseButton = miBotonPausa;

miVideo.playPauseButton = miBotonPausaPlay;

miVideo.stopButton = miBotonStop;

mVideo.backButton = miBotonAtras;

miVideo.forwardButton = miBotonAdelante;

miVideo.muteButton = miBotonSilencio;

miVideo.volumeBar = miBarraVolumen;

miVideo.seekBar = miBarraDeslizadora;

miVideo.bufferinBar = miBarraProgreso;

12
 Puedes modificar los componentes que añadas al Escenario haciendo
doble clic sobre ellos y cambiando su forma, tamaño o color.

Crear Controles Propios

Crear controles propios no es muy complicado en Flash 8. Sólo tienes que

crear los botones que consideres necesarios y utilizar las propiedades del
componente FLVPlayback.

• play(): reproduce el vídeo.

miVideo.play();

• stop(): detiene el vídeo y vuelve al inicio.

miVideo.stop();

• pause(): detiene el vídeo conservando su posición actual.

miVideo.pause();

• seek(segundo:Number): permite el avance o retroceso de la película de

vídeo.

miVideo.seek(5);

Esta línea colocará la cabeza lectora en el segundo 5 y reproducirá a

partir de ahí.

• volume: define el volumen del vídeo. Puedes introducir un valor entre 0

y 100.

13
 miVideo.volume = 50;

La propiedad state devuelve el estado en el que se encuentra nuestro

vídeo en el momento, puede tomar los siguientes valores:

• miVideo.PAUSED: el vídeo se encuentra pausado.

• miVideo.PLAYING: el vídeo se está reproduciendo.

• miVideo.REWINDING: el vídeo está en estdo de rebobinado.

• miVideo.SEEKING: el vídeo está en estado de búsqueda.

• miVideo.STOPPED: el vídeo se encuentra detenido.

• miVideo.BUFFERING: el vídeo todavía se está almacenando en el

buffer.

• miVideo.CONNECTION_ERROR: se ha producido un error de conexión

y el vídeo no podrá visualizarse.

• miVideo.DISCONNECTED: el vídeo está en estado de desconexión.

Este estado se producirá hasta que se le asigne una ruta a la
propiedad contentPath.

• miVideo.LOADING: el vídeo está en estado de carga.

14
 Es muy importante conocer todas estas herramientas, pues ayudan a
crear animaciones más vistosas y fuera de lo tradicional.

En general, yo creo que los filtros son una gran opción al para hacer las
animaciones, pues lo hacen ver lo mas real posible.

En cuestión de los videos, son de gran utilidad para poder creas, por
ejemplo, montajes, o hacer animaciones sobre ellos.

15