Making animation from images using jQuery animateSprite

Recently came to my attention one site that uses some small videos and was pretty awesome, very soon I discovered that those videos were flat images!

I check the html source and I found that the work for the animation make it by this jQuery animateSprite plugin.

As a web designer I am always interest for this kind of nice tricks, so I start to test and I came up with those results.

The animateSprite plugin is very easy to use and makes pretty well his job, although exist some limitations, not by the script, but for the amount of pixels you can add when you make an image, for example in Photoshop you cannot make a jpg image more than 30000 pixels width, and this limitation has impact of the time to make an animated image.

To give you a real example, I make “The fallen” a 5 seconds animation image with 12 fps, the final width of the image ended to 30000px
i.e. 60 images x 500px each one = one 30000px flat image, so if you want to make a 10 seconds animated image you end to 250px width, for 20sec to 125px, and so on..

You may think that this time is not enough to make a cool animated video, I have a different opinion, and the fact that the most of advertisements are less of one minute gives you the opportunity to create amazing animation images to use in your website.

Girl advertize a shirt

This animated image is from the site that I discover and uses this kind of animated videos to advertise their goods.
Uses 33 frames (210px width each frame) in a 6930px flat image and size 285 kb.
Note: We don't crate this file, you can use it for test purposes only.
Files included in download: Html, javascripts, animation image.

Connect with Facebook to Share & Download

Click to share in facebook & donwload files for "Girl advertize a shirt"

Space Animation

We create space animated image by processed this video Journey Through Space Vibrant HD
Uses 150 frames (200px width each frame) in a 30000px flat image and size 737 kb.
Files included in download: Html, javascripts, ready animation image, PSD, PSB, AEP, MP4 and jpg's.

Connect with Facebook to Share & Download

Click to share in facebook & donwload files for "Space Animation"

The fallen

I love this video The Fallen is ideal to create a nice loop animation
Uses 60 frames (500px width each frame) in a 30000px flat image and size 365 kb.
Files included in download: Html, javascripts, ready animation image, PSD, PSB, AEP, MP4 and jpg's.

Connect with Facebook to Share & Download

Click to share in facebook & donwload files for "The fallen"

Demo of how is working using 2 fps

In this demo we don't use loop and we have create a big frame to see how the image moves using only 2 frames per second.

Big images

To make a test using large images i use NORWAY - A Time-Lapse Adventure 4K video, I know is not perfect but you can get the idea.
Μy thoughts making animation with big images is not very good, you cannot make animation long than 1 second and uses lot of CPU, so unless you need some special effect don't use it.
Uses 23 frames (1280px width each frame) in a 29440px flat image and size 0.99 MB.
Files included in download: Html, javascripts, ready animation image, PSD, PSB, AEP, MP4 and jpg's.

Connect with Facebook to Share & Download

Click to share in facebook & donwload files for "Big images"

Hummingbird

This little dude is my favorite one, I got it from A Hummingbird Comes to Call and really is going to be my mascot from now on!
Uses 56 frames (400px width each frame) in a 22400px flat image and size 212 kb.
Files included in download: Html, javascripts, ready animation image, PSD, PSB, AEP, MP4 and jpg's.

Connect with Facebook to Share & Download

Click to share in facebook & donwload files for "Hummingbird"

Video animation with colorkey and different background

Unfortunately I've lost the link for this video, I have saved as Girls-Green-Screen.mp4 although is blue screen (lol),
you can always try search videos in youtube or any other like sexy girls dancing green screen.
Video for background is Gold Dust wind Particles hd Background.
Uses 56 frames (400px width each frame) in a 22400px flat image and size 775 kb.
Files included in download: Html, javascripts, ready animation image, PSD, PSB, AEP, MP4 and jpg's.

Connect with Facebook to Share & Download

Click to share in facebook & donwload files for "Video animation with colorkey and different background"

Girl with colorkey and different background 2

This is exactly a copy of the above video except the video background, I admit that the colorkey for this one is not correct, but does his job.
All files for this animation included in the above download link.

So, how to create flat animated image from video?

First you need After Effects, a digital visual effects, motion graphics by Adobe or some similar program, Photoshop/Gimp or any image editor, and some program to optimize images like riot http://luci.criosweb.ro/riot/

Here are the steps that I make to create the following animated images.

Step 1: Download any video that you like to convert to flat animated image.

Step 2: Open after effect and make a new composition with the following settings.

  • Preset custom
  • Width: 500px
  • Height: 300px
  • Pixel Aspect Ratio: Square pixels
  • Frame Rate: 12 frames per second
  • Duration: 0:00:05:00 5 seconds

settings

Step 3: Import your footage into your project, play with this until you find the right frames that you want to extract, (remember you go make an animated image where loops from the start to end and from the end to start continuously).

Step 4: As soon you are ready (and happy) with the amendments press “Add to render queue” and apply those modifications.
In Output Module: Chose format -> Photoshop Sequence
In Output To: Chose the folder to save the Photoshop files
render Press Render and the magic starts to happen!

Step 5: In Photoshop open the first file from the files that created from the previous step, and make a new action.
Window -> Actions -> Create New Action -> Press Record
On the opened file press File -> Save for web -> Save as jpg to any folder of your choice and when the image saved press “Stop Record” in Actions and close the opened file.

Step 6: Press File -> Automated -> Batch
Select the action that you have made and the folder that all Photoshop files exist to save them all to jpg.

Step 7: Press File -> Scripts -> Load Files into Stack...
Select the folder with the jpg files that created from the previous step, this will open all jpg files.
load all jpg images

Step 8: Now that you have all the images to jpeg format, you must create the final image for the animation, and this is the most tricky, as you must make all the alignments manually.
Follow very carefully the next steps.

  • 1) Create a new PSB file with width 30000px and height 300px
  • 2) Select all the images that you have opened and drag them into the beginning of the large file that you have created.
    Place all jpg images into big layer
  • 3) Make all layers invisible except the last two.
    Make all jpg layers invisible
  • 4) Drag the (last) visible jpg layer at the end of the big layer.
    Drag the jpg layer at the end of big layer
  • 5) Make all layers visible, so you have all the layers in the beginning of the file and one layer at the end.
    Make all the jpg layers visible
  • 6) Shift + Click to select the last 2 layers i.e. 59 and 58 and press “Align the right edges”
    Align layers
    the layer 58 comes up on the 59, select only the 63 layer and move it until goes right next to layer 59.
    Align layers
  • Repeat step 6 on all layers with those alignments until you fill the big layer.
    Align layers

Step 9: Save animation as jpg and use some program to optimize image for best results and minimize the size of file.

Step 10: You are ready to use your first image animation, get the examples that I have made, and do some nice and useful stuff in you website!

For this tutorial we create the Craziest


We create Craziest animated image by processed this video 12 CRAZIEST Screensavers!
Uses 60 frames (500px width each frame) in a 30000px flat image and size 648 kb.
Files included in download: Html, javascripts, ready animation image, PSD, PSB, AEP and jpg's.

Connect with Facebook to Share & Download

Share to donwload tutorial & files for "Craziest"

Mimimum setup in your html page

HTML:
<div class="yourAnimationImg"></div>

CSS:
.yourAnimationImg{
	background:url(animation-image.jpg);
	width:210px;
	height:285px;
}

Call it:
<script src="jquery.min.js"></script>
<script src="animateSprite.min.js"></script>
<script>
$(document).ready(function(){	
    $(".yourAnimationImg").animateSprite({
		loop: true, 
		autoplay: true,
		fps:12 
	});
});
</script>

See more setups on the website of animateSprite or download the file from github

Author: Admin

Views 1176

Added @ 04.05.2015. 15:27



Comments

This article hasn't been commented yet.

Write a comment

* = required field





7 + 8 =