FLASHのお勉強_フォトビューアー32_画像が分割されて回転・切替

　数多くの、サイズの小さなインスタンス（ここではビーズのような粒）の集合体として、文字を描くというスクリプトのお勉強である。　小さなインスタンスとしては、球状物や、星、木の葉などいろいろなものを作成しようとするムービーに応じて選択できるし、出来上がる形状物としても、文字だけでなく、いろいろな形状の描画をシンボルに変換したものが使用可能である。
　本SAMPLE作成の手法としては、以下のステップを用いた。
　（１）テキスト文字をシェイプに分解し、ムービークリップに変換する。
　（２）ビーズを文字が描かれている矩形領域にランダムに配置する。
　（３）hitTestで文字のシェイプ部分にhitしているものはそのまま、それ以外はもう一度矩形領域にランダムにばらまく。
　（４）（３）を繰り返し、すべてを文字シェイプにhitさせ、hitしたものは、そのhitした時の座標を記憶させる（targetx,targety）。
　（５）それぞれのビーズインスタンスを、初めにばらまいた時の座標から、hitした座標まで遅延効果付きで移動させる。

SAMPLE1 SAMPLE3

SAMPLE2

SAMPLE４　　サンプル４は別ページ（ビーズ（粒）で文字を描く（２））にあります。

ステージなどの準備

SAMPLE1
●360*170、24ｆｐｓのステージを設定。　ステージ下部に、スタートボタン（s_btn）、リセットボタン（r_btn）を配置。
●「挿入」ー「新規シンボル（ムービークリップ）」画面で、座標（0,0）にテキストツールで「ようこそ」と記述し（もちろん表示したい文字で良い）、全体を選択して ctrl+B キーを2回押し、シェイプに変換する。
ここでは、HG丸ｺﾞｼｯｸM-PRO、90ポイントのフォントを用いたが、好みのものでよい。色は何色でも良い（スクリプトでalphaを0にする）
シンボル名、リンケージ識別子を、char_mc とした。
●「挿入」ー「新規シンボル（ムービークリップ）」画面で、中心が（0，0）となるように、直径4ｐｘ程度の円を描く。　サイズはスクリプトで設定するので適当でよく、色は好みのものにする（ここでは、ランダムに着色するので何色でも良い）。
シンボル名、リンケージ識別子を dot_mc とした。

SAMPLE2
●SAMPLE1との違いは、2番目のステップで、ctrl+B キーを1回押したところで、一文字ずつ別々にシンボル（ムービークリップ）に変換する。シンボルに変換する前に、各文字につきctrl+B キーをもう1回押してシェイプに変換しておく。
シンボル名、リンケージ識別子をそれぞれ、c1,c2,c3,c4 とした。

SAMPLE3
●200*400、12ｆｐｓのステージを設定。　ステージ下部にスタートボタン s_btn を配置。
●ステージ中央、スタートボタンの上部に、テキストツールで「紅」を記述し、ctrl+B キーを2回押してシェイプに変換したのち、シンボルに変換し、インスタンス名を target_mc とする。　文字サイズ、フォントは好みのものでよい。
●ステージにもみじのイラストを読み込み、シンボル（ムービークリップ、基準点中央）に変換し、リンケージ識別子をmomijiとする。

スクリプト　（as2.0）

SAMPLE1

//ビーズのサイズ
var dotSize = 4;
//ビーズの総数
var dotNum = 800;
//文字列表示位置（左上）
var x0 = 5;
var y0 = 20;

//文字列インスタンス
this.attachMovie("char_mc","char_mc",0);
char_mc._x = x0;
char_mc._y = y0;
char_mc._xscale = char_mc._yscale = 100;
char_mc._alpha = 0;

//START ボタンリリースで
s_btn.onRelease = function():Void {
  s_btn.enabled = false;
  s_btnclick = true;
  r_btnclick = false;
  init();
};
//RESET ボタンリリースで
r_btn.onRelease = function():Void {
  s_btn.enabled = true;
  r_btn.enabled = false;
  r_btnclick = true;
  s_btnclick = false;
  init();
};

//初期配置
init();

//ビーズの初期配置関数
function init():Void {
    for (i=1; i<dotNum; i++) {
      mc = attachMovie("dot_mc", "dot"+i, i);
      mc._width = mc._height=dotSize;
      mc._x = mc.x0 = char_mc._x + char_mc._width*Math.random();
      mc._y = mc.y0 = char_mc._y + char_mc._height*Math.random();
      var color = new Color(mc);
      color.setRGB(Math.floor(Math.random()*256*256*256));
      mc.finished = false;
      target(mc);
    }
}

//移動先の文字を含む矩形領域を設定する関数
function target(mc):Void {
    mc.targetx = char_mc._x + char_mc._width*Math.random();
    mc.targety = char_mc._y + char_mc._height*Math.random();
    arrangeMc(mc);
}

//移動先の文字領域を設定する関数
function arrangeMc(mc):Void {
  if (mc.finished == false) {
    mc.onEnterFrame = function() {
      if (s_btnclick) {
        this._visible = false;
        this._x = this.targetx;
        this._y = this.targety;
        if (!char_mc.hitTest(this._x, this._y, true)) {
          target(this);
        } else {
          this._visible = true;
          this._x = this.x0;
          this._y = this.y0;
          this.finished = true;
          delete this.onEnterFrame;
          this.onEnterFrame = toTarget;
        }
      } else {
        this.onEnterFrame = toTarget;
      }
    };
  }
}

//文字領域に移動する関数
function toTarget():Void {
  this._x += (this.targetx-this._x)/10;
  this._y += (this.targety-this._y)/10;
  if(Math.abs(this._x-this.targetx)<3) {
    this._x = this.targetx;
    this._y = this.targety;
    delete this.onEnterFrame;
  }
  r_btn.enabled = true;
}

SAMPLE2

//ビーズのサイズ
var dotSize = 4;
//文字毎のビーズの数
var dotNum = 200;
//文字数
var chNum = 4;
//各文字ムービークリップのsize
var charWidth = 80;
var charHeight = 90;
//表示間隔(ミリ秒)
var interval = 600;
//文字列表示位置（1字目左上）
var x0 = 20;
var y0 = 20;

//文字インスタンス
for (i=1; i<=chNum; i++) {
  var char = this.attachMovie("c"+i, "ch"+i, i);
  char._x = x0+charWidth*(i-1);
  char._y = y0;
  char._alpha = 0;
}

//START ボタンリリースで
s_btn.onRelease = function():Void  {
  s_btn.enabled = false;
  s_btnclick = true;
  r_btnclick = false;
  k = 1;
  id = setInterval(initialset, interval);
};
//RESET ボタンリリースで
r_btn.onRelease = function():Void  {
  s_btn.enabled = true;
  r_btn.enabled = false;
  r_btnclick = true;
  s_btnclick = false;
  init();
};

//初期配置
init();
function init():Void {
  k = 1;
  for (j=1; j<=chNum; j++) {
    initialset();
  }
}

//ビーズの初期配置関数
function initialset():Void {
  j = k++;
  for (i=1; i<dotNum; i++) {
    var d = j*dotNum+i;
    mc = attachMovie("dot_mc", "dot"+d, d);
    mc._width = mc._height=dotSize;
    mc.target_mc = _root["ch"+j];
    mc._x = mc.x0=mc.target_mc._x+charWidth*Math.random();
    mc._y = mc.y0=mc.target_mc._y+charHeight*Math.random();
    var color = new Color(mc);
    color.setRGB(Math.floor(Math.random()*256*256*256));
    mc.finished = false;
    mc.num = j;
    target(mc);
  }
}

//移動先の文字を含む矩形領域を設定する関数
function target(mc):Void {
  mc.targety = mc.target_mc._y+charHeight*Math.random();
  mc.targetx = mc.target_mc._x+charWidth*Math.random();
  arrangeMc(mc);
}

//移動先の文字領域を設定する関数
function arrangeMc(mc):Void {
  if (mc.finished == false) {
    mc.onEnterFrame = function() {
      if (s_btnclick) {
        this._visible = false;
        this._x = this.targetx;
        this._y = this.targety;
        if (!this.target_mc.hitTest(this._x, this._y, true)) {
          target(this);
        } else {
          this._visible = true;
          this._x = this.x0;
          this._y = this.y0;
          this.finished = true;
          delete this.onEnterFrame;
          this.onEnterFrame = toTarget;
        }
      } else {
        this.onEnterFrame = toTarget;
      }
    };
  }
}

//文字領域に移動する関数
function toTarget():Void {
  this._x += (this.targetx-this._x)/10;
  this._y += (this.targety-this._y)/10;
  if (Math.abs(this._x-this.targetx)<3) {
    this._x = this.targetx;
    this._y = this.targety;
    delete this.onEnterFrame;
    if (this.num == chNum) {
      clearInterval(id);
    }
  }
  r_btn.enabled = true;
}

SAMPLE3

//もみじの葉のサイズ
var dotSize = 25;
//もみじの葉の数
var dotNum = 220;
//文字（紅）の大きさ（好みの大きさに調整）
target_mc._xscale = target_mc._yscale = 150;
//文字を見えなくする
target_mc._alpha = 0;

//スタートボタンのリリースで
s_btn.onRelease = function() {
  s_btn.enabled = false;
  init();
};

//初期設定
function init() {
  for (i=1; i<dotNum; i++) {
    mc = attachMovie("momiji", "dot"+i, i);
    mc._width = mc._height = dotSize;
    mc.x0 = 10+target_mc._width*Math.random();
    mc.y0 = 30 + 50*Math.random();
    mc._alpha = 70;
    mc.finished = false;
    target(mc);
  }
}

function target(mc) {
  mc.targetx = (target_mc._x-target_mc._width/2)+target_mc._width*Math.random();
  mc.targety = (target_mc._y-target_mc._height/2)+target_mc._height*Math.random();
  arrangeMc(mc);
}


function arrangeMc(mc) {
  if (mc.finished == false) {
    mc.onEnterFrame = function() {
      this._visible = false;
      this._x = this.targetx;
      this._y = this.targety;
      if (target_mc.hitTest(this._x, this._y, true) == false) {
        target(this);
      } else {
        this._visible = true;
        this._x = this.x0;
        this._y = this.y0;
        this.finished = true;
        delete this.onEnterFrame;
        this.onEnterFrame = toTarget;
      }
    };
  }
}

function toTarget() {
  this._x += (this.targetx-this._x)/7;
  this._y += (this.targety-this._y)/7;
  s_btn.enabled = true;
}

スクリプトの若干の説明

mc.targetx = char_mc._x + char_mc._width*Math.random();
mc.targety = char_mc._y + char_mc._height*Math.random();
　ビーズの仮移動先を文字を含む矩形領域に設定する
if (!char_mc.hitTest(this._x, this._y, true)) {
target(this);
} else {
　もしビーズの仮移動先が文字部分に接していなかったらもう一度 target 関数に戻って仮移動先を再設定する。そして、もし接していたら正式移動先（targetx,y）に設定し、そこへの移動処理に移す。

HOME　　　お勉強総リスト