Kategorien
Webdesign

Flash: Der dynamische Bilderrahmen – Teil 5

Setzen Sie diesen neutralen Player ein, der sogar mit Bildern unterschiedlicher Größe umgehen kann. Die interaktive Diashow wandert durch Mausklick von Bild zu Bild. Mit einem kleinen Timer können Sie den Film auch vollautomatisch laufen lassen. Die ersten…

Setzen Sie diesen neutralen Player ein, der sogar mit Bildern unterschiedlicher Größe umgehen kann. Die interaktive Diashow wandert durch Mausklick von Bild zu Bild. Mit einem kleinen Timer können Sie den Film auch vollautomatisch laufen lassen.

Die ersten Tester unserer Diashow haben bemängelt, dass Ihnen der Button, der zum nächsten Bild führt, erst auf den zweiten Blick aufgefallen ist. Die Funktion, dieses Weiterschalten mit der Space-Taste auslösen zu können wurde gar nicht antizipiert, weil wir ihn im Interface nicht erklärt haben.

Insofern liegt es nahe, eine kleine Routine einzubauen, mit der sich der Film zu einem bestimmten Zeitpunkt der Inaktivität des Users selbst startet. Eine solche Routine kann universell verwendet werden. Sie setzt allerdings voraus, dass der Film selbst im ersten Frame alle Parameter und Variablen so einstellt, dass er ordnungsgemäß funktioniert.

Screenshot
Der Timer spielt die Diashow automatisch ab, lässt aber den Eingriff durch den Benutzer jederzeit zu

In unserem Beispiel ist das der Fall. Die Animation zum nächsten Bild wird dadurch ausgelöst, dass die „Blende“ einen Play-Befehl bekommt und dadurch in den zweiten Teil der Animation fortschreitet. Hier wird das aktuelle Bild mit einer deckende Weissfläche versteckt und danach startet der Hauptfilm von vorne und lädt das nächste Motiv.

Erzeugen Sie auf Szene 1 eine neue Ebene. Schreiben Sie in einem statischen Textfeld den Begriff „pause“ und wandeln Sie diesen in ein MovieClip um. Klicken Sie doppelt darauf und wandeln Sie den Text in eine Schaltfläche um. Klicken Sie erneut doppelt, setzen Sie ein Schlüsselbild in den Frame „aktiv“ und zeichnen Sie ein einfaches Rechteck über den Text. Ein solches Rechteck ist zwar unsichtbar, macht es dem Benutzer aber einfacher, die Schaltfläche zu klicken, da bei Texten sonst nur die Kontur der Buchstaben auf die Maus reagiert.

Screenshot
Alle wichtigen Programmierungen liegen in Frame 1, der Rest erzeugt nur eine Schleife

Gehen Sie eine Stufe höher in das Movieclip. Erzeugen Sie eine zweite Ebene und schreiben Sie über den Pause-Button die statischen Texte „noch“ und „sekunden“ und setzen Sie dazwischen ein dynamisches Textfeld mit einer „0“. Dieses wird im Eigenschaftsinspektor an die Variable „timeout“ geknüpft.

Erzeugen Sie eine Aktions-Ebene und programmieren Sie im ersten Frame folgendes:

 if (timestart==1){
        timeout=timeout-1;
        if(timeout==0){
                eval("_root.blende"+_root.blendzahl).play();
        }
}else{
        timeout=7;
        timestart=1;
}

Erneut nutzen wir eine If-Bedingung zur Initialisierung. In der ersten Runde wird also der Wert für „timeout“ auf „7“ gesetzt. Ab dann zählt der Timer rückwärts. Wird der Wert „0“ erreicht, löst das Clip die nächste Blende aus.

Setzen Sie auf der gleichen Ebene in Frame 50 ein weiteres Schlüsselbild und lassen Sie das Clip von dort wieder in den ersten Frame zurück springen (gotoAndPlay(1);). Das entspricht in etwa einer Sekunde. Wenn Sie es genauer machen wollen, müssen Sie mit der Filmzeit (getTimer) oder mit der Systemzeit (getTime) arbeiten. Das ist aber unnötig kompliziert.

Screenshot

Das Rechteck über dem Text macht den Button bedienbarer

Jetzt wählen Sie den Pause-Button aus und geben ihm folgende Aktion:

      on (release) {
        gotoAndStop(51);
} 

Diesen Frame 51 müssen Sie nun in der Button-Ebene erzeugen. Setzen Sie ein Schlüsselbild. Öffnen Sie jetzt die Bibliothek und fertigen Sie ein Duplikat des Pause-Buttons an. Der neue Name heißt „weiter“. Tauschen Sie den Text entsprechend aus.

Klicken Sie nun in Frame 51 auf den Pause-Button und wählen Sie im Eigenschaftsinspektor den Befehl „Austauschen“. Suchen Sie den „Weiter-Button“ in der Bibliothek und klicken Sie doppelt darauf. Öffnen Sie dann das Aktionsfenster und verändern Sie den angezeigten Befehl zu:

      on (release) {
        gotoAndPlay(1);
}

Es ergibt Sinn, an dieser Stelle den Timerwert nicht zu erhöhen, da der Benutzer diese Entscheidung ähnlich benutzen wird, wie den direkten Link zum „nächsten Bild“. Damit die Anzeige nicht flackert, setzen Sie in der Ebene mit den Textfeldern ein einfaches Bild in Frame 51. Keheren Sie dann zurück zu Szene 1 und geben Sie dem Clip den Instanznamen „timeout“.

Nun müssen Sie noch zwei kleine Veränderungen am Hauptfilm vornehmen. Der Button zum „nächsten Bild“ kann auch geklickt werden, wenn sich der Timer im Pause-Modus befindet. Insofern muss auch er den Timer wieder starten. Ergänzen Sie also die rote Zeile:

      on (release, keyPress "<Space>") {
        eval("blende"+blendzahl).play();
        timeout.gotoAndPlay(1);
} 

Und schließlich muss der Timerwert immer dann auf den Ausgangswert gesetzt werden, wenn ein neues Bild geladen wurde. Eine gute Stelle für eine solche Programmierung befindet sich auf der Aktionsebene in Frame 12. Auch hier ergänzen Sie die rote Zeile.

      if(lader_clip.platzhalter.getBytesLoaded()<lader_clip.platzhalter.getBytesTotal()){

        gotoAndPlay(2);
}else{
        timeout.timeout=7;
        play();
}
var ladeanzeige=lader_clip.platzhalter.getBytesLoaded();
var clipanzeige=lader_clip.platzhalter.getBytesTotal();

Von Frank Puscher

Autor der Fachbücher "Leitfaden Web-Usability", "Flash MX-Das Kochbuch" und "Die Tricks der Internet Künstler". Frank Puscher ist nicht nur ein angesehener Autor, der für zahlreiche Fachzeitschriften tätig ist, er ist auch als Schulungsleiter und Berater erfolgreich.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.