Animation de chemin Kwik 2 pour un clip ou un sprite

• Mai 18, 2024

Nous pouvons maintenant créer l'animation du chemin. La différence entre une animation linéaire et une trajectoire est la ligne. Dans les deux animations, l'objet se déplace le long d'une ligne désignée. Comme nous l'avons découvert avec l'animation de retournement de page, une animation linéaire déplace l'objet le long d'une ligne droite. Dans cette animation de chemin, nous allons dessiner un chemin le long d'une ligne courbe pour l'objet à suivre. Notre première étape consiste à dessiner le chemin avec l'outil Photoshop Pen.

1. Avec le calque contenant l'objet (le clip d'animation volée) sélectionné, cliquez sur la mouche avec l'outil Plume. Nous placerons le deuxième point du chemin à environ 3 longueurs de vol au-dessus du haut de la page. Cliquez sur ce deuxième point et faites glisser votre souris vers le haut et vers la droite pour faire une ligne courbe.
   
   
2. Dans le panneau Chemins (regroupés avec le panneau Calques), renommez le chemin de travail en "flypath1".
   
   Nous pouvons maintenant dire à Kwik d'utiliser ce chemin pour notre animation de chemin.
   
   
3. Avec le calque fly_pg8 toujours sélectionné, cliquez sur le Icône d'animations dans la barre des catégories.
   
   
4. Clique sur le Icône d'animation de chemin pour ouvrir la boîte de dialogue.
   
   
5. Nommez cette animation "fly1Ani".
   
   
6. Cette animation sera pour le calque fly_pg8.
   
   
7. Chemin: choisissez le chemin flypath1 dans la liste déroulante.
   
   Au fur et à mesure que la mouche se déplace le long de la courbe, nous voulons qu'il tourne légèrement pour que sa tête continue de pointer dans la direction du chemin.
   
   
8. Cochez la case Rotation automatique et définissez la valeur de l'angle de rotation à seulement -10 degrés.
   
   
9. Les mouches se déplacent rapidement. Fixons la durée à 1 ou 0,5 seconde.
   
   
10. Nous voulons que la mouche reste hors de la page après l'animation. Cochez la case Pause une fois terminée et définissez la boucle sur 1 heure. Laissez l'inverse à la fin décochez.
    
    
11. Ajoutons un peu de réalisme en faisant hésiter la mouche lorsqu'elle clique puis s'envole. Nous pouvons le faire en définissant l'assouplissement sur inOutExpo.
    
    
12. Réglez le point d'ancrage sur TopCenter de sorte que son corps tourne plus que sa tête.
    
    
13. Nous ne voulons pas que la mouche bouge tant que le bouton n'est pas cliqué. Définissez la demande d'attente.
    
    
14. Ne cochez pas la case Retour à la position de départ.
    
    
15. Cliquez sur Créer.
    
    

Maintenant, nous pouvons ajouter le bouton. Toujours sur la couche fly_pg8.

1. Clique le Icône d'interactions dans la barre des catégories.
   
   
2. Clique le Icône Ajouter un bouton pour ouvrir la boîte de dialogue.
   
   
3. Nommez le bouton "fly1btn".
   
   
4. Nous voulons que le calque fly_pg8 soit à la fois pour les états des boutons Par défaut et Over.
   
   
5. Dans la section Interactions, développez la section Animation.
   
   
6. Choisissez Lire l'animation. Sélectionnez fly1Ani dans la liste déroulante.
   
   
7. Développez la section Audio.
   
   Choisissez Arrêter l'audio et sélectionnez le premier audio dans la liste déroulante.
   
   Toujours dans la section Audio, choisissez Lire l'audio et sélectionnez le deuxième fichier audio dans la liste déroulante.
   
   
8. Cliquez sur Créer.
   
   

Nous pouvons maintenant tester notre séquence interactive. Lorsque la page se charge, la mouche doit battre des ailes sur la page avec le bruit de fond en continu. Lorsque nous cliquons sur la page, nous devrions entendre un son de vol plus fort et il se déplace hors de la page.

Enregistrez les modifications sur la page 8.

Clique sur le Icône Exporter la page actuelle uniquement et le bouton Publier pour tester votre animation.

Accédez à votre dossier LearnKwik et faites une copie de sauvegarde du dossier de projet de modèle. Renommez le dossier de sauvegarde en ajoutant la date actuelle à la fin. (TemplateMM-DD-YY).

← Retour

Ces didacticiels sont destinés à l'ancienne version de Kwik 2 et peuvent ne pas être très utiles lors de l'utilisation de Kwik 3 et supérieur. Si vous rencontrez des problèmes, veuillez utiliser le forum Kwik.

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.
Le produit Kwik, le logo Kwik et Kwiksher sont des propriétés de Kwiksher.com - Copyright 2011. Captures d'écran utilisées avec permission.

Instructions Vidéo: Alan Walker - The Spectre (Mai 2024).