《FlashSwish动画的设计电机与电气控制精品课程》由会员分享,可在线阅读,更多相关《FlashSwish动画的设计电机与电气控制精品课程(17页珍藏版)》请在金锄头文库上搜索。
1、第四周网页制作与网站设计教程网页制作与网站设计教程淮安信息职业技术学院计算机科学与工程系淮安信息职业技术学院计算机科学与工程系网页制作与网站设计课程组制网页制作与网站设计课程组制 .第五章第五章Flash Swish动画设计动画设计网页制作与网站设计课程讲义网页制作与网站设计课程讲义.网页设计与制作教程网页设计与制作教程本章要点本章要点 动画设计基础知识 Flash Swish动画设计制作动画的具体方法 网页设计中透明动画插入的方法网页制作与网站设计教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程Swish软件界面认识软件界面认识 菜单栏 常用工具栏 插入栏和控制栏 时间线 元
2、素列表栏 电影场景 属性栏网页制作与网站设计教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程Swish制作动画的实例制作动画的实例 演示动画的实例演示动画的实例 1.点击【开始新建一个空电影】按钮,在场景中创建一个电影,在属性中输入动画的宽为776像素,高为149像素,具体参数如图所示。 网页制作与网站设计教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程Swish制作动画的实例制作动画的实例 演示动画的实例演示动画的实例 2.执行“插入”“图像命令,在“翻开对话框中选择“全景图.jpg后点击【翻开】按钮,图片就插入到场景中了,设置电影的变形属性标签,将锚点设置为
3、“左上”,具体设置如左图所示,图像插入的效果如右图所示。 网页制作与网站设计教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程Swish制作动画的实例制作动画的实例 3.点击工具栏中的按钮执行“插入”“文本命令),然后在文本输入区中输入“以评促建 以评促改 以评促管 评建结合 重在建设等字,调整文字的位置。 文本属性设置 文本输入区域 网页制作与网站设计教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程Swish制作动画的实例制作动画的实例 4.在场景中选中“以评促建 以评促改 以评促管 评建结合 重在建设文字对象,执行“添加脚本”“核心效果”“变形命令,如下图。
4、网页制作与网站设计教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程Swish制作动画的实例制作动画的实例 5.在控制栏中点击【播放】按钮测试一下动画效果,发现文字动画消失时过于突然,所以,点击【停顿】按钮停止动画,用鼠标在“时间线调板上的第50帧上点击右键执行“渐近” “淡出命令,再次在控制栏中点击【播放】 按钮测试一下动画效果。6.执行“文件”“导出”“swf命令,即可弹出“导出为swf对话框,选择路径,输入文件名即可保存。 7.使用IE浏览器打开动画,预览效果如图所示。 网页制作与网站设计教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程网页设计中透明动画的使
5、用实例网页设计中透明动画的使用实例 演示动画的实例演示动画的实例 1.采用制作上一节动画的形式制作一个简单的文字动画,具体方法比上例少插入一个背景图片即可,同时可以设置背景色为蓝色,导出后的效果如图所示。 网页制作与网站设计教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程网页设计中透明动画的使用实例网页设计中透明动画的使用实例 2.在网页中插入一行一列的表格,设置表格的宽高、填充、间距、边框、背景颜色等。参数如上图所示,设置后的效果如下图所示。 网页制作与网站设计教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程网页设计中透明动画的使用实例网页设计中透明动画的使用
6、实例 3.用鼠标在表格中点击一下,然后执行“插入”“媒体”“Flash命令,在弹出的“选择文件对话框中选择“dhbj.swf”(刚制作的动画动画。4.选择动画在“属性面板中点击【参数】按钮,设置“参数选项为wmode,值为transparent,具体如图所示。 wmode transparent 网页制作与网站设计教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程网页设计中透明动画的使用实例网页设计中透明动画的使用实例 5.保存网页,执行“文件”“保管命令,执行“文件”“在浏览器中预览”“iexplore命令快捷键F12)预览网页如图所示本例与上例效果相同)。 网页制作与网站设计
7、教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程网页设计中透明动画的使用实例网页设计中透明动画的使用实例 如果在第三步中,选中“feiniao.swf文件的话,效果如图所示。 网页制作与网站设计教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程习题习题1.简答题2.谈一下GIF动画与FLASH动画的不同。 3.简述使用SwiSHmax软件制作动画的过程。 4.在Dreamweaver中插入透明动画时,需要设置那些参数? 5.操作题6.使用SwiSHmax软件制作文字动画“用户之上 服务第一”。 7.在Dreamweaver中设置背景图后,插入第一题中的动画并设置为透明动画。 网页制作与网站设计教程网页制作与网站设计教程.网页设计与制作教程网页设计与制作教程本章总结本章总结 动画设计基础知识 Flash Swish动画设计制作动画的具体方法 网页设计中透明动画插入的方法网页制作与网站设计教程网页制作与网站设计教程.谢谢大家!谢谢大家!网页设计与制作教程网页设计与制作教程网页制作与网站设计教程网页制作与网站设计教程.