Flash小玩意图案创作：跟随的齿轮和太极

    今天，我们会使用自己之前创建一些图案来进行一些小小实验。使用太极图和齿轮图创作一个拖动跟随的效果。这种拖动跟随的过程。

 

这个flash 用法很简单，采用过程也是很传统。首先创建对象，然后使用Event.ENTER_FRAME 事件来进行刷新画面。有趣的是，配合到缓冲公式创作，发现一个跟随的效果会呈现出来。

 

其原理

 

   对象.x=对象.x+(目标点.x-对象.x)*缓冲系数;

   对象.y=对象.y+(目标点.y-对象.y)*缓冲系数;

 

 可以实现跟随的效果。

 

这样就可以实现一个创建的过程。

当中我们首先导入

import org.summerTree.graphics.TaiJi;//导入太极图
import org.summerTree.graphics.GearWheel;//导入齿轮图

 

这两种图案。可以到我闪盘哪里进行下载。

或者自身替代这两种图案也可以。

 

package {import flash.display.Sprite;import flash.events.*;import org.summerTree.graphics.TaiJi;//导入太极图import org.summerTree.graphics.GearWheel;//导入齿轮图public class Main extends Sprite{private var list:Array=[];private var pen:Sprite=new Sprite();private var num:int=15;public function Main(){init();}private function init():void{addChild(pen);pen.graphics.lineStyle(1);//创建多个太极图for (var i:int=0; i<num; i++){var taiji:TaiJi=new TaiJi(25);taiji.x=50+taiji.width*i;taiji.y=50;addChild(taiji);list.push(taiji);}addEventListener(Event.ENTER_FRAME,Run);}private function Run(event:Event):void{pen.graphics.clear();for (var i:int=1; i<num; i++){var dx:Number=list[i-1].x-list[i].x;var dy:Number=list[i-1].y-list[i].y;var angle:Number=Math.atan2(dy,dx);list[i].rotation=angle*180/Math.PI+90;//采用了缓冲的公式list[i].x=list[i].x+dx/10;list[i].y=list[i].y+dy/10;}var dx2:Number=mouseX-list[0].x;var dy2:Number=mouseY-list[0].y;var angle2:Number=Math.atan2(dy2,dx2);list[0].rotation=angle2*180/Math.PI+90;list[0].x+=(mouseX-list[0].x)/10;list[0].y+=(mouseY-list[0].y)/10; //绘线pen.graphics.lineStyle(1);pen.graphics.moveTo(mouseX,mouseY);pen.graphics.lineTo(list[0].x,list[0].y);}}}

 

 

 

更改这种图案

 var gear:GearWheel=new GearWheel();
  gear.CreatGearWheel(25,20,15);

同样可以实现拖动的效果。

 

 

同样，如果觉得测试的时候麻烦，同样可以更改每一个元件，这样也可以。

可以按这种方式

    var taiji:Sprite=new Sprite();
    taiji.graphics.lineStyle(1);
    taiji.graphics.drawCircle(0,0,25);

绘制一个圆。原理是一样的。

 

扩展，这种方式组合是可以随意的。或者使用齿轮和太极两种图案进行跟随。说不定会有 个不错的效果

 

看看。具体的可以自由的组合。好就写到这里。

 

package {import flash.display.Sprite;import flash.events.*;import org.summerTree.graphics.TaiJi;import org.summerTree.graphics.GearWheel;public class Main extends Sprite{private var list:Array=[];private var pen:Sprite=new Sprite();private var num:int=20;public function Main(){init();}private function init():void{addChild(pen);pen.graphics.lineStyle(1);//创建太极图和齿轮图for (var i:int=0; i<num; i++){if (i%2==0){var taiji:TaiJi=new TaiJi(25);taiji.x=50+taiji.width*i;taiji.y=50;addChild(taiji);list.push(taiji);}else{var gear:GearWheel=new GearWheel();gear.CreatGearWheel(25,20,15);addChild(gear);list.push(gear);}}addEventListener(Event.ENTER_FRAME,Run);}private function Run(event:Event):void{pen.graphics.clear();for (var i:int=1; i<num; i++){var dx:Number=list[i-1].x-list[i].x;var dy:Number=list[i-1].y-list[i].y;var angle:Number=Math.atan2(dy,dx);list[i].rotation=angle*180/Math.PI+90;//采用了缓冲的公式list[i].x=list[i].x+dx/10;list[i].y=list[i].y+dy/10;}var dx2:Number=mouseX-list[0].x;var dy2:Number=mouseY-list[0].y;var angle2:Number=Math.atan2(dy2,dx2);list[0].rotation=angle2*180/Math.PI+90;list[0].x+=(mouseX-list[0].x)/10;list[0].y+=(mouseY-list[0].y)/10;//绘线pen.graphics.lineStyle(1);pen.graphics.moveTo(mouseX,mouseY);pen.graphics.lineTo(list[0].x,list[0].y);}}}