Fächer Navi (wie bei mstudio.com)

deak_wue

Grünschnabel
hi,

ich bin gerade an diesem Fächer Prinzip, wie bei mstudio.com.
hab ihr auch schon etws dazu gefunden. Dank an Tobias.
an sich komme ich gut mit dem Script zurecht, also verstehe wie es grundsätzlich funktioniert. leider habe ich doch ein paar Probleme.
Ist es möglich statt der Flächen auch Bilder rein zuladen, damit es quasi ein Fotostapel ist den man durchblättern kann?

Hab es schon versucht einfach in den mc ein jpg zu laden, dann wird dieses aber nicht verzehrt.
Sollte das nicht möglich sein, müsste es so sein, das wenn die Fläche steht, das Bild rein geladen wird. Natürlich wäre mir die erste Variante die liebste.
Ich hab zusätlich eine ID vergeben damit ich die einzelnen MC ansprechen kann.

Jemand eine Idee.
Hier das Script.

_root Ebene:

Code:
var pad = new Array(10);

var color2 = new Array;
color2.push ("0x037FFA","0x0273E2","0x026BD2","0x015EBA","0x0152A3", "0x004B95","0x053B71","0x013161","0x022446","0x022446");
trace (color2[0]);

var gap = 30;

for (var i=0; i<pad.length; i++) {
	pad[i] = this.attachMovie("pad", "p" + i, i);
	
	
	this.onEnterFrame = function() {
		go();
	}
}

function go() {
	delete this.onEnterFrame;
	for (var i=0; i<pad.length; i++) {
		pad[i].idx = i;
		pad[i]._x = Stage.width / 2 - 160;
		pad[i]._by = (Stage.width / 2) - (gap * pad.length / 2) + (i * gap);
		pad[i]._y = pad[i]._by;
		pad[i]._color = color2[i]
		var ax = (i - pad.length / 2) / 20;
		pad[i]._offset = ax;
		pad[i]._baseang = Math.PI / 2;
		pad[i]._ang = pad[i]._baseang - pad[i]._offset;
		pad[i].onRollOver = function() { test(this); }
		pad[i].id = i;
		
		pad[i].onPress = function () {
			
			trace (this.id);
			
		}
		
	}
}

function test(obj) {
	obj.swapDepths(this.getNextHighestDepth());
	var da = (obj._ang < Math.PI / 2)? 0 : Math.PI;
	var dy = (Stage.width / 2);
	var m = obj.idx;
	for (var i=0; i<m; i++) {
		pad[i].dy = dy - obj.h / 2 - (m * gap) + ((i + 1) * gap);
	}
	for (var i=m + 1; i<pad.length; i++) {
		pad[i].dy = dy + obj.h / 2 + ((i - m - 1) * gap);
	}
	for (var i in pad) {
		if (pad[i] != obj) {
			pad[i].da = pad[i]._baseang - pad[i]._offset + (dy - pad[i].dy) / 700;
			pad[i].slideTo(pad[i].dy, pad[i].da, 25, 5);
			
		}
	}
	obj.slideTo(dy, da, 90, 10);
}

Code im leeren Mc (Verknüpfungsname: pad)


Code:
var w = 468;
var h = 240;
var rad = w / 20;
var _ang = 0;
var _color = 0;

this._alpha = 50;

this.watch("_ang", onAng);

function onAng(id, oval, nval) {
	paint(nval);
	return nval;
}

function paint(ang) {

	var x1 = Math.sin(ang * 1) * rad;
	var x2 = w - Math.sin(ang * 1) * rad;
	var x3 = w + Math.sin(ang * 1) * rad;
	var x4 = -Math.sin(ang * 1) * rad;
	var y1 = 0 - Math.cos(ang / 1) * (h / 2);
	var y2 = 0 + Math.cos(ang / 1) * (h / 2);
	this.clear();
	this.beginFill(_color, 100);
		//this.loadMovie ("test.jpg");
	this.moveTo(x1, y1);
	this.lineTo(x2, y1);
	this.lineTo(x3, y2);
	this.lineTo(x4, y2);
	this.lineTo(x1, y1);
				
			//if (_root.offen == true){
this.p1.loadMovie("test.jpg" );
	//}
}

function setTo(dy, a) {
	this._y = dy;
	_ang = a;
}

function slideTo(dy, da, dt, s) {
	this.onEnterFrame = function() {
		_ang += (da - _ang) / s;
		this._y += (dy - this._y) / s;
		this._alpha += (dt - this._alpha) / s;
		if (Math.abs(da - _ang) < 0.01 && Math.abs(dy - this._y) < 1) {
			_ang = da;
			this._y = dy;
			delete this.onEnterFrame;
			_root.offen = true;
			trace (id);

		}
	}
}

Bin über jede Hilfe dankbar!

gruß

deak
 
Hi,

MovieClips (und damit auch eingeladene Bilder) lassen sich prinzipiell nicht zur Laufzeit verformen. Mit der BitmapData-Klasse ab Flash 8 dürfte es u.U. möglich sein, auch Bitmaps entsprechend zu verzerren (entweder mit dem DisplacementMapFilter oder notfalls pixelweise), aber vor allem letztere Variante würde wohl zu viel Rechenleistung benötigen, um wirklich flüssig zu laufen.

Ich habe im Moment leider etwas wenig Zeit, aber in einer freien Minute kann ich Dir zumindest für die Variante "Bilder nach dem Aufklappen anzeigen" ein Beispiel fertig machen.

Gruß
.
 
Hallo Tobias,

ich würde das ja auch gerne selber versuchen. Mein Ansatz wäre in den MC noch einen MC zu legen. In dieses dann das Bild rein. Könnte ja die Dateinamen in eine Array schreiben und der Reihe nach übergeben. Das müsste doch klappen. Dann müsste ich nur noch fest stellen wann der MC ganz offen ist und die Aktion auf rufen die das Bild läd, das ist aber auch schon mein Problem. Eine andere Frage wäre wie ich das statt Horizontal Vertikal hinbekomme....

Hast du einen Tip für mich?

Danke

Deak
 
Hi,

die Bewegung ist dort beendet, wo in der Funktion "slideTo" die onEnterFrame-Methode gelöscht wirt:
Code:
delete this.onEnterFrame;
Wenn der Variable "dt" der Wert 90 zugewiesen wurde, handelt es sich um ein Öffnen des Objekts und Du kannst das Bild anzeigen.

Ich mache Dir wie gesagt gerne mal ein Beispiel fertig, aber im Moment bin ich echt knapp was meine Zeit betrifft, also wirst Du damit wohl bis Anfang nächster Woche warten müssen.

Du kannst das ganze in der Ausrichtung ändern, indem Du einfach an den relevanten Stellen alle _x durch _y (und vice versa), sowie alle _width durch _height ersetzt.

Gruß
.
 
Hi Tobias,

schon mal Danke. Das mit der vertikalen Bewegung hab ich geschafft.
Aber irgendwie sind es jetzt Dreiecke? Ich denke das muss irgendwo an der line to liege bzw move to. Ich habe das jetzt mal versucht wie du es beschrieben hast bzw. habe ich mir die var dt tracen lassen. Ich bekomme jedoch entweder 25 oder 100.
:confused:

Naja vielleicht noch ein kleiner Tip. Habe nochmal den aktuellen Code hier:

MC:
Code:
var w = 400;
var h = 240;
var rad = w / 30;
var _ang = 0;
var _color = 0;

this._alpha = 50;

this.watch("_ang", onAng);

function onAng(id, oval, nval) {
	paint(nval);
	return nval;
}

function paint(ang) {

	var x1 = Math.sin(ang * 1) * rad;
	var x2 = w - Math.sin(ang * 1) * rad;
	var x3 = w + Math.sin(ang * 1) * rad;
	var x4 = -Math.sin(ang * 1) * rad;
	var y1 = 0 - Math.cos(ang / 1) * (h / 2);
	var y2 = 0 + Math.cos(ang / 1) * (h / 2);
	this.clear();
	this.beginFill(_color, 100);
		//this.loadMovie ("test.jpg");
	this.moveTo(y1, x1);
	this.lineTo(y2, x1);
	this.lineTo(y3, x2);
	this.lineTo(y4, x2);
	this.lineTo(y1, x1);
				
			//if (_root.offen == true){

	//}
}

function setTo(dy, a) {
	this._x = dy;
	_ang = a;
}

function slideTo(dy, da, dt, s) {
	this.onEnterFrame = function() {
		
		_ang += (da - _ang) / s;
		this._x += (dy - this._x-100) / s;
		this._alpha += (dt - this._alpha) / s;
		trace (dt);
		if (Math.abs(da - _ang) < 0.01 && Math.abs(dy - this._x) < 1) {
			_ang = da;
			
			this._x = dy;
			delete this.onEnterFrame;
			;
			_root.offen = true;
			trace (id);

		}
	}
}

_root.

Code:
var pad = new Array(10);

var color2 = new Array;
color2.push ("0x037FFA","0x0273E2","0x026BD2","0x015EBA","0x0152A3", "0x004B95","0x053B71","0x013161","0x022446","0x022446");
trace (color2[0]);

var gap = 20;

for (var i=0; i<pad.length; i++) {
	pad[i] = this.attachMovie("pad", "p" + i, i);
	
	
	this.onEnterFrame = function() {
		go();
	}
}

function go() {
	delete this.onEnterFrame;
	for (var i=0; i<pad.length; i++) {
		pad[i].idx = i;
		pad[i]._y = Stage.height / 2- 100;
		pad[i]._by = (Stage.height / 2) - (gap * pad.length / 2) + (i * gap);
		pad[i]._x = pad[i]._by;
		pad[i]._color = color2[i]
		var ax = (i - pad.length / 2) / 20;
		pad[i]._offset = ax;
		pad[i]._baseang = Math.PI / 2;
		pad[i]._ang = pad[i]._baseang - pad[i]._offset;
		pad[i].onRollOver = function() { test(this); }
		pad[i].id = i;
		
		pad[i].onPress = function () {
			
			
			
		}
		
	}
}

function test(obj) {
	obj.swapDepths(this.getNextHighestDepth());
	var da = (obj._ang < Math.PI / 2)? 0 : Math.PI;
	var dy = (Stage.width / 2);
	var m = obj.idx;
	for (var i=0; i<m; i++) {
		pad[i].dy = dy - obj.h / 2 - (m * gap) + ((i + 1) * gap);
	}
	for (var i=m + 1; i<pad.length; i++) {
		pad[i].dy = dy + obj.h / 2 + ((i - m - 1) * gap);
	}
	for (var i in pad) {
		if (pad[i] != obj) {
			pad[i].da = pad[i]._baseang - pad[i]._offset + (dy - pad[i].dy) / 700;
			pad[i].slideTo(pad[i].dy, pad[i].da, 25, 5);
			
		}
	}
	obj.slideTo(dy, da, 100, 20);
}

Ok, und hier mein aktuelles Ergebniss:

http://www.diborakete.de/files/faecher.swf

Wäre sehr nett wenn du mir noch einen kleinen Tip gibst.
Danke für dein Angebot mit Anfang nächster Woche, muss es aber bis Montag fertig haben.
 
Hi,

ich würde Dir wirklich gerne helfen, aber ich habe jetzt nicht einmal die Zeit, mir den Code der paint-Methode durchzulesen, bevor ich los muss - und ich komme erst morgen Abend wieder. :(

Gruß
.
 
Hi,
also hab das mit der vertikalen Bewegung hin bekommen auch das meine Fläche die richtige größe hat. Auch wird ein Bild bzw. ein Bilder Array geladen, wenn die Fläche die richtige Größe hat. Hab jetzt nur noch Probleme bei den Abstände der anderen bzw. die Absände sollen sich bei klick ändern. Und irgendwas stimmt bei der Bewegung nacht rechts noch nicht von der Perspektive. Naja einen Tag hab ich noch, vielleicht hat jemand nen Tip oder könnte sich morgen mal die FLA anschauen. Dann würd ich sie mal posten.

Schönen Abend noch...

Deak
 
Hi Tobias,

also hier die FLA´s sind 3MB hab´s auf meinen Server gelegt.
Noch mal zu den Problemen.

Wenn die Fläche auf ist und danach nach links geht stimmt die Klappbewegung nicht ganz. Anstelle der Bilder lade ich später SWF´s mit Videos rein deswegen soll bei Klick
die MC´s links und rechts etwas mehr Abstand zum "Content" haben.

http://www.diborakete.de/facher.zip

Danke schon mal

Deak
 

Neue Beiträge

Zurück