| In this section you'll add text to the project 1 section that will describe the artwork being shown. Director has two kinds of text members that are available for use in your projects: text and field members. Text can also be imported from a file. You can import plain text, rich text documents, even HTML documents, but you can't import or use images that might be present within the HTML. Depending on the project you may to choose to use one type or the other, or both. The main difference between text and field cast members is that text members can be anti-aliased, and can contain more advanced formatting information. Field members are great for displaying large amounts of text that doesn't need to be anti-aliased, or for creating input fields for a form. Tip Non-antialiased textespecially if there's a lot of itwill display and scroll noticeably faster than anti-aliased text.
Use text members when you want the text in the movie to look as good as possible, when you need paragraph formatting or tabs, or you want to preserve formatting in imported rich text or HTML. Text members, like field members, can also be used for user input. Compare the following images, both of which represent the same chunk of the letter A, magnified so you can see the edges clearly. The A on the left is from a non-antialiased field member. The one on the right is an anti-aliased text member. The one on the right will appear much smoother than the non-antialiased version. 
As you become familiar with each type of member, you'll naturally use the one best suited for the task at hand. For the artwork description, let's use a text member, so that the text can be anti-aliased. Before adding descriptions, however, it's probably time to finally add the artwork to the project 1 section. Don't worry that you haven't done anything with the Project 2 section either; you will be adding a video to it in the next lesson. 1. | Click in the Score at frame 15 of channel 3, which should be the start of project 1. Now click the visibility buttons for channels 6 and 7 to hide both the left and right curtains. Hiding the curtains will make it easier to place the three pieces of artwork.
| 2. | Select the Art tab in the Cast window to make the art cast the active cast, and then drag and drop growth_01 from the cast onto the Stage.
As you can see here, the image is too large for where it will go, so you will need to scale it somewhat smaller.
 | 3. | With the sprite selected, position the mouse pointer over one of the corner selection handles so the pointer turns black. Hold down the Shift key and click and drag on the handle to make the image smaller.
Holding Shift while scaling the sprite constrains it to its original aspect ratio.
If you try and click to move the sprite after resizing it, you will find that you probably pick the interface_alpha sprite in channel 8. If that happens, remember that you can either hide the offending sprite using the channel visibility button in the Score orbetter yetlocking the sprite so that it can't accidentally be selected but is still visible. You lock a sprite by selecting and clicking the Lock icon in the Property inspector, as shown here, or you can right-click it and select Lock Sprite from the contextual menu.
| 4. | Drag and drop growth_02 and growth_03 from the art cast to the Stage and scale each of the three growth images so they fit in the space provided. Use Rotate and Skew from the Tools palette to rotate the images. Although the images should drop into channels 4 and 5 automatically, you should insure the three images occupy channels 3, 4 and 5 respectively.
When you are done, your Stage should look something like this:
 Check in the Score to make sure the three new sprite spans you just created span only the project1 section.
| 5. | Import text_holder.png from the Lesson03\media folder on the CD into the art cast. Import the image at 32 bits because it has an alpha channel that you'll need.
This image will be placed onto the current interface and serve as an area to hold the text descriptions for each of the three images.
| 6. | Select frame 15 of channel 14 in the Score, then drag the text_holder image from the cast and place it as shown. Set the sprite's blend to 40 percent as well.
Be sure the new sprite only spans the project1 section. Now you're ready to create the text that will describe the images. Keep the art cast active so that the new text cast member is created within that cast. Although it doesn't really matter which cast it's created in, it does describe the art, so logically it's a good cast for it.
| 7. | Click to select frame 15 of channel 15 in the Score, select the text tool from the Tools palette, and draw out a text area as shown.
It's all right if it's not exactly in the same position as shown; it can be adjusted later. When you stop dragging out the text area and release the mouse button you'll be able to type in the following text. Type in each line and press Enter to start a new line.
Series: Growth
Year: 2000
A series of prints
created around
the birth of my
new daughter.
When you're finished, click the mouse, away from the sprite, to deselect it and stop the editing process. You'll now have something resembling the following, and a new text cast member in the art cast.
| 8. | Select the new text sprite, by single-clicking it in the Score or on the Stage, then change its ink type to Background Transparent using the Property inspector.
You no longer have a solid white background behind the text. Next you'll want to make some color and formatting changes to make the text more appealing.
| 9. | With the text sprite still selected, choose the Text tab within the Property inspector, and change the anti-alias option from Larger Than (14pt) to All Text.
By default Director will only anti-alias text that is larger than 14 pts, but by setting the option to All Text, all of our text, regardless of point size, will be anti-aliased.
| 10. | Choose Window > Text Inspector from the top menu, or press Ctrl/Command+T to open the Text inspector panel.
The Text inspector allows you to easily make font, color, and style changes to selected chunks of text.
It can either be a floating panel, or it can be docked into the right docking channel in Windows.
| 11. | Double-click the text sprite on the Stage so you can edit the text.
When you double-click the text sprite on the Stage, you're able to edit it directly where it is. If you double-click the text sprite in the Score, on the other hand, the text will open in a separate floating text window. How you choose to edit it is up to you.
| 12. | Select the top two lines of text and, using the Text inspector, change the font style to bold and the kerning to 2.
The headline now stands out from the body copy, but could use some red to tie it in with the rest of the interface.
| 13. | Select just the first line of text ("Series: Growth"), and use the Text inspector to change the foreground color to red.
You can even change individual characters to different colors if you need to. Go ahead and select various chunks of text and use the inspector to modify them.
Note While the Text inspector allows you to also set the background color of the text, or even selected chunks of text, it will have no affect where the Sprite's ink is set to Background Transparent. When you're ready, it's time to give the movie a test run. Be sure and make the two curtains in channels 6 and 7 visible before continuing. This is also probably a good time to do a save.
| 14. | Rewind and play the movie, then click the project 1 button.
Immediately you should see the problem: when you click project 1, the three images and the text abruptly appear. The text alone might not be so bad, but seeing the images behind the curtains before they open is terrible. What you need to do is add some keyframes to the sprites so that they appear gradually, and properly timed.
| 15. | In the Score, select the last frame of all three of the artwork sprites in channels 3, 4, and 5, as shown here, then select Insert > Keyframe from the top menu.
Tip Remember to hold down Ctrl/Command to select individual frames. 
You want a keyframe at the last frame of the images to define the 100 percent blend mark, where they will stop fading and be fully in view.
| 16. | Select the first keyframe of all three of the artwork sprites in channels 4, 5, and 6, then use the Property inspector to set the blend to 0 percent.
The artwork sprites now fade in over the length of Project 1, but a problem remains: the curtains don't open until the red circle animates in and stops at frame 25. The artwork sprites, therefore, don't need to begin fading in until frame 25.
You could either slide the first keyframe of each sprite forward in time so that it begins at frame 25 instead of frame 15, or you can copy the keyframe at frame 15 to frame 25 so that the blend remains 0 until frame 25. (Just try and say that three times in a row, fast.)
| 17. | Click to select the first keyframe at frame 15 of the sprite in channel 3, then hold down the Alt/Option key and drag the keyframe forward in time to frame 25.
When you hold down the Alt/Option key, you can quickly and easily make copies of keyframes.
| 18. | Repeat step 17 for the other two artwork sprites in channels 4 and 5.
Before continuing, you should create keyframes for the text sprite and its background in channels 14 and 15 so that they fade in nicely as well. In Lesson 5 you'll learn to change the text being displayed with Lingo, so that you can have different descriptions for each image appear when the image is rolled over with the mouse.
Now, let's liven this project up a little with some background music.
|
|
