Curso muy básico y rápido de Flash

De Neo X Saibot
Editado por DarkisX

INTERFACE

Durante el transcurso de este tutorial vamos a ver cada uno de estos elementos en detalle. Comenzaremos con la barra de herramientas, que probablemente sea la que más vas a utilizar al trabajar con el Flash.

La barra de herramientas

•  Puntero
Es el que se utiliza cuando no estás usando ninguna de las otras herramientas. Sirve para seleccionar objetos individuales, frames y múltiples objetos.
•  Línea
Con esta herramienta puedes dibujar líneas rectas. Si al usarla presionas la tecla "Control", te permite girar el ángulo de la línea en intervalos de 45 grados.
•  Lazo
Esta es una herramienta que te permite crear un área de selección. Todos los elementos que se encuentren en dicha área quedarán seleccionados.
•  Lapicera
Para crear líneas rectas, curvas y formas cerradas.
•  Texto
Te permite insertar texto.
•  Círculo
Para crear figuras ovaladas. Si presionas la tecla "Shift" dibuja un círculo.
•  Cuadrado
Herramienta para la creación de rectángulos. Si presionas la tecla "Shift" dibuja un cuadrado.
•  Lápiz
Te permite dibujar "a mano alzada".
•  Pincel
La herramienta pincel no es muy diferente a la del lápiz, pero te permite crear objetos con mayor densidad y, si estás con algo de paciencia, es útil para crear escritura caligráfica.
•  Botella de tinta
Se utiliza para aplicar formato a los bordes de las formas.
•  Balde
Te permite cambiar el relleno de los objetos.
•  Gotero
Te permite seleccionar las propiedades de las líneas o del relleno de un objeto para aplicárselas a otro objeto.
•  Borrador
Lo puedes usar para borrar.

Existen además algunos elementos más dentro de la barra de herramientas, pero los explicaremos más adelante, a medida que usemos las herramientas que vimos hasta ahora.

DIBUJANDO CON FLASH

Dibujar en Flash es muy diferente respecto de las otras herramientas gráficas. Así que antes de contarte como se hace, vamos a tratar de entender la diferencia. Cuando dibujas una línea en Flash, esta se divide en dos partes. Mover, cambiar la forma y seleccionar cada una de esas partes por separado.
Además, una línea dibujada a través de otra, actúa como un cortante, separando la otra línea en dos partes, que pueden ser tratadas ahora como objetos individuales.

Veamos entonces como se dibuja en Flash.
•  Usando el lápiz
Esta herramienta puede usarse para dibujar líneas y formas. El beneficio extra que te ofrece el Flash, es que a esos dibujos puedes aplicarle un "suavizador" o un "enderezador".
Para dibujar con el lápiz, selecciona la herramienta de la barra de herramientas.
La opción de enderezar ("straighten") te permite dibujar líneas rectas y convertir tus dibujos en formas Geométricas. La opción de suavizar ("smooth"), se utiliza para dibujar líneas curvas. Finalmente, la opción tinta ("Ink"), es para dibujar líneas "a mano alzada".

Una vez seleccionada la herramienta Lápiz, y luego de elegir el tipo de línea que quieres, simplemente dibuja sobre el área de trabajo haciendo click y arrastrando el puntero del Mouse.

Dibujando líneas, rectángulos y óvalos.

Esto se hace de manera muy similar a la anterior, salvo que cuando arrastras el puntero del Mouse sobre el área de trabajo, obtienes el contorno de la figura. El Flash automáticamente dibuja y rellena los rectángulos y óvalos. Estos atributos (contorno y relleno) pueden modificarse antes de dibujar las figuras usando los modificadores que aparecen al seleccionar alguna de estas herramientas. Además, para el rectángulo tienes una opción más, que te permite redondear las esquinas.
Para dibujar usando estas herramientas, primero selecciona la que quieras. Elegí los atributos para contorno y línea (sólo para rectángulo y óvalo). Si elegiste rectángulo, selecciona la curvatura de las esquinas (si quieres que sean curvas). Haz click y arrastra el puntero del Mouse en el área de trabajo.
Si no ves las opciones de línea, haz click en "Window", mueve el puntero hasta "Panels" y selecciona "Stroke".

Nota:
Si mantienes presionada la tecla Mayúsculas ("Shift"), vas a poder crear círculos o cuadrados perfectos.
Si presionas las teclas de cursor (arriba o abajo) mientras dibujas un rectángulo, puedes ajustar el radio de las esquinas.

Usando la herramienta Pincel

Esta opción te permite pintar como si estuvieras usando un pincel. Hace falta un poco de práctica para manejarla bien, pero de todas formas es muy interesante.
En fin, veamos como se utiliza:
Primero, selecciona el pincel de la barra de herramientas:
Luego elige el tipo de pincel y el lugar a pintar en la sección modificadores. Veamos esto en detalle:
Lo primero que vamos a elegir es donde vamos a pintar. Para eso usamos el modificador que vemos en la imagen de la derecha.
Las opciones son las siguientes:

1) Paint Normal: Dibuja sobre el área de trabajo sin "respetar" líneas, figuras u objetos.
2) Paint Fills: Sólo pinta áreas de relleno.
3) Paint Behind: Pinta detrás de los elementos ya dibujados.
4) Paint Selection: Pinta sólo lo seleccionado.
5) Paint Inside: Pinta dentro de los objetos por los que pasamos el cursor (Tenemos que arrancar pintando dentro del objeto).

Posibles Resultados

La primera ventana desplegable de la imagen superior define el ancho del pincel y la segunda, la forma del mismo.

Guía de referencia rápida
Para dibujar con el lápiz:
1) Seleccionar la herramienta lápiz.
2) Elegir la modalidad de dibujo.
3) "Straighten" para líneas rectas.
4) "Smooth" para líneas curvas y suaves.
5) "Ink" para mano alzada.
6) Arrastrar el cursor sobre el área de trabajo.

Para dibujar una figura o una línea:
1) Seleccionar la herramienta necesaria (Línea, Cuadrado o Círculo).
2) Elegir los atributos para línea y relleno (menos en la herramienta "línea").
3) Para el rectángulo, especificar el ángulo de las esquinas.
4) Click y arrastrar sobre el área de trabajo.

Para dibujar con el pincel:
1) Seleccionar la herramienta Pincel.
2) Elegir la modalidad (Normal, Behind, Fills, Selection, Inside).
3) Elegir forma de pincel.
4) Arrastrar y soltar el cursor sobre el área de trabajo.

HERRAMIENTA DE TEXTO

Agregar texto con las características predeterminadas.
Para esto, selecciona la herramienta de texto y luego haz un click sobre el área de trabajo, donde quieras insertar el texto.
Al seleccionar la herramienta de texto automáticamente el panel de propiedades cambia para poder modificar la tipografía, color, alineación, espacio entre líneas y caracteres.

ALINEACION: pisa la combinación de teclas "control K" para abrir la opción de alineación

CAPAS

Las capas (Layers) son simplemente hojas transparentes que se ubican una sobre otra. Estas capas pueden ser ubicadas y movidas en el área de trabajo. Las capas te permiten organizar tus trabajos en Flash y también te dan la posibilidad de afectar a uno o más objetos sin afectar a los demás.
Cuando se abre un nuevo trabajo en Flash, éste contiene una sola capa:

La cantidad de capas no afecta el tamaño del archivo final. El número de capas que puedes crear está limitado sólo por la memoria de tu computadora.
Es muy práctico colocar cada objeto en su propia capa, así como también crear capas para las acciones y los sonidos.
Esto facilitará tu trabajo a la hora de encontrar y editar diferentes aspectos de tu archivo.

Para agregar una capa, haz click en el menú "Insert" "Timeline" "Layer".

Vas a ver la capa "layer 2" justo arriba de "layer 1".
Otra forma es hacer click sobre la pequeña página en blanco con un signo más ("+").
Para borrar una capa, sólo hay que seleccionarla haciendo un click sobre la misma y luego un click sobre la papelera.

ANIMACIÓN BASICA

Vamos a ver una animación sencilla, pero que es la base para cualquier tipo de animación que se quiera hacer con este programa.
Para poder entender como funciona una animación, vamos a explicar primero que es la línea de tiempo ("Timeline"), elemento fundamental para poder hacer las animaciones.

La línea de tiempo está compuesta por dos partes fundamentales. Los cuadros ("frames"), que se distribuyen horizontalmente y las capas, que lo hacen verticalmente. Además tiene una especie de señalador, que nos indica en que cuadro estamos. Normalmente, este señalador se mueve de un cuadro a otro y así lo hace hasta llegar al último cuadro de la película, excepto cuando utilizamos alguna acción que le indica que "salte" a algún cuadro en particular (hacia adelante o hacia atrás).
Los cuadros, de los que hablamos recién, pertenecen básicamente a tres tipos: cuadros normales, cuadros clave y cuadros clave vacíos. Para crear cuadros, hacemos click con el Mouse en la línea de tiempo, en el cuadro hasta el cual queremos insertar cuadros nuevos y presionamos la tecla "F5". Para crear cuadros clave, hacemos lo mismo, pero utilizamos la tecla "F6".
Los que nos interesan en este momento son los cuadros clave ("keyframe"), pues es allí donde los cambios ocurren en una animación.

Son cinco sencillos pasos, veamos:
1) Selecciona alguna herramienta de dibujo (Lápiz, óvalo, rectángulo o línea) y dibuja algo en el área de trabajo.
2) En el cuadro número 20, crea un cuadro clave nuevo (F6) y mueve la figura creada al lugar donde quieras que se traslade:

 

2) Selecciona la capa que quieres animar (haciendo un click sobre el nombre) y luego un click derecho sobre los cuadros de la capa y elige "Create Motion Tween":
3) Selecciona la capa que quieres animar (haciendo un click sobre el nombre) y luego un click derecho sobre los cuadros de la capa y elige "Create Motion Tween".
4) ¡Listo para ver tu primer animación!

EFECTO MORPHING

Al crear una animación de formas, es posible crear un efecto parecido al del morphing (un objeto se transforma en otro).
El Flash no sólo puede afectar la forma de un objeto, sino también su posición y colores.
Para aplicarle una animación (tween) a una forma, son pocos los pasos a seguir:

1) Haz click sobre el primer cuadro (frame) de la capa donde quieres poner la animación.
2) Dibuja la primera forma.
3) Haz click en un frame posterior (ej: 25) y transfórmalo en un keyframe (F6).
4) Elimina la forma dibujada de ese frame y dibuja la forma final.
5) Haz click en el primer frame y en propiedades "Frame" selecciona "shape" del menú desplegable "Tweening".
6) Presionando "CTRL + ENTER" podrás previsualizar el trabajo.

Tip: Puedes probar los diferentes resultados que se obtienen al modificar las opciones de la animación en el panel "frame". Por ejemplo, la opción "easing" maneja los tiempos de la animación, cuanto más alto es el número, más rápido va a convertirse la figura.

PUBLICACION:

Para incorporar un archivo hecho en Flash a una página Web sigue los siguientes pasos

1) Abre el Flash y Eliges File > Open, para abrir el archivo que quieres publicar.
2) Elige File > Export Movie.
3) Dale un nombre (loquesea.swf) y elige donde quieres guardarlo. Haz click en "OK".
4) Abrí la página Web donde quieres insertarlo y agrégale el siguiente código:

<object width="550" height="400">

<param name="movie" value="archivofinal.swf">

<embed src="loquesea.swf" width="550" height="400">

</embed>

</object>

Nota: Este es el código mínimo para poder insertar un SWF dentro de una página. Si la persona que ve esta página no tiene el plugin del Flash, en lugar del SWF va a ver un icono idéntico al que aparece cuando falta una imagen.
En el código anterior, parece que estamos duplicando datos, pero en realidad lo que sucede es que estamos usando el código necesario para que funcione tanto en Microsoft Internet Explorer como en Netscape Navigator.

( <OBJECT> es para el Explorer y <EMBED> para el Navigator).

Con Flash es más fácil

Como ya dijimos, el anterior es el código mínimo para que funcione, pero si quieres optimizarlo, es conveniente dejar que el mismo Flash se ocupe de hacerlo, porque el programa le agrega un par de atributos que hacen que los usuarios puedan bajar el plugin si no lo tienen instalado. Estos son:

Classid

Es un atributo de la etiqueta <OBJECT> que le dice al Internet Explorer que busque el plugin de ActiveX si no está instalado (lo baja de Macromedia).

Pluginspage

Es un atributo de la etiqueta <EMBED> que muestra un enlace a la página de downloads de Shockwave si el plugin no está instalado.

Para que el Flash genere el código completo, sigue los siguientes pasos

1) Elege File > Publish. El flash va a crear las etiquetas <OBJECT> , <PARAM> y <EMBED> por ti, y también les va a agregar los atributos classid y pluginspage.

2) Abre la página que generó el Flash y del código fuente copia desde <OBJECT> hasta </OBJECT> (inclusive) y pegalo dentro de la página en la que quieres que aparezca el SWF.

3) Asegúrate que el archivo SWF está en el mismo directorio que la página y mírala desde el navegador. Si necesitas poner el SWF en otro lado, indícaselo a la página poniendo la ruta de acceso completa todas las veces que aparece el nombre del archivo (ej: <param name="movie" value="../flash/archivofinal.swf"> ).

Otra opción para publicar es la combinación de teclas " CONTROL" "SHIFT" "F12" y este abre un panel de publicación, el cual tenemos otros formatos para publicar como un ejecutable de Windows, y para generar el código html.

Licencia de NeoXSaibot:
Éste manual puede ser distribuido-regalado-copiado libremente sin ningún problema siempre y cuando sea totalmente gratis.