2019-03-04通过 Edge 动画改进 DPS Folio

Adobe Edge 是一种 web 动作和交互设计工具,允许设计人员使用 HTML5、JavaScript 和 CSS3 为移动和桌面平台创建动画形式的 web 内容。 因为 Edge 创建的动画遵循 web 标准,所以您可以将它们导入 DPS 中来为包括 Android 和 iOS 在内的各种移动平台创建文章。

本文的目标是指导您导出 Edge 动画,并将它加载到 InDesign CS6 中,以创建具有嵌入式动画的 DPS 文章。

注意:这种导出机制仅适用于 InDesign CS6 和 Adobe Edge 预览版 6 或更高版本。

导出 Edge 动画供 InDesign CS6 和 DPS 使用

首先让我们看看我们将导出的 Edge 动画。 解压缩 edgefiles.zip ,在确保安装了 Edge 之后,打开 Jams.edge 文件(双击该文件或使用 Edge 中的 File>Open 对话框)。 该文件已有一个动画设置。 您可在浏览器中使用 File>Preview In Browser 预览动画。

图 1: 在 Adobe Edge Preview 6 中打开的示例视图

设置海报图像

对于要在 DPS 查看器中激活 Edge 动画的用户,目前他/她必须单击该元素来激活动画。 因此您需要创建一个将显示的海报图像。

首先让我们在动画中找到一个您希望用作海报的位置。 将播放头移动到 0:05。我们将使用此位置作为海报图像。

图 2: 找到时间轴中的 5 秒点来设置海报图像

确保您在 Elements 面板中选择了 Stage。 现在单击 Properties 面板中的照相机图标,单击 "Capture" 捕获海报图像。 Assets 面板中会显示一个 "Poster.png" 。

图 3: 捕获海报图像

OAM 文件导出

从 Edge 导出的针对 InDesign 的格式为 .OAM。 您可以使用 Publish Settings 从 Edge 创建一个 .OAM 文件。

选择 File>Publish Settings 来打开 Publish Settings 对话框。 现在选中 InDesign / DPS 旁边的复选框,确保将海报图像设置为了 Poster.png(我们之前创建的图像)。

图 4: 为 InDesign/DPS 发布 Edge 动画

单击 Publish。 这会在与您的 .edge 文件相同的文件夹中生成一个 publish 文件夹,其中的 dps 子文件夹包含我们需要导入到 InDesign 中的 contentRotator.oam 文件。

图 5: 发布过程的输出

通过 DPS 让动画适用于 InDesign CS6

下载并打开 indesignfiles.zip 文件。 该文件已填充了一些内容,我们希望将其顶部的一个矩形方框替换为 Edge 动画。

放置动画内容

要放置动画内容,选择 File>Place 并选择 .OAM 文件。 现在将它放在工具中并调整位置。 确认您可看到海报图像。要让文字自动换行,在InDesign的控制面板中选择 “Wrap around the bounding box” icon 图标。

图 6: 放置了 Edge 动画的 InDesign 文档。 请注意海报图像。

在 DPS 查看器中预览

打开 Folio Builder 并创建一个新 Folio。 将它命名为 “Spring Jams”。 我为我的 folio 选择了横向。

图 7: 使用 Folio Builder 面板创建一个新 folio

现在添加一个 "Jams" 文章。 这将导入所有内容,并且您已可以预览。在Folio Builder中切换到folio级别视图,在Builder的面板中选择 "Preview On Desktop" 图标,以便在本地的DPS浏览器中预览内容。

图 8: 使用 Folio Builder 面板创建一个新 folio

在iPad 2上用Adobe Content View预览

在我们在iPad 2上预览之前,让我们先处理一下动画预加载的问题。在文档中点击动画。切换到Folio Overlays面板,选择 “AutoPlay” ,设置延迟为0.125秒。这将确保您的动画被预加载,用户感受不到任何延迟。

图9:设置自动播放延迟,以确保动画化预加载

完成此设置后,保存您的inDesign文档,切换到Folio Builder中的Jams 文章,在选项菜单中选择 “Update” ,让改变生效。

图10:更新Folio

图11:选择“Preview on … iPad”

以下是在iPad上Adobe Content Viewer里的样子。

图12:在iPad上预览folio和动画

Copyright © 2020 boyuntu Company Limited. All rights reserved.

使用条款 | 隐私 | Cookies 京ICP备2020043591号-1

北京博云图科技有限公司    北京市海淀区知春路甲48号3号楼7层2单元8D-1

销售电话:133 1106 0870    邮箱: 292925130@qq.com