Cours intensif sur Framer X : Créez un prototype entièrement fonctionnel !

1. Bienvenue: I Le cas de mon nom et je suis l'interface utilisateur dans l'utilisation de la ligne d'expériences je me spécialise dans création pourquoi les prototypes de cadres dans les mises en page haute fidélité. au long de ma carrière en design, j'ai développé un flux de travail cohérent en restant au courant des tendances de l'industrie impliquées dans les domaines de la technologie et du design. Cela m'a conduit à trouver de nouvelles façons d'ajouter un niveau unique de nous dynamique aux produits que je crée dans cette classe serait de regarder des œufs de cadre. Je vais vous guider à travers tout le processus de mise en vie de vos dessins. Elle utilise donc des composants, ajoute des événements et explore les magasins Freeman internes que vous pourriez acquérir de l' expérience dans l'utilisation du dernier potentiel. Derrière ce logiciel est immense. Au fur et à mesure que nous traversons chaque étape du processus interactif, je vais prendre le temps d'expliquer ce que chaque fonctionnalité totale fait et pourquoi elle a été spécifique. Avant de continuer avec cette classe, allez de l'avant et téléchargez les fichiers de projet joints dans Il y aura un projet de classe qui vous donnera la possibilité d'expérimenter dans la pratique dans l'ordre dans le temps. Si vous voulez voir plus de mon travail, assurez-vous de me diriger vers le profil de partage de compétences ou de me connecter sur d'autres plateformes sociales . Un tel drivel sur Twitter aussi n'hésitez pas à garder ce profil de suivi pour se tenir à jour de toutes les futures classes sur tout ce qui est conçu dans vous savez qu'il est lié. N' hésitez pas à me contacter si vous avez des questions ou des commentaires sur la façon dont ce cours pourrait être amélioré, prêt à commencer, alors commençons. 2. Aperçu de Framer X: Salut, les gars. Et bienvenue à la prochaine partie de cette vidéo. Je vais vous donner un aperçu rapide du logiciel frame X comme pour n'importe quelle interface et jeter un oeil à ce que certaines des fonctionnalités font. C' est juste pour vous donner une idée de ce que sera la plate-forme avant qu'on ne commence créer un prototype. Ce qui est cool, c'est un potentiel derrière lui et la façon dont il a été reçu au sein de la communauté, particulier parmi les designers. Comme je pensais qu'avec la version précédente, il avait une courbe d'apprentissage plutôt raide, ce qui signifiait que si vous n'étiez pas familier avec JavaScript, se familiariser avec les bases des impôts et tirer le meilleur parti du processus de prototypage semblait être un point et une tâche pour beaucoup de gens. Et malgré l'image de X toujours en utilisant le moteur basé sur le code cette fois réagir, Le processus de prototypage réel lui-même a été rendu beaucoup plus convivial et intuitif, et certainement rivalise avec les goûts de studio d'imagination dans un doobie dépasse le prototypage, caractéristique ou l'emportent de loin en principe en termes de simplicité. Par conséquent, je pense qu'il est bénéfique d'apprendre cela parce que, en tant que concepteurs, nous pouvons non seulement créer des interactions étonnantes . Nous pouvons également voir le pouvoir de réagir, comment cela fonctionne sans avoir à écrire une réactivation elle-même. Donc, sans plus tarder, ouvrons l'interface principale et explosif avec les fonctionnalités. Ok, donc nous voilà dans les mags libres, comme vous pouvez le voir, pas beaucoup de choses. Cependant, nous avons sélectionné ce type ici, qui est l'endroit où commence la magie principale. L' arrive, il est appelé outils et il est divisé en quatre sections, qui est la mise en page interactive. La décision de dessin dans la toile vous permet de contrôler non seulement le processus de conception, mais aussi le processus de prototypage. Ce sondage vous semble probablement très familier, mais pour ouvrir plus de l'interface, sélectionnons gratuitement et choisissons un campus dans lequel le design du sénateur Comment envisager croquis Avons-nous la possibilité de choisir montre, téléphone, tablette, ordinateur ou TV ? Pour les besoins de cela, choisissons des œufs iPhone, et c'est comme la tournée ronde pour ouvrir les choses de la propriété. Maintenant que j'ai créé cercle, vous verrez sur les couches baignoire qui est imbriqué dans cet iPhone pour lui ici, vous avez les choses de propriété qu'ils semblent probablement très familier d'avoir il regarde sur croquis ici, vous pouvez l'aligner. Réglez la position pour la réactivité comme vu par l'animation ci-dessous, dit l'intérieur de la hauteur, le débordement pour afficher ou cacher, ainsi que des choses comme le A, Passy, la rotation et le Rayon. Vous pouvez également transformer cela en un lien en faisant de cet événement un événement cliquable qui vous mènera à la page suivante est ce que modifier le code. C' est comme l'option de mélange ou changer d'autres choses familières qui devraient avoir la couleur et d'autres éléments de style comme la bordure dans l'ombre. Vous pouvez également l'explorer individuellement ou comme une toile entière. Selon les exigences, cependant, cependant, touchera sur les nouvelles dans une vidéo ultérieure dans une section d'outil. Vous verrez également trois autres éléments importants, dont un lien de pile et une pile de défilement est essentiellement un attribut de livres flexibles qui vous permet de distribuer une liste organisée, mais pour nettoyer horizontalement d'une manière facile et efficace. Lien est essentiellement le processus de liaison écran afin que vous puissiez aller entre eux et défiler est un composant de défilement vous permettra de faire défiler dans un masque sur une certaine page dessous que sous le dessin, vous avez graphique, qui est l'endroit où vous pouvez créer et modifier des formes vectorielles et des tracés. Et enfin, sous le canevas, vous avez des options de navigation de base. Une telle sélection zoom et panoramique ce problème afin que vous puissiez vous déplacer autour de la page et zoomer au fur et à mesure que vous concevez. D' accord, donc je n'ai pas regardé le côté design des choses, et je ressens le besoin d'entrer trop dans les détails. Était-ce prêt à être simple dans similaire à tous les logiciels ? Par conséquent, regardons les composants maintenant similaires aux symboles, et les composants d'esquisse sont essentiellement des éléments réutilisables. Il peut être distribué sur plusieurs pages, cependant, il besoin d'être modifié qu'une seule fois. Afin d'utiliser vos propres composants, vous pouvez les créer en utilisant même la conception ou le code. Si vous êtes un designer, bien sûr, votre faveur ceci. Cependant, si vous êtes un développeur ou quelqu'un qui a un code de réaction excessive familier, vous pouvez les créer. L' utilisation de ceci sur le code studio visuel de nouvelles est une intégration de flux de travail. Aux fins de cette vidéo, créons en utilisant du code afin que je puisse montrer comment cette intégration fonctionnera pour commencer. Donnons le titre quelque chose de simple, comme Hello World Click, le créant. C' est Ce qui se passera est que le code de studio visuel se chargera en affichant toutes les propriétés de réaction pour ce composant. Je ne vais pas entrer dans cela trop c'est comme je l'ai dit, bien qu'il utilise réagir, nous n'avons pas à nous inquiéter réellement à droite dans ce, malgré ceux-ci à vos composants ou devrais-je dire que le composant est créé en réaction pour lui. Eggs offre également la possibilité de remplacer des choses comme le titre. Comment des éléments de style de base devront encore être faits dans le code Visual Studio pour montrer comment les composants fonctionnent sur deux pages. Revenons rapidement et changeons l'un des styles des éléments. N' est-ce pas un simple comme changer la couleur du texte de Black Control S à partir de laquelle est un peu de changement à travers le Like, je l'ai dit, la plupart d'entre vous ont probablement fait cela dans la conception. Cependant, le magasin Framers offre également une variété de différents vous I kits et composants déjà pour vous d'installer de nouveaux sur vos projets. Alors explorons ça ensuite. Très bien, donc j'ai abordé les composants et comment vous pouvez créer propre inhabituelle. Cependant, quand il s'agit de prototypage rapide, est parfois impossible de créer le vôtre à partir de zéro. Heureusement, cadre offre un magasin interne entier ou les gens au sein de la communauté peuvent vous donner une variété de différents You I enfants sur des composants prêts pour vous à utiliser. C' est particulièrement pratique pour les gens comme moi. Vous voulez juste faire glisser rapidement des choses comme le chargement des icônes. Et n'y pense pas trop. Cette constante est-elle mise à jour ? Donc, je recommande certainement de vérifier cela. 3. Mises à jour et Docs Framer: Bon, gars, bienvenue à la prochaine partie de cette vidéo. Dans un peu de recherche ce matin, et la dernière version, qui a été publié le 16 Octobre est en fait framer X trois. Maintenant, honnêtement, car dans le X cinq dans la version bêta ressemble exactement le même. C' est un cadre supplémentaire. Je pense que c'est surtout une fonctionnalité améliorée. Donc, si vous suivez ce tutoriel ne fait vraiment aucune différence. Vous pouvez utiliser celui-ci ou celui-ci, car si vous revenez à l'interface, c'est la dernière version. C' est exactement le même. Comme je l'ai dit, c'est surtout des choses améliorées. Hum, et ils avaient beaucoup de choses dans ce que la communauté a recommandé aussi. Transitions de superposition personnalisées. Ce qui est vraiment bizarre, c'est que je l'ai envoyé pour des commentaires appartenant. S' ils ont pris cette ambulance plutôt cool. Une partie de cette vidéo était bien, était principalement juste de vous donner un aperçu du site Web réel. Donc la communauté derrière elle sur les autres personnes qui le soutiennent parce qu'ils sont derrière elle et juste, vous savez, le genre de soutien général que vous trouverez sur Twitter et Dribble. Et une autre chose que je recommande de regarder aussi. Maintenant, je suis plus une personne à la main sur la personne. J' aime plonger dans les logiciels et apprendre. Cependant, je donne toujours. La documentation pour les nouveaux logiciels est une lecture rapide car elle était vraiment pratique pour passer par. Ils vont tout expliquer. Oui, c'est très verbeux, mais des images visuelles sont là. Ils sont très gentils. Et comme je l'ai dit, si vous voulez aller vérifier ça, juste aller pour encadrer ex dot com. Mais oui, sur la prochaine vidéo, nous allons regarder l'importation et l'exportation à partir de croquis et aussi juste donner un aperçu rapide de la façon dont la réactivité fonctionne dans la conception et ensuite, oui, nous allons entrer dans le prototypage. 4. Importer à partir de l'ébauche: Bon, donc dans cette vidéo, nous cherchons à importer vos dessins directement depuis le croquis dans Freeman, maintenant 22. Longtemps, c'est un processus vraiment simple. Mais disons que vous avez conçu un croquis de pensée et que vous aimez tout prototype. Il doit être rapide et rapide. Qu' est-ce que tu auras à faire ? Je veux dire, excusez l'horrible hiérarchie de couches était une commande impliquée. Voir pour le copier, vous entrez dans Freeman. Allez, V et que tu partes. Et ce qu'il ferait, c'est qu'il conservera toutes les couches et ajoutera également des parents. Ainsi, ces groupes, bien qu'ils ne soient pas des cadres, auront imbriqué des couches à l'intérieur d'eux. Il conserve son et à partir de là, vous pouvez simplement mettre en évidence ce que vous voulez faire. Léger lien dire, arrivez-le à cette page. Et quand vous le prévisualisez, c' est simple. Est en place maintenant important de croquis n'est pas sans ses limites. Vous remarquerez tout de suite. Eh bien, vous n'avez peut-être pas remarqué, cependant, que ces deux graphiques ici dans le port, peu importe combien de fois j'ai essayé de les traduire ici, cela n'arrive pas. Ce ne sont que des carrés blancs. Il y a donc quelques problèmes en termes de traduction de la conception à partir de là vers un autre logiciel. Une autre chose cool à propos de l'importation directement à partir de l'esquisse est essentiellement de conserver toutes les propriétés de la couche du fichier d'origine. Si vous souhaitez effectuer des ajustements de conception de dernière minute, vous n'avez pas besoin de revenir dans l'esquisse originale car vous pouvez le faire directement dans le cadre en tapant simplement deux fois pour afficher les propriétés de la couche. De là, vous pouvez changer la couleur. Changez votre Plessy donné changement d'irritation, ce qui signifie que vous pouvez maintenir un contrôle constant. Le processus de conception ce qui en même temps en le gardant séparé du fichier d'esquisse d'origine . 5. Conception dans Framer X: Ok, donc la dernière chose que nous allons examiner rapidement est les relations parent et enfant dans le processus de conception qui forme la hiérarchie des couches est bien, c'est un côté réactif des choses basé sur la conception de la boîte flexible. Les œufs de cellule sont vraiment dedans, et tout est déjà organisé pour vous. Si vous créez un lecteur de type, Hello, Forever X déterminera automatiquement la relation parent et enfant entre ces deux couches. Cela signifie que tout reste organisé. Tu n'as pas à t'inquiéter de t'entraîner où va le groupe. Cela rend également plus facile pour le côté réactif des choses qui démontreront ici de le démontrer. La réactivité a créé ces trois années. Je continue ceci ici contenant chacun deux éléments dans une figure de proue de marge de huit pixels et ferme non ouverte de manière responsable. Vous verrez trois cadres chacun de ces encadrés représentant chacun de ces conteneurs ici avec eux. Dans ces cadres, vous avez les deux enfants, le texte et le cercle. Cela permet de sortie framer déterminer la réactivité avec précision. D' accord, donc je viens de montrer que vous posez une hiérarchie et une réactivité et ils montrent que vous exportez comme vraiment de montrer est à peu près la même que tous les autres logiciels. Cependant, C'est cool show de toute façon, juste au cas où. Donc, ce que nous ferons si vous voulez exporter tout votre campus sélectionnera le titre d'exportation. Je vais passer sur l'exploit cette petite liste déroulante. Pourriez-vous vous attendre à votre taille et aller un X, je pense que deux x ou trois x Si je compresse pour dribble, je n'entends jamais un tel type de fichier, donc vous pouvez voir le plein est PNG. Cependant, vous pouvez choisir parmi le paquet Web J. Peg Ah, qui est fondamentalement un format de compression pour les images que vous mettez sur le Web et ensuite vous avez l'exportation PDF et les légumes frais est un processus légèrement différent c'est vous oblige à copier les couches SPG que vous pouvez suivre directement dans votre éditeur de texte. Ceci est particulièrement pratique pour l'exportation et l'iconographie pour votre développeur afin de démontrer comment cela pourrait fonctionner. aller dans le type d'outils dans sélectionner le graphique, créer un cadre, et ce que cela va faire est d'ouvrir une variété d'options différentes qui devraient tracer, rectangle , ovale, polygone et commencer à montrer comment exporter c'est ça. Créons une forme de base en utilisant la bouffée. Ça n'aura rien de trop fou juste pour montrer comment on l'exploite. Mets Phil, tu sais, le 100 et maintenant tu as ta forme. Sauf si vous avez besoin d'exporter. Cela le gardera entièrement comestible. Avec votre dans la phase de production, vous allez simplement copier. Vous avez la possibilité de copier le code SPG. Maintenant que j'ai couvert l'exportation, je pense qu'il est temps de passer au prototype complet. Alors allez-y et ouvrez le dossier d'entraînement. Et sous Fichiers principaux, c'est comme le dossier Utilisateurs, où vous trouverez le travail de l'orteil de fichier à partir de là sera en mesure de passer par le prototype augmente ensemble. se voit dans la vidéo suivante. 6. Relier les écrans: Bon, Bienvenue à la prochaine étape de ce cours. Dans ce cas, on va commencer à construire un prototype de base. Je suppose que vous avez ouvert les fichiers du projet. Quoi ? Vous verrez que j'ai créé quatre écrans. Bien que relativement simple, Ces quatre écrans contient quatre des principales caractéristiques dans les expéditions de cadres, piles Cree composants inscrutables reliant les écrans et en utilisant des vidéos YouTube. Restez simple. Nous allons regarder les écrans Lincoln et créer un flux de base dans l'APP. Je pense que j'ai récemment montré cela plus tôt quand je ne devrais pas avoir à importer de sketch. C' est un processus très facile, alors démontrons-le maintenant. Sur la page des entrées, vous avez un mais ici, qui a peur que j'ai été appelé entrer. Ce que nous allons faire, c'est quand un lien, c'est que la page passe à la page des catégories ici pour faire jusqu'à. Je vais faire cuire le lien, cibler sur cette page et vous verrez une variété d'options différentes telles que la transition et la direction dans laquelle il entre est ce qui fait que les pages sur une cible à ou un remplacement pour ne pas faire cela. Vous pouvez même descendre ici. Disons que vous voulez aller à la principale. Vous allez simplement sélectionner le menu où vous pouvez simplement cliquer dessus à nouveau et ce sera vraiment lui-même. Ce n'est pas que le lynch de voir que les transitions complètes de ce qui fonctionne et laissez-moi en prévisualiser . Nous cliquons sur ce, mettez vos transitions de page de catégories de sommeil dans vraiment simple, vraiment efficace et bon à montrer comment le flux de pomme. Je vais aller de l'avant et regarder plus sur les écrans. Donc je dis à partir de la page des catégories, nous avons ce cadre ici, qui est un menu ce que nous allons faire. Nous allons aussi aimer que ce menu Hoover bail vous pouvez le lier tellement aimé qu'il va dans l' option de transition sont actuellement mis à nourrir, qui est ce qui fonctionne que vous avez droit de différents. Ils ont le mode de superposition push. Aussi, si c'était comme un instantané pop up, qu'elle veut le département d'animation réel. Je n'utiliserais pas ça et je l'ai utilisé. C' est chaotique, mais s'estompe. Il va créer un joli peu trop ne sera pas de mouvement et vous verrez que lorsque nous rentrons dans, alors rafraîchissez-le. Vous verrez apparaître le menu. Ok, donc à partir d'ici, tu sais comment la prochaine, mais bien sûr, on n'a pas de casse. Je veux dire, quelles choses couler bien. Retournons en arrière. Glissez le cadre X et encore une fois Jolie, assez simple Processus ce que vous liez pratique accepte. Ne poussez pas. Vous vouliez me laisser revenir, les gens frais. Pas de foi par deux catégories. Maintenant, ce qu'on va faire, c'est partir de séquences vidéo. On va passer à la dernière page pour finir la partie Lincoln de ce processus. On va encore avoir des vidéos. Lien vidéos Page ont que pousser à nouveau. Donc, ce que nous allons faire, ce sont des choses comme des menus que chacun croit qu'ils vont disparaître. Toutes les pages auront en transition à partir de la droite pour aller à la gauche. Et maintenant, nous allons prévisualiser toute la chose si elle devient vraiment noire. Peut-être pas. Mais de toute façon, donc si vous cliquez sur le métrage vidéo, vous verrez que va à la page vidéo. C' est pourquoi nous regardons les bureaux GT. Vous pouvez voir le surlignement, leur actif. C' est vraiment cool, mais nous regardons ces stades de fin d'air Maintenant que nous avons lié aux écrans, allons prévisualiser l'ensemble pour voir comment il va couler plein écran que vous pouvez voir que nous sommes toujours dans ce joli pH. Ici, vous cliquez sur Entrer dans le cosmos, pas vous prendre à travers pour couper chaque page. À partir de là, vous pouvez cliquer sur le menu, puis nous sélectionnerons un métrage vidéo pour passer à la dernière page. Et une autre chose que je dois montrer aussi est que ce Bakker va aussi couper, d'accord. Lorsque vous cliquez sur ce bouton, vous verrez les transitions en face pour créer une mort agréable et dynamique dans la conception. 7. Créer des piles: Ok, donc maintenant que nous avons lié des âges et vu comment les sorties du prochain regardeur unique sont piles et comment nous pouvons organiser et distribuer la liste d'une manière facile et efficace, cela est particulièrement utile parce que frame reconnaît l'exactitude de l'endroit où se trouvait le dernier, leur permettant de se mettre en place sans que vous ayez à vous soucier de les organiser d'une manière différente. Alors ils vous montrent comment faire ça. Pour commencer avec chacun de ces cadres leurs éléments individuels sur Pour les mettre dans un stock vous pouvez passer à travers la section outil et sur la mise en page hit pile ou s à coup sûr. , Je laisse exécuter les éléments que vous souhaitez mettre dans la pile et attendre que le panneau des propriétés apparaisse. Donc, comme vous pouvez le voir ici, vous avez un rembourrage qui vous permettra de distribuer sur la page si vous voulez garder ce zéro. Et pour ceux-ci, j'avais une marge de 30 pixels entre eux ont été changés un écart à 30. Comme vous pouvez le voir, alors je suis exactement la même chose. Cependant, vous pouvez généralement les déplacer et les organiser et le faire entrer en place. Cependant, vous voulez qu'il soit capable de définir l'écart dans la partie dans car il s'agit d'un attribut de livres flexibles . Il utilise également beaucoup de livres flexibles originaux. Terminologie Juste commencer au centre est ce qui vous donne la possibilité de définir une direction à la disposition horizontale ou à une sortie verticale. Maintenant, avec cette pile, accédez essentiellement à un masque, ce qui signifie qu'il est retenu ici. Donc, si vous deviez le vendre à vertical désolé horizontal, pas beaucoup se produira car il est littéralement contenu dans cette section. Normalement, il sortirait de la page pour les besoins de cela, ou ils n'en auront pas réellement besoin. Démontrez comment cela fonctionnerait de sorte que vous pouvez le voir et je lui donne un peu d'espace autour du côté parce qu'il est prêt à commencer, distribuez-le dit qu'il vue vers le haut pour définir cela au centre. Comme vous pouvez le voir, il n'est pas parfumé dans la mosquée. Si vous aviez dit à la fin, bien sûr, vous êtes au fond de la mosquée aussi est que vous avez aussi une ligne, donc si vous avez dit que ça commence comme vous pouvez le voir, c'est une ligne sur le côté gauche. Vous avez dit ça jusqu'à la fin, bien aligné sur le côté droit, et cette étape tardive transformera ça en une composante scolaire. Il est donc toujours pratique de les rencontrer dans une pile d'abord afin que tous les ajustements de dernière minute puissent être effectués facilement. Maintenant que vous savez comment utiliser les piles et organiser votre auditeur, mais loin dans la vidéo suivante, nous allons regarder tourner ces composants indescriptibles. 8. Créer des sections Scrollables: D' accord, les gars. Maintenant que nous avons couvert des cerfs, regardons défiler. C' est là que les sites interactifs deviennent beaucoup plus intéressants. Donc les premières choses d'abord et il y aurait peut sembler un peu long enroulé va les déplacer hors du chemin. Merci que ça, puis ce lien vidéo Le fantôme était une page de vidéos que nous allons supprimer. Je vais dupliquer cette page. Eh bien, je sais bien parce que le CD est là. Je vais simplement supprimer ça. Nous avons refroidi ces catégories. Un parchemin que je vais faire va faire 910 pixels. 110. Débarrassez-vous de ça. Asseyez-vous sur les piles. Ce que tu fais va enlever cette pile. Visitez ST Pictures du haut, quelqu'un à essentiellement la photographie. Dupliquez-les. Maintenant, il est tout à l'extrême est juste de montrer comment ils allaient faire défiler ce que nous faisons. Placez une minute. Coincés juste pour qu'ils soient organisés au cas où vous vouliez faire des ajustements de dernière minute comme nous l'avons fait la dernière fois. 30 pixels sur avec station, dois-je dire ? Et maintenant vous avez ce parchemin ici. Donc maintenant on va faire, on va aller aux outils. Tu vas t'asseoir comme un rouleau. Vous allez tirer sur ce commerce ici où le composant de score doit aller. Donc 37 pixels sur 375 pixels en largeur et environ 654 pixels en hauteur. J' ai repéré ça stupa, et ensuite ce qu'on va faire avant de relier ça à la page vidéo , donc je vais baiser on y va. Liez-le Qu'il n'y a pas, ne pas utiliser cela dans une pile sur un futur composant de défilement est maintenant également lié. Revenez maintenant à la section de défilement initiale. Nous le lions à cela. Comme vous pouvez le voir, ils viennent d'apparaître. C' est exactement le même. Cependant, nous irons dans l'aperçu que je suis rafraîchir. Non seulement le métrage vidéo fonctionne toujours, mais vous ne pouvez pas faire défiler aussi bien 9. Ajouter des composants Youtube: Bon, donc bienvenue à la dernière étape de ce processus. Maintenant, dans cette vidéo, nous allons regarder utiliser le composant de médias e t nickel prier en temps réel, vous RL est dans des projets bas. La chose cool à ce sujet est non seulement en utilisant le bébé YouTube I il aide également à conserver toutes les vignettes originales ainsi. Si nous obtenons un aperçu, vous verrez qu'il s'agissait de liens actifs. Vous cliquez là, vous voyez, la vidéo se chargera en place qui normalement ne serait pas émet leurs différents thèmes d'espèces et d'autres choses. C' est un peu ce qui se passait ici. Et pour ce faire, tout ce que vous avez à faire est de sortir non montré ici. Toujours pas pu démonstration de suicide. Mais tu iras à ton ça. Je vous montre ce qu'il télécharge à l'origine. Donc, il est maintenant déjà allé de l'avant et téléchargé cela et il ressemblait à ceci. Ainsi sera un cadre YouTube. Comme vous pouvez le voir que le téléphone est un cadre X intro vidéo, cependant bien, Je suis allé de l'avant et fait est trouvé même ici que j'utilise là. Donc c'est juste l'équipe spatiale. Donc c'est ta meilleure nourriture. Hasty, donc tu feras très simple nous copierons l'euro bien, tu retourneras et tu verras que l'euro est là. Allez, Vey beaucoup cette fois change maintenant quand je frappe. Entrez une autre chose cool. Vous pouvez également légère l'auto placer les choses. Maintenant. Cela détermine essentiellement la lecture de la vidéo lorsque vous entrez pour la première fois dans la page actuellement mise en marche, ce qui signifie que vous devez physiquement cliquer dessus dans l'ancienne vidéo pour le charger. Je pense que vous pouvez également choisir à partir de, ce qui permet essentiellement aux vidéos de commencer à jouer automatiquement ainsi que Luke, qui va lire la vidéo sur un cycle continu. Alors, qu'est-ce que vous voulez fendre la vidéo de code sur la droite ? J' édite également l'exemple de code réel pour ce composant. Donc c'est vraiment cool, vraiment polyvalent. Et, ouais, vous savez, un vrai niveau de profondeur de vos animations ne se sent pas limité par ces dimensions que vous pouvez voir ici. C' est essentiellement en 1920 par 10 80 p dimension. Cependant, vous verrez ici, je l'ai réellement changé, et c'est essentiellement un masque de coupe. Donc, quand je clique sur ce, vous verrez que le cadre est imbriqué doit voir. Le composant de tube vous est imbriqué dans le cadre que j'aurais fait est utilisé comme un masque d'écrêtage . Alors je vais me déclipser. Vous verrez que les dimensions réelles des composants YouTube d'origine sont là. Et si j'aime les deux encore une fois, vous devez couper vous voir qu'il est de retour à la façon dont il était à l'origine Waas. Allez-y et jouez un tour de paris autour. Vous roulez là-dedans, même écrêter ceci ou tout simplement tapoter deux fois ? Et si vous voulez maintenir les preuves de style, je serai aussi Lincoln. Exemples de boursiers dans le flotteur de projet. Vous pouvez aller de l'avant dans la pratique avec cela dans votre propre temps. Donc, maintenant que vous savez comment intégrer des vidéos YouTube dans votre projet, cela conclut essentiellement notre processus de prototypage pour ce design, la prochaine vidéo va se creuser. Tout ce qu'on a fait est ce qu'il cherche. La dernière mise à jour des nouvelles fonctionnalités qui ont été ajoutées 10. Unissez tous ces éléments: Alors bienvenue à ce qui allait être la dernière vidéo. Évidemment, ce matin pour au-delà de sa version de lancement cinq pour leur base A en Italie ont été, comme un nouveau côté interactif des choses aussi bien. Mais je dis que c'était un aperçu en plus, vous savez, rapide dans la vidéo suivante, mais essentiellement, ça allait être, vous savez, une sorte de résumé de ce qu'on a fait. Donc, je vous ai montré l'interface. Je suis sûr que tu encadres un magasin. Ouais, les différents futurs et espère réellement construire un design sur le prototypage. Donc, cela semble comme, vous savez, l'onglet des propriétés, et vous savez comment utiliser la conception réactive. Et il était vraiment, vraiment dedans comparé au cadre original. Si jamais tu l'utilises, tu ne t'es pas tenu debout. Pourquoi ? C' est, tu sais, tout le battage médiatique. Euh, ouais. Nous avons mis sur pied le prototype le plus basique possible. , Bien sûr, dans le monde réel, vous avez rassemblé des flux plus complexes dans ce révolutionnaire comme nous. Il n'a pas beaucoup de la mort d'animation que ce principe a. Je sais. J' ai dit que c'est beaucoup plus facile à utiliser, euh, en principe, le principe vous donne beaucoup plus de liberté de jouer autour de la chronologie et de personnaliser différentes transitions que vous avez vues précédemment dites à l'époque. Les quatre éléments principaux il y a maintenant un autre élément appelé Page, mais c'était juste lier les écrans, organiser ces composants pour le cadre, Devrais-je dire dans un composant de pile et aussi, vous savez, créer des scrolls et ce niveau de dynamique nous à différentes pages ? Oh, et évidemment, bien sûr, ajouter des vidéos YouTube, je veux dire, c'est comme le processus le plus simple, mais c'est vraiment cool. Ouais, je veux dire, allons de l'avant et prévisualisons le prototype final. Je vais aller en plein écran. Venir, explosé, a été dépassé. Je vais entrer dans les MERS de la CAA. Comme vous vous en souvenez, nous passons par les catégories Page Ah, et vous ne pouvez pas faire défiler là aussi. J' ai réalisé que j'ai sélectionné le masque de défilement un peu plus bas. Tu vois où ça coupe là. C' est là que devrait être le sommet de tout ça. Et puis probablement à mi-chemin il y aurait là où le masque se termine. Donc ça grandit, mais c'est tout ce que la démonstration montre comment ça flotterait. Bien sûr, allez-y. Vous avez fatigué ces choses au fur et à mesure que le processus se poursuit. Bien sûr. À partir de là, vous pouvez également afficher le menu lorsque vous sélectionnez. On y va. Donc, bien sûr, vous pourriez être cool s'ils avaient, comme, états de vol stationnaire est bien, rappelez-vous , en principe, ils ont la capacité de récolter. quelque sorte, allez les voir et changez la couleur. Il abandonne juste, tu sais, plus de profondeur. Mais tu es proche. Ce que vous voulez passer à des séquences vidéo ? tu Non, travailles. Pas moyen. J' allais si bien. Oh, je vois. Je l'ai déplacé à leur mais alors un sage que nous allons passer à des séquences vidéo. Et vous avez des vidéos faciles ici. Vous pouvez donc cliquer sur n'importe qui. savez, Voussavez, vous avez le son complet là-bas, et c'est vraiment de haute qualité, c'est ce que j'ai été vraiment impressionné par ça. Je veux dire, quand je l'ai vu sur la démo qu'ils ont donnée, j'étais genre, c'est incroyable. Ce n'est pas un autre logiciel fait. Cette morsure corse et go verra les transitions dans une direction différente. Oui. Je veux dire, comme je l'ai dit, c'était juste pour donner une présentation aux gens. C' est un logiciel relativement nouveau. Alors quels jours se passent constamment ? Et c'est un peu ennuyeux d'essayer d'enseigner les logiciels comme ça parce que, comme je l'ai dit, je pensais qu'on m'a montré bien que les caractéristiques principales. Et puis ce matin, une autre mise à jour arrive et c'est comme, Oh, eh bien maintenant Adam Page et moi étions genre, vraiment ? J' ai besoin de créer une autre vidéo, juste une sorte de démontrer ce que c'est, Parce que sinon je me sens comme je suis court changer. Vous parcourez, lisez les quais sur le site. Ils l'ont probablement mis à jour. Maintenant qu'il y a de nouvelles choses qui arrivent, oui, c'est honnêtement que ça bouge si vite et tout le monde est derrière. Et j'ai l'impression que c'est l'avenir de ce genre de logiciels. 11. Interaction mise à jour: D' accord. Voici donc la vidéo imprévue basée sur la nouvelle fonctionnalité appelée Page. Maintenant, ils ont un autre bassin aussi, et j'ai littéralement juste dû passer par. Regardez-le. Donc, il est cadre x quatre maintenant, comme, dit, dit, nous étions en cours d'exécution le libre fait trois. Ah, et oui, le plus gros qu'ils ont ajouté est la nouvelle page interactive. Jusqu' à présent, ils l'avaient annoncé et l'avaient mentionné. Il n'y avait pas sur le logiciel. Et honnêtement, je l'ai complètement oublié. J' adore ça. Vous savez, regardant le courriel qu'ils ont envoyé, il va falloir analyser ce qui se passait. Vous savez, vous regardez les exemples de ce que vous pouvez créer. Je veux dire, regarde ça. Vraiment impressionnant. Et oui, juste de mettre rapidement un exemple de chien. Ouais, qu'on peut regarder à travers. Donc ici vous avez trois cadres et vous avez une page en toile sur iPhone X. Ce que vous faites, elle va aller à la page, donc c'est nous allons faire toute la largeur. Donc 375 C'est essentiellement, vous savez, le composant de page maintenant dans les espaces où ces éléments pourront être balayés à travers votre mec. Vous êtes utilisé pour vous connecter pour pouvoir utiliser, genre, 23 Je pense qu'il est là. Bien. Uh, Moïse laisse le dernier, ce n'est pas le cas. Ce qui s'est passé, c'est que ce n'est pas connecté. Tout ça ensemble. Et lorsque vous sélectionnez ce composant fera apparaître un tas d'options différentes ainsi. Donc, vous pouvez essentiellement sélectionner l'écart entre les stations sont juste pour le rendre un peu plus clair au mouvement. Je vais nous donner 30 pixels de rembourrage C ou grand, et sur le côté du rembourrage dans l'insensé à l'intérieur de ce masque ici, vous pouvez voir qu'il n'y a pas d'écart ici. Donc ce qu'on va faire, c'est qu'on va régler ça à 15. Donc c'est exactement la moitié de l'intensité. Écoute, le désir est juste beau. Ah, et pourtant nous saurons que vous pouvez personnaliser n'importe laquelle de ces choses. Cette année est actuellement définie sur la valeur par défaut, qui est diapositive a de l'élan désactivé, ce qui signifie que vous devez physiquement en cycle trois. Eh bien, vous verrez que je l'ai prévisualisé pour vous assurer qu'il est rafraîchi et pourtant vous pouvez passer comme un métro. Momentum est ce A, comme essentiellement vous permet de simplement glisser une fois et avoir un bon loin. Trois. Où est parce que c'est éteint ? Vous devez passer manuellement, alors nous le ferons. Il jouera avec ceux qui vont relancer l'élan. Bien sûr. Eh bien, vous verrez qu'il y a plus de frais que vous pouvez passer directement en un seul coup, ce qui est probablement pratique ou un peu trop rapide à nouveau. Vous ne pouvez pas contrôler la vitesse de ceux-ci. Et ce qu'on va faire c'est que tu sais, on va faire du cube, parce que tu sais quoi ? Votre rafraîchissement préféré que vous pouvez voir au lieu d'avoir à utiliser après les effets maintenant pour créer ce genre d'effets, vous pouvez aller directement ici et faire cela. 12. Résoudre le cours: et c'est une enveloppe désolée par l'indignation non conventionnelle. Et j'aurais adoré avoir fait une vidéo parlante en utilisant la caméra. Malheureusement, les circonstances ont changé. Je n'ai pas pu en trouver un. Donc je commence à regretter de ne pas filmer que les mêmes jours, l'intérêt pour nos vraiment met donne cette petite caméra. Elle veut dire, merci d'avoir regardé. Il y a une petite photo de moi, comme chez lui, mais ça n'a pas vraiment d'importance. Ah, et oui, honnêtement, juste je veux vous encourager à me contacter et à participer au cours, vous savez, vous savez, poser des questions et aussi donner des commentaires. Je veux dire, c'est le premier cours que j'ai fait. Je n'ai aucune expérience dans l'enseignement en ligne. Ce genre de m'a contacté et m'a dit : Tu veux faire des vidéos ? J' étais genre, ouais, ouais, je sais quelque chose de différent et, ouais, contactez-moi ailleurs aussi. Comme je l'ai dit, dribble pré actif là-bas, toujours publier des choses et surtout essayer, je pense que d'obtenir plus d'un réseau sur LinkedIn déjà de l'utilisateur. Mais oui, 57 connexions gagnent si honnêtement, si vous vouliez, genre, réseau dans un niveau plus professionnel. Frappe moi en entendant un message. Honorable, je pourrais me trouver. Eh bien, j'ai les liens ici, donc ouais, utilise le sol. C' est là que j'ai fait un peu de code. Sois mains et oui, donc j'espère que tu as apprécié ce cours. J' ai essayé d'être aussi instructif que possible et de tout décomposer de la meilleure façon possible , alors oui. Offrir des commentaires sur ? Oui. Restez à l'écoute. J' espère que j'inclurai d'autres choses dans un proche avenir. A bientôt.