Dynamische Fenster
Die Nachbildung eines Fensters, wie man es aus Desktop-Umgebungen bekannter Betriebssysteme kennt, ist denkbar einfach. Lassen Sie uns einen Blick auf die Realisierung eines klassischen Fensters werfen. Vom Verschieben über das Minimieren bis hin zum Schließen wollen wir dabei auf nichts verzichten.
Zeichnen Sie in einem neuen Flashdokument ein Rechteck mit Rand. Skalieren Sie das Rechteck beispielsweise auf eine Breite von 240 sowie eine Höhe von 120 Pixeln. Markieren Sie anschließend das eingezeichnete Rechteck und gehen Sie im Menü unter „Modifizieren“ auf „In Symbol konvertieren“ oder betätigen Sie die Funktionstaste F8. Im dem darauf folgendem Dialog zum Konvertieren des Rechteckes in ein Symbol vergeben Sie einen beliebigen Namen und wählen unter „Verhalten“ die Option „Movieclip“. Verlassen Sie das Dialogfenster über die Schaltfläche „OK“. Wechseln Sie anschließend mit einem Doppelklick auf das Rechteck in den Bearbeitungsmodus des Symbols. Ziehen Sie mit einer etwas dunkleren Füllfarbe ein zweites Rechteck auf. Dieses soll später die Titelleiste des Fensters repräsentieren. Aus diesem Grund müssen Sie das Rechteck auf die gleiche Breite wie das erste Rechteck skalieren. Verwenden Sie eine ungefähre Höhe von 20 Pixeln. Legen Sie nun das Rechteck für die Titelleiste über das erste Rechteck so, dass die oberen Ecken beider Rechtecke miteinander abschließen.
Das bisherige Fenster:
Zum Simulieren des typischen Verhaltens eines Fensters wie wir es von Desktop-Umgebungen unter Windows kennen, bedarf es einiger weiterer Arbeitsschritte an unserer Titelleiste. Zunächst wollen wir unser Fenster verschiebbar machen. Wenn der Benutzer die linke Maustaste oberhalb der Titelleiste drückt und bei gedrückt gehaltener Maustaste den Cursor verschiebt, dann soll das Fenster dem Cursor folgen. Hierfür müssen Sie das obere Rechteck zunächst in ein Symbol konvertieren. Wählen Sie unter der Option „Verhalten“ den Eintrag „Schaltfläche“. Wechseln Sie nach dem Anlegen des Symbols direkt in dessen Bearbeitungsmodus. Sie sehen in der Zeitleiste die vier klassischen Zustände einer Schaltfläche. Erstellen Sie im Zustandsbild „Darüber“ mit der Funktionstaste F6 ein Schlüsselbild. Setzen Sie anschließend die Füllfarbe des Rechteckes auf einen leicht helleren Farbwert. Kehren Sie daraufhin zurück in den Bearbeitungsmodus des Fenster-Symbols. Markieren Sie die Titelleiste und rufen Sie mit der Taste F9 das Aktionen-Fenster auf. Fügen Sie folgenden ActionScript in das Fenster ein:
Durch diese wenigen Zeilen ActionScript ist unser Fenster bereits verschiebbar. Das Ergebnis können Sie direkt mit Hilfe der Tastenkombination Strg + Eingabe testen. Natürlich fehlen in der Titelleiste des Fensters die klassischen Symbole zum Minimieren und Schließen. Hierfür benötigen wir im Bearbeitungsmodus des Fenster-Symbols zwei weitere Ebenen. Benennen Sie die bestehende Ebene mit „window“. Die zweite Ebene erhält den Namen „buttons“ und die Dritte soll den Namen „action“ erhalten. Gehen Sie zunächst in die Ebene „action“ und erzeugen Sie im zweiten Bild mit F6 ein Schlüsselbild. Rufen Sie anschließend das Aktionen-Fenster auf und fügen Sie im ersten und im zweiten Bild folgende Anweisung ein:
Lassen Sie uns die Buttons zum Schließen und Minimieren einzeichnen. Erstellen Sie zu diesem Zweck ein neues Symbol mit dem Verhalten „Schaltfläche“. Zeichnen Sie im Bearbeitungsmodus des Symbols ein Viereck und zentrieren Sie dieses auf der Arbeitsbühne. Die Breite und Höhe des Vierecks muss etwas geringer als die Höhe der Titelleiste sein. Mit dem Linienwerkzeug zeichnen Sie einen horizontalen Strich im unteren Bereich des Vierecks.
Erzeugen Sie ein weiteres Symbol mit dem Verhalten „Schaltfläche“. Wiederholen Sie die Arbeitsschritte des vorherigen Symbols. Statt einen horizontalen Strich, zeichnen Sie nun jedoch ein „X“ in das Viereck ein. Wechseln Sie daraufhin in den Bearbeitungsmodus des Fenster-Symbols und gehen Sie hier in die Ebene „buttons“. Platzieren Sie nun die soeben erstellen Schaltflächen in der Titelleiste des Fensters. Rufen Sie hierfür mit Strg + L die Bibliothek auf und ziehen Sie per Drag & Drop die Symbole auf die Arbeitsbühne.
Das Fenster mit Symbolen:
Jetzt brauchen wir nur noch unsere Symbole mit Leben zu füllen. Klicken Sie auf das Symbol für Minimieren. Im Aktionen-Fenster fügen Sie folgendes ActionScript ein:
Mit der Anweisung „nextFrame()“ gehen wir in das nächste Bild, sobald der Benutzer die Schaltfläche betätigt. Im nächsten Bild ist derzeit jedoch noch nichts vorhanden. Fügen Sie in der Ebene „buttons“ sowie in der Ebene „window“ im zweiten Bild ein Schlüsselbild ein. Um das Minimieren des Fensters zu simulieren, löschen Sie im zweiten Bild der Ebene „window“ das große Rechteck. Die Ebene besteht im zweiten Bild somit nur noch aus der Titelleiste.
Natürlich soll der Benutzer das Fenster auch wieder maximieren können. Hierfür müssen wir vom zweiten Bild der Zeitleiste in das erste Bild zurückkehren. Gehen Sie in das zweite Bild und fügen Sie hier der Schaltfläche „Minimieren“ folgende Aktion hinzu:
Somit gelangen wir bei Betätigen der Schaltfläche zurück in das erste Bild. Damit der Anwender das Fenster schließen kann, fügen wir noch in beiden Bildern für die entsprechende Schaltfläche folgendes ActionScript ein:
Die Anweisung blendet das gesamte Fenster aus, indem die Sichtbarkeit des Fensters auf „false“ gesetzt wird.
Beispieldatei: Dynamische Fenster[Dynamische_Fenster.zip]
Zeichnen Sie in einem neuen Flashdokument ein Rechteck mit Rand. Skalieren Sie das Rechteck beispielsweise auf eine Breite von 240 sowie eine Höhe von 120 Pixeln. Markieren Sie anschließend das eingezeichnete Rechteck und gehen Sie im Menü unter „Modifizieren“ auf „In Symbol konvertieren“ oder betätigen Sie die Funktionstaste F8. Im dem darauf folgendem Dialog zum Konvertieren des Rechteckes in ein Symbol vergeben Sie einen beliebigen Namen und wählen unter „Verhalten“ die Option „Movieclip“. Verlassen Sie das Dialogfenster über die Schaltfläche „OK“. Wechseln Sie anschließend mit einem Doppelklick auf das Rechteck in den Bearbeitungsmodus des Symbols. Ziehen Sie mit einer etwas dunkleren Füllfarbe ein zweites Rechteck auf. Dieses soll später die Titelleiste des Fensters repräsentieren. Aus diesem Grund müssen Sie das Rechteck auf die gleiche Breite wie das erste Rechteck skalieren. Verwenden Sie eine ungefähre Höhe von 20 Pixeln. Legen Sie nun das Rechteck für die Titelleiste über das erste Rechteck so, dass die oberen Ecken beider Rechtecke miteinander abschließen.
Das bisherige Fenster:
Zum Simulieren des typischen Verhaltens eines Fensters wie wir es von Desktop-Umgebungen unter Windows kennen, bedarf es einiger weiterer Arbeitsschritte an unserer Titelleiste. Zunächst wollen wir unser Fenster verschiebbar machen. Wenn der Benutzer die linke Maustaste oberhalb der Titelleiste drückt und bei gedrückt gehaltener Maustaste den Cursor verschiebt, dann soll das Fenster dem Cursor folgen. Hierfür müssen Sie das obere Rechteck zunächst in ein Symbol konvertieren. Wählen Sie unter der Option „Verhalten“ den Eintrag „Schaltfläche“. Wechseln Sie nach dem Anlegen des Symbols direkt in dessen Bearbeitungsmodus. Sie sehen in der Zeitleiste die vier klassischen Zustände einer Schaltfläche. Erstellen Sie im Zustandsbild „Darüber“ mit der Funktionstaste F6 ein Schlüsselbild. Setzen Sie anschließend die Füllfarbe des Rechteckes auf einen leicht helleren Farbwert. Kehren Sie daraufhin zurück in den Bearbeitungsmodus des Fenster-Symbols. Markieren Sie die Titelleiste und rufen Sie mit der Taste F9 das Aktionen-Fenster auf. Fügen Sie folgenden ActionScript in das Fenster ein:
001:002:003:004:005:006:007:
on(press) { startDrag(this); } on(release) { stopDrag(); }
Durch diese wenigen Zeilen ActionScript ist unser Fenster bereits verschiebbar. Das Ergebnis können Sie direkt mit Hilfe der Tastenkombination Strg + Eingabe testen. Natürlich fehlen in der Titelleiste des Fensters die klassischen Symbole zum Minimieren und Schließen. Hierfür benötigen wir im Bearbeitungsmodus des Fenster-Symbols zwei weitere Ebenen. Benennen Sie die bestehende Ebene mit „window“. Die zweite Ebene erhält den Namen „buttons“ und die Dritte soll den Namen „action“ erhalten. Gehen Sie zunächst in die Ebene „action“ und erzeugen Sie im zweiten Bild mit F6 ein Schlüsselbild. Rufen Sie anschließend das Aktionen-Fenster auf und fügen Sie im ersten und im zweiten Bild folgende Anweisung ein:
001:
stop();
Lassen Sie uns die Buttons zum Schließen und Minimieren einzeichnen. Erstellen Sie zu diesem Zweck ein neues Symbol mit dem Verhalten „Schaltfläche“. Zeichnen Sie im Bearbeitungsmodus des Symbols ein Viereck und zentrieren Sie dieses auf der Arbeitsbühne. Die Breite und Höhe des Vierecks muss etwas geringer als die Höhe der Titelleiste sein. Mit dem Linienwerkzeug zeichnen Sie einen horizontalen Strich im unteren Bereich des Vierecks.
Erzeugen Sie ein weiteres Symbol mit dem Verhalten „Schaltfläche“. Wiederholen Sie die Arbeitsschritte des vorherigen Symbols. Statt einen horizontalen Strich, zeichnen Sie nun jedoch ein „X“ in das Viereck ein. Wechseln Sie daraufhin in den Bearbeitungsmodus des Fenster-Symbols und gehen Sie hier in die Ebene „buttons“. Platzieren Sie nun die soeben erstellen Schaltflächen in der Titelleiste des Fensters. Rufen Sie hierfür mit Strg + L die Bibliothek auf und ziehen Sie per Drag & Drop die Symbole auf die Arbeitsbühne.
Das Fenster mit Symbolen:
Jetzt brauchen wir nur noch unsere Symbole mit Leben zu füllen. Klicken Sie auf das Symbol für Minimieren. Im Aktionen-Fenster fügen Sie folgendes ActionScript ein:
001:002:003:
on (release) { nextFrame(); }
Mit der Anweisung „nextFrame()“ gehen wir in das nächste Bild, sobald der Benutzer die Schaltfläche betätigt. Im nächsten Bild ist derzeit jedoch noch nichts vorhanden. Fügen Sie in der Ebene „buttons“ sowie in der Ebene „window“ im zweiten Bild ein Schlüsselbild ein. Um das Minimieren des Fensters zu simulieren, löschen Sie im zweiten Bild der Ebene „window“ das große Rechteck. Die Ebene besteht im zweiten Bild somit nur noch aus der Titelleiste.
Natürlich soll der Benutzer das Fenster auch wieder maximieren können. Hierfür müssen wir vom zweiten Bild der Zeitleiste in das erste Bild zurückkehren. Gehen Sie in das zweite Bild und fügen Sie hier der Schaltfläche „Minimieren“ folgende Aktion hinzu:
001:002:003:
on (release) { prevFrame(); }
Somit gelangen wir bei Betätigen der Schaltfläche zurück in das erste Bild. Damit der Anwender das Fenster schließen kann, fügen wir noch in beiden Bildern für die entsprechende Schaltfläche folgendes ActionScript ein:
001:002:003:
on (release) { this._visible = false; }
Die Anweisung blendet das gesamte Fenster aus, indem die Sichtbarkeit des Fensters auf „false“ gesetzt wird.
Beispieldatei: Dynamische Fenster[Dynamische_Fenster.zip]
