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

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

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

4. 圖片向下滾動

【scroll controls】交互響應(yīng)圖標(biāo)下的【scroll down】交互響應(yīng)分支完成圖片向下滾動的功能。

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

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

if verticalpos<100 then verticalpos:=verticalpos+5

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

5. 單擊滾動條任意位置

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

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