Interactive video: how to create cue points and hotspots – Google Web Designer

Interactive video: how to create cue points and hotspots – Google Web Designer


KENT: Hello my name is Kent I’m the creative
specialist on the Google Web Designer team and I’d like to demonstrate
interactive video I’ll start by creating a new blank file a banner ad I’ll give
it a name and accept the defaults then I’ll drag a video file to the stage This is an mp4 and resize it with the Properties panel I know this video is
300×168 so I’ll enter those values and move it to the top center of my
document using the alignment controls with the Align to container checked Now I just double click it to open the interactive video dialog Here I can add
cue points and hotspots Cue points are markers in the video that can be used
with the Events panel I can scrub through my video and at the point where
the product first appears I’ll click the Create cue point icon Then I’ll create
two more cue points one for each white flash Notice each time I add a cue point an ID is automatically generated I can edit these to be more descriptive and can also key in exact times if needed Once we have the cue point set up you can use
these controls to advance through them and play the video I’ll click Save to
accept these changes Now I want to have some text appear in my ad timed with
those cue points I’ll do this by creating text elements and then use
events to show and hide them So I’ll get my Text tool draw a rectangle and key in
my message Now get the Selection tool and style it
in the Text panel Change the font to Arial Center it and
adjust the size To work in more detail I’ll change my
timeline to advanced mode with this icon and now I can see each element in my
file In my Properties panel I want to assign
an ID so I can access this element with events I’ll call it text1 and notice
the layer name updates Now I’ll duplicate this text with copy and paste from my keyboard and I’ll change its layer name to text2 and notice how
the ID is updated as well I’ll hide the first text so I can edit this one easier Now make them both visible shift-click both text layers and in the Properties panel set the fill opacity to zero which hides them and finally we can complete the interactivity using the Events panel Down the lower left corner is the add event icon I’ll choose cue_point_1 Cue point reached CSS, Set styles text1 Add
property, opacity, 1 Check easing for a half second and OK Now two more for the other cue points cue_point_2 Set styles This time I’ll turn off my
text with opacity 0 And we’ll turn on text2 at our last cue
point I’m ready to preview but I want to make
one quick adjustment just for testing with my video selected I’ll enable autoplay easier for testing but I’ll turn that off before
publishing Now I preview And there’s my first message fades out and my second message Looks great So let’s play it again and I see a problem that last text is not being hidden on replayed One quick fix is to add another
event Select your video Video, Play after pause Set styles, text2, opacity 0 and this time I don’t need easing I’ll say OK and preview again And that works Now I’ll add some hot
spots so when users click on the video they can be directed to a landing page
specific to the product clicked Hot spots are elements that overlay your
video mostly used for click areas but can also be used as containers for text and images again double click the stage component to open the interactive video
dialog I’ll move the playhead to the point I want to be clickable and click the add hotspot button This gray bar in the timeline represents the hot spot in
and out points and I’ll see this in my preview as the playhead is moved By default Show after playback is
checked this means the hot spot is still clickable when the video ends and that’s what I want in this case and if I uncheck it you’ll see the hot spots not available at the end I can slide the hot spot by dragging it in my timeline and can stretch it by dragging either end Note the show and hide times can be edited directly in the panel if that’s easier I’ll set this back to cover my
ending segment Now I’ll resize the hot spot to just
cover the bottle and give it a more descriptive name and repeat the process for the last tube That looks pretty close I’ll click Save Again we’ll use the Events panel to fill in the interactivity new event hotspot_hibiscus Mouse, click Google ad Exit ad gwd-ad I’ll create a metrics ID and enter my full URL for the landing page OK and I’ll repeat for the other hotspot Now preview again I’ll fast forward a bit and this click goes to hibiscus and this one goes to rose So that looks great I want to show one last thing and that’s how to style hot spots In the
video dialog again I see each hot spot has an overlay asset and by default it’s none but I can choose any item from my library like an image or group or even
another video suppose I want something simple like a color or a border here’s
how to do it I’ll close this dialog and create my border with the Element tool
and div modifier I’ll draw a rectangle and give it a 1 pixel
red border then set its sized percentage and key in
0 0 100 100 Now I’ll right-click this element and
choose create group I’ll give it a name and OK With it still selected the
Delete key removes it from my stage but I see the group item still exists in my
library Now change to the Selection tool and back in the dialog I’ll select a hotspot and set its overlay asset to the border
group we just made Scrub the playhead to see it Click the
background to deselect everything but I see my border is missing two edges That’s because of the CSS styling Let me show how to fix it I’ll save this and in my library right click the border group and choose Edit Now I’ll select the border div and in my CSS panel add the property box-sizing set it to border-box This keeps the border inside its container which in our case is the hot spot so to get back to our file I’ll click the root
div in the breadcrumbs and back in the video dialog I see my border looks correct now So I just want to repeat this from my other hot spot and they both look good I’ll save and one last preview I’ll watch it all the way through this time And one last click confirmation So that’s it! That’s how you can work with cue points and hotspots to create interactive video in your ads Thanks for watching!


6 thoughts on “Interactive video: how to create cue points and hotspots – Google Web Designer

  1. please please please get a microphone that doesn't record your saliva in your mouth! couldn't finish the video because of that.

  2. Off Topic from this video. Serious question: After you create a Parallax AD in Google Web Designer. You hit publish. You select Locally, Google Drive, Studio, Display Video 360. I pick locally. After I save the Zip drive to my folder on my computer. How do I then upload it to Google Ad Words ? Where or how do you upload your Zip file in the Google Ads portal ? Also once it gets uploaded how do you assign it to an Ad Group to run ? Hope my question makes sense.

Leave a Reply

Your email address will not be published. Required fields are marked *