时间轴和行为
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
间轴”面板，如图6-1-4所示。该面板中的各个工具及其他选项的作用如下。 • （1）“时间轴”下拉列表框：其内列出了当前页面内所有时间轴动画的名字，
选中其中一个选项后，相应的动画就会在“时间轴”面板中显示出来。右击 “时间轴”面板内部，调出“时间轴”快捷菜单，单击该菜单中的“添加时 间轴”菜单命令，即可在“时间轴”下拉列表框内添加一个新的时间轴动画 （默认名称为“Timeline”+序号）。 • （2）回放头：播放动画时，它在时间标尺上移动，好像放像机的磁头一样。 用鼠标拖曳它在时间标尺上移动，当它移到某一时间单位处时，相应的动画 画面就会出现在网页窗口内。 • （3）【播放】按钮：单击它，可以使动画前进一个帧。按住该按钮不放，可 以向正常方向播放动画。 • （4）【回放】按钮：单击它，可以使动画回退一帧。单击按下该按钮不放， 可以向相反方向播放动画。
第3页/共52页
• （5）【归位】按钮：将动画图像移到起始位置，同时回放头也移动到该位置 处。
• （6）“回放头位置”（也是当前帧号码）文本框：用来输入显示和设置“回 放头”所处的时间轴位置号，即当前帧号码。
• （7）“速率”文本框：用来输入每秒钟播放的帧数。 • （8）“自动播放”复选框：选中它后，则在网上下载后会自动播放。不选中
第8页/共52页
• 如果对关键帧的位置不满意，可以用鼠标拖曳关键帧上的小圆到满意的位置。 • 如果要删除关键帧，可以单击选中要删除的关键帧，单击鼠标右键，调出时
间轴快捷菜单，再单击该菜单中的“移除关键帧”菜单命令即可。 • 2．制作沿曲线路径移动的动画 • 方法1：单击选中关键帧，用鼠标拖曳动画层到新的位置，即可确定关键帧图
它时，需要在使用行为事件时才可以播放。 • （9）“循环”复选框：选中它后，则循环播放动画，否则只播放一次动画。 • （10）动画通道：它由许多图层组成，表示可以在一个页面内加入多个时间
轴动画，但最多可以加32个。它的左边标有图层的编号，图层编号大的动画 在图层编号小的动画之上。 • （11）动画条：表示一个动画所占的帧数，上面标有该动画所在层的名字。 它的起始处和终止处各有一个小圆，表示首帧和终止帧。如果设置了关键帧， 则关键帧也会有一个小圆。 • （12）行为通道左边标有字母“B”，可以在该通道的特定帧使用行为。 • （13）行为帧：加入了行为的帧，它在“行为通道”内。
• （1）单击选中动画条内要加入关键帧的位置，回放头会随之移到此时间位置， 同时回放头回移到此处，用来指示选中的位置。例如，选择第15帧（将终止 帧移到第30帧处）。
• （2）在动画条内，单击鼠标右键，调出时间轴快捷菜单。再单击该菜单内的 “增加关键帧”菜单命令，即可在选中的位置处插入一个关键帧，如图所示。 按住【Ctrl】键，单击要加入关键帧的位置，也可以添加关键帧。
像的位置。此时，动画移动的路径线会变为一条曲线。可以看出，路径线的 起始位置与终止位置不变。如果要改变关键帧图像的位置，可以再用鼠标拖 曳动画层到新的位置。 • 按住【播放】按钮不放，即可在网页设计窗口内看到沿曲线路径移动的动画 了。 • 方法2：可以用鼠标拖曳的方法来制作沿曲线路径移动的动画，设计过程如下。 • 在页面内插入一个层，并给该层起一个名字。然后，在层内插入一个图像或 输入一些文字等，再将插有图像或文字的层移到动画的起始位置。此处，层 中插入的是图像。 • 单击选中该层，再单击“修改”→“时间轴”→“录制层路径”菜单命令， 或者单击时间轴快捷菜单中的“录制层路径”菜单命令。
第5页/共52页
• 如果此时选中了“循环”复选框，还应用鼠标拖曳行为通道的行为帧到终止 帧的下一个位置处。用鼠标向右拖曳第15帧小圆到第30帧处，如图所示。
• （6）用鼠标拖曳动画层到目标处。当松开鼠Biblioteka Baidu左键时，会看到一条直线，表 示图像移动的路径。
• 在选中“循环”复选框的情况下，如果先用鼠标拖曳动画层到目标处，再调 整“时间轴”面板中终止帧的位置，则还需要用鼠标拖曳调整“动作帧”到 终止帧的下一帧位置处。
第9页/共52页
• 在网页设计窗口内，按照希望的曲线路径，用鼠标拖曳层。随着鼠标拖曳的 进行，会产生一条曲线路径线。
• （7）按住【播放】按钮不放，即可在网页设计窗口内看到动画。
第6页/共52页
• 6.2 【案例34】添加游动广告的“体育世界”网 页
第7页/共52页
• “时间轴”面板可以在用户给出起始帧和终止帧后自动产生中间过程的各帧。 如果动画的移动路径不是直线的，中间有转折点，则转折点处的画面就是关 键帧。加入关键帧，可以使沿直线路径移动的动画变为沿曲线或折线路径移 动的动画，添加关键帧的方法如下。
第4页/共52页
• （14）时间标尺：给出了与时间对应的帧数码。 • 2．直线移动动画的制作 • 下面来使用“时间轴”面板制作一个简单的、沿直线移动的动画。该动画的
制作方法如下所述。 • （1）在页面内插入一个层，给该层起一个名字，例如“Layer1”。然后在层
内插入一个图像、动画或输入一些文字等。此处层中插入的是GIF动画，如 图6-1-6所示。 • （2）将插有图像或文字的层移到动画的起始位置。 • （3）单击“窗口”→“时间轴”菜单命令，调出“时间轴”面板。 • （4）用鼠标将层拖曳到“时间轴”面板的动画通道内，或单击“修 改”→“时间轴”→“增加对象到时间轴”菜单命令。这时，“时间轴”面 板的动画通道内会出现一个动画条。如果选中了“循环”复选框，则在动画 通道中，会同时出现一个“动作帧” 。 • （5）单击选中动画条的终止帧。默认的动画帧数是15帧，如果要调整动画的 帧数，可用鼠标拖曳动画条终止帧的小圆。在改变了终止帧的位置之后，
• 6.8 【案例40】“控制播放Flash动画和MIDI音乐”网页 • 6.9 【案例41】“活动菜单”网页 • 6.10 【案例42】“拼图”网页
第1页/共52页
• 6.1 【案例33】“体育世界”网页
第2页/共52页
• 1．“时间轴”面板 • 单击“窗口”→“时间轴”菜单命令或按【Alt+F9】组合键，即可调出“时
选中其中一个选项后，相应的动画就会在“时间轴”面板中显示出来。右击 “时间轴”面板内部，调出“时间轴”快捷菜单，单击该菜单中的“添加时 间轴”菜单命令，即可在“时间轴”下拉列表框内添加一个新的时间轴动画 （默认名称为“Timeline”+序号）。 • （2）回放头：播放动画时，它在时间标尺上移动，好像放像机的磁头一样。 用鼠标拖曳它在时间标尺上移动，当它移到某一时间单位处时，相应的动画 画面就会出现在网页窗口内。 • （3）【播放】按钮：单击它，可以使动画前进一个帧。按住该按钮不放，可 以向正常方向播放动画。 • （4）【回放】按钮：单击它，可以使动画回退一帧。单击按下该按钮不放， 可以向相反方向播放动画。
第3页/共52页
• （5）【归位】按钮：将动画图像移到起始位置，同时回放头也移动到该位置 处。
• （6）“回放头位置”（也是当前帧号码）文本框：用来输入显示和设置“回 放头”所处的时间轴位置号，即当前帧号码。
• （7）“速率”文本框：用来输入每秒钟播放的帧数。 • （8）“自动播放”复选框：选中它后，则在网上下载后会自动播放。不选中
第8页/共52页
• 如果对关键帧的位置不满意，可以用鼠标拖曳关键帧上的小圆到满意的位置。 • 如果要删除关键帧，可以单击选中要删除的关键帧，单击鼠标右键，调出时
间轴快捷菜单，再单击该菜单中的“移除关键帧”菜单命令即可。 • 2．制作沿曲线路径移动的动画 • 方法1：单击选中关键帧，用鼠标拖曳动画层到新的位置，即可确定关键帧图
它时，需要在使用行为事件时才可以播放。 • （9）“循环”复选框：选中它后，则循环播放动画，否则只播放一次动画。 • （10）动画通道：它由许多图层组成，表示可以在一个页面内加入多个时间
轴动画，但最多可以加32个。它的左边标有图层的编号，图层编号大的动画 在图层编号小的动画之上。 • （11）动画条：表示一个动画所占的帧数，上面标有该动画所在层的名字。 它的起始处和终止处各有一个小圆，表示首帧和终止帧。如果设置了关键帧， 则关键帧也会有一个小圆。 • （12）行为通道左边标有字母“B”，可以在该通道的特定帧使用行为。 • （13）行为帧：加入了行为的帧，它在“行为通道”内。
• （1）单击选中动画条内要加入关键帧的位置，回放头会随之移到此时间位置， 同时回放头回移到此处，用来指示选中的位置。例如，选择第15帧（将终止 帧移到第30帧处）。
• （2）在动画条内，单击鼠标右键，调出时间轴快捷菜单。再单击该菜单内的 “增加关键帧”菜单命令，即可在选中的位置处插入一个关键帧，如图所示。 按住【Ctrl】键，单击要加入关键帧的位置，也可以添加关键帧。
像的位置。此时，动画移动的路径线会变为一条曲线。可以看出，路径线的 起始位置与终止位置不变。如果要改变关键帧图像的位置，可以再用鼠标拖 曳动画层到新的位置。 • 按住【播放】按钮不放，即可在网页设计窗口内看到沿曲线路径移动的动画 了。 • 方法2：可以用鼠标拖曳的方法来制作沿曲线路径移动的动画，设计过程如下。 • 在页面内插入一个层，并给该层起一个名字。然后，在层内插入一个图像或 输入一些文字等，再将插有图像或文字的层移到动画的起始位置。此处，层 中插入的是图像。 • 单击选中该层，再单击“修改”→“时间轴”→“录制层路径”菜单命令， 或者单击时间轴快捷菜单中的“录制层路径”菜单命令。
第5页/共52页
• 如果此时选中了“循环”复选框，还应用鼠标拖曳行为通道的行为帧到终止 帧的下一个位置处。用鼠标向右拖曳第15帧小圆到第30帧处，如图所示。
• （6）用鼠标拖曳动画层到目标处。当松开鼠Biblioteka Baidu左键时，会看到一条直线，表 示图像移动的路径。
• 在选中“循环”复选框的情况下，如果先用鼠标拖曳动画层到目标处，再调 整“时间轴”面板中终止帧的位置，则还需要用鼠标拖曳调整“动作帧”到 终止帧的下一帧位置处。
第9页/共52页
• 在网页设计窗口内，按照希望的曲线路径，用鼠标拖曳层。随着鼠标拖曳的 进行，会产生一条曲线路径线。
• （7）按住【播放】按钮不放，即可在网页设计窗口内看到动画。
第6页/共52页
• 6.2 【案例34】添加游动广告的“体育世界”网 页
第7页/共52页
• “时间轴”面板可以在用户给出起始帧和终止帧后自动产生中间过程的各帧。 如果动画的移动路径不是直线的，中间有转折点，则转折点处的画面就是关 键帧。加入关键帧，可以使沿直线路径移动的动画变为沿曲线或折线路径移 动的动画，添加关键帧的方法如下。
第4页/共52页
• （14）时间标尺：给出了与时间对应的帧数码。 • 2．直线移动动画的制作 • 下面来使用“时间轴”面板制作一个简单的、沿直线移动的动画。该动画的
制作方法如下所述。 • （1）在页面内插入一个层，给该层起一个名字，例如“Layer1”。然后在层
内插入一个图像、动画或输入一些文字等。此处层中插入的是GIF动画，如 图6-1-6所示。 • （2）将插有图像或文字的层移到动画的起始位置。 • （3）单击“窗口”→“时间轴”菜单命令，调出“时间轴”面板。 • （4）用鼠标将层拖曳到“时间轴”面板的动画通道内，或单击“修 改”→“时间轴”→“增加对象到时间轴”菜单命令。这时，“时间轴”面 板的动画通道内会出现一个动画条。如果选中了“循环”复选框，则在动画 通道中，会同时出现一个“动作帧” 。 • （5）单击选中动画条的终止帧。默认的动画帧数是15帧，如果要调整动画的 帧数，可用鼠标拖曳动画条终止帧的小圆。在改变了终止帧的位置之后，
• 6.8 【案例40】“控制播放Flash动画和MIDI音乐”网页 • 6.9 【案例41】“活动菜单”网页 • 6.10 【案例42】“拼图”网页
第1页/共52页
• 6.1 【案例33】“体育世界”网页
第2页/共52页
• 1．“时间轴”面板 • 单击“窗口”→“时间轴”菜单命令或按【Alt+F9】组合键，即可调出“时