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

Fotosoutěže
Fotogalerie
Rubriky
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:

Nabídka práce


Webdesign

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

Macromedia Flash tutorial
Macromedia Flash tutorial

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
on (press) {
pozice = 0;
}		 on (press) {
pozice = -251;
}
C D
on (press) {
pozice = -502;
}		 on (press) {
pozice = -753;
}

Otevřeme klip01 a doplníme akce - do prvního snímku zadáme konstantu (konstanta) a přiřadíme ji hodnotu 0.04. Vyjadřuje vlastně zpomalení jednotlivých masek (klipů) před tím, než se poskládá celý obrázek. Do druhého snímku doplníme rozdil, který zjistí rozdíl mezi dříve zadanou pozicí klipu na hlavní scéně (u A je to 0) a horizontálním umístění klipu. Součin rozdílu a konstanty pak použijeme pro stanovení rychlosti. Ke konečnému umístění klipu přičteme ještě rychlost násobenou číslem 2.5 (pokud budeme chtít globálně zvýšit rychlost prohlížení, stačí ho zvýšit, ale nesmíme to přehnat, jinak se nám stane, že se celá maska posune úplně mimo prohlížečku). Druhý snímek pojmenujeme (label) volani. Do třetího snímku doplníme call ("volani"), kterou se provede akce druhého snímku se jmenovkou volani, aniž by klip musel přeskočit do druhého snímku, a doplníme gotoandplay (2). Nezapomeneme klávesou F5 prodloužit vrstvy mask a obrazky. Obdobně budeme postupovat i u ostatních klipů  jen s tím rozdílem, že jim přiřadíme konstanty (0.06; 0.08; 0.1).

klip01
frame1:
konstanta = .04;
frame2:
rozdil = _root.pozice - klip01._x;
rychlost = rozdil*konstanta;
klip01._x = klip01._x + (rychlost*2.5);
frame3:
call ("volani");
gotoAndPlay (2);

Zdrojový soubor si můžete stáhnout tady.

Obsah seriálu (více o seriálu):

Tématické zařazení:

 » Rubriky  » Go verze  

 » Rubriky  » Webdesign  

Poslat článek Diskuse (0) Tisk Přečteno: 2485x

www.grafika.cz/rubriky/webdesign/flash-5-prohlizecka-obrazku-s-maskovanim-129572cz

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Nabídka bazar

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: