ZONE VIDÉO

Zone Vidéo

Zone qui permet d’installer dans votre vue graphique une vidéo :

Un clic sur le bouton “Zone Vidéo” fait apparaître en haut du gabarit un rectangle correspondant à cette zone :

En cliquant sur ce rectangle, il est sélectionné (rectangle rouge avec points rouges) et apparaissent sur la partie droite l’ensemble des paramètres modifiables pour cette zone :

Les paramètres de la zone Vidéo

Facultatif mais pour une meilleure organisation, il est conseillé de définir des noms à chaque zone créée.

2 "Position"

“X” et “Y” sont les coordonnées en pixels de l’angle en haut à gauche de cette zone (ici “0” et “0”).

“Largeur” et “Hauteur” sont les dimensions en pixels de cette zone (ici “375” et “200”).

Plusieurs méthodes sont possibles pour les modifier :

Soit directement sur le rectangle rouge de la zone, un clic dessus sans relâcher (n’importe où) permet de déplacer le rectangle et donc modifier les coordonnées “X” et “Y”;

Soit sur un des points rouges permettant de modifier ses dimensions;

Soit double clic sur la valeur à modifier (partie droite) et saisir directement la nouvelle valeur (attention de ne pas oublier d’appuyer sur la touche “Entrée”);

Soit un clic sans relâcher dans le carré où il y a la valeur à modifier (partie droite) et on monte ou descend la souris :

3 "Paramètres vidéo"

Ici sont regroupés les paramètres vidéo de cette zone :

 

 “Lien” :permet de télécharger ou de saisir l’URL de la vidéo qui sera appelé au moment du clic. Deux choix sont possibles :

    • Lien avec une URL de Youtube en la saisissant dans le champ “Ou entrez un lien ci-dessous”
    • Lien avec une vidéo que vous téléchargez en passant par “Déposez le média ou cliquez ici”
     
Attention : les vidéos ont généralement une taille non négligeable. Cette taille est à déduire de la taille totale allouée à votre application, information visible dans le “Tableau de bord” de votre application. Par défaut la taille de départ est de 500Mo.
 
 
  • “Plein écran” : au lancement de la vidéo, elle se visualisera en plein écran
 
  • “En boucle” : permet de relancer automatiquement la vidéo lorsqu’elle est finit
 
  • “Contrôles” : ajoute la série de boutons de contrôle, comme la lecture, pause, etc.
 
  • “Progression” : fait apparaître la barre de progression de la vidéo
 
  • “Son” : pour activer ou non le son de la vidéo
 

4 "Alignement"

Ce sont des boutons pratiques permettant de positionner en un clic la zone à un endroit précis comme :

  • Bord gauche (du gabarit)
  • Bord droit (du gabarit)
  • Bord haut (du gabarit)
  • Bord bas (du gabarit)
  • Centré horizontalement (en fonction de la résolution du gabarit)
  • Centré verticalement (en fonction de la résolution du gabarit)

5 "Profondeur"

Si des zones se chevauchent, ces boutons permettent de mettre en avant ou de reculer une zone par rapport à une autre zone :

  •  Envoyer au fond (ou Ctrl + Shift + Down)
  •  Envoyer en arrière (ou Ctrl + Down)
  •  Envoyer en avant (ou Ctrl + Up)
  •  Mettre au premier plan (ou Ctrl + Shift + Up)

6 "Elément"

Ici sont regroupés divers paramètres de cette zone :

  •  “Couleur” : pour choisir une couleur de fond. Attention : la couleur de fond ne se verra pas si par exemple vous installez une image de type JPG, seule l’image se verra. Si par contre votre image est de type PNG et à du “transparent”, alors le fond apparaîtra. En général ce paramètre est utilisé avec une saisie de texte (voir 6 “Texte”).
 
  • “Image” : pour choisir l’image à installer dans cette zone. Vous pouvez déposer l’image à l’endroit indiqué. Pour info : si la largeur et la hauteur de votre image ne correspondent pas à la largeur et la hauteur de cette “zone générique”, alors l’image sera toujours entière (non déformée) et aura automatiquement la taille maximale qui pourrait être insérée dans cette zone, sans déformer votre image.
 
 
 
  • “Format d’image” : Permet, si besoin, de “forcer” le résultat visuel.
 
  •  “Lien” : permet de sélectionner le lien qui sera appelé au moment du clic. Plusieurs choix sont possibles :
    • Lien avec un “Contenu de l’application”, choisir l’élément à lancer
    • Lien avec une “Page Web dans l’application”
    • Lien avec le “Navigateur Web”
 
  • “Animation au clic” : petite animation au moment du clic, l’image se réduit puis redevient en taille normale.
 
  • “Rotation” : permet d’incliner cette zone. Saisir directement une valeur (et appuyer sur la touche “Entrée”) ou cliquer dessus sans relâcher le clic puis montez ou descendez avec la souris.
 
  • “Opacité” : ajoute à l’image un effet d’opacité (type filigrane). Saisir directement une valeur (et appuyer sur la touche “Entrée”) ou cliquer dessus sans relâcher le clic puis montez ou descendez avec la souris.
 
  • “Arrondie” : n’arrondit que la couleur (de fond) et pas votre image.
 
  • “Bordure” : fait apparaître une bordure dont la largeur en pixels est celle indiquée.
 
  • “Bordure” (couleur) : pour sélectionner une couleur de la bordure.
 

7 "Texte"

Il est possible d’ajouter du texte dans cette zone.

  • Texte : Champ de saisi du texte
  • Police : Sélection de la police des caractères
  • Taille : Sélection de la taille des caractères
  • Couleur : Sélection de la couleur des caractères
  • Position : Permet de positionner l’ensemble du texte en fonction de la taille de la zone générique
  • Ombre : Ajoute une ombre aux caractères
  • Ombre : Sélection de la couleur de l’ombre
Astuce : si vous utilisez une police de caractères précise, alors nous vous conseillons de saisir le texte avec votre police de caractères préférée dans Photoshop par exemple. Vous utiliserez cette “image” (votre texte enregistré sous photoshop en format d’image) à insérer dans votre zone générique en tant qu’image.
Cette page en PDF :