Академический Документы
Профессиональный Документы
Культура Документы
Presentacin . 3
Contenido.
Captulo 1 .. 4
Novedades de la Versin CS4. 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 .. 55
Mscaras. Botones Comunes y Personalizados.
Acciones.
Captulo 4 .. 63
Generar y Publicar pelculas. Usando precargadores.
Captulo 5 .. 67
Introduccin a ActionScript 3.0. Fundamentos de Programacin.
Tipos de Datos. Conversiones.
Captulo 6 .. 73
Estructuras de Control Condicionales y Repetitivas.
Captulo 7 .. 80
Clips de Pelcula: Manejo de propiedades.
Deteccin de teclas pulsadas. Carga y descarga de elementos.
Captulo 8 .. 91
Interacciones con el Mouse. Manejo de Colisiones.
Trabajo con Sonido. Navegacin usando Botones.
PRESENTACION
Objetivos
Introduccin a Adobe Flash CS4.
Novedades de la versin CS4.
Entorno de Trabajo.
Seleccin y Dibujo.
- Herramientas de Dibujo.
- Seleccin de Objetos.
Cambiando el Relleno de Formas
- Herramienta Cubo de Pintura
- Herramienta Transformacin de Degradado.
Transformando Formas.
- Creando una primera animacin fotograma por fotograma: Escenas,
Lnea de Tiempo, Capas, Fotogramas, la animacin.
Transformacin 3D
Flash CS4 incluye una herramienta de rotacin 3D. Con slo arrastrar y soltar se puede rotar
un objeto en los ejes X, Y y Z. Realmente eso es todo lo que es posible hacer con la
transformacin 3D. Pero hacer esto nativo har que motores como Papervision3D o Away3D
tengan mucha mayor calidad, velocidad, menos peso y mejores grficos.
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.
ENTORNO DE TRABAJO.
1era Forma (clsica)
A travs del Men Inicio.
2da Forma
Cargando el ejecutable del programa (Men Inicio > Ejecutar: FLASH ).
1
3
10
1.
2.
3.
4.
5.
Barra de Men.
Cuadro de Herramientas.
Panel de Propiedades.
rea de Trabajo o Escenario.
Lnea de Tiempo.
SELECCIN Y DIBUJO
Podemos iniciar creando un nuevo documento, desde la pantalla inicial establecemos el lenguaje
a utilizar: ActionScript 3.0.
Luego, en el Panel Propiedades (CTRL + F3, o desde el Men Ventana > Propiedades),
configuramos los valores del documento:
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).
11
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.
-
12
1
2
3
13
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 CS3.
14
15
b. Seleccin de objetos.
Si hacemos un clic sobre el centro de la forma (en el relleno) o al trazo, y al moverlo, se
observa que solo esa parte es la que se desplaza.
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.
16
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.
-
17
Si desea modificar nuevamente el color, puede usar cualquiera de las siguientes formas:
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).
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).
18
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).
19
3. Elija el color.
2. Elija el punto
(interno o externo)
4. Elija el tono de color.
Haga clic dentro de la figura con el relleno degradado lineal, aparecern tres selectores
para realizar las transformaciones.
20
TRANSFORMANDO FORMAS
Se puede usar la herramienta TRANSFORMACION LIBRE (o pulsando la tecla Q) para modificar
la forma de los objetos. Para rotar un objeto con esta herramienta:
Rotar y sesgar
Escalar
Distorsionar
Envoltura
21
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
diferente. Cuando los usuarios hagan clic sobre uno de los botones, ser redirigido a
la Escena correspondiente.
22
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.
23
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.
Del fotograma 1 al fotograma 10 tengo la animacin de mi crculo. Supongamos que al
mismo tiempo quiero crear un crculo al lado y tambin animarlo. En ese caso, no
pueden superponerse ms de una animacin en la misma capa, por eso tengo que crear
el segundo crculo en una capa nueva.
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.
En el listado de capas, al lado de cada una podemos ver el Estado de la capa:
-
Ojo:
Tildando
esta
opcin
podemos ocultar o mostrar la
capa.
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.
El orden de las capas est relacionado con su posicin virtual en el espacio. La capa
inferior del listado se encontrar detrs de las otras capas. Podemos ver en las
imgenes de los crculos, que el crculo mayor, en la capa 1, est detrs del crculo
menor de la capa 2.
24
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.
Ahora, centrmonos en nuestra lnea de tiempo. Ese es el escenario donde vamos a
tratar con los fotogramas.
En Flash hay 2 tipos bsicos de fotogramas: claves y comunes. En la lnea de tiempo,
los fotogramas clave poseen un punto, como se puede ver en el ejemplo de la primera
imagen.
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
Para insertar un fotograma clave, debes hacer lo siguiente:
Posicionarte en el fotograma deseado
Presionar F6
Con el botn izquierdo del mouse vers un men que tambin te permite insertar
fotogramas.
Los fotogramas comunes se generan solos entre dos fotogramas clave.
Qu pasa si quiero que un objeto inanimado (un crculo esttico, por ejemplo)
permanezca en la pelcula durante varios fotogramas?
Inserta el objeto en una capa nueva llamaremos a esta capa Crculo
inanimado.
Si creamos la nueva capa y dibujamos o pegamos directamente un crculo, este
aparecer en el primer fotograma. Si queremos que el crculo se aparezca recin en el
fotograma 5, deberemos:
25
Ejercicio.
-
En la capa REBOTE, dibujar un OVALO. Esta ser la pelota que dar botes.
2
4
6
1
26
Objetivos
Manejo de Vectores
- Herramienta Lpiz.
- Herramienta Pluma.
- Dibujo de Curvas y Trazos.
- Edicin de Curvas.
- Dibujo de Objetos.
Textos
- Tipos: Estticos, Dinmicos y de Entrada.
Smbolos
Movimiento
- Interpolacin de Movimiento.
- Interpolacin Clsica.
- Interpolacin de Formas.
- Usando la Herramienta Huesos
MANEJO DE VECTORES
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.
-
27
La opcin Tinta es la que hace pocos cambios a la lnea, aunque de todas maneras
suaviza algunas de las curvas.
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.
28
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.
29
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.
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
-
30
Si desea ajustar slo un lado de la curva, mantenga pulsada la tecla ALT y arrastre el
selector que desee ajustar.
e. Dibujo de objeto
31
provoque una de ellas corte la otra. Esto se conoce como modo de dibujo de fusin.
Este modo puede resultar til para cortar formas y crear otras nuevas.
TEXTOS
A diferencia de HTML y otros lenguajes donde las tipografas que se utilizan en el diseo web
dependen directamente de las tipografas que estn instaladas en la PC del usuario, en Flash
puedes utilizar cualquier fuente y esta es quizs una de las principales ventajas para los
diseadores.
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.
32
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:
33
a. Texto Esttico
Es el texto que no requiere interactividad con el usuario. Puede ser el texto de un
artculo, la presentacin de una compaa, un ttulo en una pgina web En fin, es texto
que se mira y no se toca.
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.
34
Pero cuando trabajas con Texto de Entrada (Input Text) aparecen nuevas opciones. Una
de las opciones es especificar la cantidad mxima de caracteres que se puede escribir
en nuestro campo de texto (en este caso 500).
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.
Pero lo ms interesante est en el men A. Aqu puedes elegir el formato de tu Texto de
Entrada. Tienes 4 opciones: lnea simple, multilnea, multilnea sin envoltura y
contrasea. Los formatos no especifican la cantidad mxima de caracteres a escribir asi
que debes aclararlo en el campo de Caracteres mximos.
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.
35
c. Texto Dinmico
El Texto Dinmico (Dynamic Text) permite generar acciones interesantes con
ActionScript. Adems, se pueden enlazar a una URL, cosa que el Texto de Entrada no
permite. Por otra parte, acepta los formatos de lnea simple, multilnea y multilnea sin
envoltura, tal como en el ejemplo anterior.
En el Texto Dinmico tambin se utiliza para incorporar informacin externa dentro de
nuestro archivo SWF.
SIMBOLOS
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.
36
Tambin puede importar imgenes (Men Archivo > Importar > Importar a Biblioteca)
37
MOVIMIENTO
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
Una interpolacin de movimiento es el desplazamiento de un smbolo de uno a otro
punto del escenario. El hecho de que slo se necesiten dos fotogramas es debido a que
Flash, nicamente con la posicin inicial y final, "intuye" una trayectoria en lnea recta y
la representa (veremos que tambin se pueden realizar movimientos no rectilneos).
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.
Cuando realicemos la interpolacin correctamente observaremos un aspecto como este
en la lnea de tiempo.
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.
La velocidad en el movimiento de las pelculas la podemos cambiar tambin modificando
su parmetro en la lnea de tiempo,
pero esto no cambiar lo que
hemos comentado anteriormente respecto al nmero de fotogramas.
La velocidad est expresada en Fotogramas Por Segundo (fps) y se puede modificar
haciendo doble clic en el lugar que hemos indicado de la lnea de tiempo. A mayor valor
ms velocidad, pero se deben poner siempre suficientes fotogramas para que se
desarrolle la animacin como queremos.
El trazado recto generado por defecto podemos modificarlo directamente haciendo clic y
arrastrndolo, una vez seleccionada previamente la herramienta Seleccin.
38
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.
En la siguiente columna podemos establecer si el valor se aplica con aceleracin o no.
En la columna Fotogramas, podemos recorrer o eliminar los distintos fotogramas clave.
Tambin los controles - y + que nos permiten aadir efectos.
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
39
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.
-
40
41
42
43
Hacer un clic entre el fotograma 1 y 20, y en el Men Insertar > Interpolacin Clsica,
o tambin, mediante un clic derecho.
c. Interpolacin de Formas.
En la interpolacin de forma, se dibuja una forma vectorial en un fotograma concreto de
la lnea de tiempo y se modifica o se dibuja otra forma en otro fotograma especfico.
Posteriormente, Flash interpola las formas intermedias de los fotogramas intermedios y
crea la animacin de una forma cambiante.
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.
Tambin puede interpolar la posicin y el color de las formas de una interpolacin de
forma.
Para aplicar la interpolacin de forma a grupos, instancias o imgenes de mapas de bits,
separe estos elementos. Para aplicar la interpolacin de forma a texto, separe el texto
dos veces para convertirlo en objetos.
-
44
45
En otra capa, usar la herramienta Texto (tipo TEXTO ESTATICO) y escribir algo. Luego
separar (Men Modificar > Separar, o pulsando CTRL+B) una vez para separar en
CARACTERES, y otra vez ms para separar en FORMAS INDIVIDUALES. (Puede
ayudarse de lneas guas para mejorar el resultado).
En el fotograma 25, insertar un fotograma clave vacio, y digitar otro texto diferente.
Separar en formas individuales.
46
47
48
El siguiente paso es crear tanto esqueletos como estructuras queramos animar. En este
caso crearemos un esqueleto para el cuerpo que unir el tronco con la pierna y la
cabeza, otro para el brazo que toca la guitarra y otro para la pierna interior. La guitarra
no necesita huesos.
Para crear el esqueleto se selecciona la herramienta de huesos, se hace clic en el
smbolo que ser el hueso principal (en este caso la pelvis) y se arrastra el ratn hasta el
siguiente hueso. Se repite la operacin hasta cubrir toda la cadena de jerarqua, en este
caso pelvis, tronco y cabeza.
49
Se hace clic de nuevo en el hueso de la pelvis y se arrastra el ratn hacia el muslo para
crear una nueva cadena de jerarqua. Se completa la cadena con un hueso para la
pierna y otro para el pie. De esta forma la pelvis es el hueso principal de la estructura.
Se vuelve a repetir el proceso con el brazo, en este caso arrastrando desde el brazo al
antebrazo y de ah a la mano.
50
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.
51
Luego basta desplazarse hasta otro punto de la lnea de tiempo escoger la opcin pegar
pose del mismo men contextual para tener esa misma pose en otro punto de la
animacin.
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.
52
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 continuacin se selecciona la herramienta de huesos, se hace clic sobre la figura y se
empieza a arrastrar para crear el esqueleto. Una vez ms debe seguir la estructura
lgica comenzando por la pelvis y el tronco y continuando por las extremidades.
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.
53
Por supuesto se pueden crear clips de pelculas con esqueletos en su interior para crear
mayor nmero de efectos.
54
Objetivos
Mscaras
Botones.
- Uso de la Biblioteca Comn.
- Creacin de botones.
- Insertando audio y clips de pelcula sobre botones.
Acciones.
MASCARAS
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.
2. Insertar una nueva capa, en ella trazar un crculo sobre el escenario.
3. Crear una interpolacin de movimiento entre el fotograma 1 y el fotograma 20.
55
Fotograma 20
Fotograma 40
BOTONES
a. Uso de la Biblioteca comn.
En Flash CS3 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de
ejemplos y aquellas asociadas a las pelculas que hemos creado. Todas ellas las
tenemos a nuestra disposicin para utilizar los smbolos que contienen.
Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que
ir al Men Ventana > Bibliotecas Comunes y seleccionar alguna de las que se nos
ofrecen. Las hay de todo tipo de smbolos: Botones, Clases o Sonidos.
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.
56
Realice el diseo de lo que ser su botn (de ser necesario inserte ms capas).
57
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.
58
59
Insertar el clip
pulsacin en una
nueva capa
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.
60
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:
Sin entrar en detalle de qu es cada palabra, pues esto ya lo veremos, este es el cdigo que
debemos de escribir para asociar acciones a un botn:
miBoton.addEventListener('click', accionesMiBoton);
function accionesMiBoton(event):void{
//Acciones
}
Donde miBoton es el nombre de la instancia del botn.
-
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.
La instruccin en ActionScript que nos permite hacerlo es navigateToURL(new
URLRequest("http://www.mipagina.com"), "_blank");. "http://www.mipagina.com" se
refiere a la pgina que queremos abrir, y "_blank" indica que se abrir en una pgina
nueva.
61
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");
}
-
62
Objetivos
Generar y Publicar Pelculas.
- Consideraciones acerca del tamao.
- Usar precargadores.
- Distribucin del archivo SWF para la web.
63
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.
Normalmente, los preloaders se hacen vistosos para que el observador no se aburra y
deje de lado la opcin de visitar nuestra web. Suelen llevar alguna animacin sencilla
que se va reproduciendo mientras se est cargando simultneamente la pelcula
principal, mucho ms grande.
Se pueden complicar mucho ms, pero nosotros haremos uno sencillo que nos sirva
para entender bien el concepto, y la manera de hacerlo.
Partimos de que ya tenemos nuestra pelcula terminada. Si queremos saber su tamao
podemos ir al Men Archivo > Configuracin de publicacin seleccionar la pestaa
Flash, y marcar la casilla Generar Informe de Tamao. Si pulsamos el botn Publicar,
aparecer en nuestro directorio un archivo de texto donde se explica con detalle el
tamao de nuestra pelcula.
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".
64
65
66
Objetivos
Introduccin a ActionScript 3.0
- Caractersticas Generales
- El Panel de Acciones
Introduccin a la Programacin en AS 3.0
- Variables
- Tipos de Datos
- Operadores Aritmticos y de Comparacin.
Conversin de Tipos de Datos
a. Caracteristicas generales
Como ya hemos comentado, el ActionScript es el lenguaje de programacin propio
de Flash, tal y como el Lingo lo es de Macromedia Director, por ejemplo. El
ActionScript est basado en la especificacin ECMA-262, al igual que otros
lenguajes como Javascript.
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.
El ActionScript es un lenguaje de programacin orientado a objetos, tiene
similitudes, por tanto, con lenguajes tales como los usados en el Microsoft Visual
Basic, en el Borland Delphi etc... y aunque, evidentemente, no tiene la potencia de
un lenguaje puramente orientado a objetos derivado del C o del Pascal como los
anteriores, cada versin se acerca ms a un lenguaje de este tipo. As, la versin 3.0
estrenada en Flash CS3 es mucho ms potente y mucho ms "orientada a objetos"
que las versiones anteriores.
67
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.
68
A la parte derecha tenemos el espacio para colocar nuestro script, aqu aparecer lo que
vayamos insertando. Tambin incluye herramientas de utilidad, como la bsqueda de
palabras, la posibilidad de insertar puntos de corte, la herramienta Revisar Sintaxis y la
ayuda de Flash para ActionScript.
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":
String: un valor de texto como, por ejemplo, un nombre o el texto de un captulo
de un libro.
69
Numeric: ActionScript 3.0 incluye tres tipos de datos especficos para datos
numricos:
Number: cualquier valor numrico, incluidos los valores fraccionarios
o no fraccionarios
int: un entero (un nmero no fraccionario)
uint: un entero sin signo, es decir, que no puede ser negativo
Boolean: un valor true (verdadero) o false (falso), por ejemplo, si un conmutador
est activado o si dos valores son iguales
+
*
/
%
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
X++
X-X=Valor
DETALLE
Incremento de 1 en 1
Decremento de 1 en 1
A X se le asigna el Valor
70
Ejemplo:
En la Lnea de Tiempo pulsar F9 en el primer fotograma y digitar:
71
Se crea una funcin calcular, que permita convertir los valores ingresados a
datos de tipo uint, para promediarlos y mostrarlos en el campo Promedio.
convertida
cadena
para
ser
72
Objetivos
Estructuras de Control Condicionales.
- Estructuras de Decisin.
- Estructuras de Seleccin Mltiple.
Estructuras Repetitivas.
- Do While
- For
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.
-
73
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):
74
75
76
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:
77
78
Mostrar la serie: 20, 30, 40, 50, . (20 trminos), y la suma de dichos trminos.
79
Objetivos
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.
CLIPS DE PELICULA
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).
Para Modificar
nombre_MC.propiedad = valor;
80
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.
81
82
83
84
85
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.
Previsualizar la pelcula.
86
addChild
puedes
utilizar
removeChild()
Para crear una clase y usarlo desde ActionScript, hacemos clic sobre el botn
AVANZADO, y luego marcamos las opciones:
87
88
Podramos haber probado este otro cdigo, que permite trabajar con valores aleatorios.
Quedara como ejercicio, modificar el cdigo para que al disparar al pato, usando
removeChild se elimine, pero que luego aparezca otro.
89
90
Objetivos
Interaccin con el Mouse
Colisiones: Interaccin entre elementos
Trabajando con Sonido
- Carga de archivos de sonido externo
- Reproduccin de Sonidos
Navegacin
- Los Botones
- Controladores de la Lnea de Tiempo
91
miObjeto.addEventListener('moseUp', soltar);
function soltar(event):void {
miObjeto.stopDrag();
trace(miObjeto.dropTarget);
}
Este cdigo devolver al Panel Salida el tipo de objeto (podemos utilizar
miObjeto.dropTarget.name si queremos saber el nombre de instancia) sobre el cual se ha
soltado. Si no hay ningn objeto, devolver NULL.
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:
var coordenadaX:Number = mouseX;
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:
Mouse.hide(); //Ocultamos el cursor verdadero
addEventListener(Event.ENTER_FRAME,cambiarCursor);
function cambiarCursor(event):void {
texto.contador_txt.text="("+mouseX+", "+mouseY+")";
texto.x = mouseX; //Asignamos las coordenadas
texto.y = mouseY; //Al elemento de texto
miCursor.x = mouseX; //Y al clip que har de cursor
miCursor.y = mouseY;
}
Comenzamos ocultando el cursor verdadero, con el mtodo Mouse.hide();
.
En la biblioteca tenemos dos clips miCursor, que es lo que queremos mostrar como cursor, y
texto, otro clip en el que mostramos las coordenadas. Como queremos que ambos objetos sigan
al cursor real, en un evento repetitivo como enterFrame, les asignamos a ambos las
coordenadas del ratn.
Podemos volver a visualizar el ratn, por ejemplo, porque cambiamos de fotograma, con el
cdigo:
Mouse.show();
92
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 ambos casos, el valor devuelto es true, si hay colisin, o false si no.
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.
93
En una capa ACCIONES, escribimos las rutinas que permitan mover los ALIENS.
94
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.
95
96
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.
La clase SoundChannel controla la reproduccin de un solo sonido. La propiedad
SoundChannel.position puede considerarse como una cabeza lectora, que indica el
punto actual en los datos de sonido que se estn reproduciendo.
Cuando una aplicacin llama al mtodo Sound.play(), se crea una nueva instancia de la
clase SoundChannel para controlar la reproduccin.
La aplicacin puede reproducir un sonido desde una posicin de inicio especfica,
pasando dicha posicin en milisegundos como el parmetro startTime del mtodo
Sound.play(). Tambin puede especificar un nmero fijo de veces que se repetir el
sonido en una sucesin rpida pasando un valor numrico en el parmetro loops del
mtodo Sound.play().
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:
var snd:Sound = new Sound(new URLRequest("repeatingSound.mp3"));
snd.play(1000, 3);
En este ejemplo, el sonido se reproduce desde un punto un segundo despus del inicio
del sonido, tres veces seguidas.
Si la aplicacin reproduce sonidos largos, como canciones o emisiones podcast, es
recomendable dejar que los usuarios pausen y reanuden la reproduccin de dichos
sonidos. Durante la reproduccin en ActionScript un sonido no se puede pausar; slo se
puede detener. Sin embargo, un sonido puede reproducirse desde cualquier punto. Se
puede registrar la posicin del sonido en el momento en que se detuvo y volver a
reproducir el sonido desde dicha posicin posteriormente.
Mientras se reproduce el sonido, la propiedad SoundChannel.position indica el punto del
archivo de sonido que se est reproduciendo en ese momento. La aplicacin puede
almacenar el valor de posicin antes de detener la reproduccin del sonido, como se
indica a continuacin:
var pausePosition:int = channel.position;
channel.stop();
97
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);
public function onPlaybackComplete(event:Event)
{
trace("The sound has finished playing.");
}
La clase SoundChannel no distribuye eventos de progreso durante la reproduccin. Para
informar sobre el progreso de la reproduccin, la aplicacin puede configurar su propio
mecanismo de sincronizacin y hacer un seguimiento de la posicin de la cabeza lectora
del sonido.
Para calcular el porcentaje de sonido que se ha reproducido, se puede dividir el valor de
la propiedad SoundChannel.position entre la duracin de los datos del sonido que se
est reproduciendo:
var playbackPercent:uint = 100 * (channel.position / snd.length);
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);
El cdigo siguiente carga un archivo de sonido ms grande y utiliza el evento
Event.ENTER_FRAME como mecanismo de sincronizacin para mostrar el progreso de
la reproduccin. Notifica peridicamente el porcentaje de reproduccin, que se calcula
como el valor de la posicin actual dividido entre la duracin total de los datos de sonido:
import flash.events.Event;
import flash.media.Sound;
import flash.net.URLRequest;
var snd:Sound = new Sound();
98
En el ejemplo que estamos creando, vamos a incluir un sonido de fondo que se repita
de forma continua.
99
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.
sta es la parte ms importante pues deberemos decidir a qu evento responder el botn.
Existen varios eventos que son capturados en Flash:
MouseEvent.CLICK ("click") - Se procue al hacer clic (pulsar y soltar el botn ratn).
MouseEvent.DOUBLE_CLICK ("doubleClick") - Se produce al hacer doble clic.
MouseEvent.MOUSE_DOWN ("mouseDown") - Se produce al pulsar el botn del
ratn (antes de soltarlo).
MouseEvent.MOUSE_MOVE ("mouseMove") - Se produce cuando el ratn se
mueve sobre el elemento.
MouseEvent.MOUSE_OUT ("mouseOut") - Se produce cuando se saca el cursor de
encima del elemento.
MouseEvent.MOUSE_OVER ("mouseOver") - Se produce cuando el ratn se coloca
sobre el objeto.
MouseEvent.MOUSE_UP ("mouseUp") - Se produce cuando se suelta el botn del
ratn.
MouseEvent.MOUSE_WHEEL ("mouseWheel") - Se produce al presionar la rueda
del cursor.
MouseEvent.ROLL_OUT ("rollOut") - Se produce cuando se mueve el ratn fuera
del elemento.
MouseEvent.ROLL_OVER ("rollOver") - Se produce cuando se mueve el ratn
sobre el elemento.
100
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.
Por tanto, si no hemos creado ya esa funcin, la tenemos que definir, con el mismo nombre y
pasndole como parmetro el evento. Como siempre, entre las llaves {} introduciremos el
cdigo que queremos que ejecute la funcin.
miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(e:MouseEvent):void {
//cdigo de la funcin
}
101
Esto har que cuando la animacin llegue a ese punto se detenga a la espera de nueva
orden.
102
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().
Ya hemos conseguido detener la presentacin. Pero, cmo hacemos que se muestre la
segunda? Muy sencillo.
Los botones nos ayudarn a desplazar el cabezal por la lnea de tiempo. As que
modificaremos el cdigo de uno de los botones:
Evento
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.
Si aadimos un stop() en el ltimo fotograma de la segunda seccin, cuando ste se
reproduzca se parar y el contenido permanecer esttico en espera de una nueva orden.
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:
103
104