滑桿    

 

 

【Flash Catalyst CS5 好簡單工具─Scroll Panel網頁造型滑桿設計】

(1)滑桿Scrollbar製作

利用繪圖軟體,自製造型滑桿。完整範例如下:








完整的滑軌組件,是由兩個元件所組成的 : 

Scroll panel =  Scrolling Content 內容 +  Scrollbar  滑軌

 

----------------------------------------------------------------------------------------------------------------------------------

Step1.【準備物件】─ Adobe Illustrator


(1-1) Scrolling Content 內容:

在AI中,繪製如以下物件,並將齊群組,另外圖層命名為"Scrolling content"

01準備-1.jpg


 

(1-2) Scrollbar 滑軌: 

新增一個圖層,並命名為"Scrollbar",繪製如下的物件,並個別群組:

(A)左按鈕  (B)右按鈕 (C)滑鈕 (D) 滑桿

01準備-2.jpg


 

(1-3) 其他物件:  

我還加了一層底板外框,純粹裝飾使用。  

另外必須將AI裡面的工作區,先進行調整到所需要的大小。AI的工作區,將會與FC的工作區同步大小。 

完成後的圖層和物件如下,儲存AI檔案備用:

01準備-3.jpg  

01準備-5.jpg  


  


------------------------------------------------------------------------------------------------------------------

Step2.【匯入FC】


(2-1) 開啟FC軟體,在Welcome歡迎畫面,點選"From Adobe Illustrator AI File..." 匯入AI剛剛做好的AI檔案。

      (匯入的方法,也可以從 " File > New Project from Design File... " )

02載入-1.jpg 


02載入-2.jpg             02載入-3.jpg 



 

(2-2) 匯入的同時,會出現 " Illustrator Import Options 匯入選項 " ,

在此範本AI原檔中,沒有繪製任何特殊效果或文字,因此直接點選 "OK" 。

(請依照個人需求,調整匯入的選項,是否保持原始的編輯性)

02載入-5.jpg 




(2-3) 匯入完成,會得到如下的畫面,在右上角Layers圖層面板,會得到和AI檔案一樣的圖層。

02載入-6.jpg  



------------------------------------------------------------------------------------------------------------------

Step3.【製做 Scrollbar 滑軌

我們先將滑軌的部分完成:

(3-1) 點選 Layers >> Scrollbar 圖層,即可全選到畫面中的滑桿物件 (FC選取的特性)。

 03滑桿-3.jpg 

03滑桿-1.jpg

 

 

(3-2) 在 HUD面板 中選取:

      " Convert Artwork to Component >> Choose component >> Horizontal Scrollbor (水平滑軌) "

03滑桿-2.jpg

 

 

(3-3) 建立成 Horizontal Scrollbor 後,圖層會自動合併如下圖

           請點選 HUD面板中  "Edit Parts"  編輯滑軌內容 ( 快速鍵 Ctrl + E )

03滑桿-4.jpg   

 

 

(3-4) 

(A) 03滑桿-7.jpg  左上角的狀態列,即會顯示,

      目前已經進入 Horizontal Scrollbor 的內容編輯狀態


(B)  依序透過圖層面板,選取各個部位的物件,並將其個別在HUD面板中,勾選指定功能:

        左按鈕=Left button、 右按鈕=Right Button 、 滑鈕=Thumb 、 滑桿=Track

     即可完成滑桿設定,這個時候就可以用快速鍵 Ctrl + Enter測試輸出的結果。

03滑桿-6.jpg    03滑桿-5.jpg

 03滑桿-5-01.jpg   

 

 

------------------------------------------------------------------------------------------------------------------

※ 【補充說明】

      在元件庫中,, SliderScrollbar 的差異在於, Scrollbar多了兩顆左右(上下)按鈕,

      所以可以此用相同方式製作Horizontal Slider(水平滑桿) & Vertical Slider(垂直滑桿)。


      另外,在FC當中,置入設計好的外部檔案,圖層的觀念是非常重要的喔!! 

      因此在設計的時候,不管是任何軟體,一定要做好圖層管理!! 





創作者介紹
創作者 一二珊躲支喵 的頭像
一二珊躲支喵

一二珊躲支喵

一二珊躲支喵 發表在 痞客邦 留言(0) 人氣()