三重切换相册的制作原理与过程

喜鵲回巢 2015-11-25

展开全文

作前准备

准备十张规格为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所示：

（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;
};