论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Flash教程
Tag:flash cs,flash 8,鼠绘,as,手绘,工具,文字,loading,入门,初学,mc,影片剪辑,声音,mtv,游戏,引导,遮罩,菜单,补间,广告条,时钟,视频教程

图片展览滚动效果

文章类别:Flash | 发表日期:2008-9-21 20:09:45

  
转载请注明作者,谢谢!
/UploadTeach/200710/20071008173817516.swf

制作思路:
             (1):构建好XML文件,进行载入判定,取得xml节点
             (2):在一个大的影片剪辑内,进行复制要加载图片的影片剪辑,按X轴方向水平排列
             (3):使用[被遮照的影片剪辑.setMask(遮照的影片剪辑)] 创建遮照效果
             (4):滚动区域的判定
stop();
System.useCodepage = true;
var link_xml:XML = new XML();
link_xml.ignoreWhite = true;
link_xml.onLoad = function(success) {
if (success) {
  //trace(this);
  nextFrame();
} else {
  trace("Error loading XML");
}
};
link_xml.load("content_xml.as");

/**
* Description 版权所有2007@lbynet http://www.www.52hai.com/User0/140
* @author _lby
* @version 0.1
* @discription:图片展览滚动效果;
*/
stop();
var _this = _root.link_xml.firstChild;
var len:Number = _this.childNodes.length;
//trace(len);
var img_path_arr:Array = [];
var link_arr:Array = [];
Loader_fun = function () {
for (var i:Number = 0; i<len; i++) {
  img_path_arr[i] = _this.childNodes[i].childNodes[0].childNodes[0].nodeValue;
  link_arr[i] = _this.childNodes[i].childNodes[1].childNodes[0].nodeValue;
  //进行copy影片剪辑排列
  content_mc.image_mc.duplicateMovieClip("image_mc"+i, 100+i);
  content_mc.image_mc._visible = false;
  content_mc["image_mc"+i]._x = content_mc.image_mc._width*i;
  content_mc["image_mc"+i]._y = 0;
  //加载图片;
  var mc:MovieClip = content_mc["image_mc"+i];
  mc.i = i;
  mc._alpha = 60;
  mc.onRollOver = function() {
   this._alpha = 100;
   trace(this.i);
   
  };
  mc.onRollOut = function() {
   this._alpha = 60;
  };
  mc.onRelease = function() {
   getURL(link_arr[this.i]);
  };
  var loadListener:Object = new Object();
  //参数mc为当前被加载进来的,这里为content_mc["image_mc"+i].load_mc
  loadListener.onLoadComplete = function(mc:MovieClip) {
   mc._parent.preloader._visible = false;
  };
  loadListener.onLoadError = function(mc:MovieClip) {
   mc._parent.preloader._visible = true;
   trace("加载图片失败");
  };
  if (img_path_arr != null && img_path_arr != "" && img_path_arr != undefined) {
   var imgLoader:MovieClipLoader = new MovieClipLoader();
   imgLoader.addListener(loadListener);
   imgLoader.loadClip(img_path_arr[i], content_mc["image_mc"+i].load_mc);
  }
}
};
Loader_fun();
content_mc.setMask(mask_mc);
/*
//自定义滚动类
import DragRegion;
new DragRegion(content_mc,mask_mc);
*/
/* 滚动判定 */
content_mc.onEnterFrame = function() {
this._x = -((this._width-mask_mc._width)/mask_mc._width)*mask_mc._xmouse;
//trace(this._x);
if (this._x<-(100*len-500)) {
  //超出的为100*len-500
  this._x = -(100*len-500);
} else if (this._x>-50) {
  this._x = 0;
}
};
补充下面部分,如有错,请指正:



认真分析下面图解也不难理解:
this._x = -((this._width-mask_mc._width)/mask_mc._width)*mask_mc._xmouse;
因为content_mc 与 mask_mc 的高度一样,所以只要根据上面表达式求得 content_mc的x坐标 与 mask_mc._xmouse之间的关系
content_mc 与 mask_mc 的宽度之差 ,得到多出来的部分宽度,如上图所示的R1
再除于 mask_mc 的宽度,得到一个比例,这个比例是多出部分占mask_mc的百分比
这个比较等价于 mask_mc._xmouse(将作为鼠标在 mask_mc上移动的偏移距离量) 与 content_mc._x 的比例   
所以得到:
this._x = -((this._width-mask_mc._width)/mask_mc._width)*mask_mc._xmouse;
this是指content_mc.

XML文件:

1.jpg (19.12 KB)
  1
 
2.jpg (16.68 KB)
  2
 
3.jpg (18.11 KB)
  3
 
4.jpg (16.76 KB)
  4
 
5.jpg (16.85 KB)
  5
 
lbynet.jpg (13.73 KB)
  效果图片

源文件下载: 图片展览滚动.rar

进入论坛和作者讨论学习:http://space.flash8.net/bbs/thread-342918-1-1.html
视频教程列表
文章教程搜索
 
Flash推荐教程
Flash热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058