Tweenerによるモーションタイポサンプルコード

forked:2
favorite:5
lines:384
license : MIT License
modified : 2009-11-19 11:54:11

Embed: Tweet

package {
        
    import caurina.transitions.Tweener;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Loader;
    import flash.display.SpreadMethod;
    import flash.display.Sprite;
    import flash.display.DisplayObjectContainer;
    import flash.events.Event;
    import flash.filters.BlurFilter;
    import flash.net.URLRequest;
    import flash.text.TextField;
    import flash.system.Security;

public class C2_3 extends Sprite {
        //logo画像
        private var _img1:Sprite;
        private var _img2:Sprite;
        private var _img3:Sprite;
        //_img1,_img2,_img3のコンテナ
        private var _container:Sprite;
        private var _spiral:Spiral;
        private var _defaultPositions:Array;
        public function C2_3() {
            init();
        }
        private function init():void {
            //ロゴ画像のコンテナ
            _container = addChild( new Sprite()) as Sprite;
            _container.x = stage.stageWidth*.5;
            _container.y = stage.stageHeight*.5;
            loadImages();
            addEventListener(Event.COMPLETE, completeHandler);
        }
        
        private function completeHandler(e:Event):void {
            removeEventListener(Event.COMPLETE, completeHandler);
            //復元可能なように初期値を格納
            _defaultPositions = [
                [_img1.x, _img1.y],
                [_img2.x, _img2.y],
                [_img3.x, _img3.y],
            ];
            _spiral = new Spiral(_container, _img1, _img2, _img3)
            //ここからアニメーションがスタート
            fadeIn();
        }
        
        private function fadeIn():void{
            Tweener.addTween(_img1, {
                alpha:1, time:.2, transition:"linear" 
            } );
            Tweener.addTween(_img2, { 
                alpha:1, time:.2, delay:.1, transition:"linear" 
            } );
            Tweener.addTween(_img3, { 
                alpha:1, time:.2, delay:.2, transition:"linear",
                onComplete:rotation3d
            } );
        }
        
        private function rotation3d():void {
            Tweener.addTween(_container, {
                rotationY:720, time:2, transition:"easeOutCubic",
                onComplete:alignCenter
            } );
        }
        
        private function alignCenter():void {
            Tweener.addTween(_img1, {
                x:0, time:1 , transition:"easeOutSine" 
            } );
            Tweener.addTween(_img2, { 
                x:0, time:1 , transition:"easeOutSine"
            } );
            Tweener.addTween(_img3, { 
                x:0, time:1 , transition:"easeOutSine", 
                onComplete:moveSpiral 
            } );
        }
        
        private function moveSpiral():void {
            Tweener.addTween(_spiral, { 
                radian:30, time:8, transition:"easeInSine" 
            } );
            Tweener.addTween(_spiral, { 
                radius:220, time:8, transition:"linear" 
            } );
            Tweener.addTween(_spiral, { 
                radian:60, time:8, radius:0, 
                delay:8, transition:"easeOutSine"
            } );
        
            Tweener.addTween(_img1, { 
                x:_defaultPositions[0][0], 
                time:1, delay:16 , transition:"easeOutSine" 
            } );
            Tweener.addTween(_img2, { 
                x:_defaultPositions[1][0],
                time:1, delay:16 , transition:"easeOutSine" 
            } );
            Tweener.addTween(_img3, { 
                x:_defaultPositions[2][0], 
                time:1, delay:16 ,
                transition:"easeOutSine", onComplete:zoom 
            } );
        }
        
        private function zoom():void { 
            Tweener.addTween(_img1, {
                scaleX:1,
                x:_defaultPositions[0][0],
                y:_defaultPositions[0][1],
                time:.8, 
                transition:"easeOutElastic" 
            } );
            Tweener.addTween(_img2, { 
                scaleX:1,
                x:_defaultPositions[1][0],
                y:_defaultPositions[1][1],
                time:.8, 
                transition:"easeOutElastic" 
            } );
            Tweener.addTween(_img3, { 
                scaleX:1,
                x:_defaultPositions[2][0],
                y:_defaultPositions[2][1],
                time:.8, 
                transition:"easeOutElastic"
            } );         
            Tweener.addTween(_container, { 
                scaleX:1.5, rotation: -45, time:.8,
                transition:"easeOutElastic"
            } );            
            Tweener.addTween(_container, { 
                scaleX:1.5, rotation:30, time:.8, delay:.8,
                transition:"easeOutElastic",
                onComplete:scroll
            } ); 
        }
        
        private function scroll():void{
            Tweener.addTween(_img1, {
                scaleY:3, y:-60, time:1.5, 
                transition:"easeOutElastic" 
            } );
            Tweener.addTween(_img2, { 
                scaleY:3, y:60, time:1.5, 
                transition:"easeOutElastic" 
            } );
            Tweener.addTween(_img3, { 
                scaleY:3, y:-60, time:1.5, 
                transition:"easeOutElastic",
                onComplete:reset
            } );
        }
        
        private function reset():void{
            Tweener.addTween(_img1, {
                scaleY:1, y:0, time:.5, 
                transition:"easeOutElastic" 
            } );
            Tweener.addTween(_img2, { 
                scaleY:1, y:0, time:.5, 
                transition:"easeOutElastic" 
            } );
            Tweener.addTween(_img3, { 
                scaleY:1, y:0, time:.5, 
                transition:"easeOutElastic",
                onComplete:compress
            } );
        }
        
        private function compress():void{
            Tweener.addTween(_img1, {
                scaleX:.4,
                x:_defaultPositions[0][0] + 111,
                time:1, 
                transition:"easeInOutBack" 
            } );
            Tweener.addTween(_img2, { 
                scaleX:.4, time:1, 
                transition:"easeInOutBack" 
            } );
            Tweener.addTween(_img3, { 
                scaleX:.4,
                x:_defaultPositions[2][0] - 90,
                time:1, 
                transition:"easeInOutBack",
                onComplete:charge
            } );
        }
        
        private function charge():void {
            Tweener.addTween(_img1, {
                scaleX:.2,
                x:_defaultPositions[0][0] + 160,
                time:1, 
                transition:"easeInCubic" 
            } );
            Tweener.addTween(_img2, { 
                scaleX:.2,
                time:1, 
                transition:"easeInCubic" 
            } );
            Tweener.addTween(_img3, { 
                scaleX:.2,
                x:_defaultPositions[2][0] - 130,
                time:1, 
                transition:"easeInCubic",
                onComplete:destroy
            } );
        }
        
        private function destroy():void {
            Tweener.addTween(_img1, {
                z:-800, rotation:1080, time:1, 
                transition:"linear" 
            } );
            Tweener.addTween(_img2, { 
                z:-1200, rotation:1080, time:1, 
                transition:"linear" 
            } );
            Tweener.addTween(_img3, { 
                z:-800, rotation:1080, time:1, 
                transition:"linear" 
            } );
            Tweener.addTween(_img1, {
                x:0, y:-140, time:1, 
                transition:"easeOutCubic" 
            } );
            Tweener.addTween(_img2, { 
                x:-180, y:180, time:1, 
                transition:"easeOutCubic" 
            } );
            Tweener.addTween(_img3, { 
                x:120, y:-90, time:1, 
                transition:"easeOutCubic",
                onComplete:restore
            } );
        }
        private function restore():void {
            Tweener.addTween(_container, {
                x:stage.stageWidth*.5, y:stage.stageHeight*.5, z:0,
                scaleX:.8, scaleY:.8,
                rotation:0, time:.3, 
                transition:"easeOutCubic" 
            } );
            Tweener.addTween(_img1, {
                x:_defaultPositions[0][0],
                y:_defaultPositions[0][1],
                z:0, scaleX:1, rotation:0,
                time:.3, 
                transition:"easeOutCubic" 
            } );
            Tweener.addTween(_img2, {
                x:_defaultPositions[1][0],
                y:_defaultPositions[1][1],
                z:0, scaleX:1, rotation:0,
                time:.3, 
                transition:"easeOutCubic" 
            } );
            Tweener.addTween(_img3, {
                x:_defaultPositions[2][0],
                y:_defaultPositions[2][1],
                z:0, scaleX:1, rotation:0,
                time:.3, 
                transition:"easeOutCubic" 
            } );
        }
        
        private function loadImages():void {
            //読み込んだ画像のカウント
            var numLoaded:int = 0;
            Security.loadPolicyFile("http://labs.un-q.net/crossdomain.xml");  
            var loader:Loader = new Loader();
            loader.load(new URLRequest("http://labs.un-q.net/webdb/2_3/logo_1.png"));
            loader.contentLoaderInfo.addEventListener(
                Event.COMPLETE,
                imgCompleteHander
            )
            function imgCompleteHander(e:Event):void {
                loader.contentLoaderInfo.removeEventListener(
                    Event.COMPLETE,
                    imgCompleteHander
                );
                
                switch(++numLoaded) {
                    case 1:
                        //取得した画像を加工してコンテナに追加
                        _img1 = drawBitmap(loader);
                        _img1.alpha = 0;
                        //次の画像を取り込む
                        loader = new Loader();
                        loader.load(new URLRequest("http://labs.un-q.net/webdb/2_3/logo_2.png"));
                        loader.contentLoaderInfo.addEventListener(
                            Event.COMPLETE,
                            imgCompleteHander
                        );
                    break;
                    case 2:
                        _img2 = drawBitmap(loader);
                        _img2.alpha = 0;
                        loader = new Loader();
                        loader.load(new URLRequest("http://labs.un-q.net/webdb/2_3/logo_3.png"));
                        loader.contentLoaderInfo.addEventListener(
                            Event.COMPLETE,
                            imgCompleteHander
                        );
                    break;
                    case 3:
                        _img3 = drawBitmap(loader);
                        _img3.alpha = 0;
                        loader = null;
                        setImagePositions();
                    break;
                    default:
                    break;
                }
            }
            function setImagePositions():void {
                //コンテナに各画像を追加
                _container.addChild(_img1);
                _container.addChild(_img2);
                _container.addChild(_img3);
                //位置を調整し、縦横を中央にそろえる。
                var offset:Number = (_img1.width + _img2.width + _img3.width) * .5;
                _img1.x = _img1.width * .5 - offset;
                _img2.x = _img1.width + _img2.width * .5 - offset - 2;
                _img3.x = offset - _img3.width * .5 - 5;

dispatchEvent(new Event(Event.COMPLETE));
            }
            function drawBitmap(loader:Loader):Sprite {
                //取り込んだ画像をビットマップに渡してスムージングをかける
                var bmd:BitmapData = new BitmapData(
                    loader.width, loader.height,
                    true, 0
                );
                bmd.draw(loader);
                var img:Bitmap = new Bitmap(bmd)
                img.smoothing = true;
                //画像をセンタリングする
                var container:Sprite = new Sprite();
                container.addChild(img);
                img.x = img.width * -.5;
                img.y = img.height * -.5;
                return container;
            }
        }
    }
}

class Spiral {
    import flash.display.Sprite;
    //回転角度
    private var _radian:Number;
    //半径
    private var _radius:Number;
    private var _container:Sprite;
    private var _img1:Sprite;
    private var _img2:Sprite;
    private var _img3:Sprite;
    
    private const OFFSET_ANGLE_1:Number = Math.PI * 2 / 3;
    private const OFFSET_ANGLE_2:Number = Math.PI * 4 / 3;
    public function Spiral(container:Sprite,img1:Sprite,img2:Sprite,img3:Sprite):void {
        _container = container
        _img1 = img1;
        _img2 = img2;
        _img3 = img3;
        _radian = 0;
        _radius = 0;
    }
    
    public function get radian():Number { return _radian; }
    public function set radian(value:Number):void {
        _radian = value;
        
        //螺旋回転を行う
        _img1.x = Math.cos(value) * _radius;
        _img1.y = Math.sin(value) * _radius;
        _img1.z = Math.sin(value*.5) * _radius;
        _img2.x = Math.cos(value + OFFSET_ANGLE_1) * _radius;
        _img2.y = Math.sin(value + OFFSET_ANGLE_1) * _radius;
        _img2.z = Math.sin(value*.5 + OFFSET_ANGLE_1) * _radius;
        _img3.x = Math.cos(value + OFFSET_ANGLE_2) * _radius;
        _img3.y = Math.sin(value + OFFSET_ANGLE_2) * _radius;
        _img3.z = Math.sin(value * .5 + OFFSET_ANGLE_2) * _radius;        
        
        //重なり順を入れ替え
        if (_img1.z < _img2.z && _img1.z < _img3.z) {
            _container.setChildIndex(_img1, 2);
            if (_img2.z < _img3.z) {
                _container.setChildIndex(_img2, 1);
            }else {
                _container.setChildIndex(_img3, 1);
            }
        }else if (_img1.z < _img2.z) {
            _container.setChildIndex(_img2, 0);
            _container.setChildIndex(_img1, 1);
            _container.setChildIndex(_img3, 2);
        }else if (_img1.z < _img3.z) {
            _container.setChildIndex(_img3, 0);
            _container.setChildIndex(_img1, 1);
            _container.setChildIndex(_img2, 2);
        }else {
            _container.setChildIndex(_img1, 0);
            if (_img2.z < _img3.z) {
                _container.setChildIndex(_img2, 2);
            }else {
                _container.setChildIndex(_img3, 2);
            }
        }
    }
    
    public function get radius():Number { return _radius; }
    
    public function set radius(value:Number):void 
    {
        _radius = value;
    }
}

Code Fullscreen

Preview Fullscreen