e Adobe Flash CS5
Al momento de comenzar a utilizar Flash
lo más probable es que estés completamente desorientad. Antes de estresarte, échale un vistazo a esta introducción
global al uso de Adobe Flash que de seguro te resultará muy útil.
El espacio de trabajo de Flash
El espacio de trabajo predeterminado que “viene” con Flash es el Clásico.
Probablemente al abrir el programa te vas a encontrar con un panel de
herramientas a tu izquierda, la línea de tiempo en la parte superior, y
finalmente a tu derecha el panel de propiedades. Y claro, en el centro el
“lienzo” sobre el cual vamos a trabajar.
Vamos al menú Ventana > Espacio de trabajo y seleccionemos la opción Nuevo
espacio de trabajo. Va a aparecer una ventanita donde te pedirá un nombre para
el espacio de trabajo. Escoge un nombre y clickea Aceptar. Ahora puedes cambiar
tu espacio de trabajo como más te guste. En el menú Ventana puedes elegir los
paneles que quieras tener en el escenario, para luego organizarlos como tú
quieras.
Las herramientas y sus
utilidades
Herramienta de Selección (V) úsala para seleccionar, mover y deformar
objetos (si mantienesà presionado el botón izquierdo del ratón y lo
arrastras, puedes hacer una selección rectangular)
Herramienta de Subselección (A) úsala para modificar objetos por sus nodosà
Herramienta de Transformación Libre (Q)
úsala para aumentar o disminuir el
tamaño de objetos (para aumentar oà disminuir proporcionalmente, mantén presionada la
tecla Shift)
Herramienta de Transformación de Degradado (F) úsala para modificar degradados.à(surge al
mantener presionado el botón de la herramienta de Transformación Libre
Herramienta de rotación 3D (W) y herramienta de
Traslación 3D (G) úsalas para
transformar objetos simulando 3Dà(sólo compatibles con actionscript 3.0)
Herramienta Lazo (L) úsala para hacer selecciones a mano alzada.à
Herramienta Pluma (P) úsala para dibujar líneas rectas o curvas.à
Herramienta Añadir punto de Ancla (+)
úsala para añadir un punto de ancla en
una línea (te permite curvarla).à
Herramienta Eliminar punto de Ancla (-)
úsala para eliminar un punto de ancla en
una línea curva.à
Herramienta Convertir punto de Ancla (C)
te permite modificar los puntos de ancla
para así modificar la curvatura de una línea.à
Herramienta Texto (T) úsala para introducir un texto.à
Herramienta Línea (N) úsala para dibujar una línea recta (para
dibujar una línea totalmenteà horizontal, vertical o en diagonal, mantén
presionada la tecla Shift)
Herramienta Rectángulo (R) úsala para dibujar un rectángulo (para dibujar
un cuadrado perfecto mantén presionada la tecla Shift).à
Herramienta Óvalo (O) úsala para dibujar un óvalo (para dibujar un
círculo perfecto mantén presionada la tecla Shift)à
Herramienta Rectángulo Simple (R) te permite dibujar un rectángulo o cuadrado y
curvar fácilmente sus vértices.à
Herramienta Óvalo Simple (O) te permite dibujar un óvalo o círculo y
cortarlo fácilmente (para que quede una especie de “pacman” o pizzaà
)
Herramienta PolyStar úsala para dibujar polígonos regulares o
estrellas (modifica las propiedades en el panel propiedades).à
Herramienta Lápiz ( Y) úsala para dibujar líneas a mano alzada.à
Herramienta Pincel (B) úsala para dibujar líneas (que funcionan como
rellenos) a mano alzada.à
Herramienta Rociador (B) úsala para “rociar” formas (que son símbolos
en la biblioteca) sobre el escenario.à
Herramienta Deco (U) permite incorporar una decoración en el
escenario (puede interpolarse).à
Herramienta Hueso (X) ày
herramienta Vinculación (Z) (sólo compatibles con actionscript 3.0) permiten simular el movimiento del esqueleto
humano (es una herramienta muy interesante para animar personajes y darles
cierto realismo).
Herramienta Cubo de pintura (K) úsala para agregar relleno a una forma cerrada
compuesta por unaà línea, o bien para cambiar el color de un relleno
ya existente.
Herramienta Bote de tinta (S) úsala para agregar borde a un relleno, o bien
para cambiar el color de un borde ya existente.à
Herramienta Cuentagotas (I) úsala para seleccionar un color y
automáticamente pasar a la herramienta Cubo de pintura.à
Herramienta Borrador (E) úsala para borrar rellenos y/o bordes (al
seleccionarlo apareceránà tres botones: uno sirve para regular el grosor,
otro para seleccionar qué borrar, y una canillita para borrar un objeto entero.
Herramienta Mano (H) úsala para deslizarte a lo largo del escenario
(también puede utilizarse manteniendo presionada la barra espaciadora).à
Herramienta Zoom (M) es una lupa (manteniendo presionado Alt
“aleja”). Además de la lupaà puedes presionar Ctrl + “+” para “acercar” o Ctrl
+ “-“ para “alejar”.
Debajo de estas herramientas hay un “lapicito” que sirve para seleccionar el
color de borde, el alfa (transparencia) o si prefieres que el objeto no tenga
borde. A su lado hay un cubo de pintura para seleccionar el color de relleno,
el alfa o si prefieres que el objeto no tenga relleno.
Degradados y panel de Color
Si no tienes este panel en el espacio de trabajo ábrelo en el menú Ventana.
Clickea el botón de relleno y selecciona el pequeño rectángulo con el degradado
de blanco a negro. Verás que puedes modificar este degradado agregando puntos y
colores, moviéndolos, cambiándolos de color o eliminándolos (presionando Ctrl).
Una vez que te guste el resultado puedes modificar el degradado con la
herramienta Transformación de degradados (puedes girarlo, achicarlo, torcerlo,
etc).
Biblioteca
Si no tienes este panel en el espacio de trabajo ábrelo en el menú Ventana.
En la biblioteca se encuentran los símbolos y las imágenes, videos, sonidos o
lo que sea que importes para incorporar al escenario.
Para importar un archivo a la biblioteca debes ir al menú Archivo > Importar > Importar a biblioteca y
seguido de ello seleccionas el archivo. Para importar video debes elegir la
opción Importar video.
Para insertar un nuevo símbolo (que puede ser un Clip de película, Botón o
Gráfico) ve al menú Insertar > Nuevo símbolo,
o bien presiona Ctrl+F8. Dale un nombre, selecciona el tipo de símbolo y
clickea Aceptar. Vas a “entrar” automáticamente al símbolo creado, y ahora
puedes modificar dicho símbolo. Una vez que hayas terminado de modificar el
símbolo a tu gusto, vuelve a la Escena principal y para incorporar el símbolo
en el escenario ve a la biblioteca y arrástralo desde allí.
Clip de película / Movieclip /
“MC”
Puedes incorporar en él Interpolaciones de Movimiento (ya veremos más tarde qué
son), otros símbolos o lo que tú quieras.
Botón
Tienes en él cuatro estados: Reposo, que es
cuando no tiene “encima” al cursor; Sobre,
que es cuando el cursor está “encima” del botón; Presionado,
que es cuando el usuario mantiene presionado el botón izquierdo del ratón; por
último la Zona Activa, que en realidad no se
ve, allí puedes dibujar un rectángulo de cualquier color para indicar qué
partes del escenario pertenecen al botón.
Panel de Propiedades
Si no tienes este panel en el espacio de trabajo ábrelo en el menú Ventana, o
bien presionando Ctrl + F3.
Aquí puedes cambiar las propiedades de cualquier objeto, interpolación,
símbolo, relleno, borde o lo que sea. Puedes darles nombres de instancia a los
símbolos, lo cual te va a servir de mucho cuando tengas que programar con
actionscript; puedes agregar filtros a los textos y clips de película (ya sean
sombras, desenfocados, iluminados, bisel, etc.); puedes cambiar las propiedades
de color de los clips de película o botones (alfa, tinta, brillo, etc.); puedes
cambiar los tipos de letra, tamaños y colores de los textos; incluso puedes
agregar efectos a las interpolaciones de movimiento y forma.
Cómo cambiar las propiedades
del documento
En cualquier lugar vacío del escenario da click derecho + Propiedades del documento. Ahí puedes variar el
tamaño del “lienzo”, color de fondo, fps y unidad de regla.
Capas
Te permiten organizar los distintos “componentes” de tu película (fondo,
textos, animaciones, o lo que necesites).
Línea de tiempo
Interpolaciones
Se podría decir que llegamos a la parte más importante de esta guía. Acá se
juntan todos los otros conceptos para poder animar. Tenemos dos tipos
diferentes de interpolación: Interpolación de movimiento e interpolación de
forma. Son bastante diferentes, la primera sirve para “mover” (como su nombre
lo indica) símbolos, sean botones, MC o gráficos, y la segunda sirve para
cambiar color o forma de un objeto que no es un símbolo. Vamos a ver cada una
por separado.
Interpolación de movimiento
¿Qué es?
Una forma de animar objetos, los cuales deben ser Clips de película.
¿Qué varía del objeto?
Podemos variar el tamaño, posición en el escenario, color (mediante el panel de
propiedades) o filtros.
¿Cómo se aplica?
Primero que nada seleccionamos el objeto que queremos animar, y presionamos F8
para convertirlo en un Clip de Película. Seguido de eso insertamos un fotograma
clave en el fotograma que queramos (click derecho en el fotograma + “Insertar
fotograma clave”). En este fotograma hacemos las variaciones que queramos
hacerle al clip de película. Entre el fotograma 1 y el fotograma “x” donde se
encuentren las variaciones del clip, hacemos click derecho y seleccionamos la
opción “Crear interpolación clásica” (más tarde veremos la nueva interpolación
de movimiento para flash CS4 y CS5). Y ya está, podemos ver el resultado
presionando Ctrl + Enter para probar la película.
¿Qué pasa si yo quiero que pare la animación al terminar?
Para eso hace falta algo de actionscript básico. En una nueva capa, al final de
la animación insertamos un fotograma clave (F6), abrimos el panel de acciones
(si no está en el espacio de trabajo lo abrimos el menú ventana (o bien
presionando F9), y escribimos esto:
Código :
stop();
Con este sencillo código (compatible con actionscript 1.0, 2.0 y 3.0) ya
logramos que la película se detenga.
Guías de Movimiento
Si quieres que el clip siga un recorrido puedes utilizar las guías de
movimiento.
Para aplicar una guía, debes de seguir los mismos pasos que los que sigues para
aplicar una interpolación de movimiento clásica. Luego de aplicar la interpolación,
en una nueva capa dibuja con el lápiz, o con la herramienta de línea, el
recorrido que quieres que siga tu clip (debe ser una línea que tenga un extremo
“tocando” al clip en el fotograma 1 y el otro extremo “tocándolo” en el
fotograma “x” donde termina la interpolación). Selecciona la capa de la guía,
da click derecho y selecciona la opción “Guía”. Corrobora que la capa de abajo
(interpolación) sea modificada por la capa de arriba, si no lo es, arrástrala
hacia arriba.
Prueba la película con Ctrl + Enter.
Nueva Interpolación de
Movimiento
Esta interpolación apareció con el Adobe Flash CS4 y ahora perdura en el CS5.
No tiene muchas diferencias con el anterior, pero la manera de aplicarla es
distinta y las guías de movimiento se incluyen automáticamente en la misma
capa, y es más sencillo modificarlas.
Para aplicar la interpolación clásica hacía falta insertar un fotograma clave
de inicio y un fotograma clave de fin. Ahora nos ahorramos un paso, ya que sólo
debemos insertar el fotograma clave de inicio, dar click derecho al fotograma o
al clip, seleccionar Crear Interpolación de Movimiento y Flash automáticamente
inserta más fotogramas. Para que el clip de película se “mueva”, o sea que
tenga un cambio por el cual quieres aplicarle una interpolación, debes de ir al
último fotograma (o a cualquiera de los que abarque la interpolación) y mover o
cambiar las características del clip.
Qué pasa con las guías de movimiento. Ahora flash las incluye automáticamente
en la misma capa, de un color fluorescente, y es más sencillo manipularlas.
Ejercicio
- Abre un
nuevo documento.
- Dibuja
un cuadrado o un óvalo y conviértelo en símbolo con F8. Dale cualquier
nombre y selecciona de tipo clip de película.
- Dale
clic derecho al clip recién creado y selecciona la opción Crear
interpolación de movimiento (automáticamente Flash insertará más
fotogramas).
- Si
quieres prolongar o achicar la interpolación, simplemente ve al último
fotograma de la misma y verás que aparece un cursor diferente para variar
la duración.
- Ahora
ve al último fotograma de la interpolación y mueve el clip de película
hacia la derecha o hacia la izquierda y aumenta su tamaño (presiona Q).
- Vas a
ver que apareció una línea de puntos de un color fluorescente, esa es la
guía de movimiento y puedes manipularla fácilmente con el ratón.
- Pon un
stop en el último fotograma de una nueva capa.
- Prueba
la película con Ctrl+Enter
Interpolación de forma
¿Qué es?
Una forma de animar objetos, que no pueden ser símbolos, textos (para
aplicarles una interpolación de forma hay que separarlos con click derecho +
separar) u objetos agrupados (deben ser separados al igual que los textos).
¿Qué varía del objeto?
Puede variar el color, tamaño, posición y forma del objeto.
¿Cómo se aplica?
Dibujamos o incorporamos el objeto en el escenario. Insertamos un fotograma
clave en el fotograma que queramos (click derecho en el fotograma + “Insertar
fotograma clave”). En este fotograma hacemos las variaciones que queramos
hacerle al objeto. Entre el fotograma 1 y el fotograma “x” donde se encuentren
las variaciones del mismo, hacemos click derecho y seleccionamos la opción
“Crear interpolación de forma. Y ya está, podemos ver el resultado presionando
Ctrl + Enter para probar la película.
¿Qué pasa si yo quiero que pare la animación al terminar?
Utilizamos el código stop(); aprendido anteriormente.
Ejemplo de interpolaciones
Máscaras
Otra herramienta interesante del Flash son las máscaras. Las máscaras sirven
para mostrar sólo una determinada parte de lo que se encuentra en la capa
inferior. Si yo en una capa dibujo un rectángulo, en la capa “de abajo” tengo
una foto, y a la capa del rectángulo la defino como máscara, de la foto se va a
ver sólo la parte que sea abarcada por el rectángulo. El rectángulo no se va a
ver, sea del color que sea o tenga el alfa que tenga, sólo se va a ver una
parte de la foto. Para que entiendas bien pondré un ejemplo.
Supongamos que quieres hacer un sencillo efecto de lupa con una interpolación
de movimiento. Tienes el dibujo de la lupa animada (por ejemplo que va de un
lado a otro) en una capa, en otra tienes una imagen o un texto pequeño y en una
última capa tienes la misma imagen o texto pero más grande. ¿Cómo se hace para
lograr el efecto de lupa?
Vamos a ver...
Para conseguir el efecto debes tener el dibujo de una lupa en una capa. Esta
lupa la vas a animar para que parezca que alguien la está moviendo de un lado a
otro. En otra capa debes tener el círculo que funciona como lupa, es decir la
máscara. En otra capa vas a tener el dibujo grande, que será lo que se verá
sólo al pasar la lupa por encima. Y en una última capa vas a tener el dibujo
pequeño. Es decir que la estructura es la siguiente:
Dibuja la lupa en la capa del dibujo de la lupa, dibuja un círculo en la capa
de la lupa, dibuja, por ejemplo, una flor grande en la capa del dibujo grande y
por último, una flor chica en la capa del dibujo pequeño (copia la flor grande,
en la capa de la flor chica presiona Ctrl+Shift+V para pegarla en el mismo
lugar y achícala con la herramienta de transformación libre). Ahora aplícale
una interpolación de movimiento a las dos primeras capas (ten cuidado, la lupa
y el dibujo de la lupa deben moverse al mismo tiempo, en la misma dirección y
del mismo modo).
Ahora, si pruebas película con Ctrl+Enter no vas a ver el efecto que esperamos,
porque aún no aplicaste la máscara. Para aplicarla, dale click derecho a la
capa de la lupa y tilda la opción Máscara. Ahora sí,
puedes
probar película.