EHXM

[도:트]'s Dev Log

DID YOU KNOW...

안드로이드용 영어 어학기 Smart LC

스마트LC 소개 링크:
http://blog.ehxm.net/123

티스토어 링크:
http://bit.ly/awW3XW

FLEX 무료 개발환경 구축 (Flashdevelop 3, Adobe Flex Builder 3, Flash Builder 4 )

Posted by EHXM. Posted in " Adobe Flash Platform/Tutorial "2009/11/10 15:59

RIA 제작을 위한 FLEX의 개발환경을 구축 해 보도록 하겠습니다.

FLEX의 개발환경으로는

FLEX SDK 3 + Flash Develop 3 + Flash Player Debugger
FLEX Builder 3 / Eclipse plugin

FLASH Builder 4 beta가 새로 릴리즈 되었습니다. (11월 8일 수정)
지금 무료로 설치가 가능합니다. [클릭]

정도로 볼 수 있는데, Flex Builder는 유로로 Flex Builder 3 Professional edition 의 가격은 $699이지만 학생에 한해서 무료로 배포받을 수 있다.
Flex Builder는 Adobe에서 개발한 Eclipse기반 개발 툴로 개발의 생산성을 고려한다면 Flex Builder를 가장 추천한다. 하지만 학생이 아니고, $699의 가격이 부담되는 가격이라면 Flash Develop을 이용해도 무료로 강력한 Flex개발 환경을 구축할 수 있다.
그럼, 두가지 방법에 대해서 개발환경을 구축해 보겠습니다.

개발환경 1. Flex SDK 3 + Flash Develop 3 + Flash Player Debugger

순서

Java Runtime Environment (JRE) 6 설치

Flex SDK 3 설치

Flash Player 9 최신버전 설치

Flash Player Debugger version 설치

.NET Framework 2.0 Redistributable 설치

FlashDevelop 3 설치

1. Java Runtime Environment (JRE) 설치
Flex SDK 3, FlashDevelop 3를 이용하려면 JRE가 설치되어 있어야한다. 이미 설치되어있거나 JDK가 설치되어 있다면 바로 2번부터 설치하면 된다.
JRE나 JDK 둘중 하나를 설치하면 되는데, 여기에선 JRE를 설치해보겠습니다.

다운로드 :
http://www.java.com/ko/download/
Java 다운로드 버튼만 클릭하면 됩니다.

JRE 설치가 완료되었습니다.

2. Flex SDK 3 설치
다운로드:
http://www.adobe.com/products/flex/flexdownloads/

Flex SDK 라이센스에 관한 항목을 체크하고 Flex SDK download 링크로 다운받습니다.
따로 셋업파일이 없고, 적당한 곳에 압축을 풀면 됩니다.

C:\Program Files\flex_sdk_3 에 압축을 풀었습니다.

자동화 빌드 프레임워크인 ANT를 환경변수로 등록한다.

[내 컴퓨터] - 오른쪽 마우스 - [속성] : 시스템 등록정보에서 [고급]탭에서 [환경변수]를 선택한다.
( 혹은, [제어판] - [시스템] - [속성] - [고급]으로도 가능하다. )

[시스템변수] - [새로 만들기]에서 환경변수를 등록한다.
변수이름 : ANT_HOME
변수값 : C:\Program Files\flex_sdk_3\ant

이제, ANT를 위한 path를 수정하여야 한다.
[시스템변수]의 path를 선택하여 편집을 누른다.

위 그림처럼 path의 변수값에 다른내용이 있으면 마지막에 ; 를 추가하고,
변수값에 %ANT_HOME%\bin 를 추가한다.

Flex SDK 3.1설치와 환경설정이 완료되었습니다.

3. Flash Player 9 최신버전 설치
다운로드:
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&Lang=Korean

동의 및 설치를 클릭하면 최신버전이 설치가 완료됩니다.

4. Flash Player Debugger version 설치
다운로드:
http://www.adobe.com/support/flashplayer/downloads.html
에서 브라우저에맞는 Flash Player Debugger version 설치
인터넷 익스플로러를 사용하는 경우에는
Download the Windows Flash Player 9 ActiveX control content debugger (for IE) 를 설치
단, Flash Player 9 최신버전이 설치되어 있어야 합니다.

5. .NET Framework 2.0 Redistributable 설치
다운로드:
http://www.microsoft.com/downloads/details.aspx?FamilyID=333325fd-ae52-4e35-b531-508d977d32a6&DisplayLang=en
닷넷 프레임워크 최신버전인 .NET Framework 3.5를 다운받아서 설치한다.

6. FlashDevelop 3 설치
http://www.flashdevelop.org/community/viewforum.php?f=11

에서 최신버전을 다운로드해 설치한다.

Flex 개발을 위한 FlashDevelop 3의 모든 설치가 완료되었다.
이제 Flex로 모든것을 만들어 보시길..

Helloworld로 간단한 테스트를 해보겠습니다.

7. HelloWorld

FlashDevelop3 를 실행합니다.

- 새 프로젝트 생성
메뉴-[project]-[new project]에서,
[AS3] - [Flex 3] 선택,
Name : Helloworld
Location : 프로젝트가 저장될 경로를 지정해 줍니다.
Create directory for project에 체크.

- 코딩
완료하면, 프로젝트가 생성되고, main.mxml을 다음과 같이 코딩한 후 저장합니다.

코드내용 보기
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function alert():void{
Alert.show("hello world");
}
]]>
</mx:Script>
<mx:Button label="hello world" click="alert()" />
</mx:Application>

- 컴파일 설정
메뉴-[tools]-[program setting] 또는 F10을 눌러서,
[AS3Context]의 flex SDK 경로를 2번의 Flex SDK 설치 경로로 지정해 줍니다.

- 컴파일 및 빌드
메뉴-[Project] - [Build Project] 또는 F8을 눌러서,
프로젝트를 빌드 해 줍니다.

- 완성 및 실행
다음과 같이 Helloworld.swf 파일이 생성되면 완성.
index.html을 오른쪽 마우스 클릭하여 Excute를 하면 실행시켜 볼 수 있다.

개발환경 2. Flex Builder 3 / Eclipse plugin (학생)

순서

Flex builder 3 professional 학생 라이센스 인증

Java Runtime Environment (JRE) 6 설치

Flex Builder 3 professional 설치

1. Flex builder 3 professional 학생 라이센스 인증
대학교 학생증이나 재학증명서와 주민등록증 등 학생을 정식으로 증명할 수 있는 것을 GIF파일로 스캔합니다.

라이센스 인증 센터:
http://www.flexregistration.com/
에 접속합니다.
Do you accept these terms? 에 체크하고, Student를 클릭합니다.

폼을 작성하고, 스캔한 GIF파일을 첨부합니다.

작성을 완료하면 수일내에 작성한 e-mail 주소로 다음과 같이 시리얼 번호와 함께 답변이 오게 됩니다. 이 시리얼 번호를 Flex builder 3 professional 설치 후에 입력하면 됩니다.

2. Java Runtime Environment (JRE) 6 설치
Flex SDK 3, FlashDevelop 3를 이용하려면 JRE가 설치되어 있어야한다. 이미 설치되어있거나 JDK가 설치되어 있다면 바로 2번부터 설치하면 된다.
JRE나 JDK 둘중 하나를 설치하면 되는데, 여기에선 JRE를 설치해보겠습니다.

다운로드 :
http://www.java.com/ko/download/
Java 다운로드 버튼만 클릭하면 됩니다.
JRE 설치가 완료되었습니다.

3. Flex builder 3 professional 설치

다운로드 :
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email

다운로드한 다음, FB3_win.exe를 실행하여 설치합니다.

설치가 완료되었습니다.

Flex builder 3 professional 를 실행하면 첫 화면에서 시리얼 인증을 받을 수 있습니다.
e-mail로 온 학생용 라이센스 인증 시리얼을 입력하고 인증을 받습니다.

빠밤. Flex개발을 위한 Flex builder 3 professional 설치가 완료되었습니다.
이제 Flex의 멋진 세계로..

- Helloworld 테스트

메뉴-[file]-[new]-[flex project]를 클릭하여 새 프로젝트를 생성합니다.
project name : helloworld
project location : use default location을 해제하여 프로젝트가 저장될 곳을 지정합니다.
완료를 하면 프로젝트가 생성됩니다.

helloworld.mxml을 다음과 같이 코딩한 후 저장합니다.

코드내용 보기
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function alert():void{
Alert.show("hello world");
}
]]>
</mx:Script>
<mx:Button label="hello world" click="alert()" />
</mx:Application>

메뉴-[Run]-[Run helloworld] 이나 Ctrl + F11을 눌러 실행 해 봅니다.