Movement determined by mouse input

How easy is this going to be for a novice?

[rich_b]

Imagine, if you will, a row of chains arranged side by side, each chain hanging vertically. When a visitor runs the mouse cursor across the chains, those chains sway and swing for a few seconds before returning to rest. For a Flash novice with only basic Flash experience and no actionscipt knowledge how hard is this effect going to be re-create?

I'm considering outsourcing this bit of development but if I did it myself in Flash where would I need to start looking to create the movement effect - is it atActionscript or somewhere else?

[rocknbil]

How good are you at math? :-)

I'd like to just post a link to the resource, but cannot here. So bear with me . . .

What this is is a demo by a Flash genius that's incredibly simple. This generates a matrix of a grid of circles. When you mouse over the circles, they "move toward you" in a 3D space like the ripples of a pond (in fact the original was named pond.flv.)

The following has been tested prior to posting, it will take you all of 5 minutes to create.

Open an empty ActionScript 2.0 document.

Start with a small circle, 10 x 10 px, make a symbol of it, name it "shape." When converting to symbol, set the type to "Movie Clip" (not button or graphic.) Set the registration for center. Do not need to "export for ActionScript." Delete the instance from the main stage.

Create a new symbol named "item." Also set this clip's type to Movie Clip, but this one make sure "Export for ActionScript" is selected, which should put "item" as the identifier. No class is required. This should put you in edit mode for this symbol. If not, double click "item" from the Library Pane.

Drop an Instance of "shape" dead center on the "item" symbol's stage. If it doesn't center perfectly, use the X/Y coordinates in the Properties pane to make it so. Make sure the instance of "item" is selected, and in the ActionScript Pane, attach the following code to it (don't need to name the instance:)

onClipEvent(load){ 
 baseX = _parent._x; 
 baseY = _parent._y; 
 speedX = 0; 
 speedY = 0; 
} 
onClipEvent(enterFrame){ 
 distanceX = _root._xmouse - _parent._x; 
 distanceY = _root._ymouse - _parent._y; 
 distanceX > 0 ? signX = -1 : signX = 1; 
 distanceY > 0 ? signY = -1 : signY = 1; 
 distance = distanceX*distanceX+distanceY*distanceY; 
 forceX = 0; 
 forceY = 0; 
 if (distance < _root.maxD2){ 
 force = (-_root.a*distance+_root.power); 
 forceX = (distanceX*distanceX)/distance*signX * force; 
 forceY = (distanceY*distanceY)/distance*signY * force; 
 } 
 speedX = speedX*_root.friction + (baseX - _parent._x)*_root.ratio + forceX; 
 speedY = speedY*_root.friction + (baseY - _parent._y)*_root.ratio + forceY; 
 _parent._x += speedX; 
 _parent._y += speedY; 
} 
onClipEvent(mouseDown){ 
 _root.power = _root.power +.2; 
 _root.a = _root.power/_root.maxD2; 
} 
onClipEvent(mouseUp){ 
 _root.power = _root.power - .2; 
 _root.a = _root.power/_root.maxD2; 
} 
onClipEvent(mouseMove){ 
 updateAfterEvent(); 
} 

It's important to make sure you are attaching this code to the movie clip shape within the movie clip item. Do not put the code in the timeline of "item." Attach the code to the instance of "shape" on item's stage.

This attaches the reactions to the mouse to the instance of "shape".

Now return to the main timeline. You don't need to put an instance of either movie clip in the main timeline, that is handled by the following code. in frame 1 of the main timeline, paste the following:

//play with these settings 
maxDistance = 100; 
power = 7; 
friction = .70; 
ratio = .3; 
//calculated constants 
// This draws the instances on the stage 
maxD2 = maxDistance*maxDistance; 
a = power/maxD2; 
for(i=0;i<10;++i){ 
for(j=0;j<10;++j){ 
this.attachMovie("item", "item"+i+"_"+j, (i-1)*10+j); 
this["item"+i+"_"+j]._x = i*15 +50; 
this["item"+i+"_"+j]._y = j*15 +50; 
} 
} 

Run the program. You should see a grid of circles, 10 across, 10 down. Mouse over the circles. As your mouse passes over the grid of circles, they will separate, move toward you in space, and come to rest when you mouse out . . . you have to see it.

Alter the values for maxDistance, power, friction, and ratio and rerun the program to see the effect.

You could use the concepts in this demo for your idea, limiting the movement to sideways only and tweaking the draw process to lay in only vertical chain renderings - or, instead of circles, draw chain links, and limit their vertical movement.

[rich_b]

Thanks for the detailed info - really appreciated. :)It's given me a much better idea of what is needed to achieve what I want.

I stuck the code into Flash CS3 and it worked - although not exactly as I expected. I thought I might see neatly spaced circles with some white space in between but they're very closely spaced and resemble a square blob of overlapping circles. But, most importantly they do react to the mouse and it's a great start.

I got a bit confused with the placement of the code at some point due to my difficulty in working out if I was looking at an instance of shape or item, etc. So it may be I have the code in the wrong place, or I may have drawn the initial shape too large. I'll plug away and I'm sure I'll get there,

Thanks a lot for your help.

[rocknbil]

they're very closely spaced and resemble a square blob of overlapping circles.

Yeah you probably have the graphic too large, or it's not registered on center or something. It should be an evenly spaced grid as you say:

. . . . . . 
. . . . . . 
. . . . . . 
. . . . . . 
. . . . . . 
. . . . . . 

When you mouse over, the dot graphics will separate

. . . . . . 
. . .. . . 
...   ... 
. ..  .. . 
. . . . . . 
. . . . . . 

But if you get the idea, it will work, used it once on a site with a brick wall instead of dots.