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

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.

Nový typ dokumentu HTML5 Canvas

Animate 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 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 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 a rozhraní API 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.

Vytvoření dokumentu HTML5 Canvas

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.

Doplnění interaktivity do dokumentu HTML5 Canvas

Aplikace Animate 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. 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:

Umožňují rychlé a bezchybné vkládání a úpravy kódu JavaScript. Při psaní znaků na panelu Akce se zobrazí seznam návrhů, které by mohly dokončit zadávaný řetězec.

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:

Zobrazuje kód různými písmy nebo barvami podle syntaxe. Tato funkce umožňuje zápis kódu strukturovaným způsobem, který usnadňuje vizuální rozlišování správného kódu a chyb syntaxe.

Zobrazuje kód různými barvami podle syntaxe. Tím umožňuje vizuální rozlišení jednotlivých součástí syntaxe.

Při psaní kódu JavaScript se k levým závorkám automaticky doplňují pravé jednoduché nebo složené závorky.

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.

Používání fragmentů kódu jazyka JavaScript

V aplikaci Animate 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.

Odkazy na dokumentaci k rozhraní CreateJS

Kódy pro podporu interaktivity

Javascript nabízí různé možnosti, jak vytvořit interaktivní animaci. Chcete se naučit, jak můžete své postavě přidat interaktivní pohyby? Podívejte se na výukové video na konci tohoto příkladu a postupujte podle těchto kroků.

Jak vytvořit interaktivní obsah pomocí HTML5

Publikování animací v jazyce HTML5

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

Základní nastavení

Složka, ve které se publikuje soubor FLA. Jako výchozí je určena stejná složka jako pro soubor FLA, lze ji ale změnit pomocí tlačítka Procházet ....

Pokud je tato možnost zaškrtnuta, časová osa se opakuje, v opačném případě se zastaví po přehrání do konce.

Pokud tato možnost není vybrána, do výstupu nebudou zahrnuty skryté vrstvy.

Umožňuje nastavit, zda se má plocha vystředit vodorovně, svisle nebo v obou směrech. Ve výchozím nastavení se plocha (respektive plátno) HTML zobrazuje ve středu okna prohlížeče.

Umožňuje nastavit, aby animace používala responzivní výšku, šířku nebo obojí, a mění velikost publikovaného výstupu podle různých rozměrů. Výsledkem je responzivní, ostrý a jasný výstup kompatibilní s HiDPI zařízeními.

Výstup se zárovně roztáhne tak, aby bez okrajů pokryl celou plochu obrazovky. Zároveň si však zachová původní poměr stran za cenu toho, že malá část plátna se nemusí vejít na obrazovku.

• Volby Šířka, Výška a Obojí zajišťují, že veškerý obsah se zmenší na velikost plátna a bude viditelný i na malých obrazovkách (například na mobilních telefonech nebo tabletech). Pokud je velikost obrazovky větší než velikost vymezené plochy, zobrazí se plátno v původní velikosti.

Umožňuje nastavit, zda má animace v režimu celé obrazovky změnit velikost při zachování poměru stran anebo zda se má roztáhnout. Ve výchozím nastavení je tato volba vypnutá.

Podle zobrazení: V režimu celé obrazovky zobrazí výstup tak, aby vyplňoval celou obrazovku, a přesto si zachoval poměr stran.

Roztáhnout na míru: Roztáhne výstup tak, aby nevznikaly žádné okraje ani ořezy.

Určuje, zda se má používat výchozí nástroj pro předběžné načítání nebo zda chce uživatel vybrat vlastní nástroj z knihovny dokumentů.

Nástroj pro předběžné načítání je vizuální indikátor v podobě animovaného obrázku GIF, který se zobrazuje, zatímco se stále načítají skripty a zdroje potřebné pro vykreslení animace. Jakmile se zdroje načtou, předběžné načítání se skryje a místo něj se zobrazí sama animace.

Ve výchozím nastavení není předběžné načítání zapnuté.

• Volba Výchozí znamená, že se bude používat výchozí nástroj předběžného načítání.
• Volbou Procházet můžete použít obrázek GIF, který si sami vyberete. Obrázek GIF pro předběžné načítání se zkopíruje do složky obrázků nastavené v části Exportovat obrazové datové zdroje.
• Volbou Náhled zobrazíte náhled vybraného obrázku GIF.

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.

Exportovat dokument jako texturu Umožňuje exportovat vektorové animace jako textury za účelem zlepšení výkonu animací. Další informace viz Publikování textur.

 Tuto možnost lze použít, pouze pokud není zaškrtnuté políčko Sloučit do přehledu pohyblivých symbolů.

Můžete exportovat všechny importované obrázky (včetně komprimovaných) z dokumentu Canvas při zachování jeho velikosti. Na kartě Základní zrušte zaškrtnutí políček Exportovat dokument jako texturu a Sloučit do přehledu pohyblivých symbolů. Obrázky budou exportovány bez změny velikosti.

Složka, do které se ukládají obrazové zdroje a ze které jsou pak odkazovány.

Zkombinovat do pohyblivých symbolů: Výběrem této volby zkombinujete všechny obrazové zdroje do pohyblivých symbolů. Další možnosti pohyblivých symbolů popisuje část Export bitmap jako pohyblivých symbolů.

Složka, do které se ukládají zvukové zdroje vašeho dokumentu a ze které jsou pak odkazovány.

Složka, do které se ukládají knihovny CreateJS a ze které jsou pak odkazovány.

 Ve výchozím nastavení se publikované soubory rozdělují do logických podsložek.

Rozšířená nastavení

Relativní adresy URL pro export obrazů, zvuků a pomocných knihoven jazyka JavaScript v rozhraní CreateJS. Pokud políčko vlevo není zaškrtnuto, příslušné datové zdroje nebudou ze souboru FLA exportovány, ale zadaná cesta se přesto použije k sestavení jejich adres URL. Urychlí publikování ze souboru FLA s velkým množstvím multimediálních datových zdrojů nebo zabrání přepsání změněných knihoven jazyka JavaScript.

Volba Exportovat všechny bitmapy jako pohyblivé symboly umožňuje sbalit všechny bitmapy v dokumentu ve formátu Canvas jako přehled obrázků pohyblivých symbolů, což snižuje počet serverových požadavků a zlepšuje výkon. Maximální rozměry přehledu pohyblivých symbolů určíte tím, že zadáte výšku a šířku.

Použít výchozí: Publikujte výstup HTML5 pomocí výchozí šablony.

Importovat nové: Importujte novou šablonu pro dokument HTML5.

Exportovat: Exportujte dokument HTML5 jako předlohu.

Pokud je tato možnost zaškrtnuta, použijí se kopie knihoven hostovaných v síti CDN rozhraní CreateJS na webu code.createjs.com. Umožňuje ukládání knihoven do vyrovnávací paměti a sdílení různými servery.

Pokud tato možnost není vybrána, do výstupu nebudou zahrnuty skryté vrstvy.

Pokud je tato možnost zaškrtnuta, vektorové instrukce budou mít ve výstupu kompaktní formát. Po zrušení výběru budou exportovány čitelné podrobné instrukce (vhodné pro účely výuky).

Pokud je tato možnost zaškrtnuta, symboly časové osy budou zahrnovat vlastnost frameBounds obsahující libovolné pole obdélníků odpovídajících ohraničením jednotlivých snímků na časové ose. Ohraničení více snímků značně prodlužují publikování.

Máte-li zapnutou volbu Zahrnout JavaScript do HTML, políčko Přepsat soubor HTML při publikování bude automaticky zaškrtnuté a neaktivní.Pokud zrušíte zaškrtnutí políčka Přepsat soubor HTML při publikování, zruší se i zaškrtnutí políčka Zahrnout JavaScript do HTML a to se stane neaktivním.

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

 Animaci navrženou s použitím vnořených časových os a jediného snímku nelze opakovat.

Proměnné HTML šablon

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

 Tyto tokeny byly rozděleny do samostatných modulů a nahrazeny jinými tokeny.

Podpora JSAPI pro import a export HTML šablon u dokumentů Canvas

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/uživatelské jméno/desktop/CanvasTemplate.html”;

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

if(!exportFlag)

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

Vkládání JavaScriptu do HTML

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.

 Pokud nechcete přepisovat soubory HTML, pamatujte na to, že volby Přepsat soubor HTML při publikování a Vložit JS do HTML nemůžou být zapnuté zároveň.

Přidávání globálních skriptů a skriptů třetích stran

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ů:

Přidání skriptů třetích stran

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

Sloučení dat JSON do JavaScriptu

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.

Optimalizace výstupu formátu HTML5 Canvas

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

Nastavení průhledného pozadí plátna

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.

Podpora políčka „žádná barva“

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.

Export bitmap jako pohyblivých symbolů

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.   

Práce s textem v dokumentu HTML5 Canvas

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

Statický 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

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.

Přidání webových písem do dokumentu HTML5 Canvas

Funkce Dynamický text v Animate 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, 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.

Princip výstupu HTML5 Canvas

Publikovaný výstup HTML5 obsahuje tyto soubory:

Obsahuje definice všech tvarů, objektů a kreseb v elementu Canvas. Také vyvolává jmenný prostor rozhraní CreateJS pro převod formátu Animate na HTML5 a odpovídající soubor JavaScript, který obsahuje interaktivní prvky. 

Obsahuje vyhrazené definice a kód pro všechny interaktivní prvky animace. V souboru JavaScript je rovněž definován kód pro všechny typy doplnění.

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

Migrace stávajícího obsahu do dokumentu HTML5 Canvas

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

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

V případě importu souboru PSD s použitým efektem Úkos s přechodem Aplikace Animate tento efekt odstraní.

s více typy dokumentů (například ActionScript 3.0 a HTML5 Canvas) současně a přepnutí dokumentů s vybraným nepodporovaným nástrojem nebo volbou. V takovém případě vás Animate vizuálně upozorní na to, že funkce není podporována.

Vytvořili jste například tečkovanou čáru v dokumentu ActionScript 3.0 a přepnete na dokument HTML5 Canvas s dosud vybraným nástrojem Čára. Sledujte ukazatel a Inspektor vlastností – zobrazují ikony, které udávají, že tečkovaná čára není v dokumentu HTML5 Canvas podporována.

Komponenty jazyka ActionScript budou odstraněny a kód označen jako komentář. Pokud je navíc JavaScript zapsán do bloku komentáře (týká se sady nástrojů pro rozhraní CreateJS a aplikace Animate 13.0), je nutné u tohoto kódu ručně zrušit označení, že jde o komentář.

Pokud jste například zkopírovali vrstvy obsahující tlačítka, budou tato tlačítka odstraněna.

Změny provedené v obsahu po migraci

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

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

• 3D transformace budou odstraněny
• Kód jazyka ActionScript bude označen jako komentář
• Videa budou odstraněna

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

• Režim prolnutí Překrytí není podporován a bude změněn na Normální.
• Tečkovaná čára není podporována a bude změněna na plnou.

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

Převod ostatních typů dokumentů na dokumenty HTML5 Canvas

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ů

Převod dokumentu ActionScript 3 na dokument HTML5 Canvas pomocí skriptu JSFL

Aplikace Animate 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 otevřete dokument ActionScript 3.
2. Vyberte Příkazy > Převést AS3 na dokument HTML5 Canvas.

 Tuto možnost lze použít, pouze pokud není zaškrtnuté políčko Sloučit do přehledu pohyblivých symbolů.