FLASH 5 - prohlížečka obrázků s maskováním - Grafika.cz - vše o počítačové grafice

Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



Go verze

FLASH 5 - prohlížečka obrázků s maskováním

Macromedia Flash tutorial

10. července 2001, 00.00 | Už po několikáté jsem se na Internetu setkal se zajímavými efekty při prohlížení obrázků, které mohou příjemně oživit vaši flash prezentaci, proto se vám je pokusím v tutorialu přiblížit.

Už po několikáté jsem se na Internetu setkal se zajímavými efekty při prohlížení obrázků, které mohou příjemně oživit vaši flash prezentaci, proto se vám je pokusím v tutorialu přiblížit.

Celý efekt je vlastně založen na maskování, ale ještě než se pustíme do Flashe, připravíme si několik obrázků stejné velikosti. Já jsem si připravil čtyři o velikosti 250 x 116 px ve formátu JPEG, které jsem optimalizoval pro web (Jpeg Optimalizer, Photoshop) tak, aby jejich použitím nevzrostla velikost výsledného SWF souboru. Velikost jeviště (CTRL M) přizpůsobíme velikosti obrázků a přitom nezapomeneme připočíst pár pixelů (např. 280 x 170 px), abychom mohli také umístit ovládací prvky. Nastavíme 12 snímků za sekundu (Frame Rate) a pozadí (Background Color) dle libosti.

Pokud jsme správně pojmenovali obrázky, můžeme je automaticky všechny naimportovat do Flashe (File - Import), zkonvertuje je na grafické symboly (F8), vymažeme framy obsahující tyto symboly z hlavní scény, kam jsme je předtím importovali, protože je budeme používat později - máme je uložené v knihovně (CTRL L). Vytvoříme nový movie clip (CTRL F8) obrazky, do něho poskládáme vodorovně všechny čtyři grafické symboly tak, aby střed klipu odpovídal středu nově takto vzniklého pásma obrázků. Vytvoříme další klip s názvem klip01, přidáme do něho další dvě vrstvy (Insert - Layer), pro přehlednost je pojmenujeme - action pro akce, druhou mask a třetí obrazky. Vrstvu pro akce zatím přeskočíme, přetáhneme z knihovny klip obrazky do příslušné vrstvy, umístíme ho na střed a přiřadíme mu instanci podle názvu klipu klip01. Nyní potřebujeme masku, proto vytvoříme objekt (můžeme do nového klipu mask) velikosti jednoho obrázku (250 x 116 px), který budeme používat na maskování. To však není vše, tento objekt rozdělíme na čtyři díly tak, abychom jejich překrytím dostali původní celistvý objekt.


První masku (tedy první díl) označíme (každé číslo znázorňuje určitý subdíl daného dílu, pro přehlednost odlišeno ještě barvou), vložíme do vrstvy mask movie clipu klip01 a umístíme nad první obrázek a vytvoříme masku (kliknutí pravým tlačítkem myši nad vrstvou mask a vybereme z menu mask). Uzamčením vrstvy mask a obrazky uvidíme výsledek maskování. Vytvoříme ještě další klipy - klip02, klip03 a klip04 - postupným duplikováním v knihovně a postupně budeme také nahrazovat masky v každém klipu a změníme změníme také instanci.

Přesuneme se na hlavní scénu a do jedné vrstvy doprostřed scény přetáhneme všechny klipy, poskládáme je na sebe tak, aby se překrývaly. Kolem obrázků vytvoříme nějaký obrys nebo plochu, aby to vypadalo jako okno na prohlížení a pak čtyři tlačítka. Přiřadíme každému tlačítku akci, kdy na stisknutí tlačítka (on press) nadefinujeme pozice (pomocí setvariable) podle toho, který obrázek se nám má zobrazit, vycházíme z jejich šířky.

A B