I’ve recently created this: http://www.kevadamson.com/demos/big_free_world/animation.html
I used Adobe Edge, which I’m impressed with as a program (very much like Flash, so a familiar UI), although I’m not overly convinced of the code output.
In hindsight, I think I would have created this animation in Flash using vectors. Reasons being:
* The only browser that seems to render the movement smoothly is IE9
* It eats CPU. I wanted to go CSS so it would work on all devices, but while they have the support, they don’t have the power to run it smoothly
* It’s file size heavy for what it is – SVG would probably be better for images, but support and render quality seems inconsistent
I realise I could save file size with slightly better image optimisation, and it might also be the case that the code Edge renders is sloppy, but I went through the same processes with Edge as I used to with Flash, and it rendered something that, in real-terms, is inferior. So perhaps it’s a combination of:
a) Edge not being quite ready yet and
b) CSS animation not being quite ready yet and
c) My knowledge of the best ways to create the effects, not being quite ready yet :)
With Flash I could almost guarantee a playback quality across all browsers (that have Flash installed of course ;)) and merely have an image fall-back for the apple devices and users without Flash. That just feels tidier and a safer option – certainly for client work.
I guess my point is that CSS animation is the future, and it is certainly great for basic transitions on websites or apps built for use on specific devices / browsers (where you can guarantee SVG support and smooth rendering). I think you can also get the best out of it if you hand-code, as it seems different methods of creating the same effect have a massive difference on file size and render quality. But until I can use a program like Edge in much the same way as I used the Flash program, and create an animation with the same file size and consistent render quality as the SWF output, I can’t see myself using it just yet for stand-alone narrative animations for client work.
Would you agree? Do you have any thoughts on Edge?
Kev Adamson
Hi Rachel
I’ve recently created this: http://www.kevadamson.com/demos/big_free_world/animation.html
I used Adobe Edge, which I’m impressed with as a program (very much like Flash, so a familiar UI), although I’m not overly convinced of the code output.
In hindsight, I think I would have created this animation in Flash using vectors. Reasons being:
* The only browser that seems to render the movement smoothly is IE9
* It eats CPU. I wanted to go CSS so it would work on all devices, but while they have the support, they don’t have the power to run it smoothly
* It’s file size heavy for what it is – SVG would probably be better for images, but support and render quality seems inconsistent
I realise I could save file size with slightly better image optimisation, and it might also be the case that the code Edge renders is sloppy, but I went through the same processes with Edge as I used to with Flash, and it rendered something that, in real-terms, is inferior. So perhaps it’s a combination of:
a) Edge not being quite ready yet and
b) CSS animation not being quite ready yet and
c) My knowledge of the best ways to create the effects, not being quite ready yet :)
With Flash I could almost guarantee a playback quality across all browsers (that have Flash installed of course ;)) and merely have an image fall-back for the apple devices and users without Flash. That just feels tidier and a safer option – certainly for client work.
I guess my point is that CSS animation is the future, and it is certainly great for basic transitions on websites or apps built for use on specific devices / browsers (where you can guarantee SVG support and smooth rendering). I think you can also get the best out of it if you hand-code, as it seems different methods of creating the same effect have a massive difference on file size and render quality. But until I can use a program like Edge in much the same way as I used the Flash program, and create an animation with the same file size and consistent render quality as the SWF output, I can’t see myself using it just yet for stand-alone narrative animations for client work.
Would you agree? Do you have any thoughts on Edge?