[태그:] Matrix

  • AS로 ProgressBar 그리기

    개인적으로 필요해서 만들게 된 코드입니다. 플래시 오쏘링 툴에서 그리지 않고, 액션스크립트 코드만 가지고 프로그레스 바를 만들 수 있습니다.
    Graphics.beginBitmapFill(), Graphics.drawRoundRect() 메소드로 BitmapData를 칠한 다음, BitmapData.scroll() 메소드로 비트맵을 조작하는게 포인트입니다.

    import flash.display.Sprite;
    import flash.display.BitmapData;
    import flash.display.Graphics;
    import flash.geom.Matrix;
    import flash.utils.Timer;
    import flash.events.TimerEvent;
    
    var g:Graphics;
    
    // bitmap
    var bd:BitmapData = new BitmapData(20, 40, false, 0xD6D6D6);
    bd.fillRect(new Rectangle(0, 0, 10, 40), 0x6699FF);
    // matrix
    var mat:Matrix = new Matrix();
    mat.rotate(45 / 180 * Math.PI);
    
    // progress bar
    var progress:Sprite = new Sprite();
    progress.x = progress.y = 20;
    addChild(progress);
    g = progress.graphics;
    g.beginFill(0x333333);
    g.drawRoundRect(0, 0, 300, 20, 20, 20);
    g.endFill();
    
    // bar
    var bar:Sprite = new Sprite();
    progress.addChild(bar);
    g = bar.graphics;
    g.beginBitmapFill(bd, mat);
    g.drawRoundRect(0, 0, 300, 20, 20, 20);
    g.endFill();
    
    // mask
    var msk:Sprite = new Sprite();
    progress.addChild(msk);
    g = msk.graphics;
    g.beginFill(0x0);
    g.drawRoundRect(0, 0, 300, 20, 20, 20);
    g.endFill();
    msk.x = -300;
    
    bar.mask = msk;
    
    // timer
    var timer:Timer = new Timer(25);
    timer.addEventListener(TimerEvent.TIMER, timerListener);
    timer.start();
    
    // filter
    var arr:Array = new Array();
    arr.push(new BevelFilter(3, 45, 0xFFFFFF, 1, 0x0, 1, 10, 10, 1, 3));
    arr.push(new DropShadowFilter(2, 45, 0x0, 0.75, 2, 2, 1, 3));
    progress.filters = arr;
    
    // timer listener
    function timerListener(e:TimerEvent):void
    {
    	bd.lock();
    	var c:uint = bd.getPixel(19, 0);
    	
    	bd.scroll(1, 0);
    	bd.fillRect(new Rectangle(0, 0, 1, 40), c);
    	bd.unlock();
    	
    	msk.x += 2;
    	if(msk.x > 0){
    		msk.x = -300;
    	}
    }
  • ActionScript로 점선 그리기2: Marching Ants

    어제 올렸던 대시라인 그리기에서 조금 더 기능을 추가해 봤습니다. 포토샵에서 선택영역을 지정하면 점선이 이동하는 효과가 나오는데, 그걸 적용했습니다. 행진하는 개미 ^^

    beginBitmapFill(bitmap:BitmapData, matrix:Matrix=null, repeat:Boolean=true, smooth:Boolean=false):void
    위와 같이 Graphics.beginBitmapFill() 메소드에 2번째 파라메터로 매트릭스를 지정하여 사용할 수 있습니다. 그래서 하나의 비트맵데이터를 가지고 매트릭스에 회전을 주어서 사용을 했더니, 비트맵데이터가 외곡되는 문제가 생기네요. 일단 귀찮아서 비트맵데이터 4개를 가지고 그렸는데, 최적화하는 방법은 좀 더 찾아 봐야할 듯 하네요.

    click to view the source code