Skapa och publicera HTML5 Canvas-dokument i Animate

Canvas är ett nytt element i HTML5, som tillhandahåller programmeringsgränssnitt för att generera och återge bilder, diagram och animeringar dynamiskt. Med programmeringsgränssnittet HTML5 Canvas får HTML5-plattformen funktioner för tvådimensionell ritning och blir ännu bättre. De flesta moderna operativsystem och webbläsare har stöd för de här funktionerna.

I princip är Canvas en motor för bitmappsåtergivning. Bilderna är slutgiltiga och du kan inte ändra deras storlek. Objekt som ritas med Canvas ingår inte heller i webbsidans DOM.

Inom en webbsida kan du lägga till Canvas-element med taggen <Canvas>. Du kan sedan förbättra de här elementen med JavaScript för att skapa interaktivitet. Klicka på den här länken om du vill ha mer information.

Den nya dokumenttypen HTML5 Canvas

Med Animate kan du skapa ett HTML5 Canvas-dokument med bland annat avancerad grafik, bilder och animeringar. En ny dokumenttyp (HTML5 Canvas), med inbyggt stöd för att skapa interaktivt HTML5-innehåll, har lagts till i Animate. Det innebär att du kan använda tidslinjen, arbetsytan och verktygen i Animate för att skapa innehåll, men ändå producera HTML5-utdata. Med bara några få klickningar kan du skapa ett HTML5 Canvas-dokument och generera fullt fungerande utdata. Alternativen för dokument och publicering i Animate är därför förinställda för att generera HTML5-utdata.

Animate är integrerat med CreateJS, som används för interaktivt innehåll på öppna webbplattformar via HTML5. Animate genererar HTML- och JavaScript-kod för innehåll (bl.a. bitmappar, vektorer, former, ljud och interpoleringar) som skapas på scenen. Utdata kan köras på alla enheter och webbläsare med stöd för HTML5 Canvas.

Animate och Canvas-programmeringsgränssnittet

Animate publicerar till HTML5 via Canvas-programmeringsgränssnittet. I Animate översätts objekt som skapats på scenen till sina Canvas-motsvarigheter. Tack vare 1:1-mappning av Animate-funktioner mot funktioner i Canvas-programmeringsgränssnittet kan du publicera komplext innehåll till HTML5 med Animate.

Skapa ett HTML5 Canvas-dokument

Så här skapar du ett HTML5 Canvas-dokument:

1. Välj menyalternativet Arkiv > Nytt för att visa dialogrutan Nytt dokument. Välj fliken Avancerat överst på skärmen och klicka på alternativet HTML5 Canvas. Då öppnas en ny FLA-fil med Publiceringsinställningar som anpassats för HTML5-utdata.

Nu kan du börja skapa HTML5-innehåll med verktygen i Animate. När du börjar arbeta med HTML5 Canvas-dokumentet kommer du att märka att vissa funktioner och verktyg som inte stöds är inaktiverade. Detta beror på att Animate bara har stöd för de funktioner som i sin tur stöds av Canvas-elementet i HTML5. 3D-omformningar, prickade linjer och avfasningseffekter stöds till exempel inte.

Lägga till interaktivitet i HTML5 Canvas-dokument

Animate publicerar HTML5-innehåll med hjälp av CreateJS-bibliotek. CreateJS är en samling modulära bibliotek och verktyg som möjliggör användning av interaktivt innehåll på öppna webbplattformar via HTML5. CreateJS-samlingen består av: EaselJS, TweenJS, SoundJS och PreloadJS. CreateJS konverterar innehåll som skapats på scenen till HTML5 med dessa individuella bibliotek för att producera HTML- och JavaScript-utdatafiler. Du kan även anpassa den här JavaScript-filen för att förbättra innehållet.

Men med Animate kan du lägga till interaktivitet i objekt på scenen som skapats för HTML5 Canvas direkt. Det betyder att du kan lägga till JavaScript-kod till enskilda objekt på scenen inifrån Animate och förhandsgranska under utvecklingsarbetet. Animate har i sin tur inbyggt stöd för JavaScript, med praktiska funktioner i kodredigeraren som förbättrar arbetsflödet för programmerare.

Du kan välja enskilda bildrutor och nyckelbildrutor på tidslinjen för att lägga till interaktivitet i innehållet. För HTML5 Canvas-dokument kan du lägga till interaktivitet med JavaScript. Klicka på den här länken om du vill ha mer information om att skriva JavaScript-kod.

Du kan skriva JavaScript-kod direkt på åtgärdspanelen, och följande funktioner stöds när du skriver JavaScript-kod:

Används för att snabbt infoga och redigera JavaScript-kod, utan misstag. När du skriver tecken på åtgärdspanelen visas en lista med förslag på det du skriver.

Animate har dessutom stöd för vissa inbyggda funktioner på åtgärdspanelen när du arbetar med HTML5 Canvas. De här funktionerna förbättrar arbetsflödet när du lägger till interaktivitet i objekt på scenen. De är:

Visar kod i olika teckensnitt eller färger beroende på syntaxen. Tack vare den här funktionen är det lättare att skriva kod på ett strukturerat sätt, och du får visuell hjälp att skilja på korrekt kod och syntaxfel.

Visar kod i olika färger beroende på syntaxen. På så sätt blir det lättare att se skillnad på olika delar av en syntax.

Lägger automatiskt till inledande och avslutande parenteser när du skriver JavaScript-kod.

Du kan lägga till interaktivitet i former och objekt på scenen med JavaScript. Du kan lägga till JavaScript i enskilda bildrutor och nyckelbildrutor.

1. Markera den bildruta i vilken du vill lägga till JavaScript.
2. Välj Fönster > Åtgärder när du vill öppna åtgärdspanelen.

Använda JavaScript-kodfragment

Du kan lägga till interaktivitet med de JavaScript-kodfragment som finns i Animate. Du kommer åt kodfragment genom att välja Fönster > Kodfragment. Mer information om hur du lägger till JavaScript-kodfragment finns i den här artikeln.

Referenser till CreateJS-dokumentation

Koder för att skapa interaktivitet

I JavaScript finns det olika alternativ för att göra animeringen interaktiv. Vill du lära dig hur du kan lägga till interaktiva rörelser för din karaktär? Titta på självstudiekursen i slutet av det här exemplet och följ stegen.

Så här gör du ditt innehåll interaktivt med HTML5

Publicera animeringar till HTML5

Så här publicerar du innehåll på scenen till HTML5:

1. Välj Arkiv > Publiceringsinställningar.
2. Ange följande inställningar i dialogrutan Publiceringsinställningar:

Grundläggande inställningar

Den katalog FLA-filen publiceras till. Som standard är detta samma katalog som FLA-filen finns i, men du kan ändra den genom att klicka på knappen Bläddra "...".

Om du markerar detta repeteras tidslinjen, annars stoppar den när slutet nås.

Om du inte markerar detta inkluderas inte dolda lager i utdata.

Låter användarna välja om scenen ska centreras vågrätt, lodrätt eller både och. HTML-arbetsytan/scenen visas i mitten av webbläsarfönstret som standard.

Låter användarna välja om animeringen ska vara responsiv på bredden, höjden eller i båda riktningarna och storleken på publicerade utdata ändras baserat på olika formfaktorer. Resultatet är responsiva, skarpare och tydligare HiDPI-kompatibla utdata.

Utdata tänjs ut för att täcka hela scenområdet utan kantlinjer samtidigt som de ursprungliga proportionerna bevaras även om en del av arbetsytan inte får plats i vyn.

• Alternativen för bredd, höjd och både och ser till att innehållet skalas ned till arbetsytans storlek och är synligt även om du visar det på en liten skärm (till exempel en mobil enhet eller surfplatta). Om skärmstorleken är större än den skapade scenstorleken visas arbetsytan i den ursprungliga storleken.

Låter användarna välja om animeringen ska anpassas efter helskärmsläge eller tänjas ut för att passa. Som standard är det här alternativet inaktiverat.

Anpassa till vy: Visar utdata i helskärmsläge samtidigt som proportionerna bevaras.

Tänj ut för att passa: Tänjs ut så att det inte finns kanter i utdatafilen.

Låter användarna välja om de vill använda standardförinläsaren eller välja en förinläsare från dokumentbiblioteket.

Förinläsaren är en visuell indikator i form av en animerad GIF som visas när skript och material som krävs för en animering läses in. När materialet har lästs in döljs förinläsaren och animeringen visas.

Som standard är Förinläsaren inte aktiverad.

• Alternativet Standard använder förinläsaren och
• Alternativet Bläddra använder en förinläsnings-GIF som du själv väljer. Förinläsarens GIF-fil kopieras till den konfigurerade mappen med bilder i Exportera bildresurser.
• Använd alternativet Förhandsgranska om du vill förhandsvisa den markerade GIF-filen.

Använd växlingsalternativen när du vill publicera på rot- eller undermappsnivå. Knappen är PÅ som standard. Om du väljer AV inaktiveras mappfältet och materialet exporteras till samma mapp som utdatafilen.

Exportera dokument som textur  Exportera vektoranimering som texturer som förbättrar prestandan för animeringar. Mer information finns i Texturpublicering.

 Detta är endast tillgängligt när alternativet Kombinera bilder till sprite-mallar inte är markerat.

 Du kan välja att exportera alla importerade bilder (inklusive komprimerade) från canvasdokument genom att behålla deras storlekar. Avmarkera alternativen Exportera dokument som textur och Kombinera bilder till sprite-mallar på fliken Grundläggande verktyg. Bilder exporteras utan storleksändringar.

Mappen där bildmaterial placeras och från vilken dessa refereras.

Kombinera i sprite-mallar: Välj detta när du vill kombinera allt bildmaterial i en sprite-mall. Mer information om alternativ för sprite-mallar finns i Exportera bitmappar som sprite-mallar.

Mappen där ljudmaterial i dokumentet placeras och från vilken dessa refereras.

Mappen där CreateJS-bibliotek placeras och från vilken dessa refereras.

 Standardinställningen fortsätter att publicera filer indelade i logiska undermappar.

Avancerade inställningar

Den relativa sökväg dit bilder, ljud och CreateJS JavaScript-bibliotek exporteras. Om kryssrutan till höger inte är markerad exporteras dessa resurser inte från FLA-filen, men den angivna sökvägen används ändå för att samla deras URL:er. Detta kan få publicering från en FLA-fil med många medieresurser att gå fortare eller förhindra att ändrade JavaScript-bibliotek skrivs över.

Med alternativet Exportera alla bitmappar som Sprite-mallar kan du paketera alla bitmappar i ett arbetsytedokument i en Sprite-mall, vilket minskar antalet serverförfrågningar och ger bättre prestanda. Du kan ange den högsta tillåtna storleken på sprite-mallen genom att ange värden för höjd och bredd.

Använd standard: Publicera dina HTML5-utdata med standardmallen.

Importera ny: Importera en ny mall för ditt HTML5-dokument.

Exportera: Exportera ett HTML5-dokument som en mall.

Om du markerar detta används kopior av de bibliotek som finns på CreateJS CDN på code.createjs.com. På så sätt kan biblioteken cachelagras och delas mellan olika platser.

Om du inte markerar detta inkluderas inte dolda lager i utdata.

Om du markerar detta genereras vektorinstruktioner i ett kompakt format. Avmarkera det om du vill exportera läsbara, detaljerade instruktioner (bra vid utbildning).

Om du markerar detta inkluderar tidslinjesymboler en frameBounds-egenskap, som innehåller en array med rektanglar som motsvarar gränserna för varje bildruta på tidslinjen. Gränser för flera bildrutor ökar publiceringstiden avsevärt.

Om Inkludera JavaScript i HTML aktiveras, är kryssrutan Skriv över HTML-fil vid publicering markerad och inaktiverad. Om du avmarkerar kryssrutan Skriv över HTML-fil vid publicering avmarkeras och inaktiveras Inkludera JavaScript i HTML.

3. Klicka på Publicera för att publicera innehållet till den angivna platsen.

 En animering som skapats med kapslade tidlinjer i en och samma bildruta kan inte repeteras.

HTML-mallvariabler

När du importerar en ny anpassad HTML-mall ersätts standardvariablerna med anpassade kodfragment baserade på komponenterna i FLA-filen vid publicering. 

Följande tabell anger mallvariablerna som identifieras och ersätts i Animate:

Följande tokens från tidigare versioner har tagits bort i den aktuella versionen:

 Dessa tokens är modulära och har ersatts av andra tokens.

JSAPI-stöd för import och export av HTML-mallar i Canvas-dokument

Följande JSAPI:er har stöd för import och export av HTML-mallar i Canvas-dokument:

• Exporterar HTML5 Canvas-publiceringsmallen för ett visst dokument till den angivna platsen:

bool document::exportCanvasPublishTemplate(pathURI)

• Exempel:

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

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

if(!exportFlag)

        fl.trace(“Template could not be exported”);

• Importerar och ställer in HTML5 Canvas-publiceringsmallen för ett visst dokument från den angivna platsen pathURI:
  

bool document::importCanvasPublishTemplate(pathURI)

• Exempel: 

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

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

if(!exportFlag)

        fl.trace(“Template could not be imported”);

Bädda in JavaScript i HTML

En funktion att inkludera JS-filer i HTML-filer vid publicering av arbetsytan introduceras i Animate.

1. Om du vill aktivera funktionen ska du gå till fliken Avancerat på menyn Publiceringsinställningar och välja Inkludera JavaScript i HTML.
2. Välj OK i dialogrutan Inkludera JavaScript i HTML vid publicering när du vill publicera innehållet igen och skriva över HTML.
3. Detta inaktiverar kryssrutan Skriv över HTML vid publicering och HTML genereras men skrivs över vid publiceringshändelser.
4. I Sluta inkludera JavaScript i HTML ska du välja OK när du vill utesluta JavaScript och publicera HTML-filen igen.
5. När Skriv över HTML vid publicering inte är markerat, inaktiveras alternativet Inkludera JavaScript i HTML automatiskt. 

 Om du inte vill skriva över HTML kan alternativen Skriv över HTML-fil vid publicering och Bädda in JS i HTML inte användas samtidigt.

Lägger till globala och tredjepartskript

Animatörer använder ofta JavaScript-kod som gäller hela animeringen. Med den här funktionen kan du lägga till globala skript och tredjepartskript som inte är specifika för bildrutor och som kan användas på hela animeringen i Animate. 

Lägga till och använda globala skript: 

Lägga till skript från tredje part

Animatörer inkluderar ofta JavaScript-bibliotek från tredje part men måste manuellt ändra koden som Animate genererar. Med den här funktionen har animatörer större flexibilitet att använda de senaste JavaScript-biblioteken eller koden för animering.

Lägga till skript från tredje part: 

Slå samman JSON-data med JS

Baserat på kundrespons och det faktum att JSON-filer inte är säkra, har vi slagit samman relevanta data med JS-filen och därmed skapas inte en separat JSON-fil.

Optimera HTML5 Canvas-utdata

I Animate kan du optimera storleken och prestandan för HTML5 Canvas-utdata genom att:

• Exportera bitmappar som sprite-mallar med alternativen på fliken Sprite-mall i publiceringsinställningarna.
• Utesluta dolda lager (genom att avmarkera kryssrutan Inkludera dolda lager) från publicerade utdata.
• Utesluta alla resurser som inte används, som ljud och bitmappar, och alla resurser i oanvända bildrutor (standard).
• Ange att resurserna från FLA-filen inte ska exporteras genom att avmarkera alternativen för resursexport för bilder, ljud och CreateJS JavaScript-bibliotek som stöds och använd relativa URL:er för exporten.
• HiDPI-kompatibla HTML5 Canvas-utdata: Animate skalar utdata baserat på pixelproportionerna för enheten som visar innehållet. Kompatibilitetsinställningen ger skarpare utdata med zoomning och åtgärdar även pixeleringsproblem i Canvas-dokument när du visar HTML Canvas-utdata på en enhet med hög upplösning.
   

Ställa in en genomskinlig bakgrund på arbetsytan

Du kan anpassa arbetsytan med olika färger och ändra dess genomskinlighet. När du skapar en genomskinlig arbetsyta, kan du visa det underliggande HTML-innehållet vid publicering.

Obs! Den här inställningen gör även bakgrunden genomskinlig vid OAM-publicering.

1. Markera arbetsytan som du vill ändra.
2. I rutan Egenskaper väljer du Scen.
3. Ställ in procentvärdena för Alfa på scenen.

Stöd för färgruta utan färg

Du kan också använda färgrutealternativet Ingen färg om du vill göra arbetsytans bakgrund genomskinlig:

1. Välj Ändra > Dokument > Scenfärg eller Avancerade inställningar i egenskapsinspektören.
2. Markera Ingen färg i Scenfärg.

Exportera bitmappar som Sprite-mallar

Genom att exportera ett antal bitmappar som du har använt i ett HTML5 Canvas-dokument som en enda Sprite-mall minskar du antalet serverförfrågningar och utdatastorleken samt får bättre prestanda. Du kan exportera sprite-mallar som PNG (standard), JPEG eller både och.

1. I fliken Sprite-mall välj kryssrutan Kombinera bilder och resurser på sprite-mallen.
2. Välj format som PNG, JPEG eller båda.
   
3. Om du har valt PNG eller båda, specificera följande alternativ under PNG-inställningar:
   • Kvalitet: Ställ in sprite-mallens kvalitet på 8 (standard), 24 eller 32 bitar.
   • Maximal storlek: ange den maximala höjden och bredden för sprite-mallen i pixlar.
   • Bakgrund: klicka och ange bakgrundsfärg för sprite-mallen.
4. Om du har valtJPEGeller båda, specificera följande alternativ under JPEG-inställningar:
   
   • Kvalitet: ställ in kvalitet för sprite-mallen.
   • Maximal storlek: ange den maximala höjden och bredden för sprite-mallen i pixlar.
   • Bakgrund: klicka och ange bakgrundsfärg för sprite-mallen.

Arbeta med text i HTML5 Canvas-dokument

HTML Canvas har stöd för statisk och dynamisk text.

Statisk text

Statisk text är ett utökat alternativ där allt material konverteras till konturer vid publicering och det ger en utmärkt WSYWIG-användarupplevelse. Eftersom texten publiceras som vektorkonturer kan du inte redigera den under körning.

Obs! För mycket statisk text kan leda till stora filstorlekar.

Dynamisk text

Med dynamisk text kan texten ändras vid körning och det leder inte till så stora filer. Det har stöd för färre alternativ än statisk text. Det har även stöd för webbteckensnitt via Adobe Fonts.

Om du använder dynamisk text med teckensnitt som inte är tillgängliga på användarnas datorer, används standardteckensnittet för visning vilket försämrar användarupplevelsen. Sådana problem kan åtgärdas med webbteckensnitt.

Lägg till webbteckensnitt i ditt HTML5 Canvas-dokument

I Animate an du använda webbteckensnitt för dynamisk text i HTML5 Canvas-dokument. Adobe Fonts ger dig tillgång till tusentals exklusiva kvalitetsteckensnitt från ledande leverantörer. Du kan komma åt och använda Adobe Fonts problemfritt med dina HTML5-utdata för moderna webbläsare och mobilenheter, med hjälp av ditt Creative Cloud-medlemskap.

Mer information om att använda webbteckensnitt från Adobe Fonts i Animate finns i Använda webbteckensnitt i HTML5 Canvas-dokument

I Animate version 2015.2 förbättras den visuella upplevelsen av dynamisk text i ett dokument på arbetsytan så att scenen och det publicerade utseendet är synkroniserade.

Obs!: Adobe Fonts kan inte användas för statisk text.

Om HTML5 Canvas-utdata

Publicerade HTML5-utdata innehåller följande filer:

Innehåller definitioner för alla former, objekt och bilder i Canvas-elementet. Det anropar även CreateJS-namnutrymmet för att konvertera Animate till HTML5 och motsvarande JavaScript-fil med interaktiva element. 

Innehåller dedikerade definitioner och kod för alla interaktiva element i animeringen. Kod för alla typer av interpoleringar definieras också i JavaScript-filen.

De här filerna kopieras som standard till samma plats som FLA-filen. Du kan ändra platsen genom att ange utdatasökväg i dialogrutan Publiceringsinställningar (Arkiv > Publiceringsinställningar).

Överföra befintligt innehåll till HTML5 Canvas

Du kan överföra befintligt innehåll i Animate när du vill skapa HTML5-utdata. I Animate kan du överföra innehåll genom att kopiera eller importera enskilda lager, symboler och andra biblioteksobjekt manuellt. Du kan också köra kommandot Konvertera AS3 till HTML5 Canvas-dokument om du vill överföra befintligt ActionScript-innehåll till ett nytt HTML5 Canvas-dokument automatiskt. Klicka på den här länken om du vill ha mer information.

När du arbetar med HTML5-dokumenttypen i Animate kommer du dock att märka att vissa Animate-funktioner inte stöds. Detta beror på att funktionerna i Animate saknar motsvarande funktioner i Canvas-programmeringsgränssnittet. Därför kan du inte heller använda dessa funktioner i HTML5 Canvas-dokument. Detta kan påverka dig vid innehållsmigrering, när du försöker att:

innehåll (lager eller bibliotekssymboler) från ett vanligt Animate-dokument (som t.ex. ActionScript 3.0, AIR for Android eller AIR for Desktop) till ett HTML5-dokument. En innehållstyp som inte stöds tas i så fall bort eller konverteras till något som stöds.

Om du till exempel kopierar en 3D-animering tas alla 3D-omformningar som använts på objekt på scenen bort.

en PSD- eller AI-fil med innehåll som inte stöds. I så fall tas innehållet bort eller konverteras till något som stöds.

Om du till exempel importerar en PSD-fil med en övertoningsavfasning. Animate tar bort effekten.

med flera dokumenttyper (t.ex. ActionScript 3.0 och HTML5 Canvas) samtidigt eller när du växlar mellan dokument med ett verktyg eller alternativ som inte stöds. I detta fall visas det tydligt att funktionen inte stöds i Animate.

Detta kan till exempel hända om du har skapat en prickad linje i ett ActionScript 3.0-dokument och växlar till HTML5 Canvas när linjeverktyget fortfarande är aktivt. Lägg märke till pekaren och egenskapsinspektören som visar ikoner som anger att prickade linjer inte stöds i HTML5 Canvas.

ActionScript-komponenter tas bort och koden kommenteras ut. Om du har skrivit JavaScript-kod inuti kommentarsblocket (för Toolkit for CreateJS med Animate 13.0) ser du till att du avkommenterar den koden manuellt.

Om du till exempel har kopierat lager som innehåller knappar så tas dessa bort.

Ändringar som används på innehåll efter överföring

Följande typer av ändringar används när du överför äldre innehåll till ett HTML5 Canvas-dokument.

Innehållstyper som inte stöds i HTML5 Canvas tas bort. Till exempel:

• 3D-omformningar tas bort
• ActionScript-kod kommenteras ut
• Videoklipp tas bort

Innehållstypen eller funktionen stöds, men en egenskap hos funktionen stöds inte. Till exempel:

• Blandningsläget Övertäckning stöds inte och ändras till Normal.
• Prickad linje stöds inte och ändras till heldragen.

Du hittar en komplett lista över funktioner som inte stöds och deras respektive reservvärden under överföring i den här artikeln.

Konvertera andra dokumenttyper till HTML5 Canvas-dokument

Med dokumenttypskonverteraren kan du konvertera befintliga FLA-projekt (alla typer) till andra dokumenttyper som HTML5 Canvas, ActionScript/AIR, WebGL eller någon anpassad dokumenttyp. När du konverterar till ett format kan du utnyttja de redigeringsfunktioner som finns för den dokumenttypen i Animate. 

Mer information finns i Konvertera till andra dokumentformat

Konvertera ActionScript 3 till HTML5 Canvas-dokument med JSFL-skript

Animate innehåller ett JSFL-skript för konvertering av AS3-dokument till HTML5 Canvas-dokument. JSFL-skriptet utför följande när du kör det:

• Skapar ett nytt HTML5 Canvas-dokument.
• Kopierar alla lager, symboler och biblioteksobjekt till det nya HTML5 Canvas-dokumentet.
• Använder standardvärdena för funktioner, delfunktioner och funktionsegenskaper som inte stöds.
• Skapar separata FLA-filer för varje scen, eftersom HTML5 Canvas-dokumentet inte har stöd för flera scener.

1. Öppna ActionScript 3-dokumentet i Animate.
2. Välj Kommandon > Konvertera AS3 till HTML5 Canvas-dokument.

 Detta är endast tillgängligt när alternativet Kombinera bilder till sprite-mallar inte är markerat.