Linkleiste mit Verfolger

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).

 

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.

 

 

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…)

 

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.


 

 

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

 

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

 

 

 

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.

 

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;
	};
}

 

 

Zuletzt wird eine onEnterFrame-function erstellt, die später unsere Bewegung ausführen wird.

 

this.onEnterFrame = function() {
	verfolger._x += (var_x-verfolger._x)/geschwindigkeit;

};

 

 

Der gesamte Code sieht so aus:

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!