domingo, 6 de marzo de 2011

Calculadora en Flash (actionscript 3.0)

Hola a todos!
En esta ocasión les voy a explicar cómo elaborar una sencilla calculadora interactiva en Flash utilizando actionscript 3.0, en la cual podamos sumar, restar, multiplicar o dividir dos números insertados por el usuario.


En primer lugar abrimos un nuevo archivo de Flash, as3, e insertamos dos campos de Introducción de texto, con nombres de instancia "num1" y "num2" respectivamente.
Luego insertamos un tercer campo de texto, pero de tipo Dinámico y con nombre de instancia "resultado".





Los campos de introducción de texto serán para que el usuario escriba los números de la operación a realizar. Seleccionamos ambos textos y en el panel de propiedades, presionamos el botón "Incorporar caracteres" y seleccionamos el tipo Numerales. En donde dice "Incluir los siguientes caracteres" escribimos un . (punto). Luego presionamos aceptar.

Ahora vamos a crear los botones con los nombres de las diferentes operaciones que vamos a utilizar (suma, resta, multiplicación y división). Escribimos los textos y convertimos cada uno por separado en Símbolos del tipo Botón. Les damos las características que queramos (diferente color en el rollOver, en el presionado, insertamos un rectángulo en la zona activa, etc.) y los arrastramos al escenario para disponerlos de la manera que prefiramos. A cada uno de ellos le ponemos un nombre de instancia diferente para identificarlos, por ejemplo "suma", "resta", "multiplicacion" y "division".

Por último (antes de programar) vamos a crear un nuevo símbolo con los signos "+", "-", "x" y "/". Para ello presionamos Ctrl+F8, escribimos de nombre "Signos" y seleccionamos de tipo Clip de Película o Movieclip. Una vez "dentro" del clip, procedemos a modificarlo. El primer fotograma estará vacío, porque todavía no hemos seleccionado la operación que queremos realizar. En fotograma 2 escribimos con la herramienta Texto un +, ya que este fotograma lo mostraremos cuando el usuario presione el botón de adición. En el tercer fotograma cambiamos el + por un -, ya que al presionar el botón de sustracción, éste será el fotograma que mostraremos. En el cuarto fotograma reemplazamos el - por un x, ya que al presionar el botón de multiplicación queremos que se vea este fotograma. Y, finalmente, en el último fotograma (fotograma 5) escribimos una / para que se vea al presionar el botón de división.
Volvemos a la escena 1 y arrastramos el símbolo "Signos" al escenario, entre el primer campo de introducción de texto (primer número) y el segundo campo de introducción de texto (segundo número). A este símbolo le ponemos un nombre de instancia: "signo"


















Lo único que nos queda es la programación. Creamos una nueva capa y la llamamos acciones. En el primer fotograma (vacío) escribimos el siguiente código:






















Notas del código

suma.addEventListener (MouseEvent.CLICK, sumar);
function sumar (event):void {

En esta línea de código le indicamos a Flash que queremos que al presionar el botón con nombre de instancia "suma", se ejecute la función de mouse llamada "sumar".

resultado.text = String(Number(num1.text) + Number(num2.text));
signo.gotoAndStop(2);

En esta línea de código definimos la variable "sumar" para que al presionar el botón, en el campo de texto resultado.text se muestre la suma del valor del campo de texto num1.text más el valor del campo de texto num2.text. Además le indicamos a Flash que queremos que el clip de película con nombre de instancia "signo", vaya a su fotograma número 2.


La misma explicación se repite para las funciones de todos los otros botones.

El resultado es el siguiente:





Espero que este tutorial les sea útil.
Cualquier duda, sugerencia, o simplemente si te sirvió de ayuda el tutorial, dejá un comentario.

Ver todos mis tutoriales

Un saludo.
Jime.



1 comentarios:

  1. hola estuve viendo tus tutos y están bien cálida pero quiero saber si me podes ayudar con un juego que tengo en mano y pues npor cuestiones d conocimiento no voy para adelante es un juego sencillo de rompecabezas estos son los unicoss códigos que encuentro

    clip de peli
    on (press) {
    this.startDrag();
    }

    on (release) {
    this.stopDrag();
    }

    y funcionan pero no se como hacer que al terminar de poner todas las piesas en su lugar me lleve a otro nivel te agradecería tu ayuda

    ResponderEliminar

Si tenés dudas, comentarios u opiniones sobre esta entrada, ¡comentá!