Användarhandbok Avbryt

Använda kameran i Animate

  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

 

Läs den här artikeln om du vill veta mer om hur du arbetar med kameran i Animate.

Med kameran i Animate kan animatörer simulera en verklig kamera. Tidigare var animatörer tvungna att använda tillägg från andra leverantörer, med varierande kvalitet och kompatibilitet, eller så fick de ändra sina animeringar så att de härmade kamerarörelser. Animatörer kan använda följande funktioner som är nödvändiga för alla typer av filmer.

  • Panorera med motivet i bildrutan
  • Zooma in på ett intressant objekt för en dramatisk effekt
  • Zooma ut från en bildruta för att påminna användaren om helhetsbilden
  • Ändra fokus för att dra tittarens uppmärksamhet från ett objekt till ett annat
  • Rotera kameran
  • Använda färgton eller filter för att använda färgeffekter på en scen

När du ställer in en kameravy för din komposition ser du lagren som om du såg dem genom kameran. Du kan också lägga till interpoleringar eller nyckelbildrutor på ett kameralager.

Kameraverktyget finns för alla inbyggda dokumenttyper i Animate – HTML Canvas, WebGL och ActionScript.

Aktivera eller inaktivera kameran

Aktivera något av följande alternativ när du vill använda kameran:

  • Klicka på kameraikonen på verktygspanelen.
  • Klicka på knappen Lägg till/ta bort kamera på tidslinjen.

När en kamera är aktiverad visas en scengräns i samma färg som kameralagret.

Arbetsytan Kamera

A. Scenkontur B. Kameraikon C. Kameraegenskaper D. Färgeffekter för kamera E. Kameraverktyg F. Kameraikon G. Kameralager 

Scenen fungerar nu som kamera för dokumentet. Ett nytt kameralager med kameraobjektet läggs till på panelen Tidslinje. När du väljer kameraverktyget aktiveras kameraikonen i egenskapsinspektören.

När kameran är aktiverad händer följande:

  • Det aktuella dokumentet placeras i kameraläge.
  • Scenen förvandlas till en kamera.
  • Gränsen för kameran visas vid scengränsen.
  • Kameralagret markeras.  

Zooma, rotera eller panorera kameran

Zooma kameran

  1. Använd zoomkontrollerna på skärmen för att zooma objektet eller ange zoomvärden på egenskapspanelen för kameran.

    Zooma och rotera
    Zooma och rotera

  2. Om du vill zooma in på scenen ändrar du zoomvärdena eller väljer reglaget längst ned på scenen.

  3. Om du vill zooma in på innehållet flyttar du skjutreglaget mot sidan med + och om du vill zooma ut flyttar du skjutreglaget mot sidan med -.

  4. Du kan aktivera ett obegränsat antal zoomvärden på reglaget genom att släppa reglaget så att det hoppar tillbaka till mittenpositionen. 

Rotera kameran

  1. Använd zoomkontrollerna på skärmen för att rotera objektet eller ange rotationsvärden på egenskapspanelen för kameran.

  2. Du kan ange rotationseffekten för varje lager genom att ändra rotationsvärdena eller använda skjutreglagen för rotation för att ändra rotationen.

  3. Du kan aktivera ett obegränsat antal rotationsvärden på reglaget genom att släppa reglaget så att det hoppar tillbaka till mittenpositionen. Talet mitt på kontrollen anger den aktuella rotationsgrad som används.

Panorera kameran

  1. Klicka på kamerans begränsningsram och dra var som helst på kameralagret på scenen.

  2. Om du vill panorera det markerade objektet rullar du uppåt eller nedåt eller så använder du Shift-tangenten för att panorera horisontellt eller vertikalt utan någon lutning.

  3. När kameraverktyget är aktivt blir alla dra-åtgärder i stället panoreringsåtgärder innanför kameragränserna.

Använda kontrollerna för kamerapanorering

Du kan använda kamerakoordinaterna X och Y i Kameraegenskaper i egenskapsinspektören för kameran för att panorera kameran med precision.
Panoreringskontroller för kamera
Panoreringskontroller för kamera

Om du vill panorera objekt horisontellt flyttar du musen över värdet för x-koordinaten och drar reglaget åt höger eller vänster. 

Om du vill panorera objekt vertikalt flyttar du musen över värdet för y-koordinaten och drar reglaget åt höger eller vänster.

Återställa alternativ för kameraeffekter

Du kan återställa ändringarna som du gör med kameran för panorering, zoomning, rotation och färgeffekter om du vill återgå till de ursprungliga inställningarna. Klicka på återställningsikonen bredvid varje egenskap om du vill behålla dina tidigare egenskapsvärden.

Kameraegenskaper
Kameraegenskaper

Använda färgton i ett kameralager

  1. Välj panelen Kamera > Egenskaper. Markera eller avmarkera kryssrutan Färgton för att aktivera eller inaktivera färgtonseffekten.

    Färgeffekter för kamera
    Färgeffekter för kamera

  2. Ändra toningsvärdet (procentandel) och RGB-färgtonen för den aktuella bildrutan.

     Den här funktionen stöds för dokument av typen AS3 och WebGL.

Justera färgfilter i ett kameralager

  1. Markera kryssrutan Justera färg på egenskapspanelen för kameran för att aktivera eller inaktivera filtereffekten.

  2. Ändra värdena för intensitet, kontrast, mättnad och nyans för den aktuella bildrutan. Tillåtet intervall för intensitet, kontrast och mättnad är -100 % till 100 % och för nyans -180° till 180°.

     Den här funktionen stöds endast för dokumenttypen AS3.

Skapa parallaxeffekt med kamera och lagerdjup

Som speldesigner eller -utvecklare vill du skapa en spännande spelupplevelse. Genom att använda olika objekt i ett spel i förgrunds- och bakgrundslagren kan du styra dessa objekts hastighet och position. Genom att hålla kamerans fokus riktat på en konstant punkt kan du flytta objekten i olika hastigheter om du vill skapa en tredimensionell effekt. När du skapar dina 2D-animeringar i Animate kan du åstadkomma den effekten genom att använda kameran och lagerdjupsfunktionen. Du kan skapa parallaxeffekter för objekt genom att ändra lagerdjup med hjälp av lagerdjupspanelen. Klicka på Fönster > Lagerdjup om du vill använda lagerdjup.

Klicka här om du vill ha mer information om lagerdjup.

  1. Skapa flera objekt på olika lager i Animate.

  2. Lägg till olika lagerdjup för varje lager.

  3. Lägg till ett kameralager genom att klicka på kameraverktyget.

    Kameralager i lagerdjup
    Kameralager i lagerdjup

Du kan se objektens djup och perspektiv med den här effekten.

  • Objekt närmare kameran rör sig snabbare än objekt långt ifrån kameran.
  • När kameralagret har värdet 0, har objekt som befinner sig närmare kameran lägre positiva nummer. Och objekt långt ifrån kameran har höga positiva nummer. Lager som ligger bakom kameran har negativa värden. 

Video som visar parallaxeffekten och kamerans z-djup.

I den här videon visas parallaxeffekten följd av kamerazoom.

Låsa ett lager med kameran

Som animatör eller speldesigner vill du få vissa av animeringens objekt att fästas till kamerans perspektiv. Till exempel en åtgärdsknapp, ett informationsmeddelande i ett spel som visar tidräknaren, eller ett vapen. I sådana fall måste du låsa resursen till kamerarörelsen. Animate-funktionen Fäst till kameran gör det möjligt för dig att skapa den här effekten.

Låsa ett lager med kameran
Låsa ett lager med kameran

När du kopplar ett lager till kameran kommer objekt i det lagret att fästas vid kameran och flyttas tillsammans med kameran. Det gör att det ser ut som om de inte påverkas av kamerans rörelser i det färdiga resultatet.

Du kan lägga till ett enskilt lager till kameran genom att klicka på punkten i fäst kamera-ikonens kolumn. Om lagret är kopplat till kameran visas en ikon för det bredvid lagrets namn.  

Följande bilder visar lagrets beteendet innan och efter att det fästs till kameran:

Bild av en animering när lagret inte är fäst till kameran:

Lager utan kameralås
Lager utan kameralås

Bild av en animering när lagret är fäst till kameran:

Lager med kameralås
Lager med kameralås

Du kan också lägga till eller ta bort alla lager från kameran genom att klicka på fäst kamera-ikonen på tidslinjen. 

Fäst alla lager till kameran
Bild av alla lager när de är fästa till kameran

Använda kameran vid körning

Du kan infoga, få tillgång till eller hantera kameran vid körning med kamera-API:erna för dokumenttyperna AS3, WebGL och HTML Canvas. Nedan följer en lista över kamera-API:er för dokumenttyperna AS3, WebGL och HTML Canvas:

Typ

Klass

Exempel

Beskrivning

AS3

VirtualCamera

import fl.VirtualCamera;

var cameraObj = VirtualCamera.getCamera(root);

Hämta kameraobjektet. Så här hämtar eller ställer du in kameraegenskaper vid körning.

HTML Canvas

VirtualCamera

var cameraObj=AdobeAn.VirtualCamera.getCamera(exportRoot);

Hämta kameraobjektet. Se till att du aktiverar kameran när du redigerar innehållet.

WebGL

VirtualCamera

var cameraObj = flwebgl.VirtualCamera.getCamera(stage.getPlayer());

Hämta kameraobjektet. Se till att du aktiverar kameran när du redigerar innehållet.

 Alla dessa metoder kan användas med dokumenttypen AS3. Vissa metoder är inte tillgängliga för dokumenttyperna WebGL och HTML Canvas. Vilka metoder som kan användas med WebGL och HTML Canvas eller inte anges i de två sista kolumnerna i tabellen.

Metoder för virtuell kamera

S.No

Metod

Prototyp

Exempel

Beskrivning

HTML Canvas

WebGL

1

getPosition

getPosition():Object

trace(cameraObj.getPosition().x, cameraObj.getPosition().y,
cameraObj.getPosition().z);
Returnera objekt med x-, y- och z-egenskaper som anger kamerans aktuella plats.

Ja

Ja

2

setPosition

setPosition(posX: Number, posY: Number, posZ: Number = 0): void

cameraObj.setPosition(100,100,100);

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

Ja

Ja

3

moveBy

moveBy(tx: Number, ty: Number, tz: Number = 0): void

cameraObj.moveBy(100,100,100);

Flytta kameran i förhållande till aktuell position med tx, ty eller tz.
Obs! ”tz” är bara meningsfullt om lagerdjup är aktiverat, standardvärde = 0.

Ja

Ja

4

resetPosition

resetPosition():void

cameraObj.resetPosition();

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

Ja

Ja

5

getZoom

getZoom(): Number

trace(cameraObj.getZoom());

Returnera kamerans aktuella zoomvärde. Standardvärdet är 100 %.

Ja

Ja

6

setZoom

setZoom(zoom: Number): void

cameraObj.setZoom(120);

Zooma kameran till det absoluta värde som anges av indataparametrarna i procent.

Ja

Ja

7

zoomBy

zoomBy(zoom: Number): void

cameraObj.zoomBy(100);

Zooma kameran i förhållande till det aktuella zoomvärdet (enheten är procent).

Ja

Ja

8

resetZoom

resetZoom(): void

cameraObj.resetZoom();

Återställ kamerans zoom till dess standardvärde, dvs. 100 %.

Ja

Ja

9

getRotation

getRotation(): Number

trace(cameraObj.getRotation());

Returnera den aktuella vinkeln för kameran.  

Ja

Ja

10

setRotation

setRotation(angle: Number): void

cameraObj.setRotation(45);

Rotera kameran efter den absoluta vinkel som anges i indataparametrarna.

Ja

Ja

11

rotateBy

rotateBy(angle: Number): void

cameraObj.rotateBy(60);

Rotera kameran i förhållande till den aktuella vinkel som anges av indataparametrarna.

Ja

Ja

12

resetRotation

resetRotation():void

cameraObj.resetRotation();

Återställ kameravinkeln till noll.

Ja

Ja

13

setTint

setTint(tintColor: uint, tintPercent: Number): void

cameraObj.setTint(0x56FFFF, 68);

Ange kameraton med färgton (RGB) och färgton i procent (procentandel av färgton).

Nej

Ja

14

setTintRGB

setTintRGB(red: uint, green: uint, blue: uint, tintPercent: Number): void

cameraObj.setTintRGB(0xff, 0, 0, 50);

Ange kameraton med de uppdelade färgvärdena R, G, B och tintPercent (procentandel av färgton).

Nej

Ja

15

getTint()

getTint(): Object

var tint=cameraObj.getTint();
trace("color:",tint.color,
"percentage:",tint.percent);

Returnera objekt med två egenskaper: ”percent” och ”color”.

Nej

Ja

16

getTintRGB

getTintRGB(): Object

var tint = cameraObj.getTintRGB();
trace("tint color red:", tint.red,"green:",
tint.green," blue:",tint.blue,"tint percent: ",tint.percent);

Returnera objekt med fyra egenskaper: ”percent”, ”red”, ”green” och ”blue”.

Nej

Ja

17

resetTint

resetTint()

cameraObj.resetTint();

Ta bort kameraton.

Nej

Ja

18

setColorFilter

setColorFilter(brightness: Number, contrast: Number, saturation: Number, hue: Number): void

cameraObj.setColorFilter(100,-50,
50,-100);

Ange kamerans färgfilter med uppdelade värden för (intensitet, kontrast, mättnad, nyans).

Nej

Nej

19

resetColorFilter

resetColorFilter()

cameraObj.resetColorFilter();

Ta bort färgfilter.

Nej

Nej

20

reset

reset()

cameraObj.reset();

Återställ alla kameraegenskaper till standardvärdena.

Ja

Ja

21

setZDepth

setZDepth(zDepth: Number): void

cameraObj.setZDepth(200);

Ställ in kamerans värde för Z-djup.

Ja

Nej

22

getZDepth

getZDepth(): Number

trace(cameraObj.getZDepth());

Returnera kamerans nuvarande värde för Z-djup.

Ja

Nej

23

pinCameraToObject

pinCameraToObject(object:DisplayObject, offsetX:Number=0,offsetY:Number=0, offsetZ=0)

cameraObj.pinCameraToObject
(getChildByName("InstanceName"), 200,50);

Kameran följer det objekt som anges som indataparameter vid körning. Om offsetX, offsetY & offsetZ anges följer kameran (x+offsetX,y+offsetY, z+offsetZ).

Ja

Ja

24

setPinOffset

setPinOffset(offsetX:Number, offsetY:Number,offsetZ:Number)

cameraObj.setPinOffset(-60,0);

Ändra offsetX och offsetY för kamerans fästning med objekt. Kameran följer objektet enligt (x+offsetX, y+offsetY, zDepth+z) vid körning.

Ja

Ja

25

unpinCamera

unpinCamera()

cameraObj.unpinCamera();

Ta bort kamerans fästning med objekt.

Ja

Ja

26

setCameraMask

setCameraMask(maskObj:DisplayObject)

cameraObj.setCameraMask(maskObj);

Ange maskObj som en mask över kameran.

Nej

Nej

27

removeCameraMask

removeCameraMask()

cameraObj.removeCameraMask();

Ta bort masken från kameran.

Nej

Nej

Få tillgång till kamera som filmklippsobjekt

Typ

Metod

Prototyp

Exempel

AS3

getCameraAsMovieClip

getCameraAsMovieClip(container:DisplayObject):MovieClip

var cameraObj=fl.VirtualCamera.getCameraAsMovieClip(root);

HTML Canvas

getCameraAsMovieClip

getCameraAsMovieClip(container:DisplayObject):MovieClip

var cameraObj=AdobeAn.VirtualCamera.getCamera(exportRoot);

WebGL

getCameraAsMovieClip

getCameraAsMovieClip(container:DisplayObject):MovieClip

var cameraObj=flwebgl.VirtualCamera.getCameraAsMovieClip(this);

Maskera objekt vid körning (för AS3-dokument)

Du kan maskera objekt vid körning med hjälp av följande kamera-API-kod:

import fl.VirtualCamera;
fl.VirtualCamera.getCamera(root).setCameraMask(torch);

Nedan ser du hur en animering med en ovalformad mask ser ut:

Skapa interaktiva kameraanimeringar med kodguiden för åtgärder

Följande bild visar steg för steg hur du skapar en animering med en interaktiv kamera. Du kan använda kodguiden för åtgärder i HTML Canvas-dokument. 

Videon nedan visar hur den interaktiva kameran används. Du kan se hur du kan ändra fokus mellan fallskärm, jetpack och det urbana landskapet vid olika intervall under körningen.

Video som visar hur kameran används vid körtillfället

Ett videoexempel som visar hur kameran används vid körtillfället

Beskära objekt på scenen

Med Adobe XD kan du stapla eller täcka över innehåll ovanpå en annan rityta för att simulera interaktiva bildeffekter. Till exempel listrutor, tangentbord som fälls upp eller ljusbordseffekter. Med överlagringar kan du även återanvända en rityta flera gånger utan att duplicera överlagringsinnehållet för varje rityta. 

Klicka på knappen Klipp ut innehåll utanför scenen när du vill beskära innehåll som hamnat utanför scenen. Med kamera- och scenvyn kan du visa innehållet innanför kameragränserna.

Få hjälp snabbare och enklare

Ny användare?