这是一个用Flash制作的漂亮的互动相册程,今天简单给大家描述下这个相册的制作过程。
效果如下:
[flash=550,350]http://www.webjx.com/upfiles/20070721/20070721223521_webjxcom.swf[/flash]
[flash=550,350]http://www.webjx.com/upfiles/20070721/20070721223521_webjxcom.swf[/flash]
用鼠标点击左边的小图,就能看到图片切换的精彩画面
下面给大家简单讲述一下制作过程。
首先修改文档属性。

制作一个影片剪辑当作该相册的背景,非常简单的!效果如下。

下面我们就要准备好图片的缩略图,并且转变为MC,然后在舞台上排放整齐,并且给每个影片剪辑命名实例名thumb0,thumb1,...,thumb7。

然后把图片转换为影片剪辑,设置如下。

然后制作一个遮照影片剪辑。

然后建立一个Action层。

第一帧的ActionScript如下。
order = [["0", "1", "2", "3", "4", "5", "6", "7"],
["6", "0", "5", "7", "3", "1", "2", "4"],
["4",
"7", "5", "2", "0", "3", "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;
};
按Ctrl+Enter测试吧!