Animations sur un formulaire VBA Excel

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


Sujets que vous pourriez aussi aimer :


Animer les formulaires Excel

Dans cette suite de formations VBA Excel, nous proposons de développer une application d'évaluation des candidats par QCM. Elle doit se nourrir des informations issues d'une source de données externe. Ici plus précisément, il s'agit d'une base de données Access. Des connexions régulières à la source distante doivent être réalisées par le code VBA. Elles doivent permettre de récupérer les données ou encore de les actualiser, dans le cas d'une nouvelle inscription par exemple.

Comme cette application aborde de nombreuses notions, nous la décomposerons en plusieurs formations. Dans ce premier volet, il s'agit simplement de réaliser quelques animations sur le formulaire d'accueil préconçu, celui de l'identification du candidat.



A l'ouverture de l'application finalisée, le formulaire d'authentification se charge automatiquement. Quelques petites animations attirent l'oeil. Il s'agit des indications du formulaire qui se déplacent jusqu'à ce qu'elles soient correctement positionnées. Mais il s'agit aussi d'un dégradé de couleurs évoluant au fil des secondes, dans les champs qu'il convient de renseigner.

Source et présentation de la problématique
Comme toujours, nous proposons de débuter les travaux depuis un classeur source offrant la structure du QCM, mais pas seulement. Le formulaire d'identification existe lui aussi. Il s'affiche à l'ouverture du classeur. Nous allons le constater.

• Télécharger le classeur animation-formulaire-identification.xlsm en cliquant sur son lien,
• L'ouvrir dans Excel et cliquer sur le bouton Activer la modification du bandeau de sécurité,

Le UserForm Excel apparaît en effet au-dessus de la feuille Evaluations. Il propose une zone de saisie pour l'identification ainsi qu'une liste déroulante pour le choix du questionnaire. Aucun code VBA ne lui est associé pour l'instant. A l'issue, une fois l'identification du candidat réussie, il devra établir la connexion pour permettre de débuter l'évaluation.

• Fermer le formulaire en cliquant sur la croix en haut à droite de sa fenêtre,
• Puis, basculer dans l'éditeur de code VBA Excel avec le raccourci clavier ALT + F11,

Pour ce faire, vous pouvez aussi exploiter le ruban Développeur. S'il n'est pas présent dans votre environnement, la formation pour débuter la programmation en VBA Excel, rappelle comment l'afficher.

Dans l'explorateur de projet, l'arborescence de l'application est totalement repliée. Les ressources VBA sont en effet protégées par un code d'accès. C'est donc l'occasion de dévoiler l'astuce permettant de préserver vos développements.

• Dans l'explorateur de projet, cliquer sur le symbole + en regard de l'application,
• Dans la petite boîte de dialogue qui suit, taper le mot de passe : aaaa,
• Puis, valider en cliquant sur le bouton Ok,

L'arborescence du projet se déploie aussitôt. Pour protéger l'accès aux ressources VBA, il faut régler les propriétés du projet.

• En haut de l'éditeur, cliquer sur le menu Outils,
• Dans la liste, choisir Propriétés de VBAProject,
• Dans la boîte de dialogue qui suit, activer l'onglet Protection,

Vous constatez la présence des zones de saisie pour le mot de passe. Nous souhaitons supprimer ce mot de passe :

• Décocher la case : Verrouiller le projet pour l'affichage,
• Supprimer le contenu des deux zones dédiées au mot de passe,
• Valider par Ok et enregistrer les modifications,

Le projet est désormais déverrouillé et vous détenez la clé pour préserver vos développements futurs.

• Dans l'explorateur de projet, déployer l'affichage du dossier Feuilles,

Comme vous le constatez, deux formulaires existent déjà. En effet, en cas d'échec à l'authentification, nous devons proposer à un nouveau candidat de pourvoir s'inscrire. C'est la vocation du formulaire Inscription. Dans ce premier volet, notre étude doit se concentrer sur le formulaire Connexion. C'est lui qui doit permettre l'identification. Mais c'est aussi lui qui doit proposer de petites animations pour attirer l'attention du candidat.

• Dans l'explorateur de projet, double cliquer sur l'élément ThisWorkbook,

L'élément ThisWorkbook désigne le classeur actif. Dans sa feuille de code au centre de l'écran, vous notez la présence de la procédure événementielle Workbook_open :

Private Sub Workbook_Open()

Connexion.Show

End Sub

Nous avons déjà abordé les gestionnaires d'événements dans de précédentes formations en VBA Excel. Et comme nous l'avions appris, tout code présent entre les bornes de cette procédure événementielle Workbook_open se déclenche en même temps que le classeur s'ouvre.

Connexion est le nom d'objet du formulaire. Show est sa méthode permettant de l'afficher. En conséquence, nous déclenchons l'affichage du formulaire d'identification à l'ouverture du classeur Excel.

Quant à nous pour les simulations, nous déclencherons son affichage directement depuis l'éditeur.

Effets d'animations sur formulaires Excel
Pour réaliser de petites animations, nous devons exploiter la fonction VBA Excel Timer. Nous l'avions déjà mise en oeuvre dans la formation pour générer des nombres aléatoires afin de produire des effets animés. Elle permet de prélever le temps qu'il est à la milliseconde près. Incluse dans une boucle VBA testant les incréments de temps à chaque passage, elle permet de déplacer les objets notamment.

Ces animations doivent débuter dès que le formulaire s'affiche. Et un UserForm VBA Excel propose un gestionnaire d'évènements bien spécifique pour ce faire.

• Dans l'explorateur de projet, double cliquer sur le formulaire Connexion pour l'afficher,
• Puis, double cliquer directement sur un emplacement vide du formulaire,

Nous générons ainsi une procédure événementielle. Mais elle ne correspond pas à nos attentes. L'animation doit débuter sur activation du UserForm et non au clic.

• En haut à droite de la feuille de code, déployer la seconde liste déroulante,
• Dans les événements associés proposés, sélectionner l'évènement Activate,

Nous créons ainsi la procédure évènementielle UserForm_Activate. Son code VBA sera déclenché dès que le formulaire aura fini de se charger. Comme ce formulaire s'ouvre en même temps que le classeur, les animations que nous allons produire, démarrons automatiquement.

• Supprimer la procédure UserForm_Click, du Sub au End Sub ,

Comme toujours, nous devons débuter par la déclaration des variables nécessaires au traitement.

• Entre les bornes de la procédure UserForm_Activate, ajouter les déclarations et affectations suivantes :

Dim composante As Byte: Dim debut

Titre1.Top = -40: Titre2.Left = -100
composante = 0

La variable composante est déclarée comme un entier court (Byte). Elle porte bien son nom. Nous l'exploiterons pour faire varier les composantes de couleurs, grâce à la fonction VBA RGB. La variable debut n'est pas typée. Elle doit être affectée à la valeur retournée par la fonction VBA Timer. Elle réceptionnera ainsi le temps en milliseconde et sera typée à la volée.

Les deux indications textuelles du formulaire sont placées dans des contrôles Label. Ils portent les noms d'objets respectifs : Titre1 et Titre2. Si vous les sélectionnez sur le formulaire en conception, la fenêtre propriétés en atteste. Nous réglons la propriété Top (Hauteur) du premier et la propriété Left (Position gauche) du second. Avec ces valeurs négatives que nous avons testées, les deux contrôles débuteront leur déplacement en dehors du formulaire. Ils donneront ainsi l'illusion d'apparaître. Enfin, nous initialisons la variable composante à 0. Nous pourrons ainsi l'incrémenter pour faire varier les couleurs.



Nous devons maintenant produire un double traitement récursif. La première boucle doit définir jusqu'à quel point le traitement s'effectue. Un critère posé sur la position finale à atteindre permettra de stopper l'animation. A l'intérieur de cette boucle, une autre doit permettre de temporiser le traitement, grâce à un compteur de temps. Ainsi, nous donnerons l'illusion d'une animation.

• A la suite du code, créer l'imbrication des boucles Do Loop comme suit :

Do
debut = Timer
Do While Timer < debut + 0.02
DoEvents
Loop

Loop Until Titre2.Left = 6

La première boucle permet de répéter des actions tant que le Label Titre2 n'a pas retrouvé sa position d'origine (Loop Until Titre2.Left = 6). La seconde boucle intervient directement après avoir prélevé le temps (debut = Timer). Nous lui demandons de tourner dans le vide durant 2 centièmes de seconde (Do While Timer < debut + 0.02). L'instruction DoEvents permet de rendre la main à l'utilisateur à chaque passage. Cette astuce permet de ne pas occuper pleinement le processeur. Lorsque ces 2 centièmes sont terminés, cette seconde boucle finit son traitement (Loop).

Les instructions pour les effets d'animations doivent donc intervenir entre les deux bornes inférieures de ces boucles (Loop). Ainsi, tant que la position finale du contrôle Titre2 n'est pas atteinte, la première boucle refait un passage pour passer la main à la seconde qui temporise, et ainsi de suite.

• Entre les deux bornes inférieures des deux boucles (Loop), ajouter les instructions suivantes :

If (Titre1.Top < 6) Then Titre1.Top = Titre1.Top + 1
Titre2.Left = Titre2.Left + 1
composante = composante + 2

identifiant.BackColor = RGB(0, composante, composante)
Sujet.BackColor = RGB(0, composante, composante)

Par mesure de sécurité, nous nous assurons que nous ne dépassons pas la position initiale en hauteur pour le contrôle Titre1 (If (Titre1.Top < 6) Then). En effet, le critère de la boucle est posé uniquement sur la position du contrôle Titre2. Dans ce contexte, même si le traitement récursif se poursuit, le contrôle Titre1 ne bouge plus. Vous notez la syntaxe abrégée sur une même ligne pour l'instruction conditionnelle VBA. Cette fantaisie d'écriture (Sans le End If) est permise lorsqu'une seule action est à engager.

A chaque passage et après temporisation, nous incrémentons donc les positions d'une unité (Titre1.Top = Titre1.Top + 1 et Titre2.Left = Titre2.Left + 1). De même, nous incrémentons la variable composante de deux unités. Puis, nous l'exploitons dans la fonction VBA RGB pour faire varier les composantes vert et bleu de la couleur. Et cette couleur variable, nous l'affectons à l'arrière-plan de la zone de texte identifiant, ainsi qu'à l'arrière-plan de la zone de liste déroulante Sujet. C'est leur propriété commune BackColor qui reçoit cette affectation. Une fois encore, la fenêtre Propriétés renseigne sur les propriétés disponibles pour un contrôle sélectionné.

Ces déplacements et variations de couleurs continueront de se produire tant que la première boucle ne mettra pas fin au traitement. Une fois les animations terminées, nous devons restituer les couleurs d'origine. Nous devons aussi rendre disponibles les contrôles identifiant, Valider et Lien. En effet, nous avions réglé en amont leur propriété Enabled sur False, toujours grâce à la fenêtre Propriétés. Ainsi, tant que les animations n'ont pas fini de jouer, l'utilisateur ne peut pas cliquer ou atteindre ces contrôles.

• Après la fermeture des deux boucles, ajouter les instructions VBA suivantes :

identifiant.Enabled = True
Valider.Enabled = True
Lien.Enabled = True

identifiant.BackColor = RGB(248, 248, 248)
Sujet.BackColor = RGB(248, 248, 248)

identifiant.SetFocus

Nous basculons donc la propriété Enabled des contrôles concernés à True. Nous les rendons de nouveau disponibles à l'issue des animations. Nous réaffectons la propriété BackColor des deux objets ayant subi les variations, sur les composantes de leur couleur d'origine (RGB(248, 248, 248)). A la fin des animations, nous restituons l'apparence du formulaire dans son état initial. Enfin, grâce à la méthode SetFocus du contrôle identifiant, nous activons la zone de saisie. Le point d'insertion étant actif, le candidat peut débuter la frappe de son identifiant sans devoir cliquer à l'intérieur de la zone pour l'activer.

Il s'agit désormais de tester ce code VBA.

• Enregistrer les modifications (CTRL + S),
• Dans l'explorateur de projet, double cliquer sur le formulaire connexion pour l'afficher,
• Puis, enfoncer la touche F5 du clavier pour l'exécuter,

Comme vous le constatez, les zones de titre se déplacent jusqu'à rejoindre leurs positions d'origine. Les couleurs de fond varient en dégradé pour les deux zones concernées. Dans ce laps de temps, les deux boutons et le lien (Jamais inscrit ?) sont bien grisés, donc indisponibles au clic. Une fois les animations terminées, ces mêmes contrôles deviennent disponibles et les couleurs d'origine sont restituées.

Le code complet de la procédure évènementielle UserForm_Activate est le suivant :

Private Sub UserForm_Activate()
Dim composante As Byte: Dim debut

Titre1.Top = -40: Titre2.Left = -100
composante = 0

Do
debut = Timer
Do While Timer < debut + 0.02
DoEvents
Loop

If (Titre1.Top < 6) Then Titre1.Top = Titre1.Top + 1
Titre2.Left = Titre2.Left + 1
composante = composante + 2

identifiant.BackColor = RGB(0, composante, composante)
Sujet.BackColor = RGB(0, composante, composante)

Loop Until Titre2.Left = 6

identifiant.Enabled = True
Valider.Enabled = True
Lien.Enabled = True

identifiant.BackColor = RGB(248, 248, 248)
Sujet.BackColor = RGB(248, 248, 248)

identifiant.SetFocus

End Sub

Jouer une animation au clic
Par anticipation, et même si une identification est requise pour libérer la liste déroulante, nous proposons de créer son animation au clic sur le bouton Ok. Il s'agit de reproduire les variations de couleurs, identiques aux précédentes. Ainsi, à validation de son identifiant, le candidat sera alerté sur l'action suivante à réaliser.

• Fermer le formulaire en cliquant sur la croix de sa fenêtre,
• Revenir dans l'éditeur de code VBA Excel (ALT + F11),
• Afficher le formulaire Connexion en conception,
• Double cliquer sur le bouton Ok pour générer sa procédure évènementielle attachée :

Private Sub Valider_Click()

End Sub

• Dans les bornes de cette procédure évènementielle, ajouter le code VBA suivant :

Dim composante As Integer: Dim debut

composante = 0

Do

debut = Timer
Do While Timer < debut + 0.02
DoEvents
Loop

composante = composante + 5
Sujet.BackColor = RGB(0, composante, composante)

Loop Until composante = 255

Sujet.BackColor = RGB(248, 248, 248)

Le principe est le même mais il ne concerne que la liste déroulante Sujet cette fois. C'est pourquoi il n'est pas nécessaire de revenir sur les explications du code. Cette animation doit donc se produire au clic sur le bouton Valider, une fois qu'il est rendu disponible bien sûr.

• Enregistrer les modifications et afficher le formulaire Connexion,
• Enfoncer la touche F5 du clavier pour l'exécuter,
• Une fois les premières animations terminées, cliquer sur le bouton Ok,

Comme vous le constatez, l'alerte visuelle est donnée. L'attention du candidat est attirée par la liste déroulante dont la couleur de fond varie en dégradé. Bien sûr, à ce stade le formulaire n'est pas encore fonctionnel. Il s'agit simplement de la première des six étapes qui consistait à réaliser des petits effets utiles.

Dans la prochaine formation, nous mettrons en place des aides visuelles sur le formulaire d'inscription. Nous guiderons de façon ergonomique l'utilisateur, afin qu'il renseigne au mieux les informations requises.