Flex와 Flash의 차이점 1

About RIA(Rich Internet Application) & FLEX

RIA(Rich Internet Application)라는 용어는 매크로미디어의 2002년 화이트 페이퍼에서 처음으로 소개되었다. web 2.0에서는 웹 어플리케이션의 새로운 모습이 요구됨에 따라 웹 어플리케이션에서도 데스크톱 어플리케이션과 유사한 경험을 하고 있다. 이러한 경험은 웹 어플리케이션에 대한 사용자의 기대를 높이게 되었고, 더욱 더 데스크톱 어플리케이션을 닮은 기능과 모습을 요구하게 될 것이다. 이러한 기대를 충족시키는 웹 어플리케이션을 RIA(Rich Internet Application)이라고 하며, Flex는 RIA를 만드는 좋은 개발 도구 중 하나다.

RIA의 장점

- 인스톨 과정이 필요 없으며 운영체제에 종속되지 않는다.

- 비즈니스 로직을 중앙에 위치한 웹 어플리케이션 서버에서 관리하기 때문에

업데이트와 업그레이드가 쉽고 재배포 과정 없이 최신 버전을 유지할 수 있다.

- 데스크톱 어플리케이션에 비해 개발 시간과 비용을 줄일 수 있다.

- 보다 향상된 사용자 인터페이스를 제공한다.

- 클라이언트와 서버간 메시지 전달 시 비동기 통신(Asynchronous Communication)을 한다.

페이지의 일부 정보만 갱신이 가능하며 클라이언트의 요청을 서버에 전달 후

응답을 기다리지 않고 다음 작업을 수행하여 보다 빠른 작업을 수행할 수 있다.

또한 비동기 통신을 지향하므로 네트워크 트래픽이 적게 발생한다.

ActionScript 3.0 중 하나(?)
과거 *.swf파일 수정이 용이하기 위하여 *.xml파일을 연동하여

swf파일 수정 없이 언제든 컨텐츠 수정이 가능토록 구현 가능

- LoadVars() : *.xml을 불러오는 객체

Compile 과정

- Flash : AS3.0 코딩 > Flash Compiler> .swf (AS3.0)

- Flex : AS3.0/MXML 코딩 > mxmlc.exe (Flex 3 SDK) > .swf

Player : compile 된 .swf 파일을 보여주는게 Player
- 웹 : Flash Player (ver 10)
- 데스크탑 : Air Player (ver 1.5)
- 모바일 : Flash Lite Player (ver 3.0)

Flash Player (10) : 두가지 영역으로 구분
AVM(ActionScript Virtual Machine) :
- v1.0 : AS2.0 이하 버전으로 코딩 된 프로그램 해석
- v2.0 : AS3.0 이상 버전으로 코딩 된 프로그램 해석
Rendering Engine : AVM으로 해석된 swf 내용을 보여주는 것

• Flash 와 Flex 는 기본 바탕이 다르다.
• Flash는 Flex로 제작된 프로그램을 모두 구현 할 수 있다.
  (단 여러 프레임 계산으로 인한 속도 저하 발생)
• MovieClip : 타임라인(여러 프레임 존재)
• 속도 : Flex > Flash

Flex

Sprite : 단일 프레임
UI Component : 코딩한 Flex Sprite를 화면상에 보여주기 위해

필요한 내용만 사용자가 직접 제작하는 Component
따라서 Flex에서 기본 제공하는 범용 Component를 사용하지 않음

MXML → XML
기존 HTML과 같이 정해진 tag 없이 임의로 tag 작성 가능

XML 코딩 방법 : 확장자는 반드시 .xml

<?xml version="1.0" encoding="UTF-8"?>

// AS3.0에서는 UTF-16을 기본적으로 지원하지만

FLEX는 UTF-8 지원 - 한글의 경우 인코딩값이 다르면 글자가 깨짐
코딩 :: 전체를 감싸는 tag 노드는 한개 , 시작 tag와 종료 tag가 동일해야 함

예제 1

<test>
<a>Flex // 노드와 노드 간에 데이터를 직접 삽입. 이 경우 반드시 종료 tag를 필요로 함
</a>
</test>

예제 2

<test>
<a label="Flex" /> // 노드 내 속성을 부여. 이 경우 종료 tag 없이 "/"로 종료
</test>

// ----------------------- 상단 xml을 확장한 것이 MXML

MXML
xmlns: (NameSpace)
xml의 NameSpace : component를 구별해주는 것
ActionScript의 NameSpace : 접근을 제한 할 수 있는 것

MXML 코딩 방법
~ xmlns:사용자지정name="*"

예제 1

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> // 3.0까지 지원, 4 이상 버전에서는 NameSpace 개념이 사라짐
<mx:Button x="335" y="282" label="Button"/>
</mx:WindowedApplication>

예제 2

(사용자가 다른 버튼을 생성할 경우 기존 버튼과 충돌할 수 있으니 이 경우 다음과 같이 코딩)

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:newmx="*" layout="absolute">
<mx:Button x="335" y="282" label="Button"/>
<mx:newmx />
</mx:WindowedApplication>

예제 3

(tag 내 코드 삽입시 코딩방법)

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:newmx="*" layout="absolute">
<mx:Button x="335" y="282" label="Button"/>
<newmx:Button> // 임의로 지정한 newmx 태그 시작 선언
/* 태그 삽입 */

</newmx:Button> // "/" 종료 대신 </네임스페이스:버튼>으로 종료 후 태그 사이에 태그 삽입
</mx:WindowedApplication>

/* 코딩시 대문자로 구분된 코드는 이미지 또는 객체가 아닌 ActionScript 코드 */

MovieClip/Sprite의 관계: DisplayObject, DisplayObjectContainer, DisplayObjectList

DisplayObject : 동그라미 또는 삼각형 등의 object - 실제로 보여지는 것
DisplayObjectContainer : DisplayObject를 담을 수 있는 것
DisplayObjectList : AS3.0 이후 depth개념을 자동으로 설정해주는 것

MovieClip(flash) / Sprite(flex) : 해당 객체 내부에 DisplayObject 3종셋트를 직접 담을 수 있는 것
shape.as : 실제 모양을 담당하는 as
MovieClip.as : 다중프레임 (단위:fps)
- 하나의 MovieClip에 좌표계/Frmaes 생성
- MovieClip를 변형 할 때 timeline을 통해 변형
- 기본fps: 12fps
- 애니메이션: 32fps, 36fps
- 영화상영: 24fps
Sprite.as : 단일프레임 (단위:miliSecond)
- Animation 개념이 없음, 좌표계/Frmae 생성
- Sprite를 이동하기 위해서는 timeline 개념이 없기때문에 timeline을 복원해야 함

DisplayObject 시리즈의 Flex
controls : DisplayObject 개념
layout : DisplayObjectContainer 개념

AS2.0과 AS3.0의 차이중 몇가지(?)

AS2.0
속성을 표시할 때 underbar(_)를 통해 표현
depth 개념을 통해 symbol의 순서를 정함
- 사용자에 의해 지정 할 수 있음

AS3.0
속성 표시 할 때 Underbar(_) 없이 표현
duplicateMovieClip 등의 복사 개념이 사라짐
drawAPI가 생김
depth 개념이 사라짐
- DisplayObjectList가 직접 관리하며 사용자가 임의로 값을 지정 할 수 없음
- index번호 부여를 위해 누구의.addChild(symbol명) 명령을 사용
ex) drawCircle 명령으로 aa라는 shape을 제작 할 경우 index번호는 없음
이 경우 누구의.addChild("aa") 명령을 통해 index번호를 부여

예제

Stage.addChild("Circle") // index = 0
Stage.addchild("Rect") // index = 1
Stage.addChild("Tri") // index = 2
// Stage 의 자식은 Circle, Rect, Tri 총 3가지

Circle.addChild("Pen") // index = 0 (Circle의 자식)

Stage.addChild("Pen") // index = 3 으로 변형됨
Circle.addChild("Rect") // index = 0 (Stage의 자식이였던 Rect가 Circle의 자식으로 변형되면서 Rect의 index값은 0으로 변형)

∴ 현재까지 결과
0=Circle

→ 0=Rect
1=Tri
2=Pen

Flash > AS > Object
MovieClip이 기본으로 깔려있음

Flex > AS > Object
Sprite가 기본으로 깔려있음
- Sprite가 Application으로 가지고 오려면 기본 바탕이 UIComponent로 설정되어야 함

Flex를 이용한 AS3.0스크립트 예제

package {
/* package:
동일한 기능을 가진 것들을 하나의 폴더로 몰아 넣는 것
ex) 움직임의 기능을 가진 것들을 묶어서 만드는 것

package 폴더명list
ex) package do { <- 해당 파일은 반드시 /src/do 폴더 내 .as로 저장되어야 함
ex) package do.as { <- 해당 파일은 반드시 /src/do/as 폴더 내 .as로 저장되어야 함
ex) package com.naver.사용자폴더명 { <- 개발자끼리 임의로 지정한 방식. /src/naver/사용자폴더명/*.as
- ex) package com.naver.displayObj { <- 오브젝트 표현 package
- ex) package com.naver.moving { <- 움직임 표현 package
- ex) package com.naver.events { <- 이벤트 package

if 패키지 구조명이 없을 경우 application과 .as 파일이 같은 폴더에 위치하면 된다.
*/
import flash.display.Sprite;
/*
import : 해당 파일이 가지고 있는 모든 내용을 저장하겠다.
- include : compile시 해당 파일을 참조하겠다.
Sprite : 해당 파일
flash.display.Sprite : /flash/display/Sprite.as 파일을 사용하겠다.
aaa.as <- class파일 = 프레임워크 = component
*/

public class lecture090713 extends Sprite
/* public: 접근제한자
Sprite를 extends(상속 받아서) lecture090713에 만드시오 (Flash라면 Sprite가 MovieClip이 됨)
class 뒤에 오는것은 불러올 파일명이며 저장할 파일명과 동일하게 코딩 (대소문자 구분 조심)
- 파일명 == class이름 == function == 생성자함수
class aaa <- class명 : 예를들어 "별"을 그리는 내용을 작성하였고 해당 "별"을 불러올 경우 사용하는 것
해당 "별"을 객체로 만들 경우 "객체:aaa=new aaa()"

new aaa() <- 인스턴스화
*/
{
public function lecture090713()
/* function: 생성자 함수
이렇게 생긴 함수는 클래스에 단 하나 또는 없을수도 있다.
new 함수를 통해 생성할 경우 기본적인 초기값을 제공하는 역할
*/
{
}
}
}

/* 정리
public: 접근제한자를 표기하기 위한 단어
extends: 상속받아서 넘기기 위한 단어
function: 생성자 함수를 표기하기 위한 단어
*/

[출처] [오픈강좌] 개발자를 꿈꾸는 초보 프로그래머 note - 090713 (플래시(Flash)로 생계를 이어가는 사람들의 모임:플생사모) |작성자 BlackMarket