海外ブログのこんな記事とかこんな記事を見るとレベルの違いにへこみますが、少しずつ間を詰められるよう精進あるのみ。がんばります。

今回は Flash っぽいフェードイン・フェードアウトを ColorMatrixFilter で作ってみました。

RGB の各成分を元の値から増やしてフェードアウトしてます。Flash ではよく見るエフェクトなので業界の人は食傷気味かもしれませんが、JavaScript でα値をいじるだけのものしか知らなかった私にはかっこよく見えます。

ソースは以下に(45行)。

package {
    import flash.display.*;
    import flash.geom.Point;
    import flash.filters.ColorMatrixFilter;

    [SWF(width="350", height="233")]
    public class ColorMatrixTest extends Sprite {
        [Embed(source='photo1.jpg')]
        private var photo1:Class;

        [Embed(source='photo2.jpg')]
        private var photo2:Class;

        [Embed(source='photo3.jpg')]
        private var photo3:Class;

        private static const FADE:int = 20;
        private static const WAIT:int = 100;

        public function ColorMatrixTest() {
            stage.scaleMode = "noScale";

            var images:Array = [new photo1(), new photo2(), new photo3()];

            var bmp:Bitmap = new Bitmap(new BitmapData(images[0].bitmapData.width, images[0].bitmapData.height));
            addChild(bmp);

            var index:int = 0, count:int = 0;
            addEventListener("enterFrame", function(e:*):void {
                var param:int = count < FADE ? (FADE - count) * 255 / FADE : 
                                               count > FADE + WAIT ? (count - FADE - WAIT) * 255 / FADE : 0;
                var filter:ColorMatrixFilter = new ColorMatrixFilter([
                    1, 0, 0, 0, param,
                    0, 1, 0, 0, param,
                    0, 0, 1, 0, param,
                    0, 0, 0, 1, 0
                ]);
                bmp.bitmapData.applyFilter(images[index].bitmapData, bmp.bitmapData.rect, new Point(0, 0), filter);

                count = count > FADE * 2 + WAIT ? 0 : count + 1;
                index = count != 0 ? index : index + 1 < images.length ? index + 1 : 0;
            });
        }
    }
}