Scrolling GIF Banners with PerlMagick

Originally published on: Tue, 25 Aug 2009 00:52:55 +0000

Some time ago, I tried to use PerlMagick to create a scrolling text banner as an animated GIF. The three sample programs below illustrate the approaches I took.

All of the Perl code samples are licensed under the MIT/X11 license below. I've placed it in a single spot because the sample source code files are so small

# License: MIT / X11
# Copyright (c) 2009 by James K. Lawless
#
# Permission is hereby granted, free of charge, to any person
# obtaining a copy of this software and associated documentation
# files (the "Software"), to deal in the Software without
# restriction, including without limitation the rights to use,
# copy, modify, merge, publish, distribute, sublicense, and/or sell
# copies of the Software, and to permit persons to whom the
# Software is furnished to do so, subject to the following
# conditions:
#
# The above copyright notice and this permission notice shall be
# included in all copies or substantial portions of the Software.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
# OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
# HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
# WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
# OTHER DEALINGS IN THE SOFTWARE.

The first thing I needed to accomplish was to place text on an image and write it out as a GIF.

scroll1.pl

use Image::Magick;

  $text = 'This is a simple test';


  $im = Image::Magick->new;
  $im->Set(size=>'150x15');
  $im->ReadImage('xc:white');
  $im->Annotate(font=>'comic.ttf', pointsize=>13, fill=>'black', text=>$text, x=>3, y=>13);
  $im->Write('scroll1.gif');

The code above generates the simple, non-animated GIF file scroll1.gif

( Note that after you've toyed with these scripts, you might want to change the image dimensions from "150x15" as well as changing the pointsize from 13 to something larger. If you do, please adjust the y coordinate so that you can see your text in an example like scroll1.pl before you make the counterpart changes to scroll2.pl and scroll3.pl. )

The file 'comic.ttf' needs to be accessible by the Perl script. I copied this file from my c:\windows\fonts\ folder to the same folder where I was keeping my Perl scripts.

After reading an example on the web, I thought that I could animate the GIF by using a variable for the "x" location in the Annotate() function. My attempt is captured in the code below:

scroll2.pl

use Image::Magick;

  $text = 'This is a simple test';


  $im = Image::Magick->new;
  $im->Set(size=>'150x15');
  for($x=150;$x>=0;$x-=2) {
    $im->ReadImage('xc:white');
    $im->Annotate(font=>'comic.ttf', pointsize=>13, fill=>'black', undercolor=> 'white',text=>$text, x=>$x, y=>13);
  }

  $im->Write('scroll2.gif');

This creates the file scroll2.gif which can be seen below:

What a mess! The background does not seem to clear as I overwrote each frame.

While I would assume that a better way to do this exists, I chose to write each frame out as a separate file, then reload each one of those files into an aggregated image called $maingif. After I call Read() to load each temporary GIF, I use unlink to remove the GIF. At the end of the loop, I write out the animated GIF.

scroll3.pl

use Image::Magick;

  $text = 'This is a simple test';

  $maingif = Image::Magick->new;
  $maingif->Set(size=>'150x15');

  for($x=150;$x>=0;$x-=2) {
    $im = Image::Magick->new;
    $im->Set(size=>'150x15');
    $im->ReadImage('xc:white');
    $im->Annotate(font=>'comic.ttf', pointsize=>13, fill=>'black', text=>$text, x=>$x, y=>13);
    $im->Write('scroll3_' . $x . '.gif');
    $maingif->Read('scroll3_' . $x . '.gif');
    unlink 'scroll3_' . $x . '.gif';
  }
     # iterate the banner 10000 times
  $maingif->Set(Iterations=>10000);
  $maingif->Write('scroll3.gif');

The resulting file, scroll3.gif can be seen below: