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

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.

ADOBE FLASH CS 5.5

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.

ADOBE FLASH CS 5.5

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.

ADOBE FLASH CS 5.5

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.

ADOBE FLASH CS 5.5

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

ADOBE FLASH CS 5.5

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

ADOBE FLASH CS 5.5

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.

ADOBE FLASH CS 5.5

El Entorno de Adobe Flash es el siguiente:

1 3

1. 2. 3. 4. 5.

Barra de Men. Cuadro de Herramientas. Panel de Propiedades. rea de Trabajo o Escenario. Lnea de Tiempo.

SELECCIN Y DIBUJO
Podemos iniciar creando un nuevo documento, desde la pantalla inicial establecemos el lenguaje a utilizar: ActionScript 3.0.

ADOBE FLASH CS 5.5

10

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

ADOBE FLASH CS 5.5

11

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

ADOBE FLASH CS 5.5

12

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

1 2 3

Activar la herramienta Rectngulo y establecer sin color de trazo y relleno gris.

ADOBE FLASH CS 5.5

13

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.

ADOBE FLASH CS 5.5

14

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.

ADOBE FLASH CS 5.5

15

b. Seleccin de objetos.
Si hacemos un clic sobre el centro de la forma (en el relleno) o al trazo, y al moverlo, se observa que solo esa parte es la que se desplaza.

Si hacemos un doble clic sobre el centro de la forma, al moverlo, se observa que ahora es todo el objeto que puede ser desplazado.

Esto tambin se logra al activar la herramienta Seleccin (o pulsar la tecla V), y al trazar un rea alrededor de la forma.

ADOBE FLASH CS 5.5

16

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.

ADOBE FLASH CS 5.5

17

Si desea modificar nuevamente el color, puede usar cualquiera de las siguientes formas:

Adems, si activa la Ventana de Colores ( Men Ventana > Color), puede manipular mejor el color a elegir, y el tipo de relleno (slido o degradado).

4 5

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

ADOBE FLASH CS 5.5

18

Si en lugar de un color slido, desea un degradado de colores, se puede elegir el tipo: LINEAL, RADIAL, etc.

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:

ADOBE FLASH CS 5.5

19

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.

ADOBE FLASH CS 5.5

20

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

Selector que permite rotar el 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 Distorsionar

Escalar Envoltura

ADOBE FLASH CS 5.5

21

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

ADOBE FLASH CS 5.5

22

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 fot ograma 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.

ADOBE FLASH CS 5.5

23

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.

ADOBE FLASH CS 5.5

24

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.

ADOBE FLASH CS 5.5

25

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

ADOBE FLASH CS 5.5

26

Objetivos
Manejo de Vectores - Herramienta Lpiz. - Herramienta Pluma. - Dibujo de Curvas y Trazos. - Edicin de Curvas. - Dibujo de Objetos. Textos - Tipos: Estticos, Dinmicos y de Entrada. Smbolos Movimiento - Interpolacin de Movimiento. - Interpolacin Clsica. - Interpolacin de Formas. - Usando la Herramienta Huesos

ADOBE FLASH CS 5.5

27

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.

ADOBE FLASH CS 5.5

28

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.

ADOBE FLASH CS 5.5

29

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.

ADOBE FLASH CS 5.5

30

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.

ADOBE FLASH CS 5.5

31

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

ADOBE FLASH CS 5.5

32

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.

ADOBE FLASH CS 5.5

33

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:

ADOBE FLASH CS 5.5

34

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.

ADOBE FLASH CS 5.5

35

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.

ADOBE FLASH CS 5.5

36

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.

ADOBE FLASH CS 5.5

37

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.

ADOBE FLASH CS 5.5

38

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

ADOBE FLASH CS 5.5

39

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.

ADOBE FLASH CS 5.5

40

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

ADOBE FLASH CS 5.5

41

Luego, si desea ser utilizado en una animacin, se arrastra al Escenario.

Tambin puede importar imgenes (Men Archivo > Importar > Importar a Biblioteca)

ADOBE FLASH CS 5.5

42

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.

ADOBE FLASH CS 5.5

43

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

ADOBE FLASH CS 5.5

44

expande para editarla con facilidad. En la grfica encontramos los fotogramas clave marcados como un cuadrado negro, o verde cuando est seleccionado. Estirando de ellos, o de la lnea de la grfica podemos alterar los valores. En la grfica, vemos que los puntos suelen formar un vrtice. Una opcin muy interesante es poder transformarlos en puntos suavizados (desde el men contextual del fotograma), creando una curva Bezier, lo que formar transiciones ms suaves entre los picos de valor. Esto no es aplicable a las propiedades X,Y, Z. 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).

ADOBE FLASH CS 5.5

45

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.

ADOBE FLASH CS 5.5

46

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:

ADOBE FLASH CS 5.5

47

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.

ADOBE FLASH CS 5.5

48

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.

ADOBE FLASH CS 5.5

49

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.

ADOBE FLASH CS 5.5

50

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.

ADOBE FLASH CS 5.5

51

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.

ADOBE FLASH CS 5.5

52

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.

ADOBE FLASH CS 5.5

53

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.

ADOBE FLASH CS 5.5

54

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.

ADOBE FLASH CS 5.5

55

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.

ADOBE FLASH CS 5.5

56

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.

ADOBE FLASH CS 5.5

57

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.

ADOBE FLASH CS 5.5

58

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.

ADOBE FLASH CS 5.5

59

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.

ADOBE FLASH CS 5.5

60

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.

ADOBE FLASH CS 5.5

61

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

ADOBE FLASH CS 5.5

62

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

ADOBE FLASH CS 5.5

63

Ahora vamos a cambiar la vinculacin de un hueso.

Ahora le damos clic y arrastramos hacia el otro hueso.

ADOBE FLASH CS 5.5

64

Objetivos
Mscaras Botones. - Uso de la Biblioteca Comn. - Creacin de botones. - Insertando audio y clips de pelcula sobre botones. Acciones.

ADOBE FLASH CS 5.5

65

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.

ADOBE FLASH CS 5.5

66

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.

ADOBE FLASH CS 5.5

67

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.

ADOBE FLASH CS 5.5

68

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.

ADOBE FLASH CS 5.5

69

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

ADOBE FLASH CS 5.5

70

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:

ADOBE FLASH CS 5.5

71

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:

ADOBE FLASH CS 5.5

72

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();

ADOBE FLASH CS 5.5

73

Objetivos
Generar y Publicar Pelculas. - Consideraciones acerca del tamao. - Usar precargadores. - Distribucin del archivo SWF para la web.

ADOBE FLASH CS 5.5

74

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

ADOBE FLASH CS 5.5

75

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.

ADOBE FLASH CS 5.5

76

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

ADOBE FLASH CS 5.5

77

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.

ADOBE FLASH CS 5.5

78

 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.

ADOBE FLASH CS 5.5

79

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.

ADOBE FLASH CS 5.5

80

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

ADOBE FLASH CS 5.5

81

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

ADOBE FLASH CS 5.5

82

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

ADOBE FLASH CS 5.5

83

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

ADOBE FLASH CS 5.5

84

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.

ADOBE FLASH CS 5.5

85

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.

ADOBE FLASH CS 5.5

86

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.

ADOBE FLASH CS 5.5

87

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.

ADOBE FLASH CS 5.5

88

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 Incremento de 1 en 1 Decremento de 1 en 1 A X se le asigna el Valor

X++ X-X=Valor

ADOBE FLASH CS 5.5

89

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

ADOBE FLASH CS 5.5

90

3. En el primer fotograma de la capa Acciones, escribiremos el siguiente cdigo que permita realizar las siguientes tareas: o o o El enfoque se hallar sobre el campo de texto txtEP. Al obtener el enfoque, quedar seleccionado todos los caracteres de este campo. 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 concatenada con el texto. convertida a cadena para ser

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.

ADOBE FLASH CS 5.5

91

Objetivos
Estructuras de Control Condicionales. - Estructuras de Decisin. - Estructuras de Seleccin Mltiple. Estructuras Repetitivas. - Do While - For

ADOBE FLASH CS 5.5

92

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

ADOBE FLASH CS 5.5

93

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

ADOBE FLASH CS 5.5

94

(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:

ADOBE FLASH CS 5.5

95

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

ADOBE FLASH CS 5.5

96

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.

ADOBE FLASH CS 5.5

97

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

ADOBE FLASH CS 5.5

98

Usando la estructura WHILE:

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

ADOBE FLASH CS 5.5

99

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.

ADOBE FLASH CS 5.5

100

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.

ADOBE FLASH CS 5.5

101

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.

ADOBE FLASH CS 5.5

102

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.

ADOBE FLASH CS 5.5

103

Para controlar la rotacin y cambio de tamao:

Controlando el grado de transparencia (ALPHA):

ADOBE FLASH CS 5.5

104

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{

ADOBE FLASH CS 5.5

105

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

ADOBE FLASH CS 5.5

106

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 removeChildAt(). miContenedor.removeChild(miClip); addChild puedes utilizar removeChild() o

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:

ADOBE FLASH CS 5.5

107

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

ADOBE FLASH CS 5.5

108

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.

ADOBE FLASH CS 5.5

109

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

ADOBE FLASH CS 5.5

110

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

ADOBE FLASH CS 5.5

111

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

ADOBE FLASH CS 5.5

112

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.

ADOBE FLASH CS 5.5

113

Lo importamos para ActionScript.

ADOBE FLASH CS 5.5

114

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.

ADOBE FLASH CS 5.5

115

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

ADOBE FLASH CS 5.5

116

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.

ADOBE FLASH CS 5.5

117

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: import flash.events.Event; import flash.media.Sound; import flash.net.URLRequest; var snd:Sound = new Sound(); var req:URLRequest = new URLRequest("smallSound.mp3"); snd.load(req); var channel:SoundChannel = snd.play(); channel.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete); public function onPlaybackComplete(event:Event) { trace("The sound has finished playing."); }

ADOBE FLASH CS 5.5

118

La clase SoundChannel no distribuye eventos de progreso durante la reproduccin. Para informar sobre el progreso de la reproduccin, la aplicacin puede configurar su propio mecanismo de sincronizacin y hacer un seguimiento de la posicin de la cabeza lectora del sonido. Para calcular el porcentaje de sonido que se ha reproducido, se puede dividir el valor de la propiedad SoundChannel.position entre la duracin de los datos del sonido que se est reproduciendo: var playbackPercent:uint = 100 * (channel.position / snd.length); Sin embargo, este cdigo slo indica porcentajes de reproduccin precisos si los datos de sonido se han cargado completamente antes del inicio de la reproduccin. La propiedad Sound.length muestra el tamao de los datos de sonido que se cargan actualmente, no el tamao definitivo de todo el archivo de sonido. Para hacer un seguimiento del progreso de reproduccin de un flujo de sonido, la aplicacin debe estimar el tamao final de todo el archivo de sonido y utilizar dicho valor en sus clculos. Se puede estimar la duracin final de los datos de sonido mediante las propiedades bytesLoaded y bytesTotal del objeto Sound, de la manera siguiente: var estimatedLength:int = Math.ceil(snd.length / (snd.bytesLoaded / snd.bytesTotal)); var playbackPercent:uint = 100 * (channel.position / estimatedLength); El cdigo siguiente carga un archivo de sonido ms grande y utiliza el evento Event.ENTER_FRAME como mecanismo de sincronizacin para mostrar el progreso de la reproduccin. Notifica peridicamente el porcentaje de reproduccin, que se calcula como el valor de la posicin actual dividido entre la duracin total de los datos de sonido: import flash.events.Event; import flash.media.Sound; import flash.net.URLRequest; var snd:Sound = new Sound(); 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

ADOBE FLASH CS 5.5

119

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.

ADOBE FLASH CS 5.5

120

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.

ADOBE FLASH CS 5.5

121

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

ADOBE FLASH CS 5.5

122

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:

ADOBE FLASH CS 5.5

123

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.

ADOBE FLASH CS 5.5

124