Enquete em Flash, utilizando ASP

A interação Flash com
ASP nos deu a possibilidade de fazer nossos sites
com mais interatividade com o usuário final. Com essa
integração, podemos pegar informações
do usuário, armazenar em um Banco de Dados e retornar
a informação para o usuário. Neste exemplo, você
aprenderá a fazer uma enquete de votação no flash
junto com ASP. Como não sei o grau de conhecimento
de todos que irão ler este tutorial, vamos começar
do começo.

Configuração do Banco de dados.

Agora vamos para a configuração
do [DB] “Banco de Dados”. É necessário ter
o Microsoft Data Access. Clique no menu Iniciar >
Painel de controles. Selecione o ícone do ODBC >
ODBC Data Sources [32bit]. Na janela que se abrirá,
clique em Sistema DNS > Adicionar. Abrirá outra
janela. Escolha Driver Microsoft access (*.mdb). Clique
em concluir, escreva um nome para o arquivo.

Neste exemplo enquete.
Na descrição, coloque tutorial enquete Ponto Flash.
Clique em criar e escolha um diretório. Neste caso
o mesmo descrito acima, na pasta enquete ex: C:Inetpubwwwrootenquetedb

Vamos agora ao que interessa.

   Abra
o seu bloco de notas ou um outro editor de ASP, crie
um arquivo que fará a conexão dos seus arquivos ASP
através do ODBC, nomeie este arquivo como "open_conn.inc".
Neste arquivo digite:

<%
REM +++ open Conn +++
Set conn = createobject(“adodb.connection”)
‘enquete é o nome do seu banco de dados
conn.open(“enquete”)
%>

Crie outro arquivo com o nome de "close_conn.inc".
Neste arquivo digite:

<%
REM +++ Close Conn +++
Conn.close
Set conn = Nothing 
%>

Crie outro arquivo com o nome de "del_tab.asp".
Este arquivo irá apagar dados em seu DB. Nele
digite:

<!— #include
file=”open_conn.inc” —>
<% REM +++ APAGAR TABELA+++
Instrucao_SQL = “drop table enquete001 “
set rs = conn.execute(Instrucao_SQL)
%>
<!— #include file=”close_conn.inc” —>

Crie outro arquivo com o titulo de
"add_tab.asp". Este
arquivo irá inserir as tabelas de seu DB, neste arquivo
digite:

<!—
#include file=”open_conn.inc” —>
<% REM +++ add tab +++
Instrucao_sql = “create table enquete001 (” &_
“(voto1 integer, voto2 integer, voto3 integer)
Set rs = conn.execute(instrucao_SQL)

Instrucao_SQL”insert into enquete001″&_
“voto1, voto2, voto3) values (0,0,0)”
set rs = conn.execute(Instrucao_SQL)
%>
<!— #include file=”close_conn.inc” —>

Crie outro arquivo com
o titulo de "resposta.asp"
e coloque isso:

<!— #include
file=”open_conn.inc” —>
<%
qualvoto = “voto” & request(“resposta”)
sqlconsulta = “select” & qualvoto & “from enquete001”
Set rs = conn.execute(sqlconsulta) 
sqlupdate= “update enquete001 set ” &_
qualvoto & ” = ” & rs(qualvoto)+1
Set rs = conn.execute(sqlupdate)
sqlconsulta = “select voto1, voto2, voto3 from enquete001”
Set rs = conn.execute(sqlconsulta)
totalvotos = rs(“voto1”) + rs(“voto2”) + rs(“voto3”)
voto1 = int(rs(“voto1”) / totalvotos * 100)
voto2 = int(rs(“voto2”) / totalvotos * 100)
voto3 = int(rs(“voto3”) / totalvotos * 100)
arquivoflash = “resposta.swf?voto1=” & voto1 &_
“&voto2= ” & voto2 & “&voto3=” &
voto3 &_
“&total=” & totalvotos
%>
<!— #include file=”close_conn.inc” —>
<%
response.redirect(arquivoflash)
%>

Ufa um pouco cansativo, mas com um
resultado compensativo.

Agora vamos ao Fflash.

Abra seu Flash 5. No quadro 1, faça um layout para
sua enquete. Na parte superior da área de trabalho
escreva: Qual tutorial você mais procura na
Internet?

No centro da sua área de trabalho, faça uma bolinha
“como um botão de rádio”. Transforme essa bolinha
em um botão (F8). Em seguida selecione o botão que
você acabou de criar (a bolinha), transforme-o
em um clipe de filme (F8). Clique o botão direito
do mouse na bolinha que você acaba de transformar
em um clipe de filme, e escolha editar no local.

Na edição do clipe de filme, crie mais
uma camada. Nomeie a camada onde está a bolinha
de "opção" e a outra camada de "seleção".
No primeiro quadro da camada "seleção",
coloque uma ação de stop. Na camada "opção",
clique sobre a bolinha e pressione CTRL + C e em seguida
CTRL + SHIFT + V, para colar outra bolinha no mesmo
local. Com a seta, posicione a nova bolinha abaixo
da outra. Faça a mesma coisa mais uma vez, para você
ter 3 bolinhas, uma abaixo da outra.

Agora vamos dar uma ação para essas bolinhas

Na camada "opção",
no 1º quadro, selecione a 1º bolinha de cima para
baixo. Clique com o botão direito do mouse
sobre ela e escolha "ações". Diugite este
comando:

on (release)
{
set (/:resposta, 1);
gotoAndStop (2);
}

Ainda na camada "opção" clique
na 2º bolinha e coloque a ação:

on (release)
{
set (/:resposta, 2);
gotoAndStop (3);
}

Na camada "opção",
clique na 3º bolinha e coloque esta ação.

on
(release) {
set (/:resposta, 3);
gotoAndStop (4);
}

Ainda na camada "opção",
no 4º quadro, pressione F5 para limpar os quadros
anteriores.

No segundo quadro camada "seleção",
faça uma bolinha menor que a que você criou
anteriormente e dê uma cor diferente ou se preferir
use um X. Posicione a bolinha menor sobre a 1º bolinha
maior, para dar uma impressão de que esta bolinha
esta selecionada. No 3º quadro, pressione F6 e posicione
a bolinha menor sobre a 2º bolinha maior. Repita os
passos no quarto quadro. Tanta bolinha que até
fiquei tonto. :))

Agora volte a cena inicial, escreva
na frente das bolinhas como no exemplo abaixo, onde
o "0" representa a bolinha que você
criou:

0
ASP
0 FLASH
0 PHP

Crie um botão com o título
"enviar". Coloque
o botão no canto inferior da área de trabalho. Neste
botão coloque a seguinte ação:

on (release)
{
if (resposta <> 0) {
getURL (“resposta.asp”, “”, “POST”);
}
}
on (release, rollOver) {
if (resposta = 0) {
mensagem = “Escolha uma opção por favor “;
}
}
on (release) {
texto = “”;
}

Agora crie um campo de texto dinâmico.
Para fazer isso, clique na ferramenta de texto e clique
em "campo de texto". Selecione o
campo que você criou e vá em propriedade.
Dê-lhe o nome de "texto". Salve o
filme com o nome "votar.fla".

Estamos quase no fim

Abra um novo filme no flash, faça um
layout de sua preferência, desde que combine
com o layout que você criou no filme anterior
(o:

Crie 3 campos de textos um abaixo do outro, como as
bolinhas do filme anterior. Dê o valor de 100%
para cada um. Coloque o nome da variável do
1º campo de texto de "voto1". Faça isso
nos outros dois com "voto2" e "voto3".

Crie um retângulo com a cor diferente do fundo
que você escolheu para o fundo da sua área
de trabalho, transforme-o em um clip de filme e lhe
dê o nome de retângulo. Em seguida, duplique
o filme que você criou mais duas vezes, totalizando
3 filmes de retângulo. Coloque os clips de filme
na frente do campo de texto que você criou,
ficando mais ou menos assim:  

ASP	campo de texto  100%	Retangulo clip de filme
FLASH	campo de texto  100%	Retangulo clip de filme
PHP	campo de texto  100%	Retangulo clip de filme

Selecione o 1º retângulo que
você transformou em filme e lhe dê o nome
de instância de "Bt1" e nos outros
retângulos, coloque a instância de "bt2"
e "bt3".

Na parte inferior da área de trabalho, faça
mais um campo de texto retângular. Coloque nele
o valor "total" e na variável, você
coloca "0000".

Crie uma nova camada e dê a ela o nome de "ações".
No 1º quadro da camada ações coloque a seguinte ação:

// Desenvolvimento:
Emerson Rocha , emerson@wxp.com.br
// emerson@angloudi.com.br 
contador1 = “0”;
contador2 = “0”;
contador3 = “0”;
setProperty (“/bt1”, _xscale, “voto1 / 2”);
setProperty (“/bt2”, _xscale, “voto2 / 2”);
setProperty (“/bt3”, _xscale, “voto3 / 2”);

No
terceiro quadro da mesma camada coloque 

if (contador1
< voto1) {
contador1 = “contador1 + 1”;
setProperty (“/bt1”, _xscale, “contador1 /2”);
gotoAndPlay (2);
}
if (contador2 < voto2) {
contador2 = “contador2 + 1”;
setProperty (“/bt2”, _xscale, “contador2 /2”);
gotoAndPlay (2);
}
if (contador3 < voto3) {
contador3 = “contador3 + 1”;
setProperty (“/bt3”, _xscale, “contador3 /2”);
gotoAndPlay (2);
}

No 4º quadro da mesma camada coloque
um STOP.

Salve este arquivo como "resposta.fla".

Agora estamo realmente no finalzinho

Coloque os arquivos swf dentro do HTML, com um ediitor
de HTML de sua preferência. No meu caso DREAMWAVER.

Copie a pasta onde você salvou
totos os arquivos que acabamos criar e cole no diretório
C:Inetpubwwwrootenquete. Onde enquete é o nome
da pasta que você deve criar. Abra o seu PWS
e inicie o programa.

Em seguida clique no link na parte
superior da janela do programa, onde estará
o endereço http://seucomputador/. Para chegar até
sua pasta você deve entrar no endereço http://seucomputador/enquete.

Quando abrir este arquivo, você
estará criando as tabelas de seu DB.

Clique aqui para fazer o download do arquivo .ZIP com os arquivos deste tutorial.