zomm hd

Le composant Zoom HD permet de zoomer dans une image pour en afficher les moindres détails.Concrètement, PandaSuite retravaille l’image pour pouvoir, à chaque niveau de zoom, vous proposer l’image correspondante en très bonne qualité (ex. Google Maps). Pour cela, pensez à bien utiliser des images en grande résolution.

Cliquez sur ce composant et insérez-y l’image de votre choix en la glissant-déposant à partir de Médias.

Dans la fenêtre Propriétés, vous pouvez paramétrer les quatre caractéristiques suivantes :

  • Editer le zoom HD : pour créer des marqueurs, c’est-à-dire marquer des niveaux de zoom spécifiques auxquels vous pourrez ensuite associer des actions particulières (voir l’article Comprendre les marqueurs(accessible également au double-clic sur le composant)
  • Interaction utilisateur : cette option permet à l’utilisateur de bénéficier des fonctionnalités du composant (ici, de zoomer sur l’image). Par défaut, cette option est toujours cochée. En décochant cette option, l’utilisateur aura l’impression d’avoir accès à une simple image.

  • Changer la source : vous permet de remplacer votre image par une autre, tout en conservant les propriétés que vous avez précédemment définies au sein de ce composant

  • Zone par défaut : pour sélectionner la zone qui sera affichée au chargement de l’écran (sur la base des marqueurs prédéfinis). Si vous ne définissez rien et que vous retournez sur cet écran, votre écran conservera la dernière zone affichée.

Exemple : Créer une image à zoomer et un bouton permettant de zoomer sur un détail de l'image.

  1. Insérez le composant Zoom HD et glissez dedans une image en haute résolution.
  2. Dans la fenêtre Propriétés, cliquez sur EDITER LE ZOOM HD pour accéder à l'édition des marqueurs :

             -Dézoomez l'image au maximum en utilisant le curseur et la souris. Dans la fenêtre à gauche, ajoutez le 1er marqueur en cliquant sur + AJOUTER ZONE.

             -Cliquez sur la punaise pour le définir comme marqueur par défaut : il sera toujours affiché au chargement de mon image.

             -Zoomer ensuite dans l'image jusqu'au détail et ajoutez le 2ème marqueur de la même façon.

  3. Pour créer le bouton, insérez une forme carrée et par dessus une zone de texte dans laquelle vous écrivez : “Cliquez pour zoomer”.
  4. Pour créer les interactivités, sélectionnez la forme et cliquez sur Interactivités. Sélectionnez le déclencheur Simple Tap et l’action Agir sur un composant. Sélectionnez le Zoom HD lorsque vous êtes dans le mode orange et dans la liste, l’action Changer zone et choisissez le marqueur représentant le zoom sur le détail.
  5. A vous de tester !

C’est une bonne base pour vous amuser ! À détourner bien sûr :)

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 1 sur 2

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !