您好!欢迎您光临霓虹灯的制作原理与过程_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>实例教程>>>霓虹灯的制作原理与过程
霓虹灯的制作原理与过程
发表日期:2013-3-21 14:05:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 5010

 

 

霓虹灯的制作原理与过程

 

   

       教学目的:通过本节教学了解和掌握用遮罩的制作与技巧,进而运用其原理和操作方法创作出简单明快、光彩夺目、变化多端的霓虹灯效果。

  教学对象:本教材是针对有一定动画制作基础和对属性面板及工具箱有所了解的朋友们编制的,因此省略了一些步骤,还望谅解。

       教学要点:遮罩,透明度,动画补间。

 

    

    作前准备 准备1张规格为400*550的上海东方明珠图片,经过制图软件(ps、fw等)处理后,保存在指定的文件夹,待用。 

    制作步骤

    1.启动FLASH8 软件

    2.确立文档属性 设置动画尺寸为450*450,背景颜色黑,帧频12,其它默认,点击确定,进入场景1工作区。如图1所示:

 
图1
 
    3.创建影片剪辑
 
    1.首先将已准备好的东方明珠图片导入到场景,设置其规格为400*550,全居中。命名该图层为“背景”。上锁。如图2所示:
 
 
图2
 
    2.添加一个图层,命名为灯光1。选择该图层第一帧,用矩形工具拖一个竖向的无边框的长条矩形,颜色随意,规格和东方明珠两球之间高度相同。然后,用选择工具对其进行调整到图3-3所示,再后,将其移到两球间立柱的左边,复制粘贴该实例一个,并将复制的实例水平翻转后,将其移到立柱的右边(这样作是为了和立柱外边缘相吻合),如图3-4所示:
 
 
图3
 
删除图3中的1、2、3,并将图3-4转换为影片剪辑,命名为“灯光1”。双击该实例,进入灯光1影片剪辑编辑区。此时编辑区中实例已全居中。在第90帧插入帧。上锁。
    添加一个图层,用矩形工具拖一个竖向的矩形,无边框,颜色随意,宽要大于图层1的实例,高要大于图层1实例的三倍。全居中。然后,用线条工具在矩形上画两条线段,将其分为三段,然后再将各段颜色填充为,如图4所示:
 
 
图4
 
(注:中间颜色可选择色码表最下边一行,最右边的多元线性,也可自选)
 
将该图层移到图层1下方,选中本图层所有实例将其转换为图形元件(或点击“修改-组合”)。选择该图层第一帧,将彩色矩形移到,如图5所示:
 
 
图5
 
在第20、40帧插入关键帧,点击第40帧,将彩色矩形向上移到,如图6所示:
 
 
图6
 
在第65、90帧插入关键帧,点击第90帧,将彩色矩形拖回到第1帧的位置(可复制第1帧,再粘贴到第90帧)。分别右键第20帧和第65帧,创建本区域间的动画补间。最后,将上一图层(图层1)设置为遮罩层。
 
    3.选择“插入-新建元件”,创建一个名为“灯光2”的影片剪辑,点击确定,进入元件编辑区。添加一个图层,共两个图层。
 
    (1)点击上层图层2第一帧,用用矩形工具托一个竖向的细长条矩形,无边框,颜色随意,规格3*100,而后,右键该实例,复制、粘贴若干次(约25-30),将其横向水平排列,选中所有实例,将其转换为图形元件,全居中。在第120帧插入帧。上锁。如图7所示:
 
 
图7
 
    (2)选择下层图层1第一帧,用矩形工具拖一个无边框的横向矩形,颜色随意,规格为600*70。然后,用线条工具在该实例上边画13条斜线,如图8-1所示;随后,将其线段分割部分颜色调整为,如图8-2所示;之后,选中所有实例,将其转换为图形元件或选择“修改-组合”,复制粘贴该实例一次,并将其垂直翻转(修改-变形-垂直翻转),用选择工具将两个实例合并为,如图8-3所示:
 
 
图8
 
选中合并后的实例,将其转换为图形元件。选择第1帧,将彩色矩形移到,如图9所示:
 
 
图9
 
在第30、60帧插入关键帧,点击第60帧,将彩色矩形移到,如图10所示:
 
 
图10
 
在第90、120帧插入关键帧,点击第120帧,将彩色矩形拖回到第1帧的位置(可复制第1帧,再粘贴到第120帧)。分别右键第30帧和第90帧,创建本区域间的动画补间。最后,将上一图层(图层2)设置为遮罩层。
 
    4.创建灯光3影片剪辑 在场景中再添加三个图层,(现在场景中有五个图层)。
 
    (1)选择最上层第5图层,按照灯光1的原理方法画一个和塔尖向吻合的图案(矩形条要细些),然后,将其转换为影片剪辑元件元件,命名为灯光3。如图11所示:
 
 
图11
 
    (2)双击该实例,进入元件编辑区。添加一个图层,用矩形工具拖一个竖向的矩形,无边框,颜色随意,宽要大于图层1的实例,高要是图层1实例的2-3倍。全居中。然后用线条工具在矩形上画若干线段,将其分为若干段,然后再将各段颜色填充为两色斑马线,如图12所示:
 
 
图12
 
将该图层移到图层1下方,选中本图层所有实例将其转换为图形元件(或点击“修改-组合”)。选择该图层第一帧,将彩色斑马线矩形移到,如图13-左所示:在第20、40帧插入关键帧,点击第20帧,将彩色斑马线矩形移到,如图13-右所示:
 
图13
 
分别点击第1、第20帧,创建本区域间的动画补间。设置上层(图层1)为遮罩层。
 
    5.创建灯光4影片剪辑 选择“插入-新建元件”,创建一个名为“灯光4”的影片剪辑,点击确定,进入元件编辑区。选择图层1第一帧,打开混色器,设置其参数,如图14所示:
 
 
图14
 
在工作区拖一个规格为22*22的正圆形,全居中。在第5、10、15帧插入关键帧,在第20帧插入帧。选中第5帧的实例,双击混色器右边的色码块换成蓝色,Alpha为80%,在单击左边的色码块,Alpha为60%;同理。选中第10帧的实例,双击混色器右边的色码块换成粉色,Alpha为80%,在单击左边的色码块,Alpha为60%;选中第15帧的实例,双击混色器右边的色码块换成绿色,Alpha为80%,在单击左边的色码快,Alpha为60%。如图15所示:
 
 
图15
 
    6.创建灯光5影片剪辑 选择“插入-新建元件”,创建一个名为“灯光5”的影片剪辑,点击确定,进入元件编辑区。添加一个图层,共两个图层。
 
    (1)选择上层图层2第一帧,点击“椭圆形工具-多角星形工具”,再点击属性面板中的“选项”按钮,打开工具设置界面,设置其参数如图16所示:
 
 
图16
 
再打开混色器,设置其参数,如图17所示:
 
 
图17
 
在工作区拖一个规格为22*21的五角星,全居中。在第40帧插入帧,上锁。
 
    (2)选择下层图层1第一帧,用矩形工具,颜色为色码表最下一行最右边的多元线性(也可自选),在工作区拖一个横向的,规格为60*2矩形,并将其右端点对齐舞台的中心点。再用任意变形工具选中该实例,将其注册点移到右端点,随后,点击“窗口-变形”,打开变形界面,设置其参数,如图18所示:
 
 
图18
 
点击下边的“复制并应用变形”按钮35下,实例变化,如图19所示:
 
 
图19
 
选中所有实例将其转换为图形元件,并设置。在第20、40帧插入关键帧,选中第20帧中的实例,将其规格缩小为60*60,Alpha为10%。全居中。点击第1帧,创建本区域的动画补间,并顺时针旋转一周;点击第20帧,创建本区域的动画补间,并逆时针旋转一周。如图20所示:
 
 
图20
 
 
    4.组织编辑场景 返回场景1,再添加两个图层,共七个图层。自下而上命名为背景、灯光1、灯光2、遮罩灯光3、灯光4、灯光5。
 
    (1)背景图层已有实例。上锁。
 
    (2)灯光1图层中,灯光1影片剪辑已在场景之中。上锁。
注:如不理想可从库中提取灯光1影片剪辑到舞台,删除场景中的灯光1实例,将库中的灯光1影片剪辑放在灯光1所在位置。
 
    (3)选择灯光2图层第1帧,从库中拖出灯光2影片剪辑到舞台,放置在东方明珠的上圆之上,调整好大小和位置;从库中再拖出一个灯光2影片剪辑到舞台,放置在东方明珠的下圆之上,然后,单击“修改-变形-水平翻转”,调整好大小和位置。
 
    (4)选择遮罩图层第1帧,用椭圆形工具托一个横向椭圆形,无边框,颜色随意,规格应和东方明珠上圆相仿,右键该实例将其转换为图形元件,并将其放置在灯光2、东方明珠下圆之上,调整好大小位置;然后,从库中拖出椭圆形图形元件到舞台,并将其放置在灯光2东方明珠大圆之上,调整好大小位置。如图21所示:
 
 
图21
 
 
设置该图层为遮罩层。
 
    (5)灯光3图层中,已有灯光3影片剪辑在场景之中。上锁。
注:如不理想可从库中提取灯光3影片剪辑到舞台,删除场景中的灯光3实例,将库中的灯光3影片剪辑放在灯光3所在位置。
 
    (6)选择灯光4图层第1帧,从库中拖出灯光4影片剪辑到舞台,放置在东方明珠的塔尖小圆的位置上,调整好大小和位置。上锁。如图22所示:
 
 
图22
 
    (7)选择灯光5图层第1帧,从库中拖出灯光5影片剪辑到舞台,放置在东方明珠的塔尖之上,调整好大小和位置。上锁。如图23所示:
 
 
图23
       
    5.该作业完成后的时间轴如图24所示:
 
 
图24
 
    6.测试存盘。
 

    *说明:

    1.边框可根据图片主题和个人喜好添加,也可以省略。

    2.本教程主要重点是介绍霓虹灯的制作原理与操作方法,你在制作中可以将被遮罩的矩形中的图案做得更多些,使其色彩鲜艳、变化多端。观赏效果会更佳。

    3.该教程实例讲述起来比较繁琐,制作起来比较简单,关键是要有耐心和巧妙的创意与设计。

最终效果显示:


 


http://hsb345.16789.net/domName/hsb345/20081231154519237.swf

 

全屏下载

 

祝你成功!

 

进入更多教程

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



梦缘家族
(2008-12-30 15:04:00) [124.165.89.]

老师那个图片11不显示啊,重新上传我做到这里看不到了不知道应该是什么样子,期待中,。。。我的QQ307191565


兰天
(2008-12-27 15:35:00) [60.168.23.]

老师你好,我照你的教材做出来了,老师辛苦了,谢谢你.


hsb345
(2008-12-14 19:37:00)

谢谢石上清泉朋友的校正了我的笔误!你说的很对,是应该将其转化为影片剪辑元件,图形元件到场景中是不会显现其动态效果的。再谢!常联系。


石上清泉
(2008-12-14 15:30:00) [123.5.63.]

4.创建灯光3影片剪辑 在场景中再添加三个图层,(现在场景中有五个图层)。
    (1)选择最上层第5图层,按照灯光1的原理方法画一个和塔尖向吻合的图案(矩形条要细些),然后,将其转换为图形元件,命名为灯光3
这里应该是影片元件,不然出不来效果的

 发表评论:共有 4 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

迎客松B站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:翠柏

琼icp备09005167