Ansatzpunkte für Flashnavigation

[Liamderprogger]

Hi liebe Tutorials.de-User!

Ich versuche seit geraumer Zeit eine ordentliche Navigation zu bauen.
Ich habe vor meine Navigation wie auf http://www.sber.at/ zu gestalten vom System.

Ich habe leider keine Ahnung wie ich das bewerkstelligen soll. Könnt Ihr mir bitte helfen und mir wenigstens Ansatzpunkte dazu geben, sodass ich dies verwirklichen kann?


LG und einen schönen 2. Weihnachtsfeiertag noch, Liam

 

[zirag]

Hallo

also den schwarzen Kasten kannst du ja über die Maus Position steuern.
z.B.
if(_root._xmouse > 120) {
kasten._x = 30;
} else {
kasten._x = _root._xmouse;
};

alles nur mal so beispiel Werte. Und das machst du dann für jeden horizontalen Menüpunkt.

Und dann machst du einen MC mit den inhalten, und wenn der Kasten denn z.B. bei 30 ist, soll der inhalt MC gezeigt werden und die Manüpunkte abspielen.

Ist nur mal so ein Ansatz, weiss nicht ob es , bin selber grad dabei, mich mehr mit AS zu beschäftigen.

Hoffe ich konnte etwas helfen


mfg ZiRaG


============EDIT=============

ich habs grad mal ausprobiert und das mit der Position klappt schon mal
ich hab meinen Film 1000 px breit gemacht und denn mal einen "snapping Punkt" gemacht, muss leider schlafen sonst würd ich den Rest auch noch versuchen.
PS mein Kasten ist 150 breit.
hier mal mein Code:

this.onEnterFrame = function(){
if(_root._xmouse >= 250 && _root._xmouse <= 400){
	kasten._x = 250;
}else{
	kasten._x = (_root._xmouse-75);
	};
};

 

[zirag]

Ich komme selber nicht weiter, aber bin schon fast davon besessen ^^
das war mein letzter Versuch:

this.onEnterFrame = function(){
if(_root._xmouse >= 250 && _root._xmouse <= 400){
	kasten._x = 250;
	stat = true;
}else{
	kasten._x = (_root._xmouse-75);
	removeMovieClip("kasten.inhalt.links1");
	stat = false
	};
};
kasten.onRollOver = function(){
	if(stat == true){
		kasten.inhalt.attachMovie("links1","links1",0);
	}
};

Es ist mir klar, dass es so nicht wirklich funktionieren kann, aber ich wüsste auch nicht wie es sonst klappen sollte. Wenn ich den Code:
kasten.inhalt.attachMovie("links1","links1",0);
mit ins onEnterFrame nehme, denn geht es ja auch nicht, weil er es andauernd neu lädt.

Mich interessiert es mittlerweile selber sehr, wie man das anstellen kann.

Deshalb bitte ich hier einen erfahreneren User mir/uns etwas zur Hand zu gehen

Danke schonmal,

mfg ZiRaG

 

[luke_the_duke]

Hallo,

ich habe hier einmal das Einrasten-Feature umgesetzt. Die farbigen Menüs müssten im Ernstfall natürlich transparent geschaltet werden, ausserdem ist keine Navigation implementiert, die ein- oder ausblendet. Der Ansatz sollte aber gegeben und beliebig erweiterbar sein.

Die recte und linke Kante können über die beiden Variablen xMax und xMin gesteuert werden.

gruss

 

[luke_the_duke]

Hallo,

alle meine seit gestern hochgeladenen Dateien sind beschädigt.
Ich hab nun jeden Computer bei uns in der Agentur ausprobiert, irgendwas scheint mit der Upload-Funktion nicht zu funktionieren...

Werd so schnell wie möglich eine Lösung finden.

gruss und nix für ungut

 

[zirag]

Hallo,

was gibt es denn an meiner Einrast Funktion auszusetzen ?
Ich kann deine Datei ja leider nicht öffnen, aber meine Einrast Funktion klappt doch.

mfg

 

[luke_the_duke]

Hallo!

Deshalb bitte ich hier einen erfahreneren User mir/uns etwas zur Hand zu gehen

Deshalb habe ich etwas zusammengebastelt, das ein klein wenig weitergeht. Ich habe deinen Ansatz bloss weiterverfolgt.

gruss

 

[zirag]

Hi,
wollte dich nicht anfahren oder so, wollt nur wissen, was bei mir verbesserungswürdig ist

"ich habe hier einmal das Einrasten-Feature umgesetzt" <-- deswegen dachte ich, du hast es anders gemacht.

mfg

PS: Aber vielleicht kannst du ja mal deinen AS posten, damit ich mir den mal ansehen kann, wäre nett

 

[luke_the_duke]

Hallo,

klar, mach ich gerne. Was ich an deiner Ausführung ein wenig unglücklich fand, war die Endlosschlaufe, die beim rollOver mit Kontroll-Variablen ausgebremst werden muss.

Dazu hab ich noch statt einer direkten Koordinaten-Übergabe einen Prototype verwendet, der die Bewegungen des Thumbnails "weicher" rechnet. Den Prototype findest du in der Flash-FAQ-Sektion ausführlich dokumentiert.

Alles was du zum Ausprobieren brauchst, sind vier MovieClips auf der Bühne:

- Thumbnail, angeschrieben mit "thumb"
- 3 RollOver-Flächen, die mit "menu1-3" angeschrieben sind.

Der Prototype

MovieClip.prototype.mc_setTo = function(s:Number, d:Number): Void {
	var u: Number = this.getNextHighestDepth();
	if (!this.mc_setToCT) {
		this.createEmptyMovieClip("mc_setToCT", u);
	}
	//
	var e: Number = 2; 
	var pNr: Number = Math.floor((arguments.length-2)/2);
	var pAll: Array = [];
	//
	for (var i: Number = 0; i < pNr; i++) {
		pAll[i] = {p: arguments[e], t: arguments[e+1]}
		e += 2;
	}
	//
	var i: Number = d;
	this.mc_setToCT.onEnterFrame = function() { 
		if (i>0) {
			i--;
		} else {
			for (var u: Number = 0; u < pAll.length; u++) { 
				var p: String = pAll[u].p;
				var t: Number = pAll[u].t;
				var dif: Number = t-this._parent[p];
				dif *= s;
				this._parent[p] += dif;
				if (this._parent[p] == this[p +"CTRL"]) {
					pAll.splice(u, 1);
				} else {
					this[p +"CTRL"] = this._parent[p];
				}
	
			}
			if (pAll.length < 1) {
				delete this.onEnterFrame;
				this.removeMovieClip();
			}
		}
	};
};

Das Skript

var xMin: Number = 40;
var xMax: Number = 970;
//----------------------------------------------------------------------------------------------//
function einrasten (ct: MovieClip): Void {
	
	stopMausVerfolgen();
	
	var x: Number = ct._x;
	
	thumb.mc_setTo(.2, 0, "_x", x);
}
//----------------------------------------------------------------------------------------------//
function mausVerfolgen (): Void {
	onEnterFrame = function (): Void {
		var x: Number = _xmouse;
		
		if (x < xMax && x > xMin) thumb.mc_setTo(.2, 0, "_x", x);
	}
}
//----------------------------------------------------------------------------------------------//
function stopMausVerfolgen (): Void {
	delete onEnterFrame;
}
//----------------------------------------------------------------------------------------------//
menu1.onRollOver = menu2.onRollOver = menu3.onRollOver = function (): Void {
	this._parent.einrasten (this);
}
//----------------------------------------------------------------------------------------------//
menu1.onRollOut = menu2.onRollOut = menu3.onRollOut = function (): Void {
	this._parent.mausVerfolgen();
}
//----------------------------------------------------------------------------------------------//
mausVerfolgen();

 

[zirag]

Hallo,

Danke schonmal für den Code. Den Prototype Script versteh ich noch net ganz, aber das macht auch nichts.

Die "smoothe" Bewegung wollte ich später lösen, mit der Tween Klasse. Das sollte doch auch möglich sein oder ?
da muss ich nochmal schauen, ob ich das mit der Tween Klasse hinbekomme. Kannst es ja auch mal versuchen, wenn du nix vor hast

Ich bleib am Ball

mfg

PS:
1. Bei dir wird thumb nicht mittig bewegt, die Maus ist über der linken Kante, aber das ist ja kein großer Aufwand
2. du hast es mit den Menu1-3 Clips gelöst, also muss man über das Menü fahren, damit das "thumb" einrastet, auf der o.g. Site snappt der Kasten auch, ohne, dass man über die Menüpunkte oben fahren muss.

das nur mal so als konstruktive Kritik