5. 구성요소 작업
앱인벤터 디자이너를 사용하여 잠자리 애니메이션을 위한 외관구성의 디자인을 다음과 같이 한다.
1. 컴퓨터에 미리 준비된 그림파일을 업로드한다.
아래 스크린샷에 나타난 바와 같이 파일을 업로드하기 위해 미디어(Media)컬럼의 버튼(Add…)을 클릭하면 대화상자(Upload File…)가 나타난다.
이 대화상자에서 버튼(파일 선택)을 클릭하고 컴퓨터에 미리 준비한 잠자리그림을 선택하고 버튼 열기(O)를 클릭한 다음, 버튼(OK)을 클릭한다.
그림 파일이 2개 이므로 상기 작업을 2회 반복하면, 구성요소 디자이너창의 미디어(Media)컬럼에는 다음과 같이 업로드한 해당 그림파일이 나타난다.
2. 팔레트컬럼의 아이템을 뷰어로 드래그하면 구성요소를 생성한다.
2-1. 우선 팔레트컬럼에서 기본(Basic)드로워를 열고 캔버스를 선택하여 뷰어로 드래그하고,폭을 Fill parent(부모 폭의 길이전체에 해당됨)로 선택하고 높이를 300으로 기입한다.
2-3. 다음에, 팔레트컬럼에서 애니메이션(Animation)드로워를 열고 볼(Ball)과 이미지스프라이트(imageSprite) 중에서 이미지스프라이트를 선택하여 캔버스내의 중앙부분에 드래그한다. 중앙좌측의 구성요소(Components)컬럼에서 이미지스프라이트(imageSprite1)을 dragonfig로 정정하고, 좌측에 위치한 속성(Properties)컬럼에서 그림(Picture)난을 열면 미디어(Media)컬럼에서 이미 업로드한 이미지가 나타나고 이 이미지중에서 한 이미지(dragonfig1.png)를 선택하고 버튼(OK)를 클릭하면 뷰어의 이미지스프라이트 영역에 선택된 잠자리그림이 나타남과 동시에 연동하고 있는 에뮬레이터(또는 안드로이드폰)에도 마찬가지의 그림이 나타난다.
2-4. 다음에, 클록을 4회 선택하여 뷰어로 드래그하면, 뷰어에 클록의 모습을 드러내지 않는 넌비지블한 영역(뷰어의 외부하단 영역)에 각각 나타난다. 속성컬럼에서 타이머구동(TimeEnabled)난에 체크표시를 하지 않고, 클록의 시간주기(본 예제에서는 그림의 유지시간)를 25msec(0.025초)로 각각 설정한다. 실제로는 이 시간보다 지연되어 나타난다. 따라서,시간주기(Time Interval)를 변동하기를 원하는 경우에는 다른 값을 입력하면 된다.
2-5. 다음에, 잠자리의 동작 등에 관한 커멘트를 나타내는 알림 문구로서,
“잠자리를 날게 하려면 잠자리를 터치하세요.”,
“잠자리를 잡으려면 잠자리를 터치하세요.”
등을 나타내기 위해, 팔레트컬럼의 기타 자료(Other Stuff)드로워를 열고 통보자(Notifier)을 선택하여 뷰에 드래그하면, 마찬가지로 뷰어의 하단외측영역에 넌비지블한 구성요소로서 자동으로 이동하여 배치된다.
2-6. 다음에, 팔레트컬럼에서 미디어(Media)드로워를 열고 사운드(Sound)을 선택하여 뷰에 드래하면, 뷰어의 하단외측영역에 넌비지블한 구성요소로서 자동으로 이동하여 배치된다.
3. 지금까지 설명한 디자이너창의 스크린샷은 다음과 같다.
참고 사항: 상기 디자이너창의 구성요소와 나중에 설명하는 블록에디터창의 기능블록에 대응하여 나타나는 잠자리 화면
댓글 없음:
댓글 쓰기