M�todos Avanzados / Flash Shockwave

Flash Shockwave

Muchos de los programas que utilizamos para ilustrar las t�cnicas del Web fueron libres de costos o compartidos. Esto se hizo de manera deliberada para ilustrar que no tenemos que usar programa comerciales costosos para desarrollar web educacionales  (pero m�s sofisticado sea el programa comercial puede ayudarte en el desarrollo con m�s eficiencia y calidad de trabajo). En el presente caso hicimos una excepci�n y discutimos parte del programa comecial, Flash 4  de Macromedia, por que hay libres de costos o compartidos que pudiera competir por ser tan sof�stico  o menos con descuento educativo), y al presente puedes bajarlo gratis por 30 d�as de prueba de  http://www.macromedia.com.

Nota que "pegarse" para usar Flash es gratis (lo puedes bajar de  Macromedia como te indicamos anteriormente) . El program de Flash 4  para producir pel�culas Flash es un producto comercial.

Te mostraremos lo justo para ilustrar el poder de este  programa. Espec�ficamente, te ense�aremos como hacer animaci�n b�sica, como hacer un bot�n de control de animaci�n y como exportar y embaldosar la animaci�n en la p�gina del Web como Shockwave file.  Esto ser� suficiente para sugerir el uso que  Flash Shockwave puede hacer en el desarrollo de tu p�gina o Web. Asumiremos que tienes instalado en tu m�quina Flash 4 and the Flash 4  y que estas familiarizado con herramientas b�sicas de dibujo que tiene la mayor�a de los programas de computadoras ("arrow selection tool, rectangle drawing tool, . . .").

La Interfase de  Flash 4

La mayor interfase para el programa se ilustra en la imagen que se presenta a continuaci�n. Hemos marcados una serie de caracter�sticas que utilizaremos en los pr�ximos ejemplos. Referi�rete a las "ayudas" en l�nea (bajo "Help" en el men� principal) para una discusi�n m�s exhautiva  de otra serie de aspectos que no discutiremos en esta corta introducci�n.


Creando un S�mbolo para Animar

Abre  Flash 4. Primero establece el tama�o del " stage",  el color de fondo , escogiendo "Modify" > "Movie". En la caja resultante, selecciona 300 para el ancho y 200 para la altura y  selecciona otro color que no sea blanco ( por ejemplos gris)  para el color de fondo.

Utiliza la herramienta de dibujo de rect�ngulo ("rectangle drawing tool ") (observa la imagen que te presentamos) y dibuja una peque�a caja y si no esta rellena utiliza la herramienta de pintar ("paint bucket tool") para rellenerla de color.  Selecciona  el contorno ("outline") de la caja con la herramienta de la flecha y b�rrala, dejando solamente el relleno del interior. Vamos a hacer el movimiento tween en esta caja, que significa que haremos que la computadora anima autom�ticamente entre dos im�gines dibujadas en el marco. Flash requiere que cualquier objeto que haga este movimiento esten en su mismo nivel, y esto es un s�mbolo.  Estes seguro que no hallas puesto nada m�s que el  rect�ngulo en ese mismo nivel en el  (el s�mbolo de un lapiz indica el nivel que haz seleccionado; por ahora, deben estar en el un nivel en el timeline). Convierte el rect�ngulo que dibujaste a un s�mbolo, seleccion�ndolo de la herramienta de la flecha (escoges "Insert" > "Convert to a Symbol" del men�). En la caja resultante, escoge "Graphic" para el tipo de s�mbolo y dale un nombre (el que tu quieras). Un peque�o s�mbolo de suma "+" aparecer� en el centro del rect�ngulo, indicando el s�mbolo gr�fico.

Debes grabar cualquier trabajo de computadora de manera regular. por ello es bueno que grabes el trabajo que haz hechos. Escoge  "File" > "Save".  Escoge el directorio y el nombre  ( Flash graba con la extensi�n .fla).

Insertando Marcos en el Timeline

Ahora haremos que la caja se mueva de un punto a otro. Para hacer esto, necesitamos insertar algunos marcos en el "timeline" donde la animaci�n tendr� lugar. Ve al "timeline" y en el nivel que contiene el s�mbolo (debe haber un solo nivel si no haz a�adido otros), da un click izquierdo con el mouse en el mismo marco y mu�vete sobre el n�mero de marcos que quieres animar (sobre 50 ser�a un buen n�mero para este ejemplo). Los marcos seleccionados deber�n estar oscuros y se mantendr�n as� hasta que dejes de oprimir el mouse . Ahora, coloca el mouse en �ltimo marco seleccionado, click de la derecha,  y en la caja resultante selecciona  "Insert Frame". El marco seleccionado  debe tornarse gris, indicando que estos marcos estan activos. Sin embargo,  s�lo el primer marco deber� tener un punto en el, que es un  key frame.  La distinci�n entre estos marcos que son  key frames y aquellos que no es importante en lo que sigue.