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

この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです。

FLASH講座　ーアクションスクリプトの実践的事始めー
活用編
(14) BitmapData.copyChannelを使って画像に透明グラデーション　　

　画像（写真）そのものの透明グラデーションが出来れば面白いかなと思い、BitmapDataクラスのcopyChannelを使った方法を講座にしました。

　方法としては、透明グラデーション（線状、放射状など）をFLASHやFireworksなどのソフトを使って作成し、アルファチャンネルをもったPNGとして保存します。　このアルファチャンネルのデータを別の写真にコピーしますが、直接写真のBitmapDataにコピーすることが出来ませんでした。
それで新しい矩形のBitmapDataを作成し、写真のRGBチャンネルと、PNGのアルファチャンネルをコピーして完成させました。

　なお、同様の画像は、photoshop でレイヤーマスクを使ってグラデーションをかければ作成できます。
　このようにBitmapDataクラスを使ってスクリプトで作成する方法には、拡張性などのメリットがあるのではないでしょうか。　

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を実行するスクリプト

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

　このサイトで使用しましたflashソフトはflash mx 2004年版（Flash Japan）- flash8 及び　FlashCS3-2007年版です。
　flash講座（フラッシュ講座）は、Yoshioka氏（通称、ひげ親父）による制作です。　コツコツと作られたflash素材（flashアニメ、スクリプト）はユーザーの方により保存変更され動画flash（動画フラッシュ）や携帯flash（待受flash）として利用されて来ました。
　氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。　
　　macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。　引き続きご愛顧承りますよう、よろしくお願いいたします。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（by　Hiraoka）

HOME　　　Flash講座総リスト　　　アクションスクリプトの実践的事始め-活用編(15)