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
Búsquedas:
- evaluaciones en flash
- evaluacion en flash
- autoevaluacion flash 8
- sistema de autoevaluacion flash 8
- evaluacion flash
- examen de opcion multiple
- evaluacion en linea para practicar
- como hacer una evaluacion en flash
- sistema de autoevaluacion con actionscript en flash 8
- evaluacion de flash
Artículos relacionados:
- Rotar un Texto con Código Action Script
- Descubrir Imagen Con Action Script en Flash 8
- Programar un Rebote con Action Script en Flash
- Programación de Efecto Zoom con Botones De Desplazamiento (Tercera Parte)
Gracias
He andando buscando algo asi hace mucho
MUY BUENO ¿como enviar los resultados a un correo?
felicitaciones este ha sido de los mejores tutoriales que he vidto las explicaciones e ilustraciones son muy claras y es sencillo
HOLA MUY BUENA LA INFORMACION ME SACASTE DE UN APURO, OYE PODRIAS AYUDARME EN DECIRME COMO LE PUEDE PONER ALGUN SONIDO POR EJEMPLO QUE HAGA ALGUN SONIDO DE BUU QUE MAL O APLUSOS SI ESTA BIEN BUENO ALGO ASI PERO COMO LE AGREGO AL SONIDO A LA PROGRAMACION
hola
gracias x el tutorial
yo estaba buscando algo como esto
muchas gracias
espero y me puedas decir de algun manual de action script bueno
me gusta mucho la programacion
gracias de antemano
un saludo
mi mail es
joslui11@hotmail.com
adios
Excelente, mil gracias . lo estoy aprovechando para mi trabajo con estudiantes.
Hola amigos un uper tutorial,buena la idea de Janett con lo de sonidos, algun ejemplo con start drag para que el alumno pueda relacionar respuestas, seria super.
si tienen algun manuaal o tutoriales de action script agradecere si me envian al siguente correo
codigo_ld@hotmail.com
Exceleeeente! Ahora una consulta: quiero que en vez de una frase relacionada con el resultado, aparezca una imagen. Pienso poner una distinta según cada puntuación. Cómo hago?
GRACIAS!
Bueno es un ejmplo super, ya lo aplique con mis estudiantes con 40 preguntas jaj desaprobaron la mayoria ya no pueden plagiar
Bueno si tendrian ejemplos con controles check box option button un examen con esos controles seria brabazo
att: Gracias LeninDC
disculpa tngo un problema, yo e hexo 8 preguntas, y cuando pongo los textos para las respuestas q hicieron correctas o sea (7 aciertos muy bien), cuando doy control enter y lo prueblo y hago todas las preguntas correctas, me sale 50% y m deberia salir 100 x q??
por favor necesito una aplicacion similar pero aplicando algo adicional como por ejemplo que pueda elegir 1 o mas respuestas si realizo esto que pase a la siguiente pregunta.
necesito una aplicacion similar solo con la diferencia que pueda seleccionar 1 o varias respuesta y si realizo esto que pase a la siguiente pregunta.
por favor
este tutorial es maravilloso.
hola que tal, el tutorial es genial!
Pero te falta decir que en los textos dinamicos seleccionemos la opcion: "Bitmap text (no anti-alias)"
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
muy buen tutorial¡¡ me ayudo mucho, pero quisiera preguntarte como le puedo hacer para que al darle clic en la respuesta correcta me aparesca una imgen de carita feliz y una flecha, y aparte que no me avance muy rapido a la siguiente pregunta , mas bien que me de tiempo de ver la respuesta con la imagen…y aparte desabilitar los botones pues son tres botones de opcion como respuesta… . ojala alguien me pueda ayudar ¡¡¡¡ gracias¡¡¡¡¡
er cheveere ese tutorial me hizo perder informatica pero bueno ya la recuperare ya que ya aprendi con este tutorial
Wuuuaaoo! Excelente aporte…me sacaste de apuros para un proyecto…me sirvió bastante…espero sigas poniendo mas temas útiles….byee
Excelente, graxias, muy util,
muchas gracias excelente tutorial
muchas gracias
Amigo exelente tutorial, necesitaba algo asi super urgente. Gracias
Podrias regalarme tu Email me interesa contactarme con tigo amigo gracias
Pues al decir verdad este tutorial está pa la basura, algo enrredoso y muy, pero muy que muy básico…
Si quieren uno mejor pues pidanlo y les enseñaré como hacerlo…
Cuidense y hasta la próxima!
Si no sabes: estudia. Si sabes: Instrulle tus conosimientos…
Hola, el tutorial está bueno, sin embargo yo opino que está super básico, deberíamos ponernos a estudiar más para hacer cosas mucho mejores…
Y con respecto a la pregunta de un comentario que ví más arriba sobre:
¿Como hacer aleatorias las preguntas?
Te dejo algo un poco más abanzado…
array = new Array();
array = [2, 3, 4];
function aleatorio() {
return Math.round(Math.random(array));
}
array = array.sort(aleatorio);
trace ( array );
Esto te dará un array rebuelto y con ello podrías hacer lo aleatorio con un:
gotoAndStop(_array[p]);
pon eso en tus botones intercambiando el [0] por el [1] y [2]… [n].