动态特效设计.ppt

1、Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义第9章 动态特效设计重点内容：动态特效的设计技术 行为中动作的种类 行为动画的制作 时间轴动画的制作Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义一、动态特效的设计技术：1.网页中的动态元素 动态文本 动态图像 动态HTML属性 动态ActiveX、Flash和其他对象 动态表单对象Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义一、动态特效的设计技术：1.网页中的动态元素 动态HTML属性Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义一、

2、动态特效的设计技术：2.JavaScript简介JavaScript是一种描述性语言，可以被嵌入到HTML文件中。通过使用JavaScript，可以做到响应用户的需求事件（如表单的输入），而不用任何的网络途径来回传输资料，所以当一位用户输入一项资料时，它不用经过传给服务器端处理，再传回来的过程，而直接可以被客户端的应用程式所处理。JavaScript和Java很类似，但它要比Java简单得多，相当容易了解。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义一、动态特效的设计技术：3.使用Dreamweaver进行动态特效设计 行为特效Dreamweaver中的行为是Ja

3、vaSrcipt的程序库，是动作和事件的组合行为代码是客户端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 实训教程讲义二、行为中动作的种类：（13）检查浏览器（14）检查表单（15）设置导航栏图像（16）设置文本（17）调用JavaSc

5、ript（18）跳转菜单（19）跳转菜单开始（20）转到URL（21）隐藏弹出式菜单（22）预先载入图像Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、行为动画的制作：1.应用行为 选择网页中要附加行为的对象（如图像或链接），然后在【行为】面板中单击【添加行为】按钮，从弹出菜单中选择要附加的行为。当选择某个动作时，将会弹出一个相应的对话框，显示该动作的参数和说明。在对话框中进行参数设置后，单击【确定】按钮，即可完成附加行为的操作。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、行为与动画的制作：1.应用行为【行为】面板【添加行为】菜单

6、Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、行为动画的制作：2.修改事件附加行为后，用于触发该动作的默认事件会显示在【行为】面板【事件】栏中。在【事件】栏中单击要修改的事件，然后单击该事件右侧出现的下拉按钮，在弹出的下拉列表框中选择另一个事件,即可修改触发事件。【事件】下拉列表框Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、行为动画的制作：弹出窗口Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义四、时间轴动画的制作：1.【时间轴】面板【时间轴】面板显示层和图像随时间变化的属性。选择【窗口】|【时间轴】命

7、令即可显示【时间轴】面板。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义四、时间轴动画的制作：2.创建时间轴动画 添加对象到时间轴先在页面上插入一个层，并在层中插入要移动的元素，再把层移到动画的起始位置，然后选择要制作动画的层，再选择【修改】|【时间轴】|【添加对象到时间轴】命令，并在弹出的提示对话框中单击【确定】按钮，一个动画条即出现在时间轴的第一个通道内。单击动画条最后一个关键帧标记，然后移动层至动画结束处，在动画的起始位置与结束位置两点间会自动创建一条直线，即层的运动轨迹。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义四、时间轴动画

8、的制作：2.创建时间轴动画 记录层路径创建层的复杂路径Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义四、时间轴动画的制作：2.创建时间轴动画 记录层路径选择所需的层后，将该层移动到动画的起始处，并保持该层被选择状态，选择【修改】|【时间轴】|【录制层路径】命令，然后在页面上拖动层，即可创建想要的运动路径。在动画停止处释放鼠标键，弹出提示用户时间轴面板可以变动的层属性的提示对话框，单击其中的【确定】按钮，即会添加一个动画条到时间轴中，同时也添加了适当数量的关键帧。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义四、时间轴动画的制作：2.创建时

9、间轴动画 记录层路径记录层路径Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义四、时间轴动画的制作：3.修改时间轴 添加和删除帧在【时间轴】面板中，将播放头放置时间轴上在要添加或删除帧的位置，选择【修改】|【时间轴】|【添加帧】或【移除帧】命令。改变关键帧的位置在【时间轴】面板的动画条中左右拖动要改变位置的关键帧标记。改变动画的起始时间选择与要改变的动画相应的动画条，左右拖动此动画条。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义四、时间轴动画的制作：3.修改时间轴 改变动画路径的位置在【时间轴】面板中选择要改变路径位置的动画条，然后在页面

10、上拖动该动画所对应的对象。改变动画的时间长度在【时间轴】面板的动画条中左右拖动结束帧的标记。改变动画的播放状态在【时间轴】面板中选择【自动播放】或【循环】复选框。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义四、时间轴动画的制作：4.控制时间轴的行为 在【时间轴】面板的行为通道中单击要为其添加行为的帧，再单击【行为】面板中的【添加行为】按钮，为该帧选择一个要执行的动作。此动作出现在【行为】面板中，并且在【事件】栏中显示触发该动作的事件，其中还有指定动作发生的帧编号。同时，在【时间轴】面板的行为通道中会出现一个动作标记。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义四、时间轴动画的制作：5.时间轴动画小技巧（1）显示和隐藏层，而不是更改多图像动画的源文件。（2）扩展动画条以创建更顺畅的动作。（3）不要制作大型位图的动画。（4）创建简单的动画。