Para entendermos a mecânica de envio de e-mail, precisamos entender o formato cliente-servidor da comunicação na Internet.

Quando acessamos uma página na Internet, tudo que vemos é o resultado do processamento de um arquivo que está hospedado no servidor da página. Para tanto, existem tecnologias cujo objetivo é possibilitar ao desenvolvedor da página definir como o conteúdo a ser enviado paro visitante será gerado.

Dessa forma, temos duas perspectivas na aplicação: a perspectiva do desenvolvedor, que, por exemplo, ao acessar o código fonte da página verá as diversas regras e algorítmos que definem como o conteúdo será gerado, e a persperctiva do cliente, que ao acessar o código-fonte da página verá apenas o conteúdo gerado, e desconhece as regras.

Para definir as regras para geração dinâmica de conteúdo existem linguagens como PHP, ASP ou JSP. Essas linguagem são chamadas “server-side”, pois são executadas no lado servidor. Para definir o formato, layout e mecânicas de interação da página existem linguagens como HTML, Javascript e CSS. São linguagens “client-side” pois são executadas no lado cliente (no navegador do visitante).

Para enviarmos um e-mail precisamos utilizar um servidor de e-mail. Os servidores de hospedagem de sites frequentemente possuem um servidor de e-mail integrado. Quando, por exemplo, configuramos nossa conta de e-mail no outlook (informando smtp, pop3, etc), estamos configurando a conexão entre o outlook e o servidor de e-mail, para que ele possa realizar os envios.

Da mesma forma, para enviarmos um e-mail através de uma aplicação Actionscript precisamos utilizar um servidor de e-mail. A forma mais fácil de fazer essa conexão entre nossa aplicação e o servidor de e-mail é utilizar uma página em linguagem “server-side”.

Nosso projeto em Actionscript envia os dados que desejamos enviar para a página e essa página conecta com o servidor de e-mail, enviando o e-mail. Nesse exemplo utilizarei uma página em linguagem PHP, mas isso se aplica a outras linguagens. Vamos ao exemplo!

Crie um formulário no seu projeto em Flash. Para isso crie campos de texto do tipo InpuText (nome, email e mensagem). Nomeie eles de nome_txt, email_txt e mensagem_txt. Crie também um campo de texto chamado resultado_txt (para exibirmos o resultado do envio) e um botão enviar_btn. Veja a figura (o exemplo estará disponível para download ao fim do tutorial):

Exemplo do tutorial.

O código para que nosso formulário funcione é apresentado a seguir:

// Associamos o click no botão enviar à função de envio de e-mail.
enviar_btn.addEventListener(MouseEvent.CLICK, EnviarEmail);

function EnviarEmail(evt)
{
	resultado_txt.text = "Enviando mensagem... aguarde!";

	// Cria o objeto que realizará o envio dos dados para a página
	// envio_email.php.
	var loader:URLLoader = new URLLoader();

	// Criamos o listener que será chamado ao fim da execução do script
	// de envio de e-mail.
	loader.addEventListener(Event.COMPLETE					, FimLoad);

	// Criamos os listener que serão chamados em caso de erro ao tentar abrir
	// o script (arquivo não encontrado ou em outro domínio por exemplo).
	loader.addEventListener(IOErrorEvent.IO_ERROR				, ErroLoad);
	loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR	, ErroLoad);	

	// Definimos qual script enviará o e-mail e como serão enviados os
	// parâmetros para esse script.
	var request:URLRequest = new URLRequest("envio_email.php");
	request.method = "POST";

	// Definimos os parâmetros a serem passados para o script
	// envio_email.php.
	var variables:URLVariables = new URLVariables();
	variables.nome	 	= nome_txt.text;
	variables.email		= email_txt.text;
	variables.mensagem	= mensagem_txt.text;
	request.data 		= variables;

	// Solicitamos a execução do Script.
	loader.load(request);
}

function FimLoad(evt)
{
	// Exibimos o resultado do envio.
	resultado_txt.text = evt.target.data;
}

function ErroLoad(evt)
{
	resultado_txt.text = "Ocorreu um erro durante o envio do e-mail.";
}

Na linha 2 associamos o clique no botão enviar à função que realiza o envio de e-mail.

Na linha 10 criamos um objeto do tipo URLLoader. Esse objeto é utilizado para se carregar conteúdos de páginas externas. Ele servirá como ponte entre nossa aplicação em Flash e a página em PHP que realizará o envio do e-mail.

Nas linhas 14 dizemos que quando o objeto URLLoader terminar de carregar os dados da página (que definiremos qual será mais adiante) queremos que a função FimLoad seja executada. Nas linhas 18 e 19 definimos que a função ErroLoad deverá ser chamada caso ocorra algum erro durante o carregamento da página.

Na linha 23 criamos um objeto que define qual página deverá ser carregada. Na linha 24 definimos o formato do envio de dados para a página, não irei entrar em detalhes quanto a isso para não alongar o tutorial.

Na linha 28 criamos um objeto que passará parâmetros para a página que iremos carregar. Assim, poderemos definir o nome de quem está enviado o e-mail, o e-mail desta pessoa e a mensagem. Nas linhas 29 a 31 definimos os parâmetros, e na linha 32 associamos esses parâmetros ao objeto Request.

Por fim, na linha 35 solicitamos o carregamento da página. A partir daí entra em execução a página PHP que realizará o envio da mensagem, cujo código é apresentado a seguir:

// Recuperamos os parâmetros enviados através do formulário.
$nome		= $_POST["nome"];
$email		= $_POST["email"];
$mensagem	= $_POST["mensagem"];

// Definimos o título da mensagem (lembrando que '.' é operador de concatenação em PHP).
$assunto	= "Mensagem de " . $mensagem . " (" . $email . ")";

// Definimos o destinatário da mensagem.
$destino	= "seuemail@seudominio.com.br";

// Enviamos o e-mail.
if (mail($destino, $assunto, $mensagem))
{
	echo "Mensagem enviada com sucesso!";
}
else
{
	echo "Não foi possível enviar sua mensagem!";
}

Nas linhas 1 a 3 recuperamos os parâmetros que enviamos através do Actionscript 3. Observe que o nome dos parâmetros têm que ser idêntico aos digitado nas linhas 29 a 31 do código Actionscript. Na linha 13, utilizamos a função mail() do PHP, para realizar o envio do e-mail. Observe que isso tudo ocorre no lado servidor, e até agora não geramos nenhum conteúdo para o cliente (no caso a aplicação Flash). Na linha 15 utilizamos o comando “echo” para enviar um resultado ao cliente, que será recuperado na linha 41 da aplicação Flash, com o acesso a propriedade target.data do evento de fim de load.

Lembre-se que para que esse exemplo funcione você precisa enviá-lo (tanto o arquivo .swf e o arquivo .php) para um servidor de hospedagem com suporte a PHP.

O uso de linguagens dinâmicas (como o PHP) e seu acesso através do Flash possibilita a criação de sistemas que acessam banco de dados, o que é fundamental em diversos projetos.

Vamos ficando por aqui, até o próximo tutorial. Dúvidas?

Barras de rolagem (principalmente a horizontal) afetam a usabilidade e a estética do site. Para evitar esse tipo de problema em aplicações Flash, podemos estabelecer que o nosso conteúdo SWF ocupará 100% da área disponível no navegador, conforme explicado no tutorial “Fazendo o site ocupar toda a área do navegador”.

Entretanto, quando adotamos essa abordagem, o conteúdo Flash é redimensionado de acordo com a resolução e área disponível no navegador do visitante, o que pode resultar em efeitos indesejados na aparência final (redimensionamentos que não seguem proporção por exemplo).

Para evitar esse tipo de efeito, podemos gerenciar o redimensionamento do conteúdo em Flash, reposicionando e redimensionado o conteúdo conforme desejarmos.

Podemos ter, por exemplo, um website composto de um menu esquerdo, um conteúdo central, e um espaço na lateral direita reservado para banners. Eu desejo que o menu esquerdo fique sempre a 20 pixels da margem esquerda do navegador (centralizado verticalmente), que o conteúdo central fique sempre no centro (vertical e horizontal), e que o espaço de banners fique a 20 pixels da margem direita (centralizado verticalmente). Desejo também que o conteúdo não seja rediomensionado de acordo com o tamanho da área do navegador.

Tendo em vista essas especificações, devemos definir os pontos de registro dos movieclips correspondentes de acordo com os respectivos alinhamentos. Exemplo, se eu quero que o menu esquerdo fique alinhado a esquerda horizontalmente e ao centro verticalmente, o ponto de registro do seu movieclip deverá estar alinhado a esquerda e centralizado verticalmente, conforme a figura a seguir:

Definindo corretamente o ponto de registro

Essa configuração do ponto de registro não é obrigatória, mas facilitará o nosso trabalho ao alinhar o elemento. A mesmo lógica se aplica a outros tipos de alinhamento. Por exemplo, se desejo alinhar um elemento ao centro (horizontalmente e verticalmente), seu ponto de registro deve estar no centro.

Após definirmos corretamente os pontos de registro, precisamos dizer ao flash que não desejamos que ele redimensione o conteúdo de acordo com a área disponível. Precisamos também, definir uma orientação para o stage, quando o arquivo flash estiver em tamanhos superiores ou inferiores ao tamanho original do stage. Para isso, usamos o código a seguir:

// Indica que o conteúdo não dever ser redimensionado.
stage.scaleMode = StageScaleMode.NO_SCALE;

// Indica que caso a área do flash (no navegador por exemplo) seja
// maior ou menor que o stage, o ponto 0,0 do stage deve-se posicionar
// no canto superior (TOP) esquerdo (LEFT) da área.
stage.align		= StageAlign.TOP_LEFT;

Feito isso, podemos tratar o redimensionamento da área de conteúdo com facilidade. Para exemplificar, vou utilizar 3 conteúdos, um que será alinhado a 10 pixels da margem superior esquerda, outro que será alinhado ao centro e outro que será alinhado a 10 pixels da margem inferior direita, conforme a figura a seguir (o código fonte deste tutorial encontra-se no fim do texto):

Estrutura do exemplo apresentado nesse tutorial

Nesse exemplo, nomearei os movieclips dos quadrados como quadEsqTop_mc, quadCent_mc e quadDirBaixo_mc (respectivamente da esquerda para direita).

Para realizar o reposicionamento dos elementos a partir do redimensionamento do stage criamos um ouvinte para o evento “Event.RESIZE”. O evento “Event.RESIZE” sempre que o conteúdo flash é redimensionado. Veja:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align		= StageAlign.TOP_LEFT;

// Criamos um ouvinte para o evento Event.RESIZE (redimensionamento).
stage.addEventListener(Event.RESIZE, Redimensionamento);
function Redimensionamento(evt)
{
	// Alinhamento a 10 pixels da margem superior esquerda.
	quadEsqTop_mc.x = 10;
	quadEsqTop_mc.y = 10;

	// Alinhamento ao centro.
	quadCent_mc.x	= stage.stageWidth 	/ 2;
	quadCent_mc.y	= stage.stageHeight	/ 2;

	// Alinhamento a 10 pixels da margem inferior direita.
	quadDirBaixo_mc.x = stage.stageWidth 	- 10;
	quadDirBaixo_mc.y = stage.stageHeight 	- 10;
}

// Chamamos a função inicialmente para que os quadrados posicionem-se
// nas margens desejadas.
Redimensionamento(null);

Na linha 05, associamos o evento de redimensionamento à função Redimensionamento, que irá tratar esse evento. Nas linhas 09 a 18 posicionamos os quadrados de acordo com o desejado. Utilizamos as propriedades stage.stageWidth e stage.stageHeight para saber a largura e altura atuais do stage.

Na linha 23 realizamos uma chamada à função, para assegurar que assim que o site seja carregado a função seja disparada, e a distribuição dos elementos seja aplicada.

Experimente rodar esse exemplo no flash e redimensionar a janela do .SWF. Veja que as margens se mantêm as mesmas, e quadrado central permanece sempre no centro.

Dúvidas, é só perguntar! Até o próximo artigo!

Tutorial actionscript – Reposicionando elementos após redimensionamento da janela

Assim, é importante conhecer algumas diretrizes para se obter melhor desempenho em projetos em Flash / Actionscript 3. A seguir, enumeramos numa ordem de importância, as diretrizes para se otimizar o desempenho de sua aplicação em flash.

1. Sempre que possível, use bitmaps ao invés de vetores

O flash se diferenciou na Web por ser um programa vetorial. O conteúdo em vetor era extremamente adequado para a Web de alguns anos atrás, por ser leve para ser transferido pela rede. Hoje, o tamanho final do projeto (tamanho em disco) ainda é um fator importante, porém não crucial. É importante encontrar um equilíbrio entre símbolos em formato de vetor e símbolos em formato de imagem.

Vetores são pequenos pois representam imagens através de funções matémáticas. Entretanto, cada vez que um vetor é desenhado na tela, a função que o representa precisa ser executada, para que ele seja convertido em uma representação visual, e posteriormente desenhado. Uma imagem, por sua vez, precisa apenas ser desenhada. Da pra imaginar a diferença de desempenho não é?

Assim a dica é: se você precisa otimizar o desemenho do seu projeto, só utilize vetores onde for indispensável.

2. Evite máscaras.

Máscaras forçam o flash player a calcular o que deve e o que não deve ser renderizado a cada desenho de quadro. Caso a máscara possua um formato complexo a situação se agrava ainda mais. Dessa forma, sempre que possível, utilize um shape simples, ou mesmo uma imagem, sobre o conteúdo que deseja mascarar, ao invés de utilizar uma máscara.

3. Vídeos e imagens (PNGs) com canal de alpha

Assim como para máscaras, os canais de alpha tornam complexo a renderização de um filme ou imagem. Dessa forma, evite utilizá-los sempre que possível.

4. Use cacheAsBitmap (da forma correta)

“cacheAsBitmap” é uma propriedade dos MovieClips que permite-nos informar ao flash que aquele MovieClip deverá ser armazenado em memória como um Bitmap e não como um vetor. Dessa forma, ao renderizar o MovieClip o flash não precisará fazer calcular a função que representa o vetor, pois ele ja terá em memória o vetor em um formato de bitmap.

“cacheAsBitmap” parece então ser a solução para todos os problemas de desempenho do flash, certo? Não é bem assim.Você só deve utilizar “cacheAsBitmap” em MovieClips que não possuem animação e que não serão alterados ao longo da execução do filme (rotação, escalonamento, aplicação de filtros, etc). Caso o filme seja alterado, o flash precisará recalcular a função que representa o vetor, o que tornará o processo ainda mais lento que se ele não estivesse marcado como “cacheAsBitmap”.

5. ENTER_FRAME e setInterval

Crie o mínimio de event listeners para o evento ENTER_FRAME. Em algumas aplicações, como os jogos, o ideal é que você crie apenas um event listener para esse evento, e ele centralizará todos os controles. Lembre-se também de remover os event listeners quando a captura do evento não for mais necessária (utilize “removeEventListener()”).

O mesmo se aplica ao setInterval. Crie o mínimo de intervals possível.Utilize clearInterval para remover o interval criado da memória e parar sua execução.

6. Recorte símbolos grandes

Caso você possua símbolos que, por serem grandes, não estarão completamente visíveis na tela, recorte as partes não visíveis.

7. Complexidade algorítmica

Faça uma análise da complexidade algorítimica dos seus códigos actionscript. Otimize seus códigos!

Essas são as principais dicas para se obter melhores desempenhos nas aplicações. Qualquer dúvida é só perguntar! Até o próximo artigo!

Para que nosso site ocupe 100% da área disponível, precisamos fazer duas coisas (os arquivos fontes deste tutorial estão disponíveis ao fim do texto):

1. Adicionar um CSS ao HTML da página que inclui o arquivo .SWF, indicando que não desejamos nenhum tipo de borda no site. O CSS é uma linguagem padrão que trabalha junto ao HTML na formatação/estilização de sites. É uma linguagem cujo conhecimento é importantíssimo para Web Designers. Veja o exemplo a seguir.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Virtualize Interatividade Digital - Tutorial Actionscript</title>
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.embedSWF("exemplo.swf", "exemplo", "100%", "100%", "9.0.0", "expressInstall.swf");
		</script>
		<style type="text/css">
		body
		{
			height:100%;
			margin:0;
			padding:0;
		}
		</style>
	</head>
	<body bgcolor="#000000">
		<div id="exemplo">
			<h1>Conteúdo alternativo</h1>
			<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
		</div>
	</body>
</html>

2. Precisamos indicar que o flash deve ocupar 100% da altura e largura da página, o que fazemos utilizando os parâmetros da tag object ou do SWFObject. O SWFObject é uma pequena biblioteca em Javascript, que permite a inclusão de conteúdo Flash em páginas HTML, através de um comando Javascript. Essa bibliteca nos livra da preocupação em identificar se o usuário possui Flash player ou Javascript ativado. Aconselho utilizá-la em seus projetos. Veja o código:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Virtualize Interatividade Digital - Tutorial Actionscript</title>
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.embedSWF("exemplo.swf", "exemplo", "100%", "100%", "9.0.0", "expressInstall.swf");
		</script>
		<p><style type="text/css">
		body<
		{
			height:100%;
			margin:0;
			padding:0;
		}
		</style>
	</head>
	<body bgcolor="#000000">
		<div id="exemplo">
			<h1>Conteúdo alternativo</h1>
			<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
		</div>
	</body>
</html>

Nas linhas 06 a 09, importamos e fazemos uso da biblioteca SWFObject. Na linha 08, está o comando que realiza toda a “mágica” do processo. O 1° parâmetro deste comando é o arquivo .swf a ser exibido. O 2° é o identificador do arquivo, um nome que daremos para nosso conteúdo. O 3° e 4° parâmetros são as dimensões do arquivo, largura e altura, o qual pode ser fornecido em percentagem. O 5° parâmetro é a versão de Flash Player necessária para rodar o arquivo.O 6° parâmetro é um utilitário para instalação automática do Flash Player que já vem com o SWFObject.

Como falei, o SWFObject identifica a versão do Flash do visitante. Caso a versão seja inferior a exigida o conteúdo da div de id correspondente ao 2° parâmetro da chamada “swfobject.embedSWF()”. Caso contrário, o SWF será exibido no lugar da div.

Isso é o suficiente para o seu conteúdo Flash ser executado ocupando toda a área do navegador. Observe que quando definimos tamanho 100% para o conteúdo flash, o conteúdo também cresce, e não apenas o Stage. Isso não é desejado na maioria dos projetos. Nos próximo artigos veremos como evitar isso e também como alinhar os elementos do site de acordo com o redimensioanamento.

Dúvidas, é só perguntar! Até o próximo artigo!

Tutorial actionscript – Fazendo o site ocupar toda a área do navegador

Imagine por exemplo um Website que carrega, em sua galeria de fotos, as imagens presentes em um arquivo XML, ou a lista de imagens presentes num arquivo de texto (na sessão intermediário você encontra artigos descrevendo como carregar arquivos XML).

Não sabemos quantas imagens estarão no XML, a quantidade será variável. Dessa forma, precisamos de um mecanismo para carregar as imagens enquanto houver imagens.

Observe que nesse exemplo, temos um processo a se repetir (carregar as imagens) e uma condição (enquanto houver imagens).

Para execução desse tipo de tarefa o Action Script nos fornece os laços de repetição, dentre os quais destacam-se o laço while (que significa enquanto) e o laço for (que significa para). Vejamos a sintaxe deles:

while (condição)
{
	// Comandos.
}

for (var nomeDaVariavel = valorInicial; condicao; comando)
{
	// Comandos.
}

Vamos a um exemplo simples. Vamos criar uma função para calcular o fatorial de um número. O fatorial de um número é o próprio número multiplicado por todos os seus antecessores positivos. Por exemplo, o fatorial de 3 e 3 x 2 x 1 = 6. O fatorial de 5 é 5 x 4 x 3 x 2 x  1 = 120.

Observamos nesse exemplo, que trata-se de uma tarefa repetitiva, onde iremos empregar um laço de repetição. A tarefa a se repetir é a multiplicação e a condição é que o valor a ser mutiplicado seja maior que zero.

Vamos para o Flash. Criarei dois campos de texto no stage. Um será do tipo input text (chamarei ele de fatorial_txt), e será usado para que o usuário digite o valor o qual ele deseja calcular o fatorial. O outro será um dynamic text (chamarei ele de resultado_txt) e será usado para que mostremos ao usuário o resultado. Criarei também um botão (de nome calcular_btn). Quando o usuário clicar nesse botão o cálculo será realizado (o arquivo com o exemplo está disponível para download no fim do tutorial):

Criando os campos de texto.

Vamos ao código:

// Função que realiza o cálculo do fatorial. Essa função é invocada quando
// o usuário clica em calcular.
function Fatorial(evt: MouseEvent)
{
	// Verifica se o usuário informou o valor.
	if (fatorial_txt.text == "")
	{
		resultado_txt.text = "Informe o valor.";
	}
	else
	{
		// Recupera o valor que o usuário digitou, convertendo-o
		// para o tipo int
		var valor = int(fatorial_txt.text);

		// Cria uma variavel para armazenar o resultado. Inicializa essa variável
		// com valor 1.
		var resultado = 1;

		// Usa o laço while para calcular o resultado.
		while (valor > 0)
		{
			// Multiplica o resultado pelo valor.
			resultado = resultado * valor;

			// Subtrai o valor em 1.
			valor = valor - 1;

			// Exibe o valor (apenas para entendermos melhor).
			trace(valor);
		}

		// Exibe o resultado.
		resultado_txt.text = "O resultado é" + resultado;
	}
}

// Associa o evento de clicar no botão à função que calcula o fatorial.
calcular_btn.addEventListener(MouseEvent.CLICK, Fatorial);

Na linha 06 verificamos se o campo de texto input foi preenchido pelo usuário. Caso não tenha sido, exibimos a mensagem “Informe o valor.” no campo de texto fatorial_txt. Na linha 14 recuperamos o valor digitado pelo usuário. Veja que temos que fazer uma conversão (também chamada cast), usando o comando “int(alvo)”. Isso porque o que o usuário digita em um campo de texto assume o tipo textual (String), e não podemos realizar operações matemáticas em uma String. Assim armazenamos na variável valor o que foi digitado pelo usuário, mas em formato numérico.

Na linha 21 executamos o laço while. Assim, tudo que estiver dentro deste laço (o que é definido pelas chaves { }), vai se repetir enquanto a condição estabelecida entre os parênteses for verdadeira.

Vamos fazer uma simulação para entendermos melhor. Vamos supor que o usuário digite 3 e clique em calcular. A variável resultado é iniciada como 1 e o valor como 3.

Primeira repetição: a condição é satisfeita, tendo em vista que o valor é 3, sendo maior que 0. A linha 24 faz o resultado passar a valer 3. A linha 27 faz o valor valer 2.

Segunda repetição: a condição é satisfeita, tendo em vista que o valor é 2, sendo maior que 0. A linha 24 faz o resultado passar a valer 6. A linha 27 faz o valor valer 1.

Terceira repetição: a condição é satisfeita, tendo em vista que o valor é 1, sendo maior que 0. A linha 24 faz o resultado passar a valer 6. A linha 27 faz o valor valer 0.

Quarta repetição: a condição não é satisfeita, tendo em vista que o valor é 0, não sendo maior que 0. O laço de repetição termina.

O laço for também poderia ser utilizado para solucionar esse mesmo problema. Veja como seria (apenas o trecho do laço de repetição):

for (var resultado = 1; valor > 0; valor--)
{
	// Multiplica o resultado pelo valor.
	resultado = resultado * valor;
}

O laço for é mais compacto. Veja que em apenas uma linha eu consigo declarar e iniciar a variável resultado, estabelecer a condição do laço (valor > 0) e determinar um comando para ser executado a cada repetição (valor–). O comando “valor–;” equivale a “valor = valor – 1;” assim como “valor++;” equivale a “valor = valor + 1;” São apenas formas compactas de se escrever essas idéias.

Nos tutoriais da sub-categoria Intermediário encontraremos exemplos mais completos, que usarão os conceitos aprendidos. Caso tenha alguma dúvida, fique a vontade em postar! Até o próximo tutorial!

Tutorial laços de repetição em Actionscript 3.

Imaginemos, por exemplo, um website de comércio eletrônico. Em uma determinada sessão, teríamos a listagem de produtos, como acontece por exemplo no mercado livre. Podemos desejar que se um produto não tiver imagem, uma imagem padrão seja exibida.

Algo como:

se o produto atual tem imagem então
- exiba a imagem do produto atual
se não
- exiba a imagem padrão
fim

Essa é a forma como devemos pensar as condições que vão compor o nosso projeto. O equivalente a essa lógica, em Action Script, seria:

//...

// Verificamos se a propriedade imagem do objeto que representa o produto
// está definida.
if (produtoAtual.imagem != null)
{
	// Adicionamos a imagem ao local onde a imagem deve aparecer.
	fotoProduto_mc.addChild( produtoAtual.imagem );
}
else
{
	// Adicionamos a imagem padrão ao local onde a imagem deve aparecer.
	fotoProduto_mc.addChild( imagemPadrao );
}

//...

Na linha 5, utilizamos o operador “!=” para verificar a condição de diferença. Tal trecho de código equivale a avaliação da condição:

“imagem do produto atual diferente de nulo”

Utilizamos o valor null (nulo) para verificar se a instância de um objeto, que não seja primitivo, está definida (iniciada).  Sempre que criamos uma variável ela possuirá um valor padrão, até que este seja alterado por nós. Veja na tabela a seguir:

Tipo                                         Valor padrão
————————————————-
String                                           null
int e Number                             0 (zero)
Boolean                                      false
Objetos não primitivos                 null

Para entender melhor, execute o código a seguir:

// Cria uma variavel do tipo boolean (tipo primitivo).
var variavelBooleana: Boolean;

// Cria uma variavel do tipo int (tipo primitivo).
var variavelInteira: int;

// Cria uma variavel do tipo String (tipo primitivo).
var variavelTextual: String;

// Cria uma variavel do tipo MovieClip (tipo não primitivo).
var variavelMovieClip: MovieClip;

// Exibe o valor inicial da variável tipo boolean.
trace("O valor inicial da variável boolean é " + variavelBooleana);

// Exibe o valor inicial da variável tipo int.
trace("O valor inicial da variável int é " + variavelInteira);

// Exibe o valor inicial da variável tipo String.
trace("O valor inicial da variável String é " + variavelTextual);

// Exibe o valor inicial da variável tipo MovieClip.
trace("O valor inicial da variável MovieClip é " + variavelMovieClip);

Voltando ao exemplo do site de comércio eletrônico, comparar o valor da imagem do produtoAtual com null nos fornece uma condição para saber se aquela variável foi preenchida em alguma outra parte do site. Caso ela não tenha sido preenchida, significa que o produto não possui imagem. Assim, adicionamos uma imagem padrão (representada pela variável “imagemPadrao” no exemplo, que poderia ser um MovieClip por exemplo) ao container de imagem (fotoProduto_mc).

Vamos desenvolver agora um exemplo simples e funcional, combinando o uso de Eventos e Estruturas condicionais. Vamos iniciar um projeto flash e criar uma caixa de texto dinâmico, a qual irei chamar de texto_txt:

Estrutura do exemplo

Desejo agora escrever um código Action Script que preencha a caixa de texto informando se o cursor do mouse está a direita ou esquerda do centro do Stage. Vejamos:

// Função que irá tratar o evento de movimentação
// do cursor do mouse.
function AtualizarPosicao(evt: MouseEvent)
{
	// Caso a posição do cursor seja superior à metade da largura
	// do Stage.
	if (mouseX > stage.stageWidth / 2)
	{
		texto_txt.text = "Cursor do mouse a direita";
	}
	// Caso contrário.
	else
	{
		texto_txt.text = "Cursor do mouse a esquerda";
	}
}

// Associamos o evento de mover o mouse sobre o stage à função AtualizarPosicao
stage.addEventListener(MouseEvent.MOUSE_MOVE, AtualizarPosicao);

Na linha 7 introduzimos uma nova propriedade, pertencente a classe MovieClip. Trata-se da propriedade mouseX que indica a posição horizontal do mouse em relação ao MovieClip. Como não especificamos um nome de instância de MovieClip, o flash assumirá a timeline que possui o código Action Script (ou seja, a Timeline principal, o root) como sendo a “dona” dessa propriedade. Também existe a propriedade mouseY que indica a posição vertical, funcionando da mesma forma.

Assim, em “mouseX > stage.stageWidth / 2″ estamos avaliando se a posição horizontal do cursor do mouse (em relação ao movie clip root) é maior que a metade da largura do stage.

É importante lembrar que esse evento será disparado sempre que o cursor do mouse se mover, o que garantirá a exibição da informação atualizada com relação à sua posição.

No próximo artigo discutiremos as estruturas de repetição, que como o nome indica, nos permite executar rotinas de forma repetitiva, enquanto uma condição se manter. Em caso de dúvidas, pergunte! Até lá.

Quando falamos em criação de MovieClips dinamicamente, temos três finalidades:

1. Utilizar o MovieClip criado como container para outros símbolos.
2. Utilizar o MovieClip criado como um elemento de interface modelo (que se repetirá).
3. Desenhar dinamicamente o conteúdo do MovieClip.

Nesse artigo iremos falar sobre a terceira finalidade.

Para acessar os recursos de desenho nós utilizaremos a propriedade graphics dos MovieClips. Essa propriedade nos fornece acesso a um objeto do tipo Graphics, que está presente em todos os MovieClips.
Ao realizar uma chamada a um método da classe Graphics o flash realiza a ação sobre o movieclip proprietário do atributo graphic correspondente. Por exemplo, se você usa “movie_mc.drawCircle()”, você estará desenhando um círculo dentro do MovieClip de nome “movie_mc”. Execute o exemplo a seguir no flash:

// Criamos um MovieClip vazio.
var circulo_mc = new MovieClip();

// Definimos a cor (ox123456) ao desenharmos dentro do MovieClip circulo_mc.
circulo_mc.graphics.beginFill(0x123456);

// Desenhamos um círculo com a cor específicada no comando anterior, na posição
// 100,100 e com raio de 50 pixels.
circulo_mc.graphics.drawCircle(100, 100, 50);

// Adicionamos o MovieClip criado/desenhado ao root.
addChild(circulo_mc);

Os recursos da classe Graphics permite-nos a criação de aplicações muito intessantes. Existem até mesmo programas de edição gráfica disponíveis na Web que utilizam a classe Graphics. Sugiro ao leitor acessar o help da classe Graphics do flash. Lá encontramos a lista completa de métodos da classe.

Vamos a um exemplo um pouco mais complexo. Crie um projeto em flash e adicione dois botões ao stage, um chamado “desenhar_btn” e outro chamado “apagar_btn”. Esses botões vão assumir a função dos botões de lápis e borracha da toolbar de uma aplicação gráfica, como o paint, por exemplo. Veja:

Estrutura do exemplo

Agora adicione o código Actionscript a seguir na primeira frame do projeto:

// Indica se o botão do mouse está pressionado.
var desenhando   = false;

// Indica qual ação deve ser realizada de acordo com o botão clicado (desenhar ou apagar).
var modo		 = "";

// Ouvintes para os eventos do mouse.
stage.addEventListener(MouseEvent.MOUSE_DOWN	, IniciarDesenho);
stage.addEventListener(MouseEvent.MOUSE_UP		, TerminarDesenho);
stage.addEventListener(MouseEvent.MOUSE_MOVE	, Desenhar);

// Ouvintes para os botões.
desenhar_btn.addEventListener(MouseEvent.CLICK	, AlterarModo);
apagar_btn.addEventListener(MouseEvent.CLICK	, AlterarModo);

// Tratador do evento de movimentação do cursor do mouse. Realiza o desenho
// quando o usuário pressiona a tecla do mouse.
function Desenhar(evt: Event)
{
	if (desenhando)
	{
		// Desenha um circulo preto na posição do mouse (lápis).
		if (modo == "desenhar")
		{
			container_mc.graphics.beginFill(0x000000, 0.5);
			container_mc.graphics.drawCircle(mouseX, mouseY, 2);
		}
		// Desenha um circulo branco na posição do mouse (borracha).
		else
		{
			container_mc.graphics.beginFill(0xFFFFFF, 1);
			container_mc.graphics.drawCircle(mouseX, mouseY, 20);
		}

		// Assegura que o desenho estará atrás dos demais elementos (botões).
		if (getChildAt(0) != container_mc) swapChildren(container_mc, getChildAt(0));
	}
}

// Tratador do evento de clique nos botões "Desenhar" e "Apagar".
function AlterarModo(evt: Event)
{
	if (evt.target.name == "desenhar_btn")	modo = "desenhar";
	else modo = "apagar";
}

// Tratadores dos eventos de pressionar e soltar tecla do mouse.
function IniciarDesenho(evt: Event)
{
	desenhando = true;
}

function TerminarDesenho(evt: Event)
{
	desenhando = false;
}

Nas linhas 7 a 10 criamos os EventListeners para os eventos do mouse, pois desejamos que quando o usuário clique no stage ele desenhe ou apague na posição clicada.

Nas linhas 13 e 14 criamos os EventListeners para os botões “desenhar_btn” e “apagar_btn”, pois desejamos que quando o usuário clique nesses botões a aplicação mude o a ferramenta selecionada (lápis ou borracha).

Nas linhas 18 a 38 definimos a função que será executada quando o cursor do mouse for movimentado sobre o stage. Nas linhas 23 a 33 executamos a ação apropriada de acordo com o botão clicado pelo usuário. Caso seja “desenhar”, desenhamos um círculo preto com transparência 0.5 (na linha 25 definimos a cor e o alpha do circulo) de raio 2 e na posição do cursor do mouse (na linha 26 definimos onde o círculo será desenhado e qual o seu raio).

O mesmo se repete para a ação de apagar (linhas 31 e 32), só que dessa vez usamos um raio maios e a cor branca sem transparência.

Nas linhas 41 a 45 definimos o tratador para o evento de clique nos botões, que define a ação de acordo com o botão clicado pelo usuário. Nas linhas 48 a 56 identificamos se o usuário está com o botão do mouse pressionado ou não, armazenando true ou false na variável desenhando.

Em caso de dúvidas é só perguntar! Até o próximo artigo!

Quando falamos em criação de MovieClips dinamicamente, temos três finalidades:

1. Utilizar o MovieClip criado como container para outros símbolos.
2. Utilizar o MovieClip criado como um elemento de interface modelo (que se repetirá).
3. Desenhar dinamicamente o conteúdo do MovieClip.

Nesse artigo iremos falar sobre a segunda finalidade.

O Action Script nos permite criar um MovieClip no Flash e adicioná-lo dinamicamente ao Stage durante a execução da aplicação.

Isso é muito útil e fundamental para algumas finalidades. Imagine por exemplo um jogo de tetris. Desejamos que as peças apareçam aleatoriamente, e que o jogo não tenha fim. Evidentemente não iremos posicionar milhões de peças durante a criação do projeto no Flash, a adição das peças será feita dinamicamente via Action Script. Precisamos apenas dizer pro Flash que ele deve disponibilizar os MovieClips para que possamos adicioná-los dinamicamente.

Para exportamos um MovieClip para uso em Action Script basta clicarmos com a tecla direita do mouse sobre o MovieClip desejado na biblioteca e clicar em “Linkage” (o código fonte deste artigo está disponível no final):

Acessando o Linkage de um item de biblioteca

Será exibida uma janela chamada “Linkage properties”. Nessa janela devemos marcar “Export for ActionScript” e no campo de texto “Class” devemos informar o nome que desejamos utilizar para instanciar esse MovieClip (nome da classe). Vou chamar apenas de “Quadrado”.

Preenchimento da janela Linkage

Após isso será exibida uma janela “ActionScript Warning”. Clique em Ok. Agora, para criarmos dinamicamente uma cópia desse MovieClip, precisamos apenas usar “new Quadrado()”. Veja o exemplo:

// Quantidade de quadrados dinâmicos que criaremos.
var QUANTIDADE_QUADRADOS = 10;

// Laço de repetição que cria os quadrados.
for (var i = 0; i < QUANTIDADE_QUADRADOS; i++)
{
	// Instancia o quadrado (usando a classe que exportamos no linkage)
	var quadrado_mc = new Quadrado();

	// Posiciona o quadrado de acordo com o valor de i.
	quadrado_mc.x = i * 30;

	// Cria os ouvintes de evento para os eventos MOUSE_DOWN (pressionar tecla do mouse)
	// e MOUSE_UP (soltar tecla do mouse) sobre o quadrado em criação.
	quadrado_mc.addEventListener(MouseEvent.MOUSE_DOWN    , IniciarDrag);
	quadrado_mc.addEventListener(MouseEvent.MOUSE_UP    , PararDrag);

	// A propriedade buttonMode define se o MovieClip deverá se comportar como um botão.
	// Se buttonMode for true, o cursor do mouse irá virar uma mão quando estiver sobre
	// o MovieClip.
	quadrado_mc.buttonMode = true;

	// Define a transparência do MovieClip de acordo com o valor de i.
	quadrado_mc.alpha = (i+1) * (1 / QUANTIDADE_QUADRADOS);

	// Adiciona o quadrado_mc ao root (timeline principal).
	addChild(quadrado_mc);
}

// Ouvinte do evento MOUSE_DOWN dos quadrados.
function IniciarDrag(evt: Event)
{
	// Recuperamos o MovieClip (quadrado) que foi clicado.
	var alvo_mc = MovieClip(evt.target);

	// O método startDrag() da classe MovieClip faz o
	// movieclip seguir o cursor do mouse.
	alvo_mc.startDrag();
}

// Ouvinte do evento MOUSE_UP dos quadrados.
function PararDrag(evt: Event)
{
	// Recuperamos o MovieClip (quadrado) que foi clicado.
	var alvo_mc = MovieClip(evt.target);

	// O método stopDrag() da classe MovieClip faz o
	// movieclip parar de seguir o cursor do mouse.
	alvo_mc.stopDrag();
}

Neste exemplo, introduzimos mais alguns recursos da classe MovieClip. A propriedade “buttoMode” permite definirmos se desejamos que o MovieClip se comporte como um botão. Caso seja definida com true, ao posicionarmos o cursor do mouse sobre o MoviveClip, o cursor assumirá a aparência de uma mão (hand cursor). Caso seja false, o cursor permanecerá uma seta.

Os métodos “startDrag()” e “stopDrag()” iniciam e interrompem o drag do mouse. O drag faz com que o MovieClip siga o cursor do mouse.

No próximo artigo veremos como desenhar dinamicamente utilizando as funções de desenho presentes em MovieClips. Sinta-se a vontade para perguntas!

Clique aqui para fazer o download do arquivo-fonte deste tutorial

Quando falamos em criação de MovieClips dinamicamente, temos três finalidades:

1. Utilizar o MovieClip criado como container para outros símbolos.
2. Utilizar o MovieClip criado como um elemento de interface modelo (que se repetirá).
3. Desenhar dinamicamente o conteúdo do MovieClip.

Nesse artigo iremos falar sobre a primeira finalidade.

Para criar um MovieClip como container, basta apenas criar um MovieClip vazio e utilizar o metódo “addChild()” para adicionar o conteúdo. Posteriormente podemos acessar o conteúdo que adicionamos ulizando variáveis ou alguns recursos da classe MovieClip.

Vejamos o exemplo a seguir:

// Array (vetor) com os endereços das imagens que iremos
// carregar.
var imagens = new Array("http://assets3.blogblogs.com.br/avatars/0/131/avatar_131176_50.jpg",
	"http://assets3.blogblogs.com.br/avatars/0/119/avatar_119276_50.jpg",
	"http://babado.ig.com.br/images/2/2/2/1702400.babado_mercado_atrizes_1gente___fotos_40_39.jpg",
	"http://1.gravatar.com/avatar/7b9b4d233fdd7dccfea4aeab695c960b?s=48&d=wavatar",
	"http://www.minhaserie.com.br/imagens/usuarios/avatar/m/p/19529.jpg",
	"http://contigo.abril.ig.com.br/imagem/foto/outra/bem-pagas/280708-bem-paga-5.jpg" );

// Criamos um MovieClip vazio (container).
var containerImagens_mc = new MovieClip();

// Adicionamos o MovieClip ao nosso filme.
addChild(containerImagens_mc);

// Ouvinte do evento CLICK no botão Carregar.
function CarregarImagens(evt: Event)
{
	// Percorre o array de imagens carregando-as.
	for (var i = 0; i < imagens.length; i++)
	{
		// Cria um objeto Loader.
		var loader = new Loader();

		// Solicita o load da imagem.
		loader.load(new URLRequest(imagens[i]));

		// Posiciona o objeto a direita do anterior.
		loader.x = i * 60;

		// Adiciona o objeto Loader no MovieClip container.
		// Quando a imagem for carregada ela será exibida.
		containerImagens_mc.addChildAt(loader, i);
	}
}

// Ouvinte do evento CLICK no botão Apagar.
function ApagarImagens(evt: Event)
{
	// Enquanto existirem elementos dentro do MovieClip containerImagens_mc.
	while (containerImagens_mc.numChildren > 0)
	{
		// Removemos o primeiro elemento da lista de elementos.
		containerImagens_mc.removeChildAt(0);
	}
}

// Associamos o evento de click no botão "carregar_btn" à função CarregarImagens.
carregar_btn.addEventListener(MouseEvent.CLICK    , CarregarImagens);

// Associamos o evento de click no botão "apagar_btn" à função ApagarImagens.
apagar_btn.addEventListener(MouseEvent.CLICK    , ApagarImagens);

Na linha 11, criamos um MovieClip vazio, utilizando o comando “new MovieClip()”. Conforme vimos em artigos anteriores, utilizamos o operador new para criar novos objetos de uma determinada classe.

Na linha 20 utilizamos um laço de repetição “for” para percorrer o array de urls que criamos na linha 1. Caso você tenha dificuldades em entender esse trecho, sugiro que você procure pelo tutorial sobre laços de repetição e sobre arrays (vetores) na categoria básico.

A cada iteração do nosso laço “for”, uma nova ordem de load de imagem é enviada ao flash. Lembre-se que os comandos são executados independente do load da imagem ter sido concluído ou não, ou seja, a instrução de load de imagem é enviada para o Flash e o load é iniciado em paralelo ao laço “for” que avançará para o próximo item do vetor “imagens”.

Na linha 29 posicionamos o objeto loader de acordo com o valor da varíavel i. Dessa forma, as imagens não ficarão uma em cima da outra.

Na linha 33 adicionamos o objeto loader ao MovieClip containerImagens_mc. Assim, logo que o load finalizar, o conteúdo correspondente será exibido dentro do MovieClip containerImagens_mc. A função “addChildAt()” permite especificarmos a posição Z onde o elemento será adicionado ao MovieClip alvo do método. A posição Z define a ordem dos elementos dentro de um MovieClip, ou seja, qual elemento vem a frente de qual. Dessa forma, estamos adicionando elementos com propriedade Z crescente iniciando 0.

Já na função ApagarItens na linha 41 criamos um laço de repetição que se repete enquanto o MovieClip “containerImagens_mc” possuir elementos filhos (elementos dentro dele). Assim, enquanto essa condição for verdadeira, o código presente na linha 44 realiza a remoção do primeiro elemento da lista de filhos dele.

Neste artigo apresentamos alguns recursos que nos permitem, por exemplo, criar uma galeria de imagens. Podemos usar um MovieClip vazio para armazenar, posicionar e remover imagens.

Nos próximos artigos veremos outras finalidades para a criação dinâmica de MovieClips. Em artigos futuros também exploraremos exemplos mais completos. Em caso de dúvidas, fique a vontade para perguntar.

Nesse artigo iremos utilizar uma estrutura semelhante ao arquivo “loading.fla” do tutorial passado, estrutura essa apresentada a seguir (o arquivo-fonte está disponivel para download no final do texto):

Estrutura do exemplo deste tutorial

Vejamos o código:

// Criamos um objeto Loader. A classe Loader nos permite
// realizar o load de conteúdos externos.
var loader = new Loader();

// Associamos o evento COMPLETE a função ExibirImagem. Assim, quando o load for
// terminado a função ExibirSite será invocada.
loader.contentLoaderInfo.addEventListener(Event.COMPLETE            , ExibirImagem);

// Associamos o evento PROGRESS a função ProgressoLoad. Assim, sempre que o progresso do
// load do conteúdo for atualizado, essa função será invocada.
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS    , ProgressoLoad);

// Solicitamos o load do arquivo de imagem.
loader.load(new URLRequest("http://www.imotion.com.br/imagens/data/media/41/paisagem1024x768.jpg"));

// Função ouvinte do evento PROGRESS.
function ProgressoLoad(evt: ProgressEvent)
{
	// Calculamos a percentagem de progresso do load.
	// bytesLoaded é uma propriedade do evento que nos fornece a quantidade de bytes que
	// já foram carregados enquanto bytesTotal nos fornece a quantidade total de bytes
	// do arquivo que está sendo carregado.
	var percentagem     = evt.bytesLoaded / evt.bytesTotal;

	// Definimos a largura da cortina de acordo com a percentagem carregada.
	cortina_mc.scaleX     = percentagem;

	// Definimos o texto da percentagem de progresso.
	percentagem_txt.x   = stage.stageWidth * percentagem;
	percentagem_txt.y   = (stage.stageHeight / 2) - (percentagem_txt.textHeight/2);
	percentagem_txt.text= Math.floor(percentagem * 100) + "%";
}

// Função ouvinte do evento COMPLETE.
function ExibirImagem(evt: Event)
{
	// Armazenamos a imagem em uma variável.
	var imagem = Bitmap(evt.target.content);

	// Suavizamos a imagem (remove pixels).
	imagem.smoothing = true;

	// Adicionamos a imagem ao stage (root).
	addChild(imagem);
}

Neste exemplo introduzimos alguns recursos novos do Action Script 3. Nas linhas 29 e 30 utilizamos o objeto “stage” para acessar as propriedades “stageHeight” e “stageWidth”. Esse objeto está disponível em qualquer projeto Flash, e nos fornece uma referência ao stage. Lembre-se que uma referencia ao stage não é uma referencia ao root, ou seja, o stage não é do tipo MovieClip e sim do tipo Stage.

Através das propriedades “stageWidth” e “stageHeight” temos acesso a largura e altura atual do stage. Isso significa que se redimensionarmos a janela do flash ou do navegador (no caso de um site que ocupe toda a janela do navegador) essa propriedade apresentará o valor atualizado. Nos próximos artigos falaremos mais sobre isso, quando falarmos sobre redimensionamento de janela.

Na linha 38 utilizamos uma nova classe e um recurso da linguagem Action Script chamado “casting”. A nova classe utilizada é Bitmap que é utilizada para representar imagens. Casting é um recurso onde informamos ao Flash que temos certeza sobre um tipo de dados que estamos acessando. Quando realizamos o load de um conteúdo externo, esse pode por exemplo ser uma imagem ou um MovieClip (arquivo .swf). Assim, a propriedade “evt.target.content” assume um tipo genérico, mesmo quando carrega um arquivo .swf ou uma imagem.

Vamos tentar fazer uma anologia. No mundo real podemos ter caminhões ou carros de passeio, mas ambos são automóveis. Automóveis é então uma definição genérica. O mesmo acontece no Flash. Temos MovieClips, Bitmaps, TextFields, mas todos eles são Objects (objetos). Esse é um conceito de orientação a objetos, chamado herança, mas veremos ele mais a frente.

Voltando a linha 38, o que ela faz é armazenar o valor carregado no formato de um Bitmap. Quando usamos “Bitmap(evt.target.content)” estamos dizendo pro flash que temos certeza que “evt.target.content” é um Bitmap e que ele pode nos devolver ele como tal.

Na linha 41 utilizamos a propriedade smoothing para suavizar o desenho da imagem. Tente executar esse exemplo sem essa linha, dê zoom na imagem, depois execute com essa linha, dê zoom novamente e compare.

Por fim adicionamos a imagem ao stage. Lembrando que a primeira vez que executarmos o exemplo o load funcionará. A partir da segunda vez não veremos mais o load, pois a imagem estará em cache. Limpe o cache ou utilize outra imagem.

Nos próximos tutoriais veremos como criar MovieClips dinamicamente. Caso tenha dúvidas, não exite me perguntar!

Clique aqui para baixar o código-fonte desse tutorial