Help With a Script

[kennyp]

Hi guys-

A "Flying Bats" script I found, shown below, confines the bats to fly only within a small area of the screen (as can be seen here where I'm preparing a Halloween splash/welcome page).

I tried to extend the flying area to the whole screen, but I can't get it to work. Can you please see where it can set ?

Thanks,

Kenny

<script language="JavaScript1.2">

<!--


/*

Flying Bats- By Dynamic Drive, based on script by Kurt ([email protected])

For full source, usage terms, and 100's more DHTML scripts

Visit http://www.dynamicdrive.com

*/


Cupid=new Image();

Cupid.src="bat.gif";  //specify path to bat image

amount=3;  //Number of cupids, minimum must be 3.

Xpos=700;  //cupids x coordinates, in pixel

Ypos=200;  //cupids y coordinates, in pixel

step=0.3; //Animation speed (smaller is slower)

dismissafter=15;  //seconds after which Cupids should disappear, in seconds


var ns6=document.getElementById&&!document.all

bats=new Array(3)

if (document.layers){

for (i=0; i < amount; i++)

{document.write("<LAYER NAME=n"+i+" LEFT=0 TOP=-50><a href='http://www.dynamicdrive.com'><IMG SRC='"+Cupid.src+"' NAME='nsi' width=69 height=60 border=0></a></LAYER>")}

}

else if (document.all||ns6){

document.write('<div id="out" style="position:absolute;top:0;left:0;z-index:1000"><div id="in" style="position:relative">');

for (i=0; i < amount; i++){

if (document.all)

document.write('<a href="http://www.dynamicdrive.com"><img src="'+Cupid.src+'" id="msieBats" style="position:absolute;top:-50;left:0" border=0></a>')

else

document.write('<a href="http://www.dynamicdrive.com"><img src="'+Cupid.src+'" id="ns6Bats'+i+'" width=69 height=60 style="position:absolute;top:-50;left:0" border=0></a>')

}

document.write('</div></div>');

}


yBase=xBase=currStep=a_count=0;

b_count=1;

c_count=2;

d_count=3;

move=1;

if (document.layers||ns6){

yBase=window.innerHeight/3;

xBase=window.innerWidth/6;

if (document.layers)

window.captureEvents(Event.MOUSEMOVE);


}

if (document.all){

yBase = window.document.body.offsetHeight/3;

xBase = window.document.body.offsetWidth/6;

}


function dismisscupid(){

clearInterval(flycupid)

if (document.layers){

for (i2=0; i2 < amount; i2++){

document.layers['n'+i2].visibility="hide"

}

}

else if (document.all)

document.all.out.style.visibility="hidden"

else if (ns6)

document.getElementById("out").style.visibility="hidden"

}


if (document.layers){

for (i=0; i < amount; i++)

document.layers['n'+i].document.images['nsi'].src=Cupid.src

}

else if (document.all){

for (i=0; i < amount; i++)

document.all.msieBats[i].src=Cupid.src

}

else if (ns6){

for (i=0; i < amount; i++)

document.getElementById("ns6Bats"+i).src=Cupid.src

}


function Animate(){

a_count+=move;

b_count+=move;

c_count+=move;

currStep+=step;

if (a_count >= bats.length) a_count=0;

if (b_count >= bats.length) b_count=0;

if (c_count >= bats.length) c_count=0;

if (document.layers){

for (i=0; i < amount; i++) {

  var NewL="n"+i

  document.layers[NewL].top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)

  document.layers[NewL].left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)

  }

}


if (document.all){

for (i=0; i < amount; i++){

  document.all.msieBats[i].style.pixelTop = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)

  document.all.msieBats[i].style.pixelLeft =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)

 }

}


if (ns6){

for (i=0; i < amount; i++){

  document.getElementById("ns6Bats"+i).style.top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)

  document.getElementById("ns6Bats"+i).style.left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)

 }

}


}

flycupid=setInterval('Animate()',30);

setTimeout("dismisscupid()",dismissafter*1000)

//-->

</script>

 

[CodeMonkeyJ]

The positions are governed by the formulas at the bottom (the ones with sin/cos functions). Try multiplying them with a modifier to change the shape of the flights. If you need different flight patterns or to dynamically change how far down or to the sides they can fly, you'll need to create new formulas.

  document.getElementById("ns6Bats"+i).style.top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)*2

  document.getElementById("ns6Bats"+i).style.left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)*2

 

[kennyp]

Thank you so much for your reply CodeMonkeyj. I played around with the numbers as you suggested and the bats are now flying around the whole screen.

​

 

[kennyp]

@CodeMonkeyJ

I tried using the exact code on another page and it wont work at all configured with the same changed numbers. However, the original code, with the numbers in the code above still works.

The script already has settings that could move the bats (or whatever graphic) on the x and y axis. However there's no setting that could widen or heighten the flying range.

If you know how, would you please show me how to write a formula that could either widen or heighten the flying range?
I tried using random numbers but it just wont work

Thanks

 

[CodeMonkeyJ]

I suspect it has to do with the window size. Looking at the code again, there's a better solution. Find the xBase and yBase variables. those are what are used to constrain the images to the small section of the screen as the original uses. Lessen the divisor of each and they should fly more of the window (try 2.5 and 4?). Our original solution might accomplish the same thing, but is less correct, for sure.

If the code just isn't working, open up the developer tools and check out the JavaScript console for any errors. Might be a typo, might be a security thing. It should work, regardless, even if the flight is weird, overshoots, etc. Post any error(s) you see.

Making your own flight functions is a little more hardcore (read: mathy). I had to plug in the formulae into an online graphing calculator just to see what it actual looks like. Just play around and create function that return y=-1 to 1 and look someone natural in the flight pattern.

 

[kennyp]

Thank you so much again, CodeMonkeyJ. I used various divisors in yBase and xBase, as you suggested and I was able to extend the flight pattern horizontally and vertically just as I wanted.

yBase = wwhs[1]/2.4,xBase = wwhs[0]/2.2;

Using the same script, I did another holiday welcome/splash page for a friend's website; a Valentine's day page where hearts fly over the entire page and of course, the Halloween page here.

Thank you again,

Kenny