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!