Share
In diesem Lernprogramm erstellen wir eine SWF-Datei, die sich selbst vorlädt, was bedeutet, dass sich der Preloader und der Inhalt in derselben Datei befinden. Wir gehen vor, wie man die Dinge richtig macht und den Fallen aus dem Weg geht.
Die Idee eines einzelnen SWF-Vorladens besteht darin, dass Sie ein Flash-Objekt haben, das sich selbst vorlädt. Das bedeutet, dass der Preloader mit seinen zugehörigen Funktionen und Assets in dieselbe SWF-Datei eingebettet ist wie der gesamte Flash-Film oder die gesamte Anwendung.
Wir beginnen dieses Tutorial mit einer gewissen Theorie und beenden es mit der Erstellung einer FLA zusammen mit einer Preloader-Klasse, die Sie in zukünftigen Projekten verwenden können. Im Verlauf des Tutorials werden gängige Fallstricke und wichtige Überlegungen besprochen.
Jetzt, da Activetuts + sich auf Dokumentenklassen konzentriert und Dinge im Allgemeinen so weit wie möglich in Klassendateien aufbewahrt, werden wir dies im praktischen Teil dieses Lernprogramms tun. Lesen Sie den Schnelltipp: So verwenden Sie eine Dokumentenklasse in Flash, wenn Sie die Grundlagen erlernen möchten.
Stellen Sie sicher, dass Sie über eine aktualisierte Version von Flash CS3 oder Flash CS4 verfügen. Ich weiß mit Sicherheit, dass ein späteres CS4-Update die Art und Weise verändert hat, in der Klassen geladen werden, und das kann hier den Unterschied ausmachen!
Ich gebe gleich zu, dass dieses Tutorial für dieses enge Thema recht langwierig ist, aber es enthält alles, was Sie wissen müssen, also schnallen Sie sich an und machen wir uns daran!
Die Idee eines Preloaders liegt auf der Hand: Sie möchten sicherstellen, dass der Benutzer visuelles Feedback erhält, dass das Flash-Objekt geladen wird. Das Einbetten einer großen Flash-Datei, deren Laden 10 Sekunden dauert, kann den Unterschied zwischen Benutzern bedeuten, die die Website verlassen oder verlassen, falls der Preloader den Benutzer nicht auffordert, sich festzuhalten.
Beim Erstellen von Flash-Dateien, die sich selbst vorab laden lassen, treten einige Probleme und Probleme auf. Es gibt andere Vorabladetechniken, die sehr einfach zusammengesetzt werden können, z. B. indem eine SWF-Datei eine andere vorlädt und sie nach dem Laden der Bühne hinzufügt.
Wieso sich die Mühe machen? Nun, es gibt Situationen, in denen Sie keine Wahl haben.
Zum Beispiel möchten Sie vielleicht Flash-Spiele erstellen, von denen Sie hoffen, dass sie auf so viele Flash-Spieleportale wie möglich verbreitet werden. Die meisten dieser Portale unterstützen Spiele nur in Form einer einzigen SWF-Datei, so dass Sie keine andere Wahl haben, als sicherzustellen, dass Ihr Spiel von sich aus gut vorinstalliert wird.
Abgesehen von solchen offensichtlichen Beispielen gibt es das Argument, ein fertiges Produkt in nur einer Datei zu haben, was die Verwaltung erleichtert.
Wenn Ihr Browser auf ein Flash-Objekt stößt und mit dem Laden beginnt, beginnt es am Anfang der Zeitleiste. Die Bilder werden nacheinander geladen. Sobald das erste Bild geladen ist, kann es angezeigt werden.
Unser Ansatz hier ist, einen Preloader in das erste Bild zu setzen, damit der Benutzer etwas passiert, während der Browser den Rest der Datei weiterhin lädt. Wir schreiben Code, um den Gesamtfortschritt zu überprüfen, und wenn der Vorgang abgeschlossen ist, fahren wir mit dem Hauptinhalt der Datei fort.
Die Herausforderung besteht darin, die Größe des ersten Frames auf ein Minimum zu beschränken. Wenn Sie Code und Sounds im ersten Frame aufstocken, ist möglicherweise ein Preloader vorhanden, der erst sichtbar ist, nachdem Sie vielleicht 60% des Films geladen haben.
Ein guter Tipp bei der Verwendung eines Prozentwertzählers, der Zahlen anzeigt, ist die Verwendung einer Schrift, die eine kleine Bytegröße hat. Aber das bringt dich nur so weit. Leider müssen wir viel härter arbeiten, um die Dinge auf unsere Art zu haben!
Es wurde schon oft gesagt und es lohnt sich noch einmal zu sagen:
Preloader, die schwierigste der einfachsten Aufgaben in Flash…
Es gibt eine Reihe von Faktoren, die sich darauf auswirken, was in welchen Rahmen eingefügt wird, wie zum Beispiel:
Das Hauptproblem, dem wir gegenüberstehen, ist steuern, was auf Bild eins endet, da, wie oben erwähnt, alles auf Bild eins geladen werden muss, bevor der Preloader angezeigt werden kann.
Ansonsten gibt es Unterschiede zwischen der Funktionsweise von Flash CS3 und CS4. Im nächsten Schritt werde ich eine Reihe gründlich recherchierter Aussagen treffen, auf die Sie bei Bedarf zurückgreifen können. Es ist eine großartige Ressource, wenn Sie schnell das Preloading behandeln möchten, um herauszufinden, warum es sich nicht so verhält, wie Sie es erwarten.
Ich werde versuchen, die Aussagen etwas greifbarer zu machen, indem ich auf TweenLite Bezug nehme, eine großartige Tweening-Bibliothek von Jack Doyle auf greensock.com. Wir werden TweenLite im praktischen Teil dieses Tutorials verwenden, damit dies am sinnvollsten ist.
Diese Anweisungen gelten für Flash CS3 und CS4, sofern nicht anders angegeben. "TweenLite importieren" bedeutet im Grunde "TweenLite importieren und verwenden" - die Ergebnisse können abweichen, wenn Sie den Code nicht tatsächlich verwenden, da der Flash-Compiler nicht verwendete Importe ignoriert. Die einfache Eingabe einer Importanweisung ist nicht gleichbedeutend mit dem Code.
Die nächsten drei Anweisungen beziehen sich auf das Szenario, in dem Sie über einen MovieClip verfügen, der für ActionScript mit einer externen Klassendatei exportiert wird, die wiederum TweenLite in die Klassendatei importiert.
Die nächsten drei Anweisungen beziehen sich auf das Szenario, in dem Sie über einen MovieClip verfügen, der für ActionScript als "CustomClass" exportiert wird, entweder mit einer externen Klassendatei oder nicht. Er wird instanziiert und von einem MovieClip, der auf der Timeline platziert wird, zur Bühne hinzugefügt wie der MovieClip aus den vorherigen drei Anweisungen.) Diese CustomClass ist nur instanziiert und auf der Hauptzeitleiste noch nicht vorhanden.
Betrachten wir bei all diesen Einschränkungen zumindest diese positive Aussage:
Hier ist ein wirklich interessanter:
Ja, das hast du richtig gelesen. Ich denke, es ist anzunehmen, dass Adobe ein Upgrade auf CS4 wünscht. Was tun, wenn Sie mit CS3 festsitzen und das Gras auf der anderen Seite grüner ist? Ich erzähle es Ihnen im nächsten Schritt.
Dieser ganze Schritt ist nur für diejenigen gedacht, die Flash CS3 verwenden.
Wenn Sie alle Anweisungen des vorherigen Schritts durchlesen, werden Sie feststellen, dass viele MovieClips für ActionScript exportiert wurden. Diese müssen alle in Bild eins geladen werden oder sind nicht verfügbar. Glücklicherweise gingen diese Aussagen davon aus, dass diese Vermögenswerte niemals auf der Hauptzeitlinie platziert wurden, was zufällig unsere Lösung ist! (Dies ist auch die einzige Möglichkeit, Sounds anders als in Bild eins zu laden ...)
So wird es gemacht:
Dadurch werden alle Ihre Assets im zweiten Frame geladen. Die Lösung ist ein bisschen kitschig, aber es ist nicht so grob wie der Kauf neuer Software für dieses spezielle Problem.
(Kudos an 8bitrocket für diesen Trick!)
Eine Sache, die ich erwähnen sollte, bevor wir mit der Arbeit beginnen, ist der Bandbreiten-Profiler. Dies ist ein wichtiges Werkzeug, um Probleme beim Vorladen zu lösen. Wenn Sie einen Film in der Vorschau anzeigen, können Sie nach oben gehen und dann den Bandbreiten-Profiler auswählen. Oder drücken Sie einfach Strg + B.
Hier können Sie zwischen Frame-für-Frame-Diagrammen und Streaming-Diagrammen wechseln. Sie können das Herunterladen des Films auch mit einer Verbindungsgeschwindigkeit Ihrer Wahl simulieren, indem Sie ihn entweder aus dem Menü Ansicht auswählen oder erneut Strg + Eingabetaste drücken (ändern Sie die simulierte Download-Geschwindigkeit im Untermenü Ansicht> Download-Einstellungen). Dies ist wichtig, um herauszufinden, wie Ihr Preloader aussehen wird, ohne den Aufwand des Hochladens und der Beschränkung der Bandbreite zu durchlaufen. Für diesen speziellen Fall kann ich Firefox Throttle jedoch empfehlen.
Neben dem sehr nützlichen Tool, dem Bandbreiten-Profiler, gibt es die Möglichkeit, einen Größenbericht zu erstellen. Drücken Sie Strg + Umschalt + F12, um das Dialogfeld Veröffentlichungseinstellungen zu öffnen.
Gehen Sie zur Registerkarte Flash und im Abschnitt "Erweitert" befindet sich ein Kontrollkästchen mit der Bezeichnung "Größenbericht erstellen". Wenn dieses Kontrollkästchen aktiviert ist, wird in der Vorschau oder Veröffentlichung Ihres Films eine Textdatei im selben Ordner wie Ihre FLA-Datei erstellt, die nützliche Informationen zu den Teilen enthält, aus denen sich die Gesamtgröße des Films zusammensetzt.
Endlich können wir mit einem in sich geschlossenen Preloader einen Flash-Film erstellen!
Wir werden eine "Drei-Frame-Vorspannung" -Technik anwenden. Im ersten Frame legen wir einen Preloader-MovieClip mit seiner eigenen Klasse "Preloader" an. Im zweiten Frame laden wir alle Klassen und im dritten Frame laden wir den Inhalt und zeigen ihn an. Wir platzieren den Inhalt in einem MovieClip mit dem Namen Application mit der zugehörigen Klasse "Application". Dies ist, wo das Fleisch der Anwendung geht.
Erstellen Sie zunächst ein neues AS3-Dokument. Ich mache es 600x400px, dunkelgrauer Hintergrund, 24 FPS. Diese Einstellungen spielen jedoch keine Rolle.
Legen Sie die Dokumentenklasse auf Main fest und klicken Sie auf OK.
Gehen Sie zu Datei> Veröffentlichungseinstellungen, auf die Registerkarte Flash und dann zu den ActionScript 3.0-Einstellungen. Geben Sie "Frame 2" in das Feld "Export Klassen in Frame" ein.
Natürlich beeinflusst das Design eines Preloaders die Funktion nicht. Ich gebe Schritt für Schritt Anweisungen, aber ich kann diese Teile überspringen und auf eigene Faust vorgehen, wenn Sie dies wünschen. Notieren Sie sich einfach, auf welche Teile ich mich später im Code beziehe.
Zeichnen Sie ein Rechteck mit abgerundeten Ecken und geben Sie ihm einen blauen Verlauf. Dann verwandeln Sie es in ein MovieClip-Symbol und nennen Sie es Preloader. Wählen Sie diese Option aus, um sie für ActionScript zu exportieren, und rufen Sie die Klasse Preloader auf.
Zeichnen Sie in diesem neuen MovieClip ein neues Rechteck mit abgerundeten Ecken mit einem grauen Verlauf, wandeln Sie es in einen anderen MovieClip um und geben Sie ihm einen Instanznamen von progressArea.
Passen Sie das Ebenenlayout an, das ich im Bild oben beschrieben habe. Machen Sie anschließend ein Duplikat der letzten Form und platzieren Sie sie in der Statusleiste der Fortschrittsanzeige oberhalb des Fortschrittsbereichs. Vergeben Sie einen hellblauen Verlauf, verwandeln Sie ihn in einen MovieClip und geben Sie ihm den Instanznamen progressBar. Aktivieren Sie die Hilfslinien für die 9-Slice-Skalierung, und achten Sie darauf, dass die linke und rechte runde Kante außen bleiben.
Erstellen Sie schließlich ein dynamisches Textfeld mit dem Instanznamen percentText. Machen Sie den Text rechtsbündig. Auf diese Weise wird sich das Prozentzeichen niemals bewegen, nur die Zahlen (die sich trotzdem ändern). Gehen Sie zum Einbetten von Zeichen und vergewissern Sie sich, dass Sie Zahlen und das Prozentzeichen (%) einbetten. Um einen wirklich kleinen Preloader zu erstellen, verwende ich einen kleinen Pixelfont namens Pixel Mix von dafont.com. Ich schenke es auch blau, nur weil ich kann.
Stellen Sie sicher, dass der gesamte Preloader-MovieClip im ersten Frame platziert ist und den Instanznamen Preloader erhält. Erstellen Sie eine neue Ebene mit dem Namen "AS" und setzen Sie einen Stop (). im ersten Frame. Behalten Sie den Preloader in seiner eigenen Ebene "Preloader". Erstellen Sie eine weitere Ebene mit dem Namen "Application". Hier werden wir am Ende den Hauptinhalt behalten.
Erstellen Sie eine neue ActionScript-Datei und speichern Sie sie im selben Verzeichnis wie Ihre FLA-Datei. Nennen Sie es Main.as:
package import flash.display.MovieClip; import flash.events.Event; public class Main erweitert MovieClip public function Main () preloader.addEventListener (Event.COMPLETE, onPreloaderComplete); preloader.setLoaderInfo (loaderInfo); private Funktion onPreloaderComplete (e: Event): void gotoAndStop (3);
Erstellen Sie eine neue ActionScript-Datei und speichern Sie sie im selben Verzeichnis wie Preloader.as:
package import flash.display.LoaderInfo; import flash.display.MovieClip; import flash.events.Event; import flash.events.ProgressEvent; public class Preloader erweitert MovieClip public function Preloader () öffentliche Funktion setLoaderInfo (ldrInf: LoaderInfo): void ldrInf.addEventListener (ProgressEvent.PROGRESS, onProgress); ldrInf.addEventListener (Event.COMPLETE, onComplete); private Funktion onProgress (e: ProgressEvent): void var percent: int = Math.round (e.bytesLoaded / e.bytesTotal * 100); progressBar.width = Prozent / 100 * progressArea.width; percentText.text = Prozent + "%"; private Funktion onComplete (e: Event): void dispatchEvent (e);
Also, was machen diese beiden Klassen??
In Mains Konstruktor rufen wir die benutzerdefinierte setLoaderInfo () - Methode unseres Preloaders auf und übergeben das mit Main verknüpfte LoaderInfo-Objekt.
Preloader empfängt dieses Objekt und fügt ihm zwei Ereignis-Listener hinzu. Das ProgressEvent löst die onProgress-Funktion aus, in der wir den Prozentsatz der geladenen Bytes im Vergleich zu den insgesamt zu ladenden Bytes berechnen. Der Prozentsatz wird verwendet, um die Breite der Fortschrittsleiste und den Text unseres Textfelds festzulegen.
Das komplette Ereignis wird einfach zurück nach Main geschickt, wodurch die Hauptzeitleiste beim Empfang des Ereignisses zu Bild drei gesprungen wird.
Damit der Preloader deutlich funktioniert, füge ich ein schönes Makrofoto einer Katze namens Runa hinzu, die von einem Freund von mir aufgenommen wurde. Sie finden das Bild in den Quelldateien dieses Lernprogramms. Ich habe die Bitmap importiert und in einen MovieClip namens "Cat" umgewandelt..
Fühlen Sie sich frei, das von Ihnen passende Bild zu verwenden. Geben Sie dem Clip den Instanznamen "cat"..
Wie Sie auf dem Screenshot oben sehen können, habe ich den Cat MovieClip in Bild 3 in der Anwendungsebene platziert. Nehmen Sie den MovieClip, den Sie erstellt haben (Katze oder keine Katze), und drücken Sie erneut F8, um ihn in einem neuen MovieClip zu verschachteln, den Sie Application nennen. Exportieren Sie dies für ActionScript als Anwendung.
Erstellen Sie die Application-Klasse, indem Sie eine neue AS-Datei starten und als "Application.as" speichern. Lassen Sie die Application-Klasse so aussehen:
package import com.greensock.TweenLite; import com.greensock.easing.Sine; import flash.display.MovieClip; public class Application erweitert MovieClip public function Application () TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, ease: Sine.easeInOut); private Funktion tweenBack (): void TweenLite.to (cat, 3, scaleX: 1, scaleY: 1, onComplete: resTween, ease: Sine.easeInOut); private Funktion reTween (): void TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, ease: Sine.easeInOut);
Dadurch wird die Katze unbegrenzt ein- und ausgehen, sodass Sie sich immer an die Details ihres Nasenfells erinnern können. Wie diese Klasse funktioniert, ist nicht wichtig, was ist Wichtig ist, dass wir TweenLite importieren und verwenden, um sicherzustellen, dass es nach dem Export ein Teil der SWF-Datei ist.
Gehen wir noch einmal für eine Minute zurück zur Schulbank.
Dieser Film lässt sich gut in CS4 kompilieren. Der Application MovieClip ist so konfiguriert, dass er in Bild 2 exportiert wird, sofern Sie ihn nicht geändert haben. Wenn Sie es geändert haben, stellen Sie möglicherweise etwas Merkwürdiges fest. Mehr dazu im nächsten Schritt.
Wenn Sie mit CS3 arbeiten, ist diese Einstellung wirklich wichtig. Sie müssen gehen und sicherstellen, dass Sie das Kontrollkästchen "In erstes Bild exportieren" in den Eigenschaften des Application MovieClip deaktivieren, andernfalls wird alles im ersten Bild geladen!
Das ist nicht das einzige Problem. Wenn Sie versuchen, zu kompilieren, wird ein 1046-Typfehler angezeigt, der besagt, dass Sie nicht den Typ TextField zur Verfügung haben. CS3 macht die Sache also ein bisschen anders. Was ist los? Nun, Sie versuchen, ein TextField im Preloader MovieClip zu verwenden, aber Sie haben es nicht importiert. In CS4 wird dies automatisch für Sie behandelt, jedoch nicht in CS3.
Zum Glück ist die Lösung einfach, fügen Sie einfach Folgendes hinzu:
import flash.text.TextField;
zu Ihrer Preloader-Klasse, und Sie sind fertig.
Einige von Ihnen haben vielleicht schon gedacht, dass ich Sprite für meine Preloader-Klasse anstelle von MovieClip hätte erweitern sollen. Nun, das ist der Grund, warum ich das nicht getan habe. Ich wollte bis zu diesem Punkt warten, um es zur Sprache zu bringen. Da das Preloader-Symbol sowohl "ProgressArea" als auch "ProgressBar" enthält, die beide MovieClips sind, hätten Sie den gleichen 1046-Typfehler erhalten.
Die gleiche Lösung ist natürlich auch hier möglich. Tatsächlich sollten Sie jetzt den Preloader so ändern, dass Sprite anstelle von MovieClip erweitert wird. Wenn Sie CS3 verwenden, müssen Sie auch die Sprite-Klasse in die Preloader-Klasse importieren.
Ich habe im letzten Schritt ein seltsames Ereignis erwähnt. Wenn Sie das Kontrollkästchen "Export in Bild 2" deaktivieren und einen simulierten Download ausführen, wird der Preloader ausgeblendet, es sei denn, Sie haben den Keyframe des Preloaders auf das zweite Bild erweitert.
Was passiert also wirklich? Einfach gesagt, der erste Halt (); Aussage zählt nicht. Wie ist das für eine offensichtliche Arbeitsablaufplanung? Beachten Sie Folgendes, wenn Sie im ersten Frame nach dem Stop () eine Trace-Anweisung einfügen. anrufen, es verfolgt. Wichtig: Beachten Sie, dass sich dieses Problem nur dann zeigt, wenn wir den Download simulieren!
Die Lektion, die wir hier gelernt haben, ist Vertrauen Sie dem simulierten Download nicht! Es wird nicht genau angezeigt, wie Dinge geladen werden und funktionieren. Sie können einfach den Stop halten (); und Preloader im ersten Frame, und Sie werden mit der Bereitstellung zufrieden sein. Die Vorschau kann jedoch schwierig sein, es sei denn, Sie haben Application für den Export in Bild 2 festgelegt. Dies gilt nur für dieses spezielle Szenario.
In CS3 müssen Sie das Export-Kästchen im Application MovieClip deaktivieren, andernfalls wird es im ersten Frame geladen. Aber wenn Sie das tun, stoßen Sie auf dieses Problem. Fahren Sie also fort und verlängern Sie den Preloader auf den zweiten Frame.
Machen Sie eine Vorschau des Films. Führe einen simulierten Download mit niedriger Geschwindigkeit aus und genieße den meisterhaften * Preloader (* meisterhaft gilt nur, wenn du meine Anweisungen befolgt hast).
Wenn Sie sich das Frame-by-Frame-Diagramm oder einen Bericht über die generierte Größe anschauen, wird der Code im zweiten Frame geladen. Das erste Bild ist nur 4 KB groß und besteht aus der Preloader-Klasse und den eingebetteten Schriftzeichen. Nun, 4kb ist ziemlich erschwinglich, was die Wartezeit angeht, bevor der Preloader angezeigt wird?
In CS3 werden möglicherweise unterschiedliche Größen angezeigt, und Sie werden definitiv unterschiedliche Größen mit unterschiedlichen Schriftarten sehen. Oder Katzen.
Möglicherweise haben Sie die Idee, dass Sie TweenLite verwenden möchten, um den Preloader durch Tweening des Alphas auf 0 auszublenden - aber Sie möchten TweenLite nicht im ersten Frame laden, da dadurch der anfängliche Download um weitere 8 KB erhöht wird.
Es gibt mehrere Möglichkeiten, dies zu erreichen, und wir werden es lösen, indem wir im dritten Frame einen MovieClip haben, der den Preloader erfasst und ihn zwingt. Wenn Sie fertig sind, gelangen Sie zum vierten Frame, in den wir die Anwendung verschoben haben.
Der Grund für das Einfügen in das dritte Bild ist, dass wir es nicht in das zweite Bild einfügen können, ohne dass TweenLite im ersten Bild geladen wird.
Jetzt entfernen wir uns von der standardmäßigen Drei-Frame-Vorspannungstechnik.
Fügen Sie eine neue Ebene mit dem Namen "Preloader catcher" hinzu. Stellen Sie sicher, dass Sie stop () setzen. Ruft die Bilder eins, zwei und drei auf. Dadurch wird verhindert, dass die Vorschau beim Simulieren eines Downloads beeinträchtigt wird, wie bereits erwähnt.
Fahren Sie fort und verschieben Sie die Anwendung in den vierten Frame sowie den Preloader in den dritten Frame.
Stellen Sie sicher, dass sich im dritten Frame der Preloader-Catcher-Ebene ein Keyframe befindet. Gehe zu diesem Rahmen, zeichne eine kleine Form und lass das Alpha der Füllfarbe auf 0% setzen. Dies soll ein unsichtbarer MovieClip sein. Verwandeln Sie es in ein MovieClip-Symbol namens PreloaderCatcher oder ähnliches.
Exportieren Sie den MovieClip als PreloaderCatcher. Wenn Sie CS4 verwenden, ist es egal, ob Sie es für Frame 2 exportieren oder nicht, da es in diesem Frame auf jeden Fall geladen wird. Nun, es ändert sich eine Sache, erinnerst du dich? Ob das oder nicht? gestalten wird in Frame 2 geladen. Im Wesentlichen spielt es keine Rolle, wenn man die nahezu nicht vorhandene Dateigröße für diese Form berücksichtigt. Sie können es aber auch aus guten Gewohnheiten deaktivieren.
Erstellen Sie eine neue Klassendatei mit dem Namen PreloaderCatcher.as:
Accentsconagua
package import com.greensock.TweenLite; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; Preloader importieren; public class PreloaderCatcher erweitert Sprite public function PreloaderCatcher () addEventListener (Event.ADDED_TO_STAGE, onAdded); private Funktion onAdded (e: Event): void removeEventListener (Event.ADDED_TO_STAGE, onAdded); var preloader: Sprite = MovieClip (übergeordnet) .getChildByName ("preloader") als Sprite; TweenLite.to (preloader, 0.5, alpha: 0, onComplete: function (): void MovieClip (übergeordnet)) .nextFrame ();; Wie Sie sehen, funktioniert diese Klasse, indem Sie zunächst den Preloader abrufen, indem Sie das übergeordnete Element als Sprite umwandeln und getChildByName ("Preloader") aufrufen, wobei Preloader der Instanzname ist. Der Preloader ist auch ein Sprite, dann wird er mit TweenLite ausgeblendet.
Wenn das Tweening abgeschlossen ist, wandelt die onComplete-Funktion in TweenLite das übergeordnete Element als MovieClip um, sodass die nextFrame-Methode aufgerufen werden kann.
Wie ich bereits sagte, haben wir uns jetzt von der Vorabladetechnik mit drei Bildern entfernt. Das ist an sich keine Blasphemie, aber ich bin sicher, einige von Ihnen fragen sich, warum wir das getan haben. Stattdessen hätten wir das Preloader-Tweening im Application-Clip erledigen können…
In diesem Fall haben Sie vollkommen recht! Ich habe hier vier Frames verwendet, um Ihnen zu zeigen, wie das geht, während Sie die Dinge voneinander trennen. Tweening des Preloader; Gehört das zum Preloader-Teil oder zum Anwendungsteil? Preloader definitiv, aber in diesem Fall wollten wir nicht, dass er im ersten Frame geladen wird. Daher landen wir mit dieser zusätzlichen "catcher" -Klasse.
Denken Sie daran, dass dies alles optional ist. Wenn Sie alles wissen, können Sie leicht entscheiden, was Ihre Situation erfordert.
In Schritt 7 habe ich Ihnen über die Probleme beim Laden von Assets in CS3 berichtet. Da sich dieses Lernprogramm an beide Benutzer von CS3 und CS4 richtet, verwenden wir den kleinsten gemeinsamen Nenner und verwenden den AssetHolder-Ansatz. Wenn Sie CS4 verwenden, können Sie die nächsten Schritte auf die gleiche Art und Weise ausführen und es funktioniert genauso oder Sie können den AssetHolder-Ansatz überspringen.
Beginnen Sie mit dem Importieren des Sounds "music.wav" aus den Quelldateien in Ihre FLA.
Gehen Sie rein und exportieren Sie es für ActionScript. Stellen Sie sicher, dass Sie das Kontrollkästchen "In erstes Bild exportieren" in CS3 deaktivieren. Für CS4 macht das keinen großen Unterschied. Ich verwende Flash CS4, von dem Sie wahrscheinlich bereits erfahren haben, dass die Screenshots das CS4-Dialogfeld zeigen. Wenn Sie möchten, können Sie von der Standard-MP3-Komprimierung zu etwas Angenehmerem wechseln. Auf diese Weise klingt es nicht schrecklich.
Lassen Sie uns einige weitere Schritte durchgehen, indem Sie dem Film etwas Text hinzufügen und alles in einen AssetHolder-MovieClip einfügen!
Drücken Sie Strg + F8, um ein neues MovieClip-Symbol zu erstellen. Nennen Sie es TextHo
