网页教学网
 当前位置: 网页教学网 >> 动画制作 >> Flash实例教学 >> Flash制作简单的方形收缩的变换像册特效
[ HTML ] [ FW ] [ DW ] [ FP ] [ JS ] [ XML ] [ CSS ] [ 图象 ] [ FLASH ] [ .NET ] [ ASP ] [ JSP ] [ PHP ] [ 数据 ] [ 系统 ] [ 安全 ] [ 素材 ] [ 建站 ] [ 主机 ] [ 入门 ] [ 技巧 ]

Flash制作简单的方形收缩的变换像册特效

http://www.webjx.com  更新日期:2007-10-04 23:48  出处:网页教学网  作者:闪电儿

用Flash简单制作一个像册效果,本教程因为给大家提供了源文件,所以只是给大家简单的讲解制作过程,希望大家掌握制作的方法。

效果和Fla源文件如下:(单击动画演示中的小图可以看到效果)

Flash源文件下载:点击这里下载Fla源文件(大小1M,自行杀毒)

制作步骤:

1、首先建立一个蒙板(遮照)影片剪辑。

Flash制作简单的方形收缩的变换像册特效

2、然后从外部导入图片,把导入的图片转变为影片剪辑,设置如下。

Flash制作简单的方形收缩的变换像册特效

3、制作小的图片缩略图,也分别转换为影片剪辑,设置如下。

Flash制作简单的方形收缩的变换像册特效

4、添加Actionscript,如下代码:

imageHeight = 280;
imageWidth = 360;
rows = 6;
boxWidth = imageWidth/rows;
boxHeight = imageHeight/rows;
imageTotal = 5;
thumbHeight = 56;
thumbWidth = 72;
padding = 20;
depth = 0;
newPos = 0;
boxSpeed = 2;
this.createEmptyMovieClip("boxes", 4004);
this.createEmptyMovieClip("top", 4003);
top.setMask(boxes);
mask = this.attachMovie("box", "mask", 4002);
mask._width = imageWidth;
mask._height = imageHeight;
mask._x = padding+(mask._width/2);
mask._y = padding+(mask._height/2);
this.createEmptyMovieClip("bottom", 4001);
bottom.setMask(mask);
shrink = false
function addBoxes() {
 for (var i = 0; i<rows; i++) {
  for (var j = 0; j<rows; j++) {
   var b = boxes.attachMovie("box", "box"+depth, depth);
   b._width = boxWidth;
   b._height = boxHeight;
   b._x = (boxWidth/2)+padding+(boxWidth*i);
   b._y = (boxHeight/2)+padding+(boxHeight*j);
   depth++;
  }
 }
}
function resetBoxes() {
 for (var i = 0; i<(rows*rows); i++) {
  boxes["box"+i]._width = boxWidth;
  boxes["box"+i]._height = boxHeight;
 }
}
function shrinkBoxes() {
 if (shrink) {
  for (var i = 0; i<depth; i++) {
   var b = boxes["box"+i];
   if (b._width>0) {
    b._width -= boxSpeed;
    b._height -= boxSpeed;
   }
   if (b._width < 1) {
    shrink = false;
    resetBoxes();
    top._x = newPos;
    break;
   }
  }
 }
}
function addImages() {
 for (var k = 0; k<imageTotal; k++) {
  var m = top.attachMovie("image_"+k, "image_"+k, depth);
  depth++;
  var b = bottom.attachMovie("image_"+k, "image_"+k, depth);
  depth++;
  m._x = b._x=padding+(mask._width*k);
  m._y = b._y=padding;
  var t = this.attachMovie("thumb_"+k, "thumb_"+k, depth);
  depth++;
  t._x = padding+(thumbWidth*k);
  t._y = (padding*2)+imageHeight;
  t.pos = k*-imageWidth;
  t.onPress = function() {
   if (newPos != this.pos) {
    if (!shrink) {
     bottom._x = newPos=this.pos;
     shrink = true;
    }
   }
  };
 }
}
addBoxes();
addImages();
this.onEnterFrame = function() {
 shrinkBoxes();
};

最后可以测试!如果有不明白的地方下载源文件自己研究吧!

关键词:flash,像册
推荐给好友】【关闭】【收藏本文
最新五条评论
查看全部评论
评论总数 0
您的评论
用户名: 新注册) 密 码: 匿名:
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为