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 7 of 7

Thread: animating a gif

  1. #1
    New Coder
    Join Date
    Nov 2011
    Location
    I live in Hollywood, CA
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question animating a gif

    I'm trying to create this animated gif array. Everything is in place, almost exactly like another one I did successfully. But I must be overlooking something here. If anyone can take a look at the code and give me suggestions I would appreciate it. Thanks.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>puppies</title>
    <script type="text/javascript">
    var rusty=new Array(7);
    rusty[0]="puppies/puppy.gif";
    rusty[1]="puppies/puppy0.gif";
    rusty[2]="puppies/puppy1.gif";
    rusty[3]="puppies/puppy2.gif";
    rusty[4]="puppies/puppy3.gif";
    rusty[5]="puppies/puppy4.gif";
    rusty[6]="puppies/puppy5.gif";
    var myPup=[0];

    function getPup(){

    if(myPup<rusty.length){
    myPup = 0;
    }
    else{
    document.getElementById("pup").src="puppies/"+ rusty[myPup];
    myPup = myPup+1;

    }



    }
    setTimeout("getPup()", 1000)
    </script>
    </head>

    <body>
    <h1>Puppies</h1>
    <img src="puppies/puppy0.gif" id="pup" width="97" height="60" alt="puppy" onclick="getPup()"/>


    </body>
    </html>


    Last edited by swydell; 11-09-2011 at 10:37 PM. Reason: I didn't see the code I had inserted

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    What is this line supposed to do?
    Code:
    var myPup=[0];
    With this line you are creating an array with just one element. So myPup[0]==0. But later you want to use myPup as an integer. So I think you should change the line to
    Code:
    var myPup=0;

  • Users who have thanked devnull69 for this post:

    swydell (11-10-2011)

  • #3
    New Coder
    Join Date
    Nov 2011
    Location
    I live in Hollywood, CA
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I made the change. You can see it here. Thanks. Yet, 'm still not getting the animation. Each image is a different pose of the puppy to make it appear running. I think my logic is wrong. Any suggestions.?

    var myPup=0;

    function getPup(){

    if(myPup<rusty.length){
    myPup = 0;
    }
    else{
    document.getElementById("pup").src="puppies/"+ rusty[myPup];
    myPup = myPup+1;

    }



    }
    setTimeout("getPup()", 1000)
    </script>
    </head>

    <body>
    <h1>Puppies</h1>
    <img src="puppies/puppy0.gif" id="pup" width="97" height="60" alt="puppy" onclick="getPup()"/>

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Yes, and you would have also seen it even without a decent debugger tool

    Just step through your code with pencil and paper and note variable values.

    You'll see the following
    1. myPup is set to 0
    2. a timer is started that will call getPup() after one second
    3. in getPup() you check if myPup is less than the length of the array (which is true of course as 0<7). In that case you set myPup to 0 again

    This is where the problem is. I think you only need to change myPup<rusty.length to myPup==rusty.length

    In that case
    3. in getPup() you check if myPup is equal to the length of the array (which is false of course as 0 is not equal to 7)
    4. in the else branch you have code to show rusty[0] and increase myPup by 1

    Second problem here: There is no timer that will call getPup() again. setTimeout will only work once.

    So EITHER you change setTimeout to setInterval OR you call setTimeout again at the end of the function getPup()

  • #5
    New Coder
    Join Date
    Sep 2011
    Location
    United Kingdom
    Posts
    72
    Thanks
    2
    Thanked 3 Times in 3 Posts

    GIF or JS animation !???

    Don't quite understand, why you try to make an animated GIF with a Java Script? Animation is a fetcher of the GIF picture format.

    Have a look at this:
    http://www.youtube.com/watch?v=f-9_HwRcd1A

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Why JavaScript?

    As long as you are using GIF images, you could simply create an animated GIF using a graphical tool, such as Photoshop or even GIMP. GIMP is a freeware graphical tool, so that you have nothing to pay for.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by swydell View Post
    I'm trying to create this animated gif array. Everything is in place, almost exactly like another one I did successfully. But I must be overlooking something here. If anyone can take a look at the code and give me suggestions I would appreciate it. Thanks.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>puppies</title>
    <script type="text/javascript">
    var rusty=new Array(7);
    rusty[0]="puppies/puppy.gif";
    rusty[1]="puppies/puppy0.gif";
    rusty[2]="puppies/puppy1.gif";
    rusty[3]="puppies/puppy2.gif";
    rusty[4]="puppies/puppy3.gif";
    rusty[5]="puppies/puppy4.gif";
    rusty[6]="puppies/puppy5.gif";
    var myPup=[0];

    function getPup(){

    if(myPup<rusty.length){
    myPup = 0;
    }
    else{
    document.getElementById("pup").src="puppies/"+ rusty[myPup];
    myPup = myPup+1;

    }



    }
    setTimeout("getPup()", 1000)
    </script>
    </head>

    <body>
    <h1>Puppies</h1>
    <img src="puppies/puppy0.gif" id="pup" width="97" height="60" alt="puppy" onclick="getPup()"/>


    </body>
    </html>


    Hi i am new to this forum. i want to tell u some changes in code as shown below:

    var mayPup;
    function getPup(){

    if(myPup<rusty.length){
    document.getElementById("pup").src="puppies/"+ rusty[myPup];
    myPup = myPup+1;

    if(myPup==rusty.length)
    myPup = 0;

    }

    }


  •  

    Tags for this Thread

    Posting Permissions

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