Command Button Animation-2

A Screen with Animated Text or Controls gives the application a lively look and feel than a rigid screen to the user as well as to the onlooker. Command Button Animation was the first Blog-Post that I have published on this site.


Another Screen design improvement was creating 3D headings on Form and Report with different Fonts, Sizes and Styles. Initially, created them manually and this lead to the creation of a 3D-Text Wizard. You can download this Wizard by following the highlighted link or from Downloads Menu.


You can find the details of 3D Text Styles in the following Posts and download the Wizard from any one of the Posts:

1. Create 3D Headings on Forms


2. Border 2D Heading Text


3. Border 3D Heading


4. Shadow 3D Heading Style

IBM AS400 (iSeries) Screens influenced me to go along designing MS-Access Screens with dark background, data labels with light shades and information in Green text. Even though these are old text based screens better visibility of information is the main attraction of these screens.


But, when I started designing them I faced little problem with the Command Button Animation that was in use till that time because it was not designed for dark backgrounds. I had to invent a different animation method around the original command button. It is simple to design besides easy to implement without the use of too complex VBA code.


So, here it is for you and I hope you like it too. First, we will implement it with a simple and easy to understand method. After that we will write a common routine that can drive the animation on any form with one or two lines of Code.

1. Open a new Form or an existing one.


2. Select the Footer of the Form. If it is not visible select Form Header/Footer from View Menu.


3. Display the Property Sheet (View - ->Properties).


4. Change the Back Color Property Value to 0.


5. Select the Command Button Tool from Toolbox and draw a Command Button in the Footer Section of the Form.


6. Display the Property Sheet of the Command Button.


7. Change the Name property Value to cmdExit and Caption property value to Exit.


8. Select the Rectangle Tool from Toolbox and draw a rectangle around the Command Button as shown in the sample design below:




9. Give a little more gap, between the button and the rectangle at the bottom and the right side than above and left, giving it a feel that the Command Button is in a raised state.


10. Click on the Rectangle and display its Property Sheet.


11. Change the Name Property Value to ExitBox and the Visible Property Value to No.


Now, it is time to implement the animation trick. This time, we will not animate the button like we did earlier on the Command Button Animation; instead the Box around it will be made visible or hidden based on the Mouse movement over the Command Button.


We will track the mouse movement in Code. When the mouse is over the Command Button the rectangle is made visible and when the mouse moves out it is hidden. When this action is repeated it will look like the command button become raised and goes flat again. It has a better look and feel in dark background rather than remains flat all the time.


We need to place Code at two places to trap the mouse movements, on the On Mouse Move Event of the Command Button and on the On Mouse Move Event in the Form Footer.



12. Select the Command Button.


13. Display the Property Sheet of the Command Button (View - ->Properties).


14. Select [Event Procedure] in the On Mouse Move property and click on the build button (…).


15. Copy and paste the Code given below, between the sub-routine skeleton. You can ignore the first and last lines while copying as these will be present in the Module.



Private Sub cmdExit_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
     If Me.ExitBox.Visible = False Then
           Me.ExitBox.Visible = True
     End If
End Sub




16. Click anywhere within the Form Footer area and display the Property Sheet and repeat Step-14 above.


17. Copy and paste the following Code into the empty skeleton of the sub-routine, as you did above:



Private Sub FormFooter_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
   If Me.ExitBox.Visible = True Then
      Me.ExitBox.Visible = False
   End If
End Sub



Actually, the IF…Then statement is not required in the routine. This is introduced to avoid changing the value repeatedly during mouse movements and to avoid flickering.



18. Save the Form and open it in Normal view.


19. Move the Mouse over and out of the Command Button repeatedly which will give the button a sense of going flat and raised state every time.


When we implement this animation at several places duplicating the above code everywhere is not good programming. A common routine is given below that can be called with a one line code so that it is easy to implement anywhere and for any number of buttons.



20. Copy and paste the Code given below into a Global Module of your database and save it.

Public Function AnimateFrame(ByVal OnOff As Boolean, ByVal x_Box As String)
Dim frm As Form, ctrl As Control
On Error GoTo AnimateFrame_Err

Set frm = Application.Screen.ActiveForm
Set ctrl = frm.Controls(x_Box)

Select Case OnOff
    Case False
        If ctrl.Visible = False Then Exit Function
        frm.Controls(x_Box).Visible = False
    Case True
        If ctrl.Visible = True Then Exit Function
        frm.Controls(x_Box).Visible = True
End Select

AnimateFrame_Exit:
Exit Function

AnimateFrame_Err:
Resume AnimateFrame_Exit
End Function

Now, we can replace the code we have written earlier with a single line Code each to display and hide the rectangle.



If Me.ExitBox.Visible = False Then
Me.ExitBox.Visible = True
End If


The above Code can be replaced with the statement


AnimateFrame True, "ExitBox"


in the On Mouse Move of Command Button and



If Me.ExitBox.Visible = True Then
Me.ExitBox.Visible = False
End If


can be replaced with the statement


AnimateFrame False, "ExitBox"


in the FormFooter_MouseMove event procedure.

---

Form Menu Bars and Toolbars
Seriality Control - Missing Numbers
Wave Shaped Reminder Ticker
No Data and Report Error
Lost Links of External Tables