您查看的帮助内容对应的版本是:

“区域映射”允许您创建不同的区域并使用各种资产(例如视频、图像和文本),这些资产可通过上下文方式组合到单个屏幕中。您可以拖入图像、视频和文本,并将它们全都混合在一起,创建直观的互动式数字体验。根据项目要求,有时您需要在显示屏上显示多个区域。

例如,某个产品序列具有相关社交媒体信息源,该信息源在单个显示屏上的两个不同区域中运行。

概述

在为渠道创建显示屏时,您可以选择不同的模板选项来查看/管理渠道中的内容。

在为显示屏创建区域时,可以使用以下模板:

  • 2x1 
  • 2x2 
  • 3x1 
  • 4x1
  • 5x1

使用其中的任一模板,您可以创建直观的交互式数字标牌体验,从而在单个屏幕上利用各种内容。

注意:

要深入了解如何创建渠道和显示屏,请分别参阅“创作屏幕”中的管理渠道管理显示屏

用例描述

在此用例中,您将创建一个 AEM Screens 项目,其中包含一个渠道,该渠道可利用内容并将其显示在多个区域的屏幕上。 

注意:

区域不会缩放内容,该缩放操作必须在将内容插入渠道之前完成。

创建项目的步骤

请按照以下步骤创建一个 AEM Screens 项目,以便演示如何实现 AEM Screens 项目的区域映射:

  1. 创建新 Screens 项目

    1. 选择 Adobe Experience Manager 链接(左上方),然后选择“屏幕”。或者,您也可以直接转到:http://localhost:4502/screens.html/content/screens
    2. 单击创建以创建一个新的 Screens 项目。
    3. 创建屏幕项目向导中选择屏幕,然后单击下一步
    4. 输入 Zone Mapping Project 作为标题,然后单击创建
    zm1
  2. 创建新渠道文件夹

    1. 导航到 Zone Mapping Project
    2. 单击操作栏中的创建。此时将打开一个向导。
    3. 选择渠道文件夹,然后单击下一步
    4. 输入 Dual Zone 作为标题,然后单击创建
    zm2
  3. 创建新渠道

    1. 导航到您创建的 Zone Mapping Project,然后选择渠道文件夹 (Dual Zone)。
    2. 单击操作栏中的创建。此时将打开一个向导。
    3. 选择序列渠道,然后单击下一步
    4. 标题中输入 Left,然后单击创建

    以同样的方式,在 Zone Mapping Project 中创建另一个名为 Right 的序列渠道。

    zm3
  4. 向渠道中添加内容

    1. 导航到您创建的 Zone Mapping Project,然后选择您创建的渠道
    2. 单击操作栏中的编辑
    3. 此时会打开 Left 的编辑器。单击操作栏左侧用于切换侧面板的图标以打开资产和组件。
    4. 将您希望添加的组件拖放到渠道中。

    以同样的方式,向 Right 渠道中添加内容。

    zm4

    注意:

    您可以根据项目要求使用不同的资产(图像、视频)在渠道中填充内容。

  5. 创建新位置

    1. 导航到 Zone Mapping Project,然后选择位置文件夹。
    2. 单击操作栏中加号图标旁边的创建。此时将打开一个向导。
    3. 从向导中选择位置,然后单击下一步
    4. 为您的位置输入标题(输入 San Jose 作为标题),然后单击创建
    zm5
  6. 为 San Jose 创建新显示屏

    1. 导航到要创建显示屏的位置(Zone Mapping Project --> 位置 --> San Jose),然后选择 San Jose
    2. 单击操作栏中的创建。从创建向导中选择显示屏,然后单击下一步
    3. 为您的显示屏位置输入标题(输入 Dual Zone Display 作为标题)。
    4. 显示屏选项卡下,选择“布局”的详细信息。将“分辨率”选为全高清
    5. 水平设备数量选为 2。将垂直设备数量选为 1
    6. 单击创建
    zm6
  7. 分配渠道

    1. 导航到显示屏,方法是选择“Zone Mapping Project”-->“位置”-->“San Jose”-->“Dual Zone Display”。
    2. 选择“Dual Zone Display”,然后点按/单击操作栏中的“分配渠道”;或者,
    3. 单击“功能板”,然后从“已分配的渠道和计划”面板的右上方选择“+ 分配渠道”,如下图所示。此时会打开“渠道分配”对话框。
    4. 在“渠道角色”中输入“区域”。
    5. 按路径选择“引用渠道”。在“渠道”中选择渠道文件夹路径(“Zone Mapping Project”-->“渠道”-->“Dual Zone”)。
    6. 将此渠道的优先级选为“1”。在“支持的事件”中选择“初始加载”和“空闲屏幕”。
    7. 单击“保存”。
    zm7
  8. 注册和分配设备

    1. 启动一个单独的浏览器窗口。使用 Web 浏览器转到 Screens 播放器或启动 AEM Screens 应用程序。在打开设备时,您会注意到设备的状态为未注册。 
    2. 从 AEM 功能板中,导航到 Zone Mapping Project --> 设备
    3. 单击操作栏中的设备管理器
    4. 单击设备注册,您会看到待注册的设备。
    5. 选择您要注册的设备,然后单击注册设备
    6. 您将需要从 Web 浏览器或 AEM Screens 播放器中验证代码。单击验证以导航到设备注册屏幕。
    7. 标题中输入 Zone Device,然后单击注册,此时将会注册设备。
    8. 单击指定显示以继续执行下一步,即,将设备分配到显示屏。
    9. 单击指定设备,然后选择渠道的显示路径 (/content/screens/Test_Project/Locations/TestLocation/TestDisplay)。单击指定
    10. 单击完成以完成该过程,现在已分配该设备。
    zm8
  9. 创建多区域显示屏

    1. 通过选择 Zone Mapping Project --> 位置 --> San Jose --> Dual Zone Display,导航到显示屏并将其选定,然后单击操作栏中的功能板
    2. 设备面板中选择播放器的设备配置左侧的图标,然后单击属性
    3. 导航到设备配置选项卡,然后填写映射模板字段。在映射字段中输入 {"a1":"${display.channel}/left", "a2": "${display.channel}/right"},在“模板”中输入 grid-2x1
    4. 单击保存并关闭,然后重新加载播放器。

    注意:

    了解设备配置中的“映射”和“模板”:

    • 标识符“a1”和“a2”对应于模板中定义的区域,即“screens-zone-a1”和“screens-zone-a2”。
    • “${display.channel}/left”是指要嵌入区域的渠道,其中“display.channel”是指显示屏中的当前渠道路径。此处有效地嵌入了渠道的“left”和“right”子项。

    screen_shot_2018-01-22at114708am

在 AEM Screens 播放器中查看内容

加载您的 AEM Screens 播放器或使用 Web 浏览器。

您将注意到两个渠道(Left 和 Right)的内容会显示在 Screens 播放器中。内容会以 2x1 显示区域显示。

screen_shot_2018-01-22at120206pm

总结

在 AEM Screens 中创建渠道时,使用某一可用模板进行区域映射,可以执行客户端拼合。您可以在屏幕中创建不同的区域,并使用视频、图像和其他可用资产进一步填充这些区域。

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略