Effect met draadje meerdere keren weergeven

[avalon]

Hallo allemaal,

Ik heb een script waarmee ik een draadje kan tekenen tussen movieclip a en movieclip b.
In mijn stage staan volgende MC's:
btnHome (Dit is eigenlijk een Button waarvan ik een MC gemaakt heb om het script te laten werken)
clpRootHome (De basis waaruit het draadje vertrekt.)

Als ik het script toepas met enkel deze twee movieclips werkt het perfect.

Nu de volgende stap is dat ik nog 4 andere MC's heb:
- btnGuestbook (is eigelijk ook Button, zoals btnHome)
- clpRootGuestbook (zelfde principe als clpRootHome)
- btnPortfolio
- clpRootPortfolio
En daar moet ook telkens weer een draadje tussen komen.

Nu heb ik geprobeert om met een klasse te werken en telkens een nieuwe instantie van een draadje aan te maken maar dat doet het dus niet echt en ik heb geen idee hoe ik dat wel kan laten werken.

De code die voor het draadje, waarbij h1 = btnHome en h2 = clpRootHome bijvoorbeeld.
numPoints = 20;
init();
function init()
{
var dx = h2._x - h1._x;
var dy = h2._y - h1._y;
points = new Array();
for(var i=0;i<numPoints;i++)
{
points[i] = {x:h1._x + dx / numPoints * i, y:h1._y + dy / numPoints * i, vx:0, vy:0};
}
setInterval(drawLine,100);
}

function drawLine()
{
trace([h1._x, h2._x]);
for(var i=0;i<numPoints;i++)
{
points[i].x += points[i].vx;
points[i].y += points[i].vy;
/*
points[i].vx += Math.random() - .5;
points[i].vy += Math.random() - .5;
*/
if(i == 0)
{
var x1 = h1._x;
var y1 = h1._y;
}
else
{
var x1 = points[i-1].x;
var y1 = points[i-1].y;
}
if(i < numPoints-1)
{
var x2 = points[i+1].x;
var y2 = points[i+1].y;
}
else
{
var x2 = h2._x;
var y2 = h2._y;
}
points[i].vx += (x1 - points[i].x) * .05;
points[i].vy += (y1 - points[i].y) * .05;
points[i].vx += (x2 - points[i].x) * .05;
points[i].vy += (y2 - points[i].y) * .05;
points[i].vy += .05;

points[i].vx *= .93;
points[i].vy *= .93;
}
clear();
mc.lineStyle(1,0xFF0F00,100);
mc.moveTo(h1._x, h1._y);
for(var i=0;i<numPoints-1;i++)
{
var x = (points[i].x + points[i+1].x) / 2;
var y = (points[i].y + points[i+1].y) / 2;
mc.curveTo(points[i].x, points[i].y, x, y);
}
mc.curveTo(points[i].x, points[i].y, h2._x, h2._y);
}

Nu is de vraag, hoe moet ik dit dupliceren of dynamisch maken zodat ik 3 verschillende draadjes tegelijk op mijn scherm kan zien? Een draadje zit telkens tussen twee MC's (vb. btnHome en clpRootHome)

Alvast bedankt!
- avalon

[Flasher]

De mcs worden nu als argumenten meegegeven aan de functies. De movieclips worden meegegeven aan de init functie, die de 'points' array maakt. Die wordt dan samen met de mcs via de setInterval aan de drawLine() meegegeven.

numPoints = 20;
function init(mc1:MovieClip,mc2:MovieClip)
{
var dx = mc2._x - mc1._x;
var dy = mc2._y - mc1._y;
points = new Array();
for(var i=0;i<numPoints;i++)
{
points[i] = {x:mc1._x + dx / numPoints * i, y:mc1._y + dy / numPoints * i, vx:0, vy:0};
}
setInterval(drawLine,100,mc1,mc2,points);
}
init(h1,h2);
init(h1,h3);
init(h2,h3);
function drawLine(mc1:MovieClip,mc2:MovieClip,points:Array)
{
for(var i=0;i<numPoints;i++)
{
points[i].x += points[i].vx;
points[i].y += points[i].vy;
/*
points[i].vx += Math.random() - .5;
points[i].vy += Math.random() - .5;
*/
if(i == 0)
{
var x1 = mc1._x;
var y1 = mc1._y;
}
else
{
var x1 = points[i-1].x;
var y1 = points[i-1].y;
}
if(i < numPoints-1)
{
var x2 = points[i+1].x;
var y2 = points[i+1].y;
}
else
{
var x2 = mc2._x;
var y2 = mc2._y;
}
points[i].vx += (x1 - points[i].x) * .05;
points[i].vy += (y1 - points[i].y) * .05;
points[i].vx += (x2 - points[i].x) * .05;
points[i].vy += (y2 - points[i].y) * .05;
points[i].vy += .05;

points[i].vx *= .93;
points[i].vy *= .93;
}
clear();
mc.lineStyle(1,0xFF0F00,100);
mc.moveTo(mc1._x, mc1._y);
for(var i=0;i<numPoints-1;i++)
{
var x = (points[i].x + points[i+1].x) / 2;
var y = (points[i].y + points[i+1].y) / 2;
mc.curveTo(points[i].x, points[i].y, x, y);
}
mc.curveTo(points[i].x, points[i].y, mc2._x, mc2._y);
}

[avalon]

Thx Flasher,
dat heeft me al een groot stuk vooruit geholpen maar ik kreeg het niet werkende.
Na een paar aanpassingen is dit het uiteindelijk werkende resultaat:init(btnHome,clpRootHome,'Home');
init(btnGuestbook,clpRootGuestbook,'Guestbook');
init(btnPortfolio,clpRootPortfolio,'Portfolio');
function init(h1:MovieClip,h2:MovieClip,naam:String)
{
numPoints = 10;
_root.createEmptyMovieClip('mc'+naam,_root.getNext HighestDepth());
var dx = h2._x - h1._x;
var dy = h2._y - h1._y;
points = new Array();
for(var i=0;i<numPoints;i++)
{
points[i] = {x:h1._x + dx / numPoints * i, y:h1._y + dy / numPoints * i, vx:0, vy:0};
}
setInterval(drawLine,10,h1,h2,points,_root['mc'+naam]);
}

function drawLine(mc1:MovieClip,mc2:MovieClip,points:Array, mc:MovieClip)
{
//Calculate X's and Y's
mc1X = mc1._x + mc1._width - 10;
mc1Y = mc1._y + (mc1._height / 2)+1;
mc2X = mc2._x + (mc2._width / 2);
mc2Y = mc2._y + (mc2._height / 2);

numpoints = 10;
for(var i=0;i<numPoints;i++)
{
points[i].x += points[i].vx;
points[i].y += points[i].vy;
if(i == 0)
{
var x1 = mc1X;
var y1 = mc1Y;
}
else
{
var x1 = points[i-1].x;
var y1 = points[i-1].y;
}
if(i < numPoints-1)
{
var x2 = points[i+1].x;
var y2 = points[i+1].y;
}
else
{
var x2 = mc2X;
var y2 = mc2Y;
}
points[i].vx += (x1 - points[i].x) * .05;
points[i].vy += (y1 - points[i].y) * .05;
points[i].vx += (x2 - points[i].x) * .05;
points[i].vy += (y2 - points[i].y) * .05;
points[i].vy += .05;

points[i].vx *= .93;
points[i].vy *= .93;
}
mc.clear();
mc.lineStyle(1,0xFF0F00,100);
mc.moveTo(mc1X, mc1Y);
for(var i=0;i<numPoints-1;i++)
{
var x = (points[i].x + points[i+1].x) / 2;
var y = (points[i].y + points[i+1].y) / 2;
mc.curveTo(points[i].x, points[i].y, x, y);
}
mc.curveTo(points[i].x, points[i].y, mc2X, mc2Y);
}
Ik heb mx1X,mx1Y,mc2X en mc2Y gebruikt zodat het draadje op een opgegeven punt in de movieClip begint en eindigt :)