Vad är HTML5 Canvas?

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 CC 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 CC är integrerat med CreateJS, som används för interaktivt innehåll på öppna webbplattformar via HTML5. Animate CC 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.
Nytt dokument
Nytt dokument

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

Kodtips

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:

Syntaxmarkering

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.

Kodfärgning

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.

Parentes

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

Code_Aspects
(A) Syntaxmarkering (B) Kodfärgning (C) Parenteser

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

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

publish-settings-basics

Utdata

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

Repetera tidslinje

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

Inkludera dolda lager

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

Centrera scenen

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.

Ange som responsiv

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.

Aktivera Skala för att fylla synligt område

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.

Inkludera förinläsare:

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.

Publish settings
Inställningar för publicering

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

Publish_settings_root
Publicering av material på arbetsytan till rotmapp

Exportera bildresurser

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

Exportera ljudresurser

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

Exportera CreateJS-material

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

Obs!

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

Avancerade inställningar

publish_settings_output

Alternativ för resursexport

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.

JSEmbed23
Export-spritesheets
Publish_Settings_JavaScript_Namespaces

Mall för HTML-publicering:

 

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.

Hanterade bibliotek:

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.

Inkludera dolda lager:

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

Komprimera former:

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

Gränser för flera bildrutor:

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.

Skriv över HTML-fil vid publicering och inkludera JavaScript i HTML:

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.

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

Obs!

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:

Parameter för attribut Mallvariabel
HTML-dokumentets namn   $TITLE
Platshållare för att inkludera CreateJS-skript $CREATEJS_LIBRARY_SCRIPTS
Platshållare för att inkludera genererade skript (inklusive skript för webbteckensnitt) $ANIMATE_CC_SCRIPTS
HTML-tagg som startar ett klientskript                                                                                                               $SCRIPT_START
Platshållare för koden som skapar inläsaren (CreateJS LoadQueue) $CREATE_LOADER
Platshållare för koden som läser in material som finns i manifestet $LOAD_MANIFEST
Platshållare för koden som definierar inläsningsmetoden för filer $HANDLE_FILE_LOAD_START
Platshållare för koden som hanterar filinläsningshändelser $HANDLE_FILE_LOAD_BODY
Platshållare för koden som avslutar metoden för filinläsning $HANDLE_FILE_LOAD_END
Platshållare för koden som definierar metodhandtaget Complete som anropas när materialet har lästs in $HANDLE_COMPLETE_START
Platshållare för koden som skapar scenen $CREATE_STAGE
Platshållare för koden som registrerar tick-händelser efter vilka animeringen startar $START_ANIMATION
Platshållare för koden som har stöd för responsiv skalning och HiDPI-skärmar $RESP_HIDPI
Platshållare för koden som avslutar metodhandtaget Complete $HANDLE_COMPLETE_END
Platshållare för en funktion som ska hantera innehåll med
ljud                                                                            
$PLAYSOUND
Platshållare för formateringsavsnitt som har stöd för centrering av arbetsytan $CENTER_STYLE
Platshållare för formateringsegenskapen för visning av arbetsytan som har stöd för förinläsaren $CANVAS_DISP
Platshållare för koden som visar förinläsaren $PRELOADER_DIV
HTML-tagg för slutet på klientskript                                                                                                                $SCRIPT_END
Arbetsytans element-ID                                                                                                                                                  $CANVAS_ID
Bredden på scenen eller arbetsytans element                                                                                                             $WT
Höjden på scenen eller arbetsytans element                                                                                                                 $HT
Bakgrundsfärg på scenen eller arbetsytans element                                                                                          $BG
Animate CC-version som genererar
innehåll
$VERSION

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

Parameter för attribut Mallvariabel
Platshållare för att inkludera skript (CreateJS och genererade Javascript) $CREATEJS_SCRIPTS
Platshållare för koden som initierar CreateJS-bibliotek, läser in media, skapar och uppdaterar scenen $CJS_INIT*

Obs!

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. 

Obs!

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.

Mering Json
Sammanfoga Js med HTML

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: 

  1. Välj Fönster > Åtgärder

    actions-add-script
  2. I åtgärdspanelen väljer du Skript i den globala hierarkin.

    I avsnittet för globala skript kan du skriva skript som kan användas i olika dokument i Animate eller som externa skript.

    Som externt skript: På skärmen Inkludera ska du välja skriptet som ska inkluderas så som beskrivs i avsnittet som följer.

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

  1. Välj Fönster > Åtgärder

  2. På åtgärdspanelen ska du välja Inkludera i den globala hierarkin.

  3. Klicka på + när du vill lägga till ett skript från en extern URL eller lägga till en fil genom att gå till ett lokalt bibliotek.

    actions-include

    Du kan även sortera skripten baserat på deras gemensamma beroenden eftersom vissa objekt är beroende av andra befintliga bibliotek.

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.

 

canvas tranperancy_final
Genomskinlighet på arbetsyta

advanced_settings
Genomskinlighet på arbetsyta: Avancerade inställningar

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

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.

Static-text

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

För att ta reda på mer om Adobe Fonts i Animate CC, se 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:

HTML-fil

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. 

JavaScript-fil

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

Kopiera

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.

Importera

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.

Arbeta

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

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.

Skript

ActionScript-komponenter tas bort och koden kommenteras ut. Om du har skrivit JavaScript-kod inuti kommentarsblocket (för Toolkit for CreateJS med Animate CC 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åll tas bort

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åll ändras till ett standardvärde som stöds

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 CC 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.
Så här konverterar du ett AS3-dokument till ett HTML5 Canvas-dokument:
  1. Öppna ActionScript 3-dokumentet i Animate CC.
  2. Välj Kommandon > Konvertera AS3 till HTML5 Canvas-dokument.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy