In this episode, we’re going to animate our little hearts out. Follow along and you’ll get a great overview of how to use Flow, with an eye towards getting your animation into a real project.
Let’s start by creating a new project.
This step starts at 0:08
plusIconto the bottom of the layer hierarchy.
The grey heart shape (i.e. the layer named
heartGrey) is supposed to bounce, then fade away. Let’s start with the bounce and go from there.
This step starts at 0:51
Option+Drag the layer to shrink it a little bit.
Shift+Drag the last keyvalue to
0.4s(this scales the animation)
The red heart shape (i.e. the layer named
heartRed) is supposed to fill in from the bottom. The default animation shows that the
redLayer is slightly offset, we’ll have to fix it first using Relative Mode.
This step starts at 3:21
Relative Modeby pressing
x = 17.43)
Ytrack of the layer’s animation
There are two steps in the animation for the
First, let’s animate the bounce effect.
This step starts at 5:05
Shiftwhile dragging one of its handles.
0.32s, which should shift all the keyvalues to the right
Now, we’ll animate the fade in of the
This step starts at 6:08
Command+click the first keyvalue of the
Align Rightbutton at the top of thee properties panel
We want a pause in the opacity animation of the
This step starts at 6:52
redLayer’s opacity track by pressing
Optionwhile dragging it.
When two adjacent keyvalues have the same value, there will be a gap in the timeline.
We’re done our aniamation, but the Timeline is too long.
This step starts at 7:58
The duration of the timeline is now tight to our animation.
In the next screencast we’re going to take this animation and we’re going to export it as iOS code. See ya soon.
result(s) found for “”.