Crear una botonera en Flash

24 de abril de 2012
Valoración del artículo:
Aquí os dejamos un tutorial donde os explicamos una manera sencilla para crear una botonera con Flash
Atención: Contenido exclusivo de DesarrolloMultimedia.es. No reproducir. Copyright.

Abrimos el programa Flash y crearemos un nuevo clip de película clickando sobre Insertar/Nuevo Símbolo/Clip de Película, a la que llamaremos Botonera.



En ella crearemos dos capas (una para el botón físico y otra para su texto) por cada botón que crearemos en este clip (en nuestro caso, seis capas para los botones). No olvidéis crear también una capa para el botón principal y otra para las acciones. En nuestro caso, hemos añadido otra exclusivamente para el stop, donde la insertaréis dicha acción.



En la capa Menú (cabecera de la botonera) creamos un círculo grande, con la herramienta Óvalo, dentro de él, escribiremos el texto, con su correspondiente herramienta. Este botón estará fijo, pero será interactivo con el resto, es decir, pulsaremos sobre el y aparecerán el resto de los botones que componen la botonera.



En la capa de las acciones, hemos creado un cuadrado sobre el círculo que acabamos de crear.



Convertiremos éste en un botón, pulsando con el botón derecho del ratón, indicando sobre la opción Convertir Símbolo, a botón.



Ahora, clickamos dos veces sobre él e introduciremos tres fotogramas claves en los estados reposo, sobre y zona activa, podemos hacerlo pulsando F6.



Si clickamos de nuevo dos veces, volveremos al estado anterior e indicaremos en el cuadro de propiedades Color Alfa.



En la misma figura, iremos a la pestaña acciones y le insertaremos este código:

on (release) {

gotoAndPlay(2);

}

Ya tenemos nuestro botón principal interactivo. Ahora, pasaremos a explicar el resto.



En una nueva capa, repetiremos el proceso de crear un botón con la Herramienta Óvalo, y en otra le introduciremos un texto que amoldaremos al tamaño de la figura.



El proceso es idéntico, salvo por la diferencia del tamaño y por la interpolación de movimiento que le insertaremos a continuación. En la capa del botón que queremos animar, crearemos un fotograma clave, en el fotograma dos (quedando vacío el fotograma 1) en las capas de texto 1 y botón 1.



Aquí lo empequeñeceremos hasta que apenas se vea, tanto el círculo como el texto de su interior.



A continuación, crearemos otro fotograma clave en el fotograma 7, donde agrandaremos el círculo hasta que quede a un tamaño legible.



Cuando ya tengáis los dos fotogramas claves, debéis crear una interpolación de movimiento. Esto se consigue pulsando en el botón derecho del ratón y seleccionando crear interpolación de movimiento.



Para que después el botón vuelva a su estado original, debéis crear otro fotograma clave en el fotograma 12, donde copiaréis el primer fotograma clave que tenéis en la capa y lo pegaréis allí. No olvidéis que la capa menú tiene que tener un fotograma clave en el fotograma 12.



Nosotros hemos hecho tres botones y el procedimiento es el mismo para todos. Podéis hacerles los cambios que preciséis.



Ahora os vamos a explicar como linkear una URL para que podamos acceder a la página desde nuestro botón. Para ello, debemos crear una nueva capa, que en nuestro caso hemos llamado BTN URL 1, y la hemos enlazado con una página web. Nos colocamos en el fotograma 7 e insertamos un fotograma clave que será donde demos las órdenes.



El comando introducido en la pestaña de acciones es:

on (release) {

getURL(“http://www.desarrollomultimedia.es”);

}

No olvidéis introducir la dirección web entre comillas, dentro de los paréntesis.

Cuando guardéis y publiquéis el documento podréis ver si vuestra botonera funciona correctamente, pulsando Control+Enter.

Aquí os dejamos el ejemplo del proyecto:



Podréis descargar las fuentes del proyecto desde este enlace.

Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos
interesantes que se hayan enviado recientemente.


Se han encontrado 3 comentarios sin revisar




El autor
Soledad Rodríguez Esperanza
Dpto. Comunicación Insight Creativos S.L.
http://www.insightcreativos.es
Guía
Categorías

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...