5. 구성요소 작업
앱인벤터 디자이너창을 사용하여 풍선 상승 애니메이션을 위한 외관구성의 디자인에 대해 설명한다.
1. 컴퓨터에 미리 준비된 풍선이미지를 디자이너창에서 업로드한다.
1-1. 이미지파일 등의 업로드에 대해서는, 디자이너창의 중앙우측의 하부에 위치한 미디어(Media)컬럼에 있는 추가버튼(Add…)을 클릭하면, 대화상자(Upload File…)가 다음의 스크린샷과 같이 나타난다.
1-2. 이 대화상자에서 버튼(파일 선택)을 클릭하고 컴퓨터에 미리 준비한 풍선그림파일을 찾아서 선택하고 버튼 열기(O)를 클릭한 다음, 버튼(OK)을 클릭한다.
1-3. 풍선그림파일이 29개 이므로 상기 작업을 29회 반복하면, 구성요소 디자이너의 미디어(Media)컬럼에는 다음과 같이 업로드한 해당 그림파일이 나타난다.
참고사항: 상기 이미지파일의 명칭은 실제로 다운로드한 명칭과 상이하므로, 풍선리스트의 작성시에 업로드한 파일명칭과 동일하여야 한다.
2. 팔레트의 아이템을 뷰어로 드래그하면 구성요소를 생성한다.
2-1. 디자이너창의 좌측에 위치한 팔레트컬럼의 기본(Basic)드로워에서 캔버스를 선택하여 뷰어로 드래그하고, 폭을 Fill parent(폭의 전체길이에 해당됨)로 선택하고 높이를 300으로 적어 넣는다.
2-2. 다음에, 팔레트컬럼에서 애니메이션(Animation)드로워를 열고 볼(Ball)과 이미지스프라이트(imageSprite) 중에서 이미지스프라이트를 선택하여 캔버스 내부의 하단 중앙부분으로 드래그한다. 디자인창의 중앙좌측에 위치한 구성요소(Components)컬럼에서 이미지스프라이트(imageSprite1)을 풍선(Balloon1)으로 정정하고, 디자이너창의 좌측에 위치한 속성(Properties)컬럼에서 그림(Picture)난을 열면 미디어(Media)컬럼에서 이미 업로드한 이미지가 나타나고 이 이미지중에서 하나(cwbBalloon.png)를 선택하고 버튼(OK)를 클릭하면 뷰어의 이미지스프라이트 영역에 선택된 풍선이미지가 나타남과 동시에 라이브로 연동하는 에뮬레이터(또는 핸드폰)에도 마찬가지로 이미지가 나타남을 알 수 있다.
참고사항: 소망의 이미지를 애니메이션으로 사용하고자 하는 경우에는 이미지스프라이트를 사용하여야 한다. 그 이유는, 볼은 그 자체를 이미지로 이미 사용되고 있기 때문이다.
2-3. 다음에, 팔레트컬럼에서 기본(Basic)드로워를 다시 열고, 버튼을 선택하여 뷰어의 캔버스의 외측하부로 드래그한다. 구성요소(Components)컬럼에서 버튼을 선택하고 Button1을StartStopButton으로 정정하고, 또한 속성(Properties)컬럼에서 폰트크기(FontSize)난에25.0을 기입하고 텍스트(Text)난에 사라짐을 기입한다.
2-4. 다음에, 팔레트컬럼에서 미디어(Media)드로워를 열고 사운드(Sound)를 선택하여 뷰어로 드래그하면 사운드가 뷰어에 나타나지 않고 넌비지블한 영역(뷰어의 외부하단 영역)에 나타난다.
2-5. 지금까지 설명한 앱인벤터 디자이너창의 스크린샷은 다음과 같다.
댓글 없음:
댓글 쓰기