En este tutorial vamos a crear una calculadora con Flash y actionScript, será un ejercicio que nos permitirá comprender un poco mejor el uso de variables y condicionales (if)
Para empezar vamos a crear un arte o a buscar un mapa de bits para que represente a la calculadora. En mi caso yo usaré esta:
Una vez que tengamos la imagen es conveniente que el documento de Flash tenga el mismo tamaño, también pueden dibujar la interfaz con las herramientas de Flash.
Por el momento programaremos una calculadora que solo sume, reste, multiplique y divida. Pero una vez que comprendan como funciona pueden hacer que haga otras cosas, ahí la imaginación es la que manda.
Antes de continuar repasemos:
Hacer las operaciones básicas es sencillo en cualquier lenguaje de programación, si lo queremos comprobar en Flash podemos hacer o siguiente:
- Abrir el panel de acciones (Presionando la tecla F9)
- Escribir el siguiente script:
trace(2+2)
El script trace enviará el resultado de la operación al panel de salida, claro en el panel de usuario no es útil para el usuario ya que nunca lo verá, solo servirá para probar o seguir el funcionamiento del código. Lo interesante es ver los resultados en una caja de texto, entonces continuemos:
- Dibujemos una caja de texto de tipo dinámico en la escena y le damos un nombre de instancia, por ejemplo resultado, recordemos que el nombre de instancia se asigna en el panel de propiedades:
- Una vez hecha la caja de texto e identificado con nombre de instancia podemos crear una nueva capa para que en el primer fotograma podamos escribir las acciones.
- Seleccionamos el primer (Y único) fotograma que hay en la capa recién creada y presionamos la tecla F9 para abrir el panel de acciones y escribimos:
resultado.appendText(2+2);
Podemos probar la aplicación presionando las teclas control + enter y ahora veremos el resultado en la caja de texto.
Bueno, hasta aquí todo bien, pero ocupamos que sea el usuario el que escoja el número que quiere que sea sumado, entonces hay que hacer uso de las variables para luego hacer uso de las mismas, también tendremos que hacer botones para que el usuario pueda seleccionar el número deseado, así que creamos 10 botones y les asignamos los nombres de instancia:
btn0
btn1
btn2
btn3
btn4
btn5
btn6
btn7
btn8
btn9
También podemos crear los botones que usaremos para sumar, restar, multiplicar y dividir y definir sus nombres de instancia:
btnmas
btnmenos
btnequis
btndivision
Si estamos usando un mapa de bit como arte para la interfaz de la calculadora entonces al botón que usemos solo le definimos el fotograma del Hit (Zona activa) para que solo haga la función de botón y deje visualizar el mapa de bit.
Ahora lo que sigue es definir las variables que usaremos para que AS3 use los números, así que en la primera capa (Acciones) borraremos el script de prueba que habíamos hecho anteriormente y ahora sí empezamos a escribir el código que usaremos, así que esriban así:
var uno:Number=1;
var dos:Number=2;
var tres:Number=3;
var cuatro:Numberr=4;
var cinco:Number=5;
var seis:Number=6;
var siete:Number=7;
var ocho:Number=8;
var nueve:Number=9;
var cero:Number=0;
//También agregaremos algunas variables más que necesitaremos más adelante:
var valor1:Number;
var valor2:Number;
var total:Number;
var operacion:Number;
//Ahora definiremos las funciones que harán que el usuario pueda ver los números con los que está trabajando en la caja de texto (llamada resultado)
function escribe1(event:MouseEvent):void {
resultado.appendText(uno.toString());
}
btn1.addEventListener(MouseEvent.CLICK, escribe1);
function escribe2(event:MouseEvent):void {
resultado.appendText(dos.toString());
}
btn2.addEventListener(MouseEvent.CLICK, escribe2);
function escribe3(event:MouseEvent):void {
resultado.appendText(tres.toString());
}
btn3.addEventListener(MouseEvent.CLICK, escribe3);
function escribe4(event:MouseEvent):void {
resultado.appendText(cuatro.toString());
}
btn4.addEventListener(MouseEvent.CLICK, escribe4);
function escribe5(event:MouseEvent):void {
resultado.appendText(cinco.toString());
}
btn5.addEventListener(MouseEvent.CLICK, escribe5);
function escribe6(event:MouseEvent):void {
resultado.appendText(seis.toString());
}
btn6.addEventListener(MouseEvent.CLICK, escribe6);
function escribe7(event:MouseEvent):void {
resultado.appendText(siete.toString());
}
btn7.addEventListener(MouseEvent.CLICK, escribe7);
function escribe8(event:MouseEvent):void {
resultado.appendText(ocho.toString());
}
btn8.addEventListener(MouseEvent.CLICK, escribe8);
function escribe9(event:MouseEvent):void {
resultado.appendText(nueve.toString());
}
btn9.addEventListener(MouseEvent.CLICK, escribe9);
function escribe0(event:MouseEvent):void {
resultado.appendText(cero.toString());
}
btn0.addEventListener(MouseEvent.CLICK, escribe0);
//Ahora definiremos las funciones necesarias para que la calculadora sepa hacer las cuatro operaciones básicas:
//suma
function primersumando(event:MouseEvent):void {
valor1 = parseInt(resultado.text);
resultado.text="";
operacion=0;
}
btnmas.addEventListener(MouseEvent.CLICK, primersumando);
function minuendo(event:MouseEvent):void {
valor1 = parseInt(resultado.text);
resultado.text="";
operacion=1;
}
btnmenos.addEventListener(MouseEvent.CLICK, minuendo);
function primerfactor(event:MouseEvent):void {
valor1 = parseInt(resultado.text);
resultado.text="";
operacion=2;
}
btnequis.addEventListener(MouseEvent.CLICK, primerfactor);
function dividendo(event:MouseEvent):void {
valor1 = parseInt(resultado.text);
resultado.text="";
operacion=3;
}
btndivision.addEventListener(MouseEvent.CLICK, dividendo);
//mediante una función if else se decidirá cual operación quiere realizar el usuario:
function calcular(event:MouseEvent):void {
valor2 = parseInt(resultado.text);
if (operacion == 0) {
total = valor1 + valor2;
} else if (operacion == 1) {
total = valor1 - valor2;
} else if (operacion == 2) {
total = valor1 * valor2;
} else if (operacion == 3) {
total = valor1 / valor2;
}
resultado.text="";
resultado.appendText(total.toString());
}
btnigual.addEventListener(MouseEvent.CLICK, calcular);
//Finalmente haremos una función que pueda borrar los datos que tenemos en la caja de texto y almacenados también en las variables:
function limpiar(event:MouseEvent):void {
valor1 = 0;
valor2 = 0;
resultado.text="";
}
btnclear.addEventListener(MouseEvent.CLICK, limpiar);
Y así de simple tendremos una calculadora básica hecha con flash y AS3, claro como les decía anteriormente aquí explico lo básico pero una vez que lo entiendan pueden agregar más opciones.
Archivo del tutorial:
Ejemplo del tutorial:
Si algo no quedó claro solo me dejan un comentario o me envían un mensaje
Pueden ver mis otros Post de actionscript 3:
Un par más pero en actionscript 2 (Muy útiles si nos gusta el camino mas simple y funcionan igual!)
Actualizado: 04/09/2011