20. 플래시빌더 개발환경 구성하기

앞서 소개한 3가지의 개발환경중에 실제 개발은

 

[플래시빌더의 코딩작업] + [플래시CS3 ~ CS6의 무비클립(을 활용한 그래픽작업)] 으로 이루어진다.

 

기본적인 플래시빌더의 프로젝트 생성방법과, 플래시와의 연계를 활용한 코딩 작업에 대해서 자세히 알아보자.

 

먼저 본인이 설치한 Adobe Master Collection CS6에는 Adobe Flash Builder 4.6 버전이 함께 포함되어있으며,

 

해당 내용 역시 FB4.6 버전을 기준으로 설명하겠다.

 

 1. 실행

 

 

2. 프로젝트 생성

 

File > New > ActionScript Project  순으로 선택한다.

 

 

3. 프로젝트 이름과 경로 지정.

 

- Project name : Temporary 와 같이 프로젝트 이름을 반드시 지정해줘야 한다.

- Project location의 Use default location을 체크 해제 하여 Browse를 눌러서 폴더를 만들어 준다.

  (기본 폴더는 C드라이브에서 자신의 계정폴더 > AdobeFlashBuilder4.6 폴더이다.)

 

설정 되었으면 Finish를 누른다.

 

 

 

4. 빌드 경로

 

- 눈여겨 볼 항목은 Build path libraries에서 sdk의 버전이 4.6으로 컴파일 됨을 짐작 할 수있고

- Main source folder : src 폴더라는 곳에서 실제 코딩이 이루어진다.

- Main application file : 최종 호스트 코드 파일은 Temporary.as 이다.

 

Finish를 누른다.

 

 

5. 메인 파일 "Temporary.as" 생성

 

- 기본 코딩 템플릿이 구성된채로 완성되었다. 본인의 화면의 경우 커스터 마이징 하였으므로 어두운 화면나온다.

   현재 단계에서 디버그(퍼블리시)해봤자 내용이 없으므로 아무것도 뜨지않는다 코드를 입력해 보자.

 

 

 

6.  샘플 코드 입력.

 

- SWF 속성에 관한 메타 태그를 입력하고

- Sprite 객체의 graphics 속성을 활용하여 도형을 그려본다.

 

아래의 코드를 입력 해 보자.

 

package
{
 import flash.display.Sprite;
 
 [SWF(frameRate="24", width="550", height="400", backgroundColor="0x000000")]
 
 public class Temporary extends Sprite
 {
  
  public function Temporary()
  {
   this.graphics.beginFill(0xFFCC00);
   this.graphics.drawRect(150,100,200,200);
  }
 }
}

 

Temporary클래스는 Sprite클래스이다.

 

 

실행하면 drawRect라는 사각형을 그린 그래픽을 출력하는 결과가 나오게된다.

 

그런데 코드를 자세히 보면 의문점이 하나있다.

 

바로 Temporary 객체를 stage에 addChild 해야 사각형이 출력이 되는데 구문 어디에도 addChild가 없다.

 

여기서 플래시 빌더가 자동적으로 다음과 같은 구문     stage.addChild(this);    // 여기서 this는 Temporary

 

를 내부적으로 호출하였다는 것을 유추할 수 있다.

 

더불어 호스트 코드인 Temporary.as의 데이터 타입도 Sprite로서 DisplayObject 이다.

 

쉽게 이해하자면 Flash에서 Document Class(추후설명)를 쓰는것과 비슷한 개념으로 이해하면 된다.

 

 

 

입력도중 친절하게도 코드힌트가 나온다. 힌트를 놓쳤다면 후에 Ctrl + Space로 다시 볼 수있다.

 

 

입력완료.

 

 

 

7. 디버깅

- 디버깅은 F11을 누르면 된다. 상단의  중에 벌레 모양버튼을 클릭해도 된다.

 

- 디버깅 버튼을 누르면 아래와 같은 에러 메세지를 볼 수있다. 한마디로 웹에서 구동 될 플래시 디버거를 설치해야 한다는 뜻이다.

  아래 보이는 Adobe Flash Player downloads 버튼을 눌러서 디버거 다운로드 페이지로 넘어가자.

 

 

8. 디버거 설치

 

- 자신의 운영체제에 따라서 윈도우 / 매킨토시 / 리눅스로 나뉜다.

- 붉은색 박스를 잘 살펴보면.

   윈도우 익스플로러의 경우 for IE 버전을 클릭하고

   구글 크롬,파이어폭스등 웹-킷 구동의 브라우저의 경우 Netscape-compatible browsers를 클릭하도록 한다.

 

 

 

9. 결과 확인

 

- 해당 브라우저에 맞게 실행된 모습.

 

 

10. 만약 작업이 웹 기반이 아니라 독립형 SWF일 경우

 

- 디버그를 통하여 브라우저를 구동시켜서 확인하였지만 독립형 SWF 실행일 경우 다음과 같이 설정한다.

  Run > Debug Configurations.. 클릭 > URL or path to launch 항목에서 Use default를 체크 해제한뒤,

  Temporary.html 을 -> Temporary.swf 로 변경한다.

 

 

F11을 눌러보면 SWF로 출력된다.

 

 

여기까지 기본적인 Flash Builder의 사용법을 알아보았다.

 

Flash Builder의 세부적인 설정 - "컬러테마, 폰트, 단어자동완성" 등 에 대해서는

 

본인의 블로그 Development Tools > Flash Builder 4.6 항목에 자세하게 설명되어있다. 꼭 참조 하길 바란다.

 

다음 시간에는 플래시IDE(cs3 ~ cs6)에서 만든 무비클립을 플래시 빌더와 연결하여 쓰는 사용법에 대해 알아보겠다.