Verwenden Sie die Bildschirm-Zoomsteuerungen, um das Objekt zu zoomen oder im Eigenschaftenbedienfeld „Kamera“ die Werte im Bereich „Zoomen“ festzulegen.
In diesem Artikel erfahren Sie, wie Sie in Animate mit der Kamera arbeiten.
Mit der Kamera in Animate können Animatoren eine echte Kamera simulieren. Bislang waren Animatoren auf Drittanbietererweiterungen unterschiedlicher Qualität und Kompatibilität angewiesen oder mussten ihre Animationen bearbeiten, um die Bewegung einer Kamera nachzubilden. Animatoren können die folgenden Funktionen nutzen, die für jeden Film wesentlich sind.
Beim Festlegen einer Kameraansicht für Ihre Komposition sehen Sie die Ebenen, als würden Sie durch eine entsprechende reale Kamera blicken. Sie können auch Tweens oder Schlüsselbilder in einer Kameraebene hinzufügen.
Das Kamera-Werkzeug ist für sämtliche in Animate integrierten Dokumententypen verfügbar: HTML Canvas, WebGL und ActionScript.
Verwenden Sie eine der folgenden Optionen, um das Kamera-Werkzeug zu aktivieren:
Wenn eine Kamera aktiviert ist, wird eine Bühnenbegrenzung in derselben Farbe wie die Kameraebene angezeigt.
A. Bühnenkontur B. Kamerasymbol C. Kameraeigenschaften D. Kamerafarbeffekte E. Kamera-Tool F. Kamerasymbol G. Kameraebene
Die Bühne verhält sich nun als Kamera für das Dokument. Eine neue Kameraebene mit dem Kameraobjekt wird dem Zeitleistenfenster hinzugefügt. Wenn Sie das Kamera-Werkzeug auswählen, wird das Kamerasymbol im Eigenschafteninspektor aktiviert.
Wenn die Kamera aktiviert ist:
Verwenden Sie die Bildschirm-Zoomsteuerungen, um das Objekt zu zoomen oder im Eigenschaftenbedienfeld „Kamera“ die Werte im Bereich „Zoomen“ festzulegen.
Um in der Szene zu zoomen, passen Sie die Zoomwerte an oder nutzen Sie den Schieberegler am unteren Rand der Bühne.
Zum Vergrößern des Inhalts bewegen Sie den Schieberegler in Richtung + und zum Verkleinern in Richtung –.
Um eine unbegrenzte Anzahl von Zoomwerten auf beiden Seiten zu ermöglichen, müssen Sie den Schieberegler loslassen, damit er in die mittlere Stellung zurückkehrt.
Verwenden Sie die Bildschirm-Zoomsteuerungen, um das Objekt zu drehen, oder legen Sie im Bedienfeld „Kameraeigenschaften“ im Bereich „Drehen“ die Werte fest.
Um die Drehwirkung für die einzelnen Ebenen anzugeben, ändern Sie die Drehungswerte oder verwenden Sie den Drehungs-Schieberegler, um die Drehung zu manipulieren.
Um eine unbegrenzte Anzahl von Drehungen auf beiden Seiten zu ermöglichen, müssen Sie den Schieberegler loslassen, damit er in die Ruhestellung zurückkehrt. Die Zahl in der Mitte der Steuerung zeigt den Gradwert für die aktuell angewendete Drehung an.
Klicken Sie auf den Begrenzungsrahmen der Kamera und ziehen Sie ihn an eine beliebige Position innerhalb der Kameraebene auf der Bühne.
Um das ausgewählte Objekt zu schwenken, blättern Sie nach oben oder unten oder verwenden Sie die Umschalttaste, um das Objekt ohne Neigung horizontal oder vertikal zu schwenken.
Wenn das Kamera-Werkzeug aktiv ist, entspricht jedes Ziehen einem Schwenkvorgang innerhalb der Kamerabegrenzung.
Um Objekte in horizontaler Richtung zu schwenken, bewegen Sie den Mauszeiger auf den X-Koordinatenwert und ziehen Sie den Schieberegler nach rechts oder links.
Um Objekte in vertikaler Richtung zu schwenken, bewegen Sie den Mauszeiger auf den Y-Koordinatenwert und ziehen Sie den Schieberegler nach rechts oder links.
Sie können die Änderungen, die Sie mit der Kamera für Schwenk-, Zoom-, Dreh- und Farbeffekte vornehmen, jederzeit zurücksetzen, wenn Sie die ursprünglichen Einstellungen wiederherstellen möchten. Um Ihre bisherigen Eigenschaftswerte beizubehalten, klicken Sie auf das Symbol „Zurücksetzen“ neben jeder der Eigenschaften.
Wählen Sie das Bedienfeld Kamera > Eigenschaften aus. Um den Farbton-Effekt zu aktivieren oder zu deaktivieren, aktivieren Sie das Kontrollkästchen Farbton.
Ändern Sie den Farbtonwert (Prozentwert) und die RGB-Farbtonfarbe für das aktuelle Bild.
Diese Funktion wird für AS3- und WebGL-Dokumenttypen unterstützt.
Aktivieren Sie im Bedienfeld „Kameraeigenschaften“ das Kontrollkästchen „Farbe anpassen“, um den Filtereffekt zu aktivieren oder zu deaktivieren.
Ändern Sie die Werte für „Helligkeit“, „Kontrast“, „Sättigung“ und „Farbton“ für das aktuelle Bild. Der zulässige Bereich für „Helligkeit“, „Kontrast“ und „Sättigung“ liegt zwischen –100 und 100 % und für „Farbton“ zwischen –180 und 180 Grad°.
Diese Funktion wird nur für den AS3-Dokumenttyp unterstützt.
Spieledesigner oder -entwickler möchten ein fesselndes Spielerlebnis schaffen. Durch die Verwendung verschiedener Spieleobjekte in den Vordergrund- und Hintergrundebenen können Sie die Geschwindigkeit und Position dieser Objekte steuern. Indem Sie die Kamera auf einem konstanten Brennpunkt halten, können Sie Objekte mit unterschiedlichen Geschwindigkeiten verschieben und so einen dreidimensionalen Effekt erschaffen. Beim Erstellen Ihrer 2D-Animationen in Animate können Sie diesen Effekt mithilfe der Funktionen für Kamera und Ebenentiefe erzielen. Sie können einen Parallaxeffekt für Objekte erzeugen, indem Sie die Tiefe von Ebenen mithilfe des Bedienfelds Ebenentiefe ändern. Um die Funktion „Ebenentiefe“ zu verwenden, klicken Sie auf Fenster > Ebenentiefe.
Klicken Sie hier, um weitere Informationen zur Ebenentiefe zu erhalten.
Erstellen Sie in Animate mehrere Objekte auf unterschiedlichen Ebenen.
Fügen Sie jeder Ebene eine andere Ebenentiefe hinzu.
Klicken Sie auf das Kamera-Werkzeug, um eine Kameraebene hinzuzufügen.
Bei diesem Effekt können Sie die Tiefe und Perspektive von Objekten anzeigen.
Für Animatoren oder Spieledesigner ist es in einigen Fällen wünschenswert, einige Objekte der Animation an die Ansicht der Kamera zu koppeln. Beispiele hierfür sind Aktionsschaltflächen, das Heads-up-Display in einem Spiel, das die Zeitmessung anzeigt, oder eine Waffe. In solchen Fällen müssen Sie das Asset fest mit der Kamerabewegung verknüpfen. Dieser Effekt lässt sich in Animate mit der Funktion An Kamera anfügen erzielen.
Wenn Sie eine Ebene mit der Kamera verknüpfen, werden die Objekte in der Ebene mit der Kamera verknüpft und stets zusammen mit dieser bewegt. In der Ausgabe scheinen Kamerabewegungen so keine Auswirkungen auf die Objekte zu haben.
Sie können eine einzelne Ebene an die Kamera anfügen, indem Sie in der Spalte für das Symbol „An Kamera anfügen“ auf den Punkt klicken. Wenn die Ebene mit der Kamera verknüpft wurde, wird ein entsprechendes Symbol neben dem Ebenennamen angezeigt.
In den folgenden Abbildungen wird das Ebenenverhalten vor und nach dem Anfügen der Kamera gezeigt:
Abbildung der Animation mit einer Ebene, die nicht mit der Kamera verknüpft wurde:
Abbildung der Animation mit einer Ebene, die mit der Kamera verknüpft wurde:
Sie können die Kamerasperre für alle Ebenen aktivieren oder deaktivieren, indem Sie in der Zeitleiste auf das Symbol „An Kamera anfügen“ klicken.
Mit den Kamera-APIs für AS3-, WebGL- und HTML Canvas-Dokumente können Sie die Kamera zur Laufzeit einführen, darauf zugreifen und sie verwalten. Die folgenden Kamera-APIs können zur Laufzeit für AS3-, WebGL- und HTML Canvas-Dokumente verwendet werden:
Typ |
Klasse |
Beispiel |
Beschreibung |
---|---|---|---|
AS3 |
VirtualCamera |
import fl.VirtualCamera; var cameraObj = VirtualCamera.getCamera(root); |
Kameraobjekt abrufen. Zum Abrufen oder Einstellen von Kameraeigenschaften. |
HTML Canvas |
VirtualCamera |
var cameraObj=AdobeAn.VirtualCamera.getCamera(exportRoot); |
Kameraobjekt abrufen. Stellen Sie sicher, dass Sie die Kamera beim Schreiben des Inhalts aktivieren. |
WebGL |
VirtualCamera |
var cameraObj = flwebgl.VirtualCamera.getCamera(stage.getPlayer()); |
Kameraobjekt abrufen. Stellen Sie sicher, dass Sie die Kamera beim Schreiben des Inhalts aktivieren. |
Alle aufgeführten Methoden gelten für AS3-Dokumente. Einige der Methoden sind für WebGL- und HTML Canvas-Dokumente nicht verfügbar. Die für WebGL- und HTML Canvas geltenden Methoden sind in den letzten beiden Spalten der Tabelle angegeben.
S.No |
Methode |
Prototyp |
Beispiel |
Beschreibung |
HTML Canvas |
WebGL |
---|---|---|---|---|---|---|
1 |
getPosition |
getPosition():Objekt |
trace(cameraObj.getPosition().x, cameraObj.getPosition().y, cameraObj.getPosition().z); |
Gibt das Objekt mit den Eigenschaften „x“, „y“ und „z“ zurück, die den derzeitigen Standort der Kamera angeben. | Ja |
Ja |
2 |
setPosition |
setPosition(posX: Number, posY: Number, posZ: Number = 0): void |
cameraObj.setPosition(100,100,100); |
Verschiebt die Kamera an die absolute Position, die durch die Eingabeparameter angegeben wird. Standardwert = 0. | Ja |
Ja |
3 |
moveBy |
moveBy(tx: Number, ty: Number, tz: Number = 0): void |
cameraObj.moveBy(100,100,100); |
Verschiebt die Kamera relativ zur aktuellen Position um tx, ty oder tz. |
Ja |
Ja |
4 |
resetPosition |
resetPosition():void |
cameraObj.resetPosition(); |
Setzt die Kameraposition auf die ursprüngliche Position zurück, d. h. (0,0,0). |
Ja |
Ja |
5 |
getZoom |
getZoom(): Number |
trace(cameraObj.getZoom()); |
Gibt den aktuellen Zoomwert der Kamera zurück. Der Standardwert ist 100 %. |
Ja |
Ja |
6 |
setZoom |
setZoom(zoom: Number): void |
cameraObj.setZoom(120); |
Zoomt die Kamera auf den absoluten Wert, der durch die Eingabeparameter als Prozentwert angegeben wird. |
Ja |
Ja |
7 |
zoomBy |
zoomBy(zoom: Number): void |
cameraObj.zoomBy(100); |
Zoomt die Kamera relativ zum aktuellen Zoomwert (Einheit ist als Prozentwert angegeben). |
Ja |
Ja |
8 |
resetZoom |
resetZoom(): void |
cameraObj.resetZoom(); |
Setzt den Kamerazoom auf den Standardzoomwert zurück, d. h. 100 %. |
Ja |
Ja |
9 |
getRotation |
getRotation(): Number |
trace(cameraObj.getRotation()); |
Gibt den aktuellen Winkel der Kamera zurück. |
Ja |
Ja |
10 |
setRotation |
setRotation(angle: Number): void |
cameraObj.setRotation(45); |
Dreht die Kamera um den absoluten Winkel, der durch Eingabeparameter angegeben wird. |
Ja |
Ja |
11 |
rotateBy |
rotateBy(angle: Number): void |
cameraObj.rotateBy(60); |
Dreht die Kamera relativ zum aktuellen Winkel, der durch Eingabeparameter angegeben wird. |
Ja |
Ja |
12 |
resetRotation |
resetRotation():void |
cameraObj.resetRotation(); |
Setzt den Kamerawinkel auf null zurück. |
Ja |
Ja |
13 |
setTint |
setTint(tintColor: uint, tintPercent: Number): void |
cameraObj.setTint(0x56FFFF, 68); |
Legt den Kamerafarbton mithilfe von „tintColor(RGB)“ (Farbe des Farbtons, RGB) und „tintPercent“ (Prozentwert des Farbtons) fest. |
Nein |
Ja |
14 |
setTintRGB |
setTintRGB(red: uint, green: uint, blue: uint, tintPercent: Number): void |
cameraObj.setTintRGB(0xff, 0, 0, 50); |
Legt den Kamerafarbton mithilfe der einzelnen Farbwerte R, G, B und tintPercent (Prozentwert des Farbtons) fest. |
Nein |
Ja |
15 |
getTint() |
getTint(): Object |
var tint=cameraObj.getTint(); trace("color:",tint.color, "percentage:",tint.percent); |
Gibt ein Objekt mit zwei Eigenschaften zurück: „Prozent“ und „Farbe“. |
Nein |
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); |
Gibt ein Objekt mit vier Eigenschaften zurück: „Prozent“, „Rot“, „Grün“ und „Blau“. |
Nein |
Ja |
17 |
resetTint |
resetTint() |
cameraObj.resetTint(); |
Entfernt den Kamerafarbton. |
Nein |
Ja |
18 |
setColorFilter |
setColorFilter(brightness: Number, contrast: Number, saturation: Number, hue: Number): void |
cameraObj.setColorFilter(100,-50, |
Legt den Kamerafarbfilter mithilfe einzelner Werte fest (Helligkeit, Kontrast, Sättigung, Farbton). |
Nein |
Nein |
19 |
resetColorFilter |
resetColorFilter() |
cameraObj.resetColorFilter(); |
Entfernt den Farbfilter. |
Nein |
Nein |
20 |
reset |
reset() |
cameraObj.reset(); |
Setzt alle Kameraeigenschaften auf die Standardeinstellungen zurück. |
Ja |
Ja |
21 |
setZDepth |
setZDepth(zDepth: Number): void |
cameraObj.setZDepth(200); |
Legt den Z-Tiefenwert der Kamera fest. |
Ja |
Nein |
22 |
getZDepth |
getZDepth(): Number |
trace(cameraObj.getZDepth()); |
Gibt den aktuellen Z-Tiefenwert der Kamera zurück. |
Ja |
Nein |
23 |
pinCameraToObject |
pinCameraToObject(object:DisplayObject, offsetX:Number=0,offsetY:Number=0, offsetZ=0) |
cameraObj.pinCameraToObject (getChildByName("InstanceName"), 200,50); |
Die Kamera folgt dem Objekt, das zur Laufzeit durch Eingabeparameter angegeben wurde. Wenn offsetX, offsetY und offsetZ angegeben werden, folgt die Kamera (x+offsetX,y+offsetY, z+offsetZ). |
Ja |
Ja |
24 |
setPinOffset |
setPinOffset(offsetX:Number, offsetY:Number,offsetZ:Number) |
cameraObj.setPinOffset(-60,0); |
Ändern von offsetX und offsetY zur Anheftung von Objekten mit der Kamera. Kamera folgt Objekt entsprechend Punkt (x+offsetX, y+offsetY, zDepth+z) zur Laufzeit. |
Ja |
Ja |
25 |
unpinCamera |
unpinCamera() |
cameraObj.unpinCamera(); |
Aufheben der Anheftung von Objekten mit der Kamera. |
Ja |
Ja |
26 |
setCameraMask |
setCameraMask(maskObj:DisplayObject) |
cameraObj.setCameraMask(maskObj); |
Legt „maskObj“ als Maske über die Kamera fest. |
Nein |
Nein |
27 |
removeCameraMask |
removeCameraMask() |
cameraObj.removeCameraMask(); |
Entfernt die Maske von der Kamera. |
Nein |
Nein |
Typ |
Methode |
Prototyp |
Beispiel |
---|---|---|---|
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); |
Sie können die Objekte mit folgendem Kamera-API-Code zur Laufzeit maskieren:
import fl.VirtualCamera;
fl.VirtualCamera.getCamera(root).setCameraMask(torch);
Ein Beispiel-Screenshot der Animation bei Verwendung einer ovalen Maske sieht wie folgt aus:
Die detaillierte Vorgehensweise für das Erstellen von Animationen mit einer interaktiven Kamera wird im folgenden Diagramm dargestellt. Sie können den Aktionscode-Assistenten in HTML Canvas-Dokumenten verwenden.
Unten finden Sie ein Beispielvideo, das die Verwendung der interaktiven Kamera zeigt. Sie können beobachten, wie Sie zur Laufzeit in unterschiedlichen Intervallen den Fokus auf den Fallschirm, das Jetpack und die städtische Landschaft verschieben können.
Adobe XD ermöglicht es Ihnen, Inhalte auf eine andere Zeichenfläche zu legen oder zu überlagern, um interaktive Folieneffekte zu simulieren. Beispiel: Dropdown-Listen, Folien oder Leuchtkasteneffekte. Mit Überlagerung können Sie auch eine Zeichenfläche mehrfach verwenden, ohne den Überlagerungsinhalt für jede Zeichenfläche zu duplizieren.
Um den Inhalt zuzuschneiden, der sich außerhalb der Bühne befindet, klicken Sie auf die Schaltfläche Inhalt außerhalb der Bühne beschneiden .
Mit der Kamera und der Bühnenansicht können Sie den Inhalt innerhalb der Kamerabegrenzungen anzeigen.
Bei Ihrem Konto anmelden