I work at a small website building pany 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 ourselves 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 widely 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 approach over the javascript/jQuery aproach?
Also if we choose the Javascript approach, what is the best way to make sure the animation doesn't affect anything else in the page? Will doing the plete animation inside an absolutely position div do the trick?
Edit
When I said banner, I actually meant Header.
I work at a small website building pany 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 ourselves 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 widely 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 approach over the javascript/jQuery aproach?
Also if we choose the Javascript approach, what is the best way to make sure the animation doesn't affect anything else in the page? Will doing the plete animation inside an absolutely position div do the trick?
Edit
When I said banner, I actually meant Header.
8 Answers
Reset to default 6In this order:
Don't use anything animated on a web page. It looks like an ad and distracts from the content. It's just irritating.
Flash is build for animations. Use it if the knowledge is there.
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 puter if he leaves the room for a bathroom break.
You might also try animated GIF. Some might consider it ancient, but it is very portable, small, and gets the job done.
A 4 meg ad? That's going straight into my filter file! I would advise the client to rethink their ads!
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 remend 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?
Definitely Flash. It's much easier to build plex 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 fortable 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.
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.
Have you seen this? http://robot.anthonycalzadilla./ 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).
As of 2017 many people would do this in html5 canvas/javascript. McDonalds (specifically the Happy Meals subsite) is one site that uses html5/javascript to move elements around on the page background.