Should a animated header be in flash or javascript?

Question

I work at a small website building company and on one of our clients website we have a flash animation in the banner. The animation is rather chunky being 4 megabytes. The client has recently requested a rebuild of the site which would again include an animated header. We were thinking about this time not building the header in flash (or actually having it build in flash, since none of us can actually do flash), but building it ourself in javascript (with jQuery().animate() and plugins).
Is this a bad idea? Is flash better for an animated header? I understand you have more options, but you also require users to download flash player while javascript is widly available.
Also it is a quite simple animation, it mainly consists of text popping in and out and some images moving around/fading in and out.

This should be quite easy using jQuery right (I consider myself quite experienced with jQuery), why would we choose the flash aproach over the javascript/jQuery aproach?

Also if we choose the javscript aproach, what is the best way to make sure the animation doesn't affect anything else in the page? Will doing the complete animation inside an absolutely position div do the trick?

Edit
When I said banner, I actually meant Header.

Answer 1

overflow: hidden;

Should help with the javascript not affecting anything else outside its div

But we have done simple animations with flash and they never exceeded a few hundred kilobytes.

I would recommend doing it in flash and programming the animations in. What are some of the details in the flash animations that is making it so large, are you using very large assets and shrinking them down?

Answer 2

In this order:

1. Don't use anything animated on a web page. It looks like an ad and distracts from the content. It's just irritating.

2. Flash is build for animations. Use it if the knowledge is there.

3. Try JavaScript and watch the CPU. We made a simple slideshow with jQuery and the PC starts the fan after the first run through it. Think about limiting the animation, so that it doesn't roast a user's computer if he leaves the room for a bathroom break.

Answer 3

A 4 meg ad? That's going straight into my filter file! I would advise the client to rethink their ads!

Answer 4

You might also try animated GIF. Some might consider it ancient, but it is very portable, small, and gets the job done.

Answer 5

There is some technique to reduce flash size. Take a look for this and this.

Answer 6

Definitely Flash. It's much easier to build complex animations with, has almost no risk of interfering with things if you decide to start using javascript for else later, and it's easy for me to get rid of with AdBlock if I have a problem with animations (I do).

If you're not too comfortable doing things by hand in Flash, you might want to check out SWiSH, it's great for creating the sorts of attention-grabbing monstrosities clients seem to love without too much effort.

Answer 7

Flash has about 85% browser penetration so that oughtn't to be an issue. Also, anything you do with jQuery animate() is not going to look as nice as what can be done with Flash. But if you do'nt have the skills, then there's really no point in discussing it further. Use what you know - animate() away - it's just a damn banner/header - and get on to the next project.

Answer 8

Have you seen this? http://robot.anthonycalzadilla.com/ Rather Flash-like, but built with jQuery. One advantage of jQuery (or other JavaScript) animation is that any HTML text will be seen by search engines (and screen readers).