Tutorial Flash 8 Interacción entere Preguntas y Respuestas. En el siguiente tutorial flash podrás ver los alcances que tiene un simple símbolo de comportamiento botón, claro que este esta vinculado a una serie de de acciones especificas de código action script. Primero te diré que todo el desarrollo de la película esta realizada en la Escena para no complicar el tutorial. Aquí encontraras como hacer una serie de preguntas y también dar una serie de opciones como respuesta, claro que solamente una es la correcta, y al final obtener una serie de evaluaciones como número de respuestas correctas, el porcentaje de aciertos y un comentario sarcástico. ☺Good luck☺¡ ¿Comenzamos?
1-. Lo primero que tienes que hacer es un documento (ctrl. + J).
a)-. Las dimensiones del documento son 400 * 300 píxeles de ancho y alto.
b)-. Utilizar como Color de fondo el que mas sea de tu agrade, yo use el color #99CC00.
c)-. En Velocidad de fotogramas colocar 12 fps.
2-. Colocado en la Escena, cambiar el nombre de la capa por el de fondo.
a)-. Luego insertar un campo de Texto estático con la frase Examen De Opción Múltiple.
b)-. El ancho y alto del texto depende del tipo de fuente y tamaño de fuente que uses.
c)-. Colocar el texto en la parte superior del documento por ejemplo en coordenadas X = 26.9 y Y = 10.0.
3-. Comenzar a realizar las preguntas con respuestas, pero primero insertar una segunda capa y cambiar el nombre por el de preguntas y respuestas.
a)-. Insertar dos campos de texto estático uno para la pregunta y el segundo para la respuesta, observa la imagen para mayor información.
b)-. Tú decides en que parte (coordenadas) colocar estos textos.
4-. Insertar un fotograma (F5) en el frame # 2 de la capa fondo, luego insertar un fotograma clave vacío (F7) en el frame # 2 de la capa preguntas y respuestas.
a)-. En el fotograma de la capa preguntas y respuestas insertar dos campos de texto estático, un capo de texto es para la pregunta y el otro para la respuesta.
5-. Repetir el paso anterior, y así completar una serie de tres preguntas y tres respuestas
6-. Insertar nuevamente un fotograma (F5) en el frame # 4 de la capa fondo.
a)-. Insertar un fotograma clave vacío (F7) en el frame # 4 de la capa preguntas y respuestas, en este fotograma colocar un campo de texto estático con la leyenda Evaluar resultado. Centrar este texto tanto a lo ancho como a lo alto.
7-. Crear el único símbolo (ctrl. + F8) de que consta la película.
a)-. Nombrarlo botón multiusos.
b)-. En la opción Tipo seleccionar Botón.
8-. Ubicado en el símbolo insertar un fotograma clave (F6) en el frame Sobre.
a)-. Dibujar un rectángulo de dimensiones 100.0 * 15.0 píxeles de ancho y alto.
b)-. Colocar el rectángulo en coordenadas X = 0.0 y Y = 0.0.
c)-. Hacer visible el panel de Mezclador de colores (shift + F9), seleccionar en la opción Tipo Sólido.
d)-. En la casilla marcada con el # 7 escribir el color #FFFF00, y después reducir el Alfa a un 50 %. Observar la imagen para no tener tanta complicación.
9-. Insertar un fotograma clave (F6) en frame Presionado.
a)-. Deberá de aparecer el rectángulo, entonces solamente sustituir el color anterior por uno nuevo #00FF00.
b)-. Luego reducir al 50 % el Alfa a este color.
10-. Insertar un fotograma clave (F6) en el frame Zona activa.
11-. Regresar a la Escena e insertar una tercera capa y nombrarla botones.
a)-. Arrastrar desde la biblioteca el símbolo botón multiusos, y colocarlo sobre la primera respuesta.
b)-. Ajustar las dimensiones del botón al tamaño de la respuesta en este caso se ajusto 36.0 * 15.0 píxeles de ancho y alto.
c)-. Las coordenadas dependen de donde hayas colocado el texto.
12-. Seleccionar el botón que se ajusto en el paso anterior, abrir la barra de Acciones – botón para luego insertar el siguiente script (el script es para las respuestas incorrectas).
on (release) {
gotoAndStop(2);
}
13-. Repetir los pasos 11 y 12 para dos respuestas más, esto es colocar desde la biblioteca el botón y luego ajustar las dimensiones y coordenadas. El código es el mismo para todas las respuestas incorrectas.
on (release) {
gotoAndStop(2);
}
14-. Introducir una vez más el botón multiusos desde la biblioteca, sobre la respuesta correcta. Ajustar el tamaño y coordenadas.
a)-. Para este botón el código cambia un poco ya que es la respuesta correcta el script es el siguiente.
on (release) {
gotoAndStop(2);
aciertos++;
}
15-. Insertar un fotograma clave (F6) en el frame # 2, de la capa botones.
a)-. Nuevamente ajustar las dimensiones y las coordenadas de cada uno de los botones.
16-. En la barra de Acciones – botón introducir el siguiente código para las respuestas (botones) incorrectas.
on (release) {
gotoAndStop(3);
}
17-. Seleccionar el botón de la respuesta correcta y a este botón insertar el siguiente código action script.
on (release) {
gotoAndStop(3);
aciertos++;
}
Nota repetir los pasos 15 y 16 para el frame 3 esto es insertar fotograma clave en el frame # 3, ajustar dimensiones del botón y coordenadas. Para los botones de respuestas incorrectas el script es.
on (release) {
gotoAndStop(4);
}
Y el código para la respuesta correcta es
on (release) {
gotoAndStop(4);
aciertos++;
}
18-. Ahora insertar un fotograma clave vacío (F7) en el frame # 4.
a)-. En este fotograma arrastrar nuevamente el símbolo desde la biblioteca, ajustar tamaño y coordenadas.
19-. Seleccionar el botón y el la barra de acciones – botón insertar el script.
on (release) {
gotoAndStop(5);
}
20-. Colora un fotograma (F5) en la capa fondo y un fotograma vacío en la capa botones del frame # 5.
a)-. En el fotograma de la capa botones insertar tres campos de texto estático, uno para las respuestas correctas, otro para el porcentaje y el tercero para un comentario.
21-. En la misma capa botones en el fotograma # 5 insertar un campo de texto dinámico.
a)-. En la casilla Variable Var: escribir la sentencia aciertos.
22-. Insertar un campo de texto dinámico y en la casilla Var: escribir porcentaje.
23-. Introducir el último campo de texto dinámico y ahora escribir en la casilla Var: texto.
a)-. También seleccionar la opción de mostrar borde al rededor del texto.
24-. Insertar una cuarta capa y nombrarla acciones.
a)-. Seleccionar el fotograma y el la barra de Acciones – fotograma, escribir estas líneas.
stop();
aciertos = 0;
25-. Insertar un fotograma clave vacío (F7) en frame # 5 de la capa de acciones, en la barra de Acciones – fotograma insertar el script siguiente.
porcentaje = aciertos/3*100+”%”;
if (aciertos == 0) {
texto = “Cero aciertos ya estudia bolsón”;
}
if (aciertos == 1) {
texto = “Un acierto esfuérzate más”;
}
if (aciertos == 2) {
texto = “Bien hecho estas estudiando”;
}
if (aciertos == 3) {
texto = “Excelente eres el mejor”;
}
Hasta aquí el tutorial puede darse como finalizado y puedes presionar ctrl. + enter.
26-. Sin embargo, incluiré un paso más esto con el fin de regresar nuevamente al inicio de la primera pregunta.
a)-. En la capa botones primero insertar un campo de texto estático, luego arrastrar desde la biblioteca el botón multiusos y colocarlo sobre el texto.
b)-. Seleccionar el botón, abrir la barra de Acciones – botón e insertar el siguiente código.
on (release) {
gotoAndPlay(1);
}
Con este paso ahora el tutorial ya es un poco más completo. ☺ ¡Well done! ☺.
P.D. Presionar nuevamente ctrl. + Enter para ver como trabaja el botón de regresar a la primera pregunta. Si deseas agregar más preguntas insertar mas fotogramas y cambiar en el código gotoAndStop(4) en cada uno de los botones adicionales, el # 4 por el número siguiente 6, 7, 8, 9,10… Hasta pronto y espero tus comentarios sobre el tutorial.
Visualizar el archivo swf de este tutorial
Descarga el archivo fla de este tutorial
Artículos relacionados:
Un tutorial excelente, he estado buscando sobre el diseño de evaluaciones interactivas y tu aportación me parece muy buena. Lo que he estado buscando es sobre evaluaciones interactivas pero no solo
de opción múltiple sino para que evalue procesos por ejemplo las que se aplican en la acreditación
de office, por favor si alguien sabe donde podre encontrar algo, agredecere mucho su información.
Excelente tutorial, muy claro y bien explicado, me dio lo que necesitaba. gracias
Es un excelente tutorial nos ha servido de mucho para la aplicación de examenes en nuestra escuela, solo queria preguntar si hay alguna forma de desactivar las tecla de control y o las de las flechas en el teclado, de antemano gracias por la ayuda.
UNA PREGUNTA COMO AGO PARA QUE ESCOJA LAS PREGUNTAS ALEATORIAMENTE Y NO SEGUDAS COMO ESTAS?¿?¿?¿
POR CIERTO EXCELENTE TUTORIAL
excelente
Excelente!! llevaba mucho tiempo buscando este tutorial!! me has salvado de un apuro muy grande!! Te deseo suerte y mucho éxito!!
muy bueno pero a dodne envia los resultado del test
gracias por si alguno sabe
superbueno