Buttons mit Hover Effekt erstellen?

[chris2oo6]

Hallo! Ich möchte eine Navigation für meine Homepage erstellen,
Beispiel: Ich habe 2 Grafiken die ich als Navigation-Buttons einsetzen möchte:

normal:

hover:

Bewege ich den Mauszeiger nun auf die erste Grafik, soll es langsam zur 2ten Grafik faden und wieder zurück, wenn ich den Mauszeiger wegbewege!


Wie realisiere ich das? ich habe schon in einem anderen Forum das Ergebnis und eine Erklärung bekommen, aber ich verstehe die Erklärung nicht!

 

[Tobias Menzel]

Hi,

nun, in dem MovieClip "btn" sitzt auf der untersten Ebene das Bild im Normalzustand. Auf der oberen Ebene sitzt nun das Bild im "Darüber"-Zustand - allerdings in einen MovieClip mit dem Instanznamen "hover" verpackt, damit wir es per Script ansprechen können.

Auf der Hauptzeitleiste wird das obere Bild im Button nun zunächst ausgeblendet:

btn.hover._alpha = 0;

Nun wird ein Mausereignis (onRollOver) erstellt, welches ausgelöst wird, sobald sich der Mauszeiger über den Button bewegt:

btn.onRollOver = function() {

In diesem Mausereignis wird eine onEnterFrame-Methode auf dem hover-Clip gestartet:

	this.hover.onEnterFrame = function() {

Dies ist eine Methode, die einfach jeden Frameaufruf (also bei Dir 12 mal pro Sekunde) ausgeführt wird, solange wie wir sie brauchen.

In dieser Methode wird nun die Transparenz des Hover-Clips laufend (sprich: 12 mal pro Sekunde) erhöht:

		this._alpha += 10;

Den Hover-Clip können wir an dieser Stelle mit "this" ansprechen, da die onEnterFrame-Methode auf diesem Clip ausgeführt wird.

wenn die Alphatransparent den Wert 100 erreicht hat:

		if (this._alpha>=100) {

... können wir die onEnterFrame-Methode beenden, da die Arbeit (das Ding schrittweise einzublenden) getan ist:

			delete this.onEnterFrame;

Für die Mausereignisse "onRollOut" (beim Verlassen des Mauszeigers) und "onDragOut" (Verlassen bei gedrückter Maustaste) wird nun das gleiche gemacht, nur dass diesmal der Alphawert veringert wird, bis er wieder auf 0% steht.

Gruß
.

 

[chris2oo6]

danke für deine Erklärung. ich habe versucht dies nachzumachen aber bekomme es nicht hin..

was mache ich falsch?

 

[Tobias Menzel]

Hi,

schau Dir doch noch einmal die Vorlage an: Der MC mit dem Instanznamen "btn" enthält zwei Ebenen - in der unteren sitzt das erste Bild, in der oberen sitzt ein weiterer MC mit dem Instanznamen "hover", der das zweite Bild enthält.

Bei Deiner Datei sitzt nur ein MC mit dem Instanznamen "hover" auf der Bühne, der lediglich ein Bild enthält.

Gruß
.

 

[chris2oo6]

nochmal danke für deine geduld und deine erklärungen. -leider bin ich so unerfahren mit Flash das ich es noch nicht verstehe.


ich versuche einfach mal zu erklären wie ich das mache, vllt kannst du mir dann genauer sagen wo mein fehler liegt:

1. ich erstelle ein neues dokument
2. ich füge die „normale“ grafik mit STRG+R ein und mache diese zu einem MC mit dem Instanzname „btn“
3. ich füge die „hover“ grafik mit STRG+R ein, lege sie direkt über die "normale" grafik und mache diese zu einem MC mit dem Instanzname „hover“

dann füge ich das AS ein – fertig

 

[Tobias Menzel]

Hi,

nein, nach dem ersten Schritt musst Du den neu erstelltem MC zum Bearbeiten öffnen (z.B. durch Doppelklick) und dort dann zwei Ebenen anlegen, auf die Du die Bilder legst.

Allerdings: Solche grundlegenden Fragen zur Bedienung der Software und zum Arbeiten mit Symbolen entnimmst Du besser dem Handbuch - dort wird Dir die Funktionsweise von Flash weitaus ausführlicher und besser erklärt, als wir das könnten (zudem ist der Zweck dieses Forums nicht unbedingt der, das Handbuch zu ersetzen ).

Gruß
.

 

[chris2oo6]

DANKE habs es geschafft

 

[chris2oo6]

noch eine kurze frage: wie setze ich nun links auf einen button?

mit

on(press) {
getURL("/deinverzeichniss/datei.php");
}

oder? und wo genau schreibe ich das rein? habe es versucht aber naja.. geht nicht

 

[Tobias Menzel]

habe es versucht aber naja.. geht nicht

hmm - dies ist keine sehr detaillierte Fehlerbeschreibung. Geh so vor:

• schau, ob Flash Dir beim Kompilieren irgendwelche Fehlermeldungen ausgibt. Wenn nicht, hast Du schonmal keinen Syntaxfehler im Code
  
  
• Lies im Handbuch die entsprechenden Klassen und Methoden (in diesem Fall: on-Statement und getURL-Methode) durch, und vergleiche Deinen Code mit dem Beispielen im Handbuch.
  
  
• lass Dir notfalls an wichtigen Stellen etwas per trace() ausgeben, damit Du merkst, ob ein bestimmter Codeblock überhaupt durchlaufen wird.

Wir helfen gerne bei Konkreten Problemen, aber wir können weder eine Schritt-für-Schritt Anleitung für absolute Basics sein, noch ein persöndlicher Debugger.

Gruß
.