Label Animation Zoom-out Fade

Introduction.

Computer programming is fascinating because once you begin experimenting, it often sparks new ideas and leads you to try even more. I originally planned to demonstrate just one or two label animation techniques, but we’ve already explored five different animation methods.

Now, we’ll learn one more trick using the same form and labels we worked with last week. All you need to do is copy the new VBA code provided below into the code module of the Form.

The sample image below shows the program in action:

Right-click to open Large Image in New Tab/Window.

In this method, the color of each letter in the employee’s name gradually fades as if receding into the distance. At the same time, the size of each letter decreases step-by-step. The letters are displayed at fixed time intervals, creating an animated effect with the sense of three-dimensional depth.

Links to earlier Animation Styles.

If you have not tried out the earlier Label animation methods, you may explore them by visiting the following pages:

1. Label Animation Style-1
2. Label Animation Style-2
3. Label Animation Variant
4. Label Animation Zoom-in Style
5. Label Animation in Colors

Let us try the new method.

The Design Task.

1. Make a copy of the Employees form we used last week. On this form, create twenty small labels, and set their Name property to the values lbl01 through lbl20.

   A sample image of the Form is given below for reference:

   

   Right-click to open Large Image in New Tab/Window.

2. Open the Employees Form you have copied in Design View.

3. Display the Code Module of the Form (View -> Code).

4. Copy and paste the following VBA Code into the Module, overwriting the existing Code:

   The Form Module Code.

   Option Compare Database
   Option Explicit
   
   Dim j, txtName, ctrl As Label, i
   
   
   Private Sub Form_Current()
   Dim t, xRGB As Long, fsize
   
   txtName = UCase(Me![first name] & " " & Me![Last name])
   fsize = 22
   For j = 1 To 20
      Set ctrl = Me("lbl" & Format(j, "00"))
      ctrl.FontSize = fsize
      ctrl.Caption = ""
      fsize = fsize - 1
   Next
      
   xRGB = RGB(10, 10, 10)
   i = xRGB
   For j = 1 To Len(txtName)
      Set ctrl = Me("lbl" & Format(j, "00"))
      xRGB = xRGB + i
      ctrl.ForeColor = xRGB
      ctrl.Caption = Mid(txtName, j, 1)
      
   t = Timer
   Do While Timer < t + 0.1
     DoEvents
   Loop
   
   Next
   
   End Sub

5. Save the Form with the Code and open it in the normal view.

6. Use the Record Navigation buttons to move forward or backward through the records, and observe how the employee name is displayed dynamically in the form’s header.

1. Textbox and Label Inner Margins
2. Animating Label on Search Success
3. Label Animation Style-1
4. Label Animation Style-2
5. Label Animation Variant
6. Label Animation Zoom-in Style
7. Label Animation in Colors
8. Label Animation Zoom-out Fade

Read More

Label Animation in Colors

Introduction.

We have explored several label animation methods in the previous posts, and now we will try another trick using the last design you created: the Zoom-in method.

In this method, we add a splash of color—each letter of the employee’s name is assigned a randomly generated color. The letters are plotted in a “magical” sequence: odd-numbered letters appear first on odd-numbered labels (lbl01, lbl03, lbl05, etc.), followed by even-numbered letters on even-numbered labels (lbl02, lbl04, lbl06, etc.). The letters are displayed at fixed time intervals, creating a smooth animated effect.

After these two steps, the employee’s name is fully displayed in the form header, producing an eye-catching Zoom-in animation.

If you have tried the earlier label animation methods from last week, implementing this technique will be straightforward and easy to follow.

The Design Task.

1. Make a Copy of the Employees Form, which we designed last week, and name it Employees_2 or any other name you prefer.

   The sample design of the Form, with twenty labels placed close together in the Header of the Form, with the Name Property Values set as lbl01 to lbl20, is given below:

   

   Right-click to open Large Image in New Tab/Window.

2. Display the Code Module of the Form (View -> Code) after opening the Form in Design View.

3. Copy and paste the following VBA Code into the Form Module, overwriting the existing Code.

   The Form Module Code.

   Option Compare Database
   Option Explicit
   
   Dim j, txtName, ctrl As Label
   
   Private Sub Form_Current()
   Dim t, m, R, G, B
   Randomize (Timer)
   
   txtName = Me![first name] & " " & Me![Last name]
   For j = 1 To 20
      Set ctrl = Me("lbl" & Format(j, "00"))
      ctrl.Caption = ""
   Next
   For j = 1 To Len(txtName) Step 2
      Set ctrl = Me("lbl" & Format(j, "00"))
      R = Int(Rnd(1) * 64)
      G = Int(Rnd(1) * 128)
      B = Int(Rnd(1) * 255)
   
      ctrl.ForeColor = RGB(R, G, B)
      ctrl.Caption = Mid(txtName, j, 1)
   
   t = Timer
   Do While Timer < t + 0.1
     DoEvents
   Loop
   Next
   
   For j = 2 To Len(txtName) Step 2
      Set ctrl = Me("lbl" & Format(j, "00"))
      R = Int(Rnd(1) * 255)
      G = Int(Rnd(1) * 128)
      B = Int(Rnd(1) * 64)
   
      ctrl.ForeColor = RGB(R, G, B)
   
      ctrl.Caption = Mid(txtName, j, 1)
   
   t = Timer
   Do While Timer < t + 0.1
     DoEvents
   Loop
   
   Next
   
   End Sub

4. Save the Form with the new VBA Code.

   The Demo Run.

5. Open the Form in the normal view.

6. Use the record navigation button to move the record forward or back and watch how the employee name is displayed in the header labels.

The sample screen in Normal View is given below:

Right-click to open Large Image in New Tab/Window.

Each character of the name is displayed in a different color at a 0.1-second interval, creating a smooth animated effect. The color codes are generated randomly.

In this program, we use two delay loops instead of the form’s default Timer Interval event procedure.

You can adjust the animation speed by modifying the value in the line:

Do While Timer < t + 0.1

For example:

• 0.5 will slow down the animation.

• 0.05 will make it run faster.

This gives you full control over the speed of the Zoom-in effect.

1. Textbox and Label Inner Margins
2. Animating Label on Search Success
3. Label Animation Style-1
4. Label Animation Style-2
5. Label Animation Variant
6. Label Animation Zoom-in Style
7. Label Animation in Colors
8. Label Animation Zoom-out Fade

Read More

Label Animation Zoom-in Style

Introduction.

This week, we will explore a different style of label animation technique. If you would like to revisit the earlier, simpler label animation methods, the links to those pages are provided below.

• Label animation Style-1
• Label Animation Style-2
• Label Animation Variant

In all the earlier methods, we used two labels moving toward each other from opposite directions, coming together to form text that appeared like a 3D heading.

This week, we will take a different approach. For this method, you will need about twenty small labels placed close together in a horizontal line. Each label will display a single character of the employee’s name. Since all employee names are fewer than twenty characters, this arrangement will be sufficient.

A sample layout of the labels in Design View is shown below:

Right-click to open Large Image in New Tab/Window.

Animation Style image.

Right-click to open Large Image in New Tab/Window.

The employee’s name will appear from left to right, one character at a time, across the labels. After the full name is displayed, the letters will zoom in and zoom out sequentially, creating a dynamic animated effect.

The screenshot above was captured live of this action.

The Design Task.

Let us complete the design task of this animation.

1. If you have not explored the earlier examples, then import the Employees Table from the Northwind sample database.

2. Click on the Employees Table and select Form from the Insert Menu.

3. Create a Form as shown above and save it with the name Employees.

4. Open the Form in Design View.

5. Select the Label Tool from the Toolbox and draw a Label control in the header section of the Form.

6. Change the following property values of the Label as given below:

   • Name = lbl01
   • Width = 0.2528"
   • Height = 0.3549"
   • Top = 0.1563"
   • Left = 1.1146
   • Back Style = Transparent
   • Border Style = Transparent
   • Special Effect = Flat
   • Font Name = Verdana
   • Font Size = 14
   • Font Weight = Bold
   • ForeColor = 7500402

   Now, we must copy this label nineteen times and arrange them as shown in the first image, at the top of this page.

7. We must also change the Name Property Value of each label sequentially so that we can easily address each label in Programs to change their caption values to display the Employee's name.

8. Right-click on the Label and select Copy from the displayed Shortcut Menu.

9. Select Paste from the Edit Menu to create a copy of the Label.

10. Click and drag the new label to place it to the right of the first label. Don't worry about the misalignment of the labels; we will arrange them easily later.

11. Repeat the Paste action to create another eighteen labels.

    The Labels will appear automatically to the right of earlier labels.

12. Click on the second Label.

13. Display its Property Sheet (View -> Properties).

14. Change the Name Property value to lbl02.

15. Repeat this method for other labels, naming them sequentially as lbl03, lbl04, and so on up to lbl20.

16. Click on the left side of the first label (lbl01) and drag the Mouse over all twenty labels to select them all together.

17. Select Format -> Align -> Top to align all Labels horizontally.

18. Select Format -> Align -> Left to bring all the Labels close together.

    Now that we have arranged the labels and their Name Property Values set to lbl01 to lbl20, all that is left to do is to copy the following Programs into the Form's Code Module.

19. Select Code from the View Menu.

20. Copy and paste the following VBA Code into the Module (overwriting the existing VBA Code, if any).

    The Form Module Code.

    Option Compare Database
    Option Explicit
    
    Private Const twips As Long = 1440
    Dim i, j, txtName, ctrl As Label
    
    Private Sub Form_Current()
    
    txtName = UCase(Me![first name] & " " & Me![Last name])
    i = 0
    Me.TimerInterval = 50
    
    End Sub
    
    Private Sub Form_Timer()
    Dim m, L1, L2
    i = i + 1
    If i > Len(txtName) Then
       For j = Len(txtName) + 1 To 20
        Set ctrl = Me("lbl" & Format(j, "00"))
        ctrl.Caption = ""
        Next
       Me.TimerInterval = 0
       i = 0
       animate
    Else
       Set ctrl = Me("lbl" & Format(i, "00"))
       ctrl.Caption = Mid(txtName, i, 1)
       ctrl.ForeColor = &H727272
    End If
    DoEvents
    
    End Sub
    
    Public Function animate()
    Dim k As Integer, t
    For k = 1 To Len(txtName)
      Set ctrl = Me("lbl" & Format(k, "00"))
      ctrl.ForeColor = 0
      ctrl.FontSize = 24
      DoEvents
      If k = 10 Then Exit For
      t = Timer
      Do While Timer < t + 0.09
        DoEvents
      Loop
      ctrl.FontSize = 14
    
    Next
    
    End Function

    The Trial Run.

21. Save the Form with the Code.

22. Open it in the normal view.

23. Use the Record Navigation Buttons to move the record forward/back and display the employee name in animated form.

Hope you like this method better and implement it in your Projects.

1. Textbox and Label Inner Margins
2. Animating Label on Search Success
3. Label Animation Style-1
4. Label Animation Style-2
5. Label Animation Variant
6. Label Animation Zoom-in Style
7. Label Animation in Colors
8. Label Animation Zoom-out Fade

Read More

Label Animation Variant

Introduction.

I have several label animation styles lined up to share with you, and we have already explored two of them in the last two articles:

1. Label Animation Style-1
2. Label Animation Style-2

In this lesson, we will explore two variations of the animation method we practiced last week. If you have already followed the steps for creating the sample labels and writing the program, you can reuse the same setup with only a few small adjustments.

The only change needed is in the position of the second label (lbl2). The arrangement of labels from the previous animation method is shown below:

Right-click to open Large Image in New Tab/Window.

In this method, both labels are initially placed apart and then move toward each other until they meet at the final position, forming the 3D heading style.

If you prefer a variation with a stronger visual appeal, you can reduce the distance between the two labels and place them slightly closer together. This adjustment gives the animation a smoother and more polished effect.

The modified version of the design is shown below:

Right-click to open Large Image in New Tab/Window.

You can implement this variant of the earlier animation style by changing the Properties of the lbl2 label as given below. 

The Design Change.

1. Make a copy of the Employees Form with the earlier animation method and change the Form name to something like Employee2_1 or any other name you prefer.

2. Open the Employee2_1 in Design View.

3. Click on lbl2 (the label with the White-colored label and display its Property Sheet (View -> Properties).

4. Change the Property Values as shown below. The only change that you need to make is the left Property value only. But, the full Property Values are reproduced here with the change in the Left Property:

   • Width = 2.9924
   • Height = 0.3549
   • Top = 0.125
   • Left = 3.6354
   • Back Style = Transparent
   • Border Style = Transparent
   • Font Name = Verdana
   • Font Size = 18
   • Text Align = Center
   • Font Weight = Bold
   • ForeColor = #FFFFFF

   Once you make the Left Property Value change, the label will move into place as shown in the second image above.

5. Display the Code Module of the Form (View -> Code) while the Employee2_1 Form is still in the design view.

6. Copy and paste the following modified Code into the Form Module, overwriting the existing VBA Code.

   The Form Module VBA Code.

   Option Compare Database
   Option Explicit
   'Global declarations
   Private Const twips As Long = 1440
   Dim i, j
   
   Private Sub Form_Current()
   Dim txtName As String
   Me.lbl1.Left = 2.5194 * twips
   Me.lbl1.Top = 0.1569 * twips
   Me.lbl1.Width = 2.9924 * twips
   Me.lbl1.Height = 0.3549 * twips
   
   Me.lbl2.Left = 3.6354 * twips
   Me.lbl2.Top = 0.125 * twips
   Me.lbl2.Width = 2.9924 * twips
   Me.lbl2.Height = 0.3549 * twips
   
   txtName = UCase(Me![first name] & " " & Me![Last name])
   Me.lbl1.Caption = txtName
   Me.lbl2.Caption = txtName
   i = 0
   Me.TimerInterval = 25
   
   End Sub
   
   Private Sub Form_Timer()
   Dim m, L1, L2
   i = i + 1
   m = i Mod 2
   Select Case m
       Case 1
           L1 = Me.lbl1.Left
           L1 = L1 + (0.084 * twips)
           Me.lbl1.Left = L1
       Case 0
           L2 = Me.lbl2.Left
           L2 = L2 - (0.084 * twips)
           Me.lbl2.Left = L2
   End Select
   DoEvents
   If i > 12 Then
      Me.TimerInterval = 0
      i = 0
   End If
           
   End Sub

7. Save the Form and open it in Normal View.

8. Move the Employee Records forward using the record navigation buttons and watch the refined animation of employee names.

I hope you like the overall impact of the change in the earlier animation method.

The Design Changes.

We will look into another variant of the same animation method with the following design change:

Right-click to open Large Image in New Tab/Window.

1. In this method, the label  lbl2 is placed below lbl1. Both labels are then gradually moved toward each other until they overlap in a way that they create a 3D-style header.

2. Make a Copy of the Employee2_1 Form and save it with the name Employee2_2.

3. Open the Form in Design View.

4. Click on the label with the White-colored text (with the Name Property Value lbl2) to select it.

5. Display the Property Sheet (View -> Properties) and change the following Property Values as shown below:

   • Width = 2.9924
   • Height = 0.3549
   • Top = 0.5313
   • Left = 2.5729
   • Back Style = Transparent
   • Border Style = Transparent
   • Font Name = Verdana
   • Font Size = 18
   • Text Align = Center
   • Font Weight = Bold
   • ForeColor = #FFFFFF

6. Display the Code Module of the Form (View ->Code).

7. Copy and paste the following Code into the Form VBA Module, overwriting the existing Code.

   The Form Module Code.

   Option Compare Database
   Option Explicit
   
   Private Const twips As Long = 1440
   Dim i, j
   
   
   Private Sub Form_Current()
   Dim txtName As String
   Me.lbl1.Left = 2.5521 * twips
   Me.lbl1.Top = 0.1569 * twips
   Me.lbl1.Width = 2.9924 * twips
   Me.lbl1.Height = 0.3549 * twips
   
   Me.lbl2.Left = 2.5729 * twips
   Me.lbl2.Top = 0.5313 * twips
   Me.lbl2.Width = 2.9924 * twips
   Me.lbl2.Height = 0.3549 * twips
   
   txtName = Me![first name] & " " & Me![Last name]
   Me.lbl1.Caption = txtName
   Me.lbl2.Caption = txtName
   i = 0
   Me.TimerInterval = 50
   
   End Sub
   
   Private Sub Form_Timer()
   Dim m, L1, L2
   i = i + 1
   m = i Mod 2
   Select Case m
       Case 0
           L1 = Me.lbl1.Top
           L1 = L1 + (0.084 * twips)
           Me.lbl1.Top = L1
       Case 1
           L2 = Me.lbl2.Top
           L2 = L2 - (0.084 * twips)
           Me.lbl2.Top = L2
   End Select
   DoEvents
   If i > 4 Then
      Me.TimerInterval = 0
      i = 0
   End If
           
   End Sub
   
   

8. Save the Form and open it in Normal View.

9. Move the employee records forward using the Record Navigation buttons and observe how the new animation method is applied in the same 3D style.

Next week we will learn a different and interesting style of the label animation method.

1. Textbox and Label Inner Margins
2. Animating Label on Search Success
3. Label Animation Style-1
4. Label Animation Style-2
5. Label Animation Variant
6. Label Animation Zoom-in Style
7. Label Animation in Colors
8. Label Animation Zoom-out Fade

Read More