The Goal

Let's add trees to the Weather Snow Scene component. We'll use a clipping mask to reveal them - the same technique from earlier in the course, but now applied to our snowy landscape.

Here's the final result for reference:

Step 1 - Import the Trees

1. Grab the tree illustrations from the attached lesson file

2. Position them on the left side, above the snow

3. Use the video above as a reference for placement - or feel free to position them wherever works for your scene

4. Select the tree group and rename it to Trees

5. Put the Trees group inside the Scene-M at the bottom

Step 2 - Set Up the Mask

We need a way to hide and reveal the trees. Here's how:

1. Create a rectangle on top of the trees, matching their size

2. Select the rectangle and group it (Cmd/Ctrl+G). Rename the group to Trees-Mask

3. Set it to 50% opacity so you can see the trees underneath while you work

4. Set Trees-Mask as the Clipping Mask for Trees

5. Group the Trees and the Trees-Mask into a new group and rename it Trees-M

6. Place Trees-M inside the snowman

Step 3 - Test the Mask

Before we animate, let's make sure the mask works:

1. Move the mask below the trees

2. The trees disappear - the mask no longer covers them

3. This is exactly what we'll use to animate the reveal

Step 4 - Animate the Reveal

Switch to Animate Mode and go to the existing Show timeline.

We want the trees to appear after the snowman finishes entering:

1. Go to the last frame and add a keyframe on the mask's Position Y - with the mask covering the trees (visible)

2. Move 20 frames backward and add another keyframe where the mask moves down to hide the trees

3. Add Ease In to the motion

4. Set the mask shape visibility to 0% so it's invisible

Since this is on the existing Show timeline, the reversed Hide animation already takes care of hiding the trees. Nothing else to set up.

Step 5 - Set the Start State

In the Start state, make sure the mask is positioned below the trees so they're hidden by default. This way the trees won't be visible when the snowy weather isn't active.

Step 6 - Test It

Go to the main screen and switch to snowy weather. You should see the snowman assemble, then the trees reveal at the end.

Step 7 - Hide the Scene in Design Mode

Now that we're done setting up the scene, make sure the snowman and the trees are hidden in Design Mode.

1. Go back to the Snow-Scene component

2. Select the Scene-M group and set its opacity to 0

3. In the Show state, set the Scene-M opacity back to 100% to restore its visibility

Summary

This wraps up the exercise and gives you an opportunity to test your skills with less guidance.
If you ever get stuck, there's a final file attached to each lesson.

See you in the next lesson.