WORKSHOP FLASH MX. Manfred Klima

Transkript

1 WORKSHOP FLASH MX Manfred Klima

2 Copyright by Mag. Manfred Klima Mag. Manfred Klima EDV-Dienstleistungen Telefonweg 265 / D4 A-1220 Wien mklima@best-edv.com 2. Auflage 01/2003 Alle Reche vorbehalten. Die Verwendung der Texte und Bilder, auch auszugsweise, ist ohne die schriftliche Zustimmung des Autors urherberrechtswidrig und strafbar. Das gilt insbesondere für die Vervielfältigung, Übersetzung, die Verwendung in Kursunterlagen oder elektronischen Systemen. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Der Autor übernimmt keine Haftung für Folgen, die auf unvollständige oder fehlerhafte Angaben in diesem Skript zurückzuführen sind. Fast alle Softwarebezeichnungen, die in diesem Skript erwähnt werden, sind gleichzeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet werden. Für Verbesserungsvorschläge und Hinweise auf Fehler ist der Autor dankbar. Mag. Manfred Klima Seite 2

3 OBERFLÄCHE 5 MENÜ- U. SYMBOLLEISTE 5 ZEITLEISTE 5 BÜHNE 6 WERKZEUGLEISTE 6 PFEILWERKZEUG 6 BEDIENFELDER 6 FLASH FILM ERSTELLEN 7 EINEN NEUEN FILM ANLEGEN 7 SPEICHERN DES FILMS 9 ERSTELLEN EINFACHER OBJEKTE 9 ERSTELLEN VON ELLIPSEN UND RECHTECKEN 9 BEARBEITEN DER OBJEKTE 9 ÄNDERN DER FÜLLFARBE 9 ÄNDERN DER RAHMENFARBE 11 ERSTELLEN EINES TEXTBLOCKS MIT VARIAB LER BREITE 12 ERSTELLEN EINES TEXTBLOCKS MIT FESTER BREITE 12 ZEICHNEN MIT DEM FREIHANDWERKZEUG 13 ZEICHNEN MIT DEM PINSELWERKZEUG 14 PIPETTE 14 RADIERGUMMI 15 ANIMATION 15 BEWEGUNGSTWEEN ERSTELLEN 15 FILM TESTEN 17 FORMTWEEN ERSTELLEN 18 FILMANSICHT 19 SYMBOLE, INSTANZEN UND DIE B IBLIOTHEK 20 GRAFIKSYMBOL 20 FILMSYMBOL 20 SCHALTFLÄCHENSYMBOL 20 EIN GRAFIKSYMBOL ERSTELLEN 21 TRANSFORMIEREN UND SKALIEREN 22 ERSTELLEN EINES SCHALTFLÄCHENSYMBOLS 23 ERSTELLEN EINES FILMSYMBOLS 26 AKTIONEN 29 FILM ANHALTEN FILM STARTEN UNSICHTBARE SCHALTFLÄCHE 33 FILM START1 34 Mag. Manfred Klima Seite 3

4 FILM INTRO 35 FILM MAUS 37 MAUSZEIGER ERSETZEN 38 FILM INSIDE 40 DIE AKTION WITH 41 FILM PRODUKTE 42 AKTION NEXTFRAME UND PREVFRAME 42 FILM NEWS 43 AKTION SET VARIABLE 44 FILM KONTAKTE 45 AKTION GETURL 46 FILM REFERENZ 46 DIE BENÖTIGTEN SCHALTFLÄCHEN 47 SOUND EINFÜGEN 47 AUSTAUSCHEN VON SYMBOLEN 48 ERWEITERTE ANIMATIONSMÖGICHKEITEN 48 MASKE ERSTELLEN SCHRITTE ZUR ERSTELLUNG EINER ANIMIERTEN MASKE: ANIMATION ENTLANG EINER FÜHRUNGSEBENE SCHRITTE ZUR ERSTELLUNG EINER ANIMATION MIT FÜHRUNGSEBENE EINFÜGEN VON FLASH-FILMEN IN EIN HTML-DOKUMENT 52 Mag. Manfred Klima Seite 4

5 Oberfläche Mit der folgenden Oberfläche werden Sie beim ersten Start von Flash MX begrüßt Im folgenden Abschnitt werden Sie die wichtigsten Bestandteile der Benutzeroberfläche kennen lernen. 1 Menü- u. Symbolleiste 2 Zeitleiste 3 Bühne 4 Werkzeugleiste 5 Bedienfelder Menü- u. Symbolleiste Die Symbolleisten können über Fenster/Symbolleisten ein- und ausgeblendet werden. Zeitleiste Die Zeitleiste enthält die Bilder eines Films. Jedes einzelne Bild eines Films befindet sich in einem Kästchen der Zeitleiste. Wenn Sie ein Kästchen in der Zeitleiste anklicken, wird das ausgewählte Bild auf der Bühne angezeigt. Am oberen Rand der Zeitleiste können Sie die Bildnummer ablesen. Das rote Kästchen in der Zeitleiste kennzeichnet das aktuelle Bild. Mag. Manfred Klima Seite 5

6 Bühne Die Bühne ist der Arbeitsbereich von Flash. In diesem Bereich können Sie die einzelnen Bilder bzw. Objekte eines Flash-Films bearbeiten. Werkzeugleiste Die Werkzeugleiste enthält alle Werkzeuge um unterschiedlichste Objekte wie z.b. Text, Linien, Kreise, Rechtecke usw. erstellen bzw. bearbeiten zu können. Symbol Werkzeug Funktion Pfeilwerkzeug Objekte auswählen, verschieben und umformen Unterauswahl-Werkzeug Punkte einer Vektorgrafik (Segmente) auswählen Linienwerkzeug Linien erstellen Lassowerkzeug Erstellen eines unregelmäßigen Auswahlrahmens Stiftwerkzeug Erstellen von Vektorgrafiken mit Kurven und Linien Textwerkzeug Erstellen von Textfeldern Ellipsenwerkzeug Erstellen von Ellipsen Rechteckwerkzeug Erstellen von Rechtecken Freihandwerkzeug Zeichnen von Linien und Formen Pinselwerkzeug Erstellen von gefüllten bzw. geschlossenen Formen Skalierungswerkzeug Skalieren und drehen von Objekten Füllungstransformation Transformieren eines Farbverlaufs oder Bitmapfüllung Tintenfasswerkzeug Ändern der Linienfarbe und stärke Farbeimerwerkzeug Ändern der Füllfarbe Pipette Auswahl einer Farbe Radiergummi Löschen von Linien und Füllungen Handwerkzeug Verschieben der Ansicht eines Zeichnung Vergrößerungswerkzeug Vergrößern der Ansicht einer Zeichnung Bedienfelder Je nachdem welches Objekt ausgewählt ist, stellen Bedienfelder unterschiedliche Optionen zur Verfügung. Bedienfelder können über Menü Fenster ein- und ausgeblendet werden. Mag. Manfred Klima Seite 6

7 Mit den Bedienfeldern können Sie sehr schnell auf die verschiedensten Eigenschaften eines Objekts zugreifen. Mit dem Bedienfeld bzw. Eigenschaftsinspektor können Sie sofort auf Eigenschaften wie Schriftart, -farbe, -grad, -ausrichtung usw. zugreifen. Mit dem Bedienfeld Linie können Sie sofort auf Eigenschafen wie Linienart, -farbe, und -stärke zugreifen. Die weiteren Funktionen der Bedienfelder werden Sie in den nächsten Abschnitten kennen lernen. Flash Film erstellen Achtung: Um einen Flash Film ohne das Programm Flash abspielen zu können, benötigen Sie einen Flash-Player. Dieser Player ist in den aktuellen Versionen der beiden Browser IE und Netscape bereits enthalten. Sollte der Player nicht installiert sein, wird das Plug-In automatisch aus dem Web installiert. Einen neuen Film anlegen 1. Klicken Sie auf das Menü Datei 2. Wählen Sie den Eintrag Neu aus. 3. Ein neuer Film wird angelegt. Ein neuer Film wird automatisch mit einer Nummer versehen (Film1) und enthält eine Ebene (Ebene1). Mag. Manfred Klima Seite 7

8 Jetzt werden die Filmeigenschaften festgelegt. 1. Öffnen Sie das Menü Modifizieren. 2. Wählen Sie den Eintrag Dokument aus. 3. Das Dialogfenster Dokumenteneigenschaften wird geöffnet. In diesem Fenster können Sie alle allgemeinen Eigenschaften eines Films festlegen. Eigenschaft Bildrate (wie viele Bilder/Sekunde abgespielt werden) Breite / Höhe Standard 12 Bilder je mehr Bilder, desto mehr Speicherplatz wird benötigt, bei einer zu geringen Bilderanzahl ruckelt der Film Folgende Werte stammen aus dem Programm Macromedia Dreamweaver: Bildschrimauflösung Fenstergröße des Browsers 1024 * * * * * * 300 Linealeinheit Als Standardwert ist Pixel eingestellt. Alle anderen Möglichkeiten können Sie über die Linealeinheit auswählen. Anpassen der Bühne Drucker Inhalt Wenn Sie die Bühnengröße auf den maximalen Druckbereich eingestellt haben, wählen Sie Drucker aus. Wenn um alle Objekte eines Film ein gleicher Abstand zum Rand bestehen soll, wählen Sie Inhalt aus. Mag. Manfred Klima Seite 8

9 Hintergrundfarbe Wählen Sie über diese Schaltfläche eine Hintergrundfarbe für Ihren Film aus. Alle Einstellungen können auch später geändert werden. Speichern des Films Öffnen Sie das Menü Datei. Wählen Sie den Eintrag Speichern aus. Ihr Film wird als Flash-Film (*.fla) abgespeichert. Achtung: Flash Filme mit der Dateikennung (*.swf) sind Flash Player Filme und können eigenständig, ohne dem Programm Flash oder eingebettet in einem anderen Dokument abgespielt werden. Zum Abspielen wird der Flash-Player benötigt. Erstellen einfacher Objekte Erstellen von Ellipsen und Rechtecken 1. Wählen Sie aus der Werkzeugleiste das Ellipsenwerkzeug aus. 2. Klicken Sie mit der linken Maustaste auf die Bühne. 3. Lassen Sie die linke Maustaste gedrückt und ziehen Sie eine Ellipse auf. 4. Wählen Sie aus der Werkzeugleiste das Rechteckwerkzeug aus. 5. Klicken Sie mit der linken Maustaste auf die Bühne. 6. Lassen Sie die linke Maustaste gedrückt und ziehen Sie ein Rechteck auf. Bearbeiten der Objekte Jedes Objekt besteht aus einem Rahmen und einer Füllung. Bei der Bearbeitung des Objekts wird daher das Farbeimerwerkzeug für die Füllung bzw. das Tintenfasswerkzeug für den Rahmen benötigt. Ändern der Füllfarbe 1. Klicken Sie das Pfeilwerkzeug an. 2. Markieren Sie die Füllung der Ellipse bzw. des Rechtecks mit der linken Maustaste. Durch Drücken der Umschalttaste können Sie sowohl die Ellipse als auch das Rechteck markieren. Mag. Manfred Klima Seite 9

10 Mit einem Doppelklick werden sowohl die Füllung als auch der Rahmen markiert. 3. Wählen Sie eine Füllfarbe aus. Weitere Farben können Sie über die Schaltfläche Farben auswählen. Weiters können Sie Farbverläufe im unteren Bereich des Fensters Füllfarbe auswählen. Wenn Sie die Schaltfläche Farben anklicken, erhalten Sie das Dialogfenster Farben angezeigt. In diesem Fenster können Sie aus dem vollständigen Farbspektrum von 16,7 Mio. Farben auswählen. Mag. Manfred Klima Seite 10

11 4. Den ausgewählten Objekten wurde eine neue Füllfarbe zugewiesen. Ändern der Rahmenfarbe 1. Wählen Sie das Pfeilwerkzeug aus. 2. Markieren Sie den Rahmen der beiden Objekte. Wenn Sie den Rahmen des Rechtsecks markieren, wird mit einem einfachen Mausklick nur eine Seite des Rechtecks markiert, mit einem Doppelklick werden alle Seiten des Rechtecks markiert. Mehrere Objekte können mit der Umschalttaste markiert werden. 3. Wählen Sie eine Zeichenfarbe aus. Die weiteren Möglichkeiten der Farbauswahl funktionieren analog zum Ändern der Füllfarbe möglich. 4. Die Rahmenfarbe wurde geändert. Mag. Manfred Klima Seite 11

12 Erstellen eines Textblocks mit variabler Breite 1. Wählen Sie das Textwerkzeug aus. 2. Klicken Sie mit der linken Maustaste in den Arbeitsbereich. 3. Ein Textblock wird angezeigt. 4. Sie können einen Text eingeben. Sie werden sehen, dass mit der Eingabe des Textes der Textblock größer wird. Sie haben einen Textblock mit variabler Breite erstellt. Es wird kein automatischer Zeilenumbruch durchgeführt. Ein Absatz kann manuell durch Drücken der Entertaste erstellt werden. Sie erkennen einen variablen Textblock am Kreis in der rechten oberen Ecke des Textblocks. 5. Sie schließen die Eingabe in das Textfeld ab, indem Sie das Pfeilwerkzeug oder ein beliebiges anderes Werkzeug anklicken. Erstellen eines Textblocks mit fester Breite 1. Wählen Sie das Textwerkzeug aus. 2. Ziehen Sie mit der linken Maustaste ein Rechteck auf der Bühne auf. 3. Lassen Sie die Maustaste los, sobald der Textblock die gewünschte Breite hat. 4. Ein Textblock mit fester Breite wurde erstellt. 5. Geben Sie einen Text ein. Sobald Ihr Text die maximale Breite des Textblocks erreicht hat, wird ein Zeilenumbruch durchgeführt. Manuelle Zeilenumbrüche und Absätze sind auch möglich. Sie erkennen einen Textblock mit fester Breite am Quadrat in der rechten oberen Ecke des Textblocks. Mag. Manfred Klima Seite 12

13 Zeichnen mit dem Freihandwerkzeug Mit dem Freihandwerkzeug können Sie Linien und Formen zeichnen. Bei der Verwendung diese Werkzeugs stehen Ihnen drei Optionen zur Verfügung. Begradigen: Aus Rundungen werden Ecken. Glätten: Zittrige Rundungen werden korrigiert Tinte: Die gezeichneten Linien bleiben so erhalten, wie sie gezeichnet wurden. Beispiele Begradigen Bei der Eingabe: Nach der Eingabe: Glätten Bei der Eingabe: Nach der Eingabe: Tinte Keine Veränderung der Linien nach der Eingabe Mag. Manfred Klima Seite 13

14 Zeichnen mit dem Pinselwerkzeug Im Unterschied zum Stiftwerkzeug werden mit dem Pinselwerkzeug geschlossene Objekte erstellt. Geschlossene Objekte bestehen aus einer Füllung und einem Rahmen. Sie haben folgende Optionen bei der Verwendung des Pinselwerkzeugs: Pinselgröße: Pinselform: Pinselart: Normal malen Im Hintergrund malen In Auswahl malen Füllen Innen malen Linien und Füllungen auf der selben Ebene werden übermalt Linien und Füllungen werden im leeren Bereich der Ebene gemalt. Vorhandene Linien und Füllungen bleiben erhalten. Alle Füllungen innerhalb der Auswahl werden übermalt. Füllungen und leere Bereiche werden übermalt, Linien bleiben erhalten Damit können Sie innerhalb von Füllungen malen. D.h., es wird jene Füllung übermalt, in der Sie beginnen. Linien und andere Füllungen werden nicht übermalt. Pipette Mit der Pipette auswählen. können Sie die bestehende Farbe einer Linie oder Füllung 1. Wählen Sie das Pipettenwerkzeug aus. 2. Klicken Sie auf jenes Objekt, dessen Linien- oder Füllfarbe Sie übernehmen möchten. Es kann sich dabei auch um einen Farbverlauf handeln. 3. Die ausgewählte Farbe wird als neue Zeichen- oder Füllfarbe angezeigt. Mag. Manfred Klima Seite 14

15 Radiergummi Mit dem Radiergummi können Sie Teile von Objekten löschen. Optionen Normal radieren Alle Linien und Füllungen werden radiert. Füllung radieren Nur die Füllung wird radiert, Linien bleiben erhalten. Ausgewählte Nur die im ausgewählten Bereich vorhandenen Füllungen können Füllungen radiert werden. radieren Innen radieren Es wird jene Füllung radiert, in der Sie mit dem Radieren beginnen. Animation Um Filme zu erstellen können Sie, 1. für jedes Bild die Zeichnung erstellen (Bild für Bild Animation), 2. ein Bewegungstween erstellen, 3. oder ein Formtween erstellen. Bewegungstween erstellen Bewegungstween sind automatische Bewegungsanimationen, bei denen Sie die Start- und Endposition angeben müssen. 1. Erstellen Sie einen neuen Film. 2. Speichern Sie diesen Film unter dem Namen Bewegungstween 3. Erstellen Sie einen Textblock mit folgendem Text: Workshop Flash, Schriftgröße Markieren Sie in der Ebene1 das Bild Öffnen Sie das Menü Einfügen. 6. Wählen Sie den Eintrag Schlüsselbild aus. Alternativ können Sie zum Einfügen eines Schlüsselbilds die Taste F6 verwenden. Mag. Manfred Klima Seite 15

16 Schlüsselbilder sind Grundbestandteile einer Animation. Schlüsselbilder werden dann eingesetzt, wenn die Animation im Ablauf verändert wird. Die Veränderungen können Farbe, Größe, Position, Geschwindigkeit usw. betreffen. 7. In der Zeitleiste wird beim Bild 20 ein Schlüsselbild eingefügt. Wenn Sie ein Schlüsselbild einfügen, wird das vorhergehende Schlüsselbild kopiert. Wenn Sie ein leeres Schlüsselbild einfügen möchten, wählen Sie aus dem Menü Einfügen den Eintrag leeres Schlüsselbild oder verwenden alternativ die Taste F7. Dazwischen werden Füllbilder eingefügt, die durch graue Bilder gekennzeichnet sind. Schlüsselbilder mit Inhalt werden durch einen schwarzen Punkt in der Zeitleiste gekennzeichnet. Die rote Markierung (Aktualbildzeiger) kennzeichnet die aktuelle Position im Film. Die an der Positionen vorhandenen Objekte werden auf der Bühne angezeigt. Durch Verschieben des Aktualbildzeigers können Sie sich die einzelnen Bilder des Films anzeigen lassen. 8. Markieren Sie das Bild 20 (wenn nicht schon markiert). 9. Verschieben Sie den Text nach rechts unten. 10. Markieren Sie ein Bild im grau markierten Bereich (Füllbilder) zwischen dem Bild 1 und Der Bereich wird schwarz markiert. 12. Öffnen Sie den Eigenschaftsinspektor. Sollte das zugehörige Bedienfeld nicht geöffnet sein, öffnen Sie das Menü Fenster. Wählen Sie den Eintrag Eigenschaften aus. Wählen Sie unter Tween die Option Bewegung aus. Die Optionen des Bewegungstweens werden angezeigt. Mag. Manfred Klima Seite 16

17 Die wichtigsten Optionen sind: Abbremsen: Sie können einen Wert zwischen 100 und 100 auswählen bzw. eingeben. Bei den Werten 100 bis -1 wird der Beginn der Animation gebremst und das Ende beschleunigt. Bei den Werten 1 bis 100 wird der Beginn der Animation beschleunigt und das Ende abgebremst. Drehen: Sie können unter drei Möglichkeiten wählen: Auto UZS: das Objekt wird im Uhrzeigersinn gedreht gegen UZS: das Objekt wird gegen den Uhrzeigersinn gedreht. Wenn Sie das Objekt drehen möchten, müssen Sie auch die Anzahl der Drehungen angeben. 13. Ein Bewegungstween wurde erstellt. Sie erkennen die Richtung des Bewegungstweens anhand des Pfeils innerhalb der Zeitleiste. 14. Speichern Sie Ihre Animation. Film testen Testen Sie Ihre Animation, indem Sie den Aktualbildzeiger auf das erste Bild der Animation ziehen und anschießend die Taste Enter drücken. Die Animation wird direkt auf der Bühne abgespielt. Wenn Sie Tastenkombination Strg + Enter drücken, wird die Animation als eigenständiger Film mit dem Flash-Player abgespielt. Sie können sich auch eine eigene Symbolleiste einblenden um den Film zu testen. 1. Öffnen Sie das Menü Fenster. 2. Wählen Sie das Untermenü Symbolleisten. 3. Wählen Sie den Menüeintrag Steuerung. Mit Hilfe der Abspielsteuerung können Sie Ihre Animation per Mausklick starten, Bild für Bild vor und rückwärts anzeigen, an das Ende und den Anfang des Films springen. Weitere Möglichkeiten einen Film zu testen finden Sie im Menü Steuerung. Mag. Manfred Klima Seite 17

18 Formtween erstellen Beim Formtween können Sie die Form eines Objektes verändern. Im folgenden Beispiel werden wir mit Hilfe dieser Morphingmethode aus einem Kreis ein Rechteck entstehen lassen. Wie beim Bewegungstween benötigen Sie auch hier nur das Start- und Endbild. Die dazwischen liegenden Bilder werden von Flash automatisch berechnet und erstellt. 1. Erstellen Sie einen neuen Film. 2. Speichern Sie diesen Film unter dem Namen Formtween 3. Erstellen Sie in der linken oberen Ecke einen Kreis. 4. Markieren Sie in der Ebene1 das Bild Öffnen Sie das Menü Einfügen. 6. Wählen Sie den Eintrag leeres Schlüsselbild aus. 7. In der Zeitleiste wird beim Bild 20 ein leeres Schlüsselbild eingefügt. Alternativ können Sie zum Einfügen eines leeren Schlüsselbilds die Taste F7 verwenden. Leere Schlüsselbilder verwenden Sie, wenn das vorhergehende Schlüsselbild nicht kopiert werden soll. 8. Erstellen Sie im Bild 20 ein Rechteck. Sie können dem Rechteck auch eine andere Farbe zuweisen. 9. Markieren Sie ein Bild im grau markierten Bereich (Füllbilder) zwischen dem Bild 1 und 20 mit Doppelklick. 10. Der Bereich wird schwarz markiert. 11. Öffnen Sie den Eigenschaftsinspektor. Sollte das zugehörige Bedienfeld nicht geöffnet sein, öffnen Sie das Menü Fenster. Wählen Sie den Eintrag Eigenschaften aus. Wählen Sie unter Tweening die Option Form aus. Die Optionen des Formtweens werden angezeigt. Die Optionen unter Abbremsen gelten analog zum Bewegungstween. Unter Effekt können Sie zwischen Verteilt und Winkelförmig wählen. Mit der Option Verteilt erstellt Flash eine Animation, in der die Zwischenbilder glatter und unregelmäßiger sind. Mag. Manfred Klima Seite 18

19 Die Option Winkelförmig eignet sich nur für Objekte mit geraden Linien und Ecken. Flash erstellt eine Animation, in der die erkennbaren Ecken und Linien in den Zwischenbildern erhalten bleiben. 12. Ein Formtween wurde erstellt. 13. Speichern Sie Ihre Animation. Filmansicht Am unteren Rand der Filmleiste befinden sich Schaltflächen, mit denen Sie sich mehrere Objekte unterschiedlicher Bilder gleichzeitig anzeigen lassen können. Wählen Sie die Schaltfläche Zwiebelschalen Bühne anzuzeigen. um Objekte mehrerer Bilder auf der Wählen Sie die Schaltfläche Zwiebelschalenkontur als Kontur auf der Bühne anzuzeigen. um Objekte mehrerer Bilder Wählen Sie die Schaltfläche mehrere Bilder bearbeiten über mehrere Bilder hinweg zu bearbeiten. um gleichzeitige Objekte Über der Zeitleiste können Sie den Bereich angeben, auf den die oben angeführten Funktionen zutreffen sollen. Die folgende Abbildung zeigt Ihnen das Aussehen der Bühne unter Einsatz des Zwiebelschaleneffekts. Mag. Manfred Klima Seite 19

20 Symbole, Instanzen und die Bibliothek Symbole sind Grafiken, Filme, Schaltflächen, die Sie immer wieder verwenden können. Symbole werden in Bibliotheken gespeichert. Wenn Sie ein Symbol aus einer Bibliothek verwenden, wird eine Instanz des Symbols erstellt. Sie können beliebig viele Instanzen eines Symbols verwenden. Damit verringert sich der benötigte Speicherplatz einer Animation, da das Symbol nicht mehrfach Speicherplatz benötigt. Wenn Sie am Symbol ein Veränderung vornehmen, wirken sich die Änderungen auf alle erzeugten Instanzen des Symbols aus. In Flash gibt es drei verschiedene Symboltypen. Grafiksymbol Grafiksymbole eignen sich vor allem für statische Bilder. In Grafiksymbolen können auch Animationen enthalten sein. Diese Animationen werden mit der Zeitleiste des Hauptfilms synchronisiert. Filmsymbol Filmsymbole eignen sich vor allem für Animationen. Filmsymbole werden unabhängig vom Hauptfilm abgespielt. Im Hauptfilm wird zum Einfügen eines Filmsymbols ein Schlüsselbild benötigt. Sie können damit einen Film im Film einfügen. Schaltflächensymbol Schaltflächensymbole eignen sich zum Erstellen von interaktiven Schaltflächen. Mag. Manfred Klima Seite 20

21 Bei der Erstellung eines Symbols können Sie aus zwei Möglichkeiten wählen: Sie erstellen ein Objekt und wandeln es anschließend in ein Symbol um. 1. Öffnen Sie dazu das Menü Einfügen. 2. Wählen Sie den Menüeintrag In Symbol konvertieren Alternativ können Sie die Taste F8 verwenden. Bei der zweiten Möglichkeit erstellen Sie sofort ein neues Symbol. 1. Öffnen Sie dazu das Menü Einfügen. 2. Wählen Sie den Menüeintrag Neues Symbol. Alternativ können Sie die Tastenkombination Strg + F8 verwenden. Ein Grafiksymbol erstellen Zeichnen Sie ein Rad mit vier Speichen. Markieren Sie das Objekt und konvertieren Sie das Objekt in ein Grafiksymbol. Menü Einfügen In Symbol konvertieren Vergeben Sie als Namen drehendes Rad Öffnen Sie das Bedienfeld Bibliothek über das Menü Fenster / Bibliothek (F11) Im Bedienfeld Bibliothek wird Ihnen das neue Symbol angezeigt. Mag. Manfred Klima Seite 21

22 Erstellen Sie im Hauptfilm einen Bewegungstween mit dem soeben erstellten Grafiksymbol. Fügen Sie im Bild 30 ein Schlüsselbild (F6) ein. Ziehen Sie die Grafik über den rechten Rand aus der Bühne hinaus. Klicken Sie in den Bereich zwischen dem 1. und 30. Bild. Wählen Sie den Eigenschaftsinspektor aus. Als Eigenschaft der Option Tween wählen Sie Bewegung aus. Testen Sie den Film. Das Rad bewegt sich von links über den rechten Rand der Bühne hinaus. Jedoch gibt es noch einen Schönheitsfehler. Die Speichen drehen sich nicht. Im nächsten Schritt werden wir die Speichen innerhalb des Grafiksymbols animieren. Führen Sie einen Doppelklick auf das Grafiksymbol innerhalb der Bibliothek aus. Jetzt wird in den Symbolbearbeitungsmodus umgeschaltet. Neben dem Szenensymbol wird das Grafiksymbol drehendes Rad angezeigt. Markieren Sie alle Speichen. Mehrere Objekte können mit der Umschalttaste (Shift) markiert werden. Sie könne auch mit dem Pfeilwerkzeug einen Rahmen um alle zu markierenden Objekte ziehen. Gruppieren Sie die Objekte. 1. Öffnen Sie das Menü Modifizieren. 2. Wählen Sie den Eintrag Gruppieren aus. Alternativ können Sie auch die Tastenkombination Strg + G verwenden. Transformieren und Skalieren Animation der Speichen: 1. Fügen Sie in der Zeitleiste im Bild 2 ein Schlüsselbild ein (F6). 2. Markieren Sie die Gruppe. 3. Wählen Sie das Bedienfeld Transformieren (Strg + T) aus. 4. Geben Sie unter der Option Drehen 120 ein. 5. Fügen Sie in der Zeitleiste im Bild 3 noch ein Schlüsselbild ein (F6) 6. Führen Sie die weiteren Schritte wie im Bild 2 durch. Mag. Manfred Klima Seite 22

23 Wenn das Rad nicht auf gleicher Höhe bewegt wird, muss die Größe des Rades skaliert werden um möglichst realistisch zu wirken. Markieren Sie das Rad im zweiten Schlüsselbild (Bild 30). Wählen Sie aus dem Optionsfeld der Werkzeugleiste die Schaltfläche Skalieren. Jetzt können Sie die Größe des Rades verändern. Lassen Sie sich die ganze Animation in der Zwiebelschalenansicht anzeigen. Jetzt können Sie den Film testen. Vergessen Sie nicht den Film zu speichern. Erstellen eines Schaltflächensymbols Erstellen Sie einen neuen Film. Zeichnen Sie einen Kreis auf der Bühne. Versehen Sie den Kreis mit einem kreisförmigen Farbverlauf. Wählen Sie zu diesem Zweck das Bedienfeld Farbmischer (Umschalt + F9). Wählen Sie Radial. Markieren Sie die Füllung und wählen das Farbeimerwerkzeug aus, mit dem Sie die Füllung neu einfärben. Mag. Manfred Klima Seite 23

24 Entfernen Sie den Rahmen des Objekts. Wählen Sie das Pfeilwerkzeug aus und klicken Sie auf den Kreisrahmen. Drücken Sie die Taste Entf. oder Rücktaste oder Menü Bearbeiten / Löschen Duplizieren Sie den Kreis. 1. Markieren Sie den Kreis. 2. Öffnen Sie das Menü Bearbeiten. 3. Wählen Sie den Eintrag Duplizieren aus. Alternativ können Sie die Tastenkombination Strg + D verwenden. Erstellen Sie eine einfärbige Füllung. Gruppieren Sie den Kreis (Strg + G) Klicken Sie die Schaltfläche Skalieren Verkleinern Sie den Kreis. an. Ziehen Sie den verkleinerten Kreis über den größeren Kreis. Markieren Sie beide Kreise. Wählen Sie das Bedienfeld Ausrichten (Strg + K) aus. Wählen Sie unter Ausrichten Horizontal zentrieren und Vertikal zentrieren. Beide Kreise stehen damit zentriert übereinander. Wandeln Sie das Objekt in ein Schaltflächensymbol um. Markieren Sie das neue Objekt. Öffnen Sie das Menü Einfügen. Wählen Sie den Eintrag In Symbol konvertieren aus. (F8) Wählen Sie Schaltfläche aus. Geben Sie als Symbolnamen Schaltfläche ein. Ein neues Symbol wurde erstellt. Mag. Manfred Klima Seite 24

25 Doppelklicken Sie in der Bibliothek auf die Schaltfläche. Der Bearbeitungsmodus der Schaltfläche öffnet sich. Die Schaltfläche bietet drei Aktionen. Fügen Sie im Bereich Darüber und Drücken ein Schlüsselbild ein. Im Bereich Aktiv können Sie jenen Bereich kennzeichnen, der eine Interaktion unterstützt. Da unsere vollständige Schaltfläche sensitiv sein soll, wird der Bereich Aktiv freigelassen. Jetzt können Sie bei jeder Schaltfläche den inneren Kreis mit einer neuen Farbe ausstatten. Dazu müssen Sie die Gruppierung aufheben (Strg + Umschalt + G). Neue Farbe zuweisen. Wieder Gruppieren. (Strg + G) Ansicht der Schaltfläche Auf. Ansicht der Schaltfläche Darüber. Mag. Manfred Klima Seite 25

26 Ansicht der Schaltfläche Drücken. Wir werden jetzt ein umfangreicheres Beispiel erstellen, dass mehrere Filme, Grafiken und Schaltflächen beinhaltet. Weiters werden Sie einige Möglichkeiten der integrierten Skriptsprache ActionScript kennenlernen. Erstellen eines Filmsymbols Das folgende Filmsymbol soll ein Menü enthalten. Die Menüschaltfläche wird als Schaltflächensymbol erstellt. Das Menü wird als Filmsymbol gespeichert und enthält das Schaltflächensymbol. Mit dem Ereignis mouseover soll das Menü aufgeklappt werden. Die einzelnen Einträge sollen einen weiteren Film aufrufen. Wenn die Maus außerhalb des Menüs bewegt wird, soll sich das Menü schließen. Vorgang: Erstellen Sie einen neuen Film. Erstellen Sie ein neues Schaltflächensymbol (Strg + F8). Vergeben Sie als Namen Menübutton. Der Menübutton soll folgendes Aussehen haben. Mag. Manfred Klima Seite 26

27 Die Schaltfläche wird aus einem Rechteck erstellt. Die Füllfarbe ist ein gerader Farbverlauf. Der Text wird mit einer Textbox, der Pfeil mit dem Pinselwerkzeug erstellt. Zeichnen Sie den Pfeil außerhalb der Schaltfläche und gruppieren Sie das Objekt. Anschließend ziehen Sie den Pfeil auf die Schaltfläche. Fügen Sie für die Schalftfläche Darüber und Drücken ein Schlüsselbild ein. Ändern Sie die Farbe des Textes und des Pfeils in der Schaltfläche Drücken. Ziehen Sie den Pfeil wieder neben die Schaltfläche. Heben Sie dazu die Gruppierung auf (Strg + Umschalt + G). Markieren Sie die drei Teile des Pfeils und färben Sie den Pfeil neu ein. Erstellen Sie ein Filmsymbol. Vergeben Sie als Namen Menü. Fügen Sie in das Filmsymbol das Schaltflächensymbol Menübutton aus der Bibliothek ein. Bis jetzt haben wir alle Animationen bzw. Symbol nur einer Ebene erstellt. Für die umfangreichere Animation benötigen wir mehrere Ebenen. Jeder Ebene können Sie unterschiedliche Objekte und Aktionen zuweisen. Benennen Sie die Ebene1 in Menüebene um. Führen Sie einen Doppelklick auf die Bezeichnung Ebene1 durch und überschreiben Sie den Namen mit Menübutton. Fügen Sie im Bild2 ein Schlüsselbild ein. Mit dem Bild2 sollen auch die weiteren Menüelemente eingeblendet werden. Erstellen Sie eine neue Ebene. Klicken Sie die Schalfläche Ebene einfügen in der Zeitleiste an, oder öffnen Sie das Menü Einfügen und wählen Sie den Eintrag Ebene aus. Der neuen Ebene geben Sie den Namen Menüeinträge. Markieren Sie das Bild2 in der neuen Ebene Menüeinträge und erstellen Sie ein Schlüsselbild. Für die weiteren Menüelemente erstellen Sie eine Vorlage als Grafiksymbol. Fügen Sie ein neues Grafiksymbol ein. Erstellen Sie ein Rechteck und wählen Sie eine zur Menüschaltfläche passende Füllfarbe aus. Passen Sie die Größe des Rechtecks an die Menüschaltfläche an. Mag. Manfred Klima Seite 27

28 Fügen Sie dem Filmsymbol Menü fünf Instanzen des Grafiksymbols Menüelemente zu. Positionieren Sie die fünf Instanzen in folgender Form. Schreiben Sie in die Schaltflächen den folgenden Text. Weisen Sie jeder Schaltfläche das Verhalten Schaltfläche zu. Öffnen Sie dazu das Bedienfeld Instanz und wählen Sie unter Verhalten den Eintrag Schaltfläche aus. Wenn Sie den Film testen, werden Sie sehen, dass der Film ständig im Kreis läuft. Beim Starten des Films soll jedoch nur das Bild1 angezeigt werden. Bei der Aktion Mouse over soll das Menü aufgeklappt werden. Bei der Aktion Mouse out soll das Menü geschlossen werden. Um diese Aktionen ausführen zu können benötigen Sie Aktionen, die in Flash integriert sind. Mag. Manfred Klima Seite 28

29 Markieren Sie die Ebene Menübutton. Öffnen Sie das Bedienfeld Aktionen. Aktionen Das Fenster mit den Aktionen wird geöffnet. Die Aktionen enthalten folgende Kategorien: Aktionen Filmsteuerung (Aktionen zur Steuerung der Filmwiedergabe) Browser/Netzwerk (Aktionen zum Steuern von Webbrowsern und Netzwerk) Movieclipsteuerung (Aktionen zum Steuern von Movieclips) Variablen (Aktionen zm Ändern von bzw. Zugreigen auf Variablen) Bedingungen/Schleifen (Bedingungsanweisungen und Schleifenkonstrukte Druck (Aktionen zum Ausdruck von Filmen oder Movieclips) Benutzerdefinierte Funktionen (Aktionen zum Erstellen und Aufrufen von Funktionen) Verschiedene Aktionen Operatoren (Operatoren, die in Ausdrücken verwendet werden) Funktionen (Funktionen, die in Ausdrücken verwendet werden) Eigenschaften (Eigenschaften von Movieclips) Objekte (Von ActionScript zur Verfügung gestellte vordefinierte Objekte) Nicht mehr verwendet (Funktionen, die bei neuen Inhalten vermieden werden sollten) Flash UI-Komponenten (Flash UI-Komponenten) Index (Index aller Elemente in alphabetischer Reihenfolge) Wenn Sie eine Kategorie anklicken, öffnen sich die enthaltenen Anweisungen. Mag. Manfred Klima Seite 29

30 In den Aktionen sind folgende Objektaktionen enthalten: Aktion Go To Play Stop Stop All Sounds FS Command Get URL Load Movie/ Unload Movie Tell Target set variable framesloaded On Erläuterung Zu einem Bild bzw. einer Szene springen Abspielen eines Films Anhalten eines Films Anhalten aller Sounds Senden einer Anweisung an eine andere Anwendung Laden bzw. Öffnen eines Ziels Laden und Entladen eines Films von der aktuellen Ebene. Steuern von Instanzen Stellt eine Variable ein Anzahl der geladenen Bilder feststellen Ausführen einer Aktion, wenn ein bestimmtes Mausereignis zutrifft. Die Basisaktion onmouseevent enthält folgende Mausereignisse (Handler): Drücken (Press) Loslassen (Release) Release Outside Tastendruck (Key Press) Darüberrollen (Roll Over) Wegrollen (Roll Out) Darüberziehen (Drag Over) Wegziehen (Drag Out) Aktion ausführen, wenn die Maustaste über dem Objekt gedrückt wird. Aktion ausführen, wenn die Maustaste losgelassen wird. Aktion ausführen, wenn die Maustaste losgelassen wird, wenn sie sich nicht über der Schaltfläche befindet. Aktion ausführen, wenn die angegebene Taste gedrückt wird. Aktion ausführen, wenn der Mauszeiger über die Schaltfläche gezogen wird. Aktion ausführen, wenn der Mauszeiger außerhalb der Schaltfläche gezogen wird. Aktion ausführen, wenn die Maustaste über der Schaltfläche gedrückt wird, der Mauszeiger außerhalb der Schaltfläche bewegt wird und wieder über die Schaltfläche gezogen wird. Aktion ausführen, wenn die Maustaste über der Schaltfläche gedrückt wird und der Mauszeiger dann außerhalb der Schaltfläche bewegt wird. Jetzt werden wir die Aktion einstellen, die beim Laden des Filmsymbols Menü durchgeführt werden soll. Film anhalten Das Filmsymbol soll geladen und beim Bild1 angehalten werden. Damit wird nur die Menüschaltfäche angezeigt. Es handelt sich dabei um die Filmsteuerungsaktion Stop Mag. Manfred Klima Seite 30

31 Öffnen Sie mit einem Mausklick die Kategorie Filmsteuerung. Führen Sie einen Doppelklick auf die Aktion Stop aus. Im Parameterfenster wird die Aktion stop (); angezeigt. In der Zeitleiste hat die Ebene Menübutton im Bild1 ein kleines a als Kennzeichen erhalten, dass eine Aktion erstellt wurde. Wenn Sie jetzt den Film testen, wird nur das Bild1 des Filmsymbols angezeigt. Film starten Im nächsten Schritt soll das Menü beim Ereignis mouse over aufgeklappt werden. Markieren Sie in der Ebene Menübutton, Bild1 die Schaltfläche. Anschließend öffnen Sie das Bedienfeld Aktionen. Mag. Manfred Klima Seite 31

32 Wählen Sie in der Kategorie Filmsteuerung die Aktion on. Als Mausereignis wählen Sie Rollover aus. Im nächsten Schritt wählen Sie die Aktion goto. Als Bild geben Sie 2 ein. Aktivieren Sie die Option Gehe zu und stoppe. Im Parameterfenster wird die Aktion on (rollover) { gotoandstop (2); } angezeigt. Mag. Manfred Klima Seite 32

33 Wenn Sie jetzt den Film testen, wird beim Ereignis mouse over das Menü aufgeklappt (d.h. das zweite Bild wird angezeigt), jedoch wird das Menü nicht wieder zugeklappt, wenn sich die Maus nicht mehr über dem Menü befindet. Folgende Schritte sind für diese Aktion nötig. Erstellen Sie eine weiter Ebene im Filmsymbol Menü. Der neuen Ebene geben Sie den Namen Menü schließen. Ziehen Sie diese Ebene an die unterste Position der drei Ebenen. Damit rückt die neue Ebene in den Hintergrund. Erstellen Sie im Bild2 des soeben erstellten Menüs ein Rechteck, das wesentlich größer ist als das aufgeklappte Menü. Die Füllfarbe des Rechtecks spielt keine Rolle, da sie als Hintergrundfarbe im Film nicht angezeigt wird. Unsichtbare Schaltfläche Wandeln Sie das Rechteck in eine Schaltfläche um. Öffnen Sie das Menü einfügen. Wählen Sie den Eintrag In Symbol konvertieren (F8) Wählen Sie das Verhalten Schaltfläche aus. Geben Sie als Namen Menü schließen ein. Aktion: on(rollover) { gotoandstop(1); } Führen Sie einen Doppelklick auf die neu erstellte Schaltfläche in der Bibliothek durch. Fügen Sie unter Aktiv ein Schlüsselbild ein. Löschen Sie auf allen davorliegenden drei Bildern das Rechteck. Damit ist das Rechteck nur mehr im Bereich Aktiv sichtbar. Unter Aktiv wird angegeben, welcher Bereich sensitiv sein soll. Da unter den Bildern des Schaltfächensymbols kein Objekt enthalten ist, wird das Rechteck beim laufenden Film nicht angezeigt. Mag. Manfred Klima Seite 33

34 Wenn Sie den Film jetzt testen, klappt das Menü wie gewünscht auf und zu. Was jetzt noch fehlt, sind die Szenen oder Filme, die über die einzelnen Menüeinträgen aufgerufen werden. Sie finden im folgenden Teil alle Filme, sowie deren Aktionen und wichtigen Eigenschaften abgebildet. Alle benötigen Schaltflächen finden Sie am Ende dieses Teils. Die Oberfläche wird aus mehreren Filmen aufgebaut. Die unterste Ebene ist folgende Oberfläche, die immer sichtbar ist. Film start1 Aktionen Ebene1: loadmovienum ("intro.swf", 1); loadmovienum ("menü1.swf", 2); loadmovienum ("maus.swf", 3); Mag. Manfred Klima Seite 34

35 Der Film intro.swf wird daher in die Ebene 1 geladen. Alle weiteren Filme dieser Seite werden in diese Ebene geladen. In der Ebene 2 befindet sich das Menü. Über das Menü werden die weiteren Filme geladen. Als Ziel wird immer die Ebene 1 angegeben. (Siehe Aktionen der Menüschaltflächen). Der Mauszeiger befindet sich in der Ebene 3. Die Aktion loadmovienum( maus.swf, 3); funktioniert daher erst wenn Sie den Film maus.swf erstellt haben. Ebene2 Filmsymbol Name: bgrnavigation Folgender Film wird beim Starten von start1.swf abgespielt. Film intro Mag. Manfred Klima Seite 35

36 Aktionen Schaltfläche Stop: on (release) { with (startintro) { gotoandstop (1); } } Schaltfläche vor: on (release) { with (startintro) { gotoandplay (1); } } In der Ebene Animation befindet sich ein Filmsymbol, Name: startintro Die Animation findet innerhalb des weißen Fensters statt. Als nächste Ebene wird in der Präsentation das Menü eingeblendet. Den einzelnen Schaltflächen sind die folgenden Aktionen zuzuweisen. Mag. Manfred Klima Seite 36

37 Ansicht der Aktion loadmovienum im Bedienfeld Aktionen: Menü Aktion Inside on (release) { loadmovienum ("inside.swf", 1); gotoandstop (1); } Produkte on (release) { loadmovienum ("produkte.swf", 1); gotoandstop (1); } News on (release) { loadmovienum ("news.swf", 1); gotoandstop (1); } Kontakt on (release) { loadmovienum ("kontakte.swf", 1); gotoandstop (1); } Referenz on (release) { loadmovienum ("referenz.swf", 1); gotoandstop (1); } Die einzelnen Filme werden in der Ebene 1 angezeigt. Der Hintergrund (start.swf), das Menü (menue1.swf) sowie die Maus (maus.swf) bleiben davon unberührt, da sie sich in einer anderen Ebene befinden. Film maus Filmsymbol: mauszeiger Besteht aus fünf Einzelbildern mit unterschiedlichen Farben des Mauszeigers. Mag. Manfred Klima Seite 37

38 Gezeichnet wurde der Mauszeiger mit dem Pinselwerkzeug. Das Filmsymbol wird im Hauptfilm maus.swf eingefügt. Der Instanz des Films mauszeiger wird als Instanzname maus über den Eigenschaftsinspektor zugewiesen. Mauszeiger ersetzen Abschließend wird der Mauszeiger durch den Film maus.swf ersetzt. Markieren Sie die Ebene1 des Films maus.swf und fügen Sie über das Bedienfeld Aktionen folgendes Script hinzu. Mouse.hide(); startdrag( maus, true); Mit der Aktion Mouse.hide(); wird die Maus ausgeblendet. Mit der Aktion startdrag( maus, true); wird die Instanz maus des Films mauszeiger angezeigt. Über die Eigenschaft true wird der Film über der ausgeblendeten Maus zentriert, wenn das Kontrollkästchen Maus zentrieren aktiviert ist. Die Aktion startdrag befindet sich in der Kategorie Aktionen / Movieclipsteuerung. Mag. Manfred Klima Seite 38

39 Die Startoberfläche hat nach dem Start folgendes Aussehen. Mag. Manfred Klima Seite 39

40 Film inside Die Symbole neben dem Text sind Filmsymbole, Name drehendessym. Diese Symbole bestehen aus 10 Bildern Animation: Bewegungstween, eine Drehung UZS Geben Sie jeder der drei Instanzen einen Namen. Der Name des obersten Symbols ist unform, des zweiten Symbols unform1 und des dritten Symbols unform2. Mag. Manfred Klima Seite 40

41 Aktionen der Schaltflächen: Die Aktion with stop: (zum Stoppen der Animation) Die Mausaktion on soll beim Ereignis Drücken bwz. Loslassen eintreten. Die Aktion with ermöglicht die Angabe eine Objekts (in diesem Beispiel die Instanzen der Schaltfläche) und der Zuweisung einer Aktion (gotoandstop(1). Die Aktion with kann verschachtelt werden. Wobei jede Anweisung innerhalb der with Aktion mit einer geschwungenen Klammer begonnen wird. Die geschwungenen Klammer werden nach dem with Block geschlossen. Die erste geöffnete Klammer wird als letzte, die als zweite geöffnete Klammer als vorletzte Klammer geschlossen... on (press, release) { with (unform) { gotoandstop(1); with (unform1) { gotoandstop(1); with (unform2) { gotoandstop(1); } } } } vor: (neben Stop zum Starten der Animation) on (press, release) { with (unform) { gotoandplay(1); with (unform1) { gotoandplay(1); with (unform2) { gotoandplay(1); } } } } Mag. Manfred Klima Seite 41

42 Film produkte Der Film produkte.swf besteht aus zwei Bildern. 1. Bild Aktionen: stop u. vor wie im Film inside Ebene Hintergrund: stop (); Aktion nextframe und prevframe Schaltfäche vor (zum nächsten Bild des Films) on (release) { nextframe (); } Mag. Manfred Klima Seite 42

43 2. Bild Das Bild wurde importiert. Menü Datei, importieren Damit steht das Bild in der Bibliothek zur Verfügung und kann über die Bibliothek eingefügt werden. Aktionen: Schaltfläche zurück on (release) { prevframe (); } Film news Der Film news besteht aus zwei Bildern. Als Objekt wurde ein Textblock eingefügt. Die Eigenschaften des Textblocks sind: Dynamischer Text, Mehrzeilig, Var: news In diesem Textblock wird beim Abspielen ein Text angezeigt. Die beiden Schaltflächen neben dem Text dienen zum Rauf- und Runterscrollen. Mag. Manfred Klima Seite 43

44 Aktionen: Aktion set variable Ebene Hintergrund news = "Die News des Tages.... Die News des Tages"; gotoandstop (1); Der Text kann in einem beliebigen Programm geschrieben werden und anschließend in die Variable news kopiert werden. Die benötige Funktion lautet: set variable Schaltfäche rauf on (release) { news.scroll = news.scroll -3; } Schaltfläche runter on (release) { news.scroll = news.scroll+3; } Schalfläche vor (zum nächsten Bild des Films) on (release) { nextframe (); } Das zweite Bild des Films news hat die selben Objekte wie das Bild1. Mag. Manfred Klima Seite 44

45 Aktionen: Ebene Hintergrund / Bild2 news = "Die News der letzten Woche....Die News der letzten Woche. "; Schaltfläche zurück on (release) { prevframe (); } Film kontakte Mag. Manfred Klima Seite 45

46 Aktion geturl Aktionen: Schalfläche mail Die Schaltfläche besteht aus einem Bild ohne unterschiedliche Zustände. Die Aktion geturl befindet sich in der Kategorie Aktionen / Browser/Netzwerk on (release) { geturl ("mailto:mail@mailserver.at"); } Film referenz Die Aktionen der Schaltflächen sfstop und sfvor sind analog zum Film produkte /Bild1 Mag. Manfred Klima Seite 46

47 Die benötigten Schaltflächen Sound einfügen Den Schaltflächen wurde auch ein Sound hinzugefügt. Sounddatei: Utopie schließen.wav Der Sound wird importiert und steht dann in der Bibliothek zur Verfügung. Öffnen Sie das Menü Datei. Wählen Sie den Eintrag importieren aus. Sound in der Schaltfläche sfzurück Erstellen Sie eine zweite Ebene. Aktivieren Sie das Bild Aktiv in dieser Ebene. Ziehen Sie die Sounddatei aus der Bibliothek auf die Bühne. Die Sounddatei wird dem Bild Aktiv zugewiesen. Bezeichnungen der Schaltflächen Mag. Manfred Klima Seite 47

48 Austauschen von Symbolen Sie können auf der Bühne ein Symbol durch ein anderes Symbol ersetzen. Z.B. wenn Sie die Schaltfläche sfzurück durch die Schaltfläche sfzurück_inaktiv ersetzten möchten. 1. Markieren Sie die Schaltfläche auf der Bühne. 2. Öffnen Sie den Eigenschaftsinspektor. 3. Klicken Sie auf die Schaltfläche Austauschen. 4. Wählen Sie im sich öffnenden Fenster das benötigte Symbol aus und bestätigen Sie mit OK. 5. Das Symbol wurde ersetzt. Erweiterte Animationsmögichkeiten Maske erstellen Wenn nur Teile eines Films sichtbar sein sollen, können Sie eine Maske verwenden. Damit sind Ebenen die unterhalb der Maske liegen nur teilweise sichtbar. Im folgenden Beispiel soll sich über den Text FLASH MX ein Kreis bewegen, der nur jene Teile des Textes zeigen soll, der sich unmittelbar unter dem Kreis befindet. Mag. Manfred Klima Seite 48

49 Ansicht der Bühne mit aktiver Maske. Ansicht der Bühne ohne aktiver Maske. Mag. Manfred Klima Seite 49

50 Schritte zur Erstellung einer animierten Maske: 1. Erstellen Sie in der Ebene 1 ein Textfeld. 2. Text = FLASH MX, Textfarbe = schwarz 3. Erstellen Sie in der Ebene 1 ein Rechteck. Das Rechteck soll vom linken bis zum rechten Rand reichen. Farbe = blau 4. Gruppieren Sie das Rechteck. 5. Wählen Sie im Menü Modifizieren / Anordnen die Eigenschaft In den Hintergrund (Strg + Umschalt + Nach unten) 6. Erstellen Sie eine neue Ebene. 7. Erstellen Sie in dieser Ebene einen Kreis. Der Kreis soll höher als der Text sein. 8. Erstellen Sie im Bild 40 ein Schlüsselbild (F6). 9. Verschieben Sie den Kreis an den rechten Rand des Films. 10. Erstellen Sie ein Bewegungstween. 11. Markieren Sie die Bilder Klicken Sie den markierten Bereich mit der rechten Maustaste an. Wählen Sie den Menüeintrag Bilder kopieren aus. 12. Markieren Sie das Bild Klicken Sie das Bild mit der rechten Maustaste an und wählen Sie den Menüeintrag Bilder einfügen aus. 14. Markieren Sie die Bilder Klicken Sie die Bilder mit der rechten Maustaste an und wählen Sie den Menüeintrag Bilder umkehren aus. 16. Wählen Sie in der Ebene 1 das Bild 80 aus und fügen Sie ein Schlüsselbild ein. 17. Markieren Sie die Ebenenbezeichnung Ebene 2 mit der rechten Maustaste. Wählen Sie den Menüeintrag Maske aus. Die Ebene 2 wird als Maske gekennzeichnet. Die Ebene 1 wird eingerückt und maskiert. Wenn Sie die Ebenen sperren, ist nur der maskierte Teil der Ebene 1 sichtbar (siehe Ansicht der Bühne mit aktiver Maske). 18. Wenn Sie die Ebenen wieder entsperren, können alle Objekte bearbeitet werden. Animation entlang einer Führungsebene Damit haben Sie die Möglichkeit ein Objekt entlang eines frei erstellten Pfades zu animieren. Mag. Manfred Klima Seite 50

51 Ansicht der Bühne mit Objekt und Führungspfad. Ansicht im Test. Die Führungsebene ist nicht sichtbar. Schritte zur Erstellung einer Animation mit Führungsebene. 1. Erstellen Sie auf Ebene 1 ein Objekt. Das verwendete Objekt besteht aus einem Kreis. Für die beiden Augen wurde ein Filmsymbol erstellt. Das Filmsymbol besteht aus drei Bildern. Bei jedem Bild wurde die Füllfarbe der Augen geändert. Anschließend wurde der Film dem Hauptfilm hinzugefügt. 2. Gruppieren Sie dieses Objekt. 3. Erstellen Sie im Bild 60 ein Schlüsselbild. 4. Erstellen Sie ein Bewegungstween. 5. Klicken Sie den Ebene 1 mit der rechten Maustaste an und wählen Sie den Menüeintrag Pfad hinzufügen aus. 6. Eine Pfadebene wird hinzugefügt. 7. Zeichnen Sie in der neuen Ebene mit dem Stiftwerkzeug einen Pfad (siehe: Ansicht der Bühne mit Objekt und Führungspfad ) auf dem sich das Objekt entlang bewegen soll. 8. Markieren Sie im ersten Bild der Ebene 1 das zu animierende Objekt und ziehen Sie es an den Beginn der Linie bis das Objekt einrastet. 9. Markieren Sie im letzten Bild der Ebene 1 das zu animierende Objekt und ziehen Sie es an das Ende der Linie bis das Objekt einrastet. 10. Das Objekt bewegt sich entlang der Führungsebene. Mag. Manfred Klima Seite 51

52 Einfügen von Flash-Filmen in ein HTML-Dokument Workshop - FLASH Um einen Flash-Film in einem HTML-Dokument anzeigen zu können, benötigen Sie den Tag Object (dieser wird von Microsoft unterstützt) und den Tag Embed (dieser wird von Netscape unterstützt). Sie können den benötigten Code in Flash erstellen. 1. Öffnen Sie das Menü Datei. 2. Wählen Sie den Eintrag Einstellungen für Veröffentlichungen. 3. In der Registerkarte Formate wählen Sie die Optionen Flash, HTML, Windows-Projektor und Macintosh-Projektor aus. 4. Klicken Sie auf die Schaltfläche Veröffentlichen. 5. Die ausgewählten Optionen werden durchgeführt und die entsprechenden Dateien werden erstellt. Der erzeugte Quellcode zum Einfügen des Flash-Player Films start1 in ein HTML- Dokument: <HTML> <HEAD> <TITLE>start1</TITLE> </HEAD> <BODY bgcolor="#ff6600"> <!-- URL's used in the movie--> <!-- text used in the movie--> <OBJECT classid="clsid:d27cdb6e - AE6D-11cf-96B " codebase=" WIDTH=550 HEIGHT=400> <PARAM NAME=movie VALUE="start1.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FF6600> <EMBED src="start1.swf" quality=high bgcolor=#ff6600 WIDTH=550 HEIGHT=400 TYPE="application/x-shockwave-flash" PLUGINSPAGE=" ockwaveflash"></embed> </OBJECT> </BODY> </HTML> Mag. Manfred Klima Seite 52