Professional Documents
Culture Documents
Presentacin . 3
Contenido.
Captulo 1 .. 4
Novedades de la Versin CS 5.5. Entorno de Trabajo.
Herramientas de Seleccin y Dibujo. Uso de Rellenos.
Escenas, Lnea de Tiempo, Capas.
Captulo 2 .. 27
Manejo de Herramientas Vectoriales. Uso de Textos.
Smbolos e Interpolaciones.
Captulo 3 .. 65
Mscaras. Botones Comunes y Personalizados.
Acciones.
Captulo 4 .. 74
Generar y Publicar pelculas. Usando precargadores.
Captulo 5 .. 86
Introduccin a ActionScript 3.0. Fundamentos de Programacin.
Tipos de Datos. Conversiones.
Captulo 6 .. 92
Estructuras de Control Condicionales y Repetitivas.
Captulo 7 .. 100
Clips de Pelcula: Manejo de propiedades.
Deteccin de teclas pulsadas. Carga y descarga de elementos.
Captulo 8 .. 111
Interacciones con el Mouse. Manejo de Colisiones.
Trabajo con Sonido. Navegacin usando Botones.
Editor de Movimiento
Con el editor de movimiento es posible editar TODO. Hay curvas detalladas para el movimiento
en X, en Y, las escalas, dimensiones, deformacin, rotaciones, todo. Todo es controlable y
ajustable en detalle. Ideal para el neurtico promedio de la animacin profesional.
Cinemtica Inversa
De esta forma toma nombre la mejor opcin de esta novedosa versin de Flash. Esta opcin
viene relacionada con la herramienta hueso, con la que podremos articular las animaciones de
forma que podremos realizar animaciones de una persona andando o de cualquier tipo de
articulacin.
2
5
1. Barra de Men.
2. Cuadro de Herramientas.
3. Panel de Propiedades.
4. rea de Trabajo o Escenario.
5. Lnea de Tiempo.
SELECCIN Y DIBUJO
Podemos iniciar creando un nuevo documento, desde la pantalla inicial establecemos el lenguaje
a utilizar: ActionScript 3.0.
Podramos definir la velocidad de fotogramas o cuadros por segundo (FPS), el tamao del
documento (400 x 300) y el color de fondo del escenario (celeste).
a. Herramientas de Dibujo.
Nos permite crear dibujos vectoriales, tales como formas conocidas: rectngulos, valos,
etc., lneas rectas o curvas, etc. Estas herramientas las podemos encontrar en el Cuadro
de Herramientas (CTRL + F2, o desde el Men Ventana > Herramientas).
Ejercicio.
1 2
- Intenta dibujar una nube activando el botn ENDEREZAR, y nota el tipo de figura que
obtiene.
- Pulse CTRL + S para guardar el archivo y coloque el nombre de PAISAJE. Por defecto
se guarda con extensin FLA. Para que este archivo pueda ser abierto en una versin
anterior del programa, establecer en el tipo: DOCUMENTO DE FLASH CS4.
Si hacemos un doble clic sobre el centro de la forma, al moverlo, se observa que ahora
es todo el objeto que puede ser desplazado.
Esto tambin se logra al activar la herramienta Seleccin (o pulsar la tecla V), y al trazar
un rea alrededor de la forma.
Bloquear relleno
- Site el puntero dentro de cualquier rea cerrada y haga clic. La siguiente ilustracin
muestra el relleno de un rea cerrada:
Flash es flexible en la interpretacin del concepto "cerrado" de las formas. Admite que la
forma puede no estar cerrada del todo y tener algn "hueco". En estos casos, Flash
aplicar el relleno seleccionando la opcin que ms convenga en el modificador Tamao
de hueco.
Adems, si activa la Ventana de Colores (Men Ventana > Color), puede manipular
mejor el color a elegir, y el tipo de relleno (slido o degradado).
4 2 3
Se puede establecer el tipo (1), el color (2), la tonalidad del color (3), los valores Rojo,
Verde y Azul (4), el grado de opacidad (5).
3 4
Establecer el tipo Radial (1), elegir la aguja que corresponde a la ubicacin del color (2),
el color Rojo (3), una tonalidad media del rojo (4) y se observa la muestra previa (5).
3. Elija el color.
2. Elija el punto
(interno o externo)
4. Elija el tono de color.
Selector que amplia o reduce la superficie del Selector que permite rotar el
degradado. rango del degradado.
TRANSFORMANDO FORMAS
Distorsionar Envoltura
Con la herramienta Seleccin, haga doble clic en el objeto que desea escalar.
Si creamos animaciones del tipo cartoons, el tiempo es completamente lineal, con un punto
inicial y otro final. En otro tipo de usos, las animaciones poseen tiempos estticos en los que no
sucede ninguna accin: las animaciones se dan en respuesta a una accin del usuario.
a. Escenas
El tiempo en Flash se divide en Escenas. Pero estas escenas se pueden utilizar de dos
modos diferentes:
- Web y otros usos: Aqu las escenas son muy tiles para organizar el trabajo. Si
tienes un sitio web, puedes crear una Escena por cada seccin de tu sitio: Inicio,
Portfolio, Biografa, Contacto. Cada una de estas secciones ser una Escena
Como vemos en el grfico, cuando creamos animaciones del tipo cartoon, las escenas
siguen un orden y siempre comienza con la Escena 1 y termina con la Escena X.
En otro tipo de trabajos, el orden de las escenas lo elige el usuario cuando interacta
con los elementos. De todas formas, siempre comenzaremos con la Escena 1, a partir
de la cual el usuario podr navegar entre el resto de las escenas.
Decamos que el tiempo se divide en Escenas. Existe un men donde veremos el listado
de las escenas que poseemos. Se pueden eliminar, duplicar o crear una nueva escena.
Tambin se pueden intercambiar o cambiar de orden. El men se visualiza con
Mayscula+F2.
c. Capas
Como complemento de nuestra Lnea de Tiempo estn las Capas. Su principal funcin
es organizativa. Supongamos que cre un crculo en el primer fotograma de la Capa 1.
Luego cre una animacin de ese crculo, aumentando su tamao hasta duplicarlo
definitivamente en el fotograma 10.
Cada objeto debe estar en su propia capa. Y ojo que cuando de objetos puede ser una
combinacin de elementos: si mi crculo es un sol en un paisaje y es lo nico que va a
tener animacin, podemos crear todo en la misma capa. Pero ms all de situaciones
como esta, no es conveniente ahorrar en capas, todo lo contrario. Cuando ms capas
tengamos, ms organizado estar nuestro trabajo.
- Agregar carpeta: Se puede agregar una carpeta para organizar capas all adentro.
De esta manera podremos organizar mejor las capas que poseemos, evitando un
largo listado de capas imposible de entender.
d. Fotogramas
Si este tema no es el ms importante del taller, se le acerca mucho. Dado que Flash es
un programa de animacin y los fotogramas son lo que hacen posible esa animacin,
dir que al menos son un engranaje fundamental en el funcionamiento de esta mquina.
Se le dice fotograma a cada una de las imgenes impresas en una tira de pelcula. En
este caso lo veremos un poco diferente, pero en esencia es lo mismo.
En los fotogramas clave vamos a insertar lo importante. Cmo es eso? Flash realiza
la animacin automticamente. Imagina una pelota que cae del cielo. En Flash no
necesitamos crear todos los fotogramas de la escena. nicamente creamos los
fotogramas clave: cuando la pelota est arriba y cuando est abajo. Son slo dos
fotogramas. El resto de los fotogramas los genera Flash.
e. La animacin
Con el botn izquierdo del mouse vers un men que tambin te permite insertar
fotogramas.
Qu pasa si quiero que un objeto inanimado (un crculo esttico, por ejemplo)
permanezca en la pelcula durante varios fotogramas?
Ejercicio.
- En la capa REBOTE, dibujar un OVALO. Esta ser la pelota que dar botes.
4
6
1 3 5 7
a. La Herramienta Lpiz
La herramienta Lpiz es exclusiva de Flash. Usted puede utilizarla para dibujar lneas,
formas o practicar el dibujo libre de formas. Para utilizar la herramienta Lpiz.
b. La Herramienta Pluma
- Utilice esta herramienta para dibujar lneas rectas, curvas suaves, ajustar ngulos y
modificar los segmentos de rectas y curvas, en un modo similar a como ya vimos
con la herramienta Flecha.
- Si desea dibujar ms lneas, contine haciendo clic. Cada vez que hace clic, Flash
conecta los puntos de anclaje.
- Si desea cerrar el trazado, site el puntero sobre el primer punto de anclaje y haga
clic. Flash rellenar el trazado.
- Para anular la seleccin de un trazado, mantenga pulsada la tecla Ctrl y haga clic
fuera del trazado. Tambin puede hacer clic en la herramienta Pluma o en otra
herramienta de la caja de herramientas.
Haga clic en otro punto, a la derecha del primer punto, y arrastre hacia arriba
para dibujar una curva.
Agregue otro punto y arrastre hacia abajo para dibujar una curva.
- Con la herramienta Pluma, usted puede agregar puntos de anclaje a un trazado que le
ayudarn a editarlo. Se puede tambin eliminar puntos de anclaje para que el trazado
sea ms suave.
Con la herramienta Pluma seleccionada, haga clic sobre un trazado existente para
visualizar sus puntos de anclaje.
Site el puntero sobre aquel punto de trazado donde desea agregar un punto de
anclaje y haga clic.
- Tambin puede editar trazados convirtiendo una lnea recta en una curva y viceversa.
- Con la herramienta Pluma seleccionada, haga clic sobre un trazado existente para
visualizar sus puntos de anclaje.
d. Edicin de curvas
- Utilice la herramienta Subseleccionar para seleccionar segmentos de un trazado y
editarlo.
e. Dibujo de objeto
Las fuentes Flash trabajan como si fueran un elemento vectorial (de hecho, lo son), por esto es
que son escalables: puedes aumentar o disminuir su tamao con la seguridad que se van a ver
con una calidad excelente. Tambin puedes realizar animaciones con fuentes.
En Flash no existe diferencia entre texto en caja y texto suelto, como s sucede en Photoshop e
Illustrator. Aqu siempre que utilizamos texto, Flash crear una caja contenedora. Inicialmente, si
hacemos un clic con la herramienta de texto en el espacio de trabajo y comenzamos a escribir,
el texto continuar linealmente. Si en vez de hacer clic, arrastramos el mouse generando una
caja, el texto quedar contenido en los lmites de esta caja (ejemplo 2). Las dimensiones de la
caja se pueden editar, siempre utilizando la herramienta de texto.
En Flash hay tres formatos de texto, cada uno con una funcionalidad diferente. Para cambiar el
formato de un texto debes tener seleccionada la herramienta de texto y elegir entre una de las
opciones del cuadro T. Veamos para que sirve cada una:
En el grfico podemos ver un sitio de ejemplo. Aqu se utiliz para la mayora del texto el
formato de Texto Esttico (Static Text).
Cuando tengo Texto Esttico, el Panel de Propiedades me muestra dos opciones extras:
1. Hacerlo seleccionable.
2. Linkearlo a una URL.
El Texto Esttico siempre est dentro de una caja contenedora cuyas dimensiones
dependen directamente de la cantidad de texto que haya. Esto es porque no tiene
sentido agrandar una caja de texto que no contenga texto.
b. Texto de Entrada
Este tipo de texto sirve para los casos en los que el usuario pueda ingresar texto al
sistema. El ejemplo ms comn es un formulario de contacto, pero existen otras
situaciones en las que podra ser interesante este tipo de interaccin con la persona que
visita tu sitio. En la imagen de arriba, dentro del formulario de consulta hay dos campos
con Texto de Entrada: la consulta en s misma y el espacio para escribir un e-mail.
En estos casos la caja contenedora de texto puede ser ms grande que el texto que
contiene. Aqu hay dos formas de crear una caja de texto: igual que en el texto esttico o
arrastrando con el cursor para crear una caja. De esta manera, puedes definir los lmites
del campo de escritura.
Tambin puedes definir un nombre de variable (Var) para trabajar luego con ActionScript
(esto lo veremos prximamente en nuestra clase de formularios de contacto).
La opcin a la izquierda de Var puede ser seleccionada en el caso que quieras mostrar
un recuadro alrededor del campo de texto. A la izquierda, bajo el smbolo <> podrs
renderizar el texto como HTML.
- El texto multilnea es un campo de texto donde la caja acta como lmite hacia los
costados. Si el texto supera el ancho de la caja, continuars escribiendo en una lnea
siguiente.
- El campo en lnea simple permite escribir texto en una nica lnea. Es muy til en un
formulario con varias opciones cortas como por ejemplo nombre, direccin, telfono.
- Texto multilnea sin envoltura. Esta caja de texto no tiene lmites. A medida que vas
escribiendo continas en la misma lnea hasta que das enter para pasar a la lnea
inferior.
Escribir el texto y luego agregar el Filtro Iluminado desde el Panel Filtro y signar los siguientes
valores.
EJEMPLO 2
Para este tipo de efecto tenemos que aplicar varias tcnicas veremos paso a paso como crearlo.
1. Escribir el texto de preferencia que sea una fuente gruesa Para este ejemplo
utilizaremos Impact.
5. Finalmente podemos pulirlo con un filtro tipo Bisel, pero antes debemos
convertirlo en smbolo para que se pueda aplicar un filtro. Le aplicaremos el
Filtro Bisel de degradado., con los siguientes valores.
Primero que nada debemos cambiar el tipo de texto a texto dinmico y que este activada la
opcin multilnea y activamos luego el Panel de componentes.
Ahora solo queda reducir el tamao del marco de texto y acomodar nuevamente el Scrollbar y ya
tendremos nuestra barra de desplazamiento en el texto.
Probar la Pelcula (CTRL + ENTER) y ahora apreciaremos el texto con su respectiva barra de
desplazamiento.
Los Smbolos provienen de objetos que hemos creado utilizando las herramientas que nos
proporciona Flash CS4.
Estos objetos al ser transformados en smbolos, son incluidos en una biblioteca en el momento
en que son creados, lo que permite que sean utilizados en varias ocasiones, ya sea en la misma
o en otra pelcula.
Para crear un nuevo smbolo nos dirigimos al Men Insertar > Nuevo smbolo, o pulsando
CTRL+F8.
Tambin puede importar imgenes (Men Archivo > Importar > Importar a Biblioteca)
En esta versin de Flash CS4 ha habido un cambio importante en las animaciones, lo que hasta
ahora se llamaba interpolacin de movimiento, pasa a llamarse interpolacin clsica y la
interpolacin de movimiento actual es totalmente nueva, ms potente y verstil
a. Interpolacin de Movimiento
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 donde nos plazca. Y desplazamos
el smbolo. Veremos que aparece una lnea punteada, por defecto recta, que representa
el trazado de la animacin.
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.
El trazado recto generado por defecto podemos modificarlo directamente haciendo clic y
arrastrndolo, una vez seleccionada previamente la herramienta Seleccin.
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.
Y a la derecha del todo encontramos la grfica. Podemos ver que cada propiedad tiene
una grfica especfica, que indica los fotogramas en horizontal y los valores de la
propiedad en vertical. Si hacemos clic sobre una propiedad, veremos que su grfica se
ADOBE FLASH CS 5.5 44
expande para editarla con facilidad. En la grfica encontramos los fotogramas clave
marcados como un cuadrado negro, o verde cuando est seleccionado. Estirando de
ellos, o de la lnea de la grfica podemos alterar los valores.
En la grfica, vemos que los puntos suelen formar un vrtice. Una opcin muy
interesante es poder transformarlos en puntos suavizados (desde el men contextual del
fotograma), creando una curva Bezier, lo que formar transiciones ms suaves entre los
picos de valor. Esto no es aplicable a las propiedades X,Y, Z.
c. Interpolacin de Formas.
Las interpolaciones de forma funcionan mejor con las formas simples. Evite las formas
con recortes o espacios negativos. Experimente con las formas que desee utilizar para
determinar los resultados. Puede utilizar los consejos de forma para indicar a Flash qu
puntos de la forma de inicio deben corresponder a los puntos especficos de la forma
final.
- En el fotograma 25, insertar un fotograma clave vacio, y digitar otro texto diferente.
Separar en formas individuales.
Lo primero de todo, no obstante, es crear un fichero nuevo para Action Script 3.0, ya que
la funcionalidad de huesos solamente est disponible para Flash Player 10 o superiores
y si se escoge un fichero nuevo para Action Script 2.0 sencillamente esta herramienta no
funcionar.
El primer mtodo consiste en crear un smbolo de clip de pelcula por cada hueso que se
quiera insertar en la pelcula. De esta manera al dibujar el personaje hemos de distribuir
las partes del cuerpo en diferentes piezas y convertirlas en clip de pelcula.
Una buena idea es crear el dibujo en Illustrator. En el siguiente ejemplo podis ver un
personaje creado en Illustrator y a la derecha el despiece de las diferentes partes.
Se vuelve a repetir el proceso con el brazo, en este caso arrastrando desde el brazo al
antebrazo y de ah a la mano.
Ahora con la herramienta de la flecha negra es posible manipular cualquier hueso desde
cualquier punto de la lnea de tiempo. Podemos aadir ms fotogramas a las capas de
los esqueletos. Despus podemos avanzar el cabezal de reproduccin a un nuevo
fotograma y al realizar un movimiento con los huesos se crear automticamente un
fotograma clave.
Para evitar que las piezas roten o se muevan ms all de las posiciones que le seran
propias, es posible restringir el movimiento y la rotacin de un hueso haciendo clic en l
y activando la restriccin de rotacin a los grados introducidos en el panel de
propiedades.
Tambin es importante que el color perimetral de la figura sea el mismo, ya que es este
color el que utiliza Flash para identificar la continuidad de una figura grfica. Por la parte
interior de la figura se pueden introducir ms colores siempre y cuando no lleguen al
borde de la silueta.
A partir de este momento se pueden manipular los huesos desde cualquier fotograma de
la lnea de tiempo, al hacerlo el grfico se deformar para adaptarse a la forma del
esqueleto.
Por supuesto se pueden crear clips de pelculas con esqueletos en su interior para crear
mayor nmero de efectos.
Ahora podremos deformarlo y darle una nueva posicin al eslabn sin mucha dificultad.
ESTILO DE HUESOS
Podemos trabajar con 3 estilos de huesos los cuales te permitirn controlar en maneras distintas
la cinemtica inversa.
Estilo Cable
Estilo Solido
Estilo Lnea
A este grafico del murcilago le hemos creado un sistema de huesos que permitir mover sus
alas.
Al momento que realizamos un cambio en la articulacin notaremos que siempre una parte del
grafico sigue a uno de los huesos.
Hueso vinculado
Punto seleccionado
Basta con decir que estas capas se colocan "encima" de las capas a las que enmascaran y slo
dejan que se vea la parte de stas que tapan los objetos situados en las capas mscara (son
como filtros). Al igual que las capas gua, los objetos existentes en este tipo de capas tampoco
se ven en la pelcula final. S se vern los objetos de su correspondiente capa enmascarada a
los que estn "tapando".
1. En una nueva pelcula de fondo color negro, importar al escenario la imagen HORROR.
Fotograma 20 Fotograma 40
BOTONES
b. Creacin de Botones.
Los botones son clips de pelcula interactivos de cuatro fotogramas. Cuando se
selecciona el comportamiento Botn para un smbolo, Flash crea una Lnea de tiempo
con cuatro fotogramas. Los tres primeros muestran los estados Reposo, Sobre y
Presionado del botn; el cuarto define la zona activa del mismo. La Lnea de tiempo no
se reproduce realmente; simplemente reacciona a los movimientos y acciones del
puntero saltando al fotograma correspondiente.
El estado Reposo, representa el aspecto del botn siempre que el puntero no est
sobre l.
El estado Sobre, representa el aspecto que asume el botn cuando el usuario pase
el puntero por encima de l.
El estado Zona activa, define la zona que responder al clic del mouse.
Los botones pueden tener cualquier forma y se pueden aplicar a cualquier elemento
grfico del rea de trabajo. Para crear un botn, debe empezar por un smbolo.
- Realice el diseo de lo que ser su botn (de ser necesario inserte ms capas).
- Pruebe la pelcula.
- La ZONA ACTIVA es el rea del botn que responde cuando se hace clic. La
imagen del fotograma Zona activa debe ser lo suficientemente grande para abarcar
todos los elementos grficos de los fotogramas Reposo, Presionado y Sobre. Si no
se especifica un fotograma Zona activa, se utilizar la imagen para el estado Reposo
como fotograma Zona activa.
- Haga doble clic sobre el botn para entrar al modo edicin de smbolos.
Eliminar el
fotograma clave
- En el botn anterior, insertar una nueva capa. Luego incluir un fotograma clave vacio
en el estado SOBRE. Insertar aqu el sonido desde la Biblioteca.
ACCIONES
Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros
elementos de Flash CS4 vamos a comentar dos de las ms comunes.
Al crear un archivo, habrs visto que podemos elegir distintas versiones de ActionScript (AS 3.0,
AS 2.0...). Esto se refiere al lenguaje de programacin que podemos emplear 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 al utilizar la versin 3.0,
por ser la ms actual y potente, nos obliga a escribir el cdigo ActionScript.
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 el Panel de Acciones (Ir al Men Ventana > Acciones). Se mostrar un rea en
blanco en la que podemos escribir:
miBoton.addEventListener('click', accionesMiBoton);
function accionesMiBoton(event):void{
//Acciones
}
- Abrir una pgina web: con esto conseguiremos abrir una pgina cualquiera de internet
(o una pelcula Flash), lo que nos servir para irnos desplazando por webs que
contengan ms de una pgina, o permitir al usuario descargarse archivos entre otras
cosas.
Por lo tanto, si tenemos un botn cuyo nombre de instancia es btnVisitar que queremos
que abra la web http://www.sise.edu.pe, escribiramos:
btnVisitar.addEventListener('click', visitarSise);
function visitarSise(event):void{
navigateToURL(new URLRequest("http://www.sise.edu.pe"), "_blank");
}
Por ejemplo, podemos tener el botn btnPausar para parar la pelcula y el botn
btnContinuar para reproducirla:
btnContinuar.addEventListener('click', continuar);
function continuar(event):void{
play();
}
Tal cual lo hemos puesto, afectara a la pelcula principal. Si lo que queremos parar o
reproducir es un clip determinado, habra que escribirlo delante de la accin, separado
por un punto. Por ejemplo miClip.stop();
CONSIDERACIONES EN EL DIBUJO
Aunque los degradados queden muy vistosos, tambin requieren ms memoria, por lo
que debemos evitar su uso excesivo, en la medida de lo posible.
Hemos visto que la animacin de lneas es bastante til. Sin embargo el uso de lneas
que no sean las definidas por defecto, har que el tamao de la descarga aumente. Por
tanto evitemos las lneas discontinuas, de puntos, etc.
CONSIDERACIONES EN LA ORGANIZACIN:
Agrupar los objetos que estn relacionados, con el Men Modificar > Agrupar.
Ya hemos comentado el mayor tamao de los mapas de bits, lo que hace que debamos
minimizar el nmero de apariciones de stos en nuestra pelcula.
CONSIDERACIONES EN LA ANIMACIN:
Utilizar lo ms que podamos las interpolaciones de movimiento y las guas para reducir
el nmero de fotogramas clave y el tamao de la pelcula.
Evitar el uso de la interpolacin por forma para animaciones de cambio de color, cuando
sea posible.
b. Uso de Precargadores.
Un preloader se usa principalmente para evitar la carga parcial de la pelcula, mientras
sta se est reproduciendo, lo que, en ocasiones en las que la pelcula es de un tamao
considerable, hace que la pelcula se vea entrecortada.
Se pueden complicar mucho ms, pero nosotros haremos uno sencillo que nos sirva
para entender bien el concepto, y la manera de hacerlo.
Ahora insertaremos una nueva escena (Men Insertar > Escena). Deber ser la
primera que se ejecute. Para asegurarnos de ello accedemos al Men Ventana > Otros
Paneles > Escena, y en la ventana que aparece arrastramos la escena que acabamos
de crear hasta que est la primera. En nuestro ejemplo le hemos llamado "Preloader" y
hemos supuesto que la Escena con la pelcula se llama "Pelcula" (lgicamente). Deber
quedar algo similar a lo que muestra la imagen.
En la escena recin creada insertaremos otra capa, de manera que nos queden dos
capas a las que llamaremos, "Accin" y "Cargando".
Podemos saber cuntos fotogramas se han cargado hasta ahora con la propiedad
this.framesLoaded, y cuantos fotogramas hay en total con this. totalFrames.
Conociendo estos datos, lo nico que tenemos que hacer es preguntar si los fotogramas
cargados igualan a los totales . Si es que s, ya podemos avanzar hasta la siguiente
escena. Y si no, podemos volver al principio de nuestro loader, lo que lo ir repitiendo en
bucle.
if(this.framesLoaded==this.totalFrames) {
gotoAndPlay(1, "Pelcula")
} else {
gotoAndPlay(1, "Cargador")
}
Por lo tanto, lo que har esta instruccin es reproducir la escena Cargador, y al final
comprobar el estado de la carga. Si se no se ha completado, vuelve al principio del
cargador, lo que har que vuelva a pasar por la instruccin. Cuando la carga est
completa, iniciamos la Pelcula.
Y esto es todo lo que hay que hacer para crear un preloader (aunque por supuesto se
puede hacer ms sofisticado), con lo que los visitantes ya no huirn de nuestra web. En
los primeros temas de JavaScript veremos cmo mostrar en el preloader el estado de la
carga.
Para publicar una pelcula Flash en Internet de manera que forme parte de una pgina
web deberemos insertarla en un archivo tpico de pginas web cuyo lenguaje de
programacin sea del estilo del HTML. Para ello debemos atender a las opciones de
publicacin HTML que nos ofrece Flash, y que nos ayudarn a que nuestra pelcula se
visualice como realmente queremos.
Las opciones de este tipo de publicacin estn en el Men Archivo > Configuracin de
Publicacin... (Pestaa HTML).
Nos mostrar una ventana donde Erigiremos donde se guardar el archivo Nuevo, as como el tipo
de formato de imagen.
EXPORTAR PELCULA
Si queremos exportar toda la animacin en un formato de video o simplemente un GIF animado
lo podemos hacer seleccionando la opcin Exportar pelcula. Para exportar de esta forma ya no
es necesario estar ubicado en algn fotograma especfico ya que automticamente exportara
toda la pelcula.
De igual manera que el anterior tipo de exportacin vamos a configurar la salida. Una vez hecho
esto ya podremos apreciar nuestro nuevo video en el escritorio.
PUBLICAR A CD ROM
Una vez hecho esto podemos cambiar la ruta de donde se publicara el exe dndole clic en la
carpeta que esta al costado del nombre del archivo.
DISTRIBUIR EN CD-ROM
Para grabarlo no hay mucho problema, se puede guardar como archivo de datos en un CD o
DVD, pero nuestro objetivo es que podamos visualizar nuestra animacin de manera automtica
cuando coloquemos el Disco, para que esto suceda necesitamos un Documento de extensin
Ahora procedemos a elegir los archivos que irn a nuestro disco los cuales sern.
- Animacionsimple.exe
- Icono.ico
- Autorun.inf
Esto significa que tendremos que modificar el cdigo del Documento autorun el cual debe de
estar en esta forma.
Tener en cuenta cada telfono tiene distintas capacidad as como su resolucin de pantalla y
funcionalidad de botones. Sera bastante tedioso crear un modelo y luego probarlo para ver
cmo encaja a cada celular, para esto Adobe nos Ofrece el Device Central.
Este programa nos permite simular como se veran los distintos contenidos de los programas de
Adobe en los tambin distintos modelos de celular.
De acuerdo al Modelo de Celular el programa te mostrara sus capacidad, la versin de Flash Lite
y el Action Script compatible con el modelo.
Para nuestro Ejemplo buscaremos un Modelo de Celular NOKIA 5300 desde el panel Biblioteca
en Lnea
a. Caracteristicas generales
El ActionScript es, como su nombre indica, un lenguaje de script, esto quiere decir
que no har falta crear un programa completo para conseguir resultados,
normalmente la aplicacin de fragmentos de cdigo ActionScript a los objetos
existentes en nuestras pelculas nos permiten alcanzar nuestros objetivos.
b. El Panel Acciones
En Flash CS4, el Panel Acciones sirve para programar scripts con ActionScript. Esto es,
que todo lo que introduzcamos en dicho Panel se ver reflejado despus en nuestra
pelcula. Debemos tener claro desde un principio que el Panel Acciones puede hacer
referencia a Fotogramas u objetos, de modo que el cdigo ActionScript introducido
afectar tan slo a aquello a lo que referencia el Panel.
El Panel Acciones se divide en 2 partes, a la izquierda tenemos una ayuda facilitada por
Flash que nos da acceso de un modo rpido y muy cmodo a todas las acciones,
objetos, propiedades etc. que Flash tiene predefinidos. Estos elementos estn divididos
en carpetas, que contienen a su vez ms carpetas clasificando de un modo eficaz todo
lo que Flash pone a nuestra disposicin. Para insertarlos en nuestro script bastar con
un doble clic sobre el elemento elegido.
El nombre de la variable
El tipo de datos que puede almacenarse en la variable
El valor real almacenado en la memoria del equipo
As, podemos definir el uso de una variable de tipo numrica, y que almacene el
valor de 100, de la siguiente manera:
var n:Number;
n=100;
trace(n);
O tambin:
var n:Number=100;
Trace(n);
b. Tipos de Datos
En ActionScript se pueden utilizar muchos tipos de datos para las variables que se
crean. Algunos de estos tipos de datos se pueden considerar "sencillos" o
"fundamentales":
OPERADORES ARITMETICOS
SIGNO DETALLE
+ Suma
- Resta
* Multiplicacin
/ Divisin
% Mdulo o Resto
OPERADORES DE COMPARACION
SIGNO DETALLE
> Es mayor que
< Es menor que
>= Es mayor o igual que
<= Es menor o igual que
== Es igual que
!= Es diferente que
OPERADORES DE ASIGNACION
SIGNO DETALLE
X++ Incremento de 1 en 1
X-- Decremento de 1 en 1
X=Valor A X se le asigna el Valor
Ejercicio.
1. Crear una pelcula usando dos capas, una para el formulario (GUI), y otra para las
acciones (Acciones)
o Se crea una funcin calcular, que permita convertir los valores ingresados a
datos de tipo uint, para promediarlos y mostrarlos en el campo Promedio.
Se dice que se produce una conversin de tipo cuando se transforma un valor en otro
valor con un tipo de datos distinto. Las conversiones de tipo pueden ser implcitas o
explcitas.
Ejemplo.
txtProm.text = El promedio es +p;
Ejemplo.
ep = uint(txtEP.text);
As tenemos:
a. Estructuras de Decisin
La sentencia condicional if..else permite comprobar una condicin y ejecutar un bloque
de cdigo si dicha condicin existe, o ejecutar un bloque de cdigo alternativo si la
condicin no existe.
- En este otro ejemplo, se muestra la condicin del alumno, de acuerdo al clculo del
promedio.
Para crear este formato de clculo, usamos dos capas (igual que en el ejemplo del
captulo anterior):
a. Estructura FOR
El bucle for permite repetir una variable para un rango de valores especfico. Debe
proporcionar tres expresiones en una sentencia for: una variable que se establece con
un valor inicial, una sentencia condicional que determina cundo termina la
reproduccin en bucle y una expresin que cambia el valor de la variable con cada
bucle. Por ejemplo, el siguiente cdigo realiza cinco bucles. El valor de la variable i
comienza en 0 y termina en 4, mientras que la salida son los nmeros 0 a 4, cada uno
de ellos en su propia lnea.
b. Estructura WHILE
El bucle while es como una sentencia if que se repite con tal de que la condicin sea
true. Por ejemplo, el cdigo siguiente produce el mismo resultado que el ejemplo del
bucle for:
- Mostrar la serie: 20, 30, 40, 50, . (20 trminos), y la suma de dichos trminos.
Clips de Pelculas
- Manejando sus Propiedades.
- Aplicando cambios de posicin, rotacin, escala y transparencia.
Deteccin de las teclas pulsadas.
Carga y descarga de elementos desde la Biblioteca.
Cuando necesitemos crear una pelcula Flash dentro de otra pelcula, pero no queramos tener
2 ficheros separados ni molestarnos en cargar una pelcula u otra, deberemos crear un objeto
movieclip. Entre sus propiedades especiales destaca que los objetos "clip de pelcula" tienen,
internamente, una lnea de tiempos que corre INDEPENDIENTEMENTE de la lnea de tiempos
de la pelcula principal de Flash, lo que nos permite crear animaciones tan complejas e
independientes como queramos (podemos crear tantos clips de pelcula dentro de otros como
queramos, por ejemplo).
Los Mtodos suelen ser especficos de cada objeto, y su estudio requerira un nuevo
curso completo, (recomendamos consultar la ayuda incorporada en el Flash CS3 cuando
surjan dudas), pero hay bastantes propiedades de los objetos que son comunes a
muchos de ellos. Vamos a ver cules son las ms usadas y qu representan.
Dos tareas son las que se pueden llevar a cabo con las propiedades de un MovieClip, la
primera es leer su contenido y la segunda modificarlo. Para realizar cualquiera de estas
tareas se tiene que indicar lo siguiente:
Para leer
nombre_variable = nombre_MC.propiedad
Para Modificar
nombre_MC.propiedad = valor;
En ambos ejemplos se puede identificar que ya sea para leer o modificar las
propiedades de un MC primero se especifica el nombre del MC y luego separado por un
PUNTO la propiedad.
- POSICION: Usar las propiedades "x" e "y" para modificar o leer la posicin de un
MovieClip.
- OTROS:
VISIBLE: valor booleano en donde "false" es oculto y "true" es visible.
WIDTH: indica el ancho de un MC.
HEIGHT: indica la altura de un MC.
stage.addEventListener(KeyboardEvent.KEY_DOWN, presionaTecla);
Y pasamos a definir la funcin. Lo que hace esta funcin es comprobar el cdigo de la tecla
presionada (37-38-39-40 corresponden a las flechas del teclado) a travs de keyCode. Al
comprobar cual tecla est presionada.
Inicialmente establecemos la posicin inicial del mvil ( movil.x=50; ), y al mover con las teclas,
establecemos un valor de 20 (esto puede ser ms o menos).
movil.x=50;
stage.addEventListener(KeyboardEvent.KEY_DOWN,direccion);
function direccion(tecla:KeyboardEvent):void{
- Previsualizar la pelcula. Lo que faltara mejorar es evitar que al mover la escopeta muy
a la derecha o a la izquierda, esta desaparezca. Para ello podemos establecer unos
lmites de movimiento usando las propiedades del stage.
miContenedor.addChild(objeto);
Esto se puede emplear para agregar archivos externos, pero nosotros vamos a 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, haciendo clic derecho > Propiedades >
Botn Avanzado. Aqu, marcamos la opcin Exportar para ActionScript, y le damos el nombre de
la clase. Recuerda este nombre, porque es el que utilizaremos para crear los objetos.
- Para crear una clase y usarlo desde ActionScript, hacemos clic sobre el botn
AVANZADO, y luego marcamos las opciones:
Empezaremos viendo una de las funciones ms tiles para el ratn: arrastrar y colocar.
Utilizando las funciones StartDrag() y StopDrag() es muy sencillo arrastrar y colocar objetos por
el Escenario.
La funcin startDrag permite varios parmetros:
miObjeto.startDrag(bloqueaCentro, rectngulo);
En bloqueaCentro podremos pasarle un valor booleano (true o false) que indicar si el arrastre
se realizar desde el centro del clip (true) o desde el punto donde hizo clic el usuario (false).
El otro parmetro, rectngulo, nos permite definir los lmites de la zona donde podemos
arrastrar. Esta opcin es muy til cuando queremos que el arrastre slo se pueda realizar sobre
una zona determinada, como por ejemplo las tizas de las barras de desplazamiento, que no se
pueden arrastrar fuera de la zona rectangular que delimitan dichas barras.
Una propiedad muy til que tambin te ser de mucha ayuda es la de dropTarget. Te permitir
averiguar sobre qu objeto se ha soltado el objeto arrastrado:
miObjeto.addEventListener('mouseDown', arrastrar);
function arrastrar(event):void {
miObjeto.startDrag();
}
miObjeto.addEventListener('moseUp', soltar);
function soltar(event):void {
miObjeto.stopDrag();
trace(miObjeto.dropTarget);
}
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:
Con todo lo que hemos aprendido podemos ya sustituir el cursor del ratn normal por uno de
nuestro agrado.
Podemos volver a visualizar el ratn, por ejemplo, porque cambiamos de fotograma, con el
cdigo:
Mouse.show();
Esto lo podremos evaluar y tratar con los mtodos hitTestPoint(x, y) para detectar si una
coordenada cae dentro del objeto, y hitTestObject(object) que nos indica si dos objetos se
solapan (chocan).
Su uso tiene dos posibilidades, ambas muy sencillas. Puedes evaluar si en un punto en concreto
se encuentra un objeto especfico (muy til para detectar los clics del ratn o donde se encuentra
en cada momento):
miClip.addEventListener(MouseEvent.MOUSE_UP,miFuncion);
function miFuncion(event:MouseEvent):void{
if (miClip.hitTestPoint(mouseX,mouseY) {
//coincidencia
}
}
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 al 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:
miClip.hitTestObject(miOtroClip);
- En el siguiente ejemplo, hemos creado un escenario con una imagen de fondo, y hemos
diseado un clip de pelcula mcAlien a partir de dos imgenes.
- Previsualizar. Ahora lo que vamos a realizar es de que, al hacer clic sobre un ALIENS,
este desaparezca y el puntaje (un texto dinmico de nombre txtpuntos),vaya
incrementndose en uno.
En todos los casos, excepto en los ms sencillos, la aplicacin debe prestar atencin al
progreso de carga del sonido y detectar los posibles errores. Por ejemplo, si el sonido
del clic tiene un tamao bastante grande, es posible que no est completamente
cargado cuando el usuario haga clic en el botn que activa dicho sonido. Si se intenta
reproducir un sonido no cargado, puede producirse un error en tiempo de ejecucin.
Resulta ms seguro esperar a que se cargue totalmente el sonido antes de permitir que
los usuarios realicen acciones que puedan iniciar la reproduccin de sonidos.
import flash.events.Event;
import flash.media.Sound;
import flash.net.URLRequest;
var s:Sound = new Sound();
s.addEventListener(Event.COMPLETE, onSoundLoaded);
var req:URLRequest = new URLRequest("bigSound.mp3");
s.load(req);
function onSoundLoaded(event:Event):void
{
var localSound:Sound = event.target as Sound;
localSound.play();
}
En primer lugar, el cdigo de ejemplo crea un nuevo objeto Sound sin asignarle un valor
inicial para el parmetro URLRequest. A continuacin, detecta el evento
Event.COMPLETE del objeto Sound, que provoca la ejecucin del mtodo
onSoundLoaded() cuando se cargan todos los datos de sonido. Despus, llama al
mtodo Sound.load() con un nuevo valor URLRequest para el archivo de sonido.
b. Reproduccin de Sonidos
Al reproducir sonidos con ActionScript 3.0, se pueden realizar las operaciones
siguientes:
Para realizar estas operaciones durante la reproduccin deben utilizarse las clases
SoundChannel, SoundMixer y SoundTransform.
Cuando se llama al mtodo Sound.play() con los parmetros startTime y loops, el sonido
se reproduce de forma repetida desde el mismo punto de inicio cada vez, tal como se
muestra en el cdigo siguiente:
En este ejemplo, el sonido se reproduce desde un punto un segundo despus del inicio
del sonido, tres veces seguidas.
Para reanudar la reproduccin del sonido desde el mismo punto en que se detuvo, hay
que pasar el valor de la posicin almacenado anteriormente.
channel = snd.play(pausePosition);
Es posible que la aplicacin desee saber cundo se deja de reproducir un sonido para
poder iniciar la reproduccin de otro o para limpiar algunos recursos utilizados durante la
reproduccin anterior. La clase SoundChannel distribuye un evento
Event.SOUND_COMPLETE cuando finaliza la reproduccin de un sonido. La aplicacin
puede detectar este evento y adoptar las medidas oportunas como se muestra a
continuacin:
import flash.events.Event;
import flash.media.Sound;
import flash.net.URLRequest;
var snd:Sound = new Sound();
var req:URLRequest = new URLRequest("smallSound.mp3");
snd.load(req);
var channel:SoundChannel = snd.play();
channel.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete);
Sin embargo, este cdigo slo indica porcentajes de reproduccin precisos si los datos
de sonido se han cargado completamente antes del inicio de la reproduccin. La
propiedad Sound.length muestra el tamao de los datos de sonido que se cargan
actualmente, no el tamao definitivo de todo el archivo de sonido. Para hacer un
seguimiento del progreso de reproduccin de un flujo de sonido, la aplicacin debe
estimar el tamao final de todo el archivo de sonido y utilizar dicho valor en sus clculos.
Se puede estimar la duracin final de los datos de sonido mediante las propiedades
bytesLoaded y bytesTotal del objeto Sound, de la manera siguiente:
var estimatedLength:int =
Math.ceil(snd.length / (snd.bytesLoaded / snd.bytesTotal));
var playbackPercent:uint = 100 * (channel.position / estimatedLength);
import flash.events.Event;
import flash.media.Sound;
import flash.net.URLRequest;
var snd:Sound = new Sound();
var req:URLRequest = new
URLRequest("http://av.adobe.com/podcast/csbu_dev_podcast_epi_2.mp3");
snd.load(req);
var channel:SoundChannel;
channel = snd.play();
addEventListener(Event.ENTER_FRAME, onEnterFrame);
channel.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete);
function onEnterFrame(event:Event):void
{
var estimatedLength:int =
Math.ceil(snd.length / (snd.bytesLoaded / snd.bytesTotal));
var playbackPercent:uint =
Math.round(100 * (channel.position / estimatedLength));
trace("Sound playback is " + playbackPercent + "% complete.");
}
function onPlaybackComplete(event:Event)
{
trace("The sound has finished playing.");
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}
Una vez iniciada la carga de los datos de sonido, este cdigo llama al mtodo snd.play()
y almacena el objeto SoundChannel resultante en la variable channel. A continuacin,
aade un detector de eventos a la aplicacin principal para el evento
- En el ejemplo que estamos creando, vamos a incluir un sonido de fondo que se repita
de forma continua.
NAVEGACION
En este captulo, la de Navegacin, est especialmente orientada a la web, pues veremos
cmo crear elementos que te ayudarn ms tarde a crear tus propias presentaciones, secciones,
etc. Todo ello apoyado con animaciones y vinculadas entre s.
Los Botones
Uno de los elementos que ms nos van a ayudar a la hora de aadir interactividad en el
diseo son los botones.
En el ejemplo nos hemos ayudado de los botones para crear la navegacin entre las
diferentes secciones.
As que el primer paso, despus de haber creado la interfaz de la pelcula en una capa, ser
crear e insertar los botones en una nueva capa para trabajar con mayor facilidad.
Para asignarle una accin a un botn es necesario darle un nombre de instancia. Para
ello (y como hemos visto en unidades anteriores) escribimos el nombre que queramos (al cual
nos referiremos ms tarde para llamar al botn) en el Inspector de Propiedades, en este
caso lo hemos llamado equipo.
Luego, creamos otra capa para poder insertar las acciones que necesitarn nuestros
botones, abrimos el Panel Acciones y aadiremos el cdigo que deber realizar el botn.
Para capturar el evento tenemos que aadir un escuchador que se encargue de estar
pendiente de si sucede ese evento, al elemento correspondiente. En nuestro caso, al botn.
Adems del evento, debemos de indicar el nombre de una funcin, que ser el cdigo que
se ejecute al producirse el evento.
miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(e:MouseEvent):void {
//cdigo de la funcin
Una vez insertados los botones y definidos los eventos sobre los que deben actuar,
tendremos que decidir qu queremos que hagan.
De esta forma, si no aplicsemos ninguna accin sobre la lnea de tiempo, todas las
secciones se ejecutaran una seguida de la otra. Lo que queremos conseguir es que se
ejecute la primera (para mostrar la seccin principal) y el cabezal se pare hasta nueva orden
(para mostrar la segunda).
Esto har que cuando la animacin llegue a ese punto se detenga a la espera de nueva
orden.
Nosotros hemos colocado las acciones en una capa aparte llamada Acciones para as poder
acceder ms rpido a ella. El mtodo es el mismo, solamente habr que crear fotogramas
claves en aquellos sitios en los que queramos insertar un stop().
Los botones nos ayudarn a desplazar el cabezal por la lnea de tiempo. As que
modificaremos el cdigo de uno de los botones:
De esta forma, al hacer clic sobre ese botn, el cabezal de reproduccin se desplazar hasta
el fotograma que tiene la etiqueta "NOSOTROS" y reproducir a partir de all.
Existe otra forma, muy til, para nombrar los fotogramas. Del mismo modo que dbamos un
nombre de instancia a un botn lo haremos con un fotograma.
Basta con introducir una Etiqueta de fotograma para poder remitir el cabezal a ste:
prevFrame(), que har que el cabezal retroceda al fotograma anterior al que nos
encontramos.
nextFrame(), que har que el cabezal avance al fotograma siguiente al que nos encontramos.