画像切り替えエフェクト

画像切り替えエフェクト
*
* 画像クリックで切り替え

forked:8
favorite:22
lines:159
license : MIT License
modified : 2009-09-23 13:42:45

Embed: Tweet

/**
 * 画像切り替えエフェクト
 *
 * 画像クリックで切り替え
 */
package {
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.BitmapDataChannel;
    import flash.display.BlendMode;
    import flash.display.Sprite;
    import flash.display.Loader;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.ColorTransform;
    import flash.geom.Point;
    import flash.net.URLRequest;
    import flash.system.LoaderContext;
    import net.hires.debug.Stats;
    
    public class ImageSwitch extends Sprite {
        private const STRETCH_NUM:Number = 20;
        private var _image1:Loader = new Loader();
        private var _image2:Loader = new Loader();
        private var _stageBmp:Bitmap;
        private var _curBmpData:BitmapData, _curBmpDataSrc:BitmapData;
        private var _nextBmpData:BitmapData , _nextBmpDataSrc:BitmapData;
        private var _bmpDataC:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true);
        private var _bmpDataM:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true);
        private var _bmpDataY:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true);
        private var _bmpDataK:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true);
        private var _nextBmpDataLoaded:Boolean = false;
        private var _step:Number = 0;
        private var _distance:Number;
        
        public function ImageSwitch() {
            // 切り替える画像読み込み
            var context:LoaderContext = new LoaderContext(true);
            _image1.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImage1);
            _image1.load(new URLRequest('http://farm4.static.flickr.com/3528/3945075114_6ebb81cda0.jpg'), context);
            _image2.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImage2);
            _image2.load(new URLRequest('http://farm3.static.flickr.com/2641/3946201421_8ae35e2022.jpg'), context);
            
            // イベント登録
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
            stage.addEventListener(MouseEvent.CLICK, onClick);
        }
        
        private function onLoadImage1(e:Event):void
        {
            // 読み込んだ画像をBitmapDataに描画
            _curBmpData = new BitmapData(_image1.width, _image1.height, true);
            _curBmpData.draw(_image1);
            _curBmpDataSrc = _curBmpData.clone();
            
            // stageにadd
            _stageBmp = new Bitmap(_curBmpData);
            addChild(_stageBmp);
        }
        
        private function onLoadImage2(e:Event):void
        {
            // 読み込んだ画像をBitmapDataに描画
            _nextBmpData = new BitmapData(_image2.width, _image2.height, true);
            _nextBmpData.draw(_image2);
            _nextBmpDataSrc = _nextBmpData.clone();
            
            _nextBmpDataLoaded = true;
        }
        
        private function onClick(e:MouseEvent):void
        {
            if(! _nextBmpDataLoaded) return;
            _step = 1; // アニメーション開始
            _distance = 1;
        }
        
        private function onEnterFrame(e:Event):void
        {
            switch(_step)
            {
                case 1:
                    // CMYK4色抽出
                    _bmpDataC.copyChannel(
                        _curBmpDataSrc,
                        _curBmpData.rect,
                        new Point(_distance, 0), // 右へ
                        BitmapDataChannel.RED,
                        BitmapDataChannel.RED
                    );
                    _bmpDataM.copyChannel(
                        _curBmpDataSrc,
                        _curBmpData.rect,
                        new Point(0, _distance), // 下へ
                        BitmapDataChannel.GREEN,
                        BitmapDataChannel.GREEN
                    );
                    _bmpDataY.copyChannel(
                        _curBmpDataSrc,
                        _curBmpData.rect,
                        new Point(_distance*-1, 0), // 左へ
                        BitmapDataChannel.BLUE,
                        BitmapDataChannel.BLUE
                    );
                    _bmpDataK.copyChannel(
                        _curBmpDataSrc,
                        _curBmpData.rect,
                        new Point(0, _distance*-1), // 上へ
                        BitmapDataChannel.ALPHA,
                        BitmapDataChannel.ALPHA
                    );
                    
                    // 描画
                    _curBmpData.draw(_bmpDataC, null, new ColorTransform());
                    _curBmpData.draw(_bmpDataM, null, new ColorTransform(), BlendMode.MULTIPLY);
                    _curBmpData.draw(_bmpDataY, null, new ColorTransform(), BlendMode.MULTIPLY);
                    _curBmpData.draw(_bmpDataK, null, new ColorTransform(), BlendMode.MULTIPLY);
                    
                    // 移動距離調整
                    _distance += 4;
                    if(_distance >= STRETCH_NUM)
                    {
                        _step = 2;
                        
                        removeChild(_stageBmp);
                        _stageBmp = new Bitmap(_nextBmpData);
                        addChild(_stageBmp);
                    }
                    break;
                case 2:
                    // CMYK4色抽出
                    _bmpDataC.copyChannel(
                        _nextBmpDataSrc,
                        _nextBmpData.rect,
                        new Point(_distance, 0), // 右から
                        BitmapDataChannel.RED,
                        BitmapDataChannel.RED
                    );
                    _bmpDataM.copyChannel(
                        _nextBmpDataSrc,
                        _nextBmpData.rect,
                        new Point(0, _distance), // 下から
                        BitmapDataChannel.GREEN,
                        BitmapDataChannel.GREEN
                    );
                    _bmpDataY.copyChannel(
                        _nextBmpDataSrc,
                        _nextBmpData.rect,
                        new Point(_distance*-1, 0), // 左へ
                        BitmapDataChannel.BLUE,
                        BitmapDataChannel.BLUE
                    );
                    _bmpDataK.copyChannel(
                        _nextBmpDataSrc,
                        _nextBmpData.rect,
                        new Point(0, _distance*-1), // 上へ
                        BitmapDataChannel.ALPHA,
                        BitmapDataChannel.ALPHA
                    );
                    
                    // 描画
                    _nextBmpData.draw(_bmpDataC, null, new ColorTransform());
                    _nextBmpData.draw(_bmpDataM, null, new ColorTransform(), BlendMode.MULTIPLY);
                    _nextBmpData.draw(_bmpDataY, null, new ColorTransform(), BlendMode.MULTIPLY);
                    _nextBmpData.draw(_bmpDataK, null, new ColorTransform(), BlendMode.MULTIPLY);
                    
                    // 移動距離調整
                    _distance -= 4;
                    if(_distance <= 0)
                    {
                        _nextBmpData = _nextBmpDataSrc;
                        
                        // 移動距離とステップを初期化
                        _distance = 1;
                        _step = 0;
                        
                        // 切り替え前の画像と切り替え後の画像の入れ物を入れ替え
                        var tmpBmpData:BitmapData = _curBmpDataSrc.clone();
                        _curBmpDataSrc = _nextBmpDataSrc.clone();
                        _nextBmpDataSrc = tmpBmpData.clone();
                        
                        // それぞれの表示用BitmapDataを綺麗な画像にしておく
                        _curBmpData = _curBmpDataSrc.clone();
                        _nextBmpData = _nextBmpDataSrc.clone();
                        
                        // 切り替え後の画像を表示中の画像として設定
                        removeChild(_stageBmp);
                        _stageBmp = new Bitmap(_curBmpData);
                        addChild(_stageBmp);
                    }
                    if(_distance < 1)
                        _distance = 0;
                    break;
            }
        }
    }
}

Code Fullscreen

Preview Fullscreen