スポンサーサイト

-------- | --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[ActionScript 3.0] 画像変形

2007-11-05 | 23:48

Adobe MAX レポート:インタラクションデザインの実際:アイデアの開発からリンクされているモナリザの顔を変形させるflashだが、単純な変形で面白い動きをしているので似たようなのを作ってみた。(かなりしょぼいが)。

マウスで矩形を指定して、上下キーでX方向の変形、左右キーでY方向の変形ができます。(矩形を指定するときはマウスをクリックしながら左上から右下に選択してください)

矩形をうまく選択できれば、写っている人を痩せて(太って)見せたり、小顔に見せたりするのに応用できるかも

ソースはかなり修正の余地あり
package
{
    import flash.display.*;
    import flash.geom.*;
    import flash.events.*;
    import flash.utils.*;
   
    [SWF(width='600',height='600',backgroundColor='0xffffff',framerate='30')]
    public class Main extends MovieClip{       
		[Embed(source="monalisa.jpg")]
            private var Bm:Class;

        private var startPos:Point = null;
        private var endPos:Point = null;
        private var dragging:Boolean = false;
        private var scale_x:Number = 1;
        private var scale_y:Number = 1;

        private var original:Bitmap;
        private var bitmaps:Array = new Array();
        private var sp:Sprite;

        public function Main(){
			original= new Bm() as Bitmap;
            addChild(original);

            sp = new Sprite();
            //sp.width = original.width;
            //sp.height = original.height;
            addChild(sp);

            startPos = new Point(0,0);
            endPos = new Point(original.width, original.height);
            
            stage.addEventListener( MouseEvent.MOUSE_DOWN, function(e:Event):void{
                    original.visible = true;
                    dragging = true;
                    clearBitmaps();
                    sp.graphics.clear();
                    startPos = new Point(stage.mouseX, stage.mouseY);
                    });
            stage.addEventListener( MouseEvent.MOUSE_MOVE, function(e:Event):void{
                    if(dragging && startPos.x < stage.mouseX && startPos.y < stage.mouseY){
                    sp.graphics.clear();
                    sp.graphics.lineStyle(3,0xff00,0.8);
                    sp.graphics.moveTo(startPos.x, startPos.y);
                    sp.graphics.lineTo(stage.mouseX, startPos.y);
                    sp.graphics.lineTo(stage.mouseX, stage.mouseY);
                    sp.graphics.lineTo(startPos.x, stage.mouseY);
                    sp.graphics.lineTo(startPos.x, startPos.y);
                    }
                    });
            stage.addEventListener( MouseEvent.MOUSE_UP, function(e:Event):void{
                    var x:int = (stage.mouseX >= original.width) ?  original.width - 1
                    :stage.mouseX;
                    var y:int = (stage.mouseY >= original.height) ?  original.height - 1
                    :stage.mouseY;
                    if(dragging && startPos.x < x && startPos.y < y){
                    original.visible = false;
                    endPos = new Point(x,y);
                    divideImage();
                    }
                    dragging = false;
                    });
            stage.addEventListener(KeyboardEvent.KEY_DOWN, function(e:KeyboardEvent):void{
                    trace(e.keyCode);
                    if(e.keyCode == 38){       // up
                    scale_y += 0.1
                    changeScale();
                    }else if(e.keyCode == 40){ // down
                    scale_y -= 0.1
                    if(scale_y < 0)
                    scale_y = 0;
                    changeScale();
                    }else if(e.keyCode == 37){ // left
                    scale_x -= 0.1
                    if(scale_x < 0)
                    scale_x = 0;
                    changeScale();
                    }else if(e.keyCode == 39){ // right
                    scale_x += 0.1
                    changeScale();
                    }
                    });
        }

        private function changeScale():void{
            if (startPos.x + original.width - endPos.x == 0 ||
                startPos.y + original.height - endPos.y == 0)
                    return;

            var w0:int = startPos.x * (original.width - scale_x*(endPos.x - startPos.x))
                / (startPos.x + original.width - endPos.x);
            var w2:int =  (original.width - endPos.x) * (original.width - scale_x*(endPos.x - startPos.x))
                / (startPos.x + original.width - endPos.x);

            bitmaps[0].width = bitmaps[3].width = bitmaps[6].width = w0;
            bitmaps[2].width = bitmaps[5].width = bitmaps[8].width = w2;

            bitmaps[1].scaleX = scale_x;
            bitmaps[4].scaleX = scale_x;
            bitmaps[7].scaleX = scale_x;

            bitmaps[1].x = bitmaps[4].x = bitmaps[7].x = w0;
            bitmaps[2].x = bitmaps[5].x = bitmaps[8].x = bitmaps[0].width + bitmaps[1].width;

            var h0:int = startPos.y * (original.height - scale_y*(endPos.y - startPos.y))
                / (startPos.y + original.height - endPos.y);
            var h2:int = (original.height - endPos.y) * (original.height - scale_y*(endPos.y - startPos.y))
                / (startPos.y + original.height - endPos.y);

            bitmaps[0].height = bitmaps[1].height = bitmaps[2].height = 
                bitmaps[3].y = bitmaps[4].y = bitmaps[5].y = h0;
            bitmaps[6].height = bitmaps[7].height = bitmaps[8].height = h2;

            bitmaps[3].scaleY = scale_y;
            bitmaps[4].scaleY = scale_y;
            bitmaps[5].scaleY = scale_y;

            bitmaps[6].y = bitmaps[7].y = bitmaps[8].y = bitmaps[0].height + bitmaps[3].height;

            drawLine();
        }

        private function drawLine():void{
            sp.graphics.clear();
            sp.graphics.lineStyle(2,0xff,0.7);
            sp.graphics.moveTo(original.width, bitmaps[3].y);
            sp.graphics.lineTo(original.width+10, bitmaps[3].y);
            sp.graphics.moveTo(original.width, bitmaps[6].y);
            sp.graphics.lineTo(original.width+10, bitmaps[6].y);
            sp.graphics.moveTo(bitmaps[1].x, original.height);
            sp.graphics.lineTo(bitmaps[1].x, original.height+10);
            sp.graphics.moveTo(bitmaps[2].x, original.height);
            sp.graphics.lineTo(bitmaps[2].x, original.height+10);
        }

        private function divideImage():void{
            scale_x = scale_y = 1;
 
            clearBitmaps();

            var rects:Array = [
                new Rectangle(0,          0          ,startPos.x, startPos.y)
                ,new Rectangle(startPos.x,0          ,endPos.x - startPos.x, startPos.y)
                ,new Rectangle(endPos.x,  0          ,original.width - endPos.x, startPos.y)
                ,new Rectangle(0         ,startPos.y ,startPos.x, endPos.y - startPos.y)
                ,new Rectangle(startPos.x,startPos.y ,endPos.x - startPos.x, endPos.y - startPos.y)
                ,new Rectangle(endPos.x  ,startPos.y ,original.width - endPos.x, endPos.y - startPos.y)
                ,new Rectangle(0         ,endPos.y,startPos.x, original.height - endPos.y)
                ,new Rectangle(startPos.x,endPos.y,endPos.x - startPos.x, original.height - endPos.y)
                ,new Rectangle(endPos.x  ,endPos.y,original.width - endPos.x, original.height - endPos.y)
                ];

            for each (var rect:Rectangle in rects){
                var bmd:BitmapData = new BitmapData(rect.width, rect.height);
                bmd.copyPixels(original.bitmapData, rect, new Point(0 ,0));
                var bm:Bitmap = new Bitmap(bmd);
                bitmaps.push(bm);
                addChild(bm);
                bm.x = rect.x;
                bm.y = rect.y;
            }

            drawLine();
        }

        private function clearBitmaps():void{
            for each(var b:Bitmap in bitmaps ){
                removeChild(b);
                b.bitmapData.dispose();
            }
            bitmaps = new Array();
        }
    }
}

スポンサーサイト

Comment

Post a comment

Secret

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。