Animovaná maska

7.9.2011· Autor: Ondřej Brichta· Přidat komentář

Dnešní ukázka se bude týkat zajímavého efektu postupného vykreslení objektu přes animovanou masku.

Animace masky

Masky nám v efektech umožňují zajímavé zobrazování objektů, tak jako jsme si už jednou ukázali v tomto tutoriálu: http://www.flash.cz/portal/clanek.aspx?id=1441 . Dnešní ukázka bude využívat podobného principu, pouze provedení bude odlišné a tím i samotný efekt vykreslení fotografie.

 

Tak jako v řadě jiných případů, i zde bude základním prvkem animace schovaná v MovieClipu a tento MovieClip pak poslouží jako dílčí prvek samotné masky. Naším úkolem pak bude zajímavým způsobem zajistit postupné vykreslování masky a vytvořit tak efekt postupného vykreslení fotografie.

01

Nejprve si připravíme samotný MovieClip, který exportujeme pod názvem třídy „animace". Uvnitř tohoto MovieClipu sestavíme Shape Tween animaci (animace změny tvaru) na jejímž posledním snímku bude příkaz stop();

 

 

Sestavení ActionScriptu

Přesuneme se na hlavní časovou osu a v prvním snímku si připravíme prázdný MovieClip masky, kam budeme směřovat generované animace:

var maska:MovieClip = new MovieClip();
addChild(maska);
foto.mask = maska;
foto.cacheAsBitmap = true;
maska.cacheAsBitmap = true;
var blur:BlurFilter = new BlurFilter();
maska.filters = [blur];

 

Na scéně máme navíc vložený MC s fotkou, jehož název instance je „foto". Aby byl výsledný efekt masky uhlazenější, použijeme na masku filtr Blur a oběma objektům nastavíme cachování jako bitmapy. Pak se projeví rozostření i do maskovaného objektu fotky.

Další funkce zajistí dynamické generování masky:

var pressed:Boolean = false;
this.stage.addEventListener(MouseEvent.MOUSE_DOWN,onMDown);
this.stage.addEventListener(MouseEvent.MOUSE_UP,onMUp);
this.stage.addEventListener(Event.ENTER_FRAME,onEnterF);
foto.doubleClickEnabled = true;
foto.addEventListener(MouseEvent.DOUBLE_CLICK,onDblClick);
function onMDown(e:Event):void{
 pressed = true;
}
function onMUp(e:Event):void{
 pressed = false;
}
function onEnterF(e:Event):void{
 if(pressed){
 var anim:MovieClip = new animace();
 anim.x = mouseX+Math.random()*30;
 anim.y = mouseY+Math.random()*30;
 anim.rotation = Math.random()*360;
 maska.addChild(anim);
 }
}
function onDblClick(e:Event):void{
 clearMask();
}
function clearMask():void{
 while(maska.numChildren>0){
 maska.removeChildAt(0);
 }
}

Při stisknutí myši se pak budou na ploše generovat do masky dílčí animace a vytvářet tak zajímavý efekt odkrývání obrázku:

 

Automatická animace odkrytí

Uvedenou animaci můžeme upravit tak, že bude simulovat postupné kompletní odkrytí fotografie. Stačí pouze zajistit postupné vygenerování animací do masky tak, aby výsledek simuloval dráhu, díky které se obrázek odkryje.

K tomuto efektu využijeme kupříkladu sinové funkce, díky které můžeme dosáhnout efektu postupného odmazání fotky:

import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.filters.BlurFilter;
import flash.geom.Rectangle;
var maska:MovieClip = new MovieClip();
addChild(maska);
foto.mask = maska;
foto.cacheAsBitmap = true;
maska.cacheAsBitmap = true;
var blur:BlurFilter = new BlurFilter();
maska.filters = [blur];
var pressed:Boolean = false;
this.stage.addEventListener(MouseEvent.MOUSE_DOWN,onMDown);
this.stage.addEventListener(MouseEvent.MOUSE_UP,onMUp);
this.stage.addEventListener(Event.ENTER_FRAME,onEnterF);
foto.doubleClickEnabled = true;
foto.addEventListener(MouseEvent.DOUBLE_CLICK,onDblClick);
function onMDown(e:Event):void{
 pressed = true;
}
function onMUp(e:Event):void{
 pressed = false;
}
var c_alpha:Number = 0;
var cx:Number = 0;
var rect:Rectangle = foto.getBounds(this);
function onEnterF(e:Event):void{
 if(pressed){
 for(var i:uint=0;i<10;i++){
 oneStep();
 }
 }
}
function oneStep():void{
 cx+=0.5;
 c_alpha+=3;
 var anim:MovieClip = new animace();
 anim.cacheAsBitmap = true;
 var rad:Number = Math.PI*c_alpha/180;
 var cy:Number = rect.y+rect.height/2+Math.sin(rad)*rect.height/2;
 anim.x = cx;
 anim.y = cy;
 anim.rotation = Math.random()*360;
 maska.addChild(anim); 
}
function onDblClick(e:Event):void{
 clearMask();
}
function clearMask():void{
 while(maska.numChildren>0){
 maska.removeChildAt(0);
 }
 cx = 0;
 c_alpha = 0;
}

O vykreslení jednoho kroku se stará funkce „oneStep", takže ji stačí v pravidelných intervalech volat. Samotný efekt pak spustíme při stisknutém tlačítku myši:

 

 

Zdrjové soubory: data

Ondřej Brichta Vývojář flashových a mobilních AIR aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server

E-mail: ob(zavinac)obria.cz | Web: http://www.obria.cz |

Motto: <°))))><

Komentáře k článku  

Přihlášení uživatele