Graphics Reference
In-Depth Information
Now that you know the most important features and techniques of creation,
this chapter will teach you how to create animations with the Timeline, the Pin
and keyframes.
4.1 The Timeline
While Edge Animate's Stage displays the spatial layout of the individual graphic
elements, the Timeline shows you the change of the different properties over a
defined period of time. To do this, you play what Adobe calls the Timeline.
4.1.1 Keyframes
On the Timeline, keyframes are used to link different states of elements to certain
points in time. If not explicitly deactivated, the transitions of individual imag-
es between the keyframes are automatically interpolated in a process known
as tweening. For example, if you animate an element on the x-axis with two
keyframes from 100 px to 200 px, the intermediate steps are automatically gen-
erated. Basically, you can animate almost all properties with keyframes in Edge
Animate except for font weight, text alignment, and how the mouse cursor is
displayed. Keyframes can be added to the Timeline through a number of differ-
ent methods:
Setting keyframes in the Property panel •
To set the value of a property such
as a coordinate, the font size, or the fill color for a specific point in time, drag the
playhead to where you want the property to take effect. Click the small diamond
icon (see image) next to the property. Now you have set a keyframe, which ap-
pears as a white diamond on the Timeline. If the property does not yet have
a keyframe, a new lane for the property is added. However, if the lane already
exists, the keyframe is added to the lane.
