Si bien es cierto que en un articulo anterior les contaba como hacer una "evaluación" en línea que iba guardando los resultados en variables y al final lo sumaba y mostraba el resultado, hoy traigo de nuevo el mismo ejemplo pero migrando a actionscript 3.0, que al mismo tiempo sea simple, clara y comprensible (Hay que ver el ejemplo que nos da adobe en la web oficial si queremos hacer esto (Pueden dar un vistazo para que se decepcionen: Aquí el ejemplo, busquen al final de la pagina ¡Para desalentar a cualquiera! imaginen que si tenemos que usar todo ese código para escoger una mugrosa pregunta nos moriríamos de hambre) Pero bueno, aquí mi versión. Espero y les sea útil.
Para empezar sigamos los siguientes pasos:
1- Creamos un documento de Flash AS3
2- Utilizando las teclas Control + F7 abriremos el panel inspector de componentes
3- En este ejercicio usaremos el componente radioButton, lo encontraremos organizado en la categoría Usuario, arrastraremos una instancia a la escena.
4- Una vez que tengamos el primer radioButton en la escena lo copiaremos y lo pegaremos tres veces, esto para tener cuatro radioButton:
5- Hagan clic sobre el primer radiobutton y vean sus características en el panel de propiedades, algunas estas características se pueden definir en este panel, pero nosotros las cambiaremos mediante actionscript.
6- Ahora nos preocuparemos en asignarle un nombre de instancia a cada radioButton para poder referirnos a ellos en el código, les asignaremos los siguientes nombres:
- estrella
- calamardo
- arenita
- cangrejo
7- Es importante cuando usamos radioButtons definir los grupos a los que pertenecen los mismos, su etiqueta (La que será visible por el usuario) y en nuestro caso su valor (Lo usaremos para calificar la respuesta seleccionada por el usuario)
8- Creamos un símbolo tipo botón en la escena y le asignamos el nombre de instancia botonNext
9- Utilizando una caja de texto normal escibiremos en la escena la siguiente pregunta:
¿Cuál de los siguientes personajes es el mejor amigo de Bob Esponja Pantalones Cuadrados?
10- Agregaremos una segunda capa y le asignaremos a esta capa recién creada en nombre “Acciones” En el primer fotograma de la capa acciones escribiremos el siguiente código:
stop();// detiene la cabeza lectora en el fotograma
import fl.controls.RadioButtonGroup;// Llamamos a la librería RadioButtonGroup, si omitimos esta línea no podremos asignar características a los radioButton
var bob:RadioButtonGroup= new RadioButtonGroup("Pregunta 1" );// Aquí definimos la variable del primer grupo de preguntas (bob)
var total1:Number=0;//Se define una variable para asignar los resultados de la selección del usuario y se iguala a cero para que si se suma la variable y la respuesta seleccionada no es correcta (Lo que no asignaría ningún valor a la variable) no muestre el resultado NaN
//Etiquetamos cada uno de los radioButton
estrella.label="Patricio Estrella";
calamardo.label="Calamardo Tentáculo";
arenita.label="Arenita Mejillas";
cangrejo.label="Eugenio H. Cangrejo";
//Asignamos el grupo al que pertenece cada radio button
estrella.group=bob;
calamardo.group=bob;
arenita.group=bob;
cangrejo.group=bob;
//Le asignamos el valor a la instancia de la respuesta correcta: 1
estrella.value=1;
//Creamos el listener para que escuche si el botón izquierdo del mouse es presionado por el usuario y en dicho caso llame a la función: "Esponja"
botonNext.addEventListener(MouseEvent.CLICK, esponja);
//Con un if controlaremos que pasará si el radioButton correcto es seleccionado y que pasaría si no es seleccionado
function esponja(event:MouseEvent):void {
if (bob.selection.label == "Patricio Estrella" ) {
total1=1;
gotoAndStop(2);
}else{
total1=0;
gotoAndStop(2);
}
}
11- Insertaremos en las dos capas dos fotogramas clave en blanco, repetiremos en el fotograma 2 de la capa 1 el proceso de crear cuatro instancias radioButton asignándoles los siguientes nombres de instancia:
- kirk
- lenny
- Jeff
- Cletus
12- Escribimos las siguientes líneas de código en el fotograma dos de la capa acciones:
var simpson:RadioButtonGroup= new RadioButtonGroup("Pregunta 2" );
var total2:Number=0;
kirk.label="Kirk Van Houten";
lenny.label="Lenford Leonard";
jeff.label="Jeff Albertson";
cletus.label="Cletus Delroy Spuckle";
kirk.group=simpson;
lenny.group=simpson;
jeff.group=simpson;
cletus.group=simpson;
jeff.value=1;
botonNext.addEventListener(MouseEvent.CLICK, vendedor);
function vendedor(event:MouseEvent):void {
if (simpson.selection.label == "Jeff Albertson" ) {
total2=1;
gotoAndStop(3);
}else{
total2=0;
gotoAndStop(3);
}
}
13- En el fotograma 3 de la capa preguntas escribiremos con un texto normal: Resultado
14- En el mismo fotograma agregaremos una caja de texto dinámico, le asignaremos el nombre de instancia: resultado (En el panel de propiedades asegúrense de que en la casilla Anti-alias este elegida la opción: Use device Fonts (Para CS5)
15- En el fotograma 3 de la capa acciones escribiremos:
var puntaje:Number=0;
puntaje = total1+total2;
resultado.text = String(puntaje);
¡Listo! nuestra aplicación está funcionando perfectamente, ahora con ActionScript 3.0
Archivos del tutorial
Otros tutoriales míos de actionScript 3.0:
Un par más pero en actionscript 2 (Muy útiles si nos gusta el camino mas simple y funcionan igual!)