태그 보관물: Matrix

AS로 ProgressBar 그리기

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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