Graphics Reference
In-Depth Information
4.5.1 Banner Animation
The first sample project is a simple banner that you can embed in any web page.
The specific example comes from the website edgedocks.com. Three text ele-
ments will appear in succession. At the end, the logo will drop in from above.
Figure 4.18
Sample project: animation sequence for
a banner
1.
First, create a new composition that fits the required dimensions of the
website page. In this example, the Stage is 870 x 320 px.
2.
As background, simple artwork from Photoshop will suffice, saved as an
image file and then dragged and dropped onto the Stage with the mouse.
3.
For the animated elements, start backwards. First, position all three text
elements as they should appear at the end of the animation. Since there is
only one Timeline in this example, you do not need any symbols; you can
create all the elements directly on the Stage. Depending on design prefer-
ences, you can use a white font with a simple drop shadow to make the text
appear slightly lighter and stand out from the background.
4.
Position the animate logo in its end position.
5.
Use the Pin to create your animation going backwards. To do this, fix the
three text elements with the Pin at a half-second (0:005), and then move the
yellow playhead to the beginning of the Timeline (0:00). To work accurately,
activate the grid with a resolution of 0.25 seconds. Move all three text ele-
ments to the right so that an animation sequence is created in which the
elements remain in the correct position. In addition, we will fade-in the text
elements. This should not happen during the entire motion sequence, but
only after the first half. To do this, leave the Pin activated but move the blue
pin control to a quarter of a second so that our Pin sequence from 0:00 to
0:0025 is sufficient. If you set the opacity in the Property panel to 0%, the
text elements will appear as they move to the left.
4
Project
The files for this example can be
downloaded from http://edgebuch.
simonwidjaja.com
Project Name:
Animation_Simple Animation
6.
Since not all text elements should appear simultaneously, let the finished
text animations play one by one by delaying them each by a quarter of a
second.
