태그 보관물: BitmapData

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;
	}
}

Bitmap.bitmapData sets smoothing to false.

Bitmap.bitmapData 속성을 통해서 비트맵 이미지를 교체하는 경우 스무딩 속성이 false로 변경되어 버립니다. Bitmap(bd, “auto”, true); 처럼 비트맵 객체를 생성할 때 스무딩을 true로 설정하였다 하더라도, bitmapData 속성을 변경하면, smothing 속성이 무조건 false로 바뀝니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var bd1:BitmapData = new BitmapData(300, 225);
bd1.draw(mc, null, null, null, null, true);
 
var bmp1:Bitmap = new Bitmap(bd1, "auto", true);
var bmp2:Bitmap = new Bitmap(bd1, "auto", true);
 
addChild(bmp1);
addChild(bmp2);
 
bmp1.y = bmp2.y = -50;
bmp1.x = 50;
bmp2.x = 350;
bmp1.rotation = bmp2.rotation = 30;
 
bmp2.bitmapData = bd1;

그러므로 bitmapData 속성을 변경하면, 다음과 같이 smoothing 속성을 다시 true로 설정해 주어야 합니다.

16
bmp2.smoothing = true;

Watermark effect

I made a watermark effect. I added addWatermark() method to BMPFunctions.as file which I revealed earlier. You can download the class file from the following link.
비트맵데이터에 워터마크를 넣는 효과를 만들어 보았습니다. 전에 공개한 BMPFunctions.as 클래스 에 addWatermark() 메소드를 추가한 것으로, 아래 링크에서 BMPFunctions.as 파일을 다운로드 하세요.
BitmapDataにウオーターマークを増すエフェクトを作ってみました。以前に公開したBMPFunctions.asクラスにaddWatermark()メソッド追加したんです。下のリンクからBMPFunctions.asファイルをダウンロードします。

http://hangunsworld.com/classes/com/hangunsworld/as3/util/

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
import	com.hangunsworld.as3.util.BMPFunctions;
 
var wm:BitmapData = new WatermarkSource(0, 0);
 
var bd:BitmapData = new BitmapData(mc.width, mc.height, true, 0×00);
bd.draw(mc);
 
var bmp:Bitmap = new Bitmap(bd);
bmp.x = mc.width + 5;
addChild(bmp);
 
add_btn.addEventListener(MouseEvent.CLICK, btnClick);
function btnClick(evt:MouseEvent):void{
	var mar:uint = uint(margin_txt.text);
	var off:uint = uint(offset_txt.text);
	var sca:Number = uint(scale_txt.text);
	var rot:uint = uint(rotation_txt.text);
	rot = rot%360;
	rotation_txt.text = rot.toString();
	var alp:Number = uint(alpha_txt.text);
	alp = Math.min(alp, 100);
	alpha_txt.text = alp.toString();
 
	sca /= 100;
	alp /= 100;
 
	bd.draw(mc);
	bd = BMPFunctions.addWatermark(bd, wm, mar, off, sca, rot, alp);
}

Download FLA

Flood Fill

I added floodFill() to the BMPFunctions.as, released yesterday. This method is an enhanced version of BitmapData.floodFill(). It changes pixels similar to the selected pixel’s color. And you can choose the contiguous option.

You can download the BMPFunctions.as file in the following link.

어제 공개한 BMPFunctions.as 클래스에 BitmapData.floodFill() 메소드를 개선한 floodFill() 메소드를 추가했습니다. 선택한 좌표의 픽셀과 비슷한 색상의 픽셀들을 원하는 색상으로 변경할 수 있습니다. 또한 연속된 영역만 변경하도록 선택할 수 있습니다.

클래스 파일은 아래 페이지에서 BMPFunctions.as를 다운로드하면 됩니다.

昨日公開したBMPFunctions.asクラスにfloodFill()メソッドを追加したんです。これはBitmapData.floodFill()メソッドを改善したので、つながっている領域だけを変更するか、イメージ全体的に変更するか選択できます。

下のリンクのページで BMPFunctions.asファイルをダウンロードできます。

http://hangunsworld.com/code/com/hangunsworld/as3/util/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import com.hangunsworld.util.BMPFunctions;
 
var bd:BitmapData = new BitmapData(mc.width, mc.height, true, 0×00000000);
bd.draw(mc);
 
var bmp:Bitmap = new Bitmap(bd);
addChild(bmp);
bmp.x = mc.width;
 
mc.buttonMode = true;
mc.addEventListener(MouseEvent.CLICK, mcClicked);
function mcClicked(evt:MouseEvent):void{
	bd.draw(mc);
	var c:uint = bd.getPixel32(mc.mouseX, mc.mouseY);
	c1_txt.text = c.toString(16).toUpperCase();
	var c2:uint = uint(“0x” + c2_txt.text);
	var t:uint = Math.max(0, Math.min(255, uint(t_txt.text)));
	var cont:Boolean = cont_cb.selected;
 
	bd = BMPFunctions.floodFill(bd, mc.mouseX, mc.mouseY, c2, t, cont);
}

Download FLA

Color replacement

I made an effect similar to the paint bucket feature in Photoshop. This replace colors similar to a user defined color with a specific color.

You can download the BMPFunctions.as file in the following link.

포토샵의 페인트 버켓 툴과 비슷한 효과를 만들어 보았습니다. 지정된 색과 비슷한 색상을 찾아서 원하는 색상으로 바꿔줍니다.

클래스 파일은 아래 페이지에서 BMPFunctions.as를 다운로드하면 됩니다.

PhotoshopのPaint Bucketのような物を作ってみました。選んだ色に似ている色をほかの色に変わります。

下のリンクのページで BMPFunctions.asファイルをダウンロードできます。

http://hangunsworld.com/classes/com/hangunsworld/as3/util/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import com.hangunsworld.as3.util.BMPFunctions;
 
var bd:BitmapData = new BitmapData(mc.width, mc.height, true, 0×00000000);
bd.draw(mc);
 
var bmp:Bitmap = new Bitmap(bd);
addChild(bmp);
bmp.x = mc.width;
 
// Replace Color button event listener
replace_btn.addEventListener(MouseEvent.CLICK, doReplace);
function doReplace(evt:MouseEvent):void{
	var c1:uint = uint(“0x” + c1_txt.text);
	var c2:uint = uint(“0x” + c2_txt.text);
	var t:uint = Math.max(0, Math.min(255, uint(t_txt.text)));
	t_txt.text = t.toString();
 
	// draws original image
	bd.draw(mc);
	// replaces colors
	bd = BMPFunctions.replaceColor(bd, c1, c2, t);
}

Download FLA