作者:qhwa
來源:pconline
目前流行的圖標設計軟件組合是 Illustrator/ Corel Draw + Photoshop (本文不討論象素圖標),做出來的圖標是靜態(tài)的,如果要應用于Flash, 必須通過位圖導入,且不說透明GIF的鋸齒、PNG的大體積,光一個馬賽克現象使得可用性大打折扣了,更不用說做一個動態(tài)的圖標。
用Flash設計圖標的優(yōu)點是顯而易見的: 支持動態(tài)圖標,無失真放大,移植方便,可以和聲音結合等等。缺點是不適合表現復雜的光影,一看是卡通的。
先看看我的實驗作品:
如果你對過程感興趣,那么請繼續(xù), 我們先從中間的小球開始
1.新建一個mc,名字去做icon_ball吧
2.畫一個正圓形,設置輪廓和填充的樣式,效果如下:
3.用漸變調整工具調整一下:
4.新建一個圖層,取名hilight,順便把原來的幀改名ball
5. 再畫一個圓,移動到如圖位置
6.在Color Mixer面板中修改一下 結果如圖:
圖中黑色表示透明,取消選擇看看
7.調整一下漸變方向
8.創(chuàng)建一個陰影層
9.畫一個黑色的圓,選中后,使用柔化邊緣功能,設置參數
10.選中陰影,按F8, 轉成元件,取名ball_shadow
11. 調節(jié)ball_shadow的透明度和大小 12. 新建一層,畫上標志
通過上面的方法,相信你一定掌握了畫立體形體的基本方法,那是: 依次畫基本形狀、漸變、高光、陰影! ∠旅娴臅r鐘也是這樣的方法,所以我不再詳細介紹,這里僅截取幾個關鍵步驟,你可以自己發(fā)揮,因為這個不是的方法,相信你會創(chuàng)造出適合自己的方法! ⌒ЧA覽:
1.面板的制作
2.刻度的制作 我喜歡小而細的刻度,為了方便起見,放大2倍看 畫好所有刻度并轉成元件(F8)
復制一次這個元件,按Ctrl+Shift+P粘貼,按Ctrl+↓移到下面,然后降低亮度
效果:
3.指針的制作 新建一個mc,畫一個指針,主意注冊點(十字)的位置 因為指針顏色用了白色,所以我們暫時把文檔背景設成黑色
復制3個指針,使他們的注冊點都和面板的中心重合
選中這三個指針,按F8,轉成元件 效果如圖
復制這個mc, 同刻度一樣,降低亮度處理, 4.稍微修飾一下,加上底座和文字,并將文字打散加上代碼,看看你的時間對不對:)
。ㄗⅲ涸敿毚a請查看源文件)
鼠標移到個圖標的地方,可以看到放大鏡會運動,同時陰影也隨著運動,而且只在一定的區(qū)域中顯示,正是Flash讓圖標充滿動感 這是完成后的時間線:
說明:如果你對Flash一竅不通,建議你先找本入門的書看看,限于篇幅,本文可能無法滿足你的需要 元件分解圖: 1.文件夾
純粹的漸變+輪廓,注意輪廓的顏色淡一些 2.陰影
先畫出一個圓和一條線,然后轉化成填充,柔化邊緣并轉成元件 3.遮罩
實際上只是半透明部分,見源文件
放大鏡主體部分,白色的粗線條已經轉化成填充,中間再用墨水瓶工具填上淡淡的輪廓
放大鏡手柄,塑料部分用漸變,金屬部分直接用線條畫出形狀,然后上色并刪除線條
注意:放大鏡主體和手柄一起轉到元件中,這樣可以一起運動 下面我們要做的,只是創(chuàng)建最基本的動畫了,限于篇幅,本文不再詳細介紹,如果感興趣,可以到經典論壇Flash專欄提問,歡迎光臨:)
具體的ActionScript代碼請看源文件 URL http://www.pconline.com.cn/pcedu/sj/wz/flash/0312/acc/031216flashicon.rar(編輯:大寶庫)