Share
Modéliser une application en devenir peut s'avérer une tâche très difficile si vous ne connaissez pas les logiciels et les techniques d'animation professionnels. Heureusement, Keynote fournit une boîte à outils d’animation très efficace et facile à utiliser. Dans ce tutoriel, je vais vous montrer comment utiliser Keynote pour créer des prototypes d'animations d'interface utilisateur iOS. nous allons construire une démo d'application basée sur la carte.
Remarque: Keynote version 6.6.2 a été utilisé dans la réalisation de ce tutoriel.
Tout d'abord, vous aurez besoin de trouver une maquette iPhone pour montrer la démonstration de votre application. La plupart des maquettes pour iPhone de qualité sont des objets de forme au format PSD. Elles sont donc modulables à la taille requise. Les fichiers PSD bruts ne sont pas compatibles avec Keynote. Toutefois, quelques modifications au PSD de l’iPhone seront nécessaires pour que la démonstration fonctionne correctement..
Selon le PSD, vous devrez peut-être rasteriser et supprimer les calques nécessaires pour ne conserver qu'un «cadre» iPhone. Supprimez l'image d'arrière-plan pour qu'elle devienne transparente. Enregistrez le fichier au format PNG.
La maquette de l'iPhone devrait ressembler à ceci lorsqu'elle sera prête pour la démonstration. Outre l'iPhone, les seules autres ressources dont vous aurez besoin sont des cartes, des jeux d'icônes et d'autres images que vous avez utilisées dans les maquettes de vos applications. Le reste des éléments de l'interface utilisateur sera recréé dans Keynote afin de garantir le meilleur fonctionnement des animations..
Ouvrir Keynote. Au sommet de la Choisissez un thème fenêtre, cliquez Large. Cela créera un diaporama avec un rapport hauteur / largeur d'écran large, nous donnant un produit fini que nous pouvons télécharger avec plaisir sur Youtube en HD. Ensuite, sélectionnez le blanc modèle.
Sélectionnez le blanc thème. dans le Format sur le côté droit de l’écran, cliquez sur Changer de maître et sélectionnez Blanc.
Sélectionnez le Blanc mise en page de la Changer de maître menu déroulant. Maintenant, commencez à créer la diapositive de base. Insérez l'image de l'iPhone en faisant glisser le fichier PNG dans votre Keynote ou en cliquant sur Insérer> Choisir… et trouver le fichier dans la fenêtre du Finder qui apparaît. Centrer l'iPhone sur la diapositive.
Ensuite, insérez une image de la carte sur la diapositive. Clic-droit sur l'image et sélectionnez Envoyer au fond. Cela va créer l'illusion d'une image à l'intérieur de l'écran de l'iPhone.
Clic-droit sur la carte et sélectionnez Envoyer au fond pour créer l'illusion d'une image à l'intérieur de l'écran. Vous voudrez également ajouter tout élément d'interface utilisateur qui apparaîtrait comme vierge dans votre application. Pour mes besoins, j'ai ajouté la barre de recherche avec une requête de recherche et une roue de chargement, que j'ai créées à l'aide des outils de forme et de texte de Keynote..
La diapositive de base terminée. Après avoir créé la diapositive de base, vous pouvez commencer le cadre de l'animation dans le diaporama. La chose la plus importante à garder en tête à ce stade est d’aborder les animations majeures avant d’aborder les animations mineures et minutieuses..
Pour créer l’effet de recherche et de panoramique, dupliquez la diapositive de base en clic droit sur sa vignette dans la barre latérale et en sélectionnant Dupliquer.
Dupliquer la glissière de base. Dans la nouvelle diapositive, supprimez la roue de chargement en la sélectionnant et en appuyant sur la touche Effacer clé. Déplacez ensuite la photo de la carte de sorte que la destination que vous recherchez apparaisse dans la moitié supérieure de l'écran de l'iPhone..
Insérez l'image de la broche dans la Keynote et placez-la au-dessus de la destination préférée. dans le Format menu, ajouter un Contact Ombre. Ajustez l'ombre à votre goût. ensuite, Clic-droit sur la broche et sélectionnez Envoyer au fond. Faites de même pour l'image de la carte.
Ajouter une ombre de contact à l'épingle. Dupliquer cette diapositive et déplacez-la vers la deuxième position. Prenez l’épingle et déplacez-la hors de l’écran en la maintenant juste au-dessus de son emplacement initial. Cela peut être fait plus facilement en appuyant longuement sur la touche Touche flèche haut, ou en modifiant le Position Y dans le Organiser panneau de la Format menu.
Déplacez l'épingle hors de l'écran en la maintenant directement au-dessus de la position souhaitée. Maintenant que tout est en place, vous pouvez commencer à animer. L’outil le plus important qui sera utilisé à cet effet est le Mouvement magique animation, qui crée des transitions douces pour un élément qui apparaît sur plusieurs diapositives. Magic Move créera les effets de panoramique et de largage que nous visons.
Revenez à la diapositive 1 et appliquez Magic Move en ouvrant le Animer menu et en cliquant Ajouter un effet> Magic Move. Cocher Fondu objets sans correspondance. Sélectionner Match par objet. Ensemble Accélération à Facilité In & Out. Ensemble Commencer la transition à Automatiquement avec un 0s Retard. Durée est à votre discrétion-je le règle à 1.50s pour la casserole.
Configurer les animations Magic Move. Répétez cette opération sur la diapositive 2, mais définissez une durée plus courte que la diapositive précédente. Je mets celui-ci à 0.60s.
Pointe: Testez les durées en cliquant sur le bouton Aperçu bouton pour aider à discerner la durée d'animation souhaitée.
Une fois Magic Move réglé pour cette partie du didacticiel, revenez à la diapositive 1 pour créer les animations de recherche. Sélectionnez le texte sur la diapositive. dans le Construire dans panneau de la Animer menu, cliquez Ajouter un effet. Sélectionner Machine à écrire dans le menu déroulant et définissez Durée et direction à 0.60s et Vers l'avant.
Ajouter un Construire dans animation au texte. La roue de chargement nécessite un peu plus d’animation pour représenter avec précision celle trouvée dans une application. Tout d'abord, ajoutez un Construire dans animation. Sélectionner Dissoudre dans le menu déroulant et définissez son Durée à une vitesse rapide, quelque chose le long des lignes de 0.20s.
Ajouter un Construire dans animation à la roue de chargement. Ensuite, ouvrez le action panneau et Ajouter un effet. Sélectionner Tourner dans le menu déroulant. Sélectionner Facilité les deux du Accélération menu déroulant. Je mets Durée à 1.00s, et Angle & Rotation à un 359˚ Angle et 0 Rotations, mais cela peut être modifié selon les préférences personnelles.
Ajouter une action à la roue de chargement. Enfin, ouvrez le Construire sur panneau et Ajouter un effet. Sélectionner Dissoudre dans le menu déroulant et définissez son Durée à une vitesse rapide, quelque chose le long des lignes de 0.30s.
Ajouter un Construire sur animation à la roue de chargement. Une fois les animations ajoutées, cliquez sur le bouton Ordre de construction bouton au bas de la Animer menu. Ceci affichera l'ordre dans lequel toutes les animations de la diapositive en cours seront lues et pourra être utilisé pour automatiser la diapositive..
Cliquez sur la première animation et sélectionnez Après la transition du Début menu déroulant. Ajustez le délai à votre discrétion. L'animation démarrera automatiquement au bout d'un certain temps..
En sélectionnant Après la transition démarre automatiquement les animations lors de la présentation du Keynote. Cliquez sur la deuxième animation et sélectionnez Avec la construction 1 du Début menu déroulant. Cela entraînera l’incorporation de la roue de chargement pendant la lecture de l’animation de la machine à écrire. Vous pouvez choisir d’ajouter un léger retard en ajustant l’heure dans le Retard champ.
Met le Construire dans animation pour commencer Avec la construction 1. Pour la troisième animation, sélectionnez Après la construction 2 du Début menu déroulant, et définir Retard à 0s. Répétez pour la quatrième animation.
Sélectionner Après la construction X depuis le menu déroulant pour les animations successives. Avec cela, l'effet de recherche et pan est terminé.
L'effet de panneau d'information est un peu plus délicat à créer, mais il affine la démo. Sur la troisième diapositive de la Keynote, utilisez le forme et texte outils pour construire un panneau d'information avec la largeur de l'écran de l'iPhone. N'ajoutez pas encore de photos, mais assurez-vous de leur laisser un espace. Ctrl-clic à sélectionner tous les éléments, clic-droit et sélectionnez Groupe combiner les éléments. Cela rend le panneau d'information beaucoup plus facile à manipuler dans l'animation.
Groupe les éléments du panneau d'information. Ensuite, insérez trois ou quatre photos que vous souhaitez afficher dans votre démo. Redimensionnez-les pour les ajuster en hauteur dans l’espace laissé sur le panneau d’information. Ne vous inquiétez pas si elles ne tiennent pas toutes sur le panneau. C’est là que l’animation entrera un peu.
Insérer des images que vous souhaitez afficher. Ctrl-clic à sélectionner le panneau d'information et les photos et groupe leur. Déplacez le groupe afin que les bords du panneau soient alignés avec l'écran. Sur cette diapositive, conservez le panneau d'informations juste en dessous de l'écran de l'iPhone afin qu'il ne soit pas visible. ensuite, clic-droit sur l'iPhone et sélectionnez Mettre au premier plan. Cela donnera l'apparence du panneau d'information en cours d'affichage sur l'écran.
Alignez le panneau avec les bords du téléphone. Dupliquer la diapositive et déplacez le panneau plus haut sur la diapositive de sorte que seules les informations de base sur l'emplacement apparaissent.
Déplacez le panneau pour que seules les informations de base sur l'emplacement apparaissent en bas de l'écran.. ensuite, dupliquer la diapositive et déplacez le panneau encore plus haut, de sorte que tout le panneau apparaisse dans l'écran de l'iPhone.
Créez une copie de cette diapositive. ensuite, clic-droit sur le panneau et sélectionnez Dissocier. Cela devrait dissocier les photos tout en gardant le reste du panneau intact. Ne déplacez aucun des éléments sur la diapositive.
Dissocier les photos du panneau d'information. Encore, dupliquer la diapositive, puis déplacez les photos pour que la dernière photo de la ligne apparaisse enfin à l'écran. Ceci est la dernière partie de la structure à exécuter avant de pouvoir commencer à animer..
Déplacez les photos vers la gauche pour que le dernier apparaisse à l'écran. Heureusement, créer l’animation pour cet effet est assez simple, car il ne repose que sur Mouvement magique.
Retournez à la diapositive 3 et sélectionnez Ajouter un effet> Magic Move du Animer menu. Assure-toi Fondu objets sans correspondance est cochée, Match par objet, Accélération est réglé sur Facilité d'entrée et sortie facile, et la transition commence Automatiquement avec un 0s retard. Comme le reste des animations, Durée est à votre discrétion-je l'ai mis à 1.50s pour le coup d'oeil initial du panneau d'information.
Ajouter Mouvement magique des animations. Ajouter Mouvement magique animations aux diapositives 4 et 6, tout en gardant la même chose sauf pour Durée, qui peut être modifié à votre goût. Je mets le mien à 2.00s et 1.00s respectivement.
La diapositive 5 ne doit contenir aucune animation, mais assurez-vous de Commencer la transition est réglé sur Automatiquement avec un 0s retard pour que la démo se déroule bien. La diapositive 7 ne nécessite aucune animation car il s'agit de la dernière diapositive du Keynote..
Ensemble Commencer la transition à Automatiquement avec un 0s retard. Et voila, il y a l'effet panneau d'information, terminé.
Une fois que tout le contenu est en place et que tout est animé comme il se doit, il est temps de nettoyer.
Pour ce faire, le moyen le plus simple consiste à créer un arrière-plan pour la vidéo. Pour ce faire, créez quatre rectangles en utilisant le Forme outil qui encadre l'iPhone mais ne chevauche pas l'écran de l'iPhone. Utilisez les outils dans le Format panneau pour donner à chacune des cases un aspect identique.
Créer un fond en encadrant l'iPhone. Pointe: Un remplissage de couleur qui complète les couleurs reflétées dans votre application fonctionne mieux pour l'arrière-plan. Les dégradés et les remplissages d'image ont tendance à paraître en désordre et incohérents. Évitez aussi d'utiliser des ombres.
Sélectionnez chacune des cases par Ctrl-clic. Clic-droit sur l'une des cases sélectionnées et cliquez sur Groupe pour créer une forme. Ensuite, cliquez sur l'image de l'iPhone pour le sélectionner, clic-droit, et cliquez Mettre au premier plan créer l'image d'un fond derrière l'iPhone. Copie la forme de fond et coller sur chaque diapositive. Assurez-vous de mettre l'iPhone au premier plan sur chaque diapositive pour compléter l'effet..
L'arrière-plan ajoute une touche finale à la démo. Il ne reste plus qu'à exporter le diaporama sous forme de vidéo. Pour ce faire, cliquez sur Fichier> Exporter vers> QuickTime.
Pour exporter la vidéo, sélectionnez Fichier> Exporter vers> Quicktime. Ensemble Lecture à Enregistrement de diaporama. Format détermine la qualité de la vidéo, qui peut être définie selon vos préférences. Une fois que vous avez configuré ces options à votre convenance, cliquez sur Suivant exporter votre vidéo.
Configurez les paramètres d'exportation. Tous les travaux dans Keynote sont maintenant terminés. L'enregistrement peut être utilisé tel quel ou modifié ultérieurement dans d'autres applications, telles que Final Cut ou iMovie, si vous souhaitez ajouter des éléments audio ou vidéo..
Dans ce didacticiel, j'ai expliqué comment faire la démonstration d'animations de cartes pour une application iOS dans Keynote. À l'aide de l'animation Magic Move de Keynote, vous pouvez créer des animations fluides modélisant les effets de recherche et de panoramique et les panneaux d'informations pouvant être trouvés dans une application iOS basée sur une carte..
Si vous avez d'autres questions ou préoccupations, ou si vous souhaitez voir quels autres types d'animations peuvent être modélisées dans Keynote, n'hésitez pas à laisser un commentaire ci-dessous.!
Accentsconagua