FLASHのお勉強_スクリプトで描いた線画、描画の変形・反復運動(as2.0)

　スクリプトで描いた、線、あるいは、線で囲んだ描画をカーブ状（曲線）に変形し、その変形状態を反復運動をさせるお勉強である。　反復運動は、三角関数を用いて行なった。

ステージなどの準備

●ステージのサイズ、背景色は任意。　fpsも好みに応じて任意（ここでは、24fps）

SAMPLE１（山の数は1から任意）

SAMPLE2

SAMPLE3

SAMPLE4 SAMPLE5

スクリプト　（as2.0）

SAMPLE１


//描画を構成するポイントの座標を配列定義
var pointx = [];
var pointy = [];

//線画用ムービークリップ
var c_mc = this.createEmptyMovieClip("c_mc", 1);

//座標、回転角、ポイント数の初期値定義
var x0 = 20;
var y0 = 60;
var dx = 50;
var dy = 100;
var rd = 0;
var pointNum = 11;

//ポイントの初期配置（直線状にdx間隔で並べる）
for (i=0; i<pointNum; i++) {
  pointx[i] = x0+dx*i;
  pointy[i] = y0;
}

myDraw(c_mc);

//描画関数
function myDraw(mc) {
  mc.clear();
  mc.lineStyle(0,0xff0000);
  mc.moveTo(pointx[0],pointy[0]);
  for (i=0; i<pointNum; i++) {
    if (i%2 == 1) {
      mc.curveTo(pointx[i],pointy[i],pointx[i+1],pointy[i+1]);
    }
  }
}

//反復運動
//偶数の(山となる)ポイントを往復運動させ
//隣の山は逆方向に動かす
c_mc.onEnterFrame = function() {
  for (j=0; j<pointNum; j++) {
    if (j%2 == 1) {
      if (j%4 == 1) {
        pointy[j] = y0+dy*Math.sin(rd);
      } else {
        pointy[j] = y0-dy*Math.sin(rd);
      }
    }
  }
  myDraw(this);
  rd += 0.1;
};

SAMPLE2


//描画を構成するポイントの座標を配列定義
var pointx = [];
var pointy = [];
//線画用ムービークリップ
var c_mc = this.createEmptyMovieClip("c_mc", 1);
//座標、回転角、ポイント数、角度の初期値定義
var x0 = 20;
var y0 = 60;
var dx = 50;
var dy = 100;
var rd = 0;
var pointNum = 11;//ポイントの数は奇数に
var rd = Math.sin(Math.PI/2);

//左から右へ11ポイントを配置
for (i=0; i<pointNum; i++) {
  pointx[i] = x0+dx*i;
  pointy[i] = y0;
}
//右から左へ10ポイントを配置(10ポイント目は最左)
// 0  1  2  3  4  5  6  7  8  9  10
//20 19 18 17 16 15 14 13 12 11
for(i=pointNum; i<=2*(pointNum-1); i++) {
  pointx[i] = x0+(pointNum-1)*dx + (pointNum-1-i)*dx;
  pointy[i] = y0;
}

myDraw(c_mc);

//描画関数
function myDraw(mc) {
  mc.clear();
  mc.lineStyle(0,0xff0000);
  mc.beginFill(0xff0000,50);
  mc.moveTo(pointx[0],pointy[0]);
  for (i=0; i<2*(pointNum-1); i++) {
    if (i%2 == 1) {
        mc.curveTo(pointx[i],pointy[i],pointx[i+1],pointy[i+1]);
    }
  }
}

//反復運動
c_mc.onEnterFrame = function() {
  for (j=0; j<2*pointNum+1; j++) {
    if (j%2 == 1) {
      if (j%4 == 1) {
        pointy[j] = y0+dy*Math.sin(rd);
      } else {
        pointy[j] = y0-dy*Math.sin(rd);
      }
    }
  }
  myDraw(this);
  rd += 0.1;
};

SAMPLE3

//描画を構成するポイントの座標を配列定義
//pointx0には初期値を記憶させる
var pointx = [];
var pointy = [];
var pointx0 = [];
//線画用ムービークリップ
var c_mc = this.createEmptyMovieClip("c_mc", 1);
//座標、回転角、ポイント数、角度の初期値定義
var x0 = 20;
var y0 = 60;
var dx = 50;
var dy = 100;
var rd = 0;
var pointNum = 11;//ポイントの数は奇数に
var rd = Math.sin(Math.PI/2);

//左から右へ11ポイントを配置
for (i=0; i<pointNum; i++) {
  pointx[i] = x0+dx*i;
  pointx0[i] = pointx[i];
  pointy[i] = y0;
}
//右から左へ10ポイントを配置(10ポイント目は最左)
// 0  1  2  3  4  5  6  7  8  9  10
//20 19 18 17 16 15 14 13 12 11
for(i=pointNum; i<=2*(pointNum-1); i++) {
  pointx[i] = x0+(pointNum-1)*dx + (pointNum-1-i)*dx;
  pointx0[i] = pointx[i];
  pointy[i] = y0;
}

myDraw(c_mc);

//描画関数
function myDraw(mc) {
  mc.clear();
  mc.lineStyle(0,0xff0000);
  mc.beginFill(0xff0000,50);
  mc.moveTo(pointx[0],pointy[0]);
  for (i=0; i<2*(pointNum-1); i++) {
    if (i%2 == 1) {
        mc.curveTo(pointx[i],pointy[i],pointx[i+1],pointy[i+1]);
    }
  }
}

//反復運動
c_mc.onEnterFrame = function() {
  for (j=0; j<2*pointNum-1; j++) {
    if (j%2 == 1) {
      if (j%4 == 1) {
        pointy[j] = y0+dy*Math.sin(Math.PI/2);
      } else {
        pointy[j] = y0-dy*Math.sin(Math.PI/2);
      }
    }
    if(j<pointNum) {
      pointx[j] = pointx0[j] + 5*j*Math.sin(2*rd);
    } else {
      pointx[j] = pointx0[j] + 5*(2*(pointNum-1)-j)*Math.sin(2*rd);
    }
  }
  myDraw(this);
  rd += 0.1;
};

SAMPLE4


      //線画用ムービークリップ
var c_mc = this.createEmptyMovieClip("c_mc", 1);

//四辺形になるようにポイントを定義
//サフィックス数字二桁は中点
var x1 = 50;
var y1 = 50;
var x12 = 100;
var y12 = 50;
var x2 = 150;
var y2 = 50;
var x23 = 150;
var y23 = 100;
var x3 = 150;
var y3 = 150;
var x34 = 100;
var y34 = 150;
var x4 = 50;
var y4 = 150;
var x41 = 50;
var y41 = 100;
//初期角度
var rd = Math.PI;
//振れ幅
var r = 43;

//描画関数
function myDraw(mc) {
  mc.clear();
  mc.lineStyle(0,0xff0000);
  mc.beginFill(0xff0000,50);
  mc.moveTo(x1,y1);
  mc.curveTo(x12,y12,x2,y2);
  mc.curveTo(x23,y23,x3,y3);
  mc.curveTo(x34,y34,x4,y4);
  mc.curveTo(x41,y41,x1,y1);
  mc.endFill();
}

//反復運動
//四角形に戻ったところで初期角度に返す
c_mc.onEnterFrame = function() {
  y12 = 50 + r * Math.sin(rd);
  x23 = 150 - r * Math.sin(rd);
  y34 = 150 - r * Math.sin(rd);
  x41 = 50 + r * Math.sin(rd);
  myDraw(this);
  if (rd >= 2 * Math.PI) {
    rd = Math.PI;
  } else {
    rd += 0.05;
  }
};

SAMPLE5


      //線画用ムービークリップ
var c_mc = this.createEmptyMovieClip("c_mc", 1);

//ハート形になるようにポイントを定義
//x0,y0が最下部
//サフィックス数字二桁は中点
var x0 = 120;
var y0 = 250;
var x01= 10;
var y01= 210;
var x1 = 20;
var y1 = 90;
var x12= 40;
var y12= -20;
var x2 = 120;
var y2 = 80;
var x23= 210;
var y23= -20;
var x3 = 220;
var y3 = 90
var x30= 220;
var y30= 210;
//初期角度
rd = Math.PI;
//振れ幅
r = 10;

myDraw(c_mc);

//描画関数
function myDraw(mc) {
	mc.clear();
	mc.lineStyle(1,0xff0000);
	mc.beginFill(0xff0000,50);
	mc.moveTo(x0,y0);
	mc.curveTo(x01,y01,x1,y1);
	mc.curveTo(x12,y12,x2,y2);
	mc.curveTo(x23,y23,x3,y3);
	mc.curveTo(x30,y30,x0,y0);
}

//反復運動
//上部3点、最下部を上下に
//左右4点を左右に反復させる
c_mc.onEnterFrame = function() {
	y0 = 250 + r * Math.sin(rd)/2;
	x01= 10 + r * Math.sin(rd);
	x1 = 20 + r * Math.sin(rd)/2;
	x3 = 220 - r * Math.sin(rd)/2;
	y12 = -20 - r * Math.sin(rd);
	y2 = 80 - r * Math.sin(rd)/2;
	y23 = -20 - r * Math.sin(rd);
	x30 = 220 - r * Math.sin(rd);
	myDraw(this);
	rd += 0.2;
}

HOME　　　お勉強総リスト

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。