作前准备
准备十张规格为340*300的,做相册的图片,和一张规格约为600*400的,适合制作边框的图片,经过制图软件(ps、fw)处理后,放在指定的文件夹待用。
1.启动FLASH8 软件。
2.确立文档属性 设置动画尺寸为600*400,其它默认,点击确定,进入场景1。如图1所示:
图1
3.首先将准备好的11张素材图片导入到库中,待用。
4.创建影片剪辑
(1)选择“插入-新建元件-高级”,如图2所示:
图2
打开元件属性、链接面板,建立一个名为“image1”的影片剪辑元件,属性链接参数,如图3所示:
图3
点击确定,进入元件编辑区。就一个图层。
选择图层1第一帧,从库中拖出图片1到舞台,规格340*300,上对齐-水平中齐。如图4、5所示:
图4
图5
同理同种方法创建名为“image2-image10”,的影片剪辑元件,完成图片2-10的操作。
(2)选择“插入-新建元件-高级”,打开元件属性、链接面板,建立一个名为“mask”的影片剪辑元件,属性链接参数,如图6所示:
图6
点击确定,进入元件编辑区。就一个图层。
选择图层1第一帧,用矩形工具在舞台拖一个规格为336*100的,无边线的矩形,颜色随意,上对齐-水平中齐。如图7、8所示:
图7
图8
(3)选择“插入-新建元件”,建立一个名为“01”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。
选择图层1第一帧,从库中再拖出图片1到舞台,规格60*53,左对齐-垂直中齐。如图9、10所示:
图9
图10
同理同种方法创建名为“02-10”,的影片剪辑元件,完成图片2-10的操作。
(4)选择“插入-新建元件”,建立一个名为“边框”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。
选择图层1第一帧,从库中拖出那个适合做边框的图片到舞台,规格600*400,全居中(图11-1),将其打散;用矩形工具在图片外拖一个规格为520*320的,无边线的矩形,颜色随意,点击“修改-变形-组合”(或将其转换为元件),全居中(图11-2);再将其打散(图11-3)后;删除(图11-4)。其流程,如图11所示:
图11
5.编辑制作场景
返回场景1,添加三个图层,共四个图层。自下而上命名为背景、小图、边框、as。
(1)选择背景图层第一帧,导入或制作一个背景到舞台,规格600*400,全居中,上锁。如图12所示:
12
(2)选择小图图层第一帧,从库中依次拖出01-10影片剪辑元件到舞台,摆放在背景的右侧。如图13所示:
图13
其总体规格和位置可参考,如图14所示:
图14
分别依次选中各个小图,在属性面板填写其实例名称为:thumb1-thumb10 。上锁。如图15所示:
图15
(3)选择边框图层第一帧,从库中拖出边框影片剪辑元件到舞台,规格600*400,全居中。打开属性面板的滤镜,设置其参数,如图16所示:
图16
舞台实例显示,如图17所示:
图17
(4)选择as图层第一帧,按f9,打开动作面板,在as编辑区输入,如下帧语句:
order = [['10', '1', '2', '3', '4', '5', '6', '7','8', '9'],
['6', '10', '5', '4', '3', '8', '1', '9', '2', '7'],
['8', '9', '7', '2', '10', '3', '4', '5', '6', '1']];
for (var j = 0; j<order.length; j++) {
var i = this.createEmptyMovieClip('images'+j, j);
var m = this.attachMovie('mask', 'mask'+j, 100+j);
m._x = 224
target0=target1=target2=223;
m._y = 57+(90*j);
i._y = 57;
i.setMask(m);
for (var k = 0; k<order[0].length; k++) {
var img = i.attachMovie('image'+order[j][k], 'image'+k, 1000+k);
img._x = (img._width*k);
var thumb = this['thumb'+order[j][k]];
thumb['pos'+j] = target1+(k*-img._width);
thumb.onPress = function() {
_root.target0 = this.pos0;
_root.target1 = this.pos1;
_root.target2 = this.pos2;
};
thumb.onRollOver = function() {
this._alpha = 60;
};
thumb.onRollOut = function() {
this._alpha = 100;
};
}
}
target0 = thumb4.pos0;
target1 = thumb4.pos1;
target2 = thumb4.pos2;
speed = 10;
this.onEnterFrame = function() {
images0._x += ((target0)-images0._x)/speed;
images1._x += ((target1)-images1._x)/speed;
images2._x += ((target2)-images2._x)/speed;
};
锁定该图层。
图15
7.测试存盘
*说明:
1.大图影片剪辑没有进入场景1,它们是通过其属性链接和脚本来控制的。
2.测试中如果三重切换不理想,可调换一下小图的排列位置,直到你满意为止。
最终效果显示:
http://hsb456.16789.net/s-helpSite/domName/hsb456/20102191854422902.swf
祝你成功!
联系客服