Thursday, March 28, 2024

Review: Sencha Animator for CSS3 Animations

6/17/13

In this review, we look at Sencha Animator, a program which allows you create CSS3 animations for WebKit browsers and mobile devices. Note that this program will work on multiple platforms, including: Macintosh, Windows and Linux. When you download the program you’re also prompted to download the Ball Bounce tutorial, as well.

Sencha Animations are designed to have a similar look and feel as Flash but with HTML5 and CSS3. Note that in order to use this software properly, you’ll need to set your default browser to either Safari or Google Chrome.

Here’s the interface when the program loads.

This is what the interface looks like with the Ball Bounce tutorial.

To get up to speed with Sencha Animator, have a look at the getting started tutorials in the top section.

You also need to download the assets folder and unzip it.

The Process of Building an Animation

There are a couple of things to consider when creating animations. First off, it’s important to become familiar with what a given piece of software will do and to be aware of its limitations.

Next, before you create any animation, it’s important to create a storyboard, which scripts out in detail what the animation will do before you build it. Any issues with the sequence can be addressed and fixed during the storyboard stage. Also, you’ll also find out what you need to have (such as image elements, stock photos, etc.) before you begin animating. This will save you a lot of time.

Notes and Observations

When working on a layout in Sencha Animator, you can set the size of the animation but when when working on it you might not be able to see the complete staging area. If this is the case, click on the the zoom control to the far right of the stage to zoom out.

When animating elements, it’s easy to forget the position of the timeline indicator. If this happens, go to the Edit menu and click on Undo or Ctrl+Z, then move the timeline indicator to the zero point to begin the new animation. Note that while you can move the timeline indicator to set keyframes, it’s tough to make it accurate. If exact placement is necessary, use the numerical entry. You’ll also notice another zooming option here. This is for zooming in and out of the timeline, not the stage above.

Using the numeric entry can be really touchy. I found that the best way of setting keyframes was to drag the slider to the approximate position, then refine it with the numeric settings. Here, it was also difficult to select just one grouping of numbers. Also, if you wanted to set a keyframe for, say, 15 seconds you need to make sure to input: 00:15:000. If you make a mistake and use a semi colon, it will throw the entire process off and you’ll have to enter it again.

During the process of the animation, I sometimes found that if I made a mistake and wanted to delete the object I was working on, I couldn’t do so. The only option was to turn off the visibility of the object. I also noticed that right-clicking the mouse didn’t bring up any additional menus or pop-ups.

The other thing that happened is when I finished the animation and went to preview the rocking boat portion, it vanished from the stage and even though all the keyframes were there, I couldn’t see the object. I was unable to find some troubleshooting information so I had to recreate the boat. I also noticed that the clouds (which I added in an earlier step) also vanished from the stage.

Here’s what the boat animation looks like so far. When I tested the completed project using the Preview in Browser option (I use Google Chrome), it worked just fine, except for the missing clouds element.

Sometimes the instructions confused me and I had to hunt around the interface. Fortunately, the interface was relatively simple. It would have helped a great deal to see icons and more images in the instructions, instead of screen shots only.

Conclusion

Overall, I think Sencha Animator has potential, but there are definitely bugs with the code, not to mention the other issues I’ve written about above. Based on what I’ve seen I cannot recommend the program. Still, your results could be different than mine. You can dowload the program for free and use it for 30 days.

Pricing

For a single use license, the price is $99.00. For a five developer pack the price is $485. For a twenty developer pack the price is $1895. More information can be found on the <a href=”https://www.sencha.com/store/animator” target=”_blank”>store page</a>.

System Requirements

Animator supports Windows, OS X, Linux 32-bit, and Linux 64-bit. You should have a fast processor and at least 1.5 GB RAM and 100 MB of hard disk space.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured