《动态特效设计.ppt》由会员分享，可在线阅读，更多相关《动态特效设计.ppt（21页珍藏版）》请在三一文库上搜索。
1、Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 第9章 动态特效设计 重点内容： 动态特效的设计技术 行为中动作的种类 行为动画的制作 时间轴动画的制作 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 一、动态特效的设计技术： 1. 网页中的动态元素 动态文本 动态图像 动态HTML属性 动态ActiveX、Flash和其他对象 动态表单对象 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 一、动态特效的设计技术： 1. 网页中的动态元素 动态HTML属性 Dreamweaver 应用技术 Dreamweave
2、r 8 实训教程讲义 一、动态特效的设计技术： 2. JavaScript简介 JavaScript是一种描述性语言，可以被嵌入到HTML文件 中。通过使用JavaScript，可以做到响应用户的需求事 件（如表单的输入），而不用任何的网络途径来回传输 资料，所以当一位用户输入一项资料时，它不用经过传 给服务器端处理，再传回来的过程，而直接可以被客户 端的应用程式所处理。JavaScript和Java很类似，但它 要比Java简单得多，相当容易了解。 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 一、动态特效的设计技术： 3. 使用Dreamweaver进行动态特
3、效设计 行为特效 Dreamweaver中的行为是JavaSrcipt的程序库，是动作 和事件的组合行为代码是客户端JavaScript代码，即它 运行于浏览器中，而不是服务器上。在将行为附加到页 元素之后，只要对该元素发生了所指定的事件，浏览器 就会调用与该事件关联的动作，即JavaScript代码。 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 一、动态特效的设计技术： 3. 使用Dreamweaver进行动态特效设计 时间轴特效 利用时间轴可以通过在不同的时间改变层的位置、大小 、可见性和叠放顺序等来创建动画。其原理是将画面连 起来播放，产生运动的错觉。 时
4、间轴动画的基本单位是一个画面，也叫做帧，而其中 起关键性作用的、可以影响整个动画的帧叫做关键帧。 很多帧按照时间的先后顺序连接起来，就形成了动画。 时间轴就是用来排列画面的顺序的。 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 二、行为中动作的种类： （1）交换图像 （2）弹出信息 （3）恢复交换图像 （4）打开浏览器窗口 （5）拖动层 （6）控制Shockwave或Flash （7）播放声音 （8）改变属性 （9）时间轴 （10）显示-隐藏层 （11）显示弹出式菜单 （12）检查插件 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 二
5、、行为中动作的种类： （13）检查浏览器 （14）检查表单 （15）设置导航栏图像 （16）设置文本 （17）调用JavaScript （18）跳转菜单 （19）跳转菜单开始 （20）转到URL （21）隐藏弹出式菜单 （22）预先载入图像 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 三、行为动画的制作： 1. 应用行为 选择网页中要附加行为的对象（如图像或链接），然 后在【行为】面板中单击【添加行为】按钮，从弹出菜 单中选择要附加的行为。当选择某个动作时，将会弹出 一个相应的对话框，显示该动作的参数和说明。在对话 框中进行参数设置后，单击【确定】按钮，即可完成
6、附 加行为的操作。 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 三、行为与动画的制作： 1. 应用行为 【行为】面板【添加行为】菜单 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 三、行为动画的制作： 2. 修改事件 附加行为后，用于触发该 动作的默认事件会显示在 【行为】面板【事件】栏 中。在【事件】栏中单击 要修改的事件，然后单击 该事件右侧出现的下拉按 钮，在弹出的下拉列表框 中选择另一个事件,即可修 改触发事件。 【事件】下拉列表框 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 三、行为动画的制
7、作： 弹出窗口 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 四、时间轴动画的制作： 1. 【时间轴】面板 【时间轴】面板显示层和图像随时间变化的属性。选 择【窗口】|【时间轴】命令即可显示【时间轴】面板 。 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 四、时间轴动画的制作： 2. 创建时间轴动画 添加对象到时间轴 先在页面上插入一个层，并在层中插入要移动的元素， 再把层移到动画的起始位置，然后选择要制作动画的层 ，再选择【修改】|【时间轴】|【添加对象到时间轴】 命令，并在弹出的提示对话框中单击【确定】按钮，一 个动画条即出现在时
8、间轴的第一个通道内。单击动画条 最后一个关键帧标记，然后移动层至动画结束处，在动 画的起始位置与结束位置两点间会自动创建一条直线， 即层的运动轨迹。 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 四、时间轴动画的制作： 2. 创建时间轴动画 记录层路径 创建层的复杂路径 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 四、时间轴动画的制作： 2. 创建时间轴动画 记录层路径 选择所需的层后，将该层移动到动画的起始处，并保持 该层被选择状态，选择【修改】|【时间轴】|【录制层 路径】命令，然后在页面上拖动层，即可创建想要的运 动路径。在动
9、画停止处释放鼠标键，弹出提示用户时间 轴面板可以变动的层属性的提示对话框，单击其中的【 确定】按钮，即会添加一个动画条到时间轴中，同时也 添加了适当数量的关键帧。 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 四、时间轴动画的制作： 2. 创建时间轴动画 记录层路径 记录层路径 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 四、时间轴动画的制作： 3. 修改时间轴 添加和删除帧在【时间轴】面板中，将播放头放 置时间轴上在要添加或删除帧的位置，选择【修改】| 【时间轴】|【添加帧】或【移除帧】命令。 改变关键帧的位置在【时间轴】面板的动
10、画条中 左右拖动要改变位置的关键帧标记。 改变动画的起始时间选择与要改变的动画相应的 动画条，左右拖动此动画条。 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 四、时间轴动画的制作： 3. 修改时间轴 改变动画路径的位置在【时间轴】面板中选择要 改变路径位置的动画条，然后在页面上拖动该动画所对 应的对象。 改变动画的时间长度在【时间轴】面板的动画条 中左右拖动结束帧的标记。 改变动画的播放状态在【时间轴】面板中选择【 自动播放】或【循环】复选框。 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 四、时间轴动画的制作： 4. 控制时间轴的行为 在【时间轴】面板的行为通道中单击要为其添加行为 的帧，再单击【行为】面板中的【添加行为】按钮 ， 为该帧选择一个要执行的动作。此动作出现在【行为】 面板中，并且在【事件】栏中显示触发该动作的事件， 其中还有指定动作发生的帧编号。同时，在【时间轴】 面板的行为通道中会出现一个动作标记。 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义 四、时间轴动画的制作： 5. 时间轴动画小技巧 （1）显示和隐藏层，而不是更改多图像动画的源文件 。 （2）扩展动画条以创建更顺畅的动作。 （3）不要制作大型位图的动画。 （4） 创建简单的动画。