Fash und Actionscript 2.0
Flash & Actionscript 2 Version 2.6 Stand 29.Juni 2008 DI Brigitte Jellinek Skriptum für meine Lehrveranstaltungen im Rahmen des Sommerstudiums informatica feminale in Bremen, des Sommerstudium ditact in Salzburg und des Studiengangs MultiMediaArt der Fachhochschule Salzburg Inhaltsverzeichnis 1 GRUNDLAGEN UND USP 1.1 USP: Vektorgrafik 1.2 USP: Animation 1.3 USP: Interaktion 1.4 USP: Multimedia 1.5 Überlegter Einsatz von Flash 5 6 7 8 12 13 10.1 10.2 10.3 10.4 11 Navigation Drag and Drop Andere Flash-Filme laden Fragen und Übungsbeispiele 66 67 68 69 70 70 71 74 76 78 79 79 83 84 86 87 90 90 92 94 97 2 FLASH GUI UND ZEICHNEN 14 2.1 Überblick über die Flash-GUI 14 2.2 Zeichnen mit Flash 15 2.3 Gruppieren und Teilen 19 2.4 Grafiken und Bilder importieren 20 2.5 Flash-Film testen und exportieren 21 2.6 Flash im Web 21 2.7 Swf Object statt HTML 23 2.8 Andere Export-Formate 24 EBENEN UND MASKEN 3.1 Ebenen in Flash 3.2 Masken in Flash WIEDERVERWERTUNG MIT SYMBOLEN 4.1 Symbole 4.2 Die Bibliothek 4.3 Austausch von Daten ZEIT UND ANIMATION 5.1 Die Zeitleiste 5.2 Bild-für-Bild Animation 5.3 Bewegungstween 5.4 Komplexe Bewegungen 5.5 Formtween MOVIECLIPS – FILM IM FILM 6.1 Einsatz von MovieClips BUTTONS 7.1 Buttons in Flash 7.2 Wiederverwertung AUDIO UND VIDEO EINBINDEN 8.1 Audiodatei einbetten 8.2 Video Streaming 8.3 FLV-Video abspielen ACTIONSCRIPT 9.1 Entwicklungsumgebung 9.2 Hilfe 9.3 Wo ist der Code? 9.4 Namen 9.5 Hilfsmittel für die Fehlersuche 9.6 Fragen und Übungsaufgaben OHNE ZU PROGRAMMIEREN 25 25 26 28 28 30 32 33 33 35 36 39 41 42 45 46 46 48 50 50 51 52 54 55 58 59 60 61 64 66 STEUERUNG VON ZEITLEISTEN 11.1 Stop und Play 11.2 Film mit alternativem Ende 11.3 Objekte, Methoden, Eigenschaften 11.4 Spielfigur steuern 11.5 Weitere Übungsbeispiele VARIABLEN UND VERZWEIGUNGEN 12.1 Variablen 12.2 Verzweigungen 12.3 Puzzle mit Erfolgskontrolle 12.4 Preloader 12.5 Fragen und Übungsaufgaben ZEICHNEN, FARBEN UND FUNKTIONEN 13.1 Zeichnen mit Actionscript 13.2 Funktionen 13.3 Farbe auf ein MovieClip übertragen 13.4 Extra –für Actionscript-Profis: 12 3 13 4 5 14 MEHR ZEICHNEN MIT SCHLEIFEN 98 14.1 Ein Muster aus Linien Zeichnen 98 14.2 Übungsaufgaben 101 MOVIECLIPS ERZEUGEN 15.1 Beispiel „Tapete“ 15.2 Instanzen dynamisch erzeugen 15.3 Lösungsansatz 15.4 Objekte mit variablem Namen 15.5 Verschachtelte Schleife 15.6 Für Profis: 2d ohne Verschachtelung 15.7 Übungsaufgaben ONENTERFRAME UND HITTEST 15 6 7 104 104 104 106 106 108 109 110 112 114 114 115 115 118 119 120 120 123 124 8 16 9 16.1 16.2 16.3 16.4 16.5 16.6 17 Zeichnung neu aufbauen Uhr Bühne und Maus Ball im Spielfeld Ball und Hittest Viele Projekte 10 AUDIO UND VIDEO ASYNCHRON 17.1 Audio streamen 17.2 Variablen für Flash in HTML setzen 17.3 Video steuern 18 ARRAYS 18.1 Beispiele: Glückskeks + Quiz 18.2 Arrays 18.3 Lösungsansatz Glückskeks 18.4 Übungen 18.5 Lösungsansatz Quiz 18.6 Übungsaufgaben VOM SERVER LADEN 19.1 Einfache Daten laden 19.2 XML für Slideshow AUSBLICK 126 126 127 131 132 132 136 137 138 139 142 144 19 20 ANHÄNGE 20.1 20.2 20.3 20.4 20.5 20.6 20.7 20.8 20.9 20.10 20.11 20.12 20.13 Literatur Online-Quellen Abbildungsverzeichnis Index Lösungen zu Kapitel 9 Lösungen zu Kapitel 10 Lösungen zu Kapitel 11 Lösungen zu Kapitel 12 Lösungen zu Kapitel 13.1 Lösungen zu Kapitel 13.2 Lösungen zu Kapitel 14 Lösungen zu Kapitel 15 Lösungen zu Kapitel 16 144 144 145 147 149 152 153 154 157 158 160 163 165 Zielpublikum und Lesetechnische Hinweise Dieses Dokument entstand über mehrere Jahre als Begleitung für verschiedene Lehrveranstaltungen. Ich danke meinen StudentInnen – insbesondere am Studiengang MultiMediaArt – für Fragen und Hinterfragen. Dieses Skriptum setzt die professionelle Anwendung der Betriebssysteme Windows bzw. MacOS, Erfahrung in der Erstellung von Webseiten mit HTML und CSS, und Erfahrung im Umgang mit GrafikProgrammen und Multimedia-Daten voraus. Die Handhabung von Maus und Tastatur, von Menüs und Standard-Dialogen ist daher nicht Inhalt dieses Skriptums. Die Illustrationen im Skriptum stammen aus verschiedenen Versionen von Flash für Windows und Flash für Apple. Programmierkenntnisse werden nicht vorausgesetzt. Grundlagen und USP: 4 USP: Vektorgrafik 1 Grundlagen und USP Was ist Flash, was kann Flash, für welche Aufgabenstellungen ist der Einsatz von Flash sinnvoll? Flash ist ein Programm der amerikanischen Adobe (seit diese im Jahr 2005 Macromedia aufgekauft hat). Dieses Programm ist eine Authoring-Umgebung, die letztlich Dateien mit der Endung *.swf 1 generiert. Wenn diese sog. Small-Web-Format-Dateien mit Hilfe eines Plugins in einem Webbrowser angezeigt werden, sind sie interaktive, multimediale Applikationen. Die im Alltag übliche Bezeichnung „Flash“ wird sprachlich für unterschiedliche Inhalte angewandt: 1. Das Programm „Macromedia Flash“, also die Authoring-Umgebung mit der FlashApplikationen erstellt werden. AKTUELLE VERSION: 2. Die mit diesem Programm erzeugten Dateien, erkennbar am Symbol oder an der Endung *.fla. Diese Dateien sind das Basismaterial und dienen der weiteren Bearbeitung. 3. Die mit diesem Programm erzeugten Endprodukt-Dateien, man erkennt Sie am Symbol oder an der Endung *.swf. Diese Dateien sind für die Publikation im Web gedacht. In diesem Skriptum werden diese Dateien auch „Flash-Movies“ genannt. 4. Das Plugin, das zusätzlich zum Webbrowser installiert sein muss, um das Abspielen von Flash-Applikationen im Webbrowser zu ermöglichen. 5. Die gesamte Technologie, also die Gesamtheit der Punkte 1 bis 4. 1 Auf Englisch manchmal als „swiff“ ausgesprochen 5 Grundlagen und USP: Als Web-Technologie steht Flash in Konkurrenz zu HTML und Javascript, den im Web verwendeten Bildformaten gif, jpg, png und dem Vektorgrafikformat SVG. In diesem Kapitel werden die wichtigsten Fähigkeiten von Flash beschrieben, und jeweils die alternativen Technologien vorgestellt und diskutiert. 1.1 VEKTORBASIERT USP: Vektorgrafik Flash war und ist das am weitesten verbreitete vektorbasierte Bild-Format im Web. Ein Flash-Movie, das nur Vektor-Grafiken (keine importierten Bitmaps, Audio- oder Video-Daten) enthält, ist von der Datenmenge her sehr klein. Vektorgrafik heißt auch, dass die in Flash gezeichneten Bilder skalierbar sind – also in verschiedenen Größen ohne Qualitätsverlust verwendbar ist. Abbildung 1: Beispiel Flash-Movies: Stern als Standbild, Stern als einfach Animation Ein Beispiel zur Veranschaulichung der geringen Datenmengen im Vergleich zu gif und jpg: Abbildung 1 zeigt einen fünfzackigen Stern, einfärbig gelb mit schwarzer Kontur, einmal als Standbild, einmal als einfache Animation mit sich drehendem Stern: Standbild Bild-Grösse 200 x 200 Pixel 600 x 600 Pixel Gif 1.729 Byte 5.466 Byte Jpg 3.830 Byte 15.780 Byte Flash (swf) 138 Byte 138 Byte Animation Flash (swf) 410 Byte 410 Byte Abbildung 2: Dateigrößen der Flash-Movies in Abbildung 1 im Vergleich zu gif und jpg 6 USP: Animation Beachten Sie, dass dieselbe swf-Datei für 200x200 und für 600x600 Pixel verwendet wurde! Die swf-Datei ist ohne Mehrdaten skalierbar. Abbildung 3 veranschaulicht die Möglichkeit der Skalierung ohne Qualitätsverlust. Sie zeigt ein FlashMovie im Vergleich zu einem gif. Beide Bilder wurden von 200x200 auf 600x600, also auf die 3-fache Höhe und Breite, bzw. 9-fache Fläche skaliert: Abbildung 3: Stern, skaliert SVG („scalable vector graphics“), ein XML-basiertes, vom w3c entwickeltes und empfohlenes Format, ist ebenfalls – wie der Name sagt – skalierbar. Das SVG-Plugin, das zur Darstellung notwendig ist, ist jedoch wenig verbreitet. SVG hatte eine Zeit lang die Unterstützung von Adobe, um es als Konkurrenz zu Flash zu etablieren, seit Adobe Flash aufgekauft hat ist das hinfällig. ALTERNATIVE SVG 1.2 USP: Animation Mit Flash lassen sich einfache Filme erstellen und sehr datensparend abspeichern. In diesem Skriptum werden die verschiedenen Arten der Animation in Flash vorgestellt. Neben der klassischen „Bild für Bild“-Animation sind das der Bewegungstween und der Formtween. Im Falle der „Bild für Bild“-Animation“ gibt es eine Alternative zu Flash: das animierte Gif. Abbildung 4 zeigt die einzelnen Bilder eines solchen animierten 7 Grundlagen und USP: Gifs, so wie sie im Programm „Animation Shop“ dargestellt werden. Abbildung 4: (historisches 2) Beispiel für eine „Bild-für-Bild“Animation Um aus einzelnen Bildern ein animiertes Gif zusammen zu stellen, können Sie verschiedene Grafikprogramme verwenden, u.a. Animation Shop, Macromedia Fireworks, Adobe ImageReady. Das Ergebnis ist jeweils eine einzige Gif-Datei. Animierte gifs werden von einem größeren Teil der Browser im Internet korrekt dargestellt als FlashAnimationen. Aber: Sie haben meist eine größere Dateigröße. Bei der Entscheidung zwischen Animiertem gif und Flash müssen Sie diese beiden Argumente gegeneinander abwägen. 1.3 USP: Interaktion Das Web ist an und für sich schon eine interaktive Technologie: die NutzerIn ist eben nicht nur LeserIn der Seite, sie kann Links anklicken (oder auf eine andere Art aktivieren) um zu navigieren, sie kann Formulare ausfüllen und einsenden. Links sind von Anfang an, Webformulare seit HTML Version 2.0 (1995) MEHR ALS LINKS UND FORMULARE Teil des HTML-Standards. Als „interaktive Webseite“ bezeichnen wir im Folgenden also Webseiten, die mehr Interaktionsmög- 2 Im Jahre 1995 stellte die Firma Netscape zwei Technologien für Animation vor: Server Push und Client Pull. Die hier gezeigte Animation war das erste Beispiel. Beide Technologien werden übrigens von aktuellen Browser-Versionen nicht mehr unterstützt, sie wurden von animierten gifs verdrängt. 8 USP: Interaktion lichkeiten als Links und Formulare anbieten. Dazu gehören insbesondere alle Interaktionen die zwischen BenutzerIn und Browser erfolgen, ohne daß – wie beim Aktivieren eines Links oder beim Einsenden eines Formulars - eine Netzwerkverbindung zum Webserver benutzt wird. Ein einfaches Beispiel ist ein „Rollover-Bild“, das sich verändert, wenn die NutzerIn die Maus über das Bild bewegt. Eine negative Eigenschaft von interaktiven Webseiten kann die verminderte Barrierefreiheit (Accessability) sein: Diese fortgeschrittene Interaktion ist nur mit grafischen Webbrowsern möglich, nicht aber mit textbasierten, solchen mit besonders kleinem Display, solchen die die Seite nicht grafisch sondern auditiv darstellen (vorlesen) oder als Braille-Schrift ausgeben. Interaktion bedeutet also für viele UserInnen eine interessantere Website, und für einige UserInnen eine nicht mehr lesbare, nicht mehr zugängliche Website. Interaktive Webseiten können Sie auch mit HTML und Javascript (und CSS) gestalten. Diese Technologien haben eine wechselhafte Geschichte hinter sich. Javascript wurde ursprünglich von der Firma Netscape erfunden und dann von anderen Browserherstellern übernommen. In den verschiedenen Browsern und Versionen gab es immer wieder Unterschiede in der Interpretation der Javascript-Programme. Ein Beispiel: um die Breite des Browser-Fensters auszumessen gibt es mehrere Varianten: funktioniert in Netscape und Mozilla funktioniert in Internet Explorer Im Gegensatz zu HTML, wo kleine Unterschiede in der Interpretation durch die Browser zu kleinen Darstellungsunterschieden führen (ein Bild wird einen Millimeter weiter links oder weiter rechts dargestellt, ein Link ist unterstrichen oder nicht,…), führen Unterschiede in der Interpretation von Javascript zu Fehlermeldungen (siehe Abbildung 6) und nicht mehr funktionierenden Interaktionen – die Seite wird also unbrauchbar. Abbildung 5: Rollover-Bild als Beispiel für einfache Interaktion ZUGÄNGLICHKEIT = ACCESSABILITY ALTERNATIVE DHTML x = window.innerWidth; x = document.body.clientWidth; 9 Grundlagen und USP: Abbildung 6: Javascript Fehlermeldungen Um diese Probleme zu beheben wurde Javascript auf zwei Arten Standardisiert. Die Syntax, also die allgemeine Schreibweise der Sprache, wurde als ECMASkript 3 von der „European Computer Manufacturers Association“ standardisiert. Der zweite Teil der Standardisierung ist das Document Object Model (DOM), ein allgemeines Modell wie die Webseite (das Dokument) von einer objektorientierten Skriptsprache aus manipuliert werden kann. Dabei wird ein HTML(oder XML-)Dokument als Baum interpretiert, wie in Abbildung 7 gezeigt. WWW und Multimedia

Bestell-Formular

tshirt
tshirt
Abbildung 7: HTML-Dokument und DOM, dargestellt im Firefox DOM Inspector Doch selbst bei Verwendung des DOM gibt es immer noch kleine Unterschiede zwischen den Browsern. Eine gute Informationsquelle dazu ist quirksmode.org von Peter-Paul. Auf jeden Fall ist die Situation durch die Einführung des DOM besser geworden, wenn die Veränderung auch sehr, sehr langsam geschah. Es reicht ja nicht, wenn ein Browser-Hersteller den neuen Standard umsetzt. Es reicht auch nicht, wenn die neueste Versionen der Browser den Standard unterstützen. Erst wenn genug von den „alten http://www.ecma-international.org/publications/standards/Ecma262.htm 3 10 USP: Interaktion Versionen“ ausgetauscht wurden, wenn wirklich genug Leute die neuen Versionen installiert haben, erst dann kann man den neuen Standard auch benutzen. Für Javascript+DOM war ca. 2005 dieser kritische Level an Verbreitung erreicht. Es erschienen immer mehr Webapplikationen die Javascript und die DOM konsequent einsetzten. In Kombination mit dem XMLHTTPRequestObject, das das asynchrone Nachladen von Daten ermöglicht, konnte so eine neue Qualität von Interaktion erreicht werden. Ein Beispiel für diese Art von Interaktivität ist das in Abbildung 8 gezeigt Autocomplete-Eingabefeld. AJAX Abbildung 8: Autocomplete Eingabefeld mit script.aculo.us In diesem Beispiel hat die Leserin erst einen Buchstaben in das Eingabefeld eingetippt: „a“. Diese Eingabe wurde über das XMLHTTRequestObject an ein serverseitiges Skript gesandt, dass eine Datenbankabfrage durchführt. Das serverseitige Skript liefert als Output ein kleines HTML-Fragment mit einer Liste von Namen:
  • ameier
  • amüller
  • ahuber
  • achovski-grauhuber
Dieses HTML-Fragment wird vom JavascriptProgramm im Client mittels DOM in die Webseite eingefügt. Durch ein Stylesheet erscheint die HTMLListe nicht als Liste sondern wie in der Abbildung gezeigt. Im Februar 2005 verwendete Jesse James Garrett für diese Kombination von Javasript und Nachladen vom 11 Grundlagen und USP: Server zum ersten Mal die Abkürzung AJAX 4. Seither entstanden viele Webseiten die diese TechnologieKombination nützen, und eine Reihe von Programmierhilfe, die die Entwicklung unterstützen. AJAX hat Flash an einigen Stellen wieder verdrängt. VERGLEICH FLASH AJAX Flash hat im Vergleich zu AJAX weniger Kompatibilitäts-Probleme: es gibt nur ein Flash-Plugin, es wird von der Firma Adobe herausgegeben und funktioniert in allen Browsern, auf den Plattformen Windows, Mac OS und Linux gleich. Alte Flash-Filme funktionieren bei der Betrachtung mit einem neuen Flash-Plugin immer. Die Entscheidung zwischen AJAX oder Flash für eine interaktive Website ist also eine Entscheidung zwischen proprietärer Technologie und Stabilität auf der einen Seite, und einer standardisierten, aber instabileren Technologie auf der anderen Seite. 1.4 USP: Multimedia Es gibt verschiedene Methoden Audio und Video in Webseiten einzubinden. Mit einem einfachen Link zu einer Audio- oder VideoDatei kann diese Datei zum Download und zum Abspielen angeboten werden. Das funktioniert meist sehr gut, es gibt dabei kaum etwas zu gestalten. Mit den HTML-Tags oder , können Dateien jedes Formats direkt in ein HTML-Dokument eingebunden werden. Die Darstellung übernimmt dann ein Browser-Plugin. Da auf den verschiedenen Computern im Web verschiedene Plugins installiert sind, ist es nicht möglich vorherzusagen wie die Darstellung genau erfolgen wird. Diese Methode ist also fehleranfälliger (bei fehlendem Plugin) und bietet trotzdem kaum mehr Gestaltungsmöglichkeiten als ein Link. 4 http://www.adaptivepath.com/publications/essays/archives/000385.p hp 12 Überlegter Einsatz von Flash Mit dem Format SMIL, das vor allem von Real Player unterstützt wird, können Audio- und Video-Dateien (synchronisiert) abgespielt werden. In einem Flash-Movie können Audio- und Video-Daten entweder eingebettet werden, oder als externe Datei mittels Streaming abgespielt werden. Flash bietet mit der FLVPlayback-Komponente eine einfache Art einen ‚Standard-Player’ zu erstellen, aber auch alle Möglichkeiten, die Oberfläche und die Interaktion zu gestalten. Die Möglichkeiten der Synchronisation sind zwar beschränkt, aber im Vergleich zu den anderen besprochenen Methoden noch immer am Besten. Abbildung 9: FLVPlayback Komponente 1.5 Überlegter Einsatz von Flash Die bisher angeführten USPs von Flash sollten Sie nicht falsch verstehen. Flash ist für gewisse Aufgabenstellungen sehr gut oder am Besten von allen aktuellen Technologien geeignet. Das heißt nicht, dass Flash für jede Aufgabenstellung geeignet ist. Sie müssen bei jedem Projekt einzeln entscheiden (und argumentieren können), ob ein Einsatz von Flash sinnvoll oder störend wäre. Bedenklich ist der Einsatz von Flash insbesondere bei Informationsseiten und bei Seiten mit hohem Anspruch an Barrierefreiheit. Alle Flash-Seiten haben das Problem, dass Sie in Suchmaschinen nicht gefunden bzw. nicht einzelne Seiten annavigiert werden können. Argumente für den Einsatz von Flash sind die oben angeführten USPs. In manchen Fällen mag es sinnvoll sein, eine FlashVersion und eine Flash-lose Version einer Website zu entwickeln. Aber Achtung: dieser Ansatz bedeutet die doppelte Arbeit in der Entwicklung, und wieder doppelte Arbeit in der Wartung der Site. Es besteht die Gefahr, dass die „zweite Version“ nie fertig entwickelt wird und/oder nicht gewartet wird. Das ist dann schlimmer, als nur eine Version zu haben. 13 Flash GUI und Zeichnen: 2 Flash GUI und Zeichnen Flash funktioniert weder wie ein klassisches bitmap-orientiertes Grafikprogramm, noch wie ein klassisches vektor-orientiertes Grafikprogramm. Flash zu lernen, heißt also ein neues ZeichenModell zu lernen. 2.1 Ebenen und Zeitleiste Überblick über die Flash-GUI Diverse Fenster Werkzeuge Bühne Eigentschaften Hinterbühne Abbildung 10: Die Teile der Flash GUI BÜHNE + HINTERBÜHNE Die Bühne ist Ihr erster Orientierungspunkt. Auf der Bühne zeichnen Sie. Anders als in anderen Programmen können Sie in Flash auch „neben“ der Bühne zeichnen. Ein Beispiel für einen sinnvollen Einsatz: ein Auto soll „durch das Bild fahren“. Sie zeichnen es also neben der Bühne, und erstellen dann die Animation, die das Auto durch die Bühne bewegt. Wie in den meisten Grafik-Programmen finden Sie am linken Rand des Programms die Werkzeug-Leiste. Aber Achtung: Die Werkzeuge funktionieren etwas anders als in anderen Grafikprogrammen. Im unteren Teil des Fensters können Sie die Eigenschaften des jeweils auf der Bühne markierten Objekts verändern. Das Eigenschafts-Fenster funktioniert also wie im Programm Dreamweaver. Je nachdem welches Objekt markiert ist, sieht das Eigenschafts-Fenster auch unterschiedlich aus. WERKZEUGE EIGENSCHAFTEN 14 Zeichnen mit Flash Am rechten Rand des Programms können verschiedene Fenster eingeblendet werden. Über das Menü „Fenster“ können Sie Fenster einblenden und ausblenden. Wenn Sie eine gute Zusammenstellung von Fenstern gefunden haben, können Sie diese Zusammenstellung mit dem Menüpunkt FENSTER BEDIENFELDSATZ SPEICHERN unter einem Namen abspeichern. Dieser Teil der GUI ist komplex. Zuerst werden Sie nur die Ebenen verwenden. Sie funktionieren ähnlich wie in anderen Grafik-Programmen. Die Zeitleiste verwenden Sie zur Erstellung von Animationen und für verschiedene Zustände von interaktiven Applikationen. Die Menüs von Flash entsprechen den üblichen Konventionen. Besonderes Augenmerk sollten Sie dem Menü MODIFIZIEREN schenken. Im Zweifelsfall finden Sie hier alles was Sie brauchen und nicht finden können. FENSTER EBENEN + ZEITLEISTE MENÜS 2.2 Zeichnen mit Flash Kommen wir nun zur Vorstellung des speziellen Zeichen-Modells von Flash. Für eine detailliertere Beschreibung der verschiedenen Werkzeuge verwenden Sie bitte die Flash-Hilfe bzw. eines der unzähligen Bücher über die Handhabung von Flash. Wenn Sie in Flash einen Kreis zeichnen, besteht dieser aus einer Füllung und einer Kontur. Diese beiden Elemente haben unterschiedliche Aufgaben. Sie müssen mit beiden gezielt arbeiten können. Abbildung 11 zeigt wie Flash es darstellt, wenn die Füllung markiert ist, bzw. wenn die Kontur markiert ist. FÜLLUNG VS. KONTUR 15 Flash GUI und Zeichnen: Abbildung 11: Füllung markiert vs. Kontur markiert Beim Erstellen des Kreises passen Füllung und Kontur ineinander. Im Verlauf der weiteren Arbeit können Sie beide trennen. Dabei werden Sie bemerken, dass Flash sich nicht wie andere vektororientierte Programme verhält: Wenn Sie die Füllung auf die Kontur legen, und dann noch einmal verschieben, dann wird die Kontur „abgebissen“ wie Abbildung 12 zeigt. Abbildung 12: Die Füllung hat einen Teil der Kontur gelöscht OBJEKTZEICHNUNG (J) Dieses Verhalten von Flash können Sie gezielt für die Gestaltung einsetzen. Wenn Sie dieses Zeichnungsmodell nicht verwenden wollen, können Sie auf das Objektzeichnungsmodell umschalten. Dann wird beim Zeichnen z.B. eines Kreises die Füllung und die Kontur automatisch gruppiert. Die dabei entstandene Gruppe erkennt man an der blauen Box, die angezeigt wird, sobald die Gruppe selektiert wird. Von einer Gruppe wird nichts „abgebissen“, das in Abbildung 12 gezeigte Phänomen tritt nicht auf. Abbildung 13: der rechte Kreis wurde mit dem Objektzeichnungsmodell gezeichnet 16 Zeichnen mit Flash Mit dem Auswahlwerkzeug (Tastaturkürzel: V) können Sie die Kontur verformen wie in Abbildung 14 gezeigt. KONTUR BEARBEITEN Abbildung 14: Kontur verformen mit dem Auswahl-Werkzeug Wenn eine Kontur markiert ist, und das Auswahlwerkzeug ausgewählt ist, dann werden am unteren Rand des Werkzeug-Fensters die Symbole für „glätten“ und „begradigen“ aktiv, mit dem Sie die Kontur schrittweise verformen können. KONTUR GLÄTTEN / BEGRADIGEN Abbildung 15: Kontur glätten bzw. begradigen Mit dem Unter-Auswahl-Werkzeug (Tastaturkürzel A) können Sie eine Kontur auch bearbeiten. Dann verhält sich die Kontur wie in einem vektor-orientierten Programm. Die Kontur ist durch Ankerpunkte und Tangenten definiert, sie können die Ankerpunkte verschieben, und die Tangenten verändern wie in Abbildung 16 gezeigt. KONTUR VEKTORBASIERT BEARBEITEN Abbildung 16: Kontur mit Ankerpunkten und Tangenten bearbeiten 17 Flash GUI und Zeichnen: Die Unterscheidung zwischen Kontur und Füllung zieht sich durch die gesamte Werkzeugleiste: Es gibt ein Werkzeug um eine Kontur zu Zeichnen (das Freihandwerkzeug, Tastaturkürzel Y) und eines um eine Füllung zu zeichnen (das Pinselwerkzeug, Tastaturkürzel B) Mit dem Tintenfaßwerkzeug (Tastaturkürzel S) können Sie um eine Füllung eine neue Kontur legen. Mit dem Farbeimerwerkzeug (Tastaturkürzel K) können Sie in eine Kontur eine Füllung einfüllen, wie in Abbildung 17 gezeigt. Abbildung 17: Tintenfass- und Farbeimer-Werkzeug LINIEN IN FÜLLUNGEN UMRECHNEN Es gibt auch eine Möglichkeit eine Kontur (insbesondere eine Kontur mit hoher Strichstärke) in eine Füllung zu verwandeln: MODIFIZIEREN FORM LINIEN IN FÜLLUNGEN KONVERTIEREN. In Abbildung 18 sehen Sie den Effekt dieser Umwandlung. Abbildung 18: Kontur und Füllung (konvertiert), Verformung beider Diese Umwandlung hat auch zur Folge, dass andere Arten der Verformung möglich sind. In Abbildung 18 sehen Sie auch den Effekt des Auswahlwerkzeuges auf die Kontur und die Füllung, die aus der Kontur entstand. Einmal wird die Linie verbogen, einmal wird die Begrenzung der Fläche verformt. 18 Gruppieren und Teilen Abschließend noch einmal der Hinweis auf die Flash Hilfe, und auf die vielen Bücher, die die Handhabung von Flash im Detail erklären. Aber es gilt natürlich: Wirklich erlernen können Sie das Zeichnen mit Flash nur durch die praktische Arbeit mit dem Tool. Falls Sie ein Zeichenbrett – insbesondere ein druckempfindliches Zeichenbrett – besitzen, können Sie dieses für die Arbeit mit Flash verwenden. Was Sie auf jeden Fall verwenden können und sollten ist die Tastatur: Die Verwendung der Tastaturkürzel zum Wechseln des Werkzeuges beschleunigt die Arbeit mit Flash enorm, da Sie den Maus-Zeiger dadurch auf der Bühne belassen, und schneller Zeichnen können. Links sehen Sie die Tastaturkürzel aller Werkzeuge. HILFE EINGABEGERÄTE 2.3 Gruppieren und Teilen Wie in vielen Grafikprogrammen gibt es in Flash die Möglichkeit verschiedene Objekte zu einer Gruppe zusammen zu fassen – zu gruppieren. Diese Möglichkeit wird relativ selten genutzt, da bessere Methoden zur Strukturierung zur Verfügung stehen – Symbole, insbesondere MovieClips (siehe Kapitel 0). Um eine Gruppe wieder in die einzelnen Objekte zu zerlegen, benutzen Sie die Funktion MODIFIZIEREN -> GRUPPIERUNG AUFHEBEN oder RECHTE MAUSTASTE -> TEILEN. Diese Funktion hat noch eine andere Verwendung: Sie können damit Texte teilen, wie in Abbildung 19 gezeigt. GRUPPIEREN STRG-G TEILEN STRG-B Abbildung 19: Text, einmal geteilter Text, zweimal geteilter Text, veränderte Form des Texts Wird ein Text einmal geteilt, dann wird er dadurch in einzelne Buchstaben zerlegt, die aber immer noch Text-Objekte sind. Wird er daraufhin noch einmal geteilt, werden die Buchstaben in Formen, um genau 19 Flash GUI und Zeichnen: zu sein: in Füllungen verwandelt. Danach können Sie die üblichen Werkzeuge verwenden um die Füllung zu verformen. 2.4 VEKTORGRAFIK Grafiken und Bilder importieren Sie können Grafiken die Sie in einem anderen Grafikprogramm gezeichnet haben in Flash importieren, so können Sie die Stärken der verschiedenen Programme kombinieren. Wenn Sie Bitmap-Bilder in Flash importieren, dann bleiben sie Bitmap-Bilder. Bitmap-Bilder können von Flash in Vektor-Bilder umgewandelt werden, dieser Prozess wird als „Nachzeichnen“ bezeichnet, Sie starten ihn mit MODIFIZIEREN BITMAP NACHZEICHNEN: Abbildung 20: Bitmap, Detail, Vektor-Nachzeichnung dieses Details Abbildung 20 zeigt eine Bitmap mit Dimensionen 640x480 die in Flash eingefügt und nachbearbeitet wurde (die Figur wurde schwarz übermalen). Die swfDatei mit der Bitmap ist 47 KB groß. Dann wurde die Bitmap als Vektor nachgezeichnet. Die swf-Datei mit Vektorgrafik ist nur 11 KB groß. Sie enthält – wie man in der Abbildung sieht – viel weniger Details. PNG Wenn Sie png-Dateien importieren können bleibt der Alpha-Kanal auch in Flash aktiv. 20 Flash-Film testen und exportieren 2.5 Flash-Film testen und exportieren Wie auf Seite 5 erwähnt, generiert Flash zwei verschiedene Dateien: fla-Dateien für die weitere Bearbeitung, und swf-Dateien als Endprodukt. Wenn Sie eine Datei speichern erzeugen Sie damit eine flaDatei. Die schnellste Möglichkeit eine swf-Datei zu erstellen, ist die Tastenkombination STRG-ENTER. bzw. mit dem Menüpunkt DATEI VORSCHAU FÜR VERÖFFENTLICHUNG FLASH. Abbildung 21 zeigt links die Statusanzeige während der Vorbereitung der Vorschau (Export des Films). STRG-ENTER Abbildung 21: Film wird exportiert, GUI für den Wechsel zurück zum Editor Bei dieser Art der Vorschau wird die Applikation direkt im Flash Editor dargestellt – der Editor fungiert hier also als Player. Sie können das Player-Fenster wieder schließen, oder mit dem in Abbildung 21 rechts gezeigten GUI-Element zurück zum Editor wechseln. 2.6 Flash im Web Bei der Vorschau für die Veröffentlichung wird neben der swf-Datei auch eine HTML-Datei erstellt. Diese Datei können Sie direkt im Browser öffnen, oder in einem Web-Editor wie Dreamweaver weiter bearbeiten. Achtung: in der HTML-Datei befinden sich die HTMLTags , und , mit deren Hilfe die swf-Datei eingebunden wird. (Analog zum – Tag und einer Bild-Datei) Die HTML-Datei alleine enthält nicht den Flash-Film! Beim Upload auf den Webserver muss auch die swf-Datei hochgeladen werden! Betrachten wir die Kommunikation zwischen Client und Server im Web genauer: 21 Flash GUI und Zeichnen: Abbildung 22: Kommunikation zwischen Webbrowser (mit und Flash Player) und Webserver Der Webbrowser stellt eine Anfrage an den Webserver (Pfeil 1 in Abbildung 23). Der Webserver antwortet in dem er z.B. HTML-Daten sendet (Pfeil 2). Der Browser liest die HTML-Daten und stellt sie dar. Wenn ein Tag enthalten ist der auf eine swfDatei verweist dann stellt der Webbrowser eine weitere Anfrage an den Server (Pfeil 1) um die swf-Datei zu laden. Der Server sendet die swf-Datei (Pfeil 2). Nun startet der Browser den Flash Player als Plugin, und übergibt ihm die Kontrolle über einen Bereich des Browser-Fensters. Der Flash Player erhält die swfDatei und stellt diese dar. 1.6.2 Flash und HTML Abbildung 23 zeigt die Bearbeitung des für HTMLCodes für die Flash-Einbindung in Dreamweaver. Abbildung 23 Bearbeitung des eingebundenen Flash-Films in Dreamweaver 22 Swf Object statt HTML Eine Größenveränderung des Flash-Films, ist durch die Angabe von width- und height-Attributen im Code, oder durch Eingabe von Werten in die Felder B und H am Eigenschaftsfenster von Dreamweaver möglich. So eine Größenänderung mindert die Qualität nicht solange der Flash-Film keine Bitmaps enthält (siehe auch Kapitel 2.4, auf Seite 20). Weitere Einstellungen die Sie im HTML-Code bzw. in Dreamweaver vornehmen können: − − − Die Hintergrundfarbe des Films ob der Film in einer Endlos-Schleife wiederholt werden soll Wie der Film auf Verzerrungen bei einer Skalierung reagiert (siehe Abbildung 24) GRÖSSE Abbildung 24: Skalierung des Flashfilms bei der Einbindung in die Webseite Normalerweise (SKALIEREN: STANDARD) wird der FlashFilm so weit verkleinert, dass er ohne Verzerrung in der zur Verfügung gestellten Fläche Platz hat. Mit SKALIEREN: KEIN RAHMEN wird der Film möglichst groß dargestellt, dabei werden eventuell Teile des Films abgeschnitten. Mit SKALIEREN: GENAU PASSEND wird der Film verzerrt. 2.7 Swf Object statt HTML Mit diesem kleinen Javascript können Sie Flash noch bequemer einbinden. 23 Flash GUI und Zeichnen:
Hier würde ein kleiner Animations-Film angezeigt werden – wenn Ihr Browser Flash anzeigen könnte.
Bei der Erzeugung des neuen SWFObjects müssen Sie folgende Parameter angeben: • • movie.swf – dieser Flash-Film wird angezeigt. flashcontent – verweist auf die ID des HTML-Elements das durch den Flash-Film ersetzt wird. • • • 200 – Breite in der der Flash-Film angezeigt wird 100 – Höhe in der der Flash-Film angezeigt wird 7 – Mindest-Anforderung an die Version des Flash-Plugins. Hier eine möglichst niedrige Zahl angeben! Kann bis auf die Revision angegeben werden, z.B. "6.0.65". #336699 – Hintergrundfarbe • 2.8 Andere Export-Formate Sie können im Fenster DATEI EINSTELLUNGEN FÜR VERÖFFENTLICHUNG auch andere Formate für die Publikation festlegen: swf und html sind die StandardFormate. gif, jpeg, png für Standbilder. In den Formaten exe (für Windows) bzw. hqx (für Mac) können Sie die Flash-Applikation als eigenständiges Programm exportieren. Das ist sinnvoll wenn auf dem ZielComputer kein Flash-Player installiert ist. Der Export als Quicktime ist nur möglich wenn die entsprechenden Quicktime-Komponenten auf dem Computer mit der Authoring-Umgebung installiert sind. 24 Ebenen in Flash 3 Ebenen und Masken Ebenen sind ein wichtiges Ordnungssystem für die Arbeit in Flash. Für Animationen mit Tweens werden Sie jeweils eigene Ebenen brauchen. 3.1 Ebenen in Flash Das Ebenen-System von Flash unterscheidet sich in einem wichtigen Punkt vom Ebenen-System z.B. in Photoshop: Das Ausblenden einer Ebene hat in Flash nur im Editor eine Bedeutung, aber keine Auswirkung auf das Endprodukt: im fertigen Flash-Film sind alle Ebenen sichtbar. Jede Ebene kann einzeln ausgeblendet, gesperrt oder als Kontur dargestellt werden Ebenen im Editorausblenden Ebenen im Editor sperren Jede Ebene hat einen Namen Ebenen im Editor nur als Kontur darstellen Ebenen-Ordner einfügen Pfad-Ebene einfügen Diese Ebenen wird derzeit bearbeitet Ausgewählte Ebene(n) löschen Ebene einfügen Abbildung 25: Ebenen 25 Ebenen und Masken: ORDNUNG Für die Arbeit an größeren Projekten sind EbenenNamen und Ebenen-Ordner wichtige OrdnungsWerkzeuge. Da jede Animation eine eigene Ebene braucht wird die Zahl der Ebenen sehr schnell sehr groß. Durch das Sperren einer Ebene wird verhindert, dass Objekte in dieser Ebene ausgewählt werden können. Häufig sperrt man alle Ebenen, und entsperrt dann nur eine mit der man arbeiten will. ENTWICKLUNG 3.2 Masken in Flash In vielen Grafikprogrammen existiert das Konzept der Maske. Eine Maske ist eine Ebene die nicht selbst dargestellt wird. Der Maske sind andere Ebenen zugeordnet, die von der Maske beeinflusst werden. Diese Ebenen werden unsichtbar, außer an den Stellen, an denen in der Maskenebene etwas sichtbar ist. In Abbildung 26 befinden sich in der Maskenebene zwei Kreise. In der linken Hälfte der Abbildung ist die Maske sichtbar. In der rechten Hälfte der Abbildung ist die Wirkung der Maske dargestellt. Abbildung 26: Effekt einer Maske Um eine Maske in Flash zu erstellen, erstellen Sie zuerst eine normale Ebene, und weisen Ihr dann mit Rechtsklick im Fenster Eigenschaften die Eigenschaft „Maske“ zu, wie in Abbildung 27 gezeigt. Welche Ebenen der Maske untergeordnet sind und welche nicht könne Sie mit „Drag-and-Drop“ bestimmen: Ziehen Sie 26 Masken in Flash eine Ebene nahe unterhalb die Maskenebene, dann wird sie dieser untergeordnet. Abbildung 27: Erstellen einer Maske In einer Maske können Sie später mit Bewegungs- und Form-Tweens für Bewegung sorgen. 27 Wiederverwertung mit Symbolen: 4 Wiederverwertung mit Symbolen Ein wichtiges Ziel beim Erstellen eines FlashFilms ist es, die swf-Datei so klein wie möglich zu halten. Eine größere swf-Datei bedeutet längere Wartezeit für die BenutzerInnen. Die Art mit der Sie bisher gezeichnet haben erzeugt „Originale“, und Originale tragen erheblich zur Dateigröße der swf-Datei bei. Abbildung 28 zeigt ein Beispiel für einen Flash-Film der 18 sehr ähnliche Originale enthält. Die swf-Datei dieses Beispiels ist 1.148 Bytes groß. (Mit einem Stern war sie übrigens 108 Bytes groß). 4.1 Symbole Flash bietet eine Alternative an, die Platz spart: Der Stern wird in ein „Symbol“ verwandelt. Dieses Symbol kann nun wiederholt im Film verwendet werden, braucht aber wesentlich weniger Speicherplatz. In diesem Beispiel: 347 Byte statt 1.148 Byte. Wird ein Symbol öfter wieder verwendet, verstärkt sich der Effekt, Abbildung 29 zeigt die Mess-Ergebnisse für 18 und 54 Wiederholungen eines Originals bzw. eines Symbols. 1 Stern 18 Sterne 1.148 Byte 347 Byte 54 Sterne 3.440 Byte 654 Byte Abbildung 28: Beispiel für einen Film mit wiederholten Elementen Mit Formen Mit Symbolen 108 Byte 133 Byte Abbildung 29: Größe von swf-Dateien im Vergleich bei Verwendung von Formen oder Symbolen 5 Konkret: bei Verwendung von MovieClip-Symbolen. Im Anhang finden Sie auch die Daten für Grafik-Symbole und SchaltflächenSymbole 5 28 Symbole Um ein Original in ein Symbol zu verwandeln verwenden Sie den Menüpunkt MODIFIZIEREN IN SYMBOL KONVERTIEREN oder die Taste F8. Sie müssen dem Symbol einen Namen geben. Flash unterscheidet drei Arten von Symbolen: MovieClip, Schaltfläche und Grafik. In einem späteren Kapitel werden Sie die spezielle Verwendung von Schaltflächen und MovieClips kennenlernen, Grafik-Symbole sind für die reine Wiederverwertung von Formen gedacht. Abbildung 28 zeigt das entsprechende Fenster. ERZEUGEN EINES SYMBOLS Abbildung 30: Dialog „in Symbol konvertieren“ Bei der Arbeit in Flash können Sie Originale und Symbole einfach unterscheiden: Wenn Sie ein Original selektieren wird es „gepunktet“ dargestellt. Wenn Sie ein Symbol auswählen erscheint ein Kasten rund um das Symbol und der „Registrierungs-Punkt“ des Symbols wird als kleines Plus angezeigt (meist mit einem Kreis darum, dem „Transformation-Punkt“). Siehe Abbildung 31. Abbildung 31: Original und Instanz eines Symbol, beide ausgewählt Von einem Symbol kann es mehrere Kopien auf der Bühne geben, diese nennt man dann Instanzen des Symbols. Die Instanzen können sich vom Symbol unterscheiden: sie können eine andere Größe haben, sie können gedreht und/oder gespiegelt sein, sie können umgefärbt bzw. transparent bzw. heller oder dunkler sein. INSTANZEN 29 Wiederverwertung mit Symbolen: Verwenden Sie zum Verändern einer Instanz das Werkzeug „Frei transformieren“ (Tastaturkürzel Q) und das Eigenschafts-Fenster. INSTANZNAMEN Die einzelnen Instanzen können einen Namen erhalten. Dies geschieht im Eigenschafts-Fenster, wie links in Abbildung 32 gezeigt. Rechts in der Abbildung 32 sehen Sie einen Ausschnitt aus dem Fenster FILMEXPLORER. Hier sieht man, daß sich auf der Bühne vier Instanzen der Symbols Smilie befinden, die vier Instanzen haben verschiedene Namen: maria_mc, hansi_mc, peter_mc und susi_mc. Abbildung 32: Symbolnamen und Instanznamen in den Eigenschaften und im Film-Explorer 4.2 Die Bibliothek Alle Symbole, die in einem Flash-Film enthalten sind, finden Sie in der Bibliothek. Die Bibliothek ist ein Fenster, das Sie mit dem Tastaturkürzel STRG-L oder mit F11 anzeigen können. OptionsMenü der Bibliothek Abbildung 33: Das Bibliotheks-Fenster 30 Die Bibliothek Im Bibliotheks-Fenster sollten Sie mindestens: Ein Symbol umbenennen können, die Eigenschaften eines Symbols ändern können, und (mit dem Optionsmenü) herausfinden können, welche Symbole gar nicht im Film verwendet werden. Mit einem Doppelklick auf ein Symbol in der Bibliothek können Sie das Symbol bearbeiten. Achtung: Das ist nicht das Gleiche wie eine Instanz auf der Bühne zu bearbeiten. Ob Sie gerade die Instanzen auf der Bühne bearbeiten oder ein bestimmtes Symbol bearbeiten, erkennen Sie an der Bearbeitungsleiste oberhalb der Ebenen: SYMBOL BEARBEITEN Abbildung 34: Bearbeiten des Dokuments vs. Bearbeiten des Symbols „Stern“ Das linke Bild in Abbildung 34 zeigt die Bearbeitung der Haupt-Zeitleiste. Das rechte Bild zeigt die Bearbeitung des Symbols „Stern“ aus der Bibliothek. Mit derselben Bearbeitungsleiste können Sie auch zurück zum Bearbeiten des Dokuments wechseln, entweder mit dem „Zurück“-Pfeil oder indem Sie auf „Szene 1“ klicken. Wenn Sie das Symbol verändern, verändern Sie damit auch alle Instanzen des Symbols wie Abbildung 35 zeigt: werden dem „SmilieMC“ in der Bibliothek Haare gezeichnet, dann wachsen allen „SmilieMC“-Instanzen auf der Bühne auch Haare. Abbildung 35: Eine Veränderung des Symbols verändert alle Instanzen 31 Wiederverwertung mit Symbolen: 4.3 Austausch von Daten Die Bibliothek können Sie auch zum Austausch von Daten zwischen verschiedenen fla-Dateien verwenden: Sie können zwei fla-Dateien im Flash-Editor öffnen und zwischen den beiden Bibliotheken wechseln wie in Abbildung 36 gezeigt. Bibliothek auswählen Bibliothek vonplayers.fla Bühne von smilie.fla Abbildung 36: Arbeiten mit einer fremden Bibliothek Nun können Sie aus der „fremden“ Bibliothek ein Symbol auf die Bühne ziehen. Es wird dabei automatisch in die Bibliothek Ihrer fla-Datei übernommen. Eine Besonderheit tritt auf, wenn das Symbol aus der anderen Bibliothek den gleichen Namen hat wie ein Symbol der eigenen Bibliothek. Es kann jeden Namen in der Bibliothek nur einmal geben. Flash zeigt den in Abbildung 37 gezeigten Dialog an, um dieses Dilemma zu lösen. Wenn Sie das vorhandene Element ersetzten, bedeutet das, daß alle Instanzen des Symbols ersetzt werden. Wenn Sie es nicht ersetzen wird das Symbol aus der anderen Bibliothek nicht eingefügt. Abbildung 37: Dialog zum Bibliothekskonflikt – Symbol mit gleichem Namen wird eingefügt Wenn Sie also an einem größeren Projekt - vielleicht mit mehreren Personen - arbeiten, dann sollten Sie bereits zu Beginn die Namen der wichtigen Symbole festlegen. Dieser Vereinbarung über die SymbolNamen und die Symbol-Hierarchie kommt die gleiche Bedeutung zu wie der Vereinbarung über Dateinamen und Ordner in einem HTML-Projekt. 32 Die Zeitleiste 5 Zeit und Animation Die Zeitleiste und die verschiedenen Animationsarten, die hier für Flash dargestellt werden, finden Sie auch in anderen Schnitt- und AnimationsProgrammen wie Aftereffects, Maya, FinalCut ähnlich wieder. Flash unterteilt die Zeit in einzelne Bilder (auf Englisch: Frames). Für den gesamten Flash-Film wird einmal die Bildrate (Bilder pro Sekunde / Frames per second) festgelegt, der Standardwert ist 12 Bps. In einem Flash-Film mit 12 Bps gibt es keine weitere Unterteilung der Zeit, es kann also in diesem Film keine Animation geben, bei der 25 verschiedene Bilder in einer Sekunde angezeigt werden. 5.1 Die Zeitleiste Die Zeitleiste ist das Werkzeug mit dem Sie Animationen erstellen. Abbildung 38: Zeitleiste ohne Zeit und mit Zeit In Abbildung 38 sehen Sie in der linken Hälfte den Zustand der Zeitleiste in einem neuen FlashDokument, die Zeitleiste enthält nur ein Bild. In der rechten Hälfte sehen Sie die Zeitleiste einer kleinen Animation. Am oberen Rand der Zeitleiste sind die Bilder nummeriert, hier von 1 bis 10. Ein roter senkrechter Strich repräsentiert den Abspielkopf, der von links nach rechts von Bild zu Bild läuft. Sie können den Abspielkopf durch einen Klick auf ein bestimmtes Bild setzen, die Bühne zeigt dann den Zustand zu diesem Zeitpunkt, in diesem Bild an. ABSPIELKOPF 33 Zeit und Animation: SCHLÜSSELBILD In der Zeitleiste müssen Sie zwei Arten von Bildern unterscheiden: ein Schlüsselbild (markiert durch einen Kreis) kann eine Veränderung enthalten, ein normales Bild (ohne Kreis) bringt keine Veränderung gegenüber dem vorhergehenden Bild. Wie Sie in Abbildung 38 auch sehen können, kann jede Ebene eine andere Folge von Bildern und Schlüsselbildern enthalten. Voraussetzung für die Arbeit mit der Zeitleiste ist, dass Sie die Bedeutung der Anzeige in der Zeitleiste lesen können. Das erste Bild in Abbildung 39 ist grau und enthält einen schwarzen Kreis. So wird ein Schlüsselbild mit Inhalt dargestellt. Bild 2 ist weiß und enthält einen weißen Kreis, es ist ein leeres Schlüsselbild. Das heißt: der Inhalt, der in Bild 1 dargestellt wurde, verschwindet hier. Bild 3 ist ein leeres, normales Bild, es gibt also keine Veränderung zu Bild 2 (nix bleibt nix). Bild 4 ist ebenfalls ein leeres, normales Bild, da es aber das letzte normale Bild vor einem Schlüsselbild ist, wird hier ein weißes Rechteck dargestellt (angezeigt wird immer noch nix). Bild 5 ist wieder ein Schlüsselbild mit Inhalt, hier wird also ein neuer Inhalt dargestellt. Bild 6 ist ein normales Bild, der Inhalt von Bild 5 wird also weiter angezeigt. Bild 7 ist ein leeres Schlüsselbild, der Inhalt verschwindet also. Danach gibt es keine Veränderung mehr bis zum Ende des Films bei Bild 10. Wenn Sie nun wissen wollen, welche Inhalte jeweils dargestellt werden, müssen Sie den Abspielkopf entsprechend setzen, und eventuell noch Ebenen ein- und ausblenden um herauszufinden, welche Elemente sich auf welcher Ebene befinden. Am „Ende der Zeit“ verschwinden alle Elemente auf Ebenen, die keine Bilder mehr enthalten. In Abbildung 40 ist im Bild Nr. 20 also der Inhalt von Ebene 1 und Ebene 2 schon verschwunden, nur Ebene 3 ist noch sichtbar. Abbildung 39: Beispiele für Schlüsselbilder, leere Schlüsselbilder und normale Bilder Abbildung 40: Das Ende der Zeit – in zwei Ebenen der Zeitleiste 34 Bild-für-Bild Animation Mit der Zeitleiste können Sie auf verschiedene Arten arbeiten: − − − − − − Rechte Maustaste Menü EINFÜGEN (SCHLÜSSEL)BILD KONTEXTMENÜ ZEITLEISTE Taste [F5] fügt ein Bild ein Taste [F6] fügt ein neues Schlüsselbild ein Taste [F7] fügt ein leeres Schlüsselbild ein Mit der Maus ZEITLEISTE UND GESCHWINDIGKEIT Das Bearbeiten der Zeitleiste verändert den Film: − − − − Bild einfügen = Zeit einfügen = Langsamer machen Bild löschen = Zeit löschen = Schneller machen Schlüsselbild einfügen = Bild kann sich ändern Schlüsselbild löschen = Keine Änderung mehr Die Zeitleiste ist die Grundlage für die verschiedenen Arten der Animation in Flash. 5.2 Bild-für-Bild Animation Abbildung 41: Zeitleiste einer Bild-für-Bild Animation Die Bild-für-Bild Animation entspricht im Arbeitsaufwand und in den Möglichkeiten dem Daumenkino: Sie zeichnen jedes Bild einzeln. Unterstützung beim Zeichnen bietet die Darstellung mit Zwiebelschalen. Dabei werden wie in Abbildung 42 gezeigt die Bilder vor und nach dem aktuellen Bild auch dargestellt, aber etwas abgeschwächt. 35 Zeit und Animation: Aktivieren der Darstellung Abbildung 42: Erstellung einer Bild-für-Bild Animation mit Hilfe der Zwiebelschalen-Darstellung Die Einzelbilder für die Bild-für-Bild Animation können z.B. aus einem Video entnommen sein, wie im Projekt „Bujaka“ von Herrmann, Hohnheiser und Scherr (MMA2005), das im Abbildung 43 gezeigt. Abbildung 43: Bild-für-Bild Animation aus Einzelbildern eines Videos Im klassischen Trickfilm gab es eine Arbeitsteilung: Der Chef zeichnet einige wichtige Keyframes. Die Hilfszeichner zeichnen die Bilder dazwischen (auf Englisch: „in between“). Diese Leute nannte man „Inbetweener“. Diesen Job übernimmt jetzt Flash für Sie. Die automatisch erstellen Bilder nennt man immer noch „Tween“. Flash unterstützt zwei Arten von Tweens: den Bewegungstween und den Formtween 5.3 Bewegungstween Der Bewegungstween dient nicht nur der Bewegung, er kann auch für die Veränderung von Alpha (Grad der Transparenz), Farbton, Größe, Drehung und Verzerrung eines Symbols eingesetzt werden. 36 Bewegungstween Abbildung 44 zeigt einen Bewegungstween, der wirklich für Bewegung eingesetzt wird. Auf der Abbildung sind die drei Positionen des Symbols gleichzeitig angezeigt: ganz links für Bild 1, das erste Schlüsselbild. Ganz rechts für Bild 15, das zweite Schlüsselbild. Die Position bei Bild 8 wird durch den Tween automatisch berechnet. Abbildung 44:Bewegungstween Zur Erstellung eines Bewegungstweens brauchen Sie eine Ebene die nur ein Symbol enthält, mit zwei Schlüsselbildern. Zwischen diesen beiden Schlüsselbildern kann dann auf zwei Arten ein Tween erstellt werden, wie in Abbildung 45: Entweder durch RechtsKlick in die Zeitleiste oder im Eigenschaften-Fenster. Abbildung 45: Erstellung eines Tweens Ob die Erstellung des Tweens gelungen ist, können Sie an der Zeitleiste und im Eigenschaftsfenster erkennen, wie in Abbildung 46 gezeigt. 37 Zeit und Animation: Abbildung 46: Darstellung von korrektem und defektem Tween Gründe, warum die Erstellung des Tweens fehlschlagen könnte, sind: mehr als ein Symbol auf der Ebene kein Symbol, sondern ein Original auf der Ebene kein Schlüsselbild am Ende des Tweens - Wenn Sie diese Fehler korrigieren, wird der Tween funktionieren. Wie anfangs erwähnt kann der Bewegungstween auch für die Veränderung von Alpha (Grad der Transparenz), Farbton, Größe, Drehung und Verzerrung eines Symbols eingesetzt werden, wie in Abbildung 47. Der Bewegungstween dient nicht nur der Bewegung, er kann auch für die Veränderung von Alpha (Grad der Transparenz), Farbton, Größe und Verzerrung eines Symbols eingesetzt werden, wie in Abbildung 47 gezeigt. Abbildung 47: Bewegungstween mit veränderter Helligkeit und Skalierung 38 Komplexe Bewegungen Da in Abbildung 47 das Symbol dunkler wird, an Größe zunimmt, und sich im Sichtfeld nach unten bewegt, entsteht der Eindruck einer perspektivischen Bewegung, der rote Kreis scheint näher zu kommen. Da Flash nicht wirklich dreidimensional modelliert, muß man die Tricks der Darstellung von 3d in 2d anwenden. Dazu gehört auch der Einsatz von verschiedenen „Kameraperspektiven“. Wird ein Hintergrundbild vergrößert, entsteht der Eindruck eines Zooms. Wird ein Hintergrundbild bewegt, entsteht der Eindruck einer Kamerafahrt. Sie müssen also die Wirkung einer Kamera nachbauen, es gibt in Flash kein Kamera-Objekt. PERSPEKTIVE KAMERA 5.4 Komplexe Bewegungen Wenn Sie eine Folge von Schlüsselbildern erstellen, und dazwischen jeweils Bewegungstweens, dann erhalten Sie eine flüssige Bewegung entlang gerader Strecken, wie in der linken Hälfte von Abbildung 48 gezeigt. Wenn die Bewegung nicht entlang gerader Strecken, sondern entlang einer Kurve erfolgen soll, benützt man einen Pfad, wie in der rechten Hälfte von Abbildung 48 gezeigt. Abbildung 48: Bewegungstween mit mehreren Schlüsselbilder, Bewegungstween entlang eines Pfades Die Erstellung der Pfadebene funktioniert analog zur Erstellung der Masken-Ebene (siehe Kapitel 3.2). Die Pfadebene darf nur eine Kontur enthalten, keine Füllung und kein Symbol, diese Kontur ist dann der Pfad. Das Symbol im Start-Schlüsselbild und EndSchlüsselbild müssen mit dem Pfad verbunden werden, wie in Abbildung 49 gezeigt. 39 Zeit und Animation: Abbildung 49: Das Symbol wird am Pfad angebracht Das Symbol mit der Maus an seinem Registrierungspunkt nehmen, und zum Pfad ziehen. Der Registrierungspunkt springt automatisch auf den Pfad, man kann dann das Symbol nur noch entlang des Pfades bewegen. DREHUNG Mit einem Bewegungstween können Sie ein Symbol auch drehen. Verwenden sie das Werkzeug „frei transformieren“ um den „Transformationspunkt“ (ein kleiner Kreis) zu positionieren. Er befindet sich über dem Registrierungspunkt des Symbols, wenn er noch nicht verschoben wurde. In Abbildung 50 wurde der Transformierungspunkt ausserhalb des Symbols positioniert. Im Eigenschaftsfenster können Sie die Drehung genau spezifizieren, falls die automatische Einstellung nicht funktioniert. Abbildung 50: Werkzeuge, Bühne, Eigenschaften eines Bewe- GESCHWINDIGKEIT gungstween mit Drehung Die Geschwindigkeit der Bewegung können Sie durch Setzen von Zwischen-Schlüsselbildern steuern. Die Geschwindigkeit ergibt sich als Verhältnis zwischen zurückgelegtem Pfadabschnitt und verflossener Zeit. 40 Formtween Abbildung 51: Zwischen-Schlüsselbider zur Steuerung der Geschwindigkeit in einem Bewegungstween Die Animationsmöglichkeiten in Flash mit Bewegungstweens sind nur ein kleiner Vorgeschmack auf die Fähigkeiten von Maya oder Aftereffects. 5.5 Formtween Der Formtween wird wesentlich seltener verwendet als der Bewegungstween. Ein Formtween kann eine Füllung in eine andere Füllung überführen. Dabei verändert Flash nicht nur die Form, sondern auch die Farbe der Füllung, wie in Abbildung 52 gezeigt. Abbildung 52:Formtween, defekter Formtween Typische Gründe warum die Erstellung des Formtweens fehlschlagen könnten sind: Nicht nur Füllung, sondern auch Kontur auf der Ebene Nicht Füllung (Original!) sondern Symbol auf der Ebene ERFOLGSKRITERIEN FORMTWEEN FÜR DEN - Sie sollten den Formtween nur in seltenen Fällen verwenden, meist ist ein Bewegnungstween effizienter. 41 MovieClips – Film im Film: 6 MovieClips – Film im Film MovieClips sind wichtig um das Flash-Projekt zu ABBILDUNG 53: EIN MOVIECLIP DER BIBLIOTHEK IN strukturieren. Ein MovieClip ist ein Symbol mit einer eigenen Zeitleiste, also ein kleiner „Film-im-Film“. In der Bibliothek wird neben dem Vorschaubild des MovieClips ein Play-Button dargestellt, mit dem man diesen Film ablaufen lassen kann. Es ist üblich 6 den MovieClips in der Bibliothek einen Namen zu geben, der auf MC endet, im Beispiel in Abbildung 53 sind das AlgeMC, FischMC und OktopusMC. Sie können ein Grafiksymbol im nachhinein in ein MovieClip umwandeln, mittels eines Rechts-Klicks auf die Zeile des Symbols in der Bibliothek. Um genau zu sein: es ist üblich eine Namens-Konvention zu verwenden. Wie die Konvention aussieht ist von Team zu Team verschieden. Wichtig ist, dass alle Leute in einem Projekt sich daran halten. 6 42 Formtween Das betrifft aber nur neue Instanzen die sie erstellen, alle Instanzen die sich schon auf der Bühne befinden müssen Sie händisch auf MovieClip umstellen (im Eigenschafts-Fenster) Die Wirkung der Hauptzeitleiste und der Zeitleiste im MovieClips kann man kombinieren. Dies sei am Beispiel eines Fisches erläutert, der von links nach rechts schwimmt, und dabei mit den Flossen schlägt. Die „grobe“ Bewegung findet auf der Hauptzeitleiste statt, wie in Abbildung 54 gezeigt: Im Zeitraum von 60 Bildern bewegt sich der Fisch 500 Pixel weit. Abbildung 54: Bewegung der MovieClip Instanz auf der Hauptbühne (Hauptzeitleiste) Die Bewegung der Flossen findet in der Zeitleiste des MovieClips statt, wie in Abbildung 55 gezeigt. Diese Zeitleiste enthält 12 Bilder. Abbildung 55: Zeitleiste im MovieClip Während des 60 Bilder langen Tweens auf der Hauptzeitleiste werden die 12 Bilder des MovieClips 60 / 12 = fünf mal wiederholt. Abbildung 56 versucht das darzustellen. 43 MovieClips – Film im Film: Abbildung 56: Hauptzeitleiste und Zeitleiste des MovieClips symbolisch überlagert Da in diesem Fall die Rechnung genau aufgeht (5 mal 12 = 60) sieht die Bewegung bei jedem Durchlauf genau gleich aus. Geht die Rechnung nicht auf (z.B. 11 Frames im MovieClip), dann sieht die Bewegung erst nach vielen Durchläufen wieder gleich aus. 44 Einsatz von MovieClips 6.1 Einsatz von MovieClips MovieClips sind die wichtigste StrukturierungsEinheit von Flash. Wenn man die MovieClips richtig wählt, kann man sie vielseitig einsetzen. Damit sind Änderungen im Konzept auch nach Beginn der Umsetzung noch möglich. Wenn man sie ungeschickt wählt ist man unflexibel. Ein paar Tipps zur Auswahl von MovieClips: − Was sich über die Bühne bewegt, ist ein MovieClip (nicht zwei oder drei) Bewegung eines Objekts unabhängig machen von Veränderung eines Objekts: die „innere“ Zeitleiste des MovieClips wird für innere Bewegungen verwendet wie blinzeln, mit den Flossen schlagen, Beine bewegen. Die „äussere“ Zeitleiste wird für die Bewegung quer über die Bühne verwendet. − Abbildung 57: Bild-für-Bild Animation wird zu einem MovieClip 45 Buttons: 7 Buttons Bisher waren alle Ihre Flash-Werk nur „Filme“. Nach dem Start liefen sie jedes Mal gleich von Anfang bis zum Ende ab. Mit Buttons können Sie ihren Film jetzt interaktiv machen: die UserIn kann durch anklicken von Buttons den Ablauf des Filmes beeinflussen – stoppen, starten, Alternativen auswählen. Die korrekte Übersetzung des englischen Begriffes „Button“ wäre „Schaltfläche“. Dieser Begriff entspricht zwar der DIN-Norm, ist aber nicht sehr gebräuchlich. Deswegen wird in diesem Skriptum der gängigere Betriff „Button“ verwendet. Ein Button in Flash braucht nicht so auszusehen wie ein Button der Betriebssystem-Oberfläche (wie in Abbildung 58 gezeigt). Das Aussehen von Buttons in Flash ist völlig frei gestaltbar. Abbildung 58: Standard-Buttons von Windows, Mac OS X, Gnome (Linux) 7.1 Buttons in Flash Ein Button ist eine Art Mini-MovieClip mit nur vier Frames mit den Namen Auf, Darüber, Drücken und Aktiv. Der Frame Auf wird dargestellt, wenn die Maus sich nicht über dem Button befindet. Ist die Maus über dem Button wird der Frame Darüber dargestellt. Wird dabei der Maus-Button gedrückt wird Drücken dargestellt. 46 Buttons in Flash Abbildung 59:Aktiver Bereich eines Buttons gleich sichtbarer Bereich Wenn man also die Maus über die Schatzkiste in Abbildung 59 bewegt, dann öffnet sie sich. Die Größe des Buttons ist frei festlegbar. Sie können also einen kleinen 50 mal 20 Pixel Button ebenso erstellen, wie einen Button der die gesamte Bühne überdeckt. Schwierigkeiten macht das nur, wenn mehrere Buttons den gleichen Raum auf der Bühne beanspruchen. Es kann immer nur ein Button „die Maus bemerken“, wie in Abbildung 60 gezeigt. GRÖßE Abbildung 60: Drei Buttons mit Überlappung, nur eine ist jeweils aktiv Im mittleren Bild ist die Maus an einer Position an der sich der runde und der quadratische Button überlappen. Der quadratische Button ist weiter vorne, deswegen „bemerkt“ nur er die Maus, und geht in den Darüber Zustand. Der Frame Aktiv entscheidet darüber, in welchem Bereich der Button auf die Maus reagiert. In Abbildung 59 ist dieser aktive Bereich gleich dem sichtbaren Button. Das muss aber nicht so sein. In Abbildung 61 ist der aktive Bereich sehr klein: nur das Schloss der Schatzkiste. Hier öffnet sich die Schatzkiste also nur, wenn man auf das Schloss klickt. AKTIVER BEREICH 47 Buttons: Abbildung 61: Aktiver Bereich eines Buttons, der sich vom sichtbaren Bereich unterscheidet 7.2 Wiederverwertung Auch beim Erstellen von Buttons sollten Sie an Wiederverwertung denken: Um eine Navigationsleiste zu erstellen wie in Abbildung 62 gezeigt, brauchen Sie nur einen einzigen Button, von dem mehrere Instanzen verwendet werden. Die Beschriftung ist nicht Teil des Buttons, sondern wird mit separaten Textfeldern realisiert. Abbildung 62: Wiederverwendung eines Buttons mit verschiedenen Beschriftungen Abbildung 62 zeigt eine Mischung aus verschiedenen Ansichten des Flash Editors und des Flash Players (So werden Sie das nie am Bildschirm sehen). In der linken Hälfte der Abbildung sehen Sie einen Ausschnitt aus dem Film Explorer (Tastenkürzel [ALT]-[F3]) des Flash Editors. Hier sehen Sie einen Überblick über die 48 Wiederverwertung Buttons und Textfelder des Flash-Films. In der rechten Hälft der Abbildung sehen Sie einerseits den ganzen Film im Flash Player, und als kleinen Ausschnitt darüber gelegt einen Teil der Bühne aus dem FlashEditor. Im Film-Explorer können Sie sehen, dass sich vier Instanzen des Buttons mit dem Namen KnopfBtn auf der Bühne befinden, die Instanzen tragen die Namen a_btn, b_btn, c_btn und d_btn. Ein blauer Pfeil in der Abbildung weist von a_btn zu der Darstellung von a_btn auf der Bühne. Wie sie sehen können ist der Button rechteckig, und scheint einen gelben Kreis und den Buchstaben A zu beinhalten. Ebenfalls im Film-Explorer können Sie vier Textfelder erkennen. Ein blauer Pfeil verweist vom Textfeld mit dem Buchstaben B auf die Darstellung dieses Textfeldes auf der Bühne. Was für die UserIn also wie vier Schalter mit Beschriftung aussieht besteht aus viermal demselben Button und vier verschiedenen Beschriftungen. Der Buchstabe A gehörte auch nicht wirklich zu a_btn, sondern befindet sich auch in einem separaten Textfeld. 49 Audio und Video einbinden: 8 Audio und Video einbinden In diesem Kapitel lernen Sie die verschiedenen Methoden kennen, wie man Audio und Video in Flash einbindet. Das Abspielen von Audio und Video mit einer selbst gestaltbaren Oberfläche ist ein USP von Flash. 8.1 Audiodatei einbetten Flash arbeitet prinzipiell mit folgenden AudioDateiformaten: • • • WAV (nur Windows) AIFF (nur Macintosh) MP3 (Windows oder Macintosh) Eine in die fla- und swf-Datei eingebettete Sounddatei nennt man auch „Sound-Ereignis“. Ein solches SoundEreignis muss, bevor es abgespielt werden kann, erst vollständig geladen sein. AUDIO IMPORTIEREN Entweder zieht man die Sounddatei direkt in die Bibliothek oder man fügt sie über DATEI -> IMPORTIEREN > IN BIBLIOTHEK IMPORTIEREN ein. Abbildung 63 zeigt eine Sounddatei namens loop01.mp3 die in die Bibliothek importiert wurde. Mittels des in der Abbildung rot markierten PlayButtons kann man sich noch einmal vergewissern, ob die Sounddatei wirklich abgespielt werden kann. Abbildung 63: Importierte Sounddatei in der Bibliothek Diese Sounddatei wird nun beim Exportieren in die swf-Datei mit eingebunden. Dadurch vergrößert sich jedoch die swf-Datei. Die Alternative dazu wäre das Streaming Abbildung 64: Audio in der Zeitleiste 50 Video Streaming Sie können nun die Audio-Datei auf die Bühne ziehen. Auf der Bühne selbst ist Audio nicht sichtbar, aber in der Zeitleiste. Hier sehen Sie auch wie viele Frames lang der Sound andauert. In Abbildung 64 wurde ein Klingelton in das MovieClip einer Klingel importiert. Wenn das MC abgespielt wird ertönt auch der Klingelton. Im Eigenschaften-Fenster können Sie die Details einstellen: Hier können Sie einen andern Sound auswählen, den Sound wiederholen lassen oder in Endlosschleife laufen lassen. Sie können sogar sehr einfache Bearbeitung wie Lautstärkenveränderungen vornehmen. Abbildung 65: Eigenschaften einer AudioDatei auf der Bühne Unter DATEI EINSTELLUNGEN FÜR VERÖFFENTLICHUNGEN findet man Möglichkeiten, die Audiodateien innerhalb von Flash neu zu komprimieren, siehe Abbildung 66. Dies lässt sich für „Audio-Ereignisse“ sowie für „Audio-Streams“ getrennt einstellen. Hierbei muss man beachten, dass mit „Audio-Stream“ nur ein Flash-interner Audio-Stream gemeint ist. D.h. eine Audiodatei ist eingebettet, wird aber gestreamed und nicht vorher geladen. Sollte die Datei extern gestreamed werden, hängt die Qualität allein von der externen Datei ab. 8.2 Video Streaming Bei Video ist Streaming eindeutig das einzig sinnvolle Verfahren – Videos sind immer zu groß um sie einzubetten. Video Streaming funktioniert mit Dateien im flvFormat. Dabei wird also die swf-Datei und die flvDatei auf den Webserver geladen, die swf-Datei wie üblich in die Webseite eingebaut. Das Laden und Abspielen der flv-Datei erledigt dann Flash. Der erste Schritt ist also immer die Erzeugung der flvDatei. Manche Programme (besonders aus dem Hause Adobe) können flv bereits exportieren. Falls die Datei Abbildung 66: Einstellungen für Veröffentlichungen: Audio-Qualität 51 Audio und Video einbinden: in einem andern Video-Format vorliegt kann sie mit dem Flash Video Encoder konvertieren. 8.3 FLV-Video abspielen Für das Abspielen der Videos gibt es eine fertige flvKomponente. Wenn man diese (ähnlich wie ein Symbol) auf die Bühne zieht, dann hat die Instanz auf der Bühne nicht nur Eigenschaften sondern auch Parameter: Abbildung 67: Eigenschaften und Parameter eine Komponenten-Instanz Als Parameter contentPath den Pfad zur flv-Datei eingeben. Der Parameter skin ist besonders bequem: hier bietet Flash viele fertige Skins an. Abbildung 68: Skins für den FLVPlayer Zusammenfassend ist das erstellen eines Players einfach und schnell erledigt. 52 FLV-Video abspielen 53 Actionscript: 9 Actionscript Link zu einer anderen Webseite. Ein einfaches Puzzle, bei dem die UserIn Teile bewegen kann. Eine Navigationsleiste die zwischen verschiedenen Flash-Filmen hin und her schalten kann. Die einzelnen Flash-Filme müssen nur als swf-Datei zur Verfügung stellen, müssen nicht verändert werden um verwendet zu werden. Eine Animation kann angehalten und von der UserIn neu gestartet werden. Ein interaktiver Film mit zwei alternativen Enden. Die UserIn entscheidet mit einem Klick wie der Film endet. Eine Spielfigur, die durch ein MovieClip dargestellt wird, wird gesteuert. Eine kleine verrückte Maschine: wenn man verschiedene Knöpfe drückt passieren verschiedene Dinge. Ein Puzzle, das Fehlversuche und richtig gelegt Puzzlesteine mitzählt. Ein Preloader zeigt an wie viel Prozent der swf-Datei schon geladen sind. Erst wenn 100% erreicht sind startet der Film. Mehrere Sterne werden auf die Bühne gezeichnet Ein MovieClip soll interaktive eingefärbt werden: Die BenutzerIn klickt auf einen von mehreren Farb-Auswahl-Buttons, und die Farbe wird übernommen. Der Hintergrund des Flash-Films wird mit einem Muster aus Linien bedeckt: lauter senkrechte Linien mit 10 Pixel Abstand. Generative Tapete: Die gesamte Flash-Bühne wird mit zwei Grundformen „tapeziert“. Welche der beiden Formen verwendet wird entscheidet der Zufall, dadurch entsteht jedes Mal ein anderes Muster. Eine Zeichnung wird Schritt für Schritt aufgebaut. Eine Kurve wird angezeigt, mit Anfangs- End- und Kontrollpunkt. Die drei Punkte kann man mit Drag-and-Drop positionieren, die Kurve wird dabei immer wieder neu gezeichnet, sie scheint sich mit zu bewegen. Die aktuelle Uhrzeit wird grafisch angezeigt. Ein Ball bewegt sich gleichförmig über die Bühne, am Rand der Bühne prallt er ab Ein Ball trifft auf einen Ziegelstein und zerschlägt diesen. Ein Audio-Player soll mp3-Dateien abspielen, steuern und den Namen des Stücks in einem dynamischen Textfeld anzeigt. Die mp3-Dateien müssen die Dateinamen 1.mp3, 2.mp3, 3.mp3, … haben. Ein allgemeiner Videoplayer soll verschiedene ein flv-Videos abspielen können, diese werden bei der Einbindung der swf-Datei in den HTML-Code angegeben. Glückskeks: Aus einem großen Vorrat von ewigen Weisheiten wird eine zufällig ausgewählt und angezeigt. Quiz: Eine Frage mit zwei möglichen Antworten wird angezeigt, die UserIn klickt auf eine Antwort und erhält sofort eine Rückmeldung ob die Antwort richtig war. 66 67 68 70 71 76 78 84 86 92 94 98 104 113 114 114 115 118 120 124 126 126 Beispiel 1) Beispiel 2) Beispiel 3) Beispiel 4) Beispiel 5) Beispiel 6) Beispiel 7) Beispiel 8) Beispiel 9) Beispiel 10) Beispiel 11) Beispiel 12) Beispiel 13) Beispiel 14) Beispiel 15) Beispiel 16) Beispiel 17) Beispiel 18) Beispiel 19) Beispiel 20) Beispiel 21) Beispiel 22) 54 Entwicklungsumgebung Was ist Actionscript Actionscript ist die Programmiersprache von Flash. Actionscript hat eine lange Geschichte hinter sich. Deshalb eine Warnung: oft findet man alte, umständliche, lange Skripts am Web, die für eine frühere Version von Flash programmiert wurden. Hier sollte man also auf die VersionsAngabe achten. Die akutellen Versionen sind „Actionscript 2“ (AS2) und „Actionscript 3“ (AS3). AS3 bietet fortgeschrittenere Programmiermöglichkeiten für fortgeschrittene ProgrammiererInnen. Wir bleiben bei der Version AS2 die leichter zu erlernen ist. Actionscript-Programme können Sie im Fenster AKTIONEN (Tastatur-Kürzel F9) schreiben. 9.1 Entwicklungsumgebung HILFSMITTEL Für EinsteigerInnen die das direkte Eintippen des Codes scheuen gibt es Unterstützung durch die Flash Umgebung: Verhaltensweisen, Werkzeugleiste für Aktionen, Automatische Codeformatierung, Tooltipps. Diese Hilfsmittel werden hier in einem ersten Schritt vorgestellt. Das Fenster VERHALTEN wurde in Anlehnung an Dreamweaver gestaltet. Abbildung 69 zeigt dieses Fenster. Die gezeigte Situation wurde in drei Schritten erstellt: 1) Auf der Bühne wurde der Button mit dem Instanznamen weiter_btn ausgewählt. Im VERHALTEN -Fenster wird das in der Kopfzeile angezeigt. 2) Mit dem Plus-Zeichen in der linken oberen Ecke des VERHALTEN-Fensters wurde die Aktion ANSTEUERN UND ABSPIELEN BEI BILD eingefügt. Dadurch entstand die Zeile im Fenster. FENSTER VERHALTEN 55 Actionscript: 3) Mit einem Klick auf die linke Hälfte der Zeile wurde das Ereignis festgelegt, bei dem die Aktion ausgeführt wird. FENSTER AKTIONEN Als „Nebenwirkung“ der Arbeit im VERHALTEN-Fenster wurde im AKTIONEN-Fenster 5 Zeilen Actionscript-Code eingefügt, wie in Abbildung 69 rechts gezeigt. Abbildung 69: Fenster VERHALTEN erzeugt auch Actionscript, siehe Fenster AKTIONEN Übung 1) Betrachten Sie die Abbildung 69 genau: Woran können Sie erkennen wo der Code positioniert ist? Welches Ereignis den Code auslöst? Welcher Befehl ausgeführt wird? (Antworten auf Seite 149). Sie können ein Programm im VERHALTEN-Fenster erstellen, und dann im AKTIONEN-Fenster weiter bearbeiten. WERKZEUGLEISTE UND SKRIPT-NAVIGATOR Das Aktionen-Fenster besteht wie in Abbildung 70 gezeigt aus drei Teilen: Rechts wird der Programmcode angezeigt. Links oben in der WERKZEUGLEISTE sind alle Actionscript-Befehle verzeichnet, und können durch einen Klick in den Code eingefügt werden. Links unten befindet sich der SKRIPT-NAVIGATOR. Hier kann man sehen an welchen Stellen in der Flash-Datei Actionscript eingefügt ist, und durch einen Klick diese Stelle im Code-Fenster anzeigen lassen. 56 Entwicklungsumgebung Werkzeugleiste SkriptNavigator weiter_btn Abbildung 70: AKTIONEN-Fenster mit Werkzeugleiste und Skript-Navigation Wenn Sie Code direkt in das Code-Fenster eintippen erhalten Sie noch Unterstützung durch Tooltipps, wie in Abbildung 71 gezeigt: Mit einem Dropdown-Menü bietet Flash Ergänzungen zum Code an (unterer Teil der Abbildung), mit einem kleinern Popup Informationen zum ausgewählten Befehl (oberer Teil der Abbildung). TOOLTIPPS Abbildung 71: Tooltipps im AKTIONEN-Fenster Sie können Ihre Actionscript-Programme auch außerhalb von Flash erstellen. Mit dem #include Befehl können Sie ein Actionscript-Programm, das als eigene Datei gespeichert ist herein laden. Achtung: der #include Befehl ist ungewöhnlich: am Ende der Zeile darf kein Semikolon/ Strichpunkt stehen! #include "mehrcode.as" ACTIONSCRIPT FLASH AUßERHALB VON Code AnsichtsOptionen PopupMenü 57 Actionscript: 9.2 Hilfe Das Flash-Fenster HILFE können Sie mit dem Tastenkürzel [F1] öffnen. Wenn der Cursor sich im AKTIONEN-Fenster befand, wird in der Flash-Hilfe automatisch eine passende Seite zum aktuellen Befehl angezeigt. In Abbildung 72 sehen Sie die Seite in der Flash-Hilfe zum Thema on(). VersionsHinweise Parameter Pseudo-Code. Abbildung 72: Flash-Hilfe zum Befehl on() Das Lesen der Flash-Hilfe braucht einige Übung. Es wird hier sehr viel Programmier-Fachvokabular verwendet, das man sich erst aneignen muss. Besonders gefährlich am Anfang: Unter der Überschrift Verwendung findet man „Pseudo-Code“, das ist eine Mischung aus echtem Computerprogramm und Teilen die man erst ersetzen muss. Diesen Code kann man also nicht direkt ins AKTIONEN-Fenster kopieren! Fertige, kopierbare Beispiele finden Sie am Ende der Hilfe, unter der Überschrift Beispiel. In der Abbildung 72 sieht dieser Pseudo-Code zum Beispiel so aus: 58 Links zu weiteren Seiten in der Flash- Beispie- Wo ist der Code? Das kursiv gestellte Wort mausereignis ist nicht wörtlich gemeint, hier muss man erst den Namen eines Mausereignisses einfügen. Welche Mausereignisse es gibt ist unter der Überschrift Parameter nachzulesen, ein Mausereignis wäre zum Beispiel release. Zeilen die mit zwei Schrägstrichen „//“ beginnen sind Kommentare, kein Actionscript-Code. An dieser Stelle muss man statt der Kommentar-Zeile einen oder mehrere Befehle einfügen. Ein korrektes ActionscriptProgramm mit dem on()-Befehl könnte also so aussehen: on(release) { play(); } on(mausereignis) { // Anweisungen hier // einfügen } Was der on()-Befehl wirklich bewirkt sehen Sie im Kapitel 11.1 ab Seite 70. All diese Hilfsmittel erleichtern das Eintippen des Codes, ersetzen aber nicht das Verständnis! Wenn Sie programmieren wollen, müssen Sie den Code verstehen – bis zum letzten Punkt und Komma. Denn jeder Punkt und jedes Komma hat eine Bedeutung. 9.3 Wo ist der Code? Die Frage „Wo ist der Code“ bezieht sich hier nicht auf das VERHALTEN- oder das AKTIONEN-Fenster. Unabhängig davon auf welche Art Sie den Code erstellen: der Code ist immer entweder einem bestimmten Bild einer Zeitleiste, oder einer bestimmten Instanz eines Symbols (nur MovieClip oder Button) zugeordnet, wie in Abbildung 73 gezeigt. Abbildung 73: Actionscript auf Bildern der Zeitleiste oder auf Instanzen auf der Bühne Ist Actionscript-Code auf einem Bild der Zeitleiste gespeichert, dann wird dieses Faktum als kleiner Buchstabe „a“ in der Zeitleiste dargestellt. Ob an einer (Button- oder MovieClip-) Instanz auf der Bühne Ac- 59 Actionscript: tionscript-Code gespeichert ist kann man nicht auf den ersten Blick erkennen. In beiden Fällen gilt: Im Fenster AKTIONEN wird der Actionscript-Code des jeweils ausgewählten Bildes bzw. der jeweils ausgewählten Instanz angezeigt. Der SKRIPT-NAVIGATOR im AKTIONEN-Fenster gibt einen Überblick über den gesamten Code, eine ähnliche Darstellung finden Sie auch im FILM-EXPLORER. In Abbildung 74 ist derzeit das erste Bild auf der Ebene zwei ausgewählt, hier kann gerade Code eingetippt werden. Insgesamt ist an zwei verschiedenen Stellen Code gespeichert: auf dem 13. Bild der Hauptzeitleiste in Ebene 2. Und auf dem Button mit dem InstanzNamen weiter_btn, der sich auf der Hauptzeitleiste befindet. Abbildung 74: Der Skriptnavigator 9.4 Namen Bei der Programmierung mit Actionscript ist es wichtig, dass allen Ressourcen (Symbole, Instanzen, Bilder) aussagekräftige Namen haben. Diese Namen „im Nachhinein“ zu verändern würde viel Arbeit nach sich ziehen: die Namen werden wieder und wieder im Programmcode verwendet. Deswegen gehört zur Planung eines Flash-Projekts auch die Festlegung der wichtigsten Namen, und einer Namens-Konvention. Nicht jedes Wort kann als Name in Flash verwendet werden, hier gibt es genaue Regeln. In der Flash-Hilfe heisst es dazu: Variablennamen können nur Buchstaben, Zahlen und Dollarzeichen ($) enthalten. Lassen Sie einen Variablennamen nicht mit einer Zahl beginnen. Die Variablennamen müssen eindeutig sein, das heißt, sie dürfen nur einmal vorkommen. In Flash Player 7 und neueren Versionen wird die Großund Kleinschreibung berücksichtigt. Umlaute und scharfes ß sind erlaubt (aber noch nicht lange). 60 Hilfsmittel für die Fehlersuche Zulässige Namen hansi hansi1 Verbotene Namen 1hansi hans im glueck hansimglück Abbildung 75: Beispiele für zulässige und unzulässige Namen Soviel zu den fix vorgegebenen Grenzen. Zusätzlich empfiehlt es sich folgende Konventionen einzuhalten: 1. Kamelschreibweise: Wenn ein Name aus mehreren Wörter gebildet wird, wird das erste Wort groß oder klein, alle weiteren groß geschrieben, z.B.: anzahlFragen, farbeLinks, FeindUfo, BonusBlume 2. Symbole, Klassen, Komponenten werden groß geschrieben, MovieClip-Symbole erhalten die Endung MC, Buttons die Endung Btn: FeindUfoMC, DummyBtn, NaviBtn, … 3. Variablen werden klein geschrieben: anzahlFragen, farbeLinks, … 4. MovieClip-Instanzen, Button-Instanzen, Textfelder werden klein geschrieben und erhalten eine Endungen: player_mc, play_btn, output_txt, … Diese Konventionen sollen das Lesen des Programmcodes erleichtern, und werden von vielen ActionscriptProgrammiererInnen eingehalten. Übung 2) Hier ein paar Beispiele für Namen. Welche davon sind unzulässig? Welche stehen für Symbole (in der Bibliothek), welche für Instanzen, welche für Variablen? Welche sind zwar zulässig, entsprechen aber nicht den oben beschriebenen Konventionen? ball_mc 8ung_txt ball_mc_2 DummyBtn anzahlBälle home_btn mc_ball grünerBall_mc BallMC Zweiter Ball MC Player_mc ausgabe_txt 9.5 Hilfsmittel für die Fehlersuche Auch für die tollsten Programmier-Profis gilt: die meiste Zeit verbringen sie mit der Fehlersuche. Das Erfinden und Eintippen des Programmcodes geht sehr FRUSTRATION UND ERFOLG 61 Actionscript: schnell, die Fehlersuche hingegen braucht Zeit. Auch wenn man in einem Tag ein geniales Programm erschaffen hat, das ein wichtiges Problem löst und vielen Leuten Freude bereiten wird: Die meiste Zeit dieses Tages hat man mit den Programmfehlern verbracht. Deswegen braucht man fürs Programmieren eine hohe Frustrationstoleranz. Wenn das Programm dann endlich funktioniert, von vielen Leuten verwendet wird, wunderbare Arbeit leistet – dann bin ich als Programmiererin schon mit dem nächsten Projekt, und den nächsten Fehlern beschäftigt. Es gibt viele Strategien um Fehler zu vermeiden und schnell zu finden: KLEINE SCHRITTE Beim Schreiben von Programmen geht man in vielen kleinen Schritten vor: ein paar Zeilen programmieren, das Programm testen, ein paar Zeilen programmieren, wieder testen. Durch diese Vorgangsweise schafft man es oft fehlerfreie Programme zu schreiben. Und schleicht sich doch ein Fehler ein, so findet man ihn schnell – er kann ja nur im letzten Schritt dazu gekommen sein, man weiß also genau in welchen Programmzeilen er sich versteckt. LESEN FEHLERMELDUNG Wenn ein Fehler auftritt sollte man alle Informationen die Flash zur Verfügung stellt nutzen. Abbildung 76 zeigt eine Fehlermeldung des Actionscript Interpreters. Abbildung 76: Fehlermeldung Man liest diese Fehlermeldungen sorgfältig von Oben nach Unten. Bei der in Abbildung 76 gezeigten Fehlermeldung befindet sich die wichtigste Information am Ende der ersten Zeile: '{' erwartet Im Programm fehlt also eine öffnende geschwungen Klammer. Wo fehlt sie? In Szene 1, auf Ebene 1, in 62 Hilfsmittel für die Fehlersuche Bild 1, in der zweiten Zeile des ActionscriptProgrammes. Nun können Sie den Film-Explorer verwenden um ganz gezielt das Problem anzusteuern: Abbildung 77: Gezieltes Ansteuern des Fehlers mit dem Film Explorer Falls im Ausgabe-Fenster mehrere Fehler angezeigt werden sollten Sie immer den ersten Fehler beheben, und das Programm erneut testen – oft sind die weiteren Fehler so genannte „Folgefehler“, die sich nur aus der Verwirrung nach dem ersten Fehler ergeben. Wenn Sie vermuten, dass eine Programmzeile falsch ist, oder sie die Programmzeile vorübergehen nicht brauchen, dann können Sie Kommentarzeichen davor setzen: // x = 4; Jetzt ist die Zeile „auskommentiert“, sie wird also nicht ausgeführt. Wenn man die Zeile später doch wieder braucht, kann man die beiden Schrägstriche wegnehmen, und die Zeile wird wieder wirksam. Wenn Programme länger und komplexer werden treten andere Arten von Fehler auf: die Schreibeweise des Programms passt, aber die Logik stimmt nicht, es passieren nicht die richtigen Dinge in der richtigen Reihenfolge. Ein Hilfsmittel, um den Programmablauf zu verfolgen sind so genannte trace Meldungen, die im Ausgabefenster angezeigt werden. Der Text der beim Befehl trace in Klammern und Anführungszeichen angegeben ist, wird im Ausgabefenster angezeigt. So haben Sie beim Testen des Programms einen Überblick an welcher Stelle in Ihrem TRACE MELDUNGEN PROGRAMMZEILEN AUSKOMMENTIEREN on(release) { play(); trace("Film gestartet"); } 63 Actionscript: Programm der Actionscript-Interpreter gerade arbeitet. 9.6 Fragen und Übungsaufgaben Übung 3) Wiederholung Flash-Basics: Was bewirken folgende Tastatur-Befehle? Strg + Z T A Strg-Enter E F9 B Alt-F3 Shift-F12 F11/Strg-L F8 F5 F6 Strg-B F7 Übung 4) Wiederholung Flash-Basics: Was unterscheidet Form-Tween und Bewegungs-Tween? FormTween BewegungsTween Mit diesem Tween kann man die Farbe ändern Mit diesem Tween kann man etwas quer durchs ganze Bild bewegen Dieser Tween funktioniert nur mit Symbolen Dieser Tween funktioniert nicht mit Symbolen Mit diesem Tween kann man die Grösse ändern. Mit diesem Tween kann man einen Buchstaben in einen Stern verwandeln Mit diesem Tween kann man einen Stern im Uhrzeigersinn drehen. Dieses Tween braucht weniger Speicherplatz 64 Fragen und Übungsaufgaben Übung 5) Wiederholung Flash-Basics: Die Anzeige im Flash-Editor stellt verschiedene Arten der Selektion verschieden dar. Was ist jeweils selektiert? Übung 6) Wiederholung Flash-Basics: Wozu muss man Text teilen? Nennen Sie zwei Gründe. Übung 7) Wiederholung Flash-Basics: Beschreiben Sie die folgende Zeitleiste, verwenden Sie dabei das Fachvokabular korrekt: 65 Ohne zu Programmieren: 10 Ohne zu Programmieren Bevor wir zu Programmieren beginnen ein paar Beispiele für einfache Fragestellungen die sich ohne Programmierung lösen lassen. Dazu verwenden wir das VERHALTEN-Fenster. 10.1 Navigation Beispiel 1) Link zu einer anderen Webseite. Die Gestaltung des Buttons bleibt dabei völlig frei, Abbildung 78 zeigt ein mögliches Beispiel wie eine entsprechende Button-Instanz aussehen kann. Abbildung 78: Ein Button als Link zu einer anderen Webseite Wie bei einem Link in HTML muss man auch bei einem Link in Flash zuerst wissen wo der Link hin gehen soll: dazu braucht man die genaue URL der Webseite. Am einfachsten entnimmt man die URL mit „copy“ aus der Adress-Anzeige eines Webbrowsers. Dann selektiert man die Instanz des Buttons, und fügt dann wie in Abbildung 79 gezeigt das Verhalten hinzu. Abbildung 79: Erstellen eines Links mit dem Verhalten-Fenster 66 Drag and Drop Neben der URL könnte man auch ein Ziel-Fenster bzw. Ziel-Frame für den Link angeben, die Angabe entspricht bei einem HTML-Link dem Attribut target. Mit der Standard-Einstellung _self wird die Webseite im aktuellen Frame und Fenster angezeigt. Sie können die URL im Nachhinein ändern, indem Sie im Verhalten-Fenster auf die Zeile doppelklicken. Im Aktionen-Fenster können Sie den Code betrachten, der durch das Verhalten erzeugt wurde, siehe Abbildung 80. Abbildung 80: Actionscript Code der durch das Verhalten erstellt wurde Übung 8) Bauen Sie eine Mini-Flash-Navigation mit drei Links 10.2 Drag and Drop Beispiel 2) Ein einfaches Puzzle, bei dem die UserIn Teile bewegen kann. Abbildung 81 zeigt nur die Puzzle-Stücke, nicht aber das Hintergrundbild in das diese Teile hineinpassen. In der rechten Hälfte der Abbildung sehen sie die Verhaltensweisen die für Drag-and-drop notwendig sind. 67 Ohne zu Programmieren: Abbildung 81: Drag and Drop mit Verhalten Der entsprechende Actionscript-Code sieht für alle Puzzle-Teile genau gleich aus: on (press) { this.startDrag(); } on (release) { this.stopDrag(); } Eine Überprüfung ob alle Teile am richtigen Ort gelandet sind könne Sie noch nicht programmieren, dafür brauchen wir Verzweigungen. Siehe 12, Seite 84. Übung 9) Bauen Sie ein selbst gestaltetes Puzzle mit mindestens drei beweglichen Teilen 10.3 Andere Flash-Filme laden Beispiel 3) Eine Navigationsleiste die zwischen verschiedenen Flash-Filmen hin und her schalten kann. Die einzelnen Flash-Filme müssen nur als swf-Datei zur Verfügung stellen, müssen nicht verändert werden um verwendet zu werden. Im Haupt-Flash-Film wird eine leere MovieClipInstanz eingefügt, in Abbildung 82 hat diese MovieClip-Instanz den Namen display_mc. on (release) { loadMovie("1.swf", display_mc); } on (release) { unloadMovie(display_mc); } 68 Fragen und Übungsbeispiele Abbildung 82: Hauptfilm mit mehreren Buttons mit denen weitere Filme geladen werden Mit dem Befehl loadMovie() wird eine swf-Datei in die display_mc Insanz geladen, mit einem weitern loadMovie-Befehl oder mit unloadMovie() wird die swf-Datei wieder entfernt. Übung 10) Bauen Sie eine Flash-Navigation die zwei andere swf-Dateien lädt. 10.4 Fragen und Übungsbeispiele Übung 11) Was bewirkt folgende URL, wenn Sie für einen Link mit getURL() verwendet wird? javascript:w=window.open("nextpage.html", "miniwindow", "toolbar=no,menubar=no,location=no,scrollbars=no,resizable=yes,width=550,height= 400") Übung 12) Was passiert, wenn das MovieClip display_mc durch einen Tween bewegt wird? 69 Steuerung von Zeitleisten: 11 Steuerung von Zeitleisten In diesem ersten Programmier-Kapitel werden wir Programme nach einem sehr einfachen Muster Reaktion. So kann die Stricken: Useraktion BenutzerIn den Film starten und stoppen, zwischen verschiedenen Alternativen auswählen, verschiedene Aktionen einer Spielfigur starten. 11.1 Stop und Play Beispiel 4) Eine Animation kann angehalten und von der UserIn neu gestartet werden. Abbildung 83 zeigt den Film und die beiden Punkte an denen er stoppt. Um das zu erreichen brauchen wir zwei ActionscriptBefehle: − − stop(); play(); Der Befehl stop() hält die Zeitleiste dort an, wo der Abspielkopf gerade steht. Der Befehl play() startet die Zeitleiste wieder, der Abspielkopf beginnt wieder sich zu bewegen. (Alle Actionscript-Befehle werden mit einem Klammer-Paar dahinter geschrieben, und brauchen einen Strichpunkt um das Ende des Befehls anzuzeigen – ähnlich wie ein Punkt am Ende eines deutschen Satzes.) Den stop()Befehl können Sie direkt auf ein Bild in der Hauptzeitleiste schreiben. Wenn der Abspielkopf zu diesem Bild kommt wird er angehalten. In Abbildung 84 sehen Sie, wie die Zeitleiste und das Aktionen-Fenster den Befehl darstellen. Abbildung 83: Filme wird angehalten, und über Buttons wieder gestartet ACTIONSCRIPT BILD AUF EINEM Abbildung 84: Aktion am Bild Nummer 11: stop(); 70 Film mit alternativem Ende Beim play()Befehl ist die Lage etwas komplizierter: Er muss auf den Button geschrieben werden. Hier ist aber noch festzulegen, durch welche User-Aktion der Befehl ausgelöst werden soll. Normalerweise ist das bei einem Button das Klicken und anschließende Loslassen des Buttons. Dies wird als Ereignis release bezeichnet. Als Actionscript-Code geschrieben heißt das on (release), siehe Abbildung 85. ACTIONSCRIPT AUF EINEM BUTTON Abbildung 85: Actionscript beim Loslassen des Buttons In Zeile zwei steht nur ein Befehl, der play()-Befehl. Hier könnten Sie auch mehrere Befehle einfügen. Das können Sie immer, wenn sie in Actionscript die geschwungenen Klammern {} sehen, wie hier auf Zeile 1 und Zeile 3. Zwischen diesen Klammern können Sie einen Befehl oder mehrere Befehle schreiben. Das nennt man einen Code-Block. Wie oben beschrieben bedeutet on(release){…}, dass der Code-Block beim Loslassen des Buttons ausgeführt wird. Sie können sich aber auch entscheiden, dass schon das Klicken allein ausreichen soll, das wäre das Ereignis on (press) {…}: Noch etwas abrupter wäre es, schon beim Bewegen der Maus über den Button den Film wieder zu starten, mit dem Ereignis on (rollOver) {…}: on ( press ) { play(); } on ( rollOver ) { play(); } 11.2 Film mit alternativem Ende Beispiel 5) Ein interaktiver Film mit zwei alternativen Enden. Die UserIn entscheidet mit einem Klick wie der Film endet. Abbildung 86 zeigt die gesamte Handlung des Films mit Hilfe des Zwiebelschaleneffekts: Der blaue Ball betritt von links die Bühne und bewegt sich bis zum Rand des Abgrunds. Hier stoppt der Film. Entscheidet sich die UserIn für das gute Ende, dann geht der Ball 71 Steuerung von Zeitleisten: wieder nach links ab. Entscheidet sie sich für das schlechte Ende, dann stürzt er sich in den Abgrund. Abbildung 86: Eine Story mit zwei alternativen Enden Abbildung 87 zeigt die Zeitleiste des Films und die beiden Frames an denen er stoppt. Abbildung 87:Namen für einzelne Bilder in der Zeitleiste Bei Frame 10 stoppt der Film. Hier werden die beiden Buttons angezeigt, mit denen die UserIn entscheiden kann wie der Film weiter gehen soll. Das schlechte Ende des Films ist in den Frames 11 bis 33 gespeichert, der entsprechende Button enthält also nur einen play Befehl. on ( release ) { gotoAndPlay(34); } Das gute Ende des Films ist in den Frames 34 bis 40 gespeichert, hier ist also ein Sprung zu 34 notwendig. Dieser Sprung wird durch den Befehl gotoAndPlay(34) bewirkt. Im Laufe der Entwicklung eines Flash-Films können sich die Frames noch verschieben – z.B. weil man das schlechte Ende ausführlicher gestalten will, und es 72 Film mit alternativem Ende mehr Frames braucht. Damit würde sich das gute Ende von 34 auf z.B. 54 verschieben, und entsprechend müsste man den Code verändern. Diese Arbeit kann man vermeiden, indem man den wichtigen Frames einen Namen gibt. In Abbildung 87 trägt der Frame 34 den Namen Happy. Diesen Namen kann man im Actionscript-Programm verwenden, und zwar in (geraden, doppelten) Anführungszeichen: Werden nun Frames vor 34 eingefügt, dann funktioniert das Programm trotzdem noch. An diesem Beispiel kann man sehen, dass in Programmiersprachen Zahlen und Texte verschieden behandelt werden. Das Fachwort für ein Stück Text in einer Programmiersprache ist ein String. Oder rauf Deutsch manchmal: eine Zeichenkette Die Zahl kann man einfach hinschreiben, den Text muss man in Anführungszeichen setzen: gotoAndPlay(34); gotoAndPlay("Happy"); Achtung: in Programmiersprachen werden nur gerade Anführungszeichen verwendet. Die doppelten und die einfachen Anführungszeichen sind in Actionscript gleichbedeutend. Sie müssen aber paarweise zusammenpassend verwendet werden: gotoAndPlay('Happy'); gotoAndPlay("Happy"); Andere Anführungszeichen kann man mit copy-andpaste in das Flash Aktionen-Fenster hineinbringen, sie funktionieren aber nicht! gotoAndPlay(`Happy´); gotoAndPlay(“Happy”); gotoAndPlay(»Happy«); // FALSCH ! // FALSCH ! // FALSCH ! ANFÜHRUNGSZEICHEN STRINGS on ( release ) { gotoAndPlay("Happy"); } 73 Steuerung von Zeitleisten: Den gesamten Ablauf des Filmes könnte man in einem Flussdiagramm wie folgt darstellen: Bei größeren Projekten können Flussdiagramme helfen den Überblick zu bewahren. Eine Raute stellt eine Verzweigung / Entscheidung dar, sonst folgt der Ablauf den Pfeilen. Bad Happy Intro Abbildung 88: Flussdiagramm für den Film mit Verzweigung Flussdiagramme sind ein sehr altes Werkzeug in der Programmierung, sie wurden schon in den 70erJahren verwendet. Deswegen sind sie weit verbreitet. Sie können Flussdiagramme auch verwenden, um die Handlung eines interaktiven Films oder eines Computerspiels zu planen. Übung 13) Gestalten Sie einen interaktiven Film in Flash. Geben Sie der UserIn die Möglichkeit den Film anzuhalten und fortzufahren, bauen Sie mindestens eine Verzweigung mit zwei Alternativen ein. 11.3 Objekte, Methoden, Eigenschaften Sie lernen nun ein paar wichtige Fachwörter aus der objektorientierten Programmierung kennen. Objektorientiertes Programmieren ist seit ca. 10 Jahren Stand der Technik (davor gab es prozedurales, funktionales, modulares Programmieren). OBJEKT Das wichtigste Fachwort in diesem Zusammenhang ist das Objekt. Beispiele für Objekte in Flash sind MovieClip-Instanzen und Schaltflächen-Instanzen. Ein Objekt hat Eigenschaften. In Flash hat zum Beispiel jede Symbol-Instanz eine Eigenschaft _alpha. _alpha ist eine Zahl zwischen 0 und 100 die angibt, wie transparent das Objekt ist: 0 bedeutet ganz unsichtbar, 50 bedeutet halb-transparent, 100 bedeutet ganz undurchsichtig. Die Eigenschaften in der objektorientierten Programmierung entsprechen den Variablen in der klassischen Programmierung; der Unterschied ist, dass eine Eigenschaft zu einem bestimmten Objekt gehört. EIGENSCHAFT 74 Objekte, Methoden, Eigenschaften meineFigur._alpha = 20; Das Objekt meineFigur hat die Eigenschaft _alpha. Die Eigenschaft wird auf einen neuen Wert gesetzt: auf den Wert 20. (Andere Formulierung: Der Eigenschaft wird ein neuer Wert zugewiesen) Weitere wichtige Eigenschaften von Symbol-Instanzen sind: _height (Höhe in Pixel) _width (Breite in Pixel) _x _y (Position, X-Koordinate) (Position, Y-Koordinate) _visible (Sichtbarkeit, Wahrheits-Wert) Die letzte Eigenschaft kann keine Zahl enthalten, sondern einen der beiden Werte true und false. Diese Werte nennt man in der Programmierung boolesche Werte oder Wahrheits-Werte. uhr_mc._visible = true; // sei sichtbar uhr_mc._visible = false;// sei unsichtbar Ein Objekt hat Methoden. Jede Zeitleiste in Flash hat zum Beispiel die Methode stop(). Während eine Eigenschaft also nur einen Wert speichert entspricht eine Methode einem Befehl den man dem Objekt erteilen kann. meineFigur.stop(); meineFigur.gotoAndPlay("dreh"); meineFigur.gotoAndPlay(20); Verschiedene Arten diesen Code zu beschreiben: Die Methode stop() wird aufgerufen. Die Methode gotoAndPlay() wird mit dem Argument "dreh" aufgerufen. An die Methode gotoAndPlay() wird das Argument "dreh" übergeben. Bei Eigenschaften und Argumenten für Methoden haben Sie bisher Zahlen und kurze Texte gesehen. Die Texte werden – wie schon auf Seite 73 erwähnt String oder Zeichenkette genannt. STRING METHODEN 75 Steuerung von Zeitleisten: Die Methode gotoAndPlay()kann als Argument entweder eine Zahl oder einen String erhalten: eine Zahl gibt die Nummer eines Frames an, der String kann den Namen einer Szene oder eines Frames enthalten. Bitte erinnern Sie sich: Strings werden in Programmiersprachen immer in Anführungszeichen geschrieben, Zahlen werden immer ohne Anführungszeichen geschrieben. Als Anführungszeichen gelten die einfachen geraden und die doppelten geraden, aller anderen nicht: meineFigur.gotoAndPlay("20"); meineFigur.gotoAndPlay(20); meineFigur.gotoAndPlay(dreh); meineFigur.gotoAndPlay("dreh"); meineFigur.gotoAndPlay('dreh'); meineFigur.gotoAndPlay(`dreh´); meineFigur.gotoAndPlay(“dreh”); meineFigur.gotoAndPlay(»dreh«); // falsch! // falsch! Zahl braucht keine " ... " String braucht " ... " // falsch! Nur " sind richtig! // falsch! Nur " sind richtig! // falsch! Nur " sind richtig! 11.4 Spielfigur steuern Beispiel 6) Eine Spielfigur, die durch ein MovieClip dargestellt wird, wird gesteuert. Wichtig ist, dass die Spielfigur durch ein einzelnes – wenn auch komplexe aufgebautes – MovieClip dargestellt wird. Vermeiden Sie es eine Spielfigur als zwei oder mehrere separate MovieClips darzustellen – das macht das Bewegen der Figur sehr viel schwieriger! Abbildung 89 zeigt die Zeitleiste des MovieClips. Die Zeitleiste ist in Abschnitte zu je 10 Frames eingeteilt, jeder Abschnitt entspricht einer bestimmten Handlung, die die Spielfigur durchführen kann. Der erste Frame im Abschnitt ist entsprechend benannt: 76 Spielfigur steuern Abbildung 89: Zeitleiste des MovieClips als HandlungsRepertoire Frame 1 heißt Steh, von Frame 1 bis 9 steht die Figur also nur rum. Frame 10 heißt Wink, von 10 bis 19 winkt die Figur mit dem Arm. Von 20 bis 29 tritt sie mit dem Bein (Kick), von 30 bis 39 macht sie eine Kniebeuge (Kniebeug), von 40 bis 49 wackelt sie mit dem Kopf (Kopf), von 50 bis 59 dreht sie sich einmal seitlich und wieder zurück in Frontalansicht (dreh). Abbildung 90: Eine Handlung Befindet sich eine Instanz dieses MovieClips/dieser Spielfigur auf der Bühne, so kann diese Instanz mit Actionscript gesteuert werden. Die Instanz braucht dazu einen Instanznamen (siehe Kapitel 9.4), in diesem Fall figur_mc: on (release) { figur_mc.gotoAndPlay("dreh"); } Wenn sich eine zweite Spielfigur auf der Bühne befindet, dann kann diese über Ihren Instanznamen angesprochen werden: 77 Steuerung von Zeitleisten: on (release) { andereFigur_mc.gotoAndPlay("dreh"); } Übung 14) Verwenden Sie die Vorlage spielfigursteuerung-vorlage.fla als Ausgangspunkt: bauen Sie die Steuerung ein. 11.5 Weitere Übungsbeispiele Übung 15) Bauen Sie in die Spielfigur eine TastaturSteuerung ein. Am einfachsten mit einer klassischen on-keyPress-Funktion realisieren. Welche Tasten es gibt und wie sie heißen finden Sie in der Flash-Hilfe. on (keyPress "") { this.gotoAndPlay("rechts"); this._x += 10; } Beispiel 7) Eine kleine verrückte Maschine: wenn man verschiedene Knöpfe drückt passieren verschiedene Dinge. Übung 16) Gestalten und bauen Sie eine solche Maschine! 78 Variablen 12 Variablen und Verzweigungen In diesem Kapitel werden Sie Variablen und Verzweigungen kennen lernen Damit werden Sie Ihre Programme wesentlich flexibler und abwechslungsreicher als bisher gestalten können. Das erste Beispiel in diesem Kapitel ist ein Puzzle mit Erfolgskontrolle: Wenn ein Puzzelstein an die richtige Stelle gelegt wird zählt das Programm einen Punkt. Das zweite Beispiel ist ein einfacher Preloader, der anzeigt wie viel von der Flash-Datei bereits geladen wurde. 12.1 Variablen Eine Variable 7 in einer Programmiersprache ist eine Art Container, in der ein Wert abgelegt werden kann. Man kann sie sich als Schachtel vorstellen, die im Laufe des Programm-Verlaufs verschiedene Inhalte aufnehmen (=speichern) können. Jede Variable hat einen Namen. Abbildung 91 zeigt drei Variablen: hansi, elsa und susi. Hallo 10 hansi undefined elsa susi Abbildung 91: Drei Variablen, als Schachteln dargestellt 7 in der objektorientierten Programmierung nennt man Variablen auch Eigenschaften, siehe Kapitel 11 79 Variablen und Verzweigungen: Es gibt einige Variablen die in von Flash schon vorgegeben sind. Aber Sie können selbst neue Variablen erfinden und anlegen. Für die in Abbildung 91 gezeigten Variablen würde der Code so aussehen: var hansi = 10; var elsa = "Hallo"; var susi; Um eine neue Variable anzulegen müssen Sie zuerst einen Namen für die Variable erfinden. Bei der ersten Verwendung der Variable können Sie mit dem Befehl var einen ersten Wert und einen Datentyp angeben – das ist aber nicht zwingend notwendig. // altmodisch punkte = 0; // neumodisch var punkte:Number = 0; Für das Puzzle könnten wir vielleicht eine Variable gebrauchen, in der gespeichert wird wie viele Steine schon richtig gelegt wurden, also die Plus-Punkte im Spiel. Am Beginn des Spiels sollte sie den Wert 0 haben. Dieses erste Setzen des Wertes nennt man Initialisierung, der Code dafür wird meist auf der obersten Ebene des ersten Bildes untergebracht. Wenn Sie später den Wert der Variablen verändern wollen geschieht das mit dem ‚ist-gleich’-Zeichen, man nennt diesen Befehl eine Zuweisung: punkte = 5; Auf der rechten Seite der Zuweisung kann man Mathematische Formeln und Variablen verwenden: sekunden = 24 * 60 * 60; flaeche = breite * hoehe; punkte = punkte + 1; Beim Abarbeiten des Programms geht der Actionscript-Interpreter Zeile für Zeile von Oben nach Unten vor, bei einer Zuweisung rechnet er zuerst die rechte Seite aus, und weist dann den Wert der Variablen zu. Wenn also in der Variablen punkte der Wert 5 gespeichert ist, führt der Befehl punkte = punkte + 1; Dazu, dass der Wert 6 gespeichert wird. 80 Variablen Aus der Mathematik sollten Sie sich an eine Regel erinnern: Punkt vor Strich-Rechnung: b = 3; a = 20 + b * 5; ergibt 20 + 15 und nicht 23 * 5. Wenn in einer Variablen noch nichts gespeichert wurde enthält sie den Wert undefined. Da man besonders oft „hinaufzählen“ und „hinunterzählen“ muss gibt es dafür eine eigene Kurzschreibweise: die erste und zweite Zeile in folgendem Programm sind gleichbedeutend: punkte = punkte + 1; punkte++; vorrat = vorrat – 1; vorrat--; // eins dazuzählen // eins dazuzählen, Kurzschreibweise // eins wegzählen // eins wegzählen, Kurzschreibweise Wenn Sie den Überblick über die Variablen verlieren, und nicht mehr wissen was in einer Variablen gespeichert ist, dann können Sie den Wert der Variable mit einer trace Meldung ausgeben: trace("Es wurden schon " + punkte + " Punkte verdient"); Der String "Es wurden schon " wir mit dem Wert der Variable punkte und dem String " Punkte verdient" zusammengebaut zu einem großen String, dieser wird dann ausgegeben. Das Plus-Zeichen addiert hier also nicht Zahlen, sondern fügt Texte zusammen. Das nennt man eine Konkatenation von Zeichenketten, oder ein String-Konkatenation. (Oder man nennt es gar nicht, sondern benutzt es einfach nur ;-) Wenn Sie den Text für die UserIn sichtbar im Spiel anzeigen wollen, dann verwenden Sie dafür ein dynamisches Textfeld. Ein statisches Textfeldern (in Abbildung 92 links) stellt einen fixen Text dar. Ein dynamisches Textfeld (in Abbildung 92 rechts) kann den Inhalt einer einzelnen Variable anzeigen (hier punkte) oder vom Programm gesetzt werden. DYNAMISCHE TEXTFELDER 81 Variablen und Verzweigungen: Abbildung 92: statisches und dynamisches Textfeld Dynamische Textfelder können einen Instanznamen haben, in Abbildung 92 ist der Name punkt_ausgabe_txt. AUTOMATISCH MIT VAR ANZEIGEN Wenn im Eigenschaftsfenster im Feld VAR der Name einer Variablen eingetragen ist, dann wird immer der aktuelle Wert der Variable angezeigt. Wird der Wert irgendwo im Programm verändert ändert sich auch sofort die Anzeige. Um das Textfeld zu formatieren verwenden Sie einfach das Eigenschaften-Fenster. Dort können Sie Schriftart, Schriftgröße, etc. einstellen. TEXT UND HTMLTEXT Für die Ausgabe von komplizierteren Texten (die sich z.B. aus mehreren Variablen zusammensetzen) oder für die Ausgabe von HTML-formatierten Texten muß man eine andere Methode verwenden: Im Eigenschaftsfenster wird bei VAR nichts eingegeben, statt dessen werden im Programm-Code die Eigenschaften text bzw. htmlText des Textfeldes gesetzt: Die Eigenschaft .text zeigt Text ohne weitere Formatierung an, die Eigenschaft htmlText zeigt Text mit (einigen, einfachen) HTML-Tags an. if ( punkte == 0 ) { punkt_ausgabe_txt.htmlText = "Punkte: noch keine"; } else { punkt_ausgabe_txt.htmlText = "Punkte: " + punkte + ""; } Achtung: wenn man mit text bzw. htmlText arbeitet ändert sich die Anzeige nur, wenn das Programm text bzw. htmlText auf einen neuen Wert setzt. Wenn sich 82 Verzweigungen blos der Wert der Variable punkte verändert hat das alleine noch keine Auswirkung auf das Textfeld! Jede Variable die Sie in Actionscript schreiben befindet sich in einer bestimmten Zeitleiste. Eine Variable namens punkte in der Hauptzeitleiste ist also etwas anderes als die Variable punkte in der MovieClipInstanz meinPlayer! Objektorientiert betrachtet könnte man also sagen: die Variablen sind Eigenschaften einer bestimmten MovieClip-Instanz. Entsprechend kann man statt dem einfachen Namen der Variable auch den Namen der MovieClip-Instanz davor setzen: // Dieser Code steht in der Hauptzeitleiste, // meinPlayer_mc ist eine MovieClip Instanz punkte = 5; // bezeiht sich auf die Variable punkte der Hauptzeitleiste meinPlayer_mc.punkte = 5; // Variable punkte in meinPlayer_mc GELTUNGSBEREICH ABLEN VON VARI- 12.2 Verzweigungen Der Code einer Verzweigung sieht so aus: if ( Bedingung ) { // hier die Befehle für den Fall // das die Bedingung erfüllt ist } Als Bedingung kann man Code schreiben, der einen Wahrheits-Wert liefert. Bisher haben Sie nur einen Wahrheits-Wert kennen gelernt: if ( meinPlayer_mc._visible ) { // hier die Befehle für den Fall // dass die Bedingung erfüllt ist } Weitere Bedingungen kann man mit den VergleichsOperatoren bauen: if if if if ( _x < 0 ) … // x ( _x <= 0 ) … // x ( _x == 2 ) … // x (name == "Brigitte" kleiner als Null kleiner oder gleich Null genau gleich 2 ) … // Sind die Strings genau gleich? 83 Variablen und Verzweigungen: 12.3 Puzzle mit Erfolgskontrolle Beispiel 8) Ein Puzzle, das Fehlversuche und richtig gelegt Puzzlesteine mitzählt. Abbildung 93: Puzzle das die Punkte und Versuche mitzählt Wir machen uns die in Kapitel 11.2 gezeigte Methode zu Nutze, um Zustände des Spiels zu unterscheiden: Spiel, Gewinn, Verlust. Mit gotoAndPlay() werden wir Gewinn oder Verlust ansteuern. Aus Kapitel 10.2 übernehmen wir die Bewegung der Puzzel-Steine mit drag-and-drop. Die Verbesserung besteht nun darin, dass wir mitzählen wenn ein Stein abgelegt wird. Nach 6 Versuchen ist das Spiel vorbei und verloren. Außerdem testen wir, ob der Stein an der richtigen Stelle gelandet ist. Wenn 3 Steine richtig sind ist das Spiel gewonnen. Die noch verbleibende Anzahl von Ableg-Versuchen ist in der Variable vorrat gespeichert, die Anzahl der schon richtig gelegten Steine in der Variable punkte. Ein letzter Bestandteil fehlt noch: Wie kann man testen ob der Puzzel-Stein an der richtigen Stelle abgelegt wurde? Wenn ein Puzzelstein mit stopDrag() abgelegt wird), dann speichert der ActionscriptInterpreter in der Eigenschaft _droptarget des Puzzel-Steins auf welche MovieClip-Instanz er fallen gelassen wurde. Sie müssen also MovieClip-Instanzen auf die Bühne stellen, die die Ziele für die PuzzelSteine definieren. In Abbildung 93 sehen Sie in dem rechten Quadrat drei Kreise (in hellern Farben), diese Kreise sind die Ziel-MovieClips mit den Instanznamen 84 Puzzle mit Erfolgskontrolle blauesZiel_mc, rotesZiel_mc und gelbesZiel_mc. In Abbildung 94 sehen Sie die sechs MovieClipInstanzen sowie die vier Textfelder (zwei statisch, zwei dynamisch) im Überblick im Film-Explorer. Die MovieClip-Instanzen stammen alle vom selben Symbol (BallMC), haben aber verschiedene Instanznamen und tragen verschiedenen Actionscript-Code. Achtung: Jede MovieClip-Instanz könnte auch eigene Variablen enthalten! Der Code z.B. am MovieClip blauerBall_mc kann auf die Variablen der Hauptzeitleiste auf zwei Arten zugreifen: mit einem absoluten Namen: Abbildung 94: Sechs Instanzen _level0.punkte++; Oder mit einem relativen Namen: _parent.punkte++; Das gleiche gilt für Verweise auf andere MovieClips: _level0.blauesZiel_mc.stop(); Oder mit einem relativen Namen: _parent.blauesZiel_mc.stop(); Genau wie bei relativen und absoluten Links in Webseiten ist auch hier die Verwendung der relativen Angaben vorteilhaft. Die Abfrage ob das Ziel getroffen wurde sieht also so aus: if (eval(this._droptarget) = = _parent.blauesZiel_mc) { … } this verweist auf das aktuelle MovieClips selbst, also blauerBall_mc, _parent.blauesZiel_mc verweist auf das Ziel. Was die Funktion eval tut, und warum sie hier notwendig ist kompliziert, unerfreulich, und nicht weiter bemerkenswert – wir ersparen uns die Erklärung. Übung 17) Setzen Sie das Puzzle um. 85 Variablen und Verzweigungen: 12.4 Preloader Beispiel 9) Ein Preloader zeigt an wie viel Prozent der swf-Datei schon geladen sind. Erst wenn 100% erreicht sind startet der Film. Ein Preloader ist ein Teil des Flash-Films, der gezeigt wird während der Rest geladnen wird. Er soll die Wartezeit angenehm gestalten. Wir werden den Preloader als eigene Szene vor dem Hauptfilm/Spiel anlegen. Der Preloader soll einen Fortschritts-Balken anzeigen, wie in Abbildung 95 gezeigt. Für den Preloader kann man zwei Variablen auslesen, die von Flash zur Verfügung gestellt werden, und zwei Methoden aufrufen. Abbildung 95: Preloader mit FortschrittsBalken _framesloaded _totalframes getBytesLoaded() getBytesTotal() (Wie (Aus (Wie (Aus viele Frames wurden schon geladen?) wie vielen Frames besteht der Film insgesamt?) viele Bytes wurden schon geladen?) wie vielen Bytes besteht der Film insgesamt?) Actionscript für den Preloader: if (_framesloaded>=_totalframes) { gotoAndPlay("init"); } else { pr = Math.round(getBytesLoaded()/getBytesTotal()*100); balken_mc._xscale = pr; gotoAndPlay(1); } Der Fortschrittsbalken wird mit Hilfe der Eigenschaft _xscale verzerrt. Um den Preloader zu Testen verwenden Sie den Bandbreiten-Profiler und „Download simulieren“ mit einer schlechten Leitung: 86 Fragen und Übungsaufgaben Abbildung 96: Download simulieren Übung 18) Bauen sie in eine Ihrer Flash-Dateien den Preloader ein (z.B. in den interaktiven Film) und testen Sie ihn wie beschrieben! 12.5 Fragen und Übungsaufgaben Übung 19) Variablen, Zuweisungen, Formeln. Was geben diese Programme aus? 1 a = 10; b = 20; c = a * b + 2; trace( c ); 3 a = "Hallo"; b = "Brigitte"; trace( a + b ); 5 b = "Brigitte"; b = "Hansi"; trace( b ); 7 a = 10; b = 20; a = b; b = a; trace("a ist jetzt " + a); trace("b ist jetzt " + b); 2 a = 10; b = 20; c = a * ( b + 2 ); trace( c ); 4 a = "Hallo"; b = "Brigitte"; trace( a + " " + b ); 6 a = 10; b = 20; b += 2; c = a * b; trace( c ); 8 a = 10; b = 20; c = a; a = b; b = c; trace("a ist jetzt " + a); trace("b ist jetzt " + b); 87 Variablen und Verzweigungen: Übung 20) Formeln: Ergänze diese Programme, so dass die Ausgabe stimmt: A a = 4; B trace( a + " Euro sind " + b + " Schillling"); a = "Hansi"; trace(a + " enthält " + b + "Buchstaben); Übung 21) Diese Programme funktionieren nicht richtig. Wo liegt der Fehler A 10 = a; b = 20; c = a * b + 2; trace(c); a = Hallo; b = Brigitte; trace( a + " " + b ); B a = 10 b = 20 c = a * ( b + 2 ) trace(c); b = "Hansi"; length( b ); trace(); C D Übung 22) Fehlermeldungen von Flash – was ist das Problem? A Szene=Szene 1, Ebene=Ebene 1, Bild=2: Zeile 1: Die linke Seite des Zuweisungsoperators muss eine Variable oder eine Eigenschaft sein. 10 = a; B Szene=Szene 1, Ebene=Ebene 1, Bild=2: Zeile 1: ;' erwartet a = 10 b = 20 Übung 23) Folgende Programme geben keine Fehlermeldung – trotzdem sind sie falsch. Was ist das Problem? A a = Hallo; b = Brigitte; trace( a + " " + b ); B gotoAndPlay(2000); C keinobjekt._x = 100; 88 Fragen und Übungsaufgaben Übung 24) Was geben diese Programme mit Verzweigungen aus? 1 a = 10; b = 20; if ( a > b ) { trace(a); } 2 a = 10; b = 20; if ( a < b ) { min = a; max = b; } else { min = b; max = a; } trace( min + " bis " + max ); a = 10; b = 20; c = 40; if ( a+b == c ) { trace(c); } max = 5; name = "Hansi"; l = length( name ); if ( l > max ) { trace("Name zu lang"); } else { trace("-----"); trace(name); trace("-----"); } a = 10; trace("Alter: " + a); if ( a > 18 ) { trace("ok"); } else if ( a > 10 ) { trace("mit Begleitung") } else { trace("gar nicht!") } x = 10; max = 13; breite = 5; if ( x + breite > max ) { trace("autsch!"); x = max - breite; } else { trace("ok"); } trace("Neues x: " + x); 3 a = 10; b = 20; c = 30; if ( a+b == c ) { trace(c); } max = 5; name = "Brigitte"; l = length( name ); if ( l > max ) { trace("Name zu lang"); } else { trace("-----"); trace(name); trace("-----"); } a = 12; trace("Alter: " + a); if ( a > 18 ) { trace("ok"); } else if ( a < 18 ) { trace("gar nicht!") } else if ( a > 10 ) { trace("mit Begleitung") } x = 3; max = 13; breite = 5; if ( x + breite > max ) { trace("autsch!"); x = max; } else { trace("ok"); } trace("Neues x: " + x); 4 5 6 7 8 9 89 Zeichnen, Farben und Funktionen: 13 Zeichnen, Farben und Funktionen In diesem Kapitel beschäftigen wir uns wieder mit den Kernkompetenzen von Flash: es ist bunt, und man kann damit Zeichen. Allerdings jetzt auf einer anderen Ebene: auch wenn man Actionscript programmiert kann man mit Farben arbeiten und Zeichnen. Das ist die Grundlage von Generativem Design. 13.1 LINIEN Zeichnen mit Actionscript Jede MovieClip-Instanz kann als Zeichen-Blatt fungieren. Das MovieClip merkt sich welcher Stift verwendet werden soll (lineStyle) und wohin der Stift zuletzt bewegt wurde. Hier ein Beispiel mit der MovieClip-Instanz mc: mc.lineStyle( 1, 0x000000, 100 ); Das erste Argument von lineStyle gibt die Breite der Linie an. Das zweite Argument ist die Farb-Angabe, sie funktioniert wie in HTML: rot, grün, und blauAnteil in Hexadezimal-Schreibweise. Die Farbangabe beginnt immer mit 0x. Das dritte Argument ist der Alpha-Wert, 100 ist der höchste mögliche Wert und steht für undurchsichtig. Mit moveTo und lineTo kann man Linien auf das MovieClip zeichnen: mc.moveTo( mc.lineTo( mc.lineTo( mc.lineTo( 0, 0 300, 100, 200, ); 100 ); 300 ); 0 ); Achtung: das Koordinatensystem von Flash beginnt links oben, die x-Achse geht nach rechts, die (positive) Y-Achse nach unten! Abbildung 97: Linien mit Actionscript gezeichnet 90 Zeichnen mit Actionscript Mit dem Befehl curveTo kann man Kurven zeichnen. Dabei wird ein Zielpunkt und ein so genannter „Kontroll-Punkt“ angegeben. mc.lineStyle(1, 0x000000, 100);´ moveTo(30, 0); lineTo(0, 130); mc.lineTo(320,50); moveTo(30, 0); lineStyle(1, 0x0000ff, 100); curveTo(0, 130, 320, 50); Abbildung 98 zeigt die Kurve und zusätzlich zwei Linien von Startpunkt- und Endpunkt zum Kontrollpunkt. Diese Linien sind Tangenten an die Kurve, und bestimmen so die genaue Form der Kurve. (Das Fachwort für diese Art von Kurve ist „quadratische Bézierkurve“) Die mit lineTo und curveTo gezeichneten Formen können mit Farbe gefüllt werden. Mit beginFill wird Farbe + Alpha festgelegt. lineStyle( 1, 0x000000, 100 ); beginFill( 0x77ffaa, 40); moveTo( 0, 0 ); lineTo( 300, 100 ); lineTo( 100, 300 ); lineTo( 0, 0 ); endFill(); beginFill( 0xff77aa, 40); moveTo( 100, 0 ); lineTo( 200, 300 ); lineTo( 0, 200 ); lineTo( 100, 0 ); endFill(); Übung 25) Schreiben Sie ein Programm das 10 Pixel innerhalb des Bühnenrandes einen Rahmen zeichnet. Verwenden Sie dabei die Eigenschaften width und height des Stage-Objekts. Übung 26) Schreiben Sie ein Programm das ein großes X quer über die Bühne malt, von Eckpunkt zu Eckpunkt. Verwenden Sie dabei die Eigenschaften width und height des Stage-Objekts. Übung 27) Schreiben Sie ein Programm das mit (mehren?) curveTo–Aufrufen ungefähr einen Halbkreis zeichnet. FÜLLFARBE KURVEN Abbildung 98: Kurve die mit curveTo gezeichnet wurde (und Kontrollpunkt) Abbildung 99: Zwei verschiedene Füll-Farben 91 Zeichnen, Farben und Funktionen: Übung 28) Schreiben Sie ein Programm das den Anfangsbuchstabe Ihres Vornames mit Actionscript zeichnet. Übung 29) (für Profis) Schreiben Sie ein Programm, mit dem die UserIn den Ziel- und den Kontrollpunkt einer Kurve mit Drag-and-Drop verschieben kann. 13.2 Funktionen Beispiel 10) Mehrere Sterne werden auf die Bühne gezeichnet Wie sie gesehen haben ist die Zeichen-Fähigkeit von Flash sehr eingeschränkt: Es gibt Methoden um Linien und Kurven zu zeichnen, mehr nicht. Praktisch wäre doch auch ein Befehl zum Zeichnen eines Rechtecks! Wenn Sie so einen Befehl brauchen, können Sie ihn selbst als Funktion definieren. Angenommen Sie wollen drei Rechtecke zeichnen: Abbildung 100: Drei Rechtecke auf der Flash Bühne mit Koordinaten Der Code dafür könnte so aussehen: Rechteck 0/0 bis 150/100 moveTo(0,0); moveTo(150,0); moveTo(150,100); moveTo(0,100); moveTo(0,0); Rechteck 200/0 bis 300/100 moveTo(200,0); moveTo(300,0); moveTo(300,100); moveTo(200,100); moveTo(200,0); Rechteck 350/0 bis 500/100 moveTo(350,0); moveTo(500,0); moveTo(500,100); moveTo(350,100); moveTo(350,0); Die Struktur des Codes ist immer gleich, nur die konkreten Zahlen unterscheiden sich. Ein bisschen abstrakter betrachtet ist der Code immer gleich: wenn x1/y1 die Koordinaten des linken oberen Eckpunktes sind, und x2/y2 die Koordinaten des rechten unteren Eckpunktes, dann sieht der Code so aus: 92 Funktionen moveTo(x1, lineTo(x2, lineTo(x2, lineTo(x1, lineTo(x1, y1); y1); y2); y2); y1); Diesen abstrakten Code kann man in eine Funktion schreiben. Den Namen der Funktion (hier rect) können Sie selbst festlegen: function rect(x1, y1, x2, y2) { moveTo(x1, y1); lineTo(x2, y1); lineTo(x2, y2); lineTo(x1, y2); lineTo(x1, y1); } Die Variablen x1, y1, x2, y2 die in der Klammer nach dem Funktionsnamen geschreiben werden Argumente der Funktion genannt. Wenn man eine Funktion benutzen will muss man wissen welche Argumente sie erhält. Wenn Die Funktion mit konkreten Zahlen aufgerufen wird, werden diese Werte in die Argumente x1, y1, x2, y2 geschrieben und der Code ausgeführt: rect( 0, 0, 150, 100); rect(200, 0, 300, 100); rect(350, 0, 500, 100); Wird die Funktion nur definiert, aber nie aufgerufen, dann hat Sie keine Auswirkungen auf das Programm. Übung 30) Schreiben Sie eine Funktion, die den Anfangsbuchstabe Ihres Vornamens zeichnet. Die Position des Buchstabens auf der Bühne soll über die Funktions-Argumente gesteuert werden, ähnlich wie bei der rect-Funktion. Benutzen Sie die Funktion um den Anfangsbuchstaben 5mal auf die Bühne zu zeichnen. Übung 31) Schreiben Sie eine Funktion, die einen Stern zeichnet. Die Position des Sterns auf der Bühne soll über die Funktions-Argumente gesteuert werden, ähnlich wie bei der rect-Funktion. Benutzen Sie Ihre Kreis-Funktion um 5 Sterne auf die Bühne zu zeichnen. Übung 32) Schreiben Sie eine Funktion, die mit Hilfe von mehreren Aufrufen der curveTo Funktion ungeEINE FUNKTION EINE FUNKTION DEFINIEREN AUFRUFEN 93 Zeichnen, Farben und Funktionen: fähr einen Kreis zeichnet. Die Position des Kreises auf der Bühne soll über die Funktions-Argumente gesteuert werden, ähnlich wie bei der rect-Funktion. Benutzen Sie Ihre Kreis-Funktion um 5 Kreise auf die Bühne zu zeichnen. Übung 33) Was macht die folgende Funktion? function kreuz(mc, x, y) { mc.moveTo(x-5, y); mc.lineTo(x+5, y); mc.moveTo(x, y-5); mc.lineTo(x, y+5); } Übung 34) Was macht folgendes Programm (es verwendet die Funktion von Übung 33). Zeichnen Sie das Ergebnis. kreuz(mc, 100, 10); kreuz(mc, 20, 300); kreuz(mc, 40, 40); 13.3 Farbe auf ein MovieClip übertragen Wir haben in diesem Kapitel bisher selbst gezeichnet und dafür auch die Farben festgelegt. Was ist aber, wenn ein bereits bestehendes MovieClip eingefärbt werden soll? Beispiel 11) Ein MovieClip soll interaktive eingefärbt werden: Die BenutzerIn klickt auf einen von mehreren Farb-Auswahl-Buttons, und die Farbe wird übernommen. Abbildung 101: Farbauswahl für ein Teil eines MovieClips Dieses Beispiel wird gerne von Autofirmen verwendet, um das neue Auto individuell einzufärben. Abbildung 101 zeigt eine etwas vereinfachte Version davon ;-) Achtung: meist will man nicht das ganze MovieClip einfärben, sondern nur einen Teil davon. Hier soll zum Beispiel nur der Kreis gefärbt werden, nicht aber Mund und Augen. Ein einfacherer Fall ist das setzen einer fixen Farbe: 94 Farbe auf ein MovieClip übertragen gesichtsFarbe = new Color(dasGesicht_mc); gesichtsFarbe.setRGB( 0xff0000 ); Zuerst wird ein Farbobjekt für die zu färbende MovieClip-Instanz angelegt. Mit diesem Farbobjekt kann man dann die Farbe auf einen bestimmten Code setzten. Hier wird die gleiche Schreibweise verwendet wie in HTML, nur ein Null und ein x werden davor gesetzt. Anführungszeichen (wie bei einem String) sind bei Farb-Codes nicht notwendig. Soll keine fixe Farbe vergeben werden, sondern die Farbe des Farbtopfs übernommen werden, dann kann das so aussehen: Als Farbtöpfe werden Instanzen ein und desselben MovieClips verwendet, die unterschiedlich eingefärbt werden. (Achtung: keine Buttons!) on (release) { meineFarbe = new Color(this); // Verweis auf die Farbe dieses Farbtopfs rgb = meineFarbe.getRGB(); // rgb auslesen gesichtsFarbe = new Color(_parent.smilie_mc.gesicht_mc ); // Verweise auf die Farbe des Gesichts gesichtsFarbe.setRGB(rgb); // rgb hinein schreiben } Diesen Code auf alle Farb-Buttons zu kopieren ist eigentlich unbequem – besonders wenn man später noch etwas ändern will, dann muss man die Änderung x-mal durchführen. Auch hier kann man wieder eine eine Funktion verwenden. Hier wurde der Namen nimmMeineFarbe für diese Funktion gewählt. Diese Funktion wird der onRelease-Eigenschaft jedes MovieClips zugewiesen. Achtung: der folgende Code befindet sich auf dem ersten Bild der Haupt-Zeitleiste, nicht auf einer einzelnen Instanz! Dadurch verändert sich der Name, mit dem gesicht_mc angesprochen wird! 95 Zeichnen, Farben und Funktionen: function nimmMeineFarbe(ich) { var meineFarbe, rgb, gesichtsFarbe; meineFarbe = new Color(ich); rgb = meineFarbe.getRGB(); gesichtsFarbe = new Color(smilie_mc.gesicht_mc); gesichtsFarbe.setRGB(rgb); } In den einzelnen Farbtöpfen wird diese Funktion aufgerufen: on(release) { nimmMeineFarbe(this); } Damit wird der Code, der in den einzelnen Buttons stehen muss sehr kurz. Übung 35) Setzen Sie das Einfärbe-Programm mit einem selbst gestalteten MovieClip um. 96 Extra –für Actionscript-Profis: 13.4 Extra –für Actionscript-Profis: Noch einfacher wird das Programm, wenn man es nur auf der Hauptzeitleiste schreiben kann, ohne in die einzelnen Buttons einzugreifen. Dazu wird die Funktion so verändert, dass sie kein Argument nimmt, sondern die Variable this verwendet. Diese Funktion kann dann auf die onRelease-Eigenschaft der einzelnen Farbtöpfe zugewiesen werden. function nimmMeineFarbe() { var meineFarbe, rgb, gesichtsFarbe; meineFarbe = new Color(this); rgb = meineFarbe.getRGB(); gesichtsFarbe = new Color(smilie_mc.gesicht_mc); gesichtsFarbe.setRGB(rgb); } schwarz_mc.onRelease = nimmMeineFarbe; rot_mc.onRelease = nimmMeineFarbe; Achtung: Bei der Zuweisung der onRelease-Funktion werden keine Klammern hinter den Funktionsnamen geschrieben, dies ist kein Aufruf der Funktion! gelb_mc.onRelease = nimmMeineFarbe(); // FALSCH: Aufruf der Funktion Übung 36) Setzen Sie das Einfärbe-Programm mit der hier beschriebenen Methode und einem selbst gestalteten MovieClip um. 97 Mehr zeichnen mit Schleifen: 14 Mehr zeichnen mit Schleifen Mit den Funktionen im letzten Kapitel haben Sie schon ein Mittel an der Hand, mit dem Sie viel Wirkung mit wenig Aufwand erzielen können. In diese Richtung geht es nun weiter: Mit Schleifen werden Sie noch mehr Linien mit noch weniger Code zeichnen. Und mit Zufallszahlen werden Ihre Zeichnungen unvorhersehbar. 14.1 Ein Muster aus Linien Zeichnen Beispiel 12) Der Hintergrund des Flash-Films wird mit einem Muster aus Linien bedeckt: lauter senkrechte Linien mit 10 Pixel Abstand. SCHLEIFEN Larry Wall, der Erfinder der Programmiersprache Perl, sagte: Die erste Tugend der Programmierung ist Faulheit. An dieser Stelle bedeutet Faulheit: ich bin zu faul um viele Zeilen Code zu tippen, die viele Linien zeichnen. Die Lösung: mittels einer Schleife mit wenig Code viele Linien zeichnen. Die Variable x enthält dabei die X-Koordinate der senkrechten Linie. 1 2 3 4 5 6 7 8 9 lineStyle(1, 0x000000, 100); var x:Number = 0; while (x <= Stage.width) { moveTo(x, 0); lineTo(x, Stage.height); x = x + 10; } // hier gehts weiter Die while-Schleife reicht von Zeile 3 bis Zeile 8. Sobald der Interpreter zum ersten Mal Zeile 3 erreicht überprüft er die Bedingung in der runden Klammer ( x < Stage.width ) ähnlich wie bei einer Verzweigung mit if. Wenn die Bedingung nicht erfüllt ist springt er sofort zu Zeile 9. Ist die Bedingung erfüllt, dann werden die Zeilen 5 bis 7 der Reihe nach abgearbeitet. Am Ende, bei Zeile 8, erfolgt wieder ein Rücksprung zu Zeile 3 – falls die Bedingung (x < Stage.width ) jetzt noch erfüllt ist. 98 Ein Muster aus Linien Zeichnen Achtung, wichtiger Warnhinweis: achten Sie darauf, dass die Abbruch-Bedingung der Schleife wirklich irgend wann einmal erfüllt ist! Sonst haben Sie ein Endlos-Schleife: der Actionscript-Interpreter ist für immer in der Schleife gefangen; nichts geht mehr. Das passiert sehr schnell, wenn man zum Beispiel vergisst die Variable x hochzuzählen: var x:Number = 0; while(x <= Stage.width) { moveTo(x, 0); lineTo(x, Stage.height); } Übung 37) Schreiben Sie ein Programm das senkrechte Linien im Abstand von 10px über die ganze Bühne zeichnet (Code auf Seite 98). Übung 38, 39, 40) Schreiben Sie drei Programme, die folgende Bilder zeichnen: ENDLOS-SCHLEIFE Mit Hilfe einer Schleife kann man viele Linien ziehen, mit Hilfe von Zufallszahlen sieht dieses Muster jedes Mal anders aus: ZUFALLSZAHLEN Abbildung 102: Zufalls-Muster 99 Mehr zeichnen mit Schleifen: Zufallszahlen bringen den Moment des Unberechenbaren, Unerwarteten in die strenge, vorhersehbare Welt der Computerprogramme. Bei jedem Aufruf der Methode random des Math-Objekts wird eine Zahl größer gleich Null und kleiner Eins erzeugt: trace(" Erste Zufallszahl " + trace("Zweite Zufallszahl " + trace("Dritte Zufallszahl " + Math.random()); Math.random()); Math.random()); Bei jedem Aufruf gibt dieses Programm einen anderen Output: Erste Zufallszahl 0.260387100744992 Zweite Zufallszahl 0.512555140070617 Dritte Zufallszahl 0.321858525741845 Erste Zufallszahl 0.348519487306476 Zweite Zufallszahl 0.342851056717336 Dritte Zufallszahl 0.683320601005107 Meist braucht man keine Zahl zwischen Null und Eins, sondern eine größere Zahl. Dazu multipliziert man die Zufallszahl: y = Math.random() * 400; Falls man keine Kommerzahlen, sondern ganze Zahlen braucht, kann man mit der Funktion int() die Zahl abrunden: bildnr = int(Math.random() * 10); mc.gotoAndStop( bildnr ); Übung 41) Schreiben Sie ein Programm das das Muster in Abbildung 102 zeichnet. Übung 42) Schreiben Sie ein Programm das das zufällige Linien zeichnet. 100 Übungsaufgaben 14.2 Übungsaufgaben Übung 43) Was macht das folgende Programm? Zeichnen Sie das Ergebnis: step = 10; a = 0; while (a<400) { mc.moveTo(a, 0); mc.lineTo(a, 400); a += step; } a = 0; while (a<400) { mc.moveTo(0, a); mc.lineTo(400, a); a += step; } Übung 44) Was macht das folgende Programm? Zeichnen Sie ein Beispiel: x = 0; step = int(Math.random()*40+5); while (x<400) { mc.moveTo(x, 0); mc.lineTo(400, x); x += step; } Übung 45) * Was macht das folgende Programm? Finden Sie zuerst heraus, wie sich die Variable alpha in der Schleife verhält. Erinnern Sie sich dann an den Mathematik-Unterricht in der Schule: was machen Sinus und Cosinus? Zeichnen Sie wie der Output aussieht. Was würde eine Veränderung der Variablen n, r, mitte_x, mitte_y bewirken? 101 Mehr zeichnen mit Schleifen: n = 8; r = 100; mitte_x = 200; mitte_y = 200; alpha = 0; // alpha im Bogenmass, von 0 bis 2*pi x = mitte_x + Math.cos(alpha) * r; y = mitte_y + Math.sin(alpha) * r; this.moveTo(x, y); while (alpha <= Math.PI * 2 && alpha <= max_alpha) { alpha += Math.PI * 2 / n; // trace("jetzt bei winkel "+alpha); x = mitte_x + Math.cos(alpha) * r; y = mitte_y + Math.sin(alpha) * r; this.lineTo(x, y); } Übung 46) Was macht folgendes Programm. Zeichnen Sie das Ergebnis. function kreuz(mc, x, y) { mc.moveTo(x-5, y); mc.lineTo(x+5, y); mc.moveTo(x, y-5); mc.lineTo(x, y+5); } x = 0; while (x<=400) { y = x / 2 + 50; kreuz(mc, x, y); x += 10; } Fortgeschrittene Übung 47) Wie könnte ein Programm aussehen, das das Bild rechts zeichnet? Skizzieren Sie das Programm. Am besten wäre ein Programm, das mit einer kleinen Veränderung auch 7 mal 10 oder 700 mal 100 Kreuze zeichnen könnte. Abbildung 103: Gewünschtes Ergebnis: 7 mal 4 Kreuze 102 Übungsaufgaben 103 MovieClips erzeugen: 15 MovieClips erzeugen Sie können nun schon Linien und Kurven in den Flash-Film zeichnen. Um Ihre Programme noch dynamischer zu machen erlernen Sie in diesem Kapitel, wie Sie MovieClip-Instanzen mittels Actionscript auf der Bühne platzieren. 15.1 Beispiel „Tapete“ Beispiel 13) Generative Tapete: Die gesamte FlashBühne wird mit zwei Grundformen „tapeziert“. Welche der beiden Formen verwendet wird entscheidet der Zufall, dadurch entsteht jedes Mal ein anderes Muster. Je nach „Tapetenstück“ entsteht dabei ein abstraktes Muster oder – bei einem Spiel – z.B. eine Landschaft. 15.2 Instanzen dynamisch erzeugen 104 Instanzen dynamisch erzeugen Sie können Instanzen eines Symbols „händisch“ erzeugen, indem Sie das Symbol aus der Bibliothek auf die Bühne ziehen. Dieser Instanz können Sie dann im EIGENSCHAFTEN Fenster einen Namen geben. Auch ein Actionscript-Programm kann Instanzen erzeugen. Dafür gibt es den Flash-Befehl attachMovie(). mc.attachMovie(bez, iname, ebenennr); − mc : Übergeordnetes Clip, z.B. this. Kann man auch ganz weglassen wenn man this meint. − bez : Bezeichner (also Name) des Symbols in der Bibliothek, beim „Export für AS“ − − iname : neuer Name der Instanz ebenennr : Nummer der Ebene Programmatisch erzeugte MovieClips leben auf eigenen Ebenen, genannt 0, 1, 2, 3. Diese Ebenen haben nichts mit den Ebenen im Flash-Editor zu tun. Wozu sind sie dann gut? Wenn Sie eine zweite MovieClipInstanz auf Ebene 2 setzen, verdrängt (löscht) es die dort schon vorhandene Instanz. attachMovie("SternMC", "s", 2); attachMovie("MondMC", "m", 2); löscht den Stern! // Aber Achtung: die attachMovie-Methode funktioniert nur, wenn das Symbol „für Actionscript exportiert“ wurde, wie in Abbildung 104 gezeigt.. 105 MovieClips erzeugen: Abbildung 104: MovieClip für ActionScript exportieren 15.3 Lösungsansatz Ein Quadratisches MovieClip enthält die möglichen Teile einer Tapete als einzelne Frames.. Instanzen dieses MovieClips können mit attachMovie auf die Bühne gestellt werden: attachMovie("TapeteMC", "tap1", 1); Um viele Tapeten-Stück auf die Bühne zu stellen braucht man einen Schleife. In der Schleife muß jede einzelne Instanz einen anderen Namen und eine andere Tiefe bekommen. Wenn man nicht weiß, welche Ebenen schon belegt sind kann man immer mit getNextHighestDepth die nächste Freie Ebene suchen. i=0; while(i<10){ neuername = "tap" + i; attachMovie( "TapeteMC", neuername, getNextHighestDepth() ); i++; } Jede einzelne Instanz kann über Ihren Namen angesprochen und verändert werden: tap1._x = 100; tap1._y = 150; tap1.gotoAndStop(2); this.tap1._alpha = 50; 15.4 Objekte mit variablem Namen Wie können Sie ein Objekt ansprechen, dessen Name beim Schreiben des Programms noch nicht bekannt ist? Ein Beispiel dafür sind die einzelnen MovieClip- 106 Objekte mit variablem Namen Instanzen der Tapete: Man sollte ein Programm schreiben können, das 10 oder 100 oder 1000 TapetenTeile erzeugt und positioniert, ohne dafür 10, 100, 1000 Namen einzutippen. Beim Erzeugen der Tapetenteile ist der Name für die MovieClip-Instanz in der variable neuername gespeichert, egal ob der Name nun tap1 oder tap100 ist. Die normale Schreibweise mit dem Punkt funktioniert aber nicht mit einer Variable: neuername._x = 100; this.neuername._y = 150; this.neuername.gotoAndStop(1); Egal ob in der Varialbe neuername nun tap1 oder tap100 gespeichert ist, der Actionscript-Interpreter sucht hier nach einem Objekt mit dem Namen neuername. Aber es gibt eine alternative Schreibweise: this[neuername]._x = 100; this[neuername]._y = 150; this[neuername].gotoAndPlay(b); Durch die eckigen Klammern weiß der ActionscriptInterpreter: ich soll den Wert der Variable neuername als Name eines Objekts verwenden – also z.B. tap1 oder tap100, und zwar als Unter-MovieClip von this. Allgemein gesagt: oberclip_mc.unterclip_mc ist gleichbedeutend mit oberclip_mc["unterclip_mc"] ist gleichbedeutend mit n = "unterclip_mc"; oberclip_mc[n] Diese Schreibweise können wir nun innerhalb der Schleife verwenden um die Tapetenstück zu positionieren und ein zufälliges Bild der Tapete anzuzeigen: 107 MovieClips erzeugen: i=0; while(i<10){ neuername = "tap" + i; attachMovie( "TapeteMC", neuername, getNextHighestDepth() ); this[neuername]._x = i * 50; // je nach Breite des Tapetenstücks bildnr = 1 + int(Math.random() * 2); this[neuername].gotoAndStop( bildnr ); i++; } 15.5 Verschachtelte Schleife Bisher wird die Tapete nur in einem waagrechten Streifen von links nach rechts tapeziert. Wie kann man die Tapete über die ganze Bühne ausbreiten? Also nicht nur verschiedene x, sondern auch verschiedene y-Koordinaten aussuchen? Abbildung 105 zeigt die Instanznamen und Koordinaten von 6 x 4 Tapetenstücken. Abbildung 105: Name und Position der Tapeten-Stücke in 2 Dimensionen Eine Möglichkeit diese Aufgabenstellung zu lösen ist die verschachtelte Schleife: eine (äußere) Schleife arbeitet die Zeilen von oben nach unten ab. Innerhalb 108 Für Profis: 2d ohne Verschachtelung dieser Schleife zählt eine zweite Schleife die Spalten von links nach rechts: zeile = 0; while (zeile<10) { spalte = 0; while (spalte<10) { neuername = "tap" + spalte + "_" + zeile; x = spalte*50; y = zeile*50; // hier das Tapetenstück anbringen + positionieren spalte++; } zeile++; } 15.6 Für Profis: 2d ohne Verschachtelung Es gibt auch eine Möglichkeit mit einer einzigen Schleife zweidimensional zu Arbeiten – dazu brauch t man aber etwas Mathematik: der Modulo-Operator berechnet den Rest bei einer Division. In Actionscript sieht das so aus: i = 13; rest = i % 6; trace("der Rest ist " + rest ); Dieses Programm gibt 1 aus, weil 13 / 5 = 2 mit Rest 1. Diesen Operator kann man nun verwenden, um am Ende jeder Zeile (bei Rest == 0) den x-Wert zurückzusetzen und den y-Wert zu erhöhen. 109 MovieClips erzeugen: So sieht das Programm aus: i = 0; x = 0; y = -50; while (i<6*4) { if( i % 6 == 0 ) { x = 0; y += 50; } neuername = "tap_" + i; // hier das Tapetenstück x += 50; i++; } 15.7 Übungsaufgaben Übung 48) Erstellen Sie einen funkelnden Stern als MovieClip. Schreiben Sie ein Programm das eine Instanz dieses Sterns auf der Bühne plaziert und zufällig positioniert. Übung 49) Erstellen Sie einen funkelnden Stern als MovieClip. Schreiben Sie ein Programm das zufällig 100 von diesen Sternen auf der Bühne plaziert. Übung 50) Stimmen folgende Aussagen? 110 Übungsaufgaben attachMovie("xMC", "x", 1); fügt das MovieClip zur Ebene 1 hinzu attachMovie("xMC", "x", getNextHighestDepth()); fügt das Movie- Clip zur Ebene 1 hinzu attachMovie hat gar nichts mit den Ebenen die im Flash-Editor sichtbar sind zu tun. Übung 51) Programmieren Sie das Zufalls-TapetenProgramm. 111 onEnterFrame und hitTest: 16 onEnterFrame und hitTest In diesem Kapitel werden wir den „Takt“ von Flash aufgreifen, um damit Bewegung zu erzeugen. Ein Flash-Film folgt einem fixen Takt – den Frames pro Sekunde. Alle Zeitleisten im Film – egal ob Hauptzeitleiste, Zeitleiste eines Movieclips, oder Zeitleisten in einer mit loadMovie() geladenen swf-datei – folgen diesem Takt. Umgekehrt können Sie diesen Takt beim Programmieren nützen. Auf jeder Zeitleiste kann man eine onEnterFrame Funktion anbringen. Diese Funktion wird dann jedes Mal, wenn ein neuer Frame angezeigt wird, ausgeführt. In den letzten paar Flash-Versionen gibt es mehrere Schreibweise für onEnterFrame, in Actionscript 2 funktionieren alle diese Schreibweisen nebeneinander. Die alte Schreibweise verwendet onClipEvent: Die neue Schreibweise funktioniert mit einer Funktion namens onEnterFrame. Oder man schreibt eine Funktion mit anderem Namen, und weist dieser dann onEnterFrame zu. Das ist praktisch, wenn man die Funktion später austauschen will: Oder man weist der Eigenschaft onEnterFrame eine anonyme Funktion ohne Namen zu (wie in jQuery). onClipEvent(enterFrame) { // alt } function onEnterFrame() { // modern, erste Schreibweise } function bewegung() { … } onEnterFrame = bewegung; // später: onEnterFrame = pause; onEnterFrame = function() { … }; am MovieClip am MovieClip Die zweite oder dritte Schreibweise empfehle ich. Die Zuweisung funktioniert auch von „außerhalb“ des MovieClips: ball_mc.onEnterFrame = bewegung; 112 Übungsaufgaben Beispiel 14) Eine Zeichnung wird Schritt für Schritt aufgebaut. Abbildung 106: Schrittweiser Aufbau einer Zeichnung Die Funktion onEnterFrame, die für Abbildung 106 verwendet wurde, befindet sich auf der Hauptzeitleiste und sieht so aus: var x = 0; function onEnterFrame() { if (x < 400) { lineStyle(x / 70, 0xFF6600); moveTo(10 + x, 10); lineTo(400 - x, 100 + x); x = x + 20; } } Was genau gezeichnet wird, ist hier nicht so wichtig. Wichtig ist: bei jedem Aufbau eines neuen Frames wird eine Linie gezeichnet. Wenn die Framerate der Datei also auf 12 frames per second eingestellt ist bedeutet das: die 20 Linien werden in ca. 1,5 Sekunden gezeichnet. Die onEnterFrame- Funktion wird bis in alle Ewigkeit wieder und wieder aufgerufen. Nur das if sorgt dafür, daß ab einem gewissen Punkt nichts Neues mehr gezeichnet wird. 113 onEnterFrame und hitTest: 16.1 Zeichnung neu aufbauen Beispiel 15) Eine Kurve wird angezeigt, mit AnfangsEnd- und Kontrollpunkt. Die drei Punkte kann man mit Drag-and-Drop positionieren, die Kurve wird dabei immer wieder neu gezeichnet, sie scheint sich mit zu bewegen. In diesem Beispiel wird der Frame-Aufbau für eine Neuzeichnung der gesamten Zeichnung verwendet. Dazu muß jeweils die alte Zeichnung gelöscht werden: Abbildung 107: Neu-Aufbau einer Zeichnung function onEnterFrame() { // alte zeichnung löschen clear(); lineStyle(4, 0xff0000); moveTo(dot1_mc._x, dot1_mc._y); curveTo( controlDot_mc._x, controlDot_mc._y, dot2_mc._x, dot2_mc._y ); }} 16.2 Uhr Beispiel 16) Die aktuelle Uhrzeit wird grafisch angezeigt. Die Uhrzeit erfährt man von Flash über das Date Objekt: var my_date:Date = new Date(); var sek:Number = my_date.getSeconds(); Das ganze Programm sieht so aus, nur das Zeichnen der Zeiger fehlt noch: function onEnterFrame() { clear(); var my_date:Date = new Date(); var sek:Number = my_date.getSeconds(); var min:Number = my_Date.getMinutes(); // Minutenzeiger zeichnen // Sekundenzeiger zeichnen } 114 Bühne und Maus 16.3 Bühne und Maus Ein paar Kleinigkeiten, die bei den folgenden Beispielen gebraucht werden: Die Größe der Bühne erfährt man über das StageObjekt: Stage.width Stage.height Die Position des Mauszeigers ist in zwei Variablen gespeichert: _xmouse _ymouse Den normalen Mauszeiger kann man verstecken: Mouse.hide(); 16.4 Ball im Spielfeld Beispiel 17) Ein Ball bewegt sich gleichförmig über die Bühne, am Rand der Bühne prallt er ab Die Koordinaten der MovieClip Instanz sind über die Variablen _x und _y jederzeit zugänglich und können auch verändert werden. Für dieses Beispiel werden wir zwei zusätzliche Werte in der MoviClip-Instanz des Balles speichern, diese beiden Variablen bilden den Bewegungsvektor: ball_mc.vektorx = 10; ball_mc.vektory = -20; Diese Werte bedeuten: in jedem Frame soll sich der Ball 10 Pixel nach rechts und 20 Pixel nach oben bewegen – damit das so passiert, müssen wir aber noch ein entsprechendes Programm schreiben. 115 onEnterFrame und hitTest: Abbildung 108: Bewegungsvektor, vorher, nachher Wie muß so ein Programm zur Bewegung aussehen? Die neue Position des Balls berechnet sich aus der alten Position plus Bewegungsvektor: _x = _x + vektorx; _y = _y + vektory; Dieser Code muß regelmäßig ausgeführt werden, gehört also in die onEnterFrame Funktion des Balles. Abbildung 109 zeigt was passiert, wenn der Ball gegen die Wand prallt: erstens darf der Ball nicht durch die Wand gehen. Und zweitens verändert sich der Bewegungsvektor des Balls. Abbildung 109: Bewegungsvektoren beim Abprallen Im Beispiel prallt der Ball von rechts gegen die senkrechte Wand. Dabei bleibt die Y-Komponente des Bewegungsvektors gleich, die X-Koordinate wird umge- 116 Ball im Spielfeld kehrt (aus einer negativen Zahl wird eine positive Zahl). if ( _x < 0 ) { vektorx = -vektorx; } Die Veränderung der Bewegung stimmt schon, aber der Ball „taucht in die Wand ein“. Die _x Koordinate des Balles gibt ja an, wo der Registrierpunkt des Balles ist, wenn _x = 0 dann ist der Ball halb in der Wand: Abbildung 110: Ball hat Koordinate _x=0 Die Breite und Höhe des Balls können wir aus _width und _height auslesen. if ( _x < _width/2 ) { _x = _width/2; vektorx = -vektorx; } Für jede der vier Wände braucht man so ein if in der onEnterFrame-Funktion des Balles. So sieht das Gesamt-Programm aus: Auf der Hauptzeitleiste: mein_ball_mc.vektorx = 15; mein_ball_mc.vektory = 10; Auf der Instanz des Balles: onClipEvent(EnterFrame) { _x = _x+vektorx; _y = _y+vektory; if (_y>Stage.height-_height/2) { _y = Stage.height-_height/2; vektory = -vektory; } if (_x>Stage.width-_width/2) { _x = Stage.width-_width/2; vektorx = -vektorx; } if (_y<_height/2) { 117 onEnterFrame und hitTest: _y = _height/2; vektory = -vektory; } if (_x<_width/2) { _x = _height/2; vektorx = -vektorx; } } 16.5 Ball und Hittest Beispiel 18) Ein Ball trifft auf einen Ziegelstein und zerschlägt diesen. Um zu testen, ob ein MovieClip ein anderes berührt, verwendet man die Funktion hitTest. Hier ist der Code des Ziegelsteins: if(this.hitTest(_root.mein_ball_mc)) { // Animation kaputter Ziegel starten this.gotoAndPlay(2); } Die Funktion hitTest kann auf zwei Arten verwendet werden: MovieClip gegen MovieClip oder MovieClip gegen Koordinate. MovieClip gegen MovieClip (in Abbildung 111 links) testet, ob die Begrenzungs-Boxen der MovieClips sich berühren. Bei Ziegelsteinen ist das kein Problem, bei komplizierteren Formen gibt das oft einen Fehlalarm. MovieClip gegen Koordinate (in Abbildung 111 rechts) testet, ob an der Koordinate wirklich ein sichtbarer Teil des MovieClips ist – egal wie die Begrenzungsbox aussieht. MovieClip berührt MovieClip Koordinate berührt MovieClip nicht Koordinate berührt MovieClip Abbildung 111: die zwei Varianten von hitTest 118 Viele Projekte 16.6 Viele Projekte Mit onEnterFrame und hitTest können Sie nun viele neue Projekte machen – fast alle klassischen Computerspiele lassen sich mit diesen Werkzeugen umsetzen. Hier ein paar Beispiele: Übung 52) Schreiben Sie ein Programm, das eine Zeichnung Schritt für Schritt aufbaut. Verwenden Sie den Zufall! Übung 53) Schreiben Sie ein Programm, das bei jedem Bildaufbau einen Pfeil vom Nullpunkt zur aktuellen Position des Cursors zeichnet. Übung 54) Schreiben Sie ein Programm, das die aktuelle Uhrzeit grafisch darstellt. Übung 55) Schreiben Sie das Computerspiel Pong: ein Ball bewegt sich über das Spielfeld, das unten „offen ist“. Mit einem einfachen Schläger versucht man den Ball im Spiel zu halten. Übung 56) Schreiben Sie das Computerspiel Breakout: ein Ball bewegt sich über das Spielfeld, das unten „offen ist“. Mit einem einfachen Schläger versucht man den Ball im Spiel zu halten. Im oberen Teil des Spielfeldes sind viele Ziegelsteine, diese werden vom Ball zerschlagen und bringen Punkte. 119 Audio und Video asynchron: 17 Audio und Video asynchron In diesem Kapitel lernen Sie die verschiedenen Methoden kennen, wie man von Actionscript aus externe Audio und Video-Daten lädt und steuert die dann „gestreamed“ werden. 17.1 Audio streamen Um die Dateigröße der swf-Datei klein zu halten kann man eine Audiodatei auch von einem Externen Speicherort streamen. Beispiel 19) Ein Audio-Player soll mp3-Dateien abspielen, steuern und den Namen des Stücks in einem dynamischen Textfeld anzeigt. Die mp3-Dateien müssen die Dateinamen 1.mp3, 2.mp3, 3.mp3, … haben. Abbildung 3: Audio Player Layout Wenn die Dateinamen 1.mp3, 2.mp3,… sind, woher weiß der Player dann den Titel des Musikstücks? Die Antwort ist in der mp3-Datei versteckt: In der Datei können Informationen über das Musikstück gespeichert werden, das nennt man ID3-Tags. Die kann sogar der Windows Explorer anzeigen: Abbildung 112: Darstellung der ID3-Tags in Windows Explorer Flash beherrscht die Technik des „streaming“. Das heißt: die mp3-Datei muss nicht vollständig geladen werden um sie abzuspielen. Sobald ein paar Sekunden Musik aus der Datei geladen sind spielt Flash den Anfang ab. Das Laden und das Abspielen laufen dann gleichzeitig ab. 120 Audio streamen Trotzdem wird das Laden einer mp3-Datei (im Vergleich zu anderen Actionscript-Befehlen) sehr lange dauern - vielleicht eine ganze Sekunde. Es wäre nicht gut, wenn das ganze Flash-Programm während dieser Wartezeit „stehen bleiben“ würde. Die Lösung für dieses Problem nennt man asynchrone Programmierung: Ein Verarbeitungsschritt der besonders lange dauert – hier das Starten der mp3-Datei – wird gestartet, aber sein Ende wird nicht abgewartet. Erst wenn die mp3-Datei fertig geladen ist, bzw. wenn genug von der mp3-Datei geladen ist damit man die ID3-Tags lesen kann, wird eine bestimmte Funktion aufgerufen. Diese Funktion wird manchmal „CallbackFunktion“ genannt. In Flash sind es eine Ereignisfunktion, ähnlich wie onRelease oder onEnterFrame. Ein einfaches Beispiel mit einer mp3-Datei und dem Lesen des ID3-Tags: var music:Sound = new Sound(); music.onID3 = function() { trace("später: die Datei uns ihre ID3-Tags wurden geladen"); }; music.loadSound("1.mp3", true); trace("sofort"); ASYNCHRON Ein Sound-Objekt wird erzeugt. Die Ereignis-Funktion onID3 des Sound-Objekts wird definiert. Dann wird das Laden einer mp3-Datei gestartet. Dieser Schritt kann lange dauern, deswegen wartet der FlashInterpretr nicht, sondern geht weiter zum nächsten Befehl. Erst viele Millisekunden später, wenn der Anfang der mp3-Datei geladen wurde, wird Flash die Funktion onID3 aufrufen. Innerhalb dieser Funktion kann man auf this.id.songname und this.id.artist zugreifen. Diese Information kann man dann in einem dynamischen Textfeld anzeigen: 121 Audio und Video asynchron: Abbildung 4: Benötigte Elemente: Dynamisches Textfeld, Buttons Als Variablen auf der Hauptzeitleiste braucht man für den Audioplayer neben dem Sound-Objekt noch ein Variable (i)die anzeigt welches Stück gerade gespielt wird (1,2,3…), und eine Variable die anzeigt wie viele Stücke es insgesamt gibt: var i:Number = 1; var max:Number = 3; var music:Sound = new Sound(); Die beiden Buttons zum wechseln zwischen den Stücken verändern die Variable i, hier der Button der nach rechts blättert: on(release){ i++; if(i>max) i=1; loadNewSound(); } Die Funktion loadNewSound fasst das Starten des Ladevorgangs und die Anzeige im Textfeld zusammen: function loadNewSound() { anzeige_txt.text = "loading " + i; music.loadSound(i + ".mp3", true); } Übung 57) Schreiben Sie den Audioplayer wie hier beschreiben. Testen Sie ihn nicht nur am lokalen Computer, sondern auch auf einem Webserver – dort sind die Ladezeiten für die mp3-Dateien wesentlich höher! Übung 58) Verbessern Sie den Audioplayer: Stop- und Play-Buttons, Lautstärken-Regler, Anzeige der Position mit 122 Variablen für Flash in HTML setzen 17.2 Variablen für Flash in HTML setzen Der Audio-Player ist schon ein sehr allgemein verwendbares Programm: Sie können den Player für verschiedene mp3-Dateien verwenden, ohne die fla-Datei editieren zu müssen. Die swf-Datei hat nur noch eine Einschränkung: die maximale Zahl der mp3-Dateien ist fix vorgegeben. Um die Zahl von 3 auf 5 zu erhöhen müsste man die fla-Datei wieder Öffnen, und eine neue swf-Datei erzeugen. Das ist unpraktisch. Flash bietet uns für diese Problemstellung folgende Möglichkeit: Man kann einzelne Variablen über die URL mit übergeben: audio-player.swf?max=5 Das kann man direkt im Browser testen. Mehrere Variablen müssten mit & getrennte werden. Bei der Einbindung in eine HTML-Datei funktioniert das auch, hier im Beispiel mit Hilfe ovn SWFObject:
Der Audio-player kann leider nur mit Javascript und Flash benutzt werden. Ohne Javascript und Flash können Sie nur das erste Lied downloaden.
Das macht das Testen des Flash-Films schwieriger: innerhalb des Flash-Editors hat die Variable max (noch) keinen Wert. Deswegen sollte man den Code noch einmal verändern: 123 Audio und Video asynchron: var max:Number; if ( max == undefined ) { max = 3; } Nun können Sie getrost die fla-Datei des AudioPlayers verlieren: die swf-Datei funktioniert für beliebig viele Musikstücke. Zur Anzeige wie Viel der Sound-Datei schon geladen ist bzw. wie Viel schon abgespielt wurde können Sie folgende Methoden und Eigenschaften verwenden: (Gesamtdauer in Millisekunden) (aktuelle Position in Millisekunden) music.getBytesLoaded() (schon geladene Bytes) music.getBytesTotal() (Gesamtgröße in Bytes) music.duration music.position Um die Musik zu einer bestimmten Stelle vor- oder zurückzuspulen verwenden Sie die Methode start() music.start( 15 ); (Startpunkt in Sekunden) Übung 59) Verbessern Sie den Audio-Player wie beschrieben, so dass er die maximale Anzahl der Musikstücke aus der HTML-Datei übernimmt. Testen sie den Player mit verschiedenen Stücken und verschiedener Anzahl. 17.3 Video steuern Beispiel 20) Ein allgemeiner Videoplayer soll verschiedene ein flv-Videos abspielen können, diese werden bei der Einbindung der swf-Datei in den HTML-Code angegeben. Für den Player einfach die fertige Komponente von Flash verwenden: Aus der HTML-Datei sollen der Name der flv-Datei (quelle) und eine Beschreibung (beschreibung) übernommen werden: Abbildung 113: Video Player mit der FLVPlayback-Komponente Stage.scaleMode = "noScale"; import mx.controls.*; var myPlayer:mx.video.FLVPlayback; if (quelle == undefined) { 124 Video steuern myPlayer._visible=false; myTitle.text = "kein Video."; } else { myPlayer.contentPath = quelle; myPlayer.autoPlay = true; myTitle.text = beschreibung; } Die Angabe eines längeren Textes in der HTML-Datei wirft ein Problem auf: In einer URL darf kein Leerzeichen vorkommen. Die Leerzeichen müssen mit + ersetzt werden: video-player.swf?quelle=Ursty_Opener.flv&beschreibung=Opener+Ursty+2006 Es gibt einen Trick um diese „URL-Codierung“ zu erledigen: einfach den Text ins Suchfeld von Google eingeben, und dann in der resultierenden URL nach der Variable q suchen. Google muss die gleiche URLCodierung durchführen. Abbildung 114: Google führt URL-Codierung durch Übung 60) Erstellen Sie den flv-Player und testen Sie ihn mit verschiedenen flv-Dateien. Übung 61) Für Fortgeschrittene: Auch die Höhe und Breite des Films sollen aus HTML übernommen werden: Stage.resize soll erlaubt sein, dann können die normalen Breiten- und Höhenangeaben aus der URL der SWF-Datei als Stage.width und Stage.height ausgelesen und verwendet werden. 125 Arrays: 18 Arrays Mit Variablen und Verzweigungen können Sie einzelne Werte speichern und prüfen. Für größere Datenmengen (Listen von Strings, Listen von MovieClips) brauchen wir eine neue Art von Variable: das Array. 18.1 Beispiele: Glückskeks + Quiz Beispiel 21) Glückskeks: Aus einem großen Vorrat von ewigen Weisheiten wird eine zufällig ausgewählt und angezeigt. Die linke Hälfte von Abbildung 115 zeigt, wie das Glückskeks aussehen könnte. Hier wird beim Start des Programms einmal der Text zufällig ausgewählt und angezeigt. Das Programm speichert den „Vorrat von ewigen Weisheiten“ in einem Array. „Zufällig“ heißt in einem Computerprogramm: „bei jedem Programmstart könnte es anders ausgehen“. Das Glückskeks ist ein sehr einfaches Beispiel, das nächste Beispiel baut darauf auf: Beispiel 22) Quiz: Eine Frage mit zwei möglichen Antworten wird angezeigt, die UserIn klickt auf eine Antwort und erhält sofort eine Rückmeldung ob die Antwort richtig war. Abbildung 115 zeigt (sehr simple) Oberflächen für diese beiden Beispiele. Abbildung 115: Glückskeks und Quiz (Design Majometano) 126 Arrays Ein Quiz mit fixen Fragen und fixen Antworten können Sie sicher schon in Flash erstellen. Doch nun wollen wir, dass aus einem Pool von mehreren Fragen zufällig fünf ausgewählt und angezeigt werden. Die Position der Antworten (ob die richtige Antwort links oder rechts angezeigt wird) soll auch zufällig sein. 18.2 Arrays Das englische Wort Array hat sich auch in der deutschen Sprache durchgesetzt. Während eine normale Variable nur einen Wert speichern kann, kann ein Array gleich eine ganze Reihe von Werten aufnehmen. Man kann sich ein Array also wie in Abbildung 116 gezeigt als eine Reihe von Schachteln vorstellen, die aber einen gemeinsamen Namen (hier „hugo“) tragen. Will man auf die einzelnen Werte zugreifen braucht man dazu den Namen und die Nummer der Schachtel. In Actionscript sieht das so aus: trace( hugo[0] ); // ersten Wert im // Array hugo ausgeben Beim durchnumerieren der Schachteln beginnt man mit Null statt mit Eins. Die Nummern werden auch „Index“ genannt. Wer Wie hugo Abbildung 116: Array, als Reihe von Schachteln dargestellt Was Abbildung 117 zeigt noch einmal das Bild mit den Schachteln, diesmal sind die einzelnen Schachteln so beschriftet, wie sie in Actionscript benannt sind. 127 Arrays: Wer Wie hugo[0] hugo[1] Was hugo[2] Abbildung 117: Array, als nummeriert Reihe von Schachteln dargestellt Warum nimmt man nicht statt hugo[0], hugo[1], hugo[2] drei verschiedene Variablen heli, hans und herbert? Wenn die drei Werte nichts miteinander zu tun hat macht es wirklich Sinn sie in separaten Variablen zu speichern. Ein Array verwendet man immer dann, wenn aus den Werten einer zufällig ausgewählt werden soll, oder wenn mit allen Werte das selbe getan werden soll (in einer Schleife). SCHLEIFE ARRAY ÜBER EIN Zuerst das Beispiel mit der Schleife: Angenommen wir haben im Array mehrere Fragen gespeichert, und wollen von jeder Frage ausgeben wie lange der Text ist. Ohne Array würde das so aussehen var heli:String = "Aller guten Dinge sind wie viel?"; var hans:String = "Wie viele Musketiere gibt es?"; var herbert:String = "Wie viele Gefährten in der Ringgemeinschaft?"; l = length( heli ); trace("Der Text der l = length( hans ); trace("Der Text der l = length( herbert trace("Der Text der 1. Frage ist " + l + " Zeichen lang"); 2. Frage ist " + l + " Zeichen lang"); ); 3. Frage ist " + l + " Zeichen lang"); Als Programmiererin betrachte ich diesen Code mit Abscheu an: der Code wiederholt sich ja! Da steht ja dreimal dasselbe! Und was wäre, wenn wir 100 Fragen speichern wollten? Dann müssten wir 100 Namen für die Variablen erfinden, und zweimal 100 Zeilen Code eintippen! Mit lauter verschiedenen Variablennamen können wir keine Schleife verwenden. Die Lösung: die Werte in einem Array speichern, und den Code der sich wiederholt in eine Schleife schreiben. 128 Arrays var hugo = Array( "Aller guten Dinge sind wie viel?", "Wie viele Musketiere gibt es?", "Wie viele Gefährten in der Ringgemeinschaft?" ); i=0; while( i < hugo.length ) { l = length( hugo[i] ); trace("Der Text der " + i + ". Frage ist " + l + " Zeichen lang"); i++; }; Dieses Programm liefert fast den gleichen Output 8 wie die Version mit den drei Variablen, aber hat einen riesigen Vorteil: Die Schleife funktioniert auch wenn 100 oder 1000 oder eine Million Werte im Array hugo gespeichert sind. Somit ist der ersten Tugend der Programmierung (Faulheit) genüge getan. Das zweite Anwendungsbeispiel für Arrays ist die zufällige Auswahl einer Frage. Da die Werte im Array numeriert sind, brauchen wir nur eine zufällige Zahl erzeugen. Für ein Array mit drei Elementen sind die möglichen Zahlen 0,1,2. Allgemein gesprochen: Für ein Array a mit a.length Elementen sind die möglichen Zahlen 0,1,…,a.length-1. Mit folgender Formel wird also eine passende Zufallszahlen berechnet: i = int(Math.random()*a.length) Durch die Multiplikation mit a.length werden die Zufallszahlen vom 0 bis 1 (aber niemals ganz 1) auf 0 bis a.length (aber niemals a.length) verteilt. Die Methode int() rundet auf die nächste ganze Zahl ab – damit erhalten wir genau die möglichen Nummern des Arrays. ZUFÄLLIG AUSWAHL Können Sie sich denken was der Unterschied ist? Wenn nicht, dann können Sie einfach beide Programme ausprobieren 8 129 Arrays: ARRAYS VON MOVIECLIPS Arrays in Actionscript können übrigens mehr als Arrays in anderen Programmiersprachen: Sie können nicht nur Zahlen oder Strings speichern, sondern auch MovieClip-Instanzen wie in Abbildung 118 gezeigt: mc[0] mc[1] mc[2] Abbildung 118: Array das MovieClip-Instanzen enthält Die MovieClips-Instanzen im Array können nun genau so verwendet werden wie andere MovieClip-Instanzen auch: mc = Array(poly_mc, herz_mc, stern_mc); mc[0]._visible = false; // poly_mc wird unsichtbar mc[1]._x = 100; // herz_mc wird auf x-koordinate 100 verschoben Aus einem Array kann man Elemente herauslöschen mit dem Befehl splice, wie in Abbildung 119 gezeigt: Abbildung 119: Ein Element aus einem Array löschen mit splice Der Code für das löschen des 3. Elements auch einem Array lautet: a.splice(2,1); Das erste Argument von splice ist der Index des Elements das gelöscht werden soll, das zweite Argument gibt an wie viele Elemente gelöscht werden sollen. An ein schon bestehendes Array kann man jederzeit zusätzliche Werte anfügen wie in Abbildung 120 gezeigt: 130 Lösungsansatz Glückskeks Abbildung 120: Ein Element an ein Array anfügen mit push Der Code für das anfügen lautet: a.push( "neuer Wert" ); Sie wissen nun theoretisch was Arrays können und warum sie verwendet werden. Nun die praktischen Beispiele: 18.3 Lösungsansatz Glückskeks Die Einzelteile für das Glückskeks sind schnell kombiniert: − − − Ein Array mit den weisen Sprüchen Die zufällige Auswahl eines Spruches Die Ausgabe des Spruches über ein dynamisches Textfeld Noch ein Tipp zum dynamischen Textfeld: Wenn Sie interessante Schriften oder schrägen Text verwenden wollen müssen Sie die Schrift einbetten wie in Abbildung 121 gezeigt. Abbildung 121: Schrift für ein dynamisches Textfeld einbetten 131 Arrays: 18.4 Übungen Übung 62) Was geben diese Programme mit Arrays aus? 1 a = Array(42,13,23); trace( a ); 3 a = Array(42,13,23); a[1] = a[0]; b = a[0] + a[1]; trace( b ); 5 a = Array(1,1); a[2] = a[0] + a[1]; a[3] = a[1] + a[2]; a[4] = a[2] + a[3]; trace( a ); 2 a = Array(42,13,23); b = a[0] + a[1]; trace( b ); 4 a = Array(stern_mc, herz_mc); a[0]._x = 10; a[1]._x = a[0]; trace(a[1]._x); 6 a = Array(1,1); i=2; while(i<5) { a[i] = a[i-1] + a[i-2]; i++; } trace( a ); Zu 5+6 siehe auch Wikipedia 9 und Bilderrätsel Salzburg 10 (Installation von Mario Merz am Mönchsberg). Übung 63) Diese Programme mit Arrays sind fehlerhaft – finden Sie die Fehler! A a = array(42,13,23); trace( a ); C a = Array(1,1); a[2] = a[0 + a[1]; a[3] = a[1] + a[2]; a[4] = a[2] + a[3]; trace( a ); B a = Array(42,13,23); b = a + a[1]; trace( b ); D a = Array(1,1); i=2; while(i<5) { a[i] = a[i-1] + a[i-2]; } trace( a ); Übung 64) Setzen Sie das Glückskeks um 18.5 Lösungsansatz Quiz Die Aufgabenstellung des Quiz ist so komplex, dass es auf viele verschiedene Arten erfolgreich umgesetzt werden kann. Hier wird ein möglicher Lösungsansatz beschrieben. 9 http://de.wikipedia.org/wiki/Fibonacci-Folge http://www.matheboard.de/thread.php?threadid=39274 10 132 Lösungsansatz Quiz Das gesamte Quiz findet auf der Hauptzeitleiste statt. Die Zeitleiste wird in mehrere Phasen eingeteilt: init – Initalisierung der Variablen, z.B. Punkte auf Null setzen frage – Stellen der Frage richtig – richtige Antwort gegeben, Punkte hoch zählen. falsch – falsche Antwort gegeben. ende – Alle Fragen wurden gestellt, Spiel vorbei, Gesamtpunkte anzeigen. Nach einer richtigen oder falschen Antwort geht es immer zurück zur frage, außer alle Fragen sind bereits verbraucht, dann ist das Ende des Spiels erreicht. Abbildung 122: Quiz: Zeitleiste mit Abschnitten init, frage, richtig, falsch, ende Die verschiedenen Fragen und die zugeordneten Antworten werden in drei Arrays gespeichert. In der Initialisierungs-Phase (die nur einmal durchlaufen wird) werden folgende Variablen gesetzt: 133 Arrays: fragetexte falschetexte richtigetexte punkte Array mit den Fragen Array mit den falschen Antworten (gleicher Index wie fragetexte) Array mit den richtigen Antworten (gleicher Index wie fragetexte) Jede richtige Antwort bringt einen Punkt In der nächsten Phase (die oft durchlaufen wird) frage linkeantwort rechteantwort istlinksrichtig Text der Fragen Text der linken Antwort Text der rechten Antwort Wert true bedeutet: links die richtige Antwort anzeigen, Wert false bedeutet: links wird die falsche Antwort anzegeigt. In der Hauptzeitleiste werden im init-Bild die Arrays initialisiert: // Initialisierung var fragetexte:Array = Array("Aller guten Dinge sind wie viel?", "Wie viele Musketiere gibt es?", "Wie viele Gefährten in der Ringgemeinschaft?"); var falschetexte:Array = Array("vier", "sieben", "drei"); var richtigetexte:Array = Array("drei", "drei", "neun"); var punkte:Number=0; var var var var var fragenr:Number; // wird später zufällig ausgewählt frage:String; // Text der ausgewählten Frage linkeantwort:String; rechteantwort:String; linksrichtig:Boolean; Code 1: Initialisierung des Quiz Im zweiten Bild wird die Frage ausgewählt, und in die Variable frage geschrieben, die dann im dynamischen Textfeld angezeigt wird. 134 Lösungsansatz Quiz // Frage auswählen fragenummer = int(Math.random()*fragetexte.length); frage = fragetexte[fragenummer]; // Aussuchen auf welcher Seite die richtige Antwort steht. if (Math.random()<0.5) { linksistrichtig = true; linkeantwort = richtigetexte[fragenummer]; rechteantwort = falschetexte[fragenummer]; } else { linksistrichtig = false; linkeantwort = falschetexte[fragenummer]; rechteantwort = richtigetexte[fragenummer]; } Code 2: Fragestellung für das Quiz zufällig auswählen Der Code auf dem linken und rechten Antwort-Button muss den Wert der Variable linksistrichtig mit einberechnen: on (release) { if (linksistrichtig) { gotoAndPlay("richtig"); } else { gotoAndPlay("falsch"); } } Code 3: Code für den Antwort Button (links) Es bleiben noch einige Dinge zu tun: Die Punkte zählen, die „verbrauchten“ Fragen (und Antworten) aus den Arrays entfernen, wenn alle „verbraucht“ sind das Ende des Spiels. Dieses Beispiel ist schon recht umfangreich, man muss dabei viele Variablen im Auge behalten. War die hier gegebene Dokumentation ausreichend um das Beispiel zu durchschauen? Wie halten Sie es selbst mit der Dokumentation Ihrere Programme? Schreiben Sie Kommentare in den Code um das Programm verständlicher zu machen? Schreiben Sie eine README-Datei in der das Programm im Überblick erklärt wird? Das Zielpublikum für Dokumentation sind ProgrammiererInnen – die Personen, die das Programm in 3 Monaten, in einem Jahr, in zwei Jahren verwenden und überarbeiten müssen. Vielleicht sind Sie das 135 Arrays: selbst, vielleicht ist es jemand anderes. Schreiben Sie Ihre Dokumentation immer so freundlich, ausführlich, sorgfältig wie Sie selbst sie gerne lesen würden! 18.6 Übungsaufgaben Übung 65) Programmieren Sie das Quiz. Übung 66) Studieren Sie noch einmal die Dokumentation hier: welche weiteren Informationen hätten Ihnen beim Verständnis des Quiz geholfen? Schreiben Sie Stichworte auf. 136 Übungsaufgaben 19 Vom Server laden Kombinieren Sie die Stärken von Flash mit den Stärken serverseitiger Programmierung. Flash hat dabei die Rolle Information darzustellen. Das Programm am Server kann Daten auf Dauer speichern, die Kommunikation mit anderen Usern herstellen, etc. Betrachten wir noch einmal die Kommunikation zwischen Client und Server im Web: Abbildung 123: Kommuikation zwischen Webbrowser, Webserver und Flash Player, Webserver Der Webbrowser stellt eine Anfrage an den Webserver (Pfeil 1 in Abbildung 123), der Webserver antwortet in dem er z.B. HTML-Daten sendet (Pfeil 2). Der Browser liest die HTML-Daten und stellt sie dar. Wenn ein object Tag enthalten ist, der auf eine swf-Datei verweist dann stellt der Webbrowser eine weitere Anfragen an den Server (Pfeil 1) um die swf-Datei zu laden. Der Server sendet die swf-Datei (Pfeil 2). Nun startet der Browser den Flash Player als Plugin, und übergibt ihm die Kontrolle über einen Bereich des Browser-Fensters. Der Flash Player erhält die swfDatei und stellt diese dar. So weit, so bekannt. In der swf-Datei können nun Actionscript-Befehle enthalten sein, die den Flash Player anweisen eine Anfrage an den Server zu schicken (Pfeil 3). Wenn die Antwort des Server einlangt (Pfeil 4) wird in der swfDatei eine onLoad Funktion aufgerufen. 137 Vom Server laden: 19.1 Einfache Daten laden Wir verwenden ein PHP-Programm auf dem Server das einen Zugriffszähler führt und immer den aktuellen Stand des Zählers ausgibt. Aufruf des Programms: counter.php Die Ausgabe des Programms ist nicht für die Anzeige im Browser gedacht, sondern für die Weiterverarbeitung in Flash. Der Output sieht so aus: count=123 Falls Sie kein Counter-Programm haben können sie folgendes (Fake-)Programm verwenden, das blos eine Zufallszahl ausgibt: Mit dem (veralteten) Actionscript-Befehl loadVars oder mit dem (moderneren) Objekt loadVars kann man diese Daten in Flash lesen. So sieht ein Flash-Programm aus, das diese Daten abholt und liest: 1 2 3 4 5 6 7 8 9 10 11 url = "http://www.meinserver.net/counter.php "; l = new LoadVars(); l.onLoad = function(success) { if (success) { trace("daten sind da: " + this.count); } else { trace("fehler beim Laden von " + url); } } l.load(url); trace("...gleich geht's weiter"); Zeilen eins bis neun sind nur die Vorbereitung, erst Zeile 10 startet den asynchronen Lade-Vorgang vom Webserver. Wenn dann viele Millisekunden später die Daten vom Webserver eintreffen wird die onLoad-Funktion des LoadVars-Objekts (die in Zeile 3 bis 9 definiert wurde) gestartet. 138 XML für Slideshow Innerhalb dieser onLoad-Funktion sind die Daten vom Webserver als Eigenschaften von this lesbar: hier also this.count. Setzen Sie den Counter mit einer kleinen BühnenGröße um, damit Sie diesen Flash-Film als keines Widget in eine vorhandene HTML-Seite einbinden können. 19.2 XML für Slideshow Ein PHP-Programm liefert eine Liste der am Server vorhandenen Bilder als XML-Daten an Flash. Flash stellt die Bilder in einer Slideshow dar. Das PHPProgramm wird als Datei mit der Endung .php in den Ordner mit den Bildern gespeichert: \n"); foreach( $bilder as $bild ) { echo("\n"); } echo("\n"); ?> Der Output des PHP-Programmes sind XML-Daten: Testen Sie zuerst das PHP-Programm alleine mit dem Browser: der Browser kann den XML-Output des Programmes gut darstellen. Wenn Sie ein zusätzliches Bild in den Ordner laden, sollte es beim nächsten Aufruf im XML erscheinen. 139 Vom Server laden: Abbildung 124: Darstellung von XML-Daten im Webbrowser Firefox Das Laden der XML-Daten erfolgt wieder asynchron, mit dem XML-Objekt: var xml:XML = new XML(); // Leerzeichen und Formatierungen in XML // sollen ignoriert werden: xml.ignoreWhite = true; // wenn Daten fertig gelanden wurden // rufe die Funktion XMLgeladen auf xml.onLoad = xmlGeladen; Die Struktur der XML-Tags wird in Flash als Baum von Objekten dargestellt; das XML-Objekt ist dabei die Wurzel des Baumes. Abbildung 125: Darstellung der XML- Struktur als Baum In Javascript wird dasselbe Prinzip für die Darstellung des HTML-Dokuments als Baum von Objekten verwendet; Sie kennen es dort unter dem Namen Document Object Model oder kurz DOM. 140 XML für Slideshow Auch die Befehle, Funktionen, Eigenschaften zur Manipulation des DOM sind in Actionscript gleich wie in Javascript: Mit den Eigenschaften firstChild und childNodes kann man in diesem Baum navigieren: xml.firstChild entspricht dem bilder Tag. xml.firstChild.firstChild entspricht dem ersten bild Tag. xml.firstChild.childNodes ist ein Array das alle bild Tags enthält, xml.firstChild.childNodes[0] entspricht also wieder dem ersten bild Tag. Jedes Objekt im Baum enhält ein Objekt attributes, das die Namen und Werte der Attribute speichert: xml.firstChild.firstChild.attributes.imgurl liefert den Wert des imgurl-Attributes des ersten Bildes. Die Funktion xmlGeladen liest nun die Daten aus dem XML-Baum und schreibt die Namen der Bilder in ein Array namens bilderListe, dieses Array wird in weitere Folge von der Funktion zeigeBilder verwendet um die Slideshow zu starten. function xmlGeladen() { var xnode:XMLNode; // hier wird ausgelesen wie viele nodes sich im XML befinden. anzahlBilder = xml.firstChild.childNodes.length; for(var i:Number = 0; i < anzahlBilder; i++) { // Bild nummer i xnode = xml.firstChild.childNodes[i]; bilderListe.push(xnode.attributes.imgurl); } // Darstellung der Slideshow starten zeigeBilder(); } 141 Anhänge: XML für Slideshow 20 Ausblick Sie haben den Umgang mit Flash und die Programmierung mit Actionscript 2 Schritt für Schritt erlernt. Durch das selbstständige Lösen der Übungsbeispiele haben Sie viel Programmier Erfahrung erworben. Wie kann es nun weiter gehen? Was können sie als nächstes lernen? 1. Übung, Übung, Übung. Je mehr sie programmieren, desto besser werden Sie. Sie werden schneller Lösungswege finden, Sie werden kürzere, übersichtlichere Programme schreiben; Sie werden Programme schreiben die sich leichter adaptieren und erweitern lassen. Serverseitige Programmierung. Wie Sie im letzten Kapitel gesehen haben erweitert und ergänzt die serverseitigen Programmierung die Fähigkeiten von Flash. Lernen sie PHP und MySQL, diese Kombination ist auf vielen Webservern installiert. Das Ideal: a. Sie haben schon bemerkt, daß man mit vermehrter Verwendung von Actionscript die fla-Datei immer leerer und leerer wird. Die ideale Flash-Datei (aus meiner Sicht als Programmiererin) enthält einige Symbole in der Bibliothek, aber eine ganz leere Bühne, und in der Hauptzeitleiste nur einen einzigen Frame. In diesem Frame ist das ganze Actionscript-Programm gespeichert, das Programm erzeugt alles Weitere. Überlegen Sie beim nächsten Programm wie Sie diesem Ideal näher kommen! 4. Verwendung von Ereignis-Funktionen, Listenern, anynchroner Programmierung. Die onEnterFrame – Eigenschaft eines MovieClips war das erste Beispiel für eine Ereignis-Funktion; der Audio-Player das erste Beispiel für asynchrone Programmierung. Diese Konstrukte sind typisch für moderne Actionscript 3 Programmierung, verwenden Sie diese Möglichkeiten! Lernen Sie mit Listener-Objekten zu arbeiten. Actionscript 3 beobachten. Mit Actionscript 3 hat Adobe im Jahr 2007 eine stark veränderte Neuauflage von Actionscript veröffentlicht. Der Umstieg auf Actionscript 3 ist für Programmier-AnfängerInnen aufwändig, und auch nicht notwendig. Behalten Sie die Entwicklung im Auge, machen Sie sich darauf gefasst eines Tages umsteigen zu müssen. Andere Technologien beobachten. Verlieren Sie nicht die Alternativen zu Flash aus den Augen! So hat z.B: die Einführung von AJAX die Verwendung von Flash verändert: viele Sites die vor zwei Jahren noch mit Flash gemacht worden wären, werden heute mit AJAX erstellt. Flash könnte binnen zwei Jahren völlig verschwinden, wenn sich andere, bessere Lösungen ergeben. Oder es könnte noch jahrelang verwendet werden. Wie immer die Entwicklung weiter geht: Sie sollten darüber früher bescheid wissen als Ihre Kunden! 2. 3. 5. 6. 142 129BAusblick: XML für Slideshow 143 Anhänge: Literatur Anhänge 20.1 Literatur HARRIS (2004): How Web Animation Works. http://computer.howstuffworks.com/webanimation.htm/printable 6.Mai 2005, vermutlich vom Juni 2004. SHERMAN(2004), Sherman Richard: Hollywood 2D Digital Animation / The New Flash Production Revolution. Boston: Thomson Course Technology. ISBN 1-59200-170-X Erstellung von professionellen Animationsfilmen mit Flash. MOOCK (2004): Essential ActionScript 2.0. O'Reilly. ISBN 978-0596006525. KERSKE (2007): Praxiswissen Flash CS3. O'Reilly. ISBN 978-3897217218. BHANGAL(2004): Bhangal Sham: Flash Hacks. O’Reilly. ISBN 0-596-00645-4. Einhundert Tricks mit Flash. Für Fortgeschrittene, Actionscript Kenntnisse sind notwendig. Leider nur auf Englisch. 20.2 Online-Quellen http://computer.howstuffworks.com/web-animation.htm/printable Harris How Web Animation Works by Tom Harris, 6.Mai 2005, vermutlich vom Juni 2004. http://www.ecma-international.org/publications/standards/Ecma-262.htm ECMA Stanadard der die Syntax von Javascript beschreibt http://www.macromedia.com Homepage von Macromedia (seit 2005 Teil von Adobe) http://www.macromedia.com/software/player_census/npd/ Statistik die im Auftrag der Firma Macromedia durchgeführt wurde http://www.quirksmode.org/dom/ Quirskmode ist eine Sammlung von Browser-Fehlern und Sonderbarkeiten http://www.theopensourcery.com/osrsvgover.htm noch eine Plugin Statistik 144 Anhänge: Abbildungsverzeichnis 20.3 Abbildungsverzeichnis Abbildung 1: Beispiel Flash-Movies: Stern als Standbild, Stern als einfach Animation Abbildung 2: Dateigrößen der Flash-Movies in Abbildung 1 im Vergleich zu gif und jpg Abbildung 3: Stern, skaliert Abbildung 4: (historisches) Beispiel für eine „Bild-für-Bild“-Animation Abbildung 5: Rollover-Bild als Beispiel für einfache Interaktion Abbildung 6: Javascript Fehlermeldungen Abbildung 7: HTML-Dokument und DOM, dargestellt im Firefox DOM Inspector Abbildung 8: Autocomplete Eingabefeld mit script.aculo.us Abbildung 9: FLVPlayback Komponente Abbildung 10: Die Teile der Flash GUI Abbildung 11: Füllung markiert vs. Kontur markiert Abbildung 12: Die Füllung hat einen Teil der Kontur gelöscht Abbildung 13: der rechte Kreis wurde mit dem Objektzeichnungsmodell gezeichnet Abbildung 14: Kontur verformen mit dem Auswahl-Werkzeug Abbildung 15: Kontur glätten bzw. begradigen Abbildung 16: Kontur mit Ankerpunkten und Tangenten bearbeiten Abbildung 17: Tintenfass- und Farbeimer-Werkzeug Abbildung 18: Kontur und Füllung (konvertiert), Verformung beider Abbildung 19: Text, einmal geteilter Text, zweimal geteilter Text, veränderte Form des Texts Abbildung 20: Bitmap, Detail, Vektor-Nachzeichnung dieses Details Abbildung 21: Film wird exportiert, GUI für den Wechsel zurück zum Editor Abbildung 22: Kommunikation zwischen Webbrowser (mit und Flash Player) und Webserver Abbildung 23 Bearbeitung des eingebundenen Flash-Films in Dreamweaver Abbildung 24: Skalierung des Flashfilms bei der Einbindung in die Webseite Abbildung 25: Ebenen Abbildung 26: Effekt einer Maske Abbildung 27: Erstellen einer Maske Abbildung 28: Beispiel für einen Film mit wiederholten Elementen Abbildung 29: Größe von swf-Dateien im Vergleich bei Verwendung von Formen oder Symbolen Abbildung 30: Dialog „in Symbol konvertieren“ Abbildung 31: Original und Instanz eines Symbol, beide ausgewählt Abbildung 32: Symbolnamen und Instanznamen in den Eigenschaften und im Film-Explorer Abbildung 33: Das Bibliotheks-Fenster Abbildung 34: Bearbeiten des Dokuments vs. Bearbeiten des Symbols „Stern“ Abbildung 35: Eine Veränderung des Symbols verändert alle Instanzen Abbildung 36: Arbeiten mit einer fremden Bibliothek Abbildung 37: Dialog zum Bibliothekskonflikt – Symbol mit gleichem Namen wird eingefügt Abbildung 38: Zeitleiste ohne Zeit und mit Zeit Abbildung 39: Beispiele für Schlüsselbilder, leere Schlüsselbilder und normale Bilder Abbildung 40: Das Ende der Zeit – in zwei Ebenen der Zeitleiste Abbildung 41: Zeitleiste einer Bild-für-Bild Animation Abbildung 42: Erstellung einer Bild-für-Bild Animation mit Hilfe der Zwiebelschalen-Darstellung Abbildung 43: Bild-für-Bild Animation aus Einzelbildern eines Videos Abbildung 44:Bewegungstween Abbildung 45: Erstellung eines Tweens Abbildung 46: Darstellung von korrektem und defektem Tween Abbildung 47: Bewegungstween mit veränderter Helligkeit und Skalierung Abbildung 48: Bewegungstween mit mehreren Schlüsselbilder, Bewegungstween entlang eines Pfades Abbildung 49: Das Symbol wird am Pfad angebracht Abbildung 50: Werkzeuge, Bühne, Eigenschaften eines Bewegungstween mit Drehung Abbildung 51: Zwischen-Schlüsselbider zur Steuerung der Geschwindigkeit in einem Bewegungstween Abbildung 52:Formtween, defekter Formtween Abbildung 53: Ein MovieClip in der Bibliothek Abbildung 54: Bewegung der MovieClip Instanz auf der Hauptbühne (Hauptzeitleiste) Abbildung 55: Zeitleiste im MovieClip Abbildung 56: Hauptzeitleiste und Zeitleiste des MovieClips symbolisch überlagert Abbildung 57: Bild-für-Bild Animation wird zu einem MovieClip Abbildung 58: Standard-Buttons von Windows, Mac OS X, Gnome (Linux) Abbildung 59:Aktiver Bereich eines Buttons gleich sichtbarer Bereich Abbildung 60: Drei Buttons mit Überlappung, nur eine ist jeweils aktiv Abbildung 61: Aktiver Bereich eines Buttons, der sich vom sichtbaren Bereich unterscheidet Abbildung 62: Wiederverwendung eines Buttons mit verschiedenen Beschriftungen Abbildung 63: Importierte Sounddatei in der Bibliothek Abbildung 64: Audio in der Zeitleiste Abbildung 65: Eigenschaften einer Audio-Datei auf der Bühne Abbildung 66: Einstellungen für Veröffentlichungen: Audio-Qualität 6 6 7 8 9 10 10 11 13 14 16 16 16 17 17 17 18 18 19 20 21 22 22 23 25 26 27 28 28 29 29 30 30 31 31 32 32 33 34 34 35 36 36 37 37 38 38 39 40 40 41 41 42 43 43 44 45 46 47 47 48 48 50 50 51 51 145 Anhänge: Abbildungsverzeichnis Abbildung 67: Eigenschaften und Parameter eine Komponenten-Instanz Abbildung 68: Skins für den FLVPlayer Abbildung 69: Fenster VERHALTEN erzeugt auch Actionscript, siehe Fenster AKTIONEN Abbildung 70: AKTIONEN-Fenster mit Werkzeugleiste und Skript-Navigation Abbildung 71: Tooltipps im AKTIONEN-Fenster Abbildung 72: Flash-Hilfe zum Befehl on() Abbildung 73: Actionscript auf Bildern der Zeitleiste oder auf Instanzen auf der Bühne Abbildung 74: Der Skriptnavigator Abbildung 75: Beispiele für zulässige und unzulässige Namen Abbildung 76: Fehlermeldung Abbildung 77: Gezieltes Ansteuern des Fehlers mit dem Film Explorer Abbildung 78: Ein Button als Link zu einer anderen Webseite Abbildung 79: Erstellen eines Links mit dem Verhalten-Fenster Abbildung 80: Actionscript Code der durch das Verhalten erstellt wurde Abbildung 81: Drag and Drop mit Verhalten Abbildung 82: Hauptfilm mit mehreren Buttons mit denen weitere Filme geladen werden Abbildung 83: Filme wird angehalten, und über Buttons wieder gestartet Abbildung 84: Aktion am Bild Nummer 11: stop(); Abbildung 85: Actionscript beim Loslassen des Buttons Abbildung 86: Eine Story mit zwei alternativen Enden Abbildung 87:Namen für einzelne Bilder in der Zeitleiste Abbildung 88: Flussdiagramm für den Film mit Verzweigung Abbildung 89: Zeitleiste des MovieClips als Handlungs-Repertoire Abbildung 90: Eine Handlung Abbildung 91: Drei Variablen, als Schachteln dargestellt Abbildung 92: statisches und dynamisches Textfeld Abbildung 93: Puzzle das die Punkte und Versuche mitzählt Abbildung 94: Sechs Instanzen Abbildung 95: Preloader mit Fortschritts-Balken Abbildung 96: Download simulieren Abbildung 97: Linien mit Actionscript gezeichnet Abbildung 98: Kurve die mit curveTo gezeichnet wurde (und Kontrollpunkt) Abbildung 99: Zwei verschiedene Füll-Farben Abbildung 100: Drei Rechtecke auf der Flash Bühne mit Koordinaten Abbildung 101: Farbauswahl für ein Teil eines MovieClips Abbildung 102: Zufalls-Muster Abbildung 103: Gewünschtes Ergebnis: 7 mal 4 Kreuze Abbildung 104: MovieClip für ActionScript exportieren Abbildung 105: Name und Position der Tapeten-Stücke in 2 Dimensionen Abbildung 106: Schrittweiser Aufbau einer Zeichnung Abbildung 107: Neu-Aufbau einer Zeichnung Abbildung 108: Bewegungsvektor, vorher, nachher Abbildung 109: Bewegungsvektoren beim Abprallen Abbildung 110: Ball hat Koordinate _x=0 Abbildung 111: die zwei Varianten von hitTest Abbildung 112: Darstellung der ID3-Tags in Windows Explorer Abbildung 113: Video Player mit der FLVPlayback-Komponente Abbildung 114: Google führt URL-Codierung durch Abbildung 115: Glückskeks und Quiz (Design Majometano) Abbildung 116: Array, als Reihe von Schachteln dargestellt Abbildung 117: Array, als nummeriert Reihe von Schachteln dargestellt Abbildung 118: Array das MovieClip-Instanzen enthält Abbildung 119: Ein Element aus einem Array löschen mit splice Abbildung 120: Ein Element an ein Array anfügen mit push Abbildung 121: Schrift für ein dynamisches Textfeld einbetten Abbildung 122: Quiz: Zeitleiste mit Abschnitten init, frage, richtig, falsch, ende Abbildung 123: Kommuikation zwischen Webbrowser, Webserver und Flash Player, Webserver Abbildung 124: Darstellung von XML-Daten im Webbrowser Firefox Abbildung 125: Darstellung der XML- Struktur als Baum Abbildung 127: Gewünschtes Ergebnis: 7 mal 4 Kreuze 52 52 56 57 57 58 59 60 61 62 63 66 66 67 68 69 70 70 71 72 72 74 77 77 79 82 84 85 86 87 90 91 91 92 94 99 102 106 108 113 114 116 116 117 118 120 124 125 126 127 128 130 130 131 131 133 137 140 140 163 146 Anhänge: Index 20.4 Index 3d Abspielkopf Abstraktion mit Funktionen Actionscript auf einem Bild auf einem Button Actionscript 2 Actionscript 3 Adobe AIFF Aktionen-Fenster Aktiver Bereich Alpha verändern mit Tween Anführungszeichen für Strings animiertes Gif Argument einer Funktion Array mit MovieClips asynchron attachMovie() attributes auditiv aufrufen eine Funktion ... auskommentieren Austausch von Daten Auswahlwerkzeug Automatische Codeformatierung Bewegung mit Bewegungstween Bézierkurve Bibliothek Bild mit Actionscript Bilder importieren Bildname Bildrate Bitmap Nachzeichnen boolescher Wert Braille Bühne Button Größe mit Actionscript childNodes Code-Block CSS curveTo Darstellung mit Zwiebelschalen defekter Bewegungstween definieren eine Funktion ... Design Generatives Document Object Model Dokumentation DOM Drag and Drop Drehung verändern mit Tween droptarget dynamischen Textfeld 39 33 92 55 70 71 55 55 5 50 55 47 36 73 8 93 124 128 136 103 139 9 93 63 32 17 55 37 91 30 70 20 73 33 20 75 9 14 46 47 71 139 71 9 91 35 38 93 90 138 133 10, 138 67 40 36 84 Schrift einbetten Ebene Eigenschaften Einbetten Ende der Zeit Endlos-Schleife eval exportieren F9 false Farbe beim Zeichnen einer Linie beim Zeichnen mit lineTo und curveTo Farbeimerwerkzeug Faulheit Fehlersuche Film-Explorer Fireworks firstChild Formtween Frame Framename Frames pro Sekunde Füllung Funktion Geltungsbereich von Variablen Generatives Design Geschwindigkeit eines Bewegungstweens gotoAndPlay() Grafiken importieren Grafiksymbol Größe eines Buttons verändern mit Tween Gruppieren Hintergrundfarbe der Bühne HTML Flash einbetten Variable an Flash übergeben ImageReady include Index Initialisierung Instanz eines Symboles erzeugen mit Actionscript Instanznamen interaktiv Javascript keyPress Kommentar Konkatenation Kontur Kurve Langsamer machen leeres Schlüsselbild lineStyle lineTo Linien in Füllungen konvertieren Link load LoadVars loadMovie() 129 25 14 129 34 99 85 21 55 75 90 90 18 98 61 60 8 139 41 33 73 110 15 92 83 90 41 72 20 43 47 36 19 23 8 21 121 8 57 125 80 29 103 30 8 9 78 59, 63 81 15 91 35 34 90 90 18 66 136 69, 110 147 Anhänge: Index LoadVars Manipulation der DOM Maske moveTo MovieClip in einem Array MP3 Multimedia Name für einen Frame Objektzeichnungsmodell on (keyPress ..) on (press) on (release) on (rollOver) onEnterFrame onLoad LoadVars Original Pfad Pfadebene play() Plugin PNG press Registrierungspunkt für Pfadanimation verwenden Registrierungs-Punkt release rollOver Rollover-Bild Schaltfläche Schleife EndlosSchloss Schlüsselbild leer mit Inhalt Schneller machen Schrift einbetten skalierbar Skalieren Skript-Navigator SMIL Sound-Ereignis Sperren einer Ebene stop() stopDrag() Streaming Audio Video 136 139 26 90 43 128 50 12 73 16 78 71 71 71 110 136 28 39 40 70 22 20 71 40 29 71 71 9 46 98, 126 99 26 34 34 34 35 129 6 23 60 13 50 26 70 84 50 51 String String-Konkatenation swf-Datei erzeugen Symbol Tangente target Tastaturkürzel für die Zeitleiste für Werkzeuge Teilen testen Text teilen Textfeld Schrift einbetten Tintenfasswerkzeug Tooltipps im Aktionen-Fenster trace() Transformation-Punkt Transformationspunkt für Drehung verwenden Transparenz verändern mit Tween true Tween Probleme bei Bewegungstween Probleme bei Formtween unloadMovie() URL-Codierung Variable vektorbasiert Verhaltensweisen Verzerrung Video Streaming Vorschau für Veröffentlichung Wahrheits-Wert WAV Webbrowser Werkzeug Werkzeugleiste für Aktionen while-Schleife Wiederverwertung von Buttons Zeichenketten Zeitleiste mit Actionscript steuern Zufall Zufällig Zuweisung Zwiebelschalen 73 81 21 28 17 67 35 19 19 21 19 129 18 55 57 63, 64 29 40 36 75 38 42 69 123 79 6 55 23 51 21 75 50 22 14 55 98 48 81 33 72 124 124 80 35 148 Anhänge: Lösungen zu Kapitel 541H9 20.5 Lösungen zu Kapitel 9 Lösung zu Übung 1) (Seite 56) Woran können Sie erkennen wo der Code positioniert ist? Welches Ereignis den Code auslöst? Welcher Befehl ausgeführt wird? weiter_btn, ist eine Instanz von DummyBtn Das auslösende Ereignis: UserIn lässt den Button los Das auslösende Ereignis: UserIn lässt den Button los Der Befehl lautet: steuere ein bestimmtes Bild im MovieClip an – in Actionscript: gotoAndPlay Der Befehl lautet: steuere ein bestimmtes Bild im MovieClip an – in Actionscript: gotoAndPlay weiter_btn, ist die Instanz Lösung zu Übung 2) (Seite 61) Hier ein paar Beispiele für Namen. Welche davon sind unzulässig? Welche stehen für Symbole (in der Bibliothek), welche für Instanzen, welche für Variablen? Welche sind zwar zulässig, entsprechen aber nicht den oben beschriebenen Konventionen? ball_mc DummyBtn mc_ball Zweiter Ball MC MovieClip-Instanz Name eines ButtonSymbols anzahlBälle grünerBall_mc Leerzeichen im Namen verboten! Player_mc 8ung_txt Zahl am Anfang verboten! ball_mc_2 Variable MovieClip-Instanz. home_btn BallMC ausgabe_txt Button-Instanz Name eines MovieClip-Symbols Textfeld-Instanz 149 Anhänge: Lösungen zu Kapitel 541H9 Lösung 15) Wiederholung Flash: Was bewirken folgende Tastatur-Befehle? Strg + Z T A Mehrfach-Selektion Lupe Textwerkzeug Unterauswahl Alt-F3 Shift-F12 F11/Strg-L F8 F5 F6 Fenster Film-Explorer Veröffentlichen Fenster Bibliothek In ein Symbol verwandeln Normales Bild in Zeitleiste einfügen Schlüsselbild in Zeitleiste einfügen Strg-Enter Ganze swf-Datei Testen E mi F9 B Aktionen Fenster Pinselwerkzeug Eraser = Radiergum- Strg-B F7 (Text) teilen Leeres Schlüsselbild einfügen Übung 4) Wiederholung Flash-Basics: Was unterscheidet Form-Tween und BewegungsTween? FormTween Mit diesem Tween kann man die Farbe ändern Mit diesem Tween kann man etwas quer durchs ganze Bild bewegen Dieser Tween funktioniert nur mit Symbolen Dieser Tween funktioniert nicht mit Symbolen Mit diesem Tween kann man die Größe ändern. Mit diesem Tween kann man einen Buchstaben in einen Stern verwandeln Mit diesem Tween kann man einen Stern im Uhrzeigersinn drehen. Dieses Tween braucht weniger Speicherplatz X X X X X BewegungsTween X X X 150 Anhänge: Lösungen zu Kapitel 541H9 Lösung 5) Wiederholung Flash-Basics: Die Anzeige im Flash-Editor stellt verschiedene Arten der Selektion verschieden dar. Was ist jeweils selektiert? Original Form, Kontur und Füllung selektiert Original Form, Nur die Füllung selektiert Nicht selektiert, keine Information! Original Form, Nur die Kontur selektiert Gruppiert, Gruppe ausgewählt Lösung 6) Wiederholung Flash-Basics: Wozu muss man Text teilen? Nennen Sie zwei Gründe. Weil ich die Buchstaben in Formen verwandeln will, dann brauche ich die Schriftart nicht einzubetten. (Macht Sinn wenn ich viele verschiedene „exotische“ Buchstaben als grafische Elemente verwenden will) Weil ich die Buchstaben mit einem Form-Tween verformen will Lösung 7) Wiederholung Flash-Basics: Beschreiben Sie die folgende Zeitleiste, verwenden Sie dabei das Fachvokabular korrekt: Die oberste Ebenen enthält nur Actionscript, und zwar auf Bild 20. In der Ebene Arm1 befinden sich zwei bewegungstweens, von Bild 1 bis 10, und von Bild 10 bis 20. (Diese Bilder sind jeweils Schlüsselbilder). In der Ebene Rock befinden sich eine Reihe von Form-Tweens, die Schlüsselbilder sind auf Bild 1, 7, 10, 17 und 20. Die Ebene Körper enthält drei Schlüsselbilder bei 1, 7, 10, keine Tweens, sonst also nur normale Bilder. …. Symbol 151 Anhänge: Lösungen zu Kapitel 544H10 20.6 Lösungen zu Kapitel 10 Lösung 10) Siehe navigation-mit-loadmovie.fla Lösung 11) Was bewirkt folgende URL, wenn Sie für einen Link mit getURL() verwendet wird? javascript:w=window.open("nextpage.html", "miniwindow", "toolbar=no,menubar=no ,location=no,scrollbars=no,resizable=yes,width=550,height=400") Wenn diese URL aufgerufen wird, wird über Javascript ein neues Browserfenster geöffnet. Zwei Warnhinweise dazu: − Beim Testen in Flash passiert gar nichts; nur beim Testen im Browser kann das funktionieren! Moderne Flash-Player verhindern die Ausführung von Javascript normalerweise, die UserIn muss es erst extra erlauben. Moderne Browser verhindern das Öffnen von neuen Browser-Fenstern normalerweise (Stichwort: Popup Blocker), die UserIn muss es erst extra erlauben. − − Zusammenfassend kann man sagen: das war einmal eine schöne Möglichkeit, seit ca. 2006 aber nicht mehr verwendbar. Lösung 12) Was passiert, wenn das MovieClip display_mc durch einen Tween bewegt wird? Die geladene swf-Datei wird entsprechend bewegt. 152 Anhänge: Lösungen zu Kapitel 546H11 20.7 Lösungen zu Kapitel 11 Lösung 15) Siehe spielfigur-steuerung-und-tastatur.fla Lösung 16) Siehe brigittes-maschine.fla 153 Anhänge: Lösungen zu Kapitel 549H12 20.8 Lösungen zu Kapitel 12 Lösung 17) Siehe puzzle-mit-punkten.fla Für den roten Stein könnte der Code so aussehen: on (press) { startDrag(this); } on (release) { stopDrag(); if (eval(this._droptarget) == _parent.rotesZiel_mc) { _parent.punkte++; this._visible = false; if (_parent.punkte>=3) { _parent.gotoAndPlay("Bravo"); } } else { _parent.vorrat--; if (_parent.vorrat<=0) { _parent.gotoAndPlay("Schade"); } } } Lösung 18) Siehe preloader_prozent.fla Lösung 19) Variablen, Zuweisungen, Formeln. Was geben diese Programme aus? 1 a = 10; b = 20; c = a * b + 2; trace( c ); 3 a = "Hallo"; b = "Brigitte"; trace( a + b ); 5 b = "Brigitte"; b = "Hansi"; trace( b ); 7 a b a b = = = = 10; 20; b; a; ist jetzt " + a); ist jetzt " + b); jetzt 20 jetzt 20 2 a = 10; b = 20; c = a * ( b + 2 ); trace( c ); // 202 // 220 4 a = "Hallo"; // Hallo Brigitte b = "Brigitte"; trace( a + " " + b ); 6 a = 10; b = 20; b += 2; c = a * b; trace( c ); 8 a = 10; b = 20; c = a; a = b; b = c; trace("a trace("b // a ist // b ist // HalloBrigitte // Hansi // 220 trace("a trace("b // a ist // b ist ist jetzt " + a); ist jetzt " + b); jetzt 20 jetzt 10 Lösung 20) Formeln: Ergänze diese Programme, so dass sie Ausgabe stimmt: A a = 4; b = a * 13.7603; trace( a + " Euro sind " + b + " Schilling"); 154 Anhänge: Lösungen zu Kapitel 549H12 B a = "Hansi"; b = length( a ); trace(a + " enthält " + b + "Buchstaben); Lösung 21) Diese Programme funktionieren nicht richtig. Wo liegt der Fehler A 10 = a; b = 20; c = a * b + 2; trace(c); C a = "Hallo"; b = "Brigitte"; trace( a + " " + b ); B a = 10; b = 20; c = a * ( b + 2 ); trace(c); D b = "Hansi"; l = length( b ); trace( l ); Lösung 22) Fehlermeldungen von Flash – was ist das Problem? A Szene=Szene 1, Ebene=Ebene 1, Bild=2: Zeile 1: Die linke Seite des Zuweisungsoperators muss eine Variable oder eine Eigenschaft sein. 10 = a; Verkehrt: a=10; B Szene=Szene 1, Ebene=Ebene 1, Bild=2: Zeile 1: ;' erwartet a = 10 b = 20 Semikolon/Strichpunkt vergessen: a=10; b=20; Lösung 23) Folgende Programme geben keine Fehlermeldung – trotzdem sind sie falsch. Was ist das Problem? A a = Hallo; b = Brigitte; trace( a + " " + b ); gotoAndPlay(2000); keinobjekt._x = 100; Anführungszeichen vergessen a = "Hallo"; b = "Brigitte"; trace( a + " " + b ); gotoAndPlay(20); richtiges_mc._x = 100; B C So viele Bilder gibt’s gar nicht! Flash gibt keine Fehlermeldung Wenn ein Objekt dieses Namens nicht existiert gibt das keine Fehlermeldung! 155 Anhänge: Lösungen zu Kapitel 549H12 Lösung 24) Was geben diese Programme mit Verzweigungen aus? 1 a = 10; b = 20; if ( a > b ) { trace(a); } 2 a = 10; b = 20; if ( a < b ) { min = a; max = b; } else { min = b; max = a; } trace( min + " bis " + max ); 10 bis 20 4 a = 10; b = 20; c = 40; if ( a+b == c ) { trace(c); } Gar nix 6 max = 5; name = "Hansi"; l = length( name ); if ( l > max ) { trace("Name zu lang"); } else { trace("-----"); trace(name); trace("-----"); } ----Hansi ----8 a = 12; trace("Alter: " + a); if ( a > 18 ) { trace("ok"); } else if ( a > 10 ) { trace("mit Begleitung") } else { trace("gar nicht!") } Alter: 12 In Begleitung x = 10; max = 13; breite = 5; if ( x + breite > max ) { trace("autsch!"); x = max - breite; } else { trace("ok"); } trace("Neues x: " + x); autsch! Neues x: 8 Gar keine Ausgabe (Bedingung nicht erfüllt) 3 a = 10; b = 20; c = 30; if ( a+b == c ) { trace(c); } 30 5 max = 5; name = "Brigitte"; len = length( name ); if ( len > max ) { trace("Name zu lang"); } else { trace("-----"); trace(name); trace("-----"); } Name zu lang 7 a = 12; trace("Alter: " + a); if ( a > 18 ) { trace("ok"); } else if ( a < 18 ) { trace("gar nicht!") } else if ( a > 10 ) { trace("mit Begleitung") } (Falsche Logik!) Alter: 12 Gar nicht! 9 x = 3; max = 13; breite = 5; if ( x + breite > max ) { trace("autsch!"); x = max; } else { trace("ok"); } trace("Neues x: " + x); Ok Neues x: 3 156 Anhänge: Lösungen zu Kapitel 551H13.1 20.9 Lösungen zu Kapitel 13.1 Lösung 25) Schreiben Sie ein Programm das 10 Pixel innerhalb des Bühnenrandes einen Rahmen zeichnet. Verwenden Sie dabei die Eigenschaften width und height des StageObjekts. lineStyle(1, 0x000000, 100); moveTo(10,10); lineTo(Stage.width-10, 10); lineTo(Stage.width-10, Stage.height-10); lineTo(10,Stage.height-10); lineTo(10,10); Lösung 26) Schreiben Sie ein Programm das ein großes X quer über die Bühne malt, von Eckpunkt zu Eckpunkt. Verwenden Sie dabei die Eigenschaften width und height des Stage-Objekts. lineStyle(1, 0x000000, 100); moveTo(0,0); lineTo(Stage.width, Stage.height); moveTo(Stage.width, 0); lineTo(0, Stage.height); Lösung 27) Schreiben Sie ein Programm das mit (mehren?) curveTo–Aufrufen einen Halbkreis zeichnet. Für diese Aufgabenstellung gibt es viele ähnliche Lösungen lineStyle(0, 0x0000FF, 100); moveTo(0, 100); curveTo(0, 200, 100, 200); curveTo(200, 200, 200, 100); Lösung 28) Schreiben Sie ein Programm das den Anfangsbuchstabe Ihres Vornames mit Actionscript zeichnet. Keine Lösungen Lösung 29) Schreiben Sie ein Programm, mit dem die UserIn den Ziel- und den Kontrollpunkt einer Kurve mit drag-and-drop verschieben kann. Dazu brauchen wir ein MovieClip (für die Kurve) das wiederum drei MovieClips enthält die mit drag-and-drop verschoben werden können. Im MovieClip der Kurve befindet sich folgender Code am zweiten Bild: clear(); // löscht die vorher gezeichneten Kurven lineStyle(1, 0x000000, 100); moveTo(start_mc._x, start_mc._y); curveTo(control_mc._x, control_mc._y, end_mc._x, end_mc._y); 157 Anhänge: Lösungen zu Kapitel 557H13.2 20.10 Lösungen zu Kapitel 13.2 Lösung 30) Schreiben Sie eine Funktion, die den Anfangsbuchstabe Ihres Vornamens zeichnet. Die Position des Buchstabens auf der Bühne soll über die Funktions-Argumente gesteuert werden, ähnlich wie bei der rect-Funktion. Benutzen Sie die Funktion um den Anfangsbuchstaben 5mal auf die Bühne zu zeichnen. Zum Beispiel B: lineStyle(5, 0x0000FF, 100); zeichne_b(20,200); zeichne_b(160,380); zeichne_b(300,300); zeichne_b(200,250); zeichne_b(450,200); function zeichne_b(x, y) { moveTo(x,y); lineTo(x,y-200); curveTo(x+50, y-200, x+50,y-160); curveTo(x+50, y-120, x,y-120); curveTo(x+80, y-120, x+80,y-60); curveTo(x+80, y, x,y); lineTo(x,y); } Übung 31) Schreiben Sie eine Funktion, die einen Stern zeichnet. Die Position des Sterns auf der Bühne soll über die Funktions-Argumente gesteuert werden, ähnlich wie bei der rect-Funktion. Benutzen Sie Ihre Kreis-Funktion um 5 Sterne auf die Bühne zu zeichnen. Zum Beispiel ein 4-zackiger Blauer Stern mit drei Argumenten: x,y (Koordinaten) und r (Radius): 158 Anhänge: Lösungen zu Kapitel 557H13.2 function stern(x, y, r) { lineStyle(5, 0x0000FF, 100); moveTo(x - r, y); lineTo(x - r / 4, y - r / 4); lineTo(x, y - r); lineTo(x + r / 4, y - r / 4); lineTo(x + r, y); lineTo(x + r / 4, y + r / 4); lineTo(x, y + r); lineTo(x - r / 4, y + r / 4); lineTo(x - r, y); lineStyle(2, 0xdddd00, 100); moveTo(x - r, y); lineTo(x + r, y); moveTo(x, y - r); lineTo(x, y + r); moveTo(x - r / 4, y - r / 4); lineTo(x + r / 4, y + r / 4); moveTo(x + r / 4, y - r / 4); lineTo(x - r / 4, y + r / 4); } Übung 32) Schreiben Sie eine Funktion, die mit Hilfe von mehreren Aufrufen der curveTo Funktion ungefähr einen Kreis zeichnet. Die Position des Kreises auf der Bühne soll über die Funktions-Argumente gesteuert werden, ähnlich wie bei der rect-Funktion. Benutzen Sie Ihre Kreis-Funktion um 5 Kreise auf die Bühne zu zeichnen. function kreis(x1, y1, x2, y2) { var xm = (x2 + x1) / 2; var ym = (y2 + y1) / 2; moveTo(xm,y1); curveTo(x2, y1, x2, ym); curveTo(x2, y2, xm, y2); curveTo(x1, y2, x1, ym); curveTo(x1, y1, xm, y1); } Lösung 33) Was macht die folgende Funktion? Noch gar nichts. Wenn sie aufgerufen wird zeichnet sie ein Kreuz an die Koordinaten x,y. function kreuz(mc, x, y) { mc.moveTo(x-5, y); mc.lineTo(x+5, y); mc.moveTo(x, y-5); mc.lineTo(x, y+5); } 159 Anhänge: Lösungen zu Kapitel 563H14 Lösung 34) Was macht folgendes Programm (es verwendet die Funktion von Übung 33). Zeichnen Sie das Ergebnis. Was noch fehlt ist ein lineStyle vor dem Aufruf der Funktion kreuz(mc, 100, 10); kreuz(mc, 20, 300); kreuz(mc, 40, 40); 20.11 Lösungen zu Kapitel 14 Lösung 37) Schreiben Sie ein Programm das senkrechte Linien im Abstand von 10px über die ganze Bühne zeichnet Code auf Seite 98 Lösung 38, 39, 40) Schreiben Sie drei Programme, die folgende Bilder zeichnen: Alle drei Programme verwenden die Funktion function rect(x1, y1, x2, y2) { moveTo(x1, y1); lineTo(x2, y1); lineTo(x2, y2); lineTo(x1, y2); lineTo(x1, y1); } Erste Lösung (Gitter) rect(0, 0, 200, 200); x = 0; while (x <= 200) { moveTo(x, 0); lineTo(x,200); x = x + 10; } x = 0; while (x <= 200) { moveTo(0,x); lineTo(200,x); x = x + 10; 160 } Zweite Lösung (Diagonale) x = 0; rect(0, 0, 200, 200); while (x <= 200) { moveTo(x, 0); lineTo(200, 200 - x); x = x + 10; } Anhänge: Lösungen zu Kapitel 563H14 Dritte Lösung (konzentrische Quadrate) x = 0; while (x <= 100) { rect(100-x,100-x,100+x,100+x); x = x + 10; } Lösung 41) Schreiben Sie ein Programm das das Muster in Abbildung 102 zeichnet. xmax = Stage.width; ymax = Stage.height; lineStyle(1, 0xff00ff, 100); x = 0; while (x < xmax) { moveTo(x, 0); y = int(Math.random() * ymax); lineTo(x, y); x = x + 2; } Übung 42) Schreiben Sie ein Programm das das zufällige Linien zeichnet. i = 0; x = int(Math.random() * xmax); y = int(Math.random() * ymax); moveTo(x, y); while (i < 20) { x = int(Math.random() * xmax); y = int(Math.random() * ymax); lineTo(x, y); i++; } Lösung 37) Was macht das folgende Programm? Es zeichnet 40 senkrechte und 40 waagrechte Linien (hier sind nur 10 gezeigt) step = 10; a = 0; while (a<400) { mc.moveTo(a, 0); mc.lineTo(a, 400); a += step; } a = 0; while (a<400) { mc.moveTo(0, a); mc.lineTo(400, a); a += step; } 161 Anhänge: Lösungen zu Kapitel 563H14 Lösung 44) Was macht das folgende Programm? Viele Linien ;-) x = 0; step = int(Math.random()*40+5); while (x<400) { mc.moveTo(x, 0); mc.lineTo(400, x); x += step; } Lösung 45) Was macht das folgende Programm? Es zeichnet 8 Punkte die auf einem Kreis liegen und verbindet sie zu einem 8-Eck. Sinus und Cosinus werden verwendet um aus dem Winkel die x- und y-Koordinaten auf dem Einheitskreis auszurechnen: n = 8; r = 100; mitte_x = 200; mitte_y = 200; alpha = 0; // alpha im Bogenmass, von 0 bis 2*pi x = mitte_x + Math.cos(alpha) * r; y = mitte_y + Math.sin(alpha) * r; this.moveTo(x, y); while (alpha <= Math.PI * 2 && alpha <= max_alpha) { alpha += Math.PI * 2 / n; // trace("jetzt bei winkel "+alpha); x = mitte_x + Math.cos(alpha) * r; y = mitte_y + Math.sin(alpha) * r; this.lineTo(x, y); } Lösung 46) Was macht folgendes Programm (es verwendet die Funktion von 3). Es zeichnet 40 Kreuze die auf einer Geraden liegen. Die Gerade hat die Steigung 0,5. x = 0; while (x<=400) { y = x / 2 + 50; kreuz(mc, x, y); x += 10; } Lösung 47) Wie könnte ein Programm aussehen, das folgendes zeichnet? 162 Anhänge: Lösungen zu Kapitel 570H15 Abbildung 126: Gewünschtes Ergebnis: 7 mal 4 Kreuze Variante mit Schleife in der Schleife, rechts mit mehr Variablen um das Programm leichter zu verändern: step = 40; max_x = 7 * step; max_y = 4 * step; x = step; while (x <= max_x) { y = step; while (y <= max_y) { kreuz(mc, x, y); y += step; } x += step; } x = 40; while (x <= 7 * 40) { y = 40; while (y <= 4 * 40) { kreuz(mc, x, y); y += 40; } x += 40; } Variante mit Funktion, rechts wieder mit mehr Variablen um das Programm leichter zu verändern: var step = 40; var max_x = 7 * step; var max_y = 4 * step; function kreuzzeile(mc, y) { var x = step; while (x <= max_x) { kreuz(mc, x, y); x += step; } } var y = step; while (y <= max_y) { kreuzzeile(mc, y); y += step; } function kreuzzeile(mc, y) { var x = 40; while (x <= 7 * 40) { kreuz(mc, x, y); x += 40; } } var y = 40; while (y <= 4 * 40) { kreuzzeile(mc, y); y += 40; } 20.12 Lösungen zu Kapitel 15 Lösung 51) Programmieren Sie das Zufalls-Tapeten-Programm. x = 0; y = 0; while (x <= 500) { y = 0; while (y <= 450) { name = "tap" + x + "_" + y; attachMovie("TapeteMC", name, getNextHighestDepth()); this[name]._x = x; this[name]._y = y; b = 1 + int(4 * Math.random()); this[name].gotoAndPlay(b); y += 50; } x += 50; 163 Anhänge: Lösungen zu Kapitel 570H15 } Lösung 50) Stimmen folgende Aussagen? Richtig attachMovie("xMC", "x", 1); Falsch X fügt das MovieClip zur Ebene 1 hinzu _level1.attachMovie("xMC", "x", getNextHighestDepth()); X fügt das MovieClip zur Ebene 1 hinzu attachMovie hat gar nichts mit den Ebenen die im Flash-Editor X sichtbar sind zu tun. Übung 49) Erstellen Sie einen funkelnden Stern als MovieClip. Schreiben Sie ein Programm, das zufällig 100 von diesen Sternen auf der Bühne platziert. i = 0; while (i <= 100) { name = "stern" + i + "_mc"; attachMovie("SternMC", name, getNextHighestDepth()); this[name]._xscale = 20; this[name]._yscale = 20; this[name]._x = int(Stage.width * Math.random()); this[name]._y = int(Stage.height * Math.random()); b = 1 + int(10 * Math.random()); // zufälliger Frame im Stern, this[name].gotoAndPlay(b); // damit sie nicht gleich funkeln i++; } 164 Anhänge: Lösungen zu Kapitel 573H16 20.13 Lösungen zu Kapitel 16 Lösung 62) Was geben diese Programme mit Arrays aus? 1 a = Array(42,13,23); trace( a ); // 42,13,23 3 a = Array(42,13,23); a[1] = a[0]; b = a[0] + a[1]; trace( b ); // 84 5 a = Array(1,1); a[2] = a[0] + a[1]; a[3] = a[1] + a[2]; a[4] = a[2] + a[3]; trace( a ); 2 a = Array(42,13,23); b = a[0] + a[1]; trace( b ); // 55 4 a = Array(stern_mc, herz_mc); a[0]._x = 10; a[1]._x = a[0]; trace(a[1]._x); // 10 6 a = Array(1,1); i=2; while(i<5) { a[i] = a[i-1] + a[i-2]; i++; } trace( a ); // 1,1,2,3,5 // 1,1,2,3,5 Lösung63) Diese Programme mit Arrays sind fehlerhaft – finden Sie die Fehler! A a = array(42,13,23); trace( a ); // Array muss man gross schreiben! C a = Array(1,1); a[2] = a[0 + a[1]; a[3] = a[1] + a[2]; a[4] = a[2] + a[3]; trace( a ); // Eckige Klammer in der zweiten Zeile vergessen B a = Array(42,13,23); b = a + a[1]; trace( b ); // Ein Array kann man nicht addieren! D a = Array(1,1); i=2; while(i<5) { a[i] = a[i-1] + a[i-2]; } trace( a ); // Endlos-Schleife! i wird nicht verändert 165
Sign up to vote on this title
UsefulNot useful