Tutorial: Animated icon with videoclip
A step by step Imageready tutorial for making animated icons with a tiny videoclip, like the one below, the fast way. The tutorial has pictures to clarify the steps. You don't need any prior knowledge of Imageready, just the videoclip you want to use a scene from (avi or mov) and an icon base for the background.





STEP 1: Selecting part of a videoclip
Start Imageready and choose 'file/open' or CTRL-O. Find the videoclip you want to use a part of and open it. In the next screen be sure to select 'selected range only' and 'limit to every 2nd frame'. Find the part of the videoclip you want by using the slider and hold down both the shift key and left mouse button to select the part you want.



STEP 2: Setting animation speed and properties
Just below the first frame (see red arrows in the pic below) there are 2 small dropdown menu's for setting the animation speed and making it loop continuous. Make sure you have all frames selected! (hold down shift while you click the first and the last frame) Change the frame delay (speed) to 0.20 and make sure 'forever' is selected or the animation will only play once.



STEP 3: Resizing and cropping the video
Resize the animation by selecting the crop tool (left red arrow). Enter the desired width and height in the crop information bar (top red arrows). I used 40x40 in the example. Make sure all the layers are linked, by clicking in the selection boxes next to them (right arrow). Click and drag a selection across the animation screen and once you're happy with it, doubleclick (the hightlighted part) to crop and resize automatically.



STEP 4: Dragging the animation onto the base
Now we have the animation, open your base (the background picture) and make sure it's 100x100 pixels and saved as a gif. Select the 'move' tool (left arrow) and click (hold down mouse button) the animation picture (right arrow)and drag it onto your base (red x). Let go of the mouse button to place it. You can just move it around by clicking and holding the mouse button.



STEP 5: Last but not least
Click the small arrow on the top right corner of the frame property screen (top arrow) and choose 'make frames from layers' (left arrow). Rightclick on layer 1 (right arrow in the layers panel) and select duplicate layer. Last but not least, choose 'file' and 'save optimized as'..


* keep your filesize under 40kb to meet LJ-standards.


TROUBLESHOOTING

The animation is not working after you dragged it onto the base.
You've most likely missed an important part of 'step 3'. You'll have to go back (or start over) and make sure all the layers in the layers panel are linked (locked together) before you drag the animation.

Also check if the background pic you used (the base) is saved in gif format. Some versions of Imageready will allow you to use jpg's and png's, but not all.

Imageready will not let me open the video I want to use
When I wrote this tut I worked with Imageready 7, which can only open videos in mov or avi format. Other fileformats will have to be converted first before you can use them.