Copyright © 2003-2010 MultiMedia Soft

How to create rollover effects like in Macromedia Flash

Previous pageReturn to chapter overviewNext page

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.

3dcm_i00006f

 

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

3dcm_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:

 

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.

 

3dcm_i00010c

 

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.

 

3dcm_i00010d

 

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

3dcm_i00006f

 

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

3dcm_i000083

 

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

 

3dcm_i00010e

 

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:

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

3dcm_i000081

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.