Användarhandbok Avbryt

Redigera och publicera VR

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

 

I Animate introduceras dokumenttyperna VR 360 och VR-panorama som hjälper dig att enkelt skapa spännande innehåll. Du kan också använda den nya VR-dokumenttypen när du vill importera 3D-modeller (som .glb-filer) i projekt och skapa animeringar med 3D-innehåll i Animate. 

Du kan använda den nya VR-panelen när du vill granska innehåll som skapas i VR-dokumenttyperna. Du kan klicka och flytta filmklippsinstanser på VR-panelen. Objekten identifieras automatiskt i Animate när du klickar på och flyttar dem. VR-vyn låter dig placera objekten i 3D-rymden. Ändringarna av placering av objekten (filmklipp) i VR-vyn speglas automatiskt tillbaka till 2D-scenen. Du kan också markera lager som texturlager på tidslinjepanelen så att de lindas runt en cylinder respektive sfär för de två dokumenttyperna.

Med Animate kan du också hantera VR-animeringar vid körningen med hjälp av en uppsättning API:er. Du kan till exempel visa objekt i VR-miljö när en användare klickar på en knapp. 

 Virtuell verklighet (360) och virtuell verklighet (panorama) i Animate är betaversioner inför oktoberversionen 2018.

VR-dokumenttyper

Det finns två dokumenttyper för virtuell verklighet (VR):

VR-panorama

  • Använd den här dokumenttypen när du vill skapa panoramainnehåll för VR-program. 
  • I den här dokumenttypen lindas innehåll som ritas direkt på texturlager runt en cylinder.
  • Du kan välja att ha en panoramabild på texturlager eller rita en bakgrund. 
  • Animate omvandlar 2D-animeringar som du skapar till interaktivt panoramainnehåll. 

VR 360

  • Använd den här dokumenttypen när du vill skapa 360-gradersinnehåll för VR-program.  
  • I den här dokumenttypen lindas innehåll som ritas direkt på texturlager runt en sfär.
  • Du kan välja att använda en 360-gradersliksidig rektangel-bild eller rita innehållet. 
  • Animate omvandlar 2D-animeringar som du skapar till 360-gradersinnehåll tillsammans med interaktivitet.
VR 360 och panorama på startskärmen
VR 360 och panorama på startskärmen

Skapa och publicera VR-innehåll

Utför följande steg när du vill skapa VR-innehåll i Animate:

  1. Importera en 360- eller panoramabild till scenen som bakgrund.

    Om bildformatet är stort, kan du justera storleken på scenvyn.

    • Ställ in storleken genom att välja Ändra > Dokument
    •  Klicka på Matcha innehåll

    Välj ikonen Centrera scenen överst till höger i fönstret när du vill ställa in bilden på skärmens mitt.

  2. Klicka på ikonen Skapa texturfigursättning för alla lager på tidslinjepanelen när du vill skapa ett texturlager. Se skärmbilden nedan:

    Skapa texturfigursättning för lager
    Skapa texturfigursättning för lager

    Texturlagret lindas runt cylindern eller sfären beroende på den valda dokumenttypen.

  3. Lägg till objekt på scenen, lägg till klassiska interpoleringar eller rörelseinterpoleringar för objekten beroende på materialet och skapa din animering. 

    VR 360-scen
    VR 360-scen

    Skärmbilden ovan visar stagingvyn i Animate med liksidig rektangel-bilden i VR 360-dokumenttyp, en fågel med en stödd rörelsebana och klassisk interpolering i tidslinjen. 

  4. Förhandsvisa innehåll med Fönster > VR-vy.

    Förhandsvisa VR-innehåll med VR-vyn
    Förhandsvisa VR-innehåll med VR-vyn

    Klicka på Starta VR-vy i panelen VR-vy.

    Panelen VR-vy
    Panelen VR-vy

    I VR-vyns förhandsgranskningsläge kan du använda Återställa om du vill återställa innehållet. VR-vyn återspeglar inte automatiskt ändringar som görs på redigeringsscenen. Klicka på Uppdatera om du vill se ändringarna i materialet i mellanlagringsmiljön.

    Alternativen Uppdatera och Återställ i VR-vyn
    Alternativen Uppdatera och Återställ i VR-vyn

    Du kan flytta filmklippsinstanser till förhandsgranskningsläget. Animate upptäcker objekten automatiskt när du hovrar med musen på dem. Markörens form ändras till en hantelikon när du hovrar med musen på objekt så som visas i skärmbilden nedan. Du kan flytta objekt längs en cylindrisk eller en sfärisk rörelsebana beroende på vald dokumenttyp.

    Klicka på förhandsgranskningsskärmen och dra om du vill panorera i VR-vyn. 

    Hantelikon för att flytta objekt
    Hantelikon för att flytta objekt

  5. Använd Arkiv > Publicera eller Ctrl + Enter när du vill publicera innehållet. När du publicerar lindas bilden runt ett cylindriskt eller sfäriskt rutnät i Animate. Du kan lägga till fler lager och animeringsinnehåll på lagren.

    Publicerade utdata för VR 360-exemplet visas i den animerade GIF-filen nedan. 

    Prov på utdata med VR 360
    Prov på utdata med VR 360

    Prov på utdata med VR-panorama
    Prov på utdata med VR-panorama

    När du publicerar VR-innehåll kan du välja att använda JavaScript-värdbibliotek som körtidsmiljö. Som standard använder Animate körtidsmiljön för publicerat innehåll från värdbiblioteken. Du kan avmarkera alternativet i publiceringsinställningarna om du vill paketera körtidsmiljön med publicerade utdata. 

    Inställningar för publicering
    Publiceringsinställningar för bibliotek

Modernisera animeringar med virtuell verklighet

Virtuell verklighet är en trend som dominerar på marknaden. Vill du använda virtuell verklighet i ditt innehåll? Titta på självstudiekursen i slutet av det här exemplet och följ stegen.

  1. Klicka på Avancerat på fliken Start.

  2. Välj VR-panorama och klicka på Skapa.

Så här skapar du panoramainnehåll med Animate

Titta på videon för att lära dig hur du lägger till fler effekter i panoramavyn för att förbättra en virtuell upplevelse.

Självstudiekurs om WebGL-glTF-export (standard och utökad)

Video som visar hur man använder WebGL-glTF-export (standard och utökad)

Använda 3D-innehåll

Du kan använda VR-dokumenttypen när du vill importera 3D-modeller (.glb-filer) i Animate-projekt och skapa 3D-innehåll.

  1. Skapa ett dokument med typen VR (360) eller VR (panorama).

  2. Välj Arkiv > Importera och bläddra till .glb-filen för att importera till scen eller arkiv.

    Importera 3D-innehåll till mellanlagring
    importera 3D-innehåll till scenen

  3. Lägg till animeringar och interaktivitet på samma sätt som objekt i filmklipp och publicera.

    Du kan också granska 3D-modellen i VR-vyn.

Använda VR vid körningar

Med Animate kan du också hantera VR-animeringar vid körningen med API:er. Du kan till exempel introducera vissa objekt i en 360 VR-miljö när en användare klickar på en knapp. 

Följande VR API:er finns:

Paket: anWebgl

Egenskaper

Namn

Typ/klass

Åtkomst

Beskrivning

Exempel

scen

scen

RW

Hämta/ange scenegenskaper

anWebgl.stage

virtualCamera

VirtualCamera

RW

Åtkomst till standardkamera

anWebgl.virtualCamera

Rot

MovieClip

RO

Översta visningsobjekt (tidslinje för aktuell scen).

anWebgl.root

Metoder

Namn

Prototyp

Beskrivning

Exempel

addGLBFile

addGLBFile(filePath: string, successCallback : function, errorCallback : function):void

Läs in 3D-modellen från angiven GLB-fil

anWebgl.addGLBFile("model.glb" , successCallbackFunction, errorCallbackFunction).

playAll

playAll() : void

Spela animering för alla filmklipp inklusive rot

anWebgl.playAll();

stopAll

stopAll():void

Stoppa animering för alla filmklipp inklusive rot

anWebgl.stopAll();

Klass: MovieClip

Ärver: DisplayObjectContainer

Egenskaper

Metoder

Namn

Prototyp

Beskrivning

Exempel

Uppspelning

play(): void

Spelar animering för filmklipp.

anWebgl.root.getChildByName("name").play();
(or)

this.play();

Stopp

stop(): void

Stoppar animering för filmklipp

anWebgl.root.getChildByName("name").stop();

 

playAll

playAll() : void

Spelar upp animering för alla filmklipp, inklusive rot.

anWebgl.root.getChildAt(0).playAll();

 

stopAll

stopAll():void

Stoppar animering för alla filmklipp, inklusive rot.

anWebgl.root.getChildAt(0)).stopAll();

 

Klass: DisplayObject

Ärver: IEventDispatcher

Namn

Prototyp

Beskrivning

Exempel

hitTestPoint

hitTestPoint(x, y, booelsk).

returnerar DisplayObject/DisplayObjectContainer/MovieClip baserat på typen av träffobjekt.

x och y är punktkoordinater på skärmen.

anWebgl.root.hitTestPoint(300, 200, sant, falskt);

Namn

Typ/klass

Åtkomst

Beskrivning

Exempel

X

Number

RW

Översättning på X-axel

var name =anWebgl.root.getChildByName("name");
name.x+=10;

 

J

Number

RW

Översättning på Y-axel

var name = anWebgl.root.getChildByName("name");
name.y+=10;

 

Z

Number

RW

Översättning på Z-axel

var name = anWebgl.root.getChildByName("name");
name.z+=10;

 

scaleX

Number

RW

Skala längs X-axel

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleX=2;

 

scaleY

Number

RW

Skala längs Y-axel

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleY=10;

 

scaleZ

Number

RW

Skala längs Z-axel

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleZ=10;

 

rotationX

Number

RW

Rotation längs X-axel

anWebgl.root.getChildByName("name").rotationX+=30;

(oeller)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

Number

RW

Rotation längs Y-axel

anWebgl.root.getChildByName("name").rotationY+=30;

 

rotationZ

Number

RW

Rotation längs Z-axel

anWebgl.root.getChildByName("name").rotationZ+=30;

 

Överordnad

DisplayObjectContainer

RO

Överordnad behållare

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.parent)

 

Synlig

Boolean

RW

Objektssynlighet

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.visible);

Klass: DisplayObjectContainer

Ärver: DisplayObject

Namn

Prototyp

Beskrivning

Exempel

numChildren

numChildren:num

returnerar antalet underordnade till ett objekt

anWebgl.root.movieClipInstanceName.numChildren;

removeChild

removeChild(obj:DisplayObject):void

tar bort argumentobjekt, om närvarande

anWebgl.root.movieClipInstanceName.removeChild(childObj);

Innehåller

contains(obj:DisplayObject):boolean

returnerar sant om argumentobjektet är underordnat, annars falskt

anWebgl.root.movieClipInstanceName.contains(childObj);

getChildAt

getChildAt(index:Number): DisplayObject

returnerar underordnad vid argumentindex

anWebgl.root.movieClipInstanceName.getChildAt(2);

getChildByName

getChildByName(name:String):DisplayObject

returnerar underordnad med argumentnamn om det finns

anWebgl.root.movieClipInstanceName.getChildByName(childName);

Klass: Stage

Egenskaper

Namn

Åtkomst

Beskrivning

Exempel

stageWidth

RO

Scenens bredd

anWebgl.stage.stageWidth

stageHeight

RO

Scenens höjd

anWebgl.stage.stageHeight

Färg

RW

Scenens bakgrundsfärg

anWebgl.stage.color

Klass: VirtualCamera

Metoder

Namn

Prototyp

Beskrivning

Exempel

getCamera

getCamera()

Hämta kameraobjektet. Hämtar eller ställer in kameraegenskaper vid körning.

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

getPosition

getPosition()

Returnera objekt med x-, y- och z-egenskaper som anger kamerans aktuella plats.

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

setPosition

setPosition()

Flytta kameran till den absoluta position som anges av indataparametrarna. Standardvärde = 0.

let cameraPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setPosition(cameraPos);

 

moveBy

moveBy()

Flyttar kameran i förhållande till aktuell position.

let moveByPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().moveBy(moveByPos);

 

resetPosition

resetPosition()

Återställ kamerapositionen till ursprunglig position, dvs. (0,0,0).


anWebgl.virtualCamera.getCamera().resetPosition();

 

SetRotation

SetRotation()

Rotera kameran efter den absoluta vinkel som anges i indataparametrarna.

let __rotation__ = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setRotation(__rotation__);

 

resetRotation

resetRotation()

Återställ kameravinkeln till noll.

anWebgl.virtualCamera.getCamera().resetRotation();

 

Liknande innehåll

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