Efekt á la Matrix - Grafika.cz - vše o počítačové grafice

Macromedia Flash tutorial

Macromedia Flash tutorial

28. června 2001, 00.00 | V dalším díle našeho miniseriálu si ukážeme tvorbu efektu, který jste mohli vidět ve filmu Matrix.

Než jsem začal psát tento tutorial, raději jsem se podíval, jak vlastně matrix vypadá. Ve filmu narazíte na několik různých verzí. Já jsem se pokusil zpracovat dvě z nich. Jedna je použitelná v praxi, ta druhá, která je ve filmu vidět na obrazovce častěji, použitelná není (je příliš náročná na výpočetní výkon), o této druhé nebudu tedy podrobně psát, ale dávám ke stažení její zdrojový soubor alaMatrixStatic.fla.

Soubor je vytvořený v rozlišení 400 x 200 pixelů, a když si jej otestujete v tomto rozlišení, zjistíte, že se prakticky nehýbe. Každý sloupec má jej jeden skript, prohlédněte si jej a zjistíte, proč se to nehýbe. Na každém snímku se musí nastavit hodnota pozice pro první znak, potom zkopírovat celý sloupec hodnot pozic o jednu pozici výše, pak zkontrolovat hodnoty všech proměnných ve sloupci…

Nyní k verzi, která je sice také náročná na výpočetní výkon, ale je použitelná (ne pro fullscreen, ale pro menší rozlišení). Nejde o přesnou kopii matrixe, ale o napodobeninu jedné z filmových verzí, která je optimalizovaná na rychlost.

Jak vidíte, celý efekt je založen na "padajících" sloupcích, které se "pohybují ve třech rovinách osy z". Efektu hloubky je dosaženo velice jednoduše tím, že u "zadních" sloupců je zpomalený pohyb a jejich odstín je ztmavený. Soubor je generovaný v rozlišení 600 x 300, Low quality.

Základem efektu padajícího sloupce je tento algoritmus:

1. vezmi MC, který obsahuje jeden znak, a zvětšuj jeho y pozici (tím se bude pohybovat od shora dolů)
2. kontroluj pozici tohoto MC, pokud se dostane pod hranici obrazovky, nastav jeho y souřadnici na výchozí (tak se MC po vyjetí z obrazovky vrátí zpět nahoru)
3. nyní si udělej sloupec z takovýchto MC (to vytvoří výsledný efekt)

Tím by ovšem nebyl efekt postačující. Aby byla iluze padání intenzivnější, je třeba nadefinovat "mezery". I zde je úvaha jednoduchá: prostě vždycky u několika po sobě jdoucích MC nastavím jejich neviditelnost.

Pokud se podíváte na mnou vytvořený efekt ještě blíž, uvidíte, že aby byl vjem pohybu a změny ještě intenzivnější, znaky ve sloupci se náhodně mění. I zde je úvaha jednoduchá: MC, který se jeví jako jeden padající znak, ve skutečnosti obsahuje více framů, na každém z nich je jiný znak. Náhodným výběrem je vybrán náhodný MC a u něj je nastavený náhodný frame.

Jak vidíte, principiálně jde skutečně o jednoduchou záležitost. Skriptů je však ve skutečnosti o trochu víc, ale jistě to není tak strašné :o)).

Takže se pustíme do výroby á la matrix efektu. Zde je zdrojový soubor, ve kterém si můžete vše překontrolovat v případě jakéhokoliv problému: alaMatrix.fla.

Vytvořte si nový soubor (já jsem použil 400 x 200 bodů, černé pozadí). Na první frame napište skript:

spodniHranice = 205

Spodní hranice bude o něco málo větší než spodní okraj Scény. V mém případě při výšce Scény 200 jsem nastavil 205.

Nyní si vytvořte první MC, který pojmenujte "znak", bude obsahovat znakovou sadu efektu. Udělejte si statické textové okno, napište do něj jeden znak a vytvořte z něj MC. Já jsem použil freewareový font Aurebesh (jde o nějaký strartrekistický font), můžete si ho stáhnout zde: aurebesh.ttf.

Nyní si nově vytvořený MC otevřete a jako první věc udělejte toto: označte textové okno, na paletce Align zvolte To Stage a kliknutím na volbu "zarovnat nahoru" textové okno zarovnejte tak, aby horní hranice textového okna byla na nulové souřadnici. Je to velmi důležité pro pozdější výpočty polohy MC.

Teď si vytvořte další framy s dalšími znaky (pomocí Insert Keyframe se vám vytvoří nový frame se stejným znakem, ten přepište jiným a tak pořád dokola, dokud vás to nepřestane bavit). V mém souboru má tento MC 27 framů, použil jsem všechna malá písmena z fontu.

Na první frame napište skript tohoto MC

stop ()

který při prvním načtení všech takových MC zabrání nekontrolovatelnému spuštění. V tomto okamžiku máte hotový základní MC, který se jmenuje "znak".

Z těchto znaků si vytvoříme sloupec. První MC ve sloupci musí být nad horním okrajem Stage, poslední musí začínat nad spodním okrajem Stage. MC si nakopírujeme v dostatečném množství (pro nejtlustší sloupec jsem jich použil 12), zarovnáme je nastavíme stejné mezery mezi nimi (vše pomocí paletky Align).

Nyní si musíme jednotlivé MC pojmenovat, abychom je mohli později jednoduše ovládat. Pojmenujeme si je jednoduše čísly, první instance se bude jmenovat 1, druhá 2... poslední 12.

Teď celý sloupec označíme a vytvoříme si z něj MC, který se bude jmenovat "sloupec1". Tento MC otevřeme, všechny MC zgrupujeme a opět na paletce Align zvolte To Stage a kliknutím na volbu "zarovnat nahoru" grupu zarovnejte tak, aby horní hranice prvního klipu byla na nulové souřadnici. Je to opět velmi důležité pro pozdější výpočty polohy MC.

Nyní napíšeme skripty pro jednotlivé "znak" MC. Všechny skripty jsou stejné, takže stačí napsat jeden a potom ho zkopírovat na všechny zbývající MC. Tento skript je handler, tedy není napsán do frame, ale přímo na MC jako Object Action (narozdíl od Frame Actions).

onClipEvent (load) {
this.gotoAndStop(Math.ceil(27*Math.random()))
}

onClipEvent (enterFrame) {
this._y += this._height/_parent.speed
if (this._y > _root.spodniHranice) {
this._y = 0
this._visible = _parent.pause
_parent.citac++
}
}

První část skriptu nám zajistí, že při startu bude mít každá instance MC "znak" jiný zobrazený znak.

Druhá část skriptu se spustí při každém frame, který Flash vygeneruje. Zde se stane následující:

• MC se posune směrem dolů (k výpočtu délky kroku používám výšku MC, dělenou konstantou, lze tam napsat i pouhé číslo, ale použití výšky MC a konstaty mi umožní velice jednoduše manipulovat s dalšími sloupci s větší "hloubkou").
• pokud je _y souřadnice menší, než spodní okraj Scény, MC se přesune na pozici 0, tedy úplně nahoru
• k použití dalších dvou řádků, nastavení viditelnosti (_visible) a použití proměnné "citac" se dostaneme dále

Nezapomeňte tento skript zkopírovat na všechny instance.

V této chvíli je MC "sloupec1" hotový, umístěte jeden na Scénu a nyní na něj napíšeme zase handler skript:

onClipEvent (load) {
this.speed = 2
pocetMezer = 0 + 2*Math.random()
pause = false
}

onClipEvent (enterFrame) {
rnFrame = Math.ceil(27*Math.random())
rnMC = Math.ceil(12*Math.random())
this[rnMC].gotoAndStop(rnFrame)
if (citac > pocetMezer) {
  citac = 0
  pause = !(pause)
  if (pause) {
  pocetMezer = 4 + 10*Math.random()
  } else {
      pocetMezer = 1 + 5*Math.random()
      }
  }
}

První část skriptu (on(load), tedy při načtení) říká toto:

• nastav proměnnou rychlosti posuvu na 2 (čím vyšší číslo, tím nižší rychlost posuvu, nojo, já vím, že to není uplně výstižný název :o))
• vygeneruje se náhodný počet mezer, tedy neviditelných MC, a to v rozsahu 0-2 (aby byla při startu obrazovka plná a pak prořídla)
• boolovská proměnná "pause" je "oddělovač" mezi mezerami a pásky viditelných MC znaků, její startovní pozice je false

Druhá část klipu (proběhne při každém generování nového frame) provádí tyto akce:

• vygeneruje se náhodné číslo v rozsahu 1-27 (rnFrame)
• vygeneruje se náhodné číslo v rozsahu 1-12 (rnMC)
• nyní se vezme ve sloupci MC, jehož číslo odpovídá hodnotě proměnné rnMC a v tomto MC se nastaví jako aktuální frame, odpovídající hodnotě proměnné rnFrame. Výsledkem je to, že se náhodně vybraný znak ve sloupci změní na jiný.
• další část si popíšeme podrobněji

Část skriptu, uvozená akcí "if", generuje souvislé pásky s viditelnými MC a prokládá je mezerami, složenými z neviditelných MC.

Proměnná "pauze" slouží k nastavování viditelnosti/neviditelnosti MC znaku. Je to booleanská proměnná, takže nabývá hodnot "true" (pak je MC viditelný) nebo "false" (nastaví MC jako neviditelný).

Aby vznikl dojem pásků a mezer, musíme vždy několik po sobě jdoucích znaků nastavit jako viditelné, pak zase několik dalších neviditelné a pořád dokola to střídat.

Proměnná čítač se generuje na jednotlivých MC znacích, podívejte se o něco zpět: když se znak ocitne mimo obrazovku, zvýší se hodnota čítače o jednu, nastaví se viditelnost MC pomocí proměnné pause a MC skočí na polohu 0.

Když celý blok skriptu přeložíme do češtiny, bude vypadat takto:

"pokud hodnota čítače překročila délku mezery/délku pásku, vynuluj čítač a přehoď pomocí změny proměnné "pause" z vytváření mezer na vytváření pásku nebo opačně. Pokud se bude vytvářet viditelný pásek, vygeneruj délku pásku (proměnná "pocetMezer") jako náhodné číslo v rozsahu 4-14, pokud se bude vytvářet mezera, vygeneruj délku mezery (proměnná "pocetMezer") jako číslo v rozsahu 1-6."

Celé to potom bude fungovat takto: pokaždé, když se některý MC znak dostane mimo obrazovku, zvýší čítač o jednu, MC se nastaví jako viditelný a skočí na vršek obrazovky. To se bude opakovat tak dlouho, dokud přeskakující klipy, které tvoří viditelný sloupek, nezvýší hodnotu čítače tak, že bude větší než proměnná "pocetMezer". Do této chvíle nám přeskakující MC znaky vytvářely viditelný pásek, padající směrem dolů, ale v tomto okamžiku se přepne proměnná "pause" na neviditelnost, a všechny přeskakující MC znaky budou neviditelné, tedy vytváří se mezera. A ta se bude vytvářet tak dlouho, dokud se čítač nezvětší nad hodnotu "pocetMezer"... a zase dokola, přepne se na "viditelnost" a vytváří se viditelný pásek... aby délky pásků a mezer byly pokaždé jiné, vždy, když se proměnná "pause" přepne, vygeneruje se náhodně jiná délka (proměnná "pocetMezer").

V této chvíli máme vlastně všechno hotové. Víc skriptů už nepotřebujeme. Můžeme si vytvořit další kopie MC "sloupec1" (pozor, ne přetahováním z knihovny, když myší z knihovny přetáhnete "sloupec1" na plochu, chybí na něm ovládací skript!).

Abychom dosáhli efektu "hloubky", můžeme si vytvořit další sloupce, které budou opticky "vzdálenější". Je to velice jednoduché. Vytvoříte si nový sloupec, do kterého naskládáte zmenšené MC "znak" (takže jich bude víc), nově vytvořený sloupec celý ztmavíte (pomocí paletky "Effect", například volbou "brightness" nebo tint). Skript použijete stejný jako pro "sloupec1", změníte pouze řádek:

rnMC = Math.ceil(12*Math.random())

kde číslici 12 nahradíte počtem MC znaků v novém sloupci. Já jsem ve svém tutoriálovém fla změnil i hodnoty pro generování proměnné "pocetMezer" tak, aby zadní sloupce obsahovaly delší viditelné pásky než přední sloupce, ale to je věc, se kterou si můžete pohrát.

Na úplný závěr vytvořte nahoře a dole okraje v barvě pozadí, které zabrání efektu "poskakování" poslední a první řady znaků (v mém fla jsou tyto okraje v nejvyšším layeru).

Při publikování do html doporučuji nastavit kvalitu swf na Low, nijak mu to neublíží a o dost to zrychlí.

Tak, a to je vše... enjoy it...

PS.: Komentáře a připomínky můžete psát dole pod článkem.