SqueakByExample:11.5

상호작용과 애니메이션(Interaction and animation)

Morphs를 사용하여 라이브 유저 인터페이스(live user-interfaces)를 구축하려면, 마우스와 키보드를 사용하여 인터페이스와 상호작용할 수 있어야 합니다. 무엇보다도, morph를 그것의 외관과 위치-그 자체를 움직이게 만들어서-를 변경함으로써 유저 입력에 반응하게 만들 필요가 있습니다.

마우스 이벤트(Mouse events)

마우스 버튼이 눌러질 때, Morphic은 각 morph를 마우스 포인터 메시지 handlesMouseDown: 아래에 발송합니다. 만약 morph가 true로 답변하면, morphic은 즉시로 morph에 mouseDown: 메시지를 발송하며, 또한 유저가 마우스 버튼을 놓을 때 mouseUp: 메시지를 발송합니다. 만약 모든 morphs가 false로 답변하면, Morphic은 드레그 엔 드롭 연산을 개시합니다. 우리가 아래에 논의할 내용처럼, mouseDown: 와 mouseUp: 메시지들은 인수인, MouseEvent 오브젝트(마우스 액션의 세부사항들을 인코딩하는)와 함께 발송됩니다

마우스 이벤트를 취급(handle)하기 위해 CrossMorph를 확장해 봅시다. 우리는 모든 crossMorphs가 handlesMouseDown:에 true로 답변하는 것을 보장함으로써, 이 작업을 시작할 수 있습니다.

이 메서드를 CrossMorph:에 추가하십시오.

메서드 11.12: CrossMorph가 마우스 클릭에 반응하도록 공표(declare) 합니다.

CrossMorph»handlesMouseDown: anEvent
  ↑true

십자가의 색상을 빨강으로 변경하기를 원하고 그리고 노랑 버튼이 클릭되었을 때 우리는 색상을 노랑으로 변경하기를 원한다고 가정해 보십시오. 이 작업은 메서드 11.13에 의해 수행될 수 있습니다.

메서드 11.13: morph의 색상을 변경하여 마우스 클릭에 반응하기

CrossMorph»mouseDown: anEvent
  anEvent redButtonPressed
    ifTrue: [self color: Color red].
  anEvent yellowButtonPressed
    ifTrue: [self color: Color yellow].
  self changed

이 메서드가 morph의 색상을 변경하는 것 뿐만 아니라, 이 self changed를 발송하는 것에 주의합니다. 이 메서드는 적절한 시간에 morphic이 drawOn:을 발송하는 것을 보증합니다. 일단 Morph가 마우스 이벤트를 취급(handle)하면, 여러분은 더 이상 마우스로 morph를 쥐거나 이동시킬 수 없다는 사실에 유의해 주십시오. Halo를 사용해야만 하는 대신에: halo를 나타나게 하기 위해 morph를 파랑 클릭하고, morph 의 상단에서 갈색 이동 핸들(the brown move handle)과 검정색 픽업 핸들(the black pickup handle) 중 하나를 쥡니다.

mouseDown의 anEvent 인수는 MorphicEvent의 서브클래스인 MouseEvent의 인스턴스 입니다. MouseEvent는 redButtonPressed 와 yellowButtonPressed 메서드를 정의합니다. 어떤 다른 메서드가 마우스 이벤트 정보를 제공하는지를 보기 위해 이 클래스를 검색합니다.

키보드 이벤트 (Keyboard events)

키보드 이벤트를 붙잡기 위해, 우리는 3 가지 단계들을 취해야 합니다.

1. 특정 morph에 “keyboard focus”를 부여합니다: 예를 들면, 마우스가 우리의 morph위에 있을 때 그 morph에 우리의 focus를 부여할 수 있습니다.
2. 키보드 이벤트 자체를 handleKeystroke: 메서드로 취급(handle)합니다: 이 메시지는 유저가 키를 누를 때, 키보드 포커스(keyboard focus)를 갖는 morph에 발송됩니다.
3. 마우스가 더 이상 우리의 morph에 없을 때, 키보드 포커스를 릴리즈합니다.

CrossMorph를 확장하여, Keystrokes에 반응하게 만듭시다. 첫 번째로, 우리는 마우스가 morph에 있을 때 알림을 받도록 정리 배열을 할 필요가 있습니다. 이 알림은, 만약 우리의 morph가 handlesMouseOver: 메시지에 true로 답변할 때 발생합니다.

마우스 포인터 아래에 있을 때, CrossMorph가 반응하도록 공표합니다.

메서드 11.14: 우리는 “mouse over” 이벤트를 취급(handle)하기를 원합니다.

CrossMorph»handlesMouseOver: anEvent
  ↑true

이 메시지는 마우스 위치에 있어 handlesMouseDown:의 등가물입니다. 마우스 포인터가 morph에 들어가거나 떠날 때 mouseEnter: 와 mouseLeave: 메시지가 morph에 발송됩니다.

2 개의 메서드를 정의하여 CrossMorph가 키보드 포커스를 붙잡거나 릴리즈(놓도록)하고, 세 번째 메서드가 실제로 키 스트로크(Keystrokes)를 취급(handle)하도록 정의하십시오.

메서드 11.15: 마우스가 morph에 들어갈 때, 키보드 포커스 얻기

CrossMorph»mouseEnter: anEvent
  anEvent hand newKeyboardFocus: self

Method 11.16: 메서드 11.16: 마우스 포인터를 멀리 치울 때, 포커스(focus)가 원래 있던 자리로 돌아갑니다.

CrossMorph»mouseLeave: anEvent
  anEvent hand newKeyboardFocus: nil

메서드 11.17: 키보드 이벤트(keyboard events)를 수신하고 건네주기

CrossMorph»handleKeystroke: anEvent
  | keyValue |
  keyValue := anEvent keyValue.
  keyValue = 30 "up arrow"
    ifTrue: [self position: self position -- (0 @ 1)].
  keyValue = 31 "down arrow"
    ifTrue: [self position: self position + (0 @ 1)].
  keyValue = 29 "right arrow"
    ifTrue: [self position: self position + (1 @ 0)].
  keyValue = 28 "left arrow"
    ifTrue: [self position: self position -- (1 @ 0)]

우리가 이 메서드를 작성하면, 여러분은 화살표 키를 사용하여 morph를 이동할 수 있게 됩니다. 마우스가 더 이상 morph에 있지 않을 때, handleKeystroke: 메시지는 발송되지 않으므로, morph는 키보드 명령어에 대한 반응을 중지합니다. 키 값들을 발견하기 위해, 트랜스크립트^Transcript 창을 열고 메서드 11.17에 트랜스크립트^Transcript show: anEvent keyValue을 추가할 수 있습니다. handleKeystroke:의 anEvent 인수는 KeyboardEvent의 인스턴스이며, MorphicEvent의 또 다른 서브클래스입니다. 키보드 이벤트(keyboard events)에 관해 좀더 학습하시려면, 이 클래스를 검색하십시오.

Morphic animations

Morphic은 2 개의 메인 메서드로 단순한 에니메이션 시스템(animation system)을 제공합니다: stepTime은 각 스텝(step) 사이의3 시간을 10분의 1초단위로 지정하는 동안(혹은 반면에), step은, 보통 시간의 인터벌(regular interval)때, morph에 발송됩니다. 게다가, startStepping은 스태핑 메커니즘(stepping mechanism)을 on으로 전환하며, 반면에 stopStepping은 그 스태핑 메커니즘을 off 상태로 다시 전환합니다. isStepping은 morph가 현재 스태핑 되고 있는지의 여부를 발견하기 위해 사용될 수 있습니다.

이 메서드들을 다음과 같이 정의하여 CrossMorph를 깜박이도록 만듭니다.

메서드 11.18: 에니메이션 시간 인터벌(the animation time interval)을 정의하기

CrossMorph»stepTime
  ↑ 100

메서드 11.19: 애니매이션(animation)에서 스탭(step) 만들기

CrossMorph»step
  (self color diff: Color black) < 0.1
    ifTrue: [self color: Color red]
    ifFalse: [self color: self color darker]

시작하기 위해, 여러분은 CrossMorph에서(morphic halo에서 디버그 핸들 사용) 인스펙터를 열 수 있습니다. 하단에 있는 작은 워크스페이스^Workspace 패널에서 self startStepping을 타이핑하고 do it 을 실행합니다. 예비수단으로, 여러분은 스태핑(stepping)을 시작하고 정지하기 위해, handleKeystroke: 메서드를 수정하여, +와 –를 수정할 수 있습니다.

다음 코드를 메서드 11.17에 추가하기

keyValue = $+ asciiValue
  ifTrue: [self startStepping].
keyValue = $-- asciiValue
  ifTrue: [self stopStepping].