打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
边框随位图颜色变换的制作原理与过程
教学目的:通过本节教学了解和熟悉影片剪辑的创建、实例名称和属性链接的运用,动态文本与实例名称以及动作脚本的填写,进而创作出边框随位图色彩的变化而变色,并显现其色码值的奇妙效果。
教学对象:本教材是针对有一定动画制作基础和对属性面板及工具箱、动作面板、as语句有所了解的朋友们编制的,因此省略了一些步骤,还望谅解。
教学要点:实例名称、属性链接、动态文本、动作面板、as语句。
作前准备
准备一张规格为550*400的,多色彩的背景位图,,经过制图软件(ps、fw)处理后,放在指定的文件夹待用。
1.启动FLASH8 软件。
2.确立文档属性
设置动画尺寸为550*400,其它默认,点击确定,进入场景1。如图1所示:
图1
3.首先将准备好的背景位图素材导入到库中,待用。
4.为背景图片设置其位图属性
右键库中的位图,如图2所示:
?图2
选择“属性”,打开位图属性面板,填写其“标识符”为:landscape 。其它选项,如图3所示:
?图3
*也可右键库中位图,选择链接,打开链接属性,重复上述操作。
5.创建影片剪辑
(1)选择“插入-新建元件”,建立一个名为“边框”的影片剪辑元件。点击确定,进入元件编辑区。就一个图层。
选择图层1第一帧,用矩形工具在舞台拖一个规格为550*400的,红色无边线的矩形(图4-1),全居中;然后在它外边再拖一个规格为510*360的,黄色无边线的矩形(图4-2);点击该实例。“修改-组合”,全居中(图4-3);点击黄色矩形,“修改-分离”,将其打散后删除(图4-4)。其流程,如图4所示:
图4
框选红色矩形框,将其转换为影片剪辑元件,在属性面板填写其实例名称为:colorinfo 。如图5所示:
图5
(2)选择“插入-新建元件”,建立一个名为“颜色”的影片剪辑元件。点击确定,进入元件编辑区。添加一个图层,共两个图层。下层命名为边框,上层命名为动本。
A.选择边框图层第一帧,从库中拖出“边框”影片剪辑到舞台,规格为550*400,全居中。如图6所示:
?图6
点击该实例,在属性面板填写其实例名称为:sample 。上锁。如图7所示:
?图7
B.选择动本图层第一帧,用动态文本工具在边框下方拖一个动态文本框,水平中齐。点击该实例,在属性面板填写其实例名称为:colorValue 。其他参数参考,如图8所示:
图8
锁定该图层。
6.编辑制作场景
返回场景1,添加两个图层,共三个图层。自下而上命名为位图、颜色、as。
(1)选择位图图层第一帧,从库中拖出背景位图到舞台,规格550*400,全居中,上锁。如图9所示:
图9
(2)选择颜色图层第一帧,从库中拖出“颜色”影片剪辑元件到舞台,规格为550*400,全居中。如图10所示:
?图10
点击该实例,在属性面板填写其实例为:selectedColor 。上锁。如图11所示:
图11
(3)选择as图层第一帧,按f9,打开动作面板,在as编辑区输入,如下帧语句:
import flash.display.BitmapData;
linkageId = "landscape";
myBitmapData = BitmapData.loadBitmap(linkageId);
mc = this.createEmptyMovieClip("mc", 1);
mc.attachBitmap(myBitmapData, 1);
onMouseMove = function(){
myNewColor = "0x" + myBitmapData.getPixel(_xmouse,_ymouse).toString(16);
newColor.setRGB(myNewColor);
selectedColor.colorValue.text = myNewColor;
}
selectedColor.swapDepths(_root.getNextHighestDepth());
newColor = new Color(selectedColor.sample);
锁定该图层。
    7.该作业完成后的时间轴如图12所示:
图12    8.测试存盘
*说明:
1.该作业的特点是边框随着鼠标接触背景位图所在的颜色而发生相对应的变化,同时还在下方显示其对应颜色的色码值。
2.要稳定边框的颜色,则右键点击鼠标所在位置,撤出鼠标即可。
最终效果显示:
http://hsb345.16789.net/domName/hsb345/201032915564116152.swf
全屏下载
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
舞台五彩光芒的制作原理与方法
Flash?MX2004入门与进阶实例:3.2?逐帧动画
Flash CS4实例教程:打造星光四射的莲花
flash实例--羽化遮罩动画
游戏-拼图的制作原理与方法
如何制作鼠标跟随?
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服