00:00:13:03 - 00:00:13:12
In this
00:00:13:12 - 00:00:17:11
tutorial, we'll learn how to create and utilise color, set resources
00:00:17:20 - 00:00:22:20
and link them to the background
of one of our variable fields.
00:00:22:20 - 00:00:27:07
We'll begin by creating a color set
resource containing several color options.
00:00:28:01 - 00:00:30:24
Next will create a color variable
00:00:30:24 - 00:00:33:08
and link it to that color resource set.
00:00:34:02 - 00:00:37:10
And finally, we'll link the image variable
to the backgrounds
00:00:37:10 - 00:00:40:25
of an image frame on our canvas.
00:00:42:27 - 00:00:45:27
So we're going to start off
by creating our resource set.
00:00:46:09 - 00:00:48:16
So within the Invent plugin.
00:00:49:15 - 00:00:51:18
Go to the resources tab
00:00:51:18 - 00:00:56:08
and click on Add resource set.
00:00:56:08 - 00:00:58:25
That gives you the option
of a few different sets.
00:00:59:21 - 00:01:02:26
I'm going to choose color set.
00:01:02:26 - 00:01:05:15
So, a colour set allows you to actually define
00:01:05:15 - 00:01:09:24
some colors that you want to utilize
within your template.
00:01:10:09 - 00:01:13:18
So for example,
if you have branding colors that you want
00:01:13:18 - 00:01:16:04
to be able to readily access,
00:01:16:04 - 00:01:20:14
or if you want to apply a color
to the background of an image
00:01:21:00 - 00:01:24:19
and want some predefined colours,
you might use this color set.
00:01:25:08 - 00:01:29:04
And like we've seen with other resource
sets, we can link those to variables.
00:01:29:04 - 00:01:31:21
We can link those to the properties
of different frames
00:01:32:03 - 00:01:37:11
and they work in a very similar way
to those different resource sets.
00:01:38:17 - 00:01:40:15
So to
start off with, you just need to enter
00:01:40:15 - 00:01:44:06
a name of this resource set
00:01:47:04 - 00:01:48:10
and then it's just a case
00:01:48:10 - 00:01:51:19
of filling out
this small bits of information here.
00:01:51:19 - 00:01:55:05
So we need a user interface
name for each of the colors
00:01:55:05 - 00:01:59:02
that we want to add.
00:01:59:02 - 00:02:02:16
And then we click on Select Color.
00:02:02:16 - 00:02:06:07
You'll see there we got the ability
to either use the color picker itself
00:02:06:26 - 00:02:09:07
or we can directly specify an RGB
00:02:09:29 - 00:02:19:06
or a CMYK value, specify the color
you want to use,
00:02:19:19 - 00:02:22:22
click, select, and the background of that
00:02:24:03 - 00:02:26:16
box which displays our RGB value in
00:02:26:16 - 00:02:28:25
this case
will actually show you what that colour is.
00:02:30:12 - 00:02:32:29
Then you click on Add Color
and that will be added
00:02:32:29 - 00:02:36:05
to our resource set.
00:02:36:29 - 00:02:40:03
Now you can add multiple colors in here,
so I'll just add a few
00:02:40:03 - 00:02:41:10
additional options. Now
00:02:45:10 - 00:02:47:25
so that we have a few different color
options defined.
00:02:47:25 - 00:02:52:06
We can reorder those using these up
and down arrows if we wish to do so,
00:02:52:06 - 00:02:56:11
or we can edit them or delete any of them.
00:02:56:11 - 00:03:01:29
Once we're happy with our selection,
we'll click on Save.
00:03:01:29 - 00:03:05:19
A Resource has been created
and now we can go across to the Variables
00:03:05:19 - 00:03:10:18
tab and create a variable
which is linking to that resource.
00:03:12:22 - 00:03:15:24
So I'm going to click on add variable.
00:03:15:24 - 00:03:18:05
That again comes up
with a few different options
00:03:18:05 - 00:03:21:08
of variable type that we can add.
00:03:21:08 - 00:03:24:16
And we could do this as a dropdown
if we wish to do so,
00:03:25:04 - 00:03:27:17
and we'll see that in future tutorials.
00:03:27:17 - 00:03:31:18
But we can also do it
as a specific variable which is designed
00:03:31:18 - 00:03:35:14
to show us different
color swatches in a very aesthetically
00:03:35:14 - 00:03:40:23
pleasing way.
00:03:40:23 - 00:03:42:11
We assign a name to the variable
00:03:51:11 - 00:03:54:02
and then all
we're doing is either specifying a color
00:03:54:11 - 00:04:00:02
or we can link it to one of our resources.
00:04:00:02 - 00:04:02:14
So that's going to show us
relevant resource sets
00:04:03:25 - 00:04:08:09
and then show us the options that we can
have as the default value
00:04:08:10 - 00:04:10:16
when the product first loads.
00:04:11:03 - 00:04:12:28
So next we're going to select an image
00:04:12:28 - 00:04:16:13
or a text field for which
we will amend the background color.
00:04:17:08 - 00:04:20:19
If selecting an image field, the image
that's placed within it
00:04:20:25 - 00:04:24:25
requires a transparent background
for any background color specification
00:04:25:04 - 00:04:27:22
to take effect.
00:04:28:18 - 00:04:31:17
In our example here,
the selected image frame,
00:04:31:17 - 00:04:34:26
which is the same one we saw
in the previous tutorial which holds
00:04:34:26 - 00:04:38:19
this graphic, has been resized
to cover the whole canvas.
00:04:39:06 - 00:04:41:22
So this will result in an effect
of adjusting
00:04:41:22 - 00:04:45:26
the background color of the whole canvas
and is an alternative method
00:04:45:26 - 00:04:49:24
to the background selection options
which we covered in a previous tutorial.
00:04:50:17 - 00:04:53:28
The difference between this method
and the background selection method
00:04:54:10 - 00:04:57:15
is that this method,
so the background of a frame itself
00:04:57:27 - 00:05:03:22
can be controlled
from a form entry, a form variable.
00:05:06:24 - 00:05:07:22
So if we select the
00:05:07:22 - 00:05:09:28
frame, we want to modify
and go to properties,
00:05:10:22 - 00:05:13:22
make sure that our frame
has our properties
00:05:13:23 - 00:05:19:06
enabled to make it dynamic within Invent.
00:05:19:06 - 00:05:24:22
And the background properties
are controlled on the general tab.
00:05:27:09 - 00:05:30:04
From here we're going to scroll down
to the background section
00:05:30:19 - 00:05:32:23
which is currently specified as unlinked
00:05:33:18 - 00:05:37:07
and we can change that to be a solid color
00:05:37:21 - 00:05:41:20
or we can link it to one of our resources
or one of our variables.
00:05:42:19 - 00:05:45:24
In this case,
I'll connect it to a variable
00:05:45:24 - 00:05:48:08
and it's showing me
relevant variables to use
00:05:49:07 - 00:05:52:01
so I can select that.
00:05:56:12 - 00:05:57:29
Next, I'm going to go and export
00:05:57:29 - 00:06:01:03
this MEX file,
00:06:01:03 - 00:06:02:13
this MEX file,
00:06:14:14 - 00:06:17:27
and then I'm going to re-upload it
into our MegaEdit product
00:06:18:03 - 00:06:21:06
so we can view those changes
in the MegaEdit
00:06:21:06 - 00:06:22:23
editor.
00:06:23:15 - 00:06:23:29
So with that
00:06:23:29 - 00:06:27:25
loaded, we can see that
there is a colour selection variable
00:06:27:25 - 00:06:31:02
now available over on the form
on the right hand side.
00:06:31:02 - 00:06:35:00
At the moment it's saying white, which is
what background is coming through us.
00:06:35:15 - 00:06:40:17
But if I change that option, you can see
that it comes up with a very clear
00:06:41:03 - 00:06:43:25
swatch of available colors.
00:06:43:25 - 00:06:47:08
The background will be changed to suit.
