Status text is text that appears when you move the mouse over an object, and then disappears when you move the mouse off of the object. It's a nice way to add a bit more description or instruction to interactive objects.
In this lesson, you'll learn how to:
• Add a paragraph object
• Turn off the paragraph object's vertical scroll bar
• Add actions to make the text dynamic, so it changes in response to events
• Add actions to the page's On Show and On Preload events
• Move an action from one event to another
This lesson takes approximately
20 minutes to do.
Starting the Lesson
If you're continuing from Lesson 4, you should still have AutoPlay running with the Tutorial project open. If so, you're ready to move on to the next exercise: Adding a Paragraph Object.
Otherwise, you'll need to open the project file that you saved at the end of Lesson 4.
When you save a project, AutoPlay automatically creates a project folder for it inside your "My Documents\AutoPlay Media Studio 8\Projects" folder. This project folder is where everything that belongs to the project is stored—including the project file, which contains all of the settings used in the project.
The project folder and the project file always have the same name that you gave to the project when it was created. The project file's name ends with a ".autoplay" file extension.
Since you named this project "Tutorial" in Lesson 1, the name of the project folder will be Tutorial, and the name of the project file will be Tutorial.autoplay. So, the path to the project file should be something like:
...\My Documents\AutoPlay Media Studio 8\Projects\Tutorial\Tutorial.autoplay
To open the project, you just need to open that project file.
Paragraph objects are similar to label objects, but they have a few important differences:
• The font size doesn't change when you resize the bounding box...instead, the bounding box determines the area that the text can be displayed in.
• The object's dimensions stay the same even if you change the text with an action at run time.
• You can set a background color for the object.
• You can put a border around the object.
• You can display scrolling text in it, complete with scroll bars.
Paragraph objects are ideally suited for displaying status text. They allow you to specify an area that the text will appear in, and guarantee that the text will never extend beyond it. And, because the bounding box remains constant, you can center the text horizontally within the area, and the center point won' shift when the text changes.
Tip: As you'll see in Lesson 6, the paragraph object's optional scroll bars make it perfect for displaying lots of text, too.
The new paragraph object appears in the upper left corner of the page. Note the default text , which serves as a reminder that paragraph objects are made for presenting long passages of text.
Tip: You can also add a paragraph object by right-clicking on the page surface and choosing Paragraph from the right-click menu.
This object is going to be the target of some Paragraph.SetText actions, so we might as well give the object a more meaningful name. Since it's going to be displaying status text, we might as well call it that. (If we were going to have more than one object with status text on the screen, we would need to be even more descriptive in the name, like "Status Text Top" or "Navigation Status" or something. But we're only going to need one status text display, so we can get away with calling it "Status Text.")
When you make the object's bounding box bigger, the text reflows to take advantage of the new space. Note that the text wraps around when it reaches the edge of the bounding box, just like a paragraph. (That’s why it’s called a paragraph object.)
Unlike a label object, when you resize a paragraph object, the text size doesn't change. Only the size of the bounding box changes. The text just adapts to the new shape.
The easiest way to resize the object to a specific size is to change the Width and Height settings in the Position category of the properties pane. In this case, just set the Width to 200, and the Height to 60.
You can also just resize the object with the mouse until you get the dimensions right, but I find doing it that way takes longer.
Notice that once again the font size doesn't change when you make the paragraph object smaller; only the bounding box gets smaller.
Since the bounding box is now too small for all of the text to fit, a scroll bar appears on the right side of the paragraph object. (It wasn't there before, because the object's vertical scroll bar is set to Auto. When it's set to Auto, the scroll bar only appears if there isn't enough room in the object for all of the text.)
The Vertical setting controls the vertical scroll bar.
When you turn off the vertical scroll bar, the text is essentially "chopped off" at the bottom edge of the paragraph object's bounding box. (The object is sized too small to fit all of the text, so it just displays as much of the text as it can.)
Select the paragraph object by itself, and set its Top setting (in the Position category) to 15.
An easy way to do this is to change the FontSize to 14, and then double-click on FontBold and FontItalic to set them both to true.
Note that the bounding box stays the same size when you change the paragraph object's font size. (If this were a label object, the bounding box would have grown to accommodate the larger text.)
Now each line is centered horizontally inside the bounding box.
We don't want the text to change color on mouse-overs and clicks, so the Normal, Down and Highlight colors need to be the same.
There are two really quick ways to change the colors to #FFFFCC: you can double-click on the object, set the Normal color using the Standard tab of the Colors dialog, and then click Match Normal; or, you can type the hexadecimal into the properties pane, copy it into the clipboard, and paste it into the other two color settings.
For the first method, you double-click on the object, click on the Normal color chooser, click on More Colors, and select the color immediately down and to the left from the center. Click OK to close the Colors dialog, then click Match Normal, and click OK to close the Paragraph Properties dialog.
For the second method, you double-click on the Normal color setting in the properties pane to highlight the hexadecimal text. Then type in #ffffcc, double-click on the text that you just entered, and press Ctrl+C to copy it into the clipboard. Then double-click on the Highlight color value, and press Ctrl+V to paste the text that you copied. Do the same for the Click color, and then press Enter (or just click on another setting), and you’re done.
Tip: Both of these methods are a lot easier to do than they are to describe. If they sound kind of complicated, they really aren't. Changing colors like this is something you'll do pretty often, so it pays to learn faster ways to do it. Try each method out and see which one you like best.
Now for the fun part. We're going to make the text in our paragraph object change as the mouse moves over the interactive objects on the page. To do this, we'll give those objects On Enter and On Leave actions. (Which is another way of saying that we'll add some actions to their On Enter and On Leave events.)
We want the paragraph object to start out empty when you first launch the application. The easiest way to do this is to just delete the text from the paragraph object, so that it is empty to begin with.
A quick way to highlight all of the text in a setting on the properties pane is to double-click on the name of the setting, in the left column of the properties pane. When you double-click on the name of a setting, all of the text in the setting is selected.
Once you have the text selected, pressing the Delete key deletes it. Pressing Enter makes the change permanent.
Tip: If you edit the text in a field by mistake, and you haven't pressed Enter yet (or deselected the setting by clicking somewhere else), you can cancel the change by pressing Esc.
Another quick way to delete the text is to double-click on the object and switch to the Settings tab. (Double-clicking on the object opens the Paragraph Properties dialog and automatically highlights all of the text in the Text field for you.) Then press Delete to erase the highlighted text, and click OK to confirm the change and close the dialog.
The On Enter event will be triggered whenever the mouse moves onto the button object, "entering" its space.
Tip: If you click on the On Enter setting in the properties pane, and then click on the edit button, you are taken directly to the On Enter event in the script editor.
A quick way to add the Paragraph.SetText action is to click the Add Action button, and then type the letters par on the keyboard. As you type in these letters, the category drop-down will skip ahead to the first category that matches what you typed. Once the Paragraph category is shown, click on the Paragraph.SetText action in the list, and click Next to advance to the second page of the New Action wizard.
The ObjectName parameter lets you specify the name of the object that you want this action to operate on. In this case, we want to change the text in the paragraph object named "Status Text."
The Text parameter lets you specify the text that will be displayed in the object. In this case, we want to display a message indicating what the "Ted Sellers Online" button is for.
The "\n" inside the message represents a newline character. It basically means to start a new line, just like pressing Enter in a text editor. (This is known as an escape sequence. An escape sequence is a special "code" that represents a character that can't just be typed into a string normally. In this case, the code \n represents the invisible character you type by pressing the Enter key.)
Note: Remember to click Finish on the New Action wizard and then click OK on the script editor to finish adding the action.
When you move the mouse onto the "Ted Sellers Online" button the first time, the text in the paragraph object changes. This is the Paragraph.SetText action at work.
Note that the text in the paragraph object doesn't have any quotes around it. The quotes that you placed around the text in the action's parameters aren't included in the text when it's displayed; they are only there to tell the action that you're giving it a string.
Note: In computer lingo, a "string" is a sequence of characters, including text and anything else that can be typed. Referring to a sequence of letters and symbols as a "string" supposedly dates back to the late 1800s, when compositors would "string together" letters as part of the printing process. (In fact, it's said that they were actually paid by the foot, and not by the word.)
When you move the mouse off the button, the text remains. This is because there’s nothing telling AutoPlay to change the text when the mouse moves off the object.
If we want the text to disappear when you move the mouse off the button, we need to add an action to the object's On Leave event.
The On Leave event is triggered whenever the mouse moves off of the button object, "leaving" its space.
Setting the Text parameter to "" tells the Paragraph.SetText action to replace the text in the paragraph object with "nothing." This is what programmers call an empty string. You can use an empty string like "" whenever you want to clear the text out of an object with an action.
Voila! Now the text disappears when you move the mouse off of the object.
Use the following text for the On Enter events: "Learn more\nabout Ted" for the About Ted Sellers button (Button2), "Watch a video presentation" for the Video Presentation button (Button3), "Exit from this business card" for the Exit button (Button4), and "Email Ted" for the [email protected] label object (Email Address).
Use an empty string ("") for all of the On Leave events.
Tip: When you add an action to an On Enter event, you can switch right to the On Leave tab of the script editor to add an action to the object's On Leave event too. You don't have to actually exit the script editor and re-open it to assign an action to both events.
When you move your mouse over the interactive objects, the text in the paragraph object should appear and disappear.
This is interesting—when you return to Page1, the "Learn more about Ted" text is still showing in the paragraph object. But the mouse isn't even on the About Ted Sellers button any more.
To understand why this happens, you just need to walk through the series of events.
First things first: when you moved the mouse over the About Ted Sellers button, this triggered the object's On Enter event. That event has a Paragraph.SetText action, which changed the text in the paragraph object to "Learn more\nabout Ted."
Then, you clicked on the About Ted Sellers button, triggering the object's On Click event...which set off the Page.Jump action, sending you to the About Ted page.
On the About Ted page, you clicked on the Back button, which triggered that object's On Click event. That event's Page.Jump action sent you back to Page1.
When you returned to Page1, the paragraph object was still showing the "Learn more about Ted" text, because that's the last thing it was told to display. The paragraph object was never told to display the empty string, because the About Ted Sellers button's On Leave event was never triggered. The Page.Jump action took you to the other page before the mouse had a chance to move off the button object and trigger its On Leave event.
Note: Objects always maintain their settings until they're changed by an action...even if you jump to another page and come back.
Before moving on to the next exercise, exit the application and return to the AutoPlay design environment.
In order to clear out the paragraph object when you return from another page, we need to add an action to one of the page's events.
There are three page events that we could use to clear out the paragraph object: On Preload, On Show, or On Close (there are more events on the page, but these are really the only ones that apply).
• On Preload is triggered after the page has been "created" in memory, but before it is actually displayed on the screen.
• On Show is triggered right after the page appears on the screen.
• On Close is triggered when the page is closed.
Let's try using the On Show event first.
We want the Paragraph.SetText action to clear out the paragraph object named "Status Text" every time this page is shown. Setting the paragraph object's text to "" will replace any existing text in it with an empty string, i.e. nothing.
When you return to the first page, see how the text in the paragraph object is visible for a split second before it disappears? (If you have a really fast computer, the effect might not be that noticeable, so watch carefully.) This is because the On Show event isn't triggered until after the page is displayed. As a result, you may see the paragraph object with the old text in it before the Paragraph.SetText action has a chance to change it.
This works, but it doesn't look very professional. It would be better if we could clear out the paragraph object before the page was shown. An easy way to do that is to put the Paragraph.SetText action on the page's On Preload event instead. That way, the paragraph object is cleared before the page is displayed.
The easiest way to move an action from one event to another is to cut and paste it.
To cut and paste the Paragraph.SetText action, click on the On Show setting, and then click on the edit button. When the script editor appears, select the line of text that contains the action. This is just like selecting a line of text in a text editor, or in Word. You can use the mouse to highlight all of the text, or you can use the keyboard, or any combination of the two.
Tip: An easy way to select a line of text is to position the cursor at the start of the line, and then press Shift+Down. (Hold the shift key, and press the cursor down key.) This will select the entire line, including the newline character at the end.
Once you have the whole line selected, press Ctrl+X to cut the text. It will be removed from the script editor, and placed in the Windows clipboard.
Note: You can use this same technique to remove an action from the script editor. Since actions are just text, all you have to do is select the text and delete it, and the action is "gone."
To paste the action, just click on the On Preload tab, and then press Ctrl+V. The text will be copied from the Windows clipboard and inserted into the script editor.
Finally, click OK to close the script editor and accept the changes you have made to the events.
Now when you go to another page and come back, the paragraph object is already cleared out when you get there. No more flickering!
We aren't going to have to make any more changes to the paragraph object, so you might as well lock it; that way you don't have to worry about selecting it by accident whenever you're working with the other objects on this page.
Locking an object is a good way to get it "out of the way." Once it's locked, you can left-click on it, and even drag-select around it, and AutoPlay will act like the object wasn't even there.
This is especially helpful since the object doesn't have any text in it. With no text inside it, the object is completely invisible unless you select it. (You can see an invisible object when it's selected, because the bounding box gives it away.) Being invisible makes it more likely that you'll click on the object by mistake. So lock it.
Tip: If you ever need to work on the object again, just right-click on it and choose Lock again to unlock it.
Now that you have the navigation buttons working the way you want them to, it's a really good time to save the project.
Note: Never forget this important step! You will avoid future heartache by saving the project whenever you make any changes that you want to keep. So, choose File > Save, press Ctrl+S, or click the Save button...whatever method you prefer.
That's it! Job well done.
Lesson 5 Summary
In this lesson, you learned how to:
• Add a paragraph object
• Turn off the paragraph object's vertical scroll bar
• Add actions to make the text dynamic, so it changes in response to events
• Add actions to the page's On Show and On Preload events
• Move an action from one event to another