Vamos falar um pouco sobre conceito básico de eventos no AS3. Se você já sabe o que é variáveis (propriedades) e funções (métodos) de um objeto, eventos é algo muito importante pra conseguirmos ter alguma atidude no código.

Se você está começando programar, as vezes pode ser um pouco difícil para muitos essa parte no começo (inclusive comigo).
Mas acredite, uma vez aprendido e entendido pelo menos o básico de como funciona os eventos no Flash e como aplicar eles em um código, as idéias começam a fazer mais sentido conforme praticamos mais e mais.
Espero que esse artigo te ajude de alguma forma caso esteja começando com AS3.

Índice:
1. Entendo o conceito de eventos na vida real;
2. Eventos no AS3;
3. Sintaxe addEventListener;
4. Adicionando um Evento em um objeto;
5. Removendo um Evento de um objeto.

1. Entendo o conceito de eventos na vida real

Afinal o que é Evento? Um Evento é tudo que acontece (eventualmente) ao nosso redor. Um exemplo geral da vida cotidiana das pessoas. Por exemplo, quando acordamos, quando tomamos café da manhã, quando o começar a chuver, quando a noite chegar, quando tiver uma festa, quando eu parar de falar, etc,… Quando…Quando….Quando…
Obviamente você deve ter reparado a palavra "Quando" nas frases. E essa palavra pode ser usadas para nós mesmo sabermos (e tentar entender) quando usar um tipo de evento para termos alguma determinada atitude no código e fazer alguma ação (olha aí um evento novamente).

Os eventos acontecem, queira ou não queira eles acontecem uma hora ou outra. A diferença básica é, se queremos ouvir (dar atenção) e fazer algo quando (e somente quando!) acontecer alguma coisa sobre um determinado assunto, ou se preferir pode deixar acontecer as coisas ao redor e simplismente fazer nada. Por exemplo, quando chover, quero pegar um guarda-chuva! Ou quando a noite chegar, quero ir em uma festa! Ou se eu quiser tomar banho de chuva e não ir na festa a noite. Tudo bem! São só eventos que acontecem e eu não quis dar atenção. Bom, acho que você já pegou a idéia.

Ok! Muito bonito. Muito legal. Muito bacana esse tal de "evento". Mas e o Flash? Como fica? O que isso tem haver?

"Quando" você ler o resto, você vai entender…

2. Eventos no AS3

No caso do amigo Flash, os eventos também acontecem. Basicamente, existem 2 tipos de eventos:

Um gerado pela interação do usuário com o conteúdo, quando por exemplo clica no botão, ou quando pressiona uma tecla.
E outro tipo de evento que acontece pode ser pelo criado próprio sistema (Player Flash). por exemplo quando começa ou termina um download ou upload de um arquivo, ou quando carrega uma imagem, video ou som, e por aí vai.

Quando um evento acontece, surge um cara chamado EventDispatcher que basicamente podemos dizer que é responsável por enviar informações sobre o tipo de evento que acontece naquele momento.

Em outras palavras, podemos considerar o "ouvinte de eventos" (addEventListener) como sendo o tal "dedo-duro" da situação. Assim que o ouvinte de eventos notar e receber algum aviso que algo aconteceu na área do Flash, o "ouvinte de eventos" vai correndo contar pro "chefe" Flash o que algo aconteceu com algum dos seus objetos, e se o Flash foi programado pra ouvir e dar atenção sobre esse evento, ele vai chamar seus "capangas" (Function Event Handler: funções que manipula o tal evento) pra tomar alguma atitude e "botar ordem na casa".

No ActionScript 3, os principais eventos estão no package (pacote de classes) flash.events e outros no também no fl.events. Você pode conhecer esses eventos e ter mais detalhes sempre acessando Event no Help do Flash (tecla F1).
Importante notar que, cada objeto no Flash tem seus grupos de eventos dedicado para cada situação(objeto). Por exemplo "Evento de clicar em um objeto" visual usamos o Evento MouseEvent.CLICK que retorna um valor do tipo string ("click") solicitado no addEventListener (Veremos um exemplo sobre isso a seguir).

3. Sintaxe addEventListener

Pra responder qualquer tipo de Evento no Flash, precisamos de 3 etapas fundamentais, sendo elas:

1º - Escolher um alvo que queremos aplicar o evento.
Cadastrar um "ouvinte de eventos" para esse objeto usando a função addEventListener();
Essa função solicita 2 argumentos obrigatórios, sendo 1º argumento Tipo de Evento e 2º argumento qual Função do evento que queremos chamar quando esse tal evento acontecer.

Sintaxe cadastrando um evento para um objeto:

  meuObjeto.addEventListener(TipoDeEvento.PROPRIEDADE_DO_EVENTO:String, funcaoQueManipulaEvento:Function);

Ex: Quando clicar em um objeto com nome de instância botao, chama/executa uma função com nome quandoClicarNoBotao():

  botao.addEventListener(MouseEvent.CLICK, quandoClicarNoBotao);

Obs: Esses são 2 argumentos obrigatórios para addEventlistener(), existe outros argumentos que são opcionais para tratamentos mais avançados. Mas por agora essa estrutura é o que precisamos saber pra funcionar na maioria dos casos. Caso se interessar em maiores detalhes, confira o Help Flash sobre addEventListener.

2º - Escolher o tipo de evento que queremos ouvir.
Ex.: MouseEvent.CLICK (quando o mouse clicar em algum objeto), etc;

3º - Criar uma função para manipular o evento quando ele acontecer, conhecida como "Event handler function".
É apenas uma função dedicada para o tipo de evento que você quer dar atenção, fazer alguma coisa quando esse evento acontecer.
A função é "especial pra manipular eventos", deve conter apenas um argumento do mesmo tipo de Evento usado no addEventlistener, e também não deve retornar nada (void). Esse argumento da função guarda algumas informações sobre tipo de evento quando ele é disparado e podemos usar de forma dinâmica dentro a função (Vamos ver um exemplo simples mais adiante).

Sintaxe de função que manipula evento (Event handler function):

function funcaoQueManipulaEvento(argumentoDoEvento:TipoDoEvento)void 
{
	//seu código aqui, faz alguma coisa com o conteudo.
}

4. Adicionando um Evento em um objeto

Usar a função addEventListener é um padrão para responder eventos no AS3. Com esse conceito aprendido já conseguimos fazer um interação simples por exemplo de clicar em botão e chamar um link.

Ex.: no stage, temos apenas um simbolo do tipo botão com nome de instâncias botao e código inserido no 1º frame:

botao.addEventListener(MouseEvent.CLICK, quandoClicarNoBotao);
 
function quandoClicarNoBotao(evento:MouseEvent):void
{
	trace("Você clicou no botao com nome: ", evento.target.name);
}

O evento.target.name, é um exemplo usando argumento da função para retornar algum valor do objeto usado. Como a variável evento representa a classe MouseEvent no nosso caso, usando a propriedade target (da classe MouseEvent), pegará exatamente o nosso objeto “alvo” (evento.target) que é no nosso exemplo o objeto botao que sofre esse evento de MouseEvent.CLICK, e depois podemos usar propriedades do objeto “botao”, como exemplo a propriedade name, mostrando o nome do objeto em si.

Você também pode usar a mesma função do mesmo tipo de evento para aplicar em diferentes Objetos.

Ex.: No stage instâncias com nomes: botao1, botao2, botao3, respondendo a mesma função quandoClicarNoBotao quando clicado.

botao1.addEventListener(MouseEvent.CLICK, quandoClicarNoBotao);
botao2.addEventListener(MouseEvent.CLICK, quandoClicarNoBotao);
botao3.addEventListener(MouseEvent.CLICK, quandoClicarNoBotao);
 
function quandoClicarNoBotao(evento:MouseEvent):void
{
	trace("Você clicou no botao com nome: ", evento.target.name);
}

Se você testar esse código, e clicar em cada botão, irá retornar o nomes de cada um deles, usando a mesma função.

5. Removendo um Evento de um objeto

Também podemos parar de "escutar/respnder" um tipo de evento quando não precisamos mais usar ele no código. É uma boa prática e recomendado fazer isso, pois evitamos consumir memória desnecessária do computador. Pra isso, utilizamos a função removeEventListener() que é a mesma idéia da função addEventListener(), mas no caso irá remover um evento que já foi cadastrado antes pela função addEventListener. Deve passar exatamente as mesmas informações que foi passada no addEventListener do objeto(alvo), tipo de evento e função do evento que queremos parar de ouvir.

Baseando no mesmo exemplo anterior do clique no botão. Depois de clicar apenas 1 vez, eu quero remover esse ouvinte de eventos em seguida para o usuário não poder mais clicar no botão. Ficando algo assim:

botao.addEventListener(MouseEvent.CLICK, quandoClicarNoBotao);
 
function quandoClicarNoBotao(evento:Event):void
{
	trace("Você clicou no botao com nome: ", evento.target.name);
	botao.removeEventListener(MouseEvent.CLICK, quandoClicarNoBotao);
}

Esse foi um conceito básico sobre de Evento no AS3, não pare por aqui, o próprio Help do Flash tem bastante informação de como usar e pra que usar eventos. A idéia de utilização é bastante consistente durante todo o código AS3 pra maioria dos casos. Iremos utilizar muitos esses conceitos de eventos nos próximos artigos que tivermos.

Um exemplo de eventos pra quando a carregar externamente uma imagem, poder fazer algo com ela:
Manipulando carregamento externo com AS3

Abraço e até a próxima!

Rodrigo Gonçalves
Equipe AlvoWeb

Acredito que pelo menos uma vez na vida você já usou(ou irá usar) um site de busca pra tentar achar algum conteúdo de Flash/AcstionScript. Seja pra tirar alguma dúvida, ou talvez curiosidade, ter como referências de estudos e inspiração.

Agora, já imaginou ter uma Search Engine(buscador online) dedicado exclusivamente pra conteúdo plataforma Flash, Flex e ActionScript?
Ou melhor, já pensou em otimizar seu tempo de pesquisa por conteúdo e referências de Flash/AS?

Coloque um sorriso no rosto amigo(a)!
Esse projeto existe e chama HexoSearch (hexosearch.com).

A grande sacada do projeto, é otimizar seu tempo de pesquisa. O HexoSearch é focado em conteúdo na plataforma Flash/Flex/AS, e ainda dá oportunidade de você votar no conteúdo que você achou útil. Com tempo, esse resultado da votação tende a otimizar e agilizar as próximas buscas dentro do HexoSearch, pois outras pessoas como a mesma dúvidas ou curiosidades que você teve também já procuram(ou irão procurar) algo parecido. Compartilhar informações úteis!

Possui também ferramentas plugin/add-ons pra instalar no browser pra facilitar sua busca do conteúdo sem precisar entrar no site.

Embora o projeto esteja na versão Beta, a comunidade Flash/AS é ativa e só tende a crescer com melhorias constantes nas novas versões.
Confira atualizações pelo site HexoSearch ou pelo Twitter do HexoSearch.

Vale a pena no mínimo coferir o site HexoSearch.

Há! E não esquece do Help do Flash. Antes de tudo, ele também é dedicado pra Flash/ActionScript e só está esperando você apertar a tecla F1.

Abraço e até a próxima.

Rodrigo Gonçalves

Se você curte(muito mesmo) Flash & ActionScript e passa dias/mêses/anos trabalhando e estudando sobre isso, ou se você é apenas um "curioso dedicado". Talvez esse post seja pra você.
Passarei algumas referências de livros que são no mínimo interessantes sobre do mundo Flash & ActionScript. Acredito que esse material possa ajudar a quem busca estudar por conta própria. Com toda certeza, boas referências nos ajudarão e muito melhorar nossos estudos e trabalhos.

Os assuntos dos livros são bem variados e também focados para cada proposta de acordo com cada tema. Tem assunto pra Developers também Designers, Animador, iniciante ao avançado ou apenas fã do assunto Flash/AS. Alguns dos temas e contextos do livros podem ser semelhantes, mas com técnicas e ponto de vistas diferentes(ou focos diferentes) em muito deles com base na experiencia de cada autor e de cada público alvo.

Você encontra assuntos como: animações em timeline, videos pra Flash, criação de jogos em flash, conceitos de programação orientada objeto(OOP), programação AS3, animação, efeitos e interatividade usando códigos AS, e por aí vai.

Pegue um bom café(vai precisar), uma boa poltrona, e bom estudos!

Se você já conhece um pouco sobre ActionScript 2.0 mas no meio aprendizado se deparou com a versão AS3, e gostaria de entender as principais diferenças entre um código AS2 e AS3 pra fazer migração sem tanto "trauma/enxaqueca/insonia/tristeza/náuseas/chatice…", mesmo assim o autor já assume que você tenha uma boa base em programação AS. Está aí uma excelente oportunidade pra te convencer sobre o AS3. Um "Fast food", e o melhor de tudo, não te faz mau algum e ainda te dá mais apetite pra aprender sobre AS3.

ActionScript 3.0 Migration Guide: Making the Move from ActionScript 2.0 Por Kris Hadlock Edição: ilustrada Publicado por Peachpit Press, 2008 ISBN 0321555589, 9780321555588 149 páginas

Introdução para quem quer começar bem do básico em AS3 assunto mais simplificado e resumido.

Learning ActionScript 3.0: a beginner’s guide Por Rich Shupe, Zevan Rosser Colaborador Zevan Rosser Publicado por O’Reilly, 2007 ISBN 059652787X, 9780596527877 363 páginas

Literalmente um curso/treinamento oficial da Adobe registrado em um livro. Um livro é mais focado em programação AS3 e outro é mais focado na ferramenta Flash CS4. Ótimo complemento pra quem pretende estudar pra tirar certificação Adobe.

	ActionScript 3.0 for Adobe Flash CS4 Professional Por Chris Florio, Adobe Creative Team Edição: ilustrada Publicado por Peachpit Press, 2008 ISBN 0321579216, 9780321579218 367 páginas
	Adobe Flash CS4 Professional Classroom in a Book Por Adobe Creative Team (COR), Russell Chun Edição: ilustrada Publicado por Peachpit Press, 2008 ISBN 032157382X, 9780321573827 355 páginas

100 técnicas essenciais sobre Flash CS4. Geralmente quem precisa conhecer o que tem de novo no Flash CS4.

Adobe Flash CS4 Professional How-Tos: 100 Essential Techniques Por Mark Schaeffer Edição: ilustrada Publicado por Adobe Press, 2008 ISBN 0321580044, 9780321580047 288 páginas

Pra quem busca algo mais sério, detalhada explicação em ActionScript, esse te dá uma base sólida do essencial que precisa saber em programação AS3.

Essential ActionScript 3.0 Por Colin Moock Edição: ilustrada Publicado por O’Reilly, 2007 ISBN 0596526946, 9780596526948 911 páginas

Guia de referência AS3. Complementos do livros: Essential AS3. E outro sobre técnicas de SEO pra Flash.

	The ActionScript 3.0 Quick Reference Guide: For Developers and Designers Using Flash CS4 Professional Por David Stiller, Darren Richardson, Jen Dehaan, Rich Shupe Edição: ilustrada Publicado por O’Reilly, 2008 ISBN 0596517351, 9780596517359 491 páginas
	ActionScript 3.0 cookbook Por Joey Lott, Darron Schall, Keith Peters Edição: ilustrada Publicado por O’Reilly, 2006 ISBN 0596526954, 9780596526955 556 páginas
	Search Engine Optimization for Flash: Best Practices for Using Flash on the Web Por Todd Perkins Editora O’Reilly Media, Incorporated, 2009 ISBN 0596522525, 9780596522520 278 páginas

Esses livros focados mais em conceitos, técnicas e práticas de Programação-Orientada-Objeto(OOP) e Design Patterns em AS3.

	ActionScript 3.0 Design Patterns: Object Oriented Programming Techniques Por William B. Sanders, Chandima Cumaranatunge Edição: ilustrada Publicado por O’Reilly, 2007 ISBN 0596528469, 9780596528461 509 páginas
	Advanced ActionScript 3 with Design Patterns Por Joey Lott, Danny Patterson Edição: ilustrada Editora: Adobe Press, 2006 ISBN 0321426568, 9780321426567 286 páginas
	Object-oriented Actionscript 3.0 Por Peter Elst, Sas Jacobs, Todd Yard Edição: ilustrada Publicado por Apress, 2007 ISBN 1590598458, 9781590598450 615 páginas
	Foundation ActionScript 3.0 with Flash CS3 and Flex Por Steve Webster, Todd Yard, Sean McSharry Edição ilustrada Editora Friends of ED, 2007 ISBN 1590598156, 9781590598153 450 páginas

Livros para quem busca criar aplicativos com Adobe AIR.

	Adobe AIR: A Guide for Developers Por Mark Blair, Andrew Muller, Andrew Spaulding Edição: revisada Publicado por O’Reilly Media, Inc., 2009 ISBN 0596521766, 9780596521769 272 páginas
	Adobe AIR 1.5 Cookbook: Solutions and Examples for Rich Internet Application Developers Por David Tucker, Marco Casario, Koen De Weggheleire, Rich Tretola Edição: ilustrada Publicado por O’Reilly Media, Incorporated, 2008 ISBN 0596522509, 9780596522506 446 páginas
	Adobe AIR Bible Por Benjamin Gorton, Peter Elst, Ryan Taylor, Jeff Yamada Edição: ilustrada Publicado por John Wiley and Sons, 2008 ISBN 0470284684, 9780470284681 480 páginas
	Adobe AIR in Action Por Joseph Lott, Kathryn Rotondo, Samuel Ahn, Ashley Atkins Edição ilustrada Editora Manning, 2008 ISBN 1933988487, 9781933988481 317 páginas

Para quem é mais do tipo "hardcore" e gosta de animação e efeitos usando apenas código AS3.

	Foundation ActionScript 3.0 animation: making things move! Por Keith Peters Edição: ilustrada Publicado por Apress, 2007 ISBN 1590597915, 9781590597910 542 páginas
	AdvancED ActionScript 3.0 Animation Por Keith Peters Publicado por Friends of ED, 2008 ISBN 1430216085, 9781430216087 472 páginas
	Foundation ActionScript 3.0 Image Effects Por Todd Yard Editora Friends of Ed Series, 2009 ISBN 1430218711, 9781430218715 700 páginas

Programação AS3 com PHP. Extremamente útil pra quem precisa conhecer como interagir Flash/AS3 com PHP e servidores.

Flash and PHP Bible Por Matthew Keefe Edição: ilustrada Publicado por John Wiley & Sons, Incorporated, 2008 ISBN 0470258241, 9780470258248 508 páginas

Os 2 primeiros livros, falam uma boa introdução e técnicas sobre produção de players de videos usando Flash CS3/CS4 e AS3, e como exportar seus vídeos de maniera mais apropriada pra projetos Web. O 3º livro, fala sobre interagração e técnicas dos softwares Adobe After Effetcs CS4 e Flash CS4.

	Video with Adobe Flash CS4 Professional Studio Techniques Studio Techniques Por Robert Reinhardt Editora Adobe Press, 2009 ISBN 032160623X, 9780321606235 376 páginas
	Producing Flash CS3 Video: Techniques for Video Pros and Web Designers Por John Skidgel Edição: ilustrada Publicado por Elsevier Science & Technology Books, 2007 ISBN 0240809106, 9780240809106 243 páginas
	After Effects for Flash, Flash for After Effects: Dynamic Animation and Video with Adobe After Effects CS4 and Adobe Flash CS4 Professional Por Richard Harrington, Marcus Geduld Edição ilustrada Editora Adobe Press, 2009 ISBN 0321606078, 9780321606075 360 páginas

Dobradinha feita pelo animador expert em Flash Chris Georgenes. Pra quem gosta de animar em timeline e quer melhorar o fluxo de trabalho em animação em Flash, esses 2 livros, apresentam dicas e truques valiosos que realmente mudam alguns(ou todos) seus conceitos sobre animação em timeline. O foco do autor é otimizar seu tempo e melhorar suas técnicas no fluxo de trabalho com situações e exemplos do dia-a-dia de um animador Flash. Um livro utiliza a versão Flash CS3 e outro versão Flash CS4. Uma das referências mais que obrigatória pra quem deseja animar em Flash timeline.

	How to Cheat in Adobe Flash CS4: The Art of Design and Animation Por Chris Georgenes Edição: ilustrada Publicado por Elsevier Science Ltd, 2009 ISBN 0240521315, 9780240521312 336 páginas
	How to Cheat in Adobe Flash CS3: The Art of Design and Animation Por Chris Georgenes Edição: ilustrada Publicado por Focal, 2007 ISBN 0240520580, 9780240520582 272 páginas

Já pensou como são feito alguns jogos em Flash? Pra quem quer conhecer conceitos e fundamentos de desenvolvimento em jogos com Flash CS3/CS4 e AS3. Esses livros mostram alguns exemplos com dificuldade progressivas e estudos de casos mais detalhados a cada capítulo, além sobre discutir técnicas e fundamentos importantes sobre Flash e AS3.

	Foundation Game Design with Flash Por Rex Van Der Spuy Editora Friends of Ed Series, 2009 wISBN 1430218215, 9781430218210 586 páginas
	ActionScript 3.0 Game Programming University Por Gary Rosenzweig Publicado por QUE CORP, 2007 ISBN 0789737027, 9780789737021 440 páginas

Pra quem busca uma ótima e didática introdução sobre jogos em Flash. Um dos raros livros traduzido (e muito bem traduzido por sinal) em Português sobre esse tema. Mesmo não sendo versões atuais de Actionscript e Flash, os conceitos e técnicas abordadas no livro são interessantes e práticos.
O autor é detalhista e usa uma linguagem de fácil entendimento. A cada capitulo tem um exemplo de jogo explicando seu conceito, e introduzindo assuntos importantes sobre AS. A dificuldade também é progressiva a cada capítulo. O Autor do livro já assume que você tenha conhecimentos em programação AS2. Esse livro não te ensina como programar em AS, mas sim, mostra como criar jogos usando versão Flash 8 e AS2.

DESENVOLVIMENTO DE GAMES COM MACROMEDIA® FLASH® PROFESSIONAL 8 - Série Profissional Por Glen Rhodes Publicado por Cengage Learning, 2008 ISBN 8522106169, ISBN13: 9788522106165 520 páginas

Para quem procura aprender código Actionscript 2 com Flash 8. O livro ensina ótimos conceitos e programação e boas práticas, intercalando com exercícios voltado para criação de jogos e interatividade.

Macromedia Flash 8 ActionScript: Training from the Source Por Jobe Makar, Derek Franklin, Danny Patterson, Erik Bianchi Editor Adobe Press, 2006 ISBN 0321336194, 9780321336194 516 páginas

Esse é criação de games Flash para Nitendo Wii. O autor explica em plataforma utilizando Flash CS3 e ActionScript 2. É interessante pra quem busca diferenciar o uso do Flash & AS2 e também conhecer técnicas de interatividade necessárias em games.

Nintendo Wii Flash Game Creator’s Guide: Design, Develop, and Share Your Games Online Por Todd Perkins Edição: ilustrada Publicado por McGraw-Hill Professional, 2008 ISBN 0071545255, 9780071545259 315 páginas

Conceitos de Jogos e simulação de 3D com Flash. Fala de assuntos e técnicas que podem ser interessante conhecer sobre esse tema.

Flash 3D: animation, interactivity, and games Por Jim Ver Hague, Chris Jackson Edição: ilustrada Publicado por Focal Press, 2006 ISBN 0240808789, 9780240808789 402 páginas

Outro livro recomendado conhecer pra quem quer desenvolver games em Flash. Falam de conceitos considerados úteis conhecer.

Título Macromedia Flash MX game design demystified: the official guide to creating games with Flash Por Jobe Makar Edição ilustrada Editor Macromedia Press, 2003 ISBN 0201770210, 9780201770216 626 páginas

O Help Flash é uma ótima documentação e referência, pra tirar dúvidas sobre um determinado código, e boa parte e base dos códigos que usamos estão explicado lá, referente a cada Classe, suas propriedades, métodos e eventos, etc.
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

E no site da Adobe-Communities, existe comunidades tanto pra Desenvolvedores quanto pra Designers.
Vale a pena conferir!

Sugestões finais:

Não pare por aqui, não fique apenas em uma única referência de estudos, busque mais fontes(internet, livros, fóruns, sites específicos, profissionais e estudantes). Mesmo que as vezes seja temas parecidos e as vezes até "redundante" sobre algum assunto, cada um dos autores tem diferentes experências e habilidades sobre o assunto abordado, usam manieras diferentes também pra comunicar essas mesmas informações(ponto de vista diferentes), que certamente você se indentificará com algum deles, sentirá mais confortável, mais motivado pra estudar e melhor poderá te dar oportunidade pra criar o SEU entendimento o SEU ponto de vista pra poder começar(ou continuar) a SUA jornada. Se puder, tente dar um foco nos estudos que você tem mais facilidade, vá no seu ritmo, e aos poucos vai pegando informações/conhecimentos de outras áreas que te ajudarão melhorar ainda mais a sua especialização.

Se você conhecer boas referências, nos informe! Bons estudos!

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

Rodrigo Gonçalves
Equipe AlvoWeb

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 ou superior
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. O seu servidor deve ter suporte pra função mail() do PHP.

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

Indice:

1. Introdução;
2. Criando os objetos na tela;
3. Organização do código;
> 3.1. Divida uma grande tarefa em pequenas tarefas;
> 3.2. Nomes de variaveis, funções e comentários de código;
4. Inserindo código AS3;
6. Criando script PHP;
7. 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 fazem 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 o 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

É possível também criar esses objetos usando apenas código AS3. Mas como nosso objetivo aqui será apenas enviar e-mail, e dar ênfase ao código que tem maior importância para não fugir do nosso foco. Para esse exemplo estamos criando os objetos visuais (caixa de textos e botão) manualmente usando as ferramentas no ambiente do Flash.

Dica: É sempre bom criarmos um hábito de organização com web. No Flash não é diferente e você vai agradecer você mesmo mais tarde por lembrar de ter feito essa organização. Sugiro criar uma pasta para guardar todos seus arquivos Flash e PHP.

Com o Flash 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 será destinada para os objetos visuais (caixa de textos e botão).
Iremos criar 5 campos de texto, sendo:
- 4 deles serão dinâmicos do tipo "input Text", com instâncias na seguinte ordem: nomeTxt, emailTxt, assuntoTxt e mensagemTxt;
- 1 campo de texto do tipo Dynamic Text com nome de instância avisoTxt, que será destinado para mostrar os avisos ao usuário sobre o que acontece quando ele tenta enviar os dados.
- 1 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. Repare também que todos os campos estão configurado pra aceitar apenas uma única linha (Single line). Apenas os campos mensagemTxt e caixa e avisoTxt devem ser configurado para aceitar mais de uma linha (Multiline), você confere essa configuração pelo painel de propriedades da caixa de texto.

Você poderá acompanhar na imagem 2 a seguir, na seguinte ordem:

- Campo Nome:
- Tipo: Input Text
- Instância: nomeTxt
- Aceitar quantas linhas: Single line

- Campo E-mail:
- Tipo: Input Text
- Instância: emailTxt
- Aceitar quantas linhas: Single line

- Campo Assunto:
- Tipo: Input Text
- Instância: assuntoTxt
- Aceitar quantas linhas: Single line

- Campo Mensagem:
- Tipo: Input Text
- Instância mensagemTxt
- Aceitar quantas linhas: Multiline

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

- Campo Aviso:
- Tipo: Text Dynamic
- Instância avisoTxt
- Aceitar quantas linhas: Multiline


Imagem 2: Criando os objetos e configurando.

3. Organização do código

Com os objetos criados e configurados, agora vem a parte mais legal. ActionScript. É ele que vai dar vida. Mas precisamos nos organizar e pensar no que fazer antes.
E aqui vai algumas dicas que me ajudam muito na hora de começar programar algo, e talvez esse método possa te ajudar também.

No começo, pode parecer que perdemos tempo tendo esses cuidados. Mas, acredite, vai facilitar a sua vida e de quem for trabalhar com você.

3.1. Divida uma grande tarefa em pequenas tarefas

No código a seguir, repere que foi criado várias funções dedicada para cada pequena tarefa. Isso facilita muito na organização, manutenção e reutilização de código. Pois, é muito mais fácil enfrentarmos algum problema e criar soluções pra eles, se antes dividirmos em pequenos pedaços e dedicando soluções por partes (criando funções específicas).

Por exemplo, quando queremos fazer uma "grande tarefa", como no nosso caso "enviar e-mail", se quebrarmos essa "grande tarefa" (grande função) em "pequenas tarefas" (funções dedicadas), BINGO! Ficará muito mais fácil de atingir seus objetivos passo-a-passo, além de te ajudar na organização e agilizar caso precise fazer manutenção ou melhorias futuramente.

3.2. Nomes de variaveis, funções e comentários de código

Não tenha medo também de dar nomes "grandes" pra funções e variáveis, desde que esses nomes sejam descritivas e tenha um padrão durante todo código. Nomes descritivos irão ajudar ter um código mais "auto-explicável" possível e tentar poupar comentários desnecessários.

O comentários também são bastante válidos para não só "documentar o seu código", mas pra te ajudar a lembrar a lógica do que o programa faz. Você não vai querer perder tempo e reaprender algo que você mesmo já fez. Ou quer?
Os comentários no código estão com objetivos mais "didáticos", mas sempre poderá melhorar pra não ser tão redundante na explicação, algo que o o próprio nomes das funções e variáveis já conseguem (e devem) explicarem por si só.

4. Inserindo o código AS3

Vamos ao código de fato.
O código está dividido por funções dedicadas pra cada pequena tarefa, brevemente comentado e auto-explicativo.
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

/* @Autor: Rodrigo Gonçalves [Rodrigo PiXEL]
 * @Créditos: www.AlvoWeb.com */
 
 
/***************************
 * VARIAVEIS
 * Criamos todas variaveis usadas durante o código
 ****************************/
 
var tempoMensagem:Timer; //intervalo entre mensagens de aviso
var variaveis:URLVariables; //receber dados no flash pra enviar pro script php
var urlPhp:URLRequest; //vai armazenar o arquivo php externo
var loader:URLLoader; //carregar e comunicar com arquivo php
 
//iniciamos o programa
init();
 
 
 
/***************************
 * FUNÇÕES
 * Toda mecânica está separada em pequenas funções
 ****************************/
 
//inicia e configura todo o programa
function init():void
{
	//habilitamos acentuação
	System.useCodePage = true;
 
	//limpamos todos os campos de texto antes de começar.
	limpaTodosCamposTextos();
 
	//cria o Timer com 3 segundos(3000 milesegundos) executa quandoTempoAcabar() apenas 1 vez.
	tempoMensagem = new Timer(3000, 1); 
	tempoMensagem.addEventListener(TimerEvent.TIMER, quandoAcabarTempo);
 
	//quando clicar no botão executa a função enviaMensagem();
	enviarBtn.addEventListener(MouseEvent.CLICK, quandoEnviarBtn);
}
 
 
//função de evento, executa a quando clicar no botao enviarBtn
function quandoEnviarBtn(e:MouseEvent):void
{
	verificaDadosAntesDeEnviar();
}
 
 
/* Verificar e se qualquer um dos campos estão vazios ou incorretos,
 * caso esteja errado, mostra mensagem de aviso.
 * Se não, no final envia começa enviar os dados...*/
function verificaDadosAntesDeEnviar():void
{
	if(nomeTxt.length < 3)
	{
		mostraMensagemAviso("Coloque um nome com pelo menos 3 letras");
	}
	else if(emailTxt.length == 0)
	{
		mostraMensagemAviso("Preciso do seu e-mail pra te responder.");
	}
	else if(emailTxt.text.indexOf("@") == -1 ||
			emailTxt.text.indexOf(".") == -1)
	{
		mostraMensagemAviso("Ops! Esse e-mail não é valido!");
	}
	else if(assuntoTxt.length == 0)
	{
		mostraMensagemAviso("Insira um assunto.");
	}
	else if(mensagemTxt.length == 0)
	{
		mostraMensagemAviso("Ahh! Não esquece da mensagem.");
	}
	else{ 
		enviaDadosParaPHP();
	}
}
 
 
//responsável por interagir informação do Flash com script PHP
function enviaDadosParaPHP():void
{
	mostraMensagemAviso("Enviando mensagem...");
 
	/* iniciamos e criamos variaveis dinamicas
	 * que recebem o conteúdo digitado nos campos do flash
	 * essas variáveis servirão de ponto entre o Flash e script PHP */
	variaveis = new URLVariables();
	variaveis.nomePhp = nomeTxt.text;
	variaveis.emailPhp = emailTxt.text;
	variaveis.assuntoPhp = assuntoTxt.text;
	variaveis.mensagemPhp = mensagemTxt.text;
 
	/* iniciamos variavel que tem o arquivo PHP
	 * devemos aplicar método POST de envio de dados
	 * e transmitimos os dados dos campos do Flash para o script PHP */
	urlPhp = new URLRequest("http://www.SEU_SITE_AQUI.com/mail.php");
	urlPhp.method = URLRequestMethod.POST;
	urlPhp.data = variaveis;
 
	/* iniciamos variavel responsável por "recuperar" dados/informações do PHP
	 * quando estiver completo o carregamento do arquivo PHP, executa a função que confirma envio.
	 * quando surgir erro durante o envio, executa a função que mostra mensagem de erro.
	 * e carregamos o arquivo PHP armazenado na variavel urlPhp */
	loader = new URLLoader();
 	loader.addEventListener(Event.COMPLETE, quandoEnviadoMensagem);
 	loader.addEventListener(IOErrorEvent.IO_ERROR, quandoHouverErroNoEnvio);
 	loader.load(urlPhp);
}
 
 
//Função de evento, mostra ao usuário que a mensagem foi enviada com sucesso.
function quandoEnviadoMensagem(e:Event):void
{
	mostraMensagemAviso("Mensagem enviada!");
	iniciatempoMensagemDeAviso();
	limpaTodosCamposTextos();
}
 
 
//Função de evento, mostra ao usuário que houve algum erro durante o envio.
function quandoHouverErroNoEnvio(e:IOErrorEvent):void
{
	mostraMensagemAviso("Ops! Surgiu erro! Tenta novamente.");
 	iniciatempoMensagemDeAviso();
}
 
 
//Função de evento do Timer, limpa o campo de aviso, função do Timer
function quandoAcabarTempo(e:TimerEvent):void
{
	mostraMensagemAviso("");
}
 
 
/* Limpa todos os campos de textos digitados pelo usuário
 * depois aplica foco do cursor de texto no campo nomeTxt */
function limpaTodosCamposTextos():void
{
	nomeTxt.text = emailTxt.text = assuntoTxt.text = mensagemTxt.text = "";
	stage.focus = nomeTxt;
}
 
 
/* Destinada pra enviar mensagem de aviso
 * e apaga esse aviso após 3 segundos usando timer.*/
function mostraMensagemAviso(texto:String):void
{
	avisoTxt.text = texto;
}
 
 
/* Destinado pra reiniciar e iniciar intervalo Timer
 * Pra não atropelar o tempoMensagem de cada mensagem de aviso que foi disparada antes*/
function iniciatempoMensagemDeAviso():void
{
	tempoMensagem.reset();
	tempoMensagem.start();
}

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. O script PHP faz comunicação com flash e recebe todas as variáveis dinâmicas que recebem valores dos campos de textos digitados pelo usuário dentro do Flash.
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 do arquivo de: mail.php

Insira o seguinte código PHP:

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 = 'Essa mensagem veio do seu site';
 
//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. Importante também sempre fazer teste online com seus arquivos PHP e SWF no seu servidor web pra garantir que tudo esteja funcionando como esperado.

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

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 1
Download 2

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];