XPLATFORM 101

[엑스플랫폼] transformation

엑스플랫폼 기초
CSS3 이야기를 다루다보니 엑스플랫폼 transformation에 대해서는 한번도 언급을 하지 않은 것 같아서..

transformation 은 형태를 변형시키는 값을 지정하는 속성입니다.
애니메이션 효과의 기본이 되는 요소이기도 합니다.

transformation 에는 다음과 같은 속성(기능)을 제공합니다.
- flip : 뒤집기 변환을 지정하는 속성. 마치 딱지 치기 같은 기능입니다.
- origin : 말로 설명하기는 애매한데 컴파스 같은 기능?
- rotate : 회전변환을 지정하는 속성
- scale : 확대/축소 변환을 지정하는 속성
- skew : 비틀기 변환을 지정하는 속성
- translate : 이동 변환을 지정하는 속성

여러개의 속성을 동시에 지정할 수 있습니다.
하지만 문법상 동일한 속성이 반복되어 지정되면 마지막 속성만 유효하게 됩니다.

UX 스튜디오에서는 직접 속성값을 입력할 수도 있지만
숫자가 잔뜩 나오면 어지러워지기 때문에 툴의 기능을 사용합니다.


적용할 대상을 선택하고 컨텍스트 메뉴에서 Transform Component 메뉴를 선택합니다.
그러면 컴포넌트의 색상과 포인트의 모양이 바뀌면서 편집상태로 전환됩니다.
그리고 컨텍스트 메뉴에서 적용 가능한 항목이 표시됩니다.
작업이 끝나면 Enter 키를 치거나 메뉴에서 End Edit를 선택해주면 됩니다.


좌측 상단에 보이는 흰색 포인트는 회전변형의 중심좌표입니다.
마우스로 클릭하고 이동하거나 소스코드에서 수정할 수 있습니다.
기본값은 0,0 입니다.
컨텍스트 메뉴에서 Center Origin을 선택하면 중심좌표를 컴포넌트의 중심에 오게 할 수 있습니다.

flip은 수치를 지정하지는 않고 뒤집는 방향만 결정합니다.
가로방향(horizontal)과 세로방향(vertical) 옵션이 있는데 
둘 다 지정할 수 있습니다.


편집을 마치고 나면 원래 컴포넌트는 희미하게 보이고 변형된 컴포넌트가 보여집니다.
실제 애플리케이션을 실행했을때는 원래 컴포넌트는 보이지 않습니다.
그리고 컴포넌트의 외형만 변경되는 것이 아니라 내부 컴포넌트에도 동일한 효과가 적용됩니다.
버튼의 경우 내부에 있는 텍스트도 동일하게 뒤집어진것을 확인할 수 있습니다.

* 편집 단계에서 Reset All 을 선택하면 모든 변형을 취소할 수 있습니다.

rotate 같은 경우에는 컨텍스트 메뉴에는 주로 사용하는 3가지 값만 정의되어 있지만 실제 작업시에는
값을 직접 지정하거나 마우스로 컴포넌트를 움직일 수 있습니다.


마우스는 각 꼭지점에 가져가면 커서 모양이 바뀌고 원하는 방향으로 돌려볼 수 있습니다.


scale 옵션은 현재 상태의 컴포넌트를 확대하는 것이기 때문에
이미지나 텍스트가 깨질 수 있습니다.

translate 는 그냥 이동입니다. x,y 축 기준으로...

또 한가지 더 있는 기능이 skew 입니다.
편집상태에서 면의 가운데 지점에 마우스를 가져가면 포인트가 아래 그림과 같이 변경됩니다.
 


해당하는 지점을 잡고 위치를 바꾸어주면 해당 축으로 모양을 비틀 수 있습니다.
여기서 비튼다는 개념은 3차원은 아니고 2차원 개념입니다. ~~

원래 의도는 아니지만 잘 조정하면 이런 입체 모양도 나온다는..^^
 
XPLATFORM 101

[엑스플랫폼] Global

엑스플랫폼 기초
객체 중에 Global 이라는 녀석이 있습니다.
일반적으로 사용할때에는 Global 이라는 것을 빼고 쓰기 때문에 잘 인식하기 힘들지만..
3가지 속성을 가지며 (속성보다는 상수에 가까운)
꽤 많은 메소드를 가집니다.
Array, Boolean, Date, Error, Function, Number, Object, RegExp, String....

일단 속성부터
- Infinity
자동차 이름은 아니고. ㅠㅠ Number.POSITIVE_INFINITY의 초기값을 반환하는 속성이라고 합니다.
POSITIVE_INFINITY 는 자바스크립트에서 나타낼 수 있는 가장 큰 수보다 더 큰 값을 반환하는 속성입니다.
무한대를 의미하는 것이라고 하더군요.
* 자바스크립트에서 나타낼 수 있는 가장 큰 수는 1.7976931348623157e+308 이라고 나오네요.
왠만해서는 쓸 일이 별로 없을듯..

- NaN
Not a Number
숫자가 아닌 연산값을 받았음을 나타내는 값
문자열을 숫자로 변환하려 하던지 문자열과 숫자를 연산하려 할때 해당 값을 반환하게 됩니다.

- undefined
변수를 만들고 나서 변수에 값을 할당해주기 전에 주어지는 특별한 값입니다.
예를 들어
var test;
trace(test)
를 실행해보면
uxs (6020): undefined
가 출력됩니다.
하지만
var test:String;
이 되면 빈 문자열이 출력됩니다.



참고로 null과 undefined를 비교하면 동일한 것으로 판단을 합니다.
null은 참조하는 객체가 아직 없음을 의미하는 것이고
undefined는 그 변수가 참조하는 객체를 아직 지정하지 않았음을 뜻한다고 합니다.

- 메소드들은 객체와 조금 혼란스러운데
예를 들어 다음과 같이 메소드를 사용하면 초기값 0 이 생성됩니다.
var test = new Number();
- 도움말을 보다보면 좀 혼란스러운 부분이 있습니다.
String 메소드 부분을 보면
String 개체는 문자열 리터럴을 사용하여 함축적으로 만들 수 있습니다. 이런 방법으로 만든 String 개체는(표준 문자열이라고도 함) new 연산자를 사용하여 만든 String 개체와는 다르게 취급합니다. 모든 문자열 리터럴은 공통의 전역 문자열 개체를 공유합니다. 따라서 문자열 리터럴에 속성을 추가하면 모든 표준 문자열 개체에 해당 속성을 사용할 수 있습니다.

문자열 리터럴 이라는 녀석은 변수를 만들고 바로 문자열을 대입하는 겁니다.
var a, b;
a = "A 문자열";
b = "B 문자열";
a.test = "10";
trace(a.test); //(1)

//(2)
var ea, eb;
ea = new String("A 문자열");
eb = new String("B 문자열");
ea.test = "10";
trace(ea.test); //(2)
도움말과 좀 설명이 다르긴 한데 실제 코딩을 해보면
(1)번은 undefined로 출력이 되고 (2)번은 10이 출력됩니다.

원래 도움말에서의 의도는 (1)번이 10이 출력되고 b.test 를 호출해도 10이 출력이 되어야 하는데...
자바스크립트에서도 동일하게 동작하므로...
그냥 new String()으로 선언된 객체에 속성을 추가할 수 있다라고 알고 있으면 되겠네요.

http://cafe.naver.com/xplatform101/252 
XPLATFORM 101

[엑스플랫폼] 쇼케이스 따라하기 (71) - Flash

엑스플랫폼 쇼케이스

- 3rd Party > Flash


엑스플랫폼 애플리케이션 내에서 플래시와 같은 외부 컴포넌트를 사용하게 될 수 있습니다.

이미 만들어진 자원을 다시 만들지 않고 재활용하는 경우도 있기 때문에

이런 경우 어떻게 사용하여야 하는지 알고 있는것이 좋겠죠.


엑스플랫폼에서 지원하는 액티브X 컴포넌트는 해당하는 컴포넌트를 편하게 사용하기 위한

포장재라고 할 수 있습니다.


크기나 배치, 스타일을 관리하고

사용여부, 단축키를 지원하며

관련된 이벤트를 하나로 지원할 수 있도록 합니다.


처음 액티브X 컴포넌트를 화면에 가져다 놓으면 아래에 있는 속성만 정의가 됩니다.



아직은 어떤 액티브 X 컨트롤을 사용할지 결정하지 않은 상태입니다.

사용할 액티브 X 컨트롤을 결정하는 것은 progid 라는 속성입니다.


해당 항목을 클릭하면 Choose a ActiveX Control 이라는 창이 나오고 개발자 PC에 설치된 액티브 X 중에서 선택하여

설정을 할 수 있게 지원합니다.


원하는 항목을 설정해주면 해당하는 classid가 설정되고

misc 항목에 설정 가능한 속성이 추가적으로 보이게 됩니다.



Information과 Position 사이에 Misc. 라는 분류가 생긴것을 확인할 수 있습니다.

해당 속성은 선택한 액티브 X 컨트롤에 따라 달라집니다.



이렇게 선택된 액티브 X 컨트롤은 사용자가 이미 설치되었다는 전제를 가지고 있습니다.

설치가 되어있지 않다면 그냥 빈 화면만 보이게 됩니다.

필요에 따라 배포가 되어야 한다면 codebase 속성을 사용해서 배포할 수도 있습니다.


각 액티브 X 컨트롤에서 제공하는 속성은 각 컨트롤의 메뉴얼을 참고하시면 됩니다.


이제 플래시를 다루어보겠습니다.

플래시는 액티브 X 컨트롤 창에서 다음과 같은 정보로 보여집니다.

Control - Shockwave Flash Object

Prog.ID - ShockwaveFlash.ShockwaveFlash.10

CLS.ID - {D27CDB6E-AE6D-11CF-96B8-444553540000}

Path - C:\Windows\system32\Macromed\Flash\Flash10v.ocx


* 해당 폴더에 가보면 Flash10v.ocx 말고 NPSWF32.dll 파일이 있는 경우가 있습니다.

이 녀석은 파이어폭스나 크롬을 사용하는 경우 적용되는 플러그인입니다.

* 크롬의 경우에는 빌트인이기 때문에 별도의 플러그인을 사용합니다.

C:\Users\joonha\AppData\Local\Google\Chrome\Application\13.0.782.220\gcswf32.dll

하지만 엑스플랫폼에서는 IE 기준으로 Flash10v.ocx 를 사용하면 됩니다.


- 제공되는 속성에 대한 상세한 내용은 아래 링크를 참고하시면 됩니다.

http://kb2.adobe.com/cps/127/tn_12701.html 


- movie 속성에 불러올 swf 파일의 주소를 지정해주면 됩니다.

http://cafe.naver.com/xplatform101/244 

티스토리툴바