Beenden Sie den Blinkie mit Flash Motion Tweens
Als wir das letzte Mal an der Flash-Blinkie-Animation gearbeitet haben, hatten wir gerade die Texteffekte fertiggestellt. Der letzte Texteffekt in der Animation war das Erscheinen und Verschwinden des Website-Namens „J3 Designs“. Es verschwindet links von der Bühne mit einem Timeline-Übergangseffekt (Übergang 3 auf der Timeline). Es gab einen Grund dafür und Sie werden gleich herausfinden, was dieser Grund war.

Denken Sie daran, dass wir als Teil der Designdetails diese beiden Marienkäfer haben. Nun, es ist Zeit, sie an die Arbeit zu bringen. Als wir die Ebenen für unser Blinkie-Projekt erstellt haben, haben wir den goldenen Marienkäfer zur Ebene von Bug 1 hinzugefügt. Als erstes fügen wir den zweiten Marienkäfer zu einer neuen Ebene hinzu, die wir Bug 2 nennen. Wir möchten, dass dieser rote Marienkäfer unter dem Cameo erscheint. Daher müssen wir die neue Ebene unter der Ebene "Statische Details" platzieren.

Öffnen Sie blinkie2.fla in Flash CS3 und machen Sie sich an die Arbeit. Wir möchten, dass sich der Marienkäfer unter dem Cameo bewegt, wenn der Name der Website verschwindet. Wir möchten, dass es so aussieht, als würde der Text wegen des Marienkäfers verschwinden. Also werden wir diesen neuen Marienkäfer zu Frame 110 hinzufügen, wenn der Text zu verschwinden beginnt.

  1. Klicken Sie auf Datei - Importieren - In Bibliothek importieren, um das Dialogfeld Importieren zu öffnen und den roten Marienkäfer zu unserer Bibliothek hinzuzufügen.

  2. Fügen Sie eine neue Ebene unter der Ebene "Statische Details" hinzu und nennen Sie sie "Bug 2". Fügen Sie Frame 110 einen Keyframe (Einfügen - Zeitleiste - Keyframe) hinzu. Ziehen Sie den roten Marienkäfer aus der Bibliothek unter das Cameo und sind Sie vorerst nicht sichtbar.

    Wir möchten, dass sich dieser Marienkäfer nach links bewegt, bis er von der Bühne verschwindet, wenn der Text verschwindet. Wir wollen also, dass der Marienkäfer ganz links und von der Bühne entfernt ist, wenn wir Frame 160 erreichen.

  3. Klicken Sie auf der Ebene Bug 2 auf Frame 160, fügen Sie einen Keyframe hinzu und ziehen Sie den roten Marienkäfer nach links und ganz von der Bühne. Klicken Sie mit der rechten Maustaste zwischen Frame 110 und 160 und wählen Sie im Popup-Menü die Option Motion Tween erstellen.

    Testen Sie den Film und Sie sollten sehen, dass der Text verschwindet, wenn sich der Marienkäfer darüber bewegt. Sobald der rote Marienkäfer von der Bühne verschwunden ist, bewegen wir den goldenen Marienkäfer (Bug 1-Schicht) nach oben und rechts, bis er ebenfalls von der Bühne verschwindet.

  4. Klicken Sie auf der Ebene "Bug 1" auf "Frame 160" und fügen Sie einen Keyframe als Ausgangspunkt für die Animation des goldenen Marienkäfers hinzu. Verwenden wir 20 Bilder, um den goldenen Marienkäfer von der Bühne zu bewegen. Klicken Sie auf Frame 180 und fügen Sie einen Keyframe hinzu. Bewegen Sie den goldenen Marienkäfer von der Bühne.

  5. Klicken Sie mit der rechten Maustaste zwischen Frame 160 und 180 und erstellen Sie ein Motion Tween. Klicken Sie auf Frame 180 und fügen Sie den Ebenen Statische Details und Hintergrund einen Rahmen hinzu, um den Inhalt dieser Ebenen wieder sichtbar zu machen.

    Schließlich möchten wir den goldenen Marienkäfer wieder in seine ursprüngliche Position unten links auf der Bühne bringen. Wir möchten jedoch nicht, dass sich der Fehler von der Spitze der Bühne nach unten bewegt. Wir wollen, dass es unter der Bühne hervorkommt. Also müssen wir zuerst den goldenen Marienkäfer links und unter die Bühne stellen. Dann müssen wir es nur noch nach oben in seine ursprüngliche Position bewegen, damit sich die Animation wiederholen kann. Wir werden 10 Frames verwenden, um den Marienkäfer wieder an seinen Platz zu bringen.

  6. Gehen Sie den ganzen Weg zurück zu Frame 1 auf der Ebene Bug 1 und wählen Sie den goldenen Marienkäfer aus. Klicken Sie auf Bearbeiten - Kopieren, um die ursprüngliche Position des goldenen Marienkäfers zu speichern.

  7. Fügen Sie auf der Ebene von Bug 1 noch einen Keyframe zu Frame 190 hinzu. Klicken Sie auf Bearbeiten - Löschen, um den bereits vorhandenen goldenen Marienkäfer zu entfernen. Klicken Sie dann auf Bearbeiten - An Ort und Stelle einfügen, um den goldenen Marienkäfer wieder in die ursprüngliche Position zu bringen.

  8. Klicken Sie weiterhin auf der Ebene von Bug 1 auf Frame 181 und fügen Sie einen Keyframe hinzu. Entfernen Sie dann den bereits vorhandenen goldenen Marienkäfer. Bringen Sie den goldenen Marienkäfer wieder in die ursprüngliche Position auf diesem Rahmen (Paste in Place). Ziehen Sie dann diesen Marienkäfer unter die Bühne. Fügen Sie zwischen Frame 181 und 190 ein Motion Tween hinzu, das diesen Marienkäfer auf die Bühne bringt.

  9. Klicken Sie auf Frame 190 und fügen Sie den Ebenen "Statische Details" und "Hintergrund" einen Frame hinzu, um den Inhalt dieser Ebenen wieder sichtbar zu machen.

Testen und speichern Sie den Blinkie als blinkie3.fla. Dann veröffentlichen Sie Ihren Blinkie als SWF-Datei und genießen Sie Ihren neuen Blinkie.

J3 Designs

Copyright 2018 Adobe Systems Incorporated. Alle Rechte vorbehalten. Screenshots von Adobe-Produkten mit Genehmigung von Adobe Systems Incorporated. Adobe, Photoshop, Photoshop-Album, Photoshop-Elemente, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere-Elemente, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst und Flash Paper ist / sind entweder [eine] eingetragene Marke (n) oder eine Marke (n) von Adobe Systems Incorporated in den USA und / oder anderen Ländern.


Video-Anleitungen: Hoverboard Red Light-How To Calibrate your Hoverboard (March 2024).