Planks
Downloading File Zip # 46 Koctets
You need three things
to define planks:
The
file bandes.js, library Javascript
A
sprite of planks 40 X 40 pixels, I joined some specimens to the zip file.
A
Init function containing inter alia the definition of the planks.
Insertion of the
library
< title>Bandes / Strips
3</title >
< Script
LANGUAGE="JavaScript1.2 " SRC=bandes.js></SCRIPT >
After the title.
Definition of the
planks
Example
of Init file:
function Init() {
xorig = -20
yorig = 0
imgPath = "
images/split0.jpg "
LELayer = new
DessineLayer(imgPath)
LELayer.prog[0 ] = new
Array(12, 1, 0, null, null)
LELayer.prog[1 ] = new Array(6,
0, 1, null, null)
LELayer.prog[2 ] = new
Array(15, 1, 0, null, null)
LELayer.prog[3 ] = new Array(6,
0, -1, null, null)
LELayer.prog[4 ] = new
Array(12, 1, 0, null, null)
LELayer.ProgLayer()
}
What gives:

Exemple 1
1
You must define, the graphic image of the
plank and create the object which will draw the planks:
imgPath = "
images/split0.jpg "
LELayer = new
DessineLayer(imgPath)
In this example the
origin of the first plank is defined by:
xorig = -20
yorig = 0
the planks here are
followed, the following one beginning where finishes the preceding one, (it is
not obligatory).
Each element of the
plank, here there are 4, east of it defines by a array like:
LELayer.prog[0 ] = new
Array(12, 1, 0, null, null)
LELayer.prog[0 ] the
name (LELayer) must correspond to the object created previously. prog[0
] the number of the element of the array fixes the
command in which the planks will be drawn.
Definition of the
segments of planks:
new Array(12, 1, 0, null, null)
new Array(Nombre of images,
horizontal direction, vertical direction, origin X, origin Y)
A number of images: a
number of images in this segment of the plank, here 12. The elements make 40 by
40 pixels but this cover with 50 %, the length of this segment will be thus of
20 X 12 = 240 pixels.
Horizontal direction: it
can take values comprisent between 1 and -1
1 the
plank is drawn left towards the line.
the
0 plank is not drawn in the horizontal direction
-1
the plank is drawn line towards the left.
Vertical direction: it
can take values comprisent between 1 and -1
1 the
plank is drawn top in bottom.
the
0 plank is not drawn in the vertical direction
-1
the plank is drawn upwards.
If the two directions
are to zero, this element of the plank is not drawn. The values can be
fractional, (example 2).
Origin X and Origin Y,
make it possible to change the origin of the segment, if these values are has
null the segment starts where the precedent finished. One can define only one of
two values by leaving the other in null, daN this case the left value with null
will keep the value of the end of the preceding segment, (see example
3).
Slope
of the planks:
LELayer.prog[0
] = new Array(12, 1, 0.5, -20, 0)
LELayer.prog[1 ] = new Array(6,
1, 0.5, 100, 0)
LELayer.prog[2 ] = new Array(6,
1, -0.5, 520, 60)
LELayer.prog[3 ] = new
Array(12, 1, -0.5, 520, 120)
What gives:

Exemple 2
In this example the
vertical direction is fractional, (0.5), for all the segments.
For the arrays 2 and 3,
one sees that the vertical direction is negative, the segment goes up.
Modification
of the origin of the segments.
LELayer.prog[0 ] = new
Array(12, 1, 0, -20, 60)
LELayer.prog[1 ] = new Array(6,
0, 1, null, 0)
LELayer.prog[2 ] = new Array(6,
0, 1, 520, 0)
LELayer.prog[3 ] = new
Array(12, 1, 0, null, 60)
What gives:

Exemple 3
The second segment,
(index 1), starts at the end of the first segment for the horizontal direction,
(null), but with value 0 for the vertical direction.
The third segment,
(index 2), requires the definition of the two origins.
Launching of the
drawing
By
the ordering of the object DessineLayer(),
LELayer.ProgLayer()
Launching of the
Init() function
By
the command onload
< body
background="images/fond.jpg " onload="Init() " >
Contents of the page.
After
the tag body, to insert the contents of the page like this, (inside the plank of
example 1 for example):
< div id="Bonjour "
class="clsBonjour " style="position: absolute; left: 300; signal:
40; width: 440; height: 44; visibility:visible; z-index:14; " >
Hello
< / div >
and
for the remainder of the page, in Dhtml or normal HTML, enclosed in one to
bush-hammer such as:
< div id="Nav "
style="position: absolute; left: 0; signal: 300; width: 800; height: 800;
visibility:visible; z-index:14; " >
Contents
< / div >
You can join to me to:
Jean-Pierre
Pichon
Downloading File
Zip # 46 Koctets