
2.5 综合案例——制作“我的大学生活”相册
学习目的
利用本章所学知识制作第一个Flash动画。
重点难点
调整导入图片尺寸
制作不间断滚动效果
用大学时的生活照片制作一个简单的相册,最终效果如图2-25所示。设计该相册时,要求尺寸为600像素×200像素,最少使用5张照片,并且在照片滚动时不能产生停顿,这是初学时容易犯的错误。

图2-25 “我的大学生活”相册效果图
操作步骤
1.文档属性设置
Step 01 启动Flash CS4,选择【开始】→【所有程序】→【Adobe Flash CS4】→【Adobe Flash CS4 Professional】命令。
Step 02 按下【Ctrl+N】组合键,在弹出的【新建文档】对话框中,选择【常规】选项卡中的“Flash文件(ActionScript 2.0)”选项,最后单击【确定】按钮,新建一个空白文档。
Step 03 按下【Ctrl+J】组合键,在弹出的【文档属性】对话框中,将 “尺寸”设置为600像素×200像素,“帧频”设置为12fps,其他属性保持默认设置,单击【确定】按钮,进入文档编辑界面,如图2-26所示。

图2-26 【文档属性】对话框
2.导入素材
Step 01 选择【文件】→【导入】→【导入到库】命令,在弹出的【导入到库】对话框中打开“素材\第2章\我的大学生活”文件夹,选择1.jpg~6.jpg图片文件,然后单击【打开】按钮,完成导入素材到库的操作,如图2-27所示。

图2-27 导入文件
Step 02 选择【窗口】→【库】命令,打开【库】面板,如图2-28所示。在【库】面板中分别右击6张图片,在弹出的快捷菜单中选择【属性】命令,如图2-29所示。然后在弹出的【位图属性】对话框中,在“品质”选项组中选择“自定义”单选按钮,在后面的文本框中保持默认数值“50”不变。单击【确定】按钮,完成设置操作,如图2-30所示。

图2-28 打开【库】面板

图2-29 选择【属性】命令

图2-30 【位图属性】对话框
3.新建元件
Step 01 按【Ctrl+F8】组合键,在弹出的【创建新元件】对话框中的“名称”文本框输入“照片”,“类型”设置为“图形”,如图2-31所示。然后单击【确定】按钮,进入“照片”图形元件的编辑界面。

图2-31 创建图形元件
Step 02 将【库】面板中的1.jpg~6.jpg图片文件依次拖放到舞台上,首尾相接拼好,如图2-32所示。

图2-32 将图片首尾相接拼好
Step 03 现在将图片与舞台居中对齐,使用【选择工具】选择全部6张图片,如图2-33所示。然后按【Ctrl+G】组合键,将6张图片组合。这样便可以对6张图片进行整体操作。按【Ctrl+K】组合键,打开【对齐】面板,按下【相对于舞台】、【水平中齐】、【垂直中齐】按钮,如图2-34~图2-36所示。

图2-33 选择全部6张图片

图2-34 相对于舞台

图2-35 水平中齐

图2-36 垂直中齐
4.主场景绘制
Step 01 单击【场景1】按钮,进入场景编辑界面,如图2-37所示。在场景中从【库】面板中将“照片”元件拖放到舞台中,单击工具箱中的【任意变形工具】,按住【Shift】键的同时,拖动照片元件的右下角,使元件按比例缩小到合适大小。然后按下【Ctrl+K】组合键,打开【对齐】面板,按下【相对于舞台】、【左对齐】、【垂直中齐】按钮,如图2-38所示。对齐效果如图2-39所示。

图2-37 场景编辑界面

图2-38 设置对齐方式

图2-39 对齐效果
Step 02 在“图层1”图层的第300帧处,按【F6】键,插入一个关键帧,将图形元件水平移至左侧舞台之外,使图形元件的右侧与舞台的左侧对齐。然后在第1帧与第300帧中间任意一帧处右击,在弹出的快捷菜单中选择【创建传统补间】命令,效果如图2-40所示。

图2-40 创建传统补间
Step 03 选择“图层1”图层上的第1帧,在图形元件上右击,在弹出的快捷菜单中选择【复制帧】命令,单击【新建图层】按钮,如图2-41所示。新建“图层2”图层,在“图层2”图层的第1帧处右击,在弹出的快捷菜单中选择【粘贴帧】命令,粘贴到当前位置。然后在“图层2”图层的第300帧处,按【F6】键插入一个关键帧。

图2-41 新建图层
Step 04 回到“图层2”图层的第1帧,将图形元件水平右移,使其与“图层1”图层中的图形元件对接,如图2-42所示。最后在“图层2”图层的第1帧与第300帧中间任意帧处右击,在弹出的快捷菜单中选择【创建传统补间】命令。

图2-42 将图形元件对接
5.去除动画中的停顿
Step 01 按住【Shift】键的同时选中“图层1”和“图层2”图层的第299帧,按【F6】键,插入关键帧,如图2-43所示。然后在按住【Shift】键的同时选中“图层1”和“图层2”图层的第300帧,右击,在弹出的快捷菜单中选择【删除帧】命令,将两层的第300帧删除。

图2-43 插入关键帧
Step 02 按【Ctrl+S】组合键,保存文件为“我的大学生活.fla”,按【Ctrl+Enter】组合键,测试影片动画,如图2-44所示。

图2-44 测试影片动画效果
案例总结
图片不间断滚动的关键是第1帧与最后1帧位置完全相同,所以用复制“图层1”图层的第1帧,粘贴到“图层2”图层的最后1帧相同位置,来达到这个目的。但正因为第1帧和最后1帧的位置完全相同,即在该位置会有两帧(最后1帧和第1帧),这样就会产生1帧的停顿,所以将最后1帧删除后,就避免了这个停顿。