Flash tiptrik – automatické zarovnání

22.10.2007· Autor: Ondřej Brichta· Počet komentářů: 6

Při 100% pokrytí okna prohlížeče flashovou animací lze automaticky umisťovat jednotlivé objekty tak, že při jakékoliv směně velikosti okna budou stále zarovnané na svých pozicích. Dnes si ukážeme jak této funkce docílit.

100% velikost animace

Pokud potřebujeme využít bezezbytku celou plochu okna prohlížeče, musíme v HTML kódu nastavit velikost flashového objektu v procentech a to na hodnotu 100%. V nastavení exportu v samotném Flashi se pak jedná o záložku HTML a položku Dimensions:

 

Při 100% zvětšení velikosti flashového objektu máme na výběr z několika možností nastavení chování flashového objektu v okně prohlížeče. Můžeme si vybrat z parametrů, které se nastavují pod položkou Scale, na stejné HTML záložce v rámci nastavení exportu flashové animace:

Styl zvětšování/zmenšování flashové objektu lze měnit i pomocí příkazů ActionScriptu, kde mění vlastnost scaleMode objektu Stage:

Stage.scaleMode = "noScale";

Lze volit mezi těmito hodnotami:

• showAll - výchozí nastavení, kdy je obsah automaticky zvětšen/zmenšen při zachování poměru stran
• noBorder - obsah je automaticky zvětšen/zmenšen při zachování poměru stran, objekty mohou přesahovat velikost scény
• exactFit - obsah je automaticky přizpůsoben velikosti okna, objekty budou zvětšeny/zmenšeny bez ohledu na původní poměr stran
• noScale - objekty zůstávají bez změny velikosti, zvětšuje se pouze pozadí flashové aplikace

Automatické zarovnání objektů

Pokud chceme, aby flashová aplikace vyplňovala 100% velikosti okna prohlížeče a objekty měly stále stejnou velikost, nastavíme hodnotu scaleMode na „noScale" a velikost SWF objektu v HTML stránce nastavíme na 100%. Tím se bude hlavní scéna roztahovat podle velikosti okna prohlížeče, ovšem všechny objekty zůstanou na svých původních místech uprostřed scény.

Pokud chceme, aby byly některé objekty ve stále stejné vzdálenosti od krajů, musíme je pomocí ActionScriptu znovu umístit.

Není problém zjistit původní velikost flashové scény. Stačí, pokud do prvního snímku hlavní časové osy zjistíme vlastnosti objektu Stage:

startW = Stage.width;
startH = Stage.height;

Abychom ušetřili výpočetní výkon, budeme nové rozmístění objektů scény provádět pouze v okamžiku, kdy dojde ke změně velikosti hlavní scény. Budeme tak sledovat události onResize objektu scény:

var stageListener:Object = new Object();
stageListener.onResize = function():Void {
//akce při změně velikosti scény
};
Stage.addListener(stageListener);

Ukázkový skript

Dejme tomu, že máme scény, kde jsou v jednotlivých rozích MovieClipy, které mají být při změně velikosti scény stále stejně vzdálené od nejbližších okrajů. Pokud budou instance objektů pojmenovány: mc1, mc2, mc3 a mc4 pak bude výslední skript na prvním snímku hlavní časové osy vypadat následovně:

//mc1
mc1.difX = mc1._x;
mc1.difY = mc1._y;
//mc2
mc2.difX = mc2._x;
mc2.difY = Stage.height-mc2._y;
//mc3
mc3.difX = Stage.width-mc3._x;
mc3.difY = mc3._y;
//mc4
mc4.difX = Stage.width-mc4._x;
mc4.difY = mc4._y;
startW = Stage.width;
startH = Stage.height;
var stageListener:Object = new Object();
stageListener.onResize = function():Void {
 var time_move = 25;
 var newX = -(Stage.width-startW)/2;
 var newY = -(Stage.height-startH)/2;
 //mc1
 moveObj(mc1, newX+mc1.difX, newY+mc1.difY, time_move);
 //mc2
 moveObj(mc2, newX+mc2.difX, startH-newY-mc2.difY, time_move);
 //mc3
 moveObj(mc3, startW-newX-mc3.difX, newY+mc1.difY, time_move);
 //mc4
 moveObj(mc4, startW-newX-mc4.difX, startH-newY-mc2.difY, time_move);
};
moveObj = function (obj:Object, cil_x:Number, cil_y:Number, time:Number):Void {
 var moveTyp = mx.transitions.easing.Regular.easeInOut;
 var posun1 = new mx.transitions.Tween(obj, "_x", moveTyp, obj._x, cil_x, time, false);
 var posun2 = new mx.transitions.Tween(obj, "_y", moveTyp, obj._y, cil_y, time, false);
};
Stage.addListener(stageListener);
Stage.scaleMode = "noScale";

Nejprve si do pomocných proměnných (difX, difY) vložíme hodnoty vzdáleností MovieClipů od nejbližších okrajů scény. Následně si připravíme pomocné proměnné (startW, startH) původních rozměrů naší scény a pokračujeme objektem listeneru onResize události scény. Nové pozice dopočítáme podle nových rozměrů hlavní scény a pro rozmístění MovieClipů využijeme funkci moveObj, kde pomocí Tween třídy animujeme dojezd do nových pozic. Výsledná aplikace pak může vypadat takto.

Zdrojový soubor je k dispozici zde: auto_align.zip

Komentáře k článku
animace	bbarmann | 22.10.2007 16:17
animace	OBr | 22.10.2007 16:21
video	>:_ja_ | 15.3.2008 9:34
fullscreen_scrollbar_flash8	Kabel | 18.1.2009 22:08
RE	bbarmann | 19.1.2009 18:58
skrolovatko	Kabel | 20.1.2009 10:58