Ajouter des boutons au modèle de page Kwik Book App


Dans notre exemple de modèle de page d'application de livre, nous utilisons des boutons sans roulement. Lors de l'ajout de boutons à votre projet Kwik, nous avons placé chaque bouton sur son propre calque, vous donnant 3 calques pour 3 boutons. Définissons les actions de ces boutons qui indiquent à l'application quelle page afficher lorsque vous cliquez sur le bouton. Nous allons commencer par le bouton Retour. Lorsque nous "programmons" le bouton Précédent, Kwik nous demandera de choisir le calque à utiliser pour les deux états du bouton de survol, Par défaut et Plus. Dans notre exemple, nous utiliserons la couche kwkbackbtn pour les deux états.

Ouvrez votre projet dans Photoshop et sélectionnez la page 1 dans la liste des pages du panneau Kwik. Dans la section Page / Composants du panneau Kwik, vous devriez voir "@ page1" en haut de la section.

  1. Sélectionnez le calque contenant le graphique du bouton État par défaut (kwkbackbtn).

  2. Sélectionnez le Icône d'interactions dans la ligne Catégorie.

  3. Sélectionnez le Outil Ajouter un bouton dans la ligne suivante pour ouvrir la boîte de dialogue.

  4. Kwik génère un nom pour le bouton mais nous renommerons ce bouton "back_pg".

  5. État par défaut: Layer kwkbackbtn

    Le graphique sur la couche kwkbackbtn sera l'état par défaut de notre bouton.

  6. Over State: Layer kwkbackbtn

    Le graphique sur la couche kwkbackbtn sera l'état Over pour notre bouton.

Dans la section Propriétés et le panneau Interactions de la boîte de dialogue, nous avons plusieurs catégories. Cliquez sur la flèche pour développer la liste des catégories communes.

  1. L'action de ce bouton sera d'aller sur une autre page. Par conséquent, notre meilleur choix est d'utiliser l'option Aller à la page.

    Lorsque vous sélectionnez cette option dans la liste, nous obtenons une petite boîte de dialogue contextuelle. Dans la boîte de dialogue Aller à la page, nous avons plusieurs options.

  2. Transition de page: Nous avons plusieurs choix dans la liste déroulante. Étant donné que nous créons notre propre animation de changement de page, choisissons Aucun dans cette liste. Si vous ne souhaitez pas utiliser l'animation de changement de page, l'option Over from Right est un bon choix.

  3. Attendez: nous avons la possibilité de retarder le passage à la page suivante. Conservez la valeur par défaut de 0 seconde.

  4. Sélectionner une page: nous ne voulons pas envoyer le lecteur à un numéro de page spécifique. Nous voulons simplement passer à la page précédente. Nous utiliserons l'option Précédent (auto).

  5. Cliquez sur Créer pour revenir à la boîte de dialogue Ajouter un bouton.

    Maintenant, vous verrez l'action Aller à la page répertoriée dans le panneau Actions.

  6. Cliquez sur Créer pour finaliser le bouton.

Nous pouvons confirmer que notre bouton a été ajouté à la page en sélectionnant Passez à l'icône Affichage des composants (au-dessus de la liste des pages). Là, vous verrez que nous avons un bouton, nommé back_pg, ajouté à notre page. Vous pouvez dire que nous avons ajouté une action de bouton par l'icône à gauche du nom back_pg. L'icône ressemble à l'icône Ajouter un bouton dans la barre d'outils.

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.

Full JavaFx Programming Course | JavaFx Tutorial for Beginners | Learn JavaFx (Janvier 2022)



Tags Article: Ajouter des boutons au modèle de page Kwik Book App, Digital Art and Design, Kwik 2 tutoriels livre boutons et modèle d'application