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 Fachhoch-schule Salzburg

1 GRUNDLAGEN UND USP 5 1.1 USP: Vektorgrafik 6 1.2 USP: Animation 7 1.3 USP: Interaktion 8 1.4 USP: Multimedia 12 1.5 Überlegter Einsatz von Flash 13

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

3 EBENEN UND MASKEN 25 3.1 Ebenen in Flash 25 3.2 Masken in Flash 26

4 WIEDERVERWERTUNG MIT SYMBOLEN 28 4.1 Symbole 28 4.2 Die Bibliothek 30 4.3 Austausch von Daten 32

5 ZEIT UND ANIMATION 33 5.1 Die Zeitleiste 33 5.2 Bild-für-Bild Animation 35 5.3 Bewegungstween 36 5.4 Komplexe Bewegungen 39 5.5 Formtween 41

6 MOVIECLIPS – FILM IM FILM 42 6.1 Einsatz von MovieClips 45

7 BUTTONS 46 7.1 Buttons in Flash 46 7.2 Wiederverwertung 48

8 AUDIO UND VIDEO EINBINDEN 50 8.1 Audiodatei einbetten 50 8.2 Video Streaming 51 8.3 FLV-Video abspielen 52

9 ACTIONSCRIPT 54 9.1 Entwicklungsumgebung 55 9.2 Hilfe 58 9.3 Wo ist der Code? 59 9.4 Namen 60 9.5 Hilfsmittel für die Fehlersuche 61 9.6 Fragen und Übungsaufgaben 64

10 OHNE ZU PROGRAMMIEREN 66

10.1 Navigation 66 10.2 Drag and Drop 67 10.3 Andere Flash-Filme laden 68 10.4 Fragen und Übungsbeispiele 69

11 STEUERUNG VON ZEITLEISTEN 70 11.1 Stop und Play 70 11.2 Film mit alternativem Ende 71 11.3 Objekte, Methoden, Eigenschaften 74 11.4 Spielfigur steuern 76 11.5 Weitere Übungsbeispiele 78

12 VARIABLEN UND VERZWEIGUNGEN 79 12.1 Variablen 79 12.2 Verzweigungen 83 12.3 Puzzle mit Erfolgskontrolle 84 12.4 Preloader 86 12.5 Fragen und Übungsaufgaben 87

13 ZEICHNEN, FARBEN UND FUNKTIONEN 90 13.1 Zeichnen mit Actionscript 90 13.2 Funktionen 92 13.3 Farbe auf ein MovieClip

übertragen 94 13.4 Extra –für Actionscript-Profis: 97

14 MEHR ZEICHNEN MIT SCHLEIFEN 98 14.1 Ein Muster aus Linien Zeichnen 98 14.2 Übungsaufgaben 101

15 MOVIECLIPS ERZEUGEN 104 15.1 Beispiel „Tapete“ 104 15.2 Instanzen dynamisch erzeugen 104 15.3 Lösungsansatz 106 15.4 Objekte mit variablem Namen 106 15.5 Verschachtelte Schleife 108 15.6 Für Profis: 2d ohne

Verschachtelung 109 15.7 Übungsaufgaben 110

16 ONENTERFRAME UND HITTEST 112 16.1 Zeichnung neu aufbauen 114 16.2 Uhr 114 16.3 Bühne und Maus 115 16.4 Ball im Spielfeld 115 16.5 Ball und Hittest 118 16.6 Viele Projekte 119

17 AUDIO UND VIDEO ASYNCHRON 120 17.1 Audio streamen 120 17.2 Variablen für Flash in HTML

setzen 123 17.3 Video steuern 124

Inhaltsverzeichnis

18 ARRAYS 126 18.1 Beispiele: Glückskeks + Quiz 126 18.2 Arrays 127 18.3 Lösungsansatz Glückskeks 131 18.4 Übungen 132 18.5 Lösungsansatz Quiz 132 18.6 Übungsaufgaben 136

19 VOM SERVER LADEN 137 19.1 Einfache Daten laden 138 19.2 XML für Slideshow 139

20 AUSBLICK 142

ANHÄNGE 144

20.1 Literatur 144 20.2 Online-Quellen 144 20.3 Abbildungsverzeichnis 145 20.4 Index 147 20.5 Lösungen zu Kapitel 9 149 20.6 Lösungen zu Kapitel 10 152 20.7 Lösungen zu Kapitel 11 153 20.8 Lösungen zu Kapitel 12 154 20.9 Lösungen zu Kapitel 13.1 157 20.10 Lösungen zu Kapitel 13.2 158 20.11 Lösungen zu Kapitel 14 160 20.12 Lösungen zu Kapitel 15 163 20.13 Lösungen zu Kapitel 16 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 Hin-terfragen.

Dieses Skriptum setzt die professionelle Anwendung der Betriebssysteme Windows bzw. MacOS, Er-fahrung in der Erstellung von Webseiten mit HTML und CSS, und Erfahrung im Umgang mit Grafik-Programmen 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

5

Was ist Flash, was kann Flash, für welche Aufga-benstellungen 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 *.swf1 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 Flash-Applikationen erstellt werden.

2. Die mit diesem Programm erzeugten Da-teien, erkennbar am Symbol oder an der En-dung *.fla. Diese Dateien sind das Basisma-terial und dienen der weiteren Bearbeitung.

3. Die mit diesem Programm erzeugten Endprodukt-Dateien, man erkennt Sie am Symbol oder an der Endung *.swf. Diese Da-teien 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 er-möglichen.

5. Die gesamte Technologie, also die Gesamtheit der Punkte 1 bis 4.

1 Auf Englisch manchmal als „swiff“ ausgesprochen

1 Grundlagen und USP

A K T U E L L E V E R S I O N :

Grundlagen und USP:

6

Als Web-Technologie steht Flash in Konkurrenz zu HTML und Javascript, den im Web verwendeten Bild-formaten gif, jpg, png und dem Vektorgrafikformat SVG. In diesem Kapitel werden die wichtigsten Fä-higkeiten von Flash beschrieben, und jeweils die al-ternativen Technologien vorgestellt und diskutiert.

1.1 USP: Vektorgrafik

Flash war und ist das am weitesten verbreitete vek-torbasierte Bild-Format im Web. Ein Flash-Movie, das nur Vektor-Grafiken (keine importierten Bitmaps, Audio- oder Video-Daten) enthält, ist von der Daten-menge her sehr klein. Vektorgrafik heißt auch, dass die in Flash gezeichneten Bilder skalierbar sind – also in verschiedenen Größen ohne Qualitätsverlust ver-wendbar ist.

Abbildung 1: Beispiel Flash-Movies: Stern als Standbild, Stern als einfach Animation

Ein Beispiel zur Veranschaulichung der geringen Da-tenmengen 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 Animation

Bild-Grösse Gif Jpg Flash (swf) Flash (swf)

200 x 200 Pixel 1.729 Byte 3.830 Byte 138 Byte 410 Byte

600 x 600 Pixel 5.466 Byte 15.780 Byte 138 Byte 410 Byte

Abbildung 2: Dateigrößen der Flash-Movies in Abbildung 1 im Vergleich zu gif und jpg

V E K T O R B A S I E R T

USP: Animation

7

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 Ska-lierung ohne Qualitätsverlust. Sie zeigt ein Flash-Movie 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.

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

A L T E R N A T I V E SVG

Grundlagen und USP:

8

Gifs, so wie sie im Programm „Animation Shop“ darge-stellt werden.

Abbildung 4: (historisches2) Beispiel für eine „Bild-für-Bild“-Animation

Um aus einzelnen Bildern ein animiertes Gif zusam-men zu stellen, können Sie verschiedene Grafikpro-gramme verwenden, u.a. Animation Shop, Macrome-dia 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 Flash-Animationen. Aber: Sie haben meist eine größere Da-teigröß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 an-dere Art aktivieren) um zu navigieren, sie kann For-mulare ausfüllen und einsenden. Links sind von An-fang an, Webformulare seit HTML Version 2.0 (1995)

Teil des HTML-Standards.

Als „interaktive Webseite“ bezeichnen wir im Fol-genden 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 Ani-mation war das erste Beispiel. Beide Technologien werden übrigens von aktuellen Browser-Versionen nicht mehr unterstützt, sie wur-den von animierten gifs verdrängt.

M E H R A L S L I N K S U N D F O R M U L A R E

USP: Interaktion

9

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 Web-server 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 text-basierten, 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 Technologi-en haben eine wechselhafte Geschichte hinter sich. Javascript wurde ursprünglich von der Firma Netsca-pe erfunden und dann von anderen Browserherstel-lern ü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 auszu-messen gibt es mehrere Varianten:

funktioniert in Netscape und Mozilla x = window.innerWidth;

funktioniert in Internet Explorer x = document.body.clientWidth;

Im Gegensatz zu HTML, wo kleine Unterschiede in der Interpretation durch die Browser zu kleinen Dar-stellungsunterschieden führen (ein Bild wird einen Millimeter weiter links oder weiter rechts dargestellt, ein Link ist unterstrichen oder nicht,…), führen Un-terschiede 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

Z U G Ä N G L I C H K E I T = A C C E S S A B I L I T Y

A L T E R N A T I V E DHTML

Grundlagen und USP:

10

Abbildung 6: Javascript Fehlermeldungen

Um diese Probleme zu beheben wurde Javascript auf zwei Arten Standardisiert. Die Syntax, also die all-gemeine Schreibweise der Sprache, wurde als EC-MASkript3 von der „European Computer Manufactu-rers 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.

<html> <head> <title>WWW und Multimedia</title> </head> <body> <h1>Bestell-Formular</h1> <div id="vorne"> <img id="picvorne" src="nix.gif" alt="tshirt" width="250" height="250" /> </div> <div id="hinten"> <img id="pichinten" src="nix.gif" alt="tshirt" width="250" height="250" /> </div> </body> </html>

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 quirksmo-de.org von Peter-Paul. Auf jeden Fall ist die Situati-on durch die Einführung des DOM besser geworden, wenn die Veränderung auch sehr, sehr langsam ge-schah. Es reicht ja nicht, wenn ein Browser-Hersteller den neuen Standard umsetzt. Es reicht auch nicht, wenn die neueste Versionen der Browser den Stan-dard unterstützen. Erst wenn genug von den „alten

3 http://www.ecma-international.org/publications/standards/Ecma-262.htm

USP: Interaktion

11

Versionen“ ausgetauscht wurden, wenn wirklich ge-nug 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 Nach-laden von Daten ermöglicht, konnte so eine neue Qua-lität von Interaktion erreicht werden. Ein Beispiel für diese Art von Interaktivität ist das in Abbildung 8 gezeigt Autocomplete-Eingabefeld.

Abbildung 8: Autocomplete Eingabefeld mit script.aculo.us

In diesem Beispiel hat die Leserin erst einen Buchsta-ben in das Eingabefeld eingetippt: „a“. Diese Eingabe wurde über das XMLHTTRequestObject an ein server-seitiges Skript gesandt, dass eine Datenbankabfrage durchführt. Das serverseitige Skript liefert als Output ein kleines HTML-Fragment mit einer Liste von Na-men:

<ul> <li>ameier</li> <li>amüller</li> <li>ahuber</li> <li>achovski-grauhuber</li> </ul>

Dieses HTML-Fragment wird vom Javascript-Programm im Client mittels DOM in die Webseite eingefügt. Durch ein Stylesheet erscheint die HTML-Liste 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

AJAX

Grundlagen und USP:

12

Server zum ersten Mal die Abkürzung AJAX4. Seither entstanden viele Webseiten die diese Technologie-Kombination nützen, und eine Reihe von Program-mierhilfe, die die Entwicklung unterstützen.

AJAX hat Flash an einigen Stellen wieder verdrängt.

Flash hat im Vergleich zu AJAX weniger Kompatibili-tä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 zwi-schen proprietärer Technologie und Stabilität auf der einen Seite, und einer standardisierten, aber instabi-leren 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 Video-Datei kann diese Datei zum Download und zum Ab-spielen angeboten werden. Das funktioniert meist sehr gut, es gibt dabei kaum etwas zu gestalten.

Mit den HTML-Tags <EMBED> oder <OBJECT>, 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 Dar-stellung 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.php

V E R G L E I C H F L A S H A J A X

Überlegter Einsatz von Flash

13

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 Inter-aktion zu gestalten. Die Möglichkeiten der Synchroni-sation sind zwar beschränkt, aber im Vergleich zu den anderen besprochenen Methoden noch immer am Be-sten.

1.5 Überlegter Einsatz von Flash

Die bisher angeführten USPs von Flash sollten Sie nicht falsch verstehen. Flash ist für gewisse Aufga-benstellungen 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 An-spruch an Barrierefreiheit. Alle Flash-Seiten haben das Problem, dass Sie in Suchmaschinen nicht gefun-den 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 Flash-Version und eine Flash-lose Version einer Website zu entwickeln. Aber Achtung: dieser Ansatz bedeutet die doppelte Arbeit in der Entwicklung, und wieder dop-pelte 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.

Abbildung 9: FLVPlayback Komponente

Flash GUI und Zeichnen:

14

Flash funktioniert weder wie ein klassisches bit-map-orientiertes Grafikprogramm, noch wie ein klassisches vektor-orientiertes Grafikprogramm. Flash zu lernen, heißt also ein neues Zeichen-Modell zu lernen.

2.1 Überblick über die Flash-GUI

Abbildung 10: Die Teile der Flash GUI

Die Bühne ist Ihr erster Orientierungspunkt. Auf der Bühne zeichnen Sie. Anders als in anderen Program-men 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 Anima-tion, 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 Eigen-schaften des jeweils auf der Bühne markierten Ob-jekts verändern. Das Eigenschafts-Fenster funktio-niert also wie im Programm Dreamweaver. Je nach-dem welches Objekt markiert ist, sieht das Eigen-schafts-Fenster auch unterschiedlich aus.

2 Flash GUI und Zeichnen

Werkzeuge

Eigentschaften

Ebenen undZeitleiste

Bühne

Hinterbühne

DiverseFenster

B Ü H N E + H I N T E R B Ü H N E

W E R K Z E U G E

E I G E N S C H A F T E N

Zeichnen mit Flash

15

Am rechten Rand des Programms können verschiede-ne Fenster eingeblendet werden. Über das Menü „Fenster“ können Sie Fenster einblenden und aus-blenden. Wenn Sie eine gute Zusammenstellung von Fenstern gefunden haben, können Sie diese Zusam-menstellung mit dem Menüpunkt FENSTER

BEDIENFELDSATZ SPEICHERN unter einem Namen abspei-chern.

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 Applika-tionen.

Die Menüs von Flash entsprechen den üblichen Kon-ventionen. Besonderes Augenmerk sollten Sie dem Menü MODIFIZIEREN schenken. Im Zweifelsfall finden Sie hier alles was Sie brauchen und nicht finden kön-nen.

2.2 Zeichnen mit Flash

Kommen wir nun zur Vorstellung des speziellen Zei-chen-Modells von Flash. Für eine detailliertere Be-schreibung 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 die-ser aus einer Füllung und einer Kontur. Diese beiden Elemente haben unterschiedliche Aufgaben. Sie müs-sen mit beiden gezielt arbeiten können. Abbildung 11 zeigt wie Flash es darstellt, wenn die Füllung mar-kiert ist, bzw. wenn die Kontur markiert ist.

F E N S T E R

E B E N E N + Z E I T L E I S T E

M E N Ü S

F Ü L L U N G V S . K O N T U R


16

Abbildung 11: Füllung markiert vs. Kontur markiert

Beim Erstellen des Kreises passen Füllung und Kon-tur ineinander. Im Verlauf der weiteren Arbeit können Sie beide trennen. Dabei werden Sie bemerken, dass Flash sich nicht wie andere vektororientierte Pro-gramme 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

Dieses Verhalten von Flash können Sie gezielt für die Gestaltung einsetzen. Wenn Sie dieses Zeichnungsmo-dell nicht verwenden wollen, können Sie auf das Ob-jektzeichnungsmodell umschalten. Dann wird beim Zeichnen z.B. eines Kreises die Füllung und die Kon-tur 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 Objektzeich-nungsmodell gezeichnet

O B J E K T Z E I C H N U N G ( J )

Zeichnen mit Flash

17

Mit dem Auswahlwerkzeug (Tastaturkürzel: V) kön-nen Sie die Kontur verformen wie in Abbildung 14 gezeigt.

Abbildung 14: Kontur verformen mit dem Auswahl-Werkzeug

Wenn eine Kontur markiert ist, und das Auswahl-werkzeug ausgewählt ist, dann werden am unteren Rand des Werkzeug-Fensters die Symbole für „glät-ten“ und „begradigen“ aktiv, mit dem Sie die Kontur schrittweise verformen können.

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 Pro-gramm. Die Kontur ist durch Ankerpunkte und Tan-genten definiert, sie können die Ankerpunkte ver-schieben, und die Tangenten verändern wie in Abbildung 16 gezeigt.

Abbildung 16: Kontur mit Ankerpunkten und Tangenten bear-beiten

K O N T U R B E A R B E I T E N

K O N T U R G L Ä T T E N / B E G R A D I G E N

K O N T U R V E K T O R B A S I E R T B E A R B E I T E N


18

Die Unterscheidung zwischen Kontur und Füllung zieht sich durch die gesamte Werkzeugleiste: Es gibt ein Werkzeug um eine Kontur zu Zeichnen (das Frei-handwerkzeug, Tastaturkürzel Y) und eines um eine Füllung zu zeichnen (das Pinselwerkzeug, Tastatur-kürzel B)

Mit dem Tintenfaßwerkzeug (Tastaturkürzel S) kön-nen 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

Es gibt auch eine Möglichkeit eine Kontur (insbeson-dere eine Kontur mit hoher Strichstärke) in eine Fül-lung 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 ent-stand. Einmal wird die Linie verbogen, einmal wird die Begrenzung der Fläche verformt.

L I N I E N I N F Ü L L U N G E N

U M R E C H N E N

Gruppieren und Teilen

19

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 druck-empfindliches 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.

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öglich-keit 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 Verwen-dung: Sie können damit Texte teilen, wie in Abbildung 19 gezeigt.

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

H I L F E

E I N G A B E G E R Ä T E

G R U P P I E R E N STRG-G

T E I L E N ST R G-B


20

zu sein: in Füllungen verwandelt. Danach können Sie die üblichen Werkzeuge verwenden um die Füllung zu verformen.

2.4 Grafiken und Bilder importieren

Sie können Grafiken die Sie in einem anderen Grafik-programm 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 um-gewandelt werden, dieser Prozess wird als „Nach-zeichnen“ 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 swf-Datei 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.

Wenn Sie png-Dateien importieren können bleibt der Alpha-Kanal auch in Flash aktiv.

V E K T O R G R A F I K

P N G

Flash-Film testen und exportieren

21

2.5 Flash-Film testen und exportieren

Wie auf Seite 5 erwähnt, generiert Flash zwei ver-schiedene Dateien: fla-Dateien für die weitere Bear-beitung, und swf-Dateien als Endprodukt. Wenn Sie eine Datei speichern erzeugen Sie damit eine fla-Datei.

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 Vor-schau (Export des Films).

Abbildung 21: Film wird exportiert, GUI für den Wechsel zu-rück zum Editor

Bei dieser Art der Vorschau wird die Applikation di-rekt 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 bearbei-ten.

Achtung: in der HTML-Datei befinden sich die HTML-Tags <object>, <param> und <embed>, mit deren Hilfe die swf-Datei eingebunden wird. (Analog zum <img>–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 wer-den!

Betrachten wir die Kommunikation zwischen Client und Server im Web genauer:

STRG-ENTER


22

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 <object> Tag enthalten ist der auf eine swf-Datei verweist dann stellt der Webbrowser eine weite-re 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 swf-Datei und stellt diese dar.

1.6.2 Flash und HTML

Abbildung 23 zeigt die Bearbeitung des für HTML-Codes für die Flash-Einbindung in Dreamweaver.

Abbildung 23 Bearbeitung des eingebundenen Flash-Films in Dreamweaver

Swf Object statt HTML

23

Eine Größenveränderung des Flash-Films, ist durch die Angabe von width- und height-Attributen im Co-de, oder durch Eingabe von Werten in die Felder B und H am Eigenschaftsfenster von Dreamweaver mög-lich. 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 wieder-

holt werden soll − Wie der Film auf Verzerrungen bei einer

Skalierung reagiert (siehe Abbildung 24)

Abbildung 24: Skalierung des Flashfilms bei der Einbindung in die Webseite

Normalerweise (SKALIEREN: STANDARD) wird der Flash-Film 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.

G R Ö S S E


24

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 er-setzt 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 an-gegeben 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 Publi-kation festlegen: swf und html sind die Standard-Formate.

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 Ziel-Computer kein Flash-Player installiert ist. Der Export als Quicktime ist nur möglich wenn die entsprechen-den Quicktime-Komponenten auf dem Computer mit der Authoring-Umgebung installiert sind.

<script type="text/javascript" src="swfobject.js"></script> <div id="flashcontent"> Hier würde ein kleiner Animations-Film angezeigt werden – wenn Ihr Browser Flash anzeigen könnte. </div> <script type="text/javascript"> var so = new SWFObject("movie.swf", "flashcontent", "200", "100", "7", "#336699"); so.write("flashcontent"); </script>

Ebenen in Flash

25

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 Auswir-kung auf das Endprodukt: im fertigen Flash-Film sind alle Ebenen sichtbar.

Abbildung 25: Ebenen

3 Ebenen und Masken

Ebenen im Editorausblenden

Ebenen im Editor sperren

Ebenen im Editor nur als Kontur darstellen

Diese Ebenen wird derzeit bearbeitet

Ausgewählte Ebene(n) löschen Ebene einfügen

Pfad-Ebene einfü-gen

Ebenen-Ordner ein-fügen

Jede Ebene hat einen Namen

Jede Ebene kann einzeln ausgeblendet, gesperrt oder als Kontur dargestellt wer-

den

Ebenen und Masken:

26

Für die Arbeit an größeren Projekten sind Ebenen-Namen und Ebenen-Ordner wichtige Ordnungs-Werkzeuge. 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.

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 zuge-ordnet, 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 Ebe-nen der Maske untergeordnet sind und welche nicht könne Sie mit „Drag-and-Drop“ bestimmen: Ziehen Sie

O R D N U N G

E N T W I C K L U N G

Masken in Flash

27

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.

Wiederverwertung mit Symbolen:

28

Ein wichtiges Ziel beim Erstellen eines Flash-Films 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 Da-teigröße der swf-Datei bei. Abbildung 28 zeigt ein Bei-spiel für einen Flash-Film der 18 sehr ähnliche Origi-nale 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 54 Sterne

Mit Formen 108 Byte 1.148 Byte 3.440 Byte

Mit Symbolen 133 Byte 347 Byte 654 Byte

Abbildung 29: Größe von swf-Dateien im Vergleich bei Ver-wendung von Formen oder Symbolen5

5 Konkret: bei Verwendung von MovieClip-Symbolen. Im Anhang finden Sie auch die Daten für Grafik-Symbole und Schaltflächen-Symbole

4 Wiederverwertung mit Symbolen

Abbildung 28: Beispiel für einen Film mit wiederholten Elementen

Symbole

29

Um ein Original in ein Symbol zu verwandeln ver-wenden 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 spe-zielle Verwendung von Schaltflächen und MovieClips kennenlernen, Grafik-Symbole sind für die reine Wie-derverwertung von Formen gedacht. Abbildung 28 zeigt das entsprechende Fenster.

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 Sym-bols wird als kleines Plus angezeigt (meist mit einem Kreis darum, dem „Transformation-Punkt“). Siehe Abbildung 31.

Abbildung 31: Original und Instanz eines Symbol, beide aus-gewä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 un-terscheiden: 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.

E R Z E U G E N E I N E S S Y M B O L S

I N S T A N Z E N


30

Verwenden Sie zum Verändern einer Instanz das Werkzeug „Frei transformieren“ (Tastaturkürzel Q) und das Eigenschafts-Fenster.

Die einzelnen Instanzen können einen Namen erhal-ten. Dies geschieht im Eigenschafts-Fenster, wie links in Abbildung 32 gezeigt. Rechts in der Abbildung 32 sehen Sie einen Ausschnitt aus dem Fenster FILM-

EXPLORER. Hier sieht man, daß sich auf der Bühne vier Instanzen der Symbols Smilie befinden, die vier In-stanzen haben verschiedene Namen: maria_mc, han-si_mc, peter_mc und susi_mc.

Abbildung 32: Symbolnamen und Instanznamen in den Eigen-schaften 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.

Abbildung 33: Das Bibliotheks-Fenster

I N S T A N Z N A M E N

Options-Menü der Bibliothek

Die Bibliothek

31

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 Biblio-thek 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 bear-beiten, erkennen Sie an der Bearbeitungsleiste ober-halb der Ebenen:

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 Bear-beitung 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

S Y M B O L B E A R B E I T E N


32

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.

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 automa-tisch 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.

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 Symbol-Namen und die Symbol-Hierarchie kommt die gleiche Bedeutung zu wie der Vereinbarung über Dateinamen und Ordner in einem HTML-Projekt.

Abbildung 37: Dialog zum Bibliothekskonflikt – Symbol mit gleichem Namen wird eingefügt

Bibliothek vonplayers.fla

Bühne von smilie.fla

Bibliothek auswählen

Die Zeitleiste

33

Die Zeitleiste und die verschiedenen Animations-arten, die hier für Flash dargestellt werden, fin-den Sie auch in anderen Schnitt- und Animations-Programmen wie Aftereffects, Maya, FinalCut ähnlich wieder.

Flash unterteilt die Zeit in einzelne Bilder (auf Eng-lisch: 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 Animatio-nen 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 Flash-Dokument, 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 numme-riert, 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 Abspiel-kopf durch einen Klick auf ein bestimmtes Bild setzen, die Bühne zeigt dann den Zustand zu diesem Zeit-punkt, in diesem Bild an.

5 Zeit und Animation

A B S P I E L K O P F

Zeit und Animation:

34

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üssel-bild ist, wird hier ein weißes Rechteck dargestellt (an-gezeigt 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 In-halt verschwindet also. Danach gibt es keine Verände-rung mehr bis zum Ende des Films bei Bild 10.

Wenn Sie nun wissen wollen, welche Inhalte jeweils dargestellt werden, müssen Sie den Abspielkopf ent-sprechend 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 Ebe-ne 3 ist noch sichtbar.

S C H L Ü S S E L B I L D

Abbildung 39: Beispiele für Schlüsselbilder, leere Schlüsselbilder und normale Bilder

Abbildung 40: Das Ende der Zeit – in zwei Ebenen der Zeitleiste

Bild-für-Bild Animation

35

Mit der Zeitleiste können Sie auf verschiedene Arten arbeiten:

− Rechte Maustaste KONTEXTMENÜ

− Menü EINFÜGEN ZEITLEISTE

(SCHLÜSSEL)BILD

− 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

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 Arbeitsauf-wand 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.

Z E I T L E I S T E U N D G E S C H W I N D I G K E I T

Zeit und Animation:

36

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ön-nen 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 „In-betweener“. 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 Ver-zerrung eines Symbols eingesetzt werden.

Aktivieren der Darstellung

Bewegungstween

37

Abbildung 44 zeigt einen Bewegungstween, der wirk-lich für Bewegung eingesetzt wird. Auf der Abbildung sind die drei Positionen des Symbols gleichzeitig ange-zeigt: 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üssel-bildern kann dann auf zwei Arten ein Tween erstellt werden, wie in Abbildung 45: Entweder durch Rechts-Klick 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 er-kennen, wie in Abbildung 46 gezeigt.

Zeit und Animation:

38

Abbildung 46: Darstellung von korrektem und defektem Tween

Gründe, warum die Erstellung des Tweens fehlschla-gen 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 Transpa-renz), 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

Komplexe Bewegungen

39

Da in Abbildung 47 das Symbol dunkler wird, an Grö-ße zunimmt, und sich im Sichtfeld nach unten bewegt, entsteht der Eindruck einer perspektivischen Bewe-gung, der rote Kreis scheint näher zu kommen. Da Flash nicht wirklich dreidimensional modelliert, muß man die Tricks der Darstellung von 3d in 2d anwen-den.

Dazu gehört auch der Einsatz von verschiedenen „Ka-meraperspektiven“. 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 Ka-mera nachbauen, es gibt in Flash kein Kamera-Objekt.

5.4 Komplexe Bewegungen

Wenn Sie eine Folge von Schlüsselbildern erstellen, und dazwischen jeweils Bewegungstweens, dann er-halten 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ül-lung und kein Symbol, diese Kontur ist dann der Pfad. Das Symbol im Start-Schlüsselbild und End-Schlüsselbild müssen mit dem Pfad verbunden wer-den, wie in Abbildung 49 gezeigt.

P E R S P E K T I V E

K A M E R A

Zeit und Animation:

40

Abbildung 49: Das Symbol wird am Pfad angebracht

Das Symbol mit der Maus an seinem Registrierungs-punkt nehmen, und zum Pfad ziehen. Der Registrie-rungspunkt springt automatisch auf den Pfad, man kann dann das Symbol nur noch entlang des Pfades bewegen.

Mit einem Bewegungstween können Sie ein Symbol auch drehen. Verwenden sie das Werkzeug „frei trans-formieren“ um den „Transformationspunkt“ (ein klei-ner Kreis) zu positionieren. Er befindet sich über dem Registrierungspunkt des Symbols, wenn er noch nicht verschoben wurde. In Abbildung 50 wurde der Trans-formierungspunkt ausserhalb des Symbols positio-niert. Im Eigenschaftsfenster können Sie die Drehung genau spezifizieren, falls die automatische Einstellung nicht funktioniert.

Abbildung 50: Werkzeuge, Bühne, Eigenschaften eines Bewe-

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.

D R E H U N G

G E S C H W I N D I G K E I T

Formtween

41

Abbildung 51: Zwischen-Schlüsselbider zur Steuerung der Geschwindigkeit in einem Bewegungstween

Die Animationsmöglichkeiten in Flash mit Bewe-gungstweens 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 Formt-weens fehlschlagen könnten sind:

- Nicht nur Füllung, sondern auch Kontur auf der Ebene

- Nicht Füllung (Original!) sondern Symbol auf der Ebene

Sie sollten den Formtween nur in seltenen Fällen ver-wenden, meist ist ein Bewegnungstween effizienter.

E R F O L G S K R I T E R I E N F Ü R D E N

F O R M T W E E N

MovieClips – Film im Film:

42

MovieClips sind wichtig um das Flash-Projekt zu

strukturieren.

Ein MovieClip ist ein Symbol mit einer eigenen Zeit-leiste, also ein kleiner „Film-im-Film“. In der Biblio-thek wird neben dem Vorschaubild des MovieClips ein Play-Button dargestellt, mit dem man diesen Film ablaufen lassen kann.

Es ist üblich6 den MovieClips in der Bibliothek einen Namen zu geben, der auf MC endet, im Beispiel in Abbildung 53 sind das AlgeMC, FischMC und Okto-

pusMC.

Sie können ein Grafiksymbol im nachhinein in ein MovieClip umwandeln, mittels eines Rechts-Klicks auf die Zeile des Symbols in der Bibliothek.

6 Um genau zu sein: es ist üblich eine Namens-Konvention zu ver-wenden. Wie die Konvention aussieht ist von Team zu Team ver-schieden. Wichtig ist, dass alle Leute in einem Projekt sich daran halten.

6 MovieClips – Film im Film

A B B I L D U N G 53 : E I N M O V I E C L I P I N

D E R B I B L I O T H E K

Formtween

43

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 Bei-spiel 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 Bil-dern bewegt sich der Fisch 500 Pixel weit.

Abbildung 54: Bewegung der MovieClip Instanz auf der Haupt-bü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 Haupt-zeitleiste werden die 12 Bilder des MovieClips 60 / 12 = fünf mal wiederholt. Abbildung 56 versucht das dar-zustellen.

MovieClips – Film im Film:

44

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 ge-nau 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.

Einsatz von MovieClips

45

6.1 Einsatz von MovieClips

MovieClips sind die wichtigste Strukturierungs-Einheit von Flash. Wenn man die MovieClips richtig wählt, kann man sie vielseitig einsetzen. Damit sind Änderungen im Konzept auch nach Beginn der Um-setzung 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 Mo-vieClip (nicht zwei oder drei)

− Bewegung eines Objekts unabhängig machen von Veränderung eines Objekts: die „innere“ Zeitleiste des MovieClips wird für innere Be-wegungen verwendet wie blinzeln, mit den Flossen schlagen, Beine bewegen. Die „äusse-re“ Zeitleiste wird für die Bewegung quer über die Bühne verwendet.

Abbildung 57: Bild-für-Bild Animation wird zu einem MovieClip

Buttons:

46

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, Alternati-ven auswählen.

Die korrekte Übersetzung des englischen Begriffes „Button“ wäre „Schaltfläche“. Dieser Begriff ent-spricht zwar der DIN-Norm, ist aber nicht sehr ge-brä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.

7 Buttons

Buttons in Flash

47

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 er-stellen, wie einen Button der die gesamte Bühne über-deckt. Schwierigkeiten macht das nur, wenn mehrere Buttons den gleichen Raum auf der Bühne beanspru-chen. Es kann immer nur ein Button „die Maus be-merken“, wie in Abbildung 60 gezeigt.

Abbildung 60: Drei Buttons mit Überlappung, nur eine ist je-weils aktiv

Im mittleren Bild ist die Maus an einer Position an der sich der runde und der quadratische Button über-lappen. 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 Schatzki-ste also nur, wenn man auf das Schloss klickt.

G R Ö ß E

A K T I V E R B E R E I C H

Buttons:

48

Abbildung 61: Aktiver Bereich eines Buttons, der sich vom sichtbaren Bereich unterscheidet

7.2 Wiederverwertung

Auch beim Erstellen von Buttons sollten Sie an Wie-derverwertung denken: Um eine Navigationsleiste zu erstellen wie in Abbildung 62 gezeigt, brauchen Sie nur einen einzigen Button, von dem mehrere In-stanzen verwendet werden. Die Beschriftung ist nicht Teil des Buttons, sondern wird mit separaten Textfel-dern realisiert.

Abbildung 62: Wiederverwendung eines Buttons mit verschie-denen 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 lin-ken 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

Wiederverwertung

49

Buttons und Textfelder des Flash-Films. In der rech-ten Hälft der Abbildung sehen Sie einerseits den gan-zen Film im Flash Player, und als kleinen Ausschnitt darüber gelegt einen Teil der Bühne aus dem Flash-Editor.

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 Textfel-des auf der Bühne. Was für die UserIn also wie vier Schalter mit Beschriftung aussieht besteht aus vier-mal demselben Button und vier verschiedenen Be-schriftungen. Der Buchstabe A gehörte auch nicht wirklich zu a_btn, sondern befindet sich auch in ei-nem separaten Textfeld.

Audio und Video einbinden:

50

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 Audio-Dateiformaten:

• 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 Sound-Ereignis muss, bevor es abgespielt werden kann, erst vollständig geladen sein.

Entweder zieht man die Sounddatei direkt in die Bi-bliothek 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 Play-Buttons kann man sich noch einmal vergewissern, ob die Sounddatei wirklich abgespielt werden kann.

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

8 Audio und Video einbinden

A U D I O I M P O R T I E R E N

Abbildung 63: Importierte Sounddatei in der Bibliothek

Video Streaming

51

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 Klingel-ton.

Im Eigenschaften-Fenster können Sie die Details ein-stellen: Hier können Sie einen andern Sound auswäh-len, den Sound wiederholen lassen oder in Endlos-schleife laufen lassen. Sie können sogar sehr einfache Bearbeitung wie Lautstärkenveränderungen vorneh-men.

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 „Au-dio-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 ge-streamed 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 einzu-betten.

Video Streaming funktioniert mit Dateien im flv-Format. Dabei wird also die swf-Datei und die flv-Datei auf den Webserver geladen, die swf-Datei wie üblich in die Webseite eingebaut. Das Laden und Ab-spielen der flv-Datei erledigt dann Flash.

Der erste Schritt ist also immer die Erzeugung der flv-Datei. Manche Programme (besonders aus dem Hause Adobe) können flv bereits exportieren. Falls die Datei

Abbildung 65: Eigenschaften einer Audio-Datei auf der Bühne

Abbildung 66: Einstellungen für Veröffentli-chungen: Audio-Qualität

Audio und Video einbinden:

52

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 flv-Komponente. Wenn man diese (ähnlich wie ein Sym-bol) auf die Bühne zieht, dann hat die Instanz auf der Bühne nicht nur Eigenschaften sondern auch Parame-ter:

Abbildung 67: Eigenschaften und Parameter eine Komponen-ten-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 ein-fach und schnell erledigt.

FLV-Video abspielen

53

Actionscript:

54

9 Actionscript

Beispiel 1) Link zu einer anderen Webseite. 66Beispiel 2) Ein einfaches Puzzle, bei dem die UserIn Teile bewegen kann. 67Beispiel 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. 68

Beispiel 4) Eine Animation kann angehalten und von der UserIn neu gestartet werden. 70Beispiel 5) Ein interaktiver Film mit zwei alternativen Enden. Die UserIn entscheidet mit einem

Klick wie der Film endet. 71Beispiel 6) Eine Spielfigur, die durch ein MovieClip dargestellt wird, wird gesteuert. 76Beispiel 7) Eine kleine verrückte Maschine: wenn man verschiedene Knöpfe drückt passieren

verschiedene Dinge. 78Beispiel 8) Ein Puzzle, das Fehlversuche und richtig gelegt Puzzlesteine mitzählt. 84Beispiel 9) Ein Preloader zeigt an wie viel Prozent der swf-Datei schon geladen sind. Erst wenn 100%

erreicht sind startet der Film. 86Beispiel 10) Mehrere Sterne werden auf die Bühne gezeichnet 92Beispiel 11) Ein MovieClip soll interaktive eingefärbt werden: Die BenutzerIn klickt auf einen von

mehreren Farb-Auswahl-Buttons, und die Farbe wird übernommen. 94Beispiel 12) Der Hintergrund des Flash-Films wird mit einem Muster aus Linien bedeckt: lauter

senkrechte Linien mit 10 Pixel Abstand. 98Beispiel 13) 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. 104

Beispiel 14) Eine Zeichnung wird Schritt für Schritt aufgebaut. 113Beispiel 15) 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. 114

Beispiel 16) Die aktuelle Uhrzeit wird grafisch angezeigt. 114Beispiel 17) Ein Ball bewegt sich gleichförmig über die Bühne, am Rand der Bühne prallt er ab 115Beispiel 18) Ein Ball trifft auf einen Ziegelstein und zerschlägt diesen. 118Beispiel 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. 120

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. 124

Beispiel 21) Glückskeks: Aus einem großen Vorrat von ewigen Weisheiten wird eine zufällig ausgewählt und angezeigt. 126

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. 126

Entwicklungsumgebung

55

Actionscript ist die Programmiersprache von Flash. Actionscript hat eine lange Geschichte hin-ter 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 Versions-Angabe achten.

Die akutellen Versionen sind „Actionscript 2“ (AS2) und „Actionscript 3“ (AS3). AS3 bietet fortgeschritte-nere 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

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 Schrit-ten erstellt:

1) Auf der Bühne wurde der Button mit dem In-stanznamen weiter_btn ausgewählt. Im VERHALTEN -Fenster wird das in der Kopfzeile angezeigt.

2) Mit dem Plus-Zeichen in der linken oberen Ec-ke des VERHALTEN-Fensters wurde die Aktion ANSTEUERN UND ABSPIELEN BEI BILD eingefügt. Dadurch entstand die Zeile im Fenster.

Was ist Actionscript

H I L F S M I T T E L

F E N S T E R VE R H A L T E N

Actionscript:

56

3) Mit einem Klick auf die linke Hälfte der Zeile wurde das Ereignis festgelegt, bei dem die Ak-tion ausgeführt wird.

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 er-stellen, und dann im AKTIONEN-Fenster weiter bearbei-ten.

Das Aktionen-Fenster besteht wie in Abbildung 70 gezeigt aus drei Teilen: Rechts wird der Programmco-de 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.

F E N S T E R AK T I O N E N

W E R K Z E U G L E I S T E U N D

S K R I P T - N A V I G A T O R

Entwicklungsumgebung

57

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 Informatio-nen zum ausgewählten Befehl (oberer Teil der Abbil-dung).

Abbildung 71: Tooltipps im AKTIONEN-Fenster

Sie können Ihre Actionscript-Programme auch außer-halb 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 ste-hen!

#include "mehrcode.as"

T O O L T I P P S

A C T I O N S C R I P T A U ß E R H A L B V O N

F L A S H

Wer

k-ze

u gle

iste

Skri

pt-

Nav

i gat

or

Popu

p-M

enü

Ans

icht

s-O

ptio

nen

Cod

e

weiter_btn

Actionscript:

58

9.2 Hilfe

Das Flash-Fenster HILFE können Sie mit dem Tasten-kürzel [F1] öffnen. Wenn der Cursor sich im AKTIONEN-Fenster befand, wird in der Flash-Hilfe au-tomatisch eine passende Seite zum aktuellen Befehl angezeigt. In Abbildung 72 sehen Sie die Seite in der Flash-Hilfe zum Thema on().

Abbildung 72: Flash-Hilfe zum Befehl on()

Das Lesen der Flash-Hilfe braucht einige Übung. Es wird hier sehr viel Programmier-Fachvokabular ver-wendet, das man sich erst aneignen muss. Besonders gefährlich am Anfang: Unter der Überschrift Ver-wendung findet man „Pseudo-Code“, das ist eine Mi-schung aus echtem Computerprogramm und Teilen die man erst ersetzen muss. Diesen Code kann man also nicht direkt ins AKTIONEN-Fenster kopieren! Fer-tige, kopierbare Beispiele finden Sie am Ende der Hil-fe, unter der Überschrift Beispiel.

In der Abbildung 72 sieht dieser Pseudo-Code zum Beispiel so aus:

Link

s zu

wei

-te

ren

Seite

n in

de

r Fl

ash-

Ver

sion

s-H

inw

eise

Ps

eudo

-Cod

e.

Para

met

er

Bei

spie

-

Wo ist der Code?

59

Das kursiv gestellte Wort mausereignis ist nicht wörtlich gemeint, hier muss man erst den Namen ei-nes Mausereignisses einfügen. Welche Mausereignisse es gibt ist unter der Überschrift Parameter nachzule-sen, 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 meh-rere Befehle einfügen. Ein korrektes Actionscript-Programm mit dem on()-Befehl könnte also so ausse-hen:

on(release) { play(); }

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 verste-hen – 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än-gig davon auf welche Art Sie den Code erstellen: der Code ist immer entweder einem bestimmten Bild einer Zeitleiste, oder einer bestimmten Instanz eines Sym-bols (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-

on(mausereignis) { // Anweisungen hier // einfügen }

Actionscript:

60

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 Dar-stellung finden Sie auch im FILM-EXPLORER.

In Abbildung 74 ist derzeit das erste Bild auf der Ebe-ne 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 Instanz-Namen weiter_btn, der sich auf der Hauptzeitleiste befindet.

9.4 Namen

Bei der Programmierung mit Actionscript ist es wich-tig, 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 Pro-grammcode verwendet. Deswegen gehört zur Planung eines Flash-Projekts auch die Festlegung der wichtig-sten 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ür-fen nur einmal vorkommen. In Flash Play-er 7 und neueren Versionen wird die Groß- und Kleinschreibung berücksichtigt.

Umlaute und scharfes ß sind erlaubt (aber noch nicht lange).

Abbildung 74: Der Skriptnavigator

Hilfsmittel für die Fehlersuche

61

Zulässige Namen Verbotene Namen hansi hansi1

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ß ge-schrieben, z.B.: anzahlFragen, farbeLinks, FeindUfo, BonusBlume

2. Symbole, Klassen, Komponenten werden groß geschrieben, MovieClip-Symbole erhalten die Endung MC, Buttons die Endung Btn: Fein-dUfoMC, DummyBtn, NaviBtn, …

3. Variablen werden klein geschrieben: anzahlFragen, farbeLinks, …

4. MovieClip-Instanzen, Button-Instanzen, Text-felder werden klein geschrieben und erhalten eine Endungen: player_mc, play_btn, output_txt, …

Diese Konventionen sollen das Lesen des Programm-codes erleichtern, und werden von vielen Actionscript-ProgrammiererInnen 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 Va-riablen? Welche sind zwar zulässig, entsprechen aber nicht den oben beschriebenen Konventionen?

ball_mc DummyBtn mc_ball Zweiter Ball MC

8ung_txt anzahlBälle grünerBall_mc Player_mc

ball_mc_2 home_btn BallMC 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

F R U S T R A T I O N U N D E R F O L G

Actionscript:

62

schnell, die Fehlersuche hingegen braucht Zeit. Auch wenn man in einem Tag ein geniales Programm er-schaffen 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:

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 ge-kommen sein, man weiß also genau in welchen Pro-grammzeilen er sich versteckt.

Wenn ein Fehler auftritt sollte man alle Informationen die Flash zur Verfügung stellt nutzen. Abbildung 76 zeigt eine Fehlermeldung des Actionscript Interpre-ters.

Abbildung 76: Fehlermeldung

Man liest diese Fehlermeldungen sorgfältig von Oben nach Unten. Bei der in Abbildung 76 gezeigten Feh-lermeldung 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

K L E I N E S C H R I T T E

F E H L E R M E L D U N G L E S E N

Hilfsmittel für die Fehlersuche

63

Bild 1, in der zweiten Zeile des Actionscript-Programmes. Nun können Sie den Film-Explorer ver-wenden 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 weite-ren 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 tre-ten 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 Ausgabe-fenster angezeigt werden.

Der Text der beim Befehl trace in Klammern und Anführungszeichen angegeben ist, wird im Ausgabe-fenster angezeigt. So haben Sie beim Testen des Pro-gramms einen Überblick an welcher Stelle in Ihrem

P R O G R A M M Z E I L E N A U S K O M M E N T I E R E N

T R A C E M E L D U N G E N

on(release) { play(); trace("Film gestartet"); }

Actionscript:

64

Programm der Actionscript-Interpreter gerade arbei-tet.

9.6 Fragen und Übungsaufgaben

Übung 3) Wiederholung Flash-Basics: Was bewirken folgende Tastatur-Befehle?

Strg + Alt-F3

Z Shift-F12

T F11/Strg-L

A F8

Strg-Enter F5

E F6

F9 Strg-B

B F7

Übung 4) Wiederholung Flash-Basics: Was unter-scheidet Form-Tween und Bewegungs-Tween?

Form- Tween

Bewe-gungs-Tween

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 verwan-deln

Mit diesem Tween kann man einen Stern im Uhrzeigersinn drehen.

Dieses Tween braucht weniger Speicherplatz

Fragen und Übungsaufgaben

65

Übung 5) Wiederholung Flash-Basics: Die Anzeige im Flash-Editor stellt verschiedene Arten der Selekti-on 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:

Ohne zu Programmieren:

66

Bevor wir zu Programmieren beginnen ein paar Beispiele für einfache Fragestellungen die sich ohne Programmierung lösen lassen. Dazu verwen-den 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 ei-nem Link in Flash zuerst wissen wo der Link hin ge-hen soll: dazu braucht man die genaue URL der Web-seite. 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

10 Ohne zu Programmieren

Drag and Drop

67

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 tar-get. 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 er-stellt 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 Ver-haltensweisen die für Drag-and-drop notwendig sind.

Ohne zu Programmieren:

68

Abbildung 81: Drag and Drop mit Verhalten

Der entsprechende Actionscript-Code sieht für alle Puzzle-Teile genau gleich aus:

Eine Überprüfung ob alle Teile am richtigen Ort ge-landet sind könne Sie noch nicht programmieren, da-fü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 ver-schiedenen 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 MovieClip-Instanz eingefügt, in Abbildung 82 hat diese Movie-Clip-Instanz den Namen display_mc.

on (press) { this.startDrag(); } on (release) { this.stopDrag(); }

on (release) { loadMovie("1.swf", display_mc); }

on (release) { unloadMovie(display_mc); }

Fragen und Übungsbeispiele

69

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?

Übung 12) Was passiert, wenn das MovieClip dis-play_mc durch einen Tween bewegt wird?

javascript:w=window.open("nextpage.html", "miniwindow", "tool-bar=no,menubar=no,location=no,scrollbars=no,resizable=yes,width=550,height=400")

Steuerung von Zeitleisten:

70

In diesem ersten Programmier-Kapitel werden wir Programme nach einem sehr einfachen Muster Stricken: Useraktion Reaktion. So kann die BenutzerIn den Film starten und stoppen, zwi-schen verschiedenen Alternativen auswählen, ver-schiedene 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 Actionscript-Befehle:

− 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 84: Aktion am Bild Nummer 11: stop();

11 Steuerung von Zeitleisten

Abbildung 83: Filme wird angehalten, und über Buttons wieder gestartet

A C T I O N S C R I P T A U F E I N E M

B I L D

Film mit alternativem Ende

71

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 Los-lassen des Buttons. Dies wird als Ereignis release bezeichnet. Als Actionscript-Code geschrieben heißt das on (release), siehe Abbildung 85.

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 ge-schwungenen 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 ausge-fü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) {…}:

11.2 Film mit alternativem Ende

Beispiel 5) Ein interaktiver Film mit zwei alternati-ven 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

A C T I O N S C R I P T A U F E I N E M B U T T O N

on ( press ) { play(); }

on ( rollOver ) { play(); }


72

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 gespei-chert, der entsprechende Button enthält also nur ei-nen play Befehl.

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 gotoAnd-Play(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

on ( release ) { gotoAndPlay(34); }

Film mit alternativem Ende

73

mehr Frames braucht. Damit würde sich das gute Ende von 34 auf z.B. 54 verschieben, und entspre-chend 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 funktio-niert das Programm trotzdem noch.

An diesem Beispiel kann man sehen, dass in Pro-grammiersprachen Zahlen und Texte verschieden be-handelt 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 An-fü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 zusam-menpassend verwendet werden:

gotoAndPlay('Happy'); gotoAndPlay("Happy");

Andere Anführungszeichen kann man mit copy-and-paste in das Flash Aktionen-Fenster hineinbringen, sie funktionieren aber nicht!

gotoAndPlay(`Happy´); // FALSCH ! gotoAndPlay(“Happy”); // FALSCH ! gotoAndPlay(»Happy«); // FALSCH !

on ( release ) { gotoAndPlay("Happy"); }

S T R I N G S

A N F Ü H R U N G S Z E I C H E N


74

Den gesamten Ablauf des Filmes könnte man in einem Flussdiagramm wie folgt darstellen:

Bei größeren Projekten können Flussdiagramme hel-fen den Überblick zu bewahren. Eine Raute stellt eine Verzweigung / Entscheidung dar, sonst folgt der Ab-lauf den Pfeilen.

Flussdiagramme sind ein sehr altes Werkzeug in der Programmierung, sie wurden schon in den 70er-Jahren verwendet. Deswegen sind sie weit verbreitet.

Sie können Flussdiagramme auch verwenden, um die Handlung eines interaktiven Films oder eines Compu-terspiels 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. Objekt-orientiertes Programmieren ist seit ca. 10 Jahren Stand der Technik (davor gab es prozedurales, funk-tionales, modulares Programmieren).

Das wichtigste Fachwort in diesem Zusammenhang ist das Objekt. Beispiele für Objekte in Flash sind Movie-Clip-Instanzen und Schaltflächen-Instanzen.

Ein Objekt hat Eigenschaften. In Flash hat zum Bei-spiel jede Symbol-Instanz eine Eigenschaft _alpha. _alpha ist eine Zahl zwischen 0 und 100 die angibt, wie transparent das Objekt ist: 0 bedeutet ganz un-sichtbar, 50 bedeutet halb-transparent, 100 bedeutet ganz undurchsichtig.

Die Eigenschaften in der objektorientierten Program-mierung entsprechen den Variablen in der klassischen Programmierung; der Unterschied ist, dass eine Ei-genschaft zu einem bestimmten Objekt gehört.

Abbildung 88: Flussdiagramm für den Film mit Verzweigung

O B J E K T

E I G E N S C H A F T

Intro

Bad Happy

Objekte, Methoden, Eigenschaften

75

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 Eigen-schaft wird ein neuer Wert zugewiesen)

Weitere wichtige Eigenschaften von Symbol-Instanzen sind:

_height (Höhe in Pixel)

_width (Breite in Pixel)

_x (Position, X-Koordinate)

_y (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 Ei-genschaft also nur einen Wert speichert entspricht eine Methode einem Befehl den man dem Objekt ertei-len kann.

meineFigur.stop(); meineFigur.gotoAndPlay("dreh"); meineFigur.gotoAndPlay(20);

Verschiedene Arten diesen Code zu beschreiben: Die Methode stop() wird aufgerufen. Die Methode goto-AndPlay() 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.

M E T H O D E N

S T R I N G


76

Die Methode gotoAndPlay()kann als Argument ent-weder 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 Program-miersprachen immer in Anführungszeichen geschrie-ben, Zahlen werden immer ohne Anführungszeichen geschrieben. Als Anführungszeichen gelten die einfa-chen geraden und die doppelten geraden, aller ande-ren nicht:

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 darge-stellt 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 Hand-lung, die die Spielfigur durchführen kann. Der erste Frame im Abschnitt ist entsprechend benannt:

meineFigur.gotoAndPlay("20"); // falsch! Zahl braucht keine " ... " meineFigur.gotoAndPlay(20); meineFigur.gotoAndPlay(dreh); // falsch! String braucht " ... " meineFigur.gotoAndPlay("dreh"); meineFigur.gotoAndPlay('dreh'); meineFigur.gotoAndPlay(`dreh´); // falsch! Nur " sind richtig! meineFigur.gotoAndPlay(“dreh”); // falsch! Nur " sind richtig! meineFigur.gotoAndPlay(»dreh«); // falsch! Nur " sind richtig!

Spielfigur steuern

77

Abbildung 89: Zeitleiste des MovieClips als Handlungs-Repertoire

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 die-sem Fall figur_mc:

on (release) { figur_mc.gotoAndPlay("dreh"); }

Wenn sich eine zweite Spielfigur auf der Bühne befin-det, dann kann diese über Ihren Instanznamen ange-sprochen werden:


78

on (release) { andereFigur_mc.gotoAndPlay("dreh"); }

Übung 14) Verwenden Sie die Vorlage spielfigur-steuerung-vorlage.fla als Ausgangspunkt: bauen Sie die Steuerung ein.

11.5 Weitere Übungsbeispiele

Übung 15) Bauen Sie in die Spielfigur eine Tastatur-Steuerung 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 "<right>") { this.gotoAndPlay("rechts"); this._x += 10; }

Beispiel 7) Eine kleine verrückte Maschine: wenn man verschiedene Knöpfe drückt passieren verschie-dene Dinge.

Übung 16) Gestalten und bauen Sie eine solche Ma-schine!

Variablen

79

In diesem Kapitel werden Sie Variablen und Ver-zweigungen kennen lernen Damit werden Sie Ihre Programme wesentlich flexibler und abwechs-lungsreicher 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 Variable7 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: han-si, elsa und susi.

Abbildung 91: Drei Variablen, als Schachteln dargestellt

7 in der objektorientierten Programmierung nennt man Variablen auch Eigenschaften, siehe Kapitel 11

12 Variablen und Verzweigungen

10 hansi

Hallo

elsa

undefined

susi

Variablen und Verzweigungen:

80

Es gibt einige Variablen die in von Flash schon vorge-geben sind. Aber Sie können selbst neue Variablen erfinden und anlegen. Für die in Abbildung 91 gezeig-ten 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.

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 ha-ben.

Dieses erste Setzen des Wertes nennt man Initiali-sierung, 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 Ma-thematische Formeln und Variablen verwenden:

sekunden = 24 * 60 * 60; flaeche = breite * hoehe; punkte = punkte + 1;

Beim Abarbeiten des Programms geht der Action-script-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 gespei-chert ist, führt der Befehl

punkte = punkte + 1;

Dazu, dass der Wert 6 gespeichert wird.

// altmodisch punkte = 0; // neumodisch var punkte:Number = 0;

Variablen

81

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 wur-de enthält sie den Wert undefined.

Da man besonders oft „hinaufzählen“ und „hinunter-zählen“ muss gibt es dafür eine eigene Kurzschreib-weise: die erste und zweite Zeile in folgendem Pro-gramm sind gleichbedeutend:

Wenn Sie den Überblick über die Variablen verlieren, und nicht mehr wissen was in einer Variablen gespei-chert ist, dann können Sie den Wert der Variable mit einer trace Meldung ausgeben:

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 dyna-misches Textfeld.

Ein statisches Textfeldern (in Abbildung 92 links) stellt einen fixen Text dar. Ein dynamisches Textfeld (in Abbildung 92 rechts) kann den Inhalt einer ein-zelnen Variable anzeigen (hier punkte) oder vom Pro-gramm gesetzt werden.

punkte = punkte + 1; // eins dazuzählen punkte++; // eins dazuzählen, Kurzschreibweise vorrat = vorrat – 1; // eins wegzählen vorrat--; // eins wegzählen, Kurzschreibweise

trace("Es wurden schon " + punkte + " Punkte verdient");

D Y N A M I S C H E T E X T F E L D E R


82

Abbildung 92: statisches und dynamisches Textfeld

Dynamische Textfelder können einen Instanznamen haben, in Abbildung 92 ist der Name punkt_ausgabe_txt.

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 ein-fach das Eigenschaften-Fenster. Dort können Sie Schriftart, Schriftgröße, etc. einstellen.

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 Eigen-schaftsfenster 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 Forma-tierung an, die Eigenschaft htmlText zeigt Text mit (einigen, einfachen) HTML-Tags an.

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

A U T O M A T I S C H A N Z E I G E N

M I T V A R

T E X T U N D H T M L T E X T

if ( punkte == 0 ) { punkt_ausgabe_txt.htmlText = "Punkte: <b>noch keine</b>"; } else { punkt_ausgabe_txt.htmlText = "Punkte: <b>" + punkte + "</b>"; }

Verzweigungen

83

blos der Wert der Variable punkte verändert hat das alleine noch keine Auswirkung auf das Textfeld!

Jede Variable die Sie in Actionscript schreiben befin-det sich in einer bestimmten Zeitleiste. Eine Variable namens punkte in der Hauptzeitleiste ist also etwas anderes als die Variable punkte in der MovieClip-Instanz 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:

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 Vergleichs-Operatoren bauen:

G E L T U N G S B E R E I C H V O N V A R I -

A B L E N

// 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

if ( _x < 0 ) … // x kleiner als Null if ( _x <= 0 ) … // x kleiner oder gleich Null if ( _x == 2 ) … // x genau gleich 2 if (name == "Brigitte" ) … // Sind die Strings genau gleich?


84

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äh-len 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 te-sten ob der Puzzel-Stein an der richtigen Stelle abge-legt wurde? Wenn ein Puzzelstein mit stopDrag() abgelegt wird), dann speichert der Actionscript-Interpreter in der Eigenschaft _droptarget des Puz-zel-Steins auf welche MovieClip-Instanz er fallen ge-lassen wurde. Sie müssen also MovieClip-Instanzen auf die Bühne stellen, die die Ziele für die Puzzel-Steine definieren. In Abbildung 93 sehen Sie in dem rechten Quadrat drei Kreise (in hellern Farben), diese Kreise sind die Ziel-MovieClips mit den Instanznamen

Puzzle mit Erfolgskontrolle

85

blauesZiel_mc, rotesZiel_mc und gelbes-Ziel_mc.

In Abbildung 94 sehen Sie die sechs MovieClip-Instanzen 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 Instanz-namen 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:

_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 Web-seiten ist auch hier die Verwendung der relativen An-gaben vorteilhaft.

Die Abfrage ob das Ziel getroffen wurde sieht also so aus:

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.

Abbildung 94: Sechs Instanzen

if (eval(this._droptarget) = = _parent.blauesZiel_mc) { … }


86

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 War-tezeit 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.

Actionscript für den Preloader:

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:

Abbildung 95: Preloader mit Fortschritts-Balken

_framesloaded (Wie viele Frames wurden schon geladen?) _totalframes (Aus wie vielen Frames besteht der Film insgesamt?) getBytesLoaded() (Wie viele Bytes wurden schon geladen?) getBytesTotal() (Aus wie vielen Bytes besteht der Film insgesamt?)

if (_framesloaded>=_totalframes) { gotoAndPlay("init"); } else { pr = Math.round(getBytesLoaded()/getBytesTotal()*100); balken_mc._xscale = pr; gotoAndPlay(1); }


87

Abbildung 96: Download simulieren

Übung 18) Bauen sie in eine Ihrer Flash-Dateien den Preloader ein (z.B. in den interaktiven Film) und te-sten 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 );

2 a = 10; b = 20; c = a * ( b + 2 ); trace( c );

3 a = "Hallo"; b = "Brigitte"; trace( a + b );

4 a = "Hallo"; b = "Brigitte"; trace( a + " " + b );

5 b = "Brigitte"; b = "Hansi"; trace( b );

6 a = 10; b = 20; b += 2; c = a * b; trace( c );

7 a = 10; b = 20; a = b; b = a; trace("a ist jetzt " + a); trace("b ist jetzt " + b);

8 a = 10; b = 20; c = a; a = b; b = c; trace("a ist jetzt " + a); trace("b ist jetzt " + b);


88

Übung 20) Formeln: Ergänze diese Programme, so dass die Ausgabe stimmt:

A a = 4; trace( a + " Euro sind " + b + " Schillling");

B 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);

B a = 10 b = 20 c = a * ( b + 2 ) trace(c);

C a = Hallo; b = Brigitte; trace( a + " " + b );

D b = "Hansi"; length( b ); trace();

Ü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 Fehler-meldung – trotzdem sind sie falsch. Was ist das Pro-blem?

A a = Hallo; b = Brigitte; trace( a + " " + b );

B gotoAndPlay(2000);

C keinobjekt._x = 100;


89

Übung 24) Was geben diese Programme mit Verzwei-gungen 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 );

3 a = 10; b = 20; c = 30; if ( a+b == c ) { trace(c); }

4 a = 10; b = 20; c = 40; if ( a+b == c ) { trace(c); }

5 max = 5; name = "Brigitte"; l = length( name ); if ( l > max ) { trace("Name zu lang"); } else { trace("-----"); trace(name); trace("-----"); }

6 max = 5; name = "Hansi"; l = length( name ); if ( l > max ) { trace("Name zu lang"); } else { trace("-----"); trace(name); trace("-----"); }

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") }

8 a = 10; trace("Alter: " + a); if ( a > 18 ) { trace("ok"); } else if ( a > 10 ) { trace("mit Begleitung") } else { trace("gar nicht!") }

9 x = 3; max = 13; breite = 5; if ( x + breite > max ) { trace("autsch!"); x = max; } else { trace("ok"); } trace("Neues x: " + x);

x = 10; max = 13; breite = 5; if ( x + breite > max ) { trace("autsch!"); x = max - breite; } else { trace("ok"); } trace("Neues x: " + x);

Zeichnen, Farben und Funktionen:

90

In diesem Kapitel beschäftigen wir uns wieder mit den Kernkompetenzen von Flash: es ist bunt, und man kann damit Zeichen. Allerdings jetzt auf ei-ner anderen Ebene: auch wenn man Actionscript programmiert kann man mit Farben arbeiten und Zeichnen. Das ist die Grundlage von Generativem Design.

13.1 Zeichnen mit Actionscript

Jede MovieClip-Instanz kann als Zeichen-Blatt fun-gieren. Das MovieClip merkt sich welcher Stift ver-wendet werden soll (lineStyle) und wohin der Stift zuletzt bewegt wurde. Hier ein Beispiel mit der Mo-vieClip-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 blau-Anteil 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( 0, 0 ); mc.lineTo( 300, 100 ); mc.lineTo( 100, 300 ); mc.lineTo( 200, 0 );

Achtung: das Koordinatensystem von Flash beginnt links oben, die x-Achse geht nach rechts, die (positive) Y-Achse nach unten!

13 Zeichnen, Farben und Funktionen

L I N I E N

Abbildung 97: Linien mit Actionscript ge-zeichnet

Zeichnen mit Actionscript

91

Mit dem Befehl curveTo kann man Kurven zeichnen. Dabei wird ein Zielpunkt und ein so genannter „Kon-troll-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 Li-nien von Startpunkt- und Endpunkt zum Kontroll-punkt. Diese Linien sind Tangenten an die Kurve, und bestimmen so die genaue Form der Kurve. (Das Fach-wort für diese Art von Kurve ist „quadratische Bézier-kurve“)

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 (meh-ren?) curveTo–Aufrufen ungefähr einen Halbkreis zeichnet.

K U R V E N

Abbildung 98: Kurve die mit curveTo ge-zeichnet wurde (und Kontrollpunkt)

F Ü L L F A R B E

Abbildung 99: Zwei verschiedene Füll-Farben


92

Übung 28) Schreiben Sie ein Programm das den An-fangsbuchstabe 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 Lini-en und Kurven zu zeichnen, mehr nicht. Praktisch wäre doch auch ein Befehl zum Zeichnen eines Recht-ecks! 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 Koor-dinaten

Der Code dafür könnte so aussehen:

Rechteck 0/0 bis 150/100 Rechteck 200/0 bis 300/100 Rechteck 350/0 bis 500/100

moveTo(0,0); moveTo(150,0); moveTo(150,100); moveTo(0,100); moveTo(0,0);



Die Struktur des Codes ist immer gleich, nur die kon-kreten Zahlen unterscheiden sich. Ein bisschen ab-strakter 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:

Funktionen

93

moveTo(x1, y1); lineTo(x2, y1); lineTo(x2, y2); lineTo(x1, y2); lineTo(x1, y1);

Diesen abstrakten Code kann man in eine Funktion schreiben. Den Namen der Funktion (hier rect) kön-nen 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 Argumen-te 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 An-fangsbuchstabe Ihres Vornamens zeichnet. Die Positi-on des Buchstabens auf der Bühne soll über die Funk-tions-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 zeich-nen.

Übung 32) Schreiben Sie eine Funktion, die mit Hilfe von mehreren Aufrufen der curveTo Funktion unge-

E I N E F U N K T I O N D E F I N I E R E N

E I N E F U N K T I O N A U F R U F E N


94

fähr einen Kreis zeichnet. Die Position des Kreises auf der Bühne soll über die Funktions-Argumente gesteu-ert werden, ähnlich wie bei der rect-Funktion. Benut-zen Sie Ihre Kreis-Funktion um 5 Kreise auf die Büh-ne 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 ver-wendet 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 übernom-men.

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:

Abbildung 101: Farbauswahl für ein Teil eines MovieClips

Farbe auf ein MovieClip übertragen

95

gesichtsFarbe = new Color(dasGesicht_mc); gesichtsFarbe.setRGB( 0xff0000 );

Zuerst wird ein Farbobjekt für die zu färbende Movie-Clip-Instanz angelegt. Mit diesem Farbobjekt kann man dann die Farbe auf einen bestimmten Code setz-ten. Hier wird die gleiche Schreibweise verwendet wie in HTML, nur ein Null und ein x werden davor ge-setzt. 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 unter-schiedlich eingefärbt werden. (Achtung: keine But-tons!)

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 Mo-vieClips zugewiesen.

Achtung: der folgende Code befindet sich auf dem er-sten Bild der Haupt-Zeitleiste, nicht auf einer einzel-nen Instanz! Dadurch verändert sich der Name, mit dem gesicht_mc angesprochen wird!

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 }


96

In den einzelnen Farbtöpfen wird diese Funktion auf-gerufen:

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.

function nimmMeineFarbe(ich) { var meineFarbe, rgb, gesichtsFarbe; meineFarbe = new Color(ich); rgb = meineFarbe.getRGB(); gesichtsFarbe = new Color(smilie_mc.gesicht_mc); gesichtsFarbe.setRGB(rgb); }

Extra –für Actionscript-Profis:

97

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 Funk-tion so verändert, dass sie kein Argument nimmt, son-dern die Variable this verwendet. Diese Funktion kann dann auf die onRelease-Eigenschaft der einzel-nen Farbtöpfe zugewiesen werden.

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 ge-stalteten MovieClip um.

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;

Mehr zeichnen mit Schleifen:

98

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 senk-rechte Linien mit 10 Pixel Abstand.

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 lineStyle(1, 0x000000, 100); 2 var x:Number = 0; 3 while (x <= Stage.width) 4 { 5 moveTo(x, 0); 6 lineTo(x, Stage.height); 7 x = x + 10; 8 } 9 // hier gehts weiter

Die while-Schleife reicht von Zeile 3 bis Zeile 8. So-bald 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.

14 Mehr zeichnen mit Schleifen

S C H L E I F E N

Ein Muster aus Linien Zeichnen

99

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 senk-rechte 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:

Mit Hilfe einer Schleife kann man viele Linien ziehen, mit Hilfe von Zufallszahlen sieht dieses Muster jedes Mal anders aus:

Abbildung 102: Zufalls-Muster

E N D L O S -S C H L E I F E

Z U F A L L S Z A H L E N


100

Zufallszahlen bringen den Moment des Unberechen-baren, 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:

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 Zah-len 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 Mu-ster in Abbildung 102 zeichnet.

Übung 42) Schreiben Sie ein Programm das das zufäl-lige Linien zeichnet.

trace(" Erste Zufallszahl " + Math.random()); trace("Zweite Zufallszahl " + Math.random()); trace("Dritte Zufallszahl " + Math.random());

Übungsaufgaben

101

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 aus-sieht. Was würde eine Veränderung der Variablen n, r, mitte_x, mitte_y bewirken?


102

Ü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 Pro-gramm aussehen, das das Bild rechts zeichnet? Skiz-zieren Sie das Programm. Am besten wäre ein Pro-gramm, 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

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); }

Übungsaufgaben

103

MovieClips erzeugen:

104

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 Ac-tionscript auf der Bühne platzieren.

15.1 Beispiel „Tapete“

Beispiel 13) 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 Mu-ster.

Je nach „Tapetenstück“ entsteht dabei ein abstraktes Muster oder – bei einem Spiel – z.B. eine Landschaft.

15.2 Instanzen dynamisch erzeugen

15 MovieClips erzeugen

Instanzen dynamisch erzeugen

105

Sie können Instanzen eines Symbols „händisch“ er-zeugen, 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 er-zeugen. Dafür gibt es den Flash-Befehl attachMo-vie().

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 eige-nen 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 MovieClip-Instanz 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..


106

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 attachMo-vie 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 ande-ren 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.

Jede einzelne Instanz kann über Ihren Namen ange-sprochen 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-

i=0; while(i<10){ neuername = "tap" + i; attachMovie( "TapeteMC", neuername, getNextHighestDepth() ); i++; }

Objekte mit variablem Namen

107

Instanzen der Tapete: Man sollte ein Programm schreiben können, das 10 oder 100 oder 1000 Tapeten-Teile 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 gespei-chert, 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 neuer-name.

Aber es gibt eine alternative Schreibweise:

this[neuername]._x = 100; this[neuername]._y = 150; this[neuername].gotoAndPlay(b);

Durch die eckigen Klammern weiß der Actionscript-Interpreter: 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 positio-nieren und ein zufälliges Bild der Tapete anzuzeigen:


108

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 verschie-dene y-Koordinaten aussuchen?

Abbildung 105 zeigt die Instanznamen und Koordina-ten 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 ar-beitet die Zeilen von oben nach unten ab. Innerhalb

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++; }

Für Profis: 2d ohne Verschachtelung

109

dieser Schleife zählt eine zweite Schleife die Spalten von links nach rechts:

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ückzu-setzen und den y-Wert zu erhöhen.

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++; }


110

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++; }


Übung 48) Erstellen Sie einen funkelnden Stern als MovieClip. Schreiben Sie ein Programm das eine In-stanz dieses Sterns auf der Bühne plaziert und zufäl-lig 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?

Übungsaufgaben

111

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-Tapeten-Programm.

onEnterFrame und hitTest:

112

In diesem Kapitel werden wir den „Takt“ von Flash aufgreifen, um damit Bewegung zu erzeu-gen.

Ein Flash-Film folgt einem fixen Takt – den Frames pro Sekunde. Alle Zeitleisten im Film – egal ob Haupt-zeitleiste, Zeitleiste eines Movieclips, oder Zeitleisten in einer mit loadMovie() geladenen swf-datei – folgen diesem Takt.

Umgekehrt können Sie diesen Takt beim Programmie-ren nützen. Auf jeder Zeitleiste kann man eine onEn-terFrame 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 funk-tionieren alle diese Schreibweisen nebeneinander.

Die zweite oder dritte Schreibweise empfehle ich. Die Zuweisung funktioniert auch von „außerhalb“ des Mo-vieClips:

ball_mc.onEnterFrame = bewegung;

16 onEnterFrame und hitTest

Die alte Schreibweise verwendet onClipEvent:

onClipEvent(enterFrame) { // alt }

am MovieClip

Die neue Schreibweise funktioniert mit einer Funktion namens onEnterFrame.

function onEnterFrame() { // modern, erste Schreibweise }

am MovieClip

Oder man schreibt eine Funktion mit anderem Namen, und weist dieser dann onEnterFrame zu. Das ist praktisch, wenn man die Funktion später austau-schen will:

function bewegung() { … } onEnterFrame = bewegung; // später: onEnterFrame = pause;

Oder man weist der Eigenschaft onEn-terFrame eine anonyme Funktion ohne Namen zu (wie in jQuery).

onEnterFrame = function() { … };

Übungsaufgaben

113

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 Hauptzeitlei-ste 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 wer-den in ca. 1,5 Sekunden gezeichnet.

Die onEnterFrame- Funktion wird bis in alle Ewigkeit wieder und wieder aufgerufen. Nur das if sorgt da-für, daß ab einem gewissen Punkt nichts Neues mehr gezeichnet wird.


114

16.1 Zeichnung neu aufbauen

Beispiel 15) Eine Kurve wird angezeigt, mit Anfangs- End- und Kontrollpunkt. Die drei Punkte kann man mit Drag-and-Drop positionieren, die Kurve wird da-bei 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:

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 ange-zeigt.

Die Uhrzeit erfährt man von Flash über das Date Ob-jekt:

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

}

Abbildung 107: Neu-Aufbau einer Zeichnung

Bühne und Maus

115

16.3 Bühne und Maus

Ein paar Kleinigkeiten, die bei den folgenden Beispie-len gebraucht werden:

Die Größe der Bühne erfährt man über das Stage-Objekt:

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 be-wegen – damit das so passiert, müssen wir aber noch ein entsprechendes Programm schreiben.


116

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, ge-hö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 Bewe-gungsvektor des Balls.

Abbildung 109: Bewegungsvektoren beim Abprallen

Im Beispiel prallt der Ball von rechts gegen die senk-rechte Wand. Dabei bleibt die Y-Komponente des Be-wegungsvektors gleich, die X-Koordinate wird umge-

Ball im Spielfeld

117

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 Bal-les 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 Ge-samt-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) {


118

_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 sicht-barer Teil des MovieClips ist – egal wie die Begren-zungsbox aussieht.

Abbildung 111: die zwei Varianten von hitTest

MovieClip berührt MovieClip

Koordinate berührt MovieClip nicht

Koordinate berührt MovieClip

Viele Projekte

119

16.6 Viele Projekte

Mit onEnterFrame und hitTest können Sie nun viele neue Projekte machen – fast alle klassischen Compu-terspiele 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 je-dem Bildaufbau einen Pfeil vom Nullpunkt zur aktuel-len Position des Cursors zeichnet.

Übung 54) Schreiben Sie ein Programm, das die ak-tuelle 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 Brea-kout: ein Ball bewegt sich über das Spielfeld, das un-ten „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.

Audio und Video asynchron:

120

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 Spei-cherort streamen.

Beispiel 19) Ein Audio-Player soll mp3-Dateien abspie-len, steuern und den Namen des Stücks in einem dy-namischen 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 gespei-chert werden, das nennt man ID3-Tags. Die kann so-gar 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.

17 Audio und Video asynchron

Audio streamen

121

Trotzdem wird das Laden einer mp3-Datei (im Ver-gleich 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 beson-ders 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 „Callback-Funktion“ 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:

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 Flash-Interpretr 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 dynami-schen Textfeld anzeigen:

A S Y N C H R O N

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");


122

Abbildung 4: Benötigte Elemente: Dynamisches Textfeld, But-tons

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üc-ken 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 La-devorgangs 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 Positi-on mit

Variablen für Flash in HTML setzen

123

17.2 Variablen für Flash in HTML setzen

Der Audio-Player ist schon ein sehr allgemein ver-wendbares Programm: Sie können den Player für ver-schiedene 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:

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:

<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("audio-player.swf?max=5", "flashcontent", "500", "40", "7.0.0"); </script> </head> <body bgcolor="#ffffff"> <div id="flashcontent"> Der Audio-player kann leider nur mit Javascript und Flash benutzt werden. Ohne Javascript und Flash können Sie nur das <a href="1.mp3">erste Lied downloaden</a>. </div> </body>


124

var max:Number; if ( max == undefined ) { max = 3; }

Nun können Sie getrost die fla-Datei des Audio-Players verlieren: die swf-Datei funktioniert für belie-big 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:

music.duration (Gesamtdauer in Millisekunden) music.position (aktuelle Position in Millisekunden) music.getBytesLoaded() (schon geladene Bytes) music.getBytesTotal() (Gesamtgröße in Bytes)

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 be-schrieben, so dass er die maximale Anzahl der Musik-stücke aus der HTML-Datei übernimmt. Testen sie den Player mit verschiedenen Stücken und verschie-dener Anzahl.

17.3 Video steuern

Beispiel 20) Ein allgemeiner Videoplayer soll verschie-dene ein flv-Videos abspielen können, diese werden bei der Einbindung der swf-Datei in den HTML-Code an-gegeben.

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) über-nommen werden:

Stage.scaleMode = "noScale"; import mx.controls.*; var myPlayer:mx.video.FLVPlayback; if (quelle == undefined) {

Abbildung 113: Video Player mit der FLVPlayback-Komponente

Video steuern

125

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:

Es gibt einen Trick um diese „URL-Codierung“ zu er-ledigen: einfach den Text ins Suchfeld von Google ein-geben, und dann in der resultierenden URL nach der Variable q suchen. Google muss die gleiche URL-Codierung 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 wer-den: 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.

video-player.swf?quelle=Ursty_Opener.flv&beschreibung=Opener+Ursty+2006

Arrays:

126

Mit Variablen und Verzweigungen können Sie einzelne Werte speichern und prüfen. Für größere Datenmengen (Listen von Strings, Listen von Mo-vieClips) 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 Pro-grammstart 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)

18 Arrays

Arrays

127

Ein Quiz mit fixen Fragen und fixen Antworten kön-nen Sie sicher schon in Flash erstellen. Doch nun wol-len 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 deut-schen 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.

Abbildung 116: Array, als Reihe von Schachteln dargestellt

Abbildung 117 zeigt noch einmal das Bild mit den Schachteln, diesmal sind die einzelnen Schachteln so beschriftet, wie sie in Actionscript benannt sind.

Wie WasWer hugo

Arrays:

128

Abbildung 117: Array, als nummeriert Reihe von Schachteln dargestellt

Warum nimmt man nicht statt hugo[0], hugo[1], hu-go[2] drei verschiedene Variablen heli, hans und herbert? Wenn die drei Werte nichts miteinander zu tun hat macht es wirklich Sinn sie in separaten Varia-blen 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 ge-tan werden soll (in einer Schleife).

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

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 schrei-ben.

S C H L E I F E Ü B E R E I N

A R R A Y

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 1. Frage ist " + l + " Zeichen lang"); l = length( hans ); trace("Der Text der 2. Frage ist " + l + " Zeichen lang"); l = length( herbert ); trace("Der Text der 3. Frage ist " + l + " Zeichen lang");

Wie WasWer hugo[0] hugo[1] hugo[2]

Arrays

129

Dieses Programm liefert fast den gleichen Output8 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 Zufalls-zahlen 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.

8 Können Sie sich denken was der Unterschied ist? Wenn nicht, dann können Sie einfach beide Programme ausprobieren

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++; };

Z U F Ä L L I G A U S W A H L

Arrays:

130

Arrays in Actionscript können übrigens mehr als Ar-rays in anderen Programmiersprachen: Sie können nicht nur Zahlen oder Strings speichern, sondern auch MovieClip-Instanzen wie in Abbildung 118 gezeigt:

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:

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 Ele-ments 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 ge-zeigt:

A R R A Y S V O N M O V I E C L I P S

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

mc[0] mc[1] mc[2]

Lösungsansatz Glückskeks

131

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 kom-biniert:

− Ein Array mit den weisen Sprüchen

− Die zufällige Auswahl eines Spruches

− Die Ausgabe des Spruches über ein dynami-sches 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

Arrays:

132

18.4 Übungen

Übung 62) Was geben diese Programme mit Arrays aus?

1 a = Array(42,13,23); trace( a );

2 a = Array(42,13,23); b = a[0] + a[1]; trace( b );

3 a = Array(42,13,23); a[1] = a[0]; 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);

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 );

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 Wikipedia9 und Bilderrätsel Salz-burg10 (Installation von Mario Merz am Mönchsberg).

Übung 63) Diese Programme mit Arrays sind fehler-haft – finden Sie die Fehler!

A a = array(42,13,23); trace( a );

B a = Array(42,13,23); b = a + a[1]; trace( b );

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 );

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

10 http://www.matheboard.de/thread.php?threadid=39274

Lösungsansatz Quiz

133

Das gesamte Quiz findet auf der Hauptzeitleiste statt. Die Zeitleiste wird in mehrere Phasen eingeteilt:

init – Initalisierung der Variablen, z.B. Punk-te 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 vor-bei, 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 Ant-worten werden in drei Arrays gespeichert. In der In-itialisierungs-Phase (die nur einmal durchlaufen wird) werden folgende Variablen gesetzt:

Arrays:

134

fragetexte Array mit den Fragen falschetexte Array mit den falschen Antworten

(gleicher Index wie fragetexte) richtigetexte Array mit den richtigen Antworten

(gleicher Index wie fragetexte) punkte Jede richtige Antwort bringt einen

Punkt

In der nächsten Phase (die oft durchlaufen wird)

frage Text der Fragen linkeantwort Text der linken Antwort rechteantwort Text der rechten Antwort istlinksrichtig 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:

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.

// 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 fragenr:Number; // wird später zufällig ausgewählt var frage:String; // Text der ausgewählten Frage var linkeantwort:String; var rechteantwort:String; var linksrichtig:Boolean;

Lösungsansatz Quiz

135

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äh-len, 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? Schrei-ben Sie eine README-Datei in der das Programm im Überblick erklärt wird?

Das Zielpublikum für Dokumentation sind Program-miererInnen – die Personen, die das Programm in 3 Monaten, in einem Jahr, in zwei Jahren verwenden und überarbeiten müssen. Vielleicht sind Sie das

// 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]; }

Arrays:

136

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!


Übung 65) Programmieren Sie das Quiz.

Übung 66) Studieren Sie noch einmal die Dokumen-tation hier: welche weiteren Informationen hätten Ihnen beim Verständnis des Quiz geholfen? Schreiben Sie Stichworte auf.

Übungsaufgaben

137

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 spei-chern, die Kommunikation mit anderen Usern herstellen, etc.

Betrachten wir noch einmal die Kommunikation zwi-schen Client und Server im Web:

Abbildung 123: Kommuikation zwischen Webbrowser, Webser-ver 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 ver-weist dann stellt der Webbrowser eine weitere Anfra-gen 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 swf-Datei 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 swf-Datei eine onLoad Funktion aufgerufen.

19 Vom Server laden

Vom Server laden:

138

19.1 Einfache Daten laden

Wir verwenden ein PHP-Programm auf dem Server das einen Zugriffszähler führt und immer den aktuel-len 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 Weiterverarbei-tung 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:

<?php echo "count=" . rand(100,900); ?>

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:

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.

1 url = "http://www.meinserver.net/counter.php "; 2 l = new LoadVars(); 3 l.onLoad = function(success) { 4 if (success) { 5 trace("daten sind da: " + this.count); 6 } else { 7 trace("fehler beim Laden von " + url); 8 } 9 } 10 l.load(url); 11 trace("...gleich geht's weiter");

XML für Slideshow

139

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ühnen-Größ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 PHP-Programm wird als Datei mit der Endung .php in den Ordner mit den Bildern gespeichert:

Der Output des PHP-Programmes sind XML-Daten:

<bilder> <bild imageurl="img/DSC_3461.jpg" /> <bild imageurl="img/DSC_3462.jpg" /> </bilder>

Testen Sie zuerst das PHP-Programm alleine mit dem Browser: der Browser kann den XML-Output des Pro-grammes gut darstellen. Wenn Sie ein zusätzliches Bild in den Ordner laden, sollte es beim nächsten Auf-ruf im XML erscheinen.

<?php header("Content-Type: application/xml"); $bilder = glob("*.jpg"); echo("<bilder>\n"); foreach( $bilder as $bild ) { echo("<bild imgurl='$bild' />\n"); } echo("</bilder>\n"); ?>

Vom Server laden:

140

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 Darstel-lung des HTML-Dokuments als Baum von Objekten verwendet; Sie kennen es dort unter dem Namen Do-cument Object Model oder kurz DOM.

XML für Slideshow

141

Auch die Befehle, Funktionen, Eigenschaften zur Ma-nipulation 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 Bil-des.

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 wei-tere 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(); }

Anhänge: XML für Slideshow

142

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.

2. 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.

3. 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.

5. 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.

6. 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!

20 Ausblick

129BAusblick: XML für Slideshow

143

Anhänge: Literatur

144

20.1 Literatur

HARRIS (2004): How Web Animation Works. http://computer.howstuffworks.com/web-animation.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

Anhänge

Anhänge: Abbildungsverzeichnis

145

20.3 Abbildungsverzeichnis

Abbildung 1: Beispiel Flash-Movies: Stern als Standbild, Stern als einfach Animation 6 Abbildung 2: Dateigrößen der Flash-Movies in Abbildung 1 im Vergleich zu gif und jpg 6 Abbildung 3: Stern, skaliert 7 Abbildung 4: (historisches) Beispiel für eine „Bild-für-Bild“-Animation 8 Abbildung 5: Rollover-Bild als Beispiel für einfache Interaktion 9 Abbildung 6: Javascript Fehlermeldungen 10 Abbildung 7: HTML-Dokument und DOM, dargestellt im Firefox DOM Inspector 10 Abbildung 8: Autocomplete Eingabefeld mit script.aculo.us 11 Abbildung 9: FLVPlayback Komponente 13 Abbildung 10: Die Teile der Flash GUI 14 Abbildung 11: Füllung markiert vs. Kontur markiert 16 Abbildung 12: Die Füllung hat einen Teil der Kontur gelöscht 16 Abbildung 13: der rechte Kreis wurde mit dem Objektzeichnungsmodell gezeichnet 16 Abbildung 14: Kontur verformen mit dem Auswahl-Werkzeug 17 Abbildung 15: Kontur glätten bzw. begradigen 17 Abbildung 16: Kontur mit Ankerpunkten und Tangenten bearbeiten 17 Abbildung 17: Tintenfass- und Farbeimer-Werkzeug 18 Abbildung 18: Kontur und Füllung (konvertiert), Verformung beider 18 Abbildung 19: Text, einmal geteilter Text, zweimal geteilter Text, veränderte Form des Texts 19 Abbildung 20: Bitmap, Detail, Vektor-Nachzeichnung dieses Details 20 Abbildung 21: Film wird exportiert, GUI für den Wechsel zurück zum Editor 21 Abbildung 22: Kommunikation zwischen Webbrowser (mit und Flash Player) und Webserver 22 Abbildung 23 Bearbeitung des eingebundenen Flash-Films in Dreamweaver 22 Abbildung 24: Skalierung des Flashfilms bei der Einbindung in die Webseite 23 Abbildung 25: Ebenen 25 Abbildung 26: Effekt einer Maske 26 Abbildung 27: Erstellen einer Maske 27 Abbildung 28: Beispiel für einen Film mit wiederholten Elementen 28 Abbildung 29: Größe von swf-Dateien im Vergleich bei Verwendung von Formen oder Symbolen 28 Abbildung 30: Dialog „in Symbol konvertieren“ 29 Abbildung 31: Original und Instanz eines Symbol, beide ausgewählt 29 Abbildung 32: Symbolnamen und Instanznamen in den Eigenschaften und im Film-Explorer 30 Abbildung 33: Das Bibliotheks-Fenster 30 Abbildung 34: Bearbeiten des Dokuments vs. Bearbeiten des Symbols „Stern“ 31 Abbildung 35: Eine Veränderung des Symbols verändert alle Instanzen 31 Abbildung 36: Arbeiten mit einer fremden Bibliothek 32 Abbildung 37: Dialog zum Bibliothekskonflikt – Symbol mit gleichem Namen wird eingefügt 32 Abbildung 38: Zeitleiste ohne Zeit und mit Zeit 33 Abbildung 39: Beispiele für Schlüsselbilder, leere Schlüsselbilder und normale Bilder 34 Abbildung 40: Das Ende der Zeit – in zwei Ebenen der Zeitleiste 34 Abbildung 41: Zeitleiste einer Bild-für-Bild Animation 35 Abbildung 42: Erstellung einer Bild-für-Bild Animation mit Hilfe der Zwiebelschalen-Darstellung 36 Abbildung 43: Bild-für-Bild Animation aus Einzelbildern eines Videos 36 Abbildung 44:Bewegungstween 37 Abbildung 45: Erstellung eines Tweens 37 Abbildung 46: Darstellung von korrektem und defektem Tween 38 Abbildung 47: Bewegungstween mit veränderter Helligkeit und Skalierung 38 Abbildung 48: Bewegungstween mit mehreren Schlüsselbilder, Bewegungstween entlang eines Pfades 39 Abbildung 49: Das Symbol wird am Pfad angebracht 40 Abbildung 50: Werkzeuge, Bühne, Eigenschaften eines Bewegungstween mit Drehung 40 Abbildung 51: Zwischen-Schlüsselbider zur Steuerung der Geschwindigkeit in einem Bewegungstween 41 Abbildung 52:Formtween, defekter Formtween 41 Abbildung 53: Ein MovieClip in der Bibliothek 42 Abbildung 54: Bewegung der MovieClip Instanz auf der Hauptbühne (Hauptzeitleiste) 43 Abbildung 55: Zeitleiste im MovieClip 43 Abbildung 56: Hauptzeitleiste und Zeitleiste des MovieClips symbolisch überlagert 44 Abbildung 57: Bild-für-Bild Animation wird zu einem MovieClip 45 Abbildung 58: Standard-Buttons von Windows, Mac OS X, Gnome (Linux) 46 Abbildung 59:Aktiver Bereich eines Buttons gleich sichtbarer Bereich 47 Abbildung 60: Drei Buttons mit Überlappung, nur eine ist jeweils aktiv 47 Abbildung 61: Aktiver Bereich eines Buttons, der sich vom sichtbaren Bereich unterscheidet 48 Abbildung 62: Wiederverwendung eines Buttons mit verschiedenen Beschriftungen 48 Abbildung 63: Importierte Sounddatei in der Bibliothek 50 Abbildung 64: Audio in der Zeitleiste 50 Abbildung 65: Eigenschaften einer Audio-Datei auf der Bühne 51 Abbildung 66: Einstellungen für Veröffentlichungen: Audio-Qualität 51

Anhänge: Abbildungsverzeichnis

146

Abbildung 67: Eigenschaften und Parameter eine Komponenten-Instanz 52 Abbildung 68: Skins für den FLVPlayer 52 Abbildung 69: Fenster VERHALTEN erzeugt auch Actionscript, siehe Fenster AKTIONEN 56 Abbildung 70: AKTIONEN-Fenster mit Werkzeugleiste und Skript-Navigation 57 Abbildung 71: Tooltipps im AKTIONEN-Fenster 57 Abbildung 72: Flash-Hilfe zum Befehl on() 58 Abbildung 73: Actionscript auf Bildern der Zeitleiste oder auf Instanzen auf der Bühne 59 Abbildung 74: Der Skriptnavigator 60 Abbildung 75: Beispiele für zulässige und unzulässige Namen 61 Abbildung 76: Fehlermeldung 62 Abbildung 77: Gezieltes Ansteuern des Fehlers mit dem Film Explorer 63 Abbildung 78: Ein Button als Link zu einer anderen Webseite 66 Abbildung 79: Erstellen eines Links mit dem Verhalten-Fenster 66 Abbildung 80: Actionscript Code der durch das Verhalten erstellt wurde 67 Abbildung 81: Drag and Drop mit Verhalten 68 Abbildung 82: Hauptfilm mit mehreren Buttons mit denen weitere Filme geladen werden 69 Abbildung 83: Filme wird angehalten, und über Buttons wieder gestartet 70 Abbildung 84: Aktion am Bild Nummer 11: stop(); 70 Abbildung 85: Actionscript beim Loslassen des Buttons 71 Abbildung 86: Eine Story mit zwei alternativen Enden 72 Abbildung 87:Namen für einzelne Bilder in der Zeitleiste 72 Abbildung 88: Flussdiagramm für den Film mit Verzweigung 74 Abbildung 89: Zeitleiste des MovieClips als Handlungs-Repertoire 77 Abbildung 90: Eine Handlung 77 Abbildung 91: Drei Variablen, als Schachteln dargestellt 79 Abbildung 92: statisches und dynamisches Textfeld 82 Abbildung 93: Puzzle das die Punkte und Versuche mitzählt 84 Abbildung 94: Sechs Instanzen 85 Abbildung 95: Preloader mit Fortschritts-Balken 86 Abbildung 96: Download simulieren 87 Abbildung 97: Linien mit Actionscript gezeichnet 90 Abbildung 98: Kurve die mit curveTo gezeichnet wurde (und Kontrollpunkt) 91 Abbildung 99: Zwei verschiedene Füll-Farben 91 Abbildung 100: Drei Rechtecke auf der Flash Bühne mit Koordinaten 92 Abbildung 101: Farbauswahl für ein Teil eines MovieClips 94 Abbildung 102: Zufalls-Muster 99 Abbildung 103: Gewünschtes Ergebnis: 7 mal 4 Kreuze 102 Abbildung 104: MovieClip für ActionScript exportieren 106 Abbildung 105: Name und Position der Tapeten-Stücke in 2 Dimensionen 108 Abbildung 106: Schrittweiser Aufbau einer Zeichnung 113 Abbildung 107: Neu-Aufbau einer Zeichnung 114 Abbildung 108: Bewegungsvektor, vorher, nachher 116 Abbildung 109: Bewegungsvektoren beim Abprallen 116 Abbildung 110: Ball hat Koordinate _x=0 117 Abbildung 111: die zwei Varianten von hitTest 118 Abbildung 112: Darstellung der ID3-Tags in Windows Explorer 120 Abbildung 113: Video Player mit der FLVPlayback-Komponente 124 Abbildung 114: Google führt URL-Codierung durch 125 Abbildung 115: Glückskeks und Quiz (Design Majometano) 126 Abbildung 116: Array, als Reihe von Schachteln dargestellt 127 Abbildung 117: Array, als nummeriert Reihe von Schachteln dargestellt 128 Abbildung 118: Array das MovieClip-Instanzen enthält 130 Abbildung 119: Ein Element aus einem Array löschen mit splice 130 Abbildung 120: Ein Element an ein Array anfügen mit push 131 Abbildung 121: Schrift für ein dynamisches Textfeld einbetten 131 Abbildung 122: Quiz: Zeitleiste mit Abschnitten init, frage, richtig, falsch, ende 133 Abbildung 123: Kommuikation zwischen Webbrowser, Webserver und Flash Player, Webserver 137 Abbildung 124: Darstellung von XML-Daten im Webbrowser Firefox 140 Abbildung 125: Darstellung der XML- Struktur als Baum 140 Abbildung 127: Gewünschtes Ergebnis: 7 mal 4 Kreuze 163

Anhänge: Index

147

20.4 Index

3d 39 Abspielkopf 33 Abstraktion

mit Funktionen 92 Actionscript 55

auf einem Bild 70 auf einem Button 71

Actionscript 2 55 Actionscript 3 55 Adobe 5 AIFF 50 Aktionen-Fenster 55 Aktiver Bereich 47 Alpha

verändern mit Tween 36 Anführungszeichen

für Strings 73 animiertes Gif 8 Argument

einer Funktion 93 Array 124

mit MovieClips 128 asynchron 136 attachMovie() 103 attributes 139 auditiv 9 aufrufen

eine Funktion ... 93 auskommentieren 63 Austausch von Daten 32 Auswahlwerkzeug 17 Automatische Codeformatierung 55 Bewegung

mit Bewegungstween 37 Bézierkurve 91 Bibliothek 30 Bild

mit Actionscript 70 Bilder importieren 20 Bildname 73 Bildrate 33 Bitmap Nachzeichnen 20 boolescher Wert 75 Braille 9 Bühne 14 Button 46

Größe 47 mit Actionscript 71

childNodes 139 Code-Block 71 CSS 9 curveTo 91 Darstellung mit Zwiebelschalen 35 defekter Bewegungstween 38 definieren

eine Funktion ... 93 Design

Generatives 90 Document Object Model 138 Dokumentation 133 DOM 10, 138 Drag and Drop 67 Drehung 40

verändern mit Tween 36 droptarget 84 dynamischen Textfeld

Schrift einbetten 129 Ebene 25 Eigenschaften 14 Einbetten 129 Ende der Zeit 34 Endlos-Schleife 99 eval 85 exportieren 21 F9 55 false 75 Farbe

beim Zeichnen einer Linie 90 beim Zeichnen mit lineTo und curveTo 90

Farbeimerwerkzeug 18 Faulheit 98 Fehlersuche 61 Film-Explorer 60 Fireworks 8 firstChild 139 Formtween 41 Frame 33 Framename 73 Frames pro Sekunde 110 Füllung 15 Funktion 92 Geltungsbereich

von Variablen 83 Generatives Design 90 Geschwindigkeit

eines Bewegungstweens 41 gotoAndPlay() 72 Grafiken importieren 20 Grafiksymbol 43 Größe

eines Buttons 47 verändern mit Tween 36

Gruppieren 19 Hintergrundfarbe

der Bühne 23 HTML 8

Flash einbetten 21 Variable an Flash übergeben 121

ImageReady 8 include 57 Index 125 Initialisierung 80 Instanz

eines Symboles 29 erzeugen mit Actionscript 103

Instanznamen 30 interaktiv 8 Javascript 9 keyPress 78 Kommentar 59, 63 Konkatenation 81 Kontur 15 Kurve 91 Langsamer machen 35 leeres Schlüsselbild 34 lineStyle 90 lineTo 90 Linien in Füllungen konvertieren 18 Link 66 load

LoadVars 136 loadMovie() 69, 110

Anhänge: Index

148

LoadVars 136 Manipulation der DOM 139 Maske 26 moveTo 90 MovieClip 43

in einem Array 128 MP3 50 Multimedia 12 Name

für einen Frame 73 Objektzeichnungsmodell 16 on (keyPress ..) 78 on (press) 71 on (release) 71 on (rollOver) 71 onEnterFrame 110 onLoad

LoadVars 136 Original 28 Pfad 39 Pfadebene 40 play() 70 Plugin 22 PNG 20 press 71 Registrierungspunkt

für Pfadanimation verwenden 40 Registrierungs-Punkt 29 release 71 rollOver 71 Rollover-Bild 9 Schaltfläche 46 Schleife 98, 126

Endlos- 99 Schloss 26 Schlüsselbild 34

leer 34 mit Inhalt 34

Schneller machen 35 Schrift einbetten 129 skalierbar 6 Skalieren 23 Skript-Navigator 60 SMIL 13 Sound-Ereignis 50 Sperren

einer Ebene 26 stop() 70 stopDrag() 84 Streaming

Audio 50 Video 51

String 73 String-Konkatenation 81 swf-Datei

erzeugen 21 Symbol 28 Tangente 17 target 67 Tastaturkürzel

für die Zeitleiste 35 für Werkzeuge 19

Teilen 19 testen 21 Text teilen 19 Textfeld

Schrift einbetten 129 Tintenfasswerkzeug 18 Tooltipps 55

im Aktionen-Fenster 57 trace() 63, 64 Transformation-Punkt 29 Transformationspunkt

für Drehung verwenden 40 Transparenz

verändern mit Tween 36 true 75 Tween

Probleme bei Bewegungstween 38 Probleme bei Formtween 42

unloadMovie() 69 URL-Codierung 123 Variable 79 vektorbasiert 6 Verhaltensweisen 55 Verzerrung 23 Video Streaming 51 Vorschau für Veröffentlichung 21 Wahrheits-Wert 75 WAV 50 Webbrowser 22 Werkzeug 14 Werkzeugleiste

für Aktionen 55 while-Schleife 98 Wiederverwertung

von Buttons 48 Zeichenketten 81 Zeitleiste 33

mit Actionscript steuern 72 Zufall 124 Zufällig 124 Zuweisung 80 Zwiebelschalen 35

Anhänge: Lösungen zu Kapitel 541H 9

149

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?

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

MovieClip-Instanz

DummyBtn

Name eines Button-Symbols

mc_ball Zweiter Ball MC

Leerzeichen im Na-men verboten!

8ung_txt

Zahl am Anfang verboten!

anzahlBälle

Variable

grünerBall_mc

MovieClip-Instanz.

Player_mc

ball_mc_2 home_btn

Button-Instanz

BallMC

Name eines Movie-Clip-Symbols

ausgabe_txt

Textfeld-Instanz

weiter_btn, ist eine Instanz von DummyBtn

Das auslösende Er-eignis: UserIn lässt den Button los

Der Befehl lautet: steuere ein bestimmtes Bild im MovieClip an – in Action-script: gotoAndPlay

Der Befehl lautet: steuere ein bestimmtes Bild im MovieClip an – in Action-script: gotoAndPlay

weiter_btn, ist die Instanz

Das auslösende Er-eignis: UserIn lässt den Button los


150

Lösung 15) Wiederholung Flash: Was bewirken folgende Tastatur-Befehle?

Strg + Mehrfach-Selektion Alt-F3 Fenster Film-Explorer

Z Lupe Shift-F12 Veröffentlichen

T Textwerkzeug F11/Strg-L Fenster Bibliothek

A Unterauswahl F8 In ein Symbol verwandeln

Strg-Enter Ganze swf-Datei Testen F5 Normales Bild in Zeitleiste einfügen

E Eraser = Radiergum-mi

F6 Schlüsselbild in Zeitleiste einfügen

F9 Aktionen Fenster Strg-B (Text) teilen

B Pinselwerkzeug F7 Leeres Schlüsselbild einfügen

Übung 4) Wiederholung Flash-Basics: Was unterscheidet Form-Tween und Bewegungs-Tween?

Form- Tween

Bewegungs-Tween

Mit diesem Tween kann man die Farbe ändern X

Mit diesem Tween kann man etwas quer durchs ganze Bild bewegen

X

Dieser Tween funktioniert nur mit Symbolen X

Dieser Tween funktioniert nicht mit Symbolen X

Mit diesem Tween kann man die Größe ändern. X

Mit diesem Tween kann man einen Buchstaben in einen Stern verwandeln

X

Mit diesem Tween kann man einen Stern im Uhrzeiger-sinn drehen.

X

Dieses Tween braucht weniger Speicherplatz X


151

Lösung 5) Wiederholung Flash-Basics: Die Anzeige im Flash-Editor stellt verschiedene Arten der Selektion verschieden dar. Was ist jeweils selektiert?

Nic

ht s

elek

tiert

, kei

ne

Info

rmat

ion!

Ori

gina

l For

m,

Nur

die

Kon

tur

sele

k-tie

rt

Ori

gina

l For

m,

Nur

die

Fül

lung

sel

ek-

tiert

Ori

gina

l For

m, K

ontu

r un

d Fü

llung

sel

ektie

rt

Gru

ppie

rt,

Gru

ppe

ausg

ewäh

lt

Sym

bol

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 Schrift-art 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 Action-script, und zwar auf Bild 20. In der Ebe-ne Arm1 befinden sich zwei bewe-gungstweens, von Bild 1 bis 10, und von Bild 10 bis 20. (Diese Bilder sind jeweils Schlüsselbilder). In der Ebene Rock befin-den 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üssel-bilder bei 1, 7, 10, keine Tweens, sonst also nur normale Bilder. ….


152


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", "tool-bar=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 normaler-weise (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.


153


Lösung 15) Siehe spielfigur-steuerung-und-tastatur.fla

Lösung 16) Siehe brigittes-maschine.fla


154


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 ); // 202

2 a = 10; b = 20; c = a * ( b + 2 ); trace( c ); // 220

3 a = "Hallo"; b = "Brigitte"; trace( a + b ); // HalloBrigitte

4 a = "Hallo"; // Hallo Bri-gitte b = "Brigitte"; trace( a + " " + b );

5 b = "Brigitte"; b = "Hansi"; trace( b ); // Hansi

6 a = 10; b = 20; b += 2; c = a * b; trace( c ); // 220

7 a = 10; b = 20; a = b; b = a; trace("a ist jetzt " + a); trace("b ist jetzt " + b); // a ist jetzt 20 // b ist jetzt 20

8 a = 10; b = 20; c = a; a = b; b = c; trace("a ist jetzt " + a); trace("b ist jetzt " + b); // a ist jetzt 20 // b ist 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");


155

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);

B a = 10; b = 20; c = a * ( b + 2 ); trace(c);

C a = "Hallo"; b = "Brigitte"; trace( a + " " + b );

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 Zuweisungsopera-tors 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

Lösung 23) Folgende Programme geben keine Fehlermeldung – trotzdem sind sie falsch. Was ist das Problem?

A a = Hallo; b = Brigitte; trace( a + " " + b );

Anführungszeichen vergessen a = "Hallo"; b = "Brigitte"; trace( a + " " + b );

B gotoAndPlay(2000); So viele Bilder gibt’s gar nicht! Flash gibt keine Fehlermeldung

gotoAndPlay(20);

C keinobjekt._x = 100; Wenn ein Objekt dieses Namens nicht existiert gibt das keine Feh-lermeldung!

richtiges_mc._x = 100;

Verkehrt: a=10;

Semikolon/Strichpunkt vergessen: a=10; b=20;


156

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 );

Gar keine Ausgabe (Bedingung nicht erfüllt)

10 bis 20

3 a = 10; b = 20; c = 30; if ( a+b == c ) { trace(c); }

4 a = 10; b = 20; c = 40; if ( a+b == c ) { trace(c); }

30 Gar nix

5 max = 5; name = "Brigitte"; len = length( name ); if ( len > max ) { trace("Name zu lang"); } else { trace("-----"); trace(name); trace("-----"); }

6 max = 5; name = "Hansi"; l = length( name ); if ( l > max ) { trace("Name zu lang"); } else { trace("-----"); trace(name); trace("-----"); }

Name zu lang ----- Hansi -----

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") }

8 a = 12; trace("Alter: " + a); if ( a > 18 ) { trace("ok"); } else if ( a > 10 ) { trace("mit Begleitung") } else { trace("gar nicht!") }

(Falsche Logik!) Alter: 12 Gar nicht!

Alter: 12 In Begleitung

9 x = 3; max = 13; breite = 5; if ( x + breite > max ) { trace("autsch!"); x = max; } else { trace("ok"); } trace("Neues x: " + x);

x = 10; max = 13; breite = 5; if ( x + breite > max ) { trace("autsch!"); x = max - breite; } else { trace("ok"); } trace("Neues x: " + x);

Ok Neues x: 3

autsch! Neues x: 8

Anhänge: Lösungen zu Kapitel 551H 13.1

157

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 Stage-Objekts.

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 Sta-ge-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 Halb-kreis 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 Kontroll-punkt 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 fol-gender 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);


158

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):


159

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); }


160

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 Funkti-on

kreuz(mc, 100, 10); kreuz(mc, 20, 300); kreuz(mc, 40, 40);


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); }

Zweite Lösung (Diagonale)

x = 0; rect(0, 0, 200, 200); while (x <= 200) { moveTo(x, 0); lineTo(200, 200 - x); x = x + 10; }

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; }


161

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 waag-rechte 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; }


162

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 zeich-net 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?


163

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:

x = 40; while (x <= 7 * 40) { y = 40; while (y <= 4 * 40) { kreuz(mc, x, y); y += 40; } x += 40; }

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; }

Variante mit Funktion, rechts wieder mit mehr Variablen um das Programm leichter zu verändern:

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; }

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; }


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;


164

}

Lösung 50) Stimmen folgende Aussagen?

Richtig Falsch

attachMovie("xMC", "x", 1); fügt das MovieClip zur Ebene 1 hinzu

X

_level1.attachMovie("xMC", "x", getNextHighestDepth()); fügt das MovieClip zur Ebene 1 hinzu

X

attachMovie hat gar nichts mit den Ebenen die im Flash-Editor sichtbar sind zu tun.

X

Übung 49) Erstellen Sie einen funkelnden Stern als MovieClip. Schreiben Sie ein Pro-gramm, 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++; }


165


Lösung 62) Was geben diese Programme mit Arrays aus?

1 a = Array(42,13,23); trace( a ); // 42,13,23

2 a = Array(42,13,23); b = a[0] + a[1]; trace( b ); // 55

3 a = Array(42,13,23); a[1] = a[0]; b = a[0] + a[1]; trace( b ); // 84

4 a = Array(stern_mc, herz_mc); a[0]._x = 10; a[1]._x = a[0]; trace(a[1]._x); // 10

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 ); // 1,1,2,3,5

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

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!

B a = Array(42,13,23); b = a + a[1]; trace( b ); // Ein Array kann man nicht addieren!

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

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

Documents

Fash und Actionscript 2.0