スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

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

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




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

分割元となる画像はムービークリップとしてステージに配置しています。画像のクリッピングは、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は、2つの入力欄と「分割」ボタンです。

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

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

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

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

テーマ:Flash - ジャンル:コンピュータ

2007.05.27 | | Comments(0) | Trackback(0) | Flash/ActionScript

コメント

コメントの投稿


秘密にする

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。