分享

单拉门相册的制作原理与方法

 昵称2519393 2013-03-08
单拉门相册的制作原理与方法

    教学目的:通过本节教学了解和掌握影片剪辑、实例名称的创建应用,按钮、以及动作面板as语句并用,通过巧妙的设计和精心创作,进而实现新颖的单拉门式相册之动画效果。

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

    教学要点:影片剪辑、实例名称、按钮、动作面板、as语句。

 

 

  作前准备

    准备规格为300*400的,做相册的人物图片六张,经过制图软件(ps、fw)处理后,放到指定的文件夹待用。

  制作步骤

    1.启动FLASH8 软件。

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


图1

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

    4.创建按钮元件

    选择“插入-新建元件”,建立一个名为“隐钮”的按钮元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第4幀(点击)插入空白关键幀,用矩形工具在舞台拖一个无边线的矩形,规格、颜色随意,全居中。如图2所示:


图2

    5.创建图形元件

    1.选择“插入-新建元件”,建立一个名为“01”的图形元件,点击确定,进入元件编辑区。就一个图层。

    选择背景图层第1帧,从库中拖出素材图片1到舞台,右对齐-垂直中齐。在从库中拖出素材图片2到舞台,左对齐-垂直中齐。上锁。如图3所示:


图3

    2.同理同种方法,分别依次创建“02-06”图形元件,完成素材图片3和2,3和4,5和4,5和6,1和6的操作。如图4-8所示:


图4

图5


图6


图7


图8

    6.创建影片剪辑元件 

    选择“插入-新建元件”,建立一个名为“拉门”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。


    选择图层1第1帧,导入或制作一个拉门实例,规格300*400,式样自定,左对齐-垂直中齐。如图9所示:


图9


    7.辑制作场景

    返回场景1,添加四个图层,共五个图层。自下而上命名为图组、拉门、按钮、边框、as。

   (1)选择图组图层第一帧,从库中拖出“01”图形元件到舞台,规格不变,全居中。如图10所示:

 

图10

在第3幀插入空白关键幀,从库中拖出“02”图形元件到舞台,规格不变,全居中。如图11所示:

图11

同理同种方法,分别依次在第4-7幀,完成“03-06”图形元件的操作。上锁。

    (2)选择拉门图层第1帧,从库中拖出“拉门”影片剪辑元件到舞台,规格为不变,右对齐-垂直中齐。如图12所示:


图12

点击该实例,在属性面板填写其实例名称为:lm 。在第7幀插入帧,上锁。如图13所示:


图13

    (3)选择按钮图层第7帧,插入空白关键帧,从库中拖出“隐钮”按钮元件到舞台,规格改为300*400,右对齐-垂直中齐。如图14所示:


图14

点击该实例,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (release) {
 gotoAndStop(1);

}

锁定该图层。

    (4)选择边框图层第一帧,导入或制作一个边框,规格600*400,全居中。在第7幀插入幀,上锁。如图15所示:



图15

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

stop();
lx = lm._x;
ly = lm._y;
lm.onPress = function (){
nextFrame();
this.startDrag(false, lx, ly, rx, ly);
};
lm.onMouseUp = function (){
this.stopDrag();
};

在第7幀插入帧,上锁。

    8.本作业完成后时间轴显示如图16所示:


图16

  9.测试存盘

 

    *说明:

    1.本教程和效果显示为节省空间,只选用了六张图片,在制作中如果增减图片,其原理方法相同。

    2.制作中你可以创建一个音乐影片剪辑元件,在场景添加声效,其观赏性更佳! 

 

最终效果显示:


http://hsb345./domName/hsb345/20131611135918826.swf

 

全屏下载

 

祝你成功!

 
 
 
 
 
 
 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多