Hello again everyone! Now that Christmas and New Year’s are fast approaching, I have decided to add a new Christmas themed animation to my Animated .Gifs page. I have also added a new “Happy Holidays from E of C” Anifav to my own site as well. You can view it next to the URL in Firefox or Opera browsers only! I have embedded it here as well for those using Mac Safari, IE or Google Chrome browsers:
The new Anifavs (Animated Favorite Icons) include: “Merry Christmas”, “Happy Holidays”, “Seasons Greetings,” “Tis the Season,” “Joy to the World” and “Light The Christmas Tree.” Click on any one of the screen shots for each individual frames to scroll through the assortment. I suggest starting with “Merry Christmas.”
Note: These Anifavs will repeat forever in the URL or anywhere else you embed these on your web page. There is a slight pause at the end for all of these animations however. Just refresh the page where you embed them to start animation from the beginning.
I have laid out the seven Anifavs with a screen shot of how every frame would look when they progress as an animation. Because frames that would repeat the same letter like “R R” in “MERRY” would not have the same effect if the color scheme was the same, I changed the background color for duplicate letters in frame sequence for a couple of Anifavs.
TIS THE SEASON:
TIS THE SEASON TO BE JOLLY:
JOY TO THE WORLD:
LIGHT THE CHRISTMAS TREE:
Additional Note: To embed your Anifav or Favicon for your web site, you must upload your favicon.ico (static favicon) and favicon.gif (Animated Favorite Icon) using an FTP as well as referencing both the .ico and .gif files somewhere between the head tags of your index file.
Since Internet Explorer “IE” browsers, Macintosh Safari browsers and Google Chrome browsers do not support Anifavs, you must have a favicon.ico as backup or else the last frame of the Anifav will be what you see next to the web site URL in the browser.
Only Firefox and Opera 4.0 browsers support the Anifavs.
Below is a coding example of how you would get the Anifavs and Favicons working on your web site. Place both these lines somewhere within the two head tags on the main index page.
<link rel=”shortcut icon” href=”http://yourwebsite.com/favicon.ico” /> (This line of code would reference your favicon.ico file directly from the web root, not an images file).
<link rel=”icon” type=”image/gif” href=”http://yourwebsite.com/favicon.gif” /> (This line of code would reference your favicon.gif (animated favorite icon) file directly from the web root, not an images file).
Once the coding is done and the two favicons are uploaded to your server, save your web page and refresh your IE, Safari or Chrome browsers to see if the static favicon.ico is appearing. USE the same technique by opening a Firefox or Opera browser to see of your Anifav is working!
Enjoy my new creative work and feel free to download the Christmas and Holiday related Anifavs located as a hyperlink below.
DOWNLOAD YOUR SEVEN HOLIDAY ANIFAVS HERE: Seven Holiday Anifavs (13.7 KB .Zip File)
Thanks for visiting my site and viewing my work! Happy Holidays!
Well, Halloween has come and gone for another year, so it’s time to take my Halloween AniFav (Animated Favorite Icon) down and replace it with a new Thanksgiving one. The new one shall appear to the left of the URL in the browser depending on the type of browser people are surfing with.
***For those using IE and Safari browsers who can’t see the animation, I posted it at the end of this sentence.
Hint: It is located to the left of my URL in the browser.
Mozilla Firefox is a good browser to showcase your AniFavs with! In the Safari browser for MACs, it will only show the first frame, so I suggest one static Favicon.ico and one Favicon.gif file for use with different browsers.
I have decided to break the AniFav down into its 26 frames to show what actually goes into making this thing look rather spiffy. My tool of choice was Adobe Photoshop® for creating each individual frames and JASC Animation Shop® to handle putting the frames together to complete this little ditty.
For those that want to know about web sites that can create these animations for free, below are some of the sites that I know of that can create an animated favicon or other animated .GIFs for you!
***The tough questions to ask as part of the animated GIF creation process may be these:
- How do you want each individual frame to look?
- How fast you want the frame rate to be 60/100 sec? 70/100 sec? Hint: 900 as a frame rate equates to 9 seconds. 70 is milliseconds when divided by 100 or 1 second in frame rate time.
- How many times you want the animation to loop/repeat?
Once those questions are mostly answered, it is time to move on to finding a free resource online that can help you put the frames you have spent quality time creating!!
To get to the section of their site that has the animated .Gif creation part, look under the Online Tools Section located in the top left of landing page.
- Look for the green colored title of “Animated Gif.” It is three links down from the Online Tools Section header.
- After clicking on the Animated Gif link, you will come to the page with the “Animated Gif Generator”
- To create your AniFav (Animated Favorite Icon) in 16 x 16 or 32 x 32 pixels, click on the green colored “FavIcon Generator” link located right above “Animated Gif Generator.”
- For this blog, we will focus on how to create Animated .Gifs, not Anifavs, so click on the Animated Gif link and let’s begin.
Once you have created the frames as GIFs, PNGs or JPGs for your animation, click on the “Choose File” button. This will allow you to search you computer drives or desktop for the individual frames you are going to use to create your animation.
Once you have added them – the initial frame first, then the following frames in order until completed as a sequence, click the black “Make Gif” button located in the bottom right of the “Animated Gif Generator” section.
See my screen shot below for more help/insight about how the frame sequence looks at Dynamicdrive.com
Note: To delete any of the frames for the sequence of the animation, just click on the black X located in the top right of the frames. The “Animated Gif Generator” also gives you the ability to change the width (pixel), height (pixel), speed of the frame rate in milliseconds ( I used 60 to 70 milliseconds for my AniFav) and loop number (zero for repeating forever, 1 for repeating the animation from start to finish more than once, then stopping on the last frame.) And on and on.
I tend to do an infinite repeat for my AniFavs. However, I make sure that my last frame holds for nine seconds (900 milliseconds) before starting the whole sequence over again.
Once the animation has been created, click the blue “Download Image” to snag the animation. Your new animation should appear with the right look and frame rate!
Extra Note: Make sure all the frames that you upload for the animation are the same file type. All files/frames must have the same extension such as .GIF, .PNG or .JPG. The properties tab will provide the correct file type extension if there any questions should arise.
However, Picasion allows the user to create different sized Avatars based on images they upload from their computer or from Flickr®.
Picasion allows you to upload as many files as needed to create your animation; it also allows you to create it using .GIF, .JPG or .PNG file type. By default, Picasion allows up to three files/frames for the animation. You can also click the “Delete” link at the end of the third slot for where the image file names would appear.
However, you can click on the “Add one more picture” link to add more files in increments of one. And like any good animated .GIF creator, Picasion.com allows you to tweak the maximum speed of the frame rate and the final size of the animation. By default, Picasion’s animation software will import the original size of your file. “Normal” or 300 pixels wide in size is the designation that they provide along with 100 pixels wide, 120 pixels wide and “Big”, which is 400 pixels wide. There is also an “advanced” selection that allows you to key in your own size. However, the maximum pixel width for this software is 450, so it may be better to stick with the original size of the frames you import and edit the frame rate only.
For the specific frame rate of the animation, you can designate “Slow”, “Slower,” “Fast”, “Faster!” and “Normal.” You can also click the Advanced link to key in your own frame rate speed.
Once you have added all the frames for your animation, chosen the perfect width and the perfect frame rate and click “Create animation.” Your animation should appear right above the section where you imported your original .GIF, .JPG or .PNG files.
If you find that the animation speed or sequence is not what you expected it to be (I tend to edit things after the first animation completion), tweak the speed, size, or frame sequence, then press the white “Create animation” button again.
I hope this blog helps you create some really great animated .Gifs!
And thanks for visiting!!