Cool Flash Effect Tutorials!

Zusammenfassung

In diesem Tutorial werden Sie lernen, wie man einen Würfel Übergang Auswirkungen auf Maus-Rollover zu erstellen.

Hier das Endergebnis:

Bedarf

Flash CS3 oder Flash CS4.

Hinweis: Der Screenshot in diesem Tutorial ist in Flash CS3 gemacht. Es funktioniert genau gleich in Flash CS4.

Schritt 1 - Installieren Sie den Effekt-Komponente

Kaufen Sie den Cube Transition Effect hier . Bitte folgen Sie den Installationsanweisungen und ziehen Sie die Komponente aus dem Bedienfeld Komponenten in die Bibliothek Ihres. FLA-Datei.

Schritt 2 - Erstellen Sie eine neue Ebene

Um die Dinge ordentlich, sollten Sie eine neue Ebene auf der Hauptzeitleiste zu schaffen und ihr einen Namen geben. Tun Sie dies wie auf dem Screenshot unten gezeigt.

Schritt 3 - Erstellen Sie Hintergrund

Jetzt erstellen Sie einen Hintergrund mit Farbverlauf. Obwohl dies nicht nötig ist, um den Effekt der Arbeit machen, es zeigt, dass der Effekt funktioniert auch mit transparenten Inhalten (dazu später mehr).

Wählen Sie das erste Bild in der "BG"-Schicht und zeichnen Sie eine Form mit dem Rechteck-Werkzeug auf der Leinwand. Wählen Sie das Rechteck und passen Sie die Farbeinstellungen, um einen schönen Farbverlauf (können Sie auch jede andere Farbe haben).

Schritt 4 - Schaltfläche "Erstellen"

Die Würfel-Effekt sollte dynamisch reagieren die Nutzer Maus Zustand (Rollover / Rollout). Am besten ist es Praxis, sich nicht fügen Sie den Ereignis-Listener, um den Effekt und stattdessen ein "leeres"-Taste.

Klicken Sie auf das erste Bild in der Schicht "BTN" und zeichne ein Rechteck mit der Größe der Leinwand (die Farbe spielt keine mater seit den Button nicht sichtbar sein wird). Wählen Sie das Rechteck und wandeln es in ein Button mit [F8] oder der rechten Maustaste auf den MovieClip -> "In Symbol konvertieren ...".

Legen Sie den Namen der Schaltfläche auf "BTN" und stellen Sie sicher, dass der Typ ist "Button".

Doppelklicken Sie auf den Button. Ziehen Sie nun den ersten Keyframe "Up" bis zum letzten Frame "Hit". Dies stellt sicher, dass der Button wird interaktiv arbeitet, aber nicht sichtbar.

Holen Sie sich zurück in die Hauptzeitleiste und setzen Sie den Namen der Instanz der Schaltfläche "BTN".

Schritt 5 - Erstellen Sie beginnen Movieclip

Der Effekt muss die zwei Movieclip, wo die visuellen Informationen entnommen werden. Jetzt erzeugen wir den MovieClip wird die Übergangsphase mit zu beginnen.

Klicken Sie auf das erste Bild auf der Ebene "img1". Importieren Sie ein Bild mit der Größe der Leinwand durch Drücken von [Strg-R] oder "Datei" -> "Import" -> "Import ... on Stage".

Nun wandeln das Bild auf ein MovieClip mit dem Namen "img1".

Legen Sie den Namen der Instanz des soeben erstellten Movieclip auf "img1".

Schritt 6 - Erstellen End Movieclip

Das Ende Movieclip enthält Text statt eines Bildes. Die Erreichung dieses werden Sie einen etwas anderen Ansatz brauchen.

Wählen Sie den ersten Frame der Ebene "img2" (ok, schlechte Namensgebung, dann zögern Sie richtig, dass ) Und zeichnen Sie ein Rechteck mit der Größe der Leinwand. Sie wollen sicherstellen, dass die End Movieclip die gleichen Abmessungen wie der Start Movieclip hat. Thats, warum ziehen Sie zunächst eine unsichtbare Gestalt mit der gleichen Größe wie das Start MovieClip.

Wählen Sie die Form und setzen Sie den Alpha-Wert auf 0 (die Form ist noch da, aber unsichtbar).

Wandeln Sie die Form, um ein MovieClip [F8] oder der rechten Maustaste auf den MovieClip -> "In Symbol konvertieren ..." und nennen Sie es "img2".

Doppelklicken Sie auf die soeben erstellte MovieClip erstellen Sie eine neue leere Ebene und setzte einen Text auf, dass neu erzeugte Ebene.

Geht zurück in die Hauptzeitleiste und setzen Sie den Namen der Instanz des Movieclip auf "img2".

Schritt 7 - Add-Rollover ActionScript

Wählen Sie die Ebene "Script" und öffnen Sie die "Aktionen"-Fenster mit "Windows" -> "Aktionen" oder drücken Sie [F9].

Wenn Sie wollen einfach nur ein Übergang auf Rollover haben (und keine Back-Übergang am Rollout) Kopieren Sie die folgenden Zeilen in dem Codefenster.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 Funktion _onOver (e: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  myFilter.init (img1, img2, 75, "L-> R", 2 ", easeInOutCubic", false);
 )

In der ersten Zeile fügen Sie die Rollover-Ereignis-Listener auf den Knopf. In der Funktion "_onOver" (Linie 3) erstellen Sie zuerst eine Instanz der CubeTransitionEffectAS3 bevor Sie die Maus Interaktivität des Bauteils (Linie 4 und 5 zu deaktivieren). Denken Sie daran, die Taste, die Sie zuvor erstellt kümmert sich um die Maus-Effekte und Sie wollen nicht die Wirkung auf einmischen.

In Zeile 9 schließlich initialisieren Sie die Wirkung ( Dokumentation der Parameter hier ). Der wichtige Teil sind die ersten beiden Parameter. Sie definieren, dass der Übergang mit "img1" und endet mit "beginnt img2".

Exportieren Sie Ihre FLA-Datei. Wie Sie sehen, funktioniert der Effekt Komponente perfekt mit dem transparenten Hintergrund "img2".

Schritt 8 - Mehr komplexen ActionScript

OK, mit dem vorherigen Code den Rollover funktioniert gut. Aber was, wenn Sie wollen auch ein Rollout-Funktion, die den Übergang von Rückschlägen "img2" auf "img1" haben? Um dies zu erreichen, dass Sie einen komplexen Code benötigen. Löschen Sie das Skript und setzen Sie die folgenden Schritte aus:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);
 btn.addEventListener (MouseEvent.ROLL_OUT, _onOut);

 var laufen = false;
 var goin = false;
 var goout = false;

 Funktion _onOver (e: MouseEvent) (
  if (! Laufen) (
  _createAnimation ("in");
  läuft = true;
  ) Else (
  goin = false;
  goout = true;
  )
 )

 Funktion _onOut (e: MouseEvent) (
  if (! Laufen) (
  _createAnimation ("out");
  läuft = true;
  ) Else (
  goin = true;
  goout = false;
  )
 )

 Funktion _inAnimationDone (e: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  if (goin) (
  _createAnimation ("out");
  ) Else (
  Laufen = false;
  goout = false;
  )
 )

 Funktion _outAnimationDone (e: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  if (goout) (
  _createAnimation ("in");
  ) Else (
  Laufen = false;
  goin = false;
  )
 )

 Funktion _createAnimation (Regie: String) (
  var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  if (dir == "in") (
  myFilter.init (img1, img2, 24, "L-> R", 2 ", easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) Else if (dir == "out") (
  myFilter.init (img2, img1, 24, "R-> L", 2 ", easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Es ist wichtig zu wissen, dass Sie keine Umkehrung der Richtung des Übergangs während der Effekt aktiv ist. Stattdessen können Sie "merken" sich die Aktion des Benutzers, zu warten, bis die Wirkung getan und die Anwendung der Übergang Revers.

Die Variablen "Goin" und "goout" (Linie 5 und 6) sind für diesen Zweck verwendet. Sie setzen sie, wenn die Funktionen "_onOver" und "_onOut" (Linie 8 und 18) ausgeführt werden. Aber nur, wenn die var laufen wahr ist, wenn es falsch ist (Linie 9 und 19), starten Sie den Übergang sofort (Linie 10 und 20).

Die Funktion "_createAnimation" (Linie 52) ist Ihre Hilfsfunktion zu Beginn der Animation in Abhängigkeit von der Richtung "dir" Sie als Parameter übergeben.

Beachten Sie, dass nach dem Aufruf der "removeFilter"-Methode (Zeile 29 und 41) sowohl den Start und das Ende Movieclip Movieclip gesetzt werden sollen sichtbar (von der Wirkung). Thats, warum Sie den MovieClip Sichtbarkeit eingestellt - den Übergang begann mit - auf "false" (Zeile 30 und 42).

Download

Klicken Sie hier zum Download der fla dieses Tutorials. Hinweis: Die. Fla nicht berücksichtigt auch die Wirkung Komponente. Um die Arbeit machen, die FLA, müssen Sie beim Kauf Cube Transition Effect hier .

Hier finden Sie ein Video-Tutorial, wie wirksam umzusetzen eine andere .