5. 다양한 객체 만들기 _ Duplicate (2) 일정한 패턴으로 위치하기

일정한 간격을 갖는 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.. 이것은 다음번에 자세히 알아보도록 하자.