Tag Archives: replicator

Replicator: Drawing Dot Lines

A common task in motion graphics is drawing an animated line. In this tutorial, you’ll see how you can use the replicator to easily animate a line on a map image, as seen above.

What is the replicator?

For those of you who aren’t familiar with the replicator, here’s the one-line description: it allows you to create and animate a pattern of objects. Similar to particles, the replicator consists of a parent replicator object and one or more replicator cells.

In this case, we’re going to build our replicator from a little rectangle shape object. But first, we need to draw the path that we want our line to follow.

Draw the line path

  1. Select the bezier (or b-spline, if you are so inclined) drawing tool from the toolbar (or press the ‘B’ key).
  2. Draw a line that will be the path that the replicator will follow in the Canvas.
  3. Double-click on the last point (not the first, because we want an open shape) to finish drawing.
  4. In the Layers list, name this shape something meaningful, like ‘Line Path’.

Now we’re ready to build our replicator. We need the seed from which all will grow, so let’s draw a little box.

Draw the replicator source shape

  1. Select the rectangle shape tool from the toolbar (or press the ‘R’ key).
  2. Draw a small rectangle in the Canvas.
  3. Press the Tab key to exit the shape drawing mode.
  4. In the Layers list, name the shape something meaningful, like ‘Line Box’.

Replicate!

  1. Select the box shape and click on the Replicate button on the toolbar (or press ‘L’).
  2. Rename the newly-created replicator to ‘My Line’.

As you can see, the default build pattern of the replicator is a box, making a nice grid. While there are a number of different (and fun) patterns to choose from, we want to build our replicator along the path that we already drew (Line Path), so we need to change the replicator build type and make our line path the source for the pattern.

Change the replicator build type

  1. Select the replicator and go to the Replicator tab in the Inspector.
  2. Set the Shape to ‘Geometry’.
  3. From the Layers list, drag the Line Path shape into the geometry source image well in the Inspector.
  4. In the Layers list, disable the Line Path shape so that it is no longer visible.

Now we have our path-based replicator, with a few little blocks on it. To make it look like a proper line, we’ll need to increase the number of points in the replicator. We could increase them to where they touch and form a smooth line, but in this case we’re after a dashed-line effect. We also want to enable the Align Angle parameter so that the blocks auto-align their rotation to the path.

Adding points and changing alignment

  1. Select the My Line replicator and go to the Replicator tab in the Inspector.
  2. Increase the Points parameter value until you get a nice, dashed look (20, in my case).
  3. In the Cell Controls section, enable the Align Angle checkbox.

And there you have the basic line. Since the replicator is using the path you drew as its build path, you can easily change the line by adjusting the original Line Path shape. And you’re not limited to little blocks: you could make a line out of other shapes, particles, or even video clips. Let’s go ahead and make this line a little purtier. Since we’re going for a map-effect, let’s drop a map into the background.

Now for some color. There are a couple of different ways to colorize our line: we could set the color for the original box shape (Line Box), or we could tell the replicator to colorize the shapes over the build. While the replicator method allows for some wild stuff, like this…

…we want to use the shape controls to add an outline to each line segment, which means we’ll do the color in the source shape.

Stylizing the line

  1. In the Layers list, select the Line Box shape and go to the Shape tab in the Inspector.
  2. Change the fill color to your heart’s desire (I chose red).
  3. Enable the Outline parameter for the shape, and set the width to 3 and the color to black (or whatever you like).

Now that we have our fully drawn-on line, we need to give it some animation. On to page 2…

To have the line progressively draw itself on, we’ll use the Sequence Replicator behavior. The Sequence Replicator behavior is similar to the Sequence Text behavior — it allows you to build the replicator pattern (our line) over time, as well as affecting other properties like color and position.

Add the replicator behavior

  1. Select the My Line replicator and then add the Sequence Replicator behavior from the toolbar menu or the Library.

In this case, we want to have our line draw itself on, segment by segment, so we’re going to use the behavior to animate the opacity of the replicator.

Adding a parameter to the behavior

  1. With the replicator or the Sequence Replicator behavior selected, go to the Behaviors tab.
  2. Go to the Parameter ‘Add’ popup menu and choose ‘Opacity’ to add it to the behavior.
  3. Change the opacity value to 0%.

If you hit Play now, you’ll see the line segments fading out over time. Since we want the opposite to happen, we’ll change the Sequencing parameter from ‘To’ to ‘From’. Also, we might not want the animation to happen so slowly, so we’re going to trim the behavior, speeding up the sequence.

Adjusting the sequence behavior

  1. In the Behaviors tab, change the Sequencing parameter popup to ‘From’.
  2. In the Timeline, trim the Sequence Replicator behavior so that it is 30 frames long.

If you play back your project, you should see your line drawing on. You might notice, however, that each segment fades in, instead of popping in. This is because the Spread parameter of the behavior is set to 1, which means that there is a transition between the current replicator point and the next. Try changing the Spread to 6, and you’ll see that the fading-up caused by going from 0% opacity to 100% opacity is spread out over 6 segments. In this particular case, though, we want the segments to pop on, one at a time, with no fading.

Adjusting the spread

  1. In the Behaviors tab, set the Spread parameter to 0.

Setting the Spread to 0 means that the changes made by the behavior happen instantaneously, one segment at a time. If you play back your project, you should see something like this:

And there you have an animated treasure map line. Remember, one of the upsides of this method is that it allows for flexibility: if we want to change the length or path of the line, we just edit the original path shape we created (Line Path) and the replicator updates. We can also play with the Sequence Replicator behavior. Thus, with a just a couple of quick changes, we can end up with a variety of animated line treatments, all with little effort:

With the replicator, the possibilities are endless. Have fun out there!

UPDATE: You can download a project of the last line example here.