Art et code : Créez et codez une illustration interactive en parallaxe

1. Intro: Salut. Mon nom est Jarrett, vocal sur Illustrator, et je fais des projets de code pour le plaisir Occasionnellement eu beaucoup de gens me questionnent sur ces illustrations de parallaxe que j'ai fait où utiliser des couches différentes pour créer un Effet D avec votre illustration. Et donc je suis enfin en train de le faire tutoriel à ce sujet. Donc, cela va être basé sur HTML, CSS et JavaScript avec je fais mes couches inappropriées. Et c'est une classe avancée. Donc, si vous n'avez pas suivi mon cours de début approprié, j'inclue un lien vers cela dans les notes pour le cours. Je recommanderais probablement de passer par cela d'abord. Si vous avez des questions sur le dessin, euh, mais j'aurai quelques nouvelles choses ici, et j'y reviendrai un peu. Mais aussi juste un code d'exclusion de responsabilité est intrinsèquement compliqué. Si vous ne savez rien sur le code, cela va probablement vous jeter au fond juste un peu. J' essaie d'aller aussi simple que possible et de garder ça pas trop compliqué, mais il va y avoir des choses qui vont mal, et je ne pourrai pas Teoh, tout expliquer ou vous aider avec toutes ces choses. Et je suis désolé à l'avance, mais je vous recommande d'aller suivre un cours de crash rapide en HTML et CSS et JavaScript . Je sais que W trois écoles a des choses d'introduction rapide ou pense que le code Academy en a de bonnes , et je pense que l'un d'entre eux serait un excellent moyen rapide d'utiliser votre temps avant de le faire. Mais si vous êtes un développeur expérimenté et que vous suivez cette classe, peut-être aider les gens qui ont des difficultés et aussi garder à l'esprit que je suis un artiste, pas un développeur, principalement. Alors allez-y doucement sur mon code. Ne soyez pas trop méchant, mais je vais le faire sur un iPad pro avec un crayon Apple sur Aller travailler et procréer. Vous pouvez utiliser Photoshopped Clip Studio. Je ne sais pas ce que les gens utilisent. Tous font un programme qui peut que vous pouvez travailler avec des couches et puis je vais coder dans Kota sur un iPad pro. J' ai un clavier si vous avez un clavier, Bluetooth, USB, USB, peu importe. En utilisant ça, mon clavier. Je recommande que parce que pendant le clavier du logiciel de son serait une douleur. Mais vous êtes le bienvenu pour faire ce que vous voulez, et ensuite je vais le faire en parties. Alors, euh, ouais, commençons. 2. Dessiner 1 Concept et des vignettes: D' accord, on va commencer à faire des croquis pour ça. Et, euh, je vais juste aller dans ma pile de croquis ici et approprié. Je vais cliquer sur le plus haut en haut à droite pour créer un nouveau canevas. Et parce que ce n'est que des esquisses soulignant la taille de l'écran, cela n'a pas vraiment d'importance, car les esquisses vont probablement créer un nouveau document dès que le début de l' œuvre réelle d'une semaine. Donc, hum, si vous n'avez pas suivi mon cours approprié précédent, je vous recommande d'y aller pour un aperçu plus complet de la façon dont je travaille dans la procréation et de toutes sortes de choses. Vous pouvez dio Um, mais je vais essayer d'aborder quelques choses ici. Certains des puits, en fait, tout d' abord, ce qui est de parler de ce que nous essayons réellement d'accomplir ici avant d'aller à paramètres appropriés et des choses comme ça. Donc, euh, aller au safari. Donc c'est mon site web, euh et donc l'effet que nous essayons de recréer est ce genre de parallaxe de trois D où vous pouvez en quelque sorte le déplacer. Vous pouvez voir que les calques se déplacent les uns par rapport aux autres, donc j'ai l'impression d'avoir une boîte d'ombre. C' est plutôt cool. Et aussi, vous pouvez déplacer votre appareil, et que vous l'inclinez, vous pouvez voir que la réponse de l'illustration au gyroscope Donc, c'est assez cool. Donc, quelques choses que nous allons vouloir penser pendant que nous travaillons sur des croquis pour ça sont, euh, un peu, les éléments que vous voulez en arrière-plan. Ce que vous voulez au premier plan, quelque chose dont vous devez être conscient, c'est comment les choses se chevauchent ici. Quand je travaille sur une illustration complète, ce n'est pas pour le mouvement la plupart du temps. Comme, disons, si quelque chose était derrière ce Bush, je ne vais pas y retourner. C' est comme, quel genre de choses coupées ici ou quelque chose comme, disons, disons, ce petit truc de clip, dont vous dites que je m'en fous. Personne ne verra ça parce qu'il est caché derrière un buisson. Donc, vous devez être conscient qu'au fur et à mesure que vous avancez les choses, certaines de ces choses seront exposées, et vous pouvez voir que j'ai fait ça sur cette pièce. Si vous dites ça à beaucoup d'autres à travers la section subtile où j'ai arrêté de m'embêter avec les ombres parce que je pense que j'ai décidé à mi-chemin sur celle-ci que j'allais faire quelque chose de cool avec les couches. Et évidemment, je n'ai pas fait un travail parfait pour que quelque chose à penser pendant que vous faites vos croquis et que vous allez dans la création d'illustrations finales, Une autre chose à penser est que vous pouvez voir que pendant que je penche cela, vous pouvez voir que vous triez de voir plus que vous ne voyez à l'origine sur les bords, ainsi de suite, je vais juste vous montrer ce que j'ai fait, c'est que j'ai créé une sorte de cadre de masque autour de l'extérieur, donc vous ne pouvez pas le voir ici parce que le cadre est blanc et l'arrière-plan est blanc. Mais si je vais ici, c'est une version sans que ça soit en place. Donc, parce que j'ai ces éléments qui vont jusqu'au bord, je ne veux pas de cet effet où vous pouvez voir les choses sortir du bord et les couches semblent un peu bizarres de cette façon. J' ai l'impression que ce genre de casse un peu l'effet de trois D pour moi. Il se peut que tu sois tout à fait d'accord avec ça. Ça dépend en quelque sorte de ce que tu cherches. Mais si pour moi personnellement, si je vais pour un défaut en arrière-plan est une sorte de plein saignement et certains éléments différents sont plein saignement. Je ne veux pas voir une sorte de choses sortir du bord et d'autres I Il suffit de briser l'illusion. Je pense qu'eso je vais créer une sorte de mascotte. Je vais y penser tout comme je fais le croquis aussi. , L' autre chose,c'est que je crois qu'il y en a un autre. Um, vous pouvez voir comme vous le déplacez. Vous obtenez un peu cet effet d'inclinaison cool. Et celui-ci, j'aime vraiment parce que l'épée au premier plan et à l'arrière-plan, l'accès est un peu entre ceux. Donc, le genre de fond se déplace vers la gauche sorte de sorte sorte de mouvement vers la droite, et je pense que c'est un peu cool parce que ça donne l'impression que l'épée sort de la page. L' arrière-plan est en quelque sorte d'aller dans la page un peu, donc je veux recréer cet effet dans cette pièce que je vais faire donc je veux penser à ce qui pourrait être mon arrière-plan, Quel pourrait être mon premier plan, que sorte de flotteur au-dessus. Donc je peux avoir cet effet cool où, euh, on dirait qu'il tourne autour du centre, et on dirait qu'il y a plus de profondeur. Ok, donc ce sont des choses à penser. Je vais en parler un peu plus comme je fais des croquis. Euh, mais ouais, revenons à nos croquis. Donc, la première chose dont je veux parler est juste une sorte de mise en place dans approprié vraiment rapidement. Donc, j'ai quelques paramètres personnalisés que vous pourriez être un peu perdu si vous ne les avez pas configurés. Donc je vais juste passer par ce que j'ai mis en place ici. Donc, si vous avez ouvert un document que nous avons fait plus tôt, avez-vous tapé sur ce ranch en haut à gauche ? Tu vois qu'il y a toutes ces petites options. Le seul que nous examinons en ce moment, c'est la presse. Vous pouvez activer une interface lumineuse si vous préférez que j'ai tendance à préférer sombre habituellement et puis si vous êtes gaucher, Vous pourriez trouver que c'est agréable. Vous pouvez déplacer les curseurs d'opacité et de taille de l'autre côté. Donc si tu faisais comme ça, ce que je n'aime pas parfois, j'aime les ajuster avec la main que je ne sèche pas avec ainsi de suite . Alors je vais laisser la malédiction au pinceau autour. C' est une sorte de préférence personnelle, surtout parce que j'essaie de prendre une vidéo. C' est plutôt sympa. Vous pouvez voir où mes brosses si vous regardez l'écran de l'iPad au lieu de la vidéo de mes mains. Euh, ces autres donc c'est le plus important ici car ce que je fais, c'est des contrôles gestuels , et c'est un peu plus avancé. Mais je veux juste te montrer la façon dont je n'ai pas piégé. Euh, donc ne pas trop s'inquiéter de l'un de ces compte-gouttes que j'ai mis sur le petit carré fait référence. Ce carré ici c'est leur bouton modificateur. Donc si je maintiens ça, ça affecte ce que fait le crayon. Donc si on retourne dans les contrôles gestuels, je n'ai pas mis en place. Donc mon outil de sélection de couleur compte-gouttes arrive quand je maintiens ce carré et, euh, euh, utilisé le crayon de pomme. Ou je peux toucher et maintenir sur l'écran pour mettre mon compte-gouttes, hum, forme rapide. Je n'ai pas changé, et il a senti les réglages là-bas. Et puis menu rapide, celui-ci que vous devez activer afin que ne soit pas activé par défaut dans approprié. Si vous ne l'avez pas utilisé avant. Eso Ce que j'ai, c'est que je n'ai pas mis en place pour toucher. Donc, dès que je touche l'écran, menu rapide apparaîtra avec mon doigt et non avec le crayon de pomme. Et j'ai également un plein écran pour s'allumer automatiquement pendant que j'essaie. vous plaira peut-être ou non. Je pense que je l'aime un peu, mais probablement aller et venir un peu sur vous pouvez également surmonté de quatre doigts pour entrer en plein écran. Hum, mais laissez-moi vous montrer ceux ici très vite à travers ça. Intéressant. Si j'ai personnalisé quelque chose d'autre comme ne pas Oh, j'ai des couches comme ça. On y reviendra plus tard, alors ne lisez pas ça si vite. Menu, euh, vous touchez juste l'écran et vous pouvez voir ce menu apparaît. Je ne me souviens pas exactement quelles sont les options par défaut ici, mais pour les personnaliser, vous appuyez et maintenez, puis vous pouvez choisir parmi un tas d'actions différentes que vous voulez faire ici. Eso la façon dont je l'ai c'est que j'ai de la peinture ici. Effacer sur Alfa Lock, dont je parlerai plus tard sur la taille réelle. Qui, euh, ne dis pas que j'ai zoomé sur ma toile. Si j'avais la taille réelle, cela fait de ma toile la taille qu'il serait vraiment si je devais imprimer ou quelque chose comme ça. Vous pouvez basculer entre l'endroit où il a repris et la taille réelle. Hum, et puis j'ai Phil calque et j'ajoute du texte. Je ne suis pas vraiment vendu sur avoir eu du texte dans ce menu rapide en ce moment, parce que la plupart des projets sur lesquels je travaille n'impliquent pas beaucoup de texte s. Je vais réellement changer cela en ce moment pour retourner horizontalement afin que vous puissiez voir que met la toile tous, Euh Ok, donc c'est un menu rapide pour vous et nos gestes. Donc l'autre chose que je sais que beaucoup d'entre vous vont demander à propos de quel pinceau je vais utiliser. Donc pour cela, pour mon visage d'esquisse, je vais utiliser le crayon technique, et c'est un pinceau par défaut et la procréation. Je crois que c'est sous esquisse, donc vous pouvez voir que vous avez cette nouvelle bibliothèque quand vous appuyez sur les pinceaux. Et puis sur ce côté gauche, vous avez tout un tas de différents ensembles de pinceaux et la plupart de ceux-ci que je n'ai pas entendu nos par défaut. Eso crayon technique esquisser et j'ai créé mon propre ensemble de pinceaux avec tout un tas de pinceaux que j'aime utiliser tout le temps. La façon dont vous feriez cela est de ce côté gauche. Faites défiler vers le bas et vous pouvez cliquer sur ce plus et vous pouvez créer un nouvel ensemble. Je ne veux pas vraiment ça. Et puis, mais disons juste que je voulais que vous puissiez venir ici taper sur la brosse que vous voulez déplacer dans votre ensemble à dupliquer, et puis vous appuyez et maintenez Andi avec un autre doigt sur le nouvel ensemble et vous pouvez simplement laisser tomber juste là. Donc, euh, c'est assez utile. Je pense que je vais juste supprimer Cela dit, Retournez à mes favoris sur puis Juste une autre chose est donc disons que je dessine quelque chose et puis je vais à la course. Je pense que par défaut il fait la course. Je ne me souviens pas de quelque chose de gros pinceau alors venez effacer et c'est gros et je ne veux pas qu'il soit grand parce que je veux trouver le contrôle sur ce que je suis en course. Donc, si je vais à mon pinceau et que je suis au crayon technique là-bas, puis je tape et maintiens sur mon centre de villégiature qui utilisera automatiquement n'importe quel pinceau que j'utilise pour peindre votre rasoir et les réseaux dans les deux sens. Donc, si j'avais quelque chose dans la réserve Capitaine, maintenez notre affaire. Le capitaine a dit au capitaine que ça fonctionne ça sur la brosse que çachangerait à ce que j'ai utilisé pour le rasoir et Samos si tu l'utilisais. Alors commençons à dessiner une minute. Donc, comme nous commençons à essayer, euh, euh, abord ne vous montrerait pas cette fonctionnalité de forme rapide si vous n'avez pas déjà essayé ceci. Ceci est nouveau comme croire procréer oublié de. Ainsi, vous pouvez voir une sorte de vrai rectangle. Et puis si je m'arrête et que je tiens à la fin, ça redresse juste les lignes pour moi, et je peux en quelque sorte réarranger où il est sur l'écran, et c'est super utile pour beaucoup de raisons. Mais pour ce que je vais faire ici, c'est juste en quelque sorte de créer de petits cadres pour mes miniatures . Euh, donc j'ai fait cette forme et parce que ce n'est pas un rectangle parfait, je le veux à sa forme, et je vais juste parler rectangle. Vous pouvez voir que cette redirection avant, hum, si vous voulez faire un carré parfait ou un cercle parfait ou quelque chose comme ça, je vais juste le souligner maintenant. Vous pouvez faire de votre mieux pour laisser tomber carré parfait, et ce n'est pas parfait, fait en fait OK sur celui-là, mais donc vous tenez toujours le crayon vers le bas sur l'écran. Vous pouvez voir que je bouge toujours ma forme autour si j'ajoute un doigt de plus à l'écran qui s' enclenche au carré parfait et il enclenche une rotation de 15 degrés ainsi. 15. Je ne veux pas vraiment m'arranger pour ça. Je vais plus pour une orientation portrait de notre travail. Mais tu peux faire ce que tu veux. Toujours carré. Mais, tu sais, tu as un rectangle sur cet interrupteur pour changer les choses pour moi. Donc c'est à propos du rapport d'aspect que je cherche. Je voulais être à Tommy va le rendre juste un peu plus maigre. Reste à quelque chose comme ça. Hum et puis aussi cela a travaillé avec des cercles et des triangles aussi bien. Si vous voulez créer votre travail dans un triangle ou quelque chose, vous pouvez faire un triangle, vous pouvez faire un cercle, et la même chose s'applique. Si vous avez gardé un autre doigt sur l'écran, il basculera entre la contrainte à un triangle circulaire parfait et, euh, sorte de gauche. Vous pouvez le voir très bien ici, mais vous pouvez vous intéresser, et les lèvres sont ovales. Et ce n'était pas à cela aussi. Un doigt, eh bien, sorte de passer à une version plus parfaite de celui-ci. Ok, donc je veux commencer par mon rectangle, et je vais probablement faire quelques croquis ici, donc je vais juste utiliser mon cercle d'outils de sélection autour de tout le truc. Je n'avais probablement pas besoin de le faire parce que c'est la seule chose sur la couche en ce moment. Mais la force de l'habitude, je suppose. Et ainsi et vous pouvez glisser vers le bas avec trois doigts sur l'écran et qui vous donnera votre coupe copier-coller menu. Vous pouvez également ouvrir des calques simplement glisser de droite à gauche sur ce calque et dupliquer. Et donc je vais le faire et puis dupliquer ce rectangle que j'ai dessiné ici et puis dupliquer à nouveau. J' ai donc trois rectangles différents que je peux conduire, puis les fusionner en un seul calque parce que je ne veux pas vraiment un tas de joueurs d'un croquis de vignettes différentes. Je vais juste les pincer ensemble dans mon menu de calques, et vous pouvez les voir ensemble juste un an. J' ai tous ces croquis que je peux pour ces petits modèles rectangulaires à partir descroquis. J' ai tous ces croquis que je peux pour ces petits modèles rectangulaires à partir des Hum, je veux parler de quelques choses que je cherche dans ces croquis, et ensuite je vais passer au laps de temps, et je vais juste passer un peu de temps. Vous pouvez voir le processus ici, mais donc, mais donc, comme je l'ai mentionné quand je vous montrais ces œuvres. Je veux travailler dans un cadre ici. Je pense juste à cette œuvre d'art avec le cadre dès le début. Donc, cela va être une sorte de ma chose de cerveau masque blanc que je vais avoir quelques trucs derrière elle, mais il ne sera révélé genre de quand vous inclinez l'appareil ou déplacez votre souris ou votre doigt sur l'écran. l' Etl'autre chose à laquelle je veux penser est, euh, euh, peu ce qu'il y a en arrière-plan. Peut-être que j'ai des nuages ou quelque chose comme ça. On cherche des nuages, mais, euh, et peut-être des étoiles en arrière-plan et ça pourrait bouger juste un peu par rapport au ciel, mais peut-être que j'ai, genre mais peut-être que j'ai, , une figure au premier plan, juste une sorte de flottant ici. Dit le meilleur que j'ai jamais conduit parce que je ne passe pas juste un peu de temps et dessine ces minutes, mais je veux juste parler de certaines des choses que je cherche dans ces croquis. Hum, donc je veux ce chiffre au premier plan. Si c'était l'idée que je vais faire, je veux flotter, donc on dirait qu'il est en face de ce masque et puis peut-être que j'aurai une couche d'ombre qui va sur l'arrière-plan. Et puis je veux que ces nuages ressemblent à eux. Le masque et le fond du ciel semblent être derrière le masque. Et puis peut-être que si je veux juste un peu plus de profondeur, je pourrais ajouter quelques éléments flottants d'étoile devant le masque ici afin qu'ils soient peut-être derrière la figure ou devant la figure en termes de trois D. Mais ils le feront. Ils vont en quelque sorte briser le cadre juste un peu, et je pense que cela pourrait paraître assez cool dans ce contexte. Donc vous pouvez voir que j'utilise mon menu rapide. J' ai juste que tu n'as pas Teoh taper et puis taper. Tu peux juste arriver. Slide n'aimait pas ce que vous voulez. Et cela signifie que parfois je sélectionne quelque chose en cas d'accident, comme vous le remarquerez probablement pendant que je travaille. Euh, je suis un peu d'accord avec ça, parce que dans l'ensemble, ça m'accélère. Quelque chose que vous voulez savoir quand vous définissez après un menu rapide est um ne pas inclure quelque chose ici que vous allez faire en cas d'accident que vous ne remarquerez pas que vous l'avez fait, si cela a du sens. Donc, par exemple, j'avais fusionné des calques ici comme si je créais un nouveau calque, dessinais quelque chose que je le fusionnerais, et je ne me souviens même pas exactement pourquoi je faisais cela. Mais les calques fusionnés sont quelque chose qui, à moins que vous n'ayez pas à regarder en haut de l' écran avec peu de chose qui dit fusionné, vous ne remarquerez peut-être pas que cela s'est produit jusqu'à un peu plus tard. Donc vous ne voulez pas d'actions destructrices que vous ne remarquerez pas. Donc, certains d'entre eux sont destructeurs, techniquement, comme la couche de remplissage. Mais je vais remarquer que j'ai fait ça. Eso C'est juste quelque chose. Pensez à si vous pensez à la configuration de votre menu rapide. Um, ok, donc je vais juste laisser tomber un peu, euh, venir avec quelques autres idées, probablement trouver maintenant un peu, et j'espère que d'ici la fin de cette section, nous allons avoir au moins une esquisse que vous pouvez passer pour créer une illustration complète qui fonctionnera bien avec un effet de parallaxe. Alors commençons. - Je pense qu'on est prêts à faire ces croquis. Euh, donc j'ai trois croquis. Je suis plutôt content avec eux. Ensuite, vous décidez lequel je veux réellement utiliser pour ce projet parallax. Je pourrais revenir à ces autres croquis pour quelque chose d'autre ou un autre projet comme celui-ci plus tard. Mais pour l'instant, nous avons juste besoin d'en choisir un. Et, euh, je pense que je suis passé d'un peu plus simple que je ne le voudrais à un peu plus compliqué que je ne le voudrais. Donc je me penche en quelque sorte vers ce milieu pour ce projet particulier. Euh, donc à l'étape suivante, c'est que nous allons le déménager dans un campus séparé et ensuite, euh, finir en couleur et tout comme ça, et ce sera la prochaine leçon. Mais avant de passer à leur tour, j'aimerais commencer la prochaine leçon déjà avec notre croquis miniature en place sur ce campus. Donc je vais copier le croquis ici, donc j'utilise mon outil de sélection, euh, euh, et juste en soulignant, euh, euh, ce croquis, assurez-vous que je suis sur le bon calque pour copier ça, et il n'y a qu'une seule couche, donc ça devrait être génial. Et puis je vais glisser vers le bas avec trois doigts sur l'écran et juste appuyer sur Copier là et qui copie mon illustration ici. Et puis je retourne à la galerie. Je vais cliquer sur Plus et je pense que c'était assez proche d'un rapport d'aspect 43. Eso Parce que je veux utiliser cette illustration comme je vais vouloir l' illustration la plus haute résolution ainsi qu'une résolution inférieure pour le code. Je vais commencer par une résolution plus élevée. Je vais probablement faire 4000 par 3000. Je l'ai ici, mais je vais juste vous montrer comment vous voulez créer cela, parce que ce n'est pas l'une des options par défaut. Donc, en bas de ce menu plus, j'ai beaucoup d'extras ici. Mais si vous créez une taille personnalisée ici, vous pouvez appuyer sur 4000. En fait, je voulais 3000 par 4000. Ça fait déjà 4000. Vous pouvez choisir le DP I. Cela n'a pas vraiment d'importance à moins que vous utilisiez des pouces ou des millimètres ou quelque chose comme ça . Euh, du moins pas pour nos besoins ici. Si vous êtes sur un iPad avec p trois. J' aime utiliser la couleur Petri parce que vous pouvez obtenir des rouges et des verts vraiment gentils. Et puis je vais juste appeler ce projet relax et c'est fait, et ça va créer une nouvelle toile pour moi. Et je vais encore frapper avec trois doigts et frapper la pâte, et ça met mon oeuvre ici. Vous pouvez voir qu'il est beaucoup plus petit que celui-ci. astuce cool ici qui va probablement vous montrer à nouveau plus tard, comme nous travaillons sur l'illustration réelle, est si je tape et maintiens sur cette icône de transformation ici, vous ne pouvez pas voir parce que je suis en train de taper et de tenir dessus. Euh, cette petite icône de curseur de souris est pour une transformation, donc si j'ai juste essayé de faire un panoramique ou un zoom sur la toile qui déplace cela sur sélectionné. Mais si je touche et maintiens sur cette flèche, alors je peux déplacer la toile sans se débarrasser de ma sélection sur aller frapper ce bouton d'ajustement vers le bas en bas, et cela remplit automatiquement juste la toile avec mon illustration sur de, selon que vous avez activé cette option Magnetics, qui se comporte différemment. donc si vous avez éteint, alors il fera Ah, visite appelé ajustement de l'aspect où garde votre rapport d'aspect. Mais assurez-vous que toutes les illustrations s'intègrent dans la toile où si vous avez Magnetics activé et qu'il s'adapte à la toile, il remplit l'aspect, ce qui conserve votre rapport d'aspect mais remplit toute la toile. Je veux probablement quelque chose entre eux juste pour m'assurer que j'ai vraiment , vous savez, je vais aller en forme parce que je veux m'assurer que ma frontière autour de ça est assez grande. J' éteins Magnetics pour s'adapter à la toile, puis je vais appuyer sur cette flèche et ensuite nous sommes prêts à aller dans la leçon suivante. Alors, on se voit là-bas. 3. Dessiner 2 Affiner votre ébauche: Ok, donc vraiment, la seule chose que nous essayons d'accomplir dans cette partie du tutoriel est d'affiner ce croquis. Donc je vais passer quelques minutes à faire ça, et je vais probablement le mettre à l'heure. Quand je travaille, il n'y a pas vraiment beaucoup de secret, à part de mettre beaucoup de temps et de passer à travers et de s'assurer que tout est propre et prêt à partir. Mais l'objectif de cette leçon est qu'à la fin, vous aurez fini l'illustration colorée avec des calques prêts à être exportés dans un projet de parallaxe. Et je vais entrer un peu plus en détail quand on arrivera à ce point. Je ne veux pas aller trop en profondeur sur la façon dont je dessine dans la procréation parce que j'ai une autre classe à ce sujet, et ce n'est pas vraiment le point total de cette classe. Mais pour l'instant, je vais juste travailler sur ce croquis, et je vais souligner quelques choses qu'ils arrivent à colorier. Ok, je pense qu'on est prêts à faire ce sketch. Vous avez peut-être remarqué que j'ai changé les gars ici comme, cinq fois ici, et je ne suis pas satisfait à 100% de ça. Au fur et à mesure que je passe par les couleurs, je vais changer quelques choses. Mais dans l'ensemble, je pense avoir une bonne idée que je peux commencer à bloquer dans certaines couleurs, alors passons à cela. 4. Dessiner 3 blocage en couleurs: Ok, je vais commencer à ajouter de la couleur à ça. La plupart de cela va être un laps de temps, mais je veux vous montrer la technique que j'utilise et comment je la brise. Eso tout d'abord, je vais commencer par simplement bloquer les couleurs et le genre de mise en place de certaines des couches principales qui allaient travailler ici. Et puis je vais probablement faire un laps de temps après que je vous ai montré quelques choses et puis reviendrai quand je commencerai à ajouter des textures et des fourmis Grady et à affiner les couleurs, et nous en parlerons un peu plus. Mais commençons par le blocage, les couleurs et la façon dont je l'ai mis en place. J' ai donc mon croquis de vignettes ici. Pourtant, je peux probablement croire que d'habitude je supprime que je vais le garder pour l'instant, juste au cas où. Mais je vais taper dessus dans mon menu de calques et juste ramener l'opacité de mon calque d' esquisse et je vais réellement renommer ceci en tapant dessus une fois, puis en appuyant sur renommer juste pour esquisser. Il est donc facile de trouver quand j'ai un million de calques ici, puis je vais ajouter un autre calque et simplement faire glisser et déposer ce calque en dessous de ce calque d'esquisse . Et donc maintenant si je dessine quelque chose, euh, que le calque d'esquisse sera toujours au-dessus. Euh, et donc quelques autres choses que je voulais aborder très vite avant d'aller trop loin, c'est que tu vois, j'ai dessiné notre rectangle, mais presque rectangle autour de ça. C' est le masque dont je parlais dans la phase des vignettes. Donc je vais juste te montrer comment je vais mettre ça en place. Euh, en fait, mettons en place une couleur d'arrière-plan d'abord, et je vais probablement changer ça, mais juste quelque chose pour commencer. Disons que nous avons un fond bleu et ensuite un peu sur ma couche ici. Je vais juste l'appeler masque et puis aller orteil ouvrir mon outil de sélection, qui est cette petite chose en forme de s en haut à gauche et puis juste une sorte de trace sur cela. Um, quand ça prend de l'entraînement, si tu n'es pas utilisé, Teoh, euh, ça peut devenir assez fastidieux, ce qui est une grande partie de la raison pour laquelle je vais juste faire un laps de temps parce que cela prendra un plus longtemps que cela ressemblera à ce qu'il vous faut. Alors ne vous découragez pas si cela vous prend pour toujours, et j'aime construire mes sélections et mes pièces, il n'y a pas vraiment de bonne raison particulière à cela, part ce qui est juste comme je le fais. Par défaut, cet outil de sélection s'ajoutera à la sélection que vous avez déjà, sorte que vous pouvez voir qu'il s'agit d'une zone qui n'est pas sélectionnée. Il s'agit de la zone sélectionnée. Je veux dire, si j'ajoute donc si je continue d'essayer une sélection et que je reviens, on ne l'a pas vu. Juste ajouté Donc j'ai plus de zone sélectionnée, donc vous pouvez en quelque sorte le construire morceau par morceau un peu. Vous pouvez également taper pour ajouter des lignes droites sur afin que vous puissiez désactiver avec l'outil de sélection entre tapoter onglet pour beaucoup de lignes droites, ou je suis vous pouvez faire tack ligne droite puis dessiner une ligne, et cela pourrait être sinueux si vous voulez. Tu ne veux pas que ça soit, mais une sorte de gentille lente, parce que pour quelque chose comme ça. Je veux peut-être une ligne incurvée pour ce coin. R Et puis je voudrais peut-être passer à une ligne droite ici, mais puis continuer une courbe afin que je puisse créer une ligne droite de l'endroit où je me suis arrêté. Partout où je recommence, puis le prochain avion sans soulever mon stylo ou mon crayon de pomme, je suppose que peut être courbé de sorte que vous pouvez vraiment mélanger et assortir d'une manière vraiment naturelle, ce qui est agréable. Et puis je vais aller dans certains blancs, qui ont déjà dans ma palette ici. Donc je vais utiliser du blanc pour ce masque et puis parce que j'ai Phil Layer mis en place dans mon menu rapide, rappelez-vous, nous en avons parlé. Nous pouvons simplement aller comme ça et remplir la zone que j'ai sélectionnée. Si vous n'avez pas configuré votre menu rapide et si j'ai tapé, je l'ai configuré. Donc, mon rapide quand vous ouvrez sur le toucher et puis vous pouvez appuyer sur quelque chose et choisir ce que vous vouliez faire. J' ai donc ce set à remplir plus tard. Si vous ne voulez pas votre menu rapide, vous pouvez également taper sur vos calques sur le calque que vous voulez remplir et haut Phil Layer, puis vous obtenez ce joli masque. Ok, donc maintenant vous pouvez voir si je devais déplacer ce masque autour de l'arrière-plan est toujours bleu partout et où cela va être important quand nous arrivons à la partie de code réelle où nous faisons les contrôles de mouvement et déplacer les choses autour parce que, comme je l'ai déjà mentionné, vous ne voulez pas voir les bords de vos différentes couches se chevauchent. Ça a l'air juste un peu bizarre. Et alors on va avoir beaucoup de choses. Certains de ces trucs de fond vont être derrière um, ma couche de masque, et certains vont venir en avant. Et je pense en ce moment que ces gens seront probablement devant ça aussi. Euh, donc l'autre chose que je veux vous montrer, c'est juste que disons que les gens sont au-dessus de ça pour instant, on va utiliser l'outil de sélection. Je vais juste entrer et commencer comme nous l'avons fait avec le masque, en sélectionnant mes formes rapidement. Et je vais juste choisir Sculler sur Puis encore, je tourne mon menu rapide pour remplir, euh et dépenser. Je veux dire, juste faire la forme très vite juste pour te montrer comment on veut régler ça. Donc je le sens avec un tueur parce que ces deux-là, comme je l'ai mentionné, vont faire partie de la même image dans l'exportation finale. Je vais juste commencer à regrouper les choses en fonction de la façon dont je veux qu'elles apparaissent quand j'ai fini. Donc n'importe quoi de ces gens parce qu'ils vont être sur la même couche, surtout parce qu'ils sont touchants. Ce serait assez difficile de faire différentes couches et de garder ça intact. Um, je vais simplement créer un groupe en sélectionnant ces deux calques, et vous sélectionnez plusieurs calques en appuyant sur un, puis en balayant vers la droite sur un autre pour avoir plusieurs, puis vous appuyez sur groupe, qui Je l'ai juste fait. Et puis vous pouvez voir qu'ils sont apparus dans ce nouveau groupe ici. Mais je peux taper pour renommer que je vais juste appeler ça des gens ou des humains, parce que c'est plus amusant. Et puis nous avons notre masque, quels que soient les humains, et puis je vais créer un nouveau calque et déplacer ceci ci-dessous, et ensuite ça va être Faisons juste cette forme bizarre trouble pour l'instant, et vous ne voulez pas juste couper cela éteint parce que ce masque va bouger. Donc mon instinct normal avec quelque chose comme ça si ce n'était pas une illustration émouvante, c' est de dire que je n'ai pas à dessiner quelque chose derrière ici parce que personne d'autre que moi ne le verra jamais. Mais comme le calque va se déplacer au fur et à mesure que vous déplacez vos calques, vous devez réfléchir à ce qui y sera vu. Vous pourriez même vouloir définir ce masque à 50% d'opacité ou quelque chose de sorte que vous puissiez voir ce qui se passe derrière là-bas et juste remarquer si vous avez décidé de quitter les choses inconsciemment ou quelque chose, et donc avoir à décider d'une couleur pour cette presque certainement pas la couleur que je vais vouloir , mais sert à montrer ce que je fais pour maintenant et puis. Une autre chose que je voulais souligner avant de passer en mode time lapse est juste cela . Je vais utiliser beaucoup de masques de coupure ici, probablement, hum, probablement, hum, hum, donc si vous n'êtes pas familier avec ça, laisse-moi juste te montrer. Euh, donc j'ai créé une couche au-dessus de cette jambe, non ? Si je tape dessus une fois et puis j'ai tapé sur le masque de coupe, alors c'est vous pouvez voir qu'il y a cette petite flèche pointant vers le bas, et c'est un peu en retrait. Cela signifie que tout ce que je dessine sur ce calque de masque d'écrêtage apparaîtra seulement dans la forme qu'il masque ou qu'il est masqué par ma supposition se produit réellement. Donc si je vais faire ce genre de genou ici et que ça n'a pas besoin d'être une forme parfaite, euh, et puis j'éteins mon croquis juste pour le rendre plus facile à voir et puis sélectionner une couleur ici. Donc si je vais faire ce genre de genou ici et que ça n'a pas besoin d'être une forme parfaite, euh, euh, Pouvez-vous remplir ça et vous pouvez le voir sur Lee. Vous ne pouvez le voir que là où il se chevauche en moi. Donc si je devais enlever ça du masque de coupe, vous pouvez voir toute la forme. Si je le remets sur le masque d'écrêtage, vous ne pouvez voir que le chevauchement. Donc, je vais utiliser un peu de ça. Et je vais probablement juste regarder ce laps de temps maintenant et passer par et juste tout ce que je fais en ce moment est de bloquer les couleurs. Je pourrais être un peu emporté par quelques éclats et des choses comme ça, mais surtout j'essaie juste d'obtenir les formes et l'idée générale des couleurs. Ok, je pense que mes couleurs sont surtout bloquées ici. Je vais donc commencer à peaufiner les couleurs, un peu plus de sorties, des ingrédients sur les choses, Alex et des textures plus que moi. Laisse-moi parler des pinceaux juste un peu. Les buissons que j'utilise le plus sont probablement ces crayons, et ceux-ci peuvent être trouvés dans les croquis. J'utilise beaucoup le crayon technique. Les buissons que j'utilise le plus sont probablement ces crayons, et ceux-ci peuvent être trouvés dans les croquis. C' est ce qu'on a accusé sur celui-là. Et de temps en temps que HB et six crayons B. Et puis en artistique, je pense qu'il y a le pinceau acrylique blanc que j'utilise un peu. Et puis en artistique, Je l'ai peut-être déplacé d'ici, juste sur le type utilisé pour en annuler un aussi. Euh, quash me donne une texture beaucoup plus lisse, mais avec juste un peu d'intérêt pour ça et quel acrylique peut être beaucoup plus, euh, genre de rayure. Laisse-moi te montrer un ou deux. Et puis je devrais aussi mentionner que j'ai, euh, donc mes brosses préférées tous dans ce rocher, dont je pense avoir parlé avant. Mais j'ai également dupliqué tous mes pinceaux dans un dossier appelé Multiply. C' est donc les mêmes pinceaux, mais chacun d'eux a son mode de fusion défini pour se multiplier. Et si tu ne sais pas ce que ça fait, laisse-moi te montrer très vite. Donc disons que je veux une couleur. ligue de ce type, ici, et moi, on utilisait quoi ? Acrylique sur ce comme couleur violette très clair sur. Je ne suis pas sûr si c'est vraiment bon encore, mais j'ai donc cette couche définie sur Alfa Lock. Vous pouvez voir qu'il y a ce petit damier derrière, et cela signifie que quand je colore sur cette jambe, rien ne s'affichera à l'extérieur de la jambe seulement dans les zones que j'ai déjà dessiné quelque chose. Si j'éteins notre troupeau, vous verrez qu'il apparaît partout. Euh, donc tu remarqueras que le violet clair n'a pas l'air bien. Je veux dire, c'est très léger, mais je veux faire sombre dans les choses tout en gardant la saturation. Donc, si je passe à cette version multiplier de la même brosse multiplier le mode de fusion fondamentalement obscurcit les choses tout en les gardant saturés. Donc vous pouvez voir que je peux passer en revue ça et juste assombrir tout. C' est aussi un transparent. Donc, même si j'ai ces deux choses l'ombre, je suppose que c'est une couche différente. Mais disons que c'étaient la même couche. Je serais toujours capable de voir cette ombre tellement obscurcit tout uniformément, qui est vraiment agréable au lieu de simplement la couvrir d'une couleur unie. Je ne suis pas sûr que je voulais vraiment sombre dans ce genre de choses. Et peut-être que je voulais être un peu plus rouge. Donc, tant qu'on parle de remplir avec la brosse pour que j'utilise cette brosse acrylique bateau , vous pouvez voir Ok. De telles couches en cas d'accident ? Non, juste éteint beaucoup. Euh, donc si j'y vais très légèrement, je peux obtenir un éclat assez lisse avec ça. Ou si et c'est ce que j'aime faire avec cette brosse est vraiment difficile à un endroit, qui à être soulevé et puis un peu éclaircir après ça et juste un peu poussé dur de temps en temps, et puis vous obtenez ces gentils, petites textures intéressantes. Donc j'ai un peu sombre à la fin de ce genre d'intéressant. Je ne sais pas à quel point cela apparaîtra sur la vidéo, mais vous avez une sorte de texture juste plus intéressante que vous obtenez. Je vais aussi affiner quelques formes ici en disant : J'adore ça. Cette cheville a une petite bosse bizarre ici juste un peu. Donc je vais juste faire ça avec mon outil de sélection, faire sélectionner cette zone, et ensuite je peux frotter trois doigts en Grèce que tu as entendu dire clair, euh, genre de scène sur cette couche. Une autre chose que je voulais vous montrer est la sélection de couches. Donc, la façon dont j'ai cette configuration, je peux maintenir ce bouton modificateur, et ensuite je pourrais juste toucher avec un doigt. Et lorsque je glisse autour de l'écran, je remarque que cela me dira quelle couche je touche actuellement. Ou s'il y a plusieurs calques comme parce que l'un d'eux est en quelque sorte transparent, alors cela me donnera des options et donc je peux choisir parmi ces deux couches. Donc je veux sélectionner cette jambe et ensuite juste clarifier ce petit morceau de moi que je pense est un peu trop. Hum, et encore une fois, si vous voulez configurer des joueurs, sélectionnez de cette façon. Vous appuyez sur la clé que les préférences, les contrôles de geste, Sélection de couche. Et j'ai un tel modificateur plus touche sur rien d'autre. Et j'ai trouvé que ça marche plutôt bien pour moi. Vous pouvez jouer avec différentes options et voir ce que vous aimez. Euh, donc vois s'il y a autre chose dont je voulais parler ici. L' autre chose que je voulais mentionner très rapidement, et beaucoup de gens m'ont demandé à ce sujet dans ma compétence précédente. Classe partagée ISS, cette idée de masque de saturation. Donc ce que j'aime faire juste pour m'assurer que j'ai un bon contraste, parce que parfois c'est un peu difficile à dire. Donc, par exemple, ici, où le bras de cette fille est en arrière-plan, on dirait qu'il vibre un peu pour moi. Et d'habitude cela signifie que les valeurs sont un peu trop proches, n'aiment pas que c'est vraiment horrible, mais c'est un peu un domaine où c'est comme si je ne suis pas sûr. Je veux juste regarder ça rapidement. Donc je vais remplir cette couche entière au-dessus de tout avec du noir si vous pourriez utiliser du blanc , ça n'a pas d'importance, et puis je vais taper la fin. C' est donc ma capacité et mes modes de fusion pour ce calque, puis je vais en haut sur la couleur à l'extrême droite, puis appuyez sur saturation. Et maintenant j'ai cette couche qui, euh, ça prend juste toute la couleur de tout ce qui garde mes valeurs. Et vous pouvez voir que j'ai des problèmes avec ce bras ici parce que main se fond juste en quelque sorte dans l'arrière-plan et donc tout va et répare que je vais probablement faire beaucoup de ce droit cette seconde, mais, C' est juste vraiment sympa d'avoir un moyen rapide de tirer ça sur assez. Je ne vois pas beaucoup d'autres problèmes ici, donc c'est plutôt bon. Je ne vois pas beaucoup d'autres problèmes ici, Généralement, ils ont plus de problèmes que ça. Donc score, euh, je pense qu'à part ça, je vais juste recommencer le temps écoulé. et juste passer à travers et, euh, essayer de raffiner mes couleurs à un certain crédit pour des choses comme je l'ai fait ici, mais peut-être de la lumière dans quelques zones sombres dans quelques zones. J' ai juste ça fait beaucoup plus d'intérêt visuel. Si vous avez des changements de couleur subtils dans les choses et que je vais partir de là, je pense que nous avons assez fait pour l'instant. Je veux juste ajouter ces ombres portées dont je parlais tout à l'heure, et je vais vous montrer comment je ferais ça. Donc, je vais ouvrir mes couches et parce que je suis assez proche de hors des couches pour cette toile. Tu vois, j'en ai 28. Je veux dire, me reste 12 couches, mais je veux dupliquer toute cette section avec ce groupe humain, et il y a plus de 12 couches là-dedans. Donc je vais faire est que je vais taper aplatir, nous allons taper une fois, puis taper, aplatir, et puis je vais taper hors des couches, glisser vers le bas avec trois doigts, copier et puis je suis va annuler. Et donc maintenant, ce n'est plus platine, et puis je peux aller à la couche en dessous fait glisser vers le bas avec trois doigts et frapper basé. Et puis j'ai une copie de ce groupe, et je vais activer et désactiver un verrou pour ce calque en balayant le menu rapide. Et puis je vais Teoh, remplissez-le avec cette couleur violet clair que j'ai choisie. Et puis je vais changer ça pour multiplier le mode de fusion afin que vous puissiez voir que j'ai une sorte d' ombre d'eux maintenant. Et je veux que ce soit juste un peu flou. Donc, quand l'image en face de lui se déplace, il a l'impression d'être jeté de devant eso. Avant de faire ça, je dois éteindre Alfa Lock. Et si tu n'as pas d'homme rapide, tu t'es arrangé. Vous pouvez glisser vers la droite avec deux doigts et vous remarquerez que le motif en damier a disparu. Ce qui signifie que Alfa Lock est éteint que je vais taper sur ma baguette magique ici, qui est mon menu de réglages, puis taper douillet, hum, flou et puis balancer sur l'écran vers la droite n'importe où, et je conclus que autant que je veux probablement quelque chose comme ça serait assez bon à environ 19.7. Alors faites-le comme vous voulez. Si j'ai réactivé mon groupe de calques humains et puis aller à mon outil de déplacement déplacé et vous pouvez voir qu'il y a une ombre derrière eux et alors je vais faire la même chose avec mon masque. Effacer parce que je voudrais que le masque jette une ombre sur cette toile de fond aussi. Donc, je vais juste dupliquer ça parce que c'est juste une couche. J' ai beaucoup de couches avec lesquelles travailler que je peux simplement le dupliquer. Je vais choisir celui qui soit bas, et ensuite je vais le faire. Même Ghazi et Blur. Euh, probablement le même montant, en fait. Peut-être juste un peu moins, parce que je pense que les humains seront devant, ce qui veut dire que ça serait peut-être un peu moins floue. Je vais faire 15 % flou sur ça, et puis je vais juste glisser vers le bas pour activer Al Flock. C' est juste plus pour remplir leur sans pression de couleur violette sur mes modes de fusion. Changez ceci pour se multiplier, et maintenant si je déplace ce masque, vous pouvez voir qu'il y a une ombre du masqué derrière lui, et je crois que c'est tout. Nous sommes en train de créer l'œuvre d'art. Donc, dans la leçon suivante, je vais voir comment je vais regrouper les couches à exporter puis nous allons commencer sur le manteau. 5. Coder 1: Très bien, donc dans cette écoute, nous allons juste voir comment obtenir vos couches exportées combinées de la manière que nous voulons qu'elles soient utilisées dans le code et ensuite dans votre éditeur de code pour que nous puissions commencer , euh, en rassemblant votre projet de code eso pour commencer, je vais juste glisser de droite à gauche sur cette vignette du projet sur lequel nous avons travaillé et il dupliquer et la raison pour laquelle nous voulons le faire est de raisons En fait, . l'une est que je ne veux pas me débarrasser de toutes mes couches ici, mais je veux combiner mes couches. Et l'autre raison est que si vous vous souvenez, j'ai fait cela plus grand que nécessaire pour ce projet de code était 3000 par 4000 pixels, qui va juste être assez lourd si vous faites quelque chose dans un navigateur Web. Surtout parce que je pense que je vais finir avec pas mal de couches sur ce projet. Donc, nous allons vouloir le rendre plus petit, et nous allons vouloir combiner un tas de couches puis les exporter, et si je le faisais dans ce projet, alors je perdrais un tas de détails que je ne veux pas perdre. Donc, je crée juste un doublon ouvrant cela, et puis nous allons juste décider quelles couches nous voulons combiner et comment nous voulons que notre projet soit configuré pour le code. Tout d'abord, je vais juste supprimer mes croquis et mon masque de saturation. Je n'en ai pas besoin pour ça. Je veux juste décider quelles couches je veux aplatir. Donc je sais déjà que ces choses flottantes au premier plan, Um va être juste une couche. Mes humains, ils ne seront qu'une couche. Donc je tape juste une fois que de frapper aplatir mes ombres. Je pense que je veux que mes deux ombres soient sur le même calque parce qu'elles vont être dans la même ligne que la toile de fond. Donc je vais juste les pincer ensemble pour combiner euh et puis mon masque, je veux juste être tenu est les deux ensembles d'éléments flottants. Je veux rester séparé de ces nuages. Je veux rester séparé, et vous pouvez le faire de la façon la plus sensée pour vous. faut un peu d'essai et d'erreur pour voir ce qui est logique d'être sur différentes couches quand il se déplace ensemble, alors je veux juste combiner dans Donc j'ai un fond solide donc je n'utiliserais pas cette couleur d' arrière-plan, Euh, pour l'instant, juste parce que tu devrais l'exporter un peu différemment. Donc, je copierais juste quelle que soit votre couleur d'arrière-plan sur un calque au-dessus de l'arrière-plan , puis je le combinerais. Si vous avez d'autres détails d'arrière-plan , j'ai 12345678 couches différentes que je veux exporter chacune en PNG Um, donc je vais taper sur la clé ici, et en fait, avant de les exporter, J' ai besoin de redimensionner ma toile. Je vais dire la taille de la blessure de la culture de toile. Et puis je pense que parce que c'est si grand, assurez-vous que vous avez rééchantillon activé, euh, donc cela signifie que vous redimensionnez le document au lieu de le recadrer. L' échantillon Re est activé, et je vais taper ici, et je pense que je vais essayer 900 par 1200 pixels pour cela, euh, euh, et puis vous avez juste frappé fait, et il va redimensionner. Donc vous pouvez dire que j'ai perdu un petit détail, qui est ce que nous voulions, qui signifie aussi qu'ils seront beaucoup plus petits fichiers. Et puis je vais taper ma clé à nouveau ici et frapper le partage. Et c'est nouveau, Inapproprié 4.3. Donc, si vous n'avez pas mis à jour pendant environ trois, c'est, euh, ça ne serait pas là pour vous, mais dans le menu de partage, il y a cette zone de couches de partage, et je vais juste taper sur les fichiers PNG. Alors, qu'est-ce qu'il exporte ? Chaque couche a son propre fichier PNG, et puis je vais juste dire, sauvegardez huit images et cela va les enregistrer directement à vous dans mon rouleau de caméra. Donc si je n'ouvre pas ça, vous pouvez vous voir maintenant. J' ai 12345678 couches différentes toutes sauvegardées en PNG séparées pour faire une morale, ce qui est génial. Euh, donc cette prochaine partie, vous pouvez utiliser, euh, euh, quel que soit l'éditeur de code que vous voulez vraiment ? Celui sur lequel je vais utiliser sa coda. J' aime bien celle-là. Beaucoup pour beaucoup de raisons. Je pense que c'est vraiment bien fait. Je pense que cela coûte 10$ ou quelque chose comme ça sur le magasin APP sur. Il peut être différent maintenant, mais si vous ne voulez pas l'utiliser, il y a aussi cette application appelée JavaScript partout qui est gratuit. C' est assez OK, et je vais vous montrer comment importer des images là-dedans aussi. Mais je vais utiliser codé principalement. Alors commençons par ça. C' est la première fois que vous lancez Coda ? Euh, il n'y aurait rien ici pour toi. Je suis une sorte de nerd et j'ai un tas de choses différentes que je fais ici. Donc, ce que vous allez vouloir faire est juste de frapper ce plus dans le coin supérieur droit, nouveau site, puis juste lui donner un nom. Donc je vais appeler cette parallaxe. Tu peux l'appeler comme tu veux. Si vous êtes un nerd comme moi et que vous avez d'autres choses sur le site Web que vous avez accès à l'administrateur , vous pouvez les configurer ici, mais je ne vais pas passer par ça maintenant si je l'avais fait alors j'ai juste ce vide , donc je vais appuyer sur Parallax. Et encore une fois ce serait vide pour vous si vous n'avez jamais ouvert ça avant. Alors tu vas frapper ? De plus, et puis j'aime juste garder n'importe quel projet que je fais en entendant dans son propre dossier. Donc, je vais appuyer sur un nouveau dossier, puis je vais appeler ce Parallax et puis je vais frapper , créer, puis taper sur ce dossier parallax qui sera probablement en haut pour vous et puis je vais parler. De plus, cela vous invitera probablement à ce stade, Teoh, lui permettre d'accéder à vos photos, alors assurez-vous de cliquer sur OK. Je l'ai déjà fait. Eso, tu vois que j'ai mes couches. Donc, c'est juste tout dans ma photothèque ici, vous pouvez faire défiler, ce qui est pratique. Euh, donc je vais juste taper et tu veux passer de l'arrière à l'avant. Sur vos couches, c'est ce que je fais de toute façon. Donc, je choisis mon dos plus tard mon fond d'abord et en tapant juste sur ce que vous pouvez voir qu'il est renommé pour moi, ce qui est un peu ennuyeux, donc je vais juste le renommer ici. Couche 11 points PNG um et puis je vais aller importer. Je vais juste le faire pour chacune des couches que j'importe, et vous avez besoin de Teoh les importer ou les renommer au fur et à mesure que vous allez si vous le faites de cette façon, sinon il demandera. Il va essayer de les renommer la même chose parce que c'est basé sur l'heure de la journée où ils ont été ajoutés ou quelque chose, et il vous demandera si vous voulez le remplacer. Donc, si cela se produit, assurez-vous de les nommer un à la fois avant d'importer le suivant. Et c'est juste un peu fastidieux. Mais, euh, bienvenue au codage. En outre, la raison pour laquelle je le donne aux nombres est que si je voulais ajouter de l'animation à ceux-ci, c'est que je pourrais nommer quelque chose comme le soulignement de la couche un à,par exemple, par exemple, soulignement de la couche un trois, et cela signifie comme le cadre un. Donc, c'est fondamentalement comme une couche à cinq cadres. Je ne vais pas aller dans l'animation dans ce tutoriel parce que c'est un peu plus avancé , mais peut-être dans un leader et le dernier. Ok, donc j'ai 12345678 Parfait. Ok, donc toutes mes couches sont ici prêtes à partir. Nous reviendrons dans la leçon suivante et continuerons d'ajouter vos autres fichiers de code là-dedans. Mais en ce moment, je veux juste passer par ce script de travail partout application vraiment rapidement. Si vous choisissez d'utiliser ceci, euh, eso vous pouvez voir qu'il a juste ce projet mondial Bonjour déjà là pour vous. Tu peux juste ignorer ça. Je vais frapper ce plus en haut à gauche. Et puis je vais juste appeler mon projet Parallax et appuyer sur Enregistrer, puis taper dessus et plafonner ici. Il y a du code pour toi. Quand nous arrivons au code, vous voulez supprimer cela et juste le remplacer par ce dont nous parlons. Mais pour l'instant, tout ce que vous avez à faire, c'est qu'il y a cette petite icône d'image en bas à gauche. Je vais taper sur ce coup plus et appuyez sur importation de la photothèque à nouveau. Cela vous demandera probablement l'accès à vos photos. Alors je dis, d' accord. Et puis la même chose que vous voulez juste aller de l'arrière à l'avant. Je ne crois pas que ça vous donne un moyen de les renommer. Dois-je me tromper. Oui. Donc je pense que c'est juste le nom de ce qu'il a appelé. Donc, miss aura de l'importance quand vous faites le code, vous devrez venir chercher ces références au lieu de l'endroit où nous écrivons les noms que nous leur avons donnés dans Kota. Et tu feras ça avec toutes les images, comme on l'a fait avec Kota. Il ne les renomme pas. Assurez-vous que ça marche. N' essaie pas de le renommer autre chose. Ouais, ça devrait être bien. Et d'accord, donc ouais, toutes nos couches d'air sont mises en place et prêtes à partir. Vous pouvez taper dessus. Vous pouvez voir ça. C' est l'image que nous voulons eso dans la prochaine leçon. Nous allons continuer à commencer avec le code, tout brancher correctement. Donc, euh, vous pouvez référencer vos images à partir de votre HTML et des trucs comme ça. Euh, donc je verrai dans la prochaine leçon 6. Coder 2 HTML, CSS, et JavaScript: Bon, donc on va commencer à coder. Comme je l' ai mentionné, je vais utiliser cette application appelée Coda. Donc, je vais entrer ici. Si vous suivez avec la leçon précédente, vous devriez avoir tous vos calques ici déjà s. Donc, je vais juste créer un dossier dans ce titulaire sur aller l'appeler images, minuscules I. Et puis je vais sélectionner toutes ces images et juste les suivre dans leur et se faire. Donc maintenant je devrais avoir un dossier dans ce dossier parallax et rien d'autre. Donc, je vais frapper ce plus et puis rapide nouveau fichier ici et l'appeler index dot html et puis je vais plus encore, dormi un nouveau fichier appelle ce point moyen Js et un autre style appelé CSS. Ok, donc si vous n'êtes pas familier avec le code du tout, nous allons les parcourir juste un peu comme nous obtenons les choses mises en place, mais essentiellement le point d'index html. Donc html est une sorte de votre structure de votre page. C' est là que vous avez organisé les différentes pièces. CSS est vos styles pour la page, ce qui, euh, signifie fondamentalement que si vous voulez changer les couleurs, la taille des choses, la position des choses, c'est là que vous feriez ça. Et puis le fichier Js ou JavaScript est où vous faites sur l'une de vos logiques. Donc, si vous voulez que des choses réelles se produisent sur votre page, cela va généralement être en JavaScript. Commençons donc avec le fichier HTML. Et donc j'ai tapé dessus. Et puis je vais frapper edit dans Coda, puis la première chose que vous allez vouloir faire et je vais m'assurer que j'inclue les versions finies et les versions en cours de chacun de ces fichiers et dans le cadre du projet. Donc si tu te perds, tu peux aller en référence à ce que nous allons vouloir faire. Angle d'ouverture, support, point d'exclamation doc, tapez toutes les capitales, puis ht connu en minuscules. Et puis c'est demain une barre oblique pincée, tu sais. Donc ce sont des balises HTML, essentiellement ces air comme de petits conteneurs. Donc, celui-ci dit juste qu'il s'agit d'un document HTML. Ceux-ci disent d'accord, et maintenant voici le HTML réel. Tout ce qui est à l'intérieur de ceux dans la prochaine chose va être appelé tête et je vais fermer barre oblique à l'intérieur de ça, nous allons avoir quelques choses de métadonnées et nous allons importer notre fichier CSS. Donc la première chose que nous allons dire est le titre et vous pouvez appeler ça comme vous voulez. Je vais l'appeler Relax. Il n'a pas besoin d'être en barre oblique. suivant va être, euh, lien égal style feuille égal texte barre oblique CSS Trump égal à ne pas Sasha Styles. Et puis je pourrais juste mettre spécial à propos de près dans l'attaque d'ouverture. Donc celui-ci dit le titre de mes pages, Parallax. Celui-ci dit, c'est là que se trouve mon fichier CSS, et ça va être important. Si vous voulez déplacer les choses autour de la page, ce que nous faisons et puis c'est le suivant. Ce sont ceux qui ont raison, c'est important. Mais là Ok, nom ici, pas le mien. Ce suivant est Il est fondamentalement dit juste Teoh sous à la taille de l'appareil. Donc, si vous avez un écran rétine haute définition, celui-ci le fait réellement apparaître avec la bonne taille sur quelques autres choses. Refroidisse égale à l'appareil parce qu'un utilisateur Ok, donc c'est tout pour votre élément de tête. Andi, tu peux copier tout ça directement ? C' est absolu. devrais probablement me mettre là-dedans. Donc, pour la prochaine pièce de ceci va être corps. C' est donc là que va votre contenu réel. Donc, le truc de tête est principalement des méta-données comme la mise en place de quelque chose que vous pouvez importer des scripts là , bien qu'il rend généralement plus sensible en bas. Et si vous voulez parler de ça, fait Andi quelqu'un pourrait déjà être familier avec ces trucs. Et si vous voulez parler de ça, Donc je suis désolé si c'est c' trop compliqué ou trop simple pour toi. Je l'explique juste de la façon dont je l'explique. Donc eso div est fondamentalement juste un conteneur clignotant en html et vous allez voir quelques autres types de conteneurs comme le corps et, par exemple, vous pouvez avoir ceci, je pense que c'est un paragraphe est ce que le P signifie. Vous avez donc différents types de balises HTML. Div est celui que j'utilise le plus parce que j'aime styler les choses sur mon propre où certains de ces autres peuvent venir avec, um, certains styles intégrés à certains degrés, donc vous pourriez avoir quelque chose comme H. Cela signifie En-tête 1, et cela va juste être plus grand que le texte normal. Mais s'il l'utilisait, si c'est juste une sorte de clignotement et prêt à l'emploi pour ce que vous voulez. Donc je pense que c'est agréable à utiliser, puis un autre dont nous voulons parler. Nous n'allons pas vraiment utiliser cela dans le projet, mais juste pour nous assurer que vos images sont au bon endroit et qu'elles sont correctement référencées , nous allons inclure une image ici. Donc cette balise est que je suis G. Et puis SRC est la source et vous dites égale ouverture. Citation proche citation, obtenu des images slash slash joueur un g et je peux juste se fermer avec slash et ainsi. Et puis nous devons nous assurer que n'a divulgué ce qu'il est. Notre corps est fermé, ce qu'il est, et la dernière chose que nous voulons faire ici est importante. Nous allons voir un script égal barre oblique de texte JavaScript R c sources égale barre oblique de point signifie Jess, et cela devrait être tout ce dont nous avons besoin maintenant dans notre HTML. Donc je vais sauver ça. Et puis il y a un petit globe oculaire en haut à droite de votre écran. Et je vais taper et tenir sur cela en fait du bas, collé à mon navigateur safari, puis glisser et déposer ici et mettre ce côte à côte. Et puis je vais taper sur le globe oculaire à Kota et dire ouvert en safari et ça va espérer dans ma page que c'est une fête et vous pouvez voir que j'ai des choses mis en place juste ici. Donc, euh, ce mot test que j'ai mis merci apparaît en haut de la page, puis des images juste en dessous, ce qui est juste comme j'ai dit que nous n'avons pas encore de styles. Donc, je vais taper sur cette petite icône de boîte en haut, gauche et à droite de la gauche à droite sur l'écran, puis ouvrir les styles que CSS et là. Je veux juste mettre quelques choses se HTM sur le corps. Donc CSS signifie feuilles de style en cascade sur. Cela signifie que les choses que vous mettez au niveau supérieur afin html dans le corps. Si vous regardez la façon dont nous avons notre HTML structuré HTML est l'élément de niveau supérieur, et tout ce qui est indenté est un enfant de cet élément. Donc, en cascade signifie que tout ce que je mets dans la peur devrait affecter les éléments être abaissés aussi, à moins que je le remplace ailleurs. Donc la première chose que je vais dire est la taille des boîtes et la boîte sur, puis la marge zéro. Et vous pouvez voir cette marge zéro. Vous pouvez dire qu'il y a juste un peu de marge blanche au bord de la page en ce moment. Donc, je rafraîchis ceci et votre CSS est branché en ce moment, vous verrez que ce petit marchand blanc s'en va, ce qui est génial. Et puis ces choses sont la plupart du temps juste pour obtenir notre contenu au milieu de la page . Vous n'avez pas vraiment à comprendre trop comment ils fonctionnent en ce moment. Heu, eh bien, sauf que de retour, ça rend juste l'arrière-plan de la page blanc. Je pourrais aussi faire noir si je voulais, euh et puis afficher Lex. Je ne vais pas entrer dans les détails de comment ça marche. suffit de dire que c'est assez cool, relativement nouveau avec CSS, et ensuite il vous permet de centrer les choses beaucoup plus facilement que ce n'est juste un centre. Ensuite, vous pourriez sans cette propriété d'affichage flex. Je veux dire, ce n'est pas comme si ces deux lignes disent juste le centrer horizontalement et verticalement. La dernière chose que je veux faire est que je n'aime pas avoir une police serif sur ma page à moins que je ne le veuille vraiment pour une raison quelconque. Donc pour ça, je ne veux pas de leurs fonds. Je vais dire que les familles répondent que nous allons juste par défaut Quelle que soit votre police sans serif système et puis pour le conteneur d'image, je ne pense pas que je vais sans retour en HD Go. Nous allons avoir un div avec une classe de conteneur d'image et ensuite ça va être display flex aussi. 100% Max avec pour cent aller économiser aller à rafraîchir ici. Et donc on dirait même de le montrer aussi. Je ne sais pas où supplémentaire exactement. J' ai intéressant qui est probablement couvert. Crois cette image. Ouais, le Texas est toujours là ? Je vais juste faire ça. Laissez gérer leur et OK, donc si votre page ressemble à ça maintenant ou quel que soit votre arrière-plan, alors votre CSS est connecté. Comment cela devrait être sur la dernière chose que nous voulons faire pour cette section est juste de s'assurer que notre violiste javascript a regardé comme il devrait être une houle. Donc, je vais parler de cette boîte à nouveau à droite de gauche à droite, puis appuyez sur le point principal Js, puis appuyez sur éditer coda. Et puis ici. Je ne vais pas faire trop pour l'instant, mais je vais rester vigilant. Parenthèse d'ouverture, e devis d'ouverture. Bonjour, Space World Exclamation point. Je vois. Et puis, si vous enregistrez cela et puis quand vous actualisez votre page, nous devrions avoir un petit pop-up qui dit bonjour monde. Donc, si tout cela s'est passé, alors votre HTML CSS et JavaScript et vos images sont tous configurés, n'est-ce pas ? Si ce n'est pas le cas, alors j'inclurai ces fichiers dans le projet sur, sorte que vous serez en mesure de passer à travers et juste comparer et voir ce que vous avez mal fait. Je ne pense pas qu'il y en ait trop ici. Ça va être trop difficile jusqu'à présent. Choses à rechercher si quelque chose ne fonctionne pas nos majuscules dans vos noms de choses comme javascript et CSS. Euh, ce docteur doit être ici avant et avant d'ouvrir quelque chose et s'assurer que tous tes parenthèses et les choses sont fermées, non ? Mais encore une fois, vous devrez peut-être simplement regarder votre code et le comparer à ce qu'il devrait être, parce que le code peut juste être un peu difficile à propos de choses comme ça. Je pense donc que c'est tout ce que je voulais couvrir sur cette écoute particulière. Et puis dans la prochaine, nous allons commencer à obtenir toutes vos images sur la page comme nous le voulons. Alors, passons à la liste suivante. 7. Codage sur la toile: D' accord. Donc, euh, nous allons commencer à mettre toutes nos images dans la toile HTML 5. Donc, l'objectif d'ici la fin de cette leçon est au lieu d'utiliser cette balise d'image que nous utilisons ici, ici,nous allons utiliser sur l'élément de campus HTML, ce qui est un peu cool qui est conçu pour une sorte d'animation Web et plus des trucs interactifs. Eso Nous allons voir comment utiliser ça un peu. Et nous voulons rendre nos images dans une boucle de rendu en utilisant le cadre d'animation de requête, dont nous parlerons un peu plus. Eso celle-là. Il va y avoir beaucoup de code, et ça pourrait sembler un peu intimidant, mais rien ici n'est trop compliqué. Et j'essaierai de voir ce que sont les bases, ce que nous faisons en même temps que nous allons. Mais si vous n'êtes pas familier avec le code, cela pourrait vous sembler un peu accablant. Donc encore une fois, je vais vous fournir les fichiers à la fin, et j'espère que cela vous aidera. Mais, euh, boucle, je suppose. Et donc la première chose que nous allons vouloir arracher Thies à la balise de test centrale et cette image de test parce que nous ne allons pas les utiliser. Et au lieu de cela, nous allons mettre en classe de toile égale investissement appels. OK, donc ça avec une partie. En fait, je veux parler de quelques choses ici. Je vais juste répondre à ça et je vais parler de pourquoi je fais ça. Je fais avec des égaux. 900 est égal à 100 et I d égal. Vous avez peut-être remarqué que je fais ces cours et ces idées sur les choses. Si vous n'êtes pas familier avec HTML, classe est généralement utilisée pour les choses de style. Donc c'est quand vous dites point quelque chose comme ça dans le fichier CSS, euh, ce conteneur d'image point. C' est un sélecteur de classe pour CSS, et cela signifie juste qu'il cherche quelque chose avec cette classe dessus dans votre HTML, et ensuite il va appliquer ces styles à lui. pour CSS, et cela signifie juste qu'il cherche quelque chose avec cette classe dessus dans votre HTML, J' ai donc la classe du conteneur d'image sur ce div à propos de mon canevas, et puis j'utilise le conteneur d'image point pour le styliser en CSS. J' ai donc eu une classe de canevas à élément canevas, et puis je vais y aller. J' ai eu des trucs pour CSS en une seconde. Ceci avec 900 augmentation de notre avait 1200. C' est la taille de mon oeuvre. Si votre illustration a une taille différente, vous devrez inclure la taille de votre illustration. Euh, et la dernière chose est que je d égale toile similaire à la façon dont la classe fonctionne et vous pouvez réellement utiliser une idée et CSS aussi bien. Mais vous ne devriez probablement pas sauf si vous avez une bonne raison pour ça sur l'endroit où vous faites c'est avec un, euh, numéro, disons, mais ne faites pas ça. Euh, tout le monde voulait canaliser comme ça, mais un I D est généralement utilisé par JavaScript pour attraper un élément saisissant et y faire des choses. Et nous allons le faire dans notre fichier de script de travail dans une minute. Donc, fondamentalement, nous voulons juste être capable de saisir cet élément de canevas de toutes les façons JavaScript en CSS, et nous voulions juste savoir qu'il s'agit d'une toile 900 par 1200 sur. Cela ne signifie pas nécessairement qu'il apparaîtra comme 912 100 sur notre page. Mais tout comme si vous deviez inclure une image et vous pourriez dire peut obtenir la pleine taille de la page ou petite ou autre, mais il sait toujours quelle taille il est. Ce genre de toile fonctionne. On dit que les affaires étaient grandes. Vous l'êtes. Nous pourrions vous dire quelque chose d'autre en CSS. Mais juste pour que tu saches, le métier de faire est, euh et puis je vois aussi que je voulais Teoh. Oui, nous allons faire quelques choses sur le style de toile sage et encore une fois, Ceci est principalement juste pour vous assurer que est centré sur la page. Donc avec auto max, 100% X avec affichage à 100%, marche et marge. Donc, en supposant que nous avons fait les choses correctement, nous rafraîchissons notre page ici. Donc mon monde bonjour du Dr Ascribed pour n'envoyer rien devrait apparaître. Non, je ne sais pas avec certitude si cela fonctionnera, mais je dirais que l'arrière-plan est lu sur cet élément de toile et vous pouvez voir que le campus apparu au milieu de la page et qu'il prend toute la largeur de la page. Donc, ce que nous voulons ici, c'est que nous voulions prendre autant d'espace que possible tout en conservant son rapport d'aspect. S o. je redimensionne ceci. Vous pouvez voir qu'il prend avec pleine hauteur de la page, mais pas plein avec. C' est en fait juste un peu difficile à faire. Mais ce truc de flex d'affichage dont je parlais dans la dernière leçon aide à mettre beaucoup ce genre de chose. Donc, si vous mettez une couleur d'arrière-plan sur votre campus, il devrait apparaître. Vous pouvez redimensionner votre page, et elle devrait toujours montrer l'ensemble tout en prenant autant d'espace que possible, si cela a du sens. Ok, donc on va laisser ça juste une seconde, et on va passer au script de travail. Donc, en passant, si vous utilisez coda et un clavier sur votre iPad, j'utilise le décalage de commande, puis les crochets pour basculer entre ces fichiers. Je pense que c'est rapide. Vous pouvez également juste une livre les sur le dessus. Ils sont juste de petits onglets, donc vous pouvez dire html CSS JavaScript sur. Alors j'y vais. Teoh, supprime cette alerte parce que ce serait ennuyeux si ça apparaît à chaque fois adorerait la page. Et la plupart de ce que nous allons faire à partir d'ici est dedans. JavaScript reviendra et ne fera que quelques choses de plus en CSS et HTML, mais surtout ceux que l'air fait ish pour l'instant. Donc, avec javascript, nous allons commencer par obtenir une référence à notre canevas aussi. Donc, si je fais deux slash est comme ça, cela signifie que c'est un commentaire et cela ne fait rien au script de travail. Est est juste pour nos références. Dites bonne préférence à vous. Donc c'est juste pour que tu saches. Et donc je sais ce que cette ligne de code fait. Je vais sauver notre toile égale document. Oui, par le campus. Ok, Donc quelques choses à parler ici déjà, cette barre et JavaScript signifie variable. Et donc où la variable est juste vraiment tout ce que nous voulons stocker pour utiliser à nouveau plus tard. Donc on l'appelle canevas, et tu peux l'appeler comme tu veux. Je vais vous recommander d'appeler canevas. Si vous venez avec cela et puis ce document ne reçoit pas d'élément par I d. Et assurez-vous également que vous faites attention à l'endroit où se trouvent les majuscules dans tout ce que nous faisons ici. Si vous gâchez des majuscules, les choses réseau. Ok, donc nous disons que le document doc obtient l'élément par i d et leurs capitales sur l'élément et par et j' ouvre la toile de citation de grossesse, clôture de la citation, fermeture de la vie privée. OK, donc JavaScript point-virgule est un peu comme un point sur la phrase. Il n'a pas d'importance que beaucoup était considéré comme une bonne forme. Si vous deviez mettre plus d'une chose sur la même ligne, c'est important. Et parfois les gens le font. Je vais essayer de ne pas faire ça. Mais ça marcherait encore dans mon jardin, mais tu devrais le mettre là. C' est juste que c'est une bonne pratique. Ces guillemets signifient qu'il s'agit d'un flux, qui signifie que cela ne fait pas référence à cette variable. Mais j'ai dit ici, c'est juste le mot canvas et cet élément get par i. D. Ceci est une fonction intégrée dans votre navigateur qui dit juste, Ok, Ok, retournez à mon html Recherchez ce que j'ai donné Tout ce que tu lui as donné ici. Alors rappelez-vous, dans notre html, nous avons appelé à cet élément de toile façon canevas lui a donné je d égal campus. Merci. Donc maintenant, c'est dire Allez trouver cette chose que nous avons donné l'idée de toile et mis dans cette toile variable. Ok, donc on devrait l'avoir maintenant. Ensuite, nous allons obtenir la référence au contexte de canevas. Et je vais appeler ce contexte de bar. La toile des gens n'a pas de contexte à Ok, je fais attention. Les lettres majuscules des orteils font attention aux devis. Hum, et ce que c'est le contexte de rendu pour ce canevas. Donc, le canevas est une sorte d'élément html par lui-même, mais il contient , comme, dès que vous créez qu'il a toujours un contexte de deux D ou trois D contenu dans. On va utiliser le contexte TV, , et ensuite ça nous donne quelque chose avec quoi travailler plus tard. Donc, quand nous dessinons des images essayaient au contexte, pas à la toile. Mais le contexte fait partie du campus. Il n'a probablement pas vraiment d'importance que vous le sachiez juste pour que vous sachiez, euh et puis nous allons Teoh obtenir initialisé une variable de chargement. Donc, lorsque nous chargeons toutes nos images, nous devons savoir quand elles sont chargées car nous devons attendre que les images soient chargées avant de pouvoir les dessiner. Donc je vais vous dire et notre charge souligne Counter People's Europe. Et comme nous avons chargé des images entrant dès qu'une image limitée est chargée, nous allons dire compteur de charge plus un, et puis une fois qu'il est égal au nombre d'images que nous avons, alors nous pouvons dire, OK, toutes nos images sont appréciées, et nous y arriverons dans une minute. Donc, l'autre chose que nous allons faire ici est que nous allons initialiser des objets image pour chacun de nos calques. Et donc si vous avez des couches différentes ou que vous les avez nommées différemment d'idéo que moi, vous aurez besoin de Teoh hit moteur combien de couches vous avez et ce qu'ils sont. Donc pour le mien, j'ai une image de fond et en fait, tu es toujours heureuse. Je pourrais juste te montrer avec quoi je travaille. Donc, nous avons des antécédents, qui est ici. Euh, arrière-plan est égal à nouveau, euh, façon d'avoir des ombres égales à faire sont des gens. Laisse-moi te montrer ça pendant qu'on y va. Donc il y a des nuages et en fait mettre les ombres hors de l'ordre ici. Alors prenons ça, afin qu' on ait des nuages. Est-ce que c'est le prochain et les nuages est probablement un petit terme pour ce que ceux sont réellement sur. Ensuite, nous avons des petites choses flottantes, des étoiles et leurs appels que nous allons mettre le bar floaties un. Parce que je sais que j'ai plus qu'un de ces nœuds papillon pense, aussi. Et puis je crois que j'ai mes ombres, que j'ai déjà mises, et puis la suivante, vous ne pouvez pas la voir parce que fond blanc du robinet une fois que vous pouvez voir que c'est mon masque. Alors je crois que j'en ai deux de plus. Il y a les gens réels barrer les humains, cette nouvelle image et ensuite un autre fromage bleu trois. Ok, donc si vous avez plus de huit joueurs ou moins de huit couches, vous devriez avoir le même nombre d'éléments ici que vous avez des calques. Tu peux les appeler comme tu veux. L' air, juste des Indiens arbitraires que j'appelle le mien. Vous avez besoin de connaître le nom du fichier image réel pour plus tard, mais pour l'instant, vous pouvez nous appeler ce que vous voulez. Juste ici. Euh, d'accord. Donc, la prochaine chose que nous allons à dio est de créer une liste d'objets antérieurs. Donc, euh, nous allons sauver notre liste les parenthèses des gens. Ok, donc ces parenthèses et javascript représentent une liste, et ça veut dire que c'est le cas. Je veux dire, c'est vraiment savoir comment le décrire en plus d'une liste. Mais ce qui est important à garder à l'esprit, c'est qu'il s'agit d'une liste de quelque chose. Ça peut être des ficelles. Ça peut être des chiffres. Il peut s'agir d'objets , c'est ce que nous allons faire. Cela pourrait vraiment être n'importe quoi, mais ils sont dans l'ordre que vous créez. Il y a d'autres choses et JavaScript que vous pouvez faire qui ne sont pas dans l'ordre par défaut. Mais ceux-ci seront dans l'ordre où vous les mettez en ordre ici. Et donc je n'ai pas commencé par dire liste de départ. C' est dire et une liste, et puis à l'intérieur de cela, nous allons mettre quelque chose appelé des objets ou des dictionnaires, en fonction de qui vous parlez. Vous, probablement, hum, et chacun d'entre eux a ce n'est pas dans l'ordre, mais vous pouvez avoir des clés et des valeurs dans ce. Donc, c'est la clé. Ça s'appelle appeler une image. Vous pouvez voir qu'il s'agit d'une chaîne, et ils doivent être des chaînes du côté de la clé. Et puis quoi ? On y va. Et ce sont ces variables d'arrière-plan que nous avons inventées ici, donc vous saurez que cet arrière-plan n'est pas entre guillemets, qui signifie qu'il fait référence à la variable dont j'ai besoin. Donc nous distribuons cette image, et en ce moment c'est juste un objet image clignotant. Mais nous reviendrons à ça et nous devons lui donner la source sur ce qui va être. Ce sera une chaîne, qui est un chemin vers votre image. Donc, si vous configurez les choses de la même façon que je l'ai fait, il y aurait un calque 11 g, donc ce ne serait pas slash images calque et enregistrer un soulignement d'un point org. Si vous n'aviez pas mis vos images dans un dossier comme je l'ai fait, alors ce serait juste comme ce trait de soulignement clair soulignait un adjoint. Si vous utilisez, uh, uh, javascript n'importe où, vous devez aller trouver ce que ce chemin est pour l'image, parce que je ne pense pas que vous pourriez le changer vous-même, et ensuite vous utiliseriez ce chemin ici à la place. Le jour, on va lui donner ceux-là. Je vais expliquer un peu plus quand nous reviendrons à cela, mais pour l'instant, il suffit de les copier, voir index, et cela représentera à quel point il ressemble à cette couche est proche de vous. La position sur ça va être importante pour changer la position de la couche. Peux-tu en parler plus tard ? Mais vous pouvez voir que je donne à cette position, Teoh une valeur d'un autre objet. Donc il a avoué des choses comme ça et ça peut être pratique. Parfois, on va lui donner un plan. Ne se souviendra-t-il pas de ce mélange pour celui-là ? Non. Parce que celui-là est normal. Flint bateau si juste dire non. C' est du tout. Ce n'est pas des bateaux. Cela signifie simplement clignoter en JavaScript. Fondamentalement, euh, et puis on va dire capacité parce que je pense que je vais vouloir changer l' opacité sur une ou deux couches. Ça va juste en être un. Donc, quand on dit opacité, zéro est transparent, on est opaque et on a des valeurs entre ces deux. Ok, donc c'est un plus tard dans notre liste de couches, et j'en ai huit, donc je vais juste passer en revue ça assez vite. Assurez-vous simplement de leur remettre la bonne image et le bon chemin vers le fichier. Ce sont les choses importantes, et celles-ci reproduisent simplement comment je les ai fondamentalement. Et puis tu pourras modifier les choses plus tard. Ça n'a pas l'air comme tu le veux. Euh, ok, donc je vais juste copier tout ce truc et le baser ici et ensuite changer les parties qui ont changé ? Donc ça va être des nuages couche à, et puis vous vous connectez. Nous voulons que ce soit juste un peu plus proche de l'arrière-plan, puis les autres choses seront les mêmes et collées à nouveau. Ce prochain sera des corps. Un, vous avez trois, et nous allons le faire en tant que Native 1.25 et en fait, celui-là je veux mettre un mode de fusion. Donc, de retour dans mon fichier approprié a donné cela en mode de fusion superposé. Donc, je vais mettre des citations, superposition, fin, citation sur. Si vous avez utilisé un mode sur l'une de vos couches, vous le faites. Je ne sais pas que tout de approprié est pris en charge en javascript, donc vous pourriez avoir besoin de chercher cela si vous en avez utilisé un bizarre ou quelque chose pour utiliser des marques cardiaques . Vous pourriez vous poser des questions difficiles, cependant. Donc juste une tête en haut. Bien qu'il puisse être supporté cette transcription de toute façon, donc je viens de faire face à un couple de plus de ces floaties constantes, aussi sera couche pour et ces index seront négatifs 0,5. Et encore une fois, je pense que celui-ci a également un mode de fusion de superposition sur. Alors la prochaine est mes ombres. Appelez ça les ombres. Oui, dans ça. Et puis c'est vos cinq. Et en fait raté ça quand je créais mes noms de calques et d'autres choses. Donc je veux que celui-ci soit de retour pour l'indice Z. Je voulais être entre les nuages et l'arrière-plan et parce que nous allons le mettre pour se multiplier. Peu importe que ce soit plus haut dans la pile à cause de la façon dont je travaille. Il sera simplement combiné avec des couches en dessous de toute façon, donc il ne regardera pas autour. Mais ce n'est pas trop déroutant. Et nous allons faire 1.25 En fait, allons nous sentir comme 1.5. Nous verrons à quoi ça ressemble, et vous pouvez jouer facilement si les choses ne ressemblent pas à ce que vous voulez. Je vais changer celui-ci pour se multiplier, et on partira. L' opacité a gagné. Ça pourrait revenir et changer ça. Et puis je pense, comment je suis parti ? Trois de plus. Donc celui-ci est mon masque, d' accord ? Et c'est la couche six, et je veux que ce soit le zéro de l'index. Donc ce sera une sorte de ma rotation centrale de déchirure. Donc, cela restera en place pendant que tout le reste se déplace essentiellement sur la couche humaine sept fois et c'est l'indice va être positif. Donc vous vous souvenez que j'ai parlé de la façon dont c'est plus amusant si quelque chose sort de la page et que quelque chose se passe dans les pages sont des arrière-plans avec les négatifs, l'index. Ils vont avoir l'air d'entrer dans la page sur ces choses avec les positifs, l'index, ils vont avoir l'air de sortir de la page, car nous avons deux ou trois effets D. Alors obtenez que c'est l'indice de 0,8 et laissez tout le reste. Et puis ce dernier sera mon arbre de floaties, et c'est la couche. Et c'est l'indice. Euh, voyons, euh, faisons-le, aussi ça pour sortir assez loin et je voulais que ça soit juste un peu transparent. Donc je vais dire 0.9 comme mon opacité. Cela équivaudrait à 90 % de capacité. Et puis une chose que vous devez faire attention Si vous avez copié et collé comme moi, vous ne pouvez pas avoir une virgule à la fin de vos sujets comme ça. Alors assurez-vous de vous débarrasser de ça, et ça devrait être toutes nos couches. Encore une fois, ça a l'air intimidant. Ce n'est pas trop compliqué. La plupart d'entre eux ne sont que des copies les unes des autres. Je pense que la chose qui va être la plus difficile est juste de s'assurer que vous avez le bon nombre d'entre eux en vous assurant que vous avez la bonne voie. Et, euh, s' assurer qu'il a utilisé le bon nom d'image ici que vous avez défini ci-dessus. Donc encore une fois, ne me copiez pas à moins que vous ne me copiiez exactement. Mais assurez-vous de faire les choses selon votre illustration pour cela. Ok, donc sur la prochaine partie, on va dire « couche ouest ». Et rappelez-vous, c'est la liste que nous avons faite apparaître avec des crochets. Hum, nous appelons cette liste de couches soulignées. Donc ici, nous allons skater en toute sécurité votre liste de soulignements, qui fait référence à cette liste, et ensuite nous utilisons ceci intégré. Je ne peux jamais ce qu'on appelle ça. Je ne dirai pas ça aérateur, mais je me trompe peut-être à ce sujet. Pour chaque fonction à nouveau. C' est avec un repas de capital. Donc liste de couches pour chaque fonction de grossesse d'ouverture. Index des joueurs de l'Apprenti E brisé. Hum, et en espérant cruellement raquette. Assurez-vous de mettre un quelque chose de fermeture appelant à la fin. Et donc ce que cela fait est que nous disons pour chaque élément de cette liste de calques et les éléments de la liste de ce niveau supérieur Il y a donc des objets, chacun d'entre eux avec les petits crochets. Euh, donc nous allons dire, pour chaque objet de cette liste de calques, nous allons exécuter cette fonction. Nous allons lui remettre l'objet et l'index à cet objet, qui est juste quel nombre est-il dans la liste. Donc, cette fonction saura si vous demandez une couche, elle va savoir que nous parlons de la couche actuelle qu'elle regarde dans cette liste de couches, puis l'index sera le nombre actuel de cette couche. Donc, euh, pour chacun de ces calques allaient à calque obtenu l'image, qui fait référence à cette image. On l'a donné. Donc c'est en fait une référence à ça que nous avons remis que je suis. Et puis on va dire que la fonction des gens s'ouvre carrément raquette avec support où tu veux les appeler et rappelle-toi, on a fait cette rencontre de chargement ici. Charge de soulignement. La contrefaçon est actuellement nulle. Donc, chaque fois qu'une de ces images se charge, nous voulons dire charge, compteur de soulignement plus celui des gens qui signifie juste ajouter une à elle, quoi qu'il soit en ce moment à un. Et puis, euh, alors on veut Teoh. Nous ne voulons rien faire d'autre tant que toutes les images ne sont pas chargées, non ? Nous allons dire que si le compteur de soulignement de charge, euh est supérieur ou égal à vous. Um, liste soulignée par le joueur. Voyons si nous allons Teoh Drama sont une potion qu'on n'a pas encore faite, alors entrez dans ça. Intéressant. Donc, c'est ceci est une déclaration if et javascript. Il dit simplement, si ce que vous mettez entre parenthèses ici est vrai, alors faites les choses à l'intérieur de là et vous pouvez aussi dire autre, faites quelque chose que nous n'utilisons pas d'autre ici parce que tout ce qui nous intéresse est si à ce sujet est fait. Donc si nous avons chargé toutes nos images, mais ensuite nous voulons vous Dr Campus, et ensuite après avoir configuré ce lecteur, ce téléchargement d'image, il ne sait pas encore quoi charger. Donc, nous devons dire l'image de calque s R c pour la source est égal joueur Doc. Cast R C. Ok, donc c'est chanter Charger l'image, fondamentalement. Et puis une fois les images chargées, l'image sait déjà exécuter cette fonction que nous avons créée ici qui attirera les chimistes. Donc maintenant, ça ne va rien faire parce qu'on n'a pas de camion et de dysfonctionnement. , Mais ce qu'on ne peut pas faire,c'est venir ici et faire en sorte que notre travail puisse dysfonctionner. Donc nous allons dire fonction, essayez ceci, euh, sur ceci euh, est juste de créer une fonction appelée canevas que nous pouvons appeler de n'importe où dans notre fichier de script de travail . Donc, la première chose qu'ils vont effacer quoi que ce soit. Oui, commencez ça parce que nous sommes en train de faire ça Quoi ? Nous allons exécuter cette fonction une fois, euh, voyons, genre, genre, 60 fois par seconde, je pense, je pense, et si vous ne l'effacez pas, je ne pense pas que ça serait vraiment important pour cette page en particulier, en supposant que vous n'avez pas de transparence tout au long. Mais ça pourrait sembler un peu bizarre. Donc, fondamentalement, vous voulez tout effacer et réessayer 60 fois par seconde. Donc, nous allons clair d'abord en disant le contexte où c'est une référence au contexte qui vient avec votre canevas. Tu as raison. Zéro virgule, zéro espace. Euh, la toile dedans. Ce qui veut dire, c'est que nous allons effacer cette zone définie en commençant en haut à gauche. Je suppose que c'est à gauche zéro top zéro et aller avec une croix et la hauteur vers le bas. Donc fondamentalement la taille de notre toile, nous sommes juste effacer ce rectangle dans la toile. Euh, les hommes, nous avons besoin de Teoh et de dessiner Fuselier. Tu n'as pas à dessiner ça. Vous devez écrire ces commentaires comme je le suis. J' aime les avoir parce que ça rend les choses un peu plus claires. Ce que je fais, c'est que je lis à nouveau mon code plus tard. Hum, donc nous allons faire la même chose que nous l'avons fait ici aussi loin que pour chaque chose va, donc vous pouvez juste copier cette ligne si vous voulez. Vous dites stock plus tard pour chacun. Assurez-vous que vous avez fermé avec un crochet de fermeture et fermez les parenthèses, puis pour chaque calque de la liste, nous allons dire son contexte. Image de roche. Nous sommes donc c'est l'image que nous essayons. Et puis nous avons besoin de la couche de positions Position X. Et je pense que si nous exécutons ceci maintenant, alors cela fonctionnera juste jusqu'à présent. Et on va changer quelques choses avant d'en finir avec cette leçon. Donc, je vais frapper sauver sous la pluie, et puis je dois revenir sur le safari ici parce que j'ai mon application de photos ouverte et je vais juste frapper rafraichir. Revenons à l'index point html Il sauvegarde maintenez enfoncé sur le globe oculaire, ouvrez en safari et vous pouvez voir que mon image est apparue ici. Donc, cela signifie que toutes mes couches sont dessinées dans le contexte. Donc j'ai besoin de faire quelques choses de plus. Nous avons déjà ce genre de mise en place. Le 1er, c'est qu'on y va. Teoh Roseman. Peu superficiel. Ok, on y va. Teoh, assurez-vous qu'on utilise le bon mode de fusion. pour chaque couche. Eso Nous allons juste dire votre médecin parce que cela va revenir politique Sentinelle mélangée tardive , qui est sur la plupart de ces couches, vous vous souvenez ? J' ai donc des mélanges. Non. Si c'est faux, alors ça ne fera pas ce qu'il y a ici. S' il est défini Teoh une souche comme superposition ou multiplier qu'il fera ce que nous avons ici réviser le contexte. Eh bien, en quoi c'est égal ? Plus tard, quand ils allaient dire autre chose. Donc, si Layer Docklands est faux ou faux, nous allons dire contexte global. C' était la citation de l'Opération People, le cycle de citation ? Um et puis, comme on descend, on peut juste dire qu'il y avait des commandes pour que vous puissiez parler la coche en haut, non ? Je vais me rafraîchir et vous pouvez voir que mes modes de fusion d'avocat ont changé. Donc, mes ombres air se sont mises à se multiplier. Mes petites floaties en arrière-plan sont configurées pour superposer, et c'est juste comme et ensuite une autre chose que nous devons faire est juste de définir l'opacité. Donc sur cette couche avant, les flottations au premier plan se rappellent que j'ai dit que c'était une opacité de 0,9, et maintenant ils sont complètement opaques. Vous ne pouvez pas voir à travers eux du tout. Je vais dire Contexte, global égal joueur et maintenant actualiser cela. Vous pouvez voir qu'ils sont devenus un peu transparents. Donc je pense que c'est à peu près fini. La dernière chose dont nous avons besoin, c'est que ça ne fonctionne qu'une seule fois, et ensuite c'est fait. Et rappelez-vous, nous avons parlé de la façon dont nous allons utiliser un cadre d'animation de requête pour parcourir les 60 fois par seconde. Donc, vous devez être juste un peu prudent ici. Mais fondamentalement demander cadre d'animation. Est-il construit quelque chose sur votre navigateur qui exécutera une fonction autant de fois qui peut dessiner à l'écran, qui sur la plupart des navigateurs modernes va être 60 Rangers à nouveau ? Donc, au lieu de l'appeler avec les parenthèses ici, à la place, nous allons dire, demander l'animation, ouvrir la fantaisie. Et puis on lui donne juste le nom de la fonction sans rien. C' est juste le nom de la fonction, qui est déposé toile, puis rappelez-vous de faire attention aux lettres majuscules. Donc, c'est la demande des touches inférieures de notre animation avec a avec chaque cas un et cadre avec une majuscule F toile de drogue eso Si nous disons que, cela devrait passer par une fois, ce qui est génial. Et puis la dernière chose que nous avons besoin de dio est à la toute fin de notre roche et de notre dysfonctionnement. Donc, après cette liste de calques pour chaque Mais avant cette parenthèse bouclée de fermeture, nous allons dire la même chose demandant la permission. Mot d'avertissement juste ici. Ne le faites pas de cette façon. Ça va s'écraser. Tu ne fais probablement pas ça. Euh, en parlant de l'expérience. Donc, vous voulez appeler la demande de cadre d'animation ? Le suivi de ceci et fondamentalement ce que cela fait est qu'il traverse cela. Donc nous avons dit de l'appeler en utilisant son animation de quête amener ici. Alors il descend ici, il l' exécute une fois, puis il arrive à la fin et il dit, Oh, recommence. Et ça continue à traverser ça jusqu'à ce que tu parles pour arrêter, qui ne lui disaient pas d'arrêter. Donc, je vais dire que je vais entendre rafraîchir ici, et vous ne devriez pas voir de différence, mais ça rend en fait 60 fois par seconde. Maintenant, ça va être important. Une mise à jour de la position basée sur le toucher et le mouvement, parce que c'est ainsi que nous bougeons les choses. Ok, donc l'autre chose que je veux faire, c'est aller dans ce fond pour obtenir de l'aide dans votre CSS. Je n'aime pas vraiment avoir lu flash à chaque fois que je charge la page, mais je crois que ce sera le cas pour cette leçon. Donc, dans la prochaine, nous allons vraiment le faire commencer à se déplacer en fonction du toucher et de la souris, et ensuite nous irons à partir de là. 8. Coder 4 Contrôles de la touche et de la souris: Ok, donc si vous avez suivi toutes les autres leçons jusqu'à présent, vous devriez être à un point où toutes vos images sont dessinées sur toile. Donc, cela devrait être un tas de couches différentes sur la droite. Mais ça devrait ressembler à l'image finie, mais ça ne fera rien pour l'instant, donc nous allons obtenir si quand vous touchez et faites glisser sur l'écran, les calques se déplacent et ils ont l'air un peu trois D. Donc, uh, pour commencer, je vais juste créer une section en bas de mon fichier JavaScript ici et en utilisant un script de travail Comment avec le pays Slash est au début. Je vais juste dire toucher et contrôler, euh et puis la première chose que nous voulons faire est juste que ça n'a pas autant d'importance pour le toucher. Mais si vous utilisez la souris, vous voulez seulement que l'image bouge. Lorsque vous cliquez et que vous faites glisser, vous ne voulez pas déplacer votre souris à chaque fois que vous êtes dans la fenêtre. Je veux dire, à moins que ce soit ce que tu veux, alors tu le fais. Mais pour moi, je voulais seulement emménager quand je suis en fait intentionnellement dans, donc je vais sauver sont égaux chutes. Et c'est juste une variable arbitraire que je vais créer qui dit, par défaut, c'est faux. Nous reviendrons et nous y référerons plus tard dans certaines des choses que nous faisons. Ça l'a dit aussi. Fidèle à vous, commencez à cliquer ou commencez à toucher l'écran. Mais faites ça pour commencer. Et puis la prochaine chose que nous voulons faire est de dire que nous allons initialiser une sorte de conteneurs juste pour tenir nos coordonnées tactiles ou souris s. Donc, nous devons faire deux de ces Un sera ce qui va être appelé initial d'hiver , et ce sera quelque part où nous gardons une trace de l'endroit où vous avez touché la première fois ou où vous avez cliqué sur l'écran. Ça va être important parce que, euh, on en parlera plus tard. Mais fondamentalement, si vous ne gardez pas une trace de cela et juste le déplacer à l'endroit où vous avez touché à l'écran sur les choses, sautez autour dès que vous touchez son clic. Ce qui a l'air vraiment étrange. On va dire x zéro. Pourquoi zéro ? Donc, ceci est un numéro d'objet Donc sont la clé. Est X notre valeur est zéro sont les clés. Pourquoi ? La valeur est nulle et ensuite nous allons sauver notre pointeur. Et cela va juste être un conteneur pour où notre curseur actuel ou la position tactile est sur quelque chose 00 Um, et alors pour réellement écouter les événements tactiles ou souris, nous devons faire cette chose appelée ajouter un écouteur d'événement Eso Nous voulons orteil Onley tire ça quand vous appuyez sur le campus pour commencer par Donc nous allons dire toile et rappelez-vous, c'est une référence pour lire Honte off canvas dot ad auditeur et ensuite nous allons dire toucher, commencer traçable, droit ? Et puis nous allons appeler la fonction hiver start parce que nous allons utiliser ça pour toucher et la maison. Donc, je veux juste dire quand vous commencez à toucher l'écran, exécutez cette fonction sans lire de la manière de la fonction. Vous voulez faire la même chose à partir de l'externalisation chez Listen in the désordre ? Appelez la même personne, M. um Donc ces deux air ont été intégrés juste un nom pour les événements qui se déclenchent dans votre navigateur. Appelez la même personne, M. um Donc ces deux air ont été intégrés juste un nom pour les événements qui se déclenchent dans votre Donc, vous devez les nommer exactement à nouveau. Faites attention aux lettres majuscules à une lettre minuscule et ces choses qu'ils font comptent. Et puis nous allons réellement créer cette fonction. Donc pointeur sur un effet plus passif et cela passera automatiquement parce que l' écouteur d'événement , vous n'avez pas besoin de le transmettre. Habituellement, avec une fonction, vous devez réellement lui donner explicitement quelque chose que vous voulez qu'elle reçoive une fonction, mais pas dans ce cas. Donc c'est plutôt sympa. Donc, la première chose que nous allons faire dès que nous commencerons à toucher ou à commencer à regarder est trop vraie, et cela va entrer en jeu dans une minute. Hum, mais maintenant on sait comme chaque fois qu'on peut juste vérifier cette variable pour voir. Vous cliquez actuellement sur la projection ? Vous touchez actuellement l'écran ? La prochaine chose est, nous allons juste nous assurer que cela fonctionne réellement. C' est tout ce que je vais dire. Alerte. Oui, bonjour, tu es la série. Donc je vais dire que la communauté s vous pouvez avoir la petite coche dans le coin supérieur droit et ensuite je vais juste rafraîchir la page. Je n'ai plus travaillé. OK, donc je dois retourner à l'index. Je n'ai pas accroché le globe oculaire en haut, à droite. Et ils s'ouvrent dans le safari, puis actualisent l'écran, Actualisez la page. Et puis dès que je touche l'écran, je reçois un Bonjour, vous touchez l'écran. Ok, donc je retourne à mon fichier JavaScript sur, et donc je ne veux pas vraiment ça là. C' est juste pour s'assurer qu'il était branché. Droit ? Si vous avez quelque chose qui a aussi une souris, vous pouvez vérifier que cela devrait fonctionner aussi. Et puis on veut voir quel genre d'événement c'est. On veut vérifier. Est-ce que c'est délicat ou est-ce un événement de souris ? Parce que même s'ils semblent être les mêmes, vous les référencez un peu différemment. Mais nous allons dire si l'événement coincé est égal, toucher, commencer. D' accord. Et puis on va dire « toucher ». Disons juste alerte tactile et ensuite tout le monde que vous avez parce qu'on pourrait dire autre si le type est égal maintenant, escargot, alors on peut dire alerte. Et je ne vais pas tester ça parce que je n'ai pas une maison connectée à j'ai été de 12.2 ou quelque chose que j'utilise ici. Ce n'est pas une chose. Eso Ensuite, je vais rafraîchir ici voyages et écran et il dit toucher. Donc ça veut dire que ça marche. Cool. Je vais te laisser avec. Et alors quoi ? Nous voulons dio une fois que nous avons commencé un événement tactile ou un événement de masse est que nous voulons définir l' initiale ce point votre chose initiale. Rappelez-vous, nous avons fait ce point votre variable initiale ici et nous voulons juste définir où avez-vous abord touché ou cliqué sur l'écran ? Chasseur. X initial est égal à l'événement Dr. Touches Bracket est là et ensuite quelque chose avec du blanc. Quoi ? Votre habituel Pourquoi touche zéro eso ça sur ? C' est la différence entre le toucher et la souris. En ce qui concerne la façon dont vous les manipulez, c'est ça touche zéro ? Parce que techniquement, si vous utilisez le toucher, il pourrait utiliser Multi Touch. Donc, le zéro signifie est le premier élément dans le tableau de touches ou la liste des touches. Zéro est la façon dont vous indexez le premier élément de la liste. Donc dire la première touche d'avoir touché l'écran. Et quelle est sa position dans le client ? Devrait voir quel navigateur. Et puis, d'autre part, on va à un point. Exp est égal à Find X. Je suis sûr de fumer parce que vous n'avez pas à dire la première souris qui a touché l'écran. Je ne connais aucun système qui supporte plus d'une souris. Oui, faites-moi savoir si vous dites mieux, euh, maintenant nous savons où vous touchez l'écran. Donc c'est comme ça que nous allons faire là-bas. , La prochaine chose que nous voulons faire,c'est que nous voulons partout où vous déplacez votre souris ou votre contact dans toute la fenêtre. Nous voulons écouter où il est pour que nous puissions déplacer que nous puissions décaler les images basées sur cela . Donc, nous allons dire, Window, cette fenêtre d'écouteur d'événement est juste un truc construit et un travail scripté. C' est de ça que tu parles. Tu dois mettre ça en place. Nous allons dire toucher, bouger, bouger, et nous voulions appeler ce point de fonction votre et puis les acteurs de fenêtre. Et puis nous avons réellement besoin de créer notre fonction de suppression de point, et puis nous voulons dire qu'il n'a pas empêché les valeurs par défaut. Des gens qui crient dehors. Refroidir. Ceci est important parce que comme vous si votre fenêtre est trop grande, ce qui est souvent basé sur la façon dont Safari fonctionne sur l'iPhone ou l'iPad. Je dois nous sauver et me rafraîchir. Euh, vous pouvez voir que ce sont des parchemins, même si je ne voulais pas faire défiler. Donc, cet événement qui empêche par défaut va être important pour cela, fondamentalement, dit simplement, Ne faites pas ce que vous feriez normalement quand je déplace mon doigt ou ma souris sur l'écran, et nous devons le faire à deux endroits. Ça ne marche pas encore. Mais l'autre chose que nous faisons est de nous souvenir que nous avons cette variable mobile et cette variable mobile que nous avons configurée plus tôt. Donc, pour commencer, c'était faux. Ensuite, nous avons commencé à cliquer ou à toucher l'écran, et c'est devenu vrai. Et maintenant, nous voulons juste dire sur Lee, si c'est vrai, alors faites les choses suivantes qu'ils disaient. S' il est vrai que vous pouvez écrire un autre code, alors nous allons garder une trace de l'endroit où est notre équipement d'impression ex ? Et pour commencer avec Rubin Se zéro, où est notre cour blanche actuelle était un 60 et ensuite nous en mettons quelques autres. Si c'est le cas, désolé. Cela devient un couple de couches profondes disant, si l'événement est égal au toucher, alors nous allons dire X égal à l'événement. Telle est la vôtre et, euh, Y actuel égal touche votre Ok. Nous avons donc notre position initiale que nous avons établie ici et maintenant nous connaissons la position actuelle . Et si vous vous souvenez de la physique, alors votre position finale dans Voyons voir, comment fonctionne ce travail Vous changez de distance est la dernière minute initiale, donc nous allons y aller dans une minute. Hum, mais nous voulons aussi nous assurer de gérer un événement de souris. Voici quoi d'autre. Si vous avez une subvention de refroidissement serrée, X est égal à ce qui n'est pas touchant. Je ne peux vraiment pas prendre aujourd'hui. Pourquoi les égaux arrêtent de jouer. Pourquoi, Ok, donc maintenant nous avons notre position actuelle jamais curseur, et ensuite nous voulons juste que Teoh mette réellement le décalage du pointeur. Donc, en dehors de ces deux déclarations, donc juste en dessous de ce crochet, vous voulez dire Pointer X. Et rappelez-vous, nous avons mis cela en place ici juste comme un zéro. Mais on va aller sur la droite ? Que nous allons dire pointé sur X est, euh, euh, X actuel. C'est notre position finale, tu te souviens ? Moins Quinter soulignement point conditionnel Pointeur Exe y est égal au courant. Pourquoi ? Moins. Cela nous dit à quelle distance d'où vous avez commencé devrait-il être à ce stade ? Et puis je pense que c'est bon, donc si tu veux juste, euh, revenons et faisons ça d'abord, et ensuite on va nettoyer quelques petits détails. Mais la chose que nous voulons faire pour commencer est de retour dans notre dysfonctionnement de dropcam ici avant que nous ne dessinions l'image dans l'écran. Maintenant, nous devons voir où devrions-nous dessiner l'image ? Parce que ça va. Je veux dire, c'est que nous voulons nous déplacer là où nous le dessinons, et cela donnera l'impression que les couches sont un peu trois D basé sur l' effet de parallaxe . Euh, donc nous allons juste dire, Voyons voir, nous allons dire que la position des points de couche est égale à obtenir des accessoires. C' est une fonction que nous allons écrire dans un deuxième concept, le plus tard pour obtenir poinçonnage offset. On va en bas, infection. Fâchez-vous. Et c'est ce nom pour une couche. Et nous allons dire qu'une touche de barre bouleversée X est égale au pointeur X, um fois la couche Z. Donc, cela va être important parce que si nous ne faisons pas cette couche de chiens, l'index, tout se déplacerait simplement ensemble. Et puis il semble juste que vous faites défiler l'écran. On en voit beaucoup trop. Pourquoi est égal à Pointer ? Pourquoi fois plus grand. Tu vois ? Rappelez-vous que les index Z référençant la proximité ou la distance de l'écran que nous voulons que la couche apparaisse. Cela va donc créer notre genre d'effet de trois d. On veut juste dire qu'on va ajouter quelques choses à ça. Donc ça semble un peu inutile en ce moment, mais on va l'utiliser dans une minute. C' est un décalage de pièce égal à parlé dans le support bouclé. Merci va toucher décalage X et pourquoi il va être toucher, pourquoi et cela avec point-virgule. Et puis on va revenir. Ce type est un décalage de retour. Et cela dit tout ce qui a demandé cette fonction. Rends-lui ce qu'on vient de dire, qui est bouleversé ? Donc maintenant l'opposition en couches va récupérer ce décalage au lieu du 00 que nous lui avons donné à l'origine, Hum, donc maintenant je crois que si nous avions sauvé cette page rafraîchie et je vais prendre une vidéo donc tu peux voir ce que je fais de ma main. Maintenant, Maintenant, quand tu utiliseras ton doigt sur l'écran, tes joueurs se déplaceront. Vous pouvez voir qu'il fait également défiler l'écran, ce que nous ne voulons pas vraiment. Donc nous allons arranger ça dans juste une seconde, et c'est probablement trop fort de ça en arrière. Donc on va faire quelques ajustements à ça, mais plutôt cool. D' accord, donc la première chose que nous voulions Teoh est probablement la plus facile, c'est qu'on est juste inventé pour réduire un peu cet effet. Donc, nous allons sauver notre multiplicateur tactile égal à 0,3. Et puis, dans chacun de ces petits calculs, ont dit point pointeur x fois est il Index, nous allons. Dites aussi fois toucher, c'est un et vous consentez à ce multiplicateur tactile à tout ce que vous voulez. Selon la façon dont les toiles plus grandes et des choses comme ça, vous pourriez vouloir modifier cela un peu afin que vous puissiez jouer avec ce nombre, Voir ce que vous aimez. Je l'ai fait un peu plus tôt, et j'aime ce numéro. Donc nous allons prendre une vidéo ici et juste très fraîche, et vous pouvez voir que c'est beaucoup plus subtil. Notre Disney fait toujours défiler l'écran, alors nous allons y retourner et réparer ça. Et donc pour réparer le défilement de l'écran, je pense que nous devons dio c'est aller ici et dire, hum, toile n'ajoute pas d'écouteur d'événement. Hum, touchez, bougez, et on va dire événement de fonction. Donc, cela s'appelle une fonction arbitraire et efficace dans l'espace que vous transmettez à cet auditeur. Ça veut dire que tu ne le nommes pas. Vous lui donnez juste une fonction et vous écoutez cet événement. Donc, nous allons dire, choses d'événement, par défaut. Donc, cela va au comportement par défaut lorsque vous touchez l'écran et déplacez est que le campus va se déplacer autour de l'écran parce que vous faites défiler l'écran et nous ne voulons pas que cela se produise. Nous voulions seulement bouger en fonction de ce que nous vous disons de faire, pas en fonction de la hauteur de la fenêtre et ensuite nous ferons la même chose de notre part. J' ai donc sauvegardé ce rafraîchissement de ma page. Et si vous jouez avec votre doigt maintenant, non, non, il ne fera plus défiler une page. Donc ça va appeler. Et puis on veut dio une dernière chose ici, est que tu vois, quand j'ai arrêté de toucher l'écran, ça reste juste là où je me suis arrêté, on n'a jamais voulu revenir à sa position d'origine quand tu lâches. Donc, nous allons dire fenêtres que donc nous utilisons la fenêtre parce que vous pourriez arrêter de toucher l'élément de canevas. On voulait le feu des orteils quand tu regardais ton doigt n'importe où dans Brother, ça vaut la peine de le dire. Comment écoutez-vous beaucoup le comprendre et pas une description ? L' introspection ? Nous disons et geste, j'en suis sûr. Même chose pour oh, taper nos. M. Vous savez, nous allons dire que vous écrivez notre fonction digestive, fonction et nos relevés gestuels seront personnels. Nous voulons nous assurer de déplacer les gens de petite taille, donc si vous utilisez des montants, vous remarquerez que dès que vous avez libéré votre passeport et qu'il continue de bouger, peu importe ce que vous bougez, gâchez un écran et ceci dit, Ne fais plus ça parce que maintenant c'est faux et nous vérifions que c'est vrai avant de bouger quoi que ce soit. Ensuite, nous allons dire que X plus rapide est égal à zéro usure y égal. Ok, donc maintenant j'ai gardé ça et ça prend une vidéo. Je vais rafraîchir cette page et sortir. Il s'enfonce au centre. Plutôt cool. Très bien, donc c'est tout pour notre toucher et notre souris et quel que soit le mot qui bouge les choses basées sur notes touchantes. Au cours de la prochaine leçon, nous allons ajouter des commandes de mouvement. Donc, en écoutant le gyroscope sur votre appareil, quelqu'un, vous le déplacez physiquement, l'action de l'image se déplace autour, donc nous allons commencer à écouter. 9. Coder 5 Contrôles du mouvement: avant de commencer à parler de cette section. Si vous exécutez IOS 12.2 ou plus récent que nécessaire pour aller dans les paramètres, puis faites défiler vers le bas jusqu' à safari et assurez-vous que dans la section confidentialité et sécurité, l' accès au mouvement et à l'orientation est activé, cela va être désactivé par défaut. Donc, vous devez retourner ce commutateur et vous assurer qu'il est allumé. Si vous ne le faites pas, rien dans cette section ne fonctionnera. D' accord, commençons à mettre en œuvre des contrôles de mouvement pour que quand on a pris l'appareil, vous puissiez obtenir un effet de trois D. Donc, juste au fichier très indépendant j'étais script, je vais descendre et des commentaires disant contrôles Motion. J' aime garder mes différentes sections séparées autant que possible. Et ce n'est pas difficile à faire complètement parce qu'il y a des endroits où vous avez remorqué, mélanger un peu les choses et les utiliser ensemble. Mais quelle mesure ? Je ne peux pas penser que c'est bien d'avoir une section pour la plupart de mes commandes de mouvement. La plupart de mes touches contrôlent des choses comme ça. La première chose que nous allons faire, c'est comme nous l'avons fait avec les commandes tactiles, c'est que nous allons initialiser nos positions. Donc, nous voulons Quel angle était l'appareil que lorsque vous avez rafraîchi la page pour la première fois et quel angle est-il maintenant ? Donc, nous allons dire des variables initialisées ou basées sur l'émotion. Détendez-vous. Et on va rester loin. Motion soulignée initiale Cools objet que certains appellent à la fin X. D'accord, en fait, vous pourriez dire série sur ces. Ça n'a pas d'importance. Voyons voir. Eh bien, disons non. Je pense que c'est comme ça que j'avais tout avant. On va rester en mouvement. Nos émotions sont égales à des objets, et ceux-ci seront X zéro. Pourquoi, tu es et puis ici, on va écouter la position du gyroscope. Donc nous allons dire, euh, eh bien, les événements. Et, euh donc nous allons dire dock de fenêtre à l'écouteur d'événement, hum, appareil. Et puis on va passer ce dysfonctionnement pas. Quelque chose de bizarre avec mes espaces ici que je n'aime pas. Ce qu'on veut faire, c'est la première fois que ça passe. Cela va courir à travers une sorte de constamment comme les pages vers le haut, mais la toute première fois nous voulons dire où ? Comme, quel angle est actuellement votre appareil ? Parce que nous ne voulons pas que vous chargez la page et c'est déjà sous un angle bizarre, comme les images sont déjà décalées d'une manière étrange. Euh, donc nous allons dire si c'est le premier vrai, euh, si ce euh, n'est pas l'océan initial point Exe et pas l'option soulignée initiale. Pourquoi ? Donc ce point d'exclamation au début d'une variable ? Donc j'ai cette déclaration if et puis je dis que si le mouvement du point d'exclamation souligne point d'exclamation initial ici, c'est une sorte de raccourci de code pour dire frappé cette source disant, Si ce n'est pas là et parce que nous l'avons appelé null apparaît était que le point initial de mouvement Exe est non. Et nous disons si ce n'est pas le point initial de mouvement Exe parce que non, qui retourne vrai pour n'est-il pas là ? C' est un peu déroutant, mais fondamentalement, nous disons que c'est déjà et sinon et même chose pour pourquoi cette fin et dit que nous vérifions pour ces deux choses. Donc, je dois dire son ex pas mis et pourquoi Il est également pas dit. Ouais, donc les deux ne sont pas réglés. Ensuite, nous allons rester en mouvement soulignements initiaux suivants égaux que vous avez été Dr Scorted. Pourquoi il appelle ? Donc, cela signifie que nous savons où l'appareil, quel angle l'appareil a été maintenu lorsque nous l'avons chargé pour la première fois. Alors, après cela, nous voulons voir où est l'appareil maintenant et puis nous pouvons prendre la différence et voir combien devrions-nous compenser les choses en fonction de la distance qu'il a déplacée ? Depuis que vous avez chargé la page ? Eso Il y a un couple tout Il y a quatre orientations différentes que nous devons gérer ici parce que les axes changent en fonction de la façon dont vous tenez vos appareils. Il faut qu'on s'en occupe. L' appareil est en orientation portrait. Um, les conseils sur l' appareil sont dans le paysage à sa décision. L' appareil est en paysage. C' est juste. Dispositifs latéraux à l'envers. Tu le tiens comme un animal. Ok, donc, euh, ce 1er 1 on va juste dire si l'orientation du point de la fenêtre est égale à zéro, ça veut dire que c'est en portrait. Hum, et on va sauter ça pour l'instant parce que je travaille sur le côté gauche, et je veux juste m'assurer que ça marche avant qu'on ne soit trop emporté avec ça. Et puis si l'orientation de la fenêtre est de 90. C' est le côté gauche de son paysage sur son côté gauche, ce qui est la façon dont je tiens actuellement Mon Dieu. Alors mettons ces autres en place très rapidement. Mais ensuite, je vais revenir à ça. Vous voulez tester d'abord égal à négatif 90 ? Um, c'est ça et le paysage voulait à droite côté. Et puis nous pouvons simplement dire autre et parce que la seule possibilité qui reste est qu'il est envers, donc eso si elle est sur son côté gauche, alors nous allons dire motion X. Et rappelez-vous, nous avons mis en place notre mouvement plus ancien ici, nous écrasons Motion X, et nous voyons qu'il est égal à point pita, qui est la position actuelle de l'appareil moins mouvement soulignement X initial, puis mouvement y égal début de l'événement. Euh, waas. Ça devrait être négatif. Événement Gamma foncé plus émotion. Votre score point conditionnel droit. Euh, assure-toi juste que tu as ce droit. C' est à propos de Cameron. Ok, donc je pense que ça devrait être juste pour le tenir dans le paysage sur le côté gauche. Donc nous avons besoin de Teoh pour notre fonction get offset où nous retournons le décalage de chaque calque souvenir, et entre votre décalage tactile et vous êtes bouleversé objet que nous retournons, nous allons dire décalage de soulignement de promotion loin, soulignement X est égal, euh point x joueur Times Z index souligné. Et rappelez-vous, c'est ce qui va faire bouger nos couches à des vitesses différentes. Fondamentalement, faites-le regarder trois d. Sinon, cela va bouger ensemble et vous ne remarquerez rien, sauf qu'il ressemble aux pages. C' est rampant. Donc on va y aller et ensuite on va sauver notre motion. soulignement, Décalage. Soulignement. Pourquoi c'était le mouvement ? Pourquoi a été plus tard Dodds Autre indice de sport et puis Parce que je sais déjà que c'est un effet assez faible. Je vais aussi faire un multiplicateur de mouvement. Donc, c'est un trait de soulignement de mouvement de bar. fournisseur de balle est égal à 2,5, et ensuite le même que nous l'avons fait avec le toucher un. Je vais dire fois l'émotion soulignement à acheter ici, et c'est juste copier et coller pour qu'il soit un peu plus rapide. Et encore une fois, si votre toile a une taille différente, ou si vous voulez juste que ce soit plus fort ou plus faible, vous pouvez jouer avec ce nombre, et cela changera la force de l'effet de mouvement. Andi, ici mercredi plus potion Underscore. Bouleversé. Souligner X ici. On va dire bénir l'émotion. Soulignement. Décalage. Souligner pourquoi ? Et ça veut dire que le bouleversement total va être toucher plus mouvement. Vous pouvez donc changer la position des calques avec le toucher et incliner votre appareil en même temps. Et ils fonctionneront tous les deux et rien ne sautera d'une manière bizarre. Donc je vais sauver ça. Et puis je vais Teoh Teik Video. Actualisez la page et voyons simplement si cela a fonctionné en fait pour rendre cela un peu plus grand d'abord. Bon, donc je vais me rafraîchir. Et puis si je l'ai dit à mon appareil, vous pourriez voir que tout a l'air cool en trois D. Ok, donc c'est seulement si c'est sur son côté gauche. Nous devons donc rendre compte de chacune de ces différentes orientations. Et j'espère que cela fonctionne juste si vous suivez mon code de près parce qu'ils peuvent être vraiment difficiles à comprendre qui est lequel et qui devrait être de quelle façon. Donc, si cela ne fonctionne pas pour vous, vous pourriez avoir besoin de juste ajuster, positifs et négatifs et dire que les choses fonctionnent comme elles le devraient. Et ça peut être un peu déroutant, mais j'espère que vous n'aurez pas besoin de le faire. Donc, dans cette fenêtre, l'orientation du point est égale à zéro, ce qui est l'orientation du portrait. On va rester en mouvement. X est égal à moins de mouvement. Soulignement initial. Pourquoi ? Et puis le mouvement pourquoi égal événement ? Bêta moins mouvement Soulignement Initial, uh, mouvement initial x puis dans le paysage sur son côté droit, ce qui est négatif. 90. On va émotion à propos de X égale négative, même. Arrêtez la bêta plus le mouvement de votre score point initial Exe émotion y égale. C' est cama moins mouvement soulignement initial. Et si c'est à l'envers, ça va être l'opposé de l'orientation portrait. Donc nous allons dire que le point de commotion x est égal à gamma négatif Non, je n'ai pas égal ici. Juste manqué u moins serait plus souligné. D' accord. Et puis l'émotion à propos de y est négative, moins de style X. , X. Ok, donc je vais voir si ça et puis un ça va être un peu difficile de tenir mon téléphone et de vérifier ça en même temps, Mais je vais lui donner mon meilleur coup. Donc aller très frais, je peux voir mon évasion ne s'est pas cassée. Donc c'est encore extrême. Je vais le dire en je ne suis pas refoulé la page, mais vous pouvez voir que les joueurs bougent comme ils ont dit, Oh, ça a l'air un peu trois D. Allons du côté commercial. Même chose Ils déplacent le chiffon où tout cela est très délicat. Désolé. À l'envers. Les joueurs bougent. Comment ils devraient refroidir. Bon, Donc, pour résoudre ce problème où vous avez pris cela et tout saute beaucoup sur le côté, nous allons aller au-dessous de cet écouteur d'orientation de périphérique, et nous allons juste dire, fenêtre point mauvais écouteur d'événement Sénateur hum , orientation, donnez-lui un pas dysfonctionnement avec l'événement semi-côlon et dites émotion soulignée arrivée initiale . X initial est égal à zéro souligné. Y initial est égal à zéro. Alors maintenant, si je dis ça, prenez une autre vidéo. Ça va être un autre bizarre bizarre d'avoir mon appareil autour. Donc fonctionne maintenant paysage. Je change un portrait. En fait, il met tout au centre, et cela fonctionnera pour chaque réputation. C' est encore des contorsions bizarres. Mais je crois que c'est tout ce qu'on voulait demander pour contrôler les émotions. Donc là-dedans, juste quelques choses qu'on peut polir un peu. Alors écoute, je vais mettre une touche finale sur les choses, et on partira de là. D' accord ? Je voulais souligner une dernière chose avec ça parce que je pense que je vais avoir des questions à ce sujet. Et si vous tenez votre appareil parfaitement droit est un peu délicat. Vous verrez que tout saute. C' est juste l'effet de la façon dont le gyroscope renvoie des données. Et honnêtement, je n'ai aucune idée de comment le réparer. J' ai passé longtemps à essayer de comprendre ça, et je ne sais pas. Donc, si l'un d'entre vous est des assistants de développement cool qui savent comment compenser cela, s'il vous plaît laissez-moi savoir et je vais mettre à jour ceci. Écoutez, merci. 10. Coder 6 touches de finition: Il y a encore quelques choses que j'aimerais changer ici. Juste une sorte de touche finale, des choses qui le rendent un peu plus poli. Donc, le premier d'entre eux sera un écran de chargement. Donc, si vous vivez cela hors d'un serveur, cela peut prendre quelques secondes pour charger. Et ça a l'air brisé quand les Lakers arrivent un à la fois. Donc nous sommes déjà comptés, comme nous savons déjà quand tout est chargé. Donc, je vais juste aller au HTML ici et en dessous de la toile dessus une fois qu'ils le font, équivaut à charger l'écran de tableau de bord, et puis je d égal. Et puis à l'intérieur de l'Etat africain pillage canard slash. Ok, je vais dire à propos et ensuite aller à votre fichier CSS et sous la toile de points. On va dob chargé écran de cendres, puis ouvrir le support, et il y en aura pas mal. Donc vous pourriez avoir besoin d'un positif obtenir le centre commercial. Mais je vais dire position absolue. Oh, j'ai 100% de fond. Zéro zéro zéro Juste ici. Capacité de visibilité. Um, écran du centre textile. Fax direction Flix. Euh, la ligne je centre juste par euh hein. Centre en transition. Il y a tous vos points qui sont de la couleur et probablement pas. Ok, donc si vous avez tout ça en dessous qui dit de charger l'espace de points de l'écran de Bash entre ces deux ans, euh, disant visibilité cachée. Fixez votre Donc fondamentalement, tout cela fait à peu près un écran de superposition blanche qui a le mot chargement juste au milieu de celui-ci va disparaître lorsque vous ajoutez le hit de classe dedans, ce qui fera avec vos chiens. Bien. Um, ouais. n'y a pas vraiment beaucoup à cela, à part une sorte d'alignement vertical du texte et tapisser horizontalement le texte. Donc je vais être sauvé là-bas. Nous passons au script Java, et puis nous ajoutons quelques choses. Donc, je suis en haut du fichier de script de travail et juste au-dessus de ces ramblings de comptage de charge, ils sont chargés, égaux chutes, chutes, et puis je veux obtenir une référence à l'écran de chargement au-dessus de cela, et ça va être loin. écran de soulignement est égal à l'élément par E. Et c'est ce qu'on appelle soufflage dans notre HTML. Je vais dire que je vais descendre Teoh, où on vérifie, tout est chargé. Donc, c'est juste ici dans notre liste de couches pour chaque à l'intérieur de ceci, si le compteur de charge est supérieur ou égal à l'arrêt de la liste de couches. Donc on va dire bonjour. C' est une fonction que nous devons écrire. Tout va bien. Et ici, on a juste besoin de dire fonction. J' ai un chargement et à l'intérieur de cela dira le chargement de l'écran de soulignement Plus avec un L majuscule sur la liste. Euh, ok, alors dis ce rafraîchissement par ici. Et vous pouvez voir que vous avez un écran de chargement qui apparaît puis s'estompe. Il est chargé. Donc c'est un joli petit ajout. Donc la prochaine chose que nous allons vouloir faire est d'ajouter un peu d'un effet de trois D. Donc, vous avez vos décalages de couche. Mais si tu regardes ça pas à travers une caméra, ça n'a pas l'air de Super 3 D. Nous allons également ajouter une sorte de rotation de l'élément de canevas entier. Um, c'est un peu plus difficile, probablement moins venir, alors nous allons descendre à l'intérieur de ce jockey et dysfonctionnement juste en dessous de notre direct clair couché ici à quelques lignes et puis Nous allons dire calculer Oh, beaucoup. Cela devrait 30. Et puis on dira que notre soulignement X équivaut à pourquoi ? Par depuis héros Négatif 05 nous verre fantaisie émotion point Pourquoi ? Depuis 1.2 point-virgule et le destin y est égal, Qu'en est-il de la prochaine fois depuis votre 0.15 point x et puis en dessous, nous allons réellement faire tourner le campus ? En fait, on va dire toile, ce style refroidit. Euh, ça pourrait être un peu délicat, donc je pourrais vraiment faire ça ici. Je vais sauver notre transformation. Étrange, euh, égal. Donc, ce que nous faisons est que nous faisons un étrange en utilisant quelques variables à l'intérieur de la chaîne que nous définissons comme une valeur CSS. Donc c'est juste un peu bizarre, mais supporte avec moi. Je dois faire attention à l'endroit où vous mettez des citations ici, cependant. Tourner X ouverture citation de fin de grossesse plus soulignement pecs. US devis d'ouverture DEG entre parenthèses terminées, Space répliquer. Pourquoi ? D' accord. Fin de grossesse. Citation plus soulignement. Pourquoi Deck semi-côlon. Ici. Nous allons référence qui traite stricte. Ok, donc j'avais sauvé et je vais faire tourner notre page de première année ici et maintenant vous pouvez voir que tout tourne un peu. C' est pour ça que je n'avais pas besoin de ce négatif, en fait. Négatif 0,15 et semble mieux. Donc maintenant, tout le genre de chose tourne juste un peu lorsque je bouge mon doigt autour de l'écran ou si je déplace mon appareil, l' un d'entre eux est inversé quand je vis mon appareil. Donc j'ai probablement besoin de deux fois de négatif sur cette motion et probablement de motion Pourquoi, oui, je pense que c'est mieux. OK, cool. Donc maintenant vous avez plus trois effet D. Super. , Et dans la dernière chose que je veux faire, c'est que tu sais, quand j'utilise les touches tactiles ou la souris et que je lâche l'action revient immédiatement à la normale. J' aimerais animer ça en arrière. J' ai été formé à ne pas utiliser des bibliothèques JavaScript tierces principalement, mais il y en a un assez cool que je veux juste vous montrer très rapide appelé Tween dot Js . Donc, c'est disponible sur get have et je vais inclure un lien vers elle dans le projet sur, Mais vous l'ouvrez. Voyons si vous allez à Tween O J s. Ceci est la page que vous viendrez à vous et puis vous et appuyez sur la source ici et puis entre A néerlandais et et vous pouvez frapper rock et vous devriez être en mesure de tout sélectionner en appuyant sur et tenant sur l'écran. Cela pourrait être juste un peu ennuyeux sur IOS, mais avec assez de patients, je pense que vous pourriez le faire. Je vais copier tout cela et puis de retour dans Kota et aller taper sur la petite icône de boîte en haut à gauche et puis je vais frapper le plus en haut à droite du code, Un écran et frapper un nouveau fichier J'ai un problème entre point Js partout dans le cas et creed Et puis je veux taper sur le top éditeur de Tween dodgy dans Kota Tap et coller Et il semble que j'ai tout va bien et je vais frapper sauver dans le haut, non ? Et puis je vais taper sur Tween Duchy s en haut et il a fermé la duchesse de Tween. Donc, nous allons revenir à l'index dot html Et c'est juste comme ça que vous incluriez une autre bibliothèque de script de travail Donc juste au-dessus de notre fichier principal dot Js. Je vais dire que le type de script est égal à barre oblique JavaScript Force égale citation que barre oblique oui, ouvrez cela. Je vais enregistrer cela et ensuite revenir vers vous sur le fichier de script Java. Et il y a quelques endroits où nous devons éditer ça. Revenons à notre image ici. Assurez-vous que ça marche. Ok, donc je ne vois pas où ça va commencer. Genre de conceptuellement est lorsque vous relâchez le toucher ou la souris. Donc c'est dans notre fonction de geste final, qui est juste ici. Donc, vous allez supprimer le pointeur point exe et le pointeur dia y est égal à zéro de ces deux lignes . Et au lieu de cela, vous allez dire entre capitales et ensuite nous allons dire que sont sous la moyenne soulignée est égale à de nouvelles capitales battables. Un couple de sucre qui à et merci zéro Pourquoi ? C' est un héros. Support bouclé, 300 princey. Facile. Je veux dire effrayé. Je pense que c'est juste. Oui. Ok, donc fondamentalement ce que cela fait, c'est que lorsque vous arrêtez de toucher ou de cliquer sur l'écran, cela va démarrer un nouveau Tween qui sera automatiquement mis à jour dans notre boucle de rendu. Nous devons donc revenir à notre boucle de rendu, qui a été hard rock et dysfonctionnement ici. Donc juste en dessous de la partie où vous effacez le contexte oh, nous sommes plutôt bien connus. C' est mort. Nous allons juste le dire, et nous allons dire cette date et je pense que c'est tout ce que vous avez à faire. Donc, nous pourrions enregistrer et puis actualiser la page, puis vous la déplacer et ensuite laisser aller. Vous pouvez le voir maintenant. Ça rebondit bien, donc tu n'as pas à faire ça. C' est facultatif, mais je pense que c'est un peu plus agréable. Ça ne se sent pas tout à fait cassé quand tu laisses aller. Hum, et vraiment, c'est à ce sujet. Oh, j'espère que vous avez apprécié ça. Faites-moi savoir si vous avez des questions dans la section de discussion. Je, malheureusement, ne peux pas aider tout le monde avec tout leur code comme je l'ai mentionné précédemment. Mais si vous avez des questions spécifiques, assurez-vous de vérifier le code que j'inclurai et faites-le moi savoir. Et merci beaucoup de travailler 11. Soutien Support 1: Hé les gars. Donc je voulais juste te donner une mise à jour rapide depuis que j'ai eu un West 13 et que j'avais 13 ans est sorti . J' ai eu quelques questions sur la façon de faire fonctionner le mouvement du gyroscope. Apple a changé cela avec les derniers systèmes d'exploitation. Donc, si vous vous souvenez de la leçon précédente, j'ai dit que vous devez aller dans les paramètres et activer un commutateur là pour le faire fonctionner. Trois bonnes nouvelles, c'est que tu n'as plus à faire ça. La mauvaise nouvelle est que vous devez ajouter un peu plus de revêtement pour que ce travail fonctionne maintenant. Mais je pense que dans l'ensemble, c'est une meilleure solution que Waas. Donc, c'est en fait assez rapide. Donc j'incline mon iPad. Vous ne pouvez pas voir ça, mais l'image de droite ne bouge pas du tout, et ce n'est pas ce que nous voulons. Donc, cela commence juste par la toute fin de l'exemple de code que j'ai posté dans la ressource est des produits et des ressources de section. Et tout en bas de votre fichier principal point Js, vous allez juste ajouter une ligne qui dit point de fenêtre à l'écouteur d'événement, assurez-vous de faire attention à la capitalisation sur ces choses telles fin et ensuite fonctionner. Vous fermez ce point-virgule et nous allons juste dire à l'intérieur de cet océan activer et ensuite nous devons écrire qui activer les fonctions de mouvement Nous allons fonctionner et machine capable . Et puis dans ce cas, nous allons juste dire si nous allons vous pointer la station coréenne sur, puis la complémentation de l'appareil et demander la permission et fermer ça avec, um entre parenthèses ici, et assurez-vous que vous obtenez le capital d au début de cela sur le capital appartenant au Capitole. Vous ceci est un intégré, je ne sais pas ce truc construit dans la chose de construction dans votre navigateur Web . Donc, vous devez vous assurer que si vous obtenez la mauvaise capitalisation, cela ne fonctionnera pas pour enregistrer cela. Et puis si je vais rafraîchir ma page Web ici, puis je fais basculer mon iPad et toujours rien ne se passe. Mais quand je tape sur l'écran, il affichera ce petit message qui dit, Je voudrais accéder au mouvement et à l'orientation, donc je vais frapper, permettre. Et maintenant, comme je l'ai dit à mon iPad, vous pouvez voir qu'il fonctionne à nouveau. Eso, tu peux, je le fais juste en fonction du toucher. Et c'est cette partie de l'écouteur d'événement publicitaire ici. Et ça veut dire juste que quand tu toucheras l'écran, dès que tu lèveras ton doigt, ça va courir. Et vous pouvez ajouter un mais dans ou quelque chose comme ça, notre autre façon d'activer cela. Donc, sur mon site Web, si vous regardez certains d'entre eux, j'ai un petit bouton qui indique Activer l'accès à l'orientation. Il y a beaucoup plus de CSS impliqué dans cela. Donc je ne vais pas m'embêter pour l'instant, mais c'est probablement une façon un peu plus évidente de faire les choses. Mais pour l'instant, cela fonctionnera. Mais vous le savez. Si vous voulez activer cela d'une autre façon, alors juste une touche de fin. Vous ne pouvez pas le faire automatiquement. C' est le piège ici. Vous ne pouvez pas simplement l'exécuter dès que la page se charge. Il doit être quelque chose avec lequel l'utilisateur interagit qui le fait fonctionner. Eso qui pourrait être un clic de pression. Je ne pense pas que tu puisses le faire sur Swipe. Vous pouvez l'essayer si vous voulez. Mais, euh, oui, donc j'espère que ça aidera un peu de vue et, euh, bonne chance. Faites-moi savoir si vous avez des questions 12. Débogue de base: Hey, donc je voulais juste passer un peu de débogage là-dessus tant que je fais des mises à jour de la classe s. Oh, j'aurais dû passer plus à l'origine, mais il y a quelques façons faciles de comprendre ou au moins obtenir une sorte d'indice de l'endroit où votre code va mal. Eso surtout, nous avons utilisé notre code côte à côte. Donc, l'application de l'éditeur de code est sur le côté gauche et safaris sur le côté droit. Mais pour utiliser ce bug d dans l'éditeur de code ou quoi qu'ils l'appellent maintenant, euh, vous avez besoin que Teoh exécute réellement votre code dans leur aperçu intégré. Hum, donc dans votre fichier html point d'index, vous pourriez juste appuyer sur ce globe oculaire en haut. Um, je pense que pour l'ouvrir et vous soutenir taper et tenir une frustration. Faites-le dans une leçon précédente. Mais tu viens de se passer une fois et tu peux voir que tu as ce joli petit aperçu en cours dans ta moitié sur Ben en haut, non ? Juste en dessous de la coche. Il y a un rectangle avec des poils croisés dedans. Si vous appuyez dessus, vous verrez que vous obtenez ce grand rectangle gris avec quelques petites 20 0 choses en haut à gauche de celui-ci s Donc cela s'appelle votre console. Celui de cette application n'est pas fantastique. Il y en a beaucoup mieux dans les navigateurs de bureau. Mais c'est l'une des meilleures options sur l'iPad. Donc, en ce moment, vous pouvez voir que je n'ai aucune erreur, ce qui signifie que mon code fonctionne bien, ce qui est génial. Beaucoup d'entre vous, quand vous rencontrez des problèmes, auraient probablement un tas d'Ares ici. Je vais te montrer à quoi ça ressemblerait et comment trouver quelque chose . Allons donc changer quelque chose ici. , Par exemple, disons que j'ai orthographié votre initiale comme initiale de parieur, et j'espère que ce n'est pas un mauvais mot, euh, euh, dans une langue que je ne connais pas ou quelque chose comme ça. Mais si je retourne à mon violon index, juste frapper, rafraîchir en haut, toujours pas d'erreurs. Mais une fois que j'ai tapé sur l'écran pour commencer à se déplacer soudainement, il est plein de rouge dit, en disant, Impossible de trouver des initiales de pointeur variable. Donc, cela me dit dans mon javascript quelque chose ne va pas avec ce point. Votre variable initiale . Donc, je retourne au script Java. Fondamentalement, vous pouvez faire une recherche ici ou quelque chose et juste essayer de trouver ce qui se passe ou jusqu'à ce que l'ordre commence essentiellement et sur les navigateurs de bureau beaucoup du temps, je vais vous dire quel numéro de ligne le problème est aussi sur les chauves-souris, ces petits chiffres sur le côté gauche de votre écran. Mais je veux juste arranger ça. Retourne. Et puis aussi, si vous vous retrouvez avec un consul complètement rempli d'erreurs comme celle-ci, vous pouvez appuyer sur notre type clair en bas de celui-ci avec votre petite fonction. Parenthèses, compris. En y entrant, tout effacera pour vous. Ouais, donc c'est juste des conseils de débogage très rapides. J' espère que ça aide quelqu'un, euh, merci.