Urna eletrônica
Veja como criar
um sistema de votação
em Flash e PHP
POR ANDRé CARDOZO
Um sistema de votação é uma boa maneira de estimular a interatividade com visitantes de qualquer site, independentemente do assunto abordado. Neste tutorial, explicaremos como criar uma votação usando Flash e PHP.
Para completar o tutorial, é necessário baixar o arquivo zipado, disponível em www.info.abril.com.br/download/4081.shtml. O tutorial foi feito no Flash MX, e para que a votação funcione os arquivos devem estar em um servidor com suporte a PHP.
1. No Flash, criamos um arquivo novo e, por meio do menu Modify/Document, deixamos o documento com 550 pixels de largura e 600 de altura. Clicamos em OK para aplicar as novas medidas.
2. Agora, renomeamos a única camada da Linha do Tempo para “fundo”. Vamos criar um fundo com um gradiente em tons de azul. Abrimos o painel Color Mixer, por meio do atalho Shift+F9. Clicamos na seta da esquerda e escolhemos um tom de azul-escuro. Depois, clicamos na seta da direita e escolhemos um tom de azul mais claro. O gradiente é exibido no painel Color Mixer.
3. Com o gradiente montado, clicamos na ferramenta de desenho retangular e traçamos um retângulo para cobrir toda a área do arquivo. A cor de fundo foi aplicada. Para completar o fundo, importamos a imagem da bola de futebol, por meio do menu File/ Import, e a posicionamos no canto superior direito da tela. Por fim, usamos a ferramenta Linha para desenhar quatro linhas horizontais no alto da tela, e completar a diagramação do cabeçalho.
4. Criamos uma nova camada, de nome “texto”, e, com a ferramenta de texto, digitamos um título para a página, a pergunta da votação e o nome dos oito times da enquete: Flamengo, Atlético-PR, São Paulo, Santos, Corinthians, Vasco, Botafogo e Palmeiras. Todas as caixas de texto são do tipo estático.
5. No painel Linha do Tempo, criamos uma camada de nome “escudos” e importamos os ícones com o brasão de todos os times da votação. Depois, usamos a ferramenta Seta para posicioná-los ao lado do nome de cada equipe.
6. Criamos mais uma camada no painel Linha do Tempo. Ela tem nome “bot_vota” e abrigará o botão de votação. Nessa camada, acionamos o menu Window/Common Libraries/Buttons. No painel Buttons, escolhemos um botão e o arrastamos para o palco. Na janela de propriedades do botão, definimos sua cor. Depois, ainda com o botão selecionado, abrimos a janela de ações, por meio da tecla F9, e digitamos o seguinte código para o botão
on (release) {
vota();
}
7. Mais uma vez, criamos uma camada no painel Linha do Tempo. Ela se chama “as” e abrigará o script de nossa votação. Com o primeiro frame da camada selecionado, abrimos a janela de ações, usando o atalho F9, e colamos o código do arquivo “actionscript.txt”, que faz parte do arquivo zipado, mencionado no início da matéria. Em resumo, esse código é o responsável por passar para o script PHP os dados do time escolhido pelo internauta.
8. Acima da camada “as”, criamos outra camada de nome “todos times”. Ela abrigará o movie clip que receberá o escudo do time escolhido pelo usuário. Com a camada criada, vamos gerar o movie clip.
9. Acionamos o menu Insert/ New Symbol, escolhemos a opção Movie Clip e clicamos em OK. Estamos agora no modo de edição do movie clip. Nele, deixamos o primeiro keyframe em branco.
10. Nos oito frames seguintes, inserimos um keyframe em branco, usando a tela F7, e importamos o escudo dos oito times, inserindo um em cada frame. Utilizamos a janela de alinhamento, acionada por meio de Ctrl+K, para garantir que todos os escudos estejam na mesma posição. Agora, nosso movie clip tem nove frames: um vazio e os outros oito com o escudo dos times.
11. Clicamos no botão Scene 1 para sair do modo de edição do clipe. Nosso movie clip agora está na Biblioteca do Flash. Clicamos sobre ele e o arrastamos para a cena, dentro da camada “todos times”.
12. Acima da camada “todos times”, criamos uma camada de nome “controle”. Ela abrigará o movie clip do controle de dados. Nessa camada, acionamos o menu Insert/New Symbol. Escolhemos o tipo Movie Clip e clicamos em OK. Depois, clicamos no botão Scene 1 para sair do modo de edição do movie clip. Ele agora está na bibilioteca.
13. Arrastamos o movie clip para a camada “controle” e damos a ele o nome de instância “controleDados” na janela de propriedades. Esse é o nome de identificação do movie clip nos scripts. Posicionamos o clipe fora da cena.
14. Criamos outra camada, a última de nossa votação. Ela tem o nome “botoes” e abrigará os botões invisíveis que ficarão sobre o escudo de cada time. Nessa camada, acionamos o menu Insert/New Symbol. Escolhemos a opção Button e clicamos em OK. Estamos no modo de edição do botão.
15. Clicamos no estado Hit e adicionamos um keyframe em branco, usando a tecla F7. Nesse keyframe, desenhamos um círculo. Seu tamanho e cor não importam, pois ele será transparente e suas dimensões poderão ser definidas mais tarde. Clicamos em Scene para sair do modo de edição do botão.
16. Arrastamos oito cópias do botão criado no passo anterior para a cena e as posicionamos sobre o escudo das equipes. Depois, selecionamos o botão do primeiro time e digitamos o seguinte código
on (release) {
escolheTime(1);
}
Repetimos o código para os outros botões, apenas aumentando o número entre parênteses em 1. Assim, teremos os valores 2, 3, 4, 5, 6, 7, e 8 para os botões restantes.
17. A primeira cena de nossa votação está completa. Temos oito camadas, cada uma com um só frame. Vamos agora passar para o frame 2, que corresponde à página de resultado. As camadas “fundo”, “escudos”, “as” e “controle” não mudam no segundo frame. Por isso, basta selecionar cada uma delas e teclar F5 para adicionar um frame. Assim, seu aspecto é mantido.
18. Na camada “bot_vota”, inserimos um keyframe em branco no segundo frame, clicando F7. Repetimos o processo nas camadas “todos times” e “botoes”.
19. Na camada “texto”, criamos um keyframe no segundo frame, por meio da tecla F6. Trocamos a pergunta da votação pelo texto “Confira o resultado parcial da votação”. Depois, criamos uma caixa de texto ao lado do escudo do primeiro time. Na janela de propriedades da caixa, escolhemos a opção Dynamic Text. Na caixa Instance Name, digitamos “result_1_txt”. Essa é a caixa de texto que receberá o número de votos do primeiro time da votação.
20. Copiamos e colamos a caixa na cena para criar sete cópias dela, uma para cada time restante. Posicionamos as caixas ao lado de cada time e apenas alteramos o nome de instância, aumentando em 1 o algarismo entre as linhas do nome. Assim, temos “result_2_txt”, “result_3_txt”, “result_4_txt”, “result_5_txt”, “result_6_txt”, “result_7_txt” e “result_8_txt”.
21. Acionamos o atalho Shift+F12 para publicar os documentos SWF e HTML. Para que a votação funcione, é necessário jogar os dois arquivos no mesmo diretório dos arquivos votacao.php e votos.txt, que fazem parte do arquivo zipado, mencionado no início da matéria.
A interface da votação
CENA: O primeiro frame do arquivo funciona como página de entrada da votação
BIBLIOTECA: Painel do Flash abriga os objetos usados no arquivo
Matriz da TIM é acusada de truste (03/04/2009, 07h46)
Exclusivo para assinantes da INFO
Exclusivo para assinantes da INFO e compradores da última edição