Estudo de Classes – Classe TransitionManager

Olá Comunidade. Hoje aprenderemos a usar uma Classe pouco divulgada e até mesmo pouco usada, a Classe TransitionManager

Pré-requisitos para esse tutorial

Flash MX 2004 ou Flash 8

A Classe TransitionManager

A Classe TransitionManager apareceu pela primeira vez no Flash MX 2004 juntamente com a Classe Tween. Assim como a Classe Tween, ela tinha sido criada para animar os UI Componentes V2 mas foi extendida para usar em MovieClips.

Utilizando a Classe

Para utilizar a Classe, devemos importar a Classe e criamos uma nova instancia para a Classe. Fazendo isso, deixaremos cada transição indepedente da outra. Podemos criar uma instancia de duas maneiras. A maneira mais fácil é usar o método TransitionManager.start, no qual cria uma nova instancia do TransitionManager, designando um alvo, aplicando uma transição e a começando:

import mx.transitions.easing;*;

import mx.transitions.*;

TransitionManager.start(alvo, parametrosTransition);

alvo: MovieClip que vai ser o alvo dos efeitos.
parametrosTransition: pametros referente ao efeito.

A outra alternativa, é criar uma nova instancia da Classe usando o operador new. Então você designa as propriedades do Transition e começa a transição em uma segunda etapa com o método TransitionManager.startTransition:

import mx.transitions.easing;*;

import mx.transitions.*;

var nome:TransitionManager = new TransitionManager(alvo);

nome.startTransition(parametrosTransition);

nome: instancia para a Classe.
alvo:MovieClip que vai ser o alvo dos efeitos.
parametrosTransition: parametros referente ao efeito.

Efeitos de Transição

A Classe TransitionManager oferece dez tipos de animações que podem ser utilizadas em seus MovieClips. Todas as Transições podem revelar (OUT) ou esconder (IN) um MovieClip. A maioria das transições, oferece parametros para controle do efeito.

Em todas as transições é possível utilizar as equações easing. Para os que não conhecem quais são essas equações, acessem o tutorial da Classe Tween que eu explico sobre elas:

Estudo da Classe Tween

Para exemplificar cada efeito, crie um círculo, transforme em MovieClip e de instancia de circulo. As ações devem ser colocadas no frame que estiver o MovieClip circulo. Os Efeitos são:

Blinds Transition: Revela o MovieClip usando retangulos. Essa transição oferece o uso de dois parametros.

numStrips: Número de linhas para o efeito. Recomendável utilizar números entre 1 a 50.
dimension: Indica se as linhas serão na vertical (0) ou horizontal (1).

import mx.transitions.*;

import mx.transitions.easing.*;

TransitionManager.start(circulo, {type:Blinds, direction:Transition.IN, duration:2, easing:None.easeNone, numStrips:10, dimension:0});

Fade Transition: Revela ou esconde o MovieClip. Exemplo:

import mx.transitions.*;

import mx.transitions.easing.*;

TransitionManager.start(circulo, {type:Fade, direction:Transition.IN, duration:3, easing:None.easeNone});

Fly Transition: Movimenta o MovieClip para um determinado ponto expecificado. Essa transição oferece o uso de um parametro:

startPoint: Número que indica qual posição para começar a transição. Eles vão de 1 a 9:
Canto esquerdo superior (1); Centro superior (2); Canto direito superior (3); Canto esquedo no centro (4); Centro (5); Canto direito no Centro (6); Canto esquerdo inferior (7); Centro inferior (8); Canto direito inferior (9)

import mx.transitions.*;

import mx.transitions.easing.*;

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

Iris Transition: Revela o MovieClip usando uma máscara em forma de círculo ou quadrado. Essa transição oferece o uso de dois parametros:

import mx.transitions.*;

import mx.transitions.easing.*;

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

Photo Transition: Revela ou esconde o MovieClip usando um efeito parecido com um Flash de máquina fotográfica. Exemplo:

import mx.transitions.*;

import mx.transitions.easing.*;

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

PixelDissolve Transition: Revela ou esconde o MovieClip usando máscaras retangulos que aparecem de maneira randomica. Essa transição oferece o uso de dois parametros:

xSections: Número que indica o número de retangulos que irão aparecer na horizontal. Recomendável utilizar números de 1 a 50.
ySections: Número que indica o número de retangulos que irão aparecer na vertical. Recomendável utilizar números de 1 a 50.

import mx.transitions.*;

import mx.transitions.easing.*;

TransitionManager.start(circulo, {type:PixelDissolve, direction:Transition.IN, duration:2, easing:None.easeNone, xSections:10, ySections:10});

Rotate Transition: Rotaciona o MovieClip. Essa transição oferece o uso de dois parametros:

ccw: Valor booleano, true para rotação no sentido anti-horário, false para rotação no sentido horário.
degrees: Número que indica quantos graus o MovieClip será rotacionado. Recomendável utilizar números de 1 a 9999.

import mx.transitions.*;

import mx.transitions.easing.*;

TransitionManager.start(circulo, {type:Rotate, direction:Transition.IN, duration:3, easing:Strong.easeInOut, ccw:false, degrees:720});

Squeeze Transition: Dimensiona o MovieClip na vertical ou na horizontal. Essa transição oferece o uso de um parametro:

dimension: Indica se dimensionamento ocorrerá na horizontal (0) ou na vertical (1).

import mx.transitions.*;

import mx.transitions.easing.*;

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

Wipe Transition: Revela ou esconde o MovieClip usando uma máscara animada que se move horizontalmente. Essa transição oferece o uso de um parametro:

startPoint: Número que indica qual posição para começar a transição. Eles vão de 1 a 4 e 6 a 9:
Canto esquerdo superior (1); Centro superior (2); Canto direito superior (3); Canto esquedo no centro (4); Canto direito no Centro (6); Canto esquerdo inferior (7); Centro inferior (8); Canto direito inferior (9).

import mx.transitions.*;

import mx.transitions.easing.*;

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

Zoom Transition: Dá um Zoom no MovieClip dimensionando proporcionalmente. Exemplo:

import mx.transitions.*;

import mx.transitions.easing.*;

TransitionManager.start(circulo, {type:Zoom, direction:Transition.IN, duration:2, easing:Elastic.easeOut});

Métodos da Classe TransitionManager

A Classe TransitionManager nos possibilita a utilização de alguns métodos. Os métodos funcionam utilizando a instancia da classe. Nos exemplos, utilizaremos o mesmo MovieClip círculo dos exemplos anteriores, colocaremos as Ações no frame do MovieClip círculo. Os métodos são:

TransitionManager.start(): Cria uma nova instancia para a Classe se uma já não existir e anima. Exemplo:

import mx.transitions.*;

import mx.transitions.easing.*;

TransitionManager.start(circulo, {type:Iris, direction:Transition.IN, duration:5, easing:Bounce.easeOut, startPoint:5, shape:Iris.CIRCLE});

TransitionManager.startTransition(): Cria uma instancia da Classe e começa a transição. Se uma transição parecida já existir será removida e uma transição nova é criada. Exemplo:

import mx.transitions.*;

import mx.transitions.easing.*;

var minhaTransicao:TransitionManager = new TransitionManager(circulo);

minhaTransicao.startTransition({type:Zoom, direction:Transition.OUT, duration:3, easing:Bounce.easeOut});

TransitionManager.toString(): Retorna o Objeto do TransitionManager como um String. Exemplo:

import mx.transitions.*;

import mx.transitions.easing.*;

var minhaTransicao:TransitionManager = new TransitionManager(circulo);

var tipo:String = minhaTransicao.toString();

trace(tipo);

Manipuladores de Eventos

Os manipuladores de Eventos são utilizados para sabermos quando um determinado evento aconteceu com nossa transição. Eles são:

TransitionManager.allTransitionsInDone(): É chamado quando uma determinada animação de Transição de entrada (IN) acaba. Exemplo:

import mx.transitions.*;

import mx.transitions.easing.*;

var myTransitionManager:TransitionManager = new TransitionManager(circulo);

myTransitionManager.startTransition({type:Iris, direction:Transition.IN, duration:1, easing:None.easeNone, startPoint:5, shape:Iris.CIRCLE});

var myListener:Object = new Object();

myListener.allTransitionsInDone = function(eventObj:Object) {

trace("Animação de entrada acabou");

};

myTransitionManager.addEventListener("allTransitionsInDone", myListener);

TransitionManager.allTransitionsOutDone(): É chamado quando uma determinada animação de Transição de saída (OUT) acaba. Exemplo:

import mx.transitions.*;

import mx.transitions.easing.*;

var myTransitionManager:TransitionManager = new TransitionManager(img1_mc);

myTransitionManager.startTransition({type:Iris, direction:Transition.OUT, duration:1, easing:None.easeNone,startPoint:5, shape:Iris.CIRCLE});

var myListener:Object = new Object();

myListener.allTransitionsOutDone = function(eventObj:Object) {

trace("Animação de saída acabou.");

};

myTransitionManager.addEventListener("allTransitionsOutDone", myListener);

Considerações Finais

O uso da Classe TransitionManager ajuda e muito quando precisamos criar efeitos dinamicamente. Ainda sim é limitada a dez efeitos, mas pode ser aumentada em uma versão mais nova do Flash ou até mesmo modificando a Classe.

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

3 Comments to “Estudo de Classes – Classe TransitionManager”

You can follow all the replies to this entry through the comments feed.

André

Maio 29, 2008 at 9:53 pm | Permalink

Não estou conseguindo ler o texto. Por favor concertem! =)
Hughes

Abril 21, 2010 at 1:01 pm | Permalink

Onde eu coloco os códigos? ‘-’
não tou conseguindo fazer.
Douglas

Agosto 16, 2010 at 9:14 pm | Permalink

muito bom! vlw, estou estudando sobre isso, pena q são só 10 efeitos =[