Vytváření a publikování dokumentů HTML5 Canvas v aplikaci Animate CC

Canvas je nový element v jazyce HTML5 s rozhraními API, která umožňují dynamické generování a vykreslování grafik, diagramů, obrazů a animace. Přítomnost rozhraní API Canvas pro HTML5 zvyšuje funkčnost platformy HTML5, protože poskytuje funkce dvourozměrného kreslení. Tyto funkce jsou podporovány ve většině moderních operačních systémů a prohlížečů.

Canvas je v podstatě modul pro vykreslování bitmap a kresby jsou definitivní a nelze měnit jejich rozměry. Objekty nakreslené na elementu Canvas navíc nejsou součástí modelu DOM webové stránky.

Na webové stránce lze elementy Canvas přidávat pomocí tagu <Canvas> . Tyto elementy je pak možné vylepšit vytvořením interaktivity pomocí jazyka JavaScript. Další informace získáte kliknutím na tento odkaz.

Animate CC umožňuje vytvářet dokumenty HTML5 Canvas s pestrou grafikou, animacemi, kresbami a dalším obsahem. Aplikace Animate byla doplněna o nový typ dokumentu (HTML5 Canvas), který zajišťuje nativní podporu pro vytváření bohatého a interaktivního obsahu HTML5. To znamená, že můžete pomocí tradiční časové osy, pracovní plochy a nástrojů aplikace Animate vytvářet obsah, jehož výsledkem bude výstup v HTML5. Několika kliknutími tak můžete vytvořit dokument HTML5 Canvas a vygenerovat plně funkční výstup. V aplikaci Animate jsou totiž volby dokumentu a publikování přednastaveny tak, aby generovaly výstup HTML5.

Aplikace Animate CC je integrována s rozhraním CreateJS, které aktivuje bohatý interaktivní obsah v otevřených webových technologiích prostřednictvím HTML5. Aplikace Animate CC generuje kód HTML a JavaScript pro obsah (včetně bitmap, vektorů, tvarů, zvuků, doplnění atd.) vytvořený na ploše. Výstup lze spouštět v libovolném zařízení nebo prohlížeči s podporou elementu HTML5 Canvas.

Aplikace Animate publikuje v jazyce HTML5 s využitím rozhraní API Canvas. Aplikace Animate plynule převádí objekty vytvořené na ploše na jejich protějšky na plátně. Mapováním funkcí aplikace Animate 1:1 na rozhraní API uvnitř elementu Canvas umožňuje aplikace Animate publikovat složitý obsah v jazyce HTML5.

Dokument HTML5 Canvas vytvoříte takto:

1. Výběrem možnosti Soubor > Nový zobrazte dialog Nový dokument. V horní části obrazovky vyberte kartu Další volby a potom klikněte na možnost tHTML5 Canvas. Otevře se nový soubor FLA se změněným nastavením publikováním na tvorbu výstupu HTML5.

Nyní můžete začít vytvářet obsah HTML5 pomocí nástrojů aplikace Animate. Na začátku práce s dokumentem HTML5 Canvas si všimněte, že některé funkce a nástroje nejsou podporovány, a proto jsou vypnuté. Je to dáno tím, že aplikace Animate podporuje takové funkce, které v HTML5 podporuje element Canvas. Podporovány nejsou například 3D transformace, tečkované čáry a efekty úkosu.

Aplikace Animate CC používá k publikování obsahu HTML5 knihovny CreateJS. CreateJS je sada modulárních knihoven a nástrojů, které pomocí HTML5 umožňují používání bohatého interaktivního obsahu v otevřených webových technologiích. Sadu CreateJS tvoří: EaselJS, TweenJS, SoundJS a PreloadJS. CreateJS převodem obsahu vytvořeného na ploše na HTML5 pomocí těchto jednotlivých knihoven vytváří výstupní soubory HTML a JavaScript. Manipulací s tímto souborem JavaScript můžete také vylepšit obsah.

Do objektů na ploše, které byly vytvořeny pro dokument HTML5 Canvas, lze možnosti interakce zavést i v prostředí aplikace Animate CC. To znamená, že v aplikaci Animate můžete do jednotlivých objektů na ploše přidávat kód JavaScript a přímo při jeho vytváření zobrazovat náhled. Aplikace Animate zase nabízí nativní podporu JavaScriptu, včetně praktických funkcí v editoru kódu, které zvyšují efektivitu pracovních postupů u programátorů.

K doplnění možností interakce do obsahu můžete vybírat jednotlivé snímky a klíčové snímky na časové ose. V případě dokumentu HTML5 Canvas lze interaktivitu zajistit pomocí jazyka JavaScript. Další informace o psaní kódu JavaScript zobrazíte kliknutím na tento odkaz.

Kód JavaScript je možné psát přímo na panelu Akce a při jeho psaní jsou podporovány tyto funkce:

Navíc aplikace Animate při práci s dokumentem HTML5 Canvas podporuje některé funkce panelu Akce. Tyto funkce přispívají ke zvýšení efektivity při doplňování interaktivity do objektů na ploše. Jedná se o tyto funkce:

Možnosti interakce lze do tvarů a objektů na ploše zavádět pomocí jazyka JavaScript. Kód JavaScript můžete přidávat do jednotlivých snímků a klíčových snímků.

1. Vyberte snímek, do kterého chcete přidat kód JavaScript.
2. Výběrem položky Okno > Akce otevřete panel Akce.

V aplikaci Animate CC jsou dostupné fragmenty kódu JavaScript, které umožňují přidat interaktivitu. Chcete-li získat přístup k fragmentům kódu a používat je, vyberte Okno > Fragmenty kódu. Další informace o přidávání fragmentů kódu JavaScript naleznete v tomto článku.

Chcete-li publikovat obsah na ploše v jazyce HTML5, postupujte takto:

1. Vyberte Soubor > Nastavení publikování.
2. V dialogovém okně Nastavení publikování zadejte následující nastavení:

Pomocí přepínacích voleb nastavte, zda chcete publikovat do kořenové složky, nebo na úrovni podsložek. Toto tlačítko je ve výchozím nastavení zapnuté. Jeho vypnutím deaktivujete pole složky. Datové zdroje se pak budou exportovat do stejné složky jako výstupní soubor.

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

Když importujete novou HTML šablonu, výchozí proměnné se během publikování nahradí vlastními fragmenty kódu, založenými na komponentech souboru FLA. 

Následující tabulka uvádí proměnné šablon, které Animate momentálně rozeznává a nahrazuje:

V této verzi přestávají být podporovány tyto tokeny z předchozích verzí:

Následující rozhraní JSAPI podporují import a export HTML šablon u dokumentů Canvas:

• Do určeného umístění exportuje šablonu publikování HTML5 Canvas pro daný dokument:

bool document::exportCanvasPublishTemplate(pathURI)

• Příklad:

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Šablonu se nepodařilo exportovat.”);

• Z určeného umístění pathURI importuje a nastaví šablonu publikování HTML5 Canvas pro daný dokument:
  

bool document::importCanvasPublishTemplate(pathURI)

• Příklad: 

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Šablonu se nepodařilo importovat.”);

Animate zavádí možnost vložit soubor s JavaScriptem do souboru HTML během publikování plátna.

1. V nabídce Nastavení publikování přejděte na kartu Rozšířené a zvolte Zahrnout JavaScript do HTML.
2. Výběrem možnosti OK v dialogovém okně Zahrnout JavaScript do HTML znovu publikujete daný obsah, aniž byste přepsali HTML.
3. Tím se zruší výběr zaškrtávacího políčka Přepsat soubor HTML při publikování a během každého dalšího publikování se bude HTML generovat, ale nepřepisovat.
4. Chcete-li vyjmout JavaScript a znovu publikovat soubor HTML, zvolte v dialogovém okně Nezahrnovat do HTML JavaScript možnost OK.
5. Pokud volba Přepsat soubor HTML při publikování není vybraná, automaticky se vypne i volba Zahrnout JavaScript do HTML.

Animátoři často využívají kód JavaScript, který je použitelný pro celou animaci. Tato funkce umožňuje v aplikaci Animate přidávat globální skripty a skripty třetích stran, které nejsou vázány na konkretní snímek animace, a poté je použít na celou animaci. 

Postup pro přidání a použití globálních skriptů:

Animátoři často využívají knihovny JavaScript třetích stran, při tomto postupu však musí ručně upravovat kód generovaný aplikací Animate CC. Tato funkce animátorům umožňuje v animacích pružněji využívat nejnovější knihovny nebo kód JavaScript.

Postup pro přidání skriptů třetích stran:

Na základě zpětné vazby uživatelů a skutečnosti, že soubory JSON se nedají správně zabezpečit, se teď příslušná data slučují do souboru s JavaScriptem. Nevytváří se tedy samostatný soubor JSON.

Jak aplikace Animate optimalizuje velikost a výkon výstupů ve formátu HTML5 Canvas:

• Exportuje bitmapy jako pohyblivé symboly, a to podle voleb, které máte nastavené na panelu Pohyblivý symbol v Nastaveních publikování.
• Vyloučí z publikovaného výstupu skryté vrstvy (zrušením možnosti Zahrnout skryté vrstvy).
• Vyloučí všechny nepoužité datové zdroje, jako jsou zvuky a bitmapy, a všechny datové zdroje na nepoužitých snímcích (výchozí možnost).
• Pokud zrušíte zaškrtnutí možností exportu datových zdrojů obrázků, zvuků a pomocných knihoven JavaScriptu rozhraní CreateJS a použijete k exportu relativní adresy URL, nebudou se ze souboru FLA exportovat datové zdroje.
• Výstup ve formátu HTML5 Canvas kompatibilní s HiDPI: Animate mění velikost výstupu podle toho, jaký má cílové zařízení poměr stran. Díky této kompatibilitě bude výstup ostřejší i při přiblížení a oddálení. Zároveň se tím opravují problémy s pixelací výstupu HTML Canvas při zobrazení na zařízení s vysokým rozlišením DPI (HiDPI).
  

Můžete změnit plátno na libovolnou barvu a také upravit jeho průhlednost. Když vytvoříte plátno s průhledností, při publikování HTML pak uvidíte obsah, který se nachází pod ním.

Poznámka: Tato volba zprůhlední pozadí i při publikování OAM.

1. Vyberte plátno, které chcete upravit.
2. V podokně Vlastnosti vyberte Plocha.
3. V části Plocha vyberte procentuální hodnotu kanálu Alfa.

Pozadí plátna můžete zprůhlednit také tím, že ve vzorníku vyberete políčko Žádná barva.

1. Vyberte Změnit > Dokument > Barva plochy nebo v Inspektoru vlastností vyberte Rozšířená nastavení.
2. Ve vzorníku Barva plochy pak vyberte Žádná barva.

Pokud řadu bitmap použitých v dokumentu HTML5 Canvas exportujete jako jediný přehled obrázků pohyblivých symbolů, snížíte tím počet serverových požadavků, zmenšíte velikost výstupu a zlepšíte výkon. Pohyblivé symboly můžete exportovat buď jako PNG (výchozí), JPEG nebo obojí.

1. Na kartě Pohyblivý symbol zaškrtněte políčko Sloučit obrázek a datové zdroje do jednoho pohyblivého symbolu.
2. Jako Formát vyberte PNG, JPEG nebo Obojí.
   
3. Pokud jste vybrali PNG nebo Obojí, určete v okně Nastavení PNG následující možnosti:
   • Kvalita: Nastavte kvalitu pohyblivého symbolu jako 8 bitů (výchozí), 24 bitů nebo 32 bitů.
   • Maximální velikost: Určete maximální výšku a šířku pohyblivého symbolu v pixelech.
   • Pozadí: Klikněte a nastavte barvu pozadí pohyblivého symbolu.   
4. Pokud jste vybrali JPEG nebo Obojí, určete v okně Nastavení JPEG následující možnosti:
   
   • Kvalita: Nastavte kvalitu pohyblivého symbolu.
   • Maximální velikost: Určete maximální výšku a šířku pohyblivého symbolu v pixelech.
   • Pozadí: Klikněte a nastavte barvu pozadí pohyblivého symbolu.   

Dokumenty HTML Canvas podporují statický i dynamický text.

Statický text je kvalitní metoda, při které se všechny zdroje převedou během publikování na obrysy. Uživatel tak má jistotu, že výsledný text bude vypadat přesně jako v editoru. Jelikož se text publikuje ve formě vektorových obrysů, nelze ho upravovat i za běhu.

Poznámka: Příliš mnoho statického textu může výrazně zvýšit velikost souboru.

Dynamický text umožňuje úpravy textu za běhu a tolik nezvětšuje velikost souboru. Podporuje méně možností než statický text. Podporuje i webová písma ze služby Adobe Fonts.

Pokud ale jako dynamický text použijete písmo, které koncový uživatel nemá nainstalované, zobrazí se výstup ve výchozích systémových písmech a uživatel bude ochuzen o zamýšlený vizuální dojem. Tento problém odpadává při používání webových písem.

Funkce Dynamický text v Animate CC umožňuje používat v dokumentech HTML5 Canvas webová písma. Služba Adobe Fonts nabízí přímý přístup k tisícovkám kvalitních, prvotřídních písem od předních typografů. K písmům Adobe Fonts můžete snadno přistupovat a používat je ve formátu HTML5, který používají moderní prohlížeče a mobilní zařízení, prostřednictvím členství ve službě Creative Cloud.

Pokud se chcete dozvědět něco víc o používání písem Adobe Fonts v aplikaci Animate CC, přečtěte si téma Používání webových písem v dokumentech HTML5 Canvas.

Animate ve verzi 2015.2 vylepšuje vzhled dynamického textu u dokumentu Canvas tím, že synchronizuje jeho rozměry s rozměry plochy.

Poznámka: Pro statický text nejsou písma Adobe Fonts k dispozici.

Publikovaný výstup HTML5 obsahuje tyto soubory:

Tyto soubory se ve výchozím nastavení zkopírují do umístění, ve kterém se nachází soubor FLA. Toto umístění můžete změnit, pokud v dialogu Nastavení publikování zadáte výstupní cestu (Soubor > Nastavení publikování).

Stávající obsah v aplikaci Animate můžete migrovat a generovat z něj výstup HTML5. Aplikace Animate umožňuje migrovat obsah ručně. Jednotlivé vrstvy, symboly a další položky knihovny můžete zkopírovat ručně nebo je můžete importovat. Nebo můžete spustit příkaz Převést AS3 na dokument HTML5 Canvas, který automaticky převede stávající obsah jazyka ActionScript na nový dokument HTML5 Canvas. Další informace získáte kliknutím na tento odkaz.

Při práci s dokumentem typu HTML5 v aplikaci Animate CC jste si mohli všimnout, že některé funkce této aplikace nejsou podporované. Je to dáno tím, že pro tyto funkce v aplikaci Animate neexistují odpovídající funkce v rozhraní API elementu Canvas. Proto tyto funkce nelze použít v typu dokumentu HTML5 Canvas. Může to ovlivnit migraci obsahu, při pokusu o:

Následují typy změn, které budou provedeny při migraci staršího obsahu do dokumentu HTML5 Canvas.

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

Univerzální program pro převod typů dokumentů umožňuje převést stávající projekty FLA (libovolného typu) na libovolný jiný typ dokumentu, jako je HTML5 Canvas, ActionScript/AIR, WebGL, nebo na vlastní typ dokumentu. Při převodu na jiný formát můžete využít funkce pro tvorbu, které Animate pro daný typ dokumentu nabízí. 

Další informace najdete v tématu Převod na jiné formáty dokumentů

Aplikace Animate CC obsahuje skript JSFL pro převod dokumentu AS3 na dokument HTML5 Canvas. Spuštěný skript JSFL provede tyto úkony:

• Vytvoří nový dokument HTML5 Canvas.
• Do tohoto nového dokumentu HTML5 Canvas zkopíruje všechny vrstvy, symboly a položky knihovny.
• Na nepodporované funkce, dílčí funkce nebo vlastnosti funkcí použije výchozí hodnoty.
• Pro jednotlivé scény vytvoří samostatné soubory FLA, protože dokument HTML5 Canvas nepodporuje více scén.

1. V aplikaci Animate CC otevřete dokument ActionScript 3.
2. Vyberte Příkazy > Převést AS3 na dokument HTML5 Canvas.