Anzeige
Tutorialbeschreibung

Linkleiste mit Verfolger

Linkleiste mit Verfolger

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

Bilder

 
Auf unserer zweiten Ebene erstellen wir nun erneut ein Rechteck, allerdings mit einem blau-schwarzen Kreis-Pfade als Füllung, und ohne Rahmenfarbe.

Bilder

 
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.

Bilder


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

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

Bilder

 
 
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!

 
 



 

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Susan99
  • 22.05.2012 - 20:31

Ein schöner Effekt und eine gut nachvollziehbares Tutorial. Vielen Dank!

Portrait von Kaef3r
  • 17.09.2011 - 08:44

Super Tut, vielen Dank! =)

Portrait von Matte
  • 26.06.2011 - 23:08

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/

Portrait von subesche
  • 08.06.2011 - 07:44

Ein super Tutorial, sehr leicht zum nachmachen. Nur weiter so. Toller Effekt

Portrait von corrupt
  • 10.05.2011 - 17:49

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.

Portrait von Matte
  • 26.06.2011 - 23:06

Huch, hier wollt ich nicht landen, sry :o)

Portrait von dastan
  • 26.04.2011 - 14:21

Das Tutorial ist gut gelungen und einfach nachzuarbeiten =)

Portrait von dastan
  • 26.04.2011 - 14:11

cool weiter so geiler effekt !

Portrait von ciprianduou
  • 22.03.2011 - 17:30

Danke schön, sehr gutes Tutorial.Weiter so

Portrait von pchilfe4
  • 15.02.2011 - 18:00

super und einfach...

Portrait von nellynelly
  • 08.02.2011 - 05:39

danke, werede ich gleich ausprobieren.

Portrait von nemonic
  • 23.01.2011 - 03:57

Hi, kurze frage in deinem Tutorial sprichst du von mehreren ebenen, bei den Dateien is aber immer nur eine ??

mfg

Portrait von kleeaar
  • 23.01.2011 - 11:24

@nemonic
Ja, das war vllt falsch ausgedrückt: auf einer ebene in der Zeitleiste können ja mehrere Elemente platziert werden. Diese stapeln sich dann auch in "Ebenen" übereinandern. Man kann diese Elemete dann in einer bestimmten Reihenfolge anordnen, damit das eine z.b. das andere überdeckt...

Das ist hier mit Ebene gemeint.
Grüße

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.09.2010 - 10:12

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.

Portrait von serpentino
  • 21.07.2010 - 16:06

sehr schön gemacht! gefällt mir sehr gut!

Portrait von womanisery
  • 17.05.2010 - 21:45

super Tutorial, mehr davon ;)

Portrait von conel
  • 10.02.2010 - 22:07

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?

Portrait von Bonanza
  • 21.12.2009 - 16:14

Danke schön, sehr gutes Tutorial. Hat bei mir aber nur mit Action Script 2 funktionier.

Portrait von Sebil
  • 05.11.2009 - 14:34

super Tutorial ich danke dir vielmals

Portrait von dCak
  • 04.11.2009 - 11:55

schaut sehr schön aus und du schreibst sehr verständlich. gefällt mir sehr gut !

LG

x
×
×