Show details for Image Variables & Clipart Resource Sets | IV_005

Image Variables & Clipart Resource Sets | IV_005

In this tutorial, we will learn how to create variable image field linked to an image selector on your MegaEdit form. We will begin by creating a Clipart Set resource containing several image options. Next, we will create an Image variable and ink it to the Clipart set. Finally, we will link the Image variable to an image frame within our artwork.

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

00:00:13:08 - 00:00:14:21
In this tutorial we'll learn

00:00:14:21 - 00:00:18:27
how to create variable image fields
linked to an image selector on your.

00:00:18:27 - 00:00:20:27
MegaEdit form.

00:00:22:06 - 00:00:24:05
Will begin by creating a clip

00:00:24:05 - 00:00:27:09
art set resource
containing several image options.

00:00:27:27 - 00:00:31:00
Next will create an image variable
to link it.

00:00:31:00 - 00:00:32:20
To the clip set.

00:00:32:20 - 00:00:36:14
And finally, we'll link the image variable
to an image frame.

00:00:36:14 - 00:00:39:13
Within our artwork.

00:00:40:24 - 00:00:45:09
Some key terms of notes for this tutorial
you'll hear me talking about variables.

00:00:46:01 - 00:00:47:23
Variables within Invent.

00:00:47:23 - 00:00:50:12
Are used to create. Forms
for your products.

00:00:50:13 - 00:00:54:15
They can take the form of text,
boolean, true or false values.

00:00:54:15 - 00:00:56:29
Dropdowns and. Many more.

00:00:57:27 - 00:00:59:03
And then you might also hear.

00:00:59:03 - 00:01:01:06
Me talking about resources.

00:01:01:06 - 00:01:04:15
So these are collections of assets
that can be used to help create.

00:01:04:15 - 00:01:06:03
A MegaEdit product.

00:01:06:03 - 00:01:09:04
There are several forms of assets
available for Invent,

00:01:09:04 - 00:01:11:29
including backgrounds, clipart, fonts.

00:01:12:07 - 00:01:14:27
Spot colors and many more.

00:01:15:17 - 00:01:16:13
We're going to begin

00:01:16:13 - 00:01:20:09
by navigating to the resource tab
of the Invent plugin within.

00:01:20:09 - 00:01:24:02
Our Adobe InDesign window.

00:01:24:25 - 00:01:26:01
From here, click on Add.

00:01:26:01 - 00:01:27:28
A resource set

00:01:29:21 - 00:01:31:25
and that will pop up a separate window

00:01:32:01 - 00:01:34:05
with the different resource sets
that you can add.

00:01:35:05 - 00:01:36:06
In this case, we're going to.

00:01:36:06 - 00:01:40:04
Choose a clipart set.

00:01:40:04 - 00:01:43:23
So clipart sets
or cliparts can be used as.

00:01:43:23 - 00:01:49:08
Extra design elements on a product,
either as a fixed asset on the design

00:01:49:17 - 00:01:53:22
or as options for users to select
from when personalizing their mega.

00:01:53:22 - 00:01:55:14
Edit. Products.

00:01:55:15 - 00:01:58:28
Creating a clipart set
allows you to create a container

00:01:58:28 - 00:02:01:29
to upload all of the image files
you want to make available.

00:02:02:15 - 00:02:06:21
These then get created
and included as a clipart category

00:02:07:07 - 00:02:11:01
and the clipart within
it are placed inside Infigo.

00:02:11:02 - 00:02:11:19
Once they are.

00:02:11:19 - 00:02:18:19
Imported, so we'll enter a name for our.

00:02:18:19 - 00:02:19:13
clipart set.

00:02:20:03 - 00:02:21:00
And then we'll choose the.

00:02:21:00 - 00:02:22:07
Accessibility level.

00:02:22:07 - 00:02:26:19
So we can make this clip set available
to both administrators and.

00:02:26:19 - 00:02:27:08
Users.

00:02:27:08 - 00:02:29:13
So this is if we want the users
to be able to

00:02:30:14 - 00:02:32:22
to add these clipart to our.

00:02:33:09 - 00:02:34:04
To our product,

00:02:35:00 - 00:02:37:08
or we can make them administrator only.

00:02:37:16 - 00:02:39:17
So this is if you. Need these.

00:02:40:02 - 00:02:43:12
Resources whilst creating the templates,
but you don't want your users

00:02:43:12 - 00:02:49:18
to access them.

00:02:49:18 - 00:02:53:02
Then it's simply a case of hitting
add images or PDFs

00:02:53:20 - 00:02:56:03
that will open up
a separate search window.

00:02:56:03 - 00:02:58:22
In which you can locate the files
that you want

00:02:58:22 - 00:02:59:26
to add.

00:03:03:15 - 00:03:05:12
Select the files to add.

00:03:05:12 - 00:03:07:21
Click on Open and they will be uploaded.

00:03:07:21 - 00:03:10:15
And added to this resource.

00:03:11:17 - 00:03:13:25
We can then click on Save to confirm.

00:03:13:25 - 00:03:14:24
The clipart set

00:03:16:08 - 00:03:17:22
and you'll see that is now available

00:03:17:22 - 00:03:21:22
in our resource section of the Invent plugin.

00:03:22:15 - 00:03:26:04
So next we're going to create a variable
which we're going to link to this.

00:03:26:04 - 00:03:28:02
clipart set. So we're going to go.

00:03:28:02 - 00:03:31:23
Across to our variables
tab within the Infigo Invent.

00:03:31:25 - 00:03:32:18
Plugin

00:03:33:16 - 00:03:34:06
and then we're going to.

00:03:34:06 - 00:03:37:07
Click on add variable.

00:03:37:25 - 00:03:38:25
Similar interface.

00:03:38:25 - 00:03:40:16
So it comes up with the different types.

00:03:40:16 - 00:03:42:22
Of variable that we can create.

00:03:42:22 - 00:03:44:27
And in this case we're going to.

00:03:44:27 - 00:03:48:22
Create an image variable.

00:03:48:22 - 00:03:52:16
So image variables
allow users to define a selected image.

00:03:52:26 - 00:03:54:18
Via a form entry in mega.

00:03:54:18 - 00:03:57:28
Edit The image selection
can be configured to.

00:03:57:28 - 00:03:59:19
Allow things such.

00:03:59:19 - 00:04:03:24
As user upload of images,
so existing resources in MegaEdit.

00:04:04:18 - 00:04:05:23
So you can.

00:04:05:23 - 00:04:07:01
Allow people to access.

00:04:07:01 - 00:04:09:25
Things such as image. Albums
that they may have uploaded.

00:04:10:24 - 00:04:12:24
You can access clip art sets

00:04:12:24 - 00:04:15:22
and various of the settings
which I'll briefly walk

00:04:15:22 - 00:04:20:16
through.

00:04:20:16 - 00:04:23:05
We'll start off
by entering a variable name

00:04:23:26 - 00:04:24:26
and then we specify

00:04:24:26 - 00:04:28:22
the image options to control the images
available for selection.

00:04:28:22 - 00:04:30:21
By the end user.

00:04:30:21 - 00:04:33:17
So these are the options down here.

00:04:33:17 - 00:04:36:25
The selected options
show some of the available functionality

00:04:36:25 - 00:04:39:28
for controlling
image use via this variable.

00:04:40:09 - 00:04:44:05
And I'll give you an explanation
of a few of these.

00:04:44:05 - 00:04:46:03
So first of all, we have it required.

00:04:46:03 - 00:04:49:05
So that's fairly
self-explanatory is whether.

00:04:49:07 - 00:04:52:26
Choosing an image is mandatory.

00:04:52:26 - 00:04:55:23
We have allow media album selection,

00:04:56:10 - 00:04:59:18
so if enabled, the user can select
previously uploaded.

00:04:59:18 - 00:05:01:29
Media within MegaEdit.

00:05:01:29 - 00:05:07:18
So this is not just media
that's directly linked to this template.

00:05:07:18 - 00:05:09:20
We can allow image upload.

00:05:09:20 - 00:05:13:02
So if enabled users can upload
new media files

00:05:13:17 - 00:05:17:01
from this form entry.

00:05:17:01 - 00:05:19:20
And we have allow clip art resources.

00:05:19:20 - 00:05:22:09
So there's two options
that one is to allow all clip.

00:05:22:09 - 00:05:23:15
Art albums.

00:05:23:15 - 00:05:25:08
Or you can select individual clip.

00:05:25:08 - 00:05:27:08
art albums to allow.

00:05:27:08 - 00:05:31:12
So this allows you to select resources
specified within this.

00:05:31:12 - 00:05:32:24
Invent template.

00:05:32:24 - 00:05:33:22
Selecting one.

00:05:33:22 - 00:05:36:02
Resource set will give you access to all.

00:05:36:02 - 00:05:36:07
Of the.

00:05:36:07 - 00:05:38:27
Resources
within that particular resource set.

00:05:39:25 - 00:05:40:27
So for example, we.

00:05:40:27 - 00:05:43:11
Created a clip. Art resource.

00:05:43:11 - 00:05:47:10
Which was this clip art set example.

00:05:47:10 - 00:05:50:22
If I activate that,
that will give this variable access

00:05:52:08 - 00:05:54:03
to those options to

00:05:54:03 - 00:05:56:08
those available entries.

00:05:56:08 - 00:06:00:03
Scrolling down a little bit,
we also have the ability to specify

00:06:00:03 - 00:06:02:00
some of the transformation options.

00:06:02:00 - 00:06:04:21
That we want the end user to either be.

00:06:04:21 - 00:06:07:08
Able or not be able to do.

00:06:07:08 - 00:06:08:17
These are allowing.

00:06:08:17 - 00:06:11:16
Translations,
allowing the scale of an image or.

00:06:11:16 - 00:06:13:11
Allowing rotation.

00:06:13:11 - 00:06:15:01
If you don't want the user to be able to.

00:06:15:01 - 00:06:16:14
Do any of these things.

00:06:16:14 - 00:06:19:23
You can simply uncheck those boxes.

00:06:24:19 - 00:06:27:19
And we also can select
the default resource.

00:06:28:01 - 00:06:29:27
So we've specified up here the resources.

00:06:29:27 - 00:06:31:29
That we have access to, but if there.

00:06:32:04 - 00:06:35:11
Is a default resource required,
so the initial image

00:06:35:11 - 00:06:38:02
that you want to use,
we can select. It in here.

00:06:39:04 - 00:06:40:18
So this is from our clipart set.

00:06:40:18 - 00:06:42:19
Example,
which is the only. One that we've enabled.

00:06:43:26 - 00:06:44:11
And then I can.

00:06:44:11 - 00:06:45:01
Choose from the.

00:06:45:01 - 00:06:48:03
Images that are within that clip set.

00:06:48:03 - 00:06:49:09
I can then click Save.

00:06:49:09 - 00:06:52:00
To confirm the variable.

00:06:52:00 - 00:06:53:03
The next thing we want to do

00:06:53:03 - 00:06:56:29
is to actually configure
the image field itself to utilize.

00:06:56:29 - 00:07:00:08
The resource and variables
that we've already created.

00:07:01:01 - 00:07:03:09
So to start off with will select
an image field.

00:07:03:09 - 00:07:04:25
On our. Canvas.

00:07:04:25 - 00:07:06:01
The example I've got here.

00:07:06:01 - 00:07:09:00
Is the back of a business. Card
and I've got an.

00:07:09:00 - 00:07:13:02
Image field
which is covering the entire canvas.

00:07:13:02 - 00:07:15:07
If I come over to the properties
tap within.

00:07:15:07 - 00:07:16:17
Invent, you can see that that.

00:07:16:17 - 00:07:19:15
Is an image frame

00:07:19:27 - 00:07:21:28
and I can click enable to make.

00:07:21:28 - 00:07:29:27
That dynamic within Infigo Invent.

00:07:29:27 - 00:07:31:04
So options will appear.

00:07:31:04 - 00:07:32:14
Allowing. You to customize.

00:07:32:14 - 00:07:34:22
Image settings and general settings.

00:07:35:10 - 00:07:39:06
So these two tabs here, image settings
allow.

00:07:39:12 - 00:07:44:28
Modifications to be made or enabled
and disabled in the selected image.

00:07:45:06 - 00:07:47:07
So we'll cover that more in this tutorial.

00:07:48:18 - 00:07:49:24
General settings

00:07:49:24 - 00:07:53:13
cover modifications
of the image background

00:07:53:23 - 00:07:57:15
as well as additional restrictions
such as disabling field deletion

00:07:57:22 - 00:08:00:03
and configuring transformation commands.

00:08:00:16 - 00:08:03:29
So generally speaking,
they control the frame itself,

00:08:05:04 - 00:08:06:11
whereas the image options.

00:08:06:11 - 00:08:10:19
Control
the image that is within the frame.

00:08:10:19 - 00:08:14:16
In order to dynamically change
the image from our MegaEdit editor,

00:08:14:25 - 00:08:18:10
we need to map the image field to either
a specific variable.

00:08:18:25 - 00:08:21:18
Or a specific resource set.

00:08:21:18 - 00:08:23:26
In our example,
we're going to link it to our created.

00:08:23:26 - 00:08:24:06
Image.

00:08:24:06 - 00:08:28:20
Variable and we begin by coming down here
to the image options.

00:08:28:20 - 00:08:30:09
Mapped section.

00:08:30:09 - 00:08:31:19
And selecting variable.

00:08:31:19 - 00:08:33:22
From the type dropdown list.

00:08:33:22 - 00:08:34:27
So you have the option to not.

00:08:34:27 - 00:08:37:05
Link this. To anything at all.

00:08:37:05 - 00:08:37:26
You can link it to.

00:08:37:26 - 00:08:41:27
A variable or you can do it
directly, link it to a resource set.

00:08:47:10 - 00:08:48:02
With the variable

00:08:48:02 - 00:08:52:21
will type selected a new field appears
which is named variable.

00:08:52:21 - 00:08:56:13
From here you can select between
accessible variables in.

00:08:56:13 - 00:08:58:07
The Invent template.

00:08:58:07 - 00:09:00:11
And ones that are applicable to the image.

00:09:00:11 - 00:09:07:28
Frame that you have selected.

00:09:07:28 - 00:09:10:12
There are some additional effects options
that we can

00:09:11:27 - 00:09:15:00
apply to this particular image
within the image frame.

00:09:15:15 - 00:09:18:05
So for example, the image positioning,

00:09:18:05 - 00:09:23:06
if has any additional effects
or opacity changes, we can put those here.

00:09:23:06 - 00:09:23:28
And if we scroll.

00:09:23:28 - 00:09:27:03
Down to the bottom, you'll see
there's also some additional constraints.

00:09:27:24 - 00:09:31:11
So constraint options allow you
to select the level of modification a.

00:09:31:11 - 00:09:34:06
User has over the selected image fields.

00:09:35:03 - 00:09:37:26
So for example,
we could allow image flipping, we.

00:09:37:26 - 00:09:39:18
Could allow. Stretching.

00:09:39:18 - 00:09:40:20
to allow effects.

00:09:40:20 - 00:09:41:24
Adjustment.

00:09:41:28 - 00:09:45:19
So these will all directly control
what the end user.

00:09:45:19 - 00:09:48:18
Is able to do with this particular frame.

00:09:48:18 - 00:09:50:01
They can be customized further.

00:09:50:01 - 00:09:52:06
Once this is placed into. MegaEdit.

00:09:52:06 - 00:09:54:13
This is just allowing you to configure it
within

00:09:54:28 - 00:10:00:10
InDesign.

00:10:00:10 - 00:10:04:24
Once we've made all of these changes,
we're going to go ahead and export

00:10:05:18 - 00:10:06:24
this template.

00:10:06:24 - 00:10:09:29
As a MEX file.

00:10:09:29 - 00:10:11:28
So if we go to the export tab,

00:10:11:28 - 00:10:15:15
it's giving us a summary
of what is configurable.

00:10:15:15 - 00:10:17:18
Within our artwork.

00:10:17:18 - 00:10:19:19
We specify. An export. File.

00:10:19:19 - 00:10:22:04
And then we start the validations.

00:10:22:04 - 00:10:25:05
Any problems will be displayed,
which we might have to repair.

00:10:25:15 - 00:10:28:07
And then we're going to be able
to export that

00:10:28:07 - 00:10:31:20
particular document.

00:10:41:22 - 00:10:45:14
With that file successfully created,
I'm now going to navigate to

00:10:46:20 - 00:10:48:23
the MegaEdit product.

00:10:48:23 - 00:10:51:07
On our Infigo admin.

00:10:51:07 - 00:10:51:29
Area.

00:10:52:18 - 00:10:55:08
The easiest way to get to
this is to search in the menu.

00:10:55:08 - 00:10:57:14
Here for MegaEdit.

00:10:57:14 - 00:10:58:19
Products.

00:11:00:02 - 00:11:02:10
If you haven't got anything
listed in here already,

00:11:02:20 - 00:11:05:22
then you will need to convert
one of your stock products to.

00:11:05:22 - 00:11:07:02
A MegaEdit product

00:11:07:02 - 00:11:08:23
and that is covered in a different.

00:11:08:23 - 00:11:10:00
Tutorial.

00:11:10:18 - 00:11:12:17
In this case, I'm just going to modify.

00:11:12:17 - 00:11:15:19
One of our existing MegaEdit products

00:11:15:19 - 00:11:17:29
with the edit icon on the right hand side.

00:11:19:16 - 00:11:22:11
But what I want to do is to update the.

00:11:22:11 - 00:11:24:19
MEX file that is being utilized.

00:11:24:27 - 00:11:27:08
So in this particular case, it’s
already using.

00:11:27:08 - 00:11:28:23
A MEX File.

00:11:29:10 - 00:11:30:11
If I come up to the top.

00:11:30:11 - 00:11:33:28
Right of this particular page,
you can see I've got a MEX import

00:11:38:10 - 00:11:40:17
and here I can override

00:11:40:17 - 00:11:52:26
and re-upload a new version of that file.

00:11:52:26 - 00:11:55:09
So the import is finished.

00:11:55:09 - 00:11:55:27
So now I'm.

00:11:55:27 - 00:12:10:01
Just going to launch
that particular product.

00:12:10:01 - 00:12:13:03
Now a created image
variable is shown on the right.

00:12:13:03 - 00:12:13:21
Hand side of your.

00:12:13:21 - 00:12:16:04
Screen with a few. Different options.

00:12:17:00 - 00:12:18:28
So one of those is edit.

00:12:18:28 - 00:12:21:19
So this gives you the option to perform
some transformations.

00:12:21:19 - 00:12:23:00
On that particular. Image.

00:12:23:00 - 00:12:24:13
In this case, we've disabled.

00:12:24:13 - 00:12:26:26
Those options, so we're fairly limited.

00:12:26:26 - 00:12:28:19
We've got Select Image, which allows us

00:12:28:19 - 00:12:31:10
to actually choose the image
that we want to display.

00:12:32:05 - 00:12:34:14
In this case. We've got both. Images and.

00:12:34:14 - 00:12:40:02
clipart, so I can go to either
one of those options.

00:12:40:02 - 00:12:42:13
However, we can restrict that either.

00:12:43:08 - 00:12:46:28
In our InDesign configuration or once.

00:12:46:28 - 00:12:49:16
We've uploaded it to MegaEdit.

00:12:49:16 - 00:12:51:10
In this case,
I'm going to choose clipart.

00:12:51:10 - 00:12:53:14
And just change it
to one of my other designs.

00:12:54:14 - 00:12:55:14
You see, by selecting

00:12:55:14 - 00:12:57:29
that, it's now been placed on my artwork.

00:12:59:12 - 00:13:01:00
And I also have the ability to.

00:13:01:00 - 00:13:02:05
Remove.

00:13:02:05 - 00:13:04:11
So again. This is something we can limit.

00:13:05:09 - 00:13:07:17
In terms of what the end user can. Do.

00:13:07:17 - 00:13:08:21
I could quick remove and it.

00:13:08:21 - 00:13:11:28
Would remove
that particular image from that image

00:13:11:28 - 00:13:14:03
frame.

 

Incomplete