Autor: Tiago Braga (Xavrim)

Flash 8, CS3 ou CS4
Classe: MovieClipLoader
Versão AS: Actionscript 2.0
Dificuldade: Básico/Intermediário

Obs: Para um bom aproveitamento é interessante ter conhecimento básico de Actionscript e lógica de programação.

E aí galera, tudo tranqüilo?
Bom, primeiro agradeço ao Rodrigo Gonçalves e a equipe AlvoWeb por deixarem colaborar com esta comunidade.
Segundo, estarei abordando um assunto de muita serventia para os "flasheiros", que é carregar um arquivo externo, como uma imagem (JPG, PNG, GIF) ou swf.

Neste primeiro tutorial, estarei falando sobre a classe MovieClipLoader do AS2 e porque utilizar ela em vez do famoso método loadMovie(), e em breve, estaremos fazendo um exemplo em outros tutoriais montando um "site" inteiro com a classe MovieClipLoader.

No final deste tutorial temos um arquivo disponível deste exemplo para download.

Mãos a obra, melhor, dedão no código…

Crie um novo arquivo Flash com 500×400.
Crie duas camadas. A primeira com o nome de arquivo_externo e a outra com o nome de AS.
Bloqueie a camada AS e logo em seguida criem um Movie Clip vazio. Como mostra na imgem 1 a seguir.

Imagem 1: Menu, Insert > New Symbol (Ctrl + F8), criando um Movie Clip vazio.

Na próxima janela (Create New Symbol), coloque o nome do Movie Clip de alvo (Em nível de organização da library).

Imagem 2: Janela Create New Symbol, configurando símbolo para tipo(type) MovieClip e com nome alvo.

Você entrará no Movie Clip Alvo. Volte ao nível raiz (SCENE). Abra a library e localize o Movie Clip alvo. Arraste ele para o palco e logo em seguida posicione na posição x=0 e y=0.

Imagem 3: Alvo vazio no stage.

Selecione o Movie Clip vazio. Abra o painel properties(Ctrl + F3) e no campo <Instancie Name>, coloque o nome de alvo_arquivo.

Imagem 4: Painel Properties, inserindo nome de intância no Movie Clip vazio.

Agora que temos toda está estrutura feita, clique no frame 1 da camada AS, abra o painel Actions (F9) e insira o seguinte código:

1
2
3
4

var objOuvinte:Object = new Object();
var objMCLoader:MovieClipLoader = new MovieClipLoader();
objMCLoader.loadClip("imagem/imagem.jpg",alvo_arquivo);
objMCLoader.addListener(objOuvinte);

Imagem 5: Painel Actions, Inserindo código no frame 1 na camada AS.

Salve seu arquivo dentro de uma pasta.
Ex.:
- Nome pasta: Tutorial_mcLoader
– Nome do arquivo: MovieClipLoader.
Dentro da pasta Tutorial_mcLoader, crie outra pasta chamada imagem. Seu diretório terá está ordem:

Tutorial_mcLoader <- Pasta.
Arquivo_fla.fla <- Arquivo salvo dentro da pasta.
Arquivo_fla.swf <- Arquivo que será criado quando você apertar CTRL+ENTER.
imagem <- Pasta.
imagem.jpg <- uma imagem que está dentro da pasta imagem.

Execute o projeto -> CTRL + ENTER

Linha 1: Objeto do tipo genérico que irá executar os eventos da classe MovieCLipLoader.
Linha 2: Objeto do tipo MovieClipLoader, criado para acessar os métodos e propriedades da classe.
Linha 3: Está linha é o que esperamos fazer, carregar a imagem.
Obs.: Meu arquivo *.fla está salvo na mesma pasta da pasta imagem (Pasta: Tutorial_mcLoader).

Linha 4: addListener do objeto objMCLoader é o objeto genérico (objOuvinte). Mais detalhes continue o tutorial.
Quando executado o arquivo, aparece à imagem, tudo tranqüilo até ai.  Aí você me pergunta. Por que você fez isso tudo se com loadMovie eu só preciso fazer isso alvo_arquivo.loadMovie("imagem/goku.jpg",this);? Respondo-te fazendo uma pergunta. Quero agora que apareça aquela famosa barra de carregando ou até mesmo uma caixinha aparecendo à porcentagem. Como faço isso? Aí que vem a grande vantagem. Com a classe MovieClipLoader, além de ser mais organizado, não vou precisar ficar calculando muito, com alguns passos irei executar aquilo que quero.

Então vamos lá, faça aparecer a porcentagem! Então tá, vou fazer agora…

Imagem 5: Painel Actions, inserindo código no frame 1 na camada AS.

A linha 9 que era linha 4: Toda vez que iniciar um carregamento, o evento onLoadProgress será executado. Na frente do nome onLoadProgress está assim: objOuvinte.onLoadProgress, então podemos concluir que toda vez que carregamos uma imagem, o objeto MovieClipLoader irá executar onLoadProgress, pois adicionamos o objeto genérico (objOuvinte) como ouvinte.

Linha 4 e 5: No evento onLoadProgress foi atribuído uma função. Está função tem 3 parâmetros.
- MC: que é seu Movie Clip vazio.
- btLoader: é o total de bytes que foram carregados até o momentos.
-
btTotal: é o total de bytes que seu arquivo tem.

O código completo deste exemplo ficou da seguinte forma:

1
2
3
4
5
6
7
8
9

var objOuvinte:Object = new Object();
var objMCLoader:MovieClipLoader = new MovieClipLoader();
 
objOuvinte.onLoadProgress = function(mc:MovieClip, btLoader:Number, btTotal:Number){
	trace("MC é o Movie Clip vazio "+mc+" ---- "+(btLoader/btTotal)*100 )
}
 
objMCLoader.loadClip("imagem/imagem.jpg",alvo_arquivo);
objMCLoader.addListener(objOuvinte);

Teste seu arquivo. Aperte CTRL+ENTER 2 vezes para simular um "download".

A classe MovieClipLoader te oferecer outros tratamentos(eventos), como:
onLoadComplete <- Quase a mesma coisa do onLoadInit, mas quando se usa uma máscara no objeto carregado, este método não irá funcionar.
onLoadInit <- Quando o objeto for totalmente carregando.
onLoadError <- Verifica erros existentes no carregamento.
onLoadStart <- Executado quando começar a carregar.

Para mais informações, procure pela classe MovieClipLoader para AS2 no help do flash (F1).

Meu primeiro tutorial vai ficando por aqui, mas dá próxima, montaremos um site com carregamento externo de arquivo com a classe MovieClipLoader.

Download - exemplo 1 com a classe MovieclipLoader
Download - exemplo 2 com a classe MovieclipLoader

Até.

Tiago Braga (xavrim)
Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.

Para quem curte programação ActionScript.
A Adobe disponibiliza um guia em Português sobre o Actionscript 3.0.

Arquivo em PDF( 10M ) para download.

Poderá conferir também diretamente pela página da Adobe:
Página de programação ActionScript 3.0 da Adobe

Vale a pena conferir!

Grande abraço e até a próxima.

Rodrigo Gonçalves
Equipe AlvoWeb

Autor: Rodrigo Gonçalves

Flash CS3
Package: flash.net
Classe: public final class URLRequest,
Classe: public class URLLoader,
Classe: public dynamic class URLVariables,

Versão AS: ActionScript 3.0
Player: Flash Player 9 ou superior

Dificuldade: Básico.
Obs: Para um bom aproveitamento deste artigo é interessante ter lógica de programação, noções básicas para leitura de sintaxe ActionScript 3.0 e PHP.

Fala galera, tranquilo?!

Vamos ver uma das maneiras de criar um formulário de e-mail utilizando AS3 em conjunto com um script PHP.
O exemplo mostrado é relativamente simples, mas acredito ser um bom ponto de partida pra começar. Depois você mesmo poderá incrementá-lo conforme achar necessário.
Pra fazer os testes, você precisa de um servidor para hospedar seu arquivo PHP.

No final deste artigo, está disponível para download o mesmo exemplo abordado aqui.

Indice:

1- Introdução;
2- Criando os objetos na tela;
3- Inserindo código AS3;
4- Explicando o código AS3;
5- Criando script PHP;
6- Download.

1- Introdução

No Flash, basicamente, para este exemplo do formulário, além de utilizarmos um script PHP que irá "interagir" com Actionscript, precisamos utilizar 3 classes mais notáveis no AS3 que faz parte do Package flash.net, sendo elas:
- URLRequest(), é responsável por armazenar endereços externos. No nosso caso, será um arquivo PHP;
- URLLoader(), é responsável por “recuperar” dados/informações externas. A qual iremos manipular informações externas com uso de Eventos.
- URLVariables(), criamos "variáveis" que recebem o conteúdo digitado nos campos de textos do Flash. Com isso, conseguimos comunicar com o arquivo PHP e enviar as informações para no destinatário de e-mail.

E de quebra, pra incrementar um pouco mais a funcionalidade do nosso Formulário. Utilizaremos a classe Timer(), em que a sua aplicação é muito semelhante com as funções setInterval() e setTimeout(). No nosso caso, a classe Timer() simplesmente irá chamar/executar uma determinada função depois de um tempo específico estipulado. Veremos isso mais adiante.

2- Criando os objetos na tela

Dica: É sempre bom criarmos um hábito de organização com web. Sugiro criar uma pasta para guardar seus arquivos Flash e PHP;

Com Flash CS3 aberto, crie um arquivo novo documento: versão Actionscript 3.0.

Para organizar os conteúdos crie 2 camadas, sendo elas:
- Actions
- Objetos

Imagem 1: Criando camadas para organizar os objetos.

Na camada Objetos, iremos criar 5 campos de texto, sendo que, 4 deles serão dinâmicos do tipo "input Text", e 1 campo de texto do tipo Dynamic Text que será destinado para mostrar os avisos ao usuário sobre o que acontece quando ele tenta enviar os dados. E também precisamos de um botão com nome de instância enviarBtn, que será responsável por enviar os dados.

Cada objeto estão organizados com seus respectivos nomes de instâncias. Você poderá acompanhar na imagem 2 a seguir, na seguinte ordem:

- Campo Nome:
- Tipo: Input Text
- Instância: nomeTxt

- Campo E-mail:
- Tipo: Input Text
- Instância: nomeTxt

- Campo Assunto:
- Tipo: Input Text
- Instância: avisoTxt

- Campo Mensagem:
- Tipo: Input Text
- Instância mensagemTxt

- Botão
- Tipo: MovieClip
- Instância: enviarBtn

- Campo Aviso:
- Tipo: Text Dynamic
- Instância avisoTxt


Imagem 2: Criando os objetos.

3- Inserindo o código AS3

Na camada Actions, selecione o 1º e único frame, e abra o painel de Actions, atalho [F9], e insira o código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

System.useCodePage = true;
 
var tempo:Timer = new Timer( 3000, 1 ); 
	tempo.addEventListener( TimerEvent.TIMER, limpaAviso );
 
enviarBtn.addEventListener( MouseEvent.CLICK, enviaMensagem );
 
 
/* ##########################
 * Funções
 * #########################*/
function enviaMensagem( event:MouseEvent ):void{
	if(nomeTxt.text == "" || emailTxt.text == "" || assuntoTxt.text == "" || mensagemTxt.text == ""){
		avisoTxt.text = "Preencha os campos.";
		tempo.start();
	} else{ 
		enviaDadosParaPHP();
	}
}
 
function enviaDadosParaPHP(){
	avisoTxt.text = "Enviando mensagem...";			
 
	var variaveis:URLVariables = new URLVariables();
		variaveis.nomePhp = nomeTxt.text;
		variaveis.emailPhp = emailTxt.text;
		variaveis.assuntoPhp = assuntoTxt.text;
		variaveis.mensagemPhp = mensagemTxt.text;
 
	var urlPhp:URLRequest = new URLRequest("seu aqruivo php aqui");
		urlPhp.method = URLRequestMethod.POST;
		urlPhp.data = variaveis;
 
	var loader:URLLoader = new URLLoader();
 		loader.addEventListener( Event.COMPLETE, envio );
 		loader.addEventListener( IOErrorEvent.IO_ERROR, erroNoEnvio );
 		loader.load( urlPhp );
}
 
function envio( e:Event ):void{
	avisoTxt.text = "Mensagem enviada!";
	limpaCampos();
 	tempo.start();
}
 
function erroNoEnvio( e:IOErrorEvent ):void{
	avisoTxt.text = "Ops! Surgio erro! Tenta novamente.";
 	tempo.start();
}
 
function limpaCampos(){
	nomeTxt.text = emailTxt.text = assuntoTxt.text = mensagemTxt.text = "";
}
 
function limpaAviso( e:TimerEvent ):void {
	avisoTxt.text = "";
}

4 - Explicando o código AS3

Linha 1: simplesmente habilitamos para o Flash receber textos com acentuação.

Linha 3: criamos uma nova instância tempo, que faz parte da Classe Timer(), nesta classe Timer, o seu construtor solicita 2 parâmetros: tempo de intervalo em milesegundos, e referência da função. Ou seja, após 3 segundos(3000 milesegundos) irá chamar uma função que denominamos de limpaAviso(), está função veremos mais adiante.

Linha 6: para o botão com nome de instância enviarBtn, adicionamos um "ouvinte de Eventos"(addEventlistener), e quando este botão receber um "evento de clique do mouse"(MouseEvent.CLICK), irá chamar/executar a função enviaMensagem() que veremos a seguir.

A partir de linha 12 em diante, temos uma sequência de funções, as quais cada uma terá um seu objetivo. Vamos analisá-las.

Linha 12 a 19:
Vamos começar com a função enviaMensagem(). Esta simplesmente verifica se(if) todos os campos de textos foram preenchidos(nome, email, assunto, mensagem), caso alguns destes campos estiverem vazios, mostra mensagem na caixa de aviso(avisoTxt.text), informando o usuário que precisa preencher todos os campos.

Logo a seguir, utilizamos o método Timer.start() da nossa instância tempo, cujo função é apenas disparar uma determinada função depois de um intervalo específico. Ou seja, o código tempo.start() irá chamar a função limpaAviso() que apenas apaga o campo de texto avisoTxt logo após o intervalo de 3 segundos.

Agora, caso todos os campos estiverem preenchidos, simplesmente executa a função enviaDadosParaPHP() e prosseguimos adiante.

Linha 21 a 38:
Temos a função enviaDadosParaPHP() que é responsável por enviar as informações de fato.
Na linha 22 informamos ao usuário que estamos enviando a mensagem.

Em seguida, temos que utilizar 3 classes:URLVariables, URLRequest, URLLoader. Vamos começar pela classe URLVariables.
Na linha 24 a 28, criamos a instância denominada de variaveis que faz parte da classe URLVariables().

Precisamos criar 4 variáveis referente a cada campo de texto do formulário. Estas variáveis serão responsáveis por armazenar informações digitadas pelo usuário, depois o Flash fará comunicação com o scrit PHP, ficando responsável por reter essas informações do Flash e enviar os dados para o e-mail do destinatário.

Para criarmos uma variável da classe URLVaribles, simplesmente utilizamos qualquer nome sugestivo como propriedade da classe URLVariavels. Com isso criamos as seguintes variáveis, sendo elas:

variaveis.nomePhp
variaveis.emailPhp
variaveis.assuntoPhp
variaveis.mensagemPhp

Em cada variável criada, recebem informações quando o usuário digitar alguma informação nos campos de texto dinâmico.
Por exemplo, informo que a variável variavies.nomePhp, recebe informações vinda do campo de texto dinâmico nomeTxt.text. E assim por diante.

Linha 30 a 32:
Na linha 30, criamos a instância chamada urlPhp a partir da classe URLRequest(), que será responsável por armazenar um endereço externo, no caso o próprio script PHP que iremos criar depois.

Na linha 31, utilizamos a propriedade URLRequest.method que informa o tipo de envio que faremos no caso o método POST(URLRequestMethod.POST).

Na linha 32, informamos pela propriedade URLRequest.data que todas informações digitadas pelo usuário, estarão contidas em nossa variável denominada variaveis da classe URLVariables().
Ou seja, isso tudo simplesmente fala algo como: enviar todas as informações inseridas no formulário para o script PHP.

Linha 34 a 37:
Agora, na linha 34, criamos nossa instância denominada de infoPhp da classe URLLoader(), que simplesmente será responsável por recuperar informações sobre o que acontece com os dados enviados pelo formulário. Com URLLoader, conseguimos obter informações e disparar eventos para podermos informar ao usuário se os dados foram enviados com sucesso ou se surgiu algum erro durante o envio.

Na linha 35, adicionamos para a instância infoPhp, um ouvinte de eventos(addEventlistener), que verifica quando os dados forem enviados/carregados por completo(Event.COMPLETE), dispara a função envio(), que informa ao usuário que os dados foram enviados com sucesso.

Na linha 36, novamente para a instância infoPhp, adicionamos um ouvinte de eventos(addEventlistener), que verifica se tem um "erro fatal" que resulta em um "cancelamento" na hora de carregar o arquivo externo(IOErrorEvent.IO_ERROR), dispara a função erroNoEnvio(), que informa ao usuário que surgiu algum erro durante o envio.

E finalmente na linha 37, apenas carregamos pelo método URLLoader.load(), o dados externo, no caso, o arquivo PHP que iremos criar mais tarde.
Isto encerra nossa função enviaDadosParaPHP().

As 4 funções a seguir, como cada nome já sugere, simplesmente são utilizados durante todo o processo de verificação. Vejamos:

Linha 40 a 44: a função envio(), simplesmente mostra o aviso ao usuário que as informações foram enviadas. Em seguida chama a função limpaCampos() que apenas deixa os campos sem nenhum conteúdo. Depois, chamamos a função limpaAviso() logo após 3 segundos, para apagar o aviso mostrado ao usuário.

Linha 51 a 53: a função limpaCampos(), apenas limpa todos os campos de textos.

Linha 55 a 57: a função limpaAviso(), apaga o conteúdo da caixa de texto avisoTxt.

No mais terminamos nosso código AS3. Vamos agora para o script PHP.

5- Criando script PHP

Vamos criar o script PHP, que está brevemente comentado no próprio código. É relativamente simples.
Abra um bloco de notas, ou seu editor de códigos, e salve este arquivo na mesma pasta do seu arquivo Flash. Dêmos o nome de: mail.php

Insira o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php
//coloque o email de destinatário:
$enviaPara = 'seu email aqui';
 
//Criamos variaveis PHP que recupera as Variaveis criadas no Flash
$campoNome = $_POST['nomePhp']; //retorna o valor digitado no campo "nomeTxt" do Flash
$campoEmail = $_POST['emailPhp']; //retorna o valor digitado no campo "emailTxt" do Flash
$campoAssunto = $_POST['assuntoPhp']; //retorna o valor digitado no campo "assuntoTxt" do Flash
$campoMensagem = $_POST['mensagemPhp']; //retorna o valor digitado no campo "mensagemTxt" do Flash
 
//Assunto padrão do seu e-mail
$subject = 'E-mail vindo do site tal';
 
//Monta o corpo da mensagem enviada
$mensagem = "Nome: ".$_POST['nomePhp']." \n";
$mensagem .= "E-mail: ".$_POST['emailPhp']." \n";
$mensagem .= "Assunto: ".$_POST['assuntoPhp']." \n\n";
$mensagem .= "Mensagem: \n". $_POST['mensagemPhp'];
 
//e-mail do remetente:
$mail_headers = 'From: '.$_POST['emailPhp'];
 
//envia o e-mail
mail($enviaPara, $subject, $mensagem, $mail_headers);
?>

Basta hospedar seu arquivo Php em algum servidor e fazer os testes.

Obs: Lembra-se de informar o endereço do arquivo PHP no código AS.

6 - Download
Download deste exemplo final.

Abraços e até a próxima!

Rodrigo Gonçalves
Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.

Autor: Rodrigo Gonçalves

Tema: Loop de animação com rotação no Flash CS3.
Versão: Flash CS3. Poderá utilizar versões anteriores também.
Dificuldade: Básico.
Obs: Para um bom aproveitamento deste artigo é interessante ter conhecimentos básicos de funcionamento do Flash, conhecimentos de símbolos e animação Motion Tween.

Vamos ver um pouco sobre loop de animação com rotação no Flash CS3. É algo bastante simples. Mas, que já conseguimos criar coisas legais apenas utilizando conceitos de Tween Motion(ou Motion Tween), e que pode ser bastante utilizado para diversos fins da animação com o Flash.
Estamos utilizando versão Flash CS3 para este tutorial. Mas, podemos aplicar esse conceito em versões anteriores do Flash. Não iremos ver Actionscript nesse tópico.

Download: Ao final deste tópico existe um link para download deste exemplo.

Indice:

- Introdução
1. Configure o documento para animação;
2. Crie o objeto que receberá animação;
3. Animação Motion Tween com rotação;
4. Ajustando detalhes de animação;
5. Download do exemplo;
6. Considerações finais.

Introdução

Um "loop" podemos considerar como uma "repetição". Iremos rotacionar(animar) uma imagem qualquer que será convertida antes em um símbolo Movie Clip.
Não importa o objeto ou imagem que queira animar. Acredito que, entendendo um conceito de algo e para quê e como usá-lo, tudo parece ser mais fácil na hora de praticar. Iremos utilizar esses conceitos em futuros tópicos de animação.

Estão "animados"?
Obs.: Isso não foi trocadilho.

Flash, luzes, camera… Animação!
Divirta-se.

1 - Configure o documento para animação.

Antes de partimos para animação de fato, precisamos configurar adequadamente nosso documento Flash para cada animação. É bem simples e fácil. Mas, se esquecer desse detalhe pode comprometer toda a qualidade da sua animação, por mais simples que seja.

O ponto principal é ajustar o número de FPS(Frames Per Second), que traduzindo seria "quadros por segundo". O FPS irá determinar uma maior "fluência" ou "naturalidade" de uma animação. Isso porque temos uma maior quantidade de imagens para realizar algum movimento em apenas 1 segundo.

Dica:
Caso utilize sua animação para Web(como a maioria dos casos), fique atento com a quantidade de FPS, dependo da quantidade de elementos, se for algo muito pesado, pode gerar grande consumo de CPU e certamente o desempenho da sua animação não será tão boa. E pior, dependendo do caso poderá até travar o computador do seu usuário. Na maioria dos casos podemos resolver apenas baixando a quantidade de FPS. Se possível, faça testes em diversos computadores com diferentes configurações para ter uma idéia do que a maioria dos usuários conseguirão ver realmente.

O padrão do flash é 12 FPS. No nosso exemplo, estamos utilizando tamanho de 200×200 pixels com 30 FPS para fazer nossa animação.
Assim como mostra na imagem 1. Podemos configurar o tamanho em largura, altura, bem como o número de FPS, isso de acordo com seu projeto e necessidades do mesmo. Geralmente são utilizados em média de 15 à 30 FPS para animações no Flash.

Imagem 1: configurando o documento Flash.

Para definir essa configuração como padrão caso queira utilizar sempre a mesma em novos documentos. Logo após ter configurado este painel, aperte o botão Make Default (criar padrão). Isso fará com que o novo documento será criado exatamente com as mesmas configurações definidas nesta janela Document Properties (imagem 1 logo acima).

Também podemos configurar rapidamente pela janela de propriedades. Para termos o acesso a propriedades de uma ferramenta, objeto, componentes, etc. Temos que ter o painel de properties(propriedades) habilitado e ao selecionar o que precisamos configurar, no nosso caso o stage(palco) do flash. Basta clicar apenas uma vez em qualquer área para habilitar essas configurações do stage.
Por alí, podemos fazer as modificações do documento e também ter acesso ao painel de Document Properties clicando no botão Size. Como mostra na imagem 2:

Caso não esteja aberto o painel propriedades, acesse pelo menu window > properties >> properties, atalho [Ctrl] + [F3].



Imagem 2: Painel de propriedades, configuração do stage.

2. Crie o objeto que receberá animação

Vamos criar uma imagem qualquer. No nosso caso será uma quadrado na cor preta que no nosso exemplo é o suficiente para mostrar uma animação em loop. Use sua imaginação: pode ser uma roda de carro, uma bola de praia, uma hélice de helicóptero, um sol girando, etc.

Dica:
Uma recomendação. Sempre que quiser fazer animação utilizando o Motion Tween (quando os quadros da timeline ficam na cor azul claro) converta antes o objeto que receberá animação em um Símbolo do tipo: Movie Clip ou Graphic. O mais utilizado é o Movie Clip. Pois, além de possuir uma timeline independente da timeline principal, que nos dá liberdade pra criar loops de animação, temos também a possibilidade de dar nomes de instância para conseguir manipular com código Actionscript se for necessário.

A grande vantagem de converter sempre em símbolo antes da animação é, caso precise alterar o objeto por algum motivo, ele estará disponível na biblioteca, basta abrir sua biblioteca e clicar duas vezes no objeto para editá-lo. depois que fizer sua edição automaticamente ele irá ser atualizado no stage sem precisar alterar diretamente na timeline, o que tomaria um tempo precioso.

Continuando…

Para converter uma imagem vetorial ou bitmap(pixel) em um símbolo, basta selecioná-lo com a ferramenta Selection tool, atalho [v]. Após selecionado acesse pelo menu Modify > Convert to Symbol, atalho [F8]. Como mostra a figura 3 logo a seguir.

Outra maneira de converter uma imagem em símbolo, é clicar com botão direito do mouse exatamente sobre o objeto e na lista de menu que irá aparecer, clique na opção "Convert to Symbol.." irá abrir a mesma janela Convert to Symbol…. Basta configura-lo de acordo com a sua necessidade.

Ao abrir a janela Convert to Symbol coloque um nome que identifique-o na biblioteca, isso irá facilitar na sua organização conforme crie mais símbolos.
Escolha um tipo(Type) de símbolo, Movie clip, e o mais importante, o ponto de registro deve estar no centro. Este ponto de registro que será nosso "eixo" para fazer uma rotação. Feito essa configuração clique em OK e seu objeto agora estará disponível na biblioteca do flash. Como mostra na imagem 3 logo a seguir.

Imagem 3: Convertendo uma imagem em símbolo Movie clip com ponto de registro no centro.

Com o nosso símbolo devidamente criado e configurado no Stage. Caso não esteja visualizando, temos também este símbolo agora disponível no painel Library(biblioteca). Window > Library, atalho [F11] ou [Ctrl] + [L]. Se ele não estiver no stage, basta abrir a biblioteca e arrastar o objeto no stage.

Até agora sua imagem deve ter ficado algo parecido como a imagem 4 logo a seguir:

Imagem 4: Objeto configurado no stage.

Vamos a animação Motion Tween.

3. Animação Motion Tween com rotação.

No 1º e única layer(camada) clique uma vez no frame 20 para selecioná-lo. como mostra na imagem 5:

Imagem 5: Selecione o quadro 20 clicando apenas uma vez sobre ele.

Com o frame ainda selecionado vamos agora inserir um keyframe(quadro chave), atalho [F6]. Ou também clique com botão direito sobre o frame 20 e escolha pela lista de menu a opção Insert keyframe para inserir um quadro chave. Isso fará uma copia do último quadro chave(keyframe). Como mostra na imagem 6:

Imagem 6: com botão direito do mouse sobre o quadro selecione insert keyframe.

Imagem 7:keyframe no frame 20 criado.

Agora clique com botão direito do mouse em qualquer frame sendo a partir do 1º keyframe até o frame 19, e selecione a opção Create Motion Tween. Iremos criar um animação entre estes 2 quadros chaves que foram criados. Como mostra na imagem 8.

Imagem 8: Criando um Motion Tween.

"flecha" mostrando a interação que há entre os keyframes, no nosso caso a partir do 1º keyframe até o keyframe seguinte (frame 20). como mostra na imagem 9.

Imagem 9: Tween Motion Criado.

Pronto! Agora para vermos o objeto animando de fato, ou melhor, rotacionando em loop. O flash fará todo esse trabalho para nós. Mas, precisamos antes fazer alguns ajustes na propriedades da timeline. Com o painel de Properties aberto(atalho [Ctrl] + [F3]). Clique apenas uma vez em qualquer frame (entre o 1º a 20º frame) que tenha animação Tween Motion (barra azul na timeline), isso irá habilita as propriedades de animação Tween Motion e da timeline.
No painel de propriedades do frame, acesse a opção em Rotate e coloque para ser rotacionado no "sentido horário" CW(Clock Wise). Tem outras opções de escolher sentido anti-horário CCW(Counter Clock Wise). A opção Auto é quando fazemos a rotação do objeto manualmente no keyframe seguinte. A opção None desabilita a rotação entre os quadros chaves.

No nosso caso deixamos apenas como CW para Rotate, e automaticamente ficará também com a quantidade 1 para os times(vezes que irá rotacionar). Lembrando que o objeto irá rotacionar em torno do seu eixo(ponto de registro do objeto). Como mostra na imagem 10 a seguir e animação.

Imagem 10: configurando o objeto para rotacionar na animação.

Swf: Animação com rotação.

Mas observe que ainda nossa animação parece dar um pequena "quebra". Alguém sabe o porque isso acontece? Isso que iremos resolver agora.

4. Ajustando detalhes de animação.

Lembra que o 1º keyframe e o keyframe seguinte(no nosso caso o frame 20) são extamemente iguais. Já que quando criamos um keyframe ele faz uma copia exata to ultimo. Então, temos 2 quadros iguais fazendo com que animação cria uma pequena "pausa" impedindo que a animação flua corretamente. Para resolver isso, devemos registrar um keyframe um quadro antes do ultimo keyframe e em seguida apagar o ultimo quadro. Como mostra na imagem 11, 12 e 13 a seguir.

Imagem 11: Selecionando o frame 19, anterior ao ultimo keyframe.

Imagem 12: Registramos um novo keyframe.

Remova este ultimo keyframe pelo menu clicando com botão direito sobre ele e escolhendo a opção Remove Frames. Ou selecione o frame e aperte a tecla de atalho [Shift] + [F5]. Como mostra a imagem 13 logo abaixo.

Imagem 13: removendo o ultimo keyframe.

Deste modo, sua timeline deve ter ficado algo parecido como a imagem 14.

Imagem 14: Agora os keyframes estão configurados. Não havendo repetições dos quadros.

Agora basta testar seu filme, teclas [Ctrl] + [Enter] e ver o resultado mais fluente na animação.
Provavalmente sua animação pode ocorre o seguinte:

Swf: Animação fica mais rápida.

Caso isso ocorra em algum momento com sua animação, para resolver isso devemos mudar no painel de propriedades da animação o numero de rotação inserindo 0(zero). Esta rotação é referente ao número de vezes que o objeto irá rotacionar entre um quadro chaves ao outro. Isto não é o numero de vezes que a animação irá repetir. Com mostra na imagem 15.

Imagem 15: Configurando o numero de vezes que irá rotacionar.

Teste sue filme novamente, [Ctrl] + [Enter]. Com isso sua animação volta ao normal.

Swf: Animação finalizada.

Dica: Claro que depende da sua animação e intenção. Mas evite colocar mais de 2 vezes para rotacionar o objeto na animação. Dependendo da sua intenção a rotação começa criar um aspecto esquisito. Vale a pena fazer alguns testes para conhecer as possibilidades.

Esta animação apenas está na timeline principal. Precisamos colocar colocar está animação dentro de um Movie clip. Com isso conseguimo reaproveitarmos em outra animações do palco.

Selecione todos os frames em seguida clique com botão direito do mouse sobre os frames selecionados e selecione na lista a opção Cut Frames, ou utilizar o atalho [Ctrl] + [Alt] + [x] para recortar os frames selecionados. Com isso além de retirar os frames da timeline ao mesmo tempo copiamos esses frames. Como mostra na imagem 16 e 17. Iremos colocar esses frames em um novo símbolo mais adiante.

Imagem 16: recortando os frames da timeline principal.

Imagem 17: Frames vazios na timeline principal, porque recortamos para inserir em um novo símbolo.

Agora vamos criar um novo símbolo do tipo Movie clip para insrir essa animação que criamos. Para isto, basta ir pelo menu Insert > New Symbol, atalho [Ctrl] + [F8].
Irá abrir um painel Create New symbol, dê um nome que irá identificá-lo na biblioteca depois, para este símbolo e escolha o tipo para ser Movie clip. Como mostra na imagem 18.

Imagem 18: Criando um novo siimbolo do tipo Movie clip.

Automaticamente ao criar um símbolo novo iremos visualizar a timeline deste Movie clipe. Imagem 19.

Imagem 19: Visualizando a timeline do novo símbolo.

Agora clique com o botão direito do mouse sobre o único frame desta timeline, e na lista selecione a opção Paste Frames, ou atalho [Ctrl] + [Alt] + [v] para inserir os quadros de animação que criamos anteriormente. Como mostra na imagem 20 e 21.

Imagem 20: Inserindo a animação neste novo símbolo.

Imagem 21: Novo símbolo com a animação inserida.

Repare que automaticamente a layer tem o nome que definimos anteriormente e também exatamente a mesma animação que criamos na timeline principal. A diferença que agora essa animação está inserida em um Novo Movie clip.

Obs:
Poderiamos criar um novo símbolo desde do começo e inserir a animação nele. Mas como fizemos neste exemplo antes na timeline principal, está é uma das maneiras de resolver isso caso precise converter sua animação em um novo Símbolo. Não necessariamente precisa ser desta ordem de criação.

Agora, para retornar ao palco principal clique no botão Scene1.
Como mostra na imagem 22.

Imagem 22: retornando ao palco principal do Flash.

Este Movie clipe que denominamos de Animação Objeto agora está disponível na library(biblioteca) do flash. Para visualizar abra a biblioteca Window > Library, atalho da biblioteca [F11] ou [Ctrl ]+[L].
Basta selecioná-lo e arastar para o stage e utilizar em sua animação da maneira como achar necessário.

Imagem 23: Inserindo objeto no stage.

Experimente duplicar o objeto (selecione-o e com a tecla [Alt] ou tecla [Ctrl] pressionadas arraste o objeto no palco, isso fará com que duplique o objeto. Depois experimente modificar suas características. Por exemplo, podemos modificar largura, altura, rotacionar ou "deformar"(skew) o objeto utilizando o painel Transform, Window > Transform, atalho [Ctrl] + [T]. Com este painel, podemos criar efeitos facilmente de "perspectiva" no objeto. Vale a penas fazer testes pra conhecer melhor. Como mostra na imagem 24.

Imagem 24: Alterando caracteristicas do objeto pelo painel Transform.

E também mudar caracterisca de cor, alpha, brilho do Movie clip pelo painel properties(propriedades), atalho [Ctrl] + [F3].

Imagem 25: Alterando caracteristicas do Movie clip pelo painel Properties(propriedades).

Swf: Exemplo final da animação.

5. Download do exemplo

Donwload deste exemplo.

6. Considerações finais

O MovieClipe possui a vantagem de ter uma timeline própria que não depende de número de quadros da timeline principal para rodar animação. E conseguimos também inserir nome de instância nele para podermos controlar pelo código Actionscript caso for necessário. Além de poder aplicar filtros nele.

Já o símbolo do tipo Graphic(gráfico) também possuí uma timeline própria. Mas ele depende de número de quadros inserido na timeline principal para rodar, e não conseguimos inserir nome de instância nele. Não é possível também utilizar filtros em símbolo do tipo “Graphic”. Este tipo de simbolo é mais utilizado quando não desejamos ter animações em sua timeline. Geralmente, o mais utilizado são símbolos do tipo Movie clip tanto para animações quando para controlar objetos pelo Actionscript.

Claro que este exemplo é bastante simples. Mas, pense que no lugar deste simples quadrado você pode utilizar qualquer outra imagem que precisar animar e rotacionar. Com isso já podemos fazer exemplos legais que vemos em banners ou animações pela internet. seja curioso, o conceito é o mesmo utilizado e com tempo e prática certamente você mesmo descobrirá novas técnicas que sinta mais confortável em trabalhar. Divirta-se.

Abraços e até a próxima!

Rodrigo Gonçalves
Equipe Alvo Web

Recuperar a senha do admin do wordpress
Solicitar nova senha wordpress
Resetar senha do administrador wordpress

Acredito que essa situação as vezes pode ser desesperadora, mas é bem fácil de se resolver.
Primeiro passo é tentar pelo recuperador de senhas padrão, na sua página de login do administrador do seu Wordpress.

Nessa opção nós temos que informar o nome de usuário que por padrão é “admin” e o email cadastrado o que infelizmente as vezes a pessoa não lembra, isso é muito comum quando a pessoa que utiliza o Blog Wordpress não foi a mesma que realizou a instalação.

Nesse caso nós vamos ter de resetar a senha na unha, acessando o banco de dados.
Se você possui o Blog em um Server gratuito da própria comunidade Wordpress, creio não ser possível resgatar essa senha pelo simples fato de que você não tem acesso ao servidor e muito menos ao banco de dados. Pois bem, presumindo que você possui um servidor de hospedagem. Utilizamos o painel de controle PLESK para ilustrar a recuperação da senha do administrador.
Primeiro passo é acessar sua conta de hospedagem, seu painel de controle, e depois acesse o ícone referente ao banco de dados MySQL.

Prossiga acessando o banco do seu Blog wordpress:

Após esse passo você deve localizar o ícone do PhpMyAdmin, no caso do painel Plesk esta logo acima. Acesse o MyPhpAdmin.

Dentro do MyPhpAdmin você deve localizar a tabela chamada: “wp-users” e clicar nela.

Após acessar a tabela indicada, localize o campo chamado “user_pass” navegue pela barra de rolagem horizontal até o botão indicado na ilustração, é o botão de edição.

Na parte superior da página você deve localizar a aba “Visualizar”, clique nela.

Você irá visualizar uma tela com os valores da imagem abaixo, temos ai a senha criptografada do seu Blog, agora a tarefa é apaga-la e depois escrever uma nova senha. Prossiga, clicando no lápis (editar) para poder alterar essa senha.


No campo que corresponde a sua senha, você deve alterar a função para MD5 e apagar o valor criptografado. Após isso, clique em executar.
Agora, com o campo da senha vazio escreva uma nova senha e clique em executar novamente.
Pronto, sua senha foi restabelecida.
Acesse o seu admin e entre no seu Blog Wordpress.

Até a próxima;

Felipe Alencar
www.next4.com.br
Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.

Olá Pessoal!
Vamos a algumas dicas Wordpress, lembrando que este artigo foi feito pelo companheiro Reginaldo Lima.
Este artigo é um resumo das páginas e tags internas do Wordpress.
Todo esse material esta contido na pasta: wp-content/themes/ do seu blog.

• header.php: é o cabeçalho da página. Inclui, além da porção superior que aparecerá nas páginas, o início do documento e a os atributos da tag ;
• footer.php: é o rodapé da página. Não são todos os layouts que o possuem (o meu não tem, em virtude de complicações com o IE); nestes casos, este arquivo só serve para abrigar as tags e ;
• sidebar.php: é a coluna lateral. Há temas, como o default, que suprem esta parte do layout na visualização de artigos (permalinks);
• links.php: lista as blogrolls, geralmente na coluna lateral;
• style.css: é a folha de estilo, que, normalmente, cuida de toda a estrutura e formatação do layout (caso este seja tableless - sem tabelas).
• 404.php: página de erro;
• archive.php: página que lista os arquivos (seja por categoria, ou por data);
• comments.php: como o próprio nome sugere, é a página dos comentários. Ou melhor, é o trecho dos comentários, que é acrescentado à página single.php (vide mais abaixo);
• index.php: página principal do blog;
• page.php: responsável por mostrar as páginas (pages) do blog;
• search.php: página que retorna os resultados de uma pesquisa interna;
• searchform.php: formulário de pesquisa. Pode ser incluído em qualquer parte do blog, através de include (assim: );
• single.php: mostra os posts em uma página (permalinks), quase sempre acompanhado dos comentários.
• screenshot.png: imagem png do seu blog

• single.php - arquivo cuja função é exibir um único post. A única diferença para o index.php é a inserção da tag comments_template(), que insere o arquivo comments.php;
• comments.php - tem a função de exibir os comentários e o formulário para comentar no arquivo single.php;
• functions.php - torna o tema compatível com widgets.

Agora vamos ver as tags que compõem o sistema Wordpress.
As Tags, são variaveis que facilitam a vida do programador e formam um vocabulário único quando um desenvolvedor quer realizar ou alterar um tema ou adicionar um novo recurso ao Blog.

Tags header

# bloginfo(’name’) - este quase dispensa explicações, nome do blog;
# bloginfo(’version’) - versão do WordPress;
# bloginfo(’html_type’) - “Content-type” do seu blog;
# bloginfo(’charset’) - codificação de caracteres utilizada no blog;
# bloginfo(’stylesheet_url’) - CSS do seu tema;
# bloginfo(’rss2_url’) - RSS 2.0 do blog;
# bloginfo(’rss_url’) - RSS 0.92 do blog;
# bloginfo(’atom_url’) - Atom do blog
# p_head() - é uma tag especial que permite que certos plugins insiram códigos no cabeçalho de seu tema. Quando esta tag não é inserida vários plugins deixam de funcionar, então não esqueça de colocá-la em todos os seus temas;
# bloginfo(’description’) - descrição do blog;
# get_option(’home’) - na verdade trata-se de uma função e não uma tag, por isso deve vir precedida da função echo do PHP, que exibe o resultado de uma função ou variável. Neste caso irá retornar a URL inicial do blog;
# wp_list_pages(’title_li=’) - exibe todas as pages existentes, precedidas de <li> e sucedidas por </li>


Tags index

# get_header() - insere o código do header.php, isto é, o cabeçalho do tema;
# if (have_posts()) : while (have_posts()) : the_post() - aqui na verdade nós temos três funções e elas é que dão início ao LOOP. A primeira tag verifica se há posts, a segunda solicita que, enquanto existir post continue no loop e a terceira “pega” todas as informações do post, como o título, conteúdo, data, autor, etc. É comum encontrar tags que só funcionam dentro do loop, isto quer dizer que a tag só irá retornar algum valor se estiver inserida após estas funções e antes de endwhile; e endif;, que terminam o loop.
# the_permalink() - o link do post;
# the_title() - o título do post;
# the_content() - o conteúdo do post;
# comments_number() - insere o número de comentários feitos no post. Além disso adiciona um texto dependendo da quantidade de comentários. Se não houver comentários a tag irá inserir o texto “Nenhum comentário”, se tiver apenas um comentário, irá inserir “Um comentário” e para mais de um comentário irá inserir “N comentários”, onde N é a quantidade de comentários, claro;
# the_author() - o autor do post;
# the_time() - a data em que o post foi postado;
# endwhile; else: - encerra o loop e adiciona a condicional que, se não houver nenhum post insira o conteúdo abaixo;
# _e(’Nenhum post encontrado.’) - este é conteúdo que irá ser inserido caso não exista nenhum post;
# endif; - termina a condicional que verifica se há posts;
# posts_nav_link() - adiciona links de navegação, “próxima página” e “página anterior”;
# get_sidebar() - insere o menu lateral, que veremos na próxima etapa do tutorial;
# get_footer() - e por último, mas não menos importante, insere o rodapé.

Tags sidebar

#bloginfo(’home’) - insere a URL inicial do blog;
#wp_list_categories(’show_count=1′); - exibe uma lista com todas as categorias com o número de posts existentes em cada categoria;
#wp_get_archives(’type=monthly’) - lista todos os meses do ano em que foram inseridos posts. Se você escreveu 7 posts no mês de maio de 2007, por exemplo, será exibido um link “maio/2007″ que ao ser clicado exibirá todos os 7 posts que você escreveu;
#get_links(2, ‘<li>’, ‘</li>’, ”, ”, ‘name’) - lista todos os links da categoria 2 (no caso blogroll), inserindo antes a tag “<li>”, depois a tag </li> e exibindo o nome do link.

Tags footer

#bloginfo(’name’) - nome do blog;
#bloginfo(’rss2_url’) - link para o feed RSS;
#wp_footer() - é uma tag especial que permite certos plugins inserir códigos no rodapé de seu tema. Quando esta tag não é inserida vários plugins deixam de funcionar, então não esqueça de colocá-la em todos os seus temas.

Até a próxima, escreva-nos sugerindo um próximo tema do tutorial!

Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.

Autor: Rodrigo Gonçalves

Flash CS3 Professional
Versão AS: ActionScript 3.0
Versão do Player: Flash Player 9
Package: flash.display
Classe: public class Loader
Dificuldade: conhecimentos básicos de funcionamento do Flash, Actionscript 3.0 e lógica de programação.

Fala galera, tranqüilo?!
Já vimos como podemos carregar uma imagem externa(jpg, gif, png ou swf) no AS3. Carregar imagem externa com Classe Loader AS3.
Agora, vamos ver como podemos fazer a manipulação do conteúdo carregado externamente.
Pra quem já conhecia o a função loadMovie() a classe MovieClipLoader() na versão AS2. Agora passamos à utilizar a Classe Loader() e URLResquet() no AS3 para carregar imagens externas. Para conseguirmos manipular o conteúdo externo precisamos utilizar os Eventos que recebem informações sobre o carregamento externo vinda da propriedade contentLoaderInfo da classe Loader(). As classes de Eventos também podem ser aplicadas para carregamento de dados externos(ex: arquivos Txt, XML, HTML, entre alguns outros). Mas falaremos sobre carregamento de imagens/filmes externos.

Download de um exemplo simples sobre carregamento externo com uso de Eventos.

Quando e pra quê aplicar Eventos em arquivo externos?

- Alguns exemplos:
-Pode ser útil para informar ao usuário do que acontece sobre o conteúdo externo que está sendo carregado naquele momento.

-Poderá também executar/chamar alguma função no começo do carregamento, durante ou após concluir o mesmo, e ainda informar ao usuário caso eventualmente houver erros no carregamento deste conteúdo.

-O arquivo principal(swf) fica mais "leve" por não precisar conter imagens internamente em seu arquivo swf e facilita manutenção. Os arquivos externos, são carregados somente quando solicitados(Eventualmente) pelo programa ou pelo usuário.

Manipulando carregamentos externos com Eventos

Para manipular o conteúdo carregado externamente, podemos usar a propriedade chamada contentLoaderInfo da classe Loader(). Quando utilizado, esta propriedade retorna um objeto da classe LoaderInfo().

Antes de entendermos o código, vamos ver como fica a sintaxe para entender melhor sua aplicação:

A propriedade Loader.contentLoaderInfo "dispara" informações e o "Ouvinte de Eventos"( addEventListener() ) verifica estas informações recebidas e quando ocorrer o tipo de evento definido neste ouvinte, executa/chama a função. Vejamos:

objeto_Da_Classe_Loader.contentLoaderInfo.addEventListener( TipoClasseEvento.PROPRIEDADE_EVENTO, nomeDaFuncao );

Para cada Evento devemos ter ou criar uma função que será chamada quando ocorrer o determinado Evento. Esta função, deve ter um único parâmetro/argumento cadastrado, e este parâmetro deve ser do mesmo tipo (:) do Evento cadastrado dentro da addEventlistener(). Precisamos deste argumento cadastrado na função, porque ele contém informações sobre o objeto carregado, e com isso, podemos utilizar na função os métodos e propriedades do Evento. A função criada não precisa retornar algo. Ou seja, devemos definir como tipo (:) de retorno ( void ). Vejamos:

1
2
3
4

function nomeDaFuncao( argumentoDoEvento:TipoClasseEvento ):void
{
	//declarações da função
}

Alguns do Eventos mais notáveis para manipulação de carregamento de arquivos externos:

* Event.OPEN (open)
Quando iniciar o carregamento do arquivo.

* ProgressEvent.PROGRESS (progress)
Verifica o progresso do carregamento do arquivo externo.

* Event.COMPLETE (complete)
É quando termina o carregamento.

* Event.INIT (init)
É gerado quando as propriedades e métodos do conteúdo que foi carregado estão habilitados para uso após seu carregamento completo. Geralmente quando está disponível a visualização da imagem no stage.

* HTTPStatusEvent.HTTP_STATUS (httpStatus)
Surge quando houve falha no status de uma solicitação HTTP, não consegue carregar o arquivo solicitado.

* IOErrorEvent.IO_ERROR (ioError)
Aparece quando tem um "erro fatal" que resulta em um "cancelamento" na hora de carregar o arquivo.

* SecurityErrorEvent.SECURITY_ERROR (securityError)
É gerado quando o arquivo que está sendo carregado está "fora da área" de segurança permitida.

* Event.UNLOAD (unload)
É também gerado quando utilizamos o método Loader.unload() para remover o arquivo que foi carregado ou quando utilizamos o método Loader.load() para substituir um conteúdo que já foi carregado no mesmo "container"(alvo onde a imagem é carregada do objeto Loader).

Dica:
Todas as Classes de Eventos podem ser encontradas no package(pasta) flash.events do Flash. Também existe mais informações no "Help do Flash".(atalho F1) procurando pelo nome da Classe de Evento. Ex.: ProgressEvent, Event, IOErrorEvent, entre outros. Lá você encontra métodos, propriedades e constantes de cada Evento e também alguns exemplos de sua utilização.
Vale a pena também conferir no Help do Flash as Classes Loader() e LoaderInfo() para maiores informações.

Exemplo

No exemplo que montamos logo abaixo está brevemente comentado no próprio código.
Crie um novo documento ".Fla" na versão AS3 e salve-o em uma pasta.
Coloque também uma imagem externa com tamanho relativamente grande em peso de KBytes nesta mesma pasta do arquivo Fla. Isso para fazermos "testes" de carregamento externo e conseguirmos entender melhor como funciona cada tipo de Evento.
Para simular uma conexão de internet, teste filme pressionando as teclas (Ctrl + Enter, 2 vezes seguidas). Ou também poderá fazer testes com imagens que estão na internet. Ex.: "http://www.seusite.com/suaImagem.jpg".

As informações de carregamento serão mostradas na caixa de saída "Output" para facilitar nosso entendimento e dar maior foco nos tipos de Eventos utilizados.
Pense que ali no lugar do método trace(), você poderá chamar/executar alguma ação/método que queira fazer no início do carregamento, durante e depois que completar o mesmo.

Obs: Lembra-se, estamos utilizando a versão Flash CS3 Adobe para trabalhar com a versão AS3.

No próprio código logo abaixo está inserido uma breve explicação.
Abra o seu arquivo Fla, selecione a primeira camada(layer) e no 1º frame abra o painel de Actions(atalho F9) e coloque o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

/* 
 * Criamos variaveis da Classe URLRequest e Loader:
 * carregamos o arquivo e adicionamos o objeto Loader no stage.
 */
var url:URLRequest = new URLRequest("endereco_da_imagem_aqui");
var carregador:Loader = new Loader();
carregador.load( url );
addChild(carregador);
 
/*
Logo abaixo utilizamos Event handlers (Eventos de manipulação) do conteúdo externo.
Devemos utilizar a propriedade "contentLoaderInfo" da Classe Loader()
que verifica informações sobre o conteúdo à ser carregado e consegue "disparar" informações para os Eventos.
Estamos utilizando alguns dos principais.
*/
 
 
/*
 * Event.OPEN
 * Este evento Event.OPEN verifica quando iniciar(abrir) o carregamento do conteudo
 */
carregador.contentLoaderInfo.addEventListener( Event.OPEN, iniciaCarregamento );
function iniciaCarregamento( evento:Event ):void
{
	//poderá fazer qualquer coisa quando iniciar o carregamento
	trace("começou o carregamento. Usamos o Event.OPEN\n");
}
 
 
/*
 * ProgressEvent.PROGRESS
 * Este evento ProgressEvent.PROGRESS verifica o progresso de carregamento do conteudo
 */
carregador.contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, progressoDeCarregamento );
function progressoDeCarregamento( evento:ProgressEvent ):void
{
	//pegamos o valor carregado e valor total do conteudo(evento.target)
	var carregado:Number = evento.target.bytesLoaded;
	var total:Number = evento.target.bytesTotal;
	var porcentagem:uint = Math.round( carregado / total * 100 );
	trace(porcentagem +" % carregados. Usamos o ProgressEvent.PROGRESS");
}
 
/*
 * Event.COMPLETE
 * Imagem carrega por completo mas ainda não está visivel no stage.
 */
carregador.contentLoaderInfo.addEventListener( Event.COMPLETE, imagemCompleta );
function imagemCompleta( evento:Event ):void{
trace("Conteudo carregado por completo! Usamos o Event.COMPLETE\n");
}
 
/* 
 * Event.INIT
 * Imagem carreda e está visivel no stage. Está pronta para utilizar propriedades/métodos para manipular a imagem.
 * Este evento é parceido com Event.COMPLETE porém é melhor caso queira fazer algo com o conteúdo.
 */
carregador.contentLoaderInfo.addEventListener( Event.INIT, mostraImagem );
function mostraImagem( evento:Event ):void
{
	trace("Agora poderá utilizar as proprieddades/métodos para fazer algo com a imagem!\nUsamos o Event.INIT\n");
	//depois de carregar pode fazer algo com a imagem. Ex:
	this.alpha = 0.5 //alpga de 50%
	this.rotation = 30; //rotação de 30
}
 
/* 
 * IOErrorEvent
 * Também é possivel disparar Eventos de Erros, quando por exemplo a imagem não puder ser carregada ou não existe.
 * Para simular um erro, basta alterar o endereço para um inexistente.
 */
carregador.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorImagem);
function ioErrorImagem( evento:IOErrorEvent ):void
{ 
	trace("Conteudo", evento.target, "não pode ser carregado.\nVerifique se a imagem existe no local ou a conexão falhou!\nUsamos o IOErrorEvent.IO_ERROR");
}

Download de um exemplo simples sobre carregamento externo com uso de Eventos.

Abraços e até a próxima!

Rodrigo Gonçalves
Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.

Classe: String

Versão AS: ActionScript 2.0 e 3.0

Obs.: Para um bom aproveitamento deste artigo é interessante ter conhecimento básico de Strings e Arrays.

Fala galera, tranquilo?

Vamos ver como podemos converter um valor do tipo String (texto) em "elementos" de Array.
Para isto, utilizamos o método split() da Classe String().

Sintaxe do método String.split():

split(delimiter:String, limit:Number):Array

O método String.slpit() "divide" valor inserido em um objeto String e retorna como valor do tipo Array. Ou seja, podemos controlar/manipular valores de um "texto"(String) como elementos de Array.
Este método split() tem dois parâmetros, sendo eles:

delimiter:
Primeiro parâmetro, é o "delimitador". Ou seja, utiliza uma "palavra chave" que você determina(pode ser qualquer valor que estiver inserido na String) a qual será usado como separador. Este parâmetro deve ser colocado entre aspas duplas " " pois é do tipo String. Este delimitador funciona como uma espécie de "separador" entre cada elemento que você quer separar. Claro que você deverá inserir um caracter comum para todos os elementos que você quer separar.
Desta maneira, conseguirmos "dividir" valores de uma String como elementos de Array e manipulá-los como tal. Caso seja indefinido( undefined ) este primeiro parâmetro, o objeto String inteiro será inserido no primeiro elemento do Array. Sabendo que um "index Array" começa a contagem de elementos a partir do número 0 (zero) e não a partir do número 1.

limit:
Segundo parâmetro, é o "limite". Pode ser opcional, é o "número máximo" de elementos que você quer separar e inserir em um objeto Array. Caso não seja colocado o segundo parâmetro, por padrão irá inserir todos elementos separados pelo delimitador.

Vamos ver alguns exemplos de como utilizar o método split().

Vamos criar um objeto String que recebe como valor uma lista de "dias da semana", estes valores estão separado por vírgulas(poderia ser qualquer caracteres que quisermos).
Crie um novo arquivo Fla(pode ser versão AS2 ou AS3). Clique no primeiro e único frame da primeira layer e abra o painel de Actions (atalho F9), digite:

1
2

var listaTexto:String = "domingo,segunda,terça,quarta,quinta,sexta,sábado";
trace(listaTexto); //retorna o valor da String

Teste o filme(Ctrl + Enter). Repare que retorna o valores da listaTexto na caixa de saída(Output). Mas, não conseguimos manipular ou "controlar" este valor da String "pegando" apenas um dos valores da nossa lista de "dias da semana".

Certo. Agora vamos utilizar o método String.split() para conseguirmos manipular os valores desta lista. Apague a última linha 2:

2

trace(listaTexto);

E digite:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* criamos um objeto Array que recebe valor do Objeto String
 * separando cada elemento pelo demilitador virgula */
 
var listaArray:Array = listaTexto.split(",");
 
// manipulando os valores recebidos
trace(listaArray[0]);	// retorna domingo
trace(listaArray[1]);	// retorna segunda
trace(listaArray[2]);	// retorna terça
trace(listaArray[3]);	// retorna quarta
trace(listaArray[4]);	// retorna quinta
trace(listaArray[5]);	// retorna sexta
trace(listaArray[6]);	// retorna sábado
trace(listaArray);		// retorna a lista completa

Teste o filme(Ctrl + Enter). Repare que agora você consegue manipular estes valores da String utilizando como elementos de Array[ ].
O Array também aceita valores numéricos, strings, booleano(true ou false) ou objetos inseridos como valores na mesma variável.

Também posso utilizar o valor " "(espaço) que é inserido entre cada palavra do texto(String), sendo como meu "delimitador". Ou seja, podemos "separar" cada palavra da frase aproveitando apenas o espaço entre elas, conseguindo manipular cada palavra individualmente como um elemento de Array.
Outro exemplo:

1
2
3
4
5
6
7
8

var texto:String = "O menino estava ouvindo música."
var listaArray:Array = texto.split(" "); 
trace(listaArray);		// retorna a frase, no lugar do "espaço" está vírgulas
trace(listaArray[0]);	// retorna O
trace(listaArray[1]);	// retorna menino
trace(listaArray[2]);	// retorna estava
trace(listaArray[3]);	// retorna ouvindo
trace(listaArray[4]);	// retorna música.

Qual a utilidade em converter uma String em Array?

Também podemos trabalhar com variáveis externas(ex.: um arquivo.txt) e converter este valor da variável em elementos Arrays. Sabendo que os valores da variável externa é "tratada" como tipo String pelo Flash. Você consegue converter em Arrays e manipular este valores como Array.

Isto pode ser muito útil quando queremos trabalhar por exemplo, com apenas uma variável (seja inseridas no flash ou de algum arquivo externo) que recebem um ou mais tipos de valores como uma "lista" de diversos valores(ex. de lista: valor1, valor2, valor3,…valorN).
Você pode criar apenas uma variável que recebe varios valores desta "lista". Este valores da variavel devem ser separados cada um utilizando qualquer caracter em comum que você determinar(ex.: uma vírgula, uma letra, numero, etc), e manipular estes mesmo valores utilizando comportamento de index Array[0, 1, 3,…N] como mostrado nos exemplos acima.

Para aplicar o método split() em uma caixa de texto dinâmica. Ao invés de utilizar o método trace() que retorna o valor na caixa de saída(Output), basta aplicar os valores do Array na caixa de texto dinâmica utilizando a propriedade TextField.text.

Ex.:

meuCampo.text = listaArray[0];
meuCampo.text = listaArray[1];
meuCampo.text = listaArray[2];