Share
In diesem kurzen Tipp werde ich zeigen, wie Sie eine sehr einfache Curl-Animation für eine Eckwerbung auf Ihrer Website erstellen.
Öffnen Sie eine neue ActionScript 3.0 Flash-Datei und ändern Sie ihre Abmessungen im Eigenschaftenfenster in 250 x 250 Pixel. Stellen Sie die Bildrate auf 30fps ein.
Erstellen Sie ein Rechteck (240 x 240 Pixel) und platzieren Sie es an den Koordinaten (10, 0). Wählen Sie die rechte obere Ecke und ziehen Sie sie nach unten, bis Sie ein Dreieck sehen.
Gehen Sie zur Farbpalette und setzen Sie die äußeren Farbverlaufsanschläge auf dunkelgrau (# A6A6A6). Der mittlere Gradientenanschlag ist leichter (#EEEEEE). Wählen Sie das Farbeimerwerkzeug und ziehen Sie mit gedrückter Umschalttaste über das Dreieck.
Wählen Sie das Dreieck aus und drücken Sie F8. Nennen Sie diesen neuen Movieclip "curl" und ändern Sie den Registrierungspunkt in die obere rechte Ecke.
Bearbeiten Sie die locken Objekt. Kopieren Sie das Dreieck in die neue Ebene (benennen Sie es in "bcg" um Hintergrund) und um 180 Grad drehen. Setzen Sie die Füllfarbe auf dunkelgrau (# 333333). Erstellen Sie eine doppelte Ebene der Ebene "bcg" und benennen Sie sie in "Maske" um..
Gehen Sie zum zehnten Frame und erstellen Sie Keyframes in allen Ebenen. Klicken Sie mit der rechten Maustaste auf die ersten Keyframes, und wählen Sie Bewegungs-Tween erstellen. Gehen Sie zum ersten Bild und markieren Sie alle Objekte (Strg + A). Wähle das Free Transform Tool (Q) und verkleinere es mit der Umschalttaste. Es wird der Anfangszustand sein. Setzen Sie den Beschleunigungswert in allen ersten Keyframes auf 100.
Erstellen Sie eine neue Ebene und ziehen Sie sie zwischen bcg und Maske Schichten. Nennen Sie es "Button". Erstellen Sie ein Logo oder eine Grafik, die Sie möchten, und konvertieren Sie sie in eine Schaltfläche (F8). Vergeben Sie einen Instanznamen "Button". Verlasse das Curl-Objekt.
Doppelklicken Sie auf die Schaltfläche Layer-Eigenschaften von Maske Ebene und setzen Sie den Typ auf "Mask". Legen Sie den Typ der Schaltflächenebene auf "Maskiert" fest..
Erstellen Sie eine neue Ebene mit dem Namen Aktionen. Gehen Sie zum zehnten Frame und erstellen Sie ein Keyframe. Gehen Sie zum Aktionsfeld (F9) und geben Sie ein halt();. Machen Sie dasselbe im ersten Keyframe.
Geben Sie dem curl-Objekt auf der Bühne einen Instanznamen von locken. In dem Aktionen Ebene in Bild 1 öffnen Sie das Aktionsfeld (F9). Nun soll das Curl-Objekt hören, wenn sich der Mauszeiger darüber bewegt. Geben Sie den folgenden Code ein.
curl.addEventListener (MouseEvent.MOUSE_OVER, forward); curl.addEventListener (MouseEvent.MOUSE_OUT, rückwärts); Funktion vorwärts (e: MouseEvent): void stage.removeEventListener (Event.ENTER_FRAME, backAnim); stage.addEventListener (Event.ENTER_FRAME, fwdAnim); Funktion zurück (e: MouseEvent): void stage.removeEventListener (Event.ENTER_FRAME, fwdAnim); stage.addEventListener (Event.ENTER_FRAME, backAnim);
Das fwdAnim () und backAnim () Funktionen bedeutet, dass Sie bei jedem neuen Bild zum nächsten / vorherigen Bild wechseln. In unserem Fall sind es 30x pro Sekunde. Fügen Sie den folgenden Code hinzu.
function fwdAnim (e: Event): void curl.nextFrame (); function backAnim (e: Event): void curl.prevFrame ();
Fügen Sie den Button-Listener hinzu und erstellen Sie eine einfache Klick-Funktion.
Accentsconagua
curl.button.addEventListener (MouseEvent.CLICK, clickMe); function clickMe (e: MouseEvent): void var myURL: URLRequest = neue URLRequest ("http://www.yourwebsite.com/"); navigateToURL (myURL); Jetzt können wir die SWF-Datei in eine Webseite einbetten.
Betten Sie in der HTML-Seite, auf der Ihre Anzeige erscheinen soll, die SWF-Datei mit dem Bezeichner pageCurl in ein Div ein.
Hängen Sie dem pageCurl-Objekt in Ihrer CSS-Datei die folgenden Eigenschaften an. Sie definieren die Abmessungen Ihres Objekthalters und bestimmen seine Position oben rechts auf der Seite.
#pageCurl margin: 0; Position: feststehend; oben: 0; rechts: 0; links: auto; Breite: 250px; Höhe: 250px;
Das ist es! Überprüfen Sie das Ergebnis, indem Sie über die rechte obere Ecke der Seite blättern, um Ihre Werbung anzuzeigen. Ich hoffe, Sie finden Verwendung für diesen Quick Tip!
