So erstellen Sie Animationen in Flash. So erstellen Sie eine Flash-Animation. Action Script verstehen

Wir stoßen immer wieder auf Flash-Animationen – im Internet und in Fernsehsendungen. Das Erstellen einer einfachen Flash-Animation mit der Flash-Technologie ist ganz einfach einfache Aufgabe, da Flash viele nützliche Tools bietet, die den gesamten Prozess vereinfachen. Wenn Sie eine Flash-Animation oder einen Cartoon erstellen möchten, können Sie diese in nur wenigen Stunden skizzieren.

Schritte

Teil 1

Einzelbild-Flash-Animation

Grundlagen der Stop-Motion-Animation. Diese Methode gilt als die Hauptmethode zur Erstellung „traditioneller“ Animationen, bei denen jedes nachfolgende Bild dasselbe, jedoch leicht veränderte Bild enthält. Wenn alle Bilder abgespielt sind, wird das Bild „zum Leben erweckt“. Dies ist die gleiche Methode, die auch von handgezeichneten Cartoon-Animatoren verwendet wird, und ist zeitaufwändiger als Twinning (siehe nächster Abschnitt).

• Standardmäßig spielt Flash mit 24 Bildern pro Sekunde (FPS). Dies bedeutet, dass in einer Sekunde 24 Bilder angezeigt werden, die jedoch nicht alle unterschiedlich sein müssen. Sie können diese Einstellung (wenn Sie möchten) auf 12 Bilder pro Sekunde ändern, aber bei 24 Bildern pro Sekunde wird die Animation flüssiger abgespielt.

1. Installieren Sie Flash Professional. Es gibt viele Programme zum Erstellen von Flash-Animationen, aber das leistungsstärkste ist Adobe Flash Professionelles CC. Sie können dieses Programm kostenlos testen oder ein anderes Produkt verwenden (wenn Sie sich nicht für Adobe Creative Cloud anmelden möchten). Der Rest dieses Artikels beschreibt die Verwendung von Flash Professional.

   Da für die Einzelbildanimation mehrere Bilder erforderlich sind (die sich geringfügig voneinander unterscheiden), müssen Sie diese Bilder manuell erstellen. Verwenden Sie dazu Adobe Flash Professional oder zeichnen Sie Bilder in einem beliebigen Grafikeditor.

   • Wenn Sie möchten, dass die Größe Ihrer Bilder ohne Qualitätsverlust einfach geändert werden kann, erstellen Sie Ihre Bilder in Vektorgrafiken statt in Rastergrafiken. Vektorbilder werden bei der Größenänderung automatisch neu gezeichnet (d. h. Sie vermeiden Pixelierung oder Anti-Aliasing). Rasterbilder sind herkömmliche Bilder wie Fotos, gezeichnete Bilder usw. Wenn Sie versuchen, solche Bilder zu vergrößern, erhalten Sie am Ende ein stark verzerrtes Bild.

2. Erstellen Sie den ersten Rahmen. Wenn Sie Adobe Flash Professional zum ersten Mal starten, sehen Sie eine leere Leinwand (Ebene) und eine leere Zeitleiste. Wenn Frames hinzugefügt werden, füllt sich die Zeitleiste automatisch. Sie können mit Ebenen wie in Photoshop arbeiten.

   • Bevor Sie ein Bild hinzufügen, erstellen Sie einen grundlegenden Hintergrund für Ihre Animation. Benennen Sie „Ebene 1“ in „Hintergrund“ um und fixieren Sie sie. Erstellen Sie eine zweite Ebene und benennen Sie sie nach Belieben. Dies ist die Ebene, auf der Sie die Animation erstellen.
   • Fügen Sie der ersten Rahmenleinwand eine Zeichnung hinzu. Sie können die Zeichnung von Ihrem Computer importieren oder die Zeichnung mithilfe der Zeichenwerkzeuge direkt im Programm erstellen.
   • Der erste Frame ist der „Schlüssel“-Frame. Ein Keyframe ist ein Frame, der ein Bild enthält und das Rückgrat einer Animation bildet. Jedes Mal, wenn Sie das Bild ändern, erstellen Sie einen neuen Keyframe.
   • Keyframes in der Timeline werden durch einen schwarzen Punkt gekennzeichnet.
   • Sie benötigen nicht für jedes nachfolgende Bild einen Keyframe. Erstellen Sie alle vier bis fünf Frames einen Keyframe, um eine gute Animation zu erstellen.

3. Konvertieren Sie das Bild in ein Symbol. In diesem Fall können Sie das Bild mehrmals in den Rahmen einfügen. Dies ist besonders nützlich, wenn Sie schnell mehrere ähnliche Bilder in einem Rahmen hinzufügen müssen (z. B. Fische in einem Aquarium).

   • Wählen Sie die Zeichnung aus. Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie „In Symbol konvertieren“. Das Bild wird der Bibliothek hinzugefügt, sodass es in Zukunft einfacher verwendet werden kann.
   • Löschen Sie die Zeichnung. Keine Sorge – Sie können es Ihrem Rahmen hinzufügen, indem Sie es einfach aus der Bibliothek ziehen. Auf diese Weise können Sie dieselbe Zeichnung mehrmals zu einem Rahmen hinzufügen.

4. Fügen Sie leere Rahmen hinzu. Sobald Ihr erster Keyframe fertig ist, fügen Sie leere Frames ein und beginnen Sie dann mit der Erstellung Ihres zweiten Keyframes. Drücken Sie F5 (vier oder fünf Mal), um nach dem ersten Keyframe leere Frames hinzuzufügen.

   Erstellen Sie einen zweiten Keyframe (nachdem Sie einige leere Frames hinzugefügt haben). Es gibt zwei verschiedene Wege Gehen Sie dazu wie folgt vor: Sie können einen vorhandenen Keyframe kopieren und kleine Änderungen daran vornehmen oder Sie können einen leeren Keyframe erstellen und ihm ein neues Bild hinzufügen. Wenn Sie eine Zeichnung verwenden, die in einem anderen Programm erstellt wurde, verwenden Sie die zweite Methode. Wenn Sie ein mit den Zeichenwerkzeugen von Adobe Flash Professional erstelltes Bild einfügen, verwenden Sie die erste Methode.

   • Um einen Keyframe mit den Inhalten des vorherigen Keyframes zu erstellen, drücken Sie F6. Um einen leeren Keyframe zu erstellen, klicken Sie mit der rechten Maustaste auf den letzten Frame in der Timeline und wählen Sie „Leeren Keyframe einfügen“.
   • Nachdem Sie den zweiten Keyframe erstellt haben, müssen Sie Änderungen an dessen Bild vornehmen, damit die Animation zum Leben erweckt wird. Wenn Sie die Zeichenwerkzeuge von Adobe Flash Professional verwendet haben, wählen Sie das Transformationswerkzeug aus, um ein Element Ihrer Zeichnung (z. B. die Hand einer Figur) auszuwählen und es zu ändern.
   • Wenn Sie bei jedem Keyframe ein neues Bild einfügen, achten Sie darauf, dass es sich an der richtigen Stelle befindet (entsprechend der logischen Reihenfolge der Frames).

5. Wiederholen Sie den Vorgang. Nachdem Sie zwei Keyframes erstellt haben, wiederholen Sie den Vorgang. Fügen Sie zwischen jedem Keyframe ein paar leere Frames ein und stellen Sie sicher, dass die Animation reibungslos abgespielt wird.

   • Nehmen Sie kleine Änderungen vor. Je kleiner (subtiler) die Änderungen sind, desto flüssiger wird die Animation. Wenn Sie beispielsweise möchten, dass eine Figur ihre Hand hebt, sollte der zweite Keyframe keine Zeichnung der Figur mit bereits erhobener Hand enthalten. Verwenden Sie stattdessen mehrere Keyframes, um von einer gesenkten Hand zu einer erhobenen Hand zu wechseln. In diesem Fall wird die Animation flüssiger.

6. Verwandeln Sie die Zeichnung. Wenn Sie Keyframes und einen Pfad erstellt haben, können Sie das Bild so transformieren, dass es sich sanft verändert, während Sie sich entlang des Pfads des Tweens bewegen. Sie können Form, Farbe, Neigung, Größe und jeden anderen Aspekt des Bildes ändern.

   • Wählen Sie einen Rahmen aus, in den die Zeichnung umgewandelt werden soll.
   • Öffnen Sie das Zeichnungseigenschaftenfenster. Drücken Sie dazu F3.
   • Ändern Sie die Einstellungen im Zeichnungseigenschaftenfenster. Sie können beispielsweise den Farbton oder die Farbe ändern, Filter hinzufügen und die Größe ändern.
   • Sie können die Zeichnung auch mit dem Werkzeug „Frei transformieren“ nach Ihren Wünschen ändern.

7. Fügen Sie den letzten Schliff hinzu. Testen Sie die erstellte Animation, indem Sie Strg + Eingabetaste drücken. Stellen Sie sicher, dass sich die Zeichnung (der Charakter) korrekt ändert und die Animation mit der richtigen Geschwindigkeit abgespielt wird. Wenn die Animation zu schnell abgespielt wird, reduzieren Sie den FPS-Wert oder verlängern Sie die Dauer des Tweens.

   • Der Standard-FPS beträgt 24. Versuchen Sie also, diesen Wert auf 12 zu reduzieren. Ändern Sie den FPS-Wert im Eigenschaftenfenster. Bei FPS = 12 wird die Animation jedoch möglicherweise nicht flüssig genug abgespielt.
   • Um die Dauer eines Tweens zu ändern, wählen Sie die Ebene aus, die das Tween enthält, und verwenden Sie den Schieberegler, um die Dauer des Tweens zu ändern. Wenn Sie die Dauer des Zwillings verdoppeln möchten, bewegen Sie den Schieberegler auf 48 Bilder. Denken Sie daran, den Hintergrund in die leeren Frames einzufügen, damit der Hintergrund nicht mitten in der Animation verschwindet. Wählen Sie dazu die Hintergrundebene aus, klicken Sie auf das letzte Bild der Animation (auf der Zeitleiste) und drücken Sie dann F5.

Teil 3

Hinzufügen von Soundeffekten und Musik

1. Nehmen Sie Soundeffekte und Musik auf oder laden Sie sie herunter. Sie können Ihrer Animation Soundeffekte hinzufügen, um sie wirkungsvoller zu machen. Musik macht Animationen spannender und kann aus einer guten Animation eine großartige machen. Flash unterstützt eine Vielzahl von Audiodateiformaten, darunter AAC, MP3, WAV und AU. Wählen Sie ein Format, das dies garantiert hohe Qualität Sound mit einer minimalen Dateigröße.

   • Das MP3-Format garantiert eine hohe Klangqualität bei minimaler Dateigröße. WAV-Dateien sind groß.

2. Importieren Sie Audiodateien in die Bibliothek, um Ihren Animationen schnell Sounds und Musik hinzuzufügen. Klicken Sie auf „Datei“ – „Importieren“ – „In Bibliothek importieren“. Suchen Sie die Audiodatei auf Ihrem Computer. Stellen Sie sicher, dass die Audiodatei einen leicht zu merkenden Namen hat, damit Sie sie schnell finden können.

   Erstellen Sie für jede Audiodatei eine neue Ebene. Dies ist nicht erforderlich und Sie können Audio zu vorhandenen Ebenen hinzufügen. Wenn Sie die Audiodatei jedoch in eine separate Ebene einfügen, haben Sie mehr Kontrolle über die Audiospur der Animation.

   Erstellen Sie einen Keyframe, der die Audiowiedergabe startet. Wählen Sie auf der Tonebene den Animationsrahmen aus, ab dem die Tonwiedergabe beginnen soll. Drücken Sie F7, um einen leeren Keyframe einzufügen. Wenn Sie beispielsweise eine Audiodatei einfügen möchten, die während der gesamten Animation abgespielt wird, wählen Sie das erste Bild auf der Audiodateiebene aus. Wenn Sie die Stimme einer Figur hinzufügen, wählen Sie eine Einstellung, in der die Figur zu sprechen beginnt.

Verwenden von Szenen

Wie Sie wissen, können Sie mit Flash recht komplexe Filme erstellen, die interaktive Elemente, Animationen, Clips usw. enthalten können. Natürlich besteht die Notwendigkeit, verschiedene Elemente des Films zu speichern und zu suchen. Wenn Sie an einem großen, komplexen Projekt arbeiten, ist es sinnvoll, es in mehrere überschaubare Abschnitte zu unterteilen, die jeweils eine bestimmte Abfolge von Ereignissen (Animation, Benutzerinteraktion usw.) enthalten. Dies wird die Arbeit erheblich erleichtern. Die Rolle solcher Fragmente in Flash-Filmen spielen Szenen. Es handelt sich um logisch abgeschlossene Miniaturfilme, die zusammen einen einzigen Flash-Film ergeben. Bei der Erstellung großer Projekte kann die Verwendung von Szenen erheblich Zeit sparen.

Was ist eine Bühne?

Das Erstellen einer Szene ist eine effektive Technik, die es ermöglicht, ein bestimmtes Projekt in separate, überschaubare Fragmente zu unterteilen. Jede Szene ist, wie bereits erwähnt, ein Miniaturfilm. Die Anzahl der verwendeten Flash-Filmszenen ist nur durch die Speicherkapazität des Computers begrenzt. Szenen werden nacheinander in der im Szenenfenster angegebenen Reihenfolge abgespielt und sind aufgrund ihrer Unabhängigkeit gleichzeitig eng miteinander verbunden. Während der Wiedergabe gibt es nie eine merkliche Verzögerung zwischen ihnen. Die Einsatzmöglichkeiten von Szenen sind vielfältig und nahezu grenzenlos. Wenn Sie beispielsweise an einem Website-Projekt arbeiten, können Sie Abschnitte und Unterabschnitte als Szenen implementieren. IN In letzter Zeit Kurze animierte Flash-Filme, deren Inhalt sich durch Szenen in logische Teile unterteilen lässt, erfreuen sich im Internet immer größerer Beliebtheit.

Szenenpanel

Der Zugriff auf die Liste der in einem Film enthaltenen Szenen erfolgt über das Szenenbedienfeld.

on), das geöffnet wird, wenn Sie den Befehl Fenster\u003e Design-Panels\u003e Szene (Fenster\u003e Design-Panels\u003e Szene) aufrufen. In diesem Bereich können Sie eine Liste der verfügbaren Szenen anzeigen

und legen Sie die Reihenfolge ihrer Wiedergabe im Film fest – sie wird durch die Reihenfolge der Szenen in der Liste bestimmt. Darüber hinaus können Sie mit dem Szenenbedienfeld Szenen innerhalb der Liste duplizieren, hinzufügen, löschen und verschieben.

Das Menü „Optionen“ im Bedienfeld „Szene“ enthält nur drei Befehle: Bedienfeld maximieren, Bedienfeld schließen und Hilfe.

Szenenpanel

Bearbeitungsfeld

Das Bearbeitungsfeld befindet sich oberhalb der Timeline, unterhalb des Hauptmenüs des Programms. Um das Bedienfeld zu öffnen, verwenden Sie den Befehl „Fenster“ > „Symbolleisten“ > „Bearbeiten“. Sie haben dieses Bedienfeld bereits verwendet, als Sie im Symbol-Editor-Fenster gearbeitet haben, um den Symbolbearbeitungsmodus zu verlassen (siehe Kapitel 6). In diesem Abschnitt werden wir darüber sprechen Funktionalität Bearbeiten Sie Panels im Zusammenhang mit der Arbeit mit Szenen.

Das Bearbeitungsfeld enthält den Namen der aktuellen Szene (in der Abbildung ist die aktuelle Szene Szene 2). Mit der Schaltfläche „Szene bearbeiten“ auf der rechten Seite des Bearbeitungsfelds können Sie zu einer anderen Szene wechseln. Der Name der ausgewählten Szene wird in der Zeile angezeigt. Die Funktionalität der Schaltfläche „Szene bearbeiten“ wird im Abschnitt „Wechseln zwischen Szenen“ beschrieben.

Menü der Schaltfläche „Szene bearbeiten“.

Szenen erstellen und manipulieren

Wie bereits erwähnt, ist das Szenenbedienfeld, das über den Befehl „Fenster > Design-Bedienfelder > Szene“ geöffnet wird, für die Arbeit mit Szenen konzipiert. In diesem Abschnitt erfahren Sie, wie Sie mit diesem Bedienfeld Szenen hinzufügen, duplizieren, umbenennen und ihre Reihenfolge ändern können.

Eine Szene hinzufügen

Mit zunehmender Komplexität eines Projekts müssen Sie ständig neue Szenen hinzufügen, um logische Teile des Inhalts zu verteilen. Sie können dies über das Bedienfeld „Szene“ tun. Um eine Szene hinzuzufügen, gehen Sie folgendermaßen vor:

Stellen Sie sicher, dass das erforderliche Dokument geöffnet ist. Wählen Sie Fenster > Design-Bedienfelder > Szene, um das Szenenbedienfeld zu öffnen.

Klicken Sie auf die Schaltfläche „Szene hinzufügen“, die sich in der unteren rechten Ecke des Bedienfelds befindet, oder rufen Sie den Befehl „Szene“ aus dem Menü „Einfügen“ auf. Nach diesen Aktionen wird der Name der neuen Szene im Fenster des Szenenbedienfelds angezeigt. Standardmäßig erhält jede neue Szene einen Namen mit einer Sequenznummer, die um eins größer ist als der aktuell ausgewählte Szenenname (z. B. Szene 1, Szene 2 usw.). Der Name wird entsprechend in die Liste eingefügt.

Wählen Sie im Szenenbedienfeld eine neue Szene aus und erstellen Sie deren Inhalt. Wenn Sie eine neue Szene erstellen, wechselt Flash automatisch zu dieser.

Liste der Szenen im Szenenfenster

Eine Szene löschen

Auf diese Weise können Sie eine Szene löschen.

Öffnen Sie das Szenenbedienfeld, indem Sie Fenster > Design-Bedienfelder > Szene aufrufen. Wählen Sie die Szene aus, die Sie löschen möchten.

Klicken Sie auf die Schaltfläche „Szene löschen“ in der unteren rechten Ecke des Bedienfelds. Um das Löschen der Szene zu bestätigen, klicken Sie im sich öffnenden Dialogfeld auf die Schaltfläche „OK“.

Szenenvervielfältigung

In den vorherigen Kapiteln haben wir bereits über die Erstellung von Duplikaten verschiedener Elemente gesprochen. Was das Kopieren von Animationen betrifft, insbesondere ein komplexes Projekt mit Große anzahl Ohne die Duplikatfunktion, mit der Sie mit nur einem Knopfdruck exakte Kopien jeder Szene erstellen können, wäre dieser Vorgang recht umständlich.

Öffnen Sie das Bedienfeld „Szene“, indem Sie den Befehl „Fenster > Design-Panels > Szene“ (Fenster > Design-Panels > Szene) aktivieren und die Szene auswählen, die Sie duplizieren möchten.

Klicken Sie auf die Schaltfläche „Szene duplizieren“ in der unteren rechten Ecke des Szenenfensters.

Der Name der duplizierten Szene wird im Bedienfeldfenster „Szene“ angezeigt. Beachten Sie, dass es aus dem Namen der Originalszene und dem Wort soru (Kopie) besteht.

Doppelte Szene

Szenen umbenennen

Da sich die Standardnamen, die duplizierten und neuen Szenen zugewiesen werden, nur in ihrer fortlaufenden Nummer unterscheiden, ist es schwierig, die Szene bei der Suche nach bestimmten Inhalten zu identifizieren. Daher empfiehlt es sich bei großen Projekten, Szenen spezielle Namen zu geben, die ihren Inhalt charakterisieren. Das Umbenennen einer Szene wird nicht viel Zeit in Anspruch nehmen.

Öffnen Sie das Szenenbedienfeld, indem Sie „Fenster“ > „Design-Bedienfelder“ > „Szene“ wählen und auf den Szenennamen doppelklicken, den Sie ändern möchten. Dadurch können Sie den Szenennamen bearbeiten.

Geben Sie einen neuen Namen ein und drücken Sie die Eingabetaste/Eingabetaste oder doppelklicken Sie außerhalb des Szenenfensters.

Umbenennen einer Szene im Szenenfenster

Reihenfolge der Szenen ändern

Die Reihenfolge, in der Szenennamen im Szenenfenster platziert werden, bestimmt die Reihenfolge, in der Szenen im Film abgespielt werden. Szenennamen in diesem Bereich können verschoben werden, wodurch die Reihenfolge festgelegt wird, in der die Szenen abgespielt werden, unabhängig von der Reihenfolge, in der sie erstellt wurden.

Öffnen Sie das Szenenfenster, indem Sie „Fenster“ > „Designfenster“ > „Szene“ wählen.

Platzieren Sie Ihren Mauszeiger über dem Namen der Szene, die Sie neu anordnen möchten, und klicken Sie linker Knopf Klicken Sie mit der Maus und bewegen Sie den Zeiger bei gedrückter Maustaste an die gewünschte Stelle im Bedienfeld. Beachten Sie, dass beim Bewegen des Zeigers eine blaue Linie erscheint, die die mögliche neue Position des Szenennamens in der Liste anzeigt.

Verschieben einer Szene im Szenenfenster

Zwischen Szenen wechseln

Mit den folgenden Navigationstools können Sie während der Arbeit an einem Flash-Projekt zwischen verschiedenen Filmszenen wechseln.

Szenenpanel. Um zur gewünschten Filmszene zu springen, klicken Sie im Szenenbedienfeld auf den Szenennamen. Denken Sie daran, dass der Name der ausgewählten Szene im Bearbeitungsfeld angezeigt wird.

Schaltfläche „Szene bearbeiten“. Wenn Sie auf diese Schaltfläche auf der rechten Seite des Bearbeitungsfelds klicken, erhalten Sie Zugriff auf ein Menü mit den Namen aller Szenen im Film. Um zur gewünschten Szene zu gelangen, wählen Sie den entsprechenden Menüpunkt aus.

Film-Explorer-Bedienfeld. Dieses Panel, das mit dem Befehl „Fenster > Andere Panels > Film-Explorer“ geöffnet werden kann, zeigt die hierarchische Struktur des Films an (siehe Kapitel 8) und ermöglicht die Suche nach Szenen, Charakteren und Charakterinstanzen sowie das Ersetzen von Text und Schriftarten.

Szenen werden im Film-Explorer-Bedienfeld als hierarchische Elemente höherer Ordnung dargestellt. Um zu einer bestimmten Szene zu springen, suchen Sie ihren Namen im Film-Explorer-Bedienfeld und klicken Sie darauf. Standardmäßig zeigt dieses Bedienfeld nur den Inhalt der ausgewählten Szene an. Um den Inhalt aller Szenen gleichzeitig anzuzeigen, aktivieren Sie den Befehl „Alle Szenen anzeigen“ im Menü „Optionen“ dieses Bedienfelds.

Movie Explorer-Bedienfeld mit Szenenliste

Szenentest

Um den erstellten Film direkt in der Flash-Entwicklungsumgebung zu testen, müssen Sie die Eingabetaste/Eingabetaste drücken. In diesem Fall sind die Anzeigeoptionen jedoch auf die ausgewählte Szene beschränkt. Eine sequentielle Wiedergabe aller Szenen ist erst nach Veröffentlichung des Films möglich, die Flash-Umgebung ist nicht mehr erforderlich. Führen Sie zum Testen die folgenden Schritte aus:

Um eine einzelne Szene zu testen, wählen Sie sie im Szenenbedienfeld aus und drücken Sie die Eingabetaste/Eingabetaste. Alternativ können Sie nach Auswahl einer Szene das Steuerungsmenü öffnen und den Befehl „Szene testen“ aktivieren.

Um einen Film zu testen, rufen Sie den Befehl „Film testen“ aus dem Steuerungsmenü auf oder verwenden Sie die Tastenkombination Cmd/Strg+Return/Enter. Dadurch wird ein neues Fenster geöffnet, in dem alle Szenen des Films in der im Szenenbedienfeld definierten Reihenfolge abgespielt werden.

Sie können auch alle Szenen in einem Film abspielen, indem Sie im Steuerungsmenü die Option „Alle Szenen abspielen“ auswählen.

Szenen mit ActionScript verwalten

Szenen können die Gesamtorganisation von Filminhalten erheblich vereinfachen. Die vorgegebene Reihenfolge der Szenenwiedergabe bestimmt die Linearität von Filmen. Neben den Vorteilen (z. B. ist die gleichzeitige Wiedergabe zweier Szenen ausgeschlossen) haben lineare Filme aber auch Nachteile, die mit der Unmöglichkeit verbunden sind, die Reihenfolge der Szenenwiedergabe zu ändern. Um dieses Problem zu lösen, verwenden Sie ActionScript-Skripte (insbesondere Frame-Aktionen) zur Steuerung von Szenen.

In Kapitel 13 erfahren Sie mehr über ActionScript und die Verwendung von Frame-Aktionen. In diesem Abschnitt werden einige der Aktionen vorgestellt, die Sie zum Steuern von Szenen verwenden können.

gotoAndStopO – wenn aufgerufen dieser Aktion Der Film springt zu einer bestimmten Szene und einem bestimmten Bild und stoppt die Wiedergabe des Films.

gotoAndPlay() – Der Aufruf dieser Aktion bewirkt, dass sich der Wiedergabekopf zu einer bestimmten Szene und einem bestimmten Bild bewegt (die Filmwiedergabe wird von diesem Bild an fortgesetzt).

Play O – Mit dieser Aktion können Sie den Film nach dem Stoppen weiter abspielen.

Stop O – Mit dieser Aktion können Sie die Wiedergabe des Films stoppen.

Arbeiten mit Rahmen in mehreren Ebenen
Rahmenabschnittseinstellungen

Beginn der Arbeiten

Der erste Frame der Ebene ist mit einem leeren Kreis markiert. Das bedeutet, dass sowohl Frame 1 als auch Layer 1 leer sind – es sind keine Objekte auf dem Layer eingefügt. Fügen wir ein beliebiges Objekt auf der Ebene „Ebene 1“ ein. Lassen Sie uns zum Beispiel importieren Rasterbild(siehe Importieren) und fügen Sie es auf der Ebene „Ebene 1“ ein. Das Bild wird links angezeigt. Sie können die erstellte Animation anzeigen, indem Sie die Eingabetaste drücken. Normalerweise ist die Hintergrundebene durch Hinzufügen eines Vorhängeschlosssymbols gesperrt, um zu verhindern, dass sie geändert wird. Beispiel 4: Sie können einfache Rahmen hinzufügen oder entfernen. Rahmen entfernen: Um einen Rahmen zu löschen, müssen Sie ihn auswählen Kontextmenü Wählen Sie „Frames entfernen“. Um mehrere Frames auszuwählen, halten Sie die Strg-Taste gedrückt. Beispielsweise müssen wir die Anzahl der Frames für den Hintergrund um 5 Frames reduzieren. Wählen wir 5 Frames aus und löschen sie – statt 30 Frames bleiben 25 übrig. Rahmen hinzufügen: Beispielsweise müssen wir mehrere Frames auf der Ebene „Hintergrund“ hinzufügen. Klicken Sie dazu auf Frame 30 und ziehen Sie Frame 30 einfach nach rechts in der Timeline, wenn neben dem Cursor ein kleines Rechteck erscheint. Oder Sie können auf einen beliebigen Frame zwischen dem 1. und 30. Frame klicken und im Kontextmenü „Frame einfügen“ auswählen. Letzte Aktualisierung: Dezember 2014

Bisher haben wir uns Flash-Filme angesehen, die vom Anfang bis zum Ende ohne Eingreifen des Zuschauers abgespielt werden können. Mit Flash können Sie jedoch auch erstellen interaktive Anwendungen, bei dem der Benutzer die Anzeige von Inhalten steuern kann. In dieser Lektion beginnen wir mit der Erkundung der Elemente der Action Script-Skriptsprache und schauen uns an, wie sie zum Erstellen interaktiver Anwendungen verwendet werden kann. Lassen Sie uns als Beispiel ein Fotoalbum mit interaktiven Oberflächenelementen erstellen. Aber bevor wir mit der Beschreibung von Action Script beginnen, sollten wir über einen weiteren Symboltyp sprechen, den wir bisher ignoriert haben – Schaltflächensymbole. Um eine interaktive Schnittstelle zu erstellen, sind sie einfach notwendig.

Schaltflächen erstellen

Die Schaltfläche ist ein interaktiver Movieclip mit vier Bildern. Wenn wir einem Symbol einen Schaltflächentyp zuweisen, erstellt Flash eine Zeitleiste mit vier Bildern für das neue Symbol:

Up-State ist ein Rahmen, der der Situation entspricht, in der die Taste nicht gedrückt ist und sich der Mauszeiger nicht über der Taste befindet;

Over-State-Rahmen, der das Erscheinungsbild der Schaltfläche veranschaulicht, wenn der Mauszeiger über der Schaltfläche positioniert ist, die Schaltfläche jedoch nicht gedrückt wird;

Im unteren Zustand zeigt dieser Rahmen das Aussehen der Taste an, wenn sie gedrückt wird.

Der Trefferstatus definiert den Bereich, in dem die Schaltfläche auf einen Mausklick reagiert. Dieser Bereich ist im Clip nicht sichtbar.

Um eine Schaltfläche zu erstellen, führen Sie den Befehl Einfügen => Neues Symbol aus (Sie können die Tastenkombination Strg+F8 eingeben). Geben Sie im angezeigten Dialogfeld „Neues Symbol erstellen“ einen Namen für das Schaltflächensymbol ein (z. B. „but1“) und wählen Sie den Symboltyp „Schaltfläche“ aus.

Flash wechselt in den Zeichenbearbeitungsmodus und bietet Up-, Over-, Down- und Hit-Frames. Der erste Frame, Up, wird zu einem leeren Keyframe. Lassen Sie uns in diesem Rahmen eine ungedrückte Ansicht der Schaltfläche zeichnen (Abb. 1).

Reis. 1. UP-Frame-Taste

Wählen wir den zweiten Frame aus, der als Over markiert ist und dem Zustand entspricht, in dem sich der Cursor über der Schaltfläche befindet. Fügen wir in diesen Frame einen Keyframe ein (mit dem Befehl Einfügen => Keyframe), wodurch ein Keyframe erscheint, der den Inhalt des Up-Frames vollständig wiederholt. Ändern wir die Farbe der Schaltfläche, wie in Abb. 2.

Abb. 2. Over-Frame-Taste

Fügen Sie auf ähnliche Weise den nächsten Frame (Down-Frame) hinzu und zeichnen Sie den gedrückten Zustand der Schaltfläche (Abb. 3).

Reis. 3. Schaltfläche zum Herunterfahren des Rahmens

Wir werden im Hit-Frame vorerst nichts zeichnen, kommen aber etwas später auf diesen Frame zurück.

Gehen wir zur Hauptszene, rufen die Bibliothek mit dem Befehl „Fenster => Bibliothek“ auf und erstellen eine Instanz des Schaltflächensymbols, indem wir es auf die Bühne ziehen (Abb. 4).

Reis. 4. Erstellen Sie eine Schaltflächeninstanz, indem Sie sie aus der Bibliothek ziehen

Als Ergebnis erhalten wir den folgenden Film. Wie in diesem Film zu sehen ist, erfolgt das Drücken einer Schaltfläche nicht nur dann, wenn wir mit der Maus auf den zentralen (Arbeits-)Bereich der Schaltfläche klicken, sondern auch, wenn wir auf den Rahmen um sie herum klicken. Dies liegt daran, dass, wenn der Hit-Frame nicht gezeichnet wird, der Arbeitsbereich der Schaltfläche dem Up-Frame entspricht.

Damit der Button nur im Arbeitsbereich gedrückt werden kann, ist es notwendig, diesen Bereich im Hit-Frame zu definieren, also den Button ohne Rahmen zu zeichnen (siehe Abb. 5)

Reis. 5. Hit-Frame-Schaltflächen

Nachdem wir den erforderlichen Hit-Frame hinzugefügt haben, erhalten wir den folgenden Film, in dem beim Klicken auf den Frame die Schaltfläche nicht gedrückt wird.

Um eine Schaltfläche interaktiv zu machen, müssen Sie das Drücken der Schaltfläche mit der Ausführung bestimmter Befehle verknüpfen, also ein bestimmtes Szenario beschreiben. Um Skripte in Flash zu erstellen, gibt es eine spezielle Sprache namens Action Script. In dieser Lektion werden wir nur einen kleinen Teil der Fähigkeiten dieser Sprache ansprechen und in Zukunft auf die Struktur und Syntax von Action Script zurückkommen, da die Beispiele für die Erstellung interaktiver Filme in Flash komplexer werden.

Action Script verstehen

Action Script ist eine Skriptsprache – eine Reihe von Anweisungen, die die Elemente eines Flash-Films steuern. Action-Skripte können in einen Film eingebettet oder extern gespeichert werden Textdatei mit Erweiterung AS.

Beim Einbetten eines Drehbuchs in einen Film kann dieses in verschiedene Teile des Films eingebettet werden. Genauer gesagt können Action-Skripte Keyframes, Schaltflächeninstanzen und Movieclip-Instanzen enthalten. Dementsprechend heißen die Skripte Frame Actions, Button Actions und MovieClip Actions.

Aktionsskripte werden ausgeführt, wenn bestimmte vom Benutzer oder System initiierte Ereignisse auftreten. Der Mechanismus, der Flash mitteilt, welche Anweisung beim Eintreten eines Ereignisses ausgeführt werden soll, wird als Ereignishandler bezeichnet.

Action Script hat eine eigene Syntax, ähnlich wie JavaScript. Flash MX 2004 unterstützt Action Script aus allen früheren Versionen von Flash.

Eines der Hauptkonzepte von Action Script sind Aktionen – Befehle, die während der Ausführung einer SWF-Datei Anweisungen erteilen. Beispielsweise sendet gotoAndStop() den Abspielkopf zu einem bestimmten Frame oder Cue. Aus dem Wort Actions leitet sich der Name der Sprache ab – Action Script (wörtlich: Action Script). Mit den meisten Konzepten dieser Sprache werden wir uns vertraut machen konkrete Beispiele.

Interaktives Fotoalbum

Lassen Sie uns die Verwendung von Schaltflächen zum Verwalten eines Fotoalbums demonstrieren: Erstellen Sie eine Reihe von Fotos und fügen Sie zwei Schaltflächen hinzu, mit denen Sie vorwärts und rückwärts durch die Fotos scrollen können.

Platzieren wir das erste Foto auf der Hauptzeitleiste und fügen wir eine Schaltfläche aus dem Standardsatz hinzu. Um auf den gewünschten Ordner zuzugreifen, müssen Sie ausführen Windows-Befehl=> Bedienfelder, gemeinsame Bibliotheken => Schaltflächen (Abb. 6).

Reis. 6. Fügen Sie eine Schaltfläche aus der Standardbibliothek hinzu

Als Ergebnis der Ausführung dieses Befehls erscheint ein Bedienfeld mit einer großen Anzahl vorgefertigter Schaltflächen verschiedene Arten. Wählen wir zum Beispiel Key Buttons (Tasten ähnlich den Tasten der Tastatur) aus, öffnen den entsprechenden Ordner, wählen die Taste-Links-Taste aus (Abb. 7) und erstellen eine Instanz dieser Taste (indem wir sie auf die Bühne ziehen).

Reis. 7. Elemente des Key Buttons-Ordners

Beachten Sie, dass das Programm einen Hinweis (eine gepunktete Linie) bereitstellt, wenn Sie einen zweiten Knopf (Taste-rechts) auf der Bühne platzieren und ihn so verschieben, dass er mit dem ersten Knopf übereinstimmt, der es Ihnen ermöglicht, den Knopf genau zu positionieren (Abbildung 8).

Reis. 8. Automatische Ausrichtung der Tasten auf gleicher Ebene

Um ein Skript hinzuzufügen, müssen Sie den Action-Script-Editor über den Befehl „Fenster => Entwicklungspanels => Aktionen“ oder durch Drücken der Taste F9 aufrufen. Wenn Sie häufig Skripte schreiben möchten, sollten Sie sich diesen Tastaturbefehl merken. Als Ergebnis erscheint der Action-Script-Editor (Abb. 9).

Reis. 9. Action-Script-Editor-Panels

Wenn Sie mit der Hervorhebung verschiedener Elemente in der Szene experimentieren und dabei die Meldungen in den Bedienfeldern des Action Script-Editors überwachen, werden Sie feststellen, dass das Programm Ihnen sagt, an welchem ​​Element Sie Code „hängen“ können. Wenn Sie auf der Bühne einen Frame auswählen, erscheint das Wort „Aktionen – Frame“ in der oberen linken Ecke des Editorfensters; wenn Sie auf die Schaltfläche klicken, erscheint das Wort „Aktionen – Schaltfläche“, d. h. das Programm fordert Sie auf, den eingegebenen Code einzugeben beziehen sich auf das Schaltflächenskript. Und wenn Sie ein Foto auswählen, erscheint im Feld zur Eingabe eines Skripts eine Meldung: Auf die aktuelle Auswahl können keine Aktionen angewendet werden (auf dieses ausgewählte Objekt kann kein Skript angewendet werden).

Wir werden einer Schaltfläche ein Skript zuweisen. IN letzte Version ActionScript verfügt über die Fähigkeit, zentralisierten Code zu schreiben, d. h. Code, der sich an einem Ort befindet, und diese Fähigkeit ermöglicht es Ihnen, große Programme besser zu verstehen. Allerdings in einfache Beispiele(was wir in Betracht ziehen) Das Zuweisen eines Skripts zu einer Schaltfläche ist durchaus akzeptabel.

Für eine Schaltfläche mit dem Pfeil nach links müssen wir also das folgende Szenario formalisieren: „Wenn die Schaltfläche in einem bestimmten Frame losgelassen wird, müssen Sie von diesem Frame aus zum vorherigen Frame wechseln.“ Gemäß der Syntax der Action-Script-Sprache (Abb. 10) sieht es folgendermaßen aus:

Die erste Zeile enthält den on()-Button-Ereignishandler, der das folgende Format hat:

Fügen wir nun mehrere Schlüsselbilder hinzu, sodass die im ersten Bild erstellten Schaltflächen in diese kopiert werden, und platzieren wir die erforderlichen Fotos in den neu erstellten Rahmen.

Wenn wir den erstellten Film zur Ausführung ausführen, werden die Frames kontinuierlich nacheinander abgespielt, und daher müssen wir zunächst beim ersten Frame den Befehl „Stopp“ erteilen. Fügen Sie dazu den entsprechenden Befehl zum ersten Frame hinzu (Abb. 11).

Reis. 11. Dem ersten Frame zugewiesenes Skript

Bitte beachten Sie: Der Befehl wird nicht mehr der Schaltfläche, sondern dem Rahmen zugewiesen. Die Tatsache, dass einem Rahmen ein Skript zugewiesen ist, wird in der Hauptbearbeitungszeile vermerkt – über dem fetten Punkt in der Rahmenbezeichnung erscheint ein Kleinbuchstabe „a“.

Als Ergebnis bekamen wir den nächsten Film.

Wenn das Fotoalbum nur wenige Bilder enthält, reichen zwei Schaltflächen – „Vorwärts“ und „Zurück“ – völlig aus. Wenn die Anzahl der Fotos jedoch groß ist, empfiehlt es sich, auch Schaltflächen zu haben, die auf den Anfang verweisen und Ende des Films. Im folgenden Beispiel werden wir die entsprechenden Schaltflächen hinzufügen: „Zum ersten Frame“ und „Zum letzten Frame“. Sie können Schaltflächen mit einer geeigneten Mnemonik aus der Standard-Schaltflächenbibliothek im Ordner „Circle Buttons“ auswählen (Abb. 12).

Anhand des vorgeschlagenen Beispiels machen wir uns mit einem anderen Befehl vertraut, gotoAndStop(), der es Ihnen ermöglicht, zum gewünschten Frame zu gehen und dann anzuhalten.

Reis. 12. Schaltflächen aus dem Ordner „Circle Buttons“.

Wir fügen der Schaltfläche einen Code hinzu, um zum ersten Frame (dritter von links in Abb. 13) zu gelangen, wie in Abb. 13.

Reis. 13. Skript für die Schaltfläche „Im ersten Frame“.

Fügen Sie bei einem Fotoalbum mit fünf Bildern das Übergangsskript „Zum letzten Bild“ zur letzten Schaltfläche hinzu:

Automatisiertes Drehbuchschreiben

Bisher haben wir alle Befehle manuell eingegeben, aber die ActionScript-Editor-Panels bieten eine Reihe von Diensten für das automatisierte Schreiben von Skripten. Betrachten wir diese Möglichkeiten.

Reis. 14. Automatisierte Skripting-Tools

Im Bedienfeld des Action-Script-Editors können Sie Befehle auswählen, ziehen, neu anordnen und löschen.

Lassen Sie uns zeigen, wie Sie dasselbe Skript automatisiert für die Schaltfläche „Weiter“ schreiben können. Durch Auswahl des Ordners „Movie Clip Control“ (oberes linkes Fenster in Abb. 14) können Sie auf den On-Event-Handler zugreifen. Anschließend müssen Sie entweder auf das entsprechende Element doppelklicken oder den Ausdruck per Drag & Drop auf das Skript-Schreibfeld ziehen Drop-Modus.

Reis. 15. Hinweis zum Vervollständigen eines Ausdrucks

Als Ergebnis erscheint auf dem Arbeitsfeld (Abb. 15) der gewünschte Ausdruck und ein Hinweis wie dieser: Sie wählen aus dem Menü aus der richtige Befehl und der Ausdruck wird automatisch vervollständigt. Wie aus dem Menü hervorgeht, können Sie nicht nur die mit den Bildschirmschaltflächen verknüpfte Bedingung auswählen, sondern auch aus dem Menü Abb. 15-Punkte-TasteDrücken Sie „ ", oder Tastendruck " “, was dem Drücken der Tastaturtasten (linker Pfeil, rechter Pfeil) entspricht, d. h. es ist möglich, ein Fotoalbum zu erstellen, das mit den Tastaturtasten „durchgeblättert“ wird.

Reis. 16. Tastenaufrufe auf der Tastatur

Lassen Sie uns den Befehl keyPress verwenden ” (Abb. 16), gehen Sie dann zum Ordner Timeline Control, wählen Sie den Befehl nextFrame aus und ziehen Sie ihn in das Arbeitsfeld (Abb. 17).

Reis. 17. Der Befehl nextFrame befindet sich im Ordner Timeline Control

Für eine Schaltfläche, die den Film an den Anfang des Fotoalbums bringt, können Sie das Drücken der Home-Taste aus dem Menü als Ereignis auswählen und dann (Abb. 18) den Befehl gotoAndStop auf das Feld ziehen, wodurch ein weiterer Befehl angezeigt wird Es erscheint ein Hinweis zur möglichen Syntax dieses Befehls.

Die Pfeile im Tooltip ermöglichen Ihnen die Anzeige verschiedene Varianten Syntax. Das Programm bietet zwei Möglichkeiten (Abb. 18 und 19), nämlich die Möglichkeit, eine Szene und einen Rahmen oder nur einen Rahmen festzulegen. In unserem Fall reicht es aus, nur den Frame anzugeben. Wenn der Szenenname weggelassen wird, wird standardmäßig zum Bild der aktuellen Szene gesprungen.

Reis. 18. Hinweis zur möglichen Befehlssyntax

Reis. 19. Mit dem dreieckigen Pfeil können Sie Syntaxoptionen anzeigen

Nachdem wir allen Tasten die entsprechenden zugewiesen haben Tastaturtasten, erhalten wir den folgenden Film, in dem das Durchblättern der Fotos über die Tastatur erfolgt und das Klicken mit der Maus auf die Schaltflächen auf dem Bildschirm keine Konsequenzen hat.

Ist es möglich, ein Szenario bereitzustellen, in dem verschiedene Ereignisse zu denselben Aktionen führen? Es stellt sich heraus, dass dies möglich ist. Dazu müssen Sie eine Liste mit Ereignisnamen im On-Ereignishandler auflisten. Wenn Sie in der Ereignisliste nach dem ersten Ereignis ein Komma setzen, bietet Ihnen das Programm selbst ein Menü an (Abb. 20).

Reis. 20. Wenn Sie in der Ereignisliste ein Komma eingeben, erscheint automatisch ein Menü mit zusätzlichen Befehlen

Fügen wir dem ersten Ereignis (Drücken einer Tastaturtaste) ein zweites Ereignis (Loslassen der Bildschirmtaste) hinzu:

ein(Taste drücken" ", freigeben)

Wiederholen wir den Vorgang für die restlichen Schaltflächen und als Ergebnis erhalten wir ein Fotoalbum, in dem Fotos sowohl mit der Maus als auch mit der Tastatur gescrollt werden (die Original-FLA-Datei kann über den Link abgerufen werden).

Im betrachteten Beispiel haben wir den Übergang nach Bildnummer verwendet, diese Methode ist jedoch nicht immer praktisch: Wenn sich die Bildnummerierung während des Filmbearbeitungsprozesses ändert, kann die Logik zusammenbrechen. Es ist bequemer, den Übergang nach Frame-Markierung zu verwenden. Schauen wir uns ein Beispiel an, das nicht nur das Durchblättern des Albums erfordert, sondern auch den Wechsel zu verschiedenen Abschnitten, also eine komplexere Navigation.

Lassen Sie das Album aus Zeichnungen bestehen, Computergrafik und Fotos.

Beschriften wir den ersten Frame des Abschnitts „Zeichnungen“ mit „Bilder“; in ähnlicher Weise weisen wir den ersten Frames anderer Abschnitte die Beschriftungen „Grafik“ und „Foto“ zu.

Erstellen wir eine Ebene zum Platzieren von Beschriftungen und nennen sie Lables. Um einen Rahmen zu beschriften, müssen Sie im Eigenschaftenfenster den Beschriftungstyp „Name“ auswählen und seinen Namen notieren. In unserem Fall Bilder (Abb. 21). Ebenso werden wir Markierungen in den Frames 5 und 10 platzieren (Abb. 22).

Reis. 21. Beispiel für die Zuweisung einer Beschriftung zu einem Rahmen

Fügen wir nun eine neue Ebene hinzu und nennen sie „Aktionen“. Rufen Sie im ersten Schlüsselbild der Aktionsebene das Bedienfeld „Aktionsrahmen“ auf (durch Drücken der Taste F9) und geben Sie den Befehl stop () ein (siehe Abb. 22).

Reis. 22. Drehbuch für die erste Aufnahme

Fügen wir eine weitere Ebene namens „Subjekte“ hinzu, in der wir den entsprechenden Rahmen Titel geben: „Zeichnungen“ (Abb. 23), „Grafiken“ und „Fotos“.

Reis. 23. Titel für die Rahmen des Abschnitts „Zeichnungen“.

Fügen wir nun seitlich Menüschaltflächen mit ähnlichen Namen hinzu, die wir auf einer neuen Ebene namens „Menü“ platzieren.

Drucken wir den ersten Eintrag des Menüs „Bilder“ vom linken Rand aus und wandeln ihn in ein Schaltflächensymbol um. Wählen Sie mit dem Pfeil-Werkzeug den Textblock „Bilder“ aus und führen Sie den Befehl „Ändern => In Symbol konvertieren“ aus (dieser Befehl kann auch mit der Taste F8 ausgeführt werden). Legen Sie im Bedienfeld „In Symbol konvertieren“ den Symboltyp „Schaltfläche“ fest und definieren Sie ihn Name als pictureButton (Abb. 24).

Reis. 24. Weisen Sie der Schaltfläche zum Wechseln in den Bilderbereich den Namen pictureButton zu

Lassen Sie uns vier Rahmen für die Schaltfläche „Zeichnungen“ erstellen: Der erste stellt einfach den Originaltext dar (Abb. 25), der zweite stellt denselben Text nur in Blau dar, wir überspringen den dritten Rahmen (in diesem Fall den Down-Rahmen). ist mit dem Over-Frame identisch), und im Hit-Frame zeichnen wir einen rechteckigen Bereich, der den Bereich definiert, in dem die Taste gedrückt wird (Abb. 26).

Reis. 25. Up-Frame des pictureButton

Reis. 26. Hit-Frame des pictureButton-Buttons

Jetzt müssen wir das Skript an die neu erstellte Schaltfläche anhängen. Wählen Sie dazu die Schaltfläche in Szene 1 aus und rufen Sie durch Drücken von F9 das Aktionsfeld auf und geben Sie dann den in Abb. gezeigten Code ein. 27.

Reis. 27. Skript zum Wechseln zu einem Frame mit einer Beschriftung