FLASH CS3 打造一个小奶瓶图标

所属分类: 媒体动画 / Flash教程 阅读数: 86
收藏 0 赞 0 分享

在下面的教程里,我们将从基本形状开始,完全使用FLASH画一个小奶瓶的图标。
  
 
 

首先我们从一个圆角的矩形开始,把它的底部调节成圆形。

        

再把顶部调成突起的形状,如果你熟悉贝塞尔曲线,这不是什么难事。然后我们用形状扩展,外扩出一个粗边来,这将是瓶壁。

    

画瓶盖的圆柱其实很简单,先画一个椭圆,然后垂直复制一份。切去下半个的上半部分。

    

将上面的边拉伸出来,形成圆柱的壁,然后移到下层,这样很快是不是?

   

下面的一个小圆柱也采用同样的方法。

   

这时我发现下面的瓶身需要一个瓶颈,于是先将其切去一块,再把切出的节点移动上来。因为画了两层,所以两层都要调整,如果一开始注意到,会好很多。

   

形状画成了,下面是奶嘴,让我们再从一个矩形开始。加出需要的节点,再调整曲线。

   


形状差不多了,如果你是对照照片来画的,可能会更像一点。然后,同样用形状扩展加一层边,因为橡胶奶嘴同样有厚度。

    

Flash CS3快速打造小奶瓶图标(图十六)
图15

Flash CS3快速打造小奶瓶图标(图十七)
图16

下面是颜色了,玻璃瓶我习惯用这样的圆形渐变。圆柱形用加上高光的线形渐变就可以了。

Flash CS3快速打造小奶瓶图标(图十八)
图17

Flash CS3快速打造小奶瓶图标(图十九)
图18

 

FLASH并没有太复杂的渐变方式,但如果灵活运用,同样可以做出复杂的效果,而且毕竟我们也不是要仿真到完全一致,要做照片效果完全可以用3D。注意下面我把圆柱的顶复制一份,变成浅色,再向下移动一两个像素,然后移到下层,这样就形成了一个倒角的效果,有时细节是很重要的。

Flash CS3快速打造小奶瓶图标(图二十)
图19

Flash CS3快速打造小奶瓶图标(图二十一)
图20

 

接下来是瓶身的渐变,用白色的线形渐变即可。

Flash CS3快速打造小奶瓶图标(图二十二)
图21

Flash CS3快速打造小奶瓶图标(图二十三)
图22



注意玻璃瓶是两面都有高光的,否则没有那种通透感。然后高光的形状要沿着瓶身的形状变化。

Flash CS3快速打造小奶瓶图标(图二十四)
图23

Flash CS3快速打造小奶瓶图标(图二十五)
图24

 

奶嘴也是同样的情况,但因为是橡胶的,所以不要像瓶身上那样规则,稍有点变化反而更好。

    

Flash CS3快速打造小奶瓶图标(图二十六)
图25

Flash CS3快速打造小奶瓶图标(图二十七)
图26

然后调一下色彩,把瓶盖加一道高光,这样质感更强烈一点。一个基本的奶瓶就画好了。

Flash CS3快速打造小奶瓶图标(图二十八)
图27

Flash CS3快速打造小奶瓶图标(图二十九)
图28

 

有一种瓶身是孤形的奶瓶似乎更好看一点,于是我们把形状和高光再调整一下。然后旋转45度,将瓶身的内层复制一层到顶端来。

   

Flash CS3快速打造小奶瓶图标(图三十)
图29

Flash CS3快速打造小奶瓶图标(图三十一)
图30

切去新形状的上半部,将颜色改成浅蓝到白色的渐变,牛奶一般都是用这种色来表现的。

Flash CS3快速打造小奶瓶图标(图三十二)
图31

Flash CS3快速打造小奶瓶图标(图三十三)
图32

 

再复制一层变成深蓝色,两层调成相对的波浪形状。深蓝色的移到下层。牛奶就画好了。

    

Flash CS3快速打造小奶瓶图标(图三十四)
图33

Flash CS3快速打造小奶瓶图标(图三十五)
图34

把我们画好的奶瓶整体复制一下,Ctrl+B打散,把瓶子中心的部分去掉,生成Movieclip,再加一个模糊滤镜,这样影子就做好了。你当然可以使用阴影或到PS中修改,我这样做是为了瓶身的透明。

Flash CS3快速打造小奶瓶图标(图三十六)
图35

Flash CS3快速打造小奶瓶图标(图三十七)
图36

 

至此,一个小奶瓶就做好了。这里有一个经过进一步调整后的奶瓶,具体的方式和细节就看你自己的发挥了。

    

Flash CS3快速打造小奶瓶图标(图三十八)
图37

Flash CS3快速打造小奶瓶图标(图三十九)
图38

你可以通过Axialis IconWorkshop之类的软件生成图标,也可以做任意其它用途。我喜欢用FLASH做图标的原因就在于它是全矢量的,而且可以直接用在FLASH程序中,体积非常小,这个奶瓶生成的整个SWF文件只有1744Byte。

更多精彩内容其他人还在看

FLASH CLASS的基本编写规范

继续回来写教程。本来不想写这节的,因为这节的内容很多书上或者网上资料都有,而且写的比我要详细正规得多。但后来想想,还是写吧!为啥?凑篇幅呗~啊哈哈~而且后面几节要结合接宝的范例游戏,具体分析它的几个CLASS,所以,还是用一节把CLASS的写法说一下。可能我对CLASS
收藏 0 赞 0 分享

flash教程:使用拆分数字和文字的函数

flash的小函数:拆分数字和文字的函数. 以下为引用的内容: /* * 拆分数字和文字 */ public function splitNS(s:String):Object{ var tNum:String=""
收藏 0 赞 0 分享

通过实例学习Flash AS3.0——案例六

相关文章: 通过实例学习Flash AS3.0——案例五 首先声明:本人大菜鸟一个,刚接触AS3不久,许多理念还没来得及灌输,这些case都是从网上down的,但因为解说是英文的,不利我们学习,我就充当一个translater,顺便可以让自己巩固一下
收藏 0 赞 0 分享

用Flash AS制作逼真的下雨动画效果

Flash教程:用Flash AS制作逼真的下雨动画效果 先看下效果:(附.swf文件) 制作过程 一、新建一图层,大小随意; 二、新建元件(影片剪辑): 1、制作雨滴并下落。使用直线工具(颜色设为灰色,1像素)画一短直线,使用选择工具将直
收藏 0 赞 0 分享

通过实例学习Flash AS3.0——案例五

相关文章: 通过实例学习Flash AS3.0——案例四 首先声明:本人大菜鸟一个,刚接触AS3不久,许多理念还没来得及灌输,这些case都是从网上down的,但因为解说是英文的,不利我们学习,我就充当一个translater,顺便可以让自己巩固一下
收藏 0 赞 0 分享

Flash CS3制作Fla形式的组件

  本文为大家介绍如何制作Flash CS3中的[*.fla]形式的的组件(Component)。这种组件和SWC组件不同,它和CS3自带的组件一样能够双击进入组件里面编辑,是Flash CS3新增加的一种组件形态。下面我们制作一个MyButton组件为例子。   制作步骤:
收藏 0 赞 0 分享

通过实例学习Flash AS3.0——案例四

相关文章:通过实例学习AS3.0——案例三 首先声明:本人大菜鸟一个,刚接触AS3不久,许多理念还没来得及灌输,这些case都是从网上down的,但因为解说是英文的,不利我们学习,我就充当一个translater,顺便可以让自己巩固一下知识。
收藏 0 赞 0 分享

通过实例学习flash AS3.0——案例二

相关文章:通过实例学习AS3.0 --案例一 首先声明:本人大菜鸟一个,刚接触AS3不久,许多理念还没来得及灌输,这些case都是从网上down的,但因为解说是英文的,不利我们学习,我就充当一个translater,顺便可以让自己巩固一下知识。 水平有限,错误难免,欢
收藏 0 赞 0 分享

通过实例学习AS3.0——案例三

相关文章:通过实例学习flash AS3.0——案例二 首先声明:本人大菜鸟一个,刚接触AS3不久,许多理念还没来得及灌输,这些case都是从网上down的,但因为解说是英文的,不利我们学习,我就充当一个translater,顺便可以让自己巩固一下知
收藏 0 赞 0 分享

通过实例学习AS3.0

首先声明:本人大菜鸟一个,刚接触AS3不久,许多理念还没来得及灌输,这些case都是从网上down的,但因为解说是英文的,不利我们学习,我就充当一个translater,顺便可以让自己巩固一下知识。 水平有限,错误难免,欢迎大虾小虾,大鸟小鸟指正。 下面进入正题:
收藏 0 赞 0 分享
查看更多