Användarhandbok Avbryt

Skapa och publicera ett WebGL-dokument

  1. Användarhandbok om Adobe Animate
  2. Introduktion till Animate
    1. Nyheter i Animate
    2. Visuell ordlista
    3. Systemkrav för Animate
    4. Tangentbordsgenvägar för Animate
    5. Arbeta med flera filtyper i Animate
  3. Animering
    1. Grunderna vid animering i Animate
    2. Så här använder du bildrutor och nyckelbildrutor i Animate
    3. Animering bildruta för bildruta i Animate
    4. Så här arbetar du med klassiska övergångsanimeringar i Animate
    5. Pensel
    6. Rörelseguide
    7. Rörelseinterpoleringar och ActionScript 3.0
    8. Om övergångsanimeringar med rörelse
    9. Animeringar med rörelseinterpolering
    10. Skapa en animering med rörelseinterpolering
    11. Använda nyckelbildrutor för egenskaper
    12. Animera placering med en interpolering
    13. Så här redigerar du rörelseinterpoleringar med rörelseredigeraren
    14. Redigera rörelsebanan för en interpolerad animering
    15. Ändra rörelseinterpoleringar
    16. Lägga till anpassade övergångar
    17. Skapa och använda förinställda rörelser
    18. Konfigurera interpoleringsintervall för animeringar
    19. Arbeta med rörelseinterpoleringar sparade som XML-filer
    20. Rörelseinterpoleringar jämfört med klassiska interpoleringar
    21. Skapa övergångar
    22. Använda animeringar med benverktyget i Animate
    23. Arbeta med figurriggning i Animate
    24. Så här använder du maskeringslager i Adobe Animate
    25. Så här arbetar du med scener i Animate
  4. Interaktivitet
    1. Så här skapar du knappar med Animate
    2. Konvertera Animate-projekt till andra dokumenttypsformat
    3. Skapa och publicera HTML5 Canvas-dokument i Animate
    4. Lägga till interaktivitet med kodfragment i Animate
    5. Skapa anpassade HTML5-komponenter
    6. Använda komponenter i HTML5 Canvas
    7. Skapa anpassade komponenter: Exempel
    8. Kodfragment för anpassade komponenter
    9. God praxis - annonsera med Animate
    10. Redigera och publicera VR
  5. Arbetsyta och arbetsflöde
    1. Skapa och hantera målarpenslar
    2. Använda Google Fonts i HTML5 Canvas-dokument
    3. Använda Creative Cloud Libraries och Adobe Animate
    4. Använda scen- och verktygspanelerna i Animate
    5. Arbetsflöde och arbetsyta i Animate
    6. Använda webbteckensnitt i HTML5 Canvas-dokument
    7. Tidslinjer och ActionScript
    8. Arbeta med flera tidslinjer
    9. Ange inställningar
    10. Använda redigeringspanelerna i Animate
    11. Skapa tidslinjelager med Animate
    12. Exportera animeringar för mobilprogram och spelplattformar
    13. Flytta och kopiera objekt
    14. Mallar
    15. Söka och ersätta i Animate
    16. Ångra, gör om och panelen Historik
    17. Kortkommandon
    18. Så här använder du tidslinjen i Animate
    19. Skapa HTML-tillägg
    20. Optimeringsalternativ för bilder och animerade GIF-filer
    21. Exportinställningar för bilder och GIF-filer
    22. Panelen Resurser i Animate
  6. Multimedia och video
    1. Omforma och kombinera grafikobjekt i Animate
    2. Skapa och arbeta med symbolinstanser i Animate
    3. Bildkalkering
    4. Så här använder du ljud i Adobe Animate
    5. Exportera SVG-filer
    6. Skapa videofiler för användning i Animate
    7. Så här lägger du till en video i Animate
    8. Rita och skapa objekt med Animate
    9. Omforma linjer och former
    10. Linjer, fyllningar och övertoningar med Animate CC
    11. Arbeta med Adobe Premiere Pro och After Effects
    12. Färgpaneler i Animate CC
    13. Öppna Flash CS6-filer i Animate
    14. Arbeta med klassisk text i Animate
    15. Placera grafik i Animate
    16. Importerade bitmappar i Animate
    17. 3D-grafik
    18. Arbeta med symboler i Animate
    19. Rita linjer och former med Adobe Animate
    20. Arbeta med bibliotek i Animate
    21. Exportera ljud
    22. Markera objekt i Animate CC
    23. Arbeta med Illustrator AI-filer i Animate
    24. Använda blandningslägen
    25. Ordna objekt
    26. Automatisera uppgifter med kommandomenyn
    27. Flerspråkig text
    28. Använda kameran i Animate
    29. Grafikfilter
    30. Ljud och ActionScript
    31. Ritinställningar
    32. Rita med ritstift
  7. Plattformar
    1. Konvertera Animate-projekt till andra dokumenttypsformat
    2. Stöd för anpassade plattformar
    3. Skapa och publicera HTML5 Canvas-dokument i Animate
    4. Skapa och publicera ett WebGL-dokument
    5. Så här paketerar du AIR för iOS-program
    6. Publicera AIR for Android-program
    7. Publicera för Adobe AIR för datorprogram
    8. Inställningar för ActionScript-publicering
    9. God praxis – organisera ActionScript i ett program
    10. Så här använder du ActionScript med Animate
    11. Hjälpmedel på arbetsytan i Animate
    12. Skriva och hantera skript
    13. Aktivera stöd för anpassade plattformar
    14. Översikt över stöd för anpassade plattformar
    15. Arbeta med plugin-program för anpassade plattformar
    16. Felsöka ActionScript 3.0
    17. Aktivera stöd för anpassade plattformar
  8. Exportera och publicera
    1. Så här exporterar du filer från Animate CC
    2. OAM-publicering
    3. Exportera SVG-filer
    4. Exportera bilder och video med Animate
    5. Publicera AS3-dokument
    6. Exportera animeringar för mobilprogram och spelplattformar
    7. Exportera ljud
    8. God praxis – tips för att skapa innehåll på mobila enheter
    9. God praxis – videokonventioner
    10. God praxis – riktlinjer för utveckling av SWF-program
    11. God praxis – strukturera FLA-filer
    12. De bästa sätten att optimera FLA-filer för Animate
    13. Inställningar för ActionScript-publicering
    14. Ange publiceringsinställningar för Animate
    15. Exportera projektorfiler
    16. Exportera bilder och animerade GIF-filer
    17. Publiceringsmallar för HTML
    18. Arbeta med Adobe Premiere Pro och After Effects
    19. Dela och publicera animeringar snabbt
  9. Felsökning
    1. Åtgärdade fel
    2. Kända fel

 

Vad är WebGL?

WebGL är en öppen webbstandard för bildåtergivning i kompatibla webbläsare, utan något behov av extra plugin-program. WebGL är helt integrerat i webbläsarens webbstandarder och medger GPU-accelererad bildbearbetning och effektbearbetning som en del av webbsidan. WebGL-element kan bäddas in med andra HTML-element och sättas samman med andra delar av sidan.

De flesta moderna webbläsare har stöd för WebGL, men besök gärna den här webbsidan om du vill veta mer om exakt vilka versioner som stöds.

Vissa webbläsare har inte WebGL aktiverat som standard. Mer information om att aktivera WebGL i webbläsaren finns i den här artikeln.

 Se till att du aktiverar WebGL i webbläsaren, eftersom vissa webbläsare har WebGL inaktiverat som standard.

Använda dokumenttypen WebGL-glTF (beta)

Animate har nu två WebGL-glTF-dokumenttyper. Du kan använda WebGL-glTF-standarddokumenttypen för att tillåta integration med alla standard-WebGL-glTF-paket. Det är fullständigt standardkompatibelt.

  1. Om du vill skapa ett WebGL-glTF-baserat dokument väljer du standard-WebGL-glTF eller utökad WebGL-glTF från användningsområdet Avancerat på startskärmen.

    WebGL-glTF-dokumenttyp
    WebGL-glTF-dokumenttyp

  2. Specificera bredden, höjden och enheterna enligt dina krav önskemål och klicka på Skapa.

Publicera en WebGL-glTF-fil

  1. Klicka på Publiceringsinställningar från egenskapsinspektören.

    Publicera WebGL-glTF-fil
    Publicera WebGL-glTF-fil

  2. Skriva ett namn i textrutan Utdatanamn.

  3. Välj GLB eller GLTF i Formatalternativ.

  4. Specificera ett decimaltal inom intervallet 1–3 i textrutan Bildupplösning.

  5. Markera Ta bort blanksteg i JSON-fil för att förminska filformatet.

  6. Som standard är alternativen Repetera tidslinje och Inkludera dolda lager markerade. Du kan avmarkera dem för att hitta små fel.

  7. Klicka på Publicera för att publicera filen.

Konvertera animeringar till GLTF- och GLB-format

WebGL-glTF och GLB minskar filstorleken och bearbetningen vid körtillfället. I Animate kan du använda dokument i båda formaten. Vill du använda dina videor i båda formaten? Titta på självstudiekursen i slutet av det här exemplet och följ stegen.

  1. I Egenskaper klickar du på Publiceringsinställningar.

  2. Skriva ett namn i textrutan Utdatanamn.

  3. Välj GLB eller GLTF i Formatalternativ.

  4. Specificera ett decimaltal inom intervallet 3 i textrutan Bildupplösning.

  5. Markera Ta bort blanksteg i JSON-fil för att förminska filformatet.

Så här skapar du avancerade animeringar med WebGL GLTF-export i Animate

Titta på videon när du vill se hur en animering ser ut i WebGL GLTF- och GLB-formaten.

Animate 18.0 och tidigare versioner

Mer information finns i följande innehåll om du använder Animate 18.0 eller någon tidigare version av Animate.

WebGL-dokument

I Animate kan du skapa och publicera interaktivt innehåll i WebGL-format (Web Graphics Library). Eftersom WebGL är helt integrerat i webbläsare kan Animate utnyttja GPU-accelererad bildbearbetning och bildåtergivning som en del av webbsidan.

Med den här nya dokumenttypen kan du skapa innehåll och snabbt publicera till WebGL-utdata. Du kan använda de kraftfulla verktygen i Animate för att skapa avancerat innehåll och återge WebGL-utdata som fungerar i alla kompatibla webbläsare. Det innebär att du kan använda tidslinjen, arbetsytan och ritverktygen i Animate för att skapa och producera WebGL-innehåll. De flesta vanliga webbläsare har stöd för WebGL vilket gör att Animate kan återge innehåll för de flesta webbplattformar.

 Stöd för WebGL finns bara som förhandsgranskning. Den här uppdateringen av Animate har stöd för enkla animeringar med ljud och skripting samt en uppsättning funktioner för interaktivitet. I framtida versioner av Animate kommer fler funktioner att aktiveras för WebGL-dokument. Du hittar en fullständig lista över Animate-funktioner som har stöd för WebGL i den här KB-artikeln.

Skapa ett WebGL-dokument

I Animate kan du använda WebGL-dokument för att snabbt skapa och publicera innehåll för WebGL-formatet. Så här skapar du ett WebGL-dokument:

  1. Starta Animate.
  2. Klicka på alternativet WebGL (förhandsgranskning) på välkomstskärmen. Du kan också välja menyalternativet Arkiv > Nytt för att visa dialogrutan Nytt dokument. Klicka på alternativet WebGL (förhandsgranskning).

Förhandsgranska WebGL-innehåll i webbläsare

Du kan använda funktionen Testa filmen i Animate när du vill förhandsgranska eller testa innehållet. Så här förhandsgranskar du:

  1. Tryck på Ctrl+Enter i Windows och CMD+Enter på Mac i Animate. Då öppnas standardwebbläsaren och WebGL-innehållet återges.
En webbserver krävs om du vill att Animate ska köra WebGL-innehåll. Animate har en inbyggd webbserver, som är konfigurerad att köra WebGL-innehåll på port 8090. Om det finns en server som redan använder den här porten identifieras och löses den här konflikten automatiskt i Animate.

Publicera innehåll till WebGL-formatet

I Animate kan du skapa och publicera WebGL-innehåll direkt från programmet.

Så här publicerar du ett WebGL-dokument:

  1. Välj Arkiv > Publiceringsinställningar för att visa dialogrutan Publiceringsinställningar. Du kan också välja Arkiv > Publicera om du redan har angett publiceringsinställningar för WebGL.
  2. I dialogrutan Publiceringsinställningar anger du värden för:

Utdatafil

Ange ett beskrivande namn för utdata. Bläddra till eller ange den plats där du vill publicera WebGL-utdata.

Skriv över HTML

Här kan du ange om HTML-wrapper ska skrivas över eller inte varje gång som du publicerar ett WebGL-projekt. Du avmarkerar detta alternativ om du har gjort externa ändringar i den publicerade HTML-filen och vill behålla dem när du uppdaterar ändringar gjorda i animeringen eller materialet i Animate.

Inkludera dolda lager

Inkluderar alla dolda lager i WebGL-utdata. Om du avmarkerar Inkludera dolda lager hindras alla dolda lager (inklusive lager som är kapslade i filmklipp) från att exporteras till den resulterande WebGL-filen. På så vis kan du lätt testa olika versioner av WebGL-dokument genom att göra lager osynliga.

Repetera tidslinje

Upprepar innehållet när den sista bildrutan nås. Avmarkera det här alternativet om du vill stoppa innehållet när den sista bildrutan nås.

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

 Det högsta antalet bildrutor per sekund (fps) som kan anges för WebGL-innehåll som körs i webbläsare är 60 fps.

Om WebGL-utdata

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

HTML-omslutningsfil

Denna innehåller körningsmiljön, anropar resurser och initierar även WebGL-återgivningen. Filen namnges som standard som <FLA_namn>.html. Du kan ange ett annat namn för HTML-filen i dialogrutan Publiceringsinställningar (Arkiv > Publiceringsinställningar).

HTML-filen placeras som standard i samma katalog som FLA-filen. Du kan ange en annan plats i dialogrutan Publiceringsinställningar.

JavaScript-fil (WebGL-körningsmiljö)

Återger publicerat innehåll i WebGL. Publiceras i mappen libs/ för WebGL-dokumentet. Filen får namnet: flwebgl-<version>.min.js

HTML-omslutningsfilen använder den här JS-filen för att återge WebGL-innehåll.

Texturkarta

Lagrar alla färgvärden (för former), inklusive bitmappinstanser på scenen.

Lägga till ljud i WebGL-dokument

Du kan importera och bädda in ljud i WebGL-dokument, styra uppspelningen med hjälp av synkroniseringsinställningar (händelse, start och stopp) och spela upp ljud på tidslinjen vid körning. WebGL har för tillfället bara stöd för .wav- och .mp3-format.

Mer information om att arbeta med ljud finns i Använda ljud i Animate.

Överföra befintligt innehåll till ett WebGL-dokument

Du kan överföra befintligt innehåll i Animate till ett WebGL-dokument. I Animate kan du överföra innehåll genom att kopiera eller importera det manuellt. När du arbetar med flera dokument i Animate är det dessutom vanligt att kopiera innehåll mellan dokument med hjälp av lager eller material i biblioteket. Även om de flesta funktionerna i Animate stöds finns det vissa innehållstyper som ändras för att passa WebGL-formatet bättre.

Animate innehåller flera kraftfulla funktioner för att skapa visuellt slagkraftigt innehåll. Eftersom en del av funktionerna är specifika för Animate stöds de dessvärre inte i WebGL-dokument. Animate har utformats för att ändra sådant innehåll till ett format som stöds och när ett verktyg eller en funktion inte stöds visas detta också tydligt.

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 WebGL-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 oskärpeeffekt. Animate tar bort effekten.

Arbeta

med flera dokumenttyper (t.ex. ActionScript 3.0 och WebGL) 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 WebGL när linjeverktyget fortfarande är aktivt. Lägg märke till pekaren och egenskapsinspektören, som visar att prickade linjer inte stöds i WebGL.

Skript

Du kan skriva JavaScript-kod på panelen Åtgärder, som körs när spelaren kommer in i bildrutan. Variabeln 'this' när det gäller bildruteskript avser den instans av MovieClip den tillhör. Bildruteskript kan dessutom komma åt JavaScript-funktioner och -variabler som deklareras i HTML-behållarfilen. När du kopierar en bildruta eller ett lager från ett ActionScript-dokument och klistrar in den/det i ett WebGL-dokument kommenteras eventuella skript bort.

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

Följande typer av ändringar användtillämpas när du överför äldre innehåll till ett WebGL-dokument.

Innehåll tas bort

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

Filter

stöds inte. Effekten tas bort, och formen får en heltäckande fyllning i stället.

Oskärpefiltret tas bort och ersätts av heltäckande fyllning.

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:

 

Radiell övertoning

ändras till en heltäckande fyllning med den primära färgen.

Radiell övertoning ändras till en heltäckande fyllning med den primära färgen.

Förbättra återgivning med bitmappscaching

Med hjälp av bitmappscachning vid körning kan du optimera återgivningsprestanda genom att ange att en statisk filmklippssymbol (till exempel en bakgrundsbild) eller en knappsymbol ska cachas som en bitmapp vid körning. Som standard ritas vektorobjekt om i varje bildruta. När en filmklippssymbol eller knappsymbol cachelagras som en bitmapp innebär det att objektet inte behöver ritas om hela tiden i webbläsaren, eftersom bilden är en bitmapp och dess position inte förändras. Detta utgör en markant prestandaförbättring vid återgivning av WebGL-innehåll.

När du till exempel skapar en animering med en komplex bakgrund, kan du skapa ett filmklipp med alla objekten som finns i bakgrunden. Välj sedan Cachelagra som bitmapp i egenskapskontrollen för bakgrundsfilmklippet. Under uppspelningen kommer bakgrunden att återges som en bitmapp som lagras med aktuellt skärmdjup. Webbläsaren ritar upp bitmappen på scenen snabbt och en enda gång, vilket gör att animeringen körs snabbare och jämnare.

Med bitmappscache kan du använda ett filmklipp och frysa det på plats automatiskt. Om ett område ändras uppdateras bitmappscachen med vektordata. Den här processen minimerar antalet omritningar som webbläsaren måste göra och ger därför jämnare och snabbare återgivningsprestanda.

Om du vill aktivera egenskapen Cachelagra som bitmapp för en filmklippssymbol markerar du filmklippsinstansen och väljer Cachelagra som bitmapp i listrutan Återgivning i egenskapsinspektören (Fönster > Egenskaper).

Att tänka på vid användning av Cachelagra som bitmapp

När du använder egenskapen Cachelagra som bitmapp på WebGL-innehåll bör du tänka på följande:

  • Filmklippssymbolens största tillåtna storlek är 2 048 x 2 048. Tänk på att de faktiska gränserna för filmklippsinstansen som kan cachelagras är mindre än 2 048 x 2 048, eftersom WebGL reserverar ett antal pixlar.
  • Om det finns fler än en instans av samma filmklipp genereras cachen med storleken för den första instansen som påträffas. Cacheminnet genereras dock inte om och egenskapen Cachelagra som bitmapp ignoreras inte, även om filmklippets omformning förändras avsevärt. Om filmklippssymbolen skalas avsevärt under animeringen kan animeringen därför se pixelerad ut.

 Adobe

Få hjälp snabbare och enklare

Ny användare?

Adobe MAX 2024

Adobe MAX
Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX

Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX 2024

Adobe MAX
Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX

Kreativitetskonferensen

14–16 okt i Miami Beach och online