【Flash Catalyst CS5 好簡單工具─Scroll Panel網頁造型滑桿設計】
(1)滑桿Scrollbar製作
利用繪圖軟體,自製造型滑桿。完整範例如下:
完整的滑軌組件,是由兩個元件所組成的 :
Scroll panel = Scrolling Content 內容 + Scrollbar 滑軌
----------------------------------------------------------------------------------------------------------------------------------
Step1.【準備物件】─ Adobe Illustrator
(1-1) Scrolling Content 內容:
在AI中,繪製如以下物件,並將齊群組,另外圖層命名為"Scrolling content"
(1-2) Scrollbar 滑軌:
新增一個圖層,並命名為"Scrollbar",繪製如下的物件,並個別群組:
(A)左按鈕 (B)右按鈕 (C)滑鈕 (D) 滑桿
(1-3) 其他物件:
我還加了一層底板外框,純粹裝飾使用。
另外必須將AI裡面的工作區,先進行調整到所需要的大小。AI的工作區,將會與FC的工作區同步大小。
完成後的圖層和物件如下,儲存AI檔案備用:
------------------------------------------------------------------------------------------------------------------
Step2.【匯入FC】
(2-1) 開啟FC軟體,在Welcome歡迎畫面,點選"From Adobe Illustrator AI File..." 匯入AI剛剛做好的AI檔案。
(匯入的方法,也可以從 " File > New Project from Design File... " )
(2-2) 匯入的同時,會出現 " Illustrator Import Options 匯入選項 " ,
在此範本AI原檔中,沒有繪製任何特殊效果或文字,因此直接點選 "OK" 。
(請依照個人需求,調整匯入的選項,是否保持原始的編輯性)
(2-3) 匯入完成,會得到如下的畫面,在右上角Layers圖層面板,會得到和AI檔案一樣的圖層。
------------------------------------------------------------------------------------------------------------------
Step3.【製做 Scrollbar 滑軌】
我們先將滑軌的部分完成:
(3-1) 點選 Layers >> Scrollbar 圖層,即可全選到畫面中的滑桿物件 (FC選取的特性)。
(3-2) 在 HUD面板 中選取:
" Convert Artwork to Component >> Choose component >> Horizontal Scrollbor (水平滑軌) "
(3-3) 建立成 Horizontal Scrollbor 後,圖層會自動合併如下圖
請點選 HUD面板中 "Edit Parts" 編輯滑軌內容 ( 快速鍵 Ctrl + E )
(3-4)
(A) 左上角的狀態列,即會顯示,
目前已經進入 Horizontal Scrollbor 的內容編輯狀態。
(B) 依序透過圖層面板,選取各個部位的物件,並將其個別在HUD面板中,勾選指定功能:
左按鈕=Left button、 右按鈕=Right Button 、 滑鈕=Thumb 、 滑桿=Track
即可完成滑桿設定,這個時候就可以用快速鍵 Ctrl + Enter ,測試輸出的結果。
------------------------------------------------------------------------------------------------------------------
※ 【補充說明】
在元件庫中,, Slider 和 Scrollbar 的差異在於, Scrollbar多了兩顆左右(上下)按鈕,
所以可以此用相同方式製作Horizontal Slider(水平滑桿) & Vertical Slider(垂直滑桿)。
另外,在FC當中,置入設計好的外部檔案,圖層的觀念是非常重要的喔!!
因此在設計的時候,不管是任何軟體,一定要做好圖層管理!!
留言列表