Académique Documents
Professionnel Documents
Culture Documents
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 diseos vistosos para la web, y
grficos interactivos.
Los motivos que han convertido a Flash en el programa elegido por la mayora de los
diseadores web profesionales y aficionados son varios. Veamos pues, porque es interesante
Flash Pro CS5.
Desde la web de Adobe te puedes descargar una versin de evaluacin de Flash
Professional CS5 vlida para 30 das. Esta versin 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 relacin con Adobe.
Durante mucho tiempo, Flash consigui hacer posible lo que ms se echa en falta en
Internet: Dinamismo, y con dinamismo no slo nos referimos a las animaciones, sino que
Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo
atractivo, no esttico. Con Flash podremos crear de modo fcil y rpido desde animaciones
simples para lograr algunos efectos visuales, hasta eplicaciones complejas, como juegos .
Adems sus desarrolladores estn apostando muy fuerte por ActionScript, el lenguaje de
programacin Flash. A cada versin se mejora y ofrece un abanico de posibilidades cada vez
mayor, por lo que adems de dinamismo, Flash nos ofrece la posibilidad de ser la plataforma
para aplicaciones web de un modo real.
Flash es fcil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar
horas y horas creando lo que nos dicte nuestra imaginacin, pero esto no es suficiente para
ser el preferido por los diseadores profesionales... Entonces qu es?
Adobe suele integrar todos sus productos en una suite nica en la que prima, sobre todo, la
compatibilidad entre ellos. As la compaa se desmarca del resto ofreciendo un paquete de
aplicaciones muy completas como hemos ido viendo ao tras ao, 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 ms potentes de dibujo, como
Illustrator, para crear nuestros grficos, y despus animarlos con Flash.
Vamos a ver las opciones ms destacadas que encontramos en esta ltima versin:
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 carcter y prrafo.
Se pueden aplicar efectos y atributos sobre el texto sin convertirlo a un clip de pelcula.
El texto pude fluir entre varios contenedores asociados.
Adems, podemos emplearlo para almacenar nuestro propio cdigo, y as poder reutilizarlo
cmodamente.
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 pgina web puede ser cuestionable,
aunque depende de muchas cosas. An as, no hemos de olvidar que Flash tiene muchsimas
aplicaciones ms (hecho que ha provocado que otras compaas traten de sacar a la venta
"clnicos" del Flash). Por ejemplo, se puede usar Flash para la creacin de DVDs interactivos
(como los que incluyen las revistas de informtica, entre otras), la creacin de banners
publicitarios o lo que ms est de moda ahora: la creacin de dibujos animados (os
sorprendera saber la cantidad de dibujos animados conocidos creados o animados mediante
Flash). Adems, Flash tiene uso industrial, pues se emplea para optimizar planos, crear
diseos de interiores y trabajar con imgenes vectoriales en general. No dejis de aprender a
manejar el programa con ms futuro... (al menos en cuanto a diseo web)
Aqu tenis algunas pginas 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 navegacin 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.
pero
nada
ms
lejos
de
la
realidad.
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 animacin de movimiento entre estos fotogramas. Fcil verdad?
En esta versin de Flash an se ha facilitado ms la realizacin de animaciones de
movimiento como veremos en el tema correspondiente.
2. Flash comenz siendo un programa para crear animaciones web sencillas, gifs
animados ... y con el paso de los aos se ha convertido en el software referente de creacin
de aplicaciones web interactivas.
a) Verdadero.
b) Falso.
3. Con cada versin, Flash incorpora ms funciones, lo que lo torna un programa cada vez
ms complicado y costoso de aprender.
a) Verdadero
b) Falso.
4. Flash CS5 dispone de un corrector sintctico-semntico 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.
9. Las Hojas de Estilo en Cascada (CSS) no son compatibles con Flash CS5, lo que dificulta
la integracin con el diseo de nuestra pgina.
a) Verdadero.
b) Falso.
12. Una animacin en Flash exige al autor representar todos los estados de la misma, si la
animacin 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 animacin con Flash slo exige indicar a Flash los estados lmite de la
misma, entendiendo por estado lmite aquel que marca un cambio en la animacin (en
nuestro ejemplo seran 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
animacin, nos falta indicar explcitamente a Flash que dichos fotogramas formarn una
animacin, pues Flash no es capaz de saber esto a priori.
a) Verdadero.
b) Falso.
La Barra de Mens tiene como propsito facilitar el acceso a las distintas utilidades del
programa. Es similar a la de cualquier otro programa de diseo web o grfico, aunque tiene
algunas particularidades. Veamos los principales Submens a los que se puede acceder:
Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la
utilidad Importar que inserta en la pelcula actual casi todo tipo de archivos (sonidos, vdeo,
imgenes e incluso otras pelculas Flash), o la de Configuracin de Publicacin desde
donde se pueden modificar las caractersticas de la publicacin. Tambin permite configurar la
impresin de las pginas, imprimirlas...
Edicin: Es el clsico men que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos
como fotogramas; tambin permite personalizar algunas de las opciones ms comunes del
programa.
Ver: Adems de los tpicos Zooms, te permite moverte por los fotogramas y por las
escenas. Tambin incluye la posibilidad de crear una cuadrcula y unas guas. Esto se puede
seleccionar desde los submens Cuadrcula y Guas desde donde tambin se pueden
configurar sus opciones.
Insertar: Permite insertar objetos en la pelcula, as como nuevos fotogramas, capas,
acciones, escenas...
Modificar: La opcin Transformar permite modificar los grficos existentes en la pelcula, y
la opcin Trazar Mapa de Bits convierte los grficos en mapas vectoriales (este tema se
tratar ms adelante). El resto de opciones permite modificar caractersticas de los elementos
de la animacin Suavizar, Optimizar o de la propia pelcula (Capa, Escena ...).
Texto: Sus contenidos afectan a la edicin de texto. Ms adelante se tratar en
profundidad.
la
opcin
Mostrar
Cuadrcula
para
hacerlo
visible.
9. Selecciona la opcin Ajuste Ajustar a Cuadrcula del men Ver para que los objetos
que crees se acomoden a las lneas de la cuadrcula, consiguiendo alinearlos de un
modo fcil.
1) Los Fotogramas (frames) que vienen delimitados por lneas verticales (formando
rectngulos)
2) Los Nmeros de Fotograma que permiten saber qu nmero tiene asignado cada
fotograma, cunto dura o cundo aparecer en la pelcula.
Adems, en la parte inferior hay herramientas para trabajar con Papel cebolla e
informacin sobre el Nmero de Fotograma actual (1 en la imagen), la Velocidad de los
Fotogramas (24.0 en la imagen) y el Tiempo de pelcula transcurrido (0.0s en la imagen).
A nivel conceptual, la Lnea de Tiempo representa la sucesin de Fotogramas en el
tiempo. Es decir, la pelcula Flash no ser nada ms que los fotogramas que aparecen en la
Lnea de tiempo uno detrs de otro, en el orden que establece la misma Lnea de tiempo.
Para saber ms acerca de la Lnea de Tiempo y de los distintos tipos de fotogramas que
existen visita nuestra Pgina Avanzada
2.5. El Escenario
A continuacin veremos las diferentes partes que conforman el rea de trabajo
empezaremos con la ms importante: el Escenario.
Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la pelcula 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 botn
derecho sobre cualquier parte del escenario en la que no haya ningn objeto y despus sobre
Propiedades del documento:
Aade metadatos a tus archivos para una mejor inclusin de estos en los motores de
busqueda rellenando los campos de Ttulo y Descripcin.
Dimensiones: Determinan el tamao de la pelcula. El tamao mnimo es de 1 x 1 px
(pxeles) y el mximo de 2880 x 2880 px.
Unidades de Regla: Unidad que se emplear para medir las cantidades.
Coincidir: Provocan que el tamao de la pelcula coincida con el botn seleccionado
(tamao 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 pelcula.
Veloc. Fotogramas: O nmero de fotogramas por segundo que aparecern en la pelcula.
Para cambiar este nmero, arrastra con el cursor hacia la derecha o izquierda.
Transformar en predeterminado: Este botn 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 podrn 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 pelcula
La Herramienta Zoom
permitiendo abarcar ms o menos zona del Entorno de Trabajo. Cada vez que hagamos clic
en con el Zoom duplicaremos el porcentaje indicado en el desplegable Zooms.
Ahora slo bastar darle un nombre a la disposicin y ser accesible desde el mismo
elemento de men Espacio de trabajo en cualquier momento.
Todos los paneles se estudiarn en profundidad a lo largo del curso. An as, vamos a
nombrarlos y a resumir las funciones de la mayora de ellos.
Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy til.
Panel Color: Mediante este panel creamos los colores que ms nos gusten.
Panel Muestras: Nos permite seleccionar un color de modo rpido y grfico. (Incluidas
nuestras creaciones).
Panel Informacin: Muestra el tamao y las coordenadas de los objetos seleccionados,
permitindonos modificarlas. Muy til para alineaciones exactas.
Panel Escena: Modifica los atributos de las escenas que usemos.
Si an no sabes lo que son las Escenas, te lo explicamos en nuestro tema bsico
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?
1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento.
2. En Veloc. Fotogramas escribe 14 fps.
El resultado debe ser un rectngulo rojo con las medidas propuestas.
4. Les cambiamos los nombres haciendo doble clic en sus nombres actuales
Ahora falta crear el nmero de capas pedido.
1. Seleccionamos la Escena E1 en el Panel Escena
2. Creamos otra capa ms, pulsando el signo
en la lnea 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 debera quedar as:
Y as las Capas:
Fijmonos en que no estn 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 5: Paneles
1. Abrimos el Men Ventana.
Herramienta Pluma:
sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las ms
potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos
definir como vrtices de los polgonos, lo que nos asegura una gran precisin. Para crear
curvas, hay que sealar los puntos que la delimitan y posteriormente trazar las tangentes a
ellas. Con un poco de prctica se acaba dominando.
Herramienta Subseleccin:
Pluma, ya que permite mover o ajustar los vrtices que componen los objetos creados con
dicha herramienta.
Herramienta Bote de Tinta:
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:
es decir, para que en caso de ser posible, sus bordes se superpongan, dando la sensacin de
estar "unidos".
Suavizar:
Enderezar:
rectilneos.
El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y
para seleccionar los que ms nos gusten.
Para seleccionar un color determinado, bastar con hacer clic en las pestaas que se
encuentran junto a los iconos de las herramientas de Lpiz y de Bote de Pintura. (Si
queremos modificar el color de un borde, pulsaremos sobre el color que est junto al lpiz
y si queremos modificar un relleno, haremos clic en el color que est junto al bote de
pintura
seleccionemos el que ms nos gusta. Tambin permite introducir el cdigo del color segn el
estndar.
En vez de este selector rpido, 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:
Slido: 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
pelcula (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.
El Panel Muestras sirve para poder ver de un modo rpido y claro los colores de que
disponemos, tanto slidos (un solo color) como degradados (lineales o radiales). Adems,
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 rpidamente cada vez que
trabajemos con nuestra pelcula.
Cada pelcula tiene su propio conjunto de muestras y cada vez que la abramos para
editarla, podremos usar las muestras que tenamos la ltima vez que trabajamos con dicha
pelcula.
Para practicar el manejo de este panel, te aconsejamos realizar el ejercicio paso a paso
Colorear un valo
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
Ejercicio 2: Saturno
Vamos a dibujar un planeta parecido a Saturno
6. Pulsamos en
y seleccionamos los colores que
deseemos, (podemos aadir 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 seleccionndola de forma rectangular y pulsando la
tecla Suprimir tal y como vimos en el paso 3.
2. Flash CS5 trabaja con colores puros de alta definicin, lo que imposibilita su mezcla y por
tanto el uso de ms de 256 colores.
a) Verdadero
b) Falso
3. Flash dispone del efecto Alfa, que aade transparencia a los colores. Efecto muy atractivo
y vistoso.
a) Verdadero
b) Falso
4. Las herramientas
y
tienen la misma funcin, salvo que la primera se emplea para
objetos coloreados y la segunda para objetos sin color.
a) Verdadero
b) Falso
6. La herramienta Cubo de pintura se emplea nicamente para dar color al fondo de las
pelculas.
a) Verdadero
b) Falso
7. El Panel de colores se emplea para crear nuestros propios colores, mezclarlos a nuestro
gusto y aadirles efectos tales como el Alfa.
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 pelcula.
a) Verdadero
b) Falso
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 tamao del rea. En cualquier caso, siempre podemos convertir
un Texto de puntos en rea simplemente cambiando su tamao, estirando de los controles de
transformacin que se muestran alrededor.
Para saber ms acerca de Cmo escribir textos visita nuestra pgina avanzada
Tras hacer clic con la Herramienta Texto en cualquier parte del fotograma actual, nos
aparecer algo as:
pelcula final no se ver, pero nos servir para localizar ms fcilmente el texto y para moverlo
o cambiar su tamao. Finalmente, el crculo que hay arriba a la derecha significa que el
recuadro del texto se expandir segn vayamos escribiendo y tambin el texto. Esto es, todo
lo que escribamos, estar en la misma lnea.
Si escribimos en el recuadro creado por defecto vemos como se alarga el recuadro que lo
contiene. Para cambiar de lnea, sera necesario pulsar la tecla Enter (Intro).
Si por otra parte, queremos delimitar lo que va a ocupar nuestro texto (cosa bastante
comn, acercaremos el cursor del ratn al borde del recuadro de texto, segn donde lo
acerquemos, se transformar en un smbolo o en otro.
Si lo acercamos al borde del recuadro, se le aadir debajo de la flecha una flecha
pequea de 4 direcciones como la que muestra la figura y que nos indica que podemos mover
el texto:
Con el cursor convertido en flecha de "ensanchamiento", podemos estirar los lmites del
recuadro de texto, y adems, el crculo que apareca en el margen superior derecho, se
convierte en un cuadrado. Este cuadrado significa que los lmites del recuadro de texto han
quedado fijados, y que al insertar ms texto, se producir un salto de lnea en lugar de
ensanchar el recuadro de texto. Este sera su comportamiento al introducir texto:
Si quisiramos, (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 crculo y su comportamiento ser el descrito al
principio de esta pgina.
Observars que las imgenes 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
ms opciones. La de la derecha tiene establecido el motor Texto clsico, y aparecen menos
opciones, las que venamos encontrando en la anterior versin del programa.
Si quieres saber cmo utilizar el texto clsico, 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, debers
de emplear el motor clsico.
Veamos las principales opciones del panel Propiedades, comunes a ambos motores. Otras
ms especficas las veremos ms adelante, cuando vayamos a emplearlas:
Podemos elegir cmo se comporta el texto: Si es Seleccionable, y el usuario lo podr
seleccionar y copiar en el portapapeles, Slo lectura, lo que impedir que lo pueda
seleccionar, o si lo puede cambiar (Editable), por ejemplo, para introducir datos.
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. Tambin se muestran los valores del ancho (AN) y alto (AL) del texto.
Carcter. En esta seccin encontramos las opciones tpicas del texto:
Familia:
los editores de texto ms comunes podemos seleccionar el tipo de letra o "fuente" que mejor
se ajuste a nuestro diseo.
Estilo: Nos permiten la combinacin de los dos estilos de texto habituales: texto normal
(Regular), en cursiva (Italic), negrita (Bold) o negrita cursiva (Bold Italic).
Ajuste automtico: Activar esta casilla provoca que la separacin entre caracteres se
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, superndice y subndice.
Carcter avanzado:
Vnculo: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una direccin
web, nada ms fcil que escribirla ah. Flash la asociar al texto que ests 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 ...
Adems, en esta seccin podemos especificar cmo se comporta el texto Por ejemplo, que
se muestre en maysculas, los saltos, etc...
Todas las lneas empezarn tan a la izquierda como sea posible (dentro
prrafo.
A la derecha:
Todas las lneas empezarn tan a la derecha como sea posible dentro
"dentado" por ninguno de sus lmites. Las diferentes opciones se refieren a la ltima lnea del
texto, que suele ser ms corta que el resto.
El resto de opciones nos permiten determinar los mrgenes (izquierdo y derecho), los
sangrados de prrafo y el espacio interlineal.
El relleno (padding) permite crear una separacin entre los bordes del contenedor y el
texto.
Adems, podemos asignar un color de relleno y borde al contenedor.
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 smbolo
. 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 practicar lo que hemos visto, te aconsejamos realizar el ejercicio paso a paso Crear
un flujo de texto.
De esta forma nos aseguramos que nuestro proyecto se ver tal cual lo creamos.
en el Panel de Propiedades.
7. Haz clic sobre el control de Tamao y arrstralo 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
grficas.
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 ms propias de CSS que de HTML, como por
ejemplo, sangrados de prrafo, espacios entre caracteres...
a) Verdadero
b) Falso
animacin.
b) Los Textos de punto pueden convertirse a Textos de rea solo con cambiar su
tamao.
c) Los Textos de rea se pueden dividir en columnas.
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.
10. Para que el texto animado se vea lo mejor posible, debemos de suavizarlo para
legibilidad.
a) Verdadero
b) Falso
Quin sera capaz de ver una pelcula muda? Y una animacin espectacular sin sonido?
Hasta hace poco, los nicos sonidos que oamos en las pginas web eran los famosos
"midis", de escaso tamao y de escasa calidad. De hecho, eran slo instrumentos musicales
sin voz, de ah su pequeo tamao (y calidad). An as, siempre exista algn creador de
pginas web que se aventuraba a poner algn sonido complejo (.wav o .mp3) en su pgina
web, por desgracia, su carga es tan lenta, que la mayora de los visitantes se iran de la
pgina sin llegar a escucharla.
Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner
sonido a las pginas web es un poco ms fcil, qu aporta Flash?
Flash nos permite insertar cualquier sonido que queramos en nuestras pelculas (.wav,
.aiff, .mp3, etc...) de forma fcil y muy efectiva, ya que es capaz de acelerar la descarga del
sonido siempre y cuando se descargue junto con nuestra pelcula.
Podemos dar a la pelcula efectos simples (el tpico "clic" al pulsar un botn), efectos
complejos (msica de fondo) e incluso podemos hacer que la animacin se desarrolle
conjuntamente con una msica (si bien esto ltimo necesitara que toda la pelcula estuviera
descargada previamente, para evitar "atascos" durante el desarrollo de la animacin). En
definitiva, Flash nos lo vuelve a poner fcil.
Pero hemos de tener cuidado al incluir sonidos, sobre todo si son melodas. Es preferible
que sea el usuario quien las active a travs de un botn, o si es necesario que se reproduzcan
automticamente, tener un control fcilmente localizable para silenciarlo.
Utilizar sonidos externos. Podemos insertar en una pelcula de Flash sonidos que
tengamos en formato digital: grabados por nosotros mismos, descargados de internet,
etc...Pero para que est disponible en nuestra pelcula y podamos usarlo, antes debemos de
importarlo.
Realmente debemos de importar a flash cualquier archivo externo que queramos usar:
sonidos, grficos, e incluso con otras pelculas Flash. Importar por tanto, no es ms que
decirle a Flash que aada un determinado archivo a nuestra pelcula, para que podamos
usarlo cuando queramos. En realidad, lo aade a nuestra Biblioteca, que es el Panel en el
que estn todos los objetos que participan en la pelcula (este panel se ver ms adelante).
As pues si queremos manejar un sonido en nuestra pelcula, 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.
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 travs del men Ventana
Bibliotecas comunes Sonidos. Se abrir un panel como el siguiente:
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 ningn 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:
Efecto: Desde aqu podremos aadir algn efecto a nuestro sonido, como por ejemplo
que el sonido pase del canal izquierdo al derecho (esto crea la sensacin 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 aadir complejos efectos sonoros, deberemos tratar adecuadamente el sonido con
algn programa creado especficamente para este propsito antes de importarlo.
En el punto Editar Sonidos se tratar en ms profundidad estos efectos.
Sinc: Esta opcin 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 opcin por defecto
y provoca que el sonido se empiece a reproducir al pasar la pelcula por el fotograma en
el que est situado. Tambin se puede sincronizar el sonido con botones y los dems
tipos de smbolos. 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 opcin sincroniza el sonido con el o los objetos con los que est asociado,
por tanto, si la carga de la pelcula es lenta y las imgenes no fluyen adecuadamente, el
sonido se detendr para sincronizarse con ellas. Este efecto puede dar la sensacin de
que la pelcula 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 reaccin muy negativa en los que pueden estar viendo nuestra pelcula).
Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el
efecto de que un personaje hable durante una pelcula. En esta situacin, es muy
recomendable que el sonido y las imgenes estn sincronizadas.
Repetir: Determina el nmero de veces que se reproducir el sonido segn lo indiques
de la derecha. Tambin 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 opcin Flujo y a la vez la de Repetir, ya que al
estar sincronizados los sonidos con las imgenes, provocaramos que las imgenes (y los
fotogramas que las contengan) se dupliquen tambin, aumentando considerablemente el
tamao de la pelcula.
Para practicar la insercin de sonidos realiza el Ejercicio paso a paso Trabajar con
sonidos
Como ya se ha comentado, los sonidos que Flash CS5 puede importar casi cualquier tipo
de sonido, aunque los ms empelados son MP3 y WAV. Si no sabes las diferencias entre
estos tipos de archivos, puedes consultar nuestro tema bsico
Por tanto, cuando queramos aadir un sonido a nuestra pelcula, 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 extensin .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 Cul es mejor?
Esta pregunta es ms importante de lo que parece, ya que si decidimos que nuestra
pelcula tenga sonidos, deberemos asumir una carga muy importante en cuanto a tamao de
la pelcula y en consecuencia en cuanto a tiempo de descarga. Lo habitual es que los sonidos
ocupen ms de la mitad del espacio total y muchas veces no valdr la pena insertarlos...
Una vez decididos a insertar el sonido, la lgica 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
pelcula. Esto es una aproximacin, ya que Flash comprime todo aquello que insertamos en
nuestras pelculas.
Como ya sabemos, los sonidos .mp3 ocupan un espacio mucho menor que los sonidos
.wav (10 veces menos o ms), 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 extensin .mp3, podr Flash volver a comprimirlo? La
respuesta es NO. Flash comprime los sonidos que insertamos en nuestras pelculas, 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 ms de lo
que comprime el formato .mp3, para ver bien este aspecto, hemos preparado varios
ejemplos...
Ejemplo:
Contamos con una pelcula con un nico frame que est vaco. Esta pelcula, 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 prcticamente idntica).
Ahora insertamos el sonido .wav en la pelcula original y la exportamos (esto se trata en el
ltimo tema).
Resultado: Una pelcula con sonido (pelcula 1) que ocupa 37KB.
Insertamos despus el sonido .mp3 en la pelcula original.
Msica de Fondo
Pelcula con sonido (msica) en formato .wav. Pelcula con sonido (msica) en formato .mp3.
Tamao
Total:
37
KB.
Tamao
Total:
145
KB.
Calidad: Buena
Calidad: Buena
Sonido "Voz"
(voz)
en
67KB.
.mp3.
Por ltimo, comentar que Flash no puede importar sonidos en formato MIDI (.mid). An as,
si estamos empeados en que en nuestra animacin 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 dinmico (sin que
ocupen espacio), esto se tratar en el Tema 17 "Action Script".
3. Imprtalo a tu pelcula.
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 combinacin de teclas te permite "probar" la pelcula).
7. Consigue que el sonido deje de escucharse al llegar la pelcula al fotograma 5.
8. Consigue que vuelva a escucharse en el fotograma 10, y se reproduzca todo el sonido.
Lnea
de
Tiempo
Fotograma).
usaremos uno u otro en funcin de ciertos parmetros tales como el tamao, 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 prdida de calidad.
a) Verdadero
b) Falso
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
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 estn seleccionadas.
Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos
oportunas, veamos cmo colocarlos en el Escenario.
Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposicin
el Panel Alinear. Este Panel lo podemos encontrar en el Men Ventana Alinear. As
funciona:
El Panel Alinear permite colocar los objetos tal y cmo le indiquemos. Antes de ver las
posibilidades, debemos hacer hincapi en la opcin Alinear en escenario. Esta opcin nos
permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen
como referencia el escenario.
Si esta opcin no est seleccionada, los objetos toman como referencia al conjunto de
objetos en el que se encuentran, y se colocan en funcin de ellos. Lo ms habitual es
seleccionar En Escenario, para que los objetos se coloquen segn los lmites de la pelcula,
en el centro del fotograma etc...
Conozcamos un poco mejor el Panel Alinear y sus posibilidades:
Alineamiento:
posicin 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 quisiramos situar un objeto en la esquina
inferior izquierda, bastara pulsar el primer y el sexto botn consecutivamente.
Por ejemplo, si queremos que coincida el centro de dos objetos los alineamos al centro
horizontal y verticalmente.
Distribuir:
de unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribucin de los
mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botn de la
izquierda. Cada uno de los 2 cuadrados se situar en un extremo de la pelcula (uno arriba y
otro abajo).
Coincidir Tamao:
activo Alinear en escenario estirar los objetos hasta que coincidan con el ancho y el largo
de la pelcula. Si no est activo, la referencia ser el resto de objetos. Por ejemplo, si tenemos
2 cuadrados distintos y la opcin Alinear en escenario no est activada, al hacer clic en el
primer botn de "Coincidir Tamao", el cuadrado ms estrecho pasar a tener la anchura del
cuadrado ms ancho. Si Alinear en escenario hubiera estado activo ambos cuadrados
hubieran pasado a tener el ancho del fotograma.
Espacio:
Para ver ejemplos de uso de estos comandos, podis ver la animacin situada arriba al
principio del captulo.
nuestro objeto en la medida seleccionada en las Propiedades del documento. AN: hace
referencia a la anchura y AL: a la altura.
Situacin del objeto:
Color Actual:
algo en la pelcula al pasar el cursor justo por una posicin determinada o para situar partes
del objeto en lugares especficos.
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, ahorrndonos 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 tamao de los coches.
Podemos aumentar el tamao de los coches de uno en uno, corriendo el riesgo de aumentar
unos ms que otros y perdiendo las proporciones entre ellos, o podemos formar un grupo con
los coches y aumentar el tamao del grupo, de modo que aumenten todos de tamao a la vez
y en la misma proporcin. De igual modo, podemos mover al grupo de posicin, hacer que
gire...
Ejercicio 2: Selecciones
1. Dibuja 5 valos. Dales el color de relleno y borde que quieras (elige un relleno que no
sea transparente
Ejercicio 4: Grupos
1. Agrupa los 4 objetos del ejercicio anterior en un nico grupo.
2. Cambia su posicin (colcalos, por ejemplo, en el centro de la pelcula).
3. Desagrpalos.
4. Si no tienes muy claro cmo realizarlo, Aqu te ayudamos.
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
rectngulo) y dibujamos 5 valos.
2. Hacemos doble clic en el relleno del primer crculo (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 crculos
cualesquiera.
Ahora hacemos lo mismo usando la Herramienta Seleccin (Flecha), como pide el
segundo apartado.
1. Hacemos clic en una zona del escenario que nos permita capturar 3 crculos.
2. Arrastramos el ratn hasta crear un rea que envuelva completamente a 3 de los 5
crculos.
3. Si quedara alguna parte del crculo fuera de la seleccin, basta con usar la tecla SHIFT
para aadirlo a la seleccin actual.
Ahora se nos pide seleccionar nicamente los bordes de 3 de ellos.
1. Hacemos clic en el borde del primer valo (si hiciramos 2 clics se seleccionaran todos
los bordes del mismo color que estn en contacto con el borde sobre el que hacemos
clic).
5. Hacemos clic en
para situarlo en el borde superior de la pelcula. 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
.
7. Para alinear el tercer objeto en la esquina inferior izquierda hacemos clic en
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 ningn panel en Flash para alinear objetos, hay que hacerlo "a mano".
a) Verdadero
b) Falso
quedar agrupados.
c) Agrupar objetos sirve, por ejemplo, para mover varios objetos de una sla vez
12. La opcin 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 Informacin 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, segn la referencia del
escenario o la de otros objetos.
a) Verdadero
b) Falso
Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las
Capas que utiliza Flash, y la mayora 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 Lnea de Tiempo y por tanto, sus distintos fotogramas se reproducirn
simultneamente.
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 portera de ftbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de un
portero (del 5 en adelante estn vacos).
Pues bien, esta pelcula nos mostrar inicialmente (durante el tiempo que duren los
primeros 5 fotogramas) la portera con el portero, para despus (durante los fotogramas del 5
al 10) mostrar la portera sin portero.
De este modo la portera es independiente del portero, y podemos tratar estos objetos con
total libertad, ya que no interfieren entre ellos para nada.
Otra razn para separar los objetos en capas, es que Flash nos obliga a colocar cada
animacin distinta en una capa. De lo contrario, todos los objetos que se encuentren en
dicha capa formarn parte de la animacin. Si queremos que un objeto no forme parte de una
animacin, deberemos quitarlo de la capa en la que se produce dicha animacin.
Siguiendo con el ejemplo del portero, si quisiramos crear un movimiento que haga que el
portero se desplace hacia un lado no hay ningn inconveniente, pero si la portera estuviera
en la misma capa que el portero, entonces ambos objetos se moveran hacia dicho lado, con
lo que resultara imposible que slo se moviera el portero. La solucin es separar los objetos
en 2 capas, como ya hemos hecho.
Las capas adems, tienen otras utilidades, nos permiten ordenar nuestra pelcula de forma
lgica, y nos ayudan en la edicin de dibujos (evitando que se "fundan" en uno slo, o
bloqueando el resto de capas de modo que slo podamos seleccionar la capa que nos
interese).
Otro motivo es para organizar mejor nuestro contenido. Igual que crebamos una capa
para los elementos de audio, crearemos capas para otros elementos, como el cdigo
ActionScript.
La vista estndar de una capa es la que muestra la imagen. Veamos para qu sirven los
distintos botones y cmo 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 vern los distintos tipos de capas).
Crear carpeta
: Nos sirve para crear carpetas, que nos ayudarn a organizar nuestras
capas.
Borrar Capa
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
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 ms
de menor importancia.
Aqu puedes cambiar diferentes opciones sobre la capa, como su nombre o su color.
Tambin puedes bloquearla u ocultarla.
Pero haremos especial hincapi en la opcin Tipo cuyas opciones, Gua y Mscara,
veremos ms adelante en el curso.
pelcula. Es muy til cuando tenemos muchas capas y slo queremos ver una de ellas ya que
permite ocultar todas a la vez, para despus mostrar slo 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
contenidos de todas las capas como si slo estuviesen formados por bordes. De este modo y
ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma fcil y
podremos ver en qu capa est cada uno de ellos.
Tambin se puede activar o desactivar para cada capa de un modo similar a los anteriores
botones.
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 opcin, lo mismo sucede con el botn Bloquear capas. En la columna
Mostrar capas como contornos aparece un cuadrado con relleno, lo que simboliza que los
objetos se mostrarn completos y no slo 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 opcin.
Adems, 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 podis ver cmo queda un objeto en funcin de tener activada o no la opcin
contorno:
Como ya se ha comentado, las distintas capas tienen muchas cosas en comn unas con
otras. Lo primero y principal es la Lnea de tiempo, todas las capas de una misma escena
comparten la misma lnea de tiempos y por tanto, los objetos de todos los fotogramas 1 de
todas las capas se vern al mismo tiempo en la pelcula superpuestos unos sobre otros. y
qu objeto est delante de los dems? Pues este criterio viene dado por la colocacin de las
Capas en la pelcula. Los objetos que se mostrarn delante de todos los dems sern
aquellos que se encuentren en la capa situada ms arriba.
Es decir, si nos fijamos en el ejemplo anterior:
El portero aparece delante de la portera, porque la capa "Portero" est situada encima de
la capa "Portera", como puede apreciarse en la imagen. Si quisiramos cambiar esta
distribucin, basta con hacer clic en la capa que queramos mover y arrastrarla hacia arriba o
hacia abajo hasta la posicin deseada.
Veremos como los objetos se colocan delante o detrs de los de la capa seleccionada
segn 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. Tambin se puede Copiar el fotograma y
luego pegarlo en la capa de destino.
Capas normales
: Son las capas por defecto de Flash y tienen todas las propiedades
descritas en los puntos anteriores. Son las ms usadas y se emplean para todo, colocar
objetos, sonidos, acciones, ayudas...
Capas animacin movimiento
interpolacin de movimiento.
Capas Gua
animaciones de movimiento de objetos y su nico fin es marcar la trayectoria que debe seguir
dicho objeto. Debido a que su misin es representar la trayectoria de un objeto animado, su
contenido suele ser una lnea (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 lnea curva. La segunda capa la hemos definido como Capa
Gua, para que al realizar la animacin de movimiento (esto lo veremos en un tema posterior)
su contenido no se vea en la pelcula, sino que sirva de recorrido para la bola azul.
Es importante recordar que el contenido de las Capas Gua no se ver en la pelcula final.
Su efecto har que la pelota azul se desplace de un extremo de la lnea al otro siguiendo esa
ruta.
Capas guiadas (Guided Layers) : Definir una capa como gua no tiene sentido hasta
que definamos tambin una capa guiada. Esto es, una capa que quedar afectada por la
gua definida en la Capa gua.
Si no definimos una capa guiada, la capa gua no tendr ningn efecto y si bien no se ver
en la pelcula (por ser una capa gua) tampoco provocar ningn efecto en las dems 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 gua.
Las capas gua y las capas guiadas se relacionan entre s de un modo evidente. A cada
capa gua le corresponden una serie de capas guiadas.
Al asociar una capa gua con una capa guiada, el icono que representa a la capa gua
cambia, indicndonos que est realizando correctamente su labor.
En la imagen podemos ver un ejemplo de capa gua y capa guiada correctamente
asociadas entre s. (La capa llamada inferior es, evidentemente, la capa con Gua)
El funcionamiento de las Capas Gua y sus utilidades lo veremos a fondo en el tema de las
Animaciones
Capas Mscara
: Estas capas se pueden ver como plantillas que tapan a las capas
Capas Enmascaradas
que son las capas que estn bajo las mscaras y a las que afectan. Al igual que las capas
gua y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto.
Sus objetos s que son visibles en la pelcula final, pero slo cuando algn objeto de la capa
Mscara est sobre ellos.
Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los rectngulos
azules forman parte de la Capa Enmascarada y por tanto se vern en la pelcula final (pero
slo lo que tape la capa mscara). El valo rojo est situado en la capa Mscara y no se ver
en la pelcula, pero slo se ver lo que l "tape", que es lo que se ve en la imagen de la
derecha. As se emplean las mscaras...
2. Haz doble clic sobre el nombre de la capa que se encuentre ms abajo. Cmbialo por
Planeta.
3. Haz doble clic sobre el smbolo
Mscara y dale el tipo Mscara.
6. Selecciona la capa Aros y dibuja un crculo perfecto, rellenndolo con un degradado con
varias paradas (profundizaremos en los degradados ms adelante).
7. Selecciona el crculo que har de aro, y con la herramienta Transformacin 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 Mscara y con la herramienta pincel pinta sobre el Escenario
para tapar la forma ovalada de los aros de modo que slo pintes lo que quieras que se
muestre. Es decir, bastara con no pintar la parte que quedara detrs del planeta.
Aqu puedes ver un ejemplo de cmo quedara:
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 opcin Mostrar contornos de una capa, podremos ver los bordes de todos
los objetos de dicha capa como si fuesen 3 veces ms grandes, ayudndonos a
distinguirlos entre el resto de capas (suponiendo que dicha opcin est inicialmente
desactivada).
a) Verdadero
b) Falso
4. Si activamos la opcin Bloquear capas de una capa, se nos garantiza que ningn objeto
de los que estn situados en dicha capa podr sufrir alteracin alguna (suponiendo que
dicha opcin est inicialmente desactivada).
a) Verdadero
b) Falso
5. Cmo deberamos organizar las capas de nuestra pelcula si queremos que dos objetos
se muevan sincronizadamente realizando el mismo movimiento?
a) Separando los objetos en dos capas diferentes.
b) Situndolos en la misma capa conseguiramos nuestro propsito de manera
rpida y eficaz.
c) Ambas respuestas son correctas.
d) Ninguna de las anteriores.
6. Qu sucedera si creamos una capa gua, pero ninguna capa guiada asociada a la misma.
a) Que no habra ningn problema, pues una misma capa puede servir como gua
8. Qu sucedera si quisiramos asociar una capa gua con varias capas guiadas
a) Que no habra ningn problema, pues una misma capa puede servir como gua
rpida y eficaz.
b) Si las animaciones deben producirse en instantes de tiempo comunes, sera
necesaria separar los objetos en dos capas diferentes. Si las animaciones pueden producirse
en instantes de tiempo disjuntos (que no coincidan en ningn instante) entonces podran estar
ambos objetos en la misma capa.
c) Deberamos separar los dos objetos en capas diferentes, pues de lo contrario
sera imposible que los objetos realizasen movimientos distintos durante los mismos instantes
de tiempo. Para sincronizar los movimientos podramos convertir un objeto en un grfico o en
un clip de pelcula, en funcin de nuestras necesidades
La accin de crear un nuevo smbolo es una de las ms usadas en Flash ya que es uno de
los primeros pasos para crear una animacin, como veremos ms adelante.
El procedimiento es el siguiente:
1. Seleccionamos el o los objetos que queramos convertir en un smbolo. Lo ms habitual
es partir de una forma.
2. Abrimos a la ventana Convertir en smbolo, accediendo al men Insertar Nuevo
Smbolo, desde el men contextual eligiendo Convertir en smbolo, 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 smbolo que vamos a crear, y que nos permitir
4. Slo nos queda seleccionar el tipo de smbolo (desplegable Tipo) al que queremos
convertir nuestro objeto. Podemos elegir entre Clip de Pelcula, Botn y Grfico. Sus
caractersticas y las diferencias entre ellos las veremos en temas posteriores. Lo ms
habitual es Clips de pelcula para los objetos que queremos mostrar en el escenario, y
Botn si queremos que acte como tal.
5. Bastar con pulsar Aceptar para tener nuestro smbolo creado.
Insertar
una
Nuevo
ventana
Smbolo... de
como
la
la
barra de
de
la
mens.
figura.
Tipo de la instancia. Por defecto se nos muestra el tipo al que perteneca el smbolo
original pero nosotros podemos cambiarlo para que cambie su comportamiento, aunque
pueda seguir manteniendo su estructura inicial (en la imagen es Botn).
Smbolo de la Instancia seleccionada (Instancia de:). Esta opcin nos muestra el
smbolo raz del que proviene la instancia que estamos modificando.
Intercambiar: Esta opcin merece especial atencin, pues es muy til y nos ahorrar
mucho trabajo cuando sea necesaria emplearla. Su funcin consiste en cambiar el
smbolo de la instancia por cualquier otro que tengamos en nuestra Biblioteca, por lo que
la instancia tomar el aspecto del nuevo smbolo. Puede parecer simple, pero durante el
desarrollo de un trabajo profesional rpidamente surge la necesidad de probar
situaciones y los diseos grficos definitivos no suelen estar disponibles hasta bien
avanzado
el
proyecto.
Gracias a esta opcin podemos trabajar tranquilamente con un "boceto" y sustituirlo de
un modo efectivo (el nuevo smbolo hereda las propiedades del antiguo smbolo, incluido
el nombre de instancia, las acciones que le afectarn, efectos grficos etc...) cuando
llegue
el
momento.
En la imagen se puede observar el panel Intercambiar Smbolo.
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 grfico de la derecha se puede observar la pestaa Estilo: del
Panel Propiedades.
Hay varios tipos de efectos. Si el smbolo se acaba de crear o si no tiene efecto asignado
aparecer en la pestaa Ninguno.
En el siguiente apartado comentamos los distintos efectos aplicables a una instancia.
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.
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 translcido 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
smbolo, pero que el smbolo original sigue intacto.
2. Las Bibliotecas Comunes de Flash aparecen desde la primera vez que abrimos el
programa.
a) Verdadero
b) Falso
5. Cul es cierta?
a) La Biblioteca nos permite guardar copias de todas las instancias que tengamos,
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
8. Todos los smbolos que incluyamos o podamos encontrar en nuestras pelculas sern de
estos tres tipos: Clip de pelcula, Grfico y Botn.
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
Grfico esttico
a) Estticos: estos grficos se mantienen sin cambios cuando pasa el tiempo. Estos
grficos son los tpicos en los fondos y en los objetos que no desempean ninguna funcin
especial. Su tamao y por tanto, el tiempo de carga de este tipo de grficos, aunque siempre
depender de la resolucin, de sus dimensiones y de la forma en la que estn creados *, ser
en general reducido.
Animacin
b) Animaciones: este tipo de grfico vara su forma, posicin u otras propiedades a
medida que va pasando el tiempo. Puesto que para realizar la animacin se deben usar varios
grficos ms adems del original o bien realizar determinadas acciones que modifiquen el
estado inicial, el tamao de esta clase de grficos, para las mismas dimensiones y forma de
creacin, ser mucho mayor que uno esttico.
Por esto, aunque las animaciones dan a nuestra web un aspecto ms 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 tamao excesivamente grande.
2) Aunque no se traten de mapas de bits, por ejemplo, si son animaciones
tpicas de Flash, cuyo tamao no es excesivo, el hecho de poner muchas
animaciones puede llegar a "marear" un poco al visitante de nuestro sitio y
desviar su atencin de lo que realmente importa, su contenido.
(*) Los tipos de grfico anteriores pueden ser, a su vez de dos tipos, segn la forma en la
que estn creados: Grfico Vectorial o Mapa de Bits. Para saber ms acerca de estos dos
tipos de grfico, chale un vistazo a nuestro tema bsico
La informacin que almacenan estas matrices son las caractersticas de cada pixel. Las
caractersticas que se almacenan sobre los pixels son sus coordenadas dentro del grfico y
su color.
As, nuestro PC procesa esa informacin, 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 ms pequeas que forman una imagen, no son
apreciables a simple vista en una imagen de calidad, pero s con una ampliacin.
Los pixels no tienen siempre el mismo tamao ni se tienen porque encontrar en mismo
nmero en imgenes de las mismas dimensiones. La calidad de una imagen viene dada por
nmero de pixels en que dividamos una imagen (normalmente esto se mide en puntos por
pulgada o dpi, de hecho una cmara digital tiene mayor resolucin cuantos ms megapxel
puede capturar) y el nmero de colores que puedan tener y, evidentemente, ocuparn ms
espacio en disco en la medida que dicha calidad aumente. Como consecuencia de esto
aquellos grficos con ms calidad y nmero de pixels sern mucho ms costosos de
reproducir y transformar para nuestra aplicacin o reproductor grfico y ms lentos en la
descarga va web.
Entre los tipos de archivo de mapa de bits ms 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 grfico de mapa de bits, nuestro PC tiene que
almacenar y trabajar con una gran cantidad de informacin por la necesidad de mantener los
datos de cada pixel.
Sin embargo, para representar una imagen vectorial se considera que el grfico est
formado por un conjunto de vectores o lneas.
Esto es una gran ventaja, ya que una lnea, que en el caso de un bitmap estara compuesta
por muchos pixels, en una imagen vectorial solo se necesita almacenar informacin sobre su
principio, su final y su aspecto. Esto es as con las lneas y con cualquier figura ms compleja.
Por ejemplo, podramos representar un crculo simplemente guardando la informacin de su
centro y su radio, adems de indicar el color de contorno y el de fondo. Aqu reside el secreto
del reducido tamao de los grficos de este tipo.
Adems, si aumentamos el tamao de la imagen, slo hay que volver a generarla a partir
de sus coordenadas, lo que la mostrar perfectamente ntida por mucho que la aumentemos.
comprobar las propiedades que hemos comentado en el primer apartado del tema. Para ello,
abre una nueva pelcula Flash (Archivo Nuevo, archivo ActionScript 3).
Ahora tenemos que crear el objeto que queremos convertir en un smbolo Grfico.
Dibujemos, por ejemplo, un valo en cualquier lugar del rea de trabajo con la herramienta
valo
que despus animemos (Selecciona el fondo del valo y dale el color azul mediante la
herramienta Relleno de color.
).
Ahora vamos a crear la animacin del grfico. Puesto que todava no hemos visto a fondo
las animaciones, la vamos a realizar de una forma que quiz no sera la ms apropiada la
mayora de las veces, pero nos servir muy bien para este ejemplo. Para ello selecciona
nuestro grfico y pulsa el botn derecho del ratn. Se desplegar un men, en el que
seleccionaremos la opcin Edicin para modificar el grfico y acceder a su lnea de tiempo.
Comprueba que ests en la lnea de tiempos del grfico (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 - Grfico Animado" y, por tanto estamos dentro
del grfico (y la lnea de tiempos que vemos es la del grfico, y no la de la pelcula principal)
Crearemos a continuacin nuevos fotogramas clave seleccionando uno a uno los frames
nmero 2, 3 y 4 y pulsando F6 cuando los seleccionemos.
Pulsa sobre el frame 2 y cmbiale el color de fondo al valo como hicimos antes. Haz lo
mismo en los dos siguientes frames.
Tu lnea de tiempos debera tener este aspecto:
Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel
inicial (Pelcula principal) y podremos ver nuestro grfico "desde fuera".
Ahora ya tenemos completo nuestro grfico animado. Qu crees que suceder si
reproducimos la pelcula? Comprobmoslo pulsando Control + Intro, se visualizar la
pelcula.
Y bien? Nada. Nada en absoluto. El valo sigue tal cual. Por qu? La respuesta est en
las caractersticas de los grficos que habamos explicado: la lnea de tiempos del grfico va
ligada a la de la pelcula.
En este caso la lnea de tiempos de la pelcula tena un solo frame, mientras que la del
grfico tena 4, por tanto, no le hemos dado tiempo al grfico a desarrollar su animacin; slo
ha reproducido un frame, el primero.
Cmo podemos solucionarlo?
Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del
reproductor de Flash, selecciona el fotograma 5 de la pelcula principal y pulsa F6. Ahora
tenemos 5 fotogramas en la pelcula principal.
Pulsa de nuevo Control + Intro.
Como vimos en la introduccin del curso, Adobe ha hecho grandes esfuerzos para integrar
Flash en el mismo paquete donde se incluyen el resto de programas que ao tras ao 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 opcin
Importar Importar a biblioteca.
Como hemos visto en el apartado anterior bastar con seleccionar el archivo PSD que
queremos aadir a la biblioteca. Una vez hecho se abrir el siguiente cuadro de dilogo:
Observa que es posible importar una capa como Imagen de mapa de bits con estilos de
capa editables. Esta opcin nos ser muy til si la capa en cuestin tiene estilos creados en
Photoshop y queremos que sean importados de forma separada para que mas tarde puedan
ser editados.
Tambin podremos decidir el grado de compresin, es decir, la calidad con la que la capa
se aadir 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 rpida del archivo no deberemos abusar
demasiado de esta caracterstica.
Una vez terminado pulsamos Aceptar y el archivo PSD se mostrar en nuestra biblioteca.
La interfaz de dibujo de Flash, como hemos visto, resulta muy cmoda en determinadas
ocasiones para realizar dibujos. As podra interesarnos utilizar Flash CS5 para crear un dibujo
y despus 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 bsico, que la
mayora de mapas de bits no permiten animaciones, por esto el objeto flash que exportemos
no debera contener animacin 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 cmo te aconsejamos realizar el Ejercicio Exportar un objeto como
mapa de bits.
Al Exportar como hemos visto en el punto anterior, podemos "sacar" una parte de nuestra
pelcula como un grfico (un smbolo, un fotograma...).
Pero si lo que tenemos ya es una pelcula completa, y queremos generar una imagen a
partir de ella, lo haremos publicndola. Al publicar, generamos un archivo partiendo de la
pelcula creada.
Lo habitual, y que veremos ms adelante, es publicar la pelcula como un archivo Flash
(swf). Pero tambin podemos hacerlo como imgenes.
Para ello, tenemos que acceder a la Configuracin de publicacin, en el men Archivo.
Cuando lo tengamos, basta con pulsar el botn Publicar. En la misma carpeta donde est
el archivo Flash (.fla) se crearan las imgenes.
Como vimos en el tema bsico hay tipos de archivo de mapa de bits que soportan
animaciones, como los GIF. Pues bien, con Flash tambin podemos crear una animacin y
guardarla como un GIF animado. Los fotogramas de la pelcula se convertirn en fotogramas
del GIF.
Para lograrlo, tenemos que publicar la pelcula como GIF, lo cual configuramos desde la
Configuracin de publicacin, en el men Archivo.
Entre los formatos disponibles, marcamos Imagen GIF.
Entre las opciones concretas del GIF, hay dos que afectan a la animacin:
En Reproduccin, podemos marcar Esttica (por defecto) o Animacin. Debemos de
elegir esta ltima para que el gif sea animado.
Si es grfico es animado, podemos seleccionar cuntas veces se repite dicha animacin.
Entre Reproducir indefinidamente en bucle, o Repetir un nmero determinado de veces.
Otra opcin muy interesante es Transparente, en la que decidimos cmo se exporta el
escenario. Si como un color opaco o transparente.
Abajo vemos el GIF Animado que resulta de exportar nuestro grfico Flash.
b) Falso
pelcula.
b) Mediante la opcin "Exportar" podemos publicar imgenes Flash directamente
en la web.
c) Flash puede incluir en sus pelculas imgenes creadas con otros programas,
8. Es indiferente el uso de grficos y clips de pelcula, pues sus funciones son muy
parecidas.
a) Verdadero
b) Falso
b) Falso
Como hicimos con los grficos, vamos a ver como la lnea de tiempo de un clip no est
ligada a la lnea de tiempo del documento que lo contiene y, a la vez, veremos la diferencia
entre los clips y los smbolos Grficos, que supone una de las razones de la mayor utilizacin
de los primeros en lo que se refiere a la creacin de animaciones.
Para ello abriremos una nueva pelcula Flash (Archivo Nuevo, archivo ActionScript 3).
Despus importaremos una imagen cualquiera o bien crearemos una. La convertimos en
Smbolo (botn derecho, Convertir en smbolo...) y seleccionamos en Tipo "Clip de
Pelcula"
Arrastramos al escenario (si no est ya all) nuestro clip de pelcula.
Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir,
tenemos dos pelculas, cada una con su lnea de tiempo.
Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos con
los smbolos de tipo Grfico.
Observa la lnea de tiempo de la pelcula principal y comprueba que slo tiene un
fotograma.
Como vemos, la duracin del clip que hemos insertado es mucho mayor que la pelcula
nueva que lo contiene. Si el smbolo fuera un grfico ya hemos visto que al reproducir la
pelcula no ocurrira nada, porque slo se reproducira el primer fotograma de su lnea 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 reproducindose aunque la
lnea de tiempo principal haya acabado.
Como para todos los smbolos 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 pelcula debemos abrir primero la biblioteca
en la que est contenido.
Hemos visto en el tema de Smbolos, tenemos dos tipos de bibliotecas: las que estn
asociadas a documentos u otras pelculas y las que nos proporciona Flash CS5. Pues bien,
no slo podemos utilizar smbolos 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 exportacin mediante biblioteca se hace
automticamente 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 smbolos de biblioteca y pulsar Abrir.
Aparecer la biblioteca con la lista de los smbolos correspondientes a los grficos, botones
y clips del documento en cuestin.
Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarn a su
vez todos los smbolos que contenga, incluidos los clips.
Existe otra forma mucho ms cmoda: si tenemos dos documentos abiertos, podemos
arrastrar los elementos directamente de un escenario a otro.
Para ver cmo exportar e importar una pelcula completa como un slo movie clip y poder
usar esto para el desarrollo en programas como Swish, revisa nuestro tema avanzado: Otros
usos de los Movie Clips
Prueba de la Unida 10
. Un clip de pelcula puede contener una imagen esttica.
a) Verdadero
b) Falso
un clip propio.
b) Si importamos un archivo SWF ajeno, la animacin se importa como una
8. Es posible proteger con contraseas los clips de pelcula para que no puedan ser
importados y utilizados por terceros.
a) Verdadero
b) Falso
9. Los smbolos de tipo Clip de Pelcula tienen una lnea de tiempos propia ligada a la de la
escena principal.
a) Verdadero
b) Falso
Reposo. Aspecto por defecto del botn, es decir, cuando el puntero del ratn no est
situado sobre l.
Sobre. Aspecto del botn cuando situamos el puntero sobre l.
Presionado. Apariencia que deseamos tenga nuestro botn mientras lo mantengamos
pulsado.
Zona activa. Aqu debemos indicar el rea real en la que queremos que acte nuestro
botn. Esto es importante sobre todo en botones compuestos slo por texto como
veremos ms adelante.
Parece que la limitacin de fotogramas podra implicar una limitacin en la capacidad de
espectacularidad y utilidad de estos smbolos, pero no es as. Ten en cuenta que podemos
tener todas las capas que queramos.
Los botones pueden contener a su vez otros smbolos, como clips o grficos (tambin de
tipo Bitmap). La unin de las posibilidades de todos los smbolos pueden dotar a los botones
de efectos asombrosos.
Todo esto es lo referente a la apariencia del botn. Despus, tenemos que programar lo
que queremos que haga el botn, cmo queremos que afecte a la pelcula. Y esto lo haremos
con ActionScript.
De esta forma ya tenemos transformado el objeto para que se comporte como un botn.
Ahora lo completaremos internamente.
Para determinar cmo debe reaccionar el botn en funcin de las acciones del ratn, lo
editaremos haciendo clic con el botn derecho del ratn sobre nuestro nuevo botn y
seleccionando la opcin Editar.
Cuando tengamos delante la lnea de tiempo del botn (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 botn para cada posicin del cursor y
marcar el rea de accin del botn (fotograma Hit) en la que simplemente podremos dejar la
misma figura que la inicial (en este caso slo 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 botn.
Objetivo
Crear un botn con efecto relieve de forma rectangular tipo formulario de manera rpida
y sencilla.
en
cada
uno
de
los
fotogramas
Incluir un Clip en un botn es muy sencillo. Tomando este ejemplo, y partiendo de que
tenemos los dos textos como clips en la biblioteca, slo tendremos que:
- Hacer doble clic sobre el botn para entrar en su modo de edicin.
- 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 opcin ms prctica:
- En las propiedades de la instancia, pulsamos Intercambiar... y elegimos el nuevo objeto
de texto.
- Por ltimo, centramos el nuevo texto en el botn, si es necesario.
Ya esta listo, ahora cuando pases el ratn sobre el botn el clip de pelcula empezar a
reproducirse.
Por supuesto, en vez de cambiar el texto podemos aadir otros clips, que simulen
movimientos, reflejos, etc.
Nota: Al crear un archivo, habrs visto que podemos elegir distintas versiones de
ActionScript (3.0 o 2.0). Esto se refiere al lenguaje de programacin que podemos empelar
en Flash y que lo convierte en una herramienta realmente potente. En las versiones 1 y 2, se
podan agregar comportamientos directamente en las propiedades de los botones. Pero
nosotros venimos empleando las versin 3.0 a lo largo del curso, por ser la ms actual y
potente. Esta versin nos obliga a escribir el cdigo ActionScript. Veremos cosas bsicas, y
entraremos un poco ms en ActionScript a partir del tema 16.
Comenzamos por crear o aadir nuestro botn, y asignarle un nombre de instancia. El
nombre que le demos es muy importante, porque nos permitir acceder a l desde el cdigo.
Aunque podemos escribir el cdigo en la misma capa, recomendamos crear una capa
exclusivamente para el cdigo, 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.
Tambin encontramos la ventana Fragmentos de cdigo. Desde ella, podemos generar
breves instrucciones de cdigo para el smbolo seleccionado, lo que la mayora de veces nos
facilitar la tarea, ya que se trata de las opciones ms repetidas.
Sin entrar en detalle de qu es cada palabra, pues esto ya lo veremos, este es el aspecto
general del cdigo asociado a un botn:
?
1
miBoton.addEventListener(MouseEvent.CLICK, accionesMiBoton);
2
function accionesMiBoton(event:MouseEvent):void
3
{
4
//acciones
5
1. Crea el nuevo documento con con Archivo Nuevo, y elige ActionScript 3.0.
2. Para dibujar la forma de pldora dibuja primero un crculo perfecto (con la herramienta
valo y la tecla Shift). Brrale 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. Vers como te permite
regular la direccin del degradado. Puedes hacerlo tantas veces como sea necesario
hasta lograr el degradado deseado.
5. Ahora, vamos a crear la pldora. Fuera del crculo, dibuja dos lneas paralelas
(Herramienta Lnea y tecla Shift). Agrpalas (Ctrl + G).
6. Utilizando el panel alinear, centra horizontalmente el crculo y las lneas (fig. b).
7. Desagrupa las lneas (Ctrl + Shift + G) y deseleccinalas.
8. Ahora podrs seleccionar independientemente los lados de la esfera. Sepralos (fig. c).
Puedes hacerlo con las teclas Shift + derecha o Shift + izquierda.
9. Con la herramienta Transformacin libre, estira la seccin que estaba entre las lneas
hasta completar la figura (fig. d).
10. Borra
las
lneas
negras.
13. Crea fotogramas clave los estados que quieras modificar pulsando F6 y modifcalos 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 segn el estado.
15. Gurdalo, pulsando Archivo Guardar Como... y llmalo stop.
2. Es posible determinar en qu zona del botn queremos que sean aplicables las acciones.
a) Verdadero
b) Falso
4. La lnea de tiempos de un botn slo puede tener una capa y cuatro fotogramas.
a) Verdadero
b) Falso
Aunque Flash ofrece tcnicas mejores, tambin se pueden crear animaciones a modo de
GIF animado. Se les denomina animaciones Fotograma a Fotograma. Estas son las
animaciones ms bsicas y conviene conocerlas. Para ello conviene visitar nuestro tema
bsico:
Crearla es tan simple como hacer clic derecho sobre el fotograma que contiene los
elementos y elegir Crear interpolacin de movimiento. Por defecto, se aadirn 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 smbolo. Veremos que aparece una lnea punteada, por defecto recta, que
representa el trazado de la animacin.
Cuando realicemos la interpolacin correctamente observaremos un aspecto como este en
la lnea de tiempo, en el que los fotogramas aparecen de color azul.
Esto indica que la animacin cambiar la posicin del smbolo del fotograma 1 hasta la
posicin del mismo smbolo en el fotograma 24, utilizando precisamente 24 fotogramas. El
nmero de fotogramas que se usen en la interpolacin indicar las subetapas de que constar
la animacin. Cuantas ms subetapas ms sensacin de "continuidad" (menos saltos
bruscos) pero a la vez menos velocidad en el movimiento.
Podemos seleccionar cualquier fotograma y ver dnde se sita el clip en cada punto. De
hecho, si en alguno de estos fotogramas lo cambiamos, se crear un fotograma clave de
propiedad, mostrndose como un diamante en la lnea de tiempo.
La velocidad en el movimiento de las pelculas la podemos cambiar tambin modificando su
parmetro en la lnea de tiempo,
12. Ahora, crearemos trayectorias curvas. Sobre el escenario, haz clic y arrastra la gua
punteada para crear curvas.
13. Como podemos comprobar, el clip se desplaza ahora en siguiendo trayectorias curvas
pero pasando por las posiciones clave indicadas.
Podemos ver, a la izquierda una columna con las propiedades que podemos modificar,
divididas en Movimiento bsico, Transformacin, 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 lnea de tiempo.
Vemos que la animacin va desde el fotograma 1 hasta el fotograma 30. Aparece una
flecha que no aparece en la interpolacin de movimiento y el icono que hay a la derecha del
nombre de la capa es distinto.
Por supuesto, al realizar una interpolacin clsica el fotograma inicial y final debern ser
diferentes, en caso contrario no se crear ningn tipo de animacin.
Observa en las siguientes imgenes dnde est situada la pelota en el primer fotograma de
la animacin y su posicin final en el ltimo fotograma:
- En las interpolaciones clsicas cuando cambia una propiedad se crea un fotograma clave
y cambia la instancia del objeto, mientras que en las interpolaciones de movimiento slo 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
smbolo, como ocurre en las clsicas.
- En un grupo de interpolacin de movimiento no est permitido usar scripts de fotograma,
mientras que s es posible en las clsicas.
- Los grupos de interpolaciones de movimiento se pueden cambiar de tamao en la lnea de
tiempo. Se tratan como un objeto nico. Las interpolaciones clsicas estn formadas por
grupos
de
fotogramas
que
se
pueden
Y la lnea de tiempo que nos queda es algo tan sencillo como esto:
Aqu puedes ver cmo simulamos el bote de una pelota empleando el Editor de movimiento
Aqu tienes un ejemplo de una presentacin sencilla mediante texto utilizando esta tcnica.
Si no tienes claro cmo realizar una animacin te recomendamos que realices el Ejercicio
Animar texto por bloques
Vamos a separar el texto en los siguientes bloques: "a", "u", "la" y "Clic". Podramos cambiar
los bloques si quisiramos dar otro efecto en concreto.
5. Seleccionamos dichos bloques y los convertimos a smbolos, dndoles un nombre
identificativo y el Tipo Grfico, ya que no los animaremos "internamente".
6. Creamos 5 nuevas capas, una por cada bloque que hemos creado.
8. Hacemos clic con el botn derecho sobre el nico fotograma con elementos que
tenemos en la lnea de tiempo y en el men emergente seleccionamos Copiar
Fotogramas. A continuacin vamos pegando los fotogramas (botn 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 despus del fotograma de
cada capa y pulsamos F6 cada vez. En la capa "Clic" selecciona el fotograma 30 y pulsa
tambin F6.
12. Hacemos clic con el botn derecho en los fotogramas centrales que hay entre los
fotogramas clave y seleccionamos cada vez Crear Interpolacin Clsica.
13. Extendemos la imagen los ltimos fotogramas de cada capa hasta que ocupen el
fotograma 30 (Botn derecho Insertar Fotograma Clave).
14. Exceptuando la capa "Clic" seleccionamos el primer fotograma de cada interpolacin
y aumentamos el tamao del bloque que contiene.
15. Movemos ahora fuera del escenario el bloque "Clic".
16. An en esta capa, hacemos clic con el botn derecho sobre el fotograma 24 y
seleccionamos Insertar Fotograma Clave.
17. En este fotograma recin creado reducimos el ancho del bloque de texto y lo
colocamos junto a la ltima "a".
Y ya tenemos la animacin creada. Como vemos hemos utilizado todo tipo de tcnicas de
interpolacin, aunque todava puede complicarse ms como veremos ms adelante
podemos
ver
un
ejemplo
de
este
tipo
de
presentaciones:
Para crear esta animacin debers crear tantas capas como animaciones de lneas vayas a
crear, en el ejemplo hemos creado 4 capas. Una para el movimiento de lneas 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.
Tambin crearemos una capa que situaremos en la posicin superior donde colocaremos
las imgenes que formarn el mensaje de bienvenida.
El funcionamiento de la animacin es claro, deberemos crear interpolaciones de
movimiento para cada una de las capas de lneas que en su posicin final emplazaremos en
su lado contrario de la pantalla, por ejemplo, las lneas situadas en un principio en la parte
inferior al final de la animacin se encontrarn en la parte superior. Realizaremos esto con las
4 capas de lneas.
En la capa Imgenes crearemos animaciones que harn aparecer las imgenes 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 imgenes
para colocarlas en su lugar en el fotograma. Estas imgenes se mostrarn nicamente
durante el tiempo que dure el fotograma para desaparecer ms tarde dando paso a la otra
imagen.
Consejo: Si quieres aadir un fondo debers hacerlo en una nueva capa y colocar sta
debajo de todas las existentes.
Una opcin que puede resultar muy interesante es Orientar segn el trazado, la cual
encontramos en el panel de Propiedades. Esta opcin har que el smbolo vaya girando para
seguir la lnea del trazado, lo que en la animacin anterior habra puesto el avin boca abajo
al hacer el "loop".
Tanto si el trazado es de una interpolacin de movimiento, como si es de una
interpolacin clsica, podemos modificarlo de varias formas:
- Seleccionando la herramienta Seleccin y haciendo clic sobre el trazado y arrastrndolo.
- Seleccionando la herramienta Subseleccin y haciendo clic en el trazado, aparecern los
controladores de curva, movindolos modificaremos el trazado.
- Seleccionando la herramienta Transformacin libre y haciendo clic en el trazado,
aparecern los controladores de transformacin libre, movindolos modificaremos el trazado.
Si se trata de un trazado de una interpolacin de movimiento, adicionalmente disponemos
de otros mtodos para modificar el trazado:
- Moviendo la posicin del objeto en el escenario, esto hace que se cree automticamente
un fotograma clave de propiedad y se modifique el trazado. Esta es, quizs, la forma ms fcil
de modificar un trazado.
- Utilizar el editor de movimiento para modificar los valores de X, Y, Z.
Si estamos modificando el trazado de una interpolacin clsica, debemos tener cierto
cuidado con no producir discontinuidades en el trazado, ya que esto hara que la animacin se
detuviera en ese punto. En general es ms fcil y flexible utilizar los trazados con las
interpolaciones de movimiento que con las interpolaciones clsicas.
Muchos movimientos complicados pueden ser duplicados fcilmente sobre otros objetos
utilizando ActionScript 3, puedes ver cmo realizarlo en este videotutorial:
Podis poner a prueba vuestros conocimientos realizando:
2. Las Guas de movimiento provocan que todos los objetos de su mismo fotograma
realicen el movimiento que sta indica, independientemente de la relacin que exista entre
las capas.
a) Verdadero
b) Falso
3. Una capa Gua es la mejor solucin para realizar un movimiento en lnea recta.
a) Verdadero
b) Falso
4. Una capa Gua es la mejor solucin para realizar un movimiento enrevesado con
numerosos cambios de direccin.
a) Verdadero
b) Falso
esta cualidad al mximo y poner animaciones en todas las pginas webs que creemos.
c) Las animaciones fotograma a fotograma son tan eficientes en cuanto a espacio y
rapidez de ejecucin como las animaciones creadas con las utilidades de Flash
(interpolaciones).
6. Flash necesita disponer de tantos fotogramas clave como duracin tenga la animacin de
movimiento.
a) Verdadero
b) Falso
7. Crear animaciones fotograma a fotograma ocupa menos espacio en el archivo final que
hacer una interpolacin de movimiento.
a) Verdadero
b) Falso
8. En las animaciones guiadas es necesario que el objeto este SIEMPRE en contacto con la
lnea de gua en los fotogramas inicial y final.
a) Verdadero
b) Falso
9. Todos los objetos presentes en una misma capa y un mismo fotograma formarn parte de
10. Las interpolaciones de movimiento permiten aplicar otros efectos adems del propio
movimiento, tales como cambios en los tamaos, colores etc...
a) Verdadero
b) Falso
Para crear la interpolacin, una vez tengamos los fotogramas de inicio y fin de la
animacin hacemos clic derecho en alguno de los fotogramas intermedios, y seleccionamos la
opcin del men Crear interpolacin de forma.
Recuerda que podemos alterar el fotograma final todo lo que queramos.
Podemos observar cmo realizar una interpolacin por forma pulsando aqu.
A
continuacin
podemos
ver
el
ejemplo
de
interpolcin
de
forma
sencilla.
Recordemos que para realizar una interpolacin 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
funcin 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 hubiramos repasado con la herramienta lpiz el contorno de cada letra.
Posibilidades de esta tcnica en textos? Muchsimas, 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 transicin. Tambin es conveniente dar un tiempo para que
cada letra sea mostrada y pueda ser visualizada y "entendida" por aquel que vea la pelcula,
porque si no lo hacemos corremos el riesgo de que la animacin parezca slo un garabato
revolvindose.
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 transicin tambin en el color. Observemos a su vez como cuando se forma cada
letra, mantenemos su imagen el tiempo suficiente como habamos indicado que era
necesario.
En este otro ejemplo se observa la transicin de colores ms claramente y, adems,
observamos transiciones de forma a texto.
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. Debers
ejecutar de nuevo el comando para que estas letras se separen y creen una forma.
6. Para realizar una Interpolacin por Forma. Debemos convertir el objeto a Smbolo?
a) S, porque una Interpolacin de Forma es como una Interpolacin de
Movimiento.
b) No, porque slo se puede hacer con smbolos de tipo Clip.
c) No, porque un smbolo no se puede modificar internamente, y la Interpolacin de
8. Es posible aadir consejos de forma en otro sitio que no sea ni borde ni vrtice.
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 cmo se realizar el cambio de forma.
a) Verdadero
b) Falso
Por ltimo, con el uso de la herramienta Transformacin libre tambin podemos variar las
dimensiones del objeto.
Escala: En las interpolaciones guiadas, esta casilla, al activarla, permite un
incremento/decremento progresivo del tamao del objeto inicial cuando sus dimensiones son
distintas a las del objeto que est en la posicin final de la animacin. Si la casilla est
desactivada podramos encontrarnos con una animacin como la siguiente.
En las interpolaciones de movimiento, esta opcin est activada por defecto.
Como vemos Flash hace el desplazamiento de posicin, pero el cambio de tamao se
produce bruscamente en el ltimo fotograma.
Aceleracin: Esta barra deslizante nos permite determinar la aceleracin del primer
tramo de la animacin. Podemos elegir valores entre -100 y 100. Si el valor de aceleracin es
negativo el smbolo se mover despacio primero e ir acelerando de manera progresiva. Si
b) Falso
6. La propiedad filters de un objeto contiene una matriz de filtros aplicados a dicho objeto.
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
Con Flash cada vez es ms fcil aadir vdeos a nuestras presentaciones o webs. En
particular Flash CS5 incorpora una serie de caractersticas que facilitan la tarea al mximo y
permiten el uso de vdeos como si se tratase de cualquier otro objeto en pantalla.
A continuacin explicaremos cmo hacerlo y cules son las mejores alternativas.
Utilizaremos el siguiente ejemplo para documentar algunos de los pasos que deberemos
realizar.
Aqu debers seleccionar el archivo que quieres importar para utilizarlo en tu pelcula. Haz
clic en el botn Examinar y bscalo en tus carpetas. Cuando lo hayas encontrado pulsa el
botn Aceptar y estars listo para seguir pulsando el botn Siguiente.
Tambin es posible marcar la opcin Ya se ha implementado en un servidor Web, Flash
Vdeo Streaming Service o Flash Communication Server. En este caso debers 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 informacin del video que vamos a exportar, donde se
importara, etc:
Tanto los puntos de ActionScript como los codificados, pueden enviar parmetros, lo que
nos permite recibir informacin.
align: especifica el diseo del vdeo. Por ejemplo, lo podemos centrar con center.
autoPlay: puede tomar los valores true o false. Indican si el vdeo debe reproducirse
nada ms abrir el archivo o esperar a una orden para empezar a reproducirse.
cuePoints: indica los puntos de referencia que estn incluidos en la pelcula. Una vez
importada la pelcula 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 transmisin
de vdeo en vivo y slo podr utilizarse a travs de un servidor de Streaming.
preview: Permite obtener una previsualizacin desde una imagen png.
scaleMode: Indica si se altera la escala del vdeo: si muestra su tamao original, si se
ajusta al tamao de la escena, etc...
skin: desde aqu podemos modificar la apariencia de los controles de la pelcula 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 site sobre la pelcula.
skinBackgroundAlpha establece
skinBackgroundColor su color.
la
transparencia
del
fondo
del
skin,
miVideo.volume = 0;
miVideo.playButton = miBotonPlay;
miVideo.pauseButton = miBotonPausa;
miVideo.playPauseButton = miBotonPausaPlay;
miVideo.stopButton = miBotonStop;
mVideo.backButton = miBotonAtras;
miVideo.forwardButton = miBotonAdelante;
miVideo.muteButton = miBotonSilencio;
miVideo.volumeBar = miBarraVolumen;
miVideo.seekBar = miBarraDeslizadora;
10 miVideo.bufferingBar = miBarraProgreso;
miVideo.play();
miVideo.stop();
miVideo.pause();
miVideo.seek(5);
volume: define el volumen del vdeo. Puedes introducir un valor entre 0 y 100.
?
1
miVideo.volume = 50;
miVideo.play();
} else {
miVideo.pause();
6
}
7
8}
En el ejemplo hemos creado 3 botones que debern saltar a los tres puntos diferentes que
hemos creado: inicio, carrera1 y carrera2.
El cdigo asociado al botn sera el siguiente:
?
1 miBoton.addEventListener(MouseEvent.CLICK,reproducirInicio);
2 function reproducirInicio(event:MouseEvent) {
3
miVideo.seekToNavCuePoint("inicio");
miVideo.play();
5}
puedes
utilizar
las
funciones
seekToNextNavCuePoint()
que
tenemos
que
hacer
es
escuchar
cundo
se
produce
el
evento
function fl_CuePointHandler(event:MetadataEvent):void
{
//con event.info.name podemos conocer el nombre el punto
if(event.info.name=="susto") {
1
0
11 }
if (event.info.parameters) {
mensaje.gotoAndPlay(event.info.parameters["fotograma"]);
8}
5. Aadiremos 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 botn Ajustes.
7. Pulsa el botn
Navegacin .
, llama al punto
, llama al punto
, llama al punto
, llama al punto
, llama al punto
19. Busca el archivo que se ha creado (video.flv o video.f4v segn el formato elegido) y
brelo.
Ahora, insertaremos el cdigo ActionScript necesario para controlar el vdeo. Para ello,
lo primero que has de hacer es dares nombres a las distintas instancias que hay en el
escenario.
20. Al
componente
de
vdeo,
llmalo
miVideo.
Al
botn
de
retroceder,
llmalo
retro_rapido.
Al
botn
de
parar,
llmalo
btnStop.
Al
botn
de
reproducir,
llmalo
btnPlay.
Al
botn
de
pausar,
llmalo
btnPause.
Al
botn
de
avanzar,
llmalo
avance_rapido.
Al
botn
de
subir
volumen,
llmalo
vol_mas.
Al botn de bajar volumen, llmalo vol_men.
21. Para acabar, creamos una nueva capa llamada acciones donde insertamos el cdigo
necesario:
?
1 miVideo.autoRewind=true; //Para que al pulsar STOP vuelva
//al principio
2
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);
10 function detener(event:MouseEvent):void {
11
miVideo.stop();
12 }
13 //Boton play >
14 btnPlay.addEventListener(MouseEvent.CLICK,reproducir);
15 function reproducir(event:MouseEvent):void {
16
miVideo.play();
17 }
18 //Boton pausa ||
19 btnPause.addEventListener(MouseEvent.CLICK, pausar);
20 function pausar(event:MouseEvent):void {
21
miVideo.pause();
22 }
23 //Boton avance >>
24 avance_rapido.addEventListener(MouseEvent.CLICK, avanzar);
25 function avanzar(event:MouseEvent):void {
26
miVideo.seekToNextNavCuePoint();
27 }
28 //Volumen
29 //Subir +
30 vol_mas.addEventListener(MouseEvent.CLICK, subirVolumen);
31 function subirVolumen(event:MouseEvent):void {
32
if (miVideo.volume<100) {
miVideo.volume=miVideo.volume+10;
33
34
35 }
36 //Bajar 37 vol_men.addEventListener(MouseEvent.CLICK, bajarVolumen);
38 function bajarVolumen(event:MouseEvent):void {
39
if (miVideo.volume>0) {
miVideo.volume=miVideo.volume-10;
40
41
42 }
22. Y solo queda probarlo.
miClip.width = 100;
miClip.height = 200
Las propiedades scaleX e scaleY cambian el tamao, 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:
?
1
miClip.scaleX = 2;
miClip.scaleY = 2;
miClip.x = miClip.x + 1;
Aqu hemos creado un clip de pelcula con tres posiciones, parado, izquierda y derecha:
As, podemos llamar mediante la instruccin gotoAndStop() a uno de los fotogramas del
clip para que se muestre dicha posicin y d ms realismo al movimiento.
El cdigo que hemos incluido en la pelcula 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
10
miClip.gotoAndStop("derecha");
11
derecha = true;
12
13
14
miClip.gotoAndStop("izquierda");
15
izquierda = true;
16
17 }
18
19 miClip.addEventListener(Event.ENTER_FRAME,desplazar)
20 function desplazar(event):void{
21
22
23
if (derecha) {
if (miClip.x < 495) {
miClip.x = miClip.x + 6;
24
} else {
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 cmo 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 funcin con ms
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
estn a true comenzamos el movimiento hasta la posicin que queramos.
A medida que vayamos avanzando en el tema veremos ms funciones y mtodos que nos
permitirn acciones ms verstiles y ajustadas a nuestras necesidades.
Otra forma de modificar la apariencia del objeto con el que trabajamos es utilizando la
propiedad rotation.
Esta propiedad acta sobre el objeto rotndolo tantos grados como especifiques respecto
a su posicin original. Por ejemplo:
?
1
miClip.rotation = 90;
Esta lnea 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 aadirle un signo menos (-) antes del ngulo:
?
1
miClip.rotation = -90;
Para devolver al objeto a su posicin original slo tendrs que escribir la siguiente lnea:
?
1
miClip.rotation = 0;
que
encontrars
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 cdigo:
?
1
miClip.x = 30;
4
5
6
miClip.addEventListener(MouseEvent.CLICK,rotar);
function rotar(event:MouseEvent):void{
miClip.rotation = 10;
10
derecha = true;
11 }
12
13
miClip.rotation = -10;
14
izquierda = true;
15
16 }
17 miClip.addEventListener(Event.ENTER_FRAME,para)
18 function para(event:Event):void{
19
if (derecha) {
20
21
miClip.x = miClip.x + 6;
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
32
else {
33
miClip.rotation = 0;
34
izquierda = false;
}
35
36
37 }
4. Estaremos listos, podrs previsualizar la pelcula pulsando Ctrl+Enter.
Como puedes observar el cdigo es
En Flash tenemos una funcin muy til que nos ayuda a encontrar ngulos rpidamente.
Utilizando la funcin Math.atan2 recuperaremos el ngulo formado por unas
coordenadas en el espacio respecto a un punto central.
Veamos un ejemplo:
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 estn en relacin ste.
Podemos averiguarlas de forma muy fcil haciendo una pequea conversin restando las
coordenadas entre s:
Lo segundo que tendremos que saber es que esta funcin 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:
Slo tenemos que sumarle 90 al ngulo resultante para que el objeto se oriente hacia el
lugar correcto.
As que solventaremos esto son una sola lnea. Pero antes convertiremos el ngulo
resultante en radianes a grados:
?
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 partisemos 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
posicin que buscamos.
O incluso, si al contrario, el objeto se encuentra orientado hacia la izquierda deberemos
sumarle 180.
Como ves, todo depender de la posicin original del objetos (y de que vrtice quieras
orientar). Lo ms aconsejable en este caso es que los objetos que vayan a rotar estn
orientados hacia la derecha, as no tendrs que preocuparte del desfase del ngulo.
Como ya vimos, esto lo emplebamos 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 (Botn Avanzado). Aqu, marcamos la opcin 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 cdigo, esta clase se comportar exactamente como un MovieClip, ya que
es su clase base (caja de texto Clase base). Ahora, para agregar estos elementos, slo
tenemos que crear un nuevo objeto de la clase, y agregarlo al contenedor:
?
1 var miObjetoClip:miClip = new miClip;
2 miContenedor.addChild(miObjetoClip);
posY=Math.floor(contenedor.numChildren/6)*miEstrella.height;
10
posX=(contenedor.numChildren%6)*miEstrella.width;
11
12
13
14
15
}
}
function quitar(event) {
6
}
7
}
3
4 }
5
6 stage.addEventListener(MouseEvent.MOUSE_UP, soltar);
7 function soltar(event):void {
8
miObjeto.stopDrag();
trace(miObjeto.dropTarget);
10 }
Este
cdigo
devolver
al
Panel
Salida
el
tipo
de
objeto
(podemos
utilizar
Otra cosa que nos ser de gran ayuda es poder localizar la posicin del ratn. De este
modo podramos hacer que los objetos se desplacen u orienten hacia el ratn
Para averiguar las coordenadas del ratn slo tendrs que recurrir a las propiedades
mouseX y mouseY:
?
1 var coordenadaX:Number = mouseX;
2 var coordenadaY:Number = mouseY;
Con todo lo que hemos aprendido podemos ya sustituir el cursor del ratn normal por
uno de nuestro agrado.
Para ello tenemos que escribir muy pocas lneas:
?
1 Mouse.hide(); //Ocultamos el cursor verdadero
2 addEventListener(Event.ENTER_FRAME,cambiarCursor);
3 function cambiarCursor(event):void {
4
texto.contador_txt.text="("+mouseX+", "+mouseY+")";
miCursor.y = mouseY;
9}
Mouse.show();
function capturarTeclado(tecla:KeyboardEvent):void{
switch (tecla.keyCode){
case Keyboard.RIGHT:
break;
10
case Keyboard.LEFT:
11
12
break;
}
13
14 }
Los cdigos 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 ratn:
Nota: Si no responde al teclado, haz clic primero para que tome el foco.
El cdigo 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 direccin del movimiento
7 addEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);
8 function capturarTeclado(tecla:KeyboardEvent):void {
9
10
case Keyboard.RIGHT :
11
derecha=true;
12
break;
13
case Keyboard.LEFT :
14
izquierda=true;
15
break;
16
17 }
18
19 //En el evento onEnterFrame, comprobamos si estn activas
20 //Las variables que indican la direccin del movimiento
21 miClip.addEventListener(Event.ENTER_FRAME, movimiento);
22
23 function movimiento(event):void {
24
if (derecha) {
25
miClip.gotoAndStop("derecha");
26
if (miClip.x<490) {
27
miClip.x=miClip.x+7;
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 cundo se suelta la tecla
38 addEventListener(KeyboardEvent.KEY_UP, parar);
39
40 function parar(event):void {
41
42
izquierda=false;
43
miClip.gotoAndStop("parado");
44 }
if (miClip.hitTestPoint(mouseX, mouseY) {
//coincidencia
5
6
7}
Este cdigo evala la posicin del ratn a cada clic, si las coordenadas introducidas en el
mtodo hitTestPoint coinciden con el rea de miClip se produce colisin.
hitTestPoint admite un tercer parmetro booleano. ste indica si la colisin se calcula con
respecto a la forma del elemento (true) a al rectngulo delimitador del objeto (false). La
opcin por defecto es esta ltima.
Cuando queremos evaluar si un objeto "choca" con otro, empleamos el mtodo
hitTestObject:
?
1 miClip.hitTestObject(miOtroClip);
Pero, cmo conocemos las coordenadas de una forma?, cmo averiguo el punto mximo
que alcanza en la esquina abajo derecha?. Como siempre, Flash nos soluciona esto
incorporando un mtodo a los objetos de visualizacin que nos devuelve sus medidas. El
mtodo getBounds.
1 miClip.getBounds(objetoReferencia);
Realiza el ejercicio paso a paso de Colisin y Movimiento para practicar este concepto.
switch (tecla.keyCode) {
14
case Keyboard.RIGHT :
15
derecha=true;
16
break;
17
case Keyboard.LEFT :
18
izquierda=true;
19
break;
case Keyboard.UP :
20
21
subir=true;
22
break;
23
case Keyboard.DOWN :
24
bajar=true;
25
break;
26
27 }
28
29 //Al soltar una tecla
30 stage.addEventListener(KeyboardEvent.KEY_UP, parar);
31 //Anulamso el movimiento en direccin de la tecla
32 function parar(tecla:KeyboardEvent):void {
33
34
switch (tecla.keyCode) {
case Keyboard.RIGHT :
35
derecha=false;
36
break;
37
case Keyboard.LEFT :
38
izquierda=false;
39
break;
40
case Keyboard.UP :
41
subir=false;
42
break;
43
case Keyboard.DOWN :
44
bajar=false;
45
break;
}
46
47 }
Este cdigo se parece mucho al que vimos en la teora. Lo nico que hacemos es
obtener qu tecla se ha pulsado y en funcin de la direccin, activamos una variable
booleana que indica que se ha de mover el objeto en esa direccin. 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. Aade el siguiente cdigo:
?
1 //En el enterFrame del clip, comprobamos la posicin futura, y si no
hay impacto, movemos
2
miClip.addEventListener(Event.ENTER_FRAME, mover);
3
function mover(event):void {
4
//Utilizamos un objeto rectngulo para que nos sea ms cmodo
5 acceder a las propiedades
6
7
8
miClip.y+=velocidad;
posicin del objeto.
14
no
hay
colisin,
cambiamos
la
12
13
//Si
}
if (subir) { //Comprobamos la colisin izquierda - arriba y derecha
- arriba, aumentando arriba
15
17
18
}
if (izquierda) { //Comprobamos la colisin izquierda - arriba e
izquierda - abajo, aumentando izquierda
if (!(fondo.hitTestPoint(rect.left-velocidad, rect.top, true) ||
19 fondo.hitTestPoint(rect.left-velocidad, rect.bottom, true))) {
20
miClip.x-=velocidad;
21
}
}
22
23
24
miClip.x+=velocidad;
}
}
}
Parece un poco complicado pero en esencia es ms largo, pero sencillo. Para cada uno de
los movimiento (arriba, abajo, izquierda y derecha) tendremos que evaluar si se produce
colisin
con
el
objeto
miClip
el
clip
fondo.
Pero no bastar con hacerlo slo de una esquina, veamos un ejemplo para verlos con ms
claridad:
trace(Math.random());
trace(Math.random());
trace(Math.random());
trace(Math.random());
Es tan til que a raz de esta funcin se ha creado este trozo de cdigo que casi utilizars
en la mayora de tus pelculas que contengan componentes aleatorios:
?
1 function num_aleatorio (min:Number ,max:Number):Number {
return (Math.floor(Math.random()*(max-min+1))+min);
2
3}
la velocidad
2this.velocidad = velocidad_base+nivel*1.5+(2-escala);
3this.width = this.width*((10-escala)/10);
4this.height =
this.height*((10-escala)/10);
Otra de las funciones que te vendrn muy bien es la de dotar de velocidad a los
movimientos de los objetos.
Observa el cdigo que hemos introducido en el juego:
?
1 this.velocidad = velocidad_base+nivel*1.5+(2-escala);
this.y += this.velocidad;
En nuestro ejemplo, por comodidad no creamos todo el campo de texto desde el cdigo.
Puedes ver que hemos creado un objeto llamado miFormato que es del tipo formato de
texto, con unas caractersticas bsicas que podremos aplicar sobre cualquier texto de
nuestra pelcula. Luego mediante ActionScript hemos creado otro objeto estadisticas_txt del
tipo campo de texto, que ser el que mostrar el texto.
Ahora slo 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 ms comunes, si
necesitas un listado completo de ellas puedes visitar nuestra seccin 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.
3. La funcin 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 arrastrndose
con la propiedad...
a) dragtarget.
b) droptarget.
aadamos.
c) Las dos anteriores son correctas.
Vamos a ver lo ms importante del cdigo ActionScript que tenemos un poco ms 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 posicin (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 ms bajo, la variable elasticidad
determinar esta prdida 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 lnea naranja representa esa cantidad que le sumamos al tope 1 para
pasar al tope 2.
1 btn_reproducir.addEventListener(MouseEvent.MOUSE_UP,playescena)
2 function playescena (event:MouseEvent):void {
3
1
0
bola_mc.x = 0;
tope += (suelo - bola_mc.y) / elasticidad; //calculamos el tope
11
var repeticion:Number;
1
2
clearInterval(repeticion);
repeticion = setInterval(botar, 35);//Repetimos botar cada 35 ms
1
3
function botar() {
1
4
1
5
bola_mc.x += incre_x;
1
6
if (bola_mc.y>=suelo) {
baja = false; //Si ha llegado al suelo hacemos que suba
1
7
}
} else { // Si la bola sube...
1
8
bola_mc.y -= incre_y;//Disminuimos Y
1
9
bola_mc.x += incre_x;
if (bola_mc.y<=tope) { //Cuando alcance el tope
2
0
2
1 suelo
2
2
incre_y = 0;
clearInterval(repeticion);//Fin de la repeticin
2
3
2
4
2
5
2
6
//Ya no rebota ms
}
}
}
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
?
var retardo:Number = setInterval(queFuncion:Function,
1
[param1:Object, param2, ..., paramN]);
intervalo:Number,
Donde,
queFuncion es la funcin que se va a repetir.
intervalo es el nmero de milisegundos que van a transcurrir entre cada llamada a la
funcin.
[param1:Object, param2, ..., paramN] es la lista opcional de parmetros que se pasan
a la funcin indicada en queFuncion.
retardo es una variable que identifica el intervalo y que nos permite emplear
clearInterval() para detener la ejecucin.
Por ejemplo, el cdigo siguiente escribe 10 veces el mensaje "contador" i, cada 2000
milisegundos (2 sg.).
?
1 var i:Number = 1;
2 var repeticion:Number = setInterval(contar, 2000);
3 function contar() {
4
if (i>10) {
clearInterval(repeticion);//Fin de la repeticin
6
}
7
8}
2
3
4
bola_mc.addEventListener(Event.ENTER_FRAME, miFuncion)
function miFuncion(event):void{
trace("ejecutando: "+ ++i);
5
}
tope++;
if (tope > 2) {
clearInterval(repeticion);
nextFrame();
play();
1 }
0
stop();
1
1
En las imgenes podrs ver qu proceso hemos seguido para dibujar el movimiento.
La gua 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 crticos para
achatar la pelota y dotarla de elasticidad.
Ahora podrs combinar muchas de las tcnicas que hemos aprendido para generar algo
as:
(Haz clic en la pelcula y luego usa las teclas de movimiento a derecha e izquierda)
Hemos visto dos tcnicas diferentes para animar un objeto en Flash, mediante
ActionScript y mediante gua de movimiento.
Segn cada caso concreto resultar ms adecuado elegir una u otra tcnica. En general,
resulta ms fcil y rpido utilizar guas de movimiento que ActionScript, sobre todo si el
movimiento que tiene que seguir el objeto es sinuoso y difcil de definir en trminos de una
ecuacin matemtica.
Hay casos en los que ser ms adecuado utilizar ActionScript y otros casos en los que
slo ser posible crear el movimiento mediante ActionScript, por ejemplo, si queremos que
un objeto se mueva de forma aleatoria por un escenario.
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 Lnea, en el fotograma 1, y creamos un frame clave
Vamos a ver como crear una animacin de una caja girando en tres dimensiones.
Para abordar una animacin 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 isonomtrica y c) perspectiva cnica.
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 animacin perfectamente realista, pero lo que tratamos de explicar es nicamente el
proceso de animacin.
Se trata de hacer girar una caja desde una posicin inicial hasta una posicin fila. Para
hacer la animacin debemos dibujar la caja en varias posiciones intermedias. A continuacin
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 segn avance el giro.
Luego deberemos introducir interpolaciones entre las diferentes posiciones para terminar
con un resultado parecido a este:
Podemos hacerlo de dos formas: creando un esqueleto dentro de una forma, o uniendo
smbolos con huesos.
Crear un esqueleto en una forma:
Partimos de una forma, como pueden ser elipses, rectngulos, trazos del pincel, etc.
Cualquier cosa que no se haya convertido en un smbolo. Con la herramienta Hueso,
vamos haciendo clic y arrastrando, dibujando los huesos. Debemos de comenzar por el
hueso raz, y seguir por los que cuelgan de este. Por ejemplo, para dibujar un brazo,
haramos clic sobre el hombro y arrastraramos hasta el codo. Volveramos a hacer clic
sobre el el codo y arrastraramos hasta la mueca.
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, vers que el resto del cuerpo le sigue. El inconveniente de la forma es
que puede deformarse y no podremos controlarlo.
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 articulacin que lo une con el hueso del que cuelga, debemos hacerlo con
la tecla Shift (Maysculas) pulsada.
Seguimos creando poses. Si queremos duplicar una pose, podemos hacer clic derecho
sobre ella en la lnea 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.
Desde las propiedades podremos recorrer los huesos. Por defecto, los huesos tienen
activada la Union: Rotacin, que permiten que roten. Podemos Restringir el ngulo de
rotacin, por ejemplo para hacer que una rodilla slo se pueda mover hacia atrs, hasta
chocar con el muslo, y no hacia delante, con los valores Min y Max.
Por defecto, los huesos tienen un tamao fijo e invariable, pero podemos hacer que esto
cambie con los valores de Traslacin.
Aunque la cinemtica inversa es una tcnica que con un poco de prctica resulta sencilla,
existen otras formas de crear movimientos complejos, como puedes ver en este avanzado
Esto har que el vdeo se exporte de forma que lo podremos visualizar fotograma a
fotograma. Sigue el resto de opciones hasta el final y el vdeo se colocar en la lnea de
tiempo.
Luego crearemos una nueva capa por encima y crearemos tantos fotogramas claves
como fotogramas de pelcula queramos copiar. El resto es sencillo, coge un pincel y a
calcar. Cuanta ms precisin consigas, ms impresionantes sern los resultados.
Donde color indicar el color de relleno que se le aplicar al dibujo. Deber estar en
hexadecimal, por ejemplo: 0x000000.
El parmetro alfa indicar la transparencia del relleno.
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 lneas en el espacio que contendrn el relleno de
nuestro dibujo. Utiliza la instruccin graphics.lineTo():
?
1 miClip.graphics.lineTo(x, y);
Esto har que el punto de dibujo se desplace hasta la posicin (x, y), desde donde se
crear el siguiente trazo de dibujo.
?
1 miClip.graphics.beginFill(0xFF0000);
2
3 miClip.graphics.moveTo(10, 10);
4 miClip.graphics.lineTo(10, 100);
5 miClip.graphics.lineTo(100, 100);
6 miClip.graphics.lineTo(100, 10);
7 miClip.graphics.lineTo(10, 10);
8 miClip.graphics.endFill();
0,
null,
scaleMode:String = "normal",
joints:String = null, miterLimit:Number = 3);
caps:String
Nota: Esta instruccin deber estar colocada antes de utilizar la funcin beginFill(),
quedara de esta forma:
?
miClip.graphics.lineStyle(10,
1LineScaleMode.VERTICAL,
2
3
4
5
6
7
8
9
0xFF0000,
1,
CapsStyle.SQUARE,
JointStyle.BEVEL, 10);
miClip.graphics.beginFill(0xFF0000);
miClip.graphics.moveTo(10, 10);
miClip.graphics.lineTo(10, 100);
miClip.graphics.lineTo(100, 100);
miClip.graphics.lineTo(100, 10);
miClip.graphics.lineTo(10, 10);
miClip.graphics.endFill();
false,
c) Hacia abajo.
6. Cuando utilicemos la API de Flash para dibujar, podremos declarar la forma del borde
en cualquier momento.
a) Verdadero.
b) Falso.