Zusammenfassung

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

Hier das Ergebnis:


Bedarf

Flash CS3 oder Flash CS4.

Hinweis: Das Bild in diesem Tutorial ist in Flash CS3 gemacht. Es funktioniert genau gleich in Flash CS4.

Schritt 1 - Installieren Sie die Wirkung Komponente

Kaufen Sie den Cube Übergangseffekt hier. Bitte folgen Sie den Anweisungen zu installieren, und ziehen Sie die Komponente aus dem Bedienfeld Komponenten in die Bibliothek des. Fla-Datei.

Drag-Komponente in die Bibliothek

Schritt 2 - Erstellen Sie eine neue Ebene

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

Erstellen Schicht auf Hauptzeitleiste

Schritt 3 - Erstellen Hintergrund

Jetzt erstellen Sie einen Hintergrund mit Farbverlauf. Dies ist zwar nicht notwendig, der Effekt funktioniert, es zeigt, dass der Effekt funktioniert auch mit transparentem Inhalt (dazu später mehr) zu machen.

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

Erstellen Sie Hintergrund-Shape

Farbverlauf-Einstellungen

Schritt 4 - Erstellen Knopf

Die Würfel-Effekt sollte reagieren dynamisch auf die der Benutzer die Maus Zustand (Rollover / Rollout). Am besten ist es praktisch nicht auf die Ereignis-Listener, um den Effekt hinzufügen und sich stattdessen eine "leere"-Taste.

Klicken Sie auf das erste Bild in der Schicht "btn" und zeichne ein Rechteck mit der Größe der Leinwand (Farbe nicht mater, da die Schaltfläche nicht sichtbar sein wird). Wählen Sie das Rechteck und wandelt es in ein Button mit [F8] oder der rechten Maustaste auf den MovieClip -> "Convert Symbol, um ...".

Convert Form zu Taste

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

Set Name der Schaltfläche

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

Ändern Keyframe-Schaltfläche in

Zurück zu der Hauptzeitleiste und legen Sie den Namen der Instanz der Schaltfläche auf "btn".

Set Instanznamen Taste

Schritt 5 - Erstellen beginnen Movieclip

Die Wirkung muss die zwei Movieclip, wo die visuellen Informationen werden vom Internet. Sie werden jetzt zu erstellen die MovieClip den Übergang beginnt mit.

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

Bild Import

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

Wandelt Bilder ins Movieclip

Set Name des Movieclip

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

Set Instanznamen

Schritt 6 - Erstellen Ende Movieclip

Das Ende Movieclip wird Text enthalten statt eines Bildes. Die Erreichung dieses Sie einen etwas anderen Ansatz benötigen.

Wählen Sie das erste Bild der Ebene "img2" (ok, schlecht benennen, dann zögern Sie richtig, dass :) ) Und zeichnen Sie ein Rechteck mit der Größe der Leinwand. Sie wollen sicherstellen, dass das Ende Movieclip die gleichen Abmessungen wie der Start Movieclip hat. Thats, warum zeichnet man eine unsichtbare Form mit der gleichen Größe wie der Start MovieClip.

Unentschieden Form

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

Setzt die Alpha-Form -

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

Convert to Movieclip

Doppelklicken Sie auf das gerade erstellte MovieClip, erstellen Sie eine neue, leere Ebene und legte einen Text auf dieser neu geschaffenen Ebene.

Hinzufügen von Text zu Movieclip

Kopf zurück in die Hauptzeitleiste und legen Sie den Namen der Instanz der MovieClip auf "img2".

Set Instanznamen

Schritt 7 - Add-Rollover ActionScript

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

Open ActionScript-Fenster

Wenn Sie einfach einen Übergang auf Rollover haben möchten (und nicht zurück-Übergang auf Rollout) kopieren Sie die folgenden Zeilen in das Code-Fenster. 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

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

In Zeile 9 endlich initialisieren Sie den Effekt (Dokumentation des Parameters). Der wichtigste Teil sind die ersten beiden Parameter. Sie legen fest, dass der Übergang mit "img1 beginnt und endet mit" img2 ".

Exportieren Sie Ihre FLA-Datei. Wie Sie sehen, funktioniert die Wirkung Komponenten perfekt mit den transparenten Hintergrund "img2".

Schritt 8 - Komplexere ActionScript

OK, mit dem vorherigen Code den Rollover-works just fine. Aber was, wenn Sie wollen auch ein Roll-out-Funktion, die den Übergang von der "img2" auf "img1 Rückschläge" haben? Um dies zu erreichen, dass Sie einen komplexen Code erforderlich sein. Löschen Sie das Skript und fügen Sie die folgende: 

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

 var running = false;
 var goin = false;
 var goout = false;

 Funktion _onOver (e: MouseEvent) (
  if (! Laufen) (
  _createAnimation ( "in");
  running = true;
  ) else (
  goin = false;
  goout = true;
  )
 )

 Funktion _onOut (e: MouseEvent) (
  if (! Laufen) (
  _createAnimation ( "out");
  running = true;
  ) else (
  goin = true;
  goout = false;
  )
 )

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

  if (goin) (
  _createAnimation ( "out");
  ) else (
  running = false;
  goout = false;
  )
 )

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

  if (goout) (
  _createAnimation ( "in");
  ) else (
  running = false;
  goin = false;
  )
 )

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

  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 nicht die Richtung des Übergangs umkehren kann, während der Effekt aktiv ist. Stattdessen können Sie "merken" sich die Aktion des Benutzers, warten bis die Wirkung getan und gilt dann der Übergang Revers.

Die Variablen "Goin" und "goout" (Linie 5 und 6) sind für diesen Zweck verwendet. Sie setzen, wenn sie die Funktionen "_onOver" und "_onOut" (Linie 8 und 18) ausgeführt werden. Aber nur, wenn die var ausgeführt wird wahr, 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 auf Movieclip sichtbar gesetzt werden (von den Effekt). Thats, warum Sie der MovieClip-Sicht - den Übergang begann mit - auf "false" (Linie 30 und 42).

Endgültiges Ergebnis

Herunterladen

Klicken Sie hier zum Download der fla dieses Tutorials. Hinweis: Die. Fla nicht berücksichtigt auch die Wirkung Komponente. Um die fla funktioniert, müssen Sie den Cube Übergangseffekt hier erwerben.

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

  • Share / Bookmark