Bruno Mikoski

Fala galera, mais um post rapidinho pra variar, vou passar algo bem simples que acabei utilizando em um projeto agora de manha, e gostei do resultado final, então mostrar basicamente como foi feito, e ja da uma noção Actionscript 3, aplicar filtros blur via Actionscript, é bem simples, porem acho que o efeito final ficou bacana!

Em primeiro lugar, vamos preparar o necessário:

Desenhe uma pétala simples, e exporte a mesma como "petala".

Agora vamos a parte que importa o código!

 
import flash.events.Event;
//Criando um Timer
var myTimer:Timer = new Timer(100);
myTimer.addEventListener(TimerEvent.TIMER, addPetala);
myTimer.start();
 
//Função para retornar um numero randomico passando 2 valores como parametro
function getRandomByRange(min:Number, max:Number, floor:Boolean = false):Number
{
    var randomNum:Number;
    switch(floor)
    {
        case false:
            randomNum = Math.random() * (max - min + 1) + min;
        break
        case true:
            randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
        break;
    }
 
    return randomNum;
}
//Função que adiciona nova petala.
function addPetala(te:TimerEvent):void
{
    var myPetala:petala = new petala();
 
    var scale:Number = getRandomByRange(0.3, 1);
 
    myPetala.scaleX                = myPetala.scaleY = scale;
    myPetala.x                    = Math.random()*stage.stageWidth;
    myPetala.fallingCurve        = getRandomByRange(-2,2,true);
    myPetala.dropSpeed            = (scale/20)*100;
    myPetala.rotateSpeed        = getRandomByRange(-3,3,true);
    myPetala.turn                = 0.1;
 
    var petalaBlur:BlurFilter    = new BlurFilter();
    petalaBlur.blurX            = petalaBlur.blurY = (scale/50)*100;
    petalaBlur.quality            = 3;
 
    var filterArray:Array        = new Array(petalaBlur);
    myPetala.filters            = filterArray;
 
    myPetala.addEventListener(Event.ENTER_FRAME, dropMe);
 
    stage.addChild(myPetala);
}
//Função da animação da petala
function dropMe(e:Event):void
{
    var petala:MovieClip     = e.target as MovieClip;
    petala.x                += petala.fallingCurve;
    petala.y                += petala.dropSpeed;
    petala.rotation            += petala.rotateSpeed;
    petala.scaleX             += petala.turn;
 
    if(petala.scaleX > 1)
    {
        petala.turn = -0.1;
    }
    else if(petala.scaleX < 0)
    {
        petala.turn = 0.1;
    }
 
    if(petala.y > stage.stageHeight+petala.height)
    {
        e.target.removeEventListener(Event.ENTER_FRAME, dropMe);
        e.target.parent.removeChild(e.target);
    }
}

Basicamente a grande sacada aqui é que as petalas que caem na frente, caem mais rapido, e tem mais blur aplicado, dando um efeito bacana de desfoque!

É bem simples mais o efeito final e bacana e bem leve!

Download dos arquivos

Tags: Actionscript 3, Blur, Tutorial

This entry was posted on Wednesday, July 9th, 2008 at 3:22 pm and is filed under Design, Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.