- Creating an Animation
- Controlling Layer Properties with Timelines
- Placing a Behavior in the Behaviors Channel
- Using Multiple Timelines in a Web Page
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Controlling Layer Properties with Timelines
So far this hour you have manipulated the positioning of layers with a timeline. You can manipulate other layer attributes, too. What if you wanted a number of layers to appear over a period of time? You create a timeline, add keyframes, and change the visibility attribute when a keyframe is selected. To create a timeline that changes layer visibility over time
Create four layers and line them up on the page. Name them sequentially, something like L1, L2, L3, and L4. All of the layers' visibility should be set to visible (or default).
-
Drag each layer into its own channel in the Timelines panel, as shown in Figure 18.15.
-
Drag the end keyframes so the animation bar in a channel is five frames longer than the animation bar in the channel above it. The Timeline panel should look like Figure 18.16.
Position the playback head on the first frame. Open the Layer panel and hide all the layers (click in the eye column until there is a closed eye).
Make sure you select Autoplay and then preview the timeline in the browser.
){kind=link}
Figure 18.15 All four layers reside in their own channels in the Timeline panel.
){kind=link}
Figure 18.16 Each animation bar is five frames longer than the animation bar in the previous channel.
You have created a timeline where all the layers begin as hidden and end, at varying times, as visible. You could create a similar timeline changing the z-index instead. Or you could create a complex combination changing positioning, visibility, and the z-index all at the same time.