Criando um quizz em Flash e XMLVamos estudar neste artigo como criar um simples joguinho de peruntas e respostas, utilizando XML e Flash. Pré-requisitos:
Ao longo deste estudo, iremos abordar:
Para auxiliar e facilitar o seu estudo deste artigo, estude também os artigos falando sobre XML: Criando a interfaceIremos 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 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. |
ola!! O link para ver o exemplo funcionando nao funciona. ajuda please!
Salve Hugo,
Esou com erro em 3 linhas. CHeguei a lhe enviar um e-mail, pode verificar o problema?
Obrigado
Funcionou, Agora irei incrementar o restante.
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!
Deu tudo certo, mas o Quizz não dá continuidade.
Ele faz a primeira pergunta e não vai para a próxima!
Olá! não tem mais arquivo para download, será que você pode me enviar? Obrigada!
http://areaseg.com/showdesst.html
estou desenvolvendo este quiz, mais tem muitas coisas que eu não sei fazer
que mierda
Cara tentei seguir seu tutorial mais não consegui….se puder me ajudar me mandando o fla e xml….t+ obrigado….
Consegui fazer funcionar direitinho, mas preciso colocar som (locução) nas perguntas. Como faço isso?
Obrigada.