Just stumbled across the Sencha Animator. It’s sort of Flash, but the output is HTML and CSS3 instead of a SWF!
Pretty powerful, if you check out some of the demos. The “Page Flip Demo” uses an interesting combination of rotate(), translate() and overflow:hidden to make the page look as if it’s flipping, and I love the idea of ads using CSS3!
Of course, like any WYSIWYG, the code it outputs is a little clunky, but really just the IDs and names of keyframe sets (which tends to be one of the more annoying parts of coding anyhow):
<div id="AN-sObj-24">
@-webkit-keyframes AN-ani-16 {...}
Reminds me a bit of Dreamweaver’s MM_ coding, but other than that, the code is what you would expect, and want, all from within a comfy GUI.
The exported CSS could use a little cleaning, things like…
border-left: 10px solid grey; border-top: 10px solid grey; border-right: 10px solid grey; border-bottom: 10px solid grey;
…instead of…
border: 10px solid grey;
…and every instance of -webkit-box-shadow gets one-too-many ;s:
-webkit-box-shadow: 5px 5px 6px grey;;
But I’m just being nit-picky now… :-)
Need to spend a little more time with this, but I do love how similar it is to Flash (meaning maybe some of my Flashy counterparts will find the transition easy).
It is interesting to me that they use keyframes to delay the later transitions rather than -webkit-transition-delay, perhaps it is more reliable to base transitions on “percentages of runtime” than on the user’s system clock? Not sure, but this is definitely something I’d plan to play with!
Also interesting that, although this is obviously Webkit-only, the chose to use HTML for their output rather than HTML5… :-)
Take a look at this 20-minute intro video to get a really good grasp of what you can, and can’t do. I don’t know that I needed a step-by-step of each and every piece of the right panel, but it is thorough (skip to about 12:00 to get to the good parts)…
One comment on the intro video asks why you can’t import images; you can, just click the “image” icon on the top menu.
Happy animating,
Atg