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.

 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 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.

Publikování souboru WebGL-glTF

Převod animací do formátů GLTF a GLB

WebGL-glTF a GLB zmenšuje velikost souboru a zpracování za běhu. V aplikaci Animate můžete dokumenty používat v obou formátech. Chcete svá videa používat v obou formátech? Podívejte se na výukové video na konci tohoto příkladu a postupujte podle těchto kroků.

Vytváření pokročilých animací pomocí exportu WebGL GLTF v aplikaci Animate

Podívejte se na video a zjistěte, jak vypadá animace ve formátech WebGL GLTF, GLB.

Animate 18.0 a starší verze

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

Dokumenty typu WebGL

Animate 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 akceleraci GPU (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.

 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 snadno a rychle vytvářet a publikovat obsah pro formát WebGL. Postup vytvoření dokumentu WebGL:

1. Spusťte aplikaci Animate.
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 stiskněte klávesy Ctrl+Enter (Windows) nebo Cmd+Enter (Mac). Tím se spustí výchozí prohlížeč a vykreslí se obsah WebGL.

Animate potřebuje ke spuštění obsahu WebGL webový server. Animate 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. Vyberte položku Soubor > Nastavení publikování, aby se zobrazil dialog 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:

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

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.

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é.

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.

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

 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:

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í.

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.

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.

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.

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í.

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ě vás Animate 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.

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.

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

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

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

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

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).

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).