Manual Flash Cs5 - V2012

ndice
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.
ADOBE FLASH CS 5.5 2

PRESENTACION
Esta gua didctica es un material de ayuda institucional, perteneciente al rea

Tcnica de Computacin, y que tiene por finalidad proporcionar los
conocimientos de diseo para la web en Adobe Flash CS 5.5.
Disear con Adobe Flash CS5.5 es la forma ms rpida de crear aplicaciones y

contenido dinmicos para Internet, lo cual se traduce en una mejor inversin.
Las caractersticas que permiten usar potentes videos, multimedia y desarrollar
aplicaciones se traducen en un mayor dinamismo en las interfaces de usuario.
El despliegue es uniforme en la mayora de las plataformas entre 436 millones
de usuarios en Internet y gracias al dinmico plugin de Flash Player.
La Organizacin SISE, lder en la enseanza tecnolgica a nivel superior,

promueve la elaboracin de estos materiales de aprendizaje, en concordancia a
las actuales exigencias tecnolgicas de nuestros tiempos, esperando que sirvan
de ayuda para facilitar el proceso de aprendizaje de los estudiantes.

Objetivos
Introduccin a Adobe Flash CS 5.5.
Novedades de la versin CS 5.5.
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.

INTRODUCCIN A ADOBE FLASH CS 5.5
Flash fue creado fundamentalmente para editar y publicar contenidos multimedia interactivos para la
web. Sin embargo, gracias a las nuevas capacidades incluidas en esta nueva versin, Flash
puede servir para otras muchas cosas. Crear animaciones interactivas, elementos de navegacin,
botones y mens, sitios web completos o aplicaciones multimedia para distribuir en CD-ROM, son
algunas de las cosas que podemos hacer con esta herramienta.
NOVEDADES DE LA VERSION CS 5.5

Valores predefinidos
En esta versin, flash incorpora una serie de animaciones predefinidas que podemos aplicar a
cualquier clip de pelcula consiguiendo efectos profesionales. Por ejemplo, en mi caso he
probado a poner un texto tipo guerra de las galaxias
Animacin basada en objetos

Un nuevo sistema de animacin hace que cada objeto en el escenario tenga su propia capa,
lnea de tiempo y sistema de animacin. Los keyframes bsicamente desaparecen como los
conocamos para convertirse en puntos de 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.

He trazado la imagen en flash y he convertido en smbolos cada elemento articulado. El
resultado es que puedo realizar animaciones de diferentes formas:

En sombreado observis la posicin anterior. Los movimientos los genero a travs de la
herramienta flecha y arrastrando uno de los smbolos.

INICIANDO EL PROGRAMA
Una vez cargado el programa, se muestra una ventana que permite:
Abrir un elemento existente.

Crear un nuevo archivo. (especificar la versin del lenguaje a usar).
Navegar por la ayuda en lnea y tutoriales.

El Entorno de Adobe Flash es el siguiente:
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.

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).
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).

HERRAMIENTA PLUMA: Permite dibujar lneas rectas, curvas suaves,
ajustar ngulos y modificar los segmentos de rectas y curvas
HERRAMIENTA TEXTO: Permite crear textos estticos, dinmicos o de

entrada.
HERRAMIENTA LINEA: Permite crear lneas rectas de un modo rpido. Las

lneas se crean como en cualquier programa de dibujo, se hace clic y se
arrastra hasta donde queramos que llegue la lnea recta.
PERSIANA FORMAS: Permite crear RECTANGULOS u OVALOS.
HERRAMIENTA LAPIZ: Permite dibujar lneas con la forma que decidamos,

modificando la forma de estas a nuestro gusto. El color que aplicar esta
Herramienta se puede modificar, bien desde el Panel Mezclador de Colores
o bien desde el panel Colores que hay en la Barra de Herramientas.
HERRAMIENTA PINCEL: Su funcionalidad equivale a la del lpiz, pero su

trazo es mucho ms grueso. Se suele emplear para aplicar rellenos. Se
puede modificar su grosor y forma de trazo.
Ejercicio.
- Trazar un ovalo circular (mientras los dibujes mantn pulsada la tecla

SHIFT), con color de contorno BLANCO (1), y color de relleno AMARILLO
(2), de tipo SOLIDO (3).
1 2

- Activar la herramienta Lnea, y establecer el color de trazo en Amarillo (1), el
ancho del contorno en 5 px (2) y de estilo Slido (3).
- Activar la herramienta Rectngulo y establecer sin color de trazo y relleno

gris.

- Activa la herramienta LAPIZ, y elige el color de contorno blanco. Activa el botn
SUAVIZAR, para reducir los puntos de inflexin de las curvas. Luego traza unas formas
similares a NUBES.
El botn ENDEREZAR, permite alinear los segmentos de una curva. Su aplicacin

repetitiva transforma la curva en una lnea quebrada.
- 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.

La Herramienta Rectngulo posee propiedades que permiten, por ejemplo, redondear
los vrtices (1).
O cambiar la forma de las esquinas (2).
Dentro de la persiana Formas, adems de los valos y rectngulos, encontramos la

herramienta polystar, que permite dibujar POLIGONOS o ESTRELLAS.

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.

CAMBIANDO EL RELLENO DE LAS FORMAS.
a. Herramienta Cubo de Pintura
Puede utilizar la herramienta Cubo de pintura para cambiar el color de la pintura

existente y para rellenar reas vacas rodeadas por lneas. Para utilizar la herramienta
Cubo de pintura:
- Seleccione la herramienta Cubo de pintura. La seccin Opciones muestra

los modificadores de esta herramienta.
Modificador tamao de hueco
Bloquear relleno
- Haga clic en el modificador Tamao de hueco y elija No cerrar saltos.
- 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.
- Elija Cerrar huecos grandes en el modificador

Tamao de hueco.
- Haga clic dentro del rea hueca. Flash rellena el

rea incluso aunque no est cerrada del todo.

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).
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).

Si en lugar de un color slido, desea un degradado de colores, se puede elegir el tipo:
LINEAL, RADIAL, etc.
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).
b. Herramienta Transformacin de Degradado.

Esta herramienta permite editar un relleno degradado, tanto lineal como radial, y crear
una variedad de efectos diferentes. Para transformar un relleno degradado lineal:

Dibuje el siguiente grfico:
- Dirjase al Panel de Colores y modifique los colores:
1. Elija el tipo Radial.
3. Elija el color.
2. Elija el punto
(interno o externo)
4. Elija el tono de color.
- Haga clic en la Herramienta Transformar relleno.
Selector que recorta o alarga el rango del degradado.

- Haga clic dentro de la figura con el relleno degradado lineal, aparecern tres selectores
para realizar las transformaciones.
Selector que amplia o reduce la superficie del Selector que permite rotar el
degradado. rango del degradado.
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:
- Active la herramienta Seleccin de la caja de herramientas, y hacer doble clic en el

objeto que desea rotar para que pueda seleccionar tanto el trazo como el relleno.
- En la caja de herramientas, haga clic en la herramienta Transformacin libre. La seccin

Opciones muestra los modificadores de esta herramienta y unos controladores aparecen
alrededor del objeto seleccionado.
- En la seccin Opciones, haga clic en botn Rotar y sesgar.
Rotar y sesgar Escalar
Distorsionar Envoltura

- Site el puntero en uno de los controladores de esquina y arrastre en sentido horario o
antihorario para rotar el objeto.
- Site el puntero en uno de los controladores laterales y arrastre hacia la izquierda o

hacia la derecha para inclinar el objeto.
- Para aumentar o reducir el tamao de un objeto:
Con la herramienta Seleccin, haga doble clic en el objeto que desea escalar.
Haga clic en la herramienta Transformacin libre.
En la seccin Opciones, haga clic en botn Escalar.
Site el puntero en uno de los controladores y arrastre para escalar el objeto.
CREANDO UNA PRIMERA ANIMACIN FOTOGRAMA POR

FOTOGRAMA.
Como Flash es un programa de animacin dinmica, es importante comprender el manejo del

tiempo en esta aplicacin pero tambin entender qu tipo de pelculas vamos a crear para poder
tener un manejo ms amplio del factor temporal.
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:
- Cartoons: En este tipo de trabajos, las Escenas equivalen a la escena de un film.

Adems de tener un inicio y un final fijos, son las que organizan la pelcula. Cuando
termina otra Escena, comienza otra hasta que se llega a la ltima.+
- 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.
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.
b. Concepto de lnea de tiempo

El manejo del tiempo se basa en una Lnea de Tiempo. As como una hora est dividida
en minutos y segundos, nuestra Lnea de Tiempo se divide en Fotogramas. La lnea es
siempre infinita, pero la animacin va a finalizar en el ltimo fotograma lleno, el ltimo
que contenga informacin.
La unidad de medida es Fotogramas por Segundo (fps) y es un valor que se puede

modificar, aunque lo ms comn es utilizar 12 fps.

Como se ve en la imagen, la Lnea de Tiempo presenta fotogramas blancos y grises. Los
grises se disponen cada 5 fotogramas como una ayuda para contabilizar mejor estos
fotogramas a la hora de crear la animacin.
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.
- Candado: Esta opcin nos

permite bloquear una capa. Esto
significa que no podremos realizar
ninguna modificacin a los objetos de la capa.
- Marco: Cuando la opcin de marco est activa, se muestran nicamente el contorno

de los objetos de esa capa.
A su vez, debajo del listado de capas hay 4 opciones:
- Agregar capa: Agrega una capa al listado de capas.
- Agregar gua de capa: El elemento gua de capa lo veremos ms adelante.
- 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.
- Eliminar: Elimina capas, guas y carpetas y todo su contenido.

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.
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:
Ejercicio.
- En la capa por defecto, cambiaremos el nombre por PAISAJE. Luego

aadiremos otra capa de nombre REBOTE.
- En la capa PAISAJE, para que el fondo se muestre hasta el fotograma 50,

ubicarse en este y pulsar F5.
- En la capa REBOTE, dibujar un OVALO. Esta ser la pelota que dar botes.
4
6
1 3 5 7
- En el fotograma 1 dibujamos la pelota en la posicin (1), en el fotograma 5

pulsamos F6 para insertar un fotograma clave y movemos la pelota en la
posicin (2), y as sucesivamente hasta el fotograma 30. Por ltimo pulse F5
en el fotograma 50.
- Pulse ENTER para ver la animacin.
- Pulse CTRL + ENTER para ver la animacin en FLASH PLAYER.

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.
- En la caja de herramientas, haga dicen la herramienta Lpiz. La seccin Opciones de la

caja de herramientas muestra los modificadores de esta herramienta.
- En el panel Propiedades, especifique el estilo, grosor y color del trazo.
- Elija Enderezar en el modificador del Modo Lpiz.
- Arrastre el puntero sobre el escenario y dibuje una figura similar a la siguiente

ilustracin.
Al soltar el botn del mouse Flash

endereza las lneas.
- La opcin Enderezar es la que ms cambios realiza en la lnea que estemos dibujando.

Endereza los trazos o los ajusta a una elipse o crculo, segn sea el caso.
- La opcin Suavizar se encarga de suavizar el perfil de la lnea que estamos creando,

rectificando la figura en menor proporcin que la opcin Enderezar.

- 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.
- Para dibujar una lnea recta:
Presione las teclas Ctrl+F3 para visualizar el panel Propiedades.
En la barra de herramientas, haga clic en la herramienta Pluma.
En el panel Propiedades, especifique el estilo, grosor y color del trazo.
En el escenario, haga clic para definir un punto de anclaje.
Haga clic en otro punto para dibujar una lnea recta.
- Si desea dibujar ms lneas, contine haciendo clic. Cada vez que hace clic, Flash
conecta los puntos de anclaje.
- Los puntos de anclaje unen los segmentos de lneas rectas. De manera

predeterminada, los puntos de anclaje seleccionados son slidos y los puntos de
anclaje sin seleccionar son huecos.
- 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.

c. Dibujando curvas y trazos
- Para dibujar curvas con la herramienta Pluma, siga estos pasos:
Seleccione la herramienta Pluma y haga clic en un punto del escenario
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.
- Al arrastrar, se generan puntos de curva. Los puntos de curva tienen lneas

tangentes que se extienden de ellos. Puede utilizar estos puntos de curva para
editar la curva. Para cerrar e! trazado, site el puntero sobre el primer punto de
anclaje (un icono circular aparece al lado del puntero) y haga clic.
- 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.
- Para agregar puntos de anclaje:
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.
Nuevo punto de anclaje
- 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.

- Haga clic en el punto de curva para convertirlo en un punto angular.
Observe el cambio de curva a lnea.
d. Edicin de curvas
- Utilice la herramienta Subseleccionar para seleccionar segmentos de un trazado y
editarlo.
- Haga clic en la herramienta Subseleccionar,
- Haga clic en el trazado para visualizar sus puntos de anclaje.
- Haga clic en un conector. Aparecen las lneas tangentes.
- Si desea cambiar la posicin del trazado o de la curva, arrastre un punto de anclaje.
- Si desea cambiar la forma de la curva, arrastre el selector de tangente.

- 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
- Permite dibujar formas como objetos individuales que permanecen

como objetos independientes unos de otros. Ya no es necesario dibujar
cada forma en una capa independiente para evitar que las formas se
corten entre ellas. Con Flash 8 y superior, puede simplemente activar
o desactivar Dibujo de objeto como subopcin de cualquiera de las
herramientas de dibujo (Pincel, Lpiz, Pluma, valo y Rectngulo) bajo
Opciones. Los usuarios que conozcan FreeHand o Adobe Illustrator
agradecern esta incorporacin a Flash que ya les resultar familiar.
- Como puede observar en la figura de abajo, al dibujar una forma sobre

otra ya existente sin Dibujo de objeto, las formas se mezclan, lo que
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.
Modo de Dibujo de Fusin
- Al dibujar una forma en el modo Dibujo de objeto, sta se convierte automticamente en

un dibujo de objeto y no puede mezclarse con otras formas. Puede superponer Dibujos
de objetos sin que stos queden cortados (observe la figura de abajo). Esto resulta til
en situaciones en las que desee cambiar la posicin de los objetos o simplemente
necesite mantenerlos como objetos independientes.
Modo de Dibujo de Objeto

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.
En el ejemplo 1, el texto ha sido seleccionado normalmente (con la flecha negra). Esto me

permite mover la caja de texto y agrandar o achicar el texto de la caja.Por otro lado, en el
ejemplo 2 estamos trabajando con la herramienta de texto. Esto habilita la posibilidad de editar
las dimensiones de la caja, sin cambiar el tamao de la tipografa.

Cada vez que trabajes con la herramienta de texto, en el panel de propiedades aparecern una
serie de opciones, entre las ms comunes estn las de editar el formato del prrafo, estilos,
tipografa, tamao y color. Todas similares a las de un editor de texto comn.
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:

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.

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.
- El formato password permite escribir contraseas y mostrarlas como astersticos.

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.
APLICANDO EFECTOS Y FILTROS A LOS TEXTOS

Un toque agradable que se le puede dar a los textos son los efectos especiales. Veremos 3
ejemplos aplicando efectos y filtros:
EJEMPLO 1
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.

2. Vamos a darle el efecto de cursiva, si bien algunas fuentes no tienen este estilo
podemos utilizar la falsa cursiva.
3. Luego procedemos a separarlo 2 veces con CTRL + B para convertirlo en forma.
4. Ahora lo agruparemos y lo duplicaremos para poder tener dos textos iguales y

poder crear el efecto sombra.
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.

TEXTOS CON SCROLLBAR
Hay ocasiones que cuando trabajo con textos extensos como para los contenidos de un sitio
web no caben en el escenario, una opcin bastante interesante sera el de poder agregarle una
barra de desplazamiento o Scrollbar.
Vemos cmo se puede aplicar este componente y as darle una mejor apariencia a nuestro texto
en un sitio web.
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.
Expandimos el componente User Interface y

colocamos en el escenario el botn UIScrollbar

Una vez insertado lo colocaremos encima del texto dinmico y veremos como automticamente
se acomoda al tamao del marco de texto.
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.

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.
- Por ejemplo, establecemos el nombre del smbolo en MiAuto, y de tipo Clip de

Pelcula, luego usamos las herramientas de dibujo y trazamos un auto.
- Si deseamos retornar al diseo del Escenario, hacemos un clic en Escena 1 (1).
- Si deseamos retornar al diseo del Escenario, hacemos un clic en Escena 1 (1).
- El smbolo queda almacenado en la Ventana Biblioteca (Men Ventana >

Biblioteca, o pulsando CTRL+L ).

- Luego, si desea ser utilizado en una animacin, se arrastra al Escenario.
Tambin puede importar imgenes (Men Archivo > Importar > Importar a Biblioteca)

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.

En cualquier fotograma de la interpolacin podemos cambiar la posicin del smbolo (o
cualquier otra propiedad), creando ah un fotograma clave de propiedad, que se
representa por un pequeo rombo en la lnea de tiempo.
La interpolacin de movimiento permite modificar muchos parmetros del movimiento

mediante el Editor de movimiento
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
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.
- Por ejemplo, vamos a importar una imagen, a la que convertiremos en un smbolo

de nombre MiAvion, de tipo Clip de Pelcula, y lo insertaremos en el escenario.
- Luego, ya sea en el fotograma 1 de la lnea de tiempo, o en el avin dentro del

escenario, usando un clic derecho, elegir CREAR INTERPOLACION DE
MOVIMIENTO.
- Luego, activar la pestaa EDITOR DE MOVIMIENTO (si no es visible, se puede

mostrar desde el Men Ventana > Editor de Movimiento).

- Para crear un movimiento horizontal o vertical, usamos la persiana MOVIMIENTO
BASICO, y dependiendo de la cantidad de fotogramas, insertamos un FOTOGRAMA
CLAVE (ej. en el fotograma 10).
- Estando en el fotograma 10, movemos el AVION a una segunda ubicacin.
- Active la Herramienta Seleccin, y modifique la apariencia de la trayectoria.

- Observe como la trayectoria ha variado en el editor de movimiento.
- En el fotograma 1, cambiar el ngulo de rotacin en 95 grados. Luego en el

fotograma 5, agregar otro fotograma clave, y cambiar el ngulo en -13 grados.
- De la misma manera, SESGO es usada para realizar inclinaciones, y ESCALA para

cambios de tamao.
b. Interpolacin de Movimiento Clsica.

Con Flash puede crear una animacin interpolada, en donde es necesario dos
fotogramas clave, uno al principio en el que se definen las propiedades de un objeto,
una instancia o un bloque de texto, y otro final con las propiedades modificadas.
A partir de la versin CS4 se diferencia las interpolaciones clsicas de las de

movimiento, las primeras se distinguen por su complejidad y por los tipos de efectos
animados que solo ellas pueden crear.
Veamos cmo crear una animacin clsica:

- El auto dibujado anteriormente, se halla en la capa PASEOS, y en una posicin inicial
dada en el fotograma 1.
- Ir al fotograma 20 e insertar un fotograma clave pulsando F6, y ahora mover el auto

hacia la derecha.

- Hacer un clic entre el fotograma 1 y 20, y en el Men Insertar > Interpolacin Clsica,
o tambin, mediante un clic derecho.
- Pulsar CTRL+ENTER para ver la animacin.
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.
- En una nueva capa, en el fotograma 1 dibujamos un ovalo con un color de borde

amarillo y relleno rojo.

- En el fotograma 15, insertar un fotograma clave vacio pulsando F7 y dibujar un
rectngulo.
- En el fotograma 30, un cuadrado con un color de relleno diferente.
- Ir al fotograma 1, y de un clic derecho y elegir INTERPOLACION DE FORMA. Repetir en

el fotograma 15. Previsualizar para ver el resultado.

- 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.
- Crear una interpolacin de forma.

d. Usando la Herramienta Huesos.
Una de las herramientas ms novedosas de Flash CS 5.5 es, sin duda, la herramienta
de huesos o bones que permite animar personajes de una forma mucho ms sencilla a
como se vena haciendo hasta ahora. Este tipo de prestacin no es nuevo en el entorno
del software de animacin 2D, aplicaciones como Anime Studio o Toon Boom estudio ya
la tenan, pero el hecho de poder contar con ella directamente en Flash y sin necesidad
de tener que cambiar de aplicacin cuando ests desarrollando un proyecto ya justifica,
casi por si solo, la actualizacin del programa.
Existen dos mtodos principales de utilizar la herramienta huesos.
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.

En Illustrator podemos dibujar las diferentes piezas y convertirlas en clip de pelcula,
para ello seleccionamos cada una de las piezas (si la pieza est compuesta por ms de
un trazado es aconsejable que los agrupemos previamente) y la arrastramos hasta la
paleta de smbolos. Al realizar esta operacin aparecer un cuadro de dilogo. En este
cuadro le diremos a Illustrator que convierta el smbolo en un clip de pelcula.
Paleta de smbolos con las piezas convertidas a clip de pelcula.
Luego ya podemos guardar los cambios del documento en Illustrator e importarlo

directamente en Flash (no es necesario exportar en ningn formato alternativo). Al
importar el documento en Flash aparecer un cuadro de dilogo como el siguiente
donde podremos observar como efectivamente las piezas son reconocidas como clips
de pelcula.

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.

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.

En la pierna interior se crea un nuevo esqueleto arrastrando del muslo a la pierna y
luego al pie. Esta pierna no es necesario que est vinculada a la pelvis pues en la
animacin solo tendr un movimiento auxiliar.
En la lnea de tiempo se observa cmo han aparecido tres pistas nuevas

correspondientes a los tres esqueletos creados.
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.
Si nos desplazamos en la lnea de tiempo y seguimos cambiado las poses se crearn

nuevos fotograma clave y Flash calcular inmediatamente la animacin entre un
fotograma clave y otro. Tambin es posible copiar poses de una zona de la lnea de
tiempo a otra haciendo clic con el botn derecho en un fotograma clave y escogiendo la
opcin copiar pose del men contextual.

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.
El otro mtodo consiste en aplicar el esqueleto directamente a un grfico dibujado en

Flash, sin convertir a smbolo.

En este caso he dibujado un hombrecillo de pastel de jengibre. Es importante que el
grfico est creado directamente con las herramientas de dibujo, sin agrupar y sin
convertir en smbolo, ya que de lo contario este mtodo no funcionara.
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.

Cuando se trata de un esqueleto vinculado a un grfico es posible utilizar la herramienta
de vinculacin que permite editar que puntos del grfico son afectados o no por el
esqueleto para controlar al mximo la deformacin de la figura.
Por supuesto se pueden crear clips de pelculas con esqueletos en su interior para crear
mayor nmero de efectos.

COMO APLICAR LA HERRAMIENTA HUESO.
En la siguiente imagen vemos un fantasma con un eslabn, vamos a articular el eslabn

utilizando la Herramienta hueso.
Dibujamos las articulaciones en cada

eslabn
Ahora podremos deformarlo y darle una nueva posicin al eslabn sin mucha dificultad.
Para poder crear una animacin le agregaremos fotogramas.

Notaremos que se ha generado una nueva capa de nombre esqueleto, en esta capa estn
agrupadas la estructuras de huesos y veremos una lnea verde que indica la lnea de tiempo. En
l fotograma 20 haremos un cambio de posicin.

Se puede aadir ms poses en esta animacin que te permitir hacer una animacin ms
compleja. Por ejemplo haremos clic derecho en el fotograma 10 y aadiremos una nueva pose,
ahora movemos la posicin del eslabn.
Finalmente tendremos una animacin bastante interesante sin mucho esfuerzo.
CONTROL DE CINEMATICA INVERSA

Tambin podemos controlar y cambiar la cinemtica inversa o los tipos de huesos aplicados a
nuestro ejemplo:
Seleccionar la lnea verde y se habilitara el panel de Propiedades del Hueso.

Podemos por ejemplo cambiar el tipo de Hueso pero para esto eliminaremos todas las poses
que tenga nuestra animacin.
Ahora cambiemos el Tipo tiempo de creacin por Tiempo de ejecucin ahora podremos
modificar la forma del eslabn en tiempo de ejecucin.
NOTA: Para poder hacer esta operacin es

necesario trabajar con la versin 10 de flash
Player.
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

HERRAMIENTA VINCULACIN
Esta herramienta va de la mano con la herramienta hueso pues te permitir indicar que sector o
del grafico est vinculado con un hueso respectivo. Veamos un ejemplo de como utilizarlo.
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.
Aqu se mueve una de las alas y

vemos como se mueve junto con
el un sector del grafico
Vamos a seleccionar la Herramienta Vinculacin y modificaremos la vinculacin hacia los

huesos.
El punto Rojo es el rea que hemos seleccionado con la

Herramienta Vinculacin y notamos que se ve resaltado el
hueso con una lnea amarilla, ello significa que estn
vinculados.
Hueso vinculado
Punto seleccionado

Ahora vamos a cambiar la vinculacin de un hueso.
Ahora le damos clic y

arrastramos hacia el
otro hueso.

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.
Fotograma 20 Fotograma 40
4. De un clic derecho sobre la capa del circulo, y elija MASCARA.
5. Crear la interpolacin de movimiento entre estos fotogramas, y probar la pelcula.
BOTONES
a. Uso de la Biblioteca comn.

En Flash 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.
Veamos la funcin de cada fotograma de un smbolo de botn:
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 Presionado, representa el aspecto que asume el botn cuando el usuario

hace clic sobre 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.
- En una nueva animacin inserte un nuevo smbolo de tipo botn y de nombre

INGRESAR.

- Note que en la lnea de tiempo se halla seleccionada el fotograma REPOSO.
- Realice el diseo de lo que ser su botn (de ser necesario inserte ms capas).
- En la Lnea de tiempo, haga clic en el fotograma SOBRE y luego inserte un

fotograma clave. El fotograma clave insertado es una copia del contenido del
fotograma Reposo.
- Modifique el diseo del botn
- En la Lnea de tiempo, haga clic en el fotograma PRESIONADO y luego inserte un

fotograma clave. El fotograma clave insertado es una copia del contenido del
fotograma Sobre.

- Modifique el diseo del botn
- 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.
- Haga clic sobre el fotograma Zona activa.
- Sobre la capa CUADRO, insertar un fotograma clave. El fotograma clave insertado

es un duplicado del contenido del fotograma Presionado.
- Puede comprobar la zona activa al probar la pelcula.
Si desea Incluir un Clip en un botn puede dotar a stos de ms vistosidad. Es

habitual colocar un clip en el fotograma Sobre para indicar algn tipo de informacin
extra o una animacin para ir ms all de un cambio de color.

Tambin es comn ver un clip de pelcula actuando como un botn. Esto caso se puede
hacer por ejemplo poniendo el clip en el fotograma Reposo.
- Crear un nuevo smbolo de tipo Clip de Pelcula, de nombre PULSACION.
- Crear una animacin como la que sigue:
- Luego edite el botn anterior: Insertar el clip

pulsacin en una
nueva capa
Eliminar el
fotograma clave

Si desea Incluir Sonido en un botn simplemente debemos editar nuestro botn y
seleccionar el fotograma Presionado. Ahora debemos insertar el sonido. Por ejemplo
podramos importar uno desde nuestro disco duro o bien tomar alguno que ya tengamos en
la biblioteca
- Importar el archivo SOUND.wav hacia la Biblioteca.
- 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:

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.
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");
}
- Controlar una pelcula en curso. Si estamos reproduciendo una pelcula Flash y

queremos permitir que el usuario la detenga, la ponga en marcha, avance, retroceda,
etc., para ello podemos emplear las acciones:
stop(); para detener.

play(); para reproducir.
gotoAndPlay(numeroFotograma); para ir a un fotograma determinado.
Por ejemplo, podemos tener el botn btnPausar para parar la pelcula y el botn
btnContinuar para reproducirla:

btnPausar.addEventListener('click', pausar);
function pausar(event):void{
stop();
}
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();

Objetivos
Generar y Publicar Pelculas.

- Consideraciones acerca del tamao.
- Usar precargadores.
- Distribucin del archivo SWF para la web.

GENERAR Y PUBLICAR PELICULAS.
a. Consideraciones acerca del tamao.

Antes de aventurarnos a publicar nuestra pelcula para que otros la vean, sobre todo si
la vamos a publicar en una pgina web, donde el tamao de descarga es de vital
importancia, debemos tener en cuenta los siguientes aspectos:
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.
La herramienta Pincel gasta ms memoria que el resto de herramientas de dibujo, por lo

que deberamos elegir estas ltimas 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.
Dibujar las curvas con el menor nmero de nodos posible.
CONSIDERACIONES EN LA ORGANIZACIN:
Agrupar los objetos que estn relacionados, con el Men Modificar > Agrupar.
Si hemos creado un objeto que va a aparecer varias veces, deberamos convertirlo a

smbolo, ya que como hemos visto, Flash lo colocar en la biblioteca y cada vez que
quiera mostrarlo, har referencia a una nica posicin de memoria.
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 LOS TEXTOS:

Hemos podido observar, cuando manejbamos textos, que cuando abrimos el men de
tipos de letras, las tres primeras son siempre "_sans", "_serif" y "_typewriter". Esto no es
una casualidad. Estn colocadas ah para resaltar que estas fuentes ocupan un mnimo
de memoria, por lo que se recomienda su uso.
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.
Independientemente de la optimizacin que hagamos, a veces no se puede evitar que el

tamao de la pelcula aumente. Es recomendable entonces hacer un preloader
(precarga) cuando la pelcula que queramos publicar sea de tamao superior a unos
80KB.
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".
En la capa "Cargando" crearemos una animacin sencilla. Por ejemplo, hagmosle

honor al ttulo y escribamos "Cargando ..."; puedes aplicarle la animacin que prefieras,
siempre que no sea muy compleja. En nuestro ejemplo, esta capa tiene por lo menos
dos fotogramas.
En la capa "Accin" disearemos el "corazn" del preloader. Vamos a hacer que la

animacin de nuestra escena de carga se ejecute repetidas veces, hasta que se haya
cargado la escena que contiene la pelcula principal, mediante las acciones ActionScript
3 de Flash. Para ello abrimos el panel de Acciones.
Vamos a emplear la funcin gotoAndPlay de ActionScript, que como ya comentamos nos

permite ir a un fotograma determinado. Podemos escribirlo gotoAndPlay(1, "Escena")
para ir al primer fotograma de la escena indicada.
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.

Para expresar esto en ActionScript, lo haramos as:
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.
c. Distribucin del archivo SWF para la web.

Esta es una parte importante, ya que normalmente las pelculas de Flash estn
orientadas a la publicacin va Web.
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).

EXPORTAR A DIVERSOS FORMATOS:
Muchas veces necesitamos tener nuestra pelcula Flash aparte del formato swf, tenerlo tambin
en formatos como por ejemplo una imagen fija JPG o de repente una animacin en formato GIF.
Veamos como podemos realizar este tipo de exportaciones.
Existen 2 modos de exportacin:

- Exportar Imagen.
- Exportar pelcula.

EXPORTAR IMAGEN:
Cuando exporto una imagen solo exportar la posicin donde se encuentre el cabezal de la
pelcula, por ejemplo en el siguiente grfico nos detendremos en el fotograma 20 y exportaremos
solo lo que se muestra en ese fotograma.
Ahora nos vamos al Men archivo Exportar Exportar imagen
Nos mostrar una ventana donde Erigiremos donde se guardar el archivo Nuevo, as como el tipo
de formato de imagen.

Vamos a elegir como formato de salida JPG Presionamos el Botn Guardar.
Antes de guardarlo nos mostrar una cuadro de Dialogo donde ajustaremos el tamao de salida
que tendr nuestro archivo.
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.
Sigamos el siguiente procedimiento: Men archivo Exportar Exportar Pelcula.

En esta ventana Pondremos un nombre de archivo y seleccionaremos a que formato queremos
exportar:
Nos mostrar varias opciones donde se puede exportar la pelcula completa como una video o
una animacin, seleccionar para este ejemplo: Windows AVI.
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
Para poder publicar y crear un CD interactivo es necesario primero crear un ejecutable de

nuestra Pelcula, para ello tenemos que Publicar la pelcula como un proyector Windows ( .EXE).

Podemos acceder mediante el men Archivo>Configuracin de Publicacin.
Ahora desactivaremos todos las casillas y solo marcaremos la que indica Proyector
Windows(.exe)
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.
Finalmente Presionamos el Botn Publicar y tendremos listo nuestro Proyector .exe
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

(.inf) donde tenga un Script que indique que apenas se colocado el CD arranque el proyecto
Flash.
Vamos a crear este archivo en el Bloc de Notas.
Aqu indicaras que archivos (.exe)

quieres que se ejecute apenas abra el
disco
Adicionalmente tambin podras incluir
un icono en tu Disco de esa manera
cargar con una imagen tu CD.
Finalmente guardas este archivo con el nombre autorun.inf
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.
Ahora procedemos a grabar nuestro CD-Interactivo.

Tendremos como resultado que al cargar el Disco pueda tener este aspecto.

CONTENIDO PARA DISPOSITIVOS MVILES
Flash permite la generacin de contenidos para telfonos mviles, para esto al momento de
ingresar al programa debemos seleccionar Archivo de Flash (mvil).
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

Una vez seleccionado el modelo le damos Clic en el Botn Crear, y Flash automticamente
preparar el rea de trabajo adecuado para el Modelo de este telfono mvil.

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
INTRODUCCIN A ACTION SCRIPT 3.0

El ActionScript es el lenguaje de programacin que ha utilizado Flash desde sus comienzos, y
que por supuesto, emplea Flash CS 5.5. A grandes rasgos, podemos decir que el ActionScript
nos permitir realizar con Flash CS 5.5 todo lo que nos propongamos, ya que nos da el control
absoluto de todo lo que rodea a una pelcula Flash. Absolutamente de todo.
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.

El ActionScript presenta muchsimos parecidos con el Javascript; si conoce
Javascript, la sintaxis y el estilo de ActionScript le resultarn muy familiares.
En la mayor parte de las ocasiones, no ser necesario "programar" realmente, Flash

CS4 pone a nuestra disposicin una impresionante coleccin de "funciones" (de
momento entenderemos "funciones" como "cdigo ActionScript que realiza una
funcin determinada") ya implementadas que realizan lo que buscamos, bastar con
colocarlas en el lugar adecuado.
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.

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.
INTRODUCCIN A LA PROGRAMACIN EN AS 3.0

a. Variables
Se define como un espacio en memoria en donde se puede almacenar un tipo de
dato especfico.
En ActionScript 3.0, una variable se compone realmente de tres partes distintas:
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":
String: un valor de texto como, por ejemplo, un nombre o el texto de un captulo

de un libro.

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
c. Operadores Aritmticos y de Comparacin
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

Ejemplo:
En la Lnea de Tiempo pulsar F9 en el primer fotograma y digitar:
Luego pulsar CTRL+ENTER para mostrar el resultado en la Ventana Salida.
Para declarar una variable se debe escribir la siguiente lnea:

var nombreVariable:tipoVariable = valorVariable;
Ejercicio.
1. Crear una pelcula usando dos capas, una para el formulario (GUI), y otra para las
acciones (Acciones)
2. El formulario estar creado con campos de texto de tipo esttico, de entrada

(instancias: txtEP, txtEF) y dinmico (txtProm), un botn de la biblioteca comn
(btnCalcular).

3. En el primer fotograma de la capa Acciones, escribiremos el siguiente cdigo que
permita realizar las siguientes tareas:
o El enfoque se hallar sobre el campo de texto txtEP.
o Al obtener el enfoque, quedar seleccionado todos los caracteres de este

campo.
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.
CONVERSIN DE TIPOS DE DATOS.
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.
La conversin implcita, tambin denominada coercin, en ocasiones es realizada en

tiempo de ejecucin por Flash Player o Adobe AIR. Por ejemplo, si a una variable del
tipo de datos Boolean se le asigna el valor 2, Flash Player o Adobe AIR convertirn este
valor en el valor booleano true antes de asignar el valor a la variable.
Ejemplo.
txtProm.text = El promedio es +p;
La variable numrica p es convertida a cadena para ser

concatenada con el texto.
La conversin explcita, tambin denominada conversin, se produce cuando el cdigo

ordena al compilador que trate una variable de un tipo de datos como si perteneciera a
un tipo de datos distinto. Si se usan valores simples, la conversin convierte realmente
los valores de un tipo de datos a otro. Para convertir un objeto a otro tipo, hay que incluir
el nombre del objeto entre parntesis y anteponerle el nombre del nuevo tipo.
Ejemplo.
ep = uint(txtEP.text);
Usamos la expresin que permita a convertir a uint el valor

guardado en el campo de texto txtEP.

Objetivos
Estructuras de Control Condicionales.

- Estructuras de Decisin.
- Estructuras de Seleccin Mltiple.
Estructuras Repetitivas.
- Do While
- For

ESTRUCTURAS DE CONTROL CONDICIONALES
As como en los lenguajes de programacin, muchos de los procedimientos dependen de
expresiones lgicas, de la seleccin de un determinado valor o de la repeticin controlada de
una serie de instrucciones, es por ello que las estructuras de control nos permiten tener un mejor
control sobre el proceso de desarrollo de lo que deseamos construir.
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 el ejemplo siguiente, se ingresa un valor a la variable Monto, si esta cantidad es

mayor a 500.00 se le asigna un descuento del 10%.
En este bloque, asignamos a la variable MONTO el valor de 80.00, y al DESC le

asignamos al inicio el valor de 0. Luego, pregunta si el MONTO es mayor a 800,
entonces, el DESC ser el 10% (que es lo mismo que decir 10/100 = 0.1) del
MONTO. Por ltimo se muestra el resultado del DESC.
- 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):

b. Estructuras de Seleccin Mltiple
La sentencia switch resulta til si hay varios hilos de ejecucin que dependen de la
misma expresin de condicin. La funcionalidad que proporciona es similar a una serie
larga de sentencias if..else if, pero su lectura resulta un tanto ms sencilla. En lugar de
probar una condicin para un valor booleano, la sentencia switch evala una expresin y
utiliza el resultado para determinar el bloque de cdigo que debe ejecutarse. Los
bloques de cdigo empiezan por una sentencia case y terminan con una sentencia
break.
- En el siguiente ejemplo, a la variable mes se le asigna el valor de 7, luego mostrar el

nombre del mes correspondiente.
- En el ejemplo siguiente, se han incluido campos de texto de entrada (txtDia, txtMes,

txtAnno), un botn Evaluar (instancia: btnEvaluar), dos campos de texto dinmicos

(txtNombre, txtTipoAnno) en donde se mostrar el nombre del mes correspondiente
(Enero, Febrero, etc.), y un mensaje si el AO ES BISIESTO o NO.
En la capa GUI, en el primer fotograma hacemos el diseo antes indicado.
En la misma capa, en el fotograma 5 (por ejemplo), hacemos el siguiente diseo:
En la capa Acciones, en el fotograma 1, pulsamos F7 para insertar un fotograma

clave, y abrimos el Panel de Acciones (pulsar F9), aqu escribimos:

En la misma capa, insertamos otro fotograma clave en el fotograma 5, y en Panel de
Acciones escribimos:
ESTRUCTURAS DE CONTROL REPETITIVAS

Las sentencias de bucle permiten ejecutar un bloque especfico de cdigo repetidamente
utilizando una serie de valores o variables. Adobe recomienda escribir siempre el bloque de
cdigo entre llaves ({}). Aunque puede omitir las llaves si el bloque de cdigo slo contiene una
sentencia, no es recomendable que lo haga por la misma razn expuesta para las

condicionales: aumenta la posibilidad de que las sentencias aadidas posteriormente se
excluyan inadvertidamente del bloque de cdigo. Si posteriormente se aade una sentencia
que se desea incluir en el bloque de cdigo, pero no se aaden las llaves necesarias, la
sentencia no se ejecutar como parte del bucle.
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:
Veamos algunos ejemplos.
- Mostrar la palabra INSTITUTO SISE diez veces.
- Mostrar una lista de los 15 primeros nmeros enteros positivos.

- Mostrar la siguiente serie numrica: 6,10, 14, .. (20 trminos)
Usando la estructura FOR:

Usando la estructura WHILE:
- Mostrar la serie: 20, 30, 40, 50, . (20 trminos), y la suma de dichos trminos.

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).
a. Manejando sus Propiedades
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.
- ROTACION: Usar la propiedad "rotation" para modificar o leer la rotacin de un

MovieClip. Los valores a usar estn en el rango de 0 a 360.
- ESCALAR: Usar las propiedades "scaleX" y "scaleY" para modificar o leer la

escala horizontal y vertical de un MC. Los valores a usar estn en el rango de 0
a 1 (en donde cero es 0% de escala y 1 es 100% de escala).
- TRANSPARENCIA: Usar la propiedad "alpha" para modificar o leer la

transparencia de un MC. Los valores a usar estn en el rango de 0 a 1 (en
donde cero es 0% de Opacidad y 1 es 100% de opacidad).
- 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.

b. Aplicando cambios de posicin, rotacin, escala y transparencia.
En el siguiente ejemplo crearemos una pelcula con los siguientes elementos:
El personaje de BOB ESPONJA es un clip de pelcula que se halla en la capa

PERSONAJE, y que tiene como nombre de instancia bob_mc.
Primero mostraremos cierta informacin como su posicin horizontal, vertical, el ancho y

alto de la pantalla. Esto, en la capa Acciones.

Al pre visualizar, muestra el MC en el centro de la pantalla.
Guarda los valores iniciales en variables.
Estas acciones darn funcionalidad a los botones que permitan el cambio de su

posicin.

Para controlar la rotacin y cambio de tamao:
Controlando el grado de transparencia (ALPHA):

Para restaurar los valores del MovieClip.
DETECCION DE LAS TECLAS PULSADAS

En primer lugar vamos a crear un listener que nos avisar cuando ha sido presionada una tecla.
Este debemos asociarlo al escenario (stage). Y le indicamos que al ser presionada una tecla
ejecute la funcin presionaTecla:
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{

//Es importante especificar que es un vento del tipo KeyboardEvent
//para poder emplear el mtodo .keyCode.
switch (tecla.keyCode){
case Keyboard.RIGHT:
movil.x=movil.x+20;
break;
case Keyboard.LEFT:
movil.x=movil.x-20;
break;
}
}
- Vamos a aplicarlo en un ejemplo, en el que importaremos una imagen en forma de una

escopeta y lo convertimos en smbolo de tipo Clip de Pelcula con el nombre de instancia
mc_escopeta. Crearemos tres capas, una para el fondo (aqu dibujamos cualquier tipo
de fondo como un bosque), una para los objetos que intervienen (la escopeta) y otra
para las acciones.
- En el fotograma de la capa Acciones, escribimos las siguientes instrucciones:
- 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.
CARGA Y DESCARGA DE ELEMENTOS DE LA BIBLIOTECA

Otra de las tcnicas que nos ser muy til es la carga y descarga de elementos existentes en la
biblioteca. Esto lo haremos con la funcin addChild.
Esta funcin aade un elemento (hijo) a la lista de visualizacin de un contenedor (padre). Si

omitimos el objeto, lo aadimos a la pelcula general. Tiene la siguiente sintaxis:
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 eliminar clips insertados mediante addChild puedes utilizar removeChild() o

removeChildAt().
miContenedor.removeChild(miClip);
Recuerda que antes de quitar un elemento, es recomendable borrar sus escuchadores de

eventos.
- En el siguiente ejemplo, hemos importado un clip de pelcula de nombre mcPato, y

colocamos una instancia de este en nuestra pelcula con el nombre de instancia mcPato.
- Para crear una clase y usarlo desde ActionScript, hacemos clic sobre el botn
AVANZADO, y luego marcamos las opciones:

- Usaremos addChild para agregar el objeto a la pelcula, controlando la posicin
horizontal cuando el pato este fuera de la pantalla y retorne.

- Podramos haber probado este otro cdigo, que permite trabajar con valores aleatorios.
- Luego de hacer una modificacin al clip msEscopeta, podramos controlar al pulsar la

tecla INSERT para dar al blanco, y mostrar en un texto dinmico el puntaje.

- Quedara como ejercicio, modificar el cdigo para que al disparar al pato, usando
removeChild se elimine, pero que luego aparezca otro.

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

INTERACCION CON EL MOUSE
Veamos ahora cmo interactuar con el ratn y el Escenario y sus elementos.
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);
}
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();
INTERACCION ENTRE ELEMENTOS

Una de las cosas que ms nos interesar realizar es el choque entre elementos en el Escenario,
y ya no el choque fsico en s, sino la coincidencia de dos elementos en un mismo espacio.
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 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.

- Lo importamos para ActionScript.

- En una capa ACCIONES, escribimos las rutinas que permitan mover los ALIENS.
- Previsualizar y observar el resultado. Ahora puede crear un clip de pelcula mcBlanco,

que ser incluido en una capa y que permitir aplicar el BLANCO del disparo.

- Al script anterior, aadir:
- 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.
TRABAJANDO CON SONIDOS

ActionScript se ha diseado para crear aplicaciones interactivas y envolventes. Un elemento a
menudo olvidado de las aplicaciones envolventes es el sonido. Se pueden aadir efectos de
sonido a un videojuego, comentarios de audio a una interfaz de usuario o incluso crear un
programa que analice archivos MP3 cargados por Internet, con el sonido como un componente
importante de la aplicacin.
a. Carga de archivos de sonido externo

Cada instancia de la clase Sound existe para cargar y activar la reproduccin de un
recurso de sonido especfico. Una aplicacin no puede reutilizar un objeto Sound para
cargar ms de un sonido. Para cargar un nuevo recurso de sonido, debe crear otro
objeto Sound.
Si se carga un archivo de sonido pequeo, como un sonido de clic que se asociar a un

botn, la aplicacin puede crear un nuevo objeto Sound y cargar automticamente el
archivo de sonido, tal como se muestra a continuacin:
var req:URLRequest = new URLRequest("click.mp3");

var s:Sound = new Sound(req);

El constructor Sound() acepta un objeto URLRequest como primer parmetro. Cuando
se proporciona un valor del parmetro URLRequest, el nuevo objeto Sound empieza a
cargar automticamente el recurso de sonido especificado.
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.
El cdigo siguiente ilustra la manera de reproducir un sonido una vez cargado:
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.
El mtodo onSoundLoaded() se ejecuta cuando se completa la carga de sonido. La

propiedad target del objeto Event es una referencia al objeto Sound. La llamada al
mtodo play() del objeto Sound inicia la reproduccin de sonido.
b. Reproduccin de Sonidos
Al reproducir sonidos con ActionScript 3.0, se pueden realizar las operaciones
siguientes:
Reproducir un sonido desde una posicin de inicio especfica

Pausar un sonido y reanudar la reproduccin desde la misma posicin
posteriormente
Saber exactamente cundo termina de reproducirse un sonido
Hacer un seguimiento del progreso de la reproduccin de un sonido
Cambiar el volumen o el desplazamiento cuando se reproduce un sonido
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();
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:
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:
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

Event.ENTER_FRAME y otro detector de eventos al objeto SoundChannel para el
evento Event.SOUND_COMPLETE que se produce cuando finaliza la reproduccin.
Cada vez que la aplicacin alcanza un nuevo fotograma en su animacin, se llama al

mtodo onEnterFrame(). El mtodo onEnterFrame() estima la duracin total del archivo
de sonido segn la cantidad de datos que ya se han cargado, y luego calcula y muestra
el porcentaje de reproduccin actual.
Cuando se ha reproducido todo el sonido, se ejecuta el mtodo onPlaybackComplete() y

se elimina el detector de eventos para el evento Event.ENTER_FRAME, de manera que
no intente mostrar actualizaciones de progreso tras el fin de la reproduccin.
El evento Event.ENTER_FRAME puede distribuirse muchas veces por segundo. En

algunos casos no ser necesario mostrar el progreso de la reproduccin con tanta
frecuencia. De ser as, la aplicacin puede configurar su propio mecanismo de
sincronizacin con la clase flash.util.Timer.
- 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.
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.
Nota: ActionScript diferencia entre maysculas y minsculas, por lo que si escribes,

por ejemplo, mouse_up no ser reconocido.
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
Controladores de la Lnea de Tiempo
Una vez insertados los botones y definidos los eventos sobre los que deben actuar,
tendremos que decidir qu queremos que hagan.
De esta forma podremos crear dinamismo entre nuestras secciones.
Imagina que tenemos la siguiente lnea de tiempo:
Observa la capa ParteMedia. En ella se encuentran todo el contenido de las secciones.
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).
Para ello utilizaremos la funcin stop().

Esta funcin sirve para parar el cabezal de la lnea de tiempo donde sea colocada. As que
seleccionamos el ltimo fotograma de la seccin y abrimos el Panel Acciones.
All deberemos escribir nicamente la lnea:
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().
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:
Botn al que aadiremos el evento Evento
Funcin que ser llamada desde el evento
Fotograma al que ir el botn al ser pulsado
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:

Adems de estos controladores podemos utilizar tambin:
gotoAndStop(fotograma), que situar el cabezal en el fotograma indicado y parar la

reproduccin.
play(), que har que la reproduccin prosiga en el fotograma en el que se encuentre el

cabezal.
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.
Existen los controladores prevScene() y nextScene() que hacen avanzar el cabezal a

escenas anteriores o siguientes. As que veremos qu son las escenas para poder utilizarlos
tambin.

Manual Flash Cs5 - V2012

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Manual Flash Cs5 - V2012

Transféré par

Droits d'auteur :

Formats disponibles

ndice

ADOBE FLASH CS 5.5 2

Esta gua didctica es un material de ayuda institucional, perteneciente al rea

Disear con Adobe Flash CS5.5 es la forma ms rpida de crear aplicaciones y

La Organizacin SISE, lder en la enseanza tecnolgica a nivel superior,

ADOBE FLASH CS 5.5 3

ADOBE FLASH CS 5.5 4

NOVEDADES DE LA VERSION CS 5.5

Animacin basada en objetos

ADOBE FLASH CS 5.5 5

ADOBE FLASH CS 5.5 6

ADOBE FLASH CS 5.5 7

ADOBE FLASH CS 5.5 8

Una vez cargado el programa, se muestra una ventana que permite:

Abrir un elemento existente.

ADOBE FLASH CS 5.5 9

ADOBE FLASH CS 5.5 10

ADOBE FLASH CS 5.5 11

HERRAMIENTA TEXTO: Permite crear textos estticos, dinmicos o de

HERRAMIENTA LINEA: Permite crear lneas rectas de un modo rpido. Las

PERSIANA FORMAS: Permite crear RECTANGULOS u OVALOS.

HERRAMIENTA LAPIZ: Permite dibujar lneas con la forma que decidamos,

HERRAMIENTA PINCEL: Su funcionalidad equivale a la del lpiz, pero su

- Trazar un ovalo circular (mientras los dibujes mantn pulsada la tecla

ADOBE FLASH CS 5.5 12

- Activar la herramienta Rectngulo y establecer sin color de trazo y relleno

ADOBE FLASH CS 5.5 13

El botn ENDEREZAR, permite alinear los segmentos de una curva. Su aplicacin

ADOBE FLASH CS 5.5 14

O cambiar la forma de las esquinas (2).

Dentro de la persiana Formas, adems de los valos y rectngulos, encontramos la

ADOBE FLASH CS 5.5 15

ADOBE FLASH CS 5.5 16

a. Herramienta Cubo de Pintura

Puede utilizar la herramienta Cubo de pintura para cambiar el color de la pintura

- Seleccione la herramienta Cubo de pintura. La seccin Opciones muestra

Modificador tamao de hueco

- Haga clic en el modificador Tamao de hueco y elija No cerrar saltos.

- Elija Cerrar huecos grandes en el modificador

- Haga clic dentro del rea hueca. Flash rellena el

ADOBE FLASH CS 5.5 17

ADOBE FLASH CS 5.5 18

b. Herramienta Transformacin de Degradado.

ADOBE FLASH CS 5.5 19

- Dirjase al Panel de Colores y modifique los colores:

1. Elija el tipo Radial.

- Haga clic en la Herramienta Transformar relleno.

Selector que recorta o alarga el rango del degradado.

ADOBE FLASH CS 5.5 20

Se puede usar la herramienta TRANSFORMACION LIBRE (o pulsando la tecla Q) para modificar

- Active la herramienta Seleccin de la caja de herramientas, y hacer doble clic en el

- En la caja de herramientas, haga clic en la herramienta Transformacin libre. La seccin

- En la seccin Opciones, haga clic en botn Rotar y sesgar.

Rotar y sesgar Escalar

ADOBE FLASH CS 5.5 21

- Site el puntero en uno de los controladores laterales y arrastre hacia la izquierda o

- Para aumentar o reducir el tamao de un objeto:

Haga clic en la herramienta Transformacin libre.

En la seccin Opciones, haga clic en botn Escalar.

Site el puntero en uno de los controladores y arrastre para escalar el objeto.

CREANDO UNA PRIMERA ANIMACIN FOTOGRAMA POR

Como Flash es un programa de animacin dinmica, es importante comprender el manejo del

- Cartoons: En este tipo de trabajos, las Escenas equivalen a la escena de un film.

ADOBE FLASH CS 5.5 22