首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > Flash教程 > 正文
Google
给建筑插上飘动的彩旗
来源:闪吧论坛 作者:qinz 2007年08月13日 16:52 网友评论:0条 点击:
[前言]
1、初学者写的教程面向初学者,让我们一起成为高手吧!(我写的比较啰嗦,但制作起来却是很简单的)
2、我在闪吧论坛发过此贴——请初学者用遮罩做出此效果,很多如我一样的初学者都很踊跃地跟贴交作业,但效果还是差一点点。现将我的制作思路写出来。

[效果]:
/UploadTeach/200708/20070810163916150.swf

[要求]
1、防止靠近旗杆的旗上下抖动
2、使旗在滚动时畅而不滞

[目的]
熟练掌握引导层和遮罩的使用方法

[步骤]
第一步:新建图形元件,名称为“静止的旗”;在里面画一个无边框的矩形,宽30像素、高40像素、填充红色、相对于舞台左对齐和上对齐;按下工具栏中的“选择工具”,不选中矩形,把鼠标移到矩形的上边位置,当鼠标下方出现一条黑色的弧线时,按住鼠标往上拖;同样,把矩形的下边也往上拖。选中变形后的矩形,按住Ctrl键的同时往右拖出一个(即复制一个),选中复制出来的图形,然后选择“修改”菜单下的“变形”中的“垂直翻转”,并把X坐标设置为30、Y坐标设置为0;用鼠标在图形点击选中,按住Ctrl键的同时往右拖出一个,其X坐标设置为60、Y坐标与左边的图形相同(变形后的图形X坐标发生了变化,已经不为0了)。具体设置和效果如图1:

按此在新窗口浏览图片

第二步:在库中选中元件“静止的旗”,右键选择“直接复制”,在弹出的对话框中将名称改为“遮罩原图”,点击“确定”按钮;在库中双击元件“遮罩原图”,进入“遮罩原图”的编辑场景;选中图形(记住其高度),用“选择工具”删除下部分的波浪形,再把其高度设置为原来的高度(不一定与图中的高度一样)。具体设置和效果如图2:

按此在新窗口浏览图片

第三步:新建影片剪辑元件,名称为“滚动的旗”,在里面创建两个图层,图层名称从上到下依次为“引导层”、“静止的旗”;把“静止的旗”元件拖入到“静止的旗”图层上,相对于舞台左对齐和上对齐;双击该元件,进入“静止的旗”元件编辑场景中,在工具栏中选择“墨水瓶”工具,给图形描边黑色的边线,选中边线,双击边线按住Ctrl+X键剪切;回到“飘动的旗”的编辑场景中,再按住Ctrl+X键粘贴到“引导层”图层上,删除两边和下边的线,只留下上边线,相对于舞台水平中齐和上对齐,并延长帧至第30帧处,锁定该图层;选中元件“静止的旗”,按下工具栏中的“任意变形工具”,把图中出现的小白圆拖到上边的黑线上,在第30帧处插入关键帧,并创建补间动画,把第30帧的元件X坐标设置为-58,并把元件往上移,直到小白圆在黑线上为止;选中“引导层”图层,右键选择引导层;选中“静止的旗”图层稍稍往上拖(注意引导层图层图标的变化)。具体设置和效果如图3:

按此在新窗口浏览图片

第四步:新建影片剪辑元件,名称为“遮罩层动画”,把库中的元件“遮罩原图”拖入,相对于舞台左对齐和上对齐;在第30帧处插入关键帧,把第30帧处的元件X坐标设置为-58,并创建补间动画。具体设置和效果如图4:

按此在新窗口浏览图片

第五步:新建影片元件,名称为“飘动的旗”,创建两个图层,图层名称从上到下依次为“遮罩层动画”、“滚动的旗”;把“遮罩层动画”和“滚动的旗”分别拖入到相应的图层中;把“遮罩层动画”元件顺时针旋转90°,并把各个图层上的元件均设置成为相对于舞台左对齐和上对齐;选中“遮罩层动画”图层,右键选择遮罩层。具体设置和效果如图5:

按此在新窗口浏览图片

第六步:创建“旗杆”新图形元件,用渐变工具画一细长矩形;把“旗杆”拖入到主场景中,在下层把“飘动的旗”也拖入,分别放到合适的位置上。

[思考与交流]
1、你是否能用形状补间做出飘动的效果?
2、为了防止靠近旗杆的旗上下抖动,你还有其他方法吗?
3、在第三步和第四步中将第30帧处的元件X坐标为何不设置为60?

[源文件]
插上彩旗.rar
上一篇:加载图片按比例显示(附源文件)   下一篇:轻松实现swf或其中的MC打开时从上次播放点接着播放
收藏此页】【打印】【关闭
 相关文章  我要点评
·9款城市建筑矢量素材
·80张高清晰城市建筑素材
·10款潮流矢量花卉与城市建筑
·40张印度建筑写真
·欧美建筑装饰类网站界面欣赏
·欧美房产建筑类网站界面欣赏
·1600元青岛“建筑赞美城市”摄影大赛通知
·Go Media出品建筑工地矢量素材

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】