快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

会跳舞的骨骼小人

  前不久,在一本讲Matlab的书上看到一个例子,用绘图函数画一个小人。

  效果如下:

« Full Screen »

点击这里下载源文件

  就像下面这样的:

  既然这个小人可以画出来,那么可否让他动呢,我想这个很显然是没有问题的,只要把的身体的各个组成部分分解开就可以了。
  组成这个小人的只有两种组件成分,一个是圆形,一个是线条.
  代码分别如下:

class skelectonCircle
{
    private var x:Number=0;
    private var y:Number=0;
    private var r:Number=0;
    private var lineStyleNum:Number=0x3399FF;
    
    static private var mId:Number=0;
    private var mMcHolder:MovieClip;
       
    public function skelectonCircle(inX:Number,inY:Number,inR:Number,inStyle:Number)
    {
       init(inX,inY,inR,inStyle);
    }
    
    public function init(inX:Number,inY:Number,inR:Number,inStyle:Number):Void
    {
       reset(inX,inY,inR,inStyle);
       
       mMcHolder=_root.createEmptyMovieClip("__SKELETONC__"+mId,_root.getNextHighestDepth());
       mId++;
    }
    
    public function reset(inX:Number,inY:Number,inR:Number,inStyle:Number):Void
    {
       x=inX;
       y=inY;
       r=inR;
       
       if(inStyle!=null||inStyle!=undefined)lineStyleNum=0x3399FF;
       else lineStyleNum=inStyle;
    }
    
    public function draw():Void
    {
       //draw a cicle:    
           mMcHolder.lineStyle(1,lineStyleNum,100);
           //beginFill(0x6666FF);
           //move to the circle’s center.
           mMcHolder.moveTo(x+r,y);
           
           var fi:Number=0;
           var cX:Number=0;
           var cY:Number=0;
           var detaFi:Number=0.1;
           
           while(fi<=2*Math.PI+0.2)
           {
              cX=x+r*Math.cos(fi);
              cY=y+r*Math.sin(fi);
              mMcHolder.lineTo(cX,cY);
              fi+=detaFi;
           }
           //endFill();
    }
    
    public function clean():Void
    {
       mMcHolder.clear();
    }
    
    public function toString():String
    {
       var reString:String=new String();
       
       reString=String("x:"+String(x)+"y:"+String(y)+"r:"+String(r)+"n");
       
       return reString;
    }
    
    public function finallize():Void
    {
       mMcHolder.removeMovieClip();
       mMcHolder=null;
       delete this;
    }
}

class skelectonLine
{
    private var x1:Number=0;
    private var y1:Number=0;
    
    private var x2:Number=0;
    private var y2:Number=0;
    
    private var lineStyleNum:Number=0x3399FF;
    
    static private var mId:Number=0;
    private var mMcHolder:MovieClip;
    
    //static private var thisP:Object;
    
    public function skelectonCircle(inX1:Number,inY1:Number,inX2:Number,inY2:Number,inStyle:Number)
    {
       init(inX1,inY1,inX2,inY2,inStyle);
    }
    
    public function init(inX1:Number,inY1:Number,inX2:Number,inY2:Number,inStyle:Number):Void
    {
       reset(inX1,inY1,inX2,inY2,inStyle);
       
       mMcHolder=_root.createEmptyMovieClip("__SKELETONL__"+mId,_root.getNextHighestDepth());
       mId++;
       
       //thisP=this;
    }
    
    public function reset(inX1:Number,inY1:Number,inX2:Number,inY2:Number,inStyle:Number):Void
    {
       x1=inX1;
       y1=inY1;
       
       x2=inX2;
       y2=inY2;
       
       if(inStyle!=null||inStyle!=undefined)lineStyleNum=0x3399FF;
       else lineStyleNum=inStyle;
    }
    
    public function draw():Void
    {
       //draw a line:
       mMcHolder.lineStyle(1,lineStyleNum,100);
       mMcHolder.moveTo(x1,y1);
       mMcHolder.lineTo(x2,y2);
       
    }
    
    public function clean():Void
    {
       mMcHolder.clear();
    }
    
    public function toString():String
    {
       var reString:String=new String();
reString=String("x1:"+String(x1)+"y1:"+String(y1)+"x2:"+String(x2)+"y2:"+String(y2)+"n");
       return reString;
    }
    
    public function finallize():Void
    {
       mMcHolder.removeMovieClip();
       mMcHolder=null;
       delete this;
    }
}



  接着,我们定义一个小人类,一共有11个部分组成,详细是什么你一看便知:

class skelectonPerson
{
    public var mHead:skelectonCircle;
    
    public var mLeftShoulder:skelectonLine;
    public var mRightShoulder:skelectonLine;
    
    public var mUpBody:skelectonLine;
    public var mDownBody:skelectonLine;
    
    public var mLeftHand:skelectonLine;
    public var mRightHand:skelectonLine;
    
    public var mLeftThigh:skelectonLine;
    public var mRightThigh:skelectonLine;
    
    public var mLeftLeg:skelectonLine;
    public var mRightLeg:skelectonLine;
    
    public function skelectonPerson()
    {
       mHead=new skelectonCircle();
       mLeftShoulder=new skelectonLine();
       mRightShoulder=new skelectonLine();
       mUpBody=new skelectonLine();
       mDownBody=new skelectonLine();
       mLeftHand=new skelectonLine();
       mRightHand=new skelectonLine();
       mLeftThigh=new skelectonLine();
       mRightThigh=new skelectonLine();
       mLeftLeg=new skelectonLine();
       mRightLeg=new skelectonLine();
    }
    
    public function draw():Void
    {
       mHead.draw();
       mLeftShoulder.draw();
       mRightShoulder.draw();
       mUpBody.draw();
       mDownBody.draw();
       mLeftHand.draw();
       mRightHand.draw();
       mLeftThigh.draw();
       mRightThigh.draw();
       mLeftLeg.draw();
       mRightLeg.draw();
    }
    
    public function clean():Void
    {
       mHead.clean();
       mLeftShoulder.clean();
       mRightShoulder.clean();
       mUpBody.clean();
       mDownBody.clean();
       mLeftHand.clean();
       mRightHand.clean();
       mLeftThigh.clean();
       mRightThigh.clean();
       mLeftLeg.clean();
       mRightLeg.clean();
    }
}

  然后就是将这个小人的各个部分组装起来了:

var testPerson:skelectonPerson=new skelectonPerson();
testPerson.mHead.init(180,30,20);
testPerson.mLeftShoulder.init(140,80,180,80);
testPerson.mRightShoulder.init(180,80,220,80);
testPerson.mLeftHand.init(110,40,140,80);
testPerson.mRightHand.init(250,40,220,80);
testPerson.mUpBody.init(180,50,180,80);
testPerson.mDownBody.init(180,80,180,120);
testPerson.mLeftThigh.init(180,120,150,150);
testPerson.mRightThigh.init(180,120,210,150);
testPerson.mLeftLeg.init(150,150,150,200);
testPerson.mRightLeg.init(210,150,210,200);

  最后,让我们以一个小人的手在挥动的动作来结束实验1:
  感觉这个实验里最让我头痛的就是Flash正切角的计算方法了,搞了半天才算ok,呵呵~~: )
//调用段代码

testPerson.draw();

/* ----test 1:data init.----*/
handLen=Math.sqrt((110-140)*(110-140)+(40-80)*(40-80));
//left hand data.
x0[0]=110;
y0[0]=40;
//left hand axes center
x1[0]=140;
y1[0]=80;

//right hand data.
x0[1]=250;
y0[1]=40;
//right hand axes center
x1[1]=220;
y1[1]=80;

fi0=eAtan2(x0[0]-x1[0],y0[0]-y1[0]);
fi1=eAtan2(x0[1]-x1[1],y0[1]-y1[1]);

detaFi0=0.05;
detaFi1=-0.05;

setInterval(handMove,200);
/*---end of test 1---*/

//主运动函数:
//skelecton person test1:
function handMove()
{
    //left hand move.
    if(fi0>=-2*Math.PI/3||fi0<=-5*Math.PI/6)
       detaFi0*=-1;
    
    x0[0]=x1[0]+_root.handLen*Math.cos(fi0);
    y0[0]=y1[0]+_root.handLen*Math.sin(fi0);
    
    _root.testPerson.mLeftHand.reset(x0[0],y0[0],x1[0],y1[0]);
    
    _root.testPerson.mLeftHand.clean();
    _root.testPerson.mLeftHand.draw();
    fi0+=detaFi0;
    
    //right hand move
    if(fi1>=-Math.PI/6||fi1<=-Math.PI/3)
       detaFi1*=-1;
    
    x0[1]=x1[1]+_root.handLen*Math.cos(fi1);
    y0[1]=y1[1]+_root.handLen*Math.sin(fi1);
    
    _root.testPerson.mRightHand.reset(x0[1],y0[1],x1[1],y1[1]);
    
    _root.testPerson.mRightHand.clean();
    _root.testPerson.mRightHand.draw();
    fi1+=detaFi1;
    
}

testPerson.draw();

/* ----test 1:data init.----*/
handLen=Math.sqrt((110-140)*(110-140)+(40-80)*(40-80));
//left hand data.
x0[0]=110;
y0[0]=40;
//left hand axes center
x1[0]=140;
y1[0]=80;

//right hand data.
x0[1]=250;
y0[1]=40;
//right hand axes center
x1[1]=220;
y1[1]=80;

fi0=eAtan2(x0[0]-x1[0],y0[0]-y1[0]);
fi1=eAtan2(x0[1]-x1[1],y0[1]-y1[1]);

detaFi0=0.05;
detaFi1=-0.05;

setInterval(handMove,200);
/*---end of test 1---*/

//主运动函数:
//skelecton person test1:
function handMove()
{
    //left hand move.
    if(fi0>=-2*Math.PI/3||fi0<=-5*Math.PI/6)
       detaFi0*=-1;
    
    x0[0]=x1[0]+_root.handLen*Math.cos(fi0);
    y0[0]=y1[0]+_root.handLen*Math.sin(fi0);
    
    _root.testPerson.mLeftHand.reset(x0[0],y0[0],x1[0],y1[0]);
    
    _root.testPerson.mLeftHand.clean();
    _root.testPerson.mLeftHand.draw();
    fi0+=detaFi0;
    
    //right hand move
    if(fi1>=-Math.PI/6||fi1<=-Math.PI/3)
       detaFi1*=-1;
    
    x0[1]=x1[1]+_root.handLen*Math.cos(fi1);
    y0[1]=y1[1]+_root.handLen*Math.sin(fi1);
    
    _root.testPerson.mRightHand.reset(x0[1],y0[1],x1[1],y1[1]);
    
    _root.testPerson.mRightHand.clean();
    _root.testPerson.mRightHand.draw();
    fi1+=detaFi1;
    
}



testPerson.draw();

/* ----test 1:data init.----*/
handLen=Math.sqrt((110-140)*(110-140)+(40-80)*(40-80));
//left hand data.
x0[0]=110;
y0[0]=40;
//left hand axes center
x1[0]=140;
y1[0]=80;

//right hand data.
x0[1]=250;
y0[1]=40;
//right hand axes center
x1[1]=220;
y1[1]=80;

fi0=eAtan2(x0[0]-x1[0],y0[0]-y1[0]);
fi1=eAtan2(x0[1]-x1[1],y0[1]-y1[1]);

detaFi0=0.05;
detaFi1=-0.05;

setInterval(handMove,200);
/*---end of test 1---*/

//主运动函数:
//skelecton person test1:
function handMove()
{
    //left hand move.
    if(fi0>=-2*Math.PI/3||fi0<=-5*Math.PI/6)
       detaFi0*=-1;
    
    x0[0]=x1[0]+_root.handLen*Math.cos(fi0);
    y0[0]=y1[0]+_root.handLen*Math.sin(fi0);
    
    _root.testPerson.mLeftHand.reset(x0[0],y0[0],x1[0],y1[0]);
    
    _root.testPerson.mLeftHand.clean();
    _root.testPerson.mLeftHand.draw();
    fi0+=detaFi0;
    
    //right hand move
    if(fi1>=-Math.PI/6||fi1<=-Math.PI/3)
       detaFi1*=-1;
    
    x0[1]=x1[1]+_root.handLen*Math.cos(fi1);
    y0[1]=y1[1]+_root.handLen*Math.sin(fi1);
    
    _root.testPerson.mRightHand.reset(x0[1],y0[1],x1[1],y1[1]);
    
    _root.testPerson.mRightHand.clean();
    _root.testPerson.mRightHand.draw();
    fi1+=detaFi1;
    
}




返回类别: Flash教程
上一教程: Flash初学者教程:按钮制作
下一教程: 浅谈Flash发布设置的一些技巧

您可以阅读与"会跳舞的骨骼小人"相关的教程:
· 有趣!用Flash制作互动的小人
· Flash MX 2004实例制作视频教程:飘舞的雪花
· FlashMX 视频教程(45)-变形动画?会跳动的心
· 制作飞舞的蝴蝶
    微笑服务 优质保证 索取样品