Andrews Roberson » caurina

Aplicando filtros com caurina FilterShortcuts

Andrews — Tue, 14 Apr 2009 05:27:43 +0000

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.

Criando um perseguidor de mouse

Andrews — Thu, 02 Apr 2009 05:36:59 +0000

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

Formatando texto no flash sem complicação

Andrews — Sat, 08 Nov 2008 05:02:13 +0000

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!

Baixando a saturação em movieclips utilizando a classe caurina

Andrews — Wed, 08 Oct 2008 05:53:31 +0000

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&lt;=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!