Foundation Flash CS4 for Designers- P11 pptx

287 TEXT 2. Click the Text layer and select the Text tool or press the T key. 3. Click the stage and enter Show the frog, hide the frog. Specify these text settings in the Property inspector : Type: Static Text Font: Arial Size: 14 Color: #000000 (black) 4. Select the text Show and hide, and in the Property inspector, change their color to #0099FF (bright blue). 5. Using the Text tool, select the text Show and enter event:show into the Link field of the Property inspector , as shown in Figure 6-29. The text you entered is the PatpArajp6HEJG event you will be using when you write the code. Figure 6-29. Using a link to trigger an ActionScript text event 288 CHAPTER 6 6. Select the text hide and enter event:hide into the Link field of the Property inspector. 7. Select the first frame in the Actions layer, open the Actions panel, and enter the following ActionScript: ]``ArajpHeopajan$PatpArajp*HEJG(hejgD]j`han%7 bqj_pekjhejgD]j`han$arp6PatpArajp%6rke`w eb$arp*patp99odks%w bnkc*reoe^ha9pnqa7 yahoaw bnkc*reoe^ha9b]hoa7 y y The first line of the code creates the listener, and tells Flash what to listen for (patpArajp6HEJG) and what to do (execute the function named hejgD]j`han$%) when it “hears” the event. The function checks to see which of the two hyperlinks was clicked. If it was the word Show and the event’s patp property is “odks, then the bnkc movieclip has its reoe^ha property set to pnqa, which means the frog movieclip appears. The ahoa simply says if it isn’t the word Show, then hide the frog movieclip by setting the movieclip’s reoe^ha property to b]hoa. 8. Save and test the movie. Using hyperlinks with a dynamic text field Now that you know how to control events using static text, let’s try it out using a dynamic text field. 1. Open the @uj]ie_Pneccan=O*bh] file in this chapter’s Atan_eoa folder. It is the same file as the previous exercise, and all we are going to ask you to do is to write the code. 2. Select the first frame in the Actions layer, open the Actions panel, click once in the Script pane, and enter the following: _d]jcaPdaBnkc*dpihPatp98l:8bkjp_khkn9#,,55BB#: ±8q:8]dnab9#arajp6odks#:Odks8+]:8+q:8+bkjp:pdabnkc( ±8bkjp_khkn9#,,55BB#:8q:8]dnab9#arajp6de`a#:de`a8+]: ±8+q:8+bkjp:pdabnkc*8+l:7 _d]jcaPdaBnkc*]``ArajpHeopajan$PatpArajp*HEJG(hejgD]j`han%7 bqj_pekjhejgD]j`han$arp6PatpArajp%6rke`w eb$arp*patp99odks%w bnkc*reoe^ha9pnqa7 yahoaw bnkc*reoe^ha9b]hoa7 y y The first line is the major difference between this and the previous example. The text field on the stage already has an instance name of changeTheFrog. The ActionScript line tells Flash to fill that par- ticular text field with HTML text, and uses HTML tags instead of the Property inspector to add the text and enter the URL link. 289 TEXT 3. Save the movie and test it. As you can see in Figure 6-30, the major change is the addition of traditional underlines for the hyperlinks. Figure 6-30. The links are formatted through the use of HTML tags. Embedding font outlines You’ve learned that static text fields automatically embed font outlines as needed. For this reason, static text can easily be rotated, skewed, and otherwise distorted, as well as set to a semitransparent color. Dynamic and input text fields are different. The moment you do anything to the text that isn’t perfectly “square,” the text in nonstatic text fields simply vanishes. Rotate it even one degree, and poof! Why? The reason is simple: unless font outlines are included, Flash relies on fonts that exist on the user’s computer. They’re not in the SWF, so the SWF has no real control over them. But when you embed them in the movie, that’s another matter. Keep in mind that adding font information to a movie increases its file size (yet another trade- off to consider). There are couple ways to embed font outlines. The approach you use will probably depend on the amount of text your movie contains. On the one hand, each individual text field can have its embed- ding handled separately. Alternatively, you can use font symbols. Embedding font outlines in individual text fields If you care to embed font outlines for a few text fields, character embedding might be the quickest approach. Choosing a character set to embed Let’s see how character embedding works: 1. In a new Flash document, use the Text tool to draw a text field. Make it dynamic and enter a bit of text into it (the standard Lorem ipsum dolor sit amet is fine). 2. With the text field selected, click the Character Embedding button in the Property inspector. The Character Embedding dialog box will open, as shown in Figure 6-31. 290 CHAPTER 6 Figure 6-31. Embedding a font into the SWF The choices are pretty clear- cut. As a general rule thumb, we recommend you embed only the charac- ters you’re sure to need. There’s no reason to use the All choice, for example, if Basic Latin will do. The Basic Latin character set is generally good for English, but does not include accented characters, so please, no accented résumés. 3. To see the kind of difference various character sets can make, select All and click OK. 4. Test your movie. In the window that contains the SWF, go to View ° Bandwidth Profiler to see how much the SWF weighs. 5. Close that window, choose Basic Latin, and test again. Quite a difference! If this text field requires only lowercase letters, choose the appropriate selection. To select more than one at the same time, hold down Ctrl (Cmd) while you click. The Auto Fill button in the Character Embedding dialog box is pretty neat: it includes one of each char- acter currently in the text field, without repeats. If you change your mind and don’t want to embed a character, click the Don’t Embed button. What happens if you fail to embed a character the text field ends up needing? That particular charac- ter won’t show, even while the others do. Applying character embedding correctly Remember the very first topic at the beginning of this chapter, about what actually constitutes a font? Stylistic variations, such as bold and italic, are counted as distinct. Embedding roman (or normal) font outlines for a given character set does not include the corresponding bold or italic fonts, even for the exact same characters. To prove this point, let’s use another example. 291 TEXT 1. Open the Ai^a`>qppkj*bh] in this chapter’s Atan_eoa folder and test the movie. Out of the four existing text fields, only the upper- left field shows any text (see Figure 6-32). Why? Because all four text fields are rotated, but only the upper- left field has its font outlines embedded. Even though the text field below it contains the same letters and features the same font family, the bottom field’s particular variant is set to bold, while the upper- left field is set to normal. The fields to the right are interest- ing, because the one on the bottom is set to italic, so it makes sense that the text in that one doesn’t show (no embedded fonts). But the upper- right field is set to normal, so why doesn’t its text show? Again, because it doesn’t have any embedded fonts. This tells you that it’s not enough to have one text field embed font outlines; all text fields that need this feature must be told to use it. 2. Select the bottom- left text field and use the Character Embedding button to embed lowercase letters. Now both text fields on the left show. Here’s another interesting point. The upper- left text field is set to embed all lowercase letters. Meanwhile, the upper- right text field, which is composed of lowercase letters—just different ones— still doesn’t show. Have lowercase font outlines been embedded, or haven’t they? They have, but again, each text field that needs these outlines must make use of them. 3. Test your file and take note of the current SWF file size. 4. Close the SWF window and use the Character Embedding button to embed lowercase font out- lines for the upper- right text field. 5. Test again. As expected, the upper- right field now shows, yet the SWF file size does not increase. This is good news: Flash isn’t embedding the fonts more than once. 6. Embed lowercase font outlines for the lower- right text field. 7. Test the movie. This time, the SWF’s file size will slightly increase again, because glyphs from three distinct fonts—normal, bold, and italic—have been embedded. Here’s a neat trick. Change the embedding option from lowercase to a single char- acter in the Include these characters field. It can be any character—even a space. Test the movie. You’ll see that the upper- right text field still shows! Flash apparently needs to a nudged into “embed mode” for every single text field, but the decision of which characters to embed needs to be made only once. Using font symbols The other way to embed fonts is to use a font symbol. Open Ai^a`BkjpOui^kh*bh] in the Chapter 6 Atan_eoa folder to see what we mean. At first glance, this file doesn’t seem any different from Ai^a`>qppkj*bh], but there’s a key distinction. Take a look in the library. See that capital A? That’s a font symbol. That library asset represents the font outlines for the Verdana font. Its presence does an interesting thing to the Family drop- down list in the Property inspector. A new “font” appears, by the name of VerdanaNormal, followed by an asterisk (see Figure 6-33). Figure 6-32. Only one of the text blocks uses an embedded font. 292 CHAPTER 6 Figure 6-33. A library font symbol adds virtual entries to the Property inspector’s Family property. How did that font symbol get into the library? It’s easy enough. Right- click (Ctrl- click) somewhere inside the library that isn’t the preview area or an existing asset—or click the upper- right corner under the x—and you’ll see a context menu that contains the choice New Font. That’s the one you want. It opens the Font Symbol Properties dialog box, which allows you to specify an arbitrary custom name (such as VerdanaNormal), an actual font to embed, optional bold and italic styles, optional bitmap text, and size. Bitmap text produces text that is not anti- aliased, so it will look jagged. If you choose this option, you must specify the particular font size you’re after. If you do not use bitmap text, font size doesn’t matter, because the font outlines will be vectors. As explained previously, bold and italic are separate font outlines, so if you want normal text with the occasional italic words for emphasis, you’ll need to include two font symbols. The final step is to export your font symbol for ActionScript. Right- click (Ctrl- click) the font symbol in the library and choose Properties. If the Font Symbol Properties dialog box doesn’t show a Linkage area, click the Advanced button. Put a check mark in the Export for ActionScript and Export in First Frame boxes, and you’re set. The Class field is automatically filled in for you, based on the font symbol’s library name. Its class name might be slightly changed if the library name contains illegal characters, such as spaces or certain punctuation. The base class must be bh]od*patp*Bkjp, which makes sense. As with Ai^a`>qppkj*bh], this FLA features four text fields. However, this time, none of them shows text in the authoring tool. If you check the Character Embedding button, you’ll see why (no embed- ding). Interestingly, if you test the SWF, you’ll see text in the upper two fields. Have we entered the Twilight Zone yet? 293 TEXT Check the upper two text fields and verify in the Property inspector that they’re both set to the VerdanaNormal* “font” (actually a virtual font—the library font symbol). The embedding is happening with ActionScript, by way of the PatpBeah`*ai^a`Bkjpo property for each text field instance. As you click each dynamic text field, note that each has an instance name (qllanhabp, hksanhabp, qllannecdp, and hksannecdp). Open the Actions panel and look at the code in frame 1 of the scripts layer: qllanhabp*ai^a`Bkjpo9pnqa7 qllannecdp*ai^a`Bkjpo9pnqa7 hksanhabp*ai^a`Bkjpo9pnqa7 qllannecdp*ai^a`Bkjpo9pnqa7 The lower- left and lower- right text fields do not show in the published SWF, because neither bold nor italic variants have been brought as font symbols into the library. To prove that VerdanaNormal* really is a virtual font, right- click (Cmd- click) the font symbol and choose Properties. Change the Font entry to a visually different font, such as Courier. Test your movie. Even with a name like VerdanaNormal*, the font outlines look like the replacement font. Checking spelling Let’s admit it: If we enter text, we will inevitably use the wrong spelling for a word or two. Flash CS4 contains a tool that checks the spelling of all of the text in a document. You don’t have heartless edi- tors peering over your shoulders as we do, so spell checking your work before sending it to the Web is a really good idea. It should therefore not come as too much of a surprise to discover that the spell- checking feature of Flash is quite robust. It allows you to check not only the spelling of the text in your text fields, but also the spelling in your layer names. If you have never used the spelling features of Flash CS4, you need to set up the spelling checker before you undertake your first spell check. Open a new Flash document and select Text ° Spelling Setup to open the Spelling Setup dialog box, as shown in Figure 6-34. The Document options area sets up what spell- ing is to be checked, including any strings you may use in ActionScript. You can choose from a number of dictionaries, and even cre- ate your own for commonly used words not found in a dictionary. The Checking options area permits you to decide which words or groups of words will be included or omitted from any spell checks. Figure 6-34. The Spelling Setup dialog box 294 CHAPTER 6 It is heartening for one of the authors to see a Canadian dictionary and a British English dictionary. Canadian and British English are understandably similar, but writ- ing for publishers based in the United States can be a bit disorienting. For example, the word color, which is used extensively throughout this book, is not correct in the United Kingdom or Canada, where it is spelled colour. Another word used in the American English dictionary is the word check. This important method of payment is spelled cheque in the Queen’s English. Let’s bring in some text—with typos—and check the spelling. 1. Open the OlahhEpKqp*ptp document in this chapter’s Atan_eoa folder in a word processor, select the text, and copy it to the clipboard. Large amounts of text are pasted into Flash. For better or worse, there is no ability in the application to import text into the library. Close the word processor. 2. Return to Flash, select the Text tool, and click the stage. Select Edit ° Paste to add the text to the stage. 3. Select Text ° Check Spelling. The Check Spelling dialog box will appear, as shown in Figure 6-35. If the word is not recognized, the checker will provide you with a suggestion, which you can choose to either change or ignore. Figure 6-35. Using the Check Spelling dialog box 4. When you complete your spell check, click the Close button. Although there is no language known as “Adobe,” the Flash dictionary is full of terms exclusively used by the Adobe products. A great example of an “Adobian” word is ActionScript. It wouldn’t be flagged by the Adobe spelling checker, but will be consid- ered an error by other spelling checkers. 295 TEXT Your turn: Scrollable text The final two exercises in the chapter deal with one of the more frequently asked questions regarding text: “How do I scroll a large amount of text?” In fact, there are several ways of approaching this one. We’ll look at two. The first is to use the UIScrollBar component, which, to quote a friend of ours, is “easy peasy.” The second is to “roll your own” scroller using ActionScript. Before you start, let’s get clear on the fact that the text field must be dynamic, and Flash needs to know it is scrollable. This is done in one of three ways: Hold down the Shift key and double- click the circular handle of the text block. The circle will turn into a black square, as shown in Figure 6-36. Figure 6-36. Your visual clue that a text field is scrollable Using the Selection tool, click the text block and select Text ° Scrollable. With the text block selected, right- click (Ctrl- click) the text box and select Scrollable from the context menu. Using the UIScrollBar component Let’s start with the “easy peasy” method: using the QEO_nkhh>]n component. We will talk about com- ponents in great depth in Chapter 11. For now, just work with us. In this particular case, no ActionScript is involved, which is why we’re showing you the UIScrollBar component early. Components usually require a bit of programming. 1. Open the O_nkhh?kilkjajp*bh] file in the Chapter 6 Atan_eoa folder. You will see we have put some text on the stage in a dynamic text box. 2. Switch to the Selection tool, click the text field, and select Text ° Scrollable. The hollow circle turns to a black box. Drag the bottom of the field to a point between the second and third paragraphs. 3. Select Window ° Components. From the Components panel, open the User Interface compo- nents and select the UIScrollBar component, as shown in Figure 6-37. Drag a copy of it onto the text. 296 CHAPTER 6 Figure 6-37. The UIScrollBar component is found in the User Interface components. 4. Depending on which side of the text field you chose, the component will spring to the closest side of the text field. Switch to the Selection tool and move it to the opposite side of the field. Now move it back to the right side of the field and release the mouse. 5. Save and test the movie. You will see that can scroll the text up and down, as shown in Figure 6-38. Figure 6-38. The UIScrollBar component in action Rolling your own scroller In this final exercise of the chapter, we are going to let you wire up a scroller using ActionScript. Just keep in mind there are several hundred ways of doing this, and the method we are using is a very basic example of creating scroll buttons. In this example, we use two very simple button symbols as the scrollers, whereas others may use movieclips. We use opacity to indicate when the scroll button is no longer active. Others may use different colors or even different shapes to indicate the state of the [...]... picture Shape tweening, in contrast, is like rearranging the tiles in a mosaic For this reason, the Free Transform tool disables the Distort and Envelope options for symbols These transformations can’t be performed on symbols and therefore can’t be classic tweened Symbol distortion can be performed with the 3D tools (Chapter 9), and can even be animated, but the animation requires motion tweens (Chapter... years is Flash s increasingly productive ability to help you create high-quality, scalable animation for the Web, and even for television and film You caught the faintest whiff of tweening in Chapters 1, 2, and 3 It gets considerably more complex—read considerably more fun!—because, for the first time, Flash CS4 gives you a double-dose of animation apparatus You now have two independent tweening models... which it moves Scale: If a check mark is present, tweening for the current span of frames will include a trans- formation in scale (size), if such a transformation exists If you haven’t scaled anything, it doesn’t matter what state the check mark is in If scaling and other transformations are combined in a given classic tween, only the other transformations will show if the check mark is deselected Sync:... you have learned In this chapter, you learned the following: How to add text to Flash The various text-formatting features available to you in Flash CS4 How to choose and work with static, dynamic, and input text fields How to put text in motion and manipulate many of its properties The ActionScript necessary to create, format, and provide interactivity through the use of text When to embed font outlines... original Flash approach, now called classic tweening, is covered here in Chapter 7 Chapter 8 delves into the new stuff To get the most out of animation in Flash, you should read both chapters, starting with this one As you’ll discover, you can use both models in the same movie You’ll learn enough in these chapters to help you comfortably choose which approach, or combination of approaches, works best for. .. Alt (Option) key, the transformation point acts as the fulcrum of your modifications, but using the key changes how the fulcrum is applied Because you’re dealing with shapes, you can even use the Free Transform tool’s Envelope and Distort options (shown in Figure 7-2), which aren’t available for symbols If you do, just be aware that things can quickly fall apart with such transformations unless you use... represents the artwork as it was before tweening changed it Drag the playhead back and forth, and you’ll see the tween 8 Right-click (Ctrl-click) anywhere between the two keyframes and choose Remove Tween The tween goes away 305 CHAPTER 7 9 Let’s try another tween Right-click (Ctrl-click) your frame span and choose Create Motion Tween Motion tweening is not supported for shapes, and Flash gives you an unmistakable... movieclip in the library Figure 7-5 Tweens other than the shape variety require symbols It’s nice that Flash does this for you, but generally speaking, you’ll want to decide on your own what sort of symbol to create: movieclip, graphic, or button Unfortunately, this automated process does the choosing for you Motion tweens are part of the new After-Effects–like tweening model you’ll learn about in Chapter... change the shape of those antennae? Shape tweens to the rescue! As you’ve seen, Flash can make some fairly stylish choices of its own in regard to the repositioning of anchor points Well, that’s true most of the time The earlier pepper rotation demonstrates that Flash s choices aren’t always what you might expect Fortunately, Flash provides a way to let you take control of shape tweens gone awry The solution... Shape tweens are for rearranging anchor points and animating gradients Classic tweens and motion tweens are for everything else, from enlivening text and imported photos to animating vector artwork drawn directly in Flash or imported from another application like Illustrator CS4 or Fireworks CS4 As we’ve said, we’ll cover motion tweening in Chapter 8 Here, we’ll continue with classic tweens only, but . have never used the spelling features of Flash CS4, you need to set up the spelling checker before you undertake your first spell check. Open a new Flash document and select Text ° Spelling. this chapter, you learned the following: How to add text to Flash The various text- formatting features available to you in Flash CS4 How to choose and work with static, dynamic, and input. spelling Let’s admit it: If we enter text, we will inevitably use the wrong spelling for a word or two. Flash CS4 contains a tool that checks the spelling of all of the text in a document. You