Flash绘制精致矢量图——斑驳的秋天落叶

来源: 时间:07-01-17 点击: 点击这里收藏本文

点击查看更多Flash精彩实例
　　本教程中我们用Flash 8的绘图功能描绘一幅精致的矢量图像——秋天的斑驳落叶，步骤简单易操作，而且效果非常棒。

　　首先让我们先看一下制作完成之后的效果。如图1所示：
　　

图1
　　 第一步：创建虚拟灯光以及树叶轮廓
　　 1）我们要通过建立一个虚拟灯光，让灯光照在树叶上，使树叶有高光区和阴影区，这样可以达到更加逼真的效果。首先将背景颜色设定为#666666，然后建立一个图层，名为‘light source’，在第10帧按F5创建关键帧，在绘图区的左上角用绘图工具绘制出一个虚拟的灯光（如图2所示），这个灯光将决定我们在树叶的什么部分绘制的阴影区以及高光区。
　　 2）然后在light source 下面建立一个图层，名称为‘outline’，然后用线条、铅笔工具以及选择工具和部分选择工具（线条颜色为#00FF00）画出树叶的轮廓如图2所示
　　

图2
　　 第二步：创建树叶的叶脉
　　在outline上建立一个新图层，名称为leaf，右单击outline 上的第一帧，选择‘复制帧’，在第2帧上按F6，右单击第2帧，选择‘粘贴帧’，用线条工具绘制叶脉，也可以用钢笔工具，这样修改起来更加细致逼真，最后再用部分选择工具最后修改一下就OK了，效果如图3：
　　天极设计在线_Flash绘制精致矢量落叶

图3
　　
　　 第三步：给叶脉填色
　　在leaf上建立一个新图层，名称为vein，在第3帧按F6，在leaf层上选择所有叶脉，crtl+c，选择vein上的第3帧，crtl+V，然后用两个线性填充色来填充叶脉的主干，和叶脉的分支。两个线性填充的值分别如下图所示：

　　

　　主干填充色分支填充色
　　第一个色块值为#8A1B00 第一个色块值为#B4200C，Alpha:50%
　　第二个色块值为#490000 第二个色块值为#490000,Alpha:75%
　　
　　填充完成效果如图4所示：
　　
　　天极设计在线_Flash绘制精致矢量落叶

图4
　　 第四步：给叶脉绘制不同的填色区域，对树叶的颜色进行分区及填色
　　在leaf 层上的第3、4帧上按F6，然后将第3帧上的内容清空，在第4帧上用铅笔工具绘制树叶的不同亮度以及不同颜色的填充区域。在第5帧上按F6，用填充工具，根据我们前面建立的虚拟灯光照射的角度，浅颜色代表高光区，深颜色代表阴影区，选择不同颜色进行填充。绘制及填充颜色完成如图5所示
　　
　　天极设计在线_Flash绘制精致矢量落叶

图5
　　颜色由浅入深共4种，最浅为：#F4C84C #EC8926 #C32A0B #820C06 ，你会发现在一大块区域没有填色，那个是用放射状填充的，具体值如下：
　　
　　天极设计在线_Flash绘制精致矢量落叶

　　第一色块值为#C32A0B，第二色块值为#E36C24，设置好后，对未填充的地方进行填充。
　　我们一定要注意细节，我们的叶柄还没有上色呢。叶柄也是用放射状填色的。其值如下所示：
　　天极设计在线_Flash绘制精致矢量落叶

　　色块颜色依次为：#A22F12 #D1885B #E0AC8D #D17F50 #D14C13，设置完成后，可以进行填充。
　　注：在第四步中为操作方便将vein 先隐藏起来，操作完成后可再显示出来。
　　
　　 第五步：去除颜色区域边框线
　　选择leaf层，在第6帧上选择所有的边框线，按DELE键删除。效果如图6所示：
　　天极设计在线_Flash绘制精致矢量落叶

图6
　　制作到这里，也许你认为已经很像了，其实不然，我们之前第一步就建立一个虚拟灯光,目的是为了让树叶更加真实，下面我们将进行一系列的细节处理。
　 第六步：建立树叶的第一个纹理
　　在leaf上建立一个新图层，名为texture1，在其第7帧上按F6，用建立一个放射状填充的渐变，值如下图所示：
　　天极设计在线_Flash绘制精致矢量落叶

　　两个色块的颜色都是一致的为：#820C06 两个色块的Alpha 分别为：75%和0%；

9 7 3 1 2 4 8 :

把此文章收藏到：　　　　　

相关教程

广而告之

文章搜索

Google JZxue.Com

最新文章

网站推广—网站建设的关键课

吸引访客,做内容有价值的网

关于Photoshop直方图的详细

网站策划,B2B网站策划者应

Web标准网站开发人员配备

便宜/廉价的网站推广方式

写给做BBS的新站长

行为经济学在网站运营中的

漫谈网站改版的必要性

网站策划需要具备的知识

外贸网站建设全攻略

CSS让网页更容易设计与维护

和马云学习如何做网站推广

推荐导读

优秀个人网站打造全过程

热门排行

如何制作网页（网页制作实

如何选择网页制作工具

下载安装Dreamweaver8

制作主页前的准备

垃圾站全教程--之一(新手上

怎样个人网页制作,制作个人

制作模板

在Dreamweaver设置站点

制作首页

网站设计65条原则

规划站点

中国所有银行的BIC code(即

个人主页制作完全手册