Como crear evaluación con Flash CS5 y actionscript 2.0


Aquí pretendo de explicar brevemente como hacer un formulario tipo test utilizando el componente RadioButton y algunas líneas de actionscript 2.0, con lo cual podremos hacer evaluaciones online

Empecemos así:

1. Creamos un documento de flash actionscript 2.0 (Teclas Ctrl + N)

manual

2. En el primer fotograma de la capa y utilizando la herramienta de texto escribe la primer pregunta del cuestionario, en mi ejemplo pondré: ¿Quien era el cantante principal de Creedence Clearwater Revival?

Recordemos que las cajas de texto de Flash pueden ser de tres diferentes tipos:

- Estáticos
- Dinámicos
- De entrada

Y que si tenemos una caja de texto dinámica o de entrada, en el panel de propiedades hay que definir un nombre de instancia, para poder referirnos a las mismas en actionscript.

Lo mismo para los componentes y los símbolos, es necesario definir el nombre de instancia en el panel de propiedades para luego poder trabajar con ellos (si son elementos que se encuentran en la biblioteca, debemos asignarle un nombre para exportación (Botón derecho sobre el símbolo o objeto y desde la opción propiedades se asigna el nombre... pero bueno eso es otro tema, continuemos.

La caja de texto que creamos para la pregunta, puede ser estática. Esta por defecto tendrá la casilla de nombre de instancia deshabilitada.

3. Abriremos el panel de componentes (teclas Control + F7)

Encontraremos tres carpetas en el panel de componentes, abriremos la que se llama interfaz de usuario y buscaremos el elemento RadioButton y lo arrastraremos a la escena.

Cuestionario

4. Ahora al componente hay que definirle varias cosas, por ejemplo el grupo, la etiqueta, el valor de los datos. Para lograrlo, estos valores se definirán desde los parámetros del componente (En el panel de propiedades en Flash CS5 o desde el inspector de componentes en versiones anteriores Shift+F7)

Los campos importantes a tomar en cuenta son:

- Data (Puede contener un valor numérico o un texto)
- GroupName (Cada grupo de RadioButton bajo el mismo nombre, interactuaran entre sí, y solo uno podrá estar seleccionado en un mismo grupo)
- Label (Es el texto que mostrará el RadioButton
- LabelPlament (A que lado se alineará la etiqueta)
- Selected (Su valor puede ser true/false en versiones anteriores y una cajita para marcar en CS5, esta hará que la opción del radiobutton aparezca marcada.

Asi que en el radioButton que hemos colocado en la escena en este ejemplo pondremos los valores:

- Data: 0
- GroupName: Cantantes
- Label: John Cougar
- LabelPlacement: Right
- Selected: False o la casilla sin marcar.

Copiamos el RadioButton y lo pegamos tres veces para tener 4 radiobutton, y en cada uno cambiamos el label a:

John Fogerty
Freddy Mercury
Boy George

En el radioButton de John Fogerty en Data le asignamos el valor de 1 (Esta será la respuesta correcta y tomaremos ese valor para dar a la respuesta correcta.

Nuestra aplicación ahora debe verse mas o menos así:

Programacion

5. A cada uno de los radioButton le asignaremos en el panel de propiedades un nombre de instancia

Al primero: uno
Al segundo: dos
Al tercero: tres
Al cuarto: cuatro

Esto como expliqué antes, es para encontrarlos con actionscript

6. Crearemos un botón a nuestro gusto (Presionando Ctrl + F8) y lo colocaremos en escena, en el panel de propiedades le daremos el nombre de instancia: boton1

¡Listo! tenemos todo listo para escribir el código actionscript

7. Tocaremos el fotograma 1 de la capa 1 (El único que existe) y presionaremos la tecla F9 para abrir el panel de acciones, en él escribiremos lo siguiente:

stop();
var total:Number=0;
boton1.onRelease=function(){
gotoAndPlay(2);
if (_root.dos.selected == true) {total=_root.dos.data}
}

Explico el script:

stop(); // Detiene la cabeza lectora para que no avance
var total:Number=0; // Declaramos una variable llamada total, tipo numérico y la igualamos a 0
boton1.onRelease=function(){
gotoAndStop(2);// Creamos una función para el botón que se desencadene cuando el usuario suelte el botón izquierdo del mouse (onRelease) y que envié la cabeza lectora al fotograma 2
if (_root.dos.selected == true) {total=_root.dos.data}
} //Este if indica que si la instancia dos (El radioButton) Es seleccionada, le asigne a la variable total el valor de Data (Que es 1)

¡Hecho! si el usuario selecciona la segunda opción (John Fogerty) el valor de Data será guardado en la variable total
continuemos

8. Insertamos un segundo fotograma, escribimos nuevamente otra pregunta, en este ejemplo:

¿En que año llegó Colón a América?

Arrastramos nuevamente un RadioButton a escena, y asignamos a cada uno los siguientes valores al primero:

- Data: 1
- GroupName: america
- Label: 1482
- LabelPlacement: Right
- Selected: False o la casilla sin marcar.

Y a los restantes tres, Data 0 y en label:

- 1892
- 1592
- 1901

Colocamos el botón en escena (El que hicimos anteriormente, lo arrastramos desde la biblioteca) y les asignamos nombres de instancia, a los radioButton.

- Op1
- Op2
- Op3
- Op4

Al botón lo podemos dejar con el mismo nombre de instancia: siguiente

9. Tocamos el segundo fotograma, presionamos la tecla F9 y asignamos el script anterior (Con las debidas correciones) Podemos hacerlo tantas veces, insertando los fotogramas y scripts necesarios, pero imaginemos que nuestro test solo es de dos preguntas, así que en el segundo fotograma escribiremos así:

stop();
var total2:Number=0;
boton1.onRelease=function(){
gotoAndPlay(3);
if (_root.Op1.selected == true) {total2=_root.Op1.data}
}


10. Ahora necesitaremos mostrar el resultado, podemos usar una caja de texto dinámico para tal caso, así que:

- Creamos un nuevo fotograma, dibujamos una caja de texto dinámico y le asignamos el nombre de instancia: resultado, podemos escribir un texto que sea algo así como: "Resultado: preguntas correctas"

(En el espacio en blanco la caja de texto dinámico)

y en el fotograma el siguiente script:

stop();
_root.resultado.text = total+total2;
trace(total2);

El resultado de la suma de todas las variables se mostrará en la caja de texto.

Si gustan de hacer este tutorial y tienen dudas, estoy a la orden. En este post explico como enviar los resultados del test utilizando LoadVars a un correo electrónico:

Envio de formulario con PHP y LoadVars



















Archivo del tutorial

Ejemplo 2 a solicitud de jdarevalo, despliega el resultado de cada pregunta al final:
http://www.informaticayunis.net/publica/ejemplo_test2.zip