注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我的博客

一沙一世界,一花一天堂

 
 
 

日志

 
 

引用 flash制作:相册方块切换的效果  

2010-06-08 00:39:55|  分类: photoshop |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

引用

迎春flash制作:相册方块切换的效果

 

作前准备:

    准备九张相关上海世博场馆做相册的图片

用(ps)处理成规格都为360X312后放在指定的文件夹待用

 制作步履:

 1.启动FLASH8 软件

2.确立文档属性      设置动画尺寸为550X400,

背景颜色深绿,帧频24,其它默认,点击确定,进入场景1。

如图1所示:

flash制作:相册方块切换的效果 - 迎春 -
图1

    3.首先将准备好的九张有关上海世博馆的图片导入到库中待用

  4.创建影片剪辑

    (1)选择“插入-新建元件-高级”,如图2所示:

flash制作:相册方块切换的效果 - 迎春 -

图2

打开元件属性链接面板建立一个名为“image_0”的影片剪辑元件

属性链接参数 如图3所示:

flash制作:相册方块切换的效果 - 迎春 -

图3

点击确定后进入元件编辑区 就一个图层

    选择图层1第一帧,从库中拖出图片1到舞台,规格360X312,上对齐-左对齐。如图4、5所示:

flash制作:相册方块切换的效果 - 迎春 -

图4

flash制作:相册方块切换的效果 - 迎春 -

图5

同理同种方法创建名为“image_1-image_8”,的影片剪辑元件,

完成图片2-9的大图操作。

    (2)选择“插入-新建元件-高级”,打开元件属性、链接面板,

建立一个名为“thumb_0”的影片剪辑元件,属性链接参数,如图6所示:

flash制作:相册方块切换的效果 - 迎春 -

图6

点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧,从库中拖出图片1到舞台,规格60*52,上对齐-左对齐。

如图7、8所示:

flash制作:相册方块切换的效果 - 迎春 -

图7

flash制作:相册方块切换的效果 - 迎春 -

图8

同理同种方法创建名为“thumb_1-thumb_8”,的影片剪辑元件,

完成图片2-9的小图操作。

    (3)选择“插入-新建元件-高级”,打开元件属性、链接面板,

建立一个名为“box”的影片剪辑元件,属性链接参数,如图9所示:

flash制作:相册方块切换的效果 - 迎春 -

图9

点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧,用矩形工具在舞台拖一个规格为360*312的

无边线的矩形,颜色随意,全居中。如图10所示:

flash制作:相册方块切换的效果 - 迎春 -

图10

5.编辑制作场景

    返回场景1,添加两个图层,共三个图层。自下而上命名为矩形、文本、as。 

    (1)选择矩形图层第一帧,用矩形工具在舞台拖一个,规格158*312,

无边线的橙色矩形,将其放置在舞台的右侧偏上。上锁。如图11所示:

flash制作:相册方块切换的效果 - 迎春 -

图11

    (2)选择文本图层第一帧,用文本工具在矩形上输入竖向的“上海世博部分场馆

点击小图显示大图 迎春制作”。字体规格颜色自定。上锁。如图12所示:

flash制作:相册方块切换的效果 - 迎春 -

图12

    (3)选择as图层第一帧,按f9,打开动作面板,在as编辑区输入,如下帧语句:

imageHeight = 312;
imageWidth = 360;
rows = 6;
boxWidth = imageWidth/rows;
boxHeight = imageHeight/rows;
imageTotal = 9;
thumbHeight = 52;
thumbWidth = 58.5;
padding = 11;
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();
};

锁定该图层。

6.该作业完成后的时间轴如图13:

flash制作:相册方块切换的效果 - 迎春 -

图13

    7.测试存盘

  评论这张
 
阅读(87)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018