Začínáme s Flash MX 2004 - 7. díl - maskování objektů

Maskování

Princip funkce maskování je celkem jednoduchý. Vytvoří se dvě vrstvy, jedna vrstva je vrstvou masky a druhá vrstva je vrstvou maskovanou. Objekty, umístěné ve vrstvě masky určují, která část z maskované vrstvy bude viditelná.

Do vrstvy masky lze umístit i MC, které v sobě obsahují animaci, nebo přímo ve vrstvě vytvořit animaci pomocí Motion Tweenu. Lze tak vytvořit velmi zajímavý maskovací efekt.

Dnes si ukážeme jak udělat jednoduchou dynamickou masku. Bude se jednat o objekt, který se bude pohybovat po rozmazané fotografii a zobrazovat pod sebou originální ostrý obrázek.

Import fotografií

Nejprve importujeme na scénu rozmazaný obrázek, který si můžete stáhnout zde. Zvolíme „File - Import - Import to Stage“ a vybereme soubor obrázku (Obr. 1).

Obr. 1

Pro větší přehlednost vytvoříme z importovaného obrázku objekt. Klikneme pravým tlačítkem myši na obrázek a zvolíme „Convert to Symbol“.

Obr. 2

Pojmenujeme nový MC například „rozmazanefoto“ (Obr. 3). Pomocí panelu „Align“ zarovnáme objekt na střed plochy.

Obr. 3

Na panelu hlavní časové osy klikneme v levém dolním rohu na tlačítko „Insert Layer“ (Obr. 4) a vložíme další vrstvu.

Obr. 4

Do vrstvy importujeme druhý obrázek „File - Import - Import to Stage“, klikneme na něj pravým tlačítkem myši a ze zobrazeného menu zvolíme „Convert to Symbol“. Vytvoříme tak z obrázku další MC, který pojmenujeme „puvodnifoto“.

Obr. 5

Vytvoření vrstvy masky

Máme vytvořené dvě vrstvy. Objekt ve spodní vrstvě není vidět, protože jej zakrývá obrázek vrstvy vyšší.

Opět, pomocí tlačítka „Insert Layer“ na panelu časové osy, vytvoříme další třetí vrstvu. Zvolíme nástroj pro kreslení čtyřúhelníků „Rectangle Tool“ (Obr. 6) a nakreslíme na výšku obdélník, který je o něco vyšší než vložené obrázky.

Obr. 6

Plocha by měla vypadat takto:

Obr. 7

Dvojklikem na nakreslený obdélník jej vybereme a pravým tlačítkem myši zobrazíme menu, ze kterého zvolíme „Convert to Symbol“.

Obr. 8

Z obdélníku vytvoříme MC a pojmenujeme jej „obdelnik“. Z nakresleného obdélníku jsme museli vytvořit MC, protože budeme chtít animovat jeho pohyb pomocí Motion Tweenu.

Klíčové snímky vrstvy masky

Pro animaci je nutné vytvořit v horní vrstvě klíčové snímky, které budou určovat mezní umístění obdélníku při pohybu. Klikneme tedy pravým tlačítkem myši na snímek číslo 15 vrchní vrstvy a z menu zvolíme „Insert Keyframe“.

Obr. 9

Stejným způsobem vytvoříme klíčový snímek ze snímku číslo 30 horní vrstvy. Horní vrstva by měla vypadat následovně:

Obr. 10

Úprava spodních vrstev

Všimneme si, že spodní vrstvy mají obsazený pouze první, klíčový snímek. My ale chceme, aby byly obrázky viditelné po celo dobu pohybu obdélníku vrchní vrstvy. Musíme tedy „prodloužit viditelnost“ obrázků v prvních klíčových snímcích až do snímku 30 příslušných vrstev.

Klikneme pravým tlačítkem myši na 30. snímek prostřední vrstvy a z menu zvolíme „Insert Frame“.

Obr. 11

Určili jsme, že objekt, umístěný v klíčovém snímku 1 dané vrstvy,je viditelný až do snímku číslo 30. Prodloužení viditelnosti klíčového snímku provedeme stejně i u spodní vrstvy. Časová osa by měla vypadat takto:

Obr. 12

Animace vrstvy masky

Nyní klikneme na první snímek vrchní vrstvy a ve spodní části plochy otevřeme panel vlastností snímku „Properties“. Zde zvolíme „Motion - Tween“. Stejně postupujeme i ve snímku 15.

Obr. 13

Určili jsme, že se objekt vrchní vrstvy bude měnit ( v našem případě pohybovat) pomocí Motion Tweenu.

Obr. 14

Aby se ale pohyboval, musíme jej v některém z klíčových snímků umístit na druhou stranu od vložených obrázků. Bude se jednat o umístění v klíčovém snímku 15. Snímek 1 a 30 tak určuje výchozí pozici objektu obdélníku, ze/do které se pohybuje od umístění ve snímku 15.

Klikneme na snímek 15, vrchní vrstvy, vybereme objekt obdélníka a přesuneme jej napravo od obrázku.

Obr. 15

Můžeme si vyzkoušet (stisknutím klávesy „Enter“) , že se objekt obdélníku opravdu pohybuje z jedné strany na druhou a zpět.

Vytvoření masky

Masku chceme vytvořit z horní vrstvy, ve které se pohybuje objekt obdélníku. Klikneme tedy pravým tlačítkem myši na horní vrstvu a z menu zvolíme „Mask“.

Obr. 16

Vytvořili jsme tak vrstvu masky a zároveň maskovanou vrstvu.

Obr. 17

Všimneme si, že vedle názvu vrstvy se objevily i symboly zámků. Ty značí, že je vrstva uzamčená a že v ní nelze manipulovat s objekty. Kliknutím na symbol zámku se toto omezení zruší a lze opět objekty libovolně měnit.

Pokud ovšem zrušíme uzamčení vrstvy masky a nebo vrstvy pod maskou, neobjeví se nám výsledný maskovací efekt přímo na ploše. Ovšem na výslednou funkci masky to nemá vliv, pouze se tak připravíme o reálný náhled maskování, v exportovaném swf souboru maska bude fungovat normálně.

Úprava délky animace

Zvolíme z hlavního menu „Control - Test Movie“ a prohlédneme si výsledný efekt. Animace je zajímavá, ale obdélník se pohybuje příliš rychle, bylo by lepší jej více zpomalit. Vrátíme se tedy do hlavní scény a upravíme trvání animace. Vybereme 30. klíčový snímek a tažením myší jej umístíme třeba až do pozice 80.

Obr. 18

V tomto případě se uzamčení vrstvy neprojeví, manipulace se snímky je stále možná.

Stejně přesuneme 15. snímek do pozice 40. Nyní nám ale zůstaly objekty ve spodních dvou vrstvách viditelné jen do snímků 30, zatímco animace pokračuje až do 80. snímku. Klikneme tedy pravým tlačítkem myši na snímek 80 prostřední, maskované vrstvy, a zvolíme z menu „Insert Frame“.

Obr. 19

Stejně postupujeme i u spodní vrstvy. Časová osa by měla vypadat následovně:

Obr. 20

Pokud nyní vyzkoušíme animaci, zjistíme, že se obdélník pohybuje pomaleji a efekt maskování je tak mnohem příjemnější.

Zdrojový soubor ke stažení zde.

Stručná animace postupu ve Flashi ke stažení zde.

Ještě jedna poznámka na konec. Pokud při svých toulkách internetem (nebo někde jinde) najdete zajímavou animaci, kterou byste rádi vyzkoušeli vytvořit a myslíte si, že by byla zajímavá i pro ostatní, klidně mi napište, nebo se můžete zmínit v této diskuzi. Budeme rádi, pokud nám dáte vědět, která témata jsou pro vás zajímavá.