Create a JavaScript mouse
rollover effect for your web site
In this tutorial, you will learn:
A. Apply a background image
B. Import 2D image with 3D photo frame
C. Apply a lighting effect
D. Export as a static GIF
E. Merge static GIF files
F. Import 2D image with 3D photo frame
G. Adjust the Image Effects setting
H. Export as a static GIF
I. Create JavaScript web effect
In the Main Navigation Bar click the Select Background
button to step to the background page.
Select the Background-B category from the
Background Category pull down menu.
Click to select the BG_B7 thumbnail from
the Background Gallery.
Click the Apply button to apply the image
to your project, changes you make to your project
will be visible in the Preview Window.
B.
Import 2D image with 3D photo frame
In the Main Navigation Bar, click
the Select Object button to step to the 3D
object page.
Click the Import Image button,
then the import image window will open.
Click the folder icon to the right
of the image file text box, locate the noise.jpg
file and click OK.
Click the Next page button
to view more 3D photo frames.
Select the desired 3D photo frame by clicking the
thumbnail.
Click the OK button to import
the image with the 3D photo frame, the image will
be visible in the Preview Window.
C.
Apply a lighting effect
In the Main Navigation Bar, click
the Lighting Effect button to step to the lighting
page.
Use Zoom, Roll, Move,
and Rotate controls to adjust the position
of your 3D photo frame.
Select the Standard light category from the
Lighting Category pull down menu, then click the light
7 thumbnail to highlight the light setting.
Adjust the position of light #1 to 170 and 88.
Press the Apply button to update
the changes to your project.
D.
Export as a static GIF
In the Main Navigation Bar, click the Export
file button to step to the export page.
To export your result as a GIF file, select the
GIF tab.
Set the Anti-aliasing option to Best, ensuring
the highest quality exported file.
Set the Output Range to Current frame to
export the static image seen in the Preview Window.
Press the Export image file button, a Save
As dialog box will appear, enter 111.gif as
the filename and click OK, your file will begin to
render, once complete the file will open in your default
viewer. Repeat step B using noise02.jpg as
the imported file and step D using 222.gif
as the export filename.
E.
Merge static GIF files
In the Main Navigation Bar, click the Animation
composer button to step to the animation composer
page.
Press the Add Clip button to load the first and second
images you created (111.gif and 222.gif).
Highlight clip1 in animation list.
Set the Delay parameter to a value of 0.1
Highlight clip2 in the animation list, set the delay
parameter to a value of 0.1
Check the Preview Loop option.
Click Play button to preview the animation.
Set the Loop option to loop the exported file.
Click the Save Result button to export your
new animation file, save your result as cc.gif.
F.
Import 2D image with 3D photo frame
In the Main Navigation Bar, click
the Select Object button to step to the 3D
object page.
Click the Import Image button,
then the import image window will open.
Click the folder icon to the right
of the image file text box, locate the family.jpg
file and click OK.
Click the Next page button
to view more 3D photo frames.
Select the desired 3D photo frame by clicking the
thumbnail.
Click the OK button to import
the image with the 3D photo frame, the image will
be visible in the Preview Window.
G.
Adjust the Image Effects setting
In the Main Navigation Bar, click
the Image Effects button to step to the image
processing page.
Press the Glow tab.
Check the glow On/Off button
to apply the glow effect.
Set the glow color to sky-blue using the pop-up Color
Panel.
H.
Export as a static GIF
In the Main Navigation Bar, click the Export
file button to step to the export page.
To export your result as a GIF file, select the
GIF tab.
To estimate the export file size, click the Estimate
button.
Set
the Output Range to Current frame to export
the static image seen in the Preview Window.
Press the Export image file button, a Save
As dialog box will appear, enter dd.gif as
the filename and click OK, your file will begin to
render, once complete the file will open in your default
viewer.
I.
Create JavaScript web effect
In the Main Navigation Bar, click the Web effects
composer button to step to the web effect composer
page.
Select the Mouse Rollover effect from the
Interaction pull-down menu.
Click the Import button, and import the cc.gif
and dd.gif images you created earlier.
Click the Preview button to build the JavaScript
effect. The JavaScript code will be displayed in the
Script area and your default browser will launch.
Click the Copy Script button to copy the
code to the clipboard, you can then paste into an
existing webpage using your favorite HTML editor.