Conhecendo o Flash CS3 – Parte 3

Flash – Conhecendo o Flash CS3 – Parte 3

Olá Comunidade.

Nessa terceira parte da série de arquivos sobre o Flash CS3, irei falar sobre o ActionScript 3.0. Mostrar algumas mudanças em relação ao ActionScript 2.0, mostrar as novidades e algumas outras coisas.

Mais uma vez, para a visualização dos exemplos nesse tutorial é necessário o Plugin do Flash Player 9.

Novo painel de Ações

Finalmente, novos recursos foram adicionados no painel Actions do Flash CS3, recursos que irão facilitar e muito a vidas dos programadores em ActionScript. Agora, é possível ‘esconder’ uma determinada parte de seu código, evitando assim que o programador se perca nas inúmeras linhas de ActionSript criado, agilizando o trabalho e tornando-o mais produtivo.

Para usar esse recurso, basta selecionar o trecho do seu código que deseja esconder e clicar no sinal de menos para esconder o trecho do seu código.

Escondendo código

Código escondido

Outra possibilidade é usar o menu:

Escondendo código

1: Esconde o código entre as chaves, {}.
2: Esconde o código selecionado, selecione Alt para esconder o que não estiver selecionado.
3: Mostrar todo o código.

Outro recurso interessante é a possibilidade de adicionar comentários. Para usar esse recurso basta selecionar o trecho do seu código que deseja comentar e clicar no balãozinho “Apply block comment”.

Adicionando comentários

Para comentários simples (em uma linha) basta usar o botão “Apply line comment”.

Adicionando comentários

É possível remover um comentário do seu código, basta selecionar o comentário que você não quer mais usar e clicar no balão “Remove comment”.

Removendo comentários

Compiler Erros

Talvez, a melhor novidade do Flash é a possibilidade de encontrar aonde está seu erro. Antigamente, sempre que aparecia algum erro tínhamos que ficar procurando para ver o que poderia estar errado, agora basta clicar duas vezes na mensagem de erro que a linha errada é mostrada, economizando um bom tempo dos programadores.

Erro encontrado

Erro encontrado

O ActionScript 3.0

Agora vou falar um pouco sobre o ActioScript 3.0. Diferentemente do que a maioria pensava (inclusive eu), as diferenças entre o ActionScript 3.0 e o ActionScript 2.0 não são tão grandes assim, muita coisa do ActionScript 2.0 continua.

1) Propriedades

O primeiro destaque fica com as Propriedades. No ActionScript 2 quando queríamos mudar alguma propriedade de um MovieClip, como Alpha, Visible, X, Y, etc, utilizáva-mos o underline antes da propriedade.

  1. instanciaMC._x = 50;
  2. instanciaMC._y = 50;
  3. instanciaMC._alpha = 100;

Agora, no ActionScript 3 o underline foi removido das propriedades.

  1. instanciaMC.x = 50;
  2. instanciaMC.y = 50;
  3. instanciaMC.alpha = 1;

Em algumas propriedades, a forma como os valores são passados foi mudado, a propriedade alpha por exemplo no ActionScript 2 aceitava números de 0 a 100, agora no ActionScript 3 aceita números de 0 a 1. Então se precisamos usar 40% de transparencia, o código ficaria assim:

  1. instanciaMC.alpha = 0.4;

Fora, que algumas propriedades mudaram de nome, por exemplo _xscale e _yscale passaram a ser chamados por scaleX e scaleY, aceitando somente números de 0 a 1.

2) Propriedades Globais

Outro mudança importante fica por quanta das Propriedades Globais, que também estão sem o underline. As propriedades _global e _level foram removidas, o propriedade _root foi trocada por stage, entre outras mudanças.

3) Eventos de Manipulação (Event Handling)

Talvez, umas das maiores mudanças do ActionScript 3 seja os eventos de manipulação, eventos como onPress, onRelease, onRollOver, onRollOut, etc. No ActionScript 3 esses eventos não existem mais, agora quando precisamos utilizar esses eventos devemos usar o addEventListener.

  1. instanciaMC.addEventListener(MouseEvent.CLICK, funcaoPress);
  2. function funcaoPress(event:MouseEvent) {
  3. /* Ações do botão */
  4. }

No exemplo acima, para o MovieClip com instancia de instanciaMC, quando se clicar do Mouse em cima dele vai chamar a função funcaoPress. Além do evento CLICK existem outros eventos como o MOUSE_DOWN, MOUSE_UP, MOUSE_OVER, MOUSE_OUT, etc, todos na Classe MouseEvent.

Outra mudança considerável é com relação a ações em MovieClips, Botões, Componentes, etc. Usando o ActionScript 3 não se pode mais selecionar um MovieClip por exemplo e adicionar uma ação nele.

Objetos sem ações

Agora só se pode colocar ações no frame, evitando assim que alguma ação se perca quando se remove um determidado MovieClip ou Botão e evitando que seu swf trave (muitas ações sobre objetos pode travar seu swf).

4) Importando Símbolos da Biblioteca

No ActionScript 2, quando precisávamos importar um MovieClip da biblioteca por exemplo, utilizávamos o método attachMovie. Agora no ActionScript 3 esse método foi removido e agora usamos o método addChild. Outra mudança fica com o Linkage.

Linkage AS2

Linkage AS3

Reparem que agora não preenchemos mais o campo Identifier e sim o campo Class. Esse campo é o nome da Classe que utilizaremos para esse MovieClip. Se você não estiver usando uma Classe para esse MovieClip que você quer importar, utilize um nome para identificar esse símbolo (como fazíamos no campo Identifier). Com isso, o Flash cria um esqueleto da Classe para usar o nome do símbolo. Agora para importar usamos:

  1. var minhaInstancia = new minhaClasse();
  2. addChild(minhaInstancia);

Reparem que eu crio uma instancia da Classe que foi ‘criada’ quando exportei o MovieClip. Vamos a um outro exemplo para um maior entendimento. Iremos criar um novo MovieClip com o nome pequeno, exportaremos esse MovieClip para que possamos importa-lo da biblioteca. Preencheremos os campos como na imagem:

MovieClip a ser importado

Agora, para importar esse MovieClip usaremos:

  1. var mc = new pequeno();
  2. addChild(mc);

Com isso importo o MovieClip para o palco, se quiser adiciona-lo em um outro MovieClip basta colocar a instancia desse MovieClip na frente do addChild. No exemplo, irei importar o MovieClip recebe dentro do MovieClip com instancia de master:

  1. var mc = new pequeno();
  2. master.addChild(mc);

5) Carregando Imagens e SWFs

Agora para carregar imagens e SWFs no ActionScript 3 não usaremos mais loadMovie, loadMovieNum ou a Classe MovieClipLoader, já que foram substituidas pela Classe Loader. Pode até parecer ser algo ruim remover o loadMovie e a Classe MovieClipLoader, mas se pensarmos direito, agora só temos uma função que carrega imagens e SWFs, bem melhor para os iniciantes que não vão ficar perdidos entre várias funções que fazer a mesma coisa.

Para carregar uma imagem é bem simples, criaremos um MovieClip em branco com instancia de holder, usamos o seguinte código:

  1. var loader:Loader = new Loader();
  2. loader.load(new URLRequest(“imagemLogo.jpg”));
  3. holder.addChild(loader);

Outro exemplo:

  1. var loader:Loader = new Loader();
  2. var endereco:URLRequest = new URLRequest(“imagemLogo.jpg”);
  3. loader.load(endereco);
  4. holder.addChild(loader);

6) Abrindo páginas

O comando getURL é outro comando removido do ActionScript 3. Agora para abrir uma nova página usaremos o método navigateToURL:

  1. navigateToURL(new URLRequest(“http://www.mxstudio.com.br”), “_blank”);

Outro exemplo:

  1. var endereco = “http://www.mxstudio.com.br”;
  2. var request:URLRequest = new URLRequest(endereco);
  3. navigateToURL(request, “_blank”);

7) Carregando arquivos XML

Agora usar arquivos XML no ActionScript 3 é muito mais fácil e prático. No ActionScipt 2 os nós de cada item do XML tinham que ser achados usando childNodes, firstChild, nodeValue, nodeName entre outras propriedades da Classe XML. Agora no ActionScript 3 os nós são acessados com o nome de cada nó, facilitando e muito aos que estão começando a usar XML no Flash.

Vamos a um exemplo de como usar XML no ActionScript 3. Começaremos criando nosso arquivo XML, de o nome de arquivo.xml.

  1. <?xml version=“1.0″ encoding=“utf-8″?>
  2. <musicas>
  3. <faixa>
  4. <artista>The Beatles</artista>
  5. <nomeMusica>Can’t Buy Me Love</nomeMusica>
  6. <nomeCd>Beatles 1</nomeCd>
  7. </faixa>
  8. <faixa>
  9. <artista>Red Hot Chili Peppers</artista>
  10. <nomeMusica>Californication</nomeMusica>
  11. <nomeCd>Californication</nomeCd>
  12. </faixa>
  13. <faixa>
  14. <artista>Pearl Jam</artista>
  15. <nomeMusica>Alive</nomeMusica>
  16. <nomeCd>Ten</nomeCd>
  17. </faixa>
  18. </musicas>

Criaremos um MovieClip com o nome de mc, esse MovieClip será importado da biblioteca, portando seguiremos a seguinte configuração:

Linkage do MovieClip mc

Dentro desse MovieClip criaremos três campos de texto dinamico, eles irão receber os dados do XML. Os nomes em vermelho são as instancias dos campos.

MovieClip mc

Por fim, no primeiro frame de nosso arquivo colocaremos a seguinte ação:

  1. var total:Number;
  2. var xml:XML = new XML();
  3. var xmlArquivo:URLLoader = new URLLoader();
  4. xmlArquivo.load(new URLRequest(“arquivo.xml”));
  5. xmlArquivo.addEventListener(Event.COMPLETE, monta);
  6. function monta(event:Event) {
  7. xml = new XML(event.target.data);
  8. total = xml.faixa.length();
  9. for (var i=0; i<total; i++) {
  10. var MC:MovieClip = new mc();
  11. addChild(MC);
  12. MC.x = MC.width*i+MC.x+i;
  13. MC.campo1.text = xml.faixa.nomeMusica[i];
  14. MC.campo2.text = xml.faixa.artista[i];
  15. MC.campo3.text = xml.faixa.nomeCd[i];
  16. }
  17. }

E o resultado será algo parecido com esse:

8) Classes no ActionScript 3

A estrutura de uma Classe criada com ActionScript 3 não é muito diferente de uma Classe criada com ActionScript 2. Talvez a maior mudança seja o uso da palavra package para iniciar uma Classe.

No ActionScript 2, se uma Classe estava dentro de um pacote, você precisava passar o pacote no nome da Classe.

  1. class flash.display.BitmapData {
  2. /* Minhas ações aqui */
  3. }

No ActionScript 3, basta declarar a qual pacote essa Classe pertence.

  1. package flash.display {
  2. public class BitmapData {
  3. /* Minhas ações aqui */
  4. }
  5. }

O mesmo vale para Classes que ficam em pastas, nesse exemplo a Classe que estou criando está na pasta mxstudio:

  1. package mxstudio {
  2. public class minhaClasse {
  3. /* Minhas ações aqui */
  4. }
  5. }

Considerações finais

Deu para perceber que houve muitas mudanças no ActionScript, mudanças para melhorar a performance de uma aplicação e tornar o ActionScript uma linguagem de programação mais completa. Eu recomendo a leitura do “ActionScript 2.0 Migration reference” da Adobe, que mostra o que ficou, o que mudou, o que saiu, etc.

Espero que tenham gostado dessa terceira parte dos tutoriais sobre o Flash CS3, procurei nesse artigo mostrar as mudanças mais básicas do ActionScript, as demais mudanças vocês poderão encontrar no link que passei, no Help do Flash e no próprio painel de Compiler Erros que apresenta o problema e a solução.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Escrito por Natan D. Alves on junho 2, 2007. Arquivado em Flash. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

13 respostas a Conhecendo o Flash CS3 – Parte 3

  1. Ois,gostei mt do artigo,deume uma grande ajuda relativamente ao carregamento de imagens,eu estava a fazelo usando o embebed,mas continuo com uma duvida,como carregar um ficheiro de texto e colocar o seu conteudo numa caixa de texto?
    Obrigado.

  2. Sinceramente não gostei de algumas mudanças no AS3.0, que pra mim foram drásticas demais. Como assim não poder simplesmente colocar uma ação em um botão? Ter que ficar criando funções e eventos para cada botão que criamos reduz em muito a produtividade. Ou pior: como não poder colocar ações em MCs? Melhoraram em bastante coisa, algumas simples demais que deveriam ter sido colocadas há séculos (como o fácil acesso do Create Shape Tween), mas complicaram muita coisa da programação.

  3. Olá!

    Fiz um curso de flash, mas o MX, estou tendo dificuldade em linkar os botões no flash CS3, poderias me ajudar? Ou fazer um tutorial explicando como funciona essa janela nova de ações?

    Obrigada,
    Silvana

  4. Olá Silvana.
    Linkar os botões seria criar algum link para abrir alguma URL?
    []s

  5. Estou tendo dificuldades ao colocar um link em um botão flash (CS3):

    navigateToURL(new URLRequest(“=http://www.site.com.br”), “_self”);

    apresenta o erro:

    Statement must appear within on handler

    Source:
    navigateToURL(new URLRequest(“=http://www.site.com.br”), “_self”);

    está Faltando algo????

  6. Você colocou essas ações aonde? Pelo erro você não está usando ActionScript 3 em seu arquivo.

    []s

  7. Natan, vc explica muito bem e faz parecer fácil toda essa programação. Agora quero ouvir o povo dizendo q flasheiros só fazem desenhinhos…
    Mas fala sério, agora tem q declarar TUDO. Concordo c o cara q disse q o trabalho, ao invés de otimizar, vai se tornar mais devagar.

  8. muito legal o tutorial e as dicas ….
    e NATAN muito obrigada p me ajudar c o código…funcionou ok
    abs a todos colaboradores do site

  9. muito legal o tutorial, algumas coisas o as 3 melhorou, mas outras, piorou, como a de não colocar actions em objetos, para isso precisamos declará-los, mas contando com o resto, melhorou bastante, como o de identificar erros, facilitando o trabalho. o ruim é que o as 3 não é tão fácil como eu imaginava, assim o trabalho vai ter que ficar mais devagar.

  10. Olá, estou com dificuldade num MC, coloquei um evento nele MOUSE_OVER, mas não aparece a mãozinha só a setinha, como coloco a mãozinha ao colocar o mouse em cima do MC?

    tentei assim: meu_mc.useHandCursor = true;

    mas não funciona

    Att

    Quinhone

  11. Quinhone, tenta isso:
    buttonMode = true;

  12. estou tentando colocar link no botao no cs3, mas da o erro 1093, alguem pode me ajudar??

  13. Gostei muito.Mas gostaria de saber com carregar um swf em um botão sem sair da pagina. tipo esse site feito em flash(http://www.confiancanet.com.br/) por favor me ajude.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>