Make an animated logo

An animated logo draws attention without being loud. The principle is simple: one shape, two keyframes, and a tween that connects the two poses. The demonstration below shows the intended result.

The mark breathes and sways, on a loop.

Drawing the shape

In the editor, draw your mark. For this example, a square with softened corners and a disc cut out of it is enough. Select everything, then group it: this produces a single object that can be animated as a whole. Give it a clear name in the library, for instance Mark.

Setting the first keyframe

The timeline, at the bottom of the screen, represents time. A keyframe is a pose saved at a given moment. Place the playhead at the start, select the mark, then press F6 to set the starting pose.

Then move the playhead forward, for example to the middle of the animation, and adjust the pose slightly: scale the mark up and rotate it a few degrees. Another press of F6 records this second pose.

Connecting the two poses

Between two keyframes, FlatInk can interpolate. Double-click the span between the two keys, or choose interpolation from the menu: the mark then glides smoothly from the first pose to the second. This is called a motion tween.

For a breathing effect, add a third keyframe identical to the first, at the end of the animation. The mark grows then returns, on a loop.

Tuning the motion

A few settings noticeably change the feel.

The pivot is the point that rotation and scale work around. Place it at the center of the mark for a balanced motion.
The easing sets the rhythm between two keys. A soft curve produces a more natural motion than a constant speed.
The duration is set on the timeline. The longer it is, the slower and calmer the motion.

And then

Once the animation feels right, it can be looped in the player, exported, or given a layer of interactivity, for instance a small reaction on hover with a when hovered event. The next step introduces events: see the drag-and-drop mini-game.