FLASHのお勉強_アクションスクリプトaction script

　pixelDissolveメソッドとは、なんでしょう。　dissolveとは辞書によると、「映画の手法で、次の画面に映るときのオーバーラップの技法を言う」とある。　すなわち、トランジションの手法ということになる。　そう言えば、TransitionManagerクラスなるものがあって、これは、いろいろなタイプのトランジション効果がたった一行のスクリプトで実現できるというすぐれものである。　その中のひとつにpixelDissolveクラスがあるのだが、pixelDissolveメソッドと多少趣を異にする。　このクラスは、はるかに楽に設定できるが、主としてイメージを分割した矩形をランダムに登場させたり、消滅させたりするトランジションに使われる。　pixelDissolveメソッドのほうは、これに比べて、script は複雑になるものの、自前の味付けがしやすいように思う。　善しあしは別として、今回は、順番からいってpixelDissolveメソッド（as2.0）の方のお勉強とする。

Aのイメージ全体を同時に消滅させたりイメージBに入れ替えたりする
　構文： imageA.pixelDissolve(imageB, rect, point, seed, pix, fillColor);
　　　　　imageA,B はBitamapData、rectはRectangle（処理するソースの矩形範囲）、pointはPoint（処理後の表示座標）
　　　　　 seed（option) は処理の開始に必要なランダム数（初期値：０、このメソッドにはランダム数値の戻り値があり、
　　　　　　　　　これを次のseedにして処理を繰り返すことによって処理が完結する・・script参照）
　　　　　 pix(option) は一度の処理で変化させたいピクセル数で初期値は総ピクセル数の1/30（大きいと早く終わる）
　　　　　 fillColor(option) は塗りつぶす場合の色（初期値は0）

＜ステージの準備＞
・ステージ下部に、二つのボタン(インスタンス名start_btn、reset_btn)を配置する
・ライブラリーにリンケージ名pic1,pic2のイメージを格納する

＜スクリプトの説明＞
var pict2:BitmapData = new BitmapData(150, 150, false, 0x000000);
左の例で、pic1と同じ大きさの黒い矩形
var pict2:BitmapData = BitmapData.loadBitmap("pic2");
右の例で、pic2をロード
seed = pict1.pixelDissolve(pict2, rect, point, seed, pix, 0x00ffffff);
picDissolveの実行と同時に、戻り値を次のseedにする

import flash.display.BitmapData;
import flash.geom.Point;
import flash.geom.Rectangle;
var pict1:BitmapData = BitmapData.loadBitmap("pic1");
//左の例に適用
var pict2:BitmapData = new BitmapData(150, 150, false, 0x000000);
//右の例に適用
//var pict2:BitmapData = BitmapData.loadBitmap("pic2");
var mc:MovieClip = this.createEmptyMovieClip("mc", 0);
mc.attachBitmap(pict1,0);
w = h = pict1.width;
var rect:Rectangle = pict1.rectangle;
var point:Point = new Point(0, 0);
var seed:Number;
var pix:Number = (w*h)/30;
var totalPix:Number = w*h;
var count:Number;
start_btn.onRelease = function() {
  count = 0;
  onEnterFrame = function() {
    seed = pict1.pixelDissolve(pict2, rect, point, seed, pix, 0x00ffffff);
    if (totalPix<count) {
      delete onEnterFrame;
    } else {
      count += pix;
    }
  };
};
reset_btn.onRelease = function() {
  pict1 = BitmapData.loadBitmap("pic1");
  mc.attachBitmap(pict1,0);
}

　Aのイメージの一部（矩形）をBのイメージの同じ位置の部分に変化させて指定のポイントに表示する
　　構文：上に同じ　この例は、rect、pointの意味を実感するためのもの
　　この例では、rectに80*80の矩形を座標(0,0)に設定し（青い矩形枠）、pointを（50,50）に指定している
　　start_btnをリリースすると、pict1の青い枠内に相当するpict2の同じ大きさの矩形部がpointで指定した座標に、
　　dissolveしながら表示される

ポイントのスクリプトだけ以下に示す

var rect:Rectangle = new Rectangle(0, 0, 80, 80);
var point:Point = new Point(50, 50);
var seed:Number = Math.floor(Math.random()*10);
var pix:Number = (80*80)/30;
var totalPix:Number = 80*80;
var count:Number;
start_btn.onRelease = function() {
  count = 0;
  onEnterFrame = function () {
    seed = pict1.pixelDissolve(pict2, rect, point, seed, pix, 0x00ff0000);
    if (totalPix<=count) {
      finished = true;//dissolve中はreset_btnを非アクティブにしている（reset_btnでfalseに）
      delete onEnterFrame;
    } else {
    count += pix;
    }
  };
};

　pixelDissolveを使ったスライドショー（１）－ピクセル単位のトランジションー
　イメージ全体を pixelDissolve トランジションで入れ替えるタイプのスライドショー

<スクリプトの説明>
var img:Array = new Array("pic1", "pic2", "pic3", "pic4", "pic5", "pic6")
ライブラリーに格納されたリンケージ名pic1,,,pic6のイメージを配列として定義
pict2 = BitmapData.loadBitmap(img[n]);
配列の順番にイメージを pict2として切り替える
ID = setInterval(wholeDissolve,5000);
関数 wholeDissolve を5秒毎に実行させる

　pixelDissolveを使ったスライドショー（２）－矩形単位のトランジションー
　イメージを分割して、それぞれがdissolve効果でほかのイメージに変化していくタイプのスライドショー
　 dissolve効果を鮮明に出すため、それぞれの矩形をムービークリップの入れ子にして、タイムラインを個別に設けている
　なお、矩形がランダムに選択されて変化しているが、このscriptは「(70)重複しない乱整数の発生」を参照のこと

<スクリプトの説明>

var n:Number = 0;
イメージ配列の番号（初期値0）

var col:Number = row = 10;
10列10行に分割

part_mc = this.createEmptyMovieClip("part"+i, i);
part_mc.rect = new Rectangle(rx, ry, w/col, h/row);
part_mc.point = new Point(rx, ry);
空のムービークリップインスタンスを作成し、Rectangle、Pointを入れ子にする

rx = w/col*((i-1)%col);
ry = h/row*(Math.floor((i-1)/col));
ムービークリップ（内rect,point）の位置座標

function dissolve(j, n) {
ｎ番目のイメージを pict2 とし、発生した乱整数 j に相当する矩形部の dissolve を実行する関数

function transfer() {
発生させた乱整数の順に dissolve 関数の実施を指令する関数で、すべての分割矩形の dissolve が完了した時点で、2秒間隔をおいて changePic 関数に戻す

function changePic() {
30ミリ秒間隔で transfer 関数を実施させる関数

function generateRandomInt():Array {
乱整数を発生し、配列を戻り値として返す関数

import flash.display.BitmapData;
import flash.geom.Point;
import flash.geom.Rectangle;
var img:Array = new Array("pic1", "pic2", "pic3", "pic4", "pic5", "pic6");
var n:Number = 0;
var pict1:BitmapData = BitmapData.loadBitmap(img[n]);
var pict2:BitmapData;
var mc:MovieClip = this.createEmptyMovieClip("mc", 0);
mc.attachBitmap(pict1,0);
var w:Number = h = pict1.width;
var col:Number = row = 10;
for (i=1; i<=col*row; i++) {
  part_mc = this.createEmptyMovieClip("part"+i, i);
  rx = w/col*((i-1)%col);
  ry = h/row*(Math.floor((i-1)/col));
  part_mc.rect = new Rectangle(rx, ry, w/col, h/row);
  part_mc.point = new Point(rx, ry);
}
var seed:Number;
var pix:Number = (w/col*h/row)/3;
var totalPix:Number = w/col*h/row;
changePic();
function dissolve(j, n) {
  part_mc = _root["part"+j];
  part_mc.count = 0;
  pict2 = BitmapData.loadBitmap(img[n]);
  part_mc.onEnterFrame = function() {
    this.seed = pict1.pixelDissolve(pict2, this.rect, this.point, this.seed, pix, 0xffffff);
    this.count += pix;
    if (this.count>totalPix) {
      delete this.onEnterFrame;
    }
  };
}
function transfer() {
  k++;
  var j:Number = parseInt(int_b[k-1])+1;
  dissolve(j,n);
  if (k>col*row) {
    clearInterval(ID);
    if (n<img.length-1) {
      n++;
    } else {
      n = 0;
    }
    t = getTimer();
    onEnterFrame = function () {
      if (getTimer()-t>2000) {
        changePic();
        delete onEnterFrame;
      }
    };
  }
}
function changePic() {
  k = 0;
  generateRandomInt();
  pict2.dispose();
  ID = setInterval(transfer, 30);
}
function generateRandomInt():Array {
  int_a = [];
  int_b = [];
  for (i=0; i<col*row; i++) {
    int_a[i] = i;
  }
  j = 0;
  a_length = int_a.length;
  while (a_length) {
    int_r = Math.floor(Math.random()*(col*row-j));
    int_b[j] = int_a.splice(int_r, 1);
    j++;
    a_length = int_a.length;
  }
  return int_b;
}

HOME　　　お勉強総リスト