自訂 NumericStepper 組件

您可以在編寫期間和執行階段,沿水平和垂直方向變形 NumericStepper 組件。在編寫期間,請在「舞台」上選取組件,並且使用「自由變形」工具或任何「修改 > 變形」命令。在執行階段,請使用 setSize() 方法或 NumericStepper 類別適用的任何屬性與方法 (如 width height scaleX scaleY )。

調整 NumericStepper 組件的大小不會變更向下及向上按鈕的寬度。如果將步進器調整為高於預設高度,預設行為便會將箭頭按鈕固定在組件的頂端和底端。否則,9 分割縮放會決定繪製這些按鈕的方式。方向鍵一定會出現在文字方塊的右邊。

樣式和 NumericStepper 組件

您可以設定 NumericStepper 組件的樣式屬性來變更其外觀。繪製該組件時,這些樣式會指定該組件之外觀元素、邊框間距和文字格式的值。 textFormat 樣式可以讓您變更 NumericStepper 之值的大小和外觀。這些各式各樣的外觀元素樣式可以讓您指定要用於外觀元素的不同類別。如需有關使用外觀元素樣式的詳細資訊,請參閱 關於外觀元素

此程序會使用 textFormat 樣式,變更 NumericStepper 所顯示之值的外觀。

  1. 建立新的 Flash 文件 (ActionScript 3.0)。

  2. 將 NumericStepper 組件從「組件」面板拖曳到「舞台」,並且為它指定實體名稱為 myNs

  3. 在主要「時間軸」之「影格 1」的「動作」面板中,加入下列程式碼:

    var tf:TextFormat = new TextFormat(); 
    myNs.setSize(100, 50); 
    tf.color = 0x0000CC; 
    tf.size = 24; 
    tf.font = "Arial"; 
    tf.align = "center"; 
    myNs.setStyle("textFormat", tf);
  4. 選取「控制 > 測試影片」。

外觀元素和 NumericStepper 組件

NumericStepper 組件具有代表其按鈕之一般、按下、停用與選取狀態的外觀元素。

如果啟用了步進器,當指標移到向下及向上箭頭按鈕上時,這些按鈕就會顯示它們的滑入狀態。按下這些按鈕時,則會顯示它們的按下狀態。當滑鼠放開之後,這些按鈕又會回復它們的滑入狀態。如果在按下滑鼠時將指標移開按鈕,按鈕會回復它們的原始狀態。

Stepper 停用之後,不論使用者的動作為何,都只顯示它的停用狀態。

NumericStepper 組件具有下列外觀元素:

檢視完整大小的圖形
NumericStepper 外觀元素
  1. 建立新 FLA 檔。

  2. 將 NumericStepper 組件拖曳到「舞台」。

  3. 將縮放控制項設定為 400%,將影像放大以進行編輯。

  4. 在外觀元素面板上按兩下 TextInput 外觀元素的背景,直到您進入「群組」層級,而且背景顏色出現在「屬性」檢測器的「填色」顏色挑選器中為止。

  5. 使用「屬性」檢測器中的「填色」顏色挑選器,選取 #9999FF 以將此顏色套用到 TextInput 外觀元素的背景。

  6. 按一下「舞台」上方編輯列左側的「後退」按鈕,回到文件編輯模式。

  7. 再次按兩下 NumericStepper,重新開啟外觀元素面板。

  8. 按兩下「一般」群組中向上箭頭按鈕的背景,直到選取該背景,且其顏色出現在「屬性」檢測器的「填色」顏色挑選器中為止。

  9. 選取 #9966FF 並將此顏色套用到向上箭頭按鈕的背景。

  10. 針對「一般」群組中的向下箭頭重複步驟 8 和 9。

  11. 選取「控制 > 測試影片」。

    NumericStepper 實體看起來應該如下圖:

    具有自訂背景和按鈕的 NumericStepper