des ordinateurs

Widget de rotation dans Kwik 2

Mars 2021

Widget de rotation dans Kwik 2


Kwik possède plusieurs widgets, qui sont des animations préconfigurées que vous pouvez appliquer à un calque, un groupe ou une page dans votre application de livre de contes. À la page 10 de notre exemple d'application, nous avons quatre chauves-souris suspendues à un arbre. Ce serait bien d'animer ces chauves-souris pour qu'elles se balancent de l'arbre au lieu de simplement s'y accrocher.

Nous utiliserons le widget de rotation Kwik pour faire pivoter les chauves-souris. Si nous avions toutes les chauves-souris sur la même couche, nous ne pourrions les faire tourner qu'à l'unisson. Cependant, ce serait bien si nous pouvions faire balancer chaque chauve-souris individuellement. Nous pouvons le faire en mettant chacun sur une couche distincte.

Comme vous pouvez le voir sur la maquette de page10 psd, nous avons quatre chauves-souris de tailles différentes sur quatre couches nommées bat1_pg10 - bat4_pg10. Animons bat1.

Ouvrez votre projet dans Photoshop.

  1. Sélectionnez la page 10 dans la liste des pages du panneau Kwik. Vous devriez voir "@ page10" en haut de la section Page / Composants.

  2. Ajoutez un nouveau calque au-dessus du calque inférieur et nommez-le "bat1_pg10".

    Ce calque n'a pas d'objet partagé et ne sera pas exporté en tant qu'image jpg. Par conséquent, nous n'avons pas besoin de définir de propriétés de calque.

  3. Ouvrez le psd de la maquette dans Photoshop et copiez le premier graphique de chauve-souris.

  4. Collez la chauve-souris sur le nouveau calque bat1_pg10.

  5. À l'aide de l'outil Transformation libre de Photoshop, faites pivoter la chauve-souris aussi loin vers la droite que vous le souhaitez. Ce faisant, notez le nombre de degrés dans la zone Définir la rotation. Dans notre exemple d'application, nous faisons pivoter la chauve-souris vers la droite de -15 degrés. Ce sera la position de départ de notre batte oscillante.

    Lorsque la chauve-souris oscille, nous avons une rotation totale de 30 degrés. Il reculera de 15 degrés vers la gauche, puis continuera de se balancer de 15 degrés supplémentaires vers la gauche.

    Maintenant, nous pouvons animer la chauve-souris.

  6. Avec le calque bat1_pg10 toujours sélectionné, cliquez sur le Icône d'animations dans la barre des catégories.

  7. Clique le Outil Widget de rotation dans le Toolset.

  8. Dans la boîte de dialogue Widget de rotation, renommez l'animation "rotBat1".

  9. Gardez le calque bat1_pg10 sélectionné.

  10. Comme nous l'avons mentionné ci-dessus, le degré total de rotation est de 30 degrés vers la gauche. Réglez la rotation sur 30.

  11. Anchor Point: Nous voulons que la chauve-souris se balance de ses pieds qui remettent de la branche d'arbre. Utilisez le menu déroulant pour définir le point d'ancrage au centre supérieur du graphique.

  12. Pour la batte 1, définissons la durée sur 1 seconde et 0 délai.

  13. Nous voulons que les chauves-souris continuent de se balancer tant que la page est visible. Nous allons donc définir l'animation en boucle pour toujours.

    À ce stade, la chauve-souris a complètement tourné vers la gauche. Nous ne voulons pas que la chauve-souris revienne à la position de départ. C'est mieux s'il se retourne. Nous pouvons le faire en disant à Kwik de lire l'animation à l'envers.

  14. Cochez la case Inverser à la fin pour que la chauve-souris revienne à la position de départ.

  15. Nous voulons que l'animation démarre lorsque la page se charge. Utilisons le paramètre Quand la page commence.

  16. Cliquez sur Créer pour ajouter l'animation à la page. Vous verrez qu'il a été ajouté à la liste des composants.

Nous pouvons créer une petite variété en utilisant une combinaison différente de degrés et de durée pour chaque chauve-souris.

  • bat2 - position de départ 20 degrés à gauche, position finale -40 à droite, durée 2 secondes
    Ces paramètres feront osciller bat2 de la gauche vers la droite de 40 degrés. En fixant la durée à 2 secondes, il se balancera à la même vitesse que la première chauve-souris mais dans la direction opposée.

  • bat3 - position de départ -10 à droite, position de fin 20 à gauche, durée 0,7 seconde
    Ceci est une chauve-souris plus petite, nous allons donc le configurer pour balancer une plus petite quantité de degrés. Il se balancera de droite à gauche. Il se balancera également plus rapidement en raison de sa taille et du réglage de la durée de 0,7 seconde.

  • bat4 - position de départ 10 à gauche, position finale -20 à droite, durée 1 seconde
    Cette chauve-souris est également une chauve-souris plus petite, nous avons donc fait son swing les mêmes 20 degrés que bat3 mais la durée est plus longue.

  • Enregistrez les modifications dans votre fichier psd Photoshop.

Une fois que vous avez ajouté un widget de rotation à chaque couche de chauves-souris, nous sommes prêts à prévisualiser notre page. Comme précédemment, nous n'avons besoin d'exporter que les graphiques de cette page.

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).

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.

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.

Joints in Fusion 360: A Comprehensive Tutorial! FF117 (Mars 2021)



Tags Article: Widget de rotation dans Kwik 2, Art numérique et design, Kwik 2 tutoriels widget de rotation d'application de livre de contes

Introduction - Kwik 2

Introduction - Kwik 2

des ordinateurs