FLASH rychle a snadno 7.

Aby si na své přišli i tvůrci flashové grafiky, podíváme se dnes do zákulisí podivuhodné tvorby masek ve flashi, ty karnevalové totiž hravě předčí ..

Co jsou masky?

Flashovým pojmem maskování se míní význam skrývání a odkrývání předmětů, lépe řečeno vytvoříme si maskující vrstvu a pod ní maskované vrstvy a tak v nich ovlivňujeme co je a není právě vidět ve výsledném produktu. Tato technika je poměrně nenáročná a oblíbená díky snadnému dosažení efektního grafického pojetí výsledku, jak si ukážeme.

Shape Tweening

Doposud jsme se nezabývali postupem tvorby animací, který dnes budeme používat. Jde o změnu tvarů, tzv. shape tweening. V některém z příštím pokračováních našeho seriálu se podíváme na některé jeho speciality, ale pro dnešek nám bude stačit úplný základ. Vytvořit ho není problém:

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

  1. Vytvoříme klíčový snímek.
  2. Na klíčový snímek vytvoříme úvodní tvar.
  3. Dále na časové ose vytvoříme další klíčový snímek.
  4. Označíme celou výseč snímků mezi 1. a 2. klíčovým snímkem.
  5. Zvolíme Modify -> Frame a navolíme si druh Tweeningu Shape.
  6. Změnou tvaru ve výsledném klíčovém snímku můžeme vidět animování změny tvarů.

Jednoduchá maska

Skládáním masek lze od obyčejného překrývání průzorů vytvořit dynamické masky nebo třeba věrnou simulaci reflektorového světla, my začneme tím nejlehčím příkladem.

Vytvoříme si dvě vrstvy.

  1. Jednu nastavíme pomocí Modify -> Layer na Type Mask (maskovací vrstva), druhou na Type Masked (maskovaná vrstva).
  2. Do maskované vrstvy si vložíme obrázek.
    Klepněte pro větší obrázek
  3. V maskující vrstvě vytvoříme buďto motion tween, nebo shape tween.
  4. Doplníme v maskované vrstvě adekvátní počet snímků dle té maskující.
  5. Zamkneme-li obě vrstvy a spustíme si přehrání maskovaných snímků, uvidíme náš výsledek.

Tweening maskované vrstvy

  1. Vytvoříme si 2 vrstvy, maskovanou a maskující.
  2. Do maskující vrstvy vložíme tvar, nebo tvary, pro průhled viditelné části.
  3. V maskované vrstvě vytvoříme tweening pod tvarem ve vrstvě s maskou, například vložíme do vrstvy movie klip, v němž seskládáme sérii pohlednic za sebe a v ten poté posunujeme a navodíme tak pocit plynulého efektovaného posunovače pohlednic.

Další možností využití masek je třeba fingované hoření zápalné šňůry u bomby, kdy do jedné vrstvy vložíme bombu a poté postupně maskujeme její šňůru, jenž je v maskované vrstvě. Nyní se již podíváme na složitější možnosti maskování.

Maska s měkkými hranami

Aby naše maska měla okraje, které působí gradientně na první pohled a nemusely mít nějaký standardní otřepaný tvar typu kružnice, použijeme tento postup k vytvoření vytrácejících se hran:

  1. Vytvoříme masku a maskovanou vrstvu.
  2. Do maskované vrstvy umístíme obrázek.
  3. Do vrstvy s maskou vložíme maskovací tvar.
  4. Zkopírujeme náš tvar.
  5. Mezi maskovými vrstvami vložíme novou vrstvu.
    Klepněte pro větší obrázek
  6. Zvolíme Edit -> Paste in Place pro vložení tvaru do nové maskové vrstvy.
  7. Kolem tvaru nakreslíme obrys jedním z nástrojů Oval či Rectangle.
  8. Vyplníme barvou pozadí výplň mezi naším obrysem a původním tvarem.
  9. Smažeme původní tvar.
  10. Vybereme celý tvar a navolíme Modify -> Shape -> Soft Fill Edges.
  11. Nastavíme si tloušťku hrany, pozvolnost přechodu s směr aplikace zěmkčení pomocí parametrů Distance, Number of Steps a Directions.
    Klepněte pro větší obrázek
  12. Zamkněte všechny vrstvy a otestujte výsledek.

Několik vrstev s maskou

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

  1. Do první maskované vrstvy umístíme obsah.
  2. Vytvoříme masku první vrstvy.
  3. Obsah první maskované vrstvy zduplikujeme do nové maskované vrstvy.
  4. Vytvoříme masku druhé maskované vrstvy.

Dnes jsme nahlédli do možností tvorby grafických efektů. Pokud bychom například chtěli použít na jeden obrázek 2 masky zaráz, mohli bychom vytvořit masky v rámci movie klipu a pak aplikovat samostatnou masku na tento movie klip na hlavní scéně. Základem u všech těchto procesů ve flash ovšem je kreativita při jejich tvorbě a snaha o všestrannou vyváženost, protože všeho moc škodí a to platí i u masek.

Příští týden se již podíváme na začátek vývoje naší flashové hry, pokud jste tedy tento seriál nečetli od prvních dílů, mohli by vám poté některé znalosti chybět, především práce s movie klipy a jejich strukturování v dokumentu ..

Diskuze (2) Další článek: Kupte si let do vesmíru

Témata článku: Software, Programování, Flash, Play, Directions, Viditelné světlo, Distance, První snímek, Shape, Movie, Movie Edit, Bomb, Scala, Loop, Base, Klíčový snímek, Quality, Začátek vývoje


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

Vy a počítač: Virtuální plochy ve Windows mají smysl, používá je třetina čtenářů
Vladislav Kluska
Jak používáte počítačWindows 10Ankety
Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

** Vývoj COVID-19 v Česku: nakažení, úmrtí, testovaní, hospitalizovaní ** Mapa podle okresů, přehled podle věku, situace v Evropě i ve světě ** Každý den aktualizované grafy a mapy

Marek Lutonský | 172

Marek Lutonský
COVID-19Koronavirus
Kudy proudí doprava? Na mapách můžete sledovat autobusy, vlaky, letadla i lodě

Kudy proudí doprava? Na mapách můžete sledovat autobusy, vlaky, letadla i lodě

Současná situace cestování zrovna dvakrát nepřeje, kvůli covidu můžeme jezdit leda tak prstem po mapě. A nebo můžeme prsty nechat volné a koukat, jak po mapě cestuje někdo jiný. Díky otevřeným datům dopravních či přepravních společností je to hračka.

Lukáš Václavík | 12

Lukáš Václavík
Doprava
Japonská MANA může být 80× výkonnější než sebelepší tranzistorový procesor

Japonská MANA může být 80× výkonnější než sebelepší tranzistorový procesor

** Tranzistory současných počítačů vyzařují při přepínání teplo ** Na Tokijské univerzitě proto vyvíjejí adiabatické procesory ** Využívají supravodivost a jsou 80× úspornější

Jakub Čížek | 48

Jakub Čížek
TranzistoryProcesoryTechnologie
Messenger a Instagram přicházejí v Evropě o funkce. Kvůli nové směrnici o soukromí
Vladislav Kluska
EvropaInstagramFacebook Messenger
26 užitečných rozšíření pro Chrome: Naučte prohlížeč nové věci

26 užitečných rozšíření pro Chrome: Naučte prohlížeč nové věci

** Prohlížeč Chrome obsahuje širokou škálu funkcí, neumí ale všechno ** Jeho schopnosti můžete rozšířit pomocí rozšíření ** Vybrali jsme pro vás zajímavé a užitečné doplňky

Karel Kilián | 47

Karel Kilián
Doplňky do prohlížečeChromeProhlížeče