Facebook Origami 예제 1) 움직이는 원 만들기
2015. 8. 27. 07:52ㆍ리뷰
이전 글(Facebook Origami 리뷰 1편)에서 간략하게 Origami가 어떤 툴인지 알아보았다면, 이번에는 예제를 만들면서 학습을 하는 형식으로 진행해 보겠습니다. 이전 글에서 말씀드렸듯이 우리가 사물을 보며 정의하는 것과는 반대로 사고의 흐름을 가져가면서 예제를 만들어 가도록 하겠습니다. 그리고 Origami를 능숙하게 사용하기 위해서는 Patch에 대한 이해가 중요한데요. 예제를 진행하면서 사용하는 Patch들의 속성값을 자유롭게 변경하고, 값애 따른 오브젝트의 변화를 확인하다보면 빠르게 Patch를 알아가실 수 있을겁니다.
Patch 마다 다양한 속성을 가지고 있는데, 속성의 이름만으로 어떤 역할을 하는지 쉽게 파악할 수 있습니다.
Layer Group Patch를 더블클릭하여 내부로 들어가게 되면 Fill Layer Patch 하나가 화면에 보입니다. 이 패치는 디바이스 화면 사이즈의 영역에 색을 채우는 기능을 가진 Patch입니다.
Layer Group을 더블 클릭해서 들어가세요!
추가 된 Layer Patch의 Width 속성과 Hight 속성을 각각 300으로 입력을 하면 사각형의 오브젝트가 생성 된 것을 Viewer에서 확인할 수 있고 여기에 모서리가 둥글게 가공을 할건데요. Patch Library에서 Rounded Rectangle를 찾아 추가합니다.
Patch의 오른쪽 Image 포인트를 Layer Patch의 왼편의 Image 포인트와 서로 연결 해줍니다. 그리고 Viewer를 확인하면 사각형 오브젝트에 Radius 값이 들어간 것을 확인할 수 있습니다. 그리고 Rounded Rectangle Patch 속성의 Radius 값을 0.5로 바꿔주면 원형의 오브젝트로 변경이 됩니다.
Transition Patch는 Progress 값 (0 or 1)을 전달받아 지정된 Value 값 (-9999~9999)으로 출력해주는 역할을 하는 Patch입니다.
Transition Patch의 Start Value와 End Value의 값을 각각 -300, 300으로 변경한 다음 Progress 값을 0과 1을 번갈아가며 입력하면, Progress값이 0일때는 -300이, 1일때는 300이 Layer Patch의 Y Position 속성이 전달되는데, 이를 통해 Progress의 0이 입력되면 Start Value를 1일때는 End Value를 출력하는 것을 확인할 수 있습니다.
Classic Animation은 Number 속성의 값이 변할때 이전의 값과 현재 값 사이의 값을 연속적으로 전달하는 역할을 합니다. Curve 속성은 애니메이션의 가속도를 정해주는 부분입니다.
Progress Patch를 찾아 추가하신 뒤 Progress의 Progress 포인트와 Classic Animation의 Number를 연결해 주시기 바랍니다.
Progress는 임의의 Value값이 들어왔을때, Start Value, End Value 속성을 통해 처음과 끝을 지정해주면, 그 해당 값이 전달 됐을 때 Progress 값을 전달해주는 역할을 합니다. 예를 들면 Start Value에 100을 입력하고, End Value에 200을 입력했을 경우, Value값에 100이 들어오면 출력값으로 0을, 200이 입력됬을때는 출력값을 1로 매칭시켜주는 것입니다.
이제 이 속성을 이용해서 주기적으로 값을 번갈아가며 전달하는 프로그램을 만들건데요. Delay Patch를 추가해주시기 바랍니다.
Delay는 연결되어 있는 출력값을 지정된 시간 만큼 이후의 값을 전달하는 기능을 합니다. Progress의 출력값과 Delay의 입력 Value를 서로 연결시켜주고 Delay의 출력 Value를 다시 Progress의 입력 Value에 연결해줍니다. 그러면 Progress에서 Classic Animation과 Delay에 값을 각각 전달하고 Delay가 다시 Progress에 다시 값을 전달함으로 결과적으로 Layer에 반복적으로 값을 전달하게 됩니다.
1. Layer : 화면에 Layer를 추가하는 역할
2. Rounded Rectangle : 연결된 오브젝트의 테두리를 둥글에 만들어주는 역할
3. Transition : Progress (0~1) 입력값을 사용자가 지정한 Value (-9999~9999)값으로 변환하여 출력을 해주는 역할.
4. Crassic Animation : 입력 값의 변화를 지정된 시간동안 값을 연속적으로 출력하는 역할.
5. Progress : Value (-9999~9999) 입력 값을 지정된 값에 맞에 Progress (0~1)로 출력해주는 역할.
6. Delay : 입력된 값을 설정된 시간 뒤에 입력된 값 그대로 출력해주는 역할
[참고##프로토타이핑##]
Patch 마다 다양한 속성을 가지고 있는데, 속성의 이름만으로 어떤 역할을 하는지 쉽게 파악할 수 있습니다.
1. Origami 프로젝트 생성
Quartz composer를 실행하고 상단 메뉴에서 File 탭을 눌러 New Origami File을 클릭하면 새로운 프로젝트를 생성할 수 있습니다. 새로운 창이 열리면 Editor 화면에 3개의 Patch가 있는데요. 가장 왼쪽의 Viewer Size Patch는 디바이스의 종류, 방향을 선택 할 수 있는 옵션을 제공하며, 오른쪽의 Viewer Patch는 Viewer에서 오브젝트를 시각적으로 나타내는 역할을 합니다. 그리고 가운데 위치한 Layer Group Patch가 실제 프로토타이핑을 하게 될 공간입니다.Layer Group Patch를 더블클릭하여 내부로 들어가게 되면 Fill Layer Patch 하나가 화면에 보입니다. 이 패치는 디바이스 화면 사이즈의 영역에 색을 채우는 기능을 가진 Patch입니다.
Layer Group을 더블 클릭해서 들어가세요!2. 오브젝트 만들기
먼저 만들어야 할 것은 원형 오브젝트입니다. Patch Library에서 Layer를 검색하신 후 Layer를 더블클릭하면, 화면에 Layer Patch가 추가 됩니다. (*Layer Patch를 한번 클릭 했을 때 Patch Library 내부에 디스크립션이 제공되는데, 여기에 Origami라고 적혀있는 것들이 Origami를 설치하며 추가된 Patch들입니다) Layer 패치는 포토샵에서 제공하는 레이어와 성격이 동일하다고 생각하시면 됩니다.추가 된 Layer Patch의 Width 속성과 Hight 속성을 각각 300으로 입력을 하면 사각형의 오브젝트가 생성 된 것을 Viewer에서 확인할 수 있고 여기에 모서리가 둥글게 가공을 할건데요. Patch Library에서 Rounded Rectangle를 찾아 추가합니다.
Patch의 오른쪽 Image 포인트를 Layer Patch의 왼편의 Image 포인트와 서로 연결 해줍니다. 그리고 Viewer를 확인하면 사각형 오브젝트에 Radius 값이 들어간 것을 확인할 수 있습니다. 그리고 Rounded Rectangle Patch 속성의 Radius 값을 0.5로 바꿔주면 원형의 오브젝트로 변경이 됩니다.
3. 움직임 주기
다음은 이 오브젝트에 움직임을 부여할건데요. 먼저 값에 따른 오브젝트의 변화를 확인해보겠습니다. Patch Library에서 Transition Patch를 찾아 추가한 다음 Transition의 Value와 Layer의 Y Position과 연결해주시기 바랍니다.Transition Patch는 Progress 값 (0 or 1)을 전달받아 지정된 Value 값 (-9999~9999)으로 출력해주는 역할을 하는 Patch입니다.
Transition Patch의 Start Value와 End Value의 값을 각각 -300, 300으로 변경한 다음 Progress 값을 0과 1을 번갈아가며 입력하면, Progress값이 0일때는 -300이, 1일때는 300이 Layer Patch의 Y Position 속성이 전달되는데, 이를 통해 Progress의 0이 입력되면 Start Value를 1일때는 End Value를 출력하는 것을 확인할 수 있습니다.
4. 연속성 주기.
다음으로 오브젝트의 이산적인 움직임에 연속성을 주도록 하겠습니다. Classic Animation Patch를 검색하고 추가해주시기 바랍니다. 그리고 Classic Animation의 Progress와 Transition의 Progress를 연결해주시고, Classic Animation의 Number 속성값을 0 또는 1로 변경하면, 오브젝트의 움직임이 일정 시간(Duration 속성 값)을 두고 부드러운 움직임을 가져가는 것을 볼 수 있습니다.Classic Animation은 Number 속성의 값이 변할때 이전의 값과 현재 값 사이의 값을 연속적으로 전달하는 역할을 합니다. Curve 속성은 애니메이션의 가속도를 정해주는 부분입니다.
5. 반복하기.
그리고 여기에 따로 값을 넣지 않더라도 이 오브젝트가 반복해서 움직일 수 있도록 줄건데요. 그러기 위해서는 Classic Animation에 0과 1을 반복적으로 값을 전달하는 역할을 하는 무언가가 있어야겠죠.Progress Patch를 찾아 추가하신 뒤 Progress의 Progress 포인트와 Classic Animation의 Number를 연결해 주시기 바랍니다.
Progress는 임의의 Value값이 들어왔을때, Start Value, End Value 속성을 통해 처음과 끝을 지정해주면, 그 해당 값이 전달 됐을 때 Progress 값을 전달해주는 역할을 합니다. 예를 들면 Start Value에 100을 입력하고, End Value에 200을 입력했을 경우, Value값에 100이 들어오면 출력값으로 0을, 200이 입력됬을때는 출력값을 1로 매칭시켜주는 것입니다.
이제 이 속성을 이용해서 주기적으로 값을 번갈아가며 전달하는 프로그램을 만들건데요. Delay Patch를 추가해주시기 바랍니다.
Delay는 연결되어 있는 출력값을 지정된 시간 만큼 이후의 값을 전달하는 기능을 합니다. Progress의 출력값과 Delay의 입력 Value를 서로 연결시켜주고 Delay의 출력 Value를 다시 Progress의 입력 Value에 연결해줍니다. 그러면 Progress에서 Classic Animation과 Delay에 값을 각각 전달하고 Delay가 다시 Progress에 다시 값을 전달함으로 결과적으로 Layer에 반복적으로 값을 전달하게 됩니다.
마무리하며..
이번글에서 준비한 내용은 여기까지고요. 오늘 사용한 패치들을 간략하게 정리하며 마치겠습니다.감사합니다.1. Layer : 화면에 Layer를 추가하는 역할
2. Rounded Rectangle : 연결된 오브젝트의 테두리를 둥글에 만들어주는 역할
3. Transition : Progress (0~1) 입력값을 사용자가 지정한 Value (-9999~9999)값으로 변환하여 출력을 해주는 역할.
4. Crassic Animation : 입력 값의 변화를 지정된 시간동안 값을 연속적으로 출력하는 역할.
5. Progress : Value (-9999~9999) 입력 값을 지정된 값에 맞에 Progress (0~1)로 출력해주는 역할.
6. Delay : 입력된 값을 설정된 시간 뒤에 입력된 값 그대로 출력해주는 역할
[참고##프로토타이핑##]