Expanding & Scrolling IM Letters - Tutorial 15

Scrolling Background (Horizontal)


By LismibaebisCreations
4 February 2011 - revised October 2014

The Scrolling Background Script is by Jo Jetler and was available at www.jetler.com.
The website was closed a few years ago and the script can be downloaded here.

Skill Level: Intermediate/Advanced


Needed

Programs
Paint Shop Pro - I used X2
Letter Creator
PeaZip
HTML-Kit
Power Archiver


Image
Image of choice


Plugin
MuRa's Meister Cloud, available here (patched to work with Vista and Win7)


Code
Your personalized expanding code ExpandingLBAug2014.txt (Lesson 3)
OR:
your personalized scrolling code ScrollingLBAug2014.txt (Lesson 9)


Script
BG_scroll_horizontal.txt, available here


Performance Notes
This tutorial is in 6 parts:
- Preparation
- Background for LC
- Tile
- Slice
- Change Coding
- Make new .imf letter

The settings for different Tools and Effects will stay the same throughout the tutorial, unless new setting instructions are given

Don't forget to save your work often

arrow Click on the arrow and drag it to mark the progress on this page.


Preparation

1) Download and install filter if necessary
(If you install filters you need to restart PSP afterwards)

2) Start > Documents

3) Open your Scrolling Letters Folder

4) Make a folder for your new letter
Save all the images and files you will create to this folder

5) Download, unzip and save BG_scroll_horizontal.txt to your Lesson Folder


Background

The following background is a suggestion only - you can do one of your choice.

6) File > New
Settings:
Width = 300 Pixels
Height = 300
Resolution = 72.000 Pixels / Inch
Raster Background = Checked
Transparent = Checked

7) Flood Fill Tool (F)
Settings:
Match mode = None
Use all layers = Not checked
Blend mode = Normal
Opacity = 100

8) Right click to flood fill with Background color

9) Effects > Plugins > MuRa's Meister > Clouds
Settings: (Default)
Blend Mode) = Normal
Effect = 100, Amount = 100
Grain = 3, Contrast = 0
Bias = 0, Light = 0
Cubic = 0, Blur = 0
Contrast = 0

10) Effects > Image Effects > Seamless Tiling
Settings:
Default

11) File > Export > JPEG Optimizer
Settings:
Set compression value to = 20
Chroma subsampling = YCbCr 1x1 1x1 1x1 (None)
Save Exif data = Not checked File name = bgLC


Tile

12) Paint Shop Pro:
Make a tile with image and text area of your choice.
The finished result should not be bigger than 900 x 600 Pixels.

13) File > Save As
Settings:
Save as type = .PSPIMAGE
Save in layers, so that you can make changes later if necessary

14) Window > Duplicate

15) Close the file you just saved


Slicing

16) Layers > Merge > Merge Visible

17) Make your top.jpg, middle.jpg and bottom.jpg files according to Lesson 4

18) Write down the height of your slices and decide on padding-left and padding-right.


Change Coding

19) Make your LC file according to instructions in Lesson 5

20) Extract the files according to instructions in Lesson Lesson 5

21) HTML-Kit:
File > Open Flavor.htm

22) Delete all code starting with the first Screenshot
(The text below the pink line)

Screenshot

Leave the code above the pink line (yours will look different to mine) intact

23) Open either the expanding or scrolling letter code

24) Edit > Select All

25) Edit > Copy

26) Again in HTML-Kit:
Edit > Paste
(into the area you deleted)

27) Make changes to the Flavor.htm code according to instructions in Lesson 3 in the Footer area and
- Expanding letter: Lesson 6 to add the slices, determine the padding and change text background color, text and link colors.
- Scrolling letter: Lesson 9 to add the slices, determine the padding-right and change text background color, text and link colors.

28) Open BG_scroll_horizontal.txt

29) Choose either the left to right
OR
the right to left scrolling version and highlight from
Screenshot

30) Edit > Copy

31) HTML-Kit:
Look for this area in the code

Screenshot

Edit > Paste
(before Screenshot)

32) If you want to change the scrolling speed look for this in the code:

setInterval"jetscroll",32

A number higher than 32 will make it slower, a number lower than 32 speed it up.
Do not change anything else in the code!


Make new .imf Letter

33) Make new .imf file according to instructions in Lesson 9


If you have any questions, please email Lismibaebi at gmail.com.


Link to previous Lesson Lesson Plan Link to next Lesson