2013년 2월 11일 월요일

intelliJ IDEA 12에서 flash + starling framework 시작하기

내가 어쩌다 이 글을 쓰게 된건지는 모르겠지만 나를 위해 일단 기록을 남긴다.

요새 Flash에 관심이 가서 보던 중 intelliJ IDEA 12에서 Flash/Flex지원을 기본으로 한다는 이야기를 듣고 바로 알아보기로 함.
Preference > Plugins를 보았다.

있다!

맨바닥에서 하는 건 싫으니까 조금 찾아봤더니 Starling이니 Feather니 하는 것들을 발견.
일단 둘다 clone 하고 보자 zip 파일로 받아놓는 것도 좋지만 업데이트 편하게
library 디렉토리 하나 만들고
git clone git://github.com/PrimaryFeather/Starling-Framework.git
git clone git://github.com/joshtynjala/feathers.git
Flex SDK도 받아놓자. 현재 4.6버전임
http://www.adobe.com/devnet/flex/flex-sdk-download.html
iOS Simulator 를 돌리려면 (OS X전용) Air SDK 3.3 이상이 있어야한다고 하니 이것도 받자.
http://www.adobe.com/devnet/air/air-sdk-download.html

준비는 다 되었다. 이 다음은 친절한 분이 잘 정리해놓으셨네.
http://wiki.starling-framework.org/manual/project_setup

이걸보고 하나씩 해본다.
Project Structure로 가서
Platform Settings > SDKs 를 찍고 +를 눌러서 Flex SDK를 선택
받아놓은 Flex SDK 경로를 설정하고
추가 후 Document 를 위해 Documentation Paths 탭을 선택 +지구본 모양 아이콘을 클릭.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/를 추가하자.
자동으로 URL을 따주는 것 같기도 하고 아닌것 같기도 하고 가물가물

그리고 Platform Settings > Global Libraries를 찍고
+ 눌러서 starling 라이브러리를 추가하자.
경로는 [CLONE 한 디렉토리]/starling/src를 선택.
*.swc 파일을 쓰거나 매번 프로젝트를 만들때 Project Settings > Libaries 에서 Raw ActionScript Library로 추가해도 되지만 귀찮으니까 Global로.

File > New Project를 선택해 프로젝트를 만들어 보자. 프로젝트 이름은 starlingEx 이라고 줬다.(아래 그림처럼 starling 이라고 하면 안된다! 이름이 겹치니까!!)
12버전에선 조금 편해졌나보다.
그냥 Flash Module 선택하고 시작하면 된다.
프로젝트명을 적고 Next
나는 모바일에 관심이 있어서 하는 거니까 Target platform은 Mobile로
그리고 Pure ActionScript 에 체크.

프로젝트 생성 후
다시 Project Structure / Platform Settings / Global Libaries 에 추가했던 starling 라이브러리를 선택 후 Add to Modules 에 현재 생성한 프로젝트의 모듈명을 선택한다.
여기까지 오케이.

이 상태로 해도 일단 빌드와 실행은 가능하지만 Starling 라이브러리를 사용한 경우 오류를 renderMode 오류가 날 수 있으므로 기본 xml을 만들어준다.
Application descriptor 에서 Custom template을 선택 후 create 버튼을 누르면 나오는 화면에서 AIR application descriptor 를 생성하자. 이것 때문에 한참 해멨다;

아마 기본으로 src/StarlingEx.as 파일이 생성되면서 내용은 아래와 같을 것이다.

package {
import flash.display.Sprite;
import flash.text.TextField;
public class Starling extends Sprite {
    public function Starling() {
        var textField:TextField = new TextField();
        textField.text = "Hello, World";
        addChild(textField);
    }
}
}
실행해보면 잘된다. 이제 기본 flash 패키지가 아니라 starling 을 이용하여 만들어본다.
우리 인도아저씨 http://gamua.com/starling/first-steps/ 튜토리얼 보고 해보자.


package {

import flash.display.Sprite;

import starling.core.Starling;

public class StarlingEx extends Sprite {
    private var mStarling:Starling;
    public function StarlingEx() {
        mStarling=new Starling(Game, stage);
        mStarling.start();
    }
}
}
메인인 StarlingEx.as를 만들고 Game 클래스도 만들자.

package {
import starling.display.Sprite;
import starling.text.TextField;

public class Game extends Sprite {
    public function Game() {
        var textField : TextField = new TextField(100,100,"Hi, Hello");
        addChild(textField);
    }
}
}
실행해본다.

만일 이렇게 오류가 난다면 wmode 가 제대로 지정되지 않았다는 소리다. 위에서 만든 xml을 파일을 열어보자.
*-app.xml 로 끝나는 형식으로 만들었을 것이다.
renderMode 가 주석으로 막혀있는 것을 gpu로 지정하자.
저장하고 다시 실행.

정상적으로 나오는 것을 확인할 수 있다.

참고한 페이지들: