If you’re new to Flow then this is the best tutorial to get you started. We’ll go through a few simple steps to get you up and running with our tool, introduce you to a few key ideas, and have you animating and exporting code in just a few minutes.
The first time you launch Flow you’ll see a couple of buttons on the welcome window. One launches a short intro video, the other opens a ready-made Flow file with a number of timelines.
Clicking on the intro video button will launch a short video that covers everything in this tutorial.
Notice, the button disappears after you tap it.
Flow also comes bundled with a sample file to get you started. This file was created from the intro.sketch file that you can download here…
THIS FILE WAS CREATED WITH SKETCH 52!
After the first launch you’ll see that those buttons aren’t there anymore… Well they might be if you haven’t yet created and saved a Flow file. Anyways…
If you want to see the intro.flow file or intro video again you can always:
The intro file has a number of timelines in it, each showing a specific technique. For more on each technique you can have a our tutorials and docs. For now, let’s just have a look at how to check out each timeline in this file.
When you open basics, you’ll see this:
There are two things to get you started…
To play the first timeline, select it then hit the play button with your mouse, or tap the space bar.
When that’s done, you can hit the play button again to restart the animation.
You can also toggle the loop button to watch the animation repeat.
To export code follow these steps:
Flow exports a full Xcode project that will run on the iOS simulator. To do so, follow these steps:
Flow is pretty strong when it comes to exporting iOS code. That is, what you see is Flow you’ll see 1:1 in the simulator.
There may be an edge-case or two that we missed… If so, > If so, let us know … email us.
Flow exports a pretty clean set of HTML and CSS code that uses keyframe animations. To run it, follow these steps:
Flow is pretty decent with HTML export.
Alas, cross-browser support is a pain even if we were coding things up by hand… Sometimes Safari just doesn’t want to cooperate.
If you find a discrepancy in our export, let us know! Maybe you’re doing something complicated, maybe we missed something. In either case, we want to make Flow as strong as possible!
If so, let us know … email us
To choose another timeline, simply select it from the timeline hierarchy at the bottom-left of the app. When you select any one of the timelines you’ll notice that the previous one closes, and the new one unfurls to show it’s main layers. You’ll also see the stage change.
After choosing another timeline, hit play again to watch it.
Wherever you’re at, whatever you’re doing, whichever timeline you’re looking at, I want you to now slide that mouse cursor over top of the stage, select a layer and move it around.
Selected a new timeline
Now hit play!
It’s that easy to move things and have your changes become part of the animation.
Want to play with the timing? Just move a keyvalue around.
You can undo just like in every other application on earth, or you can sliiiiiide that cursor down into the timeline viewer, click on the keyvalue that just popped up and hit the delete key.
You’ve got the basics down now, everything else is up to you. You can:
We’d love it if you help spread the word about Flow.
You’re a gem.
You’re the of my eye.
If you haven’t already, please go drop a dime on a license and help us keep rocking out more features for Flow!