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 300x168 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!

Channel: Google Web Designer

Views: 27,738

Keywords: google web designer, gwd, cue points, hotspots, interactive video, video component, video playback, events, video overlay, text overlay video

Id: ddNfHI-0VGI

Length: 13min 2sec (782 seconds)

Published: Mon Jul 29 2019