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

1、第1次 实验网页设计的素材组织第1次 实验网页设计的素材组织1、 实验环境Windows/xp 、PhotoshopCS2、Macromedia Flash 8.02、 实验内容2-1）大学计算机应用基础实验与DIY 117页案例3-6（要求对纽扣的形状和颜色有创新）2-2）将两张图片组合成一个新的作品，体现创意，素材可以选择“实验素材”文件夹下的文件，也可自选。2-3）大学计算机应用基础实验与DIY 128页案例3-9、3-102-4）制作一个片头动画，可以参见“实验样例”文件夹中的文件。3、 拓展实验 3-1）利用实验素材中的“DOG”文件夹中的素材图片制作一个小狗的GIF动画。【操作步骤

2、】步骤1：启动flash，导入素材；图1步骤2：将第1幅图片DOG1.BMP拖动到舞台中，利用“窗口/对齐”命令使图片水平和垂直居中。图2步骤3：单击“时间轴”面板，右单击第2帧，插入关键帧，按步骤2所示插入第2幅图片DOG2.BMP。图3步骤4：参照前述步骤，依次插入图片DOG3.BMPDOG8.BMP，（注：插入图片后，应及时删掉前面的图片），效果见下图。图4步骤5：选择“文件/导出/导出影片”，“保存类型”选择“GIF动画”；图5图63-2）变形动画练习：制作一个使自己的姓名变化到学号的变形动画。效果参见实验结果文件夹下的”姓名动画.swf”.【操作步骤】步骤1：启动flash，通过工具

3、箱中的文本工具，输入自己的姓名，利用“对齐”面板使其居中。图7步骤2：通过“修改/分离”命令，将文字分离（需分离多次）；图8步骤3：在“时间轴”面板的第60帧处插入关键帧，删除姓名，输入自己的学号，参照前述方法，居中对齐并分离；图9步骤4：“属性”面板中，补间选“形状”，时间轴面板如下图。图10步骤5：以donghua0.fla作为文件名保存最终结果。图113-3）制作从小人1变为小人2动画。以“donghua1.fla”为文件名，保存最终结果。效果参见实验结果文件夹下的样例“小人渐变.swf”。【操作步骤】步骤1：在Flash中，选择“文件”/“打开”命令，打开实验素材文件夹下的渐变素材.f

4、la文件。步骤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.

5、fla”为文件名，保存最终结果。3-4）打开sc.fla文件，按下列要求制作动画，效果参见实验结果文件夹下的样例“sample.swf”（除“样例”字符外），制作结果以donghua2.fla为文件名保存在自己的学号文件夹下，注意：添加并选择合适的图层，动画总长为60帧。（1）将元件16放置在图层1，在第1帧到第30帧，设置其从无到有的移动效果，并静止显示至60帧。（2）将元件12放置在图层2，在第1帧到第30帧设置其移动的动画效果，在第30帧到第60帧，设置其从有到无的动画效果。【操作步骤】启动Flash MX 2004，打开sc.fla文件，执行“Ctrl+L”组合键打开图库。步骤1：选中

6、图层1第1帧，将图库中的元件16拖放至场景右下放以外的位置，将第30帧设为关键帧，依据样例在此帧中将元件16调整到适当的位置。选中第1帧，将补间选项选为动作命令。步骤2：选中第1帧中的元件16，将属性面版中的颜色选项选为“Alpha”命令，并将后面的数值改为“0%”，即为透明得，如图14所示。由于已设为全透明，所以看不见。图14步骤3：新建图层2，选中此图层的第1帧，将元件12放置在合适的位置，将第30帧设为关键帧，调整此帧中元件12至适当的位置，选中第1帧，在属性面版中将补间选项选为动作命令；将第60帧设为关键帧，调整此帧中元件12至适当的位置，并将元件12的透明度设为“0%”（参见本例中的

7、步骤3和图14）；选中第30帧，在属性面版中将补间选项选为动作命令。如图15所示。图15步骤4：执行文件导出导出影片菜单命令，将文件名设置为donghua2.swf存放在自己的学号文件夹下。步骤5：选择“文件”/“保存”命令，以“donghua2.fla”为文件名，保存最终结果。3-5）制作枫叶图形放大的动画，以donghua3.swf为文件名，存放在自己学号文件夹下。效果参见实验结果文件夹下的样例文件“sample3.swf”。【操作步骤】步骤1：打开 Flash应用程序窗口，新建文档。步骤2：用“文件”/ “导入”/“导入到舞台”命令，打开“导入”对话框，选择实验素材文件夹中的“枫叶.wm

8、f”文件，导入到舞台上。如图16所示。图16 导入枫叶图 步骤3：选中导入的枫叶图，选择“修改”/“转换为元件”命令，在打开的“转换为元件”对话框中输入元件的名称：枫叶，单击“图形”单选按钮，单击“注册”中心的点。单击“确定”按钮，将舞台上的枫叶图转换为“枫叶”元件。如图17所示。图17 枫叶图转换为图形元件的过程步骤4：在第20帧处，单击鼠标右键，在快捷菜单中选择“插入关键帧”命令。单击工具箱上的任意变形工具后，拖动对角线上的控制点，放大枫叶图形。在1 到 20 帧之间的任一帧处，单击鼠标右键，在快捷菜单中选择“创建补间动画”命令。最终的时间轴及场景如图18所示：图18 枫叶放大的时间轴 步骤5：按Ctrl+Enter键，看动画效果。步骤6： 选择“文件”/“保存”命令，将文件名设置为donghua3.fla存放在自己学号文件夹下。步骤7：执行文件导出导出影片菜单命令，将文件名设置为donghua3.swf存放在自己学号文件夹下。