7-2.Attribute 창 알아보기




7-2.Attribute 창 알아보기



이번시간에는 다이나믹 콤포넌트의 기능을 설정할수 있는 Component Attribute 창에 대해 알아보도록 하겠습니다.

어떻게 돌아가는지 가볍게 설명하는 구간이으로 읽어보고 넘어가 주세요.


0.준비물



진행하기 전에 이 문서 아래 예제파일을 다운받아주세요.


1.Attribute 창 열기



1.  예제파일을 엽니다.



2.  화면에서 가장 왼쪽 박스 콤포넌트를 선택한뒤, 아이콘을 클릭해  Component Options 창 과 Components Attributes 창을 엽니다.

두개의 창이 뜨는 걸 확인하셨나요?왼쪽은 Component Options 창입니다. 다이나믹 콤포넌트를 사용하기 위한 창이죠.

오른쪽은 Component Attributes 창입니다. 다이나믹 콤포넌트를 만들수 있는 창입니다.Component Attributes 창을 살펴봅시다.

3. 위의 box는 콤포넌트 이름입니다. 내부에 콤포넌트가 있으면, 여러개의 항목이 등장합니다.

왼쪽은 Attribute의 기능리스트를 결정하며 오른쪽은 해당 attribute에 대한 값을 설정할 수 있는 창입니다.


2.Atrribute 기능리스트


Attribute는 동적 기능을 설정하는 부분이며,

이 값들을 적절히 조정해서 다양한 기능을 만들수 있습니다

.

+기호를 누르거나 Add attribute를 클릭하면 새로 추가할수 있는 Attribute 리스트가 나옵니다. 반대로 -를 누르면 지울수 있습니다.

한번에 이 많은 걸 다 쓰는 건 아니고(….) 필요한 것만 골라 씁니다.

각 박스별로, 기능을 세팅해두었으니, 하나하나 클릭하면서 Component Attributes 창과 Component Options 창을 확인해보세요.


a.Component Info


Component Info 는 이름그대로 콤포넌트의 설명을 넣는 부분입니다.

이 내용은 Component Options 창 가장 위에 표시되며 어떤 콤포넌트인지 설명하는 역할을 합니다.

설명글이므로 취향대로 입력하시면 됩니다. 간단한 html 태그를 이용해서 글자의 굵기나 기울기를 조정도 할수 있습니다.

두번째 박스를 Component Info 항목으로 세팅해두었으니 선택해서 살펴보세요.




이름설명



Name해당 콤포넌트의 이름을 결정합니다.

Summary해당 콤포넌트의 요약글을 넣습니다.

Description해당 콤포넌트의 자세한 설명을 넣습니다.

ItemCode아이템의 고유숫자를 입력합니다.




b.Position/Size/Rotation


위치와 크기, 각도를 설정합니다. 직접 수정하기보단, 등록만 해두고 다른 Attribute랑 결합해서 조정하는 편입니다.

값부분의 숫자를 바꾸면, 해당 값. 즉, 크기라던가 위치를 바꿀수 있습니다.

세번째 박스를 선택한뒤, 테스트해보세요.




이름설명



XX좌표 위치를 설정합니다.

YY좌표 위치를 설정합니다.

ZZ좌표 위치를 설정합니다.

LenXX좌표 길이를 설정합니다.

LenYY좌표 길이를 설정합니다.

LenZZ좌표 길이를 설정합니다.

RotXX축 회전을 설정합니다.

RotYY축 회전을 설정합니다.

RotZZ축 회전을 설정합니다.




c.Behaviors


동작을 결정합니다. 사실 가장 재미있는중요한 부분!!이에요. 네번째 박스로 테스트해보세요.




이름설명

Material재질과 색상을 변경합니다.

ScaleTool크기변경을 제한합니다. 특정방향으로만 크기를 조절해야 할때 설정해두면 좋습니다.

Hidden숨길지 말지를 결정합니다. 0이면 보이고 1이면 숨겨집니다. 요것도 다른거랑 연결해서 조정합니다.

onClick클릭했을때 반응을 결정합니다. 클릭하면 열리는 문 등을 만들수 있어요

Copies해당 콤포넌트를 복사합니다. 이것도 다른거랑 연결해서 갯수를 자동조정할수 있습니다.




d.Form Design


Component Info 창의 외관을 설정하는 부분입니다. 콤포넌트 다 만들고 마지막에 정리할때 사용하시면 됩니다.




이름설명


ImageURL썸네일을 추가할수 있습니다.

DialogWidth창의 가로크기를 설정합니다.

DialogHeight창의 세로 크기를 설정합니다.


아직은 좀 이해가 안가실 것 같아요. 다음시간에는 실제로 재미있는 다이나믹 콤포넌트들을  이용해보며 익혀보는 시간을 가지도록 하겠습니다.