Flash 图标设计实例

目前流行的图标设计软件组合是 Illustrator/ Corel Draw + Photoshop (本文不讨论象素图标),做出来的图标是静态的,如果要应用于Flash, 必须通过位图导入,且不说透明GIF的锯齿、PNG的大体积,光一个马赛克现象就使得可用性大打折扣了,更不用说做一个动态的图标。
    用Flash设计图标的优点是显而易见的: 支持动态图标,无失真放大,移植方便,可以和声音结合等等。缺点是不适合表现复杂的光影,一看就是卡通的。
   先看看我的实验作品:
点击
[url=http://www.blueidea.com/articleimg/2003/10/897/iconMX.fla]这里下载源文件[/url]
,点击
[url=http://www.blueidea.com/bbs/NewsDetail.asp?GroupName=Flash+%D7%A8%C0%B8&DaysPrune=5&lp=1&id=1202983]这里参与讨论[/url]
如果你对过程感兴趣,那么请继续,  我们先从中间的小球开始
[img]http://www.blueidea.com/articleimg/2003/10/897/snap048.gif[/img]
1.
[url=http://www.blueidea.com/articleimg/2003/10/897/snap002.gif]新建一个mc[/url]
,名字就去做icon_ball吧
2.画一个正圆形,设置
[url=http://www.blueidea.com/articleimg/2003/10/897/snap003.gif]轮廓[/url]

[url=http://www.blueidea.com/articleimg/2003/10/897/snap004.gif]填充[/url]
的样式,效果如下:
[img]/uploads/allimg/080331/1129571.gif[/img]
3.用渐变调整工具调整一下:
[img]/uploads/allimg/080331/1129572.gif[/img]
4.
[url=http://www.blueidea.com/articleimg/2003/10/897/snap008.gif]新建一个图层[/url]
,取名hilight,顺便把原来的帧改名ball
5. 再画一个圆,移动到如图位置
[img]/uploads/allimg/080331/1129573.gif[/img]
6.在
[url=http://www.blueidea.com/articleimg/2003/10/897/snap012.gif]Color Mixer面板[/url]
中修改一下 结果如图:
[img]/uploads/allimg/080331/1129574.gif[/img]
图中黑色表示透明,取消选择看看
[img]/uploads/allimg/080331/1129575.gif[/img]
7.调整一下渐变方向
[img]/uploads/allimg/080331/1129576.gif[/img]
8.
[url=http://www.blueidea.com/articleimg/2003/10/897/snap017.gif]创建[/url]
一个阴影层
9.画一个黑色的圆,选中后,使用
[url=http://www.blueidea.com/articleimg/2003/10/897/snap021.gif]柔化边缘[/url]
功能,
[url=http://www.blueidea.com/articleimg/2003/10/897/snap023.gif]设置参数[/url]

10.选中阴影,按F8,
[url=http://www.blueidea.com/articleimg/2003/10/897/snap024.gif]转成元件[/url]
,取名ball_shadow
11. 调节ball_shadow的透明度和大小
12. 新建一层,画上标志  
[img]/uploads/allimg/080331/1129577.gif[/img]
[img]/uploads/allimg/080331/1129578.gif[/img]
鼠标移到第一个图标的地方,可以看到放大镜会运动,同时阴影也随着运动,而且只在一定的区域中显示,正是Flash让图标充满动感
这是完成后的时间线:
[img]/uploads/allimg/080331/1129579.gif[/img]
 说明:如果你对Flash一窍不通,建议你先找本入门的书看看,限于篇幅,本文可能无法满足你的需要
  元件分解图:
 1.文件夹
[img]/uploads/allimg/080331/11295710.gif[/img]
纯粹的渐变+轮廓,注意轮廓的颜色淡一些
2.阴影
[img]/uploads/allimg/080331/11295711.gif[/img]
先画出一个圆和一条线,然后转化成填充,最后柔化边缘并转成元件
3.遮罩
[img]/uploads/allimg/080331/11295712.gif[/img]
本文转自:http://www.5uflash.com/flashjiaocheng/Flashdonghuajiaocheng/1587.html
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章