设为首页
收藏本站
网站地图
网站首页 走进从化 新闻动态 从化旅游 专题聚焦 生活之窗 IT世界 企业之窗 图片中心 网站留言 关于我们
热门关键字:从化地图 从化温泉 森林公园 从化景点 酒店 荔枝
精 彩 推 荐
热 点 文 章
·如何在FLASH中打开新窗口(可
·flash图片效果系列之一
·优秀网站设计的51条原则(一
·一种flash鼠标跟随效果
·四种简单保存网页Flash动画
·网页背景设计技巧大全
·给你的网页盖个章
·Dreamweaver MX 2004一句话
相 关 文 章
·和Flash初学者详谈Loading的
·导航上用CSS标志当前页效果
·点按钮,让任意场景(含单个场
·CSS技巧学习:像table一样布
·Fireworks 制作纸张卷边效果
·Fireworks 简单制作羽毛
·表格中单元格之间分隔线的隐
·表格边框魔鬼教程
当前位置:网站首页 > IT世界 > 设计专栏 > 网页设计 >  正文

Flash制作鼠标点击滚动效果相册

文章来源:网页教学网 文章作者: 发布时间:2007-05-25

  本文中我们用Flash打造一个精美互动相册,用鼠标点击就能产生卷动过渡效果,希望大家喜欢。

  先看效果:

  

点击这里下载Fla源文件

  制作方法:

  首先新建立Flash文档,然后修改文档属性:

  

 按此在新窗口浏览图片

  我们制作的这个图库,大家通过演示可以看到单击小图,可以动态显示大图,所以我们事先要做一些工作。准备一些大小相同的图片8张,并且分别制作相应的缩略图8张,大图导入Flash中分别转换为影片剪辑元件,小缩略图导入Flash后转变为影片剪辑元件,都放到库里面,留着我们来使用。

  这里我们制作一个main主影片剪辑,然后在里面制作一个背景:

  

按此在新窗口浏览图片 

  然后再新建立一个层,把缩略图都按顺序摆放整齐,实例名分别是thumb0、thumb1、thumb2、thumb3、thumb4、thumb5、thumb6、thumb7:

  

 按此在新窗口浏览图片

  当把大图导入Flash时,按F8转变为影片剪辑元件,标示符分别是image0、image1、image2、image3、image4、image5、image6、image7。设置如下:

  

按此在新窗口浏览图片 

  然后再建立一个层,输入下面代码:

 this.createEmptyMovieClip("images", 100);
this.attachMovie("mask", "mask", 101);
mask._x = images._x =-68;
mask._y = target = -150;
images._y = -1000;
images.setMask(mask);
speed = 5;
for (var i = 0; i<8; i++) {
 var img = images.attachMovie("image"+i, "image"+i, i);
 img._y = img._height*i;
 var thumb = this["thumb"+i];
 thumb._alpha = 60;
 thumb.pos = target+(i*-img._height);
 thumb.onPress = function() {
  target = this.pos;
 };
 thumb.onRollOver = function() {
  this._alpha = 100;
 };
 thumb.onRollOut = function() {
  this._alpha = 60;
 };
}
this.onEnterFrame = function() {
 images._y += (target-images._y)/speed;
};

  最后我又制作了一个loading。

 
用户名: 新注册) 密码: 匿名评论 [所有评论]
评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。
§最新评论:
站长邮箱: 联系电话:15914291233