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:
- Graphical Web in Winchester, UK (August 27 - 30). We’ll be giving a presentation on animated text effects in HTML5 and SVG.
- Reasons to Be Creative in Brighton, UK (September 1 - 3).
- Smashing Conference in Freiburg, Germany (September 15 - 16).
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 firstname.lastname@example.org - we’d love to hear from you.
- Catherine Arizan, Marketing Manager
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
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
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.
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!
Scenes are convenient way to organize your project in time and reduce the number of layers shown in the layers panel. You can think of them like folders on your computer - each scene is a self-contained unit made up of different elements (images, objects, audio, tweens, etc.) that can be moved around in time.
Click on the “Scenes” tab next to the Library to open the list of a project’s scenes. The order in which the scenes appear, from top to bottom, is the order in which they appear in the project.
Add a new scene by pressing the + icon. The new scene will be inserted at the bottom of the list, i.e., at the end of the project, by default.
Select a scene and press the Duplicate icon to create a copy of it. Copying scenes is a handy way to preserve some elements when you move from one scene to the next - for example, background images or objects. The duplicated scene will appear directly underneath the original.
Scenes are named “Scene 1,” “Scene 2,” etc. (in order of their creation) by default, but you can rename them by double-clicking on them in the Scenes list or in the Inspector Panel of a selected scene.
To change the order in which the scenes play, select a scene and drag it up and down the list.
Delete a scene by selecting it and pressing the trash can icon.
You can also add interactivity to a scene by clicking on the scroll icon in the Inspector Panel …
… and set the duration of the scene. This last one is particularly important! Your scenes will naturally follow each other throughout the course of your project, but you have to set how long they will play for. Each scene will only play for as long as its duration is set, which means that if the scene in the above example is ten seconds long, it will still only be playing for .05 seconds.
You can decrease and increase the duration of a scene by clicking and dragging the underlined field left and right (protip: all underlined fields in Animatron can be changed in this way), or by entering a value manually.
The duration of a scene is visually represented on the timeline by a red line at the endpoint.
In addition to changing the value in a scene’s Inspector Panel, you can drag the knob at the top of the red line along the timeline to change the duration of the scene.
Priy Santikary and Alissa Skavish, both students at Advanced Math and Science Academy in Marlborough MA, are joining us this summer to work on creating video tutorials about Animatron’s features. In addition to being coworkers, they’ve also been best friends since sixth grade!
When she’s not at work, Alissa’s interests include dance, especially ballroom dancing. She loves to read books and learn new things, and friends and family are a huge part of her life. She also loves spending time outside and would rather be outside all day rather than inside watching a movie. In the future she’s thinking of going into Biology, leaning towards Neuroscience.
Priy’s off-hours interests include playing basketball, running, and spending time with her friends and family. She hopes to study computer science in the future and become a programmer.