Total ProtoPie - Apprenez le prototypage avancé sans code

1. Introduction totale à ProtoPie: Salut là et bienvenue aux pros totaux et mon nom est Darren lit et je suis un designer avec plus de 30 ans d'expérience dans l'industrie du design. Waves a été passé dans l'espace numérique où j'ai conçu expériences Web et des expériences à partir d'appareils mobiles. Et de vous présenter mes conceptions d'interaction préférées ou de jolis. Donc on va apprendre le profil à partir de zéro. Vous n'avez pas besoin d'ouvrir ce sol avant de ne pas avoir besoin de connaissances préalables. Et nous allons suivre l'apprentissage étape par étape ou les principes fondamentaux et vous mettre à niveau à un niveau d'expérience où vous serez sûr de pouvoir utiliser cet outil dans votre travail sur vos projets dans l'industrie réelle. Et vous allez obtenir l'avantage de moi avoir utilisé est total pour les trois dernières années en fait dans l'industrie sur des projets réels et dans la construction de vraies applications. Donc nous allons utiliser une fausse application. Les centrales à charbon sont notre façon d'explorer les différentes pintes de résolution de problèmes et de techniques que nous allons utiliser. Et j'ai choisi cette application parce qu'il est un bon mélange d'utiliser des modèles de conception mobiles standard ainsi que beaucoup de modèles de conception personnalisés et des animations ainsi. Donc, nous allons avoir beaucoup de plaisir à construire certaines de ces fonctionnalités. Ça va commencer. Nous avons appris à nager des graphismes à partir d'autres outils de l'industrie pris en charge, tels que Fichman, Sketch et Adobe XD. Nous allons apprendre à créer des animations standard et personnalisées. Nous allons créer un véritable flux de connexion, avec la gestion des erreurs, créera une fonctionnalité de favorisation qui permettra sauvegarder dynamiquement le contenu en fonction du choix de l'utilisateur. En utilisant la logique conditionnelle, explorera la navigation et créer un ATS avait été que faible à son tour utilise un composant réutilisable que vous pouvez utiliser dans n'importe quel projet. Construira une application photo réelle en utilisant des capacités de protoplastes pour l'intégrer au matériel de l'appareil, comme l'appareil photo de votre téléphone. Allez explorer des fonctionnalités complexes telles que les variables et les avantages de PyCon, minutes complètes, les instructions discrètes faciles à apprendre et offrant une puissance avancée, mais sans avoir besoin de connaissances avancées, vous serez étonné à quel point il est facile de sentir que fonctionnalités vraiment avancées vont ensuite prendre notre application et faire des composants réutilisables, les transformant en une bibliothèque de composants qui peut être utilisée sur plusieurs projets. Enfin, nous allons voir comment vous pouvez tester et partager vos prototypes pour utiliser des tests de convivialité ou les partager avec les parties prenantes. Et comment vous pouvez utiliser des recettes d'interaction pour communiquer facilement votre live in, travailler dans la conception d'interaction avec les développeurs sans avoir besoin de créer ennuyeux, long. Et on va rire. J' apprends à nouveau la sonde Heights. Je crois vraiment que la seule conception d'interaction, donc sur le marché en ce moment, cela vaut vraiment la peine d'investir votre temps. Surtout si vous ne voulez pas apprendre à coder ou si vous trouvez coder une proposition effrayante. La hauteur de sonde est un outil conçu pour les concepteurs pour explorer ces idées de conception depuis le début jusqu'à la fin. Donc si c'est quelque chose qui vous intéresse, prenez ce cours et je vous verrai en classe. 2. Installation de ProtoPie: Salut là. Donc, avant de commencer, nous devrons installer le logiciel de protoplastes si vous ne l'avez pas déjà. Donc, si c'est le cas, allez au prototype. Voici le site des protoplanets ici. Et ce robinet sur le triomphe du lien libre. Vous serez redirigé vers cette page où vous aurez juste besoin de mettre votre e-mail, puis de vous inscrire et vous obtiendrez le fichier d'installation. Et c'est juste un atome normal. S' installe donc de la manière normale pour Mac et Windows. Assurez-vous donc de le faire avant de passer à la vidéo suivante. L' autre chose que je veux attirer votre attention est les actifs phi également attachés à cette vidéo est un fichier zip pour tous les actifs. Si nous double-cliquez dessus et jetez un oeil à l'intérieur d'ici. Il n'y a donc que quelques atouts. Vous avez donc des fichiers Adobe XD. Si vous suivez avec Adobe XD, nous avons également sigma, et nous avons les fichiers d'esquisse. Nous n'utilisons pas les ressources de chaque vidéo, mais il y a certaines des conférences pour lesquelles nous avons besoin de ressources si vous voulez suivre. Une autre chose que j'ai inclus est la tendresse est un Google Fonts gratuit à utiliser. Mais j'avais juste pour plus de commodité, je l'ai mis dans le dossier des actifs aussi bien. Et enfin, nous avons un autre dossier Assets dans le dossier assets. Et à l'intérieur d'ici, certains pré-exportent des graphiques HD que nous utilisons pour évaluer des vidéos. Donc, vous devriez être en mesure de trouver tout ce dont vous avez besoin ici et vous devriez être prêt à partir. Ok, donc c'est à propos de ça pour cette vidéo. Alors soyez impatient de vous voir dans la première vidéo et de commencer à le faire semblant. On se voit là-bas. 3. 3 Une visite rapide de ProtoPie Studio: Ok, donc commençons par jeter un oeil au studio de haute sonde. Lorsque vous lancez Studio, vous serez présenté à la fenêtre de démarrage. Donc, créons un nouveau fichier. Ok, donc maintenant nous avons un tout nouveau fichier sans titre. Donc, dans le capteur, vous verrez l'ARPU où vous allez créer votre prototype. Et juste au-dessus, voici le menu préréglages de l'appareil. C' est donc là que vous pouvez choisir la taille de votre prototype. Et il y a un certain nombre de préréglages ici pour iOS, Android et bureau. Et nous avons également la possibilité de créer une taille personnalisée. Sur la gauche se trouve notre panneau Calques. Ainsi, lorsque nous importons des graphiques à partir de notre application d'attaque graphique, ou que nous créons des objets nativement, ils peuvent réparer ici. À gauche, on veut sortir des panneaux. Donc, ce premier est le modèle des scènes. Et puis juste en dessous, nous avons le panneau Composants. Je viens juste de descendre en bas ici. On a les panneaux de variables. C' est donc là que nous allons créer nos variables que nous utilisons pour certaines fonctionnalités logiques dans Pr pi. Et juste à gauche, vous verrez que nous avons accès à notre compte pro pi ainsi qu'à certains paramètres d'application studio. Sur la droite, nous avons nos contrôles de zoom pour que vous puissiez zoomer avant et arrière de notre Apple. Et sur la droite ici, nous avons la capacité de notre cadre de l'appareil sur un off. Maintenant, tous les presets n'ont pas de cadres, mais certains des plus importants le font, comme l'iPhone. Et nous pouvons descendre et jeter un oeil à, disons, le Galaxy S dix, qui a également un cadre d'appareil. Ok, déplace-le vers la droite. Nous avons le panneau Déclencheurs. C' est là que vous allez créer toutes vos interactions. Et à côté de cela, nous avons le panneau Propriétés. Ce panneau sera donc contextuel en fonction de ce que vous avez sélectionné à l'époque. Actuellement, nous avons la même sélection pour voir les prophéties de notre scène. Et juste au-dessus dans le panneau Propriétés Nous avons un aperçu, une zone d'aperçu d'image. Et juste au-dessus de cela, ces sources vous semblent assez familières. Les outils d'alignement que nous avons. Ainsi, nous pouvons aligner des objets sur la boucle. Dans ce coin, il y a des flèches gauche et droite. Il s'agit donc d'une navigation historique. Alors que nous passons de semble à semer ou à l'intérieur d'objets ou de composants, nous pouvons naviguer vers l'avant et vers l'arrière le long de l'histoire d'où nous avons été. S' attaquer très utile. D' accord, je monte au sommet. Donc, nous avons tout un tas de boutons et de menus en haut ici. Donc, sur le côté gauche, on a des impulsions. C' est ici que nous pouvons importer nos graphismes à partir d'Adobe XD Fichman sketch. Nous avons un bouton image qui nous permet d'importer des images à partir de notre système de fichiers. Nous avons un menu multimédia qui nous permet d'importer d'autres types de médias tels que la vidéo booléenne. Le menu de forme ici, il nous donne quelques objets primitifs de base que nous pouvons dessiner directement à l'intérieur d'un pro fournissant des structures, des rectangles et des cercles. Et le menu fiscal nous permet également d'ajouter certains objets de besoins liés au VIH. Nous avons donc un objet d'étiquette de texte, et nous avons également un objet de champ de texte d'entrée. À côté de ça, nous avons le menu des conteneurs. Ainsi, vous pouvez penser que les conteneurs sont synonymes de groupes dans votre application graphique. Nous avons donc un conteneur de base, mais vous avez aussi ces autres conteneurs spécialisés. Nous avons défilement contient Out qui nous permet de faire des vues défilantes. Et nous avons un conteneur de pagination qui nous permet de faire des vues de pagination. Et enfin, sur le côté droit, nous avons le bouton Composant. Donc, nous pouvons cliquer dessus pour créer de nouveaux composants. Ok, donc passer sur le côté droit. Ce groupe de boutons est donc lié à l'affichage de nos prototypes. Donc, nous avons le bouton de prévisualisation pour que je vais juste mettre nos fenêtres de prévisualisation à l'avant. Donc la fenêtre d'aperçu sera toujours activiste une fenêtre séparée, mais elle sera derrière notre dossier. Donc on peut juste mettre ça au devant de mon apathie cachée. À côté de cela, nous avons le menu de l'appareil. C' est donc là que nous connectons de vrais appareils au studio. Ainsi, nous pouvons envoyer un prototype à un iPhone ou un téléphone Android ou une tablette. Et pour ce faire, nous utilisons le bouton Exécuter. Donc, contrairement à l'aperçu, où la mise à jour automatique précédente, que nous construisons notre prototype, nous devons envoyer manuellement notre prototype à un appareil avec le bouton Exécuter. Enfin, dans ce coin supérieur droit, nous avons des nuages pour que nous puissions télécharger nos prototypes dans le Cloud. Et Cloud a tout un tas de fonctionnalités qui vont entrer dans le laser. Des choses comme la possibilité de partager notre Prosite avec d'autres. Et bien sûr appelé contrôle de version à l'intérieur du nuage et un tas d'autres choses regarderont plus tard. Et pour télécharger votre prototype dans le cloud, utilisez le bouton Télécharger ici. Ok, donc ça termine notre visite rapide de l'interface du studio de précipice. Donc, comme vous pouvez le voir, il est assez familier aux autres outils graphiques que vous utilisez probablement. Certes, des outils tels que l'épaisseur croquis dans la journée nous XD. Et nous allons commencer beaucoup plus familier avec nous au fur et à mesure que nous travaillons tout au long du cours. C' est donc une enveloppe pour l'outil rapide. se voit dans la vidéo suivante. 4. Organiser vos fichiers - meilleures pratiques: Avant d'entrer dans les fonctionnalités d'entrée spécifiques, je pense qu'il vaut la peine de prendre un moment pour parler certaines meilleures pratiques lorsque nous structurons, importation de nos fichiers pendant les graphiques est un état d'esprit très différent. Des interactions folles. Au fil du temps, vous apprendrez comment swaps dossier graphique mojo sur le dépliant. Mais si vous êtes nouveau dans le prototypage ou la conception d'interaction, vous aurez probablement besoin d'effectuer un nettoyage de fichiers avant d'importer. Voici mon top set pour les choses qui vous faciliteront la vie. Astuce numéro un, nommez vos couches. Si vous voulez rester sain d'esprit tout en prototype dans ce est un must. Nous avons tous été ici avec ce genre de structure de nommage sur quand nous sommes à l'intérieur de proto pi, nous allons utiliser les noms et les objets comme référence pour ajouter des interactions. Donc, nous voulons nous assurer que tous nos objets permettront aux graphiques à l'intérieur de notre fichier d'avoir des noms logiques afin que nous puissions les trouver quand nous avons besoin d'ajouter une interaction à eux. Astuce numéro deux, évitez les groupes imbriqués inutiles. Donc, comme vous pouvez le voir ici, nous avons ces groupes, qui sont effectivement des groupes vides qui vont ajouter beaucoup plus de complexité à notre fichier. Et ça va rendre plus difficile pour nous de trouver des choses. Donc c'est ce genre de chose que nous voulons éviter. Qu' est-ce qui supprime l'un des groupes imbriqués inutiles. Astuce numéro trois, interface utilisateur liée au groupe ensemble. Donc, quand vous concevez pour l'interaction, le mouvement, vous allez vouloir regrouper les choses logiquement ensemble. Donc, à titre d'exemple, si je passe à cet écran ici, et vous pouvez voir que j'ai ceci, ce genre de grille d'images. Et si nous regardons vers le bas dans le panneau des calques, nous pouvons voir que toutes mes images sont regroupées dans ce groupe pourrait refroidir flux de photos. Et je l'ai fait parce que ce groupe de flux de photos va être une vue défilante et je vais vouloir tout faire défiler ensemble. Alors pensez à votre conception et pensez à ce que les bits sont liés ensemble, quels paris vont un peu bouger ensemble, et puis assurez-vous de les regrouper à partir de l'ensemble final correct. Réorganiser vos couches selon la hiérarchie correspond à l'interface utilisateur. Alors de quoi je parle là ? Donc, passez à cet écran de connexion. Donc vous pouvez voir ici que j'ai ces objets qui sont sombre de haut en bas. Et si nous regardons dans le panneau des calques, vous pouvez voir que cela en fait exactement dans le même ordre. Donc, si je souris sur ces objets et si vous gardez les yeux sur les calques, vous pouvez voir qu'ils sont tous dans le même ordre. Donc, quand vous animez, quand vous êtes à une interaction, cela a beaucoup plus de sens pour votre cerveau que la façon dont les programmes graphiques le font normalement. Donc, à titre d'exemple, nous pouvons voir ici, j'ai ce cadre avec ces deux images, pile et pile aussi. Si je duplique ensuite, quelles sont ces images ? Vous pouvez voir qu'il l'ajoute réellement ci-dessus. L' image a indiqué et non pas ci-dessous. Et cela est tout à fait logique quand je suis à l'intérieur de programmes graphiques vont probablement vouloir déplacer cet objet fera des enquêtes objets traits loin. Donc, l'avoir dans le haut le rend accessible. efforts ont été ajoutés en dessous. Je devrais sélectionner dans le panneau des calques ou déplacer quelque chose hors du chemin. Mais quand nous sommes à une interaction à l'intérieur d'un outil tel que proto pi. Cela rend les choses beaucoup plus difficiles pour nous parce que c'est en quelque sorte dans l'ordre inverse de la façon dont il a regardé à l'écran. Et ce genre de gâchis avec nos cerveaux un peu. Ok, donc c'est mes meilleurs conseils pour le hing d'impulsions, organiser votre dossier pour l'impulsion avant d'aller dans pi à pi. Ensuite, nous allons prendre ces premiers écrans et les importer de sigma dans pi. Alors on se voit dans la prochaine vidéo. 5. Importer à partir de Figma: Donc, la première étape de la charge de notre prototype est d'améliorer nos conceptions d'actes. Grâce à ce cours, nous allons construire une nouvelle application cool appelée piety rest. Je ne sais pas pour toi, mais j'adorais les tartes. Donc avoir une application où je peux regarder des photos de jour piézo pour sonner comme le paradis. Avant d'importer nos plantes pour nous concepteurs cependant, je voudrais courir à travers certaines des nuances quand il importe sigma dans écarté. La première chose que je veux parler de ses composants, quand vous Greg et mettre une impulsion dans jolis, il vient comme un groupe modifiable. Mais il y a des restrictions à la façon dont ce groupe peut être importé, car il y a des inconvénients. Donc, l'un des inconvénients est que si vous ajoutez un remplissage au conteneur, au conteneur Fieger, cela ne va pas être transporté par l'importateur dans le pin interprète. Une autre chose qui n'est pas prise en charge par les composants est les coins arrondis. Donc, il y a assez de choses autour des composants qui sont, qui sont négatifs dit malheureusement pour le moment, ce qui signifie que je ne casse normalement mon composant, composants séparés dans sigma, je l'amène à écarter. D' accord ? La deuxième chose est que si vous avez engagé une couche dans sigma qui va l'empêcher d'être importée dans le prototype. Donc, c'est en fait un bon moyen si vous voulez avoir des couches que vous ne voulez pas importer, vous pouvez simplement les cacher à l'intérieur d'un bitmap. Les calques de texte sont des têtes d'impulsion dans le processeur Pi en tant que calques prêts pour le texte. Et ce que cela signifie, c'est qu'ils ne vont pas entrer instantanément en tant que texte modifiable. Ils vont vous permettre d'avoir la possibilité de les convertir en texte modifiable et soda. Mais pour préserver la police de caractères, ils entrent en tant que texte prêt, sorte qu'ils sont effectivement encore GraphX. Et, mais cela, cela signifie qu'ils le feront, ils prendront en charge les polices de caractères et les polices que vous choisissez. Lorsque vous convertissez une mise en page prête à l'impôt dans les tartes de crédit en texte réel. Tu vas devoir venir, on va, on va, on va passer par ça. Vous allez devoir charger le téléphone sur, disons, votre appareil lorsque vous testez sur votre appareil pour vous assurer que le rendu est correct. Ok, donc si vous réduisez l'opacité d'une trame en sigma pour un composant ou un groupe, il est ignoré une impulsion. Ainsi, la seule opacité reconnue appliquée aux couches d'objets réels, les laboratoires d'objets FISMA. Et puis enfin, si vous appliquez des effets de texte tels que le coup, il sera impulser parce que, comme je l' ai dit précédemment, c'est hexadécimal laser dans son format prêt à l'impôt. Mais si vous les convertissez en texte modifiable, et pour moi, vous allez perdre ces effets. Donc, juste quelques choses à garder à l'esprit lorsque vous préparez vos fichiers sigma avant de les amener en jolis. Ok, donc si vous suivez le long, s'il vous plaît télécharger l'épaisse ci-joint se référer au cours de la Section 2, des actifs de stress élevé. Et j'ai déjà préparé ce fichier, donc il est conforme à toutes les directives d'importation que je vous ai données. Donc tu n'as pas besoin de t'inquiéter pour tout ça. Mais ce fichier particulier, assurez-vous que vous avez le fichier ouvert dans sigma. Avec cette ouverture, comme vous pouvez le voir ici, on va aller le faire semblant. Et on va créer une nouvelle pipe. Donc, cela va juste créer un fichier sans titre par défaut, et il va par défaut à l'iPhone 11 pro. Nous allons donc construire cette application pour l'iPhone 11 pro. Donc, nous allons juste utiliser un préréglage par défaut. Donc c'est tout à fait bien. Et la première chose qu'on va faire est d'aller à ce menu impulsif ici. Donc, nous pouvons voir que nous avons les trois options que U3 a pris en charge les applications, Adobe XD, esquisse figurative. Donc, nous allons choisir Sigma. Et nous allons immédiatement obtenir cette boîte de dialogue d'autorisations de protoplanet. Donc, parce que la figue murmure un outil en ligne, nous devons donner la permission d'accéder à nos faux profils. Donc, nous allons juste appuyer sur le bouton du navigateur produit. Ça va faire apparaître une fenêtre de navigateur. Et on va nous demander de donner accès à l'axe S et R. Donc, c'est fait. On peut y retourner et continuer. C' est donc revenir à l'importation et choisir sigma à nouveau. Ok, donc nous avons maintenant la boîte de dialogue d'importation sigma ouverte. Alors passons en revue les options que nous avons ici. Donc, la première chose que nous pouvons voir est cette boîte déroulante, qui nous montre toutes les images que nous avons à l'intérieur de notre Figaro souhaite s'asseoir en arrière-plan et glisser vers la droite ici, nous avons les options pour choisir la taille d'entrée. Vous pouvez donc voir qu'il est par défaut pour ajouter 3x, ce qui est la même que la densité de pixels de notre préréglage iPhone 11. Mais nous avons la possibilité de changer cela à une autre densité. Vous voulez vous assurer que cette densité correspond à votre densité prédéfinie. Si nous sommes fiers de l'EIIL, sinon vos graphismes vont venir sur les sites incorrects. La prochaine chose sur laquelle nous avons quelques options est la façon dont nous importons des couches. Donc, par défaut, il va impliquer toute dernière structure. Donc, ce que cela signifie va prendre la structure de la couche sigma et il va dupliquer cela correctement à l'intérieur du prototype. La plupart du temps, c'est la façon dont vous voulez tirer vos conceptions dans le prédicat. Il existe une option secondaire qui n'est que des couches MLT pour les exportations. Donc, si vous voulez avoir un contrôle un peu plus granulaire sur ce que vous importez à partir de la fig. Vous pouvez exporter des couches spécifiques. Et si vous choisissez cette option, alors ne va que, disons aller à importer les couches exportées dans votre, dans votre profil de crédit. Le reste des oxygènes sont tous en ce qui concerne une, une autre caractéristique à l'intérieur de la réimportation prototypée. Vous pouvez réimporter un fichier FISMA après avoir initialement importé à et cela a une sorte de limites, têtes, avantages. Certes, de mon point de vue, je n'utilise pas vraiment ça, mais juste pour faire un pas pour l'option afin que vous compreniez ce qu'elles signifient. Donc, par défaut, les deux premiers oxygènes Hecht, qui sont des positions supermûres des couches et écrasent les tailles des couches. Donc, si vous avez déjà importé votre fichier et que vous revenez arrière et que vous modifiez la position de la mise en page ou que vous modifiez la taille d'un, ils sont tellement effets que vous modifiez la conception est lorsque vous réimportez l'ensemble, il va mettre à jour tous des couches où vous avez effectué ces modifications. Les deux autres boîtes de discussion, qui sont les ordres de couche de mise à jour et les instructions de groupe. Donc, encore une fois, si vous avez modifié l'instruction de groupe ou si vous passez aux couches autour de la nouvelle fema va appliquer ces modifications à votre importation Lorsque vous la réimportez dans le prototype. Et puis, enfin, nous avons enlevé des couches, supprime, ou rendu invisible dans la marque épaisse. Donc, comme vous l'avez vu avant, quand j'ai dit que si vous rendez la couche invisible, cela va l'empêcher d'être importé. Donc, cela va se produire si vous cochez cette option où si vous réimportez. Mais juste pour le répéter, cela est uniquement lié à si vous utilisez la fonctionnalité de réimportation. Et ce n'est pas vraiment quelque chose que nous utilisons beaucoup. Ok, donc nous allons d'abord apporter notre premier écran, qui est notre écran de démarrage. Donc, il va appuyer sur le bouton Importer. Et ça va se connecter à Sigma. Et il va importer toutes ces couches. Et comme vous pouvez le voir, il est apporté. Si nous regardons le panneau des calques sur le côté gauche, vous pouvez voir que S a rendu avec précision toutes nos couches et nos noms de terre tels qu'ils apparaissaient à l'intérieur d'un FISMA. Et l'une des choses à souligner ici est que lorsque vous utilisez les importations proviennent de sigma interpreter pi, il va importer tout en tant que fichier PNG. Donc, ils vont être des graphiques basés sur des pixels. Ça va, ça va faire des groupes à partir des cadres que tu as. Donc, tout est rendu comme pour comme entre les deux. Et voici une de ces couches prêtes à l'impôt dont je parlais. Donc vous pouvez voir qu'il y a un peu de thé dans le cercle de base d'angle, une icône d'image. Donc, cela signifie que sa couche d'attaques et je peux le convertir en taxe, mais chez MOM, toujours juste une image. Ok, donc c'est nos premiers fichiers pour notre premier écran, importez-le. C'est bien. Donc maintenant on veut tirer les deux autres écrans qui ont un écran de connexion et on a une piscine de l'écran d'accueil. Vous pouvez voir ici le hibou premier écran a un peu d'étiquettes vu un. Donc protoplanet a le concept de scènes et nous allons être présents et plus semble utiliser notre autre écran. Nous allons donc être très brefs, brisant notre battage médiatique en utilisant la fonction scènes de protoplanet. Donc, si nous passons à cette petite icône juste sous le bouton Importer que nous avons utilisé, et nous avons juste tapé dessus. Nous pouvons voir C1 et nous pouvons voir ce bouton plus. Nous pouvons donc l'utiliser pour ajouter une nouvelle scène. Donc, je vais ajouter quelques scènes. Et on a un double-clic sur s2. Alors assurez-vous que nous avons l'air de l'activité. Je vais retourner implorer Sigma. Et nous allons importer notre deuxième écran, qui est l'écran de connexion. Encore une fois, on va tout laisser. Il s'agit des valeurs par défaut et appuyez sur Importer. Télécharger des couches là-bas et nous y allons, bang. Nous avons notre écran entier rendu à l'intérieur d'un prototype. Ok, donc ça va à notre troisième et dernière scène. Donc double-cliquez dessus. Et on va retourner à la piscine. Et on va ramener notre écran d'accueil. Ok, ça a l'air bien. Je vais juste renommer ces scènes pour qu' on puisse renommer ces choses que ce soit en double-cliquant dessus. Donc je vais appeler ça « start ». Celui-ci va être login. Et enfin, troisième. Cool. Ok, alors revenons à notre départ à voir une seconde. Donc, je vais juste double-cliquer dessus. Et je veux parler un peu de SVG. Vous pouvez employer SVG dans prettify. Malheureusement, les importateurs, et cela vaut pour tous les importateurs, gens de boissons dispersés sur dxdy. Ils ne supportent pas SVG pour le moment. En ce moment, ils sont comme nous l'avons vu apporter des PNG. Mais il y a quelques fonctionnalités avec lui, crédit pi où vous allez vouloir avoir SVG à l'intérieur de votre, à l'intérieur du fichier. Donc je vais juste vous montrer comment importer un SVG et c'est relativement indolore. Donc, ce que nous allons faire est un exemple de ceci, c'est que nous allons remplacer le stress du plateau et le logo ici. Donc, si nous revenons à sigma et que nous trouvons notre écran de démarrage, et nous allons simplement sélectionner le logo Pipes rest et nous allons cliquer avec le bouton droit de la souris ou contrôle-clic. Et si vous n'avez pas de souris à deux boutons et que nous allons simplement choisir copier-coller, qui est en bas du menu. Et nous allons choisir la copie comme SVG. Ok, donc c'est revenir au prototype. Et on va juste faire une pâte irrégulière ici. Commande V, contrôlez le véhicule à l'aide de fenêtres. Et vous pouvez voir que nous avons notre logo, mais vous pouvez voir qu'il est beaucoup plus petit. Et c'est parce qu'on a ce truc de densité de pixels. Donc, notre iPhone 11 actuel est à 3x, mais les SVG, parce que leur résolution indépendante, ils n'ont pas vraiment une densité de pixels. Donc crédit en les amenant juste à un x. Donc efficacement, dans notre taille d'écran actuelle, C'est facilement, facilement réparé. Donc, si nous gardons notre, notre SVG sélectionné et nous allons venir ici pour les valeurs de taille. Et à l'intérieur de ceux-ci, ces entrées que nous pouvons effectuer. Nous faisons quelques maths simples. Donc, nous allons juste multiplier cette largeur par trois et assurez-vous juste que cela devrait être activé par défaut parce que assurez-vous que vous avez le petit cadenas verrouillé. Donc, cela va regarder comment rapport d'aspect. Donc, nous pouvons juste mettre des fois trois dans ce domaine et il va mettre notre logo à l'échelle correctement. Ok, donc maintenant nous avons nos logos de crédit Gao. Nous allons juste positionner cela plus ou moins à l'endroit correct où OWL, où se trouve notre logo basé sur les pixels actuel. Et nous allons aller à autorise Pam, je vais supprimer le logo basé sur les pixels. Donc nous avons ce SVG, donc cela a oui, une autre icône. Donc, vous pouvez voir qu'il y a une petite icône d'image avec ce petit cercle dans le coin inférieur droit. Et on va juste double-cliquer sur ça sur le nom et on va juste l'appeler. Ok, donc ça s'enroule pour la vidéo d'importation de figues. Donc, comme vous pouvez le voir, il est relativement indolore d'amener vos actifs dans une tarte de sigma. Il y a quelques optimisations, quelques choses que vous devrez faire pour préparer votre fichier juste pour que vous puissiez tirer le meilleur parti de l'importateur. Et je vous ai également montré comment vous pouvez amener les SVG dans, en joliment à partir de la figure aussi. Donc, si la figure est votre outil de choix, alors vous pouvez sauter les deux prochaines vidéos. Assurez-vous de regarder l'impulsion de la vidéo File System cependant. Il y a des choses là-dedans que tu devras savoir avant de progresser. Et je te verrai dans le prochain tutoriel. 6. Importer à partir de croquis: Salut là. Donc, dans cette deuxième vidéo, nous allons examiner comment nous pouvons améliorer nos graphismes à partir de scatch extrémités approchant un pi. Et nous allons construire notre nouvelle application cool appelée Pirates Arrestation. La seule application sur le marché qui vous permet de regarder des photos de tartes toute la journée. On devrait franchement, ça a l'air génial. Et ce que je veux faire avant imposer nos graphismes InterPro pi, c'est que je veux juste passer par certains des gotchas dont vous devez être conscient lorsque vous importez des graphismes de sketch. Donc, la première chose sur laquelle je voudrais attirer votre attention est le fait que le protocole, il ne prend pas en charge les composants d'esquisse ou les symboles. Si vous avez une conception qui utilise composants de Sketch et que vous l'importez dans presser pi. Ce qui va se passer, c'est que le protocole va convertir tous ces composants en bitmaps aplaties. Donc j'ai dit hors-bord juste pour illustrer ce que je veux dire et ce qui va se passer. Donc vous pouvez voir ici, j'ai un composant de ligne de logo et de sangle. Et si je ne rompt pas ça, alors ça va être aplati. Le deuxième scénario où cela va se produire est si j'ai un groupe qui a une mosquée à l'intérieur de cela, encore une fois, si vous masquez des objets à l'intérieur de scatch avant de les amener dans le processeur Pi, protoplasme va convertir ce dans une image bitmap aplatie. Maintenant, cela peut être quelque chose qui est souhaitable, surtout si vous avez beaucoup de graphiques qui ne sont pas ajouter une interaction à, vous pouvez utiliser ces deux stratégies pour clignoter automatiquement les choses, ce qui est en fait très utile. Donc ce que je vais faire maintenant, c'est que je veux juste te montrer ce qui se passe quand je ramène ça acheté dans le processus Pi. Donc on va passer au traitement pi. Et nous allons créer un nouveau fichier de pile. Et je viens d'avoir une configuration pour iPhone 11 pro. J' utilise donc ce préréglage standard. Et pour importer l'interpréteur graphique Pi, vous devez passer au menu d'importation et je vais choisir l'esquisse. Et vous pouvez voir instantanément que le protocole regarde le fichier d'esquisse qui se trouve derrière. Et il peut voir tous les tableaux d'art qui sont à l'intérieur de notre fichier de croquis. Je vais donc sélectionner les sculptures de départ. Et je vais revenir à ce menu et l'expliquer. Mais juste pour l'instant, nous allons juste laisser toutes les valeurs par défaut et impulsions. Ok, donc vous pouvez voir ici dans le panneau Calques de précipice, mes deux objets de ligne de logo et de sangle. Donc, dans scatch, le premier était un composant, et dans l'esquisse le second était que les groupes de mosquées. Donc, vous pouvez voir que c'est juste les écraser tous dans un bitmap aplati. Ok, donc on va annuler ça. On va retourner au croquis. Et on va juste jeter un oeil à ces autres fichiers graphiques que j'ai ici. Et ça veut parler un peu d'autres caractéristiques que l'importateur a. Donc, l'une des choses qui est vraiment cool est vous pouvez faire beaucoup de choses dynamiques avec des calques de texte. Vous voulez donc vous assurer que vos calques de texte d'esquisse sont des majuscules exactement comme ça. Et lorsque nous les importons, le profil va mapper les couches de textes d'esquisse à ses propres couches fiscales natives. Et on va pouvoir faire des choses avec ça et c'est, c'est plutôt cool. Une dernière chose sur laquelle je veux attirer votre attention est le fait que lorsque vous apportez des graphiques via les importations de Sketch, interpreter pi va convertir tous vos graphiques en bitmaps. Donc, pour le moment, il ne supporte pas les graphiques importants ou vectoriels, une sainte impulsion bitmap versions de vos graphiques vectoriels. Et pour la plupart, ce n'est pas trop un problème. Et vous avez la possibilité de créer des formes natives avec incroyablement haut et nous explorerons certaines de ces choses plus tard dans le cours. Mais en dehors de cela, vous pouvez vous attendre à ce que proto pi respecte pour permettre la hiérarchie. Tout ce qui se trouve dans un dossier va être converti en version prototype d'un dossier de fichier, qui est un conteneur. Mais à toutes fins utiles, c'est exactement la même chose et tout le reste va apparaître dans l'ordre où vous l'avez dans votre fichier d'esquisse. Ok, donc avec ces gotchas hors du chemin, on va faire notre premier pas. Nous allons importer quelques interpréteurs graphiques pi et commencer la création de notre application place rest. Juste avant de faire ça, je vais juste me débarrasser de mon stock de captchas sont de la nourriture. Débarrassez-vous de ça des réveils. On ne veut pas être confus par ça. Et on va sauter plus de deux pi. Et nous avons notre fichier py que nous avons créé il y a tout juste un instant, ce qui est absolument bien. On peut commencer par celle-là. Et comme on l'a fait avant, on va importer et on va choisir un croquis. Et quand nous choisissons cela, nous allons obtenir cette fenêtre de dialogue est Importer la boîte de dialogue. Et par défaut, il va lire le fichier d'esquisse actif qui est assis en arrière-plan. Dans ce cas, c'est comment la section deux, les tuyaux reposent actifs. Et il va également pouvoir voir toutes les sorties que nous avons configurées dans notre fichier. Et il va les énumérer dans ce menu Apple ici. Ici, nous avons la taille d'entrée. Donc, en fonction de l'appareil pour lequel vous prototypez, vous allez vouloir vous assurer que les graphiques ont la taille à la densité de pixels correcte. Et encore une fois, parce que le protocole ne prend pas en charge l'importation de graphiques vectoriels et via les importations pour le moment, vous devrez vous assurer que vos graphiques bitmap sont à la densité correcte car ils dépendent de la résolution . Donc pour l'iPhone 1011 pro, nous savons que la taille de l'impulsion est 3x, donc nous allons le laisser à la valeur par défaut. Le protocole le sait aussi bien, c'est que sait ce que l'appareil pré-vente. Et comme il va prêcher, choisissez la taille de l'impulsion, ce qui est correct pour nous. D' accord, en descendant ici, on a deux options sous impulsion latérale. Donc, nous pouvons soit importer toute dernière structure, soit nous pouvons choisir de simplement impulser des couches exportables. Donc, si vous avez déjà assis certaines couches pour être exploitables dans scatch, cela va seulement importer ces couches. C' est quelque chose que je ne fais pas vraiment ça. Si c'est quelque chose qui est souhaitable pour vous, alors vous pouvez choisir cela comme une option. La dernière partie de l'impulsion sont I, une fois qu'il vient rapidement discuter est cette options de réimportation. Ainsi, les pros Pi ont la possibilité de réimporter des graphiques qui viennent d'être importés, ne se souvient que des derniers graphiques que vous avez importés. Donc, il n'y a pas de lien dynamique entre tous les graphiques que vous importez et les zones particulières de votre fichier de pile ondulées aussi importantes. Donc, si vous venez de repérer quelque chose que vous devez changer rapidement, alors il peut y avoir une option utile. Mais pour être honnête, ce n'est pas quelque chose que j'utilise vraiment. Si c'est quelque chose que vous faites pour que vous puissiez avoir de la valeur nous-mêmes, alors vous avez quelques options ici. Nous avons donc la possibilité de remplacer les positions des couches. Donc, si vous avez déjà importé un secteur d'interpréteur graphique et que vous souhaitez modifier les calques autour. Vous pouvez modifier les calques dans Esquisse, puis réimporter. Et il va réorganiser les calques à l'intérieur de votre fichier PY, écrasant les tailles des calques. Encore une fois, si vous avez modifié une taille sur vos calques et les avez dispersés, réimportez, cela va les mettre à jour. Mettre à jour les ordres des couches dans le groupe et la structure. Encore une fois, si vous avez réorganisé vos couches de vos groupes à l'intérieur d'une esquisse lors de la réimportation, elle appliquera ces mises à jour. Et enfin supprimer les calques supprimés dans l'esquisse. Donc, si vous supprimez une esquisse durable et puis réimportez, cela va également supprimer ces calques. Ok, donc nous allons effectivement laisser toutes ces options est formé, va définir les dernières chauves-souris sont toutes structure de couche et nous allons importer notre écran de démarrage. Ok, donc nos graphismes sont maintenant impulsifs. Et si vous regardez, vous pouvez voir que la hiérarchie des calques correspond à notre fichier d'esquisse. Les petites boîtes avec les lignes pointillées. Ce sont des groupes, ce sont effectivement les groupes et les croquis, et ce sont nos conteneurs pro fournisseurs. Vous pouvez voir ici nous avons un objet texte et c'était un calque de texte natif à l'intérieur de scatch. Il a été importé, interprète ou pi comme c'est un peu spécial croquis. Désolé, cette couche fiscale spéciale. Vous pouvez voir qu'il a un peu C dans la base du coin inférieur a également une icône graphique aussi bien. Et ce que cela signifie effectivement, c'est qu'à l'heure actuelle, c'est toujours un graphique, mais nous avons la capacité de le convertir en chars si nous le voulons. Donc, toutes vos balises ne seront pas immédiatement converties en textes natifs. Vous serez en mesure de sélectionner un V, choisir le morceau de texte que vous voulez réellement être natif. Et c'est normalement juste les choses que vous voulez ajouter, une certaine interaction aussi. Ok, donc c'est notre première couche importée. Donc vous pouvez voir ici que nous avons ce nom ici qui dit c1. Donc protoplanet a le concept de scènes et nous pouvons utiliser semble briser notre prototype. Donc, nous allons ajouter quelques scènes de plus. Donc, si nous venons au panneau des scènes s' envolent, qui est juste ici sur la gauche, vous pouvez voir que nous avons comment C1. Donc, je vais juste ajouter une autre saison parce que nous voulons importer nos autres qui écrans de notre fichier de croquis. Et nous allons juste double-cliquer sur s2. Comment va-t-on retourner à l'importation de croquis ? Et cette fois, nous allons choisir la connexion. Nous devons tout laisser aux valeurs par défaut et cliquer sur les entrées. C' est bien. Et enfin, nous voulons aller à notre troisième scène. Allez au croquis d'impulsion. Et nous allons choisir la maison et cliquez sur Importer. Côtiers, ce sont nos maisons importées. Donc ce qu'on va faire maintenant c'est qu'on va juste renommer ces trois scènes. Donc on va appeler le premier, commencez. La seconde, on va l'appeler login. Et la troisième obligation, nous allons l'appeler. Maintenant. J' ai dit que par l'intermédiaire de l'importateur, vous, vous ne pouvez importer que des graphiques au format bitmap. Et c'est vrai. Mais il y a une autre façon de lui impulser des graphismes de croquis en pis de louange, où vous ne pouviez pas impliquer des graphiques en tant que vecteurs. Donc, protoplanets prend en charge le format SVG et il y a la fonctionnalité pour être en mesure d'importer SVG intègre tout simplement pas directement à travers les importations sont à ce moment actuel. Donc ce qu'on va faire, c'est qu'on va aller à notre écran d'accueil. Et je vais ouvrir son groupe et j'aurai mon logo, mon logo Pintrest. Je veux apporter cela en tant que SVG parce que nous allons ajouter des animations où plus tard. Donc je ne vais pas faire, c'est que je vais retourner à croquis et je vais trouver mon groupe de logo. Donc celui-ci ici, juste veulent le logo marque parties du logo. Et je vais cliquer avec le bouton droit sur le dossier à l'intérieur du panneau Calques. Et je vais choisir Copy SVG code. Ok, donc je vais revenir au prototype. Et je vais juste faire une commande Paste régulière ici. Maintenant, vous verrez que mes logos ont été importés dans. Ça s'appelle image large et il y a cette icône. C' est l'icône SVG, mais vous remarquerez instantanément qu'elle est très, très petite. Donc actuellement impressionné par cinq points 05, il y a un problème avec les importations SVG, où l'importation n'apporte que le fichier, ajoute sa taille physique à 1X, et il ne reconnaît pas la densité de pixels de votre taille du fichier. Donc, nous avons juste besoin de faire un peu de cartes et un peu de manipulation pour corriger ceci est SVG, vecteur donc évolutif. Donc la taille n'est pas vraiment un problème pour nous. Donc on va juste garder ça sélectionné et on va passer à la taille. Donc ici, nous avons la largeur et nous avons le plus haut. Et à l'intérieur de ces champs, je peux faire des maths simples. Donc je vais m'assurer que mon cadenas est verrouillé, ce qui verrouillera le rapport d'aspect. Et dans le champ de largeur gauche, je vais l'attacher astérisque, qui est le symbole pour multiplier et regarder sa hauteur trois. Et effectivement, nous allons multiplier cette valeur par trois. Donc ça va frapper le retour. Ok, donc nous avons maintenant notre logo taille à la bonne taille parce qu'il est à 3x densité de pixels. Nous l'avons multiplié par trois et nous l'avons obtenu à la bonne taille. Ok, donc je vais juste mettre ça en place. Ça a l'air juste. Et je vais renommer ce logo. Et je peux maintenant retirer en toute sécurité mon groupe de logo fait celui-ci ici. Et en fait, c'est juste mettre le logo à l'intérieur de ce groupe ici. Et j'ai maintenant remplacé mon logo bitmap par un graphique vectoriel évolutif. Donc, à propos enroule notre regard sur l'impulsion dans les graphiques de Sketch Interpreter pi. Dans la prochaine vidéo, nous allons voir comment nous implorons les graphiques d'Adobe XD interprètent une tarte. Mais si esquisse votre outil de choix, alors vous pouvez sauter en toute sécurité cette vidéo. Assurez-vous de regarder la vidéo où je parle de l'importation à partir du système de fichiers, car il y a certaines choses dans cette vidéo que vous allez devoir connaître. Donc je te vois dans le prochain tutoriel. 7. Importer à partir d'Adobe XD: Salut. Dans cette troisième vidéo, nous allons voir comment nous importons des graphiques d' Adobe XD pour créer cette nouvelle application étonnante appelée Pipes rest. Je ne sais pas pour toi, mais j'adore quand j'apprends à connaître ces choses que j'aime, comme les pi et le prototypage. Je veux dire, règle à la recherche de nos projets de rêve, non ? Quoi qu'il en soit, avant d'entrer nos designs, je veux discuter un peu de certaines des nuances entre XD et Presser pi. Donc, certaines des choses que je veux discuter avec vous sont sur la façon dont vous avez tendance à concevoir des graphiques dans ce genre de logiciels. Les trois applications logicielles qui sont prises en charge avec fierté de pi, Adobe XD, si calendrier d'ignorance ont le concept de composants, tous ont le concept de couches de texte et de styles. Il y a donc certaines choses que nous faisons tous lorsque nous créons des graphiques ont beaucoup de sens lorsque nous créons ces graphiques dans ces applications. Mais il y a quelques nuances entre la façon dont nous créons ces graphiques et comment nous devons les importer dans proto byer et comment prototype a une sorte de SAP pour interpréter les graphiques que nous, que nous ajoutons. Et vous verrez si vous regardez les trois vidéos, comment les différences subtiles entre le fonctionnement des trois applications ? Donc, pour Adobe XD , ses nuances sont, sont celles-ci. Donc, la première chose dont nous parlerons, ce sont les composants. Donc, les composants Adobe XD. Ainsi, lorsque vous importez un composant, qui est un composant d'Adobe XD et que vous l'importez dans proto pi, il sera importé en tant que groupe Pi de processus. Donc, en fait, c'est vraiment bon. Il vous permet de toujours utiliser des composants à l'intérieur de vos projets Adobe XD sans craindre de perdre ou de n'importe quelle fonctionnalité ou d'avoir à manipuler ces composants d'une manière particulière, comme vous pourriez avoir à le faire dans certains des d'autres applications. Les composants sont donc importants en tant que groupes. Et tous les graphiques, à l'exception des calques de texte, sont transformés en bitmaps. Maintenant, c'est quelque chose qui est assez commun toute l'importation est au moment actuel dans le temps, tous les graphiques sont transformés en bitmaps quand ils sont importés, interprète upaya pressé par ne supporte pas dans l'impulsion, l' impulsion des graphiques vectoriels. Mais cela étant dit, le fait que vous pouvez avoir un composant dans Adobe XD et l'amener dans le processeur Pi et toujours manipuler les cheveux. Et aussi pour le fait que les calques de texte sont préservés et effectivement mappés directement à la presse par les calques de texte est une bonne chose. Il fait vraiment froid. La deuxième chose dont je veux parler, c'est des couches masquées. Donc W x D a deux façons différentes de traiter les images et la masse. Donc, nous avons ici dans cet écran d'accueil, nous avons cette, cette forme, qui est ce masque appliqué sur elle. Donc, si vous importez une mosquée dans une tarte d'interprétation Adobe XD, ça va aplatir ça, tout ce groupe d'objets. Il va supposer que ce n'est qu'une seule couche. Donc c'est peut-être quelque chose que vous voulez vraiment utiliser. Vous pouvez utiliser des couches de masse pour condenser l'interface utilisateur et que vous n'avez pas besoin d'ajouter d'interaction. Et cela condense en fait la taille du fichier de votre prototype et cela condense également la complexité. Donc c'est en fait quelque chose qui est très utile. Mais gardez cela à l'esprit que si vous avez une simulation, les objets à l'intérieur de dxdy vont être aplatis. Donc quelque chose que tu ne veux pas faire. Vous ne voulez pas de mosquée, un groupe où vous avez une couche fiscale et N par exemple. Et vous pouvez utiliser cette couche de taxe améliore appliquée dynamiquement parce que vous allez, vous allez perdre cette capacité de modification lorsque vous transférez sur. Ok, donc si vous, une autre chose à garder à l'esprit, c'est si nous repassons deux fois, à la maison, cette scène Home ici. Et si je regarde, laissez-moi juste mettre en évidence ceci. Et on va aller dans le flux de photos ici. Et nous allons juste ouvrir une des images, en fait Cisco Sekhmet une. Donc vous pouvez voir ici que je n'ai qu'un seul objet. C' est une image qui est effectivement un rectangle de coin arrondi où je viens de déposer une image. Et selon Adobe XD est la fonctionnalité native est instantanément marque cette image. Et j'ai en fait des coins arrondis appliqués à ça. Maintenant, le problème, eh bien, ce n'est peut-être pas un problème, mais juste quelque chose à savoir, c'est que si vous vouliez manipuler dynamiquement ces coins arrondis à l'intérieur d'un proto pi, vous devrez repenser la façon dont vous apportez des objets, pour, pour ce genre de choses. Donc, la façon dont le protocole fonctionne est qu'il vous permet d'ajouter autour des coins à des groupes, à des groupes proto pi natifs. Et vous avez également une fonctionnalité qui vous permet d' animer dynamiquement ces coins arrondis et de changer ces coins arrondis. Donc, si c'est quelque chose que vous allez devoir faire quand vous le serez, quand vous commencez à prototyper. Ensuite, vous allez vouloir enlever les coins arrondis à l'intérieur d'Adobe XD. Apportez simplement vos images carrées, puis regroupez et appliquez les coins arrondis à l'intérieur d'un prototype à la place. Ok, donc c'est vraiment la seule chose sur laquelle vous devez attirer votre attention. En dehors de cela, vous pouvez continuer à concevoir exactement comme vous l'avez fait dans Adobe XD. Sachant que vous serez en mesure d'apporter vos graphismes en prose upaya, sans aucune, aucune bizarre qui se passe. Ok, donc maintenant nous allons réellement importer des graphiques dans la papaye de prose d'Adobe XD. Donc, et nous allons importer des graphiques de cette section dans le fichier P3s Assets, qui est disponible dans les fichiers téléchargeables. Et ce que je vais faire, c'est que je vais passer pour produire une tarte. Et je vais juste créer une nouvelle pipe. Et par défaut, je vais obtenir cet iPhone 11 Pro actes, qui est la taille du téléphone que nous allons utiliser tout ce cours de formation. Et ce que je vais faire, c'est que je vais juste me débarrasser de l'aperçu ici. Donc la première chose que je vais faire, c'est d'importer mes graphismes. Donc, si je monte ici et vous pouvez voir que j'ai ce menu d'importation. Et si vous avez regardé les deux autres vidéos, vous l'avez déjà vu. C' est à peu près exactement ce que j'ai vécu avec les deux autres avec les données aux applications. Donc, pour cette vidéo particulière, nous allons importer à partir d'Adobe XD. Je vais donc choisir Adobe XD dans le menu. Et ils vont se faire présenter avec ce dialogue. Et ce dialogue est presque identique car en fait, il est complètement identique pour les trois applications. Juste quelques choses de terminologie qui diffèrent ? Donc, pour Adobe XD, je peux voir ici mon fichier qui est ouvert. Donc, vous devez avoir votre fichier ouvert dans Adobe XD assis en arrière-plan et prettify va ramasser ce fichier et il va introspecter ce fichier et il va être capable de regarder tous les aéroports que vous avez. Donc, dans ce menu ici, je peux d' abord voir les tableaux d'art que j'ai à l'intérieur de mon fichier XD. Ici, vous pouvez voir la taille de l'impulsion. Donc parce que, comme je l'ai déjà dit, tous les graphiques seront transformés en, ou la plupart des graphiques seront transformés en bitmaps. Nous devons nous assurer que ces graphiques sont importants, que la taille correcte. Et pour les appareils parce que nous avons un, je suis sûr que vous le savez, parce que nous avons des écrans de densité de pixels avec différentes densités de pixels, alors nous allons devoir nous assurer d'apporter notre graphiques qui sont de taille correcte. Donc, parce que nous concevons sur un iPhone 11 Pro, nous appuyons sur Appliquer. Il sait déjà que c'est, c'est une densité 3x. Donc il a déjà préchoisi la densité correcte pour nous. Ok, donc en descendant plus loin, nous avons une couche à importer. Donc il y a deux options ici. Nous pouvons soit importer toutes nos couches dans la même structure que celle qui se trouve dans notre fichier EXE. Ou nous ne pouvons sélectionner que les couches marquées pour l'exportation par lots. J' ai donc tendance à utiliser simplement la structure OLAP. Mais le juste pour savoir que vous avez à survoler l'option là et disponible pour vous si vous voulez seulement importer certaines couches. Toute la section inférieure est tout à voir avec quelque chose appelé réimportation. Maintenant, la réimportation est une fonctionnalité de proto pie qui vous permet de réimporter une conception que vous venez d'importer. Et cela vous permet d'apporter des modifications à votre fichier Adobe XD. Vous avez peut-être remarqué qu'un graphique n'a pas été positionné correctement ou que vous vouliez que les calques soient dans un ordre différent. Vous pouvez ensuite apporter vos modifications dans Adobe XD, puis utiliser options de réimportation en fonction de ce que vous avez initialement défini ici. Les options de réimportation Azure lorsque vous importez pour la première fois, c'est ce qui sera mis à jour lorsque vous effectuez une réimportation ultérieure. Il y a quatre options ici. Ils sont tous assez explicatifs. Nous avons donc une position trop mûre des couches. Donc, si vous effectuez un changement de position dans vos calques dans XD, il va l'écraser et le faire semblant. Remplacer les tailles des calques. Donc, encore une fois, si vous modifiez la taille des calques, cela va être mis à jour. Et puis vous avez ces deux autres options, mettre à jour la mise en page, les ordres et la structure de regroupement, et supprimer les couches supprimées dans Adobe XD, encore une fois , assez explicite, mais ils vous permettront d'apporter ces modifications. Et lorsque vous réimportez votre fichier, ces modifications seront apportées. Comme je l'ai dit précédemment, je n'utilise pas vraiment la fonctionnalité de réimportation autant. Et il y a beaucoup de raisons pour lesquelles j'ai tendance à changer les choses une fois comme l'entreprise, mais c'est quelque chose qui a de la valeur pour vous, alors la fonctionnalité est là. Ok, donc nous allons juste laisser ceci ou aux valeurs par défaut et nous assurer que nous avons toute la dernière structure et que nous allons puiser les entrées. Ok, donc notre écran initial a été l'impulser. Vous pouvez voir ici dans le dernier panneau, la hiérarchie des calques a été respectée et préservée. Vous pouvez voir que tous mes graphiques, qui étaient des vecteurs, sont maintenant convertis en bitmaps. En dehors de mes calques de texte qui ont cette icône spéciale de la loi fiscale. Et les calques de texte par défaut GET impulsion dit comme des calques de texte graphiques. Et ce que cela signifie, c'est que ce n'est pas un texte correct tant que je n'ai pas vraiment converti en texte. Donc, cela vous permet de ne pas avoir à avoir tout le texte converti par défaut. Il y a des problèmes avec lorsque vous prévisualisez vos prototypes, exemple dans le cloud ou sur le Web. Nous ne pouvons pas, nous ne pouvons pas charger des polices personnalisées sur le Web. Donc, toutes les polices que vous utilisez doivent être prises en charge par des fonds auxquels votre navigateur a accès. Donc, des choses comme ça, peut-être des raisons pour lesquelles vous ne voudrez peut-être pas convertir toutes vos polices en polices natives. Donc, mais en dehors de cela, nous avons nos groupes, qui sont en fait les groupes qui étaient dans Adobe XD. Et tout le reste est assez soigné. Ok, donc vous avez peut-être remarqué qu'en fait nous avons ce petit titre de scène de Haeckel 1. Cela fera allusion au fait que pro supply a le concept de scènes. Et vous pouvez penser aux scènes comme un moyen de compartimenter votre prototype en morceaux gérables. Et nous allons utiliser beaucoup de scènes avec, grâce à ce cours, vous allez apprendre beaucoup sur la façon d' utiliser les chants et les avantages et les inconvénients des scènes. Nous allons apporter notre 3C initial, trois scènes, trois écrans en intercedes. Et pour ce faire, nous allons aller à ce menu déroulant des scènes, et nous allons ajouter quelques scènes supplémentaires en appuyant sur le bouton plus ici. Et nous allons passer pour paraître aussi, juste en double-cliquant dessus. Et quand je reviendrai à notre impulsion, chauves-souris, Adobe XD, et nous allons apporter notre deuxième écran, qui est notre écran de connexion. On va choisir ça à nouveau. Nous allons laisser toutes les autres options à la valeur par défaut et nous allons entrer horloge. Nous avons donc maintenant notre écran de connexion importé. On va passer à notre scène finale, voir trois, et on va importer notre écran d'accueil. Je vais juste choisir le pour nous ici. Et nous allons importer. Ok, cool. Donc tout a l'air bien. Donc, comme je l'ai dit précédemment, fournisseur pro seulement impulser bitmaps, mais ils sont là il ya en fait un moyen de deviner vecteurs, interprète bûcher, et c'est à travers l'utilisation de SVG. Donc pro supply prend en charge SVG. Il a une quantité limitée de support en ce moment, mais il vous permet d'impulser les graphiques individuellement en tant que SVG. Donc ce qu'on va faire pour y jeter un coup d'oeil quand on, ils vont à notre C1. Donc, nous avons ce logo est le logo Peice rest. Nous pouvons voir que six est ici dans ce groupe et il y a le calque de texte là-bas, mais il a cette marque de logo, qui est un graphique. Et je veux vraiment appliquer une animation à cela. On va le faire, on va le faire dans une prochaine vidéo. Donc, une fois sur le point d'évoluer vers le haut et vers le bas, je ne veux pas qu'il soit bitmap, donc je vais apporter un SVG. Donc la façon dont je vais faire ça ne va pas revenir à Adobe XD. Et je vais trouver mon logo, je suis debout. Donc c'est juste à l'intérieur de ce groupe ici. Et je vais sélectionner set et je vais cliquer avec le bouton droit de la souris et je vais choisir l'option Copier le code SVG. Ok, donc je vais revenir au processeur Pi, et je vais juste faire une pâte régulière ici pour coller notre logo. Et vous pouvez voir nos logos entrer, mais c'est incroyablement petit que se passe-t-il ? Donc, à partir de la version actuelle du protocole qui est sondée par 5-0 cinq, il y a un problème lorsque vous apportez SVG dans le sens qu'il vient à un acte maintenant parce que notre prototype est un iPhone et c'est notre densité de pixels ou 3x. Ce n'est pas en tenir compte, mais c'est un effet facile. On a un SVG après tout, donc on peut s'inscrire. Et parce que nous connaissons exactement le multiplicateur dont nous avons besoin pour le dimensionner, nous pouvons simplement faire une masse de base. Donc, l'une des choses cool sur l'empire des pros et son impulsion se sent comme un amour du rap dit que vous pouvez faire des calculs mathématiques de base, calculs mathématiques à l'intérieur des champs eux-mêmes. Donc nous allons venir ici à la taille et où nous pouvons voir notre largeur et notre hauteur. Et s'assurer que le cadenas est verrouillé. Donc, il verrouille le rapport d'aspect. On va juste mettre trois fois dans ce champ. Maintenant, les temps à l'intérieur du logiciel ont tendance à être les astérisques, donc c'est ce que nous allons utiliser. Donc Astra S est temps et nous allons juste taper le numéro trois. Et on va frapper le retour. Et voici, nous avons maintenant notre marque de logo taille à la bonne taille. D' accord. Donc, c'est la position dans la bonne position juste au-dessus de notre comment le logo bitmap actuel MAC. Et nous allons déplacer l'image qui est notre SVG, qui va le déplacer dans le groupe d'enregistreurs. Et nous allons le renommer mock logo, juste en double-cliquant sur marque. Et nous pouvons maintenant supprimer en toute sécurité notre groupe bitmap du logo. On n'a plus besoin de ça. Et nous avons réussi à remplacer notre graphique bitmap par un graphique SVG. Ok, donc une dernière chose que nous devons faire est de simplement renommer ces scènes. Donc on va nommer celui-là commence. Et puis nous avons la connexion. Et enfin, on est rentrés à la maison. Ok, donc cela s'enroule pour notre regard sur l'impulsion dans les graphiques dans Adobe XD. Nous avons abordé quelques nuances et choses qui vous permettront de savoir si Adobe XD est votre outil de choix et que vous voulez les utiliser de concert avec la prosopagnosie. Et dans la prochaine vidéo, nous allons examiner comment vous importez des graphiques à partir du système de fichiers. Donc, il y a quelques autres choses qui sont très utiles à savoir dans la mesure où votre impulsion dans les graphiques du système de fichiers, par opposition à simplement utiliser les impulsions. Je te vois dans le prochain tutoriel. 8. Importer à partir du système de fichiers: Dans cette vidéo, je vais vous montrer comment importer GraphX depuis le système de fichiers. Vous pourriez donc vouloir le faire si nous utilisons un outil, un outil graphique à créer ou des graphiques qui ne sont pas l'un des trois outils de soutien. Il dispose d'un apport spécialisé. Par exemple, quelque chose comme Photoshop. Ou si vous avez reçu des graphiques par quelqu'un d'autre et que vous avez juste besoin de les obtenir dans un cas. Il y a donc plusieurs façons d'apporter des images à partir du système de fichiers. Prend également en charge un certain nombre de formats de fichier image. Donc supposons PNG, JPEG et SVG. Et pour illustrer cela, nous allons commencer par naviguer jusqu'à l'écran d'accueil. Et nous allons juste remplacer l'une de ces images tartes par, par une autre. Maintenant, une autre chose à garder à l'esprit est que lorsque vous exportez des graphiques, ils doivent être la densité de pixels correcte. Donc, quand les importateurs importent, ils ont trouvé ça pour vous. Mais si vous le faites avec un autre outil tel que Photoshop, Vous allez devoir enregistrer l'image OWL à une taille plus grande en fonction de ce que vous voulez votre densité de pixels est. Donc parce que nous le faisons, quand nous construisions notre éditeur de prototype, iPhone 11 Pro, nous pouvons vérifier avec la densité de pixels ici. Donc, pour nous, c'est 3x, ce qui signifie fondamentalement que tous les graphiques que nous apportons doivent être trois fois la taille du site physique. Ainsi, par exemple, si nous avions une image de 100 carrés alors que nous sommes assurés d' explorer African Photoshop à 300 pixels carrés, pour que ce soit la bonne dimension de la photosphère. Ok, donc l'une des premières façons que je veux vous montrer comment apporter des images du système de fichiers est juste d'utiliser le bouton d'image standard ici. Donc, plus la moitié de cela va ouvrir une fenêtre du Finder. Je vais naviguer dans ce dossier où j'ai des lois, nous avions des images de bûcher ici. Je vais choisir celui-là. Et nous allons l' importer qui juste un peu coincé en haut du panneau des calques ici. Et je vais remplacer ce premier pi dans le flux de photos, donc image1 avec mon, mon entrée aux dégâts. Donc je vais juste faire glisser ça dans le conteneur. Et je vais juste repositionner ça à 0-0, donc c'est dans la même position. Je peux maintenant supprimer cela, cela existe dans image1 et double-cliquez dessus pour simplement le renommer en image un. Ok, donc c'est la première façon de remplacer notre première image. Maintenant, il y a quelques problèmes avec mauvais si nous disons, par exemple, veut remplacer. Nous avons donc, nous avons effectivement remplacé une image par une autre image, donc en remplaçant le graphique existant. Et, et le problème avec cela est que si nous, si nous avions déjà ajouté quelques interactions via le panneau Déclencheurs ici. Il va casser et les interactions que nous ajoutons si nous sommes des balises dans cette image particulière. Et la raison en est que ceci, cette couche d'image ici, vous pouvez le considérer comme un conteneur. Donc quand ça est importé et quand on cible, disons image1 avec une sur les interactions, ça va cibler l'air. Ceci, ceci comme un conteneur. Ce ne sera pas seulement le nom de l'image ou nous choisirons le nom de l'image, mais c'est en fait un objet unique. Et vous pouvez penser ici comme un conteneur d'image qui a une image à l'intérieur de cela plutôt qu'une image normale. Il existe donc une autre façon de remplacer les graphiques existants. Et je vais te montrer ça maintenant. Donc, si nous gardons notre image une sélectionnée et que nous regardons ici, nous pouvons voir qu'il y a un bouton de remplacement. Donc, cela va nous permettre de remplacer réellement l'image à l'intérieur du conteneur d'image par une image différente. Donc, si nous appuyons sur un bouton de remplacement, nous allons revenir à notre, nos bûches et choisirons un joueur différent lorsque ces goûts profond s, C'est remplacer notre image actuelle de celui-ci. Donc on va s'ouvrir. Et vous pouvez voir maintenant notre image a été placée. Il a été remplacé à l'intérieur du conteneur existant, le nom du fichier est toujours. Et si nous le faisons de cette façon et que nous avons des interactions attachées, alors elles vont bien se passer et je vais être brisé de quelque façon que ce soit. Donc, si vous avez besoin de remplacer les graphiques, c'est la façon dont vous devriez le faire. Ok, donc c'est une façon d'apporter des images du système de fichiers dans votre fichier de pile. Il y a une autre façon de le faire. Donc, pour illustrer cela, je vais juste sauter que j'étais écran de connexion valide. Et si vous vous souvenez, dans la vidéo précédente, nous avons remplacé notre prix pour le logo S sur notre écran de démarrage par un SVG. Mais nous avons cette instance du même logo sur ce deuxième écran de connexion également. Et vous pouvez voir qu'il s'agit d'un groupe de conteneurs. Il y a un certain nombre d'images séparées qui composent. C' est comme ça qu'il a été importé de sigma. Je ne peux donc pas utiliser la commande Remplacer. Il n'existe pas parce qu'il n'existe que lorsqu'il y a une seule image. Donc si je sélectionne une de ces images, vous pouvez voir que je l'ai remplacé parce que notre logo est composé de plusieurs graphiques, ça ne marchera pas. Donc je vais devoir apporter une image pour nouveau. Mais cette fois-ci. Je vais l'apporter directement sur le bureau. Donc, ceci est sous pris en charge sur, sur, sur, sur le système actuel MCAT. Alors FI ici je vais trouver ce logo, SVG. Je vais juste traîner et déposer. Et vous pouvez voir que c'est une entrée à cela aussi. Donc c'est juste apporter que n Maintenant comme avant, il est plus petit parce que ce n'est qu'un acte parce que c'est le fichier indépendant de la résolution. Et on va juste dimensionner ça. Nous allons juste regarder le globe oculaire comme ils disent, obtenir plus ou moins la bonne science qui semble assez proche. Et encore une fois, vous savez, c'est un SVG a cette icône très spécialisée avec l'icône de l'image et ce petit cercle dans le coin inférieur droit. Donc je peux maintenant me débarrasser de mon groupe en toute sécurité. Et j'ai maintenant été rétréci basé sur cela avec le SVG. Ok, donc ça nous amène à la fin de l'action impulsive. Vous devriez maintenant avoir une bonne compréhension des différentes façons dont vous pouvez importer votre GraphX avec de nouvelles, anciennes séries de tous les différents outils d' interface utilisateur pris en charge jusqu'à l'importateur Cellar de vx, le croquis avec FISMA. Ensuite, je vais vous présenter le modèle de concept de précipice et explorer que nous allons mettre en valeur nos premières interactions. Alors, on se voit dans le prochain tutoriel. 9. Le modèle de concept ProtoPie: Le protocole fonctionne conceptuellement, mais les objets du monde réel, il n'y a pas de code, juste des objets, des déclencheurs et des réponses. Si vous pensez à monsieur, vous pouvez l'appliquer à tout ce que vous faites dans le monde, comme verser un verre d'eau. Vous devez taper, qui est l'objet. Vous devez allumer le robinet, qui est le déclencheur, puis verser un peu d'eau, ce qui est la réponse. En principe, il y a beaucoup de déclencheurs ou de réponses. Certains sont aussi contextuels. Par exemple, si nous examinons le déclencheur de glissement, cela permet uniquement aux réponses de se déplacer, d'évoluer et de faire pivoter. D' autres, comme Tag, à peu près toutes les réponses que la prière a à offrir. Les réponses modifient également leurs propriétés en fonction du déclencheur utilisé. Pour donner un exemple, lorsque vous ajoutez une réponse de déplacement au déclencheur d'attaque, vous pouvez vous déplacer vers un emplacement ou par notre nombre de pixels par rapport à la position actuelle des objets. Lors d'une réponse de déplacement à un déclencheur de chaîne, cependant. Et cette fois, on vous demande une gamme de valeurs. Comme la nature de la chaîne est de connecter les attributs d'un objet à d'autres objets affecte, nous les enchaînons ensemble. Les déclencheurs sont regroupés en plusieurs catégories. Il s'agit des touches tactiles, conditionnelles , souris, touches, entrées et capteurs. Donc, vous pouvez voir qu'il y a pas mal de déclencheurs à jouer avec. Les réponses sont également regroupées. Mais je n'ai pas de nom de catégorie. Mais j'aime les considérer comme des propriétés de traduction. Mouvement, navigation, entrée, audiovisuel et dernier groupe de réponses non visuelles diverses. La réponse finale n'est pas vraiment une réponse du tout, mais une façon d'organiser et de multiples autres réponses basées sur certaines conditions. Vous ajouteriez une réponse conditionnée si vous souhaitez créer une interaction avec plusieurs résultats. Par exemple, un login fera exactement cela dans une prochaine vidéo dans ce cours. Ok, donc c'est six blog appelé modèle de jeu avec un exemple simple. Je vais dessiner un carré et un cercle. Je vais leur faire des couleurs différentes. Nous allons ajouter un déclencheur de tabulation à notre cercle. Maintenant, ajoutons une réponse de rotation et choisissons le carré comme cible. Et on va le faire tourner de 180 degrés. Je veux que le carré tourne à partir de son centre. Nous devons donc changer le point d'origine. Par défaut, le point d'origine est le coin supérieur gauche. Ok, donc moins de perte à la fenêtre d'aperçu. Maintenant, comme vous pouvez le voir, chaque fois que je touche pour encercler, les carrés correspondent est que je peux ajouter plusieurs réponses à un seul déclencheur. C' est ainsi que la réponse scalaire fera l'échelle carrée d'un 5%. Présentons ça. Maintenant, à chaque fois que je touche le cercle, le carré tourne et il se met à l'échelle. Il est important de savoir que l'ordre dans lequel les réponses sont exécutées est basé sur le temps plutôt que sur les anciennes et qu'elles ont dans le panneau Déclencheurs. Je peux contrôler chaque réponse, début et durée avec ces valeurs ici. Il y a aussi une Timeline très simple. Et je peux contrôler ces deux valeurs dans cette mine supérieure aussi. Donc le retard, la durée. Ainsi, comme vous pouvez le voir, la création d'interactions est super facile à faire. Il y a quelques exceptions et il est vrai que chaque réponse de déclenchement a ses nuances. Mais avec un peu de jeu autour de nous et des essais et des erreurs, ils sont tous assez faciles à saisir. La documentation de la presse est assez bonne. Vous pouvez également accéder aux documents de chaque élément en sélectionnant le point d'interrogation lorsque vous survolez l'élément dans le panneau déclencheur ou réponses. Donc on peut aller sauter ici. Et ça m'a emmené directement à la documentation de saut. Maintenant, vous devriez avoir une compréhension de base du modèle conceptuel et de la façon dont les objets, déclencheurs et les réponses fonctionnent ensemble. Dans la prochaine conférence, nous appliquerons une partie de la théorie que nous avons apprise ici. Commencez à construire l'application de repos de notre planète. 10. Créer votre première interaction: Si vous avez suivi le long, ouvrez votre fichier précédent avec les graphiques de votre importateur. Sinon, vous pouvez télécharger le fichier de démarrage à partir de ce tutoriel. Ok, donc la première chose qu'on va faire est de sélectionner le CTA et d'ajouter un déclencheur de pression. Et maintenant, nous allons ajouter une réponse appelée Jump. Le saut est donc une réponse qui vous permet de passer d'une scène à une autre. Donc nous avons sauté sélectionné, nous allons aller sélectionner comment C, et nous allons choisir la connexion. Et vous pouvez voir ici que nous avons des transitions prédéfinies que nous pouvons utiliser. Donc, nous avons fondu, POP , glisser, glisser et retourner. Pour cette première transition, on va juste utiliser le fondu. Et c'est à peu près notre première interaction créée. C' était facile, n'est-ce pas ? D' accord ? Alors connectons notre écran de connexion à l'écran d'accueil. Si vous voulez mettre la vidéo en pause et avoir un but pour vous-même, faites-le maintenant. Ok, si vous avez essayé de connecter le deuxième écran vers le haut, j'espère que ça s'est bien passé. Laisse-moi te rattraper et le faire aussi. Donc, je vais sélectionner le bouton Continuer sur la connexion pour doit aller à notre login semble. Alors maintenant, continuons bouton. Je vais ajouter un autre déclencheur d'onglet. Comme avant. Je vais ajouter une réponse de saut. Et cette fois, je vais sélectionner l'écran d'accueil. Et nous garderons celui-là comme un fondu aussi. Ok, alors testons ça. Donc, tout d'abord, nous devons nous assurer que notre fichier est sur la scène de départ avant d'aller dans les aperçus de S, double-cliquez sur le personnel. Aperçu. Et nous allons cliquer sur login. Belle transition en fondu dans notre écran de connexion. Et puis on va frapper Continuer. Et un bon fondu dans notre écran d'accueil. Super, donc maintenant nous avons connecté les trois écrans en utilisant des déclencheurs et des réponses de base. Ensuite, nous allons créer de vraies entrées de texte et nous sommes impatients de vous y voir. 11. Créer un formulaire de login: Salut, bienvenue. Dans cette vidéo, nous allons créer un formulaire de connexion de travail. Pour ce faire, nous allons utiliser des entrées de texte spéciales, ce qui nous permet de taper la taxe réelle en utilisant le clavier natif. Ok, donc nous allons nous assurer que vous êtes sur la scène de connexion. Si vous ne l'avez pas fait, si vous ne l'avez pas suivi, vous pouvez télécharger un fichier Python de démarrage. Pour que vous puissiez suivre. Donc la première chose qu'on va faire, c'est qu'on va traîner des entrées de texte. Nous allons créer des entrées de texte ici à partir du menu fiscal. Et nous voulions styliser cette entrée SAT reflète notre conception ici. Donc la première chose qu'on va faire, c'est de fixer la taille à la même taille. Donc nous vérifions ici est 343 par 48. Donc ça a fait la même chose. Ok, et nous allons vouloir courber les coins. Alors définissons les coins de rayon. C'est flatté. Donc on va régler le rayon à 24. Et nous allons définir le remplissage d'arrière-plan de l'entrée sur blanc. Ok, donc nous voulons aussi correspondre à ce rembourrage. Nous allons donc ajouter un peu de rembourrage à gauche. Et on va ajouter un peu de rembourrage. C'est là que C. et je vais mettre la police va changer le pouce. Tu peux utiliser ce que tu veux. Et je vais utiliser des sons Museo, 516 pixels de grande taille. Et on va changer le, c'est là qu'il est dit d'entrée dot-point. Il s'agit du texte de l'espace réservé. Donc je vais juste changer la couleur de ça. Donc, je vais trouver un texte réservé. Et je vais changer ça en sept. Ok, donc comme vous pouvez le voir maintenant, qu'entre chaque supprime, débarrassons-nous de cette frontière. Donc je vais juste décocher ça. C' était la bordure grise originale. D'accord. Donc ça a l'air bien. On va déplacer la position des camionnettes juste au-dessus du champ d'e-mail. Et je veux changer le texte de l'espace réservé. Donc je vais juste changer ça en email. D'accord ? Et on va renommer cette entrée, email. Entrée. Ok, donc c'est dupliquer ça. Commande ou contrôle D. Et on nommera ce mot de passe. Et je vais juste positionner ça sur le champ du mot de passe. Mais je vais aussi changer l'ordre à l'intérieur du panneau des calques. Ok, donc ça a changé le texte de l'espace réservé en mot de passe. Et si nous faisons défiler jusqu'aux options du clavier ici, afin que nous puissions changer le type de clavier à un certain nombre de claviers. Donc, par défaut, il utilise le clavier fiscal où nous avons URL, e-mail, numéro, texte et mot de passe et mot de passe numéro. Et on va changer le clavier en mot de passe fiscal. Ok, donc en fait, si je retourne à mon champ de saisie email, je vais aussi changer ce clavier en email. Et je vais juste nous donner le, le symbole de l'application sur le clavier. Ok, donc c'est juste tester ça rapidement, voir ce qu'on a. Donc, si je tape dans l'e-mail, vous pouvez voir maintenant un clavier apparaît. Maintenant, ce clavier ici en aperçu n'est pas un vrai clavier. Ceci est juste pour vous montrer que la fonctionnalité du clavier fonctionne. Mais si cela était connecté à un vrai appareil, vous auriez un vrai clavier qui fonctionne. Lorsque vous le faites, lorsque vous testez en prévisualisation, vous pouvez toujours utiliser votre vrai clavier connecté à votre ordinateur. Vous ne pouvez pas taper ou taper sur l'une de ces touches dans la fenêtre d'aperçu, ce réseau. Donc, si je peux juste taper sur mon clavier ici et vous pouvez voir que j'ai tout ce dont j'ai besoin. Donc, je dis mon e-mail et si je tape mot de passe, si je commence à taper, vous verrez que je vais obtenir les points de mot de passe parce que nous avons choisi mot de passe fiscal comme le, comme le type de clavier. Super, donc maintenant nous avons remplacé avec succès notre TextField graphique, avons de véritables interactifs. Ainsi, vous pouvez voir lorsque nous tapons dans l'un de ces champs, le clavier apparaît et obscurcit notre bouton Continuer. Et donc nous allons gérer ça de deux façons. abord, nous allons faire fonctionner le bouton go de sorte que lorsque nous avons eu, quand nous appuyez dessus, nous naviguons vers l'écran d'accueil. Alors faisons ça maintenant. Donc nous allons ajouter un autre déclencheur et ce sera un déclencheur de retour. Et à partir de la liste déroulante des couches, nous allons choisir le champ de mot de passe, entrée de mot de passe. Et parce que nous allons effectivement utiliser la même transition que nous avons déjà mise en place sans capture, et nous allons simplement copier cette réponse de saut. Donc commande Z ou Control Z, si vos fenêtres, et nous allons coller cela dans. Et nous testons cela maintenant nous devrions naviguer vers l'écran d'accueil. Alors allons-y. Donc, si je tape dans mon champ de mot de passe et que j'appuie sur le bouton de retour, vous pouvez voir que j'ai passé à l'écran d'accueil. Ok, donc c'est cool, mais nous voulons toujours rendre notre bouton visible en option aussi. Nous devons donc animer au-dessus du clavier quand il apparaît. La première chose que nous devons faire est de déclencher l'animation lorsqu'un utilisateur est dans le champ e-mail. Ok, donc ça a déplacé les champs de texte ensemble et les regrouper. Et ça va les mettre à l'intérieur d'un conteneur. Nous pouvons effectivement supprimer comment les couches de mot de passe graphiques aussi bien. Et nous allons nommer ce formulaire de conteneur. Ok, donc c'est ouvrir ceci et sélectionnez le champ e-mail. Et maintenant, nous allons ajouter un gestionnaire de déclenchement de focus. La chute, nous avons qu'il satisfait, ce qui est ce que nous voulons. D' accord ? Donc c'est qu'un duns que nous avons reflète comment forme. Et nous allons maintenant ajouter une réponse de déplacement à l'intérieur de notre déclencheur de focus. Notez que dans cet espace, nous avons sélectionné notre formulaire. C'est mieux. Je vais mettre le fil à 3-20. Ok, alors testons ça. Donc, quand nous les gens dans le domaine de l'e-mail, nous pouvons voir que notre formulaire progresse vers le haut en apparence bien. Ok, alors revenons à notre prototype. Et c'est dupliquer ce mouvement. Donc ça dit Command Z ou Control D. Et cette fois, nous allons choisir le CTA primaire, qui est notre bouton Continuer ici. Je vais définir ça comme la cible. Et on va régler le Y à quatre 55. Et c'est encore un test. Donc, nous sélectionnons dans notre champ email, nous pouvons voir que notre formulaire s'ajuste maintenant pour s'asseoir au-dessus du clavier. Ok, cool. Nous avons donc créé notre formulaire de connexion. Pour l'instant, c'est assez fait, mais nous allons ajouter une logique conditionnelle dans une vidéo ultérieure pour le faire fonctionner pour de vrai. Donc, nous avons déjà couvert quelques trucs assez cool avec des entrées et l'anime basé sur la mise au point d'entrée. Et l'application commence déjà à se sentir plus réelle. Pour le rendre encore plus réel, c' est de l'essayer sur un vrai appareil, qui est ce que nous allons faire dans la prochaine vidéo pour vous y voir. 12. Tester sur des appareils réels: Salut là et bienvenue. Donc, dans cette vidéo, je vais juste vous emmener à travers l'application compagnon pour prototype plus élevé, que vous pouvez télécharger pour iOS et Android respectivement, est application gratuite et c'est une application de lecteur. Et c'est une excellente façon de tester vos prototypes sur des appareils, en fait, est essentielle pour vous aussi, et être en mesure de tester vos prototypes sur des appareils. Je ne peux pas insister sur l'importance des tests sur l'appareil. Évidemment, ça dépend. Surveillez également votre bâtiment. Il y a des choses que vous allez devoir tester sur l'appareil. Et en fait, dans ce cours, nous allons utiliser des fonctionnalités qui ne sont que des appareils. Donc, des choses comme nous allons construire une application pour appareil photo et nous allons utiliser des commentaires haptiques plus tard dans le cours. Donc, vous allez devoir être en mesure d'utiliser un appareil pour en faire l'expérience. Alors, comment cela fonctionne-t-il avec les appareils ? Donc, si nous avons un coup d'oeil ici dans cette zone de menu, nous pouvons voir que nous avons cette option d'appareil et nous avons cette option Exécuter. Donc, vous pouvez voir en ce moment que l'icône de l'appareil est en fait verte. Donc, si je tape dessus, vous pouvez voir que mon iPhone est connecté. Nous savons qu'il est connecté parce qu'il est en bleu et que c'est cette petite icône de jeu à côté. Et il existe plusieurs façons différentes de connecter des appareils. Donc, je suis connecté via USB, donc j'ai un câble USB connecté de mon ordinateur à mon téléphone. Donc c'est une façon de le faire. Vous pouvez également vous connecter via WiFi. Vous avez juste besoin de vous assurer que feu de forêt de votre ordinateur et le wifi de votre téléphone sont les mêmes. Et puis vous pouvez vous connecter. Donc, vous pouvez aussi, si vous utilisez le Wi-Fi et alors vous pouvez, vous pouvez scanner ce code QR. Et vous pouvez accéder à ce code QR à partir de l'offre pro à qui vous évitera également la difficulté de taper l'adresse IP de votre, de votre wifi. Vous allez donc vous assurer que vos téléphones sont connectés dans l'une de ces options. Et puis le bouton d'exécution envoie essentiellement un prototype à votre appareil. Donc, contrairement à l'aperçu, où c'est un peu automatique. Alors prévisualisation, si je montre ça ici, nous avons ce aussi des bus. Donc, dès que je fais un changement dans votre environnement trois va se mettre à jour automatiquement dans Preview. Ce n'est pas ainsi que cela fonctionne pour l'appareil. Tu vas devoir appuyer sur le bouton Exécuter. Tu vas avoir ce petit carillon et tu le verras charger sur ton appareil. Et puis tu pourras tester ça. Donc, nous allons vraiment jeter un oeil à notre site hôte tel qu'il se trouve actuellement sur notre appareil. Donc je vais passer à notre appareil maintenant. Donc vous pouvez voir ici, je regarde maintenant mon prototype sur mon, sur mon appareil. Donc, je vais juste faire glisser du bas de l'écran pour révéler le menu. Nous avons donc quelques options ici dans le lecteur, qui est le nom de l'application que vous téléchargez pour iOS et Android. Et nous avons la possibilité d'arrêter, nous avons la possibilité de redémarrer le prototype et nous avons la possibilité d'économiser. Nous pouvons donc enregistrer le prototype sur l'appareil lui-même, ce qui est vraiment utile si vous avez une mauvaise connexion Internet, si vous faites des tests de convivialité. Nous avons également une base pour changer la vitesse du joueur et nous pouvons également changer la scène que nous sommes, nous regardons. Pour que nous puissions, nous pouvons le faire dans le panneau de contrôle. Et si je viens d'arrêter le prototype ici, vous pouvez voir que c'est l'écran par défaut que vous verrez. Où vous pouvez voir, je peux me connecter via USB ou je peux scanner le code QR. Vous pouvez voir que nous sommes connectés via USB en bas. Donc juste pour attirer votre attention sur la barre d'onglets en bas. J' ai donc la possibilité d'accéder au Cloud. Je peux me connecter et voir mes prototypes que j'ai téléchargés sur Cloud. J' ai le dossier où je peux accéder aux prototypes que j'ai enregistrés sur mon appareil. Une chose que je veux vous montrer, qui est vraiment, vraiment important est le gestionnaire de polices ici, que nous avons dans les paramètres généraux. Et si je clique sur cela, vous pouvez voir le, J'ai certaines polices installées. Donc, si vous voulez utiliser la capacité de type dynamique à l'intérieur de Pro pi, qui sera certainement utilisé dans les futures vidéos, vous pouvez télécharger des polices personnalisées sur votre appareil. Et vous pouvez vous assurer que vos prototypes sont rendus correctement. Et c'est vraiment, vraiment, vraiment utile. Il y a quelque chose qui n'est pas pris en charge dans le cloud, à l'intérieur du Web, la partie Web de la presse Appliquer. Mais vous pouvez totalement faire application sur les appareils. Et la façon dont vous le faites est tant que vous pouvez partager ces polices avec une application sur votre téléphone. Donc, que ce soit par e-mail ou par nuage de scories ou, ou de toute autre manière, toute autre application où vous pouvez transférer ces fichiers sur votre téléphone, vous pouvez simplement les partager. Nous produisons une tarte dans le menu Partager, et vous pouvez ensuite les télécharger sur votre appareil. Ok, alors commençons notre prototype en appuyant sur le bouton de lecture ici. Ok, donc je suis dans mon application, donc je vais juste intro de mon application. On va appuyer sur le bouton de connexion et je vais appuyer sur le bouton continuer et ça m'a connecté à la maison. Ok, donc c'est la façon dont vous prévisualisez vos prototypes sur les appareils. C' est essentiel pour un grand nombre de fonctionnalités dans un plan PPO. Je vous encourage vraiment à tester vos prototypes sur des appareils de cette façon. Et il y a d'autres fonctionnalités dans l'application que vous voudrez peut-être consulter, telles que la possibilité d'activer et de désactiver les conseils. Donc oui, c'est une application vraiment, vraiment super et c'est une excellente façon de voir vos prototypes. Ok, donc ceci à propos de la fin de notre vidéo pour regarder comment vous prévisualisez sur l'appareil. Et je te verrai dans la prochaine vidéo. 13. Créer le message de photostream scrollable: Hé, là. Donc, dans cette vidéo, nous allons créer un flux de photos défilant. Alors ouvrez votre fichier si vous avez suivi le long. Si ce n'est pas le cas, il y a un fichier étoile que vous pouvez télécharger. Donc je voulais parler de conteneurs. Il y a donc trois types de conteneurs. Il y a un conteneur régulier qui est comme un groupe. Il y a un conteneur défilant et il y a un conteneur de pagination, et vous pouvez y accéder à partir de ce menu ici. Une façon d'y accéder. Mais la plupart du temps, vous allez être des conteneurs fous par un groupe en couches ensemble. Et il y a, il y a une très bonne raison à ça. Donc, si je crée juste un blanc semble juste pour des raisons de démonstration. Donc, je crée un conteneur à partir d'ici. Et c'est effectivement une boîte vide. Et vous pouvez le voir ici, mon panneau Calques. Alors combattez nous créer un rectangle. Et je vais juste positionner mon rectangle ici. Et je vais faire glisser ça dans le conteneur. Donc, vous pouvez voir que lorsque je survole mon conteneur, la limite du conteneur est, mais mon rectangle est une usine en dehors de ce conteneur. Donc maintenant, je vais devoir positionner manuellement mon rectangle dans la position que je veux. Et ce que vous pouvez voir, c'est que si je prends mon conteneur, je peux le déplacer. Vous pouvez voir que les rectangles se déplacent avec le conteneur. Si je sélectionne le rectangle, vous pouvez le voir se déplacer séparément. Mais c'est, il y a beaucoup de travail manuel ici pour obtenir tout dans la bonne position. Si je veux m'assurer que mes rectangles dans un, dans une position dans le coin supérieur gauche. Et vous pouvez voir ici si je sélectionne Rectangle que la position est relative au conteneur. Donc, en ce moment, si je, laissez-moi juste changer ça à 00. Donc, vous pouvez voir quand je survole que mon rectangle est entièrement dans le coin supérieur gauche et sa position est relative au conteneur. Si je sélectionne le conteneur, vous pouvez voir que sa position est une valeur différente car elle est relative à la scène. Il y a donc cette relation parent-enfant entre les conteneurs et les objets qui sont imbriqués dans les conteneurs. D' accord. C' est donc une façon de, de, d'utiliser des conteneurs. Mais comme je l'ai dit, nous allons principalement grouper des conteneurs, ce qui est, est beaucoup plus utile et plus facile d'obtenir des choses peut-être. Donc, juste comme un exemple de cela. Donc, si je crée un rectangle et un ovale, et je vais juste changer sélectionner ceux-ci, et je vais les regrouper ensemble. Donc c'est la commande G sur le contrôle Mac G sur Windows. Vous pouvez voir maintenant qu'ils ont été mis à l'intérieur d'un conteneur. Et vous pouvez voir que la limite des conteneurs correspond exactement à la zone occupée par les deux objets. C' est donc de loin une meilleure façon de créer des conteneurs. Et vous allez probablement vous retrouver à faire le traçage des conteneurs de cette façon plus souvent que dans l'autre sens. Ok, alors débarrassons-nous de cette scène. Nous allons attirer notre attention sur la scène de la maison. Et nous allons faire notre flux de photos. Donc, notre conteneur de flux de photos ici avec des images de câblage. Et on va en faire un conteneur défilant pour qu'on puisse faire défiler vers le haut et vers le bas. La première chose qu'on va faire, c'est qu'on va sélectionner la chaîne de photos. Et si nous faisons défiler vers le bas dans le panneau Propriétés, vous voyez qu'il y a une section appelée pagination de défilement. Donc, on va sélectionner Scroll. Et cela a maintenant transformé notre conteneur régulier en conteneur de défilement. Et vous pouvez le dire de deux façons. Numéro un, vous pouvez voir que les icônes changent pour ces deux petites flèches à l'intérieur, ce qui signifie qu'il s'agit d'un conteneur à défilement vertical. Et aussi quand j'ai sélectionné défilement, vous pouvez voir que j'ai quelques autres options qui m'ont été révélées. Donc, à savoir le troisième, qui est la direction du défilement, qui par défaut est vertical. Cela tend à être la direction de défilement la plus populaire. Par peut le changer à l'horizontale avec un souhait. Et j'ai aussi cette option appelée sur défilement, qui est l'équilibre que vous obtenez lorsque vous faites défiler conteneur et vous arrivez à la fin du conteneur et vous un peu tirer tout comme remplit son non élastique. C' est beaucoup un modèle iOS. Et vous pouvez avoir ce qui est activé par défaut ici, vous pouvez également l'éteindre si vous le souhaitez. La dernière option est cette position de défilement. Donc, je peux définir la position par défaut de mes conteneurs ou être autre chose que 0. On va le garder 0 pour l'instant, mais c'est ce que c'est si tu es curieux. D' accord. Donc, pour le moment, nous avons ce conteneur de défilement. Mais pour le moment, si je prévois ça, donc vous pouvez voir que je ne peux même pas emménager. Et c'est parce que nous avons ce groupe en haut est appareil et bezels groupe, ce qui bloque effectivement notre accès au flux de photos. Donc, c'est quelque chose à garder à l'esprit si vous êtes, si vous essayez de faire défiler le conteneur et qu'il ne fait pas défiler, alors il y a de bonnes chances qu'il y ait quelque chose plus haut dans le panneau des calques qui est Bloquer dans cela. Maintenant, il y a deux façons de gérer ça. Ross, on n'a pas du tout besoin de ce groupe, donc on peut juste supprimer ici. Mais je veux juste te montrer une autre façon de gérer l'air. Donc, si je voulais garder ce groupe, si je le garde sélectionné. Et ici, en bas du panneau Propriétés, vous verrez cette option rendre les couches inférieures touchables. Donc si je sélectionne ceci, ce qui est efficace va faire, va dire à mon curseur d'ignorer ce groupe, ce conteneur, et tous les objets qu'il contient. Donc, je vais effectivement être en mesure de cliquer à travers et d'accéder à mon flux de photos. Donc si nous avons juste aperçu cela à nouveau, à droite, donc vous pouvez maintenant voir que je peux semblant de défilement, je peux faire défiler mon flux de photos. Pas exactement pourquoi, mais au moins je peux y arriver. Et ici, vous pouvez voir que sur l'inaction de défilement. Ok, on va supprimer ce groupe si on n'en a pas besoin. C' était quelque chose qui venait de l'épaississement Ripple. Ok, et nous allons retourner notre attention sur le conteneur de défilement de flux de photos. Donc, la façon dont vous le faites faire défiler est que vous devez définir la zone défilante. C' est donc la zone visible. Donc pour nous, les zones alvéolaires vont être ce genre de zone d'écrans de téléphone cellulaire. Donc, il commence juste en dessous de la phrase, mais nous voulons qu'elle se termine juste au-dessus de la barre d'onglets ici. Donc, la façon dont nous faisons cela est que nous avons juste besoin de changer la taille de la boîte de délimitation du conteneur de défilement lui-même. On peut juste traîner du bas ici, mettre grossièrement dans leur position. Celui. Donc ça a l'air bien. Alors prévisualisons ça. Ok, donc maintenant vous pouvez voir que je peux faire défiler tout le chemin vers le bas. Mais tout comme quand je fais défiler comment il passe sous les catégories que je voulais, je suis allé à disparaître efficacement quand il passe sous les scripts de chat. Alors comment on fait ça ? Donc ce que nous allons faire, c'est que nous allons nous assurer que nos conteneurs de défilement de flux de photos ont été sélectionnés à nouveau. Et nous allons revenir au panneau Propriétés. Et nous allons sélectionner cette option appelée sous-couches de clips. Donc clips jusqu'à couches est effectivement nous pondérer la façon dont nous masquons pi processus. Et vous pouvez voir immédiatement il est coupé le, le, le contenu du défilement vers mon cadre de délimitation de défilement. Donc, si nous avons maintenant un aperçu, nous pouvons voir que nous sommes effectivement coupés à l'intérieur de ceci, à l'intérieur de cette fenêtre. Ça a l'air bien. Mais maintenant, je n'aime pas vraiment ce qu'il est, ça arrive un peu à l'écran. Je voulais que les images soient sous la barre d'onglets. Je ne veux pas qu'ils disparaissent sous les catégories. Donc, je vais prolonger ça en arrière. D' accord ? Et nous allons en prévisualiser à nouveau. Ok, donc c'est plus beau, mais maintenant je ne peux plus aller plus loin. Et c'est parce que la vue de défilement ne fait que défiler jusqu'à la profondeur maximale du contenu qui se trouve à l'intérieur. Et les derniers objets que j'ai à l'intérieur de mon consentement parchemin ou sont ces deux images ? J' ai donc besoin de faire un petit piratage pour le forcer à faire défiler un peu plus loin. Donc on va créer un rectangle. Et on appellera ce piratage de défilement. Et nous allons faire glisser ça dans le flux de photos. Je vais juste m'asseoir là en bas. Et je dois positionner ça. Donc juste pour les lambdas et juste une sorte de déclic sur le sous-contrat pour que je puisse voir ce que je fais. Et je vais m'entraîner jusqu'au bas. Ok, donc c'est juste jeter un oeil à ça. Nous devons donc déterminer quelle est la distance. Donc, nous avons comment la barre d'onglets, qui est 52. Alors faisons-le . D'accord. Donc maintenant, nous pouvons maintenant voir une affaire qui a l'air bien. C' est presque toujours des chemins. Mais je ne veux pas voir cette boîte grise. Donc je vais retourner à cette boîte grise et je vais réduire la visibilité pour remplir l'opacité à 0. Donc on ne peut pas le voir. Ok, nous allons en prévisualiser une dernière fois. Ok, donc maintenant j'ai la bonne position de défilement et tout va bien. Douce. Nous avons maintenant un beau flux de photos défilant. Les vues défilantes sont le brevet de base pour mobile. Et comme vous pouvez le voir dans pro upaya, est-il vraiment facile de les créer. Donc c'est tout pour cette vidéo. Rejoins-moi dans la prochaine vidéo où nous explorerons le conteneur de pagination et nous allons construire une vue de page. On se voit alors. 14. Créer de paging entre des vues de détail: Salut là. Donc, dans cette vidéo, nous allons construire des fonctionnalités de pagination dans notre prototype dans l'écran d'accueil. Nous avons donc cet onglet de défilement de catégorie dans le haut. Nous allons donc permettre aux utilisateurs d'être en mesure de page entre l'écran d aujourd'hui et l'écran récent. Ok, donc pour ça, nous allons avoir besoin d'un peu plus de contenu. J' ai donc une autre page préparée dans le fichier de figure. Donc, nous avons cette page d'accueil récente, qui est à peu près la même conception, est juste obtenu tellement de contenu différent supplémentaire afin que nous puissions construire cette fonctionnalité. Donc, parce que nous n'avons pas besoin du reste des graphiques, nous avons vraiment besoin de ce flux de photos. Ce que j'ai tendance à faire est juste de créer une nouvelle scène dans mon fichier Py. Et je vais juste appeler cette impulsion. Et c'est juste un endroit où je suis des graphismes cool, je peux ensuite extraire les différentes pièces dont j'ai besoin. Ok, donc on va aller à Import Fichman. Il suffit de laisser cela se connecter et nous allons attraper notre maison design récent. Ok, donc tout ce qu'on a vraiment besoin de ça, ce fichier important est les groupes de flux de photos. Donc, nous allons juste copier cette commande C sur Mac ou Control C ou Windows. Et nous allons revenir à notre scène Home. Et on va juste coller ça. Et je vais laisser ça pour l'instant, vais laisser ça là. Et je vais appeler cette page 2. Et je vais devoir faire cela efficacement la même chose que notre flux de photos dans beaucoup d'Elaine Page un. C' est un conteneur défilant et tout ça. Alors faisons ça maintenant. Donc nous vérifions comment la page 1716, donc il y a peut faire ce 716 haut. Et nous allons avoir besoin d'un petit graphique de rembourrage aussi. Donc je vais juste copier ça et coller ça dans, ici. Même chose. Ok, donc nous devons transformer ça en un groupe de défilement. Donc, faites défiler vers le bas jusqu'à notre pagination et choisissez défiler. Et nous allons définir les valeurs par défaut ici. Donc, nous devrions maintenant avoir effectivement une page de défilement en double. Donc nous devons décaler ces deux sur le côté droit pour qu'on ne paie pas qu'elle se sentait du côté droit. Nous voulons qu'il soit juste à la limite de notre écran. Donc, nous savons que notre iPhone est 375 large. Donc, nous allons juste changer avec la page 2 sélectionnée. On va juste changer la position x 2375. Ok, donc on a nos pages. Donc, ce que nous devons faire maintenant, c'est que nous devons, en fait, il allait réorganiser ces pages en haut. Et nous sélectionnons les deux et faisons un autre groupe. Donc commande et contrôle, G, Mac et PC. Nous avons maintenant des groupes sont deux pages dans cet autre conteneur. Et parce que nous avons des groupes les pages que le conteneur a exactement la même taille que les deux groupes conteneurs que deux groupes pages. Donc nous allons prendre ce flux de photos et nous allons transformer ça en un conteneur de peinture. Donc, nous allons à la même page de défilement et mais cette fois, nous choisissons la pagination. Et les conteneurs de pagination par défaut à horizontal parce que la page a l'intention d'être une semaine horizontale pouvez-vous utiliser la pagination verticale aussi. Et de même que la façon dont les conteneurs de défilement fonctionnent, c'est la page est définie par le cadre de sélection. Nous devons donc réduire ce cadre de sélection afin qu'il soit juste la taille de la largeur de page de retrait d'une page. On peut voir que c'est pour 343. Donc, nous voulons juste faire de notre conteneur de pagination de flux de photos les mêmes trois pour trois. Ok, donc vous pouvez voir maintenant que c'est hérité de la même limite. Ok, il est temps de joindre à cet aperçu. Et il y a la pagination du procès. Donc, vous pouvez voir que c'est de la pagination, il y a une résistance annuelle que vous obtenez avec la pagination. Mais vous pouvez voir que ce n'est pas la pagination exactement dans la bonne position car nous pouvons toujours voir le bord de notre FirstPage. Et la raison de cela, nous avons cette gouttière entre les deux pages, mais nous utilisons la largeur du conteneur de pagination pour définir jusqu'où, comment prochaines pages de l'écran. Donc, si nous avons juste un coup d'œil vers le bas aux options de pagination de défilement, il est dit page par conteneur. Et notre conteneur est 343. Donc c'est de trois pour trois, mais il faut tenir compte de l'essence. Donc ce qu'on va faire, c'est qu'on va sélectionner notre conteneur de diffusion de photos. Et il y a cette page d'option par laquelle nous allons choisir la deuxième option qui est personnalisée. Donc, nous pouvons réellement définir une largeur personnalisée. Et je sais que cette coutume avec ces sp3 pour prendre en compte la GSA. Donc je vais taper 360 dedans et on va donner le test. Ok, donc maintenant on peut voir quand on page toutes les pages dans la bonne position. Ok, cool. Donc c'est le premier travail fait. La deuxième chose que nous voulons faire, c'est que nous voulons pouvoir appuyer sur ces boutons de catégorie et basculer entre les deux. Donc, nous voulons être en mesure de efficacement ce que je fais ce bouton de réinitialisation un robinet sur le bouton au moment où vous pouvez voir aucun de ces travaux. Et nous voulons aussi rendre ce défilement à moitié défilante. Alors faisons-le maintenant. Donc d'abord, nous allons découper le groupe des catégories. Et nous devons transformer ça en un confinement à défilement. Mais cette fois, nous voulons que la direction de défilement soit horizontale. Comme précédemment, nous devons changer la largeur du cadre de sélection. Nous allons donc réduire la largeur 2343 site correspond à la même largeur que notre contenu. Et si nous testons rapidement cela, nous pouvons voir que nous avons maintenant appelé onglet scrollable. D'accord ? Donc si on ouvre ça, on veut trouver la raison pour laquelle les derniers beurres et c'est, il y a un conteneur pour la course. Et ce qu'on veut faire, c'est faire ce deuxième ballon. Nous allons donc ajouter un déclencheur SAP, alors assurez-vous qu'il est sélectionné ici dans le dernier panneau et ajoutez un déclencheur d'attaque. Et en gardant récent sélectionné, nous allons ajouter une réponse de couleur. Ainsi, les réponses de couleur, comme vous pouvez le deviner, nous permettent de changer la couleur des choses. Les réponses couleur ne fonctionnent que sur les objets de profil natifs. Donc, vous ne pouvez pas apporter un PNG ou, ou simplement un SVG et changer la couleur. Vous devez faire quelques étapes supplémentaires et certaines de celles où l'application d'une couleur forme deux et un sous-conteneur. Donc c'est un peu prêt à partir. Et nous allons juste en faire une couleur particulière. Donc, nous saisissons la référence qui est 00064, et nous devons nous assurer que Phil est 100 fonctionne autrement ici. D' accord ? Alors testons vite ça. Tos i. Quand on l'a tapé, on peut voir que la forme de la pilule a changé de couleur, mais on ne peut pas voir le texte. Donc, si nous ouvrons notre conteneur, nous pouvons voir que nous avons le texte et ce sont des objets de texte graphiques spéciaux. Donc, nous ne pouvons pas actuellement affecter cette couleur hexadécimale parce que ce sont ces objets graphiques. Donc, nous devons convertir en texte. Alors faisons cela en appuyant sur ce bouton ici. Et vous pouvez voir maintenant l'icône est changée et c'est maintenant du texte réel. Donc, en gardant cela sélectionné, nous allons ajouter une autre réponse de couleur. Et cette fois, on va changer le texte en blanc, pour s' assurer que Phil est réglé sur 100. Testons ce code pour que nous puissions maintenant voir que nous avons des sorties, hap, state, complète, mais quand ce qui s'est passé est gratuit, donc Owl aujourd'hui est toujours sélectionné. On veut que non sélectionné le fasse ensuite. Donc ce qu'on va faire très facile, on ne peut pas, vous pouvez copier des morceaux entiers d'interactions dans le panneau Déclencheur. Donc, il va sélectionner ce déclencheur de chapeau. Et on va juste copier ça. Et on va le coller. Donc, nous avons complètement dupliqué. Le déclencheur du robinet et tout son contenu. Et juste comme une autre façon, laissez-moi juste supprimer ceci. Nous ne pouvons pas sélectionner et faire la commande D pour dupliquer ici aussi. Ok, donc ce déclencheur va être pour notre bouton de deux jours. Donc nous allons changer la cible pour aujourd'hui. Donc, c'est juste taper des mots de recherche aujourd'hui. Et nous pouvons voir que nous avons deux options que nous avons aujourd'hui, qui est le conteneur et aujourd'hui nous devrions attaquer. Donc, nous allons choisir le conteneur. Et nous allons changer le conteneur pour aujourd'hui à aujourd'hui. Et nous allons changer le procès récent. Donc, pour les dernières années, il nous faut deux. Désolé pour aujourd'hui a été changé aujourd'hui. Tout d'abord, les objets de texte. Et nous allons juste, comme nous l'avons fait avant, nous allons changer le graphique en texte. Les combats sont un peu une réponse et on va faire ce blanc 100. Ok, donc nous avons effectivement dupliqué les deux onglets. Nous avons créé nos deux onglets. Donc, si je tape sur, réinitialiser va changer et si je tape sur aujourd'hui va changer. Mais comme nous pouvons le voir, que les deux sélectionnés, donc nous devons changer l'état de l'autre. Donc, lorsqu'il est récemment sélectionné, Aujourd'hui change, change de couleur. Alors comment on va faire ça ? Nous allons juste déplacer sélectionner ces deux réponses de couleur et nous avons obtenu une copie de ces. Et on va coller directement à l'intérieur. Et on va juste changer les, les cibles pour les autres boutons. Donc nous sommes en train de changer récemment en bleu et blanc et maintenant nous allons changer aujourd'hui. Donc on va trouver aujourd'hui, choisir le conteneur et on va le changer en blanc. Et nous allons sélectionner la réponse de couleur suivante. On va chercher aujourd'hui. Le texte. Et on doit changer ça pour cette fleur. Donc, cette merde cette valeur hexadécimale. Et nous appliquerons ça ici S certitudes à la commande D pour dupliquer ces deux-là dans notre deuxième bouton. Et on va faire la même chose car on va les inverser et on veut de la récente, qui doit être blanche. Et laissez-moi un récent, les objets de texte. Et nous voulons changer ça en bleu. Ok, alors ça donne ce test. Donc, nous avons commencé aujourd'hui, nous pouvons taper sur récent, maintenant, récemment sélectionné, et aujourd'hui est désélectionné parce que nous avons changé les propriétés de couleur. Et nous pouvons aussi parce que nous avons créé les deux tactiques que nous pouvons utiliser aujourd'hui. Et encore une fois, récent n'est pas sélectionné. Ok, donc ça nous amène à la fin de cette vidéo. Nous avons donc créé ces deux déclencheurs de robinet. Nous avons créé la possibilité de page, et dans la vidéo suivante, nous allons accrocher ces deux choses. Donc, lorsque vous page ici, vous êtes sélectionné onglet va changer. De même, lorsque vous sélectionnez son hub ici, votre page se déplace également. Alors on se voit dans la prochaine vidéo. 15. Créer des ongles à dérouler avec une chaîne: Donc, dans cette vidéo, nous allons connecter les onglets de défilement avec un déclencheur appelé chaîne. Donc, lorsque nous balayons d'un endroit à un autre, nous voulons que l'onglet sélectionné se déplace. Il y a un peu de complexité ici. Comme nous pouvons le voir, ces étiquettes ont différentes lampes et couleurs. Nous devons donc non seulement faire la transition, changer leur Lemma, mais aussi gérer le changement de couleur de l'étiquette. Donc la première chose que je vais faire aussi, juste pour le rendre un peu plus dramatique, je vais juste réorganiser certaines des catégories ici. Donc la première chose que je vais le faire et ça peut pour obtenir l'ordre dans le panneau des calques. L' ordre correct. J' aime ma couche ordonnée pour refléter hiérarchiquement. Donc, parce qu'aujourd'hui est le premier élément de la liste, je veux que ce soit au sommet. Alors déplacons ça. Donc nous avons eu aujourd'hui, je veux mettre recommandé ensuite juste parce que c'est un mot un peu plus long et ça va le rendre un peu plus dramatique. Fonctionnalité que nous allons ajouter ici. La prochaine sera donc récente. Et puis nous pouvons laisser le reste tel qu'ils sont. Si sucré, salé et poulet. Et je veux des recherches en bas. Je veux que ça soit en dessous. Juste pour une raison particulière pourquoi cela doit être comme ça. Ok, donc ça doit les premières parties et la partie suivante, nous avons juste besoin de changer visuellement recommandé récemment autour. Donc je vais juste les repositionner grossièrement. Et je peux sélectionner tous ces éléments. Et ici, je peux juste les espacer uniformément. Ok, c'est bien. Ok, donc d'abord, on a toujours besoin de se déplacer onglet. Nous les voulons, nous voulons le mouvement de la pilule au maximum, au mouvement du conteneur de pagination comme nous le balayons ainsi. Donc, la première chose que nous allons faire, c' est qu' on est juste venu donner la possibilité de changer d'onglets quand on, quand on les sélectionne avec tapé, non ? Ok, donc la première chose qu'on va faire est de créer un rectangle de forme. Et ça va être notre pilule. Nous devons donc créer une pilule graphique. Donc, nous allons en faire la même taille que notre, comme notre pilule graphique que nous avons déjà ici, ce conteneur. Donc on va juste faire 7727. On va changer le rayon à 14. Et on va changer la couleur 00, 0-6 ou D, et on va nommer cette aide. Et on va juste déplacer ça sous les deux premiers onglets. Et nous voulons nous assurer qu'il démarre sa position dans la même position qu'aujourd'hui, soit 390390. Ok, c'est cool. Ok, donc la prochaine chose que nous devons faire est d'enlever les champs de ces deux conteneurs eux-mêmes. Donc nous avons juste besoin de laisser Aujourd'hui, nous allons envoyer le remplissage, pas l'opacité de la réponse remplie 0. Et nous allons changer, recommander, recommander qu'il soit rempli à 0 aussi. D' accord ? Donc la prochaine chose qu'on veut faire, c'est qu'on veut dupliquer. Tapotez les conteneurs, disons les marchandises. Et on va les déplacer sous le graphique de la pilule. Et on va l'appeler aujourd'hui. Et recommandé enceinte aujourd'hui. Mais je vais taper pour sélectionner hit. Cela signifie que c'est Hex est blanc, donc ces deux textes doivent être pourquoi c'est le premier est ce que vous voulez ? Pour ça ? Nous avons juste besoin de changer la couleur sélectionnée recommandée, blanc. Et nous pouvons voir ici en fait que recommandé n'est pas encore un objet texte natif texte. Nous devons donc d'abord convertir ce texte. Cela déverrouille alors comment ce ETC, pour changer de couleur, que nous pouvons changer pour attendre. D' accord. Je retourne à nos deux contenants sous la pilule. Donc ces deux doivent être bleus. Alors à côté de nous aujourd'hui, faisons ce 00064. Et on peut juste copier ça. Et pour recommandé, encore une fois, nous devons convertir cela en texte. Et c'est déjà la couleur de la manivelle, donc c'est bon. Ok, tout a l'air un peu bizarre et on a juste besoin de faire une chose de plus pour que ça change par magie. Donc, nous allons sélectionner la pilule et nous allons choisir cette option vers le bas dans le panneau Propriétés en bas il y a un obstacle utilise la masse, donc nous allons sélectionner cela. Ok, donc vous pouvez maintenant voir que les deux objets, les deux conteneurs au-dessus de la pilule ont été une petite flèche basée sur le CCS de masse. Et les deux en dessous tout ce qui est en dessous n'est pas de la masse. Donc, si je prends juste le graphique de la pilule et que je le déplace, vous pouvez voir que je passe comme par magie du bleu au blanc. Ok, donc c'est réglé le changement de couleur. Ensuite, nous devons connecter les onglets au conteneur de pagination. Pour cela, nous allons utiliser une chaîne d'appel de déclenchement puissante. Chaîne nous permet à Cannes toute plage de valeur de propriété à tout autre droit de valeur proxy ? Ici, nous allons utiliser la plage de défilement du conteneur de pagination pour déplacer la pilule. Mais maintenant, je vais seulement bouger le pilier. Rappelez-vous que la deuxième étiquette est beaucoup plus longue que la première. Nous allons donc utiliser le changement et transformer le lemme. Ok, alors sélectionnons la chaîne de photo. Je vais ajouter un déclencheur de chaîne. Et nous allons définir l'origine des deux robinets juste au centre des matchs sur Hill. Pourriez-vous lire la bonne valeur ? Parce que nous allons effectivement transformer de cette pilule aujourd'hui à la pilule recommandée. Laissons la pilule et on va ajouter une réponse à la chaîne. Donc, quand vous regardez la chaîne, vous verrez qu'elle est composée de six boîtes. Et certainement pour la réponse de l'humeur. Donc, les autres réponses seraient différentes de sorte que les deux premières boîtes correspondent à l'amplitude de mouvement. Donc, parce que nous passons au conteneur de pagination, la distance d'une page à l'autre est de 360. Donc on va de 0 à 360. C' est donc notre valeur de départ. C' est donc la valeur de notre, de notre défilé notre distributeur de foyers. Vous pouvez voir ci-dessus, nous avons cette infographie cartographique, qui se rapporte directement aux deux ensembles de boîtes. Ok, donc c'est juste vérifier les valeurs des pilules d'aujourd'hui. Donc, quand on cherche la position, la position centrale. Donc ça nous donne une hache de 77,5 pour l'étoile. Donc nous supprimons les actes. On peut ignorer ces boîtes blanches. Donc nous allons ajouter 77,5 ici. Et puis nous devons maintenant vérifier la coordonnée de la boîte x recommandée, qui est 204. Quand on pompe cette valeur ici. Ok, donc c'est le test. D' accord ? Donc, nous pouvons voir maintenant que nous vieillissons notre contenu, mais comme vous pouvez le voir, nous devons toujours faire face à la longueur de la pilule. Aujourd'hui. Le mot est beaucoup plus court que le travail recommandé. Ok, alors revenons à notre gâchette de chaîne. Et nous allons ajouter une réponse scalaire. Et on va s'assurer que la couche d'oreiller est la cible. Et encore une fois, nous allons avoir besoin d'une plage de 0 à 360. Nous utilisons donc la même amplitude de mouvement ou le flux de photos pour changer la taille de la pilule. Si bien l'échelle de départ. Donc on va voir aujourd'hui. Donc la largeur est 77 ici. Et la pilule recommandée qui est 126. Ok, testons ça. Alors que nous déplaçons ma page, nous pouvons voir maintenant que non seulement nos mouvements en montée, mais qu'il s'adapte à la bonne taille. Donc, je peux encapsuler l'onglet recommandé puis refroidir. Donc maintenant, nous avons connecté avec succès notre page et onglets ensemble et créer une animation cool entre la bande. Si nous revenons à taper dans les onglets, nous pouvons voir que les choses sont un peu brisées. Et c'est parce que nous avons changé la transition des onglets. Dans la prochaine vidéo, nous allons réparer ça pour vous y voir. 16. Sélection d'onglets pour passer à l'échelle entre des pages: Salut là. Donc, dans cette vidéo, nous allons terminer notre défilement et la pagination en connectant nos onglets pour déplacer les pages. Personne ne sera en mesure de balayer l'écran, mais ils auront également la possibilité de taper sur les onglets. Ok, donc la première chose que nous allons faire est de sélectionner notre premier onglet et nous allons changer ceci en recommandé. Ensuite, nous allons supprimer toutes les réponses de couleur. Nous n'en avons plus besoin parce que nous avons créé notre nouvelle animation de colline. Et on va choisir la pilule. Et nous allons ajouter une réponse de déménagement. Ok, donc c'est régler le x sur 204. Et ajoutons maintenant une réponse cicatricielle afin que nous puissions mettre à l'échelle la pilule ainsi que d'emménager. Et nous allons définir la largeur ici, 2146. Ok, c'est cool. Ça marche comme prévu. Ok, passons à notre prochain onglet. Et nous allons sélectionner le prochain déclencheur de saut. Et on va changer cette cible qui aujourd'hui. Et encore une fois comme avant, nous allons supprimer toutes les réponses de couleur. D' accord ? Parce que notre animation, nous sommes à peu près les mêmes que le premier. On peut juste copier cette échelle de déménageurs. Il en va de même pour la commande C ou le contrôle C ou Windows. Et si nous sélectionnons onglet, nous pouvons le coller dans. Et cela va au mouvement et nous voulons changer les valeurs. Nous voulons également changer l'échelle de changement de 77,5 ampères. Ok, testons ça. Co. Donc, nous avons maintenant dupliqué les whens de la conception de mouvement qui se passent sur nos onglets. Donc, maintenant, nous devons connecter comment les onglets au comportement de défilement. Ok, donc on va aller avec mon premier onglet, et je vais ajouter une réponse de défilement ici. Et nous devons nous assurer de choisir le flux de photos comme cible. Parce que c'est ce que nous allons faire défiler. Et on va faire défiler jusqu'aux trois sixièmes. Ok, alors copions ce défilement et collez-le dans nos secondes HAP. Et cette fois, nous allons changer la valeur de défilement à 0. Ok, voilà, voir si ça marche. Donc, comme cela s'est passé recommandé, ma vue de défilement le page maintenant en arrière. Et si je le déplace en pagayant du contenu agile, nous avons aussi notre animation précédente. Génial. Nous avons terminé connecté comment onglets. Je veux juste faire un peu de ménage. Renommons donc certains de nos déclencheurs pour qu'il soit un peu plus facile d'identifier ce qu'est une loi. Et donc nous allons double-cliquer sur le premier onglet et renommer ce robinet recommandé. On peut appeler le second onglet aujourd'hui. Et enfin, nous allons renommer cette chaîne en page pour le SRI. Je pense que c'est fini. Donc, cette section est couverte beaucoup et j'espère que vous avez une vraie idée du fonctionnement de la sonde ainsi que d'être un peu plus à l'aise avec le modèle concept. C' est vraiment un peu comme construire Lego est un M. Peut-être que c'est pour ça que c'est tellement amusant. Si vous voulez vous entraîner davantage, essayez de créer une troisième page et faites-en un autre onglet actif. Cela sera intéressé parce que vous devrez déterminer comment les robots de défilement ont aussi bien pour que l'onglet actif soit à l'écran. Donc, cela nous amène à la fin de cette section. J' espère que ça vous plaira jusqu'à présent. Faites une pause, prenez une tasse de thé et rejoignez-moi dans la section suivante où nous apprendrons tout sur la façon de créer une œuvre dans la barre d'onglets qui vous permet de naviguer entre les scènes. On se voit là-bas. 17. Créer le bar d'onglet - la configuration: Salut là. Et dans cette vidéo, nous allons configurer notre barre d'onglets pour que nos aplatis soient heureux que nous ayons ici en bas de l'écran. Donc nous avons de nouveaux graphismes, de nouveaux flux que nous allons importer. D' abord, avant qu'on ne fasse quelque chose d'important, on va installer notre barre d'onglets ici sur l'écran d'accueil. Et si la barre d'onglets, vous verrez que nous avons ce robinet flottant, notre groupe, et nous avons deux sous-groupes. Un appelé sélectionné, et nous l'appellerons non sélectionné. Et ici, nous avons les états de nos articles d'onglet complets. Ok, donc la première chose que je vais faire, c'est que je vais juste les réorganiser. Donc les maisons ont appelé une tata efficacement, nous inversons l'ordre de ceux-ci pour rendre un peu plus facile. Et nous le ferons aussi pour les non sélectionnés. C' est juste quelque chose que j'aime faire. J' aime avoir l'élément le plus à gauche dans ma conception pour être l'élément le plus haut, mes calques dans mon panneau de lignage. Ok, cool. Donc, nous sommes déjà sur l'écran d'accueil, donc nous voulons d'abord rendre notre article de l'onglet d'accueil sélectif. Donc, tout ce que nous devons faire, c'est que si nous allons sélectionner un groupe et que nous changeons, sélectionnons les trois autres. Et nous allons juste réduire l'opacité à 0. Donc, cela va révéler notre état non sélectionné, qui est bien assis en dessous. Donc le bleu foncé est un brevet sélectif. Est-ce que ceux-ci ne sont pas sélectionnés ? Allons à C et on va créer trois autres scènes. Et nous allons nommer ces Favoris, mises à jour et profil. Et c'est juste déplacé l'impulsion vu humble. Ok, cool. Alors employons nos graphismes. Donc, si nous allons à impulser sigma, sigma pour la durée de ce tutoriel, et je vais choisir mon, alors assurez-vous juste que vous avez votre fichier ouvert en arrière-plan, que ce soit en utilisant SketchUp. Et je vais choisir la tarte préférée est comme ma première importation. Laissez tous les, ce sont les valeurs par défaut. Faisons la même chose pour les deux autres écrans. Et enfin, Profile. Super. Ok, alors retournons à la maison. Et ce qu'on va faire maintenant c'est qu'on va les relier tous ensemble. Ok, alors sélectionnons nos cœurs non sélectionnés. Et nous allons ajouter un déclencheur de pression. Et nous allons ajouter une réponse commune. Et nous allons sélectionner notre scène préférée. Ok, et répétons ça pour les deux autres onglets afin que Ted en appuyant sur Trigger la réponse du graphique a sauté aux mises à jour. Et puis sélectionnez notre utilisateur non sélectionné. Touchez Réponse. Désolé, appuyez sur trigger, John répondants, et sélectionnez notre profil vu. Ok, alors passons un aperçu et testons ça. Donc vous pouvez voir que rien ne marche, donc il se passe quelque chose ici. Essayons de comprendre et ce qui se passe, ce qui se passe. Donc, si nous revenons à notre groupe, nous pouvons voir ici que le groupe sélectionné est en fait assis au-dessus du groupe non sélectionné et qu'il occupe la même quantité d'espace qui superpose effectivement le groupe non sélectionné parce que ce groupe sélectionné a une opacité de 100, même s'il a un remplissage de 0, il est effectivement utilisable, ce qui signifie qu'il bloque l'accès pour le désélectionner en dessous. Heureusement, il existe un moyen très simple de permettre aux éléments de groupe non sélectionnés d'être utilisables. Donc, avec le groupe sélectionné, sélectionné, nous allons faire défiler vers le bas, le panneau proxy et nous allons choisir ceci, rendre les couches inférieures touchables. On va vérifier cette case. Et ce que ça va faire, ça va ignorer ce groupe et nous permettre d'utiliser les éclaircissements en dessous. Donc c'est notre test. Donc maintenant, vous pouvez voir que je peux atteindre mon, ma gâchette et tout fonctionne comme prévu. Donc, nous avons évidemment besoin d'appliquer notre robinet à l'alcool n'a b2 à l'autre semble. D' accord. Avant de le faire, nous allons juste nommer notre nom, celui notre groupe, le nom, notre nom, nos déclencheurs. Donc, nous allons être appelés S tap favoris. Celui-ci va être des mises à jour. La gentillesse ne devait pas être tapé profil. Et puis on va changer les trois et on va commander G, contrôler G sur Windows pour les regrouper ensemble. Et on va appeler cette barre d'onglets. Donc je vais faire maintenant c'est que nous allons appliquer des sorties, avoir br à tous les autres, les trois autres mêmes. Donc, c'est sélectionner les péchés sortants ont br dans le panneau Calques. Et on va juste en faire une copie. Et on va passer à notre scène préférée. Et au lieu de simplement donner ces placements existants ont, au lieu de simplement les coller, nous allons utiliser ceci. Pièces d'interaction. Et ce que cela va faire, c'est d'aller seulement coller nos graphiques, mais aussi nos déclencheurs et réponses. Donc ils sont grignoter cette cour pour que vous puissiez voir les décharges de la barre d'onglets est ici. Je suis aussi tout notre vrai parce que les réponses sont ici aussi. Mais vous remarquerez qu'il y a un objet orange. Donc, quand vous rencontrez un, Voici orange dans pro pi dans le panneau Déclencheurs. Cela signifie qu'il manque un peu d'information ne va pas fonctionner. Tu dois faire quelque chose. Et dans le cas de cela, c'est la réponse conjointe sera définie pour sauter aux favoris étaient évidemment sur la scène préférée. Donc on ne peut pas, on ne peut pas sauter à l'aumône de Siemer et c'est pour ça que c'est cassé parce qu'il ne montrera pas la scène. On est en vente aux enchères dans la liste déroulante. Mais c'est bien parce qu'on veut changer ça à la maison de toute façon. Donc, nous allons renommer ceci pour appuyer sur Accueil. Et nous allons choisir la maison non sélectionnée. Et nous allons définir une réponse commune oméga et je l'ai mis pour sauter au code. Les mises à jour viennent profil devrait être bien. Ok, donc c'est juste sauter à la maison. Et nous allons obtenir ce test pour nous assurer que cela ne fonctionne pas correctement. Donc, nous commençons sur la façon dont nous sélectionnons les favoris. Nous allons ici et nous pouvons voir que nous avons oublié de changer ce Cisco et de le faire maintenant. Donc ça va ouvrir la barre de chapeau des lieux et nous allons réduire la capacité de l'élément sélectionné à la maison. Et nous allons augmenter la capacité de l' élément sélectionné parce que nous sommes maintenant dans cette scène. Et donc vous pouvez voir maintenant que c'est ça qui a l'air correct. Donc c'est le bouton Test une fois de plus. Retourne à la maison. Aperçu. Donc, en courant à la maison, on claque les favoris. Nous avons maintenant sélectionné les favoris et nous pouvons maintenant retourner à la maison. Ok, donc ça fonctionne efficacement, non ? Donc, nous avons juste besoin de l'appliquer à l'autre. Si vous voulez mettre la vidéo en pause et essayer de le faire vous-même, s'il vous plaît le faire maintenant. Et je vous rattraperai dans une minute. Ok, donc si vous mettez la vidéo en pause, j'espère que tout va bien pour vous. Laissez-moi juste vous rattraper par une mise à jour dans mon fichier pour correspondre à ceux. Donc je vais juste aller sur ma scène préférée. Et je vais copier mes mises à jour de la barre d'onglets. Je vais supprimer les morceaux d'interaction avec les patients de la barre d'onglets. Il y a en fait un raccourci Command Shift B que vous pouvez utiliser. Genre d'un changement mises à jour pour Favoris et dormi les favoris modèle non sélectionné sélectionné. Et nous allons passer aux Favoris. Et puis j'ai besoin de changer mon, mon état donc HA, devient 0 et nous voulons juste atteindre ce 1000. Ça a l'air bien. Ok, donc c'est ça. Faites ça à la scène finale. En fait, laissez-moi juste copier cette barre d'onglets à nouveau. Vous n'avez pas à garder le saut dans une barre d'onglets juste comme je le fais, mais vous pouvez toujours utiliser le premier tant que tous vos onglets correspondent à la structure de cela devrait être correct. Mais c'est pour ça que je fais ça. Juste une sorte de soulager le système de remerciement présente comment Paso commercial FV. Et je vais juste changer de profil à la façon dont les choix. Je vais sélectionner Mises à jour. Val est maintenant équilibré sélectionné, sélectionnez les mises à jour. Et enfin, nous avons juste besoin de changer les états sélectionnés de puissance. Donc, bow va maintenant être désélectionné et l'utilisateur va être sélectionné. Ok, donc c'est ça. Retournez à la maison et faites un test rapide. Alors, cours à la maison. Nous pouvons naviguer vers les favoris, nous pouvons naviguer vers les mises à jour, et nous pouvons naviguer vers notre section de profil. Cool. Nous avons donc imprimé la navigation par onglets de base pour notre application. Espérons que vous pouvez voir à quel point c'est facile. Où est-il activé ? Nous permettons qu'il soit plus facile parce que nous utilisons des scènes et que nous utilisons la possibilité de basculer entre les scènes pour seulement compartimenter notre prototype, aussi faciliter création de notre barre d'onglets. Donc j'espère que je vous verrai dans la prochaine vidéo où nous allons créer un écran de détail d'image. Et nous allons configurer la possibilité de revenir en arrière et de tomber à partir de cet écran de détails. Retour à notre flux de photos ListView. 18. Navigation personnalisée vers l'écran des détails: Donc, dans la vidéo précédente, nous avons appris à créer une navigation entre les scènes. Dans cette vidéo, nous allons apprendre à naviguer dans une scène. Donc, la première chose que nous devons faire est juste d'aller à nos importations et juste supprimer tout de la tête est supprimer, supprimer cela off. Et on va aller dans notre dossier fema ou Scatchard pour avoir utilisé ce mot clé dvx, dy. Et nous allons importer al-Din vous dit. Ok, cool. Sélectionnez le contient les groupes et le groupe de conteneurs global appelé DES comment Card. Et nous allons juste vérifier la boîte de sous-titrage pour que nous puissions découper n'importe quelle des extrémités autour de la frontière. Et nous allons copier ce groupe. Passez à notre écran d'accueil. Et on va juste le coller. On va réduire leur C2 passé à 0. Et nous sommes aussi défausses de son chapeau, cette petite icône à droite de la couche de cartes de hurlement DES. Et c'est juste parce que quand nous travaillons là-dessus, nous allons le faire, nous allons avoir besoin d'atteindre les objets en dessous. Et même si l'opacité 0 des voitures diesel va toujours nous bloquer lorsque nous travaillons dans l'environnement de création. Donc juste lui une petite icône I, juste des hauteurs. Il peut être plié à partir de l'assemblage, peut cliquer à travers pour les éléments sont linéaires. Donc c'est cool. On va utiliser cette icône de harangue comme cible pour montrer que ce sont des ressorts et trouver ça. Et on doit avoir une gâchette. Crie encore ça. Et nous allons ajouter une opacité. Et nous allons augmenter la capacité à 100. Je suppose que le personnel est un code de travail. J' ai tapé sur mon image de harangue et j'ai révélé la santé du D. Vous pouvez voir ici, nous pouvons voir la zone en dessous de l'écran qui est regardant les applications fixes MSC comme code retour à notre scène. Rectangle extraoral. Et nous voulons faire des soins exactement de la même taille que l'écran. Donc un petit conseil ici, et elle peut aller dans les entrées de taille et nous pouvons juste taper un 100% dans les deux. Et ça va marcher comment, quelle est la taille réelle de notre scène et en faire une bonne taille. Ok, changeons cette couleur de remplissage. Je vais changer ces deux en 1999. Et je vais renommer ce Bg pour l'arrière-plan. C' est la position en dessous que ces tenaient groupe. Et on va regrouper les deux ensemble. Et je vais renommer ce conteneur et la vue détaillée. Ok, donc maintenant nous avons changé la cible de la capacité devra aller et modifier notre déclencheur et réponse. Donc, ce sont des changements de DES, comment les cartes détails. Et nous avons juste besoin de jouer avec les opacités de ces deux groupes. Donc, pour ces cartes hurlantes, nous voulons que la capacité soit de 104. Le nouveau groupe de conteneurs vous aide. Nous voulons que ce soit 0. Donc, il change les besoins parce que le groupe conteneur, qui est maintenant ces santé vous quand que 0, tout à l'intérieur de celui-ci sera 0 aussi bien. De même, quand nous voulons montrer ce point de vue, nous voulions tester augmenter leur pâté de ces énormes 100s de santé. Donc si le Cobb détaillé était toujours à 0, ça ne se montrerait toujours pas. Donc nous devons nous assurer que c'est déjà à 100 ans. Ok, testons ça. Assurez-vous que notre astuce fonctionne correctement. Ok, ça a l'air bien. Ensuite, nous devons lancer la navigation arrière. Ok, donc c'est juste apporter notre capacité de vue détaillée jusqu'à 100 pour qu'on puisse travailler avec ça. Nous devrons nous rappeler de le baisser quand nous irons tester. Et nous allons sélectionner ce bouton de retour ici. Et nous allons ajouter un déclencheur de tabulation. Copiez cette opacité du déclencheur précédent et collez-la dans notre nouveau déclencheur ici. Et nous allons mettre cette opacité à 0. Ok, alors revenons à votre santé et ramenons-le à zéros. On a fini de travailler avec. Et nous allons juste tester, tester pour voir si nos interactions arrière fonctionnent correctement. Donc, nous tapons sur l'image de la moraine pour ouvrir la vue détaillée, et nous tapons sur le bouton de retour pour la fermer. Là, vous avez la navigation de base dans une scène. La prochaine chose de retour à l'animation inverse, nous venons de le faire. On utilise un pâteux, mais on aurait pu utiliser autre chose. Vous vous souvenez de ce qui est utile pour remettre les objets à leur état d'origine. Pourtant, c'est exact, la réponse de réinitialisation. Donc, allons changer l'opacité pour la réponse de réinitialisation maintenant. Donc c'est juste ajouter une réinitialisation. Pour réinitialiser ces plus sains qui est déjà sélectionné, c'est agréable et pratique tomber et je vais juste supprimer cette opacité. Ok, c'est juste une double vérification. Cela fonctionnera alors nous ouvrons et fermons. Vous vous demandez peut-être quel est l'avantage de réinitialiser sur l'inversion de l'opacité. Ou dans ce cas, pour être honnête, la réponse n'est pas beaucoup. Mais si je commence à ajouter plus d'animation lorsque la vue s'ouvre, réinitialisation rétablira toujours tous les objets à leur état par défaut. Nous allons explorer cela plus loin dans la section motion. Ok, donc ça s'enroule pour cette vidéo. Ensuite, nous allons ajouter un peu de navigation à nos scripts de connexion. Alors, on se voit là-bas. 19. Ajouter la navigation à la connexion: Donc, je veux juste revisiter les répondants de saut un peu plus en détail. Pour explorer cela, nous allons ajouter un peu de navigation entre les deux premiers sièges. Alors allons à notre flux d'entrée, et nous venons juste de copier l'épine dorsale ici. Allons à la connexion et collez-le dans. Maintenant, allons au Start C. Donc, nous avons cette réponse de saut qui est juste réglé pour fondre pour donner à cela un peu plus d' une progression d'alimentation qui est changée en transition pour glisser dans. Et nous allons laisser la direction de transition de droite à gauche. Ok, revenons à la scène de connexion. Et qui dormait comment Bouton Retour. Et nous allons ajouter un déclencheur de tabulation. Et à cela, nous allons ajouter une autre réponse de saut. Ok, donc on veut que ce bouton remonte à la scène précédente. Et si nous, si nous ouvrons cette sélection en voyant la liste déroulante, nous pouvons voir toutes nos scènes, mais nous pouvons également voir ce saut optionnel précédemment montré la même chose. Et c'est très utile si vous avez plusieurs scènes en tant que cibles et que vous ne savez pas, vous ne saurez pas d'où provient l'utilisateur. Vous pouvez utiliser précédemment montré même. Donc on va l'utiliser ici. Et nous allons choisir une transition à diapositive. Et nous allons le choisir pour aller de gauche à droite. Encore une fois, nous obtenons cette continuité de l'animation. D' accord ? La chose à propos de senior montré précédemment ne fonctionne que lorsque vous testez votre prototype de la scène précédente car il doit rappeler cet historique des actions. Donc nous allons revenir à notre C. de départ et nous allons gifler le test précédent. Donc, si j'appuie maintenant sur login, je viens à mon écran de connexion. Et si j'appuie sur le bouton Précédent, remonte à ma scène précédente. Ok, donc ça nous amène à la fin de la section de navigation. Dans la section suivante, nous allons tout apprendre sur les capacités de mouvement des prédécesseurs. Alors, on se voit là-bas. 20. Ajouter une animation à la barre d'onglet: Dans cette vidéo, nous allons créer une petite animation lorsque vous naviguez entre les scènes à l'aide de la barre d'onglets. Donc je vais juste le démonter pour toi maintenant. Donc, quand je tape et tape sur le cœur, et vous pouvez voir qu'il y a cette petite animation de rebond qui se passe entre ces deux-là. D'accord ? Donc, le Sappho utilise des scènes pour la navigation. Nous avons donc besoin d'un moyen de déclencher automatiquement une animation lorsque la graine se charge. Et pour ça, on va utiliser le déclencheur de l'étoile. Alors allons à notre écran d'accueil. Et nous avons juste besoin de ses mains en arrière a été touché. D' accord. Et on va ajouter un déclencheur d'arrêt. Nous ajoutons un peu une réponse d'échelle. Et nous allons définir ce Haag est Home sélectionné. Jetons juste un coup d'oeil à Accueil sélectionné. Nous voulons notre animation quand il rebondit pour rebondir à partir des points de vente du centre. Nous devons donc nous assurer que notre origine sur notre groupe homéostatique est envoyée à la censure. Sinon, il va utiliser cette origine comme point de l'échelle, debout ou réduit. Surface sur la gauche et il va s'animer de la gauche, ce qui est plus que nous voulons. Ok, alors revenons à notre réponse à l'échelle. Nous devons donc peser l'échelle. Nous pouvons soit mettre à l'échelle à une taille spécifique, soit nous pouvons mettre à l'échelle par un facteur, qui est effectivement un pourcentage. Donc, on va choisir le facteur. La prochaine chose que nous devons examiner est de savoir si nous avons mis à l'échelle d'une valeur ou d'une échelle spécifique d'un certain montant. Je vais ajouter un 122 tous les deux ici. Donc, je vais mettre à l'échelle à un montant spécifique. Utiliser Gao Bi est purement une préférence. Je pense que parce que je traverse une valeur littérale très spécifique, je me sens à l'échelle. Est-il un peu plus compréhensible mais n'hésitez pas à jouer avec ça. Ok, testons ça et voyons à quoi ressemble notre premier morceau d'animation. Donc je vais juste te rafraîchir ici si tu te concentre sur l'icône de la maison. Donc vous pouvez voir qu'il y a un petit rebond là-bas. C' est donc la première moitié de l'animation. Ok, donc vous pouvez, assez difficile à voir, mais vous remarquerez peut-être que la balance s'accélère et ralentit ensuite. Et cela est dû au fait qu'il a une courbe d'accélération ajustement par défaut de l'appliance. Et la courbe d'assouplissement qu'il a par défaut est la facilité d'entrée et de facilité. Donc, avoir l'assouplissement ajoute un champ plus naturel lorsque les objets et la sonde j'en ai un bon nombre à choisir. Il y a beaucoup de courbes d'assouplissement différentes ou vous pouvez sélectionner. Donc vous avez au début, vous avez linéaire. Donc, cela n'a pas de changements de vitesse, est un complètement Has, il dit une animation très linéaire. Donc, il est très plat de l'une animation, mais il est idéal pour boucler l'animation aujourd'hui voudrait vraiment ralentir ou accélérer et la courbe d'animation et vous êtes en boucle parce que vous allez remarquer quand ceux-ci, ces sauts se produisent. Ok, donc IES, la prochaine est que ça marche efficacement. Accélère et ralentit. Mais vous n'avez pas la capacité de changer ce qu'on appelle l'interpolateur, que j'y reviendrai dans une minute. 0s dans la courbe d'animation, ce qui ralentit à la fin. Donc, il presque vous imaginez une sorte de commence à vitesse et son étendue ralentit. Mais si nous sélectionnons ceci, vous pouvez voir que cela nous donne la possibilité de changer ce qu'on appelle l'interpolant. Donc, qui est effectivement la courbe spécifique que l'animation est crayon suivre peut, viendra à ceux dans une minute. l'autre côté de la facilité dans et de soulager notre courbe. Donc, ce début lent et se termine vite. Et encore une fois, si nous choisissons cela, vous voyez que nous avons accès aux interpolations. La prochaine étape est facile à entrer et à sortir. Donc c'est un mélange de facilité et de facilité que nous avons, nous venons de regarder. Et c'est de loin, la courbe d'animation la plus courante que les gens ont tendance à utiliser est en fait l'un des principes d'animation de Disney est 12 de penser à la physique d'un objet et comment cela fonctionnerait dans le monde réel si jamais vous regardez à la motion de quelqu'un qui marche ou qui les fuit, nous ne courons pas tout à coup à deux milles à l'heure. Nous construisons de la vitesse. Si vous regardez la voiture, il accumule la vitesse et puis il ralentit. Il ne démarre pas immédiatement, s'arrête immédiatement. C' est donc de loin la courbe d'animation la plus naturelle que vous pouvez utiliser. Cubic Bessie BCA est une, est une courbe d'animation similaire, mais vous avez maintenant le contrôle sur les quatre points. Vous pouvez créer des courbes d'assouplissement personnalisées en utilisant des bases cubiques. Et en fait, vous pouvez voir ici, si je tape dessus, vous avez en fait un petit Bessie cubique, un graphique où vous pouvez créer efficacement vos propres courbes d'interpolation d'animation. D'accord ? Et enfin, on a le printemps. Et donc le printemps est une courbe d'animation très différente impressionnerait pi vous donne à la place ces deux curseurs, une fois une tension de contrôle et un pour contrôler la friction. Donc, et nous allons utiliser cet assouplissement a dans une minute pour une animation et vous expliquer comment ces deux curseurs fonctionnent les uns avec les autres. Donc, la seconde moitié du puzzle d'animation est intercalateurs. Donc, si nous revenons à l'aise et en fait vous pouvez cliquer sur, nous allons cliquer sur cela, voir les différences ici. Et je vais juste apporter cadre. Donc, c'est la documentation pour manger des courbes. Sur le site. Vous pouvez voir ici à quel point les courbes sont différentes et les différentes courbes vont changer. Vous pouvez voir ici, si vous venez de passer la souris, vous pouvez voir que différentes animations que vous allez obtenir en utilisant ces différentes courbes. Et ces courbes sont toutes des presets qui viennent avec et fiers de plus haut. Donc, vous pouvez certainement avoir une baie autour bientôt ici à l'assouplissement dans les courbes et ici, ici, sur les courbes d'assouplissement. Et puis on l'a. Et relâchez les courbes. Alors, consultez cette page Web et jetez un coup d'oeil et jouez avec les animations. Les courbes d'animation à l'intérieur, le faire semblant. Je vais rester pour le moment avec facilité et facilité. Et puis la prochaine chose nous devons regarder sa durée. Car, pour la plupart des U IS quelque part entre 0,20.4 est une bonne règle de base pour la durée d'une animation. Bien que cela dépend grandement de quelques choses telles que la taille d'un objet, la distance qu'il doit parcourir à travers votre écran, et l'accent dont il a besoin pour l'utilisateur. Une autre chose que j'ai tendance à faire est d'avoir une animation légèrement plus longue dans la durée que l'exmigration animée. Par exemple, une boîte de dialogue apparaît dans est légèrement plus longue que lorsqu'elle disparaît. Lorsque vous ajoutez des réponses à un déclencheur, vous serez peut-être surpris de savoir que, du point de vue de l'émotion, l'ordre dans lequel vous les ajoutez n'est pas pertinent. La séquence à laquelle les réponses animées s'exécutent est basée sur la durée et le délai. Cela nous amène parfaitement sur le retard. Le retard n'est qu'un point où l'animation commence. Si vous êtes familier avec l'animation traditionnelle, délai sera votre image clé de départ. L' image-clé de fin est définie par la curation elle-même. Il y a un moyen de voir une vue plus traditionnelle de vos animations ici dans pro pi. Et c'est juste ici sur le côté droit du panneau Déclencheurs. Donc je vais juste sortir ça. Donc actuellement le fonctionnel, sorte que la chronologie est assez limitée. Il agit juste comme une autre façon de changer la durée et le délai. Ici vous pouvez voir mon animation d'échelle. Je peux cliquer dessus et y aller et vous pouvez voir que le déplacement va changer ma durée et mon délai d'arrêt. Iran les droits et sur le côté droit ici. Ok, remettons-le aux valeurs par défaut. Donc, nous allons le laisser à la couche 0. Ok, alors continuons avec notre animation de rebond afin que nous puissions voir comment toutes ces fonctionnalités et ces trolls s'intègrent ensemble. Donc je vais juste mettre en évidence cette chronologie parce que cette animation particulière, d' accord, pour notre rebond, nous avons rebondi, mais maintenant nous devons rebondir vers le bas. Donc nous devons inverser l'animation et nous savons ce qui est vraiment une bonne réponse pour les lots de jeu par défaut, n'est-ce pas ? C' est vrai, réinitialiser. Ajoutons une cible de réponse de réinitialisation dans le même conteneur sélectionné à la maison. Ce qui est bien à propos de la réinitialisation, c'est que oui, il réinitialise à l'état d'origine. Mais comment il ennemis pour y arriver peut être complètement différent. Je veux donc ajouter un peu de personnalité amusante et légère à mon animation. Donc je vais changer l'assouplissement pour le printemps. Ok, donc je vais ajouter, je vais changer la tension à 500. Et je vais ajouter dix à la friction. Ok, testons ça. Ok, donc vous pouvez voir que rien n'a changé ici et c'est parce qu'on a besoin d'un retard. Donc, si nous revenons en arrière et regardons comment l'animation à l'échelle, nous pouvons voir qu'il a pris une durée de 4.2. Donc, nous devons ajouter 0.20.2 ici et demander si c'est hachuré. Les larmes, nous courons ça. Ok, donc maintenant vous pouvez voir. Que la première partie de l'animation est adéquate et la deuxième partie lui donne ce beau rebond. Et nous utilisons le délai pour décaler ces deux animations. Et en fait, si nous revenons à notre chronologie ici, vous pouvez voir que ma première durée d'animation est ici, et ensuite ma deuxième durée d'animation est là. Et vous pouvez évidemment jouer avec ces différentes tailles. Ce que vous remarquerez avec la réinitialisation, c'est qu'il n'a pas ces petites poignées. Donc, ces petites poignées dans leur vue pour changer le, la taille efficacement comme changé la durée de votre animation. Mais parce que cela a une courbe d'animation de printemps appliquée à elle et il est très verrouillé par à attention et le frottement que vous pouvez voir la durée ici est en fait grisé. On ne peut pas changer l'itération. Nous changeons la durée en changeant la tension et la friction. Donc légèrement, situation légèrement différente avec celui-ci va recevoir cela, réinitialiser ce retour. Ok, je pense que ça a l'air bien. Donc, nous avons maintenant nos ennemis doivent première partie de notre animation. On doit l'appliquer maintenant à une autre scène. Alors, copions notre bloc de déclenchement. Comment le bloc de déclenchement brutal. Alors allez C. et on va aller sur notre scène préférée. Et on va le coller. Et parce que j'ai copié un bloc de déclenchement, je n'ai pas besoin de sélectionner quoi que ce soit va savoir exactement où mettre un. Vous pouvez voir que je l'ai ajouté au bas de mon panneau Déclencheurs ici. Ok, donc on peut voir qu'on a des réponses orange. C' est parce que les choses auxquelles ils étaient connectés n'existent pas sur ce sujet, sur ce même qui doit ajouter nos nouvelles cibles. Et en fait, nous allons cibler un élément d'onglet complètement différent. Donc on va cibler les coeurs ont l'objet. Allons donc à notre réponse d'affouillement et c'est trouver nos coeurs sélectionnés. D' accord ? Et nous allons tout laisser exactement la même chose. Et nous allons aussi changer nos réinitialisations, notre maison sélectionnée. Et nous devons également nous assurer que le point d'origine est placé au centre. Les centres que vous verrez par défaut sont toujours définis en haut à gauche. Ok, alors retournons à la maison et testons. Je vais donc sélectionner mes favoris. Et vous pouvez voir sur l'animation leur logo pour accrocher ma maison. Et vous pouvez voir qu'il n'y a pas d'animation. Ok, donc c'est parce que les réponses dans un déclencheur étoile ne se déclenchent qu'une fois par session par défaut. Nous devons donc changer cela. Alors, allez à notre déclencheur d'étoiles. Et vous pouvez voir ici qu'il y a une option pour redémarrer à chaque fois, et c'est ce que nous voulons sélectionner. Donc, nous voulons sélectionner que aussi sur notre scène préférée effondré je déclenche. Bon, donc c'est lire la moitié du personnel. Ok, donc quand je sélectionne mon Accueil, Sélectionné, désolé, quand je partage mes favoris, vous pouvez voir l'animation est japes là. Je sélectionne la maison. Et vous pouvez voir que l'animation est là aussi. Mais vous pouvez voir que nous pouvons toujours voir le blanc non sélectionné en dessous. Donc, nous devons juste nous assurer que c'est l'opacité 0 semble presque. Revenons à notre scène Home. Et c'est trouver OWL état non sélectionné pour la maison dans la barre d'onglets ici. Méthode des hormones non sélectionnées, nous allons juste réduire leur pastizzi 0. Et on va passer en revue nos favoris et on va faire exactement la même chose. Mais pour la harpe sélectionnée, on va réduire ça à 0. Retournons à la maison et testons à nouveau. Maintenant, nous pouvons voir que nous avons une belle animation propre entre les deux. Ok, eh bien, ça s'enroule pour cette vidéo. C'est une pratique. Et avant de passer à la vidéo suivante, j'aimerais que vous appliquiez l'animation de rebond aux autres onglets. Aussi n'hésitez pas à jouer avec les options d'assouplissement et circule comme devenir fou, créer quelque chose d'unique. Dans la prochaine vidéo, nous allons regarder une transition qui nécessite un peu plus de chorégraphie. Alors on se voit dans la prochaine vidéo. 21. Animer la connexion: Salut là. Dans cette vidéo, nous allons aborder une transition d'écran entre deux scènes. Auparavant, nous avions une transition très basique entre les écrans de démarrage et de connexion. Et maintenant, nous allons pimenter les choses avec une animation personnalisée. Donc, nous allons nous assurer que vous comprenez l'écran si vous suivez et que nous allons le regarder, nous allons définir une transition de saut qui est actuellement en air. Et au lieu de cela, il va enrayer notre transition de base. Et nous allons en fait désactiver tout le saut juste pour la minute et configurer notre animation personnalisée sur cet écran. Nous allons donc avoir une section de l'animation sur cet écran. Nous allons donc animer le logo, la ligne de la sangle et les boutons. Et puis nous allons sauter et dire écran de connexion. Et nous allons définir l'animation, l'animation d'introduction pour l'écran de connexion ici. Donc, c'est fait sur l'écran de démarrage. Ok, alors animons le logo. Alors, sélectionnons le graphique du logo. Et on va mettre l'origine au centre. C' est le point où nous voulons toucher les pivots d'animation et avec le logo sélectionné, nous allons simplement ajouter à cette tactique ou nous allons ajouter une réponse de déplacement. Ok, et on va dire que c'est Y 2119. Nous voulions aussi jouer avec le timing de l'animation. Donc on va définir la durée 2.4. Et nous allons régler le relais aussi deux entrées pour ok. Donc, la première partie va être encore le travail se déplaçant vers le haut de crier veut aussi à l'échelle. Nous allons donc ajouter une réponse d'échelle. Et on va définir l'échelle, donc on va la laisser par défaut. Nous allons donc définir une échelle 257 12èmes. Et encore une fois, nous allons définir la même durée, 0.410.4. Ok, donc je vais, je vais sélectionner les changements d'humeur, sélectionner ces deux réponses. Et je veux changer la courbe d'assouplissement pour une facilité de sortie. Et encore une fois, c'est juste à voir avec le timing de l'animation. On a 1,5 sur cette première scène, et l'autre moitié était sur la deuxième scène. Ok, alors faisons ce test rapide. Donc, si j'appuie sur login, je peux voir que mon logo s'anime en position. Donc ça a l'air bien. Passons maintenant notre attention à la ligne de sangle. Donc, assurez-vous que c'est sélectionné. On va ajouter une capacité et s'installer après sa Sarah, comment allons-nous lui donner une durée de 0,3 K ? C' est encore un test. Donc, cette décoloration efficace la ligne de la sangle est vraiment juste enlever cela de l'écran. Ok, aussi cool. Ok, donc enfin pour cet écran, on doit faire quelque chose avec les fractions grossières. Alors sélectionnons le CTA primaire, CTA. Et nous allons ajouter un mouvement. Et nous allons définir le x 2x moins trois pour trois courses, frapper, sortir de l'écran, sur le côté gauche de l'écran. Et encore une fois, je vais jouer avec l'animation. courbes vont sabler les intercalateurs qui reviennent. Et je vais changer les durées de cet ensemble. La durée met encore le sexe et les voies. Et 1.6, je veux juste décaler légèrement le mouvement de ces appel à l'action est loin de l'animation du logo. Ok, donc c'est juste déplacer la réponse. Et je vais changer la cible pour les bus tertiaires. Et sur celui-ci, je vais juste changer le délai légèrement à 0,8. Donc, c'est quand décalez ce bouton de l'Autre bouton. Ok, allons-y et réactivons notre réponse de saut. Et pour nous assurer que nous pouvons voir cette animation en cours d'exécution, nous devons également retarder notre réponse au saut. Sinon va sauter instantanément et nous ne verrons aucune de cette animation se produit. Donc, nous allons régler le délai de ceci à 1.4. Ok, c'est mieux. Testez ça et voyez à quoi ça ressemble. Donc, quand nous frappons login, notre m, notre action peut ralentir cela. Vous pouvez donc le voir en esclavage. Liste de ne pas l'abaisser à un quart de seconde. Donc, j'ai frappé la connexion. Les logos de mai s'estompent et mes deux boutons glissent. Cool. Nous avons donc terminé la moitié de notre transition. Nous allons maintenant finir à l'écran. C' est donc des scènes de changement. Ok, donc on va ajouter un déclencheur de démarrage. Je vais juste le déplacer vers le haut. Et nous devons changer certaines des propriétés par défaut sur les déclencheurs en étoile. Donc, nous allons le sélectionner pour arrêter avec saut au lieu de bâton le saut. Et tout cela signifie que l'animation va commencer un peu plus vite et nous allons vérifier notre redémarrage à chaque fois. Et c'est principalement parce que nous voulons que cela fonctionne à chaque fois que les graines se chargent. Ok, donc c'est sélectionner notre ligne de sangle arrière de bienvenue. Et nous allons, à ce tour des étoiles, nous allons ajouter une capacité. Et nous allons mettre sa capacité à 0, MSN sa durée à 0. Donc, ce que ce déclencheur étoile fait est de configurer un état par défaut avant que cette scène ne soit chargée. Donc, si vous vous souvenez, nous avons déjà le logo dans un particulier, animé, dans une position particulière sur la scène de démarrage. Et nous avons déjà disparu la ligne de la sangle. Donc, nous devons continuer que l'animation sur cette scène et définir ces statut par défaut parce qu'ils ont ces choses et effectivement arrivé. Ok, alors nous allons cibler le groupe de formulaires. Et nous allons ajouter un mouvement. Et nous allons dire comme x 2375. Et encore une fois, la durée est de 0 k. Nous allons maintenant cibler le CTA. Et nous devons ajouter un autre mouvement. Et nous allons aussi définir comme X2 375 et la durée à 0. Ok, donc nous avons maintenant configuré nos valeurs d'exécution par défaut. Ensuite, on va faire la dernière partie de la transition. Donc on va ajouter une autre étoile. Et encore une fois, on va parler complètement. Et nous allons ajouter une réponse de réinitialisation. On va changer l'interpolateur de la réinitialisation en arrière. Et nous allons définir la durée à 0.6. Ok, c'est maintenant cibler ces CTA primaires à une autre réinitialisation. Je vais aussi changer l'interpolateur pour revenir en arrière. Nous allons définir la durée pour définir 2p 06. Et nous allons lui donner un léger retard, sera de 0,2. Ok, alors laissez-moi vous expliquer ce qu'on a fait ici. Nous avons défini un état par défaut de certains objets en fonction de l'animation qui se produit dans la première scène de l'étoile c. Et nous utilisons efficacement cet autre déclencheur étoile pour inverser nos valeurs par défaut en utilisant les réponses de réinitialisation. Ok, nous avons fait beaucoup ici, donc nous avons des modifications pour voir ce que nous avons. Alors revenons en arrière et sélectionnons le style de la scène parce que c'est là que commence notre animation. Et c'est exécuter cette animation. Donc, nous commençons à résoudre l'étoile c, nous frappons connexion. On a l'animation est ASI, non ? Et un quart de vitesse pour que vous puissiez le voir. Et puis nous obtenons notre deuxième CMB qui arrive. Alors exécutons ce code Pat pleine vitesse. Ça me semble bien. Alors passons en revue ce que nous avons fait dans cette vidéo. Nous avons des proxénètes comment la transition entre deux scènes. Nous avons appris à définir les valeurs par défaut d'exécution. Nous avons appris un peu plus sur les courbes d'animation et l'interpolateur. Je pense qu'il est temps de prendre une tasse de thé avant de passer à la prochaine vidéo. Et dans la prochaine vidéo, nous allons faire preuve de ferveur en explorant les animations des clients en ajoutant une animation personnalisée quand un utilisateur tape sur une photo dans son flux de photos. se voit dans quelques minutes. 22. Créer une animation personnalisée: Salut là. Dans cette vidéo, nous allons créer une interaction qui permet aux utilisateurs d' enregistrer une image de leur flux de photos dans la section Favoris. Jetons un coup d'oeil à la démo, mais nous allons construire. Donc je vais juste faire défiler jusqu'à cette image ici. Je vais juste taper deux fois. On va prendre son icône préférée. Et une petite vignette tombe juste dans la section préférée. Et vous avez vu d'autres images s'estomper. La meilleure course à une vitesse beaucoup plus lente. Donc on peut juste passer par cette étape par étape k. Donc je vais faire défiler vers le bas. Donc, d'abord, nous allons créer l'interaction préférée sur le double-tap qui va apporter dans nos sacs préférés aux États-Unis peut voir ce qu'ils ont tapé, puis va disparaître les autres images afin de souligner l'image que nous favorisé. Ensuite, nous allons attaquer la miniature de l'image, qui servira à nous aider à comprendre ce que l'image a été sauvegardée, utilisera ici quelques principes d'animation comme l'anticipation et la mise en scène, suivi et le chevauchement dans l'action, ainsi que le calendrier et l'exagération. Cela sera montré lorsqu'une vignette frappe le cœur, provoquant la réaction du cœur. Finalement, nous allons fondre toutes les autres images en version complète de l'ensemble des animateurs. Il y a beaucoup de choses en cours dans ces petites micro-interactions pour s'assurer que l'utilisateur sait ce qui se passe. Et c'est pour tous les comptes, notre animation la plus complexe à ce jour. Ok, on va se fissurer. Donc, je vais juste ouvrir mon fichier précédent ici. Donc d'abord, nous devons aller chercher notre graphique à partir de notre fichier sigma ou, ou croquis ou dvx, dy dépendant de ce que vous utilisez. Donc je vais juste basculer sur Sigma. Et je vais juste copier mon graphique, a un retour SVG pour le faire semblant. Je vais juste en coller dix. Ok, donc comme on l'a vu précédemment, le SVD va entrer à un x, donc nous devons juste multiplier cela par trois. Et nous allons le nommer renommer les spots préférés. Ok, allons à la page 1 sur le flux de photos. Et nous allons regrouper tous ces contextes ensemble. Et on va appeler ça des photos. Et si nous ouvrons ça, nous allons trouver cette image pi, qui est imagée 9, et nous allons juste la traîner en dehors du péché ci-dessus. Je vais maintenant déplacer mes taches préférées lui juste au-dessus de l'image 9. Et nous allons juste positionner cela au centre sur l'image. Ok, je suis enfin, on va juste en être un. Nous voulons que cela apparaisse donc nous devons faire leur passé T 0. Donc c'est la configuration faite. Ensuite, nous allons choisir comment image neuf. Et nous allons passer à notre panneau Déclencheurs et nous allons ajouter un double-clic. Allons à nos favoris, Boston. Et nous voulons juste nous assurer que l'origine est là. Nous voulons attendre, voulu animer du centre. Et en maintenant ce bouton de faveurs sélectionné, nous allons ajouter une capacité dont les sorties ont un déclencheur ? Je vais en faire une centaine. Et nous allons régler la durée à un peu plus rapide et 0,01. OK. Nous allons aussi ajouter une échelle. Et nous allons passer à un facteur de 120. Et nous allons régler la durée ici à 0.01. ok, faisons ce test. Donc, si nous faisons défiler jusqu'à notre image et dire ce qui s'est passé, nous pouvons voir que l'image est juste apparue tout de suite. Donc voulu retarder légèrement afin que nous puissions voir l'échelle réellement se produire. Donc, ce n'est pas eu de retard plus 0,1. Et testons ça encore une fois. Ok, c'est un peu mieux. Ensuite, je veux souligner quels sont les gens qui ont été sélectionnés un peu plus. Donc, sélectionnez le groupe de photos. Je vais ajouter une capacité. Et je vais faire 10% parce que la saturation à 0. Et nous allons l'ajouter au point zéro du labo aussi. Ok, c'est un double que j'ai passé. Et on va l'augmenter à 100. Je vais définir une direction à trois et le retard à 0,4. OK, c'est bien. Ce test. Donc, nous double onglet et nous pouvons voir que nous avons effectivement disparu. Toute l'image postérieure est comme une sorte de graisse wow et puis ils s'estompent lentement. Rejouons-le à nouveau. Ok, alors nous allons ajouter l'animation des vignettes. Donc ce qu'on va faire, c'est qu'on va dupliquer notre image 9. Et nous obtenons un vrai renommer cette image neuf pouce, le pouce de soulignement hématite. Et nous allons mettre l'origine au centre, au centre. Et qui peut mettre à l'échelle cela, en vous assurant que votre rapport d'aspect ne va pas l'échelle à une largeur 20. Et ça nous donnera une calculatrice. Salut, je suis légèrement, légèrement plus haut, 2126. Et nous allons déplacer ça à l'extérieur de notre conteneur de pagination. Nous ne voulons pas que ça fasse défiler. Donc on va mettre ça dans une position fixe là-bas et on va le déplacer dans une autre position. Effectivement, nous voulons y déplacer juste au-dessus où les favoris est tout à fait AS localise grossièrement les têtes. Et il va vendre ça à 600 degrés. C' est comme une bonne position. Ok, donc nous allons maintenant définir son opacité sur 0, aussi deux fois moyen de montrer tout à fait encore. Et en gardant cela sélectif, nous allons ajouter une autre opacité à notre déclencheur, où nous allons augmenter l'invisibilité des vignettes à 100. Et nous allons régler la durée à 0,2 et nous allons ajouter un délai de 0,2. Donc encore avec le système immunitaire, nous allons ajouter une autre réponse à cette échelle de temps. Et nous devons pomper dans les valeurs de taille actuelles parce que nous devons dimensionner et nous voulons que le plus pro pi fonctionne comment le dimensionnement des forêts correctement. Donc, nous savons juste un peu ce qui est 20 sur 21.6. Donc, c'est juste tirer cela dans ces valeurs initialement, 1.6. Et avec le rapport d'aspect lopped, nous pouvons maintenant changer ce côté deux défectueux et ça va trouver la bonne hauteur pour nous, K. Et nous allons régler la durée à 0.4. Et nous allons régler le 0.2 plus tard. Ok, faisons ce test. Donc double-cliquez. Et maintenant m est Tom semble maintenant bien paraître. Ok, donc ce que je veux faire maintenant est imiter tomber dans les favoris va également utiliser l'un des 12 principes d' animation de base que les principes d'animation Disney ici, ce qui est exagéré. Donc, quand le pouce tombe dans le plus difficile va gonfler, juste la chance absorbé l'image. Donc encore une fois, il va juste mettre l'accent sur l'animation qu'un peu. Ce qu'on va faire, c'est retourner ici. On va dupliquer cette échelle. Et on va changer la largeur à dix. Et cela sera automatiquement la taille sont plus élevés. Et on va changer la durée à 0,2. Et on va le donner au labo 1. Mais aussi aller déplacer les vétérinaires vont ajouter une réponse de mouvement. Et nous le voulons, nous voulons qu'il bouge. C' est là qu'il va tomber dans le, dans les icônes de favoris. Nous pouvons donc nous positionner à deux endroits où nous pensons qu'il devrait être. Quelque chose comme ça. C'est juste arrondi à six. 669 et est revenu à notre déménagement. D' accord. Donc oui, c'est vraiment à Mme annuler la même chose rapidement à propos de l'espace, de la position correcte. Maintenant, nous savons quelle est cette valeur. Nous pouvons pomper un dans ou passer dans le pourquoi S6 69. Et c'est parfois un que vous devez faire des choses parce que nous n'avons pas la capacité de frotter les calendriers et des choses comme ça. Si vous déplacez votre objet dans votre emplacement final, vous pouvez obtenir la valeur. Alors assure-toi de le faire et de le faire revenir. Et puis vous pouvez mettre cette valeur dans votre réponse. Ok, donc oui, la durée, durée 0,2, je vais retarder cela de 1 seconde. Il y a des tests qui voient à quoi ça ressemble. Donc double-cliquez et la vignette disparaît dans le cœur. Maintenant, il est en fait aller dans les coulisses chapeau va être si rapide que les gens ne vont pas vraiment remarquer cela. En outre, quand nous ajoutons la prochaine animation avec le cœur va gonfler, le cerveau humain a tendance à comprendre les images entre les deux, donc nous n'avons pas à être super précis tout le temps, a la façon dont les choses réagissent. Parfois, nous pouvons nous en sortir avec des animations très, très rapides simplement en permettant au cerveau de comprendre l'animation d'une image à l'autre. Ok, alors trouvons notre groupe de coeur non sélectionné à l'intérieur de nos chars. Ça se passe ici. Et nous allons nous assurer que l'origine est réglée sur capteur, capteur parce que nous sommes le cœur à animer depuis le centre. C' est une manière très naturelle et naturelle pour son domaine y. Et nous allons revenir à notre réponse double pression. Et nous allons ajouter une autre échelle. On va faire des scouts avec facteur. Et ce facteur sera de 120. Nous allons définir la durée où la durée du levier répond 0,2 en fait, et nous définissons le délai à un. Ok, donc c'est la première moitié de l'animation cardiaque à cette menace de gonfler, nous devons maintenant compléter ça. Donc je vais faire est que je vais ajouter une réponse de réinitialisation. vous assurant que vous avez l'ensemble, l'ensemble X au coeur groupe non sélectionné. Et cette fois, nous allons choisir le printemps a notre courbe d'assouplissement. Et on va faire la tension 500. Et on va régler la friction à dix. Et enfin, nous allons retarder cela de 1,2 secondes passes donné un temps pour la première partie des animations à exécuter. Pour qu'on puisse les chorégraphier ensemble. Et en fait, si nous avons juste un coup d'oeil, parce que j'ai pompé à tout un tas de valeurs ici. Mais vous pouvez voir comment les choses sont en fait animer la chronologie des cheveux vita. Et vous pouvez réellement l'utiliser pour le ruiner si vous voulez comprendre, si vous voulez modifier ici, vous pouvez tweeter vos cheveux en déplaçant les choses vers l'arrière et vers l'avant pour retarder. Et puis vous pouvez également modifier la durée par nous en faisant glisser. Non plus. Décidez si vous faites glisser le reste, voyez votre changement dans le délai, ainsi que le système de durée. Fais ça. Parce que je suis et nous mettons les valeurs. Et donc c'est juste jeter un coup d'oeil et voir à quoi ça ressemble. Faites défiler le serveur vers le bas, double-cliquez sur mon tuyau. Il doit être favori. Et la vignette tombe dans le cœur et le cœur réagit pour absorber dans cette vignette et fait ce peu, cette petite animation de rebond. Cool, eh bien qui complète l'animation préférée. Et cela nous amène à la fin de cette vidéo. Espérons que cela vous donne d'autres idées sur le genre de choses que vous pouvez faire. Nous avons joué avec de nouveaux déclencheurs et passé beaucoup de temps sur la chorégraphie d'animation. Dans la prochaine vidéo, nous allons avoir notre dernier regard sur le mouvement en ajoutant un fantasme de transition d'une photo à son écran de détail. 23. Créer une transition d'écran de détail personnalisée: Salut là. Dans cette vidéo, nous allons créer une transition personnalisée vers notre écran de détail photo. Donc avant de construire ça, je voulais juste te montrer à quoi ça va ressembler, ce que nous allons construire. Donc, je vais taper sur cette image miniature ici. Nous avons une transition vers cette vue détaillée avec cette transition client. Et puis je vais pouvoir appuyer sur ce bouton de retour et faire la transition à nouveau. Ok, alors passons à F. Donc si vous avez suivi, vous pouvez continuer avec votre dossier existant. Sinon, vous pouvez ouvrir le fichier de démarrage est attaché à ce chapitre. Ok, alors naviguons vers l'écran d'accueil. Et on va ouvrir ces cartes de santé, toi et ces hurlements. Et nous venons juste pour faire ressortir l'opacité de tout ça. Et puis nous allons vouloir d'abord, ce groupe ou ce contenu inférieur ensemble. Donc, cela va changer sélectionner que nous sommes un groupe qui ensemble et nous allons appeler cette carte détails. Et on fait ça parce qu'on le sera, plus tard on sera animés. Et c'était un grand groupe. Ok, donc c'est une cachette. Il est en bonne santé une seconde et on va aller à notre groupe de photos. Et nous allons trouver l'arbre d'images, qui est l'image à laquelle nous allons être aussi heureux ou personnalisé transition. Et on va regrouper ça pour le mettre dans un conteneur. Et nous allons nommer cet arbre d'image de conteneur. Et on va revenir à la façon dont vous allez copier notre page principale. Et nous allons le coller dans notre nouvelle imagerie contient hit. Ok. Réduisons la largeur à un 163, mais fondamentalement le dimensionnement vers le bas. C' est donc la même taille que la vignette. Nous recréons efficacement une vignette ici. Et nous allons ajuster cette image. Sa position, donc est dans la même position, a le, a le pouce actuel maintenant. Et c'est bon. Et on va couper la sous-couche. Donc, sélectionnez comment groupe, et faites défiler tout le chemin vers le bas et choisit l'option sous-couches de clip. Donc, cela va cacher tous les autres contenus lents ajoutés. Nous allons définir le rayon de cette Conservancy 16. Ok, donc maintenant ça ressemble à notre image miniature originale. Ok, donc on va renommer notre nouvelle image en image de viol à l'intérieur de ce conteneur. Et nous pouvons maintenant dire à travers déplacer notre vieille image. D' accord. Donc c'est le premier morceau fait. Pour le problème que nous avons est que nous avons cette image qui est à l'intérieur d'un conteneur de défilement. Mais nous, quand nous ouvrons la, quand nous passons à cette coutume, aliments personnalisés sains, nous ne voulons pas cela. Ceux-ci doivent être défilants et ils seront défilés. Il est toujours à l'intérieur de la vue de défilement. Nous devons donc trouver un moyen de toujours connecter l'exposition à la vue de défilement. Mais aussi quand nous tapons dessus pour qu'il soit en dehors du ScrollView. Évidemment, nous avons encore besoin d'avoir le défilement des vignettes. Donc la façon dont on va faire ça va utiliser un déclencheur appelé chaîne. Je vais faire, c'est qu'on va dupliquer notre conteneur d'images. Et on va renommer cette chaîne d'images. Et nous allons le déplacer en dehors du défilement jusqu'à la hanche sous ces saines. Et avec la page on contient un vêtement sélectionné. Ok, donc avec la page une vue défilement sélectionnée, nous allons ajouter un changement où nous allons enchaîner à la position de défilement. Donc c'est par défaut, donc c'est bien. Et nous allons sélectionner comment le groupe de la chaîne d'imagerie. Et nous allons ajouter à ce déclencheur, nous allons ajouter un mouvement. D'accord. Donc, quand nous ajoutons un, un déclencheur à un, désolé, une réponse au déclencheur de chaîne, nous obtenons ce type différent de boîte et la façon dont la chaîne, il relie les plages. Ainsi, nous ne verrions pas enchaîner l'amplitude de mouvement de la vue de défilement à une plage de mouvement sur la réponse de déplacement pour notre groupe de chaînes d'imagerie. Donc, d'abord, nous allons tenir dans cette, cette moitié, qui est la portée de la vue de défilement. Donc, faire défiler les vues à partir de 0. C' est donc un point de départ agréable et facile. Et nous allons juste le régler pour faire défiler un millier de pixels. Nous devons donc maintenant cartographier la position y de notre chaîne d'imagerie à cette plage de zéros en dessous de 1000. Donc, la première chose que nous devons faire est bien et positionner. Et nous pouvons voir ici est cela à huit. C' est donc agréable de savoir que notre position de départ. Et parce que nous voulons avoir un mappage one-to-one entre la plage du défilement et la vitesse du déplacement. Nous devons nous assurer qu'ils déplacent la même quantité de pixels. Ainsi, les vues de défilement fonctionnent dans la direction opposée et se déplacent dans la direction opposée aux objets qui se déplacent sous l'écran. Donc, actuellement, la position de n'importe quel objet commence dans le coin supérieur gauche. Et tout ce qui est à l'extérieur sera dans le négatif et tout ce qui est vers le bas sera dans le positif. Pour défiler bien que cela fonctionne dans l'autre direction. est donc positif et c'est négatif. Donc, nous devons les retourner. Et la chaîne de l'industrie commence à AAA et nous avions besoin de déplacer un millier de pixels. Donc nous avons juste besoin de faire un peu de cartes. Et nous avons juste à extraire ces 28 000 et ça nous donne moins 712. Donc, qui se déplace maintenant de à un à moins 712, qui est un 1000 pixels. Et cela mappe directement à notre vue de défilement, qui se déplace de la position 0 à un 1000 pixels. Ok, alors faisons-le un test. Vous pouvez voir que nous pouvons voir que cela se déplace et sa position exacte. Si c'est si je tire sur le défilement, vous pouvez voir l'autre image ci-dessous. Ok, donc on va arranger ça. Revenons à notre dossier. Et nous allons réduire l'opacité des chaînes d'imagerie à 0. Et ça va réparer deux choses. Premièrement, ça va cacher l'image pour que nous ne voyions pas ça sur le défilement. Et le numéro deux est que si un utilisateur avait décidé de faire défiler en appuyant sur cette image, cette image, parce qu'elle est 100% et est en dehors de la portée, va bloquer la vue de défilement. Donc nous devons être la théorie de l'opacité pour que ça ne gêne pas le chemin. Ok, cool. La prochaine chose sur laquelle nous allons attirer l' attention est l'animation de transition réelle. La première chose que nous devons faire est de réparer ce déclencheur de pression. Nous devons donc appuyer sur le déclencheur pour pointer vers notre groupe d'images, qui est le groupe à l'intérieur de notre conteneur Scroll. Ok, c'est cool. Et nous pouvons supprimer cette capacité. Et on va, on va ajouter une nouvelle opacité. Et nous allons cibler le groupe de la chaîne de l'image trois. Et on va mettre son opacité à 100. Nous allons également définir la durée à 0 cuz que nous voulons que cela apparaisse immédiatement. Ensuite, nous allons ajouter une échelle. Et nous pouvons mettre à l'échelle la chaîne de l'industrie, 2359764, mouvement atome. Et nous allons déplacer la chaîne d'imagerie 240 vers le bas. Ok, donc fondamentalement ces deux réponses augmentent notre pouce maintenant et entrent dans la bonne position pour qu'il corresponde à notre vue détaillée d'origine. D' accord. Nous allons maintenant nous devons dimensionner l'image à l'intérieur de sorte à une position particulière. Donc nous allons laisser notre image trois et nous allons ajouter une échelle. Et on va régler ça à 359 d'ici 8. Ok, alors testons ça, voyons si c'est du code qui marche. Donc on peut voir ici, on a mis nos images à l'échelle. Nous pouvons voir que nous avons notre moitié supérieure de notre conteneur, mais nous pouvons voir qu'il y a cet espace vide et vous pouvez toujours voir l'image ci-dessous. Ok, alors ce qu'on va faire, c'est qu'on va y retourner. Nous allons en fait définir l'arrière-plan de la chaîne d'imagerie à 100. Et nous allons revenir dans ce qui est en bonne santé ? Nous allons saisir notre arrière-plan, qui est comment Claire Tins a frappé la boîte et dont TNC maintenant l'arrière-plan du ListView, il va mettre ça sous la chaîne d'imagerie. Et on va réduire cette opacité à 0. En le maintenant sélectionné, nous allons ajouter une autre réponse d'opacité à notre déclencheur. Et nous allons faire le, la cale de fond à 70%. Ok, on va retourner à notre chaîne d'imagerie et on va ajouter un rayon. Donc, nous voulons changer la courbure de la, de cette miniature originale, qui est 16 pixels. On veut, on veut augmenter ce rayon pour qu'il corresponde aux formes du téléphone et on va changer le rayon 2 de 16 à 32. Et testons ça. Donc ça ressemble à. Donc nous pouvons maintenant voir que nous avons nos coins de rayon plus grand. Nous ne serions jamais de fond blanc. Nous avons ce beau rayon qui est, qui correspond à nos téléphones. Cela commence donc à ressembler à la transition client que je vous ai montrée au début. Ok, alors revenons à notre dossier. Ok, alors nous devons ensuite ramener notre contenu et nos contrôles en dessous de l'image. Si vous vous souvenez au début de cette vidéo, nous les regroupons dans un conteneur et nous l'avons appelé sculpté ces maisons. Allons donc trouver ça qui s'appelle DES. Comment va le groupe ? On a un ici et on va le faire, on va le copier. Et nous allons coller ce groupe de chaînes d'images Intel. Et nous allons définir sa position Y 2561. Ok, donc ce sont des tests qui, voir si c'est vrai. C' était comme, OK, alors appuyez dessus et on peut voir que notre concept de fond est maintenant en place. Ok, donc ça s'est encore joué. Ok, donc c'est, on va le jumeler et payer. C' est pour s'assurer que l'animation est à la recherche. Alors revenons à ça. C' est garder nos pistes de quad. Ces maisons sélectives. On va, on va changer leur mot de passe est 0. Et nous allons ajouter une réponse d'opacité à notre déclencheur de pression. Et on va régler l'opacité à 100. Et nous allons lui donner une durée de 0 point 3 et un léger retard ou 0,1. Alors regardons ça. Hé, je, donc c'est maintenant que ça s'estompe et on n'avait pas un peu bougé par le bas comme avant avec un peu bizarre. Ok, donc tout a l'air bien. La dernière chose que nous devons faire est de ramener le bouton Retour pour que nous puissions faire notre transition inverse. Alors allons-y et reprends-nous. Donc, si nous allons dans la façon dont ils voient à nouveau, nous allons prendre nos sacs à dos et nous allons copier ça. Et on va coller ça à l'intérieur du bouton d'équipement 2. Et on va fixer sa position. Donc x va être sept, va être huit. Et nous devons également changer nos cibles sur les sorties ont des déclencheurs, donc nous devons trouver notre bouton de retour d'origine et nous devons trouver deux commutateurs, changer cela. Ok, donc la dernière chose que nous devons faire est d'ajouter l'animation inverse. Donc, modifions cette réinitialisation en chaîne d'imagerie cible. Et nous allons ajouter une autre réinitialisation. Et cette fois, nous allons cibler l'arrière-plan. Shim scrim, prends le bon mot. Et enfin, nous allons ajouter une troisième réinitialisation. Et nous allons cibler l'image de l'arborescence des images. Et il y a quelques images d'images qui piquent autour de la même chose, mais assurez-vous que vous avez la bonne. Vous ne pouviez pas. Vous pouvez voir quand vous avez sélectionné un ici, il sera sélectionné dans votre panneau Calques ici. Donc vous pouvez voir que c'est celui que nous voulons réellement réinitialiser. Et nous voulions changer la durée et un peu à 0.3. Ok, c'est bien. Ce test. Donc, nous allons cliquer sur notre image est un peu plus grande. On va frapper notre épine dorsale et ça va remonter. Ça a l'air un peu rapide. Revenons à nos réinitialisations et je pense que nous les avons probablement tous changés pour les premiers sentiers. Essaie ça. Le test a ce petit peu mieux. D' accord ? Donc on peut voir qu'il n'y a pas mal, mais ce n'est pas parfait. Et si nous faisons défiler un peu, puis l'ouvrir et le fermer, nous pouvons voir qu'il ne retourne pas nécessairement au positionneur, Position parfaite où il était. Il est retourné là où il était à l'origine. Mais ce n'est pas trop mal pour l'instant. On va revenir à cette main. Nous allons résoudre ces problèmes. Mais pour ce faire, nous devons en apprendre davantage sur les formules. Ok, donc ça a été une longue vidéo. J' espère avoir un cerveau majeur a2 beaucoup. Nous avons réussi à aller assez vite encore avec peu près les mêmes choses que nous avions appris précédemment. Et nous avons eu un peu plus d'entraînement à créer des mouvements. Dans la vidéo suivante, nous allons revoir la transition de connexion de démarrage car il y a choses là que nous devons corriger avant d'entrer dans, dans les formules de la section suivante. 24. Créer des transitions personnalisées à l'aide de Reset et de la ligne de temps: Salut là. Donc, dans cette dernière vidéo, regardant le mouvement, nous allons revenir au début de notre application. On va aller regarder les choses dans les écrans de connexion. Et nous allons ajouter une transition personnalisée entre ces deux cris. Si nous avons juste une revue de ce que nous avons jusqu'à présent, nous avons le login, qui n'a pas concentré l'édition sur m. Mais si vous vous souvenez, nous avons ajouté un bouton de retour dans une vidéo précédente. Et si j'appuie sur ce bouton de retour, vous pouvez voir que c'est juste une transition de base. Et aussi notre premier vert ne s'insère pas. Les composants sont manquants, donc nous allons résoudre ce problème. Ok, donc c'est juste rafraîchir ça et aller dans notre dossier. Et nous allons commencer avec le départ s2 spatialement dans l'équipe du personnel, si vous suivez, continuez avec votre dossier. Sinon, vous pouvez télécharger un fichier de démarrage pour cela, pour cette vidéo. Donc on commence à voir, et ce qu'on va faire, c'est d'ajouter un déclencheur de démarrage. Et nous allons ajouter un déclencheur brutal parce que nous voulons et des animations qui l'exécutent automatiquement lorsque la scène se charge. Donc, aujourd'hui commencer le déclencheur, nous allons cocher cette case réinitialiser, redémarrer à chaque fois. Ceci, ce redémarrage à chaque fois est lié à sauter à la réponse indésirable et nous utilisons des réponses indésirables pour naviguer d'une scène à l'autre. C' est pourquoi cette case à cocher n'est pas trop. Et nous allons ajouter une réinitialisation pour chaque objet que nous avons dans notre animation. Nous avons donc un logo avec une ligne de sangle. On a le CTA primaire, on a l'ACC tertiaire. Nous devons donc ajouter une réponse de réinitialisation pour chacun d'entre eux. Donc, je vais à la première étape CCA tertiaire, et je vais ajouter une réinitialisation. Ensuite, je vais sélectionner le CTA primaire. À une réinitialisation. Ensuite sera le logo. Et je vais y ajouter une réinitialisation. Et enfin, je vais ajouter une réinitialisation pour la ligne de sangle. D' accord ? Donc, ce que nous faisons effectivement ici, c'est quand le traité de départ se chargera, nous allons réinitialiser la position de départ de ces objets. Donc, quand on appuie sur le déclencheur de pression ci-dessus, cela va animer nos objets dans un état de position particulier et il va les laisser. Là. Il va se souvenir de ce séjour. Lorsque nous revenons à cet écran, nous voulons exécuter une animation qui réinitialise et revenir à leur état d'origine. Alors faisons un test rapide pour voir ce qu'on a eu jusqu'à présent. Donc, nous tapons sur la connexion. Nous allons au deuxième écran de connexion. Quand on reviendra, ça va déclencher ça. Et vous pouvez voir qu'ils entrent tous en même temps. Ils ont tous les mêmes propriétés de mouvement. Et nous voulons changer cela afin de mieux imiter l'inversion de l'animation personnalisée que nous avons en cours en premier lieu. Donc avant de le faire, nous allons juste rebaptiser ces réponses pour qu' on puisse comprendre ce que sont chacune au moment où elles sont toutes dites que le récepteur est un peu déroutant. Appelons ce CTA tertiaire. Suivant, CTA primaire, logo. Et enfin la ligne de sangle. D' accord. Pour cette situation. Et juste pour que nous puissions jouer avec la timeline, je vais utiliser la timeline pour changer ces valeurs de propriétés de mouvement. Je veux juste vous montrer comment vous pouvez utiliser cette Highline et comment elle peut être très utile visuellement lorsque vous faites des animations chorégraphiées comme celle-ci. Laisse d'abord, ce travail de haut en bas. Donc, le CTA tertiaire, je veux que la dominante dure 4,6 par seconde. Donc je vais juste traîner ça à 0,6. Vous pouvez voir que nous avons encore les valeurs de propriété ici. Donc nous pouvons voir pour nous assurer que nous sommes sur la droite, sur la bonne quantité. Et je vais laisser le retard à 0 parce que je veux que ça tourne en premier. Suivant CTA Primaire, je suis Gaines qui satisfont également la même durée de 0,6. Et vous remarquez qu'il s'agit d'une sorte d'imposition. Donc, c'est très utile. Et pour celui-ci, je suis une fois que vous retardez de 0,2 de seconde, logo du câble, nous allons, nous allons le laisser à la durée de 0,2 de seconde. Mais nous voulons que cela ne se produise pas avant d'être une seconde dans notre animation. Donc on va les déplacer jusqu'à 1 seconde. Et enfin la ligne de la sangle. Nous allons aussi laisser la durée à 0.2. Mais nous voulons que cela arrive en dernier, et nous voulons que cela se produise à 1,3 de seconde. D'accord ? L' autre chose que nous voulons faire est de jeter un oeil en arrière sur nos réponses initiales pour les deux boutons que nous pouvons voir que nous avons utilisé des interpolations avec le dos. Nous voulons donc répliquer cela aussi dans notre animation inverse. Donc, sélectionnez shift, sélectionnez Tertullian Primary CTA et tracez le cubique, l'interpole en arrière. Ok, faisons ce test. Donc, nous nous connectons, nous obtenons notre animation personnalisée initiale. Et puis vous retournez en arrière et nous obtenons comment faire l'animation ? Ok, ça a l'air plutôt bien. C' est donc la première moitié du coût de l'animation que nous créons cette vidéo. Ensuite, nous allons créer l'animation de retour, qui est la sortie de l'écran de connexion. Alors c'est Aller à notre scène de connexion. Et nous allons d'abord sélectionner le bouton Précédent. Et vous remarquerez que j'ai probablement mentionné cela quelques fois dans les vidéos précédentes, mais lorsque vous sélectionnez quelque chose dans la palette Calques dans le dernier panneau, il sélectionne automatiquement toutes les instances d'utilisation de celui-ci dans vos déclencheurs, qui est vraiment utilisé Suède CS est gris clair, mettre en évidence ici. Donc surtout où j'ai plusieurs déclencheurs TAP et je n'ai pas été très bon pour les nommer qui devraient faire vraiment. Mais c'est que nous avons ces deux déclencheurs de robinet, donc il y a nous aide à trouver le bon. Ok. Donc, nous allons regarder la réponse de saut. Et vous pouvez voir ici que nous avons, nous avons déjà pion, hey, transitions de base. Nous allons transformer cette transition que nous allons mettre à zéro. D' accord ? Et on va aller à notre premier déclencheur d'arrêt. Et c'est ce déclencheur de départ est le déclencheur qui définit fondamentalement tous nos objets dans leurs positions de départ. Et si vous vous souvenez, la façon dont nous avons fait cette animation était que nous utilisions le Star Trek deux ensembles d'états de position initiale. C' est pourquoi la durée et le délai sont 0. Et puis sur ce déclencheur de deuxième étoile, nous utilisons pour réinitialiser les répondants, pour le réinitialiser à leur état d'origine. Et c'est ainsi que nous avons créé ceci et la somme, parce que nous avons utilisé reset pour créer la première animation d'entrée, nous ne pouvons pas utiliser reset dans cette instance pour créer l'animation suivante. Nous devons utiliser des techniques de mouvement standard pour créer cela. C' est ce qu'on va faire maintenant. Nous allons donc revenir à ce premier déclencheur de départ, et nous allons changer les réponses sélectionnées. On va les copier, et on va les coller dans nos boutons de secours. Et, mais assurez-vous juste que je veux dire, ce n'est pas nécessairement super important parce que comme je l'ai dit précédemment, durée et le retard décident quand les choses s'exécutent, mais juste pour et votre santé mentale, je suppose. Et pour m'assurer que lorsque vous regardez, vous pouvez voir l'ordre de choses comme, j'ai seulement tendance à garder l'ordre ou à essayer de garder l'ordre de ces choses dans l'ordre qu'elles exécutent. Donc ces objets vont se produire en premier et les sauts peuvent arriver en dernier. Donc on a sauté au fond. D' accord ? Nous allons d'abord porter notre attention sur la réponse d'opacité et nous allons définir sa durée à 0.2. Ensuite, nous allons traiter de la façon de déplacer les réponses qui contrôlent les champs d'entrée et le CTA principal. Donc, ce sont des changements qui se produisent ces. Et on va régler la durée à 0.6. Nous voulons qu'ils bougent tous les deux en même temps. Mais nous voulons aussi faire, est que nous voulons, encore une fois, si nous regardons ces, de ces réinitialisations, Nous avons retour interpolateur. Nous voulons donc également ajouter un interpolateur arrière à notre animation inverse pour ces deux objets. Et juste pour y jeter un coup d'oeil. Donc nous avons, en fait, nous pouvons le voir ici à la fin. C' est une autre raison pour laquelle les calendriers tout à fait utiliser où vous pouvez voir la capacité de puissance est une sorte de R1 et R2 coups vont courir tous en même temps, l'ennemi de la tarière en même temps. Et vous pouvez voir la réponse du travail, qui est ce petit point qui va s'exécuter immédiatement aussi. Évidemment, si notre saut saute tout de suite, nous ne verrons aucune de ces animations. Donc, nous devons vraiment nous assurer que je vais sauter se passe après les animations de exécuté. Donc ce qu'on va faire, c'est quand je me suis assis, les réponses vont ajouter un retard. Tous 0,06, qui est la plus longue durée pour les objets AR est 0,6. Et nous irons en sécurité sachant que toute l'animation est terminée. Et nous allons également nous assurer que toutes les réponses de démarrage que nous avons ici, ce juste double contrôle que nous voulons qu'elles soient toutes remodelées à chaque fois. Et nous voulons le faire parce que nous utilisons des sauts pour la transition. Donc nous voulons que ces choses se produisent, ces animations se produisent chaque fois que nous sautons d'avant en arrière. D' accord ? Donc je pense que c'est tout, va juste revenir au début de voir. Et nous allons prévisualiser nos nouvelles mises à jour et animations personnalisées. Donc, je vais appuyer sur regarder dans mon entrée, animation personnalisée à l'écran de connexion. Et puis si je frappe en arrière, je vais ramener mon animation habituée à l'écran de démarrage. Ok, cool. Donc, cela complète le correctif pour cette transition personnalisée pour cette vidéo. Aussi les tours de la section de mouvement. Dans la section suivante, nous allons explorer le monde des conditions et des variables. Ce sont deux fonctionnalités vraiment puissantes qui nous permettront de construire une logique réelle dans nos prototypes. Et que cela va juste rendre les choses encore plus réalistes, va être vraiment cool. Et puis nous allons être utilisés dans cette capacité pour faire une vraie connexion. En outre, ce que nous allons faire dans la section suivante est de donner aux utilisateurs la possibilité de voir des photos qu'ils ont favorisées. Donc, nous allons ajouter une certaine personnalisation en utilisant nos nouvelles compétences trouvées. Nous avons des variables de conditions. Alors, on se voit dans la section suivante. 25. Faire des travaux d'ouverture à l'aide de Conditions: Salut là. Dans cette vidéo, nous allons utiliser des conditions pour créer la logique derrière notre formulaire de connexion. Nous allons créer à la fois des états de succès et d'erreur avec certains messages associés. Donc, si vous avez suivi le long des chaussures pour échouer que vous avez. Si vous n'avez pas suivi, vous pouvez télécharger le fichier de démarrage qui accompagne cette vidéo. Ok, donc nous allons commencer évidemment avec notre écran de connexion à ça, assurez-vous que vous allez sur la scène de connexion. Et nous allons d'abord, nous allons renommer certaines de ces couches parce qu'elles sont un peu confuses. Donc nous allons renommer ceci, cette première couche et rentrer à la maison. Et nous allons renommer cette couche, retournée. Le focus, on va appeler Focus Female. Ce sera de retour parce qu'il est connecté à notre bouton de retour. Ce premier Star Trek et on va appeler la cinétique initiale par initiation. Et c'est parce que nous lançons certains de nos états ici. C' est pourquoi, normalement, appelez mon groupe supérieur si j'ai un personnel pour mettre en place celui-ci, on va faire une intro cool. C' est ainsi que l'animation d'intro. Et laissez-nous lire, organisez-les, ils sont en bon ordre. Je vais en parler ici. C' est très bien. C' est tout. Bien. D'accord. Eh bien, on va le laisser à l'affaire Holder qu'on a dedans. Intro focus email va à Accueil, retourné à elle et appuyez sur retour. Une dernière chose que je vais faire, c'est que je vais regrouper ces deux groupes. Donc je peux, je peux regrouper, je peux regrouper des groupes de groupes. Donc je vais regrouper un groupe, Vega. Donc c'est un très bon moyen d'organiser votre dernière pile, votre, votre pile d'interaction, je devrais dire, parce que cela peut devenir assez long. Comme vous ajoutez de plus en plus de fonctionnalités, divulguera cuisinier à la maison. Ok, donc la première chose qu'on va faire est de créer la logique pour le champ email. Allons à notre gâchette. Et on va ajouter une condition. Et nous allons choisir l'entrée de l'e-mail. Et vous pouvez voir ici que nous avons tout un tas de propriétés que nous pouvons cibler. Toutes les impulsions féminines conscientes, apprendre et rechercher la propriété de texte. Et vous pouvez voir ici. Nous avons quelques options différentes en ce qui concerne la façon dont nous voulons configurer cette condition. Donc, nous cherchons l'égalité. Nous voulons donc faire correspondre la valeur du champ de texte à une valeur particulière. Donc, nous allons garder ça égal. Et nous allons définir la valeur. Tu peux, tu peux mettre ce que tu veux. Je vais juste entrer mon adresse e-mail. D' accord ? Et nous allons maintenant prendre notre condition de saut. Je vais le déplacer dans la cabine. Responsive dit, hé, je vais passer à l'état de saut. D' accord. On va faire un test. Et ce que je veux juste vous montrer, c'est que nous appelons maintenant une condition qui cherche cette valeur particulière ici. Donc, si nous tapons quelque chose là-dedans et appuyez sur Continuer, nous ne progresserons pas vers l'écran d'accueil. Et c'est parce que nous avons mis le saut. La réponse est à l'intérieur de cette condition maintenant, donc ce saut est faux, ne va pas fonctionner à moins que cette condition, cette condition est égale à true. Dans ce cas, j'ai tapé cette adresse e-mail dans le champ e-mail. Ok, donc juste pour te montrer que ça marche, c'est politiquement correct. Et si je continue, vous pouvez voir que je passe à l'écran d'accueil. D' accord. C'est donc la première condition mise en place. Évidemment, pour un login, vous avez besoin à la fois elle, un e-mail et un mot de passe ou un nom d'utilisateur et un mot de passe et maintenant cas et e-mail et mot de passe. Donc, c'est ajouter une autre condition. Et cette fois, on va ajouter une condition dans un autre endroit. Nous n'allons pas ajouter une toute nouvelle condition car nous, comme nous le faisons normalement depuis le bas du menu, nous pouvons en fait avoir besoin d'ajouter une autre, une autre comparaison à notre condition unique. Et vous pouvez donc ajouter plusieurs sous-conditions à une condition. Et vous pouvez penser à cela comme lorsque vous avez besoin de comparer quelque chose à plusieurs valeurs. Donc, toutes ces valeurs multiples doivent être vraies pour que cette condition soit un succès. Et c'est exactement ce que nous devons faire. Leur login, nous avons tous les deux besoin de l'email et du mot de passe pour être corrects avant d'autoriser quelqu'un à entrer dans l'écran d'accueil. Donc, il y a un bouton d'application que vous pouvez ou non avoir remarqué juste en bas ici. Donc, nous allons appuyer sur ça pour ajouter une seconde condition. Et cette fois, nous allons sélectionner le champ de saisie du mot de passe. Nous allons et la propriété Text à nouveau, ce sera la comparaison égale. Et cette fois, nous allons mettre un mot de passe. Donc, vous pouvez juste créer un mot de passe. Je vais juste faire une valeur de mot de passe. D' accord ? Et nous allons tester ça. Donc maintenant, si je mets mon adresse e-mail, mais je vais le mettre dans le mauvais mot de passe. Ce n'est pas une alanine. Si je mets le mot de passe correct. Ça me permet d'entrer. Donc, il regarde et compare ces deux conditions, en s'assurant que les deux vrai avant qu'il permettra à cette condition de saut de s'exécuter. Ok, cool, donc c'est tout pour cette vidéo. Dans la vidéo suivante, nous allons continuer avec la logique intégrée pour la forme de volume. Et nous allons mettre en place une erreur de gestion de l'OC en ce moment. Si vous mettez les mauvaises informations d'identification, le câble a juste disparu et obtient juste arène de l'écran vide était en cours. Nous voulions donc faire quelque chose pour rendre l'expérience utilisateur un peu meilleure ici. Et pour que nous allons ajouter un état d'erreur personnalisé. Alors on se voit dans la prochaine vidéo. 26. Gérer des états d'erreurs sur la connexion: Hé, là. Donc, dans cette vidéo, nous allons continuer notre mouvement, notre logique de connexion, et nous allons nous occuper de la façon dont l'interface réagit quand nous mettons les identifiants de connexion erronés. Comme il s'agit d'un login pour des raisons de sécurité, nous ne voulons pas faire allusion à quelle valeur est incorrecte. Donc, nous allons juste montrer un message générique que l'utilisateur a reçu, a quelques informations à Rome. Donc, pour ce faire, on va aller chercher un atout. Donc, passez à fig, scatch ou Adobe XD en fonction de quoi, quel programme nous utilisons. J' utilise sigma et je suis juste, j'ai ce message d'erreur. Hey, vous pouvez évidemment créer un MSD. Eh bien, si vous le voulez ou vous pouvez copier l'actif que j'ai créé pour vous. Et nous allons juste copier ça en SVG. Et nous allons retourner à PowerPoint et nous allons coller notre graphique dans. Parce que c'est SVG. Comme d'habitude, nous devons le multiplier par trois pour arriver à la bonne taille. Et nous allons juste le placer quelque part en bas dans cet espace ici n'a pas besoin d'être super exact. Et nous allons renommer son message d'erreur. Et on va se tourner pour dépasser t à 0. Ok, alors revenons à notre état et nous allons réellement renommer cette condition pour réussir la connexion. Ils ont donc commencé à créer quelques conditions supplémentaires. Donc nous voulons nous assurer que nous savons quoi, ce que nous faisons. Et nous allons voir maintenant dupliquer cette condition. Donc la commande D contrôle les fenêtres d'affaires, et nous allons nommer cet e-mail échouer. On va supprimer le saut parce que ça va être un scénario avec notre scène de démarrage. Et on va aller dans l'état et on va changer l'opérateur de comparaison ici. Donc, au lieu d'être égal, nous voulons qu'il ne soit pas égal. Et pas égal est ce petit signe égal à la diagonale de l'amour strikethrough droit à six. Vous voulez passer à pas égal pour les deux. Dans notre, dans nos réponses, nous allons sélectionner le message d'erreur et nous allons ajouter une capacité. Et on va changer ça en 100. Donc, nous allons fondamentalement disparaître dans le message d'erreur. Nous allons aussi fondre sur le bouton continuer hibou. Donc, notre principal CCA, si nous avons commencé, nous choisissons cela. Et nous allons aussi ajouter une opacité. Et ils vont le déchirer à 0. D'accord ? Nous allons maintenant dupliquer cette condition à nouveau. Donc celle qu'on vient de créer. Et on va changer le nom, je vais appeler ce mot de passe senti. Donc, alors que nous avions une condition réussie où nous, nous avions besoin de ces deux e-mail et mot de passe pour être vrais pour permettre à l'utilisateur d'entrer. Ces deux conditions, nous ne voulons pas avoir cette condition composée ici parce que, fondamentalement, si un utilisateur bloque l'email mal, mais obtient réellement le mot de passe correct, cela ne va toujours pas, ça ne va pas, cela ne va pas avoir une comparaison des comparaisons réussies à s, Donc ça va échouer, ce qui serait incorrect. Donc, nous sommes en train de décomposer nos conditions L2 en deux blocs séparés. Donc, pour le fichier e-mail, nous voulons juste que la condition e-mail s'exécute, donc nous allons juste frapper pour supprimer la condition de mot de passe. Et de même sur le fichier de mot de passe, nous devons supprimer la condition e-mail. Donc fondamentalement, vous avez maintenant un, la condition dans chacun d'eux. Et ceux-ci vont juste courir individuellement. Ce que cela permettra de se produire est que l'utilisateur peut obtenir les deux informations d'identification mal, balle, obtenir soit l'un correct et l'autre un rôle. Et ils vont toujours obtenir l'erreur, le message de gestion des erreurs. Donc c'est juste ce test que les prédateurs ont mis de mauvaises informations d'identification. Je reçois le message. Si je tape réellement un mot de passe correct. Mais j'ai mis le mauvais mot de passe. J' obtiens également le message d'erreur. Donc, il traite de tous les différents scénarios. Donc ça a l'air bien. D'accord, alors on doit s'occuper de l'état. Après une erreur, l'utilisateur veut essayer à nouveau. Si nous revenons en arrière et prévisualisons ceci, si je l'ai fait , si j'ai mis les mauvaises informations d'identification et que j'appuie sur Continuer, va me donner l'erreur, mais aussi il n'y a aucun moyen de revenir au bouton Continuer. J' ai donc besoin d'un moyen de réinitialiser le formulaire afin que l'utilisateur puisse réessayer. Ok, donc c'est ce qu'on doit faire. Donc, mais pour faire ça, ce qu'on va faire, c'est copier nos deux opacité. Et on va aller au déclencheur de l'email et on va les coller ici. Ça tire en dessous. Et ce qu'on va faire, c'est qu'on va les inverser. Donc le RMSE nous voulions disparaître et l'appel à l'action, la connexion, mais nous voulions revenir ici. Aussi, nous devons copier garçon, la logique conditionnelle. Donc ces trois blocs conditionnels, et nous devons également l'ajouter dans notre déclencheur de clé de retour. Si vous vous souvenez, il y a deux façons de soumettre le formulaire. On peut soit continuer par la loi, on peut frapper il y avait Sankey, donc on peut supprimer ce saut. Et on peut juste coller tout le lot ici. Ok, donc nous avons notre logique conditionnelle dans les deux interactions. C' est si l'utilisateur appuie le bouton Continuer ou si l'utilisateur clique sur retour sur la touche Accueil. Nous avons également ajouté ceci. Ce sont des pasteurs qui le focus email afin que si l'utilisateur obtient l'un de ces identifiants sonne, puis ils peuvent taper sur le champ e-mail et récupérer le bouton Continuer. Une dernière chose que nous devons faire est que nous avons juste besoin de dupliquer cet e-mail de focus parce que nous ne l'avons pas fait. Nous devons également l'ajouter au champ mot de passe juste au cas où ils se sont trompés. Donc, je vais renommer ceci pour se concentrer mot de passe. Et nous allons juste changer la cible en champ mot de passe. D' accord ? Donc, si nous préférons que si je mets les mauvaises conventions et que je frappe continuer, et nous obtenons le message d'erreur. Si je tape dans le champ e-mail, alors je vais récupérer le bouton Continuer. Et puis si je tape aussi dans le champ mot de passe, je vais aussi récupérer le bouton Continuer. Ok, génial. Nous avons donc maintenant une forme de travail de logique réelle. Ensuite, nous allons utiliser quelques variables pour rendre la connexion encore plus flexible et dynamique. Alors on se voit dans la prochaine vidéo. 27. Utiliser des variables pour se connecter: Salut là. Donc, dans cette vidéo, nous allons remplacer les valeurs dures de notre e-mail, notre mot de passe par quelques variables. Donc, avoir les données dans les variables le garde séparé de toutes les autres logiques. Et cela nous donne un accès plus facile pour faire des choses comme changer la valeur ou même le type de données. Si à l'avenir nous voulions créer un prototype où l'utilisateur définit son login. Nous pouvons alors facilement y accéder et l'utiliser dans notre flux de connexion. Une autre raison pour laquelle nous pourrions vouloir utiliser des variables est que nous pouvons effectuer d'autres calculs ou le formatage se terminera. Comme il arrive, nous avons un problème avec notre login en ce moment. Si nous avons testé, la connexion échouera probablement car une connexion est sensible à la casse et les appareils ont tendance à capitaliser le premier caractère. Dans une section ultérieure, nous allons jeter un oeil aux formules pour surmonter ce problème particulier. Ok, alors regardons les variables. D'accord ? Les variables existent donc dans ce panneau dans le coin inférieur gauche. C' est donc votre panneau de variables. Et si nous tapons sur ce petit bouton d'ajout, vous pouvez voir qu'il y a deux types de variables que nous pouvons ajouter. Il y a une variable pour toutes les scènes, puis il y a une variable juste pour ce C. Donc, si vous voulez accéder à une valeur variable sur l'ensemble de votre prototype, iI dans les scènes de votre prototype, vous devrez choisissez cette première option. Cependant, si vous n'avez besoin que de la variable accessible dans le senior actuel dans, ou si vous n'utilisez pas du tout des scènes, vous pouvez utiliser cette deuxième option. D' accord ? Donc, je vais garder mes options ouvertes et je vais choisir pour tous semble juste au cas où je devrais utiliser à l'avenir dans une scène différente. Il convient également de souligner qu'une fois que vous choisissez un type de variable, vous pouvez le modifier. Donc, je ne peux pas maintenant convertir global. Il y a une sorte de variable pour toutes les scènes à Hunt changer en un. pour cette variable de scène. Je devrais créer une nouvelle variable, supprimer cette variable et changer. Et cela peut être assez problématique, surtout si nous utilisons les variables dans beaucoup de conditions et de choses comme ça. Alors réfléchissez bien au type de variable que vous, vous, vous allez utiliser. Vous pouvez simplement aller et ajouter des variables globales pour tout ce dont vous avez toujours accès. Le seul inconvénient à cela est toutes ces variables pour toutes les scènes, je les appelle variables globales. Ils seront accessibles dans le panneau Variables pour chaque scène, que vous les utilisiez ou non. Et que si vous utilisez beaucoup d'évolution peut devenir assez long. Donc oui, quelqu'un a juste besoin de voir ce qui fonctionne pour vous, voir ce qui fonctionne dans le prototype que vous construisez. Ok, donc je vais rester avec la variable de scènes complètes juste au cas où j'aurais besoin de l'utiliser et d'autres scènes plus tard. Et on va s'assurer qu'on est sur la scène de la connexion. Et si vous, encore une fois, si vous suivez la rencontre avec votre fichier, sinon, vous pouvez télécharger un fichier de démarrage pour cette vidéo. Nous allons donc renommer cette variable. Donc, il suffit de double-cliquer pour renommer et nous allons inclure les e-mails. Et lorsque vous sélectionnez la variable et que vous regardez sur le côté droit, vous pouvez voir qu'il y a en fait trois types différents de variables que nous pouvons définir cette variable. Ce sont donc des types variables. Donc, vous avez le nombre, le texte, et en fait des couleurs hexadécimales. Donc, en fonction de ce que la valeur va être conservée dans cette variable, vous voulez choisir le type de variable correct. La couleur est calme, niche. Vous n'allez probablement pas utiliser tous nos textes. Vous allez certainement utiliser beaucoup. Pour nous. Nous enregistrons la valeur textuelle de notre e-mail et de nos mots de passe. Donc, nous allons vouloir choisir les textes comme le, comme le type de variable. Vous avez également la possibilité d'ajouter une valeur initiale à cela. C' est textuel ci-dessous. On va faire ça. Donc c'est notre email. Donc, nous allons lui pomper Ni email que nous voulons utiliser dans notre dans nos conditions comme nous l'avons fait auparavant. Ok, c'est bien. D' accord. Nous devons le faire, nous devons abandonner le mot de passe ainsi vous pouvez dupliquer les variables de la même manière que vous avez payé ailleurs. Faisons cet e-mail et on appellera ce mot de passe. Et nous allons changer la valeur de notre mot de passe. Cool. Donc maintenant, nous avons des variables configurées. Appliquons-les à notre login. Vous voulez donc naviguer jusqu'à la condition de réussite de la connexion. Donc celle-là. Et si nous regardons notre première condition, nous avons cette valeur difficile ici. Donc, si vous regardez la boîte juste au-dessus où il dit une valeur, nous pouvons effectivement cliquer dessus et nous pouvons choisir un tas de choses différentes que je finirais dans ce cas, nous voulons choisir nos variables afin que vous puissiez voir comment deux variables sont listé ici. Pour celui-ci, nous avons besoin de variables Email que nous allons choisir. Maintenant. Passons à notre deuxième condition, qui est le mot de passe. Nous devons faire les mêmes choses que nous avons besoin pour choisir la variable de mot de passe. Ok, testons ça. Donc efficacement, pour les critères de réussite, rien ne devrait, ne devrait changer. Nous devrions pouvoir nous connecter de la même manière que nous l'avons fait auparavant. Et mon mot de passe afin que vous puissiez voir nous avons verrouillé, mais il utilise maintenant les valeurs à l'intérieur de nos variables au lieu de valeurs b. Parce que nous avons juste besoin d'appliquer cela à nos autres conditions. Donc, nous avons fait le succès de la connexion, faisons les conditions fautes e-mail, changez ceci en condition faute e-mail et mot de passe, nous allons changer en mot de passe. Nous devons également le mettre dans notre déclencheur de retour à la maison aussi. Donc, ce que vous pourriez faire est en fait juste supprimer tout ici. Et nous pouvons simplement copier, copier notre bloc conditionnel et ce coller dans. Donc, nous avons maintenant cet ensemble en utilisant nos variables aussi. Cool. Donc, comme vous pouvez le voir, est déjà rendu les choses un peu plus accessibles. Et aussi, nous n'avons qu'à changer la valeur dans un seul endroit. Maintenant, comme vous pouvez le voir précédemment, nous avons ces, ces six conditions exactement ou avec des valeurs dures auraient dû changer ces six fois. Maintenant, nous pouvons juste mettre à jour la valeur dans une variable. Ok, de sorte qu'à propos de l'enveloppe pour la connexion et cette vidéo. Dans la vidéo suivante, nous allons utiliser des variables et des conditions pour montrer un téléphones favorisés ont dans notre section préférée. Alors, on se voit là-bas. 28. Gérer des états avec des variables et des conditions: Dans cette vidéo, nous allons utiliser des variables et des conditions pour changer cette vue Favoris à partir de l'état vide que vous pouvez voir ici pour afficher nos favoris ID tartes. Donc, si vous vous souvenez de la vidéo précédente, nous avons ajouté une animation à l'une des images de notre flux de photos, qui alors ils demanderaient de favoriser cette image. Et nous avons essentiellement fait cette animation où il est tombé dans le, dans le haut. Nous allons donc maintenant ajouter la logique à cet écran. Nous pouvons réellement voir cette image apparaître comme un pi favorisé. Donc, ceci est un bon exemple de la façon dont vous pouvez utiliser des variables et des conditions pour la gestion de l'état. Et les états sont des parties vraiment importantes des applications. Donc, être capable de prototypes d'états est une compétence vraiment importante à apprendre. Donc tu vas apprendre des trucs vraiment cool dans les vidéos à venir. La première chose que je veux faire est que je veux impulser, fait quelques graphiques pour une version légèrement mise à jour de cet écran particulier. Donc je vais sauter deux sigma. Donc c'est mon nouveau design préféré. Donc, vous pouvez voir ici, j'ai ajouté un onglet de navigation ici pour les tartes favorisées et aussi une section Maya place. Vous pouvez voir qu'il y a une vignette ici, étage. Proposer. C'est vraiment ce que notre écran est, Gainesville quelqu'un peut ressembler. Donc c'est le saut à la sonde. Et on va voir comment les gens voient. Et supprimons simplement tous les anciens graphiques de cela. Et nous allons importer notre nouveau design de sigma dans cette scène pour tout laisser par défaut. Et puis je vais voir si nous utilisons un croquis ou Adobe XD, puis fait NFO comme vous l'avez fait précédemment. Ok, cool. Donc, nos graphismes sont arrivés. Pour l'instant. Nous allons juste attraper le graphique d'en-tête standard. Il va copier ça. Et nous allons revenir à notre scène préférée et nous allons coller notre en-tête dans. Et nous allons juste enlever le mot copie à la fin de cela, nous allons supprimer le groupe graphique d'en-tête standard existant que nous avions là-bas. Et nous allons juste remplacer ça positionnellement par notre nouveau. Ensuite, nous voulons regrouper les graphiques qui composent les états vides ensemble. Voilà donc l'illustration, les textes et le bouton. Il va donc les regrouper ensemble. Et on va appeler cet état vide. D' accord ? Et là où nous allons, nous allons mettre en place notre genre de cadre de gestion d'État. Donc la première chose que nous allons faire est de créer une variable pour toutes les scènes. Et on va rendre ce sexe variable. Et on va appeler cet état F, l'état de soulignement F. Encore une fois, le nom. La structure est plus importante est la façon dont j'ai fait les choses. Ok, et nous allons définir, nous allons donner à cette variable une valeur par défaut vide. Et ce que nous faisons ici, c'est que nous utilisons la variable pour contrôler l'état que nous montrons réellement. Donc, notre état par défaut est les états vides, donc monterait le premier jour en tant que séjour vide comme notre état par défaut, état par défaut pour notre gestionnaire d'état. Ok, ensuite, on va ajouter un déclencheur d'étoile. Et nous sommes désinstallés traités car le déclencheur de démarrage est le déclencheur qui s'exécute automatiquement lorsque la scène se charge. Donc, nous voulons nos gestionnaires d'Etat qui initient quand la scène. C' est pour ça qu'on utilise un déclencheur d'étoile. Et nous allons renommer ce déclencheur de départ en états. Et nous allons l'évaluer pour commencer par sauter plutôt qu'une étoile après saut, parce que nous voulons que l'état soit réglé avant que l'écran ne soit rendu. En utilisant commencer avec saut, arrive juste un peu plus vite que l'étoile après le saut. Si nous utilisons le saut du personnel, alors nous obtenons probablement un scintillement de ce qui était là avant, avant de vendre des steaks et aussi nous ne voulons pas ça. Et nous voulons vérifier le redémarrage à chaque fois parce que nous voulons que le gestionnaire d'état vérifie comment rester chaque fois que nous en venons à ça, voir, nous allons revenir à nos graphiques d'état vide. Et comme je l'ai dit, nous voulons réellement utiliser notre gestionnaire d'état pour initier l'état vide d'abord par défaut. Donc, nous voulons vraiment baisser l'opacité de cela, donc nous ne voulons pas qu'il soit là par défaut. Nous voulons que cela soit initié par notre manager. Et nous allons en fait ajouter une condition à notre état. Et on va appeler ça vide. Et nous allons définir la condition pour choisir notre variable d'état F. Et nous allons regarder, parce que c'est l'état vide que nous évaluons en fait ici. Nous voulons chercher le mot vide. Donc, en majuscules, il correspond à la valeur que nous avons ajoutée à notre variable. Et si la condition est égale MC, Nous voulons charger efficacement l'anti-état. Nous allons donc ajouter une opacité. Et nous devons tourner jusqu'à 100. Et nous allons définir la durée à 0 parce que nous voulons que cela se produise tout de suite. Ce n'est pas le cas. Donc, il va y avoir animation dans This est comment pouvons-nous être là juste si cet état particulier est l'état qui doit être montré. D' accord ? Donc, c'est juste donner ce test. Donc, évidemment, cela définit l'état vide par défaut. Donc, vous devriez juste voir votre état vide comme vous l'avez vu avant. Mais évidemment, vous pouvez le voir dans notre vrai dossier. Donc passé ici 0. Donc nous savons que notre directeur d'état travaille parce que nous pouvons voir l'état ici noyau. Donc, nous avons effectivement sud comment l'état Manager. Et nous nous sommes assis le premier jour, qui est notre état vide. Donc, nous avons tout en place pour ajouter plus d'états au fur et à mesure que nous progressons. Dans la prochaine vidéo, nous allons mettre en place notre fonctionnalité favorisatrice. Donc, nous pouvons réellement ajouter notre plaisir maintenant à partir du flux de photos dans ce flux. Alors, on se voit là-bas. 29. Créer une fonctionnalité préférée des photos: Dans cette vidéo, nous allons ajouter quelques personnalisations sont n variables et les conditions sont vraiment bonnes pour ajouter des fonctionnalités de personnalisation. Dans la section six, nous avons commencé à créer les favoris, en voyant une fonction photo. Dans cette vidéo, nous allons continuer avec cette fonctionnalité en développant la possibilité de montrer la photo dans la section préférée. Predator n'a pas la capacité de déplacer des objets endroit à l'autre entre les scènes, par exemple. Il n'a pas non plus la capacité d'importer des données réelles. Nous devrons donc ajouter un peu de fakery pour que ça marche. Mais c'est bon. Cette idée prototype ofs règle. Ok, donc si vous suivez, continuez avec votre dossier. Sinon, vous pouvez télécharger un fichier de démarrage pour cette vidéo. Et nous allons choisir en allant à la section Accueil, l'écran d'accueil. Et nous allons copier l'image neuf à l'intérieur de nos groupes de photos ou des effets de groupe de flux de photos non ouverts puis OpenFlow flux raisin et sur la première page. Et on va prendre cette image 9 ici. Et on va juste copier ça. Et nous allons retourner à notre section préférée. Et on va coller. Et on va le renommer. Et nous allons positionner au QG coordonnées 16 pour X et 96 pour Y , donc c'est dans le coin supérieur gauche. Et nous allons regrouper l'image afin qu'on puisse la mettre dans un conteneur et on appellera ce conteneur tartes préférées. Ok, donc on va réduire l'opacité des conteneurs dont l'époque. Et nous allons aussi réduire le pi une image à. Ensuite, nous allons créer une variable numérique pour toutes les scènes. Donc, par défaut, vous obtiendrez une variable numérique que je vais appeler ce pi un. Et nous laisserons la valeur par défaut est 0. Ok, donc on va créer une nouvelle gâchette d'étoiles. Et nous allons quitter le gestionnaire de contenu, dit un autre gestionnaire qui crée et le définit pour redémarrer à chaque fois. Et aujourd'hui, nous allons ajouter une condition. Et on va appeler ça pi un. Donc, dans la condition, nous allons choisir notre pi une variable. Et nous allons le faire, nous allons chercher une valeur d'un. Ok, alors revenons à notre joueur une image et nous allons sélectionner cela et nous allons ajouter une réponse d'opacité à l'intérieur de cette condition. On va le mettre à 100. Et nous allons réduire la durée à 0. Je vais revenir au directeur de notre état, que nous avons mis en place dans la dernière vidéo. Et nous allons ajouter un nouvel état, donc une nouvelle condition. Et nous allons l'appeler comme favoris. Et on va mettre l'état F. Et on va chercher les valeurs préférées. Capuchons pliants, comme vous l'avez vu précédemment dans la vidéo précédente, j'utilise tous les capuchons pour mes noms d'état. Et si c'est vrai, si nous allons le faire, si nous obtenons un égal aux favoris, nous voulons analyser la capacité. Et nous voulons sélectionner notre état vide. Et nous voulons définir l'opacité à 0. Et nous voulons définir la durée à 0. Nous voulons ensuite sélectionner notre groupe préféré de bûcherons. Nous voulons ajouter une autre opacité. Hey, on veut le mettre à 100. Et encore une fois, nous voulons une durée aussi. Ok, donc on a fait deux choses ici. Nous avons sellé concept gérer, qui est essentiellement de gérer l'affichage et le masquage de nos images pi favorisées pi L. Ici, nous avons ajouté un autre état à notre manager de scène, qui va effectivement montrer notre tarte préférée si notre f séjour est égal à favoris. Et nous allons aussi cacher l'état vide. A alpha c sera les changements prennent de vide pour briller quelque chose. Ok, alors ensuite nous devons arrêter les images que l'image va être favorisée. Donc nous allons retourner à l'écran d'accueil. On va trouver un double déclencheur. Et ça a ouvert ça. Et nous allons ajouter une nouvelle réponse. Et cela va être une réponse d'assignation. Et les répondants assignés nous permettent d'attribuer des valeurs aux variables. Et nous allons sélectionner notre variable d'état f. Donc, vous pouvez voir, parce que c'est une variable qui peut être vu par toutes les scènes. Vous y avez accès en toutes choses. Et la raison pour laquelle j'ai appelé F soulignement séjour est F évidemment pour les favoris. Donc parce que vous allez voir à travers toutes vos scènes, vous devez juste vous assurer qu'il a un nom unique. Donc je vais choisir ça comme notre variable. Et nous allons changer la valeur en Favoris, en assurant que c'est toutes les majuscules, est-ce pas, alors qu'est-ce qui ne va pas ? Nous pouvons voir que les miroirs pleins sont toujours orange. Une orange comme nous le savons signifie qu'il y a quelque chose qui ne va pas. Ok, donc parce que nous analysons la valeur hexadécimale des aides. Lorsque nous ajoutons une valeur de texte à l'intérieur d'une formule, nous devons l'envelopper en guillemets doubles. Sinon, ça ne marchera pas. Il suffit d'envelopper le mot entre guillemets. Et maintenant, vous pouvez voir que le, nos intérêts ont disparu. Ok, on va ajouter une autre réponse d'assignation. Et cette fois, nous allons choisir notre variable pi 1. Et nous allons mettre dans la formule à un. Ok, testons ça. Donc, nous allons faire tourner notre écran d'accueil. Quel genre de flamme à notre Pi One. Et nous allons avoir, eh bien, ils vont éplucher des favorisés, ce qui, je crois, est celui-là. Nous allons double-cliquer dessus. On a eu l'animation qu'on a fait avant. Et si nous allons maintenant à notre section préférée, nous pouvons voir le r pi est apparu. Ok, c'est cool. Nous avons maintenant ajouté une personnalisation sympa à notre application. C' est, peut sembler trop complexe, mais nous tous filet à l'épreuve du futur pour où nous pourrions vouloir ajouter plusieurs favoris. L' usure nous donne le contrôle sur les images individuelles et les favoris que vous dans son ensemble, ce qui rendra les choses beaucoup plus facile à long terme. Une des choses que nous lançons une tarte, surtout quand vous commencez à créer beaucoup de fonctionnalités, est que les choses peuvent devenir un peu compliquées assez rapidement. C' est pourquoi une bonne structure et une bonne réputation et son importance vitale. Ok, donc ça termine la Section 7. J' espère que cela vous a donné une bonne base de compréhension ou de variables et de conditions et comment elles peuvent être utilisées. J' ai contesté que vous étiez des concepts assez avancés ici. Donc, pour tous a du sens et vous êtes en bonne voie pour créer des choses étonnantes. Si ça a été un peu difficile, Clé, Passez-la, jouez avec les fonctionnalités et essayez d'autres façons de faire les choses. Il y a certainement différentes façons de créer la même fonctionnalité. Dans la section suivante, nous allons explorer quelques-unes des fonctionnalités matérielles pro pies. Tu ne veux pas rater celle-là. Alors, on se voit là-bas. 30. Créer une caméra réelle dans l'application: Salut là. Dans cette vidéo, nous allons organiser une vraie caméra intégrée. Donc, dans la section 7, nous avons ajouté une nouvelle fonctionnalité à notre application Pintrest appelée Mes tartes. Avec cette fonctionnalité, nous allons donner à nos utilisateurs la possibilité d'ajouter leurs propres espoirs Python. Nous pouvons prototyper ceci avec la capacité des tartes prédateurs d'accéder à la caméra sur l'appareil. Nous pouvons donc nous concentrer sur la fonction de la caméra. J' ai déjà construit comment la vue de pagination et les onglets tout idée est identique à ce que nous avons couvert dans la section quatre. Alors n'hésitez pas à vous lancer dans la construction de cette demi-fonctionnalité vous-même. Alternativement, vous pouvez simplement télécharger le fichier de démarrage où ils sont déjà intégrés. Ok, donc nous avons notre biper et nos deux sous-écrans. Vous pouvez voir que j'ai un espace réservé appelé mes apparences. Donc, tout d'abord, nous allons importer notre conception à partir du dossier assets et créer cette vue. Alors je vais passer à FISMA. Évidemment, utilisez l'outil de choix que vous suivez avec. Et je vais impulser, je voulais juste vous montrer le point de vue des deux. J' ai donc ces deux vues sur la vue des jeux de l'esprit et j'ai la vue de la caméra. Ok, donc je vais importer cela peut s'appliquer comme vous. Allons à la scène d'impulsions à l'intérieur de notre fichier et supprimez tout là-bas. Et on va importer. Et je vais juste importer ce design pour que mon upaya soit conçu pour améliorer le N. Maintenant, je ne suis intéressé que par le bouton de l'appareil photo ici, donc je vais juste copier ça. Et je vais revenir à mes favoris ici. Et je vais juste le coller en place. Ok, donc je veux, je veux qu'il soit à l'intérieur de mon groupe de jeux, qui est ce contenu de page juste sur le côté droit a, et il va le déplacer dans ce conteneur de groupe. Et je vais mettre les actes à 1-0 et m'assurer que le Y est aussi 0. Donc c'est dans le coin supérieur gauche de ça. Mon PI est conteneur. Ok, cool. Tellement génial. Donc nous avons notre vue de séjour vide prêt à partir. Type suivant, nous voulons créer le modal de la caméra. Malheureusement, il n'y a aucun moyen de sauvegarder des photos ou de les déplacer entre les scènes de prière vers pi. Ainsi, toutes les photos prises avec l'appareil photo ne peuvent exister que dans la scène où elles ont été prises. C' est un peu une contrainte, mais nous pouvons travailler avec cela. Donc efficacement ce que nous devons faire, nous devons créer notre vue modale caméra à l'intérieur de la même scène que nous voulons utiliser la photo qui a commencé à prendre. Et dans ce cas, tout doit exister à l'intérieur de notre scène préférée. Revenons à l'impulsion vue à nouveau. Et encore. Nous allons supprimer tous nos graphiques ici. Et cette fois, nous allons impulser notre conception de caméra sur le mode ou le design de la caméra. Donc on va choisir Caméra et on va tirer ça. La première chose que nous allons faire est que nous allons supprimer ce guide de Bessel que c'était juste pour notre, pour mon usage quand je mettais les spécialistes du design croient ce groupe comme complètement. Et nous allons ajouter un rectangle. Et nous allons en faire exactement la même taille que notre téléphone. Donc, façon vraiment rapide et facile de le faire est juste régler la largeur et la hauteur à un 100%. Et puis sonde je vais travailler sur la largeur et la hauteur exactes pour nous. Nous allons déplacer ceci au bas de notre dernière application. Et nous allons tout regrouper ensemble. Ok, donc la seule raison pour laquelle nous corrigeons ce rectangle était forcer le groupe à être la taille exacte de l'écran. Donc maintenant le travail d'état rectangle, nous pouvons simplement supprimer le rectangle complètement. On va renommer cette caméra conteneur. Et on va régler la couleur de fond des conteneurs sur un E1, E, quand E. et s'assurer qu'il a un remplissage à 100%. Et nous allons maintenant copier tout le groupe. Et encore une fois, pour revenir à notre scène préférée et nous allons juste la coller. Débarrassez-vous de cette tasse à café. Donc maintenant, ce que nous devons faire est d'ajouter la couche de caméra pour accéder à la caméra de couloir, nous devons en fait ajouter une couche spéciale. Et cette couche existe à l'intérieur de ce menu multimédia ici. Donc ici, ce sont des caméras. Donc, nous choisissons un peu l'appareil photo pour ajouter une couche de caméra spéciale. Et vous verrez qu'il y a une petite icône d'une caméra au milieu de ça. Et ce que nous voulons faire, c'est que nous voulons en faire la même taille que notre calque d'espace photo à l'intérieur de notre design. Donc c'est trois 5-9 où 359. Alors faisons ça la même chose. 259 par 359. Et nous allons le mettre dans notre groupe de conteneurs d'appareils photo juste au-dessus de la photo. Et nous allons juste se déplacer dans les sites de position dans la même position que le, comme la couche guide des ennemis de l'OMS. Et puis nous pouvons maintenant retirer le travail de cet hôtel Aristote. Et on peut juste renommer cette caméra. Ok, donc c'est si vous vous assurez que votre appareil photo est sélectionné pour la dernière fois. On va aller au panneau Propriétés et on va cocher cette case à côté du démarrage automatique. Et cela va démarrer automatiquement notre caméra dès que cette mise en page, qui sont effectivement dès que le prototype est chargé. Et vous pouvez voir ici que nous avons en fait le contrôle sur la face avant et la caméra arrière. Pour cette fonctionnalité particulière, nous voulons utiliser. Dans les caméras, nous voulons prendre une photo de notre tarte. Donc, nous allons le laisser à cette valeur par défaut. Et si nous regardons en avant-première, nous pouvons voir que nous avons ce truc de ligne zigzaggy qui se passe. Donc, c'est essentiellement notre laboratoire de caméra et parce que l'aperçu est sur notre, sur notre ordinateur et maintenant l'ordinateur n'a pas d'appareil photo ou il n'a pas accès à la caméra. Si vous avez un appareil photo intégré sur votre ordinateur, il va juste nous montrer exactement ces lumières. Donc ce qu'on va faire maintenant, c'est qu'on va envoyer notre prototype sur notre appareil. Et puis une fois qu'il est sur l'appareil, qui prend la vraie caméra, vous verrez la vraie caméra fonctionner dedans. Alors faisons ça maintenant. Alors fermez, révisez. Et ce qu'on veut faire, c'est ouvrir la presse, appliquer un joueur sur notre appareil. Donc je vais juste passer à la vue de la caméra pour que vous puissiez voir ce que je fais. Vous pouvez voir ici que j'ai la sonde que j'ai ouverte. Donc, et vous pouvez voir ici, nous avons déjà connecté via Wi-Fi à notre processus haut. Vous pouvez donc le faire en scannant un code QR. Si je te montre ça. Donc, si vous cliquez sur le menu de l'appareil, vous pouvez voir que vous avez ce code QR. Et vous pouvez voir que j'ai déjà connecté mon téléphone ici, donc vous avez juste besoin de scanner ce code. Ok, donc une fois demander à tous se connecter a dit qu'on va appuyer sur le bouton Exécuter. Et tu entends ça et ça va carillon. Ça veut dire que c'est juste le prototype de mon téléphone. Et vous pouvez voir qu'il est juste chargé ici. Et vous pouvez voir maintenant que mon prototype est chargé. Et vous pouvez voir que la caméra, les vraies caméras fonctionnent réellement. Et vous pouvez voir que j'ai ma nature morte sur mon plan Pi et que je la regarde avec mon appareil photo. Donc c'est plutôt cool. C' est tout le travail dans gentiment. Ok, donc ensuite nous voulons rendre la vue de la caméra modale. Donc ce qu'on va faire, c'est qu'on va sélectionner tout notre groupe de caméras. Et on va juste le déplacer du bas de l'écran. Nous voulons manquer d'animer modalement à partir du bas de l'écran. Et nous allons sélectionner notre bouton de l'appareil photo, qui est cette grosse vignette à l'intérieur de notre groupe de jeux maya, celle que nous avons ajoutée plus tôt, celle qui est sélectionnée. Et on va ajouter un tétramère. Et on va appeler ce déclencheur de pression Caméra ouverte. Et nous allons sélectionner à nouveau notre vue de caméra. Et nous allons ajouter une réponse de déplacement à notre déclencheur nouvellement créé. Et nous voulons déplacer la caméra lambda_2 0 y position. Donc effectivement celui qui est Animate vers le haut du bas. Et nous allons juste augmenter la durée à 0.4 voyage assez une, assez loin l'ensemble de l'écran en fait, donc nous ne voulons pas que la durée soit trop rapide, sinon ça va être trop rapide. Le rythme. Et ensuite, on veut brancher le bouton de fermeture. Donc, si nous regardons à l'intérieur de notre groupe de couches de caméra, nous avons un en-tête standard ici, nous avons un bouton Fermer, donc il veut sélectionner cela. Et vous remarquerez ça. En fait, si je fais défiler vers le bas, vous pouvez voir mon bouton de fermeture ici est une petite cible. Donc, vous avez cette capacité et les pilotes de sonde qui ont effectivement augmenté les soins tactiles sans complément comme un rectangle ou quelque chose comme ça. Donc on va le faire maintenant. Donc, si nous avons sélectionné et nous faisons défiler vers le bas de notre panneau de propriétés, Nous avons cette option zone tactile. Donc on va cocher cette case. Et cela va s'ouvrir et nous donner la possibilité d'ajouter du rembourrage sur un côté ou sur tous les côtés de notre, de notre bouton. Nous voulons qu'il soit rembourré tout le long. Donc nous allons juste garder cette case cochée égale m pour tous les côtés et nous allons juste ajouter 16 dans n'importe quelle boîte. Et quand on frappera le retour, ça va l'ajouter à tout le chemin. Et vous pouvez voir maintenant que j'ai beaucoup plus grand trou taraudé obtient. Ça va être beaucoup plus facile pour les têtes. D' accord ? Ce qu'on va faire maintenant, c'est ajouter un autre déclencheur de tabulation pour notre bouton de fermeture. Et à cela, nous allons ajouter une réinitialisation et des effets. Nous, ce que nous voulons faire, c'est que nous voulons réinitialiser l'animation de l'ouverture de la vue modale. Donc, nous voulons nous assurer que nous avons notre vue modale de caméra. Donc c'est une sorte de C. capitale. C'est cool. Et on va régler la durée à 0,3. Donc, comme je l'ai dit dans la section animation, j'ai tendance à mettre une, une durée plus rapide sur qu