Kwik Page Turn Animation

• Avril 28, 2024

Pour les derniers tutoriels, nous avons travaillé sur le modèle de page pour notre application de livre Kwik. Nous avons une chose à ajouter au modèle, qui est l'animation linéaire qui émule un tour de page.

Nous souhaitons que cette animation soit lue immédiatement lors du chargement de la page. Nous avons déjà le graphique de l'animation sur le calque kwkpgTurn en page1. Cette couche a également été définie en tant qu'actif partagé afin qu'elle fonctionne dans l'application du livre.

Animation linéaire

À ce stade, nous allons créer une animation très simple et utiliser la plupart des paramètres par défaut. Mais nous en apprendrons beaucoup sur les animations linéaires à mesure que nous en ajouterons beaucoup au livre.

Une animation linéaire déplace un objet d'un point de l'écran à un autre. Par conséquent, les principaux paramètres d'une animation linéaire sont les points de début et de fin. Kwik définira automatiquement le point de départ de l'animation comme la position actuelle de l'objet sur le calque. Nous devrons définir le point final de l'animation.

Nous définirons également la durée de l'animation en secondes, car cela déterminera la vitesse de déplacement de l'objet. Enfin, nous allons configurer l'animation pour qu'elle démarre au chargement de la page.

Page Turn Animation

1. Dans la section Page / Composants du panneau Kwik, sélectionnez page1. Vous devriez voir "@ page1" en haut de la section.
   
   
2. Clique sur le Passez à l'icône Affichage des composants pour voir votre liste de composants déjà ajoutés à cette page.
   
   
3. Sélectionnez le calque kwkpgTurn dans le panneau Calques.
   
   
4. Dans la barre des catégories, cliquez sur le Icône d'animations.
   
   
5. Clique sur le Icône d'animation linéaire (première icône de la première rangée d'outils).
   
   
6. Dans la boîte de dialogue Animation linéaire, renommez l'animation "pgTurn".
   
   
7. Couche kwkpgTurn: Ceci indique à Kwik d'utiliser le graphique sur la couche kwkpgTurn pour l'animation. Gardez cette sélection
   
   

Dans la section Propriétés, Kwik nous montre les positions X et Y de l'objet sur le calque kwkpgTurn ainsi que la largeur et la hauteur de l'objet graphique. Parce que nous voulons déplacer le graphique entier hors de l'écran, nous devrons le déplacer au moins le même nombre de pixels que la largeur du graphique (732 px). Déplaçons-le 732 pixels vers la gauche. Parce que la position X actuelle est 0. Cela se traduira par un nombre négatif pour la position finale. Nous ne voulons pas déplacer l'objet verticalement, nous conserverons donc la position Y définie sur 0. Cela entraînera le déplacement horizontal de l'objet uniquement.

8. Position finale:
   x -732
   y 0
   
   
9. Position de fin aléatoire: nous n'utiliserons pas cette fonctionnalité, alors laissez-la définie sur les valeurs par défaut.
   
   
10. Durée: Nous voulons que le graphique se déplace très rapidement pour donner l'effet de retournement. Définissons donc ce délai sur 1 seconde et 0,25 seconde.
    
    
11. Cochez la case En pause une fois terminé.
    
    
12. Boucle: définissez cette option sur l heure.
    
    
13. Commence: définissez ce paramètre sur Au début de la page.
    
    
14. Cliquez sur Créer.
    
    
15. Vous devriez voir que l'animation pgTurn a été ajoutée à la liste des composants de cette page.
    
    

C'est le bon moment pour tester le projet. Cliquez sur le bouton Publier dans le panneau Kwik. Testez les boutons de navigation et l'animation de changement de page.

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.

Instructions Vidéo: SKETCHBOOK TOUR 2019! (Avril 2024).