Selbstlernmodule in Macromedia Flash. Wintersemester 05/06 Peter Huppertz

Transkript

1 Selbstlernmodule in Macromedia Flash Wintersemester 05/06 Peter Huppertz

2 Arbeitsumgebung... 3 Aufbau... 3 Verhalten der Unterfenster... 3 Verschieben, An- und Abdocken... 3 Zu- und Aufklappen... 4 Entfernen und Hinzufügen... 4 Wichtige Bestandteile... 5 Bühne... 5 Werkzeugleiste... 5 Zeitleiste...6 Arbeiten mit der Zeitleiste... 7 Eigenschaftenfenster... 7 Importieren von Dateien... 8 Erstellen von Zeichnungen... 8 Erstellen von Text... 8 Umwandeln von Objekten in Symbole... 8 Bibliothek, Symbole und Instanzen... 8 Actionscript... 9 Beispielscripts... 9

3 Arbeitsumgebung Aufbau Die Arbeitsumgebung von Macromedia FlashMX gliedert sich in viele Unterfenster deren Größe und Anordnung sich flexibel anpassen lässt. In Abbildung 1 ist die Standardkonfiguration dargestellt. Für die ersten Schritte sind lediglich die Zeitleiste, die Bühne, das Eigenschaften Fenster und die Werkzeugleiste von Bedeutung. Die Anderen Fenster wie Aktionen, Verhalten und Komponenten werden erst für interaktive Flashfilme benötigt. Also dann, wenn es darum geht, dass der Benutzer selbst, in den Ablauf des Filmes mit eingreifen können soll. Abbildung 1 Verhalten der Unterfenster Um die Anordnung der Fenster in Macromedia FlashMX zu verändern, stehen dem Benutzer mehrere Werkzeuge zur Verfügung. Verschieben, An- und Abdocken Über den Anfasser am linken oberen Eck jedes Unterfensters lassen sich diese mit der linken Maustaste beliebig auf der Arbeitsfläche verschieben. Abbildung 2

4 Während diese gedrückt ist, zeigt ein schwarzer Balken an, an welcher Stelle das Fenster angelegt würde. Ist dieser Balken nicht zu sehen so befindet sich das Unterfenster in einem Bereich indem es nicht angedockt werden kann. Lässt man den Anfasser in einem solchen Bereich los, so wird das Fenster von der Arbeitsfläche abgedockt und lässt sich frei auf dem Monitor verschieben. Zu- und Aufklappen Unterfenster lassen sich im an- und abgedockten Zustand auf- und zuklappen. Meist benötigt man nur eines der Unterfenster und kann dadurch Platz für die schaffen, die gerade benötigt werden. Dazu klickt man mit der Linken Maustaste auf den Namen des Unterfensters. Bei jedem Klick ändert es seinen Zustand und klappt auf oder zu. Abbildung 3 Benötigt man einmal mehr Platz, und möchte nicht erst alle Unterfenster einzeln zuklappen, hilft der Button am unteren Rand der Bühne weiter. Hier lässt sich mit einem Klick der Abbildung 4 komplette Untere Bereich minimieren. Dies ist zum Beispiel dann sinnvoll wenn man längere Arbeiten mit Zeichenwerkzeugen durchführen möchte und den Platz für deren Ansicht und zum hineinzoomen benötigt. Entfernen und Hinzufügen Braucht man spezielle Fenster für längere Zeit nicht, so kann man diese auch ganz von der Arbeitsfläche verbannen. Dazu erhält man über die Menüleiste und den Menüpunkt Fenster eine Übersicht aller Unterfenster und erfährt durch Häkchen- Symbole ob diese entfernt sind oder gerade angezeigt werden. Abbildung 5

5 Wichtige Bestandteile Bühne Wie in Abbildung 1 zu sehen steht die Bühne im Zentrum der FlashMX Umgebung. Hier spielt die Musik, hier werden die Objekte erstellt, angeordnet und verändert und dieser Bereich wird später nach allen Probedurchläufen als fertiger Flashfilm exportiert. Die Bühne ist in der Arbeitsumgebung von der Zeitleiste und somit von einer räumlichen und zeitlichen Komponente abhängig. Das heißt sie stellt die Inhalte dar, die in der ausgewählten Ebenen (oder den Ebenen) zu ausgewählten Zeit sichtbar sind. Werkzeugleiste Über die Werkzeugleiste lassen sich, die verschiedenen Werkzeuge auswählen. Sie sollte deshalb immer gut erreichbar sein. Neben verschiedenen Auswahlwerkzeugen, sind vielseitige Zeichenwerkzeuge verfügbar, die FlashMX zu einem mächtigen Vektorzeichenwerkzeug machen. Hier lassen sich auch die Farben für das Linien, und Flächenfüllwerkzeug festlegen. Der sich am unteren Teil der Werkzeugleiste befindende Abschnitt Optionen ändert sich je nach dem welches Werkzeug ausgewählt wurde und die zum Werkzeug gehörenden Optionen dar. Auswahlwerkzeug: Dieses Werkzeug ist ganz wichtig im Umgang mit Flash. Wie bei jedem anderen Programm auch, muss der Benutzer dem Programm zuerst einmal mitteilen welches Element er denn bearbeiten möchte. Dies kann er wenn dieses Werkzeug ausgewählt wurde tun in dem er entweder mit der gedrückten linken Maustaste ein Rechteck aufzieht (alles was in diesem Rechteck liegt wird markiert, siehe Abb.6), oder er kann gezielt einzelne Objekte mit einem Klick auswählen (Abb.7). Das Symbol des Auswahlwerkzeugs-Mauszeigers ändert sich dabei je nachdem über welcher Art von Objekt er sich befindet. Meist besteht ein Objekt bei Flash aus einer Fläche Abb. 6 und einer Umrisslinie. Befindet sich der Mauszeiger über einer nicht ausgewählten Linie so erscheint das Kurvensymbol wie in Abbildung 6 zu sehen. Der Benutzer kann nun mit gedrückter Maustaste die Krümmung der Linie beliebig verändern. Sobald er die Maustaste wieder loslässt bleibt die Linie und die Füllung des Objekts die an die Umrisslinie gekoppelt verändert ihre Form entsprechend. Dies ist die einfachste Art und Weise die FlashMX für die Bearbeitung von Abbildung 7 Kurven bietet. Jedoch reicht diese nicht immer aus. Für komplexere Kurven bietet sich das Unterauswahlwerkzeug an, das weiter unten noch beschrieben wird. Mit einem einfachen Klick auf die Linie kann der Benutzer diese auswählen und wenn gewünscht verschieben. Dazu einfach mit der linken Maustaste auf die Linie klicken. Danach wie in Abbildung 6 zu Sehen den Mauszeiger über die markierte Linie bewegen, sodass das Pfeilkreuz-Symbol erscheint. Jetzt die Linie mit gedrückter linker Maustaste verschieben. Ist die Linie ausgewählt, können auch über das Eigenschaftenmodul auch die Linienart, - stärke und Farbe verändert werden.

6 Unterauswahlwerkzeug: Mit diesem Werkzeug lassen sich bestehende Kurven, als Bezier-Kurven bearbeiten. Klickt man mit diesem Werkzeug auf eine bestehende Kurve, so wird die gesamte Umrisslinie mit der diese direkt verbunden ist aktiviert. FlashMX blendet in diesem Modus Linienart, -stärke und Farbe aus und stellt in einer kontrastierenden Farbe auch Linienteile dar, die im Normalmodus durch überschneidende Elemente gleicher Farbe verdeckt werden. Durch einen Linksklick auf den Start- oder Endpunkt einer Kurve wird ein Bezier Anfasser sichtbar über den man die Kurve beliebig in eine Richtung verzerren kann. Linienwerkzeug: Mit diesem Werkzeug lassen sich wie der Name schon vermuten lässt, Linien zeichnen. Sobald es ausgewählt wurde, kann man über das Eigenschaften Fenster weitere Einstellungen vornehmen und die gewünschte Linienbreite und art festlegen. Textwerkzeug: Auch bei diesem Werkzeug können über das Fenster Eigenschaften, nach der Werkzeugwahl noch weitere Einstellungen vorgenommen werden. Mit einem einfachen Linksklick in die Bühne wird dann die Stelle markiert, an der der Text beginnen soll. Es muss nur noch der Text eingegeben werden. Will man ein Textfeld, in dem der Text nach einer bestimmten Textbreite automatisch umgebrochen wird, so erreicht man das indem man nach dem Klick mit der Linken Maustaste nicht loslässt, sondern mit gedrückter Maustaste ein Feld der gewünschten Größe aufzieht. Freihandwerkzeug: Wer eine komplexe Linienform schnell erzeugen möchte, für den ist das Freihandwerkzeug die richtige Wahl. Wie mit einem Bleistift lassen sich hier Linien erzeugen denen dann mit dem Stift, und Unterauswahlwerkzeug ein letzter Feinschliff verpasst werden kann. Pinselwerkzeug: Ähnlich wie beim Freihandwerkzeug lassen sich mit dem Pinselwerkzeug schnell und intuitiv Formen erzeugen. Die mit dem Pinselwerkzeug gemalten Formen sind allerdings Flächen und unterscheiden sich somit von den mit dem Freihandwerkzeug gezeichneten Formen. Frei Transfomieren: Dieses Werkzeug ermöglicht das Skalieren von Grafiken, Text, etc. Wählen Sie das Werkzeug und anschließend das zu transformierende Objekt. Dieses erhält nun an äußeren Kanten sog. Anfasser an denen Sie es skalieren mit gedrückter linker Maustaste skalieren können. Halte Sie die Hochstelltaste gedrückt, um das Objekt proportional zu ändern, halten Sie die Alt-Taste gedrückt, um das Objekt von der Seite aus zu skalieren, von der Sie angefasst haben. Zeitleiste Die Zeitleiste ist ein sehr wichtiges Fenster nicht nur wenn es um Animationen und interaktive Elemente geht. Hier findet auch die Organisation der Ebenen statt. Ebenen kann man sich vorstellen wie durchsichtige Folien die übereinander liegen. Sie können jede Art von Elementen enthalten. Text, Zeichnungen und selbst andere Flashfilme. Über die Zeitleiste lassen sich diese vorübergehend ein-/ausblenden (Augensymbol). Außerdem kann man einzelne Ebenen durch das Schlosssymbol für die Bearbeitung sperren. Das ist vor Allem dann hilfreich, wenn man sich in dem Bereich den man bearbeiten möchte, mehrere Ebenen überschneiden und man sichergehen möchte, dass man nur die

7 gewünschten Inhalte bearbeitet. Hier gibt es auch die Möglichkeit, sich lediglich die Konturen der Inhalte anzeigen zu lassen. Dies kann helfen Inhaltselemente auszumachen, die von anderen überschnitten werden. Bei komplexen Flashfilmen ist es sinnvoll, von den Ebenenordnern Gebrauch zu machen um mehr Ordnung in die Fülle von verschiedenen Ebenen zu bringen. Die Rote Markierung verdeutlicht welcher Zeitpunkt gerade in der Bühne angezeigt wird. Klickt man auf der Zeitleiste in das rote Rechteck dieser Markierung so kann man bei gedrückter Maustaste bequem zwischen die Zeitpunkten hin- und herspulen. Arbeiten mit der Zeitleiste In der Zeitleiste wird die Abfolge des Erscheinens von Objekten in einem Flashfilm festgelegt. Sie können dies mit einem tatsächlichen Film vergleichen. So erscheinen Dinge, die Sie in Bild 1 der Zeitleiste anordnen (gewöhnlicher Weise) ganz zu Beginn, Dinge, die Sie im Bild 100 anordnen dagegen erst später. Flash kennt verschiedene Inhalte, die die Zeitleiste beheimaten kann. Schlüsselbilder: Schlüsselbilder erkennen Sie daran, dass sie als Symbol einen kleinen Kreis in der Zeitleiste haben. Schlüsselbilder verwenden Sie immer dann, wenn sich der Inhalt der betroffenen Ebene zu einem bestimmten Zeitpunkt ändert. Wenn Sie beispielsweise einen Text in Bild 1 zeigen und in Bild 2 einen anderen Text zeigen möchten fügen Sie in Bild 2 ein neues Schlüsselbild ein, springen durch Anklicken des Bildes zu diesem Zeitpunkt und fügen den neuen Text dort ein. Wenn Sie nun von Bild 1 zu Bild 2 schalten sehen sie, wie sich der Inhalt verändert. Ein neues Schlüsselbild fügen Sie über Einfügen Zeitleiste Schlüsselbild ein. Bilder: Bilder verwenden Sie, wenn sie den Auftritt eines einzelnen Objekts verlängern möchten, ohne das Objekt selbst ändern zu wollen. Beispielsweise möchten Sie eine Überschrift einfügen, die ihren ganzen Flashfilm lang zu sehen ist. Damit diese Überschrift auch im weiteren Verlauf zu sehen ist, müssen sie so viele Bilder einfügen, wie ihr gesamter Flash-Film lang ist. Dies machen sie über das Menü Einfügen Zeitleiste Bild. Sie können auch einzelne oder mehrere Bilder und Schlüsselbilder löschen. Nutzen sie dafür Bearbeiten Zeitleiste Bilder entfernen. Eigenschaftenfenster Das Eigenschaftenfenster ist kontextsensitiv. Das bedeutet, dass es je nachdem, welches Objekt oder welcher Teil der Flash-Zeitleiste ausgewählt ist, verschiedene Inhalte anzeigt. Im Eigenschaftenfenster können Sie beispielsweise die Schriftart, -größe, -farbe usw. ändern, wenn Sie eine Textobjekt auf der Bühne markiert haben.

8 Importieren von Dateien Um beispielsweise externe Bild- und Tondateien in Flash verwenden zu können, müssen diese importiert werden. Die Import-Funktion ist unter Datei --> Importieren zu finden. Bei In Bühne importieren werden die Dateien direkt auf der Bühne platziert. Bei In Bibliothek importieren werden die Dateien zunächst lediglich in die Bibliothek abgelegt und können von dort aus später verwendet werden. Erstellen von Zeichnungen Zeichnungen können auch in Flash selbst erstellt werden. Dazu wählt man aus der Werkzeugleiste ein entsprechendes Werkzeug aus, beispielsweise das Ellipsenwerkzeug, das Linienwerkzeug oder auch das Rechteckwerkzeug und zieht mit gedrückter Maustaste auf der Bühne eine entsprechende Figur auf. Klickt man anschließend mit dem Auswahlwerkzeug doppelt auf die erstellte Figur kann man im Eigenschaftsfenster sowohl die Füllfarbe als auch die Linienfarbe ändern. Erstellen von Text Um Text in Flash erstellen zu können benutzt man das Textwerkzeug. Klickt man mit diesem auf die Bühne so wird ein blinkender Cursor angezeigt an dem der Text angezeigt wird, den man nun eingibt. Um die Formatierung des Textes zu ändern markiert man mit dem Textwerkzeug die entsprechenden Teile des Textes und wählt über das Eigenschaftsfenster die gewünschte Schriftart, Schriftfarbe, Schriftgröße etc. aus. Umwandeln von Objekten in Symbole Um Effekte wie Bewegungen, Größenveränderungen, Farbveränderung und ähnliches auf Objekte anwenden zu können, müssen diese zunächst in Symbole umgewandelt werden. Um ein Objekt in ein Symbol umzuwandeln markieren Sie es mit Auswahlwerkzeug und wählen Sie anschließend Modifizieren -- > In Symbol konvertieren. Nun können Sie im Eigenschaftsfenster beispielsweise Farb-Effekte auswählen. Bibliothek, Symbole und Instanzen Alle Symbole werden in der Bibliothek gesammelt. Diese öffnen Sie über Fenster Bibliothek. Alle Inhalte ihrer Bibliothek können Sie beliebig oft auf der Bühne platzieren, ohne dass dies die Größe ihrer Flashdatei wesentlich beeinflusst. Jedes Vorkommen des Symbols auf der Bühne wird als Instanz bezeichnet. Über das Eigenschaftenfenster können Sie jeder Instanz

9 einen eindeutigen Namen zuordnen, über den diese Instanz dann in Actionscript angesprochen werden kann. Jede Instanz ist selbstständig, dies bedeutet, dass Sie die beispielsweise die Größe der Instanz auf der Bühne ändern können, ohne dass dies andere Instanzen beeinflusst, bzw. das Symbol selbst beeinflusst. Andersherum haben Änderungen am Symbol zur Folge, dass alle Instanzen geändert werden. Ändern Sie beispielsweise die Farbe des Symbols, hat das Auswirkungen auf alle Instanzen. Vorsicht ist vor allem bei Größenänderungen des Symbols geboten, da dies unvorhergesehen Auswirkungen auf die Instanzen haben kann. Um ein Symbol zu bearbeiten klicken Sie doppelt auf die Instanz auf der Bühne oder aber doppelt auf das Symbol in der Bibliothek. Actionscript Damit Flash interaktiv wird benötigt man die eingebaute Programmierspache Actionscript. Actionscript ist eine Sprache, die sich von ihrem Syntax her an Javascript anlehnt. Actionscript kann man in Flash sowohl in einzelne Keyframes als auch in Symbole einfügen. Am einfachsten ist es, wenn sie alle Actionscript-Inhalte zentral in einem Extra-Keyframe auf einer Extra-Ebene der Zeitleiste eingeben. Dann behalten sie die Übersicht. Die meisten Actionscript-Befehle folgen einer einfachen Syntax. Zunächst müssen Sie angeben, welche Instanz sie ansprechen möchten. Den Instanznamen müssen sie vorher im Eigenschaftsfenster des entsprechenden Objektes angegeben haben. Beachten Sie: nur Symbole können Instanznamen haben und somit über Actionscript angesprochen werden! Der Instanzname ist dabei unabhängig vom Symbolnamen! Actionscript Befehle geben sie in das Aktionenfenster ein. Achten sie darauf, dass sie sich tatsächlich auf der Actionscript-Ebene befinden. Wenn sie verschiedene Actionscripts zu verschiedenen Zeitpunkten ausführen möchten, müssen sie diese in verschiedenen Schlüsselbildern auf der Actionscript-Ebene angeben. Beispielscripts Button.onRelease = function(){ nextframe() //Film springt beim Klick auf Button zum nächsten Bild } Button.onRelease = function(){ prevframe() //Film springt zum vorhergehenden Bild } Weitere Befehle: stop() //Film soll an entsprechendem Keyframe stoppen. play() //Film wird abgespielt gotoandplay(frame)//springt zu Frame und spielt ab dort ab gotoandstop(frame)//springt zu Frame und stoppt dort