Walking

[Jerryscript]

Here's a little experiment to take a wire frame man and make him walk. Each part, such as thighs and calves, forearms and upperarms, etc, affect the other parts of the body.

The head bob is a bit much especially at high speeds, but otherwise, I think it works ok. You should be able to replace the lines with images of body parts to acheive a decent walking animation. You can see a working example at http://www.geocities.com/webwizardsways/images/walking.swf (the slider affects the speed, right is faster, left is slower)


clipcount=0;
thickness=6;

createEmptyMovieClip('head',clipcount++);
with(head){
_y=200-thickness*14;
_x=100;
lineStyle(thickness*2,0xff00ff);
moveTo(0,-thickness*2);
lineTo(0,-thickness*3);
}
head.onEnterFrame=function(){
this._x=_root.man._x+thickness/2-speed/48;
this._y+=(_root.man._y-this._y)/1.5;
};// end head

createEmptyMovieClip('man',clipcount++);
with(man){
_y=200-thickness*14;
_x=100;

createEmptyMovieClip('body',clipcount++);
with(body){
_rotation=-6;

createEmptyMovieClip('leftArm',clipcount++);
with(leftArm){
_x=thickness/2;
lineStyle(thickness,0xff0000);
lineTo(0,thickness*4);
createEmptyMovieClip('fore',clipcount++);
with(fore){
_y=thickness*4;
lineStyle(thickness,0xff0000);
lineTo(0,thickness*3);
}// end fore
}// end leftArm

createEmptyMovieClip('leftThigh',clipcount++);
with(leftThigh){
_y=thickness*6;
_x=thickness/3;
lineStyle(thickness,0x0000ff);
lineTo(0,thickness*4);
createEmptyMovieClip('calf',clipcount++);
with(calf){
_y=thickness*4;
lineStyle(thickness,0x0000ff);
lineTo(0,thickness*4);
createEmptyMovieClip('foot',clipcount++);
with(foot){
_y=thickness*4;
lineStyle(thickness,0x0000ff);
lineTo(thickness/2,0);
}// end foot
}// end calf
}// end leftThigh

createEmptyMovieClip('rightThigh',clipcount++);
with(rightThigh){
_y=thickness*6;
_x=-thickness/3;
lineStyle(thickness,0x0000ff);
lineTo(0,thickness*4);
createEmptyMovieClip('calf',clipcount++);
with(calf){
_y=thickness*4;
lineStyle(thickness,0x0000ff);
lineTo(0,thickness*4);
createEmptyMovieClip('foot',clipcount++);
with(foot){
_y=thickness*4;
lineStyle(thickness,0x0000ff);
lineTo(thickness/2,0);
}// end foot
}// end calf
}// end rightThigh

createEmptyMovieClip('body',clipcount++);
with(body){
lineStyle(thickness*2);
lineTo(0,thickness*5);
}// end body

createEmptyMovieClip('rightArm',clipcount++);
with(rightArm){
_x=-thickness/2;
lineStyle(thickness,0xff0000);
lineTo(0,thickness*4);
createEmptyMovieClip('fore',clipcount++);
with(fore){
_y=thickness*4;
lineStyle(thickness,0xff0000);
lineTo(0,thickness*3);
}// end fore
}// end rightArm

}// end body

}// end man

createEmptyMovieClip('road',clipcount++);
with(road){
lineStyle(1);
lineTo(Stage.width,0);
for(x=0;x<Stage.width;x+=10){
moveTo(x,-5);
lineTo(x,0);
}
_y=200;
}

leftThigh=new Array(23.2,21.2,19.2,17.2,15.3,13.5,11.7,9.8,8,6.1 ,4.2,2.3,0.5,-3.3,-8.3,-14.5,-17.3,-19,-20.8,-22.6);
leftcalf=new Array(16.5,21.5,26.5,31.5,36.2,40.7,45.2,50,54.5,5 9.2,64,68.7,73.2,74.2,62.2,31.2,17.2,8.7,7.7,7.7);
rightThigh=new Array(-23.2,-21.2,-19.2,-17.2,-15.3,-13.5,-11.7,-9.8,-8,-6.1,-4.2,-2.3,-0.5,3.3,8.3,14.5,17.3,19,20.8,22.6);
rightcalf=new Array(8.4,9.7,11,12.4,13.6,14.8,16,17.3,18.5,19.8, 21,22.3,23.5,21,16,8.2,7.9,9.6,11.4,13.2);
leftArm=new Array(-23.2,-21.2,-19.2,-17.2,-15.3,-13.5,-11.7,-9.8,-8,-6.1,-4.2,-2.3,-0.5,3.3,8.3,14.5,17.3,19,20.8,22.6);
leftfore=new Array(-23.6,-22.6,-21.6,-20.6,-19.7,-18.8,-17.9,-16.9,-16,-15.1,-14.1,-13.2,-12.3,-10.4,-7.8,-4.7,-3.3,-2.5,-1.6,-0.7);
rightArm=new Array(23.2,21.2,19.2,17.2,15.3,13.5,11.7,9.8,8,6.1 ,4.2,2.3,0.5,-3.3,-8.3,-14.5,-17.3,-19,-20.8,-22.6);
rightfore=new Array(-0.4,-1.4,-2.4,-3.4,-4.3,-5.2,-6.1,-7.1,-8,-8.9,-9.9,-10.9,-11.8,-13.7,-16.2,-19.3,-20.7,-21.5,-22.4,-23.3);
Xchange=new Array(2.15,2.05,2.1,2.1,2,2.05,2,2,2.05,2.05,2.1,2 ,2,2.05,2,2,2.1,2.05,2.1,2);
currentY=new Array(118.05,117.2,116.45,115.8,115.25,114.9,114.6 ,114.4,114.25,114.2,114.25,114.4,114.65,114.7,114. 65,114.65,115.15,115.85,116.7,117.55);

lr=false;
framecounter=0;

MovieClip.prototype.move=function(){
if(lr){
a=this.rightThigh;b=this.rightArm;c=this.leftThigh ;d=this.leftArm;
}else{
a=this.leftThigh;b=this.leftArm;c=this.rightThigh; d=this.rightArm;
}
c._rotation=leftThigh[framecounter];
c.calf._rotation=leftcalf[framecounter];
a._rotation=rightThigh[framecounter];
a.calf._rotation=rightcalf[framecounter];
d._rotation=leftArm[framecounter];
d.fore._rotation=leftfore[framecounter];
b._rotation=rightArm[framecounter];
b.fore._rotation=rightfore[framecounter];
this._parent._x+=Xchange[framecounter];
this._parent._y=currentY[framecounter];
if((framecounter++)==20){framecounter=0;lr=(lr)?fa lse:true;}
if(this._parent._x>Stage.width){head._x=this._parent._x=-10;}
updateAfterEvent();
};

createEmptyMovieClip('slider',clipcount++);
with(slider){
lineStyle(4);
lineTo(200,0);
_x=300;
_y=50;
_xscale=-100;
createEmptyMovieClip('handle',clipcount++);
with(handle){
lineStyle(2);
moveTo(0,-8);
lineTo(0,8);
_x=100;
}
}

slider.handle.onPress=function(){
this.startDrag(0,200,0,0);
};

slider.handle.onRelease=slider.handle.onReleaseOut side=function(){
stopDrag();
clearInterval(mover);
mover=setInterval(function(){_root.man.body.move() ;},(speed=display.text=48*this._x/200));
};

createTextField('display',clipcount++,100,0,100,20 );

slider.handle.onRelease();

[mlk]

Pretty nifty as it is all AS, but a 'standard' walkcycle would have the torso leaning a bit forward, not backward, and the bottom legs would not be 'kicking' as much.

But this is a detail, and again, nice AS !

[brianmanden]

Impressive !! and all done in AS ! Very good ! Thanks for sharing :thumb:

[Pasquale]

Even though there is a bunch of technical things wrong with the cycle, the fact that you did that in AS is amazing :thumb:

[zellers]

Lol that's better than I can animate using the IDE tools provided, yet alone scripting it. Good WORK! :stunned:

EDIT:

Plus, your drawing with the API is better than me using any of the tools provided...

[minthu]

Very nice work but I need to learn your codes for understanding. :D

[TronicVolta]

Nice smooth walking, I'm curious to know how you came up with these numbers and variables.:cool:

leftThigh=new Array(23.2,21.2,19.2,17.2,15.3,13.5,11.7,9.8,8,6.1 ,4.2,2.3,0.5,-3.3,-8.3,-14.5,-17.3,-19,-20.8,-22.6);
leftcalf=new Array(16.5,21.5,26.5,31.5,36.2,40.7,45.2,50,54.5,5 9.2,64,68.7,73.2,74.2,62.2,31.2,17.2,8.7,7.7,7.7);
rightThigh=new Array(-23.2,-21.2,-19.2,-17.2,-15.3,-13.5,-11.7,-9.8,-8,-6.1,-4.2,-2.3,-0.5,3.3,8.3,14.5,17.3,19,20.8,22.6);
rightcalf=new Array(8.4,9.7,11,12.4,13.6,14.8,16,17.3,18.5,19.8, 21,22.3,23.5,21,16,8.2,7.9,9.6,11.4,13.2);
leftArm=new Array(-23.2,-21.2,-19.2,-17.2,-15.3,-13.5,-11.7,-9.8,-8,-6.1,-4.2,-2.3,-0.5,3.3,8.3,14.5,17.3,19,20.8,22.6);
leftfore=new Array(-23.6,-22.6,-21.6,-20.6,-19.7,-18.8,-17.9,-16.9,-16,-15.1,-14.1,-13.2,-12.3,-10.4,-7.8,-4.7,-3.3,-2.5,-1.6,-0.7);
rightArm=new Array(23.2,21.2,19.2,17.2,15.3,13.5,11.7,9.8,8,6.1 ,4.2,2.3,0.5,-3.3,-8.3,-14.5,-17.3,-19,-20.8,-22.6);
rightfore=new Array(-0.4,-1.4,-2.4,-3.4,-4.3,-5.2,-6.1,-7.1,-8,-8.9,-9.9,-10.9,-11.8,-13.7,-16.2,-19.3,-20.7,-21.5,-22.4,-23.3);
Xchange=new Array(2.15,2.05,2.1,2.1,2,2.05,2,2,2.05,2.05,2.1,2 ,2,2.05,2,2,2.1,2.05,2.1,2);
currentY=new Array(118.05,117.2,116.45,115.8,115.25,114.9,114.6 ,114.4,114.25,114.2,114.25,114.4,114.65,114.7,114. 65,114.65,115.15,115.85,116.7,117.55);

[Jerryscript]

Thanks everyone.

Attached below are the six files that show the progression I took to get to the above code. I started with just leg movements, with a kind of robotic look, moved through various methods of determining rotation for each part of the body, and finally (to answer your question TronicVolta), used localToGlobal in the 5th file to create the arrays of positioning data used in the 6th file.

If you can't decompile these for the source AS, I can post a zip file of each. Sorry, no FLA to post, I use Ming to wrap AS into a SWF file, can't stand the FlashIDE.

Thanks again for the comments!