1

Antología
Material de consulta

Aplicaciones gráficas II

Colegio la Salle de Veracruz
Sección Bachillerato cuarto Semestre Nombre: ________________________________ Grupo: _____
Aplicaciones Gráficas II- FLASH

No. de Lista: _____

1

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. • Historia. • Vectores y mapa de bits. 1.2 Entorno de trabajo. • 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. • Dimensiones. 1.4 Guardar y abrir películas.

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. 2.2 Animación Fotograma a Fotograma. 2.3 Animación Interpolada. 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. 3.2 Dibujar líneas rectas. 3.3 Dibujar Óvalos. 3.4 Dibujar rectángulos.

2

Aplicaciones Gráficas II- FLASH

3 3.5 Herramienta lápiz y pluma. 3.6 Selección de objetos 3.7 Agrupar y desagrupar. 3.8 Interacción entre objetos. 3.9 Alinear objetos. 3.10 Transformar objetos. UNIDAD IV: Texto. OBJETIVO: Aplicar la herramienta texto de acuerdo a sus atributos y características. 4.1 Trabajar con texto. 4.2 Propiedades de los textos. 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. 5.2 Elementos de la ventana con las capas. 5.3 Distribuir objetos en capas. 5.4 Tipos de Capas. 5.5 Capas guía. 5.6 Capas Máscara. 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. 6.2 Tipos de símbolos. - Gráficos. - Botones. - Clips de película. 6.3 Propiedades de los símbolos. 6.4 Crear símbolos. 6.5 Biblioteca de símbolos. 6.6 Los fotogramas. 6.7 Creación de gif´s animados. 6.8 Uso del papel Cebolla. UNIDAD VII: Acciones en Flash. OBJETIVO: Crear películas interactivas aplicando las acciones del lenguaje Action script. 7.1 Introducción. 7.2 Panel de Acciones. 7.3 Añadir Acciones. 7.4 Action Script.

3

Aplicaciones Gráficas II- FLASH

4 UNIDAD VIII: Publicación de la película.FLASH . OBJETIVO: Generar la publicación de la película para visualizarla en la Web. 8.1 Publicar una película. 4 Aplicaciones Gráficas II.

Cada imagen consta de un número determinado de pixeles que determinan su resolución. lo que facilita su aprendizaje. 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. sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo. Vectores y mapa de bits Afortunadamente. Flash ha conseguido hacer posible lo que más hacía falta en Internet: Dinamismo. Veamos pues. que están realizadas empleando el lenguaje HTML). inicialmente Macromedia Flash fue creado con el objeto de realizar animaciones vistosas para la web. Las posibilidades de Flash son extraordinarias. situación que provocará distorsiones si se reduce. Flash. OBJETIVO: Identificar los elementos básicos de flash. mediante el análisis de sus características y funciones. Aplicaciones Gráficas II. es una estupenda aplicación que permite crear espectaculares páginas Web de alto contenido interactivo. y con dinamismo no sólo nos referimos a las animaciones. que todos los diseñadores web deberían saber utilizar Flash. ya que. en principio lo que aparece en la imagen no son elementos individuales. sino un “todo” inseparable. la cual es fija y no varía con el tamaño. cada nueva versión ha mejorado a la anterior. Son tantos. Flash es una potente herramienta creada por Macromedia que ha superado las mejores expectativas de sus creadores. Los bitmaps 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. animaciones de todo tipo y hasta juegos. así como para crear GIF´s animados. trabaja fundamentalmente con vectores. aunque puede manejar los bitmaps. Actualmente.FLASH 5 . no estático (en contraposición a la mayoría de las páginas. Con Flash podremos crear de modo fácil y rápido animaciones de todo tipo.1 Introducción a Flash. porqué es interesante Flash. 1. 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. y el actual Flash no ha sido menos.5 UNIDAD I: Elementos básicos de Flash. El entorno de Flash es amigable.

Macromedia Flash 2. 7) En 2004 _ Flah Mx 2004 profesional En 2005 .2 Entorno de trabajo. En 2008.). Future Splash Animator _ Flash 1. Director. Esto es lo que nos encontraremos al abrir Flash MX por primera vez. En 2006. 6) En 2004 _ Flash Mx 2004 (V. La versión de Flash MX cuenta con un entorno o interfaz de trabajo de lo más manejable e intuitiva. Flash Basic 8 y Flash Profesional 8. 10). (V. 6 Aplicaciones Gráficas II. Adobe Flash CS3 Profesional (V. En 1999 _ Macromedia Flash 4. En 2000_ Macromedia Flash 5. tiene la ventaja de que es similar a la de otros programas de Macromedia (Dreamweaver. 10). todo esto hace más fácil aprender Flash y más rápido su manejo y dominio.0 (1996) En 1997 los creadores vendieron los derechos a Macromedia que incorporó el plug-in de Shockwave.. AdobeFlah CS4 Profesional (V.FLASH .. 1. Freehand.6 Historia del programa Smart Sketch__ (1993) Programa para realizar imágenes vectoriales. Flash Profesional 9 con actionscript. Además.0. En 2002_ Flash Mx. En 1998_ Macromedia Flash 3. En 2007.

o la de Configuración de Publicación desde donde se pueden modificar las características de la publicación. También incluye la posibilidad de crear una cuadrícula y unas guías.. imágenes e incluso otras películas Flash). imprimirlas. Veamos los principales Submenús a los que se puede acceder: Archivo: Permite crear nuevos archivos. Esto se 7 Aplicaciones Gráficas II.. guardarlos. vídeo.. Es similar a la de cualquier otro programa de diseño web o gráfico. tanto objetos o dibujos como fotogramas. También permite configurar la impresión de las páginas. te permite moverte por los fotogramas y por las escenas. Copiar. Destaca la potencia de la utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos.7 Elementos del entorno de trabajo Barra de Menú Tiene como propósito facilitar el acceso a las distintas utilidades del programa.. Edición: Es el clásico menú que te permite Cortar. aunque tiene algunas particularidades. Ver: Además de los típicos Zooms. también permite personalizar algunas de las opciones más comunes del programa. abrirlos. Pegar...FLASH .

cuánto dura o cuándo aparecerá en la película.. Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Macromedia. incluye accesos director a TODOS los Paneles. Reproducir. además de las opciones clásicas acerca de cómo distribuir las ventanas. Texto: Sus contenidos afectan a la edición de texto.. Insertar: Te permite insertar objetos en la película. escenas. Ventana: Este menú.. 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). Consta de 2 partes. así como nuevos fotogramas. Se basa prácticamente en la misma filosofía de las películas de cine. 8 Aplicaciones Gráficas II.. Modificar: La opción Transformar permite modificar los gráficos existentes en la película. Además. 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. y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales (este tema se tratará más adelante). Rebobinar.. El resto de opciones permite modificar características de los elementos de la animación Suavizar..8 puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones. 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. una serie de fotogramas sucesivos. lecciones guiadas etc. Más adelante se tratará en profundidad. capas. la Velocidad de los Fotogramas (12. hasta el diccionario de Action Script. cada uno de los cuales contiene las imágenes que deben aparecer cuando se proyecta la película. acciones. desde el manual existente.). Escena . Probar Película . es decir.0 en la imagen) y el Tiempo de película transcurrido (0.0s en la imagen).. pasando por tutoriales.FLASH . Control: Desde aquí se modifican las propiedades de reproducción de la película. Optimizar o de la propia película (Capa.

propiedades de los objetos (si hay interpolaciones etc. Todos ellos se estudiarán en profundidad a lo largo del curso. pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Aún así. pueden "mezclarse" entre sí.FLASH . permitiéndonos modificarlas. Panel Alineamiento: Coloca los objetos del modo que le indiquemos. Su misión es simplificar y facilitar el uso de los comandos.. coordenadas.9 Capas El concepto de Capa es fundamental para manejar Flash de forma eficiente. tamaño etc. Panel Info: Muestra el tamaño y las coordenadas de los objetos seleccionados. todo lo que haga referencia a las acciones. de fondo. Panel Escena: Modifica los atributos de las escenas que usemos. Los objetos que estén en una determinada capa comparten fotograma y por tanto. no debeis perderlo de vista nunca. irá en el Panel "Acciones"). Paneles Los Paneles son conjuntos de comandos agrupados según su función (por ejemplo. encoge.).. Nos muestra las propiedades del objeto seleccionado en ese instante.. tipo de trazo. Panel Muestras de Color: Nos permite seleccionar un color de modo rápido y gráfico. 9 Aplicaciones Gráficas II. crearemos tantas capas como sea necesario. una capa contiene su propia Línea de Tiempo (con infinitos fotogramas). Aún así.. Esto es interesante a menudo. Panel Propiedades: Sin duda. veamos a grandes rasgos qué son las capas. scrolls etc..) Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos accesibles desde este panel. gira . Es decir. Los componentes son objetos "inteligentes" con propiedades características y muchas utilidades (calendarios. tipografía. Muy útil. Una Capa se puede definir como una película independiente de un único nivel. se le dedicará un tema completo. color de borde.. el panel más usado y más importante.. tamaño de los caracteres. Muy útil para alineaciones exactas. Panel Transformar: Ensancha.. Para ello. vamos a nombrarlos y a resumir sus funciones. Es fundamental. (Incluidas nuestras creaciones). los objetos seleccionados. Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser usados que nos proporciona Flash. Panel Mezclador de Colores: Mediante este panel creamos los colores que más nos gusten. Dada la importancia de estas.

Puede realizarlo de las siguientes formas: a) Panel de propiedades. Cada vez que se crea un nuevo documento aparece una escena vacía lista para trabajar en ella. El escenario tiene unas propiedades muy importantes. el color de fondo. 1. sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando. 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. Se puede cambiar el tamaño de la película (dimensiones). la velocidad de fotogramas. etc. Veloc. veamos: La parte más importante es el Escenario. Fotogramas: O número de fotogramas por segundo que aparecerán en la película.3 Configuración del área de trabajo. aparecerá el recuadro 10 Aplicaciones Gráficas II.10 Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra película. b) Menú Modificar / documento. Lo que ubique y características se almacenará junto con la película. Para acceder a ellas. así que si desea hacer algún cambio a los parámetros o propiedades debe realizarlo antes de iniciar la película. Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño por defecto de la Impresora. El tamaño mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880 px.FLASH . Área de trabajo El Área de trabajo consta de varias partes. La película se almacenará con los parámetros y propiedades con los que aparece por defecto. ya que coinciden con las Propiedades del documento. Contenidos existentes o los elegidos como Predeterminados) Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película. c) CTRL + J En cualquier caso.

por tanto. Fotograma Contenedor: No son fotogramas propiamente dichos. su contenido no es nuevo. Todo esto se puede controlar desde la Línea de Tiempo. son fotogramas contenedor todos los fotogramas a partir del 12 (incluido). Por tanto.FLA . este formato nos permitirá ver cómo está hecha la película o editarla para alguna modificación. Como vemos.SWF (Shock Wave File).Es el formato de archivo que se genera al momento de guardar una película de Flash.FLASH . Un fotograma representa el contenido de la película en un instante de tiempo. esto es. estos archivos pueden ser ejecutados por flash player sin tener conexión a internet. el resto. 2. 11 Aplicaciones Gráficas II.El último fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris. blancos. para insertar en ellos un nuevo contenido no existente en la película. 1 de cada 5 fotogramas contenedor es gris.1 Tipos de Fotogramas. En la imagen. • . OBJETIVO: Crear animaciones sencillas mediante la aplicación de los diferentes tipos de animación. los fotogramas del 2 . Encontramos fotogramas intermedios en las interpolaciones de forma y de movimiento. • . Por defecto ocupan toda la película y Flash no los tendrá en cuenta al publicar la película. En el ejemplo. Fotogramas pausados Son aquellos que se encuentran entre dos fotogramas clave. Son aquellos que contienen algún objeto pero que no son fotogramas clave.. no representan contenido nuevo y son de color gris.Este formato corresponde a la película cuando es publicada y solo permite su visualización. Con F5 se crean.3 Guardar y abrir películas. es el mismo que el del fotograma 1. Con F6. Se identifican por tener un punto negro en el centro y cuando esté vacío se le diferencia por una línea negra vertical. sino que representan un lugar dentro de la Línea de Tiempo en la que se puede insertar uno. UNIDAD II: Mis primeras animaciones. se crean. su misión es prolongar la duración de un fotograma clave o keyframe. una animación no es más que una sucesión de fotogramas.11 1.. Veamos qué tipos de fotogramas hay y cuáles son sus rasgos. Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especifíco. Nota: Guardar en Formato Flash 6.5 son fotogramas normales. se crean. Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave. pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual.

(no dará por terminada la animación). Su color es F blanco.12 Fotograma Vacío: Son fotogramas sin contenido. Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrará una imagen en blanco. contenedor. Los fotogramas del 2 al 9 deberán ser fotogramas vacíos ya que así el objeto "desaparecerá" y volverá a aparecer. • Para seleccionar a la vez todos los fotogramas de una animación de cualquier animaci tipo. pasan a ser Keyframes. • Para seleccionar un fotograma clave o normal. Dicho nombre se establece desde el Panel "Frame". contenedor. sobr • 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. Fotogramas de Animación de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto. Fotograma Etiquetado (Label Frame): Contiene en la parte superior una "bandera" roja que indica que tienen un nombre asociado.En blanco. Se seleccionarán todos los fotogramas de la animación. Si la "Frame duración del frame es la suficiente. El fotograma 4 no tiene acciones y sí las tiene el 5. Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que indica que tienen una acción asociada. sitúe el cursor sobre alguno de sus fotogramas intermedios (normales) y haga doble clic. Con F7 se crean.En la imagen. que pasa de la posición del Keyframe inicial al final. pues estas acciones. simplemente haga clic sobre él. De modo que si queremos que un objeto aparezca en el fotograma 1 y después otra vez en el fotograma 10. • Para seleccionar a la vez fotogramas consecutivos en varias capas arrastre para cubrir el área de fotograma que desee incluir en la selección. pues estos últimos vienen delimitados por líneas verticales grises (no negras). en amas principio "ocultas" (para verlas hay que acceder al Panel Acciones) pueden cambiar el comportamiento de la película. • Para seleccionar a la vez el mismo fotograma en varias capas. 12 Aplicaciones Gráficas II FLASH II- . se puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas. Para representar esta animación aparece una flecha entre estos Keyframes. • Para seleccionar a la vez varios fotogramas consecutivos de cualquier tipo arrastre el cursor del ratón sobre ellos. Seleccionar fotogramas Un fotograma seleccionado aparece siempre resaltado en color negro. la acción existente en el fotograma 1 afecta también al 2 y al 3 (por ser fotogramas normales). éstos se irán añadiendo a la selección. arrastre verticalmente hacia arriba o hacia abajo. Estos fotogramas son especialmente importantes. los fotogramas del 6 al 11 (incluidos) son fotogramas vacíos. En la imagen. Si se inserta algo en estos fotogramas. No debemos confundirlos con los fotogramas .

2. Las películas de Flash se basan en el mismo sistema que las películas de cine. 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. en Flash estas operaciones con los fotogramas se realizan mediante el menú Edición o con el botón derecho del mouse. se desplazarán hacia la izquierda para ocupar el lugar de los fotogramas eliminados.13 Copiar y pegar fotogramas También se pueden cortar. Mover Fotogramas • Seleccionar el fotograma o fotogramas a mover. veamos. • Eliminar fotogramas implica que los fotogramas que se encuentren seleccionados desaparecerán y todos aquellos que se encontrarán a su derecha. • Arrastre con el ratón hasta situarlos donde desee. una animación no es más que una sucesión de fotogramas. • Borrar fotogramas implica que los fotogramas que se encuentren seleccionados desaparecerán quedando en su lugar fotogramas vacíos. Por tanto. 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. Todo esto se puede controlar 13 Aplicaciones Gráficas II.FLASH . es decir. Sin embargo. copiar y pegar como el resto de objetos de Windows. Un fotograma representa el contenido de la película en un instante de tiempo. éste sustituye el contenido del anterior. en los que cada fotograma muestra un dibujo complejo ligeramente diferente al anterior. una serie de fotogramas que reproducidos uno tras otro proporcionan la sensación de movimiento. éste queda sustituido por el primer fotograma pegado y el resto queda intercalado. pero no se producirá ningún desplazamiento de fotogramas.2 Animación Fotograma a Fotograma. • Si pega varios fotogramas consecutivos sobre un fotograma existente. Mientras arrastre los fotogramas aparecerán enmarcados y vea en todo momento en donde se encuentran. A la hora de pegar fotogramas debe tener en cuenta lo siguiente: • Si sobre un fotograma existente pega un fotograma clave.

Debe modificar el contenido de este segundo fotograma. Fotograma Clave (KeyFrame) : Son fotogramas con un contenido específico. 14 Aplicaciones Gráficas II. los fotograma clave ocupan mucho espacio en el archivo. • Los fotogramas que contienen animaciones realizadas con interpolación de forma aparecen coloreadas en verde con una flecha negra en su interior. Se identifican por tener un punto negro en el centro y se crean presionando F6. pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. deberá ser en la mayoría de los casos. Es decir. El procedimiento para crear una animación fotograma a fotograma es muy sencillo. Hay que crear otro fotograma clave a continuación del anterior. ligeramente diferente al anterior a no ser que desee obtener cambios bruscos de imagen. 2º. el programa muestra los fotogramas coloreados de uno u otro modo según el tipo de animación que contengan. Se debe crear un fotograma clave y dibujar en su interior la posición de partida del objeto a animar. lo cual provocará que aparezca en él el mismo contenido del primero. 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. Seguidamente hay que crear el tercer fotograma clave. por tanto. 3º. Flash permite crear dos tipos de interpolación: de movimiento y de forma. Flash ofrece otra forma de crear animación menos laboriosa. • Los fotogramas que contienen gráficos estáticos aparecen coloreados en gris. La creación de animaciones fotograma a fotograma. sin embargo. se trata de la interpolación. 1º. 2. 4º. el cual. resulta apropiada para la simulación de cambios complejos entre el contenido de los fotogramas.. • Los fotogramas que contienen animaciones realizadas con interpolación de movimiento aparecen coloreados en violeta con una flecha negra en su interior. el cual mostrará el contenido del segundo y que deberá modificar también. • Los fotogramas clave con contenido aparecen con un punto negro en su interior. • Los fotogramas clave vacíos aparecen con un punto hueco en su interior. se crean.FLASH .14 desde la Línea de Tiempo. Coloreado de los fotogramas Por defecto. nosotros le decimos al programa cuáles son los fotogramas inicial y final. hasta que se haya terminado la animación. para insertar en ellos un nuevo contenido no existente en la película.3 Animación Interpolada. y así sucesivamente.

O TAMBIÉN. Cree un nuevo documento en blanco.2 Interpolación de forma. En principio.3. que sería hasta la derecha de la escena. que no estén agrupados. 2. seleccione el objeto y muévalo a la posición final de dicho objeto. etc. 2. La interpolación de forma sólo será posible a partir de objetos editables. este tipo de interpolación nos va a permitir crear animaciones en las que unos objetos se transforman gradualmente en otros. los objetos pasarán a ser un objeto único aunque no se haya agrupado. Procedimiento 15 Aplicaciones Gráficas II. 6. 4. Seleccione la opción Crear interpolación de movimiento (Create motion tween). De todos modos.1 Interpolación de movimiento. De momento no pasa nada. La interpolación de movimiento sólo es aplicable a los objetos agrupados o a los símbolos. ya que el primero se convertirá en el segundo a lo largo de una serie de fotogramas. rotación. en el panel propiedades en tween. seleccione el fotograma 30 haciendo clic sobre el y presione F6 para crear el último fotograma clave. transparencia. Nota: La interpolación de movimiento sólo es aplicable a los objetos agrupados o a los símbolos. seleccione motion. haciendo clic sobre él y pulse el botón derecho para que aparezca el menú contextual. Ahora con el fotograma 30 seleccionado. 3. Seleccione el primer fotograma. Procedimiento 1. Se aplica para crear una secuencia de animación en la que un objeto recorre un trazado recto y cambia de color. Dibuje un objeto en el lado izquierdo de la escena. Presione la tecla Intro. Esta será la posición en el primer fotograma. lo cual se denomina “morphing” en lenguaje informático. Seguidamente. ni sean símbolos. es decir.FLASH .15 2. Este tipo de animación no es posible con la interpolación de movimiento. 5. tamaño.3. De esto se deduce que el objeto inicial y final serán diferentes. posición. si selecciona varios objetos a la vez y crea una interpolación con ellos.

Ahora active la herramienta Texto . 3. Seleccione el fotograma 40 y pulse F6 para crear un fotograma clave. aplique dos veces la opción Modify / Break Apart. En el panel propiedades elija interpolación de forma. 2. 3. 4. 8. 9. OTRO PROCEDIMIENTO: 1. despliégala y elija Shape (forma). Seleccione ahora el último fotograma que desea ver en la interpolación y pulse F6 para convertirlo en fotograma clave. Seleccione el texto y posiciónelo al centro de la escena. 6. En el panel propiedades aparece la casilla Tween (animar). Desde el panel de propiedades. Elimine su contorno. 4. TIPO DE ACCIÓN 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 FORMA MOVIMIENTO 16 Aplicaciones Gráficas II. Edite el objeto que contiene el último fotograma y listo. Reproduzca la animación. En un documento nuevo dibuje un círculo con la herramienta óvalo y sitúelo en el centro de la escena. Dibuje el contenido del primer fotograma y sepárelo. 2. haga clic en la escena para que aparezca el cursor del texto y escriba la palabra círculo.FLASH . Automáticamente los fotogramas del 1 al 40 aparecerán de color verde con una flecha. Cambie el tamaño. seleccione el círculo y bórrelo con la tecla SUPR. 10. En el fotograma 40. 5. Dependiendo de la acción es el tipo de Interpolación a aplicar.16 1. Con la herramienta de texto haga doble clic sobre el texto recién escrito para seleccionarlo. de momento no sucede nada. Con el texto seleccionado. color y tipo de fuente. Verá que aparece la flechita verde. 5. Seleccione el primer fotograma haciendo clic sobre él y aparecerá el círculo. 7.

El color que aplicará esta Herramienta se puede modificar. o Herramienta Lápiz: Es la primera Herramienta de dibujo propiamente dicho. El color que aplicará esta Herramienta se puede modificar. se pueden realizar la mayoría de los dibujos que nos realizar propongamos.. Se suele emplear para aplicar rellenos. La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Permite dibujar líneas con la forma que decidamos. Herramienta Línea: Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo. Herramienta Brocha: Su funcionalidad equivale a la del lápiz. zonas a nuestra elección. sin embargo con las herramientas que nos llustrator. no podemos comparar Flash con otros programas de dibujo vectorial como Corel Draw. modificando la forma de estas a nuestro gusto. tan solo se diferencian en el tipo de objetos que crean. Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. pero su trazo es mucho más grueso. Veamos cuáles son las más importantes y cómo se usan: BARRA DE HERRAMIENTAS BÁSICAS Herramienta Selección: . A continuación veremos cuáles son sus herramientas. Además. Es la herramienta más usada de todas. 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. su uso adecuado puede ahorrarnos tiempo en el a trabajo. Evidentemente. Su uso principal es para seleccionar objetos. Al contrario que muchos otros programas de dibujo. Freehand o Illustrator. bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas. 17 Aplicaciones Gráficas II FLASH II- . 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.17 UNIDAD III: El dibujo en Flash. se hace clic y se arrastra hasta donde queramos que llegue la línea recta. no permite aplicar rellenos si la zona no está delimitada por un borde. los rellenos (con un sólo clic). Se puede modificar su grosor y forma de trazo Herramienta Cubo de Pintura: Permite aplicar rellenos a los objetos que hayamos creado. los bordes (con doble clic). permite seleccionar los bordes de los objetos.. OBJETIVO: Utilizar las herramientas de dibujo en base a sus propiedades y características. bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores ien que hay en la Barra de Herramientas. proporciona el programa.

lo que nos ugares asegura una gran precisión. Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de un trazo. Para crear curvas. por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas. programas de dibujo. ientas. Mucha gente encuentra esta herramienta complicada. Esto.) 18 Aplicaciones Gráficas II FLASH II- . lo que nos asegura una gran precisión. inclina.. Se aplica sobre objetos. hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano). rectángulos.. Para crear curvas. Herramienta Transformación libre: Rota. aunque es una de las más potentes que ofrece Flash.) de un modo sencillo. aunque es una de las más potentes que ofrece Flash. cambia al color mostrado de dicho borde.. En contrapartida. Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). si tienen borde. en el Panel Opciones aparecen estas imágenes: . hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Mucha gente encuentra esta herramienta complicada.) de un modo sencillo. Al seleccionar esta Herramienta. El tercer dibujo que aparece es este: permite hacer selecciones poligonales. Herramienta Pluma: Crea polígonos (y por tanto rectas. Permite hacer selecciones según los colores de los objetos. Herramienta Subseleccionador: Esta Herramienta complementa a la Herramienta Pluma.18 Herramienta Borrador: Su funcionamiento es análogo a la Herramienta Brocha. (la . Con un po de práctica poco se acaba dominando. sin importar la forma. Con un poco de práctica se acaba dominando. Pero su función es la de eliminar todo aquello que "dibuje". es la Herramienta "Varita Mágica". los objetos creados con dicha herramienta. tan popular en otros . pues puede seleccionar cualquier cosa. Herramienta Pluma: Crea polígonos (y por tanto rectas.. ya que permite mover o ajustar los vértices que componen Pluma. rectángulos. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos. escala o distorsiona un objeto BARRAS DE HERRAMIENTAS AVANZADAS Herramienta Lazo: Su función es complementaria a la de la Herramienta Flecha.

horizontales y a 45 grados. Para dibujar rectángulos seleccione esta herramienta y arrastre para trazarlo. vuelva a arrastrar para crear otra línea que comience en el final de la anterior y así sucesivamente. creará cuadrados perfectos. busque el icono en la sección opciones de la barra de herramientas.4 Dibujar rectángulos. deje de pulsar y sin mover el cursor del sitio. la nueva línea se adosará al final de la anterior. creará círculos perfectos.FLASH . En Flash el contorno se manipula como un objeto independiente del relleno. Si mantiene presionada la tecla Mayus durante el trazado. Durante el trazado de las líneas debe tener en cuenta los siguientes detalles: • Para trazar rectas encadenadas. • Si desea encadenar una recta al final de otra creada anteriormente. Para ello.1 Contornos y rellenos. Flash permite dibujar de una sola vez óvalos y rectángulos con relleno y contorno.3 Dibujar Óvalos.19 3. el trazado se limitará a líneas verticales. trace la línea. 3. pero es posible configurar el programa para que dibuje directamente esas figuras sin relleno y/o contorno. y arrastre para trazarlo.2 Dibujar líneas rectas. 3. asegúrese de que la opción Ver/ Ajuste/ Ajustar a objetos está activada. Para dibujar óvalos seleccione esta herramienta. acerque el cursor al final de la línea anterior y. una vez seleccionada la herramienta Rectángulo. Si mantiene presionada la tecla Mayus durante el trazado. 3. • Si durante el trazado mantiene la tecla Mayus pulsada. 19 Aplicaciones Gráficas II. al comenzar a arrastrar. Se pueden crear rectángulos redondeados.

20 3.FLASH . Cuando haya terminado suelte el botón del ratón. Mantenga pulsado el ratón y muévalo en varias direcciones. 20 Aplicaciones Gráficas II. 1. El cursor adoptará el aspecto de un lápiz. Mediante la herramienta sub-selección será posible modificar cualquier trazado no deseado. 3. Los trazos se dibujarán con el color y tipo de línea que estén configurados. sin embargo. para el trazado de curvas con suavidad y mayor precisión se utiliza el método Bézier. 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. Sitúe el cursor sobre el punto donde desea comenzar la curva. El cursor tomará la forma de una plumilla. 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. 2. Lápiz Para dibujar trazos mediante la herramienta lápiz. pulse la tecla Esc para desactivar la curva que acaba de dibujar. 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. 2. Aparecerá un pequeño círculo. creará líneas rectas horizontales o verticales. cuando termine la nueva línea se unirá al final de la anterior. Sitúe el cursor en donde desee comenzar a dibujar y arrastre para crear el trazo. • Si desea encadenar un trazo al final de otro creado anteriormente. acerque el cursor al final de la línea anterior y comience a dibujar el nuevo trazo.5 Herramienta lápiz y pluma. Efectivamente. siga estos pasos. 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. Seleccione la herramienta lápiz en la barra lateral de herramientas. 5. asegúrese de que la opción Ver/Ajuste/Ajustar a objetos está activada. haga clic con el ratón y suelte. 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. Seleccione la herramienta pluma. 1. Pluma En Flash disponemos de la herramienta pluma que nos permitirá trazar rectas y curvas del tipo 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. Una vez conseguido el aspecto de curva deseada. 4. Las curvas Bézier se trazan siempre igual.

Seleccionar un Símbolo. Para dibujar Rellenos (sin borde) podemos usar herramientas tales como la Brocha o el Cubo de Pintura Seleccionar Para poder trabajar con objetos. como ya se vió en el tema de Dibujar. Es. y por tanto. Puede existir o no. Objeto SIN seleccionar Objeto con Objeto con el BORDE seleccionado seleccionado el RELLENO 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. parecerá que dicho objeto no tiene relleno. Línea o Pluma y si queremos que nuestro dibujo no tenga borde. el borde se crea siempre y su color será el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores). bastará con seleccionar el borde y suprimirlo (ver siguiente punto). 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. Los objetos así considerados tienen 2 partes fundamentales: El Borde: Consiste en una delgada línea que separa el objeto del exterior del escenario.6 Selección de objetos. Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno. la parte interna del objeto. Estos 21 Aplicaciones Gráficas II.FLASH . Podremos observar que las partes de un objeto seleccionadas toman una apariencia con textura para indicar que están seleccionadas.). Su existencia también es arbitraria. es fundamental saber seleccionar la parte del objeto que queramos modificar (mover... o un grupo: Clic en el Símbolo. por tanto. girar. El Relleno: El relleno no es más que el propio objeto sin borde. según nos convenga. ya que podemos crear un objeto cuyo color de relleno sea transparente. Si queremos dibujar creando Bordes deberemos emplear las Herramientas Lápiz. Cuando creamos un objeto. un texto.21 3. en el texto o en el grupo. aunque en realidad sí que exista pero sea de color transparente. cambiar de color.

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". Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT mientras seleccionamos los objetos que queramos. Para ello.7 Agrupar y desagrupar. además de permitirnos seleccionar determinadas zonas de los objetos. las áreas seleccionadas no tienen porque ser rectángulares. Un Grupo no es más que un conjunto de objetos. Nos permite seleccionar cualquier zona de cualquier forma (la forma la determinamos nosotros) del objeto que sea. consiste en hacer clic en el menú Editar -> Seleccionar Todo. Objetos desagrupados Objeto agrupado 22 Aplicaciones Gráficas II. Esto es útil para modificar de un modo rápido todos los elementos del fotograma. ya que resulta imposible seleccionar a uno de sus miembros sin que se seleccionen a su vez los demás. también podemos usar la Herramienta Lazo. Si quisiéramos incluir dicho objeto. se seleccionan automáticamente todos los objetos que estén en dicho fotograma. Si esta área corta algún objeto.FLASH .. Además.. más útil aún si cabe. Además de 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. Seleccionar Todo: La forma más natural de seleccionar todo. definiéndolo como tal. aparece el rectángulo azul (por defecto) que rodea al grupo. basta seleccionar los objetos que queremos que formen parte de un grupo y después hacer clic en el Menú Modificar -> Agrupar. bastaría con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar. ya que para crear un grupo. Al contrario que la Herramienta Flecha. sólo quedará seleccionada la parte del objeto que esté dentro del área que hemos delimitado. 3.22 tipos de objetos mostrarán un borde de color azul (por defecto) al estar seleccionados. Seleccionar a partir de la Línea de Tiempo: Si seleccionamos un determinado fotograma en la línea de tiempo. Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos la Herramienta Flecha. Este modo de seleccionar objetos permite seleccionar muchos objetos rápidamente. pegarlas . para cortarlas. debemos indicarle a Flash que así lo queremos. Si bien no cualquier conjunto de objetos forman un grupo.

Antes de ver las posibilidades. Así funciona: El Panel Alineamiento permite colocar los objetos tal y cómo le indiquemos. el relleno es segmentado en los puntos de cruce de la línea. Cuando una línea pasa por encima de un relleno. deberá combinar estos elementos para obtener resultados más elaborados. Cuando una línea pasa por encima de un relleno. aunque en tal caso. debemos hacer hincapié en la opción En Escena. pero el relleno resulta también segmentado por la parte de línea que lo atraviesa. Cuando un relleno pasa por encima de una línea. Este Panel lo podemos encontrar en el Menú Ventana -> Alinear. cada segmento de la línea puede seleccionarse por separado. Para colocarlos de un modo preciso (por no decir exacto). para que los objetos se coloquen según los límites de la película. Esta opción nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como referencia el escenario. En este caso. Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos oportunas. y se colocan en función de ellos. En este caso el resultado es algo diferente. al encontrarse por debajo queda segmentada por el trazo superior. la línea que esté por debajo queda segmentada por efecto de la que se ha dibujado encima y viceversa. en el centro del fotograma etc. Un objeto dibujado sobre otro en la misma capa afecta directamente al objeto que queda por debajo de tal manera que. veamos cómo colocarlos en el Escenario. Igualmente. Si esta opción no está seleccionada. los objetos toman como referencia al conjunto de objetos en el que se encuentran. Flash pone a nuestra disposición el Panel Alineamiento. La línea. Los segmentos pueden ser seleccionados individualmente. es decir.23 3. Lo más habitual es seleccionar En Escena . 23 Aplicaciones Gráficas II. el resultado será uno u otro.FLASH . Cuando quiera realizar objetos complejos. deberá comprender cómo interactúan entre sí los objetos de Flash cuando se encuentran en la misma capa o en capas diferentes. sucede casi lo mismo que en lo anterior. en función del tipo de objeto (línea o forma) que se encuentre por encima o por debajo. 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í.8 Interacción entre objetos.. 3.. La única diferencia es que aquí el relleno no resulta segmentado por la línea.9 Alinear objetos.

que se establece de forma predeterminada en el centro del objeto. bastaría pulsar el primer y el sexto botón consecutivamente. Si no está activo. es posible escalarlo al mismo tiempo. tamaño. también lo puede sesgar y escalar. sin embargo. El punto de transformación se alinea con el punto de registro. Al rotar un objeto arrastrándolo.10 Transformar objetos. rotación. Si está activo "En Escena" estirará los objetos hasta que coincidan con el ancho y el largo de la película. Espacio: Espacia los objetos de un modo uniforme. Al rotar un objeto con el panel Transformar. Por ejemplo: Si quisieramos situar un objeto en la esquina inferior izquierda. Puede rotar un objeto con el comando Rotar. Las distintas opciones afectan a todos los elementos seleccionados y se emplean muy a menudo para situar los objetos en determinados sitios predefinidos. de modo que la distribución de los mismos sea uniforme. Distribuir: Sitúa los objetos en el escenario en función de unos ejes imaginarios que pasan por cada uno de ellos. arrastrándolo con la herramienta Transformación libre o especificando un ángulo en el panel Transformar.FLASH . 24 Aplicaciones Gráficas II. es posible mover el punto arrastrándolo. inclinación. reflejo. etc.24 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). Cada uno de los 2 cuadrados se situará en un extremo de la película (uno arriba y otro abajo). por ejemplo. al hacer clic en el primer botón de "Coincidir Tamaño". Coincidir Tamaño: Hace coincidir los tamaños de los objetos. si tenemos 2 cuadrados y pulsamos el primer botón de la izquierda. Si "En Escena" hubiera estado activo ambos cuadrados hubieran pasado a tener el ancho del fotograma. el cuadrado más estrecho pasará a tener la anchura del cuadrado más ancho. Por ejemplo. Rotación de objetos Al rotar un objeto. La transformación de los objetos implica diferentes acciones que se deben de realizar. la referencia será el resto de objetos. 3. Por ejemplo. éste gira sobre su punto de transformación. si tenemos 2 cuadrados distintos y la opción "En Escena" no está activada.

En principio el texto introducido es tratado como un grupo y si desea tratarlo como si fueran formas independientes. OBJETIVO: Aplicar la herramienta texto de acuerdo a sus atributos y características. grupos. Esto nos permitirá posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo. Distorsión de objetos La herramienta transformación libre le permitirá distorsionar objetos gráficos. la escala. por ejemplo). también todo aquello relativo a los textos.1 Trabajar con texto. r vio Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación. HTML. 4. de modo que tratará cualquier texto como si de un modo objeto más se tratase. Seleccione el objeto a distorsionar. Esta herramienta nos permite realizar todo tipo de transformaciones en los objetos. también se puede crear texto que soporte formato HTML etc.25 Herramienta transformación libre. la inclinación y la distorsión. aparece el objeto de la siguiente manera. se deberá aplicar la opción Modificar /Separar (break apart). Seleccione alguno de los vértices a distorsionar. como el movimiento. texto estático o normal. y por tanto. 2. texto te dinámico y texto de entrada (para que el usuario introduzca sus datos. Para ello erramienta siga estos pasos. Flash distingue entre 3 tipos de texto. y seleccione la UNIDAD IV: Texto. instancias o bloques de texto libremente. En la barra de herramientas seleccione transformación libre opción Modificar / Transformar / Distorsionar. Sin embargo. del cuadro de herramientas le permitirá insertar y editar La herramienta Texto texto en la escena. 3. como ya se vio. la rotación. También se pueden realizar transformaciones individuales o combinar varias transformaciones. 25 Aplicaciones Gráficas II FLASH II- . Cuando crea un objeto y lo selecciona con esta herramienta. listo para ser animado a nuestro gusto. Flash fue concebido para crear animaciones gráficas. 1.

el usuario vaya a una dirección web. notaremos que todas las propiedades que antes se encontraban en los Paneles Carácter y Párrafo. multilínea o multilínea sin ajuste). se encuentran agrupadas ahora en el . cambiar el color del texto y el tamaño. Si tenemos experiencia usando Flash 5. Veamos a fondo el Panel Propiedades: Fuente: Desde aquí. Para poder escribir. Ajuste automático entre caracteres: Activar esta casilla provoca que la separación entre caracteres se realice de modo automático. nada más fácil que escribirla ahí. esta opción nos permite determinar cómo queremos que aparezcan las líneas (línea única. podremos ver en él todo lo que nos hace falta conocer sobre nuestro texto. Útil cuando la tipografía que empleamos muestra las letras muy juntas o para dar efectos concretos al texto. deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del escenario en el que queramos empezar a escribir. URL: Si queremos que al pulsar sobre nuestro texto. 26 Aplicaciones Gráficas II FLASH II- . Flash la asociará al texto que estés escribiendo en ese mome momento. Posición: Nos permite convertir nuestro texto en subíndices o en ertir superídices (o dejarlo normal). Cursiva (I). Configuración: Son las clásicas opciones que permiten convertir sicas el texto en Negrita (B). Panel Propiedades. de modo que si seleccionamos un texto texto. Tipo de Línea: Si el texto que vamos a incluir es dinámico (de lo contrario aparece sin activar).26 4.2 Propiedades de los Textos. Altura: Determina el espaciado entre los caracteres. al igual que en los editores de texto más comunes podemos seleccionar el tipo de letra o "fuente" que más nos guste. El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra película.

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 27 Aplicaciones Gráficas II. Todos los tipos de textos responden a las propiedades comentadas en los puntos anteriores. Podemos modificarlos a nuestro gusto.FLASH . Un Párrafo no es más que un conjunto de caracteres con propiedades comunes a todos ellos. Centrar: del Párrafo. los sangrados de párrafo y el espacio interlineal. Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus límites. éstos también tienen anchura. pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo. 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. altura y coordenadas. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con párrafos (entre otras).27 Otras Propiedades: Dado que Flash trata los textos como objetos. según el tipo que sean. Flash distingue entre diversos tipos de textos y les da un tratamiento especial. pues las tipografías son una parte muy importante y deben respetarse. Estos párrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. y es en el Tipo de texto en lo que se diferencian. Tipos de Textos Como ya hemos comentado. El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho). Las líneas se distribuyen a la derecha y a la izquierda del punto medio A la derecha: Todas las líneas empezarán tan a la derecha como sea posible (dentro del recuadro de texto que hayamos definido). A la Izquierda: Todas las líneas empezarán tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido).

Tienen multitud de propiedades. un recuadro de texto en el que pone "Aprende Flash MX" durante toda la película. forma o color. aunque dicho texto cambie de posición. cambiar de color. Así. 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.. la verá exactamente como queremos que la vea.FLASH . aunque esto conlleve un mayor tamaño de la película final. se puede añadir fácilmente un borde al texto o dar nombre a la variable que represente al texto Dinámico. por lo que suele ser conveniente mantener esta opción sin seleccionar. Si dicho usuario dispone de las fuentes que hemos utilizado en la película. ya que cada recuadro de texto Dinámico puede ser una variable modificable mediante ActionScript. Esto muchas veces lleva a que el resultado final (el que ve el usuario) no se parezca al que pretendíamos. Sin embargo. pero si no las tiene.. es decir. copiarlos. Lo que queremos decir es que no cambia el contenido del recuadro de texto. Se insistirá en este punto en los ejercicios de evaluación. esto quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante programación. Seleccionable: Con esta opción activada el usuario podrá seleccionar los textos que aparezcan en la película (cortarlos..) y sin embargo ser estático. Su uso es bastante más complejo que el del Texto Estático. si en ese mismo recuadro de texto pasa a poner "Con este Curso". lo que nos saca del objetivo de este curso. se puede decidir el número de líneas que van a tener. accesibles desde el Panel Propiedades. Flash empleará la fuente que más se le parezca..) Actívala si lo crees conveniente. este recuadro de texto NO es estático. se puede introducir texto HTML. Texto Dinámico El Texto Dinámico en contraposición al estático sí que puede cambiar su contenido (además de estar animado). Texto de Entrada 28 Aplicaciones Gráficas II. que el texto puede estar animado (girar. es estático. Un uso común que suelen tener es el de representar los textos introducidos mediante Textos de Entrada (ver siguiente punto).28 largo de la animación".

crear animaciones con textos. equivalen a las Capas que utiliza Flash. junto con algunas propias de un tipo de texto orientado a la introducción de datos por parte de usuario. ¿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. Como hemos mencionado antes..29 El Texto de Entrada tiene básicamente las mismas propiedades que el Texto Dinámico. Los resultados son increíbles. Aplicaciones Gráficas II. movimientos o combinaciones de estos) puede resultar un trabajo de muchísimas horas y mucha paciencia. Aún así. con INDEPENDENCIA del resto de capas. Una Capa se puede definir como una película independiente de un único nivel.. este tipo de texto se puede combinar con el Texto Dinámico. Y todos hemos visto cómo colocan una hoja semitransparente con dibujos sobre otras y la superposición de todas forman el dibujo final. Entre otros destacan el Swish. OBJETIVO: Aplicar las capas de acuerdo a sus propiedades para la creación de animación en las películas. con ellos podrás crear efectos de texto asombrosos en pocos minutos. Cada capa es. UNIDAD V: Capas. transparencias. brillos. aunque no podrás gozar del entorno de Flash MX ni podrás emplear el resto de herramientas de que dispone Macromedia Flash MX. insertar sonidos. 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). 5. por tanto. ya que lo deberá introducir el usuario. Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados. Evidentemente este tipo de texto se reflejará en nuestra película como un recuadro de texto SIN contenido. 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). el FlaX o el MiX-Fx. pero puede resultar recomendable en estos casos usar algunos programas diseñados con este objetivo. y estos niveles que emplean los dibujantes. textos. rotaciones. que sobrepasen a las que Flash incorpora por defecto (colores.1 Introducción.FLASH 29 . Hay que tener en cuenta que todas las capas comparten la misma Línea de Tiempos y por tanto. un nivel en el que podemos dibujar. sus distintos fotogramas se reproducirán simultáneamente.

cada capa tiene un nombre y se identifican además con un color diferente. Agregando capas podremos gozar de las siguientes ventajas: • Cada capa podrá contener aquellos objetos que deseemos.FLASH . Podremos crear capas especiales de máscara que le permitirán mostrar y ocultar objetos selectivamente. De este modo.2 Elementos de la ventana con las capas. sonido o elemento diferente. los cuales a continuación se describen. Podremos organizar las capas en carpetas. La siguiente imagen muestra un ejemplo de una película con 4 capas.30 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. con la ventaja de que los objetos de una capa no influirán sobre los de otra. 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. 30 Aplicaciones Gráficas II. no tendrá que preocuparse por agrupar los objetos para que no interaccionen entre sí. gráfico. • • • • • 5. Podremos organizar nuestro trabajo colocando en cada capa una animación. se señalan los diferentes elementos que puede tener una capa. Podremos crear capas especiales de guía que le permitirán hacer que los objetos se muevan trazando un camino determinado. así mismo.

También puede seleccionar varias capas a la vez. Esto permite que pueda capa desaparecer parte o todos los elementos de la pantalla para editar o trabajar en una capa determinada. Si hace clic con el botón derecho sobre el nombre de una capa. Seleccionar Capas: Para seleccionar una capa individualmente solo haga clic sobre la so capa. Si desea eliminar varias capas a la vez. También puede hacerlo haciendo clic con el botón derecho sobre una capa y eligiendo Eliminar Capa. los objetos que contenga seguirán apareciendo en la escena pero no podrán ser seleccionados ni editados. mantenga salteadas. presionada la tecla Ctrl y haga clic en la siguiente capa. capa superior que desee. Para desbloquear una capa vuelve a hacer clic en el mismo lugar. También puede hacerlo al revés. Para que se vea o no el contenido de una capa en pantalla. Visualización: Se activa o desactiva la visualización de acuerdo a su necesidad. selecciónelas según . aparecerá una capa por defecto denominada : Capa 1. Éstas y todas las capas intermedias quedarán seleccionadas a la vez. al mismo tiempo aparecerá un icono de lápiz indicando que es la capa activa. Bloqueo: Si bloquea una capa. si desea añadir nuevas capas en la escena. • Para seleccionar capas salteadas. 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 Mayus. haga clic en insertar Capa. El programa eliminará la capa y sus correspondientes fotogramas en la línea del tiempo. haga alguna de estas cosas: • En la parte inferior de la ventana de capa. • Clic con el botón derecho sobre una capa y elija la opción Insertar capa en el menú contextual que aparecerá. se se explicó anteriormente.31 Inserta Capa: Cuando se inicia Flash. Eliminar Capa: Para eliminar una capa. haga clic en el icono : de la sección de capas. Visualiza contornos: Ver una capa como contorno implica que todos los objetos que tenga aparecerán mostrando únicamente su silueta. haga clic sobre la capa que desee. Eso puede resultar útil para ver 31 Aplicaciones Gráficas II FLASH II- . aparecerá un el 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. Para bloquear una capa seleccionados únicamente haga clic sobre el símbolo de la columna correspondiente a la capa que desee bloquear. capa • Elija la opción Insertar/ línea del tiempo / Capa.

Esto facilitará el trabajo en la organización que se tenga con las capas. 32 Aplicaciones Gráficas II FLASH II- .32 objetos de capas inferiores que permanecen ocultos por objetos de capas superiores o ocultos bien. OBSERVACIONES: • El tamaño del archivo no depende del número de capas que tenga definidas y puede crear tantas como desee. podremos acceder a un panel con las propiedades de la capa en la que hayamos hecho clic. • El programa representa cada capa en una línea horizontal de la ventana de d tiempo. Insertar Carpeta para capas: Permite crear carpetas para agrupar y ordenar las capas. • 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. La siguiente ventana muestra las opciones de las propiedades de las capas. Para crear la carpeta de capas. Podremos modificar todas las opciones que hemos comentado anteriormente y alguna más de menor importancia. Insertar Capa Guía: Es un tipo de capa denominada especial que más adelante se detallará. 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 . para trabajar más cómodamente prescindiendo de los rellenos de los objetos.

curva o con cualquier forma). Flash identifica 5 tipos diferentes de Capas: Normales. Enmascaradas.3 Distribuir objetos en capas. acciones.. Escriba el texto en la escena. El funcionamiento de estas capas es algo emos 33 Aplicaciones Gráficas II FLASH II- . Flash no incluirá las capas guía en la película final. una capa que quedará afectada por la guía definida en la Capa guía. Así. es imos necesario definir después una capa guiada. Capas Guía : Son capas especiales de contenido específico. por ejemplo. Esto es. 2. su contenido suele ser una línea (recta. puede dibujar una forma irregular para usarla luego como guía para ubicar los elementos con mayor precisión. 1. 2. colocar objetos.4 Tipos de Capas En términos generales.. por ejemplo. 5. Capa Máscara. si desea ubicar las letras de un texto en capas independientes siga estos pasos. nada de lo que aparezca en la capa guía se verá en la película de Flash. es decir. Debido a que su misión es representar la trayectoria de un objeto ob animado. Guía. Guiadas. Capas Guiadas: (Guided Layers) : Cuando definimos una capa como capa guía. Se emplean en las animaciones de movimiento de objetos y su único fin es marcar la trayectoria que debe seguir dicho objeto. Son las más usadas y se emplean para todo. 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. Las capas Guía o de Guía se utilizan como referencia para facilitar la ubicación de objetos en el escenario. sonidos. Flash permite distribuir automáticamente en capas individuales objetos que se encuentran en una misma capa. ayudas. Así. Esta utilidad es especialmente práctica para crear animaciones de letras de texto. Capas Normales : Son las capas por defecto de Flash y tienen todas las propiedades descritas en los puntos anteriores. Seleccione los elementos de una capa que desea distribuir en capas individuales. 1.33 5. Capas Máscara : Estas capas se pueden ver como plantillas que tapan a las capas enmascaradas (las veremos enseguida). Ejecute la orden Modificar / Línea del tiempo / Distribuir en capa y cada objeto capas se ubicará en una capa individual.

es decir. lo hace siguiendo un trayecto dibujado. El uso de Capas Guía está íntimamente ligado a la animación por interpolación. 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. • Crear los fotogramas clave para el final de la animación en cada capa.5 Capas Guía. De este modo podemos conseguir que los objetos se muevan y transformen siguiendo trayectorias predefinidas a nuestra voluntad. Así pues. ocultarán objetos que se encuentren en las capas subyacentes. • Crear la capa de guía de movimiento. Nota: En las prácticas se creará el procedimiento detallado para este tipo de capa. un círculo relleno.FLASH .6 Capas Máscara. • Dibujar en la capa de guía de movimiento el trazado que se desea que siga el objeto. • Seleccionar el primer fotograma de la capa del objeto y arrastrar el objeto al punto inicial del trazado. • Activar el encaje de objetos. Procedimiento a seguir para crear capas guía. • Crear la interpolación de movimiento. todas las zonas de la capa de máscara que no tengan ninguna zona dibujada. 5. Efectivamente estamos creando interpolación de movimiento. Al igual que las capas guía y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto. 5. • Reproducir la película. en lugar de que se desplace de manera recta. una capa de máscara que contenga. De manera general indicaremos el procedimiento para crear capas Guía.34 complejo (tampoco demasiado) por lo que sugiero checar el procedimiento para su creación. • Seleccionar el último fotograma de la capa del objeto y arrastrar el objeto al punto final del trazado. Por este mismo motivo. se convierte en una especie de “agujero” por lo que se va a ver lo que haya por debajo. 34 Aplicaciones Gráficas II. Capas Enmascaradas : Estas capas funcionan conjuntamente con las Capas de tipo máscara. aquel tipo de animación en el que se definen los fotogramas primero y último y los fotogramas intermedios los calcula el programa. por ejemplo . • Crear el objeto y agruparlo.

ya que si usa Copiar y pegar para crear copias de gráficos. Siempre se encuentran almacenados en las bibliotecas. Nota: En las prácticas se detallará el procedimiento anteriormente mencionado. esto se hace a través de crear símbolos y guardarlos en una biblioteca.1 Símbolos e instancias. generará archivos (películas) con mayor capacidad de bytes. lo cual permitirá variar fácilmente el aspecto en la escena de todas las representaciones de un determinado símbolo. Instancia: Una instancia es la representación de un símbolo en la escena. • Activar el efecto de máscara. • Dibujar lo que se desee enmascarar en la capa normal por defecto de la escena. así pues. Con el uso de símbolos evita que el tamaño de la película sea grande para su carga en el internet.FLASH . UNIDAD VI: Símbolos y animación interactiva. realmente usa instancias del símbolo e internamente el programa solo hace referencia al símbolo. Símbolos: Son elementos que pueden utilizarse las veces que desee. 35 Aplicaciones Gráficas II. Así mismo. 2.35 Procedimiento a seguir para crear capas máscara. • Dibujar en la capa de máscara el objeto que va a servir de máscara. todas sus instancias reflejarán el cambio. lo ideal es ir almacenando de manera ordenada y correctamente clasificada. Cada vez que tome o utilice un símbolo de la biblioteca y lo lleve a la escena. Cualquier objeto dibujado directamente en Flash o importado puede convertirse en un símbolo con el objetivo de utilizarlo posteriormente. lo que en realidad estará llevando es una instancia de ese símbolo. Comodidad de tener todos los símbolos agrupados y clasificados en una biblioteca. • Crear una capa máscara. Ventajas de utilizar símbolos: 1. Otra gran ventaja es que si hace algún cambio en el símbolo. 6. 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. Incluso se podrán crear propias bibliotecas de símbolos a partir de bibliotecas de otras películas. Recuerde que cuando usa símbolos. Existen dibujos (gráficos) complejos que a lo largo de nuestro trabajo con Flash quisiéramos guardarlos para poder utilizarlos en otras animaciones. 3. permitirá utilizarlos repetidamente en una misma película e incluso en diferentes películas.

un gráfico estático que hayamos dibujado. De este modo si creamos un símbolo gráfico a partir de. acciones. 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. Cada botón tiene su propia línea del tiempo independiente. Símbolo botón: Es un tipo especial de símbolo que le permitirá añadir interactividad a sus películas. Flash permite crear tres tipos de símbolos: Gráficos. Flash nos permite. aparecerán a la vez todos los objetos y permanecerán en pantalla porque la película empieza y termina en el primer fotograma. cuando arrastremos un botón desde la biblioteca a la escena.36 6. Sin embargo. por ejemplo. Esta es independiente pero. • Finalmente.FLASH . Botones y Clips de películas. sin embargo. sino el comportamiento del mismo. En un principio. etc. 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. Cuando se va a crear un nuevo botón Flash abre una pantalla específica mostrando la línea del tiempo botón. Los botones pueden ser gráficos estáticos o dinámicos y pueden incorporar sonido. Observe la imagen. 36 Aplicaciones Gráficas II. Si añadimos a la escena varios símbolos gráficos estáticos de un fotograma cada uno en una capa. 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. Los botones tienen su propia línea de tiempos. únicamente ocupará un fotograma. está formada únicamente por cuatro fotogramas. la cual contiene únicamente cuatro fotogramas. uno para cada estado posible del botón. En cualquier caso. al reproducir la película. • El primero se denomina Reposo y contendrá el aspecto del botón cuando no tenga encima el cursor del ratón. el símbolo ocupará únicamente un fotograma.2 Tipos de símbolos. 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. lo normal es pensar que un símbolo gráfico será aquel que provenga de un gráfico. Esto es porque Flash al momento de trabajar con símbolos no toma en cuenta su contenido. • 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.

Todo depende de si partimos de un gráfico o de la nada. 6. o incluso de otro símbolo. 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. Si ha dibujado un gráfico en Flash y desea guardarlo para posteriores usos. El gráfico original permanecerá en la escena 37 Aplicaciones Gráficas II. Así pues.FLASH . Acepte y el nuevo símbolo se almacenará en la biblioteca mostrando el icono de a la izquierda de su nombre.3 Propiedades de los símbolos. 6. El panel de propiedades indica los siguientes elementos cuando se trabaja con símbolos. Hay varias formas para crear símbolos. 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.4 Cómo crear símbolos. 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.37 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. selecciónelo y haga lo siguiente: 1. Seleccione la opción Modificar / Convertir en símbolo o pulse directamente F8. si arrastramos un clip de película desde la biblioteca a la escena. 2.

Para determinar cómo debe reaccionar el botón en función de las acciones del ratón. Cuando tengamos delante la línea de tiempos del botón (observa que tiene el aspecto que hemos mostrado anteriormente). De esta forma ya tenemos transformado el objeto para que se comporte como un botón. seleccionaremos cada uno de los fotogramas (sobre.38 pero ahora ya no será el gráfico en sí sino una instancia o representación del símbolo contenido en la biblioteca. lo que nos ayudará a entender mejor dicha estructura. lo editaremos haciendo clic con el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la opción Editar. Creación de un Símbolo Botón En la creación de un botón podemos considerar dos fases. seleccionando el objeto y haciendo clic con el botón derecho. 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. Primeramente crearemos el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que nos ofrece Flash MX. presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos. Ahora lo completaremos internamente. reposo. Nota: También puede crear un símbolo.FLASH . En la primera vamos a convertir nuestro objeto a símbolo de tipo botón y posteriormente veremos cómo completarlo internamente. 38 Aplicaciones Gráficas II.

5 Biblioteca de símbolos. CTRL + L o Window /Library. bitmaps y sonidos correspondientes a la película activa. 6. Cada película dispone de una biblioteca específica en donde se almacenarán todos los elementos que integren esa película. No obstante. Sin embargo. Para abrirla pulse F11. en cuya superficie "se sentirá aludido" nuestro botón.FLASH . la biblioteca permite almacenar otros tipos de elementos tales como imágenes bitmap importadas. no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura. vienen implementadas en Flash y contienen botones. Como ya se ha visto a la biblioteca de símbolos van a parar todos los símbolos que se vayan creando. vídeos.39 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. Elementos de la ventana de biblioteca 39 Aplicaciones Gráficas II. clases y elementos interactivos que puede utilizar. etc. 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. sonidos. es perfectamente posible importar elementos. Bibliotecas prefijadas También conocidas como bibliotecas comunes. Todos estos elementos se pueden clasificar y organizar en carpetas para que puedan ser localizados fácilmente.

su nombre o entrar a editarlo individualmente. • Seleccione Archivo / Importar a la librería (File / Import to library). Cambiar el tamaño de los fotogramas Por defecto los fotogramas aparecen en un tamaño de visualización normal. ver las etiquetas que les asignemos.FLASH 40 .-Permite cambiar el comportamiento del símbolo seleccionado. Pequeño.40 Utilizar elementos de la biblioteca de otra película. 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. En determinadas ocasiones deseará aumentar su tamaño para.6 Los fotogramas. Normal. se mencionará un poco más de la configuración y manipulación de los fotogramas para la creación de Gif´s animados. en este apartado. Se había mencionado el color de los fotogramas. 6. 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 Aplicaciones Gráficas II. Media y Grande. por ejemplo. También puede entrar a la opción Properties del menú. En Secciones anteriores se habló de los fotogramas y los tipos que existen. Propiedades.

Flash permite crear y editar ese tipo de archivos. a no ser. podremos editar cada fotograma como nos plazca. Cuando importa un GIF animado (File / Import). todos esos colores desaparecerán y quedará de este modo. 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. Alargar la duración de los fotogramas. claro está.FLASH . Como seguramente sabrás. verde si se trata de una interpolación de forma o rojo si se trata de una interpolación de movimiento. que convierta la imagen bitmap a vectores (vectorizar). Así pues.7 Creación de GIF´S animados.41 Fotogramas coloreados del menú que aparecerá. • • • • Los fotogramas que contienen gráficos estáticos aparecerán en color blanco. La velocidad de reproducción es única para todas las capas de la película. Los fotograma clave aparecerán con un punto cuyo color será azul si se trata de gráficos estáticos. De hecho. 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. 6. si se añaden unos cuantos fotogramas clave o intermedios en un lugar de la película. cuando importa un gif animado. 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. tenga en cuenta que los GIF´s animados son una sucesión de imágenes bitmap. ahora bien. aparece en la línea del tiempo con el aspecto de una animación fotograma a fotograma. Sin embargo. la acción que en ese lugar se produjera se alargará y en consecuencia la acción durará má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. 41 Aplicaciones Gráficas II. 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. lo cual significa que no está trabajando con imágenes vectoriales y en consecuencia no podrá usar las herramientas de flash para editar.

Crear un Gif con Flash. b) Hacer clic en File / Publish Settings… c) En la pestaña Formats. de No obstante. En general. Para poder ver el comportamiento del papel cebolla. El fotograma situado bajo la cabeza lectora aparece de color normal. acostumbran a perder bastante detalle al vectorizarlos. debajo de la línea del tiempo. a) Abrir el archivo en Flash. El uso del papel Cebolla nos va a permitir ver simultáneamente en la ver pantalla el contenido de varios fotogramas a la vez. Los fotogramas atenuados no pueden editarse. cada fotograma parece estar dibujado sobre hojas de papel traslúcido (papel cebolla) colocadas una encima de otra. 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. se tiene que cargar una animación animaci y hacer clic en los iconos de papel cebolla.gif) Otro modo de poder editar bitmaps de los fotogramas de un Gif animado una vez vectorizados es mediante la herramienta Lazo 6.8 Uso del papel Cebolla. mientras que los fotogramas circundantes que aparecen atenuados. Flash sólo muestra un fotograma de la secuencia de animación en el escenario. puede ver varios fotogramas a la vez en el escenario. 42 Aplicaciones Gráficas II FLASH II- .42 Recuerde que para vectorizar (trazar) bitmaps se utiliza la opción Modify / Trace Bitmap. 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. Para facilitar la ubicación y edición de la animación fotograma a fotograma. y su modificador . haz clic en GIF image (.

la opción Papel cebolla sólo permite editar el fotograma actual. Hasta ahora hemos visto cómo se crean las películas en Flash de forma automática y secuencial. Sin embargo. UNIDAD VII: Acciones en Flash. Para cambiar la posición de los marcadores de papel cebolla. En general. que pueden ser: botones o instancias de clips de película.FLASH . En general. detener la reproducción de un clip. Cada tipo de acción obligará al programa a realizar algo en concreto. desde el principio hasta el final y sin posibilidad de hacer nada para impedirlo. 43 Aplicaciones Gráficas II.43 • • • Para ver los fotogramas de papel cebolla como contornos. 7. entre otras cosas. utilizar el teclado o el ratón para ejecutar estas acciones y dotar de interactividad a la película. 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. OBJETIVO: Crear películas interactivas aplicando las acciones del lenguaje Action script. Sin embargo.1 Introducción. es decir. etc. pasar de una escena a otra. los marcadores se mueven de forma conjunta con el puntero del fotograma actual. Flash permite añadir acciones que facilitarán. arrastre el puntero hasta la nueva ubicación. haga clic en el botón Editar varios fotogramas. • Las acciones ubicadas en fotogramas clave se ejecutarán cuando el cabezal de la línea de tiempo pase por ellas. saltar a otros fotogramas o escenas. puede ver el contenido de cada fotograma situado entre los marcadores y editarlo aunque no se trate del fotograma actual. Para poder editar todos los fotogramas situados entre los marcadores de papel cebolla. detectar si un fotograma se ha cargado. pasar de una película a otra. ir de un fotograma a otro. ¿Qué son las acciones? Las acciones son una especie de órdenes que Flash ejecutará cuando el cabezal de reproducción llegue a ellas. por ejemplo. Las acciones se pueden colocar en los fotogramas clave y en los objetos. haga clic en el botón Contornos de papel cebolla.

escribir y editar acciones directamente en el recuadro de la derecha. La mecánica de funcionamiento del panel de acciones en modo normal. no disponemos de campo de parámetros para rellenar ya que todos los parámetros deberán ser introducidos por el usuario. • 7. 44 Aplicaciones Gráficas II. 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. pero si que aparecerán en determinados momentos una sugerencia para el código que luego se verá. En este modo. como si se escribieran scripts utilizando un procesador de textos. En este caso. es sumamente sencilla: • En primer lugar deberá haber seleccionado un fotograma clave. es decir.44 • Las acciones ubicadas en botones.2 Panel Acciones. ya que las acciones que definan solo pueden ser aplicadas a esos elementos. El modo de trabajo sin asistente permite. Los fotogramas que contienen acciones muestran una pequeña “a” en su interior. El panel de Acciones. los scripts que aparecen en el recuadro de la derecha no pueden editarse directamente. cada uno de los cuales le facilita la creación y gestión de los scripts. Las acciones ubicadas en clips de película se ejecutarán cuando se cargue el clip o cuando se ejecute un fotograma determinado. se deberá pasar el cursor por encima o hacer clic en el botón para que pase algo.FLASH . un clip o un botón. requerirán de la interactividad con el usuario para que las ejecuten. El panel Acciones permite crear código ActionScript en un documento de Flash (archivo FLA). dispone de dos modos de trabajo: con asistente o sin asistente (escribir directamente las funciones). Este panel consta de tres paneles.

FLASH . • • Caja de herramientas Acciones Se utiliza para examinar una lista de elementos del lenguaje ActionScript ordenados por categorías (funciones. Si lo desea. Dependiendo de los parámetros que vaya introduciendo en esos campos. 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.) y luego insertarlos en el panel Script. ya que hay muchas acciones de todo tipo disponibles. 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. la expresión script irá cambiando para reflejarlos. pero eso lo obligara a desplazarse por el recuadro mediante las barras de desplazamiento. tipos. haga doble clic en él o arrástrelo directamente al panel Script. Para insertar un elemento de script en el 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. 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. En la parte superior derecha de la ventana deberá complementar los campos necesarios para que la operación se ejecute correctamente. clases. 45 Aplicaciones Gráficas II. puede abrir todos los grupos. aparecerá un texto orientativo acerca de su cometido.45 • Seguidamente. etc. Al final de la edición de la acción.

Navegador de scripts Muestra una lista jerárquica de elementos de Flash (clips de película. Las opciones marcadas sólo están disponibles en el panel Acciones. colores para el código y otras funciones que simplifican la creación de scripts.46 Barras de herramientas del panel Acciones y la ventana 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.FLASH . Si hace clic en un elemento del navegador de scripts. Estas barras de herramientas son distintas en función de si utiliza el editor de ActionScript del panel Acciones o el panel Script. fotogramas y botones) que contienen scripts. consulte Utilización del panel Acciones y la ventana Script. sugerencias o consejos sobre códigos. Para más información. 46 Aplicaciones Gráficas II. Si hace doble 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. 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. En el modo normal la parte central del panel muestra una serie de iconos que forman las funciones de la barra de herramientas. Utilice el navegador de scripts para desplazarse rápidamente por todos los scripts del documento de Flash. el script quedará fijado (bloqueado en su sitio Panel Script En este panel es donde se escribe el código. En la siguiente imagen se muestran las funciones incluidas en el editor de ActionScript.

Contiene los diversos comandos y preferencias que se aplican al panel Acciones o a la ventana Script. Menú emergente Sólo panel Acciones. Revisar sintaxis Comprueba los errores de sintaxis existentes en el script actual. 47 Aplicaciones Gráficas II. Por ejemplo. Opciones de depuración Establece y quita puntos de corte en el script. Buscar Busca y reemplaza texto del código ActionScript.FLASH . pueda detener y luego avanzar línea a línea por el script. El modo de asistente de script le solicita la introducción de los elementos necesarios para crear scripts. pero sólo para los archivos ActionScript.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. Las opciones de depuración se encuentran ahora disponibles en la ventana Script. Mostrar consejos sobre códigos Si ha desactivado los consejos automáticos sobre códigos. Formato automático Aplica formato al script para lograr una sintaxis de código correcta y mejorar la legibilidad. aparece en el panel Ayuda el tema relativo a import. Puede establecer preferencias de aplicación de formato automático en el cuadro de diálogo Preferencias. así como en el panel Acciones. Esta opción se desactiva para los archivos de comunicación de ActionScript y Flash JavaScript Asistente de script Sólo panel Acciones. Insertar una ruta de destino Sólo panel Acciones. al depurar el documento de Flash. si hace clic en una sentencia import y luego selecciona Referencia. éste se añade al script. Referencia Muestra un tema de ayuda de referencia para el elemento del lenguaje ActionScript seleccionado en el panel Script.3 Añadir Acciones. Por ejemplo. Le ayuda a la hora de establecer una ruta de destino absoluta o relativa para una acción del script. 7. disponible desde el menú Edición o desde el menú emergente del panel Acciones. puede establecer los números de línea y el ajuste de texto en el editor de ActionScript. Los errores de sintaxis se muestran en el panel Salida. de forma que. puede utilizar este comando con el fin de mostrar manualmente un consejo para la línea de código en la que está trabajando. acceder a las preferencias de ActionScript e importar o exportar scripts. Al elegir un elemento de la lista de categorías de elementos del lenguaje.

• El ActionScript es. un lenguaje de script. ya que nos da el control absoluto de todo lo que rodea a una película Flash. al cual se puede acceder mediante la opción Ventana / Acciones o pulsando F9. esto quiere decir que no hará falta crear un programa completo para conseguir resultados. podemos decir que el ActionScript nos permitirá realizar con Flash MX todo lo que nos propongamos. tiene similitudes. en el Borland Delphi. etc. la sintaxis y el estilo de ActionScript le resultarán muy familiares. Recomendamos seguir la estupenda Ayuda incluida en FlashMX. con muchas capas y muchas acciones en cada capa. el ActionScript es el lenguaje de programación propio de Flash..FLASH . emplea Flash MX. y que por supuesto. A grandes rasgos. Nota: Tenga en cuenta que las acciones solo se pueden incluir en los fotogramas clave. Para evitar eso. evidentemente no tiene la potencia de un lenguaje puramente orientado a objetos derivado del C o del Pascal como los anteriores. Las diferencias entre ambos lenguajes las puede encontrar en la ayuda que acompaña al Flash MX. 7. Si crea películas muy elaboradas. es preferible crear una capa dedicada a colocar acciones. aunque. Absolutamente de todo. De este modo siempre sabrá dónde están las acciones en línea del tiempo. Sin embargo. El ActionScript es un lenguaje de programación orientado a objetos. Enseñar a programar con ActionScript requeriría otro curso completo. como su nombre indica. • • 48 Aplicaciones Gráficas II. 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. El ActionScript presenta muchísimos parecidos con el Javascript. con lenguajes tales como los usados en el Microsoft Visual Basic.Profundizar en el conocimiento de este lenguaje queda por cuenta del lector. es posible que puedan asignarse sin querer acciones en distintas capas al mismo fotograma. por tanto. normalmente la aplicación de fragmentos de código ActionScript a los objetos existentes en nuestras películas nos permiten alcanzar nuestros objetivos.48 Las acciones se añaden mediante el panel de Acciones. si conoce Javascript. El ActionScript es el lenguaje de programación que ha utilizado Macromedia Flash desde sus comienzos.4 Action Script. Características generales del ActionScript Como ya hemos comentado.

bastará con colocarlas en el lugar adecuado. La cabeza lectora es lo que determina qué fotograma de nuestra película se está reproduciendo en cada momento. y nosotros sólo tenemos que usarlas de la manera que se nos indica. Si es un nombre. Si. fotograma: Número o nombre del fotograma al que queremos enviar la cabeza lectora. si es un número. Veámoslas y lo entenderemos mejor: gotoAndPlay / goto: Esta acción será. --> Esta acción lleva la cabeza lectora al fotograma 7 de la escena llamada "Escena2".49 • En la mayor parte de las ocasiones. cuándo tiene que parar. las Acciones son funciones o instrucciones predefinidas de ActionScript. lo movemos del fotograma 1 al 25. no será necesario "programar" realmente. para controlar el flujo de nuestra película. Al igual que en el caso anterior. NO. es decir: Flash MX las crea. como su nombre indica.. fotograma): escena: Nombre de la escena a la que queremos enviar la cabeza lectora. probablemente la que más useis durante la realización de vuestras películas.. ni siquiera necesitamos saber cómo están hechas. esto es. Uso: gotoAndPlay(escena. Para una referencia más completa. haga muy rápido comenzar a programar. explicaremos las Acciones más importantes. lo que facilita el uso de este lenguaje de programación y sobre todo. para indicar a Flash en todo momento qué fotograma tiene que mostrar. recomendamos mirar la ayuda del programa. dónde seguir etc. Como ya se menciono. por ejemplo. 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. Debe ir entre comillas dobles.. Lo importante es que están listas para usar.FLASH . 49 Aplicaciones Gráficas II. debe ir entre comillas dobles. • Acciones . lo que veremos instantáneamente será el fotograma 25 y la película continuará reproduciéndose a partir de ahí..Control de Película Estas acciones se emplean. Ejemplo: gotoAndPlay("Escena2". 7). No tenemos que definir las funciones ni nada por el estilo. La acción que realiza consiste en mover la cabeza lectora al fotograma que le indiquemos. Definiremos las acciones escribiendo su cabecera (nombre + parámetros con un nombre genérico) para después explicar qué es cada parámetro.

trepallkeys: Sirve para detectar las pulsaciones de todas las teclas durante la reproducción de nuestras películas. veámoslo: Uso: 50 Aplicaciones Gráficas II. generalmente porque algo la ha detenido. puede que no interese que los usuarios puedan moverse a sus anchas por nuestra película. (para que detenga la película) etc. Ejecutando esta sentencia del modo adecuado (false). en un botón.FLASH . Se puede usar en un fotograma.showmenú: Si has visto el menú que aparece al pulsar el botón derecho del ratón sobre una película Flash. • Acciones . Stop: Detiene la reproducción de la película. describimos las más importantes: fscommand: Esta acción.Navegador / Red Estas acciones tiene diversas funciones.fullscreen : Si se activa pone nuestra película a pantalla completa... No tiene Parámetros. nos aparecerá una pestaña con los posibles comandos que admite: . por ejemplo. Todas estas alternativas.50 Play: Da comienzo a la reproducción de la película. Uso: Play(). 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. No tiene Parámetros. . podremos ocultarlo. comparten modo de uso. por ejemplo). cuando queramos detenernos en él (porque es un menú.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.. Muy útil para presentaciones en CD-Rom. . . Uso: Stop(). seguro que has pensado en hacerlo desaparecer .

nivel / destino. Uso: loadMovieNum(url . ventana . variables: Parámetro OPCIONAL. "_blank").swf" en el nivel principal. No enviamos variables. 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. 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)..swf". Si la página lo permite (es ASP.51 fscommand("comando". "variables") url: Dirección web a la que queremos acceder (se abrirá una ventana). Podemos enviar variables. Si lo usamos como destino. etc. puede haber varios. según queramos desactivar la opción o activarla. getURL: Esta acción se emplea para abrir el navegador web y abrir la página web que deseemos. Cómo Saltar a Fotogramas o a Escenas 51 Aplicaciones Gráficas II..) variables: Parámetro OPCIONAL. Ejemplo: getURL("http://www. teniendo en cuenta que el nivel básico es el 0."true / false") comando: El comando a ejecutar (fullscreen. Cada nivel superior se sitúa delante del anterior y toma el control....) podemos enviarle variables. variables) url: Dirección absoluta donde está situada la película SWF o la imagen JPEG nivel / destino: Nivel donde cargaremos la película. Ejemplo: loadMovieNum("MiPeli2.aulaclic. luego va el 1 y así sucesivamente. Modo en el que queremos abrir la ventana (en la ventana actual (_self) en otra nueva (_blank) etc. allowscale. Ejemplo: fscommand("fullscreen". Uso: getURL(url . 0) --> Cargamos la película "MiPeli2.) true / false: Aquí debemos escribir true o false.com". -> Activa la pantalla completa.FLASH . ventana: Parámetro OPCIONAL. "true"). PHP etc.

lo que hace que debamos minimizar el número de apariciones de éstos en nuestra película. sobretodo si la vamos a publicar en una página web. hará referencia a una única posición de memoria. de puntos. • • • CONSIDERACIONES EN LA ORGANIZACIÓN: • • Agrupar los objetos que estén relacionados con el comando Modificar -> Agrupar. • 52 Aplicaciones Gráficas II.1 Publicar una película. Hemos visto que la animación de líneas es bastante útil. UNIDAD VIII: Publicación de la película. Flash lo colocará en la biblioteca y cada vez que quiera mostrarlo. Antes de aventurarnos a publicar nuestra película para que otros la vean. Por tanto evitemos las líneas discontinuas. en la medida de lo posible.FLASH . Si hemos creado un objeto que va a aparecer varias veces. Ya hemos comentado el mayor tamaño de los mapas de bits. por lo que debemos evitar su uso excesivo. hará que el tamaño de la descarga aumente. Flash va saltando de una a otra de forma ordenada cada vez que el cabezal de lectura llega al último fotograma de cada escena.52 Flash reproduce secuencialmente los fotogramas. también requieren más memoria. Sin embargo el uso de líneas que no sean las definidas por defecto y que usamos en el capítulo que hemos comentado. Dibujar las curvas con el menor número de nodos posible. 8. donde el tamaño de descarga es de vital importancia. deberíamos convertirlo a símbolo. La herramienta pincel gasta más memoria que el resto de herramientas de dibujo. si existen escenas definidas. ya que como hemos visto. OBJETIVO: Generar la publicación de la película para visualizarla en la Web. por lo que deberíamos elegir estas últimas en la medida de lo posible. debemos tener en cuenta los siguientes aspectos: CONSIDERACIONES EN EL DIBUJO: • Aunque los degradados queden muy vistosos.

cuando manejábamos textos. Estas opciones se pueden ver en el panel de Configuración de Publicación. Están colocadas ahí para resaltar que estas fuentes ocupan un mínimo de memoria. son necesarias dos cosas: crear un archivo SWF y que el que la quiera visualizar tenga instalado el Reproductor de Flash. 53 Aplicaciones Gráficas II.53 CONSIDERACIONES EN LOS TEXTOS: • Hemos podido observar. 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. al que podemos acceder mediante el menú Archivo -> Configuración de Publicación (Pestaña Flash). Esto no es una casualidad.FLASH . Flash nos ofrece varias opciones y funcionalidades para la creación de un archivo SWF. que cuando abrimos el menú de tipos de letras. las tres primeras son siempre "_sans". "_serif" y "_typewriter". Evitar el uso de la interpolación por forma para animaciones de cambio de color. por lo que se recomienda su uso. Para poder distribuir películas creadas en Flash que la gente pueda ver. cuando sea posible.

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. 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.

• •

54

Aplicaciones Gráficas II- FLASH

55

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. BOTÓN 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

55

Aplicaciones Gráficas II- FLASH

56

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.

56

Aplicaciones Gráficas II- FLASH

Presione la tecla Intro y se reproducirá la película. 9. Guarde el archivo con el nombre de Práctica 5. Dibuje un círculo en el lado izquierdo de la escena. quítele el contorno y cambie el color de relleno. haciendo clic sobre él y pulse el botón derecho para que aparezca el menú contextual. seleccione el fotograma 30 haciendo clic sobre el y presione F6 para crear el último fotograma clave. 57 Aplicaciones Gráficas II. 1. Abra Flash y Cree un nuevo documento. Práctica 5 (Pelota Rebotando) En esta práctica debes aplicar el anterior método de Fotograma a Fotograma. Seleccione el primer fotograma. 9. 4. Guarde el archivo en su carpeta de Prácticas de su USB con el nombre de Práctica 4. Dibuje el círculo. Cree un nuevo documento en blanco. De momento no pasa nada. 10. Práctica 6 PARTE I (Interpolación de Movimiento) 7.57 7. Ver ejemplo. 5. 8. Repita el paso anterior hasta llegar al fotograma 10. 3. para crear una animación donde el círculo va arriba abajo (pelota rebotando). Seguidamente. 2. Esta será la posición en el primer fotograma. 8. Seleccione la opción Crear interpolación de movimiento (Create motion tween). Presione F6 y mueva el círculo hacia arriba 10 pasos. Inmediatamente todos los fotogramas intermedios quedarán sustituidos por una flecha. Realice el anterior paso hasta crear el efecto de Pelota rebotando.FLASH .

Presione F6 para crear un fotograma clave. Jalar en algún 12.58 11. seleccione el círculo y muévalo a la posición final del círculo. punto PARTE II (Cambiar color y tamaño) A continuación haremos que el círculo cambie de color y de tamaño. Haga clic en el fotograma 10. 58 Aplicaciones Gráficas II. Presione la tecla Intro. 13. 16. active el panel propiedades que se encuentra en la parte inferior y active la opción color en Tinta (Tint) y escoja el color. 15. 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. esto le permitirá hacer algún cambio. jalando alguno de los puntos. que sería hasta la derecha de la escena (también puede moverlo con las flechas). utilice la herramienta Transformación libre (Free Transform) y cambie el tamaño del círculo. También en el fotograma 10 puede cambiar el color. La inserción del fotograma clave quedará evidente por la aparición de la flecha dividida en dos. Ahora con el fotograma 30 seleccionado. Con el fotograma seleccionado. 14. para eso.FLASH .

repita los pasos del 7 al 11. 10. 7. 11. Automáticamente los fotogramas del 1 al 40 aparecerán de color verde con una flecha. 6. Desde el panel de propiedades. En un documento nuevo dibuje un círculo con la herramienta óvalo y sitúelo en el centro de la escena. 18. 3. despliégala y elija Shape (forma). aplique dos veces la opción Modify / Break Apart. Presione Intro para reproducir la película y observe la interpolación de forma. Con el texto seleccionado.FLASH . Ahora active la herramienta Texto . Elimine su contorno. 19.59 17. 59 Aplicaciones Gráficas II. Con la herramienta de texto haga doble clic sobre el texto recién escrito para seleccionarlo. Cambie el tamaño. 5. Presione Intro para observar el resultado. haga clic en la escena para que aparezca el cursor del texto y escriba la palabra círculo. 2. 8. seleccione el círculo y bórrelo con la tecla SUPR. Seleccione el fotograma 40 y pulse F6 para crear un fotograma clave. 9. Seleccione el texto y posiciónelo al centro de la escena. Ahora en el fotograma 20. En el panel propiedades aparece la casilla Tween (animar). Guarde su práctica con el nombre de Práctica 6 (Interpolación de movimiento). Práctica 7 (Interpolación de forma) 1. 4. En el fotograma 40. color y tipo de fuente. Seleccione el primer fotograma haciendo clic sobre él y aparecerá el círculo.

Práctica 9 (Logotipo Lasalle) 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. Ahora seleccione el primer fotograma y del mismo modo separe dos veces el texto Nuevo flash para aplicar la interpolación de forma. • En el primer fotograma dibujar el escenario. pero recuerda desagruparlo y separarlo (seleccionas el logotipo. Modify / break apart) Wx Ät ftÄÄx Práctica 10 (Juego Ping Pong) Crear la simulación del juego ping pong. 8. usando fotograma a fotograma. active la herramienta de texto y arrastre sobre el texto escrito para seleccionarlo. En la parte central de la escena escriba el texto “Nuevo Flash” con un tamaño de 60 puntos y la letra que prefiera. 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. 5. 3. lo puedes bajar de internet. Finalmente. El logotipo. El texto escrito también aparecerá en este nuevo fotograma. seleccione Forma. Recuerde que la interpolación de forma trabaja con objetos no agrupados. harás los movimientos de la pelota y porterías. 1. Ver ejemplo. Con el fotograma 30 seleccionado. 60 Aplicaciones Gráficas II. 2. Ahora seleccione el fotograma número 30 y pulse F6 para crear el segundo fotograma clave. • A partir del segundo fotograma. 6.FLASH . Cree un documento nuevo. 7. centre el texto. 4. seleccione el primer fotograma y en la casilla animar (tween) del panel propiedades. Bórrelo y escriba el texto “fantástico” en otro color y con otro tipo de letra.60 PRÁCTICA 8: Interpolación de Forma para un texto. Pulse CTRL + Intro o Intro.

2. debes combinar colores y tomar en cuenta los distintos procedimientos.FLASH .61 Práctica 11 (Animación Mixta en una sola capa) Crear una animación que tenga por objetivo Promocionar un valor humano (Amistad. respeto. con un grueso del no. Práctica “Pelota rebotando (Capa guía)” Creación de la pelota. 61 Aplicaciones Gráficas II.). aplicar los 3 tipos de animación. 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). 1. Dibuje un círculo con contorno. la duración debe ser de por lo menos 10 segundos. etc. Ejemplo. 3 y sin relleno. Seleccione cada una de las secciones de la pelota y aplique el relleno con la herramienta . honestidad.

Ajustar a objetos (View. Revise que tenga activada la opción Ver. Snap to objects). una serie de rebotes.62 3. Seleccione todo el dibujo y agrúpelo con CTRL + G o Modify. Haga clic en el icono y aparecerá la capa guía por encima de la capa actual.FLASH . no se ha definido ningún movimiento. cada uno de los cuales debe ser menor que el anterior hasta que ya no bote más. 10. Práctica “Capa máscara” El Procedimiento a seguir en este caso será: • Dibujar o escribir lo que se desea enmascarar en la capa normal. • Activar el efecto de máscara. Group. Haga clic con el botón derecho sobre el primer fotograma y la opción Crear Interpolación de movimiento (motion tween). Seleccione el fotograma 40 y pulse F6 para convertirlo en fotograma clave. Con esto quedará completada la interpolación aunque. Colocación de la pelota en los lugares adecuados. 9. Crear la interpolación de movimiento 4. es decir. No importa que el trazo rebase los límites de la escena. simulando una serie de botes. 7. de momento. el cual deberá seguir la pelota cuando aparezca en la escena. Creación del trayecto para la pelota (Capa Guía) 6. 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. 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. 62 Aplicaciones Gráficas II. 11. • Dibujar en la capa de máscara el objeto por el cual se va a observar la capa normal. Reproduzca la película con CTRL + Intro y verá el recorrido de la pelota en el camino trazado. 8. Mediante la herramienta lápiz y el modificador Suavizar trace un camino. 5. • Crear una capa de máscara.

9. por lo menos de 80 puntos. Presione CTRL + Intro para observar el resultado. 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 e encima. Para convertir en símbolo: a) Una vez dibujado. crea una interpolación de movimiento hasta el fotograma 40. para que recorra la capa de máscara toda la palabra. a) Dibujar 3 objetos y convertirlos en símbolos gráficos. 5. se creará un dibujo. Los contornos son ignorados porque so tiene en solo cuenta los rellenos y no las líneas.63 1. en este caso un círculo. Convert to symbol… 63 Aplicaciones Gráficas II FLASH II- . 8. b) Presione F8 o seleccione Insert . Seguidamente crearemos la capa de máscara. Se observará únicamente las letras que se cubrieron con el círculo. En la capa texto presione en el fotograma 40 F5 para que el texto no desaparezca. 2. 4. 6. seleccione el objeto gráfico y agrúpelo. desbloquee la capa y dibuje el círculo con un diámetro mayor que el texto. En la capa máscara. Ahora en la capa de máscara. Pulse en para crear una nueva capa normal que quedará automáticamente por encima de la capa anterior. 10. cambie el tipo de letra y el tamaño de letra. Con la herramienta Texto escriba la palabra “FLASH MX”. Finalmente revise que esté activada la máscara y presione CTRL + Intro. 3. Sitúe el círculo al principio del texto. Haga clic con el botón derecho sobre la nueva capa y en el menú contextual seleccione la opción Máscara (Mask). sione PRÁCTICA 12 (SÍMBOLOS SÍMBOLOS) . de tal forma que sólo se verá las primeras letras. que es por donde se observará la capa normal. 7.

Sitúelo centrado con la pequeña cruz que aparece en el centro de la pantalla. b) Acepte y la ventana de la escena se convertirá en la ventana de edición del botón. Aquí se hace lo mismo. El símbolo gráfico se almacenará en la biblioteca de símbolos.64 En cualquier caso. g) Puede sustituir el dibujo o simplemente cambie el color. d) Seleccione Graphic. El cambio aparecerá cuando pase el cursor del ratón SOBRE (Over) el botón. f) Ahora. h) Seleccione el tercer fotograma y pulse F6 para crear un fotograma clave en esa posición. e) Entre a la ventana de edición de botones y dibuje un círculo con el tamaño. b) Con los 3 símbolos crea una animación usando capas e interpolación. aparecerá el siguiente cuadro: c) Escriba un nombre al símbolo. Como siempre. El último fotograma permite definir el área activa del botón. pulsado). c) Crear un símbolo botón. El círculo del fotograma anterior. e) Haga clic en Ok. para definir un botón lo que hay que hacer es definir el aspecto que debe tener en cada uno de los casos citados. d) Así pues. se debe definir el aspecto cuando haga clic 64 Aplicaciones Gráficas II. encima.FLASH . el nombre del botón que se está editando ahora. para ver la biblioteca presione F11. seleccione la opción Insertar/ Nuevo símbolo. seleccione el segundo fotograma haciendo clic sobre él y pulse F6 para crear un nuevo fotograma clave. los tres primeros se corresponden con los 3 estados posibles del botón (reposo. la parte superior de la ventana de la línea del tiempo mostrará el nombre de la escena principal y además. c) Observe como aparecen únicamente 4 fotogramas. En la ventana que se abrirá asigne un nombre para el botón y active la opción botón. a) En nuevo documento. Puedes aplicar Capas guía o capas de tipo máscara. se repetirá. Pues bien. aspecto y color que desees para la posición de REPOSO (Up) del botón. Esta operación resulta similar a la que se vio cuando se hizo una película fotograma a fotograma.

l) Presione Ctrl + Intro y observe como cambia el botón al pasar o hacer clic sobre él. ya que puede interesarnos que sólo una parte de la imagen del botón resulte activa. Posición del ratón REPOSO (Up) Posición del ratón SOBRE (Over) Posición del ratón PULSADO (Down) 65 Aplicaciones Gráficas II. seleccionándolo y mediante la ventana de acciones de fotograma. k) Ahora arrastre el botón de la biblioteca (F11) hasta la escena principal. Down). convertirlo en botón con F8 y luego entrar a la ventada de edición EDIT/ Edit Symbols. Los símbolos botón aparecen precedidos por el ícono . habrá que asignarle al botón la acción que queremos que se reproduzca cuando se haga clic sobre él.FLASH . cuando termines guarda el archivo con el nombre Botón 2. para volver a la escena. d) Aplica el procedimiento anterior y Crea un Símbolo botón que se llame CARITAS. Eso se definirá una vez colocado el botón en la escena principal. (Se verá más adelante) j) Presione o haga clic en Scene 1 (Escena 1). i) Con la definición de los 3 primeros fotogramas el botón ya funcionará. el cual presente las siguientes características.65 sobre el botón (PULSADO. 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. El cuarto fotograma está destinado a definir el área útil del botón. Por otra parte. Puede modificar el círculo por otra cosa o simplemente cambie el color.

Ver imagen: 66 Aplicaciones Gráficas II. seleccionas el botón en la posición donde se le va a dar animación. 3. elije EDIT . escribe CLIP REPOSO y en Comportamiento. selecciónalo y con el botón derecho. 2. es decir. EDIT. para ir a la ventana de Edición del Clip de película o Clic derecho. Aparecerá la línea del tiempo del CLIP de Película como si estuvieras en la escena principal. Una vez abierto el archivo.para que se abra la ventana de Edición y cambies el aspecto del botón como se observa en la imagen de abajo. elije Clip de película. vamos a darle animación a las 3 posiciones del botón anterior. Dar doble clic en el botón.FLASH . Clic con el botón derecho y elije Convertir a Símbolo. 1. 4. Abre el archivo que contenga la práctica No. se debe abrir la biblioteca con F11. seleccionas el fotograma UP. 4 (Botón 2). 5. 6. Para dar ANIMACIÓN AL BOTÓN. Ver imagen. En el cuadro haz clic en la opción Nombre. si tienes el botón de la Carita en la escena principal.66 PRÁCTICA 13 (BOTÓN ANIMADO) Ahora. NOTA: En caso de que no se encuentre en la escena principal.

NOTA: Te sugiero apliques Fotograma a Fotograma. realiza un Gif animado con motivo ECOLÓGICO. 67 Aplicaciones Gráficas II. PRÁCTICA 14 (GIF´S) a) Importar un Gif animado de la Web y vectorizarlo para poder hacerle cambios a través de Flash. ya sea Fotograma a Fotograma o INTERPOLACIÓN.FLASH .67 8. Aplicando Animación fotograma a fotograma. Aquí se le aplican las animaciones al gráfico. b) Guardar el gif original y la copia que tu realices con el nombre de PRÁCTICA_6. PRÁCTICA 15.

7. Aplicación de capas normales (usar más de una). Aplicación de capa guía o capa máscara. Que cumpla objetivo. 5. 3. Nota: Cabe mencionar que el anuncio debe ser considerado con un enfoque positivo. Presentar avances del trabajo en clase práctica en tu USB. Para su evaluación. 8. 9. con el 6. Excelente combinación de colores y fuentes.creaformacion.aulaclic. Calidad en los símbolos gráficos creados en flash.htm http://usuarios.68 Proyecto 1: Creación de un anuncio publicitario con Flash. se tomarán en cuenta los siguientes puntos: 1. Tiempo mínimo de la película de 20 segundos.FLASH .htm http://www.es/paginadav/ 68 Aplicaciones Gráficas II.html http://www. 4. 2. el cual sea llamativo para el usuario. Objetivo: Aplicar las técnicas y herramientas de animación vistas en clase para crear un anuncio publicitario de una empresa / producto.ar/webmaster/curso_flash.pdf http://www.com. Creatividad.com/images/libros/Flash_1. Nota: Revisar prácticas del 2° periodo para capas g uía y capas máscara. 10.multimania.estudiargratis. Aplicación de animación por interpolación de movimiento o forma.com/cursos/flash8/leccion3/tutorial10. Referencias de páginas Web: http://www.es/flashMX/f_flash. Entregarlo en tiempo y forma.adrformacion.

Sign up to vote on this title
UsefulNot useful