制作如上图所示的flash动画,其中图片自动切换,并且切换的效果是随机的,当上面大图显示时,下面的相应的小图的透明度变为100.否则为60。其中的图片的地址、和点击图片的链接由html网页的JavaScript传进来(注意:JavaScript传来的变量的值是String类型)。
// 网页中的代码
// 控制网页中 flash 的大小
var width = 466;
var height = 300;
var bgColor = "FFFFFF"; // flash 的背景颜色
// 以下变量作为 参数传入 flash中
var number = 5; // 图片的张数
var swfWidth=466; // flash 的宽 !!请勿修改!!
var swfHeight=300; // flash 的高 !!请勿修改!!
var imageTopWidth = swfWidth; // 上面大图的宽 !!请勿修改!!
var imageTopHeight = swfHeight-50; // 上面大图的高 !!请勿修改!!
var imageSmallHeight = 46; // 下面小图的高 !!请勿修改!!
var imageSmallWidth = 90; // 下面小图的宽 约等于 swfWidth/number
var imageBList = new Array();
imageBList[0] = "js/lq/1.jpg"; // 下面大图地址 可以修改 但得图片大小得与上面定义的一致
imageBList[1] = "js/lq/2.jpg";
imageBList[2] = "js/lq/3.jpg";
imageBList[3] = "js/lq/4.jpg";
imageBList[4] = "js/lq/5.jpg";
var imageSList = new Array();
imageSList[0] = "js/lq/10.jpg"; // 上面小图地址 可以修改 但得图片大小得与上面定义的一致
imageSList[1] = "js/lq/20.jpg";
imageSList[2] = "js/lq/30.jpg";
imageSList[3] = "js/lq/40.jpg";
imageSList[4] = "js/lq/50.jpg";
var imageLink = new Array();
imageLink[0] = "i0.html"; // 点击图片相应的链接地址
imageLink[1] = "i1.html";
imageLink[2] = "i2.html";
imageLink[3] = "i3.html";
imageLink[4] = "i4.html";
/* imageSList[] imageBList[] and imageLink[] 请保持序号一致 */
var imageSmall = "";
for(var i=0; i<imageSList.length; i++)
imageSmall += imageSList[i]+"|";
var imageBig = "";
for(i=0; i<imageBList.length; i++)
imageBig += imageBList[i]+"|";
var imageLinkString = "";
for(i=0; i<imageLink.length; i++)
imageLinkString += imageLink[i]+"|";
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="'+width+'" height="'+height+'" id="flash" align="middle">');
document.write('<param name="allowScriptAccess" value="sameDomain" />');
document.write('<param name="movie" value="js/flash.swf" />');
document.write('<param name="quality" value="high" />');
document.write('<param name="bgcolor" value="#'+bgColor+'" />');
document.write('<param name="FlashVars" value="imageNumber='+number+'&imageSString='+imageSmall+'&imageBString='+imageBig+'&linkString='+imageLinkString+'&bottomWidth='+imageSmallWidth+'&bottomHeight='+imageSmallHeight+'&topWidth='+imageTopWidth+'&topHeight='+imageTopHeight+'&Width='+swfWidth+'&Height='+swfHeight+'">');
document.write('<embed src="js/flash.swf" quality="high" bgcolor="#'+bgColor+'" width="'+width+'" height="'+height+'" name="flash" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="FlashVars" value="imageNumber='+number+'&imageSString='+imageSmall+'&imageBString='+imageBig+'&linkString='+imageLinkString+'&bottomWidth='+imageSmallWidth+'&bottomHeight='+imageSmallHeight+'&topWidth='+imageTopWidth+'&topHeight='+imageTopHeight+'&Width='+swfWidth+'&Height='+swfHeight+'" />');
document.write('</object>');
/* **************************************************************************** */
// flash动作控制代码
import mx.managers.DepthManager; // 管理深度的类
import mx.transitions.*; // 过渡效果的类
import mx.transitions.easing.*;
//import mx.transitions.Tween;
以下if语句用户调试用,假如
/*
if(imageNumber==undefined){
imageNum = 5; // 小图的张数
bottomWidth = 90; // 下面小图的宽度
bottomHeight = 46;
topWidth = 466; // 顶部图片的宽度
topHeight = 250;
Width = 466; //swf文件的总宽度
Height = 300;
imageBString = "lq/1.jpg|lq/2.jpg|lq/3.jpg|lq/4.jpg|lq/5.jpg|";
imageSString = "lq/10.jpg|lq/20.jpg|lq/30.jpg|lq/40.jpg|lq/50.jpg|";
linkString = "渐变动画.html|渐变动画.html|渐变动画.html|渐变动画.html|渐变动画.html|";
}
*/
// 将中网页传入的变量转化成 数字,以控制 剪辑的大小及位置
// swfWidth 最好等于 topWidth+2
var swfWidth:Number = Number(Width);
var swfHeight:Number= Number(Height);
var bottomW:Number = Number(bottomWidth);
var bottomH:Number = Number(bottomHeight);
var topW:Number = Number(topWidth);
var topH:Number = Number(topHeight);
if(imageNumber!=undefined)
var imageNum:Number = Number(imageNumber);
Stage.scaleMode = "exactFit"; // 当调整flash的大小时,自动适应窗口的大小
var i = 0;
var speed = 3000; // 图片转换的时间间隔
var speed2 = 200; //
var alpha = 60; // 下面小图的透明度
var deep = 5;
var topBox:Array = Array();
for( i=0; i<imageNum; i++){
topBox[imageNum-i-1] = this.createEmptyMovieClip("top"+i+"_mc", deep++)
topBox[imageNum-i-1].createEmptyMovieClip("image_mc", deep++);
}
var imageBox:Array = Array();
for( i=0; i<imageNum; i++){
imageBox[i] = this.createEmptyMovieClip("image"+i+"_mc", deep++)
imageBox[i].createEmptyMovieClip("image_mc", deep++);
}
// 剪辑定位
frame_mc._x = 3; // 为框架定位
frame_mc._y = 3;
frame_mc._width = swfWidth;
frame_mc._height = swfHeight+3;
line_mc._width = swfWidth-3; // 大图与小图的分割线定位
line_mc._height = 3;
line_mc._x = 0;
line_mc._y = swfHeight-bottomH-1;
line_mc.setDepthTo(DepthManager.kTop);
frame_mc.setDepthTo(DepthManager.kTop);
// 剪辑定位
var jj = Math.floor((swfWidth-topW)/2);
for(i=0; i<imageNum; i++){
topBox[i]._x = jj;
topBox[i]._y = 5;
}
jj = (swfWidth-(bottomW+2)*imageNum)/2;
for(i=0; i<imageNum; i++){
var w = jj+(bottomW+2)*i;
// var h = top_mc._y+topH+3;
var h = swfHeight-bottomH;
imageBox[i]._x = Math.floor(w);
imageBox[i]._y = Math.floor(h);
}
// 替上面的大图赋值 路径
var imageArrayB = new Array();
for(i=0; i<imageNum; i++){
var pos:Number = imageBString.indexOf("|");
imageArrayB[i] = imageBString.substring(0,pos);
imageBString = imageBString.substring(pos+1);
}
// 替下面的小图赋值 路径
var imageArrayS = new Array();
for(i=0; i<imageNum; i++){
var pos:Number = imageSString.indexOf("|");
imageArrayS[i] = imageSString.substring(0,pos);
imageSString = imageSString.substring(pos+1);
}
// 得到图片的 链接
var linkArray = new Array();
for(i=0; i<imageNum; i++){
var pos:Number = linkString.indexOf("|");
linkArray[i] = linkString.substring(0,pos);
linkString = linkString.substring(pos+1);
}
// 初始图片为 0 号位置的图片
var count = imageNum;
for(i=0; i<imageNum; i++){
loadMovie(imageArrayB[i], topBox[i].image_mc);
loadMovie(imageArrayS[i], imageBox[i].image_mc);
if( i!=(count%imageNum) )
imageBox[i]._alpha = alpha;
else
imageBox[i]._alpha = 100;
}
// 过渡效果
function xiaoguo(ii:Number){
trace(ii);
switch(ii){
case 0:
// 溶解
TransitionManager.start(topBox[(count)%imageNum].image_mc, {type:PixelDissolve, direction:Transition.IN, duration:1, easing:None.easeNone, xSections:10, ySections:10}); break;
case 1:
// 窗帘
TransitionManager.start(topBox[(count)%imageNum].image_mc, {type:Blinds, direction:Transition.IN, duration:1, easing:None.easeNone, numStrips:10, dimension:1}); break;
case 2:
// 划入/划出
TransitionManager.start(topBox[(count)%imageNum].image_mc, {type:Wipe, direction:Transition.IN, duration:1, easing:None.easeNone, startPoint:1}); break;
case 3:
// 淡化
TransitionManager.start(topBox[(count)%imageNum].image_mc, {type:Fade, direction:Transition.IN, duration:1, easing:None.easeNone}); break;
case 4:
// 飞行
TransitionManager.start(topBox[(count)%imageNum].image_mc, {type:Fly, direction:Transition.IN, duration:1, easing:Elastic.easeOut, startPoint:9}); break;
case 5:
// 光圈
TransitionManager.start(topBox[(count)%imageNum].image_mc, {type:Iris, direction:Transition.IN, duration:1, easing:Strong.easeOut, startPoint:5, shape:Iris.CIRCLE}); break;
// case 6:
// 照片
// TransitionManager.start(topBox[(count)%imageNum].image_mc, {type:Photo, direction:Transition.IN, duration:1, easing:None.easeNone}); break;
case 7:
// 旋转
TransitionManager.start(topBox[(count)%imageNum].image_mc, {type:Rotate, direction:Transition.IN, duration:1, easing:Strong.easeInOut, ccw:false, degrees:720}); break;
case 8:
// 挤压
TransitionManager.start(topBox[(count)%imageNum].image_mc, {type:Squeeze, direction:Transition.IN, duration:1, easing:Elastic.easeOut, dimension:1}); break;
case 9:
// 缩放
TransitionManager.start(topBox[(count)%imageNum].image_mc, {type:Zoom, direction:Transition.IN, duration:1, easing:Elastic.easeOut}); break;
case 10:
// 窗帘
TransitionManager.start(topBox[(count)%imageNum].image_mc, {type:Blinds, direction:Transition.IN, duration:1, easing:None.easeNone, numStrips:10, dimension:0}); break;
}
}
// 控制图片切换的函数
function changeImage(){
count++;
topBox[(count-1)%imageNum].setDepthTo(DepthManager.kTop);
topBox[(count%imageNum)].setDepthTo(DepthManager.kTop);
frame_mc.setDepthTo(DepthManager.kTop);
line_mc.setDepthTo(DepthManager.kTop);
xiaoguo(Math.floor(Math.random()*11));
imageBox[(count-1)%imageNum]._alpha = alpha;
imageBox[(count)%imageNum]._alpha = 100;
}
var id = setInterval(this, "changeImage", speed);
// 设置下面小图各剪辑的相应事件响应函数
for(i=0; i<imageNum; i++){
// 鼠标移动 剪辑上时调用该函数
imageBox[i].onRollOver = function (){
clearInterval(id);
topBox[count%imageNum].setDepthTo(DepthManager.kTop);
for(var j=0; j<imageNum; j++){
imageBox[j]._alpha = alpha;
if(imageBox[j] == this)
count = j;
}
this._alpha = 100;
topBox[count%imageNum].setDepthTo(DepthManager.kTop);
frame_mc.setDepthTo(DepthManager.kTop);
line_mc.setDepthTo(DepthManager.kTop);
xiaoguo(Math.floor(Math.random()*11));
}
// 鼠标移出剪辑事调用该函数
imageBox[i].onRollOut = function (){
id = setInterval(this._parent, "changeImage", speed);
}
// 点击该剪辑时调用该函数
imageBox[i].onRelease = function (){
getURL(linkArray[count%imageNum],"_blank");
}
}
// 设置下面小图各剪辑的相应事件响应函数
// 点击该剪辑是调用该函数 看下面的onRelash 事件响应函数
function topmcOnR (){
getURL(linkArray[count%imageNum],"_blank");
}
// 鼠标移到该剪辑上是调用该函数 onRollOver
function topmcOnRO(){
clearInterval(id);
for(var j=0; j<imageNum; j++){
set("image"+j+"_mc._alpha", alpha);
if(imageBox[j] == this)
count = j;
}
imageBox[count]._alpha = 100;
}
// onRollOut 函数
function topmcOnRout(){
id = setInterval(this._parent, "changeImage", speed);
}
for(i=0; i<imageNum; i++){
topBox[i].onRelease = topmcOnR;
topBox[i].onRollOver = topmcOnRO;
topBox[i].onRollOut = topmcOnRout;
}