0.7.0 — Area Select + Zoom.

The big ticket for this release is a revamped timeline. You can now, officially, scale the timeline and move around in it. Also, we’ve added area select for keyvalues – along with some great alignment and distribution features.

Oh, and if you’ve got a keen eye, you’ll notice that Nicolas has been cracking down on UI updates – and things are prettier than ever.


Enough said.

Area Select

Where once you could shift select a bunch of keyvalues, now you can just use your mouse.

Grab all those lovely keyvalues. Do it. Grab ‘em.

This is one feature I’ve been wanting to roll out for quite sometime and, now that it’s here, I’m stoked. Area-select makes it easier to use many of the great features we’ve added around manipulating keyvalues.

Aligning Keyvalues

Working with multiple keyvalues is really similar to working with multiple layers. Now, when you select a bunch of keyvalues you’ll see an alignment and distribution options appear at the top of the Properties Panel.

There are a few options, some of which are for single keyvalues and others that are for “animations” or sequences of keyvalues.

Align and Distribute Across Tracks

Let’s say you have a few track animations that you’d like to sync up. In this case, you want the beginning of their animations to start at regular intervals. To do this, you can simply grab the lot of them and hit the distribute icon.


You can also align by left, right or centre.

Distribution Across a Single Track

Now, let’s say you’ve got a bit of a mess on your hands, where all your keyvalues are in the right order but the timing is sloppy. You can distribute those keyvalues so that they appear at regular intervals using the Distribute Horizontally function.


Here you can see that the colors are changing at random times. Then, after distributing, they are all evenly spaced.

Working with “Animations”

An interesting approach to alignment happens when you have more than one keyvalue selected on a track – let’s call this an “animation.” When you have multiple animations selected across multiple tracks, you can align and distribute based on the left, right or centre points of those animations.

Aligning Animations

This is pretty straightforward. You can align animations to their left, right or centers. This is nice for quickly iterating through different visual effects.


Distributing Animations

If you can distribute keyvalues, you should also be able to distribute animations.


The effects of this function might take a bit of getting used to. For example, distributing a set of animations can affect the length of your total timeline, or appear to have a random effect. For example, if the left-hand keyvalues of the animations are distributed but the animations are all different lengths, things might appear a bit strange.

What’s next?

We’ve already got a 0.8.0 release that we’re working on internally. We’re adding:

  • a dash of performance,
  • a touch of UI,
  • a pinch of bug fixes,
  • a splash of love.

We’re also revamping the website — with content and other lovely looking things — but that’ll release a bit later.

Wait. What’s Flow?!?!

Great question.

Flow is a production tool that lets you animate static designs in seconds, then export those animations to either HTML5 / CSS or Swift / iOS code.

If you’re not already familiar with our product please have a look at our previous article:

Flow 0.6.0

Our Site

If you want to know more about the product, just visit our website:


Get a Copy

If you want to try it out, grab a copy from:


…where you can get a license and a .dmg with all our love and hard work bundled within.

Get in Touch

Have some more questions? Connect with us at:

[email protected]

Or, Slack Us…




Flow 0.7.0 was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source link https://blog.prototypr.io/flow-0-7-0-c25e685d6021?source=rss—-eb297ea1161a—4


Please enter your comment!
Please enter your name here