Học Actionscript 3.0 - p 30 pot

Using the first line, the extra word, “new” will be red, bold, and underlined because that’s the format when the text was added.. If you find formatting text columns difficult using the

Trang 1

Using the first line, the extra word, “new” will be red, bold, and underlined

because that’s the format when the text was added Commenting out line 27

and using line 28, however, will remove all the red, bold, underline formatting

from the field because the field will revert to its default format

Tab Stops

Another handy feature made possible by the TextFormat class is tab stops If

you find formatting text columns difficult using the Flash Professional

inter-face, you’ll be relieved to find how easy it can be to create simple columns

with tab stops using ActionScript The next example uses the TextFormat

class to set two tab stops so that text including tab characters will line up at

these stops, forming columns See file text_format_4.fla to try this yourself.

Let’s get to the code The first 13 lines of this script include only previously

dis-cussed material—creating and configuring TextFormat and TextField objects

We didn’t include the tab stops in the format initially, because we want to show

you how to edit and use a TextFormat object after it’s been created Take a look

at the setup first, and then we’ll discuss the application of the tab stops:

1 var txtFmt: TextFormat = new TextFormat ();

2 txtFmt font = "_sans" ;

3 txtFmt size = 10;

4 txtFmt leading = 4;

5 txtFmt leftMargin = txtFmt rightMargin = 6;

6

7 var txtFld: TextField = new TextField ();

8 txtFld x = txtFld y = 20;

9 txtFld width = 400;

10 txtFld autoSize = TextFieldAutoSize.LEFT ;

11 txtFld border = txtFld background = true;

12 txtFld multiline = txtFld wordWrap = true;

13 txtFld defaultTextFormat = txtFmt;

Lines 14 through 17 populate the field, txtFld, which you just set up in lines 7

through 13 Notice the inclusion of the \t escape character in line 15 Its

back-slash prevents this character from being understood as the letter “t.” Instead,

it’s interpreted as a tab Another escape character, \n, appears in line 16 In this

case, the “n” is a new line character, moving the new text insert point down

to the next line in the field Therefore, each time through the loop, new text

is added on a new line

All we need to do now is add our tab stops to ensure that the columns line

up nicely These are applied in line 20, using an array of pixel values to

indi-cate the location of each tab stop We applied this property later, in line 20,

for demonstration purposes You may go back and edit a TextFormat instance

at any time After you make such a change, however, you must reapply the

format to the text field, as seen in line 21, for the change to be reflected in

the field

N OT E

As a nicety, Flash Professional will warn you that using the compound assign-ment operator (+=) is slower than using the appendText() method.

N OT E

At the end of this chapter, we’ll show you a way to create true column-based layouts using a new Flash Platform text technology Unlike simple tab-based columns, text using this technology can flow into columns, wrap from one col-umn to the next, and adjust when the text is changed.

Trang 2

14 for ( var i: Number = 0; i < 10; i++) {

15 txtFld appendText ( "product:\t" + String (i) + "\tin stock:\t"

16 + "yes\n" );

17 }

18 addChild (txtFld);

19

20 txtFmt tabStops = [120, 200];

21 txtFld setTextFormat (txtFmt);

Using Embedded Fonts

Up to this point, we’ve been using system fonts in our examples When a custom font is required, you must embed that font to ensure that it displays properly on all machines Embedding adds just enough vector information

to the SWF for the Flash Player to display the font, even if it’s not in a user’s operating system The embedding process has changed through the evolution

of Flash Professional, so we’ll cite versions where appropriate

Flash Professional CS3 and CS4

The first step to embedding a font in Flash Professional CS3 or CS4 is to create a new font symbol from the Library panel’s menu, seen in Figure 10-2

In the resulting Font Symbols Properties dialog—Figures 10-3 (CS3) and 10-4 (CS4)—choose the font and font style you wish to embed

Figure 10-2. Creating a new font from the Library menu (CS4 pictured)

In Flash Professional CS3, you select the bold, italic, or combination bold/italic styles by using the checkboxes below the font name (see Figure 10-3) In Flash Professional CS4, support for font families was introduced You select these styles using the font family’s dedicated bold, italic (oblique), or bold/italic font in the Style menu Older fonts that don’t have individual style variants may support the checkboxes for faux bold and italic found below the Style menu

N OT E

Flash Professional CS3 did not support

proper style fonts, instead decorating a

plain version of the font with faux styles

by strengthening or skewing the outlines

(for bold and italic, respectively)

Trang 3

Figure 10-3. Font Symbol Properties (CS3 pictured)

Each font symbol can style text in a preset manner only: plain, bold, italic, or

a combination thereof, and they can’t be combined at runtime So, to include

separate bold and italic font styles, for example, you need a font symbol for

bold and a font symbol for italic

As with other symbols, such as movie clips, we need to use a linkage class to

instantiate a font symbol So the name of the symbol itself should be useful

and descriptive, but need not follow any specific conventions When

creat-ing a linkage class, on the other hand (uscreat-ing the same Library menu shown

in Figure 10-2), the class name should follow the same naming conventions

applied to other classes throughout earlier chapters For example, the name

should contain no spaces and start with a capital letter Figure 10-4 shows a

class name for the font symbol in the exercise we’re building, VerdanaPlain

Figure 10-4. Font Symbol Properties (CS4 pictured)

Trang 4

In both Flash Professional CS3 and CS4, the Linkage information can be found in the Font Symbol Properties dialog, accessed from the Library menu after the Font symbol has been created

Flash Professional CS5

The process for embedding fonts in Flash Professional CS5 has been improved and simplified All of the steps discussed in the CS3/CS4 section are accessed in one dialog box in version CS5 This dialog box is accessed by the Text→Font Embedding menu command Figure 10-5 shows the Options tab of this dialog box At the top, selecting a font is similar to the process used

in CS4, choosing a name, picking a family, and selecting a style

As of CS5, however, you can specify which glyphs (characters) should be embedded with the font, just like you can when you embed fonts into a spe-cific text field using the Flash Professional Properties panel This allows you

to select only a subset of the glyphs in a particular font family, which reduces file size In Figure 10-5, only uppercase, lowercase, numerals, and punctuation characters are being embedded

Figure 10-5. Flash Professional CS5’s Font Embedding dialog, showing the Options tab

Trang 5

Next to the Options tab in the dialog box is the ActionScript tab, as shown in

Figure 10-6 Under this tab, you can export for ActionScript use and set a

link-age class name, as is possible in previous versions of Flash Professional At the

top of this dialog box, you’ll notice an Outline format section with options

for Classic and TLF text Classic text includes dynamic and input text fields,

and TLF is a new text field type that stands for Text Layout Framework,

which we’ll discuss at the end of the chapter If you embed an OpenType or

TrueType font, you can choose the appropriate outline format for the kind of

field you intend to use: Classic for Classic text fields, and TLF for Text Layout

Framework fields

Figure 10-6. A detail of the ActionScript tab from Flash Professional CS5’s Font

Embedding dialog

Regardless of which version of Flash Professional you use, you end up with

the same thing at this point: a Font Symbol that can be instantiated at

run-time using ActionScript

ActionScript

Once your symbol has been embedded and given a linkage name, you’re

ready to use it in a TextFormat instance The following code, found in the

embed_font.fla source file, uses embedded fonts and the VerdanaPlain font

symbol created in the previous sections Line 1 instantiates the font symbol,

and line 4 applies the embedded font to the font property of the text format

Trang 6

This is a very important step because it can be counterintuitive You can’t set the property to the class or instance reference from line 1, and you can’t use

a string, like “Verdana.” You must specify the fontName property of the font symbol instance Finally, line 14 sets the embedFonts property to true

1 var verdanaPlain: Font = new VerdanaPlain();

2

4 txtFmt font = verdanaPlain fontName ;

5 txtFmt size = 8;

6 txtFmt bold = true ;

7

12 txtFld text = "Hello World!" ;

13 txtFld.selectable = false;

14 txtFld embedFonts = true ;

Using Custom Anti-Aliasing

Once you use an embedded font, you can take advantage of custom anti-aliasing options By setting the antiAliasType property to ADVANCED using the

AntiAliasType class, you can control the thickness of the text (using a range

of –200 to 200, thinner to thicker) and its sharpness (using a range of –400 to

400, blurrier to sharper) Custom anti-aliasing can be used on any type size and is one way to achieve an effect that is more pronounced than a plain font, but not quite as strong as a bold font It’s also good for softening the edges

of fonts to better meld with background art, and it’s particularly useful for improving the legibility of small type sizes

The following code, when added to the example in the prior section, will adjust the text to maximum thickness and a little less sharp This adaptation

is found in the embed_font_custom_anti-alias.fla source file.

1 txtFld antiAliasType = AntiAliasType.ADVANCED ;

2 txtFld thickness = 100;

3 txtFld sharpness = -100;

Formatting with HTML and CSS

The TextFormat class is great for case-by-case uses But managing a large

ActionScript project this way might become unwieldy if several formats are required and all must be manually applied An alternative to this approach is

to use HTML and CSS to style the project globally

N OT E

Although it may sound strange, assets

are often easier on the eye when their

edges are softened a bit It’s quite

com-mon, for example, to apply a very slight

blur to shapes, text, and even video

(during the compression process) There

are a few ActionScript features that will

do this for you automatically, such as

the image smoothing option, which will

soften images by a preset amount.

How different people see text is too

var-ied to rely on a single preset of this kind,

so ActionScript’s custom anti-aliasing

features allow you to tweak the

appear-ance of the text to your liking.

N OT E

This material assumes you are familiar

with HTML and CSS For more

infor-mation, see http://en.wikipedia.org/wiki/

HTML and http://en.wikipedia.org/

wiki/CSS for background and additional

resource links.

N OT E

The embed_font_custom_anti-alias_

click.fla source file adapts this further

by toggling between custom anti-alias

settings with a mouse click It applies

a subtle setting to show the improved

legibility that custom anti-aliasing can

bring to small font sizes.

Trang 7

Hypertext Markup Language (HTML)

Flash supports a limited subset of HTML tags, as seen in Table 10-1

Table 10-1. The HTML tags supported by Flash Player

 Supported attributes include: color, face, size.

 Bold version of font must exist to work.

 Italic version of font must exist to work.

 Underlines text.

 Supported attributes include: class.

 multiline must be enabled to work; supported attributes include: align and class.

 multiline must be enabled to work.

<li> All lists are bulleted; ordered and unordered qualifiers are ignored.

<img> Supported attributes include: src, width, height, align, hspace, vspace, and id; can embed external

images (JPG, GIF, PNG) and SWF files with automatic text flow around the images.

<a> Supported attributes include: href and target.

<textformat> Used to apply a limited subset of TextFormat properties to text; supported attributes include:

blockindent, indent, leading, leftmargin, rightmargin, and tabstops.

To use HTML in a text field, you need only switch from using the text

prop-erty to using the htmlText propprop-erty For example, the following code will put

the word “ActionScript,” in bold, into a text field:

txtFld htmlText = "ActionScript" ;

If you are seeing unexpected results, you should look closely at Table 10-1 for

anything that might vary from what you have written, and to ensure

Flash-specific requirements have been fulfilled for a particular tag to function For

example, it should make sense that line breaks (through use of or  

tags) require a multiline field, because you can’t have a line break if more

than one line isn’t supported However, it may not be obvious that <ol> and

<ul> have no effect on list items, resulting in bullets for all lists.

CSS

ActionScript also supports a limited subset of CSS properties, as seen in

Table 10-2 Style sheets require a bit more setup than just using the htmlText

property to populate fields We’ll begin by demonstrating how to create style

objects with code, and then the last section of the chapter will describe how

to load both the HTML and CSS data from external files

N OT E

The efficient appendText() method does not work with HTML, so you must use traditional compound addition (+=)

to append HTML text to a field.

Trang 8

Table 10-2. The CSS properties supported by Flash Player

display display Controls display of an item Values include: none, block, and inline font-family fontFamily Font name in comma-separated list to indicate priority; device fonts

also supported using the following conversions: mono = _typewriter, sans-serif = _sans, and serif = _serif.

font-style fontStyle Font style Values include: italic and normal.

font-weight fontWeight Font style Values include: bold and normal.

kerning kerning Turns kerning on or off Value can be true or false.

leading leading Number of pixels added after each line A negative value condenses the

space between lines

letter-spacing letterSpacing Specified in pixels.

margin-left marginLeft Specified in pixels.

margin-right marginRight Specified in pixels.

text-align textAlign Aligns text Values include: left, right, center, and justify.

text-decoration textDecoration Underlines text Values include: underline none.

text-indent textIndent First-line paragraph indent specified in pixels.

The process of building a style sheet involves creating an instance of the

StyleSheet class, and then adding styled objects for each tag or class to the

instance For each tag or class, you create a custom object to which the rel-evant CSS properties are added Once complete, each object is associated with the tag or class and added to your style sheet using the setStyle() method

In the following example, seen in html_css.fla, line 1 creates the style sheet,

lines 3 through 21 create styles for the body HTML tag, heading CSS class, byline CSS class, and a (anchor) HTML tag respectively Finally, lines 23

through 26 add each style to the css instance of the StyleSheet class

1 var css: StyleSheet = new StyleSheet ();

2

3 var body: Object = new Object ();

4 body fontFamily = "Verdana" ;

5 body textIndent = 20;

6

7 var heading: Object = new Object ();

8 heading fontSize = 18;

9 heading fontWeight = "bold" ;

10 heading textIndent = -20;

11 heading letterSpacing = 1;

12 heading color = "#FF6633" ;

13

14 var byline: Object = new Object ();

15 byline fontSize = 14;

16 byline fontStyle = "italic" ;

17 byline textAlign = "right" ;

Trang 9

19 var a: Object = new Object ();

20 a color = "#990099" ;

21 a textDecoration = "underline" ;

22

23 css setStyle ( ".heading" , heading);

24 css setStyle ( ".byline" , byline);

25 css setStyle ( "body" , body);

26 css setStyle ( "a" , a);

The remainder of the script creates and sets up a text field, and then

popu-lates it with HTML Remember, the appendText() method will not work

when using the htmlText property Instead, you must use the compound

assignment operator for addition

More importantly, however, we must stress that the style sheet must be

applied before the HTML is added to the field If you don’t follow this rule,

the style sheet won’t be applied In this example, the style sheet is applied in

line 33, before the HTML is added to the field beginning at line 34

31 txtFld multiline = true ;

32 txtFld wordWrap = true ;

33 txtFld styleSheet = css;

34 txtFld htmlText = "<body>" ;

35 txtFld htmlText += "ActionScript 10.0 Adds

Time Travel " ;

36 txtFld htmlText += "by Walter Westinghouse</

span> " ;

37 txtFld htmlText += "January 1, 2015 The rumors swirling around

the tech community recently have been confirmed today as lead Flash

Player engineer, Dr Eldon Tyrell, announced that ActionScript 10.0

will support time travel Ever since the concept of time travel was

popularized by H G Wells in 1895, humans have yearned for the

ability to travel through time, and now it's a reality. " ;

38 txtFld htmlText += "Flash Player QA lead Roy Batty, agreed

\"We're happy to add this feature to human BioChips everywhere using

the standard Express Install Opt-In process Flash Player has long

been a leader in bringing immersive experiences to humans Just

search <a href=\"http://www.google.com\" target=\"_blank\">Google</

a> for your favorite feature and you'll likely find that it's

supported.\" " ;

39 txtFld htmlText += "Users of the antiquated \"desktop computing\"

model can't take advantage of this feature, nor can users of the

recently standardized HTML5." ;

40 txtFld htmlText += "</body>" ;

Escaping quotation marks

Finally, note that lines 38 and 39 contain quotes within quotes This would

ordinarily be a problem because the second quotation mark would balance

the first quotation mark and close a string Typically, prematurely closing a

Trang 10

string will cause a syntax error of some kind, but it virtually always results

in unexpected behavior

However, this file has no problem because the nested quotes have been escaped just like the tab and new line characters in the “Tab Stops” section of this chap-ter The backslashes, when used as part of a string, prevent the characters from functioning like quotation marks and make them behave instead like any other character It’s also possible to nest single quotes within double quotes when a double-quote is not required This is demonstrated in lines 35 and 36

Triggering ActionScript from HTML Links

In addition to supporting standard HTML links, ActionScript can trigger functions from anchor tags Simply replace the Internet protocol http:// with

event: and ActionScript will fire a TextEvent.LINK event that can trigger a

listener function

The following example, seen in text_event_link.fla, shows both a conventional

http:// link and ActionScript event: link in action The traditional link is in

line 10 The ActionScript event: link is in line 12 The link is still constructed using the anchor tag and href attribute but, instead of pointing to a URL, a

string is specified—in this case, “showMsg.” An event listener is added to the field in line 11, listening for the TextEvent.LINK event

When a user clicks the conventional link, the normal behavior ensues auto-matically Flash Player launches or switches to the default browser and navi-gates to the site However, when the user clicks the “Show Message” link, the listener traps the event and calls the linkHandler() function, passing the link information into the argument To demonstrate one way to handle many links,

a conditional queries the text passed in from the event If the incoming text matches a specific string, the listener traces a message to the Output panel

2 txtFmt size = 18;

3 txtFmt bullet = true ;

4 txtFmt color = 0x990099;

5

8 txtFld multiline = true ;

10 txtFld.htmlText = "<a href='http://www.google.com'>Search</a>";

11 txtFld.htmlText = " ";

12 txtFld.htmlText += "<a href='event:showMsg'>Show Message</a>";

13 txtFld addEventListener ( TextEvent.LINK , linkHandler,

14 false , 0, true );

16

17 function linkHandler(evt: TextEvent ): void {

18 if (evt text == "showMsg" ) {

19 trace ( "Dynamic links are useful" );

20 }

21 }

N OT E

If you are familiar with prior versions of

ActionScript, the event: protocol

replac-es the asfunction: protocol.

Tiêu đề	Formatting Text
Trường học	University of Information Technology
Chuyên ngành	Computer Science
Thể loại	bài giảng
Năm xuất bản	2023
Thành phố	Ho Chi Minh City

Định dạng
Số trang	10
Dung lượng	4,99 MB