ADOBE神器ANIMATE教程：创建HTML5动画（二）久等了，上集我们制作了一个具有行走动作的蓝精灵动画，本集我们来为蓝精灵实现往返走动的效果。Symbol，即元件，是动画制作中常用的概念。通过Symbol我们可以封装独立的动画元素，便于管理和重用。脚本，是动画制作中另一个重要的概念。在HTML5动画制作中，脚本即JavaScript脚本，通过脚本我们可以响应动画事件，实现交互，更自由的操控动画元素,比如元件动画的重复播放。准备工作在教程《神器ANIMATE教程：使用SPRITESHEET创建HTML5动画》中，我们制作了一个具有行走动作的蓝精灵动画。在本教程中，我们来为蓝精灵实现往返走动的效果。下载Adobe Edge Animate制作工具在本教程发布的时间，Edge Animate版本为1.5，可以在Adobe云创意平台上免费下载。 您只需要在注册地址注册即可登录下载。下载Edge Animate示例项目文件本教程将在《神器ANIMATE教程：使用SPRITESHEET创建HTML5动画》的基础上继续，您需要下载项目文件smurf+spriteSheet+Tutorial+1.zip。资源文件资源文件如下：1.
Smurf SpriteSheet教程1. 生成Symbol启动Edge Animate，打开/a&smurf+spriteSheet+Tutorial+1.zip解压后其中的smurf.an文件。在舞台上选择蓝精灵元素（或者可以在右上角的Elements面板中选择smurf_sprite），点击右键，点击“Convert to Symbol”命令，转换元素为元件。转换后的元件不仅包含原有元素的资源，而且包括其中设置的独立时间线动画和脚本。Edge Animate 元件在弹出的“Create Symbol”提示框中输入新的元件名称，比如“Smurf”。默认选中Autoplay Timeline，点击OK。此时，你可以在右边Lirary面板的Symbols子面板中，看到生成的新的Smurf元件。此时，舞台上的原有Smurf_Sprite元素也变为名为“Smurf”的元素，时间轴上也对应做出修改。如下图：Smurf Symbol元件是一个可复用的对象，在舞台上，你可以从Library的元件面板中，拖拽元件到舞台上来创建多个新的元件实例。比如，我们可以把现在舞台上的蓝精灵删除，然后在元件面板中拖拽Smurf元件到舞台上。每当你拖拽Smurf元件到舞台上，Animate都会为你生成一个新的Smurf实例，并为新的实力元素自动命名。如下图：Instance of Symbol现在，在舞台中只留下一个蓝精灵元件实例，并在Elements面板中命名其为SmurfBoy（双击元素面板中名称即可重新命名）。2. 使用脚本控制元件动画重复播放在时间轴上，Animate自动在0-1秒中为SmurfBoy元素生成了“人字条轨迹”，即Chevron track。这意味着，SmurfBoy会自动播放Smurf元件中的时间线动画。Chevron Track通过Ctrl+Enter/Cmd+Enter，可以调用浏览器查看动画运行状态。蓝精灵走了1秒就自动停止了。下面我们让蓝精灵的行走动作能够不断重复。在元件面板中，选择Smurf点击右键，选择“Edit”来编辑Smurf元件，进入Smurf元件编辑状态。此时，舞台面板的标签显示为“Stage/Smurf”。Edge Animate允许设计师在时间线中嵌入JavaScript脚本，来提供更精确的动画控制和交互能力。把鼠标移至时间线“Actions”条目左侧的大括号图标，会显示“Open Timeline Actions”提示。如下图：Timeline Actions点击{}图标，并选择“Complete”事件，来为Smurf元件的Complete事件添加动作脚本。Complete事件意味着时间线动画播放完毕。我们通过添加脚本来让Smurf元件在时间线动画播放完毕时能够从0秒开始重新播放，来实现动画的反复播放。点击动作脚本窗口右侧的“PlayFrom”脚本按钮，并修改插入的脚本为sym.play(0)。如下图：TImeline动作脚本关闭脚本窗口，点击“Stage/Smurf”舞台标题的“Stage”，回到舞台时间线编辑状态。通过ctrl+Enter/cmd+Enter运行动画，可以看到蓝精灵的行走动作可以不断播放。3. 使用Pin生成前行动画下面，我们为蓝精灵加入行进动画效果。在Edge Animate中，提供了多种方式来生成关键帧和过渡。这里，我们来使用Pin按钮生成关键帧和期间的过渡。激活“Auto-Keyframe Mode”。并把播放头移至0:00秒。
“Pin”按钮的作用是在时间轴上把当前状态（动画的属性值）“钉”在时间轴上当前的播放头位置。现在，我们点击Pin按钮，可以看到在时间轴的播放头所在位置0:00秒，生成了一个蓝色的Pin标志。如下图：Pin按钮接下来，把播放头移到0:03秒，并在舞台上水平移动蓝精灵到舞台最右侧，比如X=418px。可以看到，在移动过程中，Edge Animate自动在0:03秒位置生成了新的关键帧，并在0:00和0:03秒两个关键帧之间自动生成了补间动画。如下图：Pin生成的动画后续现在，蓝精灵已经实现了行进。我们将在下面的教程中加入转身行进和背景等其他效果。资料由AAA教育整理2添加评论分享收藏animate cc怎样插入背景音乐？_百度知道
animate cc怎样插入背景音乐？
我有更好的答案
看你用什么AS3直接导入然后属性里选中你导入的音乐，再设置事件类型。这个估计都会。ANCC和以前FLASH不同的是H5的支持。直接导入不说了。说代码。createjs.Sound.play(&链接&);这个链接是你库中的MP3,
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 Animate CC 中创建元件实例
在 Animate CC 中使用和创建元件实例
选择一篇文章:
Animate CC
创建元件之后，可以在文档中任何地方（包括在其他元件内）创建该元件的实例。 当您修改元件时，Animate CC（以前名为 Flash Professional CC）会更新元件的所有实例。
可以在属性检查器中为实例提供名称。 在 ActionScript 中使用实例名称来引用实例。 若要用 ActionScript(R) 来控制实例，请为单个时间轴内的每个实例提供唯一的名称。&
若要指定色彩效果、分配动作、设置图形显示模式或更改新实例的行为，请使用属性检查器。 除非您另外指定，否则实例的行为与元件行为相同。 所做的任何更改都只影响实例，并不影响元件。
创建元件的实例
在时间轴上选择一个图层。 Animate 只能将实例放在关键帧中，并且总在当前图层上。如果没有选择关键帧，Animate 会将实例添加到当前帧左侧的第一个关键帧上。
关键帧是用来定义动画中的变化的帧。 有关详细信息，请参阅。
选择“窗口”>“库”。
将该元件从库中拖到舞台上。
如果已经创建了图形元件的实例，若要添加将包含该图形元件的帧数，可选择“插入”>“时间轴”>“帧”。
对实例应用自定义名称
在舞台上选择该实例。
选择“窗口”>“属性”，并在“实例名称”框中输入一个名称。
每个元件实例都各有独立于该元件的属性。 可以更改实例的色调、透明度和亮度；重新定义实例的行为（例如，把图形更改为影片剪辑）；并可以设置动画在图形实例内的播放形式。也可以倾斜、旋转或缩放实例，这并不会影响元件。
此外，可以给影片剪辑或按钮实例命名，这样就可以使用 ActionScript 更改其属性。有关详细信息，请参阅学习使用 ActionScript 3.0 中的。要编辑实例属性，可使用属性检查器（“窗口”>“属性”）。
实例的属性用它来保存。 如果编辑一个元件或将一个实例重新链接到不同的元件，则任何已经更改的实例属性仍将应用于该实例。
通过关闭“可见”属性可以在舞台上显示元件实例。与将元件的 Alpha 属性设置为 0 相比，使用“可见”属性可以提供更快的呈现性能。“可见”属性需要的 Player 设置是 Flash Player 10.2 或更高版本，并且仅与影片剪辑、按钮和组件实例兼容。
在舞台上选择该实例。
在“属性”面板的“显示”部分，取消选择“可见”属性。
每个元件实例都可以有自己的色彩效果。要设置实例的颜色和透明度选项，请使用属性检查器。属性检查器中的设置也会影响放置在元件内的位图。
当在特定帧中改变一个实例的颜色和透明度时，Animate 会在显示该帧时立即进行这些更改。要进行渐变颜色更改，请应用补间动画。 当补间颜色时，请在实例的开始关键帧和结束关键帧中输入不同的效果设置，然后补间这些设置，以让实例的颜色随着时间逐渐变化。
补间逐渐地更改实例的颜色或透明度。
如果对包含多帧的影片剪辑元件应用色彩效果，Animate 会将该效果应用于该影片剪辑元件中的每一帧。
在舞台上选择该实例，然后选择“窗口”>“属性”。
在属性检查器中，从“色彩效果”部分的“样式”菜单中选择下列选项之一：
亮度调节图像的相对亮度或暗度，度量范围是从黑 (-100%) 到白 (100%)。若要调整亮度，请单击此三角形并拖动滑块，或者在框中输入一个值。
色调用相同的色相为实例着色。要设置色调百分比（从透明 (0%) 到完全饱和 (100%)），请使用属性检查器中的色调滑块。若要调整色调，请单击此三角形并拖动滑块，或者在框中输入一个值。若要选择颜色，请在各自的框中输入红、绿和蓝色的值；或者单击“颜色”控件，然后从“颜色选择器”中选择一种颜色。
Alpha调节实例的透明度，调节范围是从透明 (0%) 到完全饱和 (100%)。若要调整 Alpha 值，请单击此三角形并拖动滑块，或者在框中输入一个值。
高级分别调节实例的红色、绿色、蓝色和透明度值。对于在位图这样的对象上创建和制作具有微妙色彩效果的动画，此选项非常有用。左侧的控件使您可以按指定的百分比降低颜色或透明度的值。右侧的控件使您可以按常数值降低或增大颜色或透明度的值。当前的红、绿、蓝和 Alpha 的值都乘以百分比值，然后加上右列中的常数值，产生新的颜色值。例如，如果当前的红色值是 100，若将左侧的滑块设置为 50% 并将右侧滑块设置为 100%，则会产生一个新的红色值 150 ([100 x .5] + 100 = 150)。注意：“效果”面板中的“高级”设置执行函数 (a * y+ b)= x，其中，a 是框左侧设置中指定的百分比，y 是原始位图的颜色，b 是框右侧设置中指定的值，x 是生成的效果（RGB 介于 0 和 255 之间，Alpha 透明度介于 0 和 100 之间）。也可以使用 ActionScript ColorTransform 对象来更改实例的颜色。 有关 Color 对象的详细信息，请参阅《ActionScript 2.0 语言参考》或《ActionScript 3.0 语言和组件参考》中的 ColorTransform。
要在舞台上显示不同的实例，并保留所有原始实例属性（如色彩效果或按钮动作），请为实例分配不同的元件。
例如，假定您正在使用 rat 元件创建一个卡通形象作为影片中的角色，但后来决定将该角色改为 cat。您可以用 cat 元件替换 rat 元件，并让更新的角色显示在所有帧中大致相同的位置上。
为实例分配不同的元件
在舞台上选择该实例，然后选择“窗口”>“属性”。
在属性检查器中单击“交换”按钮。
选择一个元件以替换当前分配给实例的元件。若要重制选定的元件，请单击“重制元件”，然后单击“确定”。如果制作的是几个具有细微差别的元件，那么重制使您可以在库中现有元件的基础上创建一个新元件，并将复制工作减到最少。
替换元件的所有实例
从一个“库”面板中将与待替换元件同名的元件拖到正编辑的 FLA 文件的“库”面板中，然后单击“替换”。 如果库中包含文件夹，则必须将新元件拖动到与所替换的元件相同的文件夹中。
若要在 Animate 应用程序中重新定义实例的行为，需要更改其类型。例如，如果一个图形实例包含您想要独立于主时间轴播放的动画，则可以将该图形实例重新定义为影片剪辑实例。
在舞台上选择该实例，然后选择“窗口”>“属性”。
从属性检查器的菜单中选择“图形”、“按钮”或“影片剪辑”。
要确定图形实例内的动画序列在 Animate 应用程序中的播放方式，需要设置“属性”检查器中的选项。
动画图形元件是与放置该元件的文档的时间轴联系在一起的。 相比之下，影片剪辑元件拥有自己独立的时间轴。 因为动画图形元件使用与主文档相同的时间轴，所以在文档编辑模式下显示它们的动画。 影片剪辑元件在舞台上显示为静态对象，并且在 Animate 编辑环境中不会显示为动画。
在舞台上选择图形实例，然后选择“窗口”>“属性”。
在属性检查器的“循环”部分中，从“选项”菜单中选择一个动画选项：
循环按照当前实例占用的帧数来循环包含在该实例内的所有动画序列。
播放一次从指定帧开始播放动画序列直到动画结束，然后停止。
单帧显示动画序列的一帧。指定要显示的帧。
若要指定循环时首先显示的图形元件的帧，请在“第一帧”文本框中输入帧编号。“单帧”选项也可以使用此处指定的帧编号。
使用帧选择器可以直观地预览并选择图形元件的第一帧。在以前的版本中，需要在编辑模式下并在元件内部才能预览帧。此功能增强了一些动画工作流（如嘴形同步）的用户体验。
帧选择器面板仅适用于图形元件，对于影片剪辑或按钮元件类型都是无效的。要想使用此功能，应确保。
选择图形元件 > 属性面板 > 循环 > 使用帧选择器 按钮显示帧选择器面板，或选择窗口 >
帧选择器。
在“帧选择器”面板中，选择“列表”或“缩览图”视图可显示所选图形元件所有帧的预览结果。还可以查看帧编号及其标签。&
列表 以竖列表视图显示帧。
缩览图 以网格视图显示帧并在面板大小调整后进行重新调整。
创建关键帧 使用此选项后，当您从帧选择器面板选择一个位置时，系统会自动创建一个关键帧。
循环 显示图形的各种循环选项，如循环、播放一次和单个帧。
滑块箭头 调整预览大小
滑块向左按钮 视图中显示更多的帧
滑块向右按钮 视图中显示更少的帧
筛选帧选项下拉菜单 显示各种筛选帧选项
缩略图视图
使用滑块 或缩放按钮可调整预览或缩览图大小。将滑块调整到面板的左下角可在视图中查看更多的帧。将滑块移动到右下角则可查看更大的预览。
单击任一帧，将其设置为所选元件的第一帧。
帧选择器面板提供一个“创建关键帧”复选框，可用来在帧选择器面板中选择帧时自动创建关键帧。此外，还可以在帧选择器面板中设置图形元件的循环选项。
可以调用帧选择器面板，方法是选择图形元件 > 属性面板 > 循环 >
使用帧选择器按钮来显示帧选择器面板，或选择窗口 > 帧选择器。
Animate 为面板中列出的帧提供筛选选项。您可以按以下条件来筛选：
所有帧 - 显示所有帧。
关键帧 - 仅根据您的选择显示关键帧。
标签 - 仅显示带标签的帧。
要断开一个实例与一个元件之间的链接，并将该实例放入一个由未编组的形状和线条构成的集合中，可以分离该实例。此功能对于实质性更改实例而不影响任何其他实例非常有用。
在分离实例之后对该实例源元件的更改不会影响该实例。
在舞台上选择该实例。
选择“修改”>“分离”。 此操作将该实例分离成它的几个组件图形元素。
要修改这些元素，请使用涂色和绘画工具。
属性检查器和“信息”面板显示以下与在舞台上选定的实例相关的信息：
在属性检查器中，您可以查看实例的行为和设置；对于所有实例类型，均可以查看色彩效果设置、位置和大小；对于图形，还可以查看循环模式和包含该图形的第一帧；对于按钮，还可以查看实例名称（如果已分配）和跟踪选项；对于影片剪辑，还可以查看实例名称（如果已分配）。对于位置，属性检查器将显示元件注册点的 x 和 y 坐标。
在“信息”面板中，可以查看实例的大小和位置、实例注册点的位置、实例的红色值 (R)、绿色值 (G)、蓝色值 (B) 和 alpha (A) 值（如果实例有实心填充）以及指针的位置。属性检查器中的“位置和大小”部分显示元件的注册点或变形点的 x 和 y 坐标。可以通过切换来查看注册点或变形点的坐标。
在影片浏览器中，查看当前文档的内容，包括实例和元件。
在“动作”面板中查看分配给按钮或影片剪辑的所有动作。
获取有关实例的信息
在舞台上选择该实例。
显示要使用的属性检查器（“窗口”>“属性”）或面板：
要显示“信息”面板，请选择“窗口”>“信息”。要显示影片浏览器，请选择“窗口”>“影片浏览器”。要显示“动作”面板，请选择“窗口”>“动作”。
在影片浏览器中查看选定元件的元件定义
单击影片浏览器顶部的“显示按钮、影片剪辑和图形”按钮。
右键单击 (Windows) 或按住 Control 键单击 (Macintosh)，然后选择“显示元件实例”和“转到元件定义”；或从影片浏览器右上角的菜单中选择这些选项。
跳到包含选定元件的实例的场景
显示元件定义。
右键单击 (Windows) 或按住 Control 键单击 (Macintosh)，然后选择“显示影片元素”和“转到元件定义”；或从影片浏览器右上角的菜单中选择这些选项。
更多此类内容
&Twitter(TM) 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。
在社区提问
发表问题并获得专家解答。
来自真正专业人士的真心实意的帮助。
此页面是否有帮助？博客分类：
创建按钮元件
下面以制作一个“END”按钮为例讲解按钮元件的制作方法。
（1）新建一个文件，执行“插入/新建元件”命令。
（2）打开“新建元件”对话框。在该对话框的“名称”文本框中输入按钮的名字“END”，在“行为”栏中选中“按钮”单选框。
（3）单击“确定”按钮进入按钮编辑区。
（4）下面需要定义按钮的 4 个帧，首先定义“弹起”帧。单击工具栏中的文字工具按钮，在元件场景中输入文字“play”， 其 文 字 的 属性设置为字体“楷体”， 字号为“95”， 字体颜色为黑色，加粗并居中。
按钮可以用于图形、元件、文字或电影片段，还可用绘图工具绘制得到按钮。
（5）定义“指针经过”帧。单击“指针经过”帧，单击鼠标右键，在弹出的快捷菜单中选择“插入关键帧”命令。
（6）在场景中对该按钮进行相应的设置，如颜色、大小等。
（7）用定义“指针经过”帧同样的方法为“按下”帧插入关键帧并对其进行相同定义。
（8）不定义“点击”帧，采用系统默认的设置。
（9）在时间轴上方中单击“场景 1”切换到场景中。单击编辑窗口右下角的“库”面板，
打开“库”面板。
（10）用鼠标拖动“play”元件到场景中。
（11）保存文件后，按“Ctrl+Enter”组合键即可预览到按钮的效果。
选中按钮击右键选择动作
on(press){}//点击时触发
e){}//点击后释放时触发
on(rollOver){}//鼠标经过触发
on(rollOut){}//鼠标经过而且离开时触发
utside) {}//点击释放后离开时触发
on (dragOver) {}//鼠标拖动经过时触发
on (dragOut) {}//鼠标拖动经过后又离开时触发
on (keyPress "a") {}//当按下按键a时触发
选中影片剪辑击右键选择动作：
Event (load) {}//当影片剪辑被加载时触发
onClipEvent (enterFrame) {}//影片的每一帧都执行{}的语句
onClipEvent (mouseDown) {}//当鼠标按下时执行（在场景的任意位置）
onClipEvent (mouseUp) {}//鼠标按下后释放时执行（同上）
onClipEvent (mouseMove) {}//鼠标在场景中移动时执行
onClipEvent (keyDown) {}//按下“下箭头“时执行
onClipEvent (keyUp) {}//按下“上箭头“时执行
onClipEvent (unload) {}//剪辑被卸载时执行（不在时间线上或被removeMovieClip删除）
onClipEvent (data) {}//当加载外部变量或是SWF文件时触发
浏览: 255118 次
来自: 成都
关于javadoc这里讲解的更全面：《javadoc设置》。
帮我解决了问题，谢谢！！！
个人感觉，文章对HashMap的遍历分析的有点浅，不如这里的介 ...
关于java.math.BigInteger讲解在这里可以看到 ...
divide应该是除吧？不是减。dividepublic Bi ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'轻松一扫，精彩不停
扫描下载APP
正在学习：
感谢你的评价，我们会继续努力！
恭喜，你已学完本节课程！
感谢你的评价，我们会继续努力！
写点什么吧，你的感受对其他同学有很大帮助噢
字数限250字以内
Photoshop零基础到进阶全套教程-【源码时代】
PS CC 2017基础入门课程
Node.JS入门到实战课程
购买后可以学习整个课程
&课程信息&
课程价格：0.00元
购买人数：114人
学生满意度：0%
直播倒计时：09小时52分15秒
上课时间：
线下课倒计时：09小时52分15秒
扫码下载APP
零基础的动画爱好者。
本套课程将采用精美的案例带你快速入门，通俗易懂的讲解Animate CC软件的各个知识点，如：Animate的基本操作、图形的创建与操作、添加文本、使用时间轴制作动画、符号元素在动画中的使用等等。
Animate CC 由原 Adobe Flash Professional CC 更名得来 维持原有Flash开发工具支持外新增HTML5创作工具 为网页开发者提供更适应现有网页应用的音频、图片、视频、动画等创作支持。Animate CC将拥有大量的新特性，特别是在继续支持Flash SWF、AIR格式的同时，还会支持HTML5Canvas WebGL，并能通过可扩展架构去支持包括SVG在内的几乎任何动画格式。&
本套课程将采用精美的案例带你快速入门，通俗易懂的讲解Animate CC软件的各个知识点，如：Animate的基本操作、图形的创建与操作、添加文本、使用时间轴制作动画、符号元素在动画中的使用等等。&
适合人群：零基础的动画爱好者。&
第1章an交互动画设计第一天
软件基础工具介绍
An基础绘图
时间轴动画
传统补间动画
课件练习：宝石动画
课件练习：加载动画 、错误案例演示
第2章an交互设计第二天
引导层动画
遮罩层功能
遮罩动画设计
影片剪辑动画
第3章an交互设计第三天
影片剪辑、药水瓶动画
练习案例：小火箭动画
按钮元件中的影片剪辑动画
动画效果制作
第4章an交互设计第四天
动作和代码片段
轮播页切换动画
影片剪辑控制命令
小游戏案例
banner切换
第5章an交互设计第五天
按钮开关、综合复习
综合练习：控件动画
音频插入、导出GIF动画
课程暂无资料
课程暂无评价
该机构的同类课程
该机构的热门课程
389 人已学
320 人已学
288 人已学
239 人已学