Hi.
My name's Paul.
I'm an engineer working on Google Web Designer.
In this video, I'll give a quick walkthrough
of the components in our latest release.
First, you'll notice-- I'm selecting HTML here--
Components are available outside of ads.
You can create a component by simply
by dragging and dropping them onto the stage.
You resize them easily either using the Properties panel--
I'm going to make it fat.
And I'm going to make it a square, actually.
Or you can use the Transform control
located on the upper left.
You can resize it like so.
There are 10 components available in this release.
And two of them are new.
The first new component is Gesture component.
It adds to tap area component
and provides a nice assortment of common gestures
for both mouse and touch input.
The other new component is Tap to Call, as the name suggests,
it will call the number specified
on the phone on devices with appropriate calling
plug-in installed.
You can just specify a number here in the Properties panel.
There are three gallery components in this release.
We have added new functionalities
to our gallery components.
Also supports AutoPlay and offer a number
of new actions for navigation.
For multimedia, have a video component
based on HTML5 video and a YouTube component
using the YouTube API.
For mapping, the Map component is powered by Google Maps API
and will allow local search and work
with data stored on a fusion table.
And you can include any web page with our Iframe component.
Now let's take a look at what components can do.
I'm going to drag a swipe gallery to this page.
And I'm going to add some pictures to it.
There are several ways to add images to the component.
The easiest way is to drag and drop them using this UI.
You can reorder the pictures however you like.
I'm going to hit OK.
I'm going to take a quick look.
So you can drag the component at the galleries like this.
Now let's add some interaction.
The first way to add interaction is
by going through the Events panel.
It's right underneath the Components panel.
I'm going to say when you tap on this gesture,
go to the first frame.
And then I'm going to say, for gesture number two,
when you tap on it, go to the second frame.
The other way to add action to components
is by right-clicking on it.
See, I don't need to select which
component is the source anymore?
Now let's go to the third frame.
And I'm going to right-click again.
I'm going to say, tap, go to frame four.
Now let's take a look at what it looks like.
You can jump.
Third frame, fourth frame.
You can see how to interact with it using a mouse or touch
input.
Looking nice.
Remember I mentioned there are new ways
to navigate in the galleries?
Let's try one out.
First, I'm going to add a new Gesture component.
And I'm going to make it cover the entire page.
OK.
Notice how the existing buttons now turned a little bit more
pale?
That's because the new gesture is covering them up.
I'm going to send the new gesture to the back,
so then they're not covered.
Otherwise, when you click on them,
only the new gesture picks up.
Next, I'm going to add an event.
So on tap, I'm going to say, gallery, rotate once.
And we're going to get it rotating in three seconds.
I'm going to make it rotate backwards.
Now let's take a look.
You can still do the same thing.
Only now, you can rotate once backward.
Rotate once backward, Back to the yellow page.
We have also added many more properties for you to fine tune
how the galleries look.
For Swipe Gallery, you can do the offset between the images
and you can also specify how big each of the images are.
So I'm going to make them squares.
Each of them would be 120 pixels by 120 pixels.
Let's take a quick look at what it looks like.
You can still swipe through them.
You can still go through the frames.
And you can still rotate once.
That's it.
Check out our other videos to see what's new in this release.
Thank you for watching.