第1次 实验网页设计的素材组织.docx

第1次 实验网页设计的素材组织.docx

《第1次 实验网页设计的素材组织.docx》由会员分享，可在线阅读，更多相关《第1次 实验网页设计的素材组织.docx（12页珍藏版）》请在冰豆网上搜索。

第1次实验网页设计的素材组织

第1次实验网页设计的素材组织

1、实验环境

Windows/xp、PhotoshopCS2、MacromediaFlash8.0

2、实验内容

2-1）《大学计算机应用基础实验与DIY》[117页案例3-6]（要求对纽扣的形状和颜色有创新）

2-2）将两张图片组合成一个新的作品，体现创意，素材可以选择“实验素材”文件夹下的文件，也可自选。

2-3）《大学计算机应用基础实验与DIY》[128页案例3-9、3-10]

2-4）制作一个片头动画，可以参见“实验样例”文件夹中的文件。

3、拓展实验

3-1）利用实验素材中的“DOG”文件夹中的素材图片制作一个小狗的GIF动画。

【操作步骤】

步骤1：

启动flash，导入素材；

图1

步骤2：

将第1幅图片DOG1.BMP拖动到舞台中，利用“窗口/对齐”命令使图片水平和垂直居中。

图2

步骤3：

单击“时间轴”面板，右单击第2帧，插入关键帧，按步骤2所示插入第2幅图片DOG2.BMP。

图3

步骤4：

参照前述步骤，依次插入图片DOG3.BMP~DOG8.BMP，（注：

插入图片后，应及时删掉前面的图片），效果见下图。

图4

步骤5：

选择“文件/导出/导出影片”，“保存类型”选择“GIF动画”；

图5

图6

3-2）变形动画练习：

制作一个使自己的姓名变化到学号的变形动画。

效果参见实验结果文件夹下的”姓名动画.swf”.

【操作步骤】

步骤1：

启动flash，通过工具箱中的文本工具，输入自己的姓名，利用“对齐”面板使其居中。

图7

步骤2：

通过“修改/分离”命令，将文字分离（需分离多次）；

图8

步骤3：

在“时间轴”面板的第60帧处插入关键帧，删除姓名，输入自己的学号，参照前述方法，居中对齐并分离；

图9

步骤4：

“属性”面板中，补间选“形状”，时间轴面板如下图。

图10

步骤5：

以donghua0.fla作为文件名保存最终结果。

图11

3-3）制作从小人1变为小人2动画。

以“donghua1.fla”为文件名，保存最终结果。

效果参见实验结果文件夹下的样例“小人渐变.swf”。

【操作步骤】

步骤1：

在Flash中，选择“文件”/“打开”命令，打开实验素材文件夹下的渐变素材.fla文件。

步骤2：

选择“窗口”/“库”命令，打开“库”面板。

在“库”面板的下拉列表中选择“渐变素材.fla”。

步骤3：

单击图层1的第1帧，从库中拖出小人1图形，放置舞台的左下角。

用Ctrl+B（多次）打散小人1图形。

如图12所示。

步骤4：

在图层1的第24帧处，单击鼠标右键，在快捷菜单中单击“插入空白关键帧”命令；从库中拖出小人2图形，放置舞台的右上角。

用Ctrl+B打散小人2图形。

如图13所示。

步骤5：

单击1到24帧之间的任一帧处，在“属性”面板的“补间”下拉列表中选择“形状”选项。

步骤6：

按Ctrl+Enter键，看动画效果。

步骤7：

选择“文件”/“保存”命令，以“donghua1.fla”为文件名，保存最终结果。

3-4）打开sc.fla文件，按下列要求制作动画，效果参见实验结果文件夹下的样例“sample.swf”（除“样例”字符外），制作结果以donghua2.fla为文件名保存在自己的学号文件夹下，注意：

添加并选择合适的图层，动画总长为60帧。

（1）将元件16放置在图层1，在第1帧到第30帧，设置其从无到有的移动效果，并静止显示至60帧。

（2）将元件12放置在图层2，在第1帧到第30帧设置其移动的动画效果，在第30帧到第60帧，设置其从有到无的动画效果。

【操作步骤】

启动FlashMX2004，打开sc.fla文件，执行“Ctrl+L”组合键打开图库。

步骤1：

选中图层1第1帧，将图库中的元件16拖放至场景右下放以外的位置，将第30帧设为关键帧，依据样例在此帧中将元件16调整到适当的位置。

选中第1帧，将补间选项选为[动作]命令。

步骤2：

选中第1帧中的元件16，将属性面版中的颜色选项选为“Alpha”命令，并将后面的数值改为“0%”，即为透明得，如图14所示。

由于已设为全透明，所以看不见。

图14

步骤3：

新建图层2，选中此图层的第1帧，将元件12放置在合适的位置，将第30帧设为关键帧，调整此帧中元件12至适当的位置，选中第1帧，在属性面版中将补间选项选为[动作]命令；将第60帧设为关键帧，调整此帧中元件12至适当的位置，并将元件12的透明度设为“0%”（参见本例中的步骤3和图14）；选中第30帧，在属性面版中将补间选项选为[动作]命令。

如图15所示。

图15

步骤4：

执行[文件]→[导出]→[导出影片]菜单命令，将文件名设置为donghua2.swf存放在自己的学号文件夹下。

步骤5：

选择“文件”/“保存”命令，以“donghua2.fla”为文件名，保存最终结果。

3-5）制作枫叶图形放大的动画，以donghua3.swf为文件名，存放在自己学号文件夹下。

效果参见实验结果文件夹下的样例文件“sample3.swf”。

【操作步骤】

步骤1：

打开Flash应用程序窗口，新建文档。

步骤2：

用“文件”/“导入”/“导入到舞台”命令，打开“导入”对话框，选择实验素材文件夹中的“枫叶.wmf”文件，导入到舞台上。

如图16所示。

图16导入枫叶图

步骤3：

选中导入的枫叶图，选择“修改”/“转换为元件”命令，在打开的“转换为元件”对话框中输入元件的名称：

枫叶，单击“图形”单选按钮，单击“注册”中心的点。

单击“确定”按钮，将舞台上的枫叶图转换为“枫叶”元件。

如图17所示。

图17枫叶图转换为图形元件的过程

步骤4：

在第20帧处，单击鼠标右键，在快捷菜单中选择“插入关键帧”命令。

单击工具箱上的任意变形工具

后，拖动对角线上的控制点，放大枫叶图形。

在1到20帧之间的任一帧处，单击鼠标右键，在快捷菜单中选择“创建补间动画”命令。

最终的时间轴及场景如图18所示：

图18枫叶放大的时间轴

步骤5：

按Ctrl+Enter键，看动画效果。

步骤6：

选择“文件”/“保存”命令，将文件名设置为donghua3.fla存放在自己学号文件夹下。

步骤7：

执行[文件]→[导出]→[导出影片]菜单命令，将文件名设置为donghua3.swf存放在自己学号文件夹下。