Article summary

Summary Discusses how to work with Experience Manager Digital Assets and Dyamic Media.  
Digital Marketing Solution(s) Adobe Experience Manager 6.3
Audience User
Required Skills CSS, HTML 
Version 6.3

Prerequisites

To follow along with this article, you need to have a license for Dyanamic Media. You also need to configure Adobe Experience Manager to work with Dynamic Media. For information, see  Configuring Dynamic Media.

Download and install these packages in order. 

1. Assets Package

2. View Package

Note:

If you do not configure Experience Manager as described in the above link to work with Dynamic Media, you are not able to follow along with this article. 

Introduction

Carousel banners (also referred to as carousel sets) enable digital marketers to drive conversion by easily creating interactive rotating promotional content, and delivering it to any screen. Creating and modifying content featured in promotional banners can be time-consuming, limiting your ability to quickly publish new content, or make it more targeted. Carousel Banners enable you to quickly create or modify rotating banners, add interactivity such as hotspots that link to product detail and related resources, and deliver them to any screen—letting you bring new promotional content to market faster.

This article walks you through how to work with Dynamic Media and Assets, such as the one shown in the following illustration.

bike
A digital asset

Modifying Digital assets in the carousel editor

This section walks you through how to modify digial assets located in the sample carousel. Navigate to the carousel sample by performing these tasks:

1. Click on the AEM logo on the top left corner of the screen to open the global navigation.

2. Click on Assets.

3. Click Files, Summit.

SummitAssets
The folder that contains the digital assets

3. Click on the asset card titled Sports to preview the existing set. 

Sports
The Sports Asset collection

4. Explore this sample file set by changing slides, click on the hotspots and image maps.

Pic1
Sample assets

Note:

Ensure that you install the two packages that are available at the start of this article. Otherwise, you will not have the assets discussed in this article.  

Edit the Carousel Set

Modify the assets in the carousel set, and add additional content. To edit the carousel set, perform these tasks:

1. Click Edit in the top left of the screen to open the Carousel Banner Editor.

Sports1
The Edit button

2. Click the various slides to browse the existing images in this set.

Sports2
The Slide Bar

3.  Add a few images by clicking the Add Slide button on the right of the slide bar

Sports3
The Add Slide button

4. Select some images using the asset picker. Navigate to Summit, Demo Assets, Activities,  Running.

Sports5
Selecting Additional Assets

5. Select the top two images Running Couple Mountain and Running Desert Woman by
hovering over the two thumbnails and clicking on them.

Sports6
Selecting assets

6. Click the blue Select button. 

7. Try re-arranging the order of the slides by dragging the slide bar.

Use Hotspots and ImageMaps

Dynamic Media Carousel sets support both hotspots and image maps allowing digital marketers to link product detail to regions of interest that are located within an asset. Perform these tasks: 

1. Observe the regions of interest defined on the various slides, as shwon in the following illustration. 

Sports7
A HotSpot displayed in an asset

2. Click on a hotspot or image map to see the name and configured action in the Actions panel. The action type can be a quickview referencing a product in the system, or an external hyperlink.

3. Add a hotspot by selecting the Running Couple Mountain slide that your previously added. Click on the Hotspot button located in the action bar above the slide bar. Place the hotspot by clicking on the purple gloves within the slide as shown in the following illustration.

Sports8
Add a HotSpot to the digital asset

4. Configure an action from the Actions panel on the right by performing these sub tasks:   

  • Type a descriptive name for the hotspot, such as purple gloves
  • Associate this hotspot with an existing product by selecting the Quickview action.
  • Click on the search icon in the field below to open the product picker.
Sports10
Defining a Hotspot

6. Select the gloves from the product picker, as shown below.

Sports11
Selecting the product associated with the hotspot

7. Switch to the Running Desert Woman slide, and toggle the image map control. Drag an image map region over the blue jacket.

Sports12
Placing an Image Map control

8. Configure a Hyperlink action by performing these sub tasks: 

  • Type a name for the image map, such as blue jacket
  •  Associate this image map with a hyperlink by selecting Hyperlink as the action type.
  • Enter a test URL of your choice.

9. Click the Preview button to see what we have so far.

Customizing the appearance of the carousel editor

Using the carousel editor, you can configure and preview the customizations. Perform these tasks: 

1. Select the Appearance tab to customize the hotspot appearance and perform these sub-tasks: 

  • Select the ImageMapEffect component and expand the Background widget
    to select custom art, or simply use one of the out of the box gallery icons.
  • Click the gallery button. 
  • Select an out of the box hotspot icon.
Sports13
Appearance tab

2. Open the Shadow widget and set the Shadow type to outset and configure the desired effect.

Sports14
The Shadow widget

3. Select the SetIndicator component. Perform these sub-tasks: 

  • Inside the position widget, adjust the bottom slider to any desired value.
  • Under the Dotted Style section, adjust the sliders within the size widget.
  • Explore setting a shadow or a border.

Customizing the behavior

In addition to customizing the Appearance, you can also adjust behavioral modifiers in the Behavior tab. The carousel viewer is built from several components that expose modifiers that can be customized. Perform these tasks: 

1. Select the CarouselView component under the Behavior tab. Perform these sub-tasks: 

  • Open the Slide Transition widget to reveal animation options.
  • Change the default fade animation to side.

2. Select the SetIndicator component under the Behavior tab. Change the Set Indicator Mode to numeric to observe the effect.

Sports15
The Behavior tab

Preview the saved set

Once you are  satisfied with your appearance and behavior customizations, you can save the carousel set. This article covers just a small sample of the many aspects that can be configured.

The carousel editor makes a distinction between the carousel content and the viewer configuration made in the Appearance and Behavior tabs.  Viewer configuration is saved separately in a viewer preset. This provides a lot of flexibility because it allows many carousel sets to share common viewer appearance and behavior configuration.

Note:

Custom changes can be overwritten while out of the box presets are read-only. Customizations requires you to save the changes.

Perform these tasks: 

1 Click the Save button. 

2. Provide a new preset name such as Demo.

3. Click the Confirm button to save and exit the Carousel Banner Editor. 

Working with Interactive Video

Using Dynamic Media, you can create interactive videos that drive conversion. You can add product details to defined segments of videos to allow customers to link directly to their shopping cart for immediate purchase, as well as other services. 

Perform these tasks: 

1. Navigate to Assets, Files, Summit, Shoppable Video.

2. Click on the asset card titled Kitchen Video to preview the video.

Video1
A sample video

Modify an interactive video

You can modify an existing interactive video and add new content. Perform these tasks:

1 Click Edit in the top left of the screen to open the Interactive Video Editor.

2. Click the Preview button in the top right corner.

Video2
Preview the video

3. Adjust the Timeline Scale Slider to scale and examine the timeline contents.

4. Click on a segment in the timeline to adjust and inspect the associated products.

Video3
Select segment and product

3. Adjust the segment duration by dragging the blue handles. Clicking on a segment handle moves the playhead to that position and displays the frame of video at that position.

Adding products to the content workspace

Complete the incomplete interactive video by adding some missing products. First, add the desired products to the workspace. Perform these tasks: 

1. Click the Content tab, then click Select Assets to open the asset picker. Perform these sub-tasks: 

  • Navigate to Summit, Shoppable Video, Products.
  • Select the following images by hovering over the thumbnails and clicking on them: GlassWine Bucket, Candle Dish, Candles, Wine Decanter, Small Glass.
  • Click the Select button.
Video4
Selecting products

Segmenting the video

To start segmentation of the video, choose a position. Perform these tasks: 

1. Set the video to position 1:18. To do this, drag the red video seek thumb to quickly jump around the timeline,

2. Click the Add Segment button. 

3. Adjust this new segment so that it spans from about 1:18 to 1:23 on the timeline. This
will represent the wine decanter and glass.

Video5
Add a new video segment

3. Associate the segment with the products by performing these sub-tasks: 

  • Make sure only the single segment is highlighted by clicking on it in the timeline
  • Scroll through the Content tab and click on Wine Decanter and Glass to add them to the selected segment.
  • Click on the respective products in the segment to customize their name and action type. (This is similar to the Carousel Banner example. In this case, we can leave the defaults as is.)

 

Video6
Associating products with a segment

Preview the video

You can preview the video and see the new segments in the video. Notice in the following video, the newly created segment is displayed.

 

Video7
Previewing the Video

 Perform these tasks: 

1. Click on the Preview button to see the completed video.

2. Click on the Shoppable_Video_Dark drop down select list to choose the viewer option.

3. Once satisfied with the interactive video, we can click the blue Save button to save changes and exit the editor.

See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy