SeamlessTopPart2

Seamless Top Scroll Tutorial - Part 2

Edgar V. Poirier has graciously provided permission for us to use a nice top scrolling script that he wrote. It is easy to use and turns out an impressive-looking top scrolling stationery with a separate area for the text portion of your correspondence.

For this portion of the tutorial, you will need the top scrolling seamless image from the previous page, a midi file, and a background tile all saved to the default stationery folder. You will also have an opportunity to change the color of the text to match your stationery, so it would be good to have the HTML color code jotted down.

A note about stationery scripts: I don't write scripts. I don't really want to write scripts. I am thankful that there are people like Edgar who are good at script writing and are generous with their talents. This portion of the tutorial is to give you a script and have you understand where to type in your changes to make the stationery that you want to make. There are other tutorials out there that will teach you to "snag" a script. This one just basically lays it out there for you. The way the script is presented, all you have to do is have your images and midi in the stationery default folder. The stationery default folder is located at "C:\Program Files\Common Files\Microsoft Shared\Stationery. The script will look for your files in this default stationery location. If you don't store your images and midi in the stationery default folder, you will have to change the paths in the script, or the stationery will not work.

Okay, are you ready? Open your notepad program. (Start/Programs/Accessories/Notepad, for most people) and minimize it so that you can see it at the bottom of your monitor. Where the color changes to purple on the text at the start of the next paragraph, set your cursor, hold down the SHIFT key and highlight everything in purple or red. Don't highlight any of my instructions, they won't help the script out at all. It's long, and you have to get it all or it won't work. When you have all the purple and red highlighted, RIGHT click and choose COPY, then click on your blank notepad, RIGHT click and choose PASTE. This is your script that we will use for this, and I hope many more stationeries. At the top of the notepad, choose File/Save As... Call it Edgar Multi-Scroll and save it to a folder on your desktop, or wherever it'll be safe and you'll be able to find it.

<HTML><HEAD>

<STYLE>BODY {
BACKGROUND-COLOR: #e1d5bb; COLOR: #fff8fc; FONT-FAMILY: "Comic Sans MS"; FONT-SIZE: 14pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px
}
</STYLE>

</HEAD>
<BODY background="C:\Program Files\Common Files\Microsoft Shared\Stationery\BkgTile.jpg"
bgColor=#ffffff><BGSOUND balance=0 loop=99
src="C:\Program Files\Common Files\Microsoft Shared\Stationery\midi.mid" volume=0><IMG
id=bkg src="C:\Program Files\Common Files\Microsoft Shared\Stationery\MainImage.jpg"
style="HEIGHT: 255px; LEFT: -1800px; POSITION: absolute; TOP: -1800px; WIDTH: 590px">
<SCRIPT language=VBScript>
REM Edgar V. Poirier
REM moomoo@nbnet.nb.ca
REM Thanks to Tar'Hom for the idea ; )
REM April 07, 1999, Modified July 24, 2000
Dim w, wW, wH, wx, pW, pH, myTimer, x, y, xD, yD, Res
Dim picX, picY, bxW, bxH, numPics, scrollDirection, scrollType

Set w=document.body

REM ************* MAKE CHANGES HERE *************

REM Select scroll direction by entering one of the following choices below:
REM Top Left = TL
REM Top Right = TR
REM Bottom Left = BL
REM Bottom Right = BR
REM Up = TT
REM Down = BB
REM Left = LL
REM Right = RR

scrollDirection="RR"

REM Select Scroll Type Below
REM Choices: Background scroll = BS
REM Left or Right Border = VBL or VBR
REM Top or Bottom Border = HBT or HBB

scrollType = "HBT"

REM *********************************************

REM Initialize
sub setUp()
REM Get window dimensions
wW=w.clientWidth
wH=w.offsetHeight
REM Set the scroll Width and Height
bW=wW
bH=wH
if w.scrollHeight>wH then bH=w.scrollHeight
bT=0
bL=0
REM Adjust image position and direction depending on choices above.
if scrollType<>"BS" then
if mid(scrollType,1,1)="V" then
bW=pW
if mid(scrollType,3,1)="R" then
bL=wW-bW
if pw<wW then w.style.marginRight=bW
else
if pw<wW then w.style.marginLeft=bW
end if
else
bH=pH
if mid(scrollType,3,1)="B" then
bT=wH-bH
else
if pH<wH then w.style.marginTop=bH
end if
end if
end if
if (left(scrollType,1)="B" or left(scrollType,1)="V") and w.scrollHeight>wH then bH=INT(wH+(w.scrollHeight-wH))
REM Set the visible limits
box.style.height=bH
box.style.width=bW
box.style.left=bL
box.style.top=bT
x=0
y=0
xD=-1
yD=-1
REM Calculate start position of the background and direction.
if left(scrollDirection,1)="T" then
if mid(scrollDirection,2,1)="R" then
xD=-xD
x=-pW
else
if mid(scrollDirection,2,1)="T" then xD=0
end if
else
if left(scrollDirection,1)="B" then
if mid(scrollDirection,2,1)="R" then
xD=-xD
yD=-yD
y=-pH
x=-pW
else
if mid(scrollDirection,2,1)="L" then
y=-pH
yD=-yD
end if
if mid(scrollDirection,2,1)="B" then
xD=0
yD=-yD
end if
end if
else
if left(scrollDirection,1)="L" and mid(scrollDirection,2,1)="L" then
yD=0
x=-pW
end if
if left(scrollDirection,1)="R" and mid(scrollDirection,2,1)="R" then
xD=-xD
yD=0
y=-pH
end if
end if
end if
REM Start the scroll.
SF
end sub

REM universal scrolling routine.
sub SF()
ClearTimeOut(myTimer)
x=x+xD
if xD>0 and x>=0 then x=-pW
if xD<0 and x<-pW then x=0
y=y+yD
if yD>0 and y>=0 then y=-pH
if yD<0 and y<-pH then y=0
REM Position the background image.
backgroundposition.style.left = x
backgroundposition.style.top = y
REM repeat (larger numbers give slower scroll below)
myTimer=SetTimeOut("SF",24)
end sub

REM Everything starts here
sub Window_OnLoad()
REM Get users screen resolution
wx=window.screen.width
REM and adjust font size to match.
Res=INT(wx/128)
w.style.fontSize = 14+Res
REM Get dimensions of background image.
pW=bkg.style.posWidth
pH=bkg.style.posHeight
REM Calculate the size of the background
REM Number of images across
picX=INT((wx*2)/pW)
if picX<4 then picX=4
REM Number of images down
picY=INT((wx*2)/pH)
if picY<4 then picY=4
if scrollType<>"BS" then
if LEFT(scrollType,2)="VB" then
picX=2
else
if LEFT(scrollType,2)="HB" then
picY=2
end if
end if
end if
REM Width of background
bxW=picX*pW
REM Height of background
bxH=picY*pH
backgroundposition.style.width=bxW
backgroundposition.style.height=bxH
REM Calculate required number of images
numPics=picX*picY
REM "Tile" the background (NOTE: Image is not positioned.)
for i=1 to numPics
data=""
data="<IMG src='" & bkg.src & "'>"
backgroundposition.insertAdjacentHTML "beforeEnd", data
next
REM Lets get started.
setUp
end sub

REM This runs if the window size is changed.
sub Window_OnResize()
setUp
end sub

REM Keep the bottom border on-screen if text scrolls.
sub window_OnScroll()
if left(scrollType,1)="H" and mid(scrollType,3,1)="B" then box.style.top=w.scrollTop+(wH-pH)
end sub

</SCRIPT>

<DIV id=box
style="FILTER: BlendTrans(Duration=0); HEIGHT: 600px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 800px; Z-INDEX: -1"><SPAN
id=backgroundposition
style="HEIGHT: 4000px; POSITION: absolute; WIDTH: 3000px"></SPAN></DIV>
<DIV></DIV></BODY></HTML>

Whew! Did you get it all?

There are a few things that you need to know about when working with scripts. Symbols that might not look like they need to be there probably do. Things like<>" are very integral to the script being able to function, so my advice is to not delete things until you understand what they're for and you're sure that you can make alterations without wrecking the script.

This particular script is a multi-function script. It has the ability to be a top or bottom scroll, or a left or right border scroll. We are going to use it in the top scroll capacity.

The items in red on the screen above are things that you can (and in some cases, must) change to make your stationery your very own.

If you are using a background tile, you don't have to change the background color, it won't show much if at all, so it's no big deal. If you don't want to use a background tile, you should find the HTML color code for the color that you want to use and very carefully change the numbers and letters following the # sign. You must leave the # sign in there, so don't inadvertently delete it.

COLOR: This is your text color. Get your HTML color code and carefully change the numbers and letters following the # sign. Again, do not delete the # sign. If you do, just put it back in. If you're using the copy/paste method for transferring the number straight from PSP, you will want to highlight the whole number-letter sequence including the # sign, since when you paste, you will be pasting a # sign along with the color code.

FONT NAME: You can change the font name to whatever font you want to use. Bear in mind that you should probably stick to fonts that are common, or your viewers will not always be able to see the font that you want them to see. Be careful not to accidentally delete the quotation marks.

BkgTile.jpg: This is where you put in the name of your background tile. It must have the file extension (.jpg or .gif) behind the name. Again, do not delete the quotation marks.

Midi.mid: This is where you put in the name of your midi file. Again, do not delete the quotation marks.

MainImage.jpg: This is the spot to type in the name of the image you made for the top scroll. Do not delete the quotation marks. You will see that there is also a place to put in the height and width of your image. THIS IS VERY IMPORTANT. You must change the height and width to the height and width of your image, or you will get some very weird results.

After you have all the changes made to match the files and colors you want to use, at the top of the Notepad screen, choose File/Save As... surf to your stationery folder C:\Program Files\Common Files\Microsoft Shared\Stationery and click on the little down arrow next to file extensions.

Choose All Files. You will be able to see all of the files in your stationery folder. Name your file and give it the .htm extension. Then choose Save.

Well, if all went well, you should now be able to see your stationery in all its glory. You can open up Outlook Express and go to Message, New Message using and Select your stationery from the list or you can check it out in Windows Explorer. Either way, you'll be able to tell if it worked. Gosh, I hope it worked. Getting scripted stationery to work is such a hoot! I love it!

If you'd like to see how mine turned out, please click the link below. I hope you enjoyed this tutorial... I know I had a good time making it.

Have a good one,

DebH