网页教学网
 当前位置: 网页教学网 >> 动画制作 >> Flash实例教学 >> Photoshop结合Flash制作瓢虫变色交互动画(3)
[ HTML ] [ FW ] [ DW ] [ FP ] [ JS ] [ XML ] [ CSS ] [ 图象 ] [ FLASH ] [ .NET ] [ ASP ] [ JSP ] [ PHP ] [ 数据 ] [ 系统 ] [ 安全 ] [ 素材 ] [ 建站 ] [ 主机 ] [ 入门 ] [ 技巧 ]

Photoshop结合Flash制作瓢虫变色交互动画(3)

http://www.webjx.com  更新日期:2007-09-06 15:42  出处:中国教程网论坛  作者:祁连山

相关系列教程:

Photoshop结合Flash制作瓢虫变色交互动画(1)

Photoshop结合Flash制作瓢虫变色交互动画(2)

Photoshop结合Flash制作瓢虫变色交互动画(3)

下面我们打开Flash CS3,开始我们的编程探索之旅。按图示建立一个新的Flash文件。

Photoshop结合Flash制作瓢虫变色交互动画(3)

我们来试一下Flash CS3对PSD文件的支持功能。经过我的测试,发现这个功能有时会有一些小BUG哟。在后面我们再说。

使用“文件”-“导入”-“导入到舞台”这个方式,把刚才我们制作的瓢虫导出文件导入到Flash。

Photoshop结合Flash制作瓢虫变色交互动画(3)

可以看到,我们能把PSD中的层分为多个Flash层,并把它们放置整齐。我们还可以单独导入这些层,在前面画勾即可。

Photoshop结合Flash制作瓢虫变色交互动画(3)

单击确定,我们可以看到,这些图层都被分层排放,层的上下次序和摆放位置都和原始图片一样。

Photoshop结合Flash制作瓢虫变色交互动画(3)

不过这种导入方式有些问题,我们用移动工具,把它们分别移开,可以看到,虫的外壳并没有变成透明的,在边缘处还有下层的痕迹。怎么办呢?

Photoshop结合Flash制作瓢虫变色交互动画(3)

我们把这些图层分次导入到库,使用“文件”-“导入”-“导入到库”,每次只导入一个层。可以看到,导入时会提示有重复的库项目,选择不替换。

Photoshop结合Flash制作瓢虫变色交互动画(3)

我们把分次导入到库中的小元件,一个个手动的分层排放。这次透明的问题解决啦!

Photoshop结合Flash制作瓢虫变色交互动画(3)

在Flash老的版本中,我们想实现这样的效果,可以把PSD文件分别显示各层,分别存为PNG文件导入进来。PNG格式是支持透明的图像格式,用于制作透明动画,效果非常优秀。在Flash中,图像也可以分层排列,和Photoshop中的操作差不多。另外,Flash还支持动画,因此它有时间线,我们在建立新层之后,在该层时间线的第一帧上单击,把元件从库里拉到舞台就可以了。

关键字:
舞台:就是图像动画的表演场,正中间的空白处即是。
库:元件仓库,我们可以把自己做的元件存在库里,想用时把它拉到舞台上就可以啦。元件可以在舞台上无限复制,如果改变元件,舞台上所有引用该元件的图像都会相应改变,有点像Photoshop中的智能对象。
帧:动画是由一幅幅图像连续播放形成的。每一幅图像被称为一帧。

窗口菜单中选择“对齐”,打开对齐面板。用移动工具框选虫虫的各个部件,水平居中对齐。这样它们就按中线对齐,比手工对齐又快又好。

Photoshop结合Flash制作瓢虫变色交互动画(3)

我们用鼠标选择各个层,移动到合适位置,将它对齐,如果上层挡到下层,选择不到的话,可以按图示锁定上层,就可以顺利的选择到下层啦。

Photoshop结合Flash制作瓢虫变色交互动画(3)

选择红色色块层,在其上点右键,转化为元件,把它设置为影片剪辑类型,起个名称叫“变色色块”。此时在库中就有了这个影片剪辑了。

Photoshop结合Flash制作瓢虫变色交互动画(3)

在Flash中,有三种元件类型:影片剪辑、按钮、图形。

我们在这里必须用到影片剪辑的概念,影片剪辑可以用来在舞台上表演动画,影片内可以嵌套影片。它可以自己一边播放,一边参与到别的节目中,成为一个演员。举一个形象的例子:我们正在观看电视,电视里演出的人正在看电视,那个电视里也正在播出动画节目。那么,最后一级的电视机可以看成是一个电影剪辑,它一边播放动画,一边还参与演出。它所参与的演出节目,本身也是一个动画,被我们收看到了。这里就是一个形象的三级嵌套。影片剪辑可以被我们编的程序进行控制,比如控制它是否播放,播放到哪个位置,自己的透明度是否被改变,自己的颜色是否被改变等。我们本例正是要用程序改变它的颜色。因此,我们先把这个色块转化为影片剪辑。

在属性面板中,对这个电影剪辑命名为“sk”,意为色块。我们可以手动测试一下,在属性面板右侧,设置这个影片剪辑的色调,可以看到,我们可以手动把它变色啦。手动的变色并不是目的,我们的目的是用程序来控制它。后面我们用简单的编程试一试。

Photoshop结合Flash制作瓢虫变色交互动画(3)

在最上层建立一个新层,命名为“as”,这是一个程序专用层,当然你也可以起别的名字,名字是为了方便我们识别该层。其实我们可以把程序写在任何一个层上,但是为了便于管理,我们用一个专层放程序。如果我们在动作面板里写入程序的话,在该帧就会出现一个“α”符号,表示这一帧有我们编制的程序,我在动作面板里输入一些字符,大家可以看到该帧就有了这样的变化。

Photoshop结合Flash制作瓢虫变色交互动画(3)

进入动作面板,我们输入下面的字符:

r=0;  //设置红色值
g=0;   //设置绿色值
b=255;  //设置蓝色值

colora=new Color(_root.sk); 
colora.setRGB(rgb);
rgb=(r<<16|g<<8|b);   //将颜色值设置在色块上

其中每行中的//符号后面的文件,被称为注释,它是方便我们后面调程序时,对语句的自我解释。我们可以通过写注释,记住自己编程到此时的一些想法。

Photoshop结合Flash制作瓢虫变色交互动画(3)

其中的_root,是指的舞台,_root.sk就是我们刚才做的那个叫sk的色块电影剪辑。这种语法就象在点名,指定某实体变颜色。后半部分语句,让我们把变量r,g,b做为颜色值应用在这个电影剪辑上。这些语句大家不用完全明白意思,先做出一个实例,后面再慢慢学。

按下Ctrl+回车,我们测试一下吧。

我们设置的是一个蓝色,为什么虫虫变成黑了啦?莫不是我编的程序有问题?

Photoshop结合Flash制作瓢虫变色交互动画(3)

不要紧,我们来解决这个问题。用鼠标纵向选择各层第二帧,右键,插入帧,我们让这个动画拥有两帧,这样在测试的时候,它会反复播放第一帧和第二帧,新的颜色值就会被赋予电影剪辑啦。

Photoshop结合Flash制作瓢虫变色交互动画(3)

Ctrl+回车,再次测试,这下虫虫变色啦。这一步我们学习了如何使用编程的方式为虫虫变色,下一步,我们制作交互的动画,让朋友们可以通过拉动拉杆为它自动变色。

Photoshop结合Flash制作瓢虫变色交互动画(3)

我们来制作一个拉钮,建立一个新层,用椭圆工具,按Shift键,画一个小圆形,设置这个层的名字为“拉杆”。

Photoshop结合Flash制作瓢虫变色交互动画(3)

还是用刚才的方法,框选这个圆,点右键,转换为一个电影剪辑。命名为“拉杆”,我们可以按着Alt键,用移动工具复制两个。现在一共有三个拉钮啦。

Photoshop结合Flash制作瓢虫变色交互动画(3)

我们还使用刚才手动改变虫虫颜色的方法,改变这三个按钮,把它们的颜色改为红,绿,蓝三色。并分别按颜色命名为:rr,gg,bb。这样,我们就在舞台上放了三个具有名字的实体了,我们可以用程序控制这三个实体来改变RGB值,从而实时的反映到虫虫身上。

Photoshop结合Flash制作瓢虫变色交互动画(3)

下面我们为这三个拉钮引用的共同目标进行编辑,这样三个拉钮就会同步更新。这也是Flash强大之处,所有引用同一个元件的实体,都会因为改变这个元件而被同步更新。双击库中的“拉杆”电影剪辑,进入这个元件进行更改。从图示标注来看,我们现在已经离开舞台,进入这个元件,单独编辑它啦。

Photoshop结合Flash制作瓢虫变色交互动画(3)

在这个元件里,有我们前面画的黑色圆形,我们框选它,用右键,使用转换为元件的方法,把它转换为一个电影剪辑,起名为“按钮”,并在属性栏里为它起一个实体名“an”,意思是按钮。这样我们就让红绿蓝三色拉钮中,都增加了一个实体,名叫“an”。

Photoshop结合Flash制作瓢虫变色交互动画(3)

这部分理解起来会很难,但是一旦理解了它,后面我们就可以制作出非常强大的交互动画。

前面做的一切,就是在做一个嵌套的电影剪辑,也就是电影内部套着电影。因为电影剪辑可以被用程序赋予颜色,设置大小,设置运动动画等,所以使用频率非常高。我们为什么要做嵌套电影呢?这是因为我们后面编程时,如果设置按钮坐标时,我们可以以电影剪辑内的坐标为准,而不是以舞台的坐标为准,防止按钮挤成一堆。

好,回到舞台中,修改第一帧的程序:

_root.onEnterFrame=function(){ //只要一开始动画,就执行大括号里的程序
colora=new Color(_root.sk);
colora.setRGB(rgb);
rgb=(r<<16|g<<8|b);  //设置色块电影的颜色
r=_root.rr.an._y;    //设置按钮的坐标与红色值相交互


_root.rr.onPress=function(){  //如果在红色按钮上按下鼠标左键
        _root.rr.an.startDrag(true,0,0,0,255);  //红色按钮中嵌套的“an”电影实体可以被鼠标拖动,范围是纵向255像素
}
onMouseUp=function(){
        _root.rr.stopDrag();  //如果鼠标松开,停止拖动
}
}

Photoshop结合Flash制作瓢虫变色交互动画(3)

按Ctrl+回车试一下吧,哈哈,红色按钮可以向下拖动啦。并且虫虫随之变色。

Photoshop结合Flash制作瓢虫变色交互动画(3)

只要测试成功一个,其他的就好办,复制部分代码,一改就OK了。看一下最终的代码吧。

_root.onEnterFrame=function(){ //只要一开始动画,就执行大括号里的程序
colora=new Color(_root.sk);
colora.setRGB(rgb);
rgb=(r<<16|g<<8|b);  //设置色块电影的颜色
r=_root.rr.an._y;    //设置按钮的坐标与红色值相交互
g=_root.gg.an._y; 
b=_root.bb.an._y; 
_root.rr.onPress=function(){
        _root.rr.an.startDrag(true,0,0,0,255);
}

_root.gg.onPress=function(){
        _root.gg.an.startDrag(true,0,0,0,255);
}

_root.bb.onPress=function(){
        _root.bb.an.startDrag(true,0,0,0,255);
}



onMouseUp=function(){
        _root.rr.stopDrag();
        _root.gg.stopDrag();
        _root.bb.stopDrag();
}
}

我就不写那么多注释啦,看懂前面的,后面的一看就明白。

Photoshop结合Flash制作瓢虫变色交互动画(3)

这是测试结果,可以自已设置RGB的值。

Photoshop结合Flash制作瓢虫变色交互动画(3)

这里我提供大家我做好的一张背景图,大家也可以自己找找素材,做出更漂亮的背景放在底部。

Photoshop结合Flash制作瓢虫变色交互动画(3)

在最底层,使用导入到舞台的方法,把背景层导入进来并对齐。可以看到,虫虫就融合在背景中啦。

Photoshop结合Flash制作瓢虫变色交互动画(3)

最后导出来SWF文件,使用“文件”-“导出”-“导出影片”,将这个文件导出为最终作品。

Flash源文件下载:点击这里下载源文件
关键词:flash,photoshop
推荐给好友】【关闭】【收藏本文
最新五条评论
查看全部评论
评论总数 0
您的评论
用户名: 新注册) 密 码: 匿名:
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为
站内搜索
相关文章
推荐文章