Mousetrails: Heart beating

RSS Newsfeed
for your site

DW News
Calendar
DW Forum

Right click on button and copy shortcut

Reminder

Remember to book mark this site!

Creating Holiday Mouse Trail Images

Mouse trails are most effective if the images are very small in kb as well as size and are transparent gif's. This tutorial will show you how to make several themed sets of mouse trail images to use with a java script code below.

This tutorial uses basic shape presets from photoshop 7 to create holiday mousetrails for your webpage.

1. Open a new image that is 40 pixels wide by 40 pixels high, RGB, 72 ppi, transparent background.

2. Zoom in on your image to about 600%. Set your foreground color to Red, hex #FF0000. Select your Shape tool and set the shape to the preset Heart. Set the shape to "fill pixels" so it draws as pixels, not vector. Deselect anti-alias so you do not get the "fringe" on the edges but will get a jaggy appearance when magnified.

Draw your heart

3. Control click your layer to select your heart. Click Edit=> Stoke. set the stroke to

1 pixel
inside
maroon, hex #660000
blending = normal
Opacity = 100%

4. Right click on this layer and duplicate it. Turn off the eye on the background layer.

5. Select your move tool with the bounding box options selected. Scale the image till it is 80% in height and width.

6. Switch to image ready by clicking the button at the bottom of the tool bar.

7. On the animation panel, set the following frames up:

Frame 1: should have layer 1copy visible, with layer 1 off. Time should be set at 0.5 seconds. Click to duplicate this frame to make frame 2
Frame 2: turn off visibility on layer 1 copy and turn on layer 1. Set the time for this frame to be no delay. Duplicate this frame.
Frame 3: should have layer 1copy visible, with layer 1 off. Time should be set at 0.2 seconds. Click to duplicate this frame to make frame 4.
Frame 4: turn off visibility on layer 1 copy and turn on layer 1. Set the time for this frame to be no delay.

8. Click back on frame 1. Set the optimize panel to GIF image with lossy = 0, colors = 3, web, no dither.

9. Click file=> Save optimized as. Set the filename to burst1.gif. Repeat the save and save the next time in the same directory as burst2.gif. Repeat two more times and save as burst3.gif and burst4.gif.

10. Open up a notepad by clicking start=>programs=>accessories=>notepad. Copy and paste the following script into your notepad.

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mousetrails</title>
</head>
<script>
B=document.all;
C=document.layers;
T1=new Array("burst1.gif",40,40,"burst2.gif",30,30,"burst3.gif",25,25,"burst4.gif",20,20,"burst4.gif",15,15,"burst1.gif",10,10)
nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
for (i=0;i<nos;i++){
createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>")}
function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");
if(St){
if (C)
write(" style='");
write(St+";' ")
}
else write((B)?"'":"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}
function closeContainer(){
document.write((B)?"</div>":"</layer>")
}
function getXpos(N){
return (B) ? parseInt(B[N].style.left) : C[N].left
}
function getYpos(N){
return (B) ? parseInt(B[N].style.top) : C[N].top
}

</body>

</html>

11. To save the notepad, click file=>save. Set the "save in" field to the folder where your burst files are. Name the file index.html and save as type "All files" by clicking the downward arrow on the right side of the box.

You are ready to add your content to this page opening this file up in your HTML editor!