FLASHのお勉強_アクションスクリプトaction script_BitmapData.copychannel を使って画像に透明グラデーションをかける

FLASHのお勉強　ーアクションスクリプトの実践的事始めー

(42) BitmapData.copyChannelを使って画像に透明グラデーション 　　2007/2/21

　画像（写真）そのものの透明グラデーションが出来れば面白いかなと思い、BitmapDataクラスのcopyChannelを使った方法を勉強することにした。　方法としては、透明グラデーション（線状、放射状など）をFLASHやFireworksなどのソフトを使って作成し、アルファチャンネルをもったPNGとして保存する。　このアルファチャンネルのデータを別の写真にコピーするのだが、直接写真のBitmapDataにコピーすることが出来なかったので、新しい矩形のBitmapDataを作成し、ここに、写真のRGBチャンネルと、PNGのアルファチャンネルをコピーして完成させた。
　なお、同様の画像は、photoshop でレイヤーマスクを使ってグラデーションをかければ作成できる。　このようにBitmapDataクラスを使ってスクリプトで作成する方法には、拡張性などのメリットがあるのではなかろうか。
　ここに示すSAMPLEは私の撮った花の写真のスライドショーであるが、題材が余り適していなかったのか、その効果が十分出ているとは思えない。　もっと適した題材に応用していただきたいと思っている。

SAMPLE

ステージの準備

●370*200のステージ（背景黒,12fps）を設定
●ここでは、写真の出入りする部分にテキスチャー効果のある灰色スクリーンを描いた
●画面下部に、nextボタンとbackボタンを配し、インスタンス名をそれぞれ f_btn、b_btn とした
●300*150の写真を4枚（p1.jpg-p4.jpg)をライブリーに読み込み、同名でリンケージを設定
●透明グラデーションを持つ矩形画像ac.png（300*150）をライブリーに読み込み、同名でリンケージを設定

透明グラデーション

ac.png のFLASHでの作成方法：
●ステージに枠線無し矩形を描き、塗りで、カラーパレットの下にある線状グラデーションを選ぶ
●矩形を選択した状態で、カラーミキサーウインドウの色バーで右側にある印（エンピツ？）を左にドラッグして、適当な幅のところに持ってくる（このとき黒色を白色に変えておいた方が気持ちがよい）
●左の印をｄクリックしてカラーパレットで、アルファを0%に設定する
●イメージの書き出しでpngで書き出し、保存する
このようにして出来た矩形画像を背景を付けて示す

スクリプト
_root、FRAME1に記述

import flash.display.BitmapData;
var p_mc:Array = new Array();
acBitmap = BitmapData.loadBitmap("ac.png");
for (var i = 1; i<=4; i++) {
        pnBitmap = BitmapData.loadBitmap("p"+i+".jpg");
        mc = new BitmapData(500, 150);
        mc.copyChannel(pnBitmap, pnBitmap.rectangle, new Point(0, 0), 1, 1);
        mc.copyChannel(pnBitmap, pnBitmap.rectangle, new Point(0, 0), 2, 2);
        mc.copyChannel(pnBitmap, pnBitmap.rectangle, new Point(0, 0), 4, 4);
        mc.copyChannel(acBitmap, acBitmap.rectangle, new Point(0, 0), 8, 8);
        p_mc[i] = this.createEmptyMovieClip("pmc", i);
        p_mc[i]._x = 360;
        p_mc[i]._y = 10;
        p_mc[i].attachBitmap(mc, getNextHighestDepth());
}
pnBitmap.dispose();
acBitmap.dispose();
var j = 1;
slide(j, -120);
f_btn.onRelease = function() {
        if (j<4) {
                j++;
                slide(j, -120);
        }
};
b_btn.onRelease = function() {
        if (j>1) {
                j--;
                slide(j+1, 360);
        }
};
function slide(j, targetx) {
        p_mc[j].onEnterFrame = function() {
                p_mc[j]._x += (targetx-p_mc[j]._x)/9;
                if (Math.abs(p_mc[j]._x-targetx)<2) {
                        p_mc._x = targetx;
                        delete p_mc[j].onEnterFrame;
                }
        };
}

スクリプトの説明

●acBitmap = BitmapData.loadBitmap("ac.png");
　透明グラデーションのアルファチャンネルデータを持つ画像をBitmapDataとしてライブラリーから取り込む
●pnBitmap = BitmapData.loadBitmap("p"+i+".jpg");
　p1-p4.jpg をBitmapDataとして取り込む
●mc = new BitmapData(500, 150);
　500*150の矩形BitmapDataを新たに作成する
●mc.copyChannel(pnBitmap, pnBitmap.rectangle, new Point(0, 0), 1, 1);
　矩形BitmapDataに画像（写真）のチャンネル1（赤）のデータをコピーする
　チャンネル２は緑、チャンネル４は青
●mc.copyChannel(acBitmap, acBitmap.rectangle, new Point(0, 0), 8, 8);
　矩形BitmapDataにグラデーション矩形のアルファチャンネルをコピーする
●p_mc[i] = this.createEmptyMovieClip("pmc", i);
　p_mc[i].attachBitmap(mc, getNextHighestDepth());
　空のムービークリップp_mc[i]を作り、mcと関連づける（mcを表示できるようにする）
●pnBitmap.dispose(); acBitmap.dispose();
　ご用済みの元画像を削除する
●以下は、ボタン操作で関数slideを実行するスクリプト

HOME　　　お勉強総リスト

FLASHのお勉強 ーアクションスクリプトの実践的事始めー

FLASHのお勉強　ーアクションスクリプトの実践的事始めー