9.2电子相册制作──视觉大餐
本例综合运用FlashCS5的各种功能，在动画演示过程中，经过一段闪亮开场后进入图片展示界面；在功能上实现可自动播放所有的图片或有控制性的单张展示，也可以通过下边的滚动条快捷地选择需要欣赏的图片，同时也实现了图片的放大或缩小功能，让读者可以随心所欲地欣赏图片。设计思路有制作横排的快捷浏览窗口、制作图片的显示效果、制作按钮和标题、添加控制代码。设计效果如图9-51所示。
具体的制作过程如下。
1.制作横排快捷浏览窗口
（1）新建一个Flash文档，设置文档尺寸为“500×375”像素，背景颜色为“黑色”，帧频为“24”，其他属性试用默认参数。
（2）选择【文件】→【导入】→【导入到库】菜单命令，将素材“第9章\电子相册”中“image”文件夹中的图片和“music”文件夹中的声音导入到【库】面板中。
（3）将默认的“图层1”重命名为“背景”层，选择【文件】→【导入】→【打开外部库】菜单命令，打开素材“第9章\电子相册.fla”文件，将背景文件夹中名为“动态背景”的影片剪辑元件拖曳到舞台中，并调整元件大小为“500×375”像素并与舞台中对齐，然后在第120处插入帧，结果如图9-52所示。
（4）新建图层并重命名为“开场动画”层，将【库-电子相册.fla】中【矩形边框】文件夹中名为“横排图片背景”的影片剪辑元件拖曳到舞台中，设置坐标X为“868.3”，Y为“98.3”，然后在第7帧插入一个关键帧，并将元件调整到图9-53所示的位置，在第1帧和第7帧之间创建补间动画。
（5）新建图层并重命名为“快捷浏览”层，在第13帧处插入关键帧，将【库-电子相册.fla】
中【图片控制按钮】文件中名为“01”的按钮元件拖曳到舞台中，调整大小为“32%”，如图9-55所示。然后选中舞台中的元件，把它转换名为“快捷按钮”的影片剪辑元件，并双击进入其编辑状态。
（6）把默认的“图层1”重名为“01”层，在第100帧处插入帧。然后将舞台中的按钮元件的【实例名称】设置为“pictuer01”。分别在第1帧个第4帧插入关键帧，调整第1帧元件的【Alpha】值为“0%”，并创建补间动画。
（7）新建图层并重命名为“02”层，将【库-电子相册.fla】中【图片控制按钮】文件夹中名为“02”的按钮元件拖曳到舞台中，并设置其【实例名称】为“picture02”，然后在第8帧和第11帧之间制作与“01”相同的渐显效果，如图9-54所示。
（8）用同样的方法制作“03”和“04”的效果。新建图层并重命名为“music”层，分别在第1帧、第8帧、第15帧和第23帧插入声音“soundl.mp3”。此时横排的第1组显示的图片制作完成，如图9-55所示，此时【时间轴】面板状态如图9-56所示。
注意：添加声音时，在【属性】面板对声音进行剪裁，只要有声音的部分，其他多余的部分剪裁掉。
（9）用同样的方法制作第2组图片和第3组图片，分别如图9-57和图9-58所示，最终“快捷按钮”的影片剪辑元件的【时间轴】面板状态如图9-59所示。
注意：第2组图片的起始帧为45，结束帧为70，第3组图片起始帧为75，结束帧为100。
两个关键帧之间相差3个帧。
（10）退出元件编辑，返回主菜单。
2．制作图片的显示效果
（1）新建图层并重命名为“展开效果”层，在第50帧处将【库-电子相册.fla】面板中名为“图片展开效果”的图形元件拖曳到舞台中，设置它的宽、高分别为“422”、“275”，它的X、Y坐标分别为“198.5”、“146”，在【属性】面板中设置“图形选项”为“播放一次”，这样它将实现一张白纸翻转到舞台的效果，如图9-60所示。
（2）新建图层并重命名为“图片效果显示”层，在第59帧插入关键帧，将【库】面板中名为“1.jpg”的图片拖曳到舞台中，设置其长、宽为“336×230”像素，X、Y坐标分别为“26”、“27”，此时的舞台效果如图9-61所示。
（3）将舞台中的图片转换为名为“图片的显示效果”的影片剪辑元件，双击进入其编辑状态。
（4）把默认的“图层1”重命名为“图片”层，在第2帧插入一个空白关键帧，把【库】
面板中名为“02.jbp”的图片拖曳到舞台中，设置其长、宽为“336×230”像素，X、Y坐标分别为“0”、“0”，此时的舞台效果如图9-62所示。
（5）用同样的方法，分别在第3帧到第12帧之间插入相对应的图片“03.jpg”至“12.jpg”。
（6）新建图层并重命名为“遮罩效果”层，将【库-电子相册.fla】面板中【遮罩效果】文件夹复制到本库中，然后将【库】面板中【遮罩效果】文件夹下名为“遮罩效果08”的影片剪辑元件拖曳到舞台，调整其旋转角度为“45”，X、Y坐标分别为“320.0”、“50”，其实现的主要效果如图9-63所示。
（7）用同样的方法，分别在第2帧到第12帧之间插入各种遮罩效果，然后将“遮罩效果”
层转换为“遮罩层”。【库-电子相册.fla】面板中共有7种遮罩效果，注意不要在相邻来两帧插入相同的遮罩效果。
（8）新建图层并重命名为“AS”层，分别在第1帧到第12帧每1帧都输入脚本“stop；”，此时的【时间轴】面板状态如图9-64所示。
（9）退出元件编辑，返回主场景。
（10）新建图层并重命名为“显示范围”层，在第50帧插入关键帧，然后在舞台中绘制一个矩形，填充颜色为“3399FF”，然后将“显示范围”图层转换为遮罩层。
3．制作按钮和标题
（1）新建图层并重命名为“按钮”层，在第85帧将【库-电子相册.Fla】面板中【按钮】
文件夹中的按钮，按照如图9-65所示的方式排列在舞台中，新建图层并重命名为“显示效果”
层，并在第85帧到第92帧为“按钮”层作一个遮罩层，实现它们整体制作渐显效果，然后在第93帧插入空白关键帧。
（2）新建图层并重命名为“标题”层，在第100帧将【库-电子相册.fla】面板中名为“标题”的影片剪辑元件拖曳到舞台中，如图9-66所示。在第100帧到第106帧之间制作从右闪入舞台的显示效果。
4．添加控制代码
（1）新建图层并重命名为“声波”层，在第120帧将【库-电子相册.fia】面板中【声波】
文件夹中名为“声波”的影片剪辑元件拖曳到舞台中，设置“实例名称”为“shenbo”，X、Y坐标分别为“470”、“270”。
（2）分别设置“快捷浏览”层上的“快捷名称”元件的“实例名称”为“fashButton”，“图片效果显示”层上的“图片效果显示”元件的“实例名称”为“picture”。
（3）双击“快捷按钮”元件，进入元件编辑，在最上层新建一个名为“as”的图层，在第1帧设置“帧标签”为“One”，如图9-71所示。然后在第30帧插入一个关键帧，输入如下的代码。
（4）在第45帧设置“帧标签”为“Two”，在第70帧输入代码控制picture05到picture08相对应的图片显示，与第30帧代码类似，只需要改编代码中的编号。
（5）在第75帧设置“帧标签”为“Three”。在第100帧输入代码控制picture09到picture012相对应的图片显示，与第30帧代码类似，只需要改编代码中的编号此时的【时间轴】面板状态如图9-67所示。
（6）退出原件编辑，返回主场景。
（7）选中“按钮”层，分别设置“播放控制按钮”元件的“实例名称”为“Start”，“下一张”为“nextButton”，“上一张”为“prevButton”，“放大”为“bigButton”，“缩小”
为“smallButton”，“声音控制按钮”，“playpausebtn”，“向前滚动”为“prevFrom”，“向后滚动”为“nextFrom”。
（8）在最上层新建一个名为“AS”的图层，在第120帧插入一个关键帧，输入如下的脚本。
最后保存测试影片，完成动画的制作。
通过本例的学习，读者可以进一步的巩固前面章节所学的基础知识，并初步掌握FlashCS5各种功能的综合利用，从而使动画作品更加地完美。
9.3Flash网站开发——新型团队网站
Flash动画的最大的优势就是流行于网络及支持交互，本案例就利用Flash的这一特点，开发一个与传统网站具有较大的差别的新型网站。该网站摒弃了传统网页翻页浏览的做法，改为弹出窗口式的浏览方式。窗口支持最大化、关闭、编辑等特点，使用起来也十分方便。
设计思路有网页设计分析、图形素材制作、控制代码开发、测试完善网站。设计效果如图9-68所示。
9.3.1开发准备-设计分析
对于较大型的开发，前期的设计分析尤为重要。可以说设计分析决定了作品整体水平的高低。
本实例开发的是一个团队的网站，所以根据一般团队对其宣传网站的功能需求，这里将网站的页面划分为如图9-69所示的模块。
其中“开始”、“团队介绍”、“动画展示”、“视频展示”、“仿真技术”、“联系我们”6个小板块为6个导航按钮，用于打开相对应的窗口，并在主窗口区中进行展示，从而完成网页的宣传功能。
9.3.2实例开发-非代码部分
网站模块中的团队标志、团队格言、版权申明、页面布置都不需要进行代码编辑，较为简单。
具体的制作过程如下。
1．背景制作
（1）新建一个Flash文档，设置文档尺寸为“766×660”像素，背景颜色为“黑色”，其他属性使用默认参数。
（2）新建至5个图层，并从上到下一次重命名为“团队标志”层、“导航按钮”层、“团队格言”层、“版权申明”层和“背景”层，如图9-70所示。
（3）选中“背景”层，将素材“第9章\新型团队网站开发\网页背景图片.png”文件导入到舞台中，调整图片尺寸为“766×600”像素并与舞台居中对齐，使其刚好覆盖整个舞台，如图9-71所示。
2．制作团队标志
（1）新建一个影片剪辑元件，并重命名为“团队标志”，进入元件内部编辑。将默认“图层1”重命名为“背景图形”层。
（2）选择“椭圆工具”，绘制一个圆形，在其【属性】面板中设置宽、高为“120×120”
像素、笔触颜色和填充颜色都为“黑色”，笔触高度为“1”，位置坐标X、Y分别为“0”、“0”。
（3）选择“矩形工具”，绘制一个矩形，在其【属性】面板中设置宽、高为“240×120”
像素、填充颜色为“无”，笔触颜色都为“黑色”，笔触高度为“1”，位置坐标X、Y分别为“60”、“0”。
（4）删除图9-77中矩形左边与圆重叠的多余边，然后选择“颜料桶工具”，填充圆形和矩形框构成的图形，填充颜色设置为“白色”。
（5）新建图层并重命名为“文字”层，将其拖曳到“背景图形”图层的上面。
（6）选择“文字工具”，输入字母“Victory”，设置字体为“TimesNewRoman”，文字颜色为“白色”。选中字母“ictory”，设置其字体大小为“12”。选中字母“V”，设置其字体大小为“160”，设置“V”的字母间距为“-30”，然后设置文字的位置，如图9-72所示。
（7）使用“文字工具”输入文字“蓝鹰科技”，并设置文字字体为“方正综艺简体”（读者也可以选择一种自己喜欢的字体），文字大小为“35”，文字颜色为“003399”，字母间距为“5”，并设置文字的位置，如图9-73所示。
（8）至此，团队标志制作完成，选中主场景中的“团队标志”图层，并将“团队标志”
元件拖曳到主场景，放置到如图9-74所示的位置。
3．制作团队格言
（1）新建一个影片剪辑元件，命名为“团队格言”。进入元件内部进行编辑，新建如图9-75所示的5个图层，并延长所有图层至第180帧处。
（2）在“大海浪”和“小海浪”图层上分别绘制如图9-76所示海浪图形。设置海浪图形的填充颜色为“00CDFF”，【Alpha】参数为“30%”，笔触颜色为“00CDFF”，“Alpha”参数为“40%”。
（3）设置“大海浪”图形的大概位置坐标X、Y分别为“-245.0”、“0”，设置“小海浪”
图形的大概位置坐标X、Y分别为“-405.5”、“13.5”，如图9-77所示。
（4）在“大海浪”和“小海浪”图层的第180帧处插入关键帧，并在第180帧处，设置“大海浪”图形的大概位置坐标X、Y分别为“-52.0”、“0”，设置“小海浪”图形的大概位置坐标X、Y分别为“-65.5”、“13.5”，如图9-78所示。
说明：此处设置海浪的位置是为了制作优美的海浪效果，所以对海浪的位置和大小没有精确的要求，只要满足最终的设计效果即可。
（5）在“大海浪”和“小海浪”图层上创建形状补间动画。
（6）在“海浪遮罩”图层上利用“矩形工具”绘制一个圆角矩形，并设置圆角矩形在第1帧处的位置如图9-79所示。
（7）将“海浪遮罩”层转化为遮罩层，“大海浪”层和“小海浪”层都转化为被遮罩层。
得到图9-80所示的效果。
（8）为了制作方便，将“海浪遮罩”、“大海浪”、“小海浪”3个图层锁定。在“聚光特效”层的第15帧处插入关键帧，然后利用“椭圆工具”绘制一个圆形，设置圆的填充类型为“放射状”，笔触颜色为“无”，效果如图9-81所示。
（9）在第20帧插入关键帧，然后再返回第15帧使用“任意变形工具”将圆形调整成如图9-82所示的形状。
（10）在第15帧和第20帧之间创建形状补间动画，得到聚光效果，然后在第22帧处插入空白关键帧。
（11）在“文字”图层的第21帧插入关键帧，然后使用文字工具输入“拼”字，设置文字的颜色为“FFFF00”，设置文字的大小和位置如图9-83所示。
（12）每间隔3帧，使用同样的方法制作剩下的7个字“搏睿智创新务实”的动画，制作完成，效果如图9-84所示。
（13）在文字层的第161帧，插入关键帧，将文字图层上的所有文字转化为元件，然后在第180帧插入关键帧，设置第180帧文字元件的【Alpha】值为“0”，设置文字元件的形状如图9-85所示。在第161帧和第180帧之间创建补间动画，完成文字消失的特效。
（14）至此“团队格言”元件制作完成，将其拖曳到主场景的“团队格言”图层上，并设置其位置如图9-86所示。
4．制作版权申明
版权制作十分简单，在主场景的“版权申明”图层上，绘制一条直线，然后输入“蓝鹰科技版权所有”8个字，并将其放置到舞台的最下边，如图9-87所示，即制作完成。
9.3.3实例开发-代码部分
剩下的导航按钮和弹出窗口的制作较为复杂，最终要实现导航按钮控制窗口的弹出，所以一定要注意按钮制作和窗口制作的关联部分。
由于本案例中涉及的导航按钮和弹出窗口制作方法大致一样，所以这里以“团队介绍”
相关的弹出窗口和导航按钮的制作为例来讲解。
制作步骤如下。
1．弹出窗口制作
（1）新建一个影片剪辑元件，重命名为“TeamWindows”，然后进入元件内部进行编辑。
（2）新建至6个图层，从上到下依次按照如图9-88命名。
（3）在“背景”图层上，选择“矩形工具”，绘制一个矩形，其矩形边角半径为“10”，填充颜色为“黑色”，【Alpha】值为“40%”，笔触颜色为“黑色”，宽、高为“350×230”像素，位置坐标X、Y分别为“0”、“0”，如图9-89所示。
（4）选择矩形，将其转化为影片剪辑元件，并设置其“实例名称”为“windowsBG”，以备后面程序调用。
