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

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

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

É  fundamental que nessa sessão o visitante tenha um feedback sobre quanto do site já foi carregado, o que pode ser feito através de uma barra de load ou mesmo de uma percentagem textual.

Para criar um pré-loader, devemos dividir o nosso site em dois arquivos. No exemplo chamarei eles de “loading.fla” (sessão de load) e “site.fla” (o site propriamente dito).

O arquivo “loading.swf” deverá ser o mais simples possível, contendo apenas os elementos necessários à apresentação da sessão de load do site. Não queremos que esse arquivo seja grande, pois não haverá um pré-loader para ele. Se o arquivo for grande e demorar para carregar o visitante poderá achar que há algum problema com o site, perder a paciência e sair antes mesmo de visualisá-lo.

No meu exemplo, o arquivo “loading.fla” possuirá um MovieClip que será uma cortina em branco com transparência, do tamanho exato do stage, um texto dinamico (Dynamic Text) alinhado no canto inferior direito e um texto estático, conforme a figura a seguir (o código fonte desse artigo encontra-se no final):

Estrutura do exemplo deste tutorial.

Nomeei o texto dinâmico de percentagem_txt e a cortina de cortina_mc.  No arquivo “site.fla” adicionei várias imagens, apenas para que ele ganhasse tamanho, para que possamos testar o load.

Com a estrutura citada pronta, o código para funcionamento do load é apresentado a seguir:

// 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 ExibirSite. Assim, quando o load for
// terminado a função ExibirSite será invocada.
loader.contentLoaderInfo.addEventListener(Event.COMPLETE            , ExibirSite);

// 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 site.swf com o conteúdo principal
// do site.
loader.load(new URLRequest("site.swf"));

// 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.text= Math.floor(percentagem * 100) + "%";
}

// Função ouvinte do evento COMPLETE.
function ExibirSite(evt: Event)
{
	// Adiciona ao stage (root) o conteúdo carregado.
	addChild(evt.target.content);
}

A propriedade scaleX (e também scaleY) nos permite definir a escala de um MovieClip nos eixos X e Y. O valor dessa propriedade varia entre 0 e 1, com 0 correspondendo a nenhuma largura (no caso do scaleX) e 1 correspondendo a largura original do MovieClip. Como o MovieClip cortina_mc possui a largura do stage, o código AS do exemplo, nos garantirá que quando a percentagem de load atingir 100% a cortina possuirá a largura do stage (tamanho original).

A função “Math.floor()” retorna o arredondamento para o inteiro inferior de um número fracionário. Dessa forma o comando “Math.floor(percentagem * 100)” nos retorna a percentagem, que originalmente está entre 0 e 1, no formato entre 0 e 100. Após isso, utilizamos o operador ‘+’ para concatenar o resultado com o caractere ‘%’.

Por fim, também usamos o método “addChild()”. Trata-se de um método da classe MovieClip que nos permite adicionar um elemento dentro do MovieClip (esse elemento pode ser um Bitmap, Shape ou outro MovieClip).

Para testar o loading de um site o Flash nos oferece uma ferramenta bastante útil. Rode o filme com Ctrl + ENTER e utilize o menu “View” -> “Simulate Download” para testar o download do seu site. Você ainda pode escolher a velocidade de conexão que deseja testar em “View” -> “Download Settings.”

Lembrem-se que para o exemplo funcionar corretamente, os dois arquivos devem estar na mesma pasta e que o arquivo site.fla deverá ser compilado (ctrl + enter) antes do loading.fla.

Nos próximos artigos continuaremos com exemplos bem práticos e úteis na programação Action Script 3. Caso tenha dúvidas sinta-se a vontade para perguntar!

Clique aqui para baixar os arquivos deste artigo