Fin du Blinkie avec Flash Motion Tweens

• Mai 8, 2024

La dernière fois que nous avons travaillé sur l'animation Flash blinkie, nous venions de terminer les effets de texte. Le dernier effet de texte survenu dans l'animation a été l'apparition et la disparition du nom du site Web «J3 Designs». Il disparaît de la scène à gauche avec un effet de transition de la chronologie (transition 3 sur la chronologie). Il y avait une raison à cela et vous êtes sur le point de découvrir quelle était cette raison.

N'oubliez pas que, dans le cadre des détails de conception, nous avons ces deux coccinelles. Eh bien, il est temps de les mettre au travail. Lorsque nous avons créé les calques de notre projet blinkie, nous avons ajouté la coccinelle dorée au calque Bug 1. Maintenant, la première chose que nous ferons est d'ajouter la deuxième coccinelle à un nouveau calque que nous appellerons Bug 2. Nous voulons que cette coccinelle rouge apparaisse sous le camée. Par conséquent, nous devrons placer la nouvelle couche sous la couche Détails statiques.

Ouvrez blinkie2.fla dans Flash CS3 et mettons-nous au travail. Nous voulons que la coccinelle commence à se déplacer sous le camée lorsque le nom du site Web commence à disparaître. Nous voulons que le texte disparaisse à cause de la coccinelle. Nous allons donc ajouter cette nouvelle coccinelle sur le cadre 110, c'est-à-dire lorsque le texte commence à disparaître.

1. Cliquez sur Fichier - Importer - Importer dans la bibliothèque pour ouvrir la boîte de dialogue Importer et ajouter la coccinelle rouge à notre bibliothèque.
   
   
2. Ajoutez un nouveau calque sous le calque Détails statiques et nommez-le «Bug 2». Ajoutez une image clé (Insertion - Chronologie - Image clé) à l'image 110. Faites glisser la coccinelle rouge de la bibliothèque sous le camée et hors de vue pour l'instant.
   
   Nous voulons que cette coccinelle se déplace vers la gauche jusqu'à ce qu'elle disparaisse de la scène au fur et à mesure que le texte disparaît. Donc, nous voulons que la coccinelle soit complètement à gauche et hors de la scène au moment où nous atteignons le cadre 160.
   
   
3. Cliquez sur l'image 160 sur le calque Bug 2, ajoutez une image clé et faites glisser la coccinelle rouge vers la gauche et tout le long de la scène. Cliquez avec le bouton droit entre les images 110 et 160 et choisissez Créer une interpolation de mouvement dans le menu contextuel.
   
   Testez le film et vous devriez voir le texte disparaître lorsque la coccinelle se déplace dessus. Une fois la coccinelle rouge hors de la scène, nous déplacerons la coccinelle dorée (couche Bug 1) vers le haut et vers la droite jusqu'à ce qu'elle disparaisse également de la scène.
   
   
4. Cliquez sur l'image 160 sur le calque Bug 1 et ajoutez une image clé pour le point de départ de l'animation de la coccinelle dorée. Utilisons 20 cadres pour déplacer la coccinelle dorée hors de la scène. Cliquez sur l'image 180 et ajoutez une image clé. Déplacez la coccinelle d'or vers le haut et hors de la scène.
   
   
5. Cliquez avec le bouton droit entre les images 160 et 180 et créez une interpolation de mouvement. Cliquez sur l'image 180 et ajoutez une image aux couches Détails statiques et Arrière-plan pour rendre à nouveau visible le contenu de ces couches.
   
   Enfin, nous voulons ramener la coccinelle en or à sa position d'origine en bas à gauche de la scène. Mais nous ne voulons pas que le bug descende du haut de la scène. Nous voulons qu'il monte de sous la scène. Nous devons donc d'abord placer la coccinelle d'or à gauche et sous la scène. Ensuite, tout ce que nous devons faire est de le déplacer vers le haut dans sa position d'origine afin que l'animation puisse se répéter. Nous utiliserons 10 cadres pour remettre la coccinelle en place.
   
   
6. Retournez à l'image 1 du calque Bug 1 et sélectionnez la coccinelle dorée. Cliquez sur Edition - Copier pour enregistrer la position d'origine de la coccinelle dorée.
   
   
7. Toujours sur le calque Bug 1, ajoutez une image clé à l'image 190. Cliquez sur Modifier - Effacer pour supprimer la coccinelle dorée qui s'y trouve déjà. Ensuite, cliquez sur Edition - Coller sur place pour remettre la coccinelle en or à sa position d'origine.
   
   
8. Toujours sur la couche Bug 1, cliquez sur l'image 181 et ajoutez une image clé. Ensuite, retirez la coccinelle en or qui est déjà là. Remettez la coccinelle en or dans sa position d'origine sur ce cadre (Coller en place). Ensuite, faites glisser cette coccinelle sous la scène. Ajoutez une interpolation de mouvement entre les images 181 et 190, qui déplacera cette coccinelle sur la scène.
   
   
9. Cliquez sur l'image 190 et ajoutez une image aux couches Détails statiques et Arrière-plan pour rendre le contenu de ces couches à nouveau visible.
   
   

Testez et enregistrez le blinkie sous blinkie3.fla. Ensuite, publiez votre blinkie sous forme de fichier .swf et profitez de votre nouveau blinkie.

J3 Designs

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: Polymer Developer Summit 2016 - Live Stream Day 2 (Mai 2024).