[앱 인벤터2] 이미지를 저장하고 다른 화면에서 불러오기

내가 가지고 있는 이미지를 화면에 보여주는 것은 어떻게 할까?

그리고 이를 다른 화면으로 이동했을 때 불러올 수 없을까?

준비

가. 앱 인벤터2 웹 페이지 접속하고, 언어를 ‘한국어’로 선택합니다.

URL : http://ai2.appinventor.mit.edu/

나. 시험용 단말을 준비하기

기본적으로 알아두기

캔버스 요소

캔버스는 그림을 그리는 도화지 같은 역할을 구성요소라 생각하면 됩니다.

그리고 캔버스에 이미지를 배경화면으로 넣을 수가 있고, 그리고 또 이를 다른 이미지 파일로도 저장할 수가 있어요.

 

알림 요소

알림 구성요소를 이용하면 앱에 간단한 경고 메시지나 질문 메시지를 보여줄 수가 있어요.

그리고 어떤 정보 메시지를 스마트폰 화면에 간단하게 표시해 줍니다.

 

실습하기

가. 스크린 추가

‘스크린’이란 영어로 화면이라는 의미입니다. 즉, 앱을 만들 때 스마트폰의 화면을 하나 더 추가한다는 의미입니다.

 

가. 먼저 두 개의 화면을 나타내기 위해 화면을 하나 추가하기

뷰어 상단에 보면 스크린 추가라는 버튼을 누르면 화면 추가가 가능합니다.

디자이너 작업

디자이너 화면에서는 아래 작업을 해야 합니다.

 

화면에 해당 구성 요소 및 이미지 파일 추가

 

할 일	설명	속성
이미지 파일 추가	캔버스에 이미지를 넣습니다.
캔버스 추가	이미지를 보여줍니다. 캔버스에 내용이 이미지로 저장이 가능합니다.	배경 이미지 배경 이미지 변경하기
버튼1, 버튼2 추가	이미지를 저장합니다. 다음 화면으로 이동합니다.	버튼 텍스트 버튼 제목 변경하기
알림추가	저장되는 이미지의 위치를 알려줍니다.

 

캔버스의 배경 이미지 바꾸기

 

‘캔버스1’ 요소를 선택 후, 속성의 배경 이미지를 선택하면 현재 선택 가능한 이미지가 나옵니다.

이미지를 선택하고, 확인을 누르면 화면에 해당 이미지가 보이게 됩니다.

블록 작업

블록 화면으로 이동하여 다음과 같은 블록을 뷰어로 가져옵니다.

블록을 맞춰봅니다.

정보를 저장하기 위한 변수라는 장소 생성하기

버튼1(이미지 저장하기)를 선택하면 파일이 저장됩니다.

버튼2(화면이동)을 선택하면 Screen2 화면으로 이동합니다.

화면 이동하기

앞에서 만든 화면으로 이동하려면 Screen1 버튼을 선택하면 현재 가진 화면 이름들이 보입니다.

여기서 아까 만든 Screen2를 선택합니다.

화면에 캔버스 요소를 추가하고 이미지 보이게 하는 하기

앞에서 했던 방법으로 캔버스 요소를 추가합니다. 그리고 블록 작업으로 이동합니다.

 

 

블록 작업(Screen2)

(1) Screen2을 선택 후, ‘언제 Screen2.초기화’ 블록을 가져옵니다.

    ‘언제 Screen2.초기화’ 블록은 Screen2 화면이 시작될 때, 실행되는 블록입니다.

 

(2) 캔버스와 알림 요소에서 블록을 가져옵니다.

(3) 제어 블록에서 ‘시작 값 가져오기’ 블록을 가져옵니다.

    ‘시작 값 가져오기’ 블록은 앞에서 전달받은 jpgname 변수 값입니다.

   

 

 

자 그럼 이제 연결해서 결과를 확인해 보겠습니다.

실행 하기

 

단말을 연결 후, 실제로 되는지 실행해 봅니다.

 

이미지를 저장한 이후에, 화면 이동을 누르면 화면이 이동하고 다음 화면에서 저장했던 이미지가 보여지게 됩니다.

저희는 위에서 아래와 같은 내용을 학습해 보았습니다.

# 이미지 저장하기

# 화면 이동시에 값을 전달하기

# 알림을 이용한 메시지 화면에 보여주기

# 캔버스에 이미지로 배경 지정해 보기

# 화면이 처음 시작될 때, 어떤 작업을 실행해 보기

# 변수를 사용해 보기

 

조금 내용이 많아 보이지만 여기까지 잘 따라왔으면 다음에는 더 쉽게 할 수 있습니다.

화이팅! 오늘 하루도 수고하셨습니다. 열공하세요.^^

 

 

하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 이는 그를 믿는 자마다 멸망하지 않고 영생을 얻게 하려 하심이라(요3:16)