스마트메이커로 주사위앱 만들기
스마트메이커로 주사위앱 만들기
애니관리자 기능을 사용하여 주사위 이미지 돌리기
이번 강좌에서는 스마트메이커의 애니관리자 기능을 사용하여 주사위 터치시 주사위를 굴리는 기능을 만들어 보겠습니다.
주사위 이미지가 2D이다보니 사실 '주사위를 굴린다'는 표현보다는 '주사위를 돌린다'는 표현이 맞을 것입니다.
1. 애니관리자 선택하기
'주사위 이미지(그림 아톰)'를 선택한 후 '애니관리자' 메뉴 또는 아이콘을 선택합니다.
아래의 이미지에서 보는 것처럼 '애니관리자'메뉴를 선택하거나 아이콘을 선택하면 '주사위 - 애니관리자' 창이 나타납니다.
2. 애니관리자의 '추가' 버튼을 눌러 애니메이션 세팅하기
1) 언제
애니관리자의 '추가'버튼을 누르면 좌측에 애니관리자 세팅창이 나타납니다.
시작시점을 '한번 누르면'를 선택합니다.
2) 무엇을
효과선택을 '강조하기'로 선택합니다.
순차적으로 '회전하기'를 선택합니다.
3) 어떻게
속도를 '매우 빠르게'로 선택합니다.
나머지 옵션은 그대로 두고 '완료'버튼을 누릅니다.
4) 주사위 - 애니관리자 세팅완료
이와 같이 애니관리자 기능을 세팅한 후 주사위 이미지를 마우스 왼쪽 버튼을 한번 클릭하면 주사위가 시계방향으로 360도 1회 돌아가는 것을 확인하실 수가 있을 것입니다.
3. 업무규칙 작성하기
애니관리자 기능을 적용했으니 이제부터는 업무규칙을 약간 수정해 보겠습니다.
1) '업무규칙' 메뉴 선택하기
주사위 폼의 바탕화면에 마우스 오른쪽 버튼을 누르면 팝업메뉴가 나타납니다.
팝업메뉴중 '업무규칙'메뉴를 선택합니다.
2) 업무규칙 내용을 변경하기
아래의 이미지에서 보는 것처럼 주석처리합니다.
참고로, 주석처리된 부분은 앱 실행시 적용이 되지 않습니다.
그림을 누르면 다음 문단을 실행한다.
{
임시는 난수(1,6)를 참조한다.
//그림의 배경그림경로를 식("@path:\\image\\dice0"+임시+".png")으로 설정한다.
}
2) 업무규칙 추가하기
애니관리자 기능이 적용된 주사위 이미지를 터치하면 해당 주사위 이미지는 360도 돌아갑니다.
다 돌아간 후 1에서부터 6의 숫자 중 난수로 발생한 숫자의 주사위 이미지가 보이게 하려면 다음과 같은 업무규칙를 추가하겠습니다.
(주사위)를 선택한 후 '폼의 애니메이션을 완료하면(객체명)'메시지를 선택합니다.
'폼의 애니메이션을 완료하면 다음 문단을 실행한다.(객체명) {}' 업무규칙이 추가됩니다.
폼의 애니메이션을 완료하면 다음 문단을 실행한다.(객체명)
{
}
위에서 주석처리한 내용을 아래와 같이 복사하여 붙이기합니다.
폼의 애니메이션을 완료하면 다음 문단을 실행한다.(객체명)
{
그림의 배경그림경로를 식("@path:\\image\\dice0"+임시+".png")으로 설정한다.
}
4. 컴파일 작업후 실행하기
위와 같이 작업을 완료하였으면, 작업한 업무규칙에 제대로 적용이 될 수 있도록 컴파일 작업을 하겠습니다.
1) 컴파일 작업을 실행합니다.
아래의 이미지에서 보는 것처럼 '컴파일'아이콘을 눌러 컴파일을 하거나, 펑션키 F11를 눌러 컴파일 작업을 합니다.
2) 실행하기
'실행모드전환'아이콘을 눌러 테스트해보시기 바랍니다.
아래의 동영상을 통해 제대로 실행이 되는 지 확인해 보시길 바랍니다.
댓글목록
등록된 댓글이 없습니다.
