Make an animated gif without using a gif

DataMine
by DataMine · 6 posts
11 years ago in Javascript
Posted 11 years ago · Author
On my IMVU homepage, I wanted to advertise icons I have for sale. Now displaying every icon in a single image would make the image large and therefore it would not fit into the custom layout I was designing. To the solve this problem, my first thought was to simply use an animated gif. Normally this would suit my needs just fine. However I find the gif file format to be severely lacking in quality. No matter what program I used to make the gif or what quality settings I chose, the gif always came out looking horrible. Now this just wasn't gonna do. How can I advertise how good my icons look when the image I am using looks like shit?

So, the following code is my solution to this problem. It's more complicated and adds a lot more code to your profile, but in the end, the quality is worth it.

Simply put, this code uses a variable, a timer and switch statement to effectively make an animation loop. Every time you call the function, the variable value changes, therefore, the next time the function is called, it loads a different block of code which shows a different image. I also added code to stop and start the function so the viewer can hover their mouse over my icons to stop the animation and look at the icons being advertised in that "frame". It's pretty simple once you learn it and it's easy to expand on.

I got the idea from http://www.devx.com and modified to suit my needs. For the most part the code is the same. I added another case to the switch, added the stop/start functions and added events to the image for the stop/start functions.

Note: I've noticed some hiccups with the timer when you switch tabs so that's something to keep in mind.

Code
<HTML>
   <HEAD>
      <SCRIPT LANGUAGE=JavaScript>
         //Declare the variable to start with.
         var intImage = 3;
         
         //The setInterval method does not have the ability to be paused.
         //Therefore this function is needed to start it again.
         function startSwap() {
            //There are 1000 milliseconds in one second.
            var interval = setInterval(function (){swapImage()},1000);
         }
         
         //This is the core animation code. This function will show a different image each time it is called.
         //It does this because each time it's called, it changes the intImage variable.
         function swapImage() {
            switch (intImage) {
               case 1:
                  IMG1.src = "Icons1.png"
                  intImage = 3
                  return(false);
               case 2:
                  IMG1.src = "Icons3.png"
                  intImage = 1
                  return(false);
               case 3:
                  IMG1.src = "Icons2.png"
                  intImage = 2
                  return(false);
            }
         }
         
         //This will stop the setInterval method.
         function stopSwap() {
            clearInterval(interval);
         }
      </SCRIPT>
   </HEAD>
   <BODY onload="startSwap()">
      <!--The onmouseover and onmouseout events allow you to stop and start the animation.-->
      <!--This way the viewer can stop and look at whichever frame of the animation they want.-->
      <IMG id="IMG1" name="IMG1" src="Icons1.png" onmouseover="stopSwap()" onmouseout="startSwap()">
   </BODY>
</HTML>
Posted 11 years ago
Nice! Let me try it too...
Posted 9 years ago
D.M wrote:
On my IMVU homepage, I wanted to advertise icons I have for sale. Now displaying every icon in a single image would make the image large and therefore it would not fit into the custom layout I was designing. To the solve this problem, my first thought was to simply use an animated gif. Normally this would suit my needs just fine. However I find the gif file format to be severely lacking in quality. No matter what program I used to make the gif or what quality settings I chose, the gif always came out looking horrible. Now this just wasn't gonna do. How can I advertise how good my icons look when the image I am using looks like shit?So, the following code is my solution to this problem. It's more complicated and adds a lot more code to your profile, but in the end, the quality is worth it.Simply put, this code uses a variable, a timer and switch statement to effectively make an animation loop. Every time you call the function, the variable value changes, therefore, the next time the function is called, it loads a different block of code which shows a different image. I also added code to stop and start the function so the viewer can hover their mouse over my icons to stop the animation and look at the icons being advertised in that "frame". It's pretty simple once you learn it and it's easy to expand on.I got the idea from http://www.devx.com and modified to suit my needs. For the most part the code is the same. I added another case to the switch, added the stop/start functions and added events to the image for the stop/start functions.Note: I've noticed some hiccups with the timer when you switch tabs so that's something to keep in mind.Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)//Declare the variable to start with.var intImage = 3;//The setInterval method does not have the ability to be paused.//Therefore this function is needed to start it again.function startSwap() {//There are 1000 milliseconds in one second.var interval = setInterval(function (){swapImage()},1000);}//This is the core animation code. This function will show a different image each time it is called.//It does this because each time it's called, it changes the intImage variable.function swapImage() {switch (intImage) {case 1:IMG1.src = "Icons1.png"intImage = 3return(false);case 2:IMG1.src = "Icons3.png"intImage = 1return(false);case 3:IMG1.src = "Icons2.png"intImage = 2return(false);}}//This will stop the setInterval method.function stopSwap() {clearInterval(interval);}
GeSHi ©


Cool script. i might play around with this later.
Posted 9 years ago
Viewing your homepage. i see product icons which look great. Very much like the feature of red outline upon hover; however, found icon doesnt pause for me using FF. I didnt see the advertisement of icons you have for sale which you stated. Maybe im misunderstanding what icona im to be looking at.

Found as well the horrible quality using gif, unfortunately the nature of the beast no matter how i try to fix and improve the quality. Most evident when i convert from avi to gif and having to resize.
Posted 9 years ago · Author
xhynrae wrote:
Viewing your homepage.i see product icons which look great.Very much like the feature of red outline upon hover; however, found icon doesnt pause for me using FF.I didnt see the advertisement of icons you have for sale which you stated.Maybe im misunderstanding what icona im to be looking at.Found as well the horrible quality using gif, unfortunately the nature of the beast no matter how i try to fix and improve the quality.Most evident when i convert from avi to gif and having to resize.


The top row of icons switch after a second or two. It alternates between 8 icons. When you hover your mouse over one of them, it will stop switching them. Think of it like one of those billboards that has two different advertisements on it. Every few seconds the parts of the billboard that display the advertisement rotate to display a different one.

My icons are also gifs because animated icons usually grab attention better. This code doesn't stop the gifs from playing like how IMVU does it with the inventory. It simply stops the code from switching to the next set if icons to display.
Posted 7 years ago
Cool and amazing! and it looks great hehe nice one DM, thank you DM for everything your doing i really appreciate your hard work, i'm trying to run around your scripts and trying them lol love your work man !

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in

Already have an account? Sign in here

SIGN IN NOW

Create an account

Sign up for a new account in our community. It's easy!

REGISTER A NEW ACCOUNT