Animation de la boutique en ligne

• Mai 5, 2024

À ce stade de notre projet Flash^R, notre boutique de cartes est remplie de cartes miniatures. Il est maintenant temps de commencer la présentation de nos artistes. Chaque artiste a une carte sur l'étagère. Nous animerons chacune de ces cartes et afficherons les informations de l'artiste dans une bulle de texte.

Chaque carte électronique aura la même animation, nous allons donc créer l'animation 6 fois. N'oubliez pas que notre objectif est de faire démarrer chaque carte électronique comme une petite carte électronique sur l'étagère et de l'agrandir pour presque remplir la scène. Notre première étape consiste à définir quelques guides horizontaux et verticaux que nous pouvons utiliser pour positionner la carte électronique et la bulle de texte. Notre première carte électronique sera une scène de bonhomme de neige d'hiver peinte à l'aquarelle par Kate Mawdsley. Nous importons d'abord le graphique de la carte électronique dans la bibliothèque Flash.

Ensuite, ajoutez une image clé sur un calque de la timeline où nous voulons que l'animation commence. Commençons par l'image 275. Faites glisser le graphique de la carte électronique sur la scène, en le plaçant à côté des guides. Cliquez avec le bouton droit et convertissez le graphique en un symbole nommé KateM. Cliquez de nouveau avec le bouton droit et choisissez Créer une interpolation de mouvement dans le menu. Nous utiliserons les 30 premiers cadres pour faire zoomer la petite carte virtuelle sur l'étagère. Si nous ajoutons 30 images au-delà de l'image 275, la carte électronique sera agrandie en taille réelle sur l'image 305. Ajoutez une image clé à l'image 305. Cela "verrouillera" la taille réelle et la position finale de la carte électronique.

Maintenant, nous pouvons revenir à l'image 275, au début de l'animation, et utiliser l'outil Transformer pour réduire la carte électronique à un petit carré. Ensuite, nous placerons la petite carte électronique sur la carte électronique correspondante qui se trouve sur l'étagère. Utilisez le curseur Chronologie pour parcourir les 30 images de notre animation. Nous devrions voir la carte commencer sur l'étagère et l'agrandir en taille réelle. Une dernière touche sera de réduire l'opacité de la carte à 0% au début de l'animation. Maintenant, la carte commence invisible et agrandit en pleine taille et pleine opacité sur les 30 premières images.

Pour les 60 prochaines images (305 à 365), nous voulons que la carte électronique reste sur la scène et, fondamentalement, ne fasse rien. Cela donne au spectateur une chance de voir la carte électronique. Nous ajouterons également la bulle de texte pendant cette période. Ajoutez donc une image clé à l'image 365 pour "verrouiller" la carte virtuelle en place sur ces 60 images. Enfin, nous allons réduire l'opacité de la carte électronique pour la faire disparaître. Cela ne prendra que 10 images. Ajoutez une image clé à l'image 375 et réduisez l'opacité de la carte électronique à 0%. C'est toute l'animation de la première carte électronique. Nous pouvons maintenant ajouter l'animation correspondante pour la bulle de texte.

Cartes Pamela Gladding

Copyright 2018 Adobe Systems Incorporated. Tous les droits sont réservés. Copies d'écran des produits Adobe reproduites avec la permission d'Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst et Flash Paper Paper est / sont [une] marque [s] déposée (s) ou une marque [s] d'Adobe Systems Incorporated aux États-Unis et / ou dans d'autres pays.

Instructions Vidéo: Abattoir de bondy (Boutique en ligne) - Vidéo explicative animée (Mai 2024).