毕业论文 论文提纲 论文写作 公文范例 教育论文 教育学论文 师范教育 学术论文     论文指导*
                     
 
   
   
   
   
           
 

当前位置:课件115学培吧(kj115.com)→flash网侠教程(助你成为顶尖课件高手)→系列文章

 
 
标题:Flash精美图标设计实例[多图]
 
展示台

文章来源 作者:admin 密码:admin 整理:湖北金鹰

◇网侠教程栏目简介
    提供FLASH侠客教程和网页制作侠客教程,高手进阶教程。
    浏览过这些资源的还浏览过经典教程图文教程游戏开发教程等相关资源。

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

湖北金鹰课件吧

论文相关服务
 

 

目前流行的图标设计软件组合是 Illustrator/ Corel Draw + Photoshop (本文不讨论象素图标),做出来的图标是静态的,如果要应用于Flash, 必须通过位图导入,且不说透明GIF的锯齿、PNG的大体积,光一个马赛克现象就使得可用性大打折扣了,更不用说做一个动态的图标。
[被屏蔽广告]
用Flash设计图标的优点是显而易见的: 支持动态图标,无失真放大,移植方便,可以和声音结合等等。缺点是不适合表现复杂的光影,一看就是卡通的。
如果你对过程感兴趣,那么请继续, 我们先从中间的小球开始

Flash精美图标设计实例[多图]图片1

1.新建一个mc,名字就去做icon_ball吧
2.画一个正圆形,设置轮廓和填充的样式,效果如下:

Flash精美图标设计实例[多图]图片2

Flash精美图标设计实例[多图]图片3

Flash精美图标设计实例[多图]图片4

3.用渐变调整工具调整一下:

Flash精美图标设计实例[多图]图片5

  4.新建一个图层,取名hilight,顺便把原来的帧改名ball

Flash精美图标设计实例[多图]图片6

  5. 再画一个圆,移动到如图位置

Flash精美图标设计实例[多图]图片7

6.在Color Mixer面板中修改一下 结果如图:

Flash精美图标设计实例[多图]图片8Flash精美图标设计实例[多图]图片9

图中黑色表示透明,取消选择看看

Flash精美图标设计实例[多图]图片10

7.调整一下渐变方向

Flash精美图标设计实例[多图]图片11

  8.创建一个阴影层

Flash精美图标设计实例[多图]图片12

9.画一个黑色的圆,选中后,使用柔化边缘功能,设置参数

Flash精美图标设计实例[多图]图片13

10.选中阴影,按F8, 转成元件,取名ball_shadow

Flash精美图标设计实例[多图]图片14

Flash精美图标设计实例[多图]图片15

11. 调节ball_shadow的透明度和大小
12. 新建一层,画上标志

Flash精美图标设计实例[多图]图片16

  通过上面的方法,相信你一定掌握了画立体形体的基本方法,那就是:
依次画基本形状、渐变、高光、阴影。
下面的时钟也是这样的方法,所以我不再详细介绍,这里仅截取几个关键步骤,你可以自己发挥,因为这个不是唯一的方法,相信你会创造出适合自己的方法。
效果预览:

Flash精美图标设计实例[多图]图片17

1.面板的制作

Flash精美图标设计实例[多图]图片18Flash精美图标设计实例[多图]图片19Flash精美图标设计实例[多图]图片20

2.刻度的制作
我喜欢小而细的刻度,为了方便起见,放大2倍看
画好所有刻度并转成元件(F8)

Flash精美图标设计实例[多图]图片21

复制一次这个元件,按Ctrl+Shift+P粘贴,按Ctrl+↓移到下面,然后降低亮度

Flash精美图标设计实例[多图]图片22

  效果:

Flash精美图标设计实例[多图]图片23

  3.指针的制作
新建一个mc,画一个指针,主意注册点(十字)的位置
因为指针颜色用了白色,所以我们暂时把文档背景设成黑色

Flash精美图标设计实例[多图]图片24

  复制3个指针,使他们的注册点都和面板的中心重合
选中这三个指针,按F8,转成元件
效果如图

Flash精美图标设计实例[多图]图片25

  复制这个mc, 同刻度一样,降低亮度处理,
4.稍微修饰一下,加上底座和文字,并将文字打散最后加上代码,看看你的时间对不对:)

Flash精美图标设计实例[多图]图片17

(注:详细代码请查看源文件)

鼠标移到第一个图标的地方,可以看到放大镜会运动,同时阴影也随着运动,而且只在一定的区域中显示,正是Flash让图标充满动感
这是完成后的时间线:

Flash精美图标设计实例[多图]图片27

  说明:如果你对Flash一窍不通,建议你先找本入门的书看看,限于篇幅,本文可能无法满足你的需要
元件分解图:
1.文件夹

Flash精美图标设计实例[多图]图片28

 纯粹的渐变+轮廓,注意轮廓的颜色淡一些
2.阴影

Flash精美图标设计实例[多图]图片29

  先画出一个圆和一条线,然后转化成填充,最后柔化边缘并转成元件
3.遮罩

Flash精美图标设计实例[多图]图片30

  实际上只是半透明部分,见源文件
放大镜主体部分,白色的粗线条已经转化成填充,中间再用墨水瓶工具填上淡淡的轮廓

Flash精美图标设计实例[多图]图片31

  放大镜手柄,塑料部分用渐变,金属部分直接用线条画出形状,然后上色并删除线条

Flash精美图标设计实例[多图]图片32

注意:放大镜主体和手柄一起转到元件中,这样可以一起运动
下面我们要做的,只是创建最基本的动画了,限于篇幅,本文不再详细介绍,如果感兴趣,可以到经典论坛Flash专栏提问,欢迎光临:)

 

 
课件115学培吧(湖北金鹰)欢迎您!永久免费服务网址:http://www.kj115.com
   
 

学员众多的FLASH课件学习基地,成万免费FLASH课件制作教程在线学习,还有免费内容课件教程、视频教程、课件技巧、课件探讨、课件欣赏、课件展示、实用教程、课件界面、课件脚本、课件游戏、课件下载、课件封面、课文内容图片、课文人物图片库、课件素材、图片素材、声音素材、动物素材、背景图片、背景资料、背景边框、课件顶栏图片素材、Dreamweaver教程、Dreamweaver网页课件教程、软件下载。承接学习和培训,承接课件订制,课件修改等所有课件相关服务。
本站主要业务:┃flash课件制作视频教程培训┃承接全国竞赛flash课件┃论文代写代发┃代办课件国家级获奖证书┃
联系:QQ:444860709 手机:13339817386


 
 

业务办理
鄂ICP备08005724号