Kunst und Code: Erstellen und Codieren einer interaktiven Parallaxen-Illustration

1. Einführung: Hi. Mein Name ist Jarrett, Vocal auf Illustrator, und ich mache einige Code-Projekte zum Spaß Gelegentlich hatten mich viele Leute nach diesen Parallax-Illustrationen gefragt , die ich gemacht habe, wo verschiedene Ebenen verwenden, um eine Art Vocal auf Illustrator, und ich mache einige Code-Projekte zum Spaß Gelegentlich hatten mich viele Leute nach diesen Parallax-Illustrationen gefragt, die ich gemacht habe, wo verschiedene Ebenen verwenden, um eine Art D-Effekt mit Ihrem Artwork. Und so mache ich es endlich Tutorial darüber. Das wird also auf HTML, CSS und JavaScript basieren, zusammen mit mir mache ich meine Ebenen unpassend. Und das ist eine fortgeschrittene Klasse. Also, wenn Sie meinen Anfang angepassten Kurs nicht genommen haben, ich einen Link dazu in die Notizen für den Kurs ein. Ich würde wahrscheinlich empfehlen, das zuerst durchzugehen. Wenn Sie Fragen zum Zeichnen haben, äh, aber ich werde ein paar neue Dinge hier drin haben, und ich werde es ein bisschen übergehen. Aber auch nur einige Haftungsausschluss-Code ist von Natur aus kompliziert. Wenn Sie nichts über Code wissen, wird dies wahrscheinlich nur ein wenig ins tiefe Ende werfen. Ich versuche, so einfach wie möglich zu gehen und es nicht zu kompliziert zu halten, aber es wird Dinge geben, die einfach schief gehen, und ich werde Teoh nicht in der Lage sein, sie alle zu erklären oder dir bei all diesen Dingen zu helfen. Und es tut mir leid im Voraus, aber ich würde empfehlen, dass Sie einen schnellen Crashkurs in HTML und CSS und JavaScript . Ich weiß, dass W drei Schulen einige schnelle Intro-Dinge haben oder denken, Code Academy hat einige gute , und ich denke, jede davon wäre eine großartige, schnelle Möglichkeit, Ihre Zeit zu nutzen, bevor Sie dies tun. Aber wenn Sie ein erfahrener Entwickler sind und Sie durch diese Klasse gehen, vielleicht helfen Sie Menschen, die eine harte Zeit haben, und denken Sie auch daran, dass ich ein Künstler bin, nicht ein Entwickler,in nicht ein Entwickler, erster Linie. Also geh einfach auf meinen Code. Seien Sie nicht zu gemein, aber ich werde dies auf einem iPad Pro mit Apfelstift auf Going zu arbeiten und sich zu fortzubilden . Sie sind herzlich eingeladen, Photoshopped Clip Studio zu verwenden. Ich weiß nicht, was die Leute benutzen. Jeder macht Programm, das kann, dass Sie mit Schichten arbeiten können und dann werde ich in Kota auf einem iPad Pro codieren. Ich habe eine Tastatur, wenn Sie eine Tastatur haben, Bluetooth, USB, USB, was auch immer. benutze diese meine Tastatur. Ich empfehle, dass, weil während der Sound-Software-Tastatur wäre ein Schmerz. Aber Sie sind willkommen, zu tun, was Sie wollen, und dann werde ich es nur in Teilen tun. Also, äh, ja, lasst uns anfangen. 2. 1 Konzept und Thumbnails zeichnen: Alles klar, wir werden mit einigen Skizzen dafür beginnen. Und, äh, ich werde nur in meine Skizzen gehen, die hier gestapelt sind und angemessen sind. Ich klicke oben rechts auf das Plus, um eine neue Leinwand zu erstellen. Und weil dies nur Skizzen ist, die Bildschirmgröße unterstreichen, es nicht wirklich wichtig, denn die Skizzen werden wahrscheinlich ein neues Dokument erstellen, sobald der Weg auf dem eigentlichen Kunstwerk jede Woche beginnt . Also, ähm, wenn Sie nicht meine vorherige geeignete Klasse genommen haben, würde ich empfehlen, dorthin zu gehen, um einen gründlicheren Überblick darüber zu erhalten, wie ich in der Fortpflanzung und Art von Dingen arbeite . Sie können dio Um, aber ich werde versuchen, auf ein paar Dinge hier zu berühren. Einige des Brunnens, eigentlich, vor allem, was wollen wir darüber reden, was wir hier tatsächlich erreichen wollen, bevor wir zu entsprechenden Einstellungen und solchen Dingen gehen . Also, ähm, gehen Sie zur Safari. Also das ist meine Website, Ähm und so ist der Effekt, den wir neu zu erstellen versuchen, diese Art von Drei-D-Parallaxe, wo man sie irgendwie bewegen kann. Sie können sehen, dass sich die Ebenen in Bezug zueinander bewegen, also fühlt es sich an, als hätte ich eine Schattenbox. Es ist irgendwie cool. Und auch Sie können Ihr Gerät bewegen, und wie Sie es kippen, können Sie sehen, dass die Illustration Antwort auf das Gyroskop So das ist ziemlich cool. Also ein paar Dinge, an die wir denken wollen, wenn wir an Skizzen dafür arbeiten , sind irgendwie welche Elemente Sie im Hintergrund wollen. Was Sie im Vordergrund wollen, etwas, das Sie sich bewusst sein müssen, ist irgendwie, wie sich die Dinge hier überlappen. Wenn ich an einer vollständigen Illustration arbeite, ist das nicht viel Zeit für Bewegung. Wenn etwas hinter diesem Bush steckt,werde ich einfach nicht dorthin fahren. Wenn etwas hinter diesem Bush steckt,werde ich einfach nicht dorthin fahren. Wenn etwas hinter diesem Bush steckt, Es ist wie, welche Art von Dingen hier abgeschnitten oder so etwas wie, sagen wir, sagen wir, diese kleine Clip-Sache, die Sie sagen, es ist mir egal. Niemand wird das sehen, weil es hinter einem Busch versteckt ist. Also müssen Sie sich bewusst sein, dass, wenn Sie Dinge weitermachen, einige davon ausgesetzt werden, und Sie können sehen, dass ich das tatsächlich auf diesem Stück gemacht habe. Wenn Sie das irgendwie zu weit anderen durch den subtilen Abschnitt sagen, wo ich irgendwie aufgehört habe , sich mit den Schatten zu belästigen, weil ich denke, dass ich irgendwie auf halbem Weg entschieden habe, dass ich mit den Schichten etwas Cooles damit machen würde. Und offensichtlich habe ich keinen perfekten Job gemacht, so dass etwas zu denken, wie Sie Ihre Skizzen machen und wie Sie in die Schaffung endgültiger Kunstwerk gehen, Eine andere Sache zu denken ist, Sie können sehen, dass, wenn ich diese kippe, können Sie sehen, dass Sie sortieren mehr sehen, als Sie ursprünglich an den Rändern sehen, so weiter, ich werde Ihnen nur zeigen, was ich getan habe, ist, dass ich eine Art Maskenrahmen um die Außenseite erstellt habe, so dass Sie es hier nicht sehen können, weil der Rahmen weiß ist und der Hintergrund weiß ist. Aber wenn ich hier rüber gehe, ist das eine Version ohne das. Da ich also diese Elemente habe, die bis zum Rand gehen, möchte ich diesen Effekt nicht, bei dem man sehen kann, dass Dinge vom Rand ausgehen und die Ebenen auf diese Weise etwas seltsam aussehen. Ich fühle mich wie diese Art bricht den Drei-D-Effekt ein wenig für mich. Es könnte sein, dass dir das völlig gut geht. Es hängt irgendwie davon ab, was du willst. Aber wenn für mich persönlich, wenn ich für einen Defekt im Hintergrund gehen, ist eine Art voller Blutung und einige verschiedene Elemente sind voll bluten. Ich will nicht sehen, wie manche Dinge vom Rand gehen und andere ich Es bricht nur kurz die Illusion. Ich denke, eso, ich werde eine Art Maskottchen erschaffen. Ich werde darüber nachdenken, während ich auch die Skizze mache. Ähm, die andere Sache ist, ich glaube, es gibt noch einen. Ähm, du kannst sehen, wie du es bewegst. Sie bekommen irgendwie diesen coolen Kippeffekt. Und dieses hier mag ich wirklich, weil das Schwert im Vordergrund und der Hintergrund, der Zugang ist irgendwie dazwischen. Also bewegt sich die Hintergrundart nach links Art von Bewegung nach rechts, und ich denke, das ist irgendwie cool, weil es das Gefühl gibt, dass das Schwert von der Seite springt . Der Hintergrund ist irgendwie ein wenig in die Seite gehen, also möchte ich diesen Effekt in diesem Stück neu erstellen, das ich machen werde, also möchte ich darüber nachdenken , was mein Hintergrund sein könnte, Was könnte mein Vordergrund sein, dass Art von Schwimmer oben. Also kann ich irgendwie diesen coolen Effekt bekommen, bei dem , es sich anfühlt,als ob es sich um die Mitte dreht, und es fühlt sich eher an, als gäbe es mehr Tiefe. Okay, das sind also einige Dinge, über die man nachdenken muss. Ich werde ein bisschen mehr über sie reden, als ich Skizzen mache. Aber ja,kommen wir zurück zu unseren Skizzen. Aber ja, Also das erste, worüber ich reden möchte, ist nur irgendwie richtig schnell eingerichtet. Also habe ich ein paar benutzerdefinierte Einstellungen, die Sie vielleicht ein wenig verloren, wenn Sie sie nicht eingerichtet haben . Also werde ich einfach durchgehen, was ich hier eingerichtet habe. Also, wenn du ein Dokument geöffnet hast, das wir vorhin gemacht haben, hast du oben links auf diese Ranch getippt? , Sie können sehen,dass es all diese kleinen Möglichkeiten gibt. Die einzige, die wir uns gerade ansehen, ist die Presse. Sie können eine helle Schnittstelle einschalten, wenn Sie es vorziehen, dass ich in der Regel dunkel bevorzugen und dann wenn Sie Linkshänder sind, Sie könnten feststellen, dass dies schön ist. Sie können die Schieberegler für Deckkraft und Größe auf die andere Seite verschieben. Also, wenn du so machst, was ich manchmal nicht tue, passe ich die mit der Hand an, die ich nicht trockne so weiter . Dann lasse ich den Bürstenfluch herum. Das ist eine Art persönliche Vorliebe, vor allem, weil ich versuche und ein Video zu machen. Das ist irgendwie nett. Sie können sehen, wo meine Pinsel, wenn Sie auf dem iPad-Bildschirm anstelle des Videos meiner Hände suchen . Ähm, diese anderen, also ist das Wichtigste hier unten für das, was ich tue, ist Gestensteuerung , und das ist etwas fortgeschritteneres Zeug. Aber ich will dir nur zeigen, wie ich es nicht aufgebaut habe. Äh, also werde ich mich nicht zu sehr um die Augentropfen kümmern, die ich auf dem kleinen Platz eingerichtet habe . Teoh dieses Quadrat hier ist es ihre Modifikatortaste. Also, wenn ich das halte, ähm, dann bewirkt es, was der Bleistift tut. Also, wenn wir zurück in Gestensteuerungen eso gehen, habe ich nicht eingerichtet. Also passiert mein Eye Tropper Color Picker Werkzeug, wenn ich das Quadrat gedrückt halte und habe den Apfelstift benutzt habe. Oder ich kann den Bildschirm berühren und halten, ummeine Pipette um schnell in Form zu bringen. Ich habe mich nicht verändert und er fühlte dort Einstellungen. Und dann Schnellmenü, diese müssen Sie einschalten, so dass nicht standardmäßig in entsprechenden aktiviert werden. Wenn du es noch nicht benutzt hast. Eso Was ich habe, ist, dass ich mich nicht anfassen kann. Sobald ich den Bildschirm berühre, erscheint das Schnellmenü mit meinem Finger und nicht mit dem Apfelstift. Und ich habe auch einen Vollbildmodus eingestellt, um automatisch einzuschalten, während ich es versuche. mögen Sie vielleicht auch nicht. Ich denke, dass ich es irgendwie mag, aber wahrscheinlich gehen Sie hin und her ein wenig auf Sie können auch mit vier Finger gekrönt, um in den Vollbildmodus zu bekommen . Ähm, aber ich zeige Ihnen die hier sehr schnell durch. Interessant. Wenn ich etwas anderes angepasst habe, wie nicht Oh, habe ich Ebenen wie diese. Wir werden später darauf eingehen, also lesen Sie nicht so schnell darüber. Menü, Äh, Sie berühren nur irgendwie den Bildschirm und Sie können sehen, dass dieses Menü kommt. Ich kann mich nicht genau erinnern, was die Standardoptionen hier sind, aber um sie anzupassen, tippen und halten Sie, und dann können Sie aus einer ganzen Reihe von verschiedenen Aktionen wählen, die Sie hier ausführen möchten. Eso, wie ich es habe, ist, dass ich Farbe hier drüben habe. Löschen Sie auf Alfa Lock, die ich später über die tatsächliche Größe sprechen werde. Was, äh, sagen Sie nicht, dass ich auf meiner Leinwand verkleinert bin. Wenn ich tatsächliche Größe hätte, macht es meine Leinwand so groß, dass es wirklich sein würde, wenn ich drucken würde oder so. , Sie können zwischen dem Ort,an dem er wieder aufgenommen wurde, und der tatsächlichen Größe hin und her wechseln. dann Unddannhabe ich Phil Layer und füge Text hinzu. Ich bin nicht wirklich verkauft, wenn ich gerade Text in diesem Schnellmenü hatte, weil die meisten Projekte, an denen ich arbeite, nicht viel Text s beinhalten. Ich werde das jetzt tatsächlich ändern, um horizontal zu spiegeln, so dass Sie sehen können, dass setzt die Leinwand jeden, Äh Okay, also das ist ein schnelles Menü für Sie und unsere Gesten. Die andere Sache, die ich weiß, dass viele von Ihnen fragen werden, ist, welche Bürste ich verwenden werde . Also, für mein skizzierendes Gesicht, werde ich den technischen Bleistift verwenden, und das ist ein Standard-Pinsel und Fortpflanzung. Ich glaube, es steht unter Skizzieren, so dass Sie sehen können, dass Sie diese neue Bibliothek haben, wenn Sie auf Pinsel tippen. Und dann auf dieser linken Seite haben Sie eine ganze Reihe von verschiedenen Sätzen von Pinseln und die meisten von diesen, die ich nicht gehört habe, unsere Standard-. Eso Skizzieren technischen Bleistift und ich habe mein eigenes Pinselset mit einer ganzen Reihe von Pinseln erstellt , die ich gerne die ganze Zeit verwende. Die Art und Weise, wie Sie das tun würden, ist auf dieser linken Seite. Scrollen Sie nach unten und Sie können auf dieses Plus klicken und Sie können ein neues Set erstellen. Das will ich eigentlich nicht. Und dann Aber sagen wir einfach, ich wollte, dass Sie hier kommen können tippen Sie auf den Pinsel, den Sie in Ihr Set zu duplizieren, und dann tippen und halten Sie Andi mit einem anderen Finger tippen Sie auf das neue Set und Sie könnten es einfach fallen lassen - Genau da. Also, äh, das ist ziemlich nützlich. Ich denke, ich werde nur löschen Das sagte, Gehen Sie zurück zu meinen Favoriten auf dann Nur eine andere Sache ist, so sagen wir, ich zeichne etwas und dann gehe ich zum Rennen. Ich denke, standardmäßig rennt er weiter. Ich kann mich nicht erinnern, etwas große Bürste, also kommen, um zu löschen und es ist groß und ich will nicht, dass es groß ist, weil ich irgendwie Kontrolle über das, was ich renne, finden will. Also, wenn ich zu meinem Pinsel gehe und ich auf technischen Bleistift bin und dann tippe und halte ich auf mein Resort, das automatisch den Pinsel verwendet, den ich für Farbe für Ihren Rasierer und Netzwerke in beide Richtungen verwende . Also, wenn ich etwas in Reserve Captain hätte, halten Sie unser passiert. Captain sagte Captain in der Vergangenheit, dass das funktioniert, äh, auf der Bürste, als es zu allem wechseln würde, was ich für den Rasierer und Samos benutzt habe wenn Sie das benutzen. Also fangen wir einfach an, für eine Minute zu zeichnen. Also, als wir mit dem eigentlichen Versuch beginnen, äh, äh, zuerst würde dir dieses schnelle Shape-Feature nicht zeigen, wenn du das noch nicht ausprobiert hast. Dies ist neu, wie ein glauben, Fortpflanze vergessen. So können Sie eine Art wahres Rechteck sehen. Und dann, wenn ich irgendwie am Ende anhalte und halte, richtet es nur die Zeilen für mich aus, und ich kann irgendwie neu anordnen, wo es auf dem Bildschirm ist, und das ist aus vielen Gründen super nützlich. Aber für das, was ich hier tun werde, ist nur eine Art kleine Frames für meine Thumbnails zu erstellen . Äh, also habe ich diese Form gemacht und dann, weil es kein perfektes Rechteck ist, will ich es in seiner Form haben, und ich werde nur über Rechteck reden. Sie können sehen, dass diese Umleitung vorher, ähm, wenn Sie ein perfektes Quadrat oder einen perfekten Kreis machen wollen oder so, werde ich jetzt darauf hinweisen. Sie können Ihr Bestes tun, um perfekte Platz fallen, und es ist nicht perfekt, tatsächlich hat OK auf, dass ein, aber so halten Sie immer noch den Bleistift nach unten auf dem Bildschirm. Sie können sehen, ich bin immer noch bewegen meine Form um, wenn ich einen weiteren Finger auf den Bildschirm, der zu perfektem Quadrat schnappt und es schnappt eine 15-Grad-Drehungen als auch. 15. Ich will nicht wirklich das Quadrat dafür. Ich gehe mehr für wie eine Porträt-Orientierung unsere Arbeit. Aber du kannst tun, was du willst. Immer noch quadratisch. Aber, weißt du, du bekommst Rechteck auf dem Schalter, um die Dinge für mich zu drehen. Das ist also über das Seitenverhältnis, nach dem ich suche. Ich wollte Tommy sein wird es nur ein wenig dünner machen. Bleiben wir bei so etwas. Und dann hat auch das mit Kreisen und Dreiecken gearbeitet. Wenn Sie Ihre Arbeit zufällig in einem Dreieck oder etwas erstellen möchten, könnten Sie ein Dreieck machen, Sie können einen Kreis machen, und dasselbe gilt. Wenn du einen anderen Finger auf dem Bildschirm hast, wechselt er zwischen der Einschränkung auf ein perfektes Kreisdreieck und, äh, irgendwie der Linken. Sie können das hier sehr gut sehen, aber Sie können Interesse machen, und die Lippen sind oval. Und dazu war es nicht auch. Ein Finger, nun, wechseln Sie es irgendwie auf eine perfektere Version davon. Okay, also möchte ich mit meinem Rechteck beginnen, und ich werde wahrscheinlich ein paar Skizzen hier machen, also werde ich nur meinen Auswahlwerkzeug-Kreis um die ganze Sache verwenden. Ich musste das wahrscheinlich nicht tun, weil das jetzt das einzige ist, was auf der Ebene ist. Aber Gewohnheitsgewalt, schätze ich. Und so und Sie können mit drei Finger auf dem Bildschirm nach unten streichen und das wird Ihnen Ihre Schnittkopie Einfügen Menü geben . Oder Sie können Ebenen öffnen, indem Sie einfach von rechts nach links auf dieser Ebene streichen und duplizieren. Und so werde ich das tun und dann dieses Rechteck duplizieren, das ich hier gezeichnet habe und das dann noch einmal duplizieren. Also habe ich drei verschiedene Rechtecke, die ich fahren und diese dann zu einer Ebene zusammenführen kann , weil ich nicht wirklich eine Reihe von Spielern aus einer anderen Miniaturansicht Skizzen möchte. Ich werde diese nur in meinem Layer-Menü zusammenkneifen, und Sie können sie zusammen nur ein Jahr sehen. Ich habe all diese Skizzen, mit denen ich diese kleinen Rechteck-Vorlagen aus den Skizzen bearbeitenkann. Ich habe all diese Skizzen, mit denen ich diese kleinen Rechteck-Vorlagen aus den Skizzen bearbeiten , Ich möchte über ein paar Dinge reden,nach denen ich in diesen Skizzen suche, und dann werde ich in den Zeitraffer wechseln, und ich werde einfach für eine Weile fallen lassen. Sie können den Prozess hier sehen, aber so, aber so, wie ich erwähnt habe, als ich Ihnen diese Kunstwerke zeigte. Ich möchte hier irgendwie in einem Rahmen arbeiten. Ich denke nur irgendwie an dieses Kunstwerk mit dem Rahmen von Anfang an. Das wird also irgendwie meine weiße Maske Gehirn Sache sein, dass ich ein paar Sachen dahinter haben werde , aber es wird nur offenbart werden, wenn Sie das Gerät kippen oder bewegen Sie Ihre Maus oder Finger auf dem Bildschirm. Ähm, und das andere, woran ich denken möchte, ist , äh, was im Hintergrund ist. Vielleicht habe ich vielleicht ein paar Wolken oder so. Wir sehen Wolke aus, aber , ähm, und vielleicht ein paar Sterne im Hintergrund und die könnten sich nur ein wenig relativ zum Himmel bewegen , aber dann habe ich vielleicht, wie, eine Figur im Vordergrund, einfach hier schweben. Sagt das Beste, was ich je gefahren habe, weil ich nicht nur einige Zeit damit verbringe und diese Minute zeichne, aber ich möchte nur über einige der Dinge reden, nach denen ich in diesen Skizzen suche . Ähm, also will ich diese Figur im Vordergrund. Wenn das die Idee war, für die ich gehe, möchte ich irgendwie schweben, also sieht es so aus, als wäre es vor dieser Maske und dann habe ich vielleicht eine Schattenschicht, die auf den Hintergrund geht. Und dann will ich, dass diese Wolken so aussehen, als wären sie dahinter. Die Maske und der Himmelshintergrund sehen genauso aus wie hinter der Maske. Und dann vielleicht, wenn ich nur ein bisschen mehr Tiefe will, könnte ich ein paar kleine Sterne schwebende Elemente vor der Maske hier hinzufügen, so dass sie vielleicht hinter der Figur oder vor der Figur in Bezug auf drei D. Aber sie werden. Sie werden den Rahmen nur ein wenig brechen, und ich denke, das könnte in diesem Zusammenhang ziemlich cool aussehen. So können Sie sehen, dass ich mein Schnellmenü benutze. Ich habe nur Sie haben nicht Teoh tippen und dann tippen. Du kannst einfach passieren. Slide nicht gemocht, was Sie wollen. Und das bedeutet, dass ich manchmal etwas bei Unfall auswähle, wie Sie wahrscheinlich bemerken werden, wenn ich arbeite. Äh, ich bin irgendwie OK damit, denn insgesamt beschleunigt es mich Apfel. Etwas, das Sie sich bewusst sein wollen, wenn Sie nach einem schnellen Menü einstellen, ist um nichts hier einschließen, was Sie bei Unfall tun werden, dass Sie nicht bemerken, dass Sie es getan haben, wenn das sinnvoll ist. So habe ich zum Beispiel Ebenen hier zusammengeführt, als würde ich eine neue Ebene erstellen, etwas zeichnen, das ich sie zusammenführen würde, und ich kann mich nicht einmal erinnern, warum ich das tat. Aber zusammengeführte Ebenen ist etwas, das Sie vielleicht nicht bemerken,dass es bis zu einem ziemlich späteren Zeitpunkt passiert ist, wenn Sie nicht oben auf dem Bildschirmschauen dass es bis zu einem ziemlich späteren Zeitpunkt passiert ist, wenn Sie nicht oben auf dem Bildschirm müssen. Sie wollen also keine zerstörerischen Handlungen, die Sie nicht bemerken werden. Einige von ihnen sind destruktiv, technisch, wie Füllschicht. Aber ich werde bemerken, dass ich das getan habe. Eso, das ist nur etwas. Denken Sie darüber nach, ob Sie über Ihre Schnellmenü-Einrichtung nachdenken. Okay, Okay, also werde ich nur ein bisschen fallen lassen, äh, äh, ein paar andere Ideen einfallen, wahrscheinlich finden Sie jetzt in ein bisschen, und dann hoffentlich bis wahrscheinlich finden Sie jetzt in ein bisschen, zum Ende dieses Abschnitts, Wir werden mindestens eine Skizze haben, mit der Sie fortfahren können, um ein vollständiges Kunstwerk zu erstellen, das gut mit einem Parallax-Effekt funktioniert. Also lasst uns anfangen. - Ich glaube, wir sind bereit, diese Skizzen zu machen. Äh, also habe ich drei Skizzen. Ich bin ziemlich glücklich mit allen. Dann entscheidest du, welches ich eigentlich für dieses Parallax-Projekt verwenden möchte. Ich könnte später zu diesen anderen Skizzen für etwas anderes oder ein anderes Projekt wie dieses zurückkommen. Aber für den Moment brauchen wir nur eine zu wählen. Und, ähm, ich glaube, ich bin etwas einfacher geworden, als ich möchte, zu etwas komplizierter , als ich möchte. Also lehne ich mich irgendwie zu diesem mittleren für dieses spezielle Projekt. Der nächste Schritt ist, wir werden es in einen separaten Campus bringen und dann, äh, beenden es in Farbe und so, und das wird die nächste Lektion sein. Der nächste Schritt ist, wir werden es in einen separaten Campus bringen und dann, äh, beenden es in Farbe und so, Aber bevor wir zu ihren übergehen, möchte ich die nächste Lektion schon mit unserer Skizze auf diesem Campus beginnen . Also werde ich die Skizze hier kopieren, also benutze ich mein Auswahlwerkzeug, äh, äh, und skizziere nur dass ich auf der richtigen Ebene bin, um diese Skizze, stelle sicher, das zu kopieren, und es gibt nur eine Schicht, also sollte das großartig sein. Und dann werde ich mit drei Finger auf dem Bildschirm nach unten streichen und einfach Kopieren drücken und das kopiert mein Kunstwerk hier. Und dann gehe ich zurück in die Galerie. Ich werde auf Plus klicken und ich denke, das war ziemlich nah an einem 43-Seitenverhältnis. Eso Weil ich dieses Kunstwerk so verwenden möchte, dass ich das Kunstwerk mit höchster Auflösung sowie eine niedrigere Auflösung für die Code-Sachen wünschen werde. Ich werde mit einer höheren Auflösung beginnen. Ich werde wahrscheinlich 4000 mal 3000 machen. Ich habe das hier drin, aber ich werde Ihnen nur zeigen, wie Sie das erstellen würden, denn das ist keine der Standardoptionen. Also unten ganz unten in diesem Plus-Menü, habe ich eine Menge Extras hier drin. Aber wenn Sie hier benutzerdefinierte Größe erstellen, können Sie 4000 tippen. Eigentlich wollte ich 3000 mal 4000. Das sind schon 4000. Sie können die DP I wählen. Das spielt keine Rolle, es sei denn, Sie verwenden Zoll oder Millimeter oder so etwas . Ähm, wenigstens nicht für unsere Zwecke hier. Wenn Sie auf einem iPad mit p drei sind. Ich benutze gerne Petri Farbe, weil man ein paar wirklich schöne Rot- und Grüns bekommen kann. Ähm, und dann werde ich nur dieses Relax-Projekt nennen und es ist erledigt, und das wird eine neue Leinwand für mich schaffen. Und ich werde wieder mit drei Finger niederschlagen und Paste drücken, und das bringt mein Kunstwerk hier rein. Sie können sehen, dass es viel kleiner ist als dieser hier. Cooler Trick hier, der dir wahrscheinlich später wieder zeigen wird, da wir an dem eigentlichen Kunstwerk arbeiten, ist, wenn ich dieses Transformationssymbol hier oben tippe und halte, was du nicht sehen kannst, weil ich tippe und halte daran. Uh, dieses kleine Maus-Cursor-Symbol ist für eine Transformation, Also, wenn ich versucht habe, schwenken oder zoomen Sie die Leinwand, die dies über ausgewählte bewegt. Aber wenn ich auf diesen Pfeil tippe und halte, dann kann ich die Leinwand bewegen, ohne meine Auswahl loswerden zu gehen, um diese fit to canvass Taste unten unten zu drücken , und das füllt automatisch nur die Leinwand mit meinem Kunstwerk auf de, abhängig davon, ob Sie diese Option „Magnetics“ aktiviert haben, verhält sich das anders. Also, wenn Sie ausgeschaltet, dann wird es tun Ah, Besuch genannt Aspekt fit, wo hält Ihr Seitenverhältnis. Aber stellen Sie sicher, dass das gesamte Kunstwerk in die Leinwand passt, wo, wenn Sie Magnetics aktiviert haben und es zu Canvas passt, es den Aspekt füllt, was Ihr Seitenverhältnis beibehält, aber die gesamte Leinwand füllt. Ich will wahrscheinlich etwas dazwischen, nur um sicherzugehen, dass ich tatsächlich , weißt du, ich werde mit fit gehen, weil ich sicherstellen will, dass meine Grenze um das herum groß genug ist. Ich schalte Magnetics aus und dann werde ich einfach auf den Pfeil tippen und dann sind wir bereit, in der nächsten Lektion zu gehen. Also, wir sehen uns da drüben. 3. 2 Verfeinerung deiner Skizze: Okay, wirklich, das einzige, was wir in diesem Teil des Tutorials zu erreichen versuchen, ist, diese Skizze zu verfeinern . Also werde ich ein paar Minuten damit verbringen, und ich werde es wahrscheinlich pünktlich machen. Wenn ich arbeite, gibt es nicht wirklich eine Menge Geheimnis, außer viel Zeit einzusetzen und durchzugehen und sicherzustellen, dass alles sauber und einsatzbereit ist . Aber das Ziel dieser ganzen Lektion ist, dass Sie bis zum Ende fertig gestellte Grafiken haben werden, die mit Ebenen gefärbt sind, die bereit waren, in ein Parallax-Projekt zu exportieren . Und ich werde ein wenig näher eingehen, wenn wir zu diesem Punkt kommen. Ich möchte nicht zu tief darüber eingehen, wie ich prokreativ zeichne, weil ich eine andere Klasse darüber habe , und das ist nicht wirklich der Gesamtpunkt dieser Klasse. Aber vorerst werde ich nur an dieser Skizze arbeiten, und ich werde ein paar Dinge darauf hinweisen, die sie färben. Okay, ich denke, wir sind bereit, auf diese Skizze zu gehen. Du hast vielleicht bemerkt, dass ich die Jungs hier gewechselt habe Fünf Mal hier drin, und ich bin nicht 100% zufrieden mit dem Still, also ist es möglich. Während ich durch die Farben gehe, werde ich noch ein paar Dinge ändern. Aber insgesamt denke ich, dass ich eine gute Idee habe, dass ich anfangen kann, in einigen Farben zu blockieren, also lassen Sie uns darauf gehen. 4. 3 Blockieren in Farben zeichnen: Okay, ich werde damit anfangen, Farbe hinzuzufügen. Das meiste davon wird Zeitraffer sein, aber ich möchte Ihnen die Technik zeigen, die ich benutze, und irgendwie, wie ich sie aufbreche. Eso zunächst werde ich damit beginnen, nur die Farben zu blockieren und einige der Hauptebenen einzurichten , die mit hier arbeiten würden. Und dann werde ich wahrscheinlich einen Zeitraffer machen, nachdem ich dir ein paar dieser Dinge zeige und dann wiederkomme, wenn ich beginne, Texturen und einige Grady Ameisen hinzuzufügen und Farben zu verfeinern, und wir werden darüber noch ein bisschen reden. Aber lasst uns anfangen mit bloßem Blockieren und Farben und irgendwie, wie ich das eingerichtet habe. Also habe ich hier meine Miniaturskizze. Trotzdem kann ich wahrscheinlich glauben, dass ich normalerweise lösche, dass ich es jetzt behalten werde, nur für den Fall. Aber ich werde in meinem Ebenenmenü auf das tippen und einfach die Deckkraft meiner Skizzenebene nach unten bringen und dies tatsächlich umbenennen, indem ich einmal darauf tippe und dann umbenenne , nur um zu skizzieren. Es ist also leicht zu finden, wenn ich hier 1.000.000 Ebenen habe, und dann werde ich eine weitere Ebene hinzufügen und diese einfach unter diesen Skizzen-Layer ziehen und ablegen . Und jetzt, wenn ich etwas zeichne, dann wird der Skizzen-Layer noch darüber sein. Uh, und so ein paar andere Dinge, die ich nur sehr schnell anfassen wollte, bevor wir zu weit dran sind, sehen Sie, ich habe dieses große Rechteck gezogen, aber fast Rechteck um das herum. Das ist die Maske, über die ich in der Thumbnail-Phase gesprochen habe. Also werde ich dir nur zeigen, wie ich das aufstellen würde. Äh, eigentlich, lassen Sie uns zuerst eine Hintergrundfarbe einrichten, und ich werde das wahrscheinlich ändern, aber nur etwas, mit dem ich anfangen kann. Nehmen wir an, wir haben einen blauen Hintergrund und dann einige auf meiner Ebene hier. Ich werde es nur Maske nennen und dann mein Auswahlwerkzeug öffnen, das dieses kleine s geformte Ding von oben links ist und dann nur eine Art Spur darüber. Ähm, wenn das etwas Übung erfordert, wenn du nicht benutzt wirst , kann Teoh , es ziemlich mühsam werden, was ein großer Teil davon ist, warum ich nur eine Zeitraffer gehe, weil das eine länger, als es aussehen wird, wie es für Sie braucht. Also lassen Sie sich nicht zu entmutigen, wenn Sie das für immer auf sich nehmen, und ich mag es, meine Auswahl und Stücke zu bauen, es gibt nicht wirklich einen bestimmten guten Grund dafür, außer das ist nur eine Art, wie ich es mache. Daher wird dieses Auswahlwerkzeug standardmäßig zur Auswahl hinzugefügt, die Sie bereits haben, sodass Sie sehen können, dass dieser Bereich nicht ausgewählt ist. Dies ist ein Bereich, der ausgewählt ist. Ich meine, wenn ich also hinzufüge, wenn ich immer eine Auswahl ausprobiere und dann wiederkomme, haben wir das nicht gesehen. Gerade hinzugefügt Also habe ich mehr Bereich ausgewählt, so dass Sie es Stück für Stück ein wenig bauen können. Sie können auch tippen, um gerade Linien hinzuzufügen, so dass Sie mit dem Auswahlwerkzeug zwischen Tippen Sie auf Registerkarte für viele gerade Linien ausschalten können, oder ich bin Sie können tun Tack gerade Linie und dann zeichnen Sie eine Linie, und das könnte kurvig sein, wenn Sie wollen. Sie wollen nicht, dass es sein wird, aber und eine langsame Art nett, weil für so etwas. Ich möchte vielleicht eine gekrümmte Linie für diese Ecke. A Und dann möchte ich hier vielleicht zu einer geraden Linie wechseln, aber dann eine Kurve fortsetzen, damit ich von überall aus eine gerade Linie erstellen kann, wo ich aufgehört habe. Wo immer ich wieder anfange, und dann das nächste Flugzeug, ohne meinen Stift oder Apfelstift zu heben, ich denke, kann gebogen werden, so dass Sie wirklich mischen und passen auf eine wirklich natürliche Art und Weise, was schön ist. Und dann werde ich in wählen Weiß gehen, die bereits in meiner Palette hier haben. Also werde ich weiß für diese Maske verwenden und dann, weil ich Phil Layer in meinem Schnellmenü eingerichtet habe , denken Sie daran, denken Sie daran, dass wir darüber gesprochen haben. Wir können einfach so gehen und den Bereich ausfüllen, den ich ausgewählt habe. Wenn Sie Ihr Schnellmenü nicht eingerichtet haben und so habe ich getippt, Ich habe es eingerichtet. Also meine schnelle, wenn Sie auf Berührung öffnet und dann können Sie tippen und halten Sie auf etwas und wählen was Sie tun wollten. Also habe ich das Set, um später zu füllen. Wenn Sie nicht möchten, dass Ihr Schnellmenü, Sie können auch auf Ihre Ebenen tippen Sie auf die Ebene, die Sie füllen möchten und oben Phil Layer, und dann erhalten Sie diese schöne Maske. Okay, jetzt können Sie sehen, ob ich diese Maske um den Hintergrund bewegen sollte, ist immer noch blau und wo das wichtig sein wird, wenn wir zum eigentlichen Code-Teil kommen wo wir die Bewegungssteuerung machen und Dinge bewegen weil wie ich bereits erwähnt habe, Sie, wie ich bereits erwähnt habe,nicht möchten, dass sich die Kanten Ihrer verschiedenen Ebenen überlappen. Es sieht nur ein bisschen komisch aus. Und dann werden wir eine Menge Zeug haben. Ein Teil dieses Hintergrund-Zeugs wird hinter meiner Maskenschicht stehen, und einige davon werden vor sich kommen. Und ich denke gerade jetzt, dass diese Leute wahrscheinlich auch davor sein werden. , Die andere Sache, die ich Ihnen zeigen möchte, ist, also sagen wir, die Leute sind vorerst darüber , wir werden das Auswahlwerkzeug benutzen. Ich werde einfach reinkommen und anfangen, genau wie wir es mit der Maske getan haben, meine Formen schnell auswählen. Und ich werde nur Sculler wählen, dann wieder, ich fotografiere mein schnelles Menü, um zu füllen, äh und ausgeben. Ich meine, mach einfach die schiere Form wirklich schnell, nur um dir zu zeigen, wie wir das einstellen wollen. Also fühle ich das mit einem Mörder, weil diese beiden, wie ich bereits erwähnt habe, Teil desselben Bildes im endgültigen Export sein werden. Ich werde nur anfangen, Dinge nach dem zu gruppieren, wie ich möchte, dass es angezeigt wird, wenn ich fertig bin. Also alles von diesen Leuten, weil sie auf der gleichen Ebene sein werden, besonders weil sie sich berühren. Das wäre ziemlich schwierig, verschiedene Schichten zu machen und das intakt zu halten. Ähm, ich werde nur eine Gruppe erstellen, indem Sie diese beiden Ebenen auswählen, und Sie wählen mehrere Ebenen aus, indem Sie auf eine tippen und dann nach rechts auf eine andere wischen , um mehrere zu haben, und dann tippen Sie auf Gruppe, die Ich habe es gerade getan. Und dann können Sie sehen, dass sie in dieser neuen Gruppe hier erschienen sind. Aber ich kann tippen, um umzubenennen, dass ich es einfach Leute oder Menschen nennen werde, weil das mehr Spaß macht. Und dann haben wir unsere Maske, was auch immer Menschen, und dann werde ich eine neue Ebene erstellen und diese unten verschieben, und dann wird das sein, Lasst uns diese seltsame, trübe Form vorerst machen, und du willst nicht einfach schneiden dies aus, weil sich diese Maske bewegen wird. Also mein normaler Instinkt mit so etwas, wenn es keine bewegliche Illustration war, ist zu sagen, dass ich hier nichts hinter sich ziehen muss, weil niemand außer mir es jemals sehen wird . Da sich die Ebene jedoch beim Verschieben der Ebenen bewegen wird, müssen Sie darüber nachdenken, was dort zu sehen ist. Vielleicht möchten Sie diese Maske sogar auf 50% Deckkraft oder etwas einstellen, damit Sie sehen können, was dahinter vor sich geht und nur bemerken, ob Sie sich entschieden haben, die Dinge unterbewusst oder etwas zu beenden , und so müssen Sie sich dann für eine Farbe für diese fast definitiv nicht die Farbe, die ich will , sondern dient dazu, zu zeigen, was ich für hin und wieder tue. Eine andere Sache, die ich darauf hinweisen wollte, bevor ich dies in den Zeitraffermodus umschalten, ist genau das . Ich werde hier eine Menge Clipping-Masken verwenden, wahrscheinlich, ähm, also, ähm, also, wenn Sie nicht mit dem vertraut sind, lassen Sie mich es Ihnen einfach zeigen. Äh, also habe ich eine Ebene über diesem Bein erstellt, richtig? Wenn ich einmal darauf tippe und dann tippte ich Clipping-Maske, dann können Sie sehen, dass dieser kleine Pfeil nach unten zeigt, und es ist irgendwie eingerückt. Das bedeutet, was ich auf dieser Clipping-Maskenebene zeichne, wird nur innerhalb der Form angezeigt , die es maskiert oder dass es durch meine Vermutung maskiert wird, geschieht tatsächlich. Also, wenn ich diese Art von Knie hier mache und das muss keine perfekte Form sein, , und dann schalte ich meine Skizze aus, nur um es leichter zu sehen und dann eine Farbe hier auszuwählen. Kannst du das irgendwie ausfüllen und du kannst es auf Lee sehen. Du siehst es nur dort, wo es sich in mir überschneidet. Also, wenn ich das von Clipping-Maske abnehmen sollte, können Sie die gesamte Form sehen. Wenn ich es wieder auf Clipping-Maske setzen, können Sie nur die Überlappung sehen. Also werde ich ziemlich viel davon verwenden. Und ich werde wahrscheinlich nur diesen Zeitraffer sehen und durchgehen und nur, was ich jetzt mache , ist das Blockieren in Farben. Ich könnte ein wenig mitreißen auf ein paar Strahlen und solche Dinge, aber meistens versuche ich nur, die Formen in und die allgemeine Vorstellung von Farben zu bekommen. Okay, ich glaube, meine Farben sind hier meist blockiert. Also werde ich anfangen, Farben zu optimieren, ein bisschen mehr Ausflüge, Zutaten auf Dinge, Zutaten auf Dinge, Alex und Texturen mehr als ich habe. Ähm, und lassen Sie mich nur ein wenig über Bürsten reden. Ähm, die Büsche, die ich am meisten benutze, sind wahrscheinlich diese Bleistifte, und diese finden Sie in der Skizze S ich benutze den technischen Bleistift eine ganze Menge. Das ist es, was hier beschuldigt. Und gelegentlich, dass HB und sechs b Bleistifte. Ähm, und dann im künstlerischen, denke ich, da ist der weiße Acrylpinsel, den ich ziemlich viel benutze. Ich habe es vielleicht hier draußen rausgeholt, nur wegen Typen, die früher auch einen zerquetscht haben. Uh, Quash gibt mir eine viel glattere Textur, aber mit nur ein wenig Interesse daran und was Acryl kann viel mehr, äh, äh, irgendwie kratzig aussehen. Also lassen Sie mich Ihnen ein paar davon zeigen. Und dann sollte ich auch erwähnen, dass ich, äh, also meine Lieblings-Pinsel alle in diesem Felsbrocken habe, was ich glaube, vorher erwähnt habe. Aber dann habe ich auch alle meine Pinsel in einem Ordner namens Multiply dupliziert. Es sind also die gleichen Pinsel, aber jeder von ihnen hat seinen Mischmodus so eingestellt, dass er multipliziert wird. Und wenn Sie nicht wissen, was das tut, dann lassen Sie mich es Ihnen schnell zeigen. Sagen wir mal, ich will eine Farbe. Die Frontliga dieses Kerls hier, Ähm und ich haben was benutzt? Acryl auf dieser wie sehr helle lila Farbe auf. Ich bin mir nicht sicher, ob das noch gut ist, aber so habe ich diese Schicht auf Alfa Lock gesetzt. Sie können sehen, dass sich hinter diesem kleinen Schachbrett befindet, und das bedeutet, dass, wenn ich dieses Bein färbe, nichts außerhalb des Beines nur in den Bereichen auftauchen wird, in denen ich schon etwas gezeichnet habe . Wenn ich unsere Herde ausschalte, siehst du, dass sie überall auftaucht. Äh, also wirst du bemerken, dass Hellviolett einfach nicht toll aussieht. Ich meine, es ist sehr hell, aber ich möchte in den Dingen dunkel werden, während ich die Sättigung halte. Also, wenn ich zu dieser Multiplikationsversion desselben Pinsels wechseln multiplizieren Mischmodus im Grunde dunkelt die Dinge, während sie gesättigt bleiben. Sie können sehen, dass ich das irgendwie durchgehen kann und alles verdunkelt. Es ist auch eine transparente. Obwohl ich diese beiden Dinge den Schatten habe, denke ich, das ist eine andere Schicht. Aber sagen wir, das waren die gleiche Schicht. Ich würde immer noch in der Lage sein zu sehen, dass Schatten so irgendwie alles gleichmäßig verdunkelt, was wirklich schön ist, anstatt es nur mit einer einfarbigen Farbe zu bedecken. Ich bin mir nicht sicher, ob ich in so viel dunkel wollte. Und vielleicht wollte ich nur ein bisschen roter sein. Solange wir also über das Ausfüllen mit dem Pinsel sprechen, also benutze ich diesen Boot Acrylpinsel , können Sie sehen. Solche Schichten auf Unfall? Nein, ich habe nur viel ausgeschaltet. Wenn ich also ganz leicht gehe,kann ich ein ziemlich glattes Strahlen damit bekommen. Wenn ich also ganz leicht gehe, Oder wenn und das ist, was ich mit diesem Pinsel mache, ist wirklich hart an einem Ort, der angehoben werden kann und dann irgendwie aufhellen danach und einfach mal in eine Weile hart geschoben wird, und dann bekommt man diese netten, interessante kleine Texturen. Also bin ich irgendwie dunkel am Ende dieser Art von Interessant. Ich weiß nicht, wie gut das auf dem Video erscheinen wird, aber Sie haben eine Art von dieser nur interessanteren Textur, die Sie bekommen. Ähm, ich werde auch einige Formen hier verfeinern und sagen: „ Liebe das. Dieser Knöchel hat hier eine seltsame kleine Beule nur ein bisschen. Also karpiere ich das einfach mit meinem Auswahlwerkzeug, lassedas Gebiet auswählen, das Gebiet auswählen, und dann kann ich drei Finger hin und her nach Griechenland schrubben, dass du es klar hörst, äh, äh, Art Szene-Ding auf dieser Ebene. Eine andere Sache, die ich Ihnen zeigen wollte, ist die Ebenenauswahl. So wie ich das eingerichtet habe, kann ich diese Modifikatortaste halten, und dann könnte ich einfach mit einem Finger berühren. Und wenn ich auf dem Bildschirm gleite, merke ich, dass es mir sagt, welche Ebene ich gerade berühre. Oder wenn es mehrere Ebenen gibt, wie weil eine davon irgendwie transparent ist, dann gibt es mir Optionen und so kann ich aus diesen beiden Schichten wählen. Also möchte ich dieses Bein auswählen und dann einfach dieses kleine Stück von mir klar machen, das ich denke, es ist ein wenig zu viel. Um, und noch einmal, wenn Sie Spieler einrichten möchten, wählen Sie diesen Weg aus. Sie tippen auf den Schraubenschlüssel als Einstellungen, Gestensteuerungen, Ebenenauswahl. Und ich habe einen solchen Modifikator plus Berührung auf nichts anderes. Und ich fand, dass das für mich ziemlich gut funktioniert. Sie können mit verschiedenen Optionen herumspielen und sehen, was Sie mögen. Sieh mal, ob es noch etwas gibt, worüber ich hier reden wollte. Das andere, was ich wirklich schnell erwähnen wollte, und ich ließ mich viele Leute in meiner vorherigen Fähigkeit darüber fragen. Shared Class ISS, diese Sättigungsmaske Idee. Also, was ich gerne mache, nur um sicherzustellen, dass ich guten Kontrast habe, denn manchmal ist es ein bisschen schwer zu sagen. Also, zum Beispiel, hier, wo der Arm dieses Mädchens vor dem Hintergrund steht, fühlt es sich an, als ob er für mich nur ein bisschen vibriert. Und normalerweise bedeutet das, dass Werte ein wenig zu nahe beieinander sind, nicht mögen, dass das wirklich schrecklich ist, aber das ist eine Art Bereich, in dem es so ist, als ob ich nicht sicher bin. Ich möchte mir das nur schnell ansehen. Also werde ich diese ganze Schicht über alles mit Schwarz füllen, sind Sie weiß verwenden können , es spielt keine Rolle, und dann werde ich das Ende tippen. Das ist also meine Kapazitäts- und Mischmodi für diese Ebene, und dann werde ich ganz rechts oben auf Farbe und dann auf Sättigung tippen. Und jetzt habe ich diese Schicht, die, äh , die die ganze Farbe aus allem nimmt, was meine Werte hält. Und Sie können sehen, dass ich tatsächlich ein paar Probleme mit diesem Arm hier habe, weil Hand sich irgendwie in den Hintergrund verschmilzt und so alles in Ordnung bringt, dass ich wahrscheinlich dieser Sekunde zu einer Menge davon gehe, aber Ähm, es ist einfach wirklich schön, einen schnellen Weg zu haben, das auf genug zu schieben. Ich sehe hier nicht viele andere Probleme, also ist das eigentlich ziemlich gut. Ich sehe hier nicht viele andere Probleme, In der Regel haben mehr Probleme als das. Also, äh, ich denke, anders als das, werde ich einfach wieder mit dem Zeitraffer beginnen. und gehen Sie einfach durch und, äh, versuchen Sie, meine Farben mit irgendeiner Glaubwürdigkeit zu Dingen zu verfeinern, wie ich es hier getan habe, aber vielleicht hell in ein paar Bereichen dunkel in ein paar Bereichen. Ich nur es macht für viel mehr visuelles Interesse. Wenn Sie eine Art von subtilen Farbänderungen in den Dingen haben und ich werde von dort gehen, denke ich, wir sind genug für jetzt getan. Ich möchte nur die Schlagschatten hinzufügen, von denen ich vorhin gesprochen habe, und ich werde Ihnen zeigen, wie ich das machen würde. Also werde ich meine Ebenen öffnen und weil ich ziemlich nah an Out of Layer für diese Leinwand bin . Siehst du, ich habe 28. Ich meine, ich habe 12 Schichten übrig, aber ich möchte diesen ganzen Abschnitt mit dieser Menschengruppe duplizieren, und es gibt mehr als 12 Schichten drin. Also werde ich tun, ist ich werde abflachen tippen, wir werden einmal tippen, dann tippen, glätten, und dann werde ich aus Ebenen tippen, wischen Sie mit drei Finger nach unten, kopieren und dann bin ich rückgängig machen. Und so jetzt ist es nicht mehr Platin, und dann kann ich gehen, um Ebene darunter getan Streichen nach unten mit drei Finger und Hit basiert. Und dann habe ich eine Kopie dieser Gruppe, und ich werde eine Sperre für diese Ebene ein- und ausschalten, indem ich das Schnellmenü herunterfege. Und dann gehe ich Teoh, fülle es mit dieser hellvioletten Farbe, die ich gewählt habe. Und dann werde ich das ändern, um den Mischmodus zu multiplizieren, damit Sie sehen können, dass ich jetzt irgendwie diesen Schatten habe . Und ich will, dass das nur ein bisschen verschwommen wird. Wenn sich das Bild davor bewegt, fühlt es sich an, als ob es von vorne geworfen wird. Bevor ich das mache, muss ich Alfa Lock ausschalten. Und wenn du keinen schnellen Mann hast, du dich aufstellen. Sie können mit zwei Finger nach rechts streichen und Sie werden feststellen, dass das Schachbrettmuster verschwunden ist . Was bedeutet, Alfa Lock ist aus, dass ich auf meinen Zauberstab hier oben tippen werde, was mein Anpassungsmenü ist und dann gemütlich, um, um, Unschärfe und dann einfach auf dem Bildschirm in Richtung rechts irgendwo, und ich schließe dass, so viel ich will, wahrscheinlich etwas wie das wäre ziemlich gut bei etwa 19,7. So tun Sie es, wie Sie wollen. Wenn ich meine Menschen-Ebenengruppe wieder aktiviert habe und dann zu meinem Verschiebungswerkzeug gehe, das sich bewegt hat und du siehst, dass hinter ihnen ein Schatten ist und dann werde ich das Gleiche mit meiner Maske machen . Klar, weil ich möchte, dass die Maske auch einen Schatten auf diesem Hintergrund wirft. Also werde ich das nur duplizieren, weil es nur eine Ebene ist. Ich habe viele Ebenen, mit denen ich es einfach duplizieren kann. Ich werde wählen, wer niedrig ist, und dann werde ich das tun. Dieselbe Ghazi und Unschärfe. Wahrscheinlich die gleiche Menge, eigentlich. Vielleicht nur ein bisschen weniger, weil ich denke, dass die Menschen vorne sind, was bedeutet, dass das vielleicht etwas weniger verschwommen wäre. Ich werde 15% Unschärfe machen, und dann werde ich einfach nach unten streichen, um Al Flock anzuschalten. Es ist genau vorbei, um ihre ohne lila Farbe tippen auf meine Mischmodi zu füllen. Wechseln Sie das, um sich zu vermehren, und wenn ich jetzt diese Maske herumschiebe, können Sie sehen, dass es einen Schatten der Maskierten dahinter gibt, und ich glaube, das war's. Wir erschaffen tatsächlich das Kunstwerk. Also in der nächsten Lektion werde ich darüber gehen, wie ich die Ebenen gruppieren werde, um dann zu exportieren, und dann werden wir mit dem Mantel beginnen. 5. Coding 1 Vorbereitungen: Alles klar, in diesem Hören gehen wir einfach darüber, wie Sie Ihre Ebenen so kombinieren, wie wir wollen, dass sie im Code und dann tatsächlich in Ihren Code-Editor exportiert werden, damit wir anfangen können , uh, indem ich dein Code-Projekt eso zusammensetze, werde ich einfach von rechts nach links auf dieses Thumbnail des Projekts, an dem wir gearbeitet haben und es duplizieren und und der Grund, warum wir das tun wollen, ist zu Gründen Eigentlich . möchte ich nicht alle meine Ebenen hier drin loswerden, aber ich möchte meine Ebenen kombinieren. Und der andere Grund ist, dass, wenn Sie sich erinnern, ich das größer gemacht habe, als ich für dieses Codeprojekt 3000 mal 4000 Pixel war, was einfach ziemlich schwer sein wird, wenn Sie etwas in einem Webbrowser tun. Vor allem, weil ich denke, dass ich mit einigen Schichten in diesem Projekt enden werde. Also werden wir es kleiner machen wollen, und wir werden eine Reihe von Ebenen kombinieren und sie dann exportieren wollen, und wenn ich das in diesem Projekt getan habe, dann würde ich eine Reihe von Details verlieren, die ich nicht verlieren möchte. Also erstelle ich nur ein Duplikat, das dies öffnet, und dann werden wir einfach entscheiden, welche Ebenen wir kombinieren möchten und wie wir unser Projekt für den Code einrichten möchten. Zunächst einmal werde ich nur meine Skizzen und meine Sättigungsmaske löschen. brauche ich dann nicht. Ich möchte nur entscheiden, welche Schichten ich abflachen möchte. Also weiß ich schon, dass diese floaty Dinge im Vordergrund, Ähm wird nur eine Schicht sein. Meine Menschen werden nur eine Schicht sein. Also klopfe ich nur einmal, als meine Schatten abflachen zu schlagen. Ich denke, ich möchte, dass meine beiden Schatten auf der gleichen Ebene liegen, weil sie einfach in der gleichen Linie wie der Hintergrund stehen. Also werde ich nur diese zusammen kneifen, um uh zu kombinieren und dann meine Maske, ich will nur gehalten werden, sind die zwei Sätze von schwimmenden Elementen. Ich möchte diese Wolken getrennt bleiben. Ich möchte getrennt bleiben, und du kannst das tun, was auch immer für dich am sinnvollsten ist. Nimmt ein wenig Versuch und Irrtum, um zu sehen, was Sinn macht, auf verschiedenen Ebenen zu sein , wenn es sich zusammen bewegt, dann möchte ich einfach zu kombinieren Also habe ich einen soliden Hintergrund, damit ich diese Hintergrundfarbe nicht verwenden würde , Äh, Augenblick, nur weil du es etwas anders exportieren müsstest. Also würde ich einfach kopieren, was auch immer Ihre Hintergrundfarbe ist auf eine Ebene über dem Hintergrund und dann kombinieren. Wenn Sie noch andere Hintergrunddetails haben, habe ich 12345678 verschiedene Ebenen, die ich als PNG exportieren möchte, also werde ich hier oben auf den Schraubenschlüssel tippen, und tatsächlich, und tatsächlich, bevor ich sie exportiere, Ich muss die Größe meiner Leinwand ändern. Ich werde sagen, Canvas Crop Verletzungsgröße. Und dann denke ich, weil das so groß ist, stellen Sie sicher, dass Sie wieder Probe aktiviert haben, äh, also bedeutet das, dass Sie das Dokument neu dimensionieren, anstatt es zuschneiden. Re Probe ist an, und ich werde hier tippen, und ich denke, ich werde versuchen, 900 mal 1200 Pixel dafür, äh, äh, und dann drücken Sie einfach fertig, und es wird die Größe ändern. Sie können also sagen, dass ich ein kleines Detail verloren habe, was wir wollten, was auch bedeutet, dass es sich um viel kleinere Dateien handelt. Und dann werde ich wieder meinen Schraubenschlüssel hier oben klopfen und Share drücken. Und das ist neu, Unangemessen 4.3. Also, wenn Sie nicht für etwa drei aktualisiert haben, das ist, äh, das wäre nicht für Sie da, aber im Freigabe-Menü, gibt es diesen Freigabe-Layer-Bereich, und ich werde nur auf PNG-Dateien tippen. Also, was das tut, ist es exportiert? Jede Ebene hat ihre eigene PNG-Datei, und dann werde ich nur sagen, speichern Sie acht Bilder und das wird sie direkt zu Ihnen in meiner Kamerarolle speichern. Wenn ich das nicht aufmache, kannst du dich jetzt sehen. Ich habe 12345678 verschiedene Schichten, die alle als separate PNGs gespeichert werden, um eine Moral zu machen, was großartig ist. Also diesen nächsten Teil kannst du benutzen, äh, welchen Code-Editor du wirklich willst? Also diesen nächsten Teil kannst du benutzen, äh, Der, auf dem ich seine Coda verwenden werde. Das gefällt mir. Eine Menge aus vielen Gründen. Ich denke, es ist wirklich gut gemacht. Ich denke, es kostet $10 oder so etwas im APP Store auf. Es könnte jetzt anders sein, aber wenn Sie nicht wollen, dass zu verwenden, gibt es auch diese App namens JavaScript überall, die kostenlos ist. Das ist ziemlich OK, und ich werde Ihnen zeigen, wie Sie Bilder darin importieren. Aber ich werde meistens codiert verwenden. Fangen wir damit an. Das ist also dein erstes Mal, Coda zu starten? Es gäbe hier nichts für dich. Ich bin ein Nerd und ich habe ein paar verschiedene Dinge, die ich hier drin mache. Also, was Sie tun wollen, ist nur dieses Plus in der oberen rechten Ecke oben, neue Website, neue Website, und dann geben Sie es einfach einen Namen. Also werde ich diese Parallaxe nennen. Du kannst es nennen, wie immer du willst. Wenn Sie ein Nerd wie ich sind und Sie andere Website-Dinge haben, auf die Sie Administrator-Zugriff haben, könnten Sie die hier oben einrichten, aber ich werde das jetzt nicht durchgehen, wenn ich getan hatte, dann habe ich nur dieses leere Projekt, also werde ich Parallax tippen. Und wieder wäre das leer für dich, wenn du das noch nie geöffnet hättest. Also wirst du schlagen? Plus, und dann halte ich einfach jedes Projekt, das ich in Gehör mache, in einem eigenen Ordner. Also werde ich auf neuen Ordner tippen und dann werde ich diese Parallax anrufen und dann zu drücken, erstellen, erstellen, dann tippen Sie auf diesen Parallax-Ordner, der wahrscheinlich oben für Sie sein wird, und dann werde ich reden. Plus, dies wird Sie wahrscheinlich an dieser Stelle auffordern, Teoh, erlauben Sie es Zugriff auf Ihre Fotos, so stellen Sie sicher, dass Sie auf OK klicken. Das habe ich schon getan. Eso können Sie sehen, ich habe meine Schichten. Das ist also alles, was in meiner Fotobibliothek direkt hier durchblättern kann, was praktisch ist. Äh, also werde ich einfach tippen und du willst von hinten nach vorne gehen. Auf deinen Schichten sind das, was ich sowieso mache. Also wähle ich meine sehr zurück später meinen Hintergrund zuerst und tippe einfach auf, dass du sehen kannst, dass es für mich umbenannt wurde, was ein wenig nervig ist, also werde ich es einfach hier umbenennen. Schicht 11 Punkt PNG um und dann werde ich gehen und importieren. Ich werde dies nur für jede der Ebenen tun, die ich importiere, und Sie müssen Teoh importieren oder sie umbenennen, wie Sie gehen, wenn Sie es auf diese Weise tun, Sonst wird es fragen. Es wird versuchen, sie die gleiche Sache umzubenennen, weil es auf der Tageszeit basiert, zu der sie hinzugefügt wurden oder etwas, und es wird gefragt, ob Sie es ersetzen möchten. Wenn das passiert, stellen Sie sicher, dass Sie sie nacheinander benennen, bevor Sie den nächsten importieren. Und das ist nur ein bisschen mühsam. Aber, äh, willkommen beim Codieren. , Der Grund,warum ich es Zahlen gebe, ist, wenn ich ihnen Animation hinzufügen möchte, es ist, dass ich etwas wie Ebene eins Unterstrich nennen könnte, zum Beispiel Ebene eins Unterstrich drei, und das bedeutet wie Frame eins. Also ist es im Grunde wie Schicht ein Fünf-Frame-eins. Ich werde nicht in die Animation in diesem Tutorial gehen, weil es ein wenig fortgeschrittener , aber vielleicht in einem Führer eins und letzten. Okay, also habe ich 12345678 Perfect. Okay, also sind alle meine Schichten hier drinnen einsatzbereit. Wir kommen in der nächsten Lektion zurück und fügen dort Ihre anderen Codedateien hinzu. Aber im Moment möchte ich einfach durch dieses Job-Skript überall App wirklich schnell gehen. Wenn Sie sich entscheiden, dies zu verwenden, ähm, eso können Sie sehen, es hat nur dieses Hallo Welt Projekt bereits für Sie da. Das kannst du einfach ignorieren. Ich werde das Plus oben links treffen. Und dann werde ich nur mein Projekt Parallax anrufen und auf Speichern drücken und dann auf das tippen und hier kappen. Es hat Code für dich drin. Wenn wir zum Code kommen, möchten Sie diesen löschen und ihn einfach durch das ersetzen, worüber wir sprechen. Aber für jetzt, alles, was Sie tun müssen, ist, dass es dieses kleine Bild Symbol in der unteren linken. Ich werde auf diesen Treffer plus tippen und erneut aus der Fotobibliothek importieren. Das wird Sie wahrscheinlich um Zugang zu Ihren Fotos bitten. Also sage ich, okay. Und dann dasselbe, was du nur von hinten nach vorne gehen willst. Ich glaube nicht, dass dir das eine Möglichkeit gibt, sie umzubenennen. Muss ich mich irren. Ja. Also denke ich, es ist nur so genannt, wie es heißt. Miss wird also wichtig sein, wenn Sie den Code machen, Sie müssen nach diesen Referenzen suchen, anstatt wo wir die Namen schreiben, die wir ihnen in Kota gegeben haben. Und das wirst du mit jedem Bild machen, genau wie wir es mit Kota gemacht haben. Macht es nicht umbenennen. Stellen Sie einfach sicher, dass das funktioniert. Versucht nicht, es etwas anderes umzubenennen. Ja, sollte also gut sein. Und OK, also ja, alle unsere Schichten sind luftaufgestellt und bereit zu gehen. Sie können darauf tippen. kannst du sehen. Es ist das Bild, das wir eso in der nächsten Lektion wollen. Wir werden über die ersten Schritte mit Code gehen alles richtig angeschlossen. Also, äh, Sie können Ihre Bilder aus Ihrem HTML und so etwas referenzieren. Uh, also werde ich in der nächsten Lektion sehen 6. Programmieren: In Ordnung, also werden wir anfangen zu programmieren. Wie ich bereits erwähnt habe, werde ich diese App namens Coda verwenden. Also komme ich hier rein. Wenn Sie zusammen mit der vorherigen Lektion folgen, sollten Sie alle Ihre Ebenen in hier bereits s haben. Also werde ich nur einen Ordner in diesem Halter erstellen auf gehen, um es Bilder nennen, Kleinbuchstaben I. Und dann werde ich Wählen Sie alle diese Bilder und verfolgen Sie sie einfach in ihre und erledigen. Also jetzt sollte ich einen Ordner in diesem Parallax-Ordner haben und sonst nichts. Also werde ich dieses Plus treffen und dann schnell neue Datei hier und nennen Sie es Index dot html und dann werde ich wieder plus, schlief eine neue Datei nennen diesen einen mittleren Punkt Js und eine weitere genannte Stile CSS. Okay, wenn Sie also überhaupt nicht mit Code vertraut sind, werden wir diese nur ein wenig durchgehen, wenn wir die Dinge einrichten, aber im Wesentlichen der Indexpunkt html. So HTML ist eine Art von Ihrer Struktur Ihrer Seite. Es ist, wo man die verschiedenen Stücke organisiert. CSS ist Ihre Stile für die Seite, was was im Grunde bedeutet, wenn Sie Farben, Größen von Dingen, Positionen von Dingenändern möchten Größen von Dingen, Positionen von Dingen , das ist, wo Sie das tun würden. Und dann ist die Js- oder JavaScript-Datei, wo Sie auf einer Ihrer Logik tun. Wenn Sie also möchten, dass tatsächliche Dinge auf Ihrer Seite passieren, wird es normalerweise in JavaScript sein. Also lasst uns mit HTML-Datei beginnen. Und so habe ich darauf angezapft. Und dann werde ich in Coda bearbeiten und dann das erste, was Sie tun wollen, und ich werde sicherstellen, dass ich fertige Versionen und in Bearbeitung Versionen jeder dieser Dateien und als Teil des Projekts einschließe . Also, wenn du dich verirrst, kannst du in Bezug auf diejenigen gehen, die wir tun wollen. Öffnungswinkel, Klammer, Ausrufezeichen doc, geben Sie alle Großbuchstaben ein und dann ht bekannt Kleinbuchstaben. Und dann ist es morgen ein Schrägstrich eingeklemmt, weißt du. Das sind also HTML-Tags, im Grunde diese Luft wie kleine Container. Also dieser von oben sagt nur, dass dies ein HTML-Dokument ist. Diese sagen sie okay, und jetzt ist hier der eigentliche HTML. Alles in denen in der nächsten Sache wird Kopf genannt werden und ich werde den Schrägstrich darin schließen , wir werden ein paar Metadaten-Dinge haben und wir werden unsere CSS-Datei importieren. Das erste, was wir sagen werden, ist Titel und du kannst das nennen, was immer du willst. Ich nenne es Relax. Es muss nicht im Schrägstrich sein. Als nächstes wird man sein, äh, Link gleich Stil Sheet gleich Text Schrägstrich CSS Trump gleich nicht Sasha Styles. Und dann könnte ich einfach etwas Besonderes sagen, es innerhalb des Eröffnungsangriffs zu schließen. Dieser sagt also den Titel meiner Seiten, Parallax. Dieser sagt, hier ist meine CSS-Datei, und das wird wichtig sein. Wenn Sie Dinge auf der Seite bewegen wollen, was wir tun und dann ist es die nächste. Diese haben Recht, ist wichtig. Aber da okay, nennen Sie hier, nicht meins. Das nächste ist Es ist im Grunde nur sagt es Teoh unter in der Größe des Gerätes. Also, wenn Sie ein Retina-Display High-Definition-Display haben, dieses macht es tatsächlich mit der richtigen Größe auf ein paar andere Dinge zeigen. Kühlt gleich Gerät, weil ein Benutzer Okay, also das ist alles für Ihr Kopfelement. Andi, kannst du das alles direkt kopieren? Es ist absolut. Wahrscheinlich sollte mich da reinbringen. Also dann für das nächste Stück davon wird Körper sein. Dies ist also, wo Ihre tatsächlichen Inhalte gehen. Das Head-Zeug ist also meistens Metadaten, da man etwas einrichtet, das man dort Skripte importieren kann , obwohl es normalerweise am unteren Rand sensibler macht. , Und dann,wenn du darüber reden willst, hat Andi angetan, könnte jemand schon mit diesem Zeug vertraut sein. Es tut mir leid,wenn das leid, zu kompliziert oder zu einfach für Sie ist. Ich erkläre es nur so, wie ich es erkläre. Also eso div ist im Grunde nur ein blinkender Container in HTML und Sie werden ein paar andere Arten von Containern wie Körper sehen und zum Beispiel können Sie das haben, ich denke, dass ein Absatz ist, wofür das P steht. Sie haben also verschiedene Arten von HTML-Tags. Div ist eine, die ich am meisten benutze, weil ich gerne Dinge selbst stylen möchte, wo einige dieser anderen mit, ähm, einigen eingebauten Stilen zu einem gewissen Grad kommen können ähm, , also könnte man so etwas wie H eins haben. Das bedeutet Header eins, und das wird nur größer als normaler Text sein. Aber wenn er benutzt hat, wenn es nur irgendwie blinzeln und bereit ist, für was immer Sie wollen zu verwenden. Also denke ich, die sind nett zu bedienen, dann eine andere, über die wir reden wollen. Wir werden dies nicht wirklich im Projekt verwenden, aber nur um sicherzustellen, dass Ihre Bilder an der richtigen Stelle sind und korrekt referenziert werden , wir ein Bild hier einfügen. Also, das Tag ist, ich bin G. Und dann ist SRC die Quelle und Sie sagen gleich Öffnung. Zitat schließen Zitat, bekam Schrägbilder Schrägstrich Spieler ein g und ich kann sich einfach mit Schrägstrich schließen und auch. Und dann müssen wir sicherstellen, dass offenbart wurde, was es ist. Unser Körper ist geschlossen, was er ist, und das Letzte, was wir hier tun wollen, ist wichtig. Wir werden sehen, ein Skript gleich Text Schrägstrich JavaScript R c Quellen gleich Punkt Schrägstrich bedeuten Jess, und das sollte alles, was wir brauchen für jetzt in unserem HTML. Also werde ich das retten. Und dann gibt es oben rechts auf dem Bildschirm ein wenig Augapfel. Und ich werde darauf tippen und halten, dass tatsächlich von unten, meinem Safari-Browser stecken und dann ziehen und ablegen Sie es hier und setzen Sie diese Seite an Seite. Und dann werde ich auf den Augapfel in Kota klopfen und sagen, offen in Safari und das wird auf meiner Seite hoffen , dass es eine Party ist und du siehst, dass ich Dinge hier eingerichtet habe. Also, äh, dieses Testwort, das ich danke, erscheint oben auf der Seite und dann Bilder direkt darunter, was ich sagte, dass wir noch keine Stile haben. Also werde ich auf dieses kleine Box-Symbol oben tippen, links und rechts von links nach rechts auf dem Bildschirm und dann öffnen Sie Stile, die CSS und dort. Ich möchte nur ein paar Dinge se HTM aus Körper setzen. So steht CSS für Cascading Stylesheets auf. Das bedeutet, dass Dinge, die Sie auf der obersten Ebene so HTML im Körper setzen. Wenn Sie sich die Art und Weise ansehen, wie wir unser HTML strukturiertes HTML haben, ist das oberste Level-Element, und alles eingerückte ist ein Kind dieses Elements. Also kaskadieren bedeutet, dass alles, was ich in Angst habe, die Elemente auch abgesenkt werden sollten, es sei denn, ich übersetze es woanders. Also zuerst, was ich sagen werde, ist Boxen Größe und Box auf, dann Marge Null. Und Sie können diese Marge Null sehen. Sie können feststellen, dass gerade am Rand der Seite nur ein wenig weißen Rand ist. Also aktualisiere ich das und dein CSS ist jetzt angeschlossen, du wirst sehen, dass dieser weiße kleine Händler verschwindet, was großartig ist. Und dann sind diese Dinge meist nur, um die bekommen unsere Inhalte in der Mitte der Seite . Du musst nicht wirklich viel darüber verstehen, wie sie gerade funktionieren. Nun, Nun, außer wieder an, das macht den Seitenhintergrund einfach weiß. Ich könnte auch schwarz machen, wenn ich Lex zeigen wollte . Ich werde nicht in die Details darüber eingehen, wie das funktioniert. genügt zu sagen, es ist ziemlich cool, relativ neu mit CSS, und dann ermöglicht es Ihnen, die Dinge viel einfacher zu zentrieren, als das nur ein Zentrum ist. Dann könnten Sie ohne diese Flex-Anzeigeeigenschaft. Ich meine, es ist nicht so, dass diese beiden Linien sagen, dass sie horizontal und vertikal zentrieren. Das Letzte, was ich tun möchte, ist, dass ich keine Serifenschrift auf meiner Seite habe, es sei denn, ich wollte wirklich aus irgendeinem Grund. Also, dafür will ich ihre Gelder nicht. Ich werde sagen, Familien antworten, dass wir einfach Standard Was auch immer Ihr System serif Schriftart ist und dann für Bildcontainer, ich glaube nicht, dass ich ohne zurück in HD Go gehen werde. Wir werden ein div mit einer Klasse von Image-Container haben und dann wird das auch Display flex sein . 100% Max mit Prozent gehen Sie sparen gehen, um hier zu aktualisieren. Und so sieht es so aus, als würde man das auch zeigen. Nicht sicher, wo extra genau. Ich habe interessant, die wahrscheinlich abgedeckt ist. Glauben Sie diesem Bild. Ja, Texas ist noch da? Ich werde das nur tun. Lassen Sie verwalten ihre und OK, also wenn Ihre Seite jetzt so aussieht oder was auch immer Ihr Hintergrund ist, dann ist Ihr CSS angeschlossen. Wie es auf der letzten Sache sein sollte, die wir für diesen Abschnitt tun möchten, ist nur sicherzustellen, dass unser Javascript-Bratschist nachgeschaut, wie es eine Quelle sein sollte. Also werde ich auf diesem Feld wieder rechts von links nach rechts sprechen und dann auf Hauptpunkt Js tippen und dann Coda bearbeiten tippen. Und dann hier drin. Ich werde jetzt nicht zu viel tun, aber ich werde nur wachsam bleiben. Öffnende Klammer, e öffnende Anführungszeichen. Hallo, Weltraum-Ausrufezeichen. Ich verstehe. Und dann, wenn du das speicherst und dann, wenn du deine Seite aktualisierst, sollten wir ein kleines Pop-up bekommen, das hallo Welt sagt. Also, wenn das alles passiert ist, dann sind Ihre HTML-CSS und JavaScript und Bilder alle eingerichtet, richtig? Wenn dies nicht der Fall ist, werde ich diese Dateien in das Projekt einbinden, so dass Sie in der Lage sein werden, durchzugehen und einfach zu vergleichen und zu sehen, was Sie falsch verstanden haben. Ich glaube nicht, dass hier zu viel ist. Das wird bis jetzt zu wählerisch sein. Dinge zu suchen, wenn etwas unsere Großbuchstaben in Ihren Namen von Dingen wie Javascript und CSS nicht funktioniert . , Dieser Arzt muss hier sein,bevor Sie etwas öffnen und sicherstellen, dass alle Ihre Klammern und Dinge geschlossen sind, richtig? Aber wieder, Sie müssen vielleicht einfach Ihren Code durchschauen und ihn mit dem vergleichen, wie er sein sollte, denn Code kann einfach etwas wählerisch über solche Sachen sein. Also denke ich, dass das alles ist, was ich auf diesem speziellen Hören decken wollte. Und dann in der nächsten, werden wir dazu kommen, alle Ihre Bilder auf der Seite so zu bekommen, wie wir sie wollen. Also weiter zur nächsten Liste. 7. Programmieren: In Ordnung. Also, äh, wir werden damit beginnen, alle unsere Bilder auf HTML-Fünf-Leinwand zu setzen. Das Ziel am Ende dieser Lektion ist also, anstatt dieses Bild-Tag zu verwenden, das wir hier verwenden , werden wir auf HTML-Campus-Element verwenden, das eine Art coole Sache ist, die für Art von Web-Animation und mehr entwickelt wurde interaktives Zeug. Eso Wir gehen über, wie man das ein bisschen benutzt. Und wir wollen unsere Bilder in einer Renderschleife mit Anforderungsanimationsrahmen rendern, über die wir ein wenig mehr sprechen werden. Eso das hier. Es wird eine Menge Code geben, und es könnte ein wenig einschüchternd aussehen, aber nichts hier ist zu kompliziert. Und ich werde versuchen, über das zu gehen, was die Grundlagen sind, was wir tun, während wir gehen. Aber wenn Sie mit Code nicht vertraut sind, könnte sich das ein wenig überwältigend anfühlen. Also wieder werde ich Ihnen die Dateien am Ende zur Verfügung stellen, und hoffentlich wird das davon helfen. Aber, äh, schnallen Sie sich an, schätze ich. Und das erste, was wir wollen, um Thies in das Zentrum Test-Tag und dieses Testbild zu reißen , weil wir sie nicht benutzen werden. Und stattdessen werden wir in Canvas-Klasse gleich investieren Anrufe. Okay, also das mit Teil. Eigentlich möchte ich hier über ein paar Dinge reden. Ich werde das nur beantworten und darüber reden, warum ich das tue. Ich mache es mit Gleichberechtigten. 900 entspricht sowohl 100 als auch I d gleich. Sie könnten also bemerkt haben, dass ich diese Klassen und Ideen zu Dingen mache. Wenn Sie mit HTML nicht vertraut sind, wird die Klasse normalerweise für Styling Dinge verwendet. Also das ist, wenn Sie Punkt so etwas in der CSS-Datei sagen, äh, äh, diesem Punkt-Bild-Container. Dies ist eine Klasse, äh, Selektor für CSS, und das bedeutet nur, dass es nach irgendetwas mit dieser Klasse in Ihrem HTML sucht, und dann wird es diese Stile darauf anwenden. Also habe ich die Klasse des Bildcontainers in diesem div über meine Leinwand, und dann verwende ich Punktbildcontainer, um es in CSS zu stylen. Also hatte ich eine Klasse von Canvas-zu-Canvas-Element, und dann werde ich gehen. Ich hatte in einer Sekunde ein paar Sachen für CSS. Dies mit 900 Erhöhung unsere hatte 1200. Das ist die Größe meines Kunstwerks. Wenn Ihr Kunstwerk eine andere Größe hat, sollten Sie die Größe Ihres Bildmaterials angeben. Uh, und dann ist das letzte, was ich gleich Leinwand ist, ähnlich wie die Klasse funktioniert, und Sie können tatsächlich eine Idee und CSS verwenden. Aber Sie sollten wahrscheinlich nicht, es sei denn, Sie haben einen guten Grund dafür, wo Sie tun, das ist mit einem, äh, Nummernzeichen, sagen, aber tun Sie das nicht. Uh, jeder wollte so Canvas, aber ein I D wird normalerweise von JavaScript verwendet, um ein greifendes Element zu greifen und Dinge zu tun. Und wir werden das in unserer Job-Skript-Datei in einer Minute tun. Also im Grunde wollen wir nur in der Lage sein, dieses Canvas-Element auf alle Arten von JavaScript in CSS zu greifen, und wir wollten nur wissen, dass es eine 900 x 1200 Leinwand ist. Das bedeutet nicht unbedingt, dass es als 912 100 auf unserer Seite erscheinen wird. Aber genau wie wenn Sie ein Bild einschließen würden und Sie könnten sagen, dass Sie die volle Größe der Seite erhalten oder klein oder was auch immer, aber es ist immer noch weiß, welche Größe es ist. Diese Art Leinwand funktioniert. Wir sagen, das Geschäft war groß. Du bist es. Wir könnten Ihnen etwas anderes in CSS sagen. Aber nur damit du es weißt, dass die Sache der Herstellung tatsächlich ist, ähm, und dann sehe ich auch, dass ich Teoh wollte. Ja, wir werden ein paar Dinge auf der Leinwand Styling weise und wieder tun, Dies ist vor allem nur um sicherzustellen, dass auf der Seite zentriert. Also mit Auto Max, 100% X mit 100% Display, Spaziergang und Rand. Wenn wir also die Dinge richtig gemacht haben, aktualisieren wir unsere Seite hier drüben. Also meine Hallo Welt von Dr. Ascribed, um nichts zu schicken, sollte auftauchen. Nein, ich weiß nicht sicher, ob das funktioniert, aber ich würde sagen, Hintergrund-Lesung auf diesem Canvas-Element und Sie können sehen, dass der Campus in der Mitte der Seite auftauchte und es die volle Breite der Seite benötigt. Also, was wir hier wollen, ist, dass wir viel Platz wie möglich nehmen wollten, während das Seitenverhältnis beibehalten wird. S o. Ich ändere die Größe. Sie können sehen, dass es mit voller Höhe der Seite einnimmt, aber nicht voll mit. Das ist eigentlich nur ein bisschen knifflig zu tun. Aber diese Display-Flex-Sache, über die ich in der letzten Lektion sprach, hilft, diese Art von Sache viel zu setzen . Wenn Sie also eine Hintergrundfarbe auf Ihrem Campus setzen, sollte sie auftauchen. Sie können die Größe Ihrer Seite ändern, und es sollte immer das gesamte Ding anzeigen, während Sie so viel Platz wie möglich einnehmen, wenn das Sinn ergibt. Okay, also werden wir das für eine Sekunde verlassen, und wir gehen zum Job-Skript. Also, übrigens, wenn Sie Coda und eine Tastatur auf Ihrem iPad verwenden, verwende ich Befehlsverschiebung und dann eckige Klammern, um zwischen diesen Dateien zu wechseln. Ich glaube, es ist schnell. Sie können auch nur ein Pfund sie über die Spitze. Sie sind nur kleine Tabs, so dass Sie HTML CSS JavaScript auf sagen können. Also werde ich gehen. Teoh, lösche diese Warnung, weil es irgendwie ärgerlich wäre, wenn das jedes Mal auftaucht würde die Seite lieben. Und das meiste, was wir von hier an tun werden, ist drin. JavaScript wird zurückkommen und nur ein paar weitere Dinge in CSS und HTML tun, aber meistens diese Luft gemacht ish für jetzt. Mit Javascript beginnen wir, indem wir auch einen Verweis auf unsere Leinwand bekommen. Also, wenn ich zwei Schrägstriche so mache, bedeutet das, dass es ein Kommentar ist und das nichts mit Job-Skript tut. Ist ist nur für unsere Referenzen. Sag dir gute Vorliebe. Das ist nur so, dass du es weißt. Und so weiß ich, was diese Codezeile es tut. Ich werde unser Canvas equals Dokument speichern. Ja, von dem Campus. Okay, also ein paar Dinge, über die man hier schon sprechen muss, diese Bar und JavaScript bedeutet Variable. Und wo Variable ist wirklich alles, was wir speichern möchten, um später wieder zu verwenden. Also nennen wir es Canvas, und Sie können es nennen, wie immer Sie wollen. Ich werde empfehlen, dass Sie Canvas angerufen haben. Wenn Sie mit diesem kommen und dann dieses Dokument nicht Element von I d bekommen. Und stellen Sie auch sicher, dass Sie darauf achten, wo die Großbuchstaben in allem , was wir hier tun, sind . Wenn Sie Großbuchstaben vermasseln, Dinge Netzwerk. Okay, also sagen wir Dokument doc get element by i d und ihre Großbuchstaben auf Element und von und ich d und dann öffnen Schwangerschaft Zitat Leinwand, schließen Zitat, schließen Privatsphäre. OK, also Semikolon JavaScript ist irgendwie wie ein Punkt auf dem Satz. Normalerweise spielt es keine Rolle, dass viel als gute Form angesehen wurde. Wenn Sie mehr als eine Sache auf die gleiche Linie setzen, das eine Rolle. Und manchmal machen die Leute das. Ich werde versuchen, das nicht zu tun. Aber es würde immer noch in meinem Garten funktionieren, aber du solltest es dort hinstellen. Nur es ist eine gute Übung. Diese Anführungszeichen bedeuten, dass dies ein Stream ist, und das bedeutet, dass dies nicht auf diese Variable verweist. Aber ich sagte hier drüben, ist nur das Wort canvas Und dieses get Element von i. D. Dies ist eine eingebaute Funktion in Ihrem Browser, die nur sagt, Okay, Okay, geh zurück zu meinem html Suchen Sie nach was ich gab Was auch immer du es hier gegeben hast. Also denken Sie daran, in unserem HTML haben wir zu diesem Canvas-Element Canvas Weg aufgerufen, gab ich d gleich Campus. Danke. Also, jetzt sagt das Go finden Sie das Ding, das wir die Idee von Leinwand gegeben und in diese variable Leinwand gesetzt haben. Okay, also sollten wir das jetzt haben. Dann werden wir den Verweis auf Canvas-Kontext erhalten. Und ich werde diesen Balkenkontext nennen. Leute Leinwand bekommen keinen Kontext zu Okay, ich werde beachtet. Zehe Großbuchstaben achten Sie auf Zitate. Ähm, und was das ist der Renderkontext für diese Leinwand. Also ist die Leinwand eine Art HTML-Element von selbst, aber sie enthält, wie, sobald Sie erstellen, dass es immer einen zwei D- oder drei D-Kontext enthält. Wir werden den TV-Kontext benutzen, Ähm, Ähm, und dann gibt uns das etwas, mit dem wir später arbeiten können. Also, wenn wir zeichnen Bilder versuchten, um den Kontext, nicht auf die Leinwand. Aber der Kontext ist Teil des Campus. Es spielt wahrscheinlich keine Rolle, dass Sie das wissen, nur damit Sie es wissen, ähm und dann werden wir Teoh eine Ladevariable initialisiert. wir also alle unsere Bilder laden, müssen wir wissen, wann sie geladen sind, weil wir warten müssen, bis die Bilder geladen sind bevor wir sie zeichnen können. Also werde ich Sie sagen und unsere Last unterstreichen Counter People's Europe. Und wenn wir Bilder geladen haben, die einfach reingehen, sobald irgendein begrenztes Bild geladen ist, sagen wir Lastzähler plus eins, und dann, wenn es gleich der Anzahl der Bilder ist, die wir haben, dann können wir sagen, OK, alle unsere Bilder werden geliebt, und wir werden in nur einer Minute dazu kommen. Die andere Sache, die wir hier tun werden, ist, dass wir Bildobjekte für jede unserer Ebenen initialisieren werden. Und wenn Sie also verschiedene Ebenen haben oder sie anders als ideo benannt haben als ich, werden Sie Teoh Hit Engine benötigen, wie viele Ebenen Sie haben und was sie sind. Also für meins habe ich ein Hintergrundbild und eigentlich bist du immer noch glücklich. Ich könnte dir zeigen, womit ich arbeite. Also haben wir Hintergrund, der hier ist. Uh, Hintergrund ist neu, ähm, Art und Weise haben Schatten gleich zu tun sind Menschen. Lassen Sie mich Ihnen diese zeigen, wie wir gehen. Also gibt es Wolken und tatsächlich Schatten außer Ordnung bringen hier. Also lasst uns das holen, ähm, also haben wir Wolken. Ist das nächste und Wolken ist wahrscheinlich ein kleiner Begriff für das, was diese tatsächlich auf sind. Dann haben wir kleine schwimmende Dinge, Sterne und ihre Anrufe, dass wir die Bar Floaties eins setzen werden. Weil ich weiß, dass ich auch mehr als eine dieser Bowties denken kann. Und dann glaube ich, dass ich meine Schatten habe, die ich bereits gesetzt habe, und dann diese nächste, Sie können es nicht sehen, weil weißen Hintergrund von tippen, wenn Sie sehen, dass das meine Maske ist. Dann glaube ich, ich habe noch zwei. Da sind die tatsächlichen Leute, die Menschen blocken, dieses neue Bild und dann noch ein weiter Blauschimmelkäse drei. Okay, wenn Sie also mehr als acht Spieler oder weniger als acht Ebenen haben, sollten Sie hier die gleiche Anzahl von Gegenständen haben wie Ebenen. Du kannst sie nennen, wie immer du willst. Luft, nur willkürliche Indianer, die ich meine nenne. Sie müssen den tatsächlichen Bilddateinamen für später wissen, aber jetzt können Sie uns anrufen, was Sie wollen. Genau hier. Äh, okay. Also das nächste, was wir zu dio gehen, ist eine Liste früherer Objekte zu erstellen. Also, äh, wir werden unsere Liste Leute Klammern speichern. Okay, also stellen diese Klammern und Javascript eine Liste dar, und das bedeutet, dass es ist. Ich meine, es ist wirklich wissen, wie man es beschreibt, außer einer Liste. Aber das Wichtige ist, dass dies eine Liste von etwas ist. Es können Saiten sein. Es können Zahlen sein. Es können Objekte sein, was wir tun werden. Es könnte wirklich alles sein, aber sie sind in Ordnung, dass Sie erstellen. Es gibt andere Dinge und JavaScript, die Sie machen können, die standardmäßig nicht in Ordnung sind. Aber diese werden in der Reihenfolge sein, in der Sie sie in Ordnung bringen. Und so habe ich nicht mit dem Sagen der Startliste geöffnet. Das ist ein Sprichwort und eine Liste, und dann werden wir etwas setzen, das Objekte oder Wörterbücher genannt wird, je nachdem, mit wem Sie sprechen. Sie wahrscheinlich, ähm, und jedes von ihnen hat es ist nicht in Ordnung, aber Sie können Schlüssel und Werte darin haben. Das ist also der Schlüssel. Es nennt man ein Bild. Sie können sehen, dass dies eine Zeichenfolge ist, und sie müssen Strings auf der Schlüsselseite sein. Und was dann? Wir gehen. Und es sind diese Hintergrundvariablen, die wir hier erstellt haben, also wissen Sie, dass dieser Hintergrund nicht in Anführungszeichen steht, was bedeutet, dass er auf die Variable verweist, die ich brauche. Also verteilen wir dieses Bild, und gerade jetzt ist es nur ein blinkendes Bildobjekt. Aber wir werden darauf zurückkommen und dann müssen wir ihm die Quelle geben, die sein wird. Dies wird eine Zeichenfolge sein, die ein Pfad zu Ihrem Bild ist. Also, wenn Sie die Dinge auf die gleiche Weise einrichten, wie ich es getan habe, würde es Ebene 11 g geben, so dass das nicht Schrägstrich Bilder Schrägstrich Ebene sein und einen Unterstrich einen Punkt Organisation aufnehmen würde. Wenn Sie Ihre Bilder nicht in einen Ordner wie ich es getan haben, dann wäre es wie dieser Punkt Schrägstrich klar unterstrichen einen Deputy unterstrichen. Wenn Sie Javascript irgendwo verwenden, , müssen Sie gehen, um zu finden, was dieser Pfad für das Bild ist, weil ich glaube nicht, dass Sie es selbst ändern können, und dann würden Sie diesen Pfad hier stattdessen verwenden. Am Tag werden wir ihm diese geben. Ich werde ein wenig mehr erklären, wenn wir darauf zurückkommen, aber im Moment kopieren Sie sie wahrscheinlich nach unten, sehen Sie den Index, und das wird darstellen, wie nah es aussieht, als wäre diese Ebene für Sie. Ähm, Position darauf wird wichtig sein, um die Position der Ebene zu ändern. Kannst du später darüber reden? Aber Sie können sehen, dass ich dieser Position tatsächlich gebe, Teoh einen Wert eines anderen Objekts. Also hat er solche Dinge gestanden und es kann praktisch sein. Manchmal geben wir ihm einen Plan. Würde sich nicht daran erinnern, dass die Mischung für diese hier sein wird? Nein. Weil dieser hier einfach normal ist. Flint Boot, wenn einfach nein sagen. Das überhaupt. Es sind keine Boote. Das bedeutet nur blinzeln in JavaScript. Im Grunde, äh, und dann sagen wir Kapazität, weil ich denke, ich werde die Deckkraft auf einer oder zwei Ebenen ändern wollen . Das wird nur eins sein. Wenn wir also Opazität sagen, ist Null transparent, man ist undurchsichtig und hat Werte dazwischen. Okay, das ist eine später in unserer Ebenenliste, und ich habe acht, also werde ich diese ziemlich schnell durchgehen. Stellen Sie einfach sicher, dass Sie ihnen das richtige Bild und den richtigen Pfad zur Datei geben. Das sind die wichtigen Dinge, und diese kopieren einfach, wie ich sie im Grunde habe. Und dann kannst du später Sachen optimieren. Es sieht nicht so aus, wie du willst. Okay, Okay, also werde ich das ganze Ding kopieren und es hier unten aufbauen und dann die Teile ändern, die sich geändert haben? Es wird also Wolken Schicht sein, und dann verbinden Sie sich. Wir wollen, dass dies nur ein wenig näher als der Hintergrund ist, und dann werden die anderen Dinge gleich sein und wieder einfügen. Dieser nächste wird Körper sein. Eins, Sie sind drei, und wir werden das als Native 1.25 tun, und eigentlich, diesen, den ich in einen Mischmodus setzen möchte. Also zurück in meiner entsprechenden Datei gab dies im Overlay-Mischmodus. Also werde ich Zitate setzen, Overlay, Ende, Ende, Zitat auf. Wenn Sie einen Modi auf einem Ihrer Layer verwendet haben, tun Sie dies. Ich weiß nicht, dass alles von passendem in Javascript unterstützt wird, also müssen Sie das vielleicht nachschlagen, wenn Sie eine seltsame oder etwas für die Verwendung von Herzmarken verwendet haben . Vielleicht stellen Sie sich ein paar schwierige Fragen . Also nur ein Kopf hoch. Obwohl es dieses Transkript trotzdem unterstützt werden könnte, so dass ich gerade ein paar dieser konstanten Floaties konfrontiert bin, wird auch Schicht für sein und dieser Index wird negativ 0.5 sein. Und wieder denke ich, dass dieser auch einen Overlay-Mischmodus aktiviert hat. Dann ist dieser nächste meine Schatten. Nennen Sie es Schatten. Ja, drin. Und dann sind das deine fünf. Und tatsächlich hat das verpasst, als ich meine Layer-Namen und so erstellt habe. Also möchte ich, dass dieser wieder für den Z-Index ist. Ich wollte zwischen den Wolken und dem Hintergrund sein und weil wir es so einstellen, dass es sich vermehrt. Es spielt keine Rolle, dass es aufgrund der Art, wie ich arbeite, höher im Stack ist. Es wird sowieso nur mit Schichten darunter kombiniert, so dass es sich nicht umsieht. Aber das ist nicht zu verwirrend. Und wir werden 1,25 machen. Eigentlich fühlen wir uns wie 1,5. Wir werden sehen, wie das aussieht, und Sie können einfach mit Leichtigkeit spielen, wenn die Dinge nicht so aussehen, wie Sie sie wollen. Ich werde das ändern, um sich zu vermehren, und wir gehen einfach. Die Deckkraft hat gewonnen. Es könnte zurückkommen und das ändern. Und dann denke ich, Wie habe ich links? Noch drei. Das hier ist also meine Maske, okay? Und das ist Layer sechs, und ich möchte, dass das die Null des Index ist. Das wird also irgendwie meine Mittelreißdrehung sein. Das wird also an Ort und Stelle bleiben, während sich alles andere im Wesentlichen auf der menschlichen Schicht sieben Mal bewegt , und das ist der Index wird positiv sein. Also erinnern Sie sich, dass ich darüber gesprochen habe, wie es mehr Spaß macht, wenn etwas aus der Seite herausholt und etwas in die Seiten geht, sind Hintergründe mit den Negativen, dem Index. Sie werden so aussehen, als würden sie auf die Seite dieser Dinge gehen, mit den Positiven, dem Index, sie werden aussehen, als würden sie von der Seite kommen, da wir zwei oder drei D-Effekte bekommen. Also bekomme das ist der Index von 0,8 und lasse alles andere. Und dann wird dieser letzte mein Floaties-Baum sein, und das ist Schicht. Und es ist der Index. Uh, mal sehen, ähm, lasst uns das auch tun, um ziemlich weit zu kommen, und ich wollte, dass die wollen nur ein bisschen transparent sein . Also werde ich 0,9 als meine Deckkraft sagen. Das wäre 90% Kapazität. Und dann eine Sache, auf die Sie achten müssen Wenn Sie kopiert und eingefügt haben, wie ich, können Sie am Ende Ihrer Themen kein nachgestelltes Komma haben. Stellen Sie also sicher, dass Sie das loswerden, und das sollten alle unsere Schichten sein. Also, das sieht einschüchternd aus. Es ist nicht zu kompliziert. Die meisten davon sind nur Kopien voneinander. Ich denke, die Sache, die am schwierigsten wird, ist nur sicherzustellen, dass Sie die richtige Anzahl von ihnen haben , um sicherzustellen, dass Sie den richtigen Weg haben. Und, äh, dafür zu sorgen, dass er hier den richtigen Bildnamen verwendet hat, den Sie oben angegeben haben. Also nochmal, kopieren Sie mich nicht, es sei denn, Sie kopieren mich wirklich genau. Aber stellen Sie sicher, dass Sie die Dinge nach Ihrem Kunstwerk dafür tun. Okay, in diesem nächsten Teil sagen wir Schicht West. Und denken Sie daran, das ist die Liste, die wir mit eckigen Klammern erscheinen lassen. Wir nennen diese Ebenenunterstrichene Liste. Also hier unten, werden wir sicher skaten Ihre Unterstrichliste, die auf diese Liste verweist, und dann verwenden wir diese integrierte. Ich kann nie, wie man das nennt. Ich werde es nicht sagen, Belüfter, aber ich könnte mich irren. Für jede Funktion wieder. Das ist mit einem Kapital essen. So Layer-Liste für jede öffnende Schwangerschaftsfunktion. Gebrochener Lehrling E-Spieler-Index. Ähm, und hoffte grausam Schläger. Stellen Sie sicher, dass Sie eine Schließung etwas am Ende setzen. Und das, was das tut, ist, sagen wir für jedes Element in dieser Ebenenliste und Elemente in der Liste dieser obersten Ebene Also gibt es Objekte, jedes davon mit den kleinen eckigen Klammern. Uh, also werden wir sagen, für jedes Objekt in dieser Ebenenliste werden wir diese Funktion ausführen. Wir werden ihm das Objekt und den Index an dieses Objekt übergeben, was genau die Zahl ist es in der Liste. Diese Funktion wird also wissen, wenn Sie nach Ebene fragen, es wird wissen, dass wir über die aktuelle Ebene sprechen, die sie in dieser Liste von Ebenen betrachtet , und dann wird Index die aktuelle Nummer dieser Ebene sein. Also, äh, für jede dieser Ebenen wurden Ebene bekam Bild, das auf dieses Bild verweist. Wir haben es gegeben. Also ist es eigentlich ein Hinweis darauf, dass wir es mir übergeben haben. Und dann werden wir sagen, dass die Punktbombe die Funktion der Leute belasten, die sich mit Klammer öffnen , wo du sie anrufen willst, und denken Sie daran, dass wir diese Ladung hier oben treffen konnten. Unterstrich laden. Fälschungen sind derzeit Null. Also jedes Mal, wenn eines dieser Bilder geladen wird, wollen wir sagen, laden, unterstreichen Zähler plus Leute eins, was bedeutet, fügen Sie es hinzu, was auch immer es gerade jetzt an einem ist. Und dann, ähm, dann wollen wir Teoh. Wir wollen nichts anderes tun, bis alle Bilder geladen sind, oder? Wir werden sagen, wenn Load Unterstrich Counter, äh ist größer als oder gleich Ihnen. Unterstrichene Liste der Spieler. Mal sehen, ob wir Teoh Drama sind, das ist ein Trank, den wir noch nicht gemacht haben, also gehen Sie hinein. Interessant. Das ist also eine if-Anweisung und Javascript. Es sagt im Grunde nur, wenn das, was Sie in die Klammern setzen, wahr ist, dann tun Sie das Zeug darin und Sie können auch anderes sagen, tun Sie etwas, das wir hier nicht anders verwenden, weil alles, was wir daran interessiert sind, ist, ob es erledigt. Also, wenn wir alle unsere Bilder geladen haben, aber dann wollen wir Sie Dr. Campus, Ähm, und dann, nachdem wir diesen Player eingerichtet haben, das Bild herunterladen, weiß es noch nicht, was wir laden sollen. Also müssen wir sagen, Ebenenbild s R c für Quelle gleich Player Doc. Cast R C. Okay, das singt also Laden Sie das Bild, im Grunde. Und dann, wenn die Bilder geladen sind, weiß das Bild bereits, um diese Funktion auszuführen, die wir hier erstellt haben, dass Chemiker zeichnen wird . Also im Moment wird das nichts tun, weil wir keinen Truck und Dysfunktion haben. , Aber was wir nicht tun können,ist hierher zu kommen und unseren Job tatsächlich zu Funktionsstörungen bringen. Also werden wir sagen, Funktion, versuchen Sie dies, Uh, Uh, hier ist nur die Schaffung einer Funktion namens Canvas, die wir von überall in unserer Job-Skriptdatei aufrufen können . Also, als erstes werden sie was auch immer klären. Ja, fangen Sie an, weil wir das „Was“ betreiben? Wir werden diese Funktion einmal ausführen, äh, mal sehen, , 60 Mal pro Sekunde,denke ich, denke ich, und wenn du es nicht klar machst, denke ich nicht, dass es wirklich wichtig wäre. für diese bestimmte Seite, vorausgesetzt, Sie haben keine Transparenz, die den ganzen Weg durchläuft. Aber es könnte etwas seltsam aussehen. Also im Grunde möchten Sie alles löschen und 60 Mal pro Sekunde wiederholen. Also gehen wir zuerst klar, indem wir Kontext sagen, wo das ein Verweis auf den Kontext ist, mit Ihrer Leinwand kommt. Du hast recht. Null-Komma, keine Leerzeichen. Uh, Leinwand drin. Das Sprichwort ist, dass wir diesen Bereich löschen werden, indem wir oben links beginnen. Ich denke, das ist Null Top Null und geht mit einem Kreuz und Höhe nach unten. Also im Grunde die Größe unserer Leinwand, wir löschen nur dieses Rechteck innerhalb der Leinwand. , Männer, wir brauchen Teoh durch und ziehen Fuselier. Sie müssen die nicht zeichnen. Du musst diese Kommentare ausschreiben, wie ich es bin. Ich mag es, sie zu haben, weil es die Dinge ein wenig klarer macht. Was ich tue, ist, dass ich später meinen Code wieder durchlese. Ähm, also werden wir dasselbe tun, wie wir es hier oben getan haben, soweit das für jede Sache geht, also kannst du diese Zeile tatsächlich kopieren, wenn du willst. Sie sagen, später Lager für jeden. Sie stellen sicher, dass Sie mit einer schließenden eckigen Klammer geschlossen und Klammern schließen und dann für jede Ebene in der Liste, werden wir den Kontext sagen. Rock-Bild. Wir sind also das Bild, das wir versuchen. Und dann brauchen wir die Positionsschicht Position X. Und ich denke, wenn wir das jetzt ausführen, dann wird das nur so weit funktionieren. Und wir werden ein paar Dinge ändern, bevor wir mit dieser Lektion fertig sind. Also werde ich im oberen Regen speichern treffen, und dann muss ich wieder Safari hier oben bringen, weil ich meine Fotos App geöffnet habe und ich werde nur aktualisieren. Gehen wir zurück zum Index Punkt html Es speichern halten Sie den Augapfel gedrückt, öffnen Sie in Safari und Sie können sehen, dass mein Bild hier aufgetaucht ist. Das bedeutet also, dass alle meine Ebenen in den Kontext gezeichnet werden. Also muss ich noch ein paar Dinge machen. Wir haben diese Art von Aufstellung bereits zu gehen. Die 1. 1 ist, dass wir gehen. Teoh Roseman. Cursory. Okay, wir gehen. Teoh, stellen Sie sicher, dass wir den richtigen Mischmodus verwenden. für jede Ebene. Eso Wir werden nur sagen, Ihr Arzt, weil dies Politik spät gemischt Sentinel zurückkehren wird , was es auf den meisten dieser Schichten ist, erinnern Sie sich? Also habe ich Mischungen. Nein. Wenn das falsch ist, dann wird es nicht tun, was hier ist. Wenn es Teoh eine Stamm wie Overlay gesetzt ist oder multiplizieren, dass es tun wird, was wir hier Revisionskontext haben . Nun, wie ist es gleich? Später, als sie etwas anderes sagen wollten. Also, wenn Layer Docklands nicht oder falsch ist, werden wir Context global sagen. War es Operation People's Zitat, Zitat Zyklus? Ähm und dann, wie wir runter s gehen, so können wir einfach sagen, da hatte Befehl, so dass Sie das Häkchen oben sprechen können , richtig? Ich werde aktualisieren und Sie können sehen, dass sich mein Anwalt Mischmodi gerade geändert hat. Also meine Schatten Luft eingestellt, um sich zu vermehren. Meine kleinen Floaties im Hintergrund sind auf Overlay eingestellt, und das ist genau wie und dann noch eine Sache, die wir tun müssen, ist nur die Deckkraft festzulegen. Also auf dieser vorderen Schicht, die Floaties im Vordergrund erinnern, ich sagte es t 0,9 Opazität, und im Moment sind sie völlig undurchsichtig. Du kannst sie überhaupt nicht durchsehen. Ich werde sagen, Kontext, global gleich Player und jetzt aktualisieren, dass. Sie können sehen, dass sie nur ein wenig transparent geworden sind. Also denke ich, das ist gerade fertig. Das Letzte, was wir brauchen, ist, dass dies nur einmal läuft, und dann ist es fertig. Und denken Sie daran, wir haben darüber gesprochen, wie wir einen Anforderungsanimationsrahmen verwenden, um die 60 Mal pro Sekunde durchlaufen zu können. Also müssen Sie hier nur ein bisschen vorsichtig sein. Aber im Grunde fordern Sie Animationsrahmen an. Ist es etwas in Ihrem Browser gebaut, das eine Funktion so oft ausführen wird, die auf den Bildschirm zeichnen kann , auf den meisten modernen Browsern wieder 60 Rangers sein wird? Anstatt dies mit den Klammern hier aufzurufen, werden wir stattdessen sagen, umAnimation anzufordern, Animation anzufordern, Fantasie zu öffnen. Und dann geben wir ihm nur den Namen der Funktion ohne nichts. Es ist nur der Name der Funktion, die Leinwand fallen gelassen wird und dann denken Sie daran, die Aufmerksamkeit auf Großbuchstaben zu zahlen. Also, das ist Anfrage der unteren Tasten unsere Animation mit jedem Fall ein und Rahmen mit einem Großbuchstaben F Droge Leinwand eso Wenn wir sagen, dass, Das sollte einmal durchgehen, was großartig ist. Und dann ist das letzte, was wir brauchen, um zu dio ist ganz am Ende unserer felsigen und Dysfunktion. Also nach dieser Ebenenliste für jedes Aber vor dieser schließenden geschweiften Klammer, werden wir das gleiche sagen, was die Erlaubnis anfordert. Wort der Warnung hier. Tun Sie es nicht so. Das wird abstürzen. Du tust das wahrscheinlich nicht. Äh, aus Erfahrung zu sprechen. Sie möchten also den anfragenden Animationsrahmen aufrufen? Das zu verfolgen und im Grunde, was das tut, ist, dass es das durchläuft. Also sagten wir, es mit ihrer Questanimation hier zu nennen. Dann geht es hier runter, läuft es einmal, und dann kommt es zum Ende und es steht: Oh, Oh, fange von vorn an. Und es geht nur durch, bis du redest, um aufzuhören, die nicht sagten, dass er aufhören soll. Also werde ich sagen, dass ich hier drüben Aktualisieren hören werde, und Sie sollten keinen Unterschied sehen, aber es rendert tatsächlich 60 Mal pro Sekunde. Jetzt wird das wichtig sein. Eine Aktualisierung der Position basierend auf Berührung und Bewegung, denn so bewegen wir die Dinge tatsächlich um. Okay, also die andere Sache, die ich tun möchte, wird in diesen Hintergrund gehen, um Hilfe in Ihrem CSS zu erhalten. Ich mag es nicht wirklich, dass ich Flash jedes Mal gelesen habe, wenn ich die Seite lade, aber ich glaube, dass das für diese Lektion sein wird. Also in der nächsten, werden wir tatsächlich bekommen, um es beginnen, basierend auf Berührung und Maus zu bewegen, und dann gehen wir von dort. 8. Programmieren: Okay, wenn Sie also alle anderen Lektionen bisher befolgt haben, sollten Sie an einem Punkt sein, an dem alle Ihre Bilder auf Leinwand gezeichnet werden. Dies sollte also eine Reihe von verschiedenen Schichten auf der rechten Seite sein. Aber es sollte so aussehen, als wären Sie fertig, aber es wird noch nichts tun, also werden wir so bekommen, wenn Sie berühren und ziehen auf dem Bildschirm, bewegen sich die Ebenen tatsächlich um und sie sehen aus wie drei D. Also, uh, um zu beginnen, werde ich einfach einen Abschnitt am Ende meiner JavaScript-Datei hier erstellen und ein Job-Skript verwenden Kommentar mit Land Slash ist am Anfang. Ich werde nur Touch und Controls sagen, und dann ist das erste, was wir tun wollen, nur das ist nicht ganz so wichtig für die Berührung. Wenn Sie jedoch die Maus verwenden, möchten Sie nur, dass sich das Bild bewegt. Wenn Sie klicken und ziehen, möchten Sie sich nicht bewegen, wenn sich die Maus im Fenster befindet. Ich meine, es sei denn, das ist, was du willst, dann tust du es. Aber für mich wollte ich mich nur bewegen, wenn ich tatsächlich absichtlich einziehe, also werde ich retten, sind gleich fällt. Und das ist nur eine willkürliche Variable, die ich erstellen werde, die sagt, standardmäßig ist dies falsch. Wir kommen zurück und verweisen darauf später in einigen der Dinge, die wir tun. Es hat es auch gesagt. Wenn Sie wahr sind, klicken Sie auf oder beginnen Sie mit dem Berühren des Bildschirms. Aber tun Sie das einfach, um damit zu beginnen. Und dann das nächste, was wir tun wollen, ist zu sagen, wir werden einige nur Art von Containern initialisieren , um unsere Berührung oder Maus Co Ordinaten s zu halten. Also müssen wir zwei von denen tun, eine wird sein, was wird Winter anfänglich genannt werden , und das wird irgendwo sein, wo wir verfolgen, wo Sie zuerst berührt haben oder wo Sie ersten Mal auf den Bildschirm geklickt haben. Das wird wichtig sein, weil , weil wir später darüber reden. Aber im Grunde, wenn Sie nicht den Überblick zu behalten und einfach zu bewegen, wo Sie auf dem Bildschirm auf Dinge berührt, springen Sie herum, sobald Sie ihren Klick berühren. Was wirklich seltsam aussieht. Wir werden x Null sagen. Warum Null? Das ist also eine Objektnummer So sind Schlüssel. Ist X unser Wert Null sind Schlüssel. Warum? Wert ist Null und dann werden wir unseren Zeiger zu speichern. Und das wird nur ein Container sein, wo unsere aktuelle Purser oder Touch-Position auf etwas 00 Um ist , und dann so, um tatsächlich auf Berührungs- oder Maus-Events zu hören, müssen wir diese Sache tun, die einen Ereignis-Listener hinzufügen Eso Wir wollen Zehe Onley feuern das wenn Sie auf den Campus tippen, um damit zu beginnen, also sagen wir Leinwand und denken Sie daran, das ist eine Referenz, um Scham von Canvas Dot Ad Listener zu lesen und dann sagen wir Touch, fangen nachvollziehbar an, Richtig? Und dann werden wir die Funktion Winterstart nennen, weil wir das für Berührung und Haus verwenden werden. Also meine ich nur, wenn Sie anfangen, den Bildschirm zu berühren, führen Sie diese Funktion aus, ohne den Funktionsweg zu lesen. Möchten Sie das Gleiche vom Outsourcing bei Hören im Chaos tun? Ja, rufen Sie dieselbe Person an, Mr. Ähm, also haben diese Luft beide einen Namen für die Ereignisse eingebaut, die in Ihrem Browser feuern . Also musst du sie genau nochmal benennen. Achten Sie auf Großbuchstaben in Kleinbuchstaben und diese Dinge, die sie von Bedeutung sind. Und dann werden wir tatsächlich diese Funktion erstellen. Zeiger also auf eine passivere Wirkung und das wird nur automatisch übergeben, weil Ereignis-Listener , Sie müssen es nicht übergeben. Normalerweise müssen Sie mit einer Funktion tatsächlich explizit etwas geben, das Sie eine Funktion erhalten möchten, aber in diesem Fall nicht. Also ist es irgendwie nett. Das erste, was wir tun werden, sobald wir anfangen zu berühren oder anfangen zu suchen, ist Bewegung zu wahr, und das wird in einer Minute ins Spiel kommen. Ähm, aber jetzt wissen wir, wie jedes Mal, wenn wir die Variable überprüfen können, um sie zu sehen. Klicken Sie gerade auf das Screening? Berühren Sie gerade den Bildschirm? Die nächste Sache ist, lassen Sie uns einfach sicherstellen, dass das tatsächlich funktioniert. Es ist also alles, was ich sagen werde. Alarmierung. Ja, hallo, du die Serie. Also werde ich sagen, dass Community s Sie das kleine Häkchen in der oberen rechten Ecke haben können und dann werde ich nur die Seite aktualisieren. Ich habe nicht wieder gearbeitet. Okay, also muss ich zurück zum Index. Habe den Augapfel nicht oben fest, richtig. Und sie öffnen sich in Safari und aktualisieren Sie dann den Bildschirm, Aktualisieren Sie die Seite. Und dann, sobald ich den Bildschirm berühre, bekomme ich ein Hallo, du berührst den Bildschirm. Okay, also gehe ich zurück zu meiner JavaScript-Datei auf, und so will ich das nicht wirklich dort. Das ist nur, um sicherzustellen, dass es angeschlossen ist. Richtig? Wenn Sie etwas haben, das auch eine Maus hat, können Sie überprüfen, dass auch funktionieren sollte. Und dann wollen wir sehen, was für ein Ereignis das ist. Wir wollen nachsehen. Ist das empfindlich gemeint oder ist das ein Mausereignis? Denn obwohl sie scheinen, als sollten sie gleich sein, verweisen Sie sie nur ein wenig anders. Aber wir werden sagen, ob Ereignis verklemmt gleich ist, berühren, starten. Okay. Und dann sagen wir „Berühren“. Sagen wir einfach Alarm Touch und dann alle anderen, die Sie bekommen, weil wir sonst sagen könnten, wenn Typ jetzt gleich ist, Schnecke, dann können wir sagen, wachsam. Und ich werde das nicht testen, weil ich kein Haus habe, mit dem ich offensichtlich als ich 12.2 war oder etwas, das ich hier benutze. Das ist keine Sache. Eso Dann werde ich hier zu aktualisieren Reisen und Bildschirm und es sagt berühren. Das bedeutet also, dass das funktioniert. Cool. Ich lasse dich mit. Und dann was? Wir wollen dio, sobald wir ein Touch-Ereignis oder ein Massenereignis gestartet haben, ist, dass wir die Anfangslinie setzen wollen , die Ihre ursprüngliche Sache Punkt. Denken Sie daran, wir haben diesen Punkt zu Ihrer anfänglichen Variable hier oben gemacht und wir wollen einfach festlegen, wo Sie zuerst auf den Bildschirm geklickt oder berührt haben? Jäger. Initiale X gleich Ereignis Dr. Touches Bracket ist hier und dann etwas mit Weiß. Was? Ihre üblichen Warum berührt Null eso dies auf? Dies ist der Unterschied zwischen Touch und Maus. Soweit Sie mit ihnen umgehen, ist diese Berührung Null? Denn technisch gesehen, wenn Sie Touch verwenden, könnte er Multi-Touch verwenden. Das Nullmittel ist also das erste Element im Array der Berührungen oder der Liste der Berührungen. Null ist nur, wie Sie das erste Element in der Liste indizieren. Also sagen die erste Berührung, um Bildschirm berührt haben. Und was ist seine Position im Client? Sollte sehen, welchen Browser. Und dann also von anderswo, gehen wir zu einem Punkt. Exp entspricht Find X. Ich bin sicher, Rauchen, weil Sie nicht die erste Maus sagen müssen, die den Bildschirm berührt hat. Ich kenne kein System, das mehr als eine Maus unterstützt. Ja, sag mir Bescheid, wenn du diöst und was besser sagt, äh, jetzt wissen wir, wo du zuerst den Bildschirm berührst. So machen wir es also. , Das nächste,was wir tun wollen, ist, dass wir überall wollen, wo Sie Ihre Maus oder Ihre Berührung innerhalb des gesamten Fensters bewegen . Wir wollen hören, wo es ist, damit wir uns bewegen können, dass wir die Bilder basierend darauf versetzen können . Also werden wir sagen, Fenster, Fenster, das Ereignis-Listener-Fenster ist nur ein gebaut alles und Job scripted. Das ist es, wovon du redest. Das musst du einrichten. Wir werden sagen, berühren, bewegen, bewegen, und wir wollten diese Funktion nennen Sie Ihre und dann Fensterdarsteller. Und dann müssen wir tatsächlich unsere Punkt-Entfernen-Funktion erstellen, und dann wollen wir sagen, dass er Standardwerte nicht verhindert hat. Leute schreien draußen. Kühl drauf. Dies ist wichtig, denn wie Sie, wenn Ihr Fenster zu groß ist, was viel Zeit, es basiert nur auf der Art und Weise, wie Safari auf dem iPhone oder iPad funktioniert. Ich muss uns retten und erfrischen. , Sie können sehen,dass es Schriftrollen sind, obwohl ich nicht scrollen wollte. Also dieses Ereignis, das Default verhindern wird wichtig dafür sein, im Grunde, im Grunde, sagt nur: Tu nicht, was du normalerweise tun würdest, wenn ich meinen Finger oder meine Maus auf dem Bildschirm bewege, und wir müssen das an zwei Stellen tun. Das funktioniert noch nicht ganz. Aber dann ist das andere, was wir tun, daran zu denken, dass wir diese Bewegung und die bewegliche Variable haben, die wir früher eingerichtet haben. Also, um damit zu beginnen, war es falsch. Dann fingen wir an, auf den Bildschirm zu klicken oder zu berühren, und es wurde wahr. Und jetzt wollen wir nur zu Lee sagen, wenn das wahr ist, dann tun Sie die folgenden Dinge, die sie sagten. Wenn es wahr ist, dass Sie einen anderen Code schreiben können, also werden wir verfolgen, wo unsere Druck-Ex-Ausrüstung ist? Und um mit Rubin Se Null zu beginnen, wo ist unser derzeitiger weißer Hof darin war ein 60 und dann setzen wir ein paar mehr. Wenn ja, tut mir leid. Dies wird ein paar Schichten tief sagen, wenn Ereignis gleich berühren, dann werden wir sagen, X gleich Ereignis. Das ist Ihre eigene und, äh, aktuelle Y Gleichberechtigte berührt Ihre Alles in Ordnung. Also haben wir unsere Ausgangsposition, die wir hier und dann wissen wir jetzt die aktuelle Position. Und wenn Sie sich von der Physik erinnern, dann Ihre endgültige Position in Mal sehen, wie funktioniert das, Sie ändern Distanz ist letzte Minuten anfänglich, also gehen wir in nur einer Minute dazu. Ähm, aber wir wollen auch sicherstellen, dass ein Mausereignis behandelt wird. Hier ist, was sonst noch. Wenn Sie eine enge Kühlung gewähren, ist X gleich, was nicht berührt. Ich kann heute wirklich nicht hinnehmen. Warum gleich aufhören zu spielen. Also, Also, jetzt haben wir unsere aktuelle Position jemals Cursor, und dann wollen wir nur, dass Teoh tatsächlich den Zeigeroffset setzt. Also außerhalb dieser beiden Aussagen, also direkt unter dieser Klammer, wollen Sie Pointer X sagen. Und denken Sie daran, dass wir das hier oben nur als Null einrichten. Aber wir gehen rüber, richtig? Dass wir sagen, dass auf X gerichtet ist, äh, aktuelles X, aktuelles X das ist unsere endgültige Position, erinnerst du dich? Minus Quinter Unterstrich bedingten Punkt Exe Zeiger y gleich Strom. Warum? Minus. Das sagt uns, wie weit entfernt von dem, wo Sie angefangen haben, sollte das an diesem Punkt sein? Ähm und dann denke ich, okay, wenn du also willst, lass wenn du also willst, lassuns zurückgehen und das erst funktionieren, und dann werden wir ein paar kleine Details aufräumen. Aber die Sache, mit der wir anfangen wollen, ist wieder in unserer Dropcam-Dysfunktion hier oben bevor wir das Bild tatsächlich in den Bildschirm ziehen. Jetzt müssen wir sehen, wo wir das Bild zeichnen sollen? Weil es geht. Ich meine, das ist der Punkt ist, dass wir uns bewegen wollen, wo wir es zeichnen, und das wird es aussehen lassen, als wären die Ebenen ein bisschen drei D basierend auf dem Parallax-Effekt . Ähm, also werden wir nur sagen, Mal sehen, wir werden sagen, Layer-Punkt-Position gleich bekommen Requisiten. Das ist eine Funktion, die wir in nur einem zweiten Konzept schreiben werden, die später, so dass Offset Stanzen erhalten. Wir gehen hier runter, Infektion. Verärgern Sie sich. Und es ist dieser Name für eine Ebene. Und wir werden sagen, eine Bar Touch verärgert X gleich Zeiger X, um mal Schicht, die Z. Also das wird wichtig sein, denn wenn wir diese Schicht nicht tun Hunde, der Index, würde alles nur zusammen bewegen. Und dann sieht es so aus, als würden Sie den Bildschirm scrollen. Wir sehen viel zu viel. Warum gleich Pointer? Warum mal größer. Sehen? Denken Sie daran, dass Z-Indizes referenzieren, wie nah oder wie weit weg vom Bildschirm wir wollen , dass diese Ebene angezeigt wird. Das wird unsere Art von drei d-Effekt erzeugen. Und dann wollen wir einfach sagen, dass wir noch ein paar Dinge hinzufügen. Es scheint jetzt ein bisschen sinnlos zu sein, aber wir werden es in einer Minute benutzen. Es ist ein Teil Offset gleich in geschweifter Klammer gesprochen. Danke wird Offset X berühren und warum es berühren wird, warum und das mit Semikolon. Und dann kehren wir einfach zurück. Dieser Typ ist ein Rückgabe-Offset. Und das sagt nur, was nach dieser Funktion gefragt wird. Gib ihm einfach dieses Ding zurück, das wir gerade gesagt haben, was ist das verärgert? Also jetzt wird die mehrschichtige Opposition diesen Offset zurück bekommen anstelle der 00 , die wir ihm ursprünglich gegeben haben, Ähm, also jetzt glaube ich, dass, wenn wir auf aktualisiert diese Seite gespeichert hätten und ich werde ein Video machen, so Sie können tatsächlich sehen, was ich mit meiner Hand mache. Wenn du deinen Finger auf dem Bildschirm verwendest,bewegen sich deine Spieler. Wenn du deinen Finger auf dem Bildschirm verwendest,bewegen sich deine Spieler. Wenn du deinen Finger auf dem Bildschirm verwendest, Sie können sehen, dass es auch den Bildschirm scrollt, was wir nicht wirklich wollen. Also werden wir das in nur einer Sekunde beheben, und das ist wahrscheinlich zu stark davon zurück. Also werden wir ein paar Anpassungen daran vornehmen, aber ziemlich cool. Alles klar, das erste, was wir Teoh wollten, ist wahrscheinlich das einfachste ist, dass wir nur geprägt sind , dass es diesen Effekt ein wenig abschwächt . Also werden wir unseren Touch-Multiplikator gleich 0,3 speichern. Und dann, in jeder dieser kleinen Berechnungen, sagten Zeiger Punkt x mal ist er Index, wir gehen. Sagen Sie auch mal berühren, es ist ein und Sie stimmen dieser Touch-Multiplikator zu, was immer Sie wollen. Je nachdem, wie größere Leinwände und Dinge wie, die Sie vielleicht möchten, um dies ein wenig zu optimieren , so dass Sie mit dieser Zahl herumspielen können, Sehen Sie, was Sie mögen. Ich habe das etwas früher gemacht, und ich mag diese Nummer. Also werden wir hier ein Video machen und nur sehr frisch, und Sie können sehen, dass das viel subtiler ist. Unser Disney scrollt immer noch auf dem Bildschirm, also gehen wir zurück und reparieren das. Und so, um das Screen Scrollen zu beheben, denke ich, dass wir Dio hier runter gehen und sagen, äh, Canvas fügt keinen Ereignis-Listener hinzu. Ähm, berühren, bewegen, und wir sagen Funktionsereignis. Das heißt also, ich nenne es platzeffiziente, willkürliche Funktion, die Sie an diesen Listener übergeben. Es bedeutet, dass Sie es nicht benennen. Du gibst ihm nur eine Funktion und du hörst auf dieses Ereignis. Also werden wir sagen, Event-Zeug, Standard. Das wird also zum Standardverhalten, wenn Sie den Bildschirm berühren und sich bewegen, ist, dass sich der Campus auf dem Bildschirm bewegen wird, weil Sie den Bildschirm scrollen und wir wollen nicht, dass das passiert. Wir wollten uns nur bewegen, basierend auf dem, was wir Ihnen sagen, zu tun, nicht basierend darauf, wie groß es denkt, dass das Fenster ist, und dann machen wir dasselbe von uns. Also habe ich diese erfrischende Seite gespeichert. Und wenn Sie jetzt mit dem Finger spielen, nein, es wird keine Seite mehr scrollen. Das wird also anrufen. Und dann wollen wir eine letzte Sache hier, was Sie sehen, als ich aufgehört habe, den Bildschirm zu berühren, es bleibt nur dort, wo ich aufgehört habe, wir nie, dass wir wieder in seine ursprüngliche Position schnappen wollten , wenn Sie loslassen. Also werden wir Fenster sagen, die so verwenden wir Fenster, weil Sie aufhören könnten, das Canvas-Element zu berühren . Wir wollten Zehenfeuer, wenn du deinen Finger irgendwo in Brother schaust, ist es erwähnenswert. Wie hörst du es viel verstehen und keine Beschreibung? Introspektion? Wir sagen und Geste, ich bin sicher. Dasselbe für oh, Eingabe von Nos. Mr. Sie wissen, wir werden sagen, und nur Sie schreiben unsere Verdauungsfunktion, Funktion und Gestenaufzeichnungen werden persönlich sein. Wir wollen sicherstellen, dass Menschen klein bewegen. Wenn Sie also Beträge verwenden, stellen Sie fest, dass, sobald Sie Ihren Reisepass freigegeben haben und er sich bewegt, was auch immer Sie bewegen, sich mit einem Bildschirm verwirren und das besagt, Tun Sie das nicht mehr, denn jetzt ist es falsch und wir überprüfen, ob es wahr ist bevor wir etwas bewegen. Und dann ist die nächste Sache, wir werden sagen, dass schneller X gleich Null Verschleiß y gleich ist. Okay, jetzt habe ich das gerettet und es nimmt Video auf. Ich werde diese Seite aktualisieren und veröffentlichen. Es schnappt sich zurück in die Mitte. Ziemlich cool. Alles klar, das ist alles für unsere Berührung und Maus und was auch immer das Wort bewegt Dinge basierend auf berührenden Noten. In der nächsten Lektion fügen wir Bewegungssteuerelemente hinzu. Also hören Sie das Gyroskop auf Ihrem Gerät, jemand, bewegen Sie es physisch herum, die Bild-Aktion bewegt sich um, also werden wir gehen, dass hören. 9. Codierung von 5 Bewegungssteuerungen: bevor wir in diesem Abschnitt beginnen. Wenn Sie IOS 12.2 oder neuer verwenden, als Sie in die Einstellungen gehen müssen, dann scrollen Sie nach unten zu Safari und stellen Sie sicher, dass im Abschnitt Datenschutz und Sicherheit Bewegungs- und Orientierungszugriff aktiviert ist, dies standardmäßig deaktiviert. Sie müssen also den Schalter umdrehen und sicherstellen, dass er eingeschaltet ist. Wenn Sie das nicht tun, wird nichts in diesem Abschnitt funktionieren. Alles klar, lasst uns mit der Implementierung von Motion Controls beginnen, so dass, wenn wir das Gerät genommen haben, Sie eine Art Drei-D-Effekt bekommen können. Also gerade bei der sehr unabhängigen Ich war Skriptdatei, werde ich nach unten gehen und Kommentare sagen Motion Controls. Ich mag es, meine verschiedenen Abschnitte so weit wie möglich getrennt zu halten. Und das ist nicht Es ist schwer, vollständig zu tun, weil es Orte gibt, an denen man abschleppen, Dinge ein wenig mischen und sie zusammen benutzen kann. Aber was für ein Ausmaß? Ich kann nicht denken, dass es schön ist, einen Abschnitt für die meisten meiner Motion Controls zu haben. Die meisten meiner Berührung steuern Dinge wie diese. Das erste, was wir tun werden, ist genau wie bei den Touch-Steuerelementen, dass wir unsere Positionen initialisieren werden. Also wollen wir Welchen Winkel war das Gerät, dass, wenn Sie die Seite zum ersten Mal aktualisiert und in welchem Winkel ist es jetzt? Also werden wir sagen, initialisierte Variablen oder Emotionen basiert. Entspannen Sie sich. Und wir werden weit bleiben. Bewegung unterstrichen anfängliche kühlt Objekt, das einige aufrufen, um X zu beenden. Alles klar, eigentlich könnte man sagen, seriell auf diese. Es spielt keine Rolle. Mal sehen. Sagen wir nein. Ich glaube, so hatte ich alles vorher. Wir werden in Bewegung bleiben. Unsere Emotionen sind gleich Objekten, und diese werden X Null sein. Du bist und dann hier unten werden wir uns die Gyroskop-Position anhören. Du bist und dann hier unten werden Also werden wir sagen, äh, naja, Ereignisse. Und, äh, wir werden sagen, Fenster Dock am Ereignis-Listener, ähm, Gerät. Und dann werden wir diese nicht Dysfunktion bestehen. Etwas Seltsames mit meinen Räumen hier, das ich nicht mag. Und was wir tun wollen, ist das erste Mal, dass das durchläuft. Das wird ständig durchlaufen, wie die Seiten nach oben, aber das erste Mal wollen wir sagen, wo? Wie, welchem Winkel befindet sich Ihr Gerät derzeit? Weil wir nicht wollen, dass Sie die Seite laden und es ist bereits in einem seltsamen Winkel, als ob die Bilder bereits auf eine seltsame Weise versetzt sind. Uh, also werden wir sagen, ob dies der erste wahre ist, ähm, ähm, wenn nicht Ozean anfängliche Punkt Exe und keine Option unterstrichen anfänglich ist. Warum? Also dieses Ausrufezeichen am Anfang einer Variablen? Also habe ich diese if-Anweisung und dann sage ich, wenn Ausrufezeichen Bewegung das anfängliche Ausrufezeichen hier unterstreichen , ist es eine Code-Abkürzung , um diese Quelle zu sagen, wenn das nicht da ist und weil wir es null erscheinen war, dass Bewegung initiale Punkt Exe Nein ist. Und wir sagen, wenn nicht Bewegung initiale Punkt Exe weil nein, das gibt wahr für ist es nicht da? Das ist ein wenig verwirrend, aber im Grunde sagen wir, dass Satz bereits und wenn nicht und dasselbe für warum dieses Ende und sagt, dass wir nach beiden Dingen suchen. Also muss ich sagen, seine Ex nicht gesetzt und warum Es wird auch nicht gesagt. Ja, also sind beide nicht eingestellt. Dann werden wir in Bewegung bleiben unterstreicht anfängliche nächste gleich Sie wurden Dr. Scored. Warum er anruft. Das bedeutet, dass wir wissen, wo das Gerät, welchem Winkel das Gerät gehalten wurde, als wir es zum ersten Mal geladen haben. Danach wollen wir also sehen, wo das Gerät ab und zu ist, können wir den Unterschied nehmen und sehen, wie viel wir die Dinge ausgleichen sollten, je nachdem, wie weit es bewegt ist? Seit du die Seite geladen hast? Eso Es gibt ein paar alles Es gibt vier verschiedene Orientierungen, die wir hier behandeln müssen weil sich die Achsen irgendwie ändern, je nachdem, wie Sie Ihre Geräte halten. Also müssen wir damit umgehen. Das Gerät befindet sich im Hochformat. Die Geräteberatung ist bei ihrer Entscheidung im Querformat. Das Gerät ist im Querformat. Es ist richtig. Seitliche Geräte stehen auf dem Kopf. Du hältst es wie ein Tier. Okay, also, äh, diese 1. 1 werden wir nur sagen, wenn Fensterpunkt-Ausrichtung gleich Null ist, das bedeutet, dass es im Portrait ist. Ähm, und wir werden das vorerst überspringen, weil ich auf der linken Seite arbeite, und ich will nur sichergehen, dass es funktioniert, bevor wir uns mit diesen zu hinreißen lassen. Und dann, wenn die Fensterausrichtung 90. Das ist links auf seiner Landschaft auf der linken Seite, was die Art ist, wie Ich gerade Meinen Gott halte. Also lasst uns diese anderen wirklich schnell einrichten. Aber dann werde ich wieder darauf zurückgehen. Wollen Sie zuerst gleich negativ 90 testen? Ähm, das ist dies und Landschaft wollte auf der rechten Seite. Und dann können wir einfach anders sagen und weil die einzige verbleibende Möglichkeit ist, dass es Kopf steht, also eso, wenn es auf der linken Seite ist, dann werden wir Bewegung X sagen und denken Sie daran, wir haben unsere Bewegung älter hier überschreiben wir Motion X, und wir sehen, dass es gleich ist, dass Punkt Pita, die die aktuelle Position des Geräts minus Bewegung Unterstrich Anfangs X ist, und dann Bewegung y gleich Ereignisstart. Äh, Waas. Das sollte negativ sein. Event Dunkles Gamma plus Emotion. Ihre Punktzahl bedingten Punkt rechts. Äh, stellen Sie sicher, dass Sie das Recht haben. Es geht um Cameron. Okay, also denke ich, das sollte richtig sein, um es in der Landschaft auf der linken Seite zu halten. Also brauchen wir Teoh zu unserer get Offset-Funktion, wo wir den Offset jeder Ebene zurückgeben erinnern, und zwischen Ihrem Touch-Offset und Sie sind verärgert Objekt, das wir zurückkehren, werden wir sagen, weit Promotion Unterstrich Offset, Unterstrich X gleich, uh Punkt x Times Spieler Z unterstrichen Index. Und denken Sie daran, dass sich unsere Schichten mit unterschiedlichen Geschwindigkeiten bewegen. Im Grunde, machen Sie es drei d aussehen. Andernfalls wird das zusammen bewegen und Sie werden nichts wirklich bemerken, außer dass es wie die Seiten aussieht . Es krabbelt. Also gehen wir zu dem und dann werden wir unsere Bewegung retten. Unterstrich, Versatz. Unterstrich. Warum war Bewegung? Warum war später Dodds Andere Sport Index und dann Weil ich bereits weiß, dass dies eine ziemlich schwache Wirkung ist . Ich werde auch nur einen Bewegungsmultiplikator machen. Es ist also ein Balkenbewegungsunterstrich. Bullet Lieferant gleich 2,5, und dann dasselbe wie wir es mit Touch eins getan haben. Ich werde sagen, mal Emotion unterstreichen, um hier zu kaufen, und das ist einfach kopieren und einfügen, so dass es ein wenig schneller ist. Und dann wieder, wenn Ihre Leinwand eine andere Größe hat oder wenn Sie nur wollen, dass dies stärker oder schwächer ist , können Sie mit dieser Zahl spielen, und es wird die Stärke des Bewegungseffekts ändern. Andi, hier Mittwoch plus Trank Unterstrich. Verärgert. Unterstreichen Sie hier X. Wir werden sagen, Bless Emotion. Unterstrich. Versatz. Warum unterstrichen? Und das heißt, die totale Verärgerung wird Berührung plus Bewegung sein. So können Sie die Position der Schichten ändern, indem Sie Ihr Gerät gleichzeitig berühren und kippen . Und sie werden beide arbeiten und nichts wird auf seltsame Weise herumspringen. Also werde ich das retten. Und dann gehe ich Teoh Teik Video. Aktualisieren Sie die Seite und lassen Sie uns sehen, ob es tatsächlich funktioniert, um dies zuerst ein wenig größer zu machen . In Ordnung, also werde ich mich erfrischen. Und dann, wenn ich es meinem Gerät sage, könnte man sehen, dass alles irgendwie cool aussieht in drei D. Okay, das ist nur, wenn es auf der linken Seite ist. Wir müssen also jede dieser verschiedenen Orientierungen berücksichtigen. Und ich hoffe, dass diese nur funktionieren, wenn Sie meinem Code genau folgen, weil sie wirklich schwierig sein können, herauszufinden, was was ist und was in welcher Richtung sein sollte. Wenn es also nicht für Sie funktioniert, müssen Sie vielleicht nur irgendwie optimieren, Positive und Negative und sagen, dass die Dinge so funktionieren, wie sie sollten. Und es könnte irgendwie verwirrend sein, aber hoffentlich müssen Sie das nicht tun. In diesem Fenster ist die Punktorientierung gleich Null, was die Hochformatausrichtung ist. Wir werden in Bewegung bleiben. X entspricht minus Bewegung. Initiale unterstrichen. Warum? Und dann Bewegung, warum gleich Ereignis? Beta minus Bewegung Unterstrich Initial, äh, Bewegung initiale x und dann in der Landschaft auf seiner rechten Seite, was negativ ist. 90. Wir werden Emotion über X gleich negativ, sogar. Stoppen Beta plus Bewegung Ihrer Punktzahl anfängliche Punkt Exe Emotion y gleich. Das ist cama minus Bewegung Unterstrich initiale. Warum und dann, wenn es auf den Kopf steht, wird es das Gegenteil der Porträtausrichtung sein. Also werden wir sagen, Unruhe Punkt x gleich negativem Gamma Nein, ich havent gleich hier oben. Nur verpasste u minus wäre plus unterstrichen. In Ordnung. Und dann Emotion über y ist negativ, weniger Stil, X. Ähm OK, also werde ich sehen, ob das und dann ein bisschen schwierig sein wird, mein Telefon zu halten und diese alle gleichzeitig zu überprüfen, Aber ich gebe ihm meine beste Chance. So gehen sehr frisch, Ich kann sehen, dass meine Flucht nicht gebrochen. Das ist also immer noch extrem. Ich werde sagen, dass ich die Seite nicht unterdrückt bin, aber Sie können sehen, dass die Spieler die Art und Weise bewegen, die sie sagten , Oh, das sieht irgendwie drei D aus. Dasselbe Sie bewegen den Lappen, wo das alles sehr schwierig ist. Entschuldigung. Kopf stellen. Die Spieler bewegen sich. Wie sie abkühlen sollten. Also, um das Problem zu beheben, bei dem du das genommen hast und alles weit zur Seite springt, gehen wir unter diesen Geräte-Orientierungs-Listener, und wir werden nur sagen, Window Dot schlechtes Event Listener Senator um, Orientierung, geben Sie ihm eine nicht Dysfunktion mit Ereignis Semikolon und sagen, Emotion unterstrichen Anfangsfinish . Anfangs X ist gleich Null unterstrichen. Anfangs y ist gleich Null. Also, wenn ich das sage, nimm ein weiteres Video. Das wird eine weitere seltsame peinliche, wenn ich mein Gerät in der Nähe habe. So funktioniert jetzt Landschaft. Ich ändere es ein Porträt. Es stellt eigentlich alles wieder in den Mittelpunkt, und das wird für jeden Ruf funktionieren. Das sind wieder seltsame Verzerrungen. Ähm, aber ich glaube, das ist alles, was wir nach Emotionskontrollen verlangen wollten. Also da drin, nur noch ein paar Dinge, die wir irgendwie etwas polieren können. Also, als Nächstes hör mal, werde ich die Dinge noch mal erledigen, und wir gehen von dort aus. Ok? Ich wollte auf eine letzte Sache damit hinweisen, weil ich denke, dass ich Fragen dazu bekommen werde . Und wenn Sie Ihr Gerät perfekt aufrecht halten, ist ein wenig knifflig. Sie werden sehen, dass alles springt. , Das ist nur der Effekt,wie das Gyroskop Daten zurückgibt. Und ehrlich gesagt, ich habe keine Ahnung, wie man es repariert. Ich habe lange damit verbracht, das herauszufinden, und ich weiß es nicht. Also, wenn einer von euch coole Entwicklungsassistenten sind, die wissen, wie man das kompensiert, lassen Sie es mich wissen und ich werde dies aktualisieren. Hör zu, danke. 10. Coding 6-Feinschliff: Es gibt nur noch ein paar Dinge, die ich hier gerne ändern würde. Nur eine Art letzten Schliff, Dinge, die es ein wenig polierter aussehen lassen. Die erste davon wird also ein Ladebildschirm sein. Also, wenn Sie das von einem Server leben, könnte es ein paar Sekunden dauern, bis es geladen wird. Und es sieht einfach kaputt aus, als Lakers eins nach dem anderen kommen. Wir sind also schon gezählt, wie wir schon wissen, wann alles geladen ist. Also gehe ich einfach zum HTML hier und unter der Leinwand drauf, sobald sie es tun, gleich dem Laden des Dash-Bildschirms, und dann d gleich. Und dann innerhalb des afrikanischen Staates Plünderung Ente Schrägstrich. Okay, ich werde über sagen und dann gehen Sie zu Ihrer CSS-Datei und unter Punkt Canvas. Wir werden den Asche-Bildschirm beladen und dann die Klammer öffnen, und es wird eine ganze Reihe von diesen geben. So brauchen Sie vielleicht eine positive bekommen die Mall. Aber ich werde sagen, Position absolut. Oh, ich mit 100% Hintergrund. Null Null Null Null, genau hier. Sichtbarkeit Kapazität Ähm, Textil-Mittel-Display. Fax-Flix-Richtung Äh, Linie ich zentriere mich nur um äh huh. Im Übergang zentrieren. Da ist er all deine Punkte, die Farbe haben und wahrscheinlich auch nicht. Okay, also wenn du all das noch darunter hast, das sagt, dass du Bashs Bildschirmpunktraum zwischen diesen zwei Jahren ladest , äh, äh, Sichtbarkeit versteckt sagt. Befestigen Sie Ihre Also im Grunde, all dies macht so ziemlich einen weißen Overlay-Bildschirm, der das Wort Laden direkt in der Mitte davon hat verblassen, wenn Sie die Klasse Hit in es hinzufügen, was mit Ihren Hunden tun wird. Gut. Ähm, ja. Es gibt nicht wirklich viel, außer den Text vertikal auszurichten und den Text horizontal auszukleiden. Also werde ich dort gerettet. Wir gehen zu Java-Skript, und dann fügen wir einfach ein paar Dinge hinzu. Also bin ich oben in der Job-Skriptdatei und direkt über dieser Ladezählung Ramblings, sie sind geladen, gleich fällt, fällt, und dann möchte ich einen Verweis auf den Ladebildschirm darüber erhalten, und Das wird einfach weit sein. Unterstrich Bildschirm gleich Element von E. Und das nennt man blowing in unserem HTML. Ich werde sagen, dass ich Teoh runterkommen werde, wo wir es überprüfen, alles ist geladen. Also, das ist genau hier in unserer Layer-Liste für jedes innerhalb dieser, wenn der Lastzähler größer oder gleich dem Stoppen der Layer-Liste ist. Also werden wir hallo sagen. Das ist eine Funktion, die wir schreiben müssen. Es ist in Ordnung. Und hier unten müssen wir nur Funktion sagen. Ich habe eine Ladung und innerhalb davon wird sagen, dass Unterstrich Bildschirm Plus mit einem Großbuchstaben L auf der Liste geladen wird. Äh, okay, also sag die Erfrischung hier drüben. Und Sie konnten sehen, dass Sie einen Ladebildschirm haben, der auftaucht und dann verblasst. Es ist geladen. Das ist also eine nette kleine Ergänzung. Also das nächste, was wir tun wollen, ist, dass wir ein bisschen einen Drei-D-Effekt hinzufügen . Also haben Sie Ihre Layer-Offsets. Aber wenn man sich das nur nicht durch eine Kamera anschaut, sieht es nicht Super Three D's aus. Wir werden auch eine Art Rotation des gesamten Canvas-Elements hinzufügen. Ähm, das ist ein bisschen schwieriger, wahrscheinlich weniger kommen, , also werden wir in diesen Jockey und Dysfunktion gehen, direkt unter unserem klaren direkten Liegen hier auf ein paar Zeilen und dann Wir werden sagen, berechnen Oh, viel. Das sollte 30. Und dann sagen wir, dass unser Staatsunterstrich X gleich warum ist? Von da Held Negative 05 uns Glas Fantasie Emotion Punkt Warum? Seit 1.2 Semikolon und dann Schicksal y gleich, Was ist mit dem nächsten Mal seit Ihrem 0,15 plus Punkt x und dann darunter, wir werden tatsächlich den Campus drehen? Eigentlich, also werden wir sagen, Leinwand, dieser Stil kühlt ab. Äh, das könnte etwas knifflig sein, also könnte ich das hier richtig machen. Ich werde unsere Transformation retten. Seltsam, äh, gleich. Was wir also tun, ist, dass wir ein seltsames machen, indem wir einige Variablen innerhalb der Zeichenfolge verwenden, die wir als CSS-Wert festlegen. Das ist also nur ein bisschen seltsam, aber gebt mit mir. Aber ich muss vorsichtig sein, wo Sie hier Zitate setzen . Drehen X Öffnung Schwangerschaft Ende Zitat plus Unterstrich Pecs. US-Eröffnungszitat DEG endet Klammern, Leerzeichen replizieren. Warum? Ok. Schwangerschaft Ende. Zitat plus Unterstrich Warum Deck Semi Doppelpunkt. Hier. Wir gehen Referenz, die streng behandelt. Okay, also hatte ich gerettet und ich werde unsere Art und Weise Neuling Seite hier rüber drehen und jetzt können Sie sehen , dass sich die ganze Sache tatsächlich ein wenig dreht. Also brauchte ich das Negative eigentlich nicht . Negativ 0,15 und sieht besser aus. Also, jetzt dreht sich die ganze Sache irgendwie nur ein bisschen, wenn ich meinen Finger um den Bildschirm bewege oder wenn ich mein Gerät bewege, einer davon ist invertiert, wenn ich mein Gerät lebe. Also brauche ich wahrscheinlich zwei Mal negativ auf diesen Antrag und wahrscheinlich Bewegung Warum, ja, ich denke, das ist besser. Okay, cool. So, jetzt haben Sie mehr drei D-Effekt. Großartig. Ähm, und dann im letzten, was ich tun möchte, ist, dass das, wenn ich Touch-Steuerelemente oder Maus benutze und dann loslassen, einfach sofort wieder normal wird. Das würde ich gerne wieder animieren. Ich wurde trainiert, keine JavaScript-Bibliotheken von Drittanbietern zu verwenden, aber es gibt eine ziemlich coole, die ich Ihnen nur sehr schnell zeigen möchte, namens Tween dot Js . Also, das ist verfügbar auf get haben und ich werde einen Link dazu in das Projekt auf einfügen, Aber Sie öffnen es. Mal sehen, wenn Sie zu Tween O J s gehen. Dies ist die Seite, die Sie zu Ihnen kommen würden und dann Sie und tippen Sie auf Quelle hier und dann zwischen Dutch A s und Sie können Rock und Sie sollten in der Lage sein, alles durch Tippen und wählen Halten auf dem Bildschirm. Das könnte auf IOS nur ein wenig nervig sein, aber mit genug Patienten, denke ich, Sie könnten es tun. Ich werde all das kopieren und dann zurück in Kota und gehe auf das kleine Box-Symbol oben links tippen und dann werde ich das Plus oben rechts im Code treffen, Ein Bildschirm und traf neue Datei Habe ein Problem zwischen Punkt Js überall und Glaubensbekenntnis Und dann möchte ich auf Tween dodgy s Top-Editor in Kota Tap eins tippen und einfügen Und es sieht so aus ich alles in Ordnung habe und ich werde Speichern oben drücken, richtig? Und dann gehe ich einfach auf Tween Herzogtum s an der Spitze und es schloss Tween Herzogin. Also, dann gehen wir zurück zu Index dot html Und so würden Sie eine andere Job-Skript-Bibliothek einfügen Also direkt über unserer Hauptpunkt-Js-Datei. Ich werde sagen, Skripttyp gleich Schrägstrich JavaScript Force gleich Zitat, das Schrägstrich ja, öffnen Sie das. Ich werde das speichern und dann zu Ihnen in der Java-Skriptdatei zurückkehren. Und es gibt ein paar Orte, an denen wir das bearbeiten müssen. Gehen wir zurück zu unserem Bild hier. Stellen Sie sicher, dass das funktioniert. Okay, also sehe ich einfach keinen Ort, wo das anfangen wird. Art von konzeptionell ist, wenn Sie Touch oder Maus loslassen. Das ist also in unserer Endgestenfunktion, die genau hier ist. Sie werden also Zeiger dot exe löschen und Zeiger dia y gleich Null beiden Zeilen . Und stattdessen werden Sie zwischen Kapitellen sagen, und dann werden wir sagen, sind unter unterstrichen Mittelwert gleich neue schlagende Hauptstädte. Ein paar Zucker, dass zu und dank Null Warum? Es ist ein Held. Lockige Halterung, 300 Princey Einfach. Ich meine, zurück Angst. Ich denke, das ist richtig. Ja. Okay, im Grunde, was das tut, ist es, wenn Sie aufhören zu berühren oder auf den Bildschirm zu klicken, wird es ein neues Tween starten, das automatisch in unserer Renderschleife aktualisiert wird. Also müssen wir zurück zu unserer Renderschleife gehen, die hier Hard Rock und Dysfunktion gewesen ist. Also direkt unter dem Teil, wo du den oh Kontext löschst, sind wir stattdessen gut bekannt. Es ist tot. Wir werden es nur sagen, und wir werden dieses Datum sagen, und ich denke, das ist alles, was Sie tun müssen. So konnten wir speichern und dann die Seite aktualisieren und dann verschieben Sie sie und dann loslassen. kannst du jetzt sehen. Es springt schön zurück, also musst du das nicht tun. Das ist fakultativ, aber ich denke, es ist ein bisschen schöner. Fühlt sich nicht ganz gebrochen an, wenn man loslässt. Ähm, und wirklich, das ist es, Oh, ich hoffe, Sie haben das genossen. Lassen Sie mich wissen, wenn Sie Fragen im Diskussionsbereich haben. Ich leider kann leidernicht jedem mit seinem ganzen Code helfen, wie ich zuvor erwähnt habe. Aber wenn Sie einige spezifische Fragen haben, stellen Sie sicher, dass Sie den Code überprüfen, den ich hinzufügen werde, und lassen Sie es mich wissen. Und vielen Dank für die Arbeit 11. Anhang 1 iOS 13 Support: Hey, Jungs. Also wollte ich dir nur ein schnelles Update geben, da ich eine West 13 hatte und ich 13 war, kam raus . Ich hatte ein paar Fragen darüber, wie man die Gyroskop-Bewegung funktioniert. Apple hat das mit den neuesten Betriebssystemen geändert. Also, wenn Sie sich in der vorherigen Lektion erinnern, sagte ich, Sie müssen in die Einstellungen gehen und einen Schalter aktivieren, damit es funktioniert. Drei gute Nachrichten sind, dass du das nicht mehr tun musst. Die schlechte Nachricht ist, dass Sie ein wenig mehr beschichtet hinzufügen müssen, um diese Arbeit jetzt zu machen. Aber ich denke, es ist insgesamt eine bessere Lösung als Waas. Also, das ist eigentlich ziemlich schnell. Also kippe ich mein iPad. Sie können das nicht sehen, aber das Bild auf der rechten Seite bewegt sich überhaupt nicht, und das ist nicht das, was wir wollen. Dies beginnt also gerade mit dem Ende des Codebeispiels, das ich in der Ressource gepostet habe , ist Abschnitt Produkte und Ressourcen. Und ganz unten in Ihrer Hauptpunkt-JS-Datei fügen Sie nur eine Zeile hinzu, die Fensterpunkt beim Ereignis-Listener sagt, stellen Sie sicher, dass Sie auf die Großschreibung dieser Dinge wie Ende und dann Funktion achten. Sie schließen das Semikolon und dann werden wir nur sagen, innerhalb der Ozean aktivieren und dann müssen wir schreiben, dass Bewegungsfunktionen aktivieren Wir werden funktionieren und in der Lage Maschine . Und dann werden wir nur sagen, wenn wir euch koreanische Station anstellen, dann Geräteergänzung und Erlaubnis anfordern und das mit, ähm in Klammern hier schließen und sicherstellen, dass Sie die Kapital d zu Beginn dieser auf Capitol Eigenkapital. Sie, das ist eine eingebaute, ich weiß nicht, dass diese eingebaute Sache in Ihrem Web-Browser baut . Sie müssen also sicherstellen, dass, wenn Sie die Großschreibung falsch machen, es nicht funktioniert, um dies zu speichern. Und dann, wenn ich meine Webseite hier drüben aktualisieren und dann neige ich mein iPad und immer noch nichts passiert. Aber wenn ich auf den Bildschirm tippe, wird es diese kleine Nachricht angezeigt, die besagt, Ich würde gerne Bewegung und Orientierung zugreifen, also werde ich treffen, erlauben. Und jetzt, wie ich meinem iPad sagte, können Sie sehen, dass es wieder funktioniert. Eso können Sie, ich mache es nur basierend auf Berührung. Und das ist dieser Ad-Event-Listener Teil hier drüben. Und das bedeutet nur, wenn Sie den Bildschirm berühren, sobald Sie Ihren Finger heben, wird das laufen. Und Sie können ein aber in oder so etwas hinzufügen, unsere andere Möglichkeit, dies zu aktivieren. Also auf meiner Website, wenn Sie sich einige dieser ansehen, habe ich eine kleine Schaltfläche, die besagt Orientierungszugriff aktivieren. Da ist viel mehr CSS involviert. Also werde ich mich jetzt nicht stören, aber das ist wahrscheinlich ein bisschen offensichtlicher Weg, Dinge zu tun. Aber vorerst wird das funktionieren. Aber das tust du. Wenn Sie dies auf eine andere Weise aktivieren möchten, dann nur ein Touch-Ende. Du kannst es nicht automatisch machen. Das ist der Haken hier. Sie können dies nicht einfach ausführen, sobald die Seite geladen wird. Es muss etwas sein, mit dem der Benutzer interagiert, das es läuft. Eso, das könnte ein Tippen Klick sein. Ich glaube nicht, dass Sie es auf Swipe tun können. Sie können es versuchen, wenn Sie wollen. Aber, äh, ja, also hoffe ich, das hilft etwas Sicht und, uh, viel Glück. Lassen Sie mich wissen, wenn Sie Fragen haben 12. Grundlegendes Debugging: Hey, also wollte ich nur ein wenig Debugging darüber gehen, solange ich Updates für die Klasse s mache . Oh, ich hätte das ursprünglich übergehen sollen, aber es gibt einige einfache Möglichkeiten, herauszufinden, oder erhalten Sie zumindest einen Hinweis darauf, wo Ihr Code schief läuft. Eso meistens haben wir unseren Code Seite an Seite ausgeführt. So ist der Code-Editor APP auf der linken Seite und Safaris auf der rechten Seite. Aber um diesen d Bugger im Code-Editor zu verwenden oder was auch immer sie es jetzt nennen, äh, müssen Sie Teoh tatsächlich Ihren Code in ihrer eingebauten Vorschau ausführen. Ähm, also in deiner Indexpunkt-HTML-Datei, könntest du einfach diesen Augapfel oben tippen. , um Ich denke, umes zu öffnen und Sie zu unterstützen, tippen Sie und halten Sie eine Frustration. Tun Sie das in einer vorherigen Lektion. Aber du bist nur einmal passiert und du kannst sehen, dass du diese nette kleine Vorschau direkt in deiner Hälfte auf Ben oben läuft , richtig? Unmittelbar unter dem Häkchen. Da ist ein Rechteck mit Fadenkreuz drin. Wenn Sie darauf tippen, werden Sie sehen, dass Sie dieses große graue Rechteck mit einigen kleinen 20 0 Dinge oben links davon s So wird dies Ihre Konsole genannt. Die in dieser App ist nicht fantastisch. Es gibt viel bessere in Desktop-Browsern. Aber das ist eine der besseren Optionen auf dem iPad. Im Moment können Sie sehen, dass ich keine Fehler habe, was bedeutet, dass mein Code gut funktioniert, was großartig ist. Viele von Ihnen, wenn Sie auf Probleme stoßen, würden wahrscheinlich einen Haufen Ares hier haben. Also werde ich Ihnen zeigen, wie die aussehen würden und wie man etwas aufspüren . Also lasst uns hier etwas ändern. Beispiel, ZumBeispiel,sagen wir, ich habe Ihre Initiale als Punter-Initiale geschrieben, und ich hoffe, das ist kein schlechtes Wort, äh, in einer Sprache, die ich nicht kenne, oder so. Aber wenn ich zurück zu meiner Index Geige, einfach drücken, oben aktualisieren, immer noch keine Fehler. Aber sobald ich auf den Bildschirm getippt habe, um sich plötzlich zu bewegen, ist es voll von rot sagte und sagt, sagt, Kann variable Zeigerinitialen nicht finden. Das sagt mir in meinem Javascript, dass etwas mit diesem Punkt nicht stimmt. Ihre anfängliche Variable. Also gehe ich zurück zum Java-Skript. Grundsätzlich könnten Sie hier oder etwas suchen und einfach versuchen zu finden, was vor sich geht oder bis die Bestellung im Grunde beginnt und auf Desktop-Browsern viel Zeit, ich werde Ihnen sagen, auf welcher Zeilennummer das Problem ist auch auf Fledermäusen, diese kleinen Zahlen aus auf der linken Seite des Bildschirms auf. Aber ich will das nur beheben. Geh zurück. Und dann auch, wenn Sie am Ende mit einem Konsul voll von Fehlern wie diesem, können Sie unseren Typ klar am Ende mit Ihrer kleinen Funktion tippen. Klammern, verstanden. Wenn Sie es betreten, wird alles für Sie klar. Ja, das sind also nur einige sehr schnelle Debugging-Tipps. Hoffentlich hilft das jemandem, uh, danke.