dinsdag 14 september 2010

Animation with png, jpg and text for all browsers

A great way to attract attention and enliven your web pages! Animate PNG's (lossless quality) and JPG's (high quality) photographic images on your site. Read the instructions below!

Change

Animations are a series of images (frames) that are played sequentially giving the semblance of motion/change. We've all heard of animated gifs and many of us have made or used some. In contrast to gifs that can have only 256 colors, PNG and JPG images can contain 16.7 million colors (24-bit color information). By mapping one palette color to transparent, gif's supports only 1-bit alpha transparency, PNG has 8-bit alpha transparency. Keep in mind that animated JPG is not one image but a series of images displayed in the same place in the browser.

Yes we can

1. Start with a check on the sizes of the images that should all be the same size.
   If needed, scale the pictures with a graphics program to ensure smooth results.
2. Upload these to one web location.
3. Put on a webpage a html IMG statement with an id attribute to display the first image.
4. Add a call to the Carousel function that changes the image source repeatedly:

   <img id='ani1' src='http://myweb.org/a.jpg'>
   <script type='text/javascript'>
   Carousel('ani1','a.jpg|b.jpg|c.jpg',1000);
   </script>

Carousel parameters:

• 'ani1'
  ID string that points to the <img> tag to associate.

   

• 'a.jpg|b.jpg|c.jpg'
  Filesnames of the images, separated with a vertical bar | character.

   

• 1000
  Duration in milliseconds each image is displayed, 1000 is a full second's delay.

   

• Decide how many times the animation should cycle (repeat).
  If you want the animation to cycle forever, leave the fourth parameter out completely.

Code

<script type='text/javascript'>
function Carousel(id, tiles, delay, repeat)
// Parameters:
//   id:    name of the html tag to associate
//          Tags supported are:
//          p, li, blockquote (group1) and img (group2)
//   tiles: inner html text (group1) or src filenames (group2)
//          File base addresses are taken from the html placeholder
//          Instead of the first tile an alias * may be used
//   delay  (optional): duration in milliseconds between changes
//   repeat (optional): number of animation cycles
{ if (delay==undefined) delay=1000;
  if (repeat==undefined) repeat=0;
  var c={start:0, repeat:repeat};
  if (tiles==null)
  { alert('Carousel: Missing tiles specification'); return }
  c.tiles=tiles.split('|');
  c.elem=document.getElementById(id);
  if (c.elem==null)
  { alert ('Carousel: No tag found with id '+id); return }
  type=c.elem.nodeName.toLowerCase();
  group1='p,li,blockquote';
  group2='img,iframe';
  c.inner=group1.indexOf(type)>-1;
  c.outer=group2.indexOf(type)>-1;
  if (!c.inner && !c.outer)
  { alert('Carousel: tag type <'+type+'> not supported'); return }
  if (c.inner) c.tiles[0]=c.elem.innerHTML;
  else
  { c.base=base(c.elem.src); c.tiles[0]=filename(c.elem.src) }
  c.stop=setInterval(function(){ car2(c) }, delay) }

function car2(c)
{ c.start ++; if (c.start>=c.tiles.length) c.start=0;
  if (c.inner) c.elem.innerHTML=c.tiles[c.start];
  else c.elem.src=c.base+'/'+c.tiles[c.start];
  c.repeat --; if (c.repeat==0) clearInterval(c.stop) }

function base(url)
{ var u=url, i=u.lastIndexOf('/');
  if (i<0) return '';
  else return u.substr(0,i) }

function filename(url)
{ var u=url, i=u.lastIndexOf('/');
  if (i<0) return u;
  else return u.substr(i+1) }

</script>

Grant

By providing a link to Kindindeknel.nl, permission is granted to use. Note: The animation will not work in browsers that have JavaScript disabled. In image search engines such as Bink and Google only the first image is displayed.

Images example:

<img id='ani1' src='http://myweb.org/a9s.png'>
<script type='text/javascript'>
  Carousel('ani1','*|b9s.png|c9s.png',3000);
</script>

Alternatives

The most promising method for dynamic graphics in web pages is APNG, this images format is supported by Mozilla Firefox from version 3 and Opera from version 9.5 and also displays in older browsers. The PNG specification was designed with future extensions in mind, a legacy application reading an APNG file simply recognizes the first frame and ignore any chunks which it does not understand. This is the reason why APNG is backwards compatible.

Smil can animate vector graphics and can incorporate raster graphics. Plugin based technologies such as adobe flash are unsafe and expensive, the HTML5 canvas object will also be animating. Boutell.com offers a JPG animator called JpegAnim 1.0 written in java. At the JpegAnim web page is more information on this product.

    Bert Kerkhof
    is senior internet- and mobile- technology pioneer and …
    promotes straightforward standards

Labels: ICT