打開程序，屏幕上顯示如圖1-1所示的程序流程圖和如圖1-2所示的程序運行主畫面。
圖1-1 程序流程圖
圖1-2 程序運行主畫面
在圖1-1中，【run to view documentation】設計圖標完成發布一個聲明并運行程序到主畫面的功能，其余設計圖標則完成運行程序實例的功能。
在圖1-2的主畫面中有如下3個按鈕：
l 【introduction】——程序簡介
l 【creating a color】——程序流程圖標設計說明
l 【run the example】——運行實例
單擊【run the example】按鈕，程序進入實例演示分支，其運行畫面如圖1-3所示。
畫面左側窗口下沿有3個標尺，標尺計量范圍均為0～255，每個標尺上有一個可移動的滑塊，用鼠標拖動每個滑塊左右移動，窗口右側對應的顏色值也隨之改變，同時標尺上的矩形區域顏色也實時改變。填充矩形的顏色是由3個滑塊所在位置值所對應紅、綠、藍顏色配制而成的。
圖1-3 實例運行畫面
打開【slider knobs】群組圖標，其下級流程如圖1-4所示。
圖1-4 slider knobs群組的下級流程
由流程圖可知，3個標尺和3個滑塊都分別單獨繪制在一個顯示圖標中，其中【red track】、【green track】和【blue track】為3根標尺圖形，【red knob】、【green knob】和【blue knob】為3個滑塊。每個滑塊都重疊在對應標尺的上面。
【run to view documentation】群組圖標中有一個【make the knobs movable】運算圖標，利用代碼movable @"red knob":=true設置了3個滑塊的可移動性。
同時打開一個標尺及其對應滑塊圖形（比如【red track】和【red knob】）。選中滑塊后，執行【modify/icon/property】菜單命令打開其屬性設置對話框，如圖1-5所示。
圖1-5 【red knob】滑塊屬性設置對話框
由圖1-5所示對話框的設置可知：滑塊移動類型為“on path”，移動路徑沿標尺水平直線移動，初值為0，終值為255。
同樣的方法可以看到另外兩個滑塊的移動屬性與如圖1-5所示對話框的設置完全一致。
及時點評 要在程序運行時用鼠標拖動對象移動，必須要先設置對象的移動屬性，包括其移動類型、移動路徑以及根據實際要求設置的移動數值。比如本例使滑塊可沿著標尺水平移動，移動值為0～255。移動值選擇0～255是為了對應r、g、b顏色的256種色素值。
鼠標拖動使一滑塊左、右移動，滑塊在標尺上的位置得以改變。
由于在如圖1-4所示的流程中，【display values】顯示圖標中嵌入了如圖1-6所示的變量，因此，滑塊在標尺上的位置值可在窗口右側實時顯示出來。
圖1-6 【display values】顯示圖標中嵌入的變量
及時點評 pathposition變量存儲了顯示對象在移動路徑中的位置值，因此，利用這一變量便可及時獲得對象在路徑上的具體位置并可將其嵌入圖標中，實時顯示出來。
填充矩形是由【draw box】交互響應圖標完成的。該交互圖標下的群組圖標的下級流程如圖1-7所示。
圖1-7 【draw box】群組的下級流程
【draw box】條件交互響應的屬性設置如圖1-8所示。
圖1-8 【draw box】條件交互響應屬性設置對話框
“condition”欄中輸入了如下的響應條件：
dragging @"red knob"｜dragging @"green knob"｜dragging @"blue knob"
這表示只要3個滑塊中的任何一個產生了移動，使條件狀態為“真”，便可進入該分支。也就是說，當用戶拖動滑塊改變了其位置，便立即產生條件交互響應進入本分支填充矩形。
及時點評 條件交互響應的條件設置保證了只有改變了滑塊的位置（這表示r、g、b顏色值發生了變化，產生了一個新的顏色），才可進入矩形填充的流程，否則矩形色彩保持不變。
由如圖1-7所示的流程圖可以看出，進入矩形填充分支后，首先執行【loop w/dragging】決策圖標。決策圖標的屬性設置如圖1-9所示。
圖1-9 【loop w/dragging】決策圖標屬性設置對話框
repeat欄下輸入了如下的執行決策圖標的條件表達式：
~dragging @"red knob"&~dragging @"green knob"&~dragging @"blue knob"
這表示3個滑塊中只要有一個在移動，程序即進入決策，執行決策下的運算圖標，填充矩形。如果3個均未移動，程序退出決策，返回上層。
及時點評 拖動任一個滑塊雖然使程序進入了條件交互響應分支，但邊拖動滑塊邊填充矩形的實時填充效果的產生是由決策圖標實現的。只要有滑塊拖動，程序可反復執行決策下的分支，往返循環，實現用當前顏色實時填充矩形。
【draw box】決策圖標下運算圖標中的代碼如圖1-10所示。
圖1-10 【draw box】運算圖標中的代碼
該代碼中應用了如下3個系統函數和一個變量。
rgb函數——其作用是將紅、綠和藍3種色彩值合成一種顏色，本例中的紅、綠和藍的值分別由pathposition @"red knob"、pathposition @"green knob"和pathposition @"blue knob"決定，即用3個滑塊在標尺上的位置確定r、g、b的值。
setfill 函數——該函數的功能是用rgb函數所確定的顏色來填充一個繪圖函數所繪制的區域。
box函數——這是一個繪制矩形方框的函數，本例繪制的矩形即為窗口左側上方的矩形區域。
及時點評 rgb函數的色彩調配值是由3個滑塊在標尺上的位置值所決定的。因此，移動滑塊可使rgb函數合成不同的顏色。
此外，決策圖標下的運算圖標代碼的執行，實現了通過滑塊調整顏色來填充矩形。
本例通過移動滑塊來調整顏色并實時填充一個矩形區域，其中主要應用了如下技術：
l 對象可移動設置技術
l 條件交互響應的條件設置技術
l 決策圖標運行條件設置技術
l rgb、setfill、box函數的應用技術
l 跟蹤對象移動位置的pathposition變量應用技術
l 通過調整滑塊來改變r、g、b顏色值的設計技術
新聞熱點
疑難解答
