30 Aug 2012 1:43 AM #1
Image rotating animation not displayed in browser
I'm a new user of Sencha Animator. Currently I'm using the trial version.
I tried to do the 360degree rotation of an image and it works fine but when I tried to preview it in browser, export it out as html, the animation just doesn't work (the image stands still like there's no animation effect on it at all). I tried different degrees and found out only rotations from 2 - 179degree work.
Is that because I'm using trial version or because it is just not possible to do a 360 deg rotation?
Thank you in advance!
30 Aug 2012 2:10 AM #2
I just found a way to make it work - divide the rotation into 3 keyframes (1st 179deg, 2nd 358deg, 3rd 2deg, it also turns out to be a better effect).
But please let me know if there is a way to make it rotate all 360 deg without dividing into different keyframes.
30 Aug 2012 6:50 AM #3
Hi, and welcome to Animator forums!
There are no features that are disabled in the trial version, so a rotation should work, no matter how many degrees you entered.
Something else might be the cause of the problem - did you perhaps preview your animation in Chrome, and did your rotating element also have opacity applied to it (even if opacity is set to 100%?). If so, you may be encountering a bug in the latest version of Chrome (it was reported by other Animator users, see http://www.sencha.com/forum/showthre...-Chrome-Issues ). If this is the issue you are encountering, you can find the workaround in that thread also.
Could you please verify if your animation works in Safari and / or Firefox (to export to Firefox, please check the property "Firefox" in the Properties Panel > Project tab > Browser Support), and let us know?
Also, good luck with your project!
2 Sep 2012 10:42 PM #4
Thanks for your reply. I don't have the project anymore, but as I'm doing a new one, I tried to flip the image, using rotation x 180 deg and y 180 deg and it doesn't show animation of the image in Chrome (other images with animation are fine), the animation works in Firefox but somehow the last part - flipping animation does not work. And IE just doesn't show anything (blank white)
If really needed, I can send my project to you. Please let me know if this kind of problem can be fixed.
Also, is it possible to make the animation clickable as a link? I mean, when you click on the animation means you click on a link, leads you to a website..
Thanks so much!!!♥
3 Sep 2012 6:37 AM #5
Unfortunately, the flipping (rotation by 180 degrees over either x and y axis, or both at the same time) is affected by the very same bug in Chrome as the one that you encountered earlier. However, this should still work correctly in Safari and in Firefox, so if you are encountering a problem there, something else might be at hand. If you would like, I can take a look at the project file, and see what is causing incorrect behavior in Firefox if you send it attached to me.
The animations currently don't work in IE, because IE has very low support for CSS3 animations and many of the other CSS3 properties. The browsers that are supported in Animator are all webkit-based browsers (Chrome, Safari, and iOS browsers) and Firefox.
You can make your entire animation clickable by placing a square object on top of all the other objects and setting the properties as follows:
width, height -> match stage width and height
x, y -> 0,0
opacity -> 0
borders -> turn off