Einfache Figma-Animationen, um sich in den sozialen Medien abzuheben

1. Einführung in die Kurse: Wir alle wissen, dass Inhalt König ist. In der heutigen Zeit werden die Leute mit Tonnen von Bildern bombardiert, zum Beispiel auf Instagram Also müssen wir ihre Aufmerksamkeit erregen. Wir brauchen etwas, das das Scrollen stoppt und sie bei der Stange hält. Hier kommen Animationen und Videos ins Spiel. Wie lernt man es? Nun, mein Name ist Aga und ich bin Designerin, und ich werde Ihnen zeigen , dass es nicht so schwierig ist, wie Sie dachten. In diesen Kursen werde ich Sie Schritt für Schritt durch den gesamten Prozess führen, sodass Sie ihn mit mindestens drei fertigen Animationen abschließen mindestens drei fertigen , die Sie auf Ihrer Instagram-Plattform als Instagram-Story oder sogar als animierter Instagram-Post veröffentlichen können auf Ihrer Instagram-Plattform als Instagram-Story oder sogar als . Und die gute Nachricht ist , dass Sie sich nicht mit After Effects oder anderem herumschlagen müssen mit After Effects oder , was Designkenntnisse erfordert . Mit Smart Animate in Figma können wir sehr schnell interessante Ideen für unsere Animationen prototypisieren, und dann können wir sie aufnehmen und die Datei bereit haben, um sie zu veröffentlichen, was auch immer Sie Bist du also bereit, deine Reise mit Animationen zu beginnen ? Lass uns anfangen. 2. Kursprojekt: Was ist das Klassenprojekt? Nun, du musst für das Klassenprojekt mindestens eine der Animationen einreichen , die wir während des Kurses machen werden. Wenn du experimentieren möchtest, wenn du etwas anders machen möchtest, bist du natürlich etwas anders machen möchtest, bist du mehr als willkommen. Denk bitte daran, das Projekt in diesem Bereich einzureichen. Und das Gute ist, dass ich für die ersten drei Personen einen Sonderpreis vorbereitet habe für die ersten drei Personen einen Sonderpreis Diese Leute, die ihr Projekt als Erste einreichen , erhalten drei Einzelgespräche mit mir, die eine halbe Stunde dauern werden Wenn du also über deine Karriere, über deine Kreativität, über deine Ideen, über meine anderen Kurse zum Programmieren sprechen möchtest Kreativität, über deine Ideen, über , schnell sein und dein Projekt so schnell wie möglich im Projektbereich für die Leute einreichen möglich im Projektbereich für , die den Preis nicht bekommen können. Ich wollte nur sagen, dass es toll ist, deine Arbeit zu zeigen. Es ist toll, um Feedback zu bitten. Auch die anderen Mitglieder aus der Community. Deshalb ermutige ich dich uneingeschränkt die Übungen durchzugehen und dann der ganzen Welt zu zeigen, was du vorbereitet hast. 3. Beginnend mit Figma: Ordnung. Also lasst uns mit Figma beginnen und gleich mit der allerersten Übung beginnen Aber vorher möchte ich Ihnen kurz etwas über die Figma-Pläne erzählen Die gute Nachricht ist, dass Sie kein Upgrade benötigen oder kein Abonnement kaufen müssen Es ist völlig in Ordnung, den kostenlosen Figma-Plan zu verwenden , den Starter, einen sogenannten Starter, und er wird für unsere Experimente und auch für den Export der von Ihnen erstellten Datei völlig ausreichend unsere Experimente und auch für den Export der von Ihnen erstellten Datei Wechseln wir jetzt zur Figma-Anwendung. Ich empfehle Ihnen dringend, FGMA in der eigenständigen App zu verwenden , nicht im Browser Weil es Probleme bei der Installation der externen Mittel geben könnte bei der Installation der externen Mittel Ich denke, dass die App besser optimiert ist, also nutze sie auf jeden Fall. Sie können Figma Four Windows herunterladen, Sie können auch FMF MAC herunterladen Sie können es von figma com aus tun. Also wechsle ich zu der App , die ich gerade heruntergeladen habe. Und was Sie hier sehen können, ist der leere Status Nehmen wir an, ich habe das Teamprojekt erstellt, aber das spielt keine Rolle. Das Wichtigste ist, dass Sie die Designdatei erstellen müssen , nicht das Fike JM-Board Aber natürlich kannst du FikJM danach ausprobieren. Es ist super cool. Es ist das Whiteboard Sie können es für Workshops und für Online-Treffen mit anderen Personen Es ist wirklich cool. Aber heute werden wir uns auf das Entwerfen in FIG Map konzentrieren, also müssen wir auf Design klicken. Datei. Und was wir hier sehen können, ist, dass wir unseren Dateien einen Titel geben können, zum Beispiel Übung eins. Und wir werden mit der Erstellung des allerersten Frames beginnen . Für meine Zwecke werde ich zu der Datei wechseln, die ich bereits erstellt habe, und ich bitte Sie auch, sie zu duplizieren. So wird es für uns einfacher sein an der Datei zu arbeiten, die bereits einige Assets enthält. Es wäre viel effizienter, dort zu sein. Derzeit bin ich also in meiner Figma-Datei. Und ich werde Sie bitten, diese Datei in Ihren Arbeitsbereich zu duplizieren Das bedeutet, dass Sie einfach alles bearbeiten können, was Sie möchten, und dass Änderungen nur für Sie sichtbar sind. Also nur für dein Konto. Wenn Sie diese Datei mit anderen Personen teilen möchten, laden Sie andere Mitautoren oder Mitarbeiter ein, sie können sie natürlich diese Datei mit anderen Personen teilen möchten, laden Sie andere Mitautoren oder Mitarbeiter ein, auch bearbeiten Aber ich möchte diese Datei nicht für alle zugänglich machen , weil alle Projekte hier sein werden Stellen Sie also sicher, dass Sie Ihre individuelle Datei erstellen, indem diese Datei von mir duplizieren Sobald Sie das dupliziert haben, können wir loslegen und wir können beginnen und unseren allerersten Frame erstellen Bevor wir mit der allerersten Übung und dem ersten Schritt beginnen, wollen wir uns ansehen, wie die Animationen aussehen werden, an denen wir zunächst einmal arbeiten werden. Also klicke ich auf Abspielen. Mach dir keine Gedanken über alles, was ich hier mache. Ja. Das ist die Animation. Sie sehen also, dass sich einige Bilder drehen. Sie ändern auch ihre Positionen. Also werden wir damit beginnen. Ich muss den Prototyp schließen und schon bin ich in meiner Designdatei. Sie können hier sehen, dass ich bereits alle Assets für Sie erstellt habe. Sie können es ganz einfach für Ihre Bedürfnisse verwenden, und wir sind bereit, unseren ersten Frame zu erstellen. Also Rahmen wie eine Leinwand. Es ist etwas, das Sie einfach als Hauptelement verwenden , in dem Sie andere Elemente erstellen und dann exportieren. Es ist also so etwas wie Zeichenfläche, wenn Sie mit Illustrator oder Photoshop vertraut sind Also navigiere ich zur oberen linken Ecke der Benutzeroberfläche und sehe, dass dort ein Rahmen ist Sobald ich darauf klicke, sehe ich auf der rechten Seite eine Liste aller verfügbaren Formate, eine Liste aller verfügbaren Formate die für mich vordefiniert sind. Und was mich besonders interessiert, sind Social-Media-Formate, und ich suche nach Instagram Story weil wir uns auf Instagram Story konzentrieren werden. Und sobald ich darauf klicke, sehe ich, dass mein Frame erstellt ist. Ich kann seine Position sehr einfach ändern. Sobald ich drinnen bin, kann ich anfangen das, was ich schon hier habe, nachzubauen Also ändere ich den Tab auf Design. Und das allererste , was wir tun müssen, ist die Hintergrundfarbe von gelb, sorry, von weiß nach gelb zu ändern . Das ist also die Farbe, die ich bereits für dich vorbereitet habe. 4. Smart Animate: Wir werden die Smart Animate-Funktion in Figma massiv in den Klassen verwenden Smart Animate-Funktion in Figma massiv in den Klassen Das bedeutet, dass ich vielleicht die Definitionen verwende , die ich von der Website übernommen habe, von der Website von Figma, dass Smart Animate nach passenden Ebenen sucht, Unterschiede erkennt und Ebenen , Unterschiede erkennt und dem Prototyp animiert Das mag für einige von Ihnen, die es noch nicht ausprobiert haben, etwas kompliziert klingen , aber machen Sie sich keine Ich zeige dir alles. Wir machen uns also zunutze , dass Smart Animate intelligent ist und nach einigen Unterschieden sucht Sobald wir also zwei Frames haben und sie im Prototypmodus miteinander verbinden, werden Sie sehen, was passieren wird Stellen wir uns also vor, wir haben ein Rechteck. Ich zeichne hier nur ein Rechteck. Es kann genauso rot sein wie dieses. Wir können es natürlich mithilfe Funktion zum Ausrichten von Objekten zentrieren Okay. Es ist horizontal zentriert und es ist zentriert. Vertikal. In Ordnung. Also lass uns dasselbe Element in meinen Rahmen kopieren. Also klicke ich auf dem Mac auf Command C. Sie können auf dem PC auf Control C klicken. Das ist das Rechteck. Ich kann es im linken Bereich sehen, dem alle Ebenen angezeigt werden, die ich habe. Also habe ich mein Rechteck kopiert. Ich markiere den Rahmen, in den ich dieses Rechteck einfügen möchte, und klicke zum Einfügen auf Command V oder Control V Und Sie werden sehen, dass es dieselbe Position haben wird. Stellen wir uns also vor , ich hätte dieses Rechteck gerne kleiner. Also ändere ich seine Größe nur, indem ich seine Höhe ziehe. Und ich möchte diese beiden Frames animieren. Also muss ich auf den allerersten klicken. Ändern Sie die Registerkarte von Design zu Prototyp. Ziehen Sie einfach von der Stelle, an der ich das Plus-Symbol sehe , zu dem Rahmen , den ich kombinieren möchte. Und dann erscheint das Interface, das für die Einstellung der Animation verantwortlich Interface, das für die Einstellung der Animation verantwortlich ist. Was ich hier also sehen kann, ist, dass ich die Option Intelligente Animationsfunktion für intelligente Animationen aktiviert Wahrscheinlich wäre Instant die Standardeinstellung, also müssen Sie hineinklicken und zu Smart Animate wechseln Sie werden die Demo dieser Animation und des Timings sehen. Wenn wir also zum Beispiel 1 Sekunde nehmen, also 1.000 Millisekunden, wird es etwas länger Wir haben Smart Animate. Ich klicke also hier und sehe, dass der neue Flow erstellt wurde Ich klicke auf das Play-Symbol und sehe meine Animation. Nun, es geht nicht, es bewegt sich nicht, weil wir klicken müssen. Sobald ich klicke, sehe ich, dass Smart Animate aktiviert wird. Smart Animate sucht also nach den Unterschieden, und der Unterschied zwischen diesen beiden Frames ist die Höhe dieses Rechtecks Weil wir seine Höhe ändern. Wenn wir ein völlig anderes Rechteck haben völlig anderes Rechteck und wir zum Beispiel die Animationen von diesem Rechteck zu dem anderen haben möchten, werden Sie feststellen, dass es so nicht funktioniert weil dieses graue Rechteck ein neues Element ist , das nicht erscheint. Das ist also das Rechteck Zehn, und es erscheint nicht im ersten Frame. Smart Animate sucht also nur nach denselben Objekten innerhalb von zwei Frames Aus diesem Grund wird nach passenden Ebenen gesucht, und Rechteck 10 ist keine Ebene, die dem ersten Bild zugeordnet ist Wenn wir es auch im ersten Bild haben wollen, müssen wir es nur kopieren und an derselben Stelle einfügen. Wir können zum Beispiel seine Höhe und Position ändern, und Sie werden sehen, was passiert. Es sieht nett aus. Ich meine, zumindest attraktiv für etwas, das wir innerhalb einer Minute erledigen können. Und ich möchte dir anhand dieser Übung zeigen, dass du mit dieser Funktion viel experimentieren kannst mit dieser Funktion viel experimentieren , weil sie wirklich cool ist. Sie müssen also nicht alle Animationszustände erstellen, nur den ersten und den letzten, und alles, was zwischen den Frames liegt, wird automatisch von Figma erledigt Denken Sie also daran, die passenden Objekte zu haben. Das ist wichtig. Und die andere Sache ist, dass ich hier auf das Bild klicken musste , zwei, um die Animation zu starten. Und so können wir es ändern. Sobald Sie darauf klicken, werden Sie in den Einstellungen der Animation sehen, dass wir die Klickoption haben. Wir können es ändern. Und es gibt verschiedene Möglichkeiten. Sie eignen sich hervorragend, um das Verhalten beim Tippen oder beim Ändern des Kurses auf der Website zu simulieren Tippen oder beim Ändern des . Sie können zum Beispiel die Maustaste drücken und die Maustaste verlassen, aber wir können auch automatisch von einem Frame zum anderen wechseln , indem wir nach der Verzögerung wählen Nach einiger Zeit wird der Frame also automatisch auf den nächsten umgestellt Wir können den Kurs natürlich auf 0 Sekunden ändern, sodass es sofort erledigt wird Wir haben das Smart-Animate-Setup, das Timing und schauen wir mal, was passieren wird Sobald ich spiele, beginnt die Animation. Es ist also wirklich, wirklich nett, und wir können es nutzen und unser Video, unsere Animation entsprechend konfigurieren. In Ordnung, das ist also etwas sehr, sehr Einfaches. Ich wollte dir nur erklären, was Smart Animate ist und wie es funktioniert Aber kommen wir zurück zu der Animation, die ich hier habe. Also diese Bewegung der Bilder, lass mich einfach die Rechtecke entfernen , die ich habe, und lass uns beginnen 5. Erste Schritte mit Animation in Figma: Also nehme ich die Gegenstände, die Elemente, die ich habe, und die Elemente, die ich tatsächlich für dich erstellt Ich muss in die Gruppe klicken und dann sehe ich, dass ich Rahmen habe. Sie haben also schon erkannt , dass es sich bei dem Schild um einen Rahmen handelt, und wir haben kostenlose Bilder. Ich kann sie markieren. Ich benutze Shift. Und mit Shift kann ich eine längere Liste von Dateien markieren. Ich klicke auf Common C, um sie zu kopieren, und füge sie dann in meinen Rahmen ein, und schon habe ich freie Bilder. Ich denke, sie sollten größer sein. Also lass mich einfach auf Shift klicken. Und mit Shift funktioniert es einfach nicht so. Oh, weil sie in Bildern sind. Sie sind nicht das Bild selbst. In jedem Bild haben wir ein Bild. Ordnung, also um Elemente zu vergrößern, die sich in Frames befinden, müssen wir die Option Link skalieren verwenden Ich werde dir zeigen, wie man es benutzt. Sie müssen also auf K klicken und den Buchstaben K auf Ihrer Tastatur drücken. Und Sie werden sehen, dass sich die Pfeile geändert haben. Die Doppelpfeile. Und sobald ich auf Shift klicke und die Größe des Rahmens ändere, werde ich dafür sorgen, dass die Proportionen beibehalten werden. Es ist auch hier markiert. Wenn ich auf Verschieben wechsle und starte und anfange , einfach die Schaltfläche zum Ändern der Größe ohne Shift zu benutzen. Damit kann ich nur die Höhe und Breite ändern, aber sie werden nicht miteinander verbunden, sodass sie nicht die von mir festgelegten Proportionen beibehalten. Ich kann es also mit dem K-Eins-Zyklus vergrößern . Es ändert sich hier, auf der linken Seite Also lass es mich einfach ein bisschen größer machen und schauen, ob es in Ordnung ist, vielleicht wäre diese Größe nett Und ich muss es mit derselben Sache ändern. Ich kann also anfangen, die Größe zu ändern, aber wir wollen die gleichen Größen beibehalten. Um es vielleicht einfacher zu machen, ändere ich es auf einhundert 9.590, also kann ich einfach diese Größe ändern und wir haben die gleichen Größen Okay, wenn ich so draufklicke, wirst du sehen, dass der Rahmen vergrößert ist, aber das Bild, in dem er sich befindet, nicht Also müssen wir es wahrscheinlich auch ändern. Und wir sind fast fertig, weil ich sehe, dass es nicht den ganzen Rahmen ausfüllt, also können wir auf das Bild klicken und es ein wenig vergrößern. Oh ja, großartig. Wir können innerhalb des Frames navigieren und sehen, wie er positioniert ist, aber ich bin mit diesem Bild zufrieden. Okay, lassen Sie uns überprüfen, ob Sie alles gleich haben. Also haben wir ein, zwei und drei Bilder. Jedes Bild ist in einem separaten Rahmen, und wir haben den ersten Rahmen. Was wir also tun werden, ist , alles stapeln zu müssen. Ich staple zum Beispiel dieses Bild hier. Ich werde nachschauen, ob es in der Mitte ist. Ich werde dieses Bild an derselben Stelle stapeln. Aber Sie müssen sich bewusst sein, dass normalerweise, wenn Sie ein Element auf dem anderen Element platzieren, dass es sich um einen Rahmen handelt, der Rahmen hineinspringt. Und wir wollen keinen solchen Effekt haben. Also muss ich es nehmen und in eine andere Schicht bringen. Es ist also immer noch ein separater Rahmen. Und ich habe ein Bild, Nummer eins, und es wird passieren. Was passieren wird , ist eigentlich dasselbe. Aber ich möchte nicht, dass das erste Bild auf der Vorderseite steht. Also ändere ich es. Das ist mein Einstiegspunkt. Lassen Sie mich diesen Rahmen einfach entfernen. Was mit Smart Animate einfacher zu spielen ist, ist, das allererste Bild zu erstellen, das fertig ist, und dann können Sie es schnell einfach kopieren und einfügen Command C und Comm für Mac, und ich kann mit beiden Frames spielen, die eigentlich identisch sind ich also nach diesem Spickzettel suche, sehe ich, dass die Position der Bilder geändert wurde Also lass mich einfach Bild drei machen. Und ändere es. Lass mich auf das erste Bild klicken und es hier irgendwo ändern, richtig? Wir haben also die Position dieser Elemente und lassen Sie uns sie im Prototyp-Tab verbinden. Ich bin also im Prototyp. Ich ziehe es einfach. Klicken Sie auf Navigate two. Ja, das stimmt, Smart Animate. Behalten wir es für 1 Sekunde. Es ist in Ordnung. Aber wir wollen es nach einer Verzögerung wieder einschalten. Also nach 0 Sekunden, fang an. Eigentlich müssen wir etwas mehr als Null angeben, aber eine Millisekunde, Also ist es immer noch in Ordnung für uns. Und schauen wir uns die Animation an. Nett. Also bewegen sich die Bilder. Wir haben also ein Bild, das Hauptbild auf der Vorderseite, und dann wird das andere erscheinen. Okay, lassen Sie uns den anderen Schritt machen , der darin besteht, die Position der Bilder zu ändern , die sich oben und unten befinden. Ich mache dasselbe, also kopiere ich einfach den Rahmen. Und um die gleiche Position beizubehalten, und ich werde sie einfach, du weißt schon , ändern, du kannst so vorgehen. Sie müssen sich bewusst sein, dass es aus dem ursprünglichen Rahmen herausragt, wenn Sie es zu weit ziehen . Wenn Sie es also drinnen behalten möchten, müssen Sie es nur hier platzieren und es wird herausgeschnitten Ich werde dir nur eine Sache zeigen. Wenn wir diesen Clip-Inhalt eingeschaltet haben. Es wird nicht alles angezeigt , was sich außerhalb des Rahmens befindet. Aber sobald wir es deaktivieren, wird es so angezeigt Aber für unsere Zwecke wollen wir, dass der Clip-Inhalt überprüft wird. In Ordnung. Also wollen wir diese Bilder auch ein bisschen drehen und natürlich in den Prototypmodus wechseln. Und ja, navigieren ist in Ordnung. Nach einer Verzögerung ist eine Millisekunde in Ordnung. Intelligentes Animieren. Großartig. Und lass uns Cool spielen. Interessant an der Animationsleiste ist auch , dass Sie die Dynamik der Animation ändern können , sodass sie beispielsweise federnd wirken kann Mal sehen, wie sich das auswirken wird. Ja. Sie können also sehen, dass dieses Bild gerade abgeprallt ist Oh, behalten wir es, nur um etwas Neues hinzuzufügen. Vielleicht wäre dieses Bild so versteckt. Und die nächste Bewegung besteht darin, die Bilder von oben und unten in die Mittelposition zu bringen. Also kopiere und füge ich noch einmal ein. Und lassen Sie mich diesen Rahmen nach oben bringen. Oh, wir wollten eigentlich den anderen behalten. Wenn du also den anderen behalten willst, musst du nur die Position des Rahmens ändern, und schon ist er auf der Vorderseite. Also, so etwas in der Art. Und als Nächstes müssen wir hier einen Prototyp erstellen. Wenn Sie die Option nicht sehen, überprüfen Sie einfach, ob Sie in den Prototypmodus gewechselt sind. Ordnung. Also ich ziehe, ich ziehe den Pfeil, Smart Animate, vielleicht wechseln wir zum sanften Es wird nach einer Verzögerung passieren, 1 Sekunde, eine Millisekunde, tut mir leid. Lass uns sehen Schieß. Ja, geht so. Wirklich nett. Und wir wollen es rotieren lassen. Also als Nächstes das Kopieren. Ich habe tatsächlich die vorherige Rahmenleiste kopiert , indem ich darauf geklickt und unter Windows auch auf dem Mac auf Option geklickt habe. Option A. Wenn ich ziehe, kopiere ich den Dreck, den ich zuvor ausgewählt habe Wir haben also den gleichen Frame wie zuvor. Und jetzt sind wir bereit , es ein wenig zu ändern, sodass wir es zum Beispiel drehen können. Und natürlich müssen wir es nach einer Verzögerung, einer Millisekunde, wieder verbinden es nach einer Verzögerung, einer Millisekunde, Und lass uns sehen. Cool. kannst du mehr damit machen. Ich meine, du kannst zum Beispiel seine Größe ändern, wir sind auf P drei. Aber denken Sie daran, den Maßstab beizubehalten , wenn Sie sowohl den Rahmen als auch die Proportionen des Bilds im Inneren ändern möchten. Also können wir so etwas machen. Und du kannst Text hinzufügen. Zum Beispiel Hallo. Nichts Originelles hier, aber ja, ich verwende die Clash-Grow-Testschrift, und gib mir nur eine Sekunde. Ich werde mich darauf einlassen. Sie müssen es herunterladen und auf Ihrem System installieren. Okay. Lass uns etwas Größeres versuchen. Hallo. Wie Sie sehen können, befindet sich der Text innerhalb des P-Drei-Frames. Deshalb ist er maskiert. Aber sobald wir es von hier wegziehen und es im allgemeinen Bereich von Frame 7 belassen, wird es so aussehen. Also haben wir Hallo. Wir können die Farbfüllung ändern indem wir den Farb-P-Kursor verwenden. Ich klicke auf die Farbe , die ich für Sie vorbereitet habe, und wir haben ein Hallo-Zeichen Okay, lassen Sie uns Switch mit Prototyp kombinieren. Nach einer Verzögerung von einer Sekunde, Milch, einer Sekunde. Der nächste. Und lass uns sehen. Oh, ich musste darauf klicken. Ja, wahrscheinlich, ja, es sollte nach der Verzögerung sein. Ja. Also ist es sehr einfach. Vielleicht wissen Sie, wir können mehr tun, um es noch besser zu machen , aber ich wollte Ihnen zeigen, dass wir innerhalb von ein paar Minuten etwas tun können, von ein paar Minuten etwas tun können, das keine Fähigkeiten von uns erfordert, fortgeschrittene Fähigkeiten. Entweder in Figma, in Animationen im Allgemeinen. 6. Erste Animation erstellen: Ordnung. Schauen wir uns wie die Animation aussieht, auf die wir abzielen. Ich klicke hier auf die Wiedergabeoption und das ist, was Sie sehen. Ich hoffe es gefällt dir. Ich wollte dir nur zeigen, dass du auch die Größe dieses Fensters ändern kannst , weil ich das vorher nicht gemacht habe. Also noch einmal, sobald ich im Flow auf Abspielen klicke, siehst du die Animation, die wir vorbereiten werden. Ich hoffe, dass du auch begeistert bist. In Ordnung, also lassen Sie uns den Effekt, den wir haben, nachstellen. Lassen Sie uns zunächst darüber nachdenken, was gerade passiert ist. Vielleicht können wir die Animation etwas verlangsamen, zum Beispiel auf 20 Sekunden, was ein bisschen lang ist , und schauen, was passiert. Das Bild wird also kleiner und der Text, sowohl oben als auch unten, ändert seine Position Und wir können sehen, wie das Gelb herumbricht. Und was müssen wir tun? Ich nehme einen neuen Frame und eine neue Instagram-Story. Wir haben den Rahmen fertig. Machen wir es hier unten und ändern den Hintergrund auf Gelb. Erfüllen, ich habe bereits Gelbgelb in der Dokumentfarbe, also kann ich sie auswählen. Mein Instagram-Storyframe ist fertig. Natürlich kannst du es beibehalten, es zum Beispiel in Guide to Million Animationen ändern, Guide to Million Animationen ändern damit es für dich leichter erkennbar Natürlich ist es sehr wichtig, die Reihenfolge und die Eigennamen der Ebenen beizubehalten sehr wichtig, die Reihenfolge und die Eigennamen der Ebenen Ich werde hier nicht alles zeigen , weil es nicht das Thema ist. Es ist nicht das Thema von Figma, aber ich denke, dass es sich lohnt, bewährte Verfahren beizubehalten , auch wenn man experimentiert Ordnung, wir haben den Rahmen und wir wollen das Bild verwenden, das wir haben Also lassen Sie uns das kopieren , das aus dem oberen Rahmen stammt. Aber wir müssen es ein bisschen ändern. Also klicke ich auf K, um es ein wenig zu skalieren und es auf das gesamte Bild zu übertragen. So wie das. Und ich möchte es auf das nächste reduzieren Also mit K ändere ich immer noch die Größe des Bildes Ich schaue mir nur mehr oder weniger die Proportionen der Animation an. Ja, es kann so etwas sein, und wir wollen es zentrieren. großartig. Lassen Sie uns also den Wechsel zum Prototyp verbinden. Wählen Sie Smart Animate. Vielleicht können wir es beim Klicken belassen. Wir haben 10 Sekunden. Ordnung. Also lass uns auf Play klicken und sehen. Ich klicke und das Bild wird kleiner. Ich sehe hier etwas Platz. Mal sehen, welche Art von Animation hier schonend verwendet wird. Ich kann mich nicht erinnern, welche ich hier verwendet habe. Lassen Sie mich das kurz überprüfen. Sie werden hier keine Lösungen haben . Also ja, auch sanft. Also ich schätze, wir mussten es schaffen, weil es eine kleine Verschiebung zwischen diesen Rändern gibt. Also mache ich es so. Also wäre der Rahmen etwas größer. Aber das Bild würde sich so anfühlen. In Ordnung. Großartig. Und lass uns noch einmal gehen. Ich klicke und das Bild wird kleiner. Richtig. Es ist ein bisschen langsamer als in der Originalversion, aber keine Sorge, wir werden das Timing danach ändern. Okay, der nächste Schritt ist also der Text. Und was Sie tun müssen, ist bitte den Clash Grotesque Fund herunterzuladen Es ist kostenlos. Es ist Open Source. Sobald Sie zum Text navigieren und darauf klicken, sollte der Browser geöffnet sein und Sie haben die Möglichkeit, Clash Grotesque herunterzuladen Sie können es zum Beispiel testen, aber wir wollen es jetzt nicht tun Lass mich nur ja, du musst darauf klicken und überprüfen, ob du alle Kacheln hinzufügen kannst alle Kacheln weil ich finde, dass jeder Stil nett ist. Und wenn wir alle ausgewählt haben, wählst du sie alle aus. Ich überprüfe nur, ob Sie die Möglichkeit haben , alle auf einmal auszuwählen. Aber ich sehe es leider nicht. Sie müssen also Stil für Stil auswählen und dann Familie herunterladen. Sobald Sie Family heruntergeladen haben, müssen Sie das Guthaben installieren. Wenn Sie bereits eine Figma-Anwendung haben, ist das großartig. Wenn Sie dies nicht tun, installieren Sie bitte die FDMA-Anwendung anstatt im Webbrowser damit zu spielen , da es sonst zu Problemen mit dem Guthaben kommen kann Außerdem ist es wichtig , den Figma-Agenten zu überprüfen. Installateur. Das ist also die App, die Sie ebenfalls herunterladen und installieren müssen. Ja, du siehst Schriftinstallationsprogramme. Also bitte installieren Sie den Fonds-Installer, danke ihnen. Dank des Installers können Sie externe Gelder verwenden, nicht die typischen Systemfonds, sondern einige Gelder, die Sie aus Google-Fonds oder anderen Quellen heruntergeladen haben . Gehen Sie also je nach System entweder zu Mac OS oder Windows und installieren Sie es anschließend, bevor Installation unserer Fonds wahrscheinlich besser wäre. Also nehme ich auch diesen Link und füge diesen Link zu Figma Ich kann hier einen Link hinzufügen. Und oh, warum es nicht funktioniert. Von Yes, so. Ja. Und du hast auch Spaß beim Installer. Großartig. Also bitte tu es. Sowohl installierender als auch unterhaltsamer Installer von Figma. Ordnung. Also, sobald Sie den Fonds installiert haben und wir überprüfen können ob er für FGMA anhand des Textes erkennbar ist, müssen Sie tippen. Und ich tippe Guide, vielleicht zwei M, bleiben wir bei dem Text, der in unserem Beispiel Wenn Sie Clash Grotesque nicht auf Ihrer Liste haben, schließen Sie die Anwendung, schließen Sie die Figma-Anwendung Installieren Sie das Font-Installationsprogramm von Figma. Prüfen Sie, ob sich die Clash Grow-Aufgabe in Ihrem Systemguthaben befindet, und starten Sie dann Figma erneut, und der Fonds sollte hier sein Normalerweise treten die Probleme auf, wenn Sie einen Webbrowser verwenden oder manchmal denken , dass die Schrift bereits installiert ist, aber das ist sie nicht, oder Sie haben das Font-Installationsprogramm nicht installiert Ordnung, ich habe also meinen Textführer für Millon, ich möchte ihn vergrößern, also klicke ich auf K und vergrößere ihn einfach, du weißt schon Ich möchte auch die Füllung auf Rot ändern , und ich kann es irgendwo versteuern Versuchen wir es mit 160 vielleicht sogar mit 300. Ja, so etwas in der Art. Also, was hier passiert, ist, dass wir zum Beispiel einen Text haben , dass es umgestellt wurde, so Und derselbe Text, ich habe ihn mit der Option mit dem alten Schlüssel kopiert Und wir können eine Anleitung dafür haben. So etwas in der Art. Okay. Also haben wir zwei Textzeilen und mal sehen, was passieren wird. Sobald ich in den Prototypmodus wechsle und die Animation umstelle. Der Text wird einfach eingeblendet. Der ist ein bisschen anders als das, was ich dir gezeigt habe. Kehren wir also zum Original zurück. Der Text erscheint also hier. Wie wir aus dem Smart-Animate wissen, müssen wir dieselben Objekte haben Die Objekte müssen zueinander passen, man die beiden Frames vergleicht Wie Sie sehen können, haben wir Text für das Fitnessstudio, aber wir haben ihn nicht in unseren ersten Frames. Also lass uns hier für eine Weile aufhören. Wenn wir mit diesem Text den Effekt haben wollen , dass es sich um Übergänge von links nach rechts und von rechts nach links handelt, müssen wir genau dieselben Objekte kopieren und sie im allerersten Frame haben. Um es einfacher zu machen, diese Objekte und Frames zu identifizieren, werde ich es umbenennen. Also, tut mir leid, das ist der zweite, oder? Und das sollte das erste sein. Also ändere ich die Namen der Ebenen und mache dasselbe mit dem Text. Also das ist Text oben und das ist unten, und ich kopiere zwei der Objekte, indem ich auf den ersten Frame klicke. Und ich passe es einfach an. Ich sehe also den Text. Und das ist großartig. Schauen wir uns zum Beispiel an, dass ich bei gedrückter Shift-Taste die Shift-Taste gedrückt halte , sodass der Text nur von links nach rechts und der X-Achse verschoben werden kann nur von links nach rechts und der X-Achse Wenn ich also die Umschalttaste gedrückt halte, fällt es mir leichter , dieselbe Position in Bezug auf die vertikale Position beizubehalten , und ich kann sie mit Shift horizontal scrollen Lassen Sie mich das also umstellen. Okay. Und ich sehe, dass es aus dem zweiten Bild herauskam, oder? Das ist der zweite Frame und der Text ist draußen. Also muss ich es korrigieren. Großartig. Und eigentlich weiß ich nicht, warum wir zwei haben. Oh, tut mir leid, ich habe es in den falschen Rahmen gesetzt. Ja. Dies ist der erste, also muss ich ihn in die oberste Anleitung zum ersten Bild einfügen. Ich hoffe, dass es für dich klar ist. Wir haben also den Text im ersten Frame. Es hat seine Position geändert. Mal sehen, wie es aussehen wird. Entschuldigung, ich werde es vielleicht ändern auf Nach der Verzögerung habe ich 7.000 Sekunden. Wir können zwei Millisekunden und C hinzufügen. Ja. Es ähnelt der allerersten Übung dem allerersten Video, das ich dir gezeigt habe . Lass uns darauf zurückkommen Das sind die Demonstrationen. In Ordnung. Nett. Also können wir dasselbe tun, aber wir müssen die Position ändern. Es sollte versteckt sein. Ja. Also müssen wir es nach rechts nehmen. Auch hier kam es vor, dass es aus dem Rahmen herausgerutscht ist, also müssen wir es an die erste Stelle setzen, und wir müssen uns mit dem unteren Text befassen. Es geht also von rechts nach links, also muss ich seine Position ändern. Und wieder ist es rausgekommen, also muss ich es unter die Decke legen , nur um die Reihenfolge der Schichten beizubehalten. Lass uns sehen. Ja. Das ist genau das, was ich erreichen wollte. Wir freuen uns also, dass diese Animation wie das Original aussieht , das ich Ihnen gezeigt habe, und jetzt ist es an der Zeit, diese Animation aufzunehmen, damit wir dieses Video später exportieren und auf Instagram Stories veröffentlichen können . Mal sehen, wie wir das machen können. 7. Mac-Nutzer: Animation als Video mit QuickTime exportieren: Okay, also wie man die Animation aufnimmt, wie man das Video exportiert Ich bin ein Mac-Benutzer, das macht die Sache ein bisschen einfach, weil ich keine andere externe Anwendung installieren muss. Wenn Sie also einen Mac verwenden, werden wir Quick Tim verwenden. Und für Windows-Benutzer empfehle ich dringend, die Projektbeschreibung der Lom Ida-Klasse zu verwenden Projektbeschreibung der Lom Ida-Klasse Sie haben den Link und auch in Figma Es ist wirklich nett , denn was ich an diesem Tool mag , ist, dass Sie den Teil des Bildschirms aufnehmen können Also später werde ich dir zeigen, wie es geht. Aber jetzt wollen wir mit der Bildschirmaufnahme für Mac-Benutzer beginnen. Also Aufnahme und Quicktime. Wir wollen die spezifische Größe der Instagram-Geschichten aufzeichnen die spezifische Größe der Instagram-Geschichten Schauen wir uns also an, wie wir das mit Quick Time machen können. Also entspanne ich mich bei QuickTime. Und ich mache es mit dem richtigen Schlüssel. Ich mache eine neue Bildschirmaufnahme. Und was ich sehe ist, dass ich bereits eine bestimmte Größe habe. Also kann ich auf Aufnahme klicken. Und in der Zwischenzeit kann ich auch auf die Animation klicken. Nun, lass mich einfach mit der Aufnahme aufhören. Weil ich sehe, dass ich in meinem Prototyp eine andere Einstellung hatte. Ich will also, ich meine, den Prototyp-Tab. Und was ich gerne tun würde , ist , dass ich die Einstellungen ändern möchte. Ich möchte dieses Gerät also nicht haben, sondern nur den Präsentationsmodus, das ist in Ordnung. Großartig. Ich muss also überprüfen , ob die Proportionen von Quick Time mit meinen Grafiken meiner Animation übereinstimmen. Ich sehe, dass es größer sein sollte, ich nehme die volle Größe der Grafik. Okay. Und ich kann es aufnehmen. Aber wie du weißt, ist die Animation schon weg, weil sie nur einmal abgespielt wurde. Wir können also den angegebenen Speicherplatz speichern, sodass wir auf Aufnahme und Stopp klicken können und uns vorerst keine Gedanken darüber machen müssen. Aber wir müssen eine Art Verzögerung einstellen , sobald wir die Schnellzeit einschalten. Wir brauchen eine gewisse Verzögerung, wenn die Animation startet. Lassen Sie mich hier also eine längere Zeit hinzufügen, zum Beispiel 4 Sekunden. Okay. Also nehme ich eine neue Bildschirmaufnahme auf , nehme auf und ich spiele die Animation ab. Ich denke, es sollte so sein. Und die Animation ist aufgenommen. Lass uns sehen. Dies ist die Datei, die von Quicktime aufgenommen wurde. Lass uns spielen Natürlich ist das auch der Teil des Interfaces, den wir aufgenommen haben. Ich habe mich verändert, aber die Position des Fensters, okay. Wir haben das Video fertig. Eine nette Funktion in QuickTime ist, dass wir das Video so zuschneiden können , dass wir den ersten Teil Ja, ich denke, es wäre dieser. Und so kann ich die Datei jetzt exportieren, also ist der Dateiexport als 1.000 ADP völlig in Ordnung Und wir können diesen Führer nach Mailand nennen, und ich speichere ihn Diese Datei kann ich auf mein Handy übertragen und dann auf Instagram veröffentlichen. 8. Windows-Nutzer: Animation als Vdeo mit Loom exportieren: Okay. Okay, also ich habe Loom als Anwendung installiert Ich empfehle dir dringend, es zu tun, weil es einfach ist. Ich öffne einfach Loom und ich habe die Schnittstelle. Was ich hier tun kann, ist, dass ich entweder für den Bildschirm oder die benutzerdefinierte Größe aufnehmen kann , was für uns am wichtigsten ist, weil wir die Größe der Aufnahme an unseren Prototyp anpassen müssen die Größe der Aufnahme an unseren Prototyp anpassen Also lass mich zuerst den Prototyp wissen. Und dank dessen kann ich Größe des Bereichs für die Aufnahme anpassen. Ja, so und ich kann diesen Teil der Animation aufnehmen. Wie Sie sehen können, dauert es 3 Sekunden, bis der Bildschirm aufgenommen wird, und das ist die Zeit. Ich kann es natürlich beenden. Und hier wird mein Webstuhl generiert. Ich kann diese Datei herunterladen oder in der Cloud behalten. Aber lass es uns noch einmal machen. Vielleicht füge ich ein zusätzliches Bild hinzu, um es einfacher zu machen , mit der Aufnahme zu beginnen, einfach als Startbild , damit ich es beim Klicken eingeben kann, Flow beginnt hier und nach der Verzögerung kann es nach 15 Millisekunden beginnen Also gib mir den Prototyp. Sobald ich hineinklicke, startet die Animation. Also noch einmal, ich suche nach einer benutzerdefinierten Größe für Loom, starte die Aufnahme Okay. Ich zeichne die benutzerdefinierte Größe. Es ist in Ordnung. Starte die Aufnahme. Es wird drei bis eins zählen, und dann kann ich auf den Prototyp klicken und die Animation ist fertig. Ja, ich wechsle zu diesem Konto, damit du die Bearbeitungsoption „ Zuschneiden und Sticken“ siehst die Bearbeitungsoption „ Zuschneiden und Sticken Das ist etwas, das du gerne verwenden würdest, und dann können wir das Video zuschneiden Es wird also mit der angegebenen Animation beginnen. Und dann können Sie den Clip exportieren, den vorhandenen speichern und ihn dann exportieren, sagen wir, er ist fertig. Und ich kann das Video herunterladen, indem ich einfach auf weitere Aktionen und hier das Video herunterlade. Okay. 9. Zweite Animation erstellen – Teil 2: Ordnung. Gehen wir also zur zweiten Übung über, die ebenfalls spannend sein wird. Also müssen wir zu Figma wechseln. In Ordnung, wir sind also in Figma. Und lassen Sie mich Ihnen die Animation vorstellen , an der wir jetzt arbeiten Wie Sie sehen können, gibt es viele Farben und viele verschiedene Animationen. Ich freue mich sehr, dir ein paar Tricks zeigen zu können. Sie haben also wie gewohnt alle Ressourcen erstellt und wir müssen einen neuen Fonds herunterladen und installieren. Dies ist das Telefon , das tatsächlich von G Road heruntergeladen werden kann . Ja, von GM Road. Tut mir leid, ich habe nachgedacht ob das die richtige Adresse ist, aber ja. Also Kina, und du musst diesen Telefonfonds von diesem Marktplatz herunterladen. Natürlich kannst du dafür bezahlen. Sie können auch Null eingeben. Wenn Sie es kostenlos haben möchten, ist es für den persönlichen und kommerziellen Gebrauch kostenlos, was sehr nett ist. Ich mag diese Typphase sehr, also laden Sie sie gerne herunter. Dann installiere und überprüfe bitte, ob es in Figma funktioniert. Wenn nicht, schalten Sie bitte die App Figma-App aus und starten Sie sie erneut Manchmal habe ich solche Probleme, also gebe ich nur, weißt du, diesen Tipp für dich Wir haben eine Reihe von Farben und auch dieses Symbol, das wir in einigen Frames verwenden werden. Ordnung. Also lass uns anfangen. Du weißt schon, wie man anfängt. Wir müssen zum Rahmendesign gehen und die Instagram-Story erstellen. Vorlage. Für deine Füllung werden wir den Basishintergrund verwenden. Und wenn Sie gerade auschecken, haben wir Tipps für Kreative Also mache ich diese Texttipps Yakhina. Ich habe es bereits auf meiner Liste aus der Fondsliste ausgewählt. Machen wir es mit K. Tips größer. Wir werden sehen, ob es erstellt ist. Ich kann mich nicht erinnern, wie ich dieses Wort aufgeteilt habe. Lass uns sehen. Kreative. Jep Ich denke, dass diese Größe in Ordnung ist, und wir möchten sie gruppieren und die gleichen Leerzeichen zwischen allen haben, sodass wir die vertikale Abstandsverteilung verwenden können Oh, ich weiß nicht. Es sieht nicht so aus. Das ist dasselbe. Also mach es noch einmal. Ich nehme diesen Rahmen, nur um es ähnlich zu haben. Ich finde, dass das Geld größer sein sollte, also mache ich es etwas größer für vier Kreative Lassen Sie mich überprüfen, welchen Fonds ich für das Medium zu Demonstrationszwecken verwendet habe Es ist mittel, es ist in Ordnung. Ordnung. Es könnte so etwas sein. Kreative und lasst uns ein bisschen aufräumen. Ordnung. Ich denke, dass wir, dass die Tipps vier hier etwas größer sind. Also ja, lass uns so etwas machen. Also die Komposition ist in Ordnung, mehr oder weniger. Und was wir hier tun können, ist , eine Komponente zu erstellen. Wenn wir also beschließen, dass wir, ich weiß nicht , den Spaß vergrößern wollen, wird sich das in allen Instanzen dieser Komponente ändern. Lassen Sie uns also zuerst die Komponente erstellen und Sie werden sehen, was ich meine. Ich wähle alle Elemente aus, die in der Komponente enthalten sein müssen, und dann können Sie das schnell mit dieser konkreten Komponente erledigen. Und wir können es zum Beispiel Tipp-Abschnitt nennen, und sobald ich kopiert habe, weißt du, den Frame für die nächsten Stufen der Animation. Aber in der Zwischenzeit werde ich entscheiden, dass diese Mittel eigentlich größer sein sollten. Ich kann, wissen Sie, Einfluss auf meine Komponente nehmen, ich kann etwas an meiner Komponente ändern, und das wird sich in allen Instanzen dieser Komponente widerspiegeln . Ich denke also, dass das sehr nützlich ist, besonders wenn Sie viel experimentieren Und im Allgemeinen ist es sehr nützlich, sich wiederholende Elemente in Komponenten in Figma beizubehalten ist es sehr nützlich, sich wiederholende Elemente in Komponenten in Figma In Ordnung, also ich habe Tipps für Kreative. Ich kann diese Frames vorerst entfernen. Ich möchte das Pfeilsymbol kopieren und es ein bisschen größer machen . In Ordnung. Wir haben also Tipps für Kreative. Und wie Sie sich aus der Animation erinnern, haben wir verschiedene farbige Treibstoffstreifen , die an verschiedenen Stellen erscheinen werden Also müssen wir die Streifen erstellen, und ich mache das mit einem Rahmen, also klicke ich auf den Rahmen und ich werde ihn zeichnen, aber pass auf. Das passiert innerhalb der Komponente, also müssen wir es ziehen und aus der Komponente herausnehmen. Lassen Sie uns die Höhe überprüfen, da diese Streifen später den Text verdecken werden. Machen wir es also etwas größer, also sage ich 180. Und wir wollen diesen Rahmen mit einer Farbe füllen. Die erste Farbe wird die gelbe sein, diese. Sie können es auch hier überprüfen. Sie können den Farbwähler verwenden, und wir möchten, dass er abgerundet ist Hier können wir zum Beispiel 100 nehmen, um zu sehen, dass es gut aussieht, dass es vollständig abgerundet ist Wir haben also den ersten Streifen. Aber wir müssen ihn für mehr Artikel replizieren. Also haben wir noch einen, den blauen. Es sollte in diesem Rahmen sein. Benennen wir es in Tipps für Kreative um und ändern wir die Farbe in Blau Ich klicke darauf und mit der alten Taste oder der Optionstaste, und wir müssen die Farbe in Rosa ändern, richtig Nochmals, ich ändere das Hinzufügen zum Rahmen. Wir können es pink nennen. Dieses können wir blau und gelb nennen. Ordnung. Und ich schätze, es wäre der letzte. Der grüne. Ja. Okay. Oh nein. Eigentlich ist es nicht der letzte, tut mir leid. Es ist orange, richtig. Und der letzte wäre irgendwo hier. Es wird grün sein. Das ist also die Phase der Animation, eine Phase. Aber eigentlich ist es die Mitte. Also wollen wir den Startpunkt haben. Es wird so aussehen. Ich werde es kopieren. Also wären all diese Frames versteckt. Stellen Sie sicher, dass sie immer noch genau im Rahmen bleiben. Ich habe es übrigens nicht umbenannt. Das tut mir leid. In Ordnung. Also machen wir einen Prototyp. Nein, dieser auch. Tut mir leid. Okay. Stimmt? Und das wäre einer der weiteren Schritte der Animation. Und lass uns kopieren. Lass uns kopieren. Ordnung. So gelb. Gelb. Ich werde zum Design wechseln. Gelb wird erscheinen. Die nächste Stufe. Welcher ist der nächste. Sollte vier sein, also der blaue, richtig? Stellen Sie sicher, dass Sie, Sie wissen schon, den richtigen Rahmen bearbeiten. Okay. Also blau, dann pink, schätze ich, oder ist pink. Es ist hier. Und die nächste Stufe ist grün. Orange. Tut mir leid. Tut mir leid. Ja. Ja, es ist orange. mehr und besser organisierte Inhalte zu haben, empfehle ich Ihnen natürlich dringend, die Frames umzubenennen. 10. Zweite Animation erstellen – Teil 1: Ordnung. Also ich denke, wir können versuchen, sie im Prototyp zu verbinden und sehen, wie die Animation funktionieren wird. Ordnung. Intelligent animieren. Ich würde es kurz halten, also vielleicht 600 Millisekunden Nach der Verzögerung sollten wir es sehr schnell machen, 50 Millisekunden, und lassen Sie uns dasselbe mit dem anderen machen. Eigentlich können wir daraus einen großen Teil machen Also kombiniere ich einfach und dann wähle ich Mm hmm. Ich wähle alle Pfeile mit Shift Und dann kann ich das ändern, tut mir leid, nicht diesen, sondern hier, nach einer sondern hier, Verzögerung von 50 Millisekunden, Es ist richtig. Und lass uns sehen. Cool. Ich werde diesen verwenden, um den letzten nachzubauen , weil ich gesehen habe, dass es einige Inkonsistenzen gab . Gib mir einen Wir nehmen den grünen von Nummer sieben. Ich wechsle zum Design, damit ich die Länge ändern kann. Und ich denke, es wäre besser , es dynamischer zu gestalten. Das habe ich gesehen. Aber lassen Sie es uns noch einmal sagen. Ja. Auf den rosafarbenen müssen wir noch etwas warten. Ich weiß nicht warum. Also, das ist einer für den rosafarbenen. Oh, weil es sich nicht auf 50 Millisekunden geändert hat und bei diesem wahrscheinlich genauso Manchmal funktioniert diese Massenbearbeitung nicht so gut. Ordnung. Und lass uns sehen. Nett. Insgesamt kann es schneller sein. Also vielleicht nicht 600, sondern 400. Lass es uns für die verschiedenen machen. Jep. Und lass uns sehen Ja. Ja, es ist dynamischer. Es ist. Im nächsten Bild drehte sich der Pfeil. Wir können auch den Ron drehen, aber es gab auch noch andere Streifen. Ich würde also empfehlen so etwas zu tun, denn wenn wir die Sorgen ändern, muss ich in die Zone gehen. Für den vollständigen Inhalt werden wir uns mit der Welt der Tipps befassen. Also würde ich den Tipps-Text auf die gleiche Weise einfügen Um einen reibungslosen Übergang zwischen den Frames zu gewährleisten. Diesmal können wir keine intelligenten Animationen machen, sondern nur eine sofortige Verbindung Also nicht smart animate, sondern Instant hier, und es kann ziemlich Also nicht beim Klicken, sondern nach einer Verzögerung von einer Millisekunde, und wir haben diesen kopiert, weil wir einen neuen machen wollen Also wie Tipps, oder? Ich checke nur, ob ja, Tipps wird es im Oh, wie du siehst, habe ich es nicht geschafft, den Text auch hier abzudecken . Hoffentlich können wir also die Komponente, die Hauptkomponente, hinzufügen , sodass diese Buchstaben etwas kleiner sein können, zum Beispiel so. Und hat es etwas geändert? Und ich denke, in dieser Situation würde ich es ein bisschen ausdrücken, ja, weil das die zweite Reihe ist. Also habe ich es ein bisschen um zwei, drei Pixel vergrößert. Vier. Ja. Und jetzt ist es versteckt. Ich muss diesen auch noch einmal kopieren und hier einfügen, damit ihre Positionen identisch sind, wenn ich ihn auch einfüge und die Verbindung hinzufüge Also verbinden. Und jetzt kann ich hinzufügen: Sorry, Smart Animate. Nach einer Verzögerung von einer Millisekunde siehe. Ja. Nett. Und danach möchte ich, dass dieser Pfeil Tipps zeigt. Noch eine, die ich nach einer Verzögerung von einer Millisekunde mit Smart Animate verbinden muss nach einer Verzögerung von einer Millisekunde mit Smart Animate Aber tatsächlich kann es schneller sein. Und das auch, weil es zu lang war. Okay. Und was gerade passiert, ist, dass einige Wörter auftauchen, mal sehen. Das kann so gemacht werden , dass wir ein Wort verdecken und dann die Größe des Rechtecks ändern , sodass es das Wort bedeckt Lassen Sie uns nun die anderen Wörter erstellen. Also sieh dir das an. Wir haben diesen Rahmen. Aber wir müssen diese Wörter verschleiern. Also habe ich den Dreckskerl kopiert, aber ich muss ihn in den Vordergrund stellen. Kopiere auch den pinken. Ich muss diesen blauen kopieren und erneut einfügen. Wenn Sie es als erste Ebene erstellen möchten, wählen Sie einfach den Rahmen aus und fügen Sie ihn dann ein. Das Gleiche gilt für den rosafarbenen Wählen Sie den Rahmen aus, und der Text ist. Und auch orange. Großartig. In den nächsten Schritten werden wir die Höhe dieses Rechtecks ändern. Es wird also auf fast Null sinken. Das Gleiche gilt für das rosa, das gleiche für das orangefarbene , und wir haben es Großartig. Jetzt können wir den Prototypmodus, Check und Smart Animate verbinden Check und Smart Animate Vielleicht machen wir es ein bisschen schneller. Oh, ich habe vergessen, es auch zu ändern. Nach einer gewissen Verzögerung, das Gleiche gilt für diesen. Nach einer Verzögerung von einer Millisekunde. Und mit diesem Nach einer Verzögerung, einer Millisekunde. Okay. Ich bin sehr neugierig auf diese Animation. Also lass uns sehen. Cool. Aber ich denke, es ist zu schnell, oder? Es sollte ein bisschen langsamer sein. Lass mich das überprüfen. Also werden wir vielleicht auf 600 umsteigen. Und es wird uns besser gehen. Weißt du, Timing und Animation sind extrem wichtig, weil es nur um das Erlebnis geht. Wir wollen unsere Hüte nicht verletzen. Okay. Also, ich verstehe, hier gibt es ein Problem. Ich denke, es ist eine Frage von hier, wir haben Smart Animate. Und meiner Meinung nach wollen wir sehen, ob es gut ist Ich werde eine längere Zeit hinzufügen. Wenn Sie etwas überprüfen möchten, können Sie eine längere Zeit hinzufügen. Und dieser ist Smart Mate. Und dieser sollte auch Smart Mate sein. Okay. Also werde ich überprüfen , was hier passiert. Lass es uns noch einmal spielen. Das sieht gut aus. Das sieht auch gut aus. Okay, ich glaube, nach diesem Bild hatten wir ein Problem. T oder dieser. Weil ich mir nicht sicher bin, ob dieser Rahmen passt. Tipps haben wir hier oben. Aber die Tipps in den zehn zehn Frames sind an einer anderen Stelle. Du musst sehr vorsichtig damit sein. Natürlich, weißt du, es geht darum, nach Fehlern oder Verbesserungsmöglichkeiten zu suchen . Also ja, ich denke, wir müssen es auf Instant ändern. Und dieses Symbol sollte auch dasselbe sein. Und mal sehen, ob es funktioniert. Okay. Ja, es ist besser. Es ist definitiv besser. Großartig. Also haben wir Tipps. Schau dir das an. Und die letzte Phase der Animation, die letzte Phase, die wir gemacht haben. Oh, eigentlich heißt es, sieh sie dir an. Okay. Ich werde es korrigieren. Wir haben verschiedene Hintergründe, aber wie Sie sehen können, werden sie sich sofort ändern, und es gibt einen Übergang. Vielleicht zeige ich es dir in einer längeren Zeit, sagen wir mal in 2 Sekunden. Da ist der runde Streifen, der von oben nach unten verläuft . Lass es uns machen. 11. Zweite Animation erstellen – Teil 3: Wir müssen diesen Frame kopieren und einen neuen Frame hinzufügen , das wäre schade. Lassen Sie uns diesen Rahmen außerhalb machen, wäre das der Bash-Stripe, der auf dem Text Es sollte auch um ihn herum sein. Cool. Es kann länger sein und wir setzen es in das Bild 14, es sieht so aus, ich würde den Streifen nennen , also können wir es vorerst verstecken. Aber im nächsten Bild geht der beste Streifen ganz nach unten. Okay. Verbinde dich. Nur um dir zu zeigen, warum ich diesen besten Streifen so hinzugefügt habe, dass er oben versteckt ist und dann erscheint er, weil wir hier wieder Smart Animate verwenden wollen Und zwischen diesen Frames, weil wir diesen Bash-Stripe nicht zu allen vorherigen Frames hinzufügen wollen , weil wir die passenden Ebenen haben wollen die passenden Ebenen damit die intelligente Animation reibungslos funktioniert Ich möchte nur einen Übergang haben, der sofort erfolgt, und er muss nicht mit den Ebenen zwischen zwei Frames übereinstimmen . In Ordnung. Nach der Verzögerung kann es eins sein, richtig, und dann das nächste , Smart Animate Wir können es etwas länger machen. Lass uns sehen. Oh. Ja. Tut mir leid. Ja, ich habe vergessen, zwischen den Bildern zu wechseln. Es ist nach einer Verzögerung, also ist es in Ordnung. Nach der Verzögerung ist es in Ordnung. Ich musste auf eine Ebene klicken, also frage ich mich. Nach einer Verzögerung. Ich weiß nicht, warum dieser Flow entstanden ist. Ich habe diesen Flow gerade entfernt. Und für mich sollte dieser länger sein, also fügen wir 2 Sekunden hinzu. Ich verstehe. Okay. Okay. Also ich denke, das ist der Ort, an dem wir After Delay haben. Hier sollte alles funktionieren. Ich weiß nicht, warum ich klicken muss. Vielleicht ist es Bog oder so. Hoffentlich nicht. Hier haben wir auf Klick. Es tut uns leid. Also müssen wir nach einer Verzögerung von einer Millisekunde etwas ändern Und es gibt noch eine Sache, die ich überprüfen wollte, aber lassen Sie mich das noch einmal starten Okay, das sieht cool aus. Wir wollten das Wort sie haben. Deshalb ist es auch eine gute Praxis, Komponenten aus diesem Wort zu machen, um mehr Flexibilität zu haben, denn wie Sie sehen, wollte ich sie ändern, und, wissen Sie, weil es keine Komponente ist, musste ich sie an drei Stellen in drei Frames ändern. Ordnung. Also, jetzt kopieren wir einfach diesen letzten Frame und ändern die Farbe, ändern einfach die Farbe des Streifens. Also wäre es gelb. Ja, Bash Stripe, Bash Stripe, wird gelb, dann blau. Hoppla. Tut mir leid. Ich muss den Bash-Stripe markieren. Stellen Sie sicher, dass Sie den richtigen Rahmen ausgewählt haben. Übrigens, ich sehe, dass es an den Runden liegt, wir müssen es etwas dehnen. Also werde ich es auch dehnen. Der beste Streifen. Der sollte runter gehen und das auch, oder? Dann Rosa, schätze ich. Und orange und grün. Okay. Okay. Also das Letzte , was wir tun müssen, ist die restlichen Frames zu verbinden, smart animieren Eigentlich ist es egal, ob es Smart Animate ist. Es kann aufgelöst werden, weil wir, du weißt schon, jedes Objekt bewegt sich nicht, oder? Es geht nicht darum, den Ort zu ändern, es geht um die Position. Es geht nur darum, die Farbe zu ändern, also wäre es einfach, du weißt schon, ein- und auszublenden Wir können 600 nach Verspätung verlassen. Eine Millisekunde. Ich würde das Gleiche für alle tun Nach einer Verzögerung nach der anderen. Und nach einer Verzögerung. Aber es sollten 600 sein. Ja. Okay. Lass uns sehen, was wir haben. Okay, dieser sollte definitiv schneller sein , weil wir nach der Verzögerung einige Zeit gebraucht haben , einer vielleicht 200. Okay, ich glaube, es gibt noch einen Ort. Wir müssen das für sie ändern, weil wir diesen rosafarbenen Streifen verstecken. Wir haben das und jetzt haben wir DM und es sollte in Ordnung sein. diesem Grund ist es besser, Komponenten zu haben , da in solchen Situationen alle Änderungen auf alle anderen Frames repliziert werden Ordnung. Also schauen wir uns die Animation an. Okay. Ich denke, es gibt immer noch einen Ort. Das ist das letzte Bild, das wir haben. Hier haben wir sie oder vielleicht den. Ja. Lass es für eine Sekunde stehen. auf Bild 15 Lass uns Bart auf Bild 15 verstecken und schon haben wir das. Also müssen wir sie überprüfen und uns wieder verstecken und wieder loslegen, Prototyp. Okay. Das sieht gut aus. Ja. Das ist cool, aber ich denke , wir müssen ein bisschen warten. Wir haben hier 2 Sekunden, also wechseln wir zu 200 und jetzt wird es gut sein. Oh nein, ich denke, es ist zu schnell. Definitiv zu schnell. Also vielleicht 1 Sekunde. Und für diese 600 600 sofort 600. Okay. Das letzte Finale. Ja, ich denke, es sollte eigentlich schneller sein. Lass uns zu 300 wechseln und es wäre perfekt. Okay. Und jetzt können wir wieder die Aufnahme erstellen. Was hier also wichtig ist, ist, dass die erste Animation danach beginnt, ich weiß es nicht. Sagen wir 5 Sekunden oder sieben Sekunden. Okay. Also wir haben 400, aber wir müssen die Verbindung kopieren und ändern. Es kann sofort innerhalb von Sekunden aufgelöst und ich füge Quick Time Player einen neuen Bildschirmaufzeichnungsdatensatz hinzu, und ich, es ging ziemlich schnell, oder? Also lass mich damit aufhören und nachschauen. Oh, wir müssen die Startposition des Flows ändern die Startposition des Flows weil er von diesem Frame aus gestartet wurde, nicht von diesem. Und lass es uns noch einmal machen. Aufnahme Nun, warte ein bisschen und es wird anfangen zu animieren Okay. Wir können es jetzt stoppen und zuschneiden und es wird in kürzester Zeit zugeschnitten. Ich hoffe, dass ihr auch eine einfache Möglichkeit habt, das Video auf Windows zu schneiden. Ordnung. Okay, schneiden wir Datei ab und exportieren wir sie. Und das können wir auf unserem Instagram zeigen. Natürlich können Sie dieses Beispiel wiederholen, etwas anderes machen, die Farben ändern , den Text ändern Dies ist eines deiner Klassenprojekte, daher würde ich mich freuen, deine Kunst zu sehen 12. Dritte Animation erstellen – Teil 1: Okay. In Ordnung. Also lass uns zur dritten Übung gehen. Wir gehen nach Figma. Aber vorher bitte ich Sie, die ZT Chins-Schrift herunterzuladen. Der Link sollte also in der Figma sein, die ich für dich vorbereitet habe. Und es gibt auch einige Videos zum Herunterladen, die wir in der Übung verwenden Sie haben natürlich den Platz , den Sie für die Experimente nutzen können. Und es ist höchste Zeit, Ihnen zu zeigen woran wir arbeiten werden. Also fange ich mit der Animation an. Lass uns gehen. Okay. Wie Sie sehen können, geht es darum, das Video zu maskieren, was uns neue Möglichkeiten und neue Ideen gibt unsere Arbeit oder die Arbeit unserer Kunden zu präsentieren, alles, was wir auf Instagram Stories machen wollen. Lassen Sie uns also tief in das eintauchen, was hier passiert. Also müssen wir, wie immer, einen neuen Rahmen erstellen, auf den Frame klicken, die Instagram-Story aufnehmen und wir nehmen die Farbe blau, babyblau Wir haben auch den Titel ABC of Ceramics in der Schrift Zenz. ABC der Keramik, lass uns die Zinnschrift ausprobieren. Ich möchte es dünn und etwas größer haben. Also werde ich K für die Skalierung verwenden. Und ich denke, dass wir die Zeilenhöhe vielleicht auf diese ändern müssen . Und ich habe in dem Beispiel auch einige Varianten der Schrift für die Kursivschrift für O und E verwendet und ich und, glaube ich. Also lass uns ein bisschen damit spielen. Ich gehe zu meiner Datei, also markiere ich C und verwende helldünne Kursivschrift. Vielleicht F, mal sehen, ob es gut aussieht. Weißt du, nur um auch ein bisschen mit Typografie zu spielen. So etwas in der Art. Wir können es ein bisschen größer machen. Und ich schätze, dass es vielleicht nicht gut lesbar ist, also werde ich mich dem Licht zuwenden. Vielleicht wärst du besser. Vielleicht sieht R, ja, nett aus. Okay, wir haben den Titel, und was hier passiert, ist , dass wir Videos hinzufügen. Ich muss das Video hinzufügen. Lass mich zu dem Ordner mit den Videos gehen und ich füge das erste hinzu. Das erste Intro Ordnung. Und zum Beispiel füge ich es hier hinzu. Wenn wir auf Prototyp klicken, passiert nichts, weil es keinen anderen Bildschirm gibt. Lassen Sie uns also noch einen machen nur um eine Verbindung zu Bildschirmen herzustellen. Und was Sie sehen werden , ist , dass wir den Ton des Videos haben, richtig? Und es wurde im Prototyp gespielt. Es ist also eine gute Praxis. Natürlich, je nachdem, was Sie tun möchten , um das Video stummzuschalten, und Sie können dies tun, indem Sie dieses Symbol einschalten. Ordnung. Also ist das Video stummgeschaltet und wir müssen die Maske erstellen Unsere Maske ist also ein Rechteck. Mit den abgerundeten Ecken. Stellen wir uns vor, das ist unsere Maske, Ecken abrunden möchte. Wenn ich nur die Ecken oben und unten abrunde , bleibt das Muster so. Das wird unsere Maske sein. Wie das geht, müssen wir eine Form haben und dann klicken und dann auf Als Maske verwenden klicken. Derzeit ist es eine Maske, aber das Video ist nicht maskiert. Also müssen wir es nehmen, ziehen und es hinter der Maske innerhalb seiner Gruppe platzieren Jetzt sieht es gut aus. Lass mich nachschauen, wie es aussah. Okay, es war also dicker. Die Maske war größer, sodass wir sie etwas dehnen können. Aber wir müssen das Video auch dehnen, indem ich auf Shift klicke , damit es richtig maskiert werden kann. Okay. Also erstellen wir einen weiteren Rahmen und ändern die Größe der Maske. Also müssen wir zum Rechteck gehen . Vielleicht wäre es besser , es in Maske umzubenennen. Also versuchen wir, die Reihenfolge einzuhalten. Die Maske wird sich ändern, kleiner sein und beides. Vielleicht machen wir das und schauen uns den Prototypmodus an, wie er aussieht. Natürlich intelligent animieren. Lass uns sehen. Nett. Wir können es etwas länger machen, damit Sie den Unterschied sehen können . Ich klicke. Und was mir an dieser Technik sehr gut gefallen hat , ist , dass das Video abgespielt wird und die Maske animiert wird, sodass ein wirklich interessanter Effekt entsteht Okay. Lassen Sie uns jetzt den dritten Frame erstellen. Und wir werden die Maske ändern. Damit wir es kleiner machen können. Darüber hinaus können wir auch die Dynamik ändern, wie die intelligente Animation funktionieren wird, die Dynamik der Animation aussehen wird Und ich schlage vor, Änderungen zu schnell vorzunehmen. Lassen Sie uns also mit dem nächsten verbinden. Es wird schnell gehen, richtig. Und lass uns nachschauen. Mir gefällt der Effekt, dass diese Maske ein bisschen nachprallt. So können wir es nach einer Verzögerung auf „ Nach“ ändern. Nach 100 Meliscond Mal sehen. Cool. In der nächsten Phase wird es von einem Rechteck mit abgerundeten Ecken zu einem Kreis umgewandelt. Es ist also wirklich cool, dass eine Maske nicht bedeutet, immer dieselbe Form zu haben. Wir können also sowohl oben als auch unten 500 hinzufügen. Es wird also ein Kreis werden. Und dann kann diese Maske auch ihre Position ändern, sodass sie nach oben gehen und etwas kleiner sein kann. Oh, tatsächlich wurde sie unten kleiner. Aber lass es uns dabei belassen. Wir werden sehen, was interessanter ist. Was sieht besser aus. Also Prototyp. Wir können vorerst vom Klicken leben und es danach ändern. Also lass uns sehen. Okay. Definitiv hier. Es ist schnell. Aber vielleicht würde ich diese Position ändern. Ich würde die Position dieser Maske zum Beispiel nach oben ändern , so. Und das wäre kleiner, etwa so. Und dann können wir wieder mit der Form dieser Maske spielen. Wir können so etwas machen und dann von beiden Seiten vergrößern. Hoffentlich ist es in der Mitte. Ja. Okay, jetzt müssen wir es verbinden und sehen, wie es aussieht. Cool. Ich mag es, wenn das Video vergrößert wird und sich gleichzeitig die Maske ändert Okay, wir können es also auf „Nach der Verzögerung“ umstellen. Dieser kann zum Beispiel nach 300 Millisekunden sein. Nach Verzögerung 200. Und als Nächstes werden einige Textelemente angezeigt. Lassen Sie uns es also schnell erstellen. Ich bin der Rahmen und nehme zum Beispiel am Unterricht teil. Und lassen Sie uns den Text in die Schriftart ändern, um es vielleicht einzugeben, vielleicht sind 50 oder 50 in Ordnung, aber ich würde es auf Kleinschreibung ändern. Und wie Sie sehen konnten, sah es aus wie ein kleiner Knopf, wie ein rundes, abgerundetes Element. So können wir es mit der rechten Maustaste einrahmen. Auswahl des Rahmenabschnitts. Okay. Und wir können ein Layout hinzufügen. werden also dynamisch Die Breite und Höhe dieser Schaltfläche werden also dynamisch festgelegt. Wenn wir Füllung hinzufügen, werden Sie sehen, dass der Rand, der Abstand innerhalb dieses Rahmens tatsächlich 100 Pixel beträgt, aber wir wollen, dass er nicht so groß, sondern klein bleibt Und hier würde ich 15 behalten, sagen wir, auch um die Ecken abrunden Und ich würde es auf 40 umstellen. Nehmen Sie am Unterricht teil. Ich erinnere mich nicht an die Farbe. Es tut mir leid. Ich habe vergessen, sie hier zuzubereiten. Es ist also grau und menschenfreundlich. Nehmen Sie am Unterricht teil. Jeden Dienstag ändere ich jetzt den Text. Ich kann benutzen, was du willst. Und für diesen werden wir die Farbe auf diesen ändern. Und das könnte grau sein. Vielleicht räume ich auf. Okay. Und lass uns sehen. Lassen Sie uns tatsächlich zum Original zurückkehren, weil ich überprüfen wollte, welche Idee hinter dem Text steckt. Also, wie es aussehen wird. Okay, es spielt also keine Rolle , weil der Text gerade erschienen ist. Intelligentes Animieren. Wir werden sehen, was passieren wird. Lass uns nachschauen. Äh, huh. 13. Dritte Animation erstellen – Teil 2: Wenn du etwas Ausgefalleneres machen möchtest. Wir können den Text kopieren. Er befindet sich bereits in der Maske, sodass wir ihn auch in diese Maske einfügen und seine Position ändern können. Natürlich müssen wir es wieder in die Maske ziehen, also ist es hier, oder? Es ist in dieser Maske. Und es passt auch zum nächsten Bild. Es hat also eine interessante Tatsache. Ja. Ja, ich mag es. Und wir haben auch in der vorherigen Version, der Originalversion, ein weiteres Video hinzugefügt, um Ihnen zu zeigen, dass wir die Videos mischen können. Wir können sie ändern. Also füge ich noch einen hinzu. Ich kann es zum Beispiel in die Maske eindrücken und wir werden sehen, was passiert. Okay. Ich kann dieses Video sehen. Wahrscheinlich ist es nicht verbunden. Okay. Also noch eine Sache, wir müssen es verbinden, richtig? Intelligentes Animieren. Lass es uns per Klick oder vielleicht nach einer Verzögerung machen Okay. Lass uns sehen. Ich werde es schnell hierher bringen , nur um zu sehen, wie die beiden Frames geändert werden. Okay. Sagen wir, es ist nichts Spektakuläres. Wenn Sie es interessanter haben möchten, würde ich dasselbe Video hier platzieren und seine Position ändern. Aber ja, es ist etwas , das wir lassen können oder, oder. Wir können diesen Frame kopieren. Hier hinzugefügt. Ich meine, die ganze Maske. Es ist nicht schlecht, also können wir ein bisschen spielen. Wir können diese Maske auch machen. Mehr Fläche betreten, also größer werden. Achte aber darauf, dass dein Video hier rausgeschnitten ist, es muss sein, dass die Position geändert werden muss. Wir werden sehen, wie es im Prototyp aussieht. Es ist nicht verbunden. Vergiss es. Warte eine Sekunde. Nett. Mir gefällt es. Ich denke also, dass wir noch mehr machen können . Maske kann so oder so wachsen. Und das Video kann wie hier laufen . Lass uns sehen. Cool. So wie das hier. So können wir am Ende so etwas wie eine kurze Steuer abziehen. Ich warte auf dich, etwas Kleines, das der visuellen Note auch eine nette Note verleiht. Wir können es superschnell machen. Und nach einer Verzögerung ändern alle vorherigen Abschnitte nach einer Verzögerung ändern. Okay. Oh, wir haben viele, viele Bilder, aber ich finde, die Tatsache sieht nach Rauschen aus. Nach der Verzögerung. Okay. Das ist nach der Verzögerung, E. Also starten wir den Flow. Ich ersetze es durch das allererste Bild. Okay. Cool. Ich mag es wirklich. Hoffe es gefällt dir auch. Sie können also natürlich die vorderen Videos verwenden, wenn Sie möchten, aber alle beiden Videos befinden sich tatsächlich im Dropbox-Ordner. Also jetzt, nehme ich es mit Quick Time auf, zumindest für meinen Fall. Und für diesen fangen wir nach 6 Sekunden an. Okay. Ihre Aufgabe ist es jetzt also, das Video zu erstellen. Mit einer Sache kann ich dir schnell helfen. Bitte kopiere den ersten Frame. Wir haben also einen gewissen Zeitspielraum, sobald wir mit der Bildschirmaufnahme beginnen. Ich würde sagen, die Hälfte der Sekunde und der Prototyp. Ich würde, ich fange hier an. Vorschau. Ich weiß nicht, warum die Vorschau meinem Prototyp gerade entgangen ist. Aber ich habe einen neuen Flow-Startpunkt hinzugefügt. Versuchen wir also, es aufzunehmen. Ich klicke auf Quick Time, neue Bildschirmaufnahme. Der Prototyp, und er wird animiert. Fantastisch. Okay. Ich habe vergessen, den Ton im Video im letzten Video auszuschalten. Lassen Sie mich das korrigieren. Vielleicht kannst du es hören, weil ich die Lautstärke reduziere. Aber sobald Sie den Prototyp aufrufen und auf das Video klicken, werden Sie sehen, dass der Ton eingeschaltet ist. Und lassen Sie uns auch die vorherigen Frames überprüfen. Ja. Hoffentlich nur drei Frames. Nicht viel Arbeit. Okay. Und wir sind bereit. Die Animation sollte fertig sein. Ich hoffe, es hat dir gefallen, mit Maskierung und Video zu spielen. Es ist eine wirklich mächtige Waffe. Ich hoffe, Sie werden einige Experimente machen, besonders mit diesem Ansatz und den Techniken, und ich möchte sie alle im Klassenprojekt sehen. 14. Bonus – Eine andere Art von Animation: Ich habe auch ein Bonus-Video vorbereitet, eine Bonus-Animation. Schauen wir uns also an, worum es geht. Lass mich zum Prototyp wechseln und spielen. Ich kann tatsächlich den Ausgangspunkt erstellen. Man kann es also sehen, und manchmal ist es die Last. Und wie Sie sehen, haben wir das Video, dass es maskiert ist, und auch ein anderes Video, und das ist die Bildschirmaufnahme nur von der Notiz auf meinem Mac Und ich schreibe etwas, tippe etwas. Und ich finde, dass es wirklich cool aussieht. Und ich habe einige Instagram-Geschichten und diese Art von Animationen gesehen. Ich denke also, dass es die Aufmerksamkeit der Leute erregt, weil sie sehen wollen , was Sie vermitteln werden. Was ist deine Botschaft? Also, wie macht man es. Nun, es ist nicht so schwierig. Eigentlich können wir hineinschauen , was in diesem Bild passiert. Wir haben also verschiedene Rahmen wie Aufkleber, oder? Also wünsche ich mir die Sticker, die in einem anderen Rahmen erstellt wurden. Also habe ich einfach, weißt du, ein paar Farben hinzugefügt. Wenn wir reingehen, werden Sie sehen, dass wir den Text haben und jeder Rahmen eine andere Füllung hat, andere Hintergrundfarbe, und er ist auch abgerundet. Wir haben also bestimmte Aufkleber. Also noch einer mit einem Lächeln. Aber ich denke, dass die beiden Elemente am interessantesten wären . Also die Gruppe, dass sie maskiert ist. Wir haben also ein Rechteck mit abgerundeten Ecken und im Inneren haben wir einige Gruppen Eigentlich muss es keine Gruppe sein, es spielt keine Rolle. Es ist nur ein reines Video. Also vielleicht tut es mir leid. Ich werde dieses Video aus dieser Gruppe herausnehmen, damit es klarer wird. Und wie du siehst, kann ich dieses Video manipulieren, ich kann es verkleinern. Ich kann seine Position ändern. Sobald Sie in den Prototypmodus wechseln die Animation ausgeführt haben, werden Sie sehen, dass das Video abgespielt wird. Und das Gleiche passiert mit dieser Notiz, dieser Tippanimation. Wir haben ein Rechteck, das abgerundet ist , weil ich Ihnen zeigen werde, dass wir die Form leicht ändern können. Es ist also abgerundet und wir haben das Video, das ich mit QuickTime auf meinem Mac aufgenommen habe Wenn Sie es neu erstellen möchten, wechseln Sie einfach zu Ihrer bevorzugten Notizen-App auf dem Mac, ich verwende QuickTime Und die neue Bildschirmaufnahme auswählen. Natürlich können wir die Größe so ändern. Ich kann die Position wechseln, auf Aufnahme klicken und zu den Notizen wechseln, und ich kann mit dem Tippen beginnen. Mein Tag war schrecklich. Lass mich meine Geschichte mit dir teilen. Was auch immer. Dann speichern wir einfach dieses Video. Okay, ich bin bereit, das Video zu speichern und zu exportieren. Diese Auflösung sollte in Ordnung sein. Lass es uns zum Bonus hinzufügen. Ich nenne es Typing. In Ordnung. Also wird es gerettet. Und ich kann den neuen Rahmen schnell hinzufügen. In der Story kann ich also einen Hintergrund hinzufügen, ich kann ein Rechteck erstellen. Versuchen wir es mit verschiedenen Farben, damit es besser erkennbar ist, vielleicht größer. Okay, ich bin bereit, mein Video hinzuzufügen. Es ist auch schon getrimmt. Also habe ich nur diese Schrift und Notizen aufgenommen. Also ziehe ich das Video einfach per Drag-and-Drop und wir wollen es in dieser Maske behalten Also verwende ich diese Funktion als Maske. Du kannst auch die Abkürzungen verwenden und mein Video ist eine Maske, was großartig ist. Ich kann die Größe ein wenig ändern. Damit es an die Größe der Maske angepasst wird. Oder ich kann auch eine andere Operation durchführen. Ich kann die Maske loswerden. Also kann ich mir einfach das Video schnappen, die Maske entfernen und die Farbfüllung des Hintergrunds so ändern die Farbfüllung des , dass sie der Füllung aus dem Video entspricht. Wir haben also diesen Effekt des gesamten Fensters sichtbar. Aber ich glaube, es gibt einen Schatten von einem anderen Gegenstand und einem Finder. Trotzdem denke ich, dass es besser wäre , eine Art Maske hinzuzufügen Dadurch werden wir den Schatten ein wenig kürzen. Also das ist Maske und Katze. Das sieht besser aus. Das ist also unser ganzer Rahmen. Und Sie können eine weitere hinzufügen, zum Beispiel eine abgerundete Maske. Also müssen wir es aus der bestehenden Maskierungsgruppe nehmen, und vielleicht gruppiere ich es und lege es unter diese Ellipse Und zu dieser Ellipse kann ich ein weiteres Video hinzufügen, in dem ich mich zum Beispiel präsentiere Ich habe es bereits aufgenommen. Also behandle ich diese Ellipse wie eine Maske. Also, das sieht seltsam aus. Aber vielleicht. Vielleicht vielleicht vielleicht. Und ich kann natürlich die Größe des Videos ändern, und ich kann auch die Position der Maske ändern. Ich kann zwei dieser Ebenen markieren, gruppieren und einige hier platzieren, je nachdem, was Sie erreichen möchten. Und lass uns sehen, was wir haben. Ich gehe zum Prototyp. Ja, dieser ist tatsächlich ein bisschen größer. Also wollte ich dir zeigen, wie es aussieht. Ja, das ist interessant, oder? Weil du das Gesicht einer Person siehst und eine Botschaft siehst. Für mich erregt es also die Aufmerksamkeit des Benutzers. Es ist etwas, das mich anzieht. Und ich denke, auf Instagram-Geschichten diese Art von Inhalten, könnten diese Art von Inhalten, diese Art von Animation wertvoll sein. Und natürlich kannst du hinzufügen, ich verwende zum Beispiel die Sticker hier. Also habe ich sie einfach kopiert und eingefügt , um sie bunter hinzuzufügen Aber das Einzige , was Sie beachten müssen , ist, dass wir uns derzeit in der Maskierungsgruppe befinden, also wollen wir sie übernehmen, ein Bad in unserer Ebenenhierarchie nehmen Und wieder können wir sehen, wir vielleicht den niedrigen Startpunkt schaffen Wir haben hier keine Interaktionen. Was ich dir aber als Bonus zeigen wollte, ist, dass du auch den Geräteprototyp, den Geräterahmen, verwenden kannst , der wirklich nett aussieht. Also zum Beispiel P, okay, und das wäre so etwas. Und hier können Sie sich vorstellen, wie Ihre Instagram-Geschichten aussehen würden. Außerdem empfehle ich Ihnen dringend, die Einstellungen dieses Prototyps zu überprüfen , da Sie problemlos mit verschiedenen Hintergründen spielen können. Ich meine, die verschiedenen Simulationen des Geräts, sogar die Farbe des iPhone, was ein sehr kleines Detail ist. Wenn Sie etwas Schönes in Ihrem Portfolio haben oder Ihre Arbeit in der Fülle von Handys präsentieren möchten Du kannst auch die Option verwenden, es aufzunehmen, sodass ich mir auch schnell Zeit nehmen kann, und es so einstellen, dass ich das ganze Bild mit dem Handy aufnehmen kann , und ich kann mit der Aufnahme beginnen und wir werden solche Animationen haben Ich hoffe, dass Ihnen diese Kurse gefallen. Ich hoffe, dass du etwas Neues lernst und ich kann es kaum erwarten, dein Klassenprojekt zu sehen. 15. Zusammenfassung: Lassen Sie uns also kurz zusammenfassen, was Sie gelernt und was Sie während des Unterrichts getan haben Zuallererst verfügen Sie also bereits über die Grundkenntnisse der FINMA-Schnittstelle Vielleicht weißt du nicht genau, wie man Delig macht und wo all die Funktionen sind, aber mehr oder weniger mit meiner Übung wirst du in der Lage sein, einige Instagram-Geschichten zu erstellen Die zweite Sache ist, dass du weißt, dass Smart Animate eine wirklich coole Figma-Funktion ist, weil sie dir hilft, alles zu animieren, was Wenn wir zum Beispiel Frame A und Free B haben, wird alles, was sich dazwischen befindet, automatisch von Figma ausgeführt , basierend auf dem Vergleich Wir alle wissen also, dass Smart Animate nach den Unterschieden und Ähnlichkeiten in Bezug auf die Ebenen sucht nach den Unterschieden und Ähnlichkeiten in Bezug auf die Aus diesem Grund habe ich Ihnen während des gesamten Kurses gezeigt, dass die Reihenfolge der Ebenen wichtig ist, und, Sie wissen schon, dass einige Elemente dupliziert Es ist wichtig, von einem bestimmten Frame zu einem anderen zu wechseln. Und wir wissen auch, wie man Komponenten erstellt, was besonders wichtig ist, wenn Sie komplexere Animationen haben also keine Angst davor. Und natürlich lade ich Sie herzlich ein, sich auch andere FINMA-Kurse anzusehen Und wenn Sie spezielle Wünsche für die zukünftigen Kurse von mir haben , lassen Sie es mich im Kommentarbereich wissen. Ich würde mich sehr freuen, sie alle zu überprüfen Du kannst mich auch auf Instagram unter h5d awesome erreichen oder du kannst auf meinem Twitter-Account nachschauen , der Agana Ploha ist. Das Und ich hoffe, dich dort zu sehen. Danke, dass Sie mitgemacht haben, und ich drücke die Daumen für Ihr Klassenprojekt. Nur zur Erinnerung: Ihr Klassenprojekt besteht darin, eine der Animationen nachzubilden , die ich Ihnen präsentiert habe, oder etwas völlig Neues zu kreieren, auf den Techniken basiert das auf den Techniken basiert, die Sie mit mir gelernt haben Bitte begrüßen Sie die Arbeit, die Sie im Abschnitt mit den Klassenprojekten vorbereitet haben im Abschnitt mit den Klassenprojekten vorbereitet Sie können entweder den Link zum Video einfügen oder das Video einbetten Wenn Sie Fragen haben, lassen Sie es mich einfach wissen. Also zuerst werden drei Personen, die ihre Arbeit in den Abschnitten für die Klassenprojekte einreichen ihre Arbeit in den Abschnitten für die Klassenprojekte eine exklusive Einzelsitzung mit mir haben , die eine halbe Stunde helfen wird. Wenn du also über deine Karriere oder vielleicht über Techniken in Figma oder über andere Dinge im Zusammenhang mit Programmieren oder Designen sprechen möchtest deine Karriere oder vielleicht über Techniken in Figma oder über andere Dinge , beantworte ich gerne deine Fragen Denkt also daran, zuerst, liebe Leute, ich warte auf euch, und ich hoffe, ihr habt Spaß daran , die Animationen zu erstellen