Join Joseph Labrecque for an in-depth discussion in this video Using the camera with layer depth, part of Adobe Animate CC New Features.
- [Instructor] Using layer depth along with the virtual camera allows for some really neat effects in your animations that you would have had to create in a much more manual way previous to this release. This allows the creation of depth and parallax effects easily by simply using the camera against layers of varying depth. To use this, we need to use advanced layers and the layer depth panel. So, let's go ahead in the timeline and preview this first of all so we can see that it's simply a ball that kind of rolls down a hill and then comes to a stop.
Let's turn on advanced layers, use advanced layers and from here we're able to open the layer depth panel. Right now everything's at layer zero, so no matter what I click on, it's going to show up right there. Here's our camera which exists as this little dotted black line. Now, what we're going to do is specify how far away some of these things are from the camera. Here is our background and you can see as we move this it contains both the sun and also that nice hill back there and obviously we don't want to move it too far because then we lose our assets.
So, let's shift it something like 60 or 61. Here's our layer that comprises the Earth. We kind of want to leave this about where it is or at least if we move it up, we'll want to have the ball match that since the ball is on the Earth. And then we have the foreground here which right now is appearing in the background. So, let's push that up and we can push it way up here.
So, as you can see, these different layers all have a good amount of distance from one another and that is what you need to create a nice parallax effect. Now, one thing to mention, I changed the ball here. You can see as we go through that the ball is actually going to change each one of these key frames because layer depth is something that is actually tweenable. So, we can take advantage of this by leaving the ball depth at some point at zero and then at other points changing it to negative 41.
And that's probably okay. Alright, to actually see the parallax effects work of course we need to enable the camera. So, I'll choose the camera tool from our Tools panel and obviously there's been something set here already with the camera because we have a zoom of 250% and our position and so forth is different. Let's go ahead and see how this looks right now by hitting play.
Alright, so you could see that nice parallax effect there and if I go back somewhere around here and I actually pan the camera, you can see how all of these different layers react to one another. Now, I don't have any sort of tweening going on in the foreground, the Earth or the back layer, however, because we do have these different layer depths established here, as I move the camera around, we get this neat parallax effect that happens to everything.
This is something we would have totally had to do in a very manual way previous to this release. The layer depth panel at this point can be used with both ActionScript 3 and WebGL document types. Even the simple possibilities you see here with layer depth and the virtual camera are really quite exciting.
- Enhanced animation tooling
- Frame Picker enhancements
- Custom ease presets for shape tweens
- Resetting the camera position
- Interactivity enhancements
Skill Level Intermediate
Q: This course was updated on 10/18/2017. What changed?
A: New videos were added that cover general enhancements to Adobe Animate CC, including changes to the interface, timeline enhancements, the updated Actions Wizard, and using the camera with layer depth.
Q: This course was updated on 10/15/2018. What changed?
A: New videos were added that cover the October 2018 updates to Adobe Animate CC.