Wie man Adobe Animate CC 2019 HTML5 Canvas in WordPress responsiv gestaltet

1. Einführung: in diesem Tutorial möchte ich Sie erläutern, wie Sie eine grundlegende Animation in Adobe animate CC 2019 erstellen. Ich habe mein berühmtes kleines rotes Quadrat hier auf Was ich tun möchte, ist, ich möchte es aus Adobe nehmen , animieren und in WordPress importiert. Ich habe hier ein Beispiel für das fertige Produkt. Dies ist eine voll ansprechende Adobe Animate-Datei mit diesem kleinen roten Quadrat bewegt sich über den Bildschirm. Wie Sie sehen können, kann ich es verkleinern. Aiken vergrössern es. Es ist voll reaktionsschnell. Und wenn ich meinen Browser noch größer mache, bleibt er einfach an Ort und Stelle. Ich werde Sie durch den Prozess des Exports aus Adobe animate und in WordPress . Ich benutze Virgin Five. Also werde ich eine voll ansprechende Adobe animieren html fünf Datei erstellen und in der WordPress hochladen , die Sie auf Ihrer Website verwenden können. Lasst uns loslegen 2. Erstellung deines HTML5-Animationsprojekts: Alles klar, werde dich nur nicht wissen lassen, bevor du zu weit gehst, dass ich Adobe animate CC 2019 ausführe. Wenn Sie also 2018 lesen, achten Sie darauf, es auf die Millionenversion zu aktualisieren. Wenn Sie Creative Cloud haben, wird diese fast automatisch aktualisiert. Also seien Sie sich bewusst. Alles, was ich tue, ist in der brandneuen Version von Adobe Animate CC 2019 enthalten. Bringen wir den Doc da rüber und gehen aus dem Weg. Das erste, was ich tun möchte, wenn ich mein Design eingerichtet habe, ist, dass ich sicherstellen möchte, dass ich die Plattform überprüft habe Geben Sie meine Version von Animate aus irgendeinem Grund ein, und dies könnte Ihnen gehören oder nicht Ihr gehören. Standardeinstellungen für Action Script 3.0 Aktion -Skript 3.0. Grundsätzlich starb im Jahr 2012, als Steve Jobs, als er noch am Leben war, im Grunde gesagt, blinkt tot und tötete die Plattform. Also Geld, Das ist, was vor sieben Jahren, Also im Grunde, was passiert ist, war Adobe musste Scramble und erstellen Sie ein neues Format für Adobe animieren, und sie taten, dass in Form von HTML fünf Leinwand. Es war eine lange Zeit gekommen, aber ich fühle, dass es großartig läuft. Und ich liebe, was sie bisher getan haben. Okay, also der erste, der sicherstellt, dass ich Action-Skript 3.0 in der HTML-Fünf-Canvas sagen möchte. Jetzt können Sie diesen Standard setzen, wenn Sie wollen, aber für mein Design und auch für einfache Mathematik, weil ich ein Bachelor von bildenden Künsten Major bin. Für mich kann Mathematik schwierig sein. Ich werde später 1000 mal 500 sagen. Rahmani verwendet dies als das Verhältnis oder der Prozentsatz von mit zwei Höhe. Das sind 50%. Also für mich ist es einfach Mathematik. Wenn du 1000 mal 1000 hast, ist das völlig in Ordnung. Aber notieren Sie sich das für die Straße runter. Ich werde mit 1000 von 500 html fünf Leinwand bleiben und erstellen. Und das ist Ihre grundlegende Einrichtung für Adobe Animate, um sicherzustellen, dass Cannabis hier oben steht, wenn Sie das falsche Format erstellen. Wenn ich also Action Thrips 3.0 wähle, was im Wesentlichen eine schnelle Datei ist, wird es hier oben nichts sagen. Es wird nicht sagen, Leinwand. Wenn Sie also das Wort Canvas nicht sehen, wird es falsch eingerichtet. Der Grund, warum ich es jetzt rausmache, ist, dass es keine Möglichkeit gibt, sich von der Aktion zu ändern. Drehbuch drei. Sie sind im Grunde, du sagst nur, welche Version von Flash. Wenn Sie dies also falsch von der Leinwand zu Swift einrichten, gibt es kein Zurück und Sie müssen Ihr gesamtes Design neu starten. Seien Sie sich dessen also von Anfang an bewusst, und ich mache einen wirklich großen Punkt davon, um sicherzustellen, dass Sie Canvas gegen Action-Skript 3.0 auswählen ! 3. Grundlegende Animation: Ordnung, lassen Sie uns eine grundlegende Animation in Adobe Animate CC 2019 im HTML-Fünf-Zeichenbereich erstellen. Lassen Sie mich die Nicht-Canvas-Version schließen. Ich werde ein kleines Rechteck zeichnen. Wenig sind für Rechteck. Und in meinem Beispiel habe ich ein rotes Quadrat benutzt, also werde ich diesen roten Look behalten, ich halte die Shift-Taste gedrückt und zeichne jetzt einfach ein einfaches Quadrat, animiert, ich kann es nicht einfach in diesem Design behalten. Ich muss es tatsächlich in einen Movieclip stecken. Also werde ich tatsächlich doppelklicken, weil der Grund, warum ich diese alte Schule Technik doppelklicke und ich werde es Ihnen zeigen, wenn ich einen Strich um mein Design setze, lassen Sie uns wie einen orangefarbenen Strich hinzufügen , und ich zeichne dieses Rechteck Würde Sie wahrscheinlich nicht Erkennen Ups, Seine Lassen Sie uns es auf diese Weise tun Wenn dieser Strich war seine massive Größe Wenn ich Einzelklick, Ich bekomme nur die Füllung. Aber wenn ich doppelklicke, widerspreche ich tatsächlich den Phil und den Schlaganfall. Dies ist eigentlich von einem Weg, Weg, Weg, Weg, Weg zurück in die Macromedia und sogar die zukünftigen Wellentage. Das ist, wie lange ich zurück in animierte Schrägstrich Flash, dass, wenn Sie doppelklicken Sie Ihre Zeichnung Sie Konflikt Whoa, dort, meine kleine magische Maus auf Steroide. Ich kann doppelklicken und den Phil und den Schlaganfall bekommen. Da ich keinen Phil habe, habe ich normalerweise noch DoubleClick nur für den Fall, dass ich vergesse, also doppelklicke ich das viel. Also, wenn Sie ein wenig Doppelklick im Hintergrund hören nur notiert, was ich dio So werde ich steuern Klicken, und ich werde nach unten gehen, um Symbol zu konvertieren. Ich habe tatsächlich eine alte Schule Tastatur hier auf meinem Computer Schreibtisch, die tatsächlich die f-Tasten hat . Und ich liebe es, weil die f-Tasten immer noch in animierten aus den Macromedia und aus den zukünftigen Wave Tagen herumhängten . Danke, Adobe, Adobe, deiner berühmten Regel folgst, dass sie, sobald sie eingeht, nie herauskommt. Aber leider schweife ich ab. Ich werde sagen, konvertieren Sie zu Symbol und ich werde sagen Red Square Jetzt hier ist Sache, die Sie den Namen des Symbols bemerken könnte Großbuchstaben sein. Kleinbuchstaben Platz ist, was Sie wollen. Das ist intern. Scheint sich um den Namen hier auf der Straße zu sorgen. Wir werden über Dateinamen besorgt sein, aber für genau hier kann essen, was Sie wollen. Ich wähle Movieclip den Button und die Grafik aus einer vergangenen Ära in den neunziger Jahren und die zweitausende Filmclip-Registrierung Say Ok, in Ordnung . Nun, wenn Sie bemerken, wenn Sie auf dieses rote Quadrat klicken, erhalten Sie nicht den kleinen Punkt Sie erhalten nur eine blaue Linie mit der Registrierungspunkt oben links. Ich werde jetzt die Zehe Schicht eins unten gehen und doppelklicken. Jetzt hier sagen wichtig hat sich von der neuen Version von Animate geändert. Wenn ich Red Square tippe und ein Leerzeichen darin habe, wird es tatsächlich zu einem Unterstrich konvertiert. Es wird also Underscore Square gelesen werden. Es gibt eine Alarmbox, die auftaucht, aber seitdem habe ich gesagt: sie mir jetzt nicht weiter. Natürlich unterrichte ich diese Klasse, und ich wollte, dass sie auftaucht. Aber es wird Sie warnen, wenn Sie zuvor nicht animate verwendet haben oder Sie ein Leerzeichen darin setzen, dass es keine Leerzeichen zulässt. Dies ist eine brandneue Sache, die sich in Adobe animate CC 2019 geändert hat. Also hier werde ich Red Underscore Square sagen, obwohl es dasselbe ist, nur um sicherzustellen, dass ich an der richtigen Stelle bin. Jetzt ist, wie Sie den Animationsrahmen erstellen. Einer wird gleich hier sein. Ich werde mich wie Frame 20 Büro bewegen, um eine langsame Bewegung zu sein, und ich habe F-Tasten auf meiner Tastatur. jedoch Wenn Sie diesjedochnicht tun, können Sie eine der wenigen Möglichkeiten verwenden, wenn ich die Taste F sechs drücke, die einen neuen Schlüsselrahmen erstellt . Wenn ich es rückgängig mache, kann ich auch den Schlüsselrahmen steuern, klicken und sagen, einfügen. Das Einzigartige ist, dass es die Taste F sechs hier nicht zeigt, aber ich kann immer noch sehen, einfügen Schlüsselrahmen und es ist genau da und der dritte Weg geht nach oben. Zeitachse einfügen und einfügen. Nun, da ist es, Schlüsselrahmen jetzt hier sagen einzigartig. Es zeigt immer noch nicht die Taste F sechs. jedoch Die Taste F sechs wirdjedochweiterhin funktionieren. Nehmen Sie die Phantom F sechs Taste, die ich gerade aus zwei Jahrzehnten der Verwendung von Adobe animate Schrägstrich gelernt habe, Schrägstrich Zukunft. Splash auf die Kleinigkeit Frage, wie immer wieder zu später kommen. Also werde ich einen Schlüsselrahmen erstellen. Und zumindest, in meinem Fall, um 20 und einfach so verlieren hin und her. Ich mache einen Schlüsselrahmen ungerahmt bis 40 F sechs für mich. Sie können aber auch Click, Insert, Keyframe steuern Insert, oder Timeline und Keyframe einfügen. Sie können eines von drei Dingen tun. Ich wollte drei grundlegende Schlüsselbilder aufstellen, und jetzt werde ich das Quadrat hin und her bewegen. 4. Erstelle eine klassische Animation: Alles klar. Jetzt, da wir unsere drei Schlüsselrahmen eingerichtet haben, bewegen wir dieses Quadrat hin und her. Was ich tun werde, ist, dass ich Click kontrollieren werde oder ich denke, auf dem PC Es ist Ault. Wenn Sie die Antwort kennen, lassen Sie mich bitte die Kommentare wissen. Ich bin ein Mac-Mensch, also rate ich immer, wenn es um die PC-Seite in Bezug auf die Tastenkombinationen und Steuerelemente geht oder wenn Sie eine Maus haben, die zwei Mausklicks ist, habe ich nur die Magic Mountain hat nur eine, aber einige Mäuse müssen. Sie können mit der rechten Maustaste klicken und dieses Kontextmenü ziehen und ich werde sagen, erstellen Sie klassische Tween. Wenn Sie Adobe animate oder flash in der Vergangenheit verwendet haben,sind Sie an eine hellere Farbe lila gewöhnt. Wenn Sie Adobe animate oder flash in der Vergangenheit verwendet haben, Sie haben tatsächlich die Farbe verändert. Ich bin mir nicht ganz sicher, warum. Vielleicht war ein Brief einfach müde von dem langweiligen Purpur nach 24 Jahren. So sind sie seitdem mit einem dunkleren Farbton von Purpur gegangen. Mach dir keine Sorgen, wenn du an diesen anderen Farbton gewöhnt bist, es ist okay, meine zwei Cent würde ich es nicht ändern, aber dann arbeite ich nicht für Adobe. Also werde ich tun, wird jetzt diese grundlegende Animation haben. Wenn ich das über die 20 zurückschiebe, werden Sie feststellen, dass sich nichts bewegt. Das liegt daran, dass der Schlüsselrahmen auf Frame eins und der Schlüsselrahmen bei 1 20 genau gleich sind. Aber wenn ich Magic Mouse Hallo dort. Wenn ich das hier überziehe, halte ich die Umschalttaste. Klicken und ziehen Sie. Und jetzt, wenn ich zurück zu Frame eine Note, die sie immer so langsam bewegt, kann ich nicht die Eingabetaste auf meiner Tastatur, um die Geschwindigkeit anzuzeigen, und drücken Sie erneut die Eingabetaste, um sie zu stoppen und es bewegt sich. Als Nächstes werde ich diesen Prozess wiederholen. Ich habe eine sehr auslösende glückliche magische Maus, offenbar heute. Also werde ich das Klicken kontrollieren, wenigstens auf meinen. Ich habe es auf 20 Jahren. Vielleicht fühlen Sie sich anders Wenn es schneller, langsamer, Ich werde sagen, erstellen Sie klassische Tween und weil 40 Spiele auf den ersten Frame es wird einfach springen und gehen hin und her. Wenn ich also die Eingabetaste hätte, wird es ein paar Sekunden dauern, aber es wird von rechts hintere Zehe links gehen und es wird immer wieder und immer wieder schleifen . Nun, noch einmal, Aiken, sag Schleife. Wenn ich das in der Vorschau sehen möchte, gehe ich nicht zu wem ich das ausschalten sollte. Das war eine schlechte Idee. Versuchen Sie nicht, neue Dinge zwischen Ihrer üblichen Routine zu tun, Hayden. Also werde ich diese Schleife nicht aufstellen lassen. Ich nehme das zurück. Ich wollte es so behalten, aber standardmäßig wird dies umherlaufen und herum und herum, bis ich sage, stopp. Oder ich schlug vor, nur einmal zu passieren. Ich will, dass das immer und immer wieder spielt, also werde ich es so behalten, wie es geht. Aber so erstellen Sie eine grundlegende Animation innerhalb von Adobe animate CC 2019. 5. Vorschau der Animation und Vorschau: Alles klar, das ist alles gut und gut. Aber lassen Sie uns diese Datei wirklich speichern. haben wir noch nicht getan. Und lassen Sie uns eine Vorschau anzeigen. Mit einem Browser unserer Wahl gehe ich zur Datei und speichere sie. Nun, wissen Sie, dass, wenn Sie es zum ersten Mal speichern, dass das Speichern und Speichern, wie technisch gesehen dasselbe ist, also werde ich Asa's befehligen. Ich bin immer ein Shortcut-Fan. Ich habe einen Ordner namens Animate Example, und ich werde diesen einen neuen Strich roten Strich Quadrat nennen. Nun, beachten Sie, dass ich auch verwendet habe, ist dies wichtig Kleinbuchstaben und keine Leerzeichen. Dies wird schließlich zu meinem Dateinamen werden, wenn es darum geht, die Arbeit hochzuladen. Der Computer sowohl PC als auch Mac ist nicht que empfindlich, was bedeutet, dass Sie in es laufen könnte ein falsches Positiv genannt wird. Das bedeutet, dass es dem Computer egal ist, ob Sie Groß- oder Kleinbuchstaben haben. Das Web, vor allem Webserver. Wo wir diese Arbeit anbringen werden, ist K sensibel. Also habe ich eine Regel in meinem Klassenzimmer, wenn ich lehre, dass alle Dateinamen immer Kleinbuchstaben sind. Sie werden ein paar Dinge in der Zukunft bemerken. Wir werden Großbuchstaben verwenden. Aber in den meisten Fällen werden alle Dateinamen immer Kleinbuchstaben sein. Und so und Sie sollten auch keine Leerzeichen haben. Also und wenn Sie super technische bekommen wollen, sollten Sie auch kein Asterix ist oder irgendein Sonderzeichen haben. Also denken Sie an Buchstaben, Zahlen und an die Stelle der Räume zu nehmen, können Sie entweder einen Bindestrich verwenden oder unterstreichen diese wirtschaftlichen Werkzeug-Regeln, die ich habe, wo ich sagen, neue Bindestrich, Red Dash Quadrat oder neue Unterstrich Red Underscore Square. Also lassen Sie uns diese Datei speichern. Und jetzt, da es gespeichert ist, werde ich eine Vorschau dieses ganzen Designs ansehen. Dies ist eine Rückwurf-Ära, wieder eine. Ich bin ein Befehl und die Eingabetaste. Und wenn sie das auf meinem anderen Computerbildschirm machen, ziehe ich es über. Ich habe ein rotes Quadrat, das sich hin und her bewegt. Dies ist ein lokaler Host, also wird er auf meinem lokalen Computer abgespielt, und er kann skalieren oder nicht, was er nicht. Wenn Sie es also bemerken, wenn ich meinen Browser verschiebe, wird es überhaupt nicht skaliert. Aber das ist nur der erste Schritt, den ich in der Vorschau speichern möchte. , Je mehr Zeit, die Vorschau kann, bedeutet, desto mehr Male kann ich schnell beheben, falls ich etwas durcheinander bringen kann. Und wenn Sie eine Beschichtung entwerfen, verbringen Sie fast 90% Ihrer Zeit mit dem Debuggen und 10% mit dem Design. Also, wenn, , Dinge zu tun,die 567 Schritte erfordern, überprüfe ich immer, dass ich schnell arbeiten kann, um sicherzustellen, dass ich keinen Schritt vermisse oder Dinge nicht funktionieren. Ganz am Ende. Ich wollte während des gesamten Prozesses sicherstellen, dass es funktioniert, da Sie sehen können, wie sich das hin und her bewegt. Was ich mich als nächstes frage, ist, dass ich ein paar Einstellungen optimieren werde, und ich werde das reaktionsschnell machen, weil es momentan nicht reagiert. Es bewegt sich nicht. Es ist genau so, wie es ist. Und im Web sollte alles reaktionsschnell sein. Es sollte nicht statisch sein in dieser neuen Ära des Web, wo wir Tablets, Computer und Handys haben , die heutzutage fast Tablet-Größe sind. Aber trotzdem möchte ich sicherstellen, dass sich dies auf allen verschiedenen Plattformen hin und her bewegt . 6. Das Projekt reaktionsfähig und kein sprite machen: Ordnung, lassen Sie uns etwas Zeit in den Veröffentlichungseinstellungen verbringen, weil die Animation funktioniert. Ich werde zurück zur Timeline wechseln, aber ich muss ein paar Anpassungen vornehmen, die ich tun möchte, um sicherzustellen, dass dies vollständig reagiert und auf die bestmögliche Art und Weise exportiert wird . Ich werde die Datei in den veröffentlichten Einstellungen sagen und ein paar Dinge in meinen veröffentlichten Einstellungen ändern . Ich gehe zuerst zu den Bildeinstellungen. Ich möchte kein Dokument als Textur exportieren, weil ich möchte, dass dies die vektorbasierte Form exportiert und nicht in Bilder verwandelt. Es sagt eine bessere Leistung, größere Größe. Ich verstehe es gemein. Deaktivieren Sie, dass, wenn ich die Dokumente der Textur deaktiviert habe, es mich dann aufgefordert, Bilder als Assets zu exportieren. Und könntest du diese Bilder trotz Cheats kombinieren? Ich werde das auch deaktivieren. Ich habe nur eine vektorbasierte Form, aber und das ist ein wenig fortgeschrittener, um in zu kommen. Aber mein Ding ist wie ein passiertes Through-System zu haben, was bedeutet, dass ich nicht möchte, dass animieren meine Bilder anpassen oder ändern oder gruppieren, um ein so genanntes Sprite Sheet. Ich wollte es in Ruhe lassen, also stelle ich immer sicher, dass ich das Kontrollkästchen Das Exportdokument ist Textur, und ich exportiere Bild-Assets ist ebenfalls deaktiviert. Jetzt, wo ich die Bildeinstellungen deaktiviert habe, werde ich das Basic durchgehen und das ist wichtig. Was ich tun möchte, ist, dass ich reaktionsschnell machen möchte. Das ist also eigentlich ein sehr leistungsfähiges Werkzeug. Stellen Sie sowohl reaktionsschnell als auch skalieren Sie den sichtbaren Bereich, der in die Ansicht passt Was das bedeutet, ist, wenn ich den Browser entweder mit oder nach Höhe justiere, wird er sich auf die Seite füllen, die er zuerst berührt. Also möchte ich sagen, dass sowohl reaktionsschnell als auch skaliert werden, um den sichtbaren Bereich zu füllen, der in den Blick passt. Ich werde sagen, „ Veröffentlichen Sie das hier. Und es veröffentlicht jetzt meine Arbeit dort, wo ich meine Datei gespeichert habe. Lass uns finden, dass ich auf einem anderen Bildschirm gehen werde, während ich rede. Und da ist es. Nun, in einem vorherigen Beispiel, habe ich für eine andere Klasse getan. Ich hatte den Roten Platz, also werde ich den Roten Platz, den Roten Platz und den Roten Platz loswerden , und ich brauche keine Bilder mehr. Also, wenn ich auf die neue Red Square HTML-Datei doppelklicke, lassen Sie mich meine vorherige Ausgabe schließen Jetzt können Sie sehen bewegen hin und her. Aber hier ist etwas Wichtiges. Die neue Version wird nun je nach dem Ort skaliert, an dem sie sich im Browser befindet. Wenn du das erste Video gesehen hast, habe ich kleine blaue Quadrate gesetzt und alles zeigte dir auch. Wenn du das erste Video gesehen hast, Was die kleinen blauen Quadrate taten, war nur die Ecken meines Designs zu zeigen. Aber dafür für so ziemlich ein Okay, ich habe nur ein rotes Quadrat hüpft hin und her. Und wenn ich die Größe meines Browsers basierend auf dem mit oder der Höhe ändere, bleibt er im Blick. Also, jetzt, da ich keine Animation habe und ich es skalierbar habe, lassen Sie uns jetzt diese Stücke zu unserer WordPress-Datei bewegen und Länge, ähm, oben. 7. Animieren auf deine Website: Alles in Ordnung. Nun, das erfordert ein wenig Arbeit auf Ihrer Seite, denn jede Website hat sich ein wenig anders eingerichtet. Also, was ich benutze, als ich eine Sache namens Cyber Duck benutze. Es ist ein kostenloses kleines Tool, sowohl für Mac als auch für PC, aber in Cyber Duck habe ich genau hier können Sie über Cyber Ente sehen. Da ist es, kleine Ente zu halten. Lassen Sie mich das Dokument verschieben, Cyber Ente bitten Sie, sich auf Ihrer Website einzuloggen. Und vor allem, wenn Sie eine selbst gehostete Wordpress verwenden, haben Sie Zugriff auf diese. Aber das könnte ein wenig Arbeit dauern, um herauszufinden, was Ihre FTP-Einstellungen sind. FTP steht für Dateiübertragungsprotokoll und alle grundlegenden selbst gehosteten Server mit WordPress sollten das haben, es sei denn, Ihr Wort oder Sie Hosting-Unternehmen blockiert Sie. Beachten Sie also bei diesem Schritt, Sie möglicherweise das Video anhalten müssen, während Sie herausfinden, was Ihre Einstellungen sind. Aber fast alle FTP-Tools. Also in Cyber Doc, wird es mich drei Dinge fragen. Und wenn Sie sftp verwenden, haben Sie ein paar verschiedene Setups direkt hier drin. Es gibt auch Zeug für Fenster für Rückenflamme. Für Amazon. Sie haben ein paar verschiedene Stücke als auch hier mit Dropbox, Google Drive, Microsoft all das gute Zeug. Aber ich verwende grundlegendes FTP- oder Dateiübertragungsprotokoll. Ich habe meine Daten bereits von einem Nautilus Designs Konto eingegeben, und ich habe mein ftp eingerichtet und ich schließe dieses Fenster. Ich kann sehen, dass in meinem Home-Ordner, Mein Basis-Level-Ordner von WordPress. Ich habe ein paar von Ordnern, also habe ich eine Sache namens WordPress fünf für nur diesen Demonstrationszweck. Aber das ist, wo meine WordPress eingereicht leben und atmen. Es ist wichtig, keine dieser Dateien zu berühren oder WordPress könnte völlig abstürzen. Und ich meine es ernst. In Ordnung. Was ich tun möchte, ist, dass ich einen neuen Ordner erstellen möchte, obwohl innerhalb von Cyber Ducati die gleichen Tastenanschläge wie der Mac sind. So Befehl verschieben Feind Macintosh, wo es auf dem PC gesteuert werden könnte. Wenn ich auf dem PC falsch bin, dann lassen Sie es mich wissen. Ich werde das erschaffen. Aber ich werde auch meine Regeln für Dateinamen befolgen. Ich werde sagen, Kleinbuchstaben animieren, weil das das Foto ist. Alle meine Animationen von Adobe Animate gehen zu gehen. Ich werde sagen, erstellen und Pops und neuen Ordner Beachten Sie, dass dies keine Auswirkungen auf Projekte ist lang. Sie haben keinen WordPress-Namen namens Animate in Salonika Page oder einen Beitrag. Sie können diese animierten Strichdateien auch benennen oder HTML-fünf Dateien animieren, nur für den Fall, dass Sie etwas namens animate haben könnten. Tue ich nicht. Also bin ich sicher, es nur animieren zu nennen. Ich werde das einsperren. Also hatte ich das Foto namens Animate, und ich werde doppelklicken und in diesen Ordner gehen. Wie Sie hier sehen können, sagt es Websites Schrägstrich WordPress gestrichelt fünf Schrägstrich animieren keine Leerzeichen und keine Großbuchstaben . Was ich als Nächstes wollte, ist, dass ich drei Dinge schleppen werde oder ich sollte zwei Dinge sagen. Sie haben keinen Image-Ordner. Aber wenn Sie keinen Bilderordner haben, den Sie verwendet haben oder wenn Sie einen J peg oder ein Geschenk mitgebracht , wären das die einzigen beiden Bilder, die vielleicht eine PNG-Datei bringen, abhängig von dem, was Sie in bringen, dass Sie einen Bilderordner haben. Also, wenn Sie das haben, wählen Sie das aus. Aber ich werde nur das Java-Skript und die HTML-Datei auswählen, die ich nicht brauche das f l A. Wenn Sie möchten, können Sie die f l A-Datei vollständig hochladen, wenn Sie sie nur für die sichere Haltung auf Ihrem Server behalten möchten . Aber wir werden das nicht nutzen, also ist die f l A Ihre Arbeitsakte vier. Adobe animiert die F L. Eine Erweiterung ist immer noch vorhanden, obwohl sie animiert ist. F l ein Blitz. Dinge ändern sich nicht. Also lade ich dann dieses neue Rote Quadrat hoch. Beachten Sie die Kleinbuchstaben, das Nicht-Leerzeichen, damit ich dies in meine FTP-Software ziehen kann. Dieser Fall Cyber Ente Loslassen Transfers. Hey, den Upload abgeschlossen. Ich habe jetzt neue Rottöne hochgeladen. Wo html in neuen roten Quadrat Punkt Js für Java-Skript. Lassen Sie uns nun eine Vorschau auf einem Web-Browser. 8. Vorschau deines HTML5-Projekt: erinnere mich, sagte ich, bis Dinge sehr schnell zu testen, wie ein tun Dinge Schritt für Schritt. Das ist eines dieser Dinger. Also in meinem FTP für meine Einrichtung, mein Ordner ist mein Domain-Name dot com dot net info dot was auch immer Schrägstrich Websites Schrägstrich WordPress Bindestrich fünf Schrägstrich animieren Schrägstrich neue rot, wo diese Schrägstriche zeigen Ordnernamen . Also in diesem Fall, Köpfe Nautilus Designs Ich werde sagen, dash Websites, Aiken Typ richtig Websites dash WordPress, Bindestrich fünf, Bindestrich, animieren und dann nicht leid, nicht Strich Alle diese mal Schrägstrich in diesem Fall, Köpfe werden neue Strich roten Strich Quadrat, dass html und f eine Vorschau es Es wird entweder Ihnen eine richtige Antwort geben oder wenn ich absichtlich vielleicht mit einem Großbuchstaben s Probleme buchstabiert, und es sagt, Oops, Diese Seite konnte nicht gefunden werden, indem Sie Ihre Luft für, 04 Seite. Beachten Sie also, dass hier die K-Empfindlichkeit eintritt. Capital ass ist anders als ein Kleinbuchstaben S ist lang, wie Sie sehen können, Ihr Projekt bewegt sich hin und her, Sie sind auf dem richtigen Schritt, um jetzt setzen dies in ein WordPress. Der erste Schritt wird im zweiten Schritt hochgeladen, um es zu testen. Und jetzt ist unser dritter und vierter Schritt, ein wenig Code zu schreiben. Mach dir keine Sorgen. Es wird in Ordnung sein und in unsere WordPress-Setup integriert. 9. CSS in WordPress schreiben: Alles klar. Unser nächster Schritt ist jetzt das Log in Tow. WordPress, und ein wenig CSS zu schreiben, um diese Arbeit zu machen. Jetztwissen Sie nur, wissen Sie nur, wo ich bin. Ich benutze wir uns die Updates ansehen. Ich bin in einem WordPress 5.0 Punkt drei. jedoch Eines habe ichjedochetwas anders gemacht. So sehr ich liebe die neue Version der WordPress-Beiträge und Seiten, was heißt Gutenberg ? Ich habe eine Affinität zu den Klassikern. Und so habe ich in diesem Design einen Stecker installiert. Yosi hoch. Es gibt eine neue Version. Weißt du was? Ich bin auf dem Update. Es ist immer nervös, wenn ich Dinge live vor der Kamera mache und hoffentlich funktioniert es. Aber ich habe tatsächlich einen Plug in namens Classic Editor für dieses Tutorial installiert. Viele von Ihnen werden auf einer älteren Version von WordPress sein, aber wissen Sie, dass Sie dies sowohl mit der neuen Virgin of Version fünf tun können, die eine neue Einrichtung von bezahlt ist in Beiträgen hat, aber ich installierte diese Sache namens Classic Editor. Das ist nur alles. Ich habe ein weiteres Stück auch zur Kenntnis genommen, dass ich das Grundthema 2017 verwende. So haben Sie vielleicht einen völlig anderen Look als Ihr Design, wenn Sie ein anderes Thema haben. Verschiedenes Setup. Aber ich habe ein ziemlich grundlegendes etabliertes Design in WordPress. Also möchte ich meine CSS jetzt CS esque Vans für Cascading Stylesheets bearbeiten. Einige Designs haben je nachdem, was Sie installiert haben, einen benutzerdefinierten CSS-Bereich. In diesem Fall verwende ich die grundlegende 2017er-Version und daher habe ich nicht die Möglichkeit, einen benutzerdefinierten CSS-Bereich innerhalb eines Themas irgendwo hier hinzuzufügen . Also muss ich in meinen Redakteur gehen, um das zu erreichen. Wenn du dies zum ersten Mal machst, erhältst du eine Warnmeldung, die besagt: Hey, sei vorsichtig, du berührst deine Dateien. Also seien Sie vorsichtig So können Sie auch Ihre CSS bearbeiten Diese zog in CSS Editor gebaut. Ich gehe irgendwie eine kleine alte Schule mit diesem Design und gehe einfach mit dem grundlegenden CSS. Wieder einmal könnte dies irgendwo anders in Ihrem Thema gehen. Seien Sie sich also bewusst, dass dies möglicherweise nicht der gleiche Ort ist, sondern zu Demonstrationszwecken. Ich verwende eine sehr abgezogene Version von WordPress von Onley mit der Standardeinstellung. Also in dieser 2017er Version im Stylesheet ging ich wie Zeile 4332 nach unten. Es ist eine Menge CSS. Und hier drinnen werde ich runtergehen wie Monotypen der Zeile 43 34, ähm, Code. Ich tippe, Periode und whoa, so hast du meine Schlüssel nicht. Container animieren. Nun beachten Sie, dass in früheren Versionen von Dateinamen, Ich sagte, verwenden Sie keine Großbuchstaben. Das liegt an dir. Ich habe eine alte Art der Programmierung, wo ich das erste Wort habe, wenn es um CSS geht. Dies kommt tatsächlich von Flash Way, weit zurück in den frühen, tatsächlich, wie Mitte der neunziger Jahre zu den zweitausenden, wo als das, was man Camel Fall in Kamel Fällen genannt . Das erste Wort in Kleinbuchstaben. Zweites Wort, erster Buchstabe Großbuchstabe wie ein Kamelhöcker. Also wirst du sehen, wie ich das mache. In all meinen Beispielen von CSS und CSS geht mit HTML. Dieser Zeitraum stellt also eine Klasse dar. Wie ich schon sagte, ein wenig Codierung. Aber das sind etwa sechs Zeilen. Und mach dir keine Sorgen mehr. Jemand zu sagen, Periode animieren Container. Ich werde den Raum treffen und ich werde sagen, offene lockige Klammer, die der Schlüssel rechts zu Ihrem peaky und Verschiebung geschweifte Klammer öffnet und schließt. Und was ich die Retur-Taste traf es in dichtem meinem Typ und setzt die enge Klammer eine Ebene darunter. Ich sage Position, Doppelpunkt relativ und Halbpunkt, und ich werde Ihnen zeigen, warum das in ein paar weiteren Linien des Mantels ist. Ich werde es nicht geben etwas Platz standardmäßig, also werde ich sagen, Rand unten 10 p x Semikolon Das gibt nur ein wenig Platz unter Ihrer Animation für jeden Typ, irgendwelche Absätze, irgendwelche Bilder unten zu sein. Dies ist optional. Wenn Sie keinen Rand haben möchten, können Sie ihn direkt herausnehmen. Das Wichtigste ist, dass wir eine Position relativ haben, also werde ich 10 Pixel oder 10 p x und den Semikolon haben. Jetzt gehen Sie für ein paar Zeilen nach unten und sagen animieren Container wird tippen Das gleiche Wort ist oben gebaut, also stellen Sie sicher, was? Wie hast du dein Wort hier geschrieben, dass es unten gleich geschrieben ist? Ich werde sagen, ich Frame und ich werde Ihnen zeigen, warum im nächsten Video werde ich sagen, ich rahmen keine Periode Großbuchstaben Halten Sie alles Kleinbuchstaben Sie müssen ich Frames geschrieben haben, die genau so bemerkt Schalten Sie grün Wenn ich Großbuchstaben mache ich Rahmen tatsächlich grün bleiben, was sollte nicht passieren Aber aus Gründen dieses Zwecks, lassen Sie uns es niedriger Fall I Rahmen halten und wiederholen Sie den Vorgang noch einmal Also werde ich sagen offene lockige Klammer. Wenn ich den richtigen Schlüssel tippe, gehen wir. Return-Schlüssel. Ich schreibe ein paar Zeilen Code. Ich sage Position, Colon Absolute, wenn ich es buchstabieren kann, ist es das. Und halb, Colon, dass in dieser Zeile, werde ich sagen, Top Null links Null mit, wenn ich es wieder mit Colon buchstabieren kann. Wow, Mikey Taping Nun, ich rede nicht plötzlich stark. In Ordnung. Mit 100% und Höhe 100% und Semikolon, das ist das alles CSS Sie müssen auf diesem Bildschirm eingeben . Es gibt eine weitere Zeile einen Typ auf dem nächsten Bildschirm. Aber lassen Sie uns das zusammenbrechen. Also verstehen wir, wie das in CSS funktioniert oder diesen animierten Container kaskadiert, wird draußen oder um meine Animation sitzen , die in einem so genannten Augenrahmen sein wird. Die Animation wird sich dann basierend auf der Größe des animierten Containers bewegen, der besagt , füllen Sie den Raum von mit und Höhe. Es scheint wie ein Quadrat, weil mit einem 100% und Höhe 100%. Aber wir sagen nur, füllen Sie die Box auf allen Seiten und stellen Sie sicher, dass die Position oben links ist und es keinen Platz in der oberen oder linken Seite. Es ist also fast nur das Zurücksetzen von Dingen im Web. Wir setzen viel zurück. Wir mögen die Dinge oben links nicht. Sie können sie auf der Straße hinunter bewegen, aber das ist der gesamte Code, den Sie in Ihren CSS-Bereich einfügen müssen. Ich habe den CSS-Editor nicht eingefügt, und Sie haben möglicherweise einen benutzerdefinierten CSS-Bereich in Ihrem Thema. Aber noch einmal ist dies eine animierte Containerposition. Relativer Rand unten animieren Container I Frame-Position. Absolute obere Null links Null mit 100% und Höhe 100%. Beachten Sie, dass Sie nicht vergessen, dass Sie auf Datei aktualisieren klicken. Andernfalls wird dies nicht gespeichert, und es gibt noch keine Möglichkeit, die Einstellungen in der Vorschau anzuzeigen. Wir kommen jetzt dorthin. Lassen Sie uns weiter und setzen Sie unser Design in HTML und referenzieren Sie die gleichen Zahlen im nächsten Video 10. Den HTML schreiben: Alles klar, wir haben unser CSS geschrieben. Jetzt gehen wir auf ihre Seite oder einen Beitrag und verknüpfen dieses neue rote Quadrat in Richtung Presse Wenn die Seiten, die ich sagen werde, fügen Sie neue und von hier aus werde ich tun, wird ich sagen, neue neue Rote Platz, nur weil warum nicht? Lass uns etwas Spaß haben. Nun, wieder einmal, ich bin im klassischen Modus und wenn Sie hier drin sind, stellen Sie sicher, dass Sie von visuellem zu Text wechseln, da dies im Textbereich wirklich wichtig ist. Dies ist im Grunde HTML, das Aiken eingibt. Wenn Sie die Gutenberg-Version der neuen Version von WordPress fünf verwenden, können Sie einfach Ihre Einstellung von Absatz zwei html ändern. Aber in diesem Fall arbeite ich mit dem klassischen Editor in Visual und Text. , Je nachdem,ob Sie ein Design verwenden oder nicht, haben Sie möglicherweise verschiedene Optionen, um HTML in dieses Design einzufügen. Aber um diesem Zweck willen werde ich bei klassischen Redakteuren und Texten bleiben. Ich werde folgendes schreiben. Ich werde weniger sagen, als Div-Klasse zu unterschreiben. Also denken Sie daran, dass wir diesen Zeitraum vor diesem Zeitraum im CSS das Wort Klasse aus hatten. Ich sage Klasse gleich und verdirbt dies genau den gleichen animierten Container, den ich ein großes C verwendet Ich werde Zitat, Ende, Zitat in Stil sagen Ende, . Nun, ein Stil ist, was in Lyon CSS genannt wird, aber das lässt mich das Verhältnis bestimmen, für das ich die Box erstellen muss . Ich werde sagen, Stil gleich Zitat, Zitat und zurück in diesem Zitat werde ich sagen, Padding Bindestrich unten Doppelpunkt einen bestimmten Prozentsatz. Was für ein Prozent weg? Setzen Sie in diesem geht voller Kreis Wenn ich zurück zu Adobe Animate Weg, Weg zurück, wenn die mit in der Höhe ist ein Verhältnis Also werde ich in meinem Rechner tippen, zeigen Sie, wie ich das bekommen habe. Lasst uns den Taschenrechner hochziehen. Da gehen wir hin. Und hoffentlich dort taucht es auf. Ich werde 500 teilen, dass durch 1000 jetzt sagte ich vorher und wie das zweite Modul, dass ich einfache Mathematik mag, und deshalb mag ich einfache Mathematik. Das Verhältnis ist 0,5 oder wenn wir das mit 100 multiplizieren, erhalten wir 50%. Also weiß ich, dass, wenn ich jetzt zu diesem Code zurückgehe, das Padding untere Prozent 50 ist, weil ich einfache Mathematik verwendet habe. Der Anfang bei 1000 von 500. Notieren Sie es. Möglicherweise haben Sie eine bestimmte Zahl, die nicht perfekt ist. Also, wenn Sie, wie eine andere Berechnung, die, sagen wir, wie 500 mal 9 97 ist, machen Sie einfach Ihren Bastard oder halten 51% wissen, dass Sie ein wenig Platz unten haben werden . Da es nicht perfekt passt, kann ich 50,1% nicht straffen. Ich muss wie 51 oder 50 tippen und einen Raum verlieren, wenn ein Setting Dinge up. Ich denke über die tatsächliche Größe nach, mit der ich arbeite. Das ist also ein kleines Gerede für eine einfache Berechnung. Ich bin mir dessen bewusst. Klopfen unten 50% Semikolon, der es so einsperrt. CSS. Ich tippe es nur hier, weil ich immer sicherstellen möchte, dass Sie feststellen, was das Verhältnis der spezifischen HTML-Fünf-Canvas ist , mit der ich arbeite. Jetzt haben wir geschrieben, klopfen unten Doppelpunkt, 50 Semikolon und Zitat. Ich werde mit einer geschlossenen Halterung fertig sein. Wann immer ich HTML lese, muss ich ein Kleiner-als-Zeichen und ein Größer-als-Zeichen am Anfang des Endes meines Mantels ihn und an der Retur-Taste in Typ weniger als Zeichen I Frame haben. Nun beachten Sie, dass es Kleinbuchstaben sein muss, um den Kleinbuchstaben innerhalb meines CSS zu entsprechen, den ich früher geschrieben habe, werde ich sagen, ich Frame und dann SRC dies steht für Quelle oder ich toe im Wesentlichen sagen, das auf Phonics Stil Cirque SRC Equal Sign, Zitat, Zitat und kommen Sie zurück in diesen Bereich und dann gehen, um das folgende mit Jeez zu schreiben, könnte ich es richtig mit gleich 1000 buchstabieren, die mein Design hier auf der rechten Seite entsprechen wird und schließen Zitat Höhe gleich 500 und dann schließen Zitat. Und noch eine Sache werde ich sagen, nur weil ich das wahrscheinlich in mein CSS setzen sollte und viele Standardeinstellungen dies tun. Aber da meine es nicht hat, da ich eine sehr grundlegende WordPress-Theme habe, werde ich sagen, Stil wieder. S t Y l e entspricht Zitat Grenze, Doppelpunkt und dann sagen Null Semikolon Anführungszeichen und größer als Symbol. Und dann muss ich einen engen Augenrahmen schreiben, indem ich Slash I Frame sage. Vielleicht gehen wir und schließen es mit einem Größer-als-Symbol die Grenze bedeutet standardmäßig. Ich Rahmen haben eine Grenze. Sie sind eigentlich ziemlich ärgerlich und viele Themen. Und WordPress nehmen Sie es raus. Aber da ich ein Standardthema verwende, tut es nicht. Also nur für Anzeigezwecke. Ich werde es einfach so behalten. Und das divot die Spitze. Was Sie in HTML tun müssen, ist, dass Sie ein so genanntes Tag öffnen und das Tag schließen müssen . Also, wenn es ich am Anfang Frame ist, muss ich sagen, Schrägstrich ich Frame am Ende, weil dieses DIV-Tag diesen oberen Teil öffnet, muss ich weniger als Zeichen Slash div sagen. Nun, das sieht alles gut aus, außer einem kritischen Stück , dem Cirque oder der Quelle. Jetzt habe ich einen Tab von diesem kleinen Kerl, der von meinen Nautilus-Designs hin und her geht. Ich werde hier in diesen Ural oder den Uniform Resource Locator klicken. Die Leute denken, es sei universell oder universell, aber es ist einheitlich. Also werde ich diese Ihre URL kopieren Ich werde zurückkommen, um eine neue Seite hinzuzufügen. Ich werde diesen Code darin einfügen und dann „Veröffentlichen“ sagen. Und das ist alles, was Sie schreiben müssen, um die animierte Datei innerhalb von WordPressarbeiten WordPress 11. Funktionierte das Funktionierte Funktion.: Also die Frage, auf die Sie wahrscheinlich warten, weil wir jetzt zwei Module durchlaufen haben, funktioniert seine nicht. Wissen wir, ob das tatsächlich gelungen ist? Wir waren jetzt nicht Dio, ja, ich konnte nicht aufhören und es vorher ansehen. Aber hier ist das Ergebnis. Werfen Sie einen Blick. Wie Sie sehen können, springt dieses kleine rote Quadrat hin und her, und es sieht ziemlich gut aus. Allerdings müssen wir jetzt den Browser anpassen, um zu sehen, ob es tatsächlich tut, skalieren und lo und siehe, dass dies geht hin und her in Skalen größer oder kleiner und halten das Verhältnis. Das ist das größte Stück von allem, dass dies die Größe des Gesamtdesigns in perfekter Größe halten wird. Also, wenn ich sagen unten setzen will Also, wenn wir Beispiel von zeigen, sagen wir, bearbeiten Seite wieder innerhalb von WordPress und alle sagen ja, es funktioniert, wo, wenn Jahre nicht funktionierte Oh nein, es hat nicht funktioniert. Eines der beiden Ergebnisse wird passieren. Das Tolle am Codieren ist, dass es ein Ja oder ein Nein sein wird. Es gibt keine Vielleicht also, wenn ich etwas Text unten unter diesem Rahmen in einer Vorschau, es wieder. Ok? Ja, es funktioniert oder Oh, nein, es funktioniert nicht, dass Sie zugeben, e dass der Typ direkt unter dem tatsächlichen Raum hält. Es bewegt es nicht über oder darunter. Diese Magie kam noch einmal, wenn wir das Verhältnis von Stil Polsterung unten 50% auf die WordPress-Stück setzen . Also hoffentlich hat deine Arbeit geleistet und Magie wurde erreicht. 12. Testen von es auf anderen Browsern: Also mache ich Safari, weil ich auf einem Macintosh bin. Aber ich möchte auch sehen, ob es funktioniert und andere Browser, weil nichts schlimmer ist, als anzunehmen, dass es über alle Plattformen funktionieren wird, aber es erreicht diesen Effekt nicht wirklich. Also habe ich tatsächlich Feuer Fox. Hallo, kann Asien nicht Wie geht es Ihnen? Also habe ich eine lange Zeit mit Safari. Ich habe Firefox und Chrome, weil ich auf einem Macintosh bin. Ich kann nicht nachsehen. Ich esse. Das ist nur die Dinge, die ich annehmen muss. Aber weil Chrome hat eine Mehrheit Marktanteil auf dem PC-Markt, Ich fühle mich ziemlich sicher. Aber wenn ich sowohl Firefox-Safari als auch Chrome teste, erledige und teste ich über mehrere Plattformen hinweg. Also, hier geht's. Hier ist Feuer Fox See Firefox arbeitet neben Safari, sowohl die kleinen Jungs bewegen, und jetzt ist es Test Chrom und Chrom ist, aber das ist nicht das richtige Projekt am richtigen Projekt. Also, was funktioniert in Chrom? Es funktioniert in Firefox und funktioniert in Safari. Ich weiß jetzt, dass dies auf allen Plattformen funktioniert, und wenn ich entweder These AM gesungene Geräte auf dem Handy laufen, weil sie krone haben und oder das iPhone, das Safari hat, dass diese auf mobilen Geräten funktionieren werden als gut, und das ist, wie Sie eine grundlegende Animation unbelebt erstellen und setzen Sie sie in Richtung Presse und eine voll reaktionsfähige HTML fünf Leinwand, die Sie auf der Station Brüste verwenden können erstellen. 13. Zum Abschluss: Vielen Dank, dass Sie das gesamte zu diesem Modul gesehen haben. Siris der Transformation und Dobie Anime html fünf Dateien in neuen, voll reaktionsfähigen Ausgaben in WordPress zu verwenden. Ich bin neugierig. Haben Sie tatsächlich an Ihrer Website gearbeitet? Wenn ja, senden Sie mir die u R l Setzen Sie es in den Kommentaren Abschnitt Nehmen Sie mir einen Screenshot. Nimm mich. Machen Sie einen Screenshot Live und reden für zu lange. Anscheinend will ich wissen, Hat das für dich funktioniert? Weil ich denke, Adobe Animate ist die Knie der Biene Gerade jetzt animieren ist heiß. Es macht Spaß. Es ist so cool zu verwenden. Aber die ultimative Frage ist, können Sie es auf Ihrer Website zeigen? Die Antwort ist ja. Sie können jetzt voll responsive html fünf kompatibel anzeigen. Nicht Swift. Swift funktioniert nicht auf mobilen Geräten, vor allem auf der Apple-Community in Tablets. Aber HD modifizieren voll reaktionsschnell wirklich robuste Codiertechniken auf Wordpress, die Sie Ihren Freunden und Familie zeigen können . Also bin ich neugierig, ob du das funktioniert hast. Wenn Sie durch alle Module kommen, würde ich gerne für Sie in den Kommentaren hören. Bitte posten Sie eine Rezension dazu. Das würde mir die Welt bedeuten. Nochmals vielen Dank. So viel zum Ansehen dieser Videos. Ich weiß es sehr zu schätzen.