Figma : techniques de prototypage et d'animation pour UX/UI

1. Introduction: bienvenue aux partitions et à ces écoutes rapides. Nous allons apprendre à améliorer votre prototypage sur les compétences en animation dans FEMA. Mon nom est Bruno nous le signataire de ce concepteur de haricots env. pour les 20 dernières années. Et je crois et apprendre en le faisant dans le cours Destructor est comment vous serez que vous allez orteils. On va voir, genre, genre, quelques classes de théorie et ensuite on bouge les orteils, comme cinq échantillons ou des interactions différentes. Combien ? Un peu sensible. Donc, si vous savez vraiment quelque chose sur le prototypage et les animations, il a choisi mon côté. Les sqs conservent les deux premières vidéos, puis vont directement aux exemples. Alors peut-être que tu apprends ça un peu plus. Quelque chose de plus Concentrez-vous si vous achetez, vous ne savez pas comment utiliser Pick. MMA est parfait. Parfaitement bien. Vous pouvez simplement aller de l'avant et apprendre un peu sur le côté pendant que vous atterrissez la base hors prototype dans une animation. Donc c'est pour tout le monde est pour vos vies. Pour les gens qui sont ces ? Non, quelque chose. Alors allons de l'avant et commençons pour le type et l'animer. Fichman. Donc tu es moi pour parler. Vous 2. prototyping de base: Hey, merci d'avoir participé à ces cours, et nous allons aller tout droit pour voir comment la guerre avec les intégrations de base dans le mop ficc. Ah, la stigmatisation est assez directe pour, comme vous le savez peut-être, outil de prototypage de conception. Nous allons donc voir les bases du prototypage. Donc, quand vous cliquez ici dans, hum, dans un cadre ou sur une tonnelle, si vous venez d'un croquis ou adobe 60 que vous voyez ici par défaut, vous auriez, comme, connu dans un arrêt qui se passe ici comme l'interaction, le comportement de débordement connu. Et cette partie avec ce genre d'important, ils montrent les paramètres du prototype. Très bien, donc nous pouvons aller ici et indéfini quel type d'appareil nous utilisons si vous voulez qu'il importe plus ou paysage plus le mobile. Dans ce cas, nous allons utiliser Silber, et vous pouvez ajuster l'arrière-plan. Comme vous pouvez le voir ici, vraiment la vie, nous pouvons ajuster l'arrière-plan, le prototype et le cadre de départ. Comme vous pouvez le voir ici, nous avons, comme moi pour huit plus un, et c'est la même illustration, ok, le même cadre. Donc, c'est quelque chose que vous devez configurer la première fois. Et une fois que tu ne le fais pas, tu n'as plus à revenir. Presque jamais. Hum , peut-être que si vous avez des prototypes différents sur le même, euh sur le même document, vous devrez venir ici et voir si vous avez besoin de changer. Ceci, par exemple, est venu ici orteil un autre. Ensuite, vous pouvez voir les cadres que vous avez ici. C' est donc une bonne pratique de ne pas avoir différents prototypes sur la même page. Vous pouvez avoir plusieurs pages, et c'est payé. plusieurs pages, Vous pouvez l'avoir. Comme, comme vous pouvez le voir, c'est une sorte de point de départ. Ce genre de jeu indicateur bleu et aussi si nous venons ici à cet autre prototype, vous pouvez voir ici est le cadre de départ. La même chose ici, et dans ce cas, je ne l'ai pas. Mets-le en place parce que je n'ai aucune interaction ici, OK, mais c'est donc une bonne pratique. Je dis de ne pas mettre différents prototypes parce que si je les duplique et que j'ai ce prototype ici dans un autre prototype imaginant que nous voulons faire, genre, deux prototypes sur la même page, vous allez être, Hum, Sweeting, entends le prototype en mettant l'orteil puant, je bleuis trois. Donc ça commence ici, donc c'est une bonne pratique de le garder dans des pages séparées. Bon, donc on va faire ça, et on va commencer à travailler avec ces, euh, voyons ce qu'on a ici. Ah, nous sommes ici dans le premier cadre, et j'ai appliqué comme, euh, e c interaction ici. Et voyons ce qui se passe si je pouvais entendre ce genre d' d' animation. Et puis si je pouvais entendre qu'il y a une morphine entre notre premier coffre-fort sur la deuxième évasion. Ok, alors disons ce qui se passe ici ? Donc pour le prototype, Fichman, ce que vous faites, c'est Vous pouvez le vendre l'ARB ou si vous voulez, oh, tout l'aéroport pour interagir. Ou vous pouvez appuyer sur différents éléments de la page qui ont les interactions dans ces gars . Choisissons ça avec la jungle, et comme vous pouvez le voir ici, j'ai, genre, sur le dessus. Donc, lorsque vous cliquez ou vous en haut vous navigato iPhone huit plus deux. Dans ce cas, vous pouvez voir que le nom de la tonnelle ici, droite et animation auditive comme vous pouvez le voir il ya beaucoup off option institut. On va tous les voir. Donc, pas de soucis à ce sujet. Et puis vous pouvez changer le type d'animation que vous pouvez voir ici en bas. Qu' est-ce qui se passe ? Vous pouvez modifier le type de travail de base de l'animation qu'il se passe. Voyons les différences entre cela. Mettons comme une seconde avec, comme 1000 millisecondes. Bon, donc ça va être plus lent en ce moment. Donc si je suis ici rapidement, comme vous pouvez le voir, ça prend comme une seconde. Ah, ici. Peut-être que c'est Nous ne pouvons pas apprécier autant la facilité d'entrée et de sortie, hum, Animation Type Corp mais je me vois généralement utiliser ça. La plupart du temps. Il avait l'air dehors. Um, je suggère, jamais utilisé linéaire parce que linéaire est une sorte d'orteil droit donc, mais nous verrons cela en détail. Voyons donc les différences entre les Russes que nous avons ici. Ok, donc on a le téléphone, on peut voir ici, on botte et ça se passe. De la même façon que nous pouvons sélectionner à nouveau ici sur la drogue. Donc, quand je vous commencerai à faire glisser cette chose, animation va marcher. Voyons si j'ai apporté ça. Qu' est-ce qui se passe ? Pourquoi pas ? Pourquoi travaillez-vous si bien ? Glissez-le. C' est pour quand ? Lorsque je choisis le et je veux faire glisser et je fais glisser, cela devrait fonctionner comme vous pouvez le voir afin que répéter l'animation. Donc, si je les choisis et que je fais glisser, vous pouvez voir que ça commence à venir. Pourquoi héberger ? C' est fini avant. Voilà ce qu'il fait. Allons au début. Donc quand je Khobar ici, l'animation, ça commence quand je vais juste loin de là une partie de la Sape Get ces années heureuses. D' accord, allons avec le suivant avec ça tout en appuyant sur. Donc si j'appuie dessus, ça marche. Quand je relâche mes fesses, ça revient. Donc, c'est bon pour certaines animations. Peut-être que ce n'est pas le meilleur exemple d'animation pour cela, Mais vous pouvez voir à droite. Euh quoi ? Quoi ? Il fait les parties de jeu clés, Ou vous venez de sélectionner la clé ? Disons T, par exemple. Et quand j'ai appuyé sur lui, ça marche, comme vous pouvez le voir, accord, et mon centre, Prio Pius. Donc, quand la souris entre ici. Donc, il est toujours entré parce que je dois cliquer ici, donc Mais vous obtenez la zone. Droit ? Donc c'est pour mes centres. Même chose quand Miles vivent. Donc quand je sortirai de ces rectangles va travailler l'animation, euh, euh, c'est vers le bas. Comme vous pouvez l'imaginer. Oui, je n'appuie que sur le son supérieur. Il fait l'animation et ce magasin. Même chose. C' est là que je relâche le contact. Ensuite, l'animation commence. Ok, donc on a ces Kober avant match. On voit tout. Toutes les interactions que nous avons utilisées il n'y en a qu'une seule qui est désactivée ici, comme vous pouvez le voir c'est un retard après. On va l'utiliser maintenant. Donc ce qui fait après DeLay ne peut pas être appliqué à l'élément genre de, hum, c'est seulement appliqué orteil, um, deux cadres. Et qu'est-ce que c'est ? Laissons-le regarder. Hum, nous voulons après une seconde que vous soyez ici. Imaginons que nous ayons comme, euh, mettons ça ici. Dupliquons les. Et puis disons que nous l'avons fait, comme sur son appât plus. D' accord, donc on va mettre les pieds ici comme un éclaboussure. Moi, il semble être signé moule. Il s'est éteint. Nous sommes à la soupiration avec Alors imaginez que nous avons comme notre étincelle Cette page plus super fantaisie, certains qui sont des animations de tomates. Disons qu'on commence ici maintenant et qu'on a l'appât X plus, non ? Et ce que nous voulons que l'utilisateur entre à travers cette page, puis après une seconde sans aucune indirection, puis passe à la prochaine, um, à la prochaine image. Ok, donc c'est ce qu'on va faire, c'est faire le prototype des orteils après le relais ? Nous allons donc mettre ces 800 millions de millisecondes. C' est bon. Ensuite, nous allons dire que naviguer à travers lequel cela signifie aller à la trame supérieure. Quoi que vous choisissiez ici, et nous allons choisir le cadre libre, qui est celui-ci. Et oui, nous sommes plutôt bons à regarder. Donc, si nous venons ici donc nous avons besoin de redémarrer le et nous pouvons voir maintenant qu'après un certain temps il reste , et puis il s'anime lui-même. Ok, donc vous pouvez utiliser ces orteils peuvent cool animations comme je vais faire quelque chose de rapide sur drash. Donc ce que vous pouvez faire ici, c'est cool. Si vous voulez simuler, disons, comme, comme, barre de chargement quelque chose. Donc c'est Ah, ouais, ce n'est pas supprimer. Pour qu'on puisse voir ce qui se passe ici. Ce qu'on peut faire ici, c'est, Ah, créer comme un cercle. Ok, et puis revenons au panneau. Et faisons un accident vasculaire cérébral comme ils ont besoin de sentir. Disons qu'on n'aimerait pas 10 ans. Je me sens comme ça. Et puis euh, disons qu'on va faire comme ça, OK, OK, et se reposer pré crépus, pas de fantaisie du tout. Cela n'a pas vraiment trop d'importance juste pour des fins conçues. Bon, donc nous allons dupliquer ces deux éléments, donc ils sont nommés le même parce que nous allons voir un type d'animation maim. Il y a là aussi. Nous avons Nous allons combiner l'after Delay après une seconde hors d'entrer dans cette page. Mettons un peu plus de temps. Disons, oui, c'est bon et ça va être le coup de pied iPhone pour ok. Et ce que nous allons faire ici, c'est faire pivoter cet élément. Encore le signe. On va le faire tourner comme 90 degrés. Peut-être que nous ne pouvons pas l'apprécier parce que les flèches, vous savez, pas les flèches. Les lignes sont de la même façon. Mais nous avons fait une rotation de 90 degrés, non ? Alors, qu'est-ce qu'on va faire ? Il est reparti au prototype. Donc, nous avons déjà mis en place notre après DeLay un qui était dans 500 navigato Thèse Screen Plus Quatre. Et nous allons dire dans cette partie de l'animation, nous allons mettre une animation intelligente et c'est un installateur le plus cool pour l'animation. Ce chiffre l'indique. Ok, alors voyons ce qui s'est passé. Soyons le type de frère star ici et après un. avez-vous vu après une seconde dans les démarrages et voit que nous avons ici un autre après retard qui va à l'écran suivant que nous avons précédemment mis en place ? Nous pouvons voir ce qui se passe ici. Donc, nous ne touchons rien. L' écran après le temps, il tourne. Et puis l'animation arrive. Donc, ces femmes de bonne au miel, c'est un super cool pieds. Euh, vous voyez en fait ici que quand je presse ici dans ce genre de cercle étaient cercle Eh bien, non, je dois remettre ça à l'écran. Donc, quand j'appuie ici et j'appuie à nouveau ici, le cercle, comme vous pouvez le voir, a un autre est smart animate. Ce qu'il fait, c'est ses changements. Son singe comme orteil super organique deviennent cette forme. Donc, comme Martin émet, ce qu'il fait, c'est qu'il sélectionne deux éléments qui sont nommés le même. Et ce qu'il fait, c'est faire une transition entre, ah, ces formes à cette autre forme. Faisons la même chose. Puisque nous sommes déjà à moitié comme ici les, intelligents , animés , activés, nous allons agrandir ce test et nous pouvons voir ici comme si nous allons le faire et nous allons le mettre ici. Et nous allons à l'autre chose, qui est que ça va tourner et qu'il va être plus grand. Et ça va être ce truc énorme ici pour qu'on puisse voir quoi, euh, genre d'animation, cette mort de bonne au miel intelligente. D' accord, on peut voir tout s'agrandit, puis l'autre animation commence, et puis je clique fait comme une transition, puis je clique. Et puis une animation intelligente étoiles à nouveau afin que vous puissiez obtenir intelligent, animer tout ce que vous voulez. Et c'est la cravate d'animation la plus importante pour moi E en fig, MMA ou non ? Donc, c'est plus ou moins que de se baser sur les bases. Voyons un autre type de transition. Voyons voir que si nous changeons ces animations au lieu de smart, animate, nous avons tendu orteil Instant trois animation vient d'être gentil au large rapide. Donc oui, il pop. Et puis il vient ici parce que nous avons déjà le film en animation. Quoi ? Il fait ça. Vous pouvez imaginer qu'il mélange 11 sont éteints, un cadre avec l'autre. Bon, alors voyons ce que ça fait. Nous attendons un peu, et puis il a fait, genre, le genre de foi d'un écran à l'autre. Ok, voyons ce qui est marqué sur les yeux du Midwest. Martin. Chérie, on sait déjà ce que ça fait. Bouger comme vous pouvez le voir. Ah, ici. Tu peux changer. Et vous pouvez voir le genre d'animations que nous avons des haricots voir ici. Le déménagement d'un incroyable déjà. Ok, mais voyons comment ça marche ici. Donc, après une seconde, Theis plus page entre sur la gauche. D' accord ? Et ceux-là, il entre de là par le bas. Donc, vous rendez ici. Le genre à entrer Ceci est cool quand vous voulez orteil. Peut-être apporter un menu ou quelque chose à la page. D' accord. Et il y a une autre chose ici, ces comportements de débordement. Nous allons le voir, mais nous avons quelques exemples plus tard. Donc ce sont les pré cuissons est à tout fait que vous pouvez sur quelque chose d'important. Important. J' oublie quand vous sélectionnez sur l'élément dans ce prototype haut sélectionné. Vous voyez que ce genre de boîte de délimitation de avec ce cercle apparaît ici pour que vous puissiez venir ici et ensuite vous connecter à n'importe quel corps. Un. D' accord. Ainsi, comme vous pouvez le voir et quand vous l'avez connecté, vous pouvez appuyer sur et sélectionner le type d'interaction que vous voulez sur Dr quoi que ce soit. Sélectionnez ensuite l'animation. La plupart du temps, vous vous verrez utiliser une animation intelligente, d' autres que vous voulez juste, comme une animation orientale, d' autres à l'étranger. La plupart du temps, vous vous verrez utiliser une animation intelligente, d' autres que vous voulez juste, comme une animation orientale, d' Je me vois à peu près utiliser l'argent intelligent fait pour presque tout. Mais cela dépend de l'application que vous essayez de faire. Ok, alors passons au chapitre suivant. À plus tard. 3. Types d'animation: Hé, donc voici comme si nous nous rappelons comment nous avons des prototypes à l'intérieur de Fatemeh. J' ai ici un cadre vierge de soutien-gorge, et c'est une bonne pratique de commencer les orteils. Mettez vos paramètres vos paramètres de prototype, sorte que nous allons juste aller orteil donc paramètres prototype. Et ici, vous pouvez voir que vous avez plusieurs appareils à choisir. Il semble que je l'ai dans la même partie. Vous pouvez voir la largeur et la hauteur de notre planche ou cadre dans des configurations prototypes. Je sais que c'est un iPhone huit plus, donc je dois l'utiliser, et puis vous pouvez à un autre. Donc tu peux changer tout ça. Vous pouvez simplement le mettre en noir que vous voudrez. Donc, pour la seconde, juste aller à un avec un super vous obtenez reste l'arrière-plan avec votre prototype. Si vous faites quatre présentations ou enregistrez des vidéos, et c'est la chose importante est une image de départ. Nous pourrions envoyer d'autres images là-bas, mais pour ce cas particulier, nous voulons des animations et des échantillons. Ok, donc c'est bien. Revenons au panneau et c'est bon. Donc, je vais orteil, créer un rectangle, oui, pour voir les types de base hors animation, et je vais dupliquer cet ami pour cela. Tu sais juste, il suffit de sélectionner leur cadre. Et puis avec la touche Off, vous le déplacez. On va aller aux pieds. Je fais ça parce que pour voir Tom, certaines animations en particulier, elles sont intelligentes, animées. Ce dont nous avons besoin, c'est d'avoir les mêmes éléments dans les cadres de bol. C' est donc le cadre de départ, et nous avons aussi cette rhétorique. Et ici, dans le cadre, renommer en échantillons d'animation. Ces deux-là Désolé, Désolé, on a le même angle d'haleine, donc c'est une bonne pratique d'avoir les mêmes éléments. Donc, nous allons ici dans l'interaction et ce que nous voulons. C' est sur le haut. Lorsque nous cliquons sur ce que nous voulons, c'est la navigation des orteils. Alors on va à cet écran. Dans ce cas, il est animation animée dans des échantillons à, et si nous et ce que nous voulons quand nous jetons ici, il revient ici. Vous pouvez simplement appuyer dans le cercle vers la gauche et créer une autre animation. Ok, Donc dans ce cas particulier, comme vous pouvez le voir comme Martin détenu a haricot activé par défaut, parfois il va mettre instantané ou dissous. Mais on va les voir. D' accord. Donc, pour cette animation particulière sur pour voir les transitions entre un écran sur l' autre, je vais juste depuis les couleurs oui, sélectionnez leur couleur pas si lourde ici. Et nous allons changer les radios frontalières ici pour voir la transition entre les deux . Donc maintenant, si je peux entendre et que j'appuie, comme vous pouvez le voir, il fait une transition, et c'est marqué animation entre le coffre-fort sur la couleur du coffre. On peut faire la même chose avec ce qu'elle a dit à l'écran. Donc, si nous cliquons ici comme vous pouvez le voir, ça bouge. OK, donc c'est assez simple. C' est ce qu'il fait. Est intelligent, animé ? Alors revenons ici. On peut augmenter le temps. Mettons-le comme une seconde. Cela pourrait être comme 1000 millisecondes. Donc, comme vous pouvez le voir maintenant, la transition quand nous avons tendu ici c'est beaucoup. C' est plus bas et c'est bon. Ok, A pour qu'on puisse voir qu'on est là. La scène est dehors est dedans et dehors et linéaire ce sont Voyons voir ce qu'il fait comme vous pouvez le voir ici. On n'est pas là. L' animation n'est pas organique est juste comme alors le nom dit linéaire. Euh, eh bien, c'est dans Non désolé. Alors nous allons voir ce qui est aux États-Unis Donc il étoiles un lentement et puis il sorte obtenir beaucoup plus rapide Motion de la fin, bien que le contraire serait est dehors donc il va commencer. Il commencera comme d'abord, puis il ralentit. Comme nous pouvons le voir, il commence d'abord, puis ralentit dans ce que j'utilise habituellement est facile à entrer et à sortir, qui signifie étoile plus vite que ralentit, puis va plus vite à nouveau. Pour moi, c'est plus, Ah, animation organique et puis les plus ennuyeux de tous eux est linéaire avec C'est juste, Je continue. Le mouvement n'est pas une accélération, aucune accélération du tout est juste cela. OK, donc ce sont les types debase de hors cours d'animation. Et puis nous avons Essayons d'autres types d'animation pour, par exemple, l'instant ce qu'il fait est oui, vous savez, va d'un endroit à l'autre. Aucune notion transitoire de frontières n'enchaîne quelque chose de ce genre. C' est juste ah, la foi entre cet écran de l'autre, donc on n'a pas d'animation entre les deux si on bouge les pieds, euh, voyons ce qu'il fait. Ce qu'il fait, c'est que l'écran entre à partir de la gauche. On peut le changer pour entrer à partir de la façon dont il entrait de la droite, puis il entre par la gauche pour que nous puissions le voir maintenant. Ça vient de la gauche et vous pouvez imaginer quoi ? Quoi ? C' est ça. C' est ainsi que ça vient du haut, puis de la frontière. Très bien, donc et c'est quelque chose d'intéressant que vous pouvez intelligent, animer beaucoup dans les calques et aussi vous pouvez vérifier différents types. Bien sûr. Dans ce cas, je vais utiliser vous vu sur dehors. Alors voyons ce que ça fait. Donc ça fait la même chose. Une chose intelligente et animée que nous avons avant. Ok, donc pour cette animation particulière, je pourrais juste aller avec une animation intelligente Ok, après que nous ayons ces déménagements, laisse-moi juste aller avec et enlever ça pour qu'on puisse voir ce qu'il fait. Donc, comme vous pouvez voir ce genre de transition, c'est bon. Si vous voulez orteil simuler une sorte d'effet de parallaxe, ceux-ci se déplacent et se déplacent avec le travail. On a Bush. Ce qu'il fait. Est-ce que c'est gentil sur ce cadre monte et ce cadre monte à, donc c'est un peu un carrousel au lieu d'un cadre, hum, aller devant, l'autre. C' est ce qui a poussé ça et c'est la doublure. C' est un peu un effet similaire. Plus subtile. Disons-le. Comme vous pouvez le voir, il est possible de sorte un grand Bagram quand nous faisons l'animation ici. Ouais, donc c'est gentil de pousser l'autre cadre, la première image et ensuite sont une sorte de fond. Donc, cela pourrait être un peu dedans et glisser dehors. C' est la même chose. OK, donc vous pouvez voir qu'il vient du bas, mais engagé et obtenir ces fond gris. Donc, cela est apporté beaucoup de lui, et nous allons voir enfin, exemples de Theo. Ok, toutes ces sortes de choses. Très donc appliquer à quelques exemples cool que vous pouvez répliquer pour votre portfolio et toe master Ces animations et fonctionnalités de prototypage dans Fichman. Ok, alors on se voit dans le premier exemple 4. Toggle - L'animateur intelligent: Alors allons-y et commençons à répliquer notre pour la lumière ici. D' accord ? Donc pour ça, je vais juste créer ah ah ah, frame. Allons à la plaque douve. Et c'est à iPhone huit plus. Ok, alors laisse-moi demander Fermer cette partie et ensuite on va créer des pieds comme, tango. Et nous allons juste mettre, comme un Grady dedans, comme avec ça. OK, donc à quelque chose autour de ça au lieu de désolé, disons linéaire dans son cas, il va être 100 et puis nous allons mettre comme, Je vais changer ces couleurs et puis nous allons mettre comme une orange sont quelque chose qu'il va bien. C' est cool. Donc, je vais juste copier ce texte pour ne pas avoir à le créer à nouveau. Juste un texto. Et puis je vais créer un discours sur le long, ce qui est une chose assez simple à faire. Oui, créez quelque chose qui est. On a mis un livre pour les radios comme 100, mais ce Dwight, j'ai déjà créé des appelants, et ensuite on va mettre comme un cercle ici et disons oui, c' est cool. Et la sensation du cercle va être notre premier médical, ou c'est bon. Ok, faisons un peu plus gros. Donc nous avons, genre, sur et hors de la prochaine. Ici. D' accord. Et je vais répliquer ce texte et mettre comme sur, et il est mis avec notre couleur primaire ici, aussi. Ok, c'est bien. On a Ah, voyons s'il y a lieu de ça. Et nous disions avant que nous devons avoir pour un travail intelligent et animé des orteils. On a besoin des mêmes éléments et on va rendre ça un peu plus petit, quelque chose autour. Et nous avons besoin des mêmes éléments à gauche qu'à droite. Droit. Donc nous avons besoin du bon message de nuit ici, donc je vais juste y faire face, et je vais le dire comme ça et d'accord, c'est bon. Et nous avons besoin ici comme un texte hors texte aussi. Parce que, comme nous l'avons vu ici, nous avons assez de texte qui se déplace de gauche à droite. Vous pouvez voir qu'ils vont arriver deux. Donc on va mettre ici comme hors. Et comme on peut le voir, la couleur est quelque chose autour d'un peu plus sombre. Bon, donc on va faire ça. D' accord. Donc pour cet écran, ce qu'il nous faut c'est une bonne nuit pour être juste On se déchire, ok ? On a besoin de manger. Non, pas présent. Comme, est là, mais n'est pas là. Ok, donc on va dupliquer cet écran. Nous avons tous les éléments. On veut. Nous avons besoin de deux pour faire cette animation. Disons que c'est le filtre menial. Dans ce cas, on va aller pour le bleu, disons bleu foncé et ce jaune, disons un autre bleu ici et pour celui du docteur. Eh bien, ce n'est pas le même pot de tutoriel de toute façon. Donc ce qu'il nous faut ici, c'est ah, sont des bons textes du matin qui descendent et qui obtiennent le pied zéro. OK, comme vous pouvez le voir, j'ai mon précédent tex ici, là . Ah, bonne nuit test. Je vais juste le sélectionner. Et ce que nous voulons sur ce bureau, c'est venir à 100 et ensuite je vais juste, euh, les allier au sommet pour l'année dans la même page et la même chose ici. Je vais les aligner sur le fond. Donc tous les deux nous tester notre ligne et bonjour va disparaître. Ok, le texte sur que nous voulons disparaître et passer à droite. J' ai sélectionné le texte off, donc je vais juste en parler. Ok, donc je vais juste le déplacer comme 30 pixels, quelques photos là-bas et ce que nous allons faire son déplacement la propre bouteille ici, le propre texte parce que nous voulons vouloir mai pour faire l'animation qui va à l'autre côté, et c'est notre cercle va venir ici et va être bonbons hors. Nous avons donc changé car la couleur est assez simple. Et puis nous venons ici et nous allons le mettre ici et le bouton on, Disons là et c' est juste mais la capacité est de 20 Ok, donc nous avons notre cadre de départ et nous voulons que tout les orteils bougent et se transforment en ceux-ci, faire des animations. Ok, donc nous avons nos scénarios de tournée ou un point de départ, notre point d'arrivée, et voyons comment cela fonctionne. Donc, nous allons sélectionner l'utilisation que nous allons faire le prototype, et dans ce cas, nous allons sélectionner l'iPhone un plews un Donc c'est notre siège de la manière de cadre de départ ici. Élection. Mais nous cliquons et tout bouge. Donc ce que nous voulons, c'est quand nous cliquons dans ce cercle, faisons-le comme ici. C' est sur le dessus. Nous voulons naviguer orteil iPhone, plus deux avec son école. L' animation nous avons mis une animation intelligente dans l'ordre, tout à bouger. Commençons par ça. Voyons ce que ça fait. D' accord ? Et appliquons ici quand nous cliquons sur le bouton ici, une autre transition de dissoudre. Ok, au lieu de ça. Alors voyons comment cela semble. Comme vous pouvez le voir, il fait comme un fondu super long fondu. C' est ça va prendre éternellement ça. Qu' est-ce qui se passe ? Oh, c'est deux secondes, disons, euh à 200 500. Et ça, 500 autres. Voyons ce qui se passe ici. Ok, ça fait une transition, mais comme vous pouvez le voir, la bataille ne bouge pas. Le fond total. n'y a pas d'lingots. Tout est gentil. Ce n'est pas mal, mais ça ne semble pas naturel, non ? Donc voici un argent intelligent fait pour nous aider, et donc nous allons juste activé un intelligent, animer Disons 500 Je sélectionne cela dans et faisons la même chose avec cela au lieu du sel. Allons à Smart. Animate est dans sa sortie sur 500. C' est cool. Alors voyons le. Comment ces mots maintenant, comme vous pouvez le voir, tout fonctionne. Mettons que nous allons rendre la transition un peu plus grande. Alors va être comme dans un ralenti va être années de télévision va être ennuyeux. On peut voir l'effet qui se passe ici, non ? Donc nous cliquons maintenant. Et comme vous pouvez le voir, nous avons l'effet scolaire que vous commencez rapidement, ralentit tout ce que vous savez, ça ralentit, puis va plus vite que ralentit à nouveau. Et nous pouvons voir toutes les transitions ici. L' on et l'off vont d'un endroit à l'autre, et on peut voir que ce cercle se mélange de Blue Ray et que tout fonctionne en quelque sorte. Ok, donc c'est tout. Un intelligent. C' est comme ça qu'un animal intelligent fonctionne. Bon, alors passons à l'exemple suivant 5. Contacts - Drag: Hé, bienvenue dans ces tutoriels de sorte que nous allons voir dans les interactions de balayage et comment animer ces choses. Donc j'ai ces prototypes prêts ici. Et comme vous pouvez le voir, ce que nous voulons, comme une liste de contacts de voyage. Et nous voulons, euh, Khobar. Et puis nous avons deux options ici. Cliquez à nouveau sur Stripe toe, Annuler. Donc on a l'indirection ou on peut cliquer et le faire donc ça, euh, peu près tout. Mais nous avons quelques caractéristiques cool ici, donc nous pouvons faire et reproduire pour notre science. Et vous voyez ces animations sur notre doux Tout semble assez organique. Voyons donc comment faire cela dans un mois. Essayons de les répliquer , , afin qu'on sache comment le faire. D' accord. Donc, pour le temps, oui, aller orteil dupliquer cela directement. Donc ça va être donc je suis allé bien et j'imagine que nous n'avons que cette liste. Comme vous pouvez le voir, c'est un rebelle. Au moins j'ai créé avec un composant, mais il est juste au moins fait à partir d'un autre titre de star et tout, mais ok, nous allons faire habitué à réchauffer à partir d'un zéro. Donc pour ceux-ci, ce que nous faisons est juste de créer comme une partie supérieure. Sois par là. Ok, donc oui, c'était une glacière, peut-être à la lumière. Ensuite, créez le cercle. Il est mis ici comme un à propos de notre avec notre à propos de notre branchement. Donc c'est bon. Mettons le texte et il est assez mince. Bolt, peut-être que six 19 écoles sur le terrain vont être comme un truc gris foncé comme ça. Et puis on peut mettre ici, comme la date ou le numéro de téléphone si on préfère. Alors faites-le. Ok , pour que ce soit leur numéro. Et gardons ça comme une couleur plus claire. C' est ce soir. Quoi qu'il en soit, c'est oui, conception pour la conception, mauvais processus. Et ce que nous voulons ici, c'est de créer comme , euh, et de mettre ici comme un fond blanc. J' aime vraiment les faire comme une meilleure pratique et tous mes designs, parce que ici je peux contrôler la hauteur hors de l'air signifiait que je pourrais le faire avec un autre. Nous je vais mettre des fonctionnalités de mise en page et tout sur quatre jours pour le donner simple. À moins que, oui, fais-le comme ça et créons un composant et ce sera Plus, je pense que tout va bien. Donc, je vais juste dupliquer ceci et puis appuyer sur D commun ou contrôler le si vous êtes MPC Ok. Donc, oui, on est bons. Maintenant, je vais sélectionner toutes mes photos, aller ici pour brancher et aller à notre eau. Ça va changer. Je vais insérer quelques noms ici. Donne-leur des noms aussi. Eh bien, oui. Comme alors avoir un autre cône de branchement appelé Contra real. Et ici, oui, très bien. Tout est bon. Je veux le nom complet. Ok, alors nous allons postuler. Nous avons nos noms. Nous avons des photos. On a tout mis en place ici. Ok, donc rien que nous voulons faire est de créer le bouton de suppression. Donc pour ça, ce dont nous avons besoin, c'est pris en charge toute cette rangée ici. Ah, je pense que notre composant précédent est de 9 90 en hauteur, donc nous allons le créer. 90 élément de masquage n'étaient pas composant la rangée pour la vraie nourriture. J' ai une couleur là-bas. Donc dans ce cas, dans ce cas, je vais juste faire comme la nuit 89. C' est entre les grands bars. D' accord ? Envoyé de séparé du D par il y a et je vais juste copier le texte. Donc, et l'icône. Donc nous l'avons ici, et ce que nous faisons c'est de faire un groupe avec ça sur Call it, traiter. Donc nous savons où nous sommes et ce que nous voulons faire ici, c'est de mettre ce, euh, euh, supprimer la bataille à l'intérieur de ce cadre. Mais comme vous pouvez le voir, nous sommes dans Swipe One. Et quand je le déplace ici, l'élément c'est ah, à l'intérieur swap Swipe one. Quand je le déplace, il sort de l'extérieur. Un. Donc ce qu'on veut, c'est localiser ça ici et le mettre à l'intérieur. Donc j'ai acheté. Ok, donc tu dois le faire manuellement ou bouger. Les propriétés sur le X. Vous pouvez voir si je l'ai mis sur zéro, et on le veut sur 400 14. Les propriétés sur le X. Vous pouvez voir si je l'ai mis sur zéro, Ça dépend hors du cours. Dans le cadre que vous avez mis en place, J'ai l'iPhone huit plus, Oui, orteil faire tous leurs tutoriels du même poids. Donc nous avons ceci ici. Donc, ce qui se passe est maintenant que nous avons le bouton de suppression à l'extérieur du cadre voleur de Swipe one, mais il est inclus dans ce cadre. Ce n'est pas comme dehors. Ok, donc c'est gentil d'interagir de la même façon. Donc, nous allons dupliquer notre design et ce que nous allons faire ici et nous allons juste l' amener un peu plus loin. Attends. Oui. Alors, qu'est-ce qu'on veut ici ? C' est faire la même chose à propos du contraire. OK, alors on parle tout et on le déplace vers la gauche. Comme on peut le voir, puisque nous avons fait ce genre de groupe, , c'est à l'intérieur de ça. Décidez-les. C' est aussi à l'intérieur de ce blanc, donc on n'a pas à s'en soucier. Donc, nous allons prototyper cette partie et laissez-moi prendre changer leurs paramètres de prototype pour orteil être Tribe a gagné le cadre de départ sur Swipe un. Nous les mettons dans un départ de set Swipe on peut voir ici. Nous n'avons aucune interaction. On ne peut pas faire défiler. Mais nous sommes intéressés par cette partie. Nous allons donc commencer un prototype. Nous devons donc penser d'abord à ce que nous voulons faire, et nous voulons le faire quand nous cliquons ici. Quand nous commençons à conduire ici, nous voulons que les orteils viennent à ces rayures à l'écran. Donc on appuie juste sur ce cercle bleu. Viens ici et puis sur Swipe. Désolé pour la drogue. Nous voulons avoir un gars pour frapper deux, qui est cet écran et aussi nous voulons que Mia rende ça un peu plus petit. Les choses sont à faire. Ok, donc, euh, on veut que les orteils viennent ici, et c'est marqué animé. Donc nous avons la transition, ok. Et la même chose quand on glisse ici, on veut que les orteils reviennent à la succession initiale. Donc, dans ce cas, je vais faire avec juste ici. Ah, sur glisser Naviguer vers E dans ce cas de bande 1, notre écran. Alors voyons comment ça marche. Comment cela fonctionne jusqu'à présent et nous avons sur le chemin. Attendez, Warren sont balayés. Vous pouvez voir que tout cela fonctionne vraiment. Et si tu le sais, il a, genre, ce genre d'effet cool. Nous avons donc fait notre première partie. Et ce que nous voulons maintenant si c'est que si nous glissons, nous pouvons faire l'action de la. Mais si nous cliquons, nous voulons , euh, traiter notre contact et ensuite celui viendra. Ok, donc nous allons dupliquer cela à nouveau rappelez-vous que tous les éléments doivent être les mêmes sur les écrans. Ok, dans ce cas, je veux que ce texte que j'ai dans ces deux écrans vienne à droite et ces plus heureux . Donc pour ça, je vais juste mettre zéro dans le champ d'opacité. Et voici ce que nous allons faire, c'est, c'est, hum le rendre plus grand et peut-être mettre comme quelque chose comme un peu de Bolden massif sur grand. Donc nous avons ces que j'appelle Mats Boulder et ce que nous allons faire, c'est l'écran dupliqué à nouveau. Et ce que nous voulons ici, c'est de nous débarrasser de tout ça et de déplacer ces contacts ici. Appliquons donc des transitions ici et le prototypage. Alors quoi ? On les veut quand on clique ici, ça va ici, alors faites-le. Dans ce cas, en haut, Navigato a glissé cinq. C' est mars. Animer. Il est tombé 800 millisecondes et ce que nous voulons quand le entre en entrant ici après un certain temps, automatiquement, il va à ces écrans. Donc pour cela, ce que nous faisons est de sélectionner l'ami et ensuite après retard ce que nous allons mettre comme un peu retard ici. Nous allons utiliser le même délai de 800 millisecondes. Ce que nous voulons, c'est naviguer dans les bandes des orteils. Six est encore l'écran plus ancien ici. Alors voyons à quoi ça ressemble. Wow, cela fonctionne bien et moyen pour le clic. Wow, c'est cool. Nous avons donc fait ces anciennes listes de transition redémarrées pour voir ce qu'il a été ce que nous avons créé . Comme vous pouvez le voir, il a une sorte de bons mouvements ici, et il va cliquer. Oh, c'est cool. Donc c'est notre prototype que nous avons de la drogue. Ah, animations et interactions. Merci. 6. Travelopia - - la Hover et l'animation Smart: Hé, bienvenue. Et nous allons voir, genre, sur sa direction byzantine ici. Comme vous pouvez le voir, nous allons créer um, ces conceptions où nous espérons pour l'une de ces trois parties ici, nous pouvons voir qu'il se tient et vous prenez de l'année que jusqu'à des années l'appelé à l'action fond Ainsi, . comme vous pouvez le voir, c'est un effet cool que vous pouvez intégrer dans vos conceptions. Ok, alors voyons, comment peut-on faire ça ? D' accord. Comme vous pouvez le voir, j'ai quatre écrans ici, c'est l'enfer. Nous devons créer ça. Et nous devons reproduire Ah, notre propriété où nous avons, genre, genre, trois pâtés de maisons. Et nous devons créer ceux-ci où ce qu'il fait est oui, augmente son avec alors ces textes. Ce plus grand fait plus grand que ce texte des années ici. Comme faire comme si elle apparaissait d'ici. Comme vous pouvez le voir, je l'ai ici comme si nous avions une opacité sérielle comme transparente. Alors ce qu'il fait quand il change à ces tout port dans cette zone. Ah, ceux-ci le reste face à ce texte devient plus grand que le test arrive et met sa capacité à 100. Donc c'est occupé. Eh bien, et puis une bouteille à partir d'ici depuis la gauche. Comme vous pouvez le voir, ce bouton, je l'ai sélectionné maintenant, lequel est celui-ci ? Découvrez le Cambodge, comme vous pouvez le voir, est le même nous ici. Découvrez le Cambodge. Donc nous avons, um, tous les éléments, um, de cet écran dans cette crème. Ok, Donc pour son martini fait pour fonctionner, il faut que nous ayons les mêmes éléments dans l'un sur l'écran de l'autre. Ok, alors c'est Allons-y. Répliquez les deux écrans. Nous n'irons pas reproduire ceux-ci parce que faire un exemple va être assez bon . Ok, donc quarante et je vais juste dupliquer cette partie. Et je vais juste oui, créé à partir de zéro. Ok, donc pour ces moitiés comme une mise en page créée ici, allant juste au rectangle du créateur, je dois voir si ce rectangle va se rencontrer comme, ouais, donc quelque chose autour que ça va être cool. Donc nous avons, euh, vous savez que ce sont des blocs libres. Faisons-le pour qu'on puisse y voir. Différence. Ok, donc nous avons nos blocs séparés sur 480 pixels. Au fait, j'arrête la science. J' utilise habituellement 1140 puis 9000. C' est mon installation typique. Ok, alors , ouais, allons-y. Donc je vais juste me débarrasser de ça c'est bien. Nous sommes sur le 480. Juste une balle pour ici. Donc, pour aller décent à utiliser sur un éclaboussure, Blufgan. Donc je vais 30 ou quelque chose comme ça. Nature aléatoire pour Voyons voir. Eh bien, c'est cool. Et on va se sentir ici, et ensuite on va le mettre comme une culture, donc oui, on peut faire des cultures là-dedans. Nous allons créer un autre rectangle de la même taille que celui-ci. D' accord ? Et nous allons mettre, comme vous pouvez le voir ici. J' ai un peu, euh, linéaire dans ton radieux sur le dessus avec un peu d'opacité. Donc, Gates, parce que si je mets le texte ici, c'est copier-coller. Ce test, si j'ai payé, est basique Ici, sur cette photo, vous pouvez le voir arriver, mais parfois, hum a. Donc nous pouvons voir parfois ce n'est pas trop fiable. Donc pour ça, nous allons créer le S Theis, un Grady linéaire ici. Alors, allons-y pour linéaire. Grande tante et puis ça change la capacité à 102 et ensuite on va monter un peu sympa. Je ne sais pas si c'est trop sympa, mais oui, on s'en sortira. Je ne sais pas si c'est trop sympa, mais oui, mais oui, Donc, nous avons utilisé la rareté A de Theis à 70% ou 60%. Tu peux jouer tout ce que tu veux. Peut-être que vous pouvez juste essayer aussi bien certains multiplier ou écran ou quelque chose comme cette école. Eh bien, peu importe. Je vais juste laisser ça, genre, normal pendant quatre jours. Ok, Donc comme nous le voyions ici, quand nous Khobar ici, un texte apparaît et apparaît comme un orteil inférieur. Donc je vais juste copier ces deux éléments ici dans ce dessin. D' accord ? Et ces bas ici et la ligne de fond va le placer ici parce que je veux quand nous arriverons à l'écran d'être à gauche ou à droite. Donc, si je viens de sélectionner cet élément et vous pouvez le voir que nous l'avons ici choses qu'il a fait vous 100 envoyé ce texte à 100 à. Donc, comme vous pouvez le voir, nous avons tous les éléments d'ici. Nous l'avons déjà ici, mais nous devons avoir ces éléments. Comme, euh, il ne l'a pas fait avec l'opacité. Vous déplacez ça autour de 20 ans et nous sommes prêts à y aller. Donc ce que je vais faire ensuite, c'est Ah, oui, je vais à quelque chose. Je vais mettre ce texte ici. Ok, donc plus tard, quand on fera nos animations et les changements, ça va être une épave. Donc ce que je vais faire, c'est oui, grouper ça, et je vais l'appeler, hum je vais juste appeler l'article 1 pour qu'on n'ait pas trop de stress sur les noms et tout. Donc nous l'avons fait, je pense, aussi. Idée 3. Ok, donc c'est bon d'y aller et ce qu'on va faire. C' est, euh, euh, ces deux éléments les mettent avec une opacité nulle, parce qu'on y va plus tard. Eh bien, on ne peut pas laisser ça comme ça à partir de maintenant et puis ce que je vais faire est juste de dire ça à photo alors on voit quelque chose de différent. Non, les palmiers pourraient être gentils d'être sur la plage maintenant. D' accord. Cette école, et puis je vais juste changer cette photo pour et sur ce Plus, a dit Blufgan, vraiment vouloir répondre aux orteils pour nous. C' est juste une autre envie de nater. C' est vraiment cool sur quelque chose que je veux faire. C' est une image. Il a juste dit à recadrer si plus tard, il ne fait pas étaient des choses. Quand ces photos grandissent, on peut la contrôler et l'ingérer. Quand ces photos grandissent, Donc, c'est une bonne pratique, selon ce que vous voulez définir ceci pour recadrer et nous sommes trouvables. Ok, donc nous avons notre pré-maison à peu près mis en place, et ce que nous allons faire est juste de dupliquer ça parce que, rappelez-vous, nous avons besoin des mêmes éléments ici et là, même si nous avons fait des changements ici. Donc ce que nous allons faire est de créer cet effet Cambodge, euh, euh, Khobar. Donc pour ça, ce que nous allons faire, c'est quelque chose comme ça, et nous allons juste choisir ces deux éléments et amener notre Gamba ici et ce que nous allons faire comme ça. Ok, je sais que ça a l'air un peu rapide, mais ça va marcher. Donc, pour cela, nous avons besoin d'un texte plus petit sur, vous savez, laissez-les courir et ce texte. Nous allons simplement mettre la capacité à zéro. Parce qu'on va bien, alors, euh, quelque chose que je n'aurais pas dû faire. C' est aussi. Il semble la taille de ce, mais ça n'a pas vraiment d'importance honnêtement, parce que l'important, c'est cette partie gauche. On ne va pas voir cet élément. Donc, nous avons mis ceci pour vous revoir pour vous débarrasser de lui ne donnera pas rapport partie, vous savez ? Et comme vous pouvez le voir ici, nous avons des effets sur les 40 Donc ce que je recommande c'est de revenir à l'image des orteils, euh, mettez-la à un exploit, ok ? Ou se sentir ouais, c'est mieux que de grandir. Et puis nous sommes allés utiliser la façon dont nous voulons que cela se comporte. La même chose s'applique au Cambodge. Eh bien, ici à notre photo. Ensuite, nous avons mis ça pour s'adapter. Sentez oui, récoltez-le et puis nous deux, nous pouvons à un autre. C' était l'école. Ce genre de soulever leur Donc, euh, euh, ouais, on est prêts à y aller. On doit le faire. Ces deux éléments sont déjà configurés. D' accord. Et pour ceux-là, nous allons le faire. C'est dans ce cas. Je ne vais pas être si dur qu'Asai était là, donc j'ai été un peu tendu dans tout. Je vais juste partir avec la photo dans le linéaire. Ah, rayonnante. Et faisons la même chose avec la photo. Comme avec l'avant exprimer comme sentir puis recadrer. Ok, pour qu'on puisse choisir. Ah, la position des photos que nous aimons. Donc, la photo fera comme une transition supercool. Probablement comme la mise à l'échelle en soi va être génial. Je pense que oui. Déplaçons ça vers la droite. Et ces textes, ces deux textes, nous les voulons. Je suis au centre, alors vous les sélectionnez et nous voulons notre orteil de test. Viens ici. Oui, c'est bien. Et nous avons cette partie déjà mise en place, et ceux-ci sont configurés et c'est cool. On a seulement besoin d'orteils. Hum, cache ça. Donc on va mettre dans Ciro. La capacité, c'est la même chose, va être du sirop. On se voit encore. Comme vous pouvez le voir, Super jolie mise en place de base. Et maintenant, nous sommes prêts à prototyper. Ok, alors sélectionnons notre maison, puis allons au prototype. Voyons les paramètres du prototype. Le cadre de départ est la Norvège. On ne veut pas qu'on veuille juste la maison. Je vais rentrer à la maison et il est, genre, moins ou raison, donc on a un autre poste ici. Donc maintenant, si nous auto nos paramètres de prototype, vous pouvez voir ici nos appareils taille personnalisée parce que nous utilisons comme ça Ils ont arrêté comme ça Juste bouleversé cela. Et comme vous pouvez le voir ici dans le panneau de conception, j'utilise 1140 par 900. Donc, nous venons ici pour prototype, améliorer les paramètres de temps et nous avons deviné, mettre en taille personnalisée cette taille, si vous travaillez avec une autre taille est assez bon aussi. Vous pouvez mettre ici décide que vous voulez Oui. Assurez-vous qu'il est de la même taille que votre, hum, hors de votre cadre. D' accord. Ah, Eh bien, dans ce cas, je veux dire, si vous voulez avoir un parchemin ou c'est ah, Long Page ou quelque chose comme ça, vous pouvez juste laisser sur le prototype les paramètres de la Et si vous avez plus de contenu ici, il défilera. Ok, donc pour l'instant, on va y aller et ce qu'on veut. Ici c'est Nous avons notre ensemble de prototypes, et ce dont nous avons besoin est orteil mettre des interactions et des animations dans ce Donc, pour ces, ce que nous faisons est oui, sélectionnez. Ce groupe est hyping One est celui que nous voulons faire lorsque nous relooking avec Select the second écran plus. Donc, ce que nous allons faire est à la place off on click. Ce que nous voulons est en survolant, nous voulons que ceux-ci naviguent à la trame de classe droite à la place, hors instantané avec Faisons un Let's make, Voyons comment cela fonctionne. Comme vous pouvez le voir, c'est assez rude. C' est comme si je ne savais pas, 20 ans. Rencontrez-le seulement. Donc nous allons à la place de l'orteil va, une animée intelligente, d'accord. Et je veux utiliser la facilité. Donc nous avons une sorte de lent que d'accélérer, puis de ralentir, ralentir à nouveau pour que nous puissions voir ici un peu. Et nous allons mettre ici, genre, 500 millisecondes. Donc, c'est comme aller la moitié pendant une demi-seconde et voir comment ça se passe. Ok, eh bien, ça marche plutôt bien. Comme vous pouvez tout voir, il bouge bien. Tout fonctionne, donc c'est à peu près tout. Si vous voulez un A, donc vous pouvez voir ici. Qu' est-ce que vous devez faire pour l'arrestation de leurs cadres, c'est juste faire la même chose avec ça ici. Donc, pour cela, vous pouvez juste dupliquer ceux-ci et ensuite ceux-ci. Ah, l'ISS. Cette partie, euh, plus petite. Et, vous savez, comme les mettre à l'échelle et ensuite déplacé ceux-ci et c'est pré doit à peu près la même chose. Ok, donc la même chose qu'on a fait ici, on devrait le faire ici, puis au troisième cadre, et on est prêts à partir. Alors c'est tout. Nous avons un prototype de supergroupe loin en planant. 7. Cartes - Défiler les scrolling horizontaux et verticales: Hé, bienvenue à l'arrière de ce court tutoriel sur la façon d'utiliser le défilement horizontal et vertical de la bonne façon. entendant Fichman, j'ai un exemple ici sur la façon de faire une thèse de jambe ramper et ces verticales Carney dans la bonne voie. Ok, parce que j'ai, genre, un exemple ici, il semble le similaire. Mais est ce deuxième écran sur la gauche et vous pouvez voir si nous ne le faisons pas bien. Nous avons vertical sur un appel récent, Oui, mais c'est calme. Quickie. Alors apprenons à le faire de la bonne façon. Droit ? Donc, nous avons ces derniers temps appeler ici et ces verticales appelant ici avec fonctionne parfaitement ou Ok, alors créons sur iPhone huit plus écran ici, et nous allons le nommer comme classe un. Nous sommes donc sur la même page ici. Je vais juste dupliquer ça. Heather n'est pas une grosse chose. Ce n'est pas un gros cerf. Est tout comme vous pouvez le voir à l'intérieur de ce groupe en allant juste sur ce groupe, en fait et mettre ce rectangle ici. Oui. Tu chantes ? Je vais, euh, c'est l'icône, en fait. Et j'ai le titre. Nous avons le Je peux entendre la flèche. Nous avons le texte et nous avons l'expertise et le contexte. On en a besoin. Donc, quand nous demandons le rôle Comme vous pouvez le voir, le texte ne prend pas de retard dans les données. OK, donc on a, genre, un fond blanc va juste pointer jaune. Donc on voit ce qui se passe. Et pour le reste, je vais juste copier cette voiture que j'ai ici. Eh bien , je vais le répliquer. C' est assez simple, en fait. Donc, c'est des drovers enchevêtrement, quelque chose comme ça. Assemblez les notes, Disons pour son fond de mise comme rouge. Et je vais juste copier et coller ce texte ici. Ok, donc c'est le nom. C' est un grand nombre. D' accord ? Je vais juste mettre ça en blanc et notre texte. D' accord ? Rien de fantaisie. Descendez juste à 12. Exécutez la date. Ok, facile. Donc, ce qu'on va faire avec ça, c'est oui. Ah, fais un groupe. D' accord. Alors, oui, vous d'abord. Allez, Viens, Andy. Et vous avez le groupe, et ce que nous allons faire est juste de dupliquer ceci et puisque la couleur de fond jaune et nous allons faire une autre copie, et nous allons le mettre en vue principale. Ok, donc on est bons et on s'en va quatre jours. On pourrait faire, genre, un groupe ou quelque chose comme ça, mais pour ça, quand j'ai, genre, pour ce genre de regroupement ce que j'aime faire, c'est en fait, euh, sortir tôt. Ok, donc on appuie sur un ou un clic droit à l'extérieur, donc on peut maintenant séparer les éléments comme on n'en aura pas besoin. Et même à certains, si nous avons besoin de créer un peu d'espace, certains ayant une journée très, très début. Et la fin, ça va être sympa. Donc, pour cet objet particulier, je vais créer ceux-ci. Je veux dire, je vais mettre, genre, 20 ici soutiennent. On pourrait mettre 30 mais 20. Très bien. Alors ça va aux orteils. Donnez-nous ces espaces ici dans cet espace là-bas au tout début à la fin. C' est hors de ça. Cet objet. D' accord. Donc, même si ça met ici comme un ami 17, je veux toujours mettre ça dans un cadre. D' accord. Ah, nous verrons. Eh bien, je ne vais pas le dire maintenant. Allons qu'il aimerait ça. D' accord. Comme on peut le voir, mon ami. 17 quand Fichman met le cadre sur le nom du groupe ici, c'est parce que c'est en dehors du cadre réel. Donc pour cela ce que nous devons faire. Venez ici et faites-le glisser en classe 1. Comme vous pouvez le voir maintenant, les parties de, il même si quoi ? On peut aller le voir. Il est de sélectionner le cadre et le contenu du clip, et puis vous serez vous serez coude pour le voir. D' accord. Et ce que nous voulons faire à nouveau. Il n'a pas effondré ça, donc nous voyons clairement ce que nous avons ici. Nous avons notre bruyère notre histoire. Donc je vais mettre l'arrière-plan à l'intérieur de la bruyère, en fait. Alors, d'accord. Ici. Bon, donc maintenant l'arrière-plan est à l'intérieur de la bruyère dans celles-ci que je vais appeler. Appelez ça comme horizontal. On pourrait pour l'autre nom un peu ou quoi que ce soit. Tu veux un nom. Et ça allait faire comme, nous allons utiliser cette sélection de cadres. D' accord. Vous avez raison. Cliquez ici et la sélection d'amis. Pourquoi c'est ça ? Parce que maintenant on peut changer la taille du cadre. Comme vous pouvez le voir avant, je vais juste annuler Nous n'avons pas les poignées parce que c'est un essai AL. Ok, donc nous devons convertir ça en un cadre pour encadrer cette élection. Ce sera notre mouche là-bas. Et ce qu'on veut, c'est non plus, Toby nous avec le cadre éteint. C' est plus léger. Nous voulons arriver à partir du début à partir de x zéro, remorquer ce point ici. D' accord. Et pourquoi c'est ça ? Voyons voir, Préparons notre prototype pour fonctionner. Donc, dans ce cas, va être la classe un. Ok, donc on a déjà un marché ici. Donc maintenant, vous voyez, j'essaie de revenir pour glisser, et ça ne marche pas. Laisse-moi juste mettre ça en blanc. Le jaune est gentil trop. Tu vois, ça ne marche pas pour que ça marche. Ce qu'on doit faire, c'est en prototype. Vous voyez, nous n'avons pas besoin d'interaction maintenant, juste le comportement de débordement. Nous avons juste besoin de le mettre sur le défilement horizontal Comme vous pouvez le voir, nous avons aussi un défilement vertical et horizontal ou vertical. Mais dans ce cas particulier, nous voulons que ces trois boîtes orteils viennent de plus sur Lee sur l'axe horizontal. D' accord. Sur le reste de ces moindres ces feuilles feront comme une verticale. Ça va bien, mais voyons plus tard. Donc, nous avons déjà créé cela et nous prenons ce défilement horizontal orteil et voir. Voyons si ça marche. Eh bien, maintenant ça marche. Travailler très bien, non ? Donc je vais travailler maintenant pour copier toutes ces choses. Oui. Laisse-moi me débarrasser de ça. J' ai comme, euh, cette liste massive, donc je vais sélectionner le cadre basé. Et ce que je vais faire, c'est, ah, sélectionner tous mes éléments et nous sommes là. Voyez-vous ? Il met mixte. Il suffit de le laisser sur le dessus. Donc, quand vous avez la taille, , ce cadre, il n'a pas d' échelle ou de faire des choses ici, donc tout reste en place. Ok, donc, euh, ouais, donc maintenant si on fait défiler ici comme vous pouvez le voir, le défilement vertical fonctionne et ils se dépêchent. Parfois, Curlin travaille aussi bien. Ok, une chose intéressante que je n'ai pas faite ici, c'est qu'on veut réparer notre bruyère. Alors, comment faites-vous ça pour ça ? Vous sélectionnez votre bruyère et vous cliquez ici position fixe quand il rampe ? Donc maintenant, il va rester en place. Et nous avons eu un sui a mis comme un fond blanc sous la bruyère. Vous pouvez voir que tous les textes sont en cours d'exécution de ce film. Ok, voyez si nous devinons mettre ceci transparent quand nous faisons défiler va être comme vous savez, Messi peut être cool pour certains sites, mais pas pour celui-ci. Donc, nous l'avons déjà fait défiler horizontalement Ascoli vertical. Ok, alors on se voit dans le prochain tutoriel. 8. Menu utilisateur - Superpositions et échangez avec: Hé, bienvenue à ces derniers tutoriels va être rapide ce que nous avons ici. C' est de type frère et on va se mettre à pied. Essayez trois e overlay, comme nous pouvons le voir ici, l'outil de prototypage de superposition et ce qu'il fait est, comme son nom l'indique, il met une superposition sur le mainframe. D' accord , comme vous pouvez le voir, je les ai assis. Donc, quand je clique sur disparaît quand je viens ici, la superposition apparaît. Et quand je fais comme un État de Khobar, je sais que c'est plus de temps. Mais imaginez que vous travaillez dans une application de bureau, donc je vais répliquer ceci. Comme vous pouvez le voir, c'est une descente assez simple, donc nous allons créer une liste déroulante. Donc pour ça, nous Drover s'emmêlent bien et appliquons Soundboard les radios, disons pour huit. Donc c'est un peu plus par là. Je vais appliquer un certain effet dans ce cas. Je vais mettre juste le subtil que j'ai ici et mettre ceci en blanc, la couleur de fond. Donc on a ça. Ok, donc on est sorti ou on est en retard, plus ou moins prêts. C' est à quelques objets ici. Je pense qu'un d'eux sur je ne fais pas trois et moi. Je vais postuler. Essaie ici. Donc, ils sont tous distribués de la même manière. Et ce que je veux, c'est mettre un peu de fond ici dans les deux élémentaires. Laisse-moi oui. Ah, j'ai un peu pâteux. Donc, il vient à l'avant. D' habitude, je le fais de cette façon. Et dans cette partie, ce que je vais faire est de mettre ça en blanc, ok ? Parce que nous devons juste ajuster cette chose ici parce que plus tard, nous allons changer cette couleur. Et au lieu de quoi, on va mettre ce genre sur un grand écran bleu. OK, donc pour faire ces superpositions ce que nous devons faire, c'est, ah, ah, encadrer la sélection. D' accord ? Parce que c'est comme ça que c'est comme ça qu'ils fonctionnent. Donc, nous allons juste enlever les choses de notre cadre principal. Et comme vous pouvez le voir, nous avons ici maintenant ce cadre pour aller à toria overlay un, parce que nous allons dupliquer cela dans le S ok sur pour appliquer ce fond lorsque nous Khobar ou quand nous cliquons dans l'élément deux. Ok, donc on a tous à peu près le top comme ça. Et que dans Nous allons en mode prototype maintenant et rappelez-vous, nous devons changer. Notre cadre de départ. Nous voulons être cette seule façon vont faire le tutoriel avec celui-ci. Ok, Et ce que nous voulons quand nous cliquons ici sur l'utilisateur, Um , par défaut pieds Myers va dire dans Arigato. Mais comme on peut le voir ici, que se passe-t-il ? Si on fait ça, il navigue, mais c'est horrible. Ce n'est donc pas le fait que nous recherchons. Et ce que nous voulons est quand nous cliquons ici les superpositions plus heureux ici mais maintenir ces amis. Alors faisons-le. Ouvrons la superposition et voyons. Qu' est-ce que ça veut dire ? Oui, on commence quand on fait ça. Il apparaît ici au centre pour que nous puissions contrôler où ils superposent des années. Donc pour cela, nous le vendons ici, et, comme vous pouvez le voir dit centre, cela signifie qu'il a fourni le remorquage. Il applique la superposition au centre. La page que nous pouvons faire comme des ajustements rapides et vous pouvez voir où il va. Vous pouvez voir ici qu'il bouge. Ce que je fais habituellement pour ces particules sont des superpositions. C' est toujours pour Zeman. Aussi, je peux positionner ce que je veux dans ce cas. Cette position est bonne et ce que je veux, cela a continué à planer bien ou a donné un coup de pied. Disons en haut, Ok , quand on , quand on clique sur l'élément à ce genre hors fond des années ici. Alors disons-le. Et ce que nous voulons aussi, c'est d'échanger cette superposition avec cette ancienne superposition. D' accord, donc on va mettre la superposition sur le dessus. Dans ce cas, nous allons l'utilisation des orteils frappé avec arrêt avec où cela signifie Est-ce qu'il change ce cadre avec cet autre ami mais maintient le trop sur. Ok, alors sélectionnons à nouveau. Ça et on va aller aux pieds. Faites-le avec tutoriel. Arrêtez, arrêtez avec tutoriel à ceci, celui-ci et l'animation que nous voulons être instantanée. On ne veut pas de l'âme pour quelque sorte. On peut mettre le smart, animer Voyons ce qu'il fait. Ok, donc c'est que ça marche bien, mais voyons d'autres options qui sont ici dans les superpositions est sexy. Comme vous pouvez le voir, nous avons la position sur superposition manuellement, et nous avons de belles options ici que le premier est proche lorsque vous cliquez à l'extérieur. Cela signifie que si je clique à l'extérieur va disparaître, ce qui est assez bon, parce que habituellement le comportement que vous voulez dans vos prototypes que si vous avez sur superposition dans beaucoup, vous abandonneriez vers le bas. Que voulez-vous voir ou quel respect est-ce que lorsque vous cliquez en dehors de celui-ci ? Puis il disparaît et un autre mangeur de CUF qui nourrit ma maison, C'est, Ah, ceux-ci à l'arrière-plan derrière les superpositions. Comme vous le savez peut-être, quand vous faites, comme des superpositions ou des pop-up menus ou des cartes pop-up Lorsque vous cliquez ici, ils obtiennent ce genre de fond Ah, un peu plus sombre pour faire pop l'élément vers le haut. D' habitude, j'aime vraiment que les orteils soient en contact, donc je n'aime pas. Je ne pousse pas à avancer quelque chose qui peut être pour un pop-up ou pour une fenêtre de modèle, c'est bon. Mais pas pour ce genre hors éléments. En fait, pour ce genre d'éléments, je ne dis pas que ça va, parce que tu as le triste Oh, donc c'est assez bon pour être en compétition. Peut-être que ce satellite n'est pas le meilleur parce que nous perdons un peu notre frontière ici, mais d'accord, c'est ça. Ces choses sont des choses conçues. Et c'est pour le prototypage et l'animation. droite ? Donc, nous avons presque fini ici, donc vous pouvez voir que nous avons ces transitions. Vous devez donc apprendre ce que vous pouvez faire avec les superpositions. Merci de vous joindre à moi et de vous voir sur la dernière vidéo. Merci. 9. Félicitation et remerciements !: Félicitations. Tu l'as fait. Toi, ici. Je veux juste dire merci d'être allé aux scores et hors cours. J' espère que vous avez appris quelque chose d'intéressant aussi sont vraiment bons, comme vous orteil essayer de faire quelques exemples ânes que nous avons fait dans la classe sur ce. Vous mettez votre prototype une vidéo ou un lien à vos pieds maintenant prototype. Donc, si vous avez des doutes, je peux vous aider à le revoir ou comment l'améliorer ou quoi que ce soit. Vous venez de le mettre dans le panel de discussion ou de commentaires, et je veux que vous nous encouragiez bien, à voir tous les chiffres que j'ai. Alors peut-être que tu trouves ça intéressant. Comme vous êtes intéressé par un extérieur intelligent et Sigma. Ou peut-être comment créer le système scientifique à partir de zéro. Fais oui. Occupé mon profil d'esprit. Et vous avez plus de cours ou sur fiqh esprit croquis à. Alors peut-être que tu en as trouvé quelques-unes. Intéressant. Alors merci pour votre ennemi et comment votre journée