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

Další zajímavou funkcí Flashe je možnost použití masky, pro zobrazení vybrané části objektu. V dnešním díle si funkci masky vyzkoušíme na příkladu, ve kterém budeme z rozmazané fotografie odrývat originální obrázek.

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).

Klepněte pro větší obrázek

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“.

Klepněte pro větší obrázek

Obr. 2

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

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

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“.

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

Obr. 6

Plocha by měla vypadat takto:

Klepněte pro větší obrázek

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“.

Klepněte pro větší obrázek

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“.

Klepněte pro větší obrázek

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ě:

Klepněte pro větší obrázek

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“.

Klepněte pro větší obrázek

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:

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

Obr. 13

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

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

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“.

Klepněte pro větší obrázek

Obr. 16

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

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

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“.

Klepněte pro větší obrázek

Obr. 19

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

Klepněte pro větší obrázek

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á.

Diskuze (6) Další článek: Opera 8 způsobila větší rozruch než Firefox

Témata článku: Software, Programování, Flash, Zajímavé číslo, Zajímavý efekt, Toulka, Snímek, Klíčový snímek, Convert, Horní strana, Import, Pravé tlačítko, Stage, Objekt, Horní vrstva, Časová osa, Reálný náhled, Jednoduchá pozice, Díl, Druhá vrstva


Určitě si přečtěte

Velký den pro Apple: Uvedl tři nové Macy s vlastním procesorem M1
Lukáš Václavík
PočítačeApple
Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Google stále fotí celý svět do své služby Street View. A novodobou zábavou je hledat v mapách Googlu vtipné záběry. Podívejte se na výběr nejlepších!

redakce | 4

redakce
Mapy GoogleStreet View
Elon Musk podpořil Signal jako náhradu WhatsAppu. Aplikaci okamžitě zavalili uživatelé
Markéta Mikešová
WhatsAppElon MuskFacebook
Apple Macbook Air M1: testujeme výkon, výdrž, a hlavně kompatibilitu aplikací [průběžně aktualizováno]

Apple Macbook Air M1: testujeme výkon, výdrž, a hlavně kompatibilitu aplikací [průběžně aktualizováno]

** Testujeme Apple Macbook Air s procesorem M1 ** Zajímá nás nejen výkon, ale zejména kompatibilita aplikací ** Článek je průběžně doplňován na základě vašich dotazů

Jiří Kuruc | 205

Jiří Kuruc
Apple
Micro:bit V2: Tuto destičku plnou čipů dokáže naprogramovat i vaše babička

Micro:bit V2: Tuto destičku plnou čipů dokáže naprogramovat i vaše babička

** Chcete se teď hned naučit programovat čipy? ** Nechcete nic instalovat a číst zdlouhavé manuály? ** Naprogramujeme si Micro:bit, který zahraje Tichou noc

Jakub Čížek | 33

Jakub Čížek
Pojďme programovat elektronikuProgramování pro děti
Google chystá funkci, která z chytrého Gmailu udělá hloupý Gmail
Lukáš Václavík
SoukromíGmailGoogle
Dostali jste nový počítač? Tohle s ním udělejte, než ho začnete používat

Dostali jste nový počítač? Tohle s ním udělejte, než ho začnete používat

** Každý nový počítač si zaslouží počáteční péči ** Odinstalujte bloatware a nezapomeňte na vhodné nastavení ** Poradíme, jak se o počítač s Windows 10 postarat

David Polesný, Stanislav Janů | 70

David PolesnýStanislav Janů
PočítačeNotebooky

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5