Nachbau Apple Dock in x- und y-Achse, benötige Unterstützung

[adriling]

Hallo,

für mein Online-Tagebuch möchte ich eine Art Apple Dock nachbauen, allerdings nicht nur in der x-Achse, sondern auch noch innerhalb der y-Achse. Es klappt zwar, aber noch nicht ganz befriedigend, daher bräuchte ich bitte mal jemanden, der sich das anschaut und mitdenkt, ich komme nämlich nicht mehr so richtig weiter.

Grundlage der Programmierung ist ein Apple Dock Skript welches ich hier mal übers Forum gefunden habe (weiß leider nicht mehr wo, sonst würde ich den Urheber gerne nennen, sorry). Dieses habe ich um die y-Achse "aufgebohrt", allerdings ist es nun so, dass ab und zu einige Button "verschwinden" bzw. in falscher Reihe liegen, irgendwo stimmt das mit der y-Achse noch nicht so richtig, bei bestimmten Abständen Maus zu Button wird wohl der _y Wert falsch berechnet, nur wieso???

Außerdem überlappen sich die Button, wenn ich den max-Wert erhöhe, auch das verstehe ich noch nicht so ganz?

Programmierung:
Der Basis-Button liegt in einem mc namens "dock" und wird 31x dupliziert, jeweils 7 in einer Reihe und dann Zeilenumbruch. Die Button sind durchnummeriert, also der erste Button hat den Namen "1" usw.

Auf dem mc "dock" liegt dann folgender Code:

onClipEvent(load){
	_quality = "BEST";
	var margin = 2;			// tray margin
	var min = 30;			// icon size at its smallest
	var max = 90;			// icon size at its largest
	var span = 1.5 * min;		// radius of influence
	var spacing = min + 1;	// icon spacing
	var n = 31;				// number of icons
	var speed = 0.15;

	var _MC = Math.cos;
	var _MS = Math.sin;
	var _s = max - min;
	var state = 0;
	var piSpan = Math.PI / span;

	var centerx = new Array();
	var ix = 0; //Faktor Korrektur
	var ux = 7; //Zeilenumbruch
	for(i = 1; i <= n; i++){
		centerx[i] = (2 * (i-ux*ix) - n - 1) * spacing / 2 + 350;
		//this[i].txt.text=i-ux*ix;
		//Zeilenumbruch
		if (i < (ux*(ix+1))){
		} else {
			ix++;
		}
	}


	var centery = new Array();
	var zy = 0; //zaehler
	var iy = 0; //Faktor Korrektur
	var uy = 7; //Zeilenumbruch
	for(i = 1; i <= n; i++){
		centery[i] = (2 * (i-iy) - n - 1) * spacing / 2 + 600;
		//this[i].txt.text=(i-iy);
		//Zeilenumbruch
		if (i < (uy*(zy+1))){
			iy++;
		} else {
			zy++;
			//iy=0;
		}
	}
	
	//tray._height = min * zy + 2 * margin;
	this._alpha = 0;
}

onClipEvent(enterFrame){
	if(this._alpha < 100) this._alpha += 10;
	if (state == 0 || state == 1) temp = false; else temp = true;
	if(inside) state = Math.min(1, state + 0.2); else state = Math.max(0, state - 0.2);
	if(x != _xmouse || y != _ymouse || temp) {

		var x = _xmouse;
		var y = _ymouse;
		//var x1 = tray._x;
		//var x2 = x1 + tray._width;

		var altitude = min * zy + 2 * margin + _s * state;

		if(!temp){
			//if( x < x1 || x > x2 || Math.abs(y) > altitude ) inside = false; else inside = true;
			if( x < centerx["1"]-50 || x > centerx["7"]+50 ||  y < centery["1"]-50 || y > centery["31"]+50 ) inside = false; else inside = true;
		}


		state=1; //zu testzwecken
		//inside=true; //zu testzwecken

		for(i = 1; i <= n; i++){
			lox = centerx[i] - state * span;
			hix = centerx[i] + state * span;

			loy = centery[i] - state * span;
			hiy = centery[i] + state * span;

			if(x <= lox) iX = hix;	// mouse on the left, icon to the right
			if(x >= hix) iX = lox;	// mouse on the right, icon to the left

			if(y <= loy) iY = hiy;	// mouse on the left, icon to the right
			if(y >= hiy) iY = loy;	// mouse on the right, icon to the left

			if((x > lox && x < hix) && (y > loy && y < hiy)) { // icon is influenced by mouse
				//x-Achse
				fix = piSpan * (hix - x);					 		// 0..2pi
				cfix = _MC(fix / 2);								// 1..-1
				sfix = _MS(fix) / 20;								// horizontal compensation
				iX = centerx[i] - state * span * (cfix + sfix);	// centrum ± span
				iSizex = _s * (1 - cfix * cfix);		 			// icon resize

				//y-Achse
				fiy = piSpan * (hiy - y);					 		// 0..2pi
				cfiy = _MC(fiy / 2);								// 1..-1
				sfiy = _MS(fiy) / 20;								// horizontal compensation
				iY = centery[i] - state * span * (cfiy + sfiy);	// centrum ± span
				iSizey = _s * (1 - cfiy * cfiy);		 			// icon resize
			} else {
				iSizex = 0;
				iSizey = 0;
				//this[i].txt.text = i add "/out";
			}
			_scalex = 100 * (min + state * iSizex)/128;
			_scaley = 100 * (min + state * iSizey)/128;
			this[i]._xscale = _scalex;
			this[i]._yscale = _scaley;
			this[i]._x = iX;
			this[i]._y = iY;
			this[i].txt.text = i;

			alphax = (this[i]._width - min)/(max-min)*100;
			alphay = (this[i]._height - min)/(max-min)*100;
			this[i].mc_foto._alpha = (alphax+alphay)/2
			//_root.txt.text = this["1"].mc_foto._alpha;
			
			//maske/sichtbarkeit bunt - sw???
		}
		//tray._width = this[n]._x - this[1]._x + this[1]._width/2 + this[n]._width/2 + 2 * margin;
		//tray._x = this[1]._x - this[1]._width/2 - margin;
	}
}

Anzuschauen ist das Ganze unter:
test

Wäre prima, wenn sich das jemand einmal anschauen könnte.

Herzlichen Dank und Gruß
adrian

[X-Tender]

Ehrlich gesagt wärst du bestimmt besser drann wenn du das einfach "from scratch" selbst coden würdest, so aufwendig ist es ja nicht.
Habe allerdings nicht so die Orientierung in dem code.

[Cyprus]

Kannst du mal den fla dazu posten? Das is irgendwie einfacher, als das so trocken runterzulesen.

[adriling]

hallo, ja kein problem, hier kommt die .fla! UUps, ist zu groß zum Anhängen, hier also der Link, bitte dann unter rechte Maustaste und Ziel speichern unter runterladen.

http://www.adri.de/xxx_test/dock_tb.fla

Danke schon mal, adrian