Recent Widgets


Register for DashboardWidgets

Recent Forums Posts

Partners


iCompositions

MacDesktops.net

RSS Showcase
RSS Comments
RSS Forums

This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies. Posted in: Widget Development

Using CSS to perform animation

Author Message
wintershox



Joined: 27 Mar 2005
Posts: 7
Location: London

Posted: Mon Jul 12, 2004 - 4:35 am    Post subject: Imported from The Dashboader Reply with quote

Incase anyone is unaware, clip() enables us to have one image with all our sprites in.. This is nice as it means we can limit the number of files being loaded, if you're unsure how it works, do a google search or hop over to w3schools..

Now the question: does anyone know of a way of rotating images (i.e. flipping horizontally, vertically, 90 degrees, etc.) using CSS/DHTML/HTML/JavaScript (all of the technologies available minus reverting to Apple-specific code/plug-ins)..?
View user's profile Send private message Visit poster's website Widgets
Chris



Joined: 27 Jan 2005
Posts: 344
Location: Durham, UK

Posted: Mon Jul 12, 2004 - 4:35 am    Post subject: Imported from The Dashboader Reply with quote

It's been a while since I wrote things for Internet Explorer, but I remember the filter: progid: DXImageTransform... proprietary CSS extension available in it. That allows you to manipulate images etc and apply transition effects, but it wont help much for gadgets. (I think BasicImage handles rotation and flipping... I may be well off - I got my mac in 2001, and haven't done much with IE except for using alphaimageloader for .pngs...)

The canvas extension for Safari (and gadgets) can handle all of this though, and is quite nice to work with (see the clock gadget).

So, I'm not aware of how you can do what you're asking without resorting to Apple-specific methods. I think they've submitted the canvas element to the w3c to hopefully make it a standard, but I'm not sure.
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
wintershox



Joined: 27 Mar 2005
Posts: 7
Location: London

Posted: Mon Jul 12, 2004 - 4:35 am    Post subject: Imported from The Dashboader Reply with quote

That's the answer I thought I would receive to be honest.. However, I have found one gem:

http://www.walterzorn.com/rotate_img/rotate_img.htm

If it works (I can't test it on Safari until I get home,) it would mean no plug-ins required. And that will be a boon for those wishing to manipulate images. Smile
View user's profile Send private message Visit poster's website Widgets
Chris



Joined: 27 Jan 2005
Posts: 344
Location: Durham, UK

Posted: Mon Jul 12, 2004 - 4:35 am    Post subject: Imported from The Dashboader Reply with quote

That's pretty cool. It's be pretty processor intensive on huge images though. Rather than having the script doing all the work, couldn't you just make an animated gif of whatever you want rolling (seeing it from all angles) and then have it spalyed out in one big long line? Then all you'd have to do is move the clipping region along to the desired angle.
For example (I can't really knock a good one up, so this text-based thing is all I can do right now) | / - \ | / - \ would be a line rotating about a central axis. To view it at a specified angle (this, obviously doesn't show all 360 degrees, but it could*) you just tell the script the region of the image you want to view. Have the script know how wide each 'frame' of the images is and have the angles arrayed out in the image correctly, and it's trivial to implement.

It's more work when creating the graphic, but should be smoother for larger images (and a lot clearer than the example you gave).

Well, that's my take on it if using the canvas isn't an option.

*although, because of symmetry in this case you wouldn't need to have all the angles, just the first 180)
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
Chris



Joined: 27 Jan 2005
Posts: 344
Location: Durham, UK

Posted: Mon Jul 12, 2004 - 4:35 am    Post subject: Imported from The Dashboader Reply with quote

Oh, and the canvas isn't a plug-in, but it is just for safari/gadgets. And since this is thedashboarder.com, shouldn't it be enough? Wink
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
wintershox



Joined: 27 Mar 2005
Posts: 7
Location: London

Posted: Mon Jul 12, 2004 - 4:35 am    Post subject: Imported from The Dashboader Reply with quote

Aye, for the majority of projects (and indeed for a few projects I have up my sleaves,) having one image with the relevant angles, and clip()ping the right one will be adequate.. Smile

Even so, it's always good to theorise ideas on how to reduce file sizes, etc. by using little hacks and tricks. Off the top of my head, I can't think of an honest answer as to why you might *desperately need* to rotate an image rather than just draw your required angles, but I'm sure the reasons must exist..

And, of course Safari-only and Dashboard-specific is fine; but being as standards compliant as humanly possible is so much nicer... in my opinion. Wink
View user's profile Send private message Visit poster's website Widgets
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.

 
Powered by phpBB © 2001, 2002 phpBB Group