スポンサーサイト

画像をタイル状に分割する

一枚の画像をタイル状に分割するサンプルです。
横／縦の分割数を入力して「分割」ボタンを押すと、画像が分割されます。

分割した画像は、ちょっとクリアっぽい加工をしたムービークリップにして、マウスでドラッグできるよーになってマス。

分割元となる画像はムービークリップとしてステージに配置しています。画像のクリッピングは、bitmap#draw()を使ってマス。

このサンプルのActionScriptはこんなカンジです。

import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.geom.ColorTransform;
import flash.filters.BevelFilter;

// 分割数の初期値
col_txt.text = "12";
row_txt.text = "9";
// 分割ボタン
split_btn.onRelease = doSplit;
// 分割したムービークリップの配列
var tileArray:Array = new Array();
// クリッピング用オブジェクト
var ct:ColorTransform = new ColorTransform();
var rect:Rectangle = new Rectangle(0, 0, 0, 0);
var mtx:Matrix = new Matrix();

// 分割したムービークリップを全消去します。
function clearImages() {
  for (var i:String in tileArray) {
    tileArray[i].removeMovieClip();
  }
  tileArray = new Array();
  // 元画像のアルファを戻す
  image_mc._alpha = 100;
}
// 画像をタイル状に分割します。
function doSplit() {
  // 分割ムービークリップの削除
  clearImages();
  // 分割数
  var colCnt:Number = col_txt.text;
  var rowCnt:Number = row_txt.text;
  // 分割ムービークリップの幅／高さ
  var w:Number = image_mc._width / colCnt;
  var h:Number = image_mc._height / rowCnt;
  // グラデーション用マトリックス
  var go:Number = 1;
  var gw:Number = w - 2 * go;
  var gh:Number = h - 2 * go;
  var gMtx:Matrix = new Matrix();
  gMtx.createGradientBox(gw, gh, Math.PI / 2);
  // ハイライト用マトリックス
  var ho:Number = 1;
  var hw:Number = w - 2 * ho;
  var hh:Number = Math.round(h * 0.4);
  var hMtx:Matrix = new Matrix();
  hMtx.createGradientBox(hw, hh, Math.PI / 2);
  // 分割処理
  for (var iy:Number = 0; iy < rowCnt; iy++) {
    for (var ix:Number = 0; ix < colCnt; ix++) {
      // 画像データの切り出し
      var bitmap:BitmapData = clip(image_mc,
                                   w * ix,
                                   h * iy,
                                   w,
                                   h);
      // ムービークリップ作成
      var d:Number = _root.getNextHighestDepth();
      var mc:MovieClip
        = _root.createEmptyMovieClip("tile_" + d, d);
      // 切り出した画像をムービークリップに描画
      mc.beginBitmapFill(bitmap);
      mc.moveTo(0, 0);
      mc.lineTo(0, h);
      mc.lineTo(w, h);
      mc.lineTo(w, 0);
      mc.lineTo(0, 0);
      mc.endFill();
      // グラデーション
      mc.beginGradientFill("linear",
                           [0x000000, 0xFFFFFF, 0xFFFFFF],
                           [60, 0, 60],
                           [0, 127, 255],
                           gMtx);
      mc.moveTo(go, go);
      mc.lineTo(go, go + gh);
      mc.lineTo(go + gw, go + gh);
      mc.lineTo(go + gw, go);
      mc.lineTo(go, go);
      mc.endFill();
      // ハイライトの描画
      mc.beginGradientFill("linear",
                           [0xFFFFFF, 0xFFFFFF],
                           [95, 20],
                           [0, 255],
                           hMtx);
      mc.moveTo(ho, ho);
      mc.lineTo(ho, ho + hh);
      mc.lineTo(ho + hw, ho + hh);
      mc.lineTo(ho + hw, ho);
      mc.lineTo(ho, ho);
      mc.endFill();
      // 位置
      mc._x = image_mc._x + w * ix;
      mc._y = image_mc._y + h * iy;
      // ドラッグ可能にする
      mc.onPress = function() {
        this.startDrag();
      }
      mc.onRelease = mc.onReleaseOutside = function() {
        this.stopDrag();
      }
      // 作成したムービークリップを配列に追加
      tileArray.push(mc);
    }
  }
  // 元画像のアルファを変更する
  image_mc._alpha = 25;
}
// 指定した位置／サイズで画像をクリッピングします。
function clip(src:Object,
              x:Number,
              y:Number,
              w:Number,
              h:Number):BitmapData {
  // 切り取る矩形
  rect.x = 0;
  rect.y = 0;
  rect.width = w;
  rect.height = h;
  // 元画像を移動
  mtx.tx = -x;
  mtx.ty = -y;
  // 切り取り
  var bitmap:BitmapData = new BitmapData(w, h, true);
  bitmap.draw(src, mtx, ct, "normal", rect, true);
  return bitmap;
}

image_mcというのが元画像のムービークリップで、col_txt, row_txt, split_btnは、２つの入力欄と「分割」ボタンです。

一番下のclipメソッドは、指定したムービークリップ（やら画像やら）を任意の位置／サイズで切り出します。戻り値はBitmapDataオブジェクトです。ココでBitmapData#drawを使ってます。Matrixで平行移動して（位置あわせ）、Rectangleでdrawするサイズを設定ってカンジですね。

doSplit()が、「分割」ボタンを押したときに呼び出されるメソッドで、for文使って次々とclipを呼び出して画像を分割して、ムービークリップ作って、画像貼り付けて、ってやってマス。

単にタイル状に分割したムービークリップを作るだけなら、clip()でBitmapData作った後はMovieClip#attachBitmap使った方がラクそうですが、グラデーションやらハイライトやらつけたいのでココではMovieClip#bitmapFill使ってマス。２つのMovieClip#beginGradientFillは、タイルっぽく見せるための加工デス。

作ったムービークリップのonPressでstartDrag()、onReleaseでstopDrag()をすることで、マウスでつかめるよーにしています。