Command Button Animation-2 ~ LEARN MS-ACCESS TIPS AND TRICKS

Saturday, January 10, 2009

Command Button Animation-2

Introduction.

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

Another Screen design improvement was creating 3D headings on Form and Report with different Fonts, Sizes, and Styles. Initially, create them manually and this leads to the creation of a 3D-Text Wizard.

You can find the details of 3D Text Styles in the following Posts.

IBM AS400 (iSeries) Screens influenced me to go along with designing MS-Access Screens with a dark background, data labels with light shades, and Text in Green. 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 a 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.

Command Button Design.

Open a new Form or an existing one.
Select the Footer of the Form. If it is not visible select Form Header/Footer from View Menu.
Display the Property Sheet (View - ->Properties).
Change the Back Color Property Value to 0.
Select the Command Button Tool from Toolbox and draw a Command Button in the Footer Section of the Form.
Display the Property Sheet of the Command Button.
Change the Name Property Value to cmdExit and Caption property value to Exit.
Select the Rectangle Tool from Toolbox and draw a rectangle around the Command Button as shown in the sample design below:
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.
Click on the Rectangle and display its Property Sheet.
Change the Name Property Value to ExitBox and the Visible Property Value to No.

Animating the Command Button
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 feels in a 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.
Select the Command Button.
Display the Property Sheet of the Command Button (View - ->Properties).
Select [Event Procedure] in the On Mouse Move property and click on the build button (. . .).

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

Click anywhere within the Form Footer, to select that area, display the Property Sheet, and repeat Step-14 above.
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.
Trial Run of Animation
Save the Form and open it in Normal view.
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.
The AnimateFrame() Function
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.
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.

LEARN MS-ACCESS TIPS AND TRICKS

Saturday, January 10, 2009