Ondřej Brichta 20.6.2005
Dnes využijeme preloaderu z předchozích dílů a začleníme jej do naší stránky. Díky dalším zkušenostem s maskou a duplikováním objektů vytvoříme také zajímavý efekt v menu prezentace.
Otevřeme si zdrojový soubor z minulého dílu. Abychom mohli vložit preloader, je nutné umístit stávající objekty do snímku číslo 2, aby byl volný první snímek pro preloader. Nejdříve odemkneme případně zamčené vrstvy - kliknutím na symbol zámku ve vrstvě. Pak klikneme na klíčový snímek jedné vrstvy a tažením myši jej přesuneme do dalšího políčka. Takto posuneme klíčové snímky ve všech třech vrstvách.
Obr. 1
Pro větší přehlednost si vytvoříme vrstvu, do které budeme psát AS. Vrstvu pojmenujeme, klikneme pravým tlačítkem na druhý snímek této vrstvy a zvolíme „Insert Keyframe“. Abychom zajistili, že se animace zastaví hned na prvním snímku, klineme na první snímek vrstvy pro AS a na panelu akcí vložíme příkaz:
stop();
Ten nám zaručí, že se zde přehrávání zastaví, dokud nedáme pomocí preloaderu příkaz pro pokračování. Stejný příkaz vložíme do druhého snímku vrstvy.
Otevřeme si zdrojový soubor z 10. dílu, kde jsme vytvořili preloader. Klikneme myší na objekt reloaderu na scéně a pomocí CTRL+C jej zkopírujeme do schránky.
Vrátíme se k naší rozpracované webové stránce a opět kvůli větší přehlednosti vytvoříme další vrstvu, kterou pojmenujeme „Preloader“.
Obr. 2
Klineme na první snímek vrstvy pro preloader s pomocí STRCL+SHIFT+V (tímto trojhmatem vložíme objekt přesně na stejné místo, odkud jsme jej kopírovali) vložíme objekt preloaderu.. Protože ale chceme, aby se preloader objevil pouze na prvním snímku, musíme zrušit jeho zobrazení na snímku číslo dva. Klikneme tedy pravým tlačítkem myši na snímek číslo 2 vrstvy s preloaderem a zvolíme „Remove Frames“.
Obr. 3
Nyní upravíme kód na objektu preloaderu. Klikneme v prvním snímku na objekt preloaderu a otevřeme si panel akcí a podmínku:
if (procent ==100) {
_root.gotoAndStop(2);
}
změníme na:
if (celkem == nahrano) {
_root.gotoAndStop(2);
}
V knihovně symbolů najdeme objekt horního menu a otevřeme si jej. Protože budeme chtít vytvořit dynamické pozadí, které bude obsahovat masku, potřebujeme vytvořit další dvě vrstvy, přičemž první vrstva bude obsahovat maskovaný obrázek a druhá vrstva bude obsahovat samotnou masku. Nově vytvořené vrstvy přesuneme nad vrstvu pozadí.a obě nové vrstvy také pojmenujeme.
Obr. 4
Do spodní nové vrstvy vložíme pomocí „File - Import - Import to Stage“ obrázek pozadí, který si můžete stáhnout zde. Obrázek po vložení zarovnáme na střed. Vzhledem k tomu, že se jedná o GIF obrázek, automaticky se nám při exportu nastaví bezeztrátová komprese.
To ale zbytečně zvětší velikost výsledného swf souboru. Kdybychom to takto nechali, bude výsledná velikost cca 32 kB. To je zbytečně velký luxus, zvlášť když z vloženého obrázku bude vidět jen část pod maskou.
Proto si otevřeme knihovnu symbolů a klikneme pravým tlačítkem na objekt vloženého obrázku, v našem případě se jedná o „01“. Z nabídky zvolíme „Properties“. Zobrazilo se nám okno, ve kterém máme možnost nastavit typ a velikost komprese („Compression“).
Pokud zvolíme „Losseless..“ dosáhneme nejlepšího výsledku ale největšího souboru. Proto je vhodné použít jpg kompresi u které, po odškrtnutí tlačítka „Use document default quality“, můžeme určit stupeň. Nám ale stačí, když zůstane tlačítko zaškrtnuté a použije se tak výchozí nastavení komprese při exportu.
Klikneme nyní na vrchní vrstvu, která bude tvořit masku a nakreslíme v ní obdélník, který bude vysoký minimálně jako je výška vloženého obrázku a široký bude o něco více než je jedno písmeno položky menu. Dvojklikem vybereme nakreslený obdélník včetně jeho okraje, klineme na něj pravým tlačítkem myši a zvolíme „Convert to Symbol“. Nový objekt, který bude sloužit jako část masky, pojmenujeme na panelu vlastností „m1“.
Obr. 5
Opět klikneme pravým tlačítkem myši na objekt obdélníka a zvolíme „Convert to Symbol“. Objekt nazveme „maska“ a stejný název napíšeme na panelu vlastností do pole „Instance Name“.
Obr. 6
Budeme chtít vytvořit z obdélníka několik dalších objektů, které budou sledovat s určitým zpožděním kurzor myši. Tyto objekty budou tvořit masku, která tak bude odkrývat vložený maskovaný obrázek menu. Dále budeme chtít, aby maska reagovala pouze při najetí myši na horní menu a při jeho opuštění, aby se objekty pomalu seřadily za první objekt.
Vzhledem k tomu, že ve vrstvě masky může být pouze jeden objekt, vložili jsme obdélník do dalšího MC, který jsme nazvali maska. Pak už je jedno, kolik objektů máme v MC „maska“, hlavní je, že je jen jeden objekt v maskovací vrstvě a tím je právě MC „maska“.
Obr. 7
Nyní v MC „menu“ vytvoříme další vrstvu a do prvního snímku nové vrstvy umístíme následující AS:
maska.m1.num = 1;
x = 2;
do {
maska.m1.duplicateMovieClip("m"+x, x);
eval("maska.m"+x).num = x;
eval("maska.m"+x)._xscale = 100/x;
x++;
} while (x<10);
Tento script vytvoří 9 kopií objektu „m1“, který máme vložený v objektu „maska“. Chceme, aby si každý objekt uchoval v proměnné své číslo a dále pak chceme, aby byla každá kopie o něco užší než předchozí.
Pokud máme napsáno, budeme potřebovat vložit script pro objekt „m1“. de stačí, že je script jen na tomto objektu, protože každá jeho kopie automaticky „dědí“ jeho vlastnosti i případné scripty.
Otevřeme si tedy objekt „maska“ (dvojklikem na obdélník, pokud jsme v MC „menu“) a klikneme na objekt obdélníka pojmenovaný „m1“. Otevřeme si panel akcí a napíšeme následující kód:
onClipEvent (enterFrame) {
//testování jestli jsme s myší na objektu horního menu
if (this._parent._parent.hitTest(_root._xmouse, _root._ymouse, true)) {
//testování zdali je toto první objekt menu
if (num == 1) {
//pokud ano, určíme rozdíl mezi myší a objektem, vydělíme 3 a
//určíme novou polohu
goto = this._x+this._xmouse;
rozdil = this._xmouse;
this._x = this._x+rozdil/3;
} else {
//pokud se nejedná o první objekt, vyhodnocujeme polohu vzhledem k
//předchozímu objektu
predchozi = num-1;
goto = eval("this._parent.m"+predchozi)._x;
rozdil = goto-this._x;
this._x = this._x+rozdil/3;
}
} else if (num != 1) {
//pokud nejsme s myší na horním menu, necháme dojet
// zbytek objektů masky
predchozi = num-1;
goto = eval("this._parent.m"+predchozi)._x;
rozdil = goto-this._x;
this._x = this._x+rozdil/3;
}
}
Pro konečný efekt masky otevřeme MC „menu“, klikneme pravým tlačítkem myši vrstvu s objektem masky a z nabídky zvolíme „Mask“.
A máme hotovo. V příštím díle si představíme načítání externích dat, abychom nemuseli při každé změně v textu znovu generovat celý swf soubor.
Zdrojový soubor ukázky ke stažení zde, výsledek si můžete prohlédnout zde.
