ANIMATED BORDER


For the french version of this tutorial, click the flag :


If you want to see an example of stationery created with the technique indicated in this tutorial, click HERE.


PREPARATION OF THE MATERIAL

Prepare in Paint Shop Pro, the following 4 elements:
1) A creation which will serve of background: you can use a tile leaving of a basic image or other either, an obtained paper by applying an effect seamless tile on each side. If you are on PSP8, the effect of image Mosaic without joint allows you to obtain this result more quickly.
Préparez dans Paint Shop Pro, les 4 éléments suivants : 2) Choose a square tile having an identical motive on 4 sides. Here is the one that myself I built up by using in particular the filter filtre Uleod Effect/Art texture:


Put possibly 80 by 80 pixels. Made Trace / transform in copy.

3) Press on the icon indicating the tool Selection. In the window of the configuration, choose Circle; Progressiveness: 1; mark Anti-alias.

4) Take place with the mouse well in the centre of the square (use figures which march past below to the left. To be in the centre you have to have 40 and 40), then realize a circle which almost covers the square and type the touch CANC of your keyboard to erase selection. Protect this file in the size gif optimized (by putting a colour of the outline of the circle as a background colour) by naming him for example square - circle.

5) Turn behind to the passage of the creation of the selected circle.
Open new one square transparent bottom of 80 by 80 pixels, and copy / stick one of the circle which you have just created towards this square. Click again the icon Selection and this time, choose Etoile-1; Progressiveness: 1; mark Anti-alias. Position your mouse below to the right of your circle and form a star. Click the touch CANC of your keyboard to erase selection. Merge the visible copies and register the file (so a circle containing a transparent star) in the size gif by naming him for example encircle - etoile.

6) Turn behind to the passage of the creation of the star selected in the circle. Selections /Invert Selection . Then type the touch CANC of your keyboard to eliminate selection. You have so a star transparent bottom which you will register as file gif optimized by naming it Star.



WITH SCRIPPY

This realization includes only 8 main compartments, all some over the others, without retreat towards the right-hand side, so quite well placed completely to the left.

1) Open in the Scrippy software a new document: File/ New (or click the corresponding icon). Insert a background of your choice: Insert / background and click Browse to look for it in the file of your HD where you protected it. It will be paper which will be of use of bottom to the set (the first background built in Paint Shop Pro).
In Scrolling, put Down+Left. Pixels per second: 10; Pixels per move: 1; mark Smooth Scroll. Do not change anything in Advanced's options options (every rest in 0).

2) Insert / Left Border Scroll. Go for your star in gif. In Scroll Direction: choose Down. Mark SmoothScroll; Pixels per Second: 100; Pixels per move: 10 and in Advanced options, mark Overlap with next object; mark Place over background. Transparency: 20. Space between: 80; Starting Position: 0.

3) Insert / Left Border Scroll. Go this time for your circle with transparent star. In Scroll Direction: choose Up. Mark SmoothScroll; Pixels per the Second: 100; Pixels per move: 10 and in Advanced options, mark Overlap with next object; mark Place over background. Transparency: 20. Space between: 80; Starting Position: 0.

4) Insert / Left Border Scroll. Go this time for your square containing a transparent circle. In Scroll Direction: choose None. In Advanced options, mark Overlap with next object; mark Place over background. Transparency: 0. Space between: 0; Starting Position: 0.

5) Insert / Top Border Scroll. Go this time for your star in gif. In Scroll Direction: choose Left. Mark SmoothScroll; Pixels per Second: 100; Pixels per move: 10 and in Advanced options, mark Overlap with next object; mark Place over background. Transparency: 20. Space between: 80; Starting Position: 0.

6) Insert / Top Border Scroll. Go this time for your circle with transparent star. In Scroll Direction: choose Right. Mark SmoothScroll; Pixels per the Second: 100; Pixels per move: 10 and in Advanced options, mark Overlap with next object; mark Place over background. Transparency: 20. Space between: 80; Starting Position: 0.

7) Insert / Top Border Scroll. Go this time for your circle with square containing a transparent circle. In Scroll Direction: None. In Advanced options, mark Overlap with next object; mark Place over background. Transparency: 0. Space between: 0; Starting Position: 0.

8) Insert / Message area: it will be to the left in the list of compartments (as all the other compartments moreover). Because that it is necessary to take into account the width of borders scrolls, here is the good margins of the Message area: From Left: 130; From Right: 50; From Top: 230; From Bottom: 130. In this way the message will well be in the central zone and will allow me also to show enough the background. But you will be able to vary these margins according to your own requirements.

Let us not forget to put colours in Scrollbar by marking Overrid Scrollbar color and by choosing 2 colours in accordance with the other colours of the realization.

You can complete by adding a sound ( music), a loading message and a ticker.

Save your realization as file SSC or as file HTML.


******************


This tutoriel was created on September 22, 2003 in the context of the works of the French group - Scrippy, based by Mario Panone.
If you want following information about this group click the logo:



If you want to join this group, click HERE.

Good amusement!

Lorenza
P.: if you want to write to me to have supplementary information or to suggest advices, click HERE .


For the section Scrippy, click HERE.

For the homepage of this site, click HERE.