Kwik 2-Pfad-Animation für einen Movieclip oder ein Sprite

• April 26, 2024

Jetzt können wir die Pfadanimation erstellen. Der Unterschied zwischen einer linearen und einer Pfadanimation ist die Linie. In beiden Animationen bewegt sich das Objekt entlang einer festgelegten Linie. Wie wir bei der Seitenwechselanimation festgestellt haben, bewegt eine lineare Animation das Objekt entlang einer geraden Linie. In dieser Pfadanimation zeichnen wir einen Pfad entlang einer gekrümmten Linie, dem das Objekt folgen soll. Unser erster Schritt besteht darin, den Pfad mit dem Photoshop Pen-Werkzeug zu zeichnen.

1. Klicken Sie bei ausgewählter Ebene mit dem Objekt (dem Fly-Movieclip) mit dem Stift-Werkzeug auf die Fliege. Wir werden den zweiten Punkt für den Pfad ungefähr 3 Fluglängen über dem oberen Rand der Seite platzieren. Klicken Sie auf diesen zweiten Punkt und ziehen Sie die Maus nach oben und rechts, um eine gekrümmte Linie zu erstellen.
   
   
2. Benennen Sie den Arbeitspfad im Bedienfeld „Pfade“ (gruppiert mit dem Bedienfeld „Ebenen“) in „flypath1“ um.
   
   Jetzt können wir Kwik anweisen, diesen Pfad für unsere Pfadanimation zu verwenden.
   
   
3. Klicken Sie bei noch ausgewählter Ebene fly_pg8 auf Animationssymbol in der Kategorieliste.
   
   
4. Klicke auf das Pfadanimationssymbol zum Öffnen des Dialogfelds.
   
   
5. Nennen Sie diese Animation "fly1Ani".
   
   
6. Diese Animation ist für die Ebene fly_pg8.
   
   
7. Pfad: Wählen Sie den Pfad flypath1 aus der Dropdown-Liste.
   
   Während sich die Fliege entlang der Kurve bewegt, soll er sich leicht drehen, sodass sein Kopf weiterhin in Richtung des Pfades zeigt.
   
   
8. Aktivieren Sie das Kontrollkästchen für die automatische Drehung und stellen Sie den Betrag für den Drehwinkel auf nur -10 Grad ein.
   
   
9. Fliegen bewegen sich schnell. Stellen wir die Dauer auf 1 oder 0,5 Sekunden ein.
   
   
10. Wir möchten, dass die Fliege nach der Animation nicht auf der Seite bleibt. Aktivieren Sie das Kontrollkästchen Pause nach Abschluss und setzen Sie die Schleife auf 1 Mal. Lassen Sie das Reverse am Ende deaktiviert.
    
    
11. Fügen wir ein wenig Realismus hinzu, indem wir die Fliege zögern lassen, wenn sie angeklickt wird, und dann losfliegen. Wir können dies tun, indem wir die Easing auf inOutExpo setzen.
    
    
12. Stellen Sie den Ankerpunkt auf TopCenter ein, sodass sich sein Körper mehr dreht als sein Kopf.
    
    
13. Wir wollen nicht, dass sich die Fliege bewegt, bis auf die Schaltfläche geklickt wird. Stellen Sie die Warteanforderung ein.
    
    
14. Lassen Sie das Kontrollkästchen Zurück zur Startposition deaktiviert.
    
    
15. Klicken Sie auf Erstellen.
    
    

Jetzt können wir den Button hinzufügen. Immer noch auf der Ebene fly_pg8.

1. Drücke den Interaktionssymbol in der Kategorieliste.
   
   
2. Drücke den Symbol hinzufügen, um das Dialogfeld zu öffnen.
   
   
3. Nennen Sie die Schaltfläche "fly1btn".
   
   
4. Wir wollen die Ebene fly_pg8 sowohl für den Standard- als auch für den Over-Schaltflächenstatus.
   
   
5. Erweitern Sie im Abschnitt Interaktionen den Abschnitt Animation.
   
   
6. Wählen Sie Animation abspielen. Wählen Sie fly1Ani aus der Dropdown-Liste.
   
   
7. Erweitern Sie den Abschnitt Audio.
   
   Wählen Sie Audio stoppen und wählen Sie das erste Audio aus der Dropdown-Liste aus.
   
   Wählen Sie weiterhin im Bereich Audio die Option Audio abspielen und wählen Sie die zweite Audiodatei aus der Dropdown-Liste aus.
   
   
8. Klicken Sie auf Erstellen.
   
   

Jetzt können wir unsere interaktive Sequenz testen. Wenn die Seite geladen wird, sollte die Fliege mit den Flügeln auf der Seite schlagen, wobei der Hintergrundflugton kontinuierlich abgespielt wird. Wenn wir auf die Seite klicken, sollten wir ein lauteres Fluggeräusch hören und er bewegt sich von der Seite weg.

Speichern Sie die Änderungen auf Seite 8.

Klicke auf das Exportieren Sie das Symbol Nur aktuelle Seite und die Schaltfläche Veröffentlichen, um Ihre Animation zu testen.

Wechseln Sie zu Ihrem LearnKwik-Ordner und erstellen Sie eine Sicherungskopie des Vorlagenprojektordners. Benennen Sie den Sicherungsordner um, indem Sie das aktuelle Datum am Ende hinzufügen. (TemplateMM-TT-JJ).

← Zurück

Diese Tutorials gelten für die ältere Version von Kwik 2 und sind möglicherweise nicht sehr hilfreich, wenn Sie Kwik 3 und höher verwenden. Wenn Sie Probleme haben, nutzen Sie bitte das Kwik-Forum.

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.
Das Kwik-Produkt, das Kwik-Logo und Kwiksher sind Eigentum von Kwiksher.com - Copyright 2011. Mit Genehmigung verwendete Screenshots.

Video-Anleitungen: Stickman tutorial 2 (applaying the basics) (April 2024).