Formatting Text

[ LiB ]

Although Flash MX 2004 supports only a few HTML styles, you can do quite a lot with text colors, fonts, and even hyperlinks . In addition, Flash MX 2004 now supports most styles from Cascading Style Sheets (CSS). Finally, there's also an under documented feature to make your hyperlinks trigger Flash functions. This chapter covers all of these.

Using HTML Text

To populate a dynamic or input text field, you just set that field's text property as in fieldInstance_txt.text="some string" . (Notice that to trigger the code-completion hints, I named the instance with the suffix "_txt" that's part of the name , not some property.) Confusingly, field instances have both a text and an htmlText property. To use htmlText , the field must have its html property set to true (either with code, fieldInstance_txt.html=true , or by physically clicking the Render as HTML option in the Properties panel as Figure 5.1 shows).

Figure 5.1. The Properties panel has an option for HTML, although you can effectively click this button with the code htmlText=true .

The new TextArea and TextInput components offer a nearly identical interface (that is, the way you access and set data) plus a few additional features. The killer detail is that whereas regular text fields have both a text and an htmlText property, the components have only a text property. In either case, you'll want to set the html property to true if you plan to display formatted text.

It's best to keep your content free from any HTML formatting and just format at the time the text is presented onstage. That is, you want to keep separate the content from the display. Listings 5.1 and 5.2 start with the following unformatted data and then formatting is added when it gets displayed.

Listing 5.1. Cookie Recipe Raw Data

 1 recipe=new Object(); 2 recipe.title="Cookies"; 3 recipe. ingredients =["2 cups flour", "1 egg", 4 "1 stick of butter", "1 cup sugar"]; 5 recipe.directions="Beat egg, sugar, and butter\r"; 6 recipe.directions+="Mix into flour\r"; 7 recipe.directions+="Cook at 375 for 10 minutes"; 

There's really no particular reason that I put each separate ingredient in an array where each direction is a long string separated by return characters ("\r" which, could have just as easily been the constant newline outside the quotes). You can certainly reformat ingredients as a long string with join() or directions as an array with split() .

After you have the recipe object populated , you can use the following code (along with an onscreen dynamic text field named my_txt with nice tall and wide margins).

Listing 5.2. Displaying the Recipe in HTML Format

 1 var theObj=recipe; 2 var theField=my_txt; 3 theField.html=true; 4 theField.htmlText="<font size='24'>"+ 5 theObj.title+ 6 "</font><br>"; 7 var total=theObj.ingredients.length; 8 for (var i=0;i<total;i++){ 9 theField.htmlText+="* <i>"+ 10 theObj.ingredients[i]+"</i>"; 11 } 12 theField.htmlText+="<br>"; 13 theField.htmlText+=theObj.directions; 

The first two lines stuff the specific object and specific text field instance into the local variables theObj and 4 builds a string by wrapping theField . This occurs so that later the code can be more useful (and generic) as a function that accepts those two arguments. Anyway, line 3 ensures the field will accept HTML. Line 4 builds a string by wrapping <font> tags around the title property. Because the font size value (the string '24' ) is effectively a string within a string, I used single quotation marks, which is covered again later. The loop on lines 8 through 11 goes through the ingredients, placing an asterisk and then italic formatted text. Finally, the directions are dumped in at the end (line 13). Figure 5.2 shows the output.

Figure 5.2. A recipe formatted using HTML.

By the way, if you instead use a TextArea component, the same code will work if you change each instance of htmlText to read text .

You can actually do much more with HTML formatting, but the idea of putting text within tags is always the same. In line 4 of Listing 5.2, you may have noticed that I nested single quotation marks ( ' ) within a string that, itself, was surrounded by regular quotation marks ( " ). Sometimes you need to embed a regular quote mark within a string. All you need to know is that the backslash ( \ ) is called an escape character, meaning the character that immediately follows should be taken literally. For example, "This book is \"cool\"." results in: This book is "cool" . Just remember if you want a backslash to show up, you need twothe first one escapes the second one.

Another interesting oddity is that although Flash identifies hexadecimal values (for instance, for colors) with 0x as in 0xFFFFFF for whiteHTML and CSS use # (as in #FFFFFF ). The following example shows how you can color a portion of text:

 my_txt.htmlText="I'm <font color=\"#FF0000\">mad</font>"; 

By the way, I could have used single quotes around the hex value.

Note

Managing Escaped Quotations

Because such escaped text can be difficult to manage, I often store complex strings in variables, something like this:

 redText="<font color=\"#FF0000\">"; postText="</font>"; my_txt.htmlText="I'm "+redText+"mad"+postText; 

Using the img src Tag

A new feature supported in HTML text is the img src tag for embedding images or SWFs. Like regular HTML web pages, this means images and text flow around each other as shown in Figure 5.3.

Figure 5.3. Text fields can now display HTML with embedded imagesand text will flow around the image.

This feature is pretty easy: Just stick this form inside your html: <img src="some_image.jpg"> or <img src="some_movie.swf"> . In addition, a few tags such as width and height work just like HTML. In addition, you can use the id tag to give the image or SWF an instance name. You can then address that clip as if it were nested in your text field. Here's an example:

 my_txt.html=true; my_txt.htmlText="<i>My movie:</i>"; my_txt.htmlText+="<img src='movie.swf' id='myClip'>"; 

Then, to address the clip, say to set its alpha, use the following:

 my_txt.myClip._alpha=50; 

Although simple, the inclusion of img src is a really great way to present visuals along with your text.

Hyperlinks to Flash Functions ( asfunction )

You may be familiar with the HTML code a href used to create hyperlinks. This is supported in Flash as well. For example:

 my_txt.htmlText="Click <a href='http://phillipkerman.com'>here</a>"; 

Although this is cool and all, it's really no different from Flash's getURL() command. And that only enables you to navigate to a new web page. You also can use a href to invoke Flash functions (either built-in functions or homemade functions). This means you can trigger any homemade scriptnot just web navigationfrom what behaves like a regular-text hyperlink. It's called as function , and here's an example:

 my_txt.htmlText="Click <a href='asfunction:doFunction'>here</a>"; 

Assuming you have a function declared called doFunction() , the preceding link will trigger it (when the user clicks). You'll see in the "Processing and Displaying" listing at the end of the chapter that we use asfunction to trigger code that sorts and displays the results. Notice the parentheses you might expect in a function trigger don't appear in the htmlText (just doFunction not doFunction()) . This leads to the point that follows regarding passing parameters.

To pass parameters, you separate the function call (and any additional parameters) with commas:

 my_txt.htmlText="Click  <a href='asfunction:doFunction,param'>here</a>" 

In the preceding example, the string "param" is passed. If you want to pass a variable's value, you need to take it out from within the string:

 my_txt.htmlText="Click  <a href='asfunction:doFunction,"+myVar+"'>here</a>" 

(Again, because these concatenated strings can get pretty hairy, you'll definitely want to try to create variables to hold such involved strings.)

The asfunction technique is a great way to embed lots of clickable items into a block of text. Figure 5.4 shows an example from the real-time cattle auction site that I worked on.

Figure 5.4. Clicking lot numbers triggers a function that displays detailed information about cattle.

Using CSS (Cascading Style Sheets)

The new support for CSS formatting is sort of a cross between HTML formatting (discussed previously) and the TextFormat object (coming next ). It depends on whether you load an actual CSS file into Flash or you do all the formatting by hand inside Flash. I find it makes more sense to load CSS files and use htmlText because the formatting uses an existing standard (CSS and HTML). Because doing the formatting inside Flash (via the TextObject) offers more dynamic control, however, this chapter covers that as well.

Importing CSS Definitions

The coolest part about CSS support is that you can use your existing style sheets, provided the style is supported (because, like Flash's HTML support, not all properties are supported). However, the format of your CSS file matches the CSS standard of which you may be familiar. Here is a simple declaration that you can save in a file called my_styles.css:

 .headline { font-family: "Arial", "Arial"; font-size: 28px; color: #003399; } .main { font-family: "Arial", "Arial"; font-size: 12px; color: #000000; } 

Without turning this into a CSS book, let me explain that the preceding code defines the styles .headline and .main . (Notice that the period is part of the name as a matter of convention so that I don't accidentally overwrite a built-in function.)

Now all you need to do is load those definitions into your app and start formatting text by tagging with .headline and .main . That's two steps: Load, and then apply the format. As you'll learn in the next two chapters, when loading external data you can't expect to start using it immediately after requesting to load it that is, you have to wait for it to fully load. The form is "define what to do once it loads, then start loading." Listing 5.3 shows how you can import and then apply the CSS styles previously defined to a text field instance my_txt .

Listing 5.3. Importing and Displaying CSS Styles

 var my_css = new TextField.StyleSheet(); my_css.onLoad = function(success) { if (success) { displayText(); } else { trace("error loading"); } } my_css.load("my_styles.css"); function displayText () { my_txt.styleSheet = my_css; my_txt.htmlText = "<.headline>This is a headline</.headline><br>"; my_txt.htmlText + = "<.main>this is the main style</.main>"; } 

First I create the my_css variable into which I put an instance of the TextField StyleSheet object. That object has its onLoad event defined (to react when data is loaded), and then I commence loading (using load()) . Notice when the data does finally load, I trigger my function displayText() , which goes and assigns the styleSheet property of the text field, which finally gets populated in the last couple of lines.

So, CSS is pretty cool. You can even define a:hover for when the user rolls over a hyperlink. Check this out:

 //added to your my_styles.css file: a:hover{ font-family: "Arial", "Arial"; font-size: 12px; text-decoration: underline; color: #0000FF; } //then put this inside the displayText() function above: my_txt.htmlText+="<.main>click this <a href='#'>hyperlink</a>!</.main>"; 

Just replace # with an URL or asfunction if you want it to really do something. Also, if you set the my_txt's selectable property to false , the cursor won't flicker between an I-beam and finger. Keep in mind your a:hover tag should use the same font family size as text has normally. Now the <a> tag makes sense, and you can perhaps more fully understand how you can use CSS to mark up a lot of text in Flash.

Formatting CSS Inside Flash

Whereas I definitely like keeping CSS styles in an external file, there are a couple reasons to define the format inside Flash. First, it makes it easy to make modifications to text and styles while the movie plays. If you want to give users the power to select their font size (to take a simple example), there's no reason to define a bunch of variations of your style. Second, CSS style definitions within Flash use a convention that's nearly identical to the TextFormat object. You could argue this is both an advantage and disadvantage , because although you're not leveraging the CSS standards you are recycling Flash skills.

Whether you define the CSS inside Flash or in a CSS file, the last step is always the same: You set a text field's styleSheet property and then use your custom tag as with any HTML. It's the stage where you define the CSS that differs . Here's what it looks like first in CSS, and then in Flash:

 //inside a css file: .myTag { font-family: "Arial", "Arial"; font-size: 12px; color: #000000; } 1 //the equivalent but entirely inside Flash: 2 var styles = new TextField.StyleSheet(); 3 styles.setStyle(".myTag", 4 {fontFamily: 'Arial', 5 fontSize: '12px', 6 color: '#000000'} 7 ); 8 my_txt.htmlText="<.myTag>here it is!</.myTag>" 

Basically, you just make an instance of the TextField.StyleSheet() object. Then, you just define each style using the setStyle() method. Notice this method accepts two parameters: the name you'll use (as a string) and the properties you want to set in the form of a generic Flash object. Just like how your CSS file can have more tags, you can continue to execute the setStyle() method as many times as you want. Finally, line 8 just shows how you apply the style the same way you would using a CSS file.

At this point, the only advantage of defining the tags inside Flash is that you don't need to wait for a CSS file to fully load. However, earlier I said defining the style inside Flash makes it easier to reformat on-the-fly . What's cool is that after you assign a style to a text field's styleSheet property, any subsequent changes to the style are immediately reflected in the text! Here's an example that's exciting if only for the potential it offers:

 _root.onMouseDown = function() { styles.setStyle(".myTag", {fontFamily:'Arial, fontSize:'22px', color:'#000000'}); }; 

Obviously, you'll probably only want to change styles at key moments. For example, maybe the user presses a button and all the important words highlight. Creative and subtle use of this feature can prove really powerful.

Deciding whether to store your CSS inside Flash or as a separate CSS file is entirely up to you. To help decide which approach makes sense, consider these points:

• External CSS files remain in their native format. Therefore not only are you using a standard format, you also can recycle and use the same files elsewhere in your site.

• External CSS files must fully load before you use them, so there's an additional step you must follow.

• Internal (Flash-defined) styles are more closely aligned with ActionScript syntax. This includes the TextFormat object, which is discussed next.

• Internal styles also enable you to make changes at runtime. Although you could load two separate styles (using external CSS) and then reformat the text when you want to make a change, it's a little easier with internal styles.

Using the TextFormat Object

The good news about using the TextFormat object is that the process is nearly identical to using homemade generic objects. You create an instance and then start setting property values. However, you can only select from properties available to the TextFormat object. That is, you don't make up formatting properties at will (only set properties listed in Figure 5.5). The only thing that's weird is that after you create a TextFormat instance, nothing is seen until you apply the format to a particular field onscreen. So, the process is make a TextFormat object, set its properties, and then apply it to an onscreen text field.

Figure 5.5. The TextFormat object's properties should look familiar because most are common formatting terms.

Here's a quick example:

 my_fmt=new TextFormat(); my_fmt.font="Arial"; my_fmt.bold=true; 

At this point, the my_fmt instance is just floating around in memory. Not until you apply it to a text field onscreen will you see anything. Here's how you might do that:

 my_txt.setTextFormat(my_fmt); 

As long as there's a field onscreen called my_txt , this will change its format.

Often developers get messed up when they misuse setTextFormat() and setNewTextFormat() . That is, remember "new" will affect only the new text appearing in a field, whereas the regular setTextFormat affects what's already present in the field. Also, both methods accept up to three parameters. It's weird because no matter how many parameters you use, the last parameter is always the TextFormat object. If you want to format just a single character, you can pass an integer and then the format, as follows:

 my_txt.setTextFormat(2,my_fmt); 

Realize this changes just the third character because it starts counting with 0 (0, 1, 2, and so on). If you want to format a range of characters, you can pass two integers followed by the format, as follows:

 my_txt.setTextFormat(2,7,my_fmt); 

This formats the third through the eighth character.

So that's the TextFormat object in a nutshell ! It's comparable to using htmlText as shown in the preceding section. Personally, I find the TextFormat a bit unwieldy when I'm trying to format individual characters. Surely, it can be done, but I find it easier to think in "begin tag/end tag" terms. TextFormat objects are a more convenient way to store all the properties of a format. That is, I recommended storing gnarly HTML tags in variables...but even then, you'll end up with a lot of variables. You can store every attribute for a format in a single variable.

Listing 5.4 is a modified version of the code used earlierbut this example uses the TextFormat object rather than htmlText (assume the recipe object variable is already populatedas was done earlier):

Listing 5.4. Displaying the Recipe Using TextFormat Objects

 1 breakPts=[]; 2 3 theField.text=""; 4 theField.text+=recipe.title+"\r"; 5 breakPts.push({begin:0, 6 end:theField.length-1}); 7 8 total=recipe.ingredients.length; 9 for (var i=0;i<total;i++){ 10 theField.text+=recipe.ingredients[i]+"\r"; 11 } 12 breakPts.push({begin: breakPts[breakPts.length-1].end, 13 end:theField.length-1}); 14 15 theField.text+=recipe.directions; 16 breakPts.push({begin: breakPts[breakPts.length-1].end, 17 end:theField.length-1}); 18 19 title_fmt=new TextFormat(); 20 title_fmt.size=44; 21 22 ingredient_fmt=new TextFormat(); 23 ingredient_fmt.italic=true; 24 ingredient_fmt.bullet=true; 25 26 plain_fmt=new TextFormat(); 27 28 theField.setTextFormat(breakPts[0].begin, 29 breakPts[0].end, 30 title_fmt); 31 theField.setTextFormat(breakPts[1].begin, 32 breakPts[1].end, 33 ingredient_fmt); 34 theField.setTextFormat(breakPts[2].begin, 35 breakPts[2].end, 36 plain_fmt); 

The first 18 lines are nearly the same as the earlier example that used htmlText . However, I made an array called breakPts that gets populated with generic objectseach with a begin and end property. You see on lines 5, 12, and 16 I store where the most recent block of text begins and ends. To figure the beginning point, I reach into the array and find the previous object's end value (except for the first one, which I figure starts at index 0). The endpoints are always the current length of the field minus 1 (remember we start counting at 0). Finally, I create the three TextFormat objects on lines 19 through 26. I really didn't need line 26 (or 34 for that matter) because the plain_fmt is left at all the default values. Anyway, I end it all with the three setTextFormat() lines that each reach into the array and grab begin and end properties as needed. Figure 5.6 shows the result.

Figure 5.6. The TextFormat object produces results that are equivalent to HTML, although the bullets are unique.

You can see the most challenging part of using the TextFormat object is specifying which characters to affect. Also, I had to rearrange the code in the preceding example because it wouldn't work if I tried formatting the text before I was finished adding text. I just waited until I was done populating the text to format it, but I think it's worth mentioning that this sort of workaround is sometimes necessary.

Additional Layout Options

Ideas can be communicated many waystext is just one. Not only are movie clips containers inside of which you can display media and text placed manually, buton-the-flyyou can embed other clips, create text fields, and draw primitive shapes . The last few features explored in this chapter all enable you to create clips, text, or drawings on-the-fly:

• attachMovie() enables you to dynamically create clips (drag them from the library by using code). That is, you'll attach (think "put") one clip inside another. (Even if you're attaching a clip to the _root timelinethat's still a clip.)

• createTextField() enables you to create dynamic or input text fields on-the-fly.

• createEmptyMovieClip() enables you to create completely empty clips in which you draw or place other clips or text.

• The MovieClip object's drawing methods enable you to draw lines, curves, and filled shapes.

All four of these clip-, text-, and shape-generating features are methods of the MovieClip object, meaning you always precede with "someClipInstance." . Also, when using attachMovie() to grab clips out of the library, you need to set the linkage setting for that item in the library.

I want to walk through an example that uses all of these dynamic "media-generating" methods. Squeezing in the topic of Flash's drawing methods potentially makes this topic appear unimportant. It's one thing to say you can draw lines, curves, and optionally fill shapes with colorwhich is true. It's entirely different, however, to see when this can be useful. The idea of drawing graphs comes to mind immediately, and this is a great application for drawing. Figure 5.7 shows a plotting application that displayed student scores. In this case, I used code to draw all the lines (even the grid because that was dynamic). However, because the graphics on the endpoints were somewhat unique (appearing in four different variations), I used attachMovie() to pull those from the library. Finally, I used createTextField() for every label appearing on the graph.

Figure 5.7. Drawing methods and attachMovie() were used to create these dynamic graphs.

Although drawing graphs is interesting and can be challenging, you can build dynamic displays for the user in so many other situations. The following (arguably contrived) example exploits many of these dynamic layout controls to both explore them and to apply some of the skills developed over the previous few chapters. The following code dynamically draws a table that behaves similarly to the DataGrid component. This table displays text and column lines based on data in an array. Figure 5.8 shows the results.

Figure 5.8. Although it's not the same as the DataGrid component, we'll create these columns that the user can sort.

The code is listed here in two parts (the initialization in Listing 5.5, and then the processing and display in Listing 5.6). I'll walk through the code just to explain my approach. The main idea is not to step through each line, but to see all the pieces working together in an applied example.

Listing 5.5. Populating the Data

 1 content = []; 2 content.push({avail:true, name:"Apples", price:"0.70" }); 3 content.push({avail:true, name:"Oranges", price:"0.60" }); 4 content.push({avail:false, name:"Mangos", price:"1.50" }); 5 6 var propCount = 0; 7 for (var c in content[0]) { 8 propCount++; 9 } 10 cHeight = 10; 11 totalWidth = 200; 12 cWidth = totalWidth/propCount; 13 14 my_style = new TextField.StyleSheet(); 15 my_style.setStyle(".h", {fontFamily:'Arial', fontSize:'14px', 16 fontWeight:'plain', color:'#000000'}); 17 my_style.setStyle(".hb", {fontFamily:'Arial', fontSize:'14px', 18 fontWeight:'bold', color:'#000000'}); 19 my_style.setStyle(".r", {fontFamily:'Arial', fontSize:'12px', 20 fontWeight:'plain', color:'#333333'}); 21 my_style.setStyle(".rb", {fontFamily:'Arial', fontSize:'12px', 22 fontWeight:'bold', color:'#333333'}); 23 my_style.setStyle("a:hover", {textDecoration:'underline'}); 

The content array should look familiarjust an array full of objects. Then in lines 10 and 11, I define homemade variables cHeight (for column height) and totalWidth . To figure the cWidth (line 12), I first have to count how many properties are in each object. Lines 6 through 9 count the properties in the first slot of the array (which should match each item in the array). Then, I just define some styles: h for headline, hb for headline bold, r for regular, and rb for regular boldnormally I wouldn't be so cryptic, but I'm just trying to keep the rest of the code concise .

Listing 5.6. Processing and Displaying

 24 owner = this;//handle on main timeline 25 function doDisplay(sortOrder) { 26 //sort it: 27 content.sortOn(sortOrder,Array.CASEINSENSITIVE); 28 //local vars: 29 var c;//current column name 30 var cNum;//current column num 31 var r; //row num 32 var nl; //next level 33 var this_txt;//temp holder to address text 34 35 owner.the_mc.removeMovieClip(); 36 nl = owner.getNextHighestDepth(); 37 owner.createEmptyMovieClip("the_mc",nl); 38 owner.the_mc.lineStyle(2,0x000000,100); 39 cNum = 0; 40 for (c in content[0]) { 41 owner.the_mc.moveTo(cNum *cWidth,0); 42 nl=owner.the_mc.getNextHighestDepth(); 43 owner.the_mc.createTextField("c_txt"+cNum, nl, (cNum*cWidth), 0, 44 cWidth, cHeight); 45 this_txt = owner.the_mc["c_txt"+cNum]; 46 this_txt.styleSheet = my_style; 47 this_txt.selectable = false; 48 this_txt.autoSize = "center"; 49 this_txt.html = true; 50 if (sortOrder == c) { 51 this_txt.htmlText = "<a href='asfunction:doDisplay,"+c+"'>"+ 52 "<.hb>"+c+"</.hb></a>"; 53 } else { 54 this_txt.htmlText = "<a href='asfunction:doDisplay,"+c+"'>"+ 55 "<.h>"+c+"</.h></a>"; 56 } 57 for (r=0; r<content.length; r++) { 58 nl=owner.the_mc.getNextHighestDepth(); 59 owner.the_mc.createTextField(c+r,nl, 60 cNum*cWidth,(r+1)*cHeight, 61 cWidth,cHeight); 62 thisOne=owner.the_mc[c+r]; 63 thisOne.styleSheet = my_style; 64 thisOne.selectable=false; 65 thisOne.autoSize = "center"; 66 thisOne.html=true; 67 if (sortOrder == c) { 68 thisOne.htmlText="<.rb>"+content[r][c]+"</.rb>"; 69 }else{ 70 thisOne.htmlText="<.r>"+content[r][c]+"</.r>"; 71 } 72 } 73 owner.the_mc.lineTo(cNum*cWidth,(content.length+1)*cHeight); 74 cNum++; 75 } 76 owner.the_mc.moveTo(cNum*cWidth,0); 77 owner.the_mc.lineTo(cNum*cWidth,(content.length+1)*cHeight); 78 owner.the_mc.doDisplay = owner.doDisplay; 79 } 80 doDisplay("avail"); 

There's just one function, doDisplay() . It gets triggered once initially (line 80) and then whenever the user clicks a column head. That is, the column heads are formatted in lines 51 through 55 and include the asfunction . The variable c contains the actual column name text and it's used both as the parameter for the doDisplay() calls as well as the text being formatted (in either the <.hb> or <.h> styledepending on whether the column name matches the sortOrder in line 50).

To understand the loops , it helps to know what all gets created. Everything is created inside the clip the_mc created in line 37. Actually, line 35 removes it (provided it's already onstage from a previous sort). The point is additional text instances and lines get created inside this clip. Instead of tracking all these lines and text instances (to ensure they get removed), I just destroy the_mc which also destroys all the contained lines and text instances. Notice the extensive use of Flash MX 2004's new getNextHighestDepth() method (lines 36, 42, and 58). In the past you had to keep track of all level numbers with your own variables.

Line 40 sets up a loop thatfor as many items that content containsdraws the lines, creates the text blocks, and formats all text.

Finally, bracket reference is used in lines 45 and 62 because we're specifying clip names by dynamically building a string. This technique requires you to precede with the path to the object ( _root in this case). But that's hard-wired! Unfortunately, you can't just use the relative reference this because that would point to the doDisplay() function. So, a great solution is to set a variable to this somewhere outside any function (for instance, owner=this ), and then replace each instance of _root in the code with owner . (The use of owner in this way is common among Flash programmers.)

I wish we could continue with more examples of these layout options. I do think this last listing has been a good summary, however.

Remember that the drawing methods can do more than just create primitive shapes and lines. Even complex images are made up of lines and shapes. You may be interested to know that many of the new user interface components use drawing methods to create nearly everything you see onscreen. When you do venture into complex drawings, realize you can create building blocks of drawing functions. For example, you could make a function that accepts parameters for width, height, x and y, and then draws a rectangle. You just have to think from the inside out. Whether you're drawing shapes or creating text and clips, you have to take one step at a time.

[ LiB ]