SqueakByExample:11.5 - Revision history

Onionmixer: 번역수정

2013-09-16T19:06:32Z

번역수정

← Older revision		Revision as of 19:06, 16 September 2013
Line 112:		Line 112:
	===Morphic 애니메이션===		===Morphic 애니메이션===

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


Line 118:		Line 118:


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

	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">

Onionmixer: 번역수정

2013-09-16T19:03:53Z

번역수정

← Older revision		Revision as of 19:03, 16 September 2013
Line 136:		Line 136:


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

Onionmixer: 번역수정

2013-09-15T03:18:57Z

번역수정

New page

==상호 작용과 애니메이션==

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

===마우스 이벤트===

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

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

{{CommentSqueak|이 메서드를 {{Template:HighlightBold|CrossMorph}} 클래스에 추가하십시오.}}

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

<syntaxhighlight lang="smalltalk">
CrossMorph>>handlesMouseDown: anEvent
↑true
</syntaxhighlight>

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

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

<syntaxhighlight lang="smalltalk">
CrossMorph>>mouseDown: anEvent
anEvent redButtonPressed
ifTrue: [self color: Color red].
anEvent yellowButtonPressed
ifTrue: [self color: Color yellow].
self changed
</syntaxhighlight>

이 메서드에서 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 메서드가 정의되어 있습니다. 마우스 이벤트를 취급하는 메서드는 어떤것들이 있는지 알고싶다면, MouseEvent 클래스를 살펴보면 됩니다.

===키보드 이벤트===

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

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

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

{{CommentSqueak|마우스 포인터 아래에 있을 때, CrossMorph 가 반응하도록 선언하십시오.}}

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

<syntaxhighlight lang="smalltalk">
CrossMorph>>handlesMouseOver: anEvent
↑true
</syntaxhighlight>

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

{{CommentSqueak|2 개의 메서드를 정의해서 {{Template:HighlightBold|CrossMorph}} 가 keyboard focus 를 붙잡거나 놓고, 세 번째 메서드가 실제로 키보드입력을 취급하도록 정의하십시오.}}

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

<syntaxhighlight lang="smalltalk">
CrossMorph>>mouseEnter: anEvent
anEvent hand newKeyboardFocus: self
</syntaxhighlight>

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

<syntaxhighlight lang="smalltalk">
CrossMorph>>mouseLeave: anEvent
anEvent hand newKeyboardFocus: nil
</syntaxhighlight>

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

<syntaxhighlight lang="smalltalk">
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)]
</syntaxhighlight>

커서 키를 이동하고 morph 를 움직일 수 있는 메서드를 작성했습니다. 마우스가 더이상 대상이 되는 morph 의 영역에 없을때, handleKeystroke: 메시지는 전송되지 않기때문에, morph 는 키보드입력에 대한 반응을 하지 않게 됩니다. 키보드 입력값을 찾기위해서, Transcript 창에 값을 출력하기 위한 '''Transcript show: anEvent keyValue''' 내용을 메서드 11.17 에 추가할 수 있습니다. handleKeystroke: 의 anEvent 인수는 KeyboardEvent 의 인스턴스이며, MorphicEvent 의 서브클래스입니다. 키보드 이벤트에 대해 좀 더 알고싶다면 이 클래스를 살펴보시기 바랍니다.

===Morphic 애니메이션===

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

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

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

<syntaxhighlight lang="smalltalk">
CrossMorph>>stepTime
↑ 100
</syntaxhighlight>

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

<syntaxhighlight lang="smalltalk">
CrossMorph>>step
(self color diff: Color black) < 0.1
ifTrue: [self color: Color red]
ifFalse: [self color: self color darker]
</syntaxhighlight>

구현한 애니메이션을 시작하기 위해서, CrossMorph 상의 Inepector 를 열어 할로(할로의 디버그 핸들을사용[[image:debug_button_gray.png]])아래쪽의 작은 워크스페이스 pane 에 self startStepping 을 입력하고 {{Template:HighlightGray|do it}} 을 실행합니다. 보조수단을 위해, handleKeystroke: 메서드를 수정하여, + 키와 –키 로 스테핑의 시작와 정지가 가능하게 할 수 있습니다.

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

<syntaxhighlight lang="smalltalk">
keyValue = $+ asciiValue
ifTrue: [self startStepping].
keyValue = $- asciiValue
ifTrue: [self stopStepping].
</syntaxhighlight>

==Notes==
<references />

[[Category:SqueakByExample]]

Onionmixer at 05:50, 30 August 2012

2012-08-30T05:50:34Z

← Older revision		Revision as of 05:50, 30 August 2012
Line 96:		Line 96:

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

	===Morphic animations===		===Morphic animations===

Onionmixer at 05:43, 30 August 2012

2012-08-30T05:43:13Z

← Older revision		Revision as of 05:43, 30 August 2012
Line 96:		Line 96:

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

	===Morphic animations===		===Morphic animations===

Onionmixer at 05:23, 30 August 2012

2012-08-30T05:23:27Z

← Older revision		Revision as of 05:23, 30 August 2012
Line 121:		Line 121:
	</syntaxhighlight>		</syntaxhighlight>

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

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

Onionmixer at 04:42, 30 August 2012

2012-08-30T04:42:59Z

← Older revision		Revision as of 04:42, 30 August 2012
Line 10:		Line 10:


	{{CommentSqueak\|이 ~~메소드를~~ {{Template:HighlightBold\|CrossMorph:}}에 추가하십시오.}}		{{CommentSqueak\|이 메서드를 {{Template:HighlightBold\|CrossMorph:}}에 추가하십시오.}}


	~~메소드~~ 11.12: CrossMorph가 마우스 클릭에 반응하도록 공표(declare) 합니다.		메서드 11.12: CrossMorph가 마우스 클릭에 반응하도록 공표(declare) 합니다.
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	CrossMorph»handlesMouseDown: anEvent		CrossMorph»handlesMouseDown: anEvent
Line 20:		Line 20:


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


	~~메소드~~ 11.13: morph의 색상을 변경하여 마우스 클릭에 반응하기		메서드 11.13: morph의 색상을 변경하여 마우스 클릭에 반응하기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	CrossMorph»mouseDown: anEvent		CrossMorph»mouseDown: anEvent
Line 34:		Line 34:


	이 ~~메소드가~~ 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를 발송하는 것에 주의합니다. 이 메서드는 적절한 시간에 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]] 중 하나를 쥡니다.

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


Line 44:		Line 44:

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

Line 53:		Line 53:


	~~메소드~~ 11.14: 우리는 “mouse over” 이벤트를 취급(handle)하기를 원합니다.		메서드 11.14: 우리는 “mouse over” 이벤트를 취급(handle)하기를 원합니다.
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	CrossMorph»handlesMouseOver: anEvent		CrossMorph»handlesMouseOver: anEvent
Line 63:		Line 63:


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


	~~메소드~~ 11.15: 마우스가 morph에 들어갈 때, 키보드 포커스 얻기		메서드 11.15: 마우스가 morph에 들어갈 때, 키보드 포커스 얻기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	CrossMorph»mouseEnter: anEvent		CrossMorph»mouseEnter: anEvent
Line 72:		Line 72:
	</syntaxhighlight>		</syntaxhighlight>

	Method 11.16: ~~메소드~~ 11.16: 마우스 포인터를 멀리 치울 때, 포커스(focus)가 원래 있던 자리로 돌아갑니다.		Method 11.16: 메서드 11.16: 마우스 포인터를 멀리 치울 때, 포커스(focus)가 원래 있던 자리로 돌아갑니다.
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	CrossMorph»mouseLeave: anEvent		CrossMorph»mouseLeave: anEvent
Line 79:		Line 79:


	~~메소드~~ 11.17: 키보드 이벤트(keyboard events)를 수신하고 건네주기		메서드 11.17: 키보드 이벤트(keyboard events)를 수신하고 건네주기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	CrossMorph»handleKeystroke: anEvent		CrossMorph»handleKeystroke: anEvent
Line 95:		Line 95:


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

	===Morphic animations===		===Morphic animations===

	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가 현재 스태핑 되고 있는지의 여부를 발견하기 위해 사용될 수 있습니다.		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: 에니메이션 시간 인터벌(the animation time interval)을 정의하기		메서드 11.18: 에니메이션 시간 인터벌(the animation time interval)을 정의하기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	CrossMorph»stepTime		CrossMorph»stepTime
Line 113:		Line 113:


	~~메소드~~ 11.19: 애니매이션(animation)에서 스탭(step) 만들기		메서드 11.19: 애니매이션(animation)에서 스탭(step) 만들기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	CrossMorph»step		CrossMorph»step
Line 121:		Line 121:
	</syntaxhighlight>		</syntaxhighlight>

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

	다음 코드를 ~~메소드~~ 11.17에 추가하기		다음 코드를 메서드 11.17에 추가하기
	<syntaxhighlight lang="smalltalk">		<syntaxhighlight lang="smalltalk">
	keyValue = $+ asciiValue		keyValue = $+ asciiValue

Onionmixer: SBE 상호작용과애니메이션 페이지 추가

2012-08-17T13:00:48Z

SBE 상호작용과애니메이션 페이지 추가

New page

==상호작용과 애니메이션(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로 답변하는 것을 보장함으로써, 이 작업을 시작할 수 있습니다.

{{CommentSqueak|이 메소드를 {{Template:HighlightBold|CrossMorph:}}에 추가하십시오.}}

메소드 11.12: CrossMorph가 마우스 클릭에 반응하도록 공표(declare) 합니다.
<syntaxhighlight lang="smalltalk">
CrossMorph»handlesMouseDown: anEvent
↑true
</syntaxhighlight>

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

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

이 메소드가 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]] 중 하나를 쥡니다.

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

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

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

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

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

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

메소드 11.14: 우리는 “mouse over” 이벤트를 취급(handle)하기를 원합니다.
<syntaxhighlight lang="smalltalk">
CrossMorph»handlesMouseOver: anEvent
↑true
</syntaxhighlight>

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

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

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

Method 11.16: 메소드 11.16: 마우스 포인터를 멀리 치울 때, 포커스(focus)가 원래 있던 자리로 돌아갑니다.
<syntaxhighlight lang="smalltalk">
CrossMorph»mouseLeave: anEvent
anEvent hand newKeyboardFocus: nil
</syntaxhighlight>

메소드 11.17: 키보드 이벤트(keyboard events)를 수신하고 건네주기
<syntaxhighlight lang="smalltalk">
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)]
</syntaxhighlight>

우리가 이 메소드를 작성하면, 여러분은 화살표 키를 사용하여 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<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를 깜박이도록 만듭니다.}}

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

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

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

다음 코드를 메소드 11.17에 추가하기
<syntaxhighlight lang="smalltalk">
keyValue = $+ asciiValue
ifTrue: [self startStepping].
keyValue = $-- asciiValue
ifTrue: [self stopStepping].
</syntaxhighlight>

==Notes==
<references />

[[Category:SqueakByExample]]