PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Champ d'une page
  • Déplacement d'une image (ou de tout type de champ)
  • Effet d'apparition d'une image par clipping ou fondu
  • Effet mouvement automatique d'image
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Présentation

Champ d'une page

Les sites Web proposent de plus en plus d'effets de transition entre les éléments :
  • images se chargeant progressivement dans la page.
  • déplacement d'images.
  • effet d'apparition d'image par recouvrement.
Versions 17 et supérieures
Il est également possible de réaliser un effet "Mouvement automatique d'image". Cet effet simule le déplacement léger d'une caméra sur une image sans rien programmer.
Nouveauté 17
Il est également possible de réaliser un effet "Mouvement automatique d'image". Cet effet simule le déplacement léger d'une caméra sur une image sans rien programmer.
Il est également possible de réaliser un effet "Mouvement automatique d'image". Cet effet simule le déplacement léger d'une caméra sur une image sans rien programmer.
WEBDEV permet d'intégrer ces solutions facilement dans vos sites Web.
Déplacement d'une image (ou de tout type de champ)
WEBDEV permet de donner très simplement un effet graphique lors du déplacement d'un champ. Il suffit pour cela d'utiliser la fonction AnimationJoueSurPropriétéChamp. Cette fonction, utilisée en code navigateur, permet de définir l'animation utilisée lors de la modification d'une propriété d'un champ.
Ainsi, pour déplacer un champ, il suffit d'utiliser les propriétés ..X et ..Y du champ. Par exemple :
AnimationJoueSurPropriétéChamp(IMG_Image1, "X" ,0, 200, 50000, animDécélération)
AnimationJoueSurPropriétéChamp(IMG_Image1, "Y", 0, 200, 50000, animDécélération)
Il est également possible d'utiliser cette fonction avec d'autres propriétés pour créer des effets spéciaux : ..Largeur, ..Hauteur, ..Couleur, ..CouleurFond, ..Opacité, ...
Effet d'apparition d'une image par clipping ou fondu
WEBDEV permet de donner très simplement un effet d'apparition sur une image. Cette image peut être présente dans :
  • un champ Image,
  • un champ Image cliquable.
  • un champ Vignette.
La méthode à utiliser est la suivante :
  1. Affichez l'onglet "Général" de la description du champ (champ Image, Image cliquable ou Vignette).
  2. Dans le champ "Transition", sélectionnez le mode de transition voulu : balayage, recouvrement, découvrement, ...Dans le champ "Transition / Effet", sélectionnez le mode de transition voulu : balayage, recouvrement, découvrement, ...
    Versions 17 et supérieures
    Le mode de transition "Aléatoire" permet d’enchaîner aléatoirement les modes de transition sur un même champ.
    Nouveauté 17
    Le mode de transition "Aléatoire" permet d’enchaîner aléatoirement les modes de transition sur un même champ.
    Le mode de transition "Aléatoire" permet d’enchaîner aléatoirement les modes de transition sur un même champ.
  3. Par programmation, changez l'image associée au champ. Par exemple, en code navigateur :
    IMG_Image1..Valeur = "images\hotel\alize.jpg"
  4. En exécution, la nouvelle image remplace l'image présente dans le champ avec l'effet voulu.
Effet mouvement automatique d'image
Versions 17 et supérieures
WEBDEV permet de donner très simplement un effet de mouvement automatique sur une image.
La méthode à utiliser est la suivante :
  1. Affichez l'onglet "Général" de la description du champ (champ Image, Image cliquable ou Vignette).
  2. Dans le champ "Transition / Effet", sélectionnez le mode de transition "Mouvement panoramique".
  3. En exécution, l'image bouge toute seule sans aucune programmation.
Cet effet simule le déplacement léger d'une caméra sur une image. Trois effets sont combinés :
  • balayage dans des directions aléatoires,
  • zoom léger,
  • fondu pour l'enchaînement des effets.
Pour utiliser cet effet sur un ensemble d'images, il est nécessaire de combiner cette option avec le défilement automatique d'images.
  1. Affichez l'onglet "Général" de la description du champ (champ Image, Image cliquable ou Vignette).
  2. Dans l'onglet "Général", sélectionnez le type de l'image :
    • Image dynamique.
    • Image depuis une base de données : chemin.
      Ces deux types d'images proposent de gérer le défilement automatique. La zone concernant les transitions et le défilement automatique est dégrisée si un de ces deux types d'images est sélectionné.
  3. Dans le champ "Transition / Effet", sélectionnez le mode de transition "Mouvement panoramique".
  4. Cochez l'option "Activer le défilement automatique d'images". Selon le résultat voulu, cochez également les options "Démarrer automatiquement le défilement", "Parcourir automatiquement le répertoire de l'image", "Trier le contenu du défilement". Pour plus de détails, consultez défilement automatique d'images.
  5. Validez.
Attention : Le mouvement de l'image est optimisé pour les navigateurs supportant HTML 5 (Chrome, Firefox, ...). Dans le cas contraire, le déplacement peut être légèrement saccadé.
Nouveauté 17
WEBDEV permet de donner très simplement un effet de mouvement automatique sur une image.
La méthode à utiliser est la suivante :
  1. Affichez l'onglet "Général" de la description du champ (champ Image, Image cliquable ou Vignette).
  2. Dans le champ "Transition / Effet", sélectionnez le mode de transition "Mouvement panoramique".
  3. En exécution, l'image bouge toute seule sans aucune programmation.
Cet effet simule le déplacement léger d'une caméra sur une image. Trois effets sont combinés :
  • balayage dans des directions aléatoires,
  • zoom léger,
  • fondu pour l'enchaînement des effets.
Pour utiliser cet effet sur un ensemble d'images, il est nécessaire de combiner cette option avec le défilement automatique d'images.
  1. Affichez l'onglet "Général" de la description du champ (champ Image, Image cliquable ou Vignette).
  2. Dans l'onglet "Général", sélectionnez le type de l'image :
    • Image dynamique.
    • Image depuis une base de données : chemin.
      Ces deux types d'images proposent de gérer le défilement automatique. La zone concernant les transitions et le défilement automatique est dégrisée si un de ces deux types d'images est sélectionné.
  3. Dans le champ "Transition / Effet", sélectionnez le mode de transition "Mouvement panoramique".
  4. Cochez l'option "Activer le défilement automatique d'images". Selon le résultat voulu, cochez également les options "Démarrer automatiquement le défilement", "Parcourir automatiquement le répertoire de l'image", "Trier le contenu du défilement". Pour plus de détails, consultez défilement automatique d'images.
  5. Validez.
Attention : Le mouvement de l'image est optimisé pour les navigateurs supportant HTML 5 (Chrome, Firefox, ...). Dans le cas contraire, le déplacement peut être légèrement saccadé.
WEBDEV permet de donner très simplement un effet de mouvement automatique sur une image.
La méthode à utiliser est la suivante :
  1. Affichez l'onglet "Général" de la description du champ (champ Image, Image cliquable ou Vignette).
  2. Dans le champ "Transition / Effet", sélectionnez le mode de transition "Mouvement panoramique".
  3. En exécution, l'image bouge toute seule sans aucune programmation.
Cet effet simule le déplacement léger d'une caméra sur une image. Trois effets sont combinés :
  • balayage dans des directions aléatoires,
  • zoom léger,
  • fondu pour l'enchaînement des effets.
Pour utiliser cet effet sur un ensemble d'images, il est nécessaire de combiner cette option avec le défilement automatique d'images.
  1. Affichez l'onglet "Général" de la description du champ (champ Image, Image cliquable ou Vignette).
  2. Dans l'onglet "Général", sélectionnez le type de l'image :
    • Image dynamique.
    • Image depuis une base de données : chemin.
      Ces deux types d'images proposent de gérer le défilement automatique. La zone concernant les transitions et le défilement automatique est dégrisée si un de ces deux types d'images est sélectionné.
  3. Dans le champ "Transition / Effet", sélectionnez le mode de transition "Mouvement panoramique".
  4. Cochez l'option "Activer le défilement automatique d'images". Selon le résultat voulu, cochez également les options "Démarrer automatiquement le défilement", "Parcourir automatiquement le répertoire de l'image", "Trier le contenu du défilement". Pour plus de détails, consultez défilement automatique d'images.
  5. Validez.
Attention : Le mouvement de l'image est optimisé pour les navigateurs supportant HTML 5 (Chrome, Firefox, ...). Dans le cas contraire, le déplacement peut être légèrement saccadé.
Version minimum requise
  • Version 15
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire