With 3D Control 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: you can see examples of this effects on a lot of web sites around the Internet: 3D Control Magic extends this concept to controls embedded inside your applications.

Creating a simple rollover or a more complex disjointed rollover is really simple with 3D Control 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:

Select a control inside your form

Open the 3D Button Visual Editor application from inside the Visual Studio.NET IDE as described inside the chapter Editing control properties through the 3D Button Visual Editor application contained inside the How to use the product in your projects section

Select the "Color" tab.

Inside this page select the "Mouse over state" radio button

Press the "Change..." button and enter the color you prefer that in our case is the yellow color.

Select the "Text" tab.

Press the "..." button near the "Mouse over Color" item and enter the color you prefer that in our case is still the yellow color.

Now try to roll your mouse over the button under editing inside the "Button preview pane": you will already see the final effect

Export the control settings selecting the "Button/Save and Exit" menu item.

That's all: when you will run the application the rollover effect will be visible.

Second, a simple rollover effect with a graphic:

Say that we have the same button we had for the previous sample

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

as you can see an icon is now visible on the button surface: this feature can be obtained quite easily through the following procedure

Select a control inside your form

Open the 3D Button Visual Editor application from inside the Visual Studio.NET IDE as described inside the chapter Editing control properties through the 3D Button Visual Editor application contained inside the How to use the product in your projects section

Select the "Pictures and Animations" tab.

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

Now try to roll your mouse over the button under editing inside the "Button preview pane": you will already see the final effect

Export the control settings selecting the "Button/Save and Exit" menu item.

That's all: when you will run the application the rollover effect will be visible.

Now let's create a disjointed rollover effect:

A "disjointed" rollover effect works differently from the examples above: when a user rolls over a button another element somewhere on the form changes. 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 could indicate what would happen if the button were clicked, or it might be simply for generating some dynamic content.

The features we can use for creating such effects are the  MouseEnter and  MouseLeave events: the first event occurs each time the mouse pointer enters the control area, while the second one occurs when the mouse pointer leaves the control area; we can use these two events to trigger any operation we want to perform over our form or dialog box.

Inside the function that manages the  MouseEnter event insert the code that will perform the operation you need (for example make visible a hidden text near the button) while inside the  MouseLeave event insert the code that will cancel the effects of the code inside the  MouseLeave event management function (for example make hidden the text we just made visible before).

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.NET code snippet that is needed to perform the described operation:

 Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

     Label1.Visible = False

 End Sub

 Private Sub MyButton_MouseEnter(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyButton.MouseEnter

     Label1.Visible = True

 End Sub

 Private Sub MyButton_MouseLeave(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyButton.MouseLeave

     Label1.Visible = False

 End Sub

As you can see, the quantity of operations you can do between a MouseEnter event and a MouseLeave event is only limited by your needs and by your fantasy: obviously you could use the MouseEnter and MouseLeave 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.