Effets d'animations amplifiés sur des boutons Access

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Animations amplifiées

A l'occasion d'une astuce Access, nous avions appris à créer de légers effets d'animation en changeant la couleur des boutons au survol de la souris. Ici, nous souhaitons aller plus loin par le code VBA Access pour leur donner aussi un peu de hauteur, un peu de relief.



C'est ce qu'illustre l'exemple finalisé présenté par la capture. Au survol de la souris sur un bouton, en plus du changement de ses couleurs, un effet d'ombre portée lui est appliqué. Et nous allons le voir, c'est une fameuse astuce qui permet de produire ces effets, en toute simplicité.

Base de données Access à télécharger
Nous suggérons d'appuyer le développement sur un formulaire accueillant déjà des boutons.

• Télécharger le fichier compressé effets-boutons.rar en cliquant sur ce lien,
• Le décompresser dans le dossier de votre choix,
• Double cliquer sur le fichier résultant pour l'ouvrir dans Access,
• Cliquer sur le bouton Activer le contenu du bandeau de sécurité,
• Dans le volet de navigation, double cliquer sur le formulaire fQuestions pour l'ouvrir,

Si vous passez la souris au-dessus de l'un des boutons, vous remarquez qu'il change automatiquement de couleurs (texte et fond) pour indiquer qu'il est prêt à agir. Il s'agit des réglages que nous avons récupérés à partir de l'astuce que nous avons évoquée précédemment. Nous proposons de le constater.

• A gauche du ruban Acceuil, cliquer sur la flèche du bouton Affichage,
• Dans les propositions, choisir le mode Création,
• Sur le formulaire en conception, cliquer sur le bouton Exporter pour le sélectionner,
• Sur la droite de la fenêtre, activer l'onglet Format de sa feuille de propriétés,

Comme vous le constatez, ce sont les attributs Couleur sélectionnée par pointage et Couleur texte sélectionnée par pointage qui sont paramétrés pour ainsi faire varier l'apparence des boutons au passage de la souris. Par contre, l'effet de relief par l'illusion d'une ombre portée n'existe pas encore. En revanche, des "outils" sont déjà en place.



En effet, si vous déplacez l'un ou l'autre bouton, ou encore les deux, vous remarquez qu'ils sont doublés en arrière-plan avec une couleur sombre. Ces doublures obscures portent les mêmes noms respectifs avec en suffixe le chiffre 2. Nous les utiliserons comme repères pour effectuer les déplacements et les replacements sur les positions d'origine lorsque la souris quittera la zone d'influence. Bien sûr et si vous avez réalisé la manipulation, il convient de replacer les boutons sur leurs compères de manière à les masquer complètement.

La fonction d'animation
Nous devons commencer par créer la fonction devant réaliser ces effets de relief. Elle doit pouvoir être appelée au survol de chacun des boutons ou encore au survol du formulaire pour la réinitialisation sur les positions d'origine. Elle doit donc attendre trois paramètres, puisque nous allons la coder dans un module indépendant. Il s'agit du formulaire parent, du nom du contrôle survolé et du mode, soit de l'action à entreprendre : Déplacer ou Replacer ?

• Dans le volet de navigation sur la gauche, double cliquer sur l'élément Module1,

Ainsi, nous affichons sa feuille de code au centre de l'écran.

• Dans cette feuille de code, créer la fonction animer, comme suit :

Function animer(F As String, leBtn As String, mode As Byte)

End Function

Nous typons les deux premiers paramètres comme des textes (As String) puisque nous attendons le nom du formulaire et le nom du bouton à piloter sur ce dernier. Puis, nous typons le dernier argument comme un entier court (As Byte). C'est en effet un indicateur numérique qui nous permettra de savoir si le bouton cible, doit être déplacé ou replacé.

Le formulaire
Pour que le code VBA soit en mesure d'atteindre les contrôles du formulaire, nous devons représenter ce dernier par un objet précis.

• Dans les bornes de la fonction, ajouter la déclaration et l'affectation suivantes :

...
Dim leForm As Form

Set leForm = Forms(F)
...

Nous déclarons donc l'objet leForm que nous typons comme un formulaire (As Form). C'est ainsi que nous l'initialisons (Set) ensuite sur le formulaire dont le nom est passé en premier argument de la fonction (F), grâce à la collection Forms.

L'action à entreprendre
L'action à entreprendre sur le bouton passé en deuxième argument dépend de la valeur de l'indicateur passé en troisième paramètre. Nous devons donc tester cette information avec une instruction conditionnelle.

• A la suite du code, créer l'instruction conditionnelle suivante :

...
If mode = 1 Then

ElseIf mode = 0 Then

End If
...

Arbitrairement, nous décidons que la valeur 1 doit engager un déplacement tandis que la valeur 0 doit engager un replacement.

Déplacer le bouton
Pour obtenir l'effet de hauteur escompté, en même temps que nous devons déplacer le bouton à l'horizontale, nous devons le faire bouger à la verticale. Pour cela, il suffit d'influer sur les propriétés Left et Top du contrôle. Et pour optimiser le code, nous proposons d'énumérer les propriétés du bouton dans un bloc With.

• Dans la première branche de l'instruction conditionnelle, créer le bloc With suivant :

...
If mode = 1 Then
With leForm.Controls(leBtn)
.Left = leForm.Controls(leBtn & "2").Left - 150
.Top = leForm.Controls(leBtn & "2").Top - 150
.FontWeight = 700
End With
ElseIf mode = 0 Then
...

A l'horizontale, nous effectuons un décalage de 150 points vers la gauche (Left) par rapport à la position d'origine du bouton, qui est connue grâce à son jumeau (leBtn & "2"). A la verticale, nous réalisons un déplacement de 150 points vers le haut (Top), là aussi par rapport à la position d'origine du bouton. Puis, nous forçons le trait de la police grâce à la propriété FontWeight.

Replacer le bouton
Dans le cas contraire (ElseIf), il suffit simplement de recalibrer les propriétés sur celles qui n'ont pas bougé et qui sont renseignées par le jumeau du bouton désigné en deuxième paramètre de la fonction.

• Dans la seconde branche de l'instruction conditionnelle, créer le bloc With suivant :

...
ElseIf mode = 0 Then
With leForm.Controls(leBtn)
.Left = leForm.Controls(leBtn & "2").Left
.Top = leForm.Controls(leBtn & "2").Top
.FontWeight = 400
End With
End If
...

Nous réinitialisons donc les positions ainsi que le trait de police.

Déplacer et replacer
Il ne nous reste plus qu'à appeler cette fonction aux moments opportuns, soit au survol de chaque bouton, mais aussi au survol de la zone du formulaire. Les modes d'appel doivent naturellement être différents selon qu'il est question d'organiser un déplacement ou un repositionnement.

• Enregistrer les modifications (CTRL + S) et revenir sur le formulaire en conception (ALT + Tab),
• Cliquer sur le premier bouton (Exporter) pour le sélectionner,
• Activer l'onglet Evénement de sa feuille de propriétés,
• Cliquer sur le petit bouton associé à son événement Sur souris déplacée,
• Dans la boîte de dialogue, choisir le Générateur de code et valider par Ok,

Nous revenons dans l'éditeur VBA Access, entre les bornes de la procédure événementielle exporter_MouseMove qui est écrite dans la feuille de code du formulaire et non dans un module, comme c'est le cas pour notre fonction.

• Dans les bornes de cette procédure, ajouter la ligne de code suivante :

Private Sub exporter_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
If exporter.Left = exporter2.Left Then animer Me.Name, "exporter", 1
End Sub

Nous n'engageons l'appel de la fonction animer que dans la mesure où le bouton est sur sa position d'origine (exporter.Left = exporter2.Left). Nous lui passons le nom du formulaire (Me.Name), le nom du bouton à bouger et le mode 1 pour le déplacement.

• En haut de la feuille de code, déployer la liste déroulante de gauche,
• Dans les propositions, choisir le contrôle fermer,
• Dès lors, déployer la liste déroulante de droite,
• Dans les propositions, choisir l'événement associé MouseMove,

C'est ainsi que nous créons la procédure événementielle fermer_MouseMove. De fait, la précédente (fermer_Click) peut être supprimée. Elle a automatiquement été créée lorsque nous avons réalisé le premier choix.

• Dans les bornes de cette nouvelle procédure, ajouter la ligne VBA suivante :

Private Sub fermer_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
If fermer.Left = fermer2.Left Then animer Me.Name, "fermer", 1
End Sub

Le principe est le même mais l'analyse porte désormais sur le second bouton.

Il ne nous reste plus qu'à organiser le repositionnement du bouton déplacé dès qu'un mouvement de la souris est détecté au-dessus de la zone du formulaire. Ainsi, nous saurons que la souris a quitté la zone d'influence du bouton. Cette zone du formulaire est reconnue par le nom d'objet Détail.

• En haut de l'éditeur, déployer la liste déroulante de gauche,
• Dans les propositions, choisir l'objet Détail,
• Déployer alors la liste déroulante de droite,
• Dans les propositions, choisir l'événement associé MouseMove,

C'est ainsi que nous créons la procédure événementielle Détail_MouseMove et que la précédente (Détail_Click) peut être supprimée.

• Dans les bornes de cette nouvelle procédure, ajouter les deux lignes VBA suivantes :

Private Sub Détail_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
If exporter.Left <> exporter2.Left Then animer Me.Name, "exporter", 0
If fermer.Left <> fermer2.Left Then animer Me.Name, "fermer", 0
End Sub

Nous appelons deux fois la fonction animer avec un mode inversé (0). Mais ces appels n'ont lieu que dans la mesure où les boutons ne sont pas déjà sur leurs positions d'origine, en d'autres termes qu'ils sont bien sous le coup d'un déplacement (exporter.Left <> exporter2.Left et fermer.Left <> fermer2.Left).

Tester les effets d'animation
Il ne nous reste plus qu'à tester ces effets d'animation régis par le code VBA Access.

• Enregistrer les modifications (CTRL + S) et basculer sur le formulaire (ALT + Tab),
• Exécuter ce dernier, par exemple avec la touche F5 du clavier,

Désormais et comme vous pouvez l'apprécier, dès que vous survolez un bouton, celui-ci prend de la hauteur. Et dès que vous quittez sa zone d'influence, il se range sur sa position d'origine.