Posted by Andrews on abril 14th, 2009
Continuando os posts sobre as classes caurina vou mostrar como trabalhar com os filtros DropShadow, Glow e Blur.
Não vou me ater muito na criação do arquivo para não ficar extenso o post, assim entendo que tu saiba trabalhar com flash.
Neste caso estou aplicando os filtros através de uma function, onde verificamos qual é o filtro solicitado pelo botão, após aplica-se o filtro solicitado.
// IMPORTAMOS A CLASSE Tweener e FilterShortcuts
import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
// INICIANDO A CLASSE FilterShortcuts
FilterShortcuts.init();
/**
* FUNCTION aplicarFiltro
* @param MouseEvent
*/
function aplicarFiltro(event:MouseEvent):void {
var target:String = event.target.name;
switch(target) {
case 'shadow_mc':
Tweener.addTween(container_mc, {_DropShadow_blurX:30, _DropShadow_blurY:30, time:.5, transition:'linear'});
break;
case 'glow_mc':
Tweener.addTween(container_mc, {_Glow_blurX:30, _Glow_blurY:30, time:.5, transition:'linear'});
break;
case 'blur_mc':
Tweener.addTween(container_mc, {_Blur_blurX:30, _Blur_blurY:30, time:.5, transition:'linear'});
break;
}
}
/**
* FUNCTION removerFiltro
* @param MouseEvent
*/
function removerFiltro(event:MouseEvent):void {
var target:String = event.target.name;
switch(target) {
case 'shadow_mc':
Tweener.addTween(container_mc, {_DropShadow_blurX:0, _DropShadow_blurY:0, time:.5, transition:'linear'});
break;
case 'glow_mc':
Tweener.addTween(container_mc, {_Glow_blurX:0, _Glow_blurY:0, time:.5, transition:'linear'});
break;
case 'blur_mc':
Tweener.addTween(container_mc, {_Blur_blurX:0, _Blur_blurY:0, time:.5, transition:'linear'});
break;
}
}
// EVENTOS
shadow_mc.addEventListener(MouseEvent.MOUSE_OVER, aplicarFiltro);
shadow_mc.addEventListener(MouseEvent.MOUSE_OUT, removerFiltro);
glow_mc.addEventListener(MouseEvent.MOUSE_OVER, aplicarFiltro);
glow_mc.addEventListener(MouseEvent.MOUSE_OUT, removerFiltro);
blur_mc.addEventListener(MouseEvent.MOUSE_OVER, aplicarFiltro);
blur_mc.addEventListener(MouseEvent.MOUSE_OUT, removerFiltro);Repare que no filtro Glow você precisa alterar a cor, pois ele utiliza uma cor padrão para o filtro. Neste caso pode-se estar aplicando também a propriedade _Glow_color, que é o responsável pela manipulação da cor do Glow.
Tweener.addTween(container_mc, {_Glow_blurX:30, _Glow_blurY:30, _Glow_color:0x333333, time:.5, transition:'linear'});As classes caurina são uma mão na roda para quem não curte usar a timelime e manipular os objetos no palco, assim facilitando e muito nossa vida. Lembrando que devemos essa ao Zeh por te-la disponibilizado a comunidade.
Clique aqui e veja como ficou o exemplo.
Posted by Andrews on abril 2nd, 2009
Uma dica bem simples para causar um tchan a mais ao se passar o mouse sobre objetos em uma aplicação flash é criar um perseguidor ou como queiram chamar.
Pois bem… primeiro crie então um movieclip no palco e instancie-o com o nome de botao_mc, após ter o botão criado, criaremos nosso perseguidor.
Desenho um circulo, retângulo ou qualquer outra coisa no palco, e transforme-o em um movieclip setando seu nome como perseguidor_mc, também será necessário setar uma identificação para o Linkage, pois iremos chamar ele da biblioteca. Para fazer isto clique em Advanced, e após marque a opção Export for ActionScript. Veja o exemplo abaixo.
Após ter criado o perseguidor, delete-o do palco, deixando apenas o botão.
Crie uma nova layer e escreva a action que será responsável por atachar e movimentar o persseguidor do mouse.
// IMPORTANDO A CLASSE CAURINA TWEENER
import caurina.transitions.Tweener;
// EVENTO OVER
botao_mc.onRollOver = function() {
// ATACHA O PERSEGUIDOR NA POSICAO X E Y DO MOUSE
attachMovie('perseguidor_mc', 'perseguidor_mc', 1, {_x:_xmouse, _y:_ymouse});
// AO MOVER O MOUSE, MOVE TAMBEM O PERSEGUIDOR
onMouseMove = function() {
// APLICANDO TWEENER PARA SUAVIZAR O MOVIMENTO DO PERSEGUIDOR
Tweener.addTween(perseguidor_mc, {_x:_xmouse+9, _y:_ymouse+20, time:1, transition:'easeOutExpo'});
}
}
// EVENTO OUT
botao_mc.onRollOut = function() {
// REMOVE O PERSEGUIDOR
removeMovieClip(perseguidor_mc);
// DELETA A FUNCAO MOUSE MOVE
delete onMouseMove;
}Esta feito nosso perseguidor, supimpa não!
clique aqui e veja como ficou o exemplo
Posted by Andrews on novembro 8th, 2008
Velhos tempos onde se formatar um texto dinâmico no flash era coisa do outro mundo, criava-se stylos, definia-se configurações manualmente, e muitas vezes era um sofrimento acertar a formatação ideal.
Pois bem, acabaram-se os problemas (pelo menos os meus), a classe caurina resolve pra gente, como? através da propriedade especial TextShortcuts.
Crie um campo de texto do tipo Dynamic text e defina o Instance name para texto_txt.
Após ter criado o campo de texto dinâmico, basta apenas inserir algum texto dentro da caixa, digitar o script abaixo e testar para comprovar.
// IMPORT CLASSES: Tweener, TextShortcuts
import caurina.transitions.Tweener;
import caurina.transitions.properties.TextShortcuts;
// FUNCTION formatarTexto
formatarTexto = function() {
// INIT TextShortcuts
TextShortcuts.init();
// DEFINE TEXT SIZE
Tweener.addTween(texto_txt, {_text_size:25, time:0.5, transition:'linear'});
// DEFINE COLOR
Tweener.addTween(texto_txt, {_text_color:0x003366, time:1, transition:'linear'});
// DEFINE INDENT
Tweener.addTween(texto_txt, {_text_indent:100, time:1, transition:'linear'});
// DEFINE LEADING
Tweener.addTween(texto_txt, {_text_leading:10, time:1, transition:'linear'});
// DEFINE MARGIN LEFT
Tweener.addTween(texto_txt, {_text_leftMargin:20, time:1, transition:'linear'});
// DEFINE RIGHT MARGIN
Tweener.addTween(texto_txt, {_text_rightMargin:20, time:1, transition:'linear'});
// DEFINE LETTERSPACING
Tweener.addTween(texto_txt, {_text_letterSpacing:0.5, time:1, transition:'linear'});
}
formatarTexto();Veja aqui o exemplo em funcionamento.
Mamão com açúcar não? então, um viva para a classe caurina!
Posted by Andrews on outubro 8th, 2008
Uma forma simples e rápida de baixar a saturação em movieclips ou imagens no flash é utilizar a classe caurina.
Bem, caso você ainda não tenha a classe caurina, poderá estar baixando a mesma aqui. Lembre-se que estamos utilizando actionscript 2.0, portanto a classe deverá ser para actionscript 2.0.
Após baixar a classe, descompacte-a e coloque-a dentro do diretório C:\Documents and Settings\nome-de-seu-computador\Configurações locais\Dados de aplicativos\Adobe\Flash CS3\en\Configuration\Classes (neste caso para quem utiliza Adobe Flash CS3). Fazendo desta forma não necessitaremos ter as classes no diretorio de nosso projeto, pois ela já estará visivel ao flash.
Após ter as classes instaladas/configuradas, criaremos o arquivo conforme a imagem abaixo.
Crie 6 (seis) movieclips com cores diferentes, e instancie-os com o seguinte nome, clip1_mc, … clip6_mc.
Após criado e instânciados os movieclips, criaremos então o actionscript responsável por criar o efeito de saturação nos movieclips. Crie uma nova Layer, e digite o código abaixo.
/* IMPORTANDO AS CLASSES CAURINA: Tweener, ColorShortcuts */
import caurina.transitions.Tweener;
import caurina.transitions.properties.ColorShortcuts;
/* INICIANDO A CLASSE ColorShortcuts */
ColorShortcuts.init();
/* CRIAMOS UM LOOP PARA SETAR A SATURACAO
* EM TODOS OS CLIPS QUE ESTAO NO PALCO
*/
for (i=1; i<=6; i++) {
/* CLIPS RECEBEM A SATURACAO */
Tweener.addTween(this['clip'+i+'_mc'],{_saturation:0, time:0.3, transition:"easeOutSine"});
/* EVENTOS ONROLLOVER/ONROLLOUT PARA VISUALIZAR O EFEITO NOS CLIPS */
this['clip'+i+'_mc'].onRollOver = function() {
Tweener.addTween(this, {_saturation:1, time:0.3, transition:"easeOutSine"});
}
this['clip'+i+'_mc'].onRollOut = function() {
Tweener.addTween(this, {_saturation:0, time:0.3, transition:"easeOutSine"});
}
}Simples não!
Veja aqui o exemplo em funcionamento
Valeu!
Comentários recentes