Tutorial: Calculadora sencilla en Flash!

[johnwmartinez]

bueno muchachos, saludos a todos.

Es la primera vez que hago un tutorial para esta pagina, de hecho, es la primera vez en mi vida que hago un tutorial 


Bien, es un pequeño sistema de calculadora que te puede ser muy util para hacer para tu pagina. Si eres un tanto ocioso y te gusta invertir tiempo en aprendizaje flash, que esperas para leerlo.


bien, lo primero que necesitamos es una imagen de una calculadora. Para esto, he usado una imagen de la calculadora por defecto que trae Windows XP.




bien, ahora lo que hacemos es un rectangulo al rededor de la calculadora. Esto lo hacemos para tener la medida exacta de la tecla y poder hacerlas todas.




bien, ahora seleccionamos el cuadro azul y vamos al menu modificar > Convertir en simbolo. O para hacerlo mas rapido, simplemente lo seleccionamos y le damos F8.

bien, ahora elegimos un nombre, en este ejemplo yo elegi el nombre "Boton_7". Porque es la tecla que corresponde al boton con el numero 7. Bien, despues de esto procedemos a elegir el diseño de la tecla, en esta parte no infiero mucho porque trabajar con botones en sencillo, es puro diseño y ya.



Solo recuerda (acotacion para principiantes), 'Reposo' es lo que nos muestra siempre, 'sobre' es cuando posamos el puntero sobre el boton, 'presionado' es cuando le damos click y lo tenemos sostenido, 'zona activa' es la parte del boton que me va a hacer activarlo.



Bien, repetimos la accion de crear boton en todas las teclas, desde el 0 al 9, incluyendo tambien la comilla (que en este ejemplo sera solo de relleno), la suma, resta, multiplicacion y division. Y la tecla c, que nos sirve para borrar la info que este en nuestro cuadro de texto. Bien, si hacemos todo correctamente nos quedara algo mas o menos asi:




Bien, despues de eso vamos a crear la pantalla. Para eso, elegimos la opcion texto de la barra de herramientas:




Y hacemos una seleccion en nuestra pantalla que tenemos en dibujo. Observa el pantallazo para entender mejor:




bien, despues de haber insertado el campo de texto, lo que hacemos es elegir la opcion de 'campo dinamico' y le ponemos por nombre pantalla. Para el que no sepa como hacerlo, en la siguiente imagen muestro como:





Bien, ahora lo que hacemos es meterle codigo actionscript a cada uno de nuestros botones.

Como mencione anteriormente, el boton de la coma (,) para numeros decimales, no la vamos a usar todavia. Asi que vamos con el resto.

Primero vamos a definir nuestros numeros. Es decir, vamos a dar la opcion que cada uno de nuestros numeros, al hacerle click se introduzca en nuestro campo de texto. Para esto, seleccionamos el numero cero (0) y en la parte donde dice 'Acciones - botón' introducimos este codigo:

Código [Seleccionar] Expandir

on (release){
pantalla.text = pantalla.text + [color=Red]0[/color]
}

Bien. Ahora seleccionamos el numero uno (1) y hacemos lo mismo que en el anterior caso. La diferencia, es que no colocaremos 0 (cero) sino que colocaremos 1 (uno). Es decir, el numero en rojo lo cambiamos por el respectivo numero de su tecla.

Bien, hacemos el mismo procedimiento con los numeros del 1 al 9.


Ahora vamos a programar el boton de borrar. Para eso lo seleccionamos, vamos a la sección de 'acciones' e insertamos este codigo:

Código [Seleccionar] Expandir

on (release){
pantalla.text = ""
}

Este codigo significa, que nos va a dejar la pantalla con parametros nulos, es decir, sin nada.


Bien, ahora vamos a programar los operadores matematicos. Para ello, elegimos la division. Vamos a la sección de 'acciones' e insertamos este codigo:

Código [Seleccionar] Expandir

on (release){
valor1 = pantalla.text
pantalla.text= ""
operacion = "[color=Red]/[/color]"

}

Listo... Tenemos listo nuestra opcion de dividir. bueno, lo mismo vamos a hacer con la multiplicacion, suma y resta. Para eso, hacemos lo mismo que hicimos para dividir.

Solo que, en este caso, lo que esta seleccionado con rojo lo cambiamos de esta manera:

Para multiplicacion, le colocamos un asterisco (*)
Para suma, el simbolo de suma (+)
Para resta, el simbolo de resta (-).


Listo.



Para finalizar, debemos programar nuestro boton de igual.

Sencillo. Solo tenemos que elegir nuestro boton de igual, e introducir este codigo en la sección de acciones:

Código [Seleccionar] Expandir

on (release){
valor2 = pantalla.text
if (operacion == "/"){
pantalla.text = int(valor1) / int(valor2)
}
if (operacion == "*"){
pantalla.text = int(valor1) * int(valor2)
}
if (operacion == "+"){
pantalla.text = int(valor1) + int(valor2)
}
if (operacion == "-"){
pantalla.text = int(valor1) - int(valor2)
}

}


Listo. Ahora dale exportar, como swf o simplemente dale F12 y pruebas tu script.

Si lo haces bien, te debe quedar asi:

http://img261.imageshack.us/my.php?image=final3cl.swf

Saludos

[wvb]

Está bueno. Estas aplicaciones como calculadoras, calendarios, etc va bien siempre tenerlas a mano.

Salu2

[Error_404]

Excelente!
Esta muy bien explicado para los que vamos iniciando.

[whaky]

buen manual, eso hora de ponerme manos a la obra