ImageMagick Tutorial: Animation

<center><marquee scrollamount=100 width=120>Bug</marquee> <center><marquee scrollamount=108 width=103>Reload</marquee> </center>

ImageMagick Tutorials

<center><marquee scrollamount=100 width=120>Bug</marquee> <center><marquee scrollamount=108 width=103>Reload</marquee></center> Image Magick is the creation of web innovator, John Cristy, a man committed to the ideal of freely available services on the world wide web.
An official Image Magick Message Board is provided for help and to report problems. Registering is required to post in the Magick Studio Forum.

Image Magick Studio is currently hosted at these servers. If one is not working satisfactorily, try another.

Examples of what ImageMagick can do.

How to transparify images.

How to change image colors.

How to annotate (write on) images.

How to composite images.

How to add and remove image comments.

How to resize images.

How to make an animation.

How to change the speed of an animated gif.

How to change the number of repetitions (loop) of an animated gif.

How to remove a specific frame from an animated gif.

How to morph images.

How to crop images.

How to chop crop images.

How to rotate images.

*NOTE*

Image Magick only stores the rendered images on their system for a short while. Always transload the output to your homepage promptly.

How to Make an Animation with ImageMagick

€Method A

Create a subdirectory at your homepage provider especially for the images to be animated. Name it to your preference; animate is a good choice.

Now check to see if your homepage host supports an index listing of subdirectory files. Put the subdirectory url in the "go to" window and click "Go to Page". The subdirectory url would be like this, http://www.domain.com/username/animate/

If you see an index page like this, continue with this method. But if you get a "refuses access" alert or a page like this, the Subdirectory Method will not work with your host. Skip to Method B.

Transload the images you want to animate into the subdirectory. Any static image file type can be used: gif, jpg, png.

Transload and name the images in the order they will appear in the animation. That is, transload the picture to be the first frame of the animatiom and name it a.gif. Then transload the second frame image and name it b.gif... etc., etc.

There must be no index.html file in the subdirectory. It must contain only the images to be animated.

The images should have backgrounds. Image Magick does not animate transparent images well. They tend to ghost or smear. The animation can be transparified at GifWorks after it is made.

The images must be the same size.

Now go to Image Magick and put the subdirectory address in the text field where it asks for the URL and click the view button.

*NOTE* Be sure to put the / on the end of the url; otherwise you will get an error instead of the actual images.

On the next page you will see an image of the first item in the subdirectory. Go to the top of the screen and click on the Output tab.

On the next page fill in the following:

Format:

*other formats will stop the animation*

€ Storage Type: click on the radio button labeled multi-frame file

€ Delay: sets the speed of the animation. Don't use decimals here. 50 = 1/2 sec, 100 = 1 sec, 200 = 2 sec, etc.

€ Loop: put a 0 here.

Go back up and click where it says Press to (Output) your image or (Reset) the form.

On the next page just click on the image and get the url so you can transload it to your homepage account.

€Method B

You are using this method because you checked (as directed in Method A) and noted that your homepage server does not allow the automatic page listing of subdirectory files. Method B may or may not work, depending on the host used.

I have most recently used the method successfully at Bravepages (January 2004). But it no longer works at Angelfire or Tripod. Test with a simple two frame animation at your server before attempting a larger multiframe one.

Create a subdirectory at your homepage provider especially for the images to be animated. Name it to your preference; animate is a good choice.

Transload the images to be animated into the subdirectory in the order you want them. Name them simply: 1.gif, 2.gif, 3.gif for example. Any static image file type can be used: gif, jpg, png. The images must be the same size and should not have a transparent background. Note: using gifs of a small to medium size may meet with greater success.

Make an index.html file for the subdirectory, using this code:

As you see it in the code above, make sure that the relative urls in the link anchors and the text links for the files are the same. Add or subtract image links from the index.html page code according to how many images you are animating.

Click here for the remaining steps taken at Image Magick. Note: Method B may not work at every Image Magick. Try all of them (links above to Image Magick hosts).

If you do not have a host that will work with Method B, use the Pagebuilder Method (see just below).

€Pagebuilder Method

Here are instructions for using PageBuilder to make an animated gif: http://community-2.webtv.net/willxwill/animationtest/

How to Change the Speed of an Animated Gif with ImageMagick

Put the URL of the animated gif into the text field where it asks for the URL: and hit the view button

On the next screen you will see the animated gif. Go to the top of the screen and click on the Output tab.

On the next page only fill in the following box:

Delay: sets the speed of the animation. Don't use decimals here. 50 = 1/2 sec, 100 = 1 sec, 200 = 2 sec, etc.

*NOTE* You don't have to set the Loop: since the gif is already animated.

Go back up to the top and click where it says Press to (output) your image or (reset) the form.

On the next page just click an image and get the URL so you can transload it to your homepage account.

How to Change the Number of Repetitions of an Animated Gif with ImageMagick

Put the URL of the animated gif into the text field where it asks for the URL: and hit the view button.

On the next screen you will see the animated gif. Go to the top of the screen and click on the Output tab.

On the next page, make sure that gif is checked on the Format menu and that the radio button is lit for multi-frame file.

Now scroll down below Optional Image Attributes and put a number for the times you want the gif to repeat in the Loop box.

Go back up to the top and click where it says Press to (output) your image or (reset) the form.

On the next page just cursor over and click the gif and get the URL so you can transload it to your homepage account.

How to Remove Frames from an Animated Gif Using ImageMagick

Put the url of the animated in the text field where it asks for the URL and click the View button.

On the next page go to the top of the screen and click the Output tab.

On the next page check gif and select the single file radio button. Then click where it says Press to (output) or (reset) the form.

*NOTE* Clicking the single file button splits the animated gif into separate frames, each of which is displayed. Each still frame is clickable and has its own temporary url for transloading.

Click and transload each of the still frames in turn, except for the frame or frames to be removed.

The wanted frames are transloaded into a homepage host subdirectory in the order in which they will play.

Input the subdirectory url at ImageMagick to reanimate the gif, now with the unwanted frame or frames removed.

For complete details about reanimating the gif, go to this section above for making an animation.

Basic Image Magick tutorials are a valuable resource. These will be actively maintained, updated, and improved. New information welcomed.