Transições com ActionScript 3.0

Com  AS3 ficou fácil criar efeitos interessantes e rápidos via código, vamos ver um exemplo:

1- Crie um novo arquivo no Flash CS5 (estou recomendando já a nova versão);
2- Importe para o palco do Flash uma imagem;
3- Transforme esta imagem em um Movie Clip e coloque o nome de instância da imagem de “imagem”.
4- Crie uma nova camada e no primeiro quadro desta camada abra o painel Actions e digite:

import fl.transitions.*;
import fl.transitions.easing.*;
var transicao:TransitionManager=new TransitionManager(imagem);

Nas duas primeiras linhas importamos as classes que vamos utilizar.
Na terceira linha criamos uma instância chamada “transição” a partir da classe TransitionManager (classe que está presente somente do Action Script 3.0) que cuida dos efeitos de transição.

5- Numa nova linha digite:

transicao.startTransition({type:Blinds, direction:Transition.IN,duration:2,easing:Strong.easeOut, numStrips:10, dimension:1});

O parâmetro numStrips define a quantidade de retângulos e o dimension indica se o efeito será com retângulos na horizontal (valor 1) ou na vertical (valor 0).
Para a instância chamada “transicao” usamos o método starTransition que dará início a transição.
Dentro dos parênteses desse método temos (entre as chaves) os parâmetros que vão orientar a transição, o qual podemos mudar:
direction:Transition.IN que indica que o Movie Clip irá aparecer ou direction:Transition.OUT que o mostrará se escondendo.
duration:2 é o tempo em segundos que essa transição irá durar até atingir o final.

6- Teste e veja como ficou:
















Vale, ainda, testar as outras transições:

Fade: ({type:Fade, direction:Transition.IN, duration:9, easing:Strong.easeOut});

Fly: {(type:Fly, direction:Transition.IN, duration:3, easing:Elastic.easeOut, startPoint:9});

Iris: ({type:Iris, direction:Transition.IN, duration:2, easing:Strong.easeOut, startPoint:5, shape:Iris.CIRCLE});

Photo: ({type:Photo, direction:Transition.IN, duration:1, easing:None.easeNone});

PixelDissolve: ({type:PixelDissolve, direction:Transition.IN, duration:2, easing:Regular.easeIn, xSections:10, ySections:10});

Squeeze: ({type:Squeeze, direction:Transition.IN, duration:2, easing:Elastic.easeOut, dimension:1});


Wipe: ({type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});

Não esqueça que você pode sempre recorrer ao Help do Flash...

Comentários

  1. Gostei muito....tanto que já começo a estudar o AS3. Gostaria de saber como trabalhar em AS3, fazendo a mesma transição, porém usando vários botões e imagens, como numa galeria de fotos.
    Obrigado.
    Carlinhos.

    ResponderExcluir
  2. Olá Carlinhos!

    Tens que transformar esse comando em váriável...

    Abraços,

    Ana

    ResponderExcluir
  3. Ana Paula, o teu blog é fantástico! Parabéns pelo excelente conteúdo e a didática aplicada. Abs

    ResponderExcluir
  4. Obrigada Pedro!

    Volte sempre :)

    Abraços,

    Ana

    ResponderExcluir
  5. Boa tarde,
    Ana

    Onde posso achar mais desses efeitos de transição?

    Valder

    Abraços

    ResponderExcluir
  6. Olá Valder!

    Podes procurar pelo help do Flash CS5, pedindo como critério a classe TransitionManager.

    Abraços,

    Ana

    ResponderExcluir
  7. Boa tarde Ana Paula,

    Tudo Bem,

    Eu tenho uma dúvida, fiz uma arte no photoshop, essa arte tem um fundo e outras imagem, eu importei para flash cs3 ela vai separada igual no photoshop, essa arte tem 4 objetos o fundo e mais 3 imagem, minha duvida é a seguinte eu fiz no fundo o efeito "PixelDissolve" mais não cosigo colocar outros efeitos nas outras imagem, existe a possibilidade de colocar em cada objeto um efeito diferente eu tentei mas não consegui, eu fiz o mesmo procedimento que o primeiro (fundo) criei uma camada acima cliquei no primeiro quadrado da linha e fui no action script e coloquei o codigo mas não deu certo como no fundo, tem essa possibilidade de colocar efeitos separados em cada objeto?

    Valder

    ResponderExcluir
  8. Tem sim, basta criar outra variável, por exemplo:

    var transicao1:TransitionManager=new TransitionManager(imagem1);

    E dar outro nome de instancia para o MC.

    Abraços,

    Ana

    ResponderExcluir
  9. Boa Noite,
    Ana Paula,

    Desculpa te encomodar, é que so iniciante na área

    Eu fiz o seguinte criei outra camada para o outro objeto, acima criei outro camada para AS3 e coloquei o codigo:

    import fl.transitions.*;
    import fl.transitions.easing.*;
    var transicao1:TransitionManager=new TransitionManager(objeto2);
    transicao.startTransition({type:PixelDissolve, direction:Transition.IN, duration:2, easing:Regular.easeIn, xSections:10, ySections:10});

    só que ta dando o seguinte erro "ypeError: Error # 1009: Não é possível acessar uma propriedade ou método de um objeto nulo referência.
    em home2_fla: MainTimeline/home2_fla:: frame1 ()"

    Abraços

    Valder

    ResponderExcluir
  10. Valder o objeto é nulo quando tu colocas a action antes do objeto aparecer na timeline.

    Ana

    ResponderExcluir
  11. Ana vc podia explicar melhor rsrsrs, meu arquivo tem 4 objeto quando eu importo ele o flash ja coloca cada 1 em uma camada então ja fica com 4 camada, na primeira camada eu criei outra acima e coloquei action deu certo a transição na segunda camada eu fiz a mesma coisa criei outra camada acima e coloquei o codigo como vc tinha falado so que esse erro que eu falei.

    Valder

    ResponderExcluir
  12. O código tem que respeitar o tempo da timeline, não podendo ter uma action no frame 1 para um objeto que aparece no frame 60, por exemplo... vai dar erro...

    ResponderExcluir
  13. Infelismente não consegui fazer, obrigado pela atenção vc é muito simpática seu Blog é maravilhoso, tenha uma ótima noite e fica com Deus.

    Valder

    ResponderExcluir
  14. Aeeeeeeeeeee deu certo Ana rsrsrs pra quem não sabe nada tudo parece complicado, mais agora deu certo, so mais uma perguntinha rsrsrsrs nesse movie clip tem como colocar link para outra pagina

    Valder

    ResponderExcluir
  15. Sim, da uma olha nestes tutoriais:

    http://designap.blogspot.com/2010/07/pagina-de-introducao-em-flash-para-seu.html

    http://designap.blogspot.com/2010/01/formatando-hiperlinks-no-flash-cs4.html

    Abraços,

    Ana

    ResponderExcluir
  16. Boa noite,
    Ana Paula

    Eu criei um botão com o seguinte código:

    voltar.addEventListener( MouseEvent.CLICK, abreLink );
    function abreLink( ev:MouseEvent ):void
    {
    var link:URLRequest = new URLRequest( "index.html");
    navigateToURL( link );
    }

    Eu queria que o botão abrisse na mesma pagina, em vez de abrir uma pagina nova. tem alguma sugestão de como faço isso, qual é o código que eu tenho que adicionar.

    Valder Neto

    ResponderExcluir
  17. Eu faria desta forma:


    voltar.addEventListener(MouseEvent.CLICK, abre);

    function abre(event:MouseEvent):void
    {
    navigateToURL(new URLRequest("http://www.adobe.com"), "_parent");
    }


    Ana

    ResponderExcluir
  18. Boa Noite,

    Ana você é fera mesmo. Sem abusar de seus conhecimentos, mais existe a possibilidade de colocar dois efeitos iguais de transition manager no mesmo arquivo, porque eu coloquei o efeito de transição em uma foto: import fl.transitions.*;
    import fl.transitions.easing.*;
    var transicao:TransitionManager=new TransitionManager(foto4);
    transicao.startTransition({type:Iris, direction:Transition.IN, duration:4, easing:Strong.easeOut, startPoint:5, shape:Iris.CIRCLE});

    depois eu coloquei o mesmo efeito em outra foto no mesmo arquivp deu o seguinte erro:Existe um conflito com a definição de Transição namespace interno.

    ResponderExcluir
  19. Para colocar esta transição no mesmo fla e na timeline da Scene 1 tens que dar outro nome de variável, por exemplo:

    var transicao1:TransitionManager=new TransitionManager(imagem1);

    transicao1.startTransition({type:Blinds, direction:Transition.IN,duration:2,easing:Strong.easeOut, numStrips:10, dimension:1});

    OU pode colocar a action dentro da timeline do MovieClip que não irá dar conflito com a timeline da Scene 1.

    Abraços,

    Ana

    ResponderExcluir
  20. Oi boa noite
    VC sabe como resolver este problema
    Error #1009 objet null, no flash cs5

    Grato Rodrigo Alvarez de Mattos

    ResponderExcluir
  21. Olá!

    Este erro aparece quando tu coloca a action mas não foi encontrado o objeto na timeline.

    Por exemplo: action no frame 60 e o objeto no frame 01 até o 20...

    Pode ser outra coisa tb, mas esse é mais comum...

    Abraços,

    Ana

    ResponderExcluir
  22. Obrigado, mas se não for isso pode ser outro coisa TypeError: Error #1009?

    Abraço

    ResponderExcluir
  23. COmo faço para abrir timeline no dreamweaver cs5?

    ResponderExcluir
  24. Olá!

    Que eu saiba esse recurso saiu do Dreamweaver...

    Abraços,

    Ana

    ResponderExcluir
  25. Eu tenho uma sequencia de 4 imagens, como eu monto...?
    4 frames, para as imagens e 4 frames para o AS?

    Obrigado!
    Rômulo

    ResponderExcluir
  26. Olá Rômulo!

    Pode ser...

    Ou quatro movie clips, cada um com sua transição dentro de sua própria timeline.

    Abraços,

    Ana

    ResponderExcluir
  27. Oi Ana Paula,
    eu tento testas as outras transições, mas dá sempre essa mensagem: "Scene 1, Layer 'Layer 2', Frame 1, Line 4 1078: Label must be a simple identifier." O que pode ser?

    Abraço

    ResponderExcluir
  28. Olá!

    So olhando o arquivo... qualquer coisa me manda um e-mail.

    Abraços,

    Ana

    ResponderExcluir
  29. Oi, descubri o problema. Era no Type da variável.

    Sou novo em actionscript e estou penando um poco.
    Descubri teu site hj e estou achando muitas tutoriais excelentes, parabéns! :)

    Que código no action script uso para pausar a animação nesses casos?

    Abraço

    Abraço

    ResponderExcluir
  30. Olá!

    Nesse caso tens que usar um Timer da classe Timer do Flash.

    Abraços,

    Ana

    ResponderExcluir
  31. Seu blog é realmente muito bom, até agora foi onde eu mais consegui material para aprender AS3 (descomplicadamente), muito bacana mesmo.
    Só uma duvida, teria como eu carregar aleatóriamente essas transições, por exemplo, quando eu chegar em um determinado frame?
    Desde já, agradeço.

    ResponderExcluir
  32. Olá!

    Sim, basta que coloque a action no frame que deseja que seja executada a transição.

    Abraços,

    Ana

    ResponderExcluir
  33. Como faço para fazer esta transição funcionar entre várias imagens?

    ResponderExcluir
  34. Olá Robes!

    Basta criar outra variável, por exemplo:

    var transicao1:TransitionManager=new TransitionManager(imagem1);

    E dar outro nome de instancia para o MC.

    Abraços,

    Ana

    ResponderExcluir
  35. Elio Lemos Martins2 de julho de 2011 13:43

    Olá, Ana! Tudo bem?
    Sou o carioca que mora em Novo Hamburgo.
    Tentei fazer essa sugestão (navigateToURL(new URLRequest("http://www.adobe.com"), "_blank");)
    mas infelizmsnte não tive êxitos, acredito não ter lhe dado as informações corretas. Tenho um CD de informações técnicas que esta em html e fui solicitado para fazer uma animação com flash que ao final da animação, clique num botão que abra o arquivo inicial que esta como index.html. Podes ajudar-me?
    abraços
    Elio Lemos

    ResponderExcluir
  36. Olá Elio!

    Posso pesquisar para vc... Mas estou na correria... não garanto nada.

    Abraços,

    Ana

    ResponderExcluir
  37. Elio Lemos Martins4 de julho de 2011 12:22

    Eu entendo,mas desde já agradeço o que for possivel.
    abraços
    Elio Lemos Martins

    ResponderExcluir
  38. Perfeito !! muito bom post !

    Parabens Ana Paula !

    Bob Marlon

    ResponderExcluir
  39. Ola Ana Paula gostaria que me desse uma dica
    estou desenvolvndo um site totalmente em flash cs5
    com as3, o que acontece é o seguinte:
    quando clico nos botões do menu para carregar o swfs externos as paginas carregam uma em cima das outras diz por favor o que fazer.

    Grato e parabens pelas suas video aulas acompanho-as diariamente.

    o

    ResponderExcluir
  40. Olá Marcelo!

    Tens como me mandar seus arquivos para eu fazer um teste??? apmmiranda@gmail.com

    Abraços,

    Ana

    ResponderExcluir
  41. Oi Ana Paula, descobri seu blog agora e gostei muito! Fiz uma apresentação de portfolio no InDesign com transição flip e salvei em SWF, só que quando envio as pessoas não conseguem abrir. Como salvo com outra extensão mantendo a transição? Já tentei converter o arquivo, mas tambem não consegui.
    Obrigada,
    abrçs
    Isolda

    ResponderExcluir
  42. Olá Isolda!

    Vc pode exportar em swf e html... acredito que fique mais fácil de visualizar.

    Abraços,

    Ana

    ResponderExcluir
  43. Oi Ana, foi isso mesmo o que eu fiz, porém quando envio nesses formatos as pessoas não conseguem visualizar. Tem uma outra forma de exportar ou fazer a conversão do formato?
    Muito obrigada pela atenção.
    Isolda

    ResponderExcluir
  44. Olá Ana!
    Tentei fazer a transição de íris, e estou com problemas. O meu código ficou:


    import fl.transitions.*;
    import fl.transitions.easing.*;
    var transicao:TransitionManager = new TransitionManager(aviao_mc);

    transicao.startTransition({type:Iris, direction:Transition.IN, duration:2, easing:Strong.easeOut, startPoint:5, shape:Iris.CIRCLE});

    ele está no mesmo frame que a imagem sobre a qual eu quero aplicar a transição, mas aparece o seguinte erro:

    TypeError: Error #1009: Não é possível acessar uma propriedade ou um método de uma referência de objeto nula.
    at fl.transitions::TransitionManager/saveContentAppearance()
    at fl.transitions::TransitionManager/set content()
    at fl.transitions::TransitionManager()
    at companheiro_fla::final_personagens_24/frame54()


    você pode me ajudar?
    Obrigada,
    Stella

    ResponderExcluir
  45. Olá Stella!

    Me manda um e-mail com seus arquivos.

    apmmiranda@gmail.com

    Abraços,

    Ana

    ResponderExcluir

Postar um comentário

Deixe seu comentário ou dúvida:

Postagens mais visitadas deste blog

Estrutura básica de documento em HTML5

Adição e subtração de paths no Photoshop CS4