Flash 101: Introducción a Flash

Siempre has visto páginas con animaciones espectaculares, y te preguntas ¿Cómo puedes lograr eso? Bueno aquí te voy a dar la base para comenzar a entender el programa Macromedia Flash MX.

Si es la primera vez que abres el programa veras, algo similar al gráfico de abajo:

Como puedes ver tiene un menú localizado en el top del programa (En windows). Este incluye File, Edit, View, Insert, Modify, Text, Control, Window y Help.

Por default flash tienen el Color Mixer, Color Swatches, Components y Anwser Panel en el lado derecho del programa, tienes el toolbox en el lado izquierdo. El timeline esta en el top de la pantalla. El tool de Property se encuentra casi al final del programa y la pantalla del medio se llama stage.
-El Stage blanco significa una nueva película. Cada vez que abras flash automáticamente este crea un documento nuevo usando los settings predestinados (más adelante aprenderás a modificar esto).

*Los documentos en flash normalmente son llamado películas (movies), porque flash fue creado originalmente como un programa de animación. Ya es claro que puede hacer otras cosas.

En los archivos creados en flash son .fla, estos son editables pro los usuarios. Pero los archivos que ves en paginas Web, .swf son versiones comprimidas de .fla y solo contiene la información para ser visto en un Flash Player.

Vamos a usar este ejemplo que encontré en unos de mis libros de flash para comenzar a enseñar lo que puede hacer, y después poco a poco en las otras lecciones vamos a ir aprendiendo hacer una web solo en flash.
2) Obteniendo Ayuda:

Cuando termines con todas estas lecciones, creo que todavía vas a tener ganas de aprender mas flash? Bueno tienes muchas formas:

A) Utilizando el Panel de Welcome:



Este aparece la primera vez que abras flash. Te da instrucciones en como hacer, ambientes en flash dependiendo tu objetivo.

También puedes abrir el panel de Ayuda (Help > Welcome), allí explorar las opciones que trae.

B) Utilizar el Panel de Lecciones:


Este panel contiene un número de lecciones que te pueden ayudar con lo estándar de flash (ayudar a comenzar). Puede resultar útil cruzar por este recurso cuando tengas problema con algún tema relacionado de los que menciona.

C) Usar el Help de Flash:


-Note: Usen F1 para para abrir el help.
Aquí se encuentro toda la información de flash. Puedes buscar en forma de páginas Web. Los archivos son divididos en tópicos o puedes usar el Search para hacer una búsqueda.

D) Usando El Centro de Soporte Flash (Flash Support Center):
Tienes internet :P, DUHHH!!! No estas aquí; bueno puedes utilizar la función Flash Support Center en el menú de Help para que te lleve a una pagina dedicada a dar información de Flash.

E) Explorando el Panel de Respuesta:


Es el panel que puedes ver al fondo derecho en el programa Flash, si no lo ves selecciona (Windows > Answers). Es muy importante ya que te puede brindar los últimos recursos en el mismo Flash. La información de este panel se actualiza con el internet.

» Settings:

1) Presiona Crtl+U ó (Edit>Preferences) esto tira la pantalla de abajo “Preferentes”:



-Lo primero que notan es los niveles de Undo (Undo Levels), si no saben, estos se usa para retroceder el trabaja si realizas algún error.
*Precaución: Si punes un número muy alto de Undo, tu pc puede comenzar a ponerse lenta, debido a que cada paso es grabado en tu memoria, mientras más undo más memoria ocupa.

-Ahora vez las opciones seleccionadas arriba. “Shift Select y ShowTooltips”

-Shift Select: te deja agregar un objeto manteniendo el botón de la tecla (Shift) presionado. Si no utilizas el (Shift) solo seleccionas el objeto.
Si lo quitas, solo seleccionando se agregan los objetos. (Más ejemplos después)
-Show Tooltips: te sale un tip cuando dejas de usar Mouse.

-Las no Seleccionadas:

-Disable PostScript: Por si tienes problemás imprimiendo en un Post Printer, pero te darás cuenta que te pone lenta la impresión.
-Disable Panel Docking: no dejara que los paneles no se pegaran uno de otro.
-Disable Timeline Docking: No deja que el timeline se pegue con ninguna ventana después de ser separada en ventanas.
-Spam Based Selection: te permite utilizar frames basado en Spam (ahora mismo no te interesa esto).


2) Dale un click al Tab de Edit:



Como todavía no hemos comenzado a dibujar, todas estas opciones van hacer un poco raras, pero después se adaptaran.

La Categoría Pen Tool: modifica la forma que los pen (lápices) dibujan.

-Show Pen Preview: cuando esta seleccionada, flash enseña el segmento de linea, antes de dibujar
-Show Solid Points: deseleccionado por default, este especifica la forma de la línea cuando estas usando los peno r subselection tools.
-Show Prices Cursors: si esta seleccionada, cuando estés usando los pen te va a tirar las lineas de las forma que se suponen que son.

La Categoría Vertical Text: para lo que vamos hacer no necesitamos, pero en el futuro talvez lo van a querer usar:

-Default Text Orientation: hacer el texto Vertical (como las Orientales)
-Right to left Text: el texto va a ir de derecha a izquierda en vez de ir de izquierda a derecha.
-No Kerning: cuando no esta seleccionado, ayuda a mejorar el espacio entre los fonts

La Categoría Drawing Settings: Especifica algunos comportamientos del dibujo en flash. Lo settings depende más de la resolución de tu pc que cualquier otra cosa.

-Connect Lines: Determina que tan cerca debe estar una linea de otra para conectaralas.
-Smooth Curves: Especifica que tan bien van a quedar las curvas que haces con el pen (lápiz)
-Recognize Lines: Especifica que tan bien debes ser dibujada una linea para considerarse una línea recta.
-Recognize Shape: Especifica que tan bien debe ser el dibujo para reconocerlo como una figura (circulo, cuadro, trapecio, etc)
-Click Accuracy: Especifica que tan cerca se debe de parecer a una figura para después cambiar su apariencia.

3) Ahora da le click a Warnings:



Como estas empezando es bueno que lo tengas todo seleccionado. Pero cuando ya tengas más dominio del programa puedes ir deseleccionando los que molestan mucho.

4) Ahora dale Ok para cambiar las configuraciones viejas por las nuevas.

» Paneles:

1) Cierren el panel de Colores y Respuestas (Color Swatches y Answers).



Ahora mismo ustedes no le van a dar uso a esos paneles y lo que van a estar haciendo es consumiendo espacio.
Los pueden cerrar dándole clic derecho al titulo del panel y después a Close Panel.
Si después lo necesitan, solo tienen que ir a (Windows>Color Swatches o Windows> Answers).

2) Elegir el Panel de Alineamiento (Align Panel):



Lo puedes abrir con (Ctrl. + K), solo para windows
O puedes ir a Windows>Align

Ahora la parte superior del menú (El Titulo), usando tu mouse, dale un clic y mantenlo presionado, luego como en windows, usan el drag and drop. Colócalo al lado Derecho y veras algo como el menú de abajo:

Esto es combinaciones de paneles.

3) Compilar paneles:



Solo tienes de darle un clic a la flecha al lado del menú y estos se minimizaran, de esta manera ahorraras espacio de pantalla.

4) Ahora guardar la forma de tu Panel:
Para asegurarte que tu flash se quede con esa apariencia, tienes que ir a (Windows > Save Panel Layout) te aparecer una ventanita como la de abajo:



Ponle el nombre que quieras y dale a ok.
Cuando abras a flash y le hayan cambiado ala apariencia, solo tienes que ir a (Windows > Panel Sets > Nombre de tu Panel) y listo; cool ¿verdad?

» Atajos por el Teclado:
Me imagino que ya te has dado cuenta que puedes utilizar muchos comandos por medio del teclado. Pero que tal si quieres cambiar esos atajos por uno que te recuerdes o que sean más familiares para ti.

1) Ve a (Edit > Keyboard Shortcuts) para abrir la ventana que aparece abajo:



Ahora veras al top de esta ventana alguna opciones que determinaran como vas a modificar los shortcuts. Si estas familiarizado con alguno shorcuts de otro programa puedes ir a Current set y seleccionar los que tiene.

2) Ahora dale a Duplicate Set para hacer tu propio set. Veras una Venta como la de abajo (pon el nombre que quieras).



Siempre es bueno tener un backup de set por si haces cualquier error. Por eso siempre es bueno hacer un duplicate al de Flash MX (como el que hicimos arriba).
*Por si no te diste cuenta, tú no puedes modificar el set de Flash MX, esta protegido contra todo.

3) Agregar Shortcut (+) y cuando te sale <empty> no tiene nada:
No creo que tenga que explicar esto.

4) Si modificaste algo, dale a Ok, para guardar los cambios.

» Modificación de las Propiedades del Documento:

Ahora que vamos a comenzar hacer la película, tienes que pensar en sus propiedades, como son su tamaño y fondo. Es bueno decidir las dimensiones de la película ahora, porque será difícil hacer los cambios cuando la tengas terminada.

Utilizando el “Property Inspector” puedes cambiar las dimensiones, fondo y frame rate y las reglas del ambiente.
Ahora te toca aprender hacer tales cosas:

1) Ve al panel de Property como el de abajo, y dale un clic al background box, cuando te salga la ventana introduce (#FFC055) - naranja:



Como vamos a usar el panel de property mucho, es bueno que le demos un vistazo para que aprendas un poco sobre el.
Como ya saben es el panel del fondo del programa, y se usa para modificar todo tipo de cosas. Si tienes algo seleccionado este te da sus propiedades, y si no tienes nada seleccionado te da las propiedades del documento, “es algo genial”.

* El background que escogí, si quieren lo pueden cambiar por otro. Puse ese porque en los otros artículos vamos a hacer una pagina web en flash y ese background era el que lleva la pagina (Es su decisión).

2) Dale al boton de Size en property para abrir las propiedades de la ventana:



Cuando tengas la ventana de abajo veras, que en esta podrás modificar los dimensiones (que se apeguen con el contenido, printer). También tienes las dimensiones de la película, el color de fondo y también el frame rate. Si le das a default todas las propiedades vuelven a lo normal (preestablecido por flash).

3) Poner el Height (altura) en 600 y dejar el ancho en 400:
Esta es la dimensión de la película que vamos hacer.

4) Poner los Settings como Default:
Si vas a hacer más películas con estas propiedades le puedes dar al botón “Make Default” y así no vas a tener que estar cambiando propiedades.

5) Ahora solo guarda el archivo (File > Save), como en la ventana de abajo:

» Probando la Película:

Como ya sabemos, guardamos los archivos flash en .fla y lo publicamos en .swf, ahora vamos a publicar esta pequeña película. Cuando la publiques este hará un temp file .swf de la película.

Utilizando el “Property Inspector” puedes cambiar las dimensiones, fondo y frame rate y las reglas del ambiente.
Ahora te toca aprender hacer tales cosas:

1) Probar la película, solo tienes que darle (Control > Test Movie):



Cuando hagas esto te va a salir otra venta, que vas a ver solo el fondo; esto es el test. Después la puedes cerrar.