收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2422|回复: 5

[视觉设计] 一个图片切换的特效(模仿)

[复制链接]
发表于 2008-2-22 01:32:10 | 显示全部楼层 |阅读模式
这个特效是回复http://bbs.blueidea.com/thread-2830602-1-1.html这一贴时做的
模仿的是http://www.websitetemplates.bz/flash-templates/386.html这里面的图片切换效果
个人感觉比较实用 所以优化了代码 重发一新贴  希望对大家有用

演示
图片切换.swf (186.1 KB, 下载次数: 365)
 楼主| 发表于 2008-2-22 14:11:15 | 显示全部楼层
又改进了一下
可以设置是水平移动还是纵向移动

我这里的是随机的
  1. //库链接元件 pic 放图片用 一帧一张
  2. //************************************
  3. //*******************************
  4. //图片数量
  5. var pic_sum:Number = 3;
  6. //是否水平移动
  7. var isHorizontal:Boolean;
  8. //图片宽
  9. var pic_width:Number = 400;
  10. //图片高
  11. var pic_height:Number = 550;
  12. //*******************************
  13. //图片层
  14. var pic_level:MovieClip = this.createEmptyMovieClip ("pic_level", 1);
  15. //遮罩层
  16. var mask_level:MovieClip;
  17. //透明度变化层
  18. var top_level:MovieClip;
  19. //*************
  20. //创建遮罩层和透明度变化层
  21. //f:用来判断是否是第一次出现图片
  22. function create_mask_and_top (f:Boolean) {
  23.         mask_level.removeMovieClip ();
  24.         top_level.removeMovieClip ();
  25.         mask_level = this.createEmptyMovieClip ("mask_level", 2);
  26.         top_level = this.createEmptyMovieClip ("top_level", 3);
  27.         //遮罩范围
  28.         var max_scope:Number = isHorizontal ? pic_width : pic_height;
  29.         var scope:Number = max_scope;
  30.        
  31.         var prop:String = isHorizontal ? "_x" : "_y";
  32.         //遮罩块尺寸
  33.         var size:Number;
  34.         //循环是否完毕
  35.         var ok:Boolean = false;
  36.         for (var i:Number = 0; !ok; i++) {
  37.                 //遮罩块
  38.                 var mbar:MovieClip = mask_level.createEmptyMovieClip ("bar" + i, i);
  39.                 //透明度变化块
  40.                 var tbar:MovieClip = top_level.createEmptyMovieClip ("bar" + i, i);
  41.                 //方向
  42.                 tbar.dir = random (2) ? -1 : 1;
  43.                 //初始坐标
  44.                 tbar[prop] = tbar.next_pos = mbar[prop] = tbar.dir == 1 ? -(random (100)) - 50 : max_scope + random (100);
  45.                 //最终坐标
  46.                 tbar.final_pos = max_scope - scope;
  47.                 tbar._alpha = f ? random (20) + 80 : random (20) + 10;
  48.                 //移动次数
  49.                 tbar.t = random (3) + 1;
  50.                 //开始延时
  51.                 tbar.d = random (30);
  52.                 //与停止点之间的距离,值越大越快结束移动
  53.                 tbar.diff = 5;
  54.                 //速度
  55.                 tbar.s = random (9) + 2;
  56.                 //对遮罩块的引用
  57.                 tbar.mbar = mbar;
  58.                 size = random (30) + 30;
  59.                 if (scope - size <= 0) {
  60.                         size = scope;
  61.                         ok = true;
  62.                 } else {
  63.                         scope -= size;
  64.                 }
  65.                 if (isHorizontal) {
  66.                         draw_rect (mbar, 0, 0, size, pic_height, 0xFFFFFF);
  67.                         draw_rect (tbar, 0, 0, size, pic_height, f ? 0x000000 : 0xFFFFFF);
  68.                 } else {
  69.                         draw_rect (mbar, 0, 0, pic_width, size, 0xFFFFFF);
  70.                         draw_rect (tbar, 0, 0, pic_width, size, f ? 0x000000 : 0xFFFFFF);
  71.                 }
  72.                 //改变透明度变化块的位置,并使遮罩块与其同步
  73.                 tbar.onEnterFrame = function () {
  74.                         if (--this.d < 0) {
  75.                                 this.mbar[prop] = this[prop] += (this.next_pos - this[prop]) / this.s;
  76.                                 this._alpha -= f ? 3 : .1;
  77.                         }
  78.                         if (this[prop] < this.next_pos + this.diff && this[prop] > this.next_pos - this.diff) {
  79.                                 if (this.t > 0) {
  80.                                         this.t -= 1;
  81.                                         if (this.t > 0) {
  82.                                                 this.next_pos = this.final_pos + this.dir * random (this.t * 30);
  83.                                                 //每次移动方向不同
  84.                                                 this.dir *= -1;
  85.                                                 //每次移动方向随机
  86.                                                 //this.dir = random (2) ? -1 : 1;
  87.                                         } else {
  88.                                                 this.next_pos = this.final_pos;
  89.                                                 this.diff = 1;
  90.                                         }
  91.                                         tbar.s = random (9) + 2;
  92.                                 } else if (this._alpha <= 0) {
  93.                                         this.mbar[prop] = this[prop] = this.next_pos;
  94.                                         delete this.onEnterFrame;
  95.                                 }
  96.                         }
  97.                 };
  98.         }
  99. }
  100. //画矩形
  101. function draw_rect (mc:MovieClip, posX:Number, posY:Number, width:Number, height:Number, color:Number):Void {
  102.         with (mc) {
  103.                 beginFill (color, 100);
  104.                 moveTo (posX, posY);
  105.                 lineTo (posX + width, posY);
  106.                 lineTo (posX + width, posY + height);
  107.                 lineTo (posX, posY + height);
  108.                 lineTo (posX, posY);
  109.                 endFill ();
  110.         }
  111. }
  112. //*************
  113. draw_rect (pic_level, 0, 0, 400, 550, 0x000000);
  114. var pic_arr:Array = new Array ();
  115. for (var i:Number = 0; i < pic_sum; i++) {
  116.         //将图片mc引用存入数组
  117.         pic_arr[i] = pic_level.attachMovie ("pic", "pic" + i, i, {_alpha:0});
  118.         pic_arr[i].gotoAndStop (i + 1);
  119. }
  120. //间隔
  121. var t:Number = 0;
  122. //图片更换次数
  123. var l:Number = 0;
  124. this.onEnterFrame = function () {
  125.         if (--t < 0) {
  126.                 t = 200;
  127.                 l++;
  128.                 //层级交替
  129.                 for (var i:Number = 1; i < pic_sum; i++) {
  130.                         pic_arr[0].swapDepths (pic_arr[i]);
  131.                 }
  132.                 pic_arr.push (pic_arr.shift ());
  133.                 isHorizontal = Boolean (random (2));
  134.                 create_mask_and_top (l == 1 ? true : false);
  135.                 pic_arr[pic_sum - 1]._alpha = l == 1 ? 100 : 0;
  136.                 pic_arr[pic_sum - 1].setMask (mask_level);
  137.         } else {
  138.                 pic_arr[pic_sum - 1]._alpha += 1.5;
  139.         }
  140. };
复制代码

[[i] 本帖最后由 boenlee 于 2008-2-22 14:24 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-2-22 20:43:13 | 显示全部楼层
问个问题:
代码中有这样一句:tbar.dir = random (2) ? -1 : 1;
我想知道 .dir 之前并未定义过。我想知道它代表什么?变量吗,还是其它的?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-2-23 00:33:46 | 显示全部楼层
是动态为tbar添加的属性  也就是变量
和后面的tbar.final_pos   tbar.t   tbar.d   tbar.diff一样的道理

这里一个tbar移动到最终位置的时候是要经过几次缓冲运动的
每次缓冲运动的终点都是在最终位置周围随机取值的
dir第一次赋值时 1代表tbar的初始坐标在舞台上边或左侧 运动方向就是上至下 左至右
-1则相反
在帧循环中dir的值表示next_pos的值是大于final_pos还是小于 也就是在final_pos的左侧还是右侧 上边还是下边

这次是不是好用了?
回复 支持 反对

使用道具 举报

发表于 2008-2-23 09:13:58 | 显示全部楼层
这几个MM真不错!   
效果不错,就是脚本太长了,看不懂
回复 支持 反对

使用道具 举报

发表于 2008-2-24 11:04:39 | 显示全部楼层
谢谢,楼主精彩的讲解。已经可以了!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-7-16 01:51 , Processed in 0.109100 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表