009动态特效设计.ppt

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