Download
Buy
Upgrades

 
Tutorial 7 - Mouse rollover web effect

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

Tutorial resource

Project Files:
noise1.epp & noise2.epp & family.epp
Image Files:
noise.zip

Steps:

A. Apply a background image

  1. In the Main Navigation Bar click the Select Background button to step to the background page.
  2. Select the Background-B category from the Background Category pull down menu.
  3. Click to select the BG_B7 thumbnail from the Background Gallery.
  4. 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

  1. In the Main Navigation Bar, click the Select Object button to step to the 3D object page.
  2. Click the Import Image button, then the import image window will open.
  3. Click the folder icon to the right of the image file text box, locate the noise.jpg file and click OK.
  4. Click the Next page button to view more 3D photo frames.
  5. Select the desired 3D photo frame by clicking the thumbnail.
  6. 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

  1. In the Main Navigation Bar, click the Lighting Effect button to step to the lighting page.
  2. Use Zoom, Roll, Move, and Rotate controls to adjust the position of your 3D photo frame.
  3. Select the Standard light category from the Lighting Category pull down menu, then click the light 7 thumbnail to highlight the light setting.
  4. Adjust the position of light #1 to 170 and 88.
  5. Press the Apply button to update the changes to your project.

 

 

D. Export as a static GIF

  1. In the Main Navigation Bar, click the Export file button to step to the export page.
  2. To export your result as a GIF file, select the GIF tab.
  3. Set the Anti-aliasing option to Best, ensuring the highest quality exported file.
  4. Set the Output Range to Current frame to export the static image seen in the Preview Window.
  5. 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

  1. In the Main Navigation Bar, click the Animation composer button to step to the animation composer page.
  2. Press the Add Clip button to load the first and second images you created (111.gif and 222.gif).
  3. Highlight clip1 in animation list.
  4. Set the Delay parameter to a value of 0.1
  5. Highlight clip2 in the animation list, set the delay parameter to a value of 0.1
  6. Check the Preview Loop option.
  7. Click Play button to preview the animation.
  8. Set the Loop option to loop the exported file.
  9. 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

  1. In the Main Navigation Bar, click the Select Object button to step to the 3D object page.
  2. Click the Import Image button, then the import image window will open.
  3. Click the folder icon to the right of the image file text box, locate the family.jpg file and click OK.
  4. Click the Next page button to view more 3D photo frames.
  5. Select the desired 3D photo frame by clicking the thumbnail.
  6. 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

  1. In the Main Navigation Bar, click the Image Effects button to step to the image processing page.
  2. Press the Glow tab.
  3. Check the glow On/Off button to apply the glow effect.
  4. Set the glow color to sky-blue using the pop-up Color Panel.

 

 

H. Export as a static GIF

  1. In the Main Navigation Bar, click the Export file button to step to the export page.
  2. To export your result as a GIF file, select the GIF tab.
  3. To estimate the export file size, click the Estimate button.
  4. Set the Output Range to Current frame to export the static image seen in the Preview Window.
  5. 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

  1. In the Main Navigation Bar, click the Web effects composer button to step to the web effect composer page.
  2. Select the Mouse Rollover effect from the Interaction pull-down menu.
  3. Click the Import button, and import the cc.gif and dd.gif images you created earlier.
  4. 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.
  5. 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.

 

 
 
Privacy Policy | EULA | RSS Feed | Site Map