일정한 간격을 갖는 GRID(격자) 객체에 다양한 스타일을 적용한 예제를 한번 만들어보자.
이번 예제에서는 버튼을 무비클립을 만들어서 사용하는 것이 아니라 Graphics 클래스를 이용하여 직접 만들어보겠다. 그 전에 Graphics 클래스가 어떤 기능을 하는 클래스인지 알아봐야겠다. Graphics 클래스는 여기를 참조하자.
[code as3]
package
{
import flash.display.Graphics;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.IEventDispatcher;
import flash.geom.ColorTransform;
public class Main extends Sprite
{
public function Main()
{
super(); // Sprite 클래스 생성
stage.scaleMode = "noScale"; // 플레이어 크기와 상관없이 화면 내용 고정
stage.align = "TL"; // stage 정렬 : Top, Left
seedBox = new Sprite(); // 화면 Container 생성
seedBox.x = 50;
addChild(seedBox); // 화면에 표시
createButtons(); // 버튼 만들기
}
/**
* @private
* 컨테이너
*/
private var seedBox:Sprite;
/**
* @private
* 빨간 버튼 : Grid(격자) 패턴
*/
private var normal_Red_btn:Sprite;
/**
* @private
* 초록 버튼 : 알파 적용
*/
private var alpha_green_btn:Sprite;
/**
* @private
* 파란 버튼 : 색상 적용
*/
private var color_blue_btn:Sprite;
/**
* @private
* 노란 버튼 : 스케일 적용
*/
private var scale_yellow_btn:Sprite;
/**
* @private
* 버튼 사이 간격
*/
private var gap:Number = 30;
/**
* @private
* 객체 행 수
*/
private var row:int = 8;
/**
* @private
* 객체 열 수
*/
private var column:int = 10;
/**
* @private
* 객체 총 수
*/
private var total:int = row * column;
/**
* @private
* 버튼 만들기
*/
private function createButtons():void
{
var g:Graphics;
if(!normal_Red_btn) // 빨간 버튼
{
normal_Red_btn = new Sprite(); // 빨간 버튼 객체 생성
g = normal_Red_btn.graphics; // 빨간 버튼을 그릴 수 있도록 지정
g.clear(); // 그린 그래픽 지움
g.lineStyle(1, 0x000000, 1); // 빨간 라인 그리기
g.beginFill(0xFF0000, 1); // 라인 안에 빨간색으로 채우기 시작
g.drawRect(0, 0, 20, 20);
g.endFill(); // 빨간색 채움
normal_Red_btn.x = 10; // 빨간 버튼 x값 위치 설정
normal_Red_btn.y = 10; // 빨간 버튼 y값 위치 설정
normal_Red_btn.buttonMode = true; // 버튼 위 마우스 오버시 손모양으로 바뀜
addChild(normal_Red_btn); // 버튼 화면에 표시
configureListener(normal_Red_btn); // 빨간 버튼 설정
}
if(!alpha_green_btn) // 초록 버튼
{
alpha_green_btn = new Sprite(); // 초록 버튼 객체 생성
g = alpha_green_btn.graphics; // 초록 버튼을 그릴 수 있도록 지정
g.clear(); // 그린 그래픽 지움
g.lineStyle(1, 0x000000, 1); // 초록 라인 그리기
g.beginFill(0xCBFF00, 1); // 라인 안에 초록색으로 채우기 시작
g.drawRect(0, 0, 20, 20);
g.endFill(); // 초록색 채움
alpha_green_btn.x = normal_Red_btn.x + gap ; // 빨간 버튼 옆에 위치
alpha_green_btn.y = 10; // 초록 버튼 y값 위치 설정
alpha_green_btn.buttonMode = true; // 버튼 위 마우스 오버시 손모양으로 바뀜
addChild(alpha_green_btn); // 버튼 화면에 표시
configureListener(alpha_green_btn); // 초록 버튼 설정
}
if(!color_blue_btn) // 파란 버튼
{
color_blue_btn = new Sprite(); // 파란 버튼 객체 생성
g = color_blue_btn.graphics; // 파란 버튼을 그릴 수 있도록 지정
g.clear(); // 그린 그래픽 지움
g.lineStyle(1, 0x000000, 1); // 파란 라인 그리기
g.beginFill(0x0000FF, 1); // 라인 안에 파란색으로 채우기 시작
g.drawRect(0, 0, 20, 20);
g.endFill(); // 파란색 채움
color_blue_btn.x = 10; // 파란 버튼 x값 위치 설정
color_blue_btn.y = normal_Red_btn.y + gap; // 빨간 버튼 아래 위치
color_blue_btn.buttonMode = true; // 버튼 위 마우스 오버시 손모양으로 바뀜
addChild(color_blue_btn); // 버튼 화면에 표시
configureListener(color_blue_btn); // 파란 버튼 설정
}
if(!scale_yellow_btn) // 노란 버튼
{
scale_yellow_btn = new Sprite(); // 노란 버튼 객체 생성
g = scale_yellow_btn.graphics; // 노란 버튼을 그릴 수 있도록 지정
g.clear(); // 그린 그래픽 지움
g.lineStyle(1, 0x000000, 1); // 노란 라인 그리기
g.beginFill(0xFFFF00, 1); // 라인 안에 노란색으로 채우기 시작
g.drawRect(0, 0, 20, 20);
g.endFill(); // 노란색 채움
scale_yellow_btn.x = color_blue_btn.x + gap; // 파란 버튼 옆에 위치
scale_yellow_btn.y = alpha_green_btn.y + gap; // 초록 버튼 아래 위치
scale_yellow_btn.buttonMode = true; // 버튼 위 마우스 오버시 손모양으로 바뀜
addChild(scale_yellow_btn); // 버튼 화면에 표시
configureListener(scale_yellow_btn); // 노란 버튼 설정
}
}
/**
* @private
* 버튼 설정
*
* @param dispatcher 선택된 버튼
*/
private function configureListener(dispatcher:IEventDispatcher):void
{
dispatcher.addEventListener(MouseEvent.CLICK, buttonClickHandler); // 버튼 이벤트 등록
}
/**
* @private
* 화면 초기화
*
* Sprite.numChildren : 객체의 자식수를 반환, index = 1
* Sprite.removeChildAt() : index 위치 자식 객체 제거, index = 0
*/
private function removeAllChildren():void
{
while(seedBox.numChildren) // 컨테이너에 객체가 없어질때까지 반복
{
seedBox.removeChildAt(0); // 지정된 index 위치에 있는 객체 제거
}
}
/**
* @private
* 격자 패턴
*
* Math.floor : 내림 메서드 - 한 행이 채워지면 자동으로 줄바꿈
*/
private function createNormal():void
{
removeAllChildren();
for(var i:int=0; i<total; i++) // 0 ~ total 만큼 반복
{
var temp:MovieClip = new Seed(); // 객체 생성
temp.x = (i%column) * 40 + gap; // 가로 위치 x값 계산 : 간격 30
temp.y = Math.floor(i/column) * 40 + gap; // 세로 위치 y값 계산 : 간격 30
seedBox.addChild(temp); // 화면에 표시
}
}
/**
* @private
* 알파 적용
*/
private function createAlpha():void
{
removeAllChildren();
for(var i:int=0; i<total; i++) // 0 ~ total 만큼 반복
{
var temp:MovieClip = new Seed(); // 객체 생성
temp.x = (i%column) * 40 + gap; // 가로 위치 x값 계산 : 간격 30
temp.y = Math.floor(i/column) * 40 + gap; // 세로 위치 y값 계산 : 간격 30
temp.alpha = i / total; // 알파값 범위 : 0 ~ 1
seedBox.addChild(temp); // 화면에 표시
}
}
/**
* @private
* 색상 적용 : 랜덤
*/
private function createColor():void
{
removeAllChildren();
for(var i:int=0; i<total; i++) // 0 ~ total 만큼 반복
{
var temp:MovieClip = new Seed(); // 객체 생성
temp.x = (i%column) * 40 + gap; // 가로 위치 x값 계산 : 간격 30
temp.y = Math.floor(i/column) * 40 + gap; // 세로 위치 y값 계산 : 간격 30
var ct:ColorTransform = new ColorTransform(); // 색상 조절 객체 생성
ct.color = Math.random() * 0xFFFFFF; // 임의의 색상 선택
temp.transform.colorTransform = ct; // 선택된 임의의 색상 적용
seedBox.addChild(temp); // 화면에 표시
}
}
/**
* @private
* 스케일 적용
*/
private function createScale():void
{
removeAllChildren();
for(var i:int=0; i<total; i++) // 0 ~ total 만큼 반복
{
var temp:MovieClip = new Seed(); // 객체 생성
temp.x = (i%column) * 40 + gap; // 가로 위치 x값 계산 : 간격 30
temp.y = Math.floor(i/column) * 40 + gap; // 세로 위치 y값 계산 : 간격 30
temp.scaleX = temp.scaleY = i / total; // 객체의 가로, 세로 크기 계산
seedBox.addChild(temp); // 화면에 표시
}
}
/**
* @private
* 버튼 선택
*/
private function buttonClickHandler(event:MouseEvent):void
{
switch(event.target) // 현재 선택한 버튼
{
case normal_Red_btn :
createNormal(); // 격자패턴 메서드 호출
break;
case alpha_green_btn :
createAlpha(); // 알파 적용 메서드 호출
break;
case color_blue_btn :
createColor(); // 색상 적용 메서드 호출
break;
case scale_yellow_btn :
createScale(); // 스케일 적용 메서드 호출
break;
}
}
}
}
[/code]
위의 코드에서 보면 graphics, buttonMode, clear, lineStyle, beginFill, drawRect, endFill, IEventDispatcher,ColorTransform 이런 것들이 나온다. 이것들이 도대체 뭘까?
:: Sprite 클래스와 관련된 속성과 메서드
- graphics, buttonMode 는 여기를 참조하자.
:: Graphics 클래스와 관련된 속성과 메서드
- lineStyle, beginFill, drawRect, endFill, 는 여기를 참조하자.
:: ColorTransform 클래스는 여기를 참조하자.
음...마지막으로 IEventDispatcher.. 이것은 다음번에 자세히 알아보도록 하자.
