Deutsches Forum: Swishzone.de
Einen "Preloader" erstellen

Dies ist eine Schritt-für-Schritt Anleitung, um einen sogenannten "Preloader" zu erstellen. Sie finden das Beipiel auch im Beispiele-Menü unter "first.swi".

Ein "Preloader" ist eine sich wiederholende Animation, die erst dann fortfährt, wenn bestimmte Inhalte komplett geladen wurden. Normalerweise sind dies kleine Animationen von Texten wie z.B. "Bitte warten" oder "Film wird geladen".

1. Öffnen Sie die Datei "erster film.swi".

2.   Drücken Sie die insertscene.png Scene einfügen Schaltfläche in der Einfügen Werkzeugleiste.

3. Drücken Sie die front.png 'Ganz nach vorne' Schaltfläche in der Standard Werkzeugleiste.

4.   Wählen Sie den Scene-Bereich und ändern Sie den Namen auf "Preloader".

5. Drücken Sie auf die inserttext.png Text einfügen Schaltfläche in der Einfügen Werkzeugleiste.

6.   Wählen Sie den Text-Bereich aus und ändern Sie den Text zu "Film wird geladen..." und ändern Sie die Zeichengröße auf 20 und die Textfarbe in ein dunkles Grün.

7.   In der Zeitlinie klicken Sie auf Schritt 1. Drücken Sie auf die "Effekt einfügen" Schaltfläche und wählen Sie Einblenden aus dem Menü aus. Schließen Sie den Einstellungen-Dialog mit OK.

8.   Drücken Sie auf die "Effekt einfügen" Schaltfläche und wählen Sie Bewegen aus dem Menü aus. Schließen Sie den Einstellungen-Dialog mit OK. Wählen Sie in der Bewegung-Registerkarte unter Farbe > Nach Farbe und wählen Sie ein mittleres Grau. Schließen Sie den Einstellungen-Dialog mit OK.

9. Drücken Sie nochmal auf die "Effekt einfügen" Schaltfläche und wählen Sie Bewegen aus dem Menü aus. Schließen Sie den Einstellungen-Dialog mit OK. Wählen Sie in der Bewegung-Registerkarte unter Farbe > Nach Farbe und wählen Sie irgendeine Farbe und eine Prozentwert von 0% aus. Schließen Sie den Einstellungen-Dialog mit OK.

10.   Gehen Sie zu Schritt 35. Drücken Sie auf die "Effekt einfügen" Schaltfläche und wählen Sie Ausblenden aus dem Menü aus. Schließen Sie den Einstellungen-Dialog mit OK.

   Die Zeitlinie sollte danach in etwa so aussehen:

de-tute8_1.png

11.   Drücken Sie auf die playscene.png 'Scene abspielen' Schaltfläche. Der Text sollte einblenden, dann grau verblassen. Drücken Sie die stopmovie.png 'Anhalten' Schaltfläche, um das Abspielen zu stoppen.

12.   Wählen Sie die die "Preloader" Zeile aus. Rechtsklicken Sie auf Schritt 31 und wählen Sie "Gehe zu Schritt" aus dem Kontextmenü. Im Aktions-Bereich ändern Sie die Schritt-Nummer von 0 auf 11.

   Der Aktions-Bereich sollte danach in etwa so aussehen:

de-tute8_2.png

13.   Drücken Sie auf die playscene.png 'Scene abspielen' Schaltfläche, um die Auswirkungen der Aktion zu betrachten. Drücken Sie die stopmovie.png 'Anhalten' Schaltfläche, um das Abspielen zu stoppen.


Hinweis:
·Sie haben soeben die innere Schleife des "Preloaders" erzeugt. Nun müssen Sie dem Film noch mitteilen, daß die Animation nur solange abgespielt werden soll, bis der restliche Film geladen wurde. Die dazu nötige Aktionen sind Wenn Schritt geladen and the Gehe zu Schritt.  
·Wenn sicher der ilm beretis im Cache des Browsers befindet, dann besteht kein Anlaß diese Animation überhaupt anzuzeigen. In diesem Fall können Sie direkt zu Scene 1 springen.  


14. Wählen Sie die "Preloader" Scene aus. Rechtsklicken Sie auf Schritt 0 und wählen Sie "Wenn Schritt geladen" aus dem Kontextmenü aus. Ändern Sie die Aktion auf "Wenn Schritt 10 von Scene 3 geladen" und fügen Sie über "Aktion hinzufügen" eine "Gehe zu Schritt" Aktion an. Ändern Sie diese in "Gehe zu Schritt 0 von Scene 1".

   Der Aktions-Bereich sollte danach in etwa so aussehen:
 
de-tute8_3.png  

15.   Rechtsklicken Sie auf Schritt 30 in der "Prelaoader" Zeile in der Zeitlinie und fügen Sie eine "Wenn Schritt geladen" Aktion hinzu. Ändern Sie die Aktion in "Wenn Schritt -1 von Scene 3 geladen". Fügen Sie eine weitere "Gehe zu Schritt Aktion hinzu. Ändern Sie diese in "Gehe zu Schritt 35 von Preloader".

Hinweis: Der Schritt "-1" ist immer der letzte Schritt einer Scene. Sie stellen also sicher, daß der letzte Schritt der letzten Scene geladen wurde.

Der Aktions-Bereich sollte in etwa so aussehen:  

de-tute8_4.png  

Hinweis: Für die "Gehe zu Schritt" Aktion können Sie einen Scenen.Namen verwenden, oder einen der Platzhalter, wie z.B. _LAST_SCENE_ (für die letzte Scene des Films).

16.   Drücken Sie auf die playmovie.png 'Abspielen' Schaltfläche, um die Auswirkungen den Film zu betrachten. Da der Film lokal vorliegt, ird der Preloader übersprungen. Drücken Sie die stopmovie.png 'Anhalten' Schaltfläche, um das Abspielen zu stoppen.

17.    Speichern Sie den Film.

Weiter geht es mit dem Abschließender Export für das Web Beispiel.

(c) 2004 SWiSHzone.com Pty. Ltd.  (www.swishzone.com), Ein Service von Swishzone.de and SWiSHkaufen.de 
»Datenschutz »Impressum (c) Frozen Bytes