分享

边框随位图颜色变换的制作原理与过程

 吉祥如意988 2018-03-10

边框随位图颜色变换的制作原理与过程

   教学目的:通过本节教学了解和熟悉影片剪辑的创建、实例名称和属性链接的运用,动态文本与实例名称以及动作脚本的填写,进而创作出边框随位图色彩的变化而变色,并显现其色码值的奇妙效果。

  教学对象:本教材是针对有一定动画制作基础和对属性面板及工具箱、动作面板、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./domName/hsb345/201032915564116152.swf

 全屏下载

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多