Adobe Flash CC Pro & ActionScript 3

Transkript

1 webmasters press Frank Schad Adobe Flash CC Pro & ActionScript 3 Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm

2

3 webmasters press Frank Schad Adobe Flash CC Pro & ActionScript 3 Art.-Nr Version vom Autor: Frank Schad webmasters akademie Nürnberg GmbH, Nürnberg, Germany Das vorliegende Schulungsskript ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung der webmasters akademie Nürnberg GmbH urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen sowie für die Verwendung in Schulungsveranstaltungen. Die Informationen in diesem Schulungsskript wurden mit größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren und Herausgeber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und deren Folgen.

4

5 Inhalt 5 Inhalt Einführung Movieclip-Steuerung Methoden für Movieclips Die Anzeigeliste: Objekthierarchie in ActionScript Eigenschaften von Movieclips Bedingte Anweisungen Fehlersuche Mausverfolgung Aktuelle Framenummer auslesen Movieclip-Ereignisse Variablen und Datentypen Anlegen von Variablen Variablen Werte zuweisen Datentypen Mit Text arbeiten Dynamische Textfelder Texte dynamisch generieren Scrollpfeile für Textfelder Eingabetext Das Math-Objekt Verwendung des Math-Objekts Runden von Zahlen Zufallsgenerator... 57

6 6 Inhalt 5 Drag & Drop Einfaches Drag & Drop Ziehbereich einschränken Kollisionstest hittestobject() hittestpoint() Das Sound-Objekt Sounds verknüpfen Sound instanzieren Sounds starten und anhalten Soundüberlagerungen verhindern Fortschrittsanzeige Lautstärkeregler Externe Filme laden Laden eines Films Film wieder entladen Preloader Programmierung eines Spiels Vorbereitung des Spiels Tastatursteuerung Gedrückte Tasten mit Variablen abfragen Schmetterling bewegen Tempo in Variable auslagern Rotation hinzufügen Verhindern, dass der Schmetterling die Bühne verlassen kann Textfelder erzeugen Movieclip-Instanzen dynamisch erzeugen Movieclip-Instanzen steuern Zufallsgenerator Movieclips über die Bühne bewegen... 91

7 Inhalt Movieclips von der Bühne entfernen Festlegen der Framenummer Sound abspielen Timer einbauen Spiel beenden...96 Lösungen Index...104

8 74 Externe Filme laden Externe Filme laden In dieser Lektion lernen Sie: hh hh Flash-Inhalte in externe Dateien auszulagern. einen Preloader mit Fortschrittsanzeige zu programmieren. Bis jetzt haben wir immer alle Funktionalität in einem einzigen Flash-Film untergebracht. Bei umfangreichen Projekten hat dies jedoch den Nachteil, dass alle Bestandteile des Films gleich zu Anfang geladen werden müssen selbst wenn sie gar nicht sofort benötigt werden. Sie können in Flash Teile Ihres Projekts in externe SWF-Dateien auslagern. In diesem Fall enthält die Haupt-Datei, die im Browser geladen wird, lediglich die Elemente, die beim Filmstart angezeigt werden sollen. Die restlichen Elemente werden erst dann nachgeladen, wenn sie tatsächlich benötigt werden. hauptfilm.swf film_2.swf film_3.swf Abb. 12: Externe SWF-Dateien werden zur Laufzeit in den Hauptfilm geladen 7.1 Laden eines Films Das Laden externer Filme geschieht über die Klasse Loader. Dies ist sozusagen Ihre unsichtbare»leinwand«, auf die die externen Filme»projiziert«werden. Davon müssen Sie zunächst eine Instanz erstellen: var leinwand:loader = new Loader(); Danach können Sie die URL einer SWF-Datei mit der Methode load() in das Objekt laden. Die URL selbst ist ein URLRequest-Objekt:

9 Laden eines Films 75 var leinwand:loader = new Loader(); leinwand.load(new URLRequest("externe_datei.swf")); In Klammern steht die Adresse des zu ladenden Films. Sie muss in Anführungszeichen stehen, da es sich dabei um einen String handelt. Sie können relative oder absolute Pfadangaben verwenden. Die Syntax ist dabei dieselbe wie in HTML. Die externen Dateien müssen SWF-Dateien sein mit FLA-Dateien funktioniert das Laden natürlich nicht! f Zuletzt müssen Sie mit addchild() (etwa»füge untergeordnetes Element hinzu«) noch dafür sorgen, dass das geladene Objekt in die aktive Anzeigeliste aufgenommen, also auf der Bühne angezeigt wird: var leinwand:loader = new Loader(); leinwand.load(new URLRequest("externe_datei.swf")); addchild(leinwand); Übung Erstellen Sie auf Ihrem System (z. B. auf dem Desktop) einen neuen Ordner und nennen Sie ihn externe_dateien. 2. Öffnen Sie die datei tasse.fla aus Übung 9 und veröffentlichen Sie sie als SWF. Diesen Film wollen wir in eine neue Datei laden. 3. Kopieren Sie die exportierte SWF-Datei in den eben erstellten Ordner externe_dateien. 4. Erstellen Sie eine neue Flash-Datei, Bühnengröße 700 x 350 px. 5. Platzieren Sie dort einen beliebigen Button auf der Bühne und nennen Sie ihn laden_btn. 6. Speichern Sie die Datei als loader.fla im selben Ordner wie die Datei tasse.swf. 7. Erstellen Sie in der Datei loader.fla eine neue Ebene für die Scripts und erstellen Sie dort ein neues Loader-Objekt: var leinwand:loader = new Loader(); 8. Nun folgt der Event-Listener für den Button: laden_btn.addeventlistener(mouseevent.click, ladefilm); function ladefilm(ereignis:mouseevent) { leinwand.load(new URLRequest("tasse.swf")); addchild(leinwand); }

10 76 Externe Filme laden 9. Testen Sie den Film. 10. Das Laden funktioniert bereits, fehlt nur noch die Positionierung des externen Films. Dies geschieht wie bei Movieclips über die Eigenschaften x und y: var leinwand:loader = new Loader(); leinwand.x = 300; leinwand.y = 0; Wie Sie sehen, kann die Positionierung durchaus erfolgen, bevor überhaupt ein Film geladen wurde. 7.2 Film wieder entladen Das Entladen eines Films funktioniert einfach über die Methode unload(). 11. Erstellen Sie einen zweiten Button zum Entladen des Films und vergeben Sie den Instanznamen entladen_btn. 12. Nun folgen der Event-Listener und die Funktion für den Button: entladen_btn.addeventlistener(mouseevent.click, entladefilm); function entladefilm(ereignis:mouseevent) { leinwand.unload(); } 7.3 Preloader Wenn die externen Dateien relativ groß sind, empfiehlt es sich, den Anwender darauf hinzuweisen, dass der Ladevorgang gestartet wurde, und ihn darüber zu informieren, wie lange er noch warten muss. Dies geschieht meist mit einer grafischen Fortschrittsanzeige in Form eines Ladebalkens o. ä., einem sogenannten Preloader.

11 Preloader 77 Abb. 13: Preloader Dazu benötigen wir zunächst einmal eine Grafik: 13. Erstellen Sie eine neue Ebene und zeichnen Sie dort zwei Rechtecke, eines für den Ladebalken und eines für die»schiene«, in der der Ladebalken läuft. Im Beispiel ist der Ladebalken ein weiß gefülltes Rechteck, die»schiene«eine weiße Kontur. 14. Wandeln Sie den Ladebalken (ohne die Schiene) in einen separaten Movieclip um. Setzen Sie den Registrationspunkt links in die Mitte, da er von dieser Stelle aus wachsen soll. Vergeben Sie den Instanznamen balken_mc. 15. Wandeln Sie nun beide Objekte gemeinsam den Balken und die Schiene erneut in einen Movieclip um. Dadurch wird der Preloader mit allen Bestandteilen zu einer Einheit. Darin befindet sich nach wie vor der Movieclip balken_mc. 16. Vergeben Sie für den kompletten Preloader den Instanznamen preloader_mc. Sobald der Ladevorgang begonnen hat, kann über die Eigenschaft contentloaderinfo des Loader-Objekts darauf zugegriffen werden. In ActionScript 3 gibt es für den Ladefortschritt ein eigenes Ereignis ProgressEvent.PROGRESS. Damit sparen Sie sich regelmäßige Abfragen mit ENTER_ FRAME. 17. Notieren Sie also die Event-Listener für die externe Datei: leinwand.contentloaderinfo.addeventlistener(progressevent. PROGRESS, fortschrittsanzeige); leinwand.contentloaderinfo.addeventlistener(event.complete, ladenfertig); Hier wird also auf zwei Ereignisse gelauscht: Während der Film geladen wird, soll in regelmäßigen Abständen (PROGRESS) die Funktion fortschrittsanzeige ausgeführt werden. Ist der Film voll-

12 78 Externe Filme laden ständig geladen (COMPLETE), wird die Funktion ladenfertig ausgeführt. Achten Sie auf die unterschiedlichen Ereignistypen ProgressEvent und Event in den beiden Event-Listenern! 18. Nun folgen die Funktionen fortschrittsanzeige und ladenfertig: function fortschrittsanzeige(ereignis:progressevent){ var prozent:number = ereignis.bytesloaded / ereignis. bytestotal; preloader_mc.balken_mc.scalex = prozent; } function ladenfertig(ereignis:event){ preloader_mc.visible = false; } Während des Ladens soll die Variable prozent ständig mit einem Wert aktualisiert werden, der sich aus der Division der bereits geladenen Bytes (bytesloaded) durch die Gesamtzahl an Bytes des externen Films (bytestotal) ergibt. Die daraus resultierende Zahl zwischen 0 und 1 benötigen wir, um die Eigenschaft scalex des Movieclips balken_mc innerhalb von preloader_mc zu erhöhen. Ist der Ladevorgang beendet (COMPLETE), soll der gesamte Preloader nicht mehr angezeigt werden (visible = false). 19. Stellen Sie nun noch sicher, dass der Preloader auch beim Starten des Hauptfilms ausgeblendet, beim Klick auf den Laden-Button jedoch wieder eingeblendet wird. Preloader online testen Testen Sie den Film. Wenn Sie Glück haben, sehen Sie den Preloader nach dem Klicken auf den Laden- Button ganz kurz aufblitzen, bevor die Tasse angezeigt wird. Das liegt daran, dass der Ladevorgang auf Ihrem lokalen System natürlich viel zu schnell geht. Zu diesem Zweck gab es in früheren Flash-Versionen die Möglichkeit, einen Download zu simulieren. Diese Funktion hat Adobe aus unerfindlichen Gründen aus Flash CC entfernt. 1 Es bleibt uns also nichts anderes übrig, als den Film als SWF zusammen mit einem HTML-Wrapper zu veröffentlichen, den gesamten Ordner externe_dateien per FTP auf einen Webserver zu laden und online zu testen 1 Stattdessen bietet Flash CC zwar die Möglichkeit, mit Hilfe der separaten Anwendung Adobe Scout diverse Messungen und Tests an SWF-Dateien vorzunehmen, doch fehlt auch hier die Option, einen Download zu simulieren.

13 Preloader 79 Hier der komplette Code für das Laden externer Filme: 1 var leinwand:loader = new Loader(); 2 leinwand.x = 300; 3 leinwand.y = 0; 4 preloader_mc.visible = false; 5 6 laden_btn.addeventlistener(mouseevent.click, ladefilm); 7 entladen_btn.addeventlistener(mouseevent.click, entladefilm); 8 leinwand.contentloaderinfo.addeventlistener(progressevent. PROGRESS, fortschrittsanzeige); 9 leinwand.contentloaderinfo.addeventlistener(event.complete, ladenfertig); function ladefilm(ereignis:mouseevent) { 12 leinwand.load(new URLRequest("tasse.swf")); 13 addchild(leinwand); 14 preloader_mc.visible = true; 15 } function entladefilm(ereignis:mouseevent) { 18 leinwand.unload(); 19 } function fortschrittsanzeige(ereignis:progressevent){ 22 var prozent:number = ereignis.bytesloaded / ereignis.bytestotal; 23 preloader_mc.balken_mc.scalex = prozent; 24 } function ladenfertig(ereignis:event){ 27 preloader_mc.visible = false; 28 } Codebeispiel: Der Code für das Laden externer Filme mit Preloader

14 104 Index Index for-schleifen 92, 98 Movieclips Eigenschaften 15, 19 Methoden 11 getchildbyname (Methode) 93 name (Eigenschaft) 91 new 67, 74, 90, 95 addchild (Methode) 75, 90 alpha (Eigenschaft) 19 Anzeigeliste 14, 75, 90 Anzeigeobjekte 14, 15 hittestobject (Methode) 61, 93 hittestpoint (Methode) 62 play (Methode) 68 Preloader 76 ProgressEvent 77 Bezeichner 33 Bildlauf 47 Boole sche Werte 19 bytesloaded (Eigenschaft) 78 bytestotal (Eigenschaft) 78 COMPLETE 77, 78 contentloaderinfo (Eigenschaft) 77 currentframe (Eigenschaft) 30 Datentypen 35, 53 ändern 36 DisplayObject Siehe Anzeigeobjekte Drag & Drop 58 einrasten 58 Ziehbereich einschränken 59 ENTER_FRAME (Ereignis) 31 Export für ActionScript 66, 88 if 22 Initialisierung 34 Instanznamen 12 Instanzpfad einfügen 15 KeyboardEvent 82 keycode 82 Klassen 15 Kollisionstest 61 Kontrollstrukturen 25 Loader 74 load (Methode) 75 Math-Objekt 56 Maus verfolgen 27 MOUSE_DOWN (Ereignis) 38 mouseenabled (Eigenschaft) 29 Mouse.hide (Methode) 29 MOUSE_MOVE (Ereignis) 28 MOUSE_UP (Ereignis) 38 random (Methode) 57, 90, 91 Rectangle 59 removechild (Methode) 93, 94 restrict (Eigenschaft) 54 root 14 rotation (Eigenschaft) 19 round (Methode) 56, 91 scalex (Eigenschaft) 19 scaley (Eigenschaft) 19 Scrollpfeile 47 SoundChannel 67, 68, 95 SOUND_COMPLETE 68 Sound-Objekt 65 soundtransform 68 SoundTransform 71 Stage 14 startdrag (Methode) 58 stopdrag (Methode) 59 stop (Methode) 68 Strikte Typisierung 35

15 Index 105 Tastatursteuerung 82 Text 43 dynamischer Text 43 Eingabetext 52 Zeichen beschränken 54 this 14 totalframes (Eigenschaft) 30 trace (Methode) 26 typeof 36 unload (Methode) 76 URLRequest 74 var 34 Variablen 33 anlegen 33 Vergleichsoperatoren 23 Verknüpfung 66, 88 visible (Eigenschaft) 19 x (Eigenschaft) 19 y (Eigenschaft) 19 Zuweisungsoperator 19, 34