LATEST AWESOMNESS

2 Design Conferences - and 2 More Coming Up

We’ve attended a few conferences over the past few months; first we gave a talk at the Graphical Web Conference in Winchester, UK, followed by Reasons to be Creative in Brighton UK and SmashingConf in Freiburg, Germany. Talking to so many potential users was great for us - we learned a lot about our target audience’s needs and wish-to-haves. Two things really jumped out at us, looking back:

Lots of people were interested in using Animatron in an educational capacity. Quite a few bemoaned the fact that they had to include Adobe Flash in their curriculums, despite thinking it’s completely outdated, because no authoring tools for HTML5 animation exist. They were excited to see that Animatron existed and asked about educational discounts, group / class accounts, and available tutorials.

We do offer student and educational discounts on a case-by-case basis at the moment (email feedback@animatron.com). We aim to have group accounts available by early January, and we do have plenty of tutorials available - and in the next few days, we’ll be adding a suggested 8-week curriculum to our website that instructors can use to teach Animatron!

Secondly, visitors to our stand often asked to see examples of a project’s exported HTML5 and SVG code. We’ll be doing an upcoming blog post dedicated to the topic, but in the meantime you can open this simple project and export to HTML5 or animated SVG from the main menu to take a look.

People everywhere wanted the ability to add interactive events to their animations - click to open a link, mouse hover triggering some animation, or clicking from one scene to another, for example. We’ve had the ability to add interactivity for a while, but we recently took it out of commission to rehaul the API and make it a more user-friendly feature. We’re fine-tuning and testing the new version now, it’ll be back within the next month.

We’ll be attending two more conferences in November - the Future of Web Design conference in New York City on November 3rd - 5th as well as the HTML5 Communications Summit in San Jose, CA on November 18th and 19th - so if you’re at either of these events, come by and say hello!

New Blog Framework

As you may have noticed our blog appearance has been changed recently. We switched from Tumblr to self-hosting using Octopress.

There are several reasons:

  • we have full control over the styling of the blog
  • we have full control over when and where we load various resources, i.e. we can delay loading of stuff until people scroll down
  • we can see how the post will look like before we publish it
  • it’s way cooler than tumblr :)

Initially we thought of adding some kind of header animation to the blog and asked our awesome Shmuel to come up with something, but eventually we decided not to put it here, mostly because we wanted to start with the content. The animation Shmuel created is super cool, so I just want to share it:

by Dmitry Skavish

#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