用Flash画钢笔

两年半以前,经电视节目介绍,我开始学习Flash制作.不久便深深地喜欢上了Flash,以致我很多东西都非得用Flash来做.
在做Flash动画或者程序的时候,里头的图形我非得用Flash来画,但是感觉不太好.后来知道了有好几个软件像PS,CD,AI等都有很强的画图功能,便打算退一步,尝试下用那些软件.可惜当时已经对Flash情有独钟了,所以哪怕是用别的软件来画,我也希望最后能把我画的图像转成可以在Flash里使用的矢量图.
这样,PS就给我第一个排除了,因为它基本上只能创作出位图,不符合我的要求.
AI是有名的矢量图绘制软件.当初尝试用AI画图,什么投影,浮雕,发光效果,靠!点两下鼠标就轻松弄出来了,而且图形很有质感.当初我不大相信那是矢量图,便放大到10多倍,居然也不失真!太Cool了.再加上AI对渐变的处理功能比Flash强多了(因为两渐变色点之间还有个控制渐变速度的控制点),所以画图形感觉非凡轻松.
然而,当我非常兴奋地保存我的AI文件,然后导入到Flash中的时候,却发现,什么效果都没有了,只剩下路径.晕!然后尝试下导出swf吧,究竟Flash对swf的支持最好.果然成功导入到Flash中了!而且效果很好.但忽然发现库里头忽然多了很多位图,我才知道,原来AI已经把那些效果转成位图了.在Flash里转成矢量图吧.结果不堪入目.
AI也就不想用了,就尝试用CD,CD的绘图功能也可以跟AI媲美.当初以为也不行了,不过既然用了,就尝试一下.用阴影工具,渐变工具等尝试画出AI的效果,导出swf.再导入到Flash中,居然行了!而且还要没有位图!看看效果,也不错.
当我使用CD两天时间,我尝试在Flash里看看那些图形的结构如何,才发现,它的渐变是通过多块渐变实现的,投影也是很多块矢量外形组成的.透明度从内往外减少.哦~原来CD里的图在Flash里也可以画出来,只是难度大了点而已.
于是,非凡喜欢Flash的我,就决定以后还是用Flash来画图.但是一直都画得不好.
我便决定先拿些好的位图导入到Flash中,转成矢量图.但是,结果不是效果很糟糕就是图形非常复杂,跟位图没有多大区别.怎么样都不能从位图中找到画出好的矢量图的办法.
正式开始专心去画图是在一年前的事.那时起,我开始尝试观察位图中物体的特点,尤其是颜色的搭配,但是不知道为什么,我总是调不好,哪怕先在PS里抽取了下颜色,再应用过去,还是不尽人意.
所以,要在Flash里表现物体的质感是一直以来最让我头痛的事情,因为图形中,颜色,非凡是颜色渐变的处理是体现图像质感的要害.后来上网条件好了,我发现矢量图原来也有得下载,于是下了些觉得有质感的图形来看,看它是怎么处理颜色的.
然而结果还是让我失望.比如我想画些有金属质感的物体,我就找了些金属物体的图形来看.发现,他们表现粗糙金属表面的质感是通过白色到浅灰色的渐变来实现的,这个我之前也能做到了,而且给我的感觉更像塑料.至于光滑金属表面,则是靠白色到黑色的渐变以突出光感.但是当我对着实物来画的时候,我发现有很多条件下,比如环境比较光亮的情况下,最暗的地方也不会很接近纯黑色,我把黑色调亮一点,效果就差了,没有金属的质感.
我便尝试拿跟钢笔来观察,也尽自己的最大努力把它画好.现在画出来了,虽然不太真实,但总算是我在画图上的一个飞跃,觉得很值得拿出来跟大家,非凡是新手们分享.

今天给大家写个教程,主要讲述质感的表现问题,同时也想借此问下大家,我这么些做法是不是很傻.
步骤(在FlashMX里制作):
1 新建一个Flash文档.
2 "插入"-"新建元件",名为pen.
3 将看到有一空白的图层,把该图层命名为"笔身表面".
4 用线条工具,箭头工具或者部分选取工具把笔身的外形勾出来,颜色可以不用管,因为最后线条是要删掉的.

5 接着就是最让我头痛的颜色填充问题了.
5.1 要体现质感,用渐变是比较好的,而且比较轻易确定的要把笔身画成接近圆柱形的外形(笔尾部分除外),所以渐变是从上到下的线性渐变.接着渐变从上到下应该是深->浅->很深,首先从深到浅是因为光线射到圆柱的表面的时候,总有些地方是直射,而有些地方是斜射,所以对光的反射程度不同,而下面要很深是因为下面在自然情况下,是光通常比较难射到的地方.

(注明:以下颜色填充均是整个渐变区域跟外形区域重合,有非凡说明的除外)

5.2 但是我发现仅靠这个理论是不能很好地去指导我配色的.尝试了上面的渐变方法,发现根本就不能满足我的要求.
首先我要求很深的地方也不能太深,所以就先尝试了下面的这种颜色搭配(其中数字代表RGB值,Alpha均为100%)
这样画出了圆柱体的那种感觉,但是觉得表面不够光滑,光的反射还不强(可能笔尾那部分很不舒适,因为笔尾是椭球体,应该用放射填充,所以要另外处理).

为此,我把颜色的对比度稍微调大一点

虽然光感还是不强,但是我看到的实物,在白天,深色部分显得并不深,所以我不能把颜色调得更深.
真是让我头痛啊!我再仔细地对着实物的钢笔观察一下,发现中间部分亮度应该再调大一些.

这次算是好了很多,但是整体感觉还是不够明亮.

5.3 再观察了实物一遍,发现高光部分其实区域并不宽.是个很窄的线条,但是又不缺乏渐变.所以我尝试把中间的区域调窄.

光感强了很多,但实在很不像样,非凡是找不到圆柱体的感觉.
把高光区域调宽,外形像圆柱体,但不光亮,想在光感和外形之间找到一个合适的平衡点实在很难,而且在这个平衡点四周,配出来的图形很难看.
再仔细地观察一遍.发现虽然高光区域跟非高光区域的颜色亮度差别比较大.但是高光区域四周有些地方还是比较明亮的,而且似乎是高光区刺激眼睛的结果.所以,为了不影响圆柱体的外形,我尝试在较小的区域里调整高光.

我总觉得这么做很轻易产生一种感觉,就是像一张纸条贴在上面一样,所以有点生硬.无论怎么调,在很窄的区域里,感觉就不像是发光,而是平面上贴个纸条.假如调整区域变宽,就会因为变化不够忽然而缺乏强烈的光感.

5.4 郁闷死了!怎么调才行啊?!
了下懒腰,扭了下脖子,但是眼睛始终注视着那根钢笔,因为在我心里头,成功的决心一直没有动摇.
转身眨眼之间,脑海里多了两个钢笔的画面,一个是完全对着自然光时的形象,一个是光完全给我身子遮挡时的形象.一下子又不知道是什么感觉,但是有种直觉,就是两者之间只是差了那么一点东西,但足以影响钢笔在眼球中的质感形象.
于是我尝试让钢笔重新对着光,然后又完全把光挡住.嗯,的确就差一些东西.对了!就是一条光线,这条光线不是钢笔与生俱来的,而是天公赐予它的一缕阳光.阳光的力量赋予了钢笔以无穷的光辉.没有了它,钢笔将暗淡无光.
灵感来了!我只要先把圆柱体的感觉画出来,就可以很轻易地画出钢笔无光照射时的那种感觉,然后,我再在表面另外添加一个发光条,就可以了,而且一点也不影响对笔外形有决定作用的渐变填充.简单来说,外形和光感两部分独立来处理,就可以解决两者间处理时的矛盾.
此时,找回最初配色最像圆柱的方案.

然后在此基础上加个高光区域.

高光的感觉在网上相信大家都见得比较多了.就是简单的从白色全不透明到白色全透明的渐变,而且可调整性大,非常好用.
继续在pen元件里添加一个图层,名为"笔身光",用矩形工具在适当的位置画上一矩形,使用从白色全透明->白色全不透明->白色全透明的线性渐变填充.不过注重这里最好用填充变形工具(见图)对渐变进行一下压缩处理.现在终于画出我需要的那种感觉出来了!

5.5 可能大家还会觉得,表面还不是很光滑,但我看着的实物,这个笔杆的表面本来就不是非凡地光滑,但是要调整起来并不难,在画笔尖的时候我就是用这种办法画出那种光滑金属表面的效果来的(其实我自己是没有把握说画得好,不过我画的过程中,是在一直往接近真实的方向前进着).笔尖的画法将在下面介绍.

6 在讲笔尖画法之前,我觉得还是先把笔身收拾好,因为笔尾部分还需要处理.

7 笔尾处理更是让我觉得艰难.
7.1 虽然知道是用放射状渐变,但是,假如就用一块渐变的话,就会出现明显的分界.
为什么?
看看下面的线性渐变

假如要在一端封闭好,而且端点的外形要是球体,那应该怎么做呢?
很简单,就加个放射填充的半圆形就可以了.



那为什么我还会头痛呢?
主要是上面的线性渐变中,上下两个渐变点的颜色是一样的,所以,在做放射填充时,只要选择两种颜色,一种是线性渐变的上渐变点的颜色,一种是中间渐变点的颜色.然后做出这种渐变,就可以很轻易地适应线性填充.
然而,在钢笔的笔杆中,中间高光区两旁的颜色并不相同,而Flash的放射渐变填充不可能实现在离圆心相同的位置出现两种不同的颜色,从而导致使用单一块放射渐变,将出现一条明显的分界线(看看矩形标记的区域).



所以,这里还需要作一些颜色的小调整(虽然小,但是对我来说,实在不简单啊),下面转到实例那里讲这个做法.
7.2 在pen元件里所有的图层上面新建一个图层,名为"笔尾表面",然后把"笔身光"图层锁起来.

7.3 用箭头工具把”笔身表面“图层的尾部选取出来.

7.4 复制选出来的部分,然后点击"笔尾表面"图层,右键-"粘贴到当前位置"(也可以用Ctrl+Shift+V),把笔尾部分粘贴到新的图层.

7.5 选到外形就开始修改颜色.

7.6 如上所述,这里应选用放射状填充,但是由于中心点两侧的颜色并不相同,所以,用一种填充是不行的,先把它分成两块再说.在新图层里用线条工具在笔尾的中线处画一直线.此时在线的上方和下方点击笔尾的东西,会发现图形已经被分成两块了,此时再分别调整两块的填充色.

7.7 为了让笔尾跟笔身能够衔接在一起,放射状填充的两种颜色应该跟笔身上中部的线性渐变颜色相一致.而当时用的线性渐变中,这两种颜色分别是676767,E1E1E1(假如忘记了什么颜色,可以用滴管工具查看),所以,笔尾上部,放射填充也用这两种颜色,即中心为E1E1E1,外部为676767.同理,笔尾下面用的放射填充是E1E1E1-454545.

7.8 颜色调整好以后,7.6步所画的线条就可以删掉了.

7.9 此时笔身和笔尾的过渡算是自然了(其实这里还需要用填充变形工具调整下才行的,为了这个,我弄了很久),但是,笔尾本身怎么弄都不能衔接得好,谁叫454545跟676767相差那么明显呀?为了这个,我尝试在这基础上再调整,可是,没办法啊,假如笔尾平滑了,跟笔身之间的衔接又出问题!怎么办呢......

7.10 再多分几块?不错,是个好办法,但是,要从6776767到454545,要分多少块才行啊?我可没那个心情去分.

7.11 啊!既然刚才用到了多图层技术,这里也尝试下用吧!在衔接不好的地方上面加个线性渐变,应该可以了吧?

7.12 在最上面新建一个图层,名为"笔尾调色层",然后锁定其它图层.根据需要,在过渡不自然的地方上面覆盖一个外形.

7.13 使用下面三种渐变填充的其中一种,看你觉得哪种好了.(从上往下,676767-454545,676767(100%Alpha)-676767(0%Alpha),454545(0%Alpha)-454545(100%Alpha))道理我想大家应该明白的,就是让两种颜色676767和454545之间由突变变成渐变.而后面两种则是让一种颜色逐渐变淡,另一种逐渐加深.

7.14 但是状况也并不像我想像中的那么简单.其实这块突变是非常复杂的,交界两侧颜色对并不是固定不变的,因为交界两侧的颜色不是纯填充色,而是渐变填充,所以交界线每个点两侧的颜色对是不同的,理论上有无数种搭配,在显示器中,搭配数目等于交界线的长度(以像素为单位)

注:上图的颜色值不大准确,只是为了说明交界线的颜色突变其实是非常复杂的.
7.15 搞了大半天,还是要分成很多块.唉!累了,先跳过这一步.

7.16 再新建一个图层,命名为"笔尾光",这个比较好处理,根据上面的道理,做一个半圆的放射填充就可以了.颜色从白的全不透明到白的全不透明.

7.17 做到这里,忽然发现,突变的分界线给"笔尾光"图层遮掉了相当一部分,分界线看上去短了很多.嗯,看来现在可以近似地把复杂的突变看作简单的纯色突变.假如觉得精度不是很高的话,"笔尾调色层"分少数几块也应该可以了.这里,我没有分块,就把笔尾调色层做成了从676767(Alpha100%)到676767(Alpha0%)的线性渐变.再用填充变形工具稍作调整,就得到了下面的效果.

7.18 虽然感觉还稍有不自然,但是我这个也弄了很久很辛劳了.这个效果总算可以.嗯,到外面散散步再弄吧.
讨论]在休息之前,先给大家提个问题讨论下.本来这个用PS或者AI的浮雕效果可以实现,假如不好控制,也可以先把笔身和笔尾的基本外形勾出来,然后在PS里用模糊工具把不自然的过渡部分弄到自然就可以了.不过这样的话,就笔尾那点要变成位图了.在Flash里,我就是不能容忍这么点位图,非得要用矢量图的方式表达出来.大家说我这样是不是很傻?

8 用跟画笔身类似的办法画出塑料的部分.不知道是有了经验还是有了感觉,还是塑料这里轻易画,这块很轻松地就画好了.其中颜色的取值:"塑料光"层,是白的全透明到全不透明再到全透明的线性渐变,"塑料表面"层,是000000-333333-000000的一个线性渐变,另外,白色全不透明和333333这两个颜色要害点在舞台是重合的.

9 在笔身上添加个牌子吧,我就随便加了个Flash8算了,这个比较简单,算是放松一下吧.
画过笔身以后,笔尖就有经验了.不过我发现我的那套所谓的"理论"又经受了一次考验,要从黑白转到彩色,颜色的选择似乎还要继续探索.
9.1 在所有图层之上,自下而上地创建名称分别为"笔尖表面","笔尖光"两个图层.
9.2 在"笔尖表面"图层先描出笔尖圆柱部分的外形.

9.3 用拷贝帧,粘贴帧的命令,把该外形粘贴到图层笔尖光.
9.4 到填充颜色了,笔尖光部分,我偷懒地用了刚才用过的从白全透明到白全不透明再到白全透明的一个线性渐变.光感出来了.然而,当我想继续偷懒下去的时候,发现没门了.

9.5 我把刚才画笔身表面用的配色方案搬到了笔尖表面上,然后试图简单地把色度从灰改成黄,发现根本不行.因为灰色不属于色度的范畴.然后,我在混色器里尝试用HSB模式来选色,观察还有什么变化,原来灰色的饱和度是0,而其它颜色的饱和度都大于0.饱和度是代表颜色鲜艳程度的一个指标,为此,我尝试把实物转了好几圈,感觉下笔尖的鲜艳程度......金属质感的笔尖,无论怎么看,永远都是那么地金光璀璨,亮丽夺目,想应该要用些鲜艳点的颜色了.于是我把饱和度锁定在95%以上.
9.6 为了更快观察到效果,最好让笔尖光图层显示出来,并且锁定.然后调整笔尖表面的填充颜色.由于饱和度的变化不能大,而且笔尖表面的颜色本身只有一种,就是说色度也不能变化,所以只能通过亮度的渐变表现圆柱体效果了.这个之前有过经验,所以圆柱体的效果比较轻易弄出来,但是却总弄不到金黄色的效果,要不感觉太红,要不感觉太黄.

9.7 唉......不过总算看到希望了.我再细调,色度加一减一地试,试了个十来分钟,终于试出感觉最好的配色方案了!

图中渐变的三种颜色的HSB值分别是:(48,99,58),(44,95,100),(51,99,59).
9.8 总算有了金黄色的感觉了,但感觉还不够刺眼,表面看上去依然有点粗糙.但是,正如上面所说的,笔尖光的渐变弄窄一点会觉得亮一些,但又不能弄得太窄.这里,我也头痛了好几秒钟......嗯,不要在这个圈子里面转了,想想看当初是用什么方法增强光感的?对了,就是添加一个光的图层,于是我大胆地再添加一个"笔尖光"的图层,渐变区的宽度稍微再比刚才的窄一些,的确出效果了!

9.9 还想再加强下对比,以更突出光感,不过再添加"笔尖光"图层似乎不太管用了.既然加强对比的话,除了让亮的更亮,也可以让暗的更暗呀!于是,我又在所有"笔尖光"的图层下方建了个"笔尖暗处"的图层,外形跟笔尖光一样,然后填充是333333(Alpha0%)-333333(Alpha100%)的一个线性渐变.这个一下子就看到好效果,所以也没什么好说的了.

9.10 这时用同样的办法,把笔尖的头也画出来吧.方法也是先画出外形,然后复制多个图层,表现光和暗处,当然,这里可以偷懒下,用回原来的配色方案就行了.

9.11 不过,笔尖头究竟不是圆柱体,不过之前弄过了,圆柱的感觉是靠"笔尖表面"图层的渐变实现的.所以,只要稍作修改就可以让它不像圆柱体了.

9.12 现在已经做得差不多了,就差个笔尖孔了.这个,添加个"笔尖孔"图层,用线条工具和画笔工具就可以轻松地画出来.

10 假如要把钢笔平放到桌面上,加个阴影会大大加强真实感.所以想加个阴影.大家可能会觉得阴影有种渐变的效果,那是不是又要分块来弄呢?.....唉,幸好答案是否定的,尽管Flash播放器没有这种渐变的算法,不过还好,Flash里的柔化填充边缘可以满足这个要求,尽管转化而来的是多块矢量图的叠加.
10.1 在所有图层的最下方创建一个名为"阴影"的图层.
10.2 现在需要先画出阴影的轮廓.那么,可以复制前面画好的线条来做吗?可以.但是线条是在多个图层里的喔,难道要一个个地来复制?当然不用.
10.3 保证所有图层都不隐藏且不锁定,然后Ctrl+A(全选),Ctrl+C(复制),接着点到"阴影"图层,Ctrl+V(粘贴),所有图形都粘到了"阴影"图层里.

10.4 此时的图形肯定乱七八糟.不过不要紧.选择一种填充颜色(333333,Alpha20%),这样,图形就变成了很简单的阴影轮廓了,当然,假如对阴影轮廓外形不满足的话,也可以稍作调整.
10.5 把所有图层显示,然后锁定除"阴影"以外的所有图层.再适当调整阴影图层的位置使之符合阴影的位置.

10.6 选定阴影,"修改"-"外形"-"柔化填充边缘",这里的参数读者可以根据自己的感觉来设置,我的设置如下:

10.7 按"确定"后,效果如下:

[讨论]啊,总算完成了.本来这东西真的可以很轻松地弄出来,但我就非得要转那么大一个圈做这么多吃力不讨好的事情,你说我是不是很傻?做好的那天,打开了闪吧的论坛,预备发上来的时候,发现论坛改版了,首页上多了一支璀璨夺目的钢笔,人家画得多真实呀(或许本来就是实物),回头望下自己的那支,觉得自己更是傻瓜一个,希望Flash8的出现能让我这个傻瓜不再傻瓜吧.
借此教程,把制作经验传授给大家,也希望能和大家分享我制作的心得.Thanks for your time!