Índice
Presentación ………………………………………………………. 3
Contenido.
Capítulo 1 ……………………………………………………….. 4 Novedades de la Versión CS 5.5. 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 ……………………………………………………….. 65 Máscaras. Botones Comunes y Personalizados. Acciones.
Capítulo 4 ……………………………………………………….. 74 Generar y Publicar películas. Usando precargadores.
Capítulo 5 ……………………………………………………….. 86 Introducción a ActionScript 3.0. Fundamentos de Programación. Tipos de Datos. Conversiones.
Capítulo 6 ……………………………………………………….. 92 Estructuras de Control Condicionales y Repetitivas.
Capítulo 7 ……………………………………………………….. 100 Clips de Película: Manejo de propiedades. Detección de teclas pulsadas. Carga y descarga de elementos.
Capítulo 8 ……………………………………………………….. 111 Interacciones con el Mouse. Manejo de Colisiones. Trabajo con Sonido. Navegación usando Botones.
ADOBE FLASH CS 5.5
2
Índice
Presentación ………………………………………………………. 3
Contenido.
Capítulo 1 ……………………………………………………….. 4 Novedades de la Versión CS 5.5. 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 ……………………………………………………….. 65 Máscaras. Botones Comunes y Personalizados. Acciones.
Capítulo 4 ……………………………………………………….. 74 Generar y Publicar películas. Usando precargadores.
Capítulo 5 ……………………………………………………….. 86 Introducción a ActionScript 3.0. Fundamentos de Programación. Tipos de Datos. Conversiones.
Capítulo 6 ……………………………………………………….. 92 Estructuras de Control Condicionales y Repetitivas.
Capítulo 7 ……………………………………………………….. 100 Clips de Película: Manejo de propiedades. Detección de teclas pulsadas. Carga y descarga de elementos.
Capítulo 8 ……………………………………………………….. 111 Interacciones con el Mouse. Manejo de Colisiones. Trabajo con Sonido. Navegación usando Botones.
ADOBE FLASH CS 5.5
2
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 CS 5.5. Diseñar con Adobe Flash CS5.5 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 de Flash Player. 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 CS 5.5
3
Objetivos
Introducción a Adobe Flash CS 5.5. Novedades de la versión CS 5.5. 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.
ADOBE FLASH CS 5.5
4
INTRODUCCIÓN A A DOB E FL ASH CS 5.5 Flash fue creado fundamentalmente para editar y publicar contenidos multimedia interactivos para la web. Sin embargo, gracias a las nuevas capacidades incluidas en esta nueva 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 CS 5.5 Valores predefinid os
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”…
Anim ación basada en ob jetos
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.
ADOBE FLASH CS 5.5
5
Transform ació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.
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.
Cin em átic a Inver sa
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 CS 5.5
6
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 CS 5.5
7
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 CS 5.5
8
INICIANDO EL PROGRAMA
Una vez cargado el programa, se muestra una ventana que permite:
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.
ADOBE FLASH CS 5.5
9
El Entorno de Adobe Flash es el siguiente:
1
1. 2. 3. 4. 5.
Barra de Menú. Cuadro de Herramientas. Panel de Propiedades. Área de Trabajo o Escenario. Línea de Tiempo.
SEL ECCIÓN Y DIB UJ O Podemos iniciar creando un nuevo documento, desde la pantalla inicial establecemos el lenguaje a utilizar: ActionScript 3.0.
ADOBE FLASH CS 5.5
10
Luego, en el Panel Propiedades (CTRL + F3, o desde el Menú Ventana > Propiedades), configuramos los valores del documento:
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).
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).
ADOBE FLASH CS 5.5
11
HERRAMIENTA PLUMA: Permite dibujar líneas rectas, curvas suaves, ajustar ángulos y modificar los segmentos de rectas y curvas
HERRAMIENTA TEXTO: Permite crear textos estáticos, dinámicos o de entrada.
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. 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.
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).
3
ADOBE FLASH CS 5.5
12
-
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).
1
3
-
Activar la herramienta Rectángulo y establecer sin color de trazo y relleno gris.
ADOBE FLASH CS 5.5
13
-
Activa la herramienta LAPIZ, y elige el color de contorno blanco. Activa el 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 CS4.
ADOBE FLASH CS 5.5
14
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 perm ite dibujar POLIGONOS o ESTRELLAS.
ADOBE FLASH CS 5.5
15
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 CS 5.5
16
CAMBIANDO EL RELLENO DE LA S 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.
Modificador tamaño de hueco Blo uear relleno
-
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.
ADOBE FLASH CS 5.5
17
Si desea modificar nuevamente el color, puede usar cualquiera de las siguientes formas:
2
Además, si activa la Ventana de Colores (Menú Ventan a > Color ), puede manipular mejor el color a elegir, y el tipo de relleno (sólido o degradado).
1
5
Se puede establecer el tipo (1), el color (2), la tonalidad del color (3), los valores Rojo, Verde y Azul (4), el grado de opacidad (5).
ADOBE FLASH CS 5.5
18
Si en lugar de un color sólido, desea un degradado de colores, se puede elegir el tipo: LINEAL, RADIAL, etc.
5
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 Transform ació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:
ADOBE FLASH CS 5.5
19
Dibuje el siguiente gráfico:
-
Diríjase al Panel de Colores y modifique los colores: 1. Elija el tipo Radial.
3. Elija el color. 2. Elija el punto (interno o externo) 4. Elija el tono de color.
-
Haga clic en la Herramienta Transformar relleno.
Selector que recorta o alarga el rango del degradado.
ADOBE FLASH CS 5.5
20
-
Haga clic dentro de la figura con el relleno degradado lineal, aparecerán tres selectores para realizar las transformaciones.
Selector que amplia o reduce la superficie del degradado.
Selector que permite rotar el rango del degradado.
TRANSFORMANDO 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 la herramienta Transformación libre. La La sección 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.
Rotar y sesgar
Escalar
Distorsionar
Envoltura
ADOBE FLASH CS 5.5
21
-
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 PRIMERA ANIMACIÓN ANIMACIÓN FOTOGRA MA 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
ADOBE FLASH CS 5.5
22
diferente. Cuando los usuarios hagan clic sobre uno de los botones, será redirigido a la Escena correspondiente.
Como vemos en el 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. Con cep to de línea de tiemp o 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 fot ograma “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. ADOBE FLASH CS 5.5
23
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.
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.
ADOBE FLASH CS 5.5
24
El orden de las capas está relacionado con su posición virtual en el espacio. La capa inferior del listado se encontrará “detrás” d e 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.
d. Fotog ramas 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 anim ació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 l lamaremos a esta capa “Círculo inanimado”.
ADOBE FLASH CS 5.5
25
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:
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. 2 4 1
3
-
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.
ADOBE FLASH CS 5.5
26
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
ADOBE FLASH CS 5.5
27
MANEJ O DE VECTORES a. La Herr am ien ta L ápi z 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.
-
Arrastre el puntero sobre el escenario y dibuje una figura similar a la siguiente ilustración.
Al soltar el botón del mouse Flash endereza las líneas.
-
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.
ADOBE FLASH CS 5.5
28
-
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.
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.
ADOBE FLASH CS 5.5
29
c. Dibujando curv as 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.
-
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.
Nuevo punto de anclaje
-
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.
ADOBE FLASH CS 5.5
30
-
Haga clic en el punto de curva para convertirlo en un punto angular.
Observe el cambio de curva a línea.
d. Edición de curv as -
Utilice la herramienta Subseleccionar para seleccionar segmentos de un trazado y editarlo.
-
Haga clic en la herramienta Subseleccionar,
-
Haga clic en el trazado para visualizar sus puntos de anclaje.
-
Haga clic en un conector. Aparecen las 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.
ADOBE FLASH CS 5.5
31
-
Si desea ajustar sólo un lado de la curva, mantenga pulsada pulsada la tecla ALT y arrastre el selector que desee ajustar.
e. Dibujo de objeto -
Permite dibujar formas como 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 sobre otra ya existente sin Dibujo de objeto, las formas se mezclan, lo que provoque una de ellas corte la otra. Esto se conoce como modo de dibujo de fusión. Este modo puede resultar útil para cortar formas y crear otras nuevas.
Modo de Dibujo de Fusión
-
Al dibujar una forma en el modo Dibujo 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.
Modo de Dibujo de Objeto
ADOBE FLASH CS 5.5
32
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.
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.
ADOBE FLASH CS 5.5
33
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 CS 5.5
34
a. Tex to Es táti c o 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 CS 5.5
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 CS 5.5
36
c. Tex to Din ám ic o 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.
APLICANDO EFECTOS Y FILTROS A LOS TEXTOS Un toque agradable que se le puede dar a los textos son los efectos especiales. Veremos 3 ejemplos aplicando efectos y filtros:
EJEMPLO 1
Escribir el texto y luego agregar el Filtro Iluminado desde el Panel Filtro y signar los siguientes valores.
EJEMPLO 2
Para este tipo de efecto tenemos que aplicar varias técnicas veremos paso a paso como crearlo. 1. Escribir el texto de preferencia que sea una fuente gruesa – Para este ejemplo utilizaremos Impact .
ADOBE FLASH CS 5.5
37
2. Vamos a darle el efecto de cursiva, si bien algunas fuentes no tienen este estilo podemos utilizar la falsa cursiva.
3. Luego procedemos a separarlo 2 veces con CTRL + B para convertirlo en forma.
4. Ahora lo agruparemos y lo duplicaremos para poder tener dos textos iguales y poder crear el efecto sombra.
5. Finalmente podemos pulirlo con un filtro tipo Bisel, pero antes debemos convertirlo en símbolo para que se pueda aplicar un filtro. Le aplicaremos el Filtro Bisel de degradado., con los siguientes valores.
ADOBE FLASH CS 5.5
38
TEXTOS CON SCROLLBAR Hay ocasiones que cuando trabajo con textos extensos como para los contenidos de un sitio web no caben en el escenario, una opción bastante interesante sería el de poder agregarle una barra de desplazamiento o Scrollbar. Vemos cómo se puede aplicar este componente y así darle una mejor apariencia a nuestro texto en un sitio web.
Primero que nada debemos cambiar el tipo de texto a texto dinámico y que este activada la opción multilínea y activamos luego el Panel de componentes.
Expandimos el componente User Interface y colocamos en el escenario el botón UIScrollbar
ADOBE FLASH CS 5.5
39
Una vez insertado lo colocaremos encima del texto dinámico y veremos como automáticamente se acomoda al tamaño del marco de texto.
Ahora solo queda reducir el tamaño del m arco de texto y acomodar nuevamente el Scrollbar y ya tendremos nuestra barra de desplazamiento en el texto.
Probar la Película (CTRL + ENTER) y ahora apreciaremos el texto con su respectiva barra de desplazamiento.
ADOBE FLASH CS 5.5
40
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).
-
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 ).
ADOBE FLASH CS 5.5
41
-
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 CS 5.5
42
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 Movim iento 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 CS 5.5
43
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, Transform ació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 CS 5.5
44
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 CS 5.5
45
-
Para crear un movimiento horizontal o vertical, usamos la persiana MOVIMIENTO BASICO, y dependiendo de la cantidad de fotogramas, insertamos un FOTOGRAMA CLAVE (ej. en el fotograma 10).
-
Estando en el fotograma 10, movemos el AVION a una segunda ubicación.
-
Active la Herramienta Selección, y modifique la apariencia de la trayectoria.
ADOBE FLASH CS 5.5
46
-
Observe como la trayectoria ha variado en el editor de movimiento.
-
En el fotograma 1, cambiar el ángulo de 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. Interpo lación de Movim iento 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 CS 5.5
47
-
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 CS 5.5
48
-
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 CS 5.5
49
-
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 CS 5.5
50
-
En otra capa, usar la herramienta Texto (tipo TEXTO ESTATICO) y escribir algo. Luego separar (Menú Modificar > Separar , o pulsando CTRL+B) una vez para separar en CARACTERES, y otra vez 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 CS 5.5
51
d. Usando la Herramienta Huesos. Una de las herramientas más novedosas de Flash CS 5.5 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 CS 5.5
52
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 convert idas 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 CS 5.5
53
El siguiente paso es crear tanto esqueletos como estructuras queramos animar. En este caso crearemos un esqueleto para el cuerpo que unirá el tronco con la pierna y la cabeza, otro para el brazo que toca la guitarra y otro para la pierna interior. La guitarra no necesita huesos. Para crear el esqueleto se selecciona la herramienta de huesos, se hace clic en el 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 CS 5.5
54
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 CS 5.5
55
En la pierna interior se crea un nuevo esqueleto arrastrando del muslo a la pierna y luego al pie. Esta pierna no es necesario que esté vinculada a la pelvis pues en la 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 CS 5.5
56
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 CS 5.5
57
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 m anipular los huesos desde cualquier fotog rama de la línea de tiempo, al hacerlo el gráfico se deformará para adaptarse a la forma del esqueleto.
ADOBE FLASH CS 5.5
58
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 CS 5.5
59
COMO APLICAR LA HERRAMIENTA HUESO.
En la siguiente imagen vemos un fantasma con un eslabón, vamos a articular el eslabón utilizando la Herramienta hueso.
Dibujamos las articulaciones en cada eslabón…
Ahora podremos deformarlo y darle una nueva posición al eslabón sin mucha dificultad.
Para poder crear una animación le agregaremos fotogramas. Notaremos que se ha generado una nueva capa de nombre esqueleto, en esta capa están agrupadas la estructuras de huesos y veremos una línea verde que indica la línea de tiempo. En l fotograma 20 haremos un cambio de posición.
ADOBE FLASH CS 5.5
60
Se puede añadir más poses en esta animación que te permitirá hacer una animación más compleja. Por ejemplo haremos clic derecho en el fotograma 10 y añadiremos una nueva pose, ahora movemos la posición del eslabón.
Finalmente tendremos una animación bastante interesante sin mucho esfuerzo.
CONTROL DE CINEMATICA INVERSA También podemos controlar y cambiar la cinemática inversa o los tipos de huesos aplicados a nuestro ejemplo: Seleccionar la línea verde y se habilitara el panel de Propiedades del Hueso.
ADOBE FLASH CS 5.5
61
Podemos por ejemplo cambiar el tipo de Hueso pero para esto eliminaremos todas las poses que tenga nuestra animación. Ahora cambiemos el Tipo tiempo de creación por Tiempo de ejecución ahora podremos modificar la forma del eslabón en tiempo de ejecución.
NOTA: Para poder hacer esta operación es necesario trabajar con la versión 10 de flash Player.
ESTILO DE HUESOS Podemos trabajar con 3 estilos de huesos los cuales te permitirán controlar en maneras distintas la cinemática inversa.
Estilo Cable
Estilo Solido Estilo Línea
ADOBE FLASH CS 5.5
62
HERRAMIENTA VINCULACIÓN Esta herramienta va de la mano con la herramienta hueso pues te permitirá indicar que sector o del grafico está vinculado con un hueso respectivo. Veamos un ejemplo de como utilizarlo.
A este grafico del murciélago le hemos creado un sistema de huesos que permitirá mover sus alas.
Al momento que realizamos un cambio en la articulación notaremos que siempre una parte del grafico sigue a uno de los huesos.
Aquí se mueve una de las alas y vemos como se mueve junto con el un sector del grafico
Vamos a seleccionar la Herramienta Vinculación y modificaremos la vinculación hacia los huesos. El punto Rojo es el área que hemos seleccionado con la Herramienta Vinculación y notamos que se ve resaltado el hueso con una línea amarilla, ello significa que están vinculados.
Hueso vinculado
Punto seleccionado
ADOBE FLASH CS 5.5
63
Ahora vamos a cambiar la vinculación de un hueso.
Ahora le damos clic y arrastramos hacia el otro hueso.
ADOBE FLASH CS 5.5
64
Objetivos
Máscaras Botones. - Uso de la Biblioteca Común. - Creación de botones. - Insertando audio y clips de película sobre botones. Acciones.
ADOBE FLASH CS 5.5
65
MASCARAS Basta con decir que estas capas se colocan "encima" de las capas a las que enmascaran y 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.
Fotograma 20
Fotograma 40
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 Bib lioteca com ún. En Flash 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. ADOBE FLASH CS 5.5
66
Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que ir al Menú Ventana > Bibliotecas Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo tipo de símbolos: Botones, Clases o Sonidos.
b. Creación de Bo tones. 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. 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.
ADOBE FLASH CS 5.5
67
-
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.
-
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.
ADOBE FLASH CS 5.5
68
-
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.
-
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.
ADOBE FLASH CS 5.5
69
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:
-
Luego edite el botón anterior:
Insertar el clip pulsación en una nueva capa Eliminar el fotograma clave
ADOBE FLASH CS 5.5
70
Si desea Incluir Sonido en un bo tó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.
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:
ADOBE FLASH CS 5.5
71
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 "), _b " lan k ");. "http://www.mipagina.com " se refiere a la página que queremos abrir, y "_blank" indica que se abrirá en una página nueva. 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: btnVis itar.addEv entListen er('click ', visitarSise); func tion visitarSise(event):void{ navigateToURL(new URLRequest(" http: //ww w.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:
ADOBE FLASH CS 5.5
72
btnPaus ar.addEventL istener('click', pausar); function pausar(event):void{ stop(); } btnCo ntinu ar.addEventL istener('click', con tinuar); 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 CS 5.5
73
Objetivos
Generar y Publicar Películas. - Consideraciones acerca del tamaño. - Usar precargadores. - Distribución del archivo SWF para la web.
ADOBE FLASH CS 5.5
74
GENERAR Y PUBL ICAR PELICULA S. a. Con sid eraci on es acer ca del tam añ 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 DIBUJ O
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. CONSIDERAC IONES EN LA ORGA NIZACIÓN:
Agrupar los objetos que estén relacionados, con el Menú Modificar > Ag rupar . 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. CONSIDERAC IONES 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. CONSIDERAC IONES EN LA ANIMA CIÓ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 ADOBE FLASH CS 5.5
75
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ú Arc hivo > Con figu ració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ú Ventan a > Otros , y en la ventana que aparece arrastramos la escena que acabamos Paneles > Escena 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". 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.
ADOBE FLASH CS 5.5
76
Para expresar esto en ActionScript, lo haríamos así: if(this.framesLoaded==this .totalFrames ) { go toA nd Play(1, "Pelícu la" ) } el s e { gotoA ndPlay(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ú Arch ivo > Config uración de Pub lic aci ón... (Pes tañ a HTML ).
ADOBE FLASH CS 5.5
77
EXPORTAR A DIVERSOS FORMATOS: Muchas veces necesitamos tener nuestra película Flash aparte del formato swf, tenerlo también en formatos como por ejemplo una imagen fija JPG o de repente una animación en formato GIF. Veamos como podemos realizar este tipo de exportaciones. Existen 2 modos de exportación: - Exportar Imagen. - Exportar película.
ADOBE FLASH CS 5.5
78
EXPORTAR IMAGEN:
Cuando exporto una imagen solo exportará la posición donde se encuentre el cabezal de la película, por ejemplo en el siguiente gráfico nos detendremos en el fotograma 20 y exportaremos solo lo que se muestra en ese fotograma.
Ahora nos vamos al Menú archivo → Exportar → Exportar imagen
Nos mostrar una ventana donde Erigiremos donde se guardar el archivo Nuevo, así como el tipo de formato de imagen.
ADOBE FLASH CS 5.5
79
Vamos a elegir como formato de salida JPG → Presionamos el Botón Guardar.
Antes de guardarlo nos mostrar una cuadro de Dialogo donde ajustaremos el tamaño de salida que tendrá nuestro archivo.
EXPORTAR PELÍCULA
Si queremos exportar toda la animación en un formato de video o simplemente un GIF animado lo podemos hacer seleccionando la opción Exportar película. Para exportar de esta forma ya no es necesario estar ubicado en algún fotograma específico ya que automáticamente exportara toda la película. Sigamos el siguiente procedimiento: Menú archivo → Exportar → Exportar Película.
ADOBE FLASH CS 5.5
80
En esta ventana Pondremos un nombre de archivo y seleccionaremos a que formato queremos exportar: Nos mostrar varias opciones donde se puede exportar la película completa como una video o una animación, seleccionar para este ejemplo: Windows AVI.
De igual manera que el anterior tipo de exportación vamos a configurar la salida. Una vez hecho esto ya podremos apreciar nuestro nuevo video en el escritorio.
PUBLICAR A CD –ROM Para poder publicar y crear un CD interactivo es necesario primero crear un ejecutable de nuestra Película, para ello tenemos que Publicar la película como un proyector Windows ( .EXE).
ADOBE FLASH CS 5.5
81
Podemos acceder mediante el menú Archivo>Configuración de Publicación . Ahora desactivaremos todos las casillas y solo marcaremos la que indica Proyector Windows(.exe)
Una vez hecho esto podemos cambiar la ruta de donde se publicara el exe dándole clic en la carpeta que esta al costado del nombre del archivo.
Finalmente Presionamos el Botón Publicar y tendremos listo nuestro Proyector .exe
DISTRIBUIR EN CD-ROM Para grabarlo no hay mucho problema, se puede guardar como archivo de datos en un CD o DVD, pero nuestro objetivo es que podamos visualizar nuestra animación de manera automática cuando coloquemos el Disco, para que esto suceda necesitamos un Documento de extensión ADOBE FLASH CS 5.5
82
(.inf) donde tenga un Script que indique que apenas se colocado el CD arranque el proyecto Flash. Vamos a crear este archivo en el e l Bloc de Notas.
Aquí indicaras que archivos (.exe) uieres uieres ue se e ecute ecute a enas enas abra el Adicionalmente también podrías incluir un icono en tu Disco de esa manera cargará con una imagen tu CD.
Finalmente guardas este archivo con el nombre
autorun.inf
Ahora procedemos a elegir los archivos que irán a nuestro disco los cuales serán. - Animacionsimple.exe - Icono.ico - Autorun.inf Esto significa que tendremos que modificar el código del Documento autorun el cual debe de estar en esta forma.
Ahora procedemos a grabar nuestro CD-Interactivo. Tendremos como resultado que al cargar el Disco pueda tener este aspecto.
ADOBE FLASH CS 5.5
83
CONTENIDO PARA DISPOSITIVOS MÓVILES Flash permite la generación de contenidos para teléfonos móviles, para esto al momento de ingresar al programa debemos seleccionar Archivo de Flash (móvil).
Tener en cuenta cada teléfono tiene distintas capacidad así como su resolución de pantalla y funcionalidad de botones. Sería Sería bastante tedioso crear un modelo y luego probarlo para ver cómo encaja a cada celular, para esto Adobe nos Ofrece el Device Central.
Este programa nos permite simular como se verían los distintos contenidos de los programas de Adobe en los también distintos modelos de celular. De acuerdo al Modelo de Celular el programa te mostrara sus capacidad, la versión de Flash Lite y el Action Script compatible con el modelo. m odelo. Para nuestro Ejemplo buscaremos un Modelo de Celular NOKIA 5300 desde el panel Biblioteca en Línea
ADOBE FLASH CS 5.5
84
Una vez seleccionado el modelo le damos Clic en el Botón Crear, y Flash automáticamente preparar el área de trabajo adecuado para el Modelo de este teléfono móvil.
ADOBE FLASH CS 5.5
85
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
INTRODU CCIÓN A A CTION SC RIPT 3.0 El ActionScript es el lenguaje de programación que ha utilizado Flash desde sus comienzos, y que por supuesto, emplea Flash CS 5.5. A grandes rasgos, podemos decir que el ActionScript nos permitirá realizar con Flash CS 5.5 todo lo que nos propongamos, ya que nos da el control absoluto de todo lo que rodea a una película Flash. Absolutamente de todo.
a. Caracteristic as 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 CS 5.5
86
El ActionScript presenta muchísimos parecidos con el Javascript; si conoce Javascript, la sintaxis y el estilo de ActionScript le resultarán muy fam iliares. 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 Acc iones 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 CS 5.5
87
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.
INTRODU CCIÓN A L A P ROG RA MA CIÓN EN A S 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 CS 5.5
88
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
in t : un entero (un número no fraccionario)
u i n t : un entero sin signo, es decir, que no puede ser negativo
: un valor true (verdadero) o false (falso), por ejemplo, si un conmutador Boolean está activado o si dos valores son iguales
c. Op erad or es A ritm é tic os y de Com par ació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
X++ X-X=Valor
ADOBE FLASH CS 5.5
DETALLE Incremento de 1 en 1 Decremento de 1 en 1 A “X” se le asigna el “Valor”
89
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 CS 5.5
90
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.
CONV ERSIÓN DE TIPOS D E DA TOS. 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 concatenada con el texto.
convertida
a
cadena
para
ser
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 CS 5.5
91
Objetivos
Estructuras de Control Condicionales. - Estructuras de Decisión. - Estructuras de Selección Múltiple. Estructuras Repetitivas. - Do While - For
ADOBE FLASH CS 5.5
92
ESTRUCTURAS DE CONTROL CONDICIONAL ES 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. Estructu ras 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%.
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 CS 5.5
93
b. Estru ctu ras 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
ADOBE FLASH CS 5.5
94
(txtNombre, txtTipoAnno) en donde se mostrará el nombre del mes correspondiente (Enero, Febrero, etc.), y un mensaje si el AÑO ES BISIESTO o NO.
En la capa GUI, en el primer fotograma hacemos el diseño antes indicado.
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 CS 5.5
95
En la misma capa, insertamos otro fotograma clave en el fotograma 5, y en Panel de Acciones escribimos:
ESTRUCTURA S 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 ADOBE FLASH CS 5.5
96
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. Estructu ra 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. Estructu ra 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:
Veamos algunos ejemplos.
-
Mostrar la palabra ” INSTITUTO SISE” diez veces.
-
Mostrar una lista de los 15 primeros números enteros positivos.
ADOBE FLASH CS 5.5
97
-
Mostrar la siguiente serie numérica: 6,10, 14, ….. (20 términos)
Usando la estructu ra FOR:
ADOBE FLASH CS 5.5
98
Usando la estructu ra WHILE:
-
Mostrar la serie: 20, 30, 40, 50, …. (20 términos), y la suma de dichos términos.
ADOBE FLASH CS 5.5
99
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.
ADOBE FLASH CS 5.5
100
CLIPS DE PELICUL A 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; 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.
ADOBE FLASH CS 5.5
101
b. Ap licando cam bios 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 .
Primero mostraremos cierta información como su posición horizontal, vertical, el ancho y alto de la pantalla. Esto, en la capa Acciones.
ADOBE FLASH CS 5.5
102
Al pre visualizar, muestra el MC en el centro de la pantalla.
Guarda los valores iniciales en variables.
Estas acciones darán funcionalidad a los botones que permitan el cambio de su posición.
ADOBE FLASH CS 5.5
103
Para controlar la rotación y cambio de tamaño:
Controlando el grado de transparencia (ALPHA):
ADOBE FLASH CS 5.5
104
Para restaurar los valores del MovieClip.
DETECCION DE LA S TECLAS PULSA DAS 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.addEv entListen er(KeyboardEv ent.KEY_DOWN, presion aTecla);
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{ ADOBE FLASH CS 5.5
105
//E s im p o rtan te es p ec ific ar q u e es u n ven to d el tip o K ey b o ar d Ev en t //p ar a p o d er em p lea r el m é to d o .k ey Co d e. swit ch (tecla.keyCod e){ case K eyboard.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.
-
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.
ADOBE FLASH CS 5.5
106
-
Previsualizar la película.
CARGA Y DESCARGA DE ELEMENTOS DE LA B IBLIOTECA 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 CS 5.5
107
-
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 CS 5.5
108
-
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.
ADOBE FLASH CS 5.5
109
-
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 CS 5.5
110
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
ADOBE FLASH CS 5.5
111
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: mi Objeto .startDrag (bloq ueaCent ro, rectáng ulo );
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: miOb jeto.addEventLis tener('mo useDow n', arrastrar); func tion arrastrar(event):void { miObjeto.startDrag(); } miOb jeto.addEventLis tener('mo seUp', 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:Numb er = mouseX; var coordenadaY:Numb er = 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: Mous e.hide(); //Ocultam os el curso r verdadero addEventListener(Event.ENTER_FRAME,cambiarCursor); function cambiarCursor(event):void { texto.contador_txt.text="("+mouseX+", "+mo useY+")"; texto.x = m ouseX; //Asign amos las coordenadas texto.y = mous eY; //Al elemento de texto miCu rsor.x = mo useX; //Y al clip q ue haráde cu rsor ADOBE FLASH CS 5.5
112
miCursor.y = mous eY; }
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 ELEM ENTOS 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): miClip.addEventListener(MouseEvent.MOUSE_UP,miFuncion); function miFuncion(event:MouseEvent):void{ if (miClip .hitTestPoint(mou seX,mo useY) { //c o in c id en c ia } }
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.
ADOBE FLASH CS 5.5
113
-
Lo importamos para ActionScript.
ADOBE FLASH CS 5.5
114
-
En una capa ACCIONES, escribimos las rutinas que permitan mover los ALIENS.
-
Previsualizar y observar el resultado. Ahora puede crear un clip de película mcBlanco, que será incluido en una capa y que permitirá aplicar el BLANCO del disparo.
ADOBE FLASH CS 5.5
115
-
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.
TRABA JA NDO 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 archivo s de son ido 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); ADOBE FLASH CS 5.5
116
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. 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 . R ep r o d u c c i ón d e S o n i d o s 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. ADOBE FLASH CS 5.5
117
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(); 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."); } ADOBE FLASH CS 5.5
118
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(); 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 ADOBE FLASH CS 5.5
119
Event.ENTER_FRAME y otro detector de eventos al objeto SoundChannel para el evento Event.SOUND_COMPLETE que se produce cuando finaliza la r eproducció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.
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 (" c l i c k ") - Se procue al hacer clic (pulsar y soltar el botón ratón). MouseEvent.DOUBLE_CLICK ("doubleClick ") - Se produce al hacer doble clic. ADOBE FLASH CS 5.5
120
MouseEvent.MOUSE_DOWN (" m o u s e D o w n ") - Se produce al pulsar el botón del ratón (antes de soltarlo). MouseEvent.MOUSE_MOVE (" m o u s e M o v e " ) - Se produce cuando el ratón se mueve sobre el elemento. MouseEvent.MOUSE_OUT (" m o u s e O u t ") - Se produce cuando se saca el cursor de encima del elemento. MouseEvent.MOUSE_OVER (" m o u s e O v e r " ) - Se produce cuando el ratón se coloca sobre el objeto. MouseEvent.MOUSE_UP (" m o u s e U p ") - Se produce cuando se suelta el botón del ratón. MouseEvent.MOUSE_WHEEL (" m o u s e W h e e l" ) - 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. Nota: Action Script diferenc ia entre mayúscu las y minúsculas , por lo que si escribes, por ejemp lo, mo use_up no s erárecono cido .
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.
ADOBE FLASH CS 5.5
121
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 }
Con trol ador es d e la L ínea d e Tiemp o 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(). ADOBE FLASH CS 5.5
122
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. 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:
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
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:
ADOBE FLASH CS 5.5
123
