Cómo crear un botón en Flash CS3

Hola, no cabe duda que la semana pasó en un abrir y cerrar de ojos, siento como si hubiera sido ayer la última vez que posteé XD

Pero bueno, este fin, y siguiendo con lo de Flash, les traigo un tutorial para hacer botones de lo más fácil y sencillo… ya saben, no me gusta complicarme la vida más de lo necesario XD

Me hubiese gustado poder hacer los tutoriales como solía hacer en su tiempo los de vegas, con videos, pero lamentablemente mi micrófono ya no vive, y es que eso de escribirlo es más laborioso, pero ni modos, en cuanto tenga un poco de dinero comprare un nuevo mic, ya lo tengo decidido.

Bien, empecemos:

1.- Abrimos un nuevo archivo de Flash(Action Script 2.0)

2.- Damos un click en el fotograma 1 y enseguida nos aparece en nuestra barra de propiedades, la posibilidad de nombrar una etiqueta, entonces le ponemos el nombre de Inicio. Tan pronto como damos Enter, vemos que aparece una especie de banderita en el fotograma 1.

3.- Repetimos el paso anterior dando F6 en el fotograma 30 y etiquetamos con el nombre de Opción 1; y hacemos lo mismo en el fotograma 60, pero con el nombre de Opción 2.

Nota: Si nuestro botón requiere de más opciones, se pueden etiquetar tantas veces como se necesite.

4.- Enseguida apretamos Ctrl + F8 (para Windows) o Manzanita + F8 (para Mac) para poder crear nuestro botón. Al hacer esto, vemos que se nos abre la ventana para crear un Nuevo símbolo, al cual llamaremos Botón, y en donde dice Tipo, escogemos Botón también.

5.- Una nueva línea de tiempo se abre, y como podemos ver, trae algunas opciones que me detendré a explicar brevemente.

• Up (Reposo): es cuando el mouse no está colocado sobre nuestro botón o no se ha hecho click sobre él.
• Over (Sobre): es cuando el mouse está colocado sobre el botón, pero aún no se ha hecho click sobre él.
• Down (Presionado): lógicamente, es cuando haces click sobre el botón.
  Hit (Zona Activa): su mismo nombre lo indica, es cuando el botón está activo.

Una vez explicado esto, es lógico saber que los cambios que apliquemos en cada uno de estos, se reflejarán en nuestro botón en reposo, así como cuando pasemos el mouse encima de él y lo presionemos. En este caso, sólo nos vamos a enfocar en las tres primeras opciones.

6.- Para empezar, hacemos nuestro botón en la primera casilla, es decir la de Up. En mi caso, haré un botón súper sencillo y redondo. Ustedes pueden jugar con las formas y colores.

7.- Damos F6 en Over, y para que se noten más los cambios, lo único que haré es modificarle el relleno a mi botón, y lo mismo hacemos en Down. Ya saben, no me gusta complicarme XD

8.- Una vez que hayamos hecho todo lo anterior, nos vamos a Escena 1 y creamos una nueva capa con el nombre de Acciones. Y tan pronto tengamos nuestra capa, oprimimos F9 en caso de Windows, ó bien, Alt + F9 en caso de Mac. Como podemos ver, se abre una nueva ventana, la de Acciones.

9.- En el cuadro blanco que nos aparece, introduciremos el siguiente código: stop();       y cerramos la ventana.

P.d. Todo se escribe junto para que el comando tenga resultado. Si en todo caso, no pueden escribir, sólo basta con que desactiven la opción Scrip Assit.

10.- Ahora lo único que resta por hacer, es crear una nueva Capa con el nombre de Botón, y arrastrar a ella desde la Librería o Biblioteca, nuestro Botón que creamos. Recuerden que sólo es cuestión de arrastar y soltar.

11.- Para checar que nuestro botón esté funcionando bien, sólo basta con dar Ctrl + Enter, o Manzanita + Enter, y posicionar nuestro mouse sobre el botón e incluso presionarlo, y verán que cambia de color.

Aquí les dejo una pequeña muestra del mío, sólo que le agregué mi nombre XD. Si siguieron todos los pasos, todo irá como viento en popa.

Hasta la próxima.

 

Cómo crear un Movie Clip en Flash CS3

Hola, esta semana el tema a tratar será cómo crear un movie clip en flash. Hace poco comenzamos a utilizar este programa en clases y aunque es algo complicado (sobretodo para alguien como yo que nunca en la vida lo había usado), una vez que aprendes lo básico, lo demás es usar un poco tu creatividad.

Para quienes no lo saben, un movie clip, nos permitirá crear piezas de animación reutilizables, es decir, animaciones que necesitan tener ciertos movimientos repetitivos, sin necesidad de estar haciéndolos en cada uno de los fotogramas, pues solo basta con hacer una vez el movimiento para poder perpetuarlo hasta el final de cualquier animación, y por si fuera poco, tienen líneas temporales propias y por ello pueden actuar independientemente de los frames de la película principal. Ahora, para poder crear un movie clip sencillo, podemos seguir estos 11 pasos:

1.- Abrimos Flash CS3 o CS4, y oprimimos Flash File (Action Script 3.0)

2.- Checamos que la resolución de nuestro Nuevo documento sea la adecuada, en este caso nos quedaremos con la medida estándar que es de 550x400 pixeles.

3.- Luego oprimimos Ctrl + F8 (en caso de Windows) o Manzanita + F8 (en el caso de la Mac). Tan pronto como hacemos esto, vemos que se abre una nueva ventana que dice Crear nuevo símbolo, le ponemos nombre y oprimimos la opción que dice Movie Clip o Clip de película y damos en OK

4.- Como podemos ver, ahora nuestro espacio de trabajo ha cambiado un poquito, pues aparte de ver Escena 1, también aparece el Movie clip que acabamos de crear, cosa que no aparecía al principio. Esto significa que estamos dentro de ese movie clip y que éste pertenece a la Escena 1, también podemos notar que en la Librería o Biblioteca del programa también nos aparece el Movie clip. Ahora lo que hay que hacer es comenzar a dibujar o crear lo que queramos que tenga ese clip.

5.- En este caso como el ejemplo es de lo más sencillo, sólo utilizaré dos capas, pero si el dibujo lo amerita o se compone de varios elementos, tendrían que hacer cada uno de ellos en capas diferentes. Por tanto, antes de dibujar, en este ejemplo creamos una Capa y le ponemos Cuadrado.

Nota: La Capa tiene que estar en el Movie Clip, no en Escena, para saber que está siendo creada en el Movie Clip, sólo basta con ver que el Clip aparezca en nuestro espacio de trabajo, si no es así, damos doble click en el que aparece en la Biblioteca.

6.- Ahora viene lo más divertido y laborioso, dibujar. Asegúrense de dibujar en el fotograma en donde ustedes consideren que empezará su animación. En este caso lo haremos desde el Fotograma 1.

7.- Una vez conformes con el resultado, procedemos a hacer algunos cambios para que el movie clip valga la pena. Así que el paso siguiente es dar un F6 para añadir un fotograma clave donde cada uno considere bueno para que ocurra el cambio. Después nos ponemos en ese fotograma y comenzamos a modificar nuestra figura. En este ejemplo, sólo modificaré un poco los extremos y le cambiaré el color de relleno.

Nota: Lo ideal para darle más realce, sería modificar cada extremo en fotogramas diferentes, pero por cuestiones de tiempo, aplicaré los cambios al mismo tiempo.

8.- Ya que hayamos hecho los cambios que queramos, damos F5 justo en el fotograma que queramos que termine la animación.

Nota: No es necesario extenderse hasta el fotograma 1000, recuerden que la animación se repetirá una y otra vez, así que sólo basta con hacer los cambios una sola vez y ya.

9.- Como les dije que yo haría todo en dos capas, pues en este punto, repetiré todo lo anterior, sólo que ahora con un círculo. Lo ideal, sería poner esta nueva figura en un movie clip nuevo, pero como yo quiero ponerle en este mismo lo haré así, claro sabiendo, que si hago más chico el cuadro, también se hará más chico el círculo, pues ambos son del mismo movie clip y lo que afecte a uno afectará al otro.

10.- Ahora damos click en Escena 1 (no se preocupen si se borra lo que hicieron, no olviden que todo está en el movie clip). Y en la Biblioteca, damos un click a donde dice Cuadrado para seleccionarlo y manteniendo el botón izquierdo del mouse aplastado, lo arrastramos a “nuestro lienzo” blanco de la Escena 1, lo situamos donde queramos y soltamos para que quede nuestro movie ahora si quede a la vista.

11.- Ahora, lo único que resta es probarlo y comprobar que todo quedó como lo hicimos, para eso, sólo basta con oprimir Ctrl + Enter (para Windows) ó Manzanita + Enter (para MAC) y ¡Listo! El Movie clip está terminado. Si quieren ver cómo me quedó mi grandiosa obra de arte, pues sólo denle clic al video de youtube XD.

Por hoy, esto es todo…