Co je WebGL?

WebGL je otevřený webový standard pro vykreslování grafik v libovolném kompatibilním prohlížeči bez nutnosti použití dalších zásuvných modulů. Rozhraní WebGL je plně integrováno ve všech webových standardech prohlížeče a umožňuje využití zpracování obrazů a efektů akcelerovaného pomocí GPU jako součásti plátna webové stránky. WebGL prvky lze vkládat spolu s dalšími HTML prvky a skládat s jinými částmi stránky.

Přestože většina současných prohlížečů WebGL podporuje, klikněte na tento odkaz a přečtěte si podrobnější informace o konkrétních podporovaných verzích.

V některých prohlížečích není rozhraní WebGL ve výchozím nastavení zapnuté. Chcete-li ve svém prohlížeči zapnout WebGL, přečtěte si tento článek.

Poznámka:

Přesvědčte se, že máte rozhraní WebGL v prohlížeči opravdu zapnuté, protože některé prohlížeče ho ve výchozím nastavení vypínají.

Používání dokumentů ve formátu WebGL-glTF (Beta)

Animate CC nyní nabízí dva formáty dokumentů WebGL-glTF. Dokumenty ve formátu WebGL-glTF Standard umožňují integraci s libovolnými standardními balíčky WebGL-glTF. Tento formát je zcela kompatibilní se standardy.

  1. Chcete-li vytvořit dokument založený na formátu WebGL-glTF, vyberte WebGL-glTF Standard nebo WebGL-glTF z nabídky Další volby na domovské obrazovce. 

    Formát dokumentů WebGL-glTF
    Formát dokumentů WebGL-glTF
  2. Zadejte požadovanou šířku, výšku a jednotky a klikněte na tlačítko Vytvořit.

Publikování souboru WebGL-glTF

  1. V inspektoru vlastností klikněte na Nastavení publikování.

    Publikování souboru WebGL-glTF
    Publikování souboru WebGL-glTF
  2. Do pole Název výstupu zadejte název.

    Dialogové okno Nastavení publikování pro dokument ve formátu WebGL-glTF Standard
    Dialogové okno Nastavení publikování pro dokument ve formátu WebGL-glTF Standard
  3. Jako formát vyberte GLB nebo GLTF.

  4. Do pole Rozlišení obrázku zadejte desetinné číslo v rozsahu 1–3.

  5. Zaškrtněte políčko Odstranit prázdná místa v souboru JSON, pokud chcete zmenšit velikost souboru.

  6. Ve výchozím nastavení jsou zaškrtnuta políčka Opakovat časovou osu a Zahrnout skryté vrstvy. Můžete zrušit jejich zaškrtnutí, pokud chcete vyhledat všechny malé chyby.

  7. Publikujte soubor kliknutím na tlačítko Publikovat.

Výuková lekce pro export ve formátu WebGL-glTF (Standard a Extended)

Výuková lekce pro export ve formátu WebGL-glTF (Standard a Extended)
Video s ukázkou exportu ve formátu WebGL-glTF (Standard a Extended)

Animate CC 18.0 a starší verze

Pokud používáte Animate CC 18.0 nebo některou z předchozích verzí aplikace Animate CC, přečtěte si následující informace.

Formát dokumentů WebGL

Animate CC umožňuje vytváření a publikování pestrého interaktivního obsahu ve formátu WebGL (Web Graphics Library). Protože je rozhraní WebGL plně integrované v prohlížečích, může díky tomu Animate využívat ke zpracovávání a vykreslování grafiky i grafický akcelerátor (jako součást plátna webové stránky).

Tento nový formát dokumentů umožňuje vytvářet obsah a rychle ho publikovat do výstupu WebGL. Pestrý obsah můžete vytvářet pomocí vyspělých nástrojů aplikace Animate, ale potom ho vykreslovat do výstupu WebGL, který půjde přehrát v každém kompatibilním prohlížeči. To znamená, že můžete pomocí tradiční časové osy, pracovní plochy a kreslicích nástrojů aplikace Animate nativně vyvíjet a vytvářet obsah WebGL. Nejpoužívanější prohlížeče už WebGL podporují, díky čemuž můžete v Animate vytvářet obsah pro většinu webových platforem.

Poznámka:

Podpora pro WebGL je k dispozici pouze jako náhled. Tato aktualizace aplikace Animate obsahuje podporu základních animací se zvukem a skriptováním a dále sadu interaktivních funkcí. V budoucích verzích aplikace Animate budou pro dokumenty typu WebGL aktivovány další funkce. Úplný seznam funkcí aplikace Animate, které jsou podporovány pro WebGL, naleznete v tomto článku znalostní databáze.

Vytvoření dokumentu WebGL

Pomocí dokumentu WebGL můžete v Animate CC snadno vytvářet a publikovat obsah pro formát WebGL. Postup vytvoření dokumentu WebGL:

  1. Spusťte aplikaci Animate CC.
  2. Na úvodní obrazovce klikněte na možnost WebGL(náhled). Můžete také vybrat položku nabídky Soubor > Nový, tím se zobrazí dialog Nový dokument. Klikněte na možnost WebGL (náhled).

Náhled obsahu WebGL v prohlížečích

Pomocí funkce Testovací film si můžete v Animate zobrazit zkušební náhled svého obsahu. Náhled zobrazíte takto:

  1. V Animate CC stiskněte klávesy Ctrl+Enter (Windows) nebo Cmd+Enter (Mac). Tím se spustí výchozí prohlížeč a vykreslí se obsah WebGL.
Aplikace Animate CC potřebuje ke spuštění obsahu WebGL webový server. Aplikace Animate CC obsahuje vestavěný webový server nakonfigurovaný na spouštění obsahu WebGL na portu č. 8090. Pokud už je port používán jiným serverem, Animate tento konflikt automaticky zjistí a vyřeší.

Publikování obsahu ve formátu WebGL

Animate umožňuje nativní vytváření a publikování obsahu WebGL přímo ve svém prostředí.

Při publikování dokumentu WebGL postupujte takto:

  1. Výběrem volby Soubor > Nastavení publikování zobrazte dialogové okno Nastavení publikování. Můžete také vybrat položku Soubor > Publikovat, pokud jste již určili nastavení publikování pro WebGL.
  2. V dialogu Nastavení publikování zadejte hodnoty pro tyto položky:

Výstupní soubor

Zadejte pro výstup příhodný název. Také vyhledejte nebo zadejte umístění, kde chcete publikovat výstup WebGL.

Přepsat HTML

Umožňuje určit, zda přepsat nebo nepřepisovat soubor obálky HTML při každém publikování produktu WebGL. Výběr této možnosti můžete zrušit, pokud jste v publikovaném HTML souboru provedli nějaké externí změny a ty teď chcete zachovat, přestože chcete zároveň aktualizovat změny provedené v animaci a datových zdrojích v aplikaci Animate CC.

Zahrnout skryté vrstvy

Zahrne do výstupu WebGL skryté vrstvy. Zrušením výběru možnosti Zahrnout skryté vrstvy znemožníte export všech vrstev (včetně vrstev vnořených uvnitř filmových klipů), které jsou označeny jako skryté, do výsledného obsahu WebGL. Díky tomu můžete snadno testovat různé verze dokumentu WebGL, když nastavíte vrstvy jako neviditelné.

Opakovat časovou osu

Po dosažení posledního snímku se obsah začne přehrávat znovu. Tuto volbu vypněte, pokud chcete, aby se přehrávání obsahu zastavilo po dosažení posledního snímku.

webGL_publishSettings
  1. Kliknutím na tlačítko Publikovat publikujte obsah WebGL v určeném umístění.

Poznámka:

Maximální frekvence snímků, kterou lze zadat pro obsah WebGL spustitelný v prohlížečích, je 60 fps.

Princip výstupu WebGL

Publikovaný výstup WebGL obsahuje tyto soubory:

Soubor obálky HTML

Obsahuje běhové prostředí, volá datové zdroje a také inicializuje vykreslovací modul WebGL. Tento soubor má ve výchozím nastavení název <FLA_název>.html. Pro soubor HTML můžete zadat jiný název v dialogu Nastavení publikování (Soubor > Nastavení publikování).

Soubor HTML bude ve výchozím nastavení umístěn ve stejné složce jako soubor FLA. V dialogu Nastavení publikování lze zadat jiné umístění.

Soubor JavaScript (běhové prostředí WebGL)

Vykreslí publikovaný obsah v rozhraní WebGL. Publikuje se ve složce libs/ dokumentu WebGL. Soubor má tento název: flwebgl-<verze>.min.js

Obálka HTML tento soubor JS použije k vykreslení obsahu WebGL.

Atlas textur

Obsahuje všechny hodnoty barev (jednotlivých tvarů) včetně instancí bitmap na ploše.

Přidání zvuku do dokumentu WebGL

Do dokumentu WebGL můžete importovat a vkládat zvuk, ovládat přehrávání pomocí nastavení synchronizace (událost, začátek a konec) a přehrávat zvuk na časové ose v době běhu. Rozhraní WebGL v současné době podporuje pouze formáty .wav a .mp3.

Další informace o práci se zvukem najdete v tématu Používání zvuků v aplikaci Animate.

Převod stávajícího obsahu do dokumentu WebGL

Stávající obsah můžete v aplikaci Animate převést do dokumentu WebGL. Aplikace Animate totiž umožňuje převod ručním kopírováním nebo importováním obsahu. Při práci s více dokumenty v aplikaci Animate je běžný postup, kdy uživatel kopíruje obsah mezi jednotlivými dokumenty coby vrstvy nebo coby datové zdroje v knihovně. Přestože je podporována většina funkcí aplikace Animate, některé typy obsahu budou upraveny, aby lépe vyhovovaly formátu WebGL.

Aplikace Animate obsahuje několik praktických funkcí, které usnadňují tvorbu vizuálně pestrého obsahu. Jelikož jsou ale některé z těchto funkcí nativní pro Animate, dokumenty typu WebGL je nepodporují. Aplikace Animate takový obsah změní na podporovaný formát a vizuálně označí nepodporované nástroje nebo funkce.

Kopírování

obsahu (vrstev nebo symbolů knihovny) z tradičního typu dokumentu Animate (jako je ActionScript 3.0, AIR for Android, AIR for Desktop atd.) do dokumentu WebGL. V takovém případě bude nepodporovaný typ obsahu odstraněn nebo převeden na podporované výchozí typy.

Například kopírováním 3D animace budou odstraněny všechny 3D transformace použité na objekt na ploše.

Import

souboru PSD nebo AI s nepodporovaným obsahem. V této situaci bude obsah odstraněn nebo převeden na podporované výchozí typy.

Jde například o import souboru PSD s použitým efektem Rozostření. Animate tento efekt odstraní.

Práce

s více typy dokumentů (například ActionScript 3.0 a WebGL) najednou, kdy mezi dokumenty přepínáte pomocí nepodporovaného nástroje nebo volby. V takovém případě aplikace Animate CC vizuálně upozorní na to, že funkce není podporována.

Dejme tomu, že jste například vytvořili tečkovanou čáru v dokumentu ActionScript 3.0 a přepnete na dokument HTML WebGL, zatímco máte vybraný nástroj Čára. Sledujte ukazatel a Inspektor vlastností – vizuálně označují, že tečkovaná čára není v dokumentu WebGL podporována.

Skripty

Na panelu Akce, který se spustí po přechodu přehrávače na snímek, můžete zapsat kód Javascript. Proměnná „tento“ v kontextu skriptů snímku odkazuje na instanci filmového klipu, do které patří. Kromě toho mají skripty snímků přístup k funkcím a proměnným Javascript deklarovaným v souboru HTML kontejneru. Když zkopírujete snímek nebo vrstvu z dokumentu ActionScript a vložíte je do dokumentu WebGL, budou případné skripty okomentovány.

Změny provedené v obsahu po migraci

Níže jsou uvedeny typy změn, které budou provedeny při migraci staršího obsahu do dokumentu HTML WebGL.

Obsah bude odstraněn

Typy obsahu, které nejsou podporovány v dokumentu HTML5 Canvas, budou odstraněny. Příklad:

Filtry

nejsou podporovány. Efekt bude odstraněn a namísto něho bude ve tvaru plná výplň.

Filters
Efekt filtru Rozostření byl odstraněn a nahrazen plnou výplní.

Obsah se změní na podporovanou výchozí hodnotu

Typ nebo funkce obsahu jsou podporovány, ale vlastnost funkce podporována není. Příklad:

 

Kruhový přechod

se změní na plnou výplň s primární barvou.

Radial Gradient
Kruhový přechod se změní na plnou výplň s primární barvou.

Úplný seznam nepodporovaných funkcí a jejich náhradních hodnot po převodu naleznete v tomto článku.

Zvýšení výkonu vykreslování pomocí ukládání bitmap do vyrovnávací paměti

Ukládání bitmap za běhu do vyrovnávací paměti umožňuje optimalizovat výkon při vykreslování tím, že určíte, aby se statický filmový klip (například obraz pozadí) nebo symbol tlačítka za běhu ukládal jako bitmapa do vyrovnávací paměti. Ve výchozím nastavení jsou ve všech snímcích překresleny vektorové položky. Uložením filmového klipu nebo symbolu tlačítka jako bitmapy do vyrovnávací paměti lze předejít neustálému překreslování položky, protože daný obraz je bitmapa a jeho pozice se nemění. To přináší značné zlepšení výkonu při vykreslování obsahu WebGL.

Pokud například vytváříte animaci se složitým pozadím, vytvořte filmový klip, který bude obsahovat všechny položky umístěné v pozadí. Poté v inspektoru vlastností u filmového klipu pozadí vyberte Ukládat do vyrovnávací paměti jako bitmapu. Během přehrávání se pozadí bude vykreslovat jako bitmapa uložená s použitím aktuální barevné hloubky obrazovky. Prohlížeč vykreslí bitmapu na scéně rychle a pouze jednou, díky čemuž se animace bude přehrávat rychleji a plynuleji.

Ukládání bitmap do vyrovnávací paměti umožňuje použít filmový klip a automaticky ho zastavit na místě. Pokud se nějaká oblast změní, bitmapa uložená ve vyrovnávací paměti se zaktualizuje s použitím vektorových dat. Tento proces minimalizuje počet překreslování, které musí prohlížeč provádět, a zajišťuje tak plynulejší a rychlejší vykreslování.

Pokud chcete u symbolu filmového klipu povolit vlastnost Uložit do vyrovnávací paměti jako bitmapu, vyberte instanci filmového klipu a v rozevírací nabídce Vykreslit v Inspektoru vlastností vyberte možnost Uložit do vyrovnávací paměti jako bitmapu (Okno > Vlastnosti).

CacheAsBitmap

Co je třeba vzít v úvahu při použití vlastnosti Uložit do vyrovnávací paměti jako bitmapu

Pokud v obsahu WebGL používáte vlastnost Uložit do vyrovnávací paměti jako bitmapu, vezměte v úvahu toto:

  • Maximální velikost symbolu filmového klipu je omezena na 2048x2048. Skutečné hranice instance filmového klipu, které lze uložit do vyrovnávací paměti, jsou menší než 2048x2048, rozhraní WebGL si vyhrazuje některé obrazové body.
  • Pokud existuje více instancí stejného filmového klipu, aplikace Animate vygeneruje vyrovnávací paměť o velikosti první nalezené instance. Vyrovnávací paměť se však znovu nevygeneruje a vlastnost Uložit do vyrovnávací paměti jako bitmapu není ignorována, a to ani v případě, že se transformace filmového klipu do značné míry změní. Proto platí, že pokud se v průběhu animace výrazně mění velikost symbolu filmového klipu, může při přehrávání animace docházet k pixelizaci (rozpadu obrazu na jednotlivé obrazové body).

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online