[web] web animations???
Author
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
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.
Author
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.
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.
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.
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.
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.
Quote:Original post by fcoelhoThis 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).
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 topic is closed to new replies.
Advertisement
Popular Topics
Advertisement