Anzeige
Tutorialbeschreibung

Fade Effekt durch Mausbewegung

Fade Effekt durch Mausbewegung

Und noch ein Tutorial mit meinen Bildern ;-)
Also das ist ein ganz einfacher Effekt der mit ein bisschen Actionscript

Wir nehmen dazu meine 2 Bilder die ich auch schon in einem anderem Tutorial benutzt habe.
Eigentlich ist der Effekt der Gleiche, nur das man ihn anders ausführt.

Das sind meine 2 Bilder:

1.
Bilder


2.
Bilder



Dokumenteigenschaften: Größe: entspricht die Größe der Bilder. (Bild)
Bilder


1. Zuerst müssen sie die Bilder in Flash einfügen und das geht über  Datei --> importieren --> in Bühne importieren.

2. Jetzt sind die Beiden Bilder auf der Bühne.
Machen sie daraus jeweils ein mc, indem sie auf einmal auf das jeweilige Bild klicken und F8 drücken. (Bild)
Bilder



3. Jetzt entfernen wir das zweite Bild von der Bühne, indem wir auf das Bild oder den mc klicken und Entfernen drücken.
Achten sie aber darauf das beide mc´s und Bilder noch in der Bibliothek enthalten sind. (Bild)

Bilder



4. Zentrieren sie den noch bestehenden mc horizontal und vertikal, indem sie einmal auf sie klicken und auf Folgendes drücken. (Bild)
Bilder


5. Jetzt erstellen sie eine neue Ebene. (Bild)
Bilder


6. Kann man zwar schon im Bild oben erkennen aber jetzt wird die Ebene auf der der erste mc ist gesperrt und unsichtbar gemacht. (Bild)
Bilder


7. Gehen sie in die zweite Ebene, indem sie auf das Bild in der Zeitleiste klicken. (Bild)
Bilder



8. In dieser Ebene kommt jetzt der zweite mc.
Ziehen sie dazu den mc von der Bibliothek zur Bühne.

9. Zentrieren sie den mc auch horizontal und vertikal.

10. Jetzt machen sie die erste Ebene wieder sichtbar und entsperren sie sie.

11. Sperren sie die zweite Ebene und gehen sie wieder in die erste Ebene.

12. Klicken sie einmal auf den mc um ihn anzuwählen und geben sie ihm unter den Eigenschaften den Instanznamen mc. (Bild)
Bilder

Den brauchen wir um gleich dem mc eine Aktion über Actionscript zu geben.

13. Klicken sie einmal auf das aktuelle Bild in der Zeitleiste

14. Öffnen sie das Aktionsfenster mit einem Klick auf F9.

15. Schreiben sie Folgendes rein:

onMouseMove = function(){
    mc._alpha = _xmouse/5,5;
}

Bilder


(im bild steht zwar 5, war aber ein Tippfehler der richtige Wert ist 5,5)


Übersetzt bedeutet das: Wenn man die Maus bewegt wird eine Funktion ausgeführt:
                                             der Alphawert vom mc ändert sich um den Wert der waagerechten Position von der Maus durch 5.

Der Wert von der X-Position (waagerecht) der Maus ist wenn man ganz links ist bei 0 und ganz rechts 550.
Der Alphawert geht aber nur von 0 bis 100. ( 0 = ganz unsichtbar, 50 = halb sichtbar, 100 = ganz sichtbar. )
Deshalb teilen wir den Wert von der X-Position von der Maus durch 5,5, dadurch wird die ganze Bühne zum Faden ausgenutzt.
Und da das ein onMouseMove Event ist, wird nach jeder Mausbewegung der Alphawert geändert.

Man kann ruhig mit der Zahl rumexperimentieren.

Das muss man nicht verstehen, sollte man aber denn dadurch könnten sich viele neue Möglichkeiten erschließen.

Wenn´s fertig ist sollte es so aussehen:




Und?
Könnt ihr mir beim Actionscript folgen?

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.02.2012 - 09:00

Super, danke für das Tutorial...

Portrait von veto2005
  • 22.01.2012 - 20:37

Super danke für die Erklärung !

Portrait von rentier
  • 21.04.2011 - 09:16

Danke. Die Beschreibung hilft mir weiter!

Portrait von RubyTuesday
  • 11.03.2011 - 17:39

Wunderbar erklärt! Hat mir sehr gut geholfen, hab schon lange nach so einem Tutorial gesucht :).

Portrait von MiraiPolarstern
Portrait von Lord_of_Hate
  • 10.07.2010 - 11:38

super erklärt gut und schnell nachzubauen

Portrait von Irona
  • 15.04.2010 - 01:33

eine wahnsinns Arbeit dies so gut zu dokumentieren. Vieln Dank

Portrait von PrinzWalium
  • 14.03.2010 - 20:23

Danke, sowas hab ich schon gesucht! ^^

Portrait von arimano
  • 14.01.2010 - 13:13

bisschen lang für sonen einfachen effekt aba für einsteiger wirklich gut geeignet...
ach ja sowas gehört eigentlich nich in die kategorie AS nur weil da effektiv eine Zeile Script drin is XD

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.01.2010 - 09:50

Gibt es eine Möglichkeit, diesen Fade-Effekt in eine Bilderschow (die automatisch durchläuft) zu integrieren? Wenn ja, wie mache ich das?
Der Effekt sollte halt beim Bilderwechsel automatisch durchlaufen, ohne dass man die Maus bewegen muss!

Super Tutorial btw.!

Portrait von spatz182
  • 22.10.2009 - 19:35

super sehr schön...danke sehr genau beschrieben

Portrait von zeppnic
  • 08.10.2009 - 11:49

Super beschrieben...hab sogar ich verstanden!

Portrait von brina123
  • 10.07.2009 - 21:42

super, vielen Dank, gut erklärt!

Portrait von SaLue85
  • 25.06.2009 - 23:10

Genial..sowas peppt ne Seite doch gleich richtig auf.

Portrait von Lonka
  • 10.06.2009 - 10:40

probier ich auch mal aus. Sehr gut erklärt. Danke

Portrait von thetalent
  • 31.05.2009 - 18:31

wie schauts denn damit aus wenn man mehr als nur 2 bilder faden möchte ?
so um die 10 z.b. ?

Portrait von waer
  • 03.06.2009 - 20:29

Dann muss die Alpha von dem jeweiligen Bild schneller runtergehen damit man das nächste sehen kann ;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 04.04.2009 - 11:37

das probier ich bestimmt mal aus.

Portrait von schmidalov
  • 17.03.2009 - 15:53

so einfach und solche wirkung :)

Portrait von lassereinboeng
  • 11.02.2009 - 01:05

Super geil erklärt. Wird sicher mal zu anwendung kommen. Schade das man keine Flyer in Flash aufm Mark werfen kann. *grinz

x
×
×