So erstellen Sie eine Flash-Animation (mit Bildern)

Schritt 1. Verstehen Sie die Grundlagen der Frame-by-Frame-Animation

Dies wird als die "traditionelle" Animationsmethode angesehen, da jeder Frame das gleiche Bild enthält, jedoch leicht verändert. Wenn die Bilder zusammen abgespielt werden, scheinen sich die Bilder zu bewegen. Dies ist die gleiche grundlegende Technik, die von traditionellen Handanimatoren verwendet wird, und ist zeitaufwendiger als das Tweening (siehe nächster Abschnitt).

Standardmäßig erstellt Flash Animationen mit 24 Bildern pro Sekunde (FPS). Das bedeutet, dass eine Sekunde Animation 24 Frames hat, aber nicht jeder Frame muss anders sein. Sie können dies anpassen, wenn Sie möchten, und viele Flash-Animationen verwenden 12 FPS, aber 24 erzeugen viel "glatter" aussehende Animationen

Schritt 2. Installieren Sie Flash Professional

Es gibt eine Vielzahl von Flash-Animationsprogrammen, aber das leistungsstärkste ist Adobes Flash Professional CC. Sie können die Testversion kostenlos installieren oder ein anderes Produkt verwenden, wenn Ihnen das Abonnement der Creative Cloud von Adobe nicht zusagt. Im Rest dieses Artikels wird Flash Professional oder jedes andere Bearbeitungsprogramm als "Flash" bezeichnet.

Schritt 3. Erstellen Sie Ihre Assets

Da eine Frame-für-Frame-Animation mehrere Bilder mit geringfügigen Unterschieden erfordert, müssen Sie alle diese Assets von Hand erstellen. Sie können sie alle erstellen, bevor Sie beginnen, oder sie nach und nach erstellen. Sie können das Flash-Programm verwenden, um direkt in Ihrem Projekt zu zeichnen, oder Sie können Ihre Assets in Ihrem bevorzugten Bilderzeugungsprogramm zeichnen.

Wenn Sie möchten, dass Ihre Bilder ohne Qualitätseinbußen skaliert werden, sollten Sie sie als Vektoren anstelle von Rastern erstellen. Vektorbilder werden bei jeder Skalierung von selbst neu gezeichnet, was bedeutet, dass es keine Pixelierung oder Aliasing gibt. Rasterbilder sind die traditionellen Bilder, an die Sie wahrscheinlich gewöhnt sind (Fotos, Paint-Bilder usw.). Diese lassen sich nicht gut skalieren und können ziemlich hässlich aussehen, wenn Sie sie größer machen möchten

Schritt 4. Erstellen Sie Ihren ersten Rahmen

Wenn Sie Flash zum ersten Mal starten, haben Sie eine leere Ebene und eine leere Timeline. Wenn Sie Frames hinzufügen, wird Ihre Timeline automatisch ausgefüllt. Sie können mit Ebenen ähnlich wie in Photoshop interagieren.

• Bevor Sie Ihr Bild hinzufügen, erstellen Sie einen grundlegenden Hintergrund für Ihren Film. Benennen Sie Ebene 1 in "Hintergrund" um und sperren Sie dann die Ebene. Erstellen Sie eine zweite Ebene und benennen Sie sie, wie Sie möchten. Dies ist die Ebene, auf der Sie Ihre Animation erstellen.
• Fügen Sie Ihre Zeichnung im ersten Frame der Leinwand hinzu. Sie können Ihre Zeichnung entweder von Ihrem Computer importieren oder die Zeichenwerkzeuge von Flash verwenden, um eine Zeichnung direkt im Programm zu erstellen.
• Ihr erster Frame wird ein Keyframe sein. Keyframes sind Frames, die ein Bild enthalten und das Rückgrat Ihrer Animation bilden. Sie erstellen jedes Mal einen neuen Keyframe, wenn sich das Bild ändert.
• Keyframes sind durch einen schwarzen Punkt in der Timeline gekennzeichnet.
• Sie brauchen nicht in jedem Frame ein neues Bild. Im Allgemeinen erzeugt ein Keyframe alle vier bis fünf Frames eine gute Animation.

Schritt 5. Verwandeln Sie Ihre Zeichnung in ein Symbol

Indem Sie Ihre Zeichnung in ein Symbol verwandeln, können Sie sie problemlos mehrmals in einem Rahmen hinzufügen. Dies ist besonders nützlich, wenn Sie schnell mehrere Objekte erstellen müssen, z. B. einen Fischschwarm.

• Wählen Sie Ihre gesamte Zeichnung aus. Klicken Sie mit der rechten Maustaste auf die Auswahl und wählen Sie "In Symbol konvertieren". Dadurch wird das Bild zu Ihrer Bibliothek hinzugefügt, wo Sie in Zukunft schnell darauf zugreifen können.
• Löschen Sie die Zeichnung. Mach dir keine Sorge! Sie fügen es der Szene wieder hinzu, indem Sie das Objekt einfach aus Ihrer Bibliothek ziehen. Sie können Ihrer Szene problemlos mehrere Instanzen derselben Zeichnung hinzufügen!

Schritt 6. Fügen Sie einige leere Rahmen hinzu

Sobald Sie Ihren ersten Frame fertig haben, können Sie Ihre leeren Frames hinzufügen, die zwischen dem ersten Keyframe und dem zweiten Keyframe vorhanden sind. Drücken Sie F5 vier- oder fünfmal, um nach Ihrem ersten Keyframe leere Frames hinzuzufügen.

Schritt 7. Erstellen Sie Ihren zweiten Keyframe

Nachdem Sie einige leere Frames hinzugefügt haben, können Sie Ihren zweiten Keyframe erstellen. Dazu gibt es im Wesentlichen zwei verschiedene Möglichkeiten: Sie können Ihren vorhandenen Keyframe kopieren und kleine Anpassungen vornehmen, oder Sie erstellen einen leeren Keyframe und fügen ein neues Bild ein. Wenn Sie Grafiken verwenden, die in einem anderen Programm erstellt wurden, sollten Sie die zweite Methode verwenden. Wenn Sie Ihre Grafiken mit den Designwerkzeugen von Flash erstellt haben, verwenden Sie die erste Methode.

• Um einen Keyframe mit dem Inhalt 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 Ihrer Timeline und wählen Sie „Leeren Keyframe einfügen“. Alles in Ihrer Szene wird entfernt.
• Nachdem Sie Ihren zweiten Keyframe erstellt haben, müssen Sie das Bild anpassen, um den Bewegungseffekt zu erzielen. Wenn Sie die Designwerkzeuge von Flash verwenden, können Sie mit dem Transformieren-Werkzeug Aspekte Ihrer Zeichnung auswählen und leicht bewegen, beispielsweise den Arm einer Strichmännchen-Person.
• Wenn Sie für jeden Keyframe neue Grafiken einfügen, sollten Sie sicherstellen, dass sie an derselben Position oder an der nächsten logischen Position auf dem Bildschirm platziert werden. Dadurch wird sichergestellt, dass die Grafik nicht zwischen den Frames hin und her springt.

Schritt 8. Wiederholen Sie den Vorgang

Nachdem Sie nun zwei Keyframes erstellt haben, ist es Zeit für die Iteration. Sie werden im Wesentlichen den gleichen Vorgang wiederholen, bis Sie mit Ihrer Animation fertig sind. Fügen Sie zwischen jedem Keyframe ein paar leere Frames hinzu und stellen Sie sicher, dass Ihre Bewegungen flüssig aussehen.

Nehmen Sie kleine, inkrementelle Änderungen vor. Ihre Animation sieht viel flüssiger aus, wenn Sie sehr kleine Änderungen am Keyframe vornehmen. Wenn Sie beispielsweise möchten, dass eine Strichmännchen-Person mit dem Arm winkt, sollte Ihr zweiter Keyframe nicht das andere Ende der Welle sein. Verwenden Sie stattdessen einige Keyframes, um vom Anfang der Welle zum Ende zu wechseln. Dadurch wird eine viel flüssigere Animation erzeugt

Teil 2 von 3: Erstellen einer Punkt-zu-Punkt-Animation (Tweening)

Schritt 1. Verstehen Sie die Grundlagen des Tweenings

Flash enthält eine Funktion namens Tweening, mit der Sie im Wesentlichen Start- und Endpunkte für Ihr Objekt festlegen können. Flash bewegt und transformiert dann das Objekt basierend auf Ihren Einstellungen zwischen diesen beiden Punkten, wodurch die Illusion einer Animation entsteht. Sie müssen nicht wie bei Frame-by-Frame-Animationen Bilder für jeden Keyframe erstellen.

• Tweening ist besonders nützlich, um "Morphing"-Effekte zu erzeugen, bei denen ein Objekt im Laufe der Animation zu einem anderen wird.
• Frame-by-Frame-Animation und Tweening können zusammen im selben Film verwendet werden.
• Es kann immer nur ein Objekt gleichzeitig einem Bewegungs-Tween unterzogen werden. Das heißt, wenn Sie mehrere Objekte gleichzeitig animieren möchten, müssen sich diese alle auf separaten Ebenen befinden.

Schritt 2. Erstellen Sie Ihr erstes Objekt

Im Gegensatz zu Frame-by-Frame-Animationen müssen Sie nicht mehrere Objekte erstellen, um mit der Tween-Funktion zu animieren. Stattdessen erstellen Sie ein Objekt und ändern dann seine Eigenschaften während des Tweening-Prozesses.

• Erstellen Sie einen grundlegenden Hintergrund für Ihren Film, bevor Sie Ihr Bild hinzufügen. Benennen Sie Layer 1 in "Hintergrund" um und sperren Sie dann den Layer. Erstellen Sie eine zweite Ebene und benennen Sie sie, wie Sie möchten. Dies ist die Ebene, auf der Sie Ihre Animation erstellen.
• Es wird dringend empfohlen, die integrierten Design-Tools von Flash zu verwenden oder Ihr Bild aus einem Vektor-Zeichenprogramm zu importieren. Vektoren können problemlos ohne Verzerrung skaliert werden, während herkömmliche Rasterbilder nicht gut skalieren und transformieren.

Schritt 3. Wandeln Sie Ihr Objekt in ein Symbol um

Um Ihr Objekt zu tweenen, müssen Sie es in ein Symbol umwandeln. Dies ist das Format für Objekte, das Flash verwendet, um sie zu bearbeiten. Wenn Sie versuchen, ein Objekt zu tweenen, das nicht in ein Symbol umgewandelt wurde, werden Sie zuerst dazu aufgefordert.

Klicken Sie mit der rechten Maustaste auf Ihr Objekt und wählen Sie "In Symbol konvertieren". Das Objekt wird Ihrer Bibliothek hinzugefügt, was das Klonen von Objekten erleichtert

Schritt 4. Erstellen Sie Ihr erstes Bewegungs-Tween

Ein Bewegungs-Tween bewegt das Objekt von einem Ort zum anderen. Klicken Sie mit der rechten Maustaste auf das Symbol in Ihrer Szene und wählen Sie "Bewegungs-Tween erstellen". 24 Frames werden Ihrer Timeline hinzugefügt, da dies die Standardlänge eines Tweens ist. Denken Sie daran, dass Flash standardmäßig mit 24 Bildern pro Sekunde animiert, was bedeutet, dass dieser Bewegungs-Tween eine Sekunde dauert.

Wenn Sie das Bewegungs-Tween erstellen, werden Sie automatisch zum letzten Bild des Tweens bewegt

Schritt 5. Erstellen Sie die Flugbahn

Nachdem Sie das Tween erstellt haben, können Sie das Objekt an die gewünschte Position verschieben. Flash zeigt die Flugbahnlinie an, die gepunktet ist, um die Position des Objekts für jeden Frame des Tweens anzuzeigen.

Wenn Sie die Trajektorie zum ersten Mal erstellen, ist sie eine gerade Linie vom Startpunkt zum Endpunkt

Schritt 6. Erweitern Sie Ihre Hintergrundrahmen

Wenn Sie Ihre Animation jetzt ausführen würden, würde sich Ihr Objekt entlang der Flugbahn bewegen, aber Ihr Hintergrund würde nach einem Frame verschwinden. Um dies zu beheben, müssen Sie Ihren Hintergrund über alle Frames der Animation erweitern.

Wählen Sie Ihre Hintergrundebene in der Zeitleiste aus. Klicken Sie auf den letzten Frame auf Ihrer Timeline, der auch der Frame sein sollte, auf dem Ihr Bewegungs-Tween endet. Drücken Sie F5, um bis zu diesem Punkt Frames einzufügen, wodurch Ihr Hintergrund während des gesamten Tweens angezeigt wird

Schritt 7. Fügen Sie Keyframes hinzu

Wenn Sie Ihrer Flugbahn Keyframes hinzufügen, können Sie Ihr Objekt während des Bewegungs-Tweens transformieren. Sie können nur Änderungen an einem Objekt vornehmen, wenn es mit Keyframes versehen ist. Um Ihrer Flugbahn Keyframes hinzuzufügen, wählen Sie zuerst den Frame in der Timeline aus, den Sie in einen Keyframe umwandeln möchten. Klicken Sie dann auf das Objekt und ziehen Sie es an die Position, an der es sich während dieses Frames befinden soll. Ihre Flugbahn wird automatisch angepasst und ein Keyframe wird der Timeline hinzugefügt. Keyframes werden durch Rautensymbole in der Timeline gekennzeichnet.

Schritt 8. Passen Sie Ihre Tween-Flugbahn an

Um den Pfad Ihres Objekts zu ändern, können Sie auf jede der Rahmenpositionsmarkierungen auf dem Pfad klicken und sie an eine neue Position ziehen. Vermeiden Sie es, den Pfad zu stark zu variieren, oder das Objekt bewegt sich unregelmäßig (es sei denn, dies ist Ihr Ziel!).

Schritt 9. Transformieren Sie Ihr Objekt

Sobald Sie Ihre Keyframes und die Bewegungsbahn festgelegt haben, können Sie Ihr Objekt so transformieren, dass es sich ändert, während es sich durch die Bewegungs-Tween-Trajektorie bewegt. Sie können die Form, Farbe, Drehung, Größe und alle anderen Eigenschaften des Objekts ändern.

• Wählen Sie den Rahmen aus, in dem die Transformation erfolgen soll.
• Öffnen Sie das Eigenschaftenfenster des Objekts. Sie können Strg+F3 drücken, wenn das Panel derzeit nicht sichtbar ist.
• Ändern Sie alle Werte im Eigenschaftenfenster, um das Objekt zu beeinflussen. Sie können beispielsweise den Farbton oder die Farbe ändern, Filter hinzufügen oder den Maßstab ändern.
• Sie können auch das Werkzeug Frei transformieren verwenden, um die Form nach Belieben zu ändern.

Schritt 10. Machen Sie Ihrem Tween den letzten Schliff

Testen Sie Ihr Bewegungs-Tween, indem Sie Strg+↵ Enter drücken. Stellen Sie sicher, dass die Transformationen gut aussehen und sich die Animation mit der richtigen Geschwindigkeit bewegt. Wenn sich Ihre Animation zu schnell bewegt, können Sie entweder die FPS der Szene verringern oder die Tween-Spanne erhöhen.

• Standardmäßig beträgt die FPS 24, also versuchen Sie, sie auf 12 zu senken. Klicken Sie dazu außerhalb der Szene und ändern Sie dann die FPS im Eigenschaftenfenster. Wenn Sie ihn auf 12 ändern, verdoppelt sich die Länge Ihrer Animation, kann sie jedoch "ruckartiger" machen.
• Um die Tween-Spanne zu ändern, wählen Sie die Ebene aus, die das Tween enthält, und ziehen Sie es mit dem Schieberegler heraus. Wenn Sie möchten, dass das Tween doppelt so lang ist, erweitern Sie es auf 48 Frames. Stellen Sie sicher, dass Sie leere Frames in Ihre Hintergrundebene einfügen, damit der Hintergrund nicht nach der Hälfte der Animation verschwindet. Um den Hintergrund zu erweitern, wählen Sie die Ebene aus, klicken Sie auf das letzte Bild der Animation in der Zeitleiste und drücken Sie dann F5

Teil 3 von 3: Hinzufügen von Sound und Musik

Schritt 1. Nehmen Sie Ihre Soundeffekte und Musik auf oder suchen Sie sie

Sie können Aktionen, die in Ihrer Animation auftreten, Soundeffekte hinzufügen, um sie hervorzuheben und ihr eine gewisse Persönlichkeit zu verleihen. Musik macht Ihre Animation immersiver und kann eine gute Animation zu einer unglaublichen machen. Flash unterstützt eine Vielzahl von Dateiformaten, darunter AAC, MP3, WAV und AU. Wählen Sie die Option, die Ihnen die beste Qualität für die niedrigste Dateigröße bietet.

MP3 bietet Ihnen normalerweise eine absolut akzeptable Klangqualität, während die Dateigröße auf ein Minimum beschränkt bleibt. Vermeiden Sie nach Möglichkeit WAV-Dateien, da diese oft recht groß sind

Schritt 2. Importieren Sie die Sounddateien in Ihre Bibliothek

Bevor Sie Ihrem Projekt Sounds hinzufügen können, müssen sie der Bibliothek von Flash hinzugefügt werden. So können Sie sie später schnell zu Ihrem Projekt hinzufügen. Klicken Sie auf Datei → Importieren → In Bibliothek importieren. Suchen Sie auf Ihrem Computer nach der Sounddatei. Stellen Sie sicher, dass die Sounddatei einen leicht zu merkenden Namen hat, damit Sie sie später im Menü schnell finden können.

Schritt 3. Erstellen Sie für jede Sounddatei eine neue Ebene

Dies ist nicht unbedingt erforderlich, da Sie vorhandenen Layern Sound hinzufügen können. Wenn Sie jedoch jede Datei auf einer eigenen Ebene platzieren, haben Sie viel mehr Kontrolle über das Ein- und Ausblenden, das Starten und Stoppen und es ist einfacher, Sounds zu verschieben.

Schritt 4. Erstellen Sie einen Keyframe, an dem der Ton beginnt

Wählen Sie auf der Ebene des Sounds den Frame in der Animation aus, bei dem der Sound beginnen soll. Drücken Sie F7, um einen leeren Keyframe einzufügen. Wenn Sie beispielsweise eine Musikdatei einfügen möchten, die für die Dauer der Animation abgespielt wird, wählen Sie den ersten Frame auf der Ebene der Musikdatei aus. Wenn Sie einen Dialog für einen Charakter hinzufügen, wählen Sie den Rahmen aus, in dem der Charakter zu sprechen beginnt.

Schritt 5. Fügen Sie den Ton oder die Musikdatei hinzu

Im Eigenschaften-Rahmen sehen Sie einen Sound-Bereich. Möglicherweise müssen Sie es erweitern, um die Optionen anzuzeigen. Klicken Sie auf das Menü "Name" und wählen Sie die gewünschte Datei aus Ihrer Bibliothek aus.

Schritt 6. Konfigurieren Sie die Sounddatei

Nachdem Sie eine Datei ausgewählt haben, können Sie deren Wiedergabe konfigurieren. Die Auswahl hängt davon ab, was der Ton in der Animation erreichen soll. Sie können die Effekt-, Sync- und Repeat-Einstellungen jedes Sounds ändern, indem Sie das Menü unterhalb des Name-Menüs im Eigenschaften-Rahmen verwenden.

• Effekt - Hiermit können Sie dem Sound Effekte hinzufügen, wie z. B. Ein- und Ausblenden oder Hinzufügen von Echo. Sie können im Dropdown-Menü aus voreingestellten Einstellungen auswählen oder auf das Stiftsymbol neben dem Menü klicken, um Ihre eigenen benutzerdefinierten Einstellungen zu erstellen.
• Sync - Dies bestimmt, wie der Song in der Animation abgespielt wird. Das Ereignis spielt den Ton ab, bis es beendet ist. Wenn derselbe Sound noch einmal ausgelöst wird, bevor der erste endet, wird das Original weitergespielt, bis es zu Ende ist. Start funktioniert wie Event, stoppt aber, wenn der Ton erneut abgespielt wird. Stop stoppt den Ton in diesem Frame. Wenn Sie dies in Verbindung mit anderen Soundeigenschaften verwenden möchten, erstellen Sie einen neuen Keyframe an der Stelle, an der der Sound anhalten soll, und verwenden Sie diese Option. Stream versucht, den wiedergegebenen Ton mit der Anzahl der Frames auf anderen Ebenen abzugleichen. Dies wird am besten für den Dialog verwendet.
• Wiederholen - Mit dieser Einstellung können Sie einstellen, wie lange der Ton wiederholt wird. Sie können es so einstellen, dass es nur einmal abgespielt oder so oft wiederholt wird, wie Sie möchten. Wenn Ihre Animation eine Looping-Animation ist, sollten Sie Ihre Musik auf eine Endlosschleife einstellen.

Schritt 7. Beenden Sie Ihr Projekt

Wenn Sie mit Ihrem Projekt fertig sind, speichern Sie es als SWF-Datei. Dies ist das Format, das zum Abspielen des Films verwendet wird. Sie können es in praktisch jedem Webbrowser abspielen oder einen dedizierten Flash-Player verwenden, um es anzusehen. Es gibt auch eine Vielzahl von Websites, auf die Sie es hochladen können, damit andere sie sehen können, z. B. Newgrounds, Albino Blacksheep und Kongregate.

Schritt 8. Führen Sie Ihre zukünftigen Projekte weiter

In diesem Handbuch werden die Grundlagen zum Erstellen einer Animation behandelt, aber Sie können noch viel mehr lernen und tun. Fügen Sie ein paar Schaltflächen und verzweigte Pfade hinzu, und Sie haben ein Abenteuerspiel, das Sie selbst auswählen können. Sie können einen Crashkurs in ActionScript belegen und erhalten viel mehr Kontrolle über die feineren Details Ihrer Animation. Experimentieren Sie weiter, und Sie werden bald feststellen, dass Sie alle Arten von Tricks und Implementierungen lernen.

Empfohlen:

So erstellen Sie eine Broschüre mit InDesign (mit Bildern)

Adobe InDesign ist ein Softwareprodukt, mit dem Sie schnell und einfach Desktop-Publishing-Projekte erstellen können. Sie können Broschüren und andere Dokumente erstellen, indem Sie die mitgelieferten Vorlagen verwenden und diese an Ihre Bedürfnisse anpassen.

So erstellen Sie eine PDF-Datei mit OpenOffice: 7 Schritte (mit Bildern)

Das Adobe PDF-Format ist wie eine Word- oder Excel-Datei ein portabler Dokumentenstandard und hat Vorteile gegenüber Word- oder Excel-Dateien. Viele Leute haben den Adobe Reader zum Anzeigen von PDF-Dateien oder können ihn oder alternative PDF-Reader kostenlos herunterladen.

So erstellen Sie eine Website mit Word (mit Bildern)

Obwohl es möglich ist, eine HTML-Seite mit Word zu erstellen, wird davon abgeraten, dies zu tun, wenn die Seite für eine professionelle oder weitreichende Werbeaktion verwendet werden soll. Eine eigene Website mit Word zu erstellen ist wie ein eigenes Haus mit LEGO-Bausteinen zu bauen:

So erstellen Sie eine einfache Präsentation mit Flash (mit Bildern)

In diesem Artikel erfahren Sie, wie Sie eine sehr einfache, aber attraktive neue Skyline Gt-R 32-Präsentation erstellen. Diese Präsentation können Sie für jeden Flash-Header verwenden, wenn Sie ein Produkt für Flash-Banner präsentieren müssen.

So erstellen Sie eine Splash-Seite für eine Website: 8 Schritte (mit Bildern)

Sie möchten eine Splash-Seite auf Ihrer Webseite platzieren? Splash-Seiten sind eine großartige Möglichkeit, Ihre Website zu brandmarken. Dieses How-To setzt voraus, dass Sie sich mit HTML und CSS auskennen, und es kann hilfreich sein, wenn Sie auch einige grundlegende JavaScript-Kenntnisse kennen.