您好!欢迎您光临翻页相册的制作原理与方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>进阶教程>>>翻页相册的制作原理与方法
翻页相册的制作原理与方法
发表日期:2012/9/18 10:04:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 6895

 

翻页相册的制作原理与方法

 

   

       教学目的:通过本节教学了解和掌握形状补间的设置运用,翻页实例切换,按钮制作与指令的添加,进而制作出翻页效果的个性相册。

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

       教学要点:形状补间,实例转换,按钮及as指令的添加。

   

  

    作前准备 准备一张封面,封底和十张照片,规格均为200*300。经过制图软件(ps、fw)处理后,放置在指定的文件夹中待用。

    制作步骤

  1.启动FLASH8 软件

    2.确立文档属性 设置动画尺寸为500*400,帧频为12,背景颜色随意,其它默认,点击确定,进入场景1。

    3.导入图片(照片) 选择“文件-导入-导入到舞台”,导入已准备好的封面、封底和十张照片,规格200*300,全居中,并将其转换为图形元件。命名为1-12

    4.创建影片剪辑

   (1)制作按钮 选择“插入-新建元件”,建立一个名为“按钮”的按钮元件,点击确定,进入元件编辑区。

    选择弹起帧,插入空白关键帧,用文本工具在舞台键入play,颜色红色,字体、规格随意。全居中。在指针经过帧插入关键帧,将该帧上的实例改为蓝色。在按下帧插入关键帧,将该帧上的实例改为白色。在点击帧插入关键帧,用矩形工具拖一个无边线的矩形,规格以覆盖play为准,颜色随意。全居中。如图1所示:

  图1 

   (2)制作翻页 选择“插入-新建元件”,建立一个名为“翻页”的影片剪辑,点击确定,进入元件编辑区。添加四个图层,共五个图层,自下而上分别命名为左图、右图、切换、按钮、as。

    A.实例切换(这部分是重点)

    (a)选择切换图层第一帧,从库中拖出封面图形元件1到舞台,放置在场景的左侧。摆放位置(坐标)x:0;y:150.如图2所示:

图2

选择“修改-变形”将其打散,用任意变形工具选中该实例,并将其注册点移到左中。如图3所示:

图3

在第30帧插入关键帧,将鼠标放到右边中间移动变形小方块上,向左推;然后在将鼠标放到两个移动变形块中间,出现箭头后,向上推。点击第1帧,在属性面板上创建本区域间的形状补间。如图4所示:

图4

    (b)在第31帧插入空白关键帧,从库中拖出图形元件2,放到舞台左侧,位置标;x:200;y:-150.并将其打散,将注册点移到右中。如图5所示:

图5

在第60帧插入关键帧。然后,选中第31帧上的实例(图形元件2),将该实例推到,如图6所示:

图6

点击第31帧,创建本区域间的形状补间。

    (c)选择右图图层第一帧,从库中拖出图形元件3到舞台,位置坐标:x:0;y:-150(和图形元件1,即封面同)。在第60帧插入关键帧,并复制该帧,再在切换图层第61帧插入空白关键帧,粘贴帧。

〔到此,第一组照片切换,即第1、2页翻页完成。一下各组原理操作基本相同,所不同的是需要将本组右图图层上的实例,按原位置粘贴到左图图层的在该组的起始帧上。做法见(d)〕

    (d)右键右图图层第1帧,复制帧,再选择左图图层第61帧,插入空白关键帧,粘贴帧。(目的是让图形元件2在本组左边原来位置继续显示

    (e)选中切换图层第61上的实例(图形元件3),点击“修改-变形”将其打散,用任意变形工具选中该实例,并将其注册点移到左中。如图7所示:

图7

在第90帧插入关键帧,将鼠标放到右边中间移动小方块上,向左推;然后在将鼠标放到左侧两个移动变形块中间,出现箭头后,向上推。点击第61帧,在属性面板上创建本区域间的形状补间。如图8所示:

图8

   (f)选择右图图层第61帧插入空白关键帧,从库中拖出图形元件4到舞台,位置坐标x:0;y-150.在第120帧插入关键帧。

   (g)同理,其它图形元件(照片、封底),分别依次按以上操作完成。封底(图形元件12)完成翻转到第360帧,为了让其静止一段时间,在第400帧插入帧。又因为封底翻转过程中,右边没有实例,所以在右图图层第301插入空白关键帧,并在第400帧插入帧。其它各图层延长的到第400帧,并锁定这三个图层。

    *每60帧完成一组两个照片的翻页切换,有三张照片进入场景。其时间轴显示,如图9所示:

图9

(图中红色阿拉伯数字为该帧上的图形元件名称)

    B.添加按钮

    选择按钮图层第一帧,从库中拖出按钮元件到舞台,放到翻页相册的下方,垂直中齐。如图10所示:

图10

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

on (press) {
 play();

}

在第2帧插入空白关键帧,用文本工具键入相关内容(迎客松欢迎您)。并将其放置到翻页相册的下方,垂直中齐。如图11所示:

图11

点击该实例,在属性面板设置相关页面的地址链接。在第400帧插入帧。如图12所示:

图12

    C.添加停止指令

    选择as图层第一帧,右键该空白关键帧,按f9打开动作面板,在as编辑区输入停止在该帧的指令:stop();

    本环节完成后的时间轴起始部分,如图13所示


图13

    5.组织编辑场景 返回场景1,添加两个图层,共三个图层。自下而上命名为背景、边框、翻页。

    (1) 选择背景图层第一帧,导入或制作一个背景,或添加相关装饰。上锁。

    (2) 选择边框图层第一帧,导入或制作一个边框,全居中。上锁。

    (3) 选择翻页图层第一帧,从库中拖出翻页影片剪辑,放置在舞台左侧适当位置。上锁。

    场景编辑完后的实例显示,如图14所示:


图14


    6.该作业完成后的时间轴如图15所示:

图15
 

    7.测试存盘

 

    *说明:

    1.翻页相册可谓丰富多彩,五花八门。本教程只是择其一例,从基本原理和制作过程赘述一下,就算是抛砖引玉的吧。

    2.你在制作中也可以不设置按钮,打开动画自动翻页。

 

最终效果显示:



http://hsb345.16789.net/domName/hsb345/20129181021380390.swf

 

全屏下载

 

祝你成功!

 

进入更多教程

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



草千里
(2012/10/16 12:53:00) [202.107.25.]

那简直是无与伦比。


草千里
(2012/10/16 12:51:00) [202.107.25.]

网站非常好,我收藏了!如果能有视频教程那简直是无有伦比。


默默
(2010/6/7 23:29:00) [113.13.218.]

我怎么都做不出这种效果的,能准确给出每张图片的坐标轴位置吗?我按你这里的话,在第31帧插入空白关键帧,从库中拖出图形元件2,放到舞台左侧,位置标;x:200;y:-150,感觉坐标轴是不是错了?谢谢了!


呵呵
(2010/5/11 9:30:00) [211.69.0.]

不错


网友
(2010/4/10 22:14:00) [61.190.80.]

谢谢!谢谢老师!

 发表评论:共有 9 条评论

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

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

联系电话: 联系人:翠柏

琼icp备09005167