LUCAS: My name is Lucas, and I'm an engineer on Google Web
Designer.
In this video, I will show how to use groups.
Groups are a way of encapsulating content
into reusable assets.
And to show what this means, I'm going
to start with a simple example.
I add an image to stage, and I add some text as well.
So I'll type in the text, and I will format it a little bit.
Maybe center it, make it bold.
Tweak the size of the text box a little bit.
OK, now I select both elements and I right
click and go to Create Group.
And I enter a name--
My Group.
Now, I see that in the Asset Library,
I have a new entry for that group and the elements on stage
have been replaced by an instance of this group.
I can add new instances by drag-and-dropping
from the Asset Library.
Each of these instances is a reference
to the group's contents, which means
that if I edit any one instance, the changes are reflected
in both.
So for example, I will change the text
and I will create a simple animation where I first
fade the text out to 0 opacity, and then
I fade it back in to opacity 1.
And now if I play the animation, we
see that both instances are identical.
To see how this works behind the scenes,
we can switch to Code View.
So here in Code View, I see a block
that has all of my groups.
There's only one.
It has an image, and it has some text.
And then here in the main document are my two instances.
Each instance is an empty div that refers to the group
by name.
When you publish the document, we
inject the contents of the group into each instance--
so the instances are guaranteed to always be identical.
Groups can contain any content that you
can build in Google Web Designer, including instances
of other groups.
For example, here I'll add another instance.
Maybe I'll style it a bit differently by giving it
a border, and then I will add an additional element--
let's say, a div.
Now I select both and create another group.
So as before, if I edit one of the instances,
then those changes are reflected in all instances--
regardless of where they appear.
If I delete all the instances from stage,
then the groups themselves don't disappear.
They are still in the Asset Library,
and I can still add additional instances on stage.
If you want to delete a group entirely, in the Asset Library,
you can right-click on it and select Delete.
This context menu also gives a few other options.
For example, I can rename the group--
call it Teapot.
You can duplicate the group, which
creates a new group whose contents are
a clone of the original.
And finally, you can edit the group in a separate view.
This last option is useful if you
don't have any instances on stage,
or if the state is cluttered and you
want to just look at the group in isolation.
So I'll select that, and now I'll do some more editing.
In this case, I'll add a colored background to the group.
And I'll do that by drawing a div,
change its color a little bit, and then I
will send it to the back.
And once I'm done editing, I click
on the root of the breadcrumb, and now I'm back on stage.
I see the changes have been reflected
in all of my instances.
And if I add a new instance, it also has those same changes.
That completes this introduction to groups.
In the next video, I'll show how we can add interactivity
to groups by adding events to them.
Thank you for watching.
Không có nhận xét nào:
Đăng nhận xét