In 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 navigation 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 chapter, 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.
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 already 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 (⌘-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.
Open 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 animation 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.
Figure 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.
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 with precision by typing X and Y values in Properties. To reshape the text box, drag 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 (Clipping the Bits That Need Trimming) to trim the bottom of the text box. For that matter, you can trim the top or sides, too.
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 Reading CSS Files.
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 Using Web Fonts.
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. Next to font-size you see a button called Text Property Units. Click this to change the method for specifying font-size.
Animate uses three different units for specifying font-size: pixels (px), ems (em), and percentage (%). Pixels are equivalent to a single dot on a monitor. 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. There are more details about using text in responsive designs in Chapter 10.
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.
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.
text-indent. Indents the first line within a text box. You can change the value in pixels. It doesn’t accept negative numbers to create hanging indents.
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.
Figure 3-2. Animate provides the standard text formatting options, including choice of font, style, size, color, and alignment. In addition to these properties, you have access to the same properties available to graphics, such as size, location, rotate, and skew. If you’re not sure what one of these widgets does, hold the cursor over it. A tooltip appears with the tool name.
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 Small Is Beautiful.)
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 designers 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:
Verdana, Geneva, sans-serif. Verdana (see Figure 3-3) was developed for 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 typography 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 noticeable 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.
Times New Roman, Times, serif. The Times fonts are very versatile. Often used for body text, they can also be used for headings at large sizes. Times adds a sort of “old school” elegance to projects.
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.
Lucida Sans Unicode, Lucida Grande, sans-serif. Lucida Sans Unicode was 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 element (see Clipping the Bits That Need Trimming). 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.
Note
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.
Figure 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 statements, 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.
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 program—sometimes called the client. Web fonts work a little differently. For example, with Google’s web fonts (www.google.com/webfonts), 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.
Note
In web-speak, the computer with the browser is called the client; the computer serving up the web pages is the host.
First, find the web font you want to use. Google web fonts are free and surprisingly easy to use, so they’re a great candidate for your first attempt. Here are the steps to selecting a Google web font and grabbing the code you need to identify it in your project:
In your web browser, go to: www.google.com/webfonts.
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.
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.
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.
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 appearance with the Paragraph option.
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.
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.
Click Use.
A new page loads with instructions for using the fonts on your website. Part way down the page is a blue box with the heading “Add this code to your website”; see Figure 3-4.
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 second part of the process: adding the location for the font description to your Animate project.
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:
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.
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.
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.
Click the Add Font button.
The font now appears in the Font Name drop-down menu when you’re working with text.
There are a few of things to keep in mind when you expand your font toolbox by 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 connected 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.
Figure 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.
Note
Google web fonts have the significant advantage of being free to use, but they aren’t the only game in town. As this book went to press, Adobe announced Edge Web Fonts, a free service similar to Google Web Fonts. See Figure 3-6. In fact, the choice of fonts include many that were originally commissioned by Google. For details go to http://www.edgefonts.com. You’ll find other options at http://typekit.com, http://webfonts.fonts.com, and http://fontsquirrel.com.
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. For the readable text, it’s best to use the font-size properties; however for special visual effects scale may do the trick. As with drawings and photos, you can create property keyframes in the timeline to make text properties change over time. For example, Building Your First Animation 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 properties 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. Keep in mind that text gets a bit blurry when it’s enlarged using the Scale property.
Note
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.
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 to 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-7, 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.
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. 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-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.
Figure 3-8. 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.
Here are the steps to create a drop-in heading:
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.
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.
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.
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.
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 3-9.
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-10. 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.
Select OnEdgeTemplate and then press Ctrl+D (⌘-D).
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 OnEdgeTemplateCopy in the Elements panel.
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.
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.
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.
Select OnEdgeTemplateCopy and press Ctrl+D (⌘-D) twice.
This creates two more copies of the entire banner text.
Double-click the first OnEdgeTemplateCopy. In the text edit box, delete everything 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.
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-11.
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 completely offstage.
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.
Select all three words and click the Location and Rotate Add Keyframe buttons.
The starting positions for each word are duly recorded in keyframes.
Drag the playhead to the half-second mark: 0:00.500.
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.
Figure 3-11. At this point, the text to be animated is temporarily 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.
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-12.
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.
Move the playhead to 0:00.250. Then select the word “the” and click the Location 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.
Drag the playhead to 0:00.750, and then move “the” over the same word in the positioning template.
No rotation is used for “the”, so this word will appear to drop straight down.
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.
Move the playhead to 0:01, and then drag “EDGE” into place over the positioning 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 Adding Some Bounce.
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 Element 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-13) or glow effect for the text.
For a drop shadow, set the text to a mid-gray tone and then adjust the opacity 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.
For a glow effect, choose a yellow or orange color. Use the Scale control to make 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.
Note
Animate has the ability to create even slicker shadow and glow effects through the drop shadow properties described on A Circle Is a Very Rounded Rectangle.
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.
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.
A bouncing motion is created in the timeline by adding keyframes with alternating up and down locations (Figure 3-14). 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.
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.
Here are some steps to explore transition properties:
Open 03-4_Easing_Bounce in Animate.
The stage looks suspiciously similar to the Word Bounce exercise.
Drag the playhead to 0:01, and then drag BOUNCE down so that it covers BounceTemplate.
In the timeline, click the transition lane next to BOUNCE.
The transition in the timeline is highlighted.
At the top of the timeline, click the Easing button.
The easing panel appears above the timeline. Initially, the tooltip for this button 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.
On left side of the Easing panel, click Ease Out. Then, on the right, click Bounce, as shown in Figure 3-15.
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.
Click outside of the Easing panel.
The panel closes and your easing method is applied to the selected transition.
Press Home and then the space bar.
When the animation plays, you’ll notice some nice bouncy action at the end of the motion. If you’d applied EaseInBounce, the bouncing motion would have occurred at the beginning of the transition.
The easing properties for transitions can be a real timesaver. Animate includes a number of different transitions, but sometimes the names are a little cryptic. The best way to learn the different easing characteristics is to create a practice animation and apply different eases to identical elements and transitions.
As you’ll see in Chapter 5, you can add links to the elements you place on the stage using Animate’s triggers and actions. Often you’ll want to have a link on one or two words within your text. The simple way to handle that is to create your web page in your favorite web builder and then save it as an HTML file. Then, using Animate you can open that HTML file. Once the HTML text is in your composition, you can animate the text box just as if you’d created it in Animate.
Note
There’s another way to create clickable links within text using JavaScript and jQuery. For those details, jump ahead to Identifying Elements Within Symbols.
In this exercise you can use the file 03-6_Outside_Text.html from the Missing CD (www.missingmanuals.com/cds/animatemm), or you can use one of your own files. The missing CD file is just about the simplest HTML document that you could create, which makes it easier to find the line of text once you’ve imported it into Animate. The code looks like this:
<!DOCTYPE html> <html> <head> </head> <body><p>You can learn everything in a <a href="http://www.missingmanual.com"> Missing Manual.</a></p></body> </html>
You’ll learn more details about HTML in upcoming chapters. At this point it’s helpful to know that HTML code uses pairs of tags. Tags are identifiable by their angle brackets: <tag_name>. For example, in this code there is a paragraph of text that says, “You can learn everything in a Missing Manual.” The paragraph is placed inside two tags. The <p> tag marks the beginning and the </p> marks the end of the paragraph. Inside the paragraph is a hyperlink, which also uses a pair of tags, <a> and </a>. When you’re specifying a link, you need to provide an address for the link. That is done within the first tag, so it reads like this: <a href=“http://www.missingmanual.com”>. The href stands for hyperlink reference. It’s followed by the assignment operator (=) and then the address is placed within quotes.
While you’re in Animate, choose File→Open and open 03-6_Outside_Text.html.
When the file is open, the Elements panel lists two items matching the tags in the document: <p> and <a>. Note that the <a> tag is inside the <p> tag, just as the hyperlink is inside the paragraph. Click the triangle button to expand and collapse the <p> element in the Elements panel. You can check to make sure the link works by going to File→Preview In Browser.
Select <p> in the Elements panel.
A text box appears around the text on the stage, and the properties are displayed in the Properties.
Create a simple drop-and-bounce animation for the text, using the techniques described on Using Animate’s Prebuilt Bounce. Use the Transformation tool to double the size of the paragraph. Skew the text slightly at the beginning if you want it to appear to fly in from an angle.
You can animate and change any of the properties for the <p> element just as you’d animate other graphic elements inside your composition.
Go to File→Preview In Browser and click the hyperlink.
The text dances around the page, and through the whole process the hyperlink is active and clickable. If you’re connected to the Internet, it takes you to the Missing Manuals website.
As shown in the example, you can change the properties for the elements you loaded from an HTML file. The one thing you can’t do is edit the text in the <p> or the <a> elements from within Animate. If you need to fix typos or make other changes, you can do that by editing the HTML file in a text editor like Notepad++ (Windows) or BBedit (Mac). Just make sure you save the file as HTML and reload it in Animate.
As shown in the previous example, Animate speaks HTML and makes use of some of the standard HTML tags. You can apply tags to the text you create in Animate, as shown in Figure 3-16. One of the major advantages of doing this is to help you format text consistently. For example, all your paragraphs may be displayed in a serif font at a font size of 12 px. Your major heading <H1> might use the 24 px font size, while the next heading <H2> uses 18 px.
All of these tags come in pairs, and the closing tag includes the slash character, like so: <div>This is the content inside.</div>
<div> The div tag is used to define a section within a document. You can think of it as dividing the document into parts. The div tag is particularly popular in Animate because you use it to define any element you want. Once the element is defined with div, you can make it move.
<address> The address tag is used to identify the author of the document and to provide contact details.
<article> The article tag is new in HTML5. It is used to specify content that may be from another source.
<blockquote> The blockquote tag is used to define a long quotation.
<p> The paragraph tag has long been one of the most common tags in HTML.
<h1> through <h6> These tags define headings, each of which can have distinctive formatting.
<pre> The pre tag designates preformatted text. Usually HTML ignores extra white space; however when text is within the pre tags, it is displayed with its original formatting.
<code> The code tag defines computer code, making it available for special formatting such as monospaced fonts.
