Copyright © 1998-2015 MultiMedia Soft

How to create rollover effects like in Macromedia Flash

Previous pageReturn to chapter overviewNext page


With 3D Active Button Magic, you can have the same great button animation capabilities and disjointed rollover effects that you have come to love in Macromedia Flash™ buttons on Web-based pages and on the Internet.

There are two kinds of "rollover" effects:


A Simple rollover is an image whose display changes when the mouse pointer rolls over its surface; a Disjointed rollover is an image whose display changes when the mouse pointer rolls over another image or object. While this technique is becoming increasingly common on the internet, 3D Active Button Magic extends this concept to buttons embedded inside your applications.

Creating a simple rollover or a more complex disjointed rollover is really simple with 3D Active Button Magic.


First, a simple rollover effect:

Say that we have a button like the one below with an orange RGB (255, 128, 64) color applied to both text and surface.



and we need to obtain a button like the one below when the mouse rolls over the button area



As you can see, the difference between the two buttons above is given by the text and surface colors that, in the second case, are based upon a yellow RGB (255, 255, 0) color; this effect can be easily reached using the following procedure:


At Design-time right-click the control and choose Properties. The control's property sheet will appear.




Click the Edit properties... button that will open 3D Button Visual Editor

Select the Colors tab.

Inside this tab, select the Mouse over state radio button

Press the Change... button and enter the new mouse over color. In this case, the chosen color is yellow:




Select the Texts tab.

Press the "..." button near the Mouse over Color item and enter the new color. In this case, we are sticking with yellow.




That's all there is to it. When the mouse passes over the button, both the button and the text will change to a yellow color.


Second, a simple rollover effect with a graphic:

Here we start with the same button from the previous example.



and we need to obtain a button like the one below when the mouse rolls over the button area:



Here is the procedure to make the icon pop up when the mouse passes over.

Select the Pictures and Animations property page.

Inside this page select the Picture/Animation for button with mouse over radio button

Press the Browse button and select a picture, icon or animation from your hard disk: the picture will appear inside the Preview pane




That's all.



Now let's create a disjointed rollover effect:

In a disjointed rollover effect something else on the form changes when the mouse rolls over the button. For instance, your button could remain the same, but to the right of the button, another graphic could appear. This new graphic might be text that would indicate what would happen if the button were clicked, or it might be simply for generating some dynamic content.

The MouseIn and MouseOut events enable you to trap for these events: the first event occurs each time the mouse pointer enters the button area, while the second one occurs when the mouse pointer leaves the button area. You can then use these two events to trigger any operation we want to perform over your form or dialog box.

Simply insert code inside the function that manages the MouseIn or MouseOut events that will perform the operation you need (e.g., to make visible a hidden text near the button)

Suppose we have a form like the one below: a button (called MyButton) with the mouse pointer, represented by the little hand, outside of the button area; no other element is visible on the form:


Now we move the mouse pointer inside the button area and a text label (called Label1) appears (obviously the Label1 label was already inserted at design-time):


Here follows the Visual Basic code snippet that is needed to perform the described operation:

Private Sub Form_Load()

 ' hide the label at startup

 Label1.Visible = False

End Sub

Private Sub MyButton_MouseIn()

 ' show the label when the mouse rolls over the button area

 Label1.Visible = True

End Sub

Private Sub MyButton_MouseOut()

 ' hide the label when the mouse leaves the button area

 Label1.Visible = False

End Sub

As you can see, the quantity of operations you can do between a MouseIn event and a MouseOut event is only limited by your imagination. Obviously you could use the MouseIn and MouseOut events for enhancing the simple rollovers we have seen at the beginning of this section, for example to hide the caption text when the "mouse over picture" appears.

Inside the samples installed with our product, you will find a Visual Basic project sample called Rollovers that demonstrates how simple is to create rollover effects inside your applications.