Adobe Animate: Adding and editing nested Symbol instances

Once you have a nested symbol (see Adobe Animate: Walks and blink cycles), you can add several instances of it on the Stage and edit each instance to create an interesting composition.

You can watch the finished example below and download the .fla file here:

Creating a nested symbol

The principles covered in this tutorial can be applied to any nested symbols. Create a nested symbol or download this example fileof a character (saved as a Graphic Symbol) blinking and waving its hand.

Screen Shot 2018-08-01 at 12.15.52 PM
Starting file with a character/nested Symbol

Adding an instance to the Stage

Once a Symbol had been created, it is stored in the Library and can be used to add new instances to the Stage.

But first, we’ll create a new floor layer for the new instance:

  • Make sure you are on the main Timeline
  • Add a new layer and name it (i.e:”floor_2″) and create a new floor line on it

Now, let’s add our second instance:

  • Add a new layer and name it (i.e: square_2). Drag and drop the Symbol called “Square” from the Library to the Stage and position it on the new floor line.
Screen Shot 2018-08-01 at 12.19.32 PM
Square symbol in the Library panel
Screen Shot 2018-08-01 at 12.19.15 PM
New floor and Square Symbol instance

Staggering the loops

If we preview this animation, we’ll notice that both instances are perfectly synchronized. We’ll stagger the loops to add interest:

  • Click once on the instance you just created
  • In the Properties Window, toggle the LoopingWindow. Set the Optionsdropdown to Loopand the First[frame] number to the point of the loop you want this instance to start from (i.e: 13)

Screen Shot 2018-08-01 at 12.23.52 PM

  • Preview your animation.

Editing an instance’s color

We can also differentiate the two instances by changing the new one’s color:

  • Click once on the instance
  • In the properties panel, toggle the Color EffectWindow and select Advancedin the dropdown menu
  • Play with the value of Green, Red and Blue until you are satisfied with the new color
Screen Shot 2018-08-01 at 12.26.42 PM
Color Effect Window
Screen Shot 2018-08-01 at 12.43.57 PM
The instance’s new color

Editing an instance’s size

Another way of differentiating instances is to shift their scale, This can also create a sense of depth:

  • Click once on the instance
  • Select the Free Transform Tool (Q)
  • Hold Shift to preserve the character’s aspect ratio, and click and drag to scale it up or down.
  • Reposition the character on the floor line if necessary
  • Preview your animation
Screen Shot 2018-08-01 at 12.43.46 PM
Instance after using the Free Transform Tool to change its scale

You may repeat this process as many times as you want to create even more instances.