{"id":7629,"date":"2010-07-16T07:07:00","date_gmt":"2010-07-16T07:07:00","guid":{"rendered":"https:\/\/www.htmlgoodies.com\/uncategorized\/so-you-want-an-animated-gif-huh\/"},"modified":"2021-04-23T21:23:50","modified_gmt":"2021-04-23T21:23:50","slug":"so-you-want-an-animated-gif-huh","status":"publish","type":"post","link":"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/","title":{"rendered":"So, You Want An Animated .gif, Huh?"},"content":{"rendered":"<p><IMG src=\"\/images\/time_ani.gif\"><br \/>\n<P><br \/>\n<P><I><B>First read this:<\/B> Versions change quickly and the interface shown here may not be in use when you grab the program for yourself. However, the basic concepts will always stay the same. Also &#8211; I mention the image editor PaintShop Pro Photo X2 below. Grab it <A href=\"http:\/\/www.corel.com\/servlet\/Satellite\/us\/en\/Product\/1184951547051#versionTabview=tab0&amp;tabview=tab0\">here<\/A>.<\/I><br \/>\n<P>Ah, the animated gif. Or as I call it, <I>the anti-java<\/I> animation. The rotating thing above is an animated gif. It should be moving, at least. As far as I know, animated gifs will run on all levels of browsers. The reason is the way the animation is created. This is not something created by a <A href=\"\/perl\/cgi-tutorials\/\">CGI<\/A> or a <A href=\"\/javascript\/>JavaScript<\/A> effect. What is actually happening is that the browser is simply placing one gif after another into that same space. Your eye just perceives it as a fluid movement, kind of like an old flip book movie.<br \/>\n<P>If you&#8217;re interested in creating an animated banner, go <A href=\"\/primers\/banner_6.html\">here<\/A>.<br \/>\n<H2>The gif Compiler<\/H2>Before we go any further, you must first go and get an animated gif program. For this tutorial, we will be using the <A HREF=\"http:\/\/www.mindworkshop.com\/gifcon.html\">GIF Construction Set Professional<\/A> by Alchemy Mindworks Inc. It&#8217;s available for Windows XP, Vista and Windows 7, with solutions available also for Linux and Macintosh. It&#8217;s not free any longer, however, and costs a mere $24.99. There are also many other animated gif tools, such as:<br \/>\n<UL><br \/>\n<LI><A href=\"http:\/\/www.blumentals.net\/egifan\/\">Easy GIF Animator<\/A> &#8211; Easy GIF Animator supports all types of GIF animation and provides high compression, and sells for $19.85.<br \/>\n<LI><A href=\"http:\/\/www.easyanimationtools.com\/products\/index.htm\">Active GIF Creator<\/A> &#8211; Useful for creating and optimization animated GIF- images, buttons, banners and other Web graphics, sells for $39.00.<br \/>\n<LI><A href=\"http:\/\/www.pysoft.com\/GIF_Designer_fr.html\">2D&amp;3D Animator<\/A> &#8211; This is an object-oriented design interface that enables you to edit graphics, manipulate text and layers (graphic animations), apply special effects, and then compile the animated graphic. Sells for $49.00. <\/LI><\/UL>As we mentioned this tutorial was designed around gif Construction Set. So if you want to follow along with this tutorial, go get it and install it on your computer. It&#8217;s about 12 MB in size, and they allow you to download a trial version that you can use to work through this tutorial.<br \/>\n<P><br \/>\n<H2>The gifs<\/H2>Did you go and get the gif Construction Set yet? Did you install it on your computer? Okay, good. Now, on to the hard part. No, not the creation of the animation, but rather the pictures that you will animate.<br \/>\n<P>I know you&#8217;ve seen a flip book. It&#8217;s one of the books that have a little picture up in the right-hand corner of each page and if you flip the pages quickly enough it appears as if the little pictures are moving. It&#8217;s the same principle as a movie or video tape. A bunch of still pictures roll past rather quickly (24 a second for film, 30 a second for video tape) and your eye sees it as movement.<br \/>\n<P><I>Where do I get the pictures?<\/I><BR>You make them! (I wish you hadn&#8217;t said that, Joe.) Well, you could go out into the world of cyberspace and find them. People are now offering pics and animated gifs. But what fun would that be?<br \/>\n<P><I>I don&#8217;t have a program that makes gifs!<\/I><BR>Why not? I mentioned a few above as well as a program called <B>PaintShop Pro<\/B>. It&#8217;s really easy to use and makes really nice pics out of nothing. It&#8217;s also a good program to run a scanner from and to manipulate the images you create. The best endorsement I could give is that it&#8217;s what I use to run my Logitech scanner. So go get it.<br \/>\n<P><br \/>\n<H2>Making the Images<\/H2>You&#8217;re not going to send me away again, are you Joe? No. You have everything you need now. Plus you&#8217;ve probably filled a good 12 Megabytes of space on your hard drive. (You <I>are<\/I> sure you want these animated gifs, aren&#8217;t you?)<br \/>\n<P>When you create the gifs you need to follow a few guidelines. These aren&#8217;t my guidelines, either. These are the specs the gif Construction program requires:<br \/>\n<UL><br \/>\n<UL><br \/>\n<LI>You must save the images in gif (Compuserve) format.<br \/>\n<LI>You must save the image at the 256 color level.<br \/>\n<LI>All the images you use must be the same size. <\/LI><\/UL><\/UL><br \/>\n<H3>Why?<\/H3>The easy answer is that the gif Construction program requires it. Actually, the reason is that you are literally creating a little movie frame by frame. All the frames must be the same size, they must all be in the same format, and all saved at the same color level.<br \/>\n<P><B>Here are a few tips&#8230;<\/B><BR>1. <I>Create a template for your images.<\/I><br \/>\n<P>Remember the clock animation I did above? I created a white square using PaintShop Pro. I then drew a circle in the middle of the square and saved it, at the 256 color level, as &#8220;clock.gif&#8221;. I was then able to bring that template up, draw a line to one o&#8217;clock, and save it under another name. Ditto for two o&#8217;clock, three o&#8217;clock, four o&#8217;clock, etc., etc., until I went the whole way around the dial. That way I was sure the circle would remain stable through the complete animation. With me still?<br \/>\n<P>2. <I>Do each of the animations on its own disc.<\/I> (You&#8217;ll thank me for this later.)<br \/>\n<P>3. <I>Make your gifs as small as you can.<\/I><br \/>\n<P>4. <I>Make your gifs with the fewest number of bits possible.<\/I><br \/>\n<P>The reasoning for #3 and #4 is obvious. Remember that the browser will load one gif after another giving the impression of movement. If the gifs are huge, it&#8217;s slow. If the gifs are small and made up of fewer bits, they will load faster and look better.<br \/>\n<P><br \/>\n<H2>Making the Animated gif<\/H2>By the way, you may want to print this page now. It&#8217;ll make it so much easier to animate the gif if you have the instructions right in front of you.<br \/>\n<P>First you&#8217;re going to need some gifs to animate. I shall give you four from my collection for you to use. These are four arrows, all the same size, all saved at the 256 color level. What we will make is a four-panel animation of an arrow spinning to the right, round and round. Dull yes, but good for your first shot at the process. Download all four and place them all in a directory. Do not change the names of the images. Also, don&#8217;t worry that the numbers appear to be out of order. I&#8217;ll fix that when we make the animation. My suggestion is to place them all in an empty directory like TEMP. It&#8217;ll just make it easier.<br \/>\n<P><br \/>\n<CENTER>Click to Download each:<BR>&#91;<A href=\"\/images\/arrow1.gif\">Left Arrow<\/A>&#93; &#91;<A href=\"\/images\/arrow2.gif\">Right Arrow<\/A>&#93; &#91;<A href=\"\/images\/arrow3.gif\">Up Arrow<\/A>&#93; &#91;<A href=\"\/images\/arrow4.gif\">Down Arrow<\/A>&#93;<br \/>\n<P><\/CENTER>Now all are downloaded. Let&#8217;s make the animation. Follow the instructions straightaway:<br \/>\n<P><br \/>\n<OL><br \/>\n<LI>Get out of your browser and open the gif Construction program you downloaded.<br \/>\n<LI>A box will open with some buttons along the top. The buttons read &#8220;VIEW, INSERT, EDIT, DELETE, etc., etc. It looks like this:<br \/>\n<P><br \/>\n<CENTER><IMG height=240 src=\"\/images\/contruct.gif\" width=320> <\/CENTER><br \/>\n<P>If what you have is close to this, you&#8217;re ready to go. <\/P><br \/>\n<LI>Go under the <B>FILE<\/B> menu and choose <B>NEW<\/B>.<br \/>\n<LI>A highlighted line will appear that states <B>HEADER gif89a SCREEN 640&#215;480<\/B>. 640&#215;480 deals with the number of pixels that make up the image. Remember, this is a computer image. It is made up of little dots of color. Those little dots are called &#8220;pixels,&#8221; short for &#8220;picture elements.&#8221;<br \/>\n<LI>This is not the correct size. The four arrows that you downloaded are only 30&#215;30 pixels. Click twice on the highlighted <B>HEADER gif89a<\/B> line.<br \/>\n<LI>A box should pop up where you will again see the numbers 640 and 480. It looks like this:<br \/>\n<P><br \/>\n<CENTER><IMG src=\"\/images\/contruct2.gif\" width=320> <\/CENTER><br \/>\n<P>Change those numbers to 30 and 30 and click OK. <\/P><br \/>\n<LI>You&#8217;re back to the original screen and the line should now read 30&#215;30. Does it? If not, try again to change the numbers. These numbers will denote the size of the images you are using.<br \/>\n<LI>You must now tell the system what you want to happen regarding the movement of the gifs. You can do other things, and you can learn them on your own, but for now we are going to <B>LOOP<\/B> the animation, meaning the pictures will continue to go one after the other at all times. The gif above is looped.<br \/>\n<LI>Click on the button marked <B>INSERT<\/B>. A box will pop up. It looks like this:<br \/>\n<P><br \/>\n<CENTER><IMG src=\"\/images\/contruct3.gif\"> <\/CENTER><br \/>\n<P>Choose <B>LOOP<\/B>. Poof! It should now say LOOP under the HEADER line. <\/P><br \/>\n<LI>Now it&#8217;s time to start placing images. <B>Remember this:<\/B> All images must have a <B>CONTROL<\/B> command before them. Always&#8230; no exceptions.<br \/>\n<LI>Click on <B>INSERT<\/B> and choose <B>CONTROL<\/B>. CONTROL should now be on the screen.<br \/>\n<LI>Click on the highlighted <B>CONTROL<\/B>. Another box should appear. It should look like this:<br \/>\n<P><br \/>\n<CENTER><IMG src=\"\/images\/contruct4.gif\"> <\/CENTER><br \/>\n<P><\/P><br \/>\n<LI>See in the box where it says <B>1\/100th of a second<\/B>? That&#8217;s the time span between the current gif and when the next one will load. More 100ths to make it slower, less to make it faster. For now, insert &#8220;15&#8221; 100ths of a second. Choose OK.<br \/>\n<LI>Click again on <B>INSERT<\/B> and choose <B>IMAGE<\/B>.<br \/>\n<LI>Another box will pop up giving you the ability to find and choose the images you downloaded from me. Find &#8220;arrow1.gif&#8221; and choose it. It should appear on the screen.<br \/>\n<LI>Choose <B>INSERT<\/B> again and select <B>CONTROL<\/B>.<br \/>\n<LI>Click twice on the line and again change the 100ths of a second to 15. Click OK.<br \/>\n<LI>Choose <B>INSERT<\/B> again and choose <B>IMAGE<\/B>.<br \/>\n<LI>When the box pops up, find &#8220;arrow3.gif&#8221; and choose it.<br \/>\n<LI>Follow the format above again and place another <B>CONTROL<\/B>, changing it to 15 100ths of a second.<br \/>\n<LI>Again, choose <B>INSERT<\/B> and <B>IMAGE<\/B> and place &#8220;arrow2.gif.&#8221;<br \/>\n<LI>Place another <B>CONTROL<\/B>, changing the 100ths of a second to 15 again.<br \/>\n<LI>Place the last image &#8220;arrow4.gif.&#8221; <BR>(See, you&#8217;re doing the same thing again and again&#8230; control, image, control, image, control, image, etc., etc.)<br \/>\n<LI><B>This is what should be written in front of you:<\/B><br \/>\n<P>HEADER gif89a SCREEN 40&#215;40<BR>LOOP<BR>CONTROL<BR>IMAGE ARROW1.gif 30X30,256<BR>CONTROL<BR>IMAGE ARROW3.gif 30X30,256<BR>CONTROL<BR>IMAGE ARROW2.gif 30X30,256<BR>CONTROL<BR>IMAGE ARROW4.gif 30X30,256<BR><br \/>\n<P><\/P><br \/>\n<LI>Want to see it? Click on <B>VIEW<\/B>. The screen will go black and the arrow will spin around.<br \/>\n<LI>To get back, hit the ESC key.<br \/>\n<LI>Save the image animation by choosing <B>SAVE AS<\/B> under the <B>FILE<\/B> menu.<br \/>\n<LI>If you have any problems, you will now get a warning and what to fix. If not, good job. Save it under a name you can remember.<br \/>\n<LI>The program will undergo a long list of movements for your entertainment while it compiles your animation. Then it&#8217;s done&#8230; nothing to it. <\/LI><\/OL><br \/>\n<P><A name=placing><\/A><br \/>\n<H2>Placing It on a Page<\/H2><br \/>\n<CENTER>Place the animation (the last name you gave it) just as you would any image. Use the Image Command format:<br \/>\n<P>&lt;IMG SRC=&#8221;animation.gif&#8221;&gt;<br \/>\n<P>Don&#8217;t try changing the size or anything else. Let it be just as you saved it.<br \/>\n<P><\/CENTER><A name=working><\/A><br \/>\n<H2>It&#8217;s Not Working!<\/H2>Strange, huh? But did it work when you clicked on the VIEW button? Yeah, I have found that, too. Try FTP-ing the animation and all the little images you used to make it onto your server and then go and look at it. I&#8217;ll bet it works.<br \/>\n<P>I hope this helps. It really is easier than it may seem at first. Good Luck.<br \/>\n<P><\/P><\/p>\n","protected":false},"excerpt":{"rendered":"<p>First read this: Versions change quickly and the interface shown here may not be in use when you grab the program for yourself. However, the basic concepts will always stay the same. Also &#8211; I mention the image editor PaintShop Pro Photo X2 below. Grab it here. Ah, the animated gif. Or as I call [&hellip;]<\/p>\n","protected":false},"author":57,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[33771],"tags":[],"b2b_audience":[],"b2b_industry":[],"b2b_product":[68,80],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>So, You Want An Animated .gif, Huh? | HTML Goodies<\/title>\n<meta name=\"description\" content=\"First read this: Versions change quickly and the interface shown here may not be in use when you grab the program for yourself. However, the basic\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"So, You Want An Animated .gif, Huh? | HTML Goodies\" \/>\n<meta property=\"og:description\" content=\"First read this: Versions change quickly and the interface shown here may not be in use when you grab the program for yourself. However, the basic\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Goodies\" \/>\n<meta property=\"article:published_time\" content=\"2010-07-16T07:07:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-23T21:23:50+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@htmlgoodies\" \/>\n<meta name=\"twitter:site\" content=\"@htmlgoodies\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joe Burns\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\",\"name\":\"HTML Goodies\",\"url\":\"https:\/\/www.htmlgoodies.com\/\",\"sameAs\":[\"https:\/\/twitter.com\/htmlgoodies\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png\",\"contentUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png\",\"width\":584,\"height\":136,\"caption\":\"HTML Goodies\"},\"image\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#website\",\"url\":\"https:\/\/www.htmlgoodies.com\/\",\"name\":\"HTML Goodies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.htmlgoodies.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/#webpage\",\"url\":\"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/\",\"name\":\"So, You Want An Animated .gif, Huh? | HTML Goodies\",\"isPartOf\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#website\"},\"datePublished\":\"2010-07-16T07:07:00+00:00\",\"dateModified\":\"2021-04-23T21:23:50+00:00\",\"description\":\"First read this: Versions change quickly and the interface shown here may not be in use when you grab the program for yourself. However, the basic\",\"breadcrumb\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.htmlgoodies.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"So, You Want An Animated .gif, Huh?\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/49227c541b63630606511c92eeac2c71\"},\"headline\":\"So, You Want An Animated .gif, Huh?\",\"datePublished\":\"2010-07-16T07:07:00+00:00\",\"dateModified\":\"2021-04-23T21:23:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/#webpage\"},\"wordCount\":113,\"publisher\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\"},\"articleSection\":[\"Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/49227c541b63630606511c92eeac2c71\",\"name\":\"Joe Burns\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/46e3b2aca026ae9603df6e9d91cffdcf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/46e3b2aca026ae9603df6e9d91cffdcf?s=96&d=mm&r=g\",\"caption\":\"Joe Burns\"},\"url\":\"https:\/\/www.htmlgoodies.com\/author\/joe-burns\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"So, You Want An Animated .gif, Huh? | HTML Goodies","description":"First read this: Versions change quickly and the interface shown here may not be in use when you grab the program for yourself. However, the basic","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/","og_locale":"en_US","og_type":"article","og_title":"So, You Want An Animated .gif, Huh? | HTML Goodies","og_description":"First read this: Versions change quickly and the interface shown here may not be in use when you grab the program for yourself. However, the basic","og_url":"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/","og_site_name":"HTML Goodies","article_published_time":"2010-07-16T07:07:00+00:00","article_modified_time":"2021-04-23T21:23:50+00:00","twitter_card":"summary_large_image","twitter_creator":"@htmlgoodies","twitter_site":"@htmlgoodies","twitter_misc":{"Written by":"Joe Burns","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.htmlgoodies.com\/#organization","name":"HTML Goodies","url":"https:\/\/www.htmlgoodies.com\/","sameAs":["https:\/\/twitter.com\/htmlgoodies"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png","contentUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png","width":584,"height":136,"caption":"HTML Goodies"},"image":{"@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.htmlgoodies.com\/#website","url":"https:\/\/www.htmlgoodies.com\/","name":"HTML Goodies","description":"","publisher":{"@id":"https:\/\/www.htmlgoodies.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.htmlgoodies.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/#webpage","url":"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/","name":"So, You Want An Animated .gif, Huh? | HTML Goodies","isPartOf":{"@id":"https:\/\/www.htmlgoodies.com\/#website"},"datePublished":"2010-07-16T07:07:00+00:00","dateModified":"2021-04-23T21:23:50+00:00","description":"First read this: Versions change quickly and the interface shown here may not be in use when you grab the program for yourself. However, the basic","breadcrumb":{"@id":"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.htmlgoodies.com\/"},{"@type":"ListItem","position":2,"name":"So, You Want An Animated .gif, Huh?"}]},{"@type":"Article","@id":"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/#article","isPartOf":{"@id":"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/#webpage"},"author":{"@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/49227c541b63630606511c92eeac2c71"},"headline":"So, You Want An Animated .gif, Huh?","datePublished":"2010-07-16T07:07:00+00:00","dateModified":"2021-04-23T21:23:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.htmlgoodies.com\/design\/so-you-want-an-animated-gif-huh\/#webpage"},"wordCount":113,"publisher":{"@id":"https:\/\/www.htmlgoodies.com\/#organization"},"articleSection":["Design"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/49227c541b63630606511c92eeac2c71","name":"Joe Burns","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/46e3b2aca026ae9603df6e9d91cffdcf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/46e3b2aca026ae9603df6e9d91cffdcf?s=96&d=mm&r=g","caption":"Joe Burns"},"url":"https:\/\/www.htmlgoodies.com\/author\/joe-burns\/"}]}},"_links":{"self":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts\/7629"}],"collection":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/comments?post=7629"}],"version-history":[{"count":0,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts\/7629\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/media?parent=7629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/categories?post=7629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/tags?post=7629"},{"taxonomy":"b2b_audience","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_audience?post=7629"},{"taxonomy":"b2b_industry","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_industry?post=7629"},{"taxonomy":"b2b_product","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_product?post=7629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}