Användarhandbok Avbryt

Exportera animeringar för mobilprogram och spelplattformar

Sök
Animate

Animate

Öppna appen
  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

 

Skapa en sprite-mall eller texturkarta och exportera dina animeringar för mobilappar och spelplattformar. Importera en texturkarta i Unity eller någon annan spelplattform med plugin-programmet.

Översikt

Med Animate kan du skapa animeringar med en sprite-mall eller texturkarta och exportera dem till mobilappar och spelplattformar. 

Sprite-mall

En sprite-mall är en bitmappsbildfil, som innehåller flera mindre bilder ordnade i ett rutnät. Om du samlar flera bilder i en och samma fil behöver Animate och andra program bara läsa in en enda fil för att använda alla bilder. Den här förbättrade inläsningen är särskilt praktisk inom spelutveckling, där prestanda är mycket viktiga.

Sprite-mall
En sprite-mall som innehåller alla sprites i en bildruta-för-bildruta-animering.

Du kan skapa en sprite-mall av valfria filmklipp, knappsymboler, grafiksymboler och bitmappar. Du kan välja objekt på bibliotekspanelen eller på scenen, men inte bådadera. Alla bitmappar och bildrutor för de valda symbolerna visas som separata bilder i sprite-mallen. Om du exporterar från scenen bevaras alla omformningar (som skalningar och skevningar) som du har använt på symbolinstansen i bildutdata.

Texturkarta

Texturkartan är en samling texturer som en enstaka stor bild eller flera bilder i önskad storlek. Du kan optimera dina spel genom att skapa en texturkarta och använda den i din spelapp. 

I Animate kan du skapa en texturkarta av symboler, till exempel filmklipp, bilder eller knappar. Du kan välja objekt på bibliotekspanelen eller på scenen, men inte bådadera. Alla vektorer och nyckelbildrutor för de valda symbolerna visas som separata bitmappar i texturkartan. Om du exporterar från scenen bevaras alla omformningar (som skalningar och skevningar) som du har använt på symbolinstansen i bildutdata.

Skillnaden mellan en sprite-mall och en texturkarta

Beroende på dina behov kan du antingen använda en sprite-mall eller texturkarta i dina mobilappar. Några av de viktigaste skillnaderna mellan Sprite-mallar och texturkartor visas i följande tabell. 

Funktion

Sprite-mall

Texturkarta

Prestanda i mobilappar

Låg

Hög

Effektiv inläsning av app

Hög, dvs. ingen beräkning

Låg, dvs. JSON-filberäkning

Storlek

Tar upp mer utrymme

Tar upp mindre utrymme

Animeringens kvalitet

Medel

Hög

Antal filer som skapas

Två filer: en bitmappsfil och en json-fil

Variabel: baseras på bildstorleken.

Antal skapade bitmappar

Beroende på antalet bildrutor som används i sprite-mallen kan antalet bitmappsfiler också öka, vilket resulterar i att sprite-mallens storlek ökar

Endast unika bitmappsfiler genereras i sprite-mallen, vilket minskar totalstorleken.

Skapa en Sprite-mall

Utför följande steg när du vill skapa en sprite-mall:

  1. Markera en eller flera symboler i biblioteket eller symbolinstanser på scenen. Du kan också inkludera bitmappar.

  2. Högerklicka på markeringen och välj Skapa Sprite-mall.

  3. I dialogrutan Skapa sprite-mall väljer du alternativ och klickar på Exportera.

    Alternativ för Exportera

    Beskrivning

    Bildstorlek

    Sprite-mallens totala storlek i pixlar. Standardinställningen är Automatisk storlek, vilket anpassar storleken så att alla sprites du inkluderar får plats.

    Bildformat

    Den exporterade sprite-mallens filformat. 8-bitars PNG och 32-bitars PNG har stöd för genomskinlig bakgrund (alfakanal). 24-bitars PNG och JPG har inte stöd för genomskinlig bakgrund. Den visuella skillnaden mellan 8-bitars PNG och 32-bitars PNG är i allmänhet mycket liten. 32-bitars PNG-filer är fyra gånger större än 8-bitars PNG-filer.

    Kantutfyllnad

    Utfyllnaden runt sprite-mallens kanter i pixlar.

    Formutfyllnad

    Utfyllnaden mellan varje bild i sprite-mallen i pixlar.

    Algoritm

    Den teknik som används för att paketera bilderna i sprite-mallen. Det finns två alternativ:

    • Grundläggande (standard)
    • MaxRects

    Dataformat

    Det interna format som används för bilddata. Välj det format som bäst passar det tänkta arbetsflödet för sprite-mallen efter exporten.

    Rotera

    Roterar sprites 90°. Det här alternativet är bara tillgängligt för vissa dataformat.

    Reducera

    Det här alternativet sparar utrymme i sprite-mallen genom att trimma bort oanvända pixlar från varje symbolbildruta som läggs till i mallen.

    Stapla bildrutor

    Om du markerar det här alternativet förhindrar du att dubblerade bildrutor i de markerade symbolerna dubbleras i den sprite-mall som skapas.

Exportera animeringar till mobilappar och spelmotorer

Animate hjälper dig att exportera animeringar till spelplattformar och mobila appar. Vill du visa animeringen i din mobil eller spelmotor? Titta på självstudiekursen i slutet av det här exemplet och följ stegen.

  1. I biblioteket högerklickar du på filmklippet.

  2. Välj Skapa Sprite-mall.

  3. Välj önskade alternativ i dialogrutan Sprite-mall.

  4. Klicka på Exportera.

Så här exporterar du animeringar för mobilappar och spelmotorer

Titta på videon när du vill veta mer om andra alternativ för att exportera animeringar.

Skapa en texturkarta

Spelutvecklare kan använda Animate för att skapa animeringar och exportera dem som texturkartor till Unity och andra populära spelplattformar. 

Processen för att skapa en texturkarta i Animate och importera den till Unity visas i följande diagram: 

En bild som visar arbetsflödet för att skapa en texturkarta och importera den till Unity.

Utför följande steg när du vill skapa en texturkarta för din animering: 

  1. I Animate kan du skapa en texturkarta för en vald symbol från biblioteket eller en symbolinstans på scenen. 

  2. Högerklicka på symbolen och välj Skapa texturkarta på menyn. Fönstret Skapa texturkarta visas. 

    Generera texturkarta

  3. Välj önskade exportalternativ för texturkartan. 

    Alternativ för Exportera Beskrivning
    Bildstorlek Texturkartans totala storlek i pixlar. Standardinställningen är Automatisk storlek, vilket anpassar storleken så att alla bilder du inkluderar får plats.
    Optimera storlekar
    • När alternativet Optimera storlekar är markerat tas tomma pixlar bort från bitmappar och storlekar har inte tvåpotens (standardalternativ). Detta är tillgängligt för alla genererade bitmappar.
    • När alternativet Optimera storlekar är avmarkerat genereras bitmappar baserat på valda storlekar.
    Bildformat Den exporterade sprite-mallens filformat. 8-bitars PNG och 32-bitars PNG har stöd för genomskinlig bakgrund (alfakanal). Den visuella skillnaden mellan 8-bitars PNG och 32-bitars PNG är i allmänhet mycket liten. 32-bitars PNG-filer är fyra gånger större än 8-bitars PNG-filer.
    Upplösning Markera ett värde mellan 0,3 och 3,0
    Kantutfyllnad Utfyllnaden runt texturkartans kanter i pixlar
    Formutfyllnad Utfyllnaden mellan varje bild i texturkartan i pixlar.
    Algoritm

    Den teknik som används för att paketera bilderna i texturkartan. Det finns två alternativ:

    • Grundläggande 
    • MaxRects (standard)
    Dataformat Det interna format som används för bilddata. JSON-formatet är standard.
    Rotera Roterar bilderna 90 grader. Det här alternativet är bara tillgängligt för vissa dataformat.
    Förenkla skeva objekt till bitmapp Välj det här alternativet om du vill använda omformningar med skevning för dina objekt. Animate konverterar dessa objekt till bitmappsbilder eftersom vissa spelplattformar inte tolkar omformningar med skevning korrekt. 
    Optimera filen Animation.json
    • När alternativet Optimera filen Animation.json markeras tas indraget bort, matrisen delas upp och namn som används förkortas (standardalternativ).
    • När alternativet Optimera filen Animation.json avmarkeras exporteras alternativet med indrag och meningsfulla namn.

  4. Du kan välja att exportera symbolen i flera bitmappar baserat på storleken.

    Skapa texturkarta för flera bitmappar

     För material som är större än den valda bildstorleken visas en varning.

  5. Om du vill förhandsgranska texturkartan klickar du på fliken Förhandsgranska. 

    Förhandsgranska texturkartan efter att du har skapat den

  6. Klicka på Bläddra och välj målsökvägen för utdatafilen på din dator, eller ange sökvägen i textområdet och klicka på Exportera.

Den genererade utdatamappen för texturkartan innehåller följande filer:

Animation.json

Den här filen innehåller information om animeringen. Identiska bildrutor optimeras och konsolideras i filen Animation.json som standard.

spritemap.json

Den här filen innehåller information om filen spritesheet.png.

spritemap.png

För den exporterade symbolen innehåller den här filen bitmappsrepresentationen av de unika texturer som minst krävs för att rekonstruera animeringen.

Du kan använda den genererade texturkartan i alla spelplattformar, till exempel Unity, med lämpligt plugin-program för import.

Importera texturkartan till Unity

Du kan importera de texturkartefiler Animate skapar till dina favoritspelplattformar. Om du vill importera texturkartefilerna kan du skapa plugin-program för önskade spelplattformar. Det ingår ett exempel-plugin-program för import för Unity-verktyget. 

Importera texturkartan till Unity så här:

  1. Skapa ett projekt på önskad plats i Unity. På den här platsen skapas en mapp med undermappen Assets. 

  2. Skapa två undermappar under Assets som Resources och Editor. 

  3. Klicka här för att ladda ned exempelplugin-programmet för Unity. Välj Unity Plugin på fliken Downloads och välj den version du ska ladda ned. 

    Unity-plugin.zip består av filerna Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs och Effect.shader.

    När du laddar ned exempelfilen innebär det att du godkänner våra Användarvillkor och vår Integritetspolicy online. 

  4. Flytta texturkartefiler som Animation.json, spritemap.json, spritemap.png och Unity-filer som Plugin.cs och Effect.shader till Assets > Resources.

  5. Flytta filerna AnimateEditor.cs och Wrapperplugin.cs till mappen Assets.

  6. I Unity klickar du på filen AnimateEditor.cs och drar den till Main Camera.

  7. Uppspelning. När du spelar upp ditt projekt delas spritemap upp i olika sprites.

  8. Flytta AnimateEditor.cs till Editor.

  9. I Unity klickar du på filen Wrapperplugin.cs och drar den till Main Camera. Avmarkera också, eller ta bort, AnimateEditor.cs från Main Camera.

  10. Spela upp eller publicera dina utdata som du vill. 

Du kan till och med anpassa plugin-programmet genom att ändra filen Wrapperplugin.cs efter dina behov.

Unity-plugin-programmet har stöd för effekter för texturkartefiler som genererats i Animate. Plugin-programmet har även stöd för maskering via lager. Maskeringsfunktionen gäller endast för Unity 2017 och senare versioner. 

Texturpublicering

Som animatör kan du fortsätta att utveckla innehåll i vektorformat och exportera det i vektor- eller rasterformat för HTML 5-plattformar. Ett alternativ för att exportera animeringar som texturkartor har lagts till i publiceringsinställningarna för att förhöja animeringarnas prestanda.

1. Skapa ett canvas-dokument. Välj Arkiv > Nytt för att visa dialogrutan Nytt dokument. 

2. Välj fliken Avancerat och klicka på HTML5 Canvas. Ett nytt FLA-dokument öppnas.

3. Klicka på Arkiv > Publiceringsinställningar. Om Exportera dokument som textur är aktiverat på fliken Grundläggande, visar fliken Bildinställningar publiceringsalternativ för textur. Som standard inkluderas alla symboler i texturpubliceringen. Klicka på inställningsikonen i närheten när du selektivt vill välja symboler för texturer. 

Även om prestandan förbättras, ökar även storleken på materialet. Du kan också öka upplösningen till 2 eller 3 gånger bildernas originalupplösning för HiDPI-skärmar. Klicka på verktygssymbolen bredvid alternativet Exportera dokument som textur som på skärmbilden nedan när du vill ändra upplösningsinställningarna. Dra i numren i närheten av Upplösning när du vill öka den 2 eller 3 gånger.

Som standard är upplösningen för texturpublicering inställd på 2X. Dessutom kan upplösningsintervallet också ändras från 0,3 till 3X.

 Texturpublicering tillämpas endast på HTML5 Canvas-dokumenttypen.

Exportera dokument som textur har aktiverats
Exportera dokument som textur har aktiverats

Exportera dokument som textur har aktiverats

Att välja en raster- eller vektorfil liknar att välja mellan filstorlekar och prestanda. HTML5-plattformar är optimerade för rasterinnehåll. Så för en del komplexa former är det bättre att konvertera vektorbilder till raster i förväg. För en del av det grundläggande innehållet kan du fortfarande använda vektorinnehåll. Animate ger dig detta alternativ i form av en dialogruta där du delvis kan välja symboler. Att du delvis kan välja symboler innebär att du kan välja symboler som ska konverteras till raster medan de kvarvarande förblir vektorer.

Om du vill öppna dialogrutan för att delvis välja symboler klickar du på Ändra i dialogrutan Publiceringsinställningar och väljer en symbol i listan. Som standard är alla symboler valda.

Ändra delvist val av symboler
Ändra delvist val av symboler

Välj symbolerna du vill ha i listan. 

Delvist val av symboler
Delvist val av symboler

Förbättra grafikprestandan med bitmappstexturer

I Animate förbättrar bitmappstexturer prestandan i animeringar för olika plattformar. Vill du minska komplexiteten hos vektorer med bitmappstexturer? Titta på självstudiekursen i slutet av det här exemplet och följ stegen.

  1. På panelen Egenskapsinspektören klickar du på Publiceringsinställningar.

  2. På fliken Grundläggande , väljer du skiftnyckelikonen intill Exportera dokument som textur.

  3. På fliken Bildinställningar klickar du på Ändra och väljer de symboler du vill ha.

  4. Klicka på OK.

Så här publicerar du tillgångar som bitmappstexturer för högre prestanda

Titta på videon när du vill se hur animeringar med bitmappstexturer fungerar.

 Adobe

Få hjälp snabbare och enklare

Ny användare?

Snabblänkar

Visa alla dina planer Hantera dina planer
Visa snabblänkar
Dölj snabblänkar

Juridiska meddelanden    |    Sekretesspolicy online