LATEST AWESOMNESS

Going for the Prize!

If the movies have the Oscars and television has the Emmys, the online community has the Webbys. The Webby Awards, which are 19 years old, are produced by the International Academy of Digital Arts and Sciences (IADAS), which has more than 1000 members. Awards are given by a judging committee and in a “people’s choice” category. Entries can be submitted until Jan. 30, for a fee of $345 in the website/mobile/social media category or the online film/video category, and for $345 for a single advertisement or $595 for an advertising campaign. The Webby Awards celebrate work that is visually arresting, functional, engaging and interactive. As with the Oscars and Emmys, there are benefits simply for being part of the process. Entrants get to share their efforts with their peers and potential clients, and meet designers, animators, producers, writers and photographers that might one day become their colleagues.

If you don’t submit an entry for the Webby Awards, there are several other places to share your work and gain industry recognition. The D&AD Professional Awards trumpet the creative process in the design, advertising and digital fields. The D&AD “Pencils” are awarded in April, and the deadline for entry is February 18. Fees range from $210 to $1220, depending on the award category. Other awards include The American Advertising Awards (deadline February 18), the Hermes Creative Awards (entries accepted beginning February 1) and the The SEGD Global Design Awards, which accept late entrants until February 14. Even if you aren’t ready to enter a competition, visit the sites that promote innovation in design and be inspired for next year!

How to Make Carousel in Animatron

If you’d like to attract users with carouseling the sequences of different animations, Animatron Player is capable of that, and it’s easy.

First, you need to create these animations in the Animatron Editor and publish their final variants you want to use.

When you publish an animation, you create a snapshot of it. Snapshot is a saved state of animation, so when you edit your project, no new changes are reflected in a snapshot until you create a new one.

When you publish an animation, you get a URL of a snapshot in response. When you open this URL in a browser, you see the last state of a project, exactly the way it looked before you pressed the Publish button. This URL looks like:

http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4

I’ve created three simple animations with shapes moving from left to right to show you what should be done step-by-step:

(If you feel self-confident, you may just take a look at the final result, though)

Every “Playable Snapshot” link from a list above looks like http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4, the difference is only in the ID of a snapshot.

If you add .json to this URL, i.e. http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4.json, you’ll get the snapshot in a “raw” format, which Player understands.

For the projects above the corresponding URLs are:

  • Square: http://clips.animatron.com/3a612e05fdb534e68c759af5e28cca99.json
  • Circle: http://clips.animatron.com/f33e5f0bcdb6a6a7a50e0759a7fb7e17.json
  • Chick: http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4.json

It’s time to add everything in a page now.

Add Player javascript in a <head> of your page:

1
<script src="http://player.animatron.com/latest/bundle/animatron.min.js" type="text/javascript"></script>

Create a target to place a Player inside, in a <body>:

1
<div id="player-target"></div>

Add the URLs of snapshots you plan to use in an array (so yes, it can be extended):

1
2
3
4
5
var snapshots = [
'http://clips.animatron.com/3a612e05fdb534e68c759af5e28cca99.json',
'http://clips.animatron.com/f33e5f0bcdb6a6a7a50e0759a7fb7e17.json',
'http://clips.animatron.com/dc7d7b1e946fa43c53d012a22f3045e4.json'
];

And, next to that, add this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// configures Player to show itself transparent when nothing loaded inside,
// see notice below for the reasoning
anm.Player.EMPTY_BG = 'transparent';
anm.Player.EMPTY_STROKE = 'transparent';
anm.Player.EMPTY_STROKE_WIDTH = 0;

// importer understands the format of animations which lie under given URLs
var animatronImporter = anm.importers.create('animatron');
var player = new anm.Player();

// this function helps to cycle the snapshots
var currentSnapshot = 0;
function loadNextSnapshot() {
if (!projects[currentProject]) return;
player.stop(); // ensure Player is stopped
// load next snapshot
player.load(projects[currentProject], animatronImporter);
currentProject++;
};

// initialize the player with custom options
player.init('player-target', {
width: 200, // any width you like
height: 164, // any height you like
autoPlay: true,
drawStill: false, // NB: see notice below
ribbonsColor: 'transparent', // NB: see notice below
controlsEnabled: false });
// load first snapshot into Player and plays it
loadNextSnapshot();
// on every complete-playing event (different to 'stop' event),
// try to load next snapshot and play it
player.on('complete', loadNextSnapshot);

Here you go, you’ll see your projects play one by one. Once more, here you may find the final result.

Important Notice

Depending on your connection and page design, you may or may not notice a flashing screen, appearing just between your scenes. And it actually exists there. Here’s why: when player finishes playing previous snapshot, it starts loading the next one, and it takes a tangible amount of time to load it from remote resource. So there is a pause between these snapshots. If you don’t like the way it matches your design, you are free to configure EMPTY_BG and EMPTY_STROKE values in the code the way you want, same as ribbonsColor Player option.

To resolve flash-issues completely, you may include snapshots in JSON format directly into your page, it will change nothing but the snapshots array, it will look like this:

1
2
3
4
5
var snapshots = [
{ /* JSON of a first snapshot */ },
{ /* JSON of a second snapshot */ },
{ /* JSON of a third snapshot */ }
];

Since now the loading will be synchronous, you can not call load immediately from complete handler, you need to postpone it a bit, change loadNextSnapshot to:

1
2
3
4
5
6
7
8
9
var currentProject = 0;
function loadNextSnapshot() {
if (!projects[currentProject]) return;
player.stop();
setTimeout(function() {
player.load(projects[currentProject], animatronImporter);
currentProject++;
}, 1);
}

The final version.

This will guarantee a non-noticeable switch between your scenes, but on the other hand will make your page “heavier” to load at start.

Responsive Web Design With Animatron

To make an Animatron clip auto-size according to screen/container width, there are two options:

First is to use an <iframe> and not supply the w&h parameters in the clip URL, like this:

<iframe src="https://clips.animatron.com/fac728e3989f98f94378c7a90c0251ad"></iframe>


This way, the player will automatically occupy the whole size of the frame - so we can safely set the width to 100%. See for yourself - this frame below is set to 100% width:


Note that if the animation aspect ratio does not match frame’s, ribbons will be shown.

If you need your animation to resize when the window is resized, you will have to embed the clip in your page. See this article for instructions on how to do it.

After you get the player instance, use the window’s resize event to resize your player:

window.onresize = function(){
  player._resize(window.innerWidth, window.innerHeight);
}

In the code above, the player is resized to occupy the whole window’s width and height. You will have to adjust the function to use the container’s dimensions if that is not what you want.

See an example here - try resizing the result window and see what happens!

14 TIPS to MAKE 2015 YOUR MOST PRODUCTIVE YEAR YET

Rachel Gillett is a multimedia journalist and editorial assistant for FastCompany.com’s Leadership section. Her work has been featured on PopPhoto.com, AOL.com, and elsewhere. She currently lives in Jersey City and enjoys contributing to the vibrant arts and crafting scene there.

To make your quest for a more productive self this year something you can really work towards, we asked some of the most productive we work with all year what they do in their everyday lives to get so much done. Here’s what they had to say:

  1. VISUALIZE AND SET UP YOUR DAY THE NIGHT BEFORE

    Before emotional intelligence expert and author of The Other Kind of Smart Harvey Deutschendorf goes to sleep, he says he makes some basic decisions about the next day like what he’ll wear, eat for lunch, and the route he plans on taking to work. “The less time and energy you take to focus on routine, everyday things, the more you will have to work on what is important,” he explains.

    He also suggests visualizing what exactly you plan to accomplish the next day. “Become extremely focused upon making this an ongoing part of your routine and you will surprise yourself by how much more you accomplish,” he says.

  2. SURROUND YOURSELF WITH PRODUCTIVE PEOPLE

    “It’s very easy for me to work alone, but I find that my productivity is maximized when I surround myself with productive people I don’t know,” says Vivian Giang, a freelance journalist who covers leadership, organizational psychology, and gender issues.

    She says working around productive strangers keeps her accountable for staying on task. “I’m not browsing social media without purpose. I eat healthier, I don’t take long breaks. I semi-compete with them because they always look like they’re coming up with great ideas,” she says.

  3. STAND WHILE YOU WORK

    When journalist and co-author of The Art of Doing Camille Sweeney had to interview 15 prominent newsmakers in just a few days, she made her calls standing. “This was the year I got out of my chair and on to my feet at my desk,” she says. “It’s made such a difference.”

    Before Sweeny’s portable standing desk arrived in the mail, she improvised and put her laptop on top of a nine-inch square cardboard box on her desk. Now she alternates every few hours between sitting and standing.

  4. FOCUS ON ONE WORD FOR THE YEAR

    “A one-word theme creates simplicity, clarity, and life change,” says Jimmy Page, author of One Word That Will Change Your Life and vice president for the Fellowship of Christian Athletes. “You’ll find renewed passion and purpose by achieving laser-like focus that drives productivity,” he says.

    “Best of all, one word transforms not only what you do, but who you become; it impacts every area of life—physical, relational, mental, spiritual, emotional, vocational, and financial. One-word focus eliminates distractions and turns our intentions into actions.”

  5. MAXIMIZE YOUR MOST CREATIVE TIME

    Sally Poblete, Founder and CEO of healthcare technology company Wellthie, tells us to first track and explore when we’re the most creative and then create the space in our schedules to capitalize on it.

    “I find that I think best in the mornings with fewer interruptions, so I do my best to keep that time open for brainstorming, writing, and meeting with others who inspire and challenge me,” she says. “I save my necessary meetings for the afternoons, when I am energized from my morning productivity and excited to share my plans with my team.”

  6. KNOW WHEN TO NOT BE PRODUCTIVE

    On the flip side of this, Starr Million Baker, CEO and cofounder of PR agency INK Public Relations, points out that there are only so many things we can do in a day. More importantly, she says, there are only so many things we should do in a day.

    “Knowing when to say ‘that’s not going to happen today’ is a skill that has given me a greater ability to have a laser focus on the stuff that really, truly must get done.” Baker says she uses the task management tool Todoist to get all of her tasks in one place. she then religiously clicks the “postpone to…” button throughout the day as the clock marches towards 5 p.m. “I evaluate my tasks more than once a day as I work in a field full of fire drills, so priorities are ever-changing.”

  7. SLOW DOWN AND REASSESS TO AVOID GETTING OVERWHELMED

    “When you have more things to do than you can count,” says Scott Eblin, author of Overworked and Overwhelmed, “it can quickly throw you into a fight or flight state of overwhelm. If you feel yourself getting spun up like that, stop before you start to do anything else.” He instructs us to think of STOP as the acronym for Slow down, Take three deep breaths, Observe what needs to be done most, and then Proceed.

  8. PRIORITIZE WHAT MATTERS

    One of the secrets to feeling satisfied with your productivity according to Erin Baebler and Lara Galloway, certified life and business coaches and the co-authors of Moms Mean Business: A Guide to Creating a Successful Company and Happy Life as a Mom Entrepreneur, is spending the majority of your time on the things that really matter to you—your priorities.

    “When you’re clear on what you want to accomplish and the actions that will get you there, it becomes much easier to decide what needs to get done and what can either wait for later or not be done at all. Plus, and here’s where the real productivity comes in, we are much more motivated to work on things that truly matter and therefore able to get more done in a shorter period of time.”

  9. BATCH TASKS TO CREATE FLOW

    As a writer, The Five-Minute Mom’s Club: 105 Tips to Make a Mom’s Life Easier author Stephanie Vozza’s day consists of research, interviews, first drafts, and final edits. She’s more productive she says if she can stay in one task mind, instead of changing gears. “I try to schedule my day around one activity; a day of interviews, for example, or a morning of writing and an afternoon of research. I discovered this after interviewing Steven Kotler, author of The Rise of Superman for Fast Company, who writes about how being in a state of flow can quintuple your productivity.”

  10. BE INTENTIONAL ABOUT EMAIL

    Before opening any email, cofounder of Crazy Egg, Hello Bar, and KISSmetrics Neil Patel says you should first ensure you have the time to respond to it. “If you decided to respond later on, it will cause you to have to re-read the email, which is an inefficient use of your time,” he says.

    And remember that most emails don’t need an immediate response—or any reply at all—says Zendesk CEO and founder Mikkel Svane. “Take a breath and wait a minute before jumping into the fray on group emails and non-urgent issues. You’ll find that sometimes the most powerful response is no response at all. You’ll suddenly have more time for the replies that deserve your time and attention.”

  11. DO WHATEVER IT TAKES TO BLOCK OUT DISTRACTIONS

    Vozza likes to spend an hour unplugged from the Internet, removed from distractions like email and Facebook, and sometimes ventures to spend an entire workday offline. “I discovered how much time the Internet sucks when my service went out for a day; in six uninterrupted hours I finished work that would normally take me two or three days. If you need to check something online, make a list and when you restore your service look up everything at once.”

    David Johnson, COO and CFO of craft brewery Fireman’s Brew, Inc., suggests simply closing your door. “You’ll find that it’s much easier to make progress on your own work when you’re not being pulled in a number of different directions.”

  12. CREATE A LIST OF EASY TO-DOS

    Carson Tate, author of Work Simply: Embracing the Power of Your Productivity Style, makes a list of tasks that can be done in 15 minutes or less. She suggests we keep this list with us at all times so we can convert those odd moments of time like waiting in line or waiting at the dentist’s office into productive microsegments of work.

    “This list is also your go to when you feel the tug of procrastination. You can quickly complete a task, which gives you a little energy boost, helping you transition into working on a more challenging or complex project.”

  13. CREATE A LIST OF YOUR MOST IMPORTANT TASKS

    Speaking of lists, Jones Loflin and Todd Musig, coauthors of Getting to It, have another kind of list to make you more productive: an IT list, or Important Things list. This list requires us to identify the three tasks or activities that would most effectively move us toward the accomplishment of our highest priorities.

    “So much of today’s productivity depends on having the mental clarity to fully focus on the task of the moment. That can be difficult if there are items you haven’t addressed and they are holding some of your mental resources hostage.” Loflin and Musig offer these tips to help determine if any of our ITs may be limiting our productivity:

    • An Essential IT: Something that if accomplished would significantly increase your ability to focus
    • An Avoidance IT: This could be something you keep putting off, but your mind won’t let it go
    • An Incomplete IT: Our brains are wired to not let go of something until it’s finished. Once you finish the task, your mental resources can be fully focused on the task in front of you.

  14. CONSISTENTLY SELF-EVALUATE

    “Rigorous self-evaluation is the beginning, middle, and end of self-management. It is the essential habit of self-improvement,” says Bruce Tulgan, author of The 27 Challenges Managers Face.

    Tulgan instructs us to constantly assess our own productivity, the quality of our work, and our behavior. We should continuously ask ourselves: “What can I do to get more work done faster?” “Should I revisit my priorities?” “Do I need to focus my time better?” “How can I eliminate time wasters?” “Do I need better time budgets?” and “Do you need to make better plans?”

    “But remember: Self-evaluation is an engine of self-improvement only if you use the information you’ve learned from it,” he says. “Start on one small goal at a time—the smaller the better. Once you meet that goal, take another small step. Self-management and self-improvement come one small step at a time. It’s a never-ending process because there is always room to improve.”

Hopefully these tips will make for a more productive 2015.

Teacher’s Feedback Wanted

Over the course of last half a year we noticed a great deal of interest to Animatron from educators.

Teachers write to us asking excellent questions, they need tutorials, curriculums, on-line courses. And most importantly they teach students animation techniques in Animatron. We often see waives of similar projects on our Explore page.

Believe me it is a very pleasant feeling to observe development of animators of the future!

We know teaching is very hard, noble and valuable work and recently Animatron team set a goal to provide all the necessary features to make teaching animation with our tool The Best Teacher-Student experience possible!

Here is a list what most of the teachers want:

  • To have safe and secure environment free of adult content.
  • To have personal cabinet with dashboard to post homework assignments and announcements.
  • Using master teacher’s account to be able to place students into groups providing each student with unique login ID and password.
  • To have the ability for all projects to be monitored and accessed from the teacher’s account. 
  • To have control over student’s project sharing and publishing options.
  • To display statistics about students’ progress, time they spent in Editor and on particular assignments etc.
  • To stay connected to other teachers to share lesson plans, ideas, and methodology.

Now it is the time when you, as a teacher, have an opportunity to influence our work and shape Animatron for Education!

Send us email at feedback@animatron.com or simply comment here with your ideas, concerns and suggestions!

Editing Motion Path

Here is a new along-awaited feature: you can now edit motion path for your animations. To do that you simply click a path curve like any other curve:

As you do that, all the usual nodes and handles come up and you’re free to do whatever you want, adjust handles, add and remove nodes and use the node conversion tool:

Check out a short demo that illustrates how easy it is to adjust motion paths. A cute ghost is taken from our shape library and given the ability to fly: