본문 바로가기

프레임 상태로 켜고 끄는 버튼 만들기

상태는 프레임이 머무는 모습입니다. 켜짐과 꺼짐처럼 오갈 두 모습을 상태로 만들고 인터랙션 문장 두 개로 이어 두면, 누를 때마다 프레임이 두 모습 사이를 부드럽게 오가고 바뀐 모습에 그대로 머뭅니다.

방법중급약 5분

두 모습을 상태로 만들기

프레임 하나와 그 안의 원 하나로 시작합니다. 예에서는 가로로 긴 프레임의 왼쪽에 원을 두었고, 흰 씬에서 보이도록 프레임의 채우기를 연한 회색으로 바꿔 두었습니다. 프레임을 그리는 법은 도형과 프레임에 있습니다.

  1. 처음 상태 만들기

    프레임 안의 빈 곳을 클릭해 프레임을 선택하세요. 오른쪽 프레임 패널의 타임라인에서 상태 오른쪽의 + 버튼(상태 추가)을 누르세요. 'state1' 줄이 생기고 '처음 상태' 표시가 붙습니다. 지금 그려 둔 모습이 state1입니다.

    상태 추가를 누르자 'state1' 줄이 생기고 '처음 상태' 표시가 붙습니다. 영상: 프레임을 선택하고 프레임 패널 타임라인의 상태 옆 + 버튼을 누르자 'state1 0.3s' 줄이 생기고 처음 상태 표시가 붙습니다.
  2. 둘째 상태 열기

    + 버튼을 한 번 더 누르세요. 'state2' 줄이 생기고 애니메이션 모드로 바뀝니다. 아래에 타임라인이 펼쳐지고, 그 버튼 줄 맨 앞이 '씬 › Frame 1 · state2'가 됩니다. 지금 시간을 가리키는 세로선(플레이헤드)은 state2의 끝인 0.3초에 놓입니다. 여기서 바꾸는 것이 state2의 모습입니다.

    + 버튼을 다시 누르자 'state2'가 생기고, 타임라인이 그 끝인 0.3초에서 열립니다. 영상: + 버튼을 한 번 더 누르자 'state2' 줄이 생기고 애니메이션 모드로 바뀌며, 타임라인이 '씬 › Frame 1 · state2'의 끝 0.3초에서 열립니다.
  3. 켜진 자리로 원 옮기기

    원을 프레임 오른쪽 끝까지 끌어 옮기세요. 타임라인의 'Ellipse 1' 줄에 0초와 0.3초 키프레임이 생깁니다. 바뀐 것은 state2의 모습이고, 그려 둔 처음 모습은 그대로입니다. 키프레임이 생기지 않으면 ⌘Z로 되돌리세요. 타임라인 버튼 줄에서 동그란 구멍이 뚫린 마름모 모양의 자동 키프레임 버튼을 켠 뒤 다시 옮기세요.

    원을 오른쪽 끝으로 끌자, 타임라인의 'Ellipse 1' 줄에 0초와 0.3초 키프레임이 생깁니다. 영상: state2가 열린 채 원을 프레임 오른쪽 끝으로 끌자, 타임라인의 'Ellipse 1' 줄 0초와 0.3초에 키프레임이 생깁니다.
  4. 켜진 색 열기

    프레임 안의 빈 곳을 클릭해 프레임을 다시 선택하세요. 오른쪽 패널을 아래로 내려 프레임 스타일의 채우기 줄 왼쪽 색 네모를 누르세요. 색상 창이 열립니다.

    프레임을 선택해 채우기 색 네모를 누르자 색상 창이 열립니다. 영상: state2가 열린 채 프레임 안의 빈 곳을 클릭해 프레임을 선택하고, 프레임 스타일의 채우기 색 네모를 누르자 색상 창이 열립니다.
  5. 켜진 색 고르기

    색상 창의 세로 무지개 막대에서 초록 쪽을 누르고, 왼쪽 큰 네모의 오른쪽 위를 누르세요. 프레임이 초록이 되고, 타임라인의 'Fill 1' 줄에도 0초와 0.3초 키프레임이 생깁니다.

    프레임 채우기를 초록으로 바꾸자, 타임라인의 'Fill 1' 줄에도 키프레임이 생깁니다. 영상: 색상 창의 세로 무지개 막대에서 초록 쪽을 누르고 큰 네모의 오른쪽 위를 누르자, 프레임이 초록이 되고 타임라인의 'Fill 1' 줄에 키프레임이 생깁니다.

누를 때마다 상태 바꾸기

⇧I를 눌러 인터랙션 모드로 바꾸세요. 캔버스에는 그려 둔 처음 모습이 보입니다. 프레임 안의 빈 곳을 클릭해 프레임을 선택하세요.

  1. 켜는 문장 만들기

    아래 인터랙션 패널에서 레시피 아래의 직접 만들기를 누르세요. 액션 메뉴에서 'state2 상태로'를 고르세요. 목록에 '누르면 → state2 상태로' 문장이 생깁니다.

    직접 만들기에서 'state2 상태로'를 고르자 '누르면 → state2 상태로' 문장이 생깁니다. 영상: 인터랙션 모드에서 프레임을 선택하고 직접 만들기를 누른 뒤 'state2 상태로'를 고르자, 목록에 '누르면 → state2 상태로' 문장이 생깁니다.
  2. 켜는 문장에 조건 붙이기

    그 문장 행 끝의 ⋯ 모양 더 보기 버튼을 누르고 조건 추가를 고르세요. 메뉴에서 'state1일 때'를 고르세요. 문장이 '누르면 state1일 때 → state2 상태로'가 됩니다. 꺼져 있을 때만 켜는 문장입니다.

    더 보기 › 조건 추가에서 'state1일 때'를 고르자 문장에 조건이 붙습니다. 영상: 문장 행 끝의 ⋯ 버튼에서 조건 추가를 고르고 'state1일 때'를 고르자, 문장이 '누르면 state1일 때 → state2 상태로'가 됩니다.
  3. 끄는 문장 만들기

    목록 맨 아래의 인터랙션 추가를 누르세요. 다시 열린 레시피 목록에서 직접 만들기를 누르고 'state1 상태로'를 고르세요. 목록에 '누르면 → state1 상태로' 문장이 생깁니다.

  4. 끄는 문장에 조건 붙이기

    새 행의 더 보기 › 조건 추가에서 'state2일 때'를 고르세요. 문장이 '누르면 state2일 때 → state1 상태로'가 됩니다. 켜져 있을 때만 끄는 문장입니다.

  5. 미리보기로 확인하기

    패널 제목 줄의 세모 모양 미리보기 버튼을 누르세요. 프레임을 누르면 원이 오른쪽으로 미끄러지고 프레임이 초록이 됩니다. 다시 누르면 처음 모습으로 돌아옵니다. esc 키를 누르면 미리보기가 끝납니다.

    미리보기에서 누를 때마다 원이 좌우로 오가고, 프레임 색이 함께 바뀝니다. 영상: 미리보기 버튼을 누르고 프레임을 누르자 원이 오른쪽으로 미끄러지며 프레임이 초록이 되고, 다시 누르자 처음 모습으로 돌아갑니다.

조건이 없으면 스위치가 움직이지 않습니다

두 문장에 조건이 없으면 누를 때마다 둘 다 차례로 실행됩니다. state2로 가자마자 state1로 돌아오므로 아무 일도 없는 것처럼 보이고, 둘째 문장 아래에 '위에도 같은 때 실행되는 인터랙션이 있습니다. 둘 다 실행됩니다'가 보입니다. 두 문장에 서로 다른 상태 조건을 붙이세요.

다른 버튼 · 나중에 고치기 · 누르는 동안만

팁

다른 버튼으로 켜고 끄려면. 인터랙션 모드에서 프레임 밖의 버튼을 선택하고, 옆의 마름모(◇)를 캔버스의 프레임 위로 끌어 놓은 뒤 메뉴에서 'Frame 1의 state2 상태로'를 고르세요. 끄는 버튼에서는 같은 방법으로 'Frame 1의 state1 상태로'를 고르세요.

팁

상태의 모습을 고치려면. 프레임 패널에서 그 상태의 줄을 누르고, 0초에서 열린 타임라인의 재생 버튼 오른쪽 끝으로 이동 버튼을 누른 뒤 바꾸세요. 처음 상태는 그려 둔 모습이므로 디자인 모드에서 바로 고치세요.

팁

누르는 동안만 바뀌게 하려면. 상태는 다른 상태로 옮길 때까지 머물러, 손을 떼도 돌아오지 않습니다. 누르는 동안만 작아지는 버튼은 레시피의 버튼 반응으로 만드세요.

이 페이지의 단축키

이 페이지의 단축키
인터랙션 모드 켜고 끄기⇧I
미리보기 끝내기esc
실행 취소⌘Z
이 페이지가 도움이 되었나요?

2026년 10월 11일에 고침 · 이 페이지의 영상은 현재 에디터로 녹화했습니다.

많이 찾는 것