Adobe Edge动画教程：制作迷人的幻灯片

在不断发展的Web设计世界中，吸引观众的动态内容至关重要。最有效的方法之一是通过幻灯片，它不仅看起来很棒，而且使信息更易于消化。在本教程中，我们将潜入使用Adobe Edge动画制作动态，响应式幻灯片，以使您在任何设备上吸引您的观众。从设置您的项目到掌握高级动画，我们都可以为您提供服务。

要记住的要点

• 在Adobe Edge Animate中设置响应文档。
• 幻灯片的导入和定位图像。
• 使用Edge动画时间表创建基本动画。
• 实现Next和Back按钮之类的导航控件。
• 与鼠标效应相互作用。
• 了解平滑动画的宽松功能。
• 确保不同浏览器和设备之间的兼容性。
• 优化加载时间更快的性能。

从您的边缘动画幻灯片开始

设置文档

创建引人入胜的幻灯片开始，首先要在Adobe Edge Animate中设置文档。您需要定义舞台大小并确保其响应能力。

要开始，请打开Adobe Edge动画并创建一个新文件。您可以通过转到File> new或在Windows上使用快捷方式CTRL+N或Mac上的CMD+N来做到这一点。这打开了一个空白的画布，准备您开始构建幻灯片。

接下来，设置舞台大小。在左侧的属性面板中，找到阶段部分。在这里，您可以将像素设置为宽度和高度 - 980x300是Web幻灯片的常见选择，但可以根据需要随意进行调整。

为了使您的幻灯片响应迅速，请将宽度切换到100％。这样，您的幻灯片将扩展以适合任何屏幕尺寸。只需单击宽度字段旁边的像素图标，将其更改为一个百分比图标，然后输入100％。默认情况下，溢出设置为隐藏，将所有内容整齐地保持在视图中。

不要忘记尽早且经常保存您的项目。转到文件>另存为“命名”之类的东西，例如“ slideshow-tut.html”，并注意保存的位置，因为以后重命名HTML文件可能会很棘手。

添加和定位幻灯片和边缘动画

导入图像

设置文档后，是时候导入图像了。 Edge Animate支持JPG，PNG和GIF格式。您可以通过将图像拖动到舞台上，导航到文件>导入或使用库面板来导入图像。

导入后，您的图像将出现在右侧的图书馆面板中。从这里，您可以将它们拖到舞台上。对于最佳组织，请将图像保存在与项目同一目录中的文件夹中。

假设您的图像已准备好适合您的幻灯片，位置和使用属性面板的位置和尺寸。要将它们集中并避免截止，请将X和Y定位设置为0％，将高度设置为自动，宽度为70％。然后，将样式调整为转化原始：50％50％以进行正确查看。您可以通过单击尺寸旁边的笔图标来调整这些设置，该图标打开了代码编辑器，您可以将背景大小设置为“自动”，并定位为百分比以获得更多控制。

重复此过程以在您的演出中添加更多幻灯片。

动画幻灯片

动画使您的幻灯片变得活跃起来。 Edge Animate的基于时间轴的系统使您可以创建平滑的过渡和引人入胜的效果。

时间轴位于边缘动画接口的底部，显示了您的动画帧和控制元素运动。要动画幻灯片，请在舞台上选择它，并通过单击所需框架的拨动引脚图标在时间轴上创建一个新的密钥帧。例如，将切换设置为0s，然后在0.75秒以0.75秒设置拨动，以使其平滑流动，尤其是启用了放松选项。

从右侧的滑动屏幕上开始，然后使用宽松的功能，例如“ subleoutquad” ，以进行较少的机器人滑入。将幻灯片从屏幕的0％开始在0.75秒后在0.75秒内褪色。有了多个幻灯片，您可以通过将它们互相拖动在较低元素栏上，使它们的入口拖延。

要控制幻灯片过渡，请插入触发器以添加停止点。选择插入扳机，然后停止。有关其他幻灯片，请使用重复选项（D键）创建副本，然后调整名称，图像和定位。请记住，目标是让每个幻灯片平稳滑入和流出时间。

其他提示

在处理起点和停止点时，复制先验版本可以解决许多问题。之所以起作用，是因为动画设置在元素范围内，从而使其可以在无奇数编码要求的情况下共存。另外，一旦设置了放松功能，就不需要重新申请新版本。

如何使用Adobe Edge动画进行动态幻灯片

创建幻灯片的分步指南

1. 设置您的文档：
   • 开放边缘动画。
   • 
   • 创建一个新文件。
   • 设置舞台大小（例如980x300像素）。
   • 通过将宽度设置为100％来确保响应能力。
   • 保存您的文件。
2. 导入图像：
   • 将图像拖放到舞台上，或通过文件>导入导入。
   • 位置和尺寸图像适当。
3. 动画幻灯片：
   • 在每个幻灯片的时间轴上创建密钥帧。
   • 添加过渡以进行平滑进入和退出。
   • 应用宽松功能以增强动画。
4. 实施导航：
   • 使用符号添加下一个和背面按钮。
   • 将JavaScript操作附加到按钮进行导航。
5. 测试和优化：
   • 在不同的浏览器中预览幻灯片。
   • 优化图像以更快地加载。
   • 确保跨设备的响应能力。

使用Adobe Edge动画的优点

优点

• 基于时间轴的动画：使创建复杂的动画变得容易。
• HTML5支持：创建与现代Web浏览器兼容的内容。
• 交互式元素：允许添加按钮，翻转和表单。
• 无代码设计：设计师可以在不编写代码的情况下创建动画。

缺点

• 中止支持：Adobe不再支持Edge Animate。
• 有限的功能：可能没有现代动画工具的所有功能。
• 性能问题：动画可能是资源密集的，导致了性能问题。
• 陡峭的学习曲线：初学者很难学习。

常问问题

什么是Adobe Edge动画？

Adobe Edge Animate是一种网络设计工具，用于使用HTML5，JavaScript和CSS3创建交互式和动画内容。它对于没有闪光灯的动画，横幅和幻灯片特别有用。

Adobe Edge动画仍然支持吗？

不，自2015年以来，不再支持Adobe Edge动画。但是，它仍然用于旧版项目或喜欢其特定动画功能的设计师。现代替代方案包括Adobe Animate CC和其他HTML5动画工具。

Adobe Edge动画的替代方案是什么？

现代替代方案包括Adobe Animate CC，Google Web Designer，Tumult Hype，Greensock（GSAP）和CreateJS，所有这些都具有强大的HTML5动画功能。

如何使我的边缘动画幻灯片响应能力？

为了使您的幻灯片响应迅速，请将主要阶段宽度设置为100％，并使用百分比值来定位和尺寸元素。跨设备和浏览器测试以确保响应能力。

相关问题

如何在更快的加载时间中优化幻灯片？

要优化幻灯片以进行更快的加载，请考虑图像压缩，代码缩小，浏览器缓存，使用CDN以及实现懒惰的加载技术。

我可以将交互式元素添加到我的边缘动画幻灯片上吗？

是的，您可以使用Edge Animate中的JavaScript操作添加交互式元素，例如按钮，翻转，表单和外部链接。

如何确保Edge Animate幻灯片的跨浏览器兼容性？

通过在不同的浏览器和设备上进行测试，遵守Web标准，使用CSS的供应商前缀，并使用JavaScript框架来处理差异来确保跨浏览器的兼容性。

如何在网站上嵌入Edge动画幻灯片？

要嵌入幻灯片，请在网页中包括生成的HTML，CSS和JavaScript文件。复制代码并将其粘贴到您网站的HTML中，以确保您的CSS和JavaScript文件的路径正确。