Material necesario para empezar a trabajar:

       Macromedia Flash MX
      
    
         Autora del tutorial: Lilian´s Design
     


Realización:

En este ejercicio estudiaremos:

  • Creación de un botón a partir de un bitmap

Nota: Este tutorial complementa un poco el anterior. Es otra forma de confeccionar nuestros botones usando recursos que bien hemos diseñado nosotros mismos en otros programas de diseño, o bien los hemos recogido de la red. En esta ocasión voy a utilizar un gif muy simpático de los que solemos usar en MSN. Lo voy a convertir en un botón y en estado de reposo aparecerá como apagadito, en estado sobre lucirá la imagen normal dando la sensación de iluminación y en estado presionado le aplicaré un cambio de color para que parezca que se ha quedado fritito por el sol al rojo vivo.

 


Lo primero que haremos será importar el archivo a la biblioteca, yo he usado un icono con extensión GIF y lo buscare entre mis carpetas, para ello Archivo - Importar - Importar a biblioteca.

Una vez lo tengo en la biblioteca puedo ver que lo ha importado como un bitmap o mapa de bits. Si le doy a propiedades con el botón derecho del ratón, esto es lo que me dirá:

 

Podemos usar dos formatos de compresión en la imagen. Si usamos el formato JPEG comprimirá más nuestra imagen pero en contrapartida perderemos calidad en su visualización. Con el formato PNG tendremos toda la calidad original de la imagen. Yo usare PNG.

Perfecto, ahora vamos a la biblioteca de objetos y vamos a crear un nuevo símbolo. En el tutorial anterior ya hemos aprendido a hacerlo así que hay pasos que omitiré el ilustrarlos para afianzar conocimientos ¿de acuerdo?

En el estado de reposo vamos a insertar el bitmap que previamente hemos importado (recuerda alinearlo) y lo vamos a convertir en un símbolo gráfico.

En el inspector de propiedades de nuestro nuevo símbolo gráfico vemos algunas cualidades que nos vendrán muy bien en este tutorial:

Vemos que podemos cambiar el color de la imagen. Podemos aplicarle diferentes efectos: brillo, tinta, alfa y avanzado.

En estado de reposo vamos a modificar el Alfa de la imagen, esto es hacerla mas o menos transparente. Le pondremos un valor del 12 % y nuestra imagen ahora lucirá así:

Estupendo, ahora hacemos clic en el fotograma correspondiente al estado Sobre. Insertamos un fotograma clave (F6) y en el inspector de propiedades del símbolo subimos el alfa nuevamente al 100%. El resultado será lo que vemos a nuestra derecha:

Clic ahora en el fotograma que corresponde al estado Presionado y F6 para insertar fotograma clave. En el inspector de propiedades del símbolo modificamos en esta ocasión el color aplicando la opción tinta con estos valores:

En la imagen de la izquierda tenemos el resultado de esta acción.

Podemos insertarle también algún sonido. Yo le aplicaré uno solamente en el estado presionado.

Puedes descargarte algunos de aquí: http://www.flashkit.com/soundfx/ o también puedes usar el que yo he descargado:

Descarga Sonido

Importamos el sonido a la biblioteca y ahora ya podremos aplicarlo a nuestro botón. Clic en el fotograma de Presionado para mantenerlo activo. Buscamos el sonido en la biblioteca y lo arrastramos a la escena encima del muñequito. ¡Listo! nuestro botón está ya finalizado. Ahora tan solo debemos ponerlo en escena para que podamos verlo.

Espero que hayas disfrutado con este tutorial y me permitas ver tus resultados en el foro. ¡Te espero!