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