Curso de Flash: Flash Básico (II)

Seguimos cubriendo las bases de Flash para principiantes. En el tutorial anterior vimos el entorno del programa, cómo crear símbolos (gráficos, botones y clip de película), cómo hacer transiciones simples y colocar acciones de reproducción y detención. En esta segunda parte del tutorial, indagaremos más en los diferentes tipos de animación y escenas.

En la primera parte del tutorial te mostramos cómo crear una interpolación de movimiento para animar un símbolo. Las interpolaciones comunes pueden utilizarse para desplazamiento, color, brillo, visibilidad y escala. Pero también podemos interpolar una forma, crear una ruta de movimiento, trabajar con máscaras y modificar la aceleración. Para hablar un poco de las "Escenas" en flash, aprovecharemos la ocasión para mostrar estas cuatro opciones de animación en diferentes escenas. Eso es lo que veremos a continuación.

Creando Escenas:

1. Abre un nuevo documento en Flash.
    
2. Asegúrate de tener el panel de "Escena" a la derecha. (Si no lo ves, ve al menú superior, "Ventana" > Otros Paneles > Escena o presiona Shift+F2)
    
3. Pincha en el signo + en el panel de Escena. Verás que aparecerá una nueva línea en el panel (Escena 2). Sigue agregando escenas hasta que tengas 5.
    
4. Haz doble clic sobre cada escena (en el panel de Escena) para cambiarles el nombre. Nosotros usaremos los siguientes: Inicio, Forma, Ruta, Máscara y Aceleración (para 1, 2, 3, 4 y 5 respectivamente)

Nota: Las escenas pueden cambiarse desde el panel de Escena o desde el icono de claqueta en la parte superior derecha de la línea de tiempo.

Si no configuramos ningún tipo de acción, la película Flash (una vez exportada) pasará automáticamente a la escena siguiente una vez que cubra los fotogramas activos de cada una. Para establecer una navegación interactiva, tendremos que poner la acción "Stop" en el fotograma final de cada escena. Luego, para operar la navegación, podemos crear un solo botón de "siguiente" para pasar a otra escena o podemos crear un menú de navegación con 5 botones. Ten en cuenta que estos botones tendrán que repetirse en todas las escenas, por lo que es conveniente configurarlos por completo desde el comienzo y luego, simplemente, copiarlos y pegarlos en cada escena. Sabemos que tenemos cinco escenas, así que vamos a crear cinco botones para la navegación (Crea un botón con el texto en una capa separada y luego duplícalo cuatro veces y sólo tendrás que cambiar la capa de texto de cada botón)

Estableciendo la navegación entre Escenas:

1. Ubica los 5 botones en la Escena 1 (Inicio)
    
2. Agrega un Stop en el primer fotograma para que la película no salga del Inicio sin presionar un botón. (Pincha sobre el primer fotograma, ve al panel de Acciones (F9), clic en Stop o Esc-st)
    
3. Pincha en un área libre del escenario para deseleccionar los elementos y pincha sobre el primer botón (Inicio)
    
4. Agrega una acción de "GotoandPlay" (En el panel de Acciones (F9) selecciona Funciones globales > Control de línea de Tiempo > goto ó presiona las teclas esc-go)
    
5. Pincha sobre "GotoandPlay" en el código y en la parte superior (si no ves campos arriba, presiona donde dice "Asistente de script"), donde dice Escena: elige "Inicio"
    
6. Repite los pasos 4 y 5 con el resto de los botones, eligiendo la escena que le corresponde a cada botón (El código de cada botón debe decir "GotoandPlay("Escena correspondiente", 1);" en la línea 2)
    

Ahora que ya tenemos todos los botones configurados, tenemos que ponerlos en cada una de las escenas.

1. Pincha sobre el fotograma 1 y presiona las teclas Ctrl+Alt+C (copia el contenido del fotograma con acción y todo)
    
2. Ve a otra escena, pincha en el fotograma 1 y presiona las teclas Ctrl+Alt+V. Se pegarán los botones (con sus acciones) en el mismo lugar que en la primera escena. Borra la acción sobre el fotograma (Pincha sobre el keyframe, luego sobre el Stop en el panel de Acciones y presiona Supr)
    
3. Repite el paso 2 en cada escena restante

Ya tenemos las escenas, los botones y la navegación establecida. Empecemos con las animaciones

Interpolación de Formas:
Las interpolaciones de forma se hacen de una manera un poco diferente al resto de las animaciones. En primer lugar, sólo funcionan con formas vectoriales. Esto quiere decir que no funcionará con símbolos. Al contrario de las interpolaciones comunes (que conviene realizarlas con símbolos para evitar objetos duplicados y errores), una animación de forma tiene que hacerse con un dibujo no convertido en símbolo. En segundo lugar, la animación no se realiza con el botón derecho del ratón sobre los fotogramas y la opción "Interpolación de movimiento" sino desde el panel de propiedades. Veámoslo paso a paso.

1. Ve a la Escena "Forma"
    
2. Crea una nueva capa en la línea de tiempo y traza una forma en el primer fotograma (de la 2da capa) con la herramienta que prefieras de la barra. Nosotros usaremos el óvalo.
    
3. Pon un keyframe (F6) en el fotograma 15 y otro en el fotograma 30 de la segunda capa. (Utilizaremos 3 keyframes para transformar tres formas diferentes).
    
4. Pincha sobre el fotograma 15 (2da capa) y traza una forma diferente (reemplaza la forma anterior). Nosotros usaremos un cuadro.
    
5. Pincha sobre el fotograma 30 (2da capa) y traza una tercera forma (reemplaza la forma anterior). Nosotros usaremos un triángulo.
   (Siendo formas vectoriales, toda forma que traces en Flash tendrá nodos. Si quieres hacer una forma diferente a las predeterminadas en la barra de herramientas, sólo tienes que elegir la flecha blanca y editar los nodos)
    
6. Ahora que ya tenemos nuestras tres formas (una en cada keyframe) sólo nos queda realizar la interpolación;
    
7. Pincha en cualquier fotograma entre 1 y 15 (2da capa).
    
8. En la parte inferior de la pantalla, en el panel de Propiedades, verás la opción "Animar" con un menú desplegable. Pincha en la flecha y elige la opción "Forma".
   Verás que los fotogramas se pintarán de verde con una flecha, eso indica que hay una interpolación de forma (las de movimiento son lila).
    
9. Pincha en cualquier fotograma entre 15 y 30 (2da capa) y repite los pasos en 8.
    
10. Pon un keyframe en el fotograma 30 de la primera capa (para tener los botones en todo momento) y pon un Stop en ese keyframe.
     

Si quieres ir viendo como va quedando, presiona las teclas Ctrl+Enter y pincha el botón "Forma" en el swf que se abre.

Guía de Movimiento:
Las guías de movimiento sirven para que un símbolo realice un movimiento no lineal. Es decir, para que siga una ruta específica sin tener que marcar un nuevo keyframe para cada posición.

1. Ve a la Escena "Ruta"
    
2. Crea una nueva capa en la línea de tiempo.
    
3. Crea un símbolo de gráfico y traza una forma dentro.
    
4. Pincha sobre el primer fotograma de la segunda capa y arrastra el gráfico a la escena.
    
5. Pon un Keyframe en el fotograma 30 (2da capa) y mueve el gráfico a la posición que tendrá al final del trayecto.
    
6. Crea una interpolación de movimiento para el gráfico (clic derecho sobre los fotogramas intermedios "Interpolación de movimiento")
    
7. Haz clic derecho sobre la segunda capa y elige la opción "Añadir guía de movimiento".
   Verás que aparecerá una nueva capa con el nombre "Guía: Capa 2"
    
8. Pincha sobre el primer fotograma de la capa "Guía" y pincha en el Lápiz de la barra de herramientas.
    
9. Ubica el lápiz en el centro de tu gráfico y realiza el trazo que gustes (en curva, zigzag, como prefieras).
   El trazado de la guía será invisible cuando exportes la película de flash
    
10. Pincha sobre el fotograma 30 de la segunda capa (que tiene el gráfico) y arrastra el gráfico al extremo final del trazo.
    (Mientras muevas el gráfico, éste tendrá un círculo en medio, ese círculo central tiene que estar al final de la línea)
     
11. Pon un keyframe en el fotograma 30 de la primera capa (los botones) y pon un Stop en ese keyframe.

Animaciones con máscaras:
Las máscaras sirven para cubrir o descubrir partes de una imagen, es decir, para enmascarar. Un ejemplo del uso de una máscara puede ser simular un efecto de spotlight (haz de luz) que va revelando partes de un fondo a medida que se mueve.

1. Ve a la Escena "Máscara"
    
2. Crea una nueva capa.
    
3. Pincha en la herramienta de Texto ("A") en la barra de herramientas.
    
4. Pincha en el primer fotograma de la Capa 2 y escribe un texto de más de cuatro palabras de extensión.
    
5. Crea una nueva capa (capa 3). Pincha en el primer fotograma y arrastra el gráfico que creaste para la animación anterior. Ubica el gráfico sobre el texto, cubriendo las primeras letras.
    
6. Pincha en el fotograma 30 de la Capa 3 y, sin soltar el botón del ratón, arrastra hacia abajo para seleccionar las tres capas. Pincha F6 para que se agregue un keyframe en cada capa.
    
7. Pincha en el fotograma 30 de la Capa 3, mueve el gráfico hasta el final del texto escrito y crea una interpolación de movimiento.
    
8. Haz clic derecho sobre la Capa 3 y elige la opción "Máscara".
   (El texto se volverá "invisible" y el gráfico se transformará en una "ventana" al gráfico)
    
9. Pincha en el fotograma 30 de la primera capa (botones) y agrega un Stop en ese keyframe
    

Aceleración de las animaciones:
Hasta ahora, cuando hablamos de las interpolaciones no describimos las opciones que aparecen en el panel de Propiedades de la animación. Podemos hacer que el movimiento empiece lento y se vaya acelerando o viceversa o que el gráfico vaya rotando.

1. Ve a la Escena "Aceleración"
    
2. Crea 3 capas nuevas 
   (Si el gráfico creado anteriormente es un círculo como el nuestro, crea un símbolo gráfico adicional con un cuadro – para que la rotación sea perceptible)
    
3. Arrastra un gráfico al primer fotograma de cada capa nueva (2, 3 y 4). Ubícalos separados, a la izquierda del escenario.
    
4. Pon un keyframe en el fotograma 30 de todas las capas. Pincha en el fotograma 30 de las capas 2, 3 y 4 y ubica a los gráficos a la derecha. Crea una interpolación de movimiento en las tres capas.
    
5. Pincha en el primer fotograma de la Capa 2. En el panel de Propiedades, en la opción "Aceleración:" (debajo de "Animar") mueve el indicador hacia arriba (debe quedar "100 fuera")
    
6. Pincha en el primer fotograma de la Capa 3. En el panel de Propiedades, en la opción "Aceleración:" mueve el indicador hacia abajo (debe quedar "-100 dentro")
    
7. Pincha en el primer fotograma de la Capa 4. En el panel de Propiedades, en la opción "Girar:" (debajo de "Aceleración") elige "horario" o "antihorario" y en el campo de al lado pon la cantidad de veces que debe girar.
   (Usa un gráfico con aristas para notar la rotación)
    
8. Pincha en el fotograma 30 de la primera capa (botones) y agrega un Stop en ese keyframe.

Ahora que tenemos todas las escenas completas, podemos exportar nuestra película. Presionando Ctrl+Enter podemos previsualizar el resultado y se generará un fichero .swf (película activa) en el directorio donde hayamos guardado el .fla (fichero de edición de la película). Pero para configurar las opciones y exportar correctamente la película, debemos publicarla:

1. Ve al menú superior y presiona Archivo > Configuración de Publicación
    
2. En la primera solapa (Formatos) puede elegir si quieres publicarlo como un ejecutable (exe), como imagen o como película. La opción HTML genera un fichero html con el swf ya insertado en el código.
    
3. En la segunda solapa (Flash) puedes elegir en qué versión de Flash exportar la película (las versiones se corresponden con los plugins de Flash). Puedes proteger tu swf con una clave y configurar la calidad del fichero. Dependiendo de las opciones elegidas en Formatos tendrás más o menos solapas de configuración.
    
4. Pincha “Publicar” para generar los ficheros y luego Aceptar para conservar la configuración.

Nota: Dependiendo de lo que quieras hacer en tu documento Flash, te convendrá hacer las animaciones directamente en la escena (para pocos elementos/animaciones) o dentro de un Clip de Película (si vas a usar muchos elementos/animaciones).

Todos los tipos de animación pueden combinarse a gusto para lograr muchísimos resultados diferentes y se le pueden agregar diferentes acciones, dependiendo de lo que queramos lograr. En el próximo tutorial comenzaremos a indagar en acciones un poco más avanzadas, ActionScript y el uso de textos dinámicos.