Connectioj using flash

i have developed a visual representation of a network system containing racks using flash.

the racks have to be conected can imagine that racks to be certain rectangular blocks.

can anyone of you suggest me as to how i should proceed with the conection such that no two lines connecting the racks should overlap.

the connection details are being passed from the html to the the connection is totally dynamic

  ___           ___
 | A |         | C |
 ----          ----

  ___           ___
 | B |         | D |
 ----          ----

imagine A connects to D, and B connects to C. short of skirting around the outside or rearranging the boxes, how is it possible to draw connections without overlapping at all, never mind doing it dynamically?

overlapping aside, one technique for drawing lines dynamically is to create a movie of a hairline that extends from 0,0 at a 45 degree angle. then if you set its _height to 0 it will be straight across, _width to 0 and it will be straight vertical, etc.


thanks supra,
i thought about the problem again and decided to proceed as you suggested.
now can you suggest me a way such that when two connectors overlap,i should be able to provide a jumper sort of thing to one of them.the jumper can be in the form of a semicircle or a semi square.

hmmm. let’s see. anything you include in the line movie itself will become distorted when you set the height and width, and deciding whether or not to display the jump would be tricky too.

perhaps a colour code would be easier. how about having each line be a different colour? you could have them run through an array of rgb values.

here’s some adapted code:

// colour array
colour = new Array();
colour[0] = [255,0,0];
colour[1] = [0,255,0];
colour[2] = [0,0,255];
colour[3] = [102,102,0];
colour[4] = [102,0,102];
colour[5] = [0,102,102];
// etc. until you feel you have enough colours.

function setcolour(targ,index){
   // create colour object if necessary
   if(!eval(targ).colour) eval(targ).colour = new Color(targ);
   // set rgbs
   eval(targ).colour.setRGB(colour[index][0]<<16 | colour[index][1]<<8 | colour[index][2]);

   _root["line"+j]._y = j*20;

that code will make six copies of the movie “line” and set their colours to each of the values in the array.


if you were to get clever, instead of a static colour array, you could have a system where the colour was decided according to traffic, importance, whatever.

the conditional creation of the colour object in setcolour() is to prevent recreating a colour object for subsequent colour changes. if the colours are only going to be set once upon creation, the conditional part is redundant since you know that there won’t be a colour object and you’ll have to create one.