Comment rendre un document HTML5 Canvas Adobe Animate CC 2019 réactif sur WordPress

1. Intro: dans ce tutoriel, je veux vous expliquer comment créer une animation de base dans adobe animate CC 2019. J' ai mon célèbre petit carré rouge ici sur Ce que je veux faire est que je veux le sortir d'adobe, animer et importé dans WordPress. J' ai un exemple ici du produit fini. Il s'agit d'un fichier d'animation Adobe entièrement réactif avec ce petit carré rouge se déplaçant à travers l' écran. Comme vous pouvez le voir, je peux le dimensionner. Aiken la taille. Il est entièrement réactif. Et si je fais mon navigateur encore plus grand, il reste juste en place. Je vais vous emmener à travers le processus d'exportation hors d'adobe animate et dans WordPress . J' utilise Virgin 5. Donc, je vais créer un fichier Adobe animé html cinq et télécharger dans le WordPress que vous pouvez utiliser sur votre site Web. Commençons 2. Configurer votre projet Animate HTML5: accord, juste ne vous fera pas savoir avant d'aller trop loin que je cours Adobe animate CC 2019. Donc, si vous lisez 2018 assurez-vous de le mettre à jour à la version des millions. Si vous avez Creative Cloud, il sera mis à jour presque automatiquement. Alors soyez conscient. Tout ce que je fais est dans la toute nouvelle version d'Adobe Animate CC 2019. Emmenons le docteur là-bas et sortons du chemin. La première chose que je veux faire lorsque j'ai configuré mon design est que je veux m'assurer que j'ai vérifié la plate-forme Tapez ma version d'Animate pour une raison quelconque, et cela pourrait être la vôtre ou ne pourrait pas être la vôtre Toujours par défaut Action Script 3.0 script 3.0. Fondamentalement mort en 2012 quand Steve Jobs, quand il était encore en vie, fondamentalement dit, flashs morts et tué la plate-forme. Donc l'argent, C'est ce qu'il y a sept ans, Donc, fondamentalement ce qui s'est passé était Adobe a dû brouiller et créer un nouveau format pour Adobe animate, et ils l'ont fait sous la forme de HTML cinq toile. C' était long à venir, mais j'ai l'impression que c'est génial. Et j'adore ce qu'ils ont fait jusqu'à présent. Ok, donc le premier à m'assurer que je veux dire script d'action 3.0 dans le canevas HTML cinq. Maintenant, vous pouvez définir la valeur par défaut si vous le voulez, mais pour mon design et aussi pour les mathématiques faciles parce que je suis un baccalauréat en beaux-arts majeure. Donc pour moi, les maths peuvent être difficiles. Je dirai 1000 par 500 plus tard. Rahmani a utilisé cela comme le rapport ou le pourcentage de avec deux hauteur. C' est un 50%. Donc pour moi, c'est facile de maths. Si vous avez 1000 sur 1000, c'est tout à fait bien. Mais il suffit de prendre note de cela pour en bas de la route. Je vais rester avec 1000 par 500 html cinq toile et créer. Et c'est votre configuration de base pour adobe animate en vous assurant qu'il indique le cannabis ici si vous créez le mauvais format. Donc, si je choisis l'action thrips 3.0, qui est essentiellement un fichier rapide, cela ne dira rien ici. Il ne dira pas toile. Donc, si vous ne voyez pas le mot canevas, il est configuré de manière incorrecte. La raison pour laquelle je m'en sors maintenant c'est qu'il n'y a aucun moyen de changer d'action. Script trois. C' est en gros que tu dis juste quelle version de Flash. Donc, si vous configurez cela de manière incorrecte de canvas à Swift, il n'y a pas de retour en arrière et vous devez redémarrer votre conception entière. Alors soyez conscient de cela dès le début, et je fais un gros point pour m'assurer que vous sélectionnez canevas par rapport au script d'action 3.0 ! 3. Configuration pour une animation de base: Très bien, créons une animation de base dans Adobe Animate CC 2019 dans le canevas HTML cinq. Laisse-moi fermer la version non toile. Je vais dessiner un petit rectangle. Peu sont pour le rectangle. Et dans mon exemple, j'ai utilisé un carré rouge, donc je vais garder ce regard rouge, je vais maintenir la touche Maj enfoncée et juste dessiner un carré simple maintenant, animé je ne peux pas juste le garder dans ce design. Je dois le mettre dans un clip. Donc, je vais en fait double-cliquer sur ceci parce que la raison pour laquelle je double-clique sur cette vieille technique de l'école et je vais vous le montrer si je mets un coup autour de mon design ajoutons comme un trait orange à cela et je dessine ce rectangle Seriez-vous probablement pas réaliser Oups, Son Faisons-le de cette façon Si ce coup était sa taille massive Si je seul clic, je ne reçois que le remplissage. Mais si je double-clique, je suis en conflit avec le Phil et le coup. C' est en fait d'une manière, d'une manière, d'une manière, d'un chemin, d'un chemin, d'un chemin, d'un chemin, d'un chemin, d'un chemin C' est combien de temps je retourne à l'intérieur de slash animé flash que si vous double-cliquez sur votre dessin vous conflit Whoa, là, ma petite souris magique sur les stéroïdes. Je peux double-cliquer et obtenir le Phil et le coup. Depuis que je n'ai pas un Phil, j'ai toujours DoubleClick d'habitude juste au cas où j'oublierais donc je double-clique sur ce beaucoup. Donc, si vous entendez un petit double clic en arrière-plan juste notes ce que je dio Donc je vais contrôler Click, et je vais descendre pour convertir en symbole. J' ai en fait un clavier de la vieille école ici sur mon bureau d'ordinateur qui a en fait les touches F. Et j'aime ça parce que les clés f traînaient toujours dans animate des Macromedia et des futurs jours Wave. Merci, Adobe, d' avoir suivi votre fameuse règle selon laquelle une fois qu'il est entré, il ne sort jamais. Mais hélas, je digresse. Je vais dire « convertir en symbole » et je vais dire « Place Rouge » Maintenant, vous pouvez noter que le nom du symbole pourrait être majuscule. L' espace en minuscules est ce que vous voulez. C' est interne. On dirait de s'inquiéter pour le nom juste ici. Nous serons inquiets pour les noms de fichiers, mais pour juste ici peut manger ce que vous voulez. Je vais choisir le clip vidéo le bouton et le graphisme d'une époque révolue dans les années 90 et les deux milliers d'enregistrements de clips Say Ok, ok . Maintenant, si vous remarquez quand vous cliquez sur ce carré rouge, vous n'obtenez pas le petit point Vous obtenez juste une ligne bleue avec le point d'enregistrement étant en haut à gauche. Je vais maintenant descendre la couche d'orteil un et double clic. Maintenant, ici dire important a changé de la nouvelle version d'Animate. Si je tape Red Square et que j'ai un espace là-dedans, il va en fait convertir en trait de soulignement. Donc ça va être lu Underscore Square. Il y a une boîte d'alerte qui apparaît, mais j'ai dit depuis : Ne me le montre pas maintenant. Bien sûr que j'enseigne ce cours, et je voulais qu'il apparaisse. Mais il vous avertira si vous n'avez pas utilisé animate avant ou si vous mettez un espace là-dedans, qu'il ne permettra pas d'espaces. C' est une toute nouvelle chose qui a changé dans adobe animate CC 2019. Donc ici, je vais dire Red Underscore Square, même si c'est la même chose juste pour m'assurer que je suis au bon endroit. Voici maintenant comment vous créez le cadre d'animation. Un va être là. Je vais passer comme le bureau du cadre 1 20 pour être un mouvement lent, et j'ai des touches F sur mon clavier. Pourtant, si vous ne le faites pas, vous pouvez utiliser l'une des quelques façons si j'appuie sur la touche F six qui crée ce qu'on appelle une nouvelle image clé . Si je l'annule, je peux également contrôler, cliquer et dire, insérer le cadre clé. La chose unique est qu'il ne montre pas la clé F six ici, mais je peux toujours voir insérer le cadre clé et c'est juste là et la troisième voie monte. Insérez la chronologie et insérez. Eh bien, il est là, cadre clé maintenant ici disant unique. Ça ne montre toujours pas la clé F 6. Cependant, la clé F six fonctionnera toujours. Prenez la clé Phantom F six que je viens d'apprendre de deux décennies d'utilisation d'adobe slash animate , slash slash avenir. Splash à la question trivia comme toujours revenir à plus tard. Donc je vais créer un cadre clé. Et au moins, dans mon cas, à 1 20 et juste perdre d'avant en arrière. Je vais faire une image clé non encadrée à 40 F 6 pour moi. Mais vous pouvez également contrôler le clic, insertion, image clé ou l'insertion de la timeline et de l'image clé. Vous pouvez faire l'une des trois choses. J' allais mettre trois cadres clés de base, et maintenant je vais déplacer le carré d'avant en arrière. 4. Créer une animation classique: d' accord. Maintenant que nous avons mis en place nos trois cadres clés, déplacons ce carré d'avant en arrière. Ce que je vais faire, c'est que je vais contrôler Click ou je pense, sur le PC C'est Ault. Si vous connaissez la réponse, veuillez me faire part des commentaires. Je suis une personne Mac, donc je suis toujours deviner quand il s'agit du côté PC en termes de raccourcis clavier et de contrôles ou si vous avez une souris qui est deux clics de souris, je n'ai que le Magic Mountain n'en a qu'un, mais certains les souris doivent le faire. Vous pouvez faire un clic droit de la souris et tirer ce menu contextuel et je vais dire créer Tween classique . Maintenant, si vous avez utilisé adobe animate ou flash dans le passé, vous êtes habitué à une couleur plus claire violet. Ils ont changé la couleur. Je ne sais pas vraiment pourquoi. Peut-être qu'une lettre était juste fatiguée de la pourpre ennuyeuse après 24 ans. Ils sont donc partis avec une nuance plus foncée de pourpre. Ne vous inquiétez pas si vous êtes habitué à cette nuance différente, c'est un bon, mes deux cents je ne changerais pas, mais encore une fois, je ne travaille pas pour Adobe. Donc je vais faire va maintenant avoir cette animation de base. Si je glisse ce retour sur le 20, vous remarquerez que rien ne bouge. C' est parce que l'image clé sur l'image 1 et l'image clé à 1 20 sont exactement les mêmes. Mais si je Magic Mouse Bonjour là. Si je bouge ça, je tiendrai la touche de changement. Cliquez et faites glisser. Et maintenant, si je retourne pour encadrer une note qu'elle se déplace toujours si lentement, je ne peux pas la touche Entrée de mon clavier pour prévisualiser la vitesse et appuyer à nouveau sur la touche Entrée pour arrêter et elle bouge. Maintenant je vais faire ensuite, c'est que je vais répéter ce processus. J' ai une souris magique très déclencheur, apparemment aujourd'hui. Donc je vais contrôler le clic, au moins sur le mien. Je l'ai sur 1 20 ans. Peut se sentir différent Si c'est plus rapide, plus lent, je vais dire créer un Tween classique et parce que pour 40 matchs à la première image, il va juste rebondir et aller et retour. Donc, si j'avais la clé d'entrée, ça va prendre quelques secondes, mais ça va aller de l'arrière droit à gauche et ça va invariablement boucler encore et encore et encore. Maintenant, une fois de plus, Aiken, dis boucle. Si je veux prévisualiser ça, je ne vais pas à qui je devrais désactiver ça. C' était une mauvaise idée. N' essaie pas de faire de nouvelles choses entre ta routine habituelle, Hayden. Donc je ne vais pas installer cette boucle. Je reprends ça. J' allais le garder comme ça, mais par défaut, ça va boucler autour et autour jusqu'à ce que je dise stop. Ou j'ai suggéré de ne se produire qu'une fois. Je veux que ça joue encore et encore, donc je vais le garder comme ça. Mais c'est ainsi que créer une animation de base à l'intérieur d'adobe animate CC 2019. 5. Enregistrer et prévisualiser l'animation: Très bien, tout est bien et bien. Mais sauvegardons ce fichier. Nous ne l'avons pas encore fait. Et nous allons en prévisualiser. En utilisant un navigateur de notre choix, je vais enregistrer et enregistrer. Maintenant, sachez que si vous l'enregistrez pour la première fois, que la sauvegarde et la sauvegarde, comme c'est techniquement la même chose, donc je vais commander Asa. Je suis toujours fan de raccourcis. J' ai un dossier appelé Animate Exemple, et je vais l'appeler un nouveau tiret rouge carré. Maintenant, notez que j'ai également utilisé ce sont des lettres minuscules importantes et pas d'espaces. Cela finira par devenir mon nom de fichier quand il s'agit de télécharger le travail. L' ordinateur à la fois PC et Mac est pas sensible que, ce qui signifie que vous pourriez courir dans il est appelé un faux positif. signifie que l'ordinateur ne se soucie pas si vous avez des lettres majuscules ou minuscules. Le Web, en particulier les serveurs Web. Là où on va mettre ce travail est sensible à K. J' ai donc une règle dans ma classe quand j'enseigne que tous les noms de fichiers sont toujours en minuscules. Vous remarquerez quelques choses à l'avenir. Nous utiliserons les majuscules. Mais pour la plupart, tous les noms de fichiers seront toujours en minuscules. Et donc et vous ne devriez pas avoir d'espaces. Donc, et si vous voulez obtenir super technique, vous devriez également pas avoir un Astérix est ou un personnage spécial. Alors pensez à des lettres, des chiffres et de prendre la place des espaces, vous pouvez soit utiliser un tiret ou en souligner ces règles d'outil économique que j'ai où je dirai nouveau tiret, Red Dash square ou nouveau soulignement Red Underscore Square. Alors sauvegardons ce fichier. Et maintenant que c'est sauvé, je vais prévisualiser tout ce design. C' est une ère de rétroaction, une nouvelle fois. Je suis une commande et la touche Entrée. Et quand ils le font sur mon autre écran d'ordinateur, je le déplace. J' ai un carré rouge qui va et vient. C' est ce qu'on appelle un hôte local, donc il joue sur mon ordinateur local, et il peut ou non évoluer, ce qui n'est pas le cas. Donc, si vous le remarquez lorsque je déplace mon navigateur, il ne s'adapte pas du tout. Mais ce n'est que la première étape que je veux enregistrer dans l'aperçu. cours de route, plus le temps qui peut prévisualiser signifie que plus je peux réparer rapidement au cas où je gâcherais quelque chose. Et lorsque vous construisez un revêtement de conception, vous passez presque 90 % de votre temps à déboguer et 10 % à concevoir. Donc, chaque fois que, pour faire des choses qui nécessitent 567 étapes, je vérifie toujours peut fonctionner rapidement pour m'assurer que je ne manque pas une étape ou que les choses ne fonctionnent pas . À la toute fin. J' allais m'assurer tout au long du processus que ça marche, comme vous pouvez le voir bouger d'avant en arrière. Donc ce que je me demande ensuite, c'est que je vais modifier quelques réglages, et je vais rendre ça réactif parce que pour l'instant ce n'est pas réactif. Il ne bouge pas. C' est comme ça. Et sur le Web, tout devrait être réactif. Il ne devrait pas être statique dans cette nouvelle ère du Web, où nous avons des tablettes, ordinateurs et des téléphones portables, qui sont presque de taille de tablette ces jours-ci. Mais quand même, je veux m'assurer que cela se déplace d'avant en arrière sur toutes les différentes plates-formes, alors faisons-le ensuite 6. Rendre le projet réactif et aucune feuille sprite: Très bien, passons un peu de temps dans les paramètres de publication parce que l'animation fonctionne. Je vais revenir à la chronologie, mais je dois faire quelques ajustements que je veux faire pour m'assurer que cela est pleinement réactif et exporte de la meilleure façon possible. Je vais dire fichier dans les paramètres publiés et changer quelques choses dans mes paramètres publiés . Je vais d'abord passer aux paramètres de l'image. Je ne veux pas exporter le document en tant que texture car je veux que cela exporte la forme basée sur le vecteur et ne se transforme pas en images. Cela dit, une meilleure performance, une plus grande taille. Je comprends que c'est commun. Décochez que lorsque j'ai décoché les documents de texture, il m'a ensuite demandé d'exporter des images en tant qu'actifs. Et pourriez-vous les combiner avec des images malgré les tricheurs ? Je vais décocher ça aussi. Je n'ai qu'une forme basée sur un vecteur, mais c'est un peu plus avancé pour entrer dans. Mais mon truc est comme avoir ce qu'on appelle un système passé, signifie que je ne veux pas animer pour ajuster, changer ou regrouper mes images dans ce qu'on appelle une feuille de sprite. Je voulais le laisser tranquille, donc je m'assure toujours de décocher Le document d'exportation est la texture, et j'exporte les actifs d'image est également désactivée. Maintenant que j'ai les paramètres de l'image non cochés, je vais passer en revue la base et c'est important. Ce que je veux faire, c'est que je veux être réactif. Donc, c'est en fait un outil très puissant. Rendez réactif à la fois et mettez à l'échelle pour remplir la zone visible en vue. Ce que cela signifie, c'est si j'ajuste le navigateur soit par avec ou par hauteur, il va remplir de n'importe quel côté il touche en premier. Donc, je veux dire, faites réactif à la fois et à l'échelle pour remplir la zone visible en vue. Je vais dire, publiez sur celui-là. Et il publie maintenant mon travail là où j'ai enregistré mon fichier. Allons voir que je vais aller dans un autre écran pendant que je parle. Et c'est là. Maintenant, dans un exemple précédent, je l'ai fait pour une classe différente. J' avais la Place Rouge, donc je vais me débarrasser de la Place Rouge, de la Place Rouge et de la Place Rouge, et je n'ai plus besoin d'images. Donc, si je double-clique sur le nouveau fichier html Red Square, laissez-moi fermer mon édition précédente Maintenant, vous pouvez voir se déplacer d'avant en arrière. Mais voici quelque chose d'important. La nouvelle version évolue maintenant en fonction de l'endroit où elle se trouve sur le navigateur. Maintenant, si vous avez vu dans la toute première vidéo, j'ai mis des petits carrés bleus et tout vous a montré aussi. Ce que les petits carrés bleus ont fait, c'est juste montrer les coins de mon dessin. Mais pour cela à peu près un Ok, j'ai juste un carré rouge rebondissant d'avant en arrière. Et comme je redimensionnais mon navigateur en fonction de l'avec ou de la hauteur, il reste en vue. Donc maintenant que je n'ai pas d'animation et que je l'ai évolutive, passons maintenant ces morceaux sur notre fichier WordPress et la longueur, um, up. 7. Téléchargez votre projet Animate sur votre site Web: d' accord. Maintenant, cela nécessite un peu de travail de votre part, parce que chaque site Web a mis en place un peu différemment. Donc ce que j'utilise en utilisant un truc appelé Cyber Duck. C' est un petit outil gratuit, fois pour Mac et PC, mais dans Cyber Duck j'ai juste ici vous pouvez voir sur le cyber canard. Là, il est de garder petit canard. Laissez-moi déplacer le docteur, Cyber canard vous demande de vous connecter à votre site web. Et surtout, si vous utilisez un wordpress auto-hébergé, vous aurez accès à cela. Mais cela peut prendre un peu de travail pour déterminer quels sont vos paramètres FTP. FTP signifie protocole de transfert de fichiers et tous les serveurs auto-hébergés de base avec WordPress devraient avoir cela à moins que votre mot ou que vous êtes société d'hébergement ne vous bloque. Donc, soyez conscient à cette étape, vous devrez peut-être mettre la vidéo en pause pendant que vous allez déterminer quels sont vos paramètres. Mais presque tous les outils FTP. Donc, dans Cyber Doc, ça va me demander trois choses. Et si vous utilisez sftp, vous aurez quelques configurations différentes ici. Il y a aussi des trucs pour les fenêtres pour le feu arrière. Pour Amazon. Vous avez quelques morceaux différents ainsi ici avec Dropbox, Google Drive, Microsoft toutes ces bonnes choses. Mais j'utilise le protocole FTP de base ou de transfert de fichiers. J' ai déjà mis mes informations à partir d'un compte Nautilus Designs, et j'ai mon FTP configuré et je ferme cette fenêtre. Je peux voir cela dans mon dossier d'accueil, Mon dossier de niveau de base de WordPress. J' ai un couple de dossiers, donc j'ai une chose appelée WordPress cinq pour juste ce but de démonstration. Mais c'est là que mon WordPress a déposé en direct et respirer. Il est important de ne pas toucher à l'un de ces fichiers ou WordPress pourrait totalement planter. Et je suis sérieux. D' accord. Ce que je veux faire, c'est que je veux créer un nouveau dossier, bien que l'intérieur de Cyber Ducati soit les mêmes frappes que le Mac. Donc, commande décalage ennemi Macintosh, où il pourrait être contrôlé sur le PC. Si je suis incorrect sur le PC, alors s'il vous plaît laissez-moi savoir. Je vais créer ça. Mais je vais aussi suivre mes règles pour les noms de fichiers. Je vais dire animer en minuscules parce que c'est la photo. Toutes mes animations d'Adobe Animate vont aller. Je vais dire créer et up pops et nouveau dossier Notez que cela n'affectera aucun projet est long. Vous n'avez pas de nom WordPress appelé Animate dans Salonika Page ou un message. Vous pouvez également nommer ces fichiers de tiret d'animation ou animer cinq fichiers HTML, juste au cas où vous pourriez avoir quelque chose appelé animate. Je ne le fais pas. Donc je suis sûr de le nommer juste animer. Je vais l'enfermer. Donc j'ai eu la photo appelée Animate, et je vais double-cliquer et aller dans ce dossier. Comme vous pouvez le voir ici, il dit que les sites Web slash WordPress pointillé cinq barre oblique animent pas d'espaces et pas de lettres majuscules . Ce que je voulais ensuite, c'est que je vais traîner trois choses ou je devrais dire deux choses. Ils n'ont pas de dossier d'images. Mais si vous n'avez pas de dossier d'images que vous utilisiez ou si vous avez apporté un J peg ou un cadeau , serait les deux seules images peut-être apporter un fichier PNG dépendant de ce que vous apportez que vous aurez un dossier d'images. Donc, si vous avez cela, sélectionnez cela. Mais je vais sélectionner juste le script Java et le fichier HTML je n'ai pas besoin du f l A. Si vous voulez, vous pouvez totalement télécharger le fichier f l A si vous voulez juste le garder pour garder en toute sécurité sur votre serveur. Mais nous n'allons pas utiliser ça, donc le f l A est votre dossier de travail 4. Adobe anime l'extension F L. Une extension est toujours là, même si elle est animée. F l un Flash. Les choses ne changent pas. Alors je vais télécharger ce nouveau carré rouge. Notez les lettres minuscules, le non-espace pour que je puisse le faire glisser vers le haut dans mon logiciel FTP. Cette affaire Cyber Duck Laisser aller transferts. Hey, le téléchargement est terminé. J' ai maintenant téléchargé de nouveaux rouges. Où html dans le nouveau script de point carré rouge Js pour Java. Présentons maintenant cela sur un navigateur Web. 8. Prévisualisation de votre projet HTML5 en ligne: rappelez-vous que j'ai dit jusqu'à tester les choses très rapidement comme faire des choses étape par étape. C' est une de ces choses. Donc, dans mon FTP pour ma configuration, mon dossier est mon nom de domaine dot com dot net info dot quel que soit les sites Web slash barre oblique WordPress tiret cinq barre oblique animer slash nouveaux rouges où ces barres obliques indiquent les noms de dossiers . Donc, dans ce cas, esprits conceptions Nautilus je vais dire des sites Web de tiret, Aiken type correctement sites Web tiret WordPress, tiret cinq , tiret, animer et puis pas désolé, pas tiret Tous ces fois slash dans ce cas, esprits vont être nouveau tiret rouge carré que html et f un aperçu il va soit vous donner une bonne réponse ou si je délibérément peut-être orthographié avec des problèmes de majuscule, et il dit, Ouops, cette page n'a pas pu être trouvée en utilisant votre air pour, page 04. Donc, notez que c'est là que la sensibilité K intervient. Le cul du capital est différent d'un S minuscule est long que vous pouvez voir votre projet se déplacer d'avant en arrière, vous êtes sur la bonne étape pour maintenant mettre cela dans un WordPress. La première étape est téléchargée la deuxième étape consiste à le tester. Et maintenant, notre troisième et quatrième étape est d'écrire un peu de code. Ne vous inquiétez pas. Ça va être correct et intégré à notre mise en place WordPress. 9. Écrire CSS dans WordPress: d' accord. Notre prochaine étape est maintenant le remorquage des orteils. WordPress, et d'écrire un peu de CSS pour faire ce travail. Maintenant, tu sais, où je suis. J' utilise nous regardons les mises à jour. Je suis dans un WordPress 5.0 point trois. Cependant, j'ai fait une chose un peu différemment. Autant que j'aime la nouvelle version des messages et pages WordPress ce qui s'appelle Gutenberg  ? J' ai une affinité avec les classiques. Et donc j'ai installé une prise dans cette conception. Yosi en haut. Il y a une nouvelle version. Tu sais quoi ? Je suis sur la mise à jour. C' est toujours nerveux quand je fais des choses en direct à la caméra et j'espère que ça va marcher. Mais j'ai effectivement installé un plug in appelé l'éditeur classique pour ce tutoriel. Beaucoup d'entre vous seront sur une ancienne version de WordPress, mais je sais que vous pouvez le faire à la fois avec la nouvelle Virgin of Version cinq, qui a une nouvelle mise en place de payé est dans les messages, mais j'ai installé cette chose appelée l'Éditeur Classique. C' est juste tout. J' ai mis un morceau de plus en notant que j'utilise le thème de base 2017. Donc, vous pourriez avoir un look totalement différent de votre design si vous avez un thème différent. Mise en place différente. Mais j'ai un design assez basique établi dans WordPress. Donc, je veux faire est que je veux éditer mon CSS maintenant CS esque vans pour les feuilles de style en cascade. Certains thèmes, en fonction de ce que vous avez installé, auront une zone CSS personnalisée. Dans ce cas, j'utilise la version de base 2017 et donc je n'ai pas la possibilité d'ajouter une zone CSS personnalisée dans un thème quelque part ici. Donc je dois aller dans mon éditeur pour que ça arrive. Si vous faites cela pour la première fois, vous recevrez un message d'avertissement qui vous dit : «  Hé, Hé, soyez prudent, vous touchez vos fichiers. Donc, soyez prudent Donc, vous pouvez également éditer votre CSS Ce tiré construit dans l'éditeur CSS. Je vais en quelque sorte un peu vieille école avec ce design et juste aller avec le CSS de base. Encore une fois, cela pourrait aller quelque part différent dans votre thème. Sachez donc que ce n'est peut-être pas le même endroit, mais à des fins de démonstration. J' utilise une version très dépouillée de WordPress de Onley en utilisant le paramètre par défaut. Donc, dans cette version 2017 dans la feuille de style, je suis descendu comme la ligne 4332. C' est beaucoup de CSS. Et ici je vais descendre comme la ligne 43 34 monotypes, euh, code. Je vais taper, des règles et whoa, ce n'est pas comme ça que tu as mes clés. Animer le conteneur. Maintenant, notez que dans les versions précédentes des noms de fichiers, j'ai dit ne pas utiliser de lettres majuscules. C' est à vous de décider. J' ai une façon ancienne de programmation où j'ai le premier mot quand il s'agit de CSS. Cela vient en fait de Flash Way, au début, en fait, comme le milieu des années 90 aux deux milliers où était considéré comme l'affaire Camel dans affaires de chameau. Premier mot minuscule. Deuxième mot, première lettre majuscule comme une bosse de chameau. Donc tu me verras faire ça. Dans tous mes exemples de CSS et CSS va avec HTML. Donc, cette période représente ce qu'on appelle une classe. Comme je l'ai dit, un peu de codage. Mais c'est environ six lignes. Et ne vous inquiétez plus pour ça. Quelqu' un pour dire conteneur d'animation période. Je vais frapper l'espace et je vais dire ouvert le support bouclé, qui est la clé à droite de votre crête et de changer le support bouclé s'ouvre et se ferme. Et ce que j'ai frappé la touche de retour il dans dense mon type et met le crochet serré d'un niveau dessous. Je vais dire position, colon relatif et semi-colon, et je vais vous montrer pourquoi c'est dans quelques lignes de manteau. Je ne vais pas lui donner un peu d'espace par défaut, donc je vais dire marge bas 10 p x point-virgule Cela donne juste un peu d'espace en dessous de votre animation pour n'importe quel type, tous les paragraphes, images à être en bas. Ceci est facultatif. Si vous ne voulez pas avoir un fond de marge, vous pouvez le retirer immédiatement. Le plus important, c'est qu'on a la position relative, donc je vais avoir 10 pixels ou 10 p x et le demi-côlon. Maintenant, descendez pour quelques lignes de plus et dites que le conteneur animé va taper Le même mot est construit ci-dessus, alors assurez-vous quoi ? Comment avez-vous écrit votre parole ici que c'est écrit la même chose en bas ? Je vais dire que je cadre et je vais vous montrer pourquoi dans la prochaine vidéo je vais dire que je ne cadre pas période majuscule Gardez tout en minuscules vous devez avoir I cadres orthographiés de cette façon exacte noté Tourner vert Si je fais majuscule je cadre fait rester vert qui devrait pas arriver Mais pour l'amour de ce but, gardons le cas inférieur je cadre et répéter le processus à nouveau Donc je vais dire support bouclé ouvert . Si je tape la bonne touche, on y va. Retourner la clé. Je vais écrire quelques lignes de code. Je vais dire position, Colon Absolu Si je peux l'épeler juste là c'est. Et semi, Colon que dans cette ligne, je vais dire zéro zéro gauche avec si je peux l'épeler à nouveau avec Colon. Wow, Mikey Taping Well, je parle n'est pas fort tout d'un coup. D' accord. Avec 100% et hauteur 100% et point-virgule que c'est tout le CSS Vous devez taper sur cet écran. Il y a une ligne de plus par type sur l'écran suivant. Mais disons ça. Donc nous comprenons comment cela fonctionne en CSS ou en cascade ce conteneur animé va s'asseoir dehors ou autour de mon animation, qui va être à l'intérieur de ce qu'on appelle un cadre oculaire. L' animation va alors se déplacer en fonction de la taille du conteneur d'animation, qui dit remplir l'espace de avec et la hauteur. Il ne semble pas comme un carré car avec un 100% et une hauteur 100%. Mais nous disons juste de remplir la case de tous les côtés et de s'assurer que la position est en haut à gauche et qu'il n'y a pas d'espace en haut ou à gauche. Donc, c'est presque juste réinitialiser les choses sur le Web. On réinitialise beaucoup. On n'aime pas les choses en haut à gauche. Vous pouvez les déplacer sur la route, mais c'est tout le code que vous avez à mettre dans votre zone CSS. Je n'ai pas mis dans l'éditeur CSS, et vous pourriez avoir une zone CSS personnalisée à l'intérieur de votre thème. Mais encore une fois, c'est la position du conteneur animé. Marge relative inférieure animer conteneur I position de trame. Absolute top zéro gauche zéro avec 100% et hauteur 100%. Notez que vous n'oubliez pas que vous cliquez sur Mettre à jour le fichier. Sinon, cela ne sera pas enregistré, et il n'y a aucun moyen de prévisualiser les paramètres tout à fait. On y arrive maintenant. Continuons et mettons dans notre conception en HTML et référençons les mêmes chiffres dans la prochaine vidéo 10. Écriture de HTML: d' accord, nous avons écrit notre CSS. Maintenant, allons dans leur page ou un post et lions ce nouveau carré rouge vers la presse Quand les pages que je vais dire ajouter de nouveaux et d'ici je vais faire est que je vais dire nouveau nouveau Red Square juste parce que pourquoi pas ? Allons nous amuser un peu. Maintenant, encore une fois, je suis dans le mode classique et si vous êtes ici, assurez-vous de passer du visuel au texte car cela a vraiment de l'importance dans la zone de texte. C' est essentiellement du HTML dans lequel Aiken tapez. Si vous utilisez la version Gutenberg de la nouvelle version de WordPress cinq, vous pouvez simplement changer votre réglage à partir du paragraphe deux html. Mais dans ce cas, je travaille avec l'éditeur classique en visuel et en texte. outre, selon que vous utilisez un thème ou non, vous pouvez avoir différentes options pour mettre du HTML dans cette conception. Mais pour cela, je vais m'en tenir à l'éditeur classique et au texte. Je vais écrire ce qui suit. Je vais dire moins que signer la classe Div. Alors rappelez-vous que nous avions cette période avant cette période dans le CSS dénote le mot classe off. Je dis classe égale et gâcher exactement le même conteneur animé que j'ai utilisé un C majuscule Je vais dire citation, fin, citation dans le style. Maintenant, un style est ce qu'on appelle un dans Lyon CSS Mais cela me permet de déterminer le ratio pour lequel je dois créer la boîte pour. Je vais dire que le style est égal à citation, citation et retour à l'intérieur de cette citation, je vais dire le remplissage du bas du tableau de bord dash un certain pourcentage. Quel pourcentage d'ici ? Mettre dans ce va plein cercle Si je retourne à Adobe Animate façon, chemin en arrière quand le avec dans la hauteur est un ratio Donc je vais taper ma calculatrice, vous montrer comment j'ai obtenu ça. Allons monter la calculatrice. On y va. Et j'espère qu'il s'affiche là. Je vais taper 500 diviser que par 1000 maintenant j'ai dit avant et comme le deuxième module que j' aime les mathématiques faciles et c'est pourquoi j'aime les mathématiques faciles. Le ratio est de 0,5 ou si nous multiplions cela par 100, nous obtenons 50%. Donc, je sais que si je reviens maintenant à ce code, ce pourcentage inférieur de rembourrage est de 50 parce que j'ai utilisé des mathématiques faciles. Le début à 1000 par 500. Ne notez pas. Vous avez peut-être un certain nombre qui n'est pas parfait. Donc, si vous avez, comme un calcul différent qui, disons, est comme 500 par 9 97 juste faites votre bâtard ou en gardant 51% sachant que vous aurez un peu d'espace dessous. Comme ça ne va pas parfaitement, je ne peux pas serrer 50,1 %. Je dois taper comme 51 ou 50 et perdre un espace chaque fois qu'un ensemble choses en place. Je pense à la taille réelle avec laquelle je travaille. Donc, c'est une petite discussion pour un calcul simple. Je suis au courant de ça. tapant le bas 50 % du demi-côlon qui le verrouille comme ça. CSS. Je ne le tape que ici parce que je veux toujours m'assurer de noter quel est le ratio de la toile HTML cinq spécifique avec laquelle je travaille. Maintenant, nous avons écrit sont tapotant bas deux-points, 50 demi-points et citation. Je vais finir avec un support fermé. Chaque fois que je lis HTML, je dois avoir un signe inférieur et un symbole supérieur au début de la fin de mon manteau lui et à la clé de retour dans le type inférieur au signe I frame. Maintenant, notez qu'il doit être en minuscules pour correspondre à la minuscule à l'intérieur de mon CSS que j' ai écrit plus tôt, je vais dire que je cadre et puis SRC cela représente la source ou je pointe essentiellement dire le accroché sur le style phonique cirque SRC signe égal, citation, citation et revenir à cette zone et ensuite aller écrire ce qui suit avec Jeez, je pourrais l'épeler correctement avec égal à 1000 qui va correspondre à mon design ici sur la droite et la hauteur de citation proche est égale à 500, puis fermer la citation. Et une autre chose que je vais dire, juste parce que j'aurais probablement dû mettre cela à l'intérieur de mon CSS et beaucoup de paramètres par défaut le font. Mais puisque le mien ne l'a pas, puisque j'ai un thème WordPress très basique, je vais dire style à nouveau. S t Y l e est égal à la bordure de guillemets, deux-points, puis dire zéro guillemet et plus grand que symbole. Et puis je dois écrire un cadre de près en disant barre oblique que j'encadre. Peut-être que nous y allons et le fermer avec un symbole supérieur à la frontière signifie par défaut. Les cadres ont une bordure. Ils sont en fait assez ennuyeux et beaucoup de thèmes. Et Wordpress l'enlève. Mais puisque j'utilise un thème par défaut, ce n'est pas le cas. Donc, à des fins d'affichage seulement. Je vais juste le garder comme ça. Et ce divot le sommet. Ce que vous devez faire en HTML, c'est que vous devez ouvrir ce qu'on appelle une balise et fermer la balise . Donc, si c'est je cadre au début, je dois dire barre oblique je cadre à la fin parce que cette balise DIV ouvre cette partie supérieure, je dois dire moins de signe slash div. Tout ça a l'air bien, sauf pour une pièce critique, ce Cirque ou la source. Tout ça a l'air bien, sauf pour une pièce critique, Maintenant, j'ai un onglet de ce petit gars qui va et vient de mes dessins de Nautilus. Je vais cliquer à l'intérieur de l'Oural ou l'Uniform Resource Locator. Les gens pensent que c'est universel ou universel, mais c'est uniforme. Donc je vais copier votre URL, je vais revenir pour ajouter une nouvelle page. Je vais coller ce code à l'intérieur et ensuite dire publier. Et c'est tout le html que vous devez écrire afin de faire fonctionner le fichier animé à l'intérieur de WordPress 11. Cela a fonctionna ?: Donc la question que vous attendez probablement de voir parce que nous avons maintenant passé par deux modules, sien ne fonctionne pas. Est-ce que nous savons si cela a réellement atteint ? Nous n'étions pas Dio maintenant, oui, je ne pouvais pas arrêter et en prévisualiser avant maintenant. Mais voici le résultat. Jetez un oeil. Comme vous pouvez le voir, ce petit carré rouge rebondit d'avant en arrière, et il a l'air assez beau. Cependant, nous devons maintenant ajuster le navigateur pour voir s'il fait en fait, échelle et lo and view, que cela va et vient dans des échelles plus grandes ou plus petites et maintenir le rapport. C' est la plus grande pièce de tout cela, que cela tiendra la taille de la conception globale dans la taille parfaite. Donc, si je veux mettre dire ci-dessous Donc si nous devions montrer l'exemple de disons, éditer la page à nouveau à l'intérieur de WordPress et tout dire oui, cela fonctionne où si les années ne fonctionnaient pas Oh non, cela n'a pas fonctionné. L' un des deux résultats se produira. génial à propos du codage, c'est que ce sera un oui ou un non. n'y a pas Peut-être que si je mets du texte en dessous de ce cadre dans un aperçu, c'est encore une fois. D' accord ? Oui, ça marche ou Oh, non, non, ça ne marche pas que vous concédez, e que le type tient juste en dessous de l'espace réel. Il ne le déplace pas au-dessus ou au-dessous. Cette magie est venue une fois de plus lorsque nous avons mis le ratio de rembourrage de style bas 50% à la pièce WordPress. Donc j'espère que la vôtre a fonctionné et que la magie a été réalisée. 12. Tester sur d'autres navigateurs: donc je cours safari parce que je suis sur un Macintosh. Mais je veux aussi voir que cela fonctionne et d'autres navigateurs parce que rien n'est pire que de supposer que cela va fonctionner sur toutes les plates-formes, mais cela n'a pas vraiment atteint cet effet. Donc j'ai le feu Fox. Bonjour, ne peux-tu pas Asia comment ça va ? Donc, j'ai un long avec le safari. J' ai Firefox et chrome parce que je suis sur un Macintosh. Je ne peux pas vérifier. Je mange. C' est juste ce que je dois supposer. Mais parce que Chrome n'a une part de marché majoritaire sur le marché des PC, Je me sens assez en sécurité. Mais si je teste à la fois Firefox safari et chrome, je suis en train d'accomplir et de tester sur plusieurs plates-formes. Alors on y va. Voici le feu Fox See Firefox travaillant aux côtés de safari, les deux petits gars se déplacent, et maintenant il est de test chrome et chrome est, mais ce n'est pas le bon projet au bon projet. Alors, qu'est-ce qui fonctionne en chrome ? Il fonctionne dans Firefox et fonctionne en safari. Je sais maintenant que cela fonctionne sur toutes les plates-formes, et si je cours soit la thèse AM chanté appareils sur le mobile parce qu'ils ont crone et ou l'iPhone, qui a safari, que ceux-ci fonctionneront sur les appareils mobiles comme Eh bien, et c'est ainsi que vous pouvez créer une animation de base inanimée et la mettre dans la presse et créer une toile HTML cinq entièrement réactive que vous pouvez utiliser sur les seins de paroisse. 13. En conclusion: Merci beaucoup d'avoir regardé l'ensemble de ce module. Siris de transformation et Dobie anime html cinq fichiers dans de nouvelles sorties entièrement réactives à utiliser dans WordPress. Je suis curieux. Avez-vous vraiment travaillé sur votre site web ? Si oui, envoyez-moi le u R l Mettre dans la section des commentaires Prenez-moi une capture d'écran. Prends-moi. Prenez une capture d'écran Live et parler trop longtemps. Apparemment, je veux savoir est-ce que ça a marché pour toi ? Parce que je pense que Adobe Animate est les genoux de l'abeille En ce moment, animer est chaud. C' est amusant. C' est tellement cool à utiliser. Mais la question ultime est que pouvez-vous le montrer sur votre site web ? La réponse est oui. Vous pouvez maintenant montrer entièrement réactif html cinq compatible. Pas Swift. Swift ne fonctionnera pas sur les appareils mobiles, en particulier sur la communauté apple dans les tablettes. Mais HD modifier entièrement réactif techniques de codage vraiment robuste sur wordpress que vous pouvez montrer à vos amis et votre famille. Donc je suis curieux si vous avez fait ce travail. Si vous avez traversé tous les modules, j'aimerais entendre pour vous dans les commentaires. S' il vous plaît poster un commentaire de ceci. Cela signifierait le monde pour moi. Merci encore une fois. Autant de choses pour regarder ces vidéos. Je l'apprécie grandement.