by Elaine Chao
The last tutorial I posted had a code solution for the automatic colorization of one of our flowers in the Floral Match Maker sample. For this tutorial, I wanted to focus more on the power of timeline animation. If you view the live example, you’ll notice that the initial animation has seven ornaments that drop from the top of the composition. Afterward, they start a slow, subtle independent wave back and forth to look like a wind chime. I took about a half an hour to get this animation working and just right, whereas coding it by hand would probably have taken me easily four or five times the time to get the animation looking the way I wanted it to.
With a little timeline magic and very little code, I was able to create an animation that looks sophisticated and draws the eye.
This article is intended for novice users of Animate who do not have a deep coding background.
Topics covered in this article:
- simple timeline animation and easing
- reuse of symbols
- simple triggers
The screen shots and project files from this post are based on Edge Animate CC, which is available for a free 30 day trial via the Adobe Creative Cloud and is included in a paid subscription to the Creative Cloud.
Creating the Wave
Originally, I created the simpleFlower symbol to group together the string (which is a 3px wide div) and the colorized simpleFlower element. In retrospect, I could have also used a group (right click > Group Elements in DIV) to create the same effect, as I only used this symbol once. Either way will function in this part of the tutorial.
Open the swingingFlower symbol by double clicking on the icon next to its name in the Library Panel. This symbol handles only the right-and-left swaying motion. In the symbol substage, you can see the flower element placed in the center of the symbol substage by default and the autoplay is off, because I don’t want the animation to start until the bounce has completed. “Autoplay” is more or less what it sounds like: the setting determines whether or not the timeline begins playing when the symbol instance is loaded. If it is unchecked, the symbol will be frozen at time 0.
From a high level perspective, the motion is a simple rotation. However, by default, the rotation point is in the center of the object, which would have the object moving like a pinwheel instead of a hanging object. The first thing to do, then, is to set the transform origin:
- select the element
- in the Properties panel, go to the Transform section
- set the Y value to 0.00%
Note that the transform origin property only affects the reference point for the properties within the transform section of the properties panel.
Then, set the motion from -3 degrees to 3 degrees over a 1 second period. In order to do this, you can use the auto keyframe setting to animate.
- First, place a keyframe at 0 seconds so that the default is always 0 when the symbol initializes. Move the playhead to 0 seconds and click on the diamond next to the rotate value.
- Then, move the playhead just to the left of 1 second and place a second keyframe so that the value is maintained. The second keyframe should be hollow, which means that the value has not changed from the previous keyframe.
- Turn off auto-transition mode by pressing the button on the timeline panel or pressing X
- Move the playhead to 1 second and set the value to 3 degrees rotation in the properties panel. A new keyframe should be placed automatically, because the auto-keyframe setting is on by default.
- Turn on auto-transition mode again
- Move the playhead to 1.5 seconds and set the value to 0 degrees rotation in the properties panel. A new keyframe and a new transition should be created so that there’s now a transition between 3 and 0.
- Move the playhead to 2 seconds and set the value to -3 degrees rotation in the properties panel.
Keyframing should be familiar to those who use AfterEffects. Remember that we also have the Pin, which is extremely powerful for creating transitions quickly.
However, at this point in time, the motion isn’t really very natural – the flower just swings across the stage woodenly. The culprit is the linear easing, so the best thing to do is to play with the easing in order to make it faster at the bottom and slower at each side:
- select the left transition and select the easing button in the Timeline panel
- select Ease In and Quad. This will mean that the animation gets faster close to the end of the animation
- select the right transition and select the easing button in the Timeline panel
- select Ease Out and Quad. This means that the animation gets slower as it progresses
Now the swing is more natural as it progresses across the stage. The final thing for us to do here is to make the animation swing from side to side repeatedly. The way to do this is to use timeline triggers.
- Move the playhead to 1 second and press Ctrl/Cmd-T (or go to Timeline > Insert Trigger)
- In the actions pop-up that appears, click on the Play button in the snippets on the right side of the window
- Move the playhead to 2 seconds and insert another trigger
- In the actions pop-up, click on the Play Reverse button in the snippets
Note that these two snippets allow for you to insert canned code that will help you in your animation. sym.play() plays from the timeline location forward in time, and sym.playReverse() plays from the timeline location backward in time.
If you’re following along in the finished file, you’ve probably noticed that the triggers aren’t actually exactly on 1 second and 2 seconds – in fact, they’re pulled slightly to the outside of the transitions. I fiddled with this for a little while before getting it where it felt right. Leaving the triggers at the end of the transitions made it feel as if the flowers just hit a wall and bounced right back. By giving it just a moment of no movement at the peak, I made the objects react the way that they would if they were actually affected by gravity: each flower naturally comes to a stop for a brief moment before swinging back. In order to do this:
- click and drag the trigger on 1s to the left a little
- click and drag the trigger on 2s to the right a little
The last thing in this symbol is the creation of a label. I can use either time codes or a label to refer to a specific location on the timeline, so I’ve placed a label at the point where we hit 0 in rotation to begin our animation. (Press Ctrl/Cmd-L or Timeline > Insert Label) Name this label “center”.
Creating the Bounce
The way I handled the animation of the bounce was first laying out the final location of the flowers and then doing the animate in. This is easiest with the Pin, which is described in videos and in our own in-app lessons (Animate II: The Pin, which can be found in both the Lessons Panel and linked off of the Welcome page).
- Drag seven copies of swingingFlower onto the Stage
- Highlight them all and create a symbol called “cascadingFlowers”
- Double click on the new symbol on the Stage or click on the icon next to “cascadingFlowers” in the Library Panel
- Adjust the symbols into their final positions and adjust the symbol stage if desired
- Rename the elements if desired (e.g. “falling0”, “falling1”, etc.)
- Move the playhead to 3/4 of a second, or 0.750 seconds
- Press “P” to toggle the pin, or click on the pin button in the Timeline Panel
- Drag the playhead to the left to 0 on the Timeline
If you’ve dragged the playhead to the left, the bar between the playhead and Pin should be blue; if you’ve accidentally dragged the Pin to the left, the bar between the playhead and Pin will be yellow. If you need to switch the location, press Shift-P to swap the Pin and the playhead.
The Pin marks the value that you don’t want to change, and the playhead marks the value that will change.
- Shift-drag the first object straight up so that it’s off the symbol stage.
- Drag the pin region (the blue bar between the Pin and the playhead) to the right so that the playhead sits at 1/2 of a second, or 0.500 seconds
- Repeat the shift-drag with another flower
- Repeat the previous two steps until the flowers cascade
- Highlight all of the transitions created in this symbol and change the easing to Ease Out > Bounce
Starting the Playback
Now that we have the bounce in, we can start each flower playing the slow wave back and forth. In order to get the vague sense of unpredictability, I set each flower to play once the bounce-in animation completes. Because I set up the flower’s animation to go from left to right over time, I need to start from the middle of the timeline.
Notice that we have a label at the center of the movement called “center.” We’re going to play from this label so that we don’t get any awkward jumps.
In the cascadingFlowers symbol:
- At the end of the falling0 transition, press Ctrl/Cmd-T to create a trigger
- Add the following code to start the animation from the label “center”:
- At the end of the falling1 transition, press Ctrl/Cmd-T to create a trigger
- Add the following code to start the animation from the label “center”:
Repeat for each one of the falling flowers, and enjoy your wind chime effect!
Simple timeline transitions can be very powerful, and with just a little bit of code, you can make animations that will ping-pong back and forth along the timeline perpetually. Have questions on this technique? Edge Animate engineering staff and great community members answer questions in the Animate user forum.