EDOBE XDOM EM Bedienungsanleitung PDF herunterladen (Seite 33)

Create animations using the Timeline

Last updated 6/15/2014

Making That Headline Drop In

In most cases, the purpose of text is to communicate a message, so it’s counterproductive to subject your audience to

constantly moving and changing text. That doesn’t mean you can’t have a little bit of fun. For instance, you may want

to have the heading on your web page drop down or bounce into place when the page first loads. In this project, you

create a banner at the top of the stage. When the web page loads, three words—“ON the EDGE”—drop into place. In

this case, you’re animating the phrase “ON the EDGE.” You break the words into three separate text boxes, so that you

can move each word independently. In other cases, you may want to animate all the individual letters in a word or

phrase. The toughest part of the trick is to get the letter or words to line up properly once they’re in place. You want

letter spacing to look natural, and you want the text to sit evenly on a horizontal line. Often, when you’re animating

words or letters like this, it helps to create a positioning template, and that’s exactly what you do in this project. The

positioning template (Figure 8) is visible at design time to help you align those moving words and letters. When you’re

done building the animation, you can remove the template.

Here are the steps to create a drop-in heading:

1 Create and save a new 550 x 400 document with a white background color. As usual, create a new folder to hold the

HTML and JavaScript files for your project.

2 With the Rectangle tool (M), create a rectangle 550px x 100px and place it at X=0, Y=0. Set the background color to

R=200, G=210, B=250 and A=100%. Set border color to none. Give the rectangle the ID BannerBG. The quickest

way to make a rectangle to spec is to drag out a quick box that’s any old shape and then type in the values in

Properties. Make sure you click the link next to the W/HSize properties so you can enter nonproportional values.

3 In the Elements panel, click the Lock Element button next to BannerBG. A padlock appears next to BannerBG. Now,

you can’t accidentally select or move the blue box on the stage.

4 Select the text tool and drag out a text box. Then type ON the EDGE. Set the font to Arial Black; the size to 72 px;

and the alignment to Centered. This text will serve as a positioning template for the animated text.

5 In Properties, give the text box the name OnEdgeTemplate. As with your graphics, you want to be able to identify

different blocks of text in the timeline and the Elements panel. At this point, the properties for the text look like

Figure 9.

1 2 ... 28 29 30 31 32 33 34 35 36 37 38 ... 137 138

Keine Kommentare

EDOBE XDOM EM Bedienungsanleitung Seite 33