Manual Flash Cs4 - Action Scripts - V0710

ADOBE FLASH CS4 2

Índice Presentación ………………………………………………………. 3

Contenido.

Capítulo 1 ……………………………………………………….. 4 Novedades de la Versión CS4. Entorno de Trabajo.

Herramientas de Selección y Dibujo. Uso de Rellenos.

Escenas, Línea de Tiempo, Capas.

Capítulo 2 ……………………………………………………….. 27 Manejo de Herramientas Vectoriales. Uso de Textos.

Símbolos e Interpolaciones.

Capítulo 3 ……………………………………………………….. 55 Máscaras. Botones Comunes y Personalizados.

Acciones.

Capítulo 4 ……………………………………………………….. 63 Generar y Publicar películas. Usando precargadores.

Capítulo 5 ……………………………………………………….. 67 Introducción a ActionScript 3.0. Fundamentos de Programación.

Tipos de Datos. Conversiones.

Capítulo 6 ……………………………………………………….. 73 Estructuras de Control Condicionales y Repetitivas.

Capítulo 7 ……………………………………………………….. 80 Clips de Película: Manejo de propiedades.

Detección de teclas pulsadas. Carga y descarga de elementos.

Capítulo 8 ……………………………………………………….. 91

Interacciones con el Mouse. Manejo de Colisiones.

Trabajo con Sonido. Navegación usando Botones.

ADOBE FLASH CS4 3

PRESENTACION

Esta guía didáctica es un material de ayuda institucional, perteneciente al Área Técnica de Computación, y que tiene por finalidad proporcionar los conocimientos de diseño para la web en Adobe Flash CS4. Diseñar con Adobe Flash CS4 es la forma más rápida de crear aplicaciones y contenido dinámicos para Internet, lo cual se traduce en una mejor inversión. Las características 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 mayoría de las plataformas entre 436 millones de usuarios en Internet y gracias al dinámico plugin: Flash Player CS4. La Organización SISE, líder en la enseñanza tecnológica a nivel superior, promueve la elaboración de estos materiales de aprendizaje, en concordancia a las actuales exigencias tecnológicas de nuestros tiempos, esperando que sirvan de ayuda para facilitar el proceso de aprendizaje de los estudiantes.

ADOBE FLASH CS4 4

Objetivos

Introducción a Adobe Flash CS4.

Novedades de la versión CS4.

Entorno de Trabajo.

Selección y Dibujo. - Herramientas de Dibujo. - Selección de Objetos.

Cambiando el Relleno de Formas - Herramienta Cubo de Pintura - Herramienta Transformación de Degradado.

Transformando Formas. - Creando una primera animación fotograma por fotograma: Escenas,

Línea de Tiempo, Capas, Fotogramas, la animación.

INTRODUCCIÓN A ADOBE FLASH CS4 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 versión, Flash

puede servir para otras muchas cosas. Crear animaciones interactivas, elementos de navegación,

botones y menús, 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 CS4 Valores predefinidos En esta versión, flash incorpora una serie de animaciones predefinidas que podemos aplicar a cualquier clip de película consiguiendo efectos profesionales. Por ejemplo, en mi caso he probado a poner un texto tipo “guerra de las galaxias”…

ADOBE FLASH CS4 5

Animación basada en objetos Un nuevo sistema de animación hace que cada objeto en el escenario tenga su propia capa, línea de tiempo y sistema de animación. Los keyframes básicamente desaparecen como los conocíamos para convertirse en puntos de animación. En general parece mucho más fácil animar ahora en Flash CS4 que en las versiones anteriores.

Transformación 3D Flash CS4 incluye una herramienta de rotación 3D. Con sólo 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 transformación 3D. Pero hacer esto nativo hará que motores como Papervision3D o Away3D tengan mucha mayor calidad, velocidad, menos peso y mejores gráficos.

http://www.cristalab.com/tutoriales/229/tutorial-de-3d-interactivo-en-flash-con-papervision-3d.html

http://away3d.com/

ADOBE FLASH CS4 6

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, deformación, rotaciones, todo. Todo es controlable y ajustable en detalle. Ideal para el neurótico promedio de la animación profesional.

Cinemática Inversa De esta forma toma nombre la mejor opción de esta novedosa versión de Flash. Esta opción 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 articulación.

ADOBE FLASH CS4 7

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

ADOBE FLASH CS4 8

En sombreado observáis la posición anterior. Los movimientos los genero a través de la herramienta flecha y arrastrando uno de los símbolos.

ADOBE FLASH CS4 9

ENTORNO DE TRABAJO.

1era Forma (clásica)

A través del Menú Inicio.

2da Forma

Cargando el ejecutable del programa (Menú Inicio > Ejecutar: FLASH ).

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

ADOBE FLASH CS4 10

Abrir un elemento existente.

Crear un nuevo archivo. (especificar la versión del lenguaje a usar).

Navegar por la ayuda en línea y tutoriales.

El Entorno de Adobe Flash CS4 es el siguiente:

1

2

3

4

5

ADOBE FLASH CS4 11

1. Barra de Menú. 2. Cuadro de Herramientas. 3. Panel de Propiedades. 4. Área de Trabajo o Escenario. 5. Línea de Tiempo.

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

Luego, en el Panel Propiedades (CTRL + F3, o desde el Menú Ventana > Propiedades), configuramos los valores del documento:

Podríamos definir la velocidad de fotogramas o cuadros por segundo (FPS), el tamaño del documento (400 x 300) y el color de fondo del escenario (celeste).

ADOBE FLASH CS4 12

a. Herramientas de Dibujo. Nos permite crear dibujos vectoriales, tales como formas conocidas: rectángulos, óvalos, etc., líneas rectas o curvas, etc. Estas herramientas las podemos encontrar en el Cuadro de Herramientas (CTRL + F2, o desde el Menú Ventana > Herramientas).

Ejercicio.

- Trazar un ovalo circular (mientras los dibujes mantén pulsada la tecla SHIFT), con color de contorno BLANCO (1), y color de relleno AMARILLO (2), de tipo SOLIDO (3).

HERRAMIENTA TEXTO: Permite crear textos estáticos, dinámicos o de entrada.

PERSIANA FORMAS: Permite crear RECTANGULOS u OVALOS.

HERRAMIENTA LAPIZ: Permite dibujar líneas 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 lápiz, pero su trazo es mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo.

HERRAMIENTA PLUMA: Permite dibujar líneas rectas, curvas suaves,

ajustar ángulos y modificar los segmentos de rectas y curvas

HERRAMIENTA LINEA: Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta.

1 2

3

ADOBE FLASH CS4 13

- Activar la herramienta Línea, y establecer el color de trazo en Amarillo (1), el ancho del contorno en 5 px (2) y de estilo Sólido (3).

- Activar la herramienta Rectángulo y establecer sin color de trazo y relleno gris.

1

2

3

ADOBE FLASH CS4 14

- Activa la herramienta LAPIZ, y elige el color de contorno blanco. Activa el botón

SUAVIZAR, para reducir los puntos de inflexión de las curvas. Luego traza unas formas similares a NUBES. El botón ENDEREZAR, permite alinear los segmentos de una curva. Su aplicación repetitiva transforma la curva en una línea quebrada.

- Intenta dibujar una nube activando el botón 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 extensión FLA. Para que este archivo pueda ser abierto en una versión anterior del programa, establecer en el tipo: DOCUMENTO DE FLASH CS3.

ADOBE FLASH CS4 15

La Herramienta Rectángulo posee propiedades que permiten, por ejemplo, redondear los vértices (1).

O cambiar la forma de las esquinas (2).

Dentro de la persiana Formas, además de los óvalos y rectángulos, encontramos la herramienta polystar, que permite dibujar POLIGONOS o ESTRELLAS.

1

2

ADOBE FLASH CS4 16

b. Selección 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 también se logra al activar la herramienta Selección (o pulsar la tecla V), y al trazar un área alrededor de la forma.

ADOBE FLASH CS4 17

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 vacías rodeadas por líneas. Para utilizar la herramienta Cubo de pintura:

- Seleccione la herramienta Cubo de pintura. La sección Opciones muestra

los modificadores de esta herramienta.

- Haga clic en el modificador Tamaño de hueco y elija No cerrar saltos. - Sitúe el puntero dentro de cualquier área cerrada y haga clic. La siguiente ilustración

muestra el relleno de un área cerrada: Flash es flexible en la interpretación del concepto "cerrado" de las formas. Admite que la forma puede no estar cerrada del todo y tener algún "hueco". En estos casos, Flash aplicará el relleno seleccionando la opción que más convenga en el modificador Tamaño de hueco.

- Elija Cerrar huecos grandes en el modificador

Tamaño de hueco. - Haga clic dentro del área hueca. Flash rellena el

área incluso aunque no esté cerrada del todo.

Modificador tamaño de hueco

Bloquear relleno

ADOBE FLASH CS4 18

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

Además, si activa la Ventana de Colores (Menú Ventana > Color), puede manipular mejor el color a elegir, y el tipo de relleno (sólido o degradado).

Se puede establecer el tipo (1), el color (2), la tonalidad del color (3), los valores Rojo, Verde y Azul (4), el grado de opacidad (5).

1

2

1

2 3 4

5

ADOBE FLASH CS4 19

Si en lugar de un color sólido, 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 ubicación del color (2), el color Rojo (3), una tonalidad media del rojo (4) y se observa la muestra previa (5).

b. Herramienta Transformación 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:

1

3 4

2

5

ADOBE FLASH CS4 20

Dibuje el siguiente gráfico:

- Diríjase al Panel de Colores y modifique los colores:

- Haga clic en la Herramienta Transformar relleno.

- Haga clic dentro de la figura con el relleno degradado lineal, aparecerán tres selectores para realizar las transformaciones.

1. Elija el tipo Radial.

2. Elija el punto (interno o externo)

4. Elija el tono de color.

3. Elija el color.

Selector que recorta o alarga el rango del degradado.

ADOBE FLASH CS4 21

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 Selección 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 Transformación libre. La sección Opciones muestra los modificadores de esta herramienta y unos controladores aparecen alrededor del objeto seleccionado.

- En la sección Opciones, haga clic en botón Rotar y sesgar.

Selector que amplia o reduce la superficie del degradado.

Selector que permite rotar el rango del degradado.

Rotar y sesgar

Distorsionar

Escalar

Envoltura

ADOBE FLASH CS4 22

- Sitúe el puntero en uno de los controladores de esquina y arrastre en sentido horario o antihorario para rotar el objeto.

- Sitúe 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 tamaño de un objeto:

Con la herramienta Selección, haga doble clic en el objeto que desea escalar.

Haga clic en la herramienta Transformación libre.

En la sección Opciones, haga clic en botón Escalar.

Sitúe el puntero en uno de los controladores y arrastre para escalar el objeto.

CREANDO UNA PRIMERA ANIMACIÓN FOTOGRAMA POR FOTOGRAMA. Como Flash es un programa de animación dinámica, es importante comprender el manejo del tiempo en esta aplicación pero también entender qué tipo de películas vamos a crear para poder tener un manejo más 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 estáticos en los que no sucede ninguna acción: las animaciones se dan en respuesta a una acción 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.

Además de tener un inicio y un final fijos, son las que organizan la película. 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 sección de tu sitio: Inicio, Portfolio, Biografía, Contacto. Cada una de estas secciones será una Escena diferente. Cuando los usuarios hagan clic sobre uno de los botones, será redirigido a la Escena correspondiente.

ADOBE FLASH CS4 23

Como vemos en el gráfico, 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 interactúa 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.

Decíamos 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. También se pueden intercambiar o cambiar de orden. El menú se visualiza con Mayúscula+F2.

b. Concepto de línea de tiempo El manejo del tiempo se basa en una Línea de Tiempo. Así como una hora está dividida en minutos y segundos, nuestra Línea de Tiempo se divide en Fotogramas. La línea es siempre infinita, pero la animación va a finalizar en el último fotograma “lleno”, el último que contenga información.

La unidad de medida es Fotogramas por Segundo (fps) y es un valor que se puede modificar, aunque lo más común es utilizar 12 fps. Como se ve en la imagen, la Línea 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 animación.

ADOBE FLASH CS4 24

c. Capas Como complemento de nuestra Línea de Tiempo están las Capas. Su principal función es organizativa. Supongamos que creó un círculo en el primer fotograma de la Capa 1. Luego creó una animación de ese círculo, aumentando su tamaño hasta duplicarlo definitivamente en el fotograma 10. Del fotograma 1 al fotograma 10 tengo la animación de mi círculo. Supongamos que al mismo tiempo quiero crear un círculo al lado y también animarlo. En ese caso, no pueden superponerse más de una animación en la misma capa, por eso tengo que crear el segundo círculo en una capa nueva.

Cada objeto debe estar en su propia capa. Y ojo que cuando de objetos puede ser una combinación de elementos: si mi círculo es un sol en un paisaje y es lo único que va a tener animación, podemos crear todo en la misma capa. Pero más allá de situaciones como esta, no es conveniente ahorrar en capas, todo lo contrario. Cuando más capas tengamos, más organizado estará nuestro trabajo. En el listado de capas, al lado de cada una podemos ver el Estado de la capa: - Ojo: Tildando esta opción

podemos ocultar o mostrar la capa.

- Candado: Esta opción nos permite bloquear una capa. Esto significa que no podremos realizar ninguna modificación a los objetos de la capa.

- Marco: Cuando la opción 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 guía de capa: El elemento “guía de capa” lo veremos más 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, guías y carpetas y todo su contenido.

El orden de las capas está relacionado con su posición virtual en el espacio. La capa inferior del listado se encontrará “detrás” de las otras capas. Podemos ver en las imágenes de los círculos, que el círculo mayor, en la capa 1, está detrás del círculo menor de la capa 2.

ADOBE FLASH CS4 25

d. Fotogramas

Si este tema no es el más importante del taller, se le acerca mucho. Dado que Flash es un programa de animación y los fotogramas son lo que hacen posible esa animación, diré que al menos son un engranaje fundamental en el funcionamiento de esta máquina.

Se le dice fotograma a cada una de las imágenes impresas en una tira de película. En este caso lo veremos un poco diferente, pero en esencia es lo mismo. Ahora, centrémonos en nuestra línea de tiempo. Ese es el escenario donde vamos a tratar con los fotogramas. En Flash hay 2 tipos básicos de fotogramas: claves y comunes. En la línea 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”. ¿Cómo es eso? Flash realiza la animación automáticamente. 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 sólo dos fotogramas. El resto de los fotogramas los genera Flash.

e. La animación Para insertar un fotograma clave, debes hacer lo siguiente:

Posicionarte en el fotograma deseado

Presionar F6 Con el botón izquierdo del mouse verás un menú que también te permite insertar fotogramas. Los fotogramas comunes se generan solos entre dos fotogramas clave. ¿Qué pasa si quiero que un objeto inanimado (un círculo estático, por ejemplo) permanezca en la película durante varios fotogramas?

Inserta el objeto en una capa nueva llamaremos a esta capa “Círculo inanimado”.

Si creamos la nueva capa y dibujamos o pegamos directamente un círculo, este aparecerá en el primer fotograma. Si queremos que el círculo se aparezca recién en el fotograma 5, deberemos:

ADOBE FLASH CS4 26

Ejercicio.

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

- En el fotograma 1 dibujamos la pelota en la posición (1), en el fotograma 5 pulsamos F6 para insertar un fotograma clave y movemos la pelota en la posición (2), y así sucesivamente hasta el fotograma 30. Por último pulse F5 en el fotograma 50.

- Pulse ENTER para ver la animación.

- Pulse CTRL + ENTER para ver la animación en FLASH PLAYER.

1

2

3

4

5

6

7

ADOBE FLASH CS4 27

Objetivos

Manejo de Vectores - Herramienta Lápiz. - Herramienta Pluma. - Dibujo de Curvas y Trazos. - Edición de Curvas. - Dibujo de Objetos.

Textos - Tipos: Estáticos, Dinámicos y de Entrada.

Símbolos

Movimiento - Interpolación de Movimiento. - Interpolación Clásica. - Interpolación de Formas. - Usando la Herramienta Huesos

MANEJO DE VECTORES

a. La Herramienta Lápiz

La herramienta Lápiz es exclusiva de Flash. Usted puede utilizarla para dibujar líneas, formas o practicar el dibujo libre de formas. Para utilizar la herramienta Lápiz.

- En la caja de herramientas, haga dicen la herramienta Lápiz. La sección 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 Lápiz.

ADOBE FLASH CS4 28

- Arrastre el puntero sobre el escenario y dibuje una figura similar a la siguiente

ilustración. - La opción Enderezar es la que más cambios realiza en la línea que estemos dibujando.

Endereza los trazos o los ajusta a una elipse o círculo, según sea el caso.

- La opción Suavizar se encarga de suavizar el perfil de la línea que estamos creando, rectificando la figura en menor proporción que la opción Enderezar.

- La opción Tinta es la que hace pocos cambios a la línea, aunque de todas maneras suaviza algunas de las curvas.

b. La Herramienta Pluma

- Utilice esta herramienta para dibujar líneas 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 línea 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.

Al soltar el botón del mouse Flash endereza las líneas.

ADOBE FLASH CS4 29

En el escenario, haga clic para definir un punto de anclaje.

Haga clic en otro punto para dibujar una línea recta.

- Si desea dibujar más líneas, continúe haciendo clic. Cada vez que hace clic, Flash conecta los puntos de anclaje.

- Los puntos de anclaje unen los segmentos de líneas rectas. De manera predeterminada, los puntos de anclaje seleccionados son sólidos y los puntos de anclaje sin seleccionar son huecos.

- Si desea cerrar el trazado, sitúe el puntero sobre el primer punto de anclaje y haga clic. Flash rellenará el trazado.

- Para anular la selección de un trazado, mantenga pulsada la tecla Ctrl y haga clic fuera del trazado. También puede hacer clic en la herramienta Pluma o en otra herramienta de la caja de herramientas.

c. Dibujando curvas y trazos

- Para dibujar curvas con la herramienta Pluma, siga estos pasos:

Seleccione la herramienta Pluma y haga clic en un punto del escenario

Haga clic en otro punto, a la derecha del primer punto, y arrastre hacia arriba para dibujar una curva.

Agregue otro punto y arrastre hacia abajo para dibujar una curva.

- Al arrastrar, se generan puntos de curva. Los puntos de curva tienen líneas

tangentes que se extienden de ellos. Puede utilizar estos puntos de curva para editar la curva. Para cerrar e! trazado, sitúe el puntero sobre el primer punto de anclaje (un icono circular aparece al lado del puntero) y haga clic.

ADOBE FLASH CS4 30

- Con la herramienta Pluma, usted puede agregar puntos de anclaje a un trazado que le ayudarán a editarlo. Se puede también eliminar puntos de anclaje para que el trazado sea más suave.

- Para agregar puntos de anclaje:

Con la herramienta Pluma seleccionada, haga clic sobre un trazado existente para visualizar sus puntos de anclaje.

Sitúe el puntero sobre aquel punto de trazado donde desea agregar un punto de anclaje y haga clic.

- También puede editar trazados convirtiendo una línea recta en una curva y viceversa.

- Con la herramienta Pluma seleccionada, haga clic sobre un trazado existente para visualizar sus puntos de anclaje.

- Haga clic en el punto de curva para convertirlo en un punto angular.

d. Edición 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.

Nuevo punto de anclaje

Haga clic sobre un nodo.

Observe el cambio de curva a línea.

ADOBE FLASH CS4 31

- Haga clic en un conector. Aparecen las líneas tangentes.

- Si desea cambiar la posición del trazado o de la curva, arrastre un punto de anclaje.

- Si desea cambiar la forma de la curva, arrastre el selector de tangente.

- Si desea ajustar sólo 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 subopción de cualquiera de las herramientas de dibujo (Pincel, Lápiz, Pluma, Óvalo y Rectángulo) bajo Opciones. Los usuarios que conozcan FreeHand o Adobe Illustrator agradecerán esta incorporación 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

ADOBE FLASH CS4 32

provoque una de ellas corte la otra. Esto se conoce como modo de dibujo de fusión. Este modo puede resultar útil para cortar formas y crear otras nuevas.

- Al dibujar una forma en el modo Dibujo de objeto, ésta se convierte automáticamente 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 posición de los objetos o simplemente necesite mantenerlos como objetos independientes.

TEXTOS A diferencia de HTML y otros lenguajes donde las tipografías que se utilizan en el diseño web dependen directamente de las tipografías que estén instaladas en la PC del usuario, en Flash puedes utilizar cualquier fuente y esta es quizás una de las principales ventajas para los diseñadores. 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 tamaño con la seguridad que se van a ver con una calidad excelente. También 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 límites de esta caja (ejemplo 2). Las dimensiones de la caja se pueden editar, siempre utilizando la herramienta de texto.

Modo de Dibujo de Fusión

Modo de Dibujo de Objeto

ADOBE FLASH CS4 33

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 tamaño de la tipografía. Cada vez que trabajes con la herramienta de texto, en el panel de propiedades aparecerán una serie de opciones, entre las más comunes están las de editar el formato del párrafo, estilos, tipografía, tamaño y color. Todas similares a las de un editor de texto común.

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 CS4 34

a. Texto Estático Es el texto que no requiere interactividad con el usuario. Puede ser el texto de un artículo, la presentación de una compañía, un título en una página web… En fin, es texto que se mira y no se toca.

En el gráfico podemos ver un sitio de ejemplo. Aquí se utilizó para la mayoría del texto el formato de Texto Estático (Static Text). Cuando tengo Texto Estático, el Panel de Propiedades me muestra dos opciones extras:

1. Hacerlo seleccionable. 2. Linkearlo a una URL.

El Texto Estático 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 más común es un formulario de contacto, pero existen otras situaciones en las que podría ser interesante este tipo de interacción 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 más grande que el texto que contiene. Aquí hay dos formas de crear una caja de texto: igual que en el texto estático o arrastrando con el cursor para crear una caja. De esta manera, puedes definir los límites del campo de escritura.

ADOBE FLASH CS4 35

Pero cuando trabajas con Texto de Entrada (Input Text) aparecen nuevas opciones. Una de las opciones es especificar la cantidad máxima de caracteres que se puede escribir en nuestro campo de texto (en este caso 500). También puedes definir un nombre de variable (Var) para trabajar luego con ActionScript (esto lo veremos próximamente en nuestra clase de formularios de contacto). La opción 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 símbolo <> podrás renderizar el texto como HTML. Pero lo más interesante está en el menú A. Aquí puedes elegir el formato de tu Texto de Entrada. Tienes 4 opciones: línea simple, multilínea, multilínea sin envoltura y contraseña. Los formatos no especifican la cantidad máxima de caracteres a escribir asi que debes aclararlo en el campo de Caracteres máximos.

- El texto multilínea es un campo de texto donde la caja actúa como límite hacia los costados. Si el texto supera el ancho de la caja, continuarás escribiendo en una línea siguiente.

- El campo en línea simple permite escribir texto en una única línea. Es muy útil en un formulario con varias opciones cortas como por ejemplo nombre, dirección, teléfono.

- Texto multilínea sin envoltura. Esta caja de texto no tiene límites. A medida que vas

escribiendo continúas en la misma línea hasta que das enter para pasar a la línea inferior.

- El formato password permite escribir contraseñas y mostrarlas como asterísticos.

ADOBE FLASH CS4 36

c. Texto Dinámico El Texto Dinámico (Dynamic Text) permite generar acciones interesantes con ActionScript. Además, se pueden enlazar a una URL, cosa que el Texto de Entrada no permite. Por otra parte, acepta los formatos de línea simple, multilínea y multilínea sin envoltura, tal como en el ejemplo anterior. En el Texto Dinámico también se utiliza para incorporar información externa dentro de nuestro archivo SWF.

SIMBOLOS Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash CS4. Estos objetos al ser transformados en símbolos, 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 película. Para crear un nuevo símbolo nos dirigimos al Menú Insertar > Nuevo símbolo, o pulsando CTRL+F8.

- Por ejemplo, establecemos el nombre del símbolo en MiAuto, y de tipo Clip de Película, luego usamos las herramientas de dibujo y trazamos un auto.

- Si deseamos retornar al diseño del Escenario, hacemos un clic en Escena 1 (1).

1

ADOBE FLASH CS4 37

- Si deseamos retornar al diseño del Escenario, hacemos un clic en Escena 1 (1).

- El símbolo queda almacenado en la Ventana Biblioteca (Menú Ventana >

Biblioteca, o pulsando CTRL+L ).

- Luego, si desea ser utilizado en una animación, se arrastra al Escenario.

También puede importar imágenes (Menú Archivo > Importar > Importar a Biblioteca)

ADOBE FLASH CS4 38

MOVIMIENTO En esta versión de Flash CS4 ha habido un cambio importante en las animaciones, lo que hasta ahora se llamaba interpolación de movimiento, pasa a llamarse interpolación clásica y la interpolación de movimiento actual es totalmente nueva, más potente y versátil

a. Interpolación de Movimiento

Una interpolación de movimiento es el desplazamiento de un símbolo de uno a otro punto del escenario. El hecho de que sólo se necesiten dos fotogramas es debido a que Flash, únicamente con la posición inicial y final, "intuye" una trayectoria en línea recta y la representa (veremos que también se pueden realizar movimientos no rectilíneos). Crearla es tan simple como hacer clic derecho sobre el fotograma que contiene los elementos y elegir Crear interpolación de movimiento. Por defecto, se añadirán unos cuantos fotogramas, rellenos de un color azulado. Ahora vamos al fotograma final, o creamos uno clave donde nos plazca. Y desplazamos el símbolo. Veremos que aparece una línea punteada, por defecto recta, que representa el trazado de la animación. Cuando realicemos la interpolación correctamente observaremos un aspecto como este en la línea de tiempo.

Esto indica que la animación cambiará la posición del símbolo del fotograma 1 hasta la posición del mismo símbolo en el fotograma 24, utilizando precisamente 24 fotogramas. El número de fotogramas que se usen en la interpolación indicará las subetapas de que constará la animación. Cuantas más subetapas más sensación de "continuidad" (menos saltos bruscos) pero a la vez menos velocidad en el movimiento. La velocidad en el movimiento de las películas la podemos cambiar también modificando

su parámetro en la línea de tiempo, pero esto no cambiará lo que hemos comentado anteriormente respecto al número 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 línea de tiempo. A mayor valor más velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animación como queremos. El trazado recto generado por defecto podemos modificarlo directamente haciendo clic y arrastrándolo, una vez seleccionada previamente la herramienta Selección.

ADOBE FLASH CS4 39

En cualquier fotograma de la interpolación podemos cambiar la posición del símbolo (o cualquier otra propiedad), creando ahí un fotograma clave de propiedad, que se representa por un pequeño rombo en la línea de tiempo. La interpolación de movimiento permite modificar muchos parámetros del movimiento mediante el Editor de movimiento

Podemos ver, a la izquierda una columna con las propiedades que podemos modificar, divididas en Movimiento básico, Transformación, 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 línea de tiempo. En la siguiente columna podemos establecer si el valor se aplica con aceleración o no. En la columna Fotogramas, podemos recorrer o eliminar los distintos fotogramas clave. También los controles - y + que nos permiten añadir efectos. Y a la derecha del todo encontramos la gráfica. Podemos ver que cada propiedad tiene una gráfica específica, que indica los fotogramas en horizontal y los valores de la propiedad en vertical. Si hacemos clic sobre una propiedad, veremos que su gráfica se

ADOBE FLASH CS4 40

expande para editarla con facilidad. En la gráfica encontramos los fotogramas clave marcados como un cuadrado negro, o verde cuando está seleccionado. Estirando de ellos, o de la línea de la gráfica podemos alterar los valores. En la gráfica, vemos que los puntos suelen formar un vértice. Una opción muy interesante es poder transformarlos en puntos suavizados (desde el menú contextual del fotograma), creando una curva Bezier, lo que formará transiciones más 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 símbolo

de nombre MiAvion, de tipo Clip de Película, y lo insertaremos en el escenario.

- Luego, ya sea en el fotograma 1 de la línea de tiempo, o en el avión dentro del

escenario, usando un clic derecho, elegir CREAR INTERPOLACION DE MOVIMIENTO.

- Luego, activar la pestaña EDITOR DE MOVIMIENTO (si no es visible, se puede mostrar desde el Menú Ventana > Editor de Movimiento).

ADOBE FLASH CS4 41

- 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 ubicación.

- Active la Herramienta Selección, y modifique la apariencia de la trayectoria.

ADOBE FLASH CS4 42

- Observe como la trayectoria ha variado en el editor de movimiento.

- En el fotograma 1, cambiar el ángulo de rotación 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 tamaño.

b. Interpolación de Movimiento Clásica.

Con Flash puede crear una animación 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 versión CS4 se diferencia las interpolaciones clásicas de las de movimiento, las primeras se distinguen por su complejidad y por los tipos de efectos animados que solo ellas pueden crear. Veamos cómo crear una animación clásica:

ADOBE FLASH CS4 43

- El auto dibujado anteriormente, se halla en la capa PASEOS, y en una posición 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 CS4 44

- Hacer un clic entre el fotograma 1 y 20, y en el Menú Insertar > Interpolación Clásica, o también, mediante un clic derecho.

- Pulsar CTRL+ENTER para ver la animación.

c. Interpolación de Formas.

En la interpolación de forma, se dibuja una forma vectorial en un fotograma concreto de la línea de tiempo y se modifica o se dibuja otra forma en otro fotograma específico. Posteriormente, Flash interpola las formas intermedias de los fotogramas intermedios y crea la animación 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 específicos de la forma final. También puede interpolar la posición y el color de las formas de una interpolación de forma. Para aplicar la interpolación de forma a grupos, instancias o imágenes de mapas de bits, separe estos elementos. Para aplicar la interpolación 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 CS4 45

- En el fotograma 15, insertar un fotograma clave vacio pulsando F7 y dibujar un rectángulo.

- 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 CS4 46

- 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 más para separar en FORMAS INDIVIDUALES. (Puede ayudarse de líneas guías para mejorar el resultado).

- En el fotograma 25, insertar un fotograma clave vacio, y digitar otro texto diferente. Separar en formas individuales.

- Crear una interpolación de forma.

ADOBE FLASH CS4 47

d. Usando la Herramienta Huesos. Una de las herramientas más novedosas de Flash CS4 es, sin duda, la herramienta de huesos o “bones” que permite animar personajes de una forma mucho más sencilla a como se venía haciendo hasta ahora. Este tipo de prestación no es nuevo en el entorno del software de animación 2D, aplicaciones como Anime Studio o Toon Boom estudio ya la tenían, pero el hecho de poder contar con ella directamente en Flash y sin necesidad de tener que cambiar de aplicación cuando estás desarrollando un proyecto ya justifica, casi por si solo, la actualización del programa. Existen dos métodos 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 método consiste en crear un símbolo de clip de película por cada hueso que se quiera insertar en la película. De esta manera al dibujar el personaje hemos de distribuir las partes del cuerpo en diferentes “piezas” y convertirlas en clip de película. Una buena idea es crear el dibujo en Illustrator. En el siguiente ejemplo podéis ver un personaje creado en Illustrator y a la derecha el despiece de las diferentes partes.

ADOBE FLASH CS4 48

En Illustrator podemos dibujar las diferentes piezas y convertirlas en clip de película, para ello seleccionamos cada una de las piezas (si la pieza está compuesta por más de un trazado es aconsejable que los agrupemos previamente) y la arrastramos hasta la paleta de símbolos. Al realizar esta operación aparecerá un cuadro de diálogo. En este cuadro le diremos a Illustrator que convierta el símbolo en un clip de película.

Paleta de símbolos con las piezas convertidas a clip de película.

Luego ya podemos guardar los cambios del documento en Illustrator e importarlo directamente en Flash (no es necesario exportar en ningún formato alternativo). Al importar el documento en Flash aparecerá un cuadro de diálogo como el siguiente donde podremos observar como efectivamente las piezas son reconocidas como clips de película.

ADOBE FLASH CS4 49

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 símbolo que será el hueso principal (en este caso la pelvis) y se arrastra el ratón hasta el siguiente hueso. Se repite la operación hasta cubrir toda la cadena de jerarquía, en este caso pelvis, tronco y cabeza.

ADOBE FLASH CS4 50

Se hace clic de nuevo en el hueso de la pelvis y se arrastra el ratón hacia el muslo para crear una nueva cadena de jerarquía. 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 CS4 51

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 animación solo tendrá un movimiento auxiliar. En la línea de tiempo se observa cómo 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 línea de tiempo. Podemos añadir más fotogramas a las capas de los esqueletos. Después podemos avanzar el cabezal de reproducción a un nuevo fotograma y al realizar un movimiento con los huesos se creará automáticamente un fotograma clave.

Si nos desplazamos en la línea de tiempo y seguimos cambiado las poses se crearán nuevos fotograma clave y Flash calculará inmediatamente la animación entre un fotograma clave y otro. También es posible copiar poses de una zona de la línea de tiempo a otra haciendo clic con el botón derecho en un fotograma clave y escogiendo la opción “copiar pose” del menú contextual.

ADOBE FLASH CS4 52

Luego basta desplazarse hasta otro punto de la línea de tiempo escoger la opción “pegar pose” del mismo menú contextual para tener esa misma pose en otro punto de la animación. Para evitar que las piezas roten o se muevan más allá de las posiciones que le serían propias, es posible restringir el movimiento y la rotación de un hueso haciendo clic en él y activando la restricción de rotación a los grados introducidos en el panel de propiedades.

El otro método consiste en aplicar el esqueleto directamente a un gráfico dibujado en Flash, sin convertir a símbolo.

ADOBE FLASH CS4 53

En este caso he dibujado un hombrecillo de pastel de jengibre. Es importante que el gráfico esté creado directamente con las herramientas de dibujo, sin agrupar y sin convertir en símbolo, ya que de lo contario este método no funcionaría.

También 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 gráfica. Por la parte interior de la figura se pueden introducir más colores siempre y cuando no lleguen al borde de la silueta. A continuación se selecciona la herramienta de huesos, se hace clic sobre la figura y se empieza a arrastrar para crear el esqueleto. Una vez más debe seguir la estructura lógica 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 línea de tiempo, al hacerlo el gráfico se deformará para adaptarse a la forma del esqueleto.

ADOBE FLASH CS4 54

Cuando se trata de un esqueleto vinculado a un gráfico es posible utilizar la herramienta de vinculación que permite editar que puntos del gráfico son afectados o no por el esqueleto para controlar al máximo la deformación de la figura.

Por supuesto se pueden crear clips de películas con esqueletos en su interior para crear mayor número de efectos.

ADOBE FLASH CS4 55

Objetivos

Máscaras

Botones. - Uso de la Biblioteca Común. - Creación de botones. - Insertando audio y clips de película sobre botones.

Acciones.

MASCARAS Basta con decir que estas capas se colocan "encima" de las capas a las que enmascaran y sólo dejan que se vea la parte de éstas que tapan los objetos situados en las capas máscara (son como filtros). Al igual que las capas guía, los objetos existentes en este tipo de capas tampoco se ven en la película final. Sí se verán los objetos de su correspondiente capa enmascarada a los que estén "tapando".

1. En una nueva película de fondo color negro, importar al escenario la imagen HORROR.

2. Insertar una nueva capa, en ella trazar un círculo sobre el escenario.

3. Crear una interpolación de movimiento entre el fotograma 1 y el fotograma 20.

ADOBE FLASH CS4 56

4. De un clic derecho sobre la capa del circulo, y elija MASCARA.

5. Crear la interpolación de movimiento entre estos fotogramas, y probar la película.

BOTONES

a. Uso de la Biblioteca común. En Flash CS3 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y aquellas asociadas a las películas que hemos creado. Todas ellas las tenemos a nuestra disposición para utilizar los símbolos que contienen. Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que ir al Menú Ventana > Bibliotecas Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo tipo de símbolos: Botones, Clases o Sonidos.

b. Creación de Botones. Los botones son clips de película interactivos de cuatro fotogramas. Cuando se selecciona el comportamiento Botón para un símbolo, Flash crea una Línea de tiempo con cuatro fotogramas. Los tres primeros muestran los estados Reposo, Sobre y Presionado del botón; el cuarto define la zona activa del mismo. La Línea de tiempo no se reproduce realmente; simplemente reacciona a los movimientos y acciones del puntero saltando al fotograma correspondiente.

Fotograma 20 Fotograma 40

ADOBE FLASH CS4 57

Veamos la función de cada fotograma de un símbolo de botón:

El estado Reposo, representa el aspecto del botón siempre que el puntero no esté sobre él.

El estado Sobre, representa el aspecto que asume el botón cuando el usuario pase el puntero por encima de él.

El estado Presionado, representa el aspecto que asume el botón 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 gráfico del área de trabajo. Para crear un botón, debe empezar por un símbolo.

- En una nueva animación inserte un nuevo símbolo de tipo botón y de nombre

INGRESAR.

- Note que en la línea de tiempo se halla seleccionada el fotograma REPOSO.

- Realice el diseño de lo que será su botón (de ser necesario inserte más capas).

- En la Línea 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.

ADOBE FLASH CS4 58

- Modifique el diseño del botón

- En la Línea de tiempo, haga clic en el fotograma PRESIONADO y luego inserte un fotograma clave. El fotograma clave insertado es una copia del contenido del fotograma Sobre.

- Modifique el diseño del botón

- Pruebe la película.

- La ZONA ACTIVA es el área del botón que responde cuando se hace clic. La imagen del fotograma Zona activa debe ser lo suficientemente grande para abarcar todos los elementos gráficos 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 botón para entrar al modo edición de símbolos.

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

ADOBE FLASH CS4 59

- Puede comprobar la zona activa al probar la película.

Si desea Incluir un Clip en un botón puede dotar a éstos de más vistosidad. Es habitual colocar un clip en el fotograma Sobre para indicar algún tipo de información extra o una animación para ir más allá de un cambio de color.

También es común ver un clip de película actuando como un botón. Esto caso se puede hacer por ejemplo poniendo el clip en el fotograma Reposo.

- Crear un nuevo símbolo de tipo Clip de Película, de nombre PULSACION.

- Crear una animación como la que sigue:

ADOBE FLASH CS4 60

- Luego edite el botón anterior: Si desea Incluir Sonido en un botón simplemente debemos editar nuestro botón y seleccionar el fotograma Presionado. Ahora debemos insertar el sonido. Por ejemplo podríamos 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 botón anterior, insertar una nueva capa. Luego incluir un fotograma clave vacio en el estado SOBRE. Insertar aquí el sonido desde la Biblioteca.

Insertar el clip pulsación en una nueva capa

Eliminar el fotograma clave

ADOBE FLASH CS4 61

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 más comunes. Al crear un archivo, habrás visto que podemos elegir distintas versiones de ActionScript (AS 3.0, AS 2.0...). Esto se refiere al lenguaje de programación que podemos emplear en Flash y que lo convierte en una herramienta realmente potente. En las versiones 1 y 2, se podían agregar comportamientos directamente en las propiedades de los botones. Pero al utilizar la versión 3.0, por ser la más actual y potente, nos obliga a escribir el código ActionScript. Comenzamos por crear o añadir nuestro botón, y asignarle un nombre de instancia. El nombre que le demos es muy importante, porque nos permitirá acceder a él desde el código. Aunque podemos escribir el código en la misma capa, recomendamos crear una capa exclusivamente para el código, por tenerlo todo mejor organizado. Ahora, abrimos el Panel de Acciones (Ir al Menú Ventana > Acciones). Se mostrará un área en blanco en la que podemos escribir:

Sin entrar en detalle de qué es cada palabra, pues esto ya lo veremos, este es el código que debemos de escribir para asociar acciones a un botón: miBoton.addEventListener('click', accionesMiBoton); function accionesMiBoton(event):void{ //Acciones } Donde miBoton es el nombre de la instancia del botón.

- Abrir una página web: con esto conseguiremos abrir una página cualquiera de internet

(o una película Flash), lo que nos servirá para irnos desplazando por webs que contengan más de una página, o permitir al usuario descargarse archivos entre otras cosas. La instrucción en ActionScript que nos permite hacerlo es navigateToURL(new URLRequest("http://www.mipagina.com"), "_blank");. "http://www.mipagina.com" se refiere a la página que queremos abrir, y "_blank" indica que se abrirá en una página nueva.

ADOBE FLASH CS4 62

Por lo tanto, si tenemos un botón cuyo nombre de instancia es btnVisitar que queremos que abra la web http://www.sise.edu.pe, escribiríamos: btnVisitar.addEventListener('click', visitarSise); function visitarSise(event):void{ navigateToURL(new URLRequest("http://www.sise.edu.pe"), "_blank"); }

- Controlar una película en curso. Si estamos reproduciendo una película 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 botón btnPausar para parar la película y el botón btnContinuar para reproducirla: btnPausar.addEventListener('click', pausar); function pausar(event):void{ stop(); } btnContinuar.addEventListener('click', continuar); function continuar(event):void{ play(); } Tal cual lo hemos puesto, afectaría a la película principal. Si lo que queremos parar o reproducir es un clip determinado, habría que escribirlo delante de la acción, separado por un punto. Por ejemplo miClip.stop();

ADOBE FLASH CS4 63

Objetivos

Generar y Publicar Películas. - Consideraciones acerca del tamaño. - Usar precargadores. - Distribución del archivo SWF para la web.

GENERAR Y PUBLICAR PELICULAS.

a. Consideraciones acerca del tamaño. Antes de aventurarnos a publicar nuestra película para que otros la vean, sobre todo si la vamos a publicar en una página web, donde el tamaño de descarga es de vital importancia, debemos tener en cuenta los siguientes aspectos: CONSIDERACIONES EN EL DIBUJO Aunque los degradados queden muy vistosos, también requieren más memoria, por lo que debemos evitar su uso excesivo, en la medida de lo posible. La herramienta Pincel gasta más memoria que el resto de herramientas de dibujo, por lo que deberíamos elegir estas últimas en la medida de lo posible. Hemos visto que la animación de líneas es bastante útil. Sin embargo el uso de líneas que no sean las definidas por defecto, hará que el tamaño de la descarga aumente. Por tanto evitemos las líneas discontinuas, de puntos, etc. Dibujar las curvas con el menor número de nodos posible. CONSIDERACIONES EN LA ORGANIZACIÓN: Agrupar los objetos que estén relacionados, con el Menú Modificar > Agrupar. Si hemos creado un objeto que va a aparecer varias veces, deberíamos convertirlo a símbolo, ya que como hemos visto, Flash lo colocará en la biblioteca y cada vez que quiera mostrarlo, hará referencia a una única posición de memoria. Ya hemos comentado el mayor tamaño de los mapas de bits, lo que hace que debamos minimizar el número de apariciones de éstos en nuestra película.

ADOBE FLASH CS4 64

CONSIDERACIONES EN LOS TEXTOS: Hemos podido observar, cuando manejábamos textos, que cuando abrimos el menú de tipos de letras, las tres primeras son siempre "_sans", "_serif" y "_typewriter". Esto no es una casualidad. Están colocadas ahí para resaltar que estas fuentes ocupan un mínimo de memoria, por lo que se recomienda su uso. CONSIDERACIONES EN LA ANIMACIÓN: Utilizar lo más que podamos las interpolaciones de movimiento y las guías para reducir el número de fotogramas clave y el tamaño de la película. Evitar el uso de la interpolación por forma para animaciones de cambio de color, cuando sea posible. Independientemente de la optimización que hagamos, a veces no se puede evitar que el tamaño de la película aumente. Es recomendable entonces hacer un preloader (precarga) cuando la película que queramos publicar sea de tamaño superior a unos 80KB.

b. Uso de Precargadores. Un preloader se usa principalmente para evitar la carga parcial de la película, mientras ésta se está reproduciendo, lo que, en ocasiones en las que la película es de un tamaño considerable, hace que la película se vea entrecortada. Normalmente, los preloaders se hacen vistosos para que el observador no se aburra y deje de lado la opción de visitar nuestra web. Suelen llevar alguna animación sencilla que se va reproduciendo mientras se está cargando simultáneamente la película principal, mucho más grande. Se pueden complicar mucho más, pero nosotros haremos uno sencillo que nos sirva para entender bien el concepto, y la manera de hacerlo. Partimos de que ya tenemos nuestra película terminada. Si queremos saber su tamaño podemos ir al Menú Archivo > Configuración de publicación seleccionar la pestaña Flash, y marcar la casilla Generar Informe de Tamaño. Si pulsamos el botón Publicar, aparecerá en nuestro directorio un archivo de texto donde se explica con detalle el tamaño de nuestra película.

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 película se llama "Película" (lógicamente). Deberá quedar algo similar a lo que muestra la imagen. En la escena recién creada insertaremos otra capa, de manera que nos queden dos capas a las que llamaremos, "Acción" y "Cargando".

ADOBE FLASH CS4 65

En la capa "Cargando" crearemos una animación sencilla. Por ejemplo, hagámosle honor al título y escribamos "Cargando ..."; puedes aplicarle la animación que prefieras, siempre que no sea muy compleja. En nuestro ejemplo, esta capa tiene por lo menos dos fotogramas. En la capa "Acción" diseñaremos el "corazón" del preloader. Vamos a hacer que la animación de nuestra escena de carga se ejecute repetidas veces, hasta que se haya cargado la escena que contiene la película principal, mediante las acciones ActionScript 3 de Flash. Para ello abrimos el panel de Acciones. Vamos a emplear la función 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 cuántos fotogramas se han cargado hasta ahora con la propiedad this.framesLoaded, y cuantos fotogramas hay en total con this. totalFrames. Conociendo estos datos, lo único que tenemos que hacer es preguntar si los fotogramas cargados igualan a los totales . Si es que sí, ya podemos avanzar hasta la siguiente escena. Y si no, podemos volver al principio de nuestro loader, lo que lo irá repitiendo en bucle. Para expresar esto en ActionScript, lo haríamos así: if(this.framesLoaded==this.totalFrames) { gotoAndPlay(1, "Película") } else { gotoAndPlay(1, "Cargador") } Por lo tanto, lo que hará esta instrucción 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 instrucción. Cuando la carga esté completa, iniciamos la Película. Y esto es todo lo que hay que hacer para crear un preloader (aunque por supuesto se puede hacer más sofisticado), con lo que los visitantes ya no huirán de nuestra web. En los primeros temas de JavaScript veremos cómo mostrar en el preloader el estado de la carga.

c. Distribución del archivo SWF para la web. Esta es una parte importante, ya que normalmente las películas de Flash están orientadas a la publicación vía Web. Para publicar una película Flash en Internet de manera que forme parte de una página web deberemos insertarla en un archivo típico de páginas web cuyo lenguaje de programación sea del estilo del HTML. Para ello debemos atender a las opciones de publicación HTML que nos ofrece Flash, y que nos ayudarán a que nuestra película se visualice como realmente queremos. Las opciones de este tipo de publicación están en el Menú Archivo > Configuración de Publicación... (Pestaña HTML).

ADOBE FLASH CS4 66

ADOBE FLASH CS4 67

Objetivos

Introducción a ActionScript 3.0 - Características Generales - El Panel de Acciones

Introducción a la Programación en AS 3.0 - Variables - Tipos de Datos - Operadores Aritméticos y de Comparación.

Conversión de Tipos de Datos

INTRODUCCIÓN A ACTION SCRIPT 3.0 El ActionScript es el lenguaje de programación que ha utilizado Flash desde sus comienzos, y que por supuesto, emplea Flash CS4. A grandes rasgos, podemos decir que el ActionScript nos permitirá realizar con Flash CS4 todo lo que nos propongamos, ya que nos da el control absoluto de todo lo que rodea a una película Flash. Absolutamente de todo.

a. Caracteristicas generales

Como ya hemos comentado, el ActionScript es el lenguaje de programación propio de Flash, tal y como el Lingo lo es de Macromedia Director, por ejemplo. El ActionScript está basado en la especificación 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 aplicación de fragmentos de código ActionScript a los objetos existentes en nuestras películas nos permiten alcanzar nuestros objetivos.

El ActionScript es un lenguaje de programación 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 versión se acerca más a un lenguaje de este tipo. Así, la versión 3.0 estrenada en Flash CS3 es mucho más potente y mucho más "orientada a objetos" que las versiones anteriores.

ADOBE FLASH CS4 68

El ActionScript presenta muchísimos parecidos con el Javascript; si conoce Javascript, la sintaxis y el estilo de ActionScript le resultarán muy familiares.

En la mayor parte de las ocasiones, no será necesario "programar" realmente, Flash CS4 pone a nuestra disposición una impresionante colección de "funciones" (de momento entenderemos "funciones" como "código ActionScript que realiza una función 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 después en nuestra película. Debemos tener claro desde un principio que el Panel Acciones puede hacer referencia a Fotogramas u objetos, de modo que el código ActionScript introducido afectará tan sólo 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 rápido y muy cómodo a todas las acciones, objetos, propiedades etc. que Flash tiene predefinidos. Estos elementos están divididos en carpetas, que contienen a su vez más carpetas clasificando de un modo eficaz todo lo que Flash pone a nuestra disposición. Para insertarlos en nuestro script bastará con un doble clic sobre el elemento elegido.

ADOBE FLASH CS4 69

A la parte derecha tenemos el espacio para colocar nuestro script, aquí aparecerá lo que vayamos insertando. También incluye herramientas de utilidad, como la búsqueda de palabras, la posibilidad de insertar puntos de corte, la herramienta Revisar Sintaxis y la ayuda de Flash para ActionScript.

INTRODUCCIÓN A LA PROGRAMACIÓN EN AS 3.0

a. Variables Se define como un espacio en memoria en donde se puede almacenar un tipo de dato específico. 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 numérica, y que almacene el valor de 100, de la siguiente manera:

var n:Number;

n=100;

trace(n);

O también:

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 capítulo de un libro.

ADOBE FLASH CS4 70

Numeric: ActionScript 3.0 incluye tres tipos de datos específicos para datos numéricos:

Number: cualquier valor numérico, incluidos los valores fraccionarios o no fraccionarios

int: un entero (un número 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 Aritméticos y de Comparación

OPERADORES ARITMETICOS

SIGNO DETALLE

+ Suma

- Resta

* Multiplicación

/ División

% Módulo o Resto

OPERADORES DE COMPARACION

SIGNO DETALLE

> Es mayor que

< Es menor que

>= Es mayor o igual que

<= Es menor o igual que

== Es igual que

!= Es diferente que

OPERADORES DE ASIGNACION

SIGNO DETALLE

X++ Incremento de 1 en 1

X-- Decremento de 1 en 1

X=Valor A “X” se le asigna el “Valor”

ADOBE FLASH CS4 71

Ejemplo: En la Línea 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 línea:

var nombreVariable:tipoVariable = valorVariable;

Ejercicio.

1. Crear una película 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 estático, de entrada (instancias: txtEP, txtEF) y dinámico (txtProm), un botón de la biblioteca común (btnCalcular).

ADOBE FLASH CS4 72

3. En el primer fotograma de la capa Acciones, escribiremos el siguiente código que permita realizar las siguientes tareas:

o El enfoque se hallará sobre el campo de texto txtEP.

o Al obtener el enfoque, quedará seleccionado todos los caracteres de este

campo.

o Se crea una función calcular, que permita convertir los valores ingresados a datos de tipo uint, para promediarlos y mostrarlos en el campo Promedio.

CONVERSIÓN DE TIPOS DE DATOS.

Se dice que se produce una conversión de tipo cuando se transforma un valor en otro valor con un tipo de datos distinto. Las conversiones de tipo pueden ser implícitas o explícitas. La conversión implícita, también denominada coerción, en ocasiones es realizada en tiempo de ejecución 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 convertirán este valor en el valor booleano true antes de asignar el valor a la variable. Ejemplo. txtProm.text = ”El promedio es “+p;

La variable numérica p es convertida a cadena para ser

concatenada con el texto.

La conversión explícita, también denominada conversión, se produce cuando el código 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 conversión 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 paréntesis y anteponerle el nombre del nuevo tipo.

Ejemplo. ep = uint(txtEP.text);

Usamos la expresión que permita a convertir a uint el valor

guardado en el campo de texto txtEP.

ADOBE FLASH CS4 73

Objetivos

Estructuras de Control Condicionales. - Estructuras de Decisión. - Estructuras de Selección Múltiple.

Estructuras Repetitivas. - Do While - For

ESTRUCTURAS DE CONTROL CONDICIONALES Así como en los lenguajes de programación, muchos de los procedimientos dependen de expresiones lógicas, de la selección de un determinado valor o de la repetición 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 Decisión

La sentencia condicional if..else permite comprobar una condición y ejecutar un bloque de código si dicha condición existe, o ejecutar un bloque de código alternativo si la condición 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%.

ADOBE FLASH CS4 74

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 condición del alumno, de acuerdo al cálculo del promedio.

Para crear este formato de cálculo, usamos dos capas (igual que en el ejemplo del capítulo anterior):

ADOBE FLASH CS4 75

b. Estructuras de Selección Múltiple

La sentencia switch resulta útil si hay varios hilos de ejecución que dependen de la misma expresión de condición. La funcionalidad que proporciona es similar a una serie larga de sentencias if..else if, pero su lectura resulta un tanto más sencilla. En lugar de probar una condición para un valor booleano, la sentencia switch evalúa una expresión y utiliza el resultado para determinar el bloque de código que debe ejecutarse. Los bloques de código 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 botón Evaluar (instancia: btnEvaluar), dos campos de texto dinámicos (txtNombre, txtTipoAnno) en donde se mostrará el nombre del mes correspondiente (Enero, Febrero, etc.), y un mensaje si el AÑO ES BISIESTO o NO.

En la capa GUI, en el primer fotograma hacemos el diseño antes indicado.

ADOBE FLASH CS4 76

En la misma capa, en el fotograma 5 (por ejemplo), hacemos el siguiente diseño:

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 CS4 77

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 específico de código repetidamente utilizando una serie de valores o variables. Adobe recomienda escribir siempre el bloque de código entre llaves ({}). Aunque puede omitir las llaves si el bloque de código sólo contiene una sentencia, no es recomendable que lo haga por la misma razón expuesta para las condicionales: aumenta la posibilidad de que las sentencias añadidas posteriormente se excluyan inadvertidamente del bloque de código. Si posteriormente se añade una sentencia que se desea incluir en el bloque de código, pero no se añaden 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 específico. Debe proporcionar tres expresiones en una sentencia for: una variable que se establece con un valor inicial, una sentencia condicional que determina cuándo termina la reproducción en bucle y una expresión que cambia el valor de la variable con cada bucle. Por ejemplo, el siguiente código realiza cinco bucles. El valor de la variable i comienza en 0 y termina en 4, mientras que la salida son los números 0 a 4, cada uno de ellos en su propia línea.

b. Estructura WHILE

El bucle while es como una sentencia if que se repite con tal de que la condición sea true. Por ejemplo, el código siguiente produce el mismo resultado que el ejemplo del bucle for:

ADOBE FLASH CS4 78

Veamos algunos ejemplos.

- Mostrar la palabra ”INSTITUTO SISE” diez veces.

- Mostrar una lista de los 15 primeros números enteros positivos.

- Mostrar la siguiente serie numérica: 6,10, 14, ….. (20 términos) Usando la estructura FOR:

ADOBE FLASH CS4 79

Usando la estructura WHILE:

- Mostrar la serie: 20, 30, 40, 50, …. (20 términos), y la suma de dichos términos.

ADOBE FLASH CS4 80

Objetivos

Clips de Películas - Manejando sus Propiedades. - Aplicando cambios de posición, rotación, escala y transparencia.

Detección de las teclas pulsadas.

Carga y descarga de elementos desde la Biblioteca.

CLIPS DE PELICULA

Cuando necesitemos crear una película Flash dentro de otra película, pero no queramos tener 2 ficheros separados ni molestarnos en cargar una película u otra, deberemos crear un objeto movieclip. Entre sus propiedades especiales destaca que los objetos "clip de película" tienen, internamente, una línea de tiempos que corre INDEPENDIENTEMENTE de la línea de tiempos de la película principal de Flash, lo que nos permite crear animaciones tan complejas e independientes como queramos (podemos crear tantos clips de película dentro de otros como queramos, por ejemplo).

a. Manejando sus Propiedades

Los Métodos suelen ser específicos de cada objeto, y su estudio requeriría 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 cuáles son las más 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;

ADOBE FLASH CS4 81

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 posición de un MovieClip.

- ROTACION: Usar la propiedad "rotation" para modificar o leer la rotación de un

MovieClip. Los valores a usar están 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 están 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 están en el rango de 0 a 1 (en donde cero es 0% de Opacidad y 1 es 100% de opacidad).

- OTROS:

VISIBLE: valor booleano en donde "false" es oculto y "true" es visible. WIDTH: indica el ancho de un MC. HEIGHT: indica la altura de un MC.

b. Aplicando cambios de posición, rotación, escala y transparencia.

En el siguiente ejemplo crearemos una película con los siguientes elementos:

El personaje de BOB ESPONJA es un clip de película que se halla en la capa PERSONAJE, y que tiene como nombre de instancia bob_mc.

ADOBE FLASH CS4 82

Primero mostraremos cierta información como su posición horizontal, vertical, el ancho y alto de la pantalla. Esto, en la capa Acciones.

Al pre visualizar, muestra el MC en el centro de la pantalla.

Guarda los valores iniciales en variables.

ADOBE FLASH CS4 83

Estas acciones darán funcionalidad a los botones que permitan el cambio de su posición.

Para controlar la rotación y cambio de tamaño:

ADOBE FLASH CS4 84

Controlando el grado de transparencia (ALPHA):

ADOBE FLASH CS4 85

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 función „presionaTecla‟:

stage.addEventListener(KeyboardEvent.KEY_DOWN, presionaTecla);

Y pasamos a definir la función. Lo que hace esta función es comprobar el código de la tecla presionada (37-38-39-40 corresponden a las flechas del teclado) a través de keyCode. Al comprobar cual tecla está presionada. Inicialmente establecemos la posición inicial del móvil ( movil.x=50; ), y al mover con las teclas, establecemos un valor de 20 (esto puede ser más o menos).

movil.x=50; stage.addEventListener(KeyboardEvent.KEY_DOWN,direccion); function direccion(tecla:KeyboardEvent):void{ //Es importante especificar que es un vento del tipo KeyboardEvent //para poder emplear el método .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 símbolo de tipo Clip de Película 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.

ADOBE FLASH CS4 86

- En el fotograma de la capa Acciones, escribimos las siguientes instrucciones:

- Previsualizar la película. Lo que faltaría mejorar es evitar que al mover la escopeta muy a la derecha o a la izquierda, esta desaparezca. Para ello podemos establecer unos límites de movimiento usando las propiedades del stage.

- Previsualizar la película.

ADOBE FLASH CS4 87

CARGA Y DESCARGA DE ELEMENTOS DE LA BIBLIOTECA Otra de las técnicas que nos será muy útil es la carga y descarga de elementos existentes en la biblioteca. Esto lo haremos con la función addChild. Esta función añade un elemento (hijo) a la lista de visualización de un contenedor (padre). Si omitimos el objeto, lo añadimos a la película 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 > Botón Avanzado. Aquí, marcamos la opción Exportar para ActionScript, y le damos el nombre de la clase. Recuerda este nombre, porque es el que utilizaremos para crear los objetos. Para eliminar clips insertados mediante addChild puedes utilizar removeChild() o removeChildAt(). miContenedor.removeChild(miClip); Recuerda que antes de quitar un elemento, es recomendable borrar sus escuchadores de eventos.

- En el siguiente ejemplo, hemos importado un clip de película de nombre mcPato, y colocamos una instancia de este en nuestra película con el nombre de instancia mcPato.

- Para crear una clase y usarlo desde ActionScript, hacemos clic sobre el botón AVANZADO, y luego marcamos las opciones:

ADOBE FLASH CS4 88

- Usaremos addChild para agregar el objeto a la película, controlando la posición horizontal cuando el pato este fuera de la pantalla y retorne.

ADOBE FLASH CS4 89

- Podríamos haber probado este otro código, que permite trabajar con valores aleatorios.

- Luego de hacer una modificación al clip msEscopeta, podríamos controlar al pulsar la tecla INSERT para dar al blanco, y mostrar en un texto dinámico el puntaje.

- Quedaría como ejercicio, modificar el código para que al disparar al pato, usando removeChild se elimine, pero que luego aparezca otro.

ADOBE FLASH CS4 90

ADOBE FLASH CS4 91

Objetivos

Interacción con el Mouse

Colisiones: Interacción entre elementos

Trabajando con Sonido - Carga de archivos de sonido externo - Reproducción de Sonidos

Navegación - Los Botones - Controladores de la Línea de Tiempo

INTERACCION CON EL MOUSE

Veamos ahora cómo interactuar con el ratón y el Escenario y sus elementos. Empezaremos viendo una de las funciones más útiles para el ratón: arrastrar y colocar. Utilizando las funciones StartDrag() y StopDrag() es muy sencillo arrastrar y colocar objetos por el Escenario. La función startDrag permite varios parámetros:

miObjeto.startDrag(bloqueaCentro, rectángulo); 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 parámetro, rectángulo, nos permite definir los límites de la zona donde podemos arrastrar. Esta opción es muy útil cuando queremos que el arrastre sólo 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 también 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(); }

ADOBE FLASH CS4 92

miObjeto.addEventListener('moseUp', soltar); function soltar(event):void { miObjeto.stopDrag(); trace(miObjeto.dropTarget); }

Este código 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 ningún objeto, devolverá NULL. Otra cosa que nos será de gran ayuda es poder localizar la posición del ratón. De este modo podríamos hacer que los objetos se desplacen u orienten hacia el ratón. Para averiguar las coordenadas del ratón sólo tendrás 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 ratón normal por uno de nuestro agrado. Para ello tenemos que escribir muy pocas líneas:

Mouse.hide(); //Ocultamos el cursor verdadero addEventListener(Event.ENTER_FRAME,cambiarCursor); function cambiarCursor(event):void { texto.contador_txt.text="("+mouseX+", "+mouseY+")"; texto.x = mouseX; //Asignamos las coordenadas texto.y = mouseY; //Al elemento de texto miCursor.x = mouseX; //Y al clip que hará de cursor miCursor.y = mouseY; }

Comenzamos ocultando el cursor verdadero, con el método 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 ratón. Podemos volver a visualizar el ratón, por ejemplo, porque cambiamos de fotograma, con el código:

Mouse.show();

INTERACCION ENTRE ELEMENTOS

Una de las cosas que más nos interesará realizar es el choque entre elementos en el Escenario, y ya no el choque físico en sí, sino la coincidencia de dos elementos en un mismo espacio.

Esto lo podremos evaluar y tratar con los métodos 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 específico (muy útil para detectar los clics del ratón o donde se encuentra en cada momento):

ADOBE FLASH CS4 93

miClip.addEventListener(MouseEvent.MOUSE_UP,miFuncion); function miFuncion(event:MouseEvent):void{ if (miClip.hitTestPoint(mouseX,mouseY) { //coincidencia } }

Este código evalúa la posición del ratón a cada clic, si las coordenadas introducidas en el método hitTestPoint coinciden con el área de miClip se produce colisión. hitTestPoint admite un tercer parámetro booleano. Éste indica si la colisión se calcula con respecto al forma del elemento (true) a al rectángulo delimitador del objeto (false). La opción por defecto es esta última. Cuando queremos evaluar si un objeto "choca" con otro, empleamos el método hitTestObject:

miClip.hitTestObject(miOtroClip);

En ambos casos, el valor devuelto es true, si hay colisión, o false si no.

- En el siguiente ejemplo, hemos creado un escenario con una imagen de fondo, y hemos diseñado un clip de película mcAlien a partir de dos imágenes.

- Lo importamos para ActionScript.

ADOBE FLASH CS4 94

- En una capa ACCIONES, escribimos las rutinas que permitan mover los ALIENS.

ADOBE FLASH CS4 95

- Previsualizar y observar el resultado. Ahora puede crear un clip de película mcBlanco, que será incluido en una capa y que permitirá aplicar el BLANCO del disparo.

- Al script anterior, añadir:

- Previsualizar. Ahora lo que vamos a realizar es de que, al hacer clic sobre un ALIENS,

este desaparezca y el puntaje (un texto dinámico de nombre txtpuntos),vaya incrementándose en uno.

ADOBE FLASH CS4 96

TRABAJANDO CON SONIDOS

ActionScript se ha diseñado para crear aplicaciones interactivas y envolventes. Un elemento a menudo olvidado de las aplicaciones envolventes es el sonido. Se pueden añadir 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 aplicación.

a. Carga de archivos de sonido externo

Cada instancia de la clase Sound existe para cargar y activar la reproducción de un recurso de sonido específico. Una aplicación no puede reutilizar un objeto Sound para cargar más de un sonido. Para cargar un nuevo recurso de sonido, debe crear otro objeto Sound. Si se carga un archivo de sonido pequeño, como un sonido de clic que se asociará a un botón, la aplicación puede crear un nuevo objeto Sound y cargar automáticamente el archivo de sonido, tal como se muestra a continuación:

var req:URLRequest = new URLRequest("click.mp3"); var s:Sound = new Sound(req);

El constructor Sound() acepta un objeto URLRequest como primer parámetro. Cuando se proporciona un valor del parámetro URLRequest, el nuevo objeto Sound empieza a cargar automáticamente el recurso de sonido especificado. En todos los casos, excepto en los más sencillos, la aplicación debe prestar atención al progreso de carga del sonido y detectar los posibles errores. Por ejemplo, si el sonido del clic tiene un tamaño bastante grande, es posible que no esté completamente cargado cuando el usuario haga clic en el botón que activa dicho sonido. Si se intenta reproducir un sonido no cargado, puede producirse un error en tiempo de ejecución. Resulta más seguro esperar a que se cargue totalmente el sonido antes de permitir que los usuarios realicen acciones que puedan iniciar la reproducción de sonidos. El código 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 código de ejemplo crea un nuevo objeto Sound sin asignarle un valor inicial para el parámetro URLRequest. A continuación, detecta el evento Event.COMPLETE del objeto Sound, que provoca la ejecución del método onSoundLoaded() cuando se cargan todos los datos de sonido. Después, llama al método Sound.load() con un nuevo valor URLRequest para el archivo de sonido.

ADOBE FLASH CS4 97

El método 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 método play() del objeto Sound inicia la reproducción de sonido.

b. Reproducción de Sonidos Al reproducir sonidos con ActionScript 3.0, se pueden realizar las operaciones siguientes:

• Reproducir un sonido desde una posición de inicio específica • Pausar un sonido y reanudar la reproducción desde la misma posición

posteriormente • Saber exactamente cuándo termina de reproducirse un sonido • Hacer un seguimiento del progreso de la reproducción de un sonido • Cambiar el volumen o el desplazamiento cuando se reproduce un sonido

Para realizar estas operaciones durante la reproducción deben utilizarse las clases SoundChannel, SoundMixer y SoundTransform. La clase SoundChannel controla la reproducción 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 están reproduciendo. Cuando una aplicación llama al método Sound.play(), se crea una nueva instancia de la clase SoundChannel para controlar la reproducción. La aplicación puede reproducir un sonido desde una posición de inicio específica, pasando dicha posición en milisegundos como el parámetro startTime del método Sound.play(). También puede especificar un número fijo de veces que se repetirá el sonido en una sucesión rápida pasando un valor numérico en el parámetro loops del método Sound.play(). Cuando se llama al método Sound.play() con los parámetros startTime y loops, el sonido se reproduce de forma repetida desde el mismo punto de inicio cada vez, tal como se muestra en el código 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 después del inicio del sonido, tres veces seguidas. Si la aplicación reproduce sonidos largos, como canciones o emisiones podcast, es recomendable dejar que los usuarios pausen y reanuden la reproducción de dichos sonidos. Durante la reproducción en ActionScript un sonido no se puede pausar; sólo se puede detener. Sin embargo, un sonido puede reproducirse desde cualquier punto. Se puede registrar la posición del sonido en el momento en que se detuvo y volver a reproducir el sonido desde dicha posición 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 aplicación puede almacenar el valor de posición antes de detener la reproducción del sonido, como se indica a continuación: var pausePosition:int = channel.position; channel.stop();

ADOBE FLASH CS4 98

Para reanudar la reproducción del sonido desde el mismo punto en que se detuvo, hay que pasar el valor de la posición almacenado anteriormente. channel = snd.play(pausePosition); Es posible que la aplicación desee saber cuándo se deja de reproducir un sonido para poder iniciar la reproducción de otro o para limpiar algunos recursos utilizados durante la reproducción anterior. La clase SoundChannel distribuye un evento Event.SOUND_COMPLETE cuando finaliza la reproducción de un sonido. La aplicación puede detectar este evento y adoptar las medidas oportunas como se muestra a continuación: import flash.events.Event; import flash.media.Sound; import flash.net.URLRequest; var snd:Sound = new Sound(); var req:URLRequest = new URLRequest("smallSound.mp3"); snd.load(req); var channel:SoundChannel = snd.play(); channel.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete); public function onPlaybackComplete(event:Event) { trace("The sound has finished playing."); } La clase SoundChannel no distribuye eventos de progreso durante la reproducción. Para informar sobre el progreso de la reproducción, la aplicación puede configurar su propio mecanismo de sincronización y hacer un seguimiento de la posición 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 duración de los datos del sonido que se está reproduciendo: var playbackPercent:uint = 100 * (channel.position / snd.length); Sin embargo, este código sólo indica porcentajes de reproducción precisos si los datos de sonido se han cargado completamente antes del inicio de la reproducción. La propiedad Sound.length muestra el tamaño de los datos de sonido que se cargan actualmente, no el tamaño definitivo de todo el archivo de sonido. Para hacer un seguimiento del progreso de reproducción de un flujo de sonido, la aplicación debe estimar el tamaño final de todo el archivo de sonido y utilizar dicho valor en sus cálculos. Se puede estimar la duración 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 código siguiente carga un archivo de sonido más grande y utiliza el evento Event.ENTER_FRAME como mecanismo de sincronización para mostrar el progreso de la reproducción. Notifica periódicamente el porcentaje de reproducción, que se calcula como el valor de la posición actual dividido entre la duración total de los datos de sonido: import flash.events.Event; import flash.media.Sound; import flash.net.URLRequest; var snd:Sound = new Sound();

ADOBE FLASH CS4 99

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 código llama al método snd.play() y almacena el objeto SoundChannel resultante en la variable channel. A continuación, añade un detector de eventos a la aplicación principal para el evento Event.ENTER_FRAME y otro detector de eventos al objeto SoundChannel para el evento Event.SOUND_COMPLETE que se produce cuando finaliza la reproducción. Cada vez que la aplicación alcanza un nuevo fotograma en su animación, se llama al método onEnterFrame(). El método onEnterFrame() estima la duración total del archivo de sonido según la cantidad de datos que ya se han cargado, y luego calcula y muestra el porcentaje de reproducción actual. Cuando se ha reproducido todo el sonido, se ejecuta el método 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 reproducción. El evento Event.ENTER_FRAME puede distribuirse muchas veces por segundo. En algunos casos no será necesario mostrar el progreso de la reproducción con tanta frecuencia. De ser así, la aplicación puede configurar su propio mecanismo de sincronización 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.

ADOBE FLASH CS4 100

NAVEGACION

En este capítulo, la de Navegación, está especialmente orientada a la web, pues veremos cómo crear elementos que te ayudarán más tarde a crear tus propias presentaciones, secciones, etc. Todo ello apoyado con animaciones y vinculadas entre sí.

Los Botones

Uno de los elementos que más nos van a ayudar a la hora de añadir interactividad en el diseño son los botones. En el ejemplo nos hemos ayudado de los botones para crear la navegación entre las diferentes secciones.

Así que el primer paso, después de haber creado la interfaz de la película en una capa, será crear e insertar los botones en una nueva capa para trabajar con mayor facilidad. Para asignarle una acción a un botón 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 más tarde para llamar al botón) en el Inspector de Propiedades, en este caso lo hemos llamado equipo. Luego, creamos otra capa para poder insertar las acciones que necesitarán nuestros botones, abrimos el Panel Acciones y añadiremos el código que deberá realizar el botón. Ésta es la parte más importante pues deberemos decidir a qué evento responderá el botón. Existen varios eventos que son capturados en Flash:

MouseEvent.CLICK ("click") - Se procue al hacer clic (pulsar y soltar el botón ratón). MouseEvent.DOUBLE_CLICK ("doubleClick") - Se produce al hacer doble clic. MouseEvent.MOUSE_DOWN ("mouseDown") - Se produce al pulsar el botón del

ratón (antes de soltarlo). MouseEvent.MOUSE_MOVE ("mouseMove") - Se produce cuando el ratón 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 ratón se coloca

sobre el objeto. MouseEvent.MOUSE_UP ("mouseUp") - Se produce cuando se suelta el botón del

ratón. MouseEvent.MOUSE_WHEEL ("mouseWheel") - Se produce al presionar la rueda

del cursor. MouseEvent.ROLL_OUT ("rollOut") - Se produce cuando se mueve el ratón fuera

del elemento. MouseEvent.ROLL_OVER ("rollOver") - Se produce cuando se mueve el ratón

sobre el elemento.

ADOBE FLASH CS4 101

Nota: ActionScript diferencia entre mayúsculas y minúsculas, por lo que si escribes, por ejemplo, mouse_up no será reconocido.

Para capturar el evento tenemos que añadir un escuchador que se encargue de estar pendiente de si sucede ese evento, al elemento correspondiente. En nuestro caso, al botón. Además del evento, debemos de indicar el nombre de una función, que será el código que se ejecute al producirse el evento. Por tanto, si no hemos creado ya esa función, la tenemos que definir, con el mismo nombre y pasándole como parámetro el evento. Como siempre, entre las llaves {} introduciremos el código que queremos que ejecute la función. miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);

function miFuncion(e:MouseEvent):void {

//código de la función

}

ADOBE FLASH CS4 102

Controladores de la Línea 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 línea de tiempo:

Observa la capa ParteMedia. En ella se encuentran todo el contenido de las secciones. De esta forma, si no aplicásemos ninguna acción sobre la línea de tiempo, todas las secciones se ejecutarían una seguida de la otra. Lo que queremos conseguir es que se ejecute la primera (para mostrar la sección principal) y el cabezal se pare hasta nueva orden (para mostrar la segunda). Para ello utilizaremos la función stop(). Esta función sirve para parar el cabezal de la línea de tiempo donde sea colocada. Así que seleccionamos el último fotograma de la sección y abrimos el Panel Acciones. Allí deberemos escribir únicamente la línea:

Esto hará que cuando la animación llegue a ese punto se detenga a la espera de nueva orden.

ADOBE FLASH CS4 103

Nosotros hemos colocado las acciones en una capa aparte llamada Acciones para así poder acceder más rápido a ella. El método es el mismo, solamente habrá que crear fotogramas claves en aquellos sitios en los que queramos insertar un stop(). Ya hemos conseguido detener la presentación. Pero, ¿cómo hacemos que se muestre la segunda? Muy sencillo. Los botones nos ayudarán a desplazar el cabezal por la línea de tiempo. Así que modificaremos el código de uno de los botones:

De esta forma, al hacer clic sobre ese botón, el cabezal de reproducción se desplazará hasta el fotograma que tiene la etiqueta "NOSOTROS" y reproducirá a partir de allí. Si añadimos un stop() en el último fotograma de la segunda sección, cuando éste se reproduzca se parará y el contenido permanecerá estático en espera de una nueva orden. Existe otra forma, muy útil, para nombrar los fotogramas. Del mismo modo que dábamos un nombre de instancia a un botón lo haremos con un fotograma. Basta con introducir una Etiqueta de fotograma para poder remitir el cabezal a éste:

Además de estos controladores podemos utilizar también: gotoAndStop(fotograma), que situará el cabezal en el fotograma indicado y parará la reproducción.

Botón al que añadiremos el evento Evento

Función que será llamada desde el evento

Fotograma al que irá el botón al ser pulsado

ADOBE FLASH CS4 104

play(), que hará que la reproducción 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 también.

Manual Flash Cs4 - Action Scripts - V0710

Documents

Transcript of Manual Flash Cs4 - Action Scripts - V0710