Adobe Edge for Web Developers: Using the Timeline
This is the second article for the Adobe Edge tutorial. In the first article , I discussed how to create objects in Adobe Edge and provided a primer on the Properties box. In this article, I will discuss how to create an animation. This tutorial is based off Adobe Fellow Marks Ander's video. I will pick up from where the first article left off, which is right after we added an object.
First, move the playhead in the timeline to where you want the keyframe to start. The keyframe defines when an animation begins.
This sets how you want your objects to appear at that point in time. Now, drag the playhead back to the start of the timeline. Make sure not to have both objects selected at the same time--you'll need to have just the top box selected. Click the Location diamond again. Then drag the box off the screen. To get the animation to play, you can simply press the space bar, or click Play/Pause from the main menu.
You've just created your first animation using Adobe Edge! The next thing to do is to add some style to your animation, which includes adding keyframes semi-manually.
To have keyframes automatically added to your timeline as you create animations, turn the stopwatch back on. Now, as you make adjustments, the keyframes will automatically appear without you having to click the diamond from the Properties box. To illustrate this, Mark scales the size of the grey box down to 2%. He did this by adjusting the Scale property.
He also changes the opacity of the bottom box to 0% to make it appear that it disappeared.
At this point, I did lose the animation effect. If that happens to you, remember to set how you want the grey box to appear at both the end and the beginning of the animation by using the Location diamond. In this case, you'll want the bottom grey box to start at 2% scale with 0% opacity and to end with 100% and 100% opacity. When you have that figured out, the end result is a black box dropping down on a gray box that slowly scales larger in size and grows darker in color. Basically, you are mimicking a shadow effect. Now it's time to ramp up the effects and add in some easing equations.
The easing equations are found in the Properties box, but you must select the transition to find it. To select the transition, you must click on it from the Timeline.
You'll notice now that the black box is designated as yellow on the timeline and the gray box is designated as green on the timeline (at least for me). If you click on the black box, the yellow timeline appears selected and the green timeline has a different shade of gray. This is a visual clue to let you know which element is selected. After you click on the portion of the timeline that you want to manipulate next, in this case the black box, then new properties appear in the Properties box.
Click the drop down arrow in the Easing box to see a long list of choices. Mark uses easeOutBounce for his effect of choice. If you set this property, and you don't see the bounce, then make sure you are providing enough time for the animation to happen. At first, I set the end keyframe at one of the first hash marks in the timeline, as you can see from the first screenshots. This did not provide enough time for the animation to be displayed. To fix this, I moved my timeline out to appear over the first full second. To move the keyframes (the white diamonds), you can click and drag them across the timeline. You can also select multiple timelines by holding down Shift while you select each element.
At this point, Mark points out that the gray box is no longer in synch with the bouncing black box. He then uses that multi-select technique that I just described to add the easeOutBounce effect to the bottom box.
From here, Mark then discusses a third mode of animation, which I will pick up on in the third article of this series.