Poznámka:

Typekit se nyní nazývá Adobe Fonts a je součástí služby Creative Cloud a dalších předplatných. Další informace.

Co je HTML5 Canvas?

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 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 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.
Nový dokument
Nový dokument

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

Rady při psaní kódu

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:

Zvýraznění syntaxe

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.

Barevné zvýraznění kódu

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

Závorky

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

Code_Aspects
(A) Zvýraznění syntaxe (B) Barvení kódu (C) 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 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.

Odkazy na dokumentaci k rozhraní CreateJS

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í

publish-settings-basics

Výstup

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

Opakovat časovou osu

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.

Zahrnout skryté vrstvy

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

Vystředit plochu

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.

Nastavit responzivní

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.

Změnit velikost podle viditelné oblasti

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.

Zahrnout předběžné načítání:

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.

Publish settings
Nastavení publikování

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.

Publish_settings_root
Publikování datových zdrojů pláten do kořenové složky

Exportovat obrazové datové zdroje

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

Exportovat zvukové datové zdroje

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

Exportovat datové zdroje CreateJS

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

Poznámka:

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

Rozšířená nastavení

publish_settings_output

Možnosti exportu datových zdrojů

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.

JSEmbed23
Export-spritesheets
Publish_Settings_JavaScript_Namespaces

Předloha pro publikování HTML:

 

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.

Hostované knihovny:

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.

Zahrnout skryté vrstvy:

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

Kompaktní tvary:

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

Ohraničení více snímků:

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

Přepsat soubor HTML při publikování a Zahrnout JavaScript do HTML:

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.

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

Poznámka:

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:

Atribut/Parametr Proměnná v šabloně
Název HTML dokumentu $TITLE
Vyhrazené místo na vložení skriptů CreateJS $CREATEJS_LIBRARY_SCRIPTS
Vyhrazené místo na vložení generovaných skriptů (včetně skriptů webových písem) $ANIMATE_CC_SCRIPTS
HTML značka pro spuštění skriptu na straně klienta $SCRIPT_START
Vyhrazené místo na kód pro vytvoření zavaděče (CreateJS LoadQueue) $CREATE_LOADER
Vyhrazené místo na kód pro načítání datových zdrojů obsažených v manifestu $LOAD_MANIFEST
Vyhrazené místo na kód definující metodu načítání souborů $HANDLE_FILE_LOAD_START
Vyhrazené místo na kód pro práci s událostmi načítání souborů $HANDLE_FILE_LOAD_BODY
Vyhrazené místo na kód uzavírající způsob načítání souborů $HANDLE_FILE_LOAD_END
Vyhrazené místo na kód definující metodu „handle complete“, která je volána po načtení datových zdrojů $HANDLE_COMPLETE_START
Vyhrazené místo na kód pro vytvoření plochy $CREATE_STAGE
Vyhrazené místo na kód pro registraci události „tick“, po které se spustí animace $START_ANIMATION
Vyhrazené místo na kód pro podporu responzivních změn velikosti a HiDPI displejů $RESP_HIDPI
Vyhrazené místo na kód uzavírající metodu „handle complete“ $HANDLE_COMPLETE_END
Vyhrazené místo na funkci pro práci s obsahem obsahujícím
zvuky
$PLAYSOUND
Vyhrazené místo na výběr stylu pro podporu vystředění plátna $CENTER_STYLE
Vyhrazené místo na vlastnost stylu zobrazení plátna, kvůli podpoře nástroje pro předběžné načítání („preloaderu“). $CANVAS_DISP
Vyhrazené místo na kód pro zobrazení nástroje pro předběžné načítání $PRELOADER_DIV
HTML značka pro zastavení skriptu na straně klienta $SCRIPT_END
Identifikátor prvku na plátně $CANVAS_ID
Šířka plochy nebo prvku na plátně $WT
Výška plochy nebo prvku na plátně $HT
Barva pozadí plochy nebo prvku na plátně $BG
Verze Animate CC, ve které byl obsah
vygenerován
$VERSION

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

Atribut/Parametr Proměnná v šabloně
Vyhrazené místo na vložení skriptů (CreateJS a generovaného JavaScriptu) $CREATEJS_SCRIPTS
Vyhrazené místo na skript pro inicializaci knihoven CreateJS, načítání médií a vytváření a upravování plochy $CJS_INIT*

Poznámka:

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

Poznámka:

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

Mering Json
Sloučení JavaScriptu s HTML

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

  1. Vyberte Okno > Akce.

    actions-add-script
  2. Na panelu Akce vyberte v hierarchii Globální položku Skript.

    V části Globální skript můžete psát skripty použitelné v různých dokumentech v rámci aplikace Animate nebo jako externí skripty.

    Použití globálního skriptu jako externího skriptu: Na obrazovce Zahrnout vyberte požadovaný skript a použijte jej postupem popsaným v následující části.

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

  1. Vyberte Okno > Akce.

  2. Na panelu Akce vyberte v hierarchii Globální položku Zahrnout.

  3. Klikněte na tlačítko + a přidejte skript zadáním externí adresy URL nebo přidejte požadovaný soubor umístěný v místní knihovně.

    actions-include

    Po přidání skriptů můžete změnit jejich pořadí podle jejich vzájemných závislostí, protože některé objekty jsou závislé na jiných předem definovaných knihovnách.

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.

 

canvas tranperancy_final
Průhlednost plátna

advanced_settings
Průhlednost plátna: Rozšířená nastavení

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.   
sprite-sheet
Export-spritesheets-1

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.

Static-text

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

Princip výstupu HTML5 Canvas

Publikovaný výstup HTML5 obsahuje tyto soubory:

Soubor HTML

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. 

Soubor JavaScript

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

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

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.

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

Práce

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

Skripty

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

Obsah bude odstraněn

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

Obsah se změní podle podporované výchozí hodnoty

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 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.
Chcete-li převést dokument AS3 na dokument HTML5 Canvas, postupujte takto:
  1. V aplikaci Animate CC otevřete dokument ActionScript 3.
  2. Vyberte Příkazy > Převést AS3 na dokument HTML5 Canvas.

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