您好!欢迎您光临方块切换相册的制作原理与过程_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>进阶教程>>>方块切换相册的制作原理与过程
方块切换相册的制作原理与过程
发表日期:2012/9/19 8:44:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 2801

方块切换相册的制作原理与过程

   

    教学目的:通过本节教学了解和熟悉影片剪辑的创建、属性链接的运用,以及动作脚本的填写,进而创作出生动漂亮的另类相册。

  教学对象:本教材是针对有一定动画制作基础和对属性面板及工具箱、动作面板、as语句有所了解的朋友们编制的,因此省略了一些步骤,还望谅解。

    教学要点:影片遮罩、属性链接、动作面板、as语句。

   

   

    作前准备

    准备九张规格为360*312的,做相册的图片,经过制图软件(ps、fw)处理后,放在指定的文件夹待用。

    1.启动FLASH8 软件

    2.确立文档属性 设置动画尺寸为550*400,背景颜色深绿,帧频24,其它默认,点击确定,进入场景1。如图1所示:


图1

    3.首先将准备好的九张素材图片导入到库中,待用。

    4.创建影片剪辑

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

图2

打开元件属性、链接面板,建立一个名为“image_0”的影片剪辑元件,属性链接参数,如图3所示:


图3

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

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


图4


图5

同理同种方法创建名为“image_1-image_8”,的影片剪辑元件,完成图片2-9的大图操作。

    (2)选择“插入-新建元件-高级”,打开元件属性、链接面板,建立一个名为“thumb_0”的影片剪辑元件,属性链接参数,如图6所示:


图6

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

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


图7


图8

同理同种方法创建名为“thumb_1-thumb_8”,的影片剪辑元件,完成图片2-9的小图操作。

    (3)选择“插入-新建元件-高级”,打开元件属性、链接面板,建立一个名为“box”的影片剪辑元件,属性链接参数,如图9所示:


图9

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

    选择图层1第一帧,用矩形工具在舞台拖一个规格为360*312的,无边线的矩形,颜色随意,全居中。如图10所示:


图10

其库中影片剪辑元件显示,如图11所示

图11

    5.编辑制作场景

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

    (1)选择矩形图层第一帧,用矩形工具在舞台拖一个,规格158*312,无边线的橙色矩形,将其放置在舞台的右侧偏上。上锁。如图12、13所示:


图12

图13

    (2)选择文本图层第一帧,用文本工具在矩形上输入竖向的“古今红颜多英杰 雄才伟略胜儿男”。字体,规格,颜色自定。上锁。如图14所示:


图14

    (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.该作业完成后的时间轴如图15:


图15

    7.测试存盘

 

    *说明:

     1.本教程中创建的影片剪辑均没有进入场景1,它们是通过其属性链接和脚本来控制的。

     2.你在制作中各影片剪辑元件的规格、位置必须按教程要求做,不然需修改脚本中的个别参数方可正常显示  

      最终效果显示:


http://hsb456.16789.net/s-helpSite/domName/hsb456/20103812513521598.swf

 

全屏下载

 

祝你成功!

 

进入更多教程

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



夜风
(2010/3/12 19:18:00) [113.2.75.]

谢谢老师。


812379368
(2010/3/10 22:16:00)

终于制作出来了好开心谢谢恩师!


812379368
(2010/3/9 10:28:00)

真高兴欣赏到恩师的新作我要学会!

 发表评论:共有 3 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

迎客松B站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:翠柏

琼icp备09005167