How to create rollover effects like in Macromedia Flash™
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
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
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.
