Movieclips logisch anordnen

[LaLALa]

Hi!
Ich arbeite an einer UI für Flash.Nun stapelt ja Flash von Haus aus die Untermovieclips übereinander und nicht logisch nacheinander. Deshalb suche ich nach einer Lösung das children nicht einem parent überstehen(das dann das parent verlängert wird), die children im logischen FlowLayout angeordnet werden, und es auch noch möglich ist zwischen den children in Höhe und Breite Abstände zu setzen, sowas wie padding. Geht das, und das recht elegant(also ohne an die hundert if's)?

 

[Albu]

ich verstehe nicht, was Du meinst.... mal' mal ein Bild.

 

[LaLALa]

Siehe Anhang

 

[Albu]

Du willst also so eine Art eigene Fensterverwaltung basteln mit automatischem Layout.
Das ist normalerweise kein Problem, hat doch jedes Objekt / jeder Movieclip Breiten- und Höhenangaben, die man zum berechnen von nicht überlappenden Fensterpositionen hernehmen kann. Die MCs müssen deshalb aber trotzdem einem gemeinsamen Containeer-parent untergeordnet sein, damit diese bei Verschieben des Containers (etwa durch Drag & Drop) ebenfalls verschoben werden, ohne dass Du Dich selbst darum kümmern mußt.
Beim Anlegen der Fensterelemente im Container ordnet Flash diese hinter, bzw. übereinander an, denn jeder MovieClip bekommt innerhalb des Containers eine eindeutige Tiefe / z-Index zugeordnet. Deshalb mußt Du direkt nach dem Instanzieren Deinen Layout Mechanismus anschmeissen, welcher dem neuen Fenster seinen eigentlichen Platz zuordnet.
Wenn es auch möglich sein soll, Fenster übereinander zu legen und die Reihenfolge durch anklicken zu ändern (wie z.B. bei Windows, wo eine Applikation nach vorne kommt, wenn ich sie anklicke), dann mußt Du mittels swapDepth die Tiefeninformationen ändern

 

[LaLALa]

Das ist mir ja alles klar..Sobald ein Container einen anderen apendet, startet die Funktion updateLayout die das ganze childrens-Array durchgeht und die x/y height/width neu setzt. Ich habe im prinzip dann 4 Fälle:
-das Children ist definitiv in der width größer als parents width (parent verlängern, Schleife breaken,
die Funktion neu starten da mehr Platz entsteht)
-das Children ist in seiner height die bisherigen Zeilen länger als das parent (parent verlängern)
-das Children passt in die aktuelle Zeile (halt reinsetzen, restliche Schleife überspringen)
- das Children ist zwar nicht länger als parent, passt aber nicht mehr in die Zeile(Zeilensprung, in neue Zeile setzen)

Ich habe hierfür auch schon Code, aber irgendwie verlängert er mir das parent wenn Fall 2 eintritt zu lange.
Damit du den folgenden code verstehst:
p = der Container
p.children = das aktuelle Kind
this.xmar = ein Rahmen innerhalb des parents // zur Erklärung: wir befinden uns in einer extra Klasse Layout
this.ymar = siehe tis.xmar
p.xpad = der Abstand zwischen den Children // unkonsequenterweise nicht als eigenschaft von Layout
p.ypad = der Abstand zwischen den Zeilen
this.mainy = der bisherverbrauchte Platz innerhalb des Parents samt Zeilenabstände
this.cellx = der bisherverbrauchte Platz innerhalb der Zeile
this.celly = das bishergrößte children innerhalb der Zeile

for(var i = 0; i < this.reference.children.length; i++) {
				if(i == 0) {
					this.celly = 0;
				}
				
				if(p.children[i].node._width > p.node._width - 2*p.xpad) { // if children's width is generally to long the parent have to resized; Nri!
					p.node._width = p.children[i].node._width + 2*p.xpad;
					p.children[i].node._x = p.node._x + p.xpad;
					p.children[i].node._y = p.node._y + p.ypad + this.mainy + this.celly + this.ymar;
					this.mainy = 0;
					this.celly = 0;
					this.cellx = 0;
					p.layout.updateLayout();
					break;
				}
				
				if(p.children[i].node._height > p.node._height - 2*p.ypad - this.mainy - this.ymar) { //if children's height is to long parent have to resized;
					p.node._height = 2*p.ypad + p.children[i].node._height + this.ymar + this.mainy;
					
				
					
				}
				
				if(p.children[i].node._width < p.node._width - 2*p.xpad - this.cellx) {
					trace("drei"+this.cellx);
					trace("i"+i);
					p.children[i].node._x = p.node._x + p.xpad + this.cellx;
					p.children[i].node._y = this.mainy + p.node._y + p.ypad;
					if(this.cellx + p.children[i].node._width + this.xmar < p.node._width) {
					this.cellx = this.cellx + p.children[i].node._width + this.xmar;
					}
					if(p.children[i].node._height >= this.celly) {
						this.celly = p.children[i].node._height + this.ymar;
					}
					continue;
					
				}
				if(p.children[i].node._width > p.node._width - 2*p.xpad - this.cellx) {
					trace(this.cellx);
					this.mainy = this.celly + this.mainy;
					p.children[i].node._x = p.node._x + p.xpad;
					p.children[i].node._y = p.node._y + p.ypad + this.mainy;
					this.cellx = p.children[i].node._width + this.xmar;
					this.celly = p.children[i].node._height + this.ymar;
					if(p.children[i].node._height >= this.celly) {
						this.celly = p.children[i].node._height + this.ymar;
					}
					
				}

hoffe du kannst noch folgen...

 

[LaLALa]

hier noch paar screenys der Fehler

 

[Albu]

An Bild 2 (schlecht.gif) kann man gut den Denkfehler sehen. Der einzufügende Kasten ist kleiner als die Gesamthöhe des Containers. Da er aber in der nächsten Zeile steht (was Deine Formel nicht berücksichtigt), ragt er über den Rand hinaus.
Bild 3 ist nur ein Extremfall von Bild 2. Den Fall, dass durch die lange Spalte in der ersten Zeile ein Riesen Leerraum entsteht müsstest Du sowieso extra abfangen (wenn Du ihn überhaupt nutzen willst).

 

[LaLALa]

Fall 2 wurde in 4 kopiert...und das andere Extrem tritt auf: der Container ist zu lange, siehe AnhangDer Parent-Container ist urspünglich 20 * 20, die Innenabstände 5 und die rahmenabstände 3 pixel. Nach der Funktion ist der Container 276px groß. Danke trotzdem für die Hilfe.

 

[Albu]

ich denke da hilft nur durchdebuggen und geeignete Log Ausgaben

 

[LaLALa]

Kann es mir nicht verkneifen, kurz ne Erfolgsmeldung zu schreiben. Der erste Fehler war in Fall 1 wo die Funktion komplett neu gestartet wird. Die alte Größe des parents bleibt und verursacht Konflikte. Der zweite war in Fall 2, ein Syntaxfehler. Nun wird alles ordentlich und platzsparend angeordnet.


PS: JUHU!