Ok, first things first. Check out 24-7 media so y’all will see what I’m talking about.
Do you see the fly which runs away from your mouse? I’d like to come up with the same thing, but for a spider. Does anyone have any ideas how I can make this look realistic? Please help I’d really like a spider on my website.
Thanks very much.
Ads.
I don’t know if it’s just me, but it looks like it always goes in the same path.
I’d use tweens and a guide layer.
Make it stop in some places and wait for your mouse to go over it again to move to the next frames.
I think Lost did an actionscripted spider some time ago. You could try and ask him.
24-7 uses tweens. when you roll over the mc, it just plays the next few frames and soon.
li0n.net my son
I’ll send it to you if you want.
PM me.
LEG_LENGTH = 40 ;
NUM_LEGS = 6 ;
legs_arr = [] ;
for (var l = 0; l < NUM_LEGS; l++) legs_arr.push(l) ;
legs_copy_arr = legs_arr.concat() ;
dot_arr = [] ;
Array.prototype.removeAt = function ( pint_pos ) {
return this.slice(0, pint_pos).concat(this.slice(pint_pos+1, this.length)) ;
}
changeSpeed = function () {
var dx = body._x - _xmouse ;
var dy = body._y - _ymouse ;
ang = Math.atan2(dy, dx) ;
// ang += ( Math.random() - .5 ) * Math.PI ;
targx += Math.cos(ang) * 30 ;
targy += Math.sin(ang) * 30 ;
targx = (targx > 400) ? 400 : (targx < 100) ? 100 : targx ;
targy = (targy > 300) ? 300 : (targy < 100) ? 100 : targy ;
}
function drawBody ( pc_col ) {
body.lineStyle (20, pc_col, 60) ;
body.lineTo (.45, .15) ;
}
function moveBody () {
var myO = {} ;
myO = getCenterLegs () ;
var dx = myO.x - this._x ;
var dy = myO.y - this._y ;
this._x += dx / 5 ;
this._y += dy / 5 ;
}
function moveLegs () {
if (legs_copy_arr.length == 0) {
legs_copy_arr = legs_arr.concat() ;
}
var int_leg = random (legs_copy_arr.length) ;
var leg_mc = dot_arr[ legs_copy_arr[int_leg] ] ;
legs_copy_arr = legs_copy_arr.removeAt (int_leg) ;
leg_mc.targx = targx + LEG_LENGTH * Math.cos ( leg_mc.ang ) ;
leg_mc.targy = targy + LEG_LENGTH * Math.sin ( leg_mc.ang ) ;
leg_mc.onEnterFrame = function () {
var dx = this.targx - this._x ;
var dy = this.targy - this._y ;
this._x += dx / 5 ;
this._y += dy / 5 ;
if ( Math.abs(dx) + Math.abs(dy) < 1 ) {
delete this.onEnterFrame ;
}
}
}
function generateLegs () {
for ( var i = 0 ; i < NUM_LEGS ; i++ ) {
dot_arr.push ( body.duplicateMovieClip ( "d" + i, i ) ) ;
dot_arr*._xscale = dot_arr*._yscale = 50 ;
dot_arr*._visible = false ;
dot_arr*.ang = 2*Math.PI * i / NUM_LEGS ;
}
}
function getCenterLegs () {
var cx, cy ;
for ( var j = 0; j < NUM_LEGS; j++ ) {
cx += dot_arr[j]._x ;
cy += dot_arr[j]._y ;
}
cx /= NUM_LEGS ;
cy /= NUM_LEGS ;
return {x:cx, y:cy} ;
}
this.createEmptyMovieClip ( "drawing", -3 ) ;
this.createEmptyMovieClip ( "body", -2 ) ;
drawBody( a = Math.random() * 0xffffff ) ;
body._x = targx = 250 ;
body._y = targy = 200 ;
/*body.lineStyle ( 50, 0, 100 ) ;
body.lineTo ( .45, .15 ) ;*/
body.v = 5 ;
body.angx = 2*Math.PI*Math.random() ;
body.angy = 2*Math.PI*Math.random() ;
body.onEnterFrame = moveBody ;
setInterval ( changeSpeed, 1000 ) ;
setInterval ( moveLegs, 500 ) ;
function renderLines () {
drawing.clear () ;
drawing.lineStyle ( 0, a, 50 ) ;
for ( var j = 0 ; j < NUM_LEGS ; j++ ) {
drawing.moveTo ( body._x, body._y ) ;
drawing.lineTo ( dot_arr[j]._x, dot_arr[j]._y ) ;
}
}
generateLegs () ;
this.onEnterFrame = renderLines ;
Maybe this will help
Yeah liOn could you please send me an example, that would be fantastic. Thank you very much.
Adam
Ilyas le Pom,
you are one crazy coding guy! I like your code but it confuses the hell out of a novice like me!
Yes, I’m sorry it got so complicated :-/
So here’s the idea:
My spider has a global speed that is handled by the changeSpeed function. That function sets the variables targx and targy, the target destination, by checking the Mouse position and taking the opposite direction. I used setInterval to update the speed and direction every 1000 ms:
changeSpeed = function () {
var dx = body._x - _xmouse ;
var dy = body._y - _ymouse ;
ang = Math.atan2(dy, dx) ;
targx += Math.cos(ang) * 30 ;
targy += Math.sin(ang) * 30 ;
targx = (targx > 400) ? 400 : (targx < 100) ? 100 : targx ;
targy = (targy > 300) ? 300 : (targy < 100) ? 100 : targy ;
}
setInterval ( changeSpeed, 1000 ) ;
Then the legs will move around this global target destination, on a circle. They are created with the generateLegs function that duplicates the clip called ‘body’ (or nothing if it doesn’t exist). The motion is handled by the moveLegs: it takes one of the legs, feeds the destination according to the global destination and the given leg, and makes the leg ease to that destination. The reason I used legs_copy_arr is that I wanted the legs to move in sequence. Using this system, after a leg has moved, a different leg will move.
LEG_LENGTH = 40 ;
NUM_LEGS = 6 ;
legs_arr = [] ;
for (var l = 0; l < NUM_LEGS; l++) legs_arr.push(l) ;
legs_copy_arr = legs_arr.concat() ;
dot_arr = [] ;
function moveLegs () {
if (legs_copy_arr.length == 0) {
legs_copy_arr = legs_arr.concat() ;
}
var int_leg = random (legs_copy_arr.length) ;
var leg_mc = dot_arr[ legs_copy_arr[int_leg] ] ;
legs_copy_arr = legs_copy_arr.removeAt (int_leg) ;
leg_mc.targx = targx + LEG_LENGTH * Math.cos ( leg_mc.ang ) ;
leg_mc.targy = targy + LEG_LENGTH * Math.sin ( leg_mc.ang ) ;
leg_mc.onEnterFrame = function () {
var dx = this.targx - this._x ;
var dy = this.targy - this._y ;
this._x += dx / 5 ;
this._y += dy / 5 ;
if ( Math.abs(dx) + Math.abs(dy) < 1 ) {
delete this.onEnterFrame ;
}
}
}
function generateLegs () {
for ( var i = 0 ; i < NUM_LEGS ; i++ ) {
dot_arr.push ( body.duplicateMovieClip ( "d" + i, i ) ) ;
dot_arr*._xscale = dot_arr*._yscale = 50 ;
dot_arr*._visible = false ;
dot_arr*.ang = 2*Math.PI * i / NUM_LEGS ;
}
}
generateLegs () ;
setInterval ( moveLegs, 500 ) ;
Then I draw the body and make it move to the center of the legs.
function drawBody ( pc_col ) {
body.lineStyle (20, pc_col, 60) ;
body.lineTo (.45, .15) ;
}
function moveBody () {
var myO = {} ;
myO = getCenterLegs () ;
var dx = myO.x - this._x ;
var dy = myO.y - this._y ;
this._x += dx / 5 ;
this._y += dy / 5 ;
}
function getCenterLegs () {
var cx, cy ;
for ( var j = 0; j < NUM_LEGS; j++ ) {
cx += dot_arr[j]._x ;
cy += dot_arr[j]._y ;
}
cx /= NUM_LEGS ;
cy /= NUM_LEGS ;
return {x:cx, y:cy} ;
}
this.createEmptyMovieClip ( "body", -2 ) ;
drawBody( a = Math.random() * 0xffffff ) ;
body._x = targx = 250 ;
body._y = targy = 200 ;
body.v = 5 ;
body.angx = 2*Math.PI*Math.random() ;
body.angy = 2*Math.PI*Math.random() ;
body.onEnterFrame = moveBody ;
Eventually, the lines between the body and the legs are drawn with the renderLine function.
I hope it’s a bit clearer now
thats crazy stuff 
I picked this little spider up on my travels ages ago, the animation is superb!!
Hope it helps…at least with the actual spider anyways 
Jain
Yay-just reached 100 posts! :party:
:: Copyright KIRUPA 2024 //--