Sign in to follow this  
double O seven

[web] web animations???

Recommended Posts

double O seven    238
If I were making 3d rendered animations that will be displayed on a website when the user hovers the mouse cursor over it, what format would these animation's have to be in? Image format like PNG or a video format such as Quicktime? Thanks

Share this post


Link to post
Share on other sites
benryves    1999
The traditional format is an animated GIF, though these are limited to 256 colours. (You could use CSS to change a background image on an element between a static and an animated version of the image, for example). How big are these images likely to be? How detailed? How many frames? Larger, smoother animations may require a plugin-based approach like Flash or Silverlight. I'm not sure if it's possible to script video plugins like QuickTime to play when the mouse hovers over them, though.

Share this post


Link to post
Share on other sites
double O seven    238
Quote:
Original post by benryves
The traditional format is an animated GIF, though these are limited to 256 colours. (You could use CSS to change a background image on an element between a static and an animated version of the image, for example). How big are these images likely to be? How detailed? How many frames? Larger, smoother animations may require a plugin-based approach like Flash or Silverlight. I'm not sure if it's possible to script video plugins like QuickTime to play when the mouse hovers over them, though.


well the images are more than 256 colors. Complete with motion blur and lights that light up. Little options that open and close and about 75 frames each way.

Share this post


Link to post
Share on other sites
Kylotan    10008
The typical way to do that would be to use Flash. But quite a few people block Flash precisely because effects like you describe can be distracting and annoying. So this could be a lot of hard work that is wasted and in fact makes the site unusable by some people.

Share this post


Link to post
Share on other sites
Phytoplankton    116
When the user hovers over the image, have the image's src be replaced with the src of an animated GIF.

Something like this. (It's untested, but should be close).
<img class="blah" src="regular.gif" alt="asdfasdf" />

img.blah:hover
{
src = "animate.gif"
}

Using Flash here would be overkill (and having too many flash objects can be rough on the client's CPU).

And my opinion on QuickTime would be to use it never ever ever ever ever ever.
While it's possible to view QuickTime on a PC, it never works well.
Regardless of where you stand on the Mac-PC debate, the majority of users have PCs.

Share this post


Link to post
Share on other sites
fcoelho    389
One problem I see with Flash is that, at least in Opera, the control will not be activated (receive input) until you first click it, so for hover animations, it would be almost useless. I imagine the user having to click each button just to see an animation and having to do it all again when he actually clicks a link.

Share this post


Link to post
Share on other sites
benryves    1999
Quote:
Original post by fcoelho
One problem I see with Flash is that, at least in Opera, the control will not be activated (receive input) until you first click it, so for hover animations, it would be almost useless. I imagine the user having to click each button just to see an animation and having to do it all again when he actually clicks a link.
This is easy to work around – embed the Flash file using JavaScript (tools like SWFObject or MooTools Swiff make this very easy) rather than directly in your HTML. The Eolas patent doesn't cover this method of embedding objects, so fixes the issue in browsers that are affected by the problem. Using JavaScript gives you more flexibility, too (for example, it gives you the ability to have a fall-back image that is replaced by the Flash animation if and only if Flash is installed).

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this