Anzeige
Tutorialbeschreibung

Horizontaler Mausverfolger mit Verzögerung

Horizontaler Mausverfolger mit Verzögerung

So sieht das Resultat aus.

In diesem Tutorial wird erklärt,

wie man eine Maske erstellt, die dem Mauszeiger auf horizontaler Linie dynamisch folgt.

Ich habe versucht es so einfach wie möglich zu machen, an und für sich ist es nicht allzu schwer.



Schritt 1:

Um den Effekt zu erzeugen, wie er oben zu sehen ist, braucht man ein Bild als Ausgangsbasis.

Es sollte länglich gezogen sein um den Effekt zu unterstreichen z.B. mit den Maßen 800x200.


Von diesem Bild werden zwei Versionen benötigt:

        1.        Das Original: Wir nennen es „Htgr-Bild“

 

Bilder


        2.      Eine Kopie des Originals, das z.B. in Photoshop mit dem Filter: Bewegungsunschärfe nachbearbeitet wurde. (In                     Flash 8 kann man einen Unschärfe-Effekt auch über die Filter erstellen, dabei werden die Kanten des Bildes aber                  verzerrt, was hier nicht von Vorteil wäre.): Dieses Bild nennen wir „Htgr-Bild2“

 

Bilder

Schritt 2:

Der Flashfilm kann eine beliebige Dokumentengröße haben, sollte aber größer als das Bild sein.

Beide Bilder werden in Flash importiert: File> Import > Import to Stage,

Bilder

und anschließend auf zwei unterschiedlichen Ebenen abgelegt: Insert > Timeline > Layer

Bilder

Die Bilder müssen deckungsgleich übereinander liegen.

Die Ebenen nennen wir entsprechend den Bildnamen: Ein Doppelklick auf die Ebenennamen ermöglicht das Umbenennen.

Schritt 3:

Auf einer weiteren Ebene, die wir „Verfolger1“ nennen, wird nun ein Rechteck in der Größe 100x205 erstellt.

Das Rechteck muss exakt über den Htgr-Bildern liegen. Wobei es natürlich oben und unten ein wenig überlappt.

Dieses Rechteck konvertieren wir in ein Symbol mit der Eigenschaft „Movie-Clip“: Modify > Convert to Symbol oder die Taste F8

Wir benennen das erstellte Symbol: Verfolger1

Die Ebene auf der der „Verfolger1“ ist nennen wir „Verfolger1“

 

Schritt 4:

Nun müssen wir diesem eben erstellten Symbol einen Instanznamen geben.

Dazu klicken wir auf das Rechteck (das ja nun ein MovieClip ist) und schreiben im „Properties“-Dialogfeld dort wo Instanzname steht „verfolger1_mc“. Mit der Taste „Enter“ bestätigen wir die Namensvergabe.

 

Bilder

Schritt 5:

Auf einer weiteren Ebene, erstellen wir nun einen Rahmen für den Verfolger.

Bereits beim Erstellen ist darauf zu achten, dass der Rahmen deckungsgleich über dem erstellten Rechteck liegt. Einen Rahmen erstellt man übrigens indem man die Fläche aus dem Rechteck löscht und nur noch die Außenkanten übrig bleiben.

Der Rahmen hat die gleichen Maße wie der „Vefolger1“: 100 Pixel breit und 205 Pixel hoch.

Der Rahmen wird auch in ein Symbol umgewandelt mit den Eigenschaften Movie-Clip.

Also alles identisch mit Schritt 3, nur nennen wir ihn „Verfolger2“.

Die Ebene auf der der „Verfolger2“ ist nennen wir „Verfolger2“.

 

Bilder

Schritt 6:

Auch für „Verfolger2“ gilt, dass er einen Instanznamen erhalten muss: „verfolger2_mc“

(sh. Schritt 4)

 

Schritt 7:

Nun erstellen wir eine letzte Ebene die wir „Aktionen“ nennen.

Wir markieren das erste Schlüsselbild der Ebene

Bilder

und öffnen das Aktionen Fenster:

Bilder

Hier kommt folgendes AS (ActionScript) rein:

 ------------

//Horizontaler Mausverfolger mit Verzögerung

MovieClip.prototype.setzeMausverfolger = function (tempo)

{

            this.onEnterFrame = function ()

            {                     

                        this._x += (_xmouse - this._x) / tempo;

            };

};

// Anwenden

verfolger1_mc.setzeMausverfolger(25);

verfolger2_mc.setzeMausverfolger(25);

 -------------

Zur Erklärung:

Überall wo x steht, bedeutet das, dass die Maus horizontal verfolgt wird.

Wenn wir x durch y ersetzen würden, dann würde sie vertikal folgen.

 

Bei „Anwenden“ seht ihr, dass es wichtig war, den MovieClips (mc) einen Instanznamen zu geben, sonst wüsste unser Flash-Film nicht, wen er aufrufen soll.

In Klammer steht das Tempo des Verfolgers, also in diesem Fall „25“. Wenn man will kann man den Mausverfolger langsamer machen, indem man die Zahl erhöht. Und umgekehrt natürlich schneller machen, wenn man die Zahl vermindert. In unserem Beispiel müssen die zwei Zahlen aber identisch sein.

Wenn alles im Aktionen-Fenster festgehalten wurde, dann schließen wir es.

Schritt 8:

Wir haben nun folgende Ebenen:


  • Aktionen
  • Verfolger2
  • Verfolger1
  • Hintergrund-Bild 1
  • Hintergrund-Bild 2

Nun müssen wir noch eine Maske erstellen.

Dazu klicken wir mit der rechten Maustaste auf den Ebenennamen „Verfolger1“ und im sich öffnenden Menü auf „Mask“. Dadurch wird die Ebene „Htgr-Bild1“ maskiert. Man kann dadurch im späteren Film nur den Teil des Bildes sehen, der vom erstellten Rechteck verdeckt wird.

 

Bilder

Danach müsste alles so aussehen. (Natürlich nur ungefähr so und mit anderen Bildern.)

Bilder

Schritt: 9

Nun können wir den Film testen: Control > Test Movie

Alles müsste funktionieren.

Viel Spaß damit!

Euer Verlunkid

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von dan

dan

  • 18.11.2011 - 02:41

Zugriff auf eine nicht definierte Eigenschaft verfolger2_mc
Zugriff auf eine nicht definierte Eigenschaft _xmouse

??

Portrait von Flashben
  • 31.10.2011 - 15:41

Hallo!

Danke erst einmal für diese schöne, schrittweise Erklärung. Konnte ich sehr gut nachvollziehen und umsetzen, soweit ich denn alles richtig gemacht habe. :D
Denn, Dein Film funktioniert nicht bei mir.

Wenn ich den in der Vorschau starte, dann wird mir zwar der Rahmen mit dem scharfen Ausschnitt des unter dem unscharfen liegenden Bildes angezeigt, jedoch folgt dann der Rahmen meiner Maus nicht. Alles bleibt im Fenster ("Film testen" in Flash 9) statisch. Lade ich den Film auf den Server und rufe ich den im Browser auf, bleibt der Ausschnitt (Verfolger) komplett weiß; das liegt ggf. an der weißen Füllfarbe des Verfolgers1 (???).

Folgende Fehlermeldungen werden beim Test bei mir ausgeworfen:

1.) Ausgabe:

Error: Error #1503: Ein Skript konnte nach 30 Sekunden nicht abgeschlossen werden und wurde beendet.
at flash.errors::ScriptTimeoutError$iinit()
at flash.display::MovieClip$iinit()

2.) Compiler-Fehler:
Szene 1, Ebene 1, 'Aktionen', Bild1
1120: Zugriff auf eine nicht definierte Eigenschaft _xmouse.
this._x += (_xmouse - this._x) / tempo;


Guck doch bitte mal drüber, ob ich etwas falsch gemacht habe:
http://www.fotogenetik.de/intro/bildlauf/bildlauf.swf
http://www.fotogenetik.de/intro/bildlauf/bildlauf.fla


Ich benutze Flash 9 im Adobe CS3 Prof. auf iMac mit Snowleo 10.6.8

Liebe Grüße

Ben

Portrait von verlunkid
  • 03.11.2011 - 07:28

Möglicherweise hast du Actionscript 3.0 eingestellt. Versuche es mit 2.0, bei den Einstellungen für die Veröffentlichung/Export des Filmes. Dieses Tutorial ist in Flash 8 entstanden.

Portrait von Becksinger
  • 25.07.2011 - 17:10

Danke für dieses überragende Tutorial ;)
Weiter so!!

Portrait von kaempferin
  • 13.02.2011 - 15:35

Danke, tolle Sache – gleich ausprobiert!

Portrait von Ella90
  • 08.04.2010 - 14:49

Danke, gut verständlich

Portrait von elisacarolina
  • 02.03.2010 - 09:21

einfach genial und schön erklärt!
vielen lieben dank

Portrait von hermine999
  • 15.01.2010 - 16:09

absolut genial....löst viel denkfallen und schafft den weg für
ideen...danke

Portrait von Zork
  • 13.01.2010 - 15:06

super , vielen Dank! freu mich schon das irgendwie einzubauen..

Portrait von DerFox
  • 03.12.2009 - 10:30

Hat prima geklappt!
Danke für das tolle Tut

Portrait von math_mustermann
Portrait von speedy87
  • 28.08.2009 - 01:02

habs grad versucht und muss sagen es hat geklappt ... hammer ... danke und respekt !! werds in meiner Homepage einbauen ...

Portrait von Pfohl
  • 19.05.2009 - 15:08

Super Tutorial! Habs erst als Autoscript3 Datei erstellt, aber mit Version 2.0 hats dann gleich auf Anhieb super geklappt!

Wens interessiert, hier das Ergebnis xD:
http://tschoni-band.de/flash/yamaha/

Portrait von verlunkid
  • 19.05.2009 - 21:10

sieht gut aus!
wenn du die framerate: bilder pro sekunde in den voreinstellungen höher setzt, z.B. 32 Bilder pro Sekunde, dann hakt es nicht so.

Grüße

Portrait von youngdog
Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 20.01.2009 - 17:08

sehr gelungen und gut verständlich!!!

Portrait von tollpatsch
  • 02.12.2008 - 12:11

Zu schritt drei sei angemerkt: am bestn die registrierung in die mitte legen, dann hat man auch kein problem wenn man an die ränder kommt.

Portrait von JupSchwupDup
  • 29.10.2008 - 23:19

Super klasse geklappt......net schlecht !!

Portrait von Lycos
  • 02.08.2008 - 03:06

Fette Sache schön erklärt und auf jeden fall zu gebrauchen..

Portrait von tramoc
  • 29.07.2008 - 15:26

cooles tut. danke hierfür.

x
×
×