The Gallery pane lets you browse the library of files that came with AutoPlay. This library is organized into different sections, each one accessible with a button at the top of the pane. Clicking on the Images button at the top of the pane displays the gallery's image collection.
Like the Gallery tab on the Select File dialog, the Gallery pane remembers the last folder you accessed for each file type it contains. The last time you used the Gallery pane to add an image was in Lesson 2, when you used it to drag a background onto the page. Unless you've navigated somewhere else with it since then, the Gallery should still be "in" the Backgrounds folder.
To navigate to the Elements folder, you need to first move "up" one level by double-clicking on the up folder.
Once you've moved up one level, you can proceed to navigate into the Elements folder.
Note: Navigating in the Gallery pane is just like navigating in the Select File dialog, or in Windows. To reach the files inside a folder, just double-click on it.
3 ) P rev i e w s o me o f t h e i ma g e s in t h e E l eme n t s f old er b y c li ck ing on t h e f il e n ame s .
As you can see, panel images come in a lot of different shapes, colors and textures.
4 ) S e l ec t t h e P a n e l - 026 .png f il e a nd d ra g i t on t o t h e p a g e .
When you're picking an image to serve as a background for text, look for one that has a smooth texture, since "busy" patterns will make it harder to distinguish the letters. You want to pick one with colors that will contrast well with the color of the text. In this case, we'll be using white text, so we don't want to pick anything too bright; white text on a bright background would be difficult or even impossible to read.
A good candidate for this project would be Panel-026.png. It has a solid black background in the middle that will contrast nicely with white text, and a nice shiny blue "frame" around it that will look good against the page background we're using.
It also has a subtle "shine" effect around the edges of the frame. In order to achieve this lighting effect, the image was made a little bit larger than the frame on all sides. In fact, the image was sized to fit perfectly on a page that is 425 pixels tall-just like the pages in our project. This makes it really easy to position the image on our page.
5 ) U s e t h e a lign me n t t ool s t o ce n t er t h e i ma g e obj ec t ver t i ca ll y on t h e p a g e a nd a lign i t wi t h t h e r igh t e dg e o f t h e p a g e .
First, make sure Align to Page/Dialog mode is on. (An easy way to do this is to right-click on the image, and choose Align. If Align to Page/Dialog mode is on, the To Page/Dialog item will have
a box around it.) Then, right-click on the object and choose Align > Center Vertical. Finally, right-click on the object and choose Align > Right.
Voila! The image is now positioned perfectly on the right side of the page.
Tip: If View > Snap to Page/Dialog is on, you can also just drag the object into place with the mouse, and it will "snap" into place as you approach the top right corner of the page.
6 ) R igh t- c li ck on t h e i ma g e obj ec t a nd c hoo s e P in.
Pinning the image object will make it easier to work "around" the object without moving it by accident. (We'll be placing a paragraph object right on top of the image object.)
Tip: You can also pin an object by selecting it and pressing Ctrl+P.
Adding a Scrollable Paragraph Object
The paragraph object has the built-in ability to display text that is longer or wider than the object itself, with scroll bars to let the user slide the "hidden" parts into view.
In fact, all you need to do to make a paragraph object scrollable is to put more text in it than it has room to display. (By default, new paragraph objects have their vertical scroll bar set to "Auto," which means they will automatically display a vertical scroll bar if the text is long enough.)
There are two basic kinds of scroll bars: vertical, and horizontal. (Vertical scroll bars let you scroll text up and down, while horizontal scroll bars let you scroll text left and right.)
Vertical scroll bars are useful when you're displaying long text documents-in fact, they let you put as much text in a paragraph object as you want. The size of the paragraph object just determines how many lines of text the user can see at any given time.
Horizontal scroll bars are useful when you're displaying text with very long lines, and you don't want the text to "wrap" at the right edge of the paragraph object. Instead, the user can drag the horizontal scroll bar left and right to see all of the text on a line. Although most people find this disconcerting, it can be useful for text that isn't meant to wrap, such as text arranged in fixed- width columns, or program code samples.
Note: Most users don't like having to scroll text horizontally. You should avoid using horizontal scroll bars unless you have a good reason to.
1 ) P re ss C t r l + 3 t o a dd a n e w p ara g ra ph obj ec t . D oubl e - c li ck on t h e
n e w obj ec t , s e t i t s N o rma l c olo r t o whi t e , a nd c li ck t h e M a t c h N o rma l
bu tt on.
We want the paragraph object to have white text, and we don't want the color to change whenever the user moves the mouse over it, so we need to make sure the Highlight and Click colors both match the Normal color.
2 ) C h a ng e t h e V er t i ca l s cr oll b ar s e tt ing t o " On " a nd c li ck O K .
After you click OK, the paragraph object that was added in the upper left corner of the page will reflect the new settings. Notice that the sample text is in fact white, and the object has a vertical scroll bar.
Forcing the vertical scroll bar on regardless of the object's size will make it easier to position the object in the next step, since the scroll bar affects the amount of room the text has, which in turn can affect where you want to place the object to "center" it on top of the panel image.
3 ) P o s i t ion t h e p ara g ra ph obj ec t o ver t h e p a n e l i ma g e a nd re s i z e i t s o i t f ill s m o s t o f t h e bl ack s p ace in s id e t h e f rame .
You want the paragraph object to be smaller than the panel image, so it will fit inside the blue frame that is built into the image.
Now let's load some text into the paragraph object.
4 ) I n t h e p r op er t i e s p a n e , c li ck on t h e T ex t s e tt ing, a nd t h e n c li ck t h e e di t bu tt on.
When you click on the edit button, the Edit Text dialog appears.
At the bottom of the Edit Text dialog, there are four buttons: Load, Save, Print and Spelling.
• The Load button lets you import text from any text file on your system.
• The Save button lets you save the current contents of the Edit Text dialog to a text file.
• The Print button lets you print the current contents of the dialog.
• The Spelling button interactively checks the spelling of the text, letting you choose from a number of suggested spellings for any misspelled words.
We could use the Load button to load a text file into the paragraph object, but since the file we want to load is in AutoPlay's gallery, there's an even easier way.
5 ) C li ck Ca n ce l t o ex i t t h e E di t T ex t di a log, a nd c li ck t h e D o c s bu tt on a t t h e t op o f t h e G a ll ery p a n e .
Clicking the Docs button displays the sample document files that are shipped with AutoPlay. The file we want to load into the paragraph object is TedSellers.txt.
6 ) Whil e holding t h e S hi ft key , d ra g t h e T e d S e ll er s . t x t f il e on t o t h e p ara g ra ph obj ec t .
Normally, when you drag a text file onto the page, a new paragraph object is created for you automatically-with the entire contents of the text file inside it.
That's pretty darn cool. In fact, we could have used that method to create the paragraph object in the first place.
However, if you hold the Shift key down as you drag a text file onto a paragraph object, you'll
replace the text in the paragraph object with the text from the file. Which you have to admit, is also pretty nifty.
When you drag the TedSellers.txt file onto the paragraph object with the Shift key held down, the contents of the TedSellers.txt file are instantly loaded into the paragraph object.
Tip: There are all sorts of little time-saving tricks like this built into AutoPlay. If you want to slip a few more of them up your sleeve-you know, just in case-see the Drag and Drop Assistant.
7 ) I n t h e p r op er t i e s p a n e , c h a ng e t h e S cr ollb ar St y l e s e tt ing f r o m " St a nd ar d " t o " C h r o me . "
The paragraph object allows you to choose between a standard, Windows-style scroll bar, or a custom scroll bar style, like the cool Chrome one that comes with AutoPlay.
8 ) T ry s o me o f t h e o t h er s cr oll s t y l e s , a nd s e l ec t on e t h a t loo k s good wi t h t h e p a n e l i ma g e y ou c ho s e .
Go ahead and pick whichever scroll bar style looks best to you. (I chose Corporate, since it looks good with the dark background of the panel image we're using.)
Each scroll bar style is actually just an image file with different "scroll bar parts" arranged in a row. Each individual part of the scroll bar is represented by a different section of the image. AutoPlay extracts the parts from this image, and then uses them to build the scroll bar.
The Corporate scroll bar ski n