LATEST AWESOMNESS

Thanksgiving Is Coming

We have added new shapes just in time for the upcoming Thanksgiving holidays!

Check it out and create some cool clip about pilgrims and indians.

Our animator Ely created beautiful animation for the landing page. If you have not seen it yet, go and check it out.

Opening Url on Click

While we bringing interactivity back to life many of our users need to do something simple now. Like opening an url when somebody clicks on their clip. Here is a workaround you can use now:

  • Download HTML5 code via main menu and unzip it

  • Open project.html in your favorite text editor and find there the section which looks like this

    <script type="text/javascript">
        var width = 550;
        var height = 450;
    
        var playerParams = {
            width: width,
            height: height,
            repeat: false,
        };
    
        var WRAPPER_ID = 'target';
        var wrapper = document.getElementById(WRAPPER_ID);
    
        document.body.className = 'no-iframe';
        wrapper.className = 'no-iframe';
        wrapper.style.width = width + 'px';
        wrapper.style.height = height + 'px';
        wrapper.style.marginLeft = -Math.floor(width / 2) + 'px';
        wrapper.style.marginTop = -Math.floor(height / 2) + 'px';
    
        var filename = 'project';
        var animation = {......};
    
        var player = anm.createPlayer(WRAPPER_ID, playerParams).load(animation, anm.importers.create('animatron'));
    </script>


  • Change the following parts there

    var playerParams = {
        width: width,
        height: height,
        autoPlay: true,        // THE CLIP WILL AUTO PLAY
        repeat: false,
        controlsEnabled: false // NO PLAY/PAUSE BUTTONS WILL BE SHOWN
    };
    and

    var player = anm.createPlayer(WRAPPER_ID, playerParams).load(animation, anm.importers.create('animatron'));
    
    // ADD CLICK EVENT LISTENER
    wrapper.addEventListener('click', function() {
        window.open('http://www.animatron.com');
    });

Now the clip will play right away, no controls will be shown and when clicked it will open www.animatron.com, check this out below:

Sneak Peak: A Preview of Upcoming Features

Two cool new features will soon be available in Animatron - here’s a preview of what they’ll look like.

Interactivity

A much-wanted feature, scripting and interactivity were actually available in Animatron quite some time ago. Users could add handlers in Javascript and select inputs (like on-click or hover)and events (like go to scene or open URL) from a drop-down list of code snippets. A few months ago, we disabled this feature in the Editor while we refactored the player API and designed a more user-friendly UI for choosing events; now we’re working on reintroducing interactivity in the Editor and hope to have it available by the end of November.

Pattern Fill

A new tab will soon be joining the color options in the FIll section of the Inspector panel - “Pattern.” Pattern fill will allow you to select an object and fill it with a variety of prepopulated patters, or generate a random patter. We’re currently testing out this feature, and it will be available in a few weeks (along with color tweens!)

Just in Time for Halloween …

We have some new additions to our Shapes tool, specially created for the scariest day of the year!

Just select the tool from the sidebar, pick a vector shape, and click and drag to draw it on the canvas.

Our Hero tool, which usually draws an animated bouncing Animatron Hero, also has some new additions for the season: a vampiric version of the original Hero, a bat flapping its wings, a friendly spider, and an animated greeting for the season.

In the spirit of Halloween, we’ve also added some new front page animations to our website - take a look (hint: refresh the page a few times to see all three).


-Happy Halloween from Animatron!

We’re Looking for Beta Testers for Our New Video Import Feature

Over the past few months, more and more users have been requesting a new feature: the ability to import video files into their project and a) add animation on top of it, plus b) animate the video itself on the canvas. We’re excited to announce that it’s (almost) here!

By almost, I mean that the functionality is ready, but there’s a lot of testing needed before it’s ready for prime time. For now, Pro users can import small video files (up to 50Mb) and we’ll soon be opening beta testing (with an increased file size limit) to interested users.

If you’re interested in being on the beta list, drop us a note at feedback@animatron.com. Full-featured video import will be available by the end of the year!

-Catherine Arizan, Marketing Manager

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!

-Catherine Arizan, Marketing Manager

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 …