How to Animate Text adobe after Effects

how to animate text in adobe after effects cs6 and how to animate text in adobe flash adobe premiere elements 10 text animation adobe after effects tutorial
Dr.NaveenBansal Profile Pic
Published Date:25-10-2017
Your Website URL(Optional)
c HAPTEr 3 Adding and Formatting Text n spite of the old saw about a picture being worth a thousand words, often words are the right tool for the job. When you want to label a button, build a menu-based Inavigation system, or provide how-to instructions for a particular task—it’s time for text. Animate is rooted in HTML5, so it gives you the same properties and text-handling features that you’d find in other web-building tools like Adobe Dreamweaver. That means you won’t have all the typographic features that you’d find in a page layout program or a more complex graphics program like Flash. As you’ll learn in this chap- ter, you do get your choice of fonts, and you can set the size, color, and alignment. If Animate doesn’t have the special font that you need, you can use web fonts. For example, this chapter shows how to link to Google’s web fonts. In addition, you’ll learn how to apply transforms and effects just like those used with graphics and photos. Along the way, you’ll learn how to animate your text, giving it a little bounce. Links are important to any web page. This chapter explains how to import and manage HTML text that includes links on specific words. HTML has a number of tags that are used to identify the content of text, such as block quotes from other sources and computer code used for examples. You’ll learn which tags Animate uses and how to apply those tags to text. 55Addin G Tex T To y o Ur Adding Text to Your Project Proje CT There are three ways to add text to your Animate project: • Use the text tool. In the Tools palette, click the big T (or use the shortcut key T), and then in your document, click and drag to create a text box. Initially, you don’t have to worry too much about positioning or sizing the text box. You can manage those details later. Just go ahead and start typing. Try the phrase “ON the EDGE.” The text you enter appears on the stage, as shown in Figure 3-1. If you want to create multiple paragraphs, just press Enter (Return) as you would in your word processor. When you’re done, you can close the text window by pressing Esc or clicking the x button in the upper-right corner. • Copy and paste. If you’re working with large blocks of text, you may have al- ready worked up a draft in a word processor or some other source. In that case, you can copy the text in your word processor, and then in Animate create a text box and press Ctrl+V (c-V) to paste it into your project. It won’t be formatted exactly as it was originally, but the text will be there. This process maintains some of the major formatting, such as paragraph breaks. • o pen HTML with text. Perhaps you have a web page already created in an HTML editor or some other web-building tool. You’d like to add some anima- tion excitement to the static page. You can open that page in Animate using File➝Open and then use Animate to make the elements move. You’re limited in what you can do with text imported in this way. You can’t edit it or change its formatting. In essence, it’s just another graphic element you can use in an animation. One significant advantage to this method is that links within the text are maintained. Figur E 3-1 As you enter text in the lower box, it’s displayed on the stage in the upper box. The box with the blue border is the text box, which remains on stage when you’re done typing. The lower box is sometimes called an IME for “input method editor.” When you’re through entering text, click the X in the upper-right corner to close the IME. About Text Containers Once you’ve added text to your project, its location and size are managed by a text container called a text box. You can reposition your text by dragging it or by changing the Position properties. To move text manually, click the Selection tool (it looks like an arrow) or press the shortcut key V. As with other elements, the x and Y properties position the upper-left corner of the text box, so you can position text ADOBe eDGe Anim Ate Preview 7: t he m issin G mA nu Al 56Ch An Gin G Tex T-sP eCifi C with precision by typing x and Y values in Properties. To reshape the text box, drag Pro Per Ties one of the handles or change the W or H properties. Keep in mind you need to delink the size properties to change W and H independently. Initially, Animate displays all your text whether it fits in the box or not, so if your text doesn’t fit within the height of the box, it extends out the bottom. If that’s not the behavior you want, you can use the clipping tools (page 66) to trim the bottom of the text box. For that matter, you can trim the top or sides, too. Changing Text-Specific Properties Once you have text in your Animate project, there are several text-specific properties that you can use to change its appearance, as shown in Figure 3-2. These properties appear in the Text subpanel. Initially, some of the less-used options may be hidden. Click the button in the lower-left corner of the subpanel to show and hide additional properties. The names for each of these tools follow CSS (cascading style sheet) naming conventions, so they are lowercase with hyphens between words. There are more details about CSS on page 168. • font-family. You can choose from several different typefaces. You might not find all the same fonts that you have on your computer. In web design, you’re limited to fonts that are available to your audience unless you have a way of providing the font with your project. For more details on fonts and typefaces, see the next section. For a way to find and use additional fonts, see page 61. • color. Click the swatch, and the standard color picker appears where you can set the color for your text. • font-size. Dial in font size by number. • font-unit. Animate uses three different units for specifying font size: pixels (px) ems (em) and percentage (%). Pixels are equivalent to a single dot on a moni- tor. An em is roughly the size of the letter M. Most web browsers give users the ability to adjust the size of text, so an em is a unit that changes according to the browser setting. Percentage is a useful option when designing web content that may be viewed on mobile devices as well as desktop computers. • font-style. Slants the text so it looks like italics. • font-weight. Gives you several options such as Thin, Extra Light, Normal, and Extra Bold. The order of options and their accompanying numbers give you hints for comparing the different weights. • font-decoration. Use this button to underline text. • text-align. Just like your word processor, Animate lets you align text right, center, or left. Alignment affects all the text in the text box. So if you want to create one paragraph aligned right and one paragraph centered, they must be in separate text boxes. Ch APter 3: Addin G And f orm ATTin G Tex T 57Ch An Gin G Tex T-sP eCifi C • text-indent. Indents the first line within a text box. It’s likely that later versions Pro Per Ties of Edge Animate will make this option a little more useful. • line-height. Use to set the space between lines of text. • letter-spacing. As the name implies, you can adjust the space between letters. Often used to create distinctive headlines or company logos, this effect should be used sparingly for normal body text. • word-spacing. Varies the distance between words. Use carefully or you may end up with awkward, hard-to-read text. Font-size Figur E 3-2 Font-family Font-size-units Animate provides the standard text formatting options, including choice of font, style, size, color, and align- ment. In addition to these properties, you have access Font-size Color to the same properties available to graphics, such as Font-decoration Font-weight size, location, rotate, and skew. If you’re not sure what Font-style one of these widgets does, hold the cursor over it. A Letter-spacing tooltip appears with the tool name. Line-spacing Word-spacing Text-indent About Typefaces and Fonts Choosing a typeface for your project should be fun—just not too much fun. Make your typeface decisions based on the job at hand, and you can’t go wrong. Think about what you expect your type to do, and then help it do that job by choosing the right typeface, style, size, color, and alignment. Beginning designers often treat text as yet another design element and let the desire for a cool look override more practical concerns. Designers sometimes talk about a text block as if it’s just another shape on the page. But cool type effects can torture your readers’ eyes with hard-to-read backgrounds, weird letter spacing, or hopelessly small font sizes. (For more advice on readability, see the box on page 61.) When you specify type for a web page, you have to take into consideration which fonts are available to your audience. If you specify a font that your audience doesn’t have, the web browser will supply a substitute. Sometimes that substitute is close to your spec, and other times not so much. This has always been a challenge for web designers. In the past, designers could expect different fonts on Mac, Windows, and Linux computers. That situation has improved over the years, but most web design- ers always specify a list of two or three fonts, such as Arial, Helvetica, sans-serif. When a web browser sees the list, it uses Arial (originally a Windows font), if that’s available. Next, it tries Helvetica—a font that was most common on Macs. If neither is available, the browser looks for some other sans-serif font. All of Animate’s font specs use this multiple-choice method. In addition, the fonts listed are very likely to be available to your audience. Your choices are: ADOBe eDGe Anim Ate Preview 7: t he m issin G mA nu Al 58Ch An Gin G Tex T-sP eCifi C • Verdana, Geneva, sans-serif. Verdana (see Figure 3-3) was developed for Pro Per Ties Microsoft and is widely available on both Windows and Macs. The goal was to create a typeface that’s readable on a computer screen in small sizes. Geneva was designed for the Apple with the same goal and was available on the original Mac. Both of these typefaces are good for long paragraphs of text. The term sans-serif is borrowed from the French and means without serifs. Serifs in ty- pography are the extra bars and strokes at the ends of letters that you see in some typefaces. In print, experts feel that serifs help make type more readable and lead the reader’s eye along a horizontal line. Type isn’t quite as sharp on computer screens, so the serifs’ helpfulness isn’t quite as obvious. (The text in this book is a sans-serif font.) • Georgia, Times New Roman, Times, serif. Times was a typeface developed for the New York Times newspaper way back when. It’s a very readable typeface and works well for long paragraphs of text. Times New Roman and Georgia are similar to this much-imitated font. • Courier, Courier New, monospace. Back in the old days, when office workers used typewriters, everything looked like Courier. The term monospace means that every character is provided the same space horizontally. This creates notice- able gaps to accommodate narrow characters like “i,” which get just as much space as “M”. Monospace fonts are a little harder to read compared to a typeface like Times, but they do make a primitive kind of statement. Monospaced fonts are often used to display computer code. • Arial, Helvetica, sans-serif. The monarchs of the sans-serif world, Arial and Helvetica, are used all over the place. They’re also widely available to most computers. These typefaces can be used for body text or headlines. If you want a bolder typeface for a heading, choose Arial Black, Gadget, sans-serif. • Tahoma, Geneva, sans-serif. Tahoma was designed for Microsoft and Geneva for Apple. Tahoma is a little narrower than its counterpart Verdana, which means you may be able to get more characters per line at a small sacrifice in terms of readability. • Trebuchet MS, Arial, Helvetica, sans-serif. Trebuchet MS is a font that’s more distinctive than Arial and Helvetica and not nearly as ubiquitous. A good type- face for headings of all sizes. It was also developed by Microsoft and widely distributed along with Office and other Microsoft applications. • Arial Black, Gadget, sans-serif. Arial Black and Gadget are both heavy fonts, meaning they have very thick lines. Use these typefaces when you’re creating big, bold headlines. • palatino Linotype, Book Antiqua, palatino, serif. Palatino is a typeface that’s been widely available on computers since the Mac first adopted it. An attractive and readable font, the Palatino family of typefaces has grown over the years. This specification refers to the original serif font. Ch APter 3: Addin G And f orm ATTin G Tex T 59Ch An Gin G Tex T-sP eCifi C • Lucida Sans Unicode, Lucida Grande, sans-serif. Lucida Sans Unicode was Pro Per Ties designed to supply a font that supported the most commonly used characters in the large Unicode standard. (The Unicode computer standard was developed to handle and display text used in most of the world’s writing systems.) • MS Serif, New York, serif. These are basic serif fonts provided by Microsoft and Apple, respectively. • Lucida Console , Monaco, monospace. Lucida Console and Monaco are mono- spaced, sans-serif typefaces, as shown in Figure 3-3. These are a good choice for menus or other user interface elements. In general, they won’t work as well in large blocks of text. Sometimes you may want to use a special or decorative font that’s not included in Animate. Perhaps it’s a company logo or a special heading style. In those cases, you might want to turn the text into a graphic. Create the text in a word processor or page layout program, and then take a screenshot to turn the text into a JPEG image. At that point, you can import the JPEG into Animate just like any other graphic ele- ment (see page 47). The downside of this technique is that your text can’t be edited within Animate. Another alternative for displaying unique fonts is to use a web font as explained in the next section.  No TE  If you want to be technical in a Gutenbergian fashion, typefaces are families of fonts. Times Roman is a typeface, while “Times Roman, bold, 12 point” is a font. Somewhere along the line, as type moved from traditional typesetters to computer desktops, the meaning of the word “font” came to be synonymous with “typeface.” That’s OK, but knowing how the terms originated makes great cocktail party banter. Figur E 3-3 Changing a typeface is as easy as selecting a font from the drop-down menu. However, it’s important to choose the right typeface for the job. Arial Black is great for headings and bold state- ments, but it would be painful to read multiple paragraphs of the stuff. That job is better suited to Times New Roman or Verdana, which are very readable at small font sizes. ADOBe eDGe Anim Ate Preview 7: t he m issin G mA nu Al 60Usin G Web f on Ts FREQUENTLY ASKED QUESTIo N Small Is Beautiful How can I use small type and make sure it stays readable? it doesn’t have the tiny end bars (serifs) you often find in For most people, reading text on a computer or iPhone screen type. Computer screens have a hard time creating sharp is more difficult than reading it off a piece of paper. If your serif type at very small sizes. Animate project includes text with small font sizes (12 px or • Use both upper- and lowercase type for anything other less), there are a few things you can do to keep your audience than a headline. Even though all-caps type looks bigger, from straining their eyes. Actually, the fact of the matter is, it’s actually less readable. The height differences in people simply won’t read text if it’s too hard to see. lowercase type make it more readable. Besides, too • If possible, bump the type up to a larger size. At small much uppercase type makes it look like you’re shouting. sizes, a single pixel makes a big difference. • Avoid bold and italic type. Bold and italic are often hard to • Black text on a white background is easiest to read. If you read at small font sizes. It varies with different typefaces, don’t want to use that combination, opt for very dark text so it doesn’t hurt to experiment. on a very light background. If you have to use light text It never hurts to get second and third opinions. If you’ve got on a dark background, make sure there’s a great deal of eyes like an eagle, you may want to get some opinions from contrast between the colors. your less-gifted colleagues when it comes to readability. You • Use sans-serif type, like Verdana, Arial, or Tahoma for want your Animate project to be accessible to as wide an small sizes. Sans-serif type looks like the text in this book; audience as possible. Using Web Fonts There’s another way to increase the number of typefaces you use in your Animate animations. For years, web designers have been using web fonts. For programs, including web browsers, to display a specific font, they need to have access to the font description. Usually, that description resides on the same computer as the pro- gram—sometimes called the client. Web fonts work a little differently. For example, with Google’s web fonts (, the definitions for the fonts are stored on Google’s servers. As a web designer, you can use these fonts by adding code to your pages that tell browsers where to find the font descriptions.  No TE  In web-speak, the computer with the browser is called the client; the computer serving up the web pages is the host. Ch APter 3: Addin G And f orm ATTin G Tex T 61Usin G Web First, find the web font you want to use. Google web fonts are free and surprisingly easy f on Ts to use, so they’re a great candidate for your first attempt. Here are the steps to select - ing a Google web font and grabbing the code you need to identify it in your project: 1. In your web browser, go to: You see a page displaying font samples. There are hundreds, so the widgets on the left help you filter the fonts. The buttons at the bottom of the page direct you to the three steps for a successful web font hunt: Choose, Review, and Use. 2. On the left, below the word Filters, click the drop-down menu. Choose from Serif, Sans-Serif, Display, and Hand Writing. The menu uses checkboxes, so you can choose a combination of characteristics. For example, you could use Sans-Serif and Display. 3. If necessary, use the Thickness, Slant, and Width sliders to narrow your font search. With so many choices, it helps to thin the crowd of fonts displayed on the screen.  TIp  At first, the Search box isn’t much use to you because Google web fonts don’t have the familiar names. After you use them a bit, you’ll probably find a few favorites that you use repeatedly. If you remember their names, then you can use the Search box to quickly find that needle in the haystack. 4. Use the tabs at the top of the font window to change the display to Word, Sentence, or Paragraph. If you’re looking for a font for headings the Word or Sentence tab is the best choice. If you’re choosing a font for body text, make sure you check its appear- ance with the Paragraph option. 5. Click the blue “Add to Collection” button. You can have more than one font in a collection, but for page-rendering speed and good design, you’ll want to limit the number of fonts you use. 6. Click Review. This step may not always be necessary, but as the name implies, on this page you can take a closer look at your font in use as a headline or paragraph. 7. Click Use. A new page loads with instructions for using the fonts on your web site. Part way down the page is a blue box with the heading “Add this code to your website”; see Figure 3-4. ADOBe eDGe Anim Ate Preview 7: t he m issin G mA nu Al 62Usin G Web f on Ts Figur E 3-4 Google provides several different code samples for using their web fonts on your website. The shortest and easiest one to use is under the Standard tab shown here. 8. Click the Standard tab and then select and copy the code displayed. With the code stored on your clipboard, you’re ready and loaded for the sec- ond part of the process: adding the location for the font description to your Animate project. Adding Web Fonts to Your Composition Once you’ve chosen a Google or other brand web font and copied the code that identifies it, adding to your project easy in Animate. Here are the steps: 1. In the Library panel, on the bar that says Fonts, click the + button, as shown in Figure 3-5. The Add Web Font dialog box opens. 2. Paste the code that identifies the location of your font in the lower “embed code” text box. This code is provided by the same organization that hosts the web font. If you followed the previous steps, the code is stored on your clipboard. 3. Type the name of web font in the upper Font Fallback List along with the fonts that should be used if the web font isn’t available. If the client computer isn’t connected to the Internet, then the web font won’t be available. 4. Click the Add Font button. The font now appears in the Font Name drop-down menu when you’re work- ing with text. Ch APter 3: Addin G And f orm ATTin G Tex T 63Usin G Web f on Ts Figur E 3-5 Three steps for adding fonts to your project. Top: Click the Add Web Font button. Middle: Paste in the code that identifies the location for the web font description. Bottom: Choose your new font from the Font Name box. ADOBe eDGe Anim Ate Preview 7: t he m issin G mA nu Al 64Ch An Gin G o Ther Tex T There are a few of things to keep in mind when you expand your font toolbox by Pro Per Ties using web fonts: • It takes browsers a little longer to find, download and use web fonts compared to fonts stored on the local computer. • Web fonts won’t be available to computers or mobile devices that aren’t con- nected to the Internet. • Just because you have access to a bunch of new fonts, that doesn’t mean you have to use them all. Don’t sacrifice readability for novelty. No TE Google web fonts have the significant advantage of being free to use, but they aren’t the only game in town. You’ll find other options at,, and Changing Other Text Properties Like any other element in Animate, you probably don’t expect your text to be static all the time. Fortunately for you, the designer, you don’t have to learn new tools to make your text dance around the screen. The x /Y Position properties determine where your text appears, and the W/H Size properties determine the dimensions of the text box. Keep in mind that the Size properties change the size of the text box, but they don’t change the size of the letters. To change the size of the letters, you can use the font-size properties or the Scale properties. As with drawings and photos, you can create property keyframes in the timeline to make text properties change over time. For example, page 21 showed how to use the Opacity setting to make text fade in and out. Remember those fold, spindle, and mutilate tools? You can use the Transform prop- erties on text, too. Go ahead and rotate or skew blocks of text for special effects as you add or remove them from the web page. Use the Scale properties to make the text box and the text inside bigger or smaller. Scale works on text the same way it works on a JPEG image: Dial in a percentage, and everything grows or shrinks.  No TE  Animate anticipates how you want your text to move. With this in mind, it automatically puts the transform origin in the middle of the text box. That makes it a cinch to create a headline that spins like a pinwheel. Naturally, you can reposition the Transform Origin at any time using the X/Y transform origin properties. Ch APter 3: Addin G And f orm ATTin G Tex T 65Cli PPin G Tex T Aro Und The Clipping Text Around the Edges ed Ges As with other graphic elements on the stage, you can use Clip properties to hide the edges of a text box. It’s a lot like cropping the edges of photograph. Suppose you want animate a text box so that at first only a pinpoint in the middle is visible, then it grows to display an entire block of text. Select your text and then look near the bottom of the Properties panel. Click the triangle button to expand the Clip subpanel. In the upper-right corner of the subpanel, click the button to turn clipping on. Edge Animate provides four controls that represent the top, bottom, left, and right edges of the element (Figure 3-6, bottom). Type or scrub in values in pixels (px). As you make changes, you see the effect they have on your text box. Want to remove clip properties after you’ve applied them? Just right-click (Control-click) the clipped element and choose Remove Clip from the shortcut menu. Figur E 3-6 Clip properties give you an easy way to crop a text box. Top: The right and bottom edge of the text box are hidden. Bottom: That effect was created by increasing the values of the right and bottom clip properties. Making That Headline Drop In In most cases, the purpose of text is to communicate a message, so it’s counter- productive 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. Check out 03-01_Heading_Drop_done if you want to see an example. 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 3-7) 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. ADOBe eDGe Anim Ate Preview 7: t he m issin G mA nu Al 66mA kin G Th AT h eAdline Here are the steps to create a drop-in heading: dro P in 1. Create and save a new 550 × 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/H Size 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. Figur E 3-7 When you animate words and letters, it can be tough to get the spacing exactly right. If you create a positioning template, using a single text box, you can use it as a guide for placing words and letters in their final positions. Ch APter 3: Addin G And f orm ATTin G Tex T 67mA kin G Th AT h eAdline 5. In Properties, give the text box the name OnEdgeTemplate. dro P in 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 3-8. Figur E 3-8 Arial Black is the thickest, boldest typeface in your text toolbox. It’s well-suited to massive headings and titles. Using the 72 px font size and the Center Align property makes this ban- ner fill the stage. 6. Set the text box’s size and location to match the colored rectangle, with the size to 550px x 100px and the location to x=0, Y=0. When you’re done, the top of the Animate stage should look like Figure 3-9. If for some reason the text is behind the blue box, you can change the Z-order in the Elements panel. Just drag OnEdgeTemplate so that it’s above BannerBG. Figur E 3-9 The blue box and your text box have identical Size and Location properties. That means the text appears centered over the blue box, making an attractive page banner. ADOBe eDGe Anim Ate Preview 7: t he m issin G mA nu Al 68mA kin G Th AT h eAdline 7. Select OnEdgeTemplate and then press Ctrl+D (c-D). dro P in This duplicates the text, though you might not notice right away because it is placed right on top of the previous text. However, you can see OnEdgeTem- plateCopy in the Elements panel. 8. Drag OnEdgeTemplateCopy down to the middle of the stage. In the next steps, you’ll use this to create individual text boxes with separate words: “ON,” “the,” and “EDGE.” Before that, it’s a good idea to finish setting up the positioning template. 9. Select the original OnEdgeTemplate and then set the Text Color to red (ff0000). As advertised, this text is being used for a positioning template. Later, the bright red color will make it easier to see if the text is correctly positioned. 10. In Elements, click the Lock Element button next to OnEdgeTemplate. This locks your positioning template in place so you can’t accidentally select or move it. 11. Select OnEdgeTemplateCopy and press Ctrl+D (c-D) twice. This creates two more copies of the entire banner text. 12. Double-click the first OnEdgeTemplateCopy . In the text edit box, delete every- thing except the word “ON.” Then in Properties, rename the text ON. It’s best to eliminate extra spaces when you’re animating single words or letters and you should reduce the width the text box to fit the edited text. 13. Repeat step 12 to make text elements for the and EDGE. You now have three properly labeled words that you can identify and animate independently. You may want to resize the text boxes’ width to match the words, as shown in Figure 3-10. 14. Drag the word “ON” up so that it is above and slightly to the left of the stage. Drag the word “EDGE” so that it is above and slightly to the right of the stage. Drag the word the straight up so that it is above the stage. These are the starting positions for each of the words. They should be com- pletely offstage. 15. Select “ON” and change the Rotate property to -30. Select “EDGE” and set the rotation to 30 degrees. These two words will appear to drop in at an angle from their respective sides. 16. Select all three words and click the Location and Rotate Add Keyframe buttons. The starting positions for each word are duly recorded in keyframes. Ch APter 3: Addin G And f orm ATTin G Tex T 69m Akin G Th AT he Adline 17. Drag the playhead to the half-second mark: 0:00.500. dro P in The entire animation will take a second, which is plenty of time for a simple animation like this. You don’t want to bore your audience. Each word will take a half-second to complete its move. Each word will start at a different moment.  TIp  This animation uses fractions of a second in the timeline, like 0:00.500 and 0:00.250. If you don’t see those numbers on the timeline, you can use the slider in the lower-right corner of the timeline, as shown in Figure 3-11. Positioning template Figur E 3-10 At this point, the text to be animated is temporar- ily placed in the middle of the stage. The red text over the blue banner serves as a positioning template. After it’s served its design-time function, it will be removed. Three text boxes for animation 18. Select “ON” and set the Rotate property back to 0, and move “ON” over the same word in the positioning template. If you want to review the motion, drag the playhead back and forth. If necessary, you can readjust the start or end point. Just move the playhead into position and tweak the word’s position. 19. Move the playhead to 0:00.250. Then select the word “the” and click the Loca- tion Add Keyframe button. The plan here is to start the word “the” moving before “ON” has finished its movement. However, you want the word “the” to remain motionless for the first quarter-second, so you must create two location keyframes with identical values at 0:00.000 and 0:00.250. ADOBe eDGe Anim Ate Preview 7: t he m issin G mA nu Al 70deAlin G WiTh 20. Drag the playhead to 0:00.750, and then move “the” over the same word in The Tem Pl ATe the positioning template. No rotation is used for “the”, so this word will appear to drop straight down. Figur E 3-11 Use the Timeline Zoom slider to get a better view of the timeline. The units of measure at the top of the timeline change depending on the zoom level. Timeline Zoom Slider 21. Move the playhead to 0:00.500. Select “EDGE” and click the Location and Rotate Add Keyframe buttons. This keeps “EDGE” in place for the first half-second of the animation. 22. Move the playhead to 0:01, and then drag “EDGE” into place over the position- ing template. At the 1-second mark on the timeline, the words have finished their journey, and the first version of the animation is complete, except for removing the positioning template. Before you remove the red positioning template, you probably want to preview the animation. Press Home and then the space bar to get a look. If necessary, you can continue to tweak the starting and ending points for the animated words. For example, you might prefer it if “ON” and “EDGE” drop in first and the word “the” is added last. If you’d like to add a little bounce to the words’ entrance, see page 72. Dealing with the Template The red positioning template isn’t meant to be a permanent part of the animation. So if you’re happy with everything, you can remove it. First turn off the Lock Ele - ment button to make the Template selectable. Then you can select the template in either the Elements panel or on the stage and press Delete. As an alternative, you could turn the template into a drop shadow (Figure 3-12) or glow effect for the text. • For a drop shadow, set the text to a mid-gray tone and then adjust the opac- ity to taste. Something around 30 percent usually works well. You might want to keep the drop shadow hidden until the three words have finished moving. If that’s the case, set the opacity to zero until that point in the animation, and then bring it up. Ch APter 3: Addin G And f orm ATTin G Tex T 71Addin G s ome • For a glow effect, choose a yellow or orange color. Use the Scale control to make bo Un Ce the text slightly larger than the text that drops in place. Again, you’ll probably want to use opacity to control the timing and appearance of the glow text. You might want the glow effect to fade in and then fade out, adding momentary emphasis on the heading.  No TE  Edge Animate Preview 7 adds the ability to create even slicker shadow and glow effects through the drop shadow properties described on page 45. Figur E 3-12 You can turn the position- ing template into a quick and easy drop shadow for your drop-in heading. Apply a gray text color and some opacity and you’re ready to go. Adding Some Bounce If the previous example, where text drops into place, is too sedate for your web page, you might want to consider adding a little bounce to the action. Bounce makes it seem like your web page adheres to the laws of physics. Like a basketball, your text can start with a big bounce and then one or two smaller bounces until it settles into place. You can create your own bounce by adding position keyframes, or you can create a bounce using the Easing properties that are part of the transition in the timeline. Chapter 4 covers the timeline and all of its features in much greater detail. This section will quickly cover some bounce basics. Creating a Bounce Manually You can take a crack at creating a bounce manually using the 03-2_Word_Bounce project. Open the file and examine the Elements panel—you’ll see the stage with three other elements. “BOUNCE” is the word that you’ll animate. “BounceTemplate” (red text) is the positioning template. As in the previous example, this marks the final position for the animated text. The ground element is a gray rectangle that’s positioned at the bottom of the stage. You can think of this as the ground on which the text will bounce. ADOBe eDGe Anim Ate Preview 7: t he m issin G mA nu Al 72Addin G s ome A bouncing motion is created in the timeline by adding keyframes with alternating up bo Un Ce and down locations (Figure 3-13). With the playhead still at 0:00, select BOUNCE and click the “Add Keyframe for Y” button in Properties. This sets the starting point. For the next leg of the journey, drag the playhead to 1:00 and move BOUNCE so that it covers BounceTemplate. Click “Add Keyframe for Y” to add new location keyframes. Drag the playhead to 1.75 and then move BOUNCE up near the middle of the stage. Move the playhead to 2.25 and then move BOUNCE back over the template. You can create a few more bounces using a shorter period for the motion—half a second, then a quarter second. With each bounce up, shorten the distance. When you’re done, your project will look something like 03-3_Word_Bounce_done. When you get tired of a straight up-and-down bounce, you can always add a little rotation to the movement, making it look like the word is bouncing back and forth off of the lower corners. If you reduce the vertical scale property when the text hits the ground, you can create a cartoon-like smooshing action, as if the text were compressing on impact with the ground. Up Up Up Figur E 3-13 Down Down Down Down You can make just about anything bounce in Animate, including text boxes. It’s simply a mat- ter of creating position keyframes that alternate an element’s position. Here the up-down motion is created using the text box’s Y property. Using Animate’s prebuilt Bounce First, a little background about transitions and the concept of easing. When you animate an element on the stage, by changing properties and creating keyframe properties in the timeline, you create transitions. Those transitions are shown visually as bars in the timeline. Like the elements on the stage, transitions have properties, too. One of the properties is called Easing. In the real world, when objects move, they accelerate and decelerate. You never see a car begin to move at full speed or come to a stop instantly. The Easing properties help you create more realistic movement by automatically controlling an element’s transition. It just so happens that one of the easing options helps you to create a bouncing motion. Ch APter 3: Addin G And f orm ATTin G Tex T 73Addin G s ome Here are some steps to explore transition properties: bo Un Ce 1. Open 03-4_Easing_Bounce in Animate. The stage looks suspiciously similar to the Word Bounce exercise. 2. Drag the playhead to 0:01, and then drag BOUNCE down so that it covers BounceTemplate. Animate creates a transition in the timeline. 3. In the timeline, click the transition lane next to BOUNCE. The transition in the timeline is highlighted. 4. At the top of the timeline, click the Easing button. The easing panel appears above the timeline. Initially, the tooltip for this but- ton says Easing: Linear, because that is the easing method that’s applied. With linear easing, the transition is applied at a steady rate from beginning to end. 5. On left side of the Easing panel, click Ease Out. Then, on the right, click Bounce, as shown in Figure 3-14. When you click Ease out, the panel displays a number of Ease Out methods. The graph gives you a visual representation of the easing method. 6. Click outside of the Easing panel. The panel closes and your easing method is applied to the selected transition. Figur E 3-14 Animate provides a number of different easing options for transitions: EaseOutBounce makes an element bounce at the end of the transition. If you want the bounce at the beginning, choose EaseInBounce. Easing ADOBe eDGe Anim Ate Preview 7: t he m issin G mA nu Al 74

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.