|
eZedia Resources
eZedia Tips & Tricks
 Basic Training: Teaching Images to Roll Over
Anyone who has browsed the internet has seen rollover images used on web pages. You know, the images that appear to move, light up, highlight, or change in some way, when you move your mouse over them.
Can this be done in eZediaMX? You bet!
In this article, we'll show you how to make the most of your rollover graphics, and the best ways to use them in your projects.
To download the sample project files used in this article, click here.
The Primary Graphic
First, you'll need to decide on your primary graphic. The primary graphic can be designed by you, or by somebody else. (If you are using someone else's artwork, remember that the existing artwork may be protected under copyright law.) The primary graphic is the graphic that the user will see first. In our example, we've created a graphic with some text on it, using a simple phrase - Click Here - as the message for the user.
The Secondary Graphic
The next thing to do is to create the secondary graphic. The secondary graphic is the graphic that will appear when the user rolls their mouse over the primary graphic, and is commonly referred to as the "rollover" graphic.
The easiest way to create the secondary graphic is to take the primary graphic and alter it in some way, without changing the size of the image. In our example, we've changed some of the colors in the graphic.
Putting it Together
Finally, to put it all together in eZediaMX, follow these steps:
| 1) |
Drag both the primary and secondary graphics into eZediaMX. |
| 2) |
Select the secondary graphic and then select Objects > Layers > Bring to Front. This ensures that the rollover graphic is in the top layer of your project. |
| 3) |
Double-click the rollover graphic to open its properties dialog box. |
| 4) |
Select the Rollover check box and then click OK. |
| 5) |
Align the primary and secondary graphics, so that the primary graphic is covered by the secondary graphic. |
| |
a) Select both the primary and secondary graphics. |
| |
b) Select Objects > Align. |
| |
c) Select both Align check boxes. Because the images are the same size, you can leave the default Alignment options at Left and Top. |
| |
d) Click OK. |
| 6) |
That's it! Run the project to see your rollover in action! |
Rollovers and GoTos
While rollovers provide great visual feedback to the user, you will often want the rollover to activate another object, after the user has clicked the mouse.
No problem! To make a rollover graphic activate a GoTo object, create a link from the rollover graphic to the GoTo Object. You can activate any other type of object in the same way-Movie, Graphic, Text, Control, and more.
Advanced Rollover Techniques
With planning, the technique of creating a rollover can be reused to create multiple buttons. We'll use the graphics shown below to demonstrate an example.
These graphics have been created as PNG graphics, with transparency. Creating the graphic in this fashion allows the graphics to be used on any background. To download these PNG graphics, click the link at the beginning of this article.
As you can see, the rollover graphic provides a glow and a highlight for the primary graphic. When positioned over the primary graphic, the rollover graphic gives the effect of the button lighting up.
To complete the button, create a transparent Text Object and position it over the button. The Text Object can be formatted however you choose; bold, italic, colors, etc. Now, you have 3 objects that can be duplicated and positioned wherever you like. Because the text is still editable, you can always go back and change it, right in eZediaMX!
Here is an example of this rollover, as it would be seen in the eZedia Player:
Primary Graphic:
 |
Rollover Graphic:
 |
Changing the layering order can produce even more effects. If the Text Object is positioned between the primary and secondary graphics, the text will show through the button, instead of being over the button, as in the example.
As you can see, using PNG transparency to its fullest potential can yield beautiful results.
Planning your rollover design early can save you headaches later!
|
|
|
|
