1 Aplicaciones Gráficas II- FLASH

1

AAnnttoollooggííaa Material de consulta

AAppll iiccaacciioonneess ggrr ááff iiccaass II II

CCoolleeggiioo llaa SSaallllee

ddee VVeerraaccrruuzz Sección Bachillerato cuarto Semestre

Nombre: ________________________________

Grupo: _____ No. de Lista: _____

2 Aplicaciones Gráficas II- FLASH

2

Aplicaciones gráficas con programas integrados II Flash

Objetivo General: Crear animaciones que combinen gráficos, símbolos e imágenes,

mediante la aplicación del programa flash, para la producción de películas a nivel básico.

UNIDAD I: Elementos básicos de Flash. OBJETIVO: Identificar los elementos básicos de flash, mediante el análisis de sus características y funciones. 1.1 Introducción a Flash ..................................................................................................... 4

• Historia. • Mapa de bits y vectores.

1.2 Entorno de trabajo ........................................................................................................ 7 • Escenario. • Objetos de Flash.

- Símbolos. • Línea del tiempo. • Las Capas. • Barra de menús. • Barra de herramientas. • Paneles.

1.3 Configuración del área de trabajo .................................................................................. 11 • Dimensiones.

1.4 Guardar y abrir películas ............................................................................................... 11 UNIDAD II: Mis primeras animaciones. OBJETIVO: Crear animaciones sencillas mediante la aplicación de los diferentes tipos de animación. 2.1 Tipos de Fotogramas ..................................................................................................... 11 2.2 Animación Fotograma a Fotograma .............................................................................. 14 2.3 Animación Interpolada ................................................................................................... 15 2.3.1 Interpolación de movimiento. 2.3.2 Interpolación de forma. UNIDAD III: El dibujo en Flash. OBJETIVO: Utilizar las herramientas de dibujo en base a sus propiedades y características. 3.1 Contornos y rellenos ...................................................................................................... 19 3.2 Dibujar líneas rectas ...................................................................................................... 19 3.3 Dibujar Óvalos ............................................................................................................... 20 3.4 Dibujar rectángulos........................................................................................................ 20 3.5 Herramienta lápiz y pluma ............................................................................................ 20 3.6 Selección de objetos .................................................................................................... 21 3.7 Agrupar y desagrupar .................................................................................................... 22 3.8 Interacción entre objetos ............................................................................................... 23

3 Aplicaciones Gráficas II- FLASH

3

3.9 Alinear objetos ............................................................................................................... 24 3.10 Transformar objetos .................................................................................................... 25 UNIDAD IV: Texto. OBJETIVO: Aplicar la herramienta texto de acuerdo a sus atributos y características. 4.1 Trabajar con texto ......................................................................................................... 26 4.2 Propiedades de los textos ............................................................................................. 26 UNIDAD V: Capas. OBJETIVO: Aplicar las capas de acuerdo a sus propiedades para la creación de animación en las películas. 5.1 Introducción. .................................................................................................................. 30 5.2 Elementos de la ventana con las capas ......................................................................... 31 5.3 Distribuir objetos en capas ............................................................................................ 33 5.4 Tipos de Capas ............................................................................................................ 34 5.5 Capas guía .................................................................................................................... 34 5.6 Capas Máscara ............................................................................................................. 35 UNIDAD VI: Símbolos y Animación interactiva. OBJETIVO: Aplicar los símbolos a través de su biblioteca para generar una animación más interactiva. 6.1 Símbolos e Instancias ................................................................................................... 35 6.2 Tipos de símbolos ......................................................................................................... 36 - Gráficos. - Botones. - Clips de película. 6.3 Propiedades de los símbolos ......................................................................................... 38 6.4 Crear símbolos .............................................................................................................. 38 6.5 Biblioteca de símbolos .................................................................................................. 39 6.6 Los fotogramas .............................................................................................................. 41 6.7 Creación de gif´s animados ........................................................................................... 41 6.8 Uso del papel Cebolla ................................................................................................... 42 UNIDAD VII: Acciones en Flash. OBJETIVO: Crear películas interactivas aplicando las acciones del lenguaje Action script. 7.1 Introducción ................................................................................................................... 43 7.2 Panel de Acciones ......................................................................................................... 44 7.3 Añadir Acciones ............................................................................................................ 48 7.4 Action Script .................................................................................................................. 48 UNIDAD VIII: Publicación de la película. OBJETIVO: Generar la publicación de la película para visualizarla en la Web. 8.1 Publicar una película ..................................................................................................... 52

4 Aplicaciones Gráficas II- FLASH

4

UNIDAD I: Elementos básicos de Flash. OBJETIVO: Identificar los elementos básicos de flash, mediante el análisis de sus características y funciones. 1.1 Introducción a Flash.

Flash es una potente herramienta creada por una empresa de software gráfico, denominada Macromedia, la cual ha superado las mejores expectativas de sus creadores; inicialmente Macromedia Flash fue creado con el objeto de realizar animaciones vistosas para la web, así como para crear gif´s animados.

Actualmente, es una estupenda aplicación que permite crear espectaculares páginas Web de alto contenido interactivo, animaciones de todo tipo y hasta juegos.

Los motivos que han convertido a Flash en el programa elegido por la mayoría de los diseñadores web profesionales y aficionados son varios. Veamos pues, porqué es interesante Flash.

Las posibilidades de Flash son extraordinarias, cada nueva versión ha mejorado a la anterior, y el actual Flash no ha sido menos. Aunque su uso más frecuente es el de crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar) sus usos son muchos más. Son tantos, que todos los diseñadores web deberían saber utilizar Flash.

Flash ha conseguido hacer posible lo que más hacía falta en Internet: Dinamismo , y con dinamismo no sólo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no estático (en contraposición a la mayoría de las páginas, que están realizadas empleando el lenguaje HTML). Con Flash podremos crear de modo fácil y rápido animaciones de todo tipo. El entorno de Flash es amigable, lo que facilita su aprendizaje.

Historia del programa

Los inicios de Flash se remontan a una aplicación llamada Smart Sketch. Este programa estaba pensado para realizar imágenes gráficas vectoriales, pero con una interfaz similar a la de los programas de dibujo bitmap. La versión que siguió a ésta fue bautizada con el nombre de Future Splash Animator (Flash 1), donde se continuó con la metodología del dibujo vectorial, aunque esta versión incorporaba la posibilidad de realizar animaciones y visualizarlas en Internet a través de un player.

Posteriormente, los creadores de Flash vendieron los derechos a Macromedia, que incorporó el plug-in de Shockwave. Así, en Flash 2 introdujeron un player para colocar en Internet las animaciones que, por su pequeño tamaño, eran ideales para este medio.

5 Aplicaciones Gráficas II- FLASH

5

En la versión 3, desarrollaron la tecnología “metamorfosis” y clips de película y, Flash 4, ya incorporaba mejoras de programación, interacciones y QuickTime.

Macromedia Flash 5, entre otras cosas, contaba con dos nuevas herramientas (“Pluma” y “Subselección”) que permitían crear y editar gráficos vectoriales de forma precisa, presentaba la posibilidad de organizar y reutilizar los recursos compartidos en un proyecto a través de las “Bibliotecas compartidas” y añadía un “Explorador de película” que clasificaba el contenido del documento y permitía visualizar la estructura jerárquica del mismo, ofreciendo la posibilidad de analizar y editar proyectos complejos.

La versión MX presenta una interfaz mucho más funcional e intuitiva. Además, propicia la animación con texto mediante métodos que aceleran este mecánico y largo proceso. También ofrece la posibilidad de insertar vídeo en la película SWF e incorpora nuevas opciones de transformación de gráficos.

Versiones:

Smart Sketch__ (1993) Programa para realizar imágenes vectoriales.

Future Splash Animator _ Flash 1.0 (1996)

En 1997 los creadores vendieron los derechos a Macromedia que incorporó el plug-in de Shockwave. Macromedia Flash 2.0.

En 1998_ Macromedia Flash 3.

En 1999 _ Macromedia Flash 4.

En 2000_ Macromedia Flash 5.

En 2002_ Flash Mx. (V. 6)

En 2004 _ Flash Mx 2004 (V. 7)

En 2004 _ Flah Mx 2004 profesional

En 2005 , Flash Basic 8 y Flash Profesional 8.

En 2006, Flash Profesional 9 con actionscript.

En 2007, Adobe Flash CS3 Profesional (V. 10).

En 2008, AdobeFlah CS4 Profesional (V. 10).

En 2010 última actualización (V. 10.1)

6 Aplicaciones Gráficas II- FLASH

6

Mapa de bits y Vectores

Afortunadamente, Flash, aunque puede manejar los bitmaps, trabaja fundamentalmente con vectores.

Mapa de bits

Los bitmaps o mapa de bits son archivos gráficos de gran tamaño constituidos en base a pixeles (puntos de imagen) que forman parte de un conjunto que obliga a seleccionarlo todo a la vez, ya que, en principio lo que aparece en la imagen no son elementos individuales, sino un “todo” inseparable. Cada imagen consta de un número determinado de pixeles que determinan su resolución, la cual es fija y no varía con el tamaño, situación que provocará distorsiones si se reduce.

Por otra parte, una imagen vectorial sólo permite la representación de formas simples. Si bien es verdad que la superposición de varios elementos simples puede producir resultados impresionantes, no es posible describir todas las imágenes con vectores; éste es particularmente el caso de las fotografías realistas.

Los Vectores

Las imágenes vectoriales son representaciones de entidades geométricas (vectores) tales como círculos, rectángulos o segmentos. Están representadas por fórmulas matemáticas (un rectángulo está definido por dos puntos; un círculo, por un centro y un radio; una curva, por varios puntos y una ecuación). El procesador "traducirá" estas formas en información que la tarjeta gráfica pueda interpretar.

Dado que una imagen vectorial está compuesta solamente por entidades matemáticas, se le pueden aplicar fácilmente transformaciones geométricas a la misma (ampliación, expansión, etc.), mientras que una imagen de mapa de bits, compuesta por píxeles, no podrá ser sometida a dichas transformaciones sin sufrir una pérdida de información llamada distorsión. La apariencia de los píxeles en una imagen después de una transformación geométrica.

7 Aplicaciones Gráficas II- FLASH

7

Imagen vectorial Imagen de mapa de bits

1.2 Entorno de trabajo.

La versión de Flash MX cuenta con un entorno o interfaz de trabajo de lo más manejable e intuitiva. Además, tiene la ventaja de que es similar a la de otros programas de Macromedia (Dreamweaver, Freehand, Director...), todo esto hace más fácil aprender Flash y más rápido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash MX por primera vez.

8 Aplicaciones Gráficas II- FLASH

8

Elementos del entorno de trabajo

Barra de Menú

Tiene como propósito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro programa de diseño web o gráfico, aunque tiene algunas particularidades. Veamos los principales Submenús a los que se puede acceder:

Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos, vídeo, imágenes e incluso otras películas Flash), o la de Configuración de Publicación desde donde se pueden modificar las características de la publicación. También permite configurar la impresión de las páginas, imprimirlas...

Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como fotogramas; también permite personalizar algunas de las opciones más comunes del programa.

Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las escenas. También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones.

Insertar: Te permite insertar objetos en la película, así como nuevos fotogramas, capas, acciones, escenas...

Modificar: La opción Transformar permite modificar los gráficos existentes en la película, y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales (este tema se tratará más adelante). El resto de opciones permite modificar características de los elementos de la animación Suavizar, Optimizar o de la propia película (Capa, Escena ...) .

Texto: Sus contenidos afectan a la edición de texto. Más adelante se tratará en profundidad.

Control: Desde aquí se modifican las propiedades de reproducción de la película. Reproducir, Rebobinar, Probar Película ....

Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las ventanas, incluye accesos director a TODOS los Paneles.

Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Macromedia, desde el manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones guiadas etc.

9 Aplicaciones Gráficas II- FLASH

9

Línea del tiempo

La Línea de Tiempo es el lugar donde se refleja lo que va a ir sucediendo a lo largo de la duración de la película. Se basa prácticamente en la misma filosofía de las películas de cine, es decir, una serie de fotogramas sucesivos, cada uno de los cuales contiene las imágenes que deben aparecer cuando se proyecta la película. Consta de 2 partes.

1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos)

2) Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto dura o cuándo aparecerá en la película.

Además, en la parte inferior hay herramientas para trabajar con Papel cebolla e información sobre el Número de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (12.0 en la imagen) y el Tiempo de película transcurrido (0.0s en la imagen).

Capas

El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la importancia de estas, se le dedicará un tema completo. Aún así, veamos a grandes rasgos qué son las capas.

Una Capa se puede definir como una película independiente de un único nivel. Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas).

Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre sí. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Para ello, crearemos tantas capas como sea necesario.

Paneles

Los Paneles son conjuntos de comandos agrupados según su función (por ejemplo, todo lo que haga referencia a las acciones, irá en el Panel "Acciones"). Su misión es simplificar y facilitar el uso de los comandos.

Todos ellos se estudiarán en profundidad a lo largo del curso. Aún así, vamos a nombrarlos y a resumir sus funciones.

Panel Info: Muestra el tamaño y las coordenadas de los objetos seleccionados, permitiéndonos modificarlas. Muy útil para alineaciones exactas.

10 Aplicaciones Gráficas II- FLASH

10

Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados.

Panel Alineamiento: Coloca los objetos del modo que le indiquemos. Muy útil.

Panel Mezclador de Colores: Mediante este panel creamos los colores que más nos gusten.

Panel Muestras de Color: Nos permite seleccionar un color de modo rápido y gráfico. (Incluidas nuestras creaciones).

Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes" con propiedades características y muchas utilidades (calendarios, scrolls etc...)

Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos accesibles desde este panel.

Panel Propiedades: Sin duda, el panel más usado y más importante. Nos muestra las propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamaño de los caracteres, tipografía, propiedades de los objetos (si hay interpolaciones etc...), coordenadas, tamaño etc... Es fundamental, no debeis perderlo de vista nunca.

Panel Escena: Modifica los atributos de las escenas que usemos.

Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra película.

Área de trabajo

El Área de trabajo consta de varias partes, veamos:

La parte más importante es el Escenario , sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento:

Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880 px.

Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados)

Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película.

Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la película.

11 Aplicaciones Gráficas II- FLASH

11

1.3 Configuración del área de trabajo. Cada vez que se crea un nuevo documento aparece una escena vacía lista para trabajar en ella. Lo que ubique y características se almacenará junto con la película.

La película se almacenará con los parámetros y propiedades con los que aparece por defecto, así que si desea hacer algún cambio a los parámetros o propiedades debe realizarlo antes de iniciar la película. Se puede cambiar el tamaño de la película (dimensiones), el color de fondo, la velocidad de fotogramas, etc.

Puede realizarlo de las siguientes formas:

a) Panel de propiedades. b) Menú Modificar / documento. c) CTRL + J

En cualquier caso, aparecerá el recuadro

1.4 Guardar y abrir películas.

• .FLA .- Es el formato de archivo que se genera al momento de guardar una película de Flash, este formato nos permitirá ver cómo está hecha la película o editarla para alguna modificación. Nota: Guardar en Formato Flash 6.

• .SWF (Shock Wave File).- Este formato corresponde a la película cuando es publicada y solo permite su visualización, estos archivos pueden ser ejecutados por flash player sin tener conexión a internet.

UNIDAD II: Mis primeras animaciones. OBJETIVO: Crear animaciones sencillas mediante la aplicación de los diferentes tipos de animación. 2.1 Tipos de Fotogramas. Un fotograma representa el contenido de la película en un instante de tiempo. Por tanto, una animación no es más que una sucesión de fotogramas. Todo esto se puede controlar desde la Línea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos qué tipos de fotogramas hay y cuáles son sus rasgos.

12 Aplicaciones Gráficas II- FLASH

12

Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de color gris.El último fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris.

En el ejemplo, los fotogramas del 2 - 5 son fotogramas normales , su contenido no es nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misión es prolongar la duración de un fotograma clave o keyframe.

Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especifíco, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la película. Se identifican por tener un punto negro en el centro y cuando esté vacío se le diferencia por una línea negra vertical. Con F6, se crean.

Fotograma Contenedor: No son fotogramas propiamente dichos, sino que representan un lugar dentro de la Línea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la película y Flash no los tendrá en cuenta al publicar la película. En la imagen, son fotogramas contenedor todos los fotogramas a partir del 12 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos.

Fotogramas pausados Son aquellos que se encuentran entre dos fotogramas clave. Son aquellos que contienen algún objeto pero que no son fotogramas clave. Encontramos fotogramas intermedios en las interpolaciones de forma y de movimiento. Con F5 se crean.

Fotograma Vacío: Son fotogramas sin contenido, Su color es blanco.En la imagen, los fotogramas del 6 al 11 (incluidos) son fotogramas vacíos . No debemos confundirlos con los fotogramas contenedor , pues estos últimos vienen delimitados por líneas verticales grises (no negras). Si se inserta algo en estos fotogramas, pasan a ser Keyframes. Con F7 se crean.

Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrará una imagen en blanco. (no dará por terminada la animación). De modo que si queremos que un objeto aparezca en el fotograma 1 y después otra vez en el fotograma 10. Los fotogramas del 2 al 9 deberán ser fotogramas vacíos ya que así el objeto "desaparecerá" y volverá a aparecer.

Fotograma Etiquetado (Label Frame): Contiene en la parte superior una "bandera" roja que indica que tienen un nombre asociado. Dicho nombre se establece desde el Panel "Frame". Si la duración del frame es la suficiente, se puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas.

Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que indica que tienen una acción asociada. Estos fotogramas son especialmente importantes, pues estas acciones, en principio "ocultas" (para verlas hay que acceder al Panel Acciones) pueden cambiar el comportamiento de la película. En la imagen, la acción existente en el fotograma 1 afecta también al 2 y al 3 (por ser fotogramas normales). El fotograma 4 no tiene acciones y sí las tiene el 5.

13 Aplicaciones Gráficas II- FLASH

13

Fotogramas de Animación de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posición del Keyframe inicial al final. Para representar esta animación aparece una flecha entre estos Keyframes.

Seleccionar fotogramas Un fotograma seleccionado aparece siempre resaltado en color negro.

• Para seleccionar un fotograma clave o normal, simplemente haga clic sobre él. • Para seleccionar a la vez varios fotogramas consecutivos de cualquier tipo

arrastre el cursor del ratón sobre ellos. • Si después de haber seleccionado el primer fotograma mantiene pulsada la tecla

CTRL y va haciendo clic uno a uno sobre los siguientes fotogramas, éstos se irán añadiendo a la selección.

• Para seleccionar a la vez todos los fotogramas de una animación de cualquier tipo, sitúe el cursor sobre alguno de sus fotogramas intermedios (normales) y haga doble clic. Se seleccionarán todos los fotogramas de la animación.

• Para seleccionar a la vez el mismo fotograma en varias capas, arrastre verticalmente hacia arriba o hacia abajo.

• Para seleccionar a la vez fotogramas consecutivos en varias capas arrastre para cubrir el área de fotograma que desee incluir en la selección.

Copiar y pegar fotogramas También se pueden cortar, copiar y pegar como el resto de objetos de Windows. Sin embargo, en Flash estas operaciones con los fotogramas se realizan mediante el menú Edición o con el botón derecho del mouse. A la hora de pegar fotogramas debe tener en cuenta lo siguiente:

• Si sobre un fotograma existente pega un fotograma clave, éste sustituye el contenido del anterior.

• Si pega varios fotogramas consecutivos sobre un fotograma existente, éste queda sustituido por el primer fotograma pegado y el resto queda intercalado.

Eliminar y borrar fotogramas A la hora de eliminar fotogramas se pueden actuar de dos maneras diferentes en función de los resultados que deseemos, veamos.

• Eliminar fotogramas implica que los fotogramas que se encuentren seleccionados desaparecerán y todos aquellos que se encontrarán a su derecha, se desplazarán hacia la izquierda para ocupar el lugar de los fotogramas eliminados.

14 Aplicaciones Gráficas II- FLASH

14

• Borrar fotogramas implica que los fotogramas que se encuentren seleccionados desaparecerán quedando en su lugar fotogramas vacíos, pero no se producirá ningún desplazamiento de fotogramas.

Mover Fotogramas

• Seleccionar el fotograma o fotogramas a mover. • Arrastre con el ratón hasta situarlos donde desee. Mientras arrastre los

fotogramas aparecerán enmarcados y vea en todo momento en donde se encuentran.

2.2 Animación Fotograma a Fotograma. Las películas de Flash se basan en el mismo sistema que las películas de cine, es decir, una serie de fotogramas que reproducidos uno tras otro proporcionan la sensación de movimiento. El método de crear animaciones fotograma a fotograma es el más adecuado para realizar animaciones complejas del tipo de las que forman las películas de dibujos animados, en los que cada fotograma muestra un dibujo complejo ligeramente diferente al anterior.

� Un fotograma representa el contenido de la película en un instante de tiempo. Por tanto, una animación no es más que una sucesión de fotogramas. Todo esto se puede controlar desde la Línea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual.

� Fotograma Clave (KeyFrame) : Son fotogramas con un contenido específico, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la película. Se identifican por tener un punto negro en el centro y se crean presionando F6.

El procedimiento para crear una animación fotograma a fotograma es muy sencillo.

1º. Se debe crear un fotograma clave y dibujar en su interior la posición de partida del objeto a animar.

2º. Hay que crear otro fotograma clave a continuación del anterior, lo cual provocará que aparezca en él el mismo contenido del primero.

3º. Debe modificar el contenido de este segundo fotograma, el cual, deberá ser en la mayoría de los casos, ligeramente diferente al anterior a no ser que desee obtener cambios bruscos de imagen.

4º. Seguidamente hay que crear el tercer fotograma clave, el cual mostrará el contenido del segundo y que deberá modificar también, y así sucesivamente, hasta que se haya terminado la animación.

15 Aplicaciones Gráficas II- FLASH

15

Coloreado de los fotogramas Por defecto, el programa muestra los fotogramas coloreados de uno u otro modo según el tipo de animación que contengan.

• Los fotogramas que contienen gráficos estáticos aparecen coloreados en gris. • Los fotogramas que contienen animaciones realizadas con interpolación de

forma aparecen coloreadas en verde con una flecha negra en su interior. • Los fotogramas que contienen animaciones realizadas con interpolación de

movimiento aparecen coloreados en violeta con una flecha negra en su interior. • Los fotogramas clave vacíos aparecen con un punto hueco en su interior. • Los fotogramas clave con contenido aparecen con un punto negro en su interior.

2.3 Animación Interpolada. La creación de animaciones fotograma a fotograma, resulta apropiada para la simulación de cambios complejos entre el contenido de los fotogramas., sin embargo, los fotograma clave ocupan mucho espacio en el archivo. Flash ofrece otra forma de crear animación menos laboriosa, se trata de la interpolación. La interpolación se basa en la filosofía de dónde quieres que inicie la animación y dónde quieres que termine y flash crea automáticamente los fotogramas intermedios. Es decir, nosotros le decimos al programa cuáles son los fotogramas inicial y final. Flash permite crear dos tipos de interpolación: de movimiento y de forma. 2.3.1 Interpolación de movimiento. Se aplica para crear una secuencia de animación en la que un objeto recorre un trazado recto y cambia de color, transparencia, tamaño, posición, rotación, etc. La interpolación de movimiento sólo es aplicable a los objetos agrupados o a los símbolos. De todos modos, si selecciona varios objetos a la vez y crea una interpolación con ellos, los objetos pasarán a ser un objeto único aunque no se haya agrupado. Procedimiento

1. Cree un nuevo documento en blanco. 2. Dibuje un objeto en el lado izquierdo de la escena. Esta será la posición en el primer

fotograma. 3. Seleccione el primer fotograma , haciendo clic sobre él y pulse el botón derecho

para que aparezca el menú contextual. Seleccione la opción Crear interpolación de movimiento (Create motion tween). De momento no pasa nada.

16 Aplicaciones Gráficas II- FLASH

16

O TAMBIÉN, en el panel propiedades en tween, seleccione motion. 4. Seguidamente, seleccione el fotograma 30 haciendo clic sobre el y presione F6 para

crear el último fotograma clave. 5. Ahora con el fotograma 30 seleccionado, seleccione el objeto y muévalo a la

posición final de dicho objeto, que sería hasta la derecha de la escena. 6. Presione la tecla Intro.

Nota : La interpolación de movimiento sólo es aplicable a los objetos agrupados o a los símbolos. 2.3.2 Interpolación de forma. En principio, este tipo de interpolación nos va a permitir crear animaciones en las que unos objetos se transforman gradualmente en otros, lo cual se denomina “morphing” en lenguaje informático. De esto se deduce que el objeto inicial y final serán diferentes, ya que el primero se convertirá en el segundo a lo largo de una serie de fotogramas. Este tipo de animación no es posible con la interpolación de movimiento. La interpolación de forma sólo será posible a partir de objetos editables, es decir, que no estén agrupados , ni sean símbolos. Procedimiento 1. En un documento nuevo dibuje un círculo con la herramienta óvalo y sitúelo en el

centro de la escena. Elimine su contorno. 2. Seleccione el fotograma 40 y pulse F6 para crear un fotograma clave. 3. En el fotograma 40, seleccione el círculo y bórrelo con la tecla SUPR.

4. Ahora active la herramienta Texto , haga clic en la escena para que aparezca el cursor del texto y escriba la palabra círculo.

5. Con la herramienta de texto haga doble clic sobre el texto recién escrito para seleccionarlo.

6. Desde el panel de propiedades, Cambie el tamaño, color y tipo de fuente. 7. Seleccione el texto y posiciónelo al centro de la escena. 8. Con el texto seleccionado, aplique dos veces la opción Modify / Break Apart. 9. Seleccione el primer fotograma haciendo clic sobre él y aparecerá el círculo. 10. En el panel propiedades aparece la casilla Tween (animar), despliégala y elija

Shape (forma). Automáticamente los fotogramas del 1 al 40 aparecerán de color verde con una flecha.

17 Aplicaciones Gráficas II- FLASH

17

OTRO PROCEDIMIENTO: 1. Dibuje el contenido del primer fotograma y sepárelo. 2. En el panel propiedades elija interpolación de forma, de momento no sucede

nada. 3. Seleccione ahora el último fotograma que desea ver en la interpolación y pulse

F6 para convertirlo en fotograma clave. Verá que aparece la flechita verde. 4. Edite el objeto que contiene el último fotograma y listo. 5. Reproduzca la animación.

Dependiendo de la acción es el tipo de Interpolación a aplicar.

TIPO DE ACCIÓN FORMA MOVIMIENTO El objeto cambia de posición en línea recta � � El objeto cambia de posición en línea curva � � El objeto va cambiando su color � � El objeto va cambiando su tamaño � � El objeto va cambiando su forma o se convierte en otro � El objeto va girando � El objeto recorre un trazado determinado � El objeto realiza una transformación sencilla � El objeto va cambiando su velocidad � UNIDAD III: El dibujo en Flash. OBJETIVO: Utilizar las herramientas de dibujo en base a sus propiedades y características. Evidentemente, no podemos comparar Flash con otros programas de dibujo vectorial como Corel Draw, Freehand o Illustrator, sin embargo con las herramientas que nos proporciona el programa, se pueden realizar la mayoría de los dibujos que nos propongamos. A continuación veremos cuáles son sus herramientas. La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Veamos cuáles son las más importantes y cómo se usan:

BARRA DE HERRAMIENTAS BÁSICAS

Herramienta Selección: . Es la herramienta más usada de todas. Su uso

principal es para seleccionar objetos. permite seleccionar los bordes de los objetos, los rellenos (con un sólo clic), los bordes (con doble clic), zonas a nuestra elección... Además, su uso adecuado puede ahorrarnos tiempo en el trabajo.

Herramienta Línea: Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta. Una vez creada la podemos modificar sin más que seleccionar situar el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla.

18 Aplicaciones Gráficas II- FLASH

18

Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus

propiedades se verán en el tema siguiente.

Herramienta Óvalo: La herramienta Óvalo permite trazar círculos o elipses de manera rápida y sencilla

Herramienta Rectángulo: Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en el tipo de objetos que crean.

Herramienta Lápiz: Es la primera Herramienta de dibujo propiamente dicho.

Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.

Herramienta Brocha: Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo

Herramienta Cubo de Pintura: Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no está delimitada por un borde. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.

Herramienta Borrador: Su funcionamiento es análogo a la Herramienta

Brocha. Pero su función es la de eliminar todo aquello que "dibuje".

Herramienta Transformación libre: Rota, inclina, escala o distorsiona un objeto

BARRAS DE HERRAMIENTAS AVANZADAS

Herramienta Lazo: Su función es complementaria a la de la Herramienta

Flecha , pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano).

Herramienta Pluma: Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica se acaba dominando.

Al seleccionar esta Herramienta, en el Panel Opciones aparecen estas imágenes: . Esto, es la Herramienta "Varita Mágica" , tan popular en otros programas de dibujo. Permite hacer selecciones según los colores de los objetos. El tercer dibujo que aparece es este: permite hacer selecciones poligonales.

19 Aplicaciones Gráficas II- FLASH

19

Herramienta Pluma: Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica se acaba dominando.

Herramienta Subseleccionador: Esta Herramienta complementa a la

Herramienta Pluma , ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.

Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de

un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas. )

3.1 Contornos y rellenos. En Flash el contorno se manipula como un objeto independiente del relleno. Flash permite dibujar de una sola vez óvalos y rectángulos con relleno y contorno, pero es posible configurar el programa para que dibuje directamente esas figuras sin relleno y/o contorno.

3.2 Dibujar líneas rectas. Durante el trazado de las líneas debe tener en cuenta los siguientes detalles:

• Para trazar rectas encadenadas, trace la línea, deje de pulsar y sin mover el cursor del sitio, vuelva a arrastrar para crear otra línea que comience en el final de la anterior y así sucesivamente.

• Si desea encadenar una recta al final de otra creada anteriormente, asegúrese de que la opción Ver/ Ajuste/ Ajustar a objetos está activada, acerque el cursor al final de la línea anterior y, al comenzar a arrastrar, la nueva línea se adosará al final de la anterior.

20 Aplicaciones Gráficas II- FLASH

20

• Si durante el trazado mantiene la tecla Mayus pulsada, el trazado se limitará a líneas verticales, horizontales y a 45 grados.

3.3 Dibujar Óvalos. Para dibujar óvalos seleccione esta herramienta, y arrastre para trazarlo. Si mantiene presionada la tecla Mayus durante el trazado, creará círculos perfectos. 3.4 Dibujar rectángulos. Para dibujar rectángulos seleccione esta herramienta y arrastre para trazarlo. Si mantiene presionada la tecla Mayus durante el trazado, creará cuadrados perfectos. Se pueden crear rectángulos redondeados. Para ello, una vez seleccionada la herramienta Rectángulo, busque el icono en la sección opciones de la barra de herramientas. 3.5 Herramienta lápiz y pluma. Lápiz Para dibujar trazos mediante la herramienta lápiz, siga estos pasos.

1. Seleccione la herramienta lápiz en la barra lateral de herramientas. El cursor adoptará el aspecto de un lápiz.

2. Sitúe el cursor en donde desee comenzar a dibujar y arrastre para crear el trazo. Cuando haya terminado suelte el botón del ratón.

Los trazos se dibujarán con el color y tipo de línea que estén configurados. Durante el trazado de las líneas a mano alzada debe tener en cuenta los siguientes detalles:

• Si mantiene presionada la tecla Mayus durante el trazado, creará líneas rectas horizontales o verticales.

• Si desea encadenar un trazo al final de otro creado anteriormente, asegúrese de que la opción Ver/Ajuste/Ajustar a objetos está activada, acerque el cursor al final de la línea anterior y comience a dibujar el nuevo trazo; cuando termine la nueva línea se unirá al final de la anterior.

Pluma En Flash disponemos de la herramienta pluma que nos permitirá trazar rectas y curvas del tipo Bézier. Efectivamente, para el trazado de curvas con suavidad y mayor precisión se utiliza el método Bézier, en el cual se especifican los puntos de comienzo y fin de la curva a la vez que se fijan unos puntos de control que establecen la dirección y forma de la curva. Mediante la herramienta sub-selección será posible modificar cualquier trazado no deseado. Las curvas Bézier se trazan siempre igual; sin embargo,

21 Aplicaciones Gráficas II- FLASH

21

dependiendo de lo que haga con el ratón pueden observarse dos métodos para realizar el trazado: arrastrando el ratón desde el punto inicial o bien desde el punto final de la curva. Durante el trazado de la curva Bézier se puede alternar indistintamente entre uno y otro método. Trazado de curvas Bézier Para trazar curvas Bézier arrastrando al final de la curva siga estos pasos.

1. Seleccione la herramienta pluma. El cursor tomará la forma de una plumilla. 2. Sitúe el cursor sobre el punto donde desea comenzar la curva, haga clic con el

ratón y suelte. Aparecerá un pequeño círculo. 3. Desplace ahora el cursor dos o tres centímetros en cualquier dirección para

situarlo en el lugar donde quedará el punto final de la curva. 4. Mantenga pulsado el ratón y muévalo en varias direcciones. En ese momento

comenzará a aparecer una curva a la vez que una línea recta (línea de control) que se puede rotar en cualquier ángulo y alargar todo lo que se quiera.

5. Una vez conseguido el aspecto de curva deseada, pulse la tecla Esc para desactivar la curva que acaba de dibujar.

3.6 Selección de objetos.

Los objetos así considerados tienen 2 partes fundamentales:

El Borde: Consiste en una delgada línea que separa el objeto del exterior del escenario. Puede existir o no, según nos convenga. Cuando creamos un objeto, el borde se crea siempre y su color será el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores ). Si queremos dibujar creando Bordes deberemos emplear las Herramientas Lápiz, Línea o Pluma y si queremos que nuestro dibujo no tenga borde, bastará con seleccionar el borde y suprimirlo (ver siguiente punto).

El Relleno: El relleno no es más que el propio objeto sin borde. Es, por tanto, la parte interna del objeto. Su existencia también es arbitraria, ya que podemos crear un objeto cuyo color de relleno sea transparente, como ya se vió en el tema de Dibujar, y por tanto, parecerá que dicho objeto no tiene relleno, aunque en realidad sí que exista pero sea de color transparente. Para dibujar Rellenos (sin borde) podemos usar herramientas tales como la Brocha o el Cubo de Pintura

22 Aplicaciones Gráficas II- FLASH

22

Seleccionar

Para poder trabajar con objetos, es fundamental saber seleccionar la parte del objeto que queramos modificar (mover, girar, cambiar de color...). Podremos observar que las partes de un objeto seleccionadas toman una apariencia con textura para indicar que están seleccionadas.

Objeto SIN seleccionar

Objeto con el BORDE seleccionado

Objeto con el RELLENO seleccionado

Veamos cómo seleccionar las diferentes partes de un objeto:

Seleccionar un Relleno o un Borde : Basta hacer clic 1 vez en el Relleno o en el Borde que queramos seleccionar.

Seleccionar el Relleno y el Borde de un objeto : Hacer doble clic en el Relleno.

Seleccionar todos los bordes (o líneas) de un mismo color que estén en contacto : Hacer doble clic sobre una de las líneas que tenga el color que pretendamos seleccionar.

Seleccionar un Símbolo, un texto, o un grupo : Clic en el Símbolo, en el texto o en el grupo. Estos tipos de objetos mostrarán un borde de color azul (por defecto) al estar seleccionados.

Seleccionar Varios elementos : Mantendremos pulsada la tecla SHIFT mientras seleccionamos los objetos que queramos.

Seleccionar los objetos que se encuentran en una de terminada zona : Para ello usaremos la Herramienta Flecha . Haremos clic en una parte del escenario y arrastraremos el cursor hasta delimitar el área que contenga los objetos que queremos seleccionar. Si esta área corta algún objeto, sólo quedará seleccionada la parte del objeto que esté dentro del área que hemos delimitado. Si quisiéramos incluir dicho objeto, bastaría con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar.

Este modo de seleccionar objetos permite seleccionar muchos objetos rápidamente, además de permitirnos seleccionar determinadas zonas de los objetos, para cortarlas, pegarlas ...

Además de la Herramienta Flecha, también podemos usar la Herramienta Lazo, más útil aún si cabe. Nos permite seleccionar cualquier zona de cualquier forma (la forma la determinamos nosotros) del objeto que sea. Al contrario que la Herramienta Flecha, las áreas seleccionadas no tienen porque ser rectángulares.

Seleccionar a partir de la Línea de Tiempo: Si seleccionamos un determinado fotograma en la línea de tiempo, se seleccionan automáticamente todos los objetos que estén en dicho fotograma. Esto es útil para modificar de un modo rápido todos los elementos del fotograma.

Seleccionar Todo : La forma más natural de seleccionar todo, consiste en hacer clic en el menú Editar -> Seleccionar Todo.

3.7 Agrupar y desagrupar.

Un Grupo no es más que un conjunto de objetos. Si bien no cualquier conjunto de objetos forman un grupo, ya que para crear un grupo, debemos indicarle a Flash que así lo queremos. Para ello, basta seleccionar los objetos que queremos que formen parte de un grupo y después hacer clic en el Menú Modificar -> Agrupar.

23 Aplicaciones Gráficas II- FLASH

23

Tras hacer esto observaremos que desaparecen las texturas que indicaban que los objetos estaban seleccionados y observamos que el grupo pasa a ser un "todo", ya que resulta imposible seleccionar a uno de sus miembros sin que se seleccionen a su vez los demás. Además, aparece el rectángulo azul (por defecto) que rodea al grupo, definiéndolo como tal.

Objetos desagrupados Objeto agrupado 3.8 Interacción entre objetos. Cuando quiera realizar objetos complejos, deberá combinar estos elementos para obtener resultados más elaborados, aunque en tal caso, deberá comprender cómo interactúan entre sí los objetos de Flash cuando se encuentran en la misma capa o en capas diferentes. Un objeto dibujado sobre otro en la misma capa afecta directamente al objeto que queda por debajo de tal manera que, en función del tipo de objeto (línea o forma) que se encuentre por encima o por debajo, el resultado será uno u otro. Cuando una línea pasa por encima de otra línea Cuando una línea pasa por encima de otra línea, las líneas quedan segmentadas entre sí, es decir, la línea que esté por debajo queda segmentada por efecto de la que se ha dibujado encima y viceversa. Los segmentos pueden ser seleccionados individualmente. Cuando un relleno pasa por encima de una línea. En este caso, sucede casi lo mismo que en lo anterior. La línea, al encontrarse por debajo queda segmentada por el trazo superior. Igualmente, cada segmento de la línea puede seleccionarse por separado. La única diferencia es que aquí el relleno no resulta segmentado por la línea. Cuando una línea pasa por encima de un relleno. En este caso el resultado es algo diferente. Cuando una línea pasa por encima de un relleno, el relleno es segmentado en los puntos de cruce de la línea, pero el relleno resulta también segmentado por la parte de línea que lo atraviesa.

24 Aplicaciones Gráficas II- FLASH

24

3.9 Alinear objetos. Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos oportunas, veamos cómo colocarlos en el Escenario. Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposición el Panel Alineamiento. Este Panel lo podemos encontrar en el Menú Ventana -> Alinear. Así funciona: El Panel Alineamiento permite colocar los objetos tal y cómo le indiquemos. Antes de ver las posibilidades, debemos hacer hincapié en la opción En Escena. Esta opción nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como referencia el escenario. Si esta opción no está seleccionada, los objetos toman como referencia al conjunto de objetos en el que se encuentran, y se colocan en función de ellos. Lo más habitual es seleccionar En Escena , para que los objetos se coloquen según los límites de la película, en el centro del fotograma etc... Conozcamos un poco mejor el Panel Alineamiento y sus posibilidades:

Alineamiento: Sitúa los objetos en una determinada posición del fotograma (si está seleccionado En Escena). Las distintas opciones afectan a todos los elementos seleccionados y se emplean muy a menudo para situar los objetos en determinados sitios predefinidos. Por ejemplo: Si quisieramos situar un objeto en la esquina inferior izquierda, bastaría pulsar el primer y el sexto botón consecutivamente.

Distribuir: Sitúa los objetos en el escenario en función de unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribución de los mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botón de la izquierda. Cada uno de los 2 cuadrados se situará en un extremo de la película (uno arriba y otro abajo).

Coincidir Tamaño: Hace coincidir los tamaños de los objetos. Si está activo "En Escena" estirará los objetos hasta que coincidan con el ancho y el largo de la película. Si no está activo, la referencia será el resto de objetos. Por ejemplo, si tenemos 2 cuadrados distintos y la opción "En Escena" no está activada, al hacer clic en el primer botón de "Coincidir Tamaño", el cuadrado más estrecho pasará a tener la anchura del cuadrado más ancho. Si "En Escena" hubiera estado activo ambos cuadrados hubieran pasado a tener el ancho del fotograma.

Espacio: Espacia los objetos de un modo uniforme.

25 Aplicaciones Gráficas II- FLASH

25

3.10 Transformar objetos. La transformación de los objetos implica diferentes acciones que se deben de realizar, por ejemplo, tamaño, rotación, inclinación, reflejo, etc. Rotación de objetos Al rotar un objeto, éste gira sobre su punto de transformación. El punto de transformación se alinea con el punto de registro, que se establece de forma predeterminada en el centro del objeto; sin embargo, es posible mover el punto arrastrándolo. Puede rotar un objeto con el comando Rotar, arrastrándolo con la herramienta Transformación libre o especificando un ángulo en el panel Transformar. Al rotar un objeto arrastrándolo, también lo puede sesgar y escalar. Al rotar un objeto con el panel Transformar, es posible escalarlo al mismo tiempo. Herramienta transformación libre.

Esta herramienta nos permite realizar todo tipo de transformaciones en los objetos, grupos, instancias o bloques de texto libremente. También se pueden realizar transformaciones individuales o combinar varias transformaciones, como el movimiento, la rotación, la escala, la inclinación y la distorsión. Cuando crea un objeto y lo selecciona con esta herramienta, aparece el objeto de la siguiente manera.

Distorsión de objetos La herramienta transformación libre le permitirá distorsionar objetos gráficos. Para ello siga estos pasos.

1. Seleccione el objeto a distorsionar.

2. En la barra de herramientas seleccione transformación libre y seleccione la opción Modificar / Transformar / Distorsionar.

3. Seleccione alguno de los vértices a distorsionar.

26 Aplicaciones Gráficas II- FLASH

26

UNIDAD IV: Texto. OBJETIVO: Aplicar la herramienta texto de acuerdo a sus atributos y características. 4.1 Trabajar con texto.

La herramienta Texto del cuadro de herramientas le permitirá insertar y editar texto en la escena. En principio el texto introducido es tratado como un grupo y si desea tratarlo como si fueran formas independientes, se deberá aplicar la opción Modificar /Separar (break apart), como ya se vio. Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación, y por tanto, también todo aquello relativo a los textos. Sin embargo, Flash fue concebido para crear animaciones gráficas, de modo que tratará cualquier texto como si de un objeto más se tratase, listo para ser animado a nuestro gusto. Esto nos permitirá posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo. Flash distingue entre 3 tipos de texto, texto estático o normal, texto dinámico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), también se puede crear texto que soporte formato HTML, etc. 4.2 Propiedades de los Textos.

Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del escenario en el que queramos empezar a escribir.

El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra película, de modo que si seleccionamos un texto, podremos ver en él todo lo que nos hace falta conocer sobre nuestro texto. Si tenemos experiencia usando Flash 5, notaremos que todas las propiedades que antes se encontraban en los Paneles Carácter y Párrafo , se encuentran agrupadas ahora en el Panel Propiedades.

27 Aplicaciones Gráficas II- FLASH

27

Veamos a fondo el Panel Propiedades:

Fuente: Desde aquí, al igual que en los editores de texto más comunes podemos seleccionar el tipo de letra o "fuente" que más nos guste.

Altura: Determina el espaciado entre los caracteres. Útil cuando la tipografía que empleamos muestra las letras muy juntas o para dar efectos concretos al texto.

Ajuste automático entre caracteres: Activar esta casilla provoca que la separación entre caracteres se realice de modo automático.

Posición: Nos permite convertir nuestro texto en subíndices o en superídices (o dejarlo normal).

URL: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una dirección web, nada más fácil que escribirla ahí. Flash la asociará al texto que estés escribiendo en ese momento.

Tipo de Línea: Si el texto que vamos a incluir es dinámico (de lo contrario aparece sin activar), esta opción nos permite determinar cómo queremos que aparezcan las líneas (línea única, multilínea o multilínea sin ajuste).

Configuración: Son las clásicas opciones que permiten convertir el texto en Negrita (B), Cursiva (I), cambiar el color del texto y el tamaño.

Otras Propiedades: Dado que Flash trata los textos como objetos, éstos también tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo, pues las tipografías son una parte muy importante y deben respetarse.

Un Párrafo no es más que un conjunto de caracteres con propiedades comunes a todos ellos. Estos párrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con párrafos (entre otras).

A la Izquierda: Todas las líneas empezarán tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido).

Centrar: Las líneas se distribuyen a la derecha y a la izquierda del punto medio del Párrafo.

A la derecha: Todas las líneas empezarán tan a la derecha como sea posible

28 Aplicaciones Gráficas II- FLASH

28

(dentro del recuadro de texto que hayamos definido).

Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus límites.

El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho), los sangrados de párrafo y el espacio interlineal.

Tipos de Textos

Como ya hemos comentado, Flash distingue entre diversos tipos de textos y les da un tratamiento especial, según el tipo que sean.

Todos los tipos de textos responden a las propiedades comentadas en los puntos anteriores, y es en el Tipo de texto en lo que se diferencian. El tipo de texto se puede modificar desde el Panel Propiedades sin más que haciendo clic sobre la pestaña

"Tipo de texto":

Texto Estático

El Texto Estático se caracteriza por no presentar ningún cambio a lo largo de la animación. Es importante que no confundamos la palabra "estático" con que el texto no se mueva o malinterpretemos la frase "es el texto que no presenta cambios a lo largo de la animación".

Lo que queremos decir es que no cambia el contenido del recuadro de texto , es decir, que el texto puede estar animado (girar, cambiar de color...) y sin embargo ser estático. Así, un recuadro de texto en el que pone "Aprende Flash MX" durante toda la película, es estático, aunque dicho texto cambie de posición, forma o color. Sin embargo, si en ese mismo recuadro de texto pasa a poner "Con este Curso", este recuadro de texto NO es estático. Se insistirá en este punto en los ejercicios de evaluación.

Los textos estáticos sólo tienen 2 propiedades extras:

Usar Fuentes del Dispositivo: Esta opción permite que la película Flash emplee las Fuentes que tenga instaladas el usuario que ve la película en su ordenador. Si dicho usuario dispone de las fuentes que hemos utilizado en la película, la verá exactamente como queremos que la vea, pero si no las tiene, Flash empleará la fuente que más se le parezca. Esto muchas veces lleva a que el resultado final (el que ve el usuario) no se parezca al que pretendíamos, por lo que suele ser conveniente mantener esta opción sin seleccionar, aunque esto conlleve un mayor tamaño de la película final.

Seleccionable: Con esta opción activada el usuario podrá seleccionar los textos que aparezcan en la película (cortarlos, copiarlos...) Actívala si lo crees conveniente.

29 Aplicaciones Gráficas II- FLASH

29

Texto Dinámico

El Texto Dinámico en contraposición al estático sí que puede cambiar su contenido (además de estar animado). Su uso es bastante más complejo que el del Texto Estático, ya que cada recuadro de texto Dinámico puede ser una variable modificable mediante ActionScript, esto quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante programación, lo que nos saca del objetivo de este curso. Un uso común que suelen tener es el de representar los textos introducidos mediante Textos de Entrada (ver siguiente punto).

Tienen multitud de propiedades, accesibles desde el Panel Propiedades , se puede decidir el número de líneas que van a tener, se puede introducir texto HTML, se puede añadir fácilmente un borde al texto o dar nombre a la variable que represente al texto Dinámico.

Texto de Entrada

El Texto de Entrada tiene básicamente las mismas propiedades que el Texto Dinámico, junto con algunas propias de un tipo de texto orientado a la introducción de datos por parte de usuario, como por ejemplo el número máximo de líneas que puede introducir en ese campo de texto o si queremos que lo que el usuario escriba en dicho campo aparezca como asteriscos (para las contraseñas).

Evidentemente este tipo de texto se reflejará en nuestra película como un recuadro de texto SIN contenido, ya que lo deberá introducir el usuario.

Como hemos mencionado antes, este tipo de texto se puede combinar con el Texto Dinámico .

Flash permite crear animaciones de texto tan interactivas como las que pueden crear con imágenes (ya hemos visto lo sencillo que es convertir un texto en un enlace a otra página web). Aún así, crear animaciones con textos, que sobrepasen a las que Flash incorpora por defecto (colores, transparencias, brillos, rotaciones, movimientos o combinaciones de estos) puede resultar un trabajo de muchísimas horas y mucha paciencia. Los resultados son increíbles, pero puede resultar recomendable en estos casos usar algunos programas diseñados con este objetivo. Entre otros destacan el Swish, el FlaX o el MiX-Fx, con ellos podrás crear efectos de texto asombrosos en pocos minutos, aunque no podrás gozar del entorno de Flash MX ni podrás emplear el resto de herramientas de que dispone Macromedia Flash MX.

30 Aplicaciones Gráficas II- FLASH

30

UNIDAD V: Capas. OBJETIVO: Aplicar las capas de acuerdo a sus propiedades para la creación de animación en las películas. 5.1 Introducción.

Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados. Y todos hemos visto cómo colocan una hoja semitransparente con dibujos sobre otras y la superposición de todas forman el dibujo final. ¿Por qué no dibujan todo en una misma hoja? ¿Por qué trabajan con varios niveles y con varios dibujos si van a acabar todos juntos?

Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las Capas que utiliza Flash. Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar sonidos, textos... con INDEPENDENCIA del resto de capas. Hay que tener en cuenta que todas las capas comparten la misma Línea de Tiempos y por tanto, sus distintos fotogramas se reproducirán simultáneamente.

Una Capa se puede definir como una película independiente de un único nivel.

La creación de una película de Flash con varias capas podría compararse a la proyección de varias películas de cine a la vez y sobre la misma pantalla. Agregando capas podremos gozar de las siguientes ventajas :

• Cada capa podrá contener aquellos objetos que deseemos, con la ventaja de que los objetos de una capa no influirán sobre los de otra. De este modo, no tendrá que preocuparse por agrupar los objetos para que no interaccionen entre sí.

• Podremos activar la visualización de la capa o capas que deseemos con objeto de visualizar únicamente aquello que deseemos editar y evitar confusiones con otros elementos.

• Podremos organizar nuestro trabajo colocando en cada capa una animación, gráfico, sonido o elemento diferente.

• Podremos organizar las capas en carpetas. • Podremos crear capas especiales de guía que le permitirán hacer que los

objetos se muevan trazando un camino determinado. • Podremos crear capas especiales de máscara que le permitirán mostrar y

ocultar objetos selectivamente.

31 Aplicaciones Gráficas II- FLASH

31

5.2 Elementos de la ventana con las capas. La siguiente imagen muestra un ejemplo de una película con 4 capas, cada capa tiene un nombre y se identifican además con un color diferente; así mismo, se señalan los diferentes elementos que puede tener una capa, los cuales a continuación se describen.

Inserta Capa : Cuando se inicia Flash, aparecerá una capa por defecto denominada Capa 1, si desea añadir nuevas capas en la escena, haga alguna de estas cosas:

• En la parte inferior de la ventana de capa, haga clic en insertar Capa. • Elija la opción Insertar/ línea del tiempo / Capa. • Clic con el botón derecho sobre una capa y elija la opción Insertar capa en el

menú contextual que aparecerá. Seleccionar Capas : Para seleccionar una capa individualmente solo haga clic sobre la

capa, al mismo tiempo aparecerá un icono de lápiz indicando que es la capa activa. También puede seleccionar varias capas a la vez. El procedimiento puede variar:

• Para seleccionar capas consecutivas haga clic sobre la capa inferior del grupo de capas que desee seleccionar y manteniendo la tecla Mayus , haga clic en la capa superior que desee. Éstas y todas las capas intermedias quedarán seleccionadas a la vez. También puede hacerlo al revés.

• Para seleccionar capas salteadas , haga clic sobre la capa que desee, mantenga presionada la tecla Ctrl y haga clic en la siguiente capa.

Visualización : Se activa o desactiva la visualización de acuerdo a su necesidad. Para que se vea o no el contenido de una capa en pantalla. Esto permite que pueda desaparecer parte o todos los elementos de la pantalla para editar o trabajar en una capa determinada.

32 Aplicaciones Gráficas II- FLASH

32

Bloqueo : Si bloquea una capa, los objetos que contenga seguirán apareciendo en la escena pero no podrán ser seleccionados ni editados. Para bloquear una capa

únicamente haga clic sobre el símbolo de la columna correspondiente a la capa que desee bloquear. Para desbloquear una capa vuelve a hacer clic en el mismo lugar. Si hace clic con el botón derecho sobre el nombre de una capa, aparecerá un menú contextual en el que si selecciona la opción Bloquear otros podrá bloquear todas las capas menos la capa sobre la que haya hecho clic. Eliminar Capa : Para eliminar una capa, haga clic en el icono de la sección de capas. El programa eliminará la capa y sus correspondientes fotogramas en la línea del tiempo. También puede hacerlo haciendo clic con el botón derecho sobre una capa y eligiendo Eliminar Capa. Si desea eliminar varias capas a la vez, selecciónelas según se explicó anteriormente. Visualiza contornos : Ver una capa como contorno implica que todos los objetos que tenga aparecerán mostrando únicamente su silueta. Eso puede resultar útil para ver objetos de capas inferiores que permanecen ocultos por objetos de capas superiores o bien, para trabajar más cómodamente prescindiendo de los rellenos de los objetos. Insertar Capa Guía : Es un tipo de capa denominada especial que más adelante se detallará. Insertar Carpeta para capas: Permite crear carpetas para agrupar y ordenar las capas. Esto facilitará el trabajo en la organización que se tenga con las capas. Para crear la carpeta de capas, haga clic en el icono de la ventana o Menú Insertar / Línea del tiempo / Carpeta de capas.

Propiedades de Capa: Si hacemos doble clic en el icono , podremos acceder a un panel con las propiedades de la capa en la que hayamos hecho clic. Podremos modificar todas las opciones que hemos comentado anteriormente y alguna más de menor importancia. La siguiente ventana muestra las opciones de las propiedades de las capas.

33 Aplicaciones Gráficas II- FLASH

33

OBSERVACIONES:

• El tamaño del archivo no depende del número de capas que tenga definidas y puede crear tantas como desee.

• El programa representa cada capa en una línea horizontal de la ventana de tiempo.

• Al iniciar la reproducción de la película el cursor irá avanzando y reproducirá a la vez todo lo que contengan las diferentes capas.

5.3 Distribuir objetos en capas. Flash permite distribuir automáticamente en capas individuales objetos que se encuentran en una misma capa.

1. Seleccione los elementos de una capa que desea distribuir en capas individuales.

2. Ejecute la orden Modificar / Línea del tiempo / Distribuir en capas y cada objeto se ubicará en una capa individual.

Esta utilidad es especialmente práctica para crear animaciones de letras de texto. Así, por ejemplo, si desea ubicar las letras de un texto en capas independientes siga estos pasos. 1. Escriba el texto en la escena. 2. Ahora seleccione la opción Modificar / Separar y verá cómo cada letra pasa a

ocupar una capa diferente cuyo nombre coincide con el de la letra correspondiente.

34 Aplicaciones Gráficas II- FLASH

34

5.4 Tipos de Capas En términos generales, Flash identifica 5 tipos diferentes de Capas: Normales, Guía, Máscara, Guiadas, Enmascaradas.

Capas Normales : Son las capas por defecto de Flash y tienen todas las propiedades descritas en los puntos anteriores. Son las más usadas y se emplean para todo, colocar objetos, sonidos, acciones, ayudas...

Capas Guía : Son capas especiales de contenido específico. Se emplean en las animaciones de movimiento de objetos y su único fin es marcar la trayectoria que debe seguir dicho objeto. Debido a que su misión es representar la trayectoria de un objeto animado, su contenido suele ser una línea (recta, curva o con cualquier forma). Las capas Guía o de Guía se utilizan como referencia para facilitar la ubicación de objetos en el escenario. Así, por ejemplo, puede dibujar una forma irregular para usarla luego como guía para ubicar los elementos con mayor precisión. Flash no incluirá las capas guía en la película final, es decir, nada de lo que aparezca en la capa guía se verá en la película de Flash.

Capas Guiadas : (Guided Layers) : Cuando definimos una capa como capa guía, es necesario definir después una capa guiada. Esto es, una capa que quedará afectada por la guía definida en la Capa guía.

Capas Máscara : Estas capas se pueden ver como plantillas que tapan a las capas enmascaradas (las veremos enseguida). El funcionamiento de estas capas es algo complejo (tampoco demasiado) por lo que sugiero checar el procedimiento para su creación. Capas Enmascaradas : Estas capas funcionan conjuntamente con las Capas de tipo máscara. Al igual que las capas guía y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto. 5.5 Capas Guía. El uso de Capas Guía está íntimamente ligado a la animación por interpolación, es decir, aquel tipo de animación en el que se definen los fotogramas primero y último y los fotogramas intermedios los calcula el programa. Efectivamente estamos creando interpolación de movimiento, en lugar de que se desplace de manera recta, lo hace siguiendo un trayecto dibujado. De este modo podemos conseguir que los objetos se muevan y transformen siguiendo trayectorias predefinidas a nuestra voluntad. Procedimiento general para crear capas guía. De manera general indicaremos el procedimiento para crear capas Guía.

• Crear el objeto y agruparlo. • Crear la capa de guía de movimiento.

35 Aplicaciones Gráficas II- FLASH

35

• Dibujar en la capa de guía de movimiento el trazado que se desea que siga el objeto.

• Crear los fotogramas clave para el final de la animación en cada capa. • Activar el encaje de objetos. • Seleccionar el último fotograma de la capa del objeto y arrastrar el objeto al

punto final del trazado. • Seleccionar el primer fotograma de la capa del objeto y arrastrar el objeto al

punto inicial del trazado. • Crear la interpolación de movimiento. • Reproducir la película.

Nota : En las prácticas se creará el procedimiento detallado para este tipo de capa.

5.6 Capas Máscara. Una capa de máscara también es un tipo especial de capa que permite mostrar y ocultar a voluntad elementos que se encuentren en capas ubicadas por detrás de la capa de máscara. Así pues, una capa de máscara que contenga, por ejemplo , un círculo relleno, se convierte en una especie de “agujero” por lo que se va a ver lo que haya por debajo. Por este mismo motivo, todas las zonas de la capa de máscara que no tengan ninguna zona dibujada, ocultarán objetos que se encuentren en las capas subyacentes. Procedimiento a seguir para crear capas máscara.

• Dibujar lo que se desee enmascarar en la capa normal por defecto de la escena. • Crear una capa máscara. • Dibujar en la capa de máscara el objeto que va a servir de máscara. • Activar el efecto de máscara.

Nota : En las prácticas se detallará el procedimiento anteriormente mencionado. UNIDAD VI: Símbolos y animación interactiva. Objetivo : Crear símbolos e instancias que faciliten la elaboración de gráficos en flash y utilizarlos a través de la biblioteca de símbolos para generar animaciones más interactivas. 6.1 Símbolos e instancias. Existen dibujos (gráficos) complejos que a lo largo de nuestro trabajo con Flash quisiéramos guardarlos para poder utilizarlos en otras animaciones, así pues, lo ideal es ir almacenando de manera ordenada y correctamente clasificada, esto se hace a través de crear símbolos y guardarlos en una biblioteca. Así mismo, permitirá utilizarlos repetidamente en una misma película e incluso en diferentes películas.

36 Aplicaciones Gráficas II- FLASH

36

Símbolos: Son elementos que pueden utilizarse las veces que desee. Siempre se encuentran almacenados en las bibliotecas. Cualquier objeto dibujado directamente en Flash o importado puede convertirse en un símbolo con el objetivo de utilizarlo posteriormente. Incluso se podrán crear propias bibliotecas de símbolos a partir de bibliotecas de otras películas. Instancia : Una instancia es la representación de un símbolo en la escena. Cada vez que tome o utilice un símbolo de la biblioteca y lo lleve a la escena, lo que en realidad estará llevando es una instancia de ese símbolo. Ventajas de utilizar símbolos: 1. Comodidad de tener todos los símbolos agrupados y clasificados en una biblioteca. 2. Con el uso de símbolos evita que el tamaño de la película sea grande para su carga

en el internet, ya que si usa Copiar y pegar para crear copias de gráficos, generará archivos (películas) con mayor capacidad de bytes. Recuerde que cuando usa símbolos, realmente usa instancias del símbolo e internamente el programa solo hace referencia al símbolo.

3. Otra gran ventaja es que si hace algún cambio en el símbolo, todas sus instancias reflejarán el cambio, lo cual permitirá variar fácilmente el aspecto en la escena de todas las representaciones de un determinado símbolo.

6.2 Tipos de símbolos. Flash permite crear tres tipos de símbolos: Gráficos, Botones y Clips de películas. En un principio, lo normal es pensar que un símbolo gráfico será aquel que provenga de un gráfico, un símbolo de botón será aquel que contenga un botón y un símbolo de clip será el que contenga un clip de película. Sin embargo, Flash nos permite, convertir un símbolo gráfico en botón, convertir un símbolo gráfico en clip o un símbolo de película en gráfico. Esto es porque Flash al momento de trabajar con símbolos no toma en cuenta su contenido, sino el comportamiento del mismo. Comportamiento de los símbolos: Símbolo gráfico : Tienen una línea de tiempo propia que va sincronizada con la línea del tiempo principal. De este modo si creamos un símbolo gráfico a partir de, por ejemplo, un gráfico estático que hayamos dibujado, el símbolo ocupará únicamente un fotograma. Si añadimos a la escena varios símbolos gráficos estáticos de un fotograma cada uno en una capa, al reproducir la película, aparecerán a la vez todos los objetos y permanecerán en pantalla porque la película empieza y termina en el primer fotograma.

37 Aplicaciones Gráficas II- FLASH

37

Símbolo botón: Es un tipo especial de símbolo que le permitirá añadir interactividad a sus películas. Los botones pueden ser gráficos estáticos o dinámicos y pueden incorporar sonido, acciones, etc. Cuando se va a crear un nuevo botón Flash abre una pantalla específica mostrando la línea del tiempo botón. Cada botón tiene su propia línea del tiempo independiente, la cual contiene únicamente cuatro fotogramas.

• El primero se denomina Reposo y contendrá el aspecto del botón cuando no tenga encima el cursor del ratón.

• El segundo fotograma se denomina Sobre y contendrá el aspecto del botón cuando tenga encima el cursor del ratón.

• El tercer fotograma se denomina Presionado y contendrá el aspecto del botón cuando se haga clic sobre él con el cursor del ratón.

• Finalmente, el cuarto fotograma se denomina Zona activa y nos permitirá definir el área activa que deberá considerarse para que el clic del cursor sea efectivo.

En cualquier caso, cuando arrastremos un botón desde la biblioteca a la escena, únicamente ocupará un fotograma.

Los botones tienen su propia línea de tiempos. Esta es independiente pero, sin embargo, está formada únicamente por cuatro fotogramas, uno para cada estado posible del botón. Observe la imagen.

Símbolo clip de película : Es aquel que contiene una animación con más de un fotograma pero con una línea del tiempo independiente de la película principal. Eso quiere decir que un símbolo de clip de película siempre se reproducirá de principio a fin y de forma independiente a la línea del tiempo de la escena principal. Así pues, si arrastramos un clip de película desde la biblioteca a la escena, ocupará únicamente un fotograma pero éste contendrá la totalidad de fotogramas del clip y la animación no se detendrá aunque se asigne una acción de Stop a la película principal.

38 Aplicaciones Gráficas II- FLASH

38

6.3 Propiedades de los símbolos. El panel de propiedades indica los siguientes elementos cuando se trabaja con símbolos.

6.4 Cómo crear símbolos. Hay varias formas para crear símbolos. Todo depende de si partimos de un gráfico o de la nada, o incluso de otro símbolo. Si ha dibujado un gráfico en Flash y desea guardarlo para posteriores usos, selecciónelo y haga lo siguiente:

1. Seleccione la opción Modificar / Convertir en símbolo o pulse directamente F8. En cualquier caso se abrirá una ventana en la que deberá marcar la casilla Gráfico y asignar un nombre para el nuevo símbolo.

2. Acepte y el nuevo símbolo se almacenará en la biblioteca mostrando el icono de

a la izquierda de su nombre. El gráfico original permanecerá en la escena pero ahora ya no será el gráfico en sí sino una instancia o representación del símbolo contenido en la biblioteca.

Nota: También puede crear un símbolo, seleccionando el objeto y haciendo clic con el botón derecho.

Creación de un Símbolo Botón

En la creación de un botón podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a símbolo de tipo botón y posteriormente veremos cómo completarlo internamente, lo que nos ayudará a entender mejor dicha estructura.

Primeramente crearemos el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que nos ofrece Flash MX.

Seleccionaremos el objeto y accederemos al menú Insertar-> Convertir en Símbolo , le daremos el comportamiento Botón y asignaremos un nombre a nuestro nuevo símbolo.

39 Aplicaciones Gráficas II- FLASH

39

De esta forma ya tenemos transformado el objeto para que se comporte como un botón. Ahora lo completaremos internamente.

Para determinar cómo debe reaccionar el botón en función de las acciones del ratón, lo editaremos haciendo clic con el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la opción Editar.

Cuando tengamos delante la línea de tiempos del botón (observa que tiene el aspecto que hemos mostrado anteriormente), seleccionaremos cada uno de los fotogramas (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.

Ahora ya podemos modificar el aspecto inicial del botón para cada posición del cursor y marcar el área de acción del botón (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso sólo es importante la forma del objeto, no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura, en cuya superficie "se sentirá aludido" nuestro botón.

6.5 Biblioteca de símbolos. Como ya se ha visto a la biblioteca de símbolos van a parar todos los símbolos que se vayan creando. Sin embargo, la biblioteca permite almacenar otros tipos de elementos tales como imágenes bitmap importadas, sonidos, vídeos, etc. Todos estos elementos se pueden clasificar y organizar en carpetas para que puedan ser localizados fácilmente. Cada película dispone de una biblioteca específica en donde se almacenarán todos los elementos que integren esa película. No obstante, es perfectamente posible importar elementos.

40 Aplicaciones Gráficas II- FLASH

40

Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un icono que representa el tipo de símbolo que representan:

Clip Botón Gráfico Tipos de Bibliotecas Biblioteca de la película Aquí es donde se almacenan todos los símbolos, bitmaps y sonidos correspondientes a la película activa. Para abrirla pulse F11, CTRL + L o Window /Library. Bibliotecas prefijadas También conocidas como bibliotecas comunes, vienen implementadas en Flash y contienen botones, clases y elementos interactivos que puede utilizar. Elementos de la ventana de biblioteca

Utilizar elementos de la biblioteca de otra películ a.

• Seleccione Archivo / Importar a la librería (File / Import to library).

Propiedades.- Permite cambiar el comportamiento del símbolo seleccionado, su nombre o entrar a editarlo individualmente. También puede entrar a la opción Properties del menú.

41 Aplicaciones Gráficas II- FLASH

41

6.6 Los fotogramas. En Secciones anteriores se habló de los fotogramas y los tipos que existen, en este apartado, se mencionará un poco más de la configuración y manipulación de los fotogramas para la creación de Gif´s animados. Cambiar el tamaño de los fotogramas Por defecto los fotogramas aparecen en un tamaño de visualización normal. En determinadas ocasiones deseará aumentar su tamaño para, por ejemplo, ver las etiquetas que les asignemos. Para cambiar la anchura de los fotogramas

Haga clic en el icono que aparece en el borde superior derecho de la ventana de línea del tiempo y se abrirá un menú en el que podrá elegir los tamaños: Diminuto, Pequeño, Normal, Media y Grande.

Se había mencionado el color de los fotogramas, pero si hace clic en el icono en la parte superior derecha de la ventana de línea de tiempo y desactiva la opción Fotogramas coloreados del menú que aparecerá, todos esos colores desaparecerán y quedará de este modo.

• Los fotogramas que contienen gráficos estáticos aparecerán en color blanco. • Los fotogramas que contienen animaciones realizadas con interpolación de

forma aparecerán con una trama gris y con una flecha verde en su interior. • Los fotogramas que contienen animaciones realizadas con interpolación de

movimiento aparecerán con una trama gris y con una flecha roja en su interior. • Los fotograma clave aparecerán con un punto cuyo color será azul si se trata de

gráficos estáticos, verde si se trata de una interpolación de forma o rojo si se trata de una interpolación de movimiento.

Alargar la duración de los fotogramas. La velocidad de reproducción es única para todas las capas de la película. Sin embargo, es posible acelerar o disminuir la velocidad de cualquier parte de la animación variando el número de fotogramas empleados para definir la acción. Así pues, si se añaden unos cuantos fotogramas clave o intermedios en un lugar de la película, la acción que en ese lugar se produjera se alargará y en consecuencia la acción durará más. 6.7 Creación de GIF´S animados. Como seguramente sabrás, los gif´s animados son pequeñas imágenes en movimiento que aparecen en multitud de páginas Web y que les caracteriza en la mayoría de los casos un aspecto simpático. Flash permite crear y editar ese tipo de archivos.

42 Aplicaciones Gráficas II- FLASH

42

Cómo crear o editar un GIF animado Los GIF´S animados están muy relacionados con las animaciones fotograma a fotograma porque presentan su misma estructura. De hecho, cuando importa un gif animado, aparece en la línea del tiempo con el aspecto de una animación fotograma a fotograma. Cuando importa un GIF animado (File / Import), podremos editar cada fotograma como nos plazca, ahora bien, tenga en cuenta que los GIF´s animados son una sucesión de imágenes bitmap, lo cual significa que no está trabajando con imágenes vectoriales y en consecuencia no podrá usar las herramientas de flash para editar, a no ser, claro está, que convierta la imagen bitmap a vectores (vectorizar).

Recuerde que para vectorizar (trazar) bitmaps se utiliza la opción Modify / Trace Bitmap. No obstante, dado que el tamaño de los gif´s animados es normalmente muy pequeño para que no tarden demasiado en bajar de la red, acostumbran a perder bastante detalle al vectorizarlos. Crear un Gif con Flash.

a) Abrir el archivo en Flash. b) Hacer clic en File / Publish Settings… c) En la pestaña Formats, haz clic en GIF image (.gif)

Otro modo de poder editar bitmaps de los fotogramas de un Gif animado una vez

vectorizados es mediante la herramienta Lazo y su modificador . 6.8 Uso del papel Cebolla. En general, Flash sólo muestra un fotograma de la secuencia de animación en el escenario. Para facilitar la ubicación y edición de la animación fotograma a fotograma, puede ver varios fotogramas a la vez en el escenario. El fotograma situado bajo la

43 Aplicaciones Gráficas II- FLASH

43

cabeza lectora aparece de color normal, mientras que los fotogramas circundantes aparecen atenuados; cada fotograma parece estar dibujado sobre hojas de papel traslúcido (papel cebolla) colocadas una encima de otra. Los fotogramas atenuados no pueden editarse. El uso del papel Cebolla nos va a permitir ver simultáneamente en la pantalla el contenido de varios fotogramas a la vez. Gracias a eso podremos saber de un vistazo la posición relativa que ocupan en cada momento los objetos que contienen los fotogramas y podremos situarlos con mucha mayor precisión en la escena. Para poder ver el comportamiento del papel cebolla, se tiene que cargar una animación y hacer clic en los iconos de papel cebolla, debajo de la línea del tiempo. • Para ver los fotogramas de papel cebolla como

contornos, haga clic en el botón Contornos de papel cebolla.

• Para cambiar la posición de los marcadores de papel cebolla, arrastre el puntero hasta la nueva ubicación. En general, los marcadores se mueven de forma conjunta con el puntero del fotograma actual.

• Para poder editar todos los fotogramas situados entre los marcadores de papel cebolla, haga clic en el botón Editar varios fotogramas. En general, la opción Papel cebolla sólo permite editar el fotograma actual. Sin embargo, puede ver el contenido de cada fotograma situado entre los marcadores y editarlo aunque no se trate del fotograma actual.

UNIDAD VII: Acciones en Flash. OBJETIVO: Crear películas interactivas aplicando las acciones del lenguaje Action script. 7.1 Introducción. Hasta ahora hemos visto cómo se crean las películas en Flash de forma automática y secuencial, es decir, desde el principio hasta el final y sin posibilidad de hacer nada para impedirlo. Sin embargo, Flash permite añadir acciones que facilitarán, entre otras cosas, saltar a otros fotogramas o escenas, utilizar el teclado o el ratón para ejecutar estas acciones y dotar de interactividad a la película.

44 Aplicaciones Gráficas II- FLASH

44

¿Qué son las acciones? Las acciones son una especie de órdenes que Flash ejecutará cuando el cabezal de reproducción llegue a ellas. Cada tipo de acción obligará al programa a realizar algo en concreto, por ejemplo, ir de un fotograma a otro, pasar de una escena a otra, pasar de una película a otra, detectar si un fotograma se ha cargado, detener la reproducción de un clip, etc. Todas estas acciones están escritas en un lenguaje de programación específico y aparecen automáticamente en el panel de acciones en forma de scripts cuando son llamadas. Las acciones se pueden colocar en los fotogramas clave y en los objetos, que pueden ser: botones o instancias de clips de película. • Las acciones ubicadas en fotogramas clave se ejecutarán cuando el cabezal de la

línea de tiempo pase por ellas. • Las acciones ubicadas en botones, requerirán de la interactividad con el usuario

para que las ejecuten, es decir, se deberá pasar el cursor por encima o hacer clic en el botón para que pase algo.

• Las acciones ubicadas en clips de película se ejecutarán cuando se cargue el clip o cuando se ejecute un fotograma determinado. Los fotogramas que contienen acciones muestran una pequeña “a” en su interior.

7.2 Panel Acciones.

El panel Acciones permite crear código ActionScript en un documento de Flash (archivo FLA). Este panel consta de tres paneles, cada uno de los cuales le facilita la creación y gestión de los scripts.

El panel de Acciones, dispone de dos modos de trabajo: con asistente o sin asistente (escribir directamente las funciones).

El modo de trabajo con asistente es el que aparece por dafecto y permite definir acciones de forma sencilla a base de seleccionarlas en el recuadro de acciones (caja de herramientas) y rellenando los campos de parámetros (argumentos) que solicitan las diferentes acciones. En este modo, los scripts que aparecen en el recuadro de la derecha no pueden editarse directamente.

45 Aplicaciones Gráficas II- FLASH

45

El modo de trabajo sin asistente permite, escribir y editar acciones directamente en el recuadro de la derecha, como si se escribieran scripts utilizando un procesador de textos. En este caso, no disponemos de campo de parámetros para rellenar ya que todos los parámetros deberán ser introducidos por el usuario, pero si que aparecerán en determinados momentos una sugerencia para el código que luego se verá.

La mecánica de funcionamiento del panel de acciones en modo normal, es sumamente sencilla:

• En primer lugar deberá haber seleccionado un fotograma clave, un clip o un botón, ya que las acciones que definan solo pueden ser aplicadas a esos elementos.

• Seguidamente, deberá hacer clic en uno de los doce grupos o categorías de acciones para abrirlo y localizar la acción deseada. Si deja el cursor del ratón parado sobre una acción, aparecerá un texto orientativo acerca de su cometido. Si lo desea, puede abrir todos los grupos, pero eso lo obligara a desplazarse por el recuadro mediante las barras de desplazamiento, ya que hay muchas acciones de todo tipo disponibles.

• Una vez localizada la acción deseada haga doble clic sobre ella y en el recuadro de la derecha aparecerá automáticamente la expresión script correspondiente a la acción solicitada.

• En la parte superior derecha de la ventana deberá complementar los campos necesarios para que la operación se ejecute correctamente. Dependiendo de los parámetros que vaya introduciendo en esos campos, la expresión script irá cambiando para reflejarlos. Al final de la edición de la acción, el recuadro de la derecha mostrará una expresión determinada que será la que el interprete de script ejecutará y dará como resultado la acción programada.

46 Aplicaciones Gráficas II- FLASH

46

Caja de herramientas Acciones Se utiliza para examinar una lista de elementos del lenguaje ActionScript ordenados por categorías (funciones, clases, tipos, etc.) y luego insertarlos en el panel Script. Para insertar un elemento de script en el panel Script, haga doble clic en él o arrástrelo directamente al panel Script. También puede añadir elementos del lenguaje a los scripts mediante el botón Añadir (+) de la barra de herramientas del panel Acciones.

Barras de herramientas del panel Acciones y la vent ana Script

Las barras de herramientas del panel Acciones y la ventana Script contienen vínculos a las funciones de ayuda para el código que le ayudan a simplificar y agilizar la codificación en ActionScript. Estas barras de herramientas son distintas en función de si utiliza el editor de ActionScript del panel Acciones o el panel Script. En la siguiente imagen se muestran las funciones incluidas en el editor de ActionScript. Las opciones marcadas sólo están disponibles en el panel Acciones.

Navegador de scripts Muestra una lista jerárquica de elementos de Flash (clips de película, fotogramas y botones) que contienen scripts. Utilice el navegador de scripts para desplazarse rápidamente por todos los scripts del documento de Flash.

Si hace clic en un elemento del navegador de scripts, el script asociado con ese elemento aparecerá en el panel Script y la cabeza lectora se desplazará a esa posición en la línea de tiempo. Si hace doble clic en un elemento del navegador de scripts, el script quedará fijado (bloqueado en su sitio

Panel Script En este panel es donde se escribe el código. El panel Script ofrece herramientas para crear scripts en un editor completo (denominado editor de ActionScript) que incluye aplicación de formato y revisión de la sintaxis del código, sugerencias o consejos sobre códigos, colores para el código y otras funciones que simplifican la creación de scripts. Para más información, consulte Utilización del panel Acciones y la ventana Script.

En el modo normal la parte central del panel muestra una serie de iconos que forman las funciones de la barra de herramientas .

47 Aplicaciones Gráficas II- FLASH

47

Añadir un nuevo elemento al script Muestra todos los elementos del lenguaje que también se encuentran en la caja de herramientas de ActionScript. Al elegir un elemento de la lista de categorías de elementos del lenguaje, éste se añade al script.

Buscar Busca y reemplaza texto del código ActionScript.

Insertar una ruta de destino Sólo panel Acciones. Le ayuda a la hora de establecer una ruta de destino absoluta o relativa para una acción del script.

Revisar sintaxis Comprueba los errores de sintaxis existentes en el script actual. Los errores de sintaxis se muestran en el panel Salida.

Formato automático Aplica formato al script para lograr una sintaxis de código correcta y mejorar la legibilidad. Puede establecer preferencias de aplicación de formato automático en el cuadro de diálogo Preferencias, disponible desde el menú Edición o desde el menú emergente del panel Acciones.

Mostrar consejos sobre códigos Si ha desactivado los consejos automáticos sobre códigos, puede utilizar este comando con el fin de mostrar manualmente un consejo para la línea de código en la que está trabajando.

Opciones de depuración Establece y quita puntos de corte en el script, de forma que, al depurar el documento de Flash, pueda detener y luego avanzar línea a línea por el script. Las opciones de depuración se encuentran ahora disponibles en la ventana Script, así como en el panel Acciones, pero sólo para los archivos ActionScript. Esta opción se desactiva para los archivos de comunicación de ActionScript y Flash JavaScript

Asistente de script Sólo panel Acciones. El modo de asistente de script le solicita la introducción de los elementos necesarios para crear scripts.

48 Aplicaciones Gráficas II- FLASH

48

Referencia Muestra un tema de ayuda de referencia para el elemento del lenguaje ActionScript seleccionado en el panel Script. Por ejemplo, si hace clic en una sentencia import y luego selecciona Referencia, aparece en el panel Ayuda el tema relativo a import.

Menú emergente Sólo panel Acciones. Contiene los diversos comandos y preferencias que se aplican al panel Acciones o a la ventana Script. Por ejemplo, puede establecer los números de línea y el ajuste de texto en el editor de ActionScript, acceder a las preferencias de ActionScript e importar o exportar scripts.

7.3 Añadir Acciones. Las acciones se añaden mediante el panel de Acciones, al cual se puede acceder mediante la opción Ventana / Acciones o pulsando F9. Si crea películas muy elaboradas, con muchas capas y muchas acciones en cada capa, es posible que puedan asignarse sin querer acciones en distintas capas al mismo fotograma. Para evitar eso, es preferible crear una capa dedicada a colocar acciones. De este modo siempre sabrá dónde están las acciones en línea del tiempo. Nota : Tenga en cuenta que las acciones solo se pueden incluir en los fotogramas clave. 7.4 Action Script.

El ActionScript es el lenguaje de programación que ha utilizado Macromedia Flash desde sus comienzos, y que por supuesto, emplea Flash MX. A grandes rasgos, podemos decir que el ActionScript nos permitirá realizar con Flash MX todo lo que nos propongamos, ya que nos da el control absoluto de todo lo que rodea a una película Flash. Absolutamente de todo.

Sin embargo, en estos dos temas sólo vamos a ver una pequeña introducción a ActionScript que servirá para sentar las bases que permitirán empezar a trabajar con ActionScript. Enseñar a programar con ActionScript requeriría otro curso completo.Profundizar en el conocimiento de este lenguaje queda por cuenta del lector. Recomendamos seguir la estupenda Ayuda incluida en FlashMX.

49 Aplicaciones Gráficas II- FLASH

49

Características generales del ActionScript

Como ya hemos comentado, el ActionScript es el lenguaje de programación propio de Flash.

• El ActionScript es, como su nombre indica, un lenguaje de script, esto quiere decir que no hará falta crear un programa completo para conseguir resultados, normalmente la aplicación de fragmentos de código ActionScript a los objetos existentes en nuestras películas nos permiten alcanzar nuestros objetivos.

• El ActionScript es un lenguaje de programación orientado a objetos, tiene similitudes, por tanto, con lenguajes tales como los usados en el Microsoft Visual Basic, en el Borland Delphi, etc., aunque, evidentemente no tiene la potencia de un lenguaje puramente orientado a objetos derivado del C o del Pascal como los anteriores.

• El ActionScript presenta muchísimos parecidos con el Javascript; si conoce Javascript, la sintaxis y el estilo de ActionScript le resultarán muy familiares. Las diferencias entre ambos lenguajes las puede encontrar en la ayuda que acompaña al Flash MX.

• En la mayor parte de las ocasiones, no será necesario "programar" realmente, Flash MX pone a nuestra disposición una impresionante colección de "funciones" (de momento entenderemos "funciones" como "código ActionScript que realiza una función determinada") ya implementadas que realizan lo que buscamos, bastará con colocarlas en el lugar adecuado.

Como ya se menciono, las Acciones son funciones o instrucciones predefinidas de ActionScript, es decir: Flash MX las crea, y nosotros sólo tenemos que usarlas de la manera que se nos indica. No tenemos que definir las funciones ni nada por el estilo, ni siquiera necesitamos saber cómo están hechas... Lo importante es que están listas para usar, lo que facilita el uso de este lenguaje de programación y sobre todo, haga muy rápido comenzar a programar.

Al igual que en el caso anterior, explicaremos las Acciones más importantes. Para una referencia más completa, recomendamos mirar la ayuda del programa.

Definiremos las acciones escribiendo su cabecera (n ombre + parámetros con un nombre genérico) para después explicar qué es cada parámetro.

• Acciones - Control de Película

Estas acciones se emplean, como su nombre indica, para controlar el flujo de nuestra película, esto es, para indicar a Flash en todo momento qué fotograma tiene que mostrar, cuándo tiene que parar, dónde seguir etc... Veámoslas y lo entenderemos mejor:

50 Aplicaciones Gráficas II- FLASH

50

gotoAndPlay / goto : Esta acción será, probablemente la que más useis durante la realización de vuestras películas. La acción que realiza consiste en mover la cabeza lectora al fotograma que le indiquemos. La cabeza lectora es lo que determina qué fotograma de nuestra película se está reproduciendo en cada momento. Si, por ejemplo, lo movemos del fotograma 1 al 25, lo que veremos instantáneamente será el fotograma 25 y la película continuará reproduciéndose a partir de ahí.

Uso:

gotoAndPlay(escena, fotograma):

escena: Nombre de la escena a la que queremos enviar la cabeza lectora. Debe ir entre comillas dobles.

fotograma: Número o nombre del fotograma al que queremos enviar la cabeza lectora. Si es un nombre, debe ir entre comillas dobles, si es un número, NO.

Ejemplo:

gotoAndPlay("Escena2", 7); --> Esta acción lleva la cabeza lectora al fotograma 7 de la escena llamada "Escena2".

Play: Da comienzo a la reproducción de la película, generalmente porque algo la ha detenido.

Uso:

Play();

No tiene Parámetros.

Stop : Detiene la reproducción de la película. Se puede usar en un fotograma, cuando queramos detenernos en él (porque es un menú, por ejemplo), en un botón, (para que detenga la película) etc...

Uso:

Stop();

No tiene Parámetros.

• Acciones - Navegador / Red

Estas acciones tiene diversas funciones, describimos las más importantes:

51 Aplicaciones Gráficas II- FLASH

51

fscommand : Esta acción, es capaz de ejecutar ciertos comandos muy potentes. Lo más cómodo es pasar a Modo Básico (sino estábamos ya) e insertarla, nos aparecerá una pestaña con los posibles comandos que admite:

- fullscreen : Si se activa pone nuestra película a pantalla completa. Muy útil para presentaciones en CD-Rom, por ejemplo.

- allowscale: Controla el redimensionamiento de los objetos insertados en la película cuando el usuario estira los bordes de la misma (o de la página web en la que se encuentre) ¿Queremos mantener las proporciones? Este comando nos permite controlarlo.

- showmenú: Si has visto el menú que aparece al pulsar el botón derecho del ratón sobre una película Flash, seguro que has pensado en hacerlo desaparecer ... puede que no interese que los usuarios puedan moverse a sus anchas por nuestra película. Ejecutando esta sentencia del modo adecuado (false), podremos ocultarlo.

- trepallkeys: Sirve para detectar las pulsaciones de todas las teclas durante la reproducción de nuestras películas.

Todas estas alternativas, comparten modo de uso, veámoslo:

Uso:

fscommand("comando","true / false")

comando: El comando a ejecutar (fullscreen, allowscale, etc...)

true / false: Aquí debemos escribir true o false, según queramos desactivar la opción o activarla.

Ejemplo:

fscommand("fullscreen", "true"); -> Activa la pantalla completa.

getURL : Esta acción se emplea para abrir el navegador web y abrir la página web que deseemos.

Uso:

getURL(url , ventana , "variables")

url: Dirección web a la que queremos acceder (se abrirá una ventana).

ventana: Parámetro OPCIONAL. Modo en el que queremos abrir la ventana (en la ventana actual (_self) en otra nueva (_blank) etc...)

variables: Parámetro OPCIONAL, puede haber varios. Si la página lo permite (es ASP, PHP etc...) podemos enviarle variables.

Ejemplo:

52 Aplicaciones Gráficas II- FLASH

52

getURL("http://www.aulaclic.com", "_blank");

loadMovie / loadMovieNum : Esta acción permite cargar nuevas películas Flash o imágenes en nuestra película de forma dinámica (la película se cargará cuando se lo indiquemos, y no antes).

Uso:

loadMovieNum(url , nivel / destino, variables)

url: Dirección absoluta donde está situada la película SWF o la imagen JPEG

nivel / destino: Nivel donde cargaremos la película, teniendo en cuenta que el nivel básico es el 0, luego va el 1 y así sucesivamente. Cada nivel superior se sitúa delante del anterior y toma el control. Si lo usamos como destino, aquí deberemos introducir el nombre del movieclip donde cargaremos la película o el nombre del marco si estamos cargando un fichero SWF en una página HTML con marcos.

variables: Parámetro OPCIONAL. Podemos enviar variables.

Ejemplo:

loadMovieNum("MiPeli2.swf", 0) --> Cargamos la película "MiPeli2.swf" en el nivel principal. No enviamos variables.

Cómo Saltar a Fotogramas o a Escenas

Flash reproduce secuencialmente los fotogramas, si existen escenas definidas, Flash va saltando de una a otra de forma ordenada cada vez que el cabezal de lectura llega al último fotograma de cada escena.

UNIDAD VIII: Publicación de la película . OBJETIVO: Generar la publicación de la película para visualizarla en la Web. 8.1 Publicar una película. Antes de aventurarnos a publicar nuestra película para que otros la vean, sobretodo si la vamos a publicar en una página web, donde el tamaño de descarga es de vital importancia, debemos tener en cuenta las siguientes consideraciones:

CONSIDERACIONES EN EL DIBUJO:

• Aunque los degradados queden muy vistosos, también requieren más memoria, por lo que debemos evitar su uso excesivo, en la medida de lo posible.

• La herramienta pincel gasta más memoria que el resto de herramientas de dibujo, por lo que deberíamos elegir estas últimas en la medida de lo posible.

53 Aplicaciones Gráficas II- FLASH

53

• Hemos visto que la animación de líneas es bastante útil. Sin embargo el uso de líneas que no sean las definidas por defecto y que usamos en el capítulo que hemos comentado, hará que el tamaño de la descarga aumente. Por tanto evitemos las líneas discontinuas, de puntos.

• Dibujar las curvas con el menor número de nodos posible.

CONSIDERACIONES EN LA ORGANIZACIÓN:

• Agrupar los objetos que estén relacionados con el comando Modificar -> Agrupar.

• Si hemos creado un objeto que va a aparecer varias veces, deberíamos convertirlo a símbolo , ya que como hemos visto, Flash lo colocará en la biblioteca y cada vez que quiera mostrarlo, hará referencia a una única posición de memoria.

• Ya hemos comentado el mayor tamaño de los mapas de bits , lo que hace que debamos minimizar el número de apariciones de éstos en nuestra película.

CONSIDERACIONES EN LOS TEXTOS:

• Hemos podido observar, cuando manejábamos textos, que cuando abrimos el menú de tipos de letras , las tres primeras son siempre "_sans", "_serif" y "_typewriter". Esto no es una casualidad. Están colocadas ahí para resaltar que estas fuentes ocupan un mínimo de memoria, por lo que se recomienda su uso.

CONSIDERACIONES EN LA ANIMACIÓN:

• Utilizar lo más que podamos las interpolaciones de movimiento y las guías para reducir el número de fotogramas clave y el tamaño de la película.

• Evitar el uso de la interpolación por forma para animaciones de cambio de color, cuando sea posible.

Para poder distribuir películas creadas en Flash que la gente pueda ver, son necesarias dos cosas: crear un archivo SWF y que el que la quiera visualizar tenga instalado el Reproductor de Flash.

Flash nos ofrece varias opciones y funcionalidades para la creación de un archivo SWF. Estas opciones se pueden ver en el panel de Configuración de Publicación , al que podemos acceder mediante el menú Archivo -> Configuración de Publicación (Pestaña Flash).

54 Aplicaciones Gráficas II- FLASH

54

Veamos cuáles son estas opciones:

• Versión: Si queremos publicar nuestra película para que sea vista con versiones anteriores de Flash, debemos seleccionar aquí la versión deseada.

• Orden de Carga: Aquí indicamos el orden en que queremos que se cargue el documento.

Si seleccionamos De abajo a arriba se cargará primero el contenido de la capa inferior (de la capa 1 hasta la última capa que tengamos en el documento).

Por el contrario, si seleccionamos De arriba a abajo se cargará primero el contenido de la capa superior (de la última capa que tengamos en el documento hasta la capa 1).

Este comando es importante debido a la propiedad de Flash de ir reproduciendo la película conforme los objetos son cargados. Así, en caso de que nos interese que aparezcan antes unos objetos que otros seleccionaremos uno o el otro.

• Generar Informe de tamaño: Esta opción la hemos usado en el apartado anterior. Si la activamos, se creará un archivo de texto con una relación detallada del tamaño del documento.

• Proteger Frente a Importación: Activando está casilla conseguiremos que cuando otro usuario (o nosotros mismos) queramos importarla no podamos o tengamos que introducir una contraseña si se ha escogido alguna.

55 Aplicaciones Gráficas II- FLASH

55

• Omitir acciones de Trace: Las acciones de traza se emplean para comprobar el correcto funcionamiento de la película durante la creación de esta (durante las pruebas). También se consideran trazas los comentarios que insertemos en el código Action Script. Si activamos esta señal, la película creada no los incluirá, ocupará menos tamaño y ahorraremos tiempo innecesario. Es recomendable cuando se publique la película de un modo definitivo.

• Depuración Permitida: Permite que se pueda depurar el archivo SWF. También exige la introducción de una contraseña ya que se debe tener permiso del creador para Importar el archivo y depurarlo.

• Comprimir película: Comprime la película al máximo posible. • Calidad JPEG: Si en el panel de propiedades del mapa de bits no hemos

indicado una compresión concreta, aquí podremos determinar su grado de compresión, que determinará a su vez el espacio ocupado en memoria por este tipo de imágenes. A mayor compresión, menos espacio en memoria ocupará la imagen, pero también su calidad será menor.

• Suplantar configuración de sonido: Con esto se suplantarán los niveles de compresión seleccionados para cada archivo de sonido de nuestro documento.

56 Aplicaciones Gráficas II- FLASH

56

ACTIVIDADES Actividad de repaso No. 1. INSTRUCCIÓN: Responde las preguntas y encuentra las respuestas en la sopa de letras. Utiliza Colores.

1. Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto ___________

2. Se crean como en cualquier programa de dibujo, de modo rápido ___________________ 3. Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso___________ 4. Permite trazar círculos o elipses de manera rápida y sencilla _________________________ 5. Permite aplicar rellenos a los objetos que hayamos creados__________________________ 6. Se diferencia de la herramienta óvalo por el tipo de objeto que crea ___________________ 7. Permite Rotar, inclinar, escalar o distorsionar objetos_______________________________ 8. Crea polígonos de modo sencillo. Es una de las más potentes que ofrece Flash 9. Su función es complementaria a la herramienta selección, pues puede seleccionar cualquier

cosa________________________ 10. Esta herramienta puede eliminar todo lo que dibuje _________________ 11. Se emplea para cambiar rápidamente el color de un trazo ____________________ 12. Permite mover los vértices que componen los objetos creados con la herramienta pluma.

________________ 13. Es la Herramienta con mayor uso de todas ________________ E B R O C H A M U L D B O N S T S R I N C A G L E L O M S Z A G U R E S B P L U M A C E D R C L O R G M C A R A F G J P V T R I T U L E R C S M I N E L U T E I N O G A N D O F E L I P O G A L D N R I U L C E N M H T I O D F I E N C A S Z O P I E T E T A C U M E R X T A S A D E R I N P A L H M A B R C U A N D T E M R Q U I E S C U A N T R I N O E S E L E S U M A R T R O N E O G E O Q U I E S I E S R A T E U B O B E B T N E U S U A T I N E G E R A E F E C T B U A S U F R I D E N O I C C E L E S B C L I T A R S I S U B I E M D E N S I C A L E R I T A N G E R I E M I C A M O R E T S D F G U B D A A N G U I M A R L E C A S T I N T E D R I M A S T N A N T E C N O L E G A F R A T E R P I N T A M O G U E R I S C T N M C U B O D E P I N T U R A L L U L U M A S A P I R E C U B E T O F I R A G M C A L A L I P I T A M I L O I C U A A M B I E N T S V O R A M I P E N T E L I C O N U D O P B D R I T O M E J O A N T O L O Z I N M N I E N T E S C O L T B O T E D E T I N T A A C A R A C T R I S T I C A L A P I T E L A N T E J I T E S D O C T R I N E L T R N S F A L E L E F T E V O N W O N I E T H E P T E L F P N O I N T E L I T E C T R R I M O N E X C A R I A C T E R I S T Z A L O M E J R D L Z O N A N Z T Y I D T R A N S F O R M A C I O N E L A S A N I M E D L I T O G R F E S A B A B I R E N I L

57 Aplicaciones Gráficas II- FLASH

57

Actividad de Repaso No. 2 INSTRUCCIÓN: Completa las siguientes preguntas escribiendo sobre las líneas la respuesta correcta y busca en la siguiente sopa de letras . Identifica con colores tus respuestas. 1. Son los 4 estados o fotogramas que presenta el símbolo BOTÓN.

____________, ___________, _______________ y ___________________. 2. Para entrar a la biblioteca de símbolos presiono la tecla:_______________. 3. Visualiza _________________ puede ser útil para ver objetos en capas inferiores que

permanecen ocultos por objetos de capas superiores. 4. Cuando se crean los símbolos, se deben almacenar en la______________________. 5. Estas capas funcionan conjuntamente con las capas de tipo máscara.

________________________ 6. Es la representación de un símbolo en la escena _________________. 7. El panel ______________________ indica los elementos cuando se trabaja con símbolos. 8. Para crear un símbolo podemos entrar al menú ______________. 9. Son los tipos de bibliotecas que se manejan en Flash. __________________ y

__________________________. 10. Son pequeñas imágenes en movimiento que aparecen en multitud de páginas Web.______

J O R E P O S O I C O U A R Z A U A R O C T N B M O E X P I L R V X D B R V A Q G D A A X M Z P L C U R S E D A D E I P O R P O O X L A A N R F O R M A D R I X R G W U Z N L X P N N B B E H N I T P Z A R A Y I R O R N A H O O Q R D S S I D E S F 11 D V D Q O J M E Q A F A D X O I D B F G H J L K L P M Z N J I L 5 M T L R R O Y I O M N O B V C C M Z P C Z P Y R M Z Q E N T Y U Z S S Q W A R L W D A E X A N E Q U N A P A N T W N S L C P I J D L I P R E F I J A D A S R T C X T I C S C A I H R U I A Y J H D O O C A R R E N R E D E C S P B P Z T N C A P G R J A Y T S N L M U U R E D S X R 8 A S D A G T U E Q T Q E O G L B T O E O F K A S D R R T J F W A O S D L A P S E N S V I S A E O H R N Y E N R O I P P X L E T W C A S J C V Q U M J R C N N F W S C L A O E D O B E G V G O F S Y I P R I Z V L I G C U A D R A D O R I Q N O A A O C I E A N H I U Z D R G F I K N F L R V A T A R E R B O S F R B V A Q S L P R S A Q G N R M R V A A S I A Z O N A A C T I V A T Y O M N U Z R A T F L I P E S A N I B L C 7 F C I L E P A C E T O I L B I B A P W H U G G A

58 Aplicaciones Gráficas II- FLASH

58

PRÁCTICAS

Práctica 1: (Glosario) Con apoyo de tu antología o algún buscador de internet, investiga los siguientes conceptos y escribe en tu libreta el siguiente Glosario.

• Bitmap. • Imagen vectorial. • Escenario. • Gráficos ( Flash). • Botón ( Flash). • Clip de película. • Símbolo (Flash). • Fotogramas. • Línea del tiempo. • Capas (Flash).

Práctica 2: (Objetos de Flash) Navega en diferentes páginas Web e Identifica los objetos con los que trabaja Flash (Gráficos, botones, clips de película), Cópialos y pégalos en un documento de Word y guarda el archivo con el nombre Práctica 2_Objetos. Ejemplo:

Práctica 3: (Configuración del área del trabajo)

1. Abre el programa Flash. 2. Clic en la opción Modify / Document o CTRL + J. 3. Se abre el siguiente cuadro de diálogo

BOTÓN

59 Aplicaciones Gráficas II- FLASH

59

4. En la opción Dimensions cambia a 300 px (width) x 250 px (height). 5. En Background color, cambia a cualquier otro color. 6. Click en Ok.

Práctica 4: (Animación Fotograma a Fotograma)

1. Abre el programa Flash. 2. Configura el área de trabajo a tu gusto. 3. Estando en el primer fotograma, selecciona la herramienta Óvalo y arrastre para

dibujar un círculo. Si mantiene presionada la tecla MAYUS mientras arrastra, creará un círculo perfecto.

4. Con la herramienta de selección , haga clic en el borde del círculo y bórrelo con la teclas SUPR (tenga en cuenta el color de relleno).

5. Presione F6 para crear el segundo fotograma clave, que es donde se definirá algún cambio en la animación, ya sea de tamaño o posición. Por lo pronto seleccione el círculo y arrástrelo hacia la derecha o con la tecla de dirección avance 10 posiciones.

6. Haga clic en el tercer fotograma para seleccionarlo, pulse F6 para añadir otro fotograma clave y mueva el círculo otros diez pasos hacia la derecha.

60 Aplicaciones Gráficas II- FLASH

60

7. Repita el paso anterior hasta llegar al fotograma 10. 8. Presione la tecla Intro y se reproducirá la película. 9. Guarde el archivo en su carpeta de Prácticas de su USB con el nombre de

Práctica 4.

Práctica 5: (Pelota Rebotando)

En esta práctica debes aplicar el anterior método de Fotograma a Fotograma, para crear una animación donde el círculo va arriba abajo (pelota rebotando). 1. Abra Flash y Cree un nuevo documento. 2. Dibuje el círculo, quítele el contorno y cambie el color de relleno. 3. Presione F6 y mueva el círculo hacia arriba 10 pasos. 4. Realice el anterior paso hasta crear el efecto de Pelota rebotando. Ver ejemplo. 5. Guarde el archivo con el nombre de Práctica 5.

Práctica 6: PARTE I (Interpolación de Movimiento)

7. Cree un nuevo documento en blanco. 8. Dibuje un círculo en el lado izquierdo de la escena. Esta será la posición en el

primer fotograma. 9. Seleccione el primer fotograma, haciendo clic sobre él y pulse el botón derecho

para que aparezca el menú contextual. Seleccione la opción Crear interpolación de movimiento (Create motion tween). De momento no pasa nada.

10. Seguidamente, seleccione el fotograma 30 haciendo clic sobre el y presione F6 para crear el último fotograma clave. Inmediatamente todos los fotogramas intermedios quedarán sustituidos por una flecha.

61 Aplicaciones Gráficas II- FLASH

61

11. Ahora con el fotograma 30 seleccionado, seleccione el círculo y muévalo a la

posición final del círculo, que sería hasta la derecha de la escena (también puede moverlo con las flechas).

12. Presione la tecla Intro. PARTE II (Cambiar color y tamaño) A continuación haremos que el círculo cambie de color y de tamaño.

13. Haga clic en el fotograma 10, eso hará que se seleccione ese fotograma y aparezca el círculo con el tamaño y posición que le corresponde en ese fotograma.

14. Presione F6 para crear un fotograma clave, esto le permitirá hacer algún cambio. La inserción del fotograma clave quedará evidente por la aparición de la flecha dividida en dos.

15. Con el fotograma seleccionado, utilice la herramienta Transformación libre (Free Transform) y cambie el tamaño del círculo, jalando alguno de los puntos.

16. También en el fotograma 10 puede cambiar el color, para eso, active el panel propiedades que se encuentra en la parte inferior y active la opción color en Tinta (Tint) y escoja el color.

Jalar en algún

punto

62 Aplicaciones Gráficas II- FLASH

62

17. Presione Intro para observar el resultado. 18. Ahora en el fotograma 20, repita los pasos del 7 al 11. 19. Guarde su práctica con el nombre de Práctica 6 (Interpolación de movimiento).

Práctica 7: (Interpolación de forma) 1. En un documento nuevo dibuje un círculo con la herramienta óvalo y sitúelo en el

centro de la escena. Elimine su contorno. 2. Seleccione el fotograma 40 y pulse F6 para crear un fotograma clave. 3. En el fotograma 40, seleccione el círculo y bórrelo con la tecla SUPR.

4. Ahora active la herramienta Texto , haga clic en la escena para que aparezca el cursor del texto y escriba la palabra círculo.

5. Con la herramienta de texto haga doble clic sobre el texto recién escrito para seleccionarlo.

6. Desde el panel de propiedades, Cambie el tamaño, color y tipo de fuente. 7. Seleccione el texto y posiciónelo al centro de la escena. 8. Con el texto seleccionado, aplique dos veces la opción Modify / Break Apart. 9. Seleccione el primer fotograma haciendo clic sobre él y aparecerá el círculo. 10. En el panel propiedades aparece la casilla Tween (animar), despliégala y elija

Shape (forma). Automáticamente los fotogramas del 1 al 40 aparecerán de color verde con una flecha.

11. Presione Intro para reproducir la película y observe la interpolación de forma.

63 Aplicaciones Gráficas II- FLASH

63

Práctica 8: Interpolación de Forma para un texto.

1. Cree un documento nuevo. 2. En la parte central de la escena escriba el texto “Nuevo Flash” con un tamaño

de 60 puntos y la letra que prefiera. 3. Ahora seleccione el fotograma número 30 y pulse F6 para crear el segundo

fotograma clave. El texto escrito también aparecerá en este nuevo fotograma. 4. Con el fotograma 30 seleccionado, active la herramienta de texto y arrastre sobre

el texto escrito para seleccionarlo. Bórrelo y escriba el texto “fantástico ” en otro color y con otro tipo de letra, centre el texto.

5. Ahora seleccione el texto fantástico del fotograma 30 y elija dos veces la opción modificar/ separar para convertir el texto en un objeto editable. Recuerde que la interpolación de forma trabaja con objetos no agrupados.

6. Ahora seleccione el primer fotograma y del mismo modo separe dos veces el texto Nuevo flash para aplicar la interpolación de forma.

7. Finalmente, seleccione el primer fotograma y en la casilla animar (tween) del panel propiedades, seleccione Forma.

8. Pulse CTRL + Intro o Intro.

Práctica 9: (Interpolación de Forma - Logotipo Lasa lle) En esta práctica se aplica el procedimiento para crear interpolación de forma donde transforme un logotipo de la Salle al texto De la salle. El logotipo, lo puedes bajar de internet, pero recuerda desagruparlo y separarlo (seleccionas el logotipo, Modify / break apart)

Práctica 10: (Juego Ping Pong) Crear la simulación del juego ping pong, usando fot ograma a fotograma.

• En el primer fotograma dibujar el escenario. • A partir del segundo fotograma, harás los movimientos de la pelota y porterías.

Ver ejemplo.

Wx Ät ftÄÄx

64 Aplicaciones Gráficas II- FLASH

64

• La pelota debe rebotar por lo menos 4 veces. • El juego debe presentar el texto de “Juego Terminado” cuando termine.

Práctica 11: (Animación de un Rehilete)

• Dibuja un rehilete como a ti te guste. • Aplica animación al rehilete, ya sea fotograma a fotograma o con interpolación de

movimiento.

Práctica 12: (Animación Mixta en una sola capa) Crear una animación que tenga por objetivo Promocionar un valor humano (Amistad, honestidad, respeto, etc.), aplicar los 3 tipos de animación, la duración debe ser de por lo menos 10 segundos, debes combinar colores y tomar en cuenta los distintos procedimientos. Ejemplo.

Práctica 13: (Flor hambrienta - Fotograma a Fotogra ma)

• Ver archivos .pdf proporcionados por la profesora y realiza su procedimiento.

65 Aplicaciones Gráficas II- FLASH

65

Práctica 14: (Pelota rebotando - Capa guía) Creación de la pelota. 1. Dibuje un círculo con contorno, con un grueso del no. 3 y sin relleno. Con la

herramienta lápiz trace unas líneas verticales dentro del círculo para dividirlo en 3 partes (también puede usar una línea y modificarla a curva).

2. Seleccione cada una de las secciones de la pelota y aplique el relleno con la

herramienta . 3. Seleccione todo el dibujo y agrúpelo con CTRL + G o Modify,

Group. Crear la interpolación de movimiento 4. Haga clic con el botón derecho sobre el primer fotograma y la opción Crear

Interpolación de movimiento (motion tween). 5. Seleccione el fotograma 40 y pulse F6 para convertirlo en fotograma clave. Con esto

quedará completada la interpolación aunque, de momento, no se ha definido ningún movimiento.

Creación del trayecto para la pelota (Capa Guía) 6. Haga clic en el icono y aparecerá la capa guía

por encima de la capa actual.

7. Mediante la herramienta lápiz y el modificador

Suavizar trace un camino, el cual deberá seguir la pelota cuando aparezca en la escena, es decir, una serie de rebotes, cada uno de los cuales debe ser menor que el anterior hasta que ya no bote más. No importa que el trazo rebase los límites de la escena.

Colocación de la pelota en los lugares adecuados. 8. Revise que tenga activada la opción Ver, Ajustar a objetos (View, Snap to objects). 9. Seleccione el primer fotograma de la capa de la pelota y con la herramienta

selección arrastre la pelota hasta que su punto central se encaje con el principio de la línea.

10. Seleccione el último fotograma de la misma capa y arrastre igualmente la pelota hasta que su centro coincida con el final de la línea trazada.

11. Reproduzca la película con CTRL + Intro y verá el recorrido de la pelota en el camino trazado, simulando una serie de botes.

66 Aplicaciones Gráficas II- FLASH

66

Práctica 15: (Capa máscara) El Procedimiento general a seguir en este caso será:

• Dibujar o escribir lo que se desea enmascarar en la capa normal. • Crear una capa de máscara. • Dibujar en la capa de máscara el objeto por el cual se va a observar la capa

normal. • Activar el efecto de máscara.

Realiza: 1. Con la herramienta Texto escriba la palabra “FLASH MX”, cambie el tipo de letra y el

tamaño de letra, por lo menos de 80 puntos. Seguidamente crearemos la capa de máscara.

2. Pulse en para crear una nueva capa normal que quedará automáticamente por encima de la capa anterior.

3. Haga clic con el botón derecho sobre la nueva capa y en el menú contextual seleccione la opción Máscara (Mask). Automáticamente, la nueva capa mostrará el símbolo identificativo de las capas máscara y la capa normal que tiene por

debajo mostrará a su vez el símbolo indicativo de que se trata de una capa vinculada a la capa de máscara que tiene por encima.

4. En la capa máscara, se creará un dibujo, en este caso un círculo, que es por donde se observará la capa normal, desbloquee la capa y dibuje el círculo con un diámetro mayor que el texto. Los contornos son ignorados porque solo tiene en cuenta los rellenos y no las líneas.

5. Sitúe el círculo al principio del texto, de tal forma que sólo se verá las primeras letras.

6. Finalmente revise que esté activada la máscara y presione CTRL + Intro.

7. Se observará únicamente las letras que se cubrieron con el círculo.

8. Ahora en la capa de máscara, crea una interpolación de movimiento hasta el fotograma 40, para que recorra la capa de máscara toda la palabra.

9. En la capa texto presione en el fotograma 40 F5 para que el texto no desaparezca. 10. Presione CTRL + Intro para observar el resultado.

67 Aplicaciones Gráficas II- FLASH

67

Práctica 16: (Símbolos) 1. Dibujar 3 objetos y convertirlos en símbolos grá ficos.

Para convertir en símbolo: a) Una vez dibujado, seleccione el objeto gráfico y agrúpelo. b) Presione F8 o seleccione Insert , Convert to symbol…

En cualquier caso, aparecerá el siguiente cuadro:

c) Escriba un nombre al símbolo. d) Seleccione Graphic. e) Haga clic en Ok.

El símbolo gráfico se almacenará en la biblioteca de símbolos, para ver la biblioteca presione F11.

2. Con los 3 símbolos crea una animación usando cap as e interpolación. Puedes

aplicar Capas guía o capas de tipo máscara.

3. Crear un símbolo botón. a) En nuevo documento, seleccione la opción Insertar/ Nuevo símbolo. En la

ventana que se abrirá asigne un nombre para el botón y active la opción botón. b) Acepte y la ventana de la escena se convertirá en la ventana de edición del

botón. Como siempre, la parte superior de la ventana de la línea del tiempo mostrará el nombre de la escena principal y además, el nombre del botón que se está editando ahora.

c) Observe como aparecen únicamente 4 fotogramas. Pues bien, los tres primeros se corresponden con los 3 estados posibles del botón (reposo, encima, pulsado). El último fotograma permite definir el área activa del botón.

d) Así pues, para definir un botón lo que hay que hacer es definir el aspecto que debe tener en cada uno de los casos citados. Esta operación resulta similar a la que se vio cuando se hizo una película fotograma a fotograma.

e) Entre a la ventana de edición de botones y dibuje un círculo con el tamaño, aspecto y color que desees para la posición de REPOSO (Up) del botón. Sitúelo centrado con la pequeña cruz que aparece en el centro de la pantalla.

68 Aplicaciones Gráficas II- FLASH

68

f) Ahora, seleccione el segundo fotograma haciendo clic sobre él y pulse F6 para crear un nuevo fotograma clave. El círculo del fotograma anterior, se repetirá.

g) Puede sustituir el dibujo o simplemente cambie el color. El cambio aparecerá cuando pase el cursor del ratón SOBRE (Over) el botón.

h) Seleccione el tercer fotograma y pulse F6 para crear un fotograma clave en esa posición. Aquí se hace lo mismo, se debe definir el aspecto cuando haga clic sobre el botón (PULSADO, Down). Puede modificar el círculo por otra cosa o simplemente cambie el color.

i) Con la definición de los 3 primeros fotogramas el botón ya funcionará. El cuarto fotograma está destinado a definir el área útil del botón, ya que puede interesarnos que sólo una parte de la imagen del botón resulte activa. Por otra parte, habrá que asignarle al botón la acción que queremos que se reproduzca cuando se haga clic sobre él. Eso se definirá una vez colocado el botón en la escena principal, seleccionándolo y mediante la ventana de acciones de fotograma. (Se verá más adelante)

j) Presione o haga clic en Scene 1 (Escena 1), para volver a la escena. k) Ahora arrastre el botón de la biblioteca (F11) hasta la escena principal. Los

símbolos botón aparecen precedidos por el ícono . l) Presione Ctrl + Intro y observe como cambia el botón al pasar o hacer clic sobre

él. m) Guarda el archivo con el nombre Botón 1

Nota: Otra forma de crearlo es primero dibujar el gráfico para el botón, convertirlo en botón con F8 y luego entrar a la ventada de edición EDIT/ Edit Symbols. 4. Aplica el procedimiento anterior y Crea un Símbo lo botón que se llame

CARITAS, el cual presente las siguientes caracterís ticas, cuando termines guarda el archivo con el nombre Botón 2. Posición del ratón REPOSO (Up)

Posición del ratón SOBRE (Over)

69 Aplicaciones Gráficas II- FLASH

69

Posición del ratón PULSADO (Down)

Práctica 17: (Botón animado) Ahora, vamos a darle animación a las 3 posiciones d el botón anterior. 1. Abre el archivo que contenga la práctica No. 4 (Botón 2). 2. Una vez abierto el archivo, si tienes el botón de la Carita en la escena principal,

selecciónalo y con el botón derecho, elije EDIT ,para que se abra la ventana de Edición y cambies el aspecto del botón como se observa en la imagen de abajo. NOTA: En caso de que no se encuentre en la escena p rincipal, se debe abrir la biblioteca con F11.

3. Para dar ANIMACIÓN AL BOTÓN, seleccionas el botón en la posición donde se le va a dar animación, es decir, seleccionas el fotograma UP. Ver imagen,

4. Clic con el botón derecho y elije Convertir a Símbolo. 5. En el cuadro haz clic en la opción Nombre, escribe CLIP REPOSO y en

Comportamiento, elije Clip de película. 6. Dar doble clic en el botón, para ir a la ventana de Edición del Clip de película o Clic

derecho, EDIT.

70 Aplicaciones Gráficas II- FLASH

70

Aparecerá la línea del tiempo del CLIP de Película como si estuvieras en la escena principal. Ver imagen:

8. Aquí se le aplican las animaciones al gráfico, ya sea Fotograma a Fotograma o

INTERPOLACIÓN.

NOTA: Te sugiero que apliques Fotograma a Fotograma. Práctica 18: (Gif´s)

a) Importar un Gif animado de la Web y vectorizarlo para poder hacerle cambios a través de Flash.

b) Guardar el gif original y la copia que tu realices con el nombre de PRÁCTICA_6.

Práctica 19: Aplica Animación fotograma a fotograma y crea un Gif animado con motivo ECOLÓGICO.

71 Aplicaciones Gráficas II- FLASH

71

PROYECTOS

Proyecto 1: Creación de un anuncio publicitario con Flash. Objetivo : Aplicar las técnicas y herramientas de animación vistas en clase para crear un anuncio publicitario de una empresa / producto, el cual sea llamativo para el usuario. Para su evaluación, se tomarán en cuenta los siguientes puntos:

1. Que cumpla con el objetivo.

6. Aplicación de animación por interpolación de movimiento o forma.

2. Creatividad.

7. Excelente combinación de colores y fuentes.

3. Calidad en los símbolos gráficos creados en flash.

8. Tiempo mínimo de la película de 30 segundos.

4. Aplicación de capas normales (usar más de una).

9. Entregarlo en tiempo y forma.

5. Aplicación de capa guía o capa máscara.

10. Presentar avances del trabajo en clase práctica en tu USB.

Nota: Cabe mencionar que el anuncio debe ser considerado con un enfoque positivo. Nota: Revisar prácticas del 2° parcial para capas g uía y capas máscara. Proyecto 2: “Dosis de conocimiento”. Objetivo : Aplicar las técnicas y herramientas de animación vistas en Flash para crear un corto de animación de algún tema de cualquier asignatura con un enfoque educativo, el tema será elegido por el alumno y servirá como herramienta didáctica para el profesor de asignatura o de estudio para el alumno. Para su evaluación, se tomarán en cuenta los siguientes puntos:

1. Creatividad u originalidad. 2. Calidad en el dibujo. 3. Combinación de colores y tipos de letras. 4. Aplicación de animación con interpolaciones. 5. Aplicación de capas en el trabajo. 6. Utilización de escenas. 7. Tiempo de animación 2 minutos por lo menos.

72 Aplicaciones Gráficas II- FLASH

72

8. Manejo de sonido o voz. 9. Aplicación de capas especiales como guía o máscara. 10. Entrega del trabajo en tiempo y forma en formato digital.

Nota: Cabe mencionar que se considerará a los alumnos que presenten avances del proyecto durante el curso. Referencias Bibliográficas: Flash 8 Basic y Professional José Luis Orós Alfa Omega Referencias de páginas Web: http://www.adrformacion.com/cursos/flash8/leccion3/tutorial10.html http://www.creaformacion.com/images/libros/Flash_1.pdf http://www.aulaclic.es/flashMX/f_flash.htm http://www.estudiargratis.com.ar/webmaster/curso_flash.htm http://usuarios.multimania.es/paginadav/