Animation Techniques with Adobe Edge Animate CC

Excerpted from Adobe Edge Animate (Rocky Nook).

By Simon Widjaja

What follows will provide three small projects to teach you how to use and combine different animation techniques with Adobe Edge Animate CC. The sample projects cover:

  • Banner animation: In this example, we create a simple banner for the header of any page.
  • Asynchronous animation with playback actions: In this example, we use the playback actions for controlling different Timelines.
  • Car animation with script-driven Timeline: In this example, we will create a simple car animation that we will temporarily stop, using script, and then play again after a short pause.

The files for this example can be downloaded here. Project Name: Animation_Simple Animation

Banner Animation

The first sample project is a simple banner that you can embed in any web page. The specific example comes from the website edgedocks.com. Three text elements will appear in succession. At the end, the logo will drop in from above.

  1. First, create a new composition that fits the required dimensions of the website page. In this example, the Stage is 870 x 320 px.
  2. As background, simple artwork from Photoshop will suffice, saved as an image file and then dragged and dropped onto the Stage with the mouse.
  3. For the animated elements, start backwards. First, position all three text elements as they should appear at the end of the animation. Since there is only one Timeline in this example, you do not need any symbols; you can create all the elements directly on the Stage. Depending on design preferences, you can use a white font with a simple drop shadow to make the text appear slightly lighter and stand out from the background.
  4. Position the animate logo in its end position.
  5. Use the Pin to create your animation going backwards. To do this, fix the three text elements with the Pin at a half-second (0:005), and then move the yellow playhead to the beginning of the Timeline (0:00). To work accurately, activate the grid with a resolution of 0.25 seconds. Move all three text elements to the right so that an animation sequence is created in which the elements remain in the correct position. In addition, we will fade-in the text elements. This should not happen during the entire motion sequence, but only after the first half. To do this, leave the Pin activated but move the blue pin control to a quarter of a second so that our Pin sequence from 0:00 to 0:0025 is sufficient. If you set the opacity in the Property panel to 0%, the text elements will appear as they move to the left.
  6. Since not all text elements should appear simultaneously, let the finished text animations play one by one by delaying them each by a quarter of a second.
  7. Apply similar steps to the logo. Position the playhead at 0:02 seconds, and the Pin behind the playhead at 0:04 seconds. Push the logo up and outside the composition so that it falls into the image from above during the animation. Make sure that the overflow of the composition is set to hidden so that the logo is not visible outside of the composition. The animation is now finished, and you can view it in the browser by pressing Ctrl+Enter or Cmd+Enter.

Asynchronous Animation and Playback Actions

For a better understanding of how to work with playback actions, we will create four different animations with animation elements in our second sample project. As the screenshot shows, the end result is a dashboard with four elements. First off, a simple progress bar at the bottom of the composition will be animated. The bar will grow steadily over the total duration of the four-second animation. In the upper area, a number symbol will appear on the left once the composition is started. In the middle, an animated stopwatch will make two complete rotations during the animation. On the right, a vertical bar will fill in as the animation plays out. However, this time the animation will start after one second.

The files for this example can be downloaded here. Project Name: Animation_Async_Animation

Sample project for Asynchronous animations
  1. This time, the background is a simple rectangle with rounded corners and an inner shadow to create a slightly more three-dimensional effect.
  2. Since the horizontal progress bar at the bottom starts to grow immediately and is active during the entire duration, we can animate it directly in the main Timeline. To do this, simply use the Pin to create an animation over the entire four seconds of the composition.
  3. For the rectangle with the number, first create a rectangle on the Stage and use the Text tool to create any arbitrary number. Select both of these elements and convert them into a symbol. Double-click the newly created symbol to animate the opacity of both elements from 0% to 100%. Return to the Stage to see a band of gray arrows pointing to the right; this indicates that hidden animations are stored here in a symbol, which means you cannot directly change individual keyframes from the outside. This makes it possible to create complex animations and depict them in hierarchies.

  4. The third element represents a simplified stopwatch that can easily be created with Edge Animate’s native tools. To do this, first combine two circles with two different shadows, and then create the dial hand with a number of small rectangles through rotation. The circular dial hand is built with a rectangle and a circle grouped together, and then moved around the face of the bigger circle by moving its origin of transformation. The last step is important so the circle will rotate around this center and not around the center of the group. Now create a symbol from all four levels. Inside the symbol, animate the hand, which should perform a full rotation from 0:00 to 0:02.

  5. The last element, the vertical bar, is built with two rectangles—one for the background and one for the colored bar. Convert both to a symbol and animate the bar accordingly. The Stage Timeline now looks like this:

  6. As you can see from the band of gray arrows, all symbol animations start at the beginning of the composition and stop well before the end. Now modify the playback behavior of the circular dial hand and the bar animation. For the latter, move the playhead on the Stage Timeline to 0:00 and set the Stop playback action to prevent a direct playback. A stop icon appears on the Timeline, represented by a square within a rectangle. If you move the playhead to the right to 0:01, the symbol will start, delayed via the Play playback action. Wherever an internal animation is stopped, the band of gray arrows disappears from the Timeline.
  7. Unlike the other elements, the round dial hand should start immediately and rotate twice around its axis. To do this, move the playhead to the end of the first rotation, or to 0:02 seconds. To achieve a new playback, assign Play From from the playback actions. Unlike the simple Play command, this function gives you the ability to specify an absolute position from which the playback should occur. We use 0:00 so that the playhead of the internal Timeline within the symbol moves at the beginning, and is then played back. You can use this technique to easily play back repetitive animation sequences as often as needed without having to create them multiple times. The final Timeline looks as follows:

    Symbols and Control Through Script

    The third sample project uses triggers to control nested symbols. This example illustrates the operation of script-based control through a simple traffic scene in which a car drives into the scene from the left and drives out the right side of the image. A traffic light symbol in the background shows two red lights where the car will stop for one second. The lights turn green, and the car moves again. Up to this point, the main Timeline was sufficient for all the animations, without any additional procedures. Now, even the wheels of the car are supposed to turn in a continuous loop and stop temporarily when the car stops. This is done through the use of nested symbols, which we control from the outside by means of scripts.

    The files for this example can be downloaded here. Project Name: Animation_Car

    Sample project for controlling symbols with script
    1. First, create a new composition and draw the road and sky with simple rectangles. Simple forms are all that are needed to create the traffic light. Initially, the lights have a red background color. We will use keyframes to switch this to green at about 0:03 seconds.
    2. The car is also composed of simple shapes. To make the rotation of the wheels more visible, create them in Photoshop. Designing more complex rims with primitive shapes is too tedious in Edge Animate.
    3. Take all parts of the car, including the wheels, and convert them into a symbol by choosing the Convert to Symbol function in the right-click context menu. Name the symbol “car” so that we can modify it later via script. The Autoplay Timeline checkbox is checked. Now we go into the symbol with a double-click and convert the two wheels to a symbol named “tires.” Again, double-click the symbol to work within it and create the rotation animation of both wheels on two separate animation lanes.

      The individual elements of the car symbol
    4. When the partial composition is played in the browser, the wheels rotate only once on their axis. To achieve a looping animation of the wheels, go back into the “tires” symbol and move the playhead to the end of the rotation sequence. Place a trigger with the following script to replay the sequence.

      Trigger and action to replay the symbol Timeline
    5. If the animation sequence (in this case, an exactly 360° rotation sequence) starts and stops with the same image, you can use this technique to create animation loops without any optical jumping or stuttering of the images during the transition. View the composition in the browser again, and you’ll see that the wheels rotate in a continuous loop.
    6. Now we have to stop the rotation sequence when the car stops at the traffic light, and restart them as soon as the light turns green and the car moves again. For this task, return to the Stage Timeline. Here, set the triggers at the right locations, and go into the “car” and “tire” symbols so you can control the Timeline with the stop() or play() functions. To do this, place a trigger at 0:02 and navigate through the function getSymbol() to the correct child symbol.

      Action for stopping the “tire” animation of the child symbol
    7. A second later, at 0:03, the car starts driving again and we restart the rotation sequence with a trigger. This time we swap out stop() for play() so that the sequence continues at the point where it was last stopped.

      The final Timeline should now look like this: (1) The movement of the car is momentarily stopped, (2) the color of the traffic light glow is shown using a keyframe that changes at (3), and (4) shows the rotation sequence of the tires stop and start, respectively.

      The final Timeline showing the animation sequence and the trigger points
      Excerpted from Adobe Edge Animate by Simon Widjaja (Rocky Nook). Copyright © 2013 Rocky Nook. All rights reserved. Used with permission.