Creación de un botón en Flash

La idea del tutorial es que el alumno pueda entender fácilmente cómo crear un botón y como utilizar el lenguaje de programación de Flash que es el Actionscript (2 y 3) en sus diferentes versiones.

Este tutorial está hecho con la versión de Flash Professional CS6 y en plataforma de Windows 7, sin embargo servirá perfectamente para las versiones desde Flash MX 2004* hasta Flash CS5.5 y es muy similar su uso para sistemas Mac OSX 10.

Este tutorial consiste en la creación de un botón de manera sencilla en el software de Flash. Los puntos que tocaremos en el tema serán los siguientes:

• Creación de un botón a partir de un gráfico o dibujo creado desde Flash
• Añadiendo código al botón en AS2
• Añadiendo código al botón en AS3

Creando un botón a partir de un gráfico

Esta descripción aplica para todas las versiones que yo conozco.

En realidad desde casi las primeras versiones del software (Flash 5) a la fecha, la creación de un botón no ha cambiado mucho. La interfase que se muestra en esta explicación corresponde a la versión de Flash CS6.

Añadiendo código al botón en AS2

Una vez creado el botón y que se puede interactuar con los diferentes estados del mismo, lo siguiente es decirle qué hacer al botón. Para eso utilizaremos el código escrito en AS2 (Actionscript 2).

En AS2, existen 2 formas de asignar acciones a un botón:

• Escribiendo las acciones directamente sobre el botón
• Escribiendo un nombre de instancia al botón y después escribiendo el código a ejecutar sobre la línea de tiempo
• Gestión de eventos de los botones en AS2

Escribiendo las acciones directamente sobre el botón

Primero se debe de seleccionar el botón que se escuentra en el escenario, se hace clic con el botón derecho del mouse y se abre un submenú. A continuación se hace clic en donde dice Actions o Panel de acciones.

Esto abrirá el panel de Acciones y ahí escribiremos el siguiente código:

on (release) {
     trace("El botón fue presionado y liberado");
}

Finalmente, para probar la película desde el programa se presiona la combinación de teclas CTRL + Enter

Escribiendo el código desde la línea de tiempo

A diferencia del primer ejemplo, en este caso al botón se le asigna un nombre de instancia. El nombre de instancia no es el mismo que el nombre asignado previamente al símbolo del botón, sin embargo, puede coincidir en algunos casos.

Para este ejemplo, seleccionamos el botón que se encuentra en el escenario y le asignaremos el nombre de instancia btn_prueba desde el panel de propiedades.

Una vez que se ha asignado el nombre de la instancia al botón, ahora sí podemos escribir el código en la línea de tiempo de la película. Primero se crea una nueva capa o layer y se le asigna un nombre que nos haga referencia a que es la capa de código. En este caso, yo llamaré a esa capa Actions.

Después se debe de seleccionar el cuadro o frame de esa capa, se hace clic con el botón derecho del mouse y se abre un submenú. A continuación se hace clic en donde dice Actions o Panel de acciones.

Esto abrirá el panel de Acciones y ahí escribiremos el siguiente código:

btn_prueba.onRelease = function () {
     trace("El botón fue presionado y liberado");
}

Finalmente, para probar la película desde el programa se presiona la combinación de teclas CTRL + Enter

Gestión de eventos de los botones en AS2

A continuación se muestran los eventos de botón admitidos en la siguiente tabla:

Algunos ejemplos de cómo utilizar los eventos en los botones:

btn_prueba.onPress = function() { 
    trace("Usted presionó el btn_prueba"); 
} 

btn_prueba.onRelease = function() {
    trace("Usted soltó o liberó btn_prueba que estaba seleccionado"); 
}
 
btn_prueba.onRollOver = function() {
    trace("Usted pasó el mouse encima del btn_prueba"); 
} 

btn_prueba.onRollOut = function() {
    trace("El mouse ya no está encima del botón btn_prueba"); 
}

Añadiendo código al botón en AS3

En ActionScript 3 los eventos de botón que utilizábamos en AS2 (onPress, onRelease, onRollover, etc.) desaparecen.

De todas formas, programar botones en AS3 no es más complicado que hacerlo en AS2, tal vez solo son más pasos pero que a la larga funciona mejor en los proyectos.

Como se mencionó al principio de este tutorial, programar en Actionscript 3 es posible a partir de la versión CS3 y posteriores. Las versiones previas del software como Flash 4, Flash 5, Flash MX, Flash MX 2004 y Flash 8 no tienen posibilidad de interactuar con este motor de programación.

También es necesario mencionar que a partir de la versión del Flash player 9 es que es posible visualizar películas (swf) con actionscript 3. Versiones anteriores no lo harán.

Una vez aclarado este punto, y verificando que se tiene una versión del programa que soporte AS3, sigamos con el tutorial.

En AS3 se añaden eventos al objeto con addEventListener y se indica el tipo de evento que se añade (Event.CLICK, Event.MOUSE_DOWN, etc) y será el tipo de evento el que ejecute la función a llamar.

Tal vez esto que acabas de leer te parezca un poco complicado pero en realidad no lo es. Intentaré explicarlo paso a paso para que haya más claridad a través de un ejemplo.

Aquí seguiremos utilizando el mismo nombre de la instancia que le asignamos al botón: btn_prueba

Se crea una capa o layer en donde escribiremos el código. En mi caso, yo le  pondré a esa capa el nombre de Actions.

Después se debe de seleccionar el cuadro o frame de esa capa, se hace clic con el botón derecho del mouse y se abre un menú flotante. A continuación se hace clic en donde dice Actions o Panel de acciones.

Esto abrirá el panel de Acciones y ahí escribiremos el siguiente código:

btn_prueba.addEventListener(MouseEvent.CLICK,clickBoton);
btn_prueba.addEventListener(MouseEvent.MOUSE_OVER,rollOverBoton);
btn_prueba.addEventListener(MouseEvent.MOUSE_OUT,rollOutBoton);
 
function clickBoton(e:MouseEvent):void{
	trace("Has hecho clic en el botón");
}
 
function rollOverBoton(e:MouseEvent):void{
	trace("Has hecho roll over en el botón");
}
 
function rollOutBoton(e:MouseEvent):void{
	trace( "Has hecho roll out en el botón");
}

Finalmente, para probar la película desde el programa se presiona la combinación de teclas CTRL + Enter