Curso de Flash: Flash Básico (I)

Las presentaciones en PowerPoint aburren, eso se sabe. En la actualidad el interés va por lo interactivo, lo vistoso, lo animado. Los botones tienen que iluminarse (al menos) y las transiciones tienen que ser suaves. En NeoTeo vamos a ofrecerte unas nociones básicas para manejar el Adobe Flash sin errores y para que puedas seguir los tutoriales que haremos más adelante

Cuando hablamos de Flash, tenemos que pensar en 5 cosas principales: Línea de Tiempo, keyframes (fotogramas clave), símbolos, capas y acciones. Hay mucho más para hacer en la herramienta, pero el conocimiento y manejo de estos cinco elementos te permitirá manejar todo lo demás con comodidad.

Línea de Tiempo y Keyframes
Para realizar una transición, necesitas un transcurso de tiempo. Para que algo cambie, necesitas una hoja/pantalla/instancia/fichero adicional. En Flash, la Línea de Tiempo será la que contenga todo esto, permitiéndote saltar entre fotogramas o escenas. Los Keyframes o Fotogramas Clave serán los que marcarán cada instancia. El Keyframe marca el inicio y fin de una transición, marca el cambio en la pantalla o la inserción de un elemento o acción.

La Línea de Tiempo puede contener distintas capas para manejar diferentes componentes en forma individual. Los Keyframes puede estar vacíos (para marcar una acción) o contener un símbolo/imagen/vídeo.

Símbolos
Existen tres símbolos en Flash: Gráfico, Botón o Clip de Película. Cada uno de ellos tiene un comportamiento particular. Para trabajar sin contratiempos (ni errores) en Flash, todo aquello que vaya a tener un cambio, transición o acción tiene que ser convertido a uno de estos tres símbolos. Todos los símbolos y elementos que utilicemos en Flash se visualizarán en la Biblioteca.

Acciones
Las acciones serán los comandos de nuestro documento Flash. Indicarán cuando debe detenerse o iniciar la reproducción, cuando tiene que saltar a otro fotograma o escena, cuando debe establecerse un enlace, iniciar un clip de película, establecer una propiedad, entre tantas otras opciones. Todo esto se controla desde el panel de Acciones.

Nota: Si estás usando la versión CS3 de Flash, asegúrate de crear el nuevo documento con ActionScript 2.0 (o ve a Opciones de Publicación y selecciona AS2) para tener las mismas opciones con las que trabajaremos en el tutorial

Ahora que ya hablamos un poco de la teoría, vamos a poner todo esto en práctica y ver cómo funciona.

1. Abre el programa
2. Pincha en “Documento de Flash” (o ve a Archivo > Nuevo > Documento de Flash)

En el centro verás la Línea de Tiempo con una capa y un Keyframe vacío, abajo, el cuadro blanco del escenario y al pie, el panel de Propiedades. A la izquierda está la barra de herramientas y a la derecha las ventanas de paneles. Si, por defecto, no ves el panel de Biblioteca a la derecha, presiona F11 (o pincha Ventana en el menú superior y tilda Biblioteca)

Símbolos: Gráfico

1. Presiona las teclas Ctrl+2 para que el documento se ajuste al espacio entre la Línea de Tiempo y el panel de Propiedades
2. Pincha el primer icono en la parte inferior izquierda del panel de Biblioteca (Nuevo Símbolo)
3. En la ventana emergente, selecciona la opción “Gráfico” y ponle un nombre

Verás que el nuevo símbolo aparecerá en tu Biblioteca y que la pantalla cambiará a una extensión blanca con una cruz pequeña en el centro. Si te fijas en la parte superior de la línea de tiempo, verás que al lado de “Escena” aparece tu símbolo. Esto implica que no estás en el documento principal, sino dentro del gráfico. Un gráfico puede contener cuantas cosas quieras. Por el momento haremos algo simple.

1. Pincha el icono de óvalo en la barra de herramientas y elige el color que desees
2. Pincha y arrastra con el ratón por donde está la cruz negra para trazar un círculo
3. Pincha en “Escena 1” en la parte superior de la línea de tiempo. Esto te devolverá al escenario.

Vamos a realizar un par de transiciones simples con el gráfico. Primero queremos hacer que el gráfico “aparezca” lentamente. Necesitaremos una fracción de tiempo (varios fotogramas) y dos instancias: una invisible y otra visible. Por ende, vamos a necesitar dos Keyframes.

1. Arrastra el gráfico desde la Biblioteca hasta el documento. Verás que el keyframe del primer fotograma se ha puesto negro y que el panel de propiedades ha cambiado para mostrar las del gráfico.
2. Pincha sobre el fotograma número 20
3. Presiona la tecla F6 para insertar un keyframe (Insertar > Línea de Tiempo > Fotograma Clave). Verás que todos los fotogramas entre 1 y 20 se encuentran grisados (todos contienen al gráfico)
4. Pincha sobre el fotograma 1 (que tiene el primer keyframe) y luego pincha sobre el gráfico.
5. En el panel de Propiedades, a la derecha, abre el menú desplegable de “Color:” y selecciona “Alfa”
6. En el nuevo menú desplegable que aparece, pincha sobre la flecha y desplaza el indicador en la barra hasta abajo (0%). Verás que el gráfico se ha vuelto invisible. Si te desplazas por la línea de tiempo, verás que esta propiedad se mantiene hasta el fotograma 20, en que un keyframe determina un nuevo estado.
7. Pincha sobre cualquiera de los fotogramas grisados que no tenga keyframe. Haz clic derecho con el ratón y elige la opción “Crear interpolación de movimiento” en la ventana que se despliega. Verás que los fotogramas se ponen violetas y tienen una flecha del primer keyframe al último. Esto indica que hay una animación de algún tipo. Si te paras sobre el primer fotograma y presionas la tecla Enter, verás la animación.

Siguiendo los pasos anteriores (de 1 a 7) puedes hacer distintos tipos de transiciones, sólo tienes que cambiar la operación del paso 5 y 6. Por ejemplo, en el paso 5, en vez de cambiar las propiedades del gráfico, puedes moverlo a una posición diferente del documento e ignorar el paso 6. Así harás que el gráfico se mueva por la pantalla. Hay muchas otras cosas para hacer con los gráficos y las interpolaciones, pero eso lo veremos en futuros tutoriales.

Nota: Dentro del los Gráficos puedes dibujar lo que quieras con las herramientas de Flash o puedes insertar un fichero de imagen externo. Para hacerlo, tienes que presionar las teclas Ctrl+R (o Archivo > Importar > Importar a escenario) estando dentro de la ventana de edición del gráfico. La imagen se insertará dentro del gráfico y en tu Biblioteca verás, además el fichero de imagen  como tipo “Mapa de Bits”. Asegúrate de arrastrar el símbolo (gráfico con la imagen insertada) a la escena, ya que si arrastras el jpg no tendrás la opción de modificar la transparencia y si haces una interpolación de movimiento (con el jpg en vez del símbolo), el Flash te generará 2 símbolos adicionales (esto no sólo es innecesario y ocupa espacio, sino que te complicará la administración del documento cuando tengas muchos más elementos para trabajar)

Ya vimos básicamente como trabajar con gráficos. Vamos a ver cómo hacer un botón

Símbolos: Botones
Pincha el icono de “Nuevo Símbolo” en la Biblioteca y selecciona la opción “Botón” en la nueva ventana

Verás que la Línea de Tiempo del Botón difiere de la de Escena o Gráfico. Tienes 4 fotogramas que representan las instancias de: Reposo, Sobre, Presionado y Zona activa.
Al igual que con los gráficos, puedes insertar ficheros de imagen externos en el botón. Sólo necesitas tener en cuenta que si quieres que el botón se ilumine/cambie de color, deberás crear una imagen adicional (Flash no te permite editar ficheros externos).

1. Selecciona el cuadro de la barra de herramientas. Traza un rectángulo en el área del documento que tiene la cruz. O presiona Ctrl+R para insertar una imagen externa
2. Inserta un Keyframe en cada uno de los fotogramas restantes (Sobre, Presionado y Zona Activa)
3. Pincha en el fotograma “Sobre” y luego pincha sobre el rectángulo que has trazado. En el panel de Propiedades, cambia el color de la forma (al que te gustaría que cambie el botón al pasar el ratón por arriba). O borra la imagen en “Sobre”, presiona Ctrl+R y elige la segunda imagen que hayas preparado
4. Crea una nueva capa para el texto (Tener el texto en otra capa te hará la edición mucho más fácil)
5. Pincha la “A” en la barra de herramientas y asegúrate que en el panel de propiedades diga “Texto Estático”. Elige la fuente, tamaño y color que prefieras y escribe sobre el botón. Acomoda el texto e inserta un keyframe en cada fotograma
6. Pincha en el fotograma “Sobre” de la segunda capa, haz doble clic en el texto y cambia el color de la letra
7. Pincha en “Escena 1” en la línea de tiempo para salir de la edición del botón

Para ver a tu botón en acción, arrastra el símbolo a la escena, ve a la opción “Control” del menú superior y tilda la opción “Habilitar botones simples” (Ctrl+Alt+B). Luego sólo pasa el ratón por arriba.

Nota: El Fotograma de Zona activa es muy útil para botones invisibles o botones de sólo texto (Si no trazas una zona activa sobre el texto, éste tendrá propiedad de botón sólo en los trazos de las letras. Es decir, si no pinchas justo sobre una letra, no podrás usar el botón). Trazando un cuadro o círculo en el fotograma de Zona Activa determinas el área que representará la acción del botón (que el cursor cambie a mano y el espacio para presionar). La forma trazada será transparente en la escena.

Ya casi terminamos, sólo nos quedan los Clips de Película

Símbolos: Clip de Película
La creación de un Clip de Película se parece en mucho a la de un Gráfico, pero tiene infinidad de usos muy prácticos (que veremos en futuros Tutoriales). En su forma más básica, un Clip de Película actúa como una versión pequeña e insertable de una Escena. Veamos cómo funciona.

1. Crea un símbolo de gráfico y traza un círculo.
2. Crea un símbolo nuevo y selecciona la opción “Clip de Película”
3. Arrastra el círculo al editor del Clip y ubícalo cerca del borde izquierdo.
4. Inserta un keyframe en el fotograma 30 y arrastra el círculo al borde derecho.
5. Haz clic derecho en los fotogramas intermedios y crea una interpolación de movimiento.
6. Pincha en “Escena 1” para salir del Clip.

Vamos a Integrar todo lo que hemos visto hasta ahora con algunas acciones básicas. Ya tenemos un Clip de Película. Vamos a necesitar dos botones, uno de Play y uno de Stop.

Nota: Para hacer rápidamente dos botones parecidos, crea un botón llamado Play y luego – en la Biblioteca – haz clic derecho sobre el botón y elige la opción “Duplicar”. Ponle el nombre Stop y Aceptar. Haz doble clic en el botón “Stop” en la Biblioteca para abrir el editor del botón y sólo tendrás que cambiar el texto en los cuatro fotogramas.

1. Arrastra los botones de Play y Stop al escenario e inserta un keyframe en el fotograma 2
2. Crea una capa nueva, pincha el fotograma 2 de la segunda capa e inserta un keyframe.
3. Con el fotograma 2 de la segunda capa seleccionado, arrastra el clip de Película al escenario (el primer fotograma de la segunda capa debe tener un keyframe vacío)
4. Pincha en el primer fotograma de la capa 1 y abre el panel de Acciones (F9)
5. Pincha sobre la opción “Funciones Globales” a la derecha. Luego en “Control Línea de Tiempo” y haz doble clic en “stop” (Esc-st). Te aparecerá una pequeña letra “a” arriba del Keyframe, eso indica que ese keyframe tiene una acción. El “stop” indica que no debe avanzar al fotograma 2.
6. Pincha en el segundo fotograma de la capa 1 y repite el paso 5 (pon un stop)
7. Pincha en cualquier lado del escenario (para que se deseleccione el fotograma) y pincha sobre el botón de Play.
8. Con Play seleccionado, en el panel de Acciones, haz doble clic en “Goto” (Esc-go). (La acción dice que al presionar el botón, se debe ir al Fotograma 1). Pincha donde dice “gotoAndPlay(1)” y te aparecerán unos campos arriba. Donde dice “Fotograma” ingresa el número 2, de manera que el script diga “gotoAndPlay(2)”
9. Pincha el botón de Stop. En el panel de Acciones, haz doble clic en “Goto”. Pincha donde dice “gotoAndPlay(1)”. Y en las opciones superiores selecciona la opción “Ir a y detener” (El Fotograma déjalo en 1)

Presiona las teclas Ctrl+Enter para previsualizar la película y prueba cómo funcionan los botones.

Ahora ya te has familiarizado con los elementos básicos de Flash. En el próximo tutorial nos explayaremos con los diferentes tipos de acciones y escenas.