FLASH相册制作

FLASH相册制作 FLASH相册制作 活动目的： 会根据实际需求设计和制作一个多媒体作品 会运用FLASH制作一个简单的电子相册 重点： 相册界面的规划和设计 元件的制作，特别是按钮的制作 浏览相片场景的制作 难点： 翻页按钮的制作 教法学法： 任务驱动，分析法，示范法 学时：6学时 第一、二学时：界面设计和规划 任务：分析相册，完成相册的界面设计 参考资料：视频教程（FLASH相册教程1——界面设计） 教师活动： 1．​ 引导学生分析相册，掌握多媒体作品界面设计的工作 2．​ 示范制作小栅格的技巧 3．​ 引导学生理解和运用图层 学生活动： 1．​ 分析相册的构造 2．​ 完成相册主界面的制作 小结： 学生中存在的主要问题和解决方法 第三学时：按钮制作 任务：完成箭头动画和相册按钮的制作 参考资料：视频教程（FLASH相册教程2——按钮制作：FLASH相册教程4——箭头动画） 教师活动： 1．​ 引导学生分析和理解按钮元件的制作 2．​ 引导学生分析箭头动画 学生活动： 1．​ 制作按钮元件 2．​ 制作箭头动画 小结： 学生中存在的主要问题和解决方法 第4学时：图片滚动效果 任务：完成界面上图片滚动效果的制作 参考资料：视频教程（FLASH相册教程3_1——创建图片元件组；FLASH相册教程3_2——图片滚动效果） 学生活动： 1．​ 分析图片滚动效果的原理 2．​ 制作图片滚动效果 小结： 学生中存在的主要问题和解决方法 第5学时：浏览相片场景制作 任务：完成浏览相片场景制作 参考资料：视频教程（FLASH相册教程5_1——浏览相片场景制作；FLASH相册教程5_2——文字说明的添加） 学生活动： 1．​ 分析浏览相片场景制作的原理 2．​ 制作相片浏览场景 小结： 学生中存在的主要问题和解决方法 第6学时：翻页按钮制作 任务：完成翻页按钮制作 参考资料：视频教程（FLASH相册教程5_3——STOP动作的添加；FLASH相册教程5_4——翻页按钮的制作） 教师活动：引导学生理解脚本语句 学生活动： 1．​ 分析翻页按钮的制作的原理 2．​ 制作翻页按钮 小结： 学生中存在的主要问题和解决方法 考虑到一部分水平较好的学生会比较快完成这一作品，另安排了一个难度较大的相册让他们挑战自己，资料另起下页。 电子相册 “电子相册”，听着还挺诱人哦！或许你见到过用Powerpoint或Authorware制作的“电子相册”，确实很不错。那么，你有没有想过，用Flash制作“电子相册”呢？ “Flash相册”的形式可以多种多样，内容也可包罗万象，这一节，我们将一起制作一个精美的“翻页式”动画相册，懂得了其中的原理，你就可以自己完成诸如“作品集”、“家庭影集”、“求职介绍”、“产品推介”等一切你想得到的动画相册了。 实例简介 如图11-2-1所示是本例的封面，单击相册可以打开，同时相册中飘出由学员们自编自唱的优美歌声。 图11-2-1 相册封面 本例制作过程比较繁杂，考虑到你已经掌握相当的基本操作技能，叙述中突出重点，着重介绍相册动画中的关键技巧：“翻页”效果的制作。 本范例的源文件：“相册.fla”被保存在光盘相关目录中，建议打开比照学习。 知识提要 ●     编辑首帧为空白帧的元件的技巧 ●     在场景中不显示元件的技巧 ●     创建书页翻动的效果 ●     利用脚本语句实现帧与帧之间的跳转 ●     使用隐形按钮的技巧 1．创建影片文档 （1）设置影片文档属性 新建一个影片文档，在【属性】面板中设置大小为600×420像素，【背景颜色】为深红色，【帧频】为30，如图11-2-2所示。 图11-2-2 影片属性设置 （2）创建影片背景 在场景中画一个600×420像素的无边矩形，填充颜色为#990000，在上面用【刷子工具】 随意画一些各种颜色的小点做点缀，如图11-2-3所示。 图11-2-3 点缀背景 2．创建元件 这一步骤我们将使用“网格”辅助，执行【视图】|【网格】|【显示网格】命令，打开网格，接着执行【视图】|【网格】|【编辑网格】命令，打开【网格】对话框，设置网格大小为50×50，如图11-2-4所示。 图11-2-4 编辑网格 （1）创建6个图形元件 在本例中，要用到6幅图片，分别用作相册封面和内页内容，其中4个作品介绍分别是《网上的男人是老虎》、《春风吻上我的脸》、《警匪之战》、《雨巷》。 新建6个图形元件，每个元件中导入一张图片，分别命名为“封面”、“内页”、“网上的男人是老虎”、“警匪之战”、“春风吻上我的脸”、“雨巷”。 这6张图片的位置在：光盘\example\part3\***\图片文件夹里，文件名分别为“封面.png”、“内页.png”、“网上的男人是老虎.jpg”、“春风吻上我的脸.jpg”、“警匪之战.jpg”、“雨巷.jpg”。 如图11-2-5所示是封面和内页的图片。 图11-2-5 封面和内页 如图11-2-6所示是四个作品的截图。 图11-2-6 四个作品截图 6个图形元件完成后，放在【库】中待用。 （2）创建“箭头按钮”元件 箭头按钮的作用控制前后翻页，如图11-2-7所示，添加两个图层，分别命名为“增加反应区”、“按钮白边”、“按钮面”；在“增加反应区”层的第4帧画了个矩形，以增大按钮“有效区”。在“按钮白边”与“按钮表面”层中画好箭头的形状。图11-2-7所示是按钮各层分布与做好后按钮的形状。 图11-2-7 箭头按钮 （3）创建“隐形按钮”元件 “隐形按钮”是Flash制作中常用的一个技巧，把它放到场景中某个位置，该位置就具有按钮功能，在下面的制作过程中，我们会看到它的实际运用。 “隐形按钮”的制作非常简单，只需要在“按钮”的第4帧画一个无边的矩形就行了，颜色任选，画好后将矩形对齐场景的十字中心点。 （4）创建“图片过渡”图形元件 新建一个图形元件，在场景中画一个无边矩形，大小为260×180像素，在【混色器】面板中，设置填充类型为【放射状】，设置一种从红色到黑色的渐变。这个元件的作用是用来过渡“作品图片”和“内页页面”之间的颜色，使其衔接得更自然一些。 （5）创建“相册”MC元件 创建名为“相册”的影片剪辑元件。 在这个元件中，包含相册的各个页面，每个页面是由“底层背景”、“图片过渡”、“作品图片”、“文字”、“按钮”5个部分组成，如图11-1-8所示。 图11-2-8 相册元件的时间轴面板 步骤1 布置“相册”影片剪辑场景 “相册”影片剪辑共有8个关键帧，每帧的内容都不同，请你先按图11-2-8所示创建5个图层，然后一帧一帧的添加内容，下面我们将讲解几个具有特殊内容的帧操作，其它几个操作相同的关键帧内容见后面的表格。 第1帧：参考图11-2-8，该帧的各层全是空白帧，仅在【按钮】图层中有一条指令：stop();，它的作用是让相册的起始状态静止在封面上，等待用户单击。 第2帧：这是封面帧，从【库】中拖入名为“封面”的图形元件，放在【底层背景】图层中，其大小是290×240，X、Y轴的位置都为0。 因为是封面，所以其上面的【图片过渡】、【作品图片】、【文字】等图层都是空白帧，【按钮】图层中放置的是“隐形按钮”，调整其大小为270×220，覆盖在封面上。 建好后的第2帧如图11-2-9所示，图中的淡绿色部分为“隐形按钮”，播放时是看不到的。 图11-2-9 相册封面 第3帧：这是“封2页”内容，从【库】中拖入名为“内页”的图形元件放在【底层背景】图层中，大小及位置同封面。再从【库】中把“图片过渡”元件拖入【图片过渡】图层，设置【Alpha】值为50％。【文字】图层中放的是名为“打字效果”的影片剪辑，这是一段利用遮罩动画，事先做好的影片剪辑。【按钮】图层中还是“隐形按钮”，调整按钮大小为250×180。页面的下方，还有一个剪头按钮指示翻页的方向（以上按钮上都有相关的指令，等我们布置好场景再来逐个添加）。完成后的“封2页”如图11-2-10所示。 图11-2-10 相册封2页 第4帧：是翻开相册后的第1页，从这帧起，【底层背景】图层中的内容始终是名为“内页”的图片元件。【图片过渡】图层中的“图片过渡”元件要打散，并根据作品图片的颜色而适当改色，使图片和背景之间的过渡较为自然。在本实例中，【图片过渡】图层第4帧上的图片填充的颜色参数：左边颜色参数为#FFFFCC、【Alpha】值为80％，右边颜色参数为#743A01、【Alpha】值为50％。如图11-2-11所示。 图11-2-11 过渡图片填充时的【混色器】面板 从【库】中把名为“网上的男人是老虎”的图形元件拖放在【作品图片】图层中。在【文字】图层中创建文字说明：作者是“学习来了”、作品名称是“网上的男人是老虎”，在按钮层中也有一个隐形按钮和箭头按钮。完成后如图11-2-12所示。 图11-2-12 做好后的第一页 第5-7帧：做法与第4帧相同，只是分别使用不同的图片元件，相关元件从【库】中取用，并加上不同的说明文字，另外，“过渡图片”都要打散重新填充，颜色应该根据图片作调整，“透明按钮”的指令见下表11-2-2。 第8帧：是“封3”，这页内容是介绍其他一些作品，去掉图片，加入文字，每行文字都用“隐形按钮”指向相应作品的绝对网址，只要单击就能看到作品了。 图11-2-13所示的是第8帧完成后的场景。 图11-2-13 完成后的封面3 在“谢谢观赏”的文字对象上也有一个“隐形按钮”，指令见表11-2-2。 步骤2 检查“相册”影片剪辑中各帧的元件分布 表11-2-1是各帧中的元件名称列表，请对照着仔细检查。 表11-2-1 各帧中的元件名称   底层 图片过渡层 作品图片层 文字说明层 第1帧 无 无 无 无 第2帧 封面 无 无 无 第3帧 内页 图片过渡元件 无 打字影片剪辑 第4帧 内页 同上，打散 网上的男人是老虎 学习来了：网上的男人是老虎 第5帧 内页 同上，打散 春风吻上我的脸 梦雨：春风吻上我的脸 第6帧 内页 同上，打散 警匪之战 沪上老康：警匪之战 第7帧 内页 同上，打散 雨巷 牧马者：雨巷 第8帧 内页 图片过渡 无 四个作品的作者和名称 步骤3 添加各帧隐形按钮上的动作指令      表11-2-2 列出了“相册”影片剪辑中所有隐形按钮上的指令，请对照添加。 表11-2-2 各帧隐形按钮上的动作语句 第2帧 // 跳转到上一级路径，（即“翻页效果”元件）中，播放该元件第2帧的动作 on (release) {     with (_parent) {         gotoAndPlay(2);     } } 第3帧 //打开新窗口，链接到闪客沙龙的网址 on (release) {     getURL("http://280739.chat.yinsha.com ", _blank); } 第4帧 // 打开新窗口，链接该作品的网址 on (release) {     getURL("http://up.flasher123.com/upload/imgwsf/200325940041.swf", _blank); } 第5帧 // 打开新窗口，链接该作品的网址 on (release) {     getURL("http://www.flash8.net/up/film/mengyu200332422630.swf", _blank); } 第6帧 // 打开新窗口，链接该作品的网址 on (release) {     getURL("http://www.hslk.com/flash/jf.swf", _blank); } 第7帧 // 打开新窗口，链接该作品的网址 on (release) {     getURL("http://cn.flasher123.com/flasher123/mmz/yx.swf", _blank); } 第8帧 四个作品的链接： 溜达：on (release) {     getURL("http://www.zsepb.gov.cn/IssueManage/uploadFile/swf507.swf", _blank); } 瘟斗士XP：on (release) {     getURL("http://www.flash8.net/upload/2003/5/20/2003520127259386.swf", _blank); } yot418：on (release) {     getURL("http://gdr.flasher123.com/xiqi/yueliang.swf", _blank); } 小东东：on (release) {     getURL("http://bbs.flasher123.com/upfile/2177_2003-7-4_16-9-41.SWF", _blank); }   谢谢欣赏，点击回到首页： // 跳转到翻页效果元件中，并停止在相应帧中。 on (release) {     with (_root.go.leftpage) {         gotoAndStop(1);     }     with (_root.go.leftflip) {         gotoAndStop(2);     }     with (_root.go.rightflip) {         gotoAndStop(4);     } // 跳转到上一级路径，（即“翻页效果”元件）中，播放该元件第34帧的动作     with (_parent) {         gotoAndPlay(34);     } } 注意：表11-2-2中一些动作脚本中的URL参数值，这里仅作为参考，你可以换成对应你的作品实例的URL地址。 大家一定还记得，我们在第4章中讨论过，元件的“重复应用”问题，从上表中可以看出，一个“隐形按钮”得到了多次应用，提高了工作效率，减少了文件量。 如图11-2-4示范设置在第2帧的隐形按钮上的动作脚本语句。   图11-2-14 封面隐形按钮上的脚本语句 步骤4 添加各帧中箭头按钮上的动作语句 现在我们再来看看这个MC元件各帧中箭头按钮上的动作语句。 第3、5、7帧上的语句是一样的，均为： // 跳转到上一级路径，（即“翻页效果”元件）中，播放该元件第21帧的动作 on (release) { with (_parent) { gotoAndPlay(21); } } 第4、6帧上的语句是一样的，均为： // 跳转到上一级路径下，（即“翻页效果”元件）中，播放该元件第2帧的动作 on (release) { with (_parent) { gotoAndPlay(2); } } 至此，“相册”影片剪辑创建完毕。 本例最吸引眼球的动画效果就是每个页面能前后翻动，下面我们就来实现这个效果。 3．创建翻页效果 我们要实现相册左右翻页的效果，是通过动作脚本指令控制的。本例的脚本控制构思相当巧妙，请你在学习过程中一定要搞清其逻辑关系。 （1）创建名为“翻页”的影片剪辑 首先，创建一个名为“翻页”的影片剪辑，在这个影片剪辑中只有三层，如图11-2-15所示。 图11-2-15 翻页效果的时间轴面板 从图11-2-15中可以看出，【rightflip】图层和【leftpage】图层中都没有补间动画，这2层的作用是使页面翻转时能看到左右两面的静止页面。页面翻转的动作是由【leftflip】图层完成的。下面我们就来编辑这个元件。 请你先按图11-2-15所示建好图层。 （2）在相册元件中加临时层 从【库】中把名为“相册”的影片剪辑拖到【leftpage】图层的场景中，这时，在场景中只看到一个小白点，这是因为“相册”影片剪辑的第1帧是“空白”的。 这种在界面上“看不见”的对象，在Flash中经常会碰到，要选择它或者打开它相当困难，本书第4章我们已经学到过如何找出它的“注册点”，从而打开它进行编辑的技巧。在这里，我们将再介绍另外一种技巧，即在该对象内增加一个“临时层”，在该层的第1帧临时放上一个“内页”图形对象，使“不可见”对象变为可见，为后面的编辑带来极大方便。当然，完成全部制作后别忘记删除哦！ 现在我们就先回到“相册”这个元件中，在按钮层上面新建1个“临时层”图层，在其第1帧用“原地粘贴”的方法（将【底层背景】图层上第3帧上的“内页”图形实例复制、粘贴到当前位置）放置一个“内页”图形元件，第2帧插入空白关键帧，如图11-2-16所示。 现在，场景中，“相册”影片剪辑是“有形”的了。 图11-2-16 加了临时层的相册元件 再回到“翻页”影片剪辑，我们已经能清楚地看到“相册”元件！ 现在，我们继续编辑“翻页”影片剪辑。 （3）编辑【rightflip】层 在【rightfilp】这一层中，也拖入一个“相册”元件，在X轴上的位置为0，Y轴上的位置为0，实例名为：“rightfilp”，如图11-2-17所示。 图11-2-17 rightflip图层中的“相册”属性 在第1帧上添加帧指令： with (_root.go.rightflip) { nextFrame(); } 其动作面板如图11-2-18所示。 图11-2-18 rightflip层第1帧的动作面板 在第二帧加关键帧，定义动作语句为： // 让此帧内的相册元件翻二页。二个nesxtFrame是连续二个下一帧。 with (_root.go.rightflip) { nextFrame(); } with (_root.go.rightflip) { nextFrame(); } （4）编辑【leftflip】层 关闭下面二层的“眼睛”，在【leftflip】层的第1帧中拖入“相册”影片剪辑，在X、Y轴上的数值均为0，实例名“leftflip”，如图11-2-19所示。 图11-2-19 leftflip层的属性面板 保持【leftflip】图层为当前编辑图层，在该图层的第2、10、11、19、20、21、30、31、40帧处插入关键帧（参考图11-2-15）。 从第2帧到第19帧完成的是从右向左翻页，从第21帧到第40帧完成的是从左向右翻页。现在，我们把第11、19、21、30帧处的“相册”影片剪辑移到场景的左侧，在这4帧的属性面板上设置“相册”影片剪辑在X轴上的位置为-290，如图11-2-20所示。 图11-2-20 移动元件到场景的左侧 （5）移动注册点 把元件移到场景的左侧后，我们观察图11-2-20，会发现场景中有二个十字星，右面的是场景“中心点”，左面的是“相册”元件自身的“注册点”，任何对象在变形的时候，总是以一个“假想”的“点”为依据的，这个点就是对象的“注册点”，书本的“注册点”应该在“书”的“中轴装订线”处，我们必须把页面的注册点移到书的中轴处，也就是场景的“0”坐标处。 在创建补间动画前，我们要先设置好第11、19、21、30帧处的注册点为“0”。下面以第11帧为例： 在第11帧处，选取元件，然后按下任意变形工具 ，此时，元件周围出现调节手柄，如图11-2-21所示。 图11-2-21 元件周围出现的调节手柄 注意左上角的那个白色圆点，这就是注册点，用鼠标左键按住它，拖到右上角的十字星上松手，就行了。此时，元件周围如图11-2-22所示。 比较两两种情况，可看出“相册”影片剪辑的“注册点”已经与场景“中心点”重合。 图11-2-22 移动注册点 按照同样方法，把处于第19、21、30帧中的“相册”影片剪辑进行移动编辑。 （6）创建翻页动画 【任意变形】工具有4个选项，如图11-2-23所示。 图11-2-23 任意变形工具的选项 左面是“倾斜与旋转”工具，右面的是“缩放”工具，它们的编辑效果如图11-2-24所示。 图11-2-24 使用缩放、倾斜工具使元件变形 利用这2种编辑特点，把第10、11、30、31帧处的元件作如图11-2-25所示的变形。   图11-2-25 第10、11、30、31帧处元件的变形情况 接着，分别在第2帧、第11帧、第21帧、第31帧中建立动作补间动画。 在第39中加关键帧，然后缩小场景到15％（这样可以看到全部编辑界面）。把第20、40帧中的元件拖到场景外面任意位置，即图11-2-26中的红色区域以外的任意处。 图11-2-26 第20帧处的场景 （7）向【leftflip】层中添加动作语句 第1帧： stop(); 第2帧： with (_root.go.leftflip) {//调用主时间轴中名字为go的影片剪辑实例中的leftflip实例 nextFrame();//在leftflip实例中播放下一帧 } 第11帧： with (_root.go.leftflip) { nextFrame(); } 第19帧： with (_root.go.leftpage) { nextFrame(); } with (_root.go.leftpage) { nextFrame(); } 第20帧： stop(); 第21帧： with (_root.go.leftpage) { prevFrame(); } with (_root.go.leftpage) { prevFrame(); } 第31帧： with (_root.go.leftflip) { prevFrame(); } 第40帧： with (_root.go.leftflip) { prevFrame(); } with (_root.go.rightflip) { prevFrame(); } with (_root.go.rightflip) { prevFrame(); } stop(); 说明：以上动作脚本中出现一个名字为go的影片剪辑实例，这个影片剪辑其实就是放置在主场景中的“翻页”影片剪辑实例，在下面的步骤中有对它的定义。 至此，本例所需的各种组件基本准备完毕，但是，限于篇幅，其中还有2个影片剪辑没有介绍，一个是“闪客沙龙作品集”，它用的是“遮罩”技巧。 下面，我们该回到主场景完成最后的工作了。 4．创建主动画 你的动画作品无论规模大小，最后总得在主场景进行整合处理，前面我们已经进行大量的动画素材的创建，现在终于可以“组装”它们了，这也同样也表明我们将马上欣赏到自己的劳动成果啦！所以，下面的编辑就显得特别轻松，还有那么一点点兴奋哦？好，让我们赶快完成它！ 【背景层】的内容早已在创建影片属性时完成了，现在我们在主场景的时间轴上再新建2个图层，请参考图11-2-29。 从【库】中把“翻页”元件拖到场景下部，再从【库】中把“闪客沙龙作品集”元件放在场景的上部。 此时场景大致如图11-2-27所示。 图11-2-27 没有删除临时层的主场景 选择舞台上的“翻页”影片剪辑实例，在【属性】面板中定义这个实例的名称为go。 测试一下，好像哪个地方有点不对劲？喔，我们还没删除在“相册”影片剪辑中的“临时层”哩！ 马上删除，成功啦！嗨，前面付出的劳动没白费！ 完成后的主场景时间轴面板如图11-2-28所示。 图11-2-28主场景中的时间轴面板 测试没有问题，就存盘吧。你可以在理解动画原理及逻辑关系的基础上，把相册改造成你想得起的任何其它形式，我们相信，它一定会博得你朋友们的喝采！