Criando um quizz em Flash e XML

Criando um quizz em Flash e XML

Vamos estudar neste artigo como criar um simples joguinho de peruntas e respostas, utilizando XML e Flash.

Pré-requisitos:

  • Flash 8;
  • Editor de texto para escrever o XML.

Ao longo deste estudo, iremos abordar:

  • Duplicação de MovieClip;
  • Trabalhar com XML;
  • Posicionamento de elementos duplicados;
  • Acesso a elementos duplicados.

Para auxiliar e facilitar o seu estudo deste artigo, estude também os artigos falando sobre XML:

Criando a interface

Iremos trabalhar com uma interface bem simples. Para começar, crie um campo de texto dinâmico, e coloque o nome de instância como pergunta.

Em seguida crie um campo de texto dinâmico com o nome de instância de opcao.

Após criar este campo de texto, selecione-o e converta-o para movie clip (F8 ou Modify > Convert to symbol). Coloque o nome do objeto na bilioteca de opcao_quizz, para ficar mais fácil caso precisamos pega-lo novamente da bilbioteca. Coloque também o ponto de registro (registration) como indicado na figura abaixo.

Após converte-lo para movie clip, coloque como nome de instância deste como opcao_mc.

Iremos agora criar agora uma janela de alerta, para quando o usuário escolher uma resposta, seja ela certa ou errada.
Crie um retangulo (o formato realmente não importa, contato que os passos seguintes sejam seguidos), converta-o em movieclip (F8 ou modify > convert to symbol) e dê o nome na biblioteca e de instância como fundo_janela.

Crie agora acima deste movieclip um campo de texto dinâmico e coloque como nome de instância msg.

Crie agora um botão, e coloque o nome de instância do mesmo de btn_fecha.

Selecione o movieclip de fundo (fundo_janela), o campo de texto dinâmico (msg) e o botão (btn_fecha) e converta todos em um só movieclip, chamado janela_aviso (instância e na biblioteca).

Feito isto, crie uma nova camada sobre e existente e coloque o nome desta nova camada como acoes e a camada anterior como interface.

Agora na camada acoes, coloque as ações abaixo:

/* url do arquivo XML */
var urlXML:String = ‘quizz.xml’;
/* objeto XML */
var xmlDoc:XML = new XML();
xmlDoc.ignoreWhite = true;
/* array que ira guardar os dados do XML apos carregado */
var arrQuizz:Array = new Array();
/* pergunta já feitas */
var arrUsed:Array = new Array();
/* deixa o opcao_mc invisivel */
opcao_mc._visible = false;
/* deixa a janela invisiveel */
janela_aviso._visible = false;
/* mensagem de resposta certa */
var msg_certo:String = ‘Muito bem! Resposta correta!’
/* mensagem de resposta errada */
var msg_errado:String = ‘Ah não! tudo errado….’;
/* quando terminar de carregar o XML */
xmlDoc.onLoad = function():Void {
/* pega a primeira pergunta */
var node:XMLNode = this.firstChild.firstChild;
for (node; node != null; node=node.nextSibling) {
/* cria um novo objeto para colocar no array */
var obj:Object = new Object();
/* guarda a pergunta dentro dele */
obj.pergunta = node.attributes.texto;
/* array com as respostas */
var arr:Array = new Array();
/* para cada resposta dentro dele */
for (var item:XMLNode = node.firstChild; item != null; item=item.nextSibling) {
/* coloca os atributos dentro de um array */
arr.push(item.attributes);
}
/* coloca este array dentro do objeto */
obj.respostas = arr;
/* coloca este objeto dentro do array principal */
arrQuizz.push(obj);
}
/* chama a função que sorteia a pergunta e mostra para o usuário */
showQuizz();
};
function showQuizz():Void {
/* se todas as perguntas já foram utilizadas */
if (arrUsed.length == arrQuizz.length) {
//zera as usadas
arrUsed = new Array();
}
do {
/* sorteia uma pergunta */
var item:Object = arrQuizz[(Math.floor(Math.random()*arrQuizz.length))];
/* efetua o loop enquanto esta pergunta não estiver na lista de usadas */
} while (_usado(item.pergunta) == true);
/* coloca esta pergunta na lista de usadas */
arrUsed.push(item.pergunta);
/* mostra a pergunta */
pergunta.text = item.pergunta;
/* limpa os movieclip anteriores */
clearOptions();
/* para cada opção */
for (var i:Number = 0; i<item.respostas.length; i++) {
/* pega um novo_nivel */
var n:Number = this.getNextHighestDepth();
/* duplica o item de opções */
var it:MovieClip = opcao_mc.duplicateMovieClip(‘_opcao’+n, n);
/* coloca na posição certa */
it._y = opcao_mc._y + (i*it._height);
/* coloca o texto */
it.opcao.text = item.respostas[i].texto;
/* indica se é a resposta certa ou não */
it.certo = Number( item.respostas[i].verdadeiro );
/* quando a pessoa clicar */
it.onRelease = function():Void {
/* muda o level da janela */
janela_aviso.swapDepths( _root.getNextHighestDepth() );
/* exibe a janela */
janela_aviso._visible = true;
//se for a verdadeira
if(this.certo == 1) {
/* mostra a mensagem de certo */
janela_aviso.msg.text = msg_certo;
} else {
/* do contrario, mostra a mensagem de errado */
janela_aviso.msg.text = msg_errado;
}
}
}
}
function _usado(per:String):Boolean {
for (var i:Number = 0; i<arrUsed.length; i++) {
if (per == arrUsed[i]) {
return true;
}
}
return false;
}
function clearOptions():Void {
for (var i in this) {
if (i.substr(0, 6) == ‘_opcao’) {
this[i].removeMovieClip();
}
}
}
janela_aviso.fundo.onRelease=function():Void {};
janela_aviso.fundo.useHandCursor = false;
janela_aviso.btn_fecha.onRelease = function ():Void {
this._parent._visible = false;
showQuizz();
}
/* carrega o XML */
xmlDoc.load(urlXML);

E agora, o modelo de XML para o quizz

<?xml version=”1.0″ encoding=”UTF-8″?>
<flash-quizz>
<pergunta texto=”Qual o nome do filtro que cria uma sombra?”>
<opcao texto=”Shadow” verdadeiro=”1″/>
<opcao texto=”Bevel” verdadeiro=”0″/>
<opcao texto=”Glow” verdadeiro=”0″/>
</pergunta>
<pergunta texto=”Pergunta 2″>
<opcao texto=”opcao 1″ verdadeiro=”0″/>
<opcao texto=”opcao 2″ verdadeiro=”0″/>
<opcao texto=”opcao 3″ verdadeiro=”0″/>
<opcao texto=”opcao 4″ verdadeiro=”1″/>
<opcao texto=”opcao 5″ verdadeiro=”0″/>
</pergunta>
<pergunta texto=”Pergunta 3″>
<opcao texto=”opcao 1″ verdadeiro=”0″/>
<opcao texto=”opcao 2″ verdadeiro=”1″/>
<opcao texto=”opcao 3″ verdadeiro=”0″/>
<opcao texto=”opcao 4″ verdadeiro=”0″/>
</pergunta>
<pergunta texto=”pergunta 4″>
<opcao texto=”opcao 1″ verdadeiro=”0″/>
<opcao texto=”opcao 2″ verdadeiro=”0″/>
<opcao texto=”opcao 3″ verdadeiro=”1″/>
</pergunta>
</flash-quizz>

Espero que tenham gostado de mais este tutorial!

Confira um exemplo do jogo funcionando!

@braços e fiquem com Deus!

Hugo Ferreira da Silva – Administrador do Portal MXSTUDIO

Qualquer dúvida, envie um e-mail para hufersil@mxstudio.com.br ou acesse nosso fórum.

Escrito por hugo on março 20, 2006. Arquivado em Flash. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

10 respostas a Criando um quizz em Flash e XML

  1. ola!! O link para ver o exemplo funcionando nao funciona. ajuda please!

  2. Salve Hugo,

    Esou com erro em 3 linhas. CHeguei a lhe enviar um e-mail, pode verificar o problema?

    Obrigado

  3. Funcionou, Agora irei incrementar o restante.

  4. Aí tudo bem!

    Não consegui fazer funcionar esse quizz, alguem pode me ajudar?? .. a principio fiz tudo certo, mas quando executo o o arquivo swf aparece “undefined” e só….

    feitoria!

  5. Deu tudo certo, mas o Quizz não dá continuidade.
    Ele faz a primeira pergunta e não vai para a próxima!

  6. Olá! não tem mais arquivo para download, será que você pode me enviar? Obrigada!

  7. http://areaseg.com/showdesst.html

    estou desenvolvendo este quiz, mais tem muitas coisas que eu não sei fazer

  8. Thiago Fernandes

    Cara tentei seguir seu tutorial mais não consegui….se puder me ajudar me mandando o fla e xml….t+ obrigado….

  9. Consegui fazer funcionar direitinho, mas preciso colocar som (locução) nas perguntas. Como faço isso?
    Obrigada.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>