elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado:


+  Foro de elhacker.net
|-+  Media
| |-+  Diseño Gráfico
| | |-+  Tutorial: Calculadora sencilla en Flash!
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Tutorial: Calculadora sencilla en Flash!  (Leído 26,716 veces)
johnwmartinez

Desconectado Desconectado

Mensajes: 193


Blog, Vlog, Tutoriales y también hablo de vainas


Ver Perfil WWW
Tutorial: Calculadora sencilla en Flash!
« en: 1 Julio 2006, 17:38 »

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:
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:
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:
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:
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 ;)




En línea

wvb
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.142



Ver Perfil
Re: Tutorial: Calculadora sencilla en Flash!
« Respuesta #1 en: 1 Julio 2006, 18:12 »

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

Salu2


En línea

Error_404

Desconectado Desconectado

Mensajes: 254


Fotochopero


Ver Perfil WWW
Re: Tutorial: Calculadora sencilla en Flash!
« Respuesta #2 en: 1 Julio 2006, 18:17 »

Excelente!
Esta muy bien explicado para los que vamos iniciando. :-*
En línea

whaky

Desconectado Desconectado

Mensajes: 150


Angel del Infierno


Ver Perfil
Re: Tutorial: Calculadora sencilla en Flash!
« Respuesta #3 en: 2 Julio 2006, 00:35 »

buen manual, eso hora de ponerme manos a la obra :D
En línea

Los muertos hablan y las paredes oyen
por si acaso nunca reveles tu identidad.
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Python] - Calculadora sencilla
Scripting
Meta 5 6,498 Último mensaje 31 Enero 2011, 08:54
por Yeison.Eng
[Basico]Tutorial - Calculadora Eficiente By Nardo
Programación Visual Basic
Nardo[N] 2 3,182 Último mensaje 10 Febrero 2011, 03:05
por Nardo[N]
Sencilla calculadora con reproductor de musica python (Source)
Scripting
-Mc_Raaka- 0 1,205 Último mensaje 5 Agosto 2013, 09:52
por -Mc_Raaka-
duda javafx sencilla (calculadora)
Java
Juanma91 0 2,152 Último mensaje 28 Febrero 2014, 17:23
por Juanma91
Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines