Flash CS6动画与制作 电信学院.

Presentation on theme: "Flash CS6动画与制作 电信学院."— Presentation transcript:

1 Flash CS6动画与制作 电信学院

2 第7章 电子杂志制作 教学提示 1 教学重点与难点 2 教学内容 3 本章小结 4

3 第7章 电子杂志制作 教学提示 本章主要通过一个《生活秀》电子杂志项目介绍电子杂志的基本概念，应用领域与趋势，动画制作方法和一些电子杂志常用动画脚本的应用。

4 第7章 电子杂志制作 教学重点与难点 电子杂志素材的处理与导入，动画制作、杂志合成、图标制作等

5 第7章 电子杂志制作 教学内容 7.1 概述 7.2 《生活秀》电子杂志项目

6 7.1 概述 一、电子杂志的概念 二、电子杂志的应用 一本好的电子杂志通过观者本身的运用点击，通过Flash的有力结合，增添了互动功能。
较多的应用到一些动态展示和流程演示方面。

7 第7章 电子杂志制作 教学内容 7.1 概述 7.2 《生活秀》电子杂志项目 7

8 7.2 《生活秀》电子杂志项目 本节内容 1.项目效果 2.操作步骤 3.技术拓展 4.练习

9 7.2 《生活秀》电子杂志项目 一、项目效果 重点与难点：
7.2 《生活秀》电子杂志项目 一、项目效果 重点与难点： 　　了解电子杂志的制作流程，掌握电子杂志合成软件的使用，电子杂志的动画制作技巧，动作脚本在电子杂志制作中的使用，模板的制作，图标的制作与杂志的合成

10 7.2 《生活秀》电子杂志项目 二、操作步骤 1．主题策划
7.2 《生活秀》电子杂志项目 二、操作步骤 1．主题策划 　　针对受众人群的特点，确定该杂志的风格要体现出时尚、高端、精致。分析现有素材并收集一些可以参考的设计效果，确定文案。

11 7.2 《生活秀》电子杂志项目 二、操作步骤 2．平面设计 (1) 搜集素材。 根据已有的主题和文字搜集平面素材,注意要保持素材足够清晰。
7.2 《生活秀》电子杂志项目 二、操作步骤 2．平面设计 (1) 搜集素材。 　　根据已有的主题和文字搜集平面素材,注意要保持素材足够清晰。 (2) 平面设计。 　　对搜集的素材使用图形处理软件如photoshop进行处理，需要注意的是每个素材都要分层来放置，每个素材在保持清晰的质量的同时要尽量减少图片的大小，这样是为了将来在Flash中制作动画效果后，动画的大小仍可以保持较小。 　　整本杂志每个主题可以制作若干个内页，每个内页一个psd图，其中一个内页、封面、封底和目录的效果如下图

12 7.2 《生活秀》电子杂志项目 二、操作步骤

13 7.2 《生活秀》电子杂志项目 二、操作步骤 3．动画设计
7.2 《生活秀》电子杂志项目 二、操作步骤 3．动画设计　　 　为每个内页的平面设计图构思一个动画制作方案，封面和封底不需要设计动画效果，目录也要设计一个动画制作方案，并且在每个链接的按钮上加上如下的动作脚本。其中的页码处写上将来内页的实际页码数，true表示用鼠标点击可以翻页。 on (release) {_root.gotoPage(页码,true) }

14 7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作 在动画制作之前，使用一些简单的辅助工具对视频或特效素材进行处理。
7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作　　 　 在动画制作之前，使用一些简单的辅助工具对视频或特效素材进行处理。 　 动画制作的最后一个环节就是用Flash的动画制作技术来完成动画。一般电子杂志动画制作时，舞台大小要设为与内页大小相同。 (1) 内页动画的制作过程。 ①新建一个950×650像素的文档，“帧频”为“30”，保存文档命名为“magzine1 ”。

15 ③新建一个“音乐”图层，导入“wind.mp3”，设置“同步”模式为“开始”。
7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作　　 ②导入“内页1.psd”，导入后的图层效果如下图所示。 ③新建一个“音乐”图层，导入“wind.mp3”，设置“同步”模式为“开始”。

16 7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作 ④将“背景”图层延伸至第105帧; 然后制作“横线”图层动画，图层如下图所示
7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作 ④将“背景”图层延伸至第105帧; 然后制作“横线”图层动画，图层如下图所示 ⑤ 制作“图标”图层动画

17 7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作 ⑥ 制作“标题”图层动画

18 7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作 ⑦ 制作“人像”动画，动画效果为四个人像逐步出现、停留、再消失的效果。
7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作　　 ⑦ 制作“人像”动画，动画效果为四个人像逐步出现、停留、再消失的效果。 ⑧ 导入 “内页1.psd”中哪些不可见的图层，并制作传统补间动画。

19 7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作
7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作　 ⑨ 完善动画效果，最终图层效果如下图所示，其中“图层33”的最后一帧为一个按钮，上面的脚本是on （release） ｛gotoAndPlay（55）;｝，按钮效果是 ，“as”层的第55帧和105帧添加了stop( );

20 7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作
7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作 (2) 目录动画的制作过程。　　 ①新建一个950×650像素的文档，“帧频”为“30”，保存文档命名为“mulu ”。 ②导入“目录.psd”，导入后完成“线”、“图块”、“粗线”图层的动画，图层效果如下图。

21 7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作
7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作 ③完成从“配图”到04时尚味蕾”的所有图层的动画，动画效果就是位置的移动加上alpha的变化。在“图层13”上添加stop( )动作。

22 7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作 ④制作一个透明的按钮， 按钮如右图所示，然后复制3个
7.2 《生活秀》电子杂志项目 二、操作步骤 4．动画制作 ④制作一个透明的按钮， 按钮如右图所示，然后复制3个 位置如下图所示，依次添加动作脚本 on（release）｛_root.gotoPage（4,true）｝ on（release）｛_root.gotoPage（6,true）｝ on（release）｛_root.gotoPage（8,true）｝ on（release）｛_root.gotoPage（10,true）｝

23 7.2 《生活秀》电子杂志项目 二、操作步骤 　　4．杂志合成与图标制作 　　(1) 安装杂志合成软件zinemaker，软件界面如下图

24 7.2 《生活秀》电子杂志项目 二、操作步骤 　　(2) 单击新建杂志，选择“950－650软皮风格杂志模板部落杂志”模板，单击确定。如下图

25 7.2 《生活秀》电子杂志项目 二、操作步骤 　　(3) 添加模板页面，替换封面和封底和相关杂志信息如下图

26 7.2 《生活秀》电子杂志项目 二、操作步骤 　　(4) 添加Flash页面，包括目录和内页如下图 　　(5) 添加音乐如下图

27 7.2 《生活秀》电子杂志项目 二、操作步骤 　　(6) 预览杂志如下图 　　(7) 生成杂志如下图

28 7.2 《生活秀》电子杂志项目 三、技术拓展 1.电子杂志的制作流程介绍

29 7.2 《生活秀》电子杂志项目 三、技术拓展 2.影片剪辑混合模式的使用如下图

30 7.2 《生活秀》电子杂志项目 三、技术拓展 3.电子杂志中比较常用的动画效果介绍:缓动效果
7.2 《生活秀》电子杂志项目 三、技术拓展 3.电子杂志中比较常用的动画效果介绍:缓动效果 当鼠标滑入右侧的三个按钮上时，对应的大图片会从左侧慢慢的移动出来，这个移动过程不是匀速的，而是一个减速运动，这个效果是如何实现的呢，下面分析一下原理：大图片本来就是放置在舞台外的左侧的，刚开始不可见，当鼠标滑入或者滑出按钮就给大图设置一个目标的x坐标，所以在按钮上添加脚本： on （rollOver） ｛ yuan.my_x = 70;｝ on （rollOut） ｛ yuan.my_x= -644;｝ 其中的yuan就是大图的实例名，并在大图影片剪辑上添加如下脚本：onClipEvent （enterFrame） ｛ this._x += （my_x - this._x）*0.2；｝，其中的my_x就是其目标坐标，这样就可以实现一个缓动效果了。

31 7.2 《生活秀》电子杂志项目 三、技术拓展 　4. 电子杂志页面模板的制作 　　　 (1)新建一个模板如下图

32 7.2 《生活秀》电子杂志项目 三、技术拓展 4. 电子杂志页面模板的制作
7.2 《生活秀》电子杂志项目 三、技术拓展 　　　4. 电子杂志页面模板的制作 (2) 分别单击“图片”和“文字”选项卡，在出现的项目前打勾如下图 　　(3) 在“模板名称”命名模板为“福州国家森林公园” 　 (4) 单击“保存”按钮，将制作好的模板命名为“福州国家森林公园.tpf”文件，这样模板就制作好了。

33 7.2 《生活秀》电子杂志项目 三、技术拓展 5.电子杂志不同合成方法简介及组件的使用
7.2 《生活秀》电子杂志项目 三、技术拓展 5.电子杂志不同合成方法简介及组件的使用 除了使用电子杂志合成工具来制作电子杂志，还有一些基于Flash编程技术开发的组件可用于直接制作完整的电子杂志。这种方法并不借助合成工具，所有的动画、翻页效果、封面、封底等都在Flash中制作完成，整本杂志就是一个swf文件 （1）打开maincs6.fla，打开动作面板，从动作面板中找到名叫 的影片剪辑，修改其中的脚本加载外部文件和外部声音的脚本。 load_page_title_array[1] = “pages/mz01.swf”//外部加载第一个页面需要放到maincs6.fla文件同一级中的名为pages的文件夹中，命名为mz01.swf，下面以此类推 bg_sound_array[1] = "bgsound/天国的女儿.mp3";//第一页外部加载的背景音乐要放置在maincs6.fla文件同一级中的名为bgsound的文件夹中，天国的女儿.mp3，下面的相同，或者修改这里mp3的名称也可以。

34 7.2 《生活秀》电子杂志项目 三、技术拓展 5.电子杂志不同合成方法简介及组件的使用
7.2 《生活秀》电子杂志项目 三、技术拓展 5.电子杂志不同合成方法简介及组件的使用 （2）找到名为“symbol10”的影片剪辑元件，双击进入其内部，上面共有4帧，第1帧是封面，最后一帧是封底，中间的两帧，是950*650的白色矩形。如果还有更多内页，可以多增加一些像第2、3帧的空白矩形即可。 （3）测试maincs6.fla，就可以看到杂志最终的效果了，如图所示。

35 7.2 《生活秀》电子杂志项目 三、技术拓展 6.电子杂志图标的制作
7.2 《生活秀》电子杂志项目 三、技术拓展 6.电子杂志图标的制作 在ps中制作一个不大于128*128像素的图像，使用IconWorkshop软件来制作。

36 7.2 《生活秀》电子杂志项目 四、练习 拓展题：请制作一本关于大学生活的电子杂志。

37 本章小结 本章主要介绍了电子杂志的概念与电子杂志的应用，电子杂志的制作流程与制作方法，重点讲解了电子杂志内页在Flash中制作的过程和注意事项，演示了电子杂志的合成过程和合成软件的设置方法，图标的制作等一系列过程。