GABRIEL SPORCH (53 pts)

AUTOR DESCONHECIDO (100 pts)

JOÃO NETO (78 pts)

LUIZ HERRERA (117 pts)

JONAS GALVEZ (521 pts)

GUILHERME SCHEIBE (49 pts)

DAUTON JANOTA (255 pts)

PEDRO CLAUDIO (50 pts)

GUILHERME G.G. (137 pts)

LUI FERNANDO (151 pts)

RICARDO TEIXEIRA (40 pts)

JOTA LAGO (40 pts)
Treinamento PontoFlash de Flash e ActionScript

Queria usar no meu formulário o CGI de outro domínio.

Como fazer um menu que segue o mouse com easing como o do site do cantao.com.br?

Como fazer uma arma móvel atirar um projétil verticalmente?

Como retornar variáveis de um PHP no Flash?

O que é a opção Interlaced quando vou salvar um bitmap PNG?

Qual a maneira de colocarmos uma figura (gif) como plano de fundo em um fla?

Como faço para dar um fade-out em um determinado momento de um som no Flash?

Como fazer um efeito Glaussiam Blur no Flash?

Como importar um texto de um TXT rolando no palco e parando no mouseOver e evitando o cache?

Eu não consigo entender como funciona o loop FOR para duplicar movieclips.

Queria declarar valores para uma variável importada de um arquivo TXT.

Função criada para código de contagem regressiva de data, para MX.

Como faço para contar o tempo de duração de uma corrida num labirinto?

Como faço para inserir um contador em uma cena do flash?
Objeto Movieclip - introdução

Primeiros passos - apresentação

RIA está vindo com tudo

Contador usando SharedObjects.

Como arredondar os cantos de uma foto no Fireworks.

Looping.

Introdução ao Droptarget

Alterando Artistic Media no Corel Draw.

Criando um verificador de campos de um formulário.

Conceitos de Design - Apresentação.

Desenvolvendo um Tocador de Vídeo em Flash

Gerando XLS a partir de ASP
Drawpad

Texto esticado

Click determiner

Message Board Flash+ASP

Over menu

Outlines

Número de caracteres

Movimento

SomnoFlash5

Giratoria

Cmponente Radio Button

Loteria
HOME | TUTORIAIS
Tween Class
por Maxwell Dayvson

Vamos aprender hoje como trabalhar com a TweenClass, que não é documentada no Flash MX 2004. O que vamos fazer hoje é usar a TweenClass juntamente com a Classe Color para fazer animações de mudança de cor de um MovieClip -- que, em nosso exemplo, tem uma imagem qualquer dentro dele.

Lembro que você pode utilizar a TweenClass para fazer outros tipos de animações, cujo funcionamento seja semelhante ao que você vai aprender aqui. Veja o resultado final do artigo logo abaixo.

Primeiro passo: vamos desenhar o que serão nossas opções de cores. Para isso, crie um MovieClip com qualquer forma que você quiser. Para o exemplo abaixo, optei por criar esta "forma estranha" que vocês podem observar na imagem abaixo... hehehe :-D . Como todos os MovieClips terão a mesma forma, o que faremos é duplica-ló até ter cinco MovieClips. Agora vamos mudar a cor de cada MovieClip. Selecione o objeto desejado e vá até o painel de propriedades. Na opção Color, selecione a opção TINT e escolha a cor desejada.

Repita esse processo para todos os outros MovieClips, até que o resultado seja parecido com o da figura abaixo. Em seguinda, crie um MovieClip, importe para dentro dele uma imagem qualquer, e instancie esse MovieClip como "foto_mc" (sem aspas).

O próximo passo será definir a instância para cada um dos cinco MovieClips que temos no stage. Como exemplo, vamos utilizar os seguintes nomes:

vr_mc = MovieClip da cor Vermelha
vd_mc = MovieClip da cor Verde
az_mc = MovieClip da cor Azul
lr_mc = MovieClip da cor Laranja
cz_mc = MovieClip da cor Cinza

Vamos às ações! :-D

Primeiro, importe a TweenClass para poder usá-la. Ela encontra-se na pasta mx\effects\Tween. Como usamos o import, não é preciso informar a extensão do arquivo (como por exemplo Tween.as).

import mx.effects.Tween;

Agora, vamos criar uma função chamada mudarCor que, como seu nome já diz, será responsável pela mudança da cor de nossa foto (MovieClip). Para esta função precisaremos de três argumentos. São eles:
r, g e b --- que equivalem aos valores de cor (RGB) do MovieClip, e que recebe como argumento um número que vai de 0 a 255.
Como essa função não tem retorno, usamos o Void. Vamos a ela:

function mudarCor(r:Number, g:Number, b:Number):Void {

Logo abaixo, vamos criar um objeto simples com o nome corobj, para depois utilizá-lo com a TweenClass.

var corobj:Object = {}

Agora, vamos instanciar um objeto da classe Color, para poder utilizar os métodos necessários da classe e realizar a mudança de cor. Como argumento, a classe Color receberá a instância do MovieClip, que é "foto_mc" (sem aspas).

var corFoto:Color = new Color(foto_mc);

Agora iremos usar a TweenClass. Para tanto, crie um objeto da classe Tween, que possui quatro argumentos:
1) O objeto que criamos (corobj);
2) O array que vai ter três posições, onde usamos o método getTransform() para resgatar os valores do RGB do nosso movieclip "foto_mc";
3) Outro array com três posições, que possui os valores dos argumentos que são passados da função mudarCor;
4) E, por último, o tempo em que a animação deve acontecer. Vamos usar para esse exemplo 1000 milisegundos.
Com isso temos o resultado da linha abaixo.

var _tween:Tween = new Tween(corobj,[corFoto.getTransform().rb, corFoto.getTransform().gb,
corFoto.getTransform().bb],[r, g, b],1000);

Como informamos no primeiro argumento da TweenClass, o objeto "corobj" (sem aspas), vamos utilizá-lo juntamente com o evento pertencente à classe, que é o onTweenUpdate. Esse evento ocorre a cada passagem da animação. Informe um argumento, que pode ser qualquer palavra -- em nosso exemplo, utilizaremos o (v), onde v é o valor contido no array que definimos.
Como o array que informamos na TweenClass tem três posições, que são os argumentos informados na função mudarCor, utilizaremos o v indicando uma posição do array.
Ex: v[0] = r
v[1] = g
v[2] = b

Dentro do evento, vamos usar o método setTransform, da classe Color, que vai receber os valores contidos no array. Esse método é responsável por especificar o percentual do RGB no objeto.

corobj.onTweenUpdate = function(v):Void{
   corFoto.setTransform({rb:v[0],gb:v[1],bb:v[2]})
}

Vamos utilizar agora outro evento da TweenClass, chamado onTweenEnd. Este evento é disparado no final da nossa animação. Caso seja preciso que uma outra animação com Tween ou qualquer outra ação seja executada no momento em que a nossa tenha terminado, usamos o evento onTweenEnd. Como exemplo, criamos um campo de texto com a instância info_txt (usando a propriedade text dele) e atribuímos uma String concatenada com os valores de R G B. Vale ilustrar que o texto irá aparecer apenas quando o evento onTweenEnd for executado.

corobj.onTweenEnd = function():Void{
   info_txt.text = "O RGB da cor selecionada é: (R: " + r + " B: " + b + " G: " + g + " )"
   }
}

O que teremos que fazer agora é: quando o usuário clicar numa cor, o MovieClip "foto_mc" (sem aspas) deve resgatar os valores da cor (RGB) do MovieClip que foi clicado, e repassar para o "foto_mc" (sem aspas).

Para realizarmos isso, usaremos o evento onRelease de cada MovieClip. Como podemos observar abaixo, temos a instância do MovieClip usando o onRelease. Como temos cinco opções de cores e para todas precisaremos do mesmo método para executar a função, faremos uma atribuição múltipla.

lr_mc.onRelease = cz_mc.onRelease = az_mc.onRelease = vd_mc.onRelease =vr_mc.onRelease = function():Void{

Ao escolher uma cor, vamos exibir na tela uma mensagem no campo de texto info_txt, com a propriedade text.

info_txt.text = "Mudando de Cor..."

Instanciamos mais uma vez um objeto da classe Color, e passamos como argumento o próprio MovieClip que foi clicado -- com o escopo this, já que estamos dentro do evento onRelease dos MovieClips -- para poder usar o método getTranform() mais adiante e resgatar o RBG do MovieClip clicado.

var _color:Color = new Color(this)

Aqui executamos a nossa função mudarCor, e passamos os argumentos que a função precisa (os valores RGB do MovieClip clicado). Para que isso seja possível, utilizamos a variavel _color que foi definida anteriormente, usando o método getTransform da Classe Color, mais a propriedade para forma as cores (rb, gb, bb) oferecidas pelo método. O getTransform() é responsável por exibir os valores RGB do objeto

RB ==> Percentual de vermelho do objeto
GB ==> Percentual de verde do objeto
BB ==> Percentual de azul do objeto
todos eles recebem um valor de 0 a 255

mudarCor(_color.getTransform().rb,_color.getTransform().gb,_color.getTransform().bb)
}

Agora vamos tornar possível uma escolha da cor pra nosso MovieClip "foto_mc" (sem aspas) de forma personalizada, em que o usuário poderá informar nos componentes NumericStepper os valores para a cor da imagem -- e não se limitando às cinco cores presentes nos MovieClips que temos. Para isso, insira no Stage três componentes NumericStepper, e instancie o primeiro como "r" (sem aspas), o segundo como "g" (sem aspas), e o terceiro como "b"(sem aspas).

Selecione o primeiro componente NumericStepper e vá até o painel de propriedades, na aba parameters, e no campo maximum coloque o valor 255. Definimos esse valor máximo porque, como já sabemos, o RGB só vai de 0 a 255. Faça isso para os próximos dois NumericSteppers.

Agora insira no Stage um componente Button e instancie-o como "muda_pb"(sem aspas). Depois, ainda no painel de propriedades, vá até a aba parameters e defina um Label para o componente -- se você quiser, ainda pode definir um ícone para o mesmo. Observe na imagem abaixo como está nossa tela.

Usaremos a instância do nosso componente Button "muda_pb"(sem aspas), juntamente com o evento clickHandler, que é disparado no momento em que clicamos em Button. Dentro do evento vamos executar a função mudaCor passando, como argumentos, as instâncias dos componentes NumericStepper com seu valor inserido

muda_pb.clickHandler = function ():Void{

Ao escolher uma cor, vamos exibir uma mensagem no campo de texto info_txt, com a propriedade text dele

info_txt.text = "Mudando de Cor..."

Os argumentos da função recebem um número definido pelo usuário no componente. Para resgatá-los, usamos a propriedade value do componente NumericStepper, que é responsável por trazer o valor que está no componente.

mudarCor(r.value,g.value,b.value)
}

Abraços



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
0 comentário