PI7 Vertical Scroll Text and Images

PI7 has several terrific Script Effects you can use when building web pages -- I need to point out, however, that these script effects do not appear to work when viewed in Netscape. The Vertical Scroll script can be used to display one or more HTML text messages. You can even use it to display a series of scrolling images. This tutorial shows you how to do create both a Vertical Text Scroll and a Vertical Image Scroll.

If you are interested in other tutorials on using PI to build web pages, you may want to check out my Component Designer Web Page, Web Album, Template Library Slide Show, Image Map, Web Page Edited With FrontPage, CSS Fixed Background Scrolling Text, Customizing a Web Page Template, Link Object Web Page, Remote Rollovers, Popup Menu and Basic Web Page tutorials.

It's easy to scroll text over an image. I'm using this birthday cake image shown below as part of a web page I've built in PI7 (you can learn about how to build web pages in PI7 here and here). Make sure that your image is wide enough to display all of your text. You can only enter one line at a time, with no "carriage returns." If your text is too large a font size, or if you have too long a line of text, it will not all show.

birthday cake

You have to have an active object in order to use Script Effects. Choose Web, Link Object, File. Browse to and select the image you want to place on your web page (you can also make an image and copy and paste it into your web page as an object). Add your other images and HTML text as desired. Select the Slice tool. Look up in the Attributes toolbar and make sure that Panel is selected. Select Auto Slice.

select Auto Slice

Once you select Auto Slice you'll get a "PhotoImpact Confirmation Message." Click OK to close it. In the Attributes toolbar, select the Pick tool.

select Pick

Look at the Slice Panel and you'll see one Script Effect listed, "Triggered by page."

only one script effect listed

To add the Vertical Scroll script effect, click the object birthday cake object. As soon as you do, you'll see that "Triggered by cell" appears among the script effects in the Slice Panel. Select "Triggered by cell," click the plus (+) button to add a script effect, and select "Vertical Scroll."

select Vertical Scroll script

When the Vertical Scroll box opens, select Text to create scrolling vertical text. Type in the first line of text. Select what you've typed and format it (font, font size, color). Then click the plus (+) button to add the text into the text box. Select "Pause on mouseover" because we're going to create a line of text that links to a midi file -- pausing on mouseover lets you click on it more easily. I've left "Expand and shrink" deselected -- it creates alternating thicker and thinner text but is very distracting, to my mind. Note that you can edit the Speed and Delay as desired. I've edited the Speed value to 1.

type and format text

I want to add 3 more lines of vertical scrolling text so that the four lines read:

Happy Birthday to you
Happy Birthday to you
Happy Birthday dear Alice
Happy Birthday to you!

Since the second line is the same as the first one, just click the plus button again to add it to the text box. Select the text and replace it for the third line, then click the plus button to add it to the text box. Repeat for the last line. Don't forget the exclamation point! The text box shows the first few words for each of the 4 lines of text now.

add 4 lines of text

Note that you can select any line of text and delete it by clicking the minus (-) button, and you can move a selected line of text up or down by selecting it, then clicking the appropriate arrow. Also, notice that you can create a link by selecting a line of text and then entering the link URL in the appropriate area. Let's add one more line of text that says:

Click for Birthday Song

Then enter the URL for a midi music file that you already have on your server. Make sure that you choose Target=blank so that the midi file will open in a separate browser window. If you don't, the browser will go to a new URL, leaving your scrolling text image behind. Select this 5th line of text and change the color if you wish.

add linking text for midi

Click the plus button to add this fifth line of text, which will be linked to the Happy Birthday midi. Click OK to close the Vertical Scroll dialog box. You can preview your scrolling text image now by choosing File, Preview in Browser. Remember, you won't hear the midi music unless you're online, because you've linked to an internet URL.

After you've previewed, choose File, Save for Web, As HTML and save to a folder on your hard drive. Remember that if the folder doesn't have an "images" subfolder, PI7 will create one and all of the images for the HTML page will be saved into the images folder. It's important that you upload the HTML page and all of the images into the correct directories (folders) on your server, or your Vertical Scroll won't work right when it's viewed online.

Now that you've got the gist of how the Vertical Scroll script effect works, let's try scrolling images. I've built another PI7 web page to illustrate this effect (I added my own midi on pageload in my HTML editor). For this effect to look good, it's best to have images that are all the same size. So you might need to resize and fiddle with the images a bit. I've used 5 images, all 162 X 298 pixels. The starting image is going to be one that just says "Stephanie's Moose Girls Scrolling Picture Show." With my new web page open in the work space, I've chosen Web, Link Object, File, then browsed to and selected the image so it will be placed on the web page as an object. Position it as desired.

first image

Add other images and HTML text to your web page as needed, then do the Vertical Scroll effect. I want to have four images scroll vertically over the one shown above. Let's start just as we did for the text scroll. Select the Slice tool. In the Attributes toolbar, click Auto Slice. Choose the Pick from the Attributes toolbar and click on the object. In the Slice Panel, choose "Triggered by cell," click the plus (+) button and select "Vertical Scroll." This time when the Vertical Scroll dialog box opens, select Image. In the Image box, click the open folder icon to Browse to the desired images. After you select each image, you can enter a linking URL, target frame and Alt text as desired. Edit the Speed and Delay if you wish. Click the plus button to add the image to the list box below. Repeat for each image.

select images for vertical scroll

Click OK to close the Vertical Scroll box. Preview your scrolling images by selecting File, Preview in Browser. When you're ready to save, choose File, Save for Web, As HTML. Remember to upload the HTML page and the images to the correct directories on your server, or your page will not display properly.

Vertical Image Scroll would be a fun way to rotate a series of images that link to  different sections of a web site. For example, if you have photos of your kids, pets, your gallery, and so on, you could have a scrolling image that links to each section.

This tutorial uploaded 4/13/02

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage