LATEST AWESOMNESS

#1 on Hacker News!

Animatron was #1 on the front page of Hacker News today! Coming soon: a blog post that looks at what kind of traffic, conversions rates, and feedback we got from the HN community …

Introducing New Fonts and Kinetic Typography!

We’ve just unveiled two big changes in Animatron at once: one’s a brand-new Inspector panel for the text tool (complete with Google fonts and the ability to upload custom fonts) and the other is a new feature - dynamic text effects, which make adding kinetic typography to your project as easy as one mouse click.

I’ll put together a quick, simple project to demonstrate how everything works. In fact, we just talked about kinetic typography and dynamic text effects at the Graphical Web Conference in the UK, so I’l recreate the demo project from our presentation.

First things first: type something, then select the font field.

You can scroll or search through our library of Google Fonts …

… which is a pretty long list, so to make your life easier, you can favorite the fonts you’re using most often by clicking on the star next to the font name.

Starred fonts will be listed in your Favorites tab, over here.

You can also upload your own font files to the Editor using the “Import” option in the Main Menu. Uploaded fonts show in “uploaded” tab and can also be saved to favorites. (In the very near future you’ll be able to drag TTF files directly into the “upload” tab). I’ve uploaded “OpenSans Bold Italic,” for example.

For our project, we’re going to search for and use a Google font called “Righteous,” it’s the same font as the original logo of the Graphical Web Conference.

So now that we’ve got the font right, we’ll go back to the main Inspector panel and set the fill and stroke colors - you can also change all sorts of other settings here, like bold/underlined/italic, font size, alignment, position on the canvas, size, shadow, opacity, and registration point. If you choose to have the text moving along a path, you can also select “orient to path” here, but that’s for another day …

Now here’s the fun part: text effects.

Animatron provides preset text effects, which means you just select the effect you want, click “apply,” and your text will be animated! In the bottom of the Inspector, you can see a preview of what the effect will look like before you apply it.

So here is our text is with a twister effect (and using the “flow” effect preset):

Next, on another layer, we’ll add the year, 2014, change the fill color, and give it a whoosh effect. Since we want “2014” to appear after “Graphical Web, Winchester UK,” we’ll change its time band so it appears on the canvas at 6 seconds.

Here’s the finished project!

You can open it in the Editor and play around with it here.

Text effects are in their infancy, but we’ll be adding tons more effects really soon. If there’s something specific you’d like to see, let us know at feedback@animatron.com!

  • Catherine Arizan, Marketing Manager

Space Man Project

Space Man” by Shmuel Landesman.

This project is a great example of our “Take a Picture” feature - when you import an image / SVG / audio file, the import dialogue box also gives you the option to take a photo with your computer’s camera and place that photo directly on the canvas. Open up Shmuel’s project here and try it out with your own pic!

The Graphical Web Conference

Last week, Dmitry and I gave a presentation on our new animated text feature at the Graphical Web Conference in Winchester, UK (you can read the abstract here and download the presentation slides here). It went really well, the audience was very receptive and had some great questions at the end!

We took the opportunity to attend a few of the other conference presentations - the W3C Standards and Implementors Panel on the last day was especially interesting, it was great to hear about what’s up and coming in browsers. Some things we learned:

  • 2D HTML canvas is already hardware-accelerated in most browsers, and in the ones it’s not, it will be soon.
  • 2D canvas (not just webgl) is high priority.
  • SVG + SMIL is IE’s to-do list, but it’s not top-priority.
  • SVG in general on the rise big time; everybody’s talking about it.
  • Text on canvas is low priority, they advised us to use layouting in DOM and then to use the metrics on canvas (which we already do in Animatron).

Overall, the Graphical Web Conference was fun and informative, and we hope to present again at next year’s conference in Pittsburg, USA.

- Catherine Arizan, Marketing Manager

Weapons of Mass Creation Festival

Last weekend, Animatron attended its very first conference! Kate (QA / Usability Engineer) and myself traveled to Cleveland to show off Animatron to a diverse group of designers and developers at the Weapons of Mass Creation festival, and demoing the tool in the wild, so to speak, went really well. We got tons of useful feedback that will help us focus on what features are valuable to our users - exporting animated SVGs, preset easings, and downloading HTML5 code were all very popular features.

Overall, it was a great success. Everyone was very friendly and engaged, and we had a great time! It was the first of three other conferences we’ll be attending through September:

Here’s a picture of our table at WMC - for the full set of pictures, take a look at our album on Facebook.

If you can’t make it to see a live demo at the conferences but have some feedback, questions, or suggestions for Animatron, please drop us a note at feedback@animatron.com - we’d love to hear from you.

- Catherine Arizan, Marketing Manager

Selected Objects

We recently introduced a new way of visually indicating which objects on the canvas are selected at any given time, and it’s a great example of how much difference a small change can make.

Here’s what my video cassette looks like in its normal, unselected state:

And here’s what it looks like when it’s selected - notice that the black outlines are present even around shapes that are hidden behind other shapes in the cassette?

It’s like X-ray vision!

- Catherine Arizan, Marketing Manager

Drinking Our Own Champagne

Every few months, all of us here at Animatron set aside some time to work with the Editor, creating a project and keeping careful notes of our thoughts and interactions with the product along the way. We think it’s really important to actually interact with the tool that we’re building! This exercise, which we call “Drinking Your Own Champagne*” is extremely useful in helping us decide what new features and functionalities should be prioritized in development, as well as finding bugs and usability issues.

This summer’s Champagne projects were loosely themed around computer science and tech. Take a look at the fruits of our labors below, plus a few thoughts from some team members about what they liked best and missed most about Animatron.

- Catherine Arizan, Marketing Manager

* This tradition actually used to be known as “Eat Your Own Dog Food,” a phrase that I personally had never heard before but that Dmitry Skavish, Animatron’s CEO, assured me was a common phrase in software development. I guess it is, but when I expressed the opinion that dog food was not a particularly appetizing description of our product, he changed it to “Drinking Your Own Champagne” to lend an air of elegance to the exercise.

“I liked the ability to select multiple keyframes select keyframes with Ctrl+drag and delete individual tweens from the layers panel, as well as the addition of “Snap to Path” to the layers panel’s Context Menu.” - Natalie

“I missed bone kinematics and/or shape morphing, and I wish that editing bezier curves was easier. I liked that I had the ability to draw something, add different tweens, then arrange things and share them.” - Anton

“I was able to create most of the things I had in mind fairly smoothly, but I realized that working with a long timeline becomes quite difficult, and I think some additional features would be helpful to improve the user experience.” - Olga

“Looking forward to the ability to paste multiple keyframes.” - Volodymyr K.

“I was really impressed with the new color chooser, but I really missed snapping (to grid / to object) very much.” - Catherine

“I missed color tweens - the ability to change the fill color of an object at different points in time without creating a copy of the shape.” - Ivan

“I missed embedded fonts and liked easings.” - Dmitry

“I wish that two different objects connected by a line could stay connected even if I moved one of the objects - so the line would be ‘glued’ to the objects.” - Eugene

“It would be very cool to have some green light to demonstrate that sync is ok and all work has been saved - not only that red label that tells you if the sync has failed.” - Mike

“I missed some kind of ‘snap to grid’ or ruler feature when aligning individual letters, and I wish it were easier to create a ‘typing’ effect, with one letter appearing at a time.” - Yuri

- Peter

Introducing Our New Website!

After five months of discussions, design revisions, and different ideas - our Basecamp project is approximately a million comments long! - we are excited and proud to unveil Animatron’s brand new website.

A lot changed between March and now: our first draft of the landing page featured our explainer video.

It wasn’t until later that the idea for our Animatron-Hero-as-Scientist materialized. Our designers created the entire front page animation in Animatron, of course.

(Click here to open this project in the Editor).

Our Plans section also changed quite a bit, both in terms of design and copy. Here’s our initial concept:

And the final version, which provides a lot more information and has explainer microcopy for each item on hover.

Some concepts were pretty solid throughout the design process, though. Our animated icons started out as basic sketches …

… and evolved into Animatron-created color icons:

Many thanks to the team at Heyllow for their work!

Head over to www.animatron.com to check out the new website in all its glory - and feel free to share your thoughts on the design with us at feedback@animatron.com.