Copyright © 1998-2010 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:

Simple
Disjointed

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.

3dabm_i00006f

 

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

3dabm_i000070

 

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.

 

3dabm_i00000b

 

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:

 

3dabm_i0000de

 

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.

 

3dabm_i0000df

 

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.

3dabm_i00006f

 

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

3dabm_i000083

 

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

 

3dabm_i0000e0

 

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:

3dabm_i000080

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):

3dabm_i000081

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.