由圖13-22可知，圖片移動方式為direct to line，移動路徑為圖片沿直線由下向上，起始值為0，終點值為100，目標點為verticalpos變量的值；圖片移動要瞬間完成且不越界。

及時點評  由于移動圖標移動圖片時的目標點為verticalpos變量的值，因此當verticalpos的值變化時，圖片將產生移動且瞬間完成。之所以當verticalpos的值減去5時，圖片產生向上移動，是因為屏幕坐標y軸是向下的，y值愈小則位置愈靠上，所以變量值減去5使圖片位置向上移動5。而圖片移動的路徑起始點與終止點的值與滑塊在滾動條上移動時的路徑的起點值、終點值設置一樣，是為了使圖片上下移動與滑塊上下移動在位置上的同步。

注意，由于單擊scroll up熱區使verticalpos變量值的大小發生改變，不僅使圖片產生移動，而且滑塊移動的目標點也是verticalpos變量，因而也產生同步移動。由于用戶單擊鼠標時，程序反復執行“scroll up”流程，圖片連續向上移動5個像素單位，且瞬間完成，因此出現圖片向上滾動的效果，直到松開鼠標按鍵滾動停止。

4. 圖片向下滾動

【scroll controls】交互響應圖標下的【scroll down】交互響應分支完成圖片向下滾動的功能。

【scroll down】也是一個熱區交互響應分支，熱區的大小和位置正好覆蓋滾動條的向下指針按鈕處。

該分支群組圖標的下級流程與【scroll up】完全一致，只是單擊【scroll down】按鈕后，其分支運算圖標中的代碼使verticalpos變量值增加5。其運算表達式如下：

if verticalpos<100 then verticalpos:=verticalpos+5

由于verticalpos的值增加5，故圖片向下移動。連續移動且瞬間完成產生圖片向下滾動的效果。

5. 單擊滾動條任意位置

當用戶用鼠標在滾動條中間的任意位置單擊時，程序進入【scroll controls】交互圖標下的【click on scroll bar】分支流程。該分支也是一個熱區交互響應分支，其熱區大小與位置正好覆蓋滾動條中間的長條位置。該分支下級流程如圖13-23所示。

圖13-23  【click on scroll bar】分支下級流程