SqueakByExample:11.5: Difference between revisions

From 흡혈양파의 번역工房
Jump to navigation Jump to search
mNo edit summary
(번역수정)
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
==상호작용과 애니메이션(Interaction and animation)==
==상호 작용과 애니메이션==


Morphs를 사용하여 라이브 유저 인터페이스(live user-interfaces)를 구축하려면, 마우스와 키보드를 사용하여 인터페이스와 상호작용할 수 있어야 합니다. 무엇보다도, morph를 그것의 외관과 위치-그 자체를 움직이게 만들어서-를 변경함으로써 유저 입력에 반응하게 만들 필요가 있습니다.  
morph 모프를 사용해서 생동감있는 유저 인터페이스를 만들려면, 마우스와 키보드를 사용하여 인터페이스와 상호작용이 가능해야 합니다. 더군다나 morph 는 스스로의 모양새와 위치-자신에 대한 애니메이션을 사용해서-를 변경함으로서 유저로 부터의 입력에 반응할 수 있어야 합니다.


===마우스 이벤트(Mouse events)===


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


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


마우스 버튼을 눌렀을때, Morphic 은 각 morph 를 대상으로 handlesMouseDown: 메시지를 전송합니다. 만약 morph 가 true 를 반환하면, Morphic 은 즉시 morph 에게 mouseDown: 메시지를 보내며, 유저가 마우스 버튼에서 손을 뗐을때는 mouseUp: 메시지를 전송합니다. 만약 모든 morph 가 false 를 반환하는경우, Morphic 은 드래그앤드롭의 동작을 시작합니다. 아래에서 알아볼 내용에도 있겠지만, mouseDown: 과 mouseUp: 메시지는, MouseEvent 객체의 인자를 포함해서 전송됩니다.


{{CommentSqueak|이 메서드를 {{Template:HighlightBold|CrossMorph:}}에 추가하십시오.}}
CrossMorph 를 확장해서 마우스 이벤트를 취급할 수 있도록 해보겠습니다. 일단 crossMorphs 의 모든 morph 가 handlesMouseDown: 에 true 를 반환하게 하는것부터 시작하도록 하겠습니다.




메서드 11.12: CrossMorph가 마우스 클릭에 반응하도록 공표(declare) 합니다.
{{CommentSqueak|이 메서드를 {{Template:HighlightBold|CrossMorph}} 클래스에 추가하십시오.}}
 
 
메서드 11.12: CrossMorph 가 마우스 클릭에 반응하도록 선언합니다.
 
<syntaxhighlight lang="smalltalk">
<syntaxhighlight lang="smalltalk">
CrossMorph»handlesMouseDown: anEvent
CrossMorph>>handlesMouseDown: anEvent
   ↑true
   ↑true
</syntaxhighlight>
</syntaxhighlight>




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


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


메서드 11.13: morph의 색상을 변경하여 마우스 클릭에 반응하기
<syntaxhighlight lang="smalltalk">
<syntaxhighlight lang="smalltalk">
CrossMorph»mouseDown: anEvent
CrossMorph>>mouseDown: anEvent
   anEvent redButtonPressed
   anEvent redButtonPressed
     ifTrue: [self color: Color red].
     ifTrue: [self color: Color red].
Line 34: Line 38:




이 메서드가 morph의 색상을 변경하는 것 뿐만 아니라, 이 self changed를 발송하는 것에 주의합니다. 이 메서드는 적절한 시간에 morphic이 drawOn:을 발송하는 것을 보증합니다. 일단 Morph가 마우스 이벤트를 취급(handle)하면, 여러분은 더 이상 마우스로 morph를 쥐거나 이동시킬 수 없다는 사실에 유의해 주십시오. Halo를 사용해야만 하는 대신에: halo를 나타나게 하기 위해 morph를 파랑 클릭하고, morph 의 상단에서 갈색 이동 핸들(the brown move handle)[[image:move_button_brown.png]]과 검정색 픽업 핸들(the black pickup handle)[[image:black_handle_button.png]] 중 하나를 쥡니다.
이 메서드에서 morph 의 색상을 변경한 다음 self changed 를 보낸다는것에 주의합시다. 이 self 부분 때문에 Morphic 은 즉시 drawOn: 을 보내게 됩니다. 추가로, morph 가 마우스 이벤트를 처리하면 유저는 더이상 morph 를 마우스로 잡아서 이동시킬 수 없게된다는걸 유념해 주시기 바랍니다. 이동등의 작업을 하고싶은 경우는 할로를 사용해야만 합니다: 할로를 보이게 하기 위해서 morph 를 파랑 클릭하고 morph 상단에서 morph를 파랑 클릭하고, 모프 상단에서 갈색 이동 손잡이[[image:move_button_brown.png]]과 검정색 픽업 손잡이[[image:black_handle_button.png]] 중 하나를 잡습니다.


mouseDown의 anEvent 인수는 MorphicEvent의 서브클래스인 MouseEvent의 인스턴스 입니다. MouseEvent는 redButtonPressed 와 yellowButtonPressed 메서드를 정의합니다. 어떤 다른 메서드가 마우스 이벤트 정보를 제공하는지를 보기 위해 이 클래스를 검색합니다.  
mouseDown: 메서드의 인수인 anEvent 는 MorphicEvent 의 서브클래스인 MouseEvent 의 인스턴스 입니다. MouseEvent 에는 redButtonPressed 와 yellowButtonPressed 메서드가 정의되어 있습니다. 마우스 이벤트를 취급하는 메서드는 어떤것들이 있는지 알고싶다면, MouseEvent 클래스를 살펴보면 됩니다.  




===키보드 이벤트 (Keyboard events)===


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


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


CrossMorph를 확장하여, Keystrokes에 반응하게 만듭시다. 첫 번째로, 우리는 마우스가 morph에 있을 때 알림을 받도록 정리 배열을 할 필요가 있습니다. 이 알림은, 만약 우리의 morph가 handlesMouseOver: 메시지에 true로 답변할 때 발생합니다.
# 특정 morph 에 "keyboard focus" 를 부여합니다: 예를 들면, 마우스가 morph 위에 있는경우 해당 morph 에 focus 를 부여할 수 있습니다.
# handleKeystroke: 메서드를 사용해서 morph 가 키보드 이벤트를 처리하게 합니다: 이 메시지는 유저가 키를 눌렀을때, 키보드 포커스를 가지고 있는 morph 에 전송됩니다.
# 마우스의 포인터가 더 이상 대상이 되는 morph 위에 위치하지 않는경우, keyboard focus 를 release 합니다.




{{CommentSqueak|마우스 포인터 아래에 있을 때, CrossMorph가 반응하도록 공표합니다.}}
CrossMorph 를 확장해서, 키입력에 반응하도록 만들겠습니다. 첫번째로, 마우스의 포인터가 대상이 되는 morph 위에 있는경우 알림을 받도록 해야할거같군요. 이 알림은, 만약 대상이 되는 morph 가 handlesMouseOver: 메시지에 true 를 반환할때 발생합니다.




메서드 11.14: 우리는 “mouse over” 이벤트를 취급(handle)하기를 원합니다.
{{CommentSqueak|마우스 포인터 아래에 있을 때, CrossMorph 가 반응하도록 선언하십시오.}}
 
 
메서드 11.14: "mouse over" 이벤트를 처리할 수 있게 합니다.
 
<syntaxhighlight lang="smalltalk">
<syntaxhighlight lang="smalltalk">
CrossMorph»handlesMouseOver: anEvent
CrossMorph>>handlesMouseOver: anEvent
   ↑true
   ↑true
</syntaxhighlight>
</syntaxhighlight>




이 메시지는 마우스 위치에 있어 handlesMouseDown:의 등가물입니다. 마우스 포인터가 morph에 들어가거나 떠날 때 mouseEnter: 와 mouseLeave: 메시지가 morph에 발송됩니다.
마우스 위치에 대한 처리는 handlesMouseDown: 과 같습니다. 마우스 포인터가 morph 에 들어가거나 바깥으로 이동할때 mouseEnter: 와 mouseLeave: 메시지가 morph 로 전달됩니다.




{{CommentSqueak|2 개의 메서드를 정의하여 {{Template:HighlightBold|CrossMorph}}가 키보드 포커스를 붙잡거나 릴리즈(놓도록)하고, 세 번째 메서드가 실제로 키 스트로크(Keystrokes)를 취급(handle)하도록 정의하십시오.}}
{{CommentSqueak|2 개의 메서드를 정의해서 {{Template:HighlightBold|CrossMorph}} 가 keyboard focus 를 붙잡거나 놓고, 세 번째 메서드가 실제로 키보드입력을 취급하도록 정의하십시오.}}




메서드 11.15: 마우스가 morph에 들어갈 때, 키보드 포커스 얻기
메서드 11.15: 마우스가 morph 에 들어갈 때, keyboard focus 얻기
 
<syntaxhighlight lang="smalltalk">
<syntaxhighlight lang="smalltalk">
CrossMorph»mouseEnter: anEvent
CrossMorph>>mouseEnter: anEvent
   anEvent hand newKeyboardFocus: self
   anEvent hand newKeyboardFocus: self
</syntaxhighlight>
</syntaxhighlight>


Method 11.16: 메서드 11.16: 마우스 포인터를 멀리 치울 때, 포커스(focus)가 원래 있던 자리로 돌아갑니다.  
 
메서드 11.16: 마우스 포인터를 바깥쪽으로 이동시키면, 초점은 원래 있던 자리로 돌아갑니다.  
 
<syntaxhighlight lang="smalltalk">
<syntaxhighlight lang="smalltalk">
CrossMorph»mouseLeave: anEvent
CrossMorph>>mouseLeave: anEvent
   anEvent hand newKeyboardFocus: nil
   anEvent hand newKeyboardFocus: nil
</syntaxhighlight>
</syntaxhighlight>




메서드 11.17: 키보드 이벤트(keyboard events)를 수신하고 건네주기
메서드 11.17: 키보드 이벤트를 수신하고 전달하기
 
<syntaxhighlight lang="smalltalk">
<syntaxhighlight lang="smalltalk">
CrossMorph»handleKeystroke: anEvent
CrossMorph>>handleKeystroke: anEvent
   | keyValue |
   | keyValue |
   keyValue := anEvent keyValue.
   keyValue := anEvent keyValue.
   keyValue = 30 "up arrow"
   keyValue = 30 "up arrow"
     ifTrue: [self position: self position -- (0 @ 1)].
     ifTrue: [self position: self position - (0 @ 1)].
   keyValue = 31 "down arrow"
   keyValue = 31 "down arrow"
     ifTrue: [self position: self position + (0 @ 1)].
     ifTrue: [self position: self position + (0 @ 1)].
Line 91: Line 102:
     ifTrue: [self position: self position + (1 @ 0)].
     ifTrue: [self position: self position + (1 @ 0)].
   keyValue = 28 "left arrow"
   keyValue = 28 "left arrow"
     ifTrue: [self position: self position -- (1 @ 0)]
     ifTrue: [self position: self position - (1 @ 0)]
</syntaxhighlight>
</syntaxhighlight>




우리가 이 메서드를 작성하면, 여러분은 화살표 키를 사용하여 morph를 이동할 수 있게 됩니다. 마우스가 더 이상 morph에 있지 않을 때, handleKeystroke: 메시지는 발송되지 않으므로, morph는 키보드 명령어에 대한 반응을 중지합니다.
커서 키를 이동하고 morph 를 움직일 수 있는 메서드를 작성했습니다. 마우스가 더이상 대상이 되는 morph 의 영역에 없을때, handleKeystroke: 메시지는 전송되지 않기때문에, morph 는 키보드입력에 대한 반응을 하지 않게 됩니다. 키보드 입력값을 찾기위해서, Transcript 창에 값을 출력하기 위한 '''Transcript show: anEvent keyValue''' 내용을 메서드 11.17 에 추가할 수 있습니다. handleKeystroke: 의 anEvent 인수는 KeyboardEvent 의 인스턴스이며, MorphicEvent 의 서브클래스입니다. 키보드 이벤트에 대해 좀 더 알고싶다면 이 클래스를 살펴보시기 바랍니다.
키 값들을 발견하기 위해, transcript 창을 열고 메서드 11.17에 Transcript show: anEvent keyValue을 추가할 수 있습니다. handleKeystroke:의 anEvent 인수는 KeyboardEvent의 인스턴스이며, MorphicEvent의 또 다른 서브클래스입니다. 키보드 이벤트(keyboard events)에 관해 좀더 학습하시려면, 이 클래스를 검색하십시오.
 
 
 
===Morphic 애니메이션===


===Morphic animations===
Morphic 은 2 개의 메인 메서드로 구성되는 간단한 애니메이션 시스템을 제공합니다: stepTime 은 각 스텝 사이의 시간간격을 밀레세컨드단위로 지정하고, step<ref name="주석11-3">stepTime 은 실제로 각 스탭 사이의 최소 시간을 의미합니다. 만약 1ms 의 stepTime 을 요청하면, 스퀵이 너무나 바빠서 사용자의 morph 를 그 정도로 자주 한 단계씩 전환하지 못한다는 사실에 놀라지 마십시오.</ref>은 일정한 간격으로 morph 에 전송됩니다. 덧붙여서, startStepping 은 스태핑 메커니즘을 on 으로 전환하고, stopStepping 은 그 스태핑 메커니즘을 off 상태로 다시 전환합니다. isStepping 은 morph 가 현재 한 단계씩 진행되는지의 여부를 확인하려 할때 사용합니다.


Morphic은 2 개의 메인 메서드로 단순한 에니메이션 시스템(animation system)을 제공합니다: stepTime은 각 스텝(step) 사이의3 시간을 10분의 1초단위로 지정하는 동안(혹은 반면에), step<ref name="주석11-3">Step Time은 실제로 각 스탭(steps) 사이의 최소 시간입니다. 만약 여러분이 1ms의 step Time을 요청하면, 스퀵이 너무나 바빠서 여러분의 morph를 그 정도로 자주 스태핑(stepping)하지 못한다는 사실에 놀라지 마십시오.</ref>은, 보통 시간의 인터벌(regular interval)때, morph에 발송됩니다. 게다가, startStepping은 스태핑 메커니즘(stepping mechanism)을 on으로 전환하며, 반면에 stopStepping은 그 스태핑 메커니즘을 off 상태로 다시 전환합니다. isStepping은 morph가 현재 스태핑 되고 있는지의 여부를 발견하기 위해 사용될 수 있습니다.


{{CommentSqueak|이 메서드들을 다음과 같이 정의하여 CrossMorph 를 깜박이도록 만드십시오.}}


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


메서드 11.18: 애니메이션 시간 간격 정의하기


메서드 11.18: 에니메이션 시간 인터벌(the animation time interval)을 정의하기
<syntaxhighlight lang="smalltalk">
<syntaxhighlight lang="smalltalk">
CrossMorph»stepTime
CrossMorph>>stepTime
   ↑ 100
   ↑ 100
</syntaxhighlight>
</syntaxhighlight>
    
    


메서드 11.19: 애니매이션(animation)에서 스탭(step) 만들기
메서드 11.19: 애니메이션에서 step 만들기
 
<syntaxhighlight lang="smalltalk">
<syntaxhighlight lang="smalltalk">
CrossMorph»step
CrossMorph>>step
   (self color diff: Color black) < 0.1
   (self color diff: Color black) < 0.1
     ifTrue: [self color: Color red]
     ifTrue: [self color: Color red]
Line 121: Line 135:
</syntaxhighlight>
</syntaxhighlight>


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


다음 코드를 메서드 11.17에 추가하기
구현한 애니메이션을 시작하기 위해서, CrossMorph 상의 Inepector 를 열어 할로(할로의 디버그 핸들을사용[[image:debug_button_gray.png]])아래쪽의 작은 Workspace 패널 에 self startStepping 을 입력하고 {{Template:HighlightGray|do it}} 을 실행합니다. 보조수단을 위해, handleKeystroke: 메서드를 수정하여, + 키와 –키 로 스테핑의 시작와 정지가 가능하게 할 수 있습니다.
 
 
다음 코드를 메서드 11.17에 추가하십시오.
 
<syntaxhighlight lang="smalltalk">
<syntaxhighlight lang="smalltalk">
keyValue = $+ asciiValue
keyValue = $+ asciiValue
   ifTrue: [self startStepping].
   ifTrue: [self startStepping].
keyValue = $-- asciiValue
keyValue = $- asciiValue
   ifTrue: [self stopStepping].
   ifTrue: [self stopStepping].
</syntaxhighlight>
</syntaxhighlight>
 
 
 
 
==Notes==
==Notes==
<references />
<references />


[[Category:SqueakByExample]]
[[Category:SqueakByExample]]

Latest revision as of 19:06, 16 September 2013

상호 작용과 애니메이션

morph 모프를 사용해서 생동감있는 유저 인터페이스를 만들려면, 마우스와 키보드를 사용하여 인터페이스와 상호작용이 가능해야 합니다. 더군다나 morph 는 스스로의 모양새와 위치-자신에 대한 애니메이션을 사용해서-를 변경함으로서 유저로 부터의 입력에 반응할 수 있어야 합니다.


마우스 이벤트

마우스 버튼을 눌렀을때, Morphic 은 각 morph 를 대상으로 handlesMouseDown: 메시지를 전송합니다. 만약 morph 가 true 를 반환하면, Morphic 은 즉시 morph 에게 mouseDown: 메시지를 보내며, 유저가 마우스 버튼에서 손을 뗐을때는 mouseUp: 메시지를 전송합니다. 만약 모든 morph 가 false 를 반환하는경우, Morphic 은 드래그앤드롭의 동작을 시작합니다. 아래에서 알아볼 내용에도 있겠지만, mouseDown: 과 mouseUp: 메시지는, MouseEvent 객체의 인자를 포함해서 전송됩니다.

CrossMorph 를 확장해서 마우스 이벤트를 취급할 수 있도록 해보겠습니다. 일단 crossMorphs 의 모든 morph 가 handlesMouseDown: 에 true 를 반환하게 하는것부터 시작하도록 하겠습니다.


Squeak comment.png이 메서드를 CrossMorph 클래스에 추가하십시오.


메서드 11.12: CrossMorph 가 마우스 클릭에 반응하도록 선언합니다. 

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 를 보낸다는것에 주의합시다. 이 self 부분 때문에 Morphic 은 즉시 drawOn: 을 보내게 됩니다. 추가로, morph 가 마우스 이벤트를 처리하면 유저는 더이상 morph 를 마우스로 잡아서 이동시킬 수 없게된다는걸 유념해 주시기 바랍니다. 이동등의 작업을 하고싶은 경우는 할로를 사용해야만 합니다: 할로를 보이게 하기 위해서 morph 를 파랑 클릭하고 morph 상단에서 morph를 파랑 클릭하고, 모프 상단에서 갈색 이동 손잡이Move button brown.png과 검정색 픽업 손잡이Black handle button.png 중 하나를 잡습니다.

mouseDown: 메서드의 인수인 anEvent 는 MorphicEvent 의 서브클래스인 MouseEvent 의 인스턴스 입니다. MouseEvent 에는 redButtonPressed 와 yellowButtonPressed 메서드가 정의되어 있습니다. 마우스 이벤트를 취급하는 메서드는 어떤것들이 있는지 알고싶다면, MouseEvent 클래스를 살펴보면 됩니다.


키보드 이벤트

키보드 이벤트를 얻기위해, 다음의 3 가지 단계들을 거처야 합니다.

  1. 특정 morph 에 "keyboard focus" 를 부여합니다: 예를 들면, 마우스가 morph 위에 있는경우 해당 morph 에 focus 를 부여할 수 있습니다.
  2. handleKeystroke: 메서드를 사용해서 morph 가 키보드 이벤트를 처리하게 합니다: 이 메시지는 유저가 키를 눌렀을때, 키보드 포커스를 가지고 있는 morph 에 전송됩니다.
  3. 마우스의 포인터가 더 이상 대상이 되는 morph 위에 위치하지 않는경우, keyboard focus 를 release 합니다.


CrossMorph 를 확장해서, 키입력에 반응하도록 만들겠습니다. 첫번째로, 마우스의 포인터가 대상이 되는 morph 위에 있는경우 알림을 받도록 해야할거같군요. 이 알림은, 만약 대상이 되는 morph 가 handlesMouseOver: 메시지에 true 를 반환할때 발생합니다.


Squeak comment.png마우스 포인터 아래에 있을 때, CrossMorph 가 반응하도록 선언하십시오.


메서드 11.14: "mouse over" 이벤트를 처리할 수 있게 합니다. 

CrossMorph>>handlesMouseOver: anEvent
  ↑true


마우스 위치에 대한 처리는 handlesMouseDown: 과 같습니다. 마우스 포인터가 morph 에 들어가거나 바깥으로 이동할때 mouseEnter: 와 mouseLeave: 메시지가 morph 로 전달됩니다.


Squeak comment.png2 개의 메서드를 정의해서 CrossMorph 가 keyboard focus 를 붙잡거나 놓고, 세 번째 메서드가 실제로 키보드입력을 취급하도록 정의하십시오.


메서드 11.15: 마우스가 morph 에 들어갈 때, keyboard focus 얻기 

CrossMorph>>mouseEnter: anEvent
  anEvent hand newKeyboardFocus: self


메서드 11.16: 마우스 포인터를 바깥쪽으로 이동시키면, 초점은 원래 있던 자리로 돌아갑니다. 

CrossMorph>>mouseLeave: anEvent
  anEvent hand newKeyboardFocus: nil


메서드 11.17: 키보드 이벤트를 수신하고 전달하기 

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 창에 값을 출력하기 위한 Transcript show: anEvent keyValue 내용을 메서드 11.17 에 추가할 수 있습니다. handleKeystroke: 의 anEvent 인수는 KeyboardEvent 의 인스턴스이며, MorphicEvent 의 서브클래스입니다. 키보드 이벤트에 대해 좀 더 알고싶다면 이 클래스를 살펴보시기 바랍니다.


Morphic 애니메이션

Morphic 은 2 개의 메인 메서드로 구성되는 간단한 애니메이션 시스템을 제공합니다: stepTime 은 각 스텝 사이의 시간간격을 밀레세컨드단위로 지정하고, step[1]은 일정한 간격으로 morph 에 전송됩니다. 덧붙여서, startStepping 은 스태핑 메커니즘을 on 으로 전환하고, stopStepping 은 그 스태핑 메커니즘을 off 상태로 다시 전환합니다. isStepping 은 morph 가 현재 한 단계씩 진행되는지의 여부를 확인하려 할때 사용합니다.


Squeak comment.png이 메서드들을 다음과 같이 정의하여 CrossMorph 를 깜박이도록 만드십시오.


메서드 11.18: 애니메이션 시간 간격 정의하기 

CrossMorph>>stepTime
  ↑ 100


메서드 11.19: 애니메이션에서 step 만들기 

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


구현한 애니메이션을 시작하기 위해서, CrossMorph 상의 Inepector 를 열어 할로(할로의 디버그 핸들을사용Debug button gray.png)아래쪽의 작은 Workspace 패널 에 self startStepping 을 입력하고 do it 을 실행합니다. 보조수단을 위해, handleKeystroke: 메서드를 수정하여, + 키와 –키 로 스테핑의 시작와 정지가 가능하게 할 수 있습니다.


다음 코드를 메서드 11.17에 추가하십시오. 

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


Notes

  1. ↑ stepTime 은 실제로 각 스탭 사이의 최소 시간을 의미합니다. 만약 1ms 의 stepTime 을 요청하면, 스퀵이 너무나 바빠서 사용자의 morph 를 그 정도로 자주 한 단계씩 전환하지 못한다는 사실에 놀라지 마십시오.
Retrieved from "https://trans.onionmixer.net/mediawiki/index.php?title=SqueakByExample:11.5&oldid=2208"