Label Animation Zoom-out Fade

Introduction.

Computer Programming is interesting because when you start doing something it will definitely lead to more than that and give you more ideas to try different things all the time. I have started with the Label Animation methods and thought of presenting one or two tricks, but we have gone through five different animation methods by now.

We are going to learn one more trick with the same Form and Labels, which we have used last week. All you need to do is to copy the new VBA Code given below into the Code Module of the Form.

A sample image of the Run of the Program is given below:

In this method, the Color of each letter of the Employee's name is slowly fading away in the distance. The size of each letter of the name is getting reduced at each step and the letters are displayed at a fixed time interval giving it an animated and three-dimensional effect.

Links to earlier Animation Styles.

If you have not tried out the earlier Label animation methods you may take a look at 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 have used last week with twenty small labels with the Name Property set with the Values lbl01 to lbl20.

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

   

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, over-writing 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 Button and move the record forward or back and watch how the Employee name is displayed on the header of the form.

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 learned several label animation methods, through the last few posts dedicated to this topic, but we will try another trick, with the last design that you have created to try out the Zoom-in method.

In this method, we will play with colors and each letter of the name is applied with different colors generated randomly. Besides that, the name of the employee is plotted in a magical way by displaying odd-numbered letters first on odd-numbered labels i.e. lbl01, lbl03, lbl05, and even-numbered letters displayed on even-numbered labels i.e. lbl02, lbl04, lbl06, and so on. The letters will be plotted on the labels in a fixed time interval giving it an animated effect.

After this two-step action, the employee name display will be completed on the Header of the Form to view.

You can easily implement this method if you have tried out the earlier label animation method we have seen last week.

The Design Task.

1. Make a Copy of the Employees Form, which we have 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:

   

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:

Each character of the name will be displayed in different colors and in one-tenth of a millisecond time interval, giving it an animated effect. The color codes are generated randomly.

In this control program, we have used two delay loops, instead of using the Form's default Timer Interval Event Procedure.

You can modify the given value 0.1 in the program line Do While Timer < t + 0.1 to increase or decrease the animation speed.

For example, the value 0.5 will slow down the action and 0.05 will run faster.

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 learn a different style of Label Animation technique. For those who would like to have a look at the earlier simple label animation methods, the page links are given below to visit those pages:

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

In all the above methods we have used two labels, which moved towards each other from different directions and placed close together to form the displaying text to look like a 3D heading.

This week we will use a different approach and we need about twenty small labels placed close together horizontally. Each Label will display only one character of the Employee Name and all the employee names are less than twenty characters only.

Sample arrangement of Labels in the design view is given below:

Animation Style image.

The employee name will appear from left to right, character by character on each label, followed by the letters will Zoom-in and Zoom-out in sequence. The above screen is captured in the middle of that action.

The Design Task.

Let us get into the design task of this animation.

1. If you have not gone through the earlier examples, then Import the Employees Table from the Northwind sample database.

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

3. Create a Form as shown above and save it with the name Employees or any suitable name that you prefer.

4. Open the Form in Design View.

5. Select the Label Tool from 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 Edit Menu to create a copy of the Label.

10. Click and drag the new label and 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 also and name them 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 the 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 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 advance the record one by one forward/back to display the employee name animated.

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 in store for you and we have already seen two of them through the last two Articles:

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

Here, we will examine two variants of the animation method we tried last week. If you have gone through the procedures for creating the sample labels and programs, then we can try the same animation method with slightly different settings for the labels.

The change is required only on the position of the second label lbl2. The arrangement of labels of the last animation method is given below:

Both labels are placed apart and moved towards each other before they are positioned on the final destination to form the 3D Heading Style.

If you think it is better if the distance of both labels is reduced and place them a little bit closer so that the animation style has a better appeal then here it is for you to try it. 

The modified version of the above design is given below:

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 over-writing 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:

In this method, we place lbl2 named label below lbl1 and slowly move them towards each other and place them in such a way that they form into a 3D header.

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

2. Open the Form in Design View.

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

4. 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

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

6. Copy and Paste the following Code into the Form VBA Module over-writing 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
   
   

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

8. Try moving the Employee records forward and watch the new method of the same style of animation.

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