antologia. - Colegio La Salle Veracruz

1
Antología
Material de consulta
Aplicaciones gráficas II
Colegio la Salle
de Veracruz
Sección Bachillerato cuarto Semestre
Nombre: ________________________________
Grupo: _____
1
Aplicaciones Gráficas II- FLASH
No. de Lista: _____
2
Aplicaciones gráficas con programas integrados II
Flash
Objetivo General: Crear animaciones que combinen gráficos, símbolos e imágenes,
mediante la aplicación del programa flash, para la producción de
películas a nivel básico.
UNIDAD I: Elementos básicos de Flash.
OBJETIVO: Identificar los elementos básicos de flash, mediante el análisis de sus características y
funciones.
1.1 Introducción a Flash ..................................................................................................... 4
• Historia.
• Mapa de bits y vectores.
1.2 Entorno de trabajo ........................................................................................................ 7
• Escenario.
• Objetos de Flash.
- Símbolos.
• Línea del tiempo.
• Las Capas.
• Barra de menús.
• Barra de herramientas.
• Paneles.
1.3 Configuración del área de trabajo .................................................................................. 11
• Dimensiones.
1.4 Guardar y abrir películas ............................................................................................... 11
UNIDAD II: Mis primeras animaciones.
OBJETIVO: Crear animaciones sencillas mediante la aplicación de los diferentes tipos de animación.
2.1 Tipos de Fotogramas..................................................................................................... 11
2.2 Animación Fotograma a Fotograma .............................................................................. 14
2.3 Animación Interpolada ................................................................................................... 15
2.3.1 Interpolación de movimiento.
2.3.2 Interpolación de forma.
UNIDAD III: El dibujo en Flash.
OBJETIVO: Utilizar las herramientas de dibujo en base a sus propiedades y características.
3.1 Contornos y rellenos...................................................................................................... 19
3.2 Dibujar líneas rectas ...................................................................................................... 19
3.3 Dibujar Óvalos ............................................................................................................... 20
3.4 Dibujar rectángulos........................................................................................................ 20
3.5 Herramienta lápiz y pluma ............................................................................................ 20
3.6 Selección de objetos .................................................................................................... 21
3.7 Agrupar y desagrupar .................................................................................................... 22
3.8 Interacción entre objetos ............................................................................................... 23
2
Aplicaciones Gráficas II- FLASH
3
3.9 Alinear objetos............................................................................................................... 24
3.10 Transformar objetos .................................................................................................... 25
UNIDAD IV: Texto.
OBJETIVO: Aplicar la herramienta texto de acuerdo a sus atributos y características.
4.1 Trabajar con texto ......................................................................................................... 26
4.2 Propiedades de los textos ............................................................................................. 26
UNIDAD V: Capas.
OBJETIVO: Aplicar las capas de acuerdo a sus propiedades para la creación de animación en las
películas.
5.1 Introducción. .................................................................................................................. 30
5.2 Elementos de la ventana con las capas......................................................................... 31
5.3 Distribuir objetos en capas ............................................................................................ 33
5.4 Tipos de Capas ............................................................................................................ 34
5.5 Capas guía .................................................................................................................... 34
5.6 Capas Máscara ............................................................................................................. 35
UNIDAD VI: Símbolos y Animación interactiva.
OBJETIVO: Aplicar los símbolos a través de su biblioteca para generar una animación más interactiva.
6.1 Símbolos e Instancias ................................................................................................... 35
6.2 Tipos de símbolos ......................................................................................................... 36
- Gráficos.
- Botones.
- Clips de película.
6.3 Propiedades de los símbolos......................................................................................... 38
6.4 Crear símbolos .............................................................................................................. 38
6.5 Biblioteca de símbolos .................................................................................................. 39
6.6 Los fotogramas.............................................................................................................. 41
6.7 Creación de gif´s animados ........................................................................................... 41
6.8 Uso del papel Cebolla ................................................................................................... 42
UNIDAD VII: Acciones en Flash.
OBJETIVO: Crear películas interactivas aplicando las acciones del lenguaje Action script.
7.1 Introducción ................................................................................................................... 43
7.2 Panel de Acciones ......................................................................................................... 44
7.3 Añadir Acciones ............................................................................................................ 48
7.4 Action Script .................................................................................................................. 48
UNIDAD VIII: Publicación de la película.
OBJETIVO: Generar la publicación de la película para visualizarla en la Web.
8.1 Publicar una película ..................................................................................................... 52
3
Aplicaciones Gráficas II- FLASH
4
UNIDAD I: Elementos básicos de Flash.
OBJETIVO: Identificar los elementos básicos de flash, mediante el análisis de sus
características y funciones.
1.1 Introducción a Flash.
Flash es una potente herramienta creada por una empresa de software gráfico,
denominada Macromedia, la cual ha superado las mejores expectativas de sus
creadores; inicialmente Macromedia Flash fue creado con el objeto de realizar
animaciones vistosas para la web, así como para crear gif´s animados.
Actualmente, es una estupenda aplicación que permite crear espectaculares páginas
Web de alto contenido interactivo, animaciones de todo tipo y hasta juegos.
Los motivos que han convertido a Flash en el programa elegido por la mayoría de los
diseñadores web profesionales y aficionados son varios. Veamos pues, porqué es
interesante Flash.
Las posibilidades de Flash son extraordinarias, cada nueva versión ha mejorado a la
anterior, y el actual Flash no ha sido menos. Aunque su uso más frecuente es el de
crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar)
sus usos son muchos más. Son tantos, que todos los diseñadores web deberían saber
utilizar Flash.
Flash ha conseguido hacer posible lo que más hacía falta en Internet: Dinamismo, y
con dinamismo no sólo nos referimos a las animaciones, sino que Flash permite crear
aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no
estático (en contraposición a la mayoría de las páginas, que están realizadas
empleando el lenguaje HTML). Con Flash podremos crear de modo fácil y rápido
animaciones de todo tipo. El entorno de Flash es amigable, lo que facilita su
aprendizaje.
Historia del programa
Los inicios de Flash se remontan a una aplicación llamada Smart Sketch. Este
programa estaba pensado para realizar imágenes gráficas vectoriales, pero con una
interfaz similar a la de los programas de dibujo bitmap. La versión que siguió a ésta fue
bautizada con el nombre de Future Splash Animator (Flash 1), donde se continuó con la
metodología del dibujo vectorial, aunque esta versión incorporaba la posibilidad de
realizar animaciones y visualizarlas en Internet a través de un player.
Posteriormente, los creadores de Flash vendieron los derechos a Macromedia, que
incorporó el plug-in de Shockwave. Así, en Flash 2 introdujeron un player para colocar
en Internet las animaciones que, por su pequeño tamaño, eran ideales para este medio.
4
Aplicaciones Gráficas II- FLASH
5
En la versión 3, desarrollaron la tecnología “metamorfosis” y clips de película y, Flash 4,
ya incorporaba mejoras de programación, interacciones y QuickTime.
Macromedia Flash 5, entre otras cosas, contaba con dos nuevas herramientas (“Pluma”
y “Subselección”) que permitían crear y editar gráficos vectoriales de forma precisa,
presentaba la posibilidad de organizar y reutilizar los recursos compartidos en un
proyecto a través de las “Bibliotecas compartidas” y añadía un “Explorador de película”
que clasificaba el contenido del documento y permitía visualizar la estructura jerárquica
del mismo, ofreciendo la posibilidad de analizar y editar proyectos complejos.
La versión MX presenta una interfaz mucho más funcional e intuitiva. Además, propicia
la animación con texto mediante métodos que aceleran este mecánico y largo proceso.
También ofrece la posibilidad de insertar vídeo en la película SWF e incorpora nuevas
opciones de transformación de gráficos.
Versiones:
Smart Sketch__ (1993) Programa para realizar imágenes vectoriales.
Future Splash Animator _ Flash 1.0 (1996)
En 1997 los creadores vendieron los derechos a Macromedia que incorporó el plug-in
de Shockwave. Macromedia Flash 2.0.
En 1998_ Macromedia Flash 3.
En 1999 _ Macromedia Flash 4.
En 2000_ Macromedia Flash 5.
En 2002_ Flash Mx. (V. 6)
En 2004 _ Flash Mx 2004 (V. 7)
En 2004 _ Flah Mx 2004 profesional
En 2005 , Flash Basic 8 y Flash Profesional 8.
En 2006, Flash Profesional 9 con actionscript.
En 2007, Adobe Flash CS3 Profesional (V. 10).
En 2008, AdobeFlah CS4 Profesional (V. 10).
En 2010 última actualización (V. 10.1)
5
Aplicaciones Gráficas II- FLASH
6
Mapa de bits y Vectores
Afortunadamente, Flash, aunque puede manejar los bitmaps,
trabaja fundamentalmente con vectores.
Mapa de bits
Los bitmaps o mapa de bits son archivos gráficos de gran
tamaño constituidos en base a pixeles (puntos de imagen)
que forman parte de un conjunto que obliga a seleccionarlo
todo a la vez, ya que, en principio lo que aparece en la imagen no son elementos
individuales, sino un “todo” inseparable. Cada imagen consta de un número
determinado de pixeles que determinan su resolución, la cual es fija y no varía con el
tamaño, situación que provocará distorsiones si se reduce.
Por otra parte, una imagen vectorial sólo permite la representación de formas simples.
Si bien es verdad que la superposición de varios elementos simples puede producir
resultados impresionantes, no es posible describir todas las imágenes con vectores;
éste es particularmente el caso de las fotografías realistas.
Los Vectores
Las imágenes vectoriales son representaciones de entidades geométricas (vectores)
tales como círculos, rectángulos o segmentos. Están representadas por fórmulas
matemáticas (un rectángulo está definido por dos puntos; un círculo, por un centro y un
radio; una curva, por varios puntos y una ecuación). El procesador "traducirá" estas
formas en información que la tarjeta gráfica pueda interpretar.
Dado que una imagen vectorial está compuesta solamente por entidades matemáticas,
se le pueden aplicar fácilmente transformaciones geométricas a la misma (ampliación,
expansión, etc.), mientras que una imagen de mapa de bits, compuesta por píxeles, no
podrá ser sometida a dichas transformaciones sin sufrir una pérdida de información
llamada distorsión. La apariencia de los píxeles en una imagen después de una
transformación geométrica.
6
Aplicaciones Gráficas II- FLASH
7
Imagen vectorial
Imagen de mapa de bits
1.2 Entorno de trabajo.
La versión de Flash MX cuenta con un entorno o interfaz de trabajo de lo más
manejable e intuitiva. Además, tiene la ventaja de que es similar a la de otros
programas de Macromedia (Dreamweaver, Freehand, Director...), todo esto hace más
fácil aprender Flash y más rápido su manejo y dominio. Esto es lo que nos
encontraremos al abrir Flash MX por primera vez.
7
Aplicaciones Gráficas II- FLASH
8
Elementos del entorno de trabajo
Barra de Menú
Tiene como propósito facilitar el acceso a las distintas utilidades del programa. Es
similar a la de cualquier otro programa de diseño web o gráfico, aunque tiene algunas
particularidades. Veamos los principales Submenús a los que se puede acceder:
Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de
la utilidad Importar que inserta en la película actual casi todo tipo de archivos
(sonidos, vídeo, imágenes e incluso otras películas Flash), o la de Configuración de
Publicación desde donde se pueden modificar las características de la publicación.
También permite configurar la impresión de las páginas, imprimirlas...
Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar... tanto objetos o
dibujos como fotogramas; también permite personalizar algunas de las opciones más
comunes del programa.
Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las
escenas. También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se
puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se
pueden configurar sus opciones.
Insertar: Te permite insertar objetos en la película, así como nuevos fotogramas,
capas, acciones, escenas...
Modificar: La opción Transformar permite modificar los gráficos existentes en la
película, y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales
(este tema se tratará más adelante). El resto de opciones permite modificar
características de los elementos de la animación Suavizar, Optimizar o de la propia
película (Capa, Escena ...).
Texto: Sus contenidos afectan a la edición de texto. Más adelante se tratará en
profundidad.
Control: Desde aquí se modifican las propiedades de reproducción de la película.
Reproducir, Rebobinar, Probar Película ....
Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las
ventanas, incluye accesos director a TODOS los Paneles.
Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Macromedia,
desde el manual existente, hasta el diccionario de Action Script, pasando por tutoriales,
lecciones guiadas etc.
8
Aplicaciones Gráficas II- FLASH
9
Línea del tiempo
La Línea de Tiempo es el lugar donde se refleja lo que va a ir sucediendo a lo largo
de la duración de la película. Se basa prácticamente en la misma filosofía de las
películas de cine, es decir, una serie de fotogramas sucesivos, cada uno de los cuales
contiene las imágenes que deben aparecer cuando se proyecta la película. Consta de
2 partes.
1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando
rectángulos)
2) Los Números de Fotograma que permiten saber qué número tiene asignado cada
fotograma, cuánto dura o cuándo aparecerá en la película.
Además, en la parte inferior hay herramientas para trabajar con Papel cebolla e
información sobre el Número de Fotograma actual (1 en la imagen), la Velocidad de
los Fotogramas (12.0 en la imagen) y el Tiempo de película transcurrido (0.0s en la
imagen).
Capas
El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la
importancia de estas, se le dedicará un tema completo. Aún así, veamos a grandes
rasgos qué son las capas.
Una Capa se puede definir como una película independiente de un único nivel. Es
decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas).
Los objetos que estén en una determinada capa comparten fotograma y por tanto,
pueden "mezclarse" entre sí. Esto es interesante a menudo, pero otras veces es
conveniente separar los objetos de modo que no interfieran entre sí. Para ello,
crearemos tantas capas como sea necesario.
Paneles
Los Paneles son conjuntos de comandos agrupados según su función (por ejemplo, todo
lo que haga referencia a las acciones, irá en el Panel "Acciones"). Su misión es simplificar
y facilitar el uso de los comandos.
Todos ellos se estudiarán en profundidad a lo largo del curso. Aún así, vamos a
nombrarlos y a resumir sus funciones.
Panel Info: Muestra el tamaño y las coordenadas de los objetos seleccionados,
permitiéndonos modificarlas. Muy útil para alineaciones exactas.
9
Aplicaciones Gráficas II- FLASH
10
Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados.
Panel Alineamiento: Coloca los objetos del modo que le indiquemos. Muy útil.
Panel Mezclador de Colores: Mediante este panel creamos los colores que más nos
gusten.
Panel Muestras de Color: Nos permite seleccionar un color de modo rápido y gráfico.
(Incluidas nuestras creaciones).
Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos
para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes"
con propiedades características y muchas utilidades (calendarios, scrolls etc...)
Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos accesibles
desde este panel.
Panel Propiedades: Sin duda, el panel más usado y más importante. Nos muestra las
propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de
trazo, tamaño de los caracteres, tipografía, propiedades de los objetos (si hay
interpolaciones etc...), coordenadas, tamaño etc... Es fundamental, no debeis perderlo de
vista nunca.
Panel Escena: Modifica los atributos de las escenas que usemos.
Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra
película.
Área de trabajo
El Área de trabajo consta de varias partes, veamos:
La parte más importante es el Escenario, sobre el escenario dibujaremos y colocaremos
los diferentes elementos de la película que estemos realizando. El escenario tiene unas
propiedades muy importantes, ya que coinciden con las Propiedades del documento.
Para acceder a ellas, hagamos clic con el botón derecho sobre cualquier parte del
escenario en la que no haya ningún objeto y después sobre Propiedades del documento:
Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de 1 x 1 px
(píxeles) y el máximo de 2880 x 2880 px.
Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado
(tamaño por defecto de la Impresora, Contenidos existentes o los elegidos como
Predeterminados)
Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película.
Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la
película.
10
Aplicaciones Gráficas II- FLASH
11
1.3 Configuración del área de trabajo.
Cada vez que se crea un nuevo documento aparece una escena vacía lista para
trabajar en ella. Lo que ubique y características se almacenará junto con la película.
La película se almacenará con los parámetros y propiedades con los que aparece por
defecto, así que si desea hacer algún cambio a los parámetros o propiedades debe
realizarlo antes de iniciar la película. Se puede cambiar el tamaño de la película
(dimensiones), el color de fondo, la velocidad de fotogramas, etc.
Puede realizarlo de las siguientes formas:
a) Panel de propiedades.
b) Menú Modificar / documento.
c) CTRL + J
En cualquier caso, aparecerá el recuadro
1.4 Guardar y abrir películas.
•
•
.FLA .- Es el formato de archivo que se genera al momento de guardar una
película de Flash, este formato nos permitirá ver cómo está hecha la película o
editarla para alguna modificación. Nota: Guardar en Formato Flash 6.
.SWF (Shock Wave File).- Este formato corresponde a la película cuando es
publicada y solo permite su visualización, estos archivos pueden ser ejecutados
por flash player sin tener conexión a internet.
UNIDAD II: Mis primeras animaciones.
OBJETIVO: Crear animaciones sencillas mediante la aplicación de los diferentes tipos
de animación.
2.1 Tipos de Fotogramas.
Un fotograma representa el contenido de la película en un instante de tiempo. Por
tanto, una animación no es más que una sucesión de fotogramas. Todo esto se puede
controlar desde la Línea de Tiempo, pero no todos los fotogramas tienen el mismo
comportamiento ni se tratan igual. Veamos qué tipos de fotogramas hay y cuáles son
sus rasgos.
11
Aplicaciones Gráficas II- FLASH
12
Fotograma Normal (Normal Frame) : Estos fotogramas siempre
siguen a los fotogramas clave, no representan contenido nuevo y son
de color gris.El último fotograma de una secuencia de fotogramas
normales viene representado por un cuadrado blanco sobre fondo gris.
En el ejemplo, los fotogramas del 2 - 5 son fotogramas normales, su
contenido no es nuevo, esto es, es el mismo que el del fotograma 1.
Como vemos, su misión es prolongar la duración de un fotograma
clave o keyframe.
Fotograma Clave (KeyFrame) : Son fotogramas con un contenido
especifíco, se crean, por tanto, para insertar en ellos un nuevo contenido
no existente en la película. Se identifican por tener un punto negro en el
centro y cuando esté vacío se le diferencia por una línea negra vertical.
Con F6, se crean.
Fotograma Contenedor: No son fotogramas propiamente dichos, sino
que representan un lugar dentro de la Línea de Tiempo en la que se
puede insertar uno. Por defecto ocupan toda la película y Flash no los
tendrá en cuenta al publicar la película. En la imagen, son fotogramas
contenedor todos los fotogramas a partir del 12 (incluido). 1 de cada 5
fotogramas contenedor es gris, el resto, blancos.
Fotogramas pausados Son aquellos que se encuentran entre dos
fotogramas clave. Son aquellos que contienen algún objeto pero que
no son fotogramas clave. Encontramos fotogramas intermedios en las
interpolaciones de forma y de movimiento. Con F5 se crean.
Fotograma Vacío: Son fotogramas sin contenido, Su color es
blanco.En la imagen, los fotogramas del 6 al 11 (incluidos) son
fotogramas vacíos. No debemos confundirlos con los fotogramas
contenedor, pues estos últimos vienen delimitados por líneas verticales
grises (no negras). Si se inserta algo en estos fotogramas, pasan a ser
Keyframes. Con F7 se crean.
Es importante resaltar que Flash no ignora estos fotogramas y
simplemente mostrará una imagen en blanco. (no dará por terminada la
animación). De modo que si queremos que un objeto aparezca en el
fotograma 1 y después otra vez en el fotograma 10. Los fotogramas del 2
al 9 deberán ser fotogramas vacíos ya que así el objeto "desaparecerá"
y volverá a aparecer.
Fotograma Etiquetado (Label Frame): Contiene en la parte
superior una "bandera" roja que indica que tienen un nombre
asociado. Dicho nombre se establece desde el Panel "Frame". Si la
duración del frame es la suficiente, se puede leer el nombre (o
etiqueta) que identifica al conjunto de fotogramas.
Fotograma con Acciones asociadas: Contienen en la parte
superior una "a" que indica que tienen una acción asociada. Estos
fotogramas son especialmente importantes, pues estas acciones, en
principio "ocultas" (para verlas hay que acceder al Panel Acciones)
pueden cambiar el comportamiento de la película. En la imagen, la
acción existente en el fotograma 1 afecta también al 2 y al 3 (por ser
fotogramas normales). El fotograma 4 no tiene acciones y sí las tiene
el 5.
12
Aplicaciones Gráficas II- FLASH
13
Fotogramas de Animación de Movimiento: Vienen caracterizados
por el color morado y representa el movimiento (con o sin efectos) de
un objeto, que pasa de la posición del Keyframe inicial al final. Para
representar esta animación aparece una flecha entre estos
Keyframes.
Seleccionar fotogramas
Un fotograma seleccionado aparece siempre resaltado en color negro.
• Para seleccionar un fotograma clave o normal, simplemente haga clic sobre él.
• Para seleccionar a la vez varios fotogramas consecutivos de cualquier tipo
arrastre el cursor del ratón sobre ellos.
• Si después de haber seleccionado el primer fotograma mantiene pulsada la tecla
CTRL y va haciendo clic uno a uno sobre los siguientes fotogramas, éstos se irán
añadiendo a la selección.
• Para seleccionar a la vez todos los fotogramas de una animación de cualquier
tipo, sitúe el cursor sobre alguno de sus fotogramas intermedios (normales) y
haga doble clic. Se seleccionarán todos los fotogramas de la animación.
• Para seleccionar a la vez el mismo fotograma en varias capas, arrastre
verticalmente hacia arriba o hacia abajo.
• Para seleccionar a la vez fotogramas consecutivos en varias capas arrastre para
cubrir el área de fotograma que desee incluir en la selección.
Copiar y pegar fotogramas
También se pueden cortar, copiar y pegar como el resto de objetos de Windows. Sin
embargo, en Flash estas operaciones con los fotogramas se realizan mediante el menú
Edición o con el botón derecho del mouse.
A la hora de pegar fotogramas debe tener en cuenta lo siguiente:
• Si sobre un fotograma existente pega un fotograma clave, éste sustituye el
contenido del anterior.
• Si pega varios fotogramas consecutivos sobre un fotograma existente, éste
queda sustituido por el primer fotograma pegado y el resto queda intercalado.
Eliminar y borrar fotogramas
A la hora de eliminar fotogramas se pueden actuar de dos maneras diferentes en
función de los resultados que deseemos, veamos.
• Eliminar fotogramas implica que los fotogramas que se encuentren
seleccionados desaparecerán y todos aquellos que se encontrarán a su derecha,
se desplazarán hacia la izquierda para ocupar el lugar de los fotogramas
eliminados.
13
Aplicaciones Gráficas II- FLASH
14
•
Borrar fotogramas implica que los fotogramas que se encuentren seleccionados
desaparecerán quedando en su lugar fotogramas vacíos, pero no se producirá
ningún desplazamiento de fotogramas.
Mover Fotogramas
• Seleccionar el fotograma o fotogramas a mover.
• Arrastre con el ratón hasta situarlos donde desee. Mientras arrastre los
fotogramas aparecerán enmarcados y vea en todo momento en donde se
encuentran.
2.2 Animación Fotograma a Fotograma.
Las películas de Flash se basan en el mismo sistema que las películas de cine, es
decir, una serie de fotogramas que reproducidos uno tras otro proporcionan la
sensación de movimiento.
El método de crear animaciones fotograma a fotograma es el más adecuado para
realizar animaciones complejas del tipo de las que forman las películas de dibujos
animados, en los que cada fotograma muestra un
dibujo complejo ligeramente diferente al anterior.
Un fotograma representa el contenido de la
película en un instante de tiempo. Por tanto,
una animación no es más que una sucesión
de fotogramas. Todo esto se puede controlar
desde la Línea de Tiempo, pero no todos los
fotogramas tienen el mismo comportamiento ni se tratan igual.
Fotograma Clave (KeyFrame) : Son fotogramas con un contenido específico, se
crean, por tanto, para insertar en ellos un nuevo contenido no existente en la
película. Se identifican por tener un punto negro en el centro y se crean
presionando F6.
El procedimiento para crear una animación fotograma a fotograma es muy sencillo.
1º. Se debe crear un fotograma clave y dibujar en su interior la posición de partida
del objeto a animar.
2º. Hay que crear otro fotograma clave a continuación del anterior, lo cual provocará
que aparezca en él el mismo contenido del primero.
3º. Debe modificar el contenido de este segundo fotograma, el cual, deberá ser en la
mayoría de los casos, ligeramente diferente al anterior a no ser que desee
obtener cambios bruscos de imagen.
4º. Seguidamente hay que crear el tercer fotograma clave, el cual mostrará el
contenido del segundo y que deberá modificar también, y así sucesivamente,
hasta que se haya terminado la animación.
14
Aplicaciones Gráficas II- FLASH
15
Coloreado de los fotogramas
Por defecto, el programa muestra los fotogramas coloreados de uno u otro modo según
el tipo de animación que contengan.
• Los fotogramas que contienen gráficos estáticos aparecen coloreados en gris.
• Los fotogramas que contienen animaciones realizadas con interpolación de
forma aparecen coloreadas en verde con una flecha negra en su interior.
• Los fotogramas que contienen animaciones realizadas con interpolación de
movimiento aparecen coloreados en violeta con una flecha negra en su interior.
• Los fotogramas clave vacíos aparecen con un punto hueco en su interior.
• Los fotogramas clave con contenido aparecen con un punto negro en su interior.
2.3 Animación Interpolada.
La creación de animaciones fotograma a fotograma, resulta apropiada para la
simulación de cambios complejos entre el contenido de los fotogramas., sin embargo,
los fotograma clave ocupan mucho espacio en el archivo. Flash ofrece otra forma de
crear animación menos laboriosa, se trata de la interpolación.
La interpolación se basa en la filosofía de dónde quieres que inicie la animación y
dónde quieres que termine y flash crea automáticamente los fotogramas intermedios.
Es decir, nosotros le decimos al programa cuáles son los fotogramas inicial y final.
Flash permite crear dos tipos de interpolación: de movimiento y de forma.
2.3.1 Interpolación de movimiento.
Se aplica para crear una secuencia de animación en la que un objeto recorre un trazado
recto y cambia de color, transparencia, tamaño, posición, rotación, etc.
La interpolación de movimiento sólo es aplicable a los objetos agrupados o a los
símbolos. De todos modos, si selecciona varios objetos a la vez y crea una
interpolación con ellos, los objetos pasarán a ser un objeto único aunque no se haya
agrupado.
Procedimiento
1. Cree un nuevo documento en blanco.
2. Dibuje un objeto en el lado izquierdo de la escena. Esta será la posición en el primer
fotograma.
3. Seleccione el primer fotograma, haciendo clic sobre él y pulse el botón derecho
para que aparezca el menú contextual. Seleccione la opción Crear interpolación de
movimiento (Create motion tween). De momento no pasa nada.
15
Aplicaciones Gráficas II- FLASH
16
O TAMBIÉN, en el panel propiedades en tween, seleccione motion.
4. Seguidamente, seleccione el fotograma 30 haciendo clic sobre el y presione F6 para
crear el último fotograma clave.
5. Ahora con el fotograma 30 seleccionado, seleccione el objeto y muévalo a la
posición final de dicho objeto, que sería hasta la derecha de la escena.
6. Presione la tecla Intro.
Nota: La interpolación de movimiento sólo es aplicable a los objetos agrupados o a los
símbolos.
2.3.2 Interpolación de forma.
En principio, este tipo de interpolación nos va a permitir crear animaciones en las que
unos objetos se transforman gradualmente en otros, lo cual se denomina “morphing” en
lenguaje informático. De esto se deduce que el objeto inicial y final serán diferentes, ya
que el primero se convertirá en el segundo a lo largo de una serie de fotogramas.
Este tipo de animación no es posible con la interpolación de movimiento.
La interpolación de forma sólo será posible a partir de objetos editables, es decir, que
no estén agrupados, ni sean símbolos.
Procedimiento
1. En un documento nuevo dibuje un círculo con la herramienta óvalo y sitúelo en el
centro de la escena. Elimine su contorno.
2. Seleccione el fotograma 40 y pulse F6 para crear un fotograma clave.
3. En el fotograma 40, seleccione el círculo y bórrelo con la tecla SUPR.
4. Ahora active la herramienta Texto
, haga clic en la escena para que aparezca el
cursor del texto y escriba la palabra círculo.
5. Con la herramienta de texto haga doble clic sobre el texto recién escrito para
seleccionarlo.
6. Desde el panel de propiedades, Cambie el tamaño, color y tipo de fuente.
7. Seleccione el texto y posiciónelo al centro de la escena.
8. Con el texto seleccionado, aplique dos veces la opción Modify / Break Apart.
9. Seleccione el primer fotograma haciendo clic sobre él y aparecerá el círculo.
10. En el panel propiedades aparece la casilla Tween (animar), despliégala y elija
Shape (forma). Automáticamente los fotogramas del 1 al 40 aparecerán de color
verde con una flecha.
16
Aplicaciones Gráficas II- FLASH
17
1.
2.
3.
4.
5.
OTRO PROCEDIMIENTO:
Dibuje el contenido del primer fotograma y sepárelo.
En el panel propiedades elija interpolación de forma, de momento no sucede
nada.
Seleccione ahora el último fotograma que desea ver en la interpolación y pulse
F6 para convertirlo en fotograma clave. Verá que aparece la flechita verde.
Edite el objeto que contiene el último fotograma y listo.
Reproduzca la animación.
Dependiendo de la acción es el tipo de Interpolación a aplicar.
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
UNIDAD III: El dibujo en Flash.
OBJETIVO: Utilizar las herramientas de dibujo en base a sus propiedades y
características.
Evidentemente, no podemos comparar Flash con otros programas de dibujo vectorial
como Corel Draw, Freehand o Illustrator, sin embargo con las herramientas que nos
proporciona el programa, se pueden realizar la mayoría de los dibujos que nos
propongamos. A continuación veremos cuáles son sus herramientas.
La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo.
Veamos cuáles son las más importantes y cómo se usan:
BARRA DE HERRAMIENTAS BÁSICAS
Herramienta Selección: . Es la herramienta más usada de todas. Su uso
principal es para seleccionar objetos. permite seleccionar los bordes de los
objetos, los rellenos (con un sólo clic), los bordes (con doble clic), zonas a
nuestra elección... Además, su uso adecuado puede ahorrarnos tiempo en el
trabajo.
Herramienta Línea: Permite crear líneas rectas de un modo rápido. Las líneas se
crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde
queramos que llegue la línea recta. Una vez creada la podemos modificar sin más
que seleccionar situar el cursor encima de los extremos para estirarlos y en
cualquier otra parte cercana a la recta para curvarla.
17
Aplicaciones Gráficas II- FLASH
18
Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus
propiedades se verán en el tema siguiente.
Herramienta Óvalo: La herramienta Óvalo permite trazar círculos o elipses de
manera rápida y sencilla
Herramienta Rectángulo: Su manejo es idéntico al de la Herramienta Óvalo, tan
solo se diferencian en el tipo de objetos que crean.
Herramienta Lápiz: Es la primera Herramienta de dibujo propiamente dicho.
Permite dibujar líneas con la forma que decidamos, modificando la forma de
estas a nuestro gusto. El color que aplicará esta Herramienta se puede modificar,
bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores
que hay en la Barra de Herramientas.
Herramienta Brocha: Su funcionalidad equivale a la del lápiz, pero su trazo es
mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su
grosor y forma de trazo
Herramienta Cubo de Pintura: Permite aplicar rellenos a los objetos que
hayamos creado. Al contrario que muchos otros programas de dibujo, no permite
aplicar rellenos si la zona no está delimitada por un borde. El color que aplicará
esta Herramienta se puede modificar, bien desde el Panel Mezclador de
Colores o bien desde el subpanel Colores que hay en la Barra de
Herramientas.
Herramienta Borrador: Su funcionamiento es análogo a la Herramienta
Brocha. Pero su función es la de eliminar todo aquello que "dibuje".
Herramienta Transformación libre: Rota, inclina, escala o distorsiona un
objeto
BARRAS DE HERRAMIENTAS AVANZADAS
Herramienta Lazo: Su función es complementaria a la de la Herramienta
Flecha, pues puede seleccionar cualquier cosa, sin importar la forma, (la
Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o
cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar
rellenos u objetos (a menos que hagamos la selección a mano).
Herramienta Pluma:
Crea polígonos (y por tanto rectas, rectángulos...) de
un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque
es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic
en los lugares que queramos definir como vértices de los polígonos, lo que nos
asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la
delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica
se acaba dominando.
Al seleccionar esta Herramienta, en el Panel Opciones aparecen estas
imágenes: . Esto, es la Herramienta "Varita Mágica", tan popular en otros
programas de dibujo. Permite hacer selecciones según los colores de los objetos.
El tercer dibujo que aparece es este: permite hacer selecciones poligonales.
18
Aplicaciones Gráficas II- FLASH
19
Herramienta Pluma: Crea polígonos (y por tanto rectas, rectángulos...) de un
modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es
una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en
los lugares que queramos definir como vértices de los polígonos, lo que nos
asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la
delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica
se acaba dominando.
Herramienta Subseleccionador: Esta Herramienta complementa a la
Herramienta Pluma, ya que permite mover o ajustar los vértices que componen
los objetos creados con dicha herramienta.
Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de
un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de
dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide
con el subpanel Colores que hay en la Barra de Herramientas.)
3.1 Contornos y rellenos.
En Flash el contorno se manipula como un objeto independiente del relleno. Flash
permite dibujar de una sola vez óvalos y rectángulos con relleno y contorno, pero es
posible configurar el programa para que dibuje directamente esas figuras sin relleno y/o
contorno.
3.2 Dibujar líneas rectas.
Durante el trazado de las líneas debe tener en cuenta los siguientes detalles:
• Para trazar rectas encadenadas, trace la línea, deje de pulsar y sin mover el
cursor del sitio, vuelva a arrastrar para crear otra línea que comience en el final
de la anterior y así sucesivamente.
• Si desea encadenar una recta al final de otra creada anteriormente, asegúrese
de que la opción Ver/ Ajuste/ Ajustar a objetos está activada, acerque el cursor al
final de la línea anterior y, al comenzar a arrastrar, la nueva línea se adosará al
final de la anterior.
19
Aplicaciones Gráficas II- FLASH
20
•
Si durante el trazado mantiene la tecla Mayus pulsada, el trazado se limitará a
líneas verticales, horizontales y a 45 grados.
3.3 Dibujar Óvalos.
Para dibujar óvalos seleccione esta herramienta, y arrastre para trazarlo. Si mantiene
presionada la tecla Mayus durante el trazado, creará círculos perfectos.
3.4 Dibujar rectángulos.
Para dibujar rectángulos seleccione esta herramienta y arrastre para trazarlo. Si
mantiene presionada la tecla Mayus durante el trazado, creará cuadrados perfectos.
Se pueden crear rectángulos redondeados. Para ello, una vez seleccionada la
herramienta Rectángulo, busque el icono
en la sección opciones de la barra de
herramientas.
3.5 Herramienta lápiz y pluma.
Lápiz
Para dibujar trazos mediante la herramienta lápiz, siga estos pasos.
1. Seleccione la herramienta lápiz en la barra lateral de herramientas. El cursor
adoptará el aspecto de un lápiz.
2. Sitúe el cursor en donde desee comenzar a dibujar y arrastre para crear el
trazo. Cuando haya terminado suelte el botón del ratón.
Los trazos se dibujarán con el color y tipo de línea que estén configurados.
Durante el trazado de las líneas a mano alzada debe tener en cuenta los siguientes
detalles:
• Si mantiene presionada la tecla Mayus durante el trazado, creará líneas rectas
horizontales o verticales.
• Si desea encadenar un trazo al final de otro creado anteriormente, asegúrese de
que la opción Ver/Ajuste/Ajustar a objetos está activada, acerque el cursor al
final de la línea anterior y comience a dibujar el nuevo trazo; cuando termine la
nueva línea se unirá al final de la anterior.
Pluma
En Flash disponemos de la herramienta pluma que nos permitirá trazar rectas y curvas
del tipo Bézier. Efectivamente, para el trazado de curvas con suavidad y mayor
precisión se utiliza el método Bézier, en el cual se especifican los puntos de comienzo
y fin de la curva a la vez que se fijan unos puntos de control que establecen la dirección
y forma de la curva. Mediante la herramienta sub-selección será posible modificar
cualquier trazado no deseado. Las curvas Bézier se trazan siempre igual; sin embargo,
20
Aplicaciones Gráficas II- FLASH
21
dependiendo de lo que haga con el ratón pueden observarse dos métodos para
realizar el trazado: arrastrando el ratón desde el punto inicial o bien desde el punto final
de la curva. Durante el trazado de la curva Bézier se puede alternar indistintamente
entre uno y otro método.
Trazado de curvas Bézier
Para trazar curvas Bézier arrastrando al final de la curva siga estos pasos.
1. Seleccione la herramienta pluma. El cursor tomará la forma de una plumilla.
2. Sitúe el cursor sobre el punto donde desea comenzar la curva, haga clic con el
ratón y suelte. Aparecerá un pequeño círculo.
3. Desplace ahora el cursor dos o tres centímetros en cualquier dirección para
situarlo en el lugar donde quedará el punto final de la curva.
4. Mantenga pulsado el ratón y muévalo en varias direcciones. En ese momento
comenzará a aparecer una curva a la vez que una línea recta (línea de control)
que se puede rotar en cualquier ángulo y alargar todo lo que se quiera.
5. Una vez conseguido el aspecto de curva deseada, pulse la tecla Esc para
desactivar la curva que acaba de dibujar.
3.6 Selección de objetos.
Los objetos así considerados tienen 2 partes fundamentales:
El Borde: Consiste en una delgada línea que separa el objeto del exterior del
escenario.
Puede existir o no, según nos convenga. Cuando creamos un objeto, el borde se
crea siempre y su color será el indicado en el Color de Trazo (dentro del Panel
Mezclador de Colores). Si queremos dibujar creando Bordes deberemos emplear
las Herramientas Lápiz, Línea o Pluma y si queremos que nuestro dibujo no tenga
borde, bastará con seleccionar el borde y suprimirlo (ver siguiente punto).
El Relleno: El relleno no es más que el propio objeto sin borde. Es, por tanto, la
parte interna del objeto. Su existencia también es arbitraria, ya que podemos crear un
objeto cuyo color de relleno sea transparente, como ya se vió en el tema de Dibujar,
y por tanto, parecerá que dicho objeto no tiene relleno, aunque en realidad sí que
exista pero sea de color transparente. Para dibujar Rellenos (sin borde) podemos
usar herramientas tales como la Brocha o el Cubo de Pintura
21
Aplicaciones Gráficas II- FLASH
22
Seleccionar
Para poder trabajar con objetos, es fundamental saber seleccionar la parte del
objeto que queramos modificar (mover, girar, cambiar de color...). Podremos
observar que las partes de un objeto seleccionadas toman una apariencia con textura
para indicar que están seleccionadas.
Objeto SIN seleccionar
Objeto
con
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.
Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno.
Seleccionar todos los bordes (o líneas) de un mismo color que estén en contacto: Hacer doble
clic sobre una de las líneas que tenga el color que pretendamos seleccionar.
Seleccionar un Símbolo, un texto, o un grupo: Clic en el Símbolo, en el texto o en el grupo. Estos
tipos de objetos mostrarán un borde de color azul (por defecto) al estar seleccionados.
Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT mientras seleccionamos los
objetos que queramos.
Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos la
Herramienta Flecha. Haremos clic en una parte del escenario y arrastraremos el cursor hasta
delimitar el área que contenga los objetos que queremos seleccionar. Si esta área corta algún objeto,
sólo quedará seleccionada la parte del objeto que esté dentro del área que hemos delimitado. Si
quisiéramos incluir dicho objeto, bastaría con usar la tecla SHIFT y seleccionar la parte del objeto que
falta por seleccionar.
Este modo de seleccionar objetos permite seleccionar muchos objetos rápidamente, además de
permitirnos seleccionar determinadas zonas de los objetos, para cortarlas, pegarlas ...
Además de la Herramienta Flecha, también podemos usar la Herramienta Lazo, más útil aún si
cabe. Nos permite seleccionar cualquier zona de cualquier forma (la forma la determinamos nosotros)
del objeto que sea. Al contrario que la Herramienta Flecha, las áreas seleccionadas no tienen porque
ser rectángulares.
Seleccionar a partir de la Línea de Tiempo: Si seleccionamos un determinado fotograma en la
línea de tiempo, se seleccionan automáticamente todos los objetos que estén en dicho fotograma.
Esto es útil para modificar de un modo rápido todos los elementos del fotograma.
Seleccionar Todo: La forma más natural de seleccionar todo, consiste en hacer clic en el menú
Editar -> Seleccionar Todo.
3.7 Agrupar y desagrupar.
Un Grupo no es más que un conjunto de objetos. Si bien no cualquier conjunto de
objetos forman un grupo, ya que para crear un grupo, debemos indicarle a Flash que
así lo queremos. Para ello, basta seleccionar los objetos que queremos que formen
parte de un grupo y después hacer clic en el Menú Modificar -> Agrupar.
22
Aplicaciones Gráficas II- FLASH
23
Tras hacer esto observaremos que desaparecen las texturas que indicaban que los
objetos estaban seleccionados y observamos que el grupo pasa a ser un "todo", ya que
resulta imposible seleccionar a uno de sus miembros sin que se seleccionen a su vez
los demás. Además, aparece el rectángulo azul (por defecto) que rodea al grupo,
definiéndolo como tal.
Objetos desagrupados
Objeto agrupado
3.8 Interacción entre objetos.
Cuando quiera realizar objetos complejos, deberá combinar estos elementos para
obtener resultados más elaborados, aunque en tal caso, deberá comprender cómo
interactúan entre sí los objetos de Flash cuando se encuentran en la misma capa o en
capas diferentes.
Un objeto dibujado sobre otro en la misma capa afecta directamente al objeto que
queda por debajo de tal manera que, en función del tipo de objeto (línea o forma) que
se encuentre por encima o por debajo, el resultado será uno u otro.
Cuando una línea pasa por encima de otra línea
Cuando una línea pasa por encima de otra línea, las líneas quedan segmentadas entre
sí, es decir, la línea que esté por debajo queda segmentada por efecto de la que se ha
dibujado encima y viceversa. Los segmentos pueden ser seleccionados
individualmente.
Cuando un relleno pasa por encima de una línea.
En este caso, sucede casi lo mismo que en lo anterior. La línea, al encontrarse por
debajo queda segmentada por el trazo superior. Igualmente, cada segmento de la línea
puede seleccionarse por separado. La única diferencia es que aquí el relleno no resulta
segmentado por la línea.
Cuando una línea pasa por encima de un relleno.
En este caso el resultado es algo diferente. Cuando una línea pasa por encima de un
relleno, el relleno es segmentado en los puntos de cruce de la línea, pero el relleno
resulta también segmentado por la parte de línea que lo atraviesa.
23
Aplicaciones Gráficas II- FLASH
24
3.9 Alinear objetos.
Ahora que ya sabemos seleccionar los objetos o las
partes de estos que consideremos oportunas, veamos
cómo colocarlos en el Escenario.
Para colocarlos de un modo preciso (por no decir
exacto), Flash pone a nuestra disposición el Panel
Alineamiento. Este Panel lo podemos encontrar en el
Menú Ventana -> Alinear. Así funciona:
El Panel Alineamiento permite colocar los objetos tal y cómo le indiquemos.
Antes de ver las posibilidades, debemos hacer hincapié en la opción En
Escena. Esta opción nos permite decir a Flash que todas las posiciones que
indiquemos para nuestros objetos tomen como referencia el escenario.
Si esta opción no está seleccionada, los objetos toman como referencia al conjunto de
objetos en el que se encuentran, y se colocan en función de ellos. Lo más habitual es
seleccionar En Escena , para que los objetos se coloquen según los límites de la
película, en el centro del fotograma etc...
Conozcamos un poco mejor el Panel Alineamiento y sus posibilidades:
Alineamiento:
Sitúa los objetos en una determinada posición del
fotograma (si está seleccionado En Escena). Las distintas opciones afectan a todos los
elementos seleccionados y se emplean muy a menudo para situar los objetos en
determinados sitios predefinidos. Por ejemplo: Si quisieramos situar un objeto en la
esquina inferior izquierda, bastaría pulsar el primer y el sexto botón consecutivamente.
Distribuir:
Sitúa los objetos en el escenario en función de unos
ejes imaginarios que pasan por cada uno de ellos, de modo que la distribución de los
mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botón
de la izquierda. Cada uno de los 2 cuadrados se situará en un extremo de la película
(uno arriba y otro abajo).
Coincidir Tamaño:
Hace coincidir los tamaños de los objetos. Si está activo
"En Escena" estirará los objetos hasta que coincidan con el ancho y el largo de la
película. Si no está activo, la referencia será el resto de objetos. Por ejemplo, si
tenemos 2 cuadrados distintos y la opción "En Escena" no está activada, al hacer clic
en el primer botón de "Coincidir Tamaño", el cuadrado más estrecho pasará a tener la
anchura del cuadrado más ancho. Si "En Escena" hubiera estado activo ambos
cuadrados hubieran pasado a tener el ancho del fotograma.
Espacio:
24
Espacia los objetos de un modo uniforme.
Aplicaciones Gráficas II- FLASH
25
3.10 Transformar objetos.
La transformación de los objetos implica diferentes acciones que se deben de realizar,
por ejemplo, tamaño, rotación, inclinación, reflejo, etc.
Rotación de objetos
Al rotar un objeto, éste gira sobre su punto de transformación. El punto de
transformación se alinea con el punto de registro, que se establece de forma
predeterminada en el centro del objeto; sin embargo, es posible mover el punto
arrastrándolo.
Puede rotar un objeto con el comando Rotar, arrastrándolo con la herramienta
Transformación libre o especificando un ángulo en el panel Transformar. Al rotar un
objeto arrastrándolo, también lo puede sesgar y escalar. Al rotar un objeto con el panel
Transformar, es posible escalarlo al mismo tiempo.
Herramienta transformación libre.
Esta herramienta
nos permite realizar todo tipo de transformaciones en los objetos,
grupos, instancias o bloques de texto libremente. También se pueden realizar
transformaciones individuales o combinar varias transformaciones, como el movimiento,
la rotación, la escala, la inclinación y la distorsión. Cuando crea un objeto y lo
selecciona con esta herramienta, aparece el objeto de la siguiente manera.
Distorsión de objetos
La herramienta transformación libre le permitirá distorsionar objetos gráficos. Para ello
siga estos pasos.
1. Seleccione el objeto a distorsionar.
2. En la barra de herramientas seleccione transformación libre
opción Modificar / Transformar / Distorsionar.
3. Seleccione alguno de los vértices a distorsionar.
25
Aplicaciones Gráficas II- FLASH
y seleccione la
26
UNIDAD IV: Texto.
OBJETIVO: Aplicar la herramienta texto de acuerdo a sus atributos y características.
4.1 Trabajar con texto.
La herramienta Texto
del cuadro de herramientas le permitirá insertar y editar
texto en la escena. En principio el texto introducido es tratado como un grupo y si
desea tratarlo como si fueran formas independientes, se deberá aplicar la opción
Modificar /Separar (break apart), como ya se vio.
Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación,
y por tanto, también todo aquello relativo a los textos. Sin embargo, Flash fue concebido
para crear animaciones gráficas, de modo que tratará cualquier texto como si de un
objeto más se tratase, listo para ser animado a nuestro gusto. Esto nos permitirá
posteriormente animar textos y crear espectaculares animaciones con muy poco
esfuerzo. Flash distingue entre 3 tipos de texto, texto estático o normal, texto
dinámico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo),
también se puede crear texto que soporte formato HTML, etc.
4.2 Propiedades de los Textos.
Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente
en el punto del escenario en el que queramos empezar a escribir.
El Panel Propiedades contiene las principales propiedades de todos los objetos que
empleemos durante nuestra película, de modo que si seleccionamos un texto,
podremos ver en él todo lo que nos hace falta conocer sobre nuestro texto. Si tenemos
experiencia usando Flash 5, notaremos que todas las propiedades que antes se
encontraban en los Paneles Carácter y Párrafo, se encuentran agrupadas ahora en el
Panel Propiedades.
26
Aplicaciones Gráficas II- FLASH
27
Veamos a fondo el Panel Propiedades:
Fuente:
Desde aquí, al igual que en los editores de texto
más comunes podemos seleccionar el tipo de letra o "fuente" que más nos guste.
Altura:
Determina el espaciado entre los caracteres. Útil cuando la
tipografía que empleamos muestra las letras muy juntas o para dar efectos concretos
al texto.
Ajuste automático entre caracteres:
Activar esta casilla provoca
que la separación entre caracteres se realice de modo automático.
Posición:
Nos permite convertir nuestro texto en subíndices o en
superídices (o dejarlo normal).
URL:
Si queremos que al pulsar sobre
nuestro texto, el usuario vaya a una dirección web, nada más fácil que escribirla ahí.
Flash la asociará al texto que estés escribiendo en ese momento.
Tipo de Línea:
Si el texto que vamos a incluir es dinámico (de lo
contrario aparece sin activar), esta opción nos permite determinar cómo queremos
que aparezcan las líneas (línea única, multilínea o multilínea sin ajuste).
Configuración:
Son las clásicas opciones que permiten convertir
el texto en Negrita (B), Cursiva (I), cambiar el color del texto y el tamaño.
Otras Propiedades:
Dado que Flash trata los textos como objetos,
éstos también tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro
gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo,
pues las tipografías son una parte muy importante y deben respetarse.
Un Párrafo no es más que un conjunto de caracteres con propiedades comunes a
todos ellos. Estos párrafos admiten ciertas opciones que nos permiten trabajar con
bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para
trabajar con párrafos (entre otras).
A la Izquierda:
Todas las líneas empezarán tan a la izquierda como sea
posible (dentro del recuadro de texto que hayamos definido).
Centrar:
del Párrafo.
Las líneas se distribuyen a la derecha y a la izquierda del punto medio
A la derecha:
27
Todas las líneas empezarán tan a la derecha como sea posible
Aplicaciones Gráficas II- FLASH
28
(dentro del recuadro de texto que hayamos definido).
Justificado:
El texto se ensancha si es necesario con tal de que no quede
"dentado" por ninguno de sus límites.
El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho),
los sangrados de párrafo y el espacio interlineal.
Tipos de Textos
Como ya hemos comentado, Flash distingue entre diversos tipos de textos y les da un
tratamiento especial, según el tipo que sean.
Todos los tipos de textos responden a las propiedades comentadas en los puntos
anteriores, y es en el Tipo de texto en lo que se diferencian. El tipo de texto se puede
modificar desde el Panel Propiedades sin más que haciendo clic sobre la pestaña
"Tipo de texto":
Texto Estático
El Texto Estático se caracteriza por no presentar ningún cambio a lo largo de la
animación. Es importante que no confundamos la palabra "estático" con que el texto
no se mueva o malinterpretemos la frase "es el texto que no presenta cambios a lo
largo de la animación".
Lo que queremos decir es que no cambia el contenido del recuadro de texto, es
decir, que el texto puede estar animado (girar, cambiar de color...) y sin embargo ser
estático. Así, un recuadro de texto en el que pone "Aprende Flash MX" durante toda la
película, es estático, aunque dicho texto cambie de posición, forma o color. Sin
embargo, si en ese mismo recuadro de texto pasa a poner "Con este Curso", este
recuadro de texto NO es estático. Se insistirá en este punto en los ejercicios de
evaluación.
Los textos estáticos sólo tienen 2 propiedades extras:
Usar Fuentes del Dispositivo: Esta opción permite que la película Flash emplee las
Fuentes que tenga instaladas el usuario que ve la película en su ordenador. Si dicho
usuario dispone de las fuentes que hemos utilizado en la película, la verá exactamente
como queremos que la vea, pero si no las tiene, Flash empleará la fuente que más se
le parezca. Esto muchas veces lleva a que el resultado final (el que ve el usuario) no
se parezca al que pretendíamos, por lo que suele ser conveniente mantener esta
opción sin seleccionar, aunque esto conlleve un mayor tamaño de la película final.
Seleccionable: Con esta opción activada el usuario podrá seleccionar los textos que
aparezcan en la película (cortarlos, copiarlos...) Actívala si lo crees conveniente.
28
Aplicaciones Gráficas II- FLASH
29
Texto Dinámico
El Texto Dinámico en contraposición al estático sí que puede cambiar su contenido
(además de estar animado). Su uso es bastante más complejo que el del Texto
Estático, ya que cada recuadro de texto Dinámico puede ser una variable modificable
mediante ActionScript, esto quiere decir que los valores y propiedades de este tipo de
textos se pueden modificar mediante programación, lo que nos saca del objetivo de
este curso. Un uso común que suelen tener es el de representar los textos introducidos
mediante Textos de Entrada (ver siguiente punto).
Tienen multitud de propiedades, accesibles desde el Panel Propiedades, se puede
decidir el número de líneas que van a tener, se puede introducir texto HTML, se puede
añadir fácilmente un borde al texto o dar nombre a la variable que represente al texto
Dinámico.
Texto de Entrada
El Texto de Entrada tiene básicamente las mismas propiedades que el Texto
Dinámico, junto con algunas propias de un tipo de texto orientado a la introducción de
datos por parte de usuario, como por ejemplo el número máximo de líneas que puede
introducir en ese campo de texto o si queremos que lo que el usuario escriba en dicho
campo aparezca como asteriscos (para las contraseñas).
Evidentemente este tipo de texto se reflejará en nuestra película como un recuadro de
texto SIN contenido, ya que lo deberá introducir el usuario.
Como hemos mencionado antes, este tipo de texto se puede combinar con el Texto
Dinámico.
Flash permite crear animaciones de texto tan interactivas como las que pueden crear
con imágenes (ya hemos visto lo sencillo que es convertir un texto en un enlace a
otra página web). Aún así, crear animaciones con textos, que sobrepasen a las que
Flash incorpora por defecto (colores, transparencias, brillos, rotaciones, movimientos
o combinaciones de estos) puede resultar un trabajo de muchísimas horas y mucha
paciencia. Los resultados son increíbles, pero puede resultar recomendable en estos
casos usar algunos programas diseñados con este objetivo. Entre otros destacan el
Swish, el FlaX o el MiX-Fx, con ellos podrás crear efectos de texto asombrosos en
pocos minutos, aunque no podrás gozar del entorno de Flash MX ni podrás emplear
el resto de herramientas de que dispone Macromedia Flash MX.
29
Aplicaciones Gráficas II- FLASH
30
UNIDAD V: Capas.
OBJETIVO: Aplicar las capas de acuerdo a sus propiedades para la creación de
animación en las películas.
5.1 Introducción.
Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados.
Y todos hemos visto cómo colocan una hoja semitransparente con dibujos sobre otras
y la superposición de todas forman el dibujo final. ¿Por qué no dibujan todo en una
misma hoja? ¿Por qué trabajan con varios niveles y con varios dibujos si van a acabar
todos juntos?
Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las
Capas que utiliza Flash. Cada capa es, por tanto, un nivel en el que podemos dibujar,
insertar sonidos, textos... con INDEPENDENCIA del resto de capas. Hay que tener en
cuenta que todas las capas comparten la misma Línea de Tiempos y por tanto, sus
distintos fotogramas se reproducirán simultáneamente.
Una Capa se puede definir como una película independiente de un único nivel.
La creación de una película de Flash con varias capas podría compararse a la
proyección de varias películas de cine a la vez y sobre la misma pantalla. Agregando
capas podremos gozar de las siguientes ventajas:
•
•
•
•
•
•
Cada capa podrá contener aquellos objetos que deseemos, con la ventaja de
que los objetos de una capa no influirán sobre los de otra. De este modo, no
tendrá que preocuparse por agrupar los objetos para que no interaccionen entre
sí.
Podremos activar la visualización de la capa o capas que deseemos con objeto
de visualizar únicamente aquello que deseemos editar y evitar confusiones con
otros elementos.
Podremos organizar nuestro trabajo colocando en cada capa una animación,
gráfico, sonido o elemento diferente.
Podremos organizar las capas en carpetas.
Podremos crear capas especiales de guía que le permitirán hacer que los
objetos se muevan trazando un camino determinado.
Podremos crear capas especiales de máscara que le permitirán mostrar y
ocultar objetos selectivamente.
30
Aplicaciones Gráficas II- FLASH
31
5.2 Elementos de la ventana con las capas.
La siguiente imagen muestra un ejemplo de una película con 4 capas, cada capa tiene
un nombre y se identifican además con un color diferente; así mismo, se señalan los
diferentes elementos que puede tener una capa, los cuales a continuación se
describen.
Inserta Capa: Cuando se inicia Flash, aparecerá una capa por defecto denominada
Capa 1, si desea añadir nuevas capas en la escena, haga alguna de estas cosas:
• En la parte inferior de la ventana de capa, haga clic en insertar Capa.
• Elija la opción Insertar/ línea del tiempo / Capa.
• Clic con el botón derecho sobre una capa y elija la opción Insertar capa en el
menú contextual que aparecerá.
Seleccionar Capas: Para seleccionar una capa individualmente solo haga clic sobre la
capa, al mismo tiempo aparecerá un icono de lápiz
indicando que es la capa activa.
También puede seleccionar varias capas a la vez. El procedimiento puede variar:
• Para seleccionar capas consecutivas haga clic sobre la capa inferior del grupo
de capas que desee seleccionar y manteniendo la tecla Mayus, haga clic en la
capa superior que desee. Éstas y todas las capas intermedias quedarán
seleccionadas a la vez. También puede hacerlo al revés.
• Para seleccionar capas salteadas, haga clic sobre la capa que desee, mantenga
presionada la tecla Ctrl y haga clic en la siguiente capa.
Visualización:
Se activa o desactiva la visualización de acuerdo a su necesidad.
Para que se vea o no el contenido de una capa en pantalla. Esto permite que pueda
desaparecer parte o todos los elementos de la pantalla para editar o trabajar en una
capa determinada.
31
Aplicaciones Gráficas II- FLASH
32
Bloqueo: Si bloquea una capa, los objetos que contenga seguirán apareciendo en la
escena pero no podrán ser seleccionados ni editados. Para bloquear una capa
únicamente haga clic sobre el símbolo
de la columna
correspondiente a la
capa que desee bloquear. Para desbloquear una capa vuelve a hacer clic en el mismo
lugar. Si hace clic con el botón derecho sobre el nombre de una capa, aparecerá un
menú contextual en el que si selecciona la opción Bloquear otros podrá bloquear todas
las capas menos la capa sobre la que haya hecho clic.
Eliminar Capa: Para eliminar una capa, haga clic en el icono
de la sección de
capas. El programa eliminará la capa y sus correspondientes fotogramas en la línea del
tiempo. También puede hacerlo haciendo clic con el botón derecho sobre una capa y
eligiendo Eliminar Capa. Si desea eliminar varias capas a la vez, selecciónelas según
se explicó anteriormente.
Visualiza contornos: Ver una capa como contorno implica que todos los objetos que
tenga aparecerán mostrando únicamente su silueta. Eso puede resultar útil para ver
objetos de capas inferiores que permanecen ocultos por objetos de capas superiores o
bien, para trabajar más cómodamente prescindiendo de los rellenos de los objetos.
Insertar Capa Guía: Es un tipo de capa denominada especial que más adelante se
detallará.
Insertar Carpeta para capas: Permite crear carpetas para agrupar y ordenar las
capas. Esto facilitará el trabajo en la organización que se tenga con las capas. Para
crear la carpeta de capas, haga clic en el icono de la ventana o Menú Insertar / Línea
del tiempo / Carpeta de capas.
Propiedades de Capa: Si hacemos doble clic en el icono
, podremos acceder a un
panel con las propiedades de la capa en la que hayamos hecho clic. Podremos
modificar todas las opciones que hemos comentado anteriormente y alguna más de
menor importancia. La siguiente ventana muestra las opciones de las propiedades de
las capas.
32
Aplicaciones Gráficas II- FLASH
33
OBSERVACIONES:
• El tamaño del archivo no depende del número de capas que tenga definidas y
puede crear tantas como desee.
• El programa representa cada capa en una línea horizontal de la ventana de
tiempo.
• Al iniciar la reproducción de la película el cursor irá avanzando y reproducirá a la
vez todo lo que contengan las diferentes capas.
5.3 Distribuir objetos en capas.
Flash permite distribuir automáticamente en capas individuales objetos que se
encuentran en una misma capa.
1. Seleccione los elementos de una capa que desea distribuir en capas
individuales.
2. Ejecute la orden Modificar / Línea del tiempo / Distribuir en capas y cada objeto
se ubicará en una capa individual.
Esta utilidad es especialmente práctica para crear animaciones de letras de texto.
Así, por ejemplo, si desea ubicar las letras de un texto en capas independientes siga
estos pasos.
1. Escriba el texto en la escena.
2. Ahora seleccione la opción Modificar / Separar y verá cómo cada letra pasa a
ocupar una capa diferente cuyo nombre coincide con el de la letra
correspondiente.
33
Aplicaciones Gráficas II- FLASH
34
5.4 Tipos de Capas
En términos generales, Flash identifica 5 tipos diferentes de Capas: Normales, Guía,
Máscara, Guiadas, Enmascaradas.
Capas Normales
: Son las capas por defecto de Flash y tienen todas las
propiedades descritas en los puntos anteriores. Son las más usadas y se emplean
para todo, colocar objetos, sonidos, acciones, ayudas...
Capas Guía
: Son capas especiales de contenido específico. Se emplean en las
animaciones de movimiento de objetos y su único fin es marcar la trayectoria que debe
seguir dicho objeto. Debido a que su misión es representar la trayectoria de un objeto
animado, su contenido suele ser una línea (recta, curva o con cualquier forma).
Las capas Guía o de Guía se utilizan como referencia para facilitar la ubicación de
objetos en el escenario. Así, por ejemplo, puede dibujar una forma irregular para usarla
luego como guía para ubicar los elementos con mayor precisión. Flash no incluirá las
capas guía en la película final, es decir, nada de lo que aparezca en la capa guía se
verá en la película de Flash.
Capas Guiadas: (Guided Layers) : Cuando definimos una capa como capa guía, es
necesario definir después una capa guiada. Esto es, una capa que quedará afectada
por la guía definida en la Capa guía.
Capas Máscara
: Estas capas se pueden ver como plantillas que tapan a las capas
enmascaradas (las veremos enseguida). El funcionamiento de estas capas es algo
complejo (tampoco demasiado) por lo que sugiero checar el procedimiento para su
creación.
Capas Enmascaradas
: Estas capas funcionan conjuntamente con las Capas de
tipo máscara. Al igual que las capas guía y las capas guiadas deben ir asociadas unas
a otras para que su efecto sea correcto.
5.5 Capas Guía.
El uso de Capas Guía está íntimamente ligado a la animación por interpolación, es
decir, aquel tipo de animación en el que se definen los fotogramas primero y último y
los fotogramas intermedios los calcula el programa. Efectivamente estamos creando
interpolación de movimiento, en lugar de que se desplace de manera recta, lo hace
siguiendo un trayecto dibujado. De este modo podemos conseguir que los objetos se
muevan y transformen siguiendo trayectorias predefinidas a nuestra voluntad.
Procedimiento general para crear capas guía.
De manera general indicaremos el procedimiento para crear capas Guía.
• Crear el objeto y agruparlo.
• Crear la capa de guía de movimiento.
34
Aplicaciones Gráficas II- FLASH
35
•
•
•
•
•
•
•
Dibujar en la capa de guía de movimiento el trazado que se desea que siga el
objeto.
Crear los fotogramas clave para el final de la animación en cada capa.
Activar el encaje de objetos.
Seleccionar el último fotograma de la capa del objeto y arrastrar el objeto al
punto final del trazado.
Seleccionar el primer fotograma de la capa del objeto y arrastrar el objeto al
punto inicial del trazado.
Crear la interpolación de movimiento.
Reproducir la película.
Nota: En las prácticas se creará el procedimiento detallado para este tipo de capa.
5.6 Capas Máscara.
Una capa de máscara también es un tipo especial de capa que permite mostrar y
ocultar a voluntad elementos que se encuentren en capas ubicadas por detrás de la
capa de máscara. Así pues, una capa de máscara que contenga, por ejemplo , un
círculo relleno, se convierte en una especie de “agujero” por lo que se va a ver lo que
haya por debajo. Por este mismo motivo, todas las zonas de la capa de máscara que no
tengan ninguna zona dibujada, ocultarán objetos que se encuentren en las capas
subyacentes.
Procedimiento a seguir para crear capas máscara.
• Dibujar lo que se desee enmascarar en la capa normal por defecto de la escena.
• Crear una capa máscara.
• Dibujar en la capa de máscara el objeto que va a servir de máscara.
• Activar el efecto de máscara.
Nota: En las prácticas se detallará el procedimiento anteriormente mencionado.
UNIDAD VI: Símbolos y animación interactiva.
Objetivo: Crear símbolos e instancias que faciliten la elaboración de gráficos en flash y
utilizarlos a través de la biblioteca de símbolos para generar animaciones más
interactivas.
6.1 Símbolos e instancias.
Existen dibujos (gráficos) complejos que a lo largo de nuestro trabajo con Flash
quisiéramos guardarlos para poder utilizarlos en otras animaciones, así pues, lo ideal
es ir almacenando de manera ordenada y correctamente clasificada, esto se hace a
través de crear símbolos y guardarlos en una biblioteca. Así mismo, permitirá utilizarlos
repetidamente en una misma película e incluso en diferentes películas.
35
Aplicaciones Gráficas II- FLASH
36
Símbolos: Son elementos que pueden utilizarse las veces que desee. Siempre se
encuentran almacenados en las bibliotecas. Cualquier objeto dibujado directamente en
Flash o importado puede convertirse en un símbolo con el objetivo de utilizarlo
posteriormente. Incluso se podrán crear propias bibliotecas de símbolos a partir de
bibliotecas de otras películas.
Instancia: Una instancia es la representación de un símbolo en la escena. Cada vez
que tome o utilice un símbolo de la biblioteca y lo lleve a la escena, lo que en realidad
estará llevando es una instancia de ese símbolo.
Ventajas de utilizar símbolos:
1. Comodidad de tener todos los símbolos agrupados y clasificados en una biblioteca.
2. Con el uso de símbolos evita que el tamaño de la película sea grande para su carga
en el internet, ya que si usa Copiar y pegar para crear copias de gráficos, generará
archivos (películas) con mayor capacidad de bytes. Recuerde que cuando usa
símbolos, realmente usa instancias del símbolo e internamente el programa solo
hace referencia al símbolo.
3. Otra gran ventaja es que si hace algún cambio en el símbolo, todas sus instancias
reflejarán el cambio, lo cual permitirá variar fácilmente el aspecto en la escena de
todas las representaciones de un determinado símbolo.
6.2 Tipos de símbolos.
Flash permite crear tres tipos de símbolos: Gráficos, Botones y Clips de películas. En
un principio, lo normal es pensar que un símbolo gráfico será aquel que provenga de un
gráfico, un símbolo de botón será aquel que contenga un botón y un símbolo de clip
será el que contenga un clip de película. Sin embargo, Flash nos permite, convertir un
símbolo gráfico en botón, convertir un símbolo gráfico en clip o un símbolo de película
en gráfico. Esto es porque Flash al momento de trabajar con símbolos no toma en
cuenta su contenido, sino el comportamiento del mismo.
Comportamiento de los símbolos:
Símbolo gráfico: Tienen una línea de tiempo propia que va sincronizada con la línea
del tiempo principal. De este modo si creamos un símbolo gráfico a partir de, por
ejemplo, un gráfico estático que hayamos dibujado, el símbolo ocupará únicamente un
fotograma. Si añadimos a la escena varios símbolos gráficos estáticos de un fotograma
cada uno en una capa, al reproducir la película, aparecerán a la vez todos los objetos y
permanecerán en pantalla porque la película empieza y termina en el primer fotograma.
36
Aplicaciones Gráficas II- FLASH
37
Símbolo botón:
Es un tipo especial de símbolo que le permitirá añadir interactividad a sus películas. Los
botones pueden ser gráficos estáticos o dinámicos y pueden incorporar sonido,
acciones, etc.
Cuando se va a crear un nuevo botón Flash abre una pantalla específica mostrando la
línea del tiempo botón. Cada botón tiene su propia línea del tiempo independiente, la
cual contiene únicamente cuatro fotogramas.
• El primero se denomina Reposo y contendrá el aspecto del botón cuando no
tenga encima el cursor del ratón.
• El segundo fotograma se denomina Sobre y contendrá el aspecto del botón
cuando tenga encima el cursor del ratón.
• El tercer fotograma se denomina Presionado y contendrá el aspecto del botón
cuando se haga clic sobre él con el cursor del ratón.
• Finalmente, el cuarto fotograma se denomina Zona activa y nos permitirá definir
el área activa que deberá considerarse para que el clic del cursor sea efectivo.
En cualquier caso, cuando arrastremos un botón desde la biblioteca a la escena,
únicamente ocupará un fotograma.
Los botones tienen su propia línea de tiempos. Esta es independiente pero, sin
embargo, está formada únicamente por cuatro fotogramas, uno para cada estado
posible del botón. Observe la imagen.
Símbolo clip de película:
Es aquel que contiene una animación con más de un fotograma pero con una línea del
tiempo independiente de la película principal. Eso quiere decir que un símbolo de clip
de película siempre se reproducirá de principio a fin y de forma independiente a la línea
del tiempo de la escena principal. Así pues, si arrastramos un clip de película desde la
biblioteca a la escena, ocupará únicamente un fotograma pero éste contendrá la
totalidad de fotogramas del clip y la animación no se detendrá aunque se asigne una
acción de Stop a la película principal.
37
Aplicaciones Gráficas II- FLASH
38
6.3 Propiedades de los símbolos.
El panel de propiedades indica los siguientes elementos cuando se trabaja con
símbolos.
6.4 Cómo crear símbolos.
Hay varias formas para crear símbolos. Todo depende de si partimos de un gráfico o de
la nada, o incluso de otro símbolo.
Si ha dibujado un gráfico en Flash y desea guardarlo para posteriores usos,
selecciónelo y haga lo siguiente:
1. Seleccione la opción Modificar / Convertir en símbolo o pulse directamente F8.
En cualquier caso se abrirá una ventana en la que deberá marcar la casilla
Gráfico y asignar un nombre para el nuevo símbolo.
2. Acepte y el nuevo símbolo se almacenará en la biblioteca mostrando el icono de
a la izquierda de su nombre. El gráfico original permanecerá en la escena
pero ahora ya no será el gráfico en sí sino una instancia o representación del
símbolo contenido en la biblioteca.
Nota: También puede crear un símbolo, seleccionando el objeto y haciendo clic con el
botón derecho.
Creación de un Símbolo Botón
En la creación de un botón podemos considerar dos fases. En la primera vamos a
convertir nuestro objeto a símbolo de tipo botón y posteriormente veremos cómo
completarlo internamente, lo que nos ayudará a entender mejor dicha estructura.
Primeramente crearemos el objeto que representará el aspecto por defecto de nuestro
botón con las herramientas que nos ofrece Flash MX.
Seleccionaremos el objeto y accederemos al menú Insertar-> Convertir en Símbolo,
le daremos el comportamiento Botón y asignaremos un nombre a nuestro nuevo
símbolo.
38
Aplicaciones Gráficas II- FLASH
39
De esta forma ya tenemos transformado el objeto para que se comporte como un
botón. Ahora lo completaremos internamente.
Para determinar cómo debe reaccionar el botón en función de las acciones del ratón,
lo editaremos haciendo clic con el botón derecho del ratón sobre nuestro nuevo botón
y seleccionando la opción Editar.
Cuando tengamos delante la línea de tiempos del botón (observa que tiene el aspecto
que hemos mostrado anteriormente), seleccionaremos cada uno de los fotogramas
(sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma
clave en cada uno de ellos.
Ahora ya podemos modificar el aspecto inicial del botón para cada posición del cursor
y marcar el área de acción del botón (fotograma Hit) en la que simplemente podremos
dejar la misma figura que la inicial (en este caso sólo es importante la forma del
objeto, no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de
Flash una nueva figura, en cuya superficie "se sentirá aludido" nuestro botón.
6.5 Biblioteca de símbolos.
Como ya se ha visto a la biblioteca de símbolos van a parar todos los símbolos que se
vayan creando. Sin embargo, la biblioteca permite almacenar otros tipos de elementos
tales como imágenes bitmap importadas, sonidos, vídeos, etc. Todos estos elementos
se pueden clasificar y organizar en carpetas para que puedan ser localizados
fácilmente. Cada película dispone de una biblioteca específica en donde se
almacenarán todos los elementos que integren esa película. No obstante, es
perfectamente posible importar elementos.
39
Aplicaciones Gráficas II- FLASH
40
Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un
icono que representa el tipo de símbolo que representan:
Clip
Botón
Gráfico
Tipos de Bibliotecas
Biblioteca de la película
Aquí es donde se almacenan todos los símbolos, bitmaps y sonidos correspondientes a
la película activa. Para abrirla pulse F11, CTRL + L o Window /Library.
Bibliotecas prefijadas
También conocidas como bibliotecas comunes, vienen implementadas en Flash y
contienen botones, clases y elementos interactivos que puede utilizar.
Elementos de la ventana de biblioteca
Utilizar elementos de la biblioteca de otra película.
• Seleccione Archivo / Importar a la librería (File / Import to library).
Propiedades.-Permite cambiar el comportamiento del símbolo seleccionado, su
nombre o entrar a editarlo individualmente. También puede entrar a la opción Properties
del menú.
40
Aplicaciones Gráficas II- FLASH
41
6.6 Los fotogramas.
En Secciones anteriores se habló de los fotogramas y los tipos que existen, en este
apartado, se mencionará un poco más de la configuración y manipulación de los
fotogramas para la creación de Gif´s animados.
Cambiar el tamaño de los fotogramas
Por defecto los fotogramas aparecen en un tamaño de visualización normal. En
determinadas ocasiones deseará aumentar su tamaño para, por ejemplo, ver las
etiquetas que les asignemos.
Para cambiar la anchura de los fotogramas
Haga clic en el icono
que aparece en el borde superior derecho de la ventana de
línea del tiempo y se abrirá un menú en el que podrá elegir los tamaños: Diminuto,
Pequeño, Normal, Media y Grande.
Se había mencionado el color de los fotogramas, pero si hace clic en el icono
en la
parte superior derecha de la ventana de línea de tiempo y desactiva la opción
Fotogramas coloreados del menú que aparecerá, todos esos colores desaparecerán y
quedará de este modo.
•
•
•
•
Los fotogramas que contienen gráficos estáticos aparecerán en color blanco.
Los fotogramas que contienen animaciones realizadas con interpolación de
forma aparecerán con una trama gris y con una flecha verde en su interior.
Los fotogramas que contienen animaciones realizadas con interpolación de
movimiento aparecerán con una trama gris y con una flecha roja en su interior.
Los fotograma clave aparecerán con un punto cuyo color será azul si se trata de
gráficos estáticos, verde si se trata de una interpolación de forma o rojo si se
trata de una interpolación de movimiento.
Alargar la duración de los fotogramas.
La velocidad de reproducción es única para todas las capas de la película. Sin
embargo, es posible acelerar o disminuir la velocidad de cualquier parte de la animación
variando el número de fotogramas empleados para definir la acción.
Así pues, si se añaden unos cuantos fotogramas clave o intermedios en un lugar de la
película, la acción que en ese lugar se produjera se alargará y en consecuencia la
acción durará más.
6.7 Creación de GIF´S animados.
Como seguramente sabrás, los gif´s animados son pequeñas imágenes en movimiento
que aparecen en multitud de páginas Web y que les caracteriza en la mayoría de los
casos un aspecto simpático.
Flash permite crear y editar ese tipo de archivos.
41
Aplicaciones Gráficas II- FLASH
42
Cómo crear o editar un GIF animado
Los GIF´S animados están muy relacionados con las animaciones fotograma a
fotograma porque presentan su misma estructura. De hecho, cuando importa un gif
animado, aparece en la línea del tiempo con el aspecto de una animación fotograma a
fotograma.
Cuando importa un GIF animado (File / Import), podremos editar cada fotograma como
nos plazca, ahora bien, tenga en cuenta que los GIF´s animados son una sucesión de
imágenes bitmap, lo cual significa que no está trabajando con imágenes vectoriales y
en consecuencia no podrá usar las herramientas de flash para editar, a no ser, claro
está, que convierta la imagen bitmap a vectores (vectorizar).
Recuerde que para vectorizar (trazar) bitmaps se utiliza la opción Modify / Trace Bitmap.
No obstante, dado que el tamaño de los gif´s animados es normalmente muy pequeño
para que no tarden demasiado en bajar de la red, acostumbran a perder bastante
detalle al vectorizarlos.
Crear un Gif con Flash.
a) Abrir el archivo en Flash.
b) Hacer clic en File / Publish Settings…
c) En la pestaña Formats, haz clic en GIF image (.gif)
Otro modo de poder editar bitmaps de los fotogramas de un Gif animado una vez
vectorizados es mediante la herramienta Lazo
y su modificador
.
6.8 Uso del papel Cebolla.
En general, Flash sólo muestra un fotograma de la secuencia de animación en el
escenario. Para facilitar la ubicación y edición de la animación fotograma a fotograma,
puede ver varios fotogramas a la vez en el escenario. El fotograma situado bajo la
42
Aplicaciones Gráficas II- FLASH
43
cabeza lectora aparece de color normal, mientras que los fotogramas circundantes
aparecen atenuados; cada fotograma parece estar dibujado sobre hojas de papel
traslúcido (papel cebolla) colocadas una encima de otra. Los fotogramas atenuados no
pueden editarse. El uso del papel Cebolla nos va a permitir ver simultáneamente en la
pantalla el contenido de varios fotogramas a la vez. Gracias a eso podremos saber de
un vistazo la posición relativa que ocupan en cada momento los objetos que contienen
los fotogramas y podremos situarlos con mucha mayor precisión en la escena.
Para poder ver el comportamiento del papel cebolla, se tiene que cargar una animación
y hacer clic en los iconos de papel cebolla, debajo de
la línea del tiempo.
•
•
•
Para ver los fotogramas de papel cebolla como
contornos, haga clic en el botón Contornos de
papel cebolla.
Para cambiar la posición de los marcadores de
papel cebolla, arrastre el puntero hasta la nueva
ubicación. En general, los marcadores se mueven
de forma conjunta con el puntero del fotograma actual.
Para poder editar todos los fotogramas situados entre los marcadores de papel
cebolla, haga clic en el botón Editar varios fotogramas. En general, la opción Papel
cebolla sólo permite editar el fotograma actual. Sin embargo, puede ver el contenido
de cada fotograma situado entre los marcadores y editarlo aunque no se trate del
fotograma actual.
UNIDAD VII: Acciones en Flash.
OBJETIVO: Crear películas interactivas aplicando las acciones del lenguaje Action
script.
7.1 Introducción.
Hasta ahora hemos visto cómo se crean las películas en Flash de forma automática y
secuencial, es decir, desde el principio hasta el final y sin posibilidad de hacer nada
para impedirlo. Sin embargo, Flash permite añadir acciones que facilitarán, entre otras
cosas, saltar a otros fotogramas o escenas, utilizar el teclado o el ratón para ejecutar
estas acciones y dotar de interactividad a la película.
43
Aplicaciones Gráficas II- FLASH
44
¿Qué son las acciones?
Las acciones son una especie de órdenes que Flash ejecutará cuando el cabezal de
reproducción llegue a ellas. Cada tipo de acción obligará al programa a realizar algo en
concreto, por ejemplo, ir de un fotograma a otro, pasar de una escena a otra, pasar de
una película a otra, detectar si un fotograma se ha cargado, detener la reproducción de
un clip, etc. Todas estas acciones están escritas en un lenguaje de programación
específico y aparecen automáticamente en el panel de acciones en forma de scripts
cuando son llamadas.
Las acciones se pueden colocar en los fotogramas clave y en los objetos, que pueden
ser: botones o instancias de clips de película.
• Las acciones ubicadas en fotogramas clave se ejecutarán cuando el cabezal de la
línea de tiempo pase por ellas.
• Las acciones ubicadas en botones, requerirán de la interactividad con el usuario
para que las ejecuten, es decir, se deberá pasar el cursor por encima o hacer clic en
el botón para que pase algo.
• Las acciones ubicadas en clips de película se ejecutarán cuando se cargue el clip o
cuando se ejecute un fotograma determinado.
Los fotogramas que contienen acciones muestran una pequeña “a” en su interior.
7.2 Panel Acciones.
El panel Acciones permite crear código ActionScript en un documento de Flash (archivo
FLA). Este panel consta de tres paneles, cada uno de los cuales le facilita la creación y
gestión de los scripts.
El panel de Acciones, dispone de dos modos de trabajo: con asistente o sin asistente
(escribir directamente las funciones).
El modo de trabajo con asistente es el que aparece por dafecto y permite definir
acciones de forma sencilla a base de seleccionarlas en el recuadro de acciones (caja
de herramientas) y rellenando los campos de parámetros (argumentos) que solicitan las
diferentes acciones. En este modo, los scripts que aparecen en el recuadro de la
derecha no pueden editarse directamente.
44
Aplicaciones Gráficas II- FLASH
45
El modo de trabajo sin asistente permite, escribir y editar acciones directamente en el
recuadro de la derecha, como si se escribieran scripts utilizando un procesador de
textos. En este caso, no disponemos de campo de parámetros para rellenar ya que
todos los parámetros deberán ser introducidos por el usuario, pero si que aparecerán
en determinados momentos una sugerencia para el código que luego se verá.
La mecánica de funcionamiento del panel de acciones en modo normal, es sumamente
sencilla:
•
•
•
•
En primer lugar deberá haber seleccionado un fotograma clave, un clip o un botón,
ya que las acciones que definan solo pueden ser aplicadas a esos elementos.
Seguidamente, deberá hacer clic en uno de los doce grupos o categorías de
acciones para abrirlo y localizar la acción deseada. Si deja el cursor del ratón parado
sobre una acción, aparecerá un texto orientativo acerca de su cometido. Si lo desea,
puede abrir todos los grupos, pero eso lo obligara a desplazarse por el recuadro
mediante las barras de desplazamiento, ya que hay muchas acciones de todo tipo
disponibles.
Una vez localizada la acción deseada haga doble clic sobre ella y en el recuadro de
la derecha aparecerá automáticamente la expresión script correspondiente a la
acción solicitada.
En la parte superior derecha de la ventana deberá complementar los campos
necesarios para que la operación se ejecute correctamente. Dependiendo de los
parámetros que vaya introduciendo en esos campos, la expresión script irá
cambiando para reflejarlos. Al final de la edición de la acción, el recuadro de la
derecha mostrará una expresión determinada que será la que el interprete de script
ejecutará y dará como resultado la acción programada.
45
Aplicaciones Gráficas II- FLASH
46
Caja de herramientas Acciones Se utiliza para examinar una lista de elementos del
lenguaje ActionScript ordenados por categorías (funciones, clases, tipos, etc.) y luego
insertarlos en el panel Script. Para insertar un elemento de script en el panel Script,
haga doble clic en él o arrástrelo directamente al panel Script. También puede añadir
elementos del lenguaje a los scripts mediante el botón Añadir (+) de la barra de
herramientas del panel Acciones.
Barras de herramientas del panel Acciones y la 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. Estas barras de herramientas son distintas en función de si
utiliza el editor de ActionScript del panel Acciones o el panel Script. En la siguiente
imagen se muestran las funciones incluidas en el editor de ActionScript. Las opciones
marcadas sólo están disponibles en el panel Acciones.
Navegador de scripts Muestra una lista jerárquica de elementos de Flash (clips de
película, fotogramas y botones) que contienen scripts. Utilice el navegador de scripts
para desplazarse rápidamente por todos los scripts del documento de Flash.
Si hace clic en un elemento del navegador de scripts, el script asociado con ese
elemento aparecerá en el panel Script y la cabeza lectora se desplazará a esa posición
en la línea de tiempo. Si hace doble clic en un elemento del navegador de scripts, el
script quedará fijado (bloqueado en su sitio
Panel Script En este panel es donde se escribe el código. El panel Script ofrece
herramientas para crear scripts en un editor completo (denominado editor de
ActionScript) que incluye aplicación de formato y revisión de la sintaxis del código,
sugerencias o consejos sobre códigos, colores para el código y otras funciones que
simplifican la creación de scripts. Para más información, consulte Utilización del panel
Acciones y la ventana Script.
En el modo normal la parte central del panel muestra una serie de iconos que forman
las funciones de la barra de herramientas.
46
Aplicaciones Gráficas II- FLASH
47
Añadir un nuevo elemento al script Muestra todos los elementos del lenguaje que
también se encuentran en la caja de herramientas de ActionScript. Al elegir un
elemento de la lista de categorías de elementos del lenguaje, éste se añade al script.
Buscar Busca y reemplaza texto del código ActionScript.
Insertar una ruta de destino Sólo panel Acciones. Le ayuda a la hora de establecer
una ruta de destino absoluta o relativa para una acción del script.
Revisar sintaxis Comprueba los errores de sintaxis existentes en el script actual. Los
errores de sintaxis se muestran en el panel Salida.
Formato automático Aplica formato al script para lograr una sintaxis de código correcta
y mejorar la legibilidad. Puede establecer preferencias de aplicación de formato
automático en el cuadro de diálogo Preferencias, disponible desde el menú Edición o
desde el menú emergente del panel Acciones.
Mostrar consejos sobre códigos Si ha desactivado los consejos automáticos sobre
códigos, puede utilizar este comando con el fin de mostrar manualmente un consejo
para la línea de código en la que está trabajando.
Opciones de depuración Establece y quita puntos de corte en el script, de forma que,
al depurar el documento de Flash, pueda detener y luego avanzar línea a línea por el
script. Las opciones de depuración se encuentran ahora disponibles en la ventana
Script, así como en el panel Acciones, pero sólo para los archivos ActionScript. Esta
opción se desactiva para los archivos de comunicación de ActionScript y Flash
JavaScript
Asistente de script Sólo panel Acciones. El modo de asistente de script le solicita la
introducción de los elementos necesarios para crear scripts.
47
Aplicaciones Gráficas II- FLASH
48
Referencia Muestra un tema de ayuda de referencia para el elemento del lenguaje
ActionScript seleccionado en el panel Script. Por ejemplo, si hace clic en una sentencia
import y luego selecciona Referencia, aparece en el panel Ayuda el tema relativo a
import.
Menú emergente Sólo panel Acciones. Contiene los diversos comandos y preferencias
que se aplican al panel Acciones o a la ventana Script. Por ejemplo, puede establecer
los números de línea y el ajuste de texto en el editor de ActionScript, acceder a las
preferencias de ActionScript e importar o exportar scripts.
7.3 Añadir Acciones.
Las acciones se añaden mediante el panel de Acciones, al cual se puede acceder
mediante la opción Ventana / Acciones o pulsando F9.
Si crea películas muy elaboradas, con muchas capas y muchas acciones en cada capa,
es posible que puedan asignarse sin querer acciones en distintas capas al mismo
fotograma. Para evitar eso, es preferible crear una capa dedicada a colocar acciones.
De este modo siempre sabrá dónde están las acciones en línea del tiempo.
Nota: Tenga en cuenta que las acciones solo se pueden incluir en los fotogramas clave.
7.4 Action Script.
El ActionScript es el lenguaje de programación que ha utilizado Macromedia Flash
desde sus comienzos, y que por supuesto, emplea Flash MX. A grandes rasgos,
podemos decir que el ActionScript nos permitirá realizar con Flash MX todo lo que nos
propongamos, ya que nos da el control absoluto de todo lo que rodea a una película
Flash. Absolutamente de todo.
Sin embargo, en estos dos temas sólo vamos a ver una pequeña introducción a
ActionScript que servirá para sentar las bases que permitirán empezar a trabajar con
ActionScript. Enseñar a programar con ActionScript requeriría otro curso
completo.Profundizar en el conocimiento de este lenguaje queda por cuenta del lector.
Recomendamos seguir la estupenda Ayuda incluida en FlashMX.
48
Aplicaciones Gráficas II- FLASH
49
Características generales del ActionScript
Como ya hemos comentado, el ActionScript es el lenguaje de programación propio de
Flash.
•
•
•
•
El ActionScript es, como su nombre indica, un lenguaje de script, esto quiere
decir que no hará falta crear un programa completo para conseguir resultados,
normalmente la aplicación de fragmentos de código ActionScript a los objetos
existentes en nuestras películas nos permiten alcanzar nuestros objetivos.
El ActionScript es un lenguaje de programación orientado a objetos, tiene
similitudes, por tanto, con lenguajes tales como los usados en el Microsoft
Visual Basic, en el Borland Delphi, etc., aunque, evidentemente no tiene la
potencia de un lenguaje puramente orientado a objetos derivado del C o del
Pascal como los anteriores.
El ActionScript presenta muchísimos parecidos con el Javascript; si conoce
Javascript, la sintaxis y el estilo de ActionScript le resultarán muy familiares. Las
diferencias entre ambos lenguajes las puede encontrar en la ayuda que
acompaña al Flash MX.
En la mayor parte de las ocasiones, no será necesario "programar" realmente,
Flash MX pone a nuestra disposición una impresionante colección de "funciones"
(de momento entenderemos "funciones" como "código ActionScript que realiza
una función determinada") ya implementadas que realizan lo que buscamos,
bastará con colocarlas en el lugar adecuado.
Como ya se menciono, las Acciones son funciones o instrucciones predefinidas de
ActionScript, es decir: Flash MX las crea, y nosotros sólo tenemos que usarlas de la
manera que se nos indica. No tenemos que definir las funciones ni nada por el estilo,
ni siquiera necesitamos saber cómo están hechas... Lo importante es que están listas
para usar, lo que facilita el uso de este lenguaje de programación y sobre todo, haga
muy rápido comenzar a programar.
Al igual que en el caso anterior, explicaremos las Acciones más importantes. Para
una referencia más completa, recomendamos mirar la ayuda del programa.
Definiremos las acciones escribiendo su cabecera (nombre + parámetros con un
nombre genérico) para después explicar qué es cada parámetro.
•
Acciones - Control de Película
Estas acciones se emplean, como su nombre indica, para controlar el flujo de nuestra
película, esto es, para indicar a Flash en todo momento qué fotograma tiene que
mostrar, cuándo tiene que parar, dónde seguir etc... Veámoslas y lo entenderemos
mejor:
49
Aplicaciones Gráficas II- FLASH
50
gotoAndPlay / goto: Esta acción será, probablemente la que más useis durante la
realización de vuestras películas. La acción que realiza consiste en mover la cabeza
lectora al fotograma que le indiquemos. La cabeza lectora es lo que determina qué
fotograma de nuestra película se está reproduciendo en cada momento. Si, por
ejemplo, lo movemos del fotograma 1 al 25, lo que veremos instantáneamente será el
fotograma 25 y la película continuará reproduciéndose a partir de ahí.
Uso:
gotoAndPlay(escena, fotograma):
escena: Nombre de la escena a la que queremos enviar la cabeza lectora. Debe ir
entre comillas dobles.
fotograma: Número o nombre del fotograma al que queremos enviar la cabeza
lectora. Si es un nombre, debe ir entre comillas dobles, si es un número, NO.
Ejemplo:
gotoAndPlay("Escena2", 7); --> Esta acción lleva la cabeza lectora al fotograma 7
de la escena llamada "Escena2".
Play: Da comienzo a la reproducción de la película, generalmente porque algo la ha
detenido.
Uso:
Play();
No tiene Parámetros.
Stop: Detiene la reproducción de la película. Se puede usar en un fotograma,
cuando queramos detenernos en él (porque es un menú, por ejemplo), en un botón,
(para que detenga la película) etc...
Uso:
Stop();
No tiene Parámetros.
•
Acciones - Navegador / Red
Estas acciones tiene diversas funciones, describimos las más importantes:
50
Aplicaciones Gráficas II- FLASH
51
fscommand: Esta acción, es capaz de ejecutar ciertos comandos muy potentes. Lo
más cómodo es pasar a Modo Básico (sino estábamos ya) e insertarla, nos
aparecerá una pestaña con los posibles comandos que admite:
- fullscreen : Si se activa pone nuestra película a pantalla completa. Muy útil para
presentaciones en CD-Rom, por ejemplo.
- allowscale: Controla el redimensionamiento de los objetos insertados en la
película cuando el usuario estira los bordes de la misma (o de la página web en la
que se encuentre) ¿Queremos mantener las proporciones? Este comando nos
permite controlarlo.
- showmenú: Si has visto el menú que aparece al pulsar el botón derecho del ratón
sobre una película Flash, seguro que has pensado en hacerlo desaparecer ... puede
que no interese que los usuarios puedan moverse a sus anchas por nuestra película.
Ejecutando esta sentencia del modo adecuado (false), podremos ocultarlo.
- trepallkeys: Sirve para detectar las pulsaciones de todas las teclas durante la
reproducción de nuestras películas.
Todas estas alternativas, comparten modo de uso, veámoslo:
Uso:
fscommand("comando","true / false")
comando: El comando a ejecutar (fullscreen, allowscale, etc...)
true / false: Aquí debemos escribir true o false, según queramos desactivar la
opción o activarla.
Ejemplo:
fscommand("fullscreen", "true"); -> Activa la pantalla completa.
getURL: Esta acción se emplea para abrir el navegador web y abrir la página web
que deseemos.
Uso:
getURL(url , ventana , "variables")
url: Dirección web a la que queremos acceder (se abrirá una ventana).
ventana: Parámetro OPCIONAL. Modo en el que queremos abrir la ventana (en la
ventana actual (_self) en otra nueva (_blank) etc...)
variables: Parámetro OPCIONAL, puede haber varios. Si la página lo permite (es
ASP, PHP etc...) podemos enviarle variables.
Ejemplo:
51 Aplicaciones Gráficas II- FLASH
52
getURL("http://www.aulaclic.com", "_blank");
loadMovie / loadMovieNum: Esta acción permite cargar nuevas películas Flash o
imágenes en nuestra película de forma dinámica (la película se cargará cuando se lo
indiquemos, y no antes).
Uso:
loadMovieNum(url , nivel / destino, variables)
url: Dirección absoluta donde está situada la película SWF o la imagen JPEG
nivel / destino: Nivel donde cargaremos la película, teniendo en cuenta que el nivel
básico es el 0, luego va el 1 y así sucesivamente. Cada nivel superior se sitúa
delante del anterior y toma el control. Si lo usamos como destino, aquí deberemos
introducir el nombre del movieclip donde cargaremos la película o el nombre del
marco si estamos cargando un fichero SWF en una página HTML con marcos.
variables: Parámetro OPCIONAL. Podemos enviar variables.
Ejemplo:
loadMovieNum("MiPeli2.swf", 0) --> Cargamos la película "MiPeli2.swf" en el nivel
principal. No enviamos variables.
Cómo Saltar a Fotogramas o a Escenas
Flash reproduce secuencialmente los fotogramas, si existen escenas definidas, Flash
va saltando de una a otra de forma ordenada cada vez que el cabezal de lectura llega
al último fotograma de cada escena.
UNIDAD VIII: Publicación de la película.
OBJETIVO: Generar la publicación de la película para visualizarla en la Web.
8.1 Publicar una película.
Antes de aventurarnos a publicar nuestra película para que otros la vean, sobretodo si
la vamos a publicar en una página web, donde el tamaño de descarga es de vital
importancia, debemos tener en cuenta las siguientes consideraciones:
CONSIDERACIONES EN EL DIBUJO:
•
•
Aunque los degradados queden muy vistosos, también requieren más
memoria, por lo que debemos evitar su uso excesivo, en la medida de lo
posible.
La herramienta pincel gasta más memoria que el resto de herramientas de
dibujo, por lo que deberíamos elegir estas últimas en la medida de lo posible.
52
Aplicaciones Gráficas II- FLASH
53
•
Hemos visto que la animación de líneas es bastante útil. Sin embargo el uso de
líneas que no sean las definidas por defecto y que usamos en el capítulo que
hemos comentado, hará que el tamaño de la descarga aumente. Por tanto
evitemos las líneas discontinuas, de puntos.
Dibujar las curvas con el menor número de nodos posible.
•
CONSIDERACIONES EN LA ORGANIZACIÓN:
•
Agrupar los objetos que estén relacionados con el comando Modificar ->
Agrupar.
Si hemos creado un objeto que va a aparecer varias veces, deberíamos
convertirlo a símbolo, ya que como hemos visto, Flash lo colocará en la
biblioteca y cada vez que quiera mostrarlo, hará referencia a una única posición
de memoria.
Ya hemos comentado el mayor tamaño de los mapas de bits, lo que hace que
debamos minimizar el número de apariciones de éstos en nuestra película.
•
•
CONSIDERACIONES EN LOS TEXTOS:
•
Hemos podido observar, cuando manejábamos textos, que cuando abrimos el
menú de tipos de letras, las tres primeras son siempre "_sans", "_serif" y
"_typewriter". Esto no es una casualidad. Están colocadas ahí para resaltar
que estas fuentes ocupan un mínimo de memoria, por lo que se recomienda
su uso.
CONSIDERACIONES EN LA ANIMACIÓN:
•
•
Utilizar lo más que podamos las interpolaciones de movimiento y las guías
para reducir el número de fotogramas clave y el tamaño de la película.
Evitar el uso de la interpolación por forma para animaciones de cambio de
color, cuando sea posible.
Para poder distribuir películas creadas en Flash que la gente pueda ver, son
necesarias dos cosas: crear un archivo SWF y que el que la quiera visualizar tenga
instalado el Reproductor de Flash.
Flash nos ofrece varias opciones y funcionalidades para la creación de un archivo
SWF. Estas opciones se pueden ver en el panel de Configuración de Publicación,
al que podemos acceder mediante el menú Archivo -> Configuración de
Publicación (Pestaña Flash).
53
Aplicaciones Gráficas II- FLASH
54
Veamos cuáles son estas opciones:
•
Versión: Si queremos publicar nuestra película para que sea vista con versiones
anteriores de Flash, debemos seleccionar aquí la versión deseada.
Orden de Carga: Aquí indicamos el orden en que queremos que se cargue el
documento.
•
Si seleccionamos De abajo a arriba se cargará primero el contenido de la capa inferior
(de la capa 1 hasta la última capa que tengamos en el documento).
Por el contrario, si seleccionamos De arriba a abajo se cargará primero el contenido
de la capa superior (de la última capa que tengamos en el documento hasta la capa 1).
Este comando es importante debido a la propiedad de Flash de ir reproduciendo la
película conforme los objetos son cargados. Así, en caso de que nos interese que
aparezcan antes unos objetos que otros seleccionaremos uno o el otro.
•
Generar Informe de tamaño: Esta opción la hemos usado en el apartado
anterior. Si la activamos, se creará un archivo de texto con una relación
detallada del tamaño del documento.
•
Proteger Frente a Importación: Activando está casilla conseguiremos que
cuando otro usuario (o nosotros mismos) queramos importarla no podamos o
tengamos que introducir una contraseña si se ha escogido alguna.
54
Aplicaciones Gráficas II- FLASH
55
•
•
•
•
•
Omitir acciones de Trace: Las acciones de traza se emplean para comprobar
el correcto funcionamiento de la película durante la creación de esta (durante
las pruebas). También se consideran trazas los comentarios que insertemos en
el código Action Script. Si activamos esta señal, la película creada no los
incluirá, ocupará menos tamaño y ahorraremos tiempo innecesario. Es
recomendable cuando se publique la película de un modo definitivo.
Depuración Permitida: Permite que se pueda depurar el archivo SWF.
También exige la introducción de una contraseña ya que se debe tener permiso
del creador para Importar el archivo y depurarlo.
Comprimir película: Comprime la película al máximo posible.
Calidad JPEG: Si en el panel de propiedades del mapa de bits no hemos
indicado una compresión concreta, aquí podremos determinar su grado de
compresión, que determinará a su vez el espacio ocupado en memoria por este
tipo de imágenes. A mayor compresión, menos espacio en memoria ocupará la
imagen, pero también su calidad será menor.
Suplantar configuración de sonido: Con esto se suplantarán los niveles de
compresión seleccionados para cada archivo de sonido de nuestro documento.
55
Aplicaciones Gráficas II- FLASH
56
ACTIVIDADES
Actividad de repaso No. 1.
INSTRUCCIÓN: Responde las preguntas y encuentra las respuestas en la sopa de letras.
Utiliza Colores.
1. Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro
gusto ___________
2. Se crean como en cualquier programa de dibujo, de modo rápido ___________________
3. Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso___________
4. Permite trazar círculos o elipses de manera rápida y sencilla _________________________
5. Permite aplicar rellenos a los objetos que hayamos creados__________________________
6. Se diferencia de la herramienta óvalo por el tipo de objeto que crea ___________________
7. Permite Rotar, inclinar, escalar o distorsionar objetos_______________________________
8. Crea polígonos de modo sencillo. Es una de las más potentes que ofrece Flash
9. Su función es complementaria a la herramienta selección, pues puede seleccionar cualquier
cosa________________________
10. Esta herramienta puede eliminar todo lo que dibuje _________________
11. Se emplea para cambiar rápidamente el color de un trazo ____________________
12. Permite mover los vértices que componen los objetos creados con la herramienta pluma.
________________
13. Es la Herramienta con mayor uso de todas ________________
E B R O C H A M U L D B O N S T S R I N C A G L E
L O M S Z A G U R E S B P L U M A C E D R C L O R
G M C A R A F G J P V T R I T U L E R C S M I N E
L U T E I N O G A N D O F E L I P O G A L D N R I
U L C E N M H T I O D F I E N C A S Z O P I E T E
T A C U M E R X T A S A D E R I N P A L H M A B R
C U A N D T E M R Q U I E S C U A N T R I N O E S
E L E S U M A R T R O N E O G E O Q U I E S I E S
R A T E U B O B E B T N E U S U A T I N E G E R A
E F E C T B U A S U F R I D E N O I C C E L E S B
C L I T A R S I S U B I E M D E N S I C A L E R I
T A N G E R I E M I C A M O R E T S D F G U B D A
A N G U I M A R L E C A S T I N T E D R I M A S T
N A N T E C N O L E G A F R A T E R P I N T A M O
G U E R I S C T N M C U B O D E P I N T U R A L L
U L U M A S A P I R E C U B E T O F I R A G M C A
L A L I P I T A M I L O I C U A A M B I E N T S V
O R A M I P E N T E L I C O N U D O P B D R I T O
M E J O A N T O L O Z I N M N I E N T E S C O L T
B O T E D E T I N T A A C A R A C T R I S T I C A
L A P I T E L A N T E J I T E S D O C T R I N E L
T R N S F A L E L E F T E V O N W O N I E T H E P
T E L F P N O I N T E L I T E C T R R I M O N E X
C A R I A C T E R I S T Z A L O M E J R D L Z O N
A N Z T Y I D T R A N S F O R M A C I O N E L A S
A N I M E D L I T O G R F E S A B A B I R E N I L
56
Aplicaciones Gráficas II- FLASH
57
Actividad de Repaso No. 2
INSTRUCCIÓN: Completa las siguientes preguntas escribiendo sobre las líneas la respuesta
correcta y busca en la siguiente sopa de letras . Identifica con colores tus respuestas.
1. Son los 4 estados o fotogramas que presenta el símbolo BOTÓN.
____________, ___________, _______________ y ___________________.
2. Para entrar a la biblioteca de símbolos presiono la tecla:_______________.
3. Visualiza _________________ puede ser útil para ver objetos en capas inferiores que
permanecen ocultos por objetos de capas superiores.
4. Cuando se crean los símbolos, se deben almacenar en la______________________.
5. Estas capas funcionan conjuntamente con las capas de tipo máscara.
________________________
6. Es la representación de un símbolo en la escena _________________.
7. El panel ______________________ indica los elementos cuando se trabaja con símbolos.
8. Para crear un símbolo podemos entrar al menú ______________.
9. Son los tipos de bibliotecas que se manejan en Flash. __________________ y
__________________________.
10. Son pequeñas imágenes en movimiento que aparecen en multitud de páginas Web.______
J
N
X
L
P
H
Q
I
C
D
J
C
D
M
O
D
I
F
I
C
A
R
M
I
O
B
M
A
N
O
A
L
Z
A
D
A
E
U
G
L
P
W
Z
I
R
M
N
L
57
R
M
Z
A
N
O
F
5
P
E
L
I
C
U
L
A
P
S
V
E
E
R
U
E
E
O
P
N
B
Q
A
M
Y
X
I
H
S
R
B
P
X
C
L
A
R
V
Z
P
P
E
L
R
B
R
D
T
R
A
P
R
P
E
T
S
L
L
I
N
B
A
R
A
O
X
C
F
E
D
X
L
M
N
R
U
B
D
O
E
E
A
G
H
O
A
A
C
S
P
U
O
H
S
O
R
Z
E
E
I
P
S
E
N
T
O
C
I
S
S
T
E
O
I
R
R
N
S
I
R
Q
Q
F
A
Z
X
O
S
W
E
U
U
F
I
F
T
I
L
S
M
I
I
D
O
E
U
I
Y
T
R
F
V
C
D
A
Z
R
A
L
O
C
R
E
A
T
D
B
Y
N
N
J
J
N
8
K
I
A
O
D
D
B
Z
I
I
O
V
D
D
P
E
F
I
T
A
A
H
C
A
A
S
S
B
R
R
V
O
P
L
Aplicaciones Gráficas II- FLASH
U
X
A
R
Z
S
G
O
Y
P
D
D
A
S
S
A
J
E
A
G
A
N
E
B
A
D
D
I
A
F
H
M
U
A
A
O
P
D
D
E
C
G
D
F
Q
A
S
I
R
B
E
X
R
11
J
N
Z
N
S
O
G
A
R
O
V
V
O
I
S
A
A
B
Z
R
I
R
A
D
L
O
S
T
R
C
R
G
R
H
Q
G
R
K
L
C
N
A
A
V
P
G
Y
V
K
B
S
W
T
A
J
T
T
R
U
O
I
N
P
T
I
P
U
A
O
W
I
D
L
V
Q
N
C
R
A
U
J
N
M
F
Q
F
R
I
B
W
A
Q
R
U
R
Q
P
C
W
S
X
R
Y
E
F
Y
J
S
N
L
S
V
L
H
R
G
P
Z
O
O
M
C
A
L
T
E
T
Q
W
E
R
Y
O
R
A
A
C
U
O
D
O
N
R
J
Z
M
R
C
I
N
S
T
A
N
C
I
A
V
Q
T
7
G
C
A
O
L
N
M
N
Z
L
P
C
R
N
Q
O
R
N
P
A
A
G
Y
F
G
T
A
X
X
A
E
J
P
W
I
S
E
L
E
S
O
N
R
O
T
N
O
C
A
58
PRÁCTICAS
Práctica 1: (Glosario)
Con apoyo de tu antología o algún buscador de internet, investiga los siguientes
conceptos y escribe en tu libreta el siguiente Glosario.
•
•
•
•
•
•
•
•
•
•
Bitmap.
Imagen vectorial.
Escenario.
Gráficos ( Flash).
Botón ( Flash).
Clip de película.
Símbolo (Flash).
Fotogramas.
Línea del tiempo.
Capas (Flash).
Práctica 2: (Objetos de Flash)
Navega en diferentes páginas Web e Identifica los objetos con los que trabaja Flash
(Gráficos, botones, clips de película), Cópialos y pégalos en un documento de Word y
guarda el archivo con el nombre Práctica 2_Objetos.
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
58
Aplicaciones Gráficas II- FLASH
59
4. En la opción Dimensions cambia a 300 px (width) x 250 px (height).
5. En Background color, cambia a cualquier otro color.
6. Click en Ok.
Práctica 4: (Animación Fotograma a Fotograma)
1. Abre el programa Flash.
2. Configura el área de trabajo a tu gusto.
3. Estando en el primer fotograma, selecciona la herramienta Óvalo y arrastre para
dibujar un círculo. Si mantiene presionada la tecla MAYUS mientras arrastra,
creará un círculo perfecto.
4. Con la herramienta de selección
, haga clic en el borde del círculo y bórrelo
con la teclas SUPR (tenga en cuenta el color de relleno).
5. Presione F6 para crear el segundo fotograma clave, que es donde se definirá
algún cambio en la animación, ya sea de tamaño o posición. Por lo pronto
seleccione el círculo y arrástrelo hacia la derecha o con la tecla de dirección
avance 10 posiciones.
6. Haga clic en el tercer fotograma para seleccionarlo, pulse F6 para añadir otro
fotograma clave y mueva el círculo otros diez pasos hacia la derecha.
59
Aplicaciones Gráficas II- FLASH
60
7. Repita el paso anterior hasta llegar al fotograma 10.
8. Presione la tecla Intro y se reproducirá la película.
9. Guarde el archivo en su carpeta de Prácticas de su USB con el nombre de
Práctica 4.
Práctica 5: (Pelota Rebotando)
En esta práctica debes aplicar el anterior método de Fotograma a Fotograma, para
crear una animación donde el círculo va arriba abajo (pelota rebotando).
1. Abra Flash y Cree un nuevo documento.
2. Dibuje el círculo, quítele el contorno y cambie el color de relleno.
3. Presione F6 y mueva el círculo hacia arriba 10 pasos.
4. Realice el anterior paso hasta crear el efecto de Pelota rebotando. Ver ejemplo.
5. Guarde el archivo con el nombre de Práctica 5.
Práctica 6: PARTE I (Interpolación de Movimiento)
7. Cree un nuevo documento en blanco.
8. Dibuje un círculo en el lado izquierdo de la escena. Esta será la posición en el
primer fotograma.
9. Seleccione el primer fotograma, haciendo clic sobre él y pulse el botón derecho
para que aparezca el menú contextual. Seleccione la opción Crear interpolación de
movimiento (Create motion tween). De momento no pasa nada.
10. Seguidamente, seleccione el fotograma 30 haciendo clic sobre el y presione F6 para
crear el último fotograma clave. Inmediatamente todos los fotogramas intermedios
quedarán sustituidos por una flecha.
60
Aplicaciones Gráficas II- FLASH
61
11. Ahora con el fotograma 30 seleccionado, seleccione el círculo y muévalo a la
posición final del círculo, que sería hasta la derecha de la escena (también puede
moverlo con las flechas).
Jalar en algún
12. Presione la tecla Intro.
punto
PARTE II (Cambiar color y tamaño)
A continuación haremos que el círculo cambie de color y de tamaño.
13. Haga clic en el fotograma 10, eso hará que se seleccione ese fotograma y aparezca
el círculo con el tamaño y posición que le corresponde en ese fotograma.
14. Presione F6 para crear un fotograma clave, esto le permitirá hacer algún cambio. La
inserción del fotograma clave quedará evidente por la aparición de la flecha dividida
en dos.
15. Con el fotograma seleccionado, utilice la herramienta Transformación libre (Free
Transform) y cambie el tamaño del círculo, jalando alguno de los puntos.
16. También en el fotograma 10 puede cambiar el color, para eso, active el panel
propiedades que se encuentra en la parte inferior y active la opción color en Tinta
(Tint) y escoja el color.
61
Aplicaciones Gráficas II- FLASH
62
17. Presione Intro para observar el resultado.
18. Ahora en el fotograma 20, repita los pasos del 7 al 11.
19. Guarde su práctica con el nombre de Práctica 6 (Interpolación de movimiento).
Práctica 7: (Interpolación de forma)
1. En un documento nuevo dibuje un círculo con la herramienta óvalo y sitúelo en el
centro de la escena. Elimine su contorno.
2. Seleccione el fotograma 40 y pulse F6 para crear un fotograma clave.
3. En el fotograma 40, seleccione el círculo y bórrelo con la tecla SUPR.
4. Ahora active la herramienta Texto
, haga clic en la escena para que aparezca el
cursor del texto y escriba la palabra círculo.
5. Con la herramienta de texto haga doble clic sobre el texto recién escrito para
seleccionarlo.
6. Desde el panel de propiedades, Cambie el tamaño, color y tipo de fuente.
7. Seleccione el texto y posiciónelo al centro de la escena.
8. Con el texto seleccionado, aplique dos veces la opción Modify / Break Apart.
9. Seleccione el primer fotograma haciendo clic sobre él y aparecerá el círculo.
10. En el panel propiedades aparece la casilla Tween (animar), despliégala y elija
Shape (forma). Automáticamente los fotogramas del 1 al 40 aparecerán de color
verde con una flecha.
11. Presione Intro para reproducir la película y observe la interpolación de forma.
62
Aplicaciones Gráficas II- FLASH
63
Práctica 8: Interpolación de Forma para un texto.
1. Cree un documento nuevo.
2. En la parte central de la escena escriba el texto “Nuevo Flash” con un tamaño
de 60 puntos y la letra que prefiera.
3. Ahora seleccione el fotograma número 30 y pulse F6 para crear el segundo
fotograma clave. El texto escrito también aparecerá en este nuevo fotograma.
4. Con el fotograma 30 seleccionado, active la herramienta de texto y arrastre sobre
el texto escrito para seleccionarlo. Bórrelo y escriba el texto “fantástico” en otro
color y con otro tipo de letra, centre el texto.
5. Ahora seleccione el texto fantástico del fotograma 30 y elija dos veces la opción
modificar/ separar para convertir el texto en un objeto editable. Recuerde que la
interpolación de forma trabaja con objetos no agrupados.
6. Ahora seleccione el primer fotograma y del mismo modo separe dos veces el
texto Nuevo flash para aplicar la interpolación de forma.
7. Finalmente, seleccione el primer fotograma y en la casilla animar (tween) del
panel propiedades, seleccione Forma.
8. Pulse CTRL + Intro o Intro.
Práctica 9: (Interpolación de Forma - Logotipo 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. El logotipo, lo puedes bajar de
internet, 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, usando fotograma a fotograma.
• En el primer fotograma dibujar el escenario.
• A partir del segundo fotograma, harás los movimientos de la pelota y porterías.
Ver ejemplo.
63
Aplicaciones Gráficas II- FLASH
64
•
•
La pelota debe rebotar por lo menos 4 veces.
El juego debe presentar el texto de “Juego Terminado” cuando termine.
Práctica 11: (Animación de un Rehilete)
• Dibuja un rehilete como a ti te guste.
• Aplica animación al rehilete, ya sea fotograma a fotograma o con interpolación de
movimiento.
Práctica 12: (Animación Mixta en una sola capa)
Crear una animación que tenga por objetivo Promocionar un valor humano (Amistad,
honestidad, respeto, etc.), aplicar los 3 tipos de animación, la duración debe ser de por
lo menos 10 segundos, debes combinar colores y tomar en cuenta los distintos
procedimientos. Ejemplo.
Práctica 13: (Flor hambrienta - Fotograma a Fotograma)
• Ver archivos .pdf proporcionados por la profesora y realiza su procedimiento.
64 Aplicaciones Gráficas II- FLASH
65
Práctica 14: (Pelota rebotando - Capa guía)
Creación de la pelota.
1. Dibuje un círculo con contorno, con un grueso del no. 3 y sin relleno. Con la
herramienta lápiz trace unas líneas verticales dentro del círculo para dividirlo en 3
partes (también puede usar una línea y modificarla a curva).
2. Seleccione cada una de las secciones de la pelota y aplique el relleno con la
herramienta
.
3. Seleccione todo el dibujo y agrúpelo con CTRL + G o Modify,
Group.
Crear la interpolación de movimiento
4. Haga clic con el botón derecho sobre el primer fotograma y la opción Crear
Interpolación de movimiento (motion tween).
5. Seleccione el fotograma 40 y pulse F6 para convertirlo en fotograma clave. Con esto
quedará completada la interpolación aunque, de momento, no se ha definido ningún
movimiento.
Creación del trayecto para la pelota (Capa Guía)
6. Haga clic en el icono
y aparecerá la capa guía
por encima de la capa actual.
7. Mediante la herramienta lápiz
y el modificador
Suavizar
trace un camino, el cual deberá
seguir la pelota cuando aparezca en la escena,
es decir, una serie de rebotes, cada uno de los
cuales debe ser menor que el anterior hasta que
ya no bote más. No importa que el trazo rebase
los límites de la escena.
Colocación de la pelota en los lugares adecuados.
8. Revise que tenga activada la opción Ver, Ajustar a objetos (View, Snap to objects).
9. Seleccione el primer fotograma de la capa de la pelota y con la herramienta
selección
arrastre la pelota hasta que su punto central se encaje con el
principio de la línea.
10. Seleccione el último fotograma de la misma capa y arrastre igualmente la pelota
hasta que su centro coincida con el final de la línea trazada.
11. Reproduzca la película con CTRL + Intro y verá el recorrido de la pelota en el
camino trazado, simulando una serie de botes.
65
Aplicaciones Gráficas II- FLASH
66
Práctica 15: (Capa máscara)
El Procedimiento general a seguir en este caso será:
• Dibujar o escribir lo que se desea enmascarar en la capa normal.
• Crear una capa de máscara.
• Dibujar en la capa de máscara el objeto por el cual se va a observar la capa
normal.
• Activar el efecto de máscara.
Realiza:
1. Con la herramienta Texto escriba la palabra “FLASH MX”, cambie el tipo de letra y el
tamaño de letra, por lo menos de 80 puntos.
Seguidamente crearemos la capa de máscara.
2. Pulse en
para crear una nueva capa normal que quedará automáticamente por
encima de la capa anterior.
3. Haga clic con el botón derecho sobre la nueva capa y en el menú contextual
seleccione la opción Máscara (Mask). Automáticamente, la nueva capa mostrará el
símbolo
identificativo de las capas máscara y la capa normal que tiene por
4.
5.
6.
7.
8.
debajo mostrará a su vez el símbolo
indicativo de que se trata de una capa
vinculada a la capa de máscara que tiene por
encima.
En la capa máscara, se creará un dibujo, en este
caso un círculo, que es por donde se observará
la capa normal, desbloquee la capa y dibuje el
círculo con un diámetro mayor que el texto. Los
contornos son ignorados porque solo tiene en
cuenta los rellenos y no las líneas.
Sitúe el círculo al principio del texto, de tal forma que
sólo se verá las primeras letras.
Finalmente revise que esté activada la máscara y
presione CTRL + Intro.
Se observará únicamente las letras que se cubrieron
con el círculo.
Ahora en la capa de máscara, crea una interpolación de movimiento hasta el
fotograma 40, para que recorra la capa de máscara toda la palabra.
9. En la capa texto presione en el fotograma 40 F5 para que el texto no desaparezca.
10. Presione CTRL + Intro para observar el resultado.
66
Aplicaciones Gráficas II- FLASH
67
Práctica 16: (Símbolos)
1. Dibujar 3 objetos y convertirlos en símbolos gráficos.
Para convertir en símbolo:
a) Una vez dibujado, seleccione el objeto gráfico y agrúpelo.
b) Presione F8 o seleccione Insert , Convert to symbol…
En cualquier caso, aparecerá el siguiente cuadro:
c) Escriba un nombre al símbolo.
d) Seleccione Graphic.
e) Haga clic en Ok.
El símbolo gráfico se almacenará en la biblioteca de símbolos, para ver la biblioteca
presione F11.
2. Con los 3 símbolos crea una animación usando capas e interpolación. Puedes
aplicar Capas guía o capas de tipo máscara.
3. Crear un símbolo botón.
a) En nuevo documento, seleccione la opción Insertar/ Nuevo símbolo. En la
ventana que se abrirá asigne un nombre para el botón y active la opción botón.
b) Acepte y la ventana de la escena se convertirá en la ventana de edición del
botón. Como siempre, la parte superior de la ventana de la línea del tiempo
mostrará el nombre de la escena principal y además, el nombre del botón que se
está editando ahora.
c) Observe como aparecen únicamente 4 fotogramas. Pues bien, los tres primeros
se corresponden con los 3 estados posibles del botón (reposo, encima, pulsado).
El último fotograma permite definir el área activa del botón.
d) Así pues, para definir un botón lo que hay que hacer es definir el aspecto que
debe tener en cada uno de los casos citados. Esta operación resulta similar a la
que se vio cuando se hizo una película fotograma a fotograma.
e) Entre a la ventana de edición de botones y dibuje un círculo con el tamaño,
aspecto y color que desees para la posición de REPOSO (Up) del botón. Sitúelo
centrado con la pequeña cruz que aparece en el centro de la pantalla.
67
Aplicaciones Gráficas II- FLASH
68
f) Ahora, seleccione el segundo fotograma haciendo clic sobre él y pulse F6 para
crear un nuevo fotograma clave. El círculo del fotograma anterior, se repetirá.
g) Puede sustituir el dibujo o simplemente cambie el color. El cambio aparecerá
cuando pase el cursor del ratón SOBRE (Over) el botón.
h) Seleccione el tercer fotograma y pulse F6 para crear un fotograma clave en esa
posición. Aquí se hace lo mismo, se debe definir el aspecto cuando haga clic
sobre el botón (PULSADO, Down). Puede modificar el círculo por otra cosa o
simplemente cambie el color.
i) Con la definición de los 3 primeros fotogramas el botón ya funcionará. El cuarto
fotograma está destinado a definir el área útil del botón, ya que puede
interesarnos que sólo una parte de la imagen del botón resulte activa. Por otra
parte, habrá que asignarle al botón la acción que queremos que se reproduzca
cuando se haga clic sobre él. Eso se definirá una vez colocado el botón en la
escena principal, seleccionándolo y mediante la ventana de acciones de
fotograma. (Se verá más adelante)
j) Presione o haga clic en Scene 1 (Escena 1), para volver a la escena.
k) Ahora arrastre el botón de la biblioteca (F11) hasta la escena principal. Los
símbolos botón aparecen precedidos por el ícono
.
l) Presione Ctrl + Intro y observe como cambia el botón al pasar o hacer clic sobre
él.
m) Guarda el archivo con el nombre Botón 1
Nota: Otra forma de crearlo es primero dibujar el gráfico para el botón, convertirlo en
botón con F8 y luego entrar a la ventada de edición EDIT/ Edit Symbols.
4. Aplica el procedimiento anterior y Crea un Símbolo botón que se llame
CARITAS, el cual presente las siguientes características, cuando termines
guarda el archivo con el nombre Botón 2.
Posición del ratón REPOSO
(Up)
Posición del ratón SOBRE
(Over)
68
Aplicaciones Gráficas II- FLASH
69
Posición del ratón PULSADO
(Down)
Práctica 17: (Botón animado)
Ahora, vamos a darle animación a las 3 posiciones del botón anterior.
1. Abre el archivo que contenga la práctica No. 4 (Botón 2).
2. Una vez abierto el archivo, si tienes el botón de la Carita en la escena principal,
selecciónalo y con el botón derecho, elije EDIT ,para que se abra la ventana de
Edición y cambies el aspecto del botón como se observa en la imagen de abajo.
NOTA: En caso de que no se encuentre en la escena principal, se debe abrir la
biblioteca con F11.
3. Para dar ANIMACIÓN AL BOTÓN, seleccionas el botón en la posición donde se le
va a dar animación, es decir, seleccionas el fotograma UP. Ver imagen,
4. Clic con el botón derecho y elije Convertir a Símbolo.
5. En el cuadro haz clic en la opción Nombre, escribe CLIP REPOSO y en
Comportamiento, elije Clip de película.
6. Dar doble clic en el botón, para ir a la ventana de Edición del Clip de película o Clic
derecho, EDIT.
69
Aplicaciones Gráficas II- FLASH
70
Aparecerá la línea del tiempo del CLIP de Película como si estuvieras en la escena
principal. Ver imagen:
8. Aquí se le aplican las animaciones al gráfico, ya sea Fotograma a Fotograma o
INTERPOLACIÓN.
NOTA: Te sugiero que apliques Fotograma a Fotograma.
Práctica 18: (Gif´s)
a) Importar un Gif animado de la Web y vectorizarlo para poder hacerle cambios a
través de Flash.
b) Guardar el gif original y la copia que tu realices con el nombre de PRÁCTICA_6.
Práctica 19: Aplica Animación fotograma a fotograma y crea un Gif animado con
motivo ECOLÓGICO.
70
Aplicaciones Gráficas II- FLASH
71
PROYECTOS
Proyecto 1: Creación de un anuncio publicitario con Flash.
Objetivo: Aplicar las técnicas y herramientas de animación vistas en clase para crear
un anuncio publicitario de una empresa / producto, el cual sea llamativo para el usuario.
Para su evaluación, se tomarán en cuenta los siguientes puntos:
1. Que cumpla
objetivo.
con
el
6. Aplicación de animación por
interpolación de movimiento o
forma.
7. Excelente
combinación
de
colores y fuentes.
8. Tiempo mínimo de la película de
30 segundos.
2. Creatividad.
3. Calidad en los símbolos
gráficos
creados
en
flash.
4. Aplicación
de capas
normales (usar más de
una).
5. Aplicación de capa guía
o capa máscara.
9. Entregarlo en tiempo y forma.
10. Presentar avances del trabajo
en clase práctica en tu USB.
Nota: Cabe mencionar que el anuncio debe ser considerado con un enfoque positivo.
Nota: Revisar prácticas del 2° parcial para capas g uía y capas máscara.
Proyecto 2: “Dosis de conocimiento”.
)HFKDGHHQWUHJDGH-XQLRGHO
Objetivo: Aplicar las técnicas y herramientas de animación vistas en Flash para crear
un corto de animación de algún tema de cualquier asignatura con un enfoque educativo,
el tema será elegido por el alumno y servirá como herramienta didáctica para el
profesor de asignatura o de estudio para el alumno.
Para su evaluación, se tomarán en cuenta los siguientes puntos:
1. Creatividad u originalidad.
2. Calidad en el dibujo.
3. Combinación de colores y tipos de letras.
4. Aplicación de animación con interpolaciones.
5. Aplicación de capas en el trabajo.
6. Utilización de escenas.
7. Tiempo de animación 2 minutos por lo menos.
71
Aplicaciones Gráficas II- FLASH
72
8. Manejo de sonido o voz. ,QVHUWDUYR]DOFRQWHQLGR
9. Aplicación de capas especiales como guía o máscara.
10. Entrega del trabajo en tiempo y forma en formato digital.
6HGHEHUiHQWUHJDUIRU]RVDPHQWHHQFGQRVH
UHFLELUiSRURWURPHGLR(QWUHJDUDUFKLYRH[H\IOD
Nota: Cabe mencionar que se considerará a los alumnos que presenten avances del
proyecto durante el curso.
Referencias Bibliográficas:
Flash 8
Basic y Professional
José Luis Orós
Alfa Omega
Referencias de páginas Web:
http://www.adrformacion.com/cursos/flash8/leccion3/tutorial10.html
http://www.creaformacion.com/images/libros/Flash_1.pdf
http://www.aulaclic.es/flashMX/f_flash.htm
http://www.estudiargratis.com.ar/webmaster/curso_flash.htm
http://usuarios.multimania.es/paginadav/
72
Aplicaciones Gráficas II- FLASH