Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    An animation imitation not working

    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:

    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.
    LovesWar

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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 (.).....
    Last edited by Willy Duitt; 07-09-2004 at 07:46 PM.

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    LovesWar


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •