<< zpět na hlavní stránku

Tutoriál 5 - Rolující text a noviny

Upozornění: Podkladová grafika zde použitá je chráněna autorskými
právy a nesmí být dále šířena ani použita ve vašich projektech!

Tato animace roluje obrazem s dlouhým textem - řada 0 a 1 jako v Matrix, simulace HEX výpisu programu, rolování fiktivního novinového článku.

Download podrobnějšího náhledu (7 MB) nebo modrá HEX varianta (7 MB) nebo noviny (2 MB)

Náhled na ShutterStock nebo noviny

Podkladový obraz pro rolovaná data jsem si sice připravil programově (náhodně generovaná data), ale stejně tak lze připravit ve Wordu nebo Photoshopu např. použitím výstupu z generátoru náhodného textu.

Jako rolující text se použije několik velkých obrázků poskládaných za sebou (přesněji pod sebou, text roluje směrem nahoru). Pro 4k video je šířka obrazu 3840. Program AnimerPic upraví obrázky tak, že je rozšíří na mocninu 2. Maximální povolený rozměr obrázků je 4096x4096. Proto pro nejefektivnější využití textury (a i z důvodu generování programem) jsem zvolil rozměr obrazu 4096x4096, ale stejně tak můžete použít i např. 3840x3840. Chcete-li použít výpočty zde uvedené, dodržte čtvercový rozměr.

Jak jsem vyzkoušel, obrázků 4096x4096 snese Animer načíst 5, při větším počtu už padá na nedostatek paměti (s 5 obrázky zabere něco přes 1 GB paměti). Pro délku animace 880 snímků (30 sekund) počet obrázků vyhovuje, text roluje rozumnou rychlostí.

Obrázky budu používat zmenšené na šířku obrazovky, tedy jako by měly rozměr 1920x1920 bodů. Při délce videa 880 snímků a počtu obrázků 5 trvá základní animace jednoho obrázku 880/5 = 176 snímků. To je čas, kdy obrázek odroluje o svou výšku a vymění si své místo s následujícím obrázkem. Obrázek za tu dobu odroluje 1920 virtuálních linek, což je rychlost 10.909 linky za snímek.

Dále mě zajímá, jaké souřadnice musím obrázku nastavit na začátku a konci jeho animace a jak dlouho bude viditelný. Obrázek začíná se svým horním okrajem na dolním okraji obrazovky. Souřadnice se vztahují ke středu obrázku a ke středu obrazovky. Souřadnice 0 je, když je obrázek na obrazovce vystředěný. Pokud chci posunout obrázek z jeho výchozí střední polohy tak, aby jeho střed ležel na dolním okraji obrazovky, musím ho posunout o 1080/2=540 linek. Dále ho posunu o polovinu jeho výšky, aby se jeho horní okraj dostal na spodní okraj obrazovky, to je 1920/2 = 860 linek. Výchozí souřadnice Y tedy je -540 - 860 = -1500.

Koncová souřadnice je obdobná a je symetrická, tedy Y = 1080/2 + 1920/2 = +1500.

Za dobu animace se obrázek musí posunout o 3000 linek. Znám rychlost rolování obrazu 10.909 linek na snímek a odtud zjistím dobu rolování: 3000/10.909 = 275 snímků.

Nyní znám časy začátků rolování obrázků (odstup 176): snímek 0, 176, 352, 528, 704. Časy konců rolování obrázků (délka 275) jsou 275, 451, 627, 803 a 99. Výchozí souřadnice Y je -1500 a koncová +1500.

Mohu sestavit animaci. Načítám postupně obrázky. U každého obrázku nastavím rozměry 1920x1920 pixelů, přesunu se na výchozí snímek (0, 176, 352, 528, 704), zapnu viditelnost, nastavím souřadnici Y na -1500, přesunu se na koncový snímek (275, 451, 627, 803, 99), nastavím souřadnici Y na +1500 a vypnu viditelnost.

Jako další variantu jsem si připravil obrázky s novinovými články. Jako text jsem použil klasický text "Lorem Ipsum", který se opakoval. Text jsem připravil ve Wordu - font Times New Roman (měl by se použít spíš nějaký free font), text formátovaný do 3 odstavců. Jako obrázky jsem použil fotky, které jsem převedl na černobílé a aplikoval filtr "Inkoustové obrysy". Text jsem pak vytiskl do virtuální tiskárny, do souboru XPS. Tiskové soubory jsem pak pomocí programu XPS2IMG převedl na obrázky. Při zvoleném rozlišení 600 DPI měly obrázky rozumnou šířku něco přes 4000 px. Stačilo je oříznout na rozměr 4096x4906, jen dole bylo nutné odmáznout pár řádků na okraji.

Nejdříve jsem vygeneroval rolující noviny. Pak jsem chtěl ještě klasickou variantu animace, kde bych podkladové obrázky využil - noviny narotují do obrazovky, pak se převrátí pár stránek a noviny zas odrotují pryč. Vytvořil jsem novou scénu a pro obrázky jsem použil následující nastavení transformací (pořadí obrázků jde zdola nahoru, první obrázek je v seznamu dole a poslední nahoře).

První obrázek začne se zapnutou viditelností na snímku 0 s velikostí 0 a s úhlem rotace +720. Na snímku 30 se zvětší na rozměr 1080x1080, úhel rotace 0. Tím se dosáhne toho, že obrázek během první sekundy animace narotuje do obrazovky. Se stejným nastavením parametrů čeká do snímku 90, tedy 2 sekundy je nehybný. Za dalších 10 snímků (tj. snímek 100) se jeho šířka sníží na 0, souřadnice X se změní na -540 a vypne se viditelnost. Tím se zajistí, že se stránka svine do levého okraje, jako když se obrací list.

Druhý obrázek začíná zviditelněním na snímku 90, lze zkopírovat nastavení snímku 30 předešlého obrázku. Tím začne být obrázek viditelný ve chvíli, kdy se začíná odrolovávat předešlý obrázek. Se stejným nastavením obrázek setrvá až do snímku 160, je tedy také plně viditelný po dobu 2 sekund. A opět po dalších 10 snímcích (snímek 170) stránka zmizí stejně jako je u prvního obrázku nastavení snímku 100.

Nastavení druhého obrázku pro snímky 90 až 170 lze zkopírovat do paměti a aplikovat i na další 3 obrázky s tím rozdílem, že animace dalších obrázků začínají na snímcích 160, 230 a 300. U posledního obrázku jsem ponechal nastavení snímku 370 (obrázek zůstává zobrazen), ale nastavení snímku 380 jsem zrušil a namísto něj zkopíroval do snímku 400 nastavení ze snímku 0 prvního obrázku, viditelnost jsem vypnul. Tím se zajistilo, že poslední obrázek odrotuje pryč.

Délku videa jsem změnil na 440, aby na konci zůstala malá prodleva pro případ, že se animace bude opakovat.

<< zpět na hlavní stránku