在网页中渐变图片展示的flash 源码

最新推荐文章于 2024-07-12 16:27:40 发布

lq_0402

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量3.2k

点赞数

文章标签： flash function image javascript import object

本文链接：https://blog.csdn.net/lq_0402/article/details/3723606

版权

制作如上图所示的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;
}

lq_0402

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在网页中渐变图片展示的flash 源码

制作如上图所示的flash动画，其中图片自动切换，并且切换的效果是随机的，当上面大图显示时，下面的相应的小图的透明度变为100.否则为60。其中的图片的地址、和点击图片的链接由html网页的JavaScript传进来（注意：JavaScript传来的变量的值是String类型）。 // 网页中的代码 // 控制网页中 flash 的大小 var width =
复制链接

扫一扫