Fenstertechnik in Flash (no PopUp!)

[rena]

Immer wieder sieht man Webseiten, deren Inhalte in Fenstern analog zu den Fenstern in den Betriebssystemen gezeigt werden. Diese lassen sich sogar veschieben, minimieren oder schließen. Ein weiteres Merkmal ist, dass das jeweils angewählte Fenster immer im Vordergrund steht.

Der Aufbau der Fenster

Wir benötigen dazu eine Filmsequenz mit dem Fensterhintergrund und drei Schaltflächen:
- die Leiste
- der Minimieren-/Maximieren-Button und
- der Schliessen-Button

Die Filmsequenz besteht aus drei Frames - in jedem Frame befindet sich eine stop()-Aktion.

Im ersten Frame ist das Fenster vollständig zu sehen.
Im zweiten Frame ist der Hintergrund gelöscht - nur die Leiste und die Buttons sind zu sehen.
Der dritte Frame ist leer.

Hinweis: Die Reihenfolge ist beliebig wählbar. Hier muß man lediglich darauf achten, zu welchem Frame die jeweiligen Buttons führen sollen. Die folgenden Scripte gelten für die oben genannte Reihenfolge.

Die Scripte auf den Schaltflächen in den einzelnen Frames der Fenster-Filmsequenz

Im ersten und zweiten Frame auf der Leiste:

PHP-Code:

on(press){
  startDrag(this,false); //ermöglicht das Verschieben dieser (this) Filmsequenz
  this.swapDepths(100); //setzt diese Filmsequenz in den Vordergrund - auf die Tiefenebene 100
}
on(release){
  stopDrag(); //stoppt das Verschieben der Filmsequenz
} 


Hinweis: mit dem Befehl swapDepths() lassen sich Filmsequenzen in ihrer Stapelfolge (Tiefe) anordnen. Diese wird entweder durch eine Zahl gekennzeichnet oder auch durch den Tausch zweier Filmsequenzen. Im zweiten Fall muß innerhalb der Klammer nicht die Nummer der Tiefenebene sondern der Instanzname der "Tausch-Filmsequenz" in Anführungszeichen angegeben werden.

Im ersten und zweiten Frame auf dem Schliessen-Button:

PHP-Code:

on(release){
  gotoAndStop(3); //bringt die Filmsequenz in den dritten, leeren Frame
} 


Im ersten Frame auf dem Minimieren-Button:

PHP-Code:

on(release){
  gotoAndStop(2); //bringt die Filmsequenz in den zweiten Frame (nur Leiste und Buttons)
} 


Im zweiten Frame auf dem Maximieren-Button:

PHP-Code:

on(release){
  gotoAndStop(1); //bringt die Filmsequenz in den ersten Frame (komplettes Fenster)
  this.swapDepths(100); //und gleichzeitig in den Vordergrund
} 


Das Erstellen mehrerer Fenster mit verschiedenen Inhalten

So vorbereitet kann die komplette Filmsequenz in der Bibliothek dupliziert werden (Menü in der Bibliothekspalette (Optionen) -> Duplizieren). In jedes der Duplikate wird nun der gewünschte Inhalt im ersten Frame der jeweiligen Filmsequenz (dort, wo das komplette Fenster zu sehen ist) hinzugefügt.

Die Anordnung auf der Bühne

Alle Filmsequenzen werden nun in der Hauptzeitleiste auf die Bühne gesetzt. Im Grunde funktioniert die Fenstertechnik nun schon. Die Fenster können an der Leiste verschoben und mit den Schaltern minimiert, maximiert und geschlossen werden. Doch wenn sie einmal zu sind, dann sind sie weg.

Die Hauptnavigation, um geschlossene Fenster zu öffnen

Um sie wieder zu "öffnen", benötigt man weitere Buttons auf der Hauptzeitleiste - die Navigation an sich.
Darüber hinaus benötigen die Filmsequenzen der Fenster Instanznamen (Bedienfeld Instanz -> Name). Hier in diesem Beispiel sind die Instanznamen "fenster_eins", "fenster_zwei" und "fenster_drei".

Die Schaltflächen der Hauptnavigation (um die Fenster zu öffnen) bekommen nun dieses Script - zum Beispiel zum Öffnen des ersten Fensters:

PHP-Code:

on(release){
  fenster_eins.gotoAndStop(1); //steuert die Filmsequenz des ersten Fensters zu Frame 1
  fenster_eins.swapDepths(100); //und setzt es gleichzeitig in den Vordergrund
} 


Analog dazu erhalten die weiteren Buttons der Hauptnavigation dasselbe Script mit den Instanznamen der anderen Fenster.
Hinweis: Liegen die Buttons der Hauptnavigation nicht auf der Hauptzeitleiste, so müssen die jeweiligen Pfade beachtet werden. Die Anweisung könnte dann zum Beispiel _root.fenster_eins.gotoAndStop(1) heißen.

Und das war es dann auch schon - Beispiel anbei.

Viel Spaß
Gruß
Rena

[rena]

defenitive hatte noch einen guten Verbesserungsvorschlag zu oben genanntem Tut.
Dieser korrigiert einen kleinen Schönheitsfehler.

Zitat von defenitive

[...]
Wenn man in deinem Tut-fla auf das dritte Fenster klickt, ist es ganz vorne... klickt man jetzt aber z.B. auf Fenster 1, legt es sich ganz nach vorne und Fenster 3 wird nach hinten getauscht... also liegt Fenster 2 auch auf einmal vor Fenster 3... sollte aber eigentlich nicht so sein...

Umgangen hab ich das Problem, in dem ich einfach nicht immer Wert 100 genommen haben, sondern eine Variable eingefügt, die bei jedem Klick automatisch erhöht wird...

Quasi im Hauptfilm:

tiefe = 1; 

Und in den einzelnen Buttons:

tiefe = tiefe+1;
mc.swapDepths(tiefe); 

[...]

Danke dafür
und Gruß
Rena