Animated Banner (Flash vs Javascript vs GIF)

[Stretchwickster]

I am interested to know your views as to which technology you would recommend for creating a very simple animated banner which would rotate through 6 images. Are there any inherent advantages/disadvantages in using Flash as opposed to Javascript (perhaps using jQuery) as opposed to an animated GIF?

Your thoughts would be much appreciated.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[BillyRayPreachersSon]

If you want the banner to have more than 256 colours, you would need to use something other than an animated GIF.

Other than that, for me, it would boil down to various factors:

- The file size of 6 individual images compared with 1 Flash file or 1 animated GIF

- The time taken to create the Flash file over creating a simple timer to flip 6 static images

- The pleasure I derive from the previous point - which for me usually means coding the JS option

- Whether you want people to have to use Flash to view the banner (installing plugins if they have not already done so, etc)

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[mmerlinn]

Personally I would never use Flash. Flash is a memory hog and often will slow one's computer to a crawl. Using Flash therefore could have adverse negative reactions from the viewers of your pages.

I removed Flash from this machine because I got tired of pages containing Flash often taking 2 minutes to display. Sure I miss some valuable content, but when I am on a site that automatically times out at 60 seconds, removing Flash became a no-brainer.

mmerlinn

http://mmerlinn.com

"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Steven Raymond

 

[Stretchwickster]

Many thanks for your views. I've ended up using a javascript banner mainly because it allows for graceful degradation and was quicker and easier for me to create than in Flash (because of my lack of familiarity with Flash). Also, I was able to implement a "pause slide" feature when the mouse was over the banner (which I wasn't able to produce in Flash due to my inability!) and a "next slide" on clicking the banner.

I used the jQuery Cycle plugin to ease the process and provide nice transitions. For info, in my HTML file I added a div inside which I nested the first banner image. I then dynamically added the banner images and initiated the process which cycles through the images. The Cycle plugin requires at least 2 images to be present before initiating the cycle process. However, the other 4 images are loaded on the fly and don't affect the intial page load. See the code at the bottom of this post if you're interested.

If you want the banner to have more than 256 colours, you would need to use something other than an animated GIF.

The animated GIF option was struck off the list pretty quickly, as the gradient background looked ghastly in 256 colours!

The file size of 6 individual images compared with 1 Flash file or 1 animated GIF

The following sizes were produced:
6 individual images: 380 KB
1 Flash file: 293 KB
1 animated GIF: 140 KB (although not enough colours)

The time taken to create the Flash file over creating a simple timer to flip 6 static images

This was a bit of a stumbling block as I've never used Flash before. I had a go, but the process wasn't proving very intuitive for me, so I cheated and used Adobe Captivate which I'm very familiar with.

Whether you want people to have to use Flash to view the banner (installing plugins if they have not already done so, etc)

This was the crunch one, I've chosen to use a javascript banner because it degrades more gracefully than the Flash one. Namely, if javascript is disabled, the first banner image is the only image displayed in the div.

Here's the code I ended up using:

<link rel="stylesheet" type="text/css" href="<?php echo $baseURL; ?>includes/banner.css" media="all">
<script language="JavaScript" type="text/javascript">
<!--
  var baseURL = '<?php echo $baseURL; ?>';
//-->
</script>
<script type="text/javascript" src="<?php echo $baseURL; ?>includes/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php echo $baseURL; ?>includes/jquery.cycle.min.js"></script>
<script type="text/javascript" src="<?php echo $baseURL; ?>includes/banner.js"></script>
...
<div id="banner_slideshow" class="pics">
  <img src="<?php echo $baseURL; ?>includes/eracs_usersite_banner1.jpg" width="838" height="96" style="border-width: 0px;" />
</div>

$(function() {
    
    // satisfy the requirement of the Cycle plugin to have at least 2 images in the div
    $('#banner_slideshow').append('<img src="' + baseURL + 'includes/eracs_usersite_banner2.jpg" width="838" height="96" class="other_pics" />');

    var stack = [];

    // preload images into an array
    for (var i = 3; i < 7; i++) {
        var img = new Image(838, 96);
        img.src = baseURL + 'includes/eracs_usersite_banner' + i + '.jpg';
        $(img).bind('load', function() {
            stack.push(this);
        });
    }

    // call the method to cycle through contents of div
    $('#banner_slideshow').cycle({
      delay:   -5000, // additional delay (-5 secs) for first transition
      next:    '#banner_slideshow', // element to use as click trigger for next slide
      pause:   1,     // pause slideshow on mouse hover
      timeout: 15000,  // 10 secs between slide transitions
      before: onBefore
    });

    // add images to slideshow
    function onBefore(curr, next, opts) {
        if (opts.addSlide) // <-- important!
            while(stack.length)
                opts.addSlide(stack.pop());
    };

});

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096