Lupa ve Flashi pomocí Masky

Zvětšovací sklo nebo lupa je zajímavým a jednoduchým efektem. FLASH animaci však dokáže velmi výrazně oživit a uživateli tak dodá mnohem větší pocit interaktivity.

Základem pro tvorbu lupy bude funkce Mask (Modify | Layer | Mask). Tato funkce totiž umožňuje zobrazit z určitého objektu (např. obrázku) pouze jeho část. Umístěte přes sebe dva stejné obrázky, větší a menší.

Větší obrázek „zamaskujte“. Zobrazí se pak pouze jeho část viditelmá přes objekt tvořící lupu (přesný postup vysvětlím později).

Aby nebyl zobrazovaný výřez statický, bude třeba větší obrázek ve výřezu pomocí skriptu posunovat zároveň s pohybem myši. Tím dosáhnete toho, že bude normální obrázek sladěný s tím „zvětšeným“. To znamená, že obraz v lupě bude odpovídat obrazu „pod lupou“.

Pro usnadnění vám ukáži, jak jednoduše měnit velikost zvětšení lupy. Nejprve je třeba vložit do animace obrázek, se kterým budete pracovat (tzn. na který budete lupu uplatňovat).

Vytvořte nový symbol (Insert | New symbol), pojmenujte ho např. picture a vložte do něj příslušný obrázek z externího souboru (File | Import).
Vraťte se na hlavní pracovní plochu a otevřete Knihovnu (Window | Library). Vytvořený symbol picture z ní pomocí myši „přetáhněte“ na pracovní plochu jako instanci a pojmenujte ji např. obrazek (Modify | Instance | Name). Tuto instanci uveďte do takové velikosti, jakou má mít původní (tzn. nezvětšený) obrázek.

Dalším krokem bude vytvoření lupy samotné. Opět vytvořte nový symbol (Insert | New Symbol) a pojmenujte ho např. lupa. Do symbolu umístěte čtyři vrstvy (Insert | Layer) třeba tak, jak v následujícím příkladu:

Do nejspodnější vrstvy (je označena jako spodni) umístěte instanci symbolu picture (tedy zpracovávaného obrázku) a zvětšete jej do takové velikosti, v jaké chcete vidět zvětšený obrázek. Instanci pojmenujte (Modify | Instance | Name) např. velkyobrazek.

Do druhé vrstvy (označena jako maska) nakreslete zespoda objekt ve tvaru lupy, v našem případě kruh (nezáleží na barvě, ale na tvaru). Objekt umístěte do středu symbolu, aby později nedošlo k chybnému zobrazování obrázku v lupě. Nyní z vrstvy udělejte Masku (Modify | Layer | Mask), aby z obrázku ve spodní vrstvě byla vidět pouze část zachycená v kruhu.

Do druhé vrstvy shora (označena jako lupa) můžete nakreslit vzhled lupy, tedy např. orámování, odlesky, stíny atd. Tyto efekty mohou lupu zvýraznit a dodat jí dojem plasticity. Jednu z možností můžete vidět na následujícím obrázku.

Do nejvyšší vrstvy (označena jako kod) budete vkládat kód Actionscriptu. Do prvního snímku animace vložte (Window | Actions) následující kód:

Abyste si usnadnili ovládání lupy, přidejte ještě automatickou změnu zvětšení podle nastaveného měřítka. K předchozímu kódu tedy připojte ještě následující dva řádky:

Velký obrázek, který jste umísťovali do (výše zmíněné) nejspodnější vrstvy, pak změní velikost podle proměnné zvetseni. K jejímu nastavení se dostanu později.

Do dalšího snímku nejvyšší vrstvy umístěte kód (Window | Actions), který bude zajišťovat neustálý běh animace:

Animace musí totiž stále probíhat, aby docházelo k aktualizaci pozice zvětšeného obrázku. Do zbylých tří vrstev nezapomeňte vložit druhé snímky (Insert | Frame), aby při běhu animace nedocházelo k „přeblikávání“ prvního a druhého snímku (druhý snímek by v tom případě neobsahoval nic, narozdíl od prvního).

Tím je tvorba symbolu lupa dokončena. Právě vytvořený symbol je ještě třeba začlenit do celé animace. Otevřete si Knihovnu (Window | Library) a symbol picture z ní pomocí myši „přetáhněte“ na pracovní plochu jako instanci a pojmenujte ji (Modify | Instance | Name) např. lupa.

Nyní ještě několik úprav k celé animaci. Do prvního snímku celé animace vložte (Window | Actions) následující kód:

Výše uvedený kód mj. skryje kurzor myši (tuto funkci však můžete dle vlastního uvážení vynechat). Abyste mohli měnit velikost zvětšení (implicitně nastaveno dvojnásobné), vytvořte si pro ni editační pole. Na plochu umístěte nápis „Zvětšení:“ (Window | Tools | Text tool). Stejným postupem vytvoříte další textové pole, jehož vlastnosti (Text | Options…) poté změňte: Na záložce Text options zvolte z rozbalovací nabídky položku Input Text (tedy text určený pro editaci), do pole Variable zadejte název proměnné, tedy zvetseni a do pole Max Chars (maximální počet znaků) zadejte 3. V nabídce Embed Fonts zaškrtněte tlačítka označená 123 (povoleny pouze číslice) a ()! (povolena desetinná čísla). Požadované nastavení můžete vidět na následujícím obrázku:

Díky editačnímu poli, které jste právě vytvořili, budete moci pomocí klávesnice zadávat velikost požadovaného zvětšení lupy. Tato velikost určuje poměr mezi velikostí skutečného a zvětšeného obrazu. Pokud zadáte nezáporné číslo menší než 1, dojde ke zmenšení, v opačném případě dojde ke zvětšení v daném poměru. Díky předchozímu nastavení je samozřejmě možné zadávat i desetinná čísla.
Tím jste skončili vývoj lupy a nyní již stačí animaci spustit (Control | Test Movie).

Při tvorbě nepoužívejte zbytečně velké bitmapy. Měli byste totiž počítat s tím, že bude animaci spouštět i uživatel se slabším počítačem. Některé Flash animace jsou poměrně náročné na výpočetní výkon, takže může být pohyb lupy „trhaný“, což působí velmi rušivě.

Kvalitu obrázku můžete ovlivnit i nastavením míry komprese. V Knihovně (Window | Library) můžete v nabídce Properties… (pravé tlačítko myši u příslušné bitmapy) nastavit JPEG kvalitu a možnost vyhlazování obrázku (Allow smoothing).

Ukázku lupy si můžete prohlédnout zde.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.