Como eu faço um botão igual a do site http://www.ferryhalim.com/orisinal?
¤ Introdução:
Neste tutorial vou mostrar como fazer para utilizar em um Flash Document os efeitos de transição que são possíveis utilizar em slides criados em um Flash Slide Presentation. Para isso mostrarei uma classe criada por mim, a TransitionAnime que está disponível para download aqui neste tutorial. Além de você ter total liberdade de criar os efeitos via ActionSript também será instalado juntamente com a classe TransitionAnime o painel TransitionAnimeEffect para quem ainda não sabe, ou não quer, trabalhar diretamente com ActionSript. Esse painel permite criar os mesmos efeitos que a classe cria sem escrever uma linha de código sendo apenas necessário configurar o efeito em uma interface gráfica simples.
Os efeitos que iremos criar não são como os Timeline Effects que, no final das contas, só agiliza as animações timeline-based não influenciando em nada do tamanho final do arquivo. Iremos criar nossas animações via ActionScript com o auxílio da classe TransitionAnime, ou do painel TransitionAnimeEffect.
¤ Instalação da extensão:
Bom galera, para instalar a classe TransitionAnime e o painel TransitionAnimeEffect você deve baixar o arquivo TransAnimeEffect.mxp e deve ter necessariamente o Macromedia Extension Manager instalado em seu computador. Caso não tenha vá até sessão de downloads do site da macromedia http://www.macromedia.com e faça o download do programa. O Macromedia Extension Manager é free.
Após ter se certificado que o Macromedia Extension Manager está instalado dê dois cliques no arquivo TransAnimeEffect.mxp para instalar a extensão e você deve aceitar a licença clicando accept da tela que será exibida como na figura 1.
Depois de instalada a extensão você pode obter informações sobre a mesma selecionando ela na lista como mostra a figura 2.
Quando já tiver instalado a extensão abra o flash ou reinicie o mesmo para que possamos ter acesso a classe e ao painel.
¤ Usando a classe TransitionAnime:
A classe TransitionAnime fica disponível no painel de Actions na pasta RTSClasses. Para usar a classe TransitionAnime você vai precisar de uma instância da classe da mesma forma que precisamos quando utilizamos a classe Sound ou LoadVars. A definição dessas instância não difere das outras classes do ActionScript. Para cria-lá usamos a sintaxe abaixo:
var anime:TransitionAnime = new TransitionAnime();
O método responsável por dar início à animação é o start. Você deve passar para o método alguns parâmetros que definirão tipo de animação, duração, direção, etc. Veja a seguir os possíveis parâmetros e valores para esse método.
anime.start(_mc:MovieClip, _type:String, _duration:Number, _direction:Number, _easing:String, _ease:String, [_otherParams:Object]);
" Possíveis Parametros
_mc O MovieClip que se deseja aplicar o efeito de transição. Este deve estar presente no Stage.
_type Uma string que informa qual efeito será utilizado. Os possíveis valores para esse parâmetro são: "Iris", "Fade", "Fly", "Wipe", "Zoom", "Blinds", "PixelDissolve", "Rotate", "Squeeze" e "Photo".
_duration O tempo, em segundos, que deve durar a animação de transição.
_direction Esse parâmetro determina se a transição será de entrada (aparecimento) ou de saída (desaparecimento). Só há dois valores possíveis: 0 (entrada) ou 1 (saída).
_easing O tipo de animação utilizado na transição. Cada _easing tem um _ease correspondente. Consulte a tabela Possíveis _easing e _ease para ver os valores possíveis.
_ease Determina se a animação será de entrada ou de saída. Consulte a tabela Possíveis _easing e _ease para ver os valores possíveis.
_otherParams Um objeto com as propriedades para personalizar o tipo de efeito escolhido. Todos os efeitos têm propriedades comuns que são os parâmetros passados anteriormente. No entanto alguns deles podem ainda ser melhor configurados a fim de personalizar o efeito. Veja a tabela Propriedades personalizadas para ver as possíveis configurações para cada tipo de efeito.
" Possíveis _easing e _ease
_easing _ease
None easeIn, easeOut, easeInOut, easeNone
Regular easeIn, easeOut, easeInOut
Elastic easeIn, easeOut, easeInOut
Back easeIn, easeOut, easeInOut
Bounce easeIn, easeOut, easeInOut
Strong easeIn, easeOut, easeInOut
" Propriedades personalizadas
_type propriedade(s) extra
Iris shape: "SQUARE" ou "CIRCLE"
Wipe startPoint: 0 a 9
PixelDissolve xSections: 0 a 50*
ySections: 0 a 50*
Blinds numStrips: 0 a 50*
Fly startPoint: 0 a 9
Squeeze dimension: 0 (horizontal) ou 1 (vertical)
Rotate degrees: -360 a 360 (grau para rotacionar) e ccw: true ou false (ante-horário)
*Esses valores máximos são propostos para garantir performace.
Além do start há apenas mais um método, o removeTransitionAnime. Esse método nos será útil em caso que querermos parar a animação antes de seu fim. A utilização dele é simples bastando invocá-lo a partir da instância da classe que queremos parar o movimento como no código abaixo.
anime.removeTransitionAnime();
Caso você queira executar alguma operação ao finalizar a animação você pode contar com o manipulador de evento onTransitionAnimeEnd a qual deve-se atribuir a função que se deseja executar. Além deste evento há também o onTransitionAnimeUpdate que é invocado enquanto a animação transcorre.
¤ Exercitando:
Agora vamos fazer um pequeno exercício para ficar bem claro como funciona a classe. Crie no stage dois botões. Instancie um como iniciar_btn e o outro como cancelar_btn. Também crie um quadrado e converta para MovieClip e instancie este como quad_mc. Por fim faça um campo de texto tipo dynamic e instancie como status_txt. O resultado deve ficar semelhante a figura 3.
Agora crie uma nova layer para as ações. Insira nesta layer o código abaixo.
var anime:TransitionAnime = new TransitionAnime ();
inicia_btn.onRelease = function () {
anime.onTransitionAnimeEnd = function () {
status_txt.text = "Fim da animação.";
anime.onTransitionAnimeUpdate = function () {
status_txt.text = "Animação em curso.";
anime.start (quad_mc, "Blinds", 2, 1, "Bounce", "easeOut", {numStrips: 10});
cancela_btn.onRelease = function () {
anime.removeTransitionAnime ();
status_txt.text = "Animação cancelada.";
Para obter informações sobre a classe você pode consultar o Help do Flash (F1) que haverá uma pasta, a RTSClasses, com a documentação da classe.
¤ O Painel TransitionAnimeEffect:
O painel TransitionAnimeEffect permite criar efeitos utilizando a classe TransitionAnime sem que seja necessário escrever o código. O objetivo desse painel é trazer mais possibilidades aqueles que não tem conhecimentos de ActionScript para criar seus próprios códigos. Para os que têm esses conhecimentos certamente utilizarão a classe por propiciar mais possibilidades na hora de fazer as animações.
Para abrir o painel clique no menu Window e em seguida Other Panels depois clique na opção TransitionAnimeEffect. O painel é exibido na figura 4.
Para utilizá-lo crie um MovieClip no stage, não é necessário instanciar este MovieClip. Defina as opções do painel, a exemplo da figura 4, e clique em Aplicar Efeito. Para visualizar o efeito aplicado teste o filme (CTRL+Enter). Se quiser alterar o efeito basta aplicar um novo que o anterior é sobrescrito não esquecendo de selecionar o MovieClip antes. Se não desejar mais o efeito naquele MovieClip basta selecioná-lo e clicar em Remover Efeito.
Um detalhe importante quando se trata no painel TransitionAnimeEffect é a caixa de texto Função. Nesse espaço você deve inserir o nome, ou caminho referente, da função que deverá ser executada quando a animação for concluída. Se você criar a função dentro do MovieClip mesmo, ou seja, em sua timeline é necessário apenas colocar o nome da função no entanto se você criar a função na timeline onde o MovieClip está contido você deverá por o caminho até ela que no caso será _parent.nomeDaFunção. Para testar isso insira no frame onde esta o MovieClip o seguinte código:
function fimDoEfeito() {
trace ("Fim");
Agora no campo de texto Função ponha _parent.fimDoEfeito e aplique esse efeito que você definiu. Teste o filme e quando a animação for concluída será exibido no output (janela de saída) a mensagem "Fim".
Então era isso galera que eu tinha pra passar pra vocês. Em breve novas matérias virão. Eis aqui para download os arquivos do tutorial.
| 17/4/2013 - 00:15 |
Amigos do ponto flash gostaria que vcs verifica-se os links abaixo o mesmos estão quebrado eu tinha baixado este arquivo em 2008 neste site, agora estou de novo tentando baixar TransitionAnimeEffect Des de j´agradeço Pagina: http://www.pontoflash.com.br/tutoriais_con.php?autor=93&tema=3&post=354 Link danificado http://www.pontoflash.com.br/download/TransitionAnime.zip