Ondřej Brichta 23.5.2005
V dnešním díle se zaměříme na některé metody objektu MovieClip. Naučíme se vytvářet kopie MovieClipů, budeme dynamicky měnit jejich vlastnosti a nakonec si vyzkoušíme zajímavý efekt, kdy vytvořené kopie sledují pohyb myši.
Abychom mohli testovat nové metody, musíme si na hlavní scéně vytvořit a pojmenovat jeden MC a vytvořit tlačítko. Pokud se nechceme s tlačítkem dělat, můžeme využít již vytvořené. Knihovnu těchto tlačítek otevřeme zvolením v hlavním menu: „Window - Other Panels - Common Libraries - Buttons“.
Obr. 1
V knihovně máme několik skupin, již vytvořených tlačítek, která se hodí pro rychlé testování nových funkcí.
Vložíme tedy některý symbol tlačítka na scénu. Zvolíme nástroj pro kreslení oválů „Oval Tool“
Obr. 2
Nakreslíme kruh, vybereme jej a převedeme na objekt MC (kliknutím pravého tlačítka myši a zvolením „Convert to Symbol“). Na panelu vlastností „Properties“ pojmenujeme instanci objektu kruhu jako „kruh“.
Obr. 3
Máme připravenou scénu a můžeme se pustit do metod pro objekt MovieClipu.
Zvolíme tlačítko, otevřeme panel akcí a napíšeme do něj následující script:
on (release) {
kruh.duplicateMovieClip("kruh2", 10);
}
Script říká, že při události, uvolnění myši nad tímto tlačítkem (release) se provede příkaz.
Tento příkaz využívá metodu pro vytvoření kopie MC.
Zde použitá metoda duplicateMovieClip() má tři parametry. Prvním je název objektu, ze kterého se budou tvořit kopie, v našem případě to je objekt „kruh“. Druhým parametrem je nový název vytvořené kopie, my jsme ho nazvali „kruh2“. Posledním parametrem je číslo. To určuje, do jaké úrovně (level) se má nový klip umístit.
V jedné úrovni může být maximálně jeden MC, pokud do úrovně, kde je již MC, chcete vložit další, bude původní klip vymazán novým.
Úrovně jsou jakoby další vrstvy, do kterých se automaticky vkládají veškeré objekty, umístěné na scénu. Platí zde, že objekty ve vyšších úrovních překrývají objekty v úrovních nižších.
Nyní otestujeme celou scénu pomocí CTRL+Enter. V exportovaném klipu klikneme na tlačítko. Měla by se nám vytvořit kopie klipu „kruh“. Ale jak to zjistíme? A proč není vidět?
Nejprve otestujeme, jestli se kopie vytvořila. V okně přehrávače zvolíme v horním menu: „Debug List Variables“. Tímto se nám objeví okno, do kterého se vypisují veškeré proměnné a objekty aktuálního klipu.
Obr. 4
Výstup v okně může vypadat následovně:
Obr. 5
Pokud máme pojmenované tlačítko, objeví se zde jeho název, jinak jsou nepojmenované objekty zastoupeny názvem „instance“ + číslo.
Pokud máme vše v pořádku, vidíme že na scéně je MC „kruh“ i MC „kruh2“.
Proč ale není kruh2 vidět? Je to z toho důvodu, duplikát dědí veškeré vlastnosti klipu ze kterého jsme ho vytvořili. V našem případě vytvořený MC „kruh2“ zdědil po MC „kruh“ rozměry, polohu a samozřejmě i kresbu kruhu.
Pokud budeme chtít vytvořit duplikát a umístit jej na jiné místo, než je původní klip, doplníme akci na tlačítku do následující podoby:
on (release) {
kruh.duplicateMovieClip("kruh2", 10);
kruh2._x = kruh._x + kruh._width*1.5;
}
Přidali jsme část, která říká, do jaké x-ové souřadnice se má duplikovaný MC umístit. Použili jsme vlastnost MC _x, která určuje x-ovou souřadnici klipu na scéně a vlastnost _width, která zjistí šířku příslušného MC.
V našem případě tedy chceme, aby se nově vytvořený klip „kruh2“ umístil vedle původního MC ve vzdálenosti, která odpovídá polovině šířky tohoto klipu.
Abychom se neuklikali k smrti, když budeme chtít vytvořit více kopií jednoho MC, použijeme jeden z možných cyklů. Kód na tlačítku upravíme následovně:
on (release) {
i = 1;
pocet = 3;
do {
kruh.duplicateMovieClip("kruh"+i, 10+i);
eval("kruh"+i)._x = kruh._x+kruh._width*1.5*i;
i++;
} while (i<=pocet);
}
Použili jsme cyklus „DO - WHILE“, tedy něco ve smyslu „dělej něco, dokud platí podmínka“. Tento cyklus má tu vlastnost, že se podmínka testuje až nakonec, takže i když je splněna hned na začátku, provede se minimálně jedno kolo cyklu.
V našem případě v každém kole cyklu vytvoříme jednu kopii klipu „kruh“ a přiřadíme jí automaticky název podle aktuální hodnoty proměnné „i“. Funkce „eval“ nám vrátí hodnotu řetězce, který jsme zadali. Pokud bychom totiž napsali pouze:
„kruh"+i+“._x“
Flash by zřetězil proměnné a text a nepoznal by, že chceme získat vlastnost „_x“. Proto používáme v těchto případech funkci „eval()“.
Proměnná „i“ je v cyklu použita jako pomocná, která se s každým kolem zvětšuje o jedna (i++) a vždy se na konci provede test podmínky, jestli je proměnná „i“ pořád menší, nebo rovna proměnné „pocet“, která v tomto případě reprezentuje počet vytvořených kopií. V příkazech cyklu „DO - WHILE“ je nutné pečlivě překontrolovat vyhodnocování proměnné. Snadno se nám zde může stát, že vytvoříme zacyklenou funkci, která způsobí extrémní zatížení procesoru a následný kolaps celého swf souboru.
Pokud se nám povede některý příkaz zacyklit, poznáme to velmi brzo. Při spuštění swf souboru všechno vytuhne, zatížení procesoru stoupne na 100% a pokud nebudeme mít opravdu velkou smůlu, mělo by se po chvíli objevit okno:
Obr. 6
To informuje, že se některý příkaz zacyklil a dává nám možnost přehrávání zastavit.
Když jsme si vysvětlili funkci příkazu „eval()“, proč jej tedy nevyužít k dalším změnám parametrů kopií? Kód na tlačítku upravíme takto:
on (release) {
i = 1;
pocet = 4;
step = 100/(pocet+1);
do {
kruh.duplicateMovieClip("kruh"+i, 10-i);
eval("kruh"+i).num = i;
eval("kruh"+i)._x = kruh._x+kruh._width*1.5*i;
eval("kruh"+i)._xscale = 100-i*step;
eval("kruh"+i)._yscale = 100-i*step;
eval("kruh"+i)._alpha = 100-i*step;
i++;
} while (i<=pocet);
kruh.swapDepths(10+i);
}
Přibyla nám proměnná „step“, která určuje o kolik se jednotlivé vlastnosti změní v závislosti na počtu objektů. V našem případě měníme velikost a průhlednost kopií. Další proměnnou je „num“, která je přiřazena každému klipu a má pokaždé jinou hodnotu. Jedná se o jakési počítadlo, které říká, jaké pořadí má příslušný klip. Dále se všimneme, že v příkazu
kruh.duplicateMovieClip("kruh"+i, 10-i);
je najednou místo 10+i uvedeno 10-i. Proč? Protože si vyzkoušíme pohybovat všemi kopiemi za myší a z vizuálního hlediska je hezčí, když menší a průhlednější objekty jsou pod většími a méně průhlednými objekty.
Poslední příkaz:
kruh.swapDepths(10+i);
patří k dalším metodám MC. tato nám umožňuje prohodit klip „kruh“ s klipem, který je v úrovni 10+i. Pokud v této úrovni není žádný klip, dojde pouze k umístění klipu do této úrovně.
Nyní vybereme klip „kruh“ a na panelu akcí mu přiřadíme tento script:
on (press) {
if (num == undefined) {
this.startDrag();
}
}
on (release) {
if (num == undefined) {
stopDrag();
}
}
onClipEvent (enterFrame) {
rychlost = 4;
if (num == 1) {
rozdilx = this._parent.kruh._x-this._x;
rozdily = this._parent.kruh._y-this._y;
this._x = this._x+rozdilx/rychlost;
this._y = this._y+rozdily/rychlost;
} else {
cisloPred = num-1;
rozdilx = eval("this._parent.kruh"+cisloPred)._x-this._x;
rozdily = eval("this._parent.kruh"+cisloPred)._y-this._y;
this._x = this._x+rozdilx/rychlost;
this._y = this._y+rozdily/rychlost;
}
}
Protože kopie dědí vlastnosti a i scripty původních klipů, stačí, když je napíšeme do původního klipu a v kopiích se příkazy objeví automaticky.
Pro efekt tažení kruhů za myší potřebujeme, abychom po kliknutí na první kruh začali objekt přetahovat. To je zaručeno testováním při události, kdy klikneme na MC. Objekt „kruh“ nemá žádnu proměnnou „num“, proto testujeme její hodnotu, pokud není definována, víme, že se jedná o první klip a začneme jej přetahovat. Jakmile myš pustíme, chceme přetahování ukončit, což se provede po splnění další události (release).
Následuje script, který zajistí automatické přetahování kopií. Protože se ve scriptu odkazujeme na číslo předchozí kopie, musíme pamatovat na první kopii, která nemá předchůdce. Proto ihned na začátku otestujeme hodnotu „num“ a pokud je rovna 1 (její velikost jsme nastavili při duplikování), víme že se jedná o první kopii a tak její pozici budeme počítat vzhledem k hlavnímu klipu „kruh“.
Pokud se nejedná o první kopii (pokračování podmínky - ELSE), počítáme polohu podle předchozí kopie. Pro zjištění polohy předchází kopie opět musíme použít funkci „eval()“, pomocí které se dostaneme k požadované vlastnosti.
A nakonec proměnná rychlost určuje, jak rychle se budou jednotlivé kopie přibližovat. Čím vyšší číslo, tím pomaleji se přibližují.
Zdrojový soubor ukázky můžete stáhnout zde.
InstantStorm je freewarová utilitka, pomocí které lze vytvořit z flashového souboru spořič obrazovky. Pokud si chceme program nainstalovat, můžeme si jej stáhnout zde.
Dostupný je ve dvou jazycích, v českém a anglickém, přičemž v anglickém jazyce je dostupná i nápověda k programu.
Po restartu počítače, který je požadován, spustíme program, který nás uvítá úvodním oknem, ze kterého máme na výběr ze tří možností.
Můžeme začít novým projektem, načíst uložený projekt a nebo spořič vytvořit pomocí průvodce.
Pokud se svěříme do služeb průvodce, budou na nás čekat čtyři kroky, než vytvoříme samotný spořič.
V prvním kroku zvolíme název spořiče, v druhém kroku vybereme zdrojový flashový soubor, v třetím kroku můžeme určit obrázek pozadí informačního okna spořiče a v posledním kroku již jen ukončíme průvodce a můžeme vygenerovat instalátor našeho spořiče.
Pokud zvolíme tvorbu bez průvodce, čeká na nás pět záložek, které přehledně oddělují jednotlivé kroky tvorby spořiče.
V záložce „Nastavení“ máme možnost doplnit text a pozadí informačního okna spořiče. Záložka „Instalátor“ umožňuje otevřít editor instalátoru, ve kterém lze změnit veškeré texty, které se objevují během procesu instalace spořiče.
V záložce „Soubory“ je možné přibalit kdo instalátoru případné další soubory, které jsou použity ve flashové animaci.
Poslední záložka „Publikování“ slouží k vytvoření samotného instalátoru spořiče.
Výhodu tohoto programu je jeho jednoduchost. Neoplývá sice mnoha možnostmi nastavení, ale ty, které podporuje, jsou naprosto dostačující a užitečné pro nenáročnou tvorbu spořičů. Jediné, co by se dalo vytknout, je absence informace o úspěšném vytvoření instalátoru, na konci procesu tvorby spořiče.
Pokud hledáte řešení pro tvorbu spořiče z flashových animací, které nezabere ani pět minut, navštivte http://www.czokl.com/ a stáhněte si InstantStorm.
