Tài liệu Foundation Flash CS5 For Designers- P8 pdf

TEXT 329 Figure 6-14. TLF Text puts some powerful typographic tools in your hands. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 6 330 Figure 6-15. Classic Text is how text was formatted in previous versions of Flash. Now that you are able to distinguish between the two methods of text handling, you can turn your attention to the three types of text that both work with. Once you understand this concept, then you can start playing with text. Types of text If you select Classic Text in the Properties panel and open the Text Types drop-down, you will be presented with three ways to classify text on the stage: Static, Dynamic, and Input. Select TLF Text and do the same thing, and your choices are Read Only, Selectable, and Editable. In a sense, Dynamic, Input, Selectable, and Editable are actually the same thing, but that only matters in terms of ActionScript. In relation to the Properties panel, static and read-only text fields contain text that won’t be edited after the SWF is published, dynamic text fields contain text that will (or can), and input text fields contain text that is entered by the user. Each classification carries its own characteristics, much of which is shared among all three. Let’s get to our penmanship! From this point onward in this chapter, we are going to work with the TLF feature rather than Classic Text. This is not because TLF is so “cool.” It is strictly because TLF is so new that dealing with both Classic and TLF text would require more than one chapter in the book. This book was purchased by flashfast1@gmail.com www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. TEXT 331 Read-only text properties Read-only text is the least powerful sort of text in Flash, but don’t let its humble nature fool you. If you’re into racing, it’s also true that horses run slower than cheetahs, but why split hairs? As with most other tools in the Tools panel, the Properties panel, shown in Figure 6-16, controls text field properties in a big way, so let’s take a look at each configurable item outside of the already familiar Position and Size properties. Figure 6-16. The Properties panel and read-only text www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 6 332 Character properties The following properties are in the Character category:  Family: This lets you select from the list of fonts installed on your computer. With static text, in most cases, font outlines are included with the SWF. For that reason, it doesn’t matter whether your audience has the same font installed. The only exception is when you use the first three device fonts (the ones with the underscores). This setting marks the first of many that may be applied more than once, and in various ways, in the same text field. TLF Text does not support PostScript Type 1 fonts. It only supports TrueType and OpenType fonts. If you choose a PostScript font, Flash will substitute the PostScript font for a device font such as _sans.  Style: Most typefaces contain Regular, Bold, Italic, and other variants. To apply a style to the whole text field, choose the Selection tool, click the text field, and then make your selection. To apply a style to individual words or characters, use the Text tool to select the text field, highlight the desired glyphs, and then select the desired variant. Bold and italic versions of the chosen font must exist on your computer for this styling to occur. The Style drop-down menu replaces the B and I buttons traditionally used to specify bold or italic variants. It also groups the font families. Prior to this release, each font was its own entry in the Font drop-down list. If you are a font junkie, this resulted in a font list that seemed to stretch for meters. Now the variations of the font, such as the Italic shown in Figure 6-16, are in one neat, tidy package.  Size: This sets the selected font’s size, in points. Multiple font sizes are allowed within the same text field. The scrubber ranges from 8 points to 96 points, but you may type in other values directly, anywhere from 0 (invisible) to 2,500 (jaw-droppingly way huge). This includes noninteger values, such as 12.75. In cases between 1,800 points and 2,000 points, the glyphs of most fonts “jump outside” the bounding box of their text fields, but this doesn’t seem to affect text rendering; it merely makes the text field harder to select.  Leading: This determines the uniform distribution of space between lines of text. The higher the number, the wider apart the lines, and vice versa. You get to choose between specifying leading as a percentage of the type size or as points. For example, you can choose to add 2 points or 20 percent leading to 10-point text. Be careful with this because the values between the two option scan be different.  Color: Want fuchsia text? Here’s where to make that statement. Multiple colors are allowed within the same text field.  Highlight Color: Think of this as being able to choose the color of a highlighter pen. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. TEXT 333  Tracking: Also known as letter spacing, this value determines the uniform distribution of space between glyphs. The higher the number, the wider apart the characters, and vice versa. If you want, you can even squish letters together by using a negative number. Typographers have a term for this: crashing text. Multiple Letter Spacing settings may be applied to the same text field.  Auto kern: This check box toggles auto-kerning. What is kerning? This is in the same ballpark as letter spacing, except kerning refers to individualized spacing between pairs of glyphs. Consider the capital letters A and V: the bottom of the A’s right side extends out, which fits neatly under the “pulled-in” bottom of the V. Kerning reduces the space between these and other glyphs that “fit together” in this way, which tends to provide greater visual balance.  Anti-alias: Flash Player 8 introduced a number of new visual effects, and one of those was improved text rendering. This enhancement lives on in Flash Player 10, the player that corresponds to the default publish settings for Flash CS5. You have three anti-aliasing choices for font rendering:  Use device fonts: This relies on the user having your chosen font installed. Unlike the three device fonts mentioned earlier (_sans, _serif, and _typewriter), this setting uses exactly the font you specify—provided it is available on the computer playing the SWF file. If not, Flash makes the choice.  Readability: New since Flash 8, this format improves readability of small- and regular- sized fonts. Text animates smoothly because alignment and anti-aliasing are not applied while the text animates (it is reapplied when animation stops). This advanced anti-aliasing is not supported in Flash Player 7 or earlier SWFs, in skewed or flipped text (rotated is OK), in printed text, or in text exported as PNG. Under these circumstances, the normal anti-aliasing (Anti-alias for animation) is applied.  Animation: This provides normal text anti-aliasing. Glyphs appear smooth (no jaggies) and may be applied to text fields in older versions of Flash Player.  Rotation: You get three choices: Auto, 0, and 270. This feature is not exactly what you would assume it is used for. It is to be used where there is a combination of Roman and Asian text where characters must be rotated to display properly in a vertical layout. Referred to as tate-chu- yoko (also called kumimoji and renmoji), this feature makes it easier to read half-width characters such as numbers, dates, and short foreign words in vertical text.  Underline, Strikethrough, Superscript, and Subscript: Select a word or glyph, and click one of these buttons to apply these styles. To see a Read Only text field in action, start a new Flash document, select the Text tool, choose TLF as the Text type in the Properties panel, and click somewhere on the stage. Type your name. Select the second letter of your name by dragging the mouse from one side of the letter to the other. Change the font. Select the third letter, and change the font again. Not ice that the text field automatically widens as you type. The indicator for this is the little white circle in the bottom-right corner of the text field, as you can see in Figure 6-17. If you keep typing, the text field will www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 6 334 eventually extend past the stage and off into the wild blue yonder. To set a specific width, which causes text to wrap, hover over that white circle until you see the double-headed arrow cursor. Click and drag to the desired width. The white circle turns into a white square. To switch back to auto-widen mode, double- click that square. Figure 6-17. A white dot tells you the text field will widen as you type. Advanced character properties These choices, with one exception, are new to Flash CS5. Here’s what they do:  Link and Target: These settings, which have been around for a very long time, allow you to create hyperlinks inside text fields. Either select the whole text or use the mouse to select individual glyphs or words, and then type a URL into the Link field (such as http://www.VisitMe.com/). Entering anything at all into the Link field activates the Target field below it, which gives you the same four choices available to HTML anchor tags (<a>):  _blank: Opens the URL in a new browser window.  _parent: Opens the URL in the parent frameset of an HTML frameset (this assumes the SWF is embedded in an HTML page that appears in multiple framesets).  _self: Opens the URL in the same window or frame as the current HTML document that holds this SWF. This is the default behavior.  _top: Opens the URL in the topmost window of a frameset, replacing the frameset with the new URL. Hyperlinks in the Link field do not change the appearance of the text in any way, even though a dashed line appears under hyperlinked text during authoring. This differs from HTML hyperlinks, which are traditionally differentiated by an underline and a change in color. Flash hyperlinks are primarily meant for www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. TEXT 335 loading HTML documents, which may or may not contain additional Flash content. As a general rule, this is not the place to load external SWFs into the current movie.  Case, Digit Case, Digit Width: These three choices allow you to format numbers. When used with OpenType fonts (the ones with an O in the Family drop-down) that offer both lining and oldstyle numbers, you choose the style to apply in the Case drop-down and whether to use proportional or tabular numerals using the Digit Case and Digit Width options in their respective drop-down menus. So, how does all of this work? Oldstyle figures, shown in Figure 6-18, are a type of numeral, which approximates lowercase letterforms by having an x-height and varying lengths in their ascenders and descenders. They are considerably different from the more common “lining” (or “aligning”) figures shown in Figure 6-18 that are all-cap height and typically monospaced in text faces so that they line up vertically on charts. Oldstyle figures have what is considered to be a traditional, classic, almost calligraphic look. They are available only for certain typefaces, sometimes as the regular numerals in a font, but more often within a supplementary or expert font. The figures are proportionately spaced, eliminating the white spaces that result from monospaced lining figures, especially around the numeral one. Figure 6-18. The fundamental differences between oldstyle and lining numerals are evident in the numbers 4 and 7.  Ligatures: This moves into the realm of advanced typography for people new to the subject. Ligatures are typographic replacement characters for certain letter pairs, such as fi and fl, when they are available in a given OpenType font. With OpenType fonts, when you choose Common from the Ligatures drop-down menu, you will see the standard ligatures built into the font, as determined by the font designer. However, some fonts, such as Hypatia Pro, shown in Figure 6-19, include more ornate, optional ligatures, which can be produced when you choose the Minimum, Uncommon, or Exotic Ligatures options. As you can see from Figure 6-19, the ligature style chosen tends to tighten up or appear to condense a line of text. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 6 336 Figure 6-19. A selection of ligatures and how the various Ligature options affect the ligatures  Break: You can prevent words from breaking at the end of lines—for example, proper names or words that could be misread when hyphenated. You can also keep multiple words or groups of words together—for example, clusters of initials and a last name. To use the options in the drop- down menu, select the word or group of words you don’t want to break and select an option. Be very careful with this option. If you apply the No Break choice to too many adjacent characters, the text may wrap in the middle of a word.  Baseline Shift: Select a range of letters or an entire line of text, and by changing the value, the selection moves above or below the baseline. The drop-down menu allows you to choose points or a percentage for the amount as well as to treat the selection as superscript or subscript text.  Locale: This has absolutely nothing to do with spelling or localization. The language chosen will set the typographic rules that apply to the language chosen. Paragraph properties These are the Paragraph properties:  Align Left, Align Center, Align Right, Align Justify: These buttons in the Format area only make practical sense when applied to fixed-width text fields. In cases where your words wrap, this determines how they do it. Align Left means the left edge of your lines of text will be even. Align Center means your lines will be centered inside the text field. Align Right means the right edge will be even. Align Justify means both the left and right edges will be even. The four justification buttons to the right let you determine how the last line or word of a paragraph will be justified. Different alignments may be applied to each line of text in a text field.  Margins: Scrub across these values, and you can add space to the right and the left of a text block. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. TEXT 337  Indent: Select the first line of a text block and scrub across the indent value, and the selection will move inward (positive values) or outward (negative values).  Spacing: Scrub across the spacing values to add spacing between paragraphs to the top or bottom line of the paragraph. This adds space between paragraphs to make the text look less cramped.  Text Justify: Your two choices are word and letter spacing if text is to be justified. Letter spacing spreads all the letters out across the text block. Word spacing adds the space between the words. Both are dangerous choices, and our advice is to apply text justification with care and to keep the added spacing between words or letters to a minimum. Container and flow If any one aspect of text management in Flash hits the proverbial “sweet spot,” this just may be it. This feature of the Text Layout Framework allows you to create multicolumn text and flow text between the columns. The really neat thing is you can create your own columns or break a single text box into multiple columns. Here’s how: 1. Open the Containers.fla document in your Chapter 6 Exercise folder. When it opens, you will see a text block containing the first three paragraphs that opened this chapter. 2. Select the Selection tool, click the text block to select it, and, in the Properties panel, twirl down the Container and Flow options, as shown in Figure 6-20. Figure 6-20. A single block of text is about to become a single block of multicolumn text. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 6 338 3. Open the Behavior drop-down. The three choices—Single Line, Multiline, and Multiline no break—determine how the text will flow within the text box. Select each one, and see what it does. When you finish, make sure you have Multiline selected. 4. Double-click the hot text in the Columns category, and enter 2. Press the Enter key, and the text is now in two columns. Notice, too, that the Gutter Width now sports a value of 20 pixels. This value is the space between the columns. 5. Click the Link icon in the Padding area to apply the changes uniformly. Scrub across the Left padding hot text to see how padding affects the flow of the text in the columns. 6. Click the Stroke and Fill color chips, and select different colors. A stroke color is added to the edge of the text box, and you can scrub across the hot text to make the stroke thicker or thinner. The fill choice fills the text box or container. Set both the Stroke and Fill colors to None. 7. The final area is 1st Line Offset, and the drop-down menu offers you a variety of choices ranging from manually setting a value to letting the software handle the duties for you. If you select pt from the drop-down menu and scrub across the hot text, you will see the top line of each column move down. This should tell you this feature lets you set the distance between the top edge of the container and the text. When you finish, select Auto from the drop-down. 8. Select File ➤ Revert to revert to the original one-column version of this file. Now that you have had a chance to try this new feature, let’s explore another, even cooler aspect of working with columns in Flash. If you are familiar with InDesign or even QuarkXPress, you are quite aware of how multicolumn text is created. You draw out the text boxes, add some text, and then link them together. When you do this, all of the text in that first column flows into the other linked columns. This is exactly how it now works in Flash. Let’s give it a try: 9. You should have the Containers.fla file open. Click the Selection tool, and click the text box. The text box or container sports those familiar handles. 10. Click the bottom-center handle of the text box, and drag it up to a point just under Robert Bringhurst in the text block. When you release the mouse a red box, the Flow icon shown in Figure 6-21, appears on the left edge of the text box. This tells you that there is more text in this text block than you see. Figure 6-21. The location of that red Flow icon tells you there is more text below the last line. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... 6 Import statements for this exercise These are the import statements for this exercise: import flashx.textLayout.elements.Configuration; import flashx.textLayout.formats.TextLayoutFormat; import flashx.textLayout.formats.TextAlign; import flashx.textLayout.elements.TextFlow; import flashx.textLayout.elements.ParagraphElement; import flashx.textLayout.elements.SpanElement; import flashx.textLayout.container.ContainerController;... Configuration(); var charFormat:TextLayoutFormat= new TextLayoutFormat(); 346 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark TEXT charFormat.fontFamily= "Arial, Helvetica,_sans"; charFormat.fontSize = 14; charFormat.color = 0X000000; charFormat.textAlign = TextAlign.LEFT; config.textFlowInitialFormat = charFormat; Nothing new here The container for the text is... Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark CHAPTER 6 Import statements used for this exercise These are the import statements used for this exercise: import flash. display.Sprite; import flashx.textLayout.container.ContainerController; import flashx.textLayout.elements.Configuration; import flashx.textLayout.formats.TextLayoutFormat; import flashx.textLayout.formats.TextAlign;... used for this exercise The following are the import statements used for this chapter: import flash. display.Sprite; import flashx.textLayout.container.ContainerController; import flashx.textLayout.container.ScrollPolicy; import flashx.textLayout.elements.Configuration; import flashx.textLayout.edit.EditManager; import flashx.undo.UndoManager; import flashx.textLayout.formats.TextLayoutFormat; import flashx.textLayout.formats.TextAlign;... purchase PDF Split-Merge on www.verypdf.com to remove this watermark TEXT Figure 6-27 Text can be used to initiate events on the Flash stage Import statements for this exercise These are the import statements for this exercise: import flash. display.Sprite; import flashx.textLayout.container.ContainerController; import flashx.textLayout.elements.Configuration; import flashx.textLayout.formats.TextLayoutFormat;... key twice, and let’s format the text going into the container: var charFormat: TextLayoutFormat = new TextLayoutFormat(); charFormat fontFamily = "Arial,Helvetica,_sans"; charFormat.fontSize = 14; charFormat.lineHeight = "160%"; charFormat.color = 0x000000; charFormat.textAlign = TextAlign.LEFT; config.textFlowInitialFormat = charFormat; That fourth line is new One of the TLF Character properties in... flashx.textLayout.formats.TextLayoutFormat; import flashx.textLayout.elements.TextFlow; import flashx.textLayout.elements.ParagraphElement; import flashx.textLayout.elements.LinkElement; import flashx.textLayout.elements.SpanElement; import flashx.textLayout.events.FlowElementMouseEvent; import fl.transitions.Tween; import flashx.textLayout.formats.TextDecoration; import fl.transitions.easing.Elastic; import flashx.textLayout.formats.TextAlign;... flashx.textLayout.formats.TextAlign; import flashx.textLayout.elements.TextFlow; import flashx.textLayout.events.TextLayoutEvent; import flashx.textLayout.elements.ParagraphElement; import flashx.textLayout.elements.SpanElement; import flash. events.MouseEvent; 359 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark This book was purchased by flashfast1@gmail.com... flashx.textLayout.formats.TextLayoutFormat; import flashx.textLayout.formats.TextAlign; import flashx.textLayout.elements.TextFlow; import flashx.textLayout.elements.ParagraphElement; import flashx.textLayout.edit.EditManager; import flashx.undo.UndoManager; import flashx.textLayout.formats.TextDecoration; import flashx.textLayout.elements.LinkElement; import flashx.textLayout.elements.SpanElement; Checking spelling We’ll admit... charFormat.fontSize = 14; charFormat.color = 0x000000; charFormat.textAlign = TextAlign.LEFT; charFormat.paddingLeft =100; charFormat.paddingTop = 100; The TextLayoutFormat class, as we said earlier, is how the text in a container is formatted The properties in this class affect the format and style of the text in a container, a paragraph, or even a single line of text In this case, we are telling Flash which fonts . var charFormat:TextLayoutFormat = new TextLayoutFormat(); charFormat.fontFamily = "Arial, Helvetica, _sans"; charFormat.fontSize = 14; charFormat.color. statements for this exercise These are the import statements for this exercise: import flashx.textLayout.elements.Configuration; import flashx.textLayout.formats.TextLayoutFormat;