Diseño en Español - Curso de Flash MX - Cursos y Manuales Gratuitos

Principal | Buscar | Contacto | Mapa |

Curso de Flash MX

La interfaz del Flash

Dibujando con Flash

Insertar y modificar texto

Creación de capas

Animación básica

Morphing

Publicá tus archivos de Flash

Partamos de la base que ya tenés el Flash instalado, si no es así, te recomiendo que lo hagas, porque sino este curso no te va a resultar muy útil. Para instalarlo, si aún no lo compraste, podés bajarlo completo desde el sitio de Macromedia (www.macromedia.com). La versión que está disponible allí es la completa, pero con la limitación que a los treinta días deja de funcionar si no comprás el producto.
Muy bien, ahora que nos aseguramos que tenés el software funcionando, vayamos a la pantalla que nos presenta el flash inicialmente:

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 podés 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, cuvas y formas cerradas.

Texto
Te permite insertar texto. Obvio ¿no?

Círculo
Para crear figuras ovaladas. Si presionás la tecla "Shift" dibuja un círculo.

Cuadrado
Herramienta para la creación de rectángulos. Si presionás 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 podés usar para... en fin, creo que se explica solo.

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.

Dibujar en Flash es muy diferente respecto de las otras herramientas gráficas. Asi que antes de contarte como se hace, vamos a tratar de entender la diferencia. Cuando dibujás una línea en Flash, esta se divide en dos partes. Podés 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 lineas y formas. El beneficio extra que te ofrece el Flash, es que a esos dibujos podés aplicarle un "suavizador" o un "enderezador".
Para dibujar con el lápiz, seleccioná 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 querés, simplemente dibujá 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 arrastrás el puntero del mouse sobre el área de trabajo, obtenés 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 tenés una opción más, que te permite redondear las esquinas.

Para dibujar usando estas herramientas, primero seleccioná la que quieras. Elegí los atributos para contorno y línea (sólo para rectángulo y óvalo). Si elegiste rectángulo, seleccioná la curvatura de las esquinas (si querés que sean curvas). Hacé click y arrastrá el puntero del mouse en el área de trabajo.
Si no ves las opciones de línea, hacé click en "Window", mové el puntero hasta "Panels" y seleccioná "Stroke".

Nota:
Si mantenés presionada la tecla Mayúsculas ("Shift"), vas a poder crear circulos o cuadrados perfectos.

Si presionas las teclas de cursor (arriba o abajo) mientras dibujás un rectángulo, podés ajustar el radio de las esquinas.

ssss

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, seleccioná el pincel de la barra de herramientas:

Luego elegí 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).

Veamos los posibles resultados:

Luego elegimos el grosor del pincel y el corte del mismo:

La primer 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 lineas 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 "linea")
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.

Agregando texto
Los archivos de Flash no son sólo una forma bonita; también es posible agregarles texto. En Flash, se puede ajustar la tipografía, el tamaño, el espaciado, el color y el alineado del texto tal como en cualquier procesador de texto. También podés modificarlo como lo hacés en Photoshop, con opciones de rotación, inversión y transformación. También podés modificar caracter por caracter, modificando su forma para lograr efectos geniales de transformación de texto.

Agregar texto con las características predeterminadas.
Para esto, seleccioná la herramienta de texto y luego
hacé un click sobre el área de trabajo, donde quieras
insertar el texto.

Si no podés ver la ventana de modificadores del texto,
hacé click en "Windows -> Panels -> Character"
o presioná "CTRL+T".
Desde esta ventana, vas a poder modificar la tipografía
(tipo de letra, negrita, itálica), el interletrado, el color y
la URL de destino.

Modificando los caracteres
Si lo que querés es cambiar la forma de las letras, tenés que hacer lo siguiente:

1) Escribí el texto que quieras como lo explicamos al principio de
este capítulo.

2) Seleccionalo con la herramienta de selección
primaria "

".

3) En el menú "Modify", seleccioná "Break Apart". Eso hace que
cada letra del texto sea tomada como un objeto individual. Ojo que cuando hacés esto, el texto ya no es más considerado como tal por
el Flash, por lo que luego de hacerle modificaciones ya no podrás
editar el contenido del mismo.

4) Acercá el puntero del mouse a las letras y cuando veas que toma
una forma diferente (como un ángulo o como una pequeña curva)
hacé click y arrastrá el mouse.

Alineación
Para alinear el texto, tenés que utilizar alguna de las opciones de la ventana "Párrafo" (Si no la ves, hacé click en "window -> panels -> paragraph" o presioná "CTRL+SHIFT+T").

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 podés
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, hacé click en el menú "Insert" y elegí la opción "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 el tachito de basura.

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 asi 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, veámos:
1) Seleccioná alguna herramienta de dibujo (Lápiz, óvalo, rectángulo o línea) y dibujá algo en el área de trabajo.
2) En el cuadro número 20, creá un cuadro clave nuevo (F6) y mové la figura creada al lugar donde quieras que se traslade:

3) Seleccioná la capa que querés animar (haciendo un click sobre el nombre) y luego un click derecho sobre los cuadros de la capa y elegí "Create Motion Tween":

3) Seleccioná la capa que querés animar (haciendo un click sobre el nombre) y luego un click derecho sobre los cuadros de la capa y elegí "Create Motion Tween"
4) Listo para ver tu primer animación !!!!

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) Hacé click sobre el primer cuadro (frame) de la capa donde querés poner la animación.

2) Dibujá la primera forma.

3) Hacé click en un frame posterior (ej: 25) y transformalo en un keyframe (F6).

4) Eliminá la forma dibujada de ese frame y dibujá la forma final.

5) Hacé click en el primer frame y en el panel "Frame" (CTRL + F) seleccioná "shape" del menú desplegable "Tweening".

6) Presionando "CTRL + ENTER" podrás previsualizar el trabajo.

Tip: Podés 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.

Para incorporar un archivo hecho en Flash a una página web seguí los siguientes pasos

1) Abrí el Flash y Elegí File -> Open, para abrir el archivo que querés publicar.
2) Elegí File -> Export Movie.
3) Dale un nombre (loquesea.swf) y elegí donde querés guardarlo. Hacé click en "OK".
4) Abrí la página web donde querés insertarlo y agregale el siguiente código:

<object width="550" height="400">
<param name="movie" value="loquesea.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 plug-in del Flash, en lugar del SWF va a ver un ícono idéntico al que aparece cuando falta una imágen.

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 querés 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 plug-in si no lo tienen instalado. Esto son:

Classid
Es un atributo de la etiqueta <OBJECT> que le dice al Internet Explorer que busque el plug-in 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 plug-in no está instalado.

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

1) Elegí File -> Publish. El flash va a crear las etiquetas <OBJECT>, <PARAM> y <EMBED> por vos, y también les va a agregar los atributos classid y pluginspage.
2) Abrí la página que generó el Flash y del código fuente compiá desde <OBJECT> hasta </OBJECT> (inclusive) y pegalo dentro de la página en la que querés que aparezca el SWF.
3) Asegurate que el archivo SWF está en el mismo directorio que la página y mirala desde el navegador. Si necesitás poner el SWF en otro lado, indicáselo 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/loquesea.swf">).