Vidíte je všude. Animované postavy na obrazovce blikají, skáčou nebo se točí. Webdesignéři na tyto techniky nenarazili jen tak náhodou. Vytvořili sadu nástrojů, díky kterým váš obsah vynikne, aniž byste narušili váš prohlížeč. Hlavní hráči? Animované GIFy, dynamické HTML, Java, Shockwave a Flash. Každý má své silné stránky. Každý má své vlastní nedostatky. Podíváme se, jak fungují. Podíváme se také na to, co jim přinese budoucnost.
Válka šířky pásma
Historie internetu je krátká. Jeho vývoj je rychlý. Dva faktory působí proti sobě. Autoři chtějí vytvářet komplexní obsah. Čtenáři chtějí rychlé stahování.
V počátcích „rychlý“ znamenal telefonní modemy. Velikost souborů musela být malá. Složitá grafika byla luxus, který si mohl dovolit jen málokdo. Tento rozpor si vynutil inovace. Vývojáři museli být kreativní. Potřebovali techniky pro přenos bohatých médií úzkými kanály.
Vezměte Flash animaci z článku o jaderném záření. Toto je složitá postava. Ale vejde se do necelých 7000 bajtů. To je efektivita. Zde je návod, jak jednotlivé technologie řeší tento problém.
Animované GIFy
Rané dny webové grafiky a animace
Web by nebyl tím, čím je, bez spojení textu a obrázků. Tato integrace do značné míry spoléhala na bitmapové soubory, což je formát, který určuje barvu každého jednotlivého pixelu obrázku. Koncept je jednoduchý. Existuje však upozornění: takové soubory mohou rychle růst. Aby se stránky načítaly, aniž by uživatelé několik hodin zírali na prázdné obrazovky, obrátili se vývojáři na techniky komprese. To je důvod, proč JPEG a GIF dominovaly ranému webu.
Ale statické obrázky vyprávěly jen polovinu příběhu.
Pokud je animace rychlou sekvencí statických snímků, dalším logickým krokem je zřetězení těchto bitmapových souborů dohromady. Prohlížeč mezi nimi cykloval. Tak se zrodil GIF Animation, také známý jako GIF89. To byl první skutečný nárůst pohybu na webu. Rychle si získala popularitu. A zůstává populární dodnes, v dobrém i ve zlém.
Proč vyhrály GIFy (a proč jsou omezené)
Přitažlivost GIFů byla zřejmá. Vytvoření animace GIF bylo neuvěřitelně jednoduché. Většina prohlížečů to podporovala hned po vybalení. Nepotřebovali jste složité pluginy ani proprietární software. Pokud jste používali Windows, možná jste použili GIF Construction Set. Uživatelé Mac tíhli ke GifBuilderu. Pracovní postup byl lineární.
- Sbírejte jednotlivé bitmapové rámečky.
- Uspořádejte je v softwaru v požadovaném pořadí.
- Stáhněte si konečný soubor.
To je vše. Tag píšete stejným způsobem jako u statického obrázku.
Tato jednoduchost má však tvrdé meze. Hlavní nevýhodou je velikost souboru. Vzhledem k tomu, že každý snímek je úplný bitmapový obrázek, přidávání nových snímků zvyšuje váhu souboru. Snadno si vystačíte se čtyřmi jednoduchými snímky – přenášejí se bez problémů. Ale když se dostanete na dvacet snímků? Velikost souboru se často stávala nedostupnou pro běžné internetové připojení té doby.
Problém je i s obsahem. Dvacet snímků je pro plynulý pohyb málo. Filmy používají minimálně 24 snímků za sekundu. Animované obrázky GIF umožňují náhlé skoky mezi státy. V důsledku toho je pohyb trhavý. Nepřirozený. Postrádá plynulost skutečného videa. Toto omezení je viditelné téměř v každé rané webové animaci. Je funkční. Přitahuje pozornost. Do filmového má ale daleko.
GIFy jsou skvělé pro jednoduché smyčky nebo rychlé vizuální ozdoby. Nejsou však schopni zprostředkovat složité vyprávění. Horší je, že nemají zvuk. Webdesignéři rychle narazili na strop. Uživatelé chtěli pohyb. Chtěli zvuk. GIFy to nemohly poskytnout.
Hlavním problémem animací GIF je nafouklá velikost souboru. Každý snímek ve „filmu“ výrazně zvyšuje objem stahování. Je to neúčinné. Je to pomalé.
Dynamický HTML
Řešení? Zastavte přenos rámců. Stačí přenést jeden obrázek. Poté řekněte počítači, aby jej přesunul.
Myslete na kurzor myši. Nenačtete nový obrázek za každý milimetr, o který posunete ukazatel. Prohlížeč tento pohyb zpracuje lokálně. Dynamické HTML (dHTML) se pokouší replikovat tuto efektivitu na webu.
Původní webové stránky byly statické. Hypertext Markup Language (HTML) definuje strukturu, nikoli chování. Po načtení stránka jen visela. Mrtvý. Bez hnutí.
Designérům se to nelíbilo. Chtěli dynamický obsah. Obsah, který se po načtení stránky změnil. Na scénu nastoupilo dHTML.
To není jen jedna technologie. Jedná se o kombinaci programovacích jazyků, jako je JavaScript, které přistupují k Document Object Model (DOM). DOM je vnitřní mapa stránky v prohlížeči. Ovládá každý prvek.
Většina moderních prohlížečů umožňuje skriptům přístup k DOM. Skript může prvek uchopit. Změňte jeho barvu. Posuňte jeho polohu.
DHTML nebylo navrženo s ohledem na animaci. Byl vytvořen pro manipulaci s prvky stránky. Animace byla příjemným vedlejším efektem.
Skript může dát prohlížeči pokyn, aby neustále aktualizoval souřadnice obrázku. Obrázek se posune po obrazovce. Pokud to uděláte s více obrázky, získáte primitivní film.
Toto funguje ve většině prohlížečů bez dalšího stahování. Ale je to rozmarné. Kód, který funguje v Netscape, se může v Internet Exploreru zlomit. Ruční vytváření dHTML animací je bolestivý proces. Potřebujete nástroje. Macromedia Dreamweaver (a podobné aplikace) pro vás vygenerují správný kód skriptu.
I s nástroji je dHTML omezený. Pohybuje statickými obrazy. Je plynulejší než GIF, ale méně efektivní pro složité scény. Představuje strop toho, co prohlížeč nativně umí.
Aby se vývojáři dostali dále, potřebovali něco těžšího. Něco vnějšího.
Java applety
Na scénu přichází Java.
Java je univerzální, webově orientovaný jazyk. Umožňuje programátorům vytvářet aplikace ke stažení. Nejedná se ale o samostatné programy. Toto jsou applety.
Applety běží uvnitř prohlížeče. Vyžadují virtuální stroj (VM). Virtuální stroj funguje jako překladač. Vezme kód Java a převede jej do pokynů, kterým rozumí váš konkrétní operační systém (Windows, MacOS, Unix).
Virtuální stroj je v podstatě plugin. Pokud žádný nemáte, animace nebude fungovat.
Java applety nabízejí flexibilitu. Nejste omezeni na bitové rámce. Vektorové tvary můžete kreslit za běhu. Díky tomu lze velikost souborů spravovat. To umožňuje interaktivitu. Uživatel může kliknout, přetáhnout nebo umístit kurzor myši a animace bude reagovat v reálném čase.
Je to mocné. Je to multiplatformní. Je to také závislost. Pokud prohlížeč uživatele nemá Java Virtual Machine, neuvidí nic.
Pro webové designéry na konci 90. let a na počátku 21. století to byla špička. Obětovali jste snadnost použití funkcím. GIFy byly jednoduché, ale hloupé. dHTML bylo nativní, ale omezené. Java byla složitá, ale výkonná.
Výběr závisí na vašem publiku. Měli nainstalované pluginy? Zajímaly je časy načítání? Nebo jen chtěli, aby web vypadal působivě?
Kompromis mezi výkonem a bohatostí definuje web již mnoho let. I dnes se snažíme najít rovnováhu.
Začátek 90. let vše změnil. Najednou všichni vytvářeli webové stránky. To už nebyli jen techničtí nadšenci. Chtěli na své stránky přidat multimédia. Zvuk. Video. Komplexní grafika.
Prohlížeče tohle všechno po vybalení nezvládly. Takže vývojáři začali být kreativní. Vytvořili pluginy do prohlížeče.
Představte si plugin jako pomocnou aplikaci. Funguje ve spojení s vaším prohlížečem při čtení určitých typů souborů. Tyto programy jsou malé. Dají se rychle stáhnout. Provádějí funkce, které běžné prohlížeče prostě nepodporují.
Jak vlastně funguje streamování videa
Rané webové video se do značné míry spoléhalo na model pluginu. Nedíval ses jen do souboru. Komunikoval jsi se specializovaným hráčem.
Návrháři použili k testování vaší konfigurace skripty DHTML. Měli jste správný plugin? Pokud ne, prohlížeč zobrazí zprávu. Bylo tam přesně uvedeno, odkud se má stáhnout.
Tento proces byl zdlouhavý. Dal si čas. To byla vážná překážka pro uživatele.
Ale co kdybyste měli plugin? Kouzlo se dělo. Prohlížeč začal přehrávat film ještě před úplným stažením souboru.
Jak? Prostřednictvím komprese a streamování.
Komprese zjednodušuje obrazová data. Zmenšuje velikost souboru. Streamování se začne přehrávat při načítání. Přehrávače jako QuickTime a Media Player tento přístup využívaly. Ukázali sekvenci statických obrázků. Podobné jako animovaný GIF, ale rychlejší. A se zvukem.
Mělo to ale háček. Pomalé připojení kazilo zážitek. Načítání souborů trvalo věčnost. Nebo ta kvalita vypadala hrozně.
Dominance vektorové animace
Pokud jde o ranou webovou animaci, vládnou dvě jména. Flash a Shockwave. Oba byly vyvinuty společností Macromedia.
Jednalo se o přehrávače vektorových 2D animací.
Na rozdíl od rastrových obrázků vektory používají matematické rovnice. Díky tomu byly škálovatelné. Zůstaly čisté při jakékoli velikosti. Přes dial-up připojení se načítaly neuvěřitelně rychle.
Tato technologie poháněla velkou část interaktivního webu. Animace bumerangu z našeho předchozího článku? Byl to Flash. Nebyl to jen soubor videa. Tohle byl kód. Byl lehký. Byl všude.
Macromedia vybudovala impérium na dvou formátech, které spolu v podstatě souvisely: Flash a Shockwave. Jeden se stal standardem pro webovou animaci; na druhé straně bylo těžké vytvářet složitější interaktivní obsah. Na rozdíl od těžkopádných souborů RealPlayer nebo QuickTime, které se otevíraly v samostatných oknech, tyto formáty fungovaly uvnitř stránky. Byly interaktivní. Vy jste se jen nedívali; klikli jste. Přehrávač Shockwave nepřehrál jen film. Přečetl vstup uživatele a řekl prohlížeči, jak má reagovat.
Anatomie rychlosti
Proč se tyto soubory stahovaly tak rychle? Nebyla to magie. Byla to matematika.
Většina animací GIF je založena na rastrových obrázcích. Každý pixel je uložen samostatně. Pokud máte modrou oblohu, jsou to tisíce jednotlivých pixelů. Soubory Flash a Shockwave jsou většinou vektorové. Místo ukládání hodnot pixelů software ukládá instrukce. Přímka není řada bodů. Tento popis je: úhel, souřadnice, délka.
Popis obrázků tímto způsobem umožňuje programu uložit široké oblasti obrázku – oblasti, které mohou mít stovky pixelů v rastrovém souboru – jako více tvarů.
Tento přístup dramaticky snižuje velikost souboru. I když byly použity rastrové obrázky, webmasteři je mohli komprimovat. Pohybovaly se po obrazovce cestou, podobnou dHTML animacím, což udržovalo celkový objem dat nízký. Většina souborů Flash však byla čistě vektorová. Díky tomu se mimořádně rychle načítaly.
V rukávu mám ještě jeden trik: **tween frames.
Animátoři nemusí kreslit každý jednotlivý snímek. Software vypočítává geometrické změny mezi klíčovými snímky. Vyplňuje mezeru. To zabere mnohem méně místa než ukládání každého snímku jako jedinečné bitmapy. Matematika přebírá hlavní práci.
Streamování: Začněte, než skončíte
Skutečnou inovací nebyl jen způsob, jakým byly soubory strukturovány. Takto byly přenášeny přes internet. Soubory Flash a Shockwave jsou streamovatelné.
Abyste mohli začít hrát, nemusíte čekat na úplné stažení. Prohlížeč začne přehrávat „film“, zatímco se zbytek stále načítá. Představte si to jako webovou stránku: server nejprve odešle text a poté obrázky. Web Flash může zobrazovat úvodní film, zatímco hlavní obsah se načítá na pozadí.
Webmasteři mohou naprogramovat soubor tak, aby se začal přehrávat po stažení určitého procenta souboru. Přenos je nakonfigurován tak, aby každý segment dorazil dříve, než jej hráč potřebuje. Jedná se o stejný mechanismus, který je základem streamovaného videa.
Monopol pohodlí
Flash nevyhrál jen proto, že byl dobrý. Vyhrála, protože Macromedia ji učinila všudypřítomnou.
Pluginy byly dodávány s hlavními prohlížeči a operačními systémy. Pokud jste jej neměli, instalace proběhla na pozadí. Nebylo nutné zavírat prohlížeč. Nemusíte sedět a čekat na zdlouhavou proceduru. Software k vytvoření těchto souborů byl drahý. Ale hráč? Uvolnit.
Aktualizace byly bezbolestné. Macromedia navrhla přehrávače tak, aby se přizpůsobily budoucím změnám. Uživatelé nemuseli dělat nic jiného, než stáhnout malý soubor. Pokud web zjistí, že používáte starší verzi, váš prohlížeč vás varuje a přesměruje vás na stránku ke stažení. Soubory byly tak malé, že proces aktualizace trval téměř okamžitě.
Síťový efekt
Každý formát animace má své silné a slabé stránky.
Mnoho webmasterů si však vybralo Flash, i když by jiný formát mohl být technicky lepší. Proč? Protože věděli, že většina uživatelů již tuto funkci má. A pokud ne, získat to bylo triviální.
Všestrannost Flash a Shockwave vytvořila zpětnou vazbu. Tento obsah zahrnulo více webmasterů. Setkalo se s tím více uživatelů. Přijetí rostlo. Už to nebylo jen o technice. Bylo to o cestě nejmenšího odporu.
Pocházejí ze stejné společnosti. Macromedia vytvořila obojí. Pokrývají podobnou oblast použití. Rozdíl mezi Flashem a Shockwave však není jen záležitostí značky. To je architektura. To je historie. Musíte znát rozdíl, pokud vám záleží na tom, jak se váš obsah načítá nebo co přesně s ním můžete stavět.
Hlavní příčina? Příběh původu.
Director, motor Shockwave, předchází moderní web. Byl vytvořen pro CD-ROM. Těžká data. Vysoká přesnost. Jak se web vyvíjel, byl aktualizován ředitel. Naučil se vytvářet sítě. A co Flash? Flash se zrodil pro prohlížeč. Vyvinul se z Future Splash Animator. Macromedia jej přizpůsobila pro telefonní linky. Tehdy bylo králem dial-up (pronajatá linka). Rychlost byla kritická.
Tato historie vytvořila rozdvojenou povahu technologie.
Flash má prioritní rychlost. Rázová vlna upřednostňuje výkon.
Který formát vítězí z hlediska rychlosti a kompatibility?
Pokud se ptáte, který formát má nejlepší webovou kompatibilitu, Flash pevně drží korunu.
Přemýšlejte o pluginech. Blikat? Instaluje více než 90 procent uživatelů internetu. Rázová vlna? Těsně pod 60 procenty. Pokud si nenainstalují přehrávač Shockwave, zůstane velká část vašeho publika ve tmě.
Časy načítání se řídí stejnou logikou.
Flash soubory jsou lehké. Rychle se načítají. Soubory Shockwave jsou těžší. Jejich načítání trvá déle. V začátcích webu bylo běžné čekat deset sekund na načtení klipu. To je dnes nepřijatelné. Flash to intuitivně pochopil.
Ale rychlost není všechno.
Kde Shockwave poráží Flash
Neodepisujte Shockwave. Toto je silnější nástroj.
Je všestrannější. Chcete náročné hry? Rázová vlna. Potřebujete hlubokou interaktivitu? Rázová vlna. Složitá animace, která se nestará o dobu načítání? Rázová vlna.
Existuje také hierarchie možností. Soubor Flash můžete importovat do filmu Shockwave. Tohle funguje dobře. Zkusit opak? To nebude fungovat. Z hlediska funkcí je Shockwave nadřazeným formátem.
Pak je tu otázka nákladů.
Software pro tvorbu Flash stojí asi 400 USD. The Director, navržený pro Shockwave, stojí téměř 1000 dolarů. Pro startup nebo malé studio je to výrazná bariéra. Flash byl k dispozici. Ředitel byl pro profesionály.
Otevřené tajemství: Dostupnost zdrojového kódu
Zde je detail, který většině tutoriálů chybí.
Flash je formát s otevřeným zdrojovým kódem. Můžete vidět, jak to funguje. Můžete si to přizpůsobit. Můžete zasahovat do vnitřní struktury. Shockwave používá kompilovaný formát souboru. Je zavřeno. Je velmi obtížné jej upravit. Pokud potřebujete provést reverzní inženýrství nebo hluboké přizpůsobení, Flash vám poskytne klíče. Shockwave je drží v trezoru.
Jak vytvářet filmy v obou prostředích
Oba nástroje jsou navrženy tak, aby byly překvapivě jednoduché. Automatizují tvrdou práci. K vytvoření rotujícího glóbu nepotřebujete diplom z informatiky.
Pracovní postup je podobný, i když se názvy liší. Děláte tři věci:
- Vytváření a úprava obrázků. Zdrojové materiály.
- Umístění obrázků po snímcích. Sekvence.
- Uspořádání snímků do filmu. Konečný produkt.
Ale rozhraní? Úplně jiné jazyky.
Ve Flashi ukládáte prostředky do knihovny. V Shockwave jsou součástí castu. Stejný úkol. Různá jména.
Tyto prostředky umístíte na scénu. To je to, co uživatel vidí. Konečný závěr.
K ovládání pohybu používáte klíčové snímky. Nastavíte výchozí bod. Určíte koncový bod. Řeknete softwaru, aby vyplnil mezihodnoty. Flash nazývá oblast umístění časovou osou. Shockwave tomu říká skóre.
“Pokud chcete, aby se zeměkoule převalovala z jedné strany obrazovky na druhou, nemusíte animovat každý snímek. Stačí Flashovi říct, kde se zeměkoule začne pohybovat a kde se zastaví.”
To je kouzlo. Software interpoluje pohyb. Provádí matematické výpočty. Jednoduše si stanovíte záměr.
Kdy se spojí?
Přibližují se.
Každá aktualizace přidává do Shockwave webové funkce. Každá aktualizace přidává Flash na všestrannosti. Mezera se uzavírá.
Nakonec se pravděpodobně spojí do jednoho zastřešujícího formátu. Bude mít to nejlepší z obou světů. Rychlost a výkon. Dostupnost a složitost.
Do té doby si vybíráte na základě svých omezení.
Jste na vytáčeném připojení? Blikat.
Máte rozpočet 400 $? Blikat.
Potřebujete skrýt zdrojový kód? Rázová vlna.
Potřebujete vytvořit webovou hru AAA? S největší pravděpodobností Shockwave.
Není to jen o preferenci. Jde o životní prostředí. A prostředí se stále vyvíjí.
Film ve formátu Flash z našeho článku o palivových článcích.
Flash animace z našeho článku o motorech.
Přechod na interaktivní 3D grafiku na webu
2D webová animace byla vždy řízenou zkušeností. Návrhář přesně určuje, co vidíte, snímek po snímku. Odráží tradiční televizní karikatury, kde je publikum pasivní. 3D webová grafika tuto dynamiku zcela mění. Získáte kontrolu. Model můžete otáčet. Můžete spustit určité funkce. V některých případech můžete dokonce změnit jeho fyzické rozměry. Tato úroveň interakce transformuje obsah z něčeho, co jen sledujete, na něco, co prozkoumáváte.
Pluginy prohlížeče a průmyslové standardy
Stejně jako dřívější 2D nástroje, jako je Flash a Shockwave, zobrazení 3D grafiky na webu vyžaduje plugin prohlížeče. Na tento trh již vstoupilo několik společností. Viewpoint zaznamenal určitý úspěch. NxView nabízí plugin přímo ze svých webových stránek.
Průmysl také prochází velkou konsolidací. V červenci Macromedia a Intel oznámily, že společně vyvinou 3D schopnosti pro Shockwave. Toto partnerství využívá hardwarové zdroje Intel a zavedenou infrastrukturu přehrávačů médií společnosti Macromedia. Cíl je jasný: učinit z grafického formátu Shockwave 3D de facto průmyslový standard pro webovou grafiku. Uživatelé nebudou potřebovat nový software. Jednoduše si stáhnou aktualizaci do svých stávajících přehrávačů Shockwave.
Adaptivní škálování a správa polygonů
Výkon je hlavní překážkou pro 3D grafiku na webu. Technologie Shockwave tento problém řeší škálováním. V reálném čase se přizpůsobuje rychlosti připojení uživatele. Pokud máte pomalé připojení, přehrávač načte model s méně polygony. Polygony jsou geometrické tvary, které jsou kombinovány do 3D modelu.
To není jen kompromis; toto je funkce. Ztratíte pár malých detailů. Ale neztrácíte jasnost obrazu. Pohyb zůstává plynulý. To zajišťuje, že uživatelé s vytáčeným nebo raným širokopásmovým připojením nebudou vyloučeni ze zkušenosti.
E-commerce a virtuální montážní místnosti
Tato technologie otevírá nové možnosti pro online nakupování. V dnešní době se kupující spoléhají na statické obrázky. Zjistí střih a texturu. 3D grafika jim umožňuje prohlížet si produkt ze všech úhlů. To simuluje zážitek z nakupování v kamenném obchodě.
Některé weby jdou ještě dále a nabízejí „virtuální montážní prostory“. Uživatelé si mohou vytvořit 3D model své vlastní postavy. Mohou pak vidět, jak různé oblečení sedí na konkrétním avatarovi. To snižuje nejistotu při nakupování online.
Vzdělávací aplikace a pokročilé vzdělávání
Vzdělávací platformy z tohoto posunu velmi těží. Stránky jako How Stuff Works již publikovaly články využívající 3D grafiku vytvořenou pomocí NxView. Plánuje se vývoj dalšího obsahu.
Tato grafika poskytuje přehlednost. Uživatelé si mohou motor prohlédnout z libovolného úhlu. Zdá se, že před nimi skutečně stojí skutečný motor. Toto prostorové porozumění přispívá k lepší paměti a porozumění materiálu.
Budoucnost webové interakce
Tato technologie pravděpodobně způsobí revoluci ve vzhledu a chování internetu. Sleduje stejnou trajektorii jako statické obrázky a Flash animace. Internet se bude i nadále vyvíjet nebývalým tempem.
Vysokorychlostní připojení jsou stále běžnější. To stimuluje další generaci animačních nápadů. Jedním z konceptů je vytvořit web méně jako knihu a více jako videohru. Uživatelé budou mít přístup k informacím v interaktivním 3D světě. Dalším nápadem je udělat to více jako televizi. Dominovat bude kvalitní animace a video.
Nakonec záleží na tom, co se webdesignéři rozhodnou vytvořit. Záleží také na tom, co uživatelé požadují. Internet není statický. Posouvá se k něčemu pohlcujícímu. Dalším krokem je přesně pochopit, jak tyto motory fungují zevnitř.
