この講座は,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での作成方法:
●ステージに枠線無し矩形を描き、塗りで、カラーパレットの下にある線状グラデーションを選ぶ
●矩形を選択した状態で、カラーミキサーウインドウの色バーで右側にある印(エンピツ?)を左にドラッグして、適当な幅のところに持ってくる(このとき黒色を白色に変えておいた方が気持ちがよい)
●左の印をdクリックしてカラーパレットで、アルファを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(赤)のデータをコピーする
 チャンネル2は緑、チャンネル4は青
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)