Linkleiste mit Verfolger

Bei diesem Tutorial geht es darum, eine Linkleiste mit einem Verfolger zu erstellen.
Schritt 1
Zuerst müssen wir ein langes Rechteck erstellen, das später als Rahmen für unsere Linkleiste dienen soll.
Dazu nehmen wir das Rechteckwerkzeug, wählen einen schwarzen Hintergrund und eine beliebige Rahmenfarbe.
Zudem sollte die Rahmendicke nicht zu dick eingestellt werden(1pixel ist ausreichend)
Jetzt erstellt ihr das Rechteck, wählt es durch einen Doppelklick aus und entfernt anschließend die linken und rechten Rahmenteile (anklicken und entf drücken).
Jetzt kehrt ihr wieder in eure Szene1 zurück (Doppelklick auf Bühnenhintergrund).
Schritt 2
Nun erstellen wir eine neue Ebene in der Hauptzeitleiste, und platzieren diese unterhalb unserer Ebene1.
Auf unserer zweiten Ebene erstellen wir nun erneut ein Rechteck, allerdings mit einem blau-schwarzen Kreis-Pfade als Füllung, und ohne Rahmenfarbe.
Diesen Pfad passen wir nun mit unserem Farbverlaufwerkzeug so an, dass er mehr die Form einer Ellipse hat, und nur wenig über die Leiste heraus ragt.
Jetzt wählen wir die eben erstellte Grafik aus und drücken F8 um diese in einen Movieclip zu konvertieren. Anschließend geben wir dem MCD den Instanznamen Verfolger.
Schritt 3
Nun müssen wir noch unsere Schaltflächen erstellen. Dazu benötigen wir erneut eine neue Ebene, die über den beiden liegt.
Alle unsere Schaltflächen sollten die gleiche Breite vorweisen, da sonst später unser Verfolger ungleich auf unsere Bewegung reagiert.
Daher erstellen wir zunächst ein Rechteck in der gewünschten Breite ohne Rahmen und mit einer schwarzen Hintergrundfarbe.
Darauf platzieren wir nun mittig unsere Beschriftung.
Nun wählen wir sowohl das Textfeld, als auch unser Rechteck aus, und konvertieren diese mit F8 in eine Schaltfläche. Dieser Schaltfläche geben wir den Instanznamen b1.
Mit allen weiteren Schaltflächen verfahrt ihr genau so, eben mit einer fortlaufenden Bezeichnung (also als Instanznamen b2,b3,b4…)
Schritt 4
Nun müssen wir unseren Verfolger-MC auf dieselbe Breite bringen wie unsere Buttons.
Dies machen wir, indem wir das Transformations-Werkzeug auswählen und den MC in die Länge ziehen oder bei den Eigenschaften die Breite ändern.
Schritt 5
Wenn nun alles so angeordnet ist, wie auf dem Bild, können wir mit dem scripten beginnen.
Die folgenden Codezeilen werden einfach in das Codefenster des ersten Frames der Hauptzeitleiste eingefügt, diese kann mit F9 aufgerufen werden.
Wir beginnen damit eine Variable zu definieren, die den Wert für unsere Verfolgungsgeschwindigkeit trägt
und eine Variable die die Anzahl der Buttons beinhaltet
Code:
var geschwindigkeit = 3;//Große Werte schneller, kleine Werte langsamer var Buttons = 6;// Anzahl der auf der Bühne befindlichen Buttons var_x2 = b1._x;//erster Zurückkehrpunkt
Schritt 6
Zudem benötigen wir noch eine Funktion, die bei einem RollOver die Bewegung ausführt, bzw. die neue Bewegung definiert.
Dazu nutzen wir eine for-Schleife.
Diese Schleife wird so oft durchlaufen, bis die Bedingungen erfüllt sind.
Code:
for (i=1; i<Buttons+1; i++) { this['b'+i].onRollOver = function() { var_x = this._x; }; this['b'+i].onRollOut = function() {// damit der Verfolger zum zuletzt gedrückten Button zurückkehrt var_x = var_x2; }; this['b'+i].onRelease = this['b'+i].onReleaseOutside=function () { //position des zuletzt gedrückten Buttons wird gespeichert var_x2 = this._x; }; }
Schritt 7
Zuletzt wird eine onEnterFrame-function erstellt, die später unsere Bewegung ausführen wird.
Code:
this.onEnterFrame = function() { verfolger._x += (var_x-verfolger._x)/geschwindigkeit; };
Der gesamte Code sieht so aus:
Code:
var geschwindigkeit = 3; var Buttons = 6;// diese Variable muss die anzahl der in der Linklesite befindlichen Buttons beinhalten var_x2 = b1._x; this.onEnterFrame = function() { verfolger._x += (var_x-verfolger._x)/geschwindigkeit; }; for (i=1; i<Buttons+1; i++) { this['b'+i].onRollOver = function() { var_x = this._x; }; this['b'+i].onRollOut = function() { var_x = var_x2; }; this['b'+i].onRelease = this['b'+i].onReleaseOutside=function () { var_x2 = this._x; }; }
Schon ist euer Linkleistenverfolger fertig und sieht einfach umwerfend aus!

Passend zum Inhalt empfehlen wir:
WordPress Video-Tutorial – von den Grundlagen bis zu Website, Blog & Co
Danke für das Tutorial
Ein schöner Effekt und eine gut nachvollziehbares Tutorial. Vielen Dank!
Super Tut, vielen Dank! =)
Hi, ich finde das Thema das hinter dem Tut steht ziemlich klasse. Allerdings gelingt es mir leider nicht. Läuft jetzt doch alles nur auf einer "echten" Ebene? Im Tut hast du ja auch ein Bild gemacht in dem man zwei "echte" Ebenen sieht. In einem Kommentar weiter unten sagst du aber es ist nur eine. Für mich als totaler Flash Neuling ist das leider nicht lösbar :o/
Ein super Tutorial, sehr leicht zum nachmachen. Nur weiter so. Toller Effekt
Bei mir klappts merkwürdigerweise nicht. Kann auch an deinem unpraktischen Umgang mit Ebenen liegen. Im Tutorial kommen doch Ebenen vor, du zeigst sie sogar im Bild, aber in der Enddatei von dir sind keine mehr vorhanden, wie kommt das?
Das Anordnen innerhalb der Ebene funktioniert bei mir nicht wirklich.
Das Tutorial ist gut gelungen und einfach nachzuarbeiten =)
cool weiter so geiler effekt !
Danke schön, sehr gutes Tutorial.Weiter so
super und einfach...
danke, werede ich gleich ausprobieren.
Hi, kurze frage in deinem Tutorial sprichst du von mehreren ebenen, bei den Dateien is aber immer nur eine ??
mfg
Gefällt mir gut, allerdings bin ich mit Action Script noch nicht soweit um die ganzen Formeln zu kapieren -.- ich werds aber bald mal ausprobieren :) sobald ich mich weiter eingearbeitet habe.
sehr schön gemacht! gefällt mir sehr gut!
super Tutorial, mehr davon ;)
hat alles super geklappt. danke.
hab aber noch eine frage. ist es möglich die größe des mausverfolgers zu ändern? je nachdem wie breit die buttons sind?
Danke schön, sehr gutes Tutorial. Hat bei mir aber nur mit Action Script 2 funktionier.
super Tutorial ich danke dir vielmals
Mehr anzeigen