NEWS

2017.10.21 「バージョンごとの機能比較」を更新しました。

  • Web creators

アニメーション

画像のモザイク処理 -BitmapDataクラス-

概要

ActionScriptを利用して画像にモザイク処理を施すことができます。

サンプル解説

サンプルの上部はモザイク処理前の元画像で、下部はモザイク処理後の画像です。
モザイクのマス目の大きさはActionScriptの設定値で変更可能です。

作成法

(1)シンボルの作成

・画像をライブラリに読み込み。
・シンボルを作成し、読み込んだ画像を配置。

シンボルの作成

(2)シンボルをステージに配置

・ActionScriptを設定する「Action」レイヤーを作成。
・シンボルを配置する「パーツ」レイヤーを作成。
・ライブラリのシンボルを下図のように配置。
・設置したシンボルのインスタンス名を「mc」と設定。

シンボルの配置

(3)ステージにActionScriptの設定

・レイヤー「Action」に以下のActionScriptを設定。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
import flash.display.BitmapData;
import flash.geom.Matrix;

var ma:Matrix = new Matrix();

var mcW:Number = mc._width;
var mcH:Number = mc._height;
var dot = 20;
var smW:Number = mcW/dot;
var smH:Number = mcH/dot;
var bmp:BitmapData = new BitmapData(smW, smH, true);

_root.createEmptyMovieClip("mc_b", getNextHighestDepth());
_root.mc_b._y = 200;
mc_b.attachBitmap(bmp, 0);
ma.scale( 1/dot, 1/dot );
bmp.draw(mc, ma);
mc_b._width = mcW;
mc_b._height = mcH;

解説

モザイク処理の原理として、BitmapDataオブジェクトに格納された画像等を縮小することでその画像の画素数も減少し単純化されます。
単純化された画像を元の画像の大きさに引き伸ばすとモザイクがかかったように見えます。
ActionScriptの1行目と2行目で今回の処理に必要なクラスを呼び出しています。
4行目は変換行列を指定しており、MovieClipやBitmapDataといった画像を拡大縮小したり回転させる場合に必要となります。
6、7行目で画像のサイズを取得し、8行目ではモザイクのマスの大きさを指定しています。
9、10行目で縮小率を求め、その値を利用して11行目でBitmapDataオブジェクトを生成しています。
13から15行目では空のムービークリップを作成してBitmapDataオブジェクトを割り当てています。
16行目で縮小の指定をし、17行目で縮小したステージ上の「mc」をBitmapDataオブジェクトに描画しています。
BitmapDataに描画することで画素数が減るので、それを元のサイズに戻すのに18、19行目の指定をしています。

ページ上部へ