Adobe Animate CC:创建和发布HTML5、AIR及更多

5星 · 超过95%的资源 需积分: 46 35 下载量 168 浏览量 更新于2024-07-20 收藏 7.99MB PDF 举报
"Adobe Animate CC 是一款强大的多媒体创作工具,用于制作互动式2D和3D动画,适用于网页、应用程序、游戏、教育内容等多种平台。该软件支持HTML5 Canvas、WebGL、Adobe AIR以及传统的Flash(SWF)等发布格式。Adobe Animate CC 提供了丰富的功能,包括骨骼动画、引导层、传统补间和形状补间动画,以及对ActionScript的深入支持。用户可以使用Creative Cloud Libraries来管理和共享资源,同时还有Typekit Web 字体的集成,便于在HTML5 Canvas 文档中使用高质量字体。此外,Animate CC 还提供了一整套的辅助功能,以满足不同用户的需求,并支持自定义平台插件以扩展其功能。" 在Adobe Animate CC 中,你可以: 1. **新增功能**:了解新版本的更新和改进,如2016年2月版本的详细变动。 2. **平台支持**:根据不同的目标平台(HTML5 Canvas、WebGL、AIR for iOS 和 Android、桌面等)进行发布设置,以适应不同设备和浏览器。 3. **文档类型转换**:使用文档类型转换器将项目转换为不同的格式,以兼容不同的发布环境。 4. **自定义平台支持**:通过API参考和插件开发,自定义Animate CC 的功能,以适应特定需求。 5. **ActionScript**:学习如何编写和组织ActionScript代码,遵循最佳实践,以实现更高效的交互性和功能。 6. **辅助功能**:确保创作的内容符合无障碍标准,包括工作区内的辅助功能设置。 7. **工作区和工作流程**:熟悉Animate CC 的界面布局,如舞台、工具面板,以及如何优化工作流程。 8. **时间轴和ActionScript**:利用时间轴进行动画控制,结合ActionScript实现更复杂的交互效果。 9. **创建和管理脚本**:学习编写和管理脚本的方法,以增强动画的交互性。 10. **动画和交互性**:探索骨骼工具动画、引导层动画、传统补间和形状补间,以及帧和关键帧的使用,创建流畅的动画效果。 11. **模板**:使用预设模板快速启动项目,提高创作效率。 12. **查找和替换**:在Animate CC 中搜索并替换文本,保持一致性。 13. **撤销、重做和历史记录面板**:通过这些功能轻松恢复或调整操作。 14. **键盘快捷键**:掌握快捷键以提高操作速度。 15. **创建HTML扩展**:扩展Animate CC 的功能,创建自定义的HTML5组件。 16. **使用Adobe Color面板**:搭配Adobe Color进行色彩设计,为作品增添视觉吸引力。 Adobe Animate CC 是一个功能全面的动画工具,它允许创意专业人士和开发者制作出引人入胜的互动内容,覆盖了从设计到开发的整个过程。通过深入理解和熟练运用上述知识点,你可以充分发挥Animate CC 的潜力,创作出高品质的多媒体作品。
2019-10-11 上传
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //动画函数 obj---要执行动画的对象 json---要执行到的目标的参数对象 fn为执行完成后的回调函数(可以再次调用此方法按照上面格式传参--顺序执行多个动画) //调用例: //zIndex:1000 //透明度opacity: 数字类型----小数---放大100倍 // my$("btn1").onclick = function () { // var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2}; // animate(my$("dv"), json1, function () { //var json2={"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000} // animate(my$("dv"),json2,function(){按照此格式多次重复添加动画将会顺序执行} ); // }); // }; function animate(element, json, fn) { clearInterval(element.timeId);//清理定时器 //定时器,返回的是定时器的id element.timeId = setInterval(function () { var flag = true;//默认,假设,全部到达目标 //遍历json对象中的每个属性还有属性对应的目标值 for (var attr in json) { //判断这个属性attr中是不是opacity if (attr == "opacity") { //获取元素的当前的透明度,当前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目标的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex //层级改变就是直接改变这个属性的值 element.style[attr] = json[attr]; } else { //普通的属性 //获取元素这个属性的当前的值 var current = parseInt(getStyle(element, attr)); //当前的属性对应的目标值 var target = json[attr]; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current + "px"; } //是否到达目标 if (current != target) { flag = false; } } if (flag) { //清理定时器 clearInterval(element.timeId); //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 if (fn) { fn(); } } //测试代码 console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step); }, 20); }