...

View Full Version : An animation imitation not working



SpiritualStorms
06-29-2004, 02:46 PM
I had been on another forum trying to figure out how to do an imitation of an animation, but no one seems to know how to actually make it work.

Here's the code:


<!--Begin hide......

var maxArray = 23 //the number of images in the anim
var imageH = 100 //image height
var imageW = 100 //image width

//Now onto the actual collection of Frames
var imgs = new Array(); //array of images

var path="http://geocities.yahoo.com/filemanager?directory=forAnimation";

//var path = "http://www.mysite.com/images/"

//time between swapps.................

var delay = 300 //period between images

//Now loop through the array.........

for(var i = 0;i < maxArray;i++){

//create the object.............
imgs[i] = new Image(imageW, imageW)

//give it an image
imgs[i].src = path + "Frame" + temp + i + ".bmp";
}

/*built the complete thing each time, all you have to do is change it
to suit you images. Now this will be a little more tricky as you
have numbered your images with a zero prefix i.e., "Frame01.bmp"
instead of "Frame1.bmp" so you will have to test the value of "i"
and edit the string accordingly:*/

var temp = ""
if(i < 9){
temp = 0
} else if(i > 9 && < 20){
temp = 1
} else {
temp = 2
}

var t_out = 0;

//to hold the timeout instance
num = 0;
//to control the image sequence

function runShow() {
//Now create the actual function that does the animation.....

//check to see that the anime has not finished
if(num == maxArray){

//anime finished, tidy up by clearing the timeout

window.clearTimeout(t_out);

//leave the function
return;
} else {

//Show the selected image
setImage((num++));
}
}


//Now another function
function setImage(img){

//the image holder
var animate = document.images["anime"];

//change the src
animate.src = imgs[img].src;

//get the next image after the requisite time
t_out = window.setTimeout(runShow,delay);
}

window.onload = runShow
//End of hide-->

Rip it apart fellas.

Willy Duitt
06-29-2004, 03:42 PM
I'm not in the mood to "rip apart" your code, particularly when I have one which works and the code is more efficient. ;)

This script will load any number of simularly named and sequentially numbered images by declaring the first image to be shown. The images are postloaded which means the page is allowed to quickly load without being stalled while the images preload, but once the page has loaded, the slide images will begin to preload. If, as in your case, the postloading stalls your initial and immediate animation you may need to convert this from postloading to preloading.



<html>
<head>
<title>Post Load And Display Sequentially Numbered Images</title>
<BASE HREF="http://www.freewebs.com/foufou/">
<script type="text/javascript">
<!--// WRITTEN BY: WillyDuitt@hotmail.com 02/04/2004 //;
// PLEASE BEGIN BY ANSWERING THE FOLLOWING QUESTIONS! //;
// HOW MANY SEQUENTIAL IMAGES WOULD YOU LIKE TO SHOW? //;
var howMany = 4;
// USING QUOTES. WHAT IS THE PATH TO THE FIRST IMAGE? //;
var firstImage = 'eliza1.jpg';
// HOW MANY SECONDS BEFORE CHANGING IMAGES(.5 = ˝sec) //;
var speed = 5;
// USING QUOTES. USE FILTERS FOR IE USERS(yes | no)? //;
var filters = "yes";

////////////////////////////////////////////////////////;
// GLOBAL VARIABLES NO NEED TO EDIT BEYOND THIS POINT //;
var startNumber = (/\d+(?=\.)/.exec(firstImage));
var lastNumber = (startNumber*1)+(howMany-1);
var nextImage = (startNumber);

function loadSlides(){
for(var i=startNumber;i<=lastNumber;i++){
var postLoad = new Array();
postLoad[i] = new Image();
postLoad[i].src = firstImage.replace(/\d+(?=\.)/,i);
} showSlides("slider");
}

function showSlides(slider){
var image = document.images[slider];
if(document.all && filters.toLowerCase() == "yes"){
image.style.filter = "blendTrans(duration=3)";
image.filters.blendTrans.Apply();
image.filters.blendTrans.Play();
} if(nextImage > lastNumber){ nextImage = startNumber };
image.src = firstImage.replace(/\d+(?=\.)/,nextImage);
setTimeout('showSlides("slider")',speed*1000);
nextImage++;
}
//-->
</script>
</head>

<body onload="loadSlides()">
<div style="text-align:center;width:350px;height:280px">
<img name="slider" width="350" height="280" src="eliza1.jpg">
</div>

</body>
</html>


.....Willy

Edit: Fixed regular expression to only target numbers immediately prior to a dot (.).....

SpiritualStorms
07-08-2004, 01:08 PM
That was an interesting script. I finally made turned it into a file just to see if it would work. I will need time to examine it so that i may understand it's foundation. Not sure if it's what i had in mind. It works though.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum