Unidad 1. Introducción a Flash Professional CS5 (I)
1.1. ¿Qué es Flash?
Flash Professional CS5 es una potente herramienta desarrollada por Adobe que ha
superado las mejores expectativas de sus creadores.
Flash fue creado con el objeto de realizar animaciones y diseños vistosos para la web, y
gráficos interactivos.
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, porque es interesante
Flash Pro CS5.
Desde la web de Adobe te puedes descargar una versión de evaluación de Flash
Professional CS5 válida para 30 días. Esta versión estará disponible hasta que salga la
siguiente.
Los logotipos de Flash son propiedad de Adobe, así como las marcas registradas Flash y
Adobe. aulaClic no tiene ninguna relación con Adobe.
1.2. ¿Por qué usar Flash CS5?
Las posibilidades de Flash son extraordinarias, con cada nueva versión se han mejorado y
simplificado las herramientas, y cada vez es posible lograr mejores efectos con menos trabajo.
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.
Durante mucho tiempo, Flash consiguió hacer posible lo que más se echa en 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. Con Flash podremos crear de modo fácil y rápido desde animaciones
simples para lograr algunos efectos visuales, hasta eplicaciones complejas, como juegos .
Además sus desarrolladores están apostando muy fuerte por ActionScript, el lenguaje de
programación Flash. A cada versión se mejora y ofrece un abanico de posibilidades cada vez
mayor, por lo que además de dinamismo, Flash nos ofrece la posibilidad de ser la plataforma
para aplicaciones web de un modo real.
Flash es fácil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar
horas y horas creando lo que nos dicte nuestra imaginación, pero esto no es suficiente para
ser el preferido por los diseñadores profesionales... ¿Entonces qué es?
1.3. Novedades de Flash CS5
Adobe suele integrar todos sus productos en una suite única en la que prima, sobre todo, la
compatibilidad entre ellos. Así la compañía se desmarca del resto ofreciendo un paquete de
aplicaciones muy completas como hemos ido viendo año tras año, que son capaces de
interactuar entre ellas y nos ofrecen la posibilidad de reutilizar proyectos creados con un
programa en otro. De hecho, podemos usar herramientas más potentes de dibujo, como
Illustrator, para crear nuestros gráficos, y después animarlos con Flash.
Vamos a ver las opciones más destacadas que encontramos en esta última versión:
Motor de texto Text Layout Framework.
Flash CS5 ha cambiado profundamente el motor de texto que emplea. En nuevo motor
TLF, incluye bastantes mejoras, entre las que podemos destacar las siguientes:
Nuevos estilos de carácter y párrafo.
Se pueden aplicar efectos y atributos sobre el texto sin convertirlo a un clip de película.
El texto pude fluir entre varios contenedores asociados.
El panel Fragmentos de código.
Este panel nos permite insertar rápidamente el código ActionScript 3 de las acciones más
comunes.
Además, podemos emplearlo para almacenar nuestro propio código, y así poder reutilizarlo
cómodamente.
Empaquetado de aplicaciones para iPhone.
Flash CS5 nos permite convertir nuestras aplicaciones i juegos creados con el programa,
en aplicaciones compatibles con iPhone.
Mejoras del vídeo.
Los puntos de referencia nos permiten navegar por el vídeo o reaccionar a eventos. Ahora,
podemos añadirlos directamente desde el inspector de Propiedades o mediante ActionScript,
sin necesidad de recodificar el vídeo.
Además, se ha mejorado el componente reproductor de vídeo, que nos permite verlo en
tiempo real, y nos ofrece una mayor colección de estilos.
Mejora de la herramienta huesos.
Se han añadido propiedades de "muelle" a la herramienta de cinemática inversa (IK). Con
esto, se consiguen resultados mucho más ágiles y realistas
Unidad 1. Introducción a Flash Professional CS5 (II)
1.4. Flash, ventajas y desventajas
El principal uso de Flash se da en el mundo de la web. Desde la creación de pequeños
botones o banners publicitarios, hasta webs totalmente basadas en esta tecnología, Internet
está repleta de animaciones Flash.
Como todo, Flash presenta tanto ventajas como inconvenientes:
El tiempo de carga. Mientras que una página HTML puede ocuparnos 10-20 KB como
media, una animación Flash ocupa mucho más. Evidentemente depende del contenido
que tenga, pero suelen superar los100 KB con facilidad, y si además incorpora sonidos
es fácil que la cifra se dispare. Al ocupar más espacio, el tiempo que tardan estar visible
el contenido Flash es mayor y no todos los visitantes están dispuestos a esperar...
simplemente, se irán a otra página.
Los buscadores. Son capaces de indexar el contenido de nuestra página, el texto, pero
no el contenido del Flash, ya que no lo pueden leer, lo que afectará negativamente al
posicionamiento de la página. Y hoy en día es crucial para una web encontrarse bien
posicionada. No obstante, los buscadores trabajan para solucionar este problema, pero
de momento al mejor forma de solucionarlo es crear un diseño paralelo sin Flash, lo que
aumenta el trabajo.
Flash requiere de plugins para poder visualizarse, y el hecho de no tenerlos
instalados, o de que un navegador tenga los scripts deshabilitados por seguridad,
impedirán la visualización del Flash. Este plugin lo suelen incorporar la mayoría de
navegadores, es gratuito y se puede instalar desde aquí de forma muy intuitiva, pero
siempre habrá usuarios que prefieran salir de nuestra página si tienen que instalar "algo
raro".
Compatibilidad con distintos dispositivos. Cada vez es más frecuente acceder a la
web con teléfonos móviles, SmartPhones y Tablets, y algunos de ellos no soportan
Flash (como los Android anteriores a la versión 2.2).
Flash es una tecnología propietaria de Adobe, por lo que su futuro depende de lo que
esta compañía quiera hacer con él.
Otro aspecto a tener en cuenta es la usabilidad de las páginas Flash, a veces se cae en
la tentación de dar demasiada importancia al diseño y olvidarse de que la página debe
ser fácil de usar, aunque es más un error de diseño que del propio Flash.
Tendencia a su desuso en la web. Con la llegada de HTML5, se solventan muchas de
las carencias de las páginas tradicionales que nos obligaban a usar Flash. Por lo que su
uso deja de tener tanto sentido. De hecho, Flash CS5 incluye una herramienta para
exportar contenidos Flash a HTML5.
Por supuesto su fuerte uso en la web se debe a que también aporta ventajas:
La web se vuelve muy vistosa y atractiva, además de añadirle más interactividad. El
aspecto visual es muy importante para la web, ya que al visitante, sobre todo al principio,
"le entra por los ojos".
Con un poco de práctica, el desarrollo con Flash se vuelve rápido.
Flash permite comportamientos que de otra forma no podríamos lograr.
Compatibilidad con navegadores. Uno de los principales problemas en el diseño web
es que el resultado no tiene por qué verse igual en todos los navegadores. Con Flash,
nos aseguramos de que lo que hemos creado es exactamente lo que se verá.
Por tanto, se hace necesario cuando lo que se necesita es que el usuario pueda
interactuar completamente con el contenido.
Resumiendo, insertar o no contenido Flash en una página web puede ser cuestionable,
aunque depende de muchas cosas. Aún así, no hemos de olvidar que Flash tiene muchísimas
aplicaciones más (hecho que ha provocado que otras compañías traten de sacar a la venta
"clónicos" del Flash). Por ejemplo, se puede usar Flash para la creación de DVDs interactivos
(como los que incluyen las revistas de informática, entre otras), la creación de banners
publicitarios o lo que más está de moda ahora: la creación de dibujos animados (os
sorprendería saber la cantidad de dibujos animados conocidos creados o animados mediante
Flash). Además, Flash tiene uso industrial, pues se emplea para optimizar planos, crear
diseños de interiores y trabajar con imágenes vectoriales en general. No dejéis de aprender a
manejar el programa con más futuro... (al menos en cuanto a diseño web)
Aquí tenéis algunas páginas interesantes hechas con FLASH NRG y fwa, o con entradas
muy llamativas http://www.derbauer.de/,
Nuestro consejo es emplear Flash únicamente en lo imprescindible en nuestra web dejando
el contenido principal de la web y los elementos de navegación como HTML, que la web
pueda funcionar si un usuario no puede ver los elementos en Flash y no se pierda nada
realmente importante, a no ser que se trate de una web en la que su valor sea justamente su
contenido interactivo o visual en Flash.
Unidad 1. Introducción a Flash Professional CS5 (III)
1.5. Mi primera animación Flash
Una de las características principales de Flash es su sencillez, esta sencillez en su
utilización permite crear animaciones de un modo efectivo y rápido.
Pongámonos en situación, supongamos que queremos crear una animación en la que una
pelota realice un movimiento de "bote", es decir, que baje y suba. Puede parecer un trabajo de
horas,
pero
nada
más
lejos
de
la
realidad.
Veamos cómo Flash nos lo pone fácil.
En este apartado no pretendemos enseñar cómo crear una animación Flash (pues eso se
verá más adelante), el objetivo es que entendamos cómo crea Flash las animaciones y de que
modo nos facilita el trabajo.
A primera vista, lo lógico parece ser dibujar la pelota en cada instante del movimiento, de
modo que cuantos más instantes dibujemos, más real parecerá el movimiento. Pues bien, con
Flash bastará con crear 3 fotogramas: en el primero dibujaremos la pelota en el instante inicial
(arriba del todo), en el segundo se dibujará la pelota en el momento de tocar el suelo y en el
tercero la pelota volverá a estar arriba (en realidad este tercer fotograma no hará falta crearlo,
pues bastará con copiar el primero). Por tanto, vemos que el trabajo más largo (dibujar los
objetos) ya está hecho.
Ahora, se determina el tiempo que durará cada movimiento (es decir, el tiempo que
transcurre entre los instantes en los que la pelota está arriba y abajo) y por último se le indica
a Flash que cree una animación de movimiento entre estos fotogramas. Fácil ¿verdad?
En esta versión de Flash aún se ha facilitado más la realización de animaciones de
movimiento como veremos en el tema correspondiente.
Observa cómo ha quedado:
Podéis poner a prueba vuestros conocimientos realizando la: Prueba de la Unidad I
1. Flash CS5 es desarrollado por Adobe, de ahí su perfecta integración con Photoshop.
a) Verdadero.
b) Falso.
2. Flash comenzó siendo un programa para crear animaciones web sencillas, gifs animados
... y con el paso de los años se ha convertido en el software referente de creación de
aplicaciones web interactivas.
a) Verdadero.
b) Falso.
3. Con cada versión, Flash incorpora más funciones, lo que lo torna un programa cada vez
más complicado y costoso de aprender.
a) Verdadero
b) Falso.
4. Flash CS5 dispone de un corrector sintáctico-semántico que facilita el trabajo con textos.
a) Verdadero.
b) Falso.
5. Flash soporta trabajar con numerosos formatos de ficheros, como ficheros EPS y PDF.
a) Verdadero.
b) Falso.
6. Flash incluye un buscador web, que nos permite localizar objetos, textos, animaciones etc
en Flash por toda la web.
a) Verdadero.
b) Falso.
7. Las animaciones o películas generadas por Flash CS5 tendrán un rendimiento
generalmente mayor que las creadas con versiones anteriores.
a) Verdadero.
b) Falso.
8. El lenguaje de programación de Flash, es ampleado y mejorado con el programa. La
versión actual es ActionScript 3.
a) Verdadero.
b) Falso.
9. Las Hojas de Estilo en Cascada (CSS) no son compatibles con Flash CS5, lo que dificulta
la integración con el diseño de nuestra página.
a) Verdadero.
b) Falso.
10. El anterior ActionScript 2 no es capaz de trabajar con Javascript, pues se ha quedado
desfasado.
a) Verdadero.
b) Falso.
11. Realizar una animación en Flash es un proceso largo pero mecanizable.
a) Verdadero.
b) Falso.
12. Una animación en Flash exige al autor representar todos los estados de la misma, si la
animación consiste en botar una pelota hasta una altura de 20 cm., el autor deberá
representar dicha pelota en todas sus posiciones posibles (unas 200 aproximadamente).
a) Verdadero.
b) Falso.
13. Realizar una animación con Flash sólo exige indicar a Flash los estados límite de la
misma, entendiendo por estado límite aquel que marca un cambio en la animación (en
nuestro ejemplo serían los instantes en los que la pelota deja de subir y comienza a bajar o
viceversa).
a) Verdadero.
b) Falso.
14. Una vez tenemos dibujados los fotogramas que queremos que formen parte de la
animación, nos falta indicar explícitamente a Flash que dichos fotogramas formarán una
animación, pues Flash no es capaz de saber esto a priori.
a) Verdadero.
b) Falso.
Unidad 2. El entorno de Flash CS5 (I)
2.1. La interfaz de Flash Pro CS5
Flash CS5 cuenta con un entorno o interfaz de trabajo de lo más manejable e intuitiva.
Además, tiene la ventaja de que es casi idéntica a la de otros programas de Adobe
(Photoshop, Dreamweaver, Illustrator...), 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 CS5 por primera
vez:
A lo largo de todo el curso trabajaremos con la versión de evaluación de Flash CS5 en
castellano. Podeis descargar esta versión de forma gratuita desde la web de Adobe. Estará
disponible hasta que se lance la siguiente evrsión.
En la imagen se puede ver la interfaz que nos encontraremos la primera vez que abramos
el programa Flash. Flash recordará nuestras preferencias y abrirá el programa tal y como lo
dejamos la última vez que lo utilizamos.
En esta imagen faltan algunos menús. Todos se irán viendo a lo largo de este curso
aunque no aparezcan en esta imagen, que sólo pretende mostrar las partes principales de la
interfaz de Flash. Veamos cuáles son.
Unidad 2. El entorno de Flash CS5 (II)
2.2. La barra de Menús
La Barra de Menús 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: 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.
Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que
permiten emular lo que un usuario pueda introducir en el entorno de edición) que hayamos
almacenado en nuestra animación, obtener otros nuevos de la página de Macromedia o
ejecutar los que ya tengamos.
Control: Desde aquí se modifican las propiedades de reproducción de la película.
Reproducir, Rebobinar, Probar Película....
Depurar: Aquí encontraremos las opciones de depuración de la película que te ayudarñan
a encontrar errores de progrmación en ActionScrit, entre ellos se encuentran Entrar, Pasar,
Salir, Continuar...
Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las
ventanas, incluye accesos directos a todos los paneles y también la posibilidad de crear tus
propios Espacios de Trabajo, guardarlos, cargarlos, etc.
Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Adobe, desde el
manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones
guiadas etc...
Veamos un ejemplo práctico del uso de menús, realiza el Ejercicio utilizar la cuadrícula
Unidad 2. Ejercicio: Utilizar la cuadrícula
Objetivo
Crear una cuadrícula que quedará visible al fondo del fotograma (posteriormente no saldrá
en la película) y que nos servirá como guía para poder dibujar objetos de forma exacta y
precisa.
Ejercicio paso a paso.
1. Pulsa en el menú Archivo.
2. Selecciona la opción Nuevo.
3. Elige ActionScript 3.0.
4. Aparecerá una nueva película. Si deseas crear la cuadrícula sobre una película ya
empezada, sáltate los 2 primeros pasos.
5. Selecciona la opción Cuadrícula del menú Ver.
6. Se desplegará un submenú como el de la figura.
7. Selecciona
la
opción
Mostrar
Cuadrícula
para
hacerlo
visible.
8. Selecciona la opción Editar Cuadrícula para ajustar los parámetros de la cuadrícula a tu
gusto (tamaño, color de fondo...)
9. Selecciona la opción Ajuste → Ajustar a Cuadrícula del menú Ver para que los objetos
que crees se acomoden a las líneas de la cuadrícula, consiguiendo alinearlos de un
modo fácil.
Unidad 2. El entorno de Flash CS5 (III)
2.3. La Línea de tiempo
La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado.
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 (24.0 en la imagen) y el Tiempo de película transcurrido (0.0s en la imagen).
A nivel conceptual, la Línea de Tiempo representa la sucesión de Fotogramas en el
tiempo. Es decir, la película Flash no será nada más que los fotogramas que aparecen en la
Línea de tiempo uno detrás de otro, en el orden que establece la misma Línea de tiempo.
Para saber más acerca de la Línea de Tiempo y de los distintos tipos de fotogramas que
existen visita nuestra Página Avanzada
.
2.4. Las 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. El uso de múltiples capas además, da lugar a películas bien ordenadas y de fácil
manejo (es conveniente colocar los el código ActionScript en una capa independiente llamada
"acciones", por ejemplo). Las ventajas y desventajas de usar capas se verá en la unidad
referente a Capas.
2.5. El Escenario
A continuación veremos las diferentes partes que conforman el Área de trabajo
empezaremos con la más importante: 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:
Añade metadatos a tus archivos para una mejor inclusión de estos en los motores de
busqueda rellenando los campos de Título y Descripción.
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.
Unidades de Regla: Unidad que se empleará para medir las cantidades.
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.
Para cambiar este número, arrastra con el cursor hacia la derecha o izquierda.
Transformar en predeterminado: Este botón permite almacenar las propiedades del
documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese
instante en adelante. Estas propiedades por supuesto podrán ser alteradas desde este panel
cuando se desee.
Para practicar estas operaciones te aconsejamos realizar el ejercicio paso a paso
Cambiar las dimensiones de la película
Unidad 2. Ejercicio: Cambiar las dimensiones de la película
Objetivo.
Practicar cómo se pueden cambiar algunos atributos fundamentales de las películas.
Ejercicio paso a paso.
1. Haz clic con el botón derecho sobre el fondo de la película.
2. Selecciona Propiedades del Documento.
3. En Unidades de Reglas selecciona Centímetros.
4. A continuación selecciona Dimensiones y escribe en las casillas Anchura 22,46 y en
Altura 16,84.
5. Pulsa en Aceptar y observa cómo cambia el tamaño. Estas medidas equivalen
aproximadamente a las estándar 640 x 480 px.
Unidad 2. El entorno de Flash CS5 (IV)
2.6. Las Vistas o Zooms
La Herramienta Zoom
se emplea para acercar o alejar la vista de un objeto,
permitiendo abarcar más o menos zona del Entorno de Trabajo. Cada vez que hagamos clic
en con el Zoom duplicaremos el porcentaje indicado en el desplegable Zooms.
Panel Zooms: Son un conjunto de accesos directos a Submenús existentes en el Menú
Ver. Son muy útiles y ayudan a acelerar el trabajo cuando se emplean correctamente.
Para saber más acerca de los Zooms página Básica
.
2.7. Los 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.
Estos paneles o ventanas se encuentran organizados en el lateral derecho del área de
trabajo. Pudiéndose expandir o minimizar con un clic de ratón.
Si no están visibles en el lateral derecho, puedes visualizarlos desplegando el menú
Ventana y haciendo clic sobre el nombre del panel que quieras mostrar.
Para mejorar la experiencia del usuario, Flash permite cargar y guardar tus propias
disposiciones de paneles, para que si en algún momento el entorno se vuelve un poco caótico
puedas recuperar tu configuración elegida desde el menú Ventana.
Para ello deberás acceder a la opción Ventana → Espacio de trabajo → Nuevo espacio
de trabajo y asignar un nombre a nuestro nuevo espacio.
Ahora sólo bastará darle un nombre a la disposición y será accesible desde el mismo
elemento de menú Espacio de trabajo en cualquier momento.
Todos los paneles se estudiarán en profundidad a lo largo del curso. Aún así, vamos a
nombrarlos y a resumir las funciones de la mayoría de ellos.
Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy útil.
Panel Color: Mediante este panel creamos los colores que más nos gusten.
Panel Muestras: Nos permite seleccionar un color de modo rápido y gráfico. (Incluidas
nuestras creaciones).
Panel Información: Muestra el tamaño y las coordenadas de los objetos seleccionados,
permitiéndonos modificarlas. Muy útil para alineaciones exactas.
Panel Escena: Modifica los atributos de las escenas que usemos.
Si aún no sabes lo que son las Escenas, te lo explicamos en nuestro tema básico
.
Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados.
Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra
película.
Panel Comportamientos: Permiten asignar a determinados objetos una serie de
características (comportamientos) que después podrán almacenarse para aplicarse a
otros objetos de forma rápida y eficaz.
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 Cadenas: Mediante este panel Flash aporta soporte multi-idioma a nuestras
películas.
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 Explorador de Películas: Nos permite acceder a todo el contenido de nuestra
película de forma fácil y rápida
Para practicar estas operaciones te aconsejamos realizar Ejercicio Acceder a los Paneles
Ejercicios unidad 2: El entorno de Flash CS5
Ejercicio 1: Crear una película a nuestro gusto
Crea una película que tenga las siguientes propiedades:
1. Un tamaño de 300 x 100 px
2. Un color de fondo rojo
3. Un Velocidad de los Fotogramas de 14 fps
Ejercicio 2: Estructurar una película
1. Abre una nueva película
2. Crea 2 Escenas y llámalas Escena 1 y Escena 2
3. Crea 2 capas en cada una.
4. Llámalas E1_1, E1_2 y E2_1, E2_2
Ejercicio 3: Creando fotogramas
1. Crea en una película nueva 3 fotogramas clave
2. Crea 3 fotogramas normales, cada uno asociado a un fotograma clave distinto
Ejercicio 4: Identificando fotogramas
1. Dada la siguiente película
Identifica todos los tipos de fotogramas existentes y a qué tipo pertenecen. ¿Recuerdas
para qué sirve cada uno?
Ejercicio 5: Paneles
1. Abre el Panel Color.
2. Abre el Panel Acciones.
3. Abre el Panel Alinear.
4. Cierra el Programa Flash CS5
5. Vuelve a abrirlo. ¿Qué notas?
Si no tienes muy claro las operaciones a realizar, Aquí te ayudamos
Ayuda ejercicios unidad 2: El entorno de Flash CS5
Ejercicio 1: Crear una Pelicula a nuestro gusto
El apartado 1 nos propone cambiar las dimensiones del Escenario:
1. Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento.
2. Pulsamos sobre la pestaña Unidades de Regla y seleccionamos Píxeles (px)
3. Introducimos las medidas pedidas (300 x 100) en Dimensiones.
El apartado 2 nos propone cambiar el color de fondo del Escenario:
1. Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento
2. Pulsamos sobre la pestaña Color de fondo, el puntero se convertirá en un
"cuentagotas".
3. Seleccionamos el color pedido.
El apartado 3 nos propone aumentar la velocidad de reproducción de la película
1. Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento.
2. En Veloc. Fotogramas escribe 14 fps.
El resultado debe ser un rectángulo rojo con las medidas propuestas.
Ejercicio 2: Estructurar una Película
Vamos a crear la película pedida y a estructurarla tal y como piden
1. Abrimos una nueva Película desde el menú Archivo → Nuevo
2. Accedemos al Panel Escena desde Ventana → Otros Paneles → Escena
3. Creamos una nueva Escena pulsando sobre el signo
.
4. Les cambiamos los nombres haciendo doble clic en sus nombres actuales
Ahora falta crear el número de capas pedido.
1. Seleccionamos la Escena E1 en el Panel Escena
2. Creamos otra capa más, pulsando el signo
en la línea de tiempo.
3. Les cambiamos los nombres a las 3 capas haciendo doble clic en sus nombres actuales
(por defecto Capa 1 y Capa 2)
Seleccionamos la Escena E2 en el Panel Escena y repetimos los pasos anteriores del 2
al 3.
El Panel Escena debería quedar así:
Y así las Capas:
Ejercicio 3: Creando Fotogramas
Vamos a crear los fotogramas pedidos:
1. Abrimos una nueva película
2. Hacemos clic sobre el fotograma 2, pues en el 1 ya hay un Keyframe
3. Vamos al menú Insertar y seleccionamos Fotograma Clave
4. Hacemos clic sobre el fotograma 3 y seleccionamos Insertar → Línea de Tiempo →
Fotograma Clave
Ya tenemos los 3 Fotogramas Clave creados. Faltan los fotogramas normales
1. Seleccionamos el fotograma 1 y hacemos clic en el menú Insertar → Línea de Tiempo
y seleccionamos Fotograma.
2. Ahora el fotograma 2 será un fotograma normal y el 3 y el 4 serán Fotogramas Clave.
Seleccionamos el fotograma 3 y repetimos el proceso anterior.
3. Seleccionamos el fotograma 5 y lo volvemos a repetir. Esto será lo que obtengamos:
Fijémonos en que no están los puntos negros en los Fotogramas Clave ni los cuadrados
blancos en lo fotogramas normales.
Esto se debe a que no hay nada dibujado en dichos fotogramas.
si probamos a insertar algo en cada par de fotogramas, inmediatamente obtendremos esto:
Ejercicio 4: Identificando Fotogramas
Vamos a identificar los diferentes tipos de fotogramas:
1. Hay 3 Fotogramas Clave. Son el fotograma 1, el 7 y el 9. Los 2 primeros representan
una animación de Movimiento. (probablemente contendrán al mismo objeto pero
cambiado de lugar). El tercero es un Fotogramas Clave normal.
2. Los fotogramas entre el 1 y el 7 y los fotogramas entre el 9 y el 13 (no incluidos) son
fotogramas normales. Simplemente determinan la duración de los Keyframes a los que
van asociados.
3. Los fotogramas del 13 al 15 (incluidos) y el fotograma 8 son Fotogramas Contenedor.
Existen y en la película se verán como fotogramas en blanco (o con el color de fondo
que hayamos seleccionado).
4. Los fotogramas del 16 en adelante son fotogramas vacíos y no se verán en la película.
Ejercicio 5: Paneles
1. Abrimos el Menú Ventana.
2. Hacemos clic en Color. Se abrirá el Panel correspondiente.
3. Repetimos los pasos del 1 al 2, pero abriendo el panel Alinear.
4. Cerramos el programa y lo volvemos a abrir.
5. Observamos que los Paneles siguen donde los dejamos. Flash adapta su entorno a
nuestras preferencias.
Unidad 3. Dibujar y colorear (I)
3.1. El dibujo en Flash CS5
Cuando se diseña una página web o una animación el diseñador pasa por muchas fases.
Tras la fase de "Qué quiero crear y cómo va a ser" viene (normalmente) la fase de diseño
gráfico. Llevar lo que ha producido tu imaginación al papel (en este caso al papel de Flash).
No conviene engañarnos, Flash no es un programa de diseño gráfico, pero su potencia en
este ámbito es casi tan grande como la de éstos programas. Vamos a ver cómo emplear cada
herramienta de dibujo para sacarle el máximo partido.
3.2. La barra de Herramientas. Herramientas básicas
La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo.
Algunas herramientas llevan asociados modificadores de herramientas, que permiten cambiar
algunas propiedades de la herramienta, y que aparecen al final del panel de herramientas.
Veamos las herramientas más importantes:
Herramienta Selección (flecha):
. Es la herramienta más usada de todas. Su uso
principal es para seleccionar objetos, permite seleccionar los bordes de los objetos (con
doble clic), los rellenos (con un sólo clic), zonas a nuestra elección... Su uso adecuado
puede ahorrarnos tiempo en el trabajo.
Herramienta Texto:
Crea un texto en el lugar en el que hagamos clic. Sus
propiedades se verán en el tema siguiente.
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 situando el
cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la
recta para curvarla.
Herramienta de forma: Permite dibujar
formas predefinidas como las que aparecen en la imagen, la última herramienta utilizada
es la que aparece como icono en la barra de herramientas. Manteniendo pulsado el
icono podremos acceder a las diferentes herramientas de forma. Por ejemplo:
La herramienta Óvalo permite dibujar círculos o elipses de manera rápida y sencilla.
Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Crear
Óvalo.
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 Pincel:
Su funcionalidad es parecida a la del lápiz, pero por defecto su
trazo es más grueso e irregular. Se suele emplear para aplicar rellenos. Se puede
modificar su herramientas.
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 Color o bien desde el subpanel Relleno que hay
en la Barra de Herramientas.
Herramienta Borrador:
Su funcionamiento es análogo a la Herramienta Pincel. Pero
su función es la de eliminar todo aquello que dibuje.
Unidad 3. Dibujar y colorear (II)
3.3. La barra de Herramientas. Herramientas avanzadas
Herramienta Lazo:
Su función es complementaria a la de la herramienta Selección, 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).
Al seleccionar esta herramienta, en el Panel de Herramientas aparecen estos botones:
. 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:
para seleccionar Poligono.
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 Subselección:
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.)
Herramienta Cuentagotas:
Su misión es "capturar" colores para que posteriormente
podamos utilizarlos. Para ver cómo funciona, consulta este videotutorial:
3.4. La barra de Herramientas. Opciones
Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su uso.
Para acceder a estas utilidades, a veces no basta con hacer clic en la Herramienta
correspondiente sino que además debemos hacer clic en la línea o en el objeto que has
dibujado.
Entonces aparecerá (o se iluminará si ya estaba presente) un submenú como este:
Ajustar a Objetos :
Se usa para obligar a los objetos a "encajar" unos con otros,
es decir, para que en caso de ser posible, sus bordes se superpongan, dando la sensación de
estar "unidos".
Convierte los trazos rectos en líneas menos rígidas.
Suavizar:
Realiza la labor inversa. Convierte los trazos redondeados en más
Enderezar:
rectilíneos.
Unidad 3. Dibujar y colorear (III)
3.5. El panel Color
El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y
para seleccionar los que más nos gusten.
Para seleccionar un color determinado, bastará con hacer clic en las pestañas que se
encuentran junto a los iconos de las herramientas de Lápiz y de Bote de Pintura. (Si
queremos modificar el color de un borde, pulsaremos sobre el color que está junto al lápiz
y si queremos modificar un relleno, haremos clic en el color que está junto al bote de
pintura
. Al hacerlo aparecerá un panel con multitud de colores para que
seleccionemos el que más nos gusta. También permite introducir el código del color según el
estándar.
En vez de este selector rápido, podemos usar el panel Color, que encontraremos entre los
paneles.
Así mismo se puede determinar el tipo de relleno que aplicaremos a los objetos creados
(mediante la herramienta Bote de Pintura).
Se pueden crear diferentes tipos de relleno:
Sólido: Consiste en un relleno formado por un solo color.
Degradado Lineal: Es un tipo especial de relleno, de modo que un color se degrada
hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otro
Degradado Radial: Es igual que el anterior, pero los degradados tiene forma circular.
Relleno de mapa de Bits: Permite colocar como relleno alguna imagen existente en la
película (O ajena a ella si antes se "importa")
Para aprender a crear un color transparente (semi-transparente), realiza el ejercicio paso
a paso Crear transparencias.
3.6. El panel Muestras
El Panel Muestras sirve para poder ver de un modo rápido y claro los colores de que
disponemos, tanto sólidos (un solo color) como degradados (lineales o radiales). Además,
cuando creemos un color mediante el Panel Color, podremos agregarlo a nuestro conjunto de
muestras mediante Agregar Muestra (que se encuentra en un menú desplegable en la parte
superior derecha del panel Color). Una vez esté agregado el color, pasará a estar disponible
en nuestro conjunto de muestras y podremos acceder a él rápidamente cada vez que
trabajemos con nuestra película.
Cada película tiene su propio conjunto de muestras y cada vez que la abramos para
editarla, podremos usar las muestras que teníamos la última vez que trabajamos con dicha
película.
Para practicar el manejo de este panel, te aconsejamos realizar el ejercicio paso a paso
Colorear un óvalo
Unidad 3. Ejercicio: Colorear un óvalo
Objetivo
Dar color a un elemento simple. Tanto a su interior como a su exterior
Ejercicio paso a paso
1. Abre el archivo que creamos en el primer ejercicio de la unidad, trabajo.fla.
2. Hacemos clic en el interior del óvalo o en su borde. Dependerá de la zona cuyo color
queramos
modificar.
Obtendremos algo similar a la figura 1 o a la 2.
Seleccionamos el Interior del Óvalo
Seleccionamos el Borde del Óvalo
Ejercicios unidad 3: Dibujar y colorear
Ejercicio 1: Bandera Olímpica
1. Dibuja 5 aros.
2. Cámbiale los colores. Por ejemplo, los colores de la bandera olímpica (azul, negro, rojo,
amarillo y verde)
3. Únelos de modo que parezcan los aros olímpicos.
Ejercicio 2: Saturno
1. Dibuja un óvalo
2. Convierte su color de relleno un degradado de verde oscuro a verde claro (por ejemplo).
3. Crea el aro que le rodea.
4. Une los 2 objetos para que parezca el planeta Saturno
Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.
Ayuda ejercicios unidad 3: Dibujar y colorear
Ejercicio 1: Los Aros Olímpicos
Vamos a dibujar los aros olímpicos.
Como siempre, partiremos de un nuevo documento Action Script 3.0, a través del menú
Archivo → Nuevo.
1. Seleccionamos la Herramienta Óvalo.
2. Trazamos un óvalo, y para que sea perfectamente circular, mantenemos pulsada la tecla
Shift.
3. Ahora, podemos intentar crear los otro cuatro aros iguales, o seleccionarlos con la
herramienta Selección, copiarlos desde el menú Edición → Copiar y pegarlos desde el
mismo menú.
4. Una vez estén dibujados, seleccionamos el relleno de cada óvalo y pulsamos la tecla
Suprimir para eliminarlo. (Igualmente podíamos haber seleccionado el color "ninguno"
y posteriormente creado los óvalos que hubieran aparecido sin color de fondo)
5. Ahora seleccionamos los bordes de cada aro y le damos el color que queramos
seleccionándolo en el Panel Color.
6. Ahora mueve cada aro hasta la posición deseada. Para mover un objeto, selecciona la
Herramienta Selección, haz clic en el aro que quieras mover y arrástralo. Para
movimientos precisos, puedes utilizar las teclas con flechas.
Ejercicio 2: Saturno
Vamos a dibujar un planeta parecido a Saturno
1. Seleccionamos la Herramienta Óvalo.
2. Creamos un óvalo circular, que hará de planeta.
3. Eliminamos el borde, para ello, hacemos clic en él y pulsamos la tecla Suprimir.
4. Seleccionamos el relleno del óvalo y abrimos la opción Relleno.
5. Seleccionamos la opción Degradado Radial.
6. Pulsamos en
y seleccionamos los colores que
deseemos, (podemos añadir tantos colores como queramos y probar su efecto).
7. Dibujamos el anillo del planeta, por ejemplo creando otro óvalo con la forma adecuada.
No lo dibujes sobre el planeta.
8. Tenemos que cambiar la forma de uno de los 2 para que tenga la forma deseada. Por
ejemplo, borramos parte del planeta seleccionándola de forma rectangular y pulsando la
tecla Suprimir tal y como vimos en el paso 3.
9. Separa los dos hemisferios del planeta.
10. Pon el anillo sobre el hemisferio inferior, y después, arrastra sobre el anillo la otra parte
del planeta.
Prueba evaluativa de la unidad III
1. El panel que contiene las utilidades necesarias para dibujar, pintar, etc se llama Barra de
Herramientas.
a) Verdadero
b) Falso
2. Flash CS5 trabaja con colores puros de alta definición, lo que imposibilita su mezcla y por
tanto el uso de más de 256 colores.
a) Verdadero
b) Falso
3. Flash dispone del efecto Alfa, que añade transparencia a los colores. Efecto muy atractivo
y vistoso.
a) Verdadero
b) Falso
4. Las herramientas
y
tienen la misma función, salvo que la primera se emplea para
objetos coloreados y la segunda para objetos sin color.
a) Verdadero
b) Falso
5. La herramienta Lazo es capaz de seleccionar formas y trazados no posibles con la
herramienta Selección.
a) Verdadero
b) Falso
6. La herramienta Cubo de pintura se emplea únicamente para dar color al fondo de las
películas.
a) Verdadero
b) Falso
7. El Panel de colores se emplea para crear nuestros propios colores, mezclarlos a nuestro
gusto y añadirles efectos tales como el Alfa.
a) Verdadero
b) Falso
8. La herramienta Cuentagotas sirve para contar el número de colores diferentes que
contiene una imagen.
a) Verdadero
b) Falso
9. Las herramientas y se diferencian en que el lápiz dibuja más fino que el pincel.
a) Verdadero
b) Falso
10. Es posible en Flash crear un color de relleno a partir de una imagen de mapa de bits
previamente importada a nuestra película.
a) Verdadero
b) Falso
Unidad 4. Textos (I)
4.1. El texto en Flash
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...
Actualmente Flash utiliza dos motores para trabajar con texto: el motor clásico, heredado
de las anteriores versiones, y el llamado Text Layout Framework (TLF), el nuevo motor
incluido en Flash CS5. Este último, es el utilizado por defecto en Flash.
Por defecto, salvo que indiquemos otra cosa, en nuestros ejemplos emplearemos el motor
de texto TLF.
4.2. Insertar texto
En la barra de Herramientas encontramos la herramienta Texto
permitirá escribir texto en nuestros proyectos.
, que es la que nos
Los caracteres del texto no está introducidos directamente en el documento, si no que
están confinados en un contenedor de texto. En Flash podemos introducir dos tipos de
contenedores:
Texto de puntos.
El tamaño del contenedor depende del texto introducido, creciendo y decreciendo con él.
Texto de área.
Podemos definir su tamaño, independientemente del texto que contenga.
Para insertar un Texto de puntos, basta con hacer clic con la herramienta Texto y
comenzar a escribir. En cambio, si queremos introducir un Texto de área, tenemos que hacer
clic y arrastrar para definir el tamaño del área. En cualquier caso, siempre podemos convertir
un Texto de puntos en área simplemente cambiando su tamaño, estirando de los controles de
transformación que se muestran alrededor.
Para saber más acerca de Cómo escribir textos visita nuestra página avanzada
Unidad 4. Avanzado: Escribir texto
Tras hacer clic con la Herramienta Texto en cualquier parte del fotograma actual, nos
aparecerá algo así:
El recuadro que vemos es el recuadro que contendrá al texto. En la
película final no se verá, pero nos servirá para localizar más fácilmente el texto y para moverlo
o cambiar su tamaño. Finalmente, el círculo que hay arriba a la derecha significa que el
recuadro del texto se expandirá según vayamos escribiendo y también el texto. Esto es, todo
lo que escribamos, estará en la misma línea.
Si escribimos en el recuadro creado por defecto vemos como se alarga el recuadro que lo
contiene. Para cambiar de línea, sería necesario pulsar la tecla Enter (Intro).
Si por otra parte, queremos delimitar lo que va a ocupar nuestro texto (cosa bastante
común, acercaremos el cursor del ratón al borde del recuadro de texto, según donde lo
acerquemos, se transformará en un símbolo o en otro.
Si lo acercamos al borde del recuadro, se le añadirá debajo de la flecha una flecha
pequeña de 4 direcciones como la que muestra la figura y que nos indica que podemos mover
el texto:
Si lo acercamos al círculo que está en el margen superior derecho, el cursor se convierte
en un flecha de "ensanchamiento", como la que muestra la figura:
Con el cursor convertido en flecha de "ensanchamiento", podemos estirar los límites del
recuadro de texto, y además, el círculo que aparecía en el margen superior derecho, se
convierte en un cuadrado. Este cuadrado significa que los límites del recuadro de texto han
quedado fijados, y que al insertar más texto, se producirá un salto de línea en lugar de
ensanchar el recuadro de texto. Este sería su comportamiento al introducir texto:
Si quisiéramos, (una vez definido el recuadro de texto) volver al modo anterior, basta con
hacer doble clic sobre el cuadrado que está en el margen superior derecho del recuadro de
texto. Tras hacerlo, se convertirá en un círculo y su comportamiento será el descrito al
principio de esta página.
Unidad 4. Textos (II)
4.3. Propiedades de los textos
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. Podemos ver que el panel
muestra una gran cantidad de opciones, agrupadas en categorías.
Observarás que las imágenes anteriores muestran distintas opciones para el texto. Esto se
debe a que la de la izquierda tiene seleccionada el motor Texto TLF, que nos permite muchas
más opciones. La de la derecha tiene establecido el motor Texto clásico, y aparecen menos
opciones, las que veníamos encontrando en la anterior versión del programa.
Si quieres saber cómo utilizar el texto clásico, puede seguir este avanzado
.
Nota: El motor de texto TLF requiere publicar los archivos como ActionScript 3 y
FlashPlayer 10 o posterior. Si necesitas publicar archivos para versiones anteriores, deberás
de emplear el motor clásico.
Veamos las principales opciones del panel Propiedades, comunes a ambos motores. Otras
más específicas las veremos más adelante, cuando vayamos a emplearlas:
Podemos elegir cómo se comporta el texto: Si es Seleccionable, y el usuario lo podrá
seleccionar y copiar en el portapapeles, Sólo lectura, lo que impedirá que lo pueda
seleccionar, o si lo puede cambiar (Editable), por ejemplo, para introducir datos.
Además, podemos establecer la orientación del texto, en Horizontal (por defecto) o
Vertical.
Posición y Tamaño: 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.
En el panel encontramos las coordenadas horizontal (X) y vertical (Y) del la esquina
superior del elemento de texto, coincidiendo las coordenadas 0 0 con la esquina superior
izquierda de la escena. También se muestran los valores del ancho (AN) y alto (AL) del texto.
Carácter. En esta sección encontramos las opciones típicas del texto:
Familia:
Desde aquí, al igual que en
los editores de texto más comunes podemos seleccionar el tipo de letra o "fuente" que mejor
se ajuste a nuestro diseño.
Estilo: Nos permiten la combinación de los dos estilos de texto habituales: texto normal
(Regular), en cursiva (Italic), negrita (Bold) o negrita cursiva (Bold Italic).
Tamaño: El tamaño de la tipografía empelada.
Interlineado: Nos permite controlar la separación entre las líneas de texto dentro de un
mismo párrafo.
Color: Como al resto de elementos, podemos dar color al texto.
Espaciado: Determina el espaciado adicional entre caracteres. Útil cuando la tipografía
que empleamos muestra las letras muy juntas o para dar efectos concretos al texto.
Ajuste automático: Activar esta casilla provoca que la separación entre caracteres se
realice de modo automático.
Suavizado: Las opciones de suavizado resultan importantes a la hora de mostrar nuestro
texto. Encontramos estas opciones:
o
Utilizar fuentes de dispositivo: Se emplean las fuentes instaladas en el
equipo, lo que hace más liviano el archivo SWF al no tener que incluirlas.
Aunque nos exponemos a que la fuente no esté instalada, por lo que se
empleará otra. Sólo deberíamos de utilizar esta opción para las familias de
fuentes más comunes.
o
Suavizado para legibilidad, favorece la legibilidad del texto. En este caso,
deberíamos de incorporar la fuente, como veremos más adelante. No debemos
de emplearla en textos animados.
o
Suavizado para animación, es la mejor opción cuando pretendemos animar
texto, ya que se obtienen animaciones más fluidas ignorando algunos aspectos
del texto, como alineaciones. En este caso, deberíamos de incorporar la fuente.
Giro y otros estilos: Al final de este grupo de opciones encontramos las opciones para
rotar el texto seleccionado, y aplicarle estilos de subrayado, tachado, superíndice y subíndice.
Carácter avanzado:
Vínculo: 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.
Destino: Determina si la URL a la que el texto hace referencia se cargará en la misma
ventana del navegador, en una nueva ...
Además, en esta sección podemos especificar cómo se comporta el texto Por ejemplo, que
se muestre en mayúsculas, los saltos, etc...
Unidad 4. Textos (III)
Un Párrafo no es más que un conjunto de caracteres con propiedades comunes a todos
ellos. Estos párrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto.
El Panel Propiedades nos proporciona las siguientes opciones para trabajar con párrafos
(entre otras).
A la Izquierda:
Todas las líneas empezarán tan a la izquierda como sea posible (dentro
del recuadro de texto que hayamos definido).
Centrar:
Las líneas se distribuyen a la derecha y a la izquierda del punto medio del
párrafo.
A la derecha:
Todas las líneas empezarán tan a la derecha como sea posible 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. Las diferentes opciones se refieren a la última línea del
texto, que suele ser más corta que el resto.
El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho), los
sangrados de párrafo y el espacio interlineal.
Para practicar estas propiedades te aconsejamos realizar Ejercicio Propiedades del texto.
4.4. Propiedades de los contenedores de texto
En el panel de propiedades, podemos encontrar algunas opciones que afectan a los
contenedores de texto, en la categoría de opciones Contenedor y flujo.
La propiedad Comportamiento se refiere a como se amplía un contenedor de Texto al
introducir texto.
Caracteres máx.: Nos permite limitar el número máximo de caracteres que se pueden
introducir en la caja de texto.
Alineación: nos permite establecer la alineación horizontal del texto en el contenedor. Sus
valores pueden ser Superior, Centrar, Inferior o Justificar.
Columnas nos permite dividir fácilmente un texto de área en el número de columnas
indicado. En este caso, también podremos regular el espacio entre ellas (medianil).
.
El relleno (padding) permite crear una separación entre los bordes del contenedor y el
texto.
Además, podemos asignar un color de relleno y borde al contenedor.
Unidad 4. Textos (IV)
4.5. Flujo de texto entre contenedores
Al escribir, podemos crear textos de áreas con un texto fijo, y colocarlo en un lugar del
documento. Pero pensemos en un tríptico, por ejemplo. En este caso lo ideal sería tener un
texto de área centrado en cada página, y que cuando el texto no nos cabe en uno, pase al
siguiente. Esto lo conseguimos enlazando los distintos textos de área.
Los textos de área tienen un cuadradito en su comienzo, llamado puerto de entrada, y
otro al final, llamado puerto de salida.
Cuando todo el texto cabe en el elemento de texto, el puerto de salida aparece en blanco.
Pero cuando el texto desborda al elemento, el puerto de salida muestra el símbolo
. Cuando
dos elementos de texto aparecen enlazados, el que va primero muestra una flecha hacia
afuera en el puerto de salida, que está unido al puerto de entrada del siguiente elemento, que
muestra una flecha hacia adentro.
Para crear un elemento de texto enlazado, partimos de un objeto de texto ya creado, y
hacemos clic con la herramienta Selección en uno de sus puertos, en el de entrada si
queremos que el nuevo objeto vaya delante, o en el de salida si el nuevo objeto irá a
continuación. El cursor cambiará a cursor de
, dándonos dos opciones:
Hacer clic en el en otro área de texto para enlazarlo.
Trazar un nuevo elemento de texto, igual que con la herramienta Texto. Si esto lo
hacemos en un puerto ya enlazado, el nuevo elemento de texto se colocará entre los
elementos que estaban enlazados.
Para romper un enlace, podemos hacer doble clic sobre un puerto enlazado, lo que mueve
todo el texto al puerto de origen.
Para practicar lo que hemos visto, te aconsejamos realizar el ejercicio paso a paso Crear
un flujo de texto.
4.6. Incorporar fuentes
Al crear un archivo de flash con texto, si en Suavizado no hemos elegido fuentes de
dispositivo, tenemos que tener presente que si hemos elegido una fuente que no está
disponible en el sistema que se reproduce la película, se sustituirá por otra fuente disponible.
Esto es un problema, ya que puede alterar bastante nuestro diseño.
Para evitar esto, podemos incluir las fuentes que hemos empleado en nuestro proyecto.
Esto garantiza que el texto se vea tal y como lo creamos, independientemente de las fuentes
del sistema.
Para incorporar una fuente en la película usamos el botón Incorporar que aparece en el
panel de Propiedades.
Se abrirá el siguiente cuadro de diálogo:
En el desplegable Familia seleccionamos la fuente que deseamos utilizar. Seleccionamos
los estilos que vamos a utilizar (Negrita, Cursiva y Tamaño).
El nombre que le demos se mostrará en la Biblioteca y estará lista para utilizarse.
Cuando creemos un campo de texto, seleccionamos nuestra fuente, que aparecerá
señalada con un asterisco (*).
De esta forma nos aseguramos que nuestro proyecto se verá tal cual lo creamos.
Unidad 4. Textos (V)
4.7. Introducir texto
Aunque el uso más común y principal de los contenedores de texto es mostrarlo, también
podemos emplearlos como un cuadro de entada de texto.
Para hacerlo, basta con seleccionar Texto editable en las propiedades del elemento.
En el siguiente ejemplo, tenemos tres cuadros de texto: el de arriba es editable, el del
medio solo seleccionable y el de abajo solo se puede leer. Y también hemos hecho que el
contenido de todos cambie según lo que se escriba en el primero.
Para recoger información de los usuarios, normalmente emplearemos componentes de
formulario, que son controles específicos para esta función. Pero a esto le dedicaremos un
tema completo más adelante.
Pero ¿cómo recogemos la información introducida en el cuadro de texto? Aunque aún no lo
hemos explicado, el texto es un objeto. Y como tal, tiene una propiedad que nos permite leer
su contenido mediante ActionScript. Cuando comencemos a trabajar con ActionScript
veremos que esto, es una tarea muy sencilla.
Ejercicios unidad 4: Textos
Ejercicio 1: Crear textos
1. Crea una película con 1 fotograma.
2. Crea un objeto de texto para lectura que diga: Bienvenido a mi página web.
3. Utiliza la fuente Verdana a un tamaño de 45.
Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.
Ayuda ejercicios unidad 4: Textos
Ejercicio 1: Crear textos
1. Creamos la película mediante Archivo → Nuevo, eligiendo ActionScript 3 (por defecto
tendremos un único fotograma).
2. Selecciona la herramienta Texto del Panel de Herramientas.
3. Haz clic sobre el escenario.
4. Veremos esta imagen
. Escribe dentro el texto Bienvenido a mi página web.
5. Centra el texto haciendo clic en
en el Panel de Propiedades.
6. Cambia la fuente del texto a Verdana seleccionándola en el desplegable Familia.
7. Haz clic sobre el control de Tamaño y arrástralo hacia la derecha hasta que llegue a 45.
8. En el desplegable Suavizado, elige Legibilidad.
Prueba evaluativa de la unidad IV
1. Flash CS5 no puede trabajar con textos, ya que es un programa para realizar animaciones
gráficas.
a) Verdadero
b) Falso
2. Flash nos permite escribir nuestros textos empleando cualquier fuente que tengamos
instalada en nuestro ordenador.
a) Verdadero
b) Falso
3. Flash incluye opciones para sus textos más propias de CSS que de HTML, como por
ejemplo, sangrados de párrafo, espacios entre caracteres...
a) Verdadero
b) Falso
4. Flash es el único programa que crea animaciones de texto fácilmente.
a) Verdadero
b) Falso
5. ¿Cuál de estas 3 afirmaciones es correcta?
a) Un texto marcado como Seleccionable, podrá leerse, pero no copiarse.
b) Un texto marcado como editable permite introducir texto.
c) Un texto de solo lectura, puede ser seleccionado y copiado.
6. ¿Cuál de las siguientes afirmaciones es falsa?
a) Para que un usuario pueda introducir texto, debe de estar suavizado para animación.
b) Los Textos de punto pueden convertirse a Textos de área solo con cambiar su
tamaño.
c) Los Textos de área se pueden dividir en columnas.
7. Es posible modificar el tamaño de la caja de texto de entrada "tirando" de cualquiera de
los cuadrados que podemos encontrar en las cuatro esquinas del objeto.
a) Verdadero
b) Falso
8. Para que el texto fluya de un área de texto a otra...
a) Tenemos que enlazar el puerto de salida de la primera con el puerto de entrada de la
segunda.
b) Podemos crear una nuevoa área de texto enlazada haciendo clic en un puerto de
salida desbordado.
c) Podemos usar cualquiera de las dos opciones anteriores.
9. Podemos convertir un texto creado con el motor TLF a Texto clásico.
a) Verdadero
b) Falso
10. Para que el texto animado se vea lo mejor posible, debemos de suavizarlo para
legibilidad.
a) Verdadero
b) Falso
Unidad 5. Sonidos en Flash (I)
5.1. El sonido en Flash
¿Quién sería capaz de ver una película muda? ¿Y una animación espectacular sin sonido?
Hasta hace poco, los únicos sonidos que oíamos en las páginas web eran los famosos
"midis", de escaso tamaño y de escasa calidad. De hecho, eran sólo instrumentos musicales
sin voz, de ahí su pequeño tamaño (y calidad). Aún así, siempre existía algún creador de
páginas web que se aventuraba a poner algún sonido complejo (.wav o .mp3) en su página
web, por desgracia, su carga es tan lenta, que la mayoría de los visitantes se irían de la
página sin llegar a escucharla.
Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner
sonido a las páginas web es un poco más fácil, ¿qué aporta Flash?
Flash nos permite insertar cualquier sonido que queramos en nuestras películas (.wav, .aiff,
.mp3, etc...) de forma fácil y muy efectiva, ya que es capaz de acelerar la descarga del sonido
siempre y cuando se descargue junto con nuestra película.
Podemos dar a la película efectos simples (el típico "clic" al pulsar un botón), efectos
complejos (música de fondo) e incluso podemos hacer que la animación se desarrolle
conjuntamente con una música (si bien esto último necesitaría que toda la película estuviera
descargada previamente, para evitar "atascos" durante el desarrollo de la animación). En
definitiva, Flash nos lo vuelve a poner fácil.
Pero hemos de tener cuidado al incluir sonidos, sobre todo si son melodías. Es preferible
que sea el usuario quien las active a través de un botón, o si es necesario que se reproduzcan
automáticamente, tener un control fácilmente localizable para silenciarlo.
5.2. Importar sonidos
Utilizar sonidos externos. Podemos insertar en una película de Flash sonidos que
tengamos en formato digital: grabados por nosotros mismos, descargados de internet,
etc...Pero para que esté disponible en nuestra película y podamos usarlo, antes debemos de
importarlo.
Realmente debemos de importar a flash cualquier archivo externo que queramos usar:
sonidos, gráficos, e incluso con otras películas Flash. Importar por tanto, no es más que
decirle a Flash que añada un determinado archivo a nuestra película, para que podamos
usarlo cuando queramos. En realidad, lo añade a nuestra Biblioteca, que es el Panel en el
que están todos los objetos que participan en la película (este panel se verá más adelante).
Así pues si queremos manejar un sonido en nuestra película, deberemos importarlo
previamente.
Una vez esté importado, podremos usarlo con total libertad.
Para importar un sonido haz clic en el menú Archivo → Importar → Importar a biblioteca.
Se abrirá el cuadro de diálogo de Importar a biblioteca. Allí deberás seleccionar en Tipo
de archivo Todos los formatos de sonido.
Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu
película. Selecciónalo haciendo clic sobre él y haz pulsa el botón Aceptar.
El sonido estará listo para usarlo donde quieras, podrás encontrarlo en la Biblioteca (menú
Ventana → Biblioteca).
Utilizar los sonidos incorporados. Flash ya incluye una serie de sonidos incorporados
que podemos importar a nuestro proyecto. Se trata principalmente de sonidos como disparos,
risas, sonidos animales, etc. Los podemos encontrar a través del menú Ventana →
Bibliotecas comunes → Sonidos. Se abrirá un panel como el siguiente:
Para incorporar alguno de estos sonidos a nuestra biblioteca de proyecto, no tenemos más
que arrastrarlos desde este panel.
Unidad 5. Sonidos en Flash (II)
5.3. Propiedades de los sonidos
En Flash CS5, al igual que en versiones anteriores, todo lo referente a los sonidos lo
podemos editar desde el Panel Propiedades. Aquí tenemos todo lo necesario para insertar,
modificar y editar el sonido que acabamos de importar. Si no hemos importado ningún sonido,
nos daremos cuenta de que no podemos seleccionar nada en dicho panel, basta insertarlo
para que esto cambie.
Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en
seleccionar el fotograma en el que queremos reproducir el sonido, tras hacer esto, el
Panel Propiedades toma el siguiente aspecto:
Veamos las partes que tiene este panel.
Nombre: En este desplegable nos aparecerán los sonidos que tenemos importados en la
Biblioteca. Deberemos seleccionar la canción que pretendamos añadir a nuestra película (en
el siguiente punto veremos cómo insertarla). Si no queremos reproducir sonido,
seleccionamos Ninguno.
Efecto: Desde aquí podremos añadir algún efecto a nuestro sonido, como por ejemplo
que el sonido pase del canal izquierdo al derecho (esto crea la sensación de que el sonido te
envuelve ya que lo oyes por un sitio y luego por otro, aunque queda muy lejos de los
verdaderos sonidos envolventes), que el volumen aumente progresivamente etc... Si
deseamos añadir complejos efectos sonoros, deberemos tratar adecuadamente el sonido con
algún programa creado específicamente para este propósito antes de importarlo.
En el punto Editar Sonidos se tratará en más profundidad estos efectos.
Sinc: Esta opción nos permite determinar en qué momento comenzará a actuar nuestro
sonido, estas son las opciones que tenemos:
Evento: Sincroniza nuestro sonido con un evento determinado. Es la opción por defecto
y provoca que el sonido se empiece a reproducir al pasar la película por el fotograma en
el que está situado. También se puede sincronizar el sonido con botones y los demás
tipos de símbolos. El sonido se repetirá completamente, y si lo ejecutamos varias veces,
se reproducirá de nuevo, aunque no hubiese acabado, provocando que el sonido se
solape.
Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si ya se
está reproduciendo, no se reproduce de nuevo.
Detener: Detiene el sonido seleccionado.
Flujo: Esta opción sincroniza el sonido con el o los objetos con los que esté asociado,
por tanto, si la carga de la película es lenta y las imágenes no fluyen adecuadamente, el
sonido se detendrá para sincronizarse con ellas. Este efecto puede dar la sensación de
que la película se corta de un modo muy brusco (pensar en que se considera normal
que una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce,
produce una reacción muy negativa en los que pueden estar viendo nuestra película).
Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el
efecto de que un personaje hable durante una película. En esta situación, es muy
recomendable que el sonido y las imágenes estén sincronizadas.
Repetir: Determina el número de veces que se reproducirá el sonido según lo indiques
de la derecha. También puedes seleccionar Reproducir indefinidamente para que el sonido
se reproduzca en un bucle hasta llegar al siguiente fotograma clave.
No recomendamos insertar sonidos con la opción Flujo y a la vez la de Repetir, ya que al
estar sincronizados los sonidos con las imágenes, provocaríamos que las imágenes (y los
fotogramas que las contengan) se dupliquen también, aumentando considerablemente el
tamaño de la película.
Unidad 5. Sonidos en Flash (III)
5.4. Insertar sonido en línea de tiempo
Al añadir un sonido directamente sobre la línea de tiempo, lo asociamos a un fotograma.
Por tanto, el sonido se comenzará a reproducir en ese fotograma, y continuará hasta que sea
detenido. Esto es útil, por ejemplo, para agregar música a la película.
Lo mejor será crear una nueva capa para cada sonido. Así lo controlaremos fácilmente.
Creamos un fotograma clave en el momento en que queremos que comience a reproducirse
el sonido, y lo arrastramos de la biblioteca al escenario. También podemos elegirlo
directamente desde el panel de Propiedades.
Con el fotograma de la nueva capa seleccionado, accedemos a sus propiedades, a la
sección de Sonido.
Seleccionamos los efectos deseados, y las veces que lo queremos Repetir.
En el menú Sinc. seleccionamos la opción de sincronización deseada. Por ejemplo, si
queremos que cada vez que se pase por ahí, se lance un sonido breve, porque por ejemplo se
mueve un objeto, seleccionaremos evento. En cambio, si queremos iniciar la reproducción del
sonido a partir de ahí, marcamos Inicio. Si queremos iniciar el sonido en un fotograma más
adelante, seleccionamos Detenido, y lo iniciamos creando un fotograma clave, seleccionado
el mismo sonido.
Así representa Flash los sonidos insertados en Fotogramas
Por defecto, Flash entiende que queremos reproducir el sonido completo, si no ¿por qué
importarlo todo cuando genera un archivo más grande? Por supuesto, podemos hacer que el
sonido se detenga en un fotograma determinado. Para ello, creamos un fotograma clave,
y con el mismo sonido seleccionado, elegimos Detener en el desplegable Sinc.
Otra sería utilizar la opción Flujo.
Al seleccionar esta opción, el sonido se reproducirá hasta que se acabe o llegue a un
fotograma clave, siguiendo la película. Sólo es aconsejable esta opción si realmente la
necesitamos.
Para practicar la inserción de sonidos realiza el Ejercicio paso a paso Trabajar con
sonidos
Unidad 5. Ejercicio: Trabajar con Sonidos
Objetivo.
Insertar un sonido que reproduzca desde el fotograma 5 al 15.
Ejercicio paso a paso.
1. Creamos la película mediante Archivo → Nuevo, eligiendo ActionScript 3 (por defecto
tendremos un único fotograma).
2. Creamos una nueva capa (icono Nueva capa de la línea de tiempo) y la seleccionamos.
3. Insertamos un nuevo fotograma clave en la línea de tiempo en el fotograma 5 y 15
(desde el Menú Insertar → Línea de Tiempo → Fotograma Clave, o pulsando F6).
4. Seleccionamos Archivo → Importar → Importar a Biblioteca, que se encuentra en el
Menú Archivo.
5. Se abrirá la clásica ventana de Windows para buscar un archivo. Buscamos el archivo
sonido.mp3 en la carpeta de ejercicios y pulsamos Abrir.
6. El sonido ya está insertado. Hacemos clic en el Panel Biblioteca (Ventana →
Biblioteca) y comprobamos que se encuentra allí.
7. Seleccionamos el fotograma 5 (donde queremos insertar el sonido).
8. Después seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el
escenario.
9. Ve al panel de Propiedades, y la opción Sinc. selecciona Evento.
10. Prueba la película (tecla Intro) y comprobarás que el sonido se reproduce hasta al
final. Pulsa varias veces Intro y comprobarás que el sonido se reproduce varias veces
solapándose.
11. En el despegable Sinc de las Propiedades, cambia el valor a Flujo. Repite el paso
anterior y comprueba que el sonido se para al llegar al último fotograma.
12. En el despegable Sinc de las Propiedades, cambia el valor a Iniciar. Repite el paso
anterior y comprueba que el sonido no se vuelve a iniciar si aún no ha acabado, aunque
se reproduce hasta el final.
13. Selecciona el fotograma clave 15.
14. En el Panel Propiedades, en Sonido, elige el Nombre del archivo que estamos
utilizando.
15. En la opción Sinc selecciona Detener.
16. Prueba la película y comprobarás que ahora se detiene al llegar la fotograma 15
Unidad 5. Sonidos en Flash (IV)
5.5. Sonidos en botones
Es muy común insertar un breve sonido al pulsar un botón, así el usuario percibe que ese
botón "hace algo".
Como veremos más adelante, los botones tienen su propia línea de tiempo, con sus
distintos estados. Por eso, no tenemos más que insertar los sonidos para cada estado.
Lo que sí debemos de tener en cuenta, es en usar la opción de Sincronización Evento,
para que se reproduzca el sonido en su totalidad.
5.6. Editar Sonidos
Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo es
limitada. Aún así, los efectos que permite aplicar de un modo sencillo suelen ser suficientes
para cualquier animación que queramos realizar. Disponemos de estos efectos del panel
Propiedades:
Canal Izquierdo: El sonido tan sólo se escuchará por el altavoz izquierdo.
Canal Derecho: El sonido tan sólo se escuchará por el altavoz derecho.
Desvanecimiento de izquierda a derecha: El sonido se reproduce inicialmente en el
altavoz izquierdo para luego pasar al derecho.
Desvanecimiento de derecha a izquierda: El sonido se reproduce inicialmente en el
altavoz derecho para luego pasar al izquierdo.
Aumento Progresivo: El volumen de nuestro sonido aumenta progresivamente.
Desvanecimiento: El volumen de nuestro sonido disminuye progresivamente.
Personalizado: Esta opción nos permite "editar" el sonido de un modo rápido y sencillo.
Desde este editor podemos decidir qué volumen tendrá nuestro sonido y en qué altavoz.
Podemos crear los efectos anteriores ajustándolos a nuestro gusto y podemos crear
efectos más complejos a nuestra medida.
Esta es la apariencia del cuadro de diálogo Personalizar Sonido. La parte superior
representa el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay una
línea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto.
Las líneas grises representan el volumen del sonido y haciendo clic en ellas podemos
configurar este volumen.
En el ejemplo, el canal izquierdo se reproduce normalmente (pues el volumen está al
máximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el volumen
normal (este efecto equivaldría a un Aumento Progresivo en el canal derecho).
Unidad 5. Sonidos en Flash (V)
5.7. ¿Mp3 o Wav?
Como ya se ha comentado, los sonidos que Flash CS5 puede importar casi cualquier tipo
de sonido, aunque los más empelados son MP3 y WAV. Si no sabes las diferencias entre
estos tipos de archivos, puedes consultar nuestro tema básico
.
Por tanto, cuando queramos añadir un sonido a nuestra película, deberemos decantarnos
por uno de estos 2 formatos. Lo normal es que el sonido que pretendamos insertar ya esté en
uno de ellos, pero no debemos olvidar que existen multitud de programas que convierten un
sonido con extensión .mp3 a uno .wav y viceversa, por lo que no debe ser inconveniente el
formato que tenga el sonido en un principio.
La pregunta surge en seguida ¿Cuál es mejor?
Esta pregunta es más importante de lo que parece, ya que si decidimos que nuestra
película tenga sonidos, deberemos asumir una carga muy importante en cuanto a tamaño de
la película y en consecuencia en cuanto a tiempo de descarga. Lo habitual es que los sonidos
ocupen más de la mitad del espacio total y muchas veces no valdrá la pena insertarlos...
Una vez decididos a insertar el sonido, la lógica nos dice que insertemos el sonido que
ocupe un espacio menor en el disco duro, ya que este espacio es el que ocupará en nuestra
película. Esto es una aproximación, ya que Flash comprime todo aquello que insertamos en
nuestras películas.
Como ya sabemos, los sonidos .mp3 ocupan un espacio mucho menor que los sonidos
.wav (10 veces menos o más), por lo que parece recomendable insertar .mp3 en lugar de
.wav, ahora bien ¿Puede Flash comprimir un sonido ya comprimido? Es decir, si un sonido
.wav ha sido comprimido y ahora tiene extensión .mp3, ¿podrá Flash volver a comprimirlo? La
respuesta es NO. Flash comprime los sonidos que insertamos en nuestras películas, pero si el
sonido resulta estar ya comprimido, no podrá volver a comprimirlo (en realidad si que
consigue comprimirlo, pero el sonido final es el mismo que el inicial).
Ahora que ya sabemos esto, nos falta saber si Flash comprime un archivo .wav más de lo
que comprime el formato .mp3, para ver bien este aspecto, hemos preparado varios
ejemplos...
Ejemplo:
Contamos con una película con un único frame que está vacío. Esta película, una vez lista
para ser vista (.swf) ocupa 1KB.
Tenemos 1 sonido .wav que ocupa 1596 KB
Comprimimos dicho sonido con un programa compresor de audio y obtenemos el mismo
sonido en formato .mp3, ocupa 145 KB. (La calidad de sonido es prácticamente idéntica).
Ahora insertamos el sonido .wav en la película original y la exportamos (esto se trata en el
último tema).
Resultado: Una película con sonido (película 1) que ocupa 37KB.
Insertamos después el sonido .mp3 en la película original.
Resultado: Una película con sonido (película 2) que ocupa 145 KB
Conclusión: La película con un sonido .wav ocupa casi 5 veces menos que la que tiene el
mismo sonido en .mp3, por tanto parece recomendable insertar sonidos .wav (la compresión
de audio que logra Flash es muy grande). Como contrapartida, podría apreciarse pérdida de
calidad en el sonido que se escucha en la película 1. Esta pérdida será importante según el
tipo de sonido que sea. Si es una voz, por ejemplo, deberíamos insertar .mp3 ya que
necesariamente deberá escucharse bien, si es música de fondo, es probable que aunque se
pierda calidad, el resultado final sea aceptable y sea conveniente quedarnos con la película de
menor tamaño. Lo mejor es probar ambas versiones y evaluar el resultado.
Puedes ver varias pruebas en estas películas:
Música de Fondo
Película con sonido (música) en formato .wav. Película con sonido (música) en formato .mp3.
Tamaño
Total:
37
KB. Tamaño
Total:
145
KB.
Calidad: Buena
Calidad: Buena
Sonido "Voz"
Película con sonido (voz) en formato .wav. Película con sonido (voz)
Tamaño
Total:
9
KB. Tamaño
Total:
Calidad: Regular
Calidad: Buena
en
.mp3.
67KB.
En el primer caso sería recomendable quedarse con la película más pequeña, ya que
ambos sonidos son buenos. En el segundo caso, la segunda película sería más apropiada, ya
que aunque tenga mayor tamaño, la calidad del sonido merece la pena.
Por último, comentar que Flash no puede importar sonidos en formato MIDI (.mid). Aún así,
si estamos empeñados en que en nuestra animación el sonido sea un MIDI y no queremos o
podemos conseguir un programa que convierta el sonido MIDI a WAV o MP3 existe una forma
de hacerlo consistente en el uso combinado de Flash y Javascript. Igualmente, como se
comentó en el Tema 1, Flash CS5 permite cargar sonidos de un modo dinámico (sin que
ocupen espacio), esto se tratará en el Tema 17 "Action Script".
Ejercicios unidad 5: Sonidos en Flash
Ejercicio 1: Importar Sonidos
1. Crea una película con 1 fotograma.
2. Localiza el archivo sonido.mp3 en la carpeta de ejercicios.
3. Impórtalo a tu película.
4. Comprueba que está disponible en la Biblioteca.
5. Inserta el sonido importado en el fotograma 1.
6. Comprueba que funciona (que el sonido puede escucharse). Para ello, pulsa CTRL+
ENTER (Esta combinación de teclas te permite "probar" la película).
7. Consigue que el sonido deje de escucharse al llegar la película al fotograma 5.
8. Consigue que vuelva a escucharse en el fotograma 10, y se reproduzca todo el sonido.
Ejercicio 2: Editar Sonidos
1. Modifica el sonido (usando Flash) de modo que en un principio no se oiga, y poco a
poco vaya aumentando de volumen.
2. Modifica el sonido de modo que al final del mismo, parezca que el sonido pasa de un
altavoz al otro.
Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.
Ayuda ejercicios unidad 5: Sonidos en Flash
1. Creamos la película mediante Archivo → Nuevo, eligiendo archivo ActionScript 3 (por
defecto tendremos un único fotograma).
2. Seleccionamos Importar → Importar a Biblioteca, que se encuentra en el Menú
Archivo.
3. Se abrirá la clásica ventana de Windows para buscar un archivo. Buscamos el archivo
de sonido y pulsamos Abrir.
4. El sonido ya está insertado. Hacemos clic en el Panel Biblioteca (Ventana →
Biblioteca) y comprobamos que se encuentra allí.
5. Si no se encuentra allí, revisaremos los pasos dados, pues algo no hemos hecho bien.
6. Creamos una nueva capa y la seleccionamos.
7. Después seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el
escenario (hasta el fotograma actual).
8. Pulsamos Enter y el sonido deberá escucharse.
9. Alargamos el fotograma actual hasta el número 4 (insertando fotogramas normales
desde
el
Menú
Insertar
→
Línea
de
Tiempo
→
Fotograma).
10. Insertamos un nuevo fotograma en la línea de tiempo. En la posición 5 (desde el Menú
Insertar → Línea de Tiempo → Fotograma Clave).
11. Abrimos el Panel Propiedades y seleccionamos uno de los fotogramas del 1 al 4.
12. En la opción Sinc seleccionamos Flujo.
13. Acabamos de conseguir que el sonido sólo se reproduzca cuando esté en los
fotogramas indicados.
14. Insertamos un nuevo Fotograma Clave en la posición 10.
15. Con el fotograma 10 seleccionado, vamos al panel Propiedades, y en las opciones de
Sonido, elegimos el Nombre del archivo que estamos utilizando.
16. En la opción Sinc seleccionamos Inicio
Debe quedar parecido al gráfico:
Ejercicio 2: Editar Sonidos
1. Utilizando el archivo anterior, nos situamos en el último fotograma, donde se reproduce
todo el sonido.
2. Seleccionamos Aumento Progresivo dentro de la pestaña Efecto que se encuentra en
el Panel Sonidos.
3. Seleccionamos Personalizar dentro de la pestaña Efecto que se encuentra en el Panel
Sonidos.
4. Nos dirigimos al final del sonido y hacemos clic en el canal que queramos modificar (el
izquierdo está en la parte superior y el derecho en la inferior). Aparecerá un recuadro
blanco, lo situamos en su parte más baja para quitarle el sonido y en su parte más alta
para dárselo. Jugamos con los volúmenes de ambos canales hasta obtener el efecto
deseado. Podemos ir probando cómo queda pulsando el Play que acompaña este
Panel.
5. Prueba evaluativa unidad 5
1. Desde un principio podemos trabajar con cualquier sonido que se encuentre en nuestro
disco duro.
a) Verdadero
b) Falso
2. Importar un sonido es lo mismo que insertarlo en un fotograma.
a) Verdadero
b) Falso
3. Desde el Panel Propiedades, si tenemos seleccionado un fotograma se puede seleccionar
qué sonido queremos reproducir, cuántas veces y qué efectos queremos darle.
a) Verdadero
b) Falso
4. La calidad del sonido es importante a la hora de importarlo en nuestra película.
a) Verdadero
b) Falso
5. ¿Cuál de estas 3 afirmaciones es correcta?.
a) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV,
importaremos y usaremos siempre el MP3.
b) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV,
importaremos y usaremos siempre el WAV.
c) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV,
usaremos uno u otro en función de ciertos parámetros tales como el tamaño, la calidad y el
tipo de sonido que sea.
6. El efecto Canal Izquierdo aumenta la calidad del sonido, ya que lo concentra todo en un
único altavoz, evitando la pérdida de calidad.
a) Verdadero
b) Falso
7. Si configuramos un sonido para que se reproduzca 9999 veces...
a) Se reproducirá indefinidamente.
b) La respuesta anterior es falsa.
8. Para efectos de voz en nuestras películas es mejor utilizar el método...
a) Flujo.
b) Inicio - Detener.
9. El efecto Aumento Progresivo puede ser una buena forma de introducir un sonido, ya que
provoca que el sonido aumente de volumen progresivamente.
a) Verdadero
b) Falso
10. El efecto Desvanecimiento de izquierda a derecha crea una sensación de movimiento, ya
que el sonido pasa de un altavoz a otro.
a) Verdadero
b) Falso
Unidad 6. Trabajar con objetos (I)
6.1. Los objetos en Flash ¿Qué son?
En los primeros temas vimos las herramientas para dibujar elementos en nuestra película,
obteniendo formas. En este tema profundizaremos en cómo trabajar con estas formas u
objetos, para ajustarlos a nuestras necesidades.
Independientemente de si estamos trabajando en una animación, en una página web, en un
catálogo para un DVD o en cualquier otra cosa, tendremos que trabajar con objetos. A
grandes rasgos, podremos considerar un objeto todo aquello que aparezca en nuestra
película y sea visible, de modo que podamos trabajar con él, por ejemplo, cualquier imagen
que creemos o importemos, un botón, un dibujo creado por nosotros mismos etc...
Los objetos de dibujo 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 vio 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 el
Pincel o el Cubo de Pintura.
6.2. 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 (entramado de puntos blancos)
para indicar que están seleccionadas.
Objeto SIN seleccionar
Objeto con el BORDE seleccionado
Objeto con el RELLENO seleccionado
Veamos cómo seleccionar las diferentes partes de un objeto:
Seleccionar un Relleno o un Borde: Basta hacer clic 1 vez en el Relleno o en el Borde
que queramos seleccionar.
Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno.
Seleccionar todos los bordes (o líneas) de un mismo color que estén en contacto:
Hacer doble clic sobre una de las líneas que tenga el color que pretendamos seleccionar.
Seleccionar un Símbolo, un texto, o un grupo: Clic en el Símbolo, en el texto o en el
grupo. Estos tipos de objetos mostrarán un borde de color azul (por defecto, depende de la
capa) al estar seleccionados.
Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT (Mayúsculas)
mientras seleccionamos los objetos que queramos.
Seleccionar los objetos que se encuentran en una determinada zona: Para ello
usaremos la Herramienta Selección (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 una forma, 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 Seleccionar, 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 rectangulares.
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ú Edición → Seleccionar Todo.
Unidad 6. Trabajar con objetos (II)
6.3. Colocando objetos. Panel Alinear
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 Alinear. Este Panel lo podemos encontrar en el Menú Ventana → Alinear. Así
funciona:
El Panel Alinear permite colocar los objetos tal y cómo le indiquemos. Antes de ver las
posibilidades, debemos hacer hincapié en la opción Alinear en escenario. 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 Escenario, 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 Alinear 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 quisiéramos situar un objeto en la esquina
inferior izquierda, bastaría pulsar el primer y el sexto botón consecutivamente.
Por ejemplo, si queremos que coincida el centro de dos objetos los alineamos al centro
horizontal y verticalmente.
Sitúa los objetos en el escenario en función
Distribuir:
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 Alinear en escenario 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 Alinear en escenario 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 Alinear en escenario hubiera estado activo ambos cuadrados
hubieran pasado a tener el ancho del fotograma.
Espacio:
Espacia los objetos de un modo uniforme.
Para ver ejemplos de uso de estos comandos, podéis ver la animación situada arriba al
principio del capítulo.
Para practicar la alineación te aconsejamos realizar el Ejercicio Alineación de objetos.
Unidad 6. Ejercicio: Alinear objetos
Objetivo
Crear un texto cualquiera y asignarle las propiedades que más nos interesen.
Ejercicio paso a paso
1. Abre un archivo nuevo.
2. Dibuja 4 rectángulos de diferentes colores situados en diferentes puntos del escenario.
3. Haz clic en la herramienta Selección.
4. Vamos a seleccionar todos los elementos que se encuentran en el escenario, para ello
hacemos clic en la esquina superior izquierda y sin soltar el botón del ratón arrastramos
hasta la esquina inferior derecha y soltamos (asegúrate de que todos los elementos se
encuentran en el área de selección).
5. Abrimos el panel de Alineación, esta vez lo haremos pulsando la combinación de teclas
CTRL + K (aunque también podrías abrirlo desde el menú Ventana).
6. Marca la opción Alinear en escenario.
7. Alineamos todos los objetos a la derecha del escenario haciendo clic en
.
Observa como todos los objetos se han movido para tener su borde derecho pegado al
borde derecho del escenario.
8. Alineamos todos los objeto (aún seleccionados) a la izquierda del escenario haciendo
clic
en
.
Fíjate que los objetos ahora se han movido al lado contrario. Alineándose su borde
izquierdo con el borde izquierdo del escenario.
Unidad 6. Trabajar con objetos (III)
6.4. Panel Información
Además de controlar la posición de los objetos desde el Panel Alineamiento, también
podemos hacerlo, de un modo más exacto (más matemático) desde otro panel, el Panel
Información.
A este Panel se puede acceder desde el Menú Ventana → Información. Las posibilidades
de este Panel son limitadas, pero si buscamos exactitud en las medidas o no nos fiamos de
las distribuciones de objetos que crea Flash, debemos acudir a él.
Medidas del Objeto:
Aquí introduciremos un número que represente el tamaño de
nuestro objeto en la medida seleccionada en las Propiedades del documento. AN: hace
referencia a la anchura y AL: a la altura.
Situación del objeto:
Desde aquí controlamos la posición del objeto en el escenario.
La X y la Y representan el eje de coordenadas (La X es el eje Horizontal y la Y el eje vertical).
Las medidas también van en función de las medidas elegidas para la película. Estas medidas
se toman desde la esquina superior izquierda de la pantalla (X=0 e Y=0).
Color Actual:
Indica el color actual en función de la cantidad de Rojo (R), Verde (V),
Azul (A) y transparencia Alfa (A) que contenga.
Este indicador puede ser engañoso, el motivo es que indica el color que tiene el objeto por
el que en ese momento pasamos el cursor del ratón. Por tanto, podemos tener seleccionado
un objeto (haciendo clic en él) y ver en el Panel Información su tamaño y su posición, pero al
desplazar el ratón, el valor del color cambiará y ya no indicará el color del objeto seleccionado,
sino el del objeto por el que pase el cursor. Tened esto en cuenta para no cometer errores o
perder tiempo innecesario.
Posición del Cursor:
Indica la posición del cursor. Es útil por si queremos que suceda
algo en la película al pasar el cursor justo por una posición determinada o para situar partes
del objeto en lugares específicos.
6.5. Los grupos
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 (Ctrl + G).
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.
Crear grupos es muy útil, ya que nos permite, como ya hemos dicho, tratar al conjunto de
objetos como un todo y por tanto, podemos aplicar efectos al conjunto, ahorrándonos la labor
de hacerlo de objeto en objeto.
Por ejemplo, supongamos que tenemos un dibujo que representa un conjunto de coches.
Tras dibujarlos todos, nos damos cuenta de que queremos aumentar el tamaño de los coches.
Podemos aumentar el tamaño de los coches de uno en uno, corriendo el riesgo de aumentar
unos más que otros y perdiendo las proporciones entre ellos, o podemos formar un grupo con
los coches y aumentar el tamaño del grupo, de modo que aumenten todos de tamaño a la vez
y en la misma proporción. De igual modo, podemos mover al grupo de posición, hacer que
gire...
Al crear un grupo, simplemente estamos dando unas propiedades comunes a un conjunto
de objetos y, en ningún caso perdemos nuestro objeto. En cualquier momento podemos
deshacer el grupo, mediante el Menú Modificar → Desagrupar.
Además, Flash nos permite modificar los elementos de un grupo sin tener que
desagruparlo. Para ello, seleccionamos el Grupo de elementos y hacemos clic en el Menú
Edición → Editar Seleccionado, o directamente hacemos doble clic sobre el grupo con la
herramienta Seleccionar. Podremos editar los objetos que componen el grupo por separado
teniendo en cuenta que, como es lógico, los cambios realizados afectarán al grupo además de
al elemento en cuestión.
Ejercicios unidad 6: Trabajar con objetos
Ejercicio 1: Rellenos y Bordes
1. Crea dos rectángulos con el interior de color verde y el borde negro.
2. En uno de ellos elimina el Relleno (rectángulo de la izquierda en la imagen).
3. En el otro, elimina el borde (rectángulo de la derecha en la imagen).
Ejercicio 2: Selecciones
1. Dibuja 5 óvalos. Dales el color de relleno y borde que quieras (elige un relleno que no
sea transparente
)
2. Selecciona 3 de ellos usando la tecla SHIFT.
3. Selecciona 3 de ellos usando la Herramienta Selección (Flecha).
4. Selecciona 3 únicamente los bordes de 3 de ellos.
Ejercicio 3: Alinear objetos
1. Dibuja 4 objetos (círculos, rectángulos...).
2. Coloca uno en cada esquina usando el Panel Alinear.
Ejercicio 4: Grupos
1. Agrupa los 4 objetos del ejercicio anterior en un único grupo.
2. Cambia su posición (colócalos, por ejemplo, en el centro de la película).
3. Desagrúpalos.
4. Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.
Ayuda ejercicios unidad 6: Trabajar con objetos
Ejercicio 1: Rellenos y Bordes
Se nos pide crear 2 rectángulos y eliminar el relleno de uno de ellos y el borde del otro.
Procedemos del siguiente modo:
1. Seleccionamos los colores en el Panel Muestras o en el Panel Color, hacemos clic en
la Herramienta Rectángulo y dibujamos 2 rectángulos.
Los 2 rectángulos originales
2. Hacemos clic en el interior del primer rectángulo y pulsamos la tecla suprimir Supr.
3. Hacemos doble clic en el borde del otro rectángulo y volvemos a pulsar la tecla suprimir
Supr.
Rectángulo sin Relleno y Rectángulo sin Borde
Otra opción podría haber sido crear un único rectángulo con borde. Hacer clic sobre su
relleno para seleccionarlo, y arrastrarlo para "sacarlo" el rectángulo.
Ejercicio 2: Selecciones
El primer apartado nos pide crear 5 óvalos y seleccionar 3 de ellos con la tecla SHIFT.
1. Seleccionamos los colores que queramos en el Panel Muestras o en el Panel Color,
hacemos clic en la Herramienta Óvalo (que aparece agrupada con la herramienta
rectángulo) y dibujamos 5 óvalos.
2. Hacemos doble clic en el relleno del primer círculo (doble clic para seleccionar tanto el
Relleno como el borde).
3. Ahora pulsamos la tecla SHIFT y sin soltarla, hacemos doble clic en otros 2 círculos
cualesquiera.
Ahora hacemos lo mismo usando la Herramienta Selección (Flecha), como pide el
segundo apartado.
1. Hacemos clic en una zona del escenario que nos permita capturar 3 círculos.
2. Arrastramos el ratón hasta crear un área que envuelva completamente a 3 de los 5
círculos.
3. Si quedara alguna parte del círculo fuera de la selección, basta con usar la tecla SHIFT
para añadirlo a la selección actual.
Ahora se nos pide seleccionar únicamente los bordes de 3 de ellos.
1. Hacemos clic en el borde del primer óvalo (si hiciéramos 2 clics se seleccionarían todos
los bordes del mismo color que estén en contacto con el borde sobre el que hacemos
clic).
2. Mantenemos pulsada la tecla SHIFT y repetimos el proceso con 2 óvalos más.
Nota: Si en vez de óvalos hubieran sido rectángulos, hubiera hecho falta hacer 2 clics en el
borde de cada rectángulo para que este quede totalmente seleccionado. Compruébalo tu
mismo.
Ejercicio 3: Alinear Objetos
Se nos pide dibujar 4 objetos y colocarlos en las esquinas.
1. Dibujamos los 4 objetos pedidos, por ejemplo, 4 rectángulos.
2. Abrimos el Panel Alinear. desde el menú Ventana → Alinear.
3. Hacemos clic en Alinear en escenario para que las distribuciones de los objetos se
hagan en función del tamaño del fotograma.
4. Seleccionamos el primer objeto y hacemos clic en
extremos izquierdo de la película.
para alinear el objeto en el
5. Hacemos clic en
para situarlo en el borde superior de la película. Como el objeto
está en el extremo superior izquierdo, está en la esquina superior izquierda.
6. Para alinear el segundo objeto en la esquina superior derecha hacemos clic en
y
.
7. Para alinear el tercer objeto en la esquina inferior izquierda hacemos clic en
y
.
8. Para alinear el cuarto objeto en la esquina inferior derecha hacemos clic en
y
.
Ejercicio 4: Grupos
La primera parte del ejercicio nos pide Agrupar un conjunto de elementos (que ya
tenemos).
1. Los seleccionamos todos del modo que prefiramos.
2. Hacemos clic en el Menú Modificar → Agrupar
La segunda parte del ejercicio nos pide Desagrupar el conjunto de elementos que
acabamos de agrupar.
1. Seleccionamos el Grupo haciendo clic en él.
2. Hacemos clic en el Menú Modificar → Desagrupar
Prueba evaluativa de la unidad 6
1. Todos los objetos tienen, en principio, borde y relleno.
a) Verdadero
b) Falso
2. Cuando seleccionamos un relleno, éste adquiere una textura para indicar que está
seleccionado.
a) Verdadero
b) Falso
3. No existe ningún panel en Flash para alinear objetos, hay que hacerlo "a mano".
a) Verdadero
b) Falso
4. Un grupo es un conjunto de objetos con propiedades comunes.
a) Verdadero
b) Falso
5. Para seleccionar un borde, debemos hacer doble clic sobre él, de lo contrario, no lo
seleccionaremos.
a) Verdadero
b) Falso
6. Para seleccionar un relleno, haremos doble clic sobre él.
a) Verdadero
b) Falso
7. Con la Herramienta Selección podemos seleccionar áreas de cualquier forma y tamaño (y
los objetos que se encuentren en ellas).
a) Verdadero
b) Falso
8. Si hacemos clic en la Línea de Tiempo, se seleccionan todos los objetos existentes en el
fotograma seleccionado.
a) Verdadero
b) Falso
9. ¿Cuál de estas 3 afirmaciones es correcta?.
a) La tecla SHIFT selecciona objetos únicos en la película.
b) Si seleccionamos un objeto y pulsamos la tecla SHIFT, este objeto queda agrupado
con todos los contiguos.
c) Si seleccionamos un objeto y pulsamos la tecla SHIFT , podremos añadir más
objetos a nuestra selección actual.
10. ¿Cuál de las siguientes afirmaciones es falsa?.
a) Los Grupos permiten tratar a todos los objetos que los forman como a uno sólo.
b) Los objetos agrupados pierden cualquier propiedad que tuvieran antes de quedar
agrupados.
c) Agrupar objetos sirve, por ejemplo, para mover varios objetos de una sóla vez
manteniendo la distancia entre ellos.
11. El Panel Información muestra información acerca de los objetos que tenemos
seleccionados.
a) Verdadero
b) Falso
12. La opción Alinear en escenario del Panel Alinear no tiene importancia, pues se usa para
centrar el objeto seleccionado en el escenario.
a) Verdadero
b) Falso
13. El Panel Información muestra, entre otros datos, la anchura, la altura o las coordenadas
del objeto seleccionado.
a) Verdadero
b) Falso
14. En Flash es posible colocar los objetos en lugares determinados, según la referencia del
escenario o la de otros objetos.
a) Verdadero
b) Falso
Unidad 7. Las capas (I)
7.1. ¿Qué es una capa?
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 (láminas de acetato) 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, y la mayoría de programas de dibujo o retoque, como Photoshop.
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 Tiempo y por tanto, sus distintos fotogramas se reproducirán
simultáneamente.
Clarifiquemos esto con un ejemplo:
Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen el
dibujo de una portería de fútbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de un
portero (del 5 en adelante están vacíos).
Pues bien, esta película nos mostrará inicialmente (durante el tiempo que duren los
primeros 5 fotogramas) la portería con el portero, para después (durante los fotogramas del 5
al 10) mostrar la portería sin portero.
De este modo la portería es independiente del portero, y podemos tratar estos objetos con
total libertad, ya que no interfieren entre ellos para nada.
Otra razón para separar los objetos en capas, es que Flash nos obliga a colocar cada
animación distinta en una capa. De lo contrario, todos los objetos que se encuentren en
dicha capa formarán parte de la animación. Si queremos que un objeto no forme parte de una
animación, deberemos quitarlo de la capa en la que se produce dicha animación.
Siguiendo con el ejemplo del portero, si quisiéramos crear un movimiento que haga que el
portero se desplace hacia un lado no hay ningún inconveniente, pero si la portería estuviera
en la misma capa que el portero, entonces ambos objetos se moverían hacia dicho lado, con
lo que resultaría imposible que sólo se moviera el portero. La solución es separar los objetos
en 2 capas, como ya hemos hecho.
Las capas además, tienen otras utilidades, nos permiten ordenar nuestra película de forma
lógica, y nos ayudan en la edición de dibujos (evitando que se "fundan" en uno sólo, o
bloqueando el resto de capas de modo que sólo podamos seleccionar la capa que nos
interese).
Otro motivo es para organizar mejor nuestro contenido. Igual que creábamos una capa
para los elementos de audio, crearemos capas para otros elementos, como el código
ActionScript.
Unidad 7. Las capas (II)
7.2. Trabajar con capas
La vista estándar de una capa es la que muestra la imagen. Veamos para qué sirven los
distintos botones y cómo usarlos.
Nueva capa
: Como su nombre indica, sirve para Insertar una nueva capa en la escena
actual. Crea capas normales (en el siguiente punto se verán los distintos tipos de capas).
: Nos sirve para crear carpetas, que nos ayudarán a organizar nuestras
Crear carpeta
capas.
Borrar Capa
: Borra la capa seleccionada.
Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el
nombre actual.
Propiedades de Capa: Si hacemos doble clic sobre el icono
junto al nombre de la capa,
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.
Aquí puedes cambiar diferentes opciones sobre la capa, como su nombre o su color.
También puedes bloquearla u ocultarla.
Pero haremos especial hincapié en la opción Tipo cuyas opciones, Guía y Máscara,
veremos más adelante en el curso.
Unidad 7. Las capas (III)
7.3. Trabajar con capas. Opciones avanzadas
Mostrar / Ocultar Capas
: Este botón permite ver u ocultar todas las capas de la
película. Es muy útil cuando tenemos muchas capas y sólo queremos ver una de ellas ya que
permite ocultar todas a la vez, para después mostrar sólo la actual. Para activar la vista de
una capa en concreto (o para ocultarla) basta con hacer clic en la capa correspondiente en el
punto (o en la cruz) que se encuentra bajo el icono "Mostrar / Ocultar capas"
Bloquear Capas
: Bloquea la edición de todas las capas, de modo que no podremos
modificarlas hasta desbloquearlas. Para bloquear o desbloquear una capa concreta,
procederemos como en el punto anterior, clic en el punto o icono "Cerrojo" situados en la capa
actual bajo el icono "Bloquear Capas".
Bloquear una capa es muy útil cuando tenemos varios objetos juntos y en capas distintas y
queremos asegurarnos de que no modificamos "sin querer" alguno de ellos. Tras bloquear su
capa podremos trabajar con la seguridad de no modificar dicho objeto, ni siquiera podremos
seleccionarlo, de modo que editaremos con mayor facilidad el objeto que queramos.
Mostrar/Ocultar capas como contornos
: Este botón nos muestra/oculta los
contenidos de todas las capas como si sólo estuviesen formados por bordes. De este modo y
ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma fácil y
podremos ver en qué capa está cada uno de ellos.
También se puede activar o desactivar para cada capa de un modo similar a los anteriores
botones.
Veamos como se muestran estas opciones activadas y desactivadas.
En la primera imagen la capa actual no tiene ninguno de los botones activados, podemos
observar que en la columna Mostrar Capas aparece un punto. Este punto significa que no
está activada esta opción, lo mismo sucede con el botón Bloquear capas. En la columna
Mostrar capas como contornos aparece un cuadrado con relleno, lo que simboliza que los
objetos se mostrarán completos y no sólo sus contornos.
En la segunda imagen aparece una cruz situada bajo la columna Mostrar Capas, lo que
indica que dicha capa no es visible en el escenario. Aparece un cerrojo bajo la columna
"bloquear capas", lo que simboliza que la capa está bloqueada. Y en la columna "Mostrar
capas como contornos" NO aparece relleno. La capa se está mostrando en este modo y no
podremos ver los rellenos hasta deseleccionar esta opción.
Además, el color de los contornos será diferente para cada capa, de modo que podamos
distinguirlas mejor. El color del contorno, coincidirá con el indicado en cada capa. En este
ejemplo podéis ver cómo queda un objeto en función de tener activada o no la opción
contorno:
7.4. Reorganizar las capas
Como ya se ha comentado, las distintas capas tienen muchas cosas en común unas con
otras. Lo primero y principal es la Línea de tiempo, todas las capas de una misma escena
comparten la misma línea de tiempos y por tanto, los objetos de todos los fotogramas 1 de
todas las capas se verán al mismo tiempo en la película superpuestos unos sobre otros. ¿y
qué objeto está delante de los demás? Pues este criterio viene dado por la colocación de las
Capas en la película. Los objetos que se mostrarán delante de todos los demás serán
aquellos que se encuentren en la capa situada más arriba.
Es decir, si nos fijamos en el ejemplo anterior:
El portero aparece delante de la portería, porque la capa "Portero" está situada encima de
la capa "Portería", como puede apreciarse en la imagen. Si quisiéramos cambiar esta
distribución, basta con hacer clic en la capa que queramos mover y arrastrarla hacia arriba o
hacia abajo hasta la posición deseada.
Veremos como los objetos se colocan delante o detrás de los de la capa seleccionada
según su capa se encuentre por encima o por debajo de la nuestra.
Para mover un objeto de una capa a otra, deberemos seguir unos sencillos pasos.
Aprende a hacerlo realizando el ejercicio paso a paso Mover objetos entre capas.
Para mover un fotograma de una capa a otra, basta con seleccionar el fotograma a mover y
arrastrarlo hasta la capa donde queramos pegarlo. También se puede Copiar el fotograma y
luego pegarlo en la capa de destino.
Unidad 7. Las capas (IV)
7.5. Tipos de capas
Como habréis podido comprobar al ver las propiedades generales de una capa o al hacer
clic con el botón derecho del ratón sobre el icono de una capa cualquiera, existen varios tipos
de capas.
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 animación movimiento
: Son las capas que contienen una animación por
interpolación de movimiento.
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).
En esta imagen podemos ver el contenido de 2 capas. La primera de ellas contiene la bola
azul y la segunda contiene la línea curva. La segunda capa la hemos definido como Capa
Guía, para que al realizar la animación de movimiento (esto lo veremos en un tema posterior)
su contenido no se vea en la película, sino que sirva de recorrido para la bola azul.
Es importante recordar que el contenido de las Capas Guía no se verá en la película final.
Su efecto hará que la pelota azul se desplace de un extremo de la línea al otro siguiendo esa
ruta.
Capas guiadas (Guided Layers) : Definir una capa como guía no tiene sentido hasta
que definamos también una capa guiada. Esto es, una capa que quedará afectada por la
guía definida en la Capa guía.
Si no definimos una capa guiada, la capa guía no tendrá ningún efecto y si bien no se verá
en la película (por ser una capa guía) tampoco provocará ningún efecto en las demás capas.
En la imagen anterior, la bola azul se deberá encontrar en una capa Guiada, de lo contrario no
seguirá la ruta marcada por la capa guía.
Las capas guía y las capas guiadas se relacionan entre sí de un modo evidente. A cada
capa guía le corresponden una serie de capas guiadas.
Al asociar una capa guía con una capa guiada, el icono que representa a la capa guía
cambia, indicándonos que está realizando correctamente su labor.
En la imagen podemos ver un ejemplo de capa guía y capa guiada correctamente
asociadas entre sí. (La capa llamada inferior es, evidentemente, la capa con Guía)
El funcionamiento de las Capas Guía y sus utilidades lo veremos a fondo en el tema de las
Animaciones
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) y se analizará en temas posteriores.
Basta con decir que estas capas se colocan "encima" de las capas a las que enmascaran y
sólo dejan que se vea la parte de éstas que tapan los objetos situados en las capas máscara
(son como filtros). Al igual que las capas guía, los objetos existentes en este tipo de capas
tampoco se ven en la película final. Sí se verán los objetos de su correspondiente capa
enmascarada a los que estén "tapando".
Capas Enmascaradas
: Estas capas funcionan conjuntamente con las anteriores, ya
que son las capas que están bajo las máscaras y a las que afectan. Al igual que las capas
guía y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto.
Sus objetos sí que son visibles en la película final, pero sólo cuando algún objeto de la capa
Máscara está sobre ellos.
Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los
rectángulos azules forman parte de la Capa Enmascarada y por tanto se verán en la película
final (pero sólo lo que tape la capa máscara). El óvalo rojo está situado en la capa Máscara y
no se verá en la película, pero sólo se verá lo que él "tape", que es lo que se ve en la imagen
de la derecha. Así se emplean las máscaras...
Podéis poner a prueba vuestros conocimientos realizando:
Ejercicios unidad 7: Las capas
Ejercicio 1: Orden de Capas
1. Abre el archivo capas.fla que encontrarás en la carpeta ejercicios del curso.
2. Modifica el orden de las capas para que se muestre como el siguiente dibujo:
Ejercicio 2: Planeta Saturno (II)
1. Abre un archivo nuevo e intenta reproducir el planeta Saturno (como hicimos en los
primeros temas).
2. En este caso deberás utilizar capas de tipo Máscara.
Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.
Ayuda ejercicios unidad 7: Las capas
Ejercicio 1: Orden de Capas
1. Abre el archivo capas.fla que encontrarás en la carpeta de ejercicios.
2. Haz clic en la capa Texto para seleccionarla.
3. Arrástrala hasta tenerla en la posición superior (por encima de la capa Forma2).
4. Haz clic en la capa Forma que ahora se encuentra en la parte inferior para
seleccionarla.
5. Arrástrala hasta tenerla en la posición superior (ahora por encima de la capa Texto).
Observa que la capa Texto es visible porque la pintura de relleno de la capa Forma tiene el
valor alfa al 50%.
Ejercicio 2: Planeta Saturno (II)
Como siempre, partimos de un nuevo archivo ActionScript 3.
1. Crea tres capas utilizando el botón
que encontrarás en la línea de tiempo.
2. Haz doble clic sobre el nombre de la capa que se encuentre más abajo. Cámbialo por
Planeta.
3. Haz doble clic sobre el símbolo
Máscara y dale el tipo Máscara.
de la que se encuentra en la parte superior. Llámala
4. Finalmente haz doble clic sobre el símbolo
de la capa que se encuentra en medio.
Llámala
Aros
y
dale
el
tipo
con
Máscara.
En estos momentos deberás tener algo como esto:
5. Selecciona la capa Planeta y dibuja un círculo (puedes aplicarle un relleno degradado y
quitarle el borde).
6. Selecciona la capa Aros y dibuja un círculo perfecto, rellenándolo con un degradado con
varias paradas (profundizaremos en los degradados más adelante).
7. Selecciona el círculo que hará de aro, y con la herramienta Transformación libre
(debajo de las flechas), dale la forma deseada.
8. Utiliza el panel Alinear para centrar el planeta y el aro vertical y horizontalmente, y
queden perfectamente alineados.
9. Ahora selecciona la capa Máscara y con la herramienta pincel pinta sobre el Escenario
para tapar la forma ovalada de los aros de modo que sólo pintes lo que quieras que se
muestre. Es decir, bastaría con no pintar la parte que quedaría detrás del planeta.
Aquí puedes ver un ejemplo de cómo quedaría:
El planeta está en gris, los aros en rojo y la máscara en verde.
10. Ya casi lo tenemos, podemos mejorar el dibujo seleccionándolo todo (clic en la esquina
superior izquierda y sin soltar hasta la esquina inferior derecha) y seleccionando la
herramienta Transformación libre para rotar el dibujo en su totalidad unos grados hacia
la izquierda.
11. Para probar el efecto de la máscara pulsa las teclas Ctrl + Enter en tu teclado.
Prueba evaluativa Unidad 7
1. El objetivo principal de las capas es aislar los objetos que contenga del resto de la
película para conseguir independencia frente a estos.
a) Verdadero
b) Falso
2. Los objetos creados en una capa no pueden moverse a otra, pues cada capa está
íntimamente ligada a sus objetos.
a) Verdadero
b) Falso
3. Si activamos la opción Mostrar contornos de una capa, podremos ver los bordes de todos
los objetos de dicha capa como si fuesen 3 veces más grandes, ayudándonos a
distinguirlos entre el resto de capas (suponiendo que dicha opción esté inicialmente
desactivada).
a) Verdadero
b) Falso
4. Si activamos la opción Bloquear capas de una capa, se nos garantiza que ningún objeto
de los que estén situados en dicha capa podrá sufrir alteración alguna (suponiendo que
dicha opción esté inicialmente desactivada).
a) Verdadero
b) Falso
5. ¿Cómo deberíamos organizar las capas de nuestra película si queremos que dos objetos
se muevan sincronizadamente realizando el mismo movimiento?
a) Separando los objetos en dos capas diferentes.
b) Situándolos en la misma capa conseguiríamos nuestro propósito de manera rápida y
eficaz.
c) Ambas respuestas son correctas.
d) Ninguna de las anteriores.
6. Qué sucedería si creamos una capa guía, pero ninguna capa guiada asociada a la misma.
a) Que no habría ningún problema, pues una misma capa puede servir como guía para
diversas capas guiadas.
b) Que la capa Guía no tendría ningún efecto ni se vería durante la animación.
c) Que no podría realizarse, pues una capa sólo puede estar guiada por una Guía en
cada instante de tiempo.
7. Si tenemos una capa A que es máscara de otra capa B, entonces la capa B queda
enmascarada por la capa A ... ¿Son visibles todos los objetos de la capa B?
a) Si.
b) No.
8. Qué sucedería si quisiéramos asociar una capa guía con varias capas guiadas
a) Que no habría ningún problema, pues una misma capa puede servir como guía para
diversas capas guiadas.
b) Que la capa Guía no tendría ningún efecto ni se vería durante la animación.
c) Que no podría realizarse, pues una capa sólo puede estar guiada por una Guía en
cada instante de tiempo.
9. Qué sucedería si quisiéramos asociar a una capa guiada varias capas guía.
a) Que no habría ningún problema, pues una misma capa puede servir como guía para
diversas capas guiadas.
b) Que la capa Guía no tendría ningún efecto ni se vería durante la animación.
c) Que no podría realizarse, pues una capa sólo puede estar guiada por una Guía en
cada instante de tiempo.
10. Cómo deberíamos organizar las capas de nuestra película si queremos que dos objetos
presenten animaciones diferentes.
a) Situándolos en la misma capa conseguiríamos nuestro propósito de manera rápida y
eficaz.
b) Si las animaciones deben producirse en instantes de tiempo comunes, sería
necesaria separar los objetos en dos capas diferentes. Si las animaciones pueden producirse
en instantes de tiempo disjuntos (que no coincidan en ningún instante) entonces podrían estar
ambos objetos en la misma capa.
c) Deberíamos separar los dos objetos en capas diferentes, pues de lo contrario sería
imposible que los objetos realizasen movimientos distintos durante los mismos instantes de
tiempo. Para sincronizar los movimientos podríamos convertir un objeto en un gráfico o en un
clip de película, en función de nuestras necesidades
Unidad 8. Símbolos (I)
8.1. Qué son los símbolos
Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos
proporciona Flash CS5.
Estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el
momento en que son creados, lo que permite que sean utilizados en varias ocasiones
(instancias), ya sea en la misma o en otra película. Los símbolos nos resultarán
fundamentales a la hora de crear nuestras animaciones.
8.2. Cómo crear un símbolo
La acción de crear un nuevo símbolo es una de las más usadas en Flash ya que es uno de
los primeros pasos para crear una animación, como veremos más adelante.
El procedimiento es el siguiente:
1. Seleccionamos el o los objetos que queramos convertir en un símbolo. Lo más habitual
es partir de una forma.
2. Abrimos a la ventana Convertir en símbolo, accediendo al menú Insertar → Nuevo
Símbolo, desde el menú contextual eligiendo Convertir en símbolo, o directamente
con las teclas Ctrl + F8 o F8.
3. Una vez hecho esto nos aparecerá una ventana como la mostrada en la imagen.
Introducimos el nombre del símbolo que vamos a crear, y que nos permitirá
identificarlo en la biblioteca, lo que se hará imprescindible cuando tengamos muchos
símbolos.
4. Sólo nos queda seleccionar el tipo de símbolo (desplegable Tipo) al que queremos
convertir nuestro objeto. Podemos elegir entre Clip de Película, Botón y Gráfico. Sus
características y las diferencias entre ellos las veremos en temas posteriores. Lo más
habitual es Clips de película para los objetos que queremos mostrar en el escenario, y
Botón si queremos que actúe como tal.
5. Bastará con pulsar Aceptar para tener nuestro símbolo creado.
Para practicar estas operaciones te aconsejamos realizar Ejercicio Crear un símbolo.
Unidad 8. Ejercicio: Crear un símbolo
Objetivo
Crear un símbolo de gráfico que nos permitirá coger destreza en una acción que será
básica en la creación de animaciones.
Ejercicio paso a paso
1. Abre el archivo trabajo.fla con el que venimos probando cosas a lo largo del curso.
2. Seleccionamos el óvalo haciendo doble clic sobre él.
3. Abrimos el menú
Se
desplegará
Insertar
una
→ Nuevo
ventana
Símbolo... de
como
la
la
barra de
de
la
menús.
figura.
4. En el campo Nombre introducimos el nombre de nuestro gráfico, por ejemplo "Mi
Primer Símbolo".
5. Seleccionamos la opción Gráfico en el apartado Tipo. Con esto le decimos a Flash que
el nuevo símbolo será un gráfico.
6. Pulsamos Aceptar y ya tenemos nuestro primer símbolo gráfico creado.
Unidad 8. Símbolos (III)
8.5. Modificar una instancia
Hemos visto en el ejercicio anterior que podemos modificar una instancia de un símbolo sin
modificar el símbolo original en cuestión. Sin embargo, al no tratarse de un gráfico vectorial
(veremos que significa esto más adelante), no podemos modificar las instancias con las
herramientas de dibujo de Flash CS5, pero sí mediante el Panel de Propiedades, que permite
la manipulación "externa" de la instancia.
Así, este panel, que como hemos visto resulta sumamente útil, no nos permite modificar
la estructura básica de la instancia, pero sí otras propiedades, esto es, podremos hacer que la
instancia tenga más brillo, pero no transformar una estrella en un círculo).
Esos cambios debemos de hacerlos directamente sobre el símbolo. Aunque sí podremos
crear un símbolo a partir de una instancia, lo que desvinculará la instancia del símbolo
original.
8.6. Panel propiedades de instancia
Para acceder al panel de propiedades de instancia, debemos seleccionar en primer lugar la
instancia que queramos modificar y posteriormente abrir el panel Propiedades.
Si seleccionamos un objeto Flash que no se trate de un símbolo, el Panel Propiedades
mostrará las propiedades del objeto en cuestión, pero no las características propias de los
símbolos (cambios de color, intercambios etc...)
En el momento que seleccionemos un símbolo aparecerán una serie de propiedades y
opciones que comentamos a continuación:
Nombre y su icono correspondiente: El nombre de la instancia es muy importante,
pues permite identificarla durante la película, y veremos más adelante que resulta
imprescindible para acceder mediante ActionScript. El nombre, se introduce en el
recuadro donde pone por defecto <Nombre de instancia>, y debe de ser único. El icono
asociado nos permite saber qué tipo de símbolo es de un vistazo rápido.
Tipo de la instancia. Por defecto se nos muestra el tipo al que pertenecía el símbolo
original pero nosotros podemos cambiarlo para que cambie su comportamiento, aunque
pueda seguir manteniendo su estructura inicial (en la imagen es Botón).
Símbolo de la Instancia seleccionada (Instancia de:). Esta opción nos muestra el
símbolo raíz del que proviene la instancia que estamos modificando.
Intercambiar: Esta opción merece especial atención, pues es muy útil y nos ahorrará
mucho trabajo cuando sea necesaria emplearla. Su función consiste en cambiar el
símbolo de la instancia por cualquier otro que tengamos en nuestra Biblioteca, por lo que
la instancia tomará el aspecto del nuevo símbolo. Puede parecer simple, pero durante el
desarrollo de un trabajo profesional rápidamente surge la necesidad de probar
situaciones y los diseños gráficos definitivos no suelen estar disponibles hasta bien
avanzado
el
proyecto.
Gracias a esta opción podemos trabajar tranquilamente con un "boceto" y sustituirlo de
un modo efectivo (el nuevo símbolo hereda las propiedades del antiguo símbolo, incluido
el nombre de instancia, las acciones que le afectarán, efectos gráficos etc...) cuando
llegue
el
momento.
En la imagen se puede observar el panel Intercambiar Símbolo.
Este panel además, incorpora el botón Duplicar Símbolo
cuya funcionalidad es la que
nos podemos imaginar. Es muy útil cuando queremos hacer pruebas con un símbolo y
no queremos perderlo. Lo duplicamos y trabajamos tranquilamente con la copia.
Unidad 8. Símbolos (IV)
8.7. Efectos sobre instancias
Para acceder a los efectos aplicables sobre una instancia determinada, debemos acudir
nuevamente al Panel Propiedades, desde aquí podremos acceder a todos los efectos que
Flash nos proporciona. En el gráfico de la derecha se puede observar la pestaña Estilo: del
Panel Propiedades.
Hay varios tipos de efectos. Si el símbolo se acaba de crear o si no tiene efecto asignado
aparecerá en la pestaña Ninguno.
En el siguiente apartado comentamos los distintos efectos aplicables a una instancia.
A continuación mostraremos los tipos de efectos. Para ello partiremos de la siguiente
imagen original:
Brillo. Se puede modificar su valor desde -100% al 100%, esto es, completamente
oscuro (negro) y completamente brillante (blanco). Puedes mover la barra deslizante o
introducir su valor directamente en la casilla.
Efecto Brillo del 50 %
Tinta. Esta opción permite cambiar el color de la instancia, pero puesto que, como
dijimos, no podemos modificar la instancia internamente, al variar el color en la pestaña Tinta
o bien mediante los valores RGB (cantidad de rojo, verde y azul), se cambiará el color de toda
la instancia como si la estuviéramos tiñendo o poniendo una capa imaginaria de un color
determinado. El grosor o intensidad de esta "capa" la podemos modificar en porcentaje
mediante la primera pestaña que aparece a la derecha.
Efecto Tinta del 50 % con el color verde (0 255 0)
Alfa. Representa el grado de visibilidad o transparencia que se tendrá de la instancia en
cuestión. También se puede modificar mediante valor directo o con la barra deslizante y es
muy útil para animaciones de aparición y desaparición de objetos. Si aplicamos un efecto
alpha sobre una instancia que está encima de otro objeto, el objeto que antes estaba tapado
se podrá ver a través de la instancia.
Efecto Alfa del 65 % sobre el pez naranja
Avanzado. Aquí podemos aplicar todos los efectos anteriores al mismo tiempo de
manera más precisa, con la ventaja de que podemos ponerle un poco de cada uno, dando
lugar a efectos de gran vistosidad.
Sobre el pez superior. Hemos aplicado un efecto Alfa del 65 % y hemos reducido al 45 % la
cantidad de verde a la vez que hemos multiplicado la cantidad de azul por 111, obteniendo el
tinte rosa translúcido que se observa.
A medida que modifiquemos los efectos sobre las instancias, podremos ir viendo el
resultado sobre el propio escenario.
Es importante recalcar, que en los efectos anteriores estamos modificando instancias de un
símbolo, pero que el símbolo original sigue intacto.
Ejercicios unidad 8: Símbolos
Ejercicio 1: Crear Símbolo
1. Crea una película con 1 fotograma.
2. Dibuja un círculo perfecto.
3. Conviértelo a símbolo de tipo Clip de película.
4. Comprueba que está disponible en la Biblioteca.
Ejercicio 2: Insertar Instancia
1. Crea una nueva película.
2. Inserta el Gráfico de un botón cualquiera de las Bibliotecas comunes de Flash CS5.
3. Modifica su tamaño.
4. Vuelve a realizar el paso 2 y comprueba que el botón se inserta en su tamaño original.
Ejercicio 3: Duplicar Instancia
1. Sobre el ejercicio anterior, duplica la instancia del botón que has cambiado de tamaño.
2. Desde esa instancia, suplica el símbolo.
3. Comprueba que se ha duplicado en la Biblioteca.
Ejercicio 4: Efectos sobre Instancias
1. Teniendo el botón ampliado del ejercicio 2 en el escenario, inserta el duplicado que
hemos creado de tal forma que se superpongan parcialmente.
2. Dale al botón que está tapando al otro un efecto Alfa del 40%.
3. Comprueba que ahora podemos ver los dos claramente.
Ayuda ejercicios unidad 8: Símbolos
Ejercicio 1: Crear Símbolo
1. Crea una película con 1 fotograma con Archivo → Nuevo, eligiendo archivo
ActionScript 3.
2. Para que el círculo no salga ovalado, selecciona la herramienta óvalo y mientras lo
dibujas, mantén pulsada la tecla Shift.
3. Accede a Insertar → Nuevo Símbolo... o bien pulsa F8.
4. Accede a Ventana → Biblioteca y busca el nombre que le diste al crearlo.
Ejercicio 2: Insertar Instancia
1. Selecciona la opción Archivo → Nuevo, eligiendo archivo ActionScript 3.
2. Ve a Ventana → Bibliotecas Comunes → Botones y selecciona un botón cualquiera
(para expandir las carpetas, haz clic con el botón derecho sobre una de ellas y
selecciona "Expandir Carpeta"). Arrastra el botón elegido hasta el escenario
3. Selecciona el símbolo, luego la herramienta Transformación libre y arrastra alguno de
los puntos que aparecerán alrededor del botón.
4. Debes ver que has modificado sólo una instancia del símbolo, y no el símbolo en sí.
Ejercicio 3: Duplicar Instancia
1. Selecciona la instancia a duplicar, y en el menú Edición elige Duplicar. Aparecerá una
copia en el escenario.
2. Haz clic con el botón derecho sobre la instancia que quieras duplicar y selecciona
Duplicar Símbolo.
3. Accede a Ventana → Biblioteca y busca el nombre que le diste al duplicarlo.
Ejercicio 4: Efectos sobre Instancias
1. Ve a Ventana → Biblioteca para abrir la Biblioteca y busca el nombre del duplicado.
Arrástralo al escenario.
2. Abre el Panel Propiedades y selecciona en la pestaña Color Alfa e introduce en la
casilla donde pone 100% un 40%
3. Como el de arriba tiene un efecto Alfa (Transparencia) permite que el botón situado bajo
él se vea.
Evaluación unidad 8
1. Darle un nombre concreto a los símbolos no es importante.
a) Verdadero
b) Falso
2. Las Bibliotecas Comunes de Flash aparecen desde la primera vez que abrimos el
programa.
a) Verdadero
b) Falso
3. Para insertar un símbolo de biblioteca en una película abrimos la biblioteca y hacemos
doble clic sobre el símbolo.
a) Verdadero
b) Falso
4. Para cambiar el tamaño de un símbolo, lo insertamos en nuestro documento y utilizamos
la herramienta "escalar".
a) Verdadero
b) Falso
5. ¿Cuál es cierta?
a) La Biblioteca nos permite guardar copias de todas las instancias que tengamos, lo
que nos ayuda en la organización de nuestra película.
b) Con el panel Propiedades podemos modificar internamente la instancia
seleccionada.
c) Con el panel Propiedades podemos modificar externamente la instancia
seleccionada.
6. El efecto Alfa permite ver objetos situados en capas inferiores cuando su valor es distinto
del 100%.
a) Verdadero
b) Falso
7. Por razones de copyright no podemos utilizar más de un símbolo de las bibliotecas
comunes por película.
a) Verdadero
b) Falso
8. Todos los símbolos que incluyamos o podamos encontrar en nuestras películas serán de
estos tres tipos: Clip de película, Gráfico y Botón.
a) Verdadero
b) Falso
9. El efecto Tinta permite modificar uno a uno los colores presentes en la instancia.
a) Verdadero
b) Falso
10. El efecto Avanzado combina varios de los efectos sobre instancias que ofrece Flash.
a) Verdadero
b) Falso
Unidad 9. Gráficos (I)
9.1. ¿Qué es un gráfico?
Los Gráficos son símbolos que nos permiten representar objetos estáticos y
animaciones sencillas.
En caso de que utilicemos un símbolo gráfico para realizar una animación, debemos tener
en cuenta que ésta estará ligada a la línea de tiempo de la película en la que se encuentre. Es
decir, la animación se reproducirá siempre y cuando la película original también se esté
reproduciendo. Esto hace que, pese a tener su propia línea de tiempo, no puedan contener
sonidos, controles ni otros símbolos gráficos.
Así pues, normalmente utilizaremos los gráficos para imágenes estáticas o para cuando
nos convenga que una animación se reproduzca sólo cuando determinado frame de la línea
de tiempo de la película esté en marcha, ya que para los casos que hemos comentado
anteriormente en los que un gráfico no nos es útil, Flash nos ofrece otro tipo de símbolos
como veremos en temas posteriores.
9.2. Tipos de gráficos
Los gráficos pueden ser:
Gráfico estático
a) Estáticos: estos gráficos se mantienen sin cambios cuando pasa el tiempo. Estos
gráficos son los típicos en los fondos y en los objetos que no desempeñan ninguna función
especial. Su tamaño y por tanto, el tiempo de carga de este tipo de gráficos, aunque siempre
dependerá de la resolución, de sus dimensiones y de la forma en la que estén creados *, será
en general reducido.
Animación
b) Animaciones: este tipo de gráfico varía su forma, posición u otras propiedades a
medida que va pasando el tiempo. Puesto que para realizar la animación se deben usar varios
gráficos más además del original o bien realizar determinadas acciones que modifiquen el
estado inicial, el tamaño de esta clase de gráficos, para las mismas dimensiones y forma de
creación, será mucho mayor que uno estático.
Por esto, aunque las animaciones dan a nuestra web un aspecto más bonito y espectacular
tienen dos inconvenientes:
1) Si se trata de un Mapa de Bits (ahora veremos que significa esto) la web
puede llegar a tener un tamaño excesivamente grande.
2) Aunque no se traten de mapas de bits, por ejemplo, si son animaciones
típicas de Flash, cuyo tamaño no es excesivo, el hecho de poner muchas
animaciones puede llegar a "marear" un poco al visitante de nuestro sitio y
desviar su atención de lo que realmente importa, su contenido.
(*) Los tipos de gráfico anteriores pueden ser, a su vez de dos tipos, según la forma en la
que estén creados: Gráfico Vectorial o Mapa de Bits. Para saber más acerca de estos dos
tipos de gráfico, échale un vistazo a nuestro tema básico
.
Unidad 9. Básico: Gráficos vectoriales y mapas de bits
¿Cómo representar un gráfico?
Probablemente hayas visto multitud de gráficos con muchas extensiones distintas cada
uno: JPG, GIF, FLA, SWF, PNG ... Las extensiones nos indican el tipo de archivo o formato en
que se guardó el gráfico.
Existen muchísimos programas en el mercado que permiten visualizar, crear y modificar
gráficos, y cada fabricante decide representar los gráficos como mejor le conviene, o
simplemente da una extensión determinada a los gráficos creados con su programa para
restringir su uso a programas de la misma compañía.
Pese a todo, la multitud de formatos en que se puede encontrar almacenado un gráfico, se
pueden englobar en dos tipos básicos: los gráficos vectoriales y los mapas de bits o bitmaps.
Diferencia entre Gráfico Vectorial y Mapa de Bits
La principal diferencia entre los Bitmaps y los Gráficos Vectoriales está en su tamaño. Los
gráficos vectoriales tienen una ventaja de gran importancia: ocupan mucho menos espacio en
disco o en memoria y, por tanto, necesitan mucho menos tiempo para descargarlos desde una
aplicación o página web.
La explicación de este hecho se puede ver en la forma en la que están creados y
representados cada uno de los dos tipos de gráficos:
Los bitmaps o mapas de bits están formados por grandes "rectángulos de datos"
(matrices) que contienen información sobre cada uno de los puntos (pixels) por los que
está formado el gráfico, y que se corresponde aproximadamente con la percepción que
nosotros vemos de ellos en nuestra pantalla.
A simple vista no apreciamos los pixels debido al pequeño tamaño que tienen en general,
pero si ampliamos mucho un Bitmap los podemos observar como cuadrados de color, y
apreciamos un aspecto dentado en las curvas.
La información que almacenan estas matrices son las características de cada pixel. Las
características que se almacenan sobre los pixels son sus coordenadas dentro del gráfico y su
color.
Así, nuestro PC procesa esa información, y genera la imagen en el monitor u otro
dispositivo de salida, indicando qué color se debe poner en cada coordenada de la imagen.
Los pixels (cuadraditos), o unidades más pequeñas que forman una imagen, no son
apreciables a simple vista en una imagen de calidad, pero sí con una ampliación.
Los pixels no tienen siempre el mismo tamaño ni se tienen porque encontrar en mismo
número en imágenes de las mismas dimensiones. La calidad de una imagen viene dada por
número de pixels en que dividamos una imagen (normalmente esto se mide en puntos por
pulgada o dpi, de hecho una cámara digital tiene mayor resolución cuantos más megapíxel
puede capturar) y el número de colores que puedan tener y, evidentemente, ocuparán más
espacio en disco en la medida que dicha calidad aumente. Como consecuencia de esto
aquellos gráficos con más calidad y número de pixels serán mucho más costosos de
reproducir y transformar para nuestra aplicación o reproductor gráfico y más lentos en la
descarga vía web.
Entre los tipos de archivo de mapa de bits más comunes tenemos: JPG, PCX, PNG, TIFF,
GIF, BMP, ...
Podemos encontrar formatos comprimidos, como GIF , PNG o JPG o no comprimidos,
como BMP.
Como hemos visto, para generar un gráfico de mapa de bits, nuestro PC tiene que
almacenar y trabajar con una gran cantidad de información por la necesidad de mantener los
datos de cada pixel.
Sin embargo, para representar una imagen vectorial se considera que el gráfico está
formado por un conjunto de vectores o líneas.
Esto es una gran ventaja, ya que una línea, que en el caso de un bitmap estaría compuesta
por muchos pixels, en una imagen vectorial solo se necesita almacenar información sobre su
principio, su final y su aspecto. Esto es así con las líneas y con cualquier figura más compleja.
Por ejemplo, podríamos representar un círculo simplemente guardando la información de su
centro y su radio, además de indicar el color de contorno y el de fondo. Aquí reside el secreto
del reducido tamaño de los gráficos de este tipo.
Además, si aumentamos el tamaño de la imagen, sólo hay que volver a generarla a partir
de sus coordenadas, lo que la mostrará perfectamente nítida por mucho que la aumentemos.
¿Cómo trabaja Flash?
Flash, aunque permite trabajar también con bitmaps, utiliza gráficos vectoriales para
realizar sus animaciones. Esto permite que se generen animaciones de muy alta calidad y
dimensiones, reduciendo mucho su tiempo de carga cuando intentamos visualizarlas en
nuestro navegador web. Además los ficheros Flash no necesitan ser descargados
completamente para visualizarse. En cuanto existe una información mínima suficiente el
fichero se puede mostrar mientras continua su descarga al mismo tiempo.
Unidad 9. Gráficos (II)
9.3. Creando un gráfico y comprobando sus propiedades
Como explicar teóricamente las propiedades de un gráfico resulta un tanto confuso, vamos
a ver de manera práctica lo que queremos explicar. Vamos a crear un gráfico en Flash y a
comprobar las propiedades que hemos comentado en el primer apartado del tema. Para ello,
abre una nueva película Flash (Archivo→ Nuevo, archivo ActionScript 3).
Ahora tenemos que crear el objeto que queremos convertir en un símbolo Gráfico.
Dibujemos, por ejemplo, un óvalo en cualquier lugar del área de trabajo con la herramienta
Óvalo
de la barra de herramientas de dibujo y démosle un color de relleno que será lo
que después animemos (Selecciona el fondo del óvalo y dale el color azul mediante la
herramienta Relleno de color.
).
Ya hemos creado nuestro objeto, vamos a convertirlo en un símbolo gráfico ¿lo recuerdas?
Selecciona el objeto, haz clic derecho sobre el o haz clic en el menú modificar y selecciona
Convertir en Símbolo, lo convertimos en un símbolo como ya habíamos visto y dándole el
nombre GráficoAnimado y seleccionando el Tipo Gráfico:
Ahora vamos a crear la animación del gráfico. Puesto que todavía no hemos visto a fondo
las animaciones, la vamos a realizar de una forma que quizá no sería la más apropiada la
mayoría de las veces, pero nos servirá muy bien para este ejemplo. Para ello selecciona
nuestro gráfico y pulsa el botón derecho del ratón. Se desplegará un menú, en el que
seleccionaremos la opción Edición para modificar el gráfico y acceder a su línea de tiempo.
Comprueba que estás en la línea de tiempos del gráfico (justo encima del escenario existe
una secuencia que nos indica en qué nivel nos encontramos. En la imagen inferior, se puede
apreciar que nos encontramos en "Escena1 - Gráfico Animado" y, por tanto estamos dentro
del gráfico (y la línea de tiempos que vemos es la del gráfico, y no la de la película principal)
Crearemos a continuación nuevos fotogramas clave seleccionando uno a uno los frames
número 2, 3 y 4 y pulsando F6 cuando los seleccionemos.
Pulsa sobre el frame 2 y cámbiale el color de fondo al óvalo como hicimos antes. Haz lo
mismo en los dos siguientes frames.
Tu línea de tiempos debería tener este aspecto:
Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel
inicial (Película principal) y podremos ver nuestro gráfico "desde fuera".
Ahora ya tenemos completo nuestro gráfico animado. ¿Qué crees que sucederá si
reproducimos la película? Comprobémoslo pulsando Control + Intro, se visualizará la
película.
¿Y bien? Nada. Nada en absoluto. El óvalo sigue tal cual. ¿Por qué? La respuesta está en
las características de los gráficos que habíamos explicado: la línea de tiempos del gráfico va
ligada a la de la película.
En este caso la línea de tiempos de la película tenía un solo frame, mientras que la del
gráfico tenía 4, por tanto, no le hemos dado tiempo al gráfico a desarrollar su animación; sólo
ha reproducido un frame, el primero.
¿Cómo podemos solucionarlo?
Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del
reproductor de Flash, selecciona el fotograma 5 de la película principal y pulsa F6. Ahora
tenemos 5 fotogramas en la película principal.
Pulsa de nuevo Control + Intro.
Unidad 9. Gráficos (III)
9.4. Introducir un Mapa de bits
Los gráficos de tipo Mapa de Bits pueden crearse con muchos programas. Si deseas que
en tus películas hayan mapas de bits lo más seguro es que prefieras crearlos y hacerlos más
espectaculares en otro programa más apropiado que Flash para el manejo de Bitmaps:
Photoshop, Fireworks, GIMP, etc...
Flash CS5 permite importar mapas de bits de otros programas, cuando han sido guardados
en formatos gráficos GIF, JPG, TIFF y muchos más. También nos permite modificarlos en
cierto modo. Podemos cambiarle el tamaño y convertirlo en un símbolo para aprovechar las
opciones que nos ofrece Flash aunque, teniendo en cuenta qué es un bitmap, no podremos
modificarlo "internamente" pero podremos usarlo como un símbolo más.
Para importar un archivo de Mapa de Bits al escenario haz clic en el menú Archivo →
Importar → Importar a escenario.
Se abrirá el cuadro de diálogo de Importar, allí deberás seleccionar el formato de imagen
que quieres importar seleccionándolo en el desplegable Tipo. Luego navega por las carpetas
hasta encontrarlo. Selecciónalo haciendo clic sobre él y pulsa el botón Abrir.
La imagen se incluirá en el escenario y estará lista para trabajar con ella.
Aquí tienes una muestra de cómo hacerlo.
9.5. Introducir un archivo vectorial
Al igual que los mapas de bits, hay otros programas que trabajan con gráficos vectoriales
como también hace Flash CS5.
Si queremos traer un archivo vectorial creado en otro programa, por ejemplo Freehand o
Illustrator, podemos hacerlo de manera muy sencilla.
Simplemente accedemos al menú Archivo → Importar → Importar a escenario. A
continuación, seleccionamos el tipo de archivo correspondiente al gráfico vectorial que
queramos importar. Por ejemplo AI de Illustrator.
Pulsamos Abrir, y ya tenemos nuestro archivo vectorial.
Este archivo sí lo podremos modificar internamente ya que Flash es capaz de hacer
gráficos de este tipo.
Concretamente, Illustrator pertenece también a Adobe, igual que Flash, con lo que la
compatibilidad en este caso es total.
Si quieres saber más sobre compatibilidad de archivos en Flash visita este avanzado.
Unidad 9. Avanzado: Compatibilidad de archivos
Como vimos en la introducción del curso, Adobe ha hecho grandes esfuerzos para integrar
Flash en el mismo paquete donde se incluyen el resto de programas que año tras año vienen
ofreciendo. Esto ha resultado en una compatibilidad casi perfecta entre los archivos de
todos los paquetes que integran la suite.
De esta forma ahora es muy sencillo incluir, por ejemplo, archivos de Photoshop en un
proyecto de Flash.
Para ello simplemente deberemos hacer clic en el menú Archivo y seleccionar la opción
Importar → Importar a biblioteca.
Como hemos visto en el apartado anterior bastará con seleccionar el archivo PSD que
queremos añadir a la biblioteca. Una vez hecho se abrirá el siguiente cuadro de diálogo:
Aquí Flash nos proporciona diferentes opciones.
Como puedes ver en la imagen, se muestra el archivo desglosado en las diferentes capas
que componen el archivo. Seleccionando una de ellas podremos ver las diferentes opciones
de importación para cada una de ellas.
Si pulsásemos Aceptar directamente añadiríamos a nuestro proyecto las capas una a una
como mapa de bits. Pero podemos configurar de un modo más preciso la forma en la que se
tratará cada capa. Para ello selecciona una de las capas para ver sus opciones.
Observa que es posible importar una capa como Imagen de mapa de bits con estilos de
capa editables. Esta opción nos será muy útil si la capa en cuestión tiene estilos creados en
Photoshop y queremos que sean importados de forma separada para que mas tarde puedan
ser editados.
También podremos decidir el grado de compresión, es decir, la calidad con la que la capa
se añadirá al proyecto. Ten en cuenta que a mayor calidad mayor será el peso del archivo
final de Flash. Por lo que para conseguir una descarga rápida del archivo no deberemos
abusar demasiado de esta característica.
Una vez terminado pulsamos Aceptar y el archivo PSD se mostrará en nuestra biblioteca.
Podemos arrastrar directamente el objeto terminado en .psd al escenario para insertar en
la película el proyecto completo de Photoshop como un mapa de bits. De esta forma la
imagen será completamente editable, pudiendo entrar en cada una de las capas haciendo
doble clic sobre ella.
Aunque quizás una de las características más interesantes de este método sea la
posibilidad de poder acceder una a una las capas (ahora tratadas como objetos) para editarlas
por separado.
Del mismo modo también será posible añadir únicamente una de ellas simplemente
arrastrándola sobre el escenario. De esta forma hemos conseguido importar un archivo de
Photoshop y trabajar con las distintas capas por separado gracias a la integración de Flash en
la suite de Adobe.
Unidad 9. Gráficos (IV)
9.6. Exportar un objeto Flash como mapa de bits
La interfaz de dibujo de Flash, como hemos visto, resulta muy cómoda en determinadas
ocasiones para realizar dibujos. Así podría interesarnos utilizar Flash CS5 para crear un dibujo
y después utilizarlo en otros programas o para cualquier otro uso.
Esto es perfectamente posible con Flash, ya que nos permite exportar un objeto de flash
como un bitmap. Eso sí, debemos tener en cuenta, como vimos en el tema básico, que la
mayoría de mapas de bits no permiten animaciones, por esto el objeto flash que exportemos
no debería contener animación ya que ésta no se guardará.
Para realizarlo seleccionamos el objeto que vamos a exportar y accedemos al menú
Archivo → Exportar → Exportar Imagen... Luego introducimos en el campo Nombre el
nombre que queremos que tenga nuestro nuevo bitmap.
Seleccionamos el tipo de mapa de bits en que deseemos convertir nuestro objeto y
pulsamos Guardar.
Ahora ya podemos usar nuestro objeto Flash como un bitmap.
Para entender mejor cómo te aconsejamos realizar el Ejercicio Exportar un objeto como
mapa de bits.
9.7. Publicar como un mapa de bits
Al Exportar como hemos visto en el punto anterior, podemos "sacar" una parte de nuestra
película como un gráfico (un símbolo, un fotograma...).
Pero si lo que tenemos ya es una película completa, y queremos generar una imagen a
partir de ella, lo haremos publicándola. Al publicar, generamos un archivo partiendo de la
película creada.
Lo habitual, y que veremos más adelante, es publicar la película como un archivo Flash
(swf). Pero también podemos hacerlo como imágenes.
Para ello, tenemos que acceder a la Configuración de publicación, en el menú Archivo.
Se abrirá un diálogo, en el que lo primero que elegimos es el formato en que lo queremos
publicar, y el nombre de archivo que se le dará.
Por cada formato seleccionado, se añadirá una pestaña. Desde cada una, podemos
cambiar las opciones de cada tipo de imagen.
Cuando lo tengamos, basta con pulsar el botón Publicar. En la misma carpeta donde está
el archivo Flash (.fla) se crearan las imágenes.
Unidad 9. Gráficos (V)
9.8. Crear un GIF animado con Flash
Como vimos en el tema básico hay tipos de archivo de mapa de bits que soportan
animaciones, como los GIF. Pues bien, con Flash también podemos crear una animación y
guardarla como un GIF animado. Los fotogramas de la película se convertirán en fotogramas
del GIF.
Para lograrlo, tenemos que publicar la película como GIF, lo cual configuramos desde la
Configuración de publicación, en el menú Archivo.
Entre los formatos disponibles, marcamos Imagen GIF.
Y configuramos algunos parámetros pulsando en su pestaña:
Entre las opciones concretas del GIF, hay dos que afectan a la animación:
En Reproducción, podemos marcar Estática (por defecto) o Animación. Debemos de
elegir esta última para que el gif sea animado.
Si es gráfico es animado, podemos seleccionar cuántas veces se repite dicha animación.
Entre Reproducir indefinidamente en bucle, o Repetir un número determinado de veces.
Otra opción muy interesante es Transparente, en la que decidimos cómo se exporta el
escenario. Si como un color opaco o transparente.
Abajo vemos el GIF Animado que resulta de exportar nuestro gráfico Flash.
Ejercicios unidad 9: Gráficos
Ejercicio 1: Exportar a Gráfico animado
1. Abre el archivo exportar.fla que se encuentra en la carpeta de ejercicios del curso.
2. Crea un archivo GIF transparente para que muestre la animación.
3. Deberá quedarte algo así:
Observa que esta animación se trata de una imagen, no de un archivo Flash.
Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.
Ayuda ejercicios unidad 9: Gráficos
Ejercicio 1: Exportar a Gráfico animado
1. Abre el archivo exportar.fla de la carpeta ejercicios.
2. Abre el menú Archivo finalmente Configuración de publicación. Se abrirá un cuadro
de diálogo.
3. Entre todas las opciones de publicación, marca únicamente imagen GIF.
4. Pulsa en la pestaña GIF. Se mostrarán sus opciones:
5. Maraca la opción re reproducción Animada.
6. Asegúrate de que está marcada la opción Repetir indefinidamente.
7. Selecciona la casilla Transparente para que el fondo de la película quede transparente.
El resto de las opciones puedes dejarlas como están.
8. Pulsa el botón Publicar y lo tendrás listo.
9. Ahora, podrás encontrar el GIF en la carpeta de ejercicios, o en la carpeta donde tengas
el archivo exportar.fla.
Evaluación Unidad 9
1. Los gráficos poseen línea de tiempos propia.
a) Verdadero
b) Falso
2. Los gráficos pueden ser estáticos o dinámicos.
a) Verdadero
b) Falso
3. La línea de tiempos de un gráfico es independiente de la línea de tiempos de la película.
a) Verdadero
b) Falso
4. Flash admite importación de archivos vectoriales.
a) Verdadero
b) Falso
5. ¿Cuál de estas 3 afirmaciones es correcta?.
a) La opción "Importar" determina lo importante que es un gráfico dentro de nuestra
película.
b) Mediante la opción "Exportar" podemos publicar imágenes Flash directamente en la
web.
c) Flash puede incluir en sus películas imágenes creadas con otros programas,
mediante la utilidad "Importación".
6. Los gráficos vectoriales que importemos podremos modificarlos usando Flash CS5, pues
este tipo de imágenes está soportado.
a) Verdadero
b) Falso
7. En un gráfico no es posible incluir sonidos, controles ni otros símbolos gráficos.
a) Verdadero
b) Falso
8. Es indiferente el uso de gráficos y clips de película, pues sus funciones son muy
parecidas.
a) Verdadero
b) Falso
9. Flash permite publicar imágenes como tales o como animaciones.
a) Verdadero
b) Falso
10. La opción exportar es prácticamente equivalente a la opción Publicar y pueden usarse
indistintamente en casi todas las ocasiones.
a) Verdadero
b) Falso
Unidad 10. Clips de Película (I)
10.1. ¿Qué es un clip de película?
Un Clip de Película, simplemente Clip o MovieClip es una película en sí misma, como
cualquiera de las que podamos haber creado hasta el momento en este curso. Normalmente
nos referimos a ellas como clips cuando las incluimos en otra película, formando un símbolo.
Por tanto, cualquier clip siempre podrá estar compuesto por otros clips insertados en él, que a
su vez estén formados por otros, etc.
Al igual que los otros tipos de símbolos de Flash, los clips de película tienen su propia
línea de tiempo. Sin embargo, y a diferencia de los Gráficos (como veremos a continuación),
esta línea temporal no está ligada a la línea de tiempo del documento que lo contiene, de tal
forma que su ejecución es independiente, y en un fotograma de la película principal se puede
estar reproduciendo repetidamente un clip.
Este tipo de símbolos puede contener cualquier otro tipo de símbolo: gráfico, clip o botón,
así como cualquier objeto creado con Flash, ya que un clip es realmente una película.
Otra de las ventajas de los Clips la encontramos cuando realizamos películas de gran
complejidad y tamaño, en la que intervienen un número muy elevado de fotogramas, debido a
que en la vista general del documento, nosotros sólo veremos un fotograma por clip, el cual
puede estar compuesto por muchos frames, lo que nos permitirá tener una mejor visión de
cómo se desarrolla nuestra animación, y una línea de tiempo más clara y "limpia"
Los Clips son una de las herramientas que dan mayor potencia a Flash CS5,
permitiéndonos crear películas de gran complejidad y multiplicar los efectos visuales, ya que
se pueden crear múltiples movimientos independientes entre sí y crear conexiones entre los
diferentes Clips de un documento.
Todas aquellas cosas que no podíamos hacer con un símbolo de tipo Gráfico, lo podemos
hacer con un Clip, además de poder realizar también todo aquello que nos permitía dicho
símbolo. Por esto, normalmente se utilizan los clips para cualquier tipo de animación debido a
su gran flexibilidad, dejando los gráficos sólo para imágenes estáticas.
10.2. Comprobar las propiedades de un Clip
Como hicimos con los gráficos, vamos a ver como la línea de tiempo de un clip no está
ligada a la línea de tiempo del documento que lo contiene y, a la vez, veremos la diferencia
entre los clips y los símbolos Gráficos, que supone una de las razones de la mayor utilización
de los primeros en lo que se refiere a la creación de animaciones.
Para ello abriremos una nueva película Flash (Archivo → Nuevo, archivo ActionScript 3).
Después importaremos una imagen cualquiera o bien crearemos una. La convertimos en
Símbolo (botón derecho, Convertir en símbolo...) y seleccionamos en Tipo "Clip de
Película"
Arrastramos al escenario (si no está ya allí) nuestro clip de película.
Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir,
tenemos dos películas, cada una con su línea de tiempo.
Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos con
los símbolos de tipo Gráfico.
Observa la línea de tiempo de la película principal y comprueba que sólo tiene un
fotograma.
Editemos el Clip que insertamos en el documento, haciendo doble clic sobre él y
examinemos su línea de tiempos. Aparecerá un único MovieClip. Podemos realizar algo
similar a lo realizado con los gráficos. Si creásemos una animación de movimiento, como
veremos más adelante, podría quedarnos así:
Como vemos, la duración del clip que hemos insertado es mucho mayor que la película
nueva que lo contiene. Si el símbolo fuera un gráfico ya hemos visto que al reproducir la
película no ocurriría nada, porque sólo se reproduciría el primer fotograma de su línea de
tiempo. En cambio, al tratarse de un clip, comienza a reproducirse al pasar por el primer
fotograma, y como la liena de tiempo es independiente, sigue reproduciéndose aunque la
línea de tiempo principal haya acabado.
Unidad 10. Clips de Película (II)
10.3. Crear un nuevo Clip
Como hemos comentado, utilizaremos normalmente Clips para hacer animaciones. Aunque
no lo hayamos comentado antes, se puede crear un símbolo Flash de la nada, igual que
creamos un nuevo archivo, de forma que se quede en la biblioteca y podamos editarlo cuando
nos convenga. Esto puede ser interesante en los clips, ya que a diferencia de los gráficos, su
finalidad suele ser el movimiento y, en animaciones complejas, en ocasiones se les asignan
acciones especiales en las cuales puede que no sea necesario crearlo en ese momento o
convenga dejar el clip vacío.
Por esto, es interesante aprender cómo crear un símbolo, en este caso un clip, de la nada
para después modificarlo.
Para insertar un clip vacío haz clic en Insertar → Nuevo símbolo y se abrirá el cuadro de
diálogo de Crear un nuevo símbolo.
Allí deberás darle un Nombre para identificarlo más tarde en la Biblioteca y seleccionar la
opción Clip de Película en el desplegable Tipo.
A partir de este momento tendremos un nuevo clip (vacío) al cual podremos acceder desde
nuestra Biblioteca (menú Ventana → Biblioteca), si hacemos clic derecho sobre él y
seleccionamos Edición, podremos editarlo y trabajar con él.
Observa cómo hacerlo
Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips de
película y veremos el potencial real de este tipo de símbolos.
10.4. Importar y exportar MovieClips de la Biblioteca
Como para todos los símbolos los Clips se almacenan en la biblioteca del documento
cuando son creados. Esto es muy importante en muchos casos ya que habitualmente los clips
son muy reutilizables. Para importar clips de otra película debemos abrir primero la biblioteca
en la que está contenido.
Hemos visto en el tema de Símbolos, tenemos dos tipos de bibliotecas: las que están
asociadas a documentos u otras películas y las que nos proporciona Flash CS5. Pues bien, no
sólo podemos utilizar símbolos del mismo documento en el que estamos sino que podemos
importarlos de otros documentos de nuestro disco duro, lo que, en el caso que nos ocupa,
puede resultar de gran utilidad. Obviamente la exportación mediante biblioteca se hace
automáticamente ya que Flash deja los objetos creados en la biblioteca para que puedan ser
reutilizados.
Para importar un Clip de un archivo del disco duro debemos ir al menú Archivo →
Importar → Abrir biblioteca externa..., seleccionar el Archivo Flash (.fla) del que queremos
importar sus símbolos de biblioteca y pulsar Abrir.
Aparecerá la biblioteca con la lista de los símbolos correspondientes a los gráficos, botones
y clips del documento en cuestión.
Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarán a su
vez todos los símbolos que contenga, incluidos los clips.
Existe otra forma mucho más cómoda: si tenemos dos documentos abiertos, podemos
arrastrar los elementos directamente de un escenario a otro.
Para ver cómo exportar e importar una película completa como un sólo movie clip y poder
usar esto para el desarrollo en programas como Swish, revisa nuestro tema avanzado: Otros
usos de los Movie Clips
.
Ejercicios unidad 10: Clips de Película
Ejercicio 1: Crear un Clip a modo de Cuenta Atrás
1. Crea una película con sólo 1 fotograma.
2. Escribe un número cualquiera, por ejemplo un 3.
3. Conviértelo a símbolo de tipo Clip.
4. Crea una animación fotograma a fotograma en la que se vea una cuenta atrás hasta el
cero.
5. Comprueba que pese a tener la película original un frame y el clip cinco, la animación se
ve completamente.
6. Guárdalo como cuenta.fla
Ejercicio 2: Crear un clip vacío y editarlo después
1. Crea una nueva película.
2. Crea un nuevo símbolo de tipo Movie Clip vacío.
3. Sal a la línea de tiempo principal.
4. Vuelve a editar el símbolo.
Ejercicio 3: Exportar una película con protección
1. Partimos del Clip del ejercicio 1, ábrelo.
2. Exporta la película swf de forma que nadie la pueda importar después.
Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.
Ayuda ejercicios unidad 10: Clips de Película
Ejercicio 1: Crear un Clip a modo de Cuenta Atrás
1. Crea una película con 1 fotograma con Archivo → Nuevo, eligiendo un archivo
ActionScript 3.
2. Accede a Insertar → Nuevo Símbolo... o bien pulsa las teclas Control + F8.
3. Mediante la Herramienta Texto marcada en la barra de herramientas con una T escribe
el 3.
4. Pulsa F6 para crear tres fotogramas claves en los fotogramas 2, 3 y 4. Luego borra el 3
que aparecerá en ellos y escribe un 2, un 1 y un 0 en su lugar.
5. Puedes reproducir la película con Control + Enter.
6. Elige menú Archivo → Guardar Como... y dale el nombre cuenta.fla.
Ejercicio 2: Crear vacío y editarlo después
1. Crea un nuevo archivo ActionScript 3, desde el menú Archivo → Nuevo.
2. Accede a Insertar → Nuevo Símbolo o bien pulsa Control + F8
3. Pulsa en el icono de la escena principal, en este caso será Escena 1, que está cerca de
la línea de tiempo..
4. Abre la Biblioteca del documento mediante Ventana → Biblioteca, pulsa con el botón
derecho sobre el nombre del clip y selecciona la opción Editar del menú emergente.
Ejercicio 3: Exportar una película con protección
1. Abre mediante Archivo → Abrir y selecciona el archivo cuenta.fla.
2. Exporta con Archivo → Exportar → Exportar Película, selecciona el tipo de archivo
SWF y dale un nombre. En la ventana que aparece marca la opción Proteger frente a
Importación, y en el campo Contraseña escribe la clave que quieras.
Prueba de la Unida 10
. Un clip de película puede contener una imagen estática.
a) Verdadero
b) Falso
2. Un clip de película puede contener una animación.
a) Verdadero
b) Falso
3. Un clip de película puede hacer las funciones de un Gráfico.
a) Verdadero
b) Falso
4. Los Clips dan más claridad a películas complejas.
a) Verdadero
b) Falso
5. ¿Cuál de estas afirmaciones es cierta?
a) Es imposible importar un archivo SWF que no es nuestro y usarlo como si fuera un
clip propio.
b) Si importamos un archivo SWF ajeno, la animación se importa como una secuencia,
toda ella de fotogramas clave.
c) Es imposible impedir que alguien importe un clip guardado como SWF y que hemos
distribuido libremente.
6. La línea temporal no está ligada a la línea de tiempos del documento.
a) Verdadero
b) Falso
7. Un clip de película puede contener cualquier otro tipo de símbolo.
a) Verdadero
b) Falso
8. Es posible proteger con contraseñas los clips de película para que no puedan ser
importados y utilizados por terceros.
a) Verdadero
b) Falso
9. Los símbolos de tipo Clip de Película tienen una línea de tiempos propia ligada a la de la
escena principal.
a) Verdadero
b) Falso
10. La película principal es un MovieClip.
a) Verdadero
b) Falso
Unidad 11. Botones (I)
11.1. ¿Qué es un botón?
Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las
películas Flash con aquel que las está visualizando. Un botón, en Flash, es igual que un botón
de cualquier entorno informático, sea web o cualquier otro.
Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo
una serie de acciones. También es habitual ver cómo este tipo de elementos reaccionan
cuando se les pasa el ratón por encima o cuando están pulsados.
La interfaz de Flash está diseñada de manera especial para la creación de botones, lo que
nos permite crear todos estos efectos de una manera muy sencilla.
Al igual que los otros símbolos de Flash CS5, los botones tienen su propia línea de
tiempo. Esta es independiente pero, sin embargo, está formada únicamente por cuatro
fotogramas, uno para cada estado posible del botón:
Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está
situado sobre él.
Sobre. Aspecto del botón cuando situamos el puntero sobre él.
Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos
pulsado.
Zona activa. Aquí debemos indicar el área real en la que queremos que actúe nuestro
botón. Esto es importante sobre todo en botones compuestos sólo por texto como
veremos más adelante.
Parece que la limitación de fotogramas podría implicar una limitación en la capacidad de
espectacularidad y utilidad de estos símbolos, pero no es así. Ten en cuenta que podemos
tener todas las capas que queramos.
Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de
tipo Bitmap). La unión de las posibilidades de todos los símbolos pueden dotar a los botones
de efectos asombrosos.
Todo esto es lo referente a la apariencia del botón. Después, tenemos que programar lo
que queremos que haga el botón, cómo queremos que afecte a la película. Y esto lo haremos
con ActionScript.
Unidad 11. Botones (II)
11.2. Creación de un 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.
Comenzamos creando el objeto que representará el aspecto por defecto de nuestro
botón con las herramientas que nos ofrece Flash CS5. Recuerda que puedes usar varias
capas.
Seleccionaremos el objeto y accederemos al menú Insertar → Convertir en Símbolo, le
daremos el Tipo Botón y asignaremos un nombre a nuestro nuevo símbolo.
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 tiempo del botón (observa que tiene el aspecto que
hemos mostrado anteriormente), seleccionaremos cada uno de los frames (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.
Aquí podemos ver una muestra de creación de un botón lo más simple posible
Como resultado obtenemos el botón que continuación mostramos.
Éste es un botón muy básico, pero como veremos se pueden complicar mucho. Para
empezar nos servirá con éste. Observa como cambian los estados de reposo (rojo pálido),
sobre (rojo) y pulsado (azul).
Si una vez creado el botón queremos observar sus distintos estados y todavía no hemos
terminado la película entera y por tanto no deseamos tener que reproducirla toda podemos
hacerlo a través del menú Control → Habilitar botones simples. Así podremos interactuar
con el botón hasta que desactivemos esta opción
Unidad 11. Botones (III)
11.3. Formas en los botones
Los botones son símbolos que pueden tener multitud de formas. Si bien lo más habitual es
ver botones rectangulares, cuadrados y circulares, cuya creación es inmediata como vimos en
el punto anterior, también hay otros muchos tipos de botones que, pese a ser menos
utilizados, es muy habitual verlos en multitud de páginas web.
Entre estos están los creados mediante formas poligonales, aquellos que están formados
por texto únicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar más
vistosidad ya que algunos resultan más expresivos, y en esto Flash nos ayuda mucho, debido
a la relativa sencillez de creación de botones que sus herramientas de dibujo nos ofrece.
Hay varias formas de botón también muy extendidas, como el botón con relieve sencillo o
los botones en forma de píldora. Puesto que existen muchas formas de conseguir estos
efectos, a continuación tienes un ejercicio paso a paso que muestra una forma de conseguir el
relieve en un botón rectangular.
Practica con el ejercicio paso a paso Crear un botón con relieve.
Unidad 11. Ejercicio: Crear un botón con relieve
Objetivo
Crear un botón con efecto relieve de forma rectangular tipo formulario de manera rápida
y sencilla.
Ejercicio paso a paso.
1. Dibujamos un rectángulo en el área de trabajo.
2. Seleccionamos el fondo.
3. Cambiamos el color de fondo del rectángulo. Por ejemplo a gris.
4. Con la herramienta texto escribimos el texto aulaClic en el interior del rectángulo.
Ahora que ya tenemos el molde, vamos a crear un sencillo efecto de relieve.
5. Seleccionamos los bordes izquierda y superior.
6. Modificamos el color de dichos bordes. Le damos el color blanco.
7. Seleccionamos ahora el borde inferior y aplicamos un color gris oscuro.
Ya va tomando relieve, ahora vamos a crear los diferentes estados.
8. Seleccionamos el botón.
9. Hacemos clic derecho sobre él y elegimos Convertir en símbolo...
10. Marcamos el Tipo botón y le damos un nombre. Pulsamos Aceptar.
11. Hacemos doble clic sobre el botón para editarlo.
12. Mediante F6 creamos fotogramas clave en cada uno de los fotogramas correspondientes
a los estados del botón.
13. Seleccionamos el fotograma Presionado.
14. Modifiquemos ahora el borde inferior y el derecho del botón aplicándole el color blanco.
15. Finalmente seleccionemos los bordes superior e izquierdo y démosle el color negro.
Respecto a los fotogramas Sobre y Zona activa, los dejaremos tal y como están puesto que
no deseamos que haga nada mientras no pulsemos el botón y el área de acción es la que
comprende nuestro rectángulo.
El resultado obtenido es el siguiente. Podemos pinchar sobre él y comprobar el efecto.
Unidad 11. Botones (IV)
11.4. Incluir un clip en un botón
La inclusión de clips de película en los botones puede dotar a éstos de más vistosidad.
Es habitual colocar un clip en el fotograma Sobre para indicar algún tipo de información
extra o una animación para ir más allá de un cambio de color.
También es común ver un clip de película actuando como un botón. Esto caso se puede
hacer por ejemplo poniendo el clip en el fotograma Reposo.
Veamos por ejemplo el botón siguiente:
Comprueba todos los estados del ratón. Por lo que nos dice el botón podemos intuir que
empieza algo, pero quizá no tengamos claro qué. Ayudaría a la navegación que al ponernos
sobre el cursor, el texto cambie para darnos información extra. Por ejemplo:
Lo único que hemos cambiado es que tenemos el texto como un movie clip, en cuando el
cursor está encima, lo cambiamos por otro con la información.
O podemos usar los clips para animar elementos dle botón, como en el siguiente ejemplo:
El contenido de esta página requiere una versión más reciente de Adobe Flash
Player.
Incluir un Clip en un botón es muy sencillo. Tomando este ejemplo, y partiendo de que
tenemos los dos textos como clips en la biblioteca, sólo tendremos que:
- Hacer doble clic sobre el botón para entrar en su modo de edición.
- Seleccionamos el estado Sobre para modificarlo. Selecciona la instancia del texto.
Ahora tenemos dos opciones:
- Pulsa la tecla SUPRIMIR para eliminarlo.
- Desde la Biblioteca (menú Ventana → Biblioteca) arrastramos el clip con el nuevo texto,
para crear una instancia.
O la opción más práctica:
- En las propiedades de la instancia, pulsamos Intercambiar... y elegimos el nuevo objeto
de texto.
- Por último, centramos el nuevo texto en el botón, si es necesario.
Ya esta listo, ahora cuando pases el ratón sobre el botón el clip de película empezará a
reproducirse.
Por supuesto, en vez de cambiar el texto podemos añadir otros clips, que simulen
movimientos, reflejos, etc.
En este video tutorial puedes ver cómo insertar un clip en un botón.
Unidad 11. Botones (V)
11.5. Bitmaps y botones
Además de clips, los botones también pueden contener símbolos de tipo Gráfico.
Puesto que, como ya hemos visto, todo lo que se puede hacer con un gráfico se puede
hacer con un clip, vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya que
están muy extendidos como forma de expresión gráfica a lo largo y ancho de la Red.
Si consideramos las limitaciones que ya conocemos sobre los mapas de bits puede parecer
poco interesante hacer uso de ellos en la creación de botones, pero no es así.
Básicamente podemos hacer dos cosas:
1) Incluir en cada uno de los fotogramas del botón un bitmap distinto, obteniendo un efecto
como el que se consigue con lenguajes como javascript o CSS.
2) Aprovechar las propiedades de los Gráficos en Flash. Para esto, deberíamos importar
primero el Bitmap y después convertirlo a símbolo botón. Posteriormente lo editaríamos y,
después de insertar cada fotograma clave, convertiríamos su contenido a símbolo Gráfico.
Una vez hecho esto, variando los efectos de las instancias en Flash (Alfa, Tinta, Brillo)
podremos conseguir efectos bastante buenos.
He aquí una pequeña muestra en la que sólo hemos utilizado un Bitmap de tipo GIF,
sacado de la Red y lo hemos convertido en un botón gráfico aplicándole un efecto Alfa
(Transparencia) al estado de reposo, lo que da la sensación de estar apagado (también
podríamos haber aplicado brillo). En el fotograma Sobre hemos dejado el GIF original para
que al pasar sobre el botón de la sensación de encenderse. Finalmente le hemos aumentado
la cantidad de rojo en el fotograma Presionado para que parezca estar incandescente.
Unidad 11. Botones (VI)
11.6. Acciones en los botones
Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a
otros elementos de Flash CS5 vamos a comentar dos de las más comunes.
Nota: Al crear un archivo, habrás visto que podemos elegir distintas versiones de
ActionScript (3.0 o 2.0). Esto se refiere al lenguaje de programación que podemos empelar
en Flash y que lo convierte en una herramienta realmente potente. En las versiones 1 y 2, se
podían agregar comportamientos directamente en las propiedades de los botones. Pero
nosotros venimos empleando las versión 3.0 a lo largo del curso, por ser la más actual y
potente. Esta versión nos obliga a escribir el código ActionScript. Veremos cosas básicas, y
entraremos un poco más en ActionScript a partir del tema 16.
Comenzamos por crear o añadir nuestro botón, y asignarle un nombre de instancia. El
nombre que le demos es muy importante, porque nos permitirá acceder a él desde el código.
Aunque podemos escribir el código en la misma capa, recomendamos crear una capa
exclusivamente para el código, por tenerlo todo mejor organizado.
Ahora, abrimos en el panel Acciones (menú Ventana → Acciones). Se mostrará un área
en blanco en la que podemos escribir:
Este panel, en el área blanca de la derecha, nos permite escribir o editar acciones
directamente. De momento no profundizaremos en esto, y ta lo haremos en el tema
correspondiente.
También encontramos la ventana Fragmentos de código. Desde ella, podemos generar
breves instrucciones de código para el símbolo seleccionado, lo que la mayoría de veces nos
facilitará la tarea, ya que se trata de las opciones más repetidas.
Sin entrar en detalle de qué es cada palabra, pues esto ya lo veremos, este es el aspecto
general del código asociado a un botón:
?
1
miBoton.addEventListener(MouseEvent.CLICK, accionesMiBoton);
2
function accionesMiBoton(event:MouseEvent):void
3
{
4
//acciones
5
}
6
Donde miBoton será el nombre de la instancia del botón.
A esta instancia, le indicamos que queremos que reaccione al clic del ratón
(MouseEvent.CLICK), ejecutando las acciones llamadas accionesMiBoton (podemos darle el
nombre que queremos).
accionesMiBoton contiene las acciones a realizar, y podemos verlo a continuación. Solo
habría que cambiar el texto //acciones por las acciones a realizar.
Si tenemos varios botones, a cada uno lo referiremos por su nombre de instancia que es
único. También tenemos que dar un nombre único a accionesMiBoton para cada uno, a no
ser que queramos que realicen la misma acción.
Ahora veamos algunas de las acciones más comunes.
1) Abrir una página web. Con esto conseguiremos abrir una página cualquiera de internet
(o una película Flash), lo que nos servirá para irnos desplazando por webs que contengan
más de una página, o permitir al usuario descargarse archivos entre otras cosas.
La forma más sencilla de hacerlo es seleccionar el botón que queramos usar (en el
siguiente ejemplo, hemos llamado a la instancia btnVisitarAulaclic) y buscar la acción que
queremos en el panel Fragmentos de código. En la carpeta Acciones hacemos doble clic
sobre Hacer clic para ir a página Web. Se generará un código como el siguiente:
?
1 /* Hacer clic para ir a página Web
2 Al hacer clic en la instancia del símbolo especificado, la dirección
URL se carga en una nueva ventana del navegador.
3
Instrucciones:
4
1. Reemplace http://www.adobe.com por la dirección URL que desee.
5
Conserve las comillas ("").
6
*/
7
btnVisitarAulaclic.addEventListener(MouseEvent.CLICK,
8 fl_ClickToGoToWebPage);
9 function fl_ClickToGoToWebPage(event:MouseEvent):void
10{
11navigateToURL(new URLRequest("http://www.adobe.com"), "_blank");
12}
13
14
Lo primero que encontramos en el código generado son comentarios. Este código,
normalmente en gris claro, no se ejecuta como tal, y solo sirve para indicar cosas al usuario.
En este caso, nos da explicaciones de cómo usar el código generado.
Lo único que hemos de hacer es reemplazar la url de ejemplo (www.adobe.com) por la de
la página a la que queramos que nos envíe el botón.
La instrucción en ActionScript que nos permite hacerlo es navigateToURL(new
URLRequest("http://www.mipagina.es"), "_blank");. "http://www.mipagina.es"
se refiere a la página que queremos abrir, y "_blank" indica que se abrirá en una página
nueva.
Unidad 11. Botones (VII)
2) Controlar una película en curso. Si estamos reproduciendo una película Flash y
queremos permitir que el usuario la detenga, la ponga en marcha, avance, retroceda...
Para ello podemos emplear las acciones:
stop(); para detener.
play(); para reproducir.
gotoAndPlay(numeroFotograma); para ir a un fotograma determinado.
Por ejemplo, podemos tener el botón btnPausar para parar la película y el botón
btnContinuar para reproducir. Nos será más cómodo si usamos el panel Fragmentos de
código para generar el evento Clic del botón (carpeta Controladores de eventos → evento
MouseClick). En el código generado, reemplazamos el código personalizado por nuestras
funciones:
?
1 btnPausar.addEventListener(MouseEvent.CLICK, fl_PausarReproduccion);
2 function fl_PausarReproduccion(event:MouseEvent):void
3 {
4 stop();
5 }
6 btnContinuar.addEventListener(MouseEvent.CLICK,
7 fl_ContinuarReproduccion);
8 function fl_ContinuarReproduccion(event:MouseEvent):void
9 {
10play();
11}
Tal cual lo hemos puesto, afectaría a la película principal. Si lo que queremos parar o
reproducir es un clip determinado, habría que escribirlo delante de la acción, separado por un
punto. Por ejemplo miClip.stop();.
Reconocemos que aunque ActionScript 3.0 es más potente que la versión 2.0, puede
resultar mas liosa para usuarios sin conocimientos previos. Si quieres ver cómo serían estos
mismos ejemplos en ActionScript 2, te invitamos a echar un vistazo a esta página de nuestro
curso de Flash CS3.
En este videotutorial de introducción a ActionScript 3 puedes ver cómo empezar a poner
código en un botón.
11.7. Incluir sonido en un botón
Si nuestras páginas van a tener sonido, el sonido en los botones es una parte fundamental.
Podemos hacer, por ejemplo que se activen sonidos al pulsar un botón.
Para ello, simplemente debemos editar nuestro botón y seleccionar el fotograma
Presionado, e insertar el sonido. Como vimos en el tema correspondiente. Es este caso, el
tipo de sincronización más conveniente suele ser Evento.
Ejercicios unidad 11: Botones
Ejercicio 1: Crear un Botón en forma de Píldora
1. Abre un documento nuevo
2. En el primer fotograma dibuja un objeto con forma de píldora como el de la derecha y
escribe "STOP" sobre él.
3. Conviértelo a símbolo de tipo Botón
4. Crea distintas apariencias para distintos estados
5. Guárdalo como stop.fla.
Ejercicio 2: Ajustar el Área Activa
1. Crea una nueva película
2. Escribe el texto: "VámOnoS" respetando las mayúsculas y minúsculas como se
muestran
3. Conviértelo a Botón que sólo funcione al pasar por la "O" central
Ejercicio 3: Botón con Sonido
1. Partimos del Botón del ejercicio 1. Ábrelo.
2. Haz que emita un sonido de la Biblioteca Común de Sonidos al pasar el ratón por
encima de él.
3. Haz que emita otro sonido de la Biblioteca Común de Sonidos distinto al pulsarlo.
Ejercicio 4: Detener una Película
1. Abre el documento exportar_stop.fla. Lo encontrarás en la carpeta de ejercicios.
2. En el primer fotograma tenemos un clip de película que contiene una animación que
dura más de 1 fotograma.
3. Ahora inserta en el clip el botón del ejercicio 1 de manera que se vea a lo largo de toda
su reproducción.
4. Haz que se detenga el Clip al pulsar el botón.
Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.
Ayuda ejercicios unidad 11: Botones
Ejercicio 1: Crear un Botón en forma de Píldora
1. Crea el nuevo documento con con Archivo → Nuevo, y elige ActionScript 3.0.
2. Para dibujar la forma de píldora dibuja primero un círculo perfecto (con la herramienta
Óvalo y la tecla Shift). Bórrale el borde.
3. Con la forma seleccionada, selecciona la herramienta Cubo de Pintura y elige un
degradado radial de tonos azules, colocando los marcadores como se muestra en la
imagen de la derecha.
4. Con el Cubo de pintura, haz clic y arrastra sobre la forma. Verás como te permite
regular la dirección del degradado. Puedes hacerlo tantas veces como sea necesario
hasta lograr el degradado deseado.
5. Ahora, vamos a crear la píldora. Fuera del círculo, dibuja dos líneas paralelas
(Herramienta Línea y tecla Shift). Agrúpalas (Ctrl + G).
6. Utilizando el panel alinear, centra horizontalmente el círculo y las líneas (fig. b).
7. Desagrupa las líneas (Ctrl + Shift + G) y deselecciónalas.
8. Ahora podrás seleccionar independientemente los lados de la esfera. Sepáralos (fig. c).
Puedes hacerlo con las teclas Shift + derecha o Shift + izquierda.
9. Con la herramienta Transformación libre, estira la sección que estaba entre las líneas
hasta completar la figura (fig. d).
10. Borra
las
líneas
negras.
11. Selecciona la píldora, y conviértela en un botón, haciendo clic derecho y eligiendo
Convertir en símbolo... o bien pulsando F8. Elige el tipo Botón.
12. Haz doble clic sobre él para acceder a su línea de tiempo.
13. Crea fotogramas clave los estados que quieras modificar pulsando F6 y modifícalos para
crear el efecto que prefieras.
14. Crea una nueva capa encima de ésa, e introduce ahí el texto. A no ser que quieras
variar el texto según el estado.
15. Guárdalo, pulsando Archivo → Guardar Como... y llámalo stop.
Ejercicio 2: Ajustar el Área Activa
1. Hazlo también con Archivo → Nuevo, eligiendo archivo ActionScript 3.
2. Utilizando la Herramienta Texto (marcada en la barra de Herramientas con una T)
escribe el texto: VámOnoS.
3. Haz clic en la Herramienta Selección y selecciona el texto que acabas de crear.
4. Conviértelo en un botón mediante Modificar → Convertir en Símbolo... o bien
pulsando F8, y eligiendo el tipo Botón.
5. Haz doble clic sobre él para editar su línea de tiempo.
6. Selecciona el fotograma Zona Activa, dibuja un óvalo de tal forma que tape por
completo la "O" y tenga el mismo tamaño y forma. Luego borra el texto.
Ejercicio 3: Botón con Sonido
1. Abre el archivo stop.fla, creado en el primer ejercicio.
2. Haz doble clic sobre el botón con forma de píldora.
3. Crea una nueva capa para los sonidos.
4. Haz clic en el menú Ventana → Bibliotecas comunes → Sonidos.
5. Arrastra al escenario los sonidos que quieres emplear.
6. En la nueva capa, crea fotogramas clave en Sobre y Presionado.
7. Selecciona el fotograma Sobre de la nueva capa, y en el panel Propiedades, elige el
sonido correspondiente en Nombre dentro de Sonido. En Sinc. elige Evento.
8. Repite el paso anterior, pero en el fotograma Presionado.
9. Guárdalo y ciérralo.
Ejercicio 4: Detener una Película
1. Abre el archivo exportar_stop.fla, que encontrarás en la carpeta de ejercicios.
2. En el menú Archivo, selecciona Importar → Abrir biblioteca externa, e importa el
archivo stop.fla creado en los primeros ejercicios.
3. Desde el menú Modificar elige Documento para cambiar su tamaño, y cambia la altura
a 350px.
4. Crea una nueva capa en la Línea de tiempo.
5. Selecciona el primer fotograma de la nueva capa.
6. De la biblioteca de stop.fla, arrastra el botón al escenario para crear una instancia.
7. Selecciona el botón, y en el panel Propiedades, escribe botonStop como nombre de la
instancia.
8. Selecciona la estrella, y en el panel Propiedades, escribe estrella como nombre de la
instancia.
9. Organiza la estrella y el botón en el escenario.
10. Selecciona la instancia del botón, y abre el panel Fragmentos de código.
11. En el panel, selecciona Controladores de eventos → Evento MouseClick y haz doble
clic.
12. Se creará una nueva capa con el código ActionScript. Modifícalo para que al hacer clic
en el botón se detenga la estrella:
?
1botonStop.addEventListener(MouseEvent.CLICK,
2fl_MouseClickHandler);
3function fl_MouseClickHandler(event:MouseEvent):void
4{
5estrella.stop();
6}
13. Prueba la película (Ctrl + Intro) y comprueba que funciona.
Prueba evaluativa Unida 11
1. Crear un botón en Flash es más complicado que crearlo en lenguajes como Javascript.
a) Verdadero
b) Falso
2. Es posible determinar en qué zona del botón queremos que sean aplicables las acciones.
a) Verdadero
b) Falso
3. Los botones pueden contener cualquier otro símbolo en su interior.
a) Verdadero
b) Falso
4. La línea de tiempos de un botón sólo puede tener una capa y cuatro fotogramas.
a) Verdadero
b) Falso
5. Un botón es capaz de controlar la reproducción de toda una película.
a) Verdadero
b) Falso
6. ¿Cuál de estas afirmaciones es cierta?
a) Para crear acciones en un botón, debemos insertar en cada botón el código desde el
panel Fragmentos de código.
b) Las acciones de una instancia las incluiremos en su fotograma clave, y las
editaremos desde el panel Acciones.
7. Podemos asociar acciones a un botón para que, por ejemplo, abra una ventana nueva y la
direccione a aulaclic.es.
a) Verdadero
b) Falso
8. Para asociar un comportamiento a un botón en un archivo de Flash ActionScript 3.0,
tenemos que...
a) Escribir las acciones a realizar en lenguaje ActionScript.
b) Elegir las acciones a realizar en el panel de Propiedades.
9. Si en un botón no definimos la Zona Activa el no reaccionará ante ninguna acción.
a) Verdadero
b) Falso
10. Los botones son la base de la interactividad de Flash.
a) Verdadero
b) Falso
Unidad 12. Animaciones de movimiento (I)
12.1. La animación en Flash
Flash es un programa básicamente orientado a la animación, de ahí la gran importancia de
este tema. No obstante, para ir creando animaciones cada vez más complicadas se necesita,
sobre todo, mucha práctica, aparte de conocer bien las herramientas.
En este tema y los sucesivos mostraremos las técnicas básicas de animación en Flash. La
unión de estas técnicas será la que nos permita crear las más variadas y vistosas
animaciones.
En el tema de la animación, Flash ofrece unas facilidades muy grandes, consiguiendo
efectos que normalmente requieren ciertos conocimientos y espacio de almacenamiento para
ser creados, como es el caso por ejemplo de los GIF animados o lenguajes de programación
como JavaScript, de una manera muy sencilla, sin necesidad de excesivos conocimientos y
ocupando muy poco espacio en disco.
Aunque Flash ofrece técnicas mejores, también se pueden crear animaciones a modo de
GIF animado. Se les denomina animaciones Fotograma a Fotograma. Estas son las
animaciones más básicas y conviene conocerlas. Para ello conviene visitar nuestro tema
básico:
Animaciones Fotograma a Fotograma.
A continuación veremos distintos tipos de animaciones que el creador de películas Flash
deberá tomar como guía inicial. Cabe destacar que podremos aplicar varias de estas
animaciones colocándolas en distintas capas. Con esto es con lo que conseguiremos los
efectos más espectaculares a la par que útiles.
Desde el punto de vista del diseño general de una página web es muy importante tener
claro un concepto: no se debe crear animaciones en páginas que no lo necesitan ni crear
animaciones que distraigan al que visualice nuestros documentos de lo realmente importante,
el mensaje.
Ya en la versión anterior de Flash se hicieron cambios importantes en el tema de
animaciones. Lo que hasta entonces se llamaba interpolación de movimiento, pasa a llamarse
interpolación clásica y la interpolación de movimiento actual es totalmente nueva, más potente
y versátil.
12.2. Interpolación de movimiento
Aquí puedes ver cómo realizar una interpolación de movimiento
Es la acción básica de las animaciones en Flash. Permite desplazar un símbolo Flash de un
lugar a otro del escenario, siendo necesarios únicamente dos fotogramas, lo que optimiza
mucho el rendimiento de la película.
Es importante destacar que para que una Interpolación de movimiento se ejecute
correctamente aquellos objetos que intervengan deberán haber sido previamente
convertidos a símbolos. Los gráficos, clips de película, textos y botones son algunos de los
símbolos que se pueden interpolar.
También se debe tener cuidado al realizar una interpolación con dos símbolos que se
encuentren en la misma capa, ya que el motor de animación los agrupará como uno sólo y el
resultado no será el esperado. Por esto es conveniente asegurarse de dos cosas:
1. Separar en distintas capas los objetos fijos y los que estarán animados.
2. Poner también en distintas capas objetos que vayan a ser animados con
direcciones o formas distintas.
Pasemos pues al tema en cuestión. Una interpolación de movimiento, como hemos dicho,
es el desplazamiento de un símbolo de un punto a otro del escenario. El hecho de que sólo se
necesiten dos fotogramas es debido a que Flash, únicamente con la posición inicial y final,
calcula una trayectoria en línea recta y la representa (veremos que también se pueden realizar
movimientos no rectilíneos).
Crearla es tan simple como hacer clic derecho sobre el fotograma que contiene los
elementos y elegir Crear interpolación de movimiento. Por defecto, se añadirán unos
cuantos fotogramas, rellenos de un color azulado.
Ahora vamos al fotograma final, o creamos uno clave de propiedad donde nos plazca. Y
desplazamos el símbolo. Veremos que aparece una línea punteada, por defecto recta, que
representa el trazado de la animación.
Cuando realicemos la interpolación correctamente observaremos un aspecto como este en
la línea de tiempo, en el que los fotogramas aparecen de color azul.
Esto indica que la animación cambiará la posición del símbolo del fotograma 1 hasta la
posición del mismo símbolo en el fotograma 24, utilizando precisamente 24 fotogramas. El
número de fotogramas que se usen en la interpolación indicará las subetapas de que constará
la animación. Cuantas más subetapas más sensación de "continuidad" (menos saltos
bruscos) pero a la vez menos velocidad en el movimiento.
Podemos seleccionar cualquier fotograma y ver dónde se sitúa el clip en cada punto. De
hecho, si en alguno de estos fotogramas lo cambiamos, se creará un fotograma clave de
propiedad, mostrándose como un diamante en la línea de tiempo.
La velocidad en el movimiento de las películas la podemos cambiar también modificando su
parámetro en la línea de tiempo,
pero esto no cambiará lo que hemos
comentado anteriormente respecto al número de fotogramas.
La velocidad está expresada en Fotogramas Por Segundo (fps) y se puede modificar
haciendo doble clic en el lugar que hemos indicado de la línea de tiempo. A mayor valor más
velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la
animación como queremos.
El trazado recto generado por defecto podemos modificarlo directamente haciendo clic y
arrastrándolo, una vez seleccionada previamente la herramienta Selección .
En cualquier fotograma de la interpolación podemos cambiar la posición del símbolo (o
cualquier otra propiedad), creando ahí un fotograma clave de propiedad, que se representa
por un pequeño rombo en la línea de tiempo.
La interpolación de movimiento permite modificar muchos parámetros del movimiento
mediante el Editor de movimientoque veremos a continuación.
Para practicar con las interpolaciones, realiza el ejercicio paso a paso Crear interpolaciones
de movimiento.
Unidad 12. Ejercicio: Crear interpolaciones de movimiento
Objetivo
Crear un movimiento multidireccional encadenando interpolaciones de movimiento.
Ejercicio paso a paso
1. Abre un nuevo archivo ActionScript 3 y dibuja un óvalo (o lo que más te agrade) en el
fotograma 1.
2. Selecciónalo y conviértelo en un Clip de Película pulsando F8.
3. Situamos el Clip en el lado izquierdo del escenario.
4. Hacemos clic con el botón derecho sobre el único fotograma existente en este
momento.
5. Seleccionamos la opción Crear Interpolación de movimiento.
6. Vamos al fotograma número 30 y pulsamos F6 para crear un fotograma clave.
Observaremos que se crea la Animación de 30 fotogramas de duración. En ese mismo
fotograma (el 30).
7. Desplazamos
el
símbolo
al
extremo
derecho
del
escenario.
Ahora ya tenemos la interpolación base, en ella hemos marcado únicamente la posición
inicial y final del movimiento. Si lo dejáramos así, el clip seguiría una línea recta, como
muestra
la
línea
Vamos a hacer que llegue a su origen haciendo zigzag:
guía.
8. Hacemos clic del ratón sobre el fotograma 10.
9. Desplacemos nuestro clip hacia arriba.
10. Hacemos clic sobre el fotograma 20.
11. Desplacemos
nuestro
clip
hacia
abajo.
Observa que ahora, en la línea de tiempo, aparecen rombos en los fotogramas que
hemos cambiado la posición. Además, la trayectoria ahora es en zigzag
12. Ahora, crearemos trayectorias curvas. Sobre el escenario, haz clic y arrastra la guía
punteada para crear curvas.
13. Como podemos comprobar, el clip se desplaza ahora en siguiendo trayectorias curvas
pero pasando por las posiciones clave indicadas.
Unidad 12. Animaciones de movimiento (II)
12.3. El editor de movimiento
Existe un panel que nos permite personalizar mucho más la animación, llamado Editor de
movimiento. Para acceder a él basta tener seleccionada una interpolación de movimiento
y hacer clic en la pestaña Editor de movimiento que aparece junto a la línea de tiempo.
Como cualquier panel, también es accesible desde el menú Ventanas.
Este panel nos permite controlar multitud de propiedades y efectos que afectan a una
animación con total precisión, fotograma a fotograma.
Este es el aspecto del panel:
Podemos ver, a la izquierda una columna con las propiedades que podemos modificar,
divididas en Movimiento básico, Transformación, Efectos de Color, Filtros y Suavizados.
Junto a estas propiedades, aparece una columna con los valores que toma esa propiedad
en el momento seleccionado de la línea de tiempo.
En la siguiente columna podemos establecer si el valor se aplica con aceleración o no.
En la columna Fotogramas, podemos recorrer o eliminar los distintos fotogramas clave.
También los controles - y + que nos permiten añadir efectos.
Y a la derecha del todo encontramos la gráfica. Podemos ver que cada propiedad tiene una
gráfica específica, que indica los fotogramas en horizontal y los valores de la propiedad en
vertical. Si hacemos clic sobre una propiedad, veremos que su gráfica se expande para
editarla con facilidad. En la gráfica encontramos los fotogramas clave marcados como un
cuadrado negro, o verde cuando está seleccionado. Estirando de ellos, o de la línea de la
gráfica podemos alterar los valores.
En la gráfica, vemos que los puntos suelen formar un vértice. Una opción muy interesante
es poder transformarlos en puntos suavizados (desde el menú contextual del fotograma),
creando una curva Bézier, lo que formará transiciones más suaves entre los picos de valor.
Esto no es aplicable a las propiedades X,Y, Z.
A lo largo de los siguientes temas veremos cómo utilizarlo de forma concreta, ahora vamos
a ver en un videotutorial, cómo podemos utilizar el editor de movimiento para realizar la
animación del bote de la pelota del tema 2, utilizando una interpolación de movimiento, en
lugar de una interpolación clásica como se hizo en ese tema.
Aquí puedes ver cómo utilizar el editor de movimiento
Unidad 12. Animaciones de movimiento (III)
12.4. Interpolación clásica
En versiones más viejas de Flash sólo había una interpolación de movimiento disponible, y
se llamaba precisamente así, interpolación de movimiento, en la versión Flash CS4 esa
interpolación de movimiento pasó a llamarse interpolación clásica.
Una interpolación clásica, igual que una interpolación de movimiento, es el desplazamiento
de un símbolo de uno a otro punto del escenario, muchos de los conceptos vistos en las
interpolaciones de movimiento son los mismos para las interpolaciones clásicas. Por ejemplo,
las animaciones también han de ser sobre símbolos y deben estar en una capa. Los
Fotogramas Por Segundo (fps) tienen el mismo significado.
Para crear una interpolación clásica hay que hacer clic derecho sobre el fotograma que
contiene los elementos y elegir Crear interpolación clásica.
Cuando realicemos la interpolación correctamente observaremos un aspecto como este en
la línea de tiempo, con los fotogramas sobre fondo de color morado.
Vemos que la animación va desde el fotograma 1 hasta el fotograma 30. Aparece una
flecha que no aparece en la interpolación de movimiento y el icono que hay a la derecha del
nombre de la capa es distinto.
Por supuesto, al realizar una interpolación clásica el fotograma inicial y final deberán ser
diferentes, en caso contrario no se creará ningún tipo de animación.
Observa en las siguientes imágenes dónde está situada la pelota en el primer fotograma de
la animación y su posición final en el último fotograma:
Aquí puedes ver cómo realizar una interpolación clásica
Si el objeto con el que queremos hacer la interpolación clásica no está convertido a símbolo
nos encontraremos con algo así...
... y la animación no funcionará.
También podemos realizar la interpolación de otra forma, sin convertir previamente el
objeto a símbolo, ya que Flash lo convierte a símbolo automáticamente si no lo hacemos,
dándole el nombre "Animar" más un número. Esto quizá no sea lo más conveniente en
películas grandes, debido a lo que ya comentamos de la gran cantidad de símbolos que
pueden aparecer y la confusión que crean muchos símbolos con nombres parecidos.
Para crear una interpolación de este tipo, basta con tener un fotograma clave. Hacemos
clic con el botón derecho sobre el fotograma en la línea de tiempo, y seleccionamos Crear
Interpolación Clásica. Ahora, creamos un nuevo fotograma clave donde queremos que
finalice la interpolación, y modificamos los símbolos en los fotogramas clave.
Veremos que si seleccionamos uno intermedio, se muestran los símbolos en su transición
al fotograma final. Podemos decidir cómo mostrar el símbolo en ese fotograma, por ejemplo
moviéndolo. Al hacerlo automáticamente se crea un fotograma clave. Esto hace que el
movimiento ya no sea recto, y pueda ser en zig-zag.
Si hacemos esto varias veces sobre varios fotogramas obtendremos varias trayectorias
consecutivas más.
Pero recuerda, que para la mayoría de casos, nos resultará más versátil la interpolación de
movimiento.
Unidad 12. Animaciones de movimiento (IV)
12.5. Diferencias entre interpolación de movimiento e interpolación clásica
En general las interpolaciones de movimiento son más fáciles de utilizar y más potentes, no
obstante las interpolaciones clásicas tienen características que pueden hacerlas más
interesantes para determinados usuarios.
Estas son algunas de las diferencias entre los dos tipos de interpolaciones:
- Las interpolaciones de movimiento incluyen el trazado del movimiento, mientras que en
una animación clásica no existe el trazado, a menos que lo creemos expresamente.
- Sólo se permiten realizar interpolaciones con símbolos, si aplicamos una interpolación de
movimiento a un objeto que no es un símbolo, Flash lo convertirá en un clip de película,
mientras que si se trata de una interpolación clásica lo convertirá en un símbolo gráfico.
- En las interpolaciones clásicas cuando cambia una propiedad se crea un fotograma clave
y cambia la instancia del objeto, mientras que en las interpolaciones de movimiento sólo hay
una instancia de objeto y al cambiar una propiedad se crea un fotograma clave de propiedad.
- La interpolaciones de movimiento pueden trabajar con texto sin tener que convertirlo en
símbolo, como ocurre en las clásicas.
- En un grupo de interpolación de movimiento no está permitido usar scripts de fotograma,
mientras que sí es posible en las clásicas.
- Los grupos de interpolaciones de movimiento se pueden cambiar de tamaño en la línea de
tiempo. Se tratan como un objeto único. Las interpolaciones clásicas están formadas por
grupos
de
fotogramas
que
se
pueden
seleccionar de forma independiente.
- Las interpolaciones de movimiento sólo pueden aplicar un efecto de color por
interpolación, mientras que las clásicas pueden aplicar más de uno.
- Los objetos 3D sólo pueden animarse en interpolaciones de movimiento, no en clásicas.
- Sólo las interpolaciones de movimiento se pueden guardar como configuraciones
predefinidas de movimiento.
12.6. Cambio de forma en una interpolación
Acabamos de ver las interpolaciones de movimiento y las interpolaciones clásicas como un
mecanismo para desplazar un símbolo Flash de un lado a otro del escenario. Sin embargo,
podemos aprovechar una interpolación para realizar animaciones en las que nuestro objeto
aumente o disminuya de manera progresiva su tamaño.
Esto es muy sencillo con Flash, basta con modificar la instancia del símbolo en el último
fotograma de la interpolación de movimiento o de la interpolación clásica, pero esta vez
cambiándole el tamaño. Podemos utilizar la herramienta Transformación libre para cambiar
el tamaño.
Por supuesto, podemos aplicar ambos efectos a la vez, de manera que el cambio de
tamaño se producirá mientras el objeto se desplaza. También podemos hacer el cambio de
tamaño en varias fases o secuencias encadenadas como en las interpolaciones de
movimiento comunes.
Otra forma es emplear el Editor de movimiento. Veremos los cambios de tamaño en la
sección de Transformación, separados en Escala X (ancho) y Escala Y (alto).
El ejemplo siguiente incorpora estas tres características de la interpolación:
Y la línea de tiempo que nos queda es algo tan sencillo como esto:
Aquí puedes ver cómo simulamos el bote de una pelota empleando el Editor de movimiento
12.7. Animación de textos
Es indudable que para comunicar algún mensaje, en la mayoría de las ocasiones, no basta
con imágenes o iconos, y es aquí donde el texto cobra gran importancia. No obstante, se debe
tener cuidado con la animación de los textos, ya que resulta bastante complicado leer un texto
que se desplaza o cambia de tamaño.
Por este motivo, un texto animado debería estar sólo en las presentaciones o bien formar
parte de una animación corta y, lo que es más importante no debería estar reproduciéndose
infinitamente.
En las presentaciones, se utilizan multitud de efectos que veremos más adelante. Sin
embargo, con lo visto hasta ahora se pueden obtener efectos interesantes. Una de las
opciones más utilizadas es separar las letras de los textos y animarlas independientemente
Aquí tienes un ejemplo de una presentación sencilla mediante texto utilizando esta técnica.
Si no tienes claro cómo realizar una animación te recomendamos que realices el
Ejercicio Animar texto por bloques
Unidad 12. Ejercicio: Animar texto por bloques
Objetivo.
Crear una animación sobre un texto separándolo en bloques de letras cuyo movimiento
será tratado de manera independiente, dando al texto un efecto vistoso que pudiera servir
como presentación de entrada a una web u otro tipo de película.
Ejercicio paso a paso.
Vamos a basarnos en el ejemplo que acabamos de ver, para tener claro nuestro objetivo.
Luego podremos extrapolarlo a cualquier otro texto. Veamos cómo conseguir esos efectos
combinando las técnicas vistas hasta el momento.
1. Escribimos el texto en cuestión, en nuestro caso "aulaClic".
2. Seleccionamos el texto recién escrito.
3. Abrimos el panel Propiedades (con el texto seleccionado) y seleccionamos el tipo de
letra. Nosotros hemos elegido "Papyrus", pero cualquiera es válida.
4. Accedemos al menú Modificar → Separar. Con esto separamos cada letra ya que de
no hacerlo Flash trataría todo el texto como un bloque y no podríamos dar el efecto a las
letras.
Vamos a separar el texto en los siguientes bloques: "a", "u", "la" y "Clic". Podríamos cambiar
los bloques si quisiéramos dar otro efecto en concreto.
5. Seleccionamos dichos bloques y los convertimos a símbolos, dándoles un nombre
identificativo y el Tipo Gráfico, ya que no los animaremos "internamente".
6. Creamos 5 nuevas capas, una por cada bloque que hemos creado.
Esto último es necesario ya que si no lo hiciéramos Flash aplicaría el movimiento a todo
aquello que encontrara en dicha capa, ya que como hemos comentado anteriormente, lo
convertiría todo a símbolo automáticamente.
7. Nombramos cada una de las capas según el bloque de texto que vaya a contener, pero
en orden inverso en el que vaya a producirse la animación, para que el objeto en
movimiento se superponga a los que no lo están. Esto es, la capa de más arriba se
llamará "Clic", la siguiente "la" y así sucesivamente.
8. Hacemos clic con el botón derecho sobre el único fotograma con elementos que
tenemos en la línea de tiempo y en el menú emergente seleccionamos Copiar
Fotogramas. A continuación vamos pegando los fotogramas (botón derecho → Pegar
Fotogramas) en todas las capas.
9. Seleccionamos cada capa y vamos borrando las partes del texto que no corresponden
con la parte del texto que debe contener. Es recomendable bloquear el resto de capas
cuando se haga esto para asegurarnos de que borramos las letras de esa capa (hay que
tener en cuenta que al principio todas las capas contienen lo mismo y superpuesto).
10. Situamos (arrastrando) el fotograma de cada capa a los siguientes frames:
1. "A" : Fotograma 1.
2. "U" : Fotograma 6.
3. "LA" : Fotograma 12.
4. "Clic" : Fotograma 18.
11. Seleccionamos el fotograma que ocupa cinco posiciones después del fotograma de
cada capa y pulsamos F6 cada vez. En la capa "Clic" selecciona el fotograma 30 y pulsa
también F6.
12. Hacemos clic con el botón derecho en los fotogramas centrales que hay entre los
fotogramas clave y seleccionamos cada vez Crear Interpolación Clásica.
13. Extendemos la imagen los últimos fotogramas de cada capa hasta que ocupen el
fotograma 30 (Botón derecho → Insertar Fotograma Clave).
14. Exceptuando la capa "Clic" seleccionamos el primer fotograma de cada interpolación
y aumentamos el tamaño del bloque que contiene.
15. Movemos ahora fuera del escenario el bloque "Clic".
16. Aún en esta capa, hacemos clic con el botón derecho sobre el fotograma 24 y
seleccionamos Insertar Fotograma Clave.
17. En este fotograma recién creado reducimos el ancho del bloque de texto y lo
colocamos junto a la última "a".
Y ya tenemos la animación creada. Como vemos hemos utilizado todo tipo de técnicas de
interpolación, aunque todavía puede complicarse más como veremos más adelante
Unidad 12. Animaciones de movimiento (V)
12.8. Animación de líneas
Una buena animación no tiene que porqué estar compuesta sólo por textos o imágenes
espectaculares. En ocasiones conviene darle a la película un aire más sencillo o añadir
determinados efectos que la hagan vistosa sin necesidad de cargar mucho la película
visualmente, y en cuanto a tamaño de archivo se refiere.
Esto lo podemos conseguir simplemente animando líneas y haciendo que se muevan por el
escenario. Esta técnica nos permite dar dinamismo a la animación o crear formas distintas a lo
largo de su recorrido.
Son especialmente útiles y vistosas en fondos oscuros y se suelen usar para formar
rectángulos que se aprovechan para insertar imágenes.
Aquí
podemos
ver
un
ejemplo
de
este
tipo
de
presentaciones:
Para crear esta animación deberás crear tantas capas como animaciones de líneas vayas a
crear, en el ejemplo hemos creado 4 capas. Una para el movimiento de líneas de abajo a
arriba, otra para el movimiento de arriba a abajo, otra para izquierda a derecha y finalmente
una última para el movimiento de derecha a izquierda.
También crearemos una capa que situaremos en la posición superior donde colocaremos
las imágenes que formarán el mensaje de bienvenida.
El funcionamiento de la animación es claro, deberemos crear interpolaciones de
movimiento para cada una de las capas de líneas que en su posición final emplazaremos en
su lado contrario de la pantalla, por ejemplo, las líneas situadas en un principio en la parte
inferior al final de la animación se encontrarán en la parte superior. Realizaremos esto con las
4 capas de líneas.
En la capa Imágenes crearemos animaciones que harán aparecer las imágenes que
forman el mensaje de bienvenida de forma secuencial, es decir, del fotograma 5 al 10 se
mostrará una imagen, del 11 al 16 otra y la última la mostraremos del fotograma 17 al 22. De
esta forma, habiendo creado los fotogramas claves en cada uno de los fotogramas de inicio
(5, 11 y 17), arrastraremos desde la Biblioteca (menú Ventana → Biblioteca) las imágenes
para colocarlas en su lugar en el fotograma. Estas imágenes se mostrarán únicamente
durante el tiempo que dure el fotograma para desaparecer más tarde dando paso a la otra
imagen.
Consejo: Si quieres añadir un fondo deberás hacerlo en una nueva capa y colocar ésta
debajo de todas las existentes.
Aquí mostramos la forma de crear una animación de este tipo.
Unidad 12. Animaciones de movimiento (VI)
12.9. Guía de movimiento clásica
Anteriormente hemos visto como las interpolaciones de movimiento incluyen por defecto el
trazado con la trayectoria del objeto, y que este trazado puede modificarse fácilmente, sin
embargo las interpolaciones clásicas no lo incluyen. Si deseamos que el objeto siga una
trayectoria no rectilínea en una interpolación clásica hemos de crear una capa guía de
movimiento.
Una guía es una capa especial que marca una trayectoria para los símbolos de la
capa a la que afecta, para que dichos símbolos la sigan, durante el movimiento. Esta capa es
invisible durante la reproducción y permite dibujar cualquier tipo de dibujo vectorial, que nos
permitirá crear un movimiento no forzosamente rectilíneo.
Crear un movimiento mediante esta técnica es bastante sencillo. Partimos de una capa con
una interpolación clásica:
Sobre la capa en la línea de tiempo, hacemos clic derecho y seleccionamos Añadir guía
de movimiento clásica.
Creamos el trazado de la guía en la nueva capa, por ejemplo dibujando con el Lápiz.
Y para acabar, hacemos coincidir el fotograma final de la interpolación con el final del
trazado de la guía. Es importante que el símbolo esté en contacto con la guía. No es
necesario colocarlos al principio del trazado ya que Flash lo hace automáticamente.
Vemos como la capa a la que se asocia la guía aparece debajo y sangrado a la derecha.
Aquí se puede ver cómo realizarlo.
Podemos ver un efecto más vistoso que el que realizamos con la interpolación sencilla del
principio del tema.
Una opción que puede resultar muy interesante es Orientar según el trazado, la cual
encontramos en el panel de Propiedades. Esta opción hará que el símbolo vaya girando para
seguir la línea del trazado, lo que en la animación anterior habría puesto el avión boca abajo
al hacer el "loop".
Tanto si el trazado es de una interpolación de movimiento, como si es de una
interpolación clásica, podemos modificarlo de varias formas:
- Seleccionando la herramienta Selección y haciendo clic sobre el trazado y arrastrándolo.
- Seleccionando la herramienta Subselección y haciendo clic en el trazado, aparecerán los
controladores de curva, moviéndolos modificaremos el trazado.
- Seleccionando la herramienta Transformación libre y haciendo clic en el trazado,
aparecerán los controladores de transformación libre, moviéndolos modificaremos el trazado.
Si se trata de un trazado de una interpolación de movimiento, adicionalmente disponemos
de otros métodos para modificar el trazado:
- Moviendo la posición del objeto en el escenario, esto hace que se cree automáticamente
un fotograma clave de propiedad y se modifique el trazado. Esta es, quizás, la forma más fácil
de modificar un trazado.
- Utilizar el editor de movimiento para modificar los valores de X, Y, Z.
Si estamos modificando el trazado de una interpolación clásica, debemos tener cierto
cuidado con no producir discontinuidades en el trazado, ya que esto haría que la animación se
detuviera en ese punto. En general es más fácil y flexible utilizar los trazados con las
interpolaciones de movimiento que con las interpolaciones clásicas.
Muchos movimientos complicados pueden ser duplicados fácilmente sobre otros objetos
utilizando ActionScript 3, puedes ver cómo realizarlo en este videotutorial:
Podéis poner a prueba vuestros conocimientos realizando:
Ayuda ejercicios unidad 12: Animaciones de movimiento
Ejercicio 1: Máscara en Movimiento
1. Abre un nuevo archivo ActionScript 3 desde el menú Archivo → Nuevo.
2. Crea una nueva capa haciendo clic en el botón
.
3. Selecciona la capa superior y haz doble clic sobre su símbolo
.
4. Llámala Máscara y selecciona el tipo Máscara.
5. Selecciona la capa inferior y haz doble clic sobre su símbolo
.
6. Llámala Texto y selecciona el tipo Con máscara.
7. En la capa Texto escribe aulaClic.
8. Selecciona el fotograma 1 de la capa Máscara, dibuja un circulo en él.
9. Selecciona el círculo y transfórmalo en un Clip de película pulsando la tecla F8.
10. Selecciona el símbolo que acabamos de crear y muévelo a la izquierda del texto sin
taparlo (da igual si sale de la Escena).
11. Haz clic derecho sobre el fotograma de la capa Máscara y selecciona Crear
interpolación de movimiento en el menú contextual.
12. Selecciona el fotograma 40 de la capa Máscara y crea un nuevo fotograma clave de
propiedad, pulsando la tecla F6.
13. Sitúate en el fotograma 20 de la capa Máscara.
14. Selecciona el clip del círculo, y con la tecla Shift pulsada, para desplazarlo en
horizontal, muévelo hasta la derecha del texto (sin taparlo).
15. Selecciona el fotograma 40 de la capa Texto y crea un nuevo fotograma pulsando la
tecla F5.
16. Prueba la película pulsando la combinación de teclas CTRL + INTRO.
Prueba evaluativa unidad 12
1. Flash CS5 es capaz de realizar animaciones con texto de modo fácil y eficiente.
a) Verdadero
b) Falso
2. Las Guías de movimiento provocan que todos los objetos de su mismo fotograma
realicen el movimiento que ésta indica, independientemente de la relación que exista entre
las capas.
a) Verdadero
b) Falso
3. Una capa Guía es la mejor solución para realizar un movimiento en línea recta.
a) Verdadero
b) Falso
4. Una capa Guía es la mejor solución para realizar un movimiento enrevesado con
numerosos cambios de dirección.
a) Verdadero
b) Falso
5. ¿Cuál de estas 3 afirmaciones es correcta?.
a) Para que las animaciones se realicen correctamente, los objetos que participen en
ella deberán convertirse previamente en símbolos.
b) Dada la gran potencia de Flash CS5 para crear animaciones, debemos explotar esta
cualidad al máximo y poner animaciones en todas las páginas webs que creemos.
c) Las animaciones fotograma a fotograma son tan eficientes en cuanto a espacio y
rapidez de ejecución como las animaciones creadas con las utilidades de Flash
(interpolaciones).
6. Flash necesita disponer de tantos fotogramas clave como duración tenga la animación de
movimiento.
a) Verdadero
b) Falso
7. Crear animaciones fotograma a fotograma ocupa menos espacio en el archivo final que
hacer una interpolación de movimiento.
a) Verdadero
b) Falso
8. En las animaciones guiadas es necesario que el objeto este SIEMPRE en contacto con la
línea de guía en los fotogramas inicial y final.
a) Verdadero
b) Falso
9. Todos los objetos presentes en una misma capa y un mismo fotograma formarán parte de
las animaciones que afecten a dicho fotograma.
a) Verdadero
b) Falso
10. Las interpolaciones de movimiento permiten aplicar otros efectos además del propio
movimiento, tales como cambios en los tamaños, colores etc...
a) Verdadero
b) Falso
Unidad 13. Animación por Forma (I)
13.1. Interpolación por forma
Cuando lo que queramos no sea cambiar la posición de un objeto en el escenario, sino su
forma de manera progresiva (o ambas cosas a la vez), Flash CS5 nos ofrece la técnica de la
Interpolación por Forma, que consiste simplemente en ir transformando el contorno de un
objeto creado en su interfaz hasta que sea igual que el contorno de otro objeto distinto.
Realizar una interpolación por forma, es muy semejante a crear una interpolación de
movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la forma
del fotograma anterior. Así como hacíamos en el tema anterior, sólo necesitamos dos
fotogramas clave. Colocaremos en el primer fotograma el objeto con su aspecto original, y en
el último la apariencia final que queremos que tenga.
Esta vez, es importante destacar que para que una Interpolación por Forma funcione
como es debido aquellos objetos que intervengan deberán ser objetos vectoriales (no
símbolos Flash).
Debemos tener también dos aspectos en cuenta:
1) Separar en distintas capas los objetos fijos y los que estarán animados.
2) Poner en distintas capas objetos que vayan a ser transformados con formas distintas, ya
que Flash transformará todos los objetos vectoriales del primer fotograma en aquello que haya
en el último fotograma de la interpolación.
Si realizamos la interpolación por forma correctamente la línea de tiempo tendrá este
aspecto:
Las consideraciones sobre la velocidad y el número de fotogramas que vimos en las
interpolaciones de movimiento se pueden aplicar también a la interpolación por forma y a
cualquier animación hecha con Flash.
Si hay algún fallo en los parámetros necesarios para que la interpolación se ejecute bien,
como por ejemplo, que uno de los objetos en capa sea un símbolo, se mostrará algo así en la
línea de tiempo:
Para crear la interpolación, una vez tengamos los fotogramas de inicio y fin de la
animación hacemos clic derecho en alguno de los fotogramas intermedios, y seleccionamos la
opción del menú Crear interpolación de forma.
Recuerda que podemos alterar el fotograma final todo lo que queramos.
Podemos observar cómo realizar una interpolación por forma pulsando aquí.
A
continuación
podemos
ver
el
ejemplo
de
interpolción
de
forma
sencilla.
También podemos realizar interpolaciones de forma en varias fases de manera análoga a
como lo hacíamos en el tema anterior. De esta forma podemos hacer que un determinado
objeto de convierta en otro antes de adoptar su forma definitiva.
En el siguiente ejemplo podemos ver el ejemplo anterior pero haciendo que se transforme
previamente en un triángulo antes de pasar a ser cuadrado.
Lo hemos conseguido simplemente haciendo clic con el botón derecho sobre el
fotograma 10 y creando un fotograma clave (Insertar Fotograma Clave). Luego sólo tenemos
que borrar el objeto que aparece en el escenario y dibujar el triángulo.
Unidad 13. Animación por Forma (II)
13.2. Transformar textos
Debido a la importancia de los textos, es importante comentar las aplicaciones que tienen
los cambios de forma sobre ellos. Añadimos así una posibilidad más para realizar logotipos o
presentaciones vistosas y transmitir información de manera espectacular.
Recordemos que para realizar una interpolación de forma es necesario que el objeto sea de
tipo vectorial. Este no es el caso de los textos, que se basan en fuentes y son creados en
función de los valores de la tabla ASCII y un tipo de letra asociado. Para solucionar este
problema, deberemos transformar el texto previamente en un objeto vectorial, es decir, como
si hubiéramos repasado con la herramienta lápiz el contorno de cada letra.
¿Posibilidades de esta técnica en textos? Muchísimas, aunque puede llevar a confusiones si
no se hace adecuadamente. Por ejemplo debemos asegurarnos de dar suficientes fotogramas
de margen para que se note la transición. También es conveniente dar un tiempo para que
cada letra sea mostrada y pueda ser visualizada y "entendida" por aquel que vea la película,
porque si no lo hacemos corremos el riesgo de que la animación parezca sólo un garabato
revolviéndose.
Una de las posibilidades es "deletrear" una palabra de manera tan vistosa como vemos
arriba. Podemos comprobar como simplemente cambiando el color del objeto final, se produce
una transición también en el color. Observemos a su vez como cuando se forma cada letra,
mantenemos su imagen el tiempo suficiente como habíamos indicado que era necesario.
En este otro ejemplo se observa la transición de colores más claramente y, además,
observamos transiciones de forma a texto.
Cuando creemos interpolaciones de forma y queramos incluir textos deberemos actuar de
un modo especial dado que un objeto de texto no se considera como una forma. Para ello, y
una vez tengamos la animación creada con una forma en el fotograma inicial y un texto en el
final veremos que la interpolación aparece como incorrecta. Deberemos, entonces seleccionar
el fotograma donde se encuentre el texto y seleccionarlo.
Haremos clic en el menú Modificar → Separar para convertir el texto en un conjunto de
puntos que creen una forma. Y la interpolación ya estará lista.
Consejo: Cuando vayas a aplicar el comando Separar sobre una palabra completa
observa que primero lo que hace es separar la palabra en letras individuales. Deberás
ejecutar de nuevo el comando para que estas letras se separen y creen una forma.
Aquí mostramos cómo realizar una animación de este tipo.
Unidad 13. Animación por Forma (III)
13.3. Consejos de forma
Como ocurría en el tema anterior, a veces no nos viene bien el tipo de acción que hace
Flash por defecto. En las interpolaciones de movimiento lo solucionábamos mediante la guía
de movimiento.
En el caso de la interpolación por forma, es posible que Flash realice la transformación de
los objetos de una forma que no es la que esperábamos y que no nos conviene para llevar a
cabo nuestro propósito.
Pues bien, para estos casos Flash nos ofrece una herramienta para solucionarlo: los
consejos de forma.
Los consejos de forma son marcas que indican a Flash qué puntos de la imagen inicial son
los que deben corresponderse con otros tantos puntos en la figura final. Al indicar esto,
estamos controlando las formas intermedias que se generarán.
Para añadir un consejo de forma a una interpolación nos situaremos en el fotograma inicial
y pulsaremos Control + Shift + H (o bien ir al menú Modificar → Forma → Añadir
Consejo de Forma).
Aparecerá un círculo de color con una letra dentro en el centro de la figura. Su color será
rojo mientras no sea colocado en el contorno del objeto (los extremos, si es que no hay
contorno), que es donde tiene efecto. Cuando están colocados sobre una curva (vector) que
forma un contorno son amarillos para el objeto inicial y verdes para el final.
Dicho círculo debemos colocarlo en un punto del contorno de la figura inicial.
Automáticamente aparecerá un punto con la misma letra dentro en la figura final (este punto
será el que se deba corresponder con el punto del objeto de origen) y deberemos colocarlo en
el punto que deseemos del contorno.
El primer consejo de forma está marcado con la letra "a". Si creamos más de uno serán
marcados con las letras "b", "c", "d" ... hasta la z, que es el límite (26 como máximo).
Visita el siguiente videotutorial para comprender mejor qué es un consejo o pista de forma y
ver un ejemplo de la creación y usos de los consejos de forma.
Ejercicios unidad 13: Animación por Forma
Ejercicio 1: Babosa arrastrándose
1. Abre un documento nuevo
2. En el primer fotograma dibuja una especie de babosa como la de la abajo.
1. Haz que cambie de forma y vaya de un lado a otro del escenario, dando la sensación de
que está reptando.
2. Guárdalo como babosa.fla.
Ejercicio 2: Cambio de Forma y Tamaño
1. Abre el archivo babosa.fla.
2. Cambia el movimiento de forma para que a mitad del trayecto de la impresión de que se
está acercando a nosotros.
3. Cambia el color de la babosa cuando está más cerca de nosotros.
Nota: Utilizaremos este archivo en la siguiente unidad.
Ejercicio 3: Cambiar la Forma de un Texto
1. Escribe en distintas capas las letras de tu nombre.
2. Crea una animación de forma que pase de una letra a la siguiente.
3. Cambia los colores y el tamaño de cada letra.
Ayuda ejercicios unidad 13: Animación por Forma
Ejercicio 1: Babosa arrastrándose
1. Crea un nuevo Archivo de Flash ActionScript 3 desde el menú Archivo → Nuevo.
2. Utiliza la Herramienta Lápiz para crear la forma de la babosa.
3. Pulsa con el botón derecho sobre el primer fotograma y elige la opción Crear
Interpolación de Forma.
4. Ve ahora al fotograma 20 y pulsa F6. En ese mismo fotograma, arrastra la babosa al otro
lado del escenario y mediante la Herramienta de Subselección modifica su forma.
5. Guárdalo con Archivo → Guardar Como y llámalo babosa.fla.
Ejercicio 2: Cambio de Forma y Tamaño
1. Si lo has cerrado, abre el archivo con Archivo → Abrir.
2. Selecciona el fotograma 10. Mueve el objeto hasta la parte inferior del escenario y
aumenta su tamaño. La parte inferior siempre da sensación de proximidad.
3. Selecciona la Herramienta Cubo de Pintura, elige un nuevo color y pincha sobre el
relleno anterior.
Ejercicio 3: Cambiar la Forma de un Texto
1. Crea mediante F6 un fotograma clave en el introduce en el centro del escenario una letra
de tu nombre.
2. Selecciona la letra creada y activa la opción Modificar → Separar.
3. Pulsa con el botón derecho sobre el primer fotograma y elige la opción Crear
Interpolación de Forma.
4. Ve cinco fotogramas en adelante y pulsa F6. Borra la letra y escribe la siguiente.
5. Repite los pasos hasta que hayas escrito todas las letras.
6. Cambia los colores utilizando el Cubo de Pintura y la herramienta Transformación
libre para cambiar la forma.
Prueba evaluativa de la unidad 13
1. Para crear una Interpolación por Forma sólo necesitamos dos fotogramas clave.
a) Verdadero
b) Falso
2. No se puede aplicar una interpolación de forma a un texto.
a) Verdadero
b) Falso
3. La forma de aplicar el cambio de forma la decide siempre Flash.
a) Verdadero
b) Falso
4. Se pueden crear infinitos consejos de Forma.
a) Verdadero
b) Falso
5. Un objeto sin perfil no se puede Interpolar para cambiar su forma.
a) Verdadero
b) Falso
6. Para realizar una Interpolación por Forma. ¿Debemos convertir el objeto a Símbolo?
a) Sí, porque una Interpolación de Forma es como una Interpolación de Movimiento.
b) No, porque sólo se puede hacer con símbolos de tipo Clip.
c) No, porque un símbolo no se puede modificar internamente, y la Interpolación de
Forma requiere modificar el perfil del objeto.
7. Es necesario convertir un texto en forma para poder hacer una animación de forma sobre
él.
a) Verdadero
b) Falso
8. Es posible añadir consejos de forma en otro sitio que no sea ni borde ni vértice.
a) Verdadero
b) Falso
9. Un objeto con el perfil transparente se puede interpolar con normalidad para cambiar su
forma.
a) Verdadero
b) Falso
10. Las pistas de forma nos permiten decidir cómo se realizará el cambio de forma.
a) Verdadero
b) Falso
Unidad 14. Efectos sobre animaciones (I)
14.1. Introducción
Si no te parecen suficientes las interpolaciones de forma y de movimiento, y quieres realizar
animaciones más complejas, puedes combinar las interpolaciones de movimiento con los
efectos y transformaciones que se pueden realizar sobre los símbolos que las componen y
aplicar efectos sobre las mismas interpolaciones.
Una vez comprendidas todas las técnicas de este tema, estaremos en disposición de
realizar todo tipo de animaciones en Flash. Sólo tendremos que poner un poco de imaginación
porque, como hemos visto y veremos, el programa nos facilitará enormemente el trabajo.
Con el panel de Propiedades podemos controlar los efectos y filtros, pero también
podemos usar el Editor de movimiento para controlar gran parte de los efectos.
14.2. Efectos sobre la interpolación
Para describir todos los efectos que podemos aplicar sobre una interpolación de
movimiento previamente creada, sin necesidad de tocar ningún símbolo, nos centraremos en
el panel Propiedades. Si seleccionamos un fotograma y un objeto perteneciente a una
interpolación, y abrimos el panel Propiedades, desde el botón de la parte superior derecha, o
bien desde el menú Ventana, Propiedades, encontraremos las distintas propiedades
aplicables a ese objeto en ese fotograma. Las propiedades variarán según el tipo de
interpolación, según puedes ver en las siguientes imágenes correspondientes a las
propiedades de la interpolación de movimiento, interpolación guiada e interpolación de forma:
En las interpolaciones de movimiento podemos darle un nombre de etiqueta, nos ayudará a
identificarla en la barra de tiempo. Aparecerá a lo largo de todos los fotogramas que la
componen.
Tamaño: La propiedad tamaño se representa por los valores AN (anchura) y AL (altura)
y para modificarla basta colocar el cursor sobre el valor y aparecerá un deslizador que
podemos mover a izquierda o derecha, también podemos hacer clic sobre el valor y teclear el
nuevo valor.
Desde el Editor de movimiento también podemos modificar el tamaño de un objeto desde
las propiedades Escala X (anchura) y Escala Y (altura) que tienen valores en tanto por ciento.
Por último, con el uso de la herramienta Transformación libre también podemos variar las
dimensiones del objeto.
Escala: En las interpolaciones guiadas, esta casilla, al activarla, permite un
incremento/decremento progresivo del tamaño del objeto inicial cuando sus dimensiones son
distintas a las del objeto que está en la posición final de la animación. Si la casilla está
desactivada podríamos encontrarnos con una animación como la siguiente.
En las interpolaciones de movimiento, esta opción está activada por defecto.
Como vemos Flash hace el desplazamiento de posición, pero el cambio de tamaño se
produce bruscamente en el último fotograma.
Aceleración: Esta barra deslizante nos permite determinar la aceleración del primer
tramo de la animación. Podemos elegir valores entre -100 y 100. Si el valor de aceleración es
negativo el símbolo se moverá despacio primero e irá acelerando de manera progresiva. Si
dicho valor es positivo provocará un efecto opuesto.
Podemos por ejemplo dar la impresión de que un objeto, por ejemplo un coche, arranca, va
cogiendo velocidad poco a poco (valor -100) y después va frenando y disminuyendo su
velocidad hasta pararse.
Como ésta, existen muchas otras aplicaciones. Para comprenderlo mejor recomendamos
hacer el Ejercicio Acelerar movimiento.
4. La función push() introduce un elemento en una matriz en último puesto.
a) Verdadero
b) Falso
5. La propiedad filters de un objeto no puede editarse directamente.
a) Verdadero
b) Falso
6. La propiedad filters de un objeto contiene una matriz de filtros aplicados a dicho objeto.
a) Verdadero
b) Falso
7. Al aplicar o modificar un filtro éste no se redibujará directamente sobre el objeto.
a) Verdadero
b) Falso
8. Para poder modificar un filtro deberemos recordar su posición en la matriz de filtros.
a) Verdadero
b) Falso
9. La propiedad knockout de los filtros hace que el objeto desaparezca y reste su silueta al
filtro aplicado.
a) Verdadero
b) Falso
Unidad 21. Vídeo (I)
21.1. Introducción
Con Flash cada vez es más fácil añadir vídeos a nuestras presentaciones o webs. En
particular Flash CS5 incorpora una serie de características que facilitan la tarea al máximo y
permiten el uso de vídeos como si se tratase de cualquier otro objeto en pantalla.
A continuación explicaremos cómo hacerlo y cuáles son las mejores alternativas.
Utilizaremos el siguiente ejemplo para documentar algunos de los pasos que deberemos
realizar.
21.2. Importando vídeos
Lo primero que deberemos hacer es transformar nuestro vídeo de formato avi, mpeg, mov,
wmv o dv al formato que utiliza Flash: flv.
Este formato, además de crear archivos de vídeo de buena calidad muy comprimidos, te
permitirá introducir puntos de referencia desde donde controlaremos la interacción del
entorno de la película con el vídeo.
Haz clic en Archivo → Importar → Importar vídeo para empezar a configurar el archivo
.flv que crearemos.
Se abrirá una pantalla como ésta:
Aquí deberás seleccionar el archivo que quieres importar para utilizarlo en tu película. Haz
clic en el botón Examinar y búscalo en tus carpetas. Cuando lo hayas encontrado pulsa el
botón Aceptar y estarás listo para seguir pulsando el botón Siguiente.
También es posible marcar la opción Ya se ha implementado en un servidor Web, Flash
Vídeo Streaming Service o Flash Communication Server. En este caso deberás introducir
la URL del archivo, que previamente habrá sido preparado para poder utilizarlo en Flash.
La siguiente pantalla te permitirá seleccionar el aspecto del reproductor:
La siguiente pantalla te mostrara la información del video que vamos a exportar, donde se
importara, etc:
A partir de este punto, ya tenemos el vídeo incorporado en nuestro proyecto.
Unidad 21. Vídeo (II)
21.3. Puntos de referencia
El vídeo se puede mostrar como un flujo, simplemente reproducirlo y pararlo. Pero
podemos hacer más, podemos hacer que se pueda navegar a determinados momentos del
vídeo, o que se produzca un evento cuando alcance una posición determinada. Pero para
hacer todo esto, tenemos que trabajar con puntos de referencia.
Podemos ver Puntos de referencia desde el panel de Propiedades del componente de
vídeo:
Existen dos tipos de puntos de referencia diferentes: puntos de referencia codificados y
puntos de referencia de ActionScript.
Los puntos de referencia codificados se añaden al codificar el vídeo con Adobe Media
Encoder. Pueden ser de Navegación o de Evento.
Creando puntos de Navegación podremos referenciarnos más tarde a ellos para saltar
en la película. Sería algo así como crear capítulos sobre los que podremos navegar
utilizando botones y ActionScript.
El punto de Referencia de Evento nos permitirá crear interacciones con el resto de
objetos en la película. Estos puntos nos permitirán pasar parámetros que podremos
recuperar mediante ActionScript.
En la imagen anterior, vemos que hay 3 puntos de Navegación, a los cuales
acudiremos pulsando los botones para saltar entre los capítulos de la película. Luego
hemos añadido 4 puntos de Evento desde los que pasaremos un parámetro que hará
que se muestre determinado fotograma de un clip que se encontrará en el Escenario.
Realiza el siguiente ejercicio paso a paso para ver cómo Crear Puntos de Referencia
Codificados.
Los puntos de ActionScript, como su nombre indica, se codifican mediante
ActionScript. Por ello, podemos añadirlos directamente desde el panel de Propiedades. Para
hacerlo no tenemos más que desplazar el cabezal del vídeo hasta el momento en el que lo
queramos añadir, y pulsar el icono más + del panel.
Tanto los puntos de ActionScript como los codificados, pueden enviar parámetros, lo que
nos permite recibir información.
21.4. El componente FLVPlayback
El vídeo, no se reproduce directamente. Lo hace a través de un reproductor, un
componente del tipo FLVPlayback.
Otra forma de insertar un vídeo en el escenario, es creando primero este componente, e
indicándole el vídeo a reproducir. Podemos hacerlo a través del Panel Componentes,
accesible desde el menú desde Ventana → Componentes→ FLVPlayback.
Desde el inspector de Propiedades podemos configurarlo. Veamos sus opciones:
align: especifica el diseño del vídeo. Por ejemplo, lo podemos centrar con center.
autoPlay: puede tomar los valores true o false. Indican si el vídeo debe reproducirse
nada más abrir el archivo o esperar a una orden para empezar a reproducirse.
cuePoints: indica los puntos de referencia que están incluidos en la película. Una vez
importada la película a formato flv no pueden ser modificados los puntos codificados,
aunque sí los de ActionScript.
isLive: puede tomar los valores true o false. Este campo se utilizará para la transmisión
de vídeo en vivo y sólo podrá utilizarse a través de un servidor de Streaming.
preview: Permite obtener una previsualización desde una imagen png.
scaleMode: Indica si se altera la escala del vídeo: si muestra su tamaño original, si se
ajusta al tamaño de la escena, etc...
skin: desde aquí podemos modificar la apariencia de los controles de la película y
seleccionar uno entre los predefinidos.
skinAutoHide: puede tomar los valores true o false. Indicará si los controles se pueden
esconder para volver a aparecer cuando el cursor se sitúe sobre la película.
skinBackgroundAlpha establece
skinBackgroundColor su color.
la
transparencia
del
fondo
del
skin,
y
source es el archivo de vídeo que se mostrará en el reproductor.
volume: de 0 a 100. Indica el volumen máximo del vídeo.
A parte de las que se muestran en el panel, existen otras propiedades que pueden sernos
útiles:
autoRewind: puede tomar los valores true o false. Indica si el vídeo deberá volver a la
posición inicial después de haberse reproducido completamente, o tras hacer un stop.
autoSize: puede tomar los valores true o false. Indica si el control deberá ajustarse al
tamaño del vídeo, o por el contrario deberá ser el vídeo el que se ajuste al tamaño del
control.
bufferTime: especifica el número de segundos que se almacenarán en la memoria
antes de que se inicie la reproducción del vídeo.
totalTime: indica el tiempo total del vídeo.
Recuerda que todas estas propiedades son accesibles desde ActionScript.
Una vez insertada la película mediante la adición de este componente o por importación
deberemos darle un nombre de instancia para poder referirnos a él. Hazlo desde este mismo
panel o desde el Panel Propiedades.
Unidad 21. Vídeo (III)
21.5. Uso de componentes para la reproducción
Usar componentes para controlar la película es muy sencillo, sólo deberás arrastrarlos
desde el Panel Componentes al Escenario y escribir unas pocas líneas en el Panel
Acciones.
BackButton: retrocede el flujo del vídeo al punto de referencia inmediatamente anterior
o en su defecto al inicio de éste.
BufferingBar: muestra el progreso de descarga del vídeo.
ForwardButton: avanza el flujo del vídeo al punto de referencia inmediatamente
posterior o en su defecto al final de éste.
FullScreenButton: cambia al modo de pantalla completa.
MuteButton: establece el volumen de la película directamente a 0. Actuaría de forma
similar a la línea:
?
1miVideo.volume = 0;
PauseButton: pausa la película en el momento en el que se pulse el botón.
PlayButton: reaunda (o comienza) la reproducción a partir de donde se encuentre el
cabezal de reproducción de vídeo.
PlayPauseButton: una mezcla de los dos anteriores, es capaz de pausar y reanudar la
reproducción desde un mismo control.
SeekBar: desde esta barra avanzar y retroceder manualmente por la línea de flujo de la
película.
StopButton: detiene la reproducción y posiciona el cabezal de reproducción al principio
del vídeo.
VolumeBar: permite el aumento o disminución del volumen del vídeo mediante una
barra de volumen.
Una vez añadidos los componentes necesarios al Escenario tendrás que darle un nombre
de instancia y luego asociarlo al reproductor empleando ActionScript. Básicamente, el
reproductor tiene una propiedad que coincide con el tipo de componente, por lo que hay que
asignar cada instancia a su propiedad correspondiente. Un ejemplo sería el siguiente:
?
1 miVideo.playButton = miBotonPlay;
2 miVideo.pauseButton = miBotonPausa;
3 miVideo.playPauseButton = miBotonPausaPlay;
4 miVideo.stopButton = miBotonStop;
5 mVideo.backButton = miBotonAtras;
6 miVideo.forwardButton = miBotonAdelante;
7 miVideo.muteButton = miBotonSilencio;
8 miVideo.volumeBar = miBarraVolumen;
9 miVideo.seekBar = miBarraDeslizadora;
10miVideo.bufferingBar = miBarraProgreso;
El componente se asociará al vídeo y funcionará por sí solo. Fácil, ¿verdad?
Puedes modificar los componentes que añadas al Escenario haciendo doble clic sobre
ellos y cambiando su forma, tamaño o color.
21.6. Crear controles propios
Crear controles propios no es muy complicado en Flash CS5. Sólo tienes que crear los
botones que consideres necesarios y utilizar las propiedades del componente FLVPlayback.
Puedes recurrir al panel Fragmentos de código donde encontrarás códigos muy útiles con
las funciones básicas.
play(): reproduce el vídeo.
?
1miVideo.play();
stop(): detiene el vídeo y vuelve al inicio.
?
1miVideo.stop();
pause(): detiene el vídeo conservando su posición actual.
?
1miVideo.pause();
seek(segundo:Number): permite el avance o retroceso de la película de vídeo.
?
1miVideo.seek(5);
Esta línea colocará la cabeza lectora en el segundo 5 y reproducirá a partir de ahí.
volume: define el volumen del vídeo. Puedes introducir un valor entre 0 y 100.
?
1miVideo.volume = 50;
Un ejemplo de cómo crear un botón de Play/Pause sería asociando el código siguiente a un
botón:
?
1miBoton.addEventListener(MouseEvent.CLICK,pararContinuar);
2function pararContinuar(event:MouseEvent) {
if (miVideo.state==miVideo.PAUSED) {
3
miVideo.play();
4
} else {
5
miVideo.pause();
6
}
7
8}
La propiedad state devuelve el estado en el que se encuentra nuestro vídeo en el
momento, puede tomar los siguientes valores:
miVideo.PAUSED: el vídeo se encuentra pausado.
miVideo.PLAYING: el vídeo se está reproduciendo.
miVideo.REWINDING: el vídeo está en estado de rebobinado.
miVideo.SEEKING: el vídeo está en estado de búsqueda.
miVideo.STOPPED: el vídeo se encuentra detenido.
miVideo.BUFFERING: el vídeo todavía se está almacenando en el buffer.
miVideo.CONNECTION_ERROR: se ha producido un error de conexión y el vídeo no
podrá visualizarse.
miVideo.DISCONNECTED: el vídeo está en estado de desconexión. Este estado se
producirá hasta que se le asigne una ruta a la propiedad contentPath.
miVideo.LOADING: el vídeo está en estado de carga.
21.7. Navegar con los puntos de referencia
Ahora veremos como interactuar con los puntos de referencia que hayamos creado.
Principalmente, podemos usar los puntos de referencia de dos formas: usarlos apra
navegar por el vídeo, o esperar a que se produzcan y entonces realizar una acción.
Navegar con puntos de referencia
En el ejemplo hemos creado 3 botones que deberán saltar a los tres puntos diferentes que
hemos creado: inicio, carrera1 y carrera2.
El código asociado al botón sería el siguiente:
?
1miBoton.addEventListener(MouseEvent.CLICK,reproducirInicio);
2function reproducirInicio(event:MouseEvent) {
3
miVideo.seekToNavCuePoint("inicio");
4
miVideo.play();
5}
Este trozo de código utiliza la función seekToNavCuePoint para buscar el punto de
referencia que se le indique, luego tendremos que decirle que reanude la reproducción.
También
puedes
utilizar
las
funciones
seekToNextNavCuePoint()
y
seekToPrevNavCuePoint() para avanzar y retroceder, respectivamente, por los diferentes
puntos de referencia de navegación creados.
?
1miVideo.seekToNextNavCuePoint();
2miVideo.seekToPrevNavCuePoint();
Unidad 21. Vídeo (IV)
21.8. Trabajar con eventos de vídeo
Como vimos antes, podíamos crear puntos de referencia de Eventos para pasar
parámetros a nuestra película desde la reproducción del vídeo.
Capturar el evento.
Imaginemos que tenemos un vídeo con un punto de referencia llamado susto, y que
cuando el vídeo lo alcance, queremos mostrar un texto determinado en un componente de
texto.
Lo
que
tenemos
que
hacer
es
escuchar
cuándo
se
produce
el
evento
MetadataEvent.CUE_POINT, y entonces llevar a cabo nuestra acción, como en el siguiente
ejemplo:
?
1 import fl.video.MetadataEvent; //Necesitamos importar el tipo de evento
2
3 reproudctor.addEventListener(MetadataEvent.CUE_POINT,
fl_CuePointHandler);
4
5
6 function fl_CuePointHandler(event:MetadataEvent):void
7
8
9
{
//con event.info.name podemos conocer el nombre el punto
if(event.info.name=="susto") {
txtSalida.text="Atención a la cara de Juanito";
10
}
11
}
Como vimos, también podíamos recuperar parámetros del punto de referencia:
?
1import fl.video.MetadataEvent;
2
3reproductor.addEventListener(MetadataEvent.CUE_POINT,eventosVideo);
4function eventosVideo(event:MetadataEvent ) {
if (event.info.parameters) {
5
mensaje.gotoAndPlay(event.info.parameters["fotograma"]);
6
}
7
8}
Lo que hacemos en la condición, es comprobar si hay información sobre los parámetros
(.info.parameters).
Si es así, sacamos la información del parámetro llamándolo por su nombre y actuamos en
consecuencia. Lo que hemos hecho, es hacer que el parámetro fotograma nos indique la
etiqueta a la que queremos desplazar el cabezal de mensaje.
En el ejemplo hemos creado un clip de película que se llama mensaje. Cuando se van
produciendo determinados eventos en el vídeo vamos moviendo el cabezal de reproducción
de dicho clip y así creamos una vinculación entre ambos, el clip y el vídeo.
Ejercicios unidad 21: Vídeo
Ejercicio 1: Mi Vídeo
Deberás reproducir la siguiente película Flash:
Utiliza el archivo fuente video.fla que encontrarás en la carpeta ejercicios/video del curso.
Tu tarea consistirá en importar el video video.mov que encontrarás en la misma carpeta y
crear 6 puntos de navegación, en los segundos 0, 10, 20, 30, 40 y 50.
Luego deberás añadirle funcionalidad a los botones mediante ActionScript.
Si no tienes muy claro cómo realizarlo, Aquí te ayudamos.
Ayuda ejercicios unidad 21: Vídeo
Ejercicio 1: Mi Vídeo
1. Abre el archivo video.fla que encontrarás en la carpeta ejercicios/video del curso.
2. Haz clic en Archivo → Importar → Importar Vídeo para acceder al diálogo Importar
vídeo.
3. En diálogo, pulsa en el botón Iniciar Adobe Media Encoder.
4. En Adobe Media Encoder, pulsa el botón Añadir y selecciona el archivo video.flv que
encontrarás en la misma carpeta.
5. Añadiremos el video al que queremos insertar los puntos de referencia, el video tiene
que estar en formato .flv o .f4v, para ello pulsamos en el botón Ajustes.
6. Ahora ya podemos insertar nuestros puntos de referencia en el hueco que tenemos
debajo de la previsualizacion del video.
7. Pulsa el botón
Navegación .
para añadir un punto de referencia, llámalo 1 y dale el tipo
8. Sitúa el cabezal de reproducción en el segundo 10 y pulsa el botón
de referencia 2 y dale el tipo Navegación.
, llama al punto
9. Sitúa el cabezal de reproducción en el segundo 20 y pulsa el botón
de referencia 3 y dale el tipo Navegación.
, llama al punto
10. Sitúa el cabezal de reproducción en el segundo 30 y pulsa el botón
de referencia 4 y dale el tipo Navegación.
, llama al punto
11. Sitúa el cabezal de reproducción en el segundo 40 y pulsa el botón
de referencia 5 y dale el tipo Navegación.
, llama al punto
12. Sitúa el cabezal de reproducción en el segundo 50 y pulsa el botón
de referencia 6 y dale el tipo Navegación.
, llama al punto
13. Pulsa Aceptar cuando ya tengas los puntos de referencia insertados.
14. Una vez terminado pulsamos Iniciar Cola, esto guardara nuestro video con los puntos
de referencia ya insertados en él.
15. Cuando se haya completado, cierra Adobe Media Encoder.
16. Volverás al diálogo Importar vídeo. Ciérralo también.
17. Selecciona el componente FLVPlayback que había en el Escenario y accede a sus
Propiedades.
18. Busca la propiedad source y haz clic sobre ella para buscar un archivo.
19. Busca el archivo que se ha creado (video.flv o video.f4v según el formato elegido) y
ábrelo.
Ahora, insertaremos el código ActionScript necesario para controlar el vídeo. Para ello,
lo primero que has de hacer es dares nombres a las distintas instancias que hay en el
escenario.
20. Al
Al
Al
Al
componente
de
vídeo,
botón
de
retroceder,
botón
de
parar,
botón
de
reproducir,
llámalo
llámalo
llámalo
llámalo
miVideo.
retro_rapido.
btnStop.
btnPlay.
Al
botón
de
pausar,
llámalo
btnPause.
Al
botón
de
avanzar,
llámalo
avance_rapido.
Al
botón
de
subir
volumen,
llámalo
vol_mas.
Al botón de bajar volumen, llámalo vol_men.
21. Para acabar, creamos una nueva capa llamada acciones donde insertamos el código
necesario:
?
1 miVideo.autoRewind=true; //Para que al pulsar STOP vuelva
2
//al principio
3 //Boton retroceso <<
4 retro_rapido.addEventListener(MouseEvent.CLICK,retroceder);
5 function retroceder(event:MouseEvent):void {
6
miVideo.seekToPrevNavCuePoint();
7 }
8 //Boton stop []
9 btnStop.addEventListener(MouseEvent.CLICK,detener);
10function detener(event:MouseEvent):void {
11
miVideo.stop();
12}
13//Boton play >
14btnPlay.addEventListener(MouseEvent.CLICK,reproducir);
15function reproducir(event:MouseEvent):void {
16
miVideo.play();
17}
18//Boton pausa ||
19btnPause.addEventListener(MouseEvent.CLICK, pausar);
20function pausar(event:MouseEvent):void {
21
miVideo.pause();
22}
23//Boton avance >>
24avance_rapido.addEventListener(MouseEvent.CLICK, avanzar);
25function avanzar(event:MouseEvent):void {
26
miVideo.seekToNextNavCuePoint();
27}
28//Volumen
29//Subir +
30vol_mas.addEventListener(MouseEvent.CLICK, subirVolumen);
31function subirVolumen(event:MouseEvent):void {
32
if (miVideo.volume<100) {
miVideo.volume=miVideo.volume+10;
33
34
}
35}
36//Bajar 37vol_men.addEventListener(MouseEvent.CLICK, bajarVolumen);
38function bajarVolumen(event:MouseEvent):void {
39
if (miVideo.volume>0) {
miVideo.volume=miVideo.volume-10;
40
41
}
42}
22. Y solo queda probarlo.
Unidad 22. Juegos interactivos (I)
22.1. Introducción
En este tema veremos los elementos básicos que necesitaras a la hora de crear juegos con
Flash: el movimiento, los choques, la rotación, creación aleatoria de elementos, etc.
A medida que avancemos en el tema iremos haciendo referencia a este juego que hemos
creado como ejemplo. Pero, primero empezaremos por lo básico.
22.2. Manejando elementos
Cuando trabajemos con objetos necesitaremos acceder a algunas características básicas,
como por ejemplo su anchura y altura o su posición en el Escenario.
Podemos modificar el tamaño del objeto utilizando las propiedades width, height, scaleX e
scaleY.
Las dos primeras (width y height) modificarán o devolverán la anchura y altura,
respectivamente, en píxeles del objeto referenciado, por tanto, podemos cambiar el tamaño de
un clip escribiendo lo siguiente:
?
1miClip.width = 100;
2miClip.height = 200
Las propiedades scaleX e scaleY cambian el tamaño, pero de forma porcentual, donde
1.0 equivale al 100%. Podemos utilizar estas propiedades para hacer un clip el doble de
grande que era, por ejemplo:
?
1miClip.scaleX = 2;
2miClip.scaleY = 2;
Hará que su visualización sea del doble (200%).
También podemos averiguar o modificar la posición de un objeto, basta con trabajar con
sus propiedades x e y:
?
1miClip.x = 50;
2miClip.y = 150;
3
4var posicionDeClipHorizontal:Number = miClip.x;
5var posicionDeClipVertical:Number = miClip.y;
Recuerda que estas propiedades trabajan con píxeles.
De esta forma podemos mover el objeto de una forma muy fácil, por ejemplo para hacer
que se desplace hacia la derecha del Escenario deberás escribir:
?
1miClip.x = miClip.x + 1;
Utilizando estas propiedades y combinándola con las características de los Movieclips
podemos recrear de forma más natural el movimiento.
Veamos este ejemplo:
Aquí hemos creado un clip de película con tres posiciones, parado, izquierda y derecha:
Así, podemos llamar mediante la instrucción gotoAndStop() a uno de los fotogramas del
clip para que se muestre dicha posición y dé más realismo al movimiento.
El código que hemos incluido en la película es el siguiente:
?
1 var izquierda:Boolean = false;
2 var derecha:Boolean = false;
3
4 miClip.gotoAndStop("parado");
5 miClip.x = 10;
6
7 miClip.addEventListener(MouseEvent.CLICK,iniciarMovimiento);
8 function iniciarMovimiento(event:MouseEvent):void{
9
if (miClip.x <= 10) {
10
miClip.gotoAndStop("derecha");
11
derecha = true;
12
}
13
if (miClip.x >= 495) {
14
miClip.gotoAndStop("izquierda");
15
izquierda = true;
16
}
17}
18
19miClip.addEventListener(Event.ENTER_FRAME,desplazar)
20function desplazar(event):void{
21
22
23
if (derecha) {
if (miClip.x < 495) {
miClip.x = miClip.x + 6;
} else {
24
25
miClip.gotoAndStop("parado");
26
derecha = false;
}
27
28
}
29
if (izquierda) {
if (miClip.x > 10) {
30
miClip.x = miClip.x - 6;
31
} else {
32
33
miClip.gotoAndStop("parado");
34
izquierda = false;
}
35
}
36
37}
Observa cómo hemos utilizado aquí el evento ENTER_FRAME. Nos valemos de ella para
crear el movimiento, de esta forma hacemos que la coordenada x del objeto se incremente
cada vez que entre en el fotograma de nuevo. Veremos esta función con más detalle a lo
largo del tema.
Nota: Recuerda que el evento ENTER_FRAME se produce de forma continua y constante,
normalmente varias veces por segundo.
Hemos utilizado las variables derecha e izquierda (de tipo booleano) para evaluar si el
objeto debe desplazarse. En el evento ENTER_FRAME chequeamos estas variables y si
están a true comenzamos el movimiento hasta la posición que queramos.
A medida que vayamos avanzando en el tema veremos más funciones y métodos que nos
permitirán acciones más versátiles y ajustadas a nuestras necesidades.
Otra forma de modificar la apariencia del objeto con el que trabajamos es utilizando la
propiedad rotation.
Esta propiedad actúa sobre el objeto rotándolo tantos grados como especifiques respecto
a su posición original. Por ejemplo:
?
1miClip.rotation = 90;
Esta línea hará que el objeto rote 90 grados en el sentido de las agujas del reloj. Para
rotar un objeto hacia el lado contrario basta con añadirle un signo menos (-) antes del ángulo:
?
1miClip.rotation = -90;
Para devolver al objeto a su posición original sólo tendrás que escribir la siguiente línea:
?
1miClip.rotation = 0;
Así la rotación que actúa sobre el objeto es nula y se muestra en su posición original.
Recuerda que para que las rotaciones parezcan reales deberás posicionar el objeto dentro
del clip en el centro absoluto, para que así la referencia del clip se encuentre en la posición
adecuada.
Observa la diferencia entre estos dos clips:
En ambos la rotación se aplicará respecto al punto de referencia, por lo que en la edición
de éste deberás utilizar los botones
y
del Panel Alinear (Ventana → Alinear) para
centrar el objeto respecto al punto de referencia del clip.
Realiza el paso a paso de rotación para ver mejor como funciona
Unidad 22. Ejercicio: Rotación
Ejercicio paso a paso.
1. Abre el archivo movimiento_rotacion.fla
ejercicios/movimiento_rotacion.
que
encontrarás
en
la
carpeta
2. Observa que al clip le hemos dado el nombre de instancia miClip. Ahora abre el Panel
Acciones (Ventana → Acciones o pulsando la tecla F9).
3. Escribe el siguiente fragmento de código:
?
1 var izquierda:Boolean = false;
2 var derecha:Boolean = false;
3 miClip.x = 30;
4
5
6 miClip.addEventListener(MouseEvent.CLICK,rotar);
7 function rotar(event:MouseEvent):void{
8
if (miClip.x <= 30) {
9
miClip.rotation = 10;
10
derecha = true;
11}
if (miClip.x >= 515) {
12
13
miClip.rotation = -10;
14
izquierda = true;
}
15
16}
17miClip.addEventListener(Event.ENTER_FRAME,para)
18function para(event:Event):void{
if (derecha) {
19
if (miClip.x < 515) {
20
miClip.x = miClip.x + 6;
21
22
}
23
else {
24
miClip.rotation = 0;
25
derecha = false;
}
26
27
}
28
if (izquierda) {
if (miClip.x > 30) {
29
miClip.x = miClip.x - 6;
30
}
31
else {
32
miClip.rotation = 0;
33
izquierda = false;
34
}
35
}
36
37
}
4. Estaremos listos, podrás previsualizar la película pulsando Ctrl+Enter.
Como puedes observar el código es
Unidad 22. Juegos interactivos (II)
El problema ahora se nos plantea cuando queremos que el objeto se oriente hacia unas
coordenadas en concreto. ¿Cómo calculamos el ángulo necesario para que nuestro
elemento se oriente hacia otro situado en las coordenadas 100, 200? La solución no es muy
complicada: deberemos echar mano de la trigonometría.
En Flash tenemos una función muy útil que nos ayuda a encontrar ángulos rápidamente.
Utilizando la función Math.atan2 recuperaremos el ángulo formado por unas
coordenadas en el espacio respecto a un punto central.
Veamos un ejemplo:
Escribiendo la siguiente línea recuperaremos el ángulo que buscamos:
?
1var angulo:Number = Math.atan2(x, y);
Nota: Hay que tener en cuenta que el ángulo calculado está expresado en radianes.
Ahora veamos las tres consideraciones que tenemos que tener en cuenta.
Observa este ejemplo:
Lo primero a tener en cuenta es que las coordenadas que tenemos del punto al que
queremos orientar el objeto no están en relación éste.
Podemos averiguarlas de forma muy fácil haciendo una pequeña conversión restando las
coordenadas entre sí:
Ahora ya podemos emplear la función atan2:
?
1var angulo:Number = Math.atan2(x1 - x2, y1 - y2);
Lo segundo que tendremos que saber es que esta función devuelve un ángulo medido en
el sentido contrario a las agujas del reloj, es decir:
Por tanto si decimos a nuestro objeto que se oriente -30 grados se colocará de esa forma:
Nuestro objeto se encuentra en otro cuadrante completamente diferente, pero si
observamos con atención, la diferencia siempre será de 90º:
Sólo tenemos que sumarle 90 al ángulo resultante para que el objeto se oriente hacia el
lugar correcto.
Así que solventaremos esto son una sola línea. Pero antes convertiremos el ángulo
resultante en radianes a grados:
?
1var grados:Number = Math.round(angulo*180/Math.PI);
2miClip.rotation = grados + 90;
Desde luego la suma que hemos realizado es consecuencia directa de que el objeto
este orientado inicialmente hacia arriba (y empiece a contar los grados desde ese punto en
0).
Si partiésemos de un estado original horizontal como el desfase del objeto ya se encuentra
a 90 grados no hará falta realizarlo:
Observa que en este caso si giramos el objeto -30 grados se colocará orientado hacia la
posición que buscamos.
O incluso, si al contrario, el objeto se encuentra orientado hacia la izquierda deberemos
sumarle 180º.
Como ves, todo dependerá de la posición original del objetos (y de que vértice quieras
orientar). Lo más aconsejable en este caso es que los objetos que vayan a rotar estén
orientados hacia la derecha, así no tendrás que preocuparte del desfase del ángulo.
Unidad 22. Juegos interactivos (III)
Otra de las técnicas que nos será muy útil es la carga y descarga de elementos
existentes en la biblioteca. Esto lo haremos con la función addChild.
Recordemos que esta función añade un elemento (hijo) a la lista de visualización de un
contenedor (padre). Si omitimos el objeto, lo añadimos a la película general.
Tiene la siguiente sintaxis:
?
1miContenedor.addChild(objeto);
Como ya vimos, esto lo empleábamos para cargar agregar archivos externos. Pero ahora
queremos cargar elementos que ya tengamos en la biblioteca. Para poder incluir un clip
desde la biblioteca, antes deberemos crear una clase para poder acceder a él desde
ActionScript. Puedes hacerlo haciendo clic derecho sobre el elemento en la Biblioteca.
Selecciona Propiedades → (Botón Avanzado). Aquí, marcamos la opción Exportar para
SctionScript, y le damos el nombre de la clase en Clase:. Recuerda este nombre, porque es
el que utilizaremos para crear los objetos.
Con esto, hemos creado la una clase (en la imagen, la clase miClip). Como no hemos
asociado nada de código, esta clase se comportará exactamente como un MovieClip, ya que
es su clase base (caja de texto Clase base). Ahora, para agregar estos elementos, sólo
tenemos que crear un nuevo objeto de la clase, y agregarlo al contenedor:
?
1var miObjetoClip:miClip = new miClip;
2miContenedor.addChild(miObjetoClip);
Para eliminar clips insertados mediante addChild puedes utilizar removeChild() o
removeChildAt(), que comentamos al hablar de los contenedores.
?
1miContenedor.removeChild(miClip);
Recuerda que antes de quitar un elemento, es recomendable borrar sus escuchadores de
eventos.
Realiza el ejercicio paso a paso Agregar objetos dinámicamente para practicar mejor
estas funciones, y crear el ejemplo anterior.
Unidad 22. Ejercicio: Agregar objetos dinámicamente
Ejercicio paso a paso.
1. Abre el archivo attach.fla que encontrarás en la carpeta ejercicios/attach del curso.
2. Selecciona el clip estrella en la Biblioteca y haz clic derecho sobre él.
3. Selecciona Propiedades - botón Avanzado.
4. Se abrirá una ventana donde deberás hacer clic en la opción Exportar para
ActionScript.
5. Deja estrella en el campo clase y pulsa OK.
6. Selecciona el primer fotograma de la Capa 1 y escribe el siguiente fragmento de código
en el Panel Acciones (tecla F9):
?
1var contenedor:Sprite=new Sprite; //Creamos un contenedor
2addChild(contenedor); //Y lo mostramos en la escena
Con esto creamos una objeto contenedor Sprite para que este contenga las estrellas.
Usaremos frecuentemente contenedor.numChildren para saber cuántas estrellas se
muestran.
7. Ahora para el botón de añadir estrellas (btn_añadir), añadiremos el siguiente codigo:
?
btn_añadir.addEventListener(MouseEvent.CLICK, añadir);
function añadir(event):void {
1
if (contenedor.numChildren<30) { // si el contenedor contiene
menos de 30 estrellas
2
//podemos añadir más
3
var miEstrella:estrella=new estrella; // creamos una estrella
4 en miEstrella
5
6
7
var posY:Number;
posición Y
//creamos
una
variable
para
calcular
la
var posX:Number; // creamos otra variable para calcular la
posición X
8
// calculamos la posicion "x" e "y" en relación con el núm.
de
estrellas
9
posY=Math.floor(contenedor.numChildren/6)*miEstrella.height;
10
posX=(contenedor.numChildren%6)*miEstrella.width;
11
12
miEstrella.x=posX;
//
asignamos
posiciones a las coordenadas
13
las
variables
de
las
miEstrella.y=posY; // de posición de la estrella
14
contenedor.addChild(miEstrella);
estrella
al contenedor
15
//
por
ultimo
añadimos
la
}
}
Observa como calculamos las posiciones x e y:
Para la posición Y, dividimos contenedor.numChildren (número de hijos que
contiene el contenedor) entre 6, que será el número máximo de estrellas que
ponemos en una fila, lo que nos indica en qué fila tendrá que ir la nueva estrella. El
resultado lo multiplicamos por miEstrella.height (alto de la estrella), y esa será la
distancia con la parte superior (.y).
Para la posición X, calculamos el resto (%) de numChildren entre 6, lo que nos
indica las estrellas que hay en la fila. Lo multiplicamos por miEstrella.width (ancho
de la estrella), para calcular la distancia con el lado izquierdo (.x).
8. Ahora para el botón de quitar estrellas añadimos el siguiente código:
?
1btn_quitar.addEventListener(MouseEvent.CLICK, quitar);
2function quitar(event) {
3 if (contenedor.numChildren) { // si hay más de 0 hijos devolvera
el valor true
4
// quitamos siempre numChildren - 1, que es el último elemento
5añadido
contenedor.removeChildAt(contenedor.numChildren-1);
6
7
}
}
El método contenedor.removeChildAt borra el elemento con el índice dado. Como
queremos borrar el último índice, lo calculamos con contenedor.numChildren-1.
Restamos uno, porque el índice es en base 0. Es decir, si hay dos elementos (índices 0
y 1), numChildren devolverá 2.
Ya hemos creado una película que añade un número concreto de elementos
automatizadamente.
Unidad 22. Juegos interactivos (IV)
22.3. Interacción con el ratón
Veamos ahora cómo interactuar con el ratón y el Escenario y sus elementos.
Empezaremos viendo una de las funciones más útiles para el ratón: arrastrar y colocar.
Utilizando las funciones StartDrag() y StopDrag() es muy sencillo arrastrar y colocar
objetos por el Escenario, como vimos en el primer ejercicio paso a paso de la unidad 18, en
el cual usábamos estas dos propiedades.
La función startDrag permite varios parámetros:
?
1miObjeto.startDrag(bloqueaCentro, rectángulo);
En bloqueaCentro podremos pasarle un valor booleano (true o false) que indicará si el
arrastre se realizará desde el centro del clip (true) o desde el punto donde hizo clic el
usuario (false).
El otro parámetro, rectángulo, nos permite definir los límites de la zona donde podemos
arrastrar. Esta opción es muy útil cuando queremos que el arrastre sólo se pueda realizar
sobre una zona determinada, como por ejemplo las tizas de las barras de desplazamiento,
que no se pueden arrastrar fuera de la zona rectangular que delimitan dichas barras.
Una propiedad muy útil que también te será de mucha ayuda es la de dropTarget. Te
permitirá averiguar sobre qué objeto se ha soltado el objeto arrastrado:
?
1 miObjeto.addEventListener(MouseEvent.MOUSE_DOWN, arrastrar);
2 function arrastrar(event):void {
3
4 }
5
miObjeto.startDrag();
6 stage.addEventListener(MouseEvent.MOUSE_UP, soltar);
7 function soltar(event):void {
8
miObjeto.stopDrag();
9
trace(miObjeto.dropTarget);
10}
Este
código
devolverá
al
Panel
Salida
el
tipo
de
objeto
(podemos
utilizar
miObjeto.dropTarget.name si queremos saber el nombre de instancia) sobre el cual se ha
soltado. Si no hay ningún objeto, devolverá NULL.
Observa también que al soltar, es la escena la que escucha el evento. Esto hace que lo
podamos soltar aunque, por lo que sea, el cursor ya no esté sobre el objeto.
Realiza el ejercicio paso a paso de Arrastre y Orientación de objetos para practicar
conceptos que hemos visto hasta ahora.
Otra cosa que nos será de gran ayuda es poder localizar la posición del ratón. De este
modo podríamos hacer que los objetos se desplacen u orienten hacia el ratón
Para averiguar las coordenadas del ratón sólo tendrás que recurrir a las propiedades
mouseX y mouseY:
?
1var coordenadaX:Number = mouseX;
2var coordenadaY:Number = mouseY;
Con todo lo que hemos aprendido podemos ya sustituir el cursor del ratón normal por
uno de nuestro agrado.
Para ello tenemos que escribir muy pocas líneas:
?
1Mouse.hide(); //Ocultamos el cursor verdadero
2addEventListener(Event.ENTER_FRAME,cambiarCursor);
3function cambiarCursor(event):void {
4
texto.contador_txt.text="("+mouseX+", "+mouseY+")";
5
texto.x = mouseX; //Asignamos las coordenadas
6
texto.y = mouseY; //Al elemento de texto
7
miCursor.x = mouseX; //Y al clip que hará de cursor
8
miCursor.y = mouseY;
9}
Comenzamos ocultando el cursor verdadero, con el método Mouse.hide();.
En la biblioteca tenemos dos clips miCursor, que es lo que queremos mostrar como cursor,
y texto, otro clip en el que mostramos las coordenadas. Como queremos que ambos objetos
sigan al cursor real, en un evento repetitivo como enterFrame, les asignamos a ambos las
coordenadas del ratón.
Podemos volver a visualizar el ratón, por ejemplo, porque cambiamos de fotograma, con el
código:
?
1Mouse.show();
Unidad 22. Juegos interactivos (V)
22.4. Interacción del teclado
Podemos añadir a nuestras películas interacción con las teclas pulsadas, el procedimiento
es muy sencillo, basta con detectar los eventos que se producen al pulsar las teclas y saber
qué tecla lo ha originado.
Cuando recogemos un evento de teclado, disponemos del método .keyCode, que nos
indica la tecla que se ha pulsado. Dependiendo de la que sea, haremos una cosa u otra. Por
ejemplo:
?
1 addEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);
2
function capturarTeclado(tecla:KeyboardEvent):void{
3
4
//Es importante especificar que es un vento del tipo KeyboardEvent
5
//para poder emplear el método .keyCode.
6
switch (tecla.keyCode){
case Keyboard.RIGHT:
7
//mover hacia la derecha
8
9
break;
10
case Keyboard.LEFT:
//mover hacia la izquierda
11
break;
12
}
13
14}
Los códigos de las teclas son bastante sencillos, las flechas UP, DOWN, RIGHT y LEFT; la
barra espaciadora SPACE; y las teclas especiales SHIFT, CONTROL, TAB, CAPSLOCK,
ESCAPE, ENTER, BACKSPACE, INSERT, DELETEKEY, HOME, END, PGDN y PGUP.
Siempre precedido por Keyboard.
Los eventos de teclado que podemos emplear son:
KeyboardEvent.KEY_DOWN ("keyDown") - Cuando se pulsa una tecla.
KeyboardEvent.KEY_UP ("keyDown") - Cuando se suelta.
Recordemos el ejemplo que vimos al principio del tema. Esta vez, lo vamos a cambiar para
mover el objeto con las teclas en vez de con el ratón:
Nota: Si no responde al teclado, haz clic primero para que tome el foco.
El código que hemos incluido es el siguiente:
?
1 var izquierda:Boolean=false;
2 var derecha:Boolean=false;
3 miClip.gotoAndStop("parado");
4
5 //Detectamos el evento al pulsar tecla, y marcamos
6 //La dirección del movimiento
7 addEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);
8 function capturarTeclado(tecla:KeyboardEvent):void {
9
switch (tecla.keyCode) { //Dependiendo de la tecla, indicamos
10
case Keyboard.RIGHT :
11
derecha=true;
12
break;
13
case Keyboard.LEFT :
14
izquierda=true;
15
break;
16
//una dirección u otra
}
17}
18
19//En el evento onEnterFrame, comprobamos si están activas
20//Las variables que indican la dirección del movimiento
21miClip.addEventListener(Event.ENTER_FRAME, movimiento);
22
23function movimiento(event):void {
if (derecha) {
24
25
miClip.gotoAndStop("derecha");
26
if (miClip.x<490) {
miClip.x=miClip.x+7;
27
}
28
} else if (izquierda) {
29
30
miClip.gotoAndStop("izquierda");
31
if (miClip.x>7) {
miClip.x=miClip.x-7;
32
}
33
34
}
35
36}
37//Detectamos cuándo se suelta la tecla
38addEventListener(KeyboardEvent.KEY_UP, parar);
39
40function parar(event):void {
41
derecha=false; //Y paramos el movimiento
42
izquierda=false;
43
miClip.gotoAndStop("parado");
44}
Unidad 22. Juegos interactivos (VI)
22.5. Interacción entre elementos
Una de las cosas que más nos interesará realizar es el choque entre elementos en el
Escenario, y ya no el choque físico en sí, sino la coincidencia de dos elementos en un
mismo espacio.
Esto lo podremos evaluar y tratar con los métodos hitTestPoint(x, y) para detectar si una
coordenada cae dentro del objeto, y hitTestObject(object) que nos indica si dos objetos se
solapan (chocan).
Su uso tiene dos posibilidades, ambas muy sencillas. Puedes evaluar si en un punto en
concreto se encuentra un objeto específico (muy útil para detectar los clics del ratón o donde
se encuentra en cada momento):
?
1miClip.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
2
3function miFuncion(event:MouseEvent):void{
if (miClip.hitTestPoint(mouseX, mouseY) {
4
//coincidencia
5
}
6
7}
Este código evalúa la posición del ratón a cada clic, si las coordenadas introducidas en el
método hitTestPoint coinciden con el área de miClip se produce colisión.
hitTestPoint admite un tercer parámetro booleano. Éste indica si la colisión se calcula con
respecto a la forma del elemento (true) a al rectángulo delimitador del objeto (false). La
opción por defecto es esta última.
Cuando queremos evaluar si un objeto "choca" con otro, empleamos el método
hitTestObject:
?
1miClip.hitTestObject(miOtroClip);
En ambos casos, el valor devuelto es true, si hay colisión, o false si no.
En desplazamientos utilizaremos mucho esta opción para averiguar si el objeto que
estamos moviendo choca con una pared u otro objeto.
Ten en cuenta que la posición que deberemos evaluar si hace colisión con la pared debe
ser aquella que adoptaría el objeto después de desplazarse. Si lo desplazamos antes los
objetos pueden quedar solapados, y eso, dependiendo del caso, puede no ser adecuado para
nuestro diseño.
Esto complica un poco las cosas, pues deberemos calcular primero dónde estarán las
coordenadas del objeto tras moverlo y calcular la colisión antes de moverlo.
?
1miPared.hitTestPoint(coorXfinal_Clip, coorYfinal_Clip);
Pero, ¿cómo conocemos las coordenadas de una forma?, ¿cómo averiguo el punto máximo
que alcanza en la esquina abajo derecha?. Como siempre, Flash nos soluciona esto
incorporando un método a los objetos de visualización que nos devuelve sus medidas. El
método getBounds.
Haz clic y utiliza las flechas para moverte.
Su sintaxis es la siguiente:
?
1miClip.getBounds(objetoReferencia);
En objetoReferencia indicaremos el objeto cuyo sistema de coordenadas utilizaremos
como punto de referencia. Normalmente escribiremos stage, para que las coordenadas
dadas sean respecto a la película en general y no sobre un clip en particular.
El método nos devuelve un objeto Rectangle. Este tipo de objeto define un área
rectangular, y nos permite conocer la posición de sus cuatro lados con las siguientes
propiedades:
.top : lado superior (sería lo mismo que y).
.bottom : lado inferior (sería y + altura del objeto).
.lef : lado izquierdo (sería lo mismo que x).
.right: lado derecho (sería x más el ancho).
?
1miClip.getBounds(stage).left;
2miClip.getBounds(stage).right;
3miClip.getBounds(stage).top;
4miClip.getBounds(stage).bottom;
Realiza el ejercicio paso a paso de Colisión y Movimiento para practicar este concepto.
Unidad 22. Ejercicio: Colisión y Movimiento
Colisión y Movimiento
Reproduciremos la película que vimos en la teoría:
Ejercicio paso a paso.
1. Abre el archivo colision.fla que encontrarás en la carpeta ejercicios/colision del curso.
En él encontrarás dos elementos: miClip que será el cuadradito que se desplazará, y
fondo, que delimita el área por el que se puede desplazar.
2. Selecciona el primer fotograma y abre el Panel Acciones, escribe en él lo siguiente:
?
1 //definimos las variables que vamos a utilizar
2 //Variables que indican la dirección del movimiento
3 var izquierda:Boolean=false;
4 var derecha:Boolean=false;
5 var subir:Boolean=false;
6 var bajar:Boolean=false;
7 var velocidad:Number=1;//Espacio que se desplazará
8
9 //Al pulsar una tecla...
10stage.addEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);
11//Averiguamos la tecla pulsada para decidir la dirección
12function capturarTeclado(tecla:KeyboardEvent):void {
13
switch (tecla.keyCode) {
14
case Keyboard.RIGHT :
15
derecha=true;
16
break;
17
case Keyboard.LEFT :
18
izquierda=true;
19
break;
20
case Keyboard.UP :
21
subir=true;
22
break;
23
case Keyboard.DOWN :
24
bajar=true;
25
break;
26
}
27}
28
29//Al soltar una tecla
30stage.addEventListener(KeyboardEvent.KEY_UP, parar);
31//Anulamso el movimiento en dirección de la tecla
32function parar(tecla:KeyboardEvent):void {
33
switch (tecla.keyCode) {
case Keyboard.RIGHT :
34
35
derecha=false;
36
break;
case Keyboard.LEFT :
37
38
izquierda=false;
39
break;
case Keyboard.UP :
40
41
subir=false;
42
break;
43
case Keyboard.DOWN :
44
bajar=false;
45
break;
46
}
47}
Este código se parece mucho al que vimos en la teoría. Lo único que hacemos es
obtener qué tecla se ha pulsado y en función de la dirección, activamos una variable
booleana que indica que se ha de mover el objeto en esa dirección. Cuando se
suelte la tecla, hacemos lo mismo para desactivar la variable.
3. Vamos ahora con el movimiento. Lo haremos en el evento "enterFrame" del objeto que
se mueve. Añade el siguiente código:
?
1 //En el enterFrame del clip, comprobamos la posición futura, y si
no hay impacto, movemos
2
miClip.addEventListener(Event.ENTER_FRAME, mover);
3
function mover(event):void {
4
//Utilizamos un objeto rectángulo para que nos sea más cómodo
5 acceder a las propiedades
var rect:Rectangle= miClip.getBounds(stage);
6
7
if (bajar) { //Comprobamos la colisión abajo - izquierda y
abajo - derecha, aumentando abajo
8
if (!(fondo.hitTestPoint(rect.left, rect.bottom+velocidad,
9 true) || fondo.hitTestPoint(rect.right, rect.bottom+velocidad,
true))) {
10
miClip.y+=velocidad; //Si no hay colisión, cambiamos
11la posición del objeto.
12
}
13
14
15
}
if (subir) { //Comprobamos la colisión izquierda - arriba y
derecha - arriba, aumentando arriba
16
if
true)
||
true)))
{
17
(!(fondo.hitTestPoint(rect.left,
fondo.hitTestPoint(rect.right,
18
miClip.y-=velocidad;
}
19
}
20
21
rect.top-velocidad,
rect.top-velocidad,
if (izquierda) { //Comprobamos la colisión izquierda - arriba
e izquierda - abajo, aumentando izquierda
22
if
||
23true)
true))) {
24
(!(fondo.hitTestPoint(rect.left-velocidad,
rect.top,
fondo.hitTestPoint(rect.left-velocidad,
rect.bottom,
miClip.x-=velocidad;
25
}
26
}
if (derecha) {//Comprobamos la colisión derecha - arriba y
derecha - abajo, aumentando derecha
if (!(fondo.hitTestPoint(rect.right+velocidad, rect.top,
true) || fondo.hitTestPoint(rect.right+velocidad, rect.bottom,
true))) {
miClip.x+=velocidad;
}
}
}
Parece un poco complicado pero en esencia es más largo, pero sencillo. Para cada uno de
los movimiento (arriba, abajo, izquierda y derecha) tendremos que evaluar si se produce
colisión
con
el
objeto
miClip
y
el
clip
fondo.
Pero no bastará con hacerlo sólo de una esquina, veamos un ejemplo para verlos con más
claridad:
Como ves en la imagen, deberemos ver si se producen dos colisiones. En el movimiento
hacia abajo una será la de la esquina inferior izquierda y la otra de la esquina inferior
derecha. Si por ejemplo, no evaluásemos el choque con la esquina inferior izquierda e
intentásemos realizar un movimiento hacia abajo, ¡éste se realizaría! Y en definitiva es lo que
queremos evitar.
Hemos empleado un objeto Rectángulo al que le hemos dados las medidas del objeto para
que nos sea más cómodo trabajar. Por ejemplo, para acceder a la parte superior, tendríamos
que escribir miClip.getBounds(fondo).top cada vez, mientras que así solo ponemos
rect.top.
Observa también que para realizar el hitTestPoint hemos tenido en cuenta la posición que
adoptará el objeto después del movimiento (sumándole la velocidad, o lo que es lo mismo, el
número de píxeles que se desplaza el objeto a cada pulsación). Además, le hemos
enviado un tercer parámetro true para que tenga en cuenta la forma del objeto (del fondo).
Unidad 22. Juegos interactivos (VII)
22.6. Funciones avanzadas
También veremos otras opciones que nos ayudarán mucho a la hora de crear juegos. Una
de ellas es la de la posibilidad de darle aleatoriedad a los componentes.
Podemos utilizar la función que incorpora Flash Math.random() que devuelve un número
pseudo-aleatorio entre 1 y 0.
Su uso es simple sólo deberás escribir:
?
1var miNumero:Number = Math.random();
Puedes comprobarlo probando el siguiente ejemplo:
?
1trace(Math.random());
2trace(Math.random());
3trace(Math.random());
4trace(Math.random());
Es tan útil que a raíz de esta función se ha creado este trozo de código que casi utilizarás
en la mayoría de tus películas que contengan componentes aleatorios:
?
1function num_aleatorio (min:Number ,max:Number):Number {
return (Math.floor(Math.random()*(max-min+1))+min);
2
3}
Esta función te devuelve un número aleatorio dentro de un rango:
?
1var miNumero:Number = num_aleatorio(1, 100);
En este ejemplo se almacenará un número de 1 a 100 en la variable miNumero.
En el juego de ejemplo que completaremos en el ejercicio final, hemos utilizado esta
función para generar de forma aleatoria desde dónde parten los proyectiles, dónde caen, y su
escala.
?
var escala:Number = num_aleatorio(0, 2); //escala influirá en el tamaño y
la velocidad
1
this.velocidad = velocidad_base+nivel*1.5+(2-escala);
2
this.width = this.width*((10-escala)/10);
3
this.height =
4
this.height*((10-escala)/10);
var puntoSalida:Number = num_aleatorio(this.width/2, ancho-this.width/2);
5
//Zona de salida
6
this.x=puntoSalida;
7
this.y = 0;
8
var puntoImpacto:Number = num_aleatorio(ancho*(1/4), ancho*(3/4));//Zona
de impacto
Como ves tenemos randomizados muchos de los procesos. El primer num_aleatorio lo
utilizamos para calcular la escala, un valor entre 2 y 0 que influirá en el tamaño del proyectil y
su velocidad. El segundo num_aleatorio calcula la posición desde la que parte el proyectil, y
el último num_aleatorio calcula la posición hacia donde se dirige. Además, en el juego la
hemos empleado más veces, por ejemplo para decidir si se lanza el proyectil o de que tipo
será.
De esta forma hemos logrado que en cada partida los proyectiles aparezcan de forma
distinta.
Otra de las funciones que te vendrán muy bien es la de dotar de velocidad a los
movimientos de los objetos.
Observa el código que hemos introducido en el juego:
?
1this.velocidad = velocidad_base+nivel*1.5+(2-escala);
En la definición de la clase Proyectil, hemos creado una propiedad velocidad que
calculamos en función a una velocidad base a la que le sumamos la velocidad que depende
del nivel y de la escala del proyectil. De hecho, esa velocidad va aumentando a medida que
se van eliminando proyectiles y subiendo de nivel.
De ahí que cuando asignamos el movimiento del elemento:
?
1this.y += this.velocidad;
Lo hacemos refiriéndonos a la velocidad, así podemos variarla en cualquier momento
aumentándola o reduciéndola según nuestros propósitos.
Por último veremos algo que nos permitirá mostrar información a los usuarios para
que ellos tengan conocimiento de cómo se está desarrollando la partida. Esto lo haremos con
los textFields. Los textFields pueden ser elementos que hayamos creado antes de publicar la
película, así que no tendremos problemas con ellos. Definimos su aspecto y propiedades en el
panel de Propiedades, y utilizando su nombre de instancia, podemos cambiar su contenido
dinámicamente de la siguiente manera:
?
1estadisticas_txt.text = "Estas son las estadísticas del juego";
Simplemente los declararemos como texto dinámico e iremos modificando su contenido.
Pero, ¿Y si queremos crear un campo de texto mediante ActionScript?
Muy sencillo, te bastarán unas pocas líneas para conseguirlo:
?
1 //Creamos el formato
2 var miFormato:TextFormat = new TextFormat();
3 //Definimos el formato;
4 miFormato.bold = true;
5 miFormato.font = "Arial";
6 miFormato.size = 12;
7 miFormato.color = 0xFFFFFF;
8 miFormato.align = "left";
9
10//Creamos el campo de texto
11var estadisticas_txt:TextField = new TextField();
12//Definimos la propiedades del campo de texto
13estadisticas_txt.name = "estadisticas_txt";
14estadisticas_txt.defaultTextFormat = miFormato; //asignamos el formato
15estadisticas_txt.selectable = false;
16estadisticas_txt.x = 10;
17estadisticas_txt.y = 0;
18estadisticas_txt.width = 530;
19estadisticas_txt.height = 22;
20estadisticas_txt.text = "Estas son las estadísticas del juego";
21
22//Lo añadimos a la lista de visualización
23addChild(estadisticas_txt);
En nuestro ejemplo, por comodidad no creamos todo el campo de texto desde el código.
Puedes ver que hemos creado un objeto llamado miFormato que es del tipo formato de
texto, con unas características básicas que podremos aplicar sobre cualquier texto de
nuestra película. Luego mediante ActionScript hemos creado otro objeto estadisticas_txt del
tipo campo de texto, que será el que mostrará el texto.
Ahora sólo hará falta remitirse a la propiedad text del texto que hemos creado para darle un
valor, y como hemos visto antes.
Las propiedades de formato de texto que hemos utilizado son las más comunes, si
necesitas un listado completo de ellas puedes visitar nuestra sección avanzada.
Antes de realizar los ejercicios finales, te recomendamos seguir el ejercicio paso a paso
Crear una clase en ActionScript.
1. La propiedad scaleX permite...
a) determinar la coordenada x del objeto.
b) determinar la anchura del objeto absoluta.
c) determinar la anchura del objeto respecto a su valor absoluto.
2. La propiedad rotation te permite rotar un objeto tomando como referencia la vertical de
éste.
a) Verdadero.
b) Falso.
3. La función atan2 nos ayudará a encontrar ángulos de objetos respecto a un punto (0,0).
a) Verdadero.
b) Falso.
4. Podemos conocer el objeto sobre el que se soltó un elemento que estaba arrastrándose
con la propiedad...
a) dragtarget.
b) droptarget.
5. ¿Qué evento utilizaremos para la reproducción continuada de determinadas funciones?
a) Enter_Frame.
b) onLoad.
6. ¿Qué devolverá la función hitTestPoint si la ejecutamos contra dos elementos que ocupan
el mismo espacio?
a) True.
b) False.
7. La función getBounds() nos permite averiguar las X y las Y máximas y mínimas de
posición de un objeto.
a) Verdadero.
b) Falso.
8. La función random() devuelve...
a) Un número aleatorio entre 0 y 1.
b) Un número aleatorio entre 1 y 100.
9. La función del objeto TextFormat es...
a) Poder darle el mismo formato a diferentes objetos de texto.
b) Formatear un texto independientemente del resto de propiedades que añadamos.
c) Las dos anteriores son correctas.
Unidad 23. Animaciones avanzadas (I)
23.1. Movimiento de objetos mediante ActionScript
Para poder mover objetos con ActionScript debemos conocer el sistema de coordenadas
utilizado por Flash.
La esquina superior izquierda es la posición x=0, y=0. (ver la imagen)
Para mover un objeto debemos modificar su posición definida por las propiedades objeto.x
y objeto.y
Por ejemplo, si hacemos objeto.x += 10 estamos desplazando el objeto 10 píxeles hacia
la derecha.
Vamos a ver cómo mover un objeto a partir de este ejemplo de una bola botando.
El algoritmo es muy sencillo, se trata de ir modificando la posición de la bola desde una
posición inicial para que vaya bajando hasta que llegue al suelo, en ese momento
invertimos el movimiento para que suba y calculamos hasta el tope que tiene que subir. Así
sucesivamente hasta que deje de botar.
Para que la bola baje debemos sumar una cantidad a la coordenada y, y para que suba
debemos restarle una cantidad. Si queremos que la bola se vaya desplazando hacia la
derecha debemos sumar una cantidad a la coordenada x.
Cuando la bola baja, según el esquema de la imagen, pasa de la posición (x1, y1) a la
posición (x2, y2), para ello se incrementa la x con el valor incre_x (que estaría representado
por la línea azul) y se incrementa la y con el valor incre_y (que estaría representado por la
línea roja).
Cuando la bola sube, la única diferencia es que la coordenada y va disminuyendo en lugar
de aumentando, según el esquema de la derecha, al subir se pasa de la posición (x' 1, y'1) a la
posición (x'2, y'2), para ello se incrementa la x con el valor incre_x (que estaría representado
por la línea azul) y se decrementa la y con el valor incre_y (que estaría representado por la
línea roja)
Vamos a ver lo más importante del código ActionScript que tenemos un poco más abajo.
Hemos creado una bola azul y la hemos convertido en un movieclip, la instancia se llama
bola_mc.
Inicialmente la bola está en la posición (bola_mc.x= 0,bola_mc.y= 0)
Mediante la variable baja, sabremos si la bola está bajando o subiendo. Cuando la
coordenada y llega al suelo, la bola pasará a subir, cuando la coordenada y llegue al tope la
bola comenzará a bajar.
En cada bote la bola irá perdiendo fuerza y el bote será más bajo, la variable elasticidad
determinará esta pérdida de potencia.
Cada vez que la bola llega al tope calculamos el nuevo tope, para ello calculamos la
distancia de la bola al suelo, la dividimos por la elasticidad y esa cantidad se la sumamos al
tope.
En el esquema, la línea naranja representa esa cantidad que le sumamos al tope 1 para
pasar al tope 2.
Unidad 23. Animaciones avanzadas (II)
Ya tenemos nuestro código casi preparado, ahora sólo falta hacer que el proceso se repita
un número determinado de veces. Esta película Flash sólo tiene un fotograma. ¿Cómo
hacemos esto? Lo primero que se nos ocurre es incluir una instrucción while ... o una
instrucción for ... , si lo hacemos veremos que no funcionará porque la repetición es tan rápida
que no da tiempo a ver nada.
La solución está en introducir una instrucción que haga que el proceso se repita cada 35
milisegundos. Esto lo vamos a ver en el punto siguiente.
Hemos colocado un botón en la película de forma que cada vez que se pulsa, se detiene la
ejecución (si todavía no había acabado) y se lanza una nueva ejecución.
Cuando el tope llega al suelo se detiene la ejecución.
?
1 btn_reproducir.addEventListener(MouseEvent.MOUSE_UP,playescena)
2 function playescena (event:MouseEvent):void {
3
var baja:Boolean = true; //Si la bola sube o baja
4
var incre_x:Number = 3.5; //Incremento vertical
5
var incre_y:Number = 8; //Incremento horizontal
6
7
8
9
10
11
12
13
14
15
var suelo:Number = 280; //Distancia a la que está el suelo
var tope:Number = 0; //Altura máxima del bote
var elasticidad:Number = 3; //Corrector del tope
bola_mc.y = 0; //Comienza en la esquina superior izquierda
bola_mc.x = 0;
tope += (suelo - bola_mc.y) / elasticidad; //calculamos el tope
var repeticion:Number;
clearInterval(repeticion);
repeticion = setInterval(botar, 35);//Repetimos botar cada 35 ms
function botar() {
if (baja) { // Si la bola baja...
16
bola_mc.y += incre_y;//Aumentamos Y
17
bola_mc.x += incre_x;
18
if (bola_mc.y>=suelo) {
19
baja = false; //Si ha llegado al suelo hacemos que suba
20
}
21
} else { // Si la bola sube...
22
bola_mc.y -= incre_y;//Disminuimos Y
23
bola_mc.x += incre_x;
24
if (bola_mc.y<=tope) { //Cuando alcance el tope
25
baja = true; //La hacemos bajar...
26
if (tope>=suelo) { //Cuando el tope esté más bajo que el
27suelo
28
incre_y = 0;
29
clearInterval(repeticion);//Fin de la repetición
//Ya no rebota más
30
} //Al llegar abajo, calculamos el nuevo tope
31
tope += (suelo - bola_mc.y) / elasticidad;
32
}
33
34
35}
}
}
En este sencillo ejemplo la trayectoria de la bola es rectilínea, para que fuese un
movimiento más real debería seguir una trayectoria curva. Dibujar curvas es un poco más
complicado que dibujar rectas. Flash nos ofrece una opción más sencilla para hacer que un
objeto siga una trayectoria curva: las guías de movimiento que veremos en este mismo tema
aplicadas al bote de una pelota.
Y si queremos que quede perfecto, en vez de utilizar una velocidad constante, esta debería
de depender de la altura, para que fuese decelerando al subir y acelerando al bajar.
Si deseas probar suerte con las curvas y ActionScript realiza el ejercicio paso a paso
Movimiento en espiral para empezar a familiarizarte con ellas.
Unidad 23. Animaciones avanzadas (III)
23.2. Función setInterval y el evento ENTER_FRAME
La función setInterval se utiliza cuando queremos que se repita la ejecución de un
código ActionScript cada cierto número de milisegundos, y el evento ENTER_FRAME
("enterFrame") se utiliza cuando queremos ejecutar un código ActionScript en función de
la velocidad de la película Flash.
Estas funciones se pueden utilizar para controlar el tiempo cuando utilizamos ActionScript y
no nos interesa utilizar los fotogramas como forma de control del tiempo.
Por ejemplo, podemos generar un objeto y hacer que se mueva 5 pixels cada 30 ms.
variando estos parámetros conseguiremos que el objeto se mueva más o menos rápido.
setInterval
El formato de esta función es el siguiente:
?
var retardo:Number = setInterval(queFuncion:Function,
1
[param1:Object, param2, ..., paramN]);
intervalo:Number,
Donde,
queFuncion es la función que se va a repetir.
intervalo es el número de milisegundos que van a transcurrir entre cada llamada a la
función.
[param1:Object, param2, ..., paramN] es la lista opcional de parámetros que se pasan
a la función indicada en queFuncion.
retardo es una variable que identifica el intervalo y que nos permite emplear
clearInterval() para detener la ejecución.
Por ejemplo, el código siguiente escribe 10 veces el mensaje "contador" i, cada 2000
milisegundos (2 sg.).
?
1var i:Number = 1;
2var repeticion:Number = setInterval(contar, 2000);
3function contar() {
4
trace("contador: "+ i++);
5
if (i>10) {
clearInterval(repeticion);//Fin de la repetición
6
}
7
8}
La función clearInterval sirve para detener la ejecución de la función llamada desde
setInterval. Por lo tanto, conviene utilizar clearInterval siempre que usemos setInterval, para
evitar que la ejecución continúe indefinidamente.
En el ejemplo del punto anterior hemos definido la función setInterval para que la función
botar se ejecute cada 35 milisegundos.
Unidad 23. Animaciones avanzadas (IV)
ENTER_FRAME ("enterFrame")
El controlador de eventos ENTER_FRAME, permite invocar a una función de forma
repetida tantas veces como fotogramas por segundo tenga definida la película.
Este comportamiento ya lo hemos utilizado varias veces.
Por ejemplo, en el movieClip bola_mc:
?
1var i:Number =0;
2bola_mc.addEventListener(Event.ENTER_FRAME, miFuncion)
3function miFuncion(event):void{
trace("ejecutando: "+ ++i);
4
5}
Si la velocidad de la película es de 12 fps, este código escribiría en la salida 12 líneas por
segundo, de esta forma:
ejecutando:1
ejecutando:2
ejecutando:3
...
Aunque con este ejemplo no lo parezca, (sólo pretende explicar la función) estos dos
tipos de funciones que se ejecutan repetitivamente pueden ser muy útiles en determinadas
ocasiones. A lo largo del cursos ya hemos visto algunos ejemplos de su utilidad, a
continuación veremos otro ejemplo que puede sernos útil.
Imagina que quieres que tu película se detenga durante 2 segundos y luego continúe.
Esta es una forma de hacerlo utilizando la función setInterval.
Colocaríamos este código en el frame que deseemos, llamamos a setInterval con 1 s
(1000 ms) y cuando se hayan cumplido dos llamadas detenemos setInterval y continuamos
con el siguiente frame de la película.
?
var tope:Number = 1;
var repeticion:Number = setInterval(parar, 1000);
function parar() {
tope++;
if (tope > 2) {
clearInterval(repeticion);
nextFrame();
play();
}
1
2
3
4
5
}
stop();
Unidad 23. Animaciones avanzadas (V)
23.3. Movimiento de objetos mediante guía
6
7
En esta unidad ya hemos visto como hacer botar una bola mediante ActionScript, ahora
vamos a recordar una técnica que ya vimos en la unidad 12, animación mediante trazado
8
o guía de movimiento.
9
En este caso, se trata de imitar el bote de una pelota, por lo tanto, dibujamos una curva
1
0
1
1
que imite dicho bote.
De esta forma conseguiremos una animación que resulta más natural que el bote con
trayectoria recta que vimos en el punto anterior.
En las imágenes podrás ver qué proceso hemos seguido para dibujar el movimiento.
La guía la hemos dibujando sucesivas curvas de modo que la pelota invite el
movimiento que queremos crear.
Para darle mayor realismo hemos insertado fotogramas claves en puntos críticos para
achatar la pelota y dotarla de elasticidad.
Ahora podrás combinar muchas de las técnicas que hemos aprendido para generar algo
así:
(Haz clic en la película y luego usa las teclas de movimiento a derecha e izquierda)
Hemos visto dos técnicas diferentes para animar un objeto en Flash, mediante
ActionScript y mediante guía de movimiento.
Según cada caso concreto resultará más adecuado elegir una u otra técnica. En general,
resulta más fácil y rápido utilizar guías de movimiento que ActionScript, sobre todo si el
movimiento que tiene que seguir el objeto es sinuoso y difícil de definir en términos de una
ecuación matemática.
Hay casos en los que será más adecuado utilizar ActionScript y otros casos en los que
sólo será posible crear el movimiento mediante ActionScript, por ejemplo, si queremos que
un objeto se mueva de forma aleatoria por un escenario.
Unidad 23. Animaciones avanzadas (VI)
23.4. Animaciones de rostros
Una de las bases para hacer animaciones de personajes es la animación de rostros, en
esta pequeña introducción aprenderemos cómo hacer que un rostro pase de la risa al
enfado.
Todos sabemos que un rostro sonriente tiene las cejas, los ojos y la boca en distinta
posición que un rostro enfadado. Vamos a ver cómo con unas sencillas transformaciones de
forma y de color obtenemos un buen resultado.
Lo primero que hay que tener en cuenta es dibujar los elementos que tienen que moverse
en una capa propia, así crearemos una capa para la boca, cejas, etc.
Dibujamos la boca con herramienta Línea, en el fotograma 1, y creamos un frame clave
en el fotograma 17. Para convertir la línea recta en una curva, volvemos al
fotograma 1 y activamos la herramienta Selección y nos aseguramos de que la línea de la
boca no esté seleccionada. Ahora acercamos el cursor a la línea y cuando aparezca una
pequeña línea curva debajo del cursor hacemos clic y arrastramos hacia abajo, así
tendremos una boca sonriente. Vamos al fotograma 17 y hacemos lo mismo pero
arrastrando hacia arriba para conseguir una boca enfadada. Esto lo tendremos que hacer
con todos los elementos que queramos ver cambiar.
Es importante que arrastres desde el centro de la línea y en dirección perpendicular para
que quede una curva simétrica. En el caso de las cejas, nos interesa que la curva no sea
simétrica y deberemos arrastrar desde un lateral de la línea en lugar de desde el centro.
Unidad 23. Animaciones avanzadas (VII)
23.5. Animaciones geométricas en 3D
Vamos a ver como crear una animación de una caja girando en tres dimensiones.
Para abordar una animación de este tipo, evidentemente, debemos conocer como dibujar
objetos en tres dimensiones. Hay varios tipos de perspectiva que se pueden utilizar: a)
perspectiva caballera b) perspectiva isonométrica y c) perspectiva cónica.
Estudiar perspectiva no es el objeto de este curso por lo tanto no vamos a ser muy
estrictos al hacer los dibujos y, como consecuencia de ello, el resultado final tampoco va a
ser una animación perfectamente realista, pero lo que tratamos de explicar es únicamente el
proceso de animación.
Se trata de hacer girar una caja desde una posición inicial hasta una posición fila. Para
hacer la animación debemos dibujar la caja en varias posiciones intermedias. A
continuación crearemos animaciones de forma para cada una de las caras visibles de la
caja.
Hay que tener en cuenta que inicialmente la cara de la derecha no es visible, pero se ira
haciendo visible según avance el giro.
Luego deberemos introducir interpolaciones entre las diferentes posiciones para terminar
con un resultado parecido a este:
Unidad 23. Animaciones avanzadas (VIII)
23.6. Cinemática inversa
El método de animación cinemática inversa nos permite mover objetos de forma más
natural, a la vez que sencilla. La idea es unir los elementos con "huesos", de manera que
estos queden unidos formando articulaciones. Pensemos en un brazo creado con tres
huesos unidos por la muñeca y codo. Al mover la mano, el antebrazo la seguiría doblándose
por la muñeca y por el codo.
Para crear los huesos, encontramos la herramienta Hueso
.
Podemos hacerlo de dos formas: creando un esqueleto dentro de una forma, o uniendo
símbolos con huesos.
Crear un esqueleto en una forma:
Partimos de una forma, como pueden ser elipses, rectángulos, trazos del pincel, etc.
Cualquier cosa que no se haya convertido en un símbolo. Con la herramienta Hueso,
vamos haciendo clic y arrastrando, dibujando los huesos. Debemos de comenzar por el
hueso raíz, y seguir por los que cuelgan de este. Por ejemplo, para dibujar un brazo,
haríamos clic sobre el hombro y arrastraríamos hasta el codo. Volveríamos a hacer clic
sobre el el codo y arrastraríamos hasta la muñeca.
En la siguiente imagen, partimos de un dibujo muy simple hecho con el Pincel, y le
hemos creado un esqueleto.
Podemos crear tantos huesos como queramos dentro de la forma. Si ahora intentas
arrastrar un brazo, verás que el resto del cuerpo le sigue. El inconveniente de la forma es
que puede deformarse y no podremos controlarlo.
Crear un esqueleto con símbolos:
Otra forma de trabajar es utilizando símbolos. Debemos de tener en cuenta que un
símbolo sólo puede tener un hueso. Por tanto, necesitamos una instancia de símbolo
para cada sección entre articulaciones.
Antes de comenzar a crear el esqueleto, colocamos todos los símbolos en el escenario,
colocados de la forma deseada. Después, partiendo de la raíz del esqueleto, del punto de
que saldrán todos los huesos, vamos enlazando los distintos símbolos, del comienzo del
primero al comienzo del siguiente.
Podemos mover los símbolos independientemente del esqueleto, si mantenemos pulsada
la tecla Alt. Si hemos colocado mal un hueso, podemos seleccionarlo haciendo clic sobre
él con la herramienta de selección, y eliminarlo con la tecla Supr.
Unidad 23. Animaciones avanzadas (IX)
Crear la animación
Tanto si hemos utilizado formas, como si hemos trabajado con símbolos, veremos que se
ha creado una nueva capa, llamada Esqueleto donde se han movido todos los elementos.
Creamos un nuevo fotograma en esa capa para tener una zona sobre la que trabajar. No
es necesario que sea un fotograma clave, aunque es una buena idea si queremos que el
último movimiento coincida con el del primer fotograma. Veremos que los fotogramas con
movimiento aparecen de color verde oscuro:
Mover ahora nuestro esqueleto es tan sencillo como hacer clic en un fotograma, y
arrastrar los distintos elementos. No necesitamos crear fotogramas clave. Aunque sí
veremos que aparece un punto negro en los fotogramas en los que hemos movido el
esqueleto. Lo que hemos creado ahí es una Pose.
Al mover un hueso, el hueso del que cuelga le seguirá. Si queremos mover únicamente
un hueso por la articulación que lo une con el hueso del que cuelga, debemos hacerlo con
la tecla Shift (Mayúsculas) pulsada.
Seguimos creando poses. Si queremos duplicar una pose, podemos hacer clic derecho
sobre ella en la línea de tiempo, copiarla, y pegarla en el fotograma que queramos.
De esta forma, vamos creando todas las poses necesarias hasta que consigamos el
efecto deseado.
Y reproducimos nuestra animación:
Los huesos nos permiten dar aún más realismo. Podemos seleccionar un hueso, y
acceder a sus propiedades en el panel Propiedades.
Desde las propiedades podremos recorrer los huesos. Por defecto, los huesos tienen
activada la Union: Rotación, que permiten que roten. Podemos Restringir el ángulo de
rotación, por ejemplo para hacer que una rodilla sólo se pueda mover hacia atrás, hasta
chocar con el muslo, y no hacia delante, con los valores Min y Max.
Por defecto, los huesos tienen un tamaño fijo e invariable, pero podemos hacer que esto
cambie con los valores de Traslación.
Y como siempre, lo que está disponible en las propiedades es acceseible a través de
ActionScript, por lo que incluso podríamos crear un script que moviese nuestro esqueleto.
Aunque la cinemática inversa es una técnica que con un poco de práctica resulta sencilla,
existen otras formas de crear movimientos complejos, como puedes ver en este avanzado
.
Unidad 23. Animaciones avanzadas (X)
23.7. Rotoscopia
La rotoscopia es una técnica que utiliza un movimiento real como patrón para calcar
las imágenes de la animación. Hace años que se utiliza esta técnica, por ejemplo, en las
películas de dibujos animados para conseguir movimientos realistas al caminar.
Hay varios métodos para ejecutar esta técnica, nosotros vamos a hablar del mas sencillo
para utilizar en Flash. Un método más complejo sería colocar puntos blancos o luces en
diferentes partes del cuerpo de una persona vestida de negro y realizar una película sobre
un fondo negro para luego generar el movimiento a partir de los puntos captados.
Con una cámara de vídeo podemos grabar el efecto que queremos reproducir, por
ejemplo, una persona caminando,
Luego importaremos el vídeo al formato de Flash, pero esta vez lo haremos de forma
diferente a la que aprendimos en el tema Vídeos.
Del mismo modo deberemos hacer clic en Archivo → Importar → Importar vídeo y
seguir los pasos que aprendimos entonces, recuerda que los videos que importes deben
estar en formato FLV, si no fuera así puedes cambiarlos a este formato con la herramienta
Adobe Media Encoder que incluye Flash, sólo que en la pantalla de selección de método
de importación deberemos seleccionar Incorporar vídeo FLV en SWF y reproducir en la
línea de tiempo.
Esto hará que el vídeo se exporte de forma que lo podremos visualizar fotograma a
fotograma. Sigue el resto de opciones hasta el final y el vídeo se colocará en la línea de
tiempo.
Luego crearemos una nueva capa por encima y crearemos tantos fotogramas claves
como fotogramas de película queramos copiar. El resto es sencillo, coge un pincel y a
calcar. Cuanta más precisión consigas, más impresionantes serán los resultados.
Este proceso es muy laborioso, pero crea animaciones espectaculares.
Practica un poco y verás como no es nada complicado, te requerirá bastante paciencia,
pero la película final te valdrá la pena.
El audio se insertara junto al vídeo, cuando elimines el vídeo este se eliminara también.
Unidad 23. Animaciones avanzadas (XI)
23.8. API de dibujo. Creando dibujos con ActionScript
En este apartado aprenderemos a manejar el API de dibujo de Flash.
Su uso es muy claro y sencillo, bastará con que comprendas unas cuantas instrucciones.
Antes de empezar a dibujar deberás tener un clip donde hacerlo, para ello nos
crearemos un clip vacío:
?
1var miClip:MovieClip = new MovieClip;
Una vez creado el clip podemos pasar a dibujar sobre él.
Hacerlo es muy fácil, sólo deberás inicializar el proceso de dibujo escribiendo:
?
1miClip.graphics.beginFill(color, alfa);
Donde color indicará el color de relleno que se le aplicará al dibujo. Deberá estar en
hexadecimal, por ejemplo: 0x000000.
El parámetro alfa indicará la transparencia del relleno.
Luego nos valdremos de un par de funciones:
?
1miClip.graphics.moveTo(x, y);
Esto hace que el punto de dibujo se coloque en las coordenadas especificadas. Podemos
empezar a pintar a partir de la coordenada (100, 100), por ejemplo.
Luego nos quedará solamente dibujar líneas en el espacio que contendrán el relleno de
nuestro dibujo. Utiliza la instrucción graphics.lineTo():
?
1miClip.graphics.lineTo(x, y);
Esto hará que el punto de dibujo se desplace hasta la posición (x, y), desde donde se
creará el siguiente trazo de dibujo.
?
1miClip.graphics.beginFill(0xFF0000);
2
3miClip.graphics.moveTo(10, 10);
4miClip.graphics.lineTo(10, 100);
5miClip.graphics.lineTo(100, 100);
6miClip.graphics.lineTo(100, 10);
7miClip.graphics.lineTo(10, 10);
8miClip.graphics.endFill();
Terminamos la instrucción con graphics.endFill().
Este ejemplo dibujaría un cuadrado en la posición (10, 10). Sencillo, ¿verdad?
Unidad 23. Animaciones avanzadas (XII)
Podemos establecer el tipo de línea que rodeará al dibujo escribiendo lo siguiente:
?
miClip.graphics.lineStyle(thickness:Number,
color:uint
1alpha:Number = 1.0, pixelHinting:Boolean = false
2
scaleMode:String = "normal",
joints:String = null, miterLimit:Number = 3);
caps:String
=
0,
=
null,
Nota: Esta instrucción deberá estar colocada antes de utilizar la función beginFill(),
quedaría de esta forma:
?
miClip.graphics.lineStyle(10,
1LineScaleMode.VERTICAL,
0xFF0000,
1,
false,
CapsStyle.SQUARE,
2
JointStyle.BEVEL, 10);
3
miClip.graphics.beginFill(0xFF0000);
4
miClip.graphics.moveTo(10, 10);
5
miClip.graphics.lineTo(10, 100);
6
miClip.graphics.lineTo(100, 100);
7
miClip.graphics.lineTo(100, 10);
8
miClip.graphics.lineTo(10, 10);
9
miClip.graphics.endFill();
Ahora explicaremos en detalle los parámetros de esta instrucción:
thickness (grosor): un número de 0 a 255 que indicará el grosor del borde, en
puntos.
color: en hexadecimal, el color del borde.
alpha (alfa): nivel de transparencia del borde, de 0 a 100.
pixelHinting (trazos): valor booleano, hará que los anclajes de las líneas y curvas se
realicen de forma exacta. De este modo los trazos se dibujarán a píxeles exactos en
cualquier grosor (así no se verán líneas imprecisas).
scaleMode (escala): especifica cómo se tendrá que efectuar la escala del borde.
Sus valores pueden ser "normal", que toma el modelo predeterminado; "none", que
obliga a no cambiar nunca la escala del borde; "vertical", que no cambiará la escala
si el objeto sólo cambia su escala vertical; y "horizontal", que no cambiará la escala
si el objeto sólo cambia su escala horizontal.
caps (extremos): define cómo se dibujarán los extremos de los bordes,
joints (uniones): establece el tipo de uniones que se establecerán en el borde,
miterLimit (limiteEsquinas): un número entre 1 y 255, indica la distancia de la
esquina al trazo real,
1. Si aumentamos las coordenadas de un objeto, ¿hacia que lado se moverá?
a) Hacia arriba.
b) Hacia la derecha.
c) Hacia abajo.
2. La función clearInterval para la película los milisegundos que le indiques.
a) Verdadero.
b) Falso.
3. La instrucción setInterval repite la ejecución de la función que le indiques cada x
milisegundos.
a) Verdadero.
b) Falso.
4. Los eventos vinculados al evento ENTER_FRAME se reproducirán cada segundo.
a) Verdadero.
b) Verdadero sólo si la velocidad de la película es de 1 fps.
c) Verdadero sólo si la velocidad de la película es de 12 fps.
5. En la técnica de rotoscopia sólo hace falta que dibujemos un fotograma, el resto se
genererarán a partir de éste.
a) Verdadero.
b) Falso.
6. Cuando utilicemos la API de Flash para dibujar, podremos declarar la forma del borde
en cualquier momento.
a) Verdadero.
b) Falso.
7. En una línea de contorno, el borde ninguno y el cuadrado son iguales.
a) Verdadero.
b) Falso.
8. 1.000.000 milisegundos equivalen a:
a) 10 segundos.
b) 100 segundos.
c) 1000 segundos.
9. En la repetición de funciones con la instrucción setInterval es posible el envío de
parámetros.
a) Verdadero.
b) Falso.
