SaaS-Erkläranimation: Vom UI-Design zur Animation in After Effects

1. Einführung: Du freust dich darauf, dir reibungslose SAS-Erklärvideos anzusehen reibungslose SAS-Erklärvideos und fragst dich, wie sie das überhaupt machen? Hallo, ich bin Valerie, und nachdem mehrere erfolgreiche Kurse erstellt habe, freue ich mich sehr, Ihnen mitteilen zu können, dass mein bisher fortgeschrittenster Kurs endlich fertig ist Und dieses Mal lernst du, wie du ein erstklassiges SAS-Erklärvideo von Grund auf neu erstellst erstklassiges SAS-Erklärvideo Nachdem ich mir über 200 Premium-SAS-Erklärvideos angesehen hatte, nahm ich die Herausforderung an, den vollständigsten Kurs für die Erstellung von SAS-Erklärvideos zu erstellen, vom Verstehen des Skripts und der Erstellung von Storyboards bis hin zur Vorbereitung der Synchronisation von Figma-Dateien mit Voice-Overs und der Animation sauberer dynamischer nahm ich die Herausforderung an, den vollständigsten Kurs für die Erstellung von SAS-Erklärvideos zu erstellen , vom Verstehen des Skripts und der Erstellung von Storyboards bis hin zur Vorbereitung der Synchronisation von Figma-Dateien mit Voice-Overs und Storyboards bis hin zur Vorbereitung der Synchronisation von Figma-Dateien Synchronisation Demos. Es geht nicht um auffällige Effekte, sondern um echte Techniken und Workflows, die von Profis verwendet werden. Sie werden ein vollständiges 62. SAS-Erklärvideo erstellen , das professionell aussieht, sich flüssig anfühlt und den Industriestandards wirklich entspricht Dies ist kein Anfängerkurs und umfasst 24 vertiefende Lektionen Mach dir keine Sorgen. Sie werden von der ersten Sekunde an völlig Die detaillierten Erklärungen, realen Beispiele, persönliche Anleitung, die Fragen in der Mitte des Unterrichts und natürlich die Animationen selbst werden Sie während der gesamten Erfahrung inspirieren und konzentrieren. Am Ende des Kurses werden Sie das Selbstvertrauen haben, jedes Projekt anzunehmen , und was noch besser ist, Sie werden ein qualitativ hochwertiges Abschlussprojekt erhalten, das Sie Ihren zukünftigen Kunden stolz als Beispiel zeigen können Ihren zukünftigen Kunden stolz als Beispiel Wenn Sie also bereit sind, Ihre Motion-Design-Fähigkeiten auf die nächste Stufe zu heben, nehmen Ihre Motion-Design-Fähigkeiten auf die nächste Stufe zu heben, nehmen noch heute am Kurs teil. Lassen Sie uns lernen, wie Sie SAS-Erklärvideos wie ein Profi erstellen 2. Kurseröffnung und Einrichtung von Projektdateien: Hallo, und willkommen zum Kurs. In diesem Video möchte ich Sie durch einige wichtige Hinweise führen, bevor Sie mit dem Unterricht beginnen. Vergessen Sie zunächst bitte nicht den Hauptkursordner, in dem Sie alle Materialien finden, die wir in den Lektionen verwenden werden. Ein weiterer sehr wichtiger Hinweis, den es zu erwähnen gilt, ist , dass Sie von Lektion zwei bis Lektion sechs nicht folgen müssen. diesen Lektionen geht es eher darum, einige erste Schritte vor der Animation zu erklären , hauptsächlich darum, alle Designdateien vor der Animationsphase vorzubereiten . In diesen Lektionen werde ich Ihnen zeigen, wie Sie die Designs von Figma nach Illustrator übertragen und für die Animation vorbereiten Wenn Sie sich also dazu entschließen, dies zusammen mit mir zu tun, speichern Sie Ihre Illustrator-Dateien bitte im AI-Ordner Wenn wir mit der Animation des Projekts beginnen, bestehe ich nachdrücklich darauf, dass Sie meine vorbereiteten Dateien verwenden, die Sie in diesem Ordner finden Also egal, ob du deine eigenen Dateien gespeichert hast oder nicht, auf jeden Fall werden wir alle meine Dateien auf den Bildschirmen für den AE-Ordner verwenden Wenn wir mit der Animation beginnen, speichern Sie bitte Ihre After Effects-Projektdatei im AE-Ordner , den Sie im Hauptordner des Kurses finden , den Sie von mir heruntergeladen haben Und sobald wir das Projekt abgeschlossen und den Rendervorgang gestartet haben, speichern Sie Ihre Dateien im endgültigen Ordner , den Sie auch im Hauptordner des Kurses finden Und das Letzte, was ich erwähnen möchte, ist, dass alle Links zu den Dingen, die ich während des Kurses erwähnen werde , in der PDF-Datei mit dem Namen inks zu finden sind. Nachdem das geklärt ist, lassen Sie uns anfangen. 3. Figma-Einrichtung und Importieren des Designs: Dort. Lassen Sie uns zunächst ein neues Konto bei Figma erstellen Oder wenn Sie bereits ein Konto haben, melden Sie sich einfach an. Falls Sie noch keines haben, können Sie es ganz einfach erstellen indem Sie sich mit Ihrem Gmail-Konto anmelden. Jetzt siehst du vielleicht andere Dinge als ich hier, und das liegt daran, dass ich bereits einige Projekte importiert habe und das liegt daran, dass ich bereits einige Projekte importiert um dir in einer Minute etwas zu zeigen. Lassen Sie uns vorerst auf den Profilnamen klicken und die Desktop-Version von Figma herunterladen die Desktop-Version von Figma Es gibt keinen großen Unterschied zwischen den beiden. Ich bevorzuge es einfach, die App anstelle des Browsers zu verwenden. Der Installationsvorgang ist ziemlich einfach. Wenn Sie fertig sind, öffnen Sie die App und melden wir uns nun mit der Browserversion beim Konto an. Ordnung. Also, wenn wir fertig sind, lassen Sie uns die grundlegenden Funktionen durchgehen, die Sie als Motion Designer, der mit Figma arbeitet, kennen müssen Zunächst können wir das Thema ändern. Wir haben drei Hauptoptionen. In den Einstellungen gibt es nichts, was wir wirklich wissen müssen. Also lass uns weitermachen. Jetzt möchte ich, dass Sie zum Bereich Vorlagen und Tools gehen. Hier finden Sie viele nützliche Ressourcen, die Sie in Ihren Projekten verwenden können. Vielleicht siehst du in deinem Fall andere Dinge als ich, aber das spielt keine Rolle. Was wichtig ist, ist, dass Sie hier Designs finden , die Sie in Ihren After Effects-Projekten verwenden können. Später im Kurs werden wir lernen, am einfachsten und kostengünstigsten diese Designs am einfachsten und kostengünstigsten in After Effects importieren können. Sie können filtern, um nur die kostenlosen Elemente zu sehen, und wenn Sie bestimmte Benutzeroberflächendesigns benötigen, können Sie die Suchleiste verwenden, um etwas zu finden, das Ihnen gefällt. Ich bin sicher, Sie werden überrascht sein, hier einige ziemlich hochwertige Designs zu entdecken einige ziemlich hochwertige Designs , die völlig kostenlos sind. Achten Sie nur darauf, in den Beschreibungen nachzuschauen , welche Designs für Marketingzwecke verwendet werden können und welche nur für Lernzwecke bestimmt sind . In Ordnung. Ich werde alles wieder normalisieren und lass uns weitermachen. Wenn du hier klickst, siehst du die Teamprojekte, an denen du gerade arbeitest. In Kürze werden wir uns eingehend mit diesem Abschnitt befassen. In Entwürfen sehen Sie die Dateien, die Sie von außerhalb importiert haben In allen Projekten sehen Sie die Projekte, an denen Sie gerade arbeiten Und im Papierkorb werden Sie alle gelöschten Dateien sehen, okay? Wenn wir jetzt zu den Entwürfen zurückkehren, können wir sehen, dass wir, wenn wir ein neues Design erstellen möchten, hier klicken und das tun können Aber in unserem Fall werden wir natürlich kein Design von Grund auf neu erstellen natürlich kein Design von Grund auf neu Als Motion-Designer erhalten wir normalerweise vom Kunden einen Figma-Link zum Design, oder wir erhalten eine Figma-Datei mit dem In unserem Fall habe ich auf der Website von Invoto Elements ein supercooles Figma-Design einer SAS-Plattform gefunden ein supercooles Figma-Design einer Invoto Elements ein supercooles Figma-Design einer SAS-Plattform Dies ist der Name des Designers. Also schrei ihn an. Hier gibt es viele verschiedene Panels. Das macht es zu einem perfekten Beispiel für ein komplexes SAS-Projekt, an dem wir üben können. Wir werden es im Kurs so verwenden , als ob es uns ein Kunde geschickt hätte. Gehen wir jetzt zurück zu Figma und importieren dieses Design, damit wir es verwenden können dazu zunächst Klicken wir dazu zunächst auf das Plus-Symbol neben dem Abschnitt „Entwürfe“ und wählen Sie dann Import Klicken Sie nun auf Vom Computer importieren und suchen Sie das FigmaFle in unserem Assets-Ordner , den Sie für mich heruntergeladen haben Sie abschließend die CRM-Website und den Kit-Ordner auf, wählen Sie FigmaFle Warten Sie nun einige Sekunden, bis das Design in den Entwurfsbereich hochgeladen wurde Großartig. Das Importieren einer Figma-Datei ist also eine Möglichkeit, das Design vom Kunden zu erhalten, aber es gibt auch eine andere Möglichkeit über den Figma-Link Wenn ein Kunde sein Figma-Design über Ihre E-Mail mit Ihnen teilt , wird hier im Glockensymbol eine Benachrichtigung angezeigt Unabhängig davon, ob Sie auf die Benachrichtigung klicken oder wie jetzt, importieren Sie die Figma-Datei. Klicken Sie einfach darauf, um sie zu öffnen. In Ordnung. Lassen Sie uns nun dieses FigMA-Design untersuchen. Dieses Design ist sehr komplex, aber es ist super organisiert damit befassen, werden wir nun die häufigsten Aktionen sehen , die Sie als Motion-Designer ausführen müssen , wenn Sie sich darauf vorbereiten, die Designs in After Effects zu verwenden. Als Motion-Designer sollten Sie also zunächst sicherstellen, dass Sie nicht an dem gemeinsam nutzbaren Projekt arbeiten Das bedeutet, dass Sie sich nicht in das Designteam dieses Projekts einmischen möchten das Designteam dieses Projekts Wenn Sie das Design über einen gemeinsam nutzbaren Figma-Link erhalten, Sie hier andere Profile sehen, bei denen es sich möglicherweise um das Designteam des Kunden handelt, das an diesem Projekt arbeitet In diesem Fall würde ich als Erstes dieses Projekt duplizieren, unabhängig davon, ob ich die Datei über einen gemeinsam nutzbaren Link oder nur die Figma-Datei Auf diese Weise habe ich das Original unangetastet und werde mich nicht in das Designteam einmischen , das Lassen Sie uns dazu das Projekt schließen und es im Entwurfsbereich duplizieren Klicken Sie mit der rechten Maustaste und wählen Sie Duplizieren. Um sicherzugehen, dass ich weiß, dass es das Design ist, an dem ich arbeiten werde, füge ich meinen Namen dem Projektnamen hinzu. Und damit nur ich an diesem Projekt herumspielen kann, verschiebe ich es in meine persönlichen Teamprojekte, die ich im Bereich Alle Projekte finde. Jetzt können wir zu unseren Projekten gehen und das duplizierte Design öffnen Fantastisch. Jetzt werden neben Ihrem Profil keine anderen Profile in der oberen rechten Ecke neben Ihrem Profil keine anderen Profile mehr angezeigt. Großartig. Fangen wir also an, dieses Figma-Projekt zu erkunden Wie Sie vielleicht verstehen, kann jedes Figma-Projekt anders aussehen als ein anderes, wie After Effects-Projekte, alle unterschiedlich aussehen, je nachdem, wer sie entworfen hat Mein Ziel ist es, dass Sie sich mit dem grundlegenden Figma-Layout vertraut machen, damit Sie durch die Figma-Projekte navigieren können , die Sie von einem Kunden erhalten Und dieses Design ist ein gutes Beispiel, weil es, wie ich bereits sagte, sehr komplex ist und viele Designelemente enthält Zuallererst in jedem Figma-Projekt wird es in jedem Figma-Projekt einen Seitenbereich und einen Ebenenbereich geben Im Grunde sollten wir uns als Motion-Designer um den linken Bereich von Figma kümmern Lassen Sie sich von der rechten Seite nicht einschüchtern. Das ist kein Bereich, den wir berühren oder verändern müssen. Der Ebenenbereich ändert sich je nach der von uns ausgewählten Seite. Im Moment haben wir das Deckblatt ausgewählt und sehen daher die Ebenen für diese spezielle Seite. Wenn Sie mit einem guten Kunden zusammenarbeiten, finden Sie in der Regel alle Designrichtlinien in der Figma-Datei Versuchen Sie also zuerst, nach ihnen zu suchen, wenn Sie die Datei öffnen. sie nicht haben, können Sie gerne nach einem PDF oder einer anderen Datei mit den Richtlinien des Unternehmens fragen anderen Datei mit , falls sie eine haben. Okay, jetzt, wie ich bereits sagte, ändert sich der Ebenenbereich. Je nach Projekt wählen wir im Bereich Seiten aus. Wie Sie sehen, erhalte ich jedes Mal, wenn ich ein anderes Seitendesign auswähle, Mal, wenn ich ein anderes Seitendesign auswähle, eine andere Ebenenstruktur. So funktioniert FIGMA. Eine weitere Sache, die Sie wissen müssen, ist, dass Sie die Linie zwischen den Seiten in den Ebenenabschnitten verschieben können die Linie zwischen den Seiten in den Ebenenabschnitten verschieben Seiten in den Ebenenabschnitten Wie Sie sehen können, haben wir viele andere Seiten in dieser SIGMA-Datei In den meisten Fällen finden Sie hier alle Ressourcen, die das Designteam zur Erstellung seiner SAS-Plattform-Panels verwendet Erstellung seiner SAS-Plattform-Panels sowie alle UI-Designs der Plattform Falls Sie also die tatsächlichen SASUIPanel-Designs nicht finden können, fragen Sie entweder den Kunden, unter welcher Seite es sich befindet, oder suchen Sie einfach nach einer Seite, die auf das Design verweist Wie in diesem Beispiel können wir es sehen, wenn wir auf die Design-Seite der Website klicken Klicken wir also darauf und passen das Panel so an, dass wir alle Ebenen dieser Seite sehen können. Sie können die Linie verschieben oder einfach auf den Seitennamen klicken , um diesen Abschnitt zu reduzieren. Jetzt können wir alle UI-Panel-Designs der SAS-Plattform des Kunden sehen . Wie ich bereits sagte, ist es ein sehr komplexes Projekt mit vielen UI-Panels, und nicht immer werden Sie so ein großes Projekt haben. Aber es ist eine gute Gelegenheit für uns an dieser Art von Projekt zu üben, damit Sie später auf Ihrer Reise für jede Figma-Datei bereit später auf Ihrer Reise für jede Figma-Datei Es ist ein gut organisiertes Projekt, und wenn Sie die Ebenen eines Panels öffnen, werden Sie die Unterebenen sehen , die dieses spezielle Panel bilden So sollte eine gute Figma-Designdatei strukturiert sein. Sie sollten jedoch wissen, dass unabhängig davon, wie strukturiert das Projekt ist, manchmal kleine Probleme im Design auftreten können Lassen Sie mich zu meinem Dashboard zurückkehren und Ihnen zeigen, was ich meine. Tun Sie vorerst nichts. Schau einfach zu und hör zu. Ich gehe zu den Entwürfen und gebe ein anderes UI-Kit ein, das ich aus dem Internet heruntergeladen habe Es könnte leicht ein Design sein, das ich von einem Kunden bekommen habe. Hier ist die Struktur des Designs also etwas anders. In Pages gibt es eine dunkle Version eines Plattformdesigns. Vor allem aber, wenn ich in dieses Fenster hineinzoome, können wir sehen, dass hier ein kleiner Fehler vorliegt. In diesem Fall doppelklicke ich einfach auf die Ebenen, bis ich zur richtigen komme, ähnlich wie wir es in Illustrator machen Dann kann ich es verschieben, und jetzt sehe ich, dass es zwei Objekte gibt, die ich danach löschen kann Ich bringe diese Form wieder an ihre ursprüngliche Position. Großartig. Jetzt möchte ich Ihnen ein weiteres Beispiel für ein Figma-Designprojekt zeigen ein weiteres Beispiel für ein Figma-Designprojekt Ich möchte, dass Sie in diesem Fall sehen, dass Sie manchmal ein Design mit unterschiedlichen Panelgrößen erhalten können , wie Sie hier sehen können Außerdem gibt es Situationen, in denen Sie ein dunkles und ein helles Design nebeneinander haben. Ich zeige Ihnen das alles , damit Sie mit den verschiedenen Figma-Projektstrukturen vertraut Ordnung. Jetzt kehre ich zu unserem Design zurück und lass uns zusammenarbeiten. Zunächst möchte ich, dass Sie sich daran gewöhnen, das Design zu vergrößern und verkleinern und sich durch das Design zu bewegen Halten Sie die Strg- oder Befehlstaste auf dem Mac gedrückt und bewegen Sie das Mausrad, um die Ansicht zu vergrößern, um sich zu bewegen, ähnlich wie bei Adobe-Software Halten Sie die Leertaste gedrückt und ziehen Sie den Bildschirm Wie Sie sehen können, haben wir hier viele Panel-Designs, und wir werden sie natürlich nicht alle verwenden. Wir werden nur diejenigen verwenden, die für unser Projekt relevant sind. Ich möchte, dass Sie beachten , dass wir selbst bei diesem sehr gut organisierten Design immer noch einige kleine Designprobleme feststellen können. Achten Sie auf diesen Bereich , in dem wir den Pfeil sehen. Hier sieht es gut aus. Wenn wir jedoch zu einem anderen Panel-Design wechseln, können wir deutlich erkennen, dass sich diese Ebene nicht der richtigen Stelle im Ebenenstapel befindet. Da sich dieser Fehler in vielen Panels wiederholt , werden wir ihn hier nicht korrigieren Wir werden es später beim Import in After Effects beheben . Vorher müssen wir jedoch genau wissen welche Panels aus dem Design wir verwenden werden. Das werden wir in der nächsten Lektion tun. Das wird ein guter. Also wir sehen uns dort. 4. Lesen Sie das Skript und planen Sie das Storyboard: Komm zurück. In dieser Lektion möchte ich, dass du nichts tust, nur zuschaust und lernst. Nachdem wir die Design-Infigma geöffnet haben, müssen wir nun verstehen, müssen wir nun verstehen welche Panels wir in unseren After Effects-Projekten verwenden sollten Und das sollte Ihr nächstes Anliegen sein wenn Sie an einem komplexen SAS-Video arbeiten Die beste Ressource dafür wird immer das Skript sein. Es kann ein Skript sein , das wir von einem Kunden erhalten , oder ein Skript, das wir selbst erstellen. In jedem Fall ist das Skript die Quelle Nummer eins, die als Nächstes untersucht werden muss. Stellen wir uns in unserem Fall vor, dass wir das Skript vom Kunden bekommen haben. An diesem Punkt in meinem Prozess der Erstellung eines SAS-Videos beginne ich normalerweise mit der Erstellung des Storyboards In den meisten Fällen ist es etwas einfacher zu erstellen als ein Storyboard für ein normales Erklärvideo Das liegt daran, dass wir in vielen Szenen in SAS-Videos große Titelanimationen und die Animation der Benutzeroberflächen der Software zeigen müssen und die Animation der Benutzeroberflächen der Software Meiner Meinung nach ist das einfacher, als komplexe visuelle Konzepte zu entwickeln, wie wir sie oft für Erklärvideos benötigen Lassen Sie uns zunächst die Hauptstruktur fast jedes Skripts verstehen Hauptstruktur fast jedes Egal, ob es sich um ein SAS oder ein normales Erklärvideo handelt. Dies wird Ihnen bei der Erstellung des Storyboards helfen. Normalerweise besteht das Drehbuch aus vier Hauptteilen: der Darstellung des Problems, der Vorstellung des Unternehmens, der Art und Weise, wie das Unternehmen das Problem löst, dem Aufruf zum Handeln Dies sind die Hauptteile des Skripts, und von hier aus können wir manchmal weitere Unterteile dazwischen hinzufügen Zum Beispiel können wir zwischen dem ersten und dem zweiten Teil zusätzliche Punkte hinzufügen, können wir zwischen dem ersten und dem zweiten Teil zusätzliche Punkte hinzufügen die zeigen, wie das Problem spezifischere Bereiche im Leben des Publikums ruinieren kann spezifischere Bereiche im , normalerweise drei Punkte Und zwischen dem dritten und vierten Teil können wir zusätzliche Vorteile hinzufügen, normalerweise auch drei, darüber, wie das Unternehmen das Leben der Zuschauer verbessern kann . In Ordnung. Nun, da wir das haben, schauen wir uns unser Drehbuch an und ich zeige Ihnen, wie ich das Storyboard erstellt habe Zuallererst müssen Sie verstehen, dass Sie, um gute Storyboards zu erstellen, visuelle Ideen für den Drehbuchtext generieren müssen Und dazu müssen Sie sich viele Beispiele und ähnliche Videos ansehen Beispiele und ähnliche Videos das , das Sie erstellen müssen Ich werde einen Link zu einer Playlist mit einigen coolen Sas-Erklärvideos anhängen einigen coolen Sas-Erklärvideos damit du irgendwo anfangen kannst Im Laufe des Kurses werde ich Ihnen zeigen, wie ich diese Videos verwende , um Ideen für viele Szenen in unserem Projekt zu generieren Ideen für viele Szenen in unserem Projekt Ich sage immer, dass die beste Methode zur Ideenfindung darin besteht, sich viele Referenzen online anzusehen, nicht nur wenn Sie an Projekten arbeiten, sondern auch in Ihrer Freizeit. Du musst verstehen, dass du anfangen musst, wie ein Motion Designer zu denken, wenn du deine Karriere ernst nehmen willst. Und wenn Sie sich viele Motion-Design-Videos ansehen, beginnen Sie langsam, sich Szenen und Animationen zu merken , die Sie später in Ihren Projekten verwenden können Auf diese Weise können Sie sich, wenn Sie Ihr nächstes Drehbuch lesen oder eines für sich selbst erstellen, bereits vorstellen welche Szenen visuell zum Drehbuch passen Es gibt unendlich viele Möglichkeiten, ein Drehbuch visuell darzustellen, und dieser Prozess kann entweder von Ihnen oder von Ihrem Kunden geändert entweder von Ihnen oder von Ihrem Kunden Aus diesem Grund ist die Erstellung eines Storyboards so wichtig. Es gibt sowohl Ihnen als auch dem Kunden eine klare Vorstellung davon, was Sie erwartet, und es spart Ihnen viel Zeit indem unnötige Überarbeitungen vermieden werden Beachten Sie, dass wir die Ideen während der Animationsphase manchmal leicht ändern, aber nicht zu drastisch Wenn Sie also das Gefühl haben, dass Sie in der Animationsphase etwas ändern möchten, das nicht perfekt zu Ihrer ursprünglichen Storyboard-Idee passt, stellen Sie einfach sicher, dass die Änderung kaum wahrnehmbar und nicht zu kompliziert ist kaum wahrnehmbar und nicht zu kompliziert Ordnung. Jetzt führe ich Sie durch meinen Prozess der Generierung visueller Ideen für dieses Drehbuch Für den Eröffnungstext, der das Hauptproblem darstellt, möchte ich mit einer einfachen Textanimation beginnen weil ich gesehen habe, dass viele andere Videos so beginnen, und das ist völlig in Ordnung. Um die Szene ein wenig aufzupeppen, habe ich beschlossen, mit dem Wort Multiple herumzuspielen und seine Bedeutung visuell hervorzuheben, indem ich ihm ein unorganisiertes und chaotisches Gefühl so eine chaotische Animation für die Charaktere dieses Wortes schuf für die Charaktere dieses Wortes mit einem Cursorobjekt fertig Betrachter mit einem Cursorobjekt fertig ist , kann er der nächsten Szene folgen Im nächsten Absatz, in dem ich weiterhin das Ergebnis des Hauptproblems darstelle, möchte ich viele Aufgaben und Nachrichten in der Szene zeigen, bevor der Cursor nach unten bewegt wird weiterhin das Ergebnis des Hauptproblems darstelle, möchte ich viele Aufgaben und Nachrichten in der Szene zeigen , vielleicht in ein dunkles Meer, wo wir ein Suchformular im Stil einer Website haben, das anzeigt, dass der Charakter anfängt , online nach Hilfe zu suchen. Als Nächstes, nach der Darstellung der Probleme, ist es Zeit für die Einführung der SAS-Plattform, die zur Verbesserung der Situation beitragen wird. Wie ich in fast jedem Referenzvideo gesehen habe, ist dies der Moment für eine nette Logo-Animation, gefolgt vom Hauptpanel der SAS-Plattform. Wann immer Sie ein UI-Panel präsentieren möchten, ist es eine gute Idee, mit dem Kunden Rücksprache zu halten und zu fragen, was er am liebsten zeigt. Dies gilt für jede Szene in der UI-Panels präsentiert werden. In diesem Skript gibt es auch einen lustigen Aspekt , der besagt, dass es so einfach ist , dass sogar eine Katze es kann. Also habe ich beschlossen, in dieser Szene das Meme einer lustigen Katze zu präsentieren in dieser Szene das Meme einer lustigen Katze zu An dieser Stelle beginnen wir mit der Präsentation der Lösungen für das Hauptproblem In SAS-Videos wird dies normalerweise anhand der Demonstration eines Workflows der Plattform gezeigt. Es kann mit Hilfe von vektorbasierten Grafiken, die wir in diesem Kurs verwenden werden, in drei Hauptmethoden dargestellt mit Hilfe von vektorbasierten Grafiken, die wir in diesem Kurs verwenden werden, werden. Wir können sie skalieren und trotzdem ein erstklassiges Ergebnis erzielen, aber wir benötigen die ursprünglichen Designdateien. Bei Verwendung von Bildschirmaufzeichnungen sind dafür keine originalen Designdateien erforderlich, sondern die tatsächliche Plattform wird aufgezeichnet. Das kann viel Zeit sparen, aber die Qualität des Filmmaterials ist sehr begrenzt. , verwenden wir repräsentative Grafiken Anstatt das tatsächliche Design zu zeigen, verwenden wir repräsentative Grafiken, sondern kreieren etwas, das die ursprüngliche Idee widerspiegelt. Dies ist besonders hilfreich für Kunden, die noch keine endgültige Version ihrer Benutzeroberfläche haben oder sich nur auf eine bestimmte Funktion ihrer SAS-Plattform konzentrieren möchten . Zurück zum Drehbuch. An diesem Punkt, nachdem ich eine coole Referenz gesehen hatte, entschied ich, dass ich, bevor ich zu einem bestimmten Panel springe, alles auf einmal in einem dynamischen 3-D-Look präsentieren möchte . Dann habe ich mit dem Kunden geklärt, welche Bildschirme ich zeigen sollte, und ich habe mir die Namen der Panels selbst notiert, damit ich sie und ich habe mir die Namen der Panels selbst notiert, leicht im Figma-Design finden konnte, bevor ich sie in Figma-Design finden konnte, bevor After Effects importierte Dann haben wir eine Frage im Drehbuch. Mir ist aufgefallen, dass sich dieses Muster wiederholt, also habe ich beschlossen, die Frage im gleichen visuellen und bewegten Stil Und wieder einmal habe ich darauf geachtet, das entsprechende UI-Panel zu verwenden. Als nächstes ist der Vorgang so ziemlich derselbe wie in der vorherigen Szene. Aber dieses Mal wollte ich das entsprechende UI-Panel interessanter präsentieren . Nachdem ich ein cooles Beispiel eine sehr ähnliche UI-Designreferenz gesehen hatte, beschloss ich, es genauso zu präsentieren wie in der Referenz. Für den nächsten Absatz ist der Vorgang derselbe. Ich möchte nur erwähnen , dass ich mir an dieser Stelle bei der Erstellung des Storyboards notiere, bei der Erstellung des Storyboards notiere, welche UI-Panels relevant sein sollten Und ich weiß bereits, dass ich in dieser Szene hinzufügen kann bestimmten Teilen eines UI-Panels einige Zoom-In-Animationen Wenn Sie jedoch das Gefühl haben, dass Ihr Kunde Ihrem Prozess nicht vollständig vertraut, schlage ich vor, diese zusätzlichen Frames ebenfalls zum Storyboard hinzuzufügen , diese zusätzlichen Frames ebenfalls zum Storyboard Auf diese Weise bleiben keine Fragen darüber unbeantwortet, wie die Szene aussehen wird Nun, an diesem Punkt, wo wir den Teil zum Teilen von Dateien haben, Sie vielleicht feststellen, dass zu dieser Szene kein Text gehört, und das ist ein weiterer wichtiger Punkt, mit dem Sie umgehen sollten Um zu entscheiden, wann Text hinzugefügt werden soll und wann nicht, wenden Sie sich am besten an den Kunden. Manchmal möchten sie, dass bestimmte Phrasen angezeigt werden, manchmal sind sie weniger wichtig. Stellen Sie also sicher, dass Sie diesen Teil mit dem Kunden abstimmen. Fragen Sie sie einfach, welche Phrasen aus dem Drehbuch sie im Video präsentieren möchten. Ordnung. Nun zum letzten Teil habe ich beschlossen, das Video mit derselben Textanimation zu beenden , mit der wir angefangen haben. Das liegt daran, dass das Wort kämpfen auch zu den unorganisierten Buchstaben passt, eine Animation, die wir für das Wort mehrere gemacht haben Dann müssen wir mit einer Call-to-Action-Szene abschließen , in der wir in den meisten Fällen das Logo und die Website des Unternehmens oder einen anderen Aufruf zum Handeln, den der Kunde wünscht, präsentieren Website des Unternehmens oder einen anderen Aufruf zum Handeln, den der Kunde wünscht Zum Beispiel könnte es Met us in LA sein. Klicken Sie unten, um der Warteliste beizutreten usw. Damit haben wir die Lektion abgeschlossen und sind bereit, endlich zu lernen, wie man die Figma-Designs in After Effects importiert die Figma-Designs in Das werden wir in der nächsten Lektion tun. Es wird großartig werden. Wir sehen uns dort. 5. Importieren von Benutzeroberflächenfeldern aus Figma in After Effects: Ich bin zurück. In dieser Lektion lernen wir, wie Sie die UI-Panels von Figma nach After Effects importieren von Figma nach After Effects Ich kenne fünf Hauptmethoden , um diesen Job zu erledigen. Sie können sie jetzt alle auf dem Bildschirm sehen. Wir können es entweder mit Erweiterungen oder mit den nativen Figma-Funktionen tun Der Unterschied besteht darin, dass durch die Verwendung von Erweiterungen die Übertragung direkt von Figma nach After Effects erfolgt Figma nach After Wenn wir native Figma-Funktionen verwenden, müssen wir das Design zuerst in Illustrator importieren und es dann in After Effects importieren Beginnen wir mit der Liste der Erweiterungen. Ich werde nicht auf jede Methode näher eingehen weil ich nicht möchte, dass dieser Kurs länger als 50 Stunden dauert. Stattdessen füge ich Links zu den besten Tutorials für jede Erweiterung hinzu, entweder im Assets-Ordner oder unter dem Video in der Beschreibung. Der erste ist AEUX. Es ist eine kostenlose Erweiterung, aber sie verursacht beim Importvorgang viele Probleme, insbesondere bei Textebenen, Effekten und Positionswerten im Design Als nächstes kommt Convertify. Sie können es mit einem monatlichen Abonnement verwenden, aber Sie müssen auch Adobe XD auf Ihrem Computer installiert haben Adobe XD auf Ihrem Computer installiert Dann haben wir Overlord, was laut vielen Motion-Designern derzeit die beste Option laut vielen Motion-Designern derzeit die Es ist eine kostenpflichtige Erweiterung und die schnellste direkte Möglichkeit, Figma-Ebenen in After Effects zu importieren Figma-Ebenen in After , ohne Illustrator zu verwenden, was wir in den nächsten Methoden behandeln werden Wisse nur, dass es auch bei Overlord immer noch einige Probleme gibt, die nach dem Import der Figma-Ebenen in After Effects behoben werden müssen nach dem Import der Figma-Ebenen in After Effects behoben Es ist nicht zu 100% perfekt. Da die Mehrheit meiner Schüler unerfahrene Motion-Designer sind und nicht viel Geld haben, um in kostenpflichtige Erweiterungen zu investieren, habe ich mich in diesem Kurs für die native Figma-Funktionsmethode entschieden die native Figma-Funktionsmethode Die erste Option ist die Verwendung der Exportfunktion. Ich weiß, dass es noch viel mehr über diese Funktion zu erzählen gibt , aber auch hier möchte ich, dass wir mit der Animation beginnen und nicht zu viel Zeit damit verschwenden, FigMA zu erkunden Das Ziel dieses Kurses ist nicht, jede Figma-Funktion zu erlernen, sondern nur die Funktionen zu erlernen, die wir als Motion-Designer benötigen , um ein großartiges SAS-Erklärvideo zu erstellen ein großartiges SAS-Erklärvideo Am Ende dieses Kurses möchte ich, dass Sie sich sicher genug fühlen, eine FigMA-Datei von einem Kunden zu nehmen und auch ohne Figma im Detail zu kennen, trotzdem in der Lage sind, ein großartiges SAS-Erklärvideo zu erstellen In Ordnung. Lassen Sie uns jetzt über die endgültige Methode sprechen. In diesem Kurs werden wir diese Methode verwenden, bei der die Figma-Ebenen einfach als SVG-Format kopiert und in Illustrator eingefügt Dort können wir die Ebenen aufteilen und das Design in After Effects so organisieren , dass es unseren Bedürfnissen entspricht Jetzt möchte ich, dass du die Maus nimmst und endlich anfängst, mit mir zu arbeiten. Als erstes müssen wir Adobe Illustrator öffnen. Also lass uns das ganz schnell machen Jetzt müssen wir eine neue Datei erstellen. Also lass uns hier klicken. Für den Dokumenttyp entscheide ich mich normalerweise für die Webvorlagen, und hier können wir die große Vorlage mit Full-HD-Auflösung auswählen . Als Nächstes müssen wir uns einen Namen für diese Datei ausdenken . Und das ist sehr wichtig, weil wir uns daran erinnern wollen, um welches UI-Panel es sich handelt. Wir können den Namen also mit Panel oder Screen One beginnen. Fügen Sie dann ein Suffix mit dem Namen des Panels hinzu, an dem wir gerade arbeiten In diesem Fall ist laut unserem Storyboard das erste Panel, das angezeigt werden muss, das Dashboard Bald werden wir genau auswählen , welches. Lassen Sie uns vorerst das Dashboard hier in den Namen schreiben. Dann können wir das gesamte Setup unverändert lassen und auf Erstellen klicken. Und jetzt, bevor wir weitermachen, möchte ich, dass wir dasselbe Panel-Layout einrichten. Gehen wir also zu Window, Workspace und setzen wir es auf Essentials Classic. Falls Sie in der Vergangenheit einige Bereiche in diesem Layout verschoben haben , stellen Sie sicher, dass Sie das Layout zurücksetzen. Lassen Sie uns das nun ein wenig verbessern , indem die Registerkarte „Ebenen“ in den rechten offenen Bereich ziehen. Es wird für uns viel bequemer sein, wenn wir in nur einer Minute mit der Arbeit mit allen Ebenen beginnen in nur einer Minute mit der Arbeit mit allen Ebenen Großartig. Jetzt sind wir bereit, zu Figma zurückzukehren und unser erstes Panel oder unseren ersten Bildschirm zu importieren In diesem Kurs nenne ich sie Bildschirme. Wie ich bereits erwähnt habe, müssen wir eines der Dashboard-Bildschirmdesigns auswählen. Um zu wissen, welcher Bildschirm verwendet werden soll, können Sie den Kunden fragen, was er bevorzugt. Natürlich kann diese Entscheidung auch zu einem früheren Zeitpunkt während der Erstellung des Storyboards getroffen werden früheren Zeitpunkt während der Erstellung des Storyboards In Ordnung, nehmen wir an , wir wollen diesen. Wie Sie sehen können, wird InfigMat als Frame bezeichnet, wenn ich auf den Namen dieses Designs klicke InfigMat als Frame bezeichnet Es ist wie eine Zeichenfläche und ein Illustrator . Wenn ich darauf klicke, sehe ich, dass es auf der Registerkarte Ebenen links unter dem Dashboard-Bereich ausgewählt ist auf der Registerkarte Ebenen links unter dem Dashboard-Bereich Sie können die Ebenen und alle Unterebenen öffnen , um zu sehen, wie komplex dieses Design ist. In unserem Fall möchten wir, sich alle Ebenen auf diesen Rahmen beziehen. Wir können also entweder alle Ebenen manuell auswählen oder einfach auf den Namen des Rahmens klicken. Klicken Sie dann mit der rechten Maustaste, gehen Sie zu Copy Paste Says und wählen Sie SVG. SVG ist ein vektorbasiertes Format , das einfach in Illustrator geöffnet werden kann , da Illustrator eine vektorbasierte Software ist eine vektorbasierte Software Okay. Gehen wir jetzt zurück zu Illustrator und drücken einfach die Strg- oder Befehlstaste auf dem Mac plus V, um das kopierte Design einzufügen So einfach ist das. Eine Sache, die Sie über diese Methode wissen müssen, ist, dass Effekte wie Unschärfe, Schlagschatten oder andere komplexe Überlagerungen, wenn Ihr Figma-Design Effekte wie Unschärfe, Schlagschatten oder andere komplexe Überlagerungen aufweist , diese nicht in Illustrator erscheinen In diesem Fall können Sie die Effekte entweder in Illustrator neu erstellen oder, meiner Meinung nach, die bessere Wahl, sie später in neu erstellen Beachten Sie auch, dass es sich bei allen Textebenen nicht mehr um bearbeitbaren Text handelt Sie sind jetzt Formen. All diese Probleme gelten auch für die meisten kostenpflichtigen Erweiterungen. Ich sagte, egal welche Methode Sie verwenden, Sie müssen im Laufe der Zeit immer einige kleine Dinge anpassen . Vielleicht wird es in Zukunft bessere Möglichkeiten geben. In Ordnung, zurück zum Design. In Fällen, in denen das Design größer oder kleiner als Ihre Illustrator-Leinwand ist , schlage ich vor, dass das Design zwar gruppiert ist, aber sicherstellen, dass eingeschränkte Proportionen aktiviert sind, und dann die Größe manuell von hier aus skalieren die Größe manuell von hier aus Auf diese Weise wird Ihr Design proportional skaliert und In unserem Fall passt es perfekt zur Leinwand , sodass wir bereit sind, die Schichten zu trennen Also müssen wir zuerst die Schnittmaske lösen, damit wir die Gruppierung der Ebenen aufheben können Klicken Sie dann irgendwo außerhalb des Designs , um die Auswahl aufzuheben und es erneut auszuwählen, oder klicken Sie einfach mit der rechten Maustaste, oder klicken Sie einfach mit der rechten Unser Ziel ist es, die Gruppierung aller Ebenen aufzuheben, sodass wir entscheiden können, welche Abschnitte gruppiert bleiben sollen und welche sollen Als Nächstes müssen wir alle nicht gruppierten Ebenen in einzelne Ebenen unterteilen dazu, während die Hauptebene ausgewählt ist, das Ebenenmenü und wählen Sie die Option Für Öffnen Sie dazu, während die Hauptebene ausgewählt ist, das Ebenenmenü und wählen Sie die Option Für die Reihenfolge der Ebenen freigeben Jetzt können wir alle Ebenen dieses Designs sehen. Lassen Sie sich von der Anzahl der Schichten nicht einschüchtern. So wird es nicht bleiben. Als Nächstes müssen wir sie alle aus der Hauptebene entfernen. Wählen Sie dazu die erste Unterebene aus, scrollen Sie nach unten, halten Sie die Umschalttaste gedrückt und wählen Sie die letzte aus. Ziehen Sie sie nun alle aus der Hauptebene heraus. Auf diese Weise können wir das Design für die Animation vorbereiten. Danach können wir die leere Ebene darunter löschen. Ich weiß, dass es sich um eine leere Ebene handelt, weil an der Seite kein Pfeilsymbol daneben befindet. Großartig. Unser nächster Schritt besteht darin, die Ebenen für die Animation vorzubereiten. Damit meine ich, dass wir sicherstellen, dass wir Ebenen gruppieren , die nicht getrennt bleiben müssen , weil wir sie nicht animieren Und woher wissen wir, was wir animieren werden und was nicht? Deshalb haben wir das Storyboard erstellt . In dieser Szene müssen wir beispielsweise keine der Ebenen animieren Aber falls uns ein Kunde fragt oder wir entscheiden, dass wir einige der Teile hier animieren möchten , lassen Sie uns das Design durchgehen und mit der Organisation beginnen während wir planen, was wir später bei Bedarf animieren könnten Okay, an dieser Stelle stelle ich zunächst sicher, dass die Hintergrundebene gesperrt damit ich die anderen Ebenen im Design problemlos auswählen kann Jetzt versuche ich, die Objekte auszuwählen, die meiner Meinung nach gruppiert werden sollten, weil ich sicher bin, dass ich sie nicht animieren werde Wie Sie sehen können, werden auch einige andere Ebenen ausgewählt Dies sind Formen, die als Schnittmasken verwendet werden. Lassen Sie uns eine auswählen. Und hier können wir sehen, dass es sich unter unserer Hintergrundebene befindet. Wir können es entweder ausschalten, sperren oder löschen, weil wir es hier nicht benötigen. Ordnung. Fangen wir jetzt an, die Objekte zu gruppieren Wir sind sicher, dass wir in diesem Fall nicht animieren werden, beginnend mit dem oberen Bereich Ich weiß, dass ich im Storyboard eine Suchleisten-Szene habe, also werde ich darauf achten, die Objekte, die die Suchleiste bilden, nicht zusammen mit dem Rest des oberen Bereichs zu gruppieren Suchleiste bilden, nicht zusammen mit dem Rest des oberen Wählen wir hier also alle Objekte aus und achten Sie darauf, dass Sie nicht die Suchleiste auswählen und sie dann gruppieren Jetzt befindet sich diese Gruppe auf einer Ebene und wurde in der Ebenenliste nach oben verschoben. Lassen Sie uns es vorerst ausschalten. Als Nächstes können wir diesen Bereich hier gruppieren, weil ich weiß, dass ich ihn nicht animieren werde und dass in diesem Bereich weder am Design noch an der Animation Änderungen vorgenommen werden müssen weder am Design noch an der Animation Gruppieren wir sie mit der Tastenkombination Strg oder Command auf dem Mac plus G. Wir finden diese Gruppenebene Sie können sie unter der ersten Gruppenebene platzieren, wenn Sie möchten. Und lassen Sie uns es vorerst ausschalten, damit wir uns auf die Suchleiste konzentrieren können. Für die Suchleiste habe ich vor, das Lupensymbol zu animieren und die Wortsuche später in der Animation zu manipulieren Wortsuche später in der Ich werde also darauf achten, sie nicht zu einer Gruppe zusammenzufassen. Um dies zu vereinfachen, deaktivieren wir die weiße Suchebene. Ich sehe, dass sie aus zwei Ebenen besteht, einer für die weiße Füllung und einer für den grauen Strich. Wir werden uns in einer Sekunde darum kümmern. Lassen Sie uns zunächst alle Formen gruppieren , die das Lupensymbol bilden Wie Sie sehen können, befinden sich diese Formen auf separaten Ebenen, was unnötig ist Wir können sie auf einer Ebene haben. Wählen Sie sie also aus und gruppieren Sie sie mit der Verknüpfung. Als Nächstes prüfen wir, ob sich das Suchwort auf einer Ebene befindet. Ist es. Das heißt, wir können es so lassen, wie es ist. Dann schauen wir uns an, was mit dem Ausrufezeichen-Symbol Alle Formen befinden sich auf separaten Ebenen, und das wollen wir nicht Also lass uns sie alle zusammen gruppieren. Also gut, damit sind wir mit dem oberen Bereich fertig Beschäftigen wir uns nun mit dem Bereich darunter. Aber vorher können wir jetzt alle deaktivierten Ebenen zurückbringen und sie im Ebenenbedienfeld näher aneinander bringen. Aber um ehrlich zu sein, müssen wir es jetzt nicht tun. Denn später, nachdem wir alle erforderlichen Ebenen gruppiert haben, werden wir das Ebenenfenster trotzdem organisieren, oder? Und jetzt kehren wir zur Gruppierung der Ebenen im UI-Bereich unter der Suchleiste zurück der Ebenen im UI-Bereich unter der Suchleiste Auch in diesem Fall müssen wir darüber nachdenken, ob wir hier etwas animieren wollen oder Vielleicht müssen wir hier die Linie oder die Zahlen animieren. Das ist so ziemlich die Logik hinter Vorbereitung des Designs für die Animation Und selbst wenn Sie kostenpflichtige Erweiterungen verwenden und den Illustrator-Schritt überspringen, müssen Sie dennoch einige Ebenen und Vorkompositionen in After Effects anpassen einige Ebenen und Vorkompositionen in After Effects Die gute Nachricht ist jedoch, dass es sehr unwahrscheinlich ist, dass Sie ein so komplexes Design erhalten , bei dem Sie so viele Bedienfelder animieren müssen Wir machen das im Kurs, weil ich möchte, dass du diese Aktionen wiederholst , damit du dich so schnell wie möglich daran gewöhnen kannst schnell wie möglich daran Und machen Sie sich keine Sorgen, wenn Sie der Meinung sind, dass Sie alle Figma-Bedienfelder für diesen Kurs in Illustrator vorbereiten müssen alle Figma-Bedienfelder für diesen Kurs in Illustrator Im Hauptordner des Kurses finden Sie alle Illustrator-Dateien, die bereits für die Animation vorbereitet wurden Ich möchte nur, dass du das einmal mit mir übst. Dann kannst du meine fertigen Dateien verwenden. In Ordnung, zurück zur Lektion. Hier habe ich beschlossen, dass alle Ebenen getrennt werden sollen, weil ich sie in Zukunft animieren könnte Aber ich möchte sicherstellen, dass sich die Objekte, die das Pfeilsymbol erzeugen, auf einer Ebene befinden Sperren wir dazu das weiße Feld, damit wir die Pfeilformen auswählen und gruppieren können. Machen wir dasselbe für die restlichen Boxen. Großartig. Sobald das erledigt ist, fahren wir mit dem nächsten Teil fort. Sperren wir zunächst die weiße Form, damit wir die Objekte hier einfach auswählen können. Wählen wir nun das Kalendersymbol aus, und wie Sie sehen, ist es auf viele Ebenen verteilt . Daher ist es besser, wenn wir es in einer Ebene gruppieren. Als Nächstes stellen wir sicher, dass die Schaltflächen in ihrem Text auch einzeln gruppiert sind. Für dieses Wort können wir es belassen, da es bereits in einer Ebene gruppiert ist. Fantastisch. Lassen Sie uns jetzt mit diesem Teil umgehen. Wie Sie sehen können, sind all diese Ebenen momentan gruppiert, aber ich denke, es ist eine gute Idee, dieses kleine Feld zu trennen , weil wir es in Zukunft animieren könnten Lassen Sie uns also zuerst die Schnittmaske dieser Gruppe loslassen und dann auf eine andere Stelle klicken, um die Auswahl aufzuheben und die Gruppierung aufzuheben Großartig. Als Nächstes können wir versuchen, die Form der Schnittmaske auszuwählen und zu löschen An dieser Stelle können wir die Ansicht vergrößern und sicherstellen, dass die Ebenen hier so getrennt sind, wie wir es möchten Ich sehe zum Beispiel, dass dieses Feld gruppiert ist, aber ich muss hier möglicherweise die Zahlen animieren, was bedeutet, dass die Objekte darin getrennt werden müssen Lassen Sie uns dieses Mal die gruppierten Ebenen hier verteilen, ohne die Gruppierung des Stapels aufzuheben, und schauen Manchmal können wir diese kleinen Fehler machen. Deshalb möchte ich, dass Sie wissen, was Sie erwartet, wenn das passiert. Während also die Ebene ausgewählt ist, die diese Gruppe enthält, öffnen wir das Menü und klicken auf Ebenenreihenfolge freigeben. Lassen Sie uns nun alle Ebenen aus der Hauptebene verschieben. Und wie Sie sehen können, scheint es, dass wir nur den kleinen lila Punkt aus der Gruppe herausbekommen. Der Rest des Stapels ist immer noch gruppiert. In diesem Fall kann ich, da nur die Zahlenebene getrennt werden muss, die Zahlenebene getrennt werden muss, auf diesen Stapel doppelklicken, bis ich ihn erreiche, dann ControlX drücken, um ihn auszuschneiden Als Nächstes klicke ich auf das kleine weiße Feld, um zu sehen, wo es sich im Ebenenbedienfeld befindet, erstelle eine neue Ebene über dieser und drücke Strg+Shift V, um sie an derselben Stelle einzufügen . In Ordnung. Wir machen weiter. Nun wollen wir sehen, was wir hier haben. Ich denke, wir können das Diagramm so lassen, wie es ist, aber für die Monatsnamen unten halte ich es für besser, sie zu gruppieren da ich nicht glaube, dass ich diesen Teil animieren werde Und lassen Sie uns auch den roten Punkt mit seinem Text gruppieren und dasselbe mit dem blauen tun . Fantastisch. Jetzt können wir zum nächsten Teil übergehen. Mal sehen, was wir hier in der Gegend von Pie haben. Ich sehe, dass wir hier einige Schnittmasken haben. Wir werden uns in einer Sekunde um sie kümmern. Wählen wir zunächst das weiße Feld aus und sperren es. So können wir den Rest der Objekte in diesem Teil einfacher auswählen . Fangen wir nun an, die offensichtlichen Teile wie die Formen der Kalendersymbole, die Schaltflächen und ihre Texte zu gruppieren die offensichtlichen Teile wie die Formen der Kalendersymbole, die Schaltflächen und ihre Texte zu Wir können hier auch hineinzoomen und die Punkte und ihren Text gruppieren , weil ich nicht glaube, dass wir diese Teile animieren werden Wählen wir die Zahlen hier aus und schauen sie uns im Ebenenbedienfeld an, um sicherzugehen, dass das USD-Symbol und die Zahl bereits gruppiert sind. Großartig. Wir können uns jetzt mit dem Pi befassen. Ich sehe, dass sich die Zahl hier auf einer separaten Ebene befindet, was gut ist. Aber wenn ich den Kuchen auswähle, sehe ich, dass er gruppiert ist und eine seltsame Form dahinter hat. Klicken wir mit der rechten Maustaste hier, um zu sehen, ob es sich um eine Schnittmaske handelt. Wie wir sehen können, handelt es sich nicht um eine Schnittmaske. Wählen wir es aus und versuchen, es zu verschieben. Ich sehe, dass es nur ein weißes Rechteck ist. Wir brauchen es nicht in der Datei, also löschen wir es. Großartig. Nun zum Kuchen. Ich sehe, dass sich alle seine Teile auf separaten Ebenen befinden, was nützlich ist, wenn Sie planen ihn in After Effects zu animieren Aber in unserem Fall werde ich das nicht tun. Wählen wir sie also alle aus. Halten Sie die Umschalttaste gedrückt, klicken Sie auf die Zahl, um sie auszuwählen , und gruppieren Sie nur die Kuchenebenen zusammen. Sie können jederzeit überprüfen, ob Sie die richtigen Objekte gruppiert haben, indem Sie die neue gruppierte Ebene ein- und ausschalten . Sieht toll aus. Jetzt können wir uns hier mit dem Button-Teil befassen. Zuerst sperre ich das weiße Feld, damit ich die restlichen Formen einfach auswählen kann. Lassen Sie uns nun die Formen der Kalendersymbole und die Schaltflächen in den Formen der Lupensymbole gruppieren die Schaltflächen in den Formen der Lupensymbole Lassen Sie uns abschließend den unteren Teil auswählen , um zu sehen, was hier passiert. Ich sehe, dass alle Ebenen bereits gruppiert sind. In meinem Fall möchte ich hier keine der Ebenen animieren Also lasse ich es so wie es ist. Aber falls Sie hier etwas animieren müssen, zum Beispiel die Schaltflächen, müssten Sie diesen Teil anders handhaben Ordnung. Gehen wir jetzt zum letzten Teil über, dem linken Bereich hier. Wenn Sie den Symbolbereich vergrößern, können Sie sehen, dass die Form jedes Symbols können Sie sehen, dass die Form jedes Symbols auf einer separaten Ebene platziert wird, was in unserem Fall völlig unnötig ist. Laut Storyboard und Drehbuch gibt es in diesem linken Bereich, dem Hauptmenü dieser SAS-Plattform, keinen Teil des Videos, in dem wir etwas animieren müssen des Videos, in dem wir etwas animieren des Videos, in dem In diesem Fall wählen wir hier den gesamten Bereich aus, einschließlich des kleinen Pfeils und des grauen Felds, und gruppieren sie dann alle zusammen. Fantastisch. Jetzt haben wir es nur auf einer Ebene. Und jetzt haben wir den letzten Teil der Vorbereitung dieser Datei für die Animation erreicht , bei dem die verbleibenden leeren Ebenen gelöscht werden, die wir hier haben. Sie können eine leere Ebene eindeutig daran erkennen , dass neben ihr kein kleiner Pfeil befindet, der auf die Ebene zeigt. Beginnen wir also damit, alle leeren Ebenen auszuwählen und sie aus dem Ebenenfenster zu löschen. In einigen Fällen halte ich auf dem Mac die Strg- oder Befehlstaste gedrückt, um die leeren Ebenen nacheinander auszuwählen. In Situationen, in denen eine leere Ebene direkt hinter einer nicht leeren Ebene steht, ist es besser, den gesamten Ebenenbereich auszuwählen gedrückter Strg- oder Befehlstaste die Auswahl der nicht leeren Ebenen aufzuheben. Diese Methode könnte für Sie praktischer sein. Leider habe ich keine Verknüpfung oder Funktion gefunden , mit der alle leeren Ebenen gleichzeitig ausgewählt werden können. Wenn Sie also versuchen, mithilfe von KI oder durch Online-Suche eine zu finden , stellen Sie bitte sicher, dass sie tatsächlich funktioniert, und teilen Sie sie dann mit dem Rest von uns. In Ordnung, es sieht so aus, als hätten wir alle leeren Ebenen gelöscht. Wir können jetzt die gesperrten entsperren, wenn wir wollen. Am wichtigsten ist jedoch, dass wir uns den Gesamtrahmen ansehen und prüfen , ob wir Anpassungen benötigen. Ich sehe, dass wir hier nicht den Namen des Panels sehen , nämlich Dashboard. Es ist möglicherweise nicht in der richtigen Reihenfolge im Ebenenstapel. Also lasst uns es finden und an der richtigen Stelle platzieren . Großartig. Jetzt sieht alles gut aus und wir sind bereit , die Datei zu speichern. Wenn Sie mir folgen und alle Designs während des Kurses vorbereiten möchten , geben Sie den AI-Ordner ein und speichern Sie Ihre Datei dort. Aber nur damit du es weißt, du kannst diesen Vorgang überspringen, und wenn wir mit der Animation in After Effects beginnen, kannst du meine bereits vorbereiteten Illustrator-Dateien verwenden, die du im Ordner Screens for AE findest Screens for AE In meinem Fall tue ich so, als ob ich es zum ersten Mal mache , und speichere diese Datei hier Wir müssen nur sicherstellen, dass der Name korrekt ist und dass wir ihn wie in der Adobe Illustrator-Datei speichern . Dann können wir auf Speichern klicken Wir können alle Optionen unverändert lassen und einfach auf Okay klicken. Damit haben wir die Vorbereitung dieses UI-Designs abgeschlossen. Jetzt werde ich den Rest der UI-Panels für die Animation vorbereiten . Wie ich Ihnen bereits gesagt habe, müssen Sie das nicht mit mir machen , weil Sie bereits die fertigen Illustrator-Dateien haben , aber ich möchte, dass Sie sich die Lektionen ansehen, weil bei jedem Vorbereitungsprozess für jedes Panel etwas lernen können, wir bei jedem Vorbereitungsprozess für jedes Panel etwas lernen können, das Ihnen auch während dieses Vorgangs passieren könnte Ihnen auch während dieses Vorgangs passieren Ordnung. Jetzt werden wir die Figma-Dateien weiter für die Animation mit Adobe Illustrator vorbereiten die Figma-Dateien weiter für die Animation mit Adobe Illustrator Gemäß unserem Skript ist das nächste Panel, das wir verwenden müssen, eines der Panels im Projektbereich Nehmen wir an, nach der Bestätigung mit dem Kunden wissen wir, dass dies der Bildschirm ist, den wir im Video verwenden müssen. Wie beim vorherigen Bildschirm können wir entweder alle Ebenen manuell auswählen oder einfach den gesamten Frame auswählen, indem wir auf seinen Namen klicken. es nun nach Illustrator zu kopieren, müssen wir mit der rechten Maustaste klicken und zu Kopieren und Einfügen unter gehen Und hier ist eine kurze Frage für Sie. In welchem Format müssen wir es kopieren? Da wir die Objekte in diesem Design als Vektordateien speichern möchten , müssen wir es als SVG-Format kopieren. Jetzt können wir zu Illustrator zurückkehren. Und wenn Sie die Lektion mit mir verfolgen, müssen wir ein neues Dokument erstellen Wir können die zuletzt verwendete Datei auswählen und ihren Namen einfach so ändern, dass er dem richtigen Benutzeroberflächenfenster oder Bildschirm entspricht , an dem wir gerade arbeiten. Ich nenne diesen einen Bildschirm zwei Projekte. Sobald wir die neue Leinwand haben, können wir auf Mac V die Strg - oder Befehlstaste drücken , um das Figma-Design einzufügen In Ordnung, als erstes müssen wir die Schnittmaske loslassen Als Nächstes heben wir die Auswahl der Gruppe auf und wählen sie dann erneut aus, sodass wir mit der rechten Maustaste klicken und die Gruppierung aufheben wählen sie dann erneut aus, sodass wir können danach, solange diese Hauptebene ausgewählt ist, Öffnen Sie danach, solange diese Hauptebene ausgewählt ist, das Menü und wählen Sie „Für Ebenen freigeben Dadurch werden die Ebenen getrennt. Lassen Sie uns abschließend die erste Ebene in dieser Gruppe auswählen , nach unten scrollen, Umschalttaste gedrückt halten und die letzte auswählen, damit wir sie alle aus der Hauptebene entfernen können . In Ordnung. Jetzt sehen wir also die Form, die als Schnittmaske verwendet wurde. Woher weiß ich, dass das die Form ist? Ich kann auf den kleinen Kreis auf der rechten Seite dieser Ebene klicken auf der rechten Seite dieser Ebene und die Form wird ausgewählt. Wenn ich es bewege, sehe ich , dass es eigentlich nur eine leere Form ist. Also lass es uns löschen. Jetzt können wir damit beginnen , die restlichen Ebenen nach unseren Bedürfnissen und After Effects zu gruppieren die restlichen Ebenen nach unseren Bedürfnissen und After Effects zu Zunächst können wir den grauen Haupthintergrund auswählen und ihn sperren, sodass wir die restlichen Ebenen einfacher auswählen können Fangen wir mit dem oberen Bereich an. Ich wähle diesen Teil genau hier aus und achte darauf, nicht das linke Feld mit den Zahlen in den beiden Schaltflächen im oberen Bereich auszuwählen das linke Feld mit den Zahlen in den beiden Schaltflächen im , da das nicht Teil des Kopfbereichs ist. Jetzt drücke ich Strg G, um sie zu gruppieren. Großartig. Gehen wir nun zum linken Menü über, das wir hier haben. Da ich weiß, dass ich diesen Teil nicht animieren möchte, wähle ich alle Ebenen und Objekte in diesem Abschnitt aus und gruppiere sie zusammen Fantastisch. Der Einfachheit halber können wir die gruppierten Ebenen sperren, sodass wir die restlichen Objekte und Formen einfacher auswählen können. Gehen wir nun zum linken Hauptmenü über. Wir können hier alle Formen auswählen und dabei darauf achten, dass der kleine Pfeil und das graue Rechteck dahinter enthalten sind das graue Rechteck dahinter , und sie alle zusammen gruppieren. Großartig. Gehen wir nun zum Hauptteil dieses UI-Bildschirms über. Wenn ich mir nicht sicher bin, was in einem Abschnitt vor sich geht, verschiebe ich einige Formen und Ebenen, um zu verstehen, welche Abschnitte gruppiert sind und welche nur separate Ebenen sind. Zunächst suche ich das weiße Feld und sperre es, damit ich mit diesem Abschnitt leichter weitermachen kann . Wie Sie sehen können, ist der gesamte Abschnitt mit den kleinen Feldern und Symbolen nun der gesamte Abschnitt mit den kleinen Feldern gruppiert. Beginnen wir also damit, uns mit den Ebenen zu befassen. Als Erstes klicke ich mit der rechten Maustaste auf diesen Abschnitt und stelle sicher , dass alle Schnittmasken gelöscht werden, falls vorhanden Danach klicke ich auf eine andere Stelle und dann mit der rechten Maustaste auf diese Gruppe, um die Gruppierung aufzuheben Als Nächstes stelle ich sicher, dass diese Ebene ausgewählt ist, und gebe dann alle Ebenen in separate Ebenen frei Schließlich verschiebe ich alle getrennten Unterebenen aus der Hauptebene. Jetzt sehe ich, dass die Form, die für die Schnittmaske verwendet wurde, hier bleibt und ich sie in meinem Design nicht benötige Also wähle ich es aus und lösche es. Bevor wir weitermachen, möchte ich noch einmal erwähnen, warum es so wichtig ist, sich ständig verschiedene Referenzen und Beispiele ähnlicher Videos anzusehen. Da ich bereits viele Beispiele studiert hatte, ich mich beim Betrachten dieses UI-Panels sofort daran, erinnerte ich mich beim Betrachten dieses UI-Panels sofort daran, ein sehr ähnliches Design in einem der Referenzvideos gesehen ein sehr ähnliches Design in einem der zu haben, was mich auf die Idee brachte , diesen Abschnitt auf die gleiche Weise zu animieren , wie ich es in der Referenz gesehen habe Jetzt in Illustrator, während ich dieses Design vorbereite, weiß ich, dass ich jeden der kleinen Abschnitte hier als eigene Gruppe gruppieren muss der kleinen Abschnitte hier als eigene Auf diese Weise wird es für mich in After Effects viel einfacher sein, sie so zu animieren, wie ich es mir anhand der Referenz vorgestellt habe Lassen Sie uns nun jeden kleinen Abschnitt auswählen und alle zugehörigen Formen, Texte und Ebenen zu einer Gruppe zusammenfassen Lassen Sie uns das für all die kleinen Abschnitte hier tun. Fantastisch. Jetzt können wir mit den Seitenzahlen zum unteren Teil übergehen. Da ich weiß, dass ich diesen Teil in keiner Weise animieren möchte , wähle ich hier alle Formen und Ebenen aus und gruppiere sie alle zusammen Großartig. Jetzt kann ich zum oberen Teil dieses Abschnitts übergehen. Wir können alle Formen in diesem Bereich gruppieren. Wir können auch den Text und die Schaltflächenfelder für jede Schaltfläche gruppieren . Und schließlich können wir diesen langen Abschnitt unten auswählen und alles gruppieren. Jetzt können wir mit dem Löschen der leeren Ebenen beginnen. Wenn Sie möchten, können Sie die nicht leeren Ebenen sperren sodass sie besser hervorstechen, während Sie die leeren Ebenen löschen. Dabei ist mir aufgefallen, dass es eine Ebene gibt , die aussieht, als ob sie nichts enthält, aber sie ist eindeutig nicht leer In diesem Fall isoliere ich diese Ebene, um besser zu verstehen, was hier vor sich geht, indem ich die Alt-Taste gedrückt halte und einmal auf ihr Symbol klicke. Dadurch werden alle anderen Ebenen ausgeschaltet und nur diese eine ist sichtbar. Ordnung, also ich sehe , dass es sich um eine Linie handelt, die im Design keinen Zweck hat. Wenn ich mir nicht sicher bin, kann ich alle Ebenen wieder einschalten , um zu überprüfen, ob das für das Design wichtig ist. Aber wenn ich mir sicher bin, dass ich es nicht brauche, löschen wir es einfach. Jetzt sind wir bereit, die leeren Ebenen auszuwählen und diesmal zu löschen. Lassen Sie uns die zweite Methode mit den nicht leeren Ebenen verwenden , während Sie die Steuerung gedrückt halten. Ein kurzer Hinweis, wenn Sie nach der Auswahl aller relevanten Ebenen und dem Klicken auf Löschen eine Warnmeldung erhalten. Das bedeutet normalerweise, dass Sie versehentlich eine Ebene hinzugefügt haben , die nicht leer ist. In diesem Fall schlage ich vor, noch nicht zu löschen, Ihre Auswahl noch einmal zu überprüfen, die Ebene, die Designelemente enthält, noch einmal sorgfältig zu überprüfen und die Auswahl aufzuheben Fantastisch. Jetzt haben wir nur noch die relevanten Ebenen in der Datei übrig. Wir können sie alle entsperren und die Datei speichern. erneut sicher, dass der Name korrekt ist und dass Sie ihn als Illustrator-Datei speichern Klicken Sie dann auf Speichern. Damit beenden wir diese Lektion und sind bereit, mit der nächsten fortzufahren. Wir sehen uns dort. 6. Vorbereiten des Benutzeroberflächenfensters "Projekte" in Illustrator: Ich bin zurück. Lassen Sie uns nun mit der Vorbereitung des nächsten UI-Panels aus unserem Storyboard fortfahren des nächsten UI-Panels aus unserem Storyboard Entsprechend der Reihenfolge ist das nächste das UI-Panel des Projekts Gehen wir also zurück zur Figma-Datei und kopieren den Frame, den wir benötigen Zurück in Illustrator erstellen wir ein neues Dokument. Ich stelle sicher, dass ich dieser neuen Datei den richtigen Namen gebe und klicke auf Erstellen Lassen Sie uns nun das Design einfügen. Wie Sie vielleicht feststellen, ist dieses Design etwas größer als unsere vorherigen, aber das ist völlig in Ordnung Es beeinträchtigt unsere Arbeit nicht. Der Prozess wird so ziemlich derselbe sein. Ich werde zuerst die Schnittmaske freigeben dann die Gruppierung des Designs aufheben Danach werde ich alle Ebenen in einzelne Ebenen aufteilen Dann entferne ich alle Ebenen aus der Hauptebene und sperre danach die Hintergrundebene. Und lösche die Form, die für die Schnittmaske verwendet wurde. Wie Sie sehen können, liegt hier ein kleiner Fehler bei der Ebenenorganisation vor , der tatsächlich auch im ursprünglichen Figma-Design vorkommt Für uns in Illustrator ist das keine so große Sache. Wir müssen lediglich alle Ebenen und Formen in diesem Abschnitt auswählen , einschließlich des Pfeils und des kleinen grauen Quadrats, und sie gruppieren Später platzieren wir diese Gruppe der richtigen Stelle im Ebenenstapel. wir uns vorerst weiterhin Konzentrieren wir uns vorerst weiterhin auf die Gruppierung der nächsten Abschnitte Sobald das erledigt ist, gruppieren wir den Header-Bereich. Als Nächstes befassen wir uns mit dem Hauptabschnitt in diesem UI-Design. Zuerst wähle ich das weiße Feld aus und sperre es, sodass ich die Ebenen und Formen, die ich in diesem Abschnitt gruppieren möchte, einfach auswählen kann. Jetzt fange ich an, alle relevanten Formen und Texte zu gruppieren alle relevanten Formen und Texte Danach werde ich alle Schaltflächen hier zu einer Gruppe zusammenfassen, da ich nicht jede Schaltfläche separat benötige Ich glaube nicht, dass ich sie in After Effects einzeln animieren werde in After Effects einzeln Lassen Sie uns diesen Bereich abschließend auch hier gruppieren. Und jetzt lass uns über diesen Teil sprechen. Laut unserem Storyboard müssen wir hier eine Art Demo-Software-Flow präsentieren Ich denke, ich werde eine Animation für die Checkbox erstellen. Das heißt, ich möchte einen Cursor animieren, dieses grüne Häkchensymbol aktiviert In diesem Fall lösche ich zuerst eines der Häkchensymbole Dann stelle ich sicher, dass alle Benutzeroberflächenbereiche hier gleich aussehen, und trenne das verbleibende Häkchen und das grüne Kästchen in eigene Ebenen, sodass ich sie separat Häkchen und das grüne Kästchen animieren kann Ich sehe, dass das schwarze V-Symbol und das kleine grüne Kästchen bereits auf einer separaten Ebene voneinander getrennt sind bereits auf einer separaten Ebene voneinander getrennt Das Letzte, was ich tun werde, ist einfach den grünen Strich hier grau einzufärben. Sobald das erledigt ist, fange ich an, jeden Abschnitt hier einzeln zu gruppieren jeden Abschnitt hier einzeln Jede Aufgabe sollte sich auf einer eigenen Ebene befinden. Achten Sie nur darauf, das Häkchen und das grüne Kästchen nicht in diese Gruppen aufzunehmen das Häkchen und das grüne Kästchen nicht in diese Gruppen Wenn Sie später die Bilder von Personen hinzufügen müssen, sollten Sie natürlich nicht alles gruppieren Du würdest das Avatar-Symbol auf einer separaten Ebene belassen. Mach dir keine Sorgen. Das werden wir in den folgenden Lektionen üben. Lassen Sie uns vorerst die Gruppierung aller Aufgabenfelder beenden , die wir hier haben. Großartig. Sobald wir damit fertig sind, können wir mit dem Löschen der leeren Ebenen im Ebenenbedienfeld beginnen . Ich werde diesen Vorgang vorerst ein wenig beschleunigen. Ordnung. Sobald wir alle leeren Ebenen gelöscht haben, können wir die Ebene mit dem linken Menü etwas höher im Ebenenstapel verschieben , damit wir alle Designdetails richtig sehen können. Großartig. Jetzt sieht alles perfekt aus. Damit können wir weitermachen und die Datei speichern. Stellen Sie sicher, dass der Name korrekt ist, und klicken Sie dann auf Speichern. Fantastisch. Gehen wir jetzt zurück zu Figma und bereiten den nächsten UI-Bildschirm Gemäß unserem Storyboard müssen wir in diesem Teil auch eine kleine Demo-Animation erstellen, müssen wir in diesem Teil auch eine kleine Demo-Animation erstellen in der ein Popup-Fenster in der Mitte des Bildschirms erscheint Also gehe ich zu Figma und suche den Rahmen, den ich nach Illustrator kopieren muss Nehmen wir an, dass wir nach der Bestätigung mit dem Kunden wissen, dass dies die Seite ist, die wir benötigen Wie üblich kopiere ich diesen Rahmen im SVG-Format und erstelle dann in Illustrator ein neues Dokument und gebe ihm den richtigen Namen Wenn ich jetzt das Design von Figma in meine neue Leinwand einfüge , lasse ich als Erstes die Schnittmaske los Es macht mir nichts aus, hier eine große Form zu haben. Ich kann mich später darum kümmern. Für mich ist es wichtiger, Ihnen zu zeigen , dass es sehr schwierig ist, die Popup-Benutzeroberfläche vom Hauptfenster zu trennen. Selbst wenn ich die Gruppierung des Designs aufhebe, ist es immer noch schwierig, nur die Popup-Ebenen auszuwählen , da ich versehentlich unnötige Formen oder Ebenen auffinden könnte , die sich dahinter befinden Lassen Sie uns also für einen Moment alles löschen, und ich zeige Ihnen, wie Sie das richtig machen Wenn wir ein Pop-up über dem Mainframe haben, ist es besser, zuerst nur das Popup-Infigma auszuwählen , indem Sie entweder direkt darauf klicken oder es im Ebenenbedienfeld auf der linken Seite auswählen Ebenenbedienfeld auf der linken Kopieren Sie dann zuerst nur diesen Teil nach Illustrator. Sobald wir es in Illustrator eingefügt haben, können wir es vorerst zur Seite verschieben Jetzt, zurück in Figma, verstecken wir das Popup und kopieren dann den Hauptrahmen separat in Erstellen Sie in Illustrator eine neue Ebene und fügen Sie den kopierten Rahmen darauf Achten Sie darauf, es an der Mitte der Leinwand auszurichten. Auf diese Weise können wir das Haupt-UI-Panel einfach vorbereiten und später den Popup-Bereich organisieren. Okay, solange diese Hauptebene ausgewählt ist, öffne das Menü und wähle Für Ebenen freigeben Lassen Sie uns abschließend die erste Ebene in dieser Gruppe und die letzte auswählen , damit wir sie alle aus der Hauptebene entfernen können sie alle aus der Hauptebene Okay, wie Sie sehen können, befindet sich hinter dem Popup ein dunkles Rechteck Ich werde die Form nicht löschen, weil ich sie in After Effects mit einem einfachen Einblenden animieren kann wenn das Pop-up erscheint Damit sie später leichter zu finden ist, benenne ich diese Ebene in Schatten um Fantastisch. Lassen Sie uns nun weitermachen und die große Form, die wir hier haben, anpassen. Fantastisch. Sperren wir die Hintergrundebene, bevor wir weitermachen. Wie immer besteht der erste Schritt darin, die Form zu löschen, die als Schnittmaske verwendet wurde Danach sind wir bereit, die restlichen Ebenen nach unseren Bedürfnissen und nach After Effects zu gruppieren die restlichen Ebenen nach unseren Bedürfnissen und nach After Effects zu In diesem Teil habe ich nicht vor, die Zahlen zu animieren. Also wähle ich einfach jeden Abschnitt aus und gruppiere ihn alle zusammen Danach können wir alle diese Abschnitte zu einem gruppieren. Lassen Sie uns nun mit dem letzten Abschnitt dieses Entwurfs befassen. Zuerst werde ich das weiße Feld im Hintergrund sperren. Dann stellen wir, genau wie beim vorherigen Design, sicher, dass alle Aufgabenbereiche gleich aussehen und dass das V-Symbol und das grüne Feld auf eigene Ebenen aufgeteilt sind auf eigene Ebenen aufgeteilt falls wir sie später animieren müssen Fantastisch. Jetzt können wir für diesen Bereich alles zusammenfassen. Und die drei Schaltflächen hier werde ich auch zu einer Gruppe zusammenfassen, werde ich auch zu einer Gruppe zusammenfassen da ich nicht vorhabe, sie in After Effects zu animieren Großartig. Lassen Sie uns nun jeden Aufgabenbereich auswählen und ihn einzeln gruppieren, sodass jede Aufgabe auf einer eigenen Ebene befindet. Fantastisch. Jetzt können wir mit dem Löschen der leeren Ebenen beginnen bevor wir mit der Arbeit am Popup-Panel fortfahren. Sobald das erledigt ist, schalten wir die Schattenebene wieder ein und sperren alle Ebenen, die wir bereits organisiert haben. Jetzt können wir alle Formen und Ebenen des Popup-Panels in die Mitte der Leinwand verschieben und Ebenen des Popup-Panels in die Mitte der Leinwand und sicherstellen, dass sie sich über der Schattenebene befinden. Vergessen Sie nicht, dass das Popup-Design noch nicht gruppiert ist. Wenn Sie also versuchen, es direkt zur Mitte auszurichten , funktioniert es nicht. Um dies zu beheben, wählen Sie zunächst alle Popup-Formen aus und gruppieren Sie sie. Jetzt können Sie die gesamte Gruppe an der Mitte der Leinwand ausrichten . Sobald das Pop-up perfekt ausgerichtet ist, können Sie die Gruppierung wieder aufheben und mit der Trennung der Ebenen beginnen Und wenn Sie während des Schritts eine Fehlermeldung sehen , machen Sie sich keine Sorgen Das bedeutet normalerweise, dass Sie versehentlich eine gesperrte Ebene ausgewählt haben. Überprüfen Sie einfach Ihre Auswahl und wiederholen Sie den Vorgang. Ordnung. Jetzt können wir anfangen, an diesem Design zu arbeiten. Zunächst können Sie einige Ebenen auswählen und sie leicht zur Seite ziehen , nur um zu verstehen, was Sie hier haben und wie alles aufgebaut ist Ich möchte zum Beispiel nicht, dass dieses Feldfeld ohne Füllung ist. Deshalb füge ich dieser Form eine weiße Füllung hinzu, weil ich weiß, dass ich sie später in After Effects animieren werde sie später in After Effects Wählen wir nun den weißen Hintergrund dieses Popups aus und sperren ihn, sodass wir die restlichen Formen und Ebenen frei wählen können die restlichen Formen und Ebenen frei wählen Jetzt sind wir bereit, mit der Gruppierung der relevanten Teile zu beginnen. Ich werde den Text in diesem Feldfeld auf einer separaten Ebene belassen diesem Feldfeld auf einer separaten Ebene da ich vorhabe, ihn später in After Effects zu animieren Das Upload-Symbol kann dagegen zu einer Einheit zusammengefasst werden Als nächstes für die kleinen Aufgabenbereiche. Ich bereite sie für Checkbox-Animationen vor. Dazu gruppiere ich das V-Symbol mit dem grünen Feld für alle Aufgaben. Später in After Effects werde ich diese gruppierten Ebenen verwenden , um die Checkbox-Animation zu erstellen. Für den Fortschrittsbalken lasse ich ihn so gruppiert wie er ist, da ich nicht vorhabe, ihn zu animieren Die Zahlen hier können auch gruppiert werden. Lassen Sie uns nun mit dem oberen Teil dieses Popups umgehen. Wir gruppieren den Datumsbereich, den Avatar-Bereich, das Exit-Symbol, die drei Punkte und die Schaltfläche oben. Der Text unten ist bereits gruppiert, sodass wir ihn nicht anfassen müssen. Das heißt, wir haben jetzt die Gruppierung aller relevanten Abschnitte in diesem Popup abgeschlossen die Gruppierung aller relevanten Abschnitte in diesem Popup Der nächste Schritt besteht darin, die leeren Ebenen zu löschen , um alles zu bereinigen Damit haben wir die Vorbereitung dieses Panels abgeschlossen. Speichern Sie das Projekt vorerst, bevor Sie fortfahren. Im nächsten Schritt werden wir uns mit einem weiteren kniffligen Design befassen, und dieses wird sehr interessant sein , also bleiben Sie dabei. Ordnung. Gehen wir jetzt zurück zu Figma und kopieren den nächsten Frame Wir müssen uns auf die Animation vorbereiten. Laut unserem Storyboard ist dies der Teil, in dem wir die Benutzeroberflächen für Kontakte anzeigen In diesem Fall bereiten wir das Design so vor, dass wir später echte menschliche Avatar-Bilder hinzufügen können Wenn Sie also mitmachen, suchen wir den richtigen Figma-Rahmen und kopieren ihn in Illustrator Hier ist der Kontaktbereich. Nehmen wir an, dass wir nach der Bestätigung mit dem Kunden wissen, dass dies der Frame ist, den wir animieren müssen Kopieren wir es wie üblich im SVG-Format, dann zu Illustrator zurück und erstellen ein neues Dokument, achten Sie darauf, es richtig zu benennen, und fügen Sie dann das kopierte Ich sehe, dass dieses Design etwas größer ist als die vorherigen, aber das ist völlig in Ordnung Es wird unseren Arbeitsablauf nicht beeinträchtigen. Wir werden mit dem gleichen Prozess der Trennung der Schichten fortfahren . Lassen Sie uns also zuerst die Schnittmaske loslassen und dann die Gruppierung des Designs aufheben Da wir nun beschlossen haben, dass wir in diesem Teil die Avatar-Symbole später in der Animation durch echte menschliche Bilder ersetzen werden, werden wir dies bei der Gruppierung und Organisation dieses Benutzeroberflächenfensters berücksichtigen Gruppierung und Organisation dieses Fahren Sie vorerst einfach mit dem gleichen Vorgang der Trennung der Ebenen Und während du das tust, möchte ich dich an etwas Wichtiges erinnern. Vielleicht fühlt sich dieser Prozess momentan überwältigend oder zu zeitaufwändig an. Aber denken Sie daran, dass Sie wahrscheinlich nie eine so große Anzahl von UI-Panels in einem Projekt vorbereiten müssen . Ich mache das hier mit Absicht , damit Sie mit mir üben können, und später in der Animationsphase werden wir eine Vielzahl verschiedener Beispiele für UI-Panels haben, werden wir eine Vielzahl verschiedener Beispiele für UI-Panels haben mit denen wir arbeiten können. Okay, zurück zur Lektion. Jetzt kommen wir zum interessanten Abschnitt. Lassen Sie uns zunächst das weiße Feld dieses Abschnitts sperren. Wir können diesen Teil und die beiden Schaltflächen, die wir hier auf der linken Seite haben, gruppieren . Gehen wir nun weiter unten zum Avatar-Bereich. Mir ist aufgefallen, dass der gesamte Abschnitt gruppiert ist. Als Erstes fange ich an, die Gruppierung aufzuheben und alle Ebenen innerhalb dieser Gruppe zu trennen damit ich entscheiden kann, was gruppiert werden soll und was Okay, jetzt wollen wir versuchen, diesen ganzen Abschnitt zu gruppieren. Wie Sie sehen, haben wir etwas, das stört, und es ist die Form, die für eine Schnittmaske verwendet wurde. Wählen wir sie aus und löschen sie aus dem Design, Wählen wir sie aus und löschen sie aus dem weil wir sie nicht benötigen Lassen Sie uns nun den gesamten Abschnitt auswählen und alles zusammen gruppieren Gehen wir nun zu allen folgenden Avatar-Benutzeroberflächenfeldern über. Da wir anstelle der Avatar-Symbole echte Bilder hinzufügen möchten , sollten wir sicherstellen, dass wir hier nicht die Formen auswählen, aus denen das Avatar-Symbol besteht, und diesen Abschnitt gruppieren. Als Nächstes können wir die Ebene, die wir gerade erstellt haben, ausschalten, sodass wir einfach alle Formen auswählen können , aus denen das Avatar-Symbol besteht, und es gruppieren können. Wir werden diese Form später in After Effects als Maske für die menschlichen Bilder verwenden als Maske für die menschlichen Bilder wir in diesem Abschnitt hinzufügen werden. Sie können diese Ebene jetzt über der vorherigen platzieren , wenn Sie möchten. Vor allem aber wiederholen wir diesen Vorgang für die restlichen Avatar-Benutzeroberflächen, die wir hier haben. Wir können zunächst die Gruppierung aller Hauptfelder und der Formen in Bezug auf jedes Feld Anstatt uns mit den Avatar-Symbolen zu befassen, überspringen wir diesen Teil vorerst da es etwas schwierig sein wird, die Ebenen zu finden, die wir ausschalten müssen, um die Formen der Avatar-Symbole zu sehen Bevor wir das tun, wollen wir Gruppierung der restlichen Teile beenden Und nachdem wir die leeren Ebenen gelöscht haben, können wir die Avatar-Formen leicht finden und sie nach Bedarf gruppieren Lassen Sie uns nun den Abschnitt mit den Seitenzahlen in einer Gruppe gruppieren und dann auch die Schaltfläche auf der linken Seite gruppieren. Beginnen wir nun mit dem Löschen der leeren Ebenen, damit wir im Ebenenfenster etwas bequemer navigieren können. Wir können dies mit der Methode der umgekehrten Auswahl tun. Großartig. Jetzt können wir die Box-Ebenen im Ebenenfenster finden und sie alle ausschalten, sodass wir die Formen der Avatar-Symbole viel einfacher auswählen können . Fangen wir nun an, sie nacheinander zu gruppieren. Sobald das erledigt ist, platzieren wir jede Avatar-Ebene über ihrem jeweiligen Abschnitt Schließlich können wir die verbleibenden leeren Ebenen löschen und danach die Datei auf dem Computer speichern. Damit haben wir diese Lektion abgeschlossen und sind bereit, mit der nächsten fortzufahren , in der wir uns mit einem weiteren kniffligen Figma-Frame befassen werden Es wird unglaublich sein. Wir sehen uns im nächsten. Und bevor wir uns die nächste Lektion ansehen, vergessen Sie nicht, eine zehnminütige Pause einzulegen, um sich zu erfrischen, bevor wir weitermachen. Wir sehen uns in der nächsten. 7. Strukturieren komplexer Benutzeroberflächenfenster für Animationen: Ich bin zurück. In dieser Lektion werden wir also an einem Teil arbeiten, in dem wir eine weitere Demo-Animation der Software zeigen wollen . Aber dieses Mal ist die Animation etwas komplexer. Laut Storyboard müssen wir an einer Szene arbeiten, müssen wir an einer Szene arbeiten in der wir den Nachrichtenbereich sehen Gehen wir also zuerst zu Figma und suchen diesen Rahmen hier im Projekt. Hier ist er In unserem Fall müssen wir eine Animation der Nachrichtenliste zeigen , die in einen persönlichen Messaging-Chat verwandelt Ist der Konversationsbereich. Versuchen Sie an dieser Stelle, den Ablauf der Benutzeroberflächen so gut wie möglich zu verstehen. Schauen Sie sich die verschiedenen Abschnitte in beiden Designs an und finden Sie heraus wie Sie die Ebenen am besten organisieren können. Auf diese Weise erhalten Sie eine Vorstellung davon , welche Ebenen Sie als separate Ebenen belassen und welche Ebenen Sie gruppieren sollten. Lassen Sie uns mit dieser Idee im Hinterkopf mit dem ersten Frame beginnen, dem Nachrichtenbereich. Lassen Sie uns es als SVG aus Figma kopieren und dann mit einem Illustrator ein neues Dokument erstellen Geben wir diesem neuen Dokument einen Namen. Lassen Sie uns nun das Figma-Design hier einfügen. In Ordnung. Lassen Sie uns nun, wie üblich, alle Ebenen aus dem gruppierten Design herausnehmen. Jetzt können wir die Form löschen, die für die Schnittmaske verwendet wurde, und die graue Haupthintergrundebene hier sperren die graue Haupthintergrundebene , sodass wir die restlichen Formen und Ebenen einfach auswählen können Formen und Ebenen einfach Wir können bereits die leere Ebene und die Ebene löschen , die die Form enthielt, die für die Schnittmaske verwendet wurde. Großartig Lassen Sie uns nun damit beginnen, jeden Abschnitt in diesem Design zu gruppieren, beginnend mit dem linken Menü Jetzt können wir den gesamten Abschnitt hier mit all den verschiedenen Tabs gruppieren , einschließlich natürlich der weißen Box dahinter M Als nächstes gruppieren wir die Formen und Ebenen der Kopfzeile hier oben. Und jetzt fangen wir an, uns mit dem Hauptabschnitt in diesem Design zu befassen , der Nachrichtenliste. Lassen Sie uns zunächst das weiße Feld sperren, damit ich die restlichen Objekte hier einfach auswählen kann. Lassen Sie uns nun diesen Teil gruppieren und dann die lila Schaltfläche hier gruppieren. Lassen Sie uns jetzt noch einmal darüber nachdenken welche Objekte hier gruppiert werden müssen und was nicht Kehren wir zum Figma-Design zurück und versuchen zu sehen, was im nächsten UI-Panel vor sich geht , das in diesem Demo-Flow erscheinen muss . Soweit ich weiß, müssen wir eine Animation erstellen, in der wir auf einen der Kontakte klicken, und dann sollte ein privates Konversationspanel mit dieser bestimmten Person erscheinen Alles klar? Zurück zu Illustrator. Ich stelle zunächst sicher, dass ich hier nur einen roten Stern habe Falls ich eine Animation des roten Sterns erstellen möchte , der für die anderen Kontakte in der Liste erscheint . Lassen Sie uns als Nächstes sehen, was hier mit der Box hinter dem Kontakt vor sich geht. Ich sehe, dass die Box mit keiner Farbe gefüllt ist. Und da ich bereits weiß , dass ich in After Effects diese Box animieren und ihre Form ändern werde , denke ich, dass es besser ist , alle Boxen mit Weiß zu füllen Wählen wir sie also nacheinander aus und darauf, die Füllfarbe auf Weiß zu ändern Jetzt können wir sie einfach alle zusammen auswählen und sie im Ebenenfenster sperren. Wir müssen sie sperren, damit wir die restlichen Formen hier auswählen können. Ohne dass diese Felder stören, können Sie anhand des kleinen Quadrats auf der rechten Seite der Ebene leicht erkennen, welche Ebene ausgewählt ist anhand des kleinen Quadrats auf der rechten Seite der Ebene leicht erkennen, welche Ebene So weißt du, dass es sich um deine gewählte Ebene handelt. Wir gruppieren nicht alles , was für jedes Feld und jeden Kontakt relevant ist , da wir, wie wir bereits gesehen und verstanden haben, eine Demo-Animation dieses Abschnitts erstellen müssen Und in dieser Animation wird sich das Design der Box ändern Das bedeutet, dass jedes Objekt, das zu jedem Kontakt gehört , entweder verschwindet oder seine Position ändert. Deshalb müssen die meisten Formen und Ebenen hier getrennt bleiben, weil wir sie in After Effects animieren werden. In Ordnung. Jetzt sind wir bereit, die Objekte in jedem Abschnitt zu gruppieren. Und bevor wir weitermachen, schauen wir uns das Figma-Design noch einmal an , damit wir verstehen, ob wir hier ein Symbol benötigen , um auf separaten Ebenen zu bleiben Aus dem, was ich hier sehe, verstehe ich, dass dieser Teil mit den drei Symbolen auf der rechten Seite verschwinden muss, wenn der Übergang zum nächsten UI-Panel erfolgt Daher können wir in Illustrator tatsächlich alle drei Symbole auf einer Ebene gruppieren alle drei Symbole auf einer Ebene Wenn Sie für jedes der Symbole separat eine Animation mit dem Verschwinden erstellen möchten, sollten Sie natürlich für jedes der Symbole separat eine Animation mit dem Verschwinden jedes Symbol auf einer eigenen Ebene belassen Aber in unserem Fall müssen wir das nicht tun. Ich ziehe es vor, sie alle auf einmal verschwinden zu lassen. Wenn wir damit fertig sind, lassen Sie uns weitermachen und über den nächsten Abschnitt im Design nachdenken. Betrachten wir hier das Avatar-Symbol. Möchten wir das Avatar-Symbol vom grünen oder roten Punkt daneben getrennt lassen ? Lass uns zum Figma-Design gehen und darüber nachdenken. Ich sehe hier, dass sich der Avatar-Bereich nicht wirklich ändert, was bedeutet, dass ich die Formen, die das Avatar-Symbol und den Punkt daneben bilden, tatsächlich zu einer Gruppe zusammenfassen kann , sodass sie sich auf einer Ebene Falls Sie ein Bild von einem echten Menschen hinzufügen möchten, sollten Sie das Avatar-Symbol natürlich ein Bild von einem echten Menschen hinzufügen möchten, vom Punkt getrennt lassen, damit Sie das Avatar-Symbol dann als Maske für das Bild verwenden können dann als Maske für das Bild verwenden , das Sie in After Effects hinzufügen. In unserem Fall möchte ich hier keine Bilder hinzufügen, also lassen Sie uns diesen ganzen Abschnitt zusammenfassen. Machen wir dasselbe für die restlichen Avatar-Abschnitte im Design. Ordnung. Damit wir meiner Meinung nach mit der Gruppierung aller erforderlichen Ebenen und Objekte im Design fertig und können nun damit beginnen, sind wir meiner Meinung nach mit der Gruppierung aller erforderlichen Ebenen und Objekte im Design fertig und können nun damit beginnen, die leeren Ebenen im Ebenenbedienfeld zu löschen die leeren Ebenen im Ebenenbedienfeld Ich werde diesen Vorgang vorerst beschleunigen. Nein mir ist aufgefallen, dass ich während des Vorgangs versehentlich den roten Stern gelöscht habe. In diesem Fall kopiere ich also einen der grauen Sterne, erstelle eine neue Ebene und füge den grauen Stern hier an der richtigen Position ein. Hier ist ein kurzer Tipp zum Ausrichten des Objekts, falls Sie keine neue Anleitung erstellen möchten. Ich bringe die Leinwand nach links, wo der zweite Stern den grauen Bereich im linken Bedienfeld von Illustrator berührt, und so weiß ich, wo der erste graue Stern platziert werden soll Für die Farbe lasse ich sie grau und erstelle dann eine Animation zum Farbwechsel After Effects eine Animation zum Farbwechsel in Rot, falls ich das benötige Ordnung. Damit sind wir mit der Vorbereitung dieses Entwurfs fertig. Diese Datei kann jetzt gespeichert bevor Sie mit dem nächsten Bildschirm fortfahren. Wir haben noch zwei vor uns , also bleib konzentriert. Die nächsten beiden werden schneller sein. Ordnung. Jetzt fahren wir mit dem nächsten UI-Panel fort, das wir für die Animation vorbereiten müssen Gehen wir zurück zu Figma und wählen den entsprechenden Frame aus, der Konversationsbereich ist Kopieren wir es so, wie es ist. Gehen wir nun zurück zu Illustrator und erstellen ein neues Dokument Geben wir diesem Dokument einen passenden Namen. Wir können es auch Nachrichten nennen, da es immer noch zum Messaging-Bereich gehört , in dem wir einen Demo-Flow des Messaging-Systems dieser SAS-Plattform erstellen werden . Fügen wir nun das Design ein, das wir von Figma kopiert haben , und beginnen wir damit, daran zu arbeiten Lassen Sie uns wie immer zuerst die Schnittmaske loslassen. Dann müssen wir die Gruppierung des Designs aufheben. Danach verteilen wir alle Ebenen aus diesem Design und verschieben sie aus der Hauptebene heraus Wir können die graue Hintergrundebene bereits sperren und, bevor wir fortfahren, die beiden darunter liegenden Ebenen löschen. Eine ist eine leere Ebene und die andere ist eine Ebene, die die für die Schnittmaske verwendete Form enthält die für die Schnittmaske verwendete Form Beginnen wir nun mit der Gruppierung der Abschnitte, beginnend mit dem Seitenmenü, gegenüber dem vorherigen Bildschirm nicht geändert hat Als Nächstes gruppieren wir das Hauptmenü hier auf der linken Seite. Dann gruppieren wir den Header-Bereich. Und jetzt fangen wir an, uns mit der Hauptgliederung in diesem UI-Panel zu befassen der Hauptgliederung in diesem UI-Panel Wir können damit beginnen, das weiße Feld zu suchen und dann die verschiedenen Abschnitte in diesem Bereich gruppieren Ordnung. Und jetzt wollen wir uns mit dem Hauptbereich befassen , den Kontaktfeldern. Lassen Sie uns darüber nachdenken, welche Formen gruppiert werden sollten und welche nicht. Da die meisten Teile dieses Demo-Workflows bereits im vorherigen Design getrennt waren, können wir tatsächlich alle Formen oder Ebenen gruppieren , von denen wir sicher sind , dass wir sie nicht animieren oder in After Effects verwenden werden Da wir zum Beispiel für jedes Feld jedes Kontakts eine Animation mit sich verändernder Form erstellen werden , können wir in diesem Design das Avatar-Symbol innerhalb der Box gruppieren , um es später als Referenz zu verwenden werden es nicht erneut animieren, da wir es bereits im vorherigen Design vorbereitet haben Jetzt wähle ich die Box und die Avatar-Objekte aus und gruppiere sie alle zusammen Machen wir das für den Rest des Designs. Nun, für die restlichen Objekte in den Boxen möchte ich jedes Objekt getrennt lassen, möchte ich jedes Objekt getrennt lassen weil wir später in After Effects eine Art Animation für sie erstellen müssen eine Art Animation für sie erstellen . Ordnung. Beschäftigen wir uns jetzt mit diesem Bereich. Wir können die Datumsschaltfläche gruppieren. Lassen Sie uns nun heranzoomen und darüber nachdenken, was wir hier tun müssen. In der Zwischenzeit tu es nicht mit mir. Ich möchte ganz schnell etwas erklären. Wenn Sie jedes Hauptsymbol oder jede Form einzeln animieren möchten, können Sie zunächst jedes Hauptsymbol oder jede Form einzeln animieren möchten, die Avatar-Formen in einer Gruppe gruppieren, dann die SMS-Formen in einer anderen Gruppe gruppieren und schließlich den Uhrzeittext auf einer separaten Ebene belassen Natürlich müssten wir dies für jede Nachricht in diesem Abschnitt wiederholen dies für jede Nachricht in diesem Abschnitt Aber in meinem Fall möchte ich eine Intro-Animation für den gesamten Nachrichtenabschnitt auf einmal erstellen eine Intro-Animation für , also mache ich meine Aktionen rückgängig. Und jetzt kannst du es mit mir machen In unserem Fall werde ich all diese Formen zusammenfassen, sodass wir für jeden Nachrichtenabschnitt eine Ebene haben. Ich hoffe, Sie verstehen inzwischen, dass der Gruppierungsprozess vollständig davon abhängt, wie Sie Ihre UI-Panels animieren möchten In Ordnung. Machen wir das für die nächsten vier Nachrichtenabschnitte Lassen Sie uns nun hier aufhören und darüber nachdenken , was wir mit den letzten beiden Nachrichten machen wollen. Ich sage das , weil ich denke, dass es eine gute Idee sein kann, eine Demo-Animation der Nachrichten zwischen zwei Kontakten zu erstellen . Ich werde sicherstellen, dass jede Form hier auf einer separaten Ebene bleibt , weil ich vielleicht interessantere Animationen für diesen Teil erstellen möchte . Ich gruppiere die Avatar-Formen zu einer Ebene belasse dann den Text im Textfeld auf separaten Ebenen, da ich den Text später im Animationsprozess möglicherweise ändere. Außerdem belasse ich die Zeit auf einer separaten Ebene. Das Gleiche gilt für die letzte Nachricht. Und hier bin ich mir sicher, dass ich eine Textanimation zum Tippen erstellen werde . Also werde ich den Text auf einer separaten Ebene belassen. Lassen Sie uns nun das abgerundete Kästchen dahinter ankreuzen. Ich sehe, dass dieses abgerundete Feld keine Füllung hat, also füge ich eine weiße Füllung hinzu, da ich weiß, dass ich die Form in After Effects animieren werde die Form in After Effects Sobald das erledigt ist, fahren wir mit den nächsten drei Objekten fort und gruppieren sie eins nach dem anderen Jedes Objekt wird sich also auf einer eigenen Ebene befinden. Großartig. haben wir die Vorbereitung dieses Designs abgeschlossen und können mit dem Löschen der leeren Ebenen beginnen. Ordnung. Alles sieht gut aus. Jetzt speichern wir diese Datei. Damit haben wir dieses UI-Design fertiggestellt und sind bereit, mit dem nächsten fortzufahren, wo wir das endgültige UI-Panel oder den UI-Bildschirm für dieses Projekt vorbereiten werden . Großartig. Lassen Sie uns nun das endgültige UI-Panel für dieses Projekt vorbereiten. Gehen wir zu Figma und suchen es, damit wir es in Illustrator kopieren können Laut Storyboard müssen wir in diesem Teil einen kurzen Demo-Ablauf der Software zeigen, müssen wir in diesem Teil einen kurzen Demo-Ablauf der Software zeigen in dem wir den Dateibrowser-Bildschirm zeigen und den Vorgang des Hochladens eines neuen Dokuments demonstrieren Wie Sie sehen können, haben wir das Hauptfenster und ein kleines Popup Genau wie beim letzten Mal, als wir diese Situation hatten. Lassen Sie uns zuerst nur die Popup-Ebenen kopieren und danach kommen wir zurück und kopieren den Hauptbildschirm. Auf diese Weise wird es viel einfacher sein. Um dieses Design in Illustrator vorzubereiten. Die Hauptgruppe dieses Designs finden wir in den Figma-Ebenen Klicken wir mit der rechten Maustaste darauf und kopieren es als SVG. Gehen wir nun zu Illustrator und erstellen ein neues Dokument. Wir nennen es Screen Eight File Browser. Großartig. Jetzt fügen wir das Design hier ein. Und jetzt verschiebe es einfach zur Seite. Als Nächstes erstellen wir eine neue Ebene und kehren dann zu Figma zurück, um den Hauptbildschirm zu kopieren Wir können das Popup vorerst ausschalten und dann den gesamten Figma-Frame kopieren Zurück in Illustrator fügen wir es in die neue Ebene ein, die wir erstellt haben, und beginnen mit dem Trennen aller Ebenen, bevor wir mit der Gruppierung beginnen Da wir hier, genau wie im vorherigen Design, eine Schattenebene haben , suche ich diese Ebene im Stapel und benenne sie in Schatten um, damit wir sie später leicht finden können Ordnung, wir können diese Ebene vorerst ausschalten, dann die graue Haupthintergrundebene sperren und schließlich die beiden Ebenen darunter löschen, und schließlich die beiden Ebenen darunter löschen da wir sie nicht benötigen. Großartig. Fangen wir jetzt an, die Abschnitte hier zu gruppieren, beginnend mit dem linken Menü Als ich versuchte, das kleine graue, abgerundete Rechteck auszuwählen , fiel mir auf, dass es hier eine Linie gibt, die wir für die Animationsphase später in After Effects nicht wirklich benötigen Deshalb wähle ich es aus und lösche es aus dem Design. In Ordnung. Also lasst uns weitermachen und diesen Menübereich gruppieren. Wir können jetzt das linke Hauptmenü der Software über der neu erstellten Ebene platzieren , sodass sich der kleine Pfeil über dem zweiten Menüpunkt befindet. In Ordnung. Gehen wir nun zum Header-Bereich über. Aber bevor wir den gesamten Abschnitt gruppieren, lassen Sie uns eine Sekunde innehalten und zu Figma zurückkehren , um ihn ein bisschen besser zu verstehen Da wir beim Hinzufügen einer neuen Datei in diesem UI-Panel eine Pop-up-Animation erstellen möchten , denke ich, dass es besser ist, die lila Kopfschaltfläche außerhalb der Gruppe zu lassen lila Kopfschaltfläche außerhalb der Mit dieser Schaltfläche erstellen wir eine Klick-Animation Danach erscheint das Popup-Fenster zum Hochladen einer neuen Datei Vor diesem Hintergrund kehren wir zu Illustrator zurück und gruppieren zunächst alle Formen und Ebenen, die zu dieser lila Schaltfläche gehören Schalten Sie diese Ebene nach der Gruppierung vorerst aus, damit wir die restlichen Header-Objekte einfach auswählen und alle gruppieren Großartig. Jetzt können wir die lila Schaltfläche über der neu erstellten Header-Gruppe platzieren und dann mit der Arbeit am Hauptbereich dieses UI-Panels fortfahren . Da ich mit Sicherheit weiß , dass ich für jede Dokumentbox in diesem Abschnitt eine Intro-Animation erstellen möchte für jede Dokumentbox in diesem Abschnitt eine Intro-Animation , werde ich zunächst die Gruppierung des Abschnitts aufheben und alle Ebenen trennen Auf diese Weise kann ich entscheiden, welche Formen und Ebenen so gruppiert werden sollen , dass sie zum Animationsprozess passen. In Ordnung. Nachdem ich die Schichten getrennt hatte, fiel mir auf, dass es eine Form gibt , die als Schnittmaske verwendet wurde Ich suche sie und lösche sie, sodass ich die restlichen Ebenen und Objekte einfach auswählen die restlichen Ebenen und Objekte Sobald das erledigt ist, wähle ich den gesamten Abschnitt aus und gruppiere ihn richtig. Großartig. Lassen Sie uns nun mit der Arbeit am Abschnitt „Dokumentenboxen“ unten beginnen . Wenn ich mir nicht sicher bin, was in der Struktur passiert, verschiebe ich Objekte normalerweise ein wenig, um zu sehen, welche Ebenen bereits gruppiert sind und welche nicht. In diesem Fall sehe ich zum Beispiel, dass der graue Strich von der Füllung des weißen Felds getrennt ist . In unserem Fall müssen sie nicht getrennt werden. Tatsächlich denke ich auch, dass wir nicht jedes einzelne Objekt jeder Dokumentenbox getrennt brauchen . So kann ich jeden Abschnitt zu einer Ebene gruppieren. Aber da ich weiß, werde ich eine Demo-Flow-Animation erstellen der eine neue PNG- oder JPEG-Datei hochgeladen wird. Dabei werde ich darauf achten, dass die Objekte in der PNG-Dokumentbox getrennt bleiben der PNG-Dokumentbox getrennt bleiben Auf diese Weise habe ich mehr Flexibilität , falls ich etwas Besonderes mit dieser Datei machen oder sie sogar duplizieren und die Namen später ersetzen möchte mit dieser Datei machen oder sie sogar duplizieren und die Namen später ersetzen Behalten wir das also im Hinterkopf. Aber lassen Sie uns vorerst damit beginnen, jeden Abschnitt der Dokumentenbox einzeln zu gruppieren Abschnitt der Dokumentenbox einzeln Wie bereits erwähnt, lassen wir den Abschnitt PNG-Dokumentenbox vorerst ungruppiert und fahren mit der Gruppierung der verbleibenden fort In Ordnung. Ich bin mir sicher, dass ich keine spezielle Animation für die Seitenzahlen erstellen In diesem Fall können wir also einfach den gesamten Abschnitt auswählen und ihn gruppieren. Fantastisch. Gehen wir nun zurück und befassen uns mit dem Abschnitt mit nicht gruppierten PNG-Dokumenten Um es etwas einfacher zu machen, können wir zunächst den grauen Strich im weißen Füllfeld gruppieren und dann diese Ebene sperren, sodass wir alle verbleibenden Objekte, die das PNG-Dokumentsymbol bilden , sicher auswählen und sie ebenfalls gruppieren können PNG-Dokumentsymbol bilden , sicher auswählen und sie ebenfalls gruppieren Großartig. Gehen wir nun zur rechten Seite und prüfen, ob es noch andere Objekte gibt , die wir zu einer Ebene gruppieren können. Hier können wir den gesamten Abschnitt mit den Avatar-Symbolen gruppieren . Was die Textebenen anbelangt, so sind sie bereits ordnungsgemäß auf separaten Ebenen gruppiert, sodass wir diese nicht berühren müssen. Wir können sie so lassen, wie sie sind. Großartig. Damit sind wir mit der Vorbereitung des Bildschirms fertig. Und jetzt können wir alle leeren Ebenen aus dem Ebenenbedienfeld löschen . Fantastisch. Als Nächstes schalten wir alle Ebenen wieder ein und sperren sie, damit wir mit der Arbeit am Popup-Panel beginnen können. Vergessen Sie nicht, das Pop-up selbst zu gruppieren falls Sie es schnell an der Mitte der Leinwand ausrichten möchten . Ordnung. Fangen wir damit an, die Schichten zu trennen. Falls Sie diese Nachricht erhalten, machen Sie sich keine Sorgen. Das bedeutet wahrscheinlich, dass Sie die entsprechende Ebene nicht ausgewählt haben, bevor Sie die Ebenen aufgeteilt Um dies zu beheben, machen Sie zuerst die Aktion rückgängig. Dann heben Sie die Gruppierung der Ebene wieder auf, klicken Sie, um die Auswahl aufzuheben , wählen Sie sie erneut aus und teilen Sie die Ebenen schließlich So können wir klar entscheiden , welche Formen in diesem Abschnitt gruppiert werden sollen Soweit ich sehe, können wir den gepunkteten Strich zusammen mit dem lila Rechteck dahinter gruppieren zusammen mit dem lila Rechteck dahinter Und falls wir später eine Animation für dieses Element erstellen möchten , können wir immer die nativen Stricheigenschaften in After Effects verwenden in After Effects Großartig. Machen wir nun dasselbe mit allen Formen, aus denen das Ordnersymbol besteht. Um die Auswahl zu vereinfachen, zoomen wir heraus, suchen das weiße Rechteck in diesem Pop-up und sperren es. Auf diese Weise können wir sicher alle kleinen Formen auswählen, die sich derzeit auf separaten Ebenen befinden , und sie zu Gruppen zusammenfassen. Als Nächstes sehe ich, dass sich jede Textzeile bereits auf einer separaten Ebene befindet, also lassen wir sie so, wie sie sind. Schauen wir uns nun das X-Symbol und den Text der Upload-Datei an. In diesem Fall können wir sie zusammen mit dem weißen Rechteck gruppieren . Lassen Sie uns also das Rechteck entsperren, alle diese Ebenen auswählen und sie zu einer gruppieren. Fantastisch. Damit haben wir die Vorbereitung aller Abschnitte dieses UI-Panels abgeschlossen . Jetzt können wir die verbleibenden leeren Ebenen im Panel löschen und das Projekt schließlich speichern bevor wir mit der nächsten Lektion fortfahren. In dieser Lektion werden wir alle vorbereiteten Designs überprüfen und einige Verbesserungen vornehmen , bevor sie in After Effects importieren. Es wird fantastisch, also sehen wir uns dort. 8. Verfeinern des Designs mit abgerundeten Ecken: Komm zurück. In dieser Lektion werden wir das Aussehen der Designs ein wenig verbessern. Zum Beispiel können wir damit beginnen , die Ecken aller Benutzeroberflächen abzurunden , die wir für alle Bildschirme haben, die wir für After Effects vorbereitet Und da wir viele Formen haben , die gruppiert sind, ist es besser, das Direktauswahlwerkzeug zu verwenden, um die Ecken auszuwählen, damit wir sie abrunden können Wählen wir also diesen Bereich aus, halten dann die Umschalttaste gedrückt und skalieren die Ecken um uns herum , sagen wir, vorerst 20 Pixel. Lassen Sie uns das jetzt für alle Ecken in diesem Design tun. Wir können diesen Bereich auswählen, dann zur nächsten Ecke gehen, die Umschalttaste gedrückt halten und den Bereich ebenfalls auswählen. Danach gehen wir nach oben und wählen bei erneuter Umschalttaste auch diesen Bereich aus. Lassen Sie uns nun die Rundheit für alle ausgewählten Ecken auf 20 setzen für alle ausgewählten Ecken auf . Ich denke, mit den abgerundeten Ecken sieht es etwas besser Nachdem wir mit dem neuen Aussehen zufrieden sind, sollten wir nicht vergessen, Strg oder Befehl S zu drücken , um die Datei zu speichern Großartig. Und jetzt gehen wir zum nächsten Bildschirm über und machen dasselbe. Also wähle ich hier alle vier Ecken aus und setze dann die Rundheit auf 20 oder vielleicht versuchen wir es mit 30. Ich denke, 30 sieht besser aus. Lassen wir es also so stehen. Speichern wir das neue Update jetzt. Und bevor wir weitermachen, kehren wir zum ersten Bildschirm zurück und stellen die Ecken ebenfalls auf 30 ein. Ich möchte Ihnen diesen Prozess zeigen, weil es etwas schwierig sein kann , den Eckwert für Bereiche zu definieren, in denen wir eine Form mit der abgerundeten Ecke haben . Das ist ziemlich einfach. Alles, was wir tun müssen, ist einfach mit dem Direktauswahl-Werkzeug auf die Form zu klicken und dann auf die Ecke zu klicken, die wir ändern möchten, und dann den Eckwert zu aktualisieren. Das Gleiche können wir auch für diese Ecke tun. Machen wir dasselbe auch für die untere rechte Ecke. Und jetzt ist hier der knifflige Teil. In Bereichen, in denen wir mehr als eine Form zusammen haben, wie in diesem Teil, haben wir die weiße Form der Kopfzeile und die graue Form des Hintergrunds. Wir müssen sicherstellen, dass wir beide Ecken beider Formen aktualisieren . Ein häufiger Fehler, der passieren kann, ist, wenn Sie die Formen auswählen und dann auf einen Eckpunkt klicken , ohne zu merken, dass Sie angeklickt und ausgewählt nur die Ecke der ersten Form in der Linie In diesem Fall ändert sich nur die Ecke des weißen Rechtecks in der Kopfzeile in diesen Fällen also mit dem Direktauswahl-Werkzeug beide Formen aus, Wählen Sie in diesen Fällen also mit dem Direktauswahl-Werkzeug beide Formen aus, ohne auf den Eckpunkt zu klicken. Fahren Sie stattdessen direkt mit der Anpassung des Eckwerts fort. Und natürlich sollten wir nach dem Aktualisieren aller Ecken nicht vergessen, die Datei zu speichern. In Ordnung. Gehen wir jetzt zum dritten Bildschirm und passen dort die Eckenrundheit Aber lassen Sie uns die Datei jetzt speichern und zum nächsten Bildschirm übergehen Und jetzt, bevor ich zum nächsten Bildschirm übergehe, möchte ich auch alle Logo-Symbole im unteren Teil des Hauptmenüs ausblenden . Da dieser gesamte Bereich gruppiert ist, verwenden wir das Auswahlwerkzeug und doppelklicken hier auf eine der Ebenen, bis wir sie auswählen können. Ich bin mir nicht sicher, was in diesem Bereich passiert, also werde ich die Schattenebene finden und sie vorerst ausschalten. Ich sehe, dass ich jetzt die restlichen Formen und Logos auswählen kann . Also lass uns das machen. Um diese Auswahl zu vereinfachen, wählen wir den gesamten Bereich aus, einschließlich der blauen Ebene dahinter dann die Umschalttaste gedrückt und klicken Sie auf die blaue Ebene , um sie abzuwählen Und jetzt schalten wir sie im Ebenenbedienfeld aus, anstatt sie zu löschen schalten wir sie im Ebenenbedienfeld aus, anstatt sie zu Dazu können wir die Ebenengruppe öffnen und die ausgewählten Ebenen ausschalten. Wir können die ausgewählten Ebenen an den rosafarbenen quadratischen Symbolen neben ihnen erkennen . Ordnung. Das sieht okay aus. Und jetzt können wir die Gruppe verlassen, indem wir irgendwo außerhalb des Designs klicken , um die Auswahl der ausgewählten Ebenen aufzuheben Und bevor wir zum nächsten Bildschirm übergehen, vergessen wir nicht, die Datei zu speichern Ich werde diesen Vorgang beschleunigen , da er so ziemlich derselbe ist wie auf dem vorherigen Bildschirm. Ordnung. Sobald wir mit der Anpassung des Designs fertig sind, können wir mit dem nächsten Schritt fortfahren, in dem wir endlich damit beginnen, die Designs in After Effects zu importieren. Wir haben hier in Illustrator einige zusätzliche Ressourcen, die wir sicherlich in der Animationsphase verwenden werden Wir wissen zum Beispiel, dass wir eine Szene haben, in der wir eine Logoanimation erstellen müssen , damit wir sie sofort fertig stellen können Wir können auch die Farbpalette für dieses Projekt erstellen, sodass wir sie während des gesamten Animationsprozesses verfolgen können. Machen wir uns also an die Arbeit und bereiten wir diese beiden ganz schnell vor. Natürlich müssen Sie das nicht tun, da Sie bereits die Farbpalette und die Logodateien und den Assets-Ordner haben . Es ist sehr wichtig für mich, diesen Prozess zu zeigen , damit Sie meinen Prozess verfolgen können, wenn Sie an Ihrem Erklärvideo arbeiten Sie Und natürlich könnten wir diese Dateien später vorbereiten, nachdem wir bereits mit der Animation begonnen haben, aber ich bevorzuge es, sie so schnell wie möglich fertig zu Beginnen wir also zunächst mit der Vorbereitung der Farbpalette. Zu diesem Zweck können wir im FiGMA-Projekt, das der Kunde uns mitgeteilt hat, tatsächlich überprüfen , ob es Designleitfäden oder Ressourcen seines Unternehmens gibt Designleitfäden oder Ressourcen seines Unternehmens Wenn Sie ein Figma-Projekt erhalten, erhalten Sie in den meisten Fällen auch diese Design-Assets In unserem Fall finden wir die Farben hier im Seitenbereich Wählen wir nun die Ebenen aus, die wir nach Illustrator kopieren möchten, und kopieren wir sie dann im SVG-Format So wie wir es für die UI-Panels getan haben. Gehen wir nun zurück zu Illustrator und erstellen ein neues Dokument Wir können die aktuelle Dateivorlage verwenden und nur darauf achten, nicht zu vergessen, dieser Datei einen Namen zu Nennen wir es One Point Colors. Jetzt können wir die Figma-Ebenen einfügen und mit der Vorbereitung beginnen. Zuerst werde ich diese Gruppe verkleinern bis sie in mein Dokument passt Als Nächstes stelle ich sicher, dass die Ebenen gruppiert sind, sodass ich dann die gesamte Gruppe an der Mitte des Dokuments ausrichten kann. Schließlich werde ich nur darauf achten, diese Ebene Farben zu nennen , da sie viel einfacher zu finden später in After Effects auf diese Weise viel einfacher zu finden ist. Sobald wir fertig sind, speichern wir diese Datei und fahren mit der Vorbereitung des Logos fort. Für das Logo können wir es tatsächlich auf einem der Bildschirme finden. Wie Sie sehen können, haben wir hier auf Bildschirm fünf ein vollständiges Logo. Doppelklicken wir also auf das Logo und kopieren wir die entsprechenden Formen, die wir hier haben. Lassen Sie uns nun ein neues Dokument mit derselben Größe erstellen und es einfach One-Punkt-Logo nennen. Dann fügen wir es hier ein, gruppieren, skalieren und ohne Probleme ausrichten. In Ordnung. Und jetzt, da wir wissen, dass wir eine Logoanimation erstellen werden, bereiten wir dieses Design für After Effects vor. Das heißt, wir werden die Schichten verteilen. Aber zuerst, damit wir sehen können, was wir tun, erstellen wir eine neue Ebene und zeichnen ein Rechteck mit der Größe der Leinwand. Und füllen Sie es jetzt mit einer anderen Farbe, damit wir deutlich sehen können , woran wir gerade arbeiten. Platziere diese Ebene unter dem Logo. Und wenn Sie möchten, wählen Sie eine kontrastreichere Farbe, damit das Logo besser zur Geltung kommt. Lassen Sie uns abschließend diese Ebene sperren und mit der Vorbereitung des Logos beginnen. Ordnung. Also werde ich zuerst die Gruppierung der Ebenen aufheben, dann den Text des Logos auswählen und ihn vertikal an der Mitte der Leinwand ausrichten Nur um sicherzugehen, werde ich das Symbol auch gruppieren, sodass ich es auch vertikal zur Leinwand ausrichten kann, um sicherzustellen, dass alles gut ausgerichtet ist Sobald alles perfekt in der Linie ist, können wir damit beginnen, die Gruppierung der Formen aufzuheben und sie in Ebenen aufzuteilen. Hier müssen wir den zusammengesetzten Pfad freigeben . Lassen Sie uns jetzt das seltsame Füllproblem hier ganz schnell beheben. Stellen Sie zunächst sicher, dass Sie alle problematischen Ebenen auswählen , und verwenden Sie dann das Shape Builder-Tool, um das Problem zu beheben. Mauszeiger über den problematischen Bereich, halten Sie die Alt- oder Wahltaste auf dem Mac gedrückt und klicken Sie auf diesen Bereich, um die Füllung zu löschen Großartig. Lassen Sie uns jetzt damit beginnen, alle Buchstaben auf separate Ebenen zu verteilen, damit wir sie in After Effects einzeln animieren können in After Effects einzeln Sobald das erledigt ist, benennen wir unsere Ebenen, damit wir später in After Effects während der Animationsphase leichter durch sie navigieren später in After Effects während der Animationsphase Ordnung. Und jetzt speichern wir diese Datei. Und damit beende die Lektion. Jetzt, da wir alles für die Animation vorbereitet haben , was Vektor-Designelemente angeht, können wir endlich After Effects öffnen und mit dem Import aller vorbereiteten Elemente beginnen. Das werden wir in der nächsten Lektion tun. Es wird großartig, also sehen wir uns dort. 9. Importieren der Entwürfe in After Effects: Komm zurück. In dieser Lektion importieren wir die Designs in After Effects und bereiten das Projekt für Animationen und After Effects vor. Bevor wir das tun, möchte ich die Farbpalette und die Logodateien aus dem AI-Ordner nehmen und die Logodateien aus dem und sie in den Assets-Ordner einfügen. Meiner Meinung nach handelt es sich dabei eher allgemeine Assets, die wir im Projekt verwenden werden um allgemeine Assets, die wir im Projekt verwenden werden, als um spezifische KI-Dateien, die für After Effects vorbereitet wurden. In Ordnung, zurück zum AI-Ordner. Falls Sie mir bei der Vorbereitung der Figma-Designs in Illustrator nicht gefolgt sind, machen Sie sich keine Sorgen Sie finden all diese Designs in ihrem fertigen und polierten Zustand im Ordner Screens for AE. Sie werden sehen , wenn Sie den Assets-Ordner im Hauptkursordner öffnen den Assets-Ordner im Hauptkursordner , den Sie von mir heruntergeladen haben Ordnung. Nachdem das erledigt ist, öffnen wir nun gemeinsam Adobe After Effects. Ich werde die Beta-Version verwenden, da dies die aktuellste Version von After Effects ist die aktuellste Version von , die ich während der Aufzeichnung dieses Kurses bekommen konnte . Und ich möchte die neueste Version verwenden da sie einige sehr coole Updates enthält, einschließlich der Offset-Keyframes - und Ebenenfunktion, die wir natürlich gemeinsam üben werden natürlich gemeinsam üben Falls Sie eine ältere Version von After Effects verwenden, die unter der Version 2025 liegt, machen Sie sich keine Sorgen Ich werde auch in Ihrer Version erwähnen, wie Sie die Dinge tun, die wir in der neuesten Version tun. Okay. Sobald wir After Effects geöffnet haben, wir zunächst sicher , dass wir uns in Bezug auf das Panel-Layout alle einig sind. Gehen wir zu Fenster und stellen sicher, dass wir das Standardlayout ausgewählt haben. Falls Ihr Standardlayout etwas anders aussieht, setzen Sie es zurück, da Sie die Positionen der Bedienfelder wahrscheinlich irgendwann in der Vergangenheit geändert haben. Wenn Sie einen kleinen Bildschirm haben, finden Sie dieses Layout vielleicht etwas komfortabler , da Sie hier alle Registerkarten im rechten Bereich übersichtlich sehen können , z. B. die Registerkarte Effekte und die Registerkarte Eigenschaften. Wenn Sie jedoch möchten, dass der Fokus auf der Timeline liegt, können Sie das Zeitleistenfenster nehmen und es hierher ziehen. Wenn Sie eine graue Linie sehen, lassen Sie das Bedienfeld los Jetzt ist dieses Bedienfeld größer. Es liegt an Ihnen, das zu tun, was sich in Ihrem Fall am besten anfühlt. Und falls Sie einige der wichtigen Bedienfelder wie die Textfelder nicht sehen, können Sie natürlich wichtigen Bedienfelder wie die Textfelder nicht sehen, zu Fenster gehen und sie von hier aus hinzufügen. Fügen wir zum Beispiel die Registerkarte „Absatz“ zur Registerkarte „ Zeichen“ hinzu. In Ordnung. Also, wenn wir mit dem Layout fertig sind, wollen wir sicherstellen, dass wir auch in Bezug auf die Systemeinstellungen auf derselben Wellenlänge sind . Gehen wir also zu Einstellungen bearbeiten und gehen zuerst zu AutoSave und stellen das automatische Speichern von 20 Minuten auf 5 Minuten Wir möchten, dass After Effects unser Projekt automatisch in kürzeren Schritten speichert , da das System bei solchen Projekten plötzlich abstürzen kann Wir möchten also sichergehen , dass After Effects unser Projekt alle 5 Minuten automatisch speichert Gehen wir nun zu Allgemein und stellen Sie sicher, dass Sie das Kontrollkästchen aktivieren, das den Ankerpunkt zentriert. Auf diese Weise wird der Ankerpunkt jeder Form, die wir erstellen, automatisch zentriert. Sobald das erledigt ist, gehen wir zu Medien- und Festplatten-Cache und stellen sicher, dass sich der Ordner dem der gesamte temporäre Cache gespeichert wird , während Sie After Effects verwenden in dem der gesamte temporäre Cache gespeichert wird, während Sie After Effects verwenden, auf einer Festplatte Ihres Computers befindet , die über viel freien Speicherplatz verfügt . Klicken Sie also auf Ordner auswählen und stellen Sie sicher, dass die Festplatte und der Ordner, in dem Sie den Cache speichern, über ausreichend freien Speicherplatz verfügen. Andernfalls kann After Effects langsam arbeiten. Für die Mindestgröße des Festplatten-Caches können Sie sie bei 46 GB belassen. Ordnung. Und jetzt fahren wir der nächsten Einstellung fort, die wir anpassen möchten, nämlich Speicher und Leistung. In diesem Fall hängt es sehr von Ihrem Computer ab. Wenn Sie feststellen, dass Ihr installierter Arbeitsspeicher niedriger ist als meiner, werden Sie hier wahrscheinlich andere Zahlen sehen. Am wichtigsten ist es, den für andere Anwendungen reservierten RAM zu verringern . Der für After Effects verfügbare RAM wird also größer sein. Großartig. Damit haben wir die Anpassung aller erforderlichen Systemeinstellungen abgeschlossen die Anpassung aller erforderlichen Systemeinstellungen und können nun mit der Arbeit beginnen. Wenn Sie oben rechts in meinen After Effects ein kleines Symbol oben rechts in meinen sehen, das Sie nicht haben, liegt das daran, dass ich die Beta-Version verwende Sie sich also keine Sorgen. In Ordnung. Also lass uns jetzt anfangen zu arbeiten. Lassen Sie uns zunächst unsere erste Komposition erstellen. Wir können es Master Comp nennen und dafür sorgen, dass wir in Full-HD-Auflösung mit 30 Bildern pro Sekunde arbeiten Full-HD-Auflösung mit 30 Bildern pro Sekunde Und jetzt zur Dauer, falls Sie sich nicht sicher sind, was Sie hier schreiben sollen , möchte ich Ihnen einen kurzen Tipp geben Zuerst möchte ich, dass du auf die Website gehst. Sie finden den Link in der Beschreibung dieser Lektion oder im Links-Dokument im Assets-Ordner , den Sie von mir heruntergeladen haben. Okay, wir wollen also das Skript finden, das wir vom Kunden bekommen haben, oder vielleicht haben wir es selbst erstellt. Wählen Sie dann den gesamten Text aus und kopieren Sie ihn. Jetzt müssen wir nur noch zu dieser Website zurückkehren und den Text einfügen. Die Wörter werden automatisch gezählt. Und wie Sie hier unten sehen können, zeigt es die Zeit an, die benötigt wird, um den Text mit einer durchschnittlichen Lesegeschwindigkeit zu lesen. Ich liebe es zu überprüfen, wie lange es im schnellen Modus und im langsamen Modus dauern wird . Und das gibt mir die minimale und maximale Zeitdauer für das Projekt. Jetzt, zurück in After Effects, weiß ich, dass dieses Projekt mit Sicherheit nicht länger als 2 Minuten dauern wird . Großartig. Nachdem das erledigt ist, gehen wir zur Registerkarte Erweitert und stellen alle Werte genau so ein, wie ich sie eingestellt habe. Gehen wir dann zum Three-D-Renderer und stellen sicher, dass wir das klassische Three D verwenden. Eine letzte Änderung der Einstellungen, die ich vornehmen möchte, bevor wir mit dem Projekt beginnen , besteht darin, die Bittiefe dieses Projekts zu verringern Eine höhere Bittiefe bedeutet mehr Farbnuancen und glattere beispielsweise eine höhere Bittiefe wählen, wird die Bildqualität verbessert, es werden jedoch mehr Rechenleistung und Speicherplatz benötigt, wodurch sich die Renderzeiten bei der Vorschau erheblich verlangsamen können bei der Vorschau erheblich verlangsamen Wir können die Einstellung über die Dateiprojekteinstellungen eingeben und dann zu Farbe wechseln Hier ist es unter den Farbeinstellungen. Wir können auch schnell darauf zugreifen, indem wir hier im Projektfenster auf das Symbol klicken. Lassen Sie uns die Bittiefe vorerst auf acht Bit pro Kanal einstellen , damit wir einen schnelleren Arbeitsablauf erreichen können. Später, bevor wir das Projekt rendern, wenn wir fertig sind, können wir dies skalieren, um eine bessere Farbqualität zu erzielen, aber vorerst sollten wir es auf acht setzen. Großartig. Drücken wir nun Control oder Command S, um dieses Projekt zu speichern, sodass die Autosave-Funktion aktiviert wird Und natürlich können wir das Projekt während des Vorgangs manuell speichern , wann immer wir wollen Geben Sie den Hauptordner ein, den Sie für mich heruntergeladen haben, gehen Sie zum AE-Ordner und speichern Sie das Projekt, das Sie gerade erstellen, hier. In Ihrem Fall werden Sie hier wahrscheinlich eine weitere Datei sehen, nämlich die Datei, an der ich mit der fertigen Animation gearbeitet habe . Sie können es ignorieren und einfach das Projekt speichern, an dem wir gerade arbeiten. Ordnung. Und jetzt fangen wir an, alle Illustrator-Bildschirmdesigns, die wir zuvor vorbereitet haben, in After Effects zu importieren alle Illustrator-Bildschirmdesigns, die wir zuvor vorbereitet haben, in After Eine sehr wichtige Regel, die ich bei der Arbeit an komplexen Projekten und Projekten mit mehreren Szenen habe , ist , dass mein After Effects-Projekt gut organisiert Lassen Sie uns vor diesem Hintergrund weiterarbeiten und sehen, wie wir diese Regel in diesem Kurs anwenden können. Jetzt möchte ich, dass Sie zu dem Hauptordner gehen, den Sie von mir heruntergeladen haben, und den AI-Ordner aufrufen. Ich bestehe darauf, dass Sie die AI-Dateien verwenden. Ich habe mich auf diesen Kurs vorbereitet und nicht auf die Dateien, die Sie selbst gespeichert haben. Bitte rufen Sie die Bildschirme für AE-Ordner auf und verwenden Sie die Dateien in diesem Ordner, nicht die, die Sie gerade gespeichert haben. Der Grund dafür ist, dass ich während des gesamten Unterrichts einen konsistenten Ablauf beibehalten möchte gesamten Unterrichts einen konsistenten Ablauf beibehalten , ohne dass Sie unterbrechen falls Sie bei der Vorbereitung etwas verpasst haben. Wie ich bereits sagte, werde ich alle Fehler vorstellen , die im Laufe des Unterrichts passieren können . In diesen Fällen müssen Sie nur zuhören und zuschauen. Verwenden Sie vorerst jedoch die finalisierten AI-Dateien, die ich in den Bildschirmen für den AE-Ordner vorbereitet habe . In Ordnung. Als Erstes möchte ich, dass wir alle AI-Dateien unverändert in After Effects importieren AI-Dateien unverändert in After Effects ohne die Ebenen zu trennen. Auf diese Weise können wir diese Bildschirme später als Referenzebenen verwenden . Lassen Sie uns nun einen neuen Ordner im Projektfenster erstellen und ihn Screen Designs nennen. Ziehen Sie alle Dateien in diesen Ordner, um unser Projekt zu organisieren. Großartig. Jetzt können wir das Projekt speichern und mit dem Import der Designs beginnen, wobei alle Ebenen getrennt sind, wie wir sie in Illustrator vorbereitet haben Dazu müssen wir sie nacheinander importieren. Fangen wir mit dem ersten Bildschirm an. Jetzt müssen wir uns dafür entscheiden, es als Komposition zu importieren , weil wir alle Ebenen haben wollen, die sich in dieser Datei befinden. Und dann müssen wir unter Footage-Dimensionen die Ebenengröße auswählen. Hier ist der Unterschied zwischen Ebenengröße und Dokumentgröße, falls Sie es nicht wissen. Größe des Dokuments. Jede Ebene hat die volle Größe der ursprünglichen Illustrator-Zeichenfläche Selbst wenn der tatsächliche Inhalt klein ist, kann dies die intakte Ausrichtung erschweren Ebenengröße: Die Grenzen der einzelnen Ebenen basieren nur auf dem Inhalt innerhalb dieser Ebene. Das macht es einfacher, einzelne Elemente präzise zu skalieren , zu animieren und auszurichten Großartig. Klicken wir also auf Okay und sehen, dass wir jetzt eine neue Komposition des Bildschirms und einen neuen Ordner mit allen Ebenen aus dieser Illustrator-Datei haben. In Ordnung. Lassen Sie uns nun diesen Vorgang wiederholen und den Rest der Illustrator-Dateien in unser After Effects-Projekt importieren der Illustrator-Dateien in unser After Effects-Projekt Ein sehr wichtiger Punkt, den Sie aus diesem Kurs mitnehmen möchten , ist, dass die Arbeit an komplexen Projekten nicht immer ein klarer und sauberer Prozess ist immer ein klarer und sauberer Prozess Während des Workflows werden Sie immer einen Fehler finden , den Sie zuvor gemacht haben, oder etwas, das Sie übersehen haben. Ich werde versuchen, dir das während des gesamten Kurses zu zeigen und den Kurs so realistisch wie möglich zu gestalten , denn im wirklichen Leben arbeiten wir nicht wie Roboter. Wir machen Fehler und es ist wichtig zu wissen, wie man mit ihnen umgeht. Ordnung, wenn das erledigt ist, organisieren klicke ich gerne hier auf Typ, um das Projektpanel zu Somit ist jedes Asset, das ich habe visuell besser sortiert Um unser Projektpanel zu organisieren, erstellen wir nun einen weiteren Ordner , den wir precomps nennen In diesem Ordner werden wir alle Precomps speichern , die wir während des Projekts erstellen Die Precomps, die wir hier bereits aus den Screendesigns haben , wählen wir den Precomps-Ordner aus, erstellen einen weiteren Ordner darin und nennen ihn Screens erstellen einen weiteren Ordner darin und nennen ihn Ziehen Sie dann alle Precomps der Screendesigns in diesen Ordner. Um unser Projekt noch besser zu organisieren, wir sicher, dass kein Ordner ausgewählt ist, und erstellen wir dann einen neuen Ordner namens Screen Designs Ziehen Sie in diesen Ordner alle Ordner, die die Bildschirmebenen der einzelnen Designs enthalten . Fantastisch. Das Projektpanel sieht momentan viel besser aus. Wir können dem Namen dieses Ordners auch KI hinzufügen. Wir wissen also, dass dies Illustrator-Ebenen sind. AI steht für Adobe Illustrator. Auf diese Weise können wir diesen Ordner leicht von dem Ordner unterscheiden, in dem wir später abgeflachte Illustrator-Bildschirmdesigns speichern Oh, und mir ist gerade aufgefallen, dass ich hier einen Grammatikfehler hatte , also habe ich ihn korrigiert Und jetzt sind wir bereit, mit der Lektion fortzufahren. An diesem Punkt können wir das Projekt erneut speichern. Eine weitere kleine Sache , die ich gerne mache ist, meine Masterkomposition in einer anderen Farbe einzufärben, damit ich sie später leicht wiederfinden kann, wenn ich das endgültige Projekt rendern oder durch das Projektfenster navigieren muss das endgültige Projekt rendern oder durch das Projektfenster navigieren Wir werden hier später viel mehr Elemente haben, also das hilft, und wenn wir über Assets sprechen, gehen wir zum Assets-Ordner und holen einige der Dateien ein, die wir in diesem Projekt verwenden werden. Natürlich werden wir irgendwann alle Ressourcen nutzen, die wir hier haben. Aber im Moment müssen wir nicht alles importieren. Wir können mit den Assets beginnen , die wir sehr bald verwenden werden, zum Beispiel der Farbpalette und der Logodatei. Fangen wir also mit dem Logo an. Wir können das neu erstellte PreComp bereits im Precomps-Ordner platzieren , aber nicht im PreComps-Ordner des Bildschirms Was den Ordner mit den Ebenen angeht, werden wir später einen Platz dafür finden In Ordnung, jetzt bringen wir die Farbpalette rein. Da wir es nicht als separate Ebenen benötigen, diese Illustrator-Datei sowieso keine enthält diese Illustrator-Datei sowieso keine getrennten Ebenen Wir können es als Filmmaterial importieren, was bedeutet, dass es als vereinfachte Illustrator-Datei geliefert wird als vereinfachte Illustrator-Datei Ich sehe, dass ich unten ein seltsames weißes Kästchen habe. Sie wurden wahrscheinlich aus Figma importiert, als ich von Figma als SVG-Format nach Illustrator kopiert habe Figma als SVG-Format nach Illustrator In Ihrem Fall erhalten Sie meine fertige Datei, sodass Sie dieses Problem nicht Für mich ist es sehr einfach, das zu beheben. Ich muss lediglich die Farbpalette in Illustrator öffnen , die weißen Formen auswählen und sie löschen. Dann drücke ich GRLS, um die Datei zu speichern, da ich den Speicherort dieser Datei beim letzten Speichern geändert habe Ich muss sie erneut suchen Sie befindet sich jetzt im Assets-Ordner, also wähle ich sie aus und speichere sie über der vorherigen Version Zurück in After Effects wird die Farbpalette automatisch aktualisiert. Großartig. Jetzt sieht alles okay aus. Lassen Sie uns einen weiteren Ordner mit dem Namen Assets erstellen und alle Ordner mit Illustrator-Ebenen und den Rest der Elemente, die wir in diesem Projekt verwenden werden, in diesen Ordner ziehen und den Rest der Elemente, die wir in diesem Projekt verwenden werden , in diesen Ordner , einschließlich natürlich der Farbpalette Jetzt haben wir alles perfekt organisiert. Lassen Sie uns das Projekt speichern und wir sind bereit, mit dem nächsten Schritt fortzufahren , in dem wir endlich mit der Arbeit an dem Projekt beginnen werden. Das wird super viel Spaß machen. Also lass es uns tun. Okay, lassen Sie uns jetzt ein weiteres Asset erstellen , das wir definitiv in diesem Projekt verwenden Ein animierter Hintergrund mit Farbverlauf. Wir können es in einigen Szenen oder vielleicht sogar in allen Szenen dieses Projekts verwenden. Natürlich können Sie fertige animierte Hintergründe von Stock-Websites herunterladen , aber ich möchte Ihnen zeigen, wie Sie einen benutzerdefinierten animierten Hintergrund mit Farbverlauf direkt in After Effects erstellen direkt in After Effects und ihn intelligent im Projekt verwenden können In nur einer Minute werden Sie genau sehen, was ich meine. Der erste Schritt besteht darin, eine neue Sphäre zu erstellen. Drücken Sie dazu lange das Rechteckwerkzeug und wählen Sie das Ellipsenwerkzeug Stellen Sie sicher, dass die Füllung auf Weiß eingestellt ist und der Strich ausgeschaltet ist Erstellen Sie nun einen proportionalen Kreis indem Sie beim Zeichnen die Umschalttaste gedrückt halten. Damit wir alle auf derselben Seite bleiben, setzen Sie die Größe dieser Form auf 500. Wenn Sie eine ältere Version von After Effects verwenden, finden Sie diese Eigenschaft unter den Eigenschaften der Ebene. Hier ist sie. Wählen wir nun diese Ebene und wechseln zurück zum Auswahlwerkzeug, damit wir sie zur Seite verschieben können. Als Nächstes duplizieren Sie den Kreis und verschieben ihn hierher. Machen wir es noch einmal, sodass wir insgesamt drei haben. Wählen Sie nun alle drei Kugeln aus und duplizieren Sie sie erneut. Verschiebe die Duplikate im Ebenenstapel nach oben und richte alles grob zur Mitte aus, nur damit du weißt, dass die genaue Anzahl der Kugeln nicht wichtig Sie können so viele erstellen, wie Sie möchten. Worauf ich mich konzentrieren möchte, ist die Haupttechnik hinter diesem Setup. Jetzt müssen wir anfangen, unsere Kugeln zu färben. Öffnen wir dazu den Ordner Assets und fügen die Farbpalettendatei in die Szene ein. Sobald sie drin ist, sperren Sie diese Ebene, damit sie sich nicht bewegt, und beginnen Sie dann , Farben auf die Kugeln anzuwenden. Wenn Sie fertig sind, duplizieren Sie eine weitere Kugel, platzieren Sie sie irgendwo dazwischen und ändern Sie ihre Farbe. Lassen Sie uns diesen Vorgang noch einmal wiederholen , um unseren Gradienten aufzubauen. Großartig. Und jetzt, wo wir alle unsere Kugeln fertig haben, können wir die Farbpalettenebene ausschalten und dieses Setup interessanter gestalten , indem wir den Maßstab und die Position jeder Kugel anpassen . Versuchen Sie, die Eckkugeln etwas größer als die anderen zu machen. Ziel ist es, die Ecken des Rahmens mit größeren Kugeln zu füllen und gleichzeitig das Gesamtbild so weit wie möglich zufällig Fantastisch. Jetzt können wir die Animationsphase dieses Gradienten starten. Öffnen wir dazu die Positionseigenschaft für eine der Kugeln und fügen einen sehr einfachen Wackelausdruck Halten Sie die Alt- oder Wahltaste auf dem Mac gedrückt und klicken Sie auf die Positionsstoppuhr Geben Sie in das Ausdrucksfeld Wiggle ein. Innerhalb der Klammern müssen wir zwei Werte hinzufügen. Schreiben wir zwei für den ersten Wert, der die Geschwindigkeit des Wackelns bestimmt Wie oft pro Sekunde wird die Bewegung auftreten. Geben wir für den zweiten Wert vorerst 30 ein. Dadurch wird das Ausmaß der Bewegung in Pixeln in alle Richtungen gesteuert . Lassen Sie uns nun diese Ebene einzeln bearbeiten, damit wir deutlich sehen können, was passiert. Wie Sie sehen können, bleibt die Kugel mit diesen Einstellungen im Grunde in der Nähe ihrer ursprünglichen Position. Wir wollen, dass sich die Kugeln über einen größeren Bereich bewegen , sodass sich der Gradient ständig ändert. Um das zu erreichen, erhöhen wir den zweiten Wert. Versuchen Sie, ihn auf 100 zu setzen, und Sie werden den Unterschied sehen. Es sieht besser aus, aber jetzt fühlt sich die Bewegung etwas zu schnell an. In diesem Fall sollten wir es verlangsamen, indem wir die erste Zahl auf eins ändern. Auf diese Weise bewegt sich die Kugel langsamer, legt aber immer noch eine große Entfernung zurück. Ich nehme diese Anpassungen hier vor, damit Sie, wenn Sie den Wiggle-Ausdruck noch nie verwendet haben , genau verstehen können, wie er funktioniert jetzt mit diesen Werten experimentieren, erhalten Sie eine viel klarere Vorstellung davon, wie sowohl die Geschwindigkeit als auch den Umfang der Bewegung steuern können. In Ordnung. Sobald wir mit der Animation zufrieden sind, können wir mit der rechten Maustaste auf die Positionseigenschaft einer Kugel klicken und „Nur Ausdruck kopieren“ wählen. Wählen Sie dann die restlichen Ebenen aus und drücken Sie Strg V oder Befehl V auf dem Mac, um den Ausdruck einzufügen. Da es sich um einen Wackelausdruck handelt, bewegt sich jede Kugel nach dem Zufallsprinzip Aber hier ist die Sache. Wenn alle Kugeln die exakt gleichen Wackelwerte verwenden, fühlt sich die Animation nicht wirklich zufällig Um das zu beheben, wählen wir alle anderen Kugeln aus. Drücken Sie nun zweimal die Taste E, um das Ausdrucksfeld zu öffnen , und passen Sie dann den zweiten Wert im Wiggle-Ausdruck Statt 100 setzen wir es für diese Kugeln auf 150. Auf diese Weise reisen einige weiter als andere, was uns ein viel natürlicheres, zufälliges Aussehen verleiht Großartig. Jetzt sieht es schon besser aus, aber lass mich dir einen kleinen geheimen Trick zeigen , den nicht viele Leute kennen. Dadurch sieht dein animierter Farbverlauf noch dynamischer aus. Erstellen Sie zunächst ein neues Null-Objekt und ordnen Sie dann alle Kugeln dieser Null als übergeordnetes Objekt zu. Achten Sie darauf, die übergeordnete und verknüpfte Pick-Whip nicht mit der Track-Matte zu verwechseln und verknüpfte Pick-Whip nicht mit der Track-Matte Wähle Whip. Sie sehen ähnlich aus, aber für diesen Schritt benötigen wir den Parent und den Link Pick Whip Als Nächstes animieren wir die Drehung des Null-Objekts. Anstatt manuelle Keyframes hinzuzufügen, verwenden wir einen anderen einfachen, aber leistungsstarken Ausdruck Öffnen Sie die Rotationseigenschaft der Null, halten Sie die Alt-Option gedrückt und klicken Sie im Ausdrucksfeld auf die Stoppuhr im Ausdrucksfeld auf die Uhrzeit-Sternchen 100. Das bedeutet, dass sich die Null jede Sekunde um 100 Grad dreht. Das ist ein bisschen zu schnell für unser Projekt, aber ich wollte dir zeigen, wie es funktioniert. Verlangsamen wir es, indem wir es dann in T (Stern) ändern. Jetzt dreht sich die gesamte Kugelgruppe gleichmäßig, während jede einzelne Kugel weiterhin unabhängig voneinander wackelt Durch diese Kombination fühlt sich der Farbverlauf lebendig an. Lassen Sie uns daraus nun einen echten Verlaufs-Look machen. Erstellen Sie dazu eine neue Einstellungsebene. Gehen Sie dann zum Effekte- und Voreinstellungsfenster und suchen Sie nach Fast Box Blur Ziehen Sie es auf die Einstellungsebene und vergrößern Sie den Unschärferadius Lassen Sie uns es vorerst auf 100 setzen. Scrollen Sie durch die Zeitleiste und beobachten Sie, wie sich die überlappenden farbigen Kugeln zu einem schönen, sich verändernden Farbverlauf verschmelzen einem schönen, sich verändernden Farbverlauf verschmelzen Dies ist eine großartige Gelegenheit , den Maßstab und die Position der Kugeln in der Szene anzupassen und die Position der Kugeln in der Szene Was ich hier gerne mache, ist , die Zeitleiste durchzublättern, zu überprüfen, wie die Animation zu verschiedenen Zeitpunkten aussieht, und dann den Maßstab und die Position der einzelnen Kugeln zu verfeinern und die Position der einzelnen Kugeln Im Moment haben wir, wie Sie wahrscheinlich bemerkt haben, keinen festen Hintergrund in der Szene, wodurch der Farbverlauf unvollständig aussieht Um das zu beheben. Lassen Sie uns einen neuen weißen Festkörper erstellen und ihn unter allen Ebenen platzieren. Schalten Sie als Nächstes die Farbpalettenebene ein und suchen Sie nach dem Fülleffekt. Wenden Sie es auf den Feststoff an und wählen Sie eine der helleren oder dunkleren Farben, je nachdem, was für Sie am besten geeignet Dadurch erhalten wir eine Hintergrundfarbe mit unseren animierten Kugeln mischen Ich persönlich entscheide mich für eine hellviolette Farbe, die meiner Meinung nach wirklich gut aussieht. Als ich mir das Setup jetzt ansehe, ist mir aufgefallen, dass die Kugel im oberen linken Bereich etwas zu dunkel anfühlt, also ändere ich sie in eine hellere Farbe. Lassen Sie uns noch einmal eine Vorschau anzeigen und sehen, wie alles zusammen aussieht. Wenn Sie zu diesem Zeitpunkt mit dem Aussehen Ihres Farbverlaufs nicht zufrieden sind, versuchen Sie, einige Kugeln zu verschieben. Ich finde zum Beispiel, dass dieser Bereich zu hell ist, also ziehe ich die beigefarbene Kugel ein wenig nach unten. Sie können die Positionen so lange anpassen bis Sie ein ausgewogenes Gesamtbild erhalten Eine weitere nützliche Anpassung besteht darin, die Wackelausdrücke in den Positionseigenschaften zu öffnen die Wackelausdrücke in den Positionseigenschaften zu Wenn Sie feststellen, dass sich bestimmte Kugeln zu stark oder zu wenig bewegen, ändern Sie einfach ihre Wackelwerte Auf diese Weise haben Sie die volle Kontrolle darüber, wie dynamisch oder subtil sich die Bewegung Ihres Verlaufs anfühlt Der Hauptgedanke dabei ist, dass dieses Setup flexibel ist. Sie können die Einstellungen für Farben, Skalierung, Positionen und Wackeln so lange verfeinern, bis Sie den animierten Farbverlauf erreicht haben, mit dem Sie zufrieden sind Sobald ich mit der allgemeinen Konfiguration zufrieden bin, können wir meiner Meinung nach das Aussehen des Verlaufs noch weiter verbessern , indem wir den Unschärferadius vergrößern Dadurch werden die Farben sanfter miteinander vermischt. Und meiner Meinung nach sieht das Ergebnis viel schöner aus. ich dir nun all die verschiedenen Schritte gezeigt habe, mit denen du deine Farbverläufe verfeinern kannst, werde ich einige Augenblicke damit verbringen, die Kugeln neu einzufärben , bis ich einen Look finde, der In meinem Fall möchte ich, dass der Farbverlauf eher zu einem violetten als zu einem gelblichen Ton Also passe ich die Kugelfarben entsprechend an. In Ordnung, jetzt bin ich mit dem Ergebnis zufrieden. Bevor wir weitermachen, kopieren wir den Namen des Effekts und fügen ihn in die Einstellungsebene Wir werden uns also immer daran erinnern, wofür diese Einstellungsebene verwendet wird. Da wir zum jetzigen Zeitpunkt mit dem Farbverlauf fertig sind und uns gefällt, wie er aussieht, wollen wir auf keinen Fall all diese Ebenen in der Masterkomposition belassen . Lassen Sie uns sie alle zu einer einzigen Vorkomposition zusammensetzen. Wir nennen es Gradientenhintergrund. Stellen Sie sicher, dass beide Optionen im Dialogfeld aktiviert sind , und klicken Sie auf Okay. nun im Projektfenster den Ziehen Sie nun im Projektfenster den neu erstellten Precomp in den PreComps-Ordner , um alles zu organisieren Außerdem ändere ich die Etikettenfarbe wieder auf die Standardfarbe Sandstorm Es war früher blau, weil es innerhalb der Master-Komposition erstellt wurde , die ich blau eingefärbt hatte Ordnung. Jetzt möchte ich Ihnen etwas sehr Wichtiges zeigen, wenn Sie an komplexen Projekten arbeiten an komplexen Projekten Eines der Hauptanliegen bei Projekten wie diesem ist es, sicherzustellen, dass After Effects reibungslos funktionieren, sowohl bei der Vorschau als auch beim Rendern Wenn Sie in unserem Fall die ursprüngliche Vorkomposition dieses animierten Hintergrunds mit Farbverlauf während des gesamten Projekts verwenden dieses animierten Hintergrunds mit Farbverlauf während des , wird dieser After Effects sehr stark beanspruchen, Vorschauen und Renderings verlangsamt Stattdessen müssen wir diese Animation einmal rendern und dann die gerenderte Version des Verlaufs verwenden, und dann die gerenderte Version des Verlaufs verwenden wo immer sie im Projekt benötigt wird Lassen Sie mich Ihnen genau zeigen, wie das geht. Lassen Sie uns zunächst den Pre-Comp dieser Animation eingeben. Als Nächstes setzen wir die Farbeinstellungen in unserem Projekt auf Maximum Zu diesem Zeitpunkt möchte ich nicht, dass du etwas unternimmst. Schau zu und hör zu. Ich möchte Ihnen zwei verschiedene hochwertige Formate zeigen , die Sie zum Rendern verwenden können. Das erste ist extrem schwer, daher empfehle ich nicht, es tatsächlich zu verwenden, aber ich zeige es Ihnen, damit Sie den Unterschied zwischen den Formaten verstehen . Keine Sorge, ich gebe dir Bescheid, wenn es Zeit ist, zurückzugehen und mir beim Rendern des zweiten Formats zu folgen . Nehmen wir an, Sie wissen , dass dieser Hintergrund unbedingt in der höchstmöglichen Qualität gerendert werden muss . In diesem Fall würden wir zum Ausgabemodul gehen, QuickTime als Format wählen und dann in den Formatoptionen unter Videocodec entweder Animation oder eine der Apple ProRes-Auflösungen auswählen eine der Apple ProRes-Auflösungen Lassen Sie uns vorerst mit der Animation fortfahren . Jetzt wähle ich einen Ort zum Speichern dieses Renderings und klicke auf die Schaltfläche Rendern. Ordnung. Das Rendern ist fertig. Wie Sie sehen können, hat es fast 5 Minuten gedauert. Auf Ihrem Computer kann es je nach Hardware mehr oder weniger sein. Aber hier ist das Wichtigste zum Mitnehmen. Anstatt die ursprüngliche Vorkomposition dieser Gradientenanimation zu verwenden , verwenden wir jetzt die gerenderte Datei After Effex verarbeitet das Filmmaterial wesentlich effizienter als ein umfangreicher Precomp, sodass sowohl die Vorschau als auch das endgültige Rendern Wie ich bereits erwähnt habe, ist dieses Format jedoch sehr umfangreich dieses Wenn Sie nicht viel freien Speicherplatz auf Ihrem Computer haben, sollten Sie ihn stattdessen als hochwertige MP Four-Datei und nicht als MOV-Datei rendern . Auf diese Weise erhalten Sie immer noch eine hervorragende Qualität, aber mit einer viel geringeren Dateigröße. Also lass uns das jetzt zusammen machen. Sie können zu After Effects zurückkehren und mir beim Rendern des zweiten leichteren Formats folgen . Lassen Sie uns also noch einmal den ursprünglichen Precomp öffnen. Dieses Mal ändern wir die Farbtiefe auf 16 Bit. Drücken Sie nun die Strg- oder Befehlstaste plus M, um es an Render Q zu senden. im Ausgabemodul Wählen Sie im Ausgabemodul h.264 als Format Das ist eine MP Four-Datei. In den Formatoptionen sehen Sie die Zielbitrate, die standardmäßig auf 15 Megabit pro Sekunde eingestellt ist Sie können diesen Wert für eine bessere Qualität auf einen höheren Wert wie 35 oder 45 erhöhen , oder wenn Sie möchten, wählen Sie einfach eine der vorgefertigten Vorlagen aus die Bitrate bereits für Sie festlegt Ich werde mich dafür entscheiden, das in meinen Assets-Ordner zu rendern, aber Sie sollten es in den separaten Ordner rendern, den ich Sie zuvor für Ihre eigenen Dateien erstellt habe. Drücken Sie abschließend die Render-Taste. Sobald der Rendervorgang abgeschlossen ist, lösche ich die alte MOV-Datei und importiere dann die neue MP Four-Version des animierten Verlaufshintergrunds in unser Projekt. Sie können entweder die Datei verwenden, die Sie gerade gerendert oder die Datei, die ich in den Assets-Ordner aufgenommen habe. Großartig. Wie Sie sehen, ist die MP Four-Datei jetzt viel kleiner, aber die Qualität ist immer noch perfekt für den Rest des Projekts. Wenn ich sie in die Timeline lege, sieht sie identisch mit der ursprünglichen Pre-Comp Der einzige Unterschied besteht darin, dass After Effects es jetzt viel effizienter handhaben kann, was die Vorschau und das Rendern des endgültigen Projekts schneller und flüssiger macht des endgültigen Projekts schneller und Damit beenden wir diese Lektion. Speichern wir das Projekt noch einmal, bevor wir weitermachen. In der nächsten Lektion erstellen wir die Videotafel, bevor wir mit der eigentlichen Animation beginnen. Sie werden sehen, warum es so wichtig ist, eine Videotafel bereit zu haben . Das spart uns eine Menge Zeit und macht den Animationsprozess viel einfacher. Es wird unglaublich sein. Also werde ich dich im nächsten sehen. Und bevor Sie sich die nächste Lektion ansehen, vergessen Sie nicht, eine zehnminütige Pause einzulegen, um sich zu erfrischen, bevor wir weitermachen. Wir sehen uns in der nächsten. 10. Erstellen der Videoboard für die Szenenzeitung: Kommen Sie zurück, wir können jetzt die Farbeinstellungen auf acht BPC Wir werden es wieder auf 16 umstellen, wenn wir diese Animation beendet haben und die endgültige Version rendern müssen In der Zwischenzeit werden wir in dieser Lektion die Videotafel erstellen ist ein sehr wichtiger Schritt bei der Erstellung von Videos oder Animationen mit mehreren Szenen. Zusammen mit dem Voiceover können wir so bestimmen, können wir so bestimmen wie lange jede Szene dauern soll in der Animationsphase sehr hilfreich, sodass wir wissen, wie viele Sekunden jede Szene dauern sollte Und dafür suchen wir uns das Storyboard, das ich zuvor für das Projekt vorbereitet habe, denn wir werden die Frames des Storyboards verwenden , um das Videoboard zu erstellen Da wir alle Ebenen haben wollen, können wir die Komposition auswählen, die Ebenengröße beibehalten und dann die Ebenenstile an das Filmmaterial anpassen Was nicht wirklich wichtig ist , da wir in diesen Ebenen aus Photoshop keine Ebenenstile haben . Ordnung, wir können den Ordner mit den Ebenen im Assets-Ordner platzieren Ebenen im Assets-Ordner Und jetzt geben wir die Vorkomposition ein, die wir durch den Import des Storyboards erhalten Im Moment können wir hier alle Ebenen außer der Hintergrundebene ausschalten und sie sperren, damit sie den Prozess nicht beeinträchtigt Großartig. Jetzt importieren wir das Voiceover in das Projekt ob Sie ein Voiceover vom Kunden erhalten oder es selbst generieren Am wichtigsten ist es, ein beliebiges Voiceover zu haben, das Sie beim Erstellen der Videotafel und beim Starten der Animation des eigentlichen Projekts verwenden können beim Erstellen der Videotafel und beim Starten der , auch wenn es sich nur um ein einfaches Voiceover handelt, das mit KI erstellt Es ist sehr wichtig, ein erstes Voiceover zu erstellen, damit Sie ungefähr wissen, wo jede Szene Jetzt zeige ich Ihnen, wie Sie das völlig kostenlos machen können. Die Website, die ich normalerweise verwende, sei es für ein erstes Voiceover oder für ein letztes, das ich tatsächlich im Projekt verwenden werde , heißt vi dot IO Sie können sich sehr schnell mit Ihrem Gmail-Konto anmelden. Ich werde mich anmelden, weil ich mich bereits mit meinem Gmail-Konto angemeldet habe. Zum Zeitpunkt der Aufzeichnung dieses Kurses können Sie auf dieser Plattform kostenlos einige Minuten Voiceover erstellen einige Minuten Voiceover Vielleicht haben sie bis zu dem Zeitpunkt, an dem du diese Lektion siehst , ihr kostenloses Paket geändert und es ist nicht mehr kostenlos, aber das sollte auf jeden Fall kein Problem sein, denn ich bin mir sicher, dass es sehr einfach ist, kostenlose Tools zu finden , die zwei oder drei Minuten Voiceover ohne Kosten generieren können zwei oder drei Minuten Voiceover Ich bestehe nachdrücklich darauf , dass Sie ein Voiceover erstellen , bevor Das erspart Ihnen auf lange Sicht viele Überarbeitungen und Kopfschmerzen Ordnung. Sobald wir auf der Website angemeldet sind, ist sie ziemlich einfach zu bedienen Ich klicke hier, um ein neues Projekt zu erstellen. Als Nächstes wähle ich die Größe meines Bildschirms. In meinem Fall werde ich die Full-HD-Auflösung verwenden. Dann wähle ich für die Hintergrundfarbe Grün, und das liegt daran, dass ich in diesem Video auch Bildunterschriften erstellen werde in diesem Video auch Bildunterschriften erstellen Wenn der Hintergrund grün ist, ist es in After Effects viel einfacher , ihn mit einem der Keying-Effekte zu entfernen Ordnung. Um nun das Voiceover zu erstellen, gehe ich zum Audiobereich und wähle die Text-to-Speech-Funktion Als nächstes gehe ich zum Drehbuch und kopiere alle Texte , die ich hier habe Dann füge ich es in das Textfeld ein. Und wie Sie sehen können, ist die Menge an Text, die ich gleichzeitig verwenden kann, begrenzt . Der nächste Schritt besteht darin, die richtige Stimme für mein Voiceover In diesem Teil werde ich die Dinge beschleunigen. Ich spiele nur und teste, um herauszufinden, was die beste Wahl für mein Video ist. Alles klar. Nachdem ich alle Stimmen getestet hatte, habe ich endlich die ausgewählt, die mir am besten gefallen hat. Jetzt wähle ich sie aus und klicke auf Generieren. Dieser Vorgang kann einige Minuten dauern. Ordnung. Also ist das Voiceover fertig Ich ändere einfach den Namen dieses Projekts und jetzt kann ich mir anhören , was ich habe ein großes Team über mehrere Projekte hinweg zu verwalten ist nicht einfach, ein großes Team über mehrere Projekte hinweg zu verwalten. Zu viele Aufgaben, zu viele Nachrichten. Und bevor du dich versiehst, ertrinkst du im Chaos und suchst nach Hilfe Hat einen Punkt erreicht. Die Plattform , die Projektmanagement so einfach macht. Sogar deine Katze könnte das. Mit One Point erhalten Sie einen kristallklaren Überblick über alles, woran Ihr Team gerade arbeitet. Alle Ihre Projekte, all Ihre Aufgaben, alles an einem Ort. Wie Sie vielleicht bemerkt haben, hören wir manchmal lange oder gar keine Pausen In dieser Situation werde ich meinen Text ein wenig anpassen. Durch die Änderung der Satzzeichen im Text wird die KI die Version des Voiceovers geringfügig ändern ein großes Team über mehrere Projekte hinweg zu verwalten mehrere Projekte Zu viele Aufgaben, zu viele Nachrichten. Und bevor du dich versiehst, ertrinkst du im Chaos und suchst nach Hilfe Einen Punkt erreicht. Die Plattform , die Projektmanagement so einfach macht. Ordnung, das klingt besser. Aber ich habe beschlossen, die Stimme auf einen anderen Künstler umzustellen Verwaltung eines großen Teams über mehrere Projekte hinweg. In diesem Fall muss ich nur den gewünschten Künstler finden und auf Regenerieren klicken Großartig. Sobald ich mit dem Voiceover zufrieden bin, füge ich als Nächstes dem Video Untertitel hinzu dem Video Untertitel Ich mache das, weil es mir später in After Effects hilft zu verstehen, worüber in der Szene gesprochen wird, auch wenn ich den Voiceover nicht höre Es ist nur eine Kleinigkeit, die ich gerne mache, wenn ich an Projekten mit Voiceover arbeite Es ist okay, wenn du nicht ganz verstehst, wovon ich spreche Sobald wir in ein paar Minuten tatsächlich damit beginnen, daran zu arbeiten , wird alles für Sie viel klarer. Hier auf der linken Seite kann ich den Text anpassen, wenn ich Fehler finde. Ordnung. Sobald ich mit den Untertiteln fertig bin , werde ich die Schriftgröße verkleinern und alles noch einmal überprüfen, bevor ich es herunterlade Okay, ich bin bereit, es herunterzuladen. Dazu klicke ich auf Herunterladen und stelle sicher, dass die Qualität auf HD eingestellt ist und dass die gebrannten Untertitel überprüft sind. Jetzt klicke ich auf Video exportieren und warte ein paar Minuten. Sobald das erledigt ist, klicke ich auf das Download-Symbol und wähle, es als MP Four-Datei herunterzuladen , weil ich die Untertitel sehen möchte Wenn Sie keine Untertitel in Ihrem Voiceover haben möchten, können Sie sie als MP Three-Datei herunterladen und in Ihrem Projekt verwenden. Alles klar? Ziehen wir das Voiceover in unser Projekt. Lassen Sie uns nun das MP für die Datei in unsere Timeline bringen und mit der Erstellung der Videotafel beginnen Als erstes müssen wir den grünen Bildschirm entfernen, damit wir die Bildunterschriften und die Ebenen der Videotafel sehen können Gehen wir dazu zum Effektfenster und suchen wir nach dem wichtigsten Lichteffekt Jetzt müssen wir nur noch die Pipette der Bildschirmfarbe auswählen und hier auf die grüne Farbe klicken Fantastisch. Jetzt fangen wir an, die Videotafel zu erstellen. Das Erste, was ich beim Erstellen der Videotafel gerne mache , ist , alle Frames aus dem Storyboard nacheinander in der Timeline Um das schnell zu machen, wählen wir alle Ebenen aus. Und jetzt gehen wir zu Bild zehn und schneiden die Ebenen bis zu diesem Punkt zu. Um nun alle Ebenen gleichzeitig zu verschieben, ist es wichtig, dass wir die Auswahl von der ersten Ebene aus beginnen , die wir am Anfang der Timeline haben möchten . In unserem Fall ist es Ebene Nummer eins. Wählen Sie es also aus, halten Sie die Umschalttaste gedrückt und wählen Sie dann die letzte Ebene aus. Klicken Sie nun mit der rechten Maustaste, gehen Sie zum Keyframe-Assistenten, wählen Sie Sequenzebenen und klicken Sie dann einfach auf Okay Wie Sie sehen können, sind alle unsere Ebenen jetzt nacheinander versetzt, beginnend mit der ersten Ebene, die wir ausgewählt haben Nun, manchmal ist der erste Offset nicht das, was Sie benötigen weil die Dauer jeder Ebene entweder zu kurz oder zu lang ist. In unserem Fall sind zehn Frames für jede Ebene zu kurz. Machen wir also rückgängig, was wir getan haben, und wiederholen Sie diesen Vorgang erneut, aber setzen Sie diesmal die Dauer jeder Ebene auf 1 Sekunde. Jetzt können wir damit beginnen, jede Ebene gemäß dem Skript anzupassen. Und da wir die Bildunterschriften unten sehen können, müssen wir nicht einmal das Drehbuch hören Wir können einfach dem Text folgen, um zu wissen , welche Frames zu jedem bestimmten Zeitpunkt angezeigt werden sollen jedem bestimmten Zeitpunkt Deshalb füge ich meinen Voiceovers gerne Bildunterschriften hinzu. Beim endgültigen Rendern kann ich einfach die Ebene der Untertitel ausschalten, sodass ich sie nicht sehe, aber trotzdem den Voiceover höre Später wirst du genau verstehen, was ich meine. Konzentrieren wir uns nun darauf, die Dauer der Ebenen entsprechend dem Voiceover anzupassen die Dauer der Ebenen entsprechend dem Voiceover Dem Voiceover zufolge verstehe ich also, dass zu diesem Zeitpunkt die erste Szene enden und die zweite beginnen sollte enden und die zweite beginnen Das bedeutet, dass wir die Frames, die die erste Szene beschreiben, bis zu diesem Zeitpunkt anpassen müssen die erste Szene beschreiben, bis zu diesem Zeitpunkt Jetzt können wir alle Frames auswählen, die die erste Szene bilden, und ihre Dauer verkürzen. Danach können wir die Funktion der Sequenzebenen erneut verwenden , sodass sie nacheinander versetzt werden nacheinander versetzt werden ohne dass wir sie manuell verschieben müssen Wie Sie vielleicht verstehen, müssen wir diese Funktion viele Male verwenden wenn wir Storyboards oder andere Animationen erstellen , an denen wir gerade arbeiten Jetzt möchte ich Ihnen etwas Wichtiges beibringen, um ein fortgeschrittener Motion-Designer zu werden, nämlich benutzerdefinierte Tastenkombinationen für Aktionen zu erstellen, für die es noch keine Abkürzungen gibt Zum Beispiel haben wir kein Tastenkürzel für diese Funktion. Also zeige ich dir, wie wir eine benutzerdefinierte Verknüpfung dafür erstellen können . Indem wir diese Gelegenheit nutzen. Ich möchte Ihnen den Prozess der Erstellung einer neuen Verknüpfung beibringen . Sie müssen es für diese Funktion nicht tun. Sie können eine für jede gewünschte Funktion erstellen , und ich zeige Ihnen, wie. Gehen Sie zunächst zu Bearbeiten und klicken Sie auf Tastenkombinationen. Hier können Sie sehen , dass wir die Standard-After Effects-Voreinstellung für Tastenkombinationen verwenden . Sobald wir eine Verknüpfung erstellt haben, wird angezeigt, dass Sie stattdessen eine benutzerdefinierte verwenden. Stellen Sie als Nächstes sicher, dass die Sprache auf Englisch eingestellt ist. Jetzt müssen wir nur noch die Aktion in die Suchleiste eingeben. In unserem Fall können wir eine Sequenz schreiben. Und wenn wir nach unten scrollen, sehen wir Funktion der Sequenzebenen im Animationsbereich. Um eine Tastenkombination zu erstellen, klicken Sie einfach hier neben dem Namen im Kontextmenü und wählen Sie die gewünschten Tasten aus. Wir können die Tastenkombination mit Control oder Command auf dem Mac starten. Jetzt können wir alle verfügbaren Tasten, die wir verwenden können, grau eingefärbt sehen. Was lila ist, bedeutet, dass es bereits verwendet wird und wir es nicht verwenden können. Um weitere verfügbare Tasten zu öffnen, können wir unserer neuen Tastenkombination eine weitere Taste hinzufügen. Zum Beispiel können wir die Umschalttaste zusammen mit der Steuertaste verwenden . Wie Sie sehen, stehen uns jetzt viel mehr Tasten zur Verfügung. Ich benutze gerne die Zifferntasten , weil sie mir leichter zu merken sind. Wie Sie sehen können, ist Nummer eins schon vergeben, also nehmen wir Nummer zwei. Sobald das erledigt ist, beginnen wir der Auswahl der Frames der ersten Szene, beginnend mit der ersten Ebene, und verwenden dann unsere neu erstellte Tastenkombination , Strg+Shift zwei. Und da ist es. Die Abkürzung funktioniert. Jetzt können wir also mit den Untertiteln des Voiceovers arbeiten und wo wir das letzte Bild, das zur ersten Szene gehört, beenden müssen Okay. Also die zweite Szene beginnt hier. Also können wir jetzt Schicht 7 auf diesen Zeitpunkt bringen. Schauen wir uns jetzt an, was wir in der nächsten Ebene haben. Wenn wir die Bildunterschriften lesen, werden wir sehen, dass Ebene Nummer acht nicht direkt nach Ebene sieben beginnen sollte direkt nach Ebene sieben beginnen Den Bildunterschriften zufolge sollte diese Szene an diesem Zeitpunkt beginnen Etwas nach der siebten Sekunde bedeutet das, dass die in Layer 7 dargestellte Szene bis zu dem Zeitpunkt andauern sollte , an dem Layer acht beginnt Mal sehen, was wir bisher haben. ein großes Team über mehrere Projekte hinweg zu verwalten ist nicht einfach, ein großes Team über mehrere Projekte hinweg zu verwalten. Zu viele Aufgaben, zu viele Nachrichten, und bevor Sie es wissen, ertrinken Sie in einem. Sieht so aus, als hätten wir alles richtig gemacht Wenn wir diese Methode mit den Untertiteln verwenden, haben wir grundsätzlich keinen Spielraum für Fehler Alles ist super klar. Lass uns weitermachen und versuchen, es noch einmal zu üben. Lassen Sie uns nun alle Ebenen nach Ebene acht auswählen und sie später in der Timeline verschieben. Dann können wir sehen, wo die nächste Szene beginnen und enden soll. Und bevor du dich versiehst, ertrinkst du im Chaos und suchst nach Hilfe Wie Sie vielleicht verstehen, einen Punkt treffen hören müssen wir laut dem Sprecher das Logo präsentieren, wenn wir Das heißt, wir müssen mit Schicht zehn etwas früher beginnen. Lassen Sie uns nun sehen, was wir tun müssen, bevor das passiert. Zu diesem Zeitpunkt sehen wir laut den Untertiteln des Voiceovers, dass es sich um eine Szene handelt, in der wir die Szene mit der Suche nach Hilfe präsentieren müssen der Suche nach Hilfe präsentieren Lassen Sie uns also den Anfang von Ebene neun erweitern. Also fängt es hier an. Schließlich können wir Ebene acht so erweitern, dass sie an diesem Punkt endet. Großartig. Gehen wir jetzt zu den nächsten Szenen über. Okay, hier ist der Moment im Voiceover, wo wir über die Plattform sprechen In unserem Storyboard ist es die Ebene, auf der wir das Dashboard der Plattform zum ersten Mal sehen das Dashboard der Plattform zum Das bedeutet, dass wir ab diesem Zeitpunkt mit Layer Nummer 11 beginnen müssen . Lassen Sie uns vorerst all diese Ebenen nach rechts verschieben und die vorherige Szene bis zu diesem Zeitpunkt erweitern. Jetzt können wir Ebene 11 von hier aus starten. Großartig. Jetzt sehe ich, dass die Katzenszene laut den Bildunterschriften des Voiceovers zu diesem Zeitpunkt beginnen sollte Also werde ich jetzt versuchen, die Katzenszene von irgendwo hier aus zu platzieren die Katzenszene von irgendwo hier aus Das heißt, wir können die vorherige Szene bis zu diesem Punkt erweitern . Okay, ich hoffe, du verstehst langsam die Idee, eine Videotafel zusammen mit dem Voiceover zu erstellen , und wie es den Prozess einfacher macht , wenn wir unterwegs Untertitel haben, die uns leiten Okay, lassen Sie uns jetzt weitermachen und die Ebenen des Storyboards an das Timing des Voiceovers anpassen des Storyboards an das Timing des Voiceovers Timing des Voiceovers In Fällen, in denen die Dinge etwas kompliziert und wir die Ebenen nicht an das Voiceover anpassen können, finde ich am liebsten eine Szene, in der ich eine Textanimation habe, und sie an den Untertiteln auszurichten Wie Sie sehen können, haben wir eine Szene mit einer Textanimation, in der steht: N, das Also werde ich jetzt alles andere ignorieren und mir einfach weiter die Bildunterschriften ansehen , um herauszufinden, wo dieser Satz im Voiceover beginnt Wie du siehst, fängt es irgendwo hier in Sekunde 22 oder 23 an Jetzt gehe ich zurück und wähle alle Ebenen ab Ebene 17 aus und ziehe sie so wähle alle Ebenen ab Ebene 17 aus , dass sie von dem Zeitpunkt an beginnen, der das Ende der 22. Sekunde war. Jetzt muss ich nur noch das Timing an die Bildunterschriften anpassen , damit es perfekt passt Großartig. Jetzt können wir Schicht 16 hier nach rechts und Schicht 14 hier nach links bringen und sehen, was dazwischen passiert. Ich weiß, dass wir im Moment im Voiceover, wenn wir einen kristallklaren Überblick hören, bereits den UI-Bildschirm des Projekts präsentieren müssen Also können wir diese Ebene von hier aus starten und sie nach rechts ziehen Jetzt wollen wir sehen, wo wir die Szene beenden müssen. Ich weiß, dass mein nächstes Bild die Aufgabenszene zeigt. Also werde ich jetzt die Bildunterschriften lesen und sehen, wo dieser Teil im Voiceover beginnt Es beginnt hier, also bedeutet das, dass Ebene 16 hier beginnen muss Und das bedeutet, dass Schicht 15 hier enden muss. Großartig. Jetzt können wir mit den nächsten Szenen fortfahren, und von nun an wird es sehr einfach sein , da wir viele Szenen mit Textanimationen haben . Das macht es einfach, den Voiceover diesen Szenen zuzuordnen , während wir die Bildunterschriften lesen beispielsweise zu sehen, wo die Frageszene enden soll, müssen wir nur in den Voiceover-Untertiteln nachschauen, wo der wo Wie Sie hier in den Bildunterschriften des Voiceovers sehen können, sehen wir die Frage nicht mehr wir Das bedeutet, dass wir zu diesem Zeitpunkt vorerst Schicht 17 haben können. Lassen Sie uns nun alle Ebenen nach rechts verschieben und sehen, wo die nächste Szene beginnt. Achten Sie nur auf die Bildunterschriften des Voiceovers. Wie Sie sehen können, sehen wir den Text, den jedes Projekt enthält. Das bedeutet, dass wir zu diesem Zeitpunkt die nächste Szene und die Frageszene genau hier beginnen können . Lassen Sie uns nun Ebene 18 von hier aus starten. Großartig. Und jetzt, um zu wissen, wo diese Szene enden soll, müssen wir nur sehen, wo die nächste Fragetextszene gemäß den Voiceover-Untertiteln beginnt Konzentrieren Sie sich jetzt also nur auf die Bildunterschriften , bis Sie den Moment sehen , in dem die Frage beginnt Hier ist es auf Sekunde 37. Wählen wir nun alle Ebenen aus der Ebene mit dem Namen Ebene 19 aus, die die Frageszene präsentiert, und verschieben sie dann die die Frageszene präsentiert, und verschieben sie dann alle, sodass sie bei Sekunde 37 beginnen. Um nun zu sehen, wo die Frageszene enden soll, konzentrieren Sie sich weiterhin nur auf die Bildunterschriften des Voiceovers, um zu sehen, wo der Voiceover mit der Aussage endet, ins Hintertreffen zu geraten konzentrieren Sie sich weiterhin nur auf die Bildunterschriften des Voiceovers, um zu sehen, wo der Voiceover mit der Aussage endet, ins Hintertreffen zu geraten . Erweitern Sie also den Rahmen vom Storyboard der Frageszene bis zu diesem Zeitpunkt Großartig. Wenn das erledigt ist, können wir nun die restlichen Ebenen auswählen und sie am Ende der vorherigen Ebene beginnen . Wie Sie sehen können, entspricht es den Untertiteln des Voiceovers und dem Text, der in diesem Moment in der Szene angezeigt werden muss Fantastisch. Jetzt können wir zur vorherigen Szene vor der Frage zurückkehren und den Frame bis zu dem Zeitpunkt erweitern , an dem die Frageszene beginnt. Großartig. Jetzt sehe ich laut meinem Storyboard-Rahmen, dass die nächste Szene eine Frageszene ist Das heißt, ich werde jetzt alles andere vermeiden und mich nur auf die Bildunterschriften des Voiceovers konzentrieren , um zu sehen, wo der Hier ist es bei Sekunde 42. Jetzt müssen wir nur noch alle Ebenen von Ebene 21 so bringen , dass sie bei der 42-Sekunden-Marke beginnen . Danach können wir Schicht 20 so erweitern, dass sie zu diesem Zeitpunkt endet. Um nun zu sehen, wo die Frageszene endet, achten Sie auf die Bildunterschriften des Storyboards, um zu sehen, wo wir die Frage nicht mehr sehen. Hier ist sie Lassen Sie uns also alle anderen Ebenen so verschieben, dass sie von hier aus beginnen und dann Ebene 21 zu diesem Zeitpunkt beenden. Fantastisch. Lass uns weiterarbeiten. Ich sehe, dass die nächste Szene perfekt zum Voiceover passt Da der Text , den ich sehe und der in der Szene präsentiert werden muss, mit den Voiceover-Untertiteln übereinstimmt Jetzt konzentriere ich mich nur auf die Voiceover-Untertitel und sehe, worüber in der In diesem Fall sprechen wir über das Nachrichtensystem. In unserem Fall ist der Anfang der Szene okay. Aber jetzt müssen wir herausfinden, wo diese Szene endet. Konzentrieren wir uns dazu darauf, wie die nächste Szene laut Storyboard aussehen sollte Wie Sie sehen können, sehen wir jetzt eine Szene mit dem UI-Bildschirm des Dateibrowsers , in der eine Person Dateien teilen kann Vor diesem Hintergrund müssen wir jetzt zurückgehen und uns nur auf die Voiceover-Untertitel konzentrieren und sehen, wo der Sprecher anfängt, über diesen Teil zu sprechen. Hier ist es. Wie Sie sehen können, heißt es im Voiceover Teilen, was bedeutet, dass die Dateibrowser-Szene aus beginnen sollte Lassen Sie uns nun die Ebenen so einrichten, dass sie von diesem Zeitpunkt an beginnen Großartig. Und jetzt gehen wir zurück zum vorherigen Teil. Dem Storyboard-Frame zufolge sehe ich, dass es eine Szene mit einer schnellen Erinnerung zeigt, und ich sehe deutlich, und ich sehe deutlich die Bildunterschriften nicht über diesen Teil sprechen Konzentrieren wir uns also auf die Voiceover-Bildunterschriften, um zu sehen, wo der Sprecher anfängt , über den Teil mit der schnellen wo der Sprecher anfängt , über den Teil mit der schnellen Erinnerung zu sprechen. Hier ist es in Sekunde 50. Lassen Sie uns also den Storyboard-Frame dieser Szene von hier aus beginnen Großartig. Jetzt können wir Schicht 23 so erweitern, dass sie dort endet, wo Schicht 22 beginnt, und dann Schicht 22 so erweitern, dass sie dort endet, wo Schicht 23 beginnt. Jetzt sehe ich laut Storyboard, dass die nächste Szene eine Frage aufwirft Also werde ich mich jetzt auf die Bildunterschriften des Voiceovers konzentrieren und schauen, wo der Sprecher anfängt, darüber zu sprechen Hier ist es. Es fängt irgendwo in der ersten Minute an. Das bedeutet, dass wir jetzt die Ebenen ausgehend von der Frageszene auswählen und sie alle so einstellen müssen von der Frageszene auswählen und , dass sie bei der 1-Minuten-Marke beginnen. Wenn das erledigt ist, können wir Ebene 24 so erweitern, dass sie zu diesem Zeitpunkt endet. Okay. Schauen wir uns jetzt die letzte Szene an. Die Storyboard-Frames und die Bildunterschriften des Voiceovers scheinen perfekt übereinzustimmen, sodass wir hier nichts tun müssen Das Einzige, was wir tun können, ist das letzte Storyboard-Frame zu dem Zeitpunkt, an dem das Voiceover endet In Ordnung. Wenn wir mit dem Timing fertig sind, können wir jetzt den Arbeitsbereich bis zum Ende des Voiceovers verkürzen Ende des Voiceovers und überprüfen, ob alles zusammenpasst Das Storyboard wird mit dem Voiceover eingerahmt. Schauen wir uns also an, was wir haben. ein großes Team über mehrere Projekte hinweg zu verwalten ist nicht einfach, ein großes Team über mehrere Projekte hinweg zu verwalten. Zu viele Aufgaben, zu viele Nachrichten und bevor Sie es wissen, ertrinken Sie im Chaos suchen nach Hilfe. Du hast einen Punkt getroffen Die Plattform, die Projektmanagement so einfach macht, es sogar Ihre Katze kann. Mit One Point erhalten Sie einen kristallklaren Überblick über alles, einen kristallklaren Überblick über woran Ihr Team arbeitet, all Ihre Projekte, all Ihre Aufgaben, alles an einem Ort. Benötigen Sie das vollständige Bild. Jedes Projekt beinhaltet detaillierte Aufgaben, Unteraufgaben und eine Fortschrittsverfolgung in Echtzeit, sodass nichts übersehen wird. sehen möchten, wer ins Hintertreffen gerät, gehen Sie zu Ihrem Team-Tab, um die Aktivitäten aller Beteiligten auf einen Blick zu sehen Sie müssen mit jemandem Kontakt aufnehmen. Wechseln Sie in das integrierte Messaging-System, in dem alle Ihre Konversationen nach Kontakten organisiert sind. Senden Sie eine kurze Erinnerung oder teilen Sie sofort ein Update. Und ja, das Teilen von Dateien ist mühelos. Laden Sie ein beliebiges Dokument hoch, und Ihr gesamtes Team hat sofort Zugriff darauf Warum also weiter kämpfen? Gehen Sie zu OnePoint.com und erleichtern Sie sich Ihren Arbeitstag ab Ein großes Team leiten Großartig. Alles sieht perfekt aus. Und wir sind jetzt bereit, mit der nächsten Lektion fortzufahren , in der wir mit der Animation der ersten Szene beginnen werden Es wird super viel Spaß machen. Also wir sehen uns dort. 11. Der richtige Animations-Workflow: Komm zurück. Bevor wir mit der Animation der Szenen beginnen, ist es wichtig, dass ich Ihnen den richtigen Arbeitsablauf erkläre Ihnen den richtigen Arbeitsablauf Es ist ziemlich einfach zu verstehen. Zuerst möchte ich, dass du mit Makro arbeitest. Das heißt, ich möchte, dass Sie zuerst die Animation der Szenen beenden , ohne zu sehr auf Designdetails einzugehen Der wichtigste Teil ist , zunächst eine gute Animation zu erstellen , die perfekt zum Voiceover passt Das ist der wichtigste Teil. Erst wenn Sie das für alle Szenen haben, können Sie mit der Mikroarbeit beginnen. Gehen Sie also in jede Szene und fügen Sie zusätzliche Designelemente hinzu und beginnen die Szenen einzufärben und zu gestalten und Spezialeffekte wie Unschärfen, Leuchten und Schatten hinzuzufügen Spezialeffekte wie Unschärfen, Leuchten und Schatten hinzuzufügen Mit dieser Methode wird Ihr Projekt nicht nur schneller ausgeführt und — was noch wichtiger ist — es wird so vorbereitet, dass die Animation an das Voiceover angepasst wird, sondern Sie sparen auf lange Sicht auch viel Zeit, da das Design nicht 1 Million Mal angepasst Denken Sie also daran, Ihren Arbeitsablauf in zwei Teile aufzuteilen. Arbeiten Sie zuerst mit Makro an den wichtigsten Dingen und erst dann mit Micro an der Anpassung der Designdetails. Behalte dies während des gesamten Kurses im Hinterkopf und achte darauf, wie wir die nächste Szene animieren werden , bevor das Design der vorherigen Szene fertigstellen In Ordnung? Wir beginnen diese Lektion also damit, die erste Szene zu erstellen und zu animieren Bevor wir eine Szene animieren, die Voiceover enthält, müssen wir zunächst Szene animieren, die Voiceover enthält, herausfinden, wie lang diese Szene sein sollte . In unserem Fall können wir nach der Erstellung der Videotafel deutlich sehen, wann die Szene beginnt und wann sie enden sollte, bevor die nächste Wie Sie sehen können, endet die erste Szene hier. Das bedeutet, dass die Animation der Szene höchstens 4 Sekunden dauern muss . wissen, wie lange eine Szene dauert , können Sie viele Zeitanpassungen in naher Zukunft verhindern. Das ist einer der wichtigsten Vorteile einer Videoplatine. Ordnung. Lassen Sie uns zunächst die Voiceover MP Four-Datei in den Assets-Ordner bringen in den Assets-Ordner Und jetzt drücken wir Control oder Command N, um eine neue Komposition zu erstellen Nennen wir diese Szene eins. Es gibt viele Möglichkeiten, diese Szene zu animieren. Und dieses Mal möchte ich Ihnen einen kurzen Tipp für die Animation von Szenen geben Ihnen einen kurzen Tipp für die Animation , in denen wir eine Bewegung zur Seite haben , wie wir es in der ersten Szene tun Wenn ich mich mit solchen Szenen beschäftige, liebe ich es, eine breite Komposition zu erstellen und danach die Komposition bei Bedarf zu den Seiten zu animieren Ich habe diese Technik in meinem Kurs Transition Mastery behandelt, in dem wir eine Reihe von Methoden und Techniken für verschiedene Arten von Übergängen und Erklärvideos gelernt haben Techniken für verschiedene Arten von Übergängen und Okay, um eine breite Komposition zu haben, können wir die Breite mit zwei multiplizieren Als Nächstes können wir es für die Dauer vorerst bei 2 Minuten belassen Großartig. Jetzt haben wir also eine umfangreiche Komposition, in die wir den gesamten Text eingeben können , den wir in der Szene animieren müssen Öffnen wir also das Skript und kopieren den entsprechenden Text. Zurück und After Effects, wählen Sie das Textwerkzeug aus, klicken Sie einmal, um eine Textzeile zu öffnen, und fügen Sie den Text ein. Passen wir nun den Text an Designrichtlinien des Unternehmens an. In unserem Fall ist die Hauptschrift des Unternehmens Pop-Ins. Falls Sie sich nicht sicher sind, können Sie den Kunden jederzeit bitten, die entsprechende Schriftart zu bestätigen und Ihnen die entsprechende Schriftart zuzusenden , damit Sie sie auf Ihrem Gerät installieren können. In unserem Fall handelt es sich um eine kostenlose Schrift, die Sie von Google Fonts herunterladen können. Sie finden die Schrift auch in meinen Assets. Wenn Sie diese Schrift nicht auf Ihrem Gerät installiert haben, speichern Sie bitte das Projekt, schließen Sie es und installieren Sie die Schrift. Erst danach öffnen Sie das Projekt erneut und arbeiten Sie weiter. In Ordnung, zurück zum Projekt. Ich werde die Schrift finden. Jetzt setze ich meine Texteigenschaften zurück. Lassen Sie uns die Schriftgröße vorerst auf 100 setzen. Sie als Nächstes sicher, dass der Absatz zentriert ist, und richten Sie die Ebene dann an der Mitte der Komposition aus. Großartig. Jetzt können wir anfangen, die Szene zu animieren Aber vorher löschen wir den Punkt, den wir im Text haben In Animationsvideos ist es nicht üblich, Punkte in Textanimationsszenen zu verwenden. Fantastisch. Jetzt können wir zur Videotafel gehen und noch einmal überprüfen was in der Szene passieren muss Mein Ansatz für diese Animation den Text in mehrere Teile aufzuteilen und sie nacheinander zu animieren, ohne sich zunächst Gedanken über den zeitlichen Abstand zwischen ihnen Nachdem wir die Animation für jeden Teil erstellt haben, verschieben wir die Ebenen und Keyframes, um das Timing anzupassen Okay, gehen wir zurück zur Szene und bereiten sie für die Animation vor. In Ordnung. Das erste, was wir tun können, ist diese Ebene als Referenzebene zu verwenden , weil wir ein paar verschiedene Textanimationen benötigen . Und es ist eine gute Idee, zu sehen , wo jedes Wort platziert werden sollte. Wir können diese Ebene jetzt duplizieren und die Referenz sperren. Lassen Sie uns die Opazität hier wieder auf 100 bringen. Großartig. Da wir nun verschiedene Arten von Animationen für den Text erstellen müssen , beginnen wir damit, den Text für jeden Teil in einige separate Ebenen aufzuteilen für jeden Teil in einige separate Ebenen Um damit zu beginnen, duplizieren wir zunächst unsere Textebene Stellen wir nun sicher , dass wir auf dieser Ebene nur den ersten Teil des Textes sehen. Wählen wir den Text vom Wort Vielfaches bis zum Ende des Satzes aus und löschen diesen Teil. Sobald das erledigt ist, bevor wir den Text erneut teilen, bringen wir nun unseren ersten Textteil an die richtige Position In diesem Fall müssen wir diese Ebene nach links verschieben. In diesem Teil verwenden wir Textanimatoren, um diesen Text zu animieren Für den Rest des Textes werden wir fast jedes Wort einzeln animieren Wählen wir vor diesem Hintergrund diese Textebene aus und achten Sie darauf, den ersten Teil des Textes zu löschen, einschließlich des Wortes multiple Da wir dieses Wort später separat animieren werden. Okay. Jetzt können wir diese Textebene isolieren, um uns darauf zu konzentrieren. Lassen Sie uns nun diese Ebene duplizieren. Und stellen Sie dieses Mal sicher , dass wir auf dieser Ebene nur das Wort Projekte haben. Großartig. Und dann lassen Sie uns diese Ebene isolieren und sicherstellen, dass nur der Text hier ist, ist nicht einfach. Fantastisch. Lassen Sie uns nun alle Ebenen zurückbringen und die Position unserer neuen Textteile entsprechend der Referenzebene organisieren . Ordnung, an diesem Punkt können wir alle Ebenen auswählen und ihre Ankerpunkte zentrieren. Halten Sie dazu die Strg- oder Befehlstaste gedrückt und klicken Sie zweimal auf das AnchorPoint-Tool Großartig. Lassen Sie uns nun mit dem kompliziertesten Teil dieser Textanimation befassen, nämlich dem Wort Multiple. Lassen Sie uns diese Ebene auswählen, duplizieren, an der richtigen Stelle platzieren und den Text in mehrere ändern. Großartig. Und jetzt lassen Sie uns diese Ebene mit einer anderen Farbe kennzeichnen, damit wir die Ebenen leichter unterscheiden können . Lassen Sie uns nun zunächst mit dieser Animation beginnen , da sie der komplexere Teil dieser Szene ist. Um uns besser auf diese Ebene konzentrieren zu können, sollten wir sie isolieren und alle anderen Ebenen außer der Referenzebene ausblenden. Wir können sie auch isolieren , um eine klare Vorstellung davon zu haben , wo die endgültige Animation dieses Wortes enden soll. Okay. Jetzt müssen wir alle Zeichen dieses Wortes in separate Ebenen aufteilen . Dafür gibt es ein kostenpflichtiges Tool falls Sie diesen Vorgang etwas beschleunigen möchten. Ich werde einen Link dafür in der Beschreibung hinterlassen. Aber in meinem Fall mache ich solche Animationen nicht allzu oft. Also brauche ich dieses Tool nicht. Ich bin damit einverstanden, es manuell zu machen. Also lasst uns diese Ebene sieben Mal duplizieren. Insgesamt werden wir also acht Ebenen haben, jede Ebene für ein Zeichen dieses Wortes. wir nun sicher, dass jede Ebene nur ein Zeichen dieses Wortes enthält . Fantastisch. Und jetzt platzieren wir mit dem Auswahlwerkzeug alle Ebenen an der richtigen Position. Großartig. Wenn das erledigt ist, können wir mit der Animation der Ebenen beginnen Wählen wir zuerst alle aus und fahren dann mit der zweiten fort Wenn ich nicht weiß, wie lang die Animation sein soll, erstelle ich normalerweise eine Animation von 1 Sekunde. Danach passe ich bei Bedarf die Dauer und das Timing an. Okay, lassen Sie uns jetzt P drücken und einen Keyframe für die Positionseigenschaft für alle Ebenen zu diesem Zeitpunkt erstellen einen Keyframe für die Positionseigenschaft , da wir wissen, dass sie sich am Ende ihrer Animation hier befinden müssen Als Nächstes gehen wir 15 Frames früher und beginnen, die Ebenen nach dem Zufallsprinzip zu verteilen das erledigt ist, gehen wir zum Anfang der Animation und platzieren die Ebenen dort, wo sie beginnen sollen. In unserem Fall lassen wir sie von der Mitte aus hervorstechen. Bringen wir sie also alle ungefähr an den gleichen Ort. Fantastisch. Sobald wir mit der Positionsanimation fertig sind, fahren wir fort und animieren die Rotation Zunächst wissen wir, dass sie am Ende alle so aussehen sollten, wie sie gerade sind , und in der Mitte dieser Animation werden wir beginnen, jedes Zeichen nach dem Zufallsprinzip zu drehen Schließlich zu Beginn dieser Animation können wir zu Beginn dieser Animation die letzten Keyframes kopieren und hier einfügen. Okay, es wird langsam ein bisschen interessanter. Lassen Sie uns es jetzt noch interessanter machen , indem wir eine maßstabsgetreue Animation hinzufügen. Am Ende sollte die Skala so sein, wie sie gerade ist. in der Mitte der Animation Lassen Sie uns in der Mitte der Animation die Skala auf, sagen wir, 150 einstellen. Und da wir zu Beginn eine Popup-Animation erstellen möchten, setzen wir die Skala für alle Ebenen auf Null. Großartig. Und jetzt stellen wir sicher, dass keine Ebene ausgewählt ist, und drücken Sie auf Sie, um alle von uns erstellten Keyframes zu sehen und mit der Verbesserung der Bewegung zu beginnen Wählen wir sie zunächst aus und konvertieren alle Keyframes in Easy Ease-Keyframes Gehen wir dann zum Grafikeditor und stellen sicher, dass wir die Geschwindigkeitsgrafik verwenden Lassen Sie uns nun ein wenig heranzoomen, damit wir sehen können, was wir tun, und damit beginnen, die Geschwindigkeit der Animation anzupassen. Das ist die Anpassung der Geschwindigkeit. Ich möchte, dass die Animation schnell startet. Wählen wir also alle mittleren Keyframes und bewegen ihre Ziehpunkte nach links Jetzt möchte ich, dass die Ebenen ein wenig in der Luft schweben. Das heißt, ich möchte, dass die Animation in der Mitte etwas langsamer Verschieben wir diese Griffe also nach rechts. Jetzt wird die Bewegung hier langsamer sein. Großartig. Nachdem das erledigt ist, verlassen wir den Diagrammeditor und verbessern die Animation weiter. An dieser Stelle liebe ich es, eine leichte Verzögerung zwischen den Ebenen zu erzeugen. Es ist immer eine gute Idee , wenn Sie mehrere Ebenen haben , die so ziemlich die gleiche Animation machen. Okay, fangen wir also damit alle Ebenen nach der ersten auszuwählen und sie, sagen wir, um zwei Frames zu verschieben. Halten Sie nun den Controller-Befehl gedrückt, klicken Sie auf die zweite Ebene, deren Auswahl aufgehoben werden soll, und verschieben Sie diese 12 Frames Machen wir das für die restlichen Ebenen. Wie Sie sehen können, sieht es besser aus. Aber jetzt mache ich meine Aktionen rückgängig und zeige dir, wie du die Ebenen viel schneller verzögern kannst. Sie können dies auch tun, wenn Sie die aktuellste After Effects-Version verwenden . Aus diesem Grund verwende ich die Beta-Version. Als ich diesen Kurs aufgenommen habe, war diese Funktion nur in der Beta-Version verfügbar. Okay, um das zu tun, müssen wir zuerst die Ebenen aus der Ebene auswählen die Ebenen aus der Ebene mit der die Verzögerung beginnen soll. In unserem Fall ist die erste Ebene, die wir auswählen müssen, der Buchstabe M. Dann können wir die Umschalttaste gedrückt halten und die letzte Ebene auswählen. Halten Sie nun Strg Alt gedrückt oder befehlen Sie eine Option auf dem Mac. Und wie Sie sehen können, ändert sich der Cursor in das neue Symbol für die Verzögerungsfunktion Das heißt, wir können die Ebenen jetzt nach rechts ziehen und eine proportionale Verzögerung erzielen. Sie können die Ansicht vergrößern und die Zeitanzeige bei Bild eins platzieren und dann die Ebenen so ziehen, dass die zweite Ebene hier platziert wird. Auf diese Weise können Sie feststellen, dass die Verzögerung genau ein Frame beträgt. Natürlich können Sie jede Verzögerung vornehmen, die Sie möchten. Aber für diese Lektion sollten Sie sich an das halten, was ich tue. Ordnung, die Verzögerung sieht also ziemlich cool aus, und jetzt können wir die Animation noch weiter verbessern , indem wir zusätzliche Popup-Bewegungen hinzufügen. Um das zu tun, erstellen wir ein neues Null-Objekt. Bleiben wir jetzt irgendwo, nachdem die Animation beendet ist. Sie können sehen , wo sich das befindet, indem Sie das letzte Schlüsselbild der letzten Ebene überprüfen . In unserem Fall ist es irgendwo hier in der Nähe. Bringen Sie dann die Null in die Mitte des Wortes und wählen Sie danach alle Ebenen aus und ordnen Sie sie der Null zu. Mit dieser Null können wir nun allen Ebenen, die wir hier haben , eine Animation im sekundären Maßstab hinzufügen . Lassen Sie uns einen Keyframe mit dem aktuellen Wert am Anfang erstellen dem aktuellen Wert am Anfang Danach gehen wir zu Punkt in der Mitte der Animation und skalieren die Null auf, sagen wir, 120 Lassen Sie uns überprüfen, ob es nicht zu viel ist. Okay, es sieht gut aus. Gehen wir nun zu einem Zeitpunkt, an dem die Animation fast endet, und setzen wir die Skala auf 80. Und zum Schluss gehen wir ein paar Frames, nachdem die Animation vollständig fertig ist und bringen die Skala wieder auf 100. Dadurch entsteht eine coole Pop-Animation. Wir können jetzt ganz einfach die Keyframes verkleinern und sehen, wie das aussieht Im Moment schaue ich mir die Animation gerne ein paar Mal an und schaue, was ich anpassen kann. Meiner Meinung nach können wir den endgültigen Keyframe etwas früher platzieren, um eine schnellere Bewegung zu erzielen. Und wir können den ersten Keyframe auch so einstellen, dass er bei, sagen wir, Bild zehn beginnt sagen wir, Bild zehn Ja, ich denke, so sieht es viel besser aus. Toll. Jetzt können wir die nächsten Textteile der Szene weiter animieren die nächsten Textteile der Szene Bevor wir weitermachen, können wir die Null mit derselben Farbe kennzeichnen wie die verschiedenen Textebenen Weise wissen wir, dass all diese Ebenen zu demselben Textteil gehören . In Ordnung. Und jetzt animieren wir den ersten Teil des Textes. Es wird viel einfacher sein, weil wir ihn mit Textanimatoren animieren ihn mit Textanimatoren animieren Falls Sie nicht wissen, was das ist, empfehle ich Ihnen dringend, sich meinen Kurs, Text und Bewegung anzusehen, in dem ich die Welt der Textanimation in After Effects behandle. Ordnung. Lassen Sie uns zunächst die Texteigenschaften öffnen und einen neuen Animator hinzufügen Beginnen wir damit, die Positionseigenschaft zu unserem Textanimator hinzuzufügen die Positionseigenschaft zu unserem Textanimator Gehen wir nun zu unserem neu erstellten Animator und öffnen den Bereichswähler Wir können auch das Menü „Erweitert“ öffnen, das wir gleich verwenden werden Großartig. Lassen Sie uns jetzt mit der Einrichtung unseres Animators beginnen Hier ist die Positionseigenschaft wir gerade aus der Liste hinzugefügt Als erstes müssen wir den Wechselpunkt für diesen Animator einrichten den Wechselpunkt für diesen Animator In unserem Fall möchte ich, dass der Text von unten eingegeben wird. Daher wird mein Wechselpunkt irgendwo hier sein, wir können ihn auf 90 setzen. Als Nächstes stellen wir für die Form unseres Animators sicher, dass er hochgefahren wird, da die Animation von links nach rechts beginnen soll Danach lassen wir den Animator jedes Wort und nicht jedes Zeichen bewegen Damit haben wir die Einrichtung des Animators abgeschlossen. dieses Setup zu steuern, animieren wir nun die Offset-Eigenschaft Dadurch wird der Text vom Wechselpunkt unseres Animators zur ursprünglichen Form geändert. Des Textes Das heißt, wenn der Offset bei -100 liegt, wird der Text an den Änderungspunkt gebracht, den wir für die Positionseigenschaft unseres Animators festgelegt haben Und wenn der Wert bei 100 liegt, der Text seine ursprüngliche Form Okay. Stellen Sie jetzt sicher, dass Sie sich am Anfang der Animation befinden, und erstellen Sie einen Keyframe für den Offset bei -100 Gehen Sie als Nächstes zur zweiten und setzen Sie den Offset auf 100. Großartig. Und jetzt, wo wir Textanimatoren verwenden, ist es nicht einfach die Geschwindigkeit der Keyframes zu steuern Wir können das direkt von hier aus machen. Ein gutes Setup für eine nette Lockerung ist es, E's hoch auf 20 und Es niedrig auf 80 zu setzen es, E's hoch auf 20 und Es niedrig auf 80 zu Mal sehen, wie das aussieht. Sieht nett aus. Um diese Animation zu beenden, lassen Sie uns an dem Punkt stehen, an dem die Animation vollständig abgeschlossen ist und eine neue Maske für diese Ebene erstellen. Auf diese Weise sehen wir den Text am Anfang der Animation nicht . Falls wir am Anfang noch einige Teile des Textes sehen können , können wir den Wechselpunkt in unserem Animator ändern Wir müssen nur die Positionseigenschaft anpassen , die wir hier haben. Das sieht besser aus. Toll. Jetzt können wir mit dem nächsten Textteil in dieser Szene fortfahren. Wir können das Wort Projekt in demselben Animationsstil animieren , den wir für den ersten Teil verwendet haben Kopieren wir dazu einfach den Animator und fügen ihn in die entsprechende Textebene Wir können diese Ebene hier oben platzieren, um die chronologische Reihenfolge des Textes beizubehalten . In Ordnung. Und jetzt drücken wir einfach Strg+F, um den Animator einzufügen . Sieht nett aus. Bevor wir weitermachen, lassen Sie uns hier stehen , wo die Animation vollständig abgeschlossen ist, und auch für diese Ebene eine Maske erstellen, um das gleiche Intro wie den vorherigen Text zu erhalten . Fantastisch Nun wollen wir uns mit dem letzten Teil des Textes in der Szene befassen . Um es etwas interessanter zu machen, teilen wir diesen Text in zwei separate Ebenen auf, ein Wort auf jeder Ebene, und erstellen für beide eine coole Pop-Animation Dann können wir diese Ebenen verschieben und ein paar nette Ergebnisse erzielen Bevor wir sie animieren, zentrieren wir ihre Ankerpunkte. Ordnung. Und jetzt wählen wir beide aus und drücken S, um die Skalierungseigenschaft zu öffnen. Lassen Sie uns nun den ersten Keyframe für beide erstellen. Wenn die Skala auf Null gesetzt ist. Gehen wir als Nächstes zu Frame 15 und setzen die Skala auf 100. Und zum Schluss verschieben wir die letzten Keyframes auf Frame 20. Stellen wir uns nun bei Bild zehn in die Mitte und vergrößern sie ein wenig Stellen wir die Skala auf 120 ein. Großartig. Und jetzt lassen Sie uns die Keyframes vereinfachen und dann zum Diagrammeditor gehen und die Ziehpunkte so anpassen, dass die Animation schnell beginnt, in der Mitte langsamer wird und gegen Ende an Geschwindigkeit gewinnt Großartig. Und jetzt, nachdem Sie mit der Animation des Textes fertig sind, bevor Sie weitermachen, ist es eine gute Idee, mit dem Voiceover zu arbeiten und zu überprüfen, ob das Timing zur Erzählung passt Gehen wir zur Videotafel und kopieren die Voiceover-Ebene von dort aus. Zurück in der Szene Fügen wir es hier ein und sehen wir, was wir bisher haben. Wir können diese Ebene ausschalten, um die Bildunterschriften auszublenden. Wir müssen sie jetzt nicht sehen. Konzentrieren wir uns darauf, das Voiceover zu hören und die Animation anzusehen Verwaltung eines großen Teams über mehrere Mitglieder Verwaltung eines großen Teams über Ordnung. Nachdem ich es ein paar Mal gehört habe, sehe ich, dass das Wort mehrfach zu diesem Zeitpunkt beginnen sollte Wählen wir also alle Ebenen aus, die sich auf diesen Textanimationsteil beziehen diesen Textanimationsteil und verschieben wir sie so, dass sie von hier aus beginnen. An diesem Punkt höre ich die Stimme erneut und versuche, sie noch weiter anzupassen. Bin auf mehrere Projekte gestoßen. Ich habe mehrere Projekte durchquert. Soweit ich weiß, dauert unsere Animation dieses Teils zu lange. Lass uns das beschleunigen. Lassen Sie uns dazu alle Keyframes öffnen, die wir für diesen Textanimationsteil haben, und stellen Sie nun sicher, dass wir alle auswählen Verpassen Sie nicht die folgenden Keyframes falls Sie an einem kleinen Bildschirm arbeiten Okay. Nehmen wir nun an, die Animation beginnt bei 1 Sekunde und 15 Bildern und endet bei 2 Sekunden und 20 Bildern. Lassen Sie uns hier stehen und die Alt- oder Wahltaste auf dem Mac gedrückt halten und den letzten Keyframe, den wir haben , zu diesem Zeitpunkt ziehen den letzten Keyframe, den wir haben , zu diesem Zeitpunkt Bevor wir uns ansehen, was wir haben, wir sicherstellen, dass die Länge der Ebenen von Anfang an angepasst wird Das ist passiert, weil wir die Keyframes nach links gezogen und gleichzeitig die Dauer dieser Animation verkürzt Sehen wir es uns jetzt ein paar Mal an. Über mehrere Projekte hinweg. Überqueren Sie mehrere Projekte. Ordnung. Also, wenn das erledigt ist, wollen wir uns mit dem ersten Teil befassen. Ein großes Team insgesamt altern lassen. Soweit ich gehört habe, denke ich, dass wir diese Animation etwas verlangsamen können. Lassen Sie uns also das letzte Schlüsselbild unseres Textanimators auf 1 Sekunde und zehn Frames bringen unseres Textanimators auf 1 Sekunde und zehn Frames Verwaltung eines großen Teams aus mehreren. Das ist besser. Wir können den zweiten Teil noch früher beginnen. Großartig. Und jetzt wollen wir uns mit dem nächsten Wort befassen. Team über mehrere Projekte hinweg. Mehrere Projekte. Ich denke, wir können es mit 2 Sekunden und fünf Frames beginnen. Projekte. Vielleicht ein bisschen früher. Nun, Projekte SipLjects? Ist es. Das ist besser. Okay. Lassen Sie uns jetzt mit dem letzten Textteil umgehen und gleichzeitig sicherstellen , dass wir für die letzten beiden Wörter eine leichte Verzögerung einrichten. Jex ist nicht einfach. Ist nicht einfach ein großes Team über mehrere Projekte hinweg zu verwalten ist nicht einfach, ein großes Team über mehrere Projekte hinweg zu verwalten. Zu viele Texte. Ordnung. Ich hoffe, dass Sie während der Arbeit an der Szene eine Vorstellung davon bekommen, wie Sie Hauptszenen erstellen können, die auf Text basieren Wir animieren zuerst jeden Teil und passen dann das Timing entsprechend dem Voiceover an Diese schrittweise Methode wird Ihnen das Leben leichter machen , anstatt von Anfang an am Timing zu arbeiten In Ordnung, alles sieht gut aus. Und jetzt können wir die Voice-Over-Ebene löschen und mit der Arbeit am Übergang für die nächste Szene beginnen der Arbeit am Übergang für die nächste Szene In unserem Fall beginnt der Übergang mit dem Ausrufezeichen, das ein- und ausgeblendet werden muss, während das Hauptcursorobjekt, das wir im Projekt haben, sichtbar wird Ordnung. Lassen Sie uns also zuerst das Ausrufezeichen erstellen Stellen Sie sicher, dass Sie die richtige Schriftart für die Größe verwenden . Sie können sie bei 100 belassen Als Nächstes bringen wir es an die richtige Position und kennzeichnen diese Ebene mit einer anderen Farbe. Fangen wir jetzt an, es zu animieren. Zuallererst wissen wir, dass diese Ebene ungefähr zu diesem Zeitpunkt in die Szene eintreten sollte ungefähr zu diesem Zeitpunkt in die Szene , also verschieben wir sie hierher. Und jetzt animieren wir sie mithilfe der Skalierungs- und Rotationseigenschaften Erstellen Sie einen Keyframe für Skalierung und Drehung. Drücken Sie nun, um alle Keyframes zu sehen , und stellen Sie sicher, dass die Skalierung an dieser Stelle auf Null gesetzt ist Lassen Sie uns dann weitermachen und die Skala vorerst auf 100 setzen. Lassen Sie uns nun die Ebene um 180 Grad drehen , sodass sie auf den Kopf gestellt wird Als Nächstes skalieren wir in der Mitte der Animation die Ebene, um eine schöne Pop-up-Animation zu erhalten . Fantastisch Und schließlich, da wir einen Übergang von dieser Ebene zum Cursor erstellen müssen , können wir die letzte Skala, den Keyframe, auf Null setzen , damit er verschwindet Dann starten wir die Kugelanimation direkt von hier aus. Lassen Sie uns zunächst die Rotations-Keyframes vereinfachen und sicherstellen, dass die Bewegung langsam beginnt und gegen Ende an Geschwindigkeit gewinnt Danach können wir für die Skalierungs-Keyframes festlegen, dass die Animation schnell beginnt, in der Mitte langsamer wird und am Ende wieder beschleunigt wird Ich finde, es sieht toll aus. Jetzt sind wir bereit, am letzten Teil der Szene zu arbeiten, dem die Kugelanimation erstellt wird. Diese Kugel wird während des gesamten Projekts unser Cursor sein. Wählen wir also zuerst das Formwerkzeug aus. Stellen Sie sicher, dass keine Ebene ausgewählt ist, und erstellen Sie dann eine proportionale Kugel, während Sie die Umschalttaste gedrückt halten. Lassen Sie uns die Größe auf 60 setzen. Und jetzt, bevor ich weitermache, möchte ich dir einen kleinen Tipp geben. Wenn Sie ein Projekt haben , das eine Art Cursor- oder Kugelanimation als Hauptobjekt enthält , empfehle ich dringend, dass Sie es unterkomponieren und in einer Vorkomposition behalten Der Grund dafür ist, dass es viel einfacher ist, das Design dieses Objekts anzupassen oder bei Bedarf eine einzigartige Animation dafür zu erstellen, wenn es sich innerhalb der Precomp viel einfacher ist, das Design dieses Objekts anzupassen oder bei Bedarf eine einzigartige Animation dafür zu erstellen, wenn es sich innerhalb der oder bei Bedarf eine einzigartige Animation dafür zu erstellen Es wird auch viel einfacher sein, falls Sie weitere Ebenen hinzufügen möchten, die zu einem bestimmten Look passen Sie werden das im Kurs besser verstehen, da wir genau das tun werden. Wir werden unsere animierte Hintergrundebene verwenden, unsere animierte Hintergrundebene verwenden um dieses Objekt einzufärben. Lassen Sie uns zunächst zur Szene zurückkehren und mit der Animation dieser Ebene beginnen Lassen Sie uns es zunächst von hier aus starten. Jetzt platzieren wir es an der richtigen Stelle in der Szene. Wir müssen es an derselben Stelle positionieren. Wir können diesen Pre-Comp bereits zusammenbrechen , um ihn in voller Qualität zu erhalten Später werden wir ausführlich über die Collapse-Funktion sprechen. Aber jetzt animieren wir diese Ebene. Wir können es ein bisschen nach der Ausrufezeichen-Animation starten . Wenn das Ausrufezeichen verschwindet, können wir die Skala verwenden, um eine 1 Sekunde lange Pop-Out-Animation zu erstellen eine 1 Sekunde Lassen Sie uns nun die Eigenschaft Position öffnen und eine nette Pop-Animation erstellen Der Fokus des Betrachters richtet sich also auf diesen Teil, bevor er zur nächsten Szene übergeht diesen Teil, bevor er zur nächsten Szene übergeht Wir können diese Ebene hochspringen lassen , bevor sie am Ende herunterfällt Großartig. Stellen wir nun sicher, dass die Skalierungsanimation schnell ausgeführt wird da wir möchten, dass sie kurz vor dem Verschwinden des Ausrufezeichens angezeigt vor dem Verschwinden des Ausrufezeichens Und jetzt konzentrieren wir uns darauf, die Position der Keyframes zu vereinfachen. Ich zeige Ihnen diesen Prozess, anstatt Ihnen die endgültigen Geschwindigkeitseinstellungen mitzuteilen die endgültigen Geschwindigkeitseinstellungen da dies der realistische Arbeitsablauf ist Manchmal wissen wir nicht, welche Lockerung zur Animation passt, also passen wir sie im Laufe der Zeit an und versuchen zu verstehen, was am besten aussieht Okay, jetzt denke ich, dass wir die Kugel verschieben müssen. Wenn Sie bereits Positions-Keyframes auf Ihrer Ebene haben, vergessen Sie nicht, zuerst auf einem der Keyframes zu stehen Erst dann, während alle Positions-Keyframes ausgewählt sind, können Sie die Kugel an die gewünschte Position verschieben Es sind sehr einfache Dinge, aber ich möchte sichergehen, dass du während des Kurses keine unnötigen Fehler machst Alles klar? Ich finde die Position gut, aber ich finde, dass die Skalenanimation etwas schneller beginnen muss Mal sehen, wie das aussieht. Das ist besser. Aber der letzte Teil fühlt sich immer noch etwas zu langsam an. Wie Sie sich vielleicht erinnern, laut Storyboard und Voiceover sollte diese Szene laut Storyboard und Voiceover in Sekunde vier enden, und im Moment sind wir fast in der Lassen Sie uns also die Keyframes mit dem Ausrufezeichen öffnen und Lassen Sie uns dafür sorgen, dass es 20 Frames lang hält. Machen wir dasselbe für die Cursoranimation und passen dann das Timing an. Das Timing sieht okay aus, aber ich denke, wir können die Kugel etwas höher schieben , bevor sie herunterfällt. An diesem Punkt schaue ich mir die Animation normalerweise ein paar Mal an und nehme letzte Anpassungen vor, achte aber darauf, dass ich nicht zu lange an einem Teil hängen bleibe. Unser Ziel ist es, zunächst sicherzustellen, dass die Animation gut aussieht und zum Voiceover passt Wir wollen zu den nächsten Szenen übergehen und sie alle fertigstellen. Nachdem wir alles fertig haben, können wir uns die Zeit nehmen, um den letzten Schliff zu verfeinern. Okay, sobald ich mit der Animation zufrieden bin und weiß, dass sie laut Storyboard und Drehbuch die richtige Dauer hat, können wir die unnötige Dauer dieser Im Moment beträgt die Dauer 2 Minuten, aber die Szene endet tatsächlich in der fünften Sekunde Normalerweise halte ich mir gerne eine zusätzliche Sekunde Zeit, bevor ich die Komposition zuschneide Bleiben wir also bei Sekunde sechs und kürzen den Arbeitsbereich bis zu diesem Punkt Großartig. Gehen wir jetzt zurück zur Master-Komposition und bringen die erste Szene in die Timeline In diesem Stadium müssen wir dieser Vorkomposition zusätzliche Animationen hinzufügen , damit sie dem entspricht, was in der Szene passiert Ich bevorzuge es, das so zu machen , weil ich die Ebenen innerhalb der Precomp nicht in drei D umwandeln und sie dann mit einer Kamera animieren möchte die Ebenen innerhalb der Precomp nicht in drei D umwandeln und sie dann mit einer Kamera animieren können wir das tun, und das werden wir einigen Szenen können wir das tun, und das werden wir auch tun, aber in vielen Fällen können wir großartige Bewegungen im Design erzeugen, ohne drei D. Das liegt daran, dass drei D-Szenen viel langsamer gerendert werden drei D. Das liegt daran, dass drei als zwei D-Szenen, und wenn möglich, wenn möglich, wird unser Arbeitsablauf beschleunigt Ordnung. In diesem Sinne sollten wir weiterarbeiten Zuerst müssen wir diese Vorkomposition links ausrichten, damit wir mit dem Anfang des darin enthaltenen Textes beginnen können Wenn wir eine seitliche Schwenkbewegung erzeugen müssen, verwenden wir natürlich die Eigenschaft Position, um sie zu animieren Normalerweise ordne ich den Anfang der Positionsanimation dem Anfang der Szenenanimation zu, gehe dann zu dem Punkt , an dem die Szenenanimation endet, und schiebe die Komposition auf die andere Seite In diesem Fall müssen wir es nach rechts ausrichten. Das gibt uns einen soliden Ausgangspunkt. Danach können wir die Keyframes einfach verkleinern und eine Vorschau anzeigen Im Moment passt die Animation nicht perfekt zu dem, was in der Szene passiert Um dieses Problem zu beheben, können wir an der Geschwindigkeit der Positionsanimation arbeiten der Geschwindigkeit der Positionsanimation und anpassen, wann sie beschleunigt wird. Unser Hauptziel ist es, den Punkt zu erreichen, an dem das Wort Multiple erscheint. Das passiert in diesem Moment. Also werden wir die Griffe des Graphen so anpassen, dass die Bewegung im richtigen Moment beschleunigt wird, damit das Wort genau dann sichtbar wird, wenn es benötigt wird. Im Moment sieht es gut Aber mir ist aufgefallen, dass die Ausrufezeichen in der Kugel zu spät beginnen. Gehen wir zurück in die Szene und verschieben diesen Teil etwas früher Ich sehe mir das Wort einfach an und versuche den Moment zu finden, in dem die Animation fast fertig ist. Das fühlt sich nach dem perfekten Zeitpunkt , um mit dem letzten Teil zu beginnen. Gehen wir jetzt zurück zum Master-Comp und sehen wir uns an, wie das jetzt aussieht . Das sieht jetzt besser aus Toll. Als Nächstes können wir diese Animation interessanter gestalten, indem wir eine Skalenanimation hinzufügen , wenn das Wort Multiple auftaucht Es passiert irgendwo zwischen der ersten und zweiten Sekunde. Lassen Sie uns also hier den ersten Keyframe erstellen, dann zum Ende der Pop-Out-Animation gehen und zu diesem Zeitpunkt einen weiteren Keyframe hinzufügen nun, in der Mitte Lassen Sie uns nun, in der Mitte dieser Animation, den Maßstab anpassen Versuchen wir zunächst, den Pre-Comp auf 80 herunterzuskalieren. Passen wir nun die Geschwindigkeit so an, dass sie schnell startet, langsamer wird und gegen Ende wieder an Geschwindigkeit gewinnt Mal sehen, wie das aussieht. Es ist nett, aber ich denke, es wird noch besser aussehen , wenn wir nach oben statt nach unten skalieren. Aufgrund dieser Skalierung müssen wir die Szene im selben Moment auch ein wenig nach links Wie Sie vielleicht bemerkt haben, entsteht dadurch ein neuer Keyframe. Mal sehen, wie es jetzt spielt. Zu diesem Zeitpunkt möchte ich, dass die Position etwas langsamer wird. Wählen wir dazu alle Keyframes aus und drücken Sie F 9, um die Standardeinstellung Easy Ease anzuwenden Das gibt uns genau an dieser Stelle eine kurze Bewegungspause genau an dieser Stelle eine kurze Bewegungspause Jetzt können wir den Diagrammeditor öffnen und die Geschwindigkeit zu Beginn der Positionsanimation fein einstellen Beginn der Positionsanimation , um eine etwas interessantere Bewegung hinzuzufügen. Ich zeige Ihnen noch einmal den Rohprozess der Erzeugung guter Bewegungen. Denken Sie nicht, dass professionelle Motion-Designer beim ersten Versuch eine perfekte Animation erstellen. Das ist nicht wahr. Wir alle fügen Keyframes hinzu, passen sie an und experimentieren, bis wir etwas gefunden haben , das sich richtig anfühlt Das ist der natürliche und gesunde Animationsprozess. In Ordnung, alles sieht toll aus. Zum Abschluss denke ich, dass wir die Positionsanimation etwas früher beenden können , da wir den letzten Teil bereits vor ein paar Minuten nach vorne verschoben letzten Teil bereits vor ein paar Minuten nach vorne Lassen Sie uns den letzten Keyframe auf den vierten Platz bringen und ihn überprüfen Okay, das sieht perfekt aus. Bevor wir mit der Animation der nächsten Szene fortfahren, reduzieren wir diese Vorkomposition, um sicherzustellen, dass sie die Animation, die wir gerade erstellt haben, nicht beeinträchtigt die Animation, die wir gerade erstellt Daran ändert sich nichts , da wir nur einfache zwei D-Ebenen ohne Effekte oder drei D-Kameras verwenden einfache zwei D-Ebenen ohne Effekte oder drei D-Kameras Aber später im Kurs werden wir auf Szenen stoßen, in denen das Zusammenklappen der Vorkomposition einen Unterschied macht, und darauf werden wir in diesen Lektionen näher eingehen Damit haben wir diese Lektion beendet. Wir sind jetzt bereit, mit der nächsten Szene fortzufahren , wo wir mit der Arbeit an der nächsten Szene beginnen werden. Es wird super viel Spaß machen, also sehen wir uns dort. 12. Erstellen von Szene 2 – Hüpfkugelanimation: Komm zurück. In dieser Lektion werden wir die zweite Szene erstellen. Gehen wir also zur Videotafel und schauen uns an, was genau passieren muss und wie lange diese Szene dauern sollte. Denken Sie daran, dass wir keine Szene erstellen möchten , die zu kurz oder zu lang ist. Das wird auf lange Sicht zu Problemen führen, da wir die Keyframes und das Timing anpassen müssen , falls wir es nicht richtig hinbekommen Ordnung? In dieser Szene müssen wir also viele Botschaften und Aufgaben präsentieren Und um diese Szene interessant zu machen, müssen wir eine coole, hüpfende Kugelanimation erstellen Ich möchte, dass du weißt, wie lang die Szene sein sollte Um sie zu berechnen, müssen wir sehen, in welcher Sekunde die Szene beginnt. In unserem Fall sind es ungefähr die zweiten vier und fünfzehn Frames. Jetzt müssen wir in unserer Videotafel sehen, wo die Szene endet. Es ist ungefähr Sekunde sieben. Das bedeutet, dass die Dauer der Szene, die wir animieren müssen, ungefähr 3 Sekunden dauern sollte Ich habe nur berechnet, wie viele Sekunden es von Sekunde vier bis Sekunde sieben gibt, es sind 3 Sekunden. Diese Szene sollte also 3 Sekunden dauern. Da wir eine sehr präzise Videotafel haben , die perfekt zum Voiceover passt, müssen wir nicht einmal das Voiceover hören und zählen, wie lang die Szene sein sollte Lassen Sie uns vor diesem Hintergrund mit der Erstellung der Szene beginnen. Zuerst müssen wir eine neue Komposition erstellen. Nennen wir es Szene zwei. Stellen Sie sicher, dass Sie die Abmessungen anpassen, und stellen Sie danach sicher, dass es 30 Bilder pro Sekunde und die Dauer 2 Minuten beträgt. Sobald wir die Animation beendet haben, werden wir natürlich die Dauer anpassen. Großartig. Jetzt müssen wir also zuerst die Szene entwerfen und diese Nachrichtenblasen und Aufgabenfelder erstellen. Natürlich könnten wir alles in Illustrator vorbereiten und es zusammen mit den restlichen Designs importieren Aber in meinen Kursen versuche ich immer, Ihnen beizubringen, wie Sie Szenen direkt in After Effects entwerfen Für mich ist es viel einfacher, Szenen und After Effects zu entwerfen, und das spart mir viel Zeit. Außerdem habe ich auf diese Weise viel mehr Flexibilität und kann alle Anpassungen und Anpassungen in Echtzeit vornehmen, ohne mich mit externen Dateien herumschlagen zu Lassen Sie uns nun mit dem Entwerfen der ersten Nachrichtenblase beginnen und lassen Sie mich Ihnen zeigen, wie das ganz schnell geht Zuerst benötigen wir etwas Text als Nachricht. Falls du nicht weißt, was du schreiben sollst oder der Kunde es dir nicht gesagt hat, kannst du zu GPT gehen und es bitten, ein paar Nachrichten zu schreiben. Das ist genau das, was ich getan habe Ich habe erklärt, woran ich gerade arbeite und sie gebeten, die Nachrichten für mich zu generieren. Ich habe diesen Text als PDF-Datei gespeichert , die Sie in meinem Assets-Ordner finden. Es heißt Random Messages. In Ordnung, also lass uns das PDF öffnen und diese Nachricht kopieren. Zurück zu After Effects, fügen wir es ein. Passen wir nun den Textil und die Größe an. Stellen Sie sicher, dass der Absatz zentriert ist, und richten Sie diese Ebene schließlich an der Mitte der Komposition aus. Großartig Und jetzt erstellen wir die Nachrichtenblase so, dass sich die Größe der Nachrichtenblase automatisch an unseren Text anpasst. Suchen wir nach dem Two-D-Textbox-Effekt. Um ihn jetzt zu verwenden, müssen wir darauf doppelklicken. Wenn die Ebene jedoch ausgewählt ist, funktioniert sie nicht. Stellen Sie also sicher, dass keine Ebene ausgewählt ist und doppelklicken Sie erst dann auf den Effekt. Okay. Und jetzt müssen wir sicherstellen, dass die Box unsere Textebene als Quelle verwendet. Lassen Sie uns das Feld unter die Textebene verschieben. Und jetzt können wir das Design der Box ändern. Um dies schnell zu tun, können Sie die Alt- oder Wahltaste gedrückt halten und einige Male auf den Strich klicken bis Sie zur Option Kein Strich gelangen. Lassen Sie uns nun die Füllung weiß machen. Lassen Sie uns die Textfarbe auf Schwarz ändern. Und jetzt, wie Sie sehen, können wir mehr Text hinzufügen, und das Textfeld wird entsprechend angepasst. In Ordnung. Und jetzt lassen Sie uns das Textfeld so gestalten, dass es wie eine Nachrichtenblase aussieht. Wir können den Abstand auf 70 setzen. Als nächstes können wir die Ecken abrunden. Stellen wir es auf 120 ein. Großartig. Da wir nun wissen, dass wir mehr von diesen Blasen in der Szene benötigen werden, ist es eine gute Idee, diese Ebenen vorab zusammenzusetzen Nennen wir zwei Botschaft eins. Nummer zwei steht für die Nummer der Szene, in der diese Nachricht erscheint. Großartig. Bevor wir also weitermachen und diese Komposition duplizieren, geben wir sie ein und passen die Wir brauchen nicht, dass diese Komposition so groß ist. Stellen Sie sicher, dass die Vorschau aktiviert ist , und passen Sie die Breite und Höhe Großartig. Das ist perfekt. Gehen wir nun zum Projektfenster und duplizieren diese Vorkomposition, damit wir Änderungen innerhalb des Duplikats vornehmen können , ohne das erste zu beeinflussen Lassen Sie uns das PDF öffnen und eine weitere Nachricht kopieren. Ich werde mich für diesen entscheiden. Falls sich Ihr Text zu stark nach rechts bewegt hat, bedeutet das, dass Ihr Textabsatz nicht mittig ausgerichtet war. Ordnung. Gehen wir jetzt zurück zur Szene und bringen den neuen Pre-Comp her. Fantastisch. Wir können es vorerst so lassen, wie es ist. Lassen Sie uns nun mit der Gestaltung der Aufgabenbox beginnen , die wir auf der Videotafel sehen können. In meinem Fall werde ich auch eine Nachricht zusammen mit dem Checkbox-Symbol hinzufügen . Und um das schnell zu machen, können wir das letzte Nachrichtenfeld, das wir erstellt haben, duplizieren und das Design darin anpassen. Lassen Sie uns den Namen in Aufgabe eins ändern. Großartig. Geben wir nun die Vorkomposition ein und passen den Text und das Design Für die Aufgaben verwende ich GPT auch, um zufällige Aufgaben zu generieren , die für mein Projekt relevant sein können Gehen Sie jetzt zu meinem Assets-Ordner und öffnen Sie eine PDF-Datei mit dem Namen Random Tasks. Lass uns diesen kopieren. Zurück in After Effects ersetzen wir den aktuellen Text durch den Aufgabentext. Großartig. Und jetzt passen wir das Design der Textbox Wir können die Rundheit auf, sagen wir, 35 senken. Und wir können diesem Design auch einen grauen Strich hinzufügen, damit es sich von der Nachrichtenblase unterscheidet Und jetzt müssen wir das Auffüllmenü öffnen und sicherstellen, dass auf der linken Seite etwas Platz ist, um das Checkbox-Symbol hinzuzufügen Wir müssen den Raum hier vergrößern. Lassen Sie uns die Breite dieser Komposition ein wenig skalieren. Großartig. Lassen Sie uns jetzt den Abstand links auf 70 setzen Sieht toll aus. Als Nächstes verwenden wir eines der Checkbox-Symbole, die wir in unseren Bildschirmdesigns haben. Ich glaube, es war auf dem Aufgabenbildschirm. Geben wir es also ein und kopieren das grüne Kontrollkästchen und den grauen Strich des Kontrollkästchens, da wir beim Erstellen der springenden Animation möglicherweise eine Checkbox-Animation hinzufügen, sobald landet der Cursor auf dieser Nachricht Lassen Sie uns mit der Ebene mit den grauen Strichen beginnen, sie kopieren und dann zu unserer Aufgabe Precomp gehen und sie hier einfügen Richten Sie es vertikal an der Mitte der Komposition aus und platzieren Sie es auf der linken Seite der Box Passen wir die Skala an das Design an. 350 sieht gut aus. Lassen Sie uns diese Ebene zusammenklappen, um eine hohe Qualität zu erzielen. Ich verschiebe es ein bisschen nach links. Okay. Sieht gut aus. Bringen wir jetzt das grüne Checkbox-Symbol mit. Ordnung. Das sieht perfekt aus. Lassen Sie uns jetzt eine weitere Aufgabe Precomp erstellen. Lassen Sie uns dazu diese Vorkomposition im Projektfenster duplizieren diese Vorkomposition im Geben Sie nun den neuen Precomp ein und ändern Sie die Aufgabe. Lass uns diesen kopieren Großartig. Als Nächstes passen wir die Position der Symbole an. Damit er sich von den Nachrichtenentwürfen unterscheidet, lassen Sie uns den Text hier fett formatieren. Machen wir dasselbe für die erste Aufgabe. Wir können die Position der Symbole ein wenig anpassen. Okay, als Nächstes denke ich, dass es besser wenn wir den Strich schwarz färben. Ja, das sieht besser aus. Machen wir dasselbe auch für die erste Aufgabe. Ordnung. Wenn das erledigt ist, können wir all diese Precomps schließen und zurück zum Scene Comp gehen Lassen Sie uns die beiden Aufgabenvorkompositionen hierher bringen und einen geeigneten Maßstab und Platz für all die Elemente finden , die Wir können die Precomps zunächst ein wenig herunterskalieren. Lassen Sie uns die Skala vorerst auf 60 einstellen. Wir können diese Vorkompositionen bereits zusammenbrechen. Und jetzt lasst uns eine schöne Position für die Nachrichten und die Aufgaben finden eine schöne Position für , die wir hier haben An dieser Stelle versuche ich nur, eine visuell ausgewogene Komposition zu finden . Also verwende ich das Safe Action Grid , um sicherzustellen, dass alles perfekt ausgewogen ist. Ich denke, wir können die Precomps noch weiter reduzieren. Versuchen wir es Ich versuche, die Elemente so zu platzieren, dass ich genug Platz habe, um die Animation der Hüpfkugel hinzuzufügen , die am Ende zwischen den Elementen hin- und herbewegt werden muss Ordnung. Ich glaube, ich bin gut mit der Komposition. Ich drücke die Apostroph-Taste, um das Grid auszuschalten. Und jetzt bringen wir das Cursor-Objekt Precomp in die Szene und beginnen, es zu In Ordnung. Also zuerst können wir diesen Precomp schon zusammenbrechen Und wenn Sie das Gefühl haben, dass Ihr Computer Probleme hat, können Sie die Vorschauqualität verringern Das passiert aufgrund der zusammengeklappten Nachrichten - und Aufgabenvorkompositionen Es ist schwierig für After Effects komplexe, auf Ausdrücken basierende Präkompositionen darzustellen, wie die Textfelder, die wir in diesen vier Precoms haben, falls Sie es nicht bemerkt haben. Der 2-D-Box-Effekt, mit dem wir uns automatisch an den Text anpassen, ist mit komplexen Ausdrücken im in diesen vier Precoms haben, falls Sie es nicht bemerkt haben. Der 2-D-Box-Effekt, mit dem wir uns automatisch an den Text anpassen, ist Backend eingerichtet Das ist einer der Gründe, warum ich sage, dass das Hinzufügen zu vieler Ausdrücke zum Projekt manchmal Ihren Arbeitsablauf wirklich verlangsamen kann In Ordnung, zurück zum Projekt. Lass uns die Animation des Cursors von irgendwo hier aus starten Cursors von irgendwo hier aus Drücken Sie nun P und erstellen Sie den Keyframe für die erste Position am Anfang der Timeline Nun, ich weiß nicht, wie viel Zeit ganze Animation braucht Lassen Sie uns also wie immer alle 1 Sekunde die Keyframes einstellen . Später werden wir es anpassen. Ordnung? Bringen Sie jetzt den Cursor hierher, sodass er die Aufgabe Precomp berührt Um zu sehen, was wir besser machen, können wir die standardmäßige Precomp-Hintergrundfarbe in eine graue Farbe einfärben Okay, jetzt gehen wir eine Sekunde weiter und bringen den Cursor hierher. Gehen Sie als Nächstes 1 Sekunde vorwärts und platzieren Sie ihn so, dass er die erste Nachricht vor der Erstellung berührt. Lassen Sie uns diesen Vorgang nun so lange fortsetzen, bis wir den Cursor aus der Szene entfernt haben Großartig. Das nächste, was ich beim Erstellen von Sprunganimationen gerne mache ist, den Positionspfad an den Punkten zu krümmen , an denen das Objekt in der Luft schweben muss Sie also mit dem Werkzeug zum Konvertieren von Scheitelpunkten einmal auf jeden Punkt, Klicken Sie also mit dem Werkzeug zum Konvertieren von Scheitelpunkten einmal auf jeden Punkt, den wir auf diesem Pfad haben Großartig. Gehen wir nun zurück zum Auswahlwerkzeug und passen die Griffe der Punkte , um eine viel bessere Kurve zu erhalten. Wir können auch hier eine Kurve aktivieren und den Griff anpassen , um einen geraden Pfad zu erhalten. Toll, mal sehen, was wir haben. Im Moment sieht es komisch aus, aber das ist okay. Mal sehen, was wir tun müssen, damit es besser läuft. Lassen Sie uns zunächst einfach alle Keyframes vereinfachen und sehen, wie das aussieht Wie Sie sehen können, haben wir jetzt einige Pausen zwischen den Keyframes Das ist besser, aber wir haben noch einiges zu tun, um diese Hüpfbewegung wirklich zu machen Dafür müssen wir zur Geschwindigkeitskurve gehen und zuerst sicherstellen, dass die Punkte, an denen der Cursor die Vorkompositionen berührt, sehr schnell passieren Das heißt, wir müssen diesen Griff nach rechts bewegen. Mal sehen, wie das aussieht. Sieht besser aus, aber jetzt wollen wir auch, dass der Cursor superschnell zurückspringt Das heißt, wir müssen auch die eingehende Animation des zweiten Keyframes superschnell starten des zweiten Keyframes superschnell Und jetzt, wie Sie sehen können, haben wir diese Hüpfbewegung. Aber wie Sie vielleicht bemerkt haben, haben wir immer noch einige seltsame Pausen, wenn der Cursor in der Luft schwebt Mach dir darüber keine Sorgen. Wir werden uns in einer Sekunde darum kümmern. Lassen Sie uns vorerst weiterhin dafür sorgen, dass alle Berührungspunkte schwanken, indem wir die Griffe anpassen Okay, das sieht nett aus. Beschäftigen wir uns jetzt mit den Pausenmomenten. Zunächst müssen Sie verstehen, dass es passiert, denn zu diesem Zeitpunkt ist die Geschwindigkeit Null, wie Sie in dem kleinen gelben Feld sehen können. Zu diesem Zeitpunkt beträgt die Geschwindigkeit der Bewegung 81. Hier ist es 223. Hier sind es über 1.000. Du verstehst die Idee. Jetzt müssen wir sicherstellen, dass der Antrag zu diesem Zeitpunkt nicht Null ist. Um das zu tun, können wir den ausgehenden Antrag nach oben bringen, und wir müssen den eingehenden Antrag exakt mit derselben Geschwindigkeit abgleichen. Aber es gibt eine Möglichkeit, beide gleichzeitig zu kontrollieren. Dazu müssen wir zuerst beide auswählen und dann Shift K oder Command Shift K auf dem Mac drücken. Auf diese Weise öffnen wir das Keyframe-Velocity-Panel. Wir können dieses Panel auch außerhalb des Diagrammeditors öffnen. Wählen Sie dazu den Keyframe aus, halten Sie die Alt- oder Wahltaste auf dem Mac gedrückt und doppelklicken Sie darauf Oder Sie können mit der rechten Maustaste klicken und Keyframe Velocity auswählen. Ordnung. Gehen wir jetzt zurück zum Grafikeditor Und sobald der entsprechende Keyframe ausgewählt ist, drücken Sie Strg Shift K oder Command Shift K auf dem Mac Und jetzt müssen wir nur noch die kontinuierliche Option aktivieren Dadurch werden die eingehende und die ausgehende Bewegung für diesen Keyframe miteinander verbunden , sodass wir nun sowohl die eingehende als auch die ausgehende Bewegung gleichzeitig steuern können sowohl die eingehende als auch die ausgehende Bewegung gleichzeitig steuern Ich schlage vor, die Geschwindigkeit nicht durch Ziehen des Griffs anzupassen , sondern indem Sie ihn direkt bewegen , indem Sie auf den Punkt wie diesen klicken Jetzt können Sie also Ihre Animation überprüfen und die Geschwindigkeit entsprechend anpassen Das sieht besser aus. Machen wir jetzt dasselbe für den zweiten Teil, in dem der Cursor in der Luft schwebt der Luft In Ordnung. Ich finde, es sieht toll aus. Lassen Sie uns jetzt den Diagrammeditor verlassen und die gesamte Animation beschleunigen. Lass uns dafür sorgen, dass es 3 Sekunden und 15 Frames dauert. Wählen Sie dazu alle Keyframes aus, halten Sie die Alt- oder Wahltaste gedrückt und ziehen Sie den letzten an die Position der Zeitanzeige . Mal sehen, wie das aussieht Lassen Sie uns nun weitermachen und die Szene etwas interessanter aussehen lassen, indem Cursor darauf springt, eine Mikroanimation Nachrichten- und Aufgabenvorkompositionen, wenn der Cursor darauf springt Lassen Sie uns das Timing vorerst ignorieren und zuerst die Mikroanimation erstellen Dazu verwenden wir die Positions- und Rotationseigenschaften. Lassen Sie uns zunächst mit der Position beginnen. Lassen Sie uns dafür sorgen, dass diese Animation zehn Frames lang dauert. In der Mitte reduzieren Sie den Precomp ein wenig. Mal sehen, wie das aussieht. Okay, jetzt fügen wir eine leichte Rotationsanimation hinzu. Lassen Sie uns die Keyframes einfach vereinfachen und die Bewegung überprüfen . Sieht cool aus Lassen Sie uns nun den perfekten Zeitpunkt für den Start dieser Mikrobewegung finden. Es sollte genau sein, wenn der Cursor auf dieser Precom landet. Das sieht toll aus. Machen wir jetzt dasselbe für die Aufgabe Precom Diesmal drehen wir es in die entgegengesetzte Richtung. Lassen Sie uns diese Animation nun mit dem Cursor timen. Großartig. Und bevor wir weitermachen, markieren wir den Cursor gelb. Und lassen Sie uns dasselbe auch in der ersten Szene tun. Ordnung. haben wir die Hauptanimation abgeschlossen , die in dieser Szene passieren muss Im Moment werde ich nicht weiter an dieser Komposition herumspielen , was das Design angeht oder zusätzliche Elemente in die Szene bringen Wie ich bereits erklärt habe, werden wir uns später mit dem letzten Schliff befassen Moment gibt es Wichtigeres zu tun, zum Beispiel zu überprüfen, ob es zum Voice-Over-Timing passt. Um das zu überprüfen, verkürzen wir zunächst die Dauer dieser Szene. Wir können es in Sekunde vier beenden. Gehen wir nun zurück zur Master-Komposition und arbeiten am Übergang von der ersten Szene zur zweiten Szene, die wir gerade animiert haben Mein Ziel hier ist es, einen schönen Match-Cut-Übergang zu erreichen. Dazu müssen wir zuerst den Zeitpunkt finden, an dem der Cursor in der ersten Szene den Bildschirm verlassen will , und dann sofort die zweite Szene starten. Hier ist der Zeitpunkt, an dem wir die erste Szene beenden können. Lassen Sie uns nun die zweite Szene von hier aus starten und die erste Szene abschließend so zuschneiden , dass sie genau zu diesem Zeitpunkt endet. Schauen wir uns diesen Teil nun ein paar Mal an, um zu sehen, ob er sich richtig anfühlt. Wir müssen sicherstellen, dass sich beide Comps nicht überlappen Ich finde, es sieht toll aus, aber ich habe ein Problem damit, dass der Cursor in der zweiten Szene nach dem ersten Sprung zu langsam in der Luft schwebt nach dem ersten Sprung zu langsam in der Luft Gehen wir also in die Szene und passen die Bewegungsgeschwindigkeit zu diesem Zeitpunkt an Großartig. Das sieht jetzt viel besser aus. Damit haben wir die Lektion beendet und sind bereit, mit der nächsten fortzufahren, wo wir mit der Erstellung der nächsten Szene und vielem mehr beginnen werden . Es wird Spaß machen . Also wir sehen uns dort. Und bevor wir uns die nächste Lektion ansehen, vergessen Sie nicht, eine zehnminütige Pause einzulegen, um sich zu erfrischen, bevor wir weitermachen. Wir sehen uns in der nächsten. 13. Gebäudeszene 3 – Animation der Suchleiste: Komm zurück. Beginnen wir diese Lektion mit der Arbeit an der nächsten Szene. Das Erste, was wir vorher tun müssen , ist, auf der Videotafel zu überprüfen, was wir in der Szene erstellen müssen und wie sie gestaltet und animiert werden soll. Außerdem müssen wir natürlich überprüfen, wie lang die Szene sein sollte. Wie Sie sehen können, sollte sie etwa in der siebten Sekunde beginnen und etwa in der 11. Sekunde enden. Das bedeutet, dass die Dauer der Szene insgesamt weniger als 4 Sekunden betragen sollte. Lassen Sie uns vor diesem Hintergrund eine neue Komposition für diese Szene erstellen . Wir können diese Szene drei nennen und sicherstellen, dass alle Einstellungen korrekt sind. Für den Hintergrund können wir ihn wieder auf Schwarz ändern . In Ordnung. Und jetzt ist das erste und wichtigste Objekt, das in der Szene sein muss, die Suchleiste. Wenn Sie sich erinnern, haben wir bei der Vorbereitung der Dashboard-Benutzeroberfläche darauf geachtet, dieses Objekt als separate Ebene zu belassen, sodass wir jetzt die Vorkomposition des Dashboards öffnen und die entsprechenden Ebenen von hier kopieren können Vorkomposition des Dashboards öffnen und die entsprechenden Ebenen von hier kopieren Um es ein bisschen schneller zu machen, wählen wir hier einfach den gesamten Bereich mit den Objekten in der Suchleiste aus, halten dann die Umschalttaste gedrückt und klicken auf die irrelevanten Ebenen, um sie abzuwählen Stellen wir sicher, dass wir die relevanten Ebenen ausgewählt haben. Kopieren wir nun die ausgewählten Ebenen. Dann gehe zu unserer neuen Komposition und füge sie hier ein. Großartig. Schauen wir uns jetzt an, was wir hier haben. Wie Sie sehen können, sind die Ebenen nach dem Einfügen im Ebenenfenster nicht in der richtigen Reihenfolge angeordnet Ebenenfenster nicht in der richtigen Reihenfolge Falls Sie es nicht wissen, spielt die Auswahl in After Effects in diesem Teil eine wichtige Rolle Die erste Ebene, die Sie auswählen, wird im oberen Teil des Ebenenfensters angezeigt. So haben wir die Ebenen aus dem Dashboard Precomp ausgewählt , und deshalb sehen wir dieses Ergebnis jetzt hier. Um dies schnell zu beheben, können wir die unterste Ebene auswählen , da dies Ebene ist, über der wir uns befinden möchten Halten Sie dann die Umschalttaste gedrückt und wählen Sie die obere Ebene aus. Drücken Sie nun Strg oder Befehl X, um sie auszuschneiden, und drücken Sie dann Strg V, um sie wieder hier einzufügen. Es ist ein schneller Trick, Ihre Ebenen schnell neu zu organisieren ohne dies manuell nacheinander tun zu müssen. In Ordnung. Und jetzt fangen wir an, die Szene anzupassen. Erstens können wir dieses Symbol loswerden , weil wir es hier nicht benötigen. Als Nächstes stellen wir sicher, dass unsere Objekte perfekt in der Mitte des Computers ausgerichtet sind. Dazu können wir das Safe Action Grid öffnen und dann alle Ebenen auswählen und sie perfekt in der Mitte ausrichten . Sieht toll aus. Als Nächstes können wir auch die Suchebene löschen, da wir in wenigen Minuten im rechten Bereich eine Schaltfläche mit einem Suchtext erstellen im rechten Bereich eine Schaltfläche mit werden. Lassen Sie uns weiter überprüfen, ob wir hier etwas übersehen haben, denn ich sehe , dass wir im Ebenenbedienfeld drei Ebenen haben, aber ich sehe nur zwei Objekte in der Szene. An diesem Punkt können wir Ebenen ein- und ausschalten , um zu verstehen, was passiert. Wie Sie sehen können, habe ich eine Strichebene , die Teil des Suchfeldes ist. In unserem Fall brauche ich es nicht wirklich, also können wir es jetzt löschen. In Ordnung. Und jetzt, bevor wir anfangen, die Szene zu animieren, skalieren wir die Objekte, die wir hier haben, ganz schnell Dafür ist es eine gute Idee, das Suchsymbol dem Hauptfeld zuzuordnen . Dann können wir es an der Mitte der Komposition ausrichten, um sicherzustellen, dass es perfekt zentriert ist Jetzt können wir die Box-Ebene skalieren, und das Symbol wird zusammen mit ihr skaliert. Sieht gut aus. Jetzt können wir die Ebenen bereits reduzieren, um sie in der besten Qualität zu erhalten, und diese Szene weiter entwerfen. Da wir wissen, dass wir hier einen Satz hinzufügen werden , der besagt, dass ich Hilfe brauche. Lass uns das Textwerkzeug auswählen und es hier aufschreiben , weil wir es bald animieren Ich ändere die Farbe des Textes in Weiß, damit ich sehen kann, was ich mache, und lasse uns die Gewichtung auf normal einstellen Ordnung. Das sieht gut aus Lassen Sie uns nun den Text wieder schwarz machen und ihn in das Suchfeld einfügen. Wir können die Schriftgröße ein wenig verkleinern. 35 sieht gut aus. Großartig. sind wir bereit, mit der Animation der Szene zu beginnen Das erste, was wir animieren können, ist die Schreibanimation für Und dazu verwenden wir einen integrierten Effekt, den wir im Bedienfeld „ Effekte und Voreinstellungen“ finden Sie können Schreibmaschine in das Suchfeld eingeben und dann den Konsoleneffekt Schreibmaschine mit blinkendem Cursor verwenden Um ihn zu verwenden, stellen Sie sicher, dass die Textebene ausgewählt ist, und doppelklicken Sie dann auf den Effekt um ihn auf die ausgewählte Textebene anzuwenden Okay. Wie Sie sehen können, beginnt der Text jetzt von seiner Mitte aus zu animieren , was nicht das ist, was wir wollten Wir benötigen den Text, um die Schreibmaschinenanimation von links zu starten , und das passiert, weil der Textabsatz zur Mitte ausgerichtet war In diesem Fall passen wir den Absatz nach links an und passen die Position der Ebene an Und jetzt sieht die Animation so aus, wie sie sollte. Jetzt drücken wir auf die Ebene. Und wie Sie hier sehen können, sehen wir die beiden Keyframes, die den Animationstyp erzeugen Der Keyframe beginnt an diesem Zeitpunkt denn als wir diesen Effekt angewendet haben, befanden wir uns an diesem Zeitpunkt Falls Sie sich also vor der Anwendung des Effekts nicht am Anfang der Animation befanden, verschieben Sie die Keyframes so, dass sie am Anfang der Timeline beginnen am Anfang der Timeline Ordnung. Lassen Sie uns nun dafür sorgen, dass diese Animation 1 Sekunde dauert Wie Sie sehen können, haben wir diese nette Schreibanimation und einen kleinen blinkenden Cursor daneben , der endlos blinkt blinkenden Cursor daneben , Sie können mit den verschiedenen Eigenschaften dieses Effekts herumspielen , Aber in meinem Fall werde ich es so lassen, wie es ist, und weitermachen. Ordnung. Jetzt möchte ich nicht, dass der Text einfach in der Animation erscheint Ich möchte dem Suchfeld ein etwas realistischeres Aussehen verleihen. Und dafür möchte ich den Suchtext haben , den wir zuvor gelöscht haben. Lass mich dir zeigen, was ich meine. Lass uns zurück zum Dashboard gehen, Pre-Comp, und die Suchebene von dort kopieren und sie dann in unsere Szene einfügen Platzieren Sie diese Ebene an der richtigen Position und passen Sie ihren Maßstab auf 150 an, da dies der Skalierungswert ist , den wir für die anderen Ebenen in dieser Szene festgelegt haben für die anderen Ebenen in dieser Szene Platzieren wir diese Ebene nun unter der Textebene und ordnen sie dem weißen Suchfeld zu. Lassen Sie uns ein wenig heranzoomen, damit wir sehen können, was wir tun, und den Text dort ein wenig nach links platzieren. Lassen Sie uns nun die Textebene 1 Sekunde nach dem Beginn der Timeline starten . Großartig. Und jetzt schneiden wir die Suchebene so zu, dass sie bei der zweiten endet. Stellen wir sicher, dass wir auch diesen Frame zuschneiden. Und wenn wir uns jetzt eine Vorschau davon ansehen, wird es eher wie ein realistisches Suchfeld aussehen ein realistisches Suchfeld wir alle wissen , dass es im Internet existiert. An dieser Stelle können Sie den Text natürlich ändern oder anpassen, wenn Sie möchten. Die Schreibanimation wird dadurch nicht beeinträchtigt. Ordnung. Lassen Sie uns nun weitermachen und die Suchschaltfläche erstellen, die sich auf der rechten Seite des Suchfeldes befinden muss auf der rechten Seite des Suchfeldes Und es gibt einen sehr einfachen und schnellen Weg, das zu machen. Lassen Sie mich einfach alle Ebenen im Ordner im Projektfenster schließen , bevor wir weitermachen. Okay, jetzt, um die Schaltfläche zu erstellen, können wir die Nachricht duplizieren, die wir zuvor erstellt haben. Lassen Sie uns jetzt den Namen in Three Button One ändern. Die Zahl drei steht für die Szene, in der diese Schaltfläche erscheinen soll. Geben wir nun diesen Precomp ein und ändern zuerst den zu suchenden Text Danach setzen wir den Text fett und passen die Breite der Komposition 450 sieht okay aus. Lassen Sie uns nun die richtige Farbe finden, der das Button-Feld gefüllt werden soll. Gehen wir dazu zum Dashboard Precomp und öffnen den Charakter-Tab Lassen Sie uns nun mit der Pipette die lila Farbe der Schaltfläche im Header-Bereich testen Als Nächstes öffnen wir das Farbfeld und kopieren das Tag dieser Und jetzt kehren wir zu unserer Button-Vorkomposition zurück, wählen dann die Schaltflächenebene aus, öffnen die Füllung für diese Ebene und fügen das kopierte Tag Lassen Sie uns abschließend die Textfarbe in Weiß ändern. Speichern wir das Projekt, bevor wir weitermachen. In Ordnung. Und jetzt möchte ich, dass wir eine Klick-Animation für diesen Button erstellen . Natürlich können wir dafür draußen in der Hauptszene eine einfache Maßstabsanimation erstellen eine einfache Maßstabsanimation , aber ich möchte Ihnen zeigen, wie Sie mit einer sehr einfachen Technik eine viel interessantere Klickanimation erstellen können , die in vielen SAS-Erklärvideos verwendet wird Bevor wir mit der Klickanimation beginnen, möchte ich zunächst darauf hinweisen , dass Sie verstehen, dass wir die Schaltflächenebene nicht skalieren können, da wir den Two-D-Textfeldeffekt verwenden , da sie über Ausdrücke mit der Textebene verbunden ist über Ausdrücke mit der Textebene verbunden , die wir in dieser Komposition haben. Daher werden wir die Skalierungsanimation für die Textebene erstellen , und das Schaltflächenfeld dahinter wird entsprechend animiert Wenn Sie fragen, warum wir nicht eine normale Form für die Schaltfläche erstellen , anstatt den Two-D-Textfeldeffekt zu verwenden, dann liegt das daran, dass wir zu einem späteren Zeitpunkt im Projekt eine weitere Schaltfläche mit anderem Text haben werden. Zum Beispiel werden wir eine Schaltfläche mit der Textanzeige haben, und es wird viel einfacher sein, den Zwei-D-Box-Effekt zu verwenden den Zwei-D-Box-Effekt da sich das Feld automatisch an den Text anpasst. Ordnung. In diesem Sinne beginnen wir mit der Erstellung der Klick-Animation. Beginnen wir also damit, eine maßstabsgetreue Animation für den Text zu erstellen . Erstellen Sie den ersten Keyframe mit dem aktuellen Wert am Anfang der Timeline Gehen wir nun 15 Frames oder vielleicht 20 Frames vorwärts und erstellen ein weiteres Keyframe mit dem aktuellen Wert dann in der Mitte dieser Animation Lassen Sie uns dann in der Mitte dieser Animation die Ebene verkleinern Wir können es auf 70 setzen. Lassen Sie uns nun einfach alle Keyframes vereinfachen und mithilfe des Diagrammeditors die Ziehpunkte nach links verschieben Wir werden also eine schnelle Bewegung haben. Ich denke, es ist zu langsam. Lassen Sie uns den Diagrammeditor verlassen und dafür sorgen, dass er 15 statt 20 Frames dauert. Wählen Sie also alle Keyframes und ziehen Sie bei gedrückter Alter-Option das letzte Schlüsselbild auf Frame 15. Und jetzt wollen wir diese Klick-Animation viel interessanter machen Klick-Animation viel interessanter Wählen wir dazu zunächst das Ellipse-Werkzeug aus. Lassen Sie uns jetzt den Strich ausschalten. Halten Sie die Alt- oder Wahltaste gedrückt und klicken Sie auf die Strichfarbe, um zwischen den verschiedenen Strichoptionen umzuschalten zwischen den verschiedenen Strichoptionen bis Sie zur Option des deaktivierten Strichs gelangen Als Füllfarbe wählen wir diesmal Weiß. Erstellen Sie nun eine symmetrische Kugel. Lassen Sie uns die Größe auf 350 setzen. Richten Sie es abschließend an der Mitte der Komposition aus und ändern Sie den Namen dieser Ebene in Sweep Bald werdet ihr verstehen, wofür diese Ebene verwendet wird Und jetzt fangen wir an, diese Ebene zu animieren. Zunächst verwenden wir die Skalierungseigenschaft. zu Beginn der Animation die Stellen Sie zu Beginn der Animation die Skala auf Null und erstellen Sie den ersten Keyframe Gehen Sie als Nächstes 15 Frames vorwärts und stellen Sie die Skala auf eine höhere Zahl ein, etwa 110 Gehen Sie nun zurück zum Anfang der Timeline und drücken Sie T, um die Opazitätseigenschaft zu öffnen Erstellen Sie den ersten Keyframe mit dem Wert 100%. Gehen Sie als Nächstes zu Frame 15 und setzen Sie den Wert auf Null. Wie Sie sehen können, bekommen wir bereits einen interessanten Blick darauf. Ordnung. Lass uns weitermachen. Lassen Sie uns nun einfach die Keyframes vereinfachen und die flotte Bewegung hinzufügen, wie wir es bei der skalierten Animation des Textes getan haben, und sehen, wie das aussehen wird Ich denke, die Opazität verschwindet zu schnell. Wir können diese Animation etwas verlangsamen , indem wir die Schlüsselbilder für die Deckkraft auswählen und F 9 drücken um die Lockerung dieser Animation zurückzusetzen Ich denke, wir können sie noch weiter verlangsamen, indem die letzten beiden Keyframes auf Frame 20 ziehen Ordnung. Und jetzt öffnen wir die Trackmat-Funktion und machen diese Ebene so, den Alpha-Kanal der Button-Ebene verwendet. Das bedeutet, dass die Kugel nur innerhalb der Form der Schaltfläche sichtbar ist. Lassen Sie uns wieder zur Formebene zurückkehren , da wir die Schaltfläche sehen müssen. Ordnung. Und jetzt, wie Sie sehen können, zusammen mit der Skalierungsanimation des Textes haben wir zusammen mit der Skalierungsanimation des Textes eine sehr interessante Klickanimation. Ich denke, der Sweep ist am Anfang zu hell. Um das Problem zu beheben, öffnen wir die Keyframes auf der Ebene und ändern den Wert des ersten Opazitäts-Keyframes auf, sagen wir, 80% Das sieht viel besser aus. In Ordnung. Und jetzt können wir das Projekt speichern und diese Schaltfläche zu unserer Szene hinzufügen Lassen Sie uns diesen Pre-Comp herunterskalieren. Wir können die Skala auf 40 setzen, den Precomp zusammenklappen und ihn hier auf der rechten Seite platzieren . In Ordnung Sobald das erledigt ist, müssen wir die Klickanimation mit der Animation, die in der Szene passiert, zeitlich abstimmen. Das heißt, der Klick sollte beginnen nachdem die Tippanimation beendet ist. Aber wie Sie vielleicht verstehen, können wir diesen Precomp nicht einfach so verschieben, dass er von hier aus beginnt, weil wir ihn dann am Anfang der Animation nicht sehen am Anfang der Animation wir stattdessen bei der richtigen Sekunde, geben dann die Taste Precomp ein, drücken Sie auf Sie, um alle Keyframes aufzudecken, und bewegen Sie alle Keyframes aufzudecken, und sie so, dass sie von diesem Zeitpunkt an beginnen Zurück in der Hauptszene beginnt die Klickanimation jetzt beginnt die Klickanimation Wir können dies später anpassen falls wir etwas in der Szene ändern. Aber lassen wir es vorerst so wie es ist. Wir können die Schriftgröße auch auf 30 verkleinern. Ich finde, es sieht ein bisschen besser aus. In Ordnung. Speichern wir jetzt das Projekt und gehen zurück zur Videotafel , um zu sehen, ob wir dieser Szene noch etwas hinzufügen müssen . Wie Sie sehen können, müssen wir die Cursoranimation erstellen , die in eine Art Ozean fällt. Im Moment ist der Dunkle Ozean nur ein Designelement, das für nur ein Designelement, das den Ablauf der Szene nicht unbedingt erforderlich ist. Wichtiger ist es, die Cursoranimation zu erstellen , da sie mit der Hauptanimation in dieser Szene synchronisiert werden muss mit der Hauptanimation in dieser Szene synchronisiert werden , also der gesamten Suchfeldanimation , die wir zuvor erstellt haben. Ich möchte, dass Sie diese Denkweise haben, wenn Sie an komplexen Projekten arbeiten. Wie ich in diesem Kurs bereits einige Male erwähnt habe, möchte ich, dass Sie immer zuerst mit der Animation der wichtigen Elemente fertig sind, anstatt sich mit Designelementen zu befassen, die beim Timing der Hauptanimation keine große Rolle spielen Ordnung. Nachdem das geklärt ist, gehen wir zurück zu unserer Szene und fügen das Cursor-Objekt Pre Comp hinzu Wir können diese Vorkomposition bereits zusammenklappen und damit beginnen, die Animation zu erstellen, die sie benötigt Wir müssen eine Art Animation erstellen , in der der Cursor herunterfällt, unter die Suchleiste geht und zum Abschluss auf die Schaltfläche klickt Wir können es von der rechten Seite oder von der linken Seite machen. Ich mache es lieber von der linken Seite. Lassen Sie uns also die Animation des Cursors von irgendwo hier aus beginnen . zu Beginn der Animation den Erstellen Sie zu Beginn der Animation den Keyframe für die erste Position Gehen wir nun 1 Sekunde weiter, zoomen ein wenig heraus und bewegen den Cursor hier auf der linken Seite nach unten Gehen wir noch einmal eine Sekunde weiter und platzieren die Kugel irgendwo hier unter dem Suchfeld. Wir können diesen Punkt später hierher bringen . Wir werden diesen Pfad kurven. Im Moment können wir den Cursor an diesem Zeitpunkt irgendwo hier platzieren . Gehen wir dann noch eine Sekunde weiter und bringen den Cursor irgendwo um die Schaltfläche herum, oder wir können ihn auf der Schaltfläche platzieren. Zu diesem Zeitpunkt weiß ich nicht wirklich, wie meine Animation genau aussehen wird , und das ist völlig in Ordnung. Aber was ich weiß, ist, dass ich den Positionspfad jetzt kurven werde. Deshalb versuche ich, den Pfad so zu gestalten , dass ich nach der Krümmung eine schöne Bewegung für den Cursor bekomme Wenn Sie nicht genug Erfahrung mit After Effects haben, wird Ihnen das wahrscheinlich sehr seltsam vorkommen Wenn Sie jedoch Erfahrung mit Pfaden sammeln, unabhängig davon, ob es sich um Positionspfade oder Pfade handelt, die mit dem Zeichenstiftwerkzeug erstellt wurden , werden Sie verstehen, wie Sie diese so strukturieren müssen, dass Sie mit Hilfe der Griffe den Pfad erhalten, der zu Ihrer Szene passt. Fangen wir also an, den Pfad zu krümmen. Dazu können wir das Werkzeug zum Konvertieren von Scheitelpunkten oder die Tastenkombination verwenden Halten Sie die Strg- und Alt-Taste gedrückt und klicken Sie einmal auf den Punkt. Jetzt haben wir die Kurvengriffe , die wir so einstellen können, dass sich der Cursor nach unten bewegt Wiederholen Sie diesen Vorgang für die restlichen Punkte dieses Positionspfads, bis wir einen schönen kurvigen Pfad erhalten Okay, jetzt, wo wir die Animation des Cursors haben, sehe ich, dass der Cursor 3 Sekunden braucht , um die Schaltfläche zu erreichen Das bedeutet, dass die gesamte Animation bevor sie stattfindet, zu schnell abläuft, also passen wir sie an. Erstens können wir dafür sorgen, dass die Tippanimation von Sekunde eins bis Sekunde drei etwas länger dauert. Als Nächstes geben wir die Schaltfläche pre comp ein und verschieben alle Keyframes so, dass sie zu diesem Zeitpunkt beginnen Ordnung. Ich denke , es ist vorerst gut. Also lass uns weiterarbeiten. Zunächst können wir den Cursor pre comp gelb markieren, wie wir es bei den vorherigen drei Comps getan haben Auf diese Weise können wir ihn leicht von den übrigen Ebenen unterscheiden Und jetzt, ab diesem Zeitpunkt, erstellen wir eine Klick-Animation für den Cursor. In dieser Situation können wir einfach eine Skalierungsanimation erstellen, bei der der Cursor auf Null skaliert wird. Lassen Sie uns diese Animation zehn Frames lang laufen lassen und sehen, wie das aussieht. Okay, ich finde, es sieht vorerst gut aus, aber ich denke, wir können die Tippanimation einfach vereinfachen , damit sie nicht linear beginnt. Lassen Sie uns diese Keyframes einfach vereinfachen. Und jetzt wird die Animation einen schönen, einfachen Start und ein Ende Nett. Das sieht besser aus. Wir können die Schaltfläche prec unter der Textebene platzieren , um eine übersichtlichere Zeitleiste Und jetzt drücken wir P auf dem Cursorobjekt und beginnen mit der Anpassung der Positionsanimation, die wir erstellt haben Während wir das tun, müssen Sie sich darüber im Klaren sein, dass wir durch die Anpassung der Positionsanimation möglicherweise den Rest der Animation in der Szene anpassen müssen . Lassen Sie uns alle Keyframes auswählen und sie zunächst alle mit Easy Ease bearbeiten. Lassen Sie uns nun dafür sorgen, dass diese Kugel schnell in die Szene eindringt. Auf diese Weise erhalten wir eine schöne kontinuierliche Bewegung aus der vorherigen Szene in einem schönen Match-Cut-Übergang. An diesem Punkt bin ich damit einverstanden, dass der Cursor anhält, weil dadurch der Fokus auf den Text gelegt wird. Und jetzt, an diesem Punkt, überprüfe ich nur die Animation und versuche zu überlegen, ob das Timing gut ist Meiner Meinung nach sollte der Text die Animation etwas schneller beenden . An diesem Punkt schaue ich mir die Animation immer ein paar Mal an, bis ich etwas finde, das sich richtig anfühlt. An diesem Punkt können wir also einige Keyframes verschieben und das Timing etwas verbessern. Denken Sie unbedingt daran Wenn Sie einige Keyframes anpassen, müssen Sie immer sicherstellen, dass Sie auch die restlichen Keyframes, die sich auf diese Animation beziehen, an das neue Timing anpassen diese Animation beziehen, an das neue Timing In unserem Fall muss ich die Skalenanimation so verschieben, dass sie von hier aus beginnt, und dann muss ich die Schaltflächenanimation eingeben und sicherstellen , dass die Klickanimation auch zum Timing außerhalb passt Okay, ich denke, es sieht jetzt ein bisschen besser aus. Und bevor ich weitermache, würde ich den Griff dieses Keyframes so anpassen , dass sich der Cursor langsam bewegt und gegen Ende an Geschwindigkeit gewinnt Großartig. Sobald wir mit der Hauptanimation fertig , die in dieser Szene passieren muss, können wir mit der Arbeit am Übergang zur nächsten beginnen . In diesem Fall möchte ich eine Skalierungsanimation für das Suchfeld erstellen . Nach dem Klick wird es also den gesamten Frame abdecken. Auf diese Weise können wir die weiße Suchfeldebene in eine Formebene umwandeln . Klicken Sie mit der rechten Maustaste, um Formen aus Vektorebene zu erstellen und wählen Sie „Formen aus Vektorebene erstellen“. diese Weise können wir die Form dieses Designobjekts so ändern , als ob wir es mit dem Form- oder Stiftwerkzeug erstellt hätten. Und da die ursprüngliche Ebene in Illustrator erstellt wurde, haben wir möglicherweise einige Eigenschaften in der neu erstellten Formebene, die wir nicht benötigen An dieser Stelle können Sie also gerne untersuchen, wie diese Ebene aufgebaut ist, und unnötige Eigenschaften wie Gruppen oder Zusammenführungspfade löschen wie Gruppen oder Zusammenführungspfade Nachdem das erledigt ist, fangen wir an, an der Outtro-Animation der Szene zu arbeiten der Outtro-Animation der Szene damit wir einen schönen Übergang zur nächsten Szene haben Zuerst müssen wir den Zeitpunkt finden, an dem wir die Otro-Animation starten wollen In unserem Fall können wir sie ab Sekunde vier starten, ein paar Frames nach der Klickanimation Und da wir jetzt die Formebene animieren, öffnen wir die Ebeneneigenschaften und erstellen den ersten Keyframe für den Pfad dieser Gehen wir als Nächstes 1 Sekunde vorwärts und doppelklicken wir dann auf die Form , um alle Punkte auszuwählen Skalieren Sie diese Form, während Sie auf dem Mac die Umschalttaste und die Strg- oder Befehlstaste gedrückt halten , um sie proportional zu skalieren Skalieren wir es, bis der gesamte Rahmen mit der weißen Form bedeckt ist. In Ordnung. Also im Moment sieht die Animation nicht sehr aufregend aus, also lasst uns sie verbessern. Lassen Sie uns zunächst die Keyframes einfach vereinfachen. Lassen Sie uns nun dafür sorgen, dass diese Animation langsam beginnt indem wir den Griff im Diagrammeditor nach rechts anpassen. Ich denke, es sieht jetzt viel besser aus. Jetzt, wo das erledigt ist? Speichern wir das Projekt, bevor wir weitermachen. Okay. Gehen wir jetzt zurück zu unserer Master-Komposition und fügen die neue Szene in die Timeline Wie Sie feststellen, haben wir die Atro-Animation der dritten Szene noch nicht vollständig fertiggestellt Atro-Animation der dritten Szene Und das liegt daran, dass es, wie ich bereits sagte, sehr wichtig ist, zuerst zu überprüfen, ob das Voiceover und die Animation, die wir erstellt haben, synchronisiert sind Bevor wir zu viele Szenen erstellen und zu viele Ebenen animieren, sollten wir sicherstellen, dass das Voiceover in die Master-Comp-Timeline gebracht wird und wir uns die gesamte Animation ansehen , um zu überprüfen , ob sie zum Es ist besser, Fehler sofort zu erkennen und zu korrigieren, bevor wir zu viele Szenen haben , die durch frühe Fehler beeinträchtigt werden, die durch frühe Fehler beeinträchtigt Lassen Sie uns vor diesem Hintergrund sehen, was wir haben. ein großes Team über mehrere Projekte hinweg zu verwalten ist nicht einfach, ein großes Team über mehrere Projekte hinweg zu verwalten. Zu viele Aufgaben, zu viele Nachrichten und bevor Sie es wissen, ertrinken Sie im Chaos, wenn Sie nach Hilfe suchen. Du hast einen Punkt getroffen Die Plattform, die zum Projektmanager macht, stellt möglicherweise fest, dass die dritte Szene nicht mit dem Voiceover synchronisiert ist Konzentrieren wir uns also darauf, das zu beheben. Beschäftigen wir uns zunächst mit dem Übergang zwischen der zweiten und der dritten Szene. Wie Sie sehen können, befindet sich der Cursor in der zweiten Szene zu diesem Zeitpunkt bereits außerhalb des Rahmens. Und da wir einen Match-Cut-Übergang zur dritten Szene erstellen möchten , ist es eine gute Idee, diese Vorkomposition genau dann zu schneiden, wenn der Cursor den Frame verlässt Achten Sie darauf, auch das letzte Bild zu vergrößern und zu löschen . In Ordnung. Lassen Sie uns nun die dritte Szene von genau diesem Zeitpunkt aus starten und die Animation noch einmal ansehen. Hören wir uns das Voiceover an, wenn die dritte Szene beginnt, und versuchen zu verstehen, was wir im Inneren anpassen müssen Bevor du dich versiehst, ertrinkst du im Chaos und suchst nach Hilfe Hat einen Punkt erreicht. Die Plattform , die das Produkt in Ordnung bringt Das Erste, was mir auffällt, ist, dass die gesamte Animation etwas schneller ablaufen muss, denn wie wir hören, muss die nächste Szene bereits zu diesem Zeitpunkt beginnen Lassen Sie uns also mit Szene drei beginnen und zuerst die Tippanimation beschleunigen. Beenden wir es bei Sekunde zwei. Als Nächstes passen wir die gesamte Animation an, die mit dem Cursor ausgeführt wird. Das heißt, wir müssen auch die Klickanimation im Inneren anpassen. Und vergiss nicht, die Outtro-Animation der Szene anzupassen die Outtro-Animation der Szene Das sind die Schlüsselbilder der weißen Formbox. Alles klar? Gehen wir jetzt zurück zum Master Comp und sehen uns diesen Teil noch einmal an Für Hilfe. Ich habe einen Punkt getroffen. Die Pflanze bittet um Hilfe. Met Ich denke, wir müssen diese Animation noch etwas schneller und früher in der Szene machen diese Animation noch etwas schneller und früher in der Szene Geben wir also den Precomp ein und passen die Keyframes noch einmal Ich zeige Ihnen diesen Vorgang, weil ich möchte, dass Sie sich daran gewöhnen, zunächst sicherzustellen, dass die ersten Szenen in Ihrem Projekt mit dem Voiceover synchronisiert sind, damit Sie üben können, die Animation entsprechend zu timen Es ist sehr wichtig , dies in der Anfangsphase zu tun , bevor Sie mit der Animation der restlichen Szenen fortfahren Ich denke, wir können diesen Teil auch flüssiger gestalten, indem wir diesen Keyframe zu einem kontinuierlichen Keyframe machen und die Bewegung , die zu diesem Zeitpunkt stattfindet, beschleunigen , die zu diesem Zeitpunkt stattfindet, Unter dem Strich möchte ich nicht, dass die Pause hier stattfindet Okay, ich denke, es sieht besser aus. Gehen wir jetzt zurück zum Master Comp und schauen uns diesen Teil noch einmal an Und bevor du dich versiehst, ertrinkst du im Chaos und suchst nach Hilfe Einen Punkt erreicht. Ich ertrinke im Chaos und suche nach Hilfe Ich habe einen Punkt getroffen. Einen Punkt erreicht. Um Hilfe. Ordnung, ich denke, zu diesem Zeitpunkt muss die Otro-Animation bereits beginnen Gehen wir also in die Szene und verschieben wir diesmal nur die letzten Keyframes dieser Animation auf die zweiten beiden und 15 Und vergessen Sie natürlich nicht die Klickanimation innerhalb der Schaltfläche Precomp, die Klickanimation innerhalb der Schaltfläche Precomp, oder? Ich denke, das wird großartig funktionieren Und jetzt können wir weitermachen , an der Otro-Animation dieser Szene zu arbeiten Lassen Sie uns zunächst das Cursorobjekt Precomp genau dann zuschneiden , wenn die Animation beendet ist Als Nächstes erstellen wir eine einfache Opazitätsanimation für die Schaltfläche, sodass sie direkt nach dem Klicken verschwindet Ich finde, das sieht gut aus. Machen wir dasselbe mit dem Lupensymbol Wir können diese beiden Ebenen zu diesem Zeitpunkt zuschneiden , damit die Timeline sauber bleibt Bevor ich weitermache, bringe ich die Suchebene hier nach oben, um meine Timeline zu organisieren. Okay, jetzt wollen wir uns mit der Textebene befassen , die wir hier haben. Beginnen wir mit der Otro-Animation auch mit den zweiten zwei und 15 Frames Um es etwas interessanter zu machen, konvertieren wir dieses Mal diese Ebene in eine Drei-D-Ebene und erstellen eine Outtro-Animation, bei der der Text Kamera hin und aus dem Bild heraus fliegt Erstellen Sie also zunächst einen Keyframe für die Positionseigenschaft zu diesem Zeitpunkt Als Nächstes bewegen Sie sich 1 Sekunde in der Zeit vorwärts. Sie können hier das Zeitmenü verwenden, wenn Sie die Zeitanzeige nicht manuell ziehen möchten. Verschieben Sie nun den Wert für die Z-Position, bis diese Ebene vollständig aus dem Rahmen herausragt. Ich finde, diese Animation sieht sehr cool aus, und ich möchte dieselbe Art von Animation auch auf die Schaltfläche und das Lupensymbol anwenden Animation auch auf die Schaltfläche und das Lupensymbol Lassen Sie uns also zuerst die Opazitäts-Keyframes auf diesen Ebenen löschen und dabei sicherstellen, dass wir mit dem Löschen vom letzten Keyframe beginnen , sodass der verbleibende Keyframe den Wert auf 100% hält Entfernen Sie dann auch die restlichen Keyframes . In Ordnung. Lassen Sie uns nun dieselbe Outtro-Animation für die Positionseigenschaft für beide Ebenen erstellen die Positionseigenschaft für beide Ebenen Um Ihnen diesen Prozess zu zeigen, denn das ist der realistische Arbeitsablauf von Motion-Design-Projekten Manchmal erstellen wir Animationen , die zunächst okay erscheinen, aber später stellen wir fest, dass eine andere Animation besser aussieht. Das bedeutet, dass Sie oft erst verstehen, was am besten funktioniert , wenn Sie es direkt in After Effects getestet haben. Und ich sage dir das, weil ich möchte, dass du dich an Situationen gewöhnst, in denen du nicht genau weißt, was du tun sollst. Anstatt zu raten, probieren Sie verschiedene Animationen aus. Wenn Sie in Ihrem Kopf darüber nachdenken, erhalten Sie keine Antwort. Das Testen verschiedener Ansätze wird es tatsächlich tun. Ordnung. Nachdem Sie diese Ebenen in drei D und die Positionsanimation erstellt haben, können Sie sehen, dass die Schaltflächenebene aussieht, als würde sie sich nicht bewegen. Das passiert, weil wir diesen Precomp kollabieren. Und wie ich in früheren Lektionen erwähnt habe, ist jetzt ein guter Zeitpunkt, um etwas ausführlicher über die Funktion von Kollapstransformationen in After Effects zu sprechen die Funktion von Kollapstransformationen Wenn wir eine Ebene oder eine Vorkomposition reduzieren, zeigt uns After Effects die Originalinformationen dieser Wenn Sie beispielsweise eine Illustrator-Ebene reduzieren, verwendet After Effects die ursprünglichen Vektordaten, sodass wir die Ebene in voller Vektorqualität sehen verwendet After Effects die ursprünglichen Vektordaten, sodass wir die Ebene in voller Vektorqualität sehen, ohne an Auflösung zu verlieren. Beim Ausblenden einer Vorkomposition zeigt After Effects die Originalinformationen zeigt After Effects die Originalinformationen aus dieser Vorkomposition an. Da es sich bei den Ebenen innerhalb der Precomp in unserem Fall nicht um drei D-Ebenen handelt, werden sie in After Effects immer noch als zwei D betrachtet. Deshalb verhält sich die Schaltfläche hier nicht verhält sich Wenn wir das Precomp aufheben, ignoriert After Effects die internen Informationen und behandelt das Precomp als eine einzige Ebene mit drei D-Ebenen in der eine Da wir jedoch die höchste Qualität für diese Schaltfläche beibehalten möchten , lassen wir die wir Um das Problem zu beheben, müssen wir lediglich den Precomp aufrufen und alle darin enthaltenen Ebenen ebenfalls in drei D umwandeln Selbst wenn der Precomp ausgeblendet ist, verwendet After Effects jetzt die drei D-Informationen von innen, und das Okay, jetzt, wo das behoben ist, passen wir die Animation und das Timing des Ich denke, diese Animation kann bei Sekunde zwei und 20 Frames beginnen Es ist immer eine gute Idee, eine kleine Verzögerung zwischen den Animationen verschiedener Ebenen hinzuzufügen eine kleine Verzögerung zwischen . In diesem Fall kann das weiße Suchfeld zuerst beginnen und dann etwa fünf Frames später. Der Rest der Ebenen folgt. Großartig. Jetzt können wir diesen Pre-Comp so kürzen, dass er bei Sekunde vier endet, und zum Master-Comp zurückkehren um zu sehen, wie alles zusammenarbeitet hinweg zu verwalten nicht einfach, ein großes Team über mehrere Projekte Zu viele Aufgaben, zu viele Nachrichten und bevor Sie es wissen, ertrinken Sie im Chaos, wenn Sie nach Hilfe suchen. Einen Punkt erreicht In Ordnung, ich finde, alles sieht toll aus. Damit haben wir diese Lektion beendet und sind bereit, mit der nächsten fortzufahren Es wird gut werden. Wir sehen uns dort. 14. Gebäudeszene 4 – Logoanimation: Komm zurück. In dieser Lektion beginnen wir mit der Arbeit an der nächsten Szene. Wie üblich müssen wir als Erstes überprüfen , wie lang diese Szene sein sollte. Wie Sie sehen können, sollte die Szene in Sekunde 11 beginnen und in Sekunde 17 und 15 enden. Das bedeutet, dass die Dauer dieser Szene nicht länger als 7 Sekunden dauern sollte. Lassen Sie uns vor diesem Hintergrund eine neue Komposition erstellen und mit der Arbeit daran beginnen. Wir können diese Komposition Szene vier nennen. Passen wir die Abmessungen an. Okay. Und jetzt können wir mit der Arbeit am ersten Teil dieser Szene beginnen , der Logo-Animation des Unternehmens. Öffnen wir dazu den Precomps-Ordner im Projektfenster und ziehen das Logo Precomp Großartig. Und jetzt gehen wir den Precomp und überlegen uns, wie wir dieses Logo animieren können In den meisten Fällen muss die Logoanimation bei dieser Art von Projekt nicht sehr kompliziert sein Versuchen Sie daher, sich das Logo anzusehen und überlegen Sie sich , wie Sie es am einfachsten animieren können In unserem Fall kann es meiner Meinung nach großartig sein, eine Rotationsanimation für die dunklen Symbole des Logos zu erstellen Rotationsanimation für die dunklen Symbole , die aus der grünen Kugel dahinter herausragen Und was den Text des Logos anbelangt, können wir ihn auf die bei dieser Art von Projekten übliche Art animieren , die Erstellung einer Reveal-Strike-Animation Und jetzt möchte ich Sie an etwas erinnern, über das wir in den früheren Lektionen gesprochen haben Ich möchte Sie an meinen Denkprozess erinnern , wenn ich eine Logoanimation erstellen oder eine andere Animationsaufgabe animieren muss Wenn ich auf meinen Bildschirm schaue, teile ich ihn in mehrere Animationsteile In diesem Fall teile ich die Szene in drei Hauptteile Die Animation der Dreieckssymbole, die Animation der grünen Kugel und die Textanimation Danach entscheide ich, an welchem Teil der Animation ich zuerst arbeiten möchte. Und um ehrlich zu sein, ist das nicht sehr wichtig. Am wichtigsten ist, dass ich zuerst die Animation für jeden Teil erstelle und erst dann anfange, die drei Teile in meiner Timeline zeitlich aufeinander abzustimmen. Diese Denkweise ist besonders gut, wenn wir eine Demo-Animation für UI-Panels von SAS-Software erstellen müssen. Lassen Sie uns in diesem Sinne weiterarbeiten, und diese Idee wird Ihnen im Laufe des Prozesses langsam klarer werden . Zunächst können wir mit dem einfachsten Teil beginnen, nämlich der Animation der Dreiecke Der Einfachheit halber können wir alle anderen Ebenen, die wir hier in der Timeline haben, ausschalten , sodass wir uns nur auf die Dreieckssymbole konzentrieren können Und wie ich es immer gerne mache, lassen Sie uns diese Ebenen mit einer anderen Farbe kennzeichnen , um diesen Teil der Animation von den anderen Teilen zu unterscheiden der Animation von , die wir in naher Zukunft hier haben werden . Ordnung. Und jetzt fangen wir an, es zu animieren. Zunächst können wir zur zweiten Ebene übergehen und den ersten Keyframe für die Positionseigenschaft für all diese Ebenen erstellen den ersten Keyframe für die Positionseigenschaft für all diese Und das liegt daran, dass wir wissen , dass dies die Position ist, an der sie sich alle am Ende der Animation befinden müssen Jetzt können wir zum Anfang der Timeline gehen und zu diesem Zeitpunkt Keyframes erstellen, dann die Ansicht vergrößern und die Position so anpassen , dass sie aus der Mitte herausspringen Großartig. Wenn das erledigt ist, stellen wir uns bei Frame 15 in die Mitte der Animation und lassen die Symbole noch weiter öffnen , bevor wir die endgültige Position erreichen. Und weil ich möchte, dass sie sich alle um die gleiche Entfernung bewegen, anstatt sie manuell zu bewegen, können wir die X-Positionsachse als Taschenrechner verwenden und zum aktuellen Wert, sagen wir, 200 Pixel hinzufügen . Für das obere Dreieck müssen wir, anstatt 200 Pixel zur X-Achse hinzuzufügen, 200 Pixel zur X-Achse hinzuzufügen, die Y-Achse um 200 Pixel absenken. Machen wir dasselbe für die restlichen Dreieckssymbole. Wenn Sie sich nicht sicher sind, können Sie mit den Werten herumspielen und herausfinden, ob Sie den Wert um 200 erhöhen oder den Wert um 200 senken müssen den Wert um 200 erhöhen oder den Wert um 200 senken müssen, um das gewünschte Aussehen zu erzielen. Großartig. Jetzt haben wir also den Anfang der poppenden Rotationsanimation , die wir zu erstellen versuchen Als Nächstes erstellen wir eine Rotationsanimation. Lassen Sie uns dazu eine neue Nullebene erstellen. Platzieren Sie sie über den Dreiecken und zentrieren Sie den Ankerpunkt der Null Platzieren Sie es dann in der Mitte der Dreieckssymbole. Lassen Sie uns als Nächstes an dem Punkt stehen, an dem die Animation bereits beendet ist und die Dreiecke an ihrer endgültigen Position platziert wurden Dann ordnen wir alle Symbole der Null zu, markieren sie alle orange und ändern den Namen in Null-Symbole Gehen wir nun zum Anfang der Animation und lassen die Null während der Pop-up-Animation um eine volle Umdrehung rotieren . Fantastisch Und jetzt verwenden wir die Null und fügen mithilfe der Eigenschaft scale eine sekundäre Pop-Animation Erstellen Sie hier den ersten Keyframe, einen weiteren Keyframe beim zweiten Und in der Mitte der Animation skalieren wir die Null auf, sagen wir, Lassen Sie uns ein wenig herauszoomen, um zu sehen , wie das aussieht. Ich denke, es ist zu viel. Stellen wir die Skala auf 110 ein. Großartig. Nachdem das erledigt ist, fangen wir an, an der Verbesserung der Bewegung zu arbeiten. Lassen Sie uns zunächst alle Keyframes öffnen, die wir für diesen Animationsteil erstellt haben , und sie alle einfach bearbeiten Lassen Sie uns sehen, wie das aussieht. Ich denke, wir können die Animation verbessern, indem wir die Keyframes anpassen und etwas flottere Bewegungen erzeugen. Aber anstatt das mit dem Graph-Editor zu machen, möchte ich Sie daran erinnern, dass Sie, wenn Sie mehrere Keyframes für denselben Wert auf mehreren Ebenen haben , sie alle auswählen und das Keyframe-Velocity-Bedienfeld aufrufen können , um die Geschwindigkeit mithilfe des Einflussprozentsatzes für die eingehende und ausgehende Animation anzupassen Geschwindigkeit mithilfe des Einflussprozentsatzes für die eingehende Stellen wir es für beide auf 75% ein. Im Diagrammeditor sieht es so aus, als hätten wir die Griffe ein wenig nach links und ein bisschen nach rechts gezogen die Griffe ein wenig nach links und ein bisschen nach rechts Ich finde es sieht toll aus. Lassen Sie uns nun der Verbesserung der restlichen Keyframes fortfahren Meiner Meinung nach können wir die Rotation vorerst so lassen, wie sie ist Konzentrieren wir uns auf die Skalierungs-Keyframes. Lassen Sie uns damit beginnen, die Geschwindigkeit auf 75% einzustellen , wie wir es für die Position der Symbole getan haben , und sehen wir uns an, wie das aussieht. Das sieht gut aus, aber ich möchte, dass die Symbole etwas länger schweben , wenn sie alle geöffnet sind Deshalb setze ich die Skalierungs-Keyframes zurück, indem ich F neun oder F und F neun drücke, wenn Sie einen Mac verwenden, und ich passe die Geschwindigkeit mit dem Diagrammeditor an, sodass die Animation schnell startet, in der Mitte für einen längeren Zeitraum langsamer wird und dann gegen Ende wieder beschleunigt wird Ich denke, so sieht es viel besser aus. Wenn das erledigt ist, halte ich es für eine gute Idee, die Symbolanimation etwas zu verschieben. Aber lassen Sie uns vorher einen einfachen Trick verwenden, um die Pop-Animation etwas interessanter aussehen Lassen Sie uns dazu das letzte skalierte Schlüsselbild des Nullobjekts vergrößern letzte skalierte Schlüsselbild des und es fünf Frames vorwärts verschieben Stattdessen reduzieren wir zu diesem Zeitpunkt die Nullskala auf, sagen wir, 85%. Wie Sie sehen können, verleiht dieser einfache Trick der Bewegung eine nette Note. Großartig. Und jetzt fahren wir der Animation der grünen Kugel Zunächst können wir es grün markieren, um es visuell vom vorherigen Animationsteil zu trennen Lassen Sie uns nun eine schöne, maßstabsgetreue Pop-Animation dafür erstellen. Okay, nachdem ich die Popup-Animation erstellt habe, versuche ich jetzt, diese Animation so einzustellen dass sie etwas nach der Symbolanimation des Dreiecks beginnt Wie gesagt, es ist immer eine gute Idee, die Ebenen ein wenig zu versetzten An dieser Stelle versuche ich, es an verschiedenen Zeitpunkten zu platzieren und zu sehen, wie sich die Animation anfühlt. Ich kann die Geschwindigkeit auch auf 85 statt auf 75 ändern , um eine noch schnellere Bewegung zu erzielen. Ich denke, so sieht es viel besser aus. In Ordnung. das erledigt ist, fahren wir mit der Animation des nächsten Teils der Logoanimation fort, nämlich den Buchstaben des Logos Wie ich bereits sagte, animieren wir es in einem für diese Art von Projekt üblichen Stil, bei dem es sich um eine Animation zum Enthüllen von Strichen handelt Wir üben diese Technik im Logoanimationskurs, dem wir fünf verschiedene Arten von Premium-Logoanimationen erstellt haben von Premium-Logoanimationen Wenn Sie also lernen möchten, wie Sie Logos in Ihren größeren Projekten auf andere Weise animieren können, empfehle ich Ihnen dringend, sich diesen Kurs anzusehen. Alles klar? Zurück zum Projekt, wir werden diese Buchstaben mit einem Stricheffekt anzeigen. Um den Stricheffekt zu verwenden, müssen wir zuerst eine Maske auf dieser Ebene erstellen. Die Maske sollte der Form des Buchstabens folgen. Die Art und Weise, wie Sie mit der Erstellung des Strichs beginnen, wird sich in Zukunft auf die enthüllende Animation auswirken. Ich möchte, dass die Enthüllung am oberen Teil beginnt und dann zur linken Seite führt. Deshalb werde ich anfangen, meine Maske auf diese Weise zu erstellen. Stellen Sie also sicher, dass die Ebene ausgewählt ist, und beginnen wir hier mit der Erstellung des ersten Punkts. Der nächste Punkt befindet sich hier, und bevor wir den Klick loslassen, ziehen wir die Maus nach unten, um diesen Bereich kurvig zu machen Sie können dabei die Umschalttaste gedrückt halten. Machen wir so weiter, bis wir im oberen Bereich sind. In diesem Bereich müssen wir die Maus nicht ziehen . Einfach einmal klicken. Das Wichtigste ist, darauf zu achten, dass der Pfad nicht gesperrt wird. Wenn Sie den Pfad schließen, wird es etwas schwieriger , die Enthüllungsanimation zu erstellen. In Ordnung. Nachdem das erledigt ist, suchen wir dem Stricheffekt und fügen ihn der Ebene hinzu. Stellen Sie zunächst sicher, dass alle Masken aktiviert sind. als Nächstes für den Malstil die Option Originalbild anzeigen aus. Erhöhen Sie danach die Pinselgröße, bis Sie den gesamten Buchstaben sehen. Stellen Sie dann sicher, dass die Pinselhärte auf 100% eingestellt ist. Und jetzt, um es zu animieren, werden wir die Eigenschaft end verwenden. zu Beginn der Animation den Lassen Sie uns zu Beginn der Animation den ersten Keyframe mit einem Wert von 0% erstellen Gehen wir als Nächstes eine Sekunde vorwärts und setzen das Ende auf 100%. Wir können die restlichen Ebenen ausschalten , damit wir uns darauf konzentrieren können. Wie Sie sehen können, sieht der Anfang der Enthüllung etwas seltsam , weil ein großer Teil des Briefes gleich zu Beginn enthüllt wird Damit es etwas subtiler aussieht, können wir auch die Pinselgröße animieren Beginn der Animation Stellen Sie zu Beginn der Animation die Pinselgröße auf Null am Ende der Animation auf die Zahl ein, die wir zuvor ausgewählt haben, nämlich 20. Jetzt bekommen wir eine schönere Enthüllungsanimation. Lassen Sie uns als Nächstes einfach alle Keyframes vereinfachen und mithilfe des Diagrammeditors dafür sorgen, dass die Animation schnell startet und gegen Ende langsamer wird. Mal sehen, wie das aussieht Ich finde, es sieht gut aus, und die gute Nachricht ist, dass wir diesen Vorgang nicht für alle Schichten wiederholen müssen. Wir können den Effekt einfach kopieren und in die restlichen Buchstaben einfügen. Aber wir müssen die Masken für jeden Buchstaben erstellen , damit der Effekt richtig funktioniert. Lassen Sie uns also weiterhin die Maske für jeden Buchstaben erstellen , den wir in der Szene für den Buchstaben N haben. Ich möchte, dass die Enthüllungsanimation im oberen Bereich beginnt. Also fange ich an, die Maske von diesem Punkt aus zu erstellen und dann den zweiten Punkt hier unten zu erstellen. Anstatt die Maske für den Rest des Briefes fortzusetzen , ist es besser, eine neue Maske für diesen Teil des Buchstabens zu erstellen. Großartig. Nachdem das erledigt ist, fahren wir mit dem nächsten Buchstaben fort. Dieses Mal möchte ich, dass die Enthüllungsanimation im unteren Teil beginnt , sodass der erste Punkt, den ich für die Maske erstelle , hier unten sein wird. Dann gehe ich nach oben und stelle die Maske entsprechend der Buchstabenform fertig . Machen wir das für den Rest der Briefe weiter. Was den Punkt des Buchstabens I angeht, können wir ihn vorerst überspringen, weil wir eine maßstabsgetreue Animation erstellen werden , um ihn zusammen mit den restlichen Buchstaben sichtbar zu machen . In Ordnung. Und jetzt zum zweiten Buchstaben N, den wir hier haben Wir können die beiden Masken, die wir bereits für die erste erstellt haben, kopieren und in diese einfügen , um etwas Zeit zu sparen. Okay, sobald wir mit der Erstellung der Masken für alle Buchstaben fertig sind, kehren wir zum ersten Buchstaben zurück und kopieren den Stricheffekt daraus. Dann wählen wir den Rest der Buchstaben aus. Stellen Sie sicher, dass wir uns am Anfang der Timeline befinden, und fügen Sie den Effekt ein. Großartig. Jetzt haben wir alle Buchstaben animiert und können weitermachen. Lassen Sie uns alle Illustrator-Ebenen, die wir hier haben, reduzieren. Und jetzt machen wir die Enthüllung der Buchstaben etwas interessanter weil sie momentan zu statisch sind Wir können ihnen eine Positionsanimation hinzufügen, da wir wissen, dass die Endposition für diese Buchstaben dort sein muss, wo sie sich befinden. Im Moment gehen wir zur zweiten und erstellen einen Keyframe für die Position mit dem aktuellen Wert Gehen wir nun zum Anfang der Animation und bringen alle Buchstaben nach links Ich denke, das reicht vorerst. Großartig. Bevor ich weitermachte, fiel mir auf, dass ich vergessen habe, eine Enthüllungsanimation für den Punkt des Buchstabens I zu erstellen eine Enthüllungsanimation für den Punkt des Buchstabens I Lassen Sie uns das jetzt ganz schnell machen. Lassen Sie uns beim zweiten bleiben. Öffnen Sie dann die Skalierungseigenschaft dieser Ebene. Lassen Sie uns nun hier einen Keyframe mit dem aktuellen Wert erstellen, dann zum Anfang der Animation zurückkehren und die Skala auf Null setzen Lassen Sie uns abschließend die Keyframes vereinfachen und für die restlichen Buchstaben die gleiche Geschwindigkeit erzeugen, die wir für die Animation der enthüllenden die Keyframes vereinfachen und für die restlichen Buchstaben die gleiche Geschwindigkeit erzeugen Striche verwenden . In Ordnung. Nachdem das erledigt ist, bringen wir die Positionseigenschaft dieser Ebene zurück , sodass wir alle Positionseigenschaften für alle Buchstaben sehen können . Lassen Sie uns dann einfach alle Keyframes vereinfachen und die Geschwindigkeit so anpassen, dass sie zur Enthüllungsanimation passt Mal sehen, wie das zusammen aussieht. Ich finde den Antrag gut. Lassen Sie uns nun die Animation verbessern, indem wir die Buchstabenebenen verschieben Lassen Sie uns den Buchstaben T als ersten in der Reihe angeben, der die Szene betritt Ich mache es mit der neuen Funktion. Ich verliere nett. Lassen wir es vorerst so wie es ist und finden den richtigen Zeitpunkt für den Start dieses Animationsteils. Lassen Sie uns alle Buchstabenebenen auf Bild fünf bringen und sehen, wie das aussieht. Ich finde, es sieht okay aus, aber meiner Meinung nach können wir die Intro-Animation für die Buchstaben noch weiter verbessern , indem wir allen Buchstaben eine Skalierungsanimation hinzufügen Um es einfacher zu machen, lassen Sie uns bei Bild fünf stehen. Und wenn alle Ebenen ausgewählt sind, drücken Sie die linke Klammertaste , um alle Ebenen auf diesen Zeitpunkt zu bringen. Lassen Sie uns nun diese Ebene sperren, da wir bereits eine maßstabsgetreue Animation haben. Alles klar. Wählen wir nun die restlichen Ebenen aus, drücken S und erstellen das erste Schlüsselbild mit einem höheren Wert für alle Ebenen. Vielleicht 120. Versuchen wir es mit 150. Das ist zu viel. Ich finde, 135 sollte besser aussehen. In Ordnung. Gehen wir jetzt eine Sekunde vorwärts. Das sind Sekunde eins und fünf Frames und bringen die Skala wieder auf 100. Jetzt sollte die Animation etwas interessanter aussehen. Also lasst uns die Ebene entsperren. Wählen Sie dann noch einmal alle Ebenen aus, um eine schöne Verzögerung zu erzielen . Der Offset kann etwas größer sein. Meiner Meinung nach sieht das gut aus, und damit haben wir die Animation des Logos abgeschlossen und können weitermachen Aber vorher können wir die Hintergrundebene löschen , die wir hier haben. Gehen wir nun zurück zur Szene vier und versuchen, der Logoanimation eine zusätzliche Note zu verleihen Lassen Sie uns zunächst diese Vorkomposition reduzieren und dann die Skalierungseigenschaft öffnen, um eine zusätzliche Skalierungsanimation zur Verbesserung des Logos zu erstellen . Lassen Sie uns die Timeline ein wenig vergrößern und den ersten Keyframe für die Skalierungseigenschaft der Vorkomposition mit einem niedrigeren Wert erstellen den ersten Keyframe für die Skalierungseigenschaft der Vorkomposition mit einem niedrigeren Wert . Ich denke, 70 sollte funktionieren Gehen wir danach 1 Sekunde vorwärts und erstellen einen Keyframe mit dem Wert 100 Und zum Schluss stellen wir uns in die Mitte dieser Animation und stellen die Skala auf einen höheren Wert ein Wir können es auf 110 setzen. Lassen Sie uns nun die Keyframes vereinfachen und die Geschwindigkeit auf, sagen wir, 85% einstellen die Geschwindigkeit auf, sagen wir, 85% Mal sehen, wie alles zusammen aussieht . Ich finde, es sieht toll aus. Ordnung. Gehen wir jetzt zurück zum Storyboard und schauen, was wir als Nächstes noch animieren müssen Wie Sie sehen können, können wir endlich unser erstes UI-Panel im Projekt animieren unser erstes UI-Panel im Gehen wir also zurück zur Szene und suchen die Komposition dieses UI-Panels oder UI-Bildschirms in unserem Ordner Screens im Ordner PreComps dieses UI-Panels oder UI-Bildschirms in unserem Ordner Screens im Ordner PreComps In unserem Fall müssen wir den Dashboard-Bildschirm verwenden. Ziehen wir es in die Szene und beginnen wir mit der Arbeit an diesem Animationsteil. In Ordnung. Zuallererst können wir den Logo-Precomp vorerst ausschalten , sodass wir uns nur auf den Bildschirm konzentrieren können Laut unserem Storyboard wissen wir, dass dieser Bildschirm in einem leichten Winkel dargestellt werden muss einem leichten Winkel dargestellt Und wie Sie sich wahrscheinlich vorstellen können, können wir diesen Winkel erreichen, indem wir diesen Precomp in eine Drei-D-Ebene umwandeln diesen Precomp in eine Drei-D-Ebene Öffnen wir nun die Rotationseigenschaft und passen die Rotationsachse bis wir den Winkel erhalten , nach dem wir suchen Da wir möglicherweise verschiedene Bereiche innerhalb dieses Benutzeroberflächenfensters vergrößern möchten , ist es eine gute Idee, diesen Precomp zu reduzieren , um die höchste Qualität zu gewährleisten Aber wie Sie sehen können, erscheint das Precomp, sobald wir das getan haben, wieder in seinem ursprünglichen Also hier ist eine Frage an dich. Wie können wir dieses Problem beheben? Um das zu beheben, müssen wir den Precomp aufrufen und alle darin enthaltenen Ebenen in drei D-Ebenen umwandeln Zuerst können wir alle Ebenen auswählen, sie zusammenklappen, um ihre Qualität beizubehalten, und sie dann alle in drei D-Ebenen umwandeln Sobald das erledigt ist, können wir zur Hauptszene zurückkehren und sehen , dass alles einwandfrei funktioniert. Großartig. Rufen wir nun das Dashboard Precomp auf und bereiten den gesamten UI-Bildschirm weiter für Das erste, worauf wir uns jetzt konzentrieren sollten, ist die Unterkomposition der Ebenen , die zu den einzelnen Abschnitten dieses UI-Bildschirms gehören Zunächst können wir die Ebenen sperren, von denen wir sicher sind, dass wir sie nicht berühren Beginnen wir mit dem Sperren der grauen Haupthintergrundebene. Als Nächstes sperren wir das Hauptmenü auf der linken Seite. Großartig. Jetzt können wir mit der Unterkomposition der Ebenen jedes Abschnitts beginnen, beginnend mit dem Kopfbereich Lassen Sie uns also alle Ebenen dieses Bereichs auswählen und sie unterkomponieren. Da wir bei der Auswahl einer der Precomps im Screens-Ordner die Precompose-Funktion verwenden bei der Auswahl einer der Precomps im Screens-Ordner die Precompose-Funktion , wird die neue Vorkomposition automatisch in diesem Ordner wird die neue Vorkomposition automatisch in diesem platziert. Ich weise darauf hin, weil es hilft, das Projektpanel zu organisieren. Wenn wir später nach diesem Precomp suchen und ihn im Ordner Screens sehen , werden Sie wissen, warum er dort ist Ordnung, zurück zum Precomp In Ordnung, zurück zum Precomp . Jetzt müssen wir ihm einen Namen geben Um die Dinge zu organisieren, beginnen wir den Namen mit S eins, was für Bildschirm eins steht. Dann fügen wir eine Kopfzeile hinzu. Nun, nachdem wir die relevanten Ebenen zusammengesetzt haben, müssen wir die Vorkomposition zusammenklappen und sie in eine Ebene mit drei D umwandeln Schließlich müssen wir sicherstellen, dass der Ankerpunkt für diesen Precomp perfekt zentriert ist Dazu können wir auf dem Mac die Strg- oder Befehlstaste gedrückt halten und auf das Ankerpunkt-Tool doppelklicken während der Precomp Und bevor wir weitermachen, können wir diesen Precomp sperren Großartig. Lassen Sie uns nun mit dem nächsten Abschnitt befassen, nämlich den drei Feldern unter der Überschrift. Nehmen wir an, wir möchten für jeden dieser drei Abschnitte eine Animation erstellen . In diesem Fall ist es eine gute Idee, die Ebenen , die zu jedem Abschnitt gehören, einzeln zusammenzusetzen jedem Abschnitt gehören, einzeln Für die Benennung beginnen wir erneut mit S eins und können dann so etwas wie Panel eins hinzufügen Sobald das erledigt ist, reduzieren wir den Precomp und konvertieren ihn in eine Drei-D-Ebene Schließlich müssen wir sicherstellen, dass der Ankerpunkt für diesen Precomp perfekt zentriert ist. Großartig, großartig Machen wir das für den Rest der Abschnitte weiter. Ein weiterer Trick, um den Auswahlprozess zu vereinfachen, besteht darin, die neu erstellten Precomps vorübergehend auszuschalten Natürlich müssen Sie diese Schritte nicht in genau dieser Reihenfolge ausführen Sie können zunächst alle relevanten Ebenen zusammenstellen und erst danach die Ankerpunkte für jede Ebene anpassen die Ankerpunkte für jede Ebene Sie müssen dies nicht unbedingt unmittelbar nach der Unterkomposition tun unmittelbar nach der Unterkomposition tun Okay, jetzt, wo alle Ebenen vorkomponiert wurden, kann ich alle Vorkompositionen in drei D-Ebenen umwandeln, sie zusammenklappen und dann den Ankerpunkt für jede 11 nach der anderen anpassen der anderen Sobald das erledigt ist, haben wir ein sehr gut organisiertes Setup für Animation der einzelnen Bereiche dieses Benutzeroberflächenbildschirms. Auf diese Weise können Sie ganz einfach ein beliebiges Precomp eingeben und die darin enthaltenen Objekte getrennt von den übrigen Ebenen animieren getrennt von den übrigen Dies ist der richtige Weg, um komplexe Benutzeroberflächen-Panels mit vielen verschiedenen Abschnitten und vielen Ebenen, die zu jedem Abschnitt gehören , zu handhaben vielen verschiedenen Abschnitten und vielen Ebenen, die zu jedem Abschnitt gehören , zu In unserem Fall bin ich mir nicht sicher, ob wir jeden einzelnen Abschnitt dieses Bildschirms animieren Vielleicht überlasse ich dir das als Hausaufgabe am Ende des Kurses Ich möchte nicht zu viel Zeit damit verbringen kleine Abschnitte zu animieren Ich konzentriere mich lieber auf wichtigere Konzepte, die Projekte wie dieses relevant sind Okay, bevor wir diese Lektion abschließen, sollten wir sicherstellen, dass unser Projektpanel sauber und übersichtlich ist. Wie Sie sehen können, sind wir bereits dabei, eine Menge neuer Vorarbeiten und Inhalte zu erstellen , und in den kommenden Lektionen werden wir noch mehr Das ist völlig normal. Das passiert auch in realen Projekten. Deshalb ist es so wichtig , alles sauber und organisiert zu halten , damit Sie problemlos durch Ihr Projekt navigieren können . Wie bereits erwähnt, wurden die Vorkompositionen, die wir auf dem Bildschirm erstellt haben , automatisch im Ordner Screens platziert, da bei der Vorkomposition dieser Ebenen eine der Vorkompositionen in diesem Ordner ausgewählt wurde bei der Vorkomposition dieser Ebenen eine der Vorkompositionen in diesem Ordner ausgewählt Ich möchte jedoch nicht, dass sich der Abschnitt Precomps im Ordner Screens befindet. Also wähle ich den Ordner precomps aus und erstelle darin einen neuen Ordner namens panels. Dann verschiebe ich alle Abschnittsvorkompositionen, die wir erstellen, in Es sieht schon viel besser aus. Die Precomps, bei denen es sich nicht um Section-Precomps handelt, können wir direkt im Precomps-Hauptordner platzieren im Precomps-Hauptordner Lassen Sie uns auch das Video Board Precomp dorthin ziehen. Und für die Master-Komposition in den Precomps der Hauptszene lassen wir sie draußen, damit sie leicht zugänglich Ordnung, jetzt ist alles gut organisiert In Ordnung, jetzt ist alles gut organisiert. Lass uns das Projekt speichern Und damit beenden wir diese Lektion. Speichern Sie Ihr Projekt noch einmal , bevor Sie mit dem nächsten fortfahren, wo wir weiter an der Szene arbeiten. Es wird großartig werden. Wir sehen uns dort. 15. Fortsetzung von Szene 4 – Übergang von Logo und Dashboard: Komm zurück. In dieser Lektion werden wir weiter an Szene vier arbeiten. Schließen wir zuerst alle Vorkompositionen , die wir nicht verwenden werden Wir können das Dashboard auch vor der Erstellung schließen , da wir hier nichts animieren werden. In Ordnung Und jetzt können wir die Logoanimation wieder einschalten und mit der Arbeit am Intro dieser Szene beginnen Zuerst gehe ich zurück zur Videotafel, um mich daran zu erinnern , wie lang diese Szene sein sollte Ich sehe, dass sie etwa bei Sekunde 11 beginnen und etwa bei Sekunde 15 und 20 enden sollte . Das bedeutet, dass ich 4 Sekunden und 20 Frames Zeit habe , um die Logoanimation und den Dashboard-Bildschirm zu präsentieren , bevor ich zum nächsten Teil übergehe, in dem wir die Katze und die Szene mit geteilten Bildschirmen sehen die Katze und die Szene mit geteilten Bildschirmen Lassen Sie uns vor diesem Hintergrund zur Szene vier zurückkehren und zuerst die Dashboard-Vorkomposition irgendwo in der Nähe platzieren Und jetzt, bis zu diesem Punkt, animieren wir das Logo vor der Erstellung so, dass es nach unten und nach oben skaliert wird, damit wir etwas Platz haben, um das Dashboard aufzurufen wir etwas Platz haben, um Lassen Sie uns zunächst mit der Skalierungsanimation beginnen. Nehmen wir an, wir gehen nach der Einführung des Logos eine Sekunde vorwärts, und dann wird das Logo auf, sagen wir, 80 oder vielleicht 75% verkleinert sagen wir, 80 oder vielleicht 75% Und jetzt gehen wir zur zweiten Nummer eins und erstellen eine Positionsanimation Ich werde hier den ersten Keyframe erstellen. Wir können drücken, um alle Keyframes zu sehen, die wir hier haben. Dann gehe ich zu Sekunde zwei über und bringe das Logo irgendwo im Bild nach oben Großartig. Lassen Sie uns nun die neuen Keyframes auswählen, die wir erstellt haben, und sie einfach vereinfachen. Gehen wir nun zum Speedgraph-Editor und passen zunächst die Keyframe-Geschwindigkeit der vorherigen Skala so an, wie sie Die Geschwindigkeit an diesem Punkt hat sich geändert weil wir den Keyframe leicht lockern konnten Wenn wir das tun, ist es also wichtig, die Geschwindigkeit der gesamten Animation zu überprüfen . In Ordnung. Lassen Sie uns jetzt diese Bewegung machen, langsam beginnen und gegen Ende an Geschwindigkeit gewinnen. Mal sehen, wie das aussieht. Das sieht vorerst okay aus. Lassen Sie uns weiter am nächsten Teil arbeiten, nämlich der Erstellung der Intro-Animation für das Dashboard-Precomp, die auch ab dem zweiten beginnen kann Bringen wir es also zuerst hierher und öffnen jetzt die Rotationseigenschaft, um die X-Rotation wieder auf Null zu bringen X-Rotation wieder auf Und jetzt, da ich weiß, dass ich später eine gewisse Schärfentiefe für diesen Teil hinzufügen möchte, werde ich eine neue Kamera in der Szene erstellen. Wir können die Kamera mit einem Knoten verwenden. Und für die Linsengröße wählen wir 35 MM, weil wir dann das Optimum haben Und jetzt öffnen wir die Kameraoptionen und stellen sicher, dass die Schärfentiefe vorerst ausgeschaltet ist Wir möchten nicht arbeiten, wenn es eingeschaltet ist , da dies den Computer verlangsamen kann. Wie ich bereits erwähnt habe, werden wir erst, wenn der Animation der wesentlichen Animation fertig sind, wir mit der Animation der wesentlichen Animation fertig sind, unserem Projekt den letzten Schliff geben, oder? Bevor wir weitermachen, taggen wir das Logo Precomp in einer anderen Farbe. Und jetzt fangen wir an, an der Intro-Animation für das Dashboard zu arbeiten der Intro-Animation für das Also können wir zuerst mit der Animation der Position beginnen. Und da wir wissen, dass der Precomp genau hier am Ende des Animationsfilms platziert werden sollte , können wir zu Sekunde zwei übergehen und hier den ersten Keyframe erstellen Als Nächstes kehren wir zum zweiten zurück und ziehen den Pre-Comp aus dem Frame nach unten Zu diesem Zeitpunkt können wir es auch etwas näher an die Kamera heranbringen , um eine etwas interessantere Bewegung zu erzielen Ordnung, sobald wir mit der Animation der Position fertig sind , fügen wir nun eine Rotationsanimation Versuchen wir zunächst herauszufinden, wie die Rotation am Ende der Intro-Animation aussehen soll am Ende der Intro-Animation aussehen soll Lassen Sie uns die X-Achse vorerst auf -25 setzen. Bevor wir mit der Rotationsanimation fortfahren, denke ich, dass wir das Dashboard beim letzten Keyframe herunterfahren können beim letzten Keyframe herunterfahren Und jetzt sehe ich, dass die Logos zu groß sind. Lassen Sie uns also die Keyframes des Logo-Precomps öffnen und Bedarf den Maßstab und die Position anpassen Jetzt haben wir also viel mehr Platz für das Dashboard, und damit können wir es wieder animieren Zu diesem Zeitpunkt möchte ich, dass das Dashboard irgendwo hier platziert wird Und jetzt zur Drehung, ich möchte, dass sie in die Szene eintritt wenn die X-Rotation -90 ist Also erstelle ich beim zweiten einen Keyframe mit diesem Wert. Als Nächstes gehe ich zu Sekunde zwei und setze den Wert auf -25. Großartig. Jetzt können wir damit beginnen, die Animation zu verbessern und zu sehen, wie die Bewegung aussieht, wenn wir die Geschwindigkeit der Positions- und Rotationsanimation so anpassen , dass sie langsam startet, an Geschwindigkeit zunimmt und dann gegen Ende langsamer wird. Schauen wir uns an, wie das insgesamt aussieht. Ich denke, die Animation ist zu schnell. Gehen wir also zu Sekunde drei über und bringen die letzten Keyframes des Logos und der Dashboard-Pre-Comps auf diesen Zeitpunkt Sehen wir uns das noch einmal an. Ordnung. Ich finde, es sieht viel besser aus, aber meiner Meinung nach die Geschwindigkeit der beiden Pre-Comps sollte die Geschwindigkeit der beiden Pre-Comps am Ende exakt gleich sein Wählen wir also alle letzten Keyframes und drücken F neun, um die Beschleunigung zurückzusetzen Und jetzt gehen wir zum Diagrammeditor und lassen die Bewegung langsam beginnen Steigern Sie in der Mitte an Geschwindigkeit und verlangsamen Sie die Geschwindigkeit gegen Ende. Vergessen wir nicht den vorherigen Skalierungs-Keyframe des Logo-Precomp Ich sage es noch einmal. Das ist ein realistischer Animationsprozess. Wir versuchen immer zu sehen, wie die Animation mit unterschiedlichen Geschwindigkeiten und unterschiedlichen Zeitpunkten aussehen wird , bis wir etwas bekommen , das uns gefällt. Großartig. Nachdem das erledigt ist, gehen wir zurück zur Videotafel und schauen, was wir als Nächstes tun müssen. Wie Sie sehen können, müssen wir diese Szene für das Intro der Katze vorbereiten diese Szene für das Intro der Katze Lassen Sie uns in diesem Sinne zur Szene zurückkehren und weiter daran arbeiten Lassen Sie uns zunächst mit der Erstellung der Outtro-Animation für das Logo Lassen Sie uns bei Sekunde vier stehen und das Logo aus dem Rahmen herausholen Wenn wir damit fertig sind, gehen wir zum Diagrammeditor und passen die Geschwindigkeit an, um eine etwas gleichmäßigere Bewegung zu erzielen Ja, ich finde es sieht gut aus. Und jetzt können wir weiter daran arbeiten, die Position des Armaturenbretts vor der Installation anzupassen . also noch einmal sicher, dass wir bei Sekunde vier stehen , und setzen wir zuerst den X-Rotationswert auf Null Passen Sie danach den Positionswert an. An diesem Punkt können wir das Safe Action Grid verwenden, um zu überprüfen, ob wir die Pre-Comp an die richtige Stelle verschieben wir sicher, dass der Bildschirm perfekt im Rahmen zentriert ist perfekt im Rahmen zentriert Wie Sie sehen können, ist es vertikal perfekt zentriert , aber horizontal ist es nicht zentriert. Das kann uns die ganze Zeit passieren. Manchmal vergessen wir die Objekte in der Szene auszurichten, aber es ist überhaupt kein Problem, das zu beheben Alles, was wir tun müssen, ist sicherzustellen, dass wir genau auf einem der Positions-Keyframes für diese Precomp stehen genau auf einem der Positions-Keyframes für diese Klicken Sie dann auf den Positionswert , um alle Keyframes auszuwählen und die Positionswerte anzupassen, bis der Precomp genau in der Mitte zentriert Wenn Sie dies tun, während Sie sich nicht auf einem der Positions-Keyframes befinden , erzeugen Sie einen überflüssigen Keyframe erzeugen Sie Ordnung. Also jetzt denke ich, dass alles okay aussieht. Wir können Sie vor der Erstellung auf dem Armaturenbrett drücken , um die Keyframes bequemer zu sehen, und die Geschwindigkeit dieser Bewegung an die Logo-Pre-Comp-Bewegung bequemer zu sehen, und anpassen an die Logo-Pre-Comp-Bewegung Achten Sie auf das Rotationsdiagramm . Wie Sie sehen, habe ich die Anpassung der Geschwindigkeit verpasst. Deshalb stelle ich sicher, dass ich die Rotationseigenschaft auswähle und die Geschwindigkeit an meine Bewegung anpasse . Mal sehen, wie das aussieht. Ich denke, das Armaturenbrett am Ende der Animation ist zu nah an der Kamera, also bleibe ich beim letzten Keyframe stehen und passe die Positionsachse dieses Precomps Ja, ich finde, es sieht ein bisschen besser aus. Gehen wir jetzt zurück zur Videotafel und erinnern uns daran, was als Nächstes zu tun ist. Ordnung. Also müssen wir jetzt die Intro-Animation der Katze starten Und bevor wir das tun, kehren wir zu unserer Szene zurück und speichern das Projekt, um den gesamten Fortschritt zu speichern , den wir bis jetzt gemacht haben Wenn wir damit fertig sind, öffnen Sie den Assets-Ordner, den Sie für mich heruntergeladen haben, und Sie werden es dort sehen, um das lustige Geschenk öffnen Sie den Assets-Ordner, den Sie für mich heruntergeladen haben, und Sie zu finden. Und bevor ich es in das Projekt ziehe, möchte ich dir zeigen, woher ich dieses Geschenk habe Es gibt eine Website namens Giffi, auf der du jede Art von lustigen Memes und Geschenken herunterladen kannst, die du in jede Art von lustigen Memes und deinen Projekten verwenden kannst Ich werde den Link zu dieser Website in der PDF-Datei mit dem Namen Inks belassen PDF-Datei mit dem Namen , die Sie im Ordner My Assets finden Also habe ich nur im Suchfeld nach CAT gesucht und dann darüber nachgedacht, und dann darüber nachgedacht, welches Geschenk am besten zu meinem Projekt passen würde. Ich entschied mich für dieses , also habe ich darauf geklickt. Dann bemerkte ich, dass dieses spezielle GIF nicht in einer Schleife abgespielt wurde Und zu meiner Überraschung fand ich, als ich mir die ähnlichen Geschenke darunter ansah, dasselbe , aber es die ähnlichen Geschenke darunter ansah, dasselbe , aber es lief in einer perfekten Schleife hin und her. Also habe ich darauf geklickt und es auf meinen Computer heruntergeladen. In Ordnung. Also lass uns diesen Jif jetzt in unser Projekt ziehen. Und um dieses GIF nun in einem Precomp zu haben, ziehen wir es auf das Precomp-Symbol hier unten Auf diese Weise wird automatisch ein neuer Precomp mit dieser Ebene erstellt dieser Großartig. Und jetzt drücken wir Control oder Command K, um die Einstellungen für diese Zusammenstellung einzugeben und ihre Größe anzupassen Wie Sie sehen können, wird die PreComp-Größe automatisch entsprechend der Größe der Ebene erstellt entsprechend der Größe der Ebene Lassen Sie uns die Breite und Höhe auf 500 skalieren. Fantastisch. Und jetzt skalieren wir die Ebene so , dass sie der neuen Kompositionsgröße entspricht. Großartig. Lassen Sie uns als Nächstes dafür sorgen, dass dieses Filmmaterial ein bisschen besser aussieht. Zunächst können wir den Farbton und den Sättigungseffekt anwenden und die Sättigung skalieren Danach können wir den Kurveneffekt hinzufügen und das Filmmaterial etwas kontrastreicher gestalten Und jetzt, seit wir die Ebene skaliert haben, hat sie etwas an Qualität verloren. Um sicherzustellen, dass wir hier die beste Qualität erhalten, können wir die Qualitäts - und Sampling-Funktion aktivieren Großartig. Also, sobald das erledigt ist, wollen wir uns mit der Dauer dieser GF befassen. Wie Sie sehen können, beträgt die ursprüngliche Dauer vorerst 2 Sekunden und fünf Frames. Also müssen wir zuerst die Dauer des Spiels verlängern. Lass uns dafür sorgen, dass es 10 Sekunden dauert. Großartig. Aber jetzt, wie Sie sehen können, endet unser Jif bei 2 Sekunden und fünf Frames In unserem Fall muss es etwas länger dauern. verlängern After Effects gibt es eine schnelle Möglichkeit, die Dauer eines Loop-Videos zu wir dazu zunächst Wählen wir dazu zunächst diese Ebene im Projektfenster Wenn Sie fertig sind, klicken Sie mit der rechten Maustaste darauf und gehen Sie zu Filmmaterial interpretieren. Klicken Sie dann auf Main. Und jetzt, da wir ein Loop-Video haben, können wir den Loop mehr als einmal abspielen lassen Stellen wir es auf zehn ein. Großartig. Und jetzt müssen wir nur noch die Ebene erweitern. Und wie Sie sehen können, wird das Video weiter abgespielt Lassen Sie uns die Ebene bis zum Ende der Timeline erweitern . Fantastisch. Nachdem das erledigt ist, kehren wir zu unserer Szene zurück, und bevor wir diesen Pre-Comp hineinbringen , passen wir den Namen Nennen wir es Katzengeschenk. Lassen Sie uns das Geschenk auch in den Ordner Assets verschieben. Okay, jetzt bringen wir den Pre-Comp in die Szene und lassen Sie uns weiter daran arbeiten Lassen Sie uns zuerst eine gute Position dafür finden. Laut der Videotafel sollte es irgendwo hier sein. Als Nächstes fügen wir für diesen Pre-Comp abgerundete Ecken hinzu, damit er zu unserem Gesamtbild der Szene passt Geben Sie dazu den Precomp ein und stellen Sie nun sicher, dass keine Ebene Wählen Sie dann das Rechteckwerkzeug aus und doppelklicken Sie darauf. Dadurch wird ein Rechteck erstellt , das perfekt zur COM-Größe passt. Sie als Nächstes sicher, dass diese Form eine Füllung hat und der Strich ausgeschaltet ist. Dann lassen Sie uns die Ecken abrunden. Jetzt ändern wir den Namen dieser Ebene in Maske, und jetzt erstellen wir die GIF-Ebene, indem den Alphakanal dieser Form verwenden. Dadurch wird das Geschenk nur innerhalb der Grenzen der Form sichtbar . Auf diese Weise können wir schöne abgerundete Ecken für das Geschenk erhalten, die wir später bei Bedarf anpassen können. Ich bevorzuge diese Methode, anstatt eine Maske auf der GIF-Ebene zu erstellen , die nicht angepasst werden kann. Ordnung. Und jetzt, bevor wir weitermachen, passen wir die Sättigung ein wenig , weil sie meiner Meinung nach zu stark ist Ich werde auch die Kurven ein wenig anpassen. Ordnung. Und jetzt müssen wir eine Intro-Animation für dieses Geschenk erstellen eine Intro-Animation für dieses Aber bevor ich das mache, möchte ich zurück zur Videotafel gehen und überprüfen, wie lange dieser Teil dauern sollte Es beginnt also bei den zweiten 15 und 20 Bildern und endet bei den zweiten 17 und 15 Bildern. Das bedeutet, dass dieser gesamte Teil nicht länger als 2 Sekunden dauern muss . Kehren wir also zum Katzengeschenk zurück und erstellen mit der Eigenschaft scale eine einfache Intro-Animation Und damit es etwas interessanter aussieht, können wir auch eine maßstabsgetreue Animation für die Maske erstellen . Großartig. Sobald wir das Intro haben, gehen wir eine Sekunde weiter und erstellen eine Otro-Animation dafür Wir können die Keyframes der Intro-Animation kopieren, sie hier einfügen und dann die Keyframes umkehren sie hier einfügen und dann Lassen Sie uns nun die Keyframes einfach vereinfachen. Und im Diagrammeditor sorgen Sie dafür, dass das Intro schnell und das Outtro Mal sehen, wie das aussieht. Ordnung. Sobald wir die Intro- und Outro-Animation haben, dieser ganze Teil, wie Sie sich vielleicht erinnern, sollte dieser ganze Teil, wie Sie sich vielleicht erinnern, nicht länger als 2 Sekunden dauern Lassen Sie uns also zu diesem Zeitpunkt stehen und die letzten beiden Schlüsselbilder von hier aus starten Und bevor wir das tun, ist mir gerade beim Betrachten der Timebox aufgefallen , dass die Bildrate dieser beim Betrachten der Timebox aufgefallen , dass die Bildrate dieser Pre-Comp nicht 30 Bilder pro Sekunde beträgt Das ist passiert, weil wir diese Vorkomposition mit der automatischen Methode erstellt haben , indem wir das Asset auf das Pre-Comp-Symbol im Projektfenster gezogen das Pre-Comp-Symbol im Die Vorkomposition wird anhand der Informationen der Datei erstellt , die Sie in die Datei gezogen Es ist wichtig, das zu wissen, also habe ich beschlossen, Ihnen diesen Prozess zu zeigen Lass uns das ganz schnell beheben. Geben Sie die Comp-Einstellungen ein und stellen Sie die Bildrate auf 30. Ordnung? Sobald das erledigt ist, starten wir die Outtro-Animation ab dem zweiten und den 15 Frames Sie hat die von uns geplante Dauer von zwei Sekunden überschritten, ist aber okay Wir können sehen, ob es zum allgemeinen Timing der Szene passt, und falls es sich zu lang anfühlt, können wir es später anpassen. Lassen Sie uns diese Vorkomposition zunächst mit einer anderen Farbe kennzeichnen und den richtigen Zeitpunkt für den Start finden den richtigen Zeitpunkt für den Start An diesem Punkt platziere ich die Pre-Comp einfach an einer Stelle, die ich für am besten halte, und schaue mir dann die Gesamtanimation Wenn es sich nicht richtig anfühlt, ziehe ich es auf einen anderen Zeitpunkt. In unserem Fall denke ich, dass wir diesen Pre-Comp ab Sekunde vier beginnen können diesen Pre-Comp ab Sekunde vier beginnen Ordnung? Ich denke, das ist ein guter Zeitpunkt, um mit diesem Precomp zu beginnen, aber wie Sie sehen können, fühlt sich das Gesamtbild der Szene etwas statisch an Um es zu verbessern, können wir mithilfe der Position-Eigenschaft ein leichtes Ein - oder Auszoomen für die Kamera erstellen mithilfe der Position-Eigenschaft ein leichtes Ein - oder Auszoomen für die Kamera Gehen wir also zum Anfang der Animation und erstellen dort den ersten Keyframe Gehen wir als Nächstes zu einem Zeitpunkt, an dem die Animation definitiv fertig sein wird , und erstellen wir eine sanfte Zoom-Out-Animation Mal sehen, wie das alles zusammen aussieht. Wie Sie sehen können, verleiht es dem Gesamtbild etwas mehr Bewegung. Falls das Verkleinern kaum wahrnehmbar ist, können Sie den letzten Keyframe so anpassen dass sich die Kamera weiter rückwärts bewegt Schauen wir uns diese Animation noch einmal an. Ich denke, es sieht viel besser aus, aber meiner Meinung nach können wir mit der Geschenkanimation etwas früher beginnen , sagen wir, ab Sekunde drei, weil ich mich erinnere, dass diese gesamte Szene nicht länger als 5 Sekunden dauern sollte. Ordnung. Wenn das erledigt ist, können wir das Projekt speichern und weitermachen, um zu sehen, wie diese Szene zusammen mit den restlichen Szenen in der Master Comp aussehen wird den restlichen Szenen in der Master Comp Gehen wir also zurück zur Master Comp und bringen Szene vier in die An diesem Punkt müssen wir nur den besten Zeitpunkt für den Beginn dieser Szene finden Zeitpunkt für den Beginn dieser Szene Ich beobachte aufmerksam, was in der vorherigen Szene passiert , und versuche , die nächste Szene entsprechend zu starten. Nachdem ich einen guten Zeitpunkt gefunden habe, ist es eine gute Idee, sich die Animation anzusehen und zu sehen, ob der Übergang gut funktioniert. Meiner Meinung nach sieht es gut aus, also werde ich mir die Animation jetzt noch einmal ansehen. Aber dieses Mal, während ich mir das Voiceover anhöre, um zu sehen, ob alles perfekt synchronisiert ist Dies ist sehr wichtig , bevor Sie mit der Animation der nächsten Szene fortfahren. Ich suche Hilfe Ich habe One Point getroffen. Die Plattform , die das Projektmanagement so einfach macht, sogar Ihre Katze es mit einem Punkt erledigen könnte. Ordnung. Nachdem ich mir die Animation mit dem Voiceover angesehen hatte, fiel mir auf, dass Szene Nummer vier etwas früher beginnen sollte Lasst uns diese Pre-Comp ab Sekunde 11 beginnen und sie uns noch einmal ansehen , während wir uns das Voiceover anhören . Iss Die Plattform, die Projektmanagement so einfach macht, es sogar Ihre Katze kann. Mit einem Punkt hat er einen Punkt erreicht. Die Plattform, die P. ausmacht. Ja, ich denke, wir sollten es so lassen. Das bedeutet, dass zu diesem Zeitpunkt die dritte Szene bereits enden sollte. Geben wir also diese Vorkomposition ein und öffnen zuerst alle Keyframes, die wir hier haben. Lassen Sie uns nun damit beginnen, den letzten Animationsteil um ein paar Frames zu verkürzen den letzten Animationsteil um ein paar Frames Wählen Sie alle Schlüsselbilder und verschieben Sie sie zehn Frames rückwärts Wir können diese anderen Keyframes auch ein paar Frames nach hinten verschieben Aber lassen wir es vorerst so, wie es ist, und schauen wir uns an, wie die Animation aussieht, nachdem wir den ersten Animationsteil angepasst Es sieht gut aus. Bevor wir weitermachen, vergessen wir nicht, die Klickanimation so anzupassen , dass sie ab diesem Zeitpunkt beginnt. Ordnung. Und jetzt machen wir die Outtro-Animation etwas schneller, indem wir die letzten Keyframes ein paar Frames nach hinten bringen die letzten Keyframes ein paar Frames Bringen wir sie auf die 1-Sekunden-Marke. Großartig. Und jetzt, nach der Anpassung der Animation, ist es immer eine gute Idee, sich die Bewegung noch einmal anzusehen und zu sehen, ob sie sich richtig anfühlt Wir müssen sicherstellen, dass es nicht zu schnell oder zu langsam ist. Ich denke, der Antrag ist okay. Gehen wir jetzt zurück zur Master-Komposition und sehen uns die Animation noch einmal mit dem Voiceover Ich suche Hilfe. Ich habe einen Punkt getroffen. Ich suche Hilfe. Ich habe einen Punkt getroffen. Die Plattform ist nicht großartig. Sobald wir also das Timing gefunden haben, das zum Voiceover passt, können wir jetzt die vierte Szene aufrufen und ihr eine Hintergrundebene hinzufügen Lassen Sie uns die Hintergrundanimation mit Farbverlauf verwenden , die wir für dieses Projekt erstellt haben Sie finden sie im Ordner „ Assets“ im Projektfenster. Lassen Sie uns nun ein schönes Intro für diesen Hintergrund erstellen. Am liebsten erstelle ich eine Intro-Animation für eine Hintergrundebene, indem ich eine Ellipsenmaske erstelle und eine Intro-Animation für eine Hintergrundebene, indem ich eine Ellipsenmaske erstelle und sie animiere. Lass mich dir zeigen, was zunächst sicher, dass die Ebene ausgewählt ist , und wählen Sie dann das Ellipsenwerkzeug Doppelklicken Sie auf das Ellipse-Werkzeug, um eine Ellipsenmaske für diese Ebene zu erstellen eine Ellipsenmaske für Doppelklicken wir nun auf die Maske und passen sie an, damit sie proportionaler aussieht Halten Sie dabei den Controller-Befehl gedrückt. Dank des sicheren Aktionsrasters kann ich sehen, wo ich die Form der Maske anpassen muss, um ein abgerundetes Aussehen zu erzielen . Großartig. Sobald das erledigt ist, öffnen wir die Maskeneigenschaften und animieren die Maskenerweiterungseigenschaft animieren die Maskenerweiterungseigenschaft Wie Sie sehen können, entsteht dadurch eine interessante Form für die Maske Mir gefällt das Aussehen der Ellipsenform sehr gut. In Ordnung. Stellen wir also den Expansionswert bis wir die Ebene nicht mehr sehen. Stellen Sie ihn nicht höher als nötig ein. Erstellen Sie nun den ersten Keyframe zu Beginn der Animation Gehen Sie danach 1 Sekunde vorwärts und passen Sie den Wert an, bis wir die gesamte Hintergrundebene sehen Und noch einmal: Erhöhen Sie den Wert nicht weiter als nötig. Ordnung. Lassen Sie uns jetzt die Keyframes vereinfachen und dafür sorgen, dass diese Animation von Anfang an schnell beginnt. Mal sehen, wie das aussieht Das sieht toll aus. Das Letzte, was wir hier tun können, ist, einen kleinen Versatz zwischen der Hintergrund-Intro-Animation und den restlichen Animationsteilen in dieser Szene zu erzeugen einen kleinen Versatz zwischen der Hintergrund-Intro-Animation und den restlichen Animationsteilen in dieser Szene Lassen Sie uns die anderen Vorkompositionen ab Bild zehn beginnen. Vielleicht Bild fünf und schauen wir zuerst, wie es mit der Verzögerung von fünf Bildern aussehen wird es mit der Verzögerung von fünf Bildern aussehen wird. Ich finde, es sieht gut aus. Gehen wir jetzt zurück zum Master Comp und schauen ihn uns zusammen mit dem Voiceover an. Treffen Sie Die Plattform, die das Projektmanagement so einfach macht Mir ist aufgefallen, dass der CAT-Precomp eigentlich bei etwa 15 Sekunden beginnen sollte eigentlich bei etwa 15 Sekunden beginnen Lassen Sie uns also die Abspielposition auf 15 Sekunden und zehn Frames verschieben, Szene vier aufrufen und ein paar kleine Anpassungen vornehmen Lassen Sie uns zunächst den Cat-Precomp von diesem Zeitpunkt an startet Großartig. Lassen Sie uns nun die Dashboard-Animation hier etwas langsamer machen . Wenn sie bei den zweiten drei und fünf Frames beginnt, beenden wir sie bei den zweiten fünf und fünf Frames, was eine exakt 2 Sekunden lange Animation sein wird. Schauen wir uns die Animation noch einmal an und stellen sicher, dass sie sich nicht zu langsam anfühlt. Ich denke, es ist okay. Gehen wir jetzt zurück zur Master-Komposition und schauen uns das Ganze noch einmal mit dem Voiceover an, um zu überprüfen, ob alles perfekt synchronisiert ist Treffen Sie einen Punkt. Die Handlung. Die Form, die die Zeugung so einfach macht. Sogar deine Katze macht das . Mit einem Punkt, mach es mit einem Punkt. Fantastisch. Ich finde, alles funktioniert super. Jetzt können wir mit der Erstellung der Otro-Animation fortfahren, die etwa in Sekunde 17 erfolgen muss Lassen Sie uns vorerst das Voiceover ausschalten, damit es uns bei der Überprüfung der Otro-Animation nicht ablenkt Daran werden wir in der nächsten Lektion arbeiten. Es wird großartig werden. Also wir sehen uns dort. Und bevor Sie sich die nächste Lektion ansehen, vergessen Sie nicht, eine zehnminütige Pause einzulegen, um sich zu erfrischen, bevor wir weitermachen. Wir sehen uns in der nächsten. 16. Erstellen von Szene 5 – Animation zum Teilen von Bildschirmen: Ich bin zurück. Beginnen wir diese Lektion , dass wir auf der Videotafel nachschauen, welche Szene wir als Nächstes animieren müssen Die nächste Szene ist der Teil in dem wir alle Benutzeroberflächenbildschirme sehen, und sie beginnt bei den zweiten 17 und 15 Frames Nun wollen wir sehen, wo es endet. Es endet bei den zweiten 19 und 15 Frames. Das bedeutet, dass diese Animation 2 Sekunden dauern sollte. Eine kurze Erinnerung daran , dass ich die Idee für diese Komposition mit geteilten Bildschirmen hatte, als ich mir ein großartiges Referenzvideo auf YouTube angesehen habe. Es erinnert mich daran, wie toll es ist, viele andere Projekte zu sehen , um Inspiration zu bekommen In Ordnung, zurück zur Lektion. Eine weitere Sache, die wir von der Videotafel lernen können , ist , dass wir nach der Animation der geteilten Bildschirme den Bildschirm des Projekts aufrufen müssen diesem Hintergrund kehren wir zu unserer Szene zurück und animieren in dieser Zeitleiste weiter , anstatt aus offensichtlichen Gründen eine neue Pre-Comp zu erstellen Gründen eine neue Pre-Comp Da wir die Animation fortsetzen müssen, während immer noch den Dashboard-Bildschirm für den geteilten Animationsteil sehen , ist es besser, weiter an dieser Zeitleiste zu arbeiten und keine neue Szene zu erstellen Und bevor wir weitermachen, organisieren wir hier unsere Zeitleiste. Zunächst können wir das Logo vor der Erstellung so weit zuschneiden , dass wir es in der Szene nicht mehr sehen Danach können wir dasselbe für den Cat Pre Comp tun. Finden wir also den Zeitpunkt, an dem diese Animation bereits beendet und schneiden wir diese Ebene bis zu diesem Punkt zu Lassen Sie uns abschließend den Pre-Comp hierher bringen , um ein chronologischeres Layout in unserer Timeline zu haben Lassen Sie uns nun zu dem Zeitpunkt kommen, an dem wir denken, dass es ein guter Zeitpunkt sein wird, um zum nächsten Animationsteil überzugehen guter Zeitpunkt sein wird, um zum , der alle Benutzeroberflächenbildschirme präsentiert Wir können ab Sekunde sieben beginnen. Wenn das erledigt ist, öffnen wir den Ordner precomps und den Ordner Screens darin, um den UI-Bildschirm des Projekts zu finden , in der nächsten Szene präsentiert werden muss Und jetzt bringen wir es auf unsere Timeline. Und überlegen Sie sich, wie Sie den Bildschirm mit den restlichen Bildschirmen für die Split-Screen-Szene organisieren können. Und bevor wir das tun, öffnen wir auch die Kameraposition und bringen das letzte Keyframe auf diesen Zeitpunkt , denn ab diesem Zeitpunkt erstellen wir einen Übergang für den nächsten Animationsteil Ordnung. Und jetzt bringen wir die Projekte vor der Fertigstellung auf den Zeitplan Als Nächstes konvertieren wir diese Ebene eine Drei-D-Ebene und suchen den Platz dafür in unserem Drei-D-Raum Um zu sehen, was wir besser machen, ändern wir die Ansicht in eine benutzerdefinierte Ansicht, sodass wir den Raum mit den drei D klarer erkennen können. Wie Sie sehen können, befindet sich das Projekt Pre Comp jetzt vor dem Dashboard, was wir nicht benötigen Wir wollen, dass es dahinter steckt. Und da wir das später wissen, werden wir den Rest der Bildschirme hinzufügen. diesem Zweck ist es eine gute Idee, den Abstand zwischen den einzelnen Bildschirmen gleich zu halten . Sehen wir uns zunächst den Positionswert des Dashboard-Precomp Lassen Sie uns nun genau diesen Wert für das Projekt Precomp festlegen, sodass er an der Dashboard-Position ausgerichtet wird Lassen Sie uns nun das Wertefeld als Taschenrechner verwenden und entscheiden, wie weit der Projektbildschirm vom Dashboard-Bildschirm entfernt sein soll Projektbildschirm vom Dashboard-Bildschirm entfernt Versuchen wir, es um 250 Pixel zu verschieben. Ich denke, die Entfernung ist okay. Und jetzt fahren wir fort, um den Rest der Bildschirme zur Szene zu bringen . Und jetzt möchte ich meine Gedanken mit dir teilen. Ich weiß, dass die restlichen Bildschirme in dieser Szene für eine sehr kurze Zeit präsentiert werden müssen. Ich weiß auch, dass es für After Effects schwierig sein wird, eine Vorschau der Szene anzuzeigen, wenn ich alle Vorkompositionen der Bildschirme in die Timeline einfüge Vor diesem Hintergrund halte ich es für eine gute Idee, anstatt die Vorkompositionen der Bildschirme zu verwenden, um die KI-Dateien der Designs dieser Bildschirme zu verwenden, die wir zu Beginn des Projekts importiert haben Für After Effects ist es viel einfacher, eine Illustrator-Datei zu rendern Als ein Precomp mit einer Reihe von Illustrator-Dateien. Ich habe das nicht für den Projektbildschirm gemacht, weil ich weiß , dass dieser Bildschirm in meinem nächsten Animationsteil animiert werden sollte in meinem nächsten Deshalb habe ich die Vorkomposition des Bildschirms mitgebracht und nicht die abgeflachte Illustrator-Ebene In Ordnung. Lassen Sie uns in diesem Sinne weiterarbeiten, und was ich gerade erklärt habe, wird für Sie jetzt viel klarer sein Lassen Sie uns also den nächsten Bildschirm auf die Timeline bringen und seine Position anpassen. Zuerst konvertieren wir es in eine Drei-D-Ebene. Dann verwenden wir den Z-Achsenpositionswert des letzten Bildschirms und fügen ihm 250 Pixel hinzu. Auf diese Weise platzieren wir diesen Bildschirm 250 Pixel hinter dem vorherigen Bildschirm. Okay. Gehen wir jetzt zum nächsten über. Um diesen Vorgang etwas zu beschleunigen, können wir, anstatt den nächsten Bildschirm auf die Timeline zu ziehen und ihn dann anzupassen, anstatt den nächsten Bildschirm auf die Timeline zu ziehen und ihn dann anzupassen, den letzten Bildschirm aus der Timeline duplizieren, den unteren auswählen und den Wert für die Position der Z-Achse anpassen Danach können wir, während diese Ebene in der Timeline ausgewählt ist, zum Projektfenster gehen, den nächsten Bildschirm auswählen, Alt- oder Wahltaste gedrückt halten und ihn über den ausgewählten Bildschirm in der Timeline ziehen, und ihn über den ausgewählten Bildschirm in der Timeline ziehen um ihn zu ersetzen Großartig. Und jetzt wiederholen wir diesen Vorgang für den Rest der Bildschirme. Ordnung. Und jetzt können wir die Ansicht auf die aktive Kamera und weiter an der Szene arbeiten. Als Nächstes können wir alle neuen Bildschirme in der Timeline dass sie ab Sekunde sieben beginnen, da dies der Zeitpunkt ist, an dem dieser Animationsteil beginnt Dann können wir alle Bildschirme vor der Erstellung über dem Dashboard , um unsere Zeitleiste zu organisieren. In Ordnung. Und jetzt bereiten wir den Projektbildschirm für die Animation vor. Damit meine ich, dass wir sicherstellen müssen, dass dieser Precomp ordnungsgemäß funktioniert , falls wir ihn kollabieren wollen Wie Sie sehen können, sehen wir den Precomp nach dem Zusammenklappen anders wir Und das liegt daran, dass wir hier eine Kamera haben jetzt innerhalb der Precomp beobachtet und nicht mit den Ebenen innerhalb der Precomp interagiert, da es sich bei allen um zwei D-Ebenen handelt nicht mit den Ebenen innerhalb der Precomp interagiert, da es sich bei allen um zwei D-Ebenen D-Ebenen Um das zu beheben, müssen wir nur den Precomp aufrufen und alle Ebenen zusammenklappen und sie in drei D-Ebenen umwandeln Auf diese Weise kann die Kamera in der Hauptszene sie sehen. Nachdem das erledigt ist, kehren wir zur Szene zurück und konvertieren den Rest der Bildschirme ebenfalls in drei D-Ebenen. Wir können sie auch zusammenklappen. Großartig. Und jetzt fangen wir an, an der Animation mit geteilten Bildschirmen zu arbeiten. Als erstes können wir ein neues Nullobjekt erstellen. Dann konvertieren wir es in eine Drei-D-Ebene, platzieren es über allen Bildschirmen und benennen es in Nullbildschirme um. Danach müssen wir diese Null in der Mitte aller Bildschirme platzieren . Einfachheit halber können wir die benutzerdefinierte Ansicht verwenden, oder für eine noch bessere Ansicht können wir die Ansicht von oben wählen. Da wir acht Bildschirme haben, sollten wir die Null irgendwo hier platzieren, sodass wir vier Bildschirme davor und vier Bildschirme danach haben können . Und um genau zu wissen, wo wir sie dazwischen platzieren müssen, können wir die Z-Positionsachse des Bildschirms davor verwenden. Kopieren wir diesen Wert vom Bildschirm und fügen ihn in die Null ein. Ändern Sie dann die Z-Positionsachse der Nullen entsprechend. Wenn der Abstand zwischen den Bildschirmen 250 Pixel beträgt, bedeutet das, dass wir die Null um die Hälfte dieser Zahl verschieben müssen um die Hälfte dieser Fügen wir also 125 Pixel zur aktuellen Null-Z-Achse hinzu. Großartig. Und sobald das erledigt ist, müssen wir alle Bildschirmebenen dem Nullpunkt zuordnen. Aber vorher teilen wir die Dashboard-Precomp auf, sodass wir diese Precomp separat für den ersten Animationsteil der Szene und einen separaten für den Animationsteil haben können separat für den ersten Animationsteil der Szene und einen separaten für den , an dem wir gerade arbeiten Fantastisch. Und jetzt lassen Sie uns alle Bildschirme dem Nullpunkt zuordnen. In Ordnung. Und jetzt kehren wir zur aktiven Kameraansicht zurück und animieren die Szene Wir können von hier aus mit Null beginnen. Okay. Und jetzt öffnen wir die Rotationseigenschaft und finden die richtige Achse, die wir animieren können In unserem Fall animieren wir die Y-Achse. Lassen Sie uns hier den ersten Keyframe erstellen, dann 1 Sekunde vorwärts bewegen und ihn um -69 Grad drehen Bevor wir weitermachen, können wir die Keyframes für diese Precomp öffnen und alle vorherigen Keyframes löschen Wir tun das, weil wir für diesen Precomp eine völlig andere Rotations - und Positionsanimation erstellen werden eine völlig andere Rotations - und Positionsanimation , um den kurvigen Look zu erzielen, den wir uns zu Beginn der geteilten Animation wünschen. Nachdem das geklärt ist, öffnen wir die Rotationseigenschaft für alle Bildschirme und schauen uns an, welche Achse wir animieren müssen Es ist die X-Achse. Lassen Sie uns also einen Keyframe für alle Ebenen mit dem aktuellen Wert erstellen Ebenen mit dem aktuellen Wert Zu diesem Zeitpunkt können wir Sie so einstellen, dass nur die Keyframes angezeigt Danach gehen wir zur zweiten über und beginnen mit der Anpassung der X-Achse für jede Bildschirmebene um ein proportionales kurviges Aussehen zu erzielen Lassen Sie uns den Dashboard-Bildschirm um 25 Grad drehen. Und für den letzten Bildschirm, das ist der Dateibrowser, machen wir das Gegenteil. Stellen Sie ihn auf -25 Für den Bildschirm davor können wir die Drehung auf -20 einstellen. Für den vorherigen können wir die Drehung auf -15 setzen. Für den nächsten minus zehn. Wie Sie vielleicht bemerkt haben, drehe ich die Ebenen um fünf Grad , damit die Kurve proportional aussieht. Ordnung. Und jetzt können wir für die ersten vier Bildschirme eins auf fünf einstellen. Den nächsten setzen wir auf zehn. Und für den letzten können wir die Rotation auf 15 setzen. Das sieht gut aus und wir sind fast da. Damit es besser aussieht, können wir jetzt auch eine Positionsanimation erstellen. Wählen wir also alle Bildschirme aus und drücken P. Erstellen Sie nun einen Keyframe am Anfang der Animation Gehen wir als Nächstes eine Sekunde weiter und beginnen, die Position der einzelnen Bildschirme anzupassen , um einen schönen , kurvigen Look zu erhalten Da es Bildschirme gibt, die etwas größer sind als die anderen, versuche ich einfach, jede Ebene intuitiv zu verschieben , bis ich etwas finde, das mir In Ordnung, ich denke, es sieht vorerst okay aus. Lassen Sie uns nun die Animation des Projektbildschirms erstellen , der aus dieser Liste herausspringt, da dies der Bildschirm ist, der in der nächsten Szene angezeigt werden muss in der nächsten Szene angezeigt werden In einem Moment gehen wir also eine Sekunde vorwärts und passen die Vorkomposition, Position und Drehung des Projekt-Bildschirms Aber bevor wir das tun, lassen wir die restlichen Bildschirme aus dem Rahmen herausnehmen Und das können wir mit der Null-Ebene machen. Bleiben wir also bei Sekunde acht, drücken dann P, erstellen hier einen Keyframe , wechseln wir zu Sekunde Neun und ziehen die Null nach unten aus dem Frame, bis kein Bildschirm mehr im Frame sichtbar ist Großartig. Und jetzt stellen wir sicher, dass wir die Projekte vor der Fertigstellung in Sekunde acht aufteilen, da wir wollen, dass sie nicht durch die Null beeinflusst werden Wir müssen diesen Teil separat animieren, damit wir den nächsten Animationsteil viel bequemer aufrufen können Stellen wir sicher, dass es nicht der Null übergeordnet ist. Großartig. Und jetzt können wir diese Ebene ganz einfach animieren, ohne uns Gedanken über die Nullbewegung machen zu müssen Und bevor wir es animieren, sollten wir sicherstellen, dass die ersten Keyframes gelöscht und nur die letzten beibehalten werden, damit der Precom werden Wenn das erledigt ist, können wir jetzt zu Sekunde Neun übergehen und diese Ebene animieren wir zunächst sicher, dass die X-Rotationsachse auf Null gesetzt die X-Rotationsachse auf Null Danach passen wir die Y-Drehachse bis der UI-Bildschirm zur Kamera zeigt. Großartig. Sobald wir mit der Einstellung der Rotation fertig sind, beginnen wir mit der Position. Drücken wir Sie zweimal, damit wir alle Keyframes sehen können. Lassen Sie uns nun das Action-Safe-Grid öffnen und mit der Anpassung der Position beginnen. Wir können es vorerst in der Mitte des Computers platzieren. Mach dir keine Sorgen über die Kollision, die hier passiert. Wir werden uns in einer Minute darum kümmern. Konzentrieren wir uns vorerst darauf, eine schöne Position für diesen UI-Bildschirm zu finden. Wenn Sie sich nicht sicher sind, wie die Szene aussehen soll, ist es eine gute Idee, zur Videotafel zurückzukehren und die Szene erneut zu überprüfen Ich sehe, dass wir hier auch eine Textebene hinzufügen müssen. Das ist wichtig, weil ich jetzt weiß, dass ich etwas Platz für eine Textebene in der Szene lassen muss . Lassen Sie uns diese Gelegenheit auch nutzen, um zu überprüfen, wie lange die Animation des UI-Screenparts des Projekts präsentiert werden soll. Sie beginnt bei 19 Sekunden und 15 Frames und endet bei 24 Sekunden. Das heißt, wir haben etwas mehr als 5 Sekunden Zeit , um diesen Animationsteil zu präsentieren. Ordnung. In diesem Sinne gehen wir zurück zur Szene und arbeiten weiter. Ab diesem Zeitpunkt haben wir also 5 Sekunden Zeit, um diesen Teil des UI-Bildschirms zu präsentieren. Wir werden den Pre-Comp auf eine ähnliche Position bringen wie die Referenz , von der ich Ihnen erzählt habe, als wir über die Erstellung des Storyboards gesprochen haben In Ordnung, zurück zur Lektion. Gehen wir 1 Sekunde vorwärts und öffnen dann alle Rotationseigenschaften Versuchen wir nun, mit den verschiedenen Achsen herumzuspielen , bis wir etwas bekommen, das uns gefällt. In unserem Fall sehe ich, dass wir auch die Z-Rotationsachse animieren müssen Z-Rotationsachse animieren daher zuerst Lassen Sie uns daher zuerst einen Keyframe bei Sekunde neun erstellen und dann mit Sekunde zehn fortfahren und den Wert ändern Ordnung. Ich denke, der Winkel ist perfekt Lassen Sie uns nun die Position ermitteln und sicherstellen, Precomp näher an die An dieser Stelle versuche ich nur, einen schönen Winkel zu erreichen und sicherzustellen, dass die Komposition ausgewogen ist Also spiele ich mit all den Eigenschaften herum, die ich animiert habe, bis ich ein gutes Ergebnis habe, und stelle sicher, dass ich genug Platz für die Textebene habe, in diesem Animationsteil enthalten sein muss. Mm. Mal sehen, wie das aussieht. Ich finde, es sieht toll aus. Wählen wir die Pre-Comp aus und drücken Sie auf Sie, um nur die Keyframes zu sehen Ordnung. Und jetzt öffnen wir das Skript und kopieren den entsprechenden Text. Lass uns das auf der Videotafel überprüfen. In unserem Fall benötigen wir vorerst nur diesen Teil des Skripts. Also lass es uns kopieren und in die Szene einfügen. Passen wir jetzt den Text an. Lassen Sie uns eine fettgedruckte Version der Schrift verwenden. Als Nächstes ändern wir die Farbe in Weiß. Und für die Schriftgröße stellen Sie sie auf 40 ein. wir abschließend sicher, dass der Absatz der Mitte ausgerichtet ist, und richten wir ihn dann horizontal an der Mitte der Komposition aus. Und ich denke, wir können es irgendwo hier platzieren, oder? Und jetzt bringen wir den Text über die Nullebene und bringen ihn so , dass er bei Sekunde neun beginnt. Wir können die Position ein wenig anpassen. Später werden wir alle Textebenen in unseren Szenen animieren. Konzentrieren wir uns zunächst darauf, die restlichen wesentlichen Animationsteile weiter zu animieren Wie Sie sich vielleicht erinnern, sollte der Animationsteil, der den UI-Bildschirm des Projekts präsentiert , 5 Sekunden dauern Das heißt, wir müssen jetzt die aufmunternde Animation für jeden Abschnitt auf diesem UI-Bildschirm erstellen für jeden Abschnitt auf diesem UI-Bildschirm Wie wir gesehen haben, wird diese Animation in solchen Projekten häufig verwendet Lassen Sie uns also lernen, wie das geht. Aber vorher ist mir gerade aufgefallen, dass ich es verpasst habe, einen Positions-Keyframe hinzuzufügen Nachrichten auf der Bildschirmebene Okay, jetzt fangen wir an, die aufmunternde Animation zu erstellen Lassen Sie uns den Zeitpunkt für den Start dieser Animation finden. Wir sollten ab Sekunde zehn beginnen. Geben wir nun die Projekte vor der Fertigstellung ein. Hier in dieser Zeitleiste sehen wir, dass die Animation ab Sekunde drei beginnt. Großartig. Beginnen wir also damit, die graue BG-Ebene zu sperren. So können wir den Rest der Ebenen einfach auswählen. Wir können auch die linke Menüebene sperren. Und jetzt wollen wir herausfinden, welche Ebenen wir animieren müssen. In unserem Fall sind dies die Ebenen der Projektboxen. Wählen wir sie also alle aus und kennzeichnen sie mit einer anderen Farbe. Wir können sie ein- und ausschalten , um sicherzustellen, dass die Auswahl korrekt ist. Großartig. Lassen Sie uns sie jetzt orange markieren. Lassen Sie uns nun die Position für alle öffnen und zu diesem Zeitpunkt einen Keyframe erstellen Gehen wir als Nächstes eine Sekunde vorwärts und erstellen auch hier einen weiteren Keyframe. Gehen wir dann zur Mitte der Animation und passen die Position der Z-Achse an, um sie nach oben zu bringen Wir können zur Szene zurückkehren, um zu sehen, wie sie mit dem Winkel aussieht, den wir erstellt haben. Ich denke, das ist zu viel. Lassen Sie uns sie alle ein bisschen herunterholen. Lass uns das noch einmal überprüfen. Ja, ich finde, es sieht besser aus. Gehen wir jetzt zurück zum Precomp und passen die Bewegung an. Lassen Sie uns dafür sorgen, dass die Animation schnell beginnt, in der Mitte langsamer und gegen Ende an Geschwindigkeit gewinnt . Großartig. Und jetzt erstellen wir einen sanften Versatz zwischen den Ebenen. Ich wähle jede Ebene aus, um sicherzustellen, dass sie alle chronologisch nacheinander angeordnet sind nacheinander Ja, es sieht so aus, als ob die Reihenfolge im Ebenenfenster korrekt ist Lassen Sie uns nun entscheiden, dass das obere linke Feld zuerst die Animation startet. Das heißt, wir wählen die restlichen Keyframes aus und verschieben sie, sagen wir, zwei Frames vorwärts Wir können dies manuell tun, indem wir Alt oder die Wahltaste gedrückt halten und den Rechtspfeil verwenden Oder wir können es mit der neuen Funktion machen. Ich mache meine Aktion rückgängig und zoome ein wenig hinein, um dir zu zeigen, wie. Wenn Sie die neue Funktion verwenden möchten, müssen Sie bedenken, dass sich die Reihenfolge Ihrer Auswahl auf die Versatzrichtung auswirkt. Lassen Sie uns zwei Frames vorwärts bewegen. Wenn ich also in der oberen Ebene mit der Auswahl beginne, Strg- und Alt-Taste gedrückt, um die neue Funktion zu aktivieren. Der Offset beginnt auf der oberen Ebene. In unserem Fall möchten wir, dass es mit der unteren Ebene beginnt. Daher beginne ich die Auswahl von der unteren Ebene aus. Jetzt stelle ich sicher, dass die Keyframes der Ebene mit dem Namen Ebene 353 die Position der Zeitindikatoren erreichen. , dass der Offset zwei Frames entfernt ist. Ich denke, wir können den Offset vergrößern. Großartig. Und jetzt, bevor wir weitermachen, gehen wir zurück zur Szene, um zu sehen, wie sie aussieht. Es sieht okay aus, aber ich denke dieser gesamte Animationsteil ist zu schnell und dauert zu kurz. weiß, dass dieser Teil vier oder 5 Sekunden dauern sollte, bin ich mir sicher, dass wir diese Animation etwas langsamer machen müssen. Gehen wir also zurück zum Screen Precomp und verlangsamen wir die Animation Konzentrieren wir uns auf die Schlüsselbilder der untersten Ebene. Diese Animation dauert vorerst 1 Sekunde. Sie beginnt bei Sekunde drei und endet bei Sekunde vier. Das gilt auch für die übrigen Schichten. Ihre Animationen dauern alle 1 Sekunde. Gehen wir jetzt zu Sekunde fünf. Wählen Sie dann alle Keyframes aus und halten Sie nun Alt oder die Wahltaste gedrückt und ziehen Sie den letzten Keyframe, um den Abstand zwischen den Keyframes proportional zu vergrößern den Abstand zwischen den Keyframes Achten Sie dabei darauf, wann der letzte Keyframe der untersten Ebene die Fünf-Sekunden-Marke erreicht Dies zeigt an , dass die Animation jetzt 2 Sekunden dauert, und wie Sie vielleicht bereits wissen, gilt sie auch für die übrigen Ebenen Auf diese Weise verlangsamen wir die Animation für alle Ebenen von 1 Sekunde auf 2 Sekunden. Nachdem das erledigt ist, gehen wir zurück zur Szene und schauen uns an, wie das aussieht. Und am wichtigsten ist es, dafür zu sorgen, dass die Animation jetzt zum richtigen Zeitpunkt endet. Die Animation endet etwa in Sekunde 12, was großartig ist, da wir jetzt noch ein paar Sekunden Zeit haben um den Übergang für den nächsten Animationsteil zu erstellen . Für den nächsten Animationsteil müssen wir eine Cursorklick-Animation auf einer der Projektboxen erstellen , die uns danach zum UI-Bildschirm des zweiten Projekts bringt . Lassen Sie uns jetzt mit der Arbeit an diesem Teil beginnen. Lassen Sie uns also zunächst den zweiten Projektbildschirm aufrufen und versuchen zu verstehen, was passieren muss. Wie Sie hier sehen können, befinden wir uns derzeit in einem Projekt namens Dribble-Website Das bedeutet, dass wir im ersten Projektbildschirm eine Klick-Animation für diese Projektbox erstellen müssen eine Klick-Animation für im ersten Projektbildschirm eine Klick-Animation für diese Projektbox Sobald wir den Ablauf verstanden haben, können wir zum zweiten Projektbildschirm gehen und uns überlegen , wie wir eine Intro-Animation dafür erstellen In unserem Fall werden wir uns darauf konzentrieren, irgendeine Art von Animation für diese Aufgabenbereiche zu erstellen irgendeine Art von Animation für diese Aufgabenbereiche Aber wie Sie sehen können, ist mir gerade aufgefallen, dass diese Boxen nicht gefüllt sind. Bevor ich mit der Animation beginne, lass mich das ganz schnell korrigieren In Ihrem Fall haben Sie, da Sie meine fertigen Dateien verwenden, alle Abschnitte bereits repariert Ich wollte Ihnen nur zeigen, dass wir manchmal etwas in Illustrator übersehen, und das ist völlig in Ordnung Um das Problem zu beheben, muss ich nur das Design in Illustrator finden, diese Felder auswählen und sicherstellen , dass ihnen eine weiße Füllung hinzugefügt Ich werde diesen Prozess vorerst beschleunigen. Sobald ich fertig bin, vergesse ich nicht, die Datei zu speichern. Dann kann ich zu After Effects zurückkehren und ein paar Sekunden warten , bis die Änderungen hier aktualisiert sind . In Ordnung. Und jetzt speichere ich mein Projekt auch hier in After Effects, und wir können weiterarbeiten. Zu diesem Zeitpunkt wissen wir also bereits, was wir für den Rest der Szene tun müssen. Bevor wir jedoch mit der Erstellung einer komplexen Animation beginnen, ist es eine gute Idee, zur Master-Komposition zurückzukehren und sich die Animation anzusehen, die wir zusammen mit dem Voiceover erstellt haben , um zu sehen, ab welchem Zeitpunkt wir mit der Erstellung der Demo-Flow-Animation beginnen sollten Das macht das Projektmanagement so einfach, sogar Ihre Katze tun könnte Mit einem Punkt erhalten Sie kristallklar, ähm, alles, was Ihr Team an Ihrem gesamten Projekt arbeitet. Okay, wenn Sie einen kristallklaren Überblick über alles bekommen , an dem Ihr Team gerade arbeitet, all Ihre Produkte. Ich denke, wir können ab Sekunde 22 beginnen. Das bedeutet, dass die aufmunternde Animation der Projektboxen hier schon enden sollte Gehen wir also in die Szene und geben dann die Vorkomposition des Projekts ein, um diesen Animationsteil auf die Position der Zeitindikatoren zu verkürzen , was in dieser Zeitleiste bedeutet, dass diese Animation gegen Sekunde vier enden sollte Im Grunde war unsere erste Dauer dieser Animation also perfekt Ich wollte dir diese Situation zeigen weil wir manchmal der Meinung sind , dass unsere Animation auf eine bestimmte Art aussehen sollte. Aber das Wichtigste ist, dass die Animation zum Voiceover passt, anstatt sie einfach so aussehen zu lassen, wie wir uns fühlen diesem Grund ist es so wichtig , immer zur Master-Komposition zurückzukehren und das Projekt nach jedem Animationsteil , den Sie erstellt haben, erneut zu überprüfen jedem Animationsteil Mit einem Punkt erhalten Sie einen kristallklaren Überblick über alles, woran Ihr Team gerade arbeitet — alles in Ordnung Jetzt wird die Animation mit dem Voiceover synchronisiert, und wir sind bereit, mit der Arbeit an der Demo-Flow-Animation zu beginnen . Das sollte ungefähr in Sekunde 22 beginnen. Lasst uns die Szene betreten und diese Animation von dem Zeitpunkt an starten , an dem alle Boxen bereits gelandet sind. Platziere die Zeitanzeige hier. Und jetzt fangen wir an, die Klickbewegung auf der ersten Projektbox zu erstellen . Da wir wissen, dass wir für die Klick-Animation ein paar Frames benötigen , sollten wir sicherstellen, dass diese Precomp für ein paar Frames still bleibt Dazu müssen wir Schlüsselbilder für alle animierten Eigenschaften mit dem aktuellen Wert erstellen alle animierten Eigenschaften mit dem aktuellen Lassen Sie uns nun dafür sorgen, dass dieser Precomp zehn Frames lang bleibt. Ich denke, das sollte genug Zeit für die Klickanimation Wenn wir uns also bei Bild 12 befinden, gehen wir zu Bild 22 über, was insgesamt zehn Frames ergibt. Lassen Sie uns abschließend einen weiteren Satz von Keyframes für alle animierten Eigenschaften mit dem aktuellen Wert erstellen Keyframes für alle animierten Eigenschaften mit dem aktuellen Wert Dieser Teil wird unser Ort sein, um die Klick-Animation zu erstellen Falls Sie den Winkel oder die Position der Precomp anpassen möchten , bevor der Demo-Flow startet, vergessen Sie nicht, die letzten Keyframes entsprechend zu aktualisieren , um diesen Pausenmoment beizubehalten Lass es uns jetzt gleich üben. Wir können den Winkel ändern, indem wir ein wenig mit den Werten der animierten Eigenschaften herumspielen ein wenig mit den Werten der animierten Eigenschaften , bis wir einen interessanteren Winkel haben. Ordnung. Sobald das erledigt ist, können Sie diese Keyframes einfach löschen und stattdessen die neuen hier kopieren und einfügen . Ordnung. Lassen Sie uns nun von diesem Zeitpunkt an den Precomp des Projekts aufrufen und das erste Projektfeld suchen , um eine Klick-Animation dafür zu erstellen . Hier ist sie Öffnen Sie die Skalierungseigenschaft und erstellen Sie einen Keyframe mit dem aktuellen Wert Verschieben Sie dann zehn Bilder vorwärts und erstellen Sie denselben Keyframe Stellen wir uns nun in die Mitte dieser Animation und verkleinern die Ebene Lass uns unsere 80 ausprobieren. Großartig. Und jetzt lassen Sie uns einfach die Keyframes vereinfachen und sehen, wie das aussieht Lassen Sie uns versuchen, diese Bewegung etwas flotter zu gestalten. Das ist besser. Toll. Gehen wir jetzt zurück zur Szene. Und ab dem Zeitpunkt, an dem die Klickanimation endet, ändern wir den Winkel dieser Vorkomposition in die Klickanimation endet, ändern wir den Winkel dieser einen anderen Winkel , der für den nächsten Benutzeroberflächenbildschirm, der nach der Klick-Animation angezeigt werden muss , am besten aussieht nach der Klick-Animation angezeigt werden muss , Nehmen wir an, die Animation mit wechselndem Winkel dauert 1 Sekunde Lassen Sie uns also dieses Zeitfeld verwenden und die Sekunden auf 12 ändern. Auf diese Weise springt die Zeitanzeige genau 1 Sekunde nach vorne. Großartig. Lassen Sie uns an dieser Stelle alle Eigenschaften anpassen, die wir animiert haben , um einen schönen Frontwinkel zu erhalten. Mithilfe des sicheren Aktionsrasters ist es einfach, den Precomp in der Mitte auszurichten In Ordnung, ich finde, es sieht gut aus. Jetzt wissen wir, dass wir, wenn wir den nächsten Bildschirm präsentieren, auch den Text ändern müssen , den wir hier in der Szene haben Lassen Sie uns also die Textebene vom Anfang des Übergangs an aufteilen und dann das Skript öffnen, um den entsprechenden Text zu kopieren. Doppelklicken wir auf die Textebene und fügen den neuen Text ein. Großartig. Jetzt haben wir unseren Übergang vorbereitet. Und bevor wir weitermachen, überprüfen wir, ob es perfekt mit dem Voiceover synchronisiert Wir können auch bestätigen , dass es sinkt, indem überprüfen, ob sich der Text zum richtigen Zeitpunkt ändert Vorschau auf alles, woran Ihr Team gerade arbeitet , all Ihre Projekte, all Ihre Aufgaben, alles an einem Ort In Ordnung, ich finde, alles sieht toll aus. Und jetzt sind wir bereit , zur Szene zurückzukehren und mit der Erstellung der Intro-Animation für den UI-Bildschirm des zweiten Projekts zu beginnen Erstellung der Intro-Animation für den UI-Bildschirm des zweiten Projekts Die Transformation muss direkt nach der Klick-Animation beginnen direkt nach der Klick-Animation In diesem Fall erstellen wir die Intro-Animation des nächsten Bildschirms in der Vorkomposition des Projekts Erstellen Sie zunächst eine Outtro-Animation für alle Abschnitte auf diesem Bildschirm, und danach erstellen wir eine Intro-Animation für Dann werden wir diese beiden Animationsteile zeitlich aufeinander abstimmen, um einen reibungslosen Übergang zu Und schließlich werden wir diese Demo-Flow-Animation für diesen UI-Bildschirm haben . Damit werden wir in der nächsten Lektion fortfahren. Es wird unglaublich sein. Also wir sehen uns dort. 17. Erstellen der Outro Animation für den Projektbildschirm: Komm zurück. Wir beginnen diese Lektion mit der Arbeit an der Otro-Animation für den Bildschirm des Projekts Das muss direkt nach der Klick-Animation beginnen direkt nach der Klick-Animation Also werden wir hier stehen und uns überlegen, wie wir alle Ebenen entfernen können, damit wir die Ebenen für den nächsten Bildschirm übernehmen können. In Ordnung. vor diesem Hintergrund damit beginnen, Lassen Sie uns vor diesem Hintergrund damit beginnen, eine Outtro-Animation für den Hauptbereich auf diesem UI-Bildschirm zu erstellen für den Hauptbereich auf diesem UI-Bildschirm Um es so bequem wie möglich zu gestalten, können wir das weiße Feld in diesem Abschnitt verwenden Lass mich dir zeigen, was ich meine. Lassen Sie uns es zunächst in einer anderen Farbe einfärben, damit wir es schnell finden können. Als Nächstes können wir alle Objekte und Ebenen auswählen, die sich auf diesen Abschnitt beziehen, und sie dem weißen Hauptfeld zuordnen. Sobald wir fertig sind, können wir nur für diese Ebene eine Outtro-Animation erstellen nur für diese Ebene eine Outtro-Animation Dann können wir mit der Erstellung einer Outtro-Animation für die restlichen Abschnitte fortfahren einer Outtro-Animation für die restlichen Abschnitte Nachdem das geklärt ist, öffnen wir die Position für das weiße Hauptfeld dieses Abschnitts und erstellen dafür auf der dieses Abschnitts und erstellen rechten Seite eine einfache Outtro-Animation Lassen Sie uns diese Animation in Sekunde fünf beenden. Gehen wir als Nächstes zu dem Punkt, an dem diese Animation beginnt und erstellen wir eine Outtro-Animation für das große Menü auf der linken Seite Wir können das aus dem Frame auf die linke Seite verschieben. Großartig. Und jetzt erstellen wir eine Outtro-Animation für den Header Vorher ist mir aufgefallen, dass der Header nicht gut aussieht Ich würde es lieben, wenn es von der linken Seite beginnt und nicht so abgeschnitten wird, wie es jetzt ist So habe ich das Design von Figma bekommen. Aber hier in After Effects werde ich es an meine Animation anpassen In Ihrem Fall sehen Sie es nicht, weil Sie meine finalisierten Illustrator-Dateien verwenden Sie haben dieses Problem also bereits behoben. Um das Problem zu beheben, bin ich einfach zu diesem Design in Illustrator gegangen und habe die Form an die linke Seite angepasst Sobald ich fertig war, habe ich das Projekt gespeichert, damit ich die aktualisierte Version und After Effects erhalten konnte Zuletzt habe ich die Position der Ebene aktualisiert, die aufgrund der Designänderung, die ich in Illustrator vorgenommen habe, durcheinander geraten war . In Ordnung Und jetzt, nachdem ich das behoben habe und überprüft habe, wie der nächste Bildschirm aussehen sollte, habe ich verstanden, dass sich der Header-Bereich nicht ändert, sodass ich keine Tro-Animation dafür erstellen muss. Bevor wir die nächsten Ebenen aufrufen, wir sicherstellen, dass diese Ebenen nur innerhalb der Grenzen des grauen Hauptfeldes für diesen Bildschirm sichtbar nur innerhalb der Grenzen des sind. Ich denke, es wird besser aussehen, als die Ebenen einfach so zu lassen, wie sie gerade sind. Fangen wir zuerst an, uns mit dem Menü zu befassen. Wir müssen nur diese Ebene erstellen und das Alpha der grauen Box verwenden. Ziehen Sie also den Pick-Whip der Trackmat-Funktion der Menüebene auf die graue Feldebene, die letzte Ebene in unserem Ebenen-Panel Schalten Sie diese Ebene abschließend wieder ein. Fantastisch. Lassen Sie uns nun dasselbe für das weiße Feld im Hauptbereich tun. Großartig. Und jetzt wiederholen wir diesen Vorgang. Für den Rest der Ebenen möchten wir maskiert werden. Aus irgendeinem Grund hat es nicht funktioniert, als ich versuchte, diesen Vorgang für mehrere Ebenen gleichzeitig Also, wenn dir das passiert, mach dir keine Sorgen. Stellen Sie einfach sicher, dass Sie es eins nach dem anderen tun. Wie Sie jetzt sehen können , funktioniert das. Wir können das auch für zwei Schichten gleichzeitig machen. Ordnung. Wenn wir damit fertig sind, gehen wir zurück zur Szene und schauen uns an, wie das aussieht. Wie Sie sehen können, sehen wir einige Ebenen in einer Animation, die nach oben zeigt, nicht, weil sie jetzt von der grauen Haupthintergrundebene maskiert werden jetzt von der grauen Haupthintergrundebene maskiert Wenn Sie sich in dieser Situation befinden, müssen Sie nur die Vorkomposition mit den maskierten Ebenen aufrufen und den Zeitpunkt ermitteln, an dem die Animation nach oben vollständig beendet ist Wir können bei diesem Zeitpunkt bleiben, dem die Outtro-Animation beginnt, und von diesem Punkt aus können wir alle Ebenen auswählen, die im vorherigen Animationsteil nicht maskiert werden sollen vorherigen Animationsteil Jetzt können wir die duplizierte Ebene hier oben platzieren. Schließlich müssen wir die Ebenen auswählen, die wir nicht benötigen, maskieren und die Track-Mat-Funktion für sie deaktivieren Jetzt bekommen wir also diese Projektboxen, die zu dem Zeitpunkt, an dem sie auftauchen, von keiner Ebene maskiert Zeitpunkt, an dem sie auftauchen, von keiner Ebene sie auftauchen Und dann haben wir sie für den Outtro-Animationsteil maskiert für den Outtro-Animationsteil So geht man mit solchen Situationen um. Ordnung. Und jetzt können wir den nächsten Bildschirm aufrufen und versuchen zu verstehen, welche Ebenen und Objekte nach der Klickanimation angezeigt werden sollen. Wir müssen sicherstellen, dass wir diese beiden Abschnitte betreten. Fangen wir mit dem großen Menü auf der linken Seite an. Zuerst müssen wir es kopieren. Gehen wir dann zurück zum ersten Projektbildschirm und stellen uns an den Punkt, an dem wir die neuen Ebenen benötigen, um in die Szene einzudringen. In unserem Fall ist es vom Anfang der Otro-Animation an. In Ordnung. Jetzt fügen wir das kopierte Menü hier ein und platzieren es über allen Ebenen. Jetzt können wir diese Ebene von diesem Zeitpunkt an so einrichten, dass sie beginnt. Und jetzt stellen wir sicher, dass diese Ebene maskiert ist. Wir können es unter der Kopfzeile platzieren. Okay, jetzt lass es das Alpha des grauen Felds verwenden , um diese Ebene zu maskieren. Großartig. Und jetzt können wir anfangen, eine Intro-Animation für dieses Menü zu erstellen eine Intro-Animation für dieses Menü Wir können hier einen Keyframe erstellen, weil wir wissen, dass er sich nach dem Intro an dieser Position befinden muss Jetzt können wir zum Anfang unserer Animation gehen und diese Ebene nach links verschieben Sobald wir fertig sind, können wir die Intro-Animation gegenüber der Outtro-Animation des vorherigen Menüs verzögern die Intro-Animation gegenüber der Outtro-Animation des vorherigen Ordnung. Und jetzt kehren wir zum zweiten Projektbildschirm und kopieren den Rest der Ebenen. Wählen wir diese vier Ebenen aus, kopieren sie und fügen sie in die Precomp des ersten Projekts Lassen Sie uns sie ebenfalls dazu bringen, von diesem Zeitpunkt an zu beginnen , von diesem Zeitpunkt an zu Dies ist der Punkt , an dem das Intro des Bildschirms des zweiten Projekts beginnt Großartig. Gehen wir wieder zum zweiten Bildschirm und kopieren wir diesmal das weiße Feld. Klicken Sie nun auf diese Ebene und fügen Sie das weiße Feld so ein, dass es über der ausgewählten Ebene liegt. Nachdem das erledigt ist, erstellen wir eine Intro-Animation für diesen neuen Abschnitt Wir werden ein anderes Intro für die restlichen Ebenen erstellen , die in dem Abschnitt erscheinen müssen in dem Abschnitt erscheinen Aber all diese Ebenen können wir zusammen animieren. Lassen Sie uns das weiße Feld taggen und ihm diese vier Ebenen zuordnen Bevor wir es animieren, sollten wir sicherstellen, dass dieser Abschnitt an der richtigen Stelle platziert Wie Sie verstehen können, sollten wir es ein wenig reduzieren Wählen Sie also die White-Box-Ebene und senken Sie sie etwas ab. In Ordnung. Und jetzt öffne die Position dieser Ebene. Wir können auch die Position des neuen Menüs öffnen um zu sehen, wo es endet. Am Ende der Intro-Animation werden wir also einen Keyframe mit dem aktuellen Positionswert erstellen mit dem aktuellen Positionswert Lassen Sie uns zu Beginn entscheiden, dass dieser Abschnitt vom unteren Teil aus auf den Bildschirm gelangt Sie können anhand der Outtro-Animation des vorherigen Abschnitts überprüfen, wie das aussieht der Outtro-Animation des vorherigen Abschnitts überprüfen, wie das Ich finde, es sieht toll aus und wir können das Projekt speichern und weitermachen Lassen Sie uns nun eine Intro-Animation für die restlichen Ebenen erstellen , die in diesem Abschnitt enthalten sein müssen Lassen Sie uns hier also alle Aufgabenlisten auswählen. Zurück in den ersten Projekten vor der Erstellung sollten wir sicherstellen, dass diese Ebene ausgewählt ist , sodass sich die eingefügten Ebenen darüber befinden. Großartig. Lassen Sie uns sie jetzt orange markieren und sie von hier aus starten. Großartig. Lassen Sie uns nun ein wenig zoomen und sie verkleinern, dass sie zum ursprünglichen Design dieses Abschnitts passen. Sie können in den zweiten Projekten , Precomp, überprüfen, wie das aussehen sollte zweiten Projekten , Precomp, überprüfen, wie das In Ordnung. Und jetzt fangen wir an ein Intro für all diese Ebenen zu erstellen Am Ende des Intros sollten sie hier platziert werden. Und am Anfang sollten wir sie herunterholen. Wir können sie irgendwo hier platzieren. Und jetzt, um das ein bisschen interessanter zu machen, lassen wir sie bei den zweiten fünf beginnen. Ich möchte für diese Ebenen eine leichte Verzögerung gegenüber den übrigen Abschnitten erzeugen . Ordnung, vorerst sieht es okay aus. Lass uns weitermachen. An dieser Stelle macht es mir nichts aus, dass der untere Teil der weißen Box nicht mehr auf dem Bildschirm zu sehen ist. Mir gefällt, wie es aussieht, aber ich möchte die Aufgabenebenen maskieren, sodass sie nur innerhalb der Grenzen des weißen Felds sichtbar sind. dazu zunächst sicher, dass Sie wissen, welche Ebene die weiße Box ist. Es ist dieser. Jetzt müssen wir die Aufgabenebenen auswählen und dafür sorgen, dass sie den Alpha-Kanal der White-Box-Ebene verwenden. Vergessen Sie zum Schluss nicht, die White-Box-Ebene wieder einzuschalten . Tun Sie dies für die restlichen Aufgaben-Ebenen. Ordnung. Wenn das erledigt ist, kann es eine gute Idee sein, zurück zum Master-Computer zu gehen und zu sehen, ob alles okay aussieht Wie Sie sehen können, läuft bei uns ein sehr seltsam aussehendes Ding ab Gehen wir also zurück zu unseren Projekten vor der Installation und korrigieren das. Da sich diese gesamte Szene im Drei-D-Raum befindet, müssen wir sicherstellen, dass alle neuen Ebenen in dieser Pre-Comp-Konfiguration auch Drei-D-Ebenen sind Wenn wir uns nun die Hauptszene ansehen oder diesen Animationsteil in der Masterkomposition sehen, wird alles großartig aussehen Jetzt ist es also ein guter Zeitpunkt, den gesamten Fortschritt zu speichern und die Animation mit dem Voiceover anzusehen Animation mit dem Voiceover um zu sehen, ob das Timing Deine Katze könnte es schaffen . Mit einem Punkt erhalten Sie einen kristallklaren Überblick über alles, was Ihr Team an all Ihren Projekten und Aufgaben arbeitet , alles an einem Ort. Sie benötigen die vollständigen Aufgaben, alles an einem Ort. Ordnung. Jetzt verstehe ich , dass zu diesem Zeitpunkt gesamte Demo-Flow-Animation am zweiten 27. Mark enden sollte Das heißt, ich habe ein paar Sekunden Zeit, um den Rest der Animation dieses Demo-Flows zu erstellen. Lassen Sie uns nun die Szene vor der Kompilation betreten. In dieser Zeitleiste sollte der Ablauf der Demo-Animation bei der zweiten 16-Marke enden Ich sage Ihnen das, damit Sie verstehen, dass die Zeitcodes in jeder Pre-Comp unterschiedlich sein können, und das liegt daran, dass die Pre-Comp, an der wir in der Timeline arbeiten , in Sekunde 11 der Master-Komposition beginnt Und innerhalb dieser Vorkomposition haben wir mit der Animation ab der zweiten Nullmarke begonnen Deshalb sehen wir hier einen anderen Timecode. Unser Endpunkt in der Timeline innerhalb dieser Pre-Comp ist die 16-Sekunden-Marke, nicht die 27-Sekunden-Marke, wie in der vorherigen Comp, wo sich die Szene für Pre-Comp befindet und mit der zweiten 11 beginnt Wenn wir dann den Precomp des Projekts eingeben, der Endzeitcode wieder anders Hier ist er bei der zweiten Neun. Das liegt daran, dass die Animation hier bei der zweiten Nullmarke beginnt und nicht bei der zweiten Sieben-Marke, da die Precomp des Projekts in der Vorkomposition von Szene vier beginnt Denken Sie also nicht, dass Sie einen Fehler machen. Ich in der Master-Comp, das Timing zeigt etwas anderes als in Ihrer Szene Precomp, vertraue der Position der Deshalb ist es wichtig, die Zeitanzeige am richtigen Zeitpunkt in der Master-Komposition zu platzieren und sie dann nicht zu bewegen, wenn Sie die Precomps richtigen Zeitpunkt in der Master-Komposition zu platzieren und sie dann nicht zu bewegen, wenn Sie die Precomps und sie dann nicht zu bewegen, wenn Sie Es ist sehr wichtig, dies zu verstehen, insbesondere bei Projekten dieser Art, da die Erstellung von Demo-Flow-Animationen von mehr als einem Pre-Comp aus strukturiert werden kann mehr als einem Pre-Comp , der nicht am selben Zeitpunkt beginnt In Ordnung, zurück zum Projekt. Lassen Sie uns nun die Ansicht verkleinern und dabei berücksichtigen, dass die Animation bei den zweiten neun in dieser Zeitleiste enden sollte , beginnen wir mit der Arbeit am nächsten Animationsteil in diesem Demo-Flow. Lassen Sie uns dieses Mal an dem Punkt stehen, an dem das Intro der Aufgaben-Ebenen endet, und das Aufgaben-Ebenen endet, und grüne Checkbox-Symbol einblenden, sodass wir mit der Erstellung der Checkbox-Animation beginnen können Wie Sie sehen können, haben wir zwei Ebenen, die das Checkbox-Design bilden Stellen Sie daher sicher, dass Sie beide auswählen und sie dann in die Precomp des ersten Projekts einfügen Lassen Sie uns es jetzt von hier aus starten und es grün färben Und jetzt müssen wir die Intro-Animation der Checkbox zusammen mit den Ebenen zeitlich der Checkbox zusammen mit den Ebenen Wir können die Checkbox-Animation direkt nach dem Intro der Task-Layer starten direkt nach dem Intro der Task-Layer Lassen Sie uns also vorerst hier stehen. Und jetzt, da ich weiß, dass ich ein paar Checkboxen in der Szene brauche , werde ich es vorziehen, diese beiden Ebenen zu unterkomponieren und die Animation darin zu erstellen, sodass ich die Vorkomposition einfach duplizieren und auf den gesamten Animationsteil verteilen kann und auf den gesamten Animationsteil verteilen kann Wir können es Aufgabe erledigt oder Checkbox nennen. wir einfach sicher, dass das neue Precomp aus dem Ordner auf dem Bildschirm entfernt wird Es erscheint hier, weil bei der Erstellung dieser Precomp eine der Precomps In Ordnung. Und jetzt markieren wir es grün und geben es ein. Und jetzt, bevor wir mit der Animation beginnen, passen wir den Precomp-Startzeitcode so an, dass er bei Null beginnt Er ist nicht auf Null, denn als wir die Ebenen vorab zusammengesetzt haben, waren wir bei den zweiten fünf. In Ordnung. Und jetzt, da die Symbole zu klein sind, skalieren wir diese Ebenen. Wir können die Skala auf 300 einstellen, großartig. Und jetzt platzieren wir es in der Mitte des Computers. Wir können das Ausrichtungswerkzeug verwenden. Achten Sie darauf, dass die Ausrichtung auf die Komposition eingestellt Ich denke, wir können die Skala auf 500 setzen. Das ist besser. Lassen Sie uns zum Schluss die Schichten zusammenklappen. Fantastisch. Und jetzt, bevor wir es animieren, konvertieren wir die Ebenen in drei D-Ebenen Da wir wissen, dass sie in einer Drei-D-Szene präsentiert werden müssen , dass sie in einer Drei-D-Szene präsentiert und wir dann die Kompositionsgröße an die Ebenen in der Komposition anpassen , lassen Sie etwas Freiraum, damit wir eine nette Pop-Animation erstellen können nette In Ordnung. Gehen wir nun zum Anfang der Timeline und erstellen eine Popup-Animation mit einer Dauer von zehn Bildern für die beiden Ebenen Ich denke, wir können es in der Mitte der Animation stärker skalieren lassen . Sieht besser aus. Jetzt können wir das V-Symbol um drei Frames verzögern , um es etwas interessanter zu machen. Ich denke, es ist zu viel. Bringen wir es einen Frame zurück. Lass uns sehen, wie das jetzt aussieht. Großartig. Ich finde es sieht toll aus. Und jetzt können wir zur Szene zurückkehren und diese Animation mit dem Rest der Szene abstimmen. Zuerst können wir den Precomp reduzieren und ihn in eine Drei-D-Ebene umwandeln Stellen wir uns nun an die Stelle, an der die Animation geendet hat, und passen die Größe der Precomp so an, dass sie in das Aufgabenfeld passt Wir können die Skala auf 30 setzen. Und jetzt verschieben wir es an die richtige Stelle. Drücken wir Cutrel oder Command Shift H , um die Ebenenhilfslinien auszublenden, damit wir sehen können, was wir tun Großartig. Und jetzt stimmen wir diese Animation mit der Szene ab. Wir können die Checkbox-Animation von hier aus starten. Großartig. Und jetzt speichern wir das Projekt, bevor wir weitermachen. Wir können jetzt alle nicht relevanten Precoms schließen und damit beginnen, die Bewegung in jedem Animationsteil dieser Demo-Flow-Animation anzupassen die Bewegung in jedem Animationsteil dieser Demo-Flow-Animation dieser Demo-Flow-Animation Wie Sie vielleicht bemerkt haben, haben wir es bis jetzt nicht einfach gemacht, einen der Keyframes zu vereinfachen Wenn Sie an langen Szenen arbeiten , die einige Animationsteile enthalten, ist es besser, sich zunächst auf die Erstellung der ersten Animation zu konzentrieren und sicherzustellen, dass das Timing stimmt, als jeden Keyframe, den wir für die Ebenen in der Szene erstellen, fertigzustellen für die Ebenen in der Szene erstellen Behalten Sie diese Methode im Hinterkopf, wenn Sie in After Effects arbeiten wir nun zur Hauptszene zurück und beginnen mit der Anpassung aller Keyframes, die wir dort zuerst erstellt haben. Stellen Sie sicher, dass keine Ebene ausgewählt ist, und drücken Sie auf Sie, um alle Keyframes zu sehen, die wir hier haben. Lassen Sie uns nun mit der Arbeit am ersten Animationsteil beginnen, dem die geteilte Animation beginnt Beschäftigen wir uns zunächst mit der Hauptbewegung, die hier passiert, nämlich der Drehung der Null , die alle Bildschirme dreht Stellen wir sicher, dass die Geschwindigkeit für die Rotations-Keyframes auf 75% eingestellt für die Rotations-Keyframes auf Im Diagrammeditor sieht das so aus. Schauen wir uns die Animation jetzt ein paar Mal an und sehen, wie sich das anfühlt. Ich denke, wir können die Geschwindigkeit auf 85% erhöhen, um eine etwas flottere Bewegung zu erzielen In Ordnung, ich denke, es sieht besser aus. Nun wollen wir uns mit dem Abwärtstrend befassen. Ich möchte, dass diese Ebene schnell ansteigt und gegen Ende langsamer wird. Wie Sie sehen können, führt dies einer Kollision des Projektbildschirms mit dem Bildschirm dahinter. Lassen Sie uns also die erste Bewegung des Projekt-Bildschirms vor der Bildkomposition auswählen und dafür sorgen, dass sie langsam startet und gegen Ende an Geschwindigkeit zunimmt, was das Gegenteil der Abwärtsbewegung der Null Dadurch wird eine bessere Geschwindigkeitssynchronisierung zwischen den beiden Animationen erreicht Jetzt können wir, wenn wir wollen, dafür sorgen, dass sich der Bildschirm des Projekts in der Mitte der Animation schneller bewegt , indem wir die Ausgangsgeschwindigkeit anpassen. Während ich das mache, achte ich darauf, das Timing zu überprüfen, damit die Kombinationen nicht kollidieren Großartig. Ich sehe also, dass die Geschwindigkeit auf diese Weise angepasst wird. Kann zur Animation passen. An diesem Punkt können wir also tatsächlich alle Schlüsselbilder des Projektbildschirms auswählen und sie einfach alle vereinfachen und dann dieselbe Geschwindigkeit für die gesamte Animation erzeugen. Bevor wir weitermachen, überprüfen wir , ob diese Kollision nicht passiert. In Ordnung, ich finde, alles sieht toll aus. Und wir können uns jetzt mit dem nächsten Animationsteil befassen , der Animation der restlichen Bildschirme Wählen wir zunächst alle Keyframes aus, vereinfachen sie und stellen dann im Diagrammeditor sicher, dass die Geschwindigkeit der Geschwindigkeit entspricht, die wir für die Nullanimation erstellt haben . In unserem Fall sollte der In unserem Fall Einflussprozentsatz sowohl für die eingehende als auch für die ausgehende Geschwindigkeit bei etwa 85% Schauen wir uns an, wie alles zusammen aussieht. Der Abwärtstrend sieht meiner Meinung nach ein bisschen komisch aus. Passen wir also die Geschwindigkeit dieser Animation an, ähnlich wie wir es für den Rest der Animation getan haben. Ich finde es toll, wie sich die Bewegung jetzt anfühlt, aber wie Sie sehen können, haben wir wieder das Kollisionsproblem. In diesem Fall können wir einfach in der Mitte der Animation der Vorkomposition des Projekts bleiben und sicherstellen, dass die Ebene auf ihrer Z-Positionsachse bewegt Mein Ziel ist es, diese Ebene etwas weiter von der Ebene dahinter Wir können es auch ein bisschen ansprechen. Und jetzt lassen Sie uns heranzoomen und überprüfen, ob diese Kollision erneut passiert. Ordnung. Ich sehe, dass alles okay aussieht, und wir sind jetzt bereit weiterzumachen. Lassen Sie uns nun Bildschirmvorkomposition des Projekts aufrufen und alle Keyframes auf allen Ebenen öffnen , um zu sehen, was wir hier anpassen können In diesem Fall haben wir uns also bereits mit der Animation der Projektfelder befasst , aber wir können die vorherigen Keyframes auf dem zweiten Teil der Ebenen der Aufgabenfelder löschen zweiten Teil der Ebenen der Aufgabenfelder Ordnung. Und jetzt gehen wir auf der Timeline hin und her, um zu sehen, ob nach dem Löschen dieser Keyframes noch alles in Ordnung aussieht nach dem Löschen dieser Keyframes noch alles in Ordnung Wir sollten keine Probleme bekommen, aber es lohnt sich trotzdem, es zu überprüfen. In Ordnung. Und jetzt wollen wir uns mit den Keyframes befassen , die wir noch nicht angepasst Wir können damit beginnen, die Keyframes dieser Ebene zu vereinfachen. Um zu sehen, welche Ebenen wir auswählen, lassen Sie uns die Ebenenhilfslinien mithilfe von Alright wieder Lassen Sie uns diese Keyframes jetzt einfach vereinfachen und dann die Geschwindigkeit auf 85% einstellen Das sieht nett aus, aber ich denke die Outtro-Animation dieses Abschnitts passiert zu schnell. Lassen wir es also etwas länger dauern , damit die Animation langsamer In unserem Fall können wir bei den zweiten fünf und fünf Bildern stehen und das letzte Keyframe einfügen Meiner Meinung nach fühlt sich die Bewegung immer noch superschnell an. Lassen Sie uns also dafür sorgen, dass diese Animation genau 1 Sekunde dauert. Wenn die Animation also bei 4 Sekunden und 22 Frames beginnt, gehen wir zu 5 Sekunden und 22 Frames über und bringen das letzte Keyframe hierher. Mal sehen, wie das jetzt aussieht. Ich kann kaum etwas erkennen, weil die anderen Ebenen bereits in die Szene eindringen. In diesem Fall isolieren wir nur die White-Box-Ebene , um uns auf ihre Bewegung zu konzentrieren. Ordnung. Ich denke, es sieht jetzt viel besser das erledigt ist, passen wir Dauer der Intro-Animation für alle Ebenen an , die nach dem ersten Animationsteil in die Szene aufgenommen werden sollen nach dem ersten Animationsteil in die Da wir die Outtro-Animation des vorherigen Abschnitts für eine Sekunde benötigt haben, bedeutet das, dass auch die Intro-Animation des neuen Abschnitts 1 Sekunde benötigt haben, bedeutet das, dass auch dauern Lassen Sie uns also wieder bei Sekunde fünf und 22 Frames stehen bei Sekunde fünf und 22 Frames und das letzte Keyframe dieser Ebene hierher bringen Als Nächstes müssen wir dasselbe für die restlichen Animationen Für diese beiden Ebenen beginnen beide bei den zweiten vier und 25 Bildern, was bedeutet, dass wir zu den zweiten fünf und 25 Bildern gehen und die letzten Keyframes hierher verschieben müssen zweiten fünf und 25 Bildern gehen und die letzten Keyframes hierher verschieben Lassen Sie uns auch dafür sorgen, dass das Intro der Aufgabenliste 1 Sekunde dauert Und vergessen wir natürlich nicht, die Checkbox-Animation auch von hier aus zu starten Großartig. Sobald das erledigt ist, fangen wir an, die Keyframes zu lockern Beginnen Sie mit den Positions-Keyframes für diese drei Ebenen stellen Sie die Geschwindigkeit Das sieht nett aus. Lassen Sie uns nun dasselbe für die Aufgabenebenen tun. Perfekt. Da wir wissen, dass dieser ganze Animationsteil gegen Sekunde neun enden sollte, können wir sehen, dass wir noch genügend Zeit haben, um diesen Punkt zu erreichen. Lassen Sie uns also einen schönen Abstand zwischen den Aufgabenebenen herstellen , um den freien Speicherplatz auszufüllen. Fügen Sie nicht zu viel Verzögerung zwischen den Ebenen hinzu , da wir immer noch ein paar Sekunden für die grüne Checkbox-Animation benötigen. das geklärt ist, lassen Sie uns diese Precomp starten, sobald die Animation der letzten Aufgabenebene abgeschlossen ist Okay, jetzt duplizieren wir diese Precomp und platzieren das neue Kontrollkästchen unter der zweiten Aufgabe Um es interessanter zu machen, fangen wir bei Sekunde sieben an. In Ordnung. Nachdem wir die Keyframes angepasst haben, zur Master-Komposition zurück und schauen uns mit dem Voiceover eine Vorschau der Animation an, um sicherzugehen kehren wir zur Master-Komposition zurück und schauen uns mit dem Voiceover eine Vorschau der Animation an, um sicherzugehen, dass alles perfekt zusammenläuft. At könnte es schaffen. Mit einem Punkt erhalten Sie einen kristallklaren Überblick über alles, woran Ihr Team gerade arbeitet. All Ihre Projekte, all Ihre Aufgaben. Alle. Mit einem Punkt erhalten Sie einen kristallklaren Überblick über alles, erhalten Sie einen kristallklaren Überblick über woran Ihr Team arbeitet, all Ihre Projekte, all Ihre Aufgaben, alles an einem Ort. Brauchen Sie das vollständige Bild. Ich sehe , dass die nächste Szene hier beginnen sollte. Um also einen statischen Frame zu vermeiden, gehen wir zurück zur Szene und fügen eine weitere grüne Checkbox-Animation für die dritte Aufgabe hinzu, nur um den leeren Bereich zu füllen. Stellen Sie sicher, dass es dieselbe Verzögerung wie das zweite Kontrollkästchen hat. Großartig. Jetzt, da wir der Erstellung des komplexesten Teils fertig sind, nämlich der Demo-Flow-Animation, können wir zur Szene zurückkehren und einige interessante Kamerabewegungen hinzufügen einige interessante Kamerabewegungen die zur Demo-Flow-Animation passen. Aber anstatt die Kamera selbst zu animieren, animieren wir die Bildschirmvorkomposition des Projekts, weil ich die bestehende Kameraanimation nicht stören möchte die bestehende Kameraanimation nicht stören Und ich möchte Ihnen auch einen einfacheren Weg zeigen, kameraähnliche Bewegungen zu erzeugen, ohne die Kamera tatsächlich Nachdem das geklärt ist, lassen Sie uns anfangen. Da das Precomp bereits Keyframes hat, erstellen wir zunächst ein neues Null-Objekt und überordnen es dem Precomp Auf diese Weise haben wir eine saubere Ebene, mit der wir arbeiten können. Erstellen Sie also ein neues Null-Objekt und bringen Sie es unter die Kameraebene. Beginnen wir mit dieser Null bei der 12-Sekunden-Marke und benennen wir sie in Nullbildschirm zwei um. Bewegen. Da es die Bewegung der Precomp mit dem Namen Scene Two-Projekte steuern wird Bewegung der Precomp mit dem Namen Scene Two-Projekte Wandeln Sie nun die Null-Ebene in eine Drei-D-Ebene um und platzieren Sie sie an derselben Position wie die Vorkomposition auf dem Projektbildschirm Sie können die Werte aus dem Precomp in den Nullwert kopieren. Wenn Sie zur benutzerdefinierten Ansicht wechseln, werden Sie sehen, dass die Null genau dort platziert wird , wo sich die Precomp Perfekt. Jetzt können wir den Precomp dem Nullwert zuordnen Bevor wir das tun, verschieben wir diese beiden Ebenen oben und schließen die Kameraebene Großartig. Überordnen Sie nun den zweiten Teil des Projekts Precomp auf Null das erledigt ist, können wir diese Precomp nun mit der Null steuern, ohne die Keyframes zu beeinträchtigen , die sich bereits in der Wenn das erledigt ist, können wir diese Precomp nun mit der Null steuern, ohne die Keyframes zu beeinträchtigen , die sich bereits in der Precomp befinden. In Ordnung. Lassen Sie uns einen interessanten Blickwinkel kreieren. Erstellen Sie zunächst einen Keyframe für die X-Rotation bei den zweiten 12 und 22 Frames Gehen Sie dann 1 Sekunde vorwärts und drehen Sie den Precomp um etwa 25 Grad Kehren Sie als Nächstes zum Anfang dieser Animation zurück. Drücken Sie P, um die Positionseigenschaft anzuzeigen und einen Keyframe mit dem aktuellen Wert zu erstellen Gehen Sie 1 Sekunde vorwärts und bringen Sie die Null näher an die Kamera heran Sobald das erledigt ist, können Sie die Keyframes einfach vereinfachen und die Geschwindigkeit im Diagrammeditor für eingehende und ausgehende Bewegungen auf etwa 85% einstellen Diagrammeditor für eingehende und ausgehende Bewegungen auf etwa 85% für eingehende und ausgehende Bewegungen Großartig. Schauen wir uns jetzt an , wie das aussieht. Ich finde, es sieht toll aus, aber meiner Meinung nach sollten wir diesen Antrag etwas früher stellen. Nehmen wir an, ab Sekunde 12 und 10 Frames. Lassen Sie uns die Schlüsselbilder der Precomp-Animation öffnen und die Null-Animation so einstellen , dass sie in der Mitte der Precomp-Animation beginnt der Mitte der Precomp-Animation In Ordnung, ich denke, jetzt geht es uns gut. Aber wie Sie vielleicht bemerkt haben, können wir den nächsten Abschnitt unten sehen Lass uns den Precomp aufrufen und das beheben. Öffnen Sie zunächst die Keyframes der weißen Hauptbox und stellen Sie sich auf den ersten Erst dann die Ebene etwas weiter herunterfahren. Gehen Sie jetzt zurück zur Szene und überprüfen Sie es. Das sieht besser aus. Ich denke, wir können die Animation der Checkboxen auch etwas verzögern Animation der Checkboxen auch etwas Später werden wir dieser Szene eine Cursoranimation hinzufügen. Und ich hätte gerne ein paar freie Frames, um entweder eine Intro-Animation für den Cursor oder eventuell eine Animation zur Vergrößerung der Aufgabe mit der Checkbox zu erstellen entweder eine Intro-Animation für den Cursor oder eventuell eine Animation zur Vergrößerung der Aufgabe mit der Checkbox Nachdem das geklärt ist, geben wir den Precomp ein und verschieben die drei Checkbox-Precomps so , dass sie bei den zweiten sieben und zehn Frames beginnen Perfekt. Gehen wir nun zurück zur Szene und bringen die Null genau zu diesem Zeitpunkt noch näher an die Kamera, bringen die Null genau zu diesem Zeitpunkt noch näher an die damit wir die ersten drei Aufgaben aus der Nähe sehen können. Wir können auch mit der Drehung herumspielen , um einen interessanteren Winkel zu erhalten. Vergiss nur nicht den obigen Text. Versuchen Sie, den UI-Bildschirm nicht zu weit in diesen Bereich zu bringen . Großartig. Passen wir nun auch für diese Animation die Geschwindigkeit auf etwa 85% an. Wenn Sie das tun, stellen Sie sicher, dass Sie beide Eigenschaften anpassen. In diesem Fall vermisse ich die Rotation. Also werde ich die Key-Frames einfach noch einmal lockern , um die Beschleunigung zurückzusetzen und sie dann richtig anzupassen Sobald das erledigt ist, wollen wir sehen, was wir haben. Uh, sieht toll aus. Um der Szene eine sanfte Bewegung zu verleihen, können wir kurz hinter der Szene stehen, sollten sie beenden und die Kamera etwas näher an den Bildschirm der Benutzeroberfläche bringen . Das ist ein gutes Beispiel dafür, warum es besser ist , für komplexe Winkel ein Null-Objekt zu verwenden , anstatt direkt mit der Kamera zu kämpfen. Für einfachere Bewegungen können Sie die Kamera jederzeit behalten. Ich denke, wir können es noch näher bringen . Lass uns nochmal zuschauen. In Ordnung, ich finde, es sieht toll aus. Gehen wir jetzt zurück zur Master-Komposition und sehen uns eine Vorschau mit dem Voiceover hinweg zu verwalten nicht einfach, ein großes Team über mehrere Projekte Zu viele Aufgaben, Fragen, zu viele. Bevor du dich versiehst, stöhnen Sie vor Kosten und suchen nach einem Punkt Punkt. Die Plattform, die das Projektmanagement so einfach macht, dass sogar Ihre Katze es tun könnte. Mit einem Punkt bekommst du ein Crist Yes. Alles Projekte. Alle Ihre Aufgaben an einem Ort. Das ganze Bild? Perfekt. Es sieht so aus, als ob alles synchronisiert ist. Lassen Sie uns also den Zeitpunkt finden, an dem die Outtro-Animation für die gesamte Szene gestartet die Outtro-Animation für die gesamte Aus dem Voice-Over hört es sich so an, als ob das etwa in Sekunde 27 beginnen sollte Lassen Sie uns hier stehen, dann betreten wir die Szene und ich zeige Ihnen, wie Sie eine einfache Outtro-Animation erstellen , die übergeht mit einem Matchcut perfekt in die nächste Szene Zuerst müssen wir den letzten Keyframe der Kamera so anpassen , dass er hier endet Bewegen Sie sich nun 1 Sekunde vorwärts und drücken Sie die Kamera nach hinten. Lassen Sie uns das Panel der Einfachheit halber skalieren. Gehen Sie jetzt zum Anfang des Outro und öffnen Sie auch die Null-Keyframes Erstellen Sie Keyframes mit den aktuellen Werten für beide Eigenschaften, da wir nicht möchten, dass sie sich bis zu Gehen Sie dann 1 Sekunde vorwärts und passen Sie den Nullwert so an, dass der Bildschirm der Benutzeroberfläche gut zur Mitte ausgerichtet ist Wir können die Kamera noch weiter nach hinten schieben und sie leicht nach oben bringen . Großartig Wir sind fast da. Seit wir die Kamera rückwärts bewegt haben Wir können jetzt einige der vorherigen Animationsebenen sehen. Um das zu beheben, müssen wir nur den Punkt in der Timeline finden, an dem wir zu 100% sicher sind , dass diese Ebenen nicht mehr benötigt werden. In diesem Fall ist das der Zeitpunkt, an dem die Animation unserer ersten Null beendet ist. Wir können diese Null auch bis zum Ende ihrer Animation kürzen. Das ist der perfekte Ort, um den Rest der Bildschirme, die überlagert wurden, auf diese Null zuzuschneiden den Rest der Bildschirme, die überlagert wurden, auf diese Null Wählen Sie also alle aus und drücken Sie die Alt-Klammer mit der rechten Klammer, um sie zuzuschneiden. Fantastisch. Nachdem das erledigt ist, kehren wir zu unserer Outtro-Animation zurück An diesem Punkt können wir beginnen, die Bewegung anzupassen. Wählen Sie zunächst das Null-Objekt aus und drücken Sie U, um sicherzustellen, dass wir keine Schlüsselbilder übersehen haben. Großartig. Wählen Sie nun alle Keyframes aus und drücken Sie F neun oder F und F neun, wenn Sie einen Mac verwenden Öffnen Sie als Nächstes den Speedgraph-Editor und passen Sie die Geschwindigkeit näher an 95% an Wir machen das , weil wir diesen Match-Cut-Übergang schaffen wollen . Und damit das funktioniert, muss der Antrag sehr schnell einen Höhepunkt erreichen. Stellen Sie sich nun an den Punkt in der Grafik, an dem die Bewegung am schnellsten ist. Gehen Sie dann zurück zur Master-Komposition und schneiden Sie die Precomp genau auf diesen Punkt zu Auf diese Weise setzen wir die Bewegung in der nächsten Szene, die wir erstellen, nahtlos fort Mehr dazu in der nächsten Lektion. Lassen Sie uns zunächst zur Szene zurückkehren und ihre Dauer anpassen. Schneide sie nicht zu kurz vor dem Ende der Outtro-Bewegung zu. Gehen Sie stattdessen 1 Sekunde vorwärts und kürzen Sie die Timeline bis zu diesem Punkt Großartig. Sobald das erledigt ist, rufen Sie den Bildschirm vor der Berechnung auf. Nur um das noch einmal zu überprüfen, wir haben nichts verpasst. Hier sieht alles gut aus und wir müssen diesen Zeitplan nicht kürzen. Also lass uns weitermachen. Jetzt können wir die Dinge ein wenig bereinigen, die unnötigen Precoms schließen und dann zur Master-Komposition zurückkehren, um uns auf die Animation der nächsten Szene vorzubereiten Bevor wir zum Abschluss kommen, organisieren wir auch das Projekt, indem wir die Aufgabe, die vor der Erstellung erledigt wurde, in den Precomps-Ordner verschieben Precomps-Ordner Machen Sie dasselbe mit dem Cat Jeff Precomp . Sobald das erledigt ist, speichern Sie das Projekt. Und damit haben wir diese Lektion beendet. Und in der nächsten werden wir den Match-Cut-Übergang abschließen und mit der Erstellung der nächsten Demo-Flow-Animation beginnen. Es wird gut werden. Also wir sehen uns dort. 18. Erstellen der Titelanimationsvorlage: Komm zurück. Beginnen wir die Lektion damit, dass wir zur Videotafel gehen und nachschauen was wir als Nächstes tun müssen Wie Sie sehen können, müssen wir jetzt die Titelanimation erstellen Diese Titelanimation wird in den nächsten Szenen des Projekts jedes Mal mit einem anderen Text erscheinen . Wie Sie sehen können, haben wir sie auch hier. Alle Fragen im Skript werden auf ähnliche Weise dargestellt. Im letzten Teil wird diese Titelanimation wie unsere erste Titelanimation zu Beginn dieses Videos sein . Okay, jetzt, wo wir wissen, dass wir ein paar gleiche Titelanimationen haben werden, können wir sie so strukturieren, dass es für uns einfach ist, sie zu duplizieren und einfach den Text zu ändern Lassen Sie uns vor diesem Hintergrund eine neue Komposition für die erste Titelanimation erstellen eine neue Komposition für die erste Titelanimation Nennen wir es Haupttitel eins. Stellen Sie sicher, dass Sie die Auflösung auf Full HD ändern und überprüfen Sie, ob die restlichen Einstellungen in Ordnung sind. Großartig. Wählen wir nun das Textwerkzeug und gehen wir zum Skript, um den Text für die erste Titelanimation zu kopieren . In unserem Fall ist es diese Frage. Zurück zum Projekt. Lassen Sie uns den Text einfügen und anpassen. Stellen Sie zunächst sicher, dass der Absatz zentriert ist. Und jetzt wollen wir sehen, welche Größe hier gut funktionieren kann. Ich finde 150 großartig. Wählen Sie als Nächstes die Fettstärke für die Schrift und richten Sie die Ebene dann an der Mitte des Kommas aus. Schließlich können wir den Ankerpunkt zentrieren. dazu den Controller-Befehl gedrückt und doppelklicken Sie auf das AnchorPoint-Tool Großartig. Und jetzt wechseln wir zurück zum Auswahlwerkzeug und machen diese Komposition ein bisschen interessanter. Zunächst können wir die Hintergrundanimation mit Farbverlauf einfügen, die wir zu Beginn des Projekts erstellt haben . Und jetzt möchte ich Ihnen einige grundlegende Tricks zeigen, mit denen Sie den Farbverlauf etwas anders aussehen lassen können den Farbverlauf etwas anders aussehen als die übrigen Szenen in diesem Projekt. Das kann eine gute Idee sein, weil wir entscheiden können , dass der Hintergrund für die Titelanimationen etwas anders aussieht der Rest des Projekts, um es ein bisschen interessanter zu machen. Richtig. Der erste Trick, den ich gerne mache, wenn ich Gradientenanimationen habe, besteht darin, den Invertierungseffekt hinzuzufügen Jetzt kann ich hier die Kanäle wechseln, um einige interessante Variationen für den Farbverlauf zu erhalten Ordnung. Nehmen wir zunächst an, wir entscheiden uns für Luminanz. Wenn wir die Ansicht vergrößern, können wir die Pixel sehen , die den Farbverlauf von geringer Qualität erscheinen lassen Um dies zu beheben, können wir den Fast Booxplur-Effekt hinzufügen. Stellen Sie dann sicher, dass Sie den Unschärferadius auf eine hohe Zahl einstellen den Unschärferadius auf Ich denke, 20 sind in unserem Fall genug. das Aussehen zu verbessern, können wir als Nächstes auch den Farbton- und Sättigungseffekt hinzufügen und die Master-Sättigung auf höheren Wert erhöhen, um ein interessantes Aussehen für den Farbverlauf zu erhalten Wie Sie sehen können, entstehen dadurch schöne Kontrastpartien im Farbverlauf Und wenn Sie jetzt die Farbe des Verlaufs ändern möchten, können Sie mit der Master-Farbtoneigenschaft herumspielen. Wenn Sie jedoch die vollständige Kontrolle über die neuen Farben haben möchten , können Sie den Tonereffekt hinzufügen. Lassen Sie uns nun den Invertierungseffekt löschen damit wir sehen können, was wir mit dem Tonereffekt mit unseren Originalfarben machen können . In Ordnung. Um also zunächst mehr Töne in unserem Farbverlauf kontrollieren zu können, können wir die Töne auf Penton ändern Jetzt haben wir fünf Farbtypen, die wir steuern können. Jetzt können wir die Farbpalette zur Komposition hinzufügen und damit beginnen, die verschiedenen Töne, die wir jetzt haben, anzupassen Nehmen wir an, ich möchte, dass dieser Farbverlauf violetter aussieht, also fange ich an, die violetten Farben auszuwählen Ich zeige Ihnen diese Tricks weil ich möchte, dass Sie wissen, dass Sie die vollständige Kontrolle über die Farben Ihres Verlaufshintergrunds haben , unabhängig davon, ob Sie ihn selbst rendern oder Verlaufsanimation aus dem Internet herunterladen. Manchmal lieben wir die Bewegung des Verlaufs, aber wir haben sie nicht in den exakten Farben, die zur Palette unseres Kunden passen müssen. Jetzt wissen Sie also, wie Sie jeden Farbverlauf an Ihre Projektanforderungen anpassen können . In Ordnung. Nachdem das geklärt ist, löschen wir den Tonereffekt und passen unseren Hintergrund mit den Tonereffekt und Farbverlauf weiter an. Wenn Sie die Pixel immer noch sehen können, können Sie den Unschärferadius skalieren Beachten Sie außerdem, dass die Reihenfolge der Effekte auch das Aussehen des Verlaufs beeinflussen kann Wie Sie sehen können, sieht der Farbverlauf etwas besser aus, wenn Sie den Unschärfeeffekt unter dem Farbtoneffekt haben den Unschärfeeffekt unter dem Farbtoneffekt etwas besser aus, wenn Sie den Unschärfeeffekt unter dem Farbtoneffekt Okay, jetzt, wo wir mit dem Aussehen der Titelkomposition zufrieden sind, können wir anfangen, sie zu animieren Es gibt unendlich viele Möglichkeiten, dies zu tun, aber ich möchte zeigen, wie Sie Ihr Projekt auch mit einer sehr einfachen Animation gut aussehen lassen können Ihr Projekt auch mit einer sehr einfachen Animation gut aussehen lassen auch mit einer sehr einfachen Lassen Sie uns zunächst die Skala für beide Ebenen öffnen. Stellen wir nun die Skala auf 200 ein. Wir können die Textebene auf 400 setzen , um eine etwas interessantere Bewegung zu erzielen. Erstellen Sie nun einen Keyframe am Anfang der Timeline. Gehen wir als Nächstes 1 Sekunde vorwärts und bringen die Skala für beide wieder auf 100 Der Text sieht zu groß aus. Stellen wir die Skala auf 90 ein. Lassen Sie uns als Nächstes die Keyframes vereinfachen und die Geschwindigkeit für beide auf etwa 95% einstellen die Geschwindigkeit für beide auf etwa 95% Das Ziel ist es, eine superschnelle Bewegung zu erzeugen. Mal sehen, wie das aussieht. In Ordnung. Das sieht vorerst gut aus. Also haben wir jetzt das Intro für den Titel erstellt Lassen Sie uns jetzt das Outro erstellen. Aber vorher gehen wir zum Videoboard und schauen, wie lange diese Animation dauern soll Sie beginnt bei den zweiten 27 und 15 Frames, und jetzt wollen wir sehen, wo sie bei den zweiten 29 und zehn Frames endet zweiten 29 und zehn Frames Das heißt, wir haben etwas mehr als 2 Sekunden für diese Animation. Also jetzt zurück zur Titelkomposition. Lassen Sie uns eine kurze Pause für die Animation erstellen , damit der Zuschauer den Text lesen kann Lassen Sie uns dafür sorgen, dass die Pause zehn Frames dauert. Lassen Sie uns jetzt hier einen Keyframe mit den gleichen Werten erstellen. Gehen wir dann 1 Sekunde vorwärts und kopieren die ersten Keyframes hierher Jetzt müssen wir sicherstellen, dass die Bewegung dem Intro ähnelt Wie Sie sehen können, ist es das nicht. Lassen Sie uns also einfach die Outtro-Keyframes vereinfachen, um die Geschwindigkeit zurückzusetzen und sie dann auf 95% einzustellen Mal sehen, wie das aussieht. Ich denke, die Zeit reicht nicht aus, um den Text zu lesen. Lassen Sie uns die Pause für weitere fünf Frames dauern. Dies ist der Punkt, an dem wir die Animation beenden werden , um einen schönen Match-Cut-Übergang zu erhalten , der für fast jede Szene geeignet ist. In Ordnung. Und jetzt fügen wir der Animation ein kleines Detail hinzu, um den Fokus des Betrachters auf das wichtige Wort in diesem Text zu lenken. In meinem Fall möchte ich unter dem Wort eine schöne Strichanimation hinzufügen . Lass mich dir zeigen, was ich meine. Stellen Sie zunächst sicher, dass keine Ebenen ausgewählt sind. Wählen Sie dann das Stiftwerkzeug aus. Sie nun sicher, dass Sie die Füllfarbe ausschalten und die Konturfarbe einschalten. Für die Farbe des Strichs bringen wir die Farbpalette in die Komposition und entscheiden uns für eine helle Farbe, damit sie hohen Kontrast zum Hintergrund sodass wir sie deutlich sehen können Ordnung. Lassen Sie uns nun die Farbpalette löschen und eine Zeile unter dem Wort „ Voll“ für die Strichstärke erstellen. Wir können es auf 20 stehen lassen. Lassen Sie uns nun einen zusätzlichen Punkt im Pfad erstellen und ihn aufrufen. Dann biegen wir ihn ab und passen die Griffe an, um eine schöne abgerundete Linie zu erhalten. Lass es uns ein bisschen runterholen. Großartig. Jetzt ändern wir den Namen in Stroke und beginnen, ihn zu animieren Und wir werden es mit dem Trim Path-Effekt machen. Lassen Sie uns zunächst an zweiter Stelle stehen und einen Keyframe für die Endeigenschaft erstellen Wenn Sie möchten, dass sich Ihr Strich aus der anderen Richtung bewegt, können Sie die Stricheigenschaften öffnen und die Pfadrichtung ändern Ordnung. Ich werde es wieder so machen, wie es war. Und jetzt animieren wir es. Setzen Sie zu diesem Zeitpunkt die Eigenschaft end auf Null. Gehen wir nun zum Ende des Pausenmoments und setzen den Endwert auf 100. Großartig. Und jetzt stehen wir fünf Frames hinter dem Beginn der Animation und erstellen einen Keyframe für die Start-Eigenschaft mit dem Wert Null Stellen Sie als Nächstes fünf Frames hinter dem Ende der Animation auf und setzen Sie den Startwert auf 100 Jetzt haben wir eine schöne Strichanimation. Lassen Sie uns den Strich etwas länger sichtbar machen, und das können wir tun, indem mit der Geschwindigkeit der beiden Animationen herumspielen. Wählen wir zunächst die End-Keyframes und sorgen dafür, dass die Animation schnell startet Danach lassen wir die Start-Keyframes langsam starten. Auf diese Weise haben wir das Timing zwischen diesen beiden Animationen angepasst , sodass der Strich noch einige Frames sichtbar ist, bevor er verschwindet Großartig. Nachdem wir mit der ersten Animation der Titelanimation fertig sind, fügen wir der Szene eine zusätzliche sanfte Vergrößerungsbewegung hinzu, damit sie nicht statisch aussieht. Lassen Sie mich Ihnen zeigen , wie das schnell geht. Lassen Sie uns zunächst eine neue Einstellungsebene über allen Ebenen erstellen . Als Nächstes fügen wir den Transformationseffekt hinzu. Gehen wir nun zum Anfang der Timeline, setzen die Skala auf 120 und erstellen hier einen Keyframe. Gehen wir nun zu einem Zeitpunkt, an dem wir sicher sind , dass die Animation bereits beendet sein sollte In unserem Fall können wir bei der Drei-Sekunden-Marke stehen und die Skala jetzt auf 100 setzen. Wenn Sie sich nun die Animation ansehen, werden Sie feststellen, dass wir eine nette, sanfte Verkleinerungsbewegung erhalten , und die Animation fühlt sich besser an, weil sich die Szene auch im Pausenmoment und die Animation fühlt sich besser an , weil sich die Szene auch im Pausenmoment bewegt. Ordnung? Damit sind wir mit der Erstellung der Titelanimation fertig Wir können die Qualitäts- und Sampling-Funktion aktivieren , um die beste Qualität für den Gradienten-MP zu erzielen. Als Datei haben wir hier. Gehen wir jetzt zu Sekunde vier und kürzen den Computer auf diesen Zeitpunkt. Gehen wir zurück zum Master-Comp und bringen den Titel Precomp Und jetzt, um einen coolen Match-Cut-Übergang zu bekommen, lassen Sie uns den Titel-Precomp von dem Zeitpunkt an beschneiden, an dem die Intro-Animation superschnell ist dem die Intro-Animation Um sicher zu wissen, wo es sich befindet, können wir den Precomp aufrufen und den Zeitpunkt ermitteln an dem die Animation einer der Ebenen In unserem Fall ist es hier bei Frame 15. Wir können einen Frame rückwärts bewegen und dann zum Master-Comp zurückkehren und den Precomp auf diesen Zeitpunkt kürzen den Precomp auf diesen Wenn Sie sich nun die Animation zwischen der letzten Szene und dem Titel ansehen , werden Sie feststellen, dass wir einen supercoolen Match-Cut-Übergang haben supercoolen Großartig. Lassen Sie uns jetzt diesen Pre Cont vom Ende aus zuschneiden, auch zu dem Zeitpunkt, an dem der Outtros Höchstgeschwindigkeit herausläuft, um einen geschnittenen Übergang zur nächsten Szene zu bekommen Fantastisch. Nachdem das erledigt ist, können wir jetzt mit der Arbeit an der nächsten Szene beginnen. Bevor Sie das tun, schlage ich vor, dass Sie das Projekt speichern, um den bisherigen Fortschritt zu sichern. Ordnung. Und jetzt gehen wir zurück zum Videoboard und schauen uns an, welche Szene wir als Nächstes erstellen müssen Okay, wie Sie sehen können, müssen wir jetzt am Hauptbildschirm der Benutzeroberfläche der Aufgabe arbeiten Aus dem, was wir im Storyboard sehen, können wir deutlich erkennen, dass wir eine kurze Demo-Flow-Animation erstellen müssen eine kurze Demo-Flow-Animation Ich spreche davon, eine Intro-Animation für das Pop-up zu erstellen , das wir hier sehen Um das besser zu verstehen, lassen Sie uns diesen UI-Bildschirm vorab öffnen und sehen, was wir Okay, hier sehen wir das Pop-up, das die Unteraufgaben für die Hauptaufgabe präsentiert, die in diesem Fall das Entwerfen des neuen Dashboards ist Ich weiß es, weil ich es im Titel dieses Popups sehen kann . Großartig. Lassen Sie uns vor diesem Hintergrund eine neue Komposition für die neue Szene erstellen , in der wir diese Demo-Flow-Animation erstellen werden diese Demo-Flow-Animation Nennen wir diese Pre-Comp-Szene fünf. Vergewissern Sie sich, dass die Einstellungen korrekt sind, und klicken Sie auf Okay. Großartig. Also hier ist die neue Szene vor dem Spiel. Und jetzt ziehen wir den Bildschirm vor der Erstellung der Aufgabenoberfläche in die Zeitleiste der neuen Szenenkomposition in die Zeitleiste der neuen Szenenkomposition Später werden wir hier den Text und die Cursoranimation hinzufügen und die Cursoranimation Aber konzentrieren wir uns vorerst auf die Erstellung der Demo-Flow-Animation. Als erstes können wir hier alle Ebenen auswählen und sie reduzieren. Ich habe nicht vor, die Szene in einem Drei-D-Raum zu animieren, daher werde ich die Ebenen nicht in Drei-D-Ebenen umwandeln Okay. Und jetzt wählen wir alle Ebenen aus, die sich auf das Popup-Design beziehen, und erstellen eine Unterkomposition. Da wir diese Schattenebene haben, ist es einfacher zu verstehen, welche Ebenen ausgewählt werden müssen, angefangen bei dieser Ebene und allen anderen Ebenen darüber Du kannst die gewählte Ebene ein- und ausschalten , um sicherzugehen, dass du alles richtig gemacht hast. Ordnung. Und jetzt lassen Sie uns sie alle zusammenstellen. Wir können diesen Precomp-Bildschirm für Pop-up aufrufen. Großartig. Lassen Sie uns jetzt den Precomp zusammenklappen und sicherstellen, dass sich der Ankerpunkt in der Mitte befindet. Fantastisch. Und jetzt schalten wir auch das Pop-up in der Schattenebene und bereiten den Rest des Designs für die Animation vor. An diesem Punkt müssen wir verstehen, welche Ebenen wir unterkomponieren sollten und was Und natürlich hängt alles davon ab, welche Animation wir hier erstellen wollen In unserem Fall ist es am wichtigsten zu wissen, dass wir für diese Aufgabe eine Klick-Animation erstellen müssen , da sich das Pop-up, das wir im Design haben, darauf bezieht. Aber bevor ich das mache, werde ich sicherstellen, dass die Aufgabenfelder eine weiße Füllung haben. Ich habe vergessen, das in der Vorbereitungsphase in Illustrator Aber es ist völlig in Ordnung. Wie ich schon sagte, das kann uns allen passieren. Und für mich ist es wichtig, Ihnen einen realistischen Arbeitsablauf zu zeigen . In Ihrem Fall müssen Sie nichts tun, da Sie meine fertigen Illustrator-Dateien bereits haben Deshalb werde ich diesen Vorgang ein wenig beschleunigen, da ich nur die entsprechenden Ebenen finde und sicherstelle, dass eine Füllfarbe auf Weiß gesetzt wird die entsprechenden Ebenen finde und sicherstelle , dass eine Füllfarbe auf Weiß gesetzt Großartig. Und jetzt, nachdem ich die Datei gespeichert habe, gehe ich zurück zum Projekt und warte, bis es aktualisiert ist. Fantastisch. Sobald ich alles aktualisiert habe, speichere ich das Projekt und Sie können es weiter verfolgen. Gehen wir zurück zum Videoboard und überprüfen, wie viele Sekunden die Szene dauern sollte Es wird uns helfen zu verstehen, wo wir die Szene beenden müssen und wie lange der Animationsteil dauern sollte Die Szene beginnt also bei Sekunde 29 und 15 Frames und endet bei Sekunde 38 und 28 Frames. Das bedeutet, dass wir etwas mehr als 7 Sekunden Zeit haben, um alle Animationen zu präsentieren, die hier passieren. diesem Hintergrund können wir jetzt die Vorkomposition zusammenklappen und mit der Arbeit am Intro dieses Bildschirms beginnen der Arbeit am Intro dieses Bildschirms Ich bevorzuge es, das Intro zuerst zu beenden, damit ich mit Sicherheit weiß, wo ich mit der Demo-Flow-Animation beginnen muss, die nach dem Intro kommen muss Das ist besser, als zuerst den Demo-Flow zu erstellen und dann die Keyframes nach der Erstellung des Intros anzupassen Großartig. Da wir also im Outtro der Titelanimation eine Animation mit schnellem Zoomen haben, können wir eine schnelle Zoom-In-Animation für das Intro dieser Szene erstellen , um einen coolen Match-Cut zu erhalten Übergang. Lassen Sie uns also eine maßstabsgetreue Animation für diese Vorkomposition erstellen, ausgehend von einer Skala von 50. Und dann, nach 1 Sekunde, stellen Sie die Skala nicht auf 100 , weil wir etwas Platz für den Text benötigen , wir können ihn auf 80 setzen Großartig. Vor diesem Hintergrund erstellen wir auch eine Positionsanimation. Ich möchte, dass der Bildschirm hier unten ist. Wir können das Safe Action Grid verwenden, um sicherzugehen, dass wir es nicht zu weit nach unten verschieben. Alles klar? Passen wir nun die Geschwindigkeit an, sodass die Bewegung in der Mitte der Animation superschnell abläuft. Das wird der Punkt sein, an dem wir mit der Vorbereitung beginnen werden. Lass uns jetzt zum Master Comp gehen und die neue Szene hierher bringen Lasst uns jetzt die Szene betreten und an der schnellsten Stelle stehen Lassen Sie uns abschließend zum Master Comp zurückkehren und diesen Pre-Comp auf diesen Zeitpunkt zuschneiden diesen Pre-Comp auf diesen Zeitpunkt Und jetzt müssen wir nur die Szene so platzieren, dass sie direkt nach der Titelanimation beginnt , und überprüfen, wie alles zusammen aussieht Fantastisch. Ich finde, der Match Cut funktioniert perfekt. Jetzt können wir die Szene aufrufen und mit Animation der Demo-Flow-Animation beginnen, die direkt nach dem Intro Lassen Sie uns die Aufgaben vor der Erstellung eingeben und mit der Arbeit beginnen. Ordnung, wir können hier also eine nette Pop-Out-Animation für alle Aufgaben im Hauptbereich hier erstellen für alle Aufgaben im Hauptbereich Ab diesem Zeitpunkt werden wir also wie immer einen Keyframe für die Skalierungseigenschaft mit dem aktuellen Wert erstellen , damit Lassen Sie uns diese Ebenen mit einer anderen Farbe kennzeichnen. Gehen wir als Nächstes eine Sekunde weiter und erstellen hier einen weiteren Keyframe. dann in der Mitte Lassen Sie uns dann in der Mitte dieser Animation alle vergrößern 120 sieht gut aus. Großartig. Bevor wir nun die Keyframes anpassen, beenden wir zunächst die Animation und das Timing der gesamten Jetzt, nach der Pop-Out-Animation, möchte ich für einige der ersten Aufgaben eine Checkbox-Animation hinzufügen für einige der ersten Aufgaben eine Und da ich eine fertige Checkbox-Animation in einem separaten Precomp habe , können wir diese Ebenen jetzt von hier löschen Später werden wir die Checkbox Pre Comp hinzufügen, die wir zuvor vorbereitet haben Lassen Sie uns zunächst die Klick-Animation für die dritte Aufgabe erstellen die Klick-Animation für die dritte Aufgabe Aber anstatt diese Ebene zu animieren, verwenden wir ein Null-Objekt Und das liegt daran, dass der Ankerpunkt auf dieser Ebene zentriert ist und ich ihn nicht ändern oder mit den Keyframes herumspielen möchte , die ich bereits auf dieser Ebene habe . Lass mich dir zeigen, was ich meine Lassen Sie uns nun ein neues Null-Objekt und ein kleines Setup für die Klick-Animation erstellen. Bringen Sie die Null so, dass sie sich in dem Bereich befindet, von dem aus die Klick-Animation ausgelöst werden soll. Wir können den Namen in den Namen der Ebene ändern , die der Ebene übergeordnet werden soll In unserem Fall ist es die Ebene mit der Nummer 100, also können wir sie Null 100 nennen Sobald wir fertig sind, überordnen wir die entsprechende Ebene der Null. Und jetzt erstellen wir ab der zweiten Sekunde, also nach der Pop-Out-Animation, nach der Pop-Out-Animation, eine Verkleinerungsanimation für die Null Lassen Sie uns dafür sorgen, dass sie 15 Frames lang hält. Ordnung. Sobald wir die Klick-Animation haben, können wir diese Ebene so zuschneiden, dass entsprechend den Keyframes beginnt und endet Später können wir diese Null zeitlich rückwärts oder vorwärts verschieben , falls die Klickanimation zu einem anderen Zeitpunkt stattfinden soll einem anderen Zeitpunkt stattfinden Ordnung. Nachdem das erledigt ist, arbeiten wir weiter am nächsten Animationsteil, dem Intro des Unteraufgaben-Popups Nach der Klick-Animation sollte zunächst die Schattenebene erscheinen Bringen wir es also hierher. Und jetzt erstellen wir eine 1 Sekunde lange Fade-In-Animation mit der Opacity-Eigenschaft eine 1 Sekunde lange Fade-In-Animation Wenn die Animation bei Sekunde zwei und 15 Frames beginnt, sollte sie bei Sekunde drei und 15 Frames enden Okay. Und jetzt, um das ein bisschen interessanter zu machen, fügen wir auch eine nette Unschärfe-Animation Lassen Sie uns dazu zunächst eine neue Einstellungsebene erstellen. Platzieren wir es über der Schattenebene und verschieben wir es so, dass es dort beginnt, wo der Schatten beginnt. Als Nächstes müssen wir diese Einstellungsebene nur innerhalb der Grenzen der Hauptform dieses UI-Bildschirms sichtbar machen nur innerhalb der Grenzen der Hauptform dieses UI-Bildschirms sichtbar , da wir nicht möchten, dass Objekte außerhalb dieses Bereichs verschwommen sind Wir brauchen nur den Bildschirmbereich, der verschwommen ist. Dazu können wir einfach die Einstellungsebene erstellen das Alpha der Hauptbox verwenden Vergessen Sie nicht, die Box-Ebene wieder einzuschalten , so dass wir die Einstellungsebene maskiert Okay. Fügen wir nun der den Fast-Box-Unschärfeeffekt hinzu Einstellungsebene den Fast-Box-Unschärfeeffekt hinzu und erstellen eine Animation für den Unschärferadius Wenn wir den transparenten Hintergrund einschalten, werden wir feststellen, dass die Unschärfe nur die Bildschirmgrenzen der Benutzeroberfläche abdeckt , was wir wollen Das bedeutet, dass, falls wir neue Elemente hinter der Einstellungsebene hinzufügen , nur die Teile hinter den Grenzen der UI-Bildschirmform unscharf Grenzen der UI-Bildschirmform Ordnung. Ich lösche die Form und animiere die Unschärfe Zunächst können wir den Namen der Einstellungsebene in Weichzeichnen ändern Einstellungsebene in Weichzeichnen Lassen Sie uns nun den Unschärferadius zu diesem Zeitpunkt auf Null setzen und Keyframes erstellen Gehen wir als Nächstes eine Sekunde vorwärts und setzen die Unschärfe auf eine höhere Zahl. Vielleicht zehn Ich denke, das ist zu viel. Versuchen wir es mit fünf. Ja, das ist besser. Großartig. Sobald wir das getan haben, bringen wir den Popup-Precomp hierher und erstellen mit der Eigenschaft scale eine einfache Pop-Out-Animation scale eine einfache Pop-Out-Animation dafür Großartig. Ich finde, es sieht gut aus und wir können jetzt weitermachen. Nach der Popup-Animation müssen wir im Popup-Precomp eine Checkbox-Animation hinzufügen im Popup-Precomp Da wir bereits einen fertigen animierten Precomp dafür vorbereitet haben , können wir das in einer Minute erledigen Konzentrieren wir uns zunächst darauf, die Bewegung für die Keyframes zu verbessern , die wir Aber bevor wir das tun, ist mir gerade aufgefallen, dass die Einstellungsebene nicht den unteren Teil dieses Abschnitts erreicht Um dieses Problem schnell zu beheben, können wir den Alpha-Kanal im Hauptfeld dieses UI-Bildschirms verwenden , um es zu maskieren. Großartig. Jetzt sehen wir den unteren Teil des weißen Felds dieses Abschnitts nicht mehr, und wir können mit der Verbesserung der Bewegung fortfahren. Lassen Sie uns zunächst mit den Aufgabenebenen beginnen. Lassen Sie uns dafür sorgen, dass sie vom Anfang der Animation an schnell auftauchen . Mir ist aufgefallen, dass ich die erste Aufgabe verpasst habe, nämlich die unterste Ebene hier im Ebenenbedienfeld. Lassen Sie mich die Bewegung hier ganz schnell anpassen. Es ist ein gutes Beispiel , um immer sicherzustellen, dass Sie alle Keyframes erhalten, die Sie anpassen wollten Ordnung. Wenn das erledigt ist, bin ich mit der Bewegung zufrieden, und um sie etwas interessanter aussehen zu lassen, erstelle ich einen Offset von einem Frame zwischen den Keyframes, um eine schöne Verzögerung zu erzeugen Mal sehen, wie das aussieht. Ich denke, wir können die Verzögerung vergrößern. Nehmen wir an, zwei Frames versetzt. Dazu stelle ich zwei Frames hinter der ersten Aufgabe (Keyframes) und stelle dann sicher, dass sich die zweite Aufgabe von diesem Punkt aus bewegt Diesmal verwende ich die neue Offset-Funktion Ich werde also darauf achten, dass die Keyframes nicht aus der oberen Ebene ausgewählt Ich wähle sie aus der unteren Ebene , weil ich möchte, dass der Versatz in der Richtung nach rechts verläuft Ordnung. Ich finde, es sieht toll aus Passen wir nun das Intro für den nächsten Teil an Animation der Aufgabenebene an das erledigt ist, beginnen wir nun mit der Anpassung des nächsten Animationsteils, den wir hier haben, und beginnen mit der Klick-Animation Passen wir nun den Schatten und die Unschärfeanimation an. Lass uns schnell loslegen. Lassen Sie uns nun mit der Popup-Animation befassen. Wir können die Geschwindigkeit der Skalierungs-Keyframes auf 85% einstellen und sehen, wie das aussieht Ich finde, es sieht toll aus und wir können mit dem nächsten Animationsteil weitermachen , der direkt nach der Popup-Animation beginnt Lassen Sie uns hier stehen und den Precomp aufrufen , um die Checkbox-Animation hinzuzufügen , die hier sein muss Lassen Sie uns als Erstes die Ansicht vergrößern , damit wir sehen können, was wir besser machen Und jetzt verwenden wir, anstatt jedes der Kontrollkästchen hier zu animieren , unsere fertige Animation, die wir zuvor vorbereitet haben Suchen wir es also im Precomps-Ordner und ziehen wir es auf Lassen Sie uns nun den Precomp zusammenklappen und verkleinern. Wir können die Skala auf 20 setzen. Lassen Sie uns nun diese Precomp neben die vierte Unteraufgabe stellen. Ich denke, wir können es ein bisschen vergrößern. Mal sehen, wie das aussieht. Lassen Sie uns die Skala auf 25 setzen. Großartig. Lassen Sie uns nun den richtigen Zeitpunkt für den Start dieser Animation finden. Dies muss direkt nach der Popup-Animation geschehen. Also lasst uns hier stehen und das Pop-Up-Precomp aufrufen. Verschieben Sie nun die Checkbox-Animation so, dass sie von hier aus beginnt. Fantastisch. Und jetzt duplizieren wir es und starten danach die neuen 115 Frames. Wir können jetzt die Pre-Comps grün markieren und endlich die neue Version für die sechste Unteraufgabe mitbringen Ich glaube nicht, dass wir mehr als das erstellen müssen, da wir das Zeitlimit, das wir dafür benötigen, bereits fast erreicht haben Lassen Sie uns vor diesem Hintergrund zur Master-Komposition gehen und uns die Animation ansehen, während wir das Voiceover hören , um zu überprüfen, ob alles perfekt synchronisiert ist , bevor wir ein Otro für die Szene erstellen Sicher. Jedes Projekt beinhaltet detaillierte Aufgaben, Unteraufgaben und eine Fortschrittsverfolgung in Echtzeit, sodass nichts übersehen wird. Ich möchte sehen, wer in Ordnung, ich finde es sieht toll aus. Und jetzt können wir anfangen, über das Outtro dieser Szene nachzudenken , das irgendwo um die 37-Sekunden-Marke passieren muss irgendwo um die 37-Sekunden-Marke Wenn wir zur Szene zurückkehren, können wir feststellen, dass wir noch viel Zeit haben , bis wir diesen Punkt erreichen Im Moment fühlt sich die Animation, die wir erstellt haben, etwas langweilig an. Lassen Sie uns also diese Gelegenheit nutzen, um einige nette Bewegungen zum Ein- und Auszoomen hinzuzufügen einige nette Bewegungen zum Ein- und Auszoomen , damit sich die Szene dynamischer anfühlt. Ich möchte auch die Pop-Out-Animation, die wir für die Aufgabenfelder erstellt haben, etwas später in der Timeline verschieben für die Aufgabenfelder erstellt , da wir bis zum Ende der Szene noch viel freien Speicherplatz haben Ordnung. Nachdem das geklärt ist, lassen Sie uns an der Zwei-Sekunden-Marke in der Szenen-Timeline stehen und die Pop-Out-Animation der Aufgabenebenen von hier aus starten Ich sehe, dass ich es versäumt habe, eine Verzögerung zwischen der ersten und den beiden unteren Ebenen zu erzeugen eine Verzögerung zwischen der ersten und den beiden unteren Ebenen Deshalb verschiebe ich die Keyframes der unteren Ebene um ein Bild Ordnung. Wählen wir nun alle Keyframes der Aufgabenebenen aus und starten diesen Animationsteil ab der Zwei-Sekunden-Marke Großartig. Und jetzt wählen wir den nächsten Animationsteil aus und passen das Timing entsprechend an. Bei genauerer Überlegung beginnen wir diesen Animationsteil 1 Sekunde später, weil ich zu diesem Zeitpunkt etwas Freiraum für eine Zoom-In-Animation oder eine Cursor-Animation lassen möchte . wir fertig sind, kehren zur Szene zurück, stehen bei Sekunde zwei und beginnen, die Skalierungs - und Positionseigenschaften anzupassen bis wir etwas bekommen , das gut aussieht. Mein Ziel hier ist es, eine schöne Zoom-In-Animation zu erstellen , bei der der Abschnitt mit der Aufgabenliste näher erscheint. Der Fokus des Betrachters sollte zu diesem Zeitpunkt auf diesem Bereich liegen. Ich experimentiere gerade mit verschiedenen Werten für die Skalierung und die Neupositionierung des Precomp, sodass die Aufgabenliste mehr in der Mitte steht Wir können das Action-Safe-Grid einschalten , um sicherzustellen, dass wir eine ausgewogene Zusammensetzung haben Ich finde, es sieht gut aus, aber die Startposition des Precomp kann ein bisschen angepasst werden Verschieben wir es leicht nach oben, damit wir einen größeren Unterschied zwischen der ersten und der zweiten Position erzielen einen größeren Unterschied zwischen der ersten und der zweiten Mach dir keine Gedanken über den Text, sich im oberen Bereich befinden sollte. Wir können diesen Text stattdessen unten platzieren. Gehen wir nun zum zweiten Keyframe und passen die Größe und Position der Precomp erneut an, damit die Zoom-In-Animation wir außerdem sicher, dass der Abschnitt mit der Aufgabenliste perfekt zur Mitte ausgerichtet ist Verwenden Sie die Action-Safe-Grid-Hilfslinien, um die Ausrichtung zu überprüfen. An diesem Punkt in der Zeitleiste sollten die Aufgabenfelder genau den Hilfslinien entsprechend zentriert sein . Eine kurze Erinnerung: Dies sollte Ihr Haupt-Workflow sein, wenn Sie an solchen Projekten arbeiten . Erstellen Sie zunächst die grundlegende Animation und verbessern Sie dann die Bewegung. Überprüfen Sie danach, ob die Animation mit dem Voiceover synchronisiert ist. Und schließlich fügen Sie Bewegungen im Kamerastil in die Szene ein, um sie interessanter zu gestalten Okay, jetzt gehen wir zurück zur Masterkomposition und suchen nach einer Szene mit einer Textebene, damit wir sie kopieren und hier wiederverwenden können Fügen Sie die Textebene in die Timeline und fügen Sie sie vom Anfang der Animation an Platzieren Sie diese Ebene irgendwo hier unter dem UI-Bildschirm. Lassen Sie uns abschließend zum Skript gehen und den Text kopieren, der in dieser Szene erscheinen muss . Wir kopieren zuerst den ersten Teil des Satzes. Lassen Sie uns jetzt den perfekten Ort für den Text finden. Großartig. Lassen Sie uns nun in dem dem das Popup-UI-Panel erscheint, einen schönen Winkel für den UI-Bildschirm Teil, in dem das Popup-UI-Panel erscheint, einen schönen Winkel für den UI-Bildschirm erstellen. Wir können ab dem Moment, in dem die Animation der Aufgabenliste beendet ist, mit der Änderung des Winkels beginnen und sehen, wie das aussieht. Erstellen Sie zunächst Keyframes für beide Eigenschaften, Skalierung und Position, mit ihren aktuellen Werten, da wir nicht möchten, dass sich der Bildschirm der Benutzeroberfläche vor diesem Punkt bewegt Das gibt uns einen Moment Pause. Lassen Sie uns diese Pause verkürzen, indem beispielsweise die Keyframes an der Vier-Sekunden-Marke platzieren Sobald das erledigt ist, entscheiden wir, wo die Winkeländerung enden soll Es kann kurz vor der Klick-Animation enden. Gehen wir also zu diesem Zeitpunkt über und passen die Skalierung und Position der Keyframes der Precomp Platzieren Sie es so, dass wir noch etwas Platz haben, um danach den zweiten Teil des Textes hinzuzufügen Wir können jetzt die Textebene zu diesem Zeitpunkt aufteilen und den zweiten Teil des Textes aus dem Skript kopieren des Textes aus dem Skript Zurück im Projekt fügen wir Text in die neue Textebene ein und verschieben ihn nach oben. Großartig. Lassen Sie uns nun diese Ebene erweitern und einen guten Zeitpunkt finden, um eine weitere Animation mit wechselndem Winkel zu erstellen. Dieses Mal erstellen wir eine Zoom-In-Animation für den Unteraufgabenbereich im Popup-UI-Panel Zu diesem Zweck werden wir das Staging synchron mit der Animation halten, die im Precomp auf dem UI-Bildschirm stattfindet Bis zu diesem Moment können wir eine Pause in der Szene einlegen. Lassen Sie uns also Keyframes mit den aktuellen Werten für beide Eigenschaften erstellen den aktuellen Werten für beide Eigenschaften Gehen Sie dann 1 Sekunde vorwärts und erstellen Sie eine Zoom-In-Animation , indem Sie die Skalierungs- und Positionseigenschaften anpassen die Skalierungs- und Positionseigenschaften Ordnung. Ich finde, es sieht gut aus. Jetzt können wir die Bewegung für alle Keyframes, die wir hier haben, verbessern für alle Keyframes, die wir hier haben Dazu verwenden wir das Velocity-Bedienfeld für Keyframes. Eine kurze Erinnerung können Sie nicht verschiedene Eigenschaften gleichzeitig anpassen Velocity-Bedienfeld können Sie nicht verschiedene Eigenschaften gleichzeitig anpassen. Tun Sie dies also zuerst für die Positionseigenschaft und wiederholen Sie dann den Vorgang für die Skalierungseigenschaft. Stellen wir beide auf eine Geschwindigkeit von 85% ein. Lass uns sehen, was wir haben. Sieht toll aus, aber ich denke, die Checkbox-Animation im Popup sollte etwas später in der Timeline beginnen. Fangen wir gleich nach dem Ende der Zoom-In-Animation an. Stellen Sie sich also hier hin, rufen Sie das Pop-Up-Precomp auf und verschieben Sie die beiden Precomps zu diesem Zeitpunkt Fantastisch. Nachdem das erledigt ist, kehren wir zur Master-Komposition zurück und vergleichen die Animation mit dem Voiceover Achte darauf, wie die VO angibt, wo diese Szene enden soll Bild. Jedes Projekt beinhaltet detaillierte Aufgaben, Unteraufgaben und Fortschrittsverfolgung in Echtzeit So rutscht nichts durch das Raster. Willst du? Alles sieht toll aus. Jetzt können wir mit der Arbeit an der Outtro-Animation für diese Szene beginnen, denn zu diesem Zeitpunkt sollte die nächste Szene bereits beginnen Lassen Sie uns zunächst die Szene betreten. Bevor wir weitermachen, erweitern wir die Textebene ganz schnell. Lassen Sie uns nun einen guten Zeitpunkt finden um die Outtro-Animation zu starten Ich denke, wir können es mit 7 Sekunden und 20 Bildern beginnen. Lassen Sie uns also zu diesem Zeitpunkt Keyframes erstellen. Gehen Sie dann 1 Sekunde vorwärts. In der Timeline und erstelle eine einfache Outtro-Animation, bei der sich die Vorkomposition nach unten bewegt, also aus dem Bild heraus Gehen Sie als Nächstes in den Diagrammeditor und stellen Sie die Geschwindigkeit auf 95% ein, um die Bewegung etwas schneller zu machen Ich möchte es so haben , weil ich mich auf einen Match-Cut-Übergang in die nächste Szene vorbereite einen Match-Cut-Übergang in die nächste Wenn ich es mir genauer überlege, denke ich, dass wir eine etwas längere Pause einlegen sollten , bevor der Bildschirm der Benutzeroberfläche ausgezogen wird. Meiner Meinung nach startet der Otro zu früh nach der Checkbox-Animation Lassen Sie uns die Outtro-Animation so verschieben , dass sie bei 8 Sekunden beginnt. Großartig. Lassen Sie uns nun den schnellsten Punkt in der Otro-Bewegung und im Master-Comp-Crop finden, den Pre Comp zu diesem Zeitpunkt Lassen Sie uns nun die Szene erneut aufrufen und die Timeline 1 Sekunde nach Abschluss der Atro-Animation zuschneiden . Ich mag es nicht, Szenen direkt nach der letzten Bewegung zu beenden. Ich ziehe es immer vor , 1 Sekunde Freizeit zu haben, falls ich später Anpassungen vornehmen muss. Okay, wenn das erledigt ist, können wir zur nächsten Szene übergehen, die in unserem Fall eine weitere Titelanimation ist Um das schnell zu machen, duplizieren wir die Titelanimation wir bereits in der Timeline haben und platzieren sie direkt hinter der letzten Szene Das Gute daran ist , dass sie bereits auf den Match-Cut-Übergang zugeschnitten ist Match-Cut-Übergang zugeschnitten Aber wenn wir diese Precomp eingeben und den Text ändern, wird dadurch auch der Text in der ersten Titelanimation aktualisiert , da es sich um dieselbe Precomp handelt und das ist nicht das, was Wir müssen den Pre-Comp im Projektfenster duplizieren. Dann ersetzen wir die alte Pre-Comp in der Timeline durch diese neue. Großartig Geben Sie nun den neuen Titel precomp ein und ändern Sie den Text darin Wie Sie sehen können, ist der Text länger als der erste. Um das zu beheben, reduzieren wir die Schriftgröße. Ungefähr 100 sehen gut aus. Wenn Sie fertig sind, vergessen Sie nicht, den Strich unter dem wichtigen Wort im Text hinzuzufügen . In meinem Fall platziere ich es hier. Großartig. Ersetze jetzt die alte Pre-Comp in der Timeline durch diese neue Auf diese Weise behalten wir den Ausschnitt aus der vorherigen Titelanimation bei, enthalten jedoch neuen Text Und so haben wir einen weiteren perfekten Match-Cut-Übergang Jetzt sind wir bereit, mit der nächsten Lektion fortzufahren und mit dem Aufbau der nächsten Szene zu beginnen. Aber vorher wollen wir ein letztes Detail korrigieren. Falls Sie es nicht bemerkt haben, haben wir nicht die Checkbox-Symbole, die sich in der Hauptaufgabenliste befinden müssen. Sie müssen nicht animiert sein. Lassen Sie uns als 19. Animieren des Bildschirms der Benutzeroberfläche Kontakte in 3D: Komm zurück. In dieser Lektion beginnen wir mit der Arbeit an der Benutzeroberfläche für Kontakte. Schauen wir uns also als Erstes an, wie lang die Szene dauern sollte. Sie beginnt bei den zweiten 38 und 28 Frames und endet bei den zweiten 42 und 18 Frames. Das heißt, wir haben ungefähr 4 Sekunden und ein paar Frames, um die Szene zu animieren Vor diesem Hintergrund erstellen wir nun eine neue Komposition und nennen sie Szene sechs Stellen Sie sicher, dass die Einstellungen korrekt sind und klicken Sie auf. Okay. Großartig. Und jetzt bringen wir den Benutzeroberflächenbildschirm für Kontakte in die neue Szene. Ich möchte die Szene animieren, ähnlich wie in dieser Referenz. Das bedeutet, dass wir auf jeden Fall Raum mit den drei D verwenden müssen diesem Hintergrund rufen wir die Vorkomposition auf und wählen hier zunächst alle Ebenen aus, reduzieren sie und konvertieren sie gleich danach alle in drei D-Ebenen Großartig. Und jetzt fangen wir an diesen UI-Bildschirm für die Animation vorzubereiten. Damit meine ich, dass wir die Ebenen, die sich auf jeden Abschnitt beziehen, vorab zusammensetzen können Ebenen, die sich auf jeden Abschnitt beziehen, vorab zusammensetzen Langfristig wird es für uns viel einfacher sein. Also können wir zuerst die Ebenen sperren, denen wir sicher sind, dass wir sie nicht unterkomponieren werden Lassen Sie uns nun alle Ebenen des Hauptabschnitts auswählen und sie unterkomponieren Achten Sie darauf, dass ich die Kontaktfelder nicht auswähle. Das liegt daran, dass sie draußen bleiben sollen, damit ich sie animieren kann, ohne mit Ebenen herumzuspielen , die nicht animiert werden Großartig. Und jetzt wählen wir auch diese drei Ebenen aus , die zum Hauptbereich gehören , und sie von hier aus ausschneiden und dann in den Precomp einfügen Großartig. Gehen wir nun zurück zur Hauptszene und setzen die Ebenen des oberen Abschnitts zusammen Lassen Sie uns nun mit der Aktion „Kontakte“ befassen. Da zu jeder Kontaktbox mehrere Ebenen gehören , müssen wir alle Ebenen auswählen, die sich auf diese Kontaktbox beziehen , und sie zusammensetzen Nennen wir es Bildschirm fünf Kontakt eins. Wir können den Namen kopieren und dann den Rest der Kontaktabschnitte weiter zusammenstellen und den Namen für den Precomp Rest der Kontaktabschnitte weiter zusammenstellen und den einfügen Vergiss nur nicht, die Nummer anzupassen . Lass uns das für den Rest der Kontakte tun. Fantastisch. Nachdem das erledigt ist, schalten wir alle Precomps wieder ein, reduzieren sie und konvertieren sie alle in drei D-Ebenen Lassen Sie uns abschließend den Ankerpunkt für alle zentrieren. Sie können auf einen Precomp klicken, um sicherzustellen, dass der Ankerpunkt zentriert ist In Ordnung. Alles sieht gut aus und wir können das Projekt jetzt speichern, bevor wir weitermachen Lassen Sie uns diese Gelegenheit auch nutzen , um unser Projektpanel zu organisieren. Öffnen wir den Ordner Screens und ziehen alle Vorkompositionen heraus , die wir in der vorherigen Szene für diese Szene erstellt haben in der vorherigen Szene für diese Szene Im Ordner Screens sollten nur die Pre-Cooms des Hauptbildschirms der Benutzeroberfläche Sonst nichts. Für alle anderen Precoms können wir sie in den Precomps-Hauptordner ziehen Großartig. Und jetzt können wir mit der Animation der Szene beginnen Als erstes können wir eine Intro-Animation für diese Szene erstellen eine Intro-Animation für diese Da wir es mit drei D-Ebenen zu tun haben, können wir in der Szene eine neue 35-MM-Kamera erstellen und damit eine schöne Zoom-In-Animation für das Intro Zu Beginn der Animation werde ich die Kamera rückwärts bewegen Das ist genug. Gehen wir nun 1 Sekunde vorwärts und bringen die Kamera näher an den UI-Bildschirm heran. Beachten Sie, dass wir im oberen Bereich des Rahmens etwas Platz sparen müssen , um den Text hinzuzufügen, der in dieser Szene enthalten sein muss. Der Einfachheit halber können wir das Titel-Safe-Aktionsraster öffnen und mit den Positionswerten herumspielen. In Ordnung, ich finde, es sieht gut aus. Kommen wir nun zur zweiten und beginnen mit der Erstellung der Pop-Out-Animation für die Precomps der Kontakte Zuerst müssen wir die Position-Eigenschaft öffnen und hier den ersten Keyframe erstellen Gehen wir als Nächstes 1 Sekunde vorwärts und erstellen auch hier denselben Keyframe. Danach stellen wir uns in die Mitte der Animation und bringen alle Vorkompositionen näher an die Kamera heran Achten Sie darauf, dass Sie den Wert nicht für alle Precomps gleichzeitig manuell festlegen , da dadurch auch die restlichen Positionsachsen angepasst werden , was nicht das ist, was daher sicher, dass Sie den Wert anpassen , indem Sie die Z-Achse ziehen Lassen Sie uns nun die Precomps nach links verschieben. Wenn sie also herausspringen, werden sie in der Mitte der Komposition platziert Passen Sie die Positionswerte so lange an, bis sie sich etwas näher an der Kamera befinden und gut horizontal im Bild zentriert Ordnung. Ich finde, es sieht gut aus. Lassen Sie uns am Anfang dieser Animation stehen und nun die Eigenschaft Rotation öffnen , um während der Animation einen schönen Rotationseffekt zu erzeugen . In unserem Fall verwenden wir die Y-Rotationsachse. Lassen Sie uns also zunächst den ersten Keyframe mit dem Wert Null zu diesem Zeitpunkt erstellen mit dem Wert Null zu diesem Zeitpunkt Gehen wir dann zu den zweiten beiden und erstellen hier denselben Keyframe Stellen wir uns nun in die Mitte der Animation und beginnen, die Drehung für jede der Vorkompositionen anzupassen An diesem Punkt versuche ich nur, jeden Precomp zu drehen und dabei eine ähnliche Rotationsänderung für alle beizubehalten eine ähnliche Rotationsänderung Das heißt, wir können die Rotation für den oberen Precomp auf 30 setzen den oberen Precomp Stellen Sie ihn für den nächsten auf 20 ein. Der nächste wird zehn sein. Die nächste können wir bei Null stehen lassen. Der nächste wird minus zehn sein. Danach -20 und der letzte -30. Die Rotation sieht gut aus, aber wie Sie sehen können, ist die untere Vorkomposition im unteren Teil der Komposition abgeschnitten im unteren Teil der Komposition Während wir uns also in der Mitte der Animation befinden, passen wir die Position für alle Precomps an und bewegen Fantastisch. Nachdem wir die erste Animation erstellt haben, können wir nun alle Keyframes auswählen und sie einfach vereinfachen Anschließend können wir ihre Bewegung im Diagrammeditor anpassen Ich möchte, dass die Bewegung schnell beginnt, dann in der Mitte langsamer und gegen Ende an Geschwindigkeit gewinnt Mal sehen, wie das aussieht. In Ordnung. Ich finde, es sieht toll aus. Aber meiner Meinung nach ist die Animation vorerst zu schnell. Gehen wir also zurück zur Timeline. Stellen Sie sich an die dritte Stelle, wählen Sie dann alle Keyframes aus, halten Sie die Alt- oder Wahltaste gedrückt und ziehen Sie sie vom letzten Keyframe zur der Zeitanzeige . In Ordnung Also, jetzt ist die Geschwindigkeit großartig und wir können einen schönen Offset zwischen den Precomps schaffen , damit es ein bisschen interessanter aussieht Dieses Mal werde ich die neue After Effects-Funktion zum Offseting von Keyframes verwenden Effects-Funktion zum Offseting Lassen Sie uns also zunächst dieses Bedienfeld so skalieren , dass wir alle Keyframes sehen können Stellen Sie nun sicher, dass Sie die Keyframes aus der Ebene auswählen die Keyframes aus der Ebene , von der aus der Offset beginnen soll In unserem Fall möchte ich, dass der erste obere Precomp die Bewegung zuerst startet Aus diesem Grund wähle ich alle Keyframes aus der unteren Ebene im Ebenenfenster der Komposition Es ist die obere erste Vorkomposition, lassen Sie sich also nicht verwirren. In Ordnung. Und jetzt verschiebe ich , sagen wir, zwei Frames hinter den ersten Keyframes und halte dann die Alt-Taste gedrückt und verschiebe die Keyframes, bis ich sehe, dass die nächsten Precomp-Keyframes die Position der Zeitanzeige Mal sehen, wie das aussieht. In Ordnung, ich finde, es sieht toll aus. Und jetzt, nachdem dieser Animationsteil beendet ist, können wir zu diesem Zeitpunkt stehen und die Atro-Animation für diese Szene erstellen Lassen Sie uns hier also den ersten Keyframe für die Kameraposition erstellen und dann 1 Sekunde vorwärts gehen Das heißt, wir müssen bei den zweiten vier und zehn oder zwölf Bildern bleiben zweiten vier und zehn oder zwölf Bildern Jetzt können wir die Kamera manuell rückwärts bewegen, oder wir können einfach das Schlüsselbild der Kamera mit der ersten Position kopieren und hier einfügen Fantastisch. Und jetzt setzen wir die Geschwindigkeit für diese Animation auf 95%, damit wir einen schönen Match-Cut-Übergang erstellen können. Okay, ich finde, alles sieht gut aus. Das einzige, was wir hier hinzufügen müssen, ist eine Textebene, die in dieser Szene dargestellt werden soll. Geben wir dazu eine unserer Szenen ein, in denen wir bereits eine Textebene haben, und kopieren sie von dort, damit wir sie in unsere neue Szene einfügen können. Rufen wir nun Szene sechs auf und fügen die Textebene hier ein. Erweitern Sie diese Ebene und starten Sie sie am Anfang der Timeline. Danach können wir zur Videotafel gehen, um zu sehen, wie der Text in dieser Szene aussehen soll. In Ordnung, hier ist der Text. Gehen wir jetzt zum Skript und kopieren den entsprechenden Text. Großartig. Sobald wir das erledigt haben, fügen wir der Szene eine sekundäre Kamerabewegung hinzu , damit sie nicht mehr so statisch aussieht wie jetzt. Geben wir dazu die Kontakte precomp ein und erstellen ein neues Null-Objekt, das wir für die Erzeugung der sekundären Kamerabewegung verwenden werden Zuerst müssen wir es in eine Ebene mit drei DD umwandeln. Stellen wir nun sicher, dass das Null-Objekt in der Mitte der Komposition platziert wird. Bringen wir es nach oben, bis es am Mittelpunkt des Safe-Action-Rasters ausgerichtet ist Mittelpunkt des Safe-Action-Rasters Ordnung. Und jetzt überordnen wir der Kamera unsere Null und ändern den Namen der Null in Null-Kamera. Großartig. Gehen wir nun zum Anfang der Timeline und erstellen einen Keyframe an der ersten Position für die Null Kommen wir nun zu dem Zeitpunkt, an dem die kurze Szene bereits zu Ende war, was in unserem Fall die fünfte Sekunde ist Passen wir nun die Z-Positionsachse für die Null so an, dass sie sich dem Bildschirm der Benutzeroberfläche etwas nähert . Lassen Sie uns den Wert auf 600 setzen und sehen, wie das aussieht. Ich glaube, es ist zu nah. Bleiben wir also beim letzten Keyframe und ändern ihn auf 400 Wir können immer noch sehen, dass der untere Kontakt im unteren Bereich des Frames abgeschnitten Um das zu beheben, können wir die Bewegung der sekundären Kamera zeitlich auf die Animation der Kontaktvorkompositionen Das heißt, wir können in der Mitte ihrer Pop-Out-Animation stehen und die Animation der sekundären Kamera zu diesem Zeitpunkt anpassen zu diesem Zeitpunkt Wir können die Null ein wenig nach oben bringen. Mal sehen, wie das aussieht. Okay, ich finde, es sieht gut aus, aber wir könnten den Text in der Hauptszene behandeln , nachdem wir diese Animation erstellt Gehen wir also zurück zur Hauptszenenkomposition und schauen, was wir hier haben Ja, wie ich dachte, behandeln wir den Text, was wir nicht wollen Also lass uns versuchen, das zu beheben. Zuerst können wir den Text ein wenig vergrößern und sehen, wie er jetzt aussieht. Ich sehe, dass der Bildschirm der Benutzeroberfläche fast den Text berührt, aber lassen wir ihn vorerst so, wie er ist, denn das Wichtigste ist, dass wir den Text klar sehen können. Bevor wir uns nun zu sehr mit den Details befassen, sollten wir zunächst überprüfen, ob die Animation, die wir erstellt haben , mit einem Voiceover synchronisiert wird. Das ist vorerst das Wichtigste, mit dem wir uns befassen müssen, bevor wir das feine Aussehen anpassen Gehen wir also zurück zur Master-Komposition und bringen die neue Szene in die Timeline wir nun sicher, dass der Match-Cut-Übergang ordnungsgemäß funktioniert Dazu müssen wir die Szene und dann den UI-Bildschirm Precomp aufrufen die Szene und dann den UI-Bildschirm Precomp Jetzt müssen wir uns an dem Punkt befinden, an dem die Intro-Animation die Höchstgeschwindigkeit erreicht hat , also bei Frame 15 in dieser dem die Intro-Animation die Höchstgeschwindigkeit erreicht hat , also bei Frame 15 in Jetzt können wir zur Master-Komposition zurückkehren und die Vorkomposition auf die Position der Zeitindikatoren zuschneiden . Großartig. Und jetzt machen wir dasselbe für die Outtro-Animation. Lassen Sie uns den Zeitpunkt finden, an dem die Outtro-Animation am schnellsten ist Lassen Sie uns hier mit der Zeitanzeige stehen. Gehen wir nun zurück zur Master-Komposition und schneiden die Pre-Comp auf die Position der Zeitindikatoren zu Fantastisch. Nachdem das erledigt ist, konzentrieren wir uns nun darauf, die Animation anzusehen und gleichzeitig den Voiceover zu hören , um zu sehen, ob alles perfekt synchronisiert Gehen Sie dahinter einfach zu Ihrem Team-Tab, um die Aktivitäten aller auf einen Blick zu sehen Ich muss fallen, okay. Ich denke, die Otro-Animation muss später kommen. Es sollte zu diesem Zeitpunkt sein. Lassen Sie uns hier stehen und dann den Pre-Comp auf die Position der Zeitindikatoren ausdehnen Danach kommen wir zur Otro-Animation und stellen sicher, dass sie ab diesem Zeitpunkt beginnt Wir können die Outtro-Animation erstellen und genau bei Sekunde vier beginnen, genau bei Sekunde vier beginnen nur um einen übersichtlicheren Zeitplan Ein paar Frames werden die Präzision des Absinkens nicht allzu sehr beeinträchtigen Großartig. Lassen Sie uns jetzt den neuen schnellsten Zeitpunkt für die Outtro-Animation finden, der sich irgendwo hier in der Nähe befindet Gehen Sie jetzt zurück zur Master-Komposition und passen Sie die Dauer der Szene Fantastisch. Und wenn das erledigt können wir die Szene jetzt betreten und sie in Sekunde sechs beenden, also ist, können wir die Szene jetzt betreten und sie in Sekunde sechs beenden, also 1 Sekunde nach dem Ende der Outtro-Animation. Großartig Jetzt, wo wir das Sinken richtig gemacht haben, können wir ein paar Minuten damit verbringen, das Aussehen der Szene anzupassen, besonders zu dem Zeitpunkt, an dem der Bildschirm der Benutzeroberfläche fast den Text verdeckt Lassen Sie uns also zunächst die Vorkomposition des Kontaktbildschirms aufrufen und die sekundäre Kamerabewegung anpassen , die wir hier haben Wir können damit beginnen, den letzten Keyframe anzupassen. Stellen wir ihn auf 300 ein, damit die Kamera etwas weiter vom Bildschirm entfernt ist Das Wichtigste ist , dass Sie wissen, was Sie anpassen müssen falls Sie in Ihren zukünftigen Projekten eine ähnliche Situation haben . Ich bringe den endgültigen Original-Keyframe für die Kameraposition einfach auf Sekunde fünf Wir werden also eine komplette 1-Sekunden-Outtro-Animation haben. Jetzt wird es viel einfacher sein, in der Mitte der Animation zu stehen, die bei 4 Sekunden und 15 Frames liegt Gehen wir dann zurück zum Master-Comp und stellen sicher, dass wir den Pre-Comp an der richtigen Stelle haben . Fantastisch. Jetzt sind wir mit der Animation der Szene auf dem Kontaktbildschirm fertig Animation der Szene auf dem Kontaktbildschirm Und jetzt gehen wir zurück zur Videotafel und sehen, was wir als Nächstes tun müssen Wie Sie sehen können, haben wir eine weitere Titelanimation , die nach der Kontaktszene beginnen muss. Gehen wir also zurück zur Masterkomposition und wiederholen den Vorgang, den wir in der vorherigen Lektion gemacht haben Duplizieren Sie zuerst eine der Vorkompositionen der Titelanimation in der Timeline und duplizieren Sie sie dann im Projektfenster, um den Text zu ändern , ohne den vorherigen zu beeinflussen Ich werde diesen Vorgang beschleunigen, und Sie können ihn verfolgen. Und zum Abschluss werden wir natürlich zwischen den beiden austauschen. Mal sehen, wie das aussieht. In Ordnung, und damit haben wir diese Lektion beendet. Jetzt sind wir bereit, mit dem nächsten Schritt fortzufahren, in dem wir mit der Erstellung der komplexesten Szene in diesem Projekt beginnen werden mit der Erstellung der komplexesten Szene in diesem Projekt beginnen Es wird sehr interessant, also sehen wir uns im nächsten. 20. Erstellen der komplexen Demo-Flow-Animation: Ich bin zurück. In dieser Lektion werden wir mit der Arbeit an der komplexesten Demo-Flow-Animation beginnen , die wir im Projekt haben. Wir müssen den Hauptnachrichtenbildschirm präsentieren, der in den Bereich für private Konversationen übergeht in den Bereich für private Konversationen Ich werde Ihnen eine der besten Methoden beibringen, um mit solchen Situationen umzugehen , in denen wir viele Ebenen haben , die sich in andere Ebenen verwandeln müssen . Fangen wir also an Erstes müssen wir, wie wir es normalerweise tun, damit beginnen, die Dauer der Szene zu überprüfen . In diesem Fall beginnt die Szene in Sekunde 44 und endet in Sekunde 50. Das bedeutet, dass wir insgesamt etwa 6 Sekunden Zeit haben, um die gesamte Demo-Flow-Animation zu animieren Vor diesem Hintergrund kehren wir zur Master-Komposition zurück und schließen alle relevanten Vorkompositionen , die wir im Kompositionsfenster haben . Großartig. Und das Erste, was wir tun müssen , bevor wir die Szene animieren, ist, genau zu verstehen, was wir in der Demo-Flow-Animation tun müssen in der Demo-Flow-Animation tun Das bedeutet, dass wir uns einige wichtige Fragen stellen müssen einige wichtige Fragen Zum Beispiel, welche Ebenen auf jedem UI-Bildschirm erscheinen oder verschwinden sollen? Welche Ebenen können verändert werden und welche Ebenen sollten aus dem Rahmen herauskommen, welche Ebenen müssen auf beiden Bildschirmen dargestellt werden und so weiter Um all diese Fragen zu beantworten, ist es besser, beide Benutzeroberflächenbildschirme zu öffnen und mit der Untersuchung zu beginnen In unserem Fall finden die meisten Aktionen im Hauptbereich des Nachrichtenbildschirms statt. Wir müssen die Chatboxen in der Liste so verändern, dass sie in ihrer zweiten Entwurfsform angezeigt werden sie in ihrer zweiten Entwurfsform wie in der zweiten Nachrichtenszene gezeigt Wir können auch sehen , dass sich das linke Menü und die Kopfzeile nicht ändern Das sollten wir im Hinterkopf behalten. Unser Hauptaugenmerk wird hier im Hauptteil liegen. Sobald wir also verstanden haben, was wir mehr oder weniger tun müssen, können wir damit beginnen, eine neue Komposition zu erstellen, die wir Szene sieben nennen können , und sie für die Animation vorbereiten. In dieser Zusammenstellung werden wir versuchen, die beiden Benutzeroberflächenbildschirme zu kombinieren, die wir für die Erstellung der Demo-Flow-Animation benötigen. Dabei handelt es sich um Nachrichten und Nachrichten an Precomps wir für die Erstellung der Demo-Flow-Animation benötigen handelt es sich um Nachrichten und Nachrichten an Precomps Beginnen wir mit der Erstellung einer neuen Komposition. Bevor wir weitermachen, ziehen wir die neue Komposition schnell aus diesem Ordner Und jetzt bringen wir den ersten UI-Bildschirm in die Timeline Großartig. Nachdem das erledigt ist, möchte ich Ihnen den wichtigsten Denkprozess beibringen , wenn Sie einen Übergang für mehrere Ebenen zwischen zwei Szenen erstellen müssen einen Übergang für mehrere Ebenen zwischen zwei Szenen erstellen . Lassen Sie uns das Precomp aufrufen und mit der Arbeit beginnen, und ich werde es Ihnen Schritt für Schritt erklären Als Erstes müssen Sie überprüfen, ob diese Szene in einem Drei-D-Raum animiert wird oder nicht, denn wenn ja, ist es besser, jetzt alle Ebenen in Drei-D-Ebenen umzuwandeln , bevor In unserem Fall werden wir sie nicht in einem Drei-D-Raum animieren, also behalten wir sie als zwei D-Ebenen Danach können wir mit dem nächsten Schritt fortfahren , der Unterkomposition der Ebenen. Da wir hier eine riesige Anzahl von Ebenen haben, müssen wir uns überlegen, welche Ebenen wir gemeinsam unterkomponieren können, um einen übersichtlicheren Zeitplan zu haben In unserem Fall wissen wir, wie wir bereits zuvor gesehen haben, dass sich das linke Menü in der Kopfzeile für beide Bildschirme nicht ändert Das heißt, wir können sie in der ersten Nachricht vor der Erstellung auswählen und sie zusammen zusammenstellen. Hier sind die Ebenen, die wir zuerst zusammensetzen können. Aber vorher sollten wir nicht vergessen , an dieser Stelle alle Ebenen zusammenzuklappen, damit wir das nicht später tun müssen nachdem wir sie in separaten Vorkompositionen gespeichert haben. Es wird mehr Zeit in Anspruch nehmen, sodass wir Zeit sparen können, indem wir jetzt alle Ebenen zusammenklappen In Ordnung. Wählen wir nun die Ebenen aus, die wir bereits unterkomponieren können, einschließlich des grauen Hauptfeldes dieses UI-Bildschirms Wir können es Bildschirm sechs Panel eins nennen. Lassen Sie uns das neu erstellte Precomp im Projektfenster und sicherstellen, dass es sich außerhalb und nicht in einem Ordner befindet. Wir wollen es vorerst schnell erreichen. Ordnung. Und jetzt reduzieren wir den Precomp in der Timeline und bringen ihn unter alle Ebenen Jetzt können wir es sperren und bevor wir weitermachen, das Projekt speichern Fantastisch. Und jetzt wollen wir sehen, ob wir einen weiteren Stapel von Ebenen zusammensetzen müssen oder nicht Dazu können wir die Illustrator-Datei des nächsten UI-Bildschirms im Assets-Ordner dieses UI-Bildschirms finden die Illustrator-Datei des nächsten UI-Bildschirms im und darauf doppelklicken, um sie im sekundären Vorschaufenster zu öffnen im sekundären Vorschaufenster Auf diese Weise können wir jetzt beide Bildschirme überprüfen und anfangen, über die Demo-Flow-Animation nachzudenken und sie zu planen Wie Sie verstehen können, muss die Demo-Flow-Animation in dieser Szene die Klickanimation in einem der Chats zeigen , und gleich danach müssen wir das Konversationsfenster präsentieren , das den Chat dieses Kontakts zeigt . Aber jetzt denken Sie wahrscheinlich darüber nach wie wir diesen Übergang schaffen werden. Habe so viele Ebenen in beiden Comps. Womit müssen wir überhaupt anfangen? Um all diese Zweifel zu beantworten, müssen Sie anfangen, in einer sehr vereinfachten Denkweise zu denken Sie müssen alle Designelemente hier in verschiedene Animationsteile aufteilen , ähnlich wie wir es bereits im Kurs getan haben Da wir in diesem Fall viele Ebenen haben, sollten wir uns überlegen die Trennung aussehen kann. Ich werde mich zum Beispiel zunächst auf den ersten Nachrichtenbildschirm konzentrieren und ein Designelement finden , das für den zweiten Bildschirm geändert werden muss. In diesem Fall beginnen wir mit den Sternsymbolen. Dies kann der Animationsteil sein , mit dem wir uns zuerst befassen werden. Zu diesem Zeitpunkt müssen wir uns keine Gedanken über den Zeitpunkt und die Dauer der einzelnen Animationsteile machen. Wir müssen uns auch keine Gedanken darüber machen, ob es mit dem Voiceover synchronisiert wird Im Moment konzentrieren wir uns nur auf die Erstellung der Demo-Flow-Animation Das bedeutet, dass wir jetzt eine Outtro- und eine Intro-Animation für alle Ebenen erstellen müssen , die wir auf beiden Benutzeroberflächenbildschirmen haben, mit denen wir es zu tun Ordnung. Jetzt schaue ich mir nur den ersten und den zweiten Bildschirm an, um zu verstehen, welche Übergangsanimation ich für diesen Animationsteil machen kann. Auf dem ersten Bildschirm erscheinen sie auf der linken Seite der Box und auf dem zweiten Bildschirm erscheinen sie auf der rechten Seite. Um mir das Leben zu erleichtern, kann ich eine einfache Outtro-Animation erstellen, indem ich die Skalierungseigenschaft verwende, um die Sterne auf dem ersten Bildschirm verschwinden zu lassen, und ich kann mit der Skalierungseigenschaft auch ein Intro für die Sterne auf dem zweiten Bildschirm erstellen mit der Skalierungseigenschaft auch ein Intro für die Sterne auf dem zweiten Bildschirm Machen Sie sich also vorerst über nichts anderes Gedanken. Konzentrieren wir uns allein auf diesen Teil. Schließen wir also die zweite Vorschau und wählen zunächst alle Sternsymbolebenen aus, die wir in der Szene haben. Großartig. Und jetzt sind sie alle selben Bereich im Ebenenstapel platziert. Lassen Sie uns einen von ihnen im Ebenenbedienfeld nach oben verschieben. Sobald wir fertig sind, können wir sie jetzt in einer anderen Farbe markieren. Großartig. Und jetzt können wir die Timeline vergrößern und am Anfang der Timeline mit der Erstellung der Outtro-Animation beginnen Lassen Sie uns die Skalierungseigenschaft öffnen und entscheiden, dass die Animation 1 Sekunde dauert Später können wir alle Animationsteile, die wir erstellen, an das Voice-Over anpassen. Konzentrieren wir uns zunächst darauf, diese Animationsteile für die Demo-Flow-Animation zu erstellen . Okay. Und jetzt, um diese Animation ein bisschen interessanter zu machen, lassen Sie uns die Sterne in der Mitte der Animation etwas größer einstellen , um diese Hüpfbewegung zu erhalten Großartig. wir mit der Erstellung des Outtros für die Sterne fertig sind, wählen wir sie alle aus und bringen sie über alle Ebenen Wir werden jeden Animationsteil über dem vorherigen platzieren , um eine saubere und organisierte Zeitleiste zu erhalten Bald wirst du sehen, was ich meine. Fantastisch. Jetzt können wir die Animation noch einmal überprüfen. Ich denke, wir sollten sie in der Mitte der Animation stärker skalieren . Sie sind sehr klein, deshalb möchte ich, dass der Betrachter sie bemerkt , bevor sie verschwinden. Ich denke, wir können die Skala auf 200 setzen. Ja, das sieht besser aus. Fantastisch. Jetzt sind wir mit dem ersten Animationsteil fertig und wir sind bereit zu entscheiden, was unser nächster sein soll. Dazu können Sie jederzeit zum zweiten UI-Bildschirm zurückkehren und besser verstehen, was zu tun ist. Wir können uns vielleicht hier mit dem Text befassen, oder wir können uns dafür entscheiden, uns mit allen Symbolen hier auf der rechten Seite zu befassen . Um die Auswahl der Ebenen zu vereinfachen, wählen wir auf jeden Fall das weiße Feld dieses Abschnitts aus und sperren es. Gehen wir nun und wählen alle Symbole auf der rechten Seite aus. Wie Sie sehen können, haben wir auch die kleinen weißen Felder jedes Chats ausgewählt . Halten wir also die Umschalttaste gedrückt und wählen sie ab. Großartig. Und jetzt bringen wir alle ausgewählten Ebenen über alle Ebenen im Ebenenbedienfeld. Als Nächstes markieren wir sie in einer anderen Farbe. Ordnung. Und jetzt stellen wir sicher, dass keine Ebene ausgewählt ist, und klicken, um alle vorherigen Ebenen zu schließen das erledigt haben, erstellen wir eine Otro-Animation für alle Symbole, die wir gerade markiert haben, von dem zweiten direkt nach dem Otro der Sterne Lassen Sie uns auch dieses Mal die Skalierungseigenschaft verwenden. Ordnung. Ich denke, es sieht okay aus und wir können mit dem nächsten Teil weitermachen Beschäftigen wir uns jetzt mit dem Text in der Szene. Wie Sie sehen können, ändert sich der Name des Kontakts nicht. Es ändert nur leicht die Position. Aber die anderen Textebenen, die wir hier haben , ändern sich komplett. Vor diesem Hintergrund erstellen wir eine Outtro-Animation für alle Textebenen mit Ausnahme der Namen Wir werden uns später damit befassen. Es ist besser, mit den einfachsten Animationsteilen fertig zu werden und danach über die komplexeren nachzudenken. Ordnung. Nachdem das geklärt ist, gehen wir zurück zum Projekt und wählen diesen ganzen Bereich aus. Lassen Sie uns nun die weißen Felder abwählen. Großartig. Als Nächstes bringen wir alle Ebenen in den Ebenen nach oben, paneelen und sie mit einer anderen Farbe kennzeichnen. Und jetzt erstellen wir aus den zweiten drei direkt nach den Symbolen Outro eine Otro-Animation für das All Dieses Mal verwenden wir Opazität, um eine Ausblendanimation für das Outro zu erstellen Fantastisch. Und jetzt schließen wir alle Ebenen, speichern das Projekt und fahren mit dem nächsten Animationsteil fort. Um die Zeitleiste zu organisieren, beginnen wir mit dem nächsten Animationsteil in dritten Sekunde, direkt nach der verblassenden Textanimation Und dieses Mal konzentrieren wir uns auf die Erstellung der Morphing-Animation für die Chatboxen Wir müssen sie alle so aussehen lassen, wie sie es auf dem nächsten UI-Bildschirm tun Lassen Sie mich Ihnen zeigen, wie Sie am besten mit solchen Situationen umgehen können, in denen Sie eine Morph-Animation für die Benutzeroberflächen-Panels erstellen möchten , anstatt nur Outtro - und Intro-Animationen mit Skalierung oder Opazität zu erstellen mit Skalierung In Ordnung. Als Erstes können wir also eine neue Formebene erstellen , die wir anstelle der Illustrator-Ebenen der Box verwenden werden anstelle der Illustrator-Ebenen der Box Es ist besser, weil wir später viel Freiheit haben werden , die Form dieser Form zu ändern Stellen wir also sicher, dass keine Ebene ausgewählt ist. Zoomen Sie ein wenig hinein, wählen Sie dann das Rechteckwerkzeug aus und erstellen Sie eine neue Form, die genau der Größe des weißen Felds entspricht. Öffnen wir nun die Eigenschaften der Form und deaktivieren die Option „Eingeschränkte Proportionen“, sodass wir die Breite und Höhe separat anpassen können. Großartig. Und jetzt runden wir die Ecken damit sie dem ursprünglichen Design entsprechen. Fantastisch. Als Nächstes fügen wir dieser Form einen dünnen grauen Strich hinzu. Um die genaue Farbe zu erhalten, können wir sie im Originaldesign in Illustrator überprüfen sie im Originaldesign in Illustrator Also lasst uns diesen UI-Bildschirm finden. Hier ist er. Wir können das Direktauswahlwerkzeug verwenden , um die entsprechende Form auszuwählen. Jetzt können wir den Strich-Farbcode kopieren. Zurück in After Effects fügen wir diesen Code in die Strichfarbe unserer Form ein. Lassen Sie uns abschließend die Strichbreite anpassen. Ich denke, es sieht perfekt aus, es auf zwei einzustellen. Großartig. Nachdem das erledigt ist, schneiden wir nun diese Ebene aus dieser Precomp aus und fügen sie in den Bildschirm der ersten Nachrichten-Benutzeroberfläche Jetzt müssen wir anfangen, sie zu animieren. Lassen Sie uns der Einfachheit halber die Deckkraft verringern, damit wir sehen können, wo sie in der Animation platziert werden soll der Platzieren wir es vorerst hier. Lassen Sie uns nun die Abspielposition auf die vierte Sekunde verschieben , da wir dort bald einen Keyframe erstellen werden, damit die Form so aussieht , wie sie jetzt aussieht In der dritten Sekunde sollte es so aussehen, wie es auf diesem UI-Bildschirm Länger und dünner. Fantastisch. Jetzt können wir mit der Erstellung der Morphing-Animation beginnen. Wir können entweder die Größeneigenschaft animieren oder die Form in einen Bézier-Pfad umwandeln, was uns mehr Freiheit gibt, ihre Form zu ändern Aber bevor wir das tun, lassen wir die Form zunächst genau so aussehen, wie sie auf dem aktuellen UI-Bildschirm aussehen sollte , bevor sie auf dem nächsten Bildschirm in ihre Form verwandelt Platzieren wir diese Ebene also genau in der Mitte des langen weißen Felds, das wir hier haben. Um sicherzustellen, dass sie perfekt ausgerichtet ist, öffnen wir die Lineale, wählen die lange Form aus und erstellen an der Position des Ankerpunkts eine neue Hilfslinie Auf diese Weise wissen wir genau, wo unsere neue Form platziert werden soll E. Sobald das erledigt ist, können wir die Führung entfernen und die Lineale schließen Ordnung. Lassen Sie uns nun die Größeneigenschaft für die Morph-Animation verwenden Erstellen Sie zunächst einen Keyframe mit den aktuellen Werten, da die Form zu diesem Zeitpunkt genauso aussehen sollte wie jetzt. Kehren wir dann zu Sekunde drei zurück und passen die Größe der Form an die Abmessungen der langen Box an, die wir auf diesem UI-Bildschirm haben Danach können wir die Deckkraft wieder auf 100% bringen und mit der Anpassung der Morphing-Animation fortfahren Anpassung der Morphing-Animation Als Nächstes müssen wir die Position für den Moment anpassen , in dem die Form ihre Form so ändert , wie sie auf dem nächsten UI-Bildschirm aussehen sollte Um zu sehen, wo genau es platziert werden muss, verwenden wir die Illustrator-Ebene auf dem UI-Bildschirm der zweiten Nachricht als Referenz Bringen wir das in die Timeline und verringern wir die Deckkraft um zu vergleichen, wie der nächste Bildschirm dem aktuellen aussehen sollte Wie Sie sehen können, ist der zweite Bildschirm etwas höher als der erste wir uns darüber vorerst keine Gedanken und konzentrieren wir uns nur darauf, die Form richtig zu positionieren Um Verwechslungen bei allen Ebenen zu vermeiden, bringen wir die Deckkraft der nächsten Bildschirmreferenzebene wieder auf 100% und erstellen Hilfslinien , die der Platzierung der Chatfelder entsprechen Auf diese Weise müssen wir die Referenzebene nicht ein- und ausschalten, um zu überprüfen, ob alles ausgerichtet ist Sobald das erledigt ist, können wir die Referenzebene löschen und die Hilfslinien sperren , sodass sie unseren Arbeitsablauf nicht beeinträchtigen Großartig. Lassen Sie uns nun alle Ebenen ausschalten, die für diesen Animationsteil nicht relevant sind diesen Animationsteil nicht relevant damit wir uns besser auf die Boxen konzentrieren können. Ich möchte, dass Sie verstehen , dass wir die ursprünglichen Box-Ebenen nicht animieren Stattdessen duplizieren wir die Form, die wir erstellt haben, behalten aber die Boxebenen in der Szene als Referenzpunkte Lassen Sie uns zunächst alle auswählen und sie zusammen in einem Bereich platzieren. Als Nächstes können wir sie in einer anderen Farbe kennzeichnen. Lassen Sie uns vorerst alle Boxen außer dem ersten in der Szene ausschalten, damit wir uns auf die Morphing-Animation konzentrieren können Lassen Sie uns zuvor die Ressourcen in den Kontaktfeldern organisieren Ressourcen in den Kontaktfeldern Wir können sie auch in einer anderen Farbe kennzeichnen. Moment, mir ist aufgefallen, dass hier im Stapel eine Schicht dazwischen liegt. Lassen Sie uns es isolieren , um zu sehen, was es ist. Ich sehe, es ist ein Sternsymbol aus dem ersten Animationsteil. Aus irgendeinem Grund haben wir vergessen, es zusammen mit den anderen Sternen zu bewegen. Um dieses Problem zu beheben, wählen wir alle Assets in den Kontaktfeldern aus und verschieben sie unter die Sternebene. Gut. Jetzt können wir sie ausschalten und weiter an der Animation der Boxen arbeiten. Gehen wir zunächst zu dem Zeitpunkt, an dem unsere Form ihre Form bereits geändert hat. Hier verwenden wir die Positionseigenschaft , um ihre Platzierung anzupassen. Lassen Sie uns jetzt die Keyframes für die erste Position erstellen. Dann verschieben wir es auf die dritte Sekunde , denn zu Beginn der Morphing-Animation sollte sich die Form hier befinden Bei Sekunde vier müssen wir sie in den Bereich verschieben, den wir zuvor mit Hilfslinien markiert haben In Ordnung, das sieht vorerst gut aus. Bevor wir weitermachen, platzieren wir auch die Wide Box-Ebene mit dem Rest und taggen sie mit derselben Farbe Lassen Sie uns nun alle Ebenen außer der Form, die wir erstellt haben, ausschalten . Lassen Sie uns nun diese Form duplizieren. Um zu wissen, wo wir es platzieren müssen, schalten wir alle langen Box-Ebenen wieder ein, die lila markiert sind. Lassen Sie uns ihre Deckkraft auf etwa 30% reduzieren und sie dann sperren, sodass sie als Referenz dienen Kehren wir nun zu unserer neuen doppelten Form zurück. Stellen Sie sich an die erste Position der Keyframes, wählen Sie die Eigenschaft aus, sodass beide Keyframes aktiv sind , und passen Sie die Position der Formen an, dass sie mit dem Referenzfeld übereinstimmt Perfekt. Gehen wir nun zu den zweiten Keyframes über und passen sie erneut an die Hilfslinien für den nächsten Bildschirm Fantastisch. Jetzt haben wir die Morphing-Animation für die ersten beiden Boxen Lassen Sie uns diesen Vorgang für die restlichen Boxen wiederholen. Duplizieren Sie die Ebene, stellen Sie sich an die Keyframes und passen Sie beide Positionen Dann optimiere den letzten. Duplizieren Sie erneut die Ebene und stellen Sie sich an die Keyframes. Passen Sie beide Positionen an. Dann optimiere den letzten. Lassen Sie uns diesen Vorgang für die restlichen Boxen wiederholen. Wie Sie sehen, haben wir jetzt irgendwann keine Anleitung mehr, die darauf hinweist, dass eine weitere Box platziert werden sollte. Das liegt daran, dass es auf dem nächsten UI-Bildschirm nur sechs Chatboxen gibt, nicht neun, wie im ersten. diese zusätzlichen Boxen also Lassen Sie uns diese zusätzlichen Boxen also aus dem Rahmen nach unten verschieben. Wir können sie ordentlich übereinander stapeln. O. Fantastisch. Damit haben wir die Vorbereitung des ersten Teils der Chatbox-Morphing-Animation abgeschlossen Vorbereitung des ersten Teils der Chatbox-Morphing-Animation Wählen wir nun alle Longbox-Ebenen aus, die wir als Referenzen verwendet haben Anstatt sie zu löschen, schalten wir sie einfach aus und aktivieren die Shi-Funktion, damit sie die Timeline nicht überladen Perfekt. Jetzt können wir alle Ebenen wieder einschalten und die von uns erstellten Hilfslinien deaktivieren. Lassen Sie uns auch alle neuen Box-Ebenen unter die restlichen Elemente verschieben , um die Dinge zu organisieren. Großartig. Fahren wir nun mit dem nächsten Animationsteil fort, der sich auf die Chat-Boxen bezieht. Öffnen Sie zunächst die zweite Nachrichten-Illustrator-Ebene damit wir verstehen, welche Ebenen als Nächstes animiert werden sollen An diesem Punkt können wir beginnen, uns mit den Avatar-Symbolen zu befassen Großartig. Schließen Sie nun die Vorschau und wählen Sie alle Avatar-Symbolebenen in der Szene aus. Verschieben Sie sie nun im Ebenenfenster zusammen und kennzeichnen Sie sie mit einer neuen Farbe. Lassen Sie uns entscheiden, dass diese Avatar-Animationen gleichzeitig mit der Box-Morphing-Animation in Sekunde drei beginnen sollen gleichzeitig mit der Box-Morphing-Animation in Sekunde drei Bewegen Sie den Abspielkopf auf die dritte Position, drücken Sie P und erstellen Sie einen Keyframe für die Position aller Avatar-Ebenen Gehen Sie dann 1 Sekunde vorwärts und passen Sie ihre Positionen an. Um genau zu wissen, wohin sie gehen sollen, verwenden wir die Illustrator-Ebene des nächsten Bildschirms als Referenz. Bringen wir es hinein und verringern wir die Deckkraft. Sperren wir nun die Referenzebene und wählen alle Avatar-Symbole Als Nächstes bewegen Sie sie an die richtigen Positionen. Halten Sie nun die Strg - oder Befehlstaste auf dem Mac und klicken Sie auf diese Ebene, um sie abzuwählen Ziehen Sie dann die restlichen Ebenen herunter, damit sie dem Design entsprechen Wiederhole diesen Vorgang für den Rest der Chat-Box-Abschnitte Fühlen Sie sich von diesem Vorgang nicht überwältigt. In echten Projekten werden Sie sich normalerweise nicht mit so vielen Ebenen und Abschnitten befassen Ich verwende dieses komplexe Setup hier im Kurs, damit du so viel wie möglich üben kannst. Am wichtigsten ist , dass Sie lernen, sich komplexen Szenen Schritt für Schritt zu nähern, indem die Szene in Animationsteile aufteilen und sich nacheinander auf jeden Teil konzentrieren Sie erhalten einen soliden Ausgangspunkt für die Arbeit an komplexen Demo-Flow-Animationen Ordnung. Lassen Sie uns nun die letzten drei Ebenen entsprechend ihrer jeweiligen Box platzieren. Perfekt. Wenn das erledigt ist, können wir mit der Animation der Namensebenen fortfahren Wählen wir wie gewohnt alle Namensebenen aus und kennzeichnen sie mit einer anderen Farbe Zoomen Sie nun ein wenig hinein, bewegen Sie die Zeitanzeige auf die dritte Sekunde, den Punkt, an dem dieser Animationsteil beginnen soll , und erstellen Sie für alle einen Positions-Keyframe Gehen Sie eine Sekunde vorwärts und passen Sie ihre Position nacheinander an, genau wie wir es mit den Avatar-Symbolen getan haben Großartig. Nun, das ist erledigt. Lassen Sie uns in diesem Abschnitt mit den restlichen Designobjekten umgehen . Fangen wir mit diesem lila Knopf an. In der dritten Sekunde animieren wir ihre Position von der aktuellen Position bis zu der Position, an der sie sich auf dem zweiten Nachrichtenbildschirm befinden muss dem zweiten Nachrichtenbildschirm Markieren Sie es aus Gründen der Übersichtlichkeit mit einer anderen Farbe. Öffnen Sie die Positionseigenschaft, erstellen Sie in Sekunde drei einen Keyframe, bewegen Sie sich dann 1 Sekunde vorwärts und reduzieren Sie ihn ein wenig Perfekt. Lassen Sie uns als Nächstes dieses andere Designobjekt behandeln. Es ist bereits auf dem ersten Bildschirm vorhanden, sodass wir nur noch seine Position animieren müssen Markieren Sie es rot, um organisiert zu bleiben. Erstellen Sie erneut eine Position der Keyframes an den zweiten drei, fahren Sie dann fort und passen Sie ihre Platzierung an. In Ordnung. Jetzt sind wir mit der Anpassung aller Designobjekte fertig , die zwischen dem ersten und dem zweiten Bildschirm konsistent bleiben . Als Nächstes werden wir uns mit den neuen Designobjekten befassen , die nur auf dem zweiten Bildschirm erscheinen. Beispiel: Wir müssen die Textnachrichten in jeder Chatbox hinzufügen . Ich habe bereits ein paar Textzeilen vorbereitet, die wir verwenden können. Bevor wir weitermachen, sperren und isolieren die Referenzebene, damit wir genau wissen , wo der Text platziert werden muss. Lassen Sie uns nun die erste Textnachricht erstellen. Gehen Sie zu dem Assets-Ordner, den Sie von mir heruntergeladen haben, und öffnen die PDF-Datei mit dem Namen Random Messages two. Kopieren Sie die erste Nachricht. In Ordnung. Zurück in After Effects, fügen Sie es hier ein. Aber anstatt es als einzelne Textzeile beizubehalten, löschen wir diese Ebene und erstellen ein Textfeld. Auf diese Weise wird das Anpassen mehrzeiliger Nachrichten viel einfacher. Großartig. Öffnen Sie nun die Texteigenschaften und passen Sie die Schrifteinstellungen an. Setzen Sie zuerst den Abstand zurück. Stellen wir die Schriftgröße auf 14 ein. Als Nächstes verschieben Sie es an seinen Platz. nun, bevor wir es animieren, Lassen Sie uns nun, bevor wir es animieren, dieses Textfeld für die restlichen Abschnitte der Chatbox duplizieren , damit wir den Text später problemlos ersetzen können Ersetzen Sie nun jeden duplizierten Text durch die Nachrichten aus der PDF-Datei Übrigens habe ich all diese Nachrichten mit Chat GPT generiert. Ich habe erklärt, dass ich an einem SAS-Erklärvideo für ein CRM-Unternehmen arbeite , und es wurden zufällige Chat-Nachrichten erstellt, die wir in dieser Demo verwenden können in Cool. Ordnung. Nachdem das erledigt ist, speichern wir das Projekt, bevor wir weitermachen. Verschieben Sie nun die Abspielposition auf die vierte Position und richten Sie alle Textebenen so aus, dass sie von hier aus beginnen für die Intro-Animation die Eigenschaft „Deckkraft“, Verwenden wir für die Intro-Animation die Eigenschaft „Deckkraft“, um für alle einen einfachen Einblendeffekt zu erzeugen für alle einen einfachen Einblendeffekt Ordnung. Und jetzt ändern wir die Farbe aller Textebenen auf Schwarz. Großartig. Und jetzt lassen Sie uns alle Ebenen wieder sichtbar machen und weitermachen. Ich sehe, dass die Position meiner Textebenen nicht mit dem Namen übereinstimmt, also wähle ich sie alle aus und verschiebe sie ein wenig nach rechts. Okay, das sieht besser aus. Lassen Sie uns nun das Design des zweiten Nachrichtendesigns öffnen und sehen, was wir als Nächstes tun können. Mir ist gerade aufgefallen, dass die Textfarbe eigentlich nicht schwarz ist . Es ist dunkelgrau. Lass es uns schnell anpassen. Wählen Sie alle Textebenen aus. Dann mit dem Pipettenwerkzeug die dunkelgraue Farbe der Avatar-Symbole im Ja, das passt perfekt zum ursprünglichen Stil. Lassen Sie uns nun eine Vorschau mit dem Rest der Animation anzeigen. Eine kurze Erinnerung. Sie müssen sich noch nicht allzu viele Gedanken über das Timing machen. Im Moment beenden wir gerade die erste Animation. Später werden wir das Timing so verfeinern, dass es der Gesamtdauer der Szene und dem Voiceover entspricht Gehen wir nun zu den nächsten Designobjekten über. Um zu sehen, was als Nächstes kommt, schalten Sie die Referenzebene wieder ein und überprüfen Sie den rechten Bereich der Chat-Felder. Hier können wir anfangen, die Sternsymbole mit einer schönen Intro-Animation zu animieren die Sternsymbole mit einer schönen Intro-Animation Nachdem das geklärt ist, schalten wir die Referenzebene aus, gehen wir dann zur Hauptvorkomposition des zweiten Nachrichten-UI-Bildschirms des zweiten Nachrichten-UI-Bildschirms und kopieren alle Sternsymbole, die wir Gehen Sie nun zurück zum ersten Nachrichtenbildschirm, auf dem unsere Demo-Flow-Animation stattfindet, und fügen Sie sie hier Achten Sie darauf, die Ebenen über allen anderen Ebenen in dieser Timeline einzufügen . Als Nächstes kennzeichnen Sie sie zur besseren Organisation mit einer anderen Farbe. Lassen Sie uns sie so bringen, dass sie bei Sekunde fünf beginnen und die Eigenschaft scale verwenden , um eine nette, knallende Intro-Animation für die Sterne zu erstellen eine nette, knallende Intro-Animation für die Großartig. Lassen Sie uns nun in Sekunde sechs das nächste Designobjekt animieren Wählen Sie die Zeitsymbole alle aus, kopieren Sie sie und fügen Sie sie in unsere Szene Setze ihren Startpunkt auf Sekunde sechs. Dieses Mal verwenden wir die Opazität für ein sanftes Überblenden der Animation Vergessen Sie nicht, diese Ebenen mit einer anderen Farbe zu kennzeichnen und dann das Projekt zu speichern, bevor Sie fortfahren Nachdem ich die Wiedergabe überprüft habe, denke ich, dass es besser aussieht, wenn die Zeitsymbole zusammen mit den Sternsymbolen erscheinen. Lassen Sie uns sie also zurück zu Sekunde fünf verschieben. Fantastisch. Kehren wir nun zum zweiten Nachrichtenbildschirm zurück und sehen wir, was als Nächstes kommt. Nachdem wir die Demo-Flow-Animation für das linke Menü in den Chat-Abschnitten für Kontakte abgeschlossen haben, können wir uns nun mit dem Haupt-Chat-Bereich befassen. Beginnen wir mit einigen einfachen Designobjekten. Wählen Sie diese vier Ebenen aus, kopieren Sie sie und fügen Sie sie ab Sekunde fünf in unsere Szene ein. Kennzeichnen Sie sie mit einer neuen Farbe. für ihre Intro-Animation Verwenden wir für ihre Intro-Animation die Eigenschaft scale Um der Textebene Abwechslung zu verleihen, verwenden wir stattdessen eine Einblendanimation mit Opazität Perfekt. Lassen Sie uns nun die anderen drei Ebenen vergrößern. Sobald das erledigt ist, lassen Sie uns weitermachen. Zurück im zweiten Bildschirm, kopiere die nächsten drei Ebenen und starte sie ebenfalls bei zweiten fünf. diese beiden Ebenen animieren, Lassen Sie uns diese beiden Ebenen animieren, wobei die Deckkraft eingeblendet Und für die dritte Variante verwenden Sie eine Animation, die nach oben skaliert werden soll. Beachten Sie, dass ich nicht alles auf einmal vom zweiten Bildschirm kopiere . Stattdessen beschäftige ich mich mit jedem Abschnitt einzeln. Dies ist der beste Ansatz für komplexe Demo-Flow-Animationen. Es hält alles strukturiert und überschaubar. Nachdem wir die einfachsten Teile fertiggestellt haben, fahren wir mit dem letzten Abschnitt Der Konversationsbereich. Wir teilen ihn in zwei Teile auf, die oberen Nachrichtenblasen und die letzten beiden Nachrichtenblasen. Die letzten beiden erfordern ein etwas komplexeres Intro da ich dort eine benutzerdefinierte Konversation geplant habe Wählen Sie zunächst alle Ebenen der oberen Blasen aus, kopieren Sie sie und fügen Sie sie in Sekunde sechs in die Hauptzeitleiste Großartig. Markiere sie jetzt grün. Kehren Sie als Nächstes zum zweiten Bildschirm zurück und kopieren Sie die Ebenen für die letzten beiden Nachrichtenblasen. Fügen Sie sie ebenfalls ab Sekunde sechs in die Timeline ein. Zoomen Sie hinein und überprüfen Sie die Reihenfolge der Ebenen sorgfältig. Es ist wichtig, dass alles richtig gestapelt ist . Passen Sie es nach Bedarf an Großartig. Lassen Sie uns nun für ihr Intro animieren, wie sie vom unteren Rand des Frames hineingleiten vom unteren Rand des Frames hineingleiten jedoch zunächst sicher, dass alle Blasenelemente ihrer Avatar-Symbolebene übergeordnet alle Blasenelemente ihrer Avatar-Symbolebene Perfekt. Machen Sie jetzt dasselbe für die zweite Blase. Großartig. Taggen Sie jetzt jedes Teil einer anderen Farbe , um den Überblick zu behalten. Da wir nun möchten, dass die Szene wie der endgültige Zustand der Benutzeroberfläche nach dem Intro aussieht, gehen wir zur wie der endgültige Zustand der Benutzeroberfläche nach dem Intro aussieht, siebten Sekunde über und erstellen Positionskeyframes für die beiden Avatar-Symbole in all ihren zugehörigen Nachrichtenblasenebenen Kehren Sie dann zu Sekunde sechs zurück und ziehen Sie all diese Ebenen nach unten, sodass sie von außerhalb des Frames animiert werden Wir lassen es vorerst so. Zwischenzeit bereiten wir auch den letzten Animationsteil der Szene vor, die Suchfeld-Ebenen unten Kopieren Sie sie, fügen sie in die Timeline und starten sie in Sekunde sieben. Für ihr Intro verwenden wir dieselbe Technik, sie vom unteren Rand des Frames aus hineinschieben Perfekt. Zu diesem Zeitpunkt haben wir die erste Animation für alle Bereiche der Benutzeroberfläche erstellt . Lassen Sie uns nun alles anhand der Referenz überprüfen. Großartig. Schneiden Sie nun die Referenzebene an ihrer Stelle aus, fügen Sie sie über alle Ebenen ein, um den Zugriff zu erleichtern, kennzeichnen Sie sie mit einer anderen Farbe und schalten Sie sie ein. Wie Sie sehen, müssen wir die Größe des Hauptbildschirms der Benutzeroberfläche so anpassen , dass sie perfekt zum ursprünglichen Design passt. Öffnen wir dazu die Lineale und erstellen Richtlinien. Zunächst eine, um die Gesamtbildgröße anzugeben. Und dann zwei weitere , um den oberen und unteren Rand des Hauptgesprächsabschnitts zu markieren . Schließ die Lineale. Und jetzt fangen wir an, den wichtigsten Teil anzupassen, den Konversationsbereich selbst Lassen Sie uns zunächst die Ebene des weißen Felds in diesem Abschnitt im Ebenenbedienfeld suchen . Hier ist sie. Die beste Möglichkeit, ihre Größe anzupassen, besteht darin diese Illustrator-Ebene in eine Form mit einem belebteren Pfad umzuwandeln eine Form mit einem belebteren Auf diese Weise können wir den Pfad der Form direkt animieren Pfad der Form direkt Sobald das erledigt ist, können wir die ursprüngliche Ebene ausschalten und sie verkleinern, damit sie das Ebenenfenster nicht überfüllt Lassen Sie uns die neue Form der Übersichtlichkeit halber auch mit einer anderen Farbe kennzeichnen Übersichtlichkeit halber auch mit einer anderen Farbe Lassen Sie uns vor dem Animieren die Formebene öffnen und prüfen, ob darin unnötige Eigenschaften enthalten sind Ich sehe hier ein paar irrelevante Pfade. Lassen Sie uns also zuerst diese Gruppe dann auch die Eigenschaft „Pfade zusammenführen“ löschen. Großartig. Öffnen Sie nun den Pfad und erstellen Sie am Anfang der Timeline einen Keyframe Später werden wir diese Animation richtig auf den Rest der Szene Gehen wir zunächst eine Sekunde vorwärts und wählen den unteren Teil des Pfads aus. Ziehen Sie ihn dann nach unten , bis er mit der zuvor erstellten Richtlinie Perfekt. Machen wir jetzt dasselbe für den oberen Teil des Pfades. das erledigt ist, müssen wir nun die Größe des Hauptbildschirms der Benutzeroberfläche anpassen. Um etwas Zeit zu sparen, werden wir uns dafür entscheiden, nur den Hauptkonversationsbereich sichtbar zu lassen, anstatt die Größe von allem werden wir uns dafür entscheiden, nur den Hauptkonversationsbereich sichtbar zu lassen, anstatt die zu ändern. Die restlichen Bereiche der Benutzeroberfläche können ausgeblendet werden. Das spart uns nicht nur Zeit, sondern lenkt auch die Aufmerksamkeit der Zuschauer auf den wichtigsten Teil der Szene. Sie werden gleich sehen, was ich meine. Gehen wir also zum Anfang der Timeline und erstellen eine einfache Fade-Out-Animation für das Panel One Pre Comp Nun, das ist abgeschlossen. Lassen Sie uns die Referenzebene wieder einschalten, um zu überprüfen, ob wir etwas übersehen haben. Mir ist aufgefallen, dass wir noch einen weiteren Schritt vor uns haben, bevor wir weitermachen eine Farbwechsel-Animation für den Strich der Chatbox erstellen . Lassen Sie uns die Referenzebene wieder ausschalten und der Einfachheit halber auch die Hilfslinien ausschalten. Bewegen Sie nun den Mauszeiger über die Formebenen in der Timeline. Schauen Sie sich das Vorschaufenster genau an. Wenn Sie den Mauszeiger über eine Formebene bewegen, werden die zugehörigen Ebenenhilfslinien blau angezeigt Sie sind übrigens blau, weil diese Ebene blau markiert ist Hier ist die richtige Formebene. Wählen wir sie aus und drücken U, um die Keyframes anzuzeigen. Stellen Sie sich an den Anfang der Animation, öffnen Sie die Kontureigenschaften im Ebenenmenü und erstellen Sie Keyframes für die Konturfarbe Lassen Sie zu diesem Zeitpunkt die Farbe unverändert. Drücken Sie Sie jetzt erneut, damit wir nur die Keyframes sehen. Gehen Sie zu Sekunde vier und ändern Sie die Strichfarbe auf lila Wir können das Violett direkt über das Schaltflächensymbol abtasten , um die Konsistenz mit dem Design zu wahren. Perfekt. Nachdem das erledigt ist? Speichern wir das Projekt. Damit ist diese Lektion abgeschlossen. In der nächsten werden wir weiter an dieser komplexen Demo-Flow-Animation arbeiten Es wird noch interessanter werden. Wir sehen uns also in der nächsten Lektion. 21. Timinganpassungen und Klickinteraktionsanimation: Komm zurück. Wir beginnen diese Lektion mit der Anpassung des Timings der Animation. Und da wir vor Beginn der Demo-Flow-Animation eine Intro-Animation für die Szene erstellen , können wir alle animierten Ebenen 2 Sekunden nach vorne verschieben Auf diese Weise haben wir etwas Zeit für die Intro-Animation für die Szene . In Ordnung. Und jetzt wählen wir alle Ebenen des ersten UI-Bildschirms aus und erweitern sie sodass wir sie am Anfang der Timeline sehen können. Großartig. Lassen Sie uns nun diese Pre-Comp-Keyframes und sie so verschieben, dass sie ebenfalls bei den zweiten beginnen Ab diesem Zeitpunkt muss die Klickanimation erfolgen, und wir werden zum nächsten Benutzeroberflächenbildschirm übergehen. Okay. Und jetzt lassen Sie uns diese Klick-Animation erstellen. Wie Sie sich vielleicht erinnern, müssen wir dies für diese Kontakt-Chat-Box tun . Und jetzt, um die Klick-Animation zu erstellen. Lassen Sie uns ein neues Nullobjekt in der Szene erstellen. Stellen Sie sicher, dass es sich über dieser Formebene befindet. Kopieren wir den Namen dieser Formebene und fügen ihn die Null ein, damit wir wissen, für welche Formebene sie verantwortlich sein wird. Wir können die Null blau markieren. Wir wissen also, dass es zu diesem Animationsteil gehört. In Ordnung. Und jetzt stellen wir sicher, dass der Ankerpunkt der Null in der Mitte dieses Avatar-Symbols liegt. Und danach überlagern wir die entsprechende Formebene der Null. Jetzt erstellen wir eine Klick-Animation, indem wir die Skala der Null animieren Zu diesem Zeitpunkt sollte die Klickanimation bereits beendet Lassen Sie uns also hier den ersten Keyframe erstellen. Gehen wir nun zehn Frames rückwärts und erstellen auch hier einen Keyframe. Lassen Sie uns abschließend in der Mitte der Animation stehen und die Null verkleinern Ich denke, wir können es auf 70 setzen, oder? Und jetzt, wie Sie sehen können, müssen wir auch die restlichen Designobjekte dieser Chat-Box verkleinern. Wählen wir daher alle relevanten Ebenen aus und entscheiden, ob sie der Nullebene oder der Formebene übergeordnet werden sollen. Lassen Sie uns mit der Formebene beginnen. Lass uns das überprüfen. Mir ist aufgefallen, dass ich es verpasst habe, das Avatar-Symbol zu Lassen Sie uns es also ganz schnell finden und es auch der Formebene zuordnen Ordnung. Damit haben wir die Erstellung der Klick-Animation abgeschlossen und können jetzt die Null so kürzen, und können jetzt die Null so kürzen dass sie zur Animation passt. Diese Ebene muss sich nicht am Ende der Zeitleiste befinden. Fantastisch. Und wenn das erledigt ist, können wir jetzt mit dem nächsten Schritt fortfahren , der Anpassung der Bewegung. Das heißt, wir werden einfach alle Keyframes, die wir bisher erstellt haben , vereinfachen und versuchen, die Bewegung etwas interessanter aussehen zu lassen Lassen Sie uns zunächst das Zeitleistenfenster so skalieren , dass wir so viele Ebenen wie möglich sehen können Beginnen wir nun mit der Anpassung der Klickanimation. Lassen Sie uns zunächst die Keyframes vereinfachen und dann dafür sorgen, dass die Bewegung am Anfang schnell beginnt und gegen Ende langsamer wird Ich denke, wir können diese Art von Bewegung für den Rest der Animation machen Bewegung für den Rest der Animation Meiner Meinung nach sieht es gut aus. In Ordnung. Sobald das erledigt ist, stellen wir sicher, dass keine Ebene ausgewählt ist, und drücken T, um die Opazitäts-Keyframes zu öffnen, die wir in der Szene erstellt Wir passen jede Eigenschaft nacheinander an Lassen Sie uns zunächst mit allen Opazitäts-Keyframes befassen. Stellen Sie also sicher, dass Sie sie alle auswählen, und lassen Sie uns sie dann einfach vereinfachen und die Bewegung wie bei der Klickanimation Fantastisch. Das sieht gut aus. Drücken wir nun U, um alle Ebenen zu schließen, und drücken wir dann S, um die Skalierungs-Keyframes zu bearbeiten Stellen wir sicher, dass wir alle Keyframes auswählen , die wir in der Timeline haben Lassen Sie uns sie nun vereinfachen und die Bewegung im Diagrammeditor anpassen die Bewegung im Diagrammeditor Arbeit. Beim Anschauen der Animation mir aufgefallen, dass eine der Sternsymbolebenen in der falschen Farbe markiert ist. Also werde ich sicherstellen , dass ich diese Ebene finde und markiere sie mit der richtigen Farbe. Dieser muss in Rosa markiert werden. In Ordnung. das erledigt ist, schließen wir nun alle Ebenen und öffnen die Positions-Keyframes Lassen Sie uns alle Positions-Keyframes auswählen, die wir hier haben, und die Bewegung anpassen Fantastisch. Sobald wir mit der Anpassung aller Keyframes fertig sind, schließen wir alle Ebenen und drücken Sie dann auf Sie um alle Keyframes für alle Eigenschaften zu sehen , die wir animiert haben, nur für den Fall, dass wir dabei eine Eigenschaft nicht angepasst haben Es ist immer eine gute Idee, sich selbst zu überprüfen, bevor Sie mit dem nächsten Schritt fortfahren Wie Sie sehen können, haben wir die Größenanimation die wir für die Formebenen erstellt haben, hier unten. Passen wir also auch diese Keyframes an. Um nur die Größe der Keyframes zu sehen, können wir nur die Formebenen auswählen und dann Größe in die Suchleiste im Ebenenbedienfeld eingeben Großartig. Lassen Sie uns nun alle Pfad-Keyframes auswählen und die Bewegung wie für den Rest der Szene anpassen Da wir das eingeschränkte Verhältnis für die Größenwerte deaktivieren , müssen wir die beiden Werte nacheinander anpassen. Großartig. Als Nächstes können wir die Farb-Keyframes anpassen. Vorher ist mir jedoch aufgefallen, dass ich es verpasst habe, die Größe der Keyframes dieser Ebene anzupassen . Also lass es mich ganz schnell machen Okay, jetzt passen wir die Farb-Keyframes an. Fantastisch, wenn das erledigt ist Wir können das Projekt jetzt speichern und auch die Suchleiste schließen, bevor wir mit dem nächsten Schritt fortfahren. Schauen wir uns ein letztes Mal alle Keyframes an , um zu sehen, ob wir etwas übersehen Ich sehe, dass ich die Pfad-Keyframes dieser Formebene übersehen habe die Pfad-Keyframes dieser Formebene Wenn Sie das auch getan haben, passen wir die Animation hier schnell Es ist wichtig für mich , Ihnen zu zeigen, wenn Sie viele Ebenen und Keyframes haben. Es ist eine gute Idee, sich selbst ein paar Mal zu überprüfen , bevor Sie weitermachen Ordnung, jetzt sind wir sehen, mit der Anpassung aller Keyframes fertig und können nun wie alles Passen wir also die Größe des Ebenenfensters an und sehen uns alle Animationen an, die wir zu Beginn dieser Szene erstellt haben Beginn dieser Szene erstellt Mir ist aufgefallen, dass sich das Avatar-Symbol der zweiten Chat-Box sehr seltsam bewegt. Konzentrieren wir uns also auf diesen Teil und versuchen, dieses kleine Problem zu beheben. Lassen Sie uns zunächst die Ansicht vergrößern und versuchen zu verstehen, wann genau das Problem beginnt. Dies geschieht im Teil der Klickanimation. Lassen Sie uns also herausfinden, wo sich unsere Klickanimation in der Timeline befindet. In unserem Fall ist das, was die Klick-Animation auslöst , die Null. Das bedeutet, dass das Avatar-Symbol wahrscheinlich nicht der Null übergeordnet ist Vielleicht ist es einer anderen Ebene übergeordnet. Ich glaube, wir haben es in diesem Fall der weißen Formebene Es ist sehr wichtig, zu dem Zeitpunkt zu stehen, an dem die Klick-Animation stattfindet, und erst dann die Avatar-Symbolebene zu finden und sie der Null überzuordnen Mal sehen, was wir haben. Okay, das sieht gut aus. Lassen Sie uns jetzt auch die restlichen Designobjekte, die sich auf die Chat-Box beziehen, der Null statt der Formebene zuordnen. Fantastisch. Jetzt sieht alles perfekt aus und wir können das Projekt speichern, bevor wir weitermachen. Im nächsten Schritt ist es eine gute Idee, Arbeit am Timing der Morphing-Animation zu beginnen , die in dieser Demo-Flow-Animation stattfindet Wir können diese Vorkomposition vorerst ausschalten , um uns auf die Demo-Flow-Animation zu konzentrieren Vorerst haben wir uns darauf konzentriert, die erste Animation zu erstellen Dann verbessern wir die Bewegung und jetzt können wir das Timing der Ebenen anpassen. Einige Abschnitte können früher beginnen , andere etwas später. Um zu verstehen, was zu tun ist, gehe ich normalerweise in der Timeline vor und zurück, um zu sehen welche Animationsteile im Demo-Ablauf angepasst werden können , um den Übergang zu verbessern. Ich denke zum Beispiel, dass die Textebenen etwas früher in der Timeline verschwinden können. Wir können die Fade-Out-Animation ab dem Zeitpunkt starten ab dem Zeitpunkt , an dem die restlichen Symbole zu schrumpfen beginnen Also lass es uns jetzt machen. Dazu müssen wir zuerst alle Keyframes aller Ebenen öffnen Lassen Sie uns nun einen Zeitpunkt finden, an dem die Textanimation enden soll Ich denke, es kann kurz vor der Morphing-Animation der Formebenen oder vielleicht sogar früher enden Morphing-Animation der Formebenen oder vielleicht sogar früher Lassen Sie uns vorerst hier stehen und die Textebenen suchen. Hier sind sie. Es sind alle Ebenen mit der Opazitätsanimation Wählen wir also alle Opazitäts-Keyframes auf diesen Ebenen und verschieben sie an eine Stelle in der Timeline Wir können sie alle so verschieben, dass sie an dem Punkt beginnen, an dem die Otro-Animation des Symbols hier bei Sekunde drei beginnt. Großartig. Und jetzt schauen wir uns diese Animation an und sehen, was wir als Nächstes anpassen können. Meiner Meinung nach können wir mit dem Outtro der Icons im Text noch früher beginnen der Icons im Text noch früher Lassen Sie uns diesen gesamten Animationsteil mit den zweiten zwei und 15 Frames beginnen , was sich in der Mitte der Otro-Animation der Sterne Wählen Sie also all diese Keyframes aus und verschieben Sie sie so, dass sie bei den zweiten und 15 Frames beginnen Mal sehen, wie das aussieht. Ich finde, es sieht viel besser aus. Nachdem das erledigt ist, wollen wir die Animation weiter überprüfen und sehen, welchen Animationsteil wir als Nächstes anpassen können. In diesem Fall denke ich, dass wir die Morphing-Animation der Formen direkt nach dem Otro der Symbole und dem Textanimationsteil starten können die Morphing-Animation der Formen direkt nach dem Otro der Symbole und dem , der sich bei den zweiten drei und 15 Frames befindet Lassen Sie uns nun alle Keyframes für den nächsten Animationsteil auswählen, also die Avatar-Symbole, die Namen und die Form-Keyframes, und sie auf die zweiten drei und 15 Frames verschieben . Mal sehen, wie das aussieht Großartig. Meiner Meinung nach sieht es gut aus. Lassen Sie uns nun den Zeitpunkt finden, an dem wir die Intro-Animation der Ebenen des zweiten UI-Bildschirms starten können der Ebenen des zweiten UI-Bildschirms In diesem Fall können wir mit der vierten Sekunde beginnen , die sich in der Mitte der Morphing-Animation befindet Lassen Sie uns also hier stehen und dann in der Timeline nach oben scrollen und alle Ebenen des zweiten UI-Bildschirms auswählen alle Ebenen des zweiten UI-Bildschirms Lassen Sie uns sie abschließend so bringen , dass sie bei Sekunde vier beginnen. Schauen wir uns jetzt an, wie das aussieht. Fantastisch. Wir können jetzt mit der Anpassung des nächsten Animationsteils fortfahren. Dieses Mal können wir uns auf alle Ebenen konzentrieren, die nach den Textebenen des zweiten Benutzeroberflächenbildschirms in die Szene eingefügt werden müssen . Ich denke, wir können in der Mitte der Textanimation stehen, die aus den zweiten vier und 15 Frames besteht. Lassen Sie uns also all diese Ebenen auswählen und sie von hier aus starten. Schauen wir uns jetzt an, wie das aussieht. Sieht nett aus. Schauen wir uns nun den nächsten Animationsteil an. Diesmal konzentrieren wir uns auf die wichtigsten Ebenen des Konversationsabschnitts. Meiner Meinung nach müssen sie auch alle früher beginnen. Ich denke, wir können diesen Animationsteil auch mit den zweiten vier und 15 Frames beginnen . Okay, ich denke, es sieht besser aus. Lassen Sie uns nun den letzten Animationsteil so einstellen, dass er vorerst auch mit den zweiten vier und 15 Frames beginnt. Schauen wir uns diesen Teil ein paar Mal an, um zu sehen, wie sich das anfühlt. Meiner Meinung nach können wir den letzten Animationsteil des gesamten Konversationsabschnitts zusammen mit den Textebenen der zweiten vier beginnen des gesamten Konversationsabschnitts . Wählen wir also alle zweiten UI-Bildschirmebenen mit Ausnahme der Textebenen aus und bringen sie dann alle auf die zweiten vier. Ich zeige Ihnen diesen Prozess, damit Sie verstehen, dass wir nie genau wissen, wann der perfekte Zeitpunkt ist. Wir sollten immer die Animation überprüfen und schauen, ob die Bewegung gut fließt. In diesem Fall bin ich mit den Ergebnissen zufrieden. Lassen Sie uns nun damit fortfahren, diese Animation etwas interessanter aussehen zu lassen, und das können wir tun, indem wir eine leichte Verzögerung für die Ebenen des letzten Animationsteils erzeugen . Das ist der Konversationsbereich. Ich würde gerne sehen, wie es aussehen wird, wenn wir das Intro nacheinander von der ersten bis zur letzten Blase beginnen das Intro nacheinander von der ersten bis zur letzten Blase beginnen. Also lass es uns jetzt machen Um eine übersichtliche Zeitleiste zu haben, werde ich zunächst die Reihenfolge der Chat-Bubble-Ebenen ändern. müssen wir nicht tun, aber ich bevorzuge es, die Ebenen auf diese Weise zu organisieren. Die obere Nachrichtenblase befindet sich also unten im Ebenenbedienfeld. Die zweite Chat-Blase befindet sich darüber und so weiter. Ordnung. Sobald ich alle Ebenen organisiert habe, kann ich sie alle außer dieser auswählen, da sie zuerst in der Szene erscheint dann einen Offset von einem Frame erzeugt. Vergessen Sie nicht, dass diese vier Ebenen zu einer Nachrichtenblase gehören. Stellen Sie also sicher, dass sie als eine Einheit verschoben werden. Das Gleiche gilt für die letzte Nachrichtenblase. Lassen wir den letzten Animationsteil vorerst hier. Ich möchte zuerst sehen, wie das aussieht. Schauen wir es uns ein paar Mal an, um zu sehen, wie sich das anfühlt. Ich finde den Offset großartig, aber mir ist aufgefallen, dass das weiße Hauptfeld dieses Abschnitts zu spät wächst. Das heißt, wir haben es versäumt, das Timing anzupassen. Also lass uns das ganz schnell machen. Zuerst müssen wir diese Ebene finden. Hier ist sie. Jetzt müssen wir die Pfadanimation ab dem Zeitpunkt starten, an dem sich die Chatboxen so zu verändern beginnen, dass sie zum Design des zweiten Benutzeroberflächenbildschirms passen In unserem Fall handelt es sich um die zweiten drei und 15 Frames. Mal sehen, wie das aussieht. Großartig. Und jetzt können wir zum letzten Animationsteil zurückkehren, wo wir das Intro der Suchfeld-Ebenen sehen das Intro der Suchfeld-Ebenen und dort auch einen schönen Offset erstellen Zunächst können wir alle Ebenen auswählen, die sich auf diesen Animationsteil beziehen , und ihre Keyframes öffnen Sobald das erledigt ist, wollen wir nun entscheiden welche Ebenen zuerst in die Szene gelangen sollen Ich möchte, dass diese beiden Ebenen zuerst beginnen, also füge ich sie hier in den Ebenenstapel ein. Für die Schaltfläche möchte ich, dass sie zuletzt eingegeben wird. Also werde ich es hier über alle Ebenen bringen. Als Nächstes sollte das Tintensymbol meiner Meinung nach in der Szene vor dem Smiley-Symbol erscheinen Ordnung. Also fangen wir jetzt an, den Offset zu erstellen Ich möchte, dass diese beiden gleichzeitig eintreten. Dann möchte ich, dass das Link-Symbol die Szene aufruft, gefolgt vom Rest. Mal sehen, was wir haben. H Ich denke, wir können diesen Animationsteil etwas nach dem Teil mit den Nachrichtenblasen beginnen . Lassen Sie uns diesen Animationsteil mit den zweiten vier und 15 Frames beginnen . Großartig. Lassen Sie uns jetzt der Arbeit am nächsten Animationsteil beginnen , der Chat-Animation, die ich hier erstellen möchte. Und dann werden wir am Outtro dieser gesamten Szene arbeiten , das nach einer Klick-Animation auf den Senden-Button passieren sollte nach einer Klick-Animation auf den Senden-Button passieren Und anstatt diese Ebene zu animieren, können wir die zuvor erstellte Schaltfläche Pre Comp verwenden, für die wir die Klickanimation bereits fertig haben Lassen Sie uns also zunächst den entsprechenden Precomp finden. Hier ist es Im Precomps-Ordner. Falls Sie es schnell finden möchten, können Sie es über die Suchleiste finden Das ist einer der Vorteile der Kennzeichnung Ihrer Precoms. Ordnung. Also, sobald wir den Precomp gefunden haben, müssen wir ihn aus dem Projektfenster duplizieren Jetzt müssen wir den Namen an die Nummer der Szene anpassen , an der wir gerade arbeiten In diesem Fall ist es Szene sieben. Großartig. Wählen Sie nun die Schaltflächenebene aus der Timeline aus und ziehen Sie die neue Precomp darauf, während Alt oder Option gedrückt halten, um sie zu ersetzen das erledigt ist, passen wir nun den Maßstab der Precomp an das Design an Stellen wir die Skala auf 30 ein. Lassen Sie uns nun den Precomp reduzieren und den richtigen Zeitpunkt finden den richtigen Zeitpunkt an dem die Klick-Animation stattfinden soll Da wir die Chat-Animation vor der Klick-Animation erstellen müssen , sollten wir uns dafür ein paar freie Sekunden Zeit lassen und die Klick-Animation vorerst, sagen wir, ab Sekunde acht starten Geben wir also den Button precomp und verschieben die Keyframes zu diesem Zeitpunkt Fantastisch. Und jetzt ändern wir den zu sendenden Text, bevor wir weitermachen. Sobald wir fertig sind, kehren wir zur Bildschirmszene zurück und speichern das Projekt, um alle bisher ausgeführten Prozesse zu sichern. Großartig. Und jetzt fangen wir an, an der Chat-Animation zu arbeiten, die vorerst ab Sekunde sieben beginnen kann. Zuerst müssen wir hier eine Animation zum Tippen von Text hinzufügen. Dazu können wir die Animation zum Tippen von Text verwenden , die wir zu Beginn des Projekts erstellt haben . Hier ist sie. Lassen Sie uns diese Textebene kopieren. Gehen wir nun zurück zur Szene und fügen sie über alle Ebenen ein. Verwenden wir nun die linke Klammertaste, um diese Ebene an die Position der Zeitanzeige zu bringen. Alles klar? Wir können auch die Keyframes öffnen und die Positions-Keyframes darauf löschen Großartig. Lassen Sie uns als Nächstes an dem Punkt stehen, an dem die Animation abgeschlossen ist und die Position und Position dieser Textebene anpassen . Okay. Das sieht gut genug aus. Lassen Sie uns nun am Anfang dieser Animation stehen und den Typ Ihrer Chat-Ebene auf diesen Zeitpunkt zuschneiden . Fantastisch. Jetzt haben wir also ein nettes Intro für die Animation der Tippnachricht Sobald das erledigt ist, können wir die Nachricht nun an das anpassen , worum der Konversation gehen soll In diesem Fall. Da in der vorherigen Nachricht nach einem UI-Design gefragt wurde, lassen Sie uns in unserer Nachricht sagen, dass ich Ihnen einen Link mit einer guten Referenz schicke. Später werden wir auch den Text in den beiden letzten Nachrichtenblasen ändern den beiden letzten Nachrichtenblasen um ihn an das Thema der Konversation anzupassen. Jetzt wird diese Nachricht gesendet, und dann benötigen wir ein paar Frames, damit der Cursor zur Schaltflächenposition fliegt und dann darauf klickt. Wir können die Klickanimation von hier aus starten. Geben wir die Schaltfläche ein, erstellen wir die Vorkomposition und passen das Timing der Keyframes Fantastisch. Jetzt, zu dem Zeitpunkt, an dem die Klickanimation beginnt, kann der Text verschwinden und dann in einer Blase im obigen Konversationsabschnitt wieder erscheinen einer Blase im obigen Konversationsabschnitt Das bedeutet, dass wir ab diesem Zeitpunkt eine grüne Nachrichtenblase mit der letzten Nachricht, die wir gerade erstellt haben, erstellen müssen die wir gerade erstellt dazu zunächst alle Ebenen aus, Wählen wir dazu zunächst alle Ebenen aus, die sich auf die letzte grüne Nachrichtenblase beziehen , und duplizieren sie dann. Platzieren wir die neuen Ebenen hier oben, sodass wir sie in einem Stapel haben. Lassen Sie uns als Nächstes diese Ebenen unterkomponieren. Wir können diesen Bildschirm fünf, Blase eins nennen. Fantastisch. Platzieren wir nun diesen Precomp unter dem Button und geben ihn ein, um den Text darin anzupassen Lassen Sie uns zunächst alle Keyframes löschen, die wir auf allen Ebenen hier haben Drücken Sie nun auf der letzten Ebene S und skalieren Sie sie ein wenig. Die Ebenen sind zu klein , als dass ich damit arbeiten könnte. Wir können die Skala auf 300 setzen. Danach öffnen wir das sichere Aktionsraster und positionieren die Ebenen in der Mitte des Rahmens. Großartig. Jetzt brauchen wir diese Blase, um den Text, für den wir eine Tippanimation erstellt haben , in der Bildschirmszene anzuzeigen. Gehen wir also zurück und doppelklicken wir auf die Textebene, die wir hier haben, um den Text zu kopieren. Zurück zum Precomp. Lassen Sie uns eine neue Textebene erstellen und den Text einfügen Lassen Sie uns nun die Schrift auf, sagen wir, 42 skalieren und die Nachrichtenblase dafür erstellen. Ich möchte vorerst nicht, dass du mir folgst , weil ich zwei Möglichkeiten habe, das zu tun. Ich werde dir den ersten Weg zeigen, aber wir werden den zweiten Weg wählen. Wenn wir also mit dem zweiten Weg beginnen, werde ich Sie wissen lassen, wann Sie wieder aktiv werden müssen. Im Moment möchte ich nur, dass Sie sehen, wie Sie mithilfe der beiden D-Textfelder, die wir bereits im Kurs verwendet haben, eine benutzerdefinierte Nachrichtenblase erstellen können eine benutzerdefinierte Nachrichtenblase mithilfe der beiden D-Textfelder, die wir bereits im Kurs verwendet haben, Zunächst füge ich das Textfeld zur Szene hinzu und stelle sicher, dass es sich auf die Textebene auswirkt, die ich hier habe. Als Nächstes passe ich die Farben an und platziere sie unter der Textebene, sodass wir den Text sehen können. Bis jetzt haben wir diese Dinge bereits getan. Aber jetzt möchte ich Ihnen zeigen, welche Eigenschaften Sie anpassen müssen, um die ungewöhnliche Form zu erhalten , die wir im ursprünglichen Design haben. Achten Sie im Originaldesign auf die Ecken der grünen Nachrichtenblase. Sie sind nicht alle gleich gerundet. Für den Fall, dass Sie bei Ihren zukünftigen Projekten eine einzigartige Form erstellen müssen. Sie können das Menü mit abgerundeten Ecken öffnen und mit den Eigenschaften im Menü „Pro Ecke aktivieren“ herumspielen . Wie Sie sehen können, versuche ich hier, die verschiedenen Kontrollkästchen zu aktivieren und zu deaktivieren , bis ich die richtige Setup-Kombination In diesem Fall deaktiviere ich nur die abgerundete untere rechte Ecke. War das richtige Setup. Dann muss ich nur noch entscheiden, wie hoch der Rundheitsgrad sein soll. Ordnung, jetzt lösche ich das Textfeld, das ich erstellt habe, und wir werden es zusammen mit der zweiten Methode machen, die einfacher zu erstellen, aber weniger automatisiert ist In diesem Fall komme ich gut damit zurecht. Ich werde die Originalebene verwenden und sie in eine Form mit einem Bézier-Pfad konvertieren Wir können jetzt die ursprüngliche Ebene verkleinern. Ordnung. Und jetzt öffnen wir die neue Formebene und löschen die irrelevanten Eigenschaften darin, wie die Gruppe, die wir hier haben, und die Zusammenführungspfade Sobald wir fertig sind, platzieren wir den Text an der richtigen Position. Sie dann mit dem Stiftwerkzeug Wählen Sie dann mit dem Stiftwerkzeug einen der Punkte des Pfads aus. Jetzt können wir zurück zum Auswahlwerkzeug wechseln und alle Punkte auf der linken Seite auswählen. Dann ziehen wir sie, bis wir den Pfad gefunden haben, der der Länge des Textes entspricht. Wir können diese Ebene löschen, die den Originaltext zeigt. Ordnung. Und jetzt wählen wir alle Ebenen aus, die wir hier haben, und platzieren sie in der Mitte des Rahmens Das sieht gut aus, aber ich denke, wir können jetzt die Kompositionseinstellungen öffnen und die Größe der Komposition an die Größe der Nachrichtenblase anpassen und die Größe der Komposition an die Größe der Nachrichtenblase Setzen wir die Höhe auf 300 und dann die Breite auf, sagen wir, 1.000 das erledigt ist, kehren wir nun zur Bildschirmkomposition zurück und erstellen eine Intro-Animation für die neue Nachrichten-Bubble-Precomp erstellen eine Intro-Animation für die neue Nachrichten-Bubble-Precomp Lassen Sie uns diesen Pre-Comp zunächst so einrichten, dass er bei Sekunde acht beginnt. Passen wir nun die Größe des Pre-Comps an das Gesamtdesign Ordnung. Das sieht gut genug aus. Die Intro-Animation dieser Nachrichtenblase beginnt ab Sekunde acht Wir können diesen Precomp über alle Ebenen bringen. Und bevor wir mit der Erstellung des Intros für diese Nachrichtenblase beginnen , ersetzen wir diese Nachrichtenblase eine neue, die eine andere Nachricht enthält Die Konversation muss etwas realistischer aussehen. Suchen wir dazu zuerst unsere neu erstellte Nachrichtenblase im Projektfenster und duplizieren sie dann von hier aus. Aber vorher können wir diesen Precomp aus dem Screens-Ordner ziehen diesen Precomp aus dem Screens-Ordner Es muss nicht hier sein. In Ordnung. Und jetzt duplizieren wir den Precomp. Jetzt können wir die letzten Nachrichtenebenen als Referenz kopieren und dann die neue Nachrichtenblase, Pre Comp, eingeben und sie hier einfügen Löschen wir zuerst die Animation, die wir auf ihnen haben, und platzieren sie dann neben unserem Nachrichtenblasendesign Und jetzt müssen wir das Design so anpassen , dass es wie in der Referenz aussieht. Zunächst können wir die Nachrichtenblase horizontal drehen. Dann verschieben wir es nach links. Lassen Sie uns nun auch das Avatar-Symbol auf die linke Seite verschieben. Aber vorher müssen wir die übergeordneten Ebenen entfernen, damit wir sie verschieben können , ohne den Rest der Ebenen zu verschieben Wir sind in Ordnung. Sobald das erledigt ist, passen wir die Farbe der Blase an. Wir können die Farbe von der Referenzschicht abtasten. Großartig. Jetzt können wir alle Referenzebenen löschen. Wir können die Zeit jetzt auf die linke Seite bringen. Lassen Sie uns abschließend alle Ebenen in die Mitte des Rahmens verschieben . Fantastisch. Jetzt können wir den Ankerpunkt der Nachrichtenblase zentrieren und dann den Text ändern, den wir hier haben. Lass uns schreiben. Ich habe keine Ideen. Passen wir nun den Pfad der Form so an, dass die Blase der Textlänge entspricht. Okay, lassen Sie uns die Ebenen ein letztes Mal in die Mitte verschieben. Großartig. Gehen wir jetzt zurück zum Screen Precomp und ersetzen die Nachrichtenblase, die wir hier haben , durch die neue , die wir Und da wir die Intro-Animation dieser Nachrichtenblase speichern möchten , können wir die Avatar-Symbolebene ersetzen , da sie die Positionsanimation enthält und die restlichen Ebenen ihr übergeordnet sind. Ziehen Sie nun die neue Nachrichtenblase Precomp darauf, während Sie die Alt - oder Wahltaste auf dem Mac Passen wir nun die Größe an. Und danach passen wir die Position an. Als Erstes öffnen wir die Positions-Keyframes auf dieser Ebene Jetzt müssen wir bei einem der Keyframes bleiben, dann alle Positions-Keyframes auswählen und erst dann die Position anpassen Ich finde, die Position sieht gut aus , aber wir können die Zeit ausschalten Wir werden vielleicht in Zukunft eine Intro-Animation dafür erstellen vielleicht in Zukunft eine Intro-Animation dafür Bleiben wir vorerst beim ursprünglichen Design. In Ordnung. Jetzt, wo das erledigt ist, haben wir das gesamte Setup für den Bereich Konversationsanimation vorbereitet , und jetzt sind wir bereit, ihn zu animieren Wie Sie vielleicht verstehen, muss unsere neue grüne Nachricht von unten in den Bereich gelangen, was bedeutet, dass alle Nachrichtenblasen hochgehen müssen Das wird unsere erste Angelegenheit sein, mit der wir uns befassen müssen. Lassen Sie uns also vorerst die letzte Nachrichtenblase in der Timeline nach vorne bringen . Bald werden wir den perfekten Zeitpunkt dafür finden. Konzentrieren wir uns zunächst darauf, alle Nachrichten nach oben zu verschieben, und das können wir mit einem Null-Objekt tun. Lassen Sie uns zunächst ein neues Null-Objekt in der Szene erstellen. Wir können den Namen in Null Bubbles ändern. Als Nächstes markieren wir es grün. Und jetzt platzieren wir es in einer für uns passenden Reihenfolge im Ebenenstapel. Damit meine ich, dass wir es über allen Ebenen platzieren sollten , denen es übergeordnet sein wird Wir müssen ihr nicht die letzte grüne Nachrichtenblase überordnen Aber wir müssen die letzte graue Nachrichtenblase der Null zuordnen. Lassen Sie uns daher den Precomp dieser Nachrichtenblase finden und die Null darüber platzieren Wir können die Farbe dieser Precomp auf C-Schaum ändern. Platzieren wir nun die Null irgendwo zwischen den Nachrichtenblasen und fangen wir dann an, ihr alle Nachrichtenblasen zuzuordnen Sobald fertig sind, bringen wir die Null so, dass sie bei Sekunde Acht beginnt , und animieren ihre Position so, dass sie nach oben geht Mir ist gerade aufgefallen, dass ich es verpasst habe, diese Nachrichtenblase zu erziehen Lassen Sie mich also meine Aktion rückgängig machen und sie auf Null setzen Ordnung? Verschieben Sie jetzt die Null nach oben, sodass wir im unteren Bereich genug Platz haben, um die neue Nachrichtenblase zu öffnen, die wir erstellt haben Lassen Sie uns diese neue Blase vorerst so einrichten, dass sie bei Sekunde Neun beginnt. Bald werden wir eine nette Intro-Animation dafür erstellen. In der Zwischenzeit können wir es grün markieren. Okay. Und jetzt, zu diesem Zeitpunkt, sollten wir den Zeitpunkt dieser Nachricht nicht sehen. Also lasst uns den Precomp aufrufen und ihn vorerst ausschalten. Zurück zur Animation. Wir müssen die Uhrzeit für die vorherige Nachricht sehen, und wir können ab Sekunde acht eine nette Einblendanimation dafür erstellen . Also lasst uns hier stehen und dann diesen Precomp eingeben. Lassen Sie uns nun eine Einblendanimation für die Zeitebene erstellen. Lassen Sie uns dafür sorgen, dass diese Animation 1 Sekunde lang dauert. Okay. Das sieht gut aus. Jetzt können wir zur Hauptanimation zurückkehren und eine Intro-Animation für die letzte Nachrichtenblase erstellen eine Intro-Animation für die letzte Nachrichtenblase Wir können diesen Precomp so einstellen, dass er ab Sekunde acht beginnt. Drücken wir nun Y, um zum Ankerpunkt-Tool zu wechseln und den Ankerpunkt dieser Precomp in die rechte untere Ecke zu verschieben Ankerpunkt dieser Precomp in die rechte untere Ecke zu Halte dabei die Strg- oder Befehlstaste auf dem Mac gedrückt , um es genau in der Nachdem das erledigt ist, fangen wir jetzt an, es zu animieren. Wir können zuerst eine maßstabsgetreue Animation erstellen. Und da wir wissen , dass der Precomp diesem Zeitpunkt so aussehen sollte, wie er jetzt aussieht, werden wir hier einen Keyframe erstellen Als Nächstes fügen wir ihm auch eine Rotationsanimation hinzu. Aus dem gleichen Grund werden wir auch hier einen Rotations-Keyframe erstellen . Gehen wir nun eine Sekunde zurück und verkleinern den Precomp, während ihn drehen. Auf diese Weise erhalten wir eine nette Animation, die sich beim Drehen öffnet. Lassen Sie uns nun einfach die Nullen-Keyframes lockern und dafür sorgen, dass sie sich am Anfang Sobald wir fertig sind, passen wir die Animation der Bubble-Vorkomposition Aber vorher wollen wir es etwas interessanter machen, indem es in der Mitte der Animation skalieren Auf diese Weise wird der Knalleffekt deutlicher. In Ordnung. Und jetzt wählen wir alle Keyframes aus und vereinfachen sie auf einfache Weise. Gehen wir dann zum Diagrammeditor und sorgen dafür, dass sich die Bewegung schnell bewegt indem wir den Geschwindigkeitseinfluss auf etwa 80% einstellen den Geschwindigkeitseinfluss auf etwa Ich finde, es sieht gut aus. Jetzt können wir zur Timeline zurückkehren. Bevor wir weitermachen, lassen Sie uns den letzten Bubble-Pre-Comp genau ab Sekunde neun starten . Fantastisch Nachdem das erledigt ist, haben wir eine nette Demo-Flow-Animation einer Chat-Konversation erstellt . An diesem Punkt können wir das Projekt speichern und mit dem nächsten Schritt fortfahren. An diesem Punkt können wir auch sicherstellen, dass alle unsere Ebenen und Vorkompositionen in der Timeline ausgeblendet sind, damit wir die Szene in der besten Qualität erhalten die Szene in der besten Qualität erhalten Großartig. Also werde ich das Projekt jetzt noch einmal speichern. Gehen wir zum Anfang der Timeline und sehen uns die gesamte Animation an, die wir bisher erstellt haben. Mir ist aufgefallen, dass wir im linken unteren Bereich der Avatar-Boxen unteren Bereich der Avatar-Boxen einige Ebenen haben, die dort nicht hingehören. Ich spreche von diesem. Vielleicht ist es eine Ebene, die wir in den vorherigen Schritten vergessen haben zu löschen. Lassen Sie uns diese Ebene im Ebenenstapel finden und versuchen zu verstehen, was sie ist. Ich verstehe jetzt, dass es sich um eine Textebene handelt, die zur letzten grauen Nachrichtenblase aus dem ursprünglichen Design gehörte . Wir haben diese Ebenen durch eine Vorversion ersetzt, die unsere benutzerdefinierten Ebenen enthält unsere benutzerdefinierten Ebenen Das bedeutet, dass wir diese Ebene hier nicht mehr benötigen. Das Gleiche gilt für diese Ebene. Es ist die Zeitebene aus dem ursprünglichen Design. Das brauchen wir auch nicht, da wir es bereits im Precomp enthalten haben Deshalb überprüfe ich die Animation immer nach jedem Schritt, den ich mache Und ich schlage vor, dass Sie dasselbe tun. Wenn wir es mit vielen Ebenen zu tun haben, ist es immer eine gute Idee , uns selbst zu überprüfen. Auch wenn wir uns zu 100% sicher sind, dass wir alles perfekt gemacht haben. Es ist besser für Sie, das relevante Problem zu finden , als das Problem, das der Kunde findet. Ordnung. Nachdem all das gesagt ist, lassen Sie uns diese Animation gemeinsam in der Master-Komposition überprüfen Wir werden später auf diesen Pre-Comp zurückkommen , um den letzten Schliff zu geben Vorerst ist es wichtig zu überprüfen, wie es zusammen mit dem Voiceover aussieht Wechseln Sie in das integrierte Nachrichtensystem, in dem alle Ihre Konversationen nach Kontakten geordnet sind Senden Sie eine kurze Erinnerung oder teilen Sie sofort ein Update. Und ja, das Teilen von Dateien erfolgt sofort. Und ja, das Teilen von Dateien erfolgt sofort. Und ja, teilen f. Und ja, teilen. Und ja. Ordnung. Also ich denke, wir sind gut damit, die Demo-Flow-Animation mit dem Voiceover Demo-Flow-Animation mit dem Voiceover Wir könnten es bei Bedarf etwas später anpassen. Aber vorerst möchte ich die Szene weiter animieren. Wir müssen ein Intro-Otro für die Szene erstellen. Und wir müssen auch einige Kamerabewegungen erstellen, damit sich die Zuschauer auf die relevanten Bereiche auf dem UI-Bildschirm konzentrieren relevanten Bereiche auf dem UI-Bildschirm Wir müssen auch den Text hinzufügen, der während der Demo-Flow-Animation präsentiert werden muss . Erst danach werden wir mit der Arbeit an der nächsten Demo-Flow-Animation beginnen der nächsten Demo-Flow-Animation , die wir hier im Videoboard sehen können Konzentrieren wir uns zunächst darauf, die Kamerabewegungen zu erstellen und die Textzeilen aus dem Drehbuch zur Szene hinzuzufügen Aber das Wichtigste zuerst: Vergessen wir nicht, das Precomp im Hauptfenster, das wir auf dem ersten UI-Bildschirm dieser Demo-Flow-Animation haben, wieder einzuschalten Precomp im Hauptfenster, das wir auf dem ersten UI-Bildschirm dieser Demo-Flow-Animation haben dem ersten UI-Bildschirm dieser Demo-Flow-Animation Und wenn das erledigt ist, können wir jetzt zur Hauptszene gehen und mit der Planung der Kamerabewegungen beginnen Lassen Sie uns zunächst diesen Precomp zusammenklappen, damit wir auch hier alle Kollapsebenen im Inneren in hoher Qualität sehen können alle Kollapsebenen hier alle Kollapsebenen im Inneren in hoher Qualität Und bevor wir diese Vorkomposition animieren um ein paar nette Kamerabewegungen zu erzielen, fügen wir zunächst den Text hinzu, der die Szene sein muss Dafür können wir auf die Videotafel gehen und uns das ansehen. Wie Sie sehen können, enthält diese lange Szene einen sehr langen Text In unserem Fall können wir den Text in einige Teile aufteilen, jeweils dem entsprechen, was in der Demo-Flow-Animation passiert. Nachdem das geklärt ist, gehen wir zum Skript und kopieren den ersten Teil des Textes, der in der Szene gezeigt werden muss . Gehen wir nun zurück zum Projekt und fügen den Text ein. Mir ist gerade aufgefallen, dass wir zuerst eine Textebene aus einer anderen Szene mit Text darin kopieren sollten . Auf diese Weise wird es einfacher sein, den neuen Text in die neue Szene einzufügen . Rufen wir Szene sechs auf und kopieren die Textebene von hier aus. Gehen wir nun zu Szene sieben und fügen diese Ebene hier ein. Und jetzt gehen wir noch einmal zum Skript und kopieren den Text. Großartig. Gehen wir jetzt zurück zum Projekt. Doppelklicken Sie auf die Textebene und fügen Sie den kopierten Text aus dem Skript ein. Ordnung. Und jetzt teilen wir diese Textebene zu dem Zeitpunkt auf , an dem wir zum zweiten Teil der Demo-Animation kommen zweiten Teil der , denn hier fügen wir den zweiten Teil des Haupttextes dieser Szene aus dem Drehbuch Gehen wir also zurück zum Drehbuch und kopieren den zweiten Teil des Haupttextes zurück zum Projekt. Lassen Sie uns nun den Text einfügen und diese Ebene erweitern. Großartig. Jetzt haben wir also den Text für den ersten Teil der Demo-Flow-Animation und für den zweiten Teil. Und jetzt gehen wir zu dem Zeitpunkt, an dem der dritte und letzte Teil der Demo-Animation stattfindet, also bei Sekunde acht, und teilen wir die Textebene an dieser Stelle auf. Gehen wir dann zum Drehbuch und kopieren den letzten Textteil, den wir in dieser Szene haben. Zurück zum Projekt. Lassen Sie uns den Text einfügen. Und ich werde den Punkt am Ende des Textes löschen. Ordnung, jetzt können wir diese Ebene ein wenig erweitern und das Projekt speichern bevor wir mit dem nächsten Schritt fortfahren. Unser nächster Schritt wird darin bestehen, die Intro-Animation für diese Szene und auch die Kamerabewegungen zu erstellen Lassen Sie uns zunächst den richtigen Maßstab und die richtige Position für die Vorkomposition des UI-Bildschirms am Anfang der Animation finden Sie können das sichere Aktionsraster verwenden, 22. Bauszene 8 – Demoanimation per Drag & Drop: Komm zurück. In dieser Lektion werden wir mit der Arbeit an der nächsten Szene beginnen. Aber vorher organisieren wir unser Projektpanel. Lassen Sie uns diese drei Pre-Comps in den Pre-Comp-Ordner legen in den Pre-Comp-Ordner Ordnung. Und jetzt lasst uns einen neuen Pre-Comp für die neue Szene erstellen Wir können es Szene acht nennen. Stellen Sie sicher, dass es Full HD und die restlichen Einstellungen korrekt sind. Schließen wir jetzt alle Pre-Comps, die wir hier haben. In Ordnung. Und jetzt gehen wir ins Videoboard und schauen, was wir tun müssen In dieser Szene werden wir eine Drag & Drop-Demo-Flow-Animation erstellen eine Drag & Drop-Demo-Flow-Animation Lassen Sie uns zunächst verstehen , wie lang die Szene dauern sollte. Sie sollte etwa bei Sekunde 53 beginnen und nach etwa 1 Minute und 1 Sekunde enden. Das heißt, wir haben etwa 8 Sekunden. Fantastisch. Lassen Sie uns in diesem Sinne den entsprechenden UI-Bildschirm finden, den wir in dieser Szene animieren werden Großartig. Also hier ist es. Gehen wir nun zur neuen Szenenkomposition und ziehen den Browser-UI-Bildschirm hinein Und jetzt möchte ich einen etwas anderen Ansatz wählen als den Animationsworkflow, den wir bisher gemacht haben Bisher haben wir zuerst die erste Animation für jeden Teil animiert , dann das Intro und das Outro erstellt, dann die Kamerabewegungen erstellt und dann die Animation angepasst Dieses Mal möchte ich, dass wir nicht nach diesem schrittweisen Ansatz arbeiten Dieses Mal möchte ich Sie mit einem Ansatz unterstützen, bei dem wir alle Schritte gemeinsam bearbeiten . Ich möchte, dass Sie beide Ansätze kennenlernen, damit Sie ein gutes Verständnis dafür bekommen , was für Sie am besten funktioniert. Und außerdem, damit du verstehst , dass es manchmal sogar besser ist, an allen Schritten gleichzeitig zu arbeiten. Okay. Nachdem das geklärt ist, fangen wir an, am Intro dieser Szene zu arbeiten, anstatt mit dem ersten Teil des Animationsflusses zu beginnen Gehen wir dafür zurück zur Master-Komposition und sehen uns das Outtro der letzten Szene an Wir haben eine nette Zoom-Out-Animation. Mein Ziel ist es, einen coolen Match-Cut-Übergang zu kreieren. Lassen Sie uns daher dieselbe Bewegung für das Intro der neuen Szene erstellen wie in der letzten Dann können wir die Bewegung zeitlich anpassen, um einen reibungslosen Match-Cut-Übergang zu erzielen Lassen Sie uns vor diesem Hintergrund zur neuen Szene zurückkehren und mit der Erstellung des Intros beginnen Zuerst können wir diesen Precomp zusammenbrechen. Als Nächstes vergrößern wir die Zeitleiste und verwenden die Positions- und Skalierungseigenschaften, um eine 1 Sekunde lange Verkleinerungsanimation zu erstellen eine 1 Sekunde lange Verkleinerungsanimation Da wir möchten, dass die Precomp so aussieht und dort platziert wird, wo sie sich gerade befindet, nach der Intro-Animation müssen wir nach der Intro-Animation einen Keyframe für die relevanten Eigenschaften an der 1-Sekunden-Marke erstellen für die relevanten Eigenschaften an der Dann müssen wir zum Anfang der Timeline gehen und den Maßstab und die Position anpassen, um eine schöne Verkleinerungsbewegung zu erhalten Öffnen wir das Safe-Action-Raster , um die Mitte des Frames zu sehen. Lassen Sie uns nun zu diesem Zeitpunkt eine gute Position für den Precomp finden diesem Zeitpunkt eine gute Position für den Precomp Ich möchte die Szene nicht entsprechend dem Popup-Panel positionieren , weil wir sie zu diesem Zeitpunkt nicht sehen Wir werden es später in der Animation sehen. Lassen Sie uns also den Precomp aufrufen und die Popup-Ebenen vorerst ausschalten In Ordnung, zurück zur Hauptszene. Passen wir den Precomp weiter an. Ich versuche, den Precomp so zu platzieren, dass die Dateilistenfelder perfekt im Frame zentriert sind perfekt im Frame zentriert In Ordnung? Ich denke, das ist in Ordnung Ich denke, das ist gut genug. Passen wir nun die Geschwindigkeit der Keyframes an, um eine schöne, schnelle Bewegung zu erhalten Das heißt, wir können die Griffe so bewegen, dass wir einen Einfluss von etwa 95% sehen Einfluss von etwa 95% Ich finde, die Bewegung sieht toll aus, aber vielleicht können wir die Position der Precomp am Anfang der Timeline anpassen der Precomp am Anfang der Timeline Es wird etwas interessanter sein, wenn die Zoom-Out-Animation mit dem Namen des UI-Bildschirms beginnt Ich werde an der ersten Position der Keyframes stehen und erst dann die Position des Precomp zu diesem Zeitpunkt anpassen . Platzieren wir es hier. Lass uns nachschauen, wie das jetzt aussieht. Ich denke, es sieht vorerst besser aus. Was wir jetzt getan haben, ist, dass wir einen Großteil unserer Zeit darauf konzentriert haben , die Intro-Animation anzupassen Aber ist es gut, das zu tun? Ich möchte Ihnen diese Art von Arbeitsablauf zeigen, damit Sie diese Frage selbst beantworten können. Später in der Lektion werden Sie in der Lage sein, sie zu beantworten. Denn während der Animation könnten wir diese Intro-Animation ändern, könnten wir diese Intro-Animation ändern Perfektionierung wir gerade so viel Zeit aufgewendet haben Vielleicht war es keine gute Wahl, diese Zeit an diesem Punkt des Prozesses zu verbringen war es keine gute Wahl, diese Zeit an diesem Punkt des Prozesses zu Dazu später mehr. Lassen Sie uns vorerst weiterarbeiten. In Ordnung. Lassen Sie uns nun vor der Erstellung den Bildschirm der Browser-Benutzeroberfläche aufrufen und damit beginnen ihn für die Demo-Flow-Animation vorzubereiten Zuerst können wir die Popup-Ebenen wieder einschalten und sie dann mit einer anderen Farbe kennzeichnen Als Nächstes können wir alle Ebenen, die wir hier haben, zusammenklappen , um sie mit der höchsten Auflösung zu erhalten. Sobald das erledigt ist, beginnen wir mit der Erstellung des ersten Animationsteils für die Demo-Flow-Animation. Wir können jetzt die Popup-Ebenen ausschalten und dann auch die Schattenebene mit einer anderen Farbe kennzeichnen . Und jetzt wollen wir versuchen zu verstehen, was unser erster Animationsteil sein sollte. In unserem Fall müssen wir eine Animation erstellen, in der wir der Dateiliste im Hauptbereich dieses UI-Bildschirms eine zusätzliche Datei hinzufügen Dateiliste im Hauptbereich dieses UI-Bildschirms eine zusätzliche . Und bevor das alles passiert, müssen wir eine Drag-and-Drop-Animation erstellen. Die Drag-and-Drop-Animation wird ausgeführt nachdem das Popup-Panel die Szene betreten hat. Das bedeutet, dass wir auch eine Art Klickanimation erstellen müssen , um das Intro des Popup-Panels auszulösen In unserem Fall können wir dies auslösen, indem wir eine Klick-Animation für die Anzeigenschaltfläche erstellen eine Klick-Animation für , die wir hier im Header-Bereich haben Großartig. Jetzt haben wir also eine Vorstellung von den verschiedenen Animationsteilen, die wir hier erstellen müssen. Vor diesem Hintergrund verstehe ich, dass ich jetzt als Erstes die Ebenen des Popup-Panels in einer Vorkomposition zusammenstellen kann Ebenen des Popup-Panels in einer Vorkomposition zusammenstellen Auf diese Weise wird es für mich viel einfacher sein, eine Intro-Animation dafür zu erstellen eine Intro-Animation dafür und sie mit den übrigen Darüber hinaus wird es viel bequemer sein, Mikroanimationen im Popup-UI-Panel zu erstellen Mikroanimationen im Popup-UI-Panel Verschieben Sie die neue Pre-Comp aus dem Ordner auf dem Bildschirm, bevor Sie weitermachen. Und jetzt können wir mit der Arbeit am ersten Animationsteil dieses Demo-Workflows beginnen , nämlich der Klickanimation auf die Schaltfläche Hinzufügen und dem Intro des Popup-Fensters Da wir wissen, dass die Intro-Animation der Szene mit dem zweiten Teil endet, bedeutet das, dass dieser Animationsteil mit dem zweiten beginnen muss . Und nicht davor Das heißt, wir können das Pop-up und die Schattenebene so verschieben , dass sie bei zweiten beginnen. Und von Sekunde eins bis Sekunde zwei erstellen wir eine Klickanimation auf die Anzeigenschaltfläche im Header-Bereich. Anstatt also zuerst die Klick-Animation zu erstellen, arbeiten wir weiter mit unserem neuen Ansatz den schrittweisen Workflow nicht beizubehalten. Anstatt uns zuerst auf die Klick-Animation zu konzentrieren, werden wir uns auf die Kamerabewegung konzentrieren. In unserem Fall passen wir, anstatt eine Kamera zu animieren, einfach die Position an und skalieren die Animation Lassen Sie uns vor diesem Hintergrund bei Sekunde zwei stehen und den UI-Bildschirm vor der Bildkomposition den UI-Bildschirm vor der Bildkomposition so positionieren, dass wir die Schaltfläche etwas besser sehen können Wir brauchen die Aufmerksamkeit der Zuschauer , damit sie sich auf diesen Bereich konzentrieren. Okay, jetzt, zu diesem Zeitpunkt, nach dem Zoom und der Animation, können wir die Klick-Animation für die Schaltfläche erstellen. Die Klickanimation dauert zehn Frames. Bleiben wir also hier und geben dann den Precomp ein, um das Timing des Popupfensters so zu verschieben , dass es von diesem Zeitpunkt an beginnt , also von den zweiten zwei und zehn Sobald das erledigt ist, gehen wir zurück zu Sekunde zwei und erstellen die Klick-Animation Wählen wir zunächst die Schaltflächenebene aus und platzieren sie über allen Ebenen des ersten Animationsteils. Anstatt diese Ebene zu animieren, können wir jetzt die Vorkomposition für die Schaltflächenanimation verwenden, die wir zuvor im Projekt verwendet haben Sobald wir diese Precomp gefunden haben, duplizieren wir sie und passen den Namen Halten Sie nun die Alt- oder Wahltaste auf dem Mac gedrückt und ziehen Sie sie auf die Schaltflächenebene in Timeline, um sie durch die Button-Precomp zu ersetzen Danach passen wir die Größe der Precomp an das Design des UI-Bildschirms an Als Nächstes geben wir die Schaltfläche Precomp ein und passen den Text an. Fantastisch. Jetzt müssen wir sicherstellen, dass wir uns am richtigen Zeitpunkt befinden , an dem die Klickanimation ausgeführt werden kann. Dann können wir die Schaltfläche Precomp aufrufen und die Keyframes auf diesen Zeitpunkt ziehen In Ordnung. Jetzt haben wir die Klick-Animation fertig und können zum Popup-Panel übergehen Wir benötigen das Pop-up , um die Szene direkt nach der Klick-Animation aufzurufen. Fangen wir mit den zweiten zwei und fünf Frames an. für die Intro-Animation die Eigenschaft scale verwenden, Lassen Sie uns für die Intro-Animation die Eigenschaft scale verwenden, um einen schönen Pop-Out-Effekt für diesen Precomp zu erzeugen einen schönen Pop-Out-Effekt für diesen Precomp Lassen Sie uns dafür sorgen, dass diese Animation 1 Sekunde lang dauert. Großartig. Sobald wir die Popup-Animation fertig haben, können wir jetzt eine Animation für die Schattenebene erstellen. Dazu können wir die verschwommene Schattenanimation verwenden , die wir in einer der vorherigen Szenen erstellt haben in einer der vorherigen Szenen erstellt Um herauszufinden, in welcher Szene es sich befand, verwende ich die Suchleiste des Projektfensters Der Schatten für Bildschirm acht ist nicht das, was wir brauchen, da es sich um die Ebene handelt, die wir jetzt in unserer Szene sehen. Was wir überprüfen müssen, ist der Schatten von Bildschirm vier. In Ordnung, klicken Sie darauf und wählen Sie in der Komposition „Enthüllen“. Auf diese Weise öffnet After Effects die Komposition mit dieser Ebene darin Hier haben wir diese Ebene bereits als Feind. Jetzt können wir von hier aus die Unschärfe- und Schattenebene auswählen von hier aus die Unschärfe- und Schattenebene und sie kopieren und in unsere neue Szene einfügen Fügen wir es über der Schattenebene ein, die wir gerade haben, und drücken wir dann die linke Klammer , um es hier auszurichten Wir können jetzt die alte Schattenebene löschen. Großartig. Stellen wir nun sicher, dass die neuen Ebenen, die wir hinzugefügt haben zum Design unseres UI-Bildschirms in dieser Szene passen. Wie Sie sehen können, wurden die beiden Ebenen an derselben Position platziert wie in der Szene, aus der sie kopiert wurden. Das heißt, wir müssen sie ein wenig anpassen. Also lass uns das schnell machen. Okay, lassen Sie uns nun diese beiden Ebenen lila markieren und ihre Keyframes öffnen , um zu überprüfen , ob die Animation Intro des Popup-Panels passt Mal sehen, wie das aussieht. Ich denke, wir können diesen Animationsteil etwas später beginnen. Ziehen wir diese drei Ebenen so, dass sie bei den zweiten und zehnten Frames beginnen. In Ordnung, das sieht vorerst gut aus. Bevor wir mit dem nächsten Schritt fortfahren, speichern wir das Projekt, um den bisherigen Fortschritt zu sichern Großartig. Anstatt direkt mit dem nächsten Animationsteil fortzufahren, bleiben wir bei unserem neuen Ansatz und nehmen uns etwas Zeit um diesen Animationsteil fertigzustellen und anzupassen Wir können damit beginnen, die Bewegung der Popup-Animation anzupassen die Bewegung der Popup-Animation Lassen Sie uns die Geschwindigkeit auf 85% einstellen und sehen, wie das aussieht. Ich denke, es ist okay. Gehen wir nun zurück zur Hauptszene und passen den Kamerawinkel zu dem Zeitpunkt an, an dem das Popup-Panel erscheint. Diese Änderung des Kamerawinkels sollte in Sekunde drei erfolgen. Bleiben wir also hier und passen die Positions- und Skalierungseigenschaften des Screen Precomp Lassen Sie uns zunächst die vorherigen Werte vor dem Zoom und der Animation kopieren die vorherigen Werte vor dem und hier einfügen. Jetzt sollte unsere nächste Kamerabewegung nach links erfolgen, da wir die Drag-and-Drop-Animation erstellen müssen. Das heißt, wir bewegen uns nach links und der Cursor bringt eine Datei von der rechten Seite und legt sie im Popup-Bereich ab. Vor diesem Hintergrund können wir die Szene interessanter aussehen lassen, indem wir das Popup-Fenster etwas stärker vergrößern , auch weil wir möchten, dass der Betrachter zu diesem Zeitpunkt darauf achtet Lassen Sie uns also mit den Skalierungs- und Positionswerten herumspielen den Skalierungs- und Positionswerten bis wir ein gutes Bild von der Szene bekommen Mein Ziel ist es, dass das Popup-Panel in der Mitte des Frames befindet. Ordnung. Ich finde, es sieht gut aus, und jetzt sollten wir weitermachen, um die nächste Kamerabewindung vorzubereiten. Zeit. Da wir eine Drag-and-Drop-Animation hinzufügen möchten, müssen wir den Precomp nach links verschieben, damit wir Platz haben , um die Datei zu nehmen und sie im Popup-Fenster abzulegen Lassen Sie uns entscheiden, dass die Fertigstellung dieser Animation 2 Sekunden dauern wird . Warum? 2 Sekunden? Weil in diesem Teil der Animation viel los sein wird und ich nicht möchte, dass es sich zu schnell anfühlt. In Ordnung? Also lasst uns bei Sekunde fünf stehen und den Precomp nach links bewegen Wir haben also freien Speicherplatz auf der rechten Seite. Auf diese Weise erzeugen wir die Illusion, dass sich die Kamera an der Stelle, an der sich die Datei befindet, nach rechts bewegt , bevor wir sie mit dem Cursor aufnehmen und sie per Drag & Drop in das Pop-a-Bedienfeld ziehen. Gehen wir nun eine Sekunde vorwärts und kopieren den Keyframe für die vorherige Position und fügen ihn hier da wir möchten, dass die Vorkomposition an ihre vorherige Position zurückkehrt Das bedeutet, dass wir die Datei zu diesem Zeitpunkt bereits in das Popup-Fenster gezogen das Popup-Fenster Um die Animation etwas interessanter zu gestalten, können wir im Popup-Panel eine Mikroanimation erstellen Mein Ziel ist es, eine Art Mikroanimation zu erstellen , die zeigt, das Popup-Panel auf die abgelegte Datei reagiert Bald wirst du sehen, was ich meine. Lassen Sie uns vorerst an diesem Punkt stehen und den Browser Precomp aufrufen Und ab genau diesem Zeitpunkt werden wir diese Mikroanimation im Popup-Precomp erstellen im Popup-Precomp Lassen Sie uns sie also zuerst eingeben. Hier können wir eine Pop-Out-Animation für das Ordnersymbol erstellen , das wir haben Wir können auch eine schöne rotierende Animation für den gepunkteten Strich erstellen eine schöne rotierende Animation , aber dazu später mehr Konzentrieren wir uns vorerst auf das Ordnersymbol. Lassen Sie uns zunächst einen Keyframe für die Skalierungseigenschaft zu diesem Zeitpunkt mit dem aktuellen Wert erstellen die Skalierungseigenschaft zu diesem Zeitpunkt mit dem aktuellen Wert Als Nächstes entscheiden wir, dass diese Pop-Out-Animation zehn Frames lang sein soll , und erstellen hier ein weiteres Keyframe mit demselben Wert Gehen wir nun zur Mitte dieser Animation und vergrößern die Ebene. Wir können es auf 200 setzen. Mal sehen, wie das aussieht. Ich denke, wir können es etwas weiter skalieren. Versuchen wir es mit 300. Großartig. Das ist besser. Passen wir nun die Geschwindigkeit der Keyframes auf 85% an, um eine etwas interessantere Bewegung zu erhalten Mal sehen, wie das jetzt aussieht. Meiner Meinung nach ist es superschnell. Lassen Sie uns also dafür sorgen, dass diese Animation genau 1 Sekunde dauert. Das heißt, wenn sie bei 3 Sekunden und 20 Bildern beginnt, muss sie bei 4 Sekunden und 20 Bildern enden. Sehen wir uns noch einmal eine Vorschau an. Jetzt denke ich, es sieht zu langsam aus. Lassen Sie uns diese Animation also bis zu 4 Sekunden und zehn Frames dauern lassen und sie noch einmal überprüfen. Fantastisch. Ich denke, diesmal haben wir es richtig gemacht. Damit die Pop-Out-Animation etwas interessanter aussieht, stehen wir am Anfang dieser Animation und platzieren den Ankerpunkt im unteren mittleren Bereich der Ebene Dadurch wird das Ordnersymbol dynamischer angezeigt. Meiner Meinung nach. Außerdem kollidiert das Ordnersymbol jetzt nicht mehr mit dem Text darunter Nachdem das erledigt ist, fahren wir mit der nächsten Mikroanimation fort, die wir hier erstellen können Lassen Sie uns diesmal den gepunkteten Strich rotieren lassen. Der einfachste Weg, dies zu tun, besteht darin, das Rechteck von Grund auf neu zu erstellen Wählen wir also das Rechteckwerkzeug aus, stellen Sie sicher, dass keine Ebene ausgewählt ist, und erstellen Sie ein neues Rechteck mit ungefähr der gleichen Größe wie das ursprüngliche Rechteck im Design Wechseln wir für die Farbe zu einer normalen Füllfarbe und setzen wir sie vorerst auf Grau. Erstellen Sie nun das Rechteck und passen Sie seine Größe an. Verwenden wir dafür die Größeneigenschaft. Zuerst deaktiviere ich die Option „ Eingeschränkte Proportionen und passe dann die Werte separat an Wir können die Form auch manuell verschieben , bis sie zum ursprünglichen Design passt Fantastisch. Passen wir nun die abgerundeten Ecken der Form an, damit sie dem ursprünglichen Design näher kommt. Großartig. Nachdem das erledigt ist, wollen wir uns nun mit dem Strich befassen , der auf dieser Ebene sein muss. Für die Farbe können wir das Violett verwenden, das wir im Strich oder im Ordnersymbol sehen . Für die Strichstärke können wir sie auf zwei setzen. Als Nächstes müssen wir sicherstellen, dass dieser Strich wie das ursprüngliche Design aussieht. Das heißt, wir müssen ihn als gepunkteter Strich erscheinen. Öffnen Sie dazu das Strichmenü in der Ebene und fügen Sie Striche hinzu Um den Strich zu drehen, verwenden wir die Offset-Eigenschaft Aber vorher passen wir den Strichwert an das Design an. Wir können ihn auf fünf setzen. Lassen Sie uns nun prüfen, ob es dem ursprünglichen Design ähnlich sieht. Ja, ich finde es sieht toll aus. Lassen wir diese Ebene vorerst ausgeschaltet, damit wir die graue Farbe aus dem ursprünglichen Design ausprobieren können die graue Farbe aus dem , um die Füllung unserer neuen Form einzufärben. Ordnung. Das Design sieht gut aus und jetzt sind wir bereit, es zu animieren. Wie ich bereits sagte, verwenden wir dafür die Offset-Eigenschaft Anstatt jedoch manuell Keyframes für die Rotation zu erstellen, verwenden wir einen einfachen Zeitausdruck, damit sie sich ohne Keyframes endlos dreht Halten Sie dazu auf dem Mac die Alt - oder Wahltaste gedrückt und klicken Sie auf die Stoppuhr der Offset-Eigenschaft Geben Sie nun in das Ausdrucksfeld T asterisk -100 ein. Wenn das erledigt ist, dreht sich der Strich nun endlos nach rechts, ohne dass wir Keyframes Falls es sich zu schnell anfühlt, können Sie den Wert innerhalb des Ausdrucks verringern Lassen Sie uns den Wert auf -50 setzen und sehen, wie das aussieht. Fantastisch. Ich finde, es sieht sehr gut aus. Wenn das erledigt ist, können wir jetzt die ursprüngliche Rechteckebene ausschalten. Und danach können wir diese Ebene in der Timeline versenden, da wir sie nicht mehr benötigen. Zum Schluss platzieren wir unsere neue Formebene über der letzten Ebene. Ordnung. Und jetzt, sobald wir die Mikroanimation im Popup-Panel fertiggestellt haben, können wir diese Animation noch interessanter aussehen lassen , indem eine zusätzliche Mikroanimation für das Popup-Panel draußen in der Szene com Lass mich dir zeigen, was ich meine. Lassen Sie uns zunächst an dem Zeitpunkt stehen, an dem diese Animation beginnt. Gehen wir nun zurück zur Browser-Voreinstellung. Sobald wir hier sind, können wir ab diesem Zeitpunkt eine zusätzliche maßstabsgetreue Animation für den Popup-Precomp erstellen eine zusätzliche maßstabsgetreue Animation für den Popup-Precomp ab diesem Zeitpunkt Erstellen Sie also hier den ersten Keyframe. Jetzt müssen wir diese Animation mit der Animation synchronisieren , die im Popup-Precomp passiert Wenn Sie sich nicht sicher sind, wo sie endet, können Sie den Precomp aufrufen und an dem Punkt stehen , an dem die Animation dort Kehren Sie dann zur Browser-Precomp zurück, erstellen Sie zu diesem Zeitpunkt weitere Keyframes und stellen Sie sich dann in die Mitte der Animation, um die Popup-Precomp zu verkleinern Wir können die Geschwindigkeit jetzt auf 85 einstellen, um sie an die Bewegung im Popup-Precomp anzupassen Und damit haben wir eine ziemlich coole Reaktionsanimation für das Popup-UI-Panel erstellt eine ziemlich coole Reaktionsanimation für das Popup-UI-Panel Das wird viel cooler aussehen, wenn wir die Drag-and-Drop-Animation hinzufügen. Aber konzentrieren wir uns vorerst darauf, den nächsten Animationsteil zu starten. Wenn wir die Hauptdateiliste mit der neuen Datei anzeigen müssen , die per Drag & Drop gezogen wurde, müssen wir dafür eine Outtro-Animation für die Popup-Precomp erstellen , die direkt nach der Skalierungsanimation stattfindet Bleiben wir bei den zweiten sieben und zwanzig Frames und setzen die Skalierung zu diesem Zeitpunkt auf Null Wir können dann zum Grafikeditor gehen und die Bewegung so anpassen, dass sie langsam beginnt und gegen Ende schneller wird. Danach erstellen wir auch eine Outtro-Animation für die Unschärfe im Schatten, die wir hier haben Wir müssen diese Animation mit der Outtro-Animation des Pop-Up-Precoms synchronisieren der Outtro-Animation des Pop-Up-Precoms Um das schnell zu machen, können wir zu diesem Zeitpunkt stehen, die ersten Keyframes beider Ebenen kopieren und sie hier einfügen Klicken Sie dann mit der rechten Maustaste, gehen Sie zum Keyframe-Assistenten und wählen Sie „Keyframes umkehren“ Sehen wir uns diese Animation ein paar Mal in der Vorschau an, um zu sehen, wie sie sich anfühlt Fantastisch. Ich finde, es sieht sehr gut aus. Jetzt können wir mit der Animation des nächsten Teils beginnen, in dem wir der Liste eine weitere Datei hinzufügen, um unsere Demo-Flow-Animation für diese Szene fertigzustellen unsere Demo-Flow-Animation für diese Szene Da ich schon wusste, dass ich diese Art von Animation erstellen wollte Bei der Erstellung des Storyboards in Illustrator , habe ich bei der Vorbereitung dieses Benutzeroberflächenbildschirms für die Animation darauf geachtet ein Dateibox-Design in der Liste in Ebenen unterteilt Auf diese Weise können wir diese Ebenen jetzt in der Timeline finden, sie alle auswählen und duplizieren Weil ich wusste, dass die hier im Drag-and-Drop-Teil hinzugefügte Datei hier im Drag-and-Drop-Teil hinzugefügte eine neue JPEG- oder PNG-Datei sein würde. Ich habe dafür gesorgt, dass auch die Designebenen für diese PNG-Datei getrennt sind. Wählen wir also alle Ebenen aus, die sich auf dieses Dateifeld beziehen, und drücken Sie Strg plus D, um sie zu duplizieren. Jetzt verschieben wir sie nach oben, sodass sie in einem Stapel liegen. fertig sind, lassen Sie uns all diese Ebenen zusammensetzen und diesen Pre-Comp-Screen 8 Panel Two nennen Pre-Comp-Screen 8 Panel Two Großartig. Jetzt verwenden wir diese Precomp als neues Dateifeld, das nach der Drag-and-Drop-Animation in der Dateiliste angezeigt wird nach der Drag-and-Drop-Animation in der Dateiliste Aber zuerst müssen wir das Design in diesem Precomp anpassen Lassen Sie uns die Region von Interesse verwenden, um die Größe dieser Komposition zu reduzieren, da sie momentan zu groß ist Sobald das erledigt ist, wählen wir nun alle darin enthaltenen Elemente aus und ordnen sie der White-Box-Ebene zu Auf diese Weise können wir die White-Box-Ebene auswählen, sie an der Mitte der Komposition ausrichten und sicherstellen, dass alles perfekt zentriert ist. Okay. Und jetzt erstellen wir eine neue Textebene mit einem anderen Dateinamen. Um einen schönen und kontinuierlichen Fluss von der vorherigen Szene zu erhalten, können wir diese Datei als Referenzpunkt JPEG bezeichnen. Das funktioniert, weil es in der vorherigen Szene der Konversation darum ging, eine Referenz für die besprochene Aufgabe zu senden . Nachdem wir die Textgröße und -position angepasst haben, können wir die ursprüngliche Textebene ausschalten. Wir lassen den Rest der Informationen unverändert und fahren fort. Gehen wir nun zurück zum Browser, zur Benutzeroberfläche, einem Bildschirm, reduzieren unsere neue Pre-Comp und suchen uns einen geeigneten Platz dafür in der Liste Lassen Sie uns die Ansicht vergrößern und sicherstellen, dass der Abstand zwischen den Dateifeldern mit dem Rest der Liste übereinstimmt Nachdem das erledigt ist, beginnen wir mit der Erstellung der Abwärtsanimation für alle Dateifelder in der Liste. Aber bevor wir das tun, wollen wir uns mit der PNG-Dateibox befassen der PNG-Dateibox in der sich alle Elemente auf separaten Ebenen befinden. Stellen wir sicher, dass Sie alle zugehörigen Objekte für diese Datei auswählen alle zugehörigen Objekte für diese Datei und sie dem weißen Hauptfeld dieses Dateidesigns überordnen. Großartig. Lassen Sie uns nun all diese Ebenen orange markieren, damit wir wissen, dass sie zu einem Abschnitt gehören. Dann können wir alle Ebenen auswählen, die zu dieser Datei gehören, Ausnahme der White-Box-Ebene, und sie in die Timeline verschieben. Auf diese Weise ist es viel einfacher, die Abwärtsanimation für die Dateifelder in der Liste zu erstellen . Und um Interferenzen zu vermeiden, sperren wir die Unschärfe - und Schattenebenen Nun. Also gut, jetzt fangen wir an alle Ebenen der Dateibox auszuwählen. bei dieser Datei darauf, dass Sie nicht eines der Elemente auswählen , die sich auf einer separaten Ebene befinden. Wählen Sie stattdessen das weiße Feld dieser Datei aus. Nachdem alle fünf Ebenen ausgewählt sind, wollen wir nun den richtigen Zeitpunkt finden um diese Animation zu starten. In unserem Fall kann es direkt beginnen, nachdem der Popup-Trichter seine Intro-Animation beendet hat , also bei den zweiten sieben und zwanzig also, während wir hier stehen Lassen Sie uns also, während wir hier stehen, die ersten Keyframes für die Position erstellen Gehen wir nun 1 Sekunde vorwärts. Die Timeline und alle ausgewählten Ebenen nach unten bringen. Wir müssen sicherstellen, dass unsere neue Pre-Comp genau dort platziert wird, wo sich die erste Dateibox befindet Bevor wir also die Ebenen nach unten ziehen, drücken wir die Strg- oder Befehlstaste R, um die Lineale zu öffnen , und erstellen dann eine Hilfslinie , damit wir wissen, wie weit wir die Ebenen nach unten ziehen müssen Wir können jetzt die Lineale ausschalten und anfangen, die Ebenen nach unten zu ziehen Großartig. Und jetzt lassen Sie uns die Keyframes einfach vereinfachen und die Bewegung im Diagrammeditor anpassen Lassen Sie uns dafür sorgen, dass die Bewegung schnell beginnt und gegen Ende langsamer Lass uns sehen, wie das aussieht. Ordnung. Ich denke, es sieht vorerst okay aus. Wir benötigen den Leitfaden, den wir erstellt haben, nicht mehr, also entfernen wir ihn aus dem Rahmen. In Ordnung. Und jetzt wollen wir uns mit dem oberen Bereich im Listenbereich befassen , weil wir die neue Dateibox in diesem Bereich verstecken müssen . Dazu können wir den weißen Farbverlauf finden, den wir in der vorherigen Szene erstellt haben , und ihn dann von dort kopieren und in unsere neue Szene einfügen . Öffnen wir also Szene sieben und geben dann die Nachrichten PreComp Suchen wir nun die weiße Formebene mit Farbverlauf wir hier erstellt haben, und kopieren Zurück zur neuen Szene, bevor wir die Ebene einfügen Lassen Sie uns zunächst mit der Reihenfolge der Dateiliste befassen , die wir hier haben. Damit meine ich, dass ich die neue Datei vor der Kompilierung, die wir erstellt haben, an der richtigen Stelle im Ebenenstapel platzieren möchte neue Datei vor der Kompilierung, die wir erstellt haben, an der richtigen Stelle im Ebenenstapel platzieren Vielleicht müssen wir es hier platzieren. Nein. Gemäß der Reihenfolge der Ebenen ist dies also der Bereich der untersten Dateibox im Design. Das bedeutet, dass wir die Vorkomposition so verschieben müssen , dass sie sich vor der Dateiebene befindet, die die erste Datei in der Liste im Design In unserem Fall müssen wir es hier platzieren. Auf diese Weise haben wir, wie Sie sehen können, bei der Auswahl der einzelnen Ebenen bei der Auswahl der einzelnen Ebenen eine chronologische Reihenfolge Ich mache das, weil es für mich etwas einfacher sein wird zu wissen, wo die weiße Verlaufsebene platziert werden soll In unserem Fall sollte der weiße Farbverlauf über allen Ebenen der Dateibox liegen, da wir die oberste Dateibox ausblenden mussten. Also wähle ich diese Ebene , um den weißen Farbverlauf darüber einzufügen. Bringen wir diese Ebene nun an den Anfang der Timeline und passen dann ihr Design an unseren Listenabschnitt an. Zuerst bringe ich sie die Mitte des Listenabschnitts und passe dann die Breite dieser Form an. Bleiben wir ein bisschen in der Vorschau und passen die Position etwas weiter an. In Ordnung. Jetzt versteckt der weiße Farbverlauf die oberste Dateibox, aber er versteckt auch eine andere Ebene , die nicht ausgeblendet werden muss. Lass mich dir zeigen, was ich meine. Wenn wir jetzt den Weißverlauf ausschalten und dann auch das erste Dateifeld in der Liste ausschalten, werden wir sehen, dass es hier einen Abschnitt mit etwas Text gibt. Dieser kleine Abschnitt muss gesehen werden. Daher müssen wir diese Ebene im Ebenenfenster finden und sie dann über die Formebene mit weißem Farbverlauf verschieben . Großartig. Und jetzt können wir alle Ebenen wieder einschalten. Und wie Sie sehen können, haben wir jetzt nur den richtigen Bereich versteckt. Wenn das erledigt ist, können wir jetzt in der Timeline vor und zurück gehen und sehen, wie dieser Abschnitt aussieht. Ich finde, es sieht toll aus. Jetzt müssen wir dasselbe für den unteren Teil dieses Abschnitts tun. Unser Ziel ist es nun, das untere Dateifeld auszublenden , da es, wie Sie sehen, mit den Designelementen der Seitenzahlen kollidiert Also können wir zuerst die Formebene mit weißem Farbverlauf duplizieren die Formebene mit weißem Farbverlauf und sie dann an die richtige Stelle ziehen Dann können wir mit der rechten Maustaste auf die Ebene klicken und sie vertikal drehen. Sehen wir uns nun an , wie das während der Animation aussieht , und versuchen, die Position bei Bedarf anzupassen. In meinem Fall muss ich die Ebene etwas weiter absenken . Fantastisch. Jetzt sieht alles in Ordnung aus und wir sind bereit, mit dem nächsten Schritt fortzufahren. Im nächsten Schritt möchte ich, dass die Bewegung der Dateiboxen nach unten zu einer leichten Verzögerung der Animation führt. Ich möchte, dass sich das erste Dateifeld in der Liste zuerst bewegt, und dann werden die restlichen Dateiboxen entsprechend verschoben. Das bedeutet, dass wir jetzt alle Keyframes, die wir für die Positionseigenschaft für diese Ebenen erstellt haben, verzögern müssen alle Keyframes, die wir für die Positionseigenschaft für diese Ebenen erstellt haben Positionseigenschaft für diese Ebenen in diesem Fall eine angenehme Verzögerung zu erzielen, erstellen wir einen Offset von zwei Frames zwischen den Keyframes Um die Verzögerung zu erzeugen, verwende ich die neue Offset-Funktion von After Effects Und da ich möchte, dass das erste Dateifeld in der Liste zuerst verschoben wird, fange ich an, die Keyframes aus der untersten Ebene auszuwählen , da dies die erste Ebene im Abschnitt ist . In Ordnung. Jetzt halte ich auf dem Mac die Alt-Taste und die Strg- oder Wahltaste gedrückt auf dem Mac die Alt-Taste und die Strg- oder und ziehe dann die Keyframes nach rechts, bis ich sehe, dass die zweite Ebene die Position der Zeitanzeige erreicht Mal sehen, wie das aussieht. Fantastisch. Ich finde es sieht toll aus. Und jetzt speichern wir das Projekt, bevor wir weitermachen. Ordnung. Gehen wir jetzt zurück zum Master Comp und sehen, was wir als Nächstes tun müssen Nach dem Teil in der Demo-Flow-Animation , in dem wir eine neue Datei per Drag-and-Drop ziehen und dann sehen, dass diese Datei zur Liste hinzugefügt wird, sollten wir nun ein wenig herauszoomen, um den gesamten UI-Bildschirm mit der aktualisierten Dateiliste zu sehen , und diese Verkleinerungsanimation sollte bei Sekunde sieben beginnen Von Sekunde sechs bis Sekunde sieben wollen wir keine Änderungen an den Kamerabewegungen haben, wollen wir keine Änderungen da dies der Moment sein wird, in dem die Dragon-Drop-Dateianimation stattfindet. Jetzt, in Sekunde sieben, müssen wir Keyframes mit den aktuellen Werten erstellen , positionieren und skalieren Erst dann gehen wir zu Sekunde acht über und erstellen die Zoom-Out-Animation Dazu können wir die zweiten Keyframes auf dem Bildschirm kopieren die zweiten Keyframes auf dem Bildschirm und sie bei Sekunde acht einfügen Auf diese Weise wird der UI-Bildschirm jetzt vollständig im Frame angezeigt Da wir nun neue Keyframes erstellt und andere Keyframes kopiert und eingefügt haben, müssen wir sicherstellen, dass die Bewegung während der gesamten Animation immer noch konsistent ist gesamten Animation immer noch konsistent Und wie Sie sehen können, gibt es Bereiche, in denen die Bewegung nicht konsistent ist Die Geschwindigkeit aller Keyframes muss bei etwa 85% liegen Aber wie Sie sehen können, ist dies in einigen Teilen nicht der Fall. Ich zeige Ihnen das, weil ich möchte, dass Sie sehen, dass das Anpassen der Geschwindigkeit der Keyframes vor Abschluss der ersten Animation so ist , als würde man zweimal arbeiten Während der Animation der Szene haben wir Keyframes erstellt und sie dann jedes Mal sofort angepasst Hier beenden wir die Animation und müssen die Keyframes noch anpassen Daher schlage ich vor, zunächst die ersten Keyframes für die gesamte Szene fertig Keyframes für die gesamte Szene sie als reguläre lineare Keyframes zu belassen Erst wenn Sie die gesamte Animation abgeschlossen haben, sollten Sie mit der Anpassung beginnen Dies ist einer der Nachteile , wenn man mit dem Ansatz arbeitet jeden Teil zu animieren, ohne einer chronologischen Reihenfolge zu folgen Sie also bei der Arbeit an Ihrem nächsten Projekt die richtige Wahl des Workflows und der Vorgehensweise, der Sie folgen werden Ordnung. Nachdem das geklärt ist, kehren wir zum Projekt zurück und beginnen erneut, die Kamerabewegungen anzupassen, diesmal jedoch für alle Keyframes gleichzeitig, da wir möchten, dass die Bewegung während der gesamten Animation konsistent Und dafür verwenden wir das Velocity-Bedienfeld der Keyframes. Da wir mit dem Velocity-Bedienfeld für Keyframes nicht verschiedene Eigenschaften gleichzeitig anpassen können , müssen wir zunächst alle Positions-Keyframes auswählen und Stellen wir die Geschwindigkeit auf 85% ein. Dann machen wir dasselbe für die Skalierungs-Keyframes. Sobald das erledigt ist, sollten wir nicht vergessen die ersten Keyframes dieser Animation anzupassen, da dies die Intro-Animation dieser Szene ist Und weil wir einen schönen Match-Cut aus der vorherigen Szene haben wollen , sollten wir die Keyframe-Geschwindigkeit an diesem Teil auf etwa 95% anpassen , weil wir wollen, dass die Bewegung hier superschnell ist, damit der Match-Cut-Übergang perfekt funktioniert Gehen wir jetzt zur Masterkomposition und bringen die neue Szene hier in die Timeline und arbeiten am Übergang von der vorherigen Aber vorher ist mir aufgefallen, dass wir die Dauer der vorherigen Szene nicht gekürzt Wir haben es einfach aus der Master-Komposition herausgeschnitten. das geklärt haben, gehen wir zu Szene 7 und kürzen den Workflow auf Sekunde 11 , also 1 Sekunde nach der Outtro-Animation Ich bevorzuge es, 1 Sekunde freien Speicherplatz zu haben, falls ich einige kleine Timing-Anpassungen in den Szenen vornehmen muss ich einige kleine Timing-Anpassungen . In Ordnung. Lassen Sie uns jetzt Szene acht auf die Timeline bringen und sicherstellen, dass der Match-Cut-Übergang funktioniert. Dazu müssen wir Szene acht vom Anfang bis zum schnellsten Zeitpunkt der Intro-Bewegung zuschneiden vom Anfang bis zum schnellsten Zeitpunkt der Intro-Bewegung Lassen Sie uns Szene acht direkt nach Szene 7 starten und sehen, wie der Übergang aussieht Nachdem ich mir die Animation ein paar Mal angesehen habe, habe ich nicht das Gefühl, dass der Matchcut gut aussieht Der Hauptgrund dafür ist die Position unserer Elemente in den beiden Szenen In unserem Fall sind es die UI-Bildschirme in Szene 7 und der UI-Bildschirm in Szene acht. Mal sehen, was wir tun können, damit dieser Match-Cut-Übergang ein bisschen besser aussieht. Versuchen wir zunächst, die anfängliche Skalierung und Position des UI-Bildschirms in Szene acht zu ändern . Versuchen wir, es etwas zu verkleinern und stärker in der Mitte zu platzieren, sodass sich die Bewegung eher wie eine reine Verkleinerungsanimation anfühlt sodass sich die Bewegung eher wie eine reine Verkleinerungsanimation anfühlt als wie die Vergrößerungsbewegung, die wir gerade haben. Sie nach dem Anpassen der Position sicher, dass die Geschwindigkeit nicht geändert wird. Ordnung? Lass uns jetzt zum Master Comp zurückkehren und sehen, wie das aussieht Okay, ich denke, es sieht ein bisschen besser aus. Gehen wir noch einmal zu Szene 81 zurück und versuchen, den Pre-Comp am Anfang etwas weiter herunterzuskalieren 23. Erstellen des endgültigen Titels und der Szene Outro: Komm zurück. In dieser Lektion werden wir mit der Arbeit an den letzten Szenen für dieses Projekt beginnen . Wir beginnen mit der Erstellung der Titelanimationsszene. Um es schneller zu machen, können wir die ähnliche Titelanimation verwenden , die wir zu Beginn des Videos erstellt haben . Wir werden es duplizieren und die Animation darin anpassen. Und bevor wir das alles machen, lassen Sie uns eine Outtro-Animation für die vorherige Szene erstellen Gehen wir zu Szene acht und gehen wir nun zu Sekunde neun über. Diesmal können wir dafür sorgen, dass der UI-Bildschirm den Frame von der linken Seite verlässt . Weil die Textanimation , die danach in die Szene eintritt , eine Bewegung von links nach rechts hat. Bald wirst du verstehen, was ich meine. In der Zwischenzeit. Stellen Sie sicher , dass die Geschwindigkeit der letzten beiden Keyframes auf etwa 95% eingestellt der letzten beiden Keyframes auf etwa 95% Und danach schneiden wir Timeline 1 Sekunde nach der Tro-Animation zu Großartig. Und jetzt lasst uns in der Mitte der Tro-Animation stehen und in der Master-Komposition die Komposition auf diesen Zeitpunkt zuschneiden Fantastisch. Sobald wir mit der Szene fertig sind, fangen wir an, die Titelanimation für die nächste Szene zu erstellen . Suchen wir dazu die erste Titelanimation vor der Erstellung, die wir erstellt haben Hier ist sie. Es ist die erste Szene, die wir kreiert haben. Da wir nun dieselbe Animation für unsere neue Vorkomposition haben möchten , duplizieren wir zunächst diese Vorkomposition aus dem Ebenenbedienfeld und bringen sie an den richtigen Zeitpunkt Mal sehen, wie das aussieht. Okay. Warum also weiter kämpfen? Kämpfen. Warum also weiter kämpfen? Geh zu einem Punkt. Großartig. Und jetzt müssen wir einige Änderungen an der Titelanimation vornehmen, damit sie zum Drehbuch und zum Voiceover passen Daher werden wir die Änderungen in dieser Vorabversion nicht vornehmen die Änderungen in dieser Vorabversion Wir müssen diese Vorkomposition jetzt im Projektfenster finden , damit wir sie von dort aus duplizieren können Wir wollen es aus dem Projektfenster duplizieren , weil wir eine völlig neue Vorkomposition haben wollen , in wir Änderungen vornehmen können, ohne die erste zu beeinflussen fertig sind, halten wir nun die Alter-Option gedrückt und ziehen die neue Vorkomposition auf die ursprüngliche Vorlage in der Timeline, um zwischen ihnen zu wechseln Auf diese Weise haben wir alle Keyframes gespeichert , die wir auf der ursprünglichen Precomp erstellt haben, aber jetzt haben wir eine komplett neue Dass wir Änderungen im Inneren vornehmen können, ohne das Original zu beeinträchtigen. In Ordnung. Nachdem das geklärt ist, beginnen wir damit, den Text hier zu ändern. Öffnen wir dazu das Skript und kopieren den entsprechenden Text. zum Projekt zurück, fügen Sie den Text ein, und wenn das erledigt ist, löschen wir das Wort „ Probleme“, da dieses Wort anders animiert werden sollte. Wir werden es wie das Wort Multiple animieren. Und das werden wir in einer Sekunde tun. Lassen Sie uns vorerst das Ausrufezeichen, das wir hier haben, in ein Fragezeichen ändern Ausrufezeichen, das wir hier haben, in ein Fragezeichen Fantastisch. Und jetzt löschen wir die nicht relevanten Textebenen. wir abschließend sicher, dass die Maske, die wir auf dieser Textebene haben , zum aktuellen Text passt. Dazu entfernen wir zuerst die aktuelle Maske und erstellen dann eine neue. Auf diese Weise passt es automatisch an den aktuellen Text an. Großartig. Und jetzt können wir als Nächstes die Position des Wortes anpassen, das in mehrere Ebenen aufgeteilt ist. Das können wir ganz einfach tun, indem wir das Null-Objekt verschieben , da ihm alle Buchstaben übergeordnet sind Lass es uns vorerst irgendwo hier platzieren. Okay. Und jetzt passen wir die Buchstaben an, damit wir das passende Wort für diese Szene finden können . In diesem Fall muss es kämpfen. Und da wir wissen, dass das Wort kämpfen mehr Buchstaben als mehrere hat, ist es eine gute Idee, die Buchstabenebenen vorerst von der Null zu die Buchstabenebenen vorerst von der Null trennen, da wir in einer Sekunde weitere Buchstabenebenen hinzufügen werden , die wir in der Animation anpassen werden Ordnung. Passen wir nun die Buchstaben an, doppelklicken Sie auf jeden Buchstaben und ändern ihn entsprechend. In Ordnung. Und jetzt duplizieren Sie die letzte Ebene und verschieben Sie sie einen Frame nach vorne, um die Offset-Animation beizubehalten. Dann ändere es in den entsprechenden Buchstaben. Lassen Sie uns nun diese Ebene duplizieren und den gleichen Vorgang wiederholen. Ändern Sie diesmal den Buchstaben in G. Fantastisch. Und jetzt, da wir mehr Buchstaben in diesem Wort haben, sollten wir die Positionsanimation für alle anpassen. Um dies ohne Probleme zu tun, bringen wir zunächst alle Ebenen , dass sie vom exakt gleichen Zeitpunkt aus beginnen. Später werden wir sie noch einmal ausgleichen. Lassen Sie uns zunächst dafür sorgen, dass alle Keyframes am selben Zeitpunkt beginnen. Für mich wird es viel einfacher sein, ihre Positionsanimation anzupassen Ordnung. Und jetzt passen wir die Keyframes an der letzten Position für die neuen Buchstaben an Dazu müssen wir zuerst am letzten Keyframe stehen und erst dann die Position anpassen Wenn Sie nicht in der Lage sind, direkt auf dem Keyframe zu stehen, wie in meinem Fall, machen Sie sich keine Sorgen Es ist nur ein kleiner Softwarefehler, der auftritt, nachdem Keyframes oft neu positioniert in diesem Fall einfach Stellen Sie sich in diesem Fall einfach so nah wie möglich an den Keyframe und verschieben Sie die Wie Sie sehen können, wurde ein neuer, aktualisierter Keyframe erstellt, jedoch nicht mit den übrigen Keyframes übereinstimmt der jedoch nicht mit den übrigen Keyframes übereinstimmt. Mach dir darüber keine Sorgen Stellen Sie nur sicher, dass Sie zu diesem Zeitpunkt nicht über zwei Positions-Keyframes für die Position Lassen Sie uns zunächst eine neue Anleitung erstellen und darauf konzentrieren, die neuen Buchstaben am Rest des Textes auszurichten Buchstaben am Rest des Textes auszurichten Sie sich keine Sorgen, wenn der Keyframe nicht an den anderen Keyframes ausgerichtet ist Dann verschieben wir den neuen Buchstaben nach rechts, um die Position der restlichen Buchstaben neu anzuordnen Im Grunde passen wir jetzt die Keyframes an der letzten Position für die Sobald wir fertig sind, platzieren wir das Nullobjekt in der Mitte dieses Wortes Großartig. Jetzt können wir den ersten Text näher bringen. Und jetzt stellen wir uns in die Mitte der Buchstabenanimation und passen auch ihre Position zu diesem Zeitpunkt an. Ordnung. Sobald wir das getan haben, lassen Sie uns die Animation durchgehen und prüfen, ob alles in Ordnung ist, wie Sie sehen können. Während der Neupositionierung der Keyframes, die ich zuletzt erstellt habe, überflüssige Keyframes, falls Ihnen das auch passiert ist, dann stellen wir sicher, dass wir die alten Keyframes löschen und die neuen behalten. Großartig. Wenn wir damit fertig sind, stellen wir sicher, dass keine Ebenen ausgewählt sind, und drücken Sie, um sie alle zu schließen. Lassen Sie uns nun die eine Frame-Verzögerung erzeugen wir zuvor für diesen Animationsteil hatten. Fantastisch. Jetzt können wir an dem Punkt stehen, an dem sich alle Buchstaben an ihrer endgültigen Position befinden , und sie dann alle auswählen und sie der Null zuordnen. Und jetzt haben wir auch die sekundäre Bounce-Bewegung , die wir für die Null erstellt haben Wir können den Leitfaden jetzt loswerden. Und jetzt wollen wir uns mit der Fragezeichen-Animation befassen. Zunächst können wir diese Animation in der Timeline etwas verzögern . Da die Buchstabenanimation jetzt etwas länger dauert, können wir die Fragezeichen-Animation ab Sekunde zwei starten. Okay, das Timing sieht gut aus, aber jetzt müssen wir es verschieben, damit es neben dem Text platziert wird. Dafür können wir ein neues Null-Objekt erstellen, nur um es als bewegliches Objekt für die beiden Ebenen zu verwenden , die wir hier haben. Ich mache das, anstatt jede Ebene einzeln zu verschieben. Ordnung? Ich denke, wir können es irgendwo hier platzieren Großartig. Wir haben alles an seinem Platz. Und bevor wir weitermachen, passen wir die Größe dieser Komposition mit dem Tool Region of Interest an Sie können die Kompositionseinstellungen öffnen und die Abmessungen auf abgerundete Zahlen festlegen Wir müssen es nicht machen, aber ich bevorzuge es so. Am wichtigsten ist es, sicherzustellen, dass die Ebenen zur Mitte der Komposition ausgerichtet sind. Wie Sie in meinem Fall sehen können, habe ich alles ausgerichtet. Falls Sie das nicht haben, können Sie die Null-Objektmethode verwenden , um alle Ebenen der Null überzuordnen und sie zu verschieben, um die Position für alle Ebenen gleichzeitig anzupassen . In Ordnung. Und jetzt, bevor wir weitermachen, nehmen wir eine letzte Anpassung vor. Ich sehe, dass die Animation hier in zehn Bildern mit dem zweiten beginnt. Lassen Sie uns alle Ebenen außer dem ersten Text auswählen und diese Animation mit der zweiten beginnen lassen. Fantastisch. Ich bin mir sicher, dass wir hier alles erledigt haben. Wir könnten den ersten Text ein wenig nach rechts verschieben und das war's. Gehen wir jetzt zurück zur Master-Komposition und schauen, was wir haben Achten wir auf das Voiceover Unser Ziel ist es, sicherzustellen, dass es perfekt mit der Textanimation synchronisiert Warum also weiter kämpfen? Gehen Sie zu onepoint.com und erleichtern Sie sich den Arbeitsalltag. Warum also weiter kämpfen? Gehen Sie zu onepoint.com und machen Sie sich an Ihre Arbeit. Warum weiter kämpfen? Geh zu einem Punkt. Kämpfe weiter. Geh zu einem Punkt. Ordnung. Nachdem ich es mir ein paar Mal angesehen habe, sehe ich, dass wir das Timing anpassen müssen Aber bevor ich das mache, werde ich den letzten Positions-Keyframe löschen , den ich hier habe. Diese kleine Bewegung ist für diesen Text irrelevant. Es war relevanter für die vorherige Textanimation. Gehen wir nun zehn Frames rückwärts und beginnen die Szene von diesem Zeitpunkt an. Fantastisch. Das bedeutet jetzt, dass wir das Timing der Tro-Animation für die vorherige Szene anpassen müssen . also, während wir zu diesem Zeitpunkt stehen, Lassen Sie uns also, während wir zu diesem Zeitpunkt stehen, Szene acht aufrufen und sicherstellen, dass die Animation zu diesem Zeitpunkt bereits endet. Um das zu tun, müssen wir vor der Installation den Bildschirm der Benutzeroberfläche aufrufen. zunächst sicher, dass die Outtro-Animation an der Position der Zeitanzeige endet Also wähle ich alle Keyframes der Dateiebenen aus und stelle sicher , dass das letzte Keyframe hier endet Das heißt, wir müssen jetzt auch das Timing des vorherigen Animationsteils neu Es muss zu diesem Zeitpunkt enden. Lassen Sie uns also hier stehen und dann alle Schlüsselbilder des vorherigen Animationsteils so verschieben alle Schlüsselbilder des vorherigen Animationsteils , dass sie hier enden. Fantastisch. Wenn das erledigt ist, dürfen wir nicht die Mikroanimation vergessen , die im Pop-Up-Precomp passiert Es muss von diesem Zeitpunkt an beginnen. Geben wir also den Precomp und verschieben die Keyframes hierher. Okay? Da wir nun das Timing des letzten Teils dieser Demo-Flow-Animation geändert haben, bedeutet das, dass wir auch das Timing der Kamerabewegungen in der Hauptszene anpassen müssen . Wir müssen die Drag-and-Drop-Animation mit der Outtro-Animation des Popup-Panels in diesem Precomp synchronisieren der Outtro-Animation des Popup-Panels in diesem Precomp Das bedeutet, dass die Drag-and-Drop-Animation zu dem Zeitpunkt enden sollte , an dem das Popup-Panel die Outtro-Animation startet Also lasst uns hier stehen und dann zur Hauptszene gehen. Und jetzt stellen Sie sicher, dass wir alle Keyframes sehen , die wir hier haben. Wählen Sie nun alle Schlüsselbilder des letzten Teils aus und bringen Sie sie hierher, sodass sich der UI-Bildschirm bereits in der Mitte des Frames befindet. Wie Sie sehen können, haben wir auf diese Weise alles perfekt synchronisiert, und so passen Sie das Timing Ihrer Demo-Flow-Animationen neu das Timing Ihrer Demo-Flow-Animationen Daran ist nichts Ausgefallenes oder Kompliziertes. Alles, was wir brauchen, ist ein wenig Konzentration und Verständnis dafür , wo jeder unserer Animationsteile beginnt und endet. In Ordnung? Bevor ich zur Master-Komposition zurückkehre und mir die Animation noch einmal ansehe, möchte ich die endgültige Position der Dateiebene anpassen Ich möchte nicht, dass es die Objekte dahinter versteckt. Ich möchte die lila Ordneranimation sehen. Fantastisch. Nun, nachdem wir das Timing in dieser Pre-Comp angepasst haben, wollen wir uns in der Mitte der Outtro-Animation befinden wollen wir uns in der Mitte der Outtro-Animation Und während wir hier stehen, gehen wir zurück zur Master-Komposition und schneiden Szene acht vor der Komposition bis zu diesem Zeitpunkt zu. Lassen Sie uns die Ansicht vergrößern und sicherstellen, schneiden Szene acht vor der Komposition bis zu diesem Zeitpunkt zu. Lassen Sie uns die Ansicht vergrößern und sicherstellen, dass zwischen Szene acht und neun kein leerer Bereich entsteht Okay. Und jetzt wollen wir sehen, wie das aussieht. Ein Weg. Warum also weiter kämpfen? Hallo. Warum also weiter kämpfen? Bei näherer Betrachtung denke ich, dass wir hier keinen Match-Cut-Übergang schaffen müssen. Lassen Sie uns die Szene vor der Kompilation erweitern, um einen einfachen Übergang nach links zu erhalten einen einfachen Übergang nach links zu Ich denke, in diesem Fall sieht es besser aus. Wir können Szene acht aufrufen und sehen wo die Otro-Animation genau endet, und dann die Vorkomposition in der Master-Komposition auf diesen Zeitpunkt zuschneiden in der Master-Komposition auf diesen Zeitpunkt Das Bild mit dem Übergang nach links sieht viel besser aus. Wir können Szene neun etwas früher beginnen. Verschieben wir es zehn Frames zurück und schauen uns diesen Teil ein paar Mal an, um zu sehen, wie sich das anfühlt Warum also weiter kämpfen? Kämpfen. Gehe zu OnePoint.com Warum also weiter kämpfen? Gehen Sie zu onepoint.com. Warum also weiter kämpfen? Gehen Sie zu onepoint.com und machen Sie Ihr Okay. Ich finde es sieht toll aus. Und jetzt möchte ich sicherstellen, dass das Wort Kampf in der Mitte des Rahmens platziert wird. Dafür können wir zunächst das Safe Action Grid öffnen . Und jetzt stehen wir an der letzten Position des Keyframes dieser Pre-Comp und passen Das Wort wird also in der Mitte positioniert. Fantastisch. Jetzt haben wir also, dass der Buchstabe G zu diesem Zeitpunkt fast die Decke des Rahmens berührt . Geben wir den Precomp ein und passen die Animation dieses Buchstabens Wählen wir zunächst diese Ebene und drücken sie, um alle Keyframes zu sehen Und jetzt versuchen wir, in der Mitte dieser Animation zu stehen und die Position dieser Ebene anzupassen Machen Sie sich keine Sorgen, wenn Sie nicht genau auf den Keyframes stehen können. Passen Sie einfach die Position an und dann entfernen wir den irrelevanten Keyframe auch keine Sorgen, wenn Sie den neuen Keyframe nicht exakt an den übrigen Keyframes ausrichten exakt an den übrigen Keyframes ausrichten Dies wird in der Animation nicht auffallen. Fantastisch. Gehen wir jetzt zurück zum Master Comp, und wie Sie sehen können, sieht alles völlig in Ordnung Wenn das erledigt ist, können wir das Projekt jetzt speichern , um die Änderungen zu sichern, die wir bisher vorgenommen haben Großartig. Fahren wir jetzt mit der nächsten Szene fort. Um zu sehen, was wir als Nächstes tun müssen, können wir zur Videotafel gehen. Okay, jetzt müssen wir die letzte Szene für dieses Projekt erstellen . Dies ist die Szene mit dem Aufruf zum Handeln, die in solchen Erklärvideos sehr häufig vorkommt Normalerweise müssen wir in dieser Szene das Logo und einige Call-to-Action-Animationen präsentieren , z. B. schauen Sie sich unsere Website an oder klicken Sie auf den Link unten Natürlich muss es mit dem Voiceover synchronisiert werden. In unserem Fall besteht unser Aufruf zum Handeln darin, die Website zu werben und den Zuschauer aufzufordern , sie zu Nachdem das geklärt ist, kehren wir zur Master-Komposition zurück und beginnen mit der Vorbereitung der Szene Aber zuerst bringen wir diese Illustrator-Ebene in den Ordner Assets Okay. Und jetzt drücken wir Catrol oder Command N, um eine neue Komposition zu erstellen. Wir können es Szene zehn nennen Stellen wir sicher, dass die Dauer 2 Minuten beträgt, bevor wir auf Okay klicken. Natürlich werden wir die Dauer später anpassen. Fantastisch. Lassen Sie uns jetzt mit der Gestaltung der Szene beginnen. Wir können damit beginnen, das Logo in die Szene zu bringen. Dazu können wir nach dem Logo suchen, das wir vorab im Projekt haben, und es dann auf die Timeline bringen Sobald wir fertig sind, stellen wir nun sicher, dass das Logo zur Szene passt, und es ein wenig verkleinern Wie Sie vielleicht verstehen, benötigen wir etwas Platz für die Call-to-Action-Schaltfläche , die sich unter dem Logo befinden muss. Fantastisch. Und jetzt können wir mit der Erstellung der Call-to-Action-Schaltfläche beginnen. Dafür können wir eine unserer Button-Pre-Comps verwenden , die wir während des Projekts erstellt haben Lassen Sie uns die letzte Schaltfläche vor der Erstellung duplizieren und dann den Namen anpassen CTA steht für Call to Action. Großartig. Bringen wir es jetzt in die Szene und passen das Design und den Text darin an. Lassen Sie uns zunächst den Text in den Namen der Website ändern . Sobald wir fertig sind, geben wir die Kompositionseinstellungen ein und passen die Breite an die Schaltflächengröße an. Okay. Und jetzt positionieren wir die beiden Vorkompositionen so, dass wir eine schöne und ausgewogene Komposition haben eine schöne und ausgewogene Wir können den Button senken und auch das Logo senken. Großartig. Wenn das erledigt ist, können wir anfangen, die Szene zu animieren Und die Hauptanimation , die hier stattfinden muss, ist das Intro der Kugel, das ist unser Cursor im Projekt, wenn wir auf die Schaltfläche klicken Suchen wir dazu im Projektfenster nach dem Cursor-Precomp und ziehen diesen Precomp dann in die ziehen diesen Precomp Und jetzt zur Animation: Wir können das Intro des Cursors vom oberen Bereich der Szene aus starten Cursors vom oberen Bereich der Szene aus Platzieren wir es vertikal in der Mitte. Okay, das ist gut genug. Und jetzt lasst uns diesen Pre-Comp gelb markieren und anfangen, ihn zu animieren Wir werden dafür die Eigenschaft Position verwenden. Lassen Sie uns also den ersten Keyframe am Anfang der Timeline erstellen am Anfang der Timeline Gehen wir nun 1 Sekunde vorwärts und bringen den Pre-Comp hier auf die rechte Seite der Szene Gehen wir als Nächstes 1 Sekunde vorwärts und bringen den Precomp irgendwo in den Bereich der Schaltfläche Wir können es vertikal zur Komposition ausrichten und dann vergrößern und es etwas tiefer platzieren Fantastisch. Und jetzt erstellen wir die Klick-Animation für den Cursor, die auch die Outtro-Animation des Cursors sein wird Dazu verwenden wir die Eigenschaft scale. Erstellen Sie hier also einen Keyframe. Dann verschieben wir 20 Frames und setzen die Skala auf Null. Großartig. Sobald wir mit der Erstellung der ersten Bewegung fertig sind, können wir damit beginnen, sie anzupassen. Beginnen wir zunächst mit Anpassung des Pfads mithilfe des Vertex-Werkzeugs Wir wollen dafür eine schöne und abgerundete Bewegung haben. Großartig. Nachdem wir den Pfad angepasst haben, wollen wir uns jetzt mit der Bewegung befassen. Lassen Sie uns zunächst die Position der Keyframes vereinfachen. Und dann legen wir im Grafikeditor die Geschwindigkeit des Intros auf 95% fest, weil wir einen Match-Cut aus der vorherigen Szene erstellen wollen einen Match-Cut aus der vorherigen Szene erstellen Und jetzt, zu diesem Zeitpunkt, lassen wir diese Kugel langsamer werden, indem den Griff nach rechts bewegen Ich möchte nicht, dass es an diesem Punkt vollständig stoppt, also stelle ich sicher, dass aus diesem Keyframe ein kontinuierliches Keyframe wird und dass die Geschwindigkeit an diesem Teil nicht Null ist. Mal sehen, wie das aussieht Großartig. Sieht nett aus. Beschäftigen wir uns nun mit den Skalierungs-Keyframes. Um die Aufmerksamkeit des Betrachters auf diesen Bereich zu lenken, können wir uns in die Mitte der Skalierungsanimation stellen und den Cursor etwas vergrößern sodass er wächst, bevor er verschwindet Wie Sie sehen können, lenkt das zu diesem Zeitpunkt mehr Aufmerksamkeit auf den Cursor. Okay. Und jetzt lassen Sie uns die Keyframes einfach vereinfachen. Und dieses Mal verwenden Sie den Diagrammeditor, damit der Cursor schnell wächst, in der Mitte langsamer wird und gegen Ende an Geschwindigkeit gewinnt. Fantastisch. Ich finde, es sieht toll aus, und wir können jetzt zur Timeline zurückkehren und uns die Animation ansehen, die wir bisher erstellt haben , um zu sehen, wie sie sich anfühlt. Ordnung. Ich finde, die Animation sieht sehr gut Aber meiner Meinung nach muss die Logoanimation hier nicht stattfinden. Ich möchte, dass das Logo in der Szene statisch ist. Ich möchte diese Gelegenheit nutzen, um Ihnen zu zeigen, wie Sie Ihre animierten Precomps einfrieren können. Es ist sehr einfach Zuerst müssen wir an dem Punkt bleiben, an dem das Logo die Animation bereits beendet hat, dann mit der rechten Maustaste auf den Precomp klicken, zu T gehen und Freeze Frame wählen Großartig. Jetzt merke ich , dass das Logo nicht genau in der Mitte des Rahmens erscheint, also verschieben wir es ein wenig nach links. Das ist besser. Toll. Und jetzt wollen wir uns mit dem Timing der Klickanimation innerhalb der Schaltfläche Precomp befassen der Klickanimation innerhalb der Schaltfläche Precomp Im Moment passiert es zu früh. Lassen Sie uns dazu an dem Punkt stehen, an dem der Cursor die Klick-Animation macht, geben Sie dann den Button Precomp ein und verschieben Sie die Keyframes hierher. Schauen wir uns an, wie Ich denke, es kann fünf Frames früher beginnen, also passen wir das Timing ganz schnell an. Großartig. Und jetzt fühlt es sich viel besser an. Deshalb schlage ich immer vor, die Animation ein paar Mal zu überprüfen , um zu sehen, wie sich die Bewegung anfühlt. Okay, jetzt sehe ich, dass die gesamte Animation großartig aussieht und sich gut anfühlt. Wir können den Cursor vor der Komposition zusammenklappen und mit dem nächsten Schritt fortfahren, dem Hinzufügen der Szene zur Master-Komposition Zunächst können wir bei Sekunde fünf stehen und diese Zeitleiste auf diesen Zeitpunkt kürzen Sobald wir fertig sind, gehen wir zur Master-Komposition und bringen die letzte Szene auf die Timeline Großartig. Und jetzt fangen wir an, an der Umstellung zu arbeiten. Zuerst können wir die letzte Szene aufrufen und sehen wo sich die Mitte der Intro-Animation befindet Hier ist sie. Lassen Sie uns zu diesem Zeitpunkt stehen und dann in der Master-Comp diese Pre-Comp auf die Position der Zeitanzeige zuschneiden diese Pre-Comp auf die Position der Zeitanzeige Lassen Sie uns nun diese Pre-Comp direkt nach der vorherigen Pre Comp starten lassen und dann das Ende der vorherigen Pre-Comp anpassen Da wir einen schönen Match-Cut erstellen möchten, können wir die Szene an dem Punkt beenden, an dem der Cursor gerade dabei ist, die Szene zu verlassen Lassen Sie uns jetzt die letzte Szene hierher bringen und sehen, wie das aussieht. Wir können vom Anfang der letzten Szene an ein paar Frames zuschneiden , um eine etwas kontinuierlichere Bewegung zu erhalten. Okay, das sieht nett aus. Und jetzt fügen wir der letzten Szene einen sanften Zoom bei der Animation damit sie sich nicht zu statisch anfühlt. Wir können hier den ersten Keyframe erstellen. Lassen Sie uns zu einem Zeitpunkt stehen, kurz nachdem die Animation in diesem Precomp Das sollte etwas nach diesem Zeitpunkt sein. Ich denke, wir sollten die Dauer des Finalwettbewerbs etwas verlängern Also lass uns das ganz schnell machen. Lass uns dafür sorgen, dass es 7 Sekunden dauert. Lassen Sie uns nun alle Ebenen hier erweitern und danach zur Master-Komposition zurückkehren und die Vorkomposition erweitern Großartig. Jetzt können wir also bei 1 Minute und 8 Sekunden stehen und den Pre-Comp ein wenig skalieren Versuchen wir es mit 110. Lassen Sie uns jetzt sehen, was wir haben. Sieht nett aus, aber mir gefällt nicht wie der Cursor das Logo in der letzten Szene berührt. Geben wir es also ein und passen den Pfad der Cursorposition an. Ordnung. Ich denke, es ist okay. Gehen wir jetzt zurück zur Master-Komposition und sehen wir uns an , wie das mit dem Zoom und der Animation aussieht Sieht toll aus. Und jetzt stehen wir am Ende der Animation und drücken rein, um den Workflow-Bereich hier zu beenden. Jetzt sehen wir uns das gesamte Projekt von Anfang an mit dem Voiceover hinweg zu verwalten nicht einfach, ein großes Team über mehrere Projekte Zu viele Aufgaben, zu viele Nachrichten und bevor Sie es wissen, ertrinken Sie im Chaos, wenn Sie nach Hilfe suchen. Du hast einen Punkt getroffen Die Plattform, die Projektmanagement so einfach macht, es sogar Ihre Katze kann. Mit One Point erhalten Sie einen kristallklaren Überblick über alles, einen kristallklaren Überblick über woran Ihr Team arbeitet, all Ihre Projekte, all Ihre Aufgaben, alles an einem Ort. Benötigen Sie das vollständige Bild. Jedes Projekt beinhaltet detaillierte Aufgaben, Unteraufgaben und eine Fortschrittsverfolgung in Echtzeit, sodass nichts übersehen wird. sehen möchten, wer ins Hintertreffen gerät, gehen Sie zu Ihrem Team-Tab, um die Aktivitäten aller Beteiligten auf einen Blick zu sehen Sie müssen mit jemandem Kontakt aufnehmen. Wechseln Sie in das integrierte Messaging-System, in dem alle Ihre Konversationen nach Kontakten organisiert sind. Senden Sie eine kurze Erinnerung oder teilen Sie sofort ein Update. Und ja, das Teilen von Dateien ist mühelos. Laden Sie ein beliebiges Dokument hoch, und Ihr gesamtes Team hat sofort Zugriff darauf Warum also weiter kämpfen? Gehen Sie zu onepoint.com und erleichtern Sie sich Ihren Arbeitstag ab heute Verwaltung eines großen Teams in ganz Mul. In Ordnung, das sieht sehr gut aus. Und am wichtigsten ist, dass die Animation mit dem Voiceover synchronisiert wird Sobald wir die beiden wichtigsten Dinge richtig gemacht haben , wir mit dem nächsten Schritt fortfahren, dem Hinzufügen der Cursoranimation in Es wird super viel Spaß machen, also sehen wir uns in der nächsten. 24. Hinzufügen der Cursoranimation: Komm zurück. In dieser Lektion beginnen wir damit, die Cursoranimation zur entsprechenden Szene hinzuzufügen . Beachten Sie, dass wir mit dem Hinzufügen der Cursoranimation erst beginnen , nachdem wir die gesamte Animation fertiggestellt und mit dem Voiceover synchronisiert Und das liegt daran, dass wir jetzt sicher sind, dass das Timing der Klickanimation im Projekt perfekt mit dem Voiceover synchronisiert ist Wir möchten die Cursoranimation nicht während der ersten Animation einbeziehen , da dies die Timing-Anpassungen während des Prozesses erschweren Wie Sie sich vielleicht erinnern, haben wir einige Keyframes für die Demoflow-Animation viele Male angepasst . Stellen Sie sich vor, wir müssten auch die Cursoranimation anpassen Das würde den Prozess viel langsamer machen. Daher ziehe ich es vor, mir die Cursoranimation während der ersten Animation des gesamten Projekts vorzustellen die Cursoranimation während , und erst wenn ich fertig bin und sicher bin, dass das Timing stimmt, werde ich die Cursoranimation hinzufügen. Ordnung. Nachdem das geklärt ist, fangen wir an, an der ersten Cursor-Animation zu arbeiten, die, wie Sie vielleicht schon wissen, in Szene vier passieren muss. Im zweiten Animationsteil, in dem wir zum ersten Mal den UI-Bildschirm des Projekts sehen. Geben wir also diesen Precomp ein und fügen dann den Cursor-Precomp, den wir im Projekt haben , zu dieser Timeline Lassen Sie uns diese Vorkomposition gelb markieren und mit der Erstellung der Cursoranimation beginnen So können wir unseren Cursor in der Szene etwas besser sehen. Wir können ihm einen weißen Strich hinzufügen, nur für den Moment. Später werden wir den Cursor so gestalten, wie wir wollen. Im Moment müssen wir uns darauf konzentrieren, zuerst die Animation zu erstellen. Also gebe ich die Formebene ein und wähle sie aus. Fügen wir nun eine Strichfarbe hinzu und wählen Schwarz. Für die Breite können Sie sie bei zwei belassen, und jetzt können wir den Cursor deutlich sehen. Großartig. Gehen wir jetzt zurück zur Master-Komposition und fangen wir an, sie zu animieren Aus meiner Erfahrung habe ich herausgefunden, dass der beste Weg, dies zu tun, darin besteht, eine sehr einfache Methode zu verwenden. Lass mich dir zeigen, was ich meine. Ordnung. Also zuerst konzentriere ich mich nicht darauf, das Intro oder das Outtro für den Cursor zu erstellen das Intro oder das Outtro für den Cursor Das Erste, worauf ich mich konzentriere, ist das Timing. Das Timing für die Klickanimationen haben wir im Demo-Flow, zum Beispiel haben wir zu diesem Zeitpunkt die Klickanimation für die Projektbox. Wir können diesen Pre-Comp eingeben und den genauen Zeitpunkt herausfinden , an dem es passiert In diesem Fall passiert es zu diesem Zeitpunkt. Also, jetzt können wir hier stehen und dann zurück zum Master Comp gehen Dann müssen wir den Cursor an der logischen Position platzieren und zu diesem Zeitpunkt einen Keyframe für die Positionseigenschaft erstellen diesem Zeitpunkt einen Keyframe für die Positionseigenschaft Achten Sie danach auf nichts anderes in der Szene als darauf der Szene als wo die Animation mit dem zweiten Klick stattfindet Wie Sie sehen können, passiert es in unserem Fall zu diesem Zeitpunkt. Ich werde also den Cursor in den Bereich bringen, in dem die Klickanimation stattfindet. Lassen Sie uns nun die Zeitleiste vergrößern und die Position des Cursors weiter an die Klickanimationen anpassen , die wir hier haben. Der nächste findet hier statt. Bringen wir also den Cursor hierher. Großartig. Lassen Sie uns nun weitermachen und sehen wo die nächste Klick-Animation stattfindet, und dann den Cursor dorthin bringen. Fantastisch. Jetzt sehe ich, dass es in dieser Szene keine Klickanimationen mehr gibt, also kann ich anfangen, die Atro-Animation für den Cursor zu erstellen . Und dafür können wir 1 Sekunde nach dem letzten Keyframe weitermachen und den Cursor nach Belieben aus dem Bild herausziehen Diesmal ziehen wir es auf die linke Seite. Großartig. Im Moment sieht die Animation für Sie wahrscheinlich sehr seltsam aus, aber glauben Sie mir, bald wird alles klar werden. Versuchen Sie vorerst, sich auf meinen Arbeitsablauf zu konzentrieren. Also haben wir zuerst die Keyframes für die Anfangsposition entsprechend der Klickanimation erstellt Keyframes für die Anfangsposition entsprechend der Klickanimation Jetzt können wir damit beginnen, den Positionspfad so anzupassen, dass sich der Cursor runder und natürlicher bewegt Wählen wir dazu das Vertex-Werkzeug aus und befassen uns zunächst mit diesem Punkt Klicken Sie einmal hier und jetzt biegen wir den Pfad ab. Wechseln Sie jetzt zum Auswahlwerkzeug. Und jetzt ziehen wir diesen Griff ein wenig nach oben. Wir können dabei Alt oder die Wahltaste gedrückt halten, um sicherzustellen, dass wir nur einen Griff bewegen ohne den zweiten zu beeinflussen. Ordnung. Machen wir jetzt dasselbe für den zweiten Griff Okay, jetzt sind wir fast fertig mit der Anpassung des Pfads. Und bevor wir das tun, erstellen wir die Intro-Animation für den Cursor Dazu können Sie sich von den Keyframes an der ersten Position 1 Sekunde rückwärts bewegen und den Cursor nach rechts ziehen , damit er von rechts in die Szene eindringt . Großartig. Jetzt können wir die Anpassung des Kurvenpunkts auf diesem Pfad abschließen. Lassen Sie uns auch diesen Punkt krümmen, damit der Cursor in einer etwas kurvigeren Bewegung in die Szene eindringt An diesem Punkt zoome ich normalerweise gerne heran und überprüfe die Animation des Cursors, um zu sehen, ob sie mit der Klickanimation in der Szene synchronisiert der Klickanimation in der Mir ist aufgefallen, dass der Cursor zu diesem Zeitpunkt nicht hier platziert werden sollte zu diesem Zeitpunkt nicht hier platziert werden , da er an dieser Stelle auf dem Aufgabenfeld abprallen muss Das heißt, wir müssen den Cursor irgendwo um ihn herum platzieren bevor wir diesen Punkt erreichen , um die Illusion einer Berührungsbewegung Gehen wir also vom ersten berührenden Keyframe aus eine Sekunde zurück und bewegen den Cursor irgendwo in der Nähe Sobald das erledigt ist, gehen wir zurück zum Vertex-Werkzeug und krümmen den neuen Punkt ebenfalls Passen wir den Griff an , damit er etwas kurviger wird. Bewegung. Fantastisch. Und jetzt zu diesem Punkt: Wir können die Bewegung flüssiger machen, Wir können die Bewegung flüssiger machen indem wir den Griff des ersten Punktes anpassen, ihn nach unten absenken und ihn etwas weiter nach links ziehen Großartig. Wie Sie sehen können, haben wir jetzt eine schöne abgerundete und kurvige Bewegung für die Cursoranimation für die Cursoranimation Wir können auch den letzten Punkt krümmen und den Griff anpassen um eine etwas abgerundetere Bewegung für die Outtro-Animation zu erhalten für die Outtro-Animation Ordnung. Nachdem wir mit der Erstellung der ersten Animation fertig sind, erstellen wir eine Klickbewegung für den Cursor, damit wir sie mit der Klickanimation synchronisieren können, die wir für die Panels erstellt haben. Nachdem wir mit der Erstellung der ersten Animation fertig sind, erstellen wir eine Klickbewegung für den Cursor, damit wir sie mit der Klickanimation synchronisieren können , die wir für die Panels erstellt haben Natürlich könnten wir zu jedem Zeitpunkt eine maßstabsgetreue Animation erstellen . Wo wir ein UI-Panel haben, klicken Sie auf Animation, aber das würde viel Zeit in Anspruch nehmen. Und falls wir das Timing der Klickanimation anpassen müssten , würde es ewig dauern die Cursorklick-Animation anzupassen. Deshalb möchte ich Ihnen einen sehr coolen Trick beibringen, um Ihre Cursorklicks mit den Panel-Klicks zu synchronisieren, sodass Sie die beiden nicht manuell timen müssen. Als ich dieses Projekt erstellte, wusste ich, dass es eine Möglichkeit gibt, Animationen innerhalb einer Vorkomposition mithilfe eines Ausdrucks auszulösen , aber ich wusste nicht genau, wie das funktioniert, und ich wusste definitiv nicht , was der Ausdruck war oder auf welche Eigenschaft ich ihn anwenden In diesem Fall habe ich die Leistungsfähigkeit der KI genutzt, um den Ausdruck dafür zu generieren also möchte ich Ihnen jetzt beibringen, wie das geht Vielleicht schauen Sie sich meinen Kurs KI for Motion an, in dem wir gelernt haben, wie man GPT verwendet, um sehr nützliche Ausdrücke zu erstellen, indem wir einfach beschreiben, was wir erreichen wollen Sie müssen keine Erfahrung mit Ausdrücken haben oder Codierung verstehen Ich empfehle Ihnen dringend, sich den Kurs KI for Motion anzusehen falls Sie Ihren Arbeitsablauf verbessern und die Vorteile der KI in After Effects wirklich nutzen möchten . Also werde ich jetzt dieselben Techniken aus diesem Kurs verwenden , um mir ein nettes Setup auszudenken, mit dem ich meine Klickanimationen hier automatisieren kann. In Ordnung. Nachdem das geklärt ist, lassen Sie uns wieder aktiv werden. , bevor wir zu Chat GPT springen Lassen Sie uns zunächst die Klick-Animation für den Cursor erstellen Lassen Sie uns am Anfang der Timeline stehen und hier einen skalierten Keyframe erstellen Nehmen wir nun an, diese Animation dauert zehn Frames. Erstellen Sie hier also einen weiteren Keyframe. Stellen wir uns dann in die Mitte der Keyframes und verkleinern die Form Lassen Sie uns abschließend die Keyframes vereinfachen und die Bewegung im Diagrammeditor so anpassen , dass die Bewegung schnell beginnt Wie Sie sehen können, haben wir auf diese Weise eine schöne Klick-Animation für den Cursor erstellt Großartig. Jetzt möchte ich diese Animation in meiner Hauptszene auslösen. Zu den relevanten Zeitpunkten , an denen ich es mit der Klickanimation der UI-Panels synchronisieren muss . Aber nehmen wir an, wir wissen nicht genau, wie das geht. Dies ist der perfekte Zeitpunkt , um ein paar Minuten damit zu verbringen, zu sehen, ob wir das mit einem Ausdruck machen können. Das Erste, was ich gerne mache, ist einen Screenshot meiner Szene zu machen und dabei sicherzustellen, dass die Ebenen und ihre Namen dem Screenshot deutlich sichtbar sind. Dann zeige ich gerne auf die Ebene, über die ich bald mit Chat GPT sprechen Du musst es nicht tun. In Ordnung. Als Nächstes kopieren wir diesen Screenshot und gehen dann zu Chat GPT und fügen das Bild in einen neuen Chat ein Es funktioniert auch perfekt mit der kostenlosen Chat-GPT-Version Okay. Und jetzt fange ich einfach an, meine Situation zu beschreiben, beginnend mit der Erwähnung, welche Software ich verwende. Ich schreibe mit schlechtem Englisch und vielen Rechtschreib- und Grammatikfehlern, nur damit Sie verstehen, dass Sie kein perfektes Englisch brauchen. Das Hauptziel ist es, die Situation zu beschreiben und Ihr Ziel zu erklären. Es ist sehr wichtig, die korrekten Namen der Ebenen angeben, auf die Sie sich beziehen. Ordnung. Sobald wir damit fertig sind, können wir die Eingabetaste drücken und die KI ihr Ding machen lassen Bevor ich den Ausdruck nun auf das Projekt anwende, lese ich gerne die Erklärung , die Chat GPT bietet In diesem Fall kann ich den Ausdruck kopieren und verwenden. Aber nachdem ich die Notizen gelesen habe, stelle ich fest, dass der Ausdruck, den sie mir gegeben hat , intern angepasst werden muss . Ich sehe, dass ich einige Werte unter der Textzeile für die Klickdauer anpassen muss, um ihn zu aktivieren ich einige Werte unter der Textzeile für die Klickdauer anpassen muss . Nehmen wir an, ich habe keine Ahnung, was das bedeutet. Ich möchte nur einen einfachen Ausdruck, der meine Cursorklick-Animation aktiviert meine Cursorklick-Animation , die ich in der Cursor-Vorkomposition erstellt habe In diesem Fall vor dem Einfügen des aktuellen Ausdrucks versuchen, werde ich vor dem Einfügen des aktuellen Ausdrucks versuchen, Chat GPT zu erklären, dass ich einen Ausdruck haben möchte , der funktioniert, ohne dass ich Anpassungen am Code vornehmen muss Jetzt haben wir also einen neuen Ausdruck. Wir können die Erklärung lesen und sie gemäß den Anweisungen anwenden , die uns Chat GPT gegeben hat Sie finden diesen Ausdruck auch in dem Assets-Ordner, den Sie von mir heruntergeladen haben Kopieren Sie ihn also für den Fall , dass der von Ihnen erstellte Ausdruck nicht funktioniert, nachdem Sie ihn im Projekt angewendet haben. Aber zuerst möchte ich, dass Sie den Ausdruck verwenden, den Sie jetzt erstellt haben, bevor Sie meinen anwenden. Okay, gehen wir jetzt zurück zum Projekt und wenden den Ausdruck an. Zunächst müssen wir, wie Chat GPT vorgeschlagen hat, die Time-Remap-Funktion für die Pre Com aktivieren Time-Remap-Funktion für die Pre Als Nächstes müssen wir einen Ausdruck für die Eigenschaft Time Remap erstellen für die Eigenschaft Time Remap Dann lassen Sie uns einfach den Ausdruck hinter uns lassen. Fantastisch. Nachdem das erledigt ist, wollen wir jetzt sehen, ob es funktioniert. Lassen Sie uns also zunächst an dem Punkt stehen, an dem die Animation für den ersten Klick sein sollte , und dann machen wir den nächsten Schritt, den Chat GPT vorgeschlagen Zu diesem Zeitpunkt müssen wir auf dem Precomp eine neue Markierung erstellen auf dem Precomp eine neue Markierung Sie können dafür den Shortcut verwenden In Ordnung. Wie Sie sehen können, findet die Skalierungsanimation, die wir im Cursor-Precomp erstellt haben , jetzt hier statt, ohne dass wir die Keyframes verschieben Das bedeutet, dass der Ausdruck perfekt funktioniert . Jetzt können wir also damit beginnen, neue Markierungen zu erstellen. Zu jedem Zeitpunkt möchten wir, dass die Klickanimation stattfindet. Aber vorher können wir die Bewegung der Cursoranimation so anpassen , dass sie sich natürlicher bewegt und nicht linear, wie sie sich gerade bewegt. Der Cursor muss zu dem Zeitpunkt, an dem die Klickanimation stattfindet, für einige Frames pausieren . Lass mich dir zeigen, was ich meine. Lassen Sie uns nur die Positions-Keyframes öffnen und dann alle auswählen und sicherstellen, dass die Geschwindigkeit auf, sagen wir, 85% eingestellt ist auf, sagen wir, 85% Auf diese Weise wird die Bewegung an den Punkten zwischen den Keyframes jetzt vollständig verlangsamt Punkten zwischen den Keyframes Das ist großartig, denn jetzt ist der Cursor im Moment der Cursorklick-Animation fast statisch der Cursorklick-Animation Okay. Aber jetzt gibt es Momente , in denen wir nicht wollen, dass der Cursor statisch ist. Wie zu diesem Zeitpunkt möchten wir, dass er sich langsam weiterbewegt. Lassen Sie mich Ihnen zeigen, wie Sie mit diesen Momenten umgehen können. Zuerst müssen wir sicherstellen , die Keyframes für diesen bestimmten Moment auswählen Und dann verwenden Sie das Velocity-Bedienfeld für Keyframes, um daraus fortlaufende Keyframes zu machen. Jetzt können wir die Ansicht vergrößern und die Keyframes ein wenig vergrößern, sodass die Geschwindigkeit zu diesem Zeitpunkt nicht Wie Sie sehen können, hört es jetzt nicht mehr auf und bewegt sich langsam weiter Sobald das erledigt ist, wollen wir uns nun mit den Momenten befassen, in denen die berührende Animation stattfindet, etwa zu diesem Zeitpunkt. Um die Illusion einer berührenden Bewegung zu erzeugen, müssen wir die Cursorbewegung im Berührungsmoment beschleunigen . Und wir müssen dafür sorgen, dass es superschnell zurückgeht , um diese Hüpfbewegung zu erzeugen Mal sehen, wie das aussieht. Großartig. Wir haben eine nette Hüpfbewegung Aber jetzt, wie Sie vielleicht verstehen, müssen wir die federnde Berührungsbewegung auch für die nächsten Keyframes erzeugen Berührungsbewegung auch für die nächsten Keyframes Lassen Sie uns versuchen, die Geschwindigkeit der Keyframes anzupassen , um zu sehen, ob wir das richtig hinbekommen Ziehen wir diesen Griff nach rechts. Ich versuche, den Cursor an diesen beiden Punkten superschnell bewegen zu lassen . Wie Sie sehen, fühlt es sich nicht richtig an, egal was ich tue. Die Bewegung fühlt sich nicht wie eine berührende Animation an. Lassen Sie mich Ihnen zeigen , was wir tun müssen , damit das besser aussieht. Lassen Sie uns jetzt zur Zeitleiste zurückkehren und zunächst den problematischen Bereich finden, mit dem wir uns befassen müssen. Wir sprechen über die Animation, die hier stattfindet. Lassen Sie uns nun diese vier Keyframes wieder auf lineare Keyframes umstellen wieder auf lineare Keyframes Halten Sie den Controller-Befehl gedrückt und klicken Sie einmal auf einen von ihnen. Danach stellen wir uns in die Mitte dieser Keyframes und erstellen einen Keyframe mit dem aktuellen Wert Als Nächstes machen wir dasselbe in der zweiten Touch-Animation. Lassen Sie uns abschließend fünf Frames vorwärts bewegen und ebenfalls vor dem Outro einen Keyframe erstellen Im Moment verstehen Sie vielleicht nicht, warum wir das getan haben, aber bald wird alles klar sein Lassen Sie uns vorerst damit beginnen, die Bewegung anzupassen. Wählen Sie alle Keyframes für den letzten Teil aus und vereinfachen Sie sie auf einfache Weise. Und jetzt gehen wir zum Diagrammeditor und beginnen, die Bewegung anzupassen Denken Sie daran, wir wollen diese federnde, berührende Animation erstellen diese federnde, berührende Animation Lassen Sie uns also dafür sorgen, dass sich der Cursor vor dem Berührungsmoment schnell und nach dem Berührungsmoment Großartig. Jetzt wollen wir, dass der Cursor für ein paar Bilder in der Luft schwebt, und genau hier kommen unsere neuen Keyframes Einsatz, weil wir diesen Moment jetzt verlängern können , indem wir den Griff dieses Keyframes nach rechts bewegen den Griff dieses Keyframes nach Danach muss der Cursor diese federnde Berührungsbewegung ausführen, sodass wir die Geschwindigkeit in diesem Moment anpassen können, wie wir es beim vorherigen Berührungsmoment getan haben Fantastisch. Lassen Sie uns jetzt dasselbe auch für den letzten berührenden Moment tun. Sobald wir fertig sind, wollen wir sehen, wie das aussieht. Großartig. Wie Sie sehen können, erhalten wir jetzt eine auffälligere Berührungsanimation. Und meiner Meinung nach fühlt es sich viel besser an als die vorherige Animation, die wir am Anfang erstellt haben. Ordnung. Jetzt möchte ich nicht, dass der Cursor vollständig stoppt, bevor ich die Szene verlasse Also wähle ich diesen Keyframe aus und stelle sicher, dass es sich um einen fortlaufenden Keyframe handelt , sodass ich diese Keyframes aufrufen Jetzt wird die Geschwindigkeit hier nicht bei Null sein. Ich kann den Griff auch nach links bewegen, um den Cursor langsam zu verlassen und gegen Ende an Geschwindigkeit zu gewinnen. Falls Ihnen diese Bewegung gefällt, können Sie sie auf die schwebenden Momente in den sich berührenden Animationsteilen anwenden in den sich berührenden Animationsteilen Wir können die schwebenden Momente gleichzeitig auswählen , während wir die Umschalttaste gedrückt halten, und dann mit der Tastenkombination das Bedienfeld für die Geschwindigkeit der Keyframes für beide öffnen Bedienfeld für die Geschwindigkeit der Keyframes Lassen Sie uns nun diese Keyframes zu fortlaufenden Keyframes machen und sicherstellen, dass sie angezeigt werden In Ordnung, ich finde es toll, wie das aussieht. Lassen Sie uns jetzt den Diagrammeditor verlassen und uns diesen Animationsteil zusammen mit dem Rest der Szene ansehen zusammen mit dem Rest der Szene Ich finde, das sieht toll aus. Und damit sind wir jetzt bereit, mit der nächsten Szene fortzufahren , in der eine Cursoranimation enthalten sein muss . Gehen wir also zum Master Comp und schauen wir uns das an. Okay, die nächste Szene, an der wir arbeiten werden, ist Szene fünf. Lassen Sie uns vorher alle offenen Pre-Comps schließen , die wir hier haben Fantastisch. Und jetzt lasst uns die Szene betreten und versuchen zu verstehen, was wir hier tun müssen. Okay, ich sehe also, dass der Cursor ungefähr zu diesem Zeitpunkt die Szene betreten sollte, und wir sollten eine Klickanimation erstellen um das Unteraufgabenfenster zu öffnen, und dann eine weitere berührende Animation erstellen , um einige der Unteraufgaben in diesem Bereich zu überprüfen einige der Unteraufgaben in diesem Bereich Lassen Sie uns vor diesem Hintergrund zur vorherigen Szene gehen, in der wir die Cursoranimation erstellt haben , und die Cursor-Vorkomposition von dort kopieren Cursor-Vorkomposition von dort , da der Ausdruck bereits auf diese Vorkomposition angewendet Okay, und jetzt zurück zu unserer neuen aktuellen Szene Lassen Sie uns die Cursor-Precomp einfügen und alle Keyframes in den Markern entfernen , die Achten Sie darauf, dass Sie die Eigenschaft Time Remap nicht löschen . Gehen wir dann zum Anfang der Timeline und drücken die linke Klammertaste, um diese Precomp von hier aus zu starten . In Ordnung Und jetzt fangen wir an, es zu animieren. Als erstes werden wir den Zeitpunkt finden dem ersten Animation mit dem ersten Klick in der Szene stattfindet Es passiert irgendwo hier in der Nähe, falls Sie sich nicht sicher sind, wo genau die Klick-Animation beginnt Sie können den UI-Precomp aufrufen und herausfinden, wann sie passiert In unserem Fall passiert es hier. Lassen Sie uns also, während wir hier stehen, zur Hauptszene zurückkehren und den Cursor hierher bringen und diesen Punkt markieren, indem ersten Position erstellen diesem Zeitpunkt Keyframes an der Großartig. Und jetzt können wir entweder die nächste Cursoranimation oder wir können das Intro dafür erstellen Lassen Sie uns dieses Mal das Intro erstellen und dann die Animation weiter an die Demo-Flow-Animation anpassen Ordnung? Gehen wir also 1 Sekunde in der Zeit zurück und bewegen den Cursor aus dem Bild Lass es uns schaffen. Betreten Sie die Szene von der rechten Seite. Geil. Jetzt haben wir also eine Intro-Animation, und wir haben sie dort platziert, wo die Klick-Animation im Demo-Flow stattfindet Gehen wir als Nächstes eine Sekunde vorwärts und bewegen den Cursor irgendwo in der Nähe da wir jetzt ein paar Frames benötigen , damit das Popup-Panel die Szene aufrufen kann Fantastisch. Und jetzt suchen wir die nächste Position , an der sich der Cursor befinden sollte. In diesem Fall müssen wir es zu diesem Zeitpunkt in den Bereich der ersten Unteraufgabe bringen . Ziehen wir es also hierher. Lassen Sie uns als Nächstes sehen, wo die zweite Unteraufgabe, Checkbox-Animation, aktiviert ist, und dann den Cursor so platzieren, dass er daneben platziert wird. Fantastisch. Wie wir in der vorherigen Szene gelernt haben, können wir jetzt in der Mitte der sich berührenden Animation stehen und die Kugel ein wenig nach links bewegen die Kugel ein wenig nach links , damit sie in der Luft schwebt Fantastisch. Sobald wir also alle Berührungs - und Klickmomente haben, können wir uns 1 Sekunde vorwärts bewegen und den Cursor aus dem Bild holen. Nett. Jetzt sind wir der Erstellung der ersten Bewegung für den Cursor fertig und unser nächster Schritt besteht darin, sie anzupassen. Wir können damit beginnen, die relevanten Punkte zu krümmen, beginnend mit den Momenten, in denen die Kugel in der Luft schweben sollte Dann können wir das Outtro an den Intro-Punkten abrunden. Wechseln wir nun zum Auswahlwerkzeug und beginnen, die Griffe der abgerundeten Punkte so anzupassen, dass der Cursor eine schöne kurvige Bewegung erhält eine schöne kurvige Bewegung Ordnung. Sobald das erledigt ist, suchen wir nun den Zeitpunkt, an dem die Klick-Animation stattfindet, und fügen eine neue Markierung hinzu, um den Ausdruck auszulösen. Fantastisch. Jetzt haben wir alle ersten wichtigen Schritte abgeschlossen und sind bereit, mit der Verbesserung des Antrags zu beginnen. Lassen Sie uns alle Keyframes auswählen und sie einfach vereinfachen. Und jetzt rufen wir den Diagrammeditor und passen die Geschwindigkeit der Bewegung Unser Ziel ist es, den Cursor zu diesem Zeitpunkt für einen längeren Zeitraum zu verlangsamen, für einen längeren Zeitraum zu verlangsamen da die Klickanimation hier stattfindet. Auf diese Weise bewegen wir den Cursor für mehr Frames superlangsam. Großartig. Jetzt, an diesem Punkt, überprüfe ich normalerweise den Rest der Animation in der Szene und versuche zu verstehen, was als Nächstes angepasst werden sollte. In diesem Fall weiß ich, dass ich für den Animationsteil des Unteraufgabenfensters die Animation erstellen muss Animationsteil für den Animationsteil des Unteraufgabenfensters die Animation Lassen Sie uns daher diesen Keyframe auswählen und den linken Griff nach rechts ziehen, sodass der Cursor im Berührungsmoment superschnell ist Um dann die Hüpfbewegung zu erzeugen, müssen wir sie nach dem Berührungspunkt schnell ausführen, ganz ähnlich wie in der vorherigen Szene Okay, jetzt machen wir dasselbe für den zweiten berührenden Moment Großartig. Nachdem wir diesen Teil ein paar Mal überprüft haben, nehmen wir an, wir haben beschlossen, den Cursor für einen etwas längeren Zeitraum in der Szene bleiben zu lassen den Cursor für einen etwas längeren Zeitraum in der Szene bleiben . Ich möchte nicht , dass er die Szene gleich nach dem zweiten berührenden Moment verlässt . Lassen Sie uns dazu beim letzten Keyframe stehen und die Cursorposition so ändern , dass sie irgendwo in der Nähe platziert wird. Passen wir die Kurve für diesen Punkt an. Großartig. Und jetzt bewegen wir uns 1 Sekunde vorwärts und bewegen den Cursor aus der Szene. Fantastisch. Und jetzt, bevor wir weitermachen, wollen wir uns zunächst ansehen, wie die von uns erstellte Animation aussieht. Ordnung. Mir ist also aufgefallen, dass der Cursor zu diesem Zeitpunkt vollständig stoppt, und ich liebe es nicht Lassen Sie uns das beheben, indem wir diesen Keyframe in einen kontinuierlichen Keyframe umwandeln und die Bewegung an diesem Punkt beschleunigen Großartig. Jetzt haben wir einen etwas besseren Bewegungsablauf. Aber mir ist aufgefallen, dass sich die erste berührende Animation nicht richtig anfühlt. Und das liegt daran, dass zwischen den Keyframes vor dem Berührungspunkt und den Keyframes des Berührungspunkts sehr viel Zeit liegt Keyframes vor dem Berührungspunkt und den Keyframes des Berührungspunkts und Daher können wir hier einen schönen Zeitpunkt vor dem Berührungspunkt finden und den Cursor ein wenig bewegen , um einen neuen Keyframe zu erstellen Stellen Sie sicher, dass Sie immer noch diesen abgerundeten Pfad haben. Ordnung. Nachdem wir das getan haben, können wir den Graph-Editor aufrufen und ein bisschen mehr Kontrolle über die Animation und die Geschwindigkeit des ersten Berührungsmoments Wir können die Berührungsbewegung beschleunigen, indem wir diesen Griff nach rechts ziehen Und jetzt wollen wir uns mit dem Keyframe dazwischen befassen. Zunächst müssen wir sicherstellen, dass sowohl die eingehende als auch die ausgehende Bewegung dieser Keyframes miteinander verbunden sind, sodass wir beide als eine Einheit steuern können, und das können wir tun, indem wir diesen Keyframe in einen kontinuierlichen Keyframe umwandeln diesen Keyframe in einen kontinuierlichen Keyframe umwandeln Jetzt können wir entscheiden, wie hoch die Geschwindigkeit zu diesem Zeitpunkt sein muss Mal sehen, was wir haben. Sieht toll aus. Beschäftigen wir uns nun mit der Schwebebewegung zwischen den berührenden Momenten Ich möchte nicht, dass der Cursor in diesem Moment vollständig stoppt, also werde ich sicherstellen, dass sowohl die eingehende als auch die ausgehende Bewegung für diese Keyframe-Einheit beschleunigt sowohl die eingehende als auch die ausgehende Bewegung für diese Keyframe-Einheit Fantastisch. Das fühlt sich viel besser an. Bei all diesen Schritten habe ich versucht, Ihnen zu zeigen, wie Sie mit den Keyframes herumspielen können, wenn Sie möchten, dass die Bewegung Ihrer Fantasie entspricht Das ist der Prozess des echten Bewegungsdesigns. Wir überprüfen auch die Animation und passen die Keyframes bis wir etwas bekommen , das uns gefällt Dann überprüfe ich die Bewegung noch einmal. Jedes Mal, wenn ich es mir ansehe, fällt mir etwas Neues auf. Diesmal gefällt es mir nicht, dass die Animation hier aufhört. Es fühlt sich nicht richtig an. Also werde ich dafür sorgen, dass sich dieser Moment kontinuierlicher bewegt. Also gut. Nachdem das gesagt ist, schauen wir uns jetzt die gesamte Szene von Anfang bis Ende an und sehen, wie sie aussieht. Sieht toll aus, aber ich denke, wir können noch ein paar letzte Änderungen vornehmen, damit es besser aussieht Ich finde, dass die Intro-Bewegung zu schnell ist. Lassen Sie uns die ersten Keyframes 1 Sekunde früher starten lassen, damit das Intro länger dauert es dadurch langsamer aussieht Schauen wir es uns noch einmal an. Mir ist aufgefallen , dass die Hüpfbewegung beim zweiten Berührungsmoment zu stark ist Rufen wir also den Diagrammeditor auf und vereinfachen ihn ein wenig. Ordnung, das sieht besser aus. Und da das letzte Schlüsselbild der sich berührenden Animation bei den zweiten sieben und zehn Bildern endet , starten wir das Otro zweiten acht und zehn Bildern sodass es genau eine Sekunde Ordnung, damit haben wir die Szene beendet und sind bereit, mit der nächsten fortzufahren Gehen wir also zurück zur Master-Komposition und suchen uns die nächste Szene, mit der wir uns befassen müssen . In Ordnung. Also ich sehe, wir haben zwei Szenen, mit denen wir arbeiten können. Szene sieben und acht, die Cursoranimationen in diesen beiden Szenen sind etwas einfacher als den vorherigen. Lassen Sie uns also anfangen. Wir werden mit Szene sieben beginnen. Lassen Sie uns zuerst die Szene aufrufen und den Cursor aus der vorherigen Szene übernehmen. Jetzt löschen wir die Positions-Keyframes, die wir darauf haben, und löschen dann auch den Marker, den wir Stellen wir uns an den Anfang der Timeline und drücken die linke Klammertaste, um die Pre-Comp von hier aus zu starten . In Ordnung. Also lass uns jetzt sehen , was wir hier haben. Ich sehe, dass die Animation mit dem ersten Klick hier stattfindet. Lassen Sie uns zu diesem Zeitpunkt stehen und den Cursor so platzieren, dass er irgendwo in der Nähe der zweiten Kontaktbox platziert wird. Lassen Sie uns nun diesen Punkt mit den Positions-Keyframes markieren. Ähm, bevor wir mit der Demo-Flow-Animation fortfahren, gehen wir zum Anfang der Timeline und ziehen den Cursor nach rechts aus dem Frame, um die Intro-Animation dafür zu erstellen Großartig. Jetzt können wir uns 1 Sekunde vorwärts bewegen und den Cursor irgendwo Nähe platzieren, damit er den Übergang in der Demo-Flow-Animation nicht beeinträchtigt . In Ordnung. Und jetzt wollen wir sehen, wo der nächste Klick passiert oder ob es in der Animation einen berührenden Moment gibt. Wie Sie sehen können, erfolgt der nächste Klick nach vielen Sekunden, was bedeutet, dass wir viel Freizeit haben, die der Cursor benötigt, um etwas zu tun. In diesen Fällen ändere ich gerne alle 1 Sekunde die Position des Cursors. Ich mache das nur , um eine erste Vorstellung von der Cursorbewegung zu bekommen . Später werde ich es bei Bedarf anpassen. Also lass es uns jetzt machen. Bleiben wir bei unseren letzten Keyframes bewegen uns eine Sekunde vorwärts und bringen den Cursor ein wenig näher an Klickmoment heran, der im Schaltflächenbereich passieren muss Bewegen Sie sich als Nächstes erneut 1 Sekunde und bringen Sie es irgendwo in der Nähe hin. Machen wir so weiter, bis wir den Knopf erreichen. Da wir den Text hier haben, werde ich sicherstellen , dass der Cursor nicht damit kollidiert Ordnung. Und jetzt, nachdem wir die Taste erreicht haben, können wir uns 1 Sekunde bewegen und den Cursor aus dem Bild nach unten bewegen, um die Outtro-Animation dafür zu erstellen Fantastisch. Wenn das erledigt ist, können wir mit dem nächsten Schritt fortfahren. Zu diesem Zeitpunkt ist es am besten, den Pfad anzupassen, und wir können dies mit dem Vertex-Werkzeug tun Lassen Sie uns also zuerst alle relevanten Punkte abrunden und danach mit dem Auswahlwerkzeug die Griffe so anpassen, dass ein schöner und abgerundeter Pfad entsteht Sobald das erledigt ist, können wir jetzt eine Markierung an dem Punkt erstellen , an dem der Klick stattfindet. Wir haben den ersten Klick hier und wir haben einen weiteren für den Button. Ich werde diese Punkte ganz schnell anpassen. Okay. Lassen Sie uns jetzt auch hier eine Markierung erstellen. Großartig. Lassen Sie uns nun alle Keyframes auswählen und sie einfach vereinfachen. Danach können wir mit der Anpassung der Bewegung beginnen. Lassen Sie uns dieses Mal die Geschwindigkeit aller Keyframes auf 85% einstellen und sehen, wie das aussieht Okay, ich finde, es sieht vorerst gut aus, aber meiner Meinung nach fühlt sich die Outtro-Animation nicht richtig Lassen Sie uns die Kurve des letzten Pfadpunkts stornieren , damit er einem geraden Pfad endet, und sehen wir, wie das aussehen wird Das ist viel besser, aber es geht meiner Meinung nach zu schnell. wir also sicher, dass die Outtro-Animation 2 Sekunden dauert und nicht eine Ja, das ist viel besser. Fantastisch. Nachdem wir mit den ersten Animationen fertig sind, versuchen wir nun, einige Anpassungen vorzunehmen, damit sich der Cursor flüssiger bewegt. Mir gefallen die Pausen in diesen Bereichen nicht. Als Erstes können wir versuchen, diese Keyframes zu löschen. Dann passen wir die Griffe der Punkte an, um einen schönen und kurvigen Pfad zu erstellen . In Ordnung. Das sieht schon ein bisschen besser aus. Wählen wir nun diese drei Keyframes aus, für die wir die Pausenmomente haben , und öffnen das Bedienfeld für die Geschwindigkeit der Keyframes sie zu kontinuierlichen Keyframes zu machen Sobald wir fertig sind, gehen wir zum Diagrammeditor und stellen sicher, dass die Geschwindigkeit in diesen Momenten höher als Null ist Im Moment schaue ich mir nur die Animation an und versuche, die Geschwindigkeit der Keyframes so anzupassen , dass sich die Bewegung für mich richtig anfühlt Meiner Meinung nach passiert es in dem Moment, in dem der Cursor über dem Text schwebt, zu schnell Stellen wir also sicher, dass diese Animation etwas länger dauert. Schauen wir uns die Animation ein paar Mal an und schauen, was wir noch verbessern können. Ich mag es nicht, dass die Pause hier passiert, also lassen Sie uns das ganz schnell beheben. Okay, das ist besser. Aber jetzt möchte ich nicht, dass sich der Cursor schnell bewegt , bevor er die Taste erreicht Also werde ich die Griffe auf diese Weise anpassen, damit die Geschwindigkeit zwischen diesen beiden Keyframes nicht so Ich zeige Ihnen diesen Prozess, damit Sie sehen können, wie ich denke und wie ich mit den Anpassungen in der Animation umgehe. In Ordnung, wenn das erledigt ist Wir sind fast fertig mit der Szene. Das einzige, was mich stört, ist , dass der Cursor den Text berührt Um das zu beheben, können wir den Text ein wenig senken und gleichzeitig sicherstellen, dass wir uns immer noch an die Richtlinien des Safe Action Grid halten Fantastisch. Das sieht besser aus. Wir können den Pfad jetzt ein wenig anpassen, sodass der Cursor nicht so nah am UI-Bildschirm ist. Großartig. Ich denke, wir haben die Arbeit an der Szene abgeschlossen , weil alles großartig aussieht. Speichern wir also das Projekt und fahren wir mit der Arbeit am nächsten fort. Okay, für die nächste Szene können wir den Cursor von oben in die Szene bewegen, sodass wir eine schöne kontinuierliche Bewegung von der vorherigen Szene haben , in der der Cursor die Szene von unten verlassen Ordnung. In diesem Sinne beginnen wir mit Szene acht und fangen an zu arbeiten. Lassen Sie uns zunächst den Cursor Precomp hierher bringen. Wir können es aus einer der vorherigen Szenen kopieren. Lassen Sie uns nun die Positions-Keyframes und die Markierungen, die wir darauf haben, loswerden und die Markierungen, die wir darauf haben Vergessen Sie nicht, den Precomp an den Anfang der Timeline zu bringen , wenn Sie fertig sind. In Ordnung. Und jetzt fangen wir an, es zu animieren. Wie üblich werden wir uns zunächst darauf konzentrieren, Animation mit dem ersten Klick zu finden Das passiert ab diesem Zeitpunkt, wir haben hier die Klick-Animation des Anzeigen-Buttons. Bringen wir also den Cursor hierher und erstellen Keyframes für eine Position Ordnung. Und jetzt gehen wir zum Anfang der Timeline und bewegen den Cursor nach oben aus der Szene Und da wir bis zur Klick-Animation noch viel Zeit haben , können wir an zweiter Stelle stehen und den Cursor hierher bringen, damit wir ein schönes und kurviges Intro dafür haben Fantastisch. Und jetzt, da das nächste Klicken oder Berühren der Animation später in der Timeline stattfindet, können wir uns 1 Sekunde hinter den letzten Keyframes bewegen und den Cursor irgendwo in der Nähe bewegen. Als Nächstes müssen wir die Illusion erwecken, dass der Cursor die JPG-Datei erfasst und per Drag-and-Drop in das Popup-Panel Dazu müssen wir zunächst sicherstellen , dass die Cursoranimation mit den Kamerabewegungen synchronisiert In unserem Fall ist es die Positionsanimation für den UI-Bildschirm vor der Erstellung. Wir müssen an dem Punkt stehen, an dem die Bewegung der Kamera mit der rechten Maustaste endet , und den Cursor an den Speicherort der Datei bringen Großartig. Wenn das erledigt ist, sich keine Gedanken über die kurvige Bewegung der Datei Wir werden es später machen. Konzentrieren wir uns zunächst darauf, das Timing der Keyframes zu synchronisieren Sobald wir wieder in der Mitte sind, positionieren wir den Cursor erneut an der Stelle, wir den Cursor erneut an der Stelle an der sich die Datei Großartig. Gehen wir nun eine Sekunde vorwärts und bewegen den Cursor ein wenig nach unten, damit wir einige Frames hier bleiben , bevor wir die Szene verlassen Danach können wir uns eine weitere Sekunde bewegen und den Cursor aus dem Bild holen, sagen wir, diesmal von der linken Seite. In Ordnung. Sobald wir mit der ersten Animation fertig sind, wählen wir das Vertex-Werkzeug und beginnen mit der Anpassung des Pfads Lassen Sie uns zuerst auf diesen Punkt klicken. Großartig. Und für den nächsten Punkt lasse ich es so, wie es ist, weil hier eine Klick-Animation stattfinden muss. Lassen Sie uns als Nächstes weitermachen und auf den dritten Punkt klicken. Fantastisch. Lass uns weitermachen. Klicken wir jetzt hier , um diesen Punkt abzurunden. vorerst keine Sorgen, dass es nicht zur Dateianimation passt und unsere Illusion nicht funktioniert. Wir werden uns in einer Sekunde damit befassen. Lassen Sie uns vorerst die restlichen Punk 25. Optimieren von Bildern mit Effekten und Farben: Komm zurück. Sobald wir mit der Erstellung der Animation fertig sind, können wir damit beginnen, einige nette visuelle Details und Effekte hinzuzufügen , um das Video visuell zu verbessern. Beginnen wir mit der Färbung des Cursors, der in vielen Szenen unseres Projekts erscheint . Wie Sie sehen können, sieht es vorerst ziemlich langweilig aus. Zunächst können wir es mit einigen interessanten Farben einfärben . Und dafür werden wir die Hintergrundanimation mit Farbverlauf verwenden , die wir zu Beginn des Projekts erstellt haben . Lass mich dir zeigen, was ich meine. Lassen Sie uns zuerst den schwarzen Strich ausschalten. Dann suchen wir die von uns gerenderte Hintergrunddatei mit Farbverlauf und bringen sie auf die Timeline. Großartig. Und jetzt verkleinern wir diese Ebene, aber nicht zu stark. Wir brauchen es, um die Sphäre abzudecken, die wir hier haben. Fantastisch. Sobald das erledigt ist, können wir die Track-Mat-Funktion verwenden, damit die Hintergrundebene die Alpha-Matte der Kugel verwendet. Auf diese Weise maskieren wir den Hintergrund mit Farbverlauf anhand der Form der Kugel. Und jetzt haben wir einen schönen farbigen Cursor , der viel besser aussieht als eine statische Farbe. Fantastisch. Nachdem das erledigt ist, kehren wir zur Master-Komposition zurück und rufen eine der Szenen auf, in denen wir eine Cursoranimation haben Gehen wir zu Szene acht. Sobald wir drinnen sind, möchte ich, dass Sie den Cursor vergrößern , um ihn aus der Nähe zu sehen. Großartig. Und jetzt lass mich dir einen einfachen Trick zeigen, um dem Cursor mehr Tiefe zu verleihen. Klicken wir mit der rechten Maustaste auf den Cursor vor der Komposition, gehen wir zu Ebenenstilen und wählen einen inneren Schatteneffekt aus und fügen Danach, bevor Sie mit der Anpassung des Effekts beginnen, ist es eine gute Idee, diesen Precom zu reduzieren , um sicherzugehen, dass Sie an der endgültigen Form dieser Precom arbeiten Okay. Und jetzt können wir eine schöne helle Farbe für den inneren Schatten wählen. Lass uns vorerst Gelb nehmen. Damit es besser zu den Cursorfarben passt, können wir den Mischmodus auf Bildschirm einstellen Wie Sie sehen können, sieht das etwas besser aus. Danach können wir die Opazität auf 100 bringen und mit dem Winkel herumspielen In diesem Fall möchte ich, dass dieser innere Schatten auf dem Cursor vollständig sichtbar ist, nicht nur aus einem Winkel Dazu können wir den Abstand auf Null setzen und dann mit der Größeneigenschaft herumspielen. Großartig. Wie Sie sehen können, haben wir jetzt ein bisschen dreidimensional nach unserem Cursor gesucht, und jetzt möchte ich nicht, dass Sie etwas tun, hören Sie zu. Ich sage dir, wann du wieder aktiv werden musst. Und das liegt daran, dass ich Ihnen zeigen möchte , wie Sie diesen Effekt für die restlichen Szenen mit einer Cursoranimation richtig erzeugen diesen Effekt für die restlichen können. Ordnung. Es liegt also auf der Hand, die Ebenenstile aus dieser Vorkomposition zu kopieren und sie in die restlichen Cursor-Vorkompositionen im Projekt einzufügen die restlichen Cursor-Vorkompositionen im Projekt einzufügen Nachdem ich mit dem Aussehen des Effekts zufrieden bin, gehe ich zurück zur Master-Komposition und suche die nächste Szene mit der Cursoranimation, um den Cursoranimation, um Ich sehe, dass ich es in der ersten Szene habe, also gebe ich es ein, wähle dann den Cursor Precomp aus und füge den Danach gehe ich zur nächsten Szene und gebe sie dann ein, um den Effekt in das Cursor-Precomp einzufügen . Ziemlich einfach Aber was ist, wenn ich das Aussehen dieses Effekts ändern möchte? In diesem Fall müsste ich jede Precomp eingeben und das manuell für alle Cursor-Precomps in jeder Szene tun für alle Cursor-Precomps Wie Sie vielleicht verstehen, wird es viel Zeit in Anspruch nehmen. Vor allem, wenn ich mehr als zwei oder drei Cursor anpassen muss Deshalb möchte ich Ihnen eine bessere Methode zum Kopieren und Einfügen von Effekten beibringen , wenn Sie sie in mehr als einer Szene benötigen und wenn Sie den Effekt für alle von einer Ebene aus steuern möchten den Effekt für alle von einer Ebene aus steuern Also mache ich meine Aktion rückgängig und kehre zur Ausgangssituation zurück. Jetzt kannst du zurückgehen und mir folgen. In Ordnung. In diesem Fall stelle ich zunächst sicher, dass der Effekt in der Szene erzeugt wird zunächst sicher, dass der Effekt in der Szene erzeugt , in der der Cursor-Precomp zuerst im Projekt erscheint Bald werde ich erklären, warum. Lassen Sie uns zunächst den Effekt aus dieser Precomp herausschneiden und dann zur Master-Komposition gehen, um zu sehen, wo wir den Cursor zum ersten Mal sehen In unserem Fall ist es in der ersten Szene. Geben wir es also ein und fügen den Effekt in den Cursor-Precomp ein. In Ordnung Nehmen wir an, wir haben den Effekt gerade erst erstellt und wissen, dass er in den nächsten Szenen des Projekts erscheinen muss . Wählen wir also den Effekt aus. Und jetzt können wir, anstatt die normale Kopie zu verwenden, zu Bearbeiten gehen und die Funktion „ Mit relativen Eigenschaftslinks kopieren “ verwenden. Großartig. Und jetzt gehen wir zu Szene acht, wählen den Cursor Precomp aus und fügen den Mit dieser Funktion haben wir nun alle Eigenschaften des Effekts den Eigenschaften des Effekts übergeordnet, das ist in unserem Fall der Cursor-Pre-Comp aus der Das heißt, wenn ich den Effekt neu gestalten muss, gehe ich zu meiner ersten Szene, passe dort die Eigenschaften an, und sie werden in den restlichen Szenen automatisch angepasst Wie Sie sehen können, hat sich auch das Design der Szene geändert. Auch wenn die Werte hier anscheinend nicht geändert wurden, können Sie deutlich sehen, dass dies immer noch einwandfrei funktioniert. In Ordnung. Lassen Sie uns jetzt das Design wieder normal machen und dann den Effekt für die restlichen Szenen einfügen den Effekt für die restlichen Szenen Gehen wir zu Szene zwei und fügen es hier ein. Wenn Sie die Effekteigenschaften öffnen, werden sie rot angezeigt. Das bedeutet, dass sie alle anhand von Expressions dem Effekt in der ersten Szene übergeordnet sind anhand von Expressions dem Effekt in der ersten Szene Wenn Sie also das Aussehen des Effekts neu gestalten müssen, leicht daran denken, zur ersten Szene zu wechseln und dort die Änderungen vorzunehmen Deshalb bevorzuge ich es, diese einzigartige Kopierfunktion ab der ersten Szene zu verwenden , in der die Ebene mit dem Effekt im Projekt erscheint Ordnung. das geklärt ist, beenden wir das Einfügen des Effekts für die restlichen Szenen Wir können diesen Precomp nach rechts verschieben, um die chronologische Reihenfolge zu erhalten Auf diese Weise kann ich sehen, wo ich den Effekt bereits eingefügt habe. Ordnung, wenn wir damit fertig sind, speichern wir das Projekt um den bisherigen Fortschritt zu sichern Großartig. Damit haben wir die Anpassung des Cursordesigns abgeschlossen. Und jetzt wollen wir diese Gelegenheit nutzen, um das Aussehen der Call-to-Action-Schaltfläche zu verbessern das Aussehen der Call-to-Action-Schaltfläche zu , die wir in der letzten Szene haben. Ich zeige Ihnen, wie Sie mit einfachen Effekten ein ziemlich beeindruckendes Aussehen verleihen können Ihren Schaltflächen oder sogar ganzen UI-Bildschirmvorkonfigurationen ein ziemlich beeindruckendes Aussehen verleihen können. Gehen wir zunächst zum Bedienfeld „ Effekte und Voreinstellungen“, suchen nach dem CC-Light-Sweep-Effekt und wenden ihn auf die Schaltfläche PreComp an Normalerweise wird dieser Effekt verwendet, um Logos oder Textebenen einen schönen, glänzenden Schwung zu verleihen In unserem Fall werden wir ihn jedoch verwenden, um einen coolen, glänzenden Kanteneffekt zu erzielen Lass mich dir zeigen, was ich meine. Als Erstes richten wir den Effekt auf die Mitte der Schaltfläche aus. Als Nächstes ändern wir die Form des Effekts in linear. Danach passen wir die Breite an die Schaltflächenform an. Ich finde, 70 sieht gut aus. Dann können wir es für die Glätte auf, sagen wir, zehn einstellen Versuchen Sie als Nächstes, für die Farbe einige helle Farben auszuwählen. Lass uns eine leuchtend gelbe oder orange Farbe wählen. In Ordnung. Und jetzt können Sie mit den Eigenschaften Kantenintensität und Kantendicke herumspielen Eigenschaften Kantenintensität und Kantendicke bis Sie das gewünschte Aussehen haben. Sobald das erledigt ist, können wir zum Anfang der Timeline gehen und die Richtung animieren Aber anstatt Keyframes zu erstellen, können wir einen einfachen Ausdruck verwenden ihn automatisch rotieren zu lassen Lassen Sie uns also das Ausdrucksfeld für diese Eigenschaft öffnen und darin einen einfachen Zeitausdruck schreiben T Sternchen 100. Jetzt wird diese Eigenschaft automatisch animiert. Mal sehen, wie das aussieht. Sieht toll aus, aber ich bevorzuge es, nur die glänzenden Kanten zu sehen nur die glänzenden Kanten , ohne dass in der Mitte der Taste etwas glänzt. Dafür können wir die Sweep-Intensität auf Null setzen . Großartig Nachdem wir mit den Ergebnissen zufrieden sind, können wir das Projekt jetzt speichern und dem nächsten Schritt fortfahren, damit dieser Effekt etwas besser aussieht Dafür können wir den Glow-Effekt verwenden. Suchen wir es also auf der Registerkarte Effekte und wenden es auf den Precomp an Bevor ich weitermache, möchte ich erwähnen, dass die Reihenfolge der Effekte im Effektfenster das Aussehen des Objekts beeinflusst, mit dem wir es zu tun haben Lassen Sie uns vor diesem Hintergrund den Glow unter den Sweep bringen und einige Eigenschaften anpassen , damit er etwas glänzender aussieht . An diesem Punkt erzielen wir am besten ein schönes Aussehen, indem Sie einfach einige Eigenschaften und Werte des Effekts ändern einige Eigenschaften und Werte des , bis wir etwas bekommen, das Und das liegt daran, dass sich das Aussehen des Effekts je nach Farbe der Schaltfläche und den Sweep-Effektwerten ändert nach Farbe der Schaltfläche und den Sweep-Effektwerten Es gibt keine spezifischen Werte für den Glow-Effekt, die für alle Farben und Designs geeignet sind die für alle Farben und Designs Daher schlage ich vor, dass Sie mit den Eigenschaften herumspielen und herausfinden, was Ihnen gefällt und was am besten zu Ihrem Projekt passt. Ordnung. Sobald wir mit dem Button-Design fertig sind, können wir das Projekt speichern und mit dem nächsten Schritt fortfahren An diesem Punkt können wir zur Master-Komposition zurückkehren und damit beginnen, Hintergründe für die Szenen ohne Hintergründe hinzuzufügen . Wir können mit der ersten Szene beginnen. Also lass uns es eingeben und anfangen zu arbeiten. Als Erstes sehe ich, dass wir eine Textebene haben , die wir als Referenz verwenden die wir jetzt löschen können. Großartig. Lassen Sie uns nun, bevor wir den Hintergrund hinzufügen, diese Gelegenheit nutzen und unser Projektpanel organisieren. Ich sehe, dass es ein paar Pre-Comps gibt, die wir in den Precomps-Ordner verschieben können In Ordnung. Suchen wir nun den Hintergrund mit Farbverlauf, den wir für das Projekt erstellt haben , und fügen ihn der Szene hinzu Wie Sie vielleicht bereits wissen, dies keine gute Idee, da die Hintergrundebene für diese große Szene zu klein ist. Wenn wir das in der Master-Komposition sehen, können wir deutlich sehen, dass es nicht gut aussieht Die gute Nachricht ist, dass wir dieses Problem lösen können, indem wir die Ebene einfach so skalieren, dass sie den Dimensionen der Szene entspricht Und bevor wir das tun, bevorzuge ich es, die Hintergrundebene zu verwenden, die wir in den Titelanimationsszenen haben , da es einige Effekte gibt, die die Farbverläufe etwas besser aussehen lassen als die ursprüngliche Ebene Gehen wir also zuerst zur ersten Szene zurück und löschen hier die Hintergrundebene. Danach suchen wir die erste Titelanimation und geben diese Vorkomposition um die Hintergrundebene von dort zu kopieren Wenn wir fertig sind, kehren wir zur ersten Szene zurück und fügen die Ebene ein. Großartig. Und jetzt platzieren wir diese Ebene unter allen Ebenen und richten sie auf diese Weise an der Mitte der Komposition Der Effekt wird besser aussehen, wenn wir ihn animieren. Jetzt können wir diesen Precomp skalieren, aber vorher löschen wir hier alle Skalierungs-Keyframes Als Nächstes skalieren wir diese Precomp bis sie Scheuen Sie sich nicht, es zu skalieren, denn wir haben den schnellen Box-Unschärfeeffekt auf dieser Ebene, was bedeutet, dass die Farbverläufe auch dann noch gut aussehen, wenn Fantastisch. Und jetzt können wir mit der Position der Hintergrundebene herumspielen, um zu sehen, welcher Farbbereich für diese Szene besser aussieht. Meiner Meinung nach sieht der untere Teil des Verlaufshintergrunds sehr gut aus, also lasse ich es so. Nachdem das erledigt ist, fahren wir mit der nächsten Szene fort. Lassen Sie uns nun Szene zwei aufrufen und den Hintergrund mit Farbverlauf auch hier einfügen. Und bevor ich weitermache, möchte ich diese Szene etwas dunkler aussehen lassen, da es in dieser Szene um einige Probleme geht, wie z. B. viele Nachrichten und viele Aufgaben. Daher kann es eine gute Idee sein, diese Szene an das Textkonzept anzupassen, indem die Stimmung abgedunkelt Deshalb zeige ich Ihnen jetzt ein paar Möglichkeiten, wie wir mit einfachen Effekten machen können Bei der ersten Methode möchte ich nicht, dass du sie mit mir machst , da wir sie nicht verwenden werden. Wir werden die zweite verwenden. Also vorerst einfach zuschauen und zuhören. Bald werde ich Sie wissen lassen, wann Sie wieder aktiv werden müssen. In Ordnung. Also für die erste Methode können wir den Invert-Effekt verwenden und dann mit den Kanälen herumspielen Wie Sie sehen können, erzeugt jede Option hier ein ganz anderes Aussehen, das mit den Farben Ihres Farbverlaufs sehr gut aussehen könnte mit den Farben Ihres Farbverlaufs sehr gut Sie können diesen Effekt mit der Anpassung der Hauptfarbtoneigenschaft des Farbton - und Sättigungseffekts kombinieren der Anpassung der Hauptfarbtoneigenschaft des Farbton - und Sättigungseffekts und prüfen, ob Sie etwas erzielen können, das Ihnen gefällt. Ordnung, ich lösche den Invertierungseffekt und jetzt machen wir uns wieder an die Arbeit Manchmal möchten wir die volle Kontrolle über die Farben in unserem Farbverlauf haben über die Farben in unserem Und dafür können wir den Tritone-Effekt nutzen. Wenden wir es also zuerst auf die Ebene an und gehen dann zum Projektfenster und bringen die Farbpalette in die Szene, um die Farben auszuprobieren Großartig. So können Sie jetzt mehr Kontrolle über die Farben haben. Wenn Sie jedoch noch mehr Kontrolle wünschen, können Sie die Eigenschaft des Tons auf Penton umstellen Auf diese Weise haben Sie die Kontrolle über das gesamte Farbrad, das Sie im Farbverlauf haben Wir können jetzt die dunkleren Farben aus der Farbpalette ausprobieren oder sogar entscheiden, dass die dunklere Schwingungsszene hauptsächlich aus den lila Farben bestehen soll , die wir in der Farbpalette haben Im Moment versuche ich nur, die lila Farben auszuprobieren und zu sehen, was am besten aussieht Sie können die gewünschte Farbe auch manuell auswählen. Ich wähle jetzt zum Beispiel die weiße Farbe für diesen bestimmten Farbbereich und den Hintergrund mit Farbverlauf. Sobald wir mit den Ergebnissen zufrieden sind, können wir jetzt die Farbpalette löschen und dann den Hintergrund mit Farbverlauf unter alle Ebenen bringen . Das sieht nett aus. Aber ich denke, die Szene sollte sich etwas dunkler anfühlen. Dazu können wir den Kurveneffekt hinzufügen und dann mit den RGB-Kanälen herumspielen , damit der Farbverlauf dunkler aussieht. Wie Sie sehen können, sieht das sehr gut aus. Gehen wir jetzt zum Master-Comp und schauen uns an, wie das mit der vorherigen Szene aussieht Meiner Meinung nach sieht das großartig aus. Und wir können jetzt auch der nächsten diesen dunklen Hintergrund mit Farbverlauf hinzufügen Szene diesen dunklen Hintergrund mit Farbverlauf hinzufügen. Und dafür kehren wir zu Szene zwei zurück und kopieren den Hintergrund mit Farbverlauf von hier aus. Gehen wir als Nächstes zu Szene drei und fügen sie hier ein. Lassen Sie uns diese Ebene jetzt unter alle Ebenen hier bringen . Ich finde, es sieht gut aus. Großartig. Und jetzt gehen wir zurück zum Master Comp und sehen, was wir als Nächstes tun sollten Wir haben bereits einen schönen Hintergrund für Szene vier, und ich denke, wir müssen hier nichts ändern Wie Sie vielleicht bemerkt haben, erhalten wir hier einige nette Muster, die den Hintergrundverläufen entsprechen wir in den verschiedenen Arten von Szenen im Projekt haben. Für Titelszenen haben wir den Hintergrund mit verstärktem Farbverlauf für die Szenen, in denen es um Probleme geht Wir haben einen Hintergrund mit dunklem Farbverlauf. Für die Bildschirmszenen der Benutzeroberfläche haben wir den regulären Hintergrund mit Farbverlauf. Dies ist eine gute Methode, die Sie für Ihre nächsten Projekte anwenden können. Um es etwas interessanter zu machen, können Sie das Skript in Hauptteile aufteilen und für jeden Teil einen bestimmten Hintergrund hinzufügen für jeden Teil einen bestimmten Hintergrund , wie wir es gerade tun. das geklärt ist, wollen wir mit unserem Muster Schritt halten und einen regulären Hintergrund für Szene fünf hinzufügen, da es sich um eine Szene mit einer UI-Bildschirmanimation handelt. Dazu können wir Szene vier aufrufen und den dort vorhandenen Verlaufshintergrund kopieren. Zurück in Szene fünf fügen wir es hier ein und platzieren es unter allen Ebenen. Großartig. Und jetzt, bevor wir die relevanten Hintergründe für die nächsten Szenen hinzufügen, wollen wir diese Gelegenheit nutzen, um das Aussehen dieser Szene hier zu verbessern. Lass mich dir zeigen, was ich meine. Lassen Sie uns zuerst die Aufgaben vor der Bearbeitung eingeben. Was mir hier nicht gefällt, ist, wie der Schatten aussieht, wenn das Unteraufgabenfenster erscheint. Der Schatten sieht dunkelgrau aus, was meiner Meinung nach nicht zum Gesamtdesign passt, das wir im Projekt haben Um dies zu beheben, müssen wir lediglich den Fülleffekt hinzufügen und dann eine andere Farbe auswählen. Lassen Sie uns Weiß verwenden und sehen , wie das mit dem Rest der Szene aussieht. Es sieht okay aus, passt aber zu sehr zum Unteraufgabenfenster Lassen Sie uns hier stehen und dann die lila Farbe probieren, die wir haben Wie Sie sehen können, sieht das viel besser aus. Kopieren wir nun den Effekt und fügen ihn in die andere Szene ein, in der wir die Schattenebene haben. Ich kann mich nicht erinnern, wo es war. Gehen wir also zurück zum Master Comp und suchen ihn. Hier ist es in Szene acht. Lassen Sie uns die Szene und dann den UI-Bildschirm vor der Kompilation aufrufen. Sobald wir hier sind, wählen wir die Schattenebene aus und fügen den Effekt ein. Fantastisch. Jetzt, wo das erledigt ist, gehen wir zurück zur Master-Komposition und schauen uns die nächsten Szenen an, in denen wir einen Hintergrund mit Farbverlauf hinzufügen müssen Okay, ich sehe, dass in den Szenen sechs und sieben ein Hintergrund fehlt Gehen wir also zuerst zu Szene fünf und kopieren den Hintergrund mit Farbverlauf von hier. Gehen wir dann zu Szene 7 und fügen die Ebene ein. Bringen Sie nun die Ebene unter alle Ebenen und lassen Sie uns sehen, wie das aussieht. Okay, das sieht toll aus. Aber ich mag die Auflösungsanimation des Hauptbildschirms der Benutzeroberfläche nicht. Lassen Sie uns also diese Gelegenheit nutzen , damit es besser aussieht. Geben wir zunächst die Nachrichten vor der Erstellung ein und suchen die entsprechende Ebene. Hier ist sie Es ist der Pre-Comp, den wir hier haben, unter allen Ebenen. Und um die Auflösungsanimation zu verbessern, können wir während des Auflösens eine sanfte Unschärfeanimation hinzufügen während des Auflösens eine sanfte Unschärfeanimation Öffnen wir dazu zunächst die Keyframes auf dieser Ebene und stehen hier am Anfang der Animation Dann fügen wir den Fast-Box-Unschärfeeffekt hinzu und erstellen einen Keyframe für den Unschärferadius mit einem Wert von Null zu diesem Zeitpunkt Gehen wir als Nächstes ein bisschen vorwärts bis zu dem Punkt, an dem die Ebene noch sichtbar ist, und setzen den Weichzeichner auf Ordnung. Und jetzt bringen wir diesen Keyframe an das Ende der Animation Dann lockern Sie einfach die Keyframes und sehen Sie, wie das aussieht. Fantastisch. Ich finde, das sieht jetzt viel besser aus. Gehen wir also zurück zur Master-Komposition und suchen die nächste Szene, in der wir einen Hintergrund mit Farbverlauf hinzufügen müssen einen Hintergrund mit Farbverlauf hinzufügen müssen Ordnung. Die nächste ist Szene acht Geben wir es ein und fügen hier den Hintergrund mit Farbverlauf hinzu. Davon abgesehen glaube ich nicht, dass wir hier irgendwelche Anpassungen vornehmen müssen . Gehen wir zurück zur Master-Komposition und sehen wir uns an, wie das mit der vorherigen Szene aussieht Mir ist gerade aufgefallen, dass die Hintergrundebene die Intro-Animation enthält , die wir für die Szene erstellt haben, aus der wir sie kopiert haben In dieser Szene benötigen wir diese Intro-Animation nicht , also löschen wir sie Wählen Sie die Ebene aus und drücken Sie , um die Keyframes zu sehen. nun Löschen Sie nun zuerst die ersten Keyframes und dann die zweiten Auf diese Weise bleibt die Maske so, wie sie nach den zweiten Keyframes aussieht, was wir wollen Um ehrlich zu sein, können wir die Maske komplett löschen, aber lassen wir sie vorerst stehen und kehren dann zu den restlichen Szenen mit dieser Verlaufshintergrundebene zurück , um auch dort die Intro-Animation zu löschen In dieser Szene benötigen wir die Intro-Animation, also lassen wir sie so, wie sie ist Hier sieht alles okay aus. Auch hier sieht alles gut aus. Die erste Szene sieht auch okay aus. In Ordnung. Sobald das erledigt ist, gehen wir zu Szene neun und fügen einen Hintergrund mit Farbverlauf hinzu. Und da diese Szene der ersten Szene ähnlich sieht, gehen wir zur ersten Szene und kopieren den dort vorhandenen Verlaufshintergrund. Okay, zurück in Szene neun, lassen Sie uns die Ebene hier einfügen und die Skala auf 100 setzen Dann richten wir es an der Mitte der Komposition aus und bringen es unter alle Ebenen Großartig. Und jetzt gehen wir zurück zur Master-Komposition und sehen , wie das mit der vorherigen Szene aussieht Wie Sie sehen können, haben wir hier eine seltsame Situation mit den Verlaufshintergründen Ich wollte dir diese Situation zeigen damit du weißt, wie du damit umgehen musst. Die Szenen acht und neun sind im Grunde eine zusammenhängende Szene. Das liegt daran, dass wir beschlossen haben, kein Match dazwischen abzuschneiden. Wir schwenken regelmäßig zur linken Kamerabewegung. Um dieses Problem zu beheben, müssen wir nur die Hintergrundebenen aus beiden Szenen löschen und eine davon in die Masterkomposition unter diesen beiden Szenen einfügen die Masterkomposition unter diesen beiden Jetzt können wir also zuerst Szene neun aufrufen und die Hintergrundebene von hier aus ausschneiden Danach gehen wir zu Szene acht und löschen die Hintergrundebene von dort. Sobald wir fertig sind, gehen wir zur Master-Komposition und fügen die Hintergrundebene hier Lassen Sie uns als Nächstes am Anfang von Szene acht stehen und den Hintergrund mit Farbverlauf von hier aus starten Lassen Sie uns abschließend die Ebene unter den beiden Szenen platzieren und sehen, wie das aussieht? Ordnung. Das sieht toll aus Aber mir ist aufgefallen, dass dieser Hintergrund in der letzten Szene nicht gut aussieht. Das passiert, weil wir den Glüheffekt auf dem Button Precomp haben den Glüheffekt auf dem Button Precomp Normalerweise sehen leuchtende Objekte auf dunkleren Hintergründen besser aus. In unserem Fall ist es daher eine gute Idee, unsere Version des dunklen Hintergrunds, den wir für die zweite und dritte Szene erstellt haben, hierher zu bringen des dunklen Hintergrunds, den wir für die zweite und dritte Szene erstellt haben . Also lass uns das jetzt machen. Gehen wir zur zweiten Szene und kopieren den Hintergrund von dort. Zurück in der letzten Szene fügen wir die Ebene ein und platzieren sie unter allen Ebenen. Wie Sie sehen können, sieht das schon viel besser aus. Lassen Sie uns die Hintergrundebene erweitern, und wir können diese Precomps auch schließen Großartig. Und jetzt gehen wir zurück zum Master Comp und sehen, wie das aussieht Okay, ich finde es sieht toll aus. Und damit sind wir mit der Anpassung des Aussehens und des Designs der Szenen fertig. Schauen wir uns nun die Animation von Anfang an an, um zu sehen, ob wir etwas verpasst haben. ein großes Team über mehrere Projekte hinweg zu verwalten ist nicht einfach, ein großes Team über mehrere Projekte hinweg zu verwalten. Zu viele Aufgaben, zu viele Nachrichten und bevor Sie es wissen, ertrinken Sie im Chaos und suchen nach Hilfe. Lernen Sie One Point Die Plattform, die Projektmanagement so einfach macht, es sogar Ihre Katze kann. Mit einem Punkt erhalten Sie einen kristallklaren Überblick über alles, einen kristallklaren Überblick über woran Ihr Team arbeitet, all Ihre Projekte, all Ihre Aufgaben, alles an einem Ort. Brauchen Sie das vollständige Bild. Jedes Projekt umfasst detaillierte Aufgaben, Unteraufgaben und eine Fortschrittsverfolgung in Echtzeit. So rutscht nichts durch die Risse, die Risse, die Risse Oh. Willst du sehen, wer ins Hintertreffen gerät? Einfach. Tippen Sie zu Ihrem Team auf Jedermanns Aktivitäten auf einen Blick. Ja, wie immer haben wir etwas verpasst. In unserem Fall müssen wir in Szene sechs einen Hintergrund mit Farbverlauf hinzufügen . Also lass uns das ganz schnell machen. Gehen wir zu Szene fünf, um den Hintergrund von dort zu kopieren. Großartig. Und jetzt suchen wir Szene sechs und geben sie ein, um die Ebene einzufügen. Hier ist sie. Gehen wir nun in die Szene und fügen den Hintergrund mit Farbverlauf hier ein. Und gehen wir zurück zur Master-Komposition, um die Animation weiter zu überprüfen Ich muss mit jemandem Kontakt aufnehmen. Wechseln Sie in das integrierte Messaging-System , in dem alle Ihre Konversationen nach Kontakten organisiert sind. Senden Sie eine kurze Erinnerung oder teilen Sie sofort ein Update. Und ja, das Teilen von Dateien ist mühelos. In diesem Moment habe ich festgestellt, dass der Cursor die Szene zu früh verlässt Es ruiniert den Match-Cut-Übergang. Gehen wir also zu Szene 7 und lassen den Cursor etwas länger stehen, bevor wir die Szene verlassen Lassen Sie uns zunächst die Keyframes des UI-Bildschirms vor der Erstellung und die Keyframes des Cursors öffnen UI-Bildschirms vor der Erstellung und Keyframes des Cursors damit wir sie zeitlich aufeinander abstimmen können Zeitpunkt verlässt der Cursor Ab diesem Zeitpunkt verlässt der Cursor die Szene. Gehen wir zu, sagen wir, Sekunde Neun und bringen Gehen wir nun eine Sekunde vorwärts und bringen das letzte Keyframe hierher Fantastisch. Jetzt entspricht es dem Äußeren des UI-Bildschirms, und als letztes müssen wir sicherstellen , dass die Geschwindigkeit für die Cursoranimation nicht geändert wird für die Cursoranimation nicht geändert Ich sehe, dass es sich geändert hat. In diesem Fall sollten wir sicherstellen, dass die Geschwindigkeit der Cursor-Outtro-Animation auf 95% eingestellt ist die Geschwindigkeit der Cursor-Outtro-Animation auf , um diese extreme Schnappbewegung zu erzielen Mal sehen, wie das aussieht. Ordnung. Ich denke, es sollte funktionieren Gehen wir jetzt zurück zum Master-Computer und überprüfen den Übergang Oder teilen Sie sofort ein Update. Und ja, das Teilen von Dateien ist mühelos. Laden Sie ein beliebiges Dokument hoch, und Ihr gesamtes Team hat sofort Zugriff darauf Warum also weiter kämpfen? Gehen Sie zu OnePoint.com und erleichtern Sie sich Ihren Arbeitstag ab Sieht nett aus, aber jetzt merke ich, dass der Cursor in der letzten Szene zu tief positioniert ist , wenn er auf die Taste drückt Ich denke, wir sollten es diesem Moment ein wenig ansprechen. Lassen Sie uns also die letzte Szene aufrufen und dann die Keyframes auf dem Cursor vor der Kompilation öffnen Lassen Sie uns nun an der letzten Position der Keyframes stehen und die Cursorposition zu diesem Zeitpunkt anpassen . Bring es ein bisschen Wir können es in der Mitte des Knopfes platzieren. Mal sehen, wie das aussieht. Fantastisch. Ich finde, es sieht jetzt viel besser aus. Großartig. Und damit können wir jetzt zur Master-Komposition zurückkehren und das Projekt speichern, bevor wir mit dem nächsten Schritt fortfahren Dieses Mal möchte ich, dass wir das Aussehen der herausnehmbaren Panels im Projekt verbessern der herausnehmbaren Panels im Projekt . Lass mich dir zeigen, was ich meine Lassen Sie uns zunächst mit dem Popup-Panel in Szene acht beginnen . Sobald wir hier sind, suchen wir das Popup-Panel, Vorkomposition und fügen einen Schlagschatteneffekt hinzu Stellen Sie nun die Opazität auf 100 und dann den Abstand auf fünf ein. Als Nächstes setzen wir die Weichheit auf eine höhere Zahl. Ich finde, 80 sieht gut aus. Ich denke, wir sollten die Entfernung auf Null setzen. Großartig. Und jetzt, damit dieser Schatten besser zum Design passt, können wir die lila Farbe Wenn sie zu hell aussieht, können wir das Farbpanel aufrufen und eine etwas dunklere Farbe wählen. Das ist ein netter Trick, den ich immer verwende, um meine Schatten in Projekten besser aussehen zu lassen. In Ordnung. Und jetzt, falls Sie viele Panels haben , auf die Sie diesen Schatten anwenden müssen, sollten Sie ihn mit der Funktion „ Mit relativen Links kopieren “ kopieren. In unserem Fall kopieren wir ihn auf normale Weise, da wir im Projekt nur ein weiteres Popup-Panel haben , auf das wir diesen Effekt anwenden können. Kopieren wir den Effekt und gehen dann zur Master-Komposition, um diese Szene zu finden Hier ist es seit Szene fünf. Lassen Sie uns es rendern und dann den UI-Bildschirm vor der Kompilierung aufrufen und den Effekt einfügen. Sieht toll aus Fantastisch. Damit haben wir die erste Runde abgeschlossen, in der wir dem Projekt den letzten Schliff gegeben haben, und wir können noch weiter gehen und weitere Feinschliffe hinzufügen , damit das Projekt noch besser aussieht. Und wir können damit beginnen, sicherzustellen, dass alle Szenen hier in der Master-Komposition in ihrer besten Qualität sichtbar Dazu müssen wir die Vorkompositionen, die wir in der Timeline haben, zusammenklappen Wie Sie sich vielleicht erinnern, haben wir die erste Szene vor der Bearbeitung bereits ausgeblendet Gehen wir nun zur zweiten Szene über. Und bevor wir die Precomps zusammenklappen, können wir zuerst die Szene aufrufen und überprüfen, ob die Ebenen in den Precomps darin In diesem Fall haben wir alles richtig gemacht. Gehen wir also zurück zum Master-Comp und reduzieren den Scene Precomp. Großartig Gehen wir nun langsam in der Timeline vor, um zu sehen, dass die Collapse-Funktion nichts an der Animation oder dem Aussehen dieser Szene verändert hat. Alles sieht toll aus. Und jetzt gehen wir zu Szene drei über. Schauen wir uns die Animation genau an, um zu sehen, ob es irgendwelche Änderungen gibt. Sieht toll aus. Gehen wir jetzt zu Szene vier über. Wie Sie vielleicht bemerkt haben, stellen wir nach dem Zusammenklappen dieser Precomp einige geringfügige Änderungen fest, insbesondere Das liegt daran, dass wir innerhalb dieser Szene eine Kameraebene haben, die wir in der Master-Komposition außerhalb dieser Szene, Precomp, nicht haben in der Master-Komposition außerhalb dieser Szene, Precomp Sobald wir diese Vorkomposition zusammengeklappt haben, verhält sich After Effects nun so, als ob sich alle drei D-Ebenen innerhalb dieser Komposition in der Master-Comp-Timeline befinden würden Die Kamera im Inneren wird jedoch ignoriert, da es jetzt die Standardkamera verwendet, die automatisch in After Effects erstellt wurde , wenn eine Szene In unserem Fall sind es die drei D-Ebenen innerhalb der Szene, drei Precomp Und da chronologisch gesehen die Master-Komposition die erste in der Reihe ist, verwendet After Effects die Kamera der ersten Komposition in der In unserem Fall ist es die Hauptkomposition und nicht die Kamera innerhalb der dritten Szene So funktioniert After Effects. In solchen Situationen, in denen Sie drei D-Ebenen und Kameras am Projekt beteiligt haben, ist es also denen Sie drei D-Ebenen und Kameras am Projekt beteiligt haben besser, diese spezielle Vorkomposition nicht zu reduzieren Es ist völlig in Ordnung. Sie werden Ihre Szene trotzdem in der besten Qualität bekommen. Nachdem das geklärt ist, fahren wir mit dem nächsten Precomp fort. Okay, wir können die Vorkompositionen der Titelanimation definitiv reduzieren, da sich darin keine Animationen oder Kameras mit drei D-Layern befinden . Lassen Sie uns nun mit Szene fünf fortfahren. Wir können diese Vorkomposition auch ohne Bedenken zusammenklappen , da es in dieser Szene keine drei D-Ebenen oder Kameras gibt Aber wir sollten die Szene aufrufen, um zu überprüfen, ob auch alle Precomps und Ebenen darin zusammengeklappt sind Ich sehe, dass wir es verpasst haben, den Cursor zusammenzuklappen. Lassen Sie uns das ganz schnell machen und dann zur Master-Komposition zurückkehren und überprüfen, wie diese Szene nach dem Zusammenklappen aussieht. Ähm, sieht okay aus. Wir können jetzt weitermachen und diesen Titel Animation Precomp reduzieren Ordnung. Und jetzt lasst uns die nächste Szene zusammenbrechen. In diesem Fall haben wir, selbst wenn wir die drei D-Ebenen haben, Animation in der Szene stattfindet, immer noch alles richtig gemacht, ohne dass es zu Kameraverzerrungen kommt Und das liegt daran, dass die Drei-D-Szenenanimation nicht direkt in dieser Vorkomposition der Szene stattfindet Es passiert im Precomp des UI-Bildschirms. Wenn wir also diesen Precomp zusammenklappen, sehen wir Und das genau aus den gleichen Gründen, die ich zuvor erklärt habe Szene 5 werden nun die drei D-Ebenen in der Vorkomposition des UI-Bildschirms angezeigt, es wird jedoch die Standardkamera dieser Szenen-Timeline verwendet Sie ignoriert die Kamera, die wir im Precomp des UI-Bildschirms haben im Precomp des UI-Bildschirms Lassen Sie uns diesen Precomp hier also nicht zusammenbrechen. Warum wird nichts passieren, wenn wir die Szene fünf vor der Kompilation in der Timeline zusammenklappen nichts passieren, wenn wir die Szene fünf vor der Kompilation in der Timeline Die Master-Comp-Timeline sieht die Kamera nicht , die sich in der Timeline des UI-Bildschirms befindet Ich mache weiter, ohne es zusammenzuklappen. Lass uns weitermachen. Wir können diese Titelanimationsszene einklappen. Alles klar? Lassen Sie uns jetzt mit Szene sieben weitermachen. Lassen Sie uns an dem Punkt stehen, an dem wir die Auflösungsanimation sehen können und dann diese Vorkomposition zusammenklappen, um zu sehen, ob sie irgendwelche Änderungen vornimmt. Alles sieht gut aus Aber bevor wir weitermachen, gehen wir in die Szene und stellen sicher, dass alle Vorkompositionen und Ebenen hier zusammengeklappt sind. Okay, gehen wir jetzt zurück zur Master-Komposition und überprüfen den Rest der Animation sorgfältig . Sieht nett aus Beschäftigen wir uns jetzt mit Szene acht. Lassen Sie uns sie zusammenklappen und uns den Rest der Animation hier genau ansehen den Rest der Animation hier , um zu sehen, ob nach dem Zusammenklappen unnötige Änderungen auftreten Alles sieht völlig in Ordnung aus. Wir können jetzt damit fortfahren, die nächste Szene zusammenzubrechen. Lassen Sie uns Szene neun zusammenklappen und sehen, wie das aussieht. Sieht okay aus, und wir können jetzt damit fortfahren, die letzte Szene zusammenzuklappen und zu sehen, wie sie aussieht. Fantastisch. Alles sieht völlig in Ordnung aus. Sobald wir fertig sind alle relevanten Szenen zusammengeklappt haben, wir einige kleine Änderungen vor und fügen einige letzte Details hinzu, damit das Projekt besser aussieht Und wir können mit der Skalierung des Hintergrunds in der endgültigen Szene beginnen der Skalierung des Hintergrunds in der endgültigen Szene Mir gefällt die helle Farbe im unteren Teil nicht. Lassen Sie uns also die Szene aufrufen und die Hintergrundebene hier vergrößern. Versuchen wir es mit 120. Ich denke, es sieht jetzt besser aus. Lass uns zum Master Comp gehen und sehen, wie das aussieht. Sieht sehr gut Speichern wir das Projekt, bevor wir weitermachen. Okay, jetzt, an diesem Punkt im Projekt, liebe ich es normalerweise alle Szenen noch einmal nacheinander durchzugehen und mir Dinge auszudenken, die ich hinzufügen oder verbessern kann. Zum Beispiel finde ich hier in Szene drei, dass der Hintergrund nicht gut aussieht. Geben wir diese Vorkomposition ein und versuchen zunächst den Hintergrund um 180 Grad zu drehen, sodass der helle Bereich oben Auf diese Weise erhalten wir ein einheitlicheres Bild von der vorherigen Szene Das war ein Beispiel für eine kleine Anpassung, die wir vornehmen können, um die Animation ein bisschen besser aussehen zu lassen. Aber es gibt auch andere Dinge , die etwas schwerwiegender sind und die wir tun können, damit die Animation besser aussieht. Zum Beispiel hier in der zweiten Szene fühlt sich diese gesamte Sequenz meiner Meinung nach sehr statisch an. Wir können diese Szene leicht verbessern, indem eine Zoom-In- oder Zoom-Out-Animation hinzufügen. Lass mich dir zeigen, was ich meine. Lassen Sie uns am Anfang dieser Szene stehen und die Skalierungseigenschaft öffnen. Erstellen Sie jetzt hier einen Keyframe. Lassen Sie uns jetzt die Position öffnen und dasselbe tun. Jetzt drücken wir Sie, um alle Keyframes zu sehen und zu dem Zeitpunkt zu gehen, an dem der Cursor das Aufgabenfeld berührt Dann skalieren wir diese Precomp und In der Animation sieht es also aus wie eine Zoom-Animation. Großartig. Sobald das erledigt ist, erstellen wir nun eine Zoom-Out-Animation in dem Moment , in dem der Cursor in der Luft schwebt Um genau zu wissen, wann das passiert, können wir die Szene aufrufen und die Cursor-Keyframes öffnen Jetzt können wir den Moment finden, in dem der Mauszeiger schwebt und während wir hier stehen, gehen wir zurück zur Masterkomposition und passen die Skalierung und die Position der Keyframes an, um die 26. Letzter Schliff, Musik und Textanimationen: Zurück. Nachdem wir uns mit den meisten Anpassungen an der Animation und dem Design der Szenen befasst haben, ist es an der Zeit, den letzten Schliff zu machen und dem Projekt den letzten Schliff zu geben, wie das Animieren der Textebenen und der Szenen, das Hinzufügen von Musik und das Verbessern des Aussehens einiger Szenen mithilfe zusätzlicher Designelemente. Meiner Meinung nach ist das der Zeitpunkt, an dem das Projekt zu 95% abgeschlossen ist, der unterhaltsamste Zeitpunkt, und jetzt haben wir Spaß daran, den letzten Feinschliff zu machen Nachdem das geklärt ist, wollen wir uns zunächst mit allen Textebenen befassen, die wir in den Animationsszenen des Demoflows haben, beginnend mit Szene vier. Lassen Sie uns also die Szene betreten. Suchen Sie als Erstes die Textebene, die wir animieren müssen Sobald wir sie gefunden haben, sparen wir jetzt etwas Zeit, indem die Textanimation kopieren, die wir für die Textebene in der ersten Szene erstellt haben Wie Sie sehen können, haben wir hier eine nette Enthüllungstextanimation, die wir erstellt haben, und das haben wir mit einem Animator gemacht. Öffnen wir also die Ebene und wählen diesen Animator aus, Öffnen wir also die Ebene um ihn zu kopieren Großartig. Sobald das erledigt ist, gehen wir zurück zu Szene vier und fügen sie in die Textebene ein, die wir hier haben. Stellen Sie sich zuerst an den Anfang dieser Ebene und fügen Sie dann den Animator Auf diese Weise beginnt die Animation dieses Animators am Anfang der Textebene Ordnung. Und jetzt öffnen wir den Animator und passen den Wert der Positionseigenschaft an, den wir in der Bereichsauswahl haben Lassen Sie uns ihn auf 80 setzen. Fantastisch. Und jetzt lasst uns irgendwo nach der Animation und eine neue Maske für diese Textebene erstellen. Nett. Jetzt haben wir also die Enthüllungstextanimation für diese Textebene erstellt. Lassen Sie uns nun die Keyframes öffnen und sicherstellen, dass die Animation in Sekunde zehn endet Und jetzt müssen wir eine Outro-Animation für diesen Text erstellen Outro-Animation für diesen Um es einfach zu machen, stehen wir bei Sekunde 11 und verwenden die Eigenschaft Position, um diese Ebene von oben aus dem Bild herauszuholen diese Ebene von oben aus dem Bild herauszuholen Lassen Sie uns nun die Keyframes lockern und dafür sorgen die Animation langsam bewegt und gegen Ende an Geschwindigkeit gewinnt Fantastisch. Und jetzt können wir uns mit der zweiten Textebene befassen, die wir in der Szene haben. Dazu können wir jetzt den Animator, den wir auf der ersten Textebene haben, kopieren auf der ersten Textebene haben und in die zweite einfügen Lassen Sie uns als Nächstes hier stehen und eine neue Maske erstellen. Sobald wir fertig sind, wollen wir jetzt einen guten Zeitpunkt finden, an dem wir die Outtro-Animation für diese Textebene erstellen können Ich denke, wir können es ab Sekunde 16 starten, und das liegt daran, dass die Kamera-Outtro-Animation aus beginnt Wir können die Outtro-Animation des Textes damit abgleichen. Lassen Sie uns hier also die Keyframes für die erste Position für die zweite Textebene erstellen hier also die Keyframes für die erste Position für die zweite Textebene und dann zu Sekunde 17 übergehen und sie von oben aus dem Frame herausholen Lassen Sie uns abschließend die Bewegung anpassen. Und bevor wir weitermachen, schauen wir uns die Animation an, die wir erstellt haben. Um uns das Leben zu erleichtern, isolieren wir nur die beiden Textebenen und überprüfen die Animation. Fantastisch. Ich finde, das sieht toll aus, und jetzt können wir das Projekt speichern und uns mit der nächsten Szene , der fünften Szene, befassen . Lassen Sie uns Szene fünf hier vor Szene sechs bringen und jetzt am Anfang der Textebene stehen und den Animator einfügen Lassen Sie uns als Nächstes nach Abschluss der Animation eine neue Maske erstellen Und jetzt müssen wir ein Outro erstellen. Wenn die Textebene also bei den zweiten vier und zehn Bildern endet, dann stehe ich bei den zweiten drei und zehn Bildern und erstelle hier den Keyframe an der ersten Position Gehen wir nun zum Ende der Ebene und holen die Textebene diesmal von unten aus der Szene heraus diesmal von unten aus der Szene Lassen Sie uns nun die Bewegung anpassen und sehen, wie das aussieht. Ich denke, diesmal sollte die Bewegung schnell beginnen. Passen wir also die Geschwindigkeit der Keyframes an. Fantastisch. Das ist besser. Und jetzt wollen wir uns mit der zweiten Textebene befassen , die wir hier haben. Da die Outtro-Animation der Szene dieses Mal ab Sekunde acht erfolgt, starten wir die Outtro-Animation der zweiten Textebene ebenfalls von hier aus , um sie zusammenzufügen Okay, das sieht gut aus und wir sind bereit, mit Szene sechs fortzufahren Lass uns zuerst den Animator hinter uns lassen. Lassen Sie uns nun hier stehen und die Tastenkombination Shift in verwenden , um die Maske zu erstellen Ich denke, der UI-Bildschirm ist zu nah am Text. Lassen Sie uns versuchen, das zu beheben. Dazu müssen wir die Kontakte precomp eingeben, und jetzt können wir entweder die Nullanimation oder die Kameraanimation anpassen Fangen wir mit der Kamera an. Zunächst müssen wir uns an der entscheidenden Stelle des problematischen Moments befinden, das gerade da ist. Lassen Sie uns nun die Kamera ein wenig nach hinten bewegen. Ich denke, wir können es noch weiter bewegen. Lassen Sie uns es auch ein wenig nach unten verschieben. Okay, jetzt, wo wir hier stehen, gehen wir zurück zur Hauptszene und beginnen von diesem Zeitpunkt an, die Outtro-Animation für den Text zu erstellen von diesem Zeitpunkt an, die Outtro-Animation für den Text um sie mit der Outtro-Animation der Kamera abzugleichen Lassen Sie uns abschließend die Bewegung anpassen und sehen, wie das aussieht. Großartig. Speichern wir jetzt das Projekt und fahren wir mit Szene sieben fort. Hier können wir etwas Interessantes für die erste Textebene tun. Da der UI-Bildschirm den gesamten Frame abdeckt, können wir im Ebenenfenster die Textebene darunter platzieren und auf diese Weise eine aufschlussreiche Animation für diesen Text erstellen Beginn der Szene eine aufschlussreiche Animation für diesen Text erstellen. Wie Sie sehen können, sieht das sehr gut aus. In Ordnung. Und jetzt erstellen wir eine Outtro-Animation für diesen Text. Wir können hier den Keyframe für die erste Position erstellen, dann 1 Sekunde rückwärts gehen und den gleichen Keyframe auch hier erstellen Jetzt können wir zum zweiten Keyframe zurückkehren und den Text von oben aus dem Frame herausbewegen Passen wir nun die Bewegung an und fahren dann der nächsten Textebene Für diesen müssen wir die Intro-Animation erstellen, die wir für die restlichen Textebenen im Projekt erstellt haben Textebenen im Projekt Also lass uns das ganz schnell machen. Ordnung. Und jetzt zum Otro, wir müssen nichts tun, da der UI-Bildschirm diese Textebene abdeckt Jetzt müssen wir uns nur mit der letzten Textebene befassen Lassen Sie uns also zunächst die Enthüllungsanimation für das Intro erstellen Enthüllungsanimation für das Intro Sobald wir fertig sind, erstellen wir nun das Outro. Das sollte ab Sekunde neun beginnen. Lassen Sie uns die Textebene erweitern bevor wir die Position für das Outro animieren Okay. Und jetzt erstellen wir die Otro-Animation für Fantastisch. Gehen wir nun zu Szene acht über und sehen, ob es hier eine Textebene gibt , die wir animieren müssen Wie Sie sehen können, haben wir hier keine Textebenen. Gehen wir also zu Szene neun, um zu überprüfen, ob dort welche vorhanden sind . Hier ist nichts. Gehen wir zur letzten Szene, um sicherzustellen, dass sich dort auch keine Textebene befindet. Ordnung. Damit sind wir mit der Erstellung der Textanimation für die Szenen fertig und können das Projekt jetzt speichern, um den Fortschritt zu sichern, den wir gemacht haben Und jetzt, an diesem Punkt des Prozesses, liebe ich es normalerweise, meine Szenen noch einmal zu überprüfen und zu sehen, ob ich noch weitere Anpassungen vornehmen kann, sei es bei der Animation oder beim Design der Szenen, zum Beispiel in Szene fünf Mir ist aufgefallen, dass die Pop-Out-Animation etwas länger dauern kann Ich möchte, dass es kurz vor dem Start des Outtro der Textebene endet des Outtro der Textebene Das liegt daran, dass ich versuche, meine Szenen immer in Bewegung aussehen zu lassen Szenen immer in Bewegung aussehen Versuche, so wenig statische Momente wie möglich zu erzeugen. Das ist das Geheimnis einer guten Motion-Design-Animation. das geklärt ist, geben wir die Aufgaben vor der Erstellung ein und öffnen nun alle Keyframes der Aufgabenfelder Kommen wir nun zu Sekunde fünf. Wählen Sie dann alle Keyframes aus. Halten Sie anschließend die Alt- oder Wahltaste gedrückt und verschieben Sie die letzten Keyframes Großartig. Und jetzt gehen wir zurück zur Hauptszene und sehen, wie das aussieht. Ups, das ist die falsche Szene. Wir brauchen Szene fünf. Okay, schauen wir uns an, wie die Animation jetzt aussieht. Meiner Meinung nach fühlt sich der Antrag nach dieser kleinen Änderung viel besser an. Nachdem das erledigt ist, lassen Sie uns nun zu Szene vier übergehen und erneut prüfen, was wir hier verbessern oder hinzufügen können In dieser Szene würde ich gerne den Tiefenschärfeeffekt erhöhen, den wir hier erzeugt haben Bleiben wir bei diesen Keyframes und skalieren den Grad der Unschärfe auf einen höheren Wert. Das ist zu viel. Ehrlich gesagt gefällt mir nicht, wie das aussieht. Bringen wir es zurück auf 300. Lassen Sie uns vielleicht versuchen, den Grad der Unschärfe für den letzten Animationsteil dieser Szene zu erhöhen den letzten Animationsteil dieser , in dem wir die Aufgaben sehen Versuchen wir es auch hier mit 300. 300 sehen besser aus, aber ich denke immer noch, dass es zu viel ist. Versuchen wir es mit 200. Ja, 200 sieht perfekt aus. Ich zeige Ihnen diesen Prozess, damit Sie sich auch daran gewöhnen können einige letzte Anpassungen in Ihren Projekten vorzunehmen, bevor Sie die Animation rendern. Ich liebe es, das zu tun, weil wir immer etwas tun können , um die Animation ein bisschen weiter zu verbessern. Deshalb ist die Phase des letzten Feinschliffs meine Lieblingsphase. In Ordnung. das geklärt ist, lassen Sie uns jetzt weitermachen und diesmal versuchen, Szene drei zu verbessern. Lass uns sehen, was wir hier haben. Ordnung. Ich denke, das erste , was ich hier gerne tun würde, ist, die Tippanimation etwas länger dauern zu lassen Lassen Sie uns an zweiter Stelle stehen und den letzten Keyframe hierher bringen Lassen Sie uns nun diese Gelegenheit nutzen und zu Szene 7 übergehen, wo wir eine weitere Animation mit Texteingabe haben und diese Animation auch hier länger dauern lassen diese Animation auch hier länger dauern Öffnen wir zunächst die Keyframes auf dieser Ebene. Und jetzt stehen wir bei den zweiten sieben und zehn Bildern und verschieben den letzten Keyframe hierher Fantastisch. Und jetzt, wenn das erledigt ist, gehen wir jetzt zu Szene zwei und schauen, was wir dort tun können , um die Bewegung oder das Design dieser Szene zu verbessern . Okay, da das Hauptziel in dieser Szene darin besteht, das Chaos zu zeigen, das entsteht, wenn viele Nachrichten und Aufgaben erledigt werden müssen, kann es eine gute Idee sein, zusätzliche Aufgabenfelder und Nachrichtenblasen hinzuzufügen , um dem Konzept dieser Szene zu entsprechen . Und das werden wir bald tun Vorher würde ich gerne die Hintergrundfarbe dieser Szene nicht dunkel machen . Ich möchte, dass die dunkle Farbe für Szene drei ist, damit sie wie eine Art Tiefsee aussieht. Denn in diesem Moment sagt der Sprecher: Du ertrinkst im Chaos Okay, nachdem das geklärt ist, lassen Sie uns zuerst die Kurven in den Tonereffekten aus der Hintergrundebene löschen Tonereffekten aus der Hintergrundebene Großartig. Und jetzt fügen wir der Szene zusätzliche Aufgabenfelder und Nachrichtenblasen hinzu. Aber anstatt sie hier zu duplizieren, möchte ich Ihnen eine andere Methode zeigen, die für uns in diesem Projekt etwas nützlicher sein könnte für uns in diesem Projekt etwas nützlicher sein Auf diese Weise können Sie einen neuen Trick lernen und ihn auf Ihre Projekte anwenden, wenn Sie möchten Ordnung. Drücken Sie also zuerst die Tastenkombination oder Befehlsende, um eine neue Komposition zu erstellen Nennen wir es zwei BG. Weil es Szene zwei ist und dann BG am Ende hinzugefügt wird, da es Teil des Hintergrunds dieser Szene sein wird. nun sicher, dass die Abmessungen in Ordnung sind , und stellen Sie dann die Dauer auf 2 Minuten ein. Ordnung. Und jetzt gehen wir zurück zu Szene zwei und wählen die Aufgaben und die Nachrichten aus, die wir hier haben Kopieren Sie sie jetzt und fügen Sie sie in unsere neue Komposition ein. Drücken und löschen Sie als Nächstes alle Keyframes, die wir hier haben. Jetzt werden wir anfangen, sie zu duplizieren, um dieses Chaosgefühl zu erzeugen Vorher müssen wir jedoch sicherstellen , dass wir die neuen Duplikate nicht in diesen Bereichen platzieren Wo in der Hauptszene haben wir diese vier Vorkompositionen Stellen wir dafür sicher, dass keine Ebene ausgewählt ist und erstellen wir ein Rechteck, um den Nachrichtenbereich zu markieren Dann markieren wir auch den Aufgabenbereich. Sobald wir fertig sind, können wir jetzt die Deckkraft der Formebene verringern die Deckkraft der Formebene und sie sperren, damit sie uns nicht stört Weise wissen wir jetzt, dass wir in diesen Bereichen die neuen Duplikate , die wir in einer Sekunde erstellen werden, nicht platzieren sollten in einer Sekunde erstellen werden Also können wir zuerst die aktuellen Vorkompositionen aus diesen Bereichen entfernen und dann beginnen, sie zu duplizieren , um eine chaotische Szene zu erzeugen Ich werde diesen Vorgang ein wenig beschleunigen . Ordnung. Sobald wir damit fertig sind, können wir die Collap-Funktion für alle Pre-Comps deaktivieren, zu verwenden da wir planen, diese Komposition als Teil der Hintergrundebene Wir müssen sie nicht alle in superhoher Qualität haben. Ich mache das, um meine Renderzeit etwas zu beschleunigen. Okay. Und jetzt schalten wir die Führungsebene aus, die wir hier erstellt haben , und erweitern dann die Ebenen , dass sie bis zum Ende der Timeline reichen. Großartig. Und jetzt fügen wir der Szene eine neue Einstellungsebene hinzu und fügen ihr die schnelle Box-Unschärfe hinzu, um diese Komposition verschwommen zu machen Auf diese Weise wird es in der Hauptszene besser aussehen. Bald wirst du verstehen, was ich damit meine. Lassen Sie uns zunächst zur Hauptszenenkomposition zurückkehren und dann die neue Hintergrund-Vorkomposition , die wir gerade erstellt haben, in diese Zeitleiste bringen wir gerade erstellt haben, in diese Platzieren Sie es über der Hintergrundebene mit Farbverlauf. Ich denke, wir sollten die Unschärfe anpassen. Geben wir dazu den Precomp ein und schneiden den Fast-Box-Unschärfeeffekt aus der Wir können die Einstellungsebene hier löschen. Gehen wir nun zurück zur Hauptszene und fügen den Effekt in den Precomp Auf diese Weise wird es für uns einfacher sein, den Effekt zu kontrollieren. Ich wollte dir das zeigen, damit du weißt, dass es manchmal besser ist, einen Effekt auf der Vorkomposition zu verwenden , als Einstellungsebenen zu verwenden Und das war ein gutes Beispiel für diese Situation. Und damit es sich noch besser in die Szene einfügt , können wir für diesen Precomp einen anderen Mischmodus wählen Anstatt manuell den richtigen Mischmodus auszuwählen, können wir die Tastenkombination verwenden, um zwischen den verschiedenen Mischmodi umzuschalten zwischen den verschiedenen Mischmodi umzuschalten Halten Sie die Umschalttaste gedrückt und drücken Sie die Plus- oder Minus-Taste. Ordnung. Nachdem ich alle Mischmodi überprüft habe, denke ich, dass Overlay in unserem Fall am besten aussieht Und wenn wir jetzt zur Master-Komposition zurückkehren, um zu sehen, wie das mit der Kamerabewegung aussieht , die wir hier für diese Szene erzeugt haben, erhalten wir einen supercoolen Wir haben das Chaos, aber die Szene sieht trotzdem sehr ausgewogen und sauber Großartig. Nachdem wir die Grafik im Projekt angepasst haben und alle Animationen perfekt mit dem Voiceover synchronisiert sind , können wir jetzt mit dem nächsten Schritt fortfahren, dem Hinzufügen von Musik zum dem Hinzufügen von Musik Gehen Sie dazu in den Assets-Ordner, den Sie für mich heruntergeladen haben. Und hier findest du die Musik, die ich für dieses Projekt gefunden habe. Ich habe diesen Titel in der YouTube-Audiobibliothek gefunden, die Open Source ist. Das bedeutet, dass 99% der Titel, die Sie dort finden , kostenlos verwendet werden können, ohne dass es Probleme mit Urheberrechten und Lizenzgebühren Sie können sie für kommerzielle Zwecke verwenden. Wenn ich nach einem Titel suche, filtere ich die Liste normalerweise zuerst nach der richtigen Stimmung. In diesem Fall denke ich, dass Funky zum Tempo meiner Animation passt Natürlich ist es eine gute Idee, drei Songs auszuwählen und dem Kunden die Wahl zu geben Wenn ich nach der richtigen Musik suche, versuche ich, einen Titel zu finden, der am Anfang eine Art Aufbauabschnitt hat . Die Musik sollte mit einer Art Intro beginnen , das der Animation mehr Interesse verleiht Zu diesem Zeitpunkt höre ich mir einfach alle Titel an, die ich auf der ersten Seite sehe, und nachdem ich den richtigen gefunden habe, ist es sehr wichtig zu überprüfen, ob er das YouTube-Symbol hat Das bedeutet, dass es für jeden Zweck kostenlos verwendet ohne dass wir Credits für den Schöpfer des Songs hinzufügen Credits für den Schöpfer des Songs Nur dann können Sie es herunterladen, ohne sich Gedanken über Urheberrechtsansprüche In Ordnung, zurück zum Projekt. Ziehen wir den Track jetzt auf unsere Timeline und schauen, ob er zur Stimmung passt Aber vorher gehen wir zum Projektpanel und organisieren es ein wenig Wir können den Track im Assets-Ordner platzieren, und wir können diesen Precomp auch im PreComs-Ordner platzieren und wir können diesen Precomp auch im PreComs-Ordner platzieren. Großartig. Und jetzt lass es uns hören. ein großes Team über mehrere Projekte hinweg zu verwalten ist nicht einfach, ein großes Team über mehrere Projekte hinweg zu verwalten. Zu viele Aufgaben, zu viele Nachrichten. Und bevor du es weißt, ertrinkst du im Chaos. Wie Sie vielleicht bemerkt haben, ist die Lautstärke des Titels zu hoch. Daher müssen wir es an das Voice-Over anpassen. Drücken Sie dazu die Taste. Jetzt können wir die Audiopegel sehen. Stellen wir es auf -25 und hören es uns noch einmal an. hinweg zu verwalten ist nicht einfach, ein großes Team über mehrere Projekte Zu viele Aufgaben, zu viele Nachrichten und bevor Sie es wissen, ertrinken Sie im Chaos, wenn Sie nach Hilfe suchen Einen Punkt erreicht. Die Plattform , die Projektmanagement so einfach macht, es sogar Ihre Katze kann. Mit einem Punkt bekommst du einen Kristallklatsch. Strich. Okay, das ist besser. Aber ich denke, wir können es auf -20 setzen, also wird die Lautstärke des Tracks etwas höher sein. ein großes Team über mehrere Projekte hinweg zu managen ist nicht einfach, ein großes Team über mehrere Projekte hinweg zu managen. Zu viele Aufgaben, zu viele Nachrichten und bevor Sie es wissen, ertrinken Sie im Chaos, wenn Sie nach Hilfe suchen. Einen Punkt erreicht Die Plattform, die Projektmanagement so einfach macht, es sogar Ihre Katze kann. Mit einem Punkt erhalten Sie einen kristallklaren Überblick über alles, was Ihr Team an all Ihren Projekten arbeitet. G. Großartig. Das ist perfekt. das erledigt ist, schließen wir nun alle Vorkompositionen, die wir hier haben, und gehen gleich danach zum Projektfenster, um sie vor dem Rendern zu organisieren Das Organisieren ist sehr wichtig, nicht nur für Sie, sondern auch für eine Person, die möglicherweise mit Ihnen an diesem Projekt arbeitet Vielleicht arbeitest du mit einem anderen Freelancer oder vielleicht arbeitest du in einer Firma mit einem anderen Kollegen In jedem Fall werden Sie mit einem gut organisierten Projekt in einem sehr guten professionellen Licht erscheinen Nachdem das geklärt ist, öffnen wir den Precomp-Ordner und beginnen, ihn zuerst zu organisieren Mal sehen, was wir im Bildschirmordner haben. Hier sieht alles gut aus. Mal sehen, was wir im Panels-Ordner haben. Hier würde ich gerne die Namen der Precoms anpassen. Statt S eins ändern wir es auf Bildschirm eins. Und das liegt daran, dass mir aufgefallen ist, dass alle anderen Panels Precomps mit dem vollständigen Namen des Bildschirms beginnen mit dem vollständigen Namen des Bildschirms Großartig. Und jetzt machen wir dasselbe für den Rest der Precoms hier. fertig sind, gehen wir nun zum Precomps-Ordner und wählen alle Screen Panels und Asset Precomps aus, die wir erstellt haben, um sie in den Panels-Ordner zu Auf diese Weise haben wir im Precoms-Ordner nur die allgemeinen Precomps, die wir im Projekt verwendet haben Sie können noch weiter gehen und innerhalb des Pre-Cooms-Ordners einen neuen Ordner für die Haupttitel erstellen , aber wir haben nicht viele davon, also werde ich ihn so lassen, werde ich ihn so Fantastisch. Und jetzt öffnen wir den Assets-Ordner und schauen, ob wir hier etwas organisieren können. Ordnung. Ich denke, hier sieht alles gut aus, und jetzt sind wir bereit, das Projekt zu rendern Und um die beste Farbqualität für unsere endgültige Renderdatei zu erzielen , können wir von hier aus die Projekteinstellungen eingeben und die Bittiefe auf 16 oder 32 Bit ändern. Wenn Sie im Projekt Leuchteffekte verwenden, kann sich die Verwendung von 32 Bit auf das Aussehen dieser Szenen auswirken . Achten Sie also darauf. Beachten Sie, dass Ihre Renderzeiten umso langsamer sind, je mehr Bits pro Kanal Sie auswählen , da After Effects jetzt einen größeren Farbbereich rendern muss . Okay. Lassen Sie uns nun die Bewegungsunschärfe-Funktion hier in der Hauptzeitleiste aktivieren die Bewegungsunschärfe-Funktion hier in der Hauptzeitleiste Damit wir die Bewegungsunschärfe bekommen können, aktivieren wir sie im Precom Und jetzt machen wir noch eine letzte Sache bevor wir das Projekt rendern, und zwar das Löschen Auf diese Weise verringern wir das Risiko unerwarteter Softwarefehler beim Rendern Großartig. Nachdem all das erledigt ist, stellen wir nun sicher, dass wir die Master-Komposition im Projektfenster auswählen und dann zur Komposition gehen und diese Timeline zur Render-Warteschlange hinzufügen Lassen Sie uns hier entscheiden, es mit 40 Megabit pro Sekunde zu rendern , weil wir dadurch eine etwas höhere Qualität für die endgültige Datei erhalten höhere Qualität für die Wenn Sie es hier nicht sehen, klicken Sie einfach auf Ausgabemodul und wählen Sie dann unter Format Ht Gehen Sie als Nächstes zu den Formatoptionen und legen Sie die Bitrateneinstellungen wie hier dargestellt Ordnung. Und jetzt wählen wir, wo die Datei gerendert werden soll. Ich werde es im Finalordner rendern. Vergessen Sie nicht, den Namen der Datei anzupassen. Nennen wir es SAS Project Version 01. Fantastisch. Und jetzt drücken wir die Render-Taste und warten ein paar Minuten. Ich werde diesen Prozess beschleunigen. Und jetzt schauen wir uns die Animation ein paar Mal an, um eine klare Vorstellung zu bekommen, ob wir etwas anpassen oder reparieren müssen. ein großes Team über mehrere Projekte hinweg zu verwalten ist nicht einfach, ein großes Team über mehrere Projekte hinweg zu verwalten. ein großes Team über mehrere Projekte hinweg zu verwalten ist nicht einfach, ein großes Team über mehrere Projekte hinweg zu verwalten. Zu viele Aufgaben, zu viele Nachrichten und bevor Sie es wissen, ertrinken Sie im Chaos, wenn Sie nach Hilfe suchen. Lernen Sie One Point Die Plattform, die Projektmanagement so einfach macht, es sogar Ihre Katze kann. Mit One Point erhalten Sie einen kristallklaren Überblick über alles, einen kristallklaren Überblick über woran Ihr Team arbeitet, all Ihre Projekte, all Ihre Aufgaben, alles an einem Ort. Benötigen Sie das vollständige Bild. Jedes Projekt beinhaltet detaillierte Aufgaben, Unteraufgaben und eine Fortschrittsverfolgung in Echtzeit, sodass nichts übersehen wird. sehen möchten, wer ins Hintertreffen gerät, gehen Sie zu Ihrem Team-Tab, um die Aktivitäten aller Beteiligten auf einen Blick zu sehen Sie müssen sich mit jemandem in Verbindung setzen. Wechseln Sie in das integrierte Messaging-System, in dem alle Ihre Konversationen nach Kontakten organisiert sind. Senden Sie eine kurze Erinnerung oder teilen Sie sofort ein Update. Und ja, das Teilen von Dateien ist mühelos. Laden Sie ein beliebiges Dokument hoch, und Ihr gesamtes Team hat sofort Zugriff darauf Warum also weiter kämpfen? Gehen Sie zu onepoint.com und erleichtern Sie sich Ihren Arbeitstag ab heute hinweg zu verwalten nicht einfach, ein großes Team über mehrere Projekte Zu viele Aufgaben, zu viele Nachrichten und bevor Sie es wissen, ertrinken Sie im Chaos, wenn Sie nach Hilfe suchen Du hast einen Punkt getroffen. Die Plattform , die Projektmanagement so einfach macht, es sogar Ihre Katze kann. Mit One Point erhalten Sie einen kristallklaren Überblick über alles, einen kristallklaren Überblick über woran Ihr Team arbeitet, all Ihre Projekte, all Ihre Aufgaben, alles an einem Ort. Benötigen Sie das vollständige Bild. Jedes Projekt beinhaltet detaillierte Aufgaben, Unteraufgaben und eine Fortschrittsverfolgung in Echtzeit, sodass nichts übersehen wird. sehen möchten, wer ins Hintertreffen gerät, gehen Sie zu Ihrem Team-Tab, um die Aktivitäten aller Beteiligten auf einen Blick zu sehen Sie müssen sich mit jemandem in Verbindung setzen. Wechseln Sie in das integrierte Messaging-System , in dem alle Ihre Konversationen nach Kontakten organisiert sind. Senden Sie eine kurze Erinnerung oder teilen Sie sofort ein Update. Und ja, das Teilen von Dateien ist mühelos. Laden Sie ein beliebiges Dokument hoch, und Ihr gesamtes Team hat sofort Zugriff darauf Also, mehrere Projekte sind in Ordnung. Nachdem ich mir die Animation ein paar Mal angesehen habe, möchte ich eine kleine Änderung vornehmen. In der letzten Szene tritt die Intro-Animation des Cursorobjekts von der Mitte aus in die Szene ein, und ich finde, sie sieht nicht gut aus Lassen Sie uns also die Szene aufrufen und dann die Position des Cursors am Anfang der Szene anpassen die Position des Cursors am Anfang der Szene Stellen Sie sicher, dass Sie an der ersten Position der Keyframes stehen und bewegen Sie sie erst dann Verschieben wir es nach rechts. Sie nicht genau auf den Keyframes stehen, können Sie zusätzliche Keyframes erstellen , wie ich es in meinem Fall getan habe Also lösche ich jetzt den ersten Keyframe und platziere den neuen stattdessen dort Mal sehen, wie das aussieht. Okay, ich denke, es sieht jetzt ein bisschen besser aus. Gehen wir jetzt zurück zur Master-Komposition und rufen die dritte Szene auf, da mir auch aufgefallen ist, dass es einen Moment gibt, ist, dass es einen Moment gibt in dem der Cursor komplett stoppt, was mir nicht gefallen Das passiert hier nach der Intro-Animation. Wenn wir den Diagrammeditor aufrufen, werden wir feststellen, dass die Geschwindigkeit zu diesem Zeitpunkt Null ist Lassen Sie uns das also ganz schnell beheben, indem wir diesen Keyframe in einen kontinuierlichen Keyframe umwandeln und diesen Moment dann beschleunigen indem wir diesen Keyframe in einen kontinuierlichen Keyframe umwandeln und diesen Moment dann beschleunigen . Ich denke, es ist jetzt besser. Lass es uns mit dem Rest der Szene sehen. Großartig. Ich finde, es sieht jetzt fantastisch aus. Ordnung. Also, sobald wir mit der Bewegung zufrieden sind, können wir die Master-Komposition noch einmal rendern Aber vorher möchte ich diese Gelegenheit nutzen und Ihnen zeigen, wie Sie realistische Avatar-Profilbilder in das Projekt einfügen können. Da ich keine Zeit damit verschwenden wollte, für all die Szenen, die ein Avatar-Profilbild benötigen, habe ich darauf geachtet, dass mindestens eine Szene nur um Ihnen den Prozess dahinter zu zeigen Sie erinnern sich vielleicht, dass ich während des Vorbereitungsprozesses in Illustrator, als wir Szene sechs vorbereitet haben, festgestellt habe, dass ich in dieser speziellen Szene die Avatar-Profilsymbole als separate Ebenen belassen werde , da wir sie später im Projekt verwenden werden . Ich möchte, dass wir jetzt genau das tun. Jetzt lernen wir, wie man echte Avatar-Profilbilder in das Design des UI-Panels einfügt . Lassen Sie uns den Assets-Ordner öffnen, den Sie für mich heruntergeladen haben , und die PSD-Dateinamenporträts suchen. Jetzt möchte ich dir zeigen, wie sehr ich es liebe, meine Avatare für Animationen vorzubereiten Wichtigste zuerst, ich gehe zur Freepick-Website, weil Sie hier viele nützliche Dinge kostenlos finden können Jetzt suche ich in der Suchleiste nach Dann stelle ich sicher, dass ich nur die kostenlosen Optionen sehe. Und jetzt überprüfe ich , welche Optionen ich hier sehe. Ich werde dann etwas auswählen, das mir gefällt, und gleichzeitig sicherstellen, dass es viele andere Optionen gibt , die dieser ähneln. Das ist wichtig , weil wir ein einheitliches Design haben wollen , schauen Sie in unserem Projekt nach. Ordnung? Also, in diesem Fall liebe ich dieses Bild. Also werde ich es anklicken. Und wenn Sie möchten, können Sie es bereits direkt in der kostenlosen Auswahl für die Animation vorbereiten . Sie können den Hintergrund entfernen oder ein anderes Format wählen. In meinem Fall bevorzuge ich es, sie in einer Datei für die Animation bereit zu haben, da ich weiß, dass ich viele davon benötigen ich werde. Wir können dafür Photoshop verwenden, aber dazu später mehr. Im Moment lade ich einfach weiter die restlichen Avatare herunter In diesem Fall benötige ich insgesamt sieben davon. Also werde ich jetzt zuerst einen neuen Ordner erstellen, in dem ich alle Avatare speichern werde , die ich von hier heruntergeladen habe Ich werde diesen Vorgang vorerst beschleunigen. Ordnung. Sobald ich alle Bilder heruntergeladen habe, öffne ich Photoshop und erstelle ein neues Dokument. Wir können dafür die Voreinstellungen für Kunst und Illustration verwenden , da bereits ein quadratisches Format für uns vorbereitet wurde Der Vorteil, alle Bilder in einer Datei zu haben, besteht darin, dass sie alle dieselbe Größe Das wird uns das Leben in After Effects erleichtern , wenn wir sie verwenden müssen. Bald werden Sie sehen, was ich meine. Okay, jetzt werde ich alle Bilder reinbringen. Und während sie alle ausgewählt sind, drücke ich Strg oder Befehl T, um sie zu vergrößern. Sobald das erledigt ist, werde ich jetzt überprüfen, ob sie alle in der Mitte positioniert sind. Das ist auch einer der Vorteile, wenn Sie sie alle in einer Photoshop-Datei zusammenfassen , denn wenn Sie Bilder mit unterschiedlichen Abmessungen haben, können Sie sie alle so anpassen hier in dieser Datei dieselben Abmessungen haben , indem Sie einige von ihnen skalieren oder sie bei Bedarf von links nach rechts verschieben. Ordnung. Nachdem ich sichergestellt habe, dass alle Bilder ausgerichtet sind, kann ich jetzt die Hintergrundebene löschen und diese Datei in meinem Assets-Ordner speichern. Ich stelle sicher, dass ich es als PSD-Datei speichere und klicke dann auf Speichern. Großartig. Gehen wir jetzt zurück zu unserem Projekt. Ziehen wir zunächst die PSD-Datei in das Projektfenster. Jetzt wählen wir in der Importart Komposition „Ebenengrößen beibehalten“, da alle Ebenen wie im ursprünglichen Photoshop-Dokument getrennt werden müssen . Hier spielt es keine Rolle, was Sie wählen sollen, da wir im ursprünglichen Photoshop-Dokument keine Effekte oder Ebenenstile verwendet haben keine Effekte oder Ebenenstile verwendet . Okay, bevor wir mit der Arbeit beginnen, bringen wir den neuen Ordner, der aus allen Bildern besteht, in den Assets-Ordner. Lassen Sie uns nun die Portrait-Pre Comp auswählen , die automatisch erstellt wurden, nachdem wir die PSD-Datei eingefügt haben , und für eine Sekunde aufhören zu arbeiten, weil ich etwas Wichtiges erwähnen möchte Wie Sie vielleicht bemerkt haben, erhalten wir beim Import einer PSD-Datei in After Effects einer PSD-Datei in After Effects eine Precomp mit den Bildern Und auch einen Ordner mit den Bildern. Jetzt möchte ich erklären, was genau passiert ist, als wir uns entschieden haben, die PSD-Datei als Komposition mit Beibehaltung der Ebenengröße zu importieren . After Effects hat ein Precomp mit den Abmessungen des quadratischen Dokuments erstellt, das wir in Photoshop erstellt haben Die Bilder in diesem Precomp werden jedoch die Größe Das ist es, was „ Ebenengröße beibehalten“ bedeutet. After Effects schneidet die Bilder nicht auf das quadratische Format zu. Wenn Sie also in den Precomp gehen, werden Sie feststellen, dass nicht alle Bilder ein quadratisches Format Sie erscheinen auch auf diese Weise im Ordner der Bilder. Ich wollte dir das zeigen, damit du die wahre Bedeutung von „Ebenengröße beibehalten“ verstehst . In unserem Fall ist das nicht wirklich wichtig, denn selbst wenn wir alle Bilder nicht auf ein quadratisches Format zuschneiden, können wir trotzdem mit ihnen arbeiten, da sie alle mehr oder weniger die gleiche Größe Aber in Projekten, in denen Sie möchten , dass sie alle dieselbe Größe haben, sollten Sie sie nur als Komposition importieren Ordnung. Nachdem wir das gelernt haben, ziehen wir diese Pre Comp in den Precomps-Ordner, um ein sauberes Projekt zu erhalten. Öffnen wir dann den Portraits-Ordner, den wir gerade in den Assets-Ordner gezogen haben, und beginnen, die Bilder zum gezogen haben, und beginnen, die Design des UI-Panels hinzuzufügen Wie Sie sehen können, wird es auf diese Weise einfacher sein , die Avatar-Bilder auszuwählen Okay. Wählen wir nun alle Kontaktvorkompositionen in der Timeline und doppelklicken wir darauf, um sie alle auf einmal zu öffnen Großartig. Und jetzt fangen wir mit Kontakt eins an. Zuallererst müssen wir ein Bild von einem Mann finden, da der Name, den wir hier haben, ein Männername ist. Lass uns diesen benutzen. Ziehen Sie es auf die Timeline und skalieren Sie es dann so, dass es zum Design passt. Ziehen wir es nun in den Avatar-Symbolbereich. Wir können es etwas weiter verkleinern. Großartig. Und jetzt werden wir die Form der Avatar-Symbolebene als Maske für das Bild verwenden, und zwar mit der Funktion Track Matt. Alles, was wir tun müssen, ist dafür zu sorgen, dass das Bild das Alpha der Avatar-Symbolebene verwendet . Und da wir jetzt wissen, dass dieser Precomp im Drei-D-Raum animiert ist, müssen wir das Bild auch in eine Drei-D-Ebene konvertieren das Bild auch in eine Drei-D-Ebene Fantastisch. Jetzt können wir die Ansicht vergrößern und die Position und den Maßstab bei Bedarf weiter anpassen. In Ordnung. Und jetzt, um diesen Vorgang schneller zu wiederholen, kopieren wir die Bildebene, die wir hier haben, gehen dann zum nächsten Kontakt-Precomp und fügen sie Passen wir nun die Position an und lassen Sie uns dann dafür sorgen, dass diese Ebene die Avatar-Symbolebene als Maske verwendet Dann suchen wir uns ein anderes Männerbild und wechseln zwischen ihnen. Während also die Bildebene in der Timeline ausgewählt ist, ziehen wir dieses Bild darüber während wir Alt oder die Wahltaste gedrückt halten. Lassen Sie uns abschließend die Position und den Maßstab bei Bedarf anpassen . Fantastisch. Und jetzt wiederholen wir diesen Vorgang für den nächsten Kontakt vor der Bestellung. Zuerst müssen wir das erste kopierte Bild einfügen und es dann durch das neue ersetzen, wie wir es vor einigen Sekunden getan haben Okay, lassen Sie uns diesen Vorgang für den Rest der Kontaktvorbereitung wiederholen . Ich werde diesen Vorgang vorerst beschleunigen. Stellen Sie nur sicher, dass das Bild zum Alright passt zum . Sobald wir fertig sind, können wir den Controller-Befehl W gedrückt halten , um die Kontaktvorkomposition zu schließen Wie ihr sehen könnt, haben wir jetzt eine coole Szene mit den echten Avatar-Profilbildern Und jetzt weißt du, wie du das in deinen zukünftigen Projekten machen kannst. Lassen Sie uns das Projekt jetzt speichern , um den bisherigen Fortschritt zu sichern. Damit haben wir die Erstellung des gesamten SAS-Erklärvideos abgeschlossen des gesamten SAS-Erklärvideos Wir sind jetzt bereit, die endgültige Version zu rendern. Lassen Sie uns also die Master-Komposition auswählen und sie dann an die Render-Warteschlange senden Lassen Sie uns dieselben Rendereinstellungen beibehalten und die alte Datei durch die neue ersetzen Warten wir nun, bis der Rendervorgang abgeschlossen ist. Sobald Sie fertig sind, haben Sie ein sehr beeindruckendes Projekt, das Sie in Ihrem Portfolio präsentieren und mit Ihren zukünftigen Kunden teilen können. Vor diesem Hintergrund können Sie Illustrator jetzt schließen, wenn es geöffnet ist Wir können auch die Figma-Datei und die PDF-Dateien, die wir für das Projekt verwendet haben, schließen und die PDF-Dateien, die wir für das Projekt verwendet haben Ich hoffe, dir hat dieser Spaß gemacht und du hast viele neue interessante Dinge gelernt Ich möchte, dass Sie sich aus diesem Kurs vor allem daran erinnern , dass die Erstellung eines Motion-Design-Stücks ein schrittweiser Entstehungsprozess ist. Versuche, immer einen Schritt nach dem anderen zu und vertraue dem Prozess. Vielen Dank fürs Zuschauen. Wir sehen uns im nächsten.