2011년 7월 2일 토요일

제 6 장 풍선 상승 애니메이션 2 (디자이너창 작업)

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)컬럼에서 버튼을 선택하고 Button1StartStopButton으로 정정하고또한 속성(Properties)컬럼에서 폰트크기(FontSize)난에25.0을 기입하고 텍스트(Text)난에 사라짐을 기입한다.

2-4. 다음에팔레트컬럼에서 미디어(Media)드로워를 열고 사운드(Sound)를 선택하여 뷰어로 드래그하면 사운드가 뷰어에 나타나지 않고 넌비지블한 영역(뷰어의 외부하단 영역)에 나타난다.

2-5. 지금까지 설명한 앱인벤터 디자이너창의 스크린샷은 다음과 같다.



참고 사항: 상기 디자이너창의 디자인과 이후 설명하는 블록에디터창의 블록조합에 대응하는 넥서스S의 풍선 화면


 


댓글 없음:

댓글 쓰기