IntroductionWelcome| 00:00 |
(music playing)
| | 00:04 |
Hi, I'm Collin Fleming, all around design
and imaging guy for Adobe Systems.
| | 00:09 |
I've been working with InDesign since
1999, and the iPad from day one.
| | 00:13 |
And the Digital Publishing tools that
have become part of DPS since the early beta.
| | 00:18 |
This combination is pretty amazing, both
in how powerful it is for creating rich,
| | 00:22 |
immersive reading experiences for your
readers, and just how easy it is to
| | 00:25 |
create this interactive publication
without being a programmer.
| | 00:31 |
Now, I'm a designer not a developer.
So, we'll be looking at how to plan,
| | 00:36 |
design, build, and distribute a digital
publication in the series from that
| | 00:40 |
design perspective.
Amongst the many topics in the series,
| | 00:44 |
we'll delve into how to create image
sequences in your layouts that allow
| | 00:47 |
readers to control the playback of images
the way they would with a flipbook to
| | 00:51 |
show time lapse imagery, or move around a
3D object.
| | 00:56 |
We'll work through what goes into
building this and other interactive
| | 01:00 |
content with DPS tools, and we'll talk
about some of the business behind DPS
| | 01:04 |
that's rather amazing for publishers.
Now, in this course, we'll create a
| | 01:09 |
number a folio's, layouts and types of
interactivity to get you up and running
| | 01:13 |
with tools and workflows involved in this
new type of publishing for Apple, RIM,
| | 01:17 |
and Android tablets, all based on your
use of In Design.
| | 01:22 |
I have enjoyed working with these tools
and sharing my experience of their use
| | 01:26 |
whenever I can.
I've had a great time working on these
| | 01:29 |
videos and files.
Now, I get to share my knowledge with you.
| | 01:33 |
I'm confident that you will learn many
new skills and understand these tools
| | 01:36 |
more by the end of this workshop.
| | 01:39 |
| | Collapse this transcript |
|
|
1. The Basics of DPSIntroduction to DPS| 00:02 |
Welcome to the DPS Overview.
We're going to take a quick look at various
| | 00:05 |
interactive media types and get a quick
introduction to what goes into the DPS workflow.
| | 00:12 |
Let's consider our PDF first.
These are typically rich, highly designed documents.
| | 00:17 |
And the nice thing about a PDF is that
one PDF file is visible and accessible on
| | 00:23 |
a variety of devices and computing
platforms.
| | 00:28 |
And in each one of those viewing
experiences, the PDF looks the right way.
| | 00:33 |
The fonts that I used are there.
The arrangement of text and graphics are there.
| | 00:38 |
It's a very true and reliable
representation of my document.
| | 00:43 |
So, that cross-platform quality is really
powerful.
| | 00:47 |
Now, there is DRM for some PDF.
And there are some security aspects of PDF.
| | 00:53 |
Now, that experience is a little mixed
occasionally with some platforms
| | 00:58 |
supporting some parts of it.
Some platforms not supporting all aspects
| | 01:03 |
of a PDF, whether it's security, DRM, or
interactivity sometimes.
| | 01:08 |
And the other thing is, your one PDF
might be one of many in a folder.
| | 01:14 |
And reading the PDF might be a very
mixed environment with other applications
| | 01:19 |
around the edges of the window of your
reader.
| | 01:23 |
So, it's not a particularly immersive or
engaging reading experience.
| | 01:28 |
Let's consider ePub for a moment.
This is a very popular topic and very
| | 01:33 |
appropriate for book-like content.
The content, the text will reflow.
| | 01:41 |
You can sometimes change the font or
change the size of the text.
| | 01:45 |
And if you rotate a reading device, the
presentation of the content will reflow
| | 01:50 |
and sometimes change significantly.
The interesting thing about this is, it's
| | 01:57 |
not a highly designed experience, it's a
dynamic experience.
| | 02:02 |
And while ePub documents are
cross-platform, they're not always going to
| | 02:06 |
work on every device or in every reader.
For instance, you can't put an ePub on a
| | 02:12 |
Kindle today.
Now, DRM is also a mixed bag.
| | 02:16 |
Sometimes, it works some places.
Sometimes, it doesn't work in others.
| | 02:20 |
On the other hand, it's a pretty
immersive reading experience.
| | 02:24 |
On a device, I'm only looking at the
book.
| | 02:27 |
But if I'm reading an ePub or eBook on a
computer, there are other things going
| | 02:31 |
around the edges.
And because there's so many different
| | 02:35 |
devices and reading software, each one of
these may render your content different ways.
| | 02:43 |
So, there's gotta be a lot of flexibility
from the designer's point of view, when
| | 02:47 |
you work in an eBook, in an ePub.
Now, if design is really important to
| | 02:53 |
you, you ought to be looking at DPS or
the Digital Publishing Suite.
| | 02:57 |
The cool thing about this is, these are
truly rich and highly designed documents.
| | 03:03 |
Everything I put into the design using
InDesign is emulated correctly in the DPS publication.
| | 03:10 |
The interactive content is quite broad in
its range.
| | 03:14 |
Whether it's audio, or video, or the
types of things that I can interact with,
| | 03:18 |
with gestures of a tablet to move around
inside of an environment.
| | 03:24 |
It's really quite engaging.
It's also nice, because, only your
| | 03:28 |
contents, only your publications appear
in your app, so it's a very specific
| | 03:33 |
reading experience.
It's a very curated experience.
| | 03:39 |
And these folio files are cross-platform.
They're viewers for the iPad, and Android
| | 03:45 |
tablets, and BlackBerry PlayBooks.
So, your content can be read on a number
| | 03:52 |
of platforms quite easily.
There's also an interesting aspect of
| | 03:57 |
DRM, because, while it's not something I
sign into to get access to the content, I
| | 04:02 |
end up purchasing your content and then
it's viewed within your application.
| | 04:09 |
So it's really not a matter of signing
in.
| | 04:12 |
So this means there's going to be a much
more consistent experience,
| | 04:16 |
cross-platforms with this file type.
Now, one challenge we do face with DPS,
| | 04:21 |
is today there is no search quality,
there's no Find within these documents.
| | 04:27 |
So there's a little bit of a give and a
take there.
| | 04:31 |
Well, let's sort of summarize this
current set of ideas.
| | 04:34 |
The goals of DPS really are about
building and selling highly-branded, very
| | 04:40 |
immersive, interactive experiences.
You know who your readership is and you
| | 04:47 |
know how to talk to them, that means you
have designers who know how to design for
| | 04:52 |
your audience and we're taking advantage
of that knowledge.
| | 04:58 |
It's a way to provide experience beyond
print and without the distractions of the Web.
| | 05:05 |
If I look at a website for a magazine, am
I going to see more than just what's in the magazine?
| | 05:10 |
Am I going to be distracted with what's
on the sides of the browser or distracted
| | 05:14 |
by what's outside of the browser?
And as a publisher, analytics, knowing
| | 05:19 |
what people read, how they read it, how
successful they are with your content, is
| | 05:24 |
an amazingly valuable quality that's
going to be important to you.
| | 05:31 |
And that's all part of analytics that DPS
delivers.
| | 05:35 |
So, the DPS analytics is gathered from
your Custom Viewer.
| | 05:39 |
When a customer installs your
application, that application ends up
| | 05:44 |
talking about and looking at what goes
on.
| | 05:48 |
So the analytics is going to talk about how
many people installed it and when they
| | 05:52 |
installed it, talks about how many people
purchased and downloaded your content.
| | 05:57 |
And then, it starts talking about and
looking at the top content, the most
| | 06:01 |
read, how many people read it, and when
did they read it, and it does the same
| | 06:05 |
thing for ads.
And all of this analytic content is based
| | 06:10 |
on Omniture SiteCatalyst data.
So, you get access to some of this data,
| | 06:15 |
but if you're a large enterprise and you
have a site catalyst account, you can get
| | 06:20 |
even more types of data and custom
information.
| | 06:24 |
So let's take a quick moment and just
glance at the general publishing process.
| | 06:31 |
It all starts back in InDesign, and maybe
it starts back in InDesign when you
| | 06:35 |
consider designing for print.
You might be able to easily adjust the
| | 06:40 |
layouts of print to go to what I start
thinking of as print plus.
| | 06:46 |
It's that interactive content.
It's collecting the movies.
| | 06:50 |
It's adding additional images to your
archive so you can build slide shows to
| | 06:54 |
show more than what's in a print version
of your publication.
| | 06:59 |
And DPS content is built up from what I
call design folios.
| | 07:04 |
A design folio is a set of layouts that a
designer builds.
| | 07:10 |
The folio producer system assembles that
data, and then, that is taken to market
| | 07:15 |
in a Custom Viewer.
So, there's a quick look at what's cool
| | 07:20 |
about DPS and a little glance at the work
flow.
| | 07:24 |
We'll take deeper looks at this in other
videos as we go.
| | 07:31 |
| | Collapse this transcript |
| DPS workflow: The big picture| 00:02 |
Let's take a high altitude look at the
big picture.
| | 00:06 |
The general DPS workflow.
Now, the workflow's going to start in InDesign.
| | 00:11 |
And that's where I build my content.
Since A DPS publication is probably going
| | 00:16 |
to be ran on a tablet device and people
tend to turn tablet devices, I'm probably
| | 00:20 |
going to want to consider building both a
vertical and horizontal layout for each
| | 00:24 |
of these orientations.
These orientations are separate and
| | 00:29 |
different InDesign files.
And in each of these InDesign files, I'll
| | 00:34 |
add interactive content.
This could be a series of images, it
| | 00:38 |
could be a panoramic or it could be
things like audio or video amongst others.
| | 00:44 |
All of this work is done in InDesign.
And once I've completed the vertical and
| | 00:49 |
horizontal layouts, I'll end up combining
these into an article in a Design Folio.
| | 00:56 |
A Design Folio is a container which may
have one or more articles.
| | 01:01 |
Each of those articles may have one or
two layouts.
| | 01:06 |
And these articles, altogether, part of
this design folio, is what I can as a
| | 01:10 |
designer, share with a publisher.
Now, we move from the InDesign portion of
| | 01:17 |
the workflow and move over into the DPS
subscription area.
| | 01:22 |
A publisher is likely to subscribe to
DPS.
| | 01:26 |
That subscription gives them access to
the folio production system.
| | 01:31 |
This is where I can take parts of
different design folios and assemble them
| | 01:35 |
into a production folio.
This would allow me to take the
| | 01:39 |
advertisement designed by one person in
one design folio and combine it with the
| | 01:44 |
cover graphics, the feature articles, and
other articles of my publication.
| | 01:51 |
That publication, the production folio,
will be inserted into a custom viewer.
| | 01:56 |
That custom viewer can be built by a DPS
subscriber.
| | 02:01 |
That custom viewer can then be
distributed on various marketplaces or
| | 02:05 |
app stores.
And once it's installed on a device, we
| | 02:09 |
can start to collect analytic data for
your publications.
| | 02:14 |
That analytic data talks about
installations and reader habits inside of
| | 02:18 |
your reader.
Once you decide to publish a new folio a
| | 02:22 |
little later, maybe next month, you might
decide to publish additional data or
| | 02:27 |
update the content in your published
folio.
| | 02:32 |
This allows you to have an ongoing
relationship with your readers.
| | 02:36 |
Now, it's going to be important to consider
and be aware of some of the boundaries in
| | 02:40 |
the DPS workflow.
For instance, if you have InDesign CS5,
| | 02:46 |
or InDesign CS55, you can install the DPS
workflow tools and in conjunction with a
| | 02:51 |
free Adobe ID, you can build one design
folio which can have multiple articles.
| | 03:00 |
You can't reorder the articles, so you
have to plan ahead if you want or intent
| | 03:04 |
to have a specific experience or order to
your content.
| | 03:10 |
Editing metadata can be done, although,
it's a little on the repetitive side and
| | 03:14 |
you have to go to the right place to do
it.
| | 03:17 |
And while you can share a folio, it's not
really a way to publish or distribute
| | 03:22 |
your content in a broad manner, it's
really a way to share it with somebody
| | 03:26 |
else who's part of the DPS subscription
system.
| | 03:32 |
So, those are the boundaries when working
with a free Adobe ID.
| | 03:36 |
If you happen to have an Acrobat.com Pro
account, the rules change slightly.
| | 03:41 |
For instance, you can have multiple
design folios, each with multiple articles.
| | 03:47 |
The rest of the rules apply, though.
So, you can do more things but you still
| | 03:52 |
have to be just as careful.
Now, the third approach is to have a DPS subscription.
| | 03:59 |
With the DPS subscription, you've got all
the production tools for InDesign.
| | 04:05 |
You can build multiple design folios.
And once you start using the website, you
| | 04:10 |
can build production folios.
That's where you combine contents from
| | 04:16 |
different design folios.
This allows you to also do things like
| | 04:20 |
reorder the articles, really nice
metadata editing for all of your
| | 04:24 |
articles, and folios.
And if you have a lot of HTML content,
| | 04:29 |
you can have a shared resources folio,
which will help reduce the overall size
| | 04:33 |
of your production piece.
A DPS subscription also gives you access
| | 04:40 |
to build custom viewers and viewer
applications for a variety of platforms.
| | 04:45 |
And the most important thing, you can
distribute content.
| | 04:49 |
You can put your applications into app
stores and marketplaces.
| | 04:54 |
And a critical aspect is being able to
distribute and deliver the content.
| | 04:59 |
Because you can make a custom viewer,
that means you have something to
| | 05:03 |
distribute into an app store or
marketplace.
| | 05:07 |
And that custom viewer collects analytic
data on your reader.
| | 05:12 |
So, you get the really good information
that's really quite powerful.
| | 05:16 |
So, those are the basics of what goes
into a DPS workflow and some of the
| | 05:21 |
boundaries to be aware of.
| | 05:25 |
| | Collapse this transcript |
| DPS terminology| 00:02 |
The Digital Publishing Suite is a very
new and very dynamic set of tools.
| | 00:06 |
We're still working on names for what's
going on and how to describe what we're
| | 00:10 |
doing and what we have to do.
So, let's take a moment and I'll share
| | 00:15 |
the words that I use when I'm working
with DPS and sharing my information with
| | 00:19 |
other people.
I'll start off with the words that I use
| | 00:24 |
within InDesign.
Now, ultimately, the goal is I want my
| | 00:28 |
designers to create what I call Design
Folio.
| | 00:31 |
A Design Folio is one of these lines of
content inside the Folio Builder.
| | 00:36 |
And Design Folios are what I could share
with a publisher so that they have access
| | 00:41 |
to all of my work on a specific topic or
for a specific publication.
| | 00:47 |
A Design Folio is built up of pieces.
Each of those pieces is an article.
| | 00:53 |
An article might be the cover, or an ad,
or a feature story, or it might be
| | 00:58 |
letters to the editor.
It's a subunit of the Design Folio.
| | 01:05 |
Now, each of these articles may be built
up of one or two layouts.
| | 01:10 |
You have the option of building a Design
Folio which is only designed for
| | 01:14 |
landscape viewing, in which case, every
article in that Design Folio can only
| | 01:17 |
have a Landscape layout.
You could also choose to design a Design
| | 01:23 |
Folio only for Portrait orientations, in
which case, every article can only have
| | 01:28 |
Portrait layouts in that one Design
Folio.
| | 01:33 |
Or if you want your readers to be able to
rotate their tablet devices and see both
| | 01:38 |
layouts, then all articles must have both
a Landscape and Portrait layout.
| | 01:45 |
Now, each of those layouts is separate
InDesign file.
| | 01:49 |
So, you can see the overall structure of
a Design Folio being made up of articles,
| | 01:54 |
each article being one or two layouts,
and hence, one or two InDesign files.
| | 02:01 |
Now, inside of those InDesign files,
that's where we start to build the
| | 02:04 |
interactivity, the really cool stuff that
makes a DPS publication really engaging.
| | 02:09 |
You build those with overlays.
You use the overlay creator panel inside
| | 02:14 |
of InDesign, and you build those
interactions.
| | 02:18 |
So, I'll talk about using overlays is a
good deal.
| | 02:21 |
And ultimately, you want to see how this
all works.
| | 02:24 |
You might notice in the bottom left-hand
corner of a couple of those panels on
| | 02:28 |
screen, there's a button that says,
Preview.
| | 02:32 |
And when you click the Preview button,
InDesign creates a folio file in the
| | 02:35 |
background, and it presents it using the
Adobe Content Viewer.
| | 02:40 |
So, this allows you to proof most of the
interactivity that you build in a DPS
| | 02:44 |
document on your computer screen.
Sometimes, you have to be aware that not
| | 02:50 |
every type of overlay will work in the
Desktop Preview System.
| | 02:55 |
So, always go and test on a device for
the final say.
| | 03:00 |
Now, if we move a step out from the
design world, and we move into the
| | 03:03 |
publishing world, now, we're going to talk
about a couple of words I use with DPS subscribers.
| | 03:10 |
So, these are the publishers who have
subscribed to the digital publishing
| | 03:14 |
services and that gives them access to
more diverse set of tools and capabilities.
| | 03:21 |
Now, their work is still based on the
Design Folio.
| | 03:23 |
And you or they will be creating a Design
Folio.
| | 03:25 |
And then, they move into a website, and
this is the Digital Publishing Suite
| | 03:32 |
website, where they will first see a
dashboard.
| | 03:38 |
And this is where they can see things
about analytics and download information
| | 03:42 |
but the big important thing is the Folio
Producer.
| | 03:45 |
And what the Folio Producer lets them do
is take a Design Folio and move it into a
| | 03:50 |
production state.
And what I mean by this is, they can do
| | 03:54 |
things like change the order of the
articles by dragging them around or
| | 03:58 |
changing the numbering scheme.
They also get a really nice Metadata
| | 04:04 |
Editing environment, and they can copy
content from various design folios into a
| | 04:09 |
new production folio.
So, this is moving a step forward in the
| | 04:15 |
production process, getting to a
Production Folio and eventually, you move
| | 04:20 |
that Production Folio to a published
state.
| | 04:25 |
Now, what a published state means is it
may now be viewable by your Custom
| | 04:30 |
Viewer, your application.
Now, you are going to also have to build
| | 04:35 |
some information that helps present your
folio inside of your viewer, and one of
| | 04:40 |
those things is what I call a Folio
Cover.
| | 04:44 |
A Folio Cover is a graphic representation
of a particular folio which is going to
| | 04:49 |
be visible in the Custom Viewer.
Now, I've mentioned the Custom Viewer a
| | 04:55 |
couple of times, and DPS subscribers have
access to the Viewer Builder.
| | 05:00 |
This is an AIR-based application which
will create the custom application which
| | 05:05 |
you can distribute in various
marketplaces and app stores.
| | 05:10 |
Now, that Viewer Builder is going to go
ahead and generate the Viewer, which when
| | 05:15 |
placed on a device, presents that Folio
Cover in the Library View on the device
| | 05:20 |
and lets your readers see what's going
on.
| | 05:25 |
So, that's a bunch of new words.
I'm trying to lay them out in a logical
| | 05:30 |
and reasonable fashion that helps
differentiate how we use the word folio
| | 05:34 |
in a lot of different ways in this
workflow.
| | 05:38 |
So, by using Design Folio, Production
Folio, Published Folio I try to make it a
| | 05:44 |
little bit easier to swallow this stuff.
I hope this helps you.
| | 05:52 |
| | Collapse this transcript |
| DPS tools, subscriptions, and services| 00:02 |
When I talk about digital publishing
suite, I typically talk about things like
| | 00:06 |
tools, subscriptions, and services.
So, let's take a moment and sort of break
| | 00:10 |
those terms down.
The most basic thing for me in this
| | 00:13 |
process is InDesign.
It's where we build the designs, the
| | 00:17 |
layouts, the interactivity that go into a
DPS publication.
| | 00:22 |
InDesign CS5 and 55 have a couple of new
panels if you install the DPS tools.
| | 00:29 |
One of them is the Overlay Creator panel
and this is what I use to build the
| | 00:33 |
interactivity in a DPS publication.
I'll take those InDesign files, those
| | 00:38 |
layouts and designs, and combine them
into a design folio in the Folio Builder.
| | 00:45 |
And I'll take those design folios and
share them with other people.
| | 00:49 |
This is what's possible with In Design
alone, using the DPS tools.
| | 00:54 |
Now, this design folio can do a lot of
things.
| | 00:57 |
But it's not really a publishing tool.
That publishing process comes through a
| | 01:03 |
subscription to DPS.
And a DPS subscription extends this
| | 01:08 |
workflow immensely and gives you many new
tools and opportunities.
| | 01:13 |
One of the first opportunities is
building what I call a production folio.
| | 01:17 |
A production folio is very much like a
design folio except you work with it and
| | 01:22 |
you edit it in a website.
That website gives you beautiful access
| | 01:27 |
to the metadata for each of the articles.
It lets you reorder the articles in a
| | 01:33 |
production folio.
And it lets you pick up content from
| | 01:37 |
other people's design folios to compile
your production folio.
| | 01:43 |
Now eventually you want your production
folio to be published.
| | 01:47 |
And what's going to happen is your
content will be presented in your custom viewer.
| | 01:52 |
You build your custom viewer with the
viewer builder, which is accessible
| | 01:56 |
because Publisher has a DPS subscription.
The Viewer Builder is used to build your
| | 02:03 |
Custom Viewer App, and combining the
Viewer App with a folio you end up with a
| | 02:08 |
Published Folio and Viewer.
The combination of these two things, the
| | 02:15 |
Published Folio and Viewer are one
visible object, one application which you
| | 02:19 |
can distribute to various app stores and
marketplaces.
| | 02:25 |
Once your viewer is downloaded and
installed on a device, that device in the
| | 02:29 |
active reading is going to generate
analytic data.
| | 02:33 |
The analytic data is also available to a
DPS subscriber.
| | 02:38 |
Now, things like the analytics, access to
the production folio system, those are
| | 02:42 |
all services of a DPS subscription.
So, folks from Adobe and I will all use
| | 02:48 |
terms like this almost interchangeably as
we discuss the topic.
| | 02:53 |
So, if we break it down a little bit, and
just talk about the design folio, in
| | 02:58 |
design alone with the DPS tools, allow
you to use a free Adobe ID to generate a
| | 03:03 |
single design folio.
That single design folio can be shared
| | 03:09 |
with other people and with publishers.
But sharing isn't a way of broadcasting
| | 03:15 |
your content.
This is not a way to publish, distribute,
| | 03:20 |
or sell your content.
And a design folio and InDesign, don't
| | 03:24 |
really have ways of reorganizing your
design folio content that's particularly
| | 03:29 |
easy at all.
And because you don't have a custom
| | 03:33 |
viewer and you're not distributing your
content, you don't get analytics.
| | 03:39 |
So, an end design user with a design
folio can do some cool stuff.
| | 03:44 |
And you can share your content with other
people or, more important, with publisher.
| | 03:50 |
But a publisher can go a lot further.
For instances, a DPS subscription gives
| | 03:55 |
them access to the DPS website, where
they can use the Folio Producer to
| | 03:59 |
generate their production folios and edit
content.
| | 04:04 |
They can also download the Viewer Builder
and start building their own custom
| | 04:07 |
viewer applications.
And once they've built those, they
| | 04:12 |
combine that with a folio and they start
to publish and distribute their content.
| | 04:18 |
Once the content is out in the wild,
analytic data is collected on it and they
| | 04:22 |
can see that in the analytics dashboard.
It's probably good to note that there are
| | 04:28 |
two types of DPS subscriptions.
A DPS Pro subscription is a turnkey
| | 04:33 |
solution that uses Adobe servers for the
fulfillment or delivery of your folio content.
| | 04:41 |
There are fixed prices involved with this
and commitments to the volume of
| | 04:45 |
downloads or the volume of fulfillments
that you expect to have on an annual basis.
| | 04:52 |
A pro subscription does include 5,000
initial downloads or fulfillment.
| | 04:57 |
And it's also good to know that in either
of these subscription models you can have
| | 05:02 |
multiple titles.
You can build multiple viewers for
| | 05:06 |
different publications titles magazines,
et cetera.
| | 05:12 |
An enterprise subscription is a much
larger subscription.
| | 05:17 |
This allows interaction with an
enterprise's servers for fulfillment, it
| | 05:22 |
could connect to a Enterprise's
subscriber database, and do certain types
| | 05:26 |
of transactions through that Enterprise's
devices.
| | 05:32 |
So, there's a break down of the tools,
the subscriptions, and the services.
| | 05:38 |
Some of these are subtle word differences
but I hope this helps you understand as I
| | 05:44 |
talk about this.
| | 05:47 |
| | Collapse this transcript |
| DPS publishing| 00:02 |
So let's take a look at what it takes to
publish using the DPS system.
| | 00:08 |
You're going to want to get a number of things
put together before you try to actually
| | 00:13 |
build the DPS publication and the DPS
application.
| | 00:18 |
So the biggest thing is a subscription to
the DPS system.
| | 00:23 |
That's going to give you access to the tools
that allow you to build the viewer and
| | 00:26 |
distribute the files.
Now, you're going to need content.
| | 00:31 |
That means you're going to need to build and
collect the interactive material, which
| | 00:36 |
is beyond a print design.
This would include the audio and video files.
| | 00:41 |
This would also include things like the
images that go into a panorama or that
| | 00:45 |
additional images that go into a
multi-state object based slide show.
| | 00:51 |
You're going to have to build the design
files, that's the horizontal and vertical
| | 00:56 |
layouts, if you have a dual orientation
publication in mind.
| | 01:00 |
You're going to need to build some cover
artwork.
| | 01:03 |
That's going to represent a particular folio
in the library view inside of your Viewer.
| | 01:09 |
And you're going to need to build some
Viewer Art.
| | 01:12 |
The viewer art is going to be things like
the icon that I see on my device and the
| | 01:15 |
splash screen or launch screen when I
start your application.
| | 01:20 |
You're also going to need developer
certificates from Apple and Android or
| | 01:25 |
other device manufacturers.
You can get Apple credentials at the
| | 01:31 |
links you see here on-screen.
And it's helpful to note that there two
| | 01:35 |
different types credentials you can get
as an Apple developer.
| | 01:39 |
A basic iOS certificate allow you to
build applications to sell in the App Store.
| | 01:46 |
But an enterprise solution or an
enterprise credential is going to allow
| | 01:50 |
you to build applications, which can be
distributed privately within your
| | 01:54 |
enterprise within your company in a more
controlled manner.
| | 02:00 |
For Android credentials, take a look at
the Adobe Knowledge Base article here on screen.
| | 02:06 |
So, once you've collected all of these
pieces, then you're going to have somebody
| | 02:10 |
take a look at the Viewer Builder.
The Viewer Builder is an Air-based
| | 02:15 |
application which builds the iOS,
Android, and in the future additional
| | 02:19 |
platform-specific applications that carry
your Folio content...
| | 02:26 |
There are two major types of viewers you
can build.
| | 02:28 |
Either a single folio app, which contains
the one and only folio or publication
| | 02:33 |
that's going to go into that application.
Or, for periodical or content that you
| | 02:39 |
want to update over time, you can build a
multiple folio app.
| | 02:45 |
And the Viewer Builder can build three
types of viewers.
| | 02:48 |
For instance, it can build a developer
app and provisioning file for an iPad.
| | 02:53 |
This would allow me to create an
application and provisioning files, so a
| | 02:57 |
small team of people could test this on
their iPads.
| | 03:01 |
They can load the application and
provision file onto their ipad and get a
| | 03:06 |
real experience.
The dealer app can also generate a
| | 03:11 |
distribution app.
This is the version of the application
| | 03:15 |
that you would submit to the App Store or
marketplace for distribution and sale.
| | 03:20 |
The third type is an enterprise app and
provisioning file.
| | 03:24 |
This is a version of the application for
distribution within a business on iPad.
| | 03:32 |
To generate the enterprise app, you will
need enterprise credentials for iPad development.
| | 03:37 |
Now, once you've built your viewer and
it's out and distributed and installed on
| | 03:42 |
a user-base, the Viewer is going to collect
analytic data, the data is collected from
| | 03:48 |
live viewer apps and published folio's in
the wild.
| | 03:54 |
One of the fascinating things about this
data is it belongs to the DPS subscriber.
| | 04:00 |
So the publisher will be able to see
analytic data like purchases, when people
| | 04:05 |
purchased the application or the content.
And when they downloaded it, including
| | 04:11 |
things like failed downloads and
completed downloads.
| | 04:14 |
You'll be able to see information about
installation and the timeline when
| | 04:18 |
installs occurred.
And then, you get breakdowns of the top
| | 04:22 |
content and the top ads to see what the
popular content and materials are inside
| | 04:26 |
of your publications.
So, there's a quick peek at what you need
| | 04:33 |
to generate a DPS publication and the
benefits you get at the end.
| | 04:41 |
| | Collapse this transcript |
|
|
2. Designing DPS FilesGeneral workflow| 00:02 |
Let's take a couple of minutes and talk
about my general DPS workflow.
| | 00:06 |
Having an idea of where you're coming
from and where you're going to is going
| | 00:10 |
to be really important so that you
understand everything that goes into this workflow.
| | 00:15 |
Now, at it's most basic level, one of the
big things you're going to be dealing
| | 00:19 |
with all the time is building new
documents.
| | 00:23 |
So, in the New Document dialog box, there
are a couple of choices here that are
| | 00:27 |
important for DPS.
The first one is changing the intent form
| | 00:33 |
Print to Web.
Making this choice changes a couple of
| | 00:37 |
things in this dialog box.
For instance, it turns facing pages off
| | 00:41 |
because in DPS, we don't deal with
spreads.
| | 00:45 |
We work with single pages at a time.
It also takes us down into the
| | 00:50 |
device-centric dimensions set.
And the intent also switches us both to
| | 00:56 |
pixels as the unit of measure we see here
in the Width Field, but it also takes us
| | 01:00 |
into the more device-centric dimensions
here in the pull-down list of Page Sizes.
| | 01:08 |
It's important that you build a document
which matches the dimensions of your
| | 01:12 |
intended target device.
A lot of my work is built for an iPad
| | 01:16 |
because that's one of the most popular
tablets out there for DPS now.
| | 01:21 |
So, I'm going to choose 1024 by 768
pixels to build this document.
| | 01:27 |
You can change the orientation to work
with the horizontal and vertical layouts.
| | 01:32 |
And it's important to consider whether or
not you're going to do a single
| | 01:36 |
orientation design or a dual orientation
design.
| | 01:41 |
Within any folio, every article must have
the same orientations.
| | 01:47 |
If you have only vertical, that's fine as
long as every article is only verical.
| | 01:53 |
If any one article has both oreintations,
then all articles also need both orientations.
| | 02:00 |
Feel free to pick your favorite numbers
for columns and gutter values.
| | 02:04 |
But when it comes to margins, one of my
recommendations is to use a 44 pixel
| | 02:08 |
margin, at least on the top and on the
bottom.
| | 02:12 |
This is because when you're looking at a
DPS publication on a device, if you
| | 02:16 |
click, you're going to get the Navigation
System.
| | 02:20 |
And that Navigation Bar at both the top
and the bottom of the screen is 44 pixels deep.
| | 02:27 |
So, I'm using the top and bottom margins
more as a safety zone, a recommendation
| | 02:31 |
of where I'm not going to put critical
data that's part of my design.
| | 02:37 |
So, I'm going to go ahead and click OK.
And now we get a representation of the page.
| | 02:42 |
So, now it's a matter of doing my designs
for both the vertical and the horizontal,
| | 02:47 |
or just one.
And I've got a couple of files open already.
| | 02:52 |
So, let's switch on over and take a look
here.
| | 02:55 |
So, I have both a horizontal and a
vertical orientation already built.
| | 03:01 |
And you go along and you build your
design now.
| | 03:04 |
The text and the graphics, everything
that you would normally do for any piece
| | 03:08 |
of design work, and you do one more thing
now in the DPS process, and that's add interactivity.
| | 03:15 |
So for instance, I might paste some
artwork and some interactive content
| | 03:20 |
which includes a sound and position
that's somewhere on my page.
| | 03:25 |
And then also, move over to the other
orientation and paste the same sound on
| | 03:30 |
this page.
This gives me the same interactivity
| | 03:34 |
options on both orientations.
So, I've built the files.
| | 03:39 |
I've thought about the orientations, and
I've added interactivity.
| | 03:43 |
Now, it's a matter of starting to build
the DPS Publication.
| | 03:48 |
The way you do this is by going to the
Folio Builder panel.
| | 03:52 |
This panel is part of the DPS workflow,
and this is where you start to construct
| | 03:56 |
sets of articles into a publication
called a Folio.
| | 04:01 |
So, maybe this is a folio called Local
Summer.
| | 04:06 |
We talked about the dimensions of this
folio.
| | 04:09 |
This needs to match the aspect ratio of
what I've been building.
| | 04:14 |
Now, I'm not only going to match the
aspect ratio, but I'm going to match the
| | 04:18 |
dimensions at 1024 by 768.
It's important to note that if this
| | 04:24 |
design is intended to go to a smaller
device, it's probably to your advantage
| | 04:29 |
to redesign at a smaller size.
This is because, otherwise, you get a
| | 04:35 |
bunch of scaling, and that might take up
processing time.
| | 04:39 |
If your design might be viewed on a
larger device, I'm less inclined to
| | 04:43 |
redesign the content.
And that's because I'll get a little bit
| | 04:48 |
of scaling, but I'm also going to get
letter boxing.
| | 04:51 |
And sometimes I'm just fine with that.
So, I'll build the folio, that's the next
| | 04:57 |
step in the process, and now I have a
container for my content.
| | 05:03 |
Now, I've gone back up to the folio
level.
| | 05:06 |
And it's a really good idea to add some
information, some metadata, and those are
| | 05:10 |
properties to the folio.
This would include a publication name.
| | 05:15 |
I'm going to call this Local because
that's the publication this is part of.
| | 05:19 |
And I'm going to add some cover preview
artwork.
| | 05:23 |
So, I click to Browse to and find some
content.
| | 05:27 |
I go to the desktop of my machine,
Digital Publishing > Folio Covers.
| | 05:32 |
And in here, I have a cover of the
summer, and I'm currently loading the
| | 05:36 |
vertical orientation.
I also load up the horizontal orientation
| | 05:41 |
while I'm here.
So, now that I've created the folio and I
| | 05:47 |
edit the properties to add the metadata
for the title, and the cover previews,
| | 05:52 |
I'll click OK.
And now, it's time to go into the folio a
| | 05:57 |
little bit and talk about adding article
content.
| | 06:01 |
So, an article is a piece of the larger
design.
| | 06:05 |
It's the cover, it's an ad, maybe letters
to the editor, or one of the feature articles.
| | 06:12 |
So, it's a unit of journalistic content,
shall we say.
| | 06:17 |
And now that I'm looking at the articles
level of this folio, it's a matter of me
| | 06:21 |
choosing to add New Content.
Now, this is going to be the cover.
| | 06:26 |
So, I'm going to call this Cover.
And because I'm working with an active
| | 06:32 |
page, that page is going to be loaded in.
This is going to be brought in as the
| | 06:38 |
horizontal orientation.
That's because it's wider than it is tall.
| | 06:43 |
And in a moment, what we'll do is load
the other file as well.
| | 06:49 |
So now, we're going to go into the cover
article, and we see the landscape view
| | 06:54 |
that we just loaded.
I'm going to switch Active Documents to
| | 06:58 |
show the vertical layout, then I'm going
to click New, and this is going to be how
| | 07:03 |
I insert the portrait layout.
So, there's a quick idea of how I work
| | 07:09 |
through the content and how I add
materials to build up from a simple
| | 07:13 |
design that's built at the right set of
dimensions, to building interactivity, to
| | 07:18 |
adding folios.
And then articles, and then layouts.
| | 07:26 |
Let's go up a level to that article and
let's take a look at the properties or
| | 07:30 |
metadata for the article.
This is where I would add the Title, a Description.
| | 07:39 |
And then, various information like the
byline and the kicker, which might be the
| | 07:44 |
words that introduce the title, so like
new or this season.
| | 07:50 |
Or it could be a departmental headline
like features or letters to the editor.
| | 07:56 |
Byline is the author.
If we mark this as an advertisement, it
| | 07:59 |
won't show up in the table of contents.
I click OK.
| | 08:03 |
And now you can see I've built up the
basics of this workflow from building a
| | 08:08 |
simple file that's the correct
orientation and dimensions for my device.
| | 08:15 |
Adding content and design, adding
interactivity and then creating a folio
| | 08:20 |
and articles and adding metadata to both
the folio and article.
| | 08:26 |
The last thing in this process is
actually take a peak at what I've built.
| | 08:32 |
So, if I click Preview down here, I'll
now get a Desktop Preview tool that shows
| | 08:36 |
me my design.
And if I click the button here for the
| | 08:40 |
audio sample, (audio playing) we get an idea of
the audio.
| | 08:44 |
So, those are the basic aspects of this
workflow.
| | 08:48 |
It's really simple to work with InDesign,
and then we're adding a couple of
| | 08:51 |
additional pieces.
Play with it and experiment.
| | 08:55 |
It's really cool.
| | 08:59 |
| | Collapse this transcript |
| Planning folder structures| 00:02 |
Let's talk a little bit about how I
sometimes plan a folder structure for our
| | 00:06 |
DPS workflow that I have a really good
idea of what I'm building and can
| | 00:10 |
influence how the articles are imported
into a folio.
| | 00:16 |
I'm going to start by building a new folder.
This folder is going to be my folio folder.
| | 00:21 |
And I'm just giving it a generic name
here because this is the folder which is
| | 00:25 |
going to represent the entire folio.
Inside of the folio, is where we're going
| | 00:30 |
to see article folders.
So, in this folder, I'm going to go ahead
| | 00:34 |
and add a couple of new folders, and then
I might choose to rename these folders.
| | 00:40 |
I'm going to use numbers in front of the
article name to help control the sort
| | 00:45 |
order of these folders.
So I'm going to change the second one to 0-1.
| | 00:50 |
This is going to be an ad.
And the third one is going to be 0-2.
| | 00:55 |
This is going to be a feature article and
it might be feature number 1.
| | 01:00 |
So I use numbers at the beginning to
control the order that I read these in alphabetically.
| | 01:07 |
This is going to be important if I import
the folio folder into a folio.
| | 01:14 |
If I do that everyone of the article
folders is brought in in the order that
| | 01:17 |
we see them here.
And this will let me control the order of
| | 01:22 |
the articles when I'm working inside of a
design folio.
| | 01:26 |
Now if I'm going to design both
horizontal and vertical layouts for each
| | 01:31 |
of these articles, I need to start
somewhere.
| | 01:35 |
And one resource I can use is a template
file.
| | 01:38 |
If I go to the digital publishing folder,
And then open the video to brain bonus
| | 01:43 |
files folder.
I'm going to see that there's a DPS
| | 01:47 |
templates folder in here.
If I'm designing for an iPad, I could
| | 01:52 |
simply select both the horizontal and
vertical layouts here, and open these
| | 01:56 |
template files.
When you open a template file in
| | 02:00 |
InDesign, you get an untitled copy, of
the file.
| | 02:04 |
And you can see I have margins at 44
pixels, the top and the bottom.
| | 02:08 |
Got another safety at 88 pixels at the
bottom, for large square bars.
| | 02:13 |
And you see a little bit of a guide over
there on the right-hand side.
| | 02:17 |
And that's a six pixel scroll bar area.
So just a little bit of guidance on here.
| | 02:23 |
Maybe this is going to be my cover.
So, I'm going to go ahead and choose, File
| | 02:26 |
and Save, and I'm going to call this
Cover_V, for vertical on the desktop on
| | 02:29 |
my machine.
I go into my folio and then into the
| | 02:35 |
Cover article folder.
And I save it.
| | 02:42 |
I close this file, and save the
horizontal one.
| | 02:45 |
This is going to be cover, underscore H.
And InDesign remembers where I just
| | 02:50 |
saved things.
I go straight into that folder.
| | 02:54 |
I would do exactly the same thing for the
other files and other folder systems that
| | 02:58 |
I'm building here.
The reason I do it this way is so that I
| | 03:02 |
have a clean folder structure and file
structure with solid naming, so that I
| | 03:07 |
can input this content any way I want,
very efficiently into the folio builder
| | 03:12 |
and Indesign.
This key set of planning makes me a much
| | 03:18 |
more efficient user.
It's also critical to consider where you
| | 03:24 |
build your folio folder, because once you
start building articles and importing the
| | 03:29 |
content into a folio in the Folio Builder
panel, you should not move any of these files.
| | 03:37 |
That's because the Folio Builder doesn't
work like the Links panel.
| | 03:41 |
You need to keep these where they are
when you add them to a folio.
| | 03:45 |
So they're you go a couple of tips about
how I generate folder structures and how
| | 03:49 |
I use folder structures to my advantage
while I build the UPS content.
| | 03:55 |
Experiment with this, it may lead to some
happy thing.
| | 04:02 |
| | Collapse this transcript |
| Making layouts the right size| 00:02 |
When you're working in a DPS workflow,
you're going to be building a lot of files
| | 00:06 |
and building the files in a consistent
way is going to be important for your happy
| | 00:10 |
experience with DPS.
Let's take a look at a couple of ways of
| | 00:15 |
building files it's going to make your job a
lot easier.
| | 00:19 |
Now, at the most basic level, if you
choose File, New, and New Document.
| | 00:25 |
I've mentioned that going with a Web
Intent and choosing the dimensions of the
| | 00:29 |
device are really important.
I also like 44 pixels for my margins.
| | 00:35 |
Now, I can go through and do all of those
settings every single time that I build a
| | 00:41 |
new publication, or at this point I could
stop and save a preset.
| | 00:48 |
Now, I could go through all of those
choices every single time I build a new
| | 00:52 |
document or I could pause here for a
moment and consider what presets do for me.
| | 01:00 |
If I click Save Preset, I now can call
this anything I want.
| | 01:05 |
And I'm going to go DPS_h, because I'm
building the horizontal version here.
| | 01:11 |
I click Okay, and now that document
preset shows up here in the pull-down menu.
| | 01:17 |
So if I cancel this new document dialog
now and issue the new document dialog
| | 01:23 |
box again, I simply can choose my DPS h,
and everything is set up the way I like it.
| | 01:31 |
Now if you go through and you build a
number of presets, there's more you can
| | 01:36 |
do with preset systems.
So, I'm going to click Cancel I'm going to
| | 01:41 |
go file, document, presets, and you see
here's the dpsh1.
| | 01:44 |
Here's where I can go and define document
presets or edit them.
| | 01:47 |
So I could select the underscore h.
I could build a new layout, and this time
| | 01:54 |
it's going to be 1024 by 768 vertical.
I'm going to call this one DPS_V for
| | 02:02 |
vertical and everything else is set up
the way I like.
| | 02:08 |
And now I have both the horizontal and
vertical orientations for building iPad
| | 02:12 |
content wit these presets.
Excellent, I'm ahead of the game.
| | 02:18 |
Now one of my favorite little tricks is
you can come File, export, choose a
| | 02:22 |
preset, and you get a dialog box.
But if you're impatient, hold the Shift
| | 02:27 |
key when you do this.
Go File, document preset, and select DPS
| | 02:32 |
H, or V, with the Shift key held down,
and you instantly get to that brand new
| | 02:37 |
untitled document.
So, that's 1 way I make documents fast,
| | 02:43 |
accurate and the same way every single
time.
| | 02:48 |
Now, 1 of the interesting challenges
about presets is if you ever have to
| | 02:53 |
reset the defaults of InDesign you lose
these.
| | 02:57 |
So, building up a couple of presets is
great.
| | 03:02 |
But then I think it's important to go to
the define command, select your presets,
| | 03:07 |
and then save them out as a separate
file.
| | 03:11 |
The reason this is cool is because then
there's this load command.
| | 03:16 |
And if you click the Load command and go
to the desktop of your machine and find
| | 03:20 |
the digital publishing folder, go take a
look inside of the video to brain bonus
| | 03:24 |
files and you're going to find a DPS
presets file here.
| | 03:29 |
Click Open and now you're going to see
I've built iPad horizontal, vertical and
| | 03:33 |
some android dimensions as well.
So, now when I click okay and I come back
| | 03:40 |
to that presets area now I can start
something for iPad h or v or Android device.
| | 03:47 |
So, that's one way to start building
files enter the right dimension and the
| | 03:51 |
right orientation.
Another example of how you can do that is
| | 03:57 |
by building template files.
If you take a look inside of the digital
| | 04:02 |
publishing folder.
In the video to brain bonus files folder,
| | 04:06 |
you're going to find a DPS templates folder.
Now, the cool thing about an InDesign
| | 04:12 |
template is, if you select it and double
click on it, you get a brand new untitled document.
| | 04:19 |
And not only did you get the document,
but you got a couple guides that I put on here.
| | 04:24 |
So for instance, there's a guide that's
about six pixels in from the right-hand edge.
| | 04:28 |
That's the area where you always get a
scroll bar.
| | 04:32 |
I have guides at 44 pixels from the top,
and 88 pixels from the bottom.
| | 04:37 |
44 and the 88 pixel margins are where
some of the navigation structures come
| | 04:41 |
in, and this document also has some
layers built into it already.
| | 04:46 |
So, there are a couple things already
built into the template.
| | 04:50 |
Now I simply put my design in, and save
this wherever I need it.
| | 04:54 |
So, there you go.
Those are a couple of different ways I
| | 04:58 |
build brand new documents really quickly
and efficiently.
| | 05:02 |
Play around with these ideas and let me
know how it goes.
| | 05:08 |
| | Collapse this transcript |
| Working with styles and layers| 00:02 |
When I'm working in a DPS workflow, there
are a couple of things that are really
| | 00:05 |
important to me as ways of maintaining a
consistent look and feel and getting
| | 00:09 |
dependable or predictable results.
So, let's talk a little bit about how I
| | 00:15 |
use Styles and Layers.
I'm going to start this process by opening
| | 00:20 |
up by DPS templates file.
And I'm going to double-click on the DPS
| | 00:24 |
iPad h file to open up a brand new
document.
| | 00:28 |
If I pick up the Type tool and I put a
little bit of text in here.
| | 00:32 |
The first thing that I want to mention is
the idea of playing with and testing your
| | 00:37 |
workflows to make sure that your text is
visible at 100% on a device.
| | 00:43 |
Different people are going to understand and
have different experiences with
| | 00:47 |
legibility of this text in different
ways.
| | 00:50 |
And I find that the default 12 pixel
text is much smaller than I'm comfortable with.
| | 00:57 |
You might notice that this is currently
using a paragraph style called, Basic
| | 01:00 |
Paragraph, and there's something special
going on.
| | 01:04 |
So, I would typically want to clean this
up just a little bit.
| | 01:08 |
And the way I would clean this up is,
select all of the text.
| | 01:12 |
I prefer Myriad Pro for my designs, so
I'm going to switch on over to the Regular
| | 01:16 |
Face of Myriad Pro.
And I'm going to change the text size to 16 pixels.
| | 01:23 |
I find this to be much more approachable
in the way of dimension and size.
| | 01:27 |
I'm going to make the leading value about 20
pixels.
| | 01:31 |
Now, this is just what I prefer.
You may very well choose to go with a
| | 01:35 |
serif face for your basic paragraph.
I'm sticking with this one.
| | 01:40 |
Now, I've made some adjustments to this
text and you can see the basic paragraph
| | 01:44 |
style has the plus sign behind it.
I'm going to come on over here and redefine
| | 01:49 |
the style.
So now, any new text frame and new text
| | 01:53 |
content by default will be Myriad Pro 16
on 20 pixels worth of content.
| | 01:59 |
So that's one example of how I use
Styles.
| | 02:03 |
Another example of how I use styles is I
will design a certain style sheet that
| | 02:08 |
includes first paragraphs.
indented paragraphs, subheads, and
| | 02:14 |
headlines, and then I'm going to go ahead
and load those styles.
| | 02:20 |
So if I go to the Fly-out menu for the
Paragraph Style panel and choose to Load
| | 02:24 |
All Text Styles, I now navigate to the
content I want to use as the example.
| | 02:30 |
So I might go to the Digital Publishing
Folder, Articles > Start > Overlays, and
| | 02:35 |
choose one of my overlay files to serve
as the example.
| | 02:41 |
Let's go with the audio overlay.
I'm going to click Open.
| | 02:44 |
I get a list of all the paragraph and
character styles in the source file,
| | 02:49 |
which I can import into this destination
file.
| | 02:53 |
Now I'm going to uncheck the basic paragraph
because I like what I defined, and I'm
| | 02:56 |
going to click Okay.
And now the Paragraph style panel is
| | 03:00 |
populated, and we're going to find that the
character style is also populated.
| | 03:06 |
So this is a way for me to get a
consistent look and feel for my design,
| | 03:10 |
across files, within a publication.
And that publication could be a single
| | 03:16 |
folio or it could be all of the folios
that I build for a particular title.
| | 03:21 |
So my use of Styles is pretty specific,
the other big thing that I talk about and
| | 03:27 |
work a lot on is using my Layers well.
So now that we've brought some styles in,
| | 03:34 |
let's just put a little bit of text on
this page.
| | 03:37 |
I'm going to pick up the Type tool.
I'm going to click and drag and make a
| | 03:40 |
pretty narrow column here.
I'm going to right-click and fill with place
| | 03:44 |
holder text.
Now, to apply those styles, I'm simply
| | 03:48 |
going to click into a paragraph, and then
click Apply a Paragraph Style.
| | 03:53 |
I might go into subsequent paragraphs and
apply a different paragraph style.
| | 03:59 |
And I might go all the way to the top,
and put a new line in there, and type a
| | 04:04 |
title, and then apply the title style.
Now that I've applied this look and feel
| | 04:11 |
to this particular publication that looks
just the same as other files within my
| | 04:15 |
folio or other DPS publications, what I
want to do is talk about how I organize a
| | 04:20 |
file a little bit.
For instance, this text frame is sitting
| | 04:27 |
in a layer called Overlays.
And in my opinion, that's the wrong
| | 04:31 |
place for it to be.
Texts really should be in a layer called Text.
| | 04:35 |
I'm going to drag this down to Layer 1, I'm
going to double-click on Layer 1 and
| | 04:40 |
rename it Text.
So the reason I like naming my layers and
| | 04:46 |
putting things in the correct layer is it
gives me a more predictable design experience.
| | 04:52 |
The other reason is, that Overlays Layer,
which came in as part of a template is
| | 04:57 |
above the Text layer.
And when, I add interactive overlays, the
| | 05:02 |
interactive content of a DPS publication,
I tend to put those overlays in
| | 05:06 |
(UNKNOWN), which is at the very top of a
design.
| | 05:11 |
And that's because Overlays always appear
in front of everything else when you view
| | 05:15 |
the content.
So by arranging my layers, I'm getting
| | 05:20 |
predictable experiences with my design.
So now, I've targeted the Overlays Layer.
| | 05:26 |
I'm going to add a little interactivity.
So I'm going to click and drag, build a frame.
| | 05:31 |
I'm going to open up the Overlay Creator
panel and I'm going to click on Panorama.
| | 05:37 |
Now, I'm going to load up a couple of
assets.
| | 05:39 |
If I go to the desktop and into my
Digital Publishing Folder > Shared links
| | 05:44 |
> Links Overlays, and choose the Panaroma
folder, I'm now going to build an
| | 05:48 |
interactive panorama that sits here on
the page.
| | 05:53 |
So, by organizing and coordinating things
like Styles and Layer usage, I get a
| | 06:00 |
cleaner design.
It's more predictable.
| | 06:04 |
And as a design person who has to share
files, I'm going to be a happier person as well.
| | 06:09 |
Give it a shot.
Give it a whirl.
| | 06:10 |
Have fun.
| | 06:15 |
| | Collapse this transcript |
| Using icons for interactivity| 00:02 |
When you're designing DPS publications,
sometimes it's helpful to give your
| | 00:06 |
readers an idea that there's a quality of
interactivity present on the page.
| | 00:11 |
Let's take a look at how I use libraries
to store these sorts of icons and graphics.
| | 00:17 |
I'm going to open the Digital Publishing
folder.
| | 00:19 |
I'm going to open the video to bring
bonus files folder, and this is where you
| | 00:24 |
find the DPS icons .indd file.
Go ahead and double-click it.
| | 00:31 |
What you see is the library that holds a
couple of icons that I've built to serve
| | 00:35 |
as examples as what I could use to clue
my readers in on the interactivity.
| | 00:41 |
I'm going to go ahead and open a file up.
I'm going to go File > Open.
| | 00:45 |
I'm going to go to the desktop on my
machine, Digital Publishing > Article
| | 00:49 |
Start > DPS Tips, and then I'm going to
select and open TipsLibraries.indd.
| | 00:55 |
So, here's a document that has some
interactivity built into it.
| | 01:01 |
I've built a panorama here on the
left-hand side of the layout.
| | 01:05 |
And if you take a look at the icon set
that I built, I've got a couple of things.
| | 01:09 |
Maybe something to idicate a web link, or
video, an audio file.
| | 01:14 |
And I have something here called
Interactive.
| | 01:16 |
And this is a couple of gears, just a
little artwork in InDesign.
| | 01:21 |
I drag this out of the Library and drop
it onto the Layout.
| | 01:24 |
I've now added that piece of artwork to
the publication.
| | 01:28 |
And what I really like about dragging a
Library item into a Layout, and on top of
| | 01:33 |
an interactive object is that in the
static mode before we've triggered that
| | 01:38 |
overlay this graphic appears in front of
the interactive object.
| | 01:45 |
But as soon as the user clicks on the
object, that overlay pops in front of my
| | 01:50 |
Library icon and I get the full
interactivity.
| | 01:56 |
When I leave the interactivity, it comes
back, and that icon sits in front of the
| | 01:59 |
object to indicate what's going on.
Right now, those gears have a pretty
| | 02:05 |
harsh read edge.
But if I go into Preview mode, you can
| | 02:07 |
see they're just black gears.
So, they may be a little on the subtle
| | 02:11 |
side, but I sort of like that.
So, you can take any artwork that you've
| | 02:16 |
drawn in InDesign, you can even bring a
placed graphic, an Illustrator file, or a
| | 02:20 |
Photoshop file.
And to add it to the Library, you simply
| | 02:25 |
drag and drop the content into your
library.
| | 02:29 |
And I save there.
So, libraries are beautiful for holding
| | 02:33 |
content, giving you consistent
iconography and information for your readers.
| | 02:40 |
Give them a whirl.
The way you build a library, if you
| | 02:42 |
haven't built one before, is go File >
New, and you choose Library.
| | 02:48 |
Then it's simply a matter of giving it a
name.
| | 02:51 |
I'm going to call this DPS.
I'm going to put it on the desktop.
| | 02:54 |
And now, I want these gears to be part of
that.
| | 02:57 |
I'm going to simply select that group and
drag them to the Library.
| | 03:02 |
That's as easy as it is.
So, play with Library, have fun.
| | 03:10 |
| | Collapse this transcript |
| Linking to InCopy stories| 00:02 |
Let's address one of the really
interesting puzzles of DPS workflows.
| | 00:07 |
If we think about a DPS publication and
we've got a folio and an article.
| | 00:12 |
I'm going to go into the Digital Publishing
folder, Articles, Start, DPS Tips.
| | 00:18 |
And in here, I've got a folder called
Share Story.
| | 00:22 |
And what we're looking at is the
horizontal and the vertical versions of
| | 00:26 |
this article.
And I want you to note that in the Share
| | 00:31 |
Story folder, I only have these two
InDesign files.
| | 00:35 |
I'm going to go ahead and open these up.
And now we can see the puzzle.
| | 00:40 |
I've got a vertical file that has some of
my layout, mostly the graphics.
| | 00:45 |
And along with the graphics, I have two
frames, here and here.
| | 00:49 |
I want a story that appears in my
horizontal layout to also appear in the
| | 00:54 |
Vertical Layout.
And by default, InDesign does not create
| | 01:00 |
links for wordy files, that'd be a Word
document, text, RTF or Excel files.
| | 01:07 |
By default, no links for those.
So, how could I have one thing in both of
| | 01:12 |
these files?
Well, what I'm going to do is take advantage
| | 01:17 |
of a sister application of InDesign
called InCopy.
| | 01:21 |
And InCopy has tools that allow me to
generate assignments, and InCopy files,
| | 01:27 |
which by default are linked assets that
hold this type of word-centric, or
| | 01:32 |
editorial content.
So, let's take a look at using an InCopy
| | 01:38 |
workflow to have the same material on
both the vertical and horizontal layouts.
| | 01:43 |
Now, if you haven't ever done this, the
first step is going to be go File > User.
| | 01:48 |
And give yourself a name for this
workflow.
| | 01:51 |
I'm going to be the InDesign designer.
And once you have an ID, you then can
| | 01:56 |
click into a story somewhere.
I've just triple-clicked this line, so
| | 02:02 |
you know where I'm working.
And now I go to Edit > InCopy > Add
| | 02:06 |
Selection to Assignment.
And I'm going to build a new assignment.
| | 02:12 |
Now, an assignment is a collection of
files that's a way for an InCopy user, an
| | 02:17 |
editor, to work with a designer who's
working in InDesign.
| | 02:23 |
I'm going to call this Assignment Shared
Story.
| | 02:28 |
And I'm going to click OK.
Now, what happens when I do this is, I've
| | 02:32 |
gotta save the document.
And now InDesign has just created a set
| | 02:37 |
of external linked files for me to work
with.
| | 02:41 |
If I turn off the Preview, so I can see
the Desktop and all my guides.
| | 02:46 |
And if I go to the View > Extras >
Show/Hide Frame Edges, you're going to see a
| | 02:50 |
little icon in the upper left-hand corner
of each of these frames.
| | 02:55 |
And that tells me this is a linked InCopy
story.
| | 02:58 |
If I go to the links panel, you see the
ICML file here as well.
| | 03:02 |
So, now it's a matter of switching over
to the other file and choosing the
| | 03:07 |
command File > Place.
I navigate to the Desktop on my machine,
| | 03:13 |
Digital Publishing and I'm going to go the
folder where these files live.
| | 03:19 |
So, Articles, Start, DPS Tips, Share
Story.
| | 03:22 |
And right off the bat, I want you note I
have two InDesign files and a brand new
| | 03:27 |
folder called Shared Story Assignment.
Inside of this is a Content folder.
| | 03:34 |
And here's the ICML file that carries
this story.
| | 03:39 |
So, I select it.
Click Open.
| | 03:41 |
And now I click into the threaded frames
and you see the content flow in here.
| | 03:47 |
In the vertical layout, we've got an icon
that tells us this is a shared story.
| | 03:52 |
This is a linked asset.
And if I go to the horizontal layout, I
| | 03:57 |
see the same icon.
Now, if I want to make a change, maybe
| | 04:01 |
change the word drizzle to rain, I can
select the frame that holds the asset and
| | 04:06 |
I'm going to go to Window > Editorial >
Assignments, to open up the assignments panel.
| | 04:14 |
Bring it on over here.
And you can see the Shared Story Design H
| | 04:17 |
is currently active.
And I'm going to check it out by clicking
| | 04:22 |
the icon on the bottom edge.
The icon in the upper left-hand corner
| | 04:26 |
changes to a pencil which tells me that I
can make changes now.
| | 04:31 |
So, now I can double-click and select the
word drizzle let's change this to rain
| | 04:36 |
and let's switch over to the other file.
We're going to see a different icon up here
| | 04:42 |
which indicates that the file is in use
by somebody.
| | 04:46 |
That means I can not make a change to the
text here in this file while it's checked
| | 04:51 |
out some place else.
I'm going to switch back over to the horizontal.
| | 04:56 |
And I'm going to check the file in.
When I do this I cannot undo the change.
| | 05:02 |
But it's checked back in now.
And when I go over to the vertical
| | 05:06 |
layout, we're going to see an icon that
indicates that this linked asset needs to
| | 05:10 |
be updated.
And sure enough, I can see that also in
| | 05:14 |
the Assignments panel and, in the Links
panel.
| | 05:18 |
I'm going to select the Links panel.
And I'm going to click on the ICML file and
| | 05:22 |
I'm going to update the link.
And now we see the change in the text.
| | 05:27 |
This is now a light rain, in both of
these files.
| | 05:31 |
So, that's how I can take advantage of
InDesign's sister application, InCopy.
| | 05:38 |
And use the features built into InDesign
to make a connection between the vertical
| | 05:43 |
and the horizontal layouts for DPS
publication.
| | 05:47 |
Now, it does generate an additional
folder structure that holds these pieces,
| | 05:51 |
but this might very well be worth that.
So, experiment with it and study what
| | 05:59 |
InCopy brings to the DPS workflow.
| | 06:03 |
| | Collapse this transcript |
| Solving odd problems| 00:02 |
If we slow down for a second, and think
about the DPS tools and workflow.
| | 00:07 |
These were first out in beta form in
spring of 2010.
| | 00:11 |
In the subsequent year, they've matured
in some absolutely fascinating
| | 00:15 |
directions, and sometimes, in directions,
we never even dreamed of a year ago.
| | 00:20 |
Now, along that road of development,
occasionally, we have small glitches and hiccups.
| | 00:26 |
So let's take a moment, I'm going to share
with you how I typically approach
| | 00:29 |
problems as I'm working with DPS tools.
Now, one example of an issue I
| | 00:34 |
experienced it when I was setting up for
this course was when I installed InDesign
| | 00:38 |
and opened up the Folio Builder for the
first time I saw the opportunity to
| | 00:42 |
upgrade the Folio Builder which is
exactly the right thing to do.
| | 00:49 |
But once I upgraded it, I was getting
some occasional glitches things wouldn't
| | 00:53 |
work I couldn't preview.
And the solution to this problem is
| | 00:58 |
curiously enough quit InDesign.
And what you need to do is, reset the
| | 01:04 |
defaults for InDesign.
Now, the way I do this on a Windows
| | 01:08 |
machine is I'll hold down the
Ctrl+Alt+Shift keys just after I launched
| | 01:12 |
the application.
On a Mac, I'm going to hold down four keys.
| | 01:18 |
I'm going to hold
Command+Option+Control+Shift.
| | 01:23 |
Again, just after I launch the
application.
| | 01:26 |
So, I'm getting prepared.
My fingers are poised.
| | 01:29 |
I'm going to go ahead and double-click and
push.
| | 01:32 |
And what you now see is the dialog
asking if I want to delete the Prefs file.
| | 01:37 |
I'm going to say, Yes.
And now, InDesign removes all the
| | 01:40 |
information I've set up, maybe about
things like default character and
| | 01:44 |
paragraph styles, my favorite font,
colors that I want in every new document,
| | 01:48 |
and default stroke-and-fill qualities and
colors.
| | 01:53 |
So I get InDesign fresh out of the box
again.
| | 01:57 |
And now, it's a matter of me just turning
on or off a couple of things that make me
| | 02:01 |
happy as an InDesign user.
So I turn off the Welcome screen.
| | 02:06 |
I like working with the Application
Frame.
| | 02:08 |
And I like my Work Space.
And now, I'm ready to go with InDesign.
| | 02:13 |
Of course, one of the things I lose in
that process are my document presets, so
| | 02:17 |
that's why I typically save my document
presets out, so I can reload them later.
| | 02:24 |
Now, on rare occasions, I've found that
I've had problems and for some reason I
| | 02:30 |
had to reset the default twice.
So you might give that a shot if the
| | 02:36 |
first time it doesn't work for you.
So that's all a matter of holding the
| | 02:42 |
right keys down just after you launch the
app.
| | 02:45 |
Another area that might bring problems up
are Folios.
| | 02:50 |
So for instance, I have a problem folio
here.
| | 02:53 |
And if I select problem folio 1 and
preview it, I get a nice dialog that
| | 02:57 |
tells me exactly what's going on.
The pan and zoom contains different
| | 03:03 |
layouts whereas the other folios don't.
And if I take a look at the contents of
| | 03:08 |
that folio, we're going to find out, sure
enough, the ad has both a Landscape and
| | 03:12 |
Portrait layout.
But the pan zoom only has a landscape.
| | 03:19 |
And since, every article in a folio has
to have matching layouts, I would need to
| | 03:23 |
create a vertical or a portrait landscape
for the pan zoom article to make that
| | 03:28 |
work in this folio.
Another example of things that might go
| | 03:34 |
slightly array are things like when you
work with a web article.
| | 03:39 |
So, if I come on down here take a look at
the web article.
| | 03:41 |
I can't go in and see layouts, because
there are no layouts.
| | 03:45 |
There are no InDesign files for an HTML
based article and that means I can't
| | 03:50 |
select it and preview it.
And yet, I can click the Preview button.
| | 03:56 |
But this is a very important piece of
feedback here and it tells me that
| | 04:00 |
certain types of layouts, including HTML,
PDF compressed layouts, and what used to
| | 04:06 |
be called flattened stacks, but are now
called horizontal swipe only stacks are
| | 04:10 |
only supported in iOS viewers.
So, sometimes, there's a restriction in
| | 04:18 |
the Desktop Viewer or other device
viewers and that may be frustrating, and
| | 04:23 |
sometimes, it's just a limitation to the
workflow today.
| | 04:29 |
So those are some of the issues and
solutions that I occasionally face.
| | 04:33 |
Some of them are funny glitches that are
probably happening because this is a new
| | 04:37 |
set of tools, some of them are my own
fault.
| | 04:41 |
So, be patient.
Sometimes slowing down and thinking about
| | 04:46 |
what you've got built, and how it stacks
up against the requirements, is going to
| | 04:51 |
make for a much saner, and happier DPS
experience
| | 04:57 |
| | Collapse this transcript |
|
|
3. Building Design FoliosIntroduction to Folio Builder| 00:00 |
The DPS workflow has a couple of new
panels.
| | 00:04 |
Let's take a look at Window > Extensions
> Folio Builder and get an introduction
| | 00:10 |
to this new panel.
Now, the Folio Builder panel you see
| | 00:14 |
here, it's showing me that I have not
signed in.
| | 00:18 |
If you've just installed InDesign CS5.5,
or you've just installed the tools for
| | 00:23 |
DPS with InDesign CS5, you're going to see a
different Folio Builder panel.
| | 00:30 |
That panel is going to offer or suggest that
you update tools.
| | 00:34 |
Go ahead and do that update so that you
get the current working tools for this workflow.
| | 00:40 |
Now, once you've done the update, you
need to sign in, so let's go ahead.
| | 00:45 |
Sign in with an Adobe ID.
It's good to know that an Adobe ID is a
| | 00:58 |
free piece of information you can get
from Adobe that gives you access to a
| | 01:02 |
number of tools and services that Adobe
is offering.
| | 01:07 |
Now, the Folio Builder panel is showing
that I have two Design Folios and we're
| | 01:11 |
going to talk about what this panel does and
how you move around inside of the panel.
| | 01:18 |
Now, starting in the upper left-hand
corner, I'm currently looking at all
| | 01:22 |
folios and this is a Filter System.
So, I can choose to only look at Shared
| | 01:27 |
Folios and now, we see the Web Content
Folio that has the icon on the right of,
| | 01:31 |
a couple people.
This is shared with somebody.
| | 01:36 |
I'm going to come on back, if I take a
look at Private Folios, these are folios
| | 01:40 |
that have not been shared with anybody.
So, this is the Design Folio that only I
| | 01:46 |
have access to.
If I take a look at the Active Folio,
| | 01:50 |
there's not going to be any change here, and
that's because the green band in the
| | 01:54 |
upper left-hand corner indicates an
active folio.
| | 01:59 |
This banner can only be added by people
who have a DPS subscription and this is
| | 02:03 |
added in a different piece of software
through a website.
| | 02:08 |
If I come on back and say, show me all
folios, there we go, they're all visible.
| | 02:14 |
I can also change the sort any one of
these three options and reverse the list.
| | 02:19 |
The icon in the upper right-hand corner
looks like a target, tells me I'm
| | 02:22 |
currently signed in.
That's why I can see the Design Folios
| | 02:26 |
that are active for me.
In the upper right-hand corner, there's a
| | 02:30 |
Flyout menu.
This menu is going to change depending
| | 02:34 |
upon what is selected.
For instance, right now, no folios are
| | 02:38 |
selected but if I were to select the
Folio Builder Intro, now we see a new set
| | 02:42 |
of commands which would allow me to
Rename, Delete, Share, or change the
| | 02:46 |
properties of it.
In the bottom right-hand corner, there's
| | 02:53 |
a Delete icon.
There's a new icon for building New
| | 02:56 |
Design Folios, and there's a Preview
button.
| | 03:00 |
The Preview button is going to do
different things depending upon what's
| | 03:04 |
selected inside of the Folio Builder
panel.
| | 03:07 |
So, we're going to talk about previewing a
little bit later, and see how that
| | 03:11 |
affects you.
Now, it's probably important to note at
| | 03:15 |
this point that if you have a free Adobe
ID, you can have one folio.
| | 03:20 |
If you have a Acrobat.com Pro account,
you can have multiple folios in the Folio Builder.
| | 03:30 |
And if you subscribe to the DPS System,
you also can have multiple folios and
| | 03:35 |
access to additional controls through a
website.
| | 03:40 |
One of those controls is the green banner
showing an active design folio.
| | 03:43 |
So, the way I'd navigate and move into a
folio is, first off, I can hover and see
| | 03:48 |
a little bit of information about the
folio.
| | 03:54 |
If I come down to the folio that's
shared, it tells me it's shared currently
| | 03:58 |
with one user.
And if I want to move into a folio, I click
| | 04:02 |
the arrow at the right-hand end of the
Design Folio.
| | 04:06 |
Now, we can see there are three articles
and we're in at the Article level now.
| | 04:10 |
If I go into the Cover Article, this is
where I can see the Landscape and
| | 04:13 |
Portrait Layouts.
Of course, it's important to see that
| | 04:18 |
since I have both Landscape and Portrait
Layouts in this article, that means I
| | 04:23 |
must have both layouts for all articles
in this folio.
| | 04:29 |
If I want to open up the Landscape Layout,
I can double-click and open this up.
| | 04:34 |
So, this is a nice way of getting to
exactly the In Design file that's used in
| | 04:38 |
this article, in this Design Folio.
Now, I'm going to go ahead and close that
| | 04:43 |
document and to move back to the Articles
level, I'm going to come up to the top of
| | 04:48 |
the Folio Builder panel, and I'm going to
click on the Folio Builder Intro label.
| | 04:55 |
Now again, I can see the articles that
are inside of this.
| | 05:00 |
If I want to go and look at the University
aAd, I click the triangle.
| | 05:03 |
I see the two layouts.
If I want to go all the way up to the top
| | 05:07 |
and see all of my design folios, I click
the arrow at the top and the left-hand
| | 05:11 |
edge, and now I can see them.
So, there you go, this is how I navigate
| | 05:17 |
through and work with the Folio Builder
panel.
| | 05:20 |
We're going to take deeper looks at what you
can do in each of these modes in the next videos.
| | 05:28 |
| | Collapse this transcript |
| Creating a new design folio| 00:02 |
Okay, so let's start building a folio.
We're going to do this by going to the
| | 00:07 |
Window menu, choose Extensions, and open
the Folio Builder panel.
| | 00:11 |
You can see I've already logged into the
Folio Builder service using my Adobe ID,
| | 00:15 |
and we're going to build a new folio by
coming down to the bottom and click New.
| | 00:21 |
It's really really simple here.
Now, what we're going to be doing is
| | 00:24 |
building a folio that includes a number
of articles.
| | 00:29 |
So, we're going to give this folio a
name.
| | 00:30 |
The name that we see here is part of
production information.
| | 00:36 |
It's what we see in the Folio Builder
panel, but it's not the name of the folio
| | 00:41 |
when we see it in the Viewer.
So, this is your Production Control name,
| | 00:47 |
and what we're going to do is build
something for this local magazine, it's
| | 00:51 |
the Spring Edition.
So, I'm going to call this one Local Spring.
| | 00:57 |
You choose a dimension.
Now, my publications have been designed
| | 01:02 |
for an iPad so the dimensions are going
to be 1024 by 768.
| | 01:08 |
And it's important to choose a dimension
which is going to match the documents and
| | 01:12 |
the aspect ratio of the documents that
you're going to be putting in here.
| | 01:17 |
This 4 by 3 aspect ratio of 1024 by 768
is great for an iPad.
| | 01:23 |
1024 by 600 would be appropriate for some
of the Android Galaxy Tabs and some of
| | 01:27 |
the smaller displays.
You'd probably want a larger document to
| | 01:32 |
mention if you were designing
specifically for a zoom or another large
| | 01:36 |
display tablet.
If we move down to the default image
| | 01:41 |
format, this is the default setting for
how the graphics of how your layouts are
| | 01:46 |
converted, and basically flattened in the
DPS process.
| | 01:52 |
I'm going to be fine with automatic.
The default image format choice has to do
| | 01:57 |
with how your designs are compressed and
converted into graphics, which is what
| | 02:02 |
the DPS process does.
So, I find automatic does a pretty good
| | 02:08 |
job for me, and it's a nice place to
start when I'm talking about controls for
| | 02:12 |
the entire folio.
Certain articles might be better suited
| | 02:17 |
to a particular type of image
compression, and you can choose those on
| | 02:21 |
an article by article basis.
So, I'm going to go with automatic, and
| | 02:27 |
I'm going to work with a high quality
jpeg for this.
| | 02:31 |
We're setting default qualities, we're
setting the dimensions of the folio and
| | 02:35 |
the aspect ratio is important in that as
well.
| | 02:39 |
I now click OK.
And this new folio shows up in the Folio
| | 02:43 |
Builder panel and it takes me immediately
to the Articles Level.
| | 02:48 |
So, once you build the new folio, you
immediately are brought to the Articles
| | 02:52 |
Level of that folio.
And you'd be ready to start importing
| | 02:56 |
content or building new articles.
But let's go back up a level.
| | 03:01 |
Let's go back up to the folio.
And let's talk a little bit about some of
| | 03:06 |
the metadata that you should also add
here by selecting the Local Spring folio.
| | 03:12 |
And then, going to the Flyout menu, this
is where I can choose Properties, and
| | 03:16 |
this is where I start adding the
metadata.
| | 03:20 |
Which is visible inside the content
viewer.
| | 03:22 |
So, this is where the publication name,
that I see as a reader, shows up.
| | 03:28 |
So, this could be Spring 2012 Local.
The publication could be re-dimensioned
| | 03:38 |
if I wanted to.
We're not going to change that cuz 1024
| | 03:41 |
by 768 is what I've designed for.
But the cover previews are really
| | 03:46 |
important here.
And what I'm going to do is load some
| | 03:49 |
images that we've already built to serve
as covers.
| | 03:53 |
So, if I go to the desktop on my machine,
into Digital Publishing, I have a folder
| | 03:58 |
called Folio Covers.
And inside of this, I have a bunch of
| | 04:02 |
JPEGs, which will serve as these cover
images that are visible inside the
| | 04:06 |
Content Viewers Library.
So, the first one, the one on the left is
| | 04:12 |
the Vertical file.
So, I'm going to select the CVR,
| | 04:16 |
spring_vjpg and load it in here.
For the horizontal one, click the Load
| | 04:22 |
icon, and I'm going to choose the
Horizontal version.
| | 04:26 |
You might have noticed that I clicked the
Load icon even while the vertical one was
| | 04:30 |
still loading.
And I found that this system is very
| | 04:34 |
forgiving in that sense.
So, I click OK, I've now added the
| | 04:37 |
metadata for this design folio.
And I'm ready to start adding articles.
| | 04:40 |
So, there you go.
The first step in building a design folio.
| | 04:51 |
| | Collapse this transcript |
| Adding articles from layouts| 00:02 |
Let's talk about adding articles to a
Design Folio.
| | 00:06 |
I'm going to open the Digital Publishing
folder > Articles > Start > Cover >
| | 00:09 |
Spring, and I'm going to select both the
horizontal and vertical files in here and
| | 00:13 |
Open them up.
So, I'm looking at what I want to serve
| | 00:19 |
as an article.
Here's the Vertical Layout, and here's
| | 00:23 |
the Horizontal Layout.
And I want to add these to a Design Folio.
| | 00:27 |
If I go to the Folio Builder panel, you
can see I have a folio called Local Spring.
| | 00:33 |
And if I press the Right arrow, you can
see at the Articles level, I have no
| | 00:37 |
articles yet.
Adding an article can be really, really easy.
| | 00:42 |
Simply come down to the bottom of the
Folio Builder panel, click New, and now
| | 00:45 |
in the dialog, you're going to add an
article name.
| | 00:49 |
The article name has to do with what I
see internal to the system.
| | 00:55 |
The article name is what I use when I use
a Nav2 link to move to a different
| | 00:59 |
article inside of a folio.
So, this is much more of an internal
| | 01:05 |
name, it's not exposed to the reader,
it's not visible inside of the viewer.
| | 01:11 |
So, I'm going to call this Cover.
I'm going to work with the settings I set
| | 01:15 |
for the Image Format > Automatic, and the
JPEG quality, High.
| | 01:19 |
I click OK.
And now, the active document is being
| | 01:23 |
loaded to the DPS system and Preview is
being built for me.
| | 01:28 |
Once the upload is done, the Upload icons
fade out, and now I can go into the
| | 01:32 |
article called Cover, I'm going to press the
Right arrow here.
| | 01:38 |
And I can see that the Landscape Layout,
the current visible active document has
| | 01:42 |
been loaded and it's been recognized as
being a Landscape orientation.
| | 01:47 |
Now, if I want to add the Vertical
orientation, the Portrait orientation, I
| | 01:52 |
simply make this document active and go
back to the Folio Builder panel, click
| | 01:58 |
New, and the active document once again
is uploaded and constructed as an article.
| | 02:06 |
So now, I see both types of orientations,
Portrait and Landscape here.
| | 02:11 |
And I'm going to go ahead and close the
files that are currently open.
| | 02:15 |
I can still see the Folio Builder.
I'm down inside of the article called
| | 02:21 |
Cover and if I wanted to open one of
these files up, it's as simple as select
| | 02:25 |
it and then, double-click and the Folio
Builder panel opens that document.
| | 02:33 |
Now, this is really pretty cool because
the Folio builder is aware of where these
| | 02:38 |
files are, but the challenge is, the
Folio Builder is very fussy currently.
| | 02:45 |
And if I were to move the location of
this file, the Folio Builder would lose
| | 02:49 |
track of it.
So, it's very important that when you add
| | 02:54 |
an article, the files don't move after
that point.
| | 02:58 |
If you move them, you will have to delete
the article, and readd the contents to
| | 03:03 |
that article.
So, navigation, super easy.
| | 03:08 |
Adding the content, really easy as well.
There's one more thing we ought to do
| | 03:12 |
with this article, and that's add
metadata to it.
| | 03:15 |
So, I'm going to come and select the
Cover article, use the Flyout menu in the
| | 03:19 |
Folio Builder panel and choose
Properties.
| | 03:23 |
What's important about the Properties is
this is what your viewer is going to show
| | 03:27 |
to your reader.
So, the title and the description, the
| | 03:31 |
biline, and the kicker are all qualities
of metadata that the user experiences.
| | 03:37 |
So, the title to this cover, this
article, might be very well be Welcome to Spring.
| | 03:48 |
The description, LOCAL magazine Spring
Edition.
| | 03:53 |
You can see a Table of Contents Preview
has been automatically generated based
| | 04:01 |
upon this image.
This is what I'm going to see in the TOC
| | 04:06 |
pull down inside of the viewer.
If you want to change this, you can build
| | 04:12 |
approximately a 70x70 pixel image and
upload it using the icon here.
| | 04:19 |
Now, depending upon the type of file you
are building and type of file you are
| | 04:23 |
using, you might choose to change how the
page represents.
| | 04:27 |
You can have a Smooth Scrolling page when
you have a Single Page Layout.
| | 04:33 |
Horizontal Swipe Only would convert a
series of pages in this InDesign file
| | 04:38 |
from a vertical swiping motion to go
through the article into a horizontal
| | 04:42 |
experience instead.
So, that's a matter of opinion and
| | 04:47 |
personal preference in how readers
consume your content.
| | 04:51 |
The biline is the author who built this.
We're going to say LOCAL Staff and the
| | 04:57 |
kicker tends to be either the
departmental logo or phrase.
| | 05:03 |
It might be the introduction to the title
so we might say, wow, and throw an
| | 05:08 |
exclamation point on there.
That way, we'll get Wow, Welcome to
| | 05:14 |
Spring, when certain sets of the metadata
are presented.
| | 05:19 |
Now, this is a cover.
It's not an advertisement, so I'm not
| | 05:23 |
going to check Add.
So, I've just completed adding metadata
| | 05:27 |
to this article.
The metadata is going to be very
| | 05:31 |
important for your readers when they look
at your content in your viewer.
| | 05:36 |
So there you go, that's how you add
active InDesign files to an article.
| | 05:41 |
You might also consider taking a look at
how you can add a folder of layouts as well.
| | 05:51 |
| | Collapse this transcript |
| Importing one article from a folder| 00:00 |
Okay, let's take a look at importing
articles into a Design Folio.
| | 00:07 |
The reason you might consider importing
an article is, it turns into a faster
| | 00:11 |
operation as opposed to adding individual
layouts one at a time, based upon opening
| | 00:15 |
the InDesign documents.
We're going to start by looking inside
| | 00:22 |
the Digital Publishing folder > Article
Start, and let's take a look at some
| | 00:25 |
folder structure.
I'm going to open the University Ad folder here.
| | 00:31 |
That folder here is an Article folder.
I think about this because the two files
| | 00:36 |
that are inside of this folder are the
Horizontal and Vertical orientations or
| | 00:41 |
layouts of what I had intend to be a
single article.
| | 00:47 |
What's important is, I only have two
InDesign files in this folder.
| | 00:51 |
I could have other things like a Links
folder, I could have a PNG, which would
| | 00:55 |
serve as the TOC or another graphic in a
JPEG format that would serve as the Table
| | 00:59 |
of Contents image.
But the most important thing is that I
| | 01:05 |
have only two InDesign files, one needs
to end with an -h for horizontal, the
| | 01:10 |
other, _v.
So, I'm using both orientations because
| | 01:15 |
the folio that I'm building has both
layouts.
| | 01:20 |
So, I've built this folder.
We have this folder structure, and if I
| | 01:25 |
go over to InDesign and we take a look at
the Local Spring Design Folio that I'm
| | 01:29 |
building, let's go down into the article
level.
| | 01:34 |
I could add an article by adding active
InDesign documents, but that's one layout
| | 01:39 |
at a time.
If I use the Flyout menu here at the
| | 01:43 |
Article level, I can now Import a Single
Article.
| | 01:47 |
I have to define an Article Name, this is
an internal folio name used for
| | 01:52 |
navigation in NAV2 links.
So, I can call this University Ad.
| | 01:58 |
We're going to use the Image Format and
Quality Settings based upon the folio.
| | 02:04 |
And now, I tell Folio Builder where that
folder is.
| | 02:09 |
So, I'm going to go to the Digital
Publishing folder > Articles Start, and
| | 02:13 |
I'm going to point to the folder that holds
the Horizontal and Vertical Layouts.
| | 02:18 |
I click Open and OK and the Folio Builder
now goes and grabs those pieces of
| | 02:24 |
content, uploads them, generates the
article and then, once it's all done,
| | 02:30 |
I'll be able to see the two layouts.
So now, I can click the right facing
| | 02:38 |
arrow and I can see the Landscape and
Portrait layouts.
| | 02:42 |
If I select and then double-click one of
these layouts, I'll see the file, which
| | 02:46 |
is used to build the article.
So this is a really cool thing about
| | 02:51 |
having an Articles layout, know where it
came from.
| | 02:56 |
But it's also really important that once
you've added an InDesign file as a layout
| | 03:01 |
in an article, don't move the InDesign
files because the Folio Builder doesn't
| | 03:06 |
handle that.
And you'd have to delete the article and
| | 03:11 |
recreate the Articles and Layouts.
So, that's one way of adding a single
| | 03:18 |
folder's worth of content as the layouts
for an article.
| | 03:24 |
| | Collapse this transcript |
| Importing multiple articles| 00:02 |
So, we've seen a couple of ways of adding
articles to a folio.
| | 00:06 |
But each of those processes are either
one file at a time or a single article at
| | 00:10 |
a time.
Let's take a look at adding multiple
| | 00:14 |
articles simultaneously.
We're going to go into the Digital
| | 00:18 |
Publishing folder, Articles > Start.
And inside of the Multiple Import folder,
| | 00:23 |
which I'm just going to roll open here,
you see two folders.
| | 00:27 |
Each of these folder, Cover Park and
University Ad, are what I would call an
| | 00:31 |
Article folder.
The Multiple Import folder is the parent
| | 00:35 |
folder for each of these article folders.
In each of the article folders, you're
| | 00:41 |
going to see the file structure that I've
described in the past, with only two
| | 00:46 |
InDesign files with the _h and _v
suffixes.
| | 00:50 |
And I've also added some custom TOC
images here, so it's the single image
| | 00:54 |
inside the each of these folders.
The entire process of doing a multiple
| | 01:00 |
article import is based upon folder
structure and file naming.
| | 01:05 |
So, this is how it works.
Let's switch back over to InDesin now,
| | 01:09 |
and into the Folio Builder panel, and
we'll make a new folio for this one.
| | 01:15 |
That's going to be a 1024 by 768 document
because that's the dimensions of all of
| | 01:21 |
my articles, and now the articles level
inside of this folio.
| | 01:29 |
We'll use the Flyout menu, and we choose
Import.
| | 01:32 |
Now, instead of doing a single article
and naming the article, we'll import
| | 01:36 |
multiple articles.
And now, we only get to choose a location
| | 01:40 |
for this.
I select the folder, Multiple Import,
| | 01:44 |
which holds all of the article folders.
And I click Open, then OK, then I sit back.
| | 01:51 |
And the Folio Builder now works through
that parent folder, the multiple import
| | 01:56 |
folder, in this case.
It looks at the contents of each one of
| | 02:00 |
those article folders, looks for the H
and the V, brings them in as the portrait
| | 02:04 |
and landscape layouts.
And because there's a TOC image in
| | 02:09 |
there, it adds those.
So, if I now take a look at the metadata
| | 02:13 |
for the cover, we're going to see the
custom image that I had loaded in here
| | 02:17 |
rather than a generic one.
But you notice that other metadata
| | 02:22 |
qualities are not added automatically.
We'll still need to add these later on.
| | 02:27 |
So, we've now added four layouts in a
very efficient way.
| | 02:33 |
And that's how you import multiple
articles into a folio.
| | 02:39 |
| | Collapse this transcript |
| Smooth-scrolling layouts| 00:02 |
In a typical DPS layout, you're going to
build your documents to match the
| | 00:06 |
dimensions of the device.
But when you work with multiple pages in
| | 00:11 |
this situation, you get a page quality.
You get a snap to each one of those pages
| | 00:16 |
as your readers go through the article.
We're going to take a look at a slightly
| | 00:21 |
different approach to that, something
called a smooth scrolling article.
| | 00:26 |
So, I'm going to go into the Digital
Publishing Folder > Articles Start >
| | 00:30 |
Pages > Smooth Scroll.
And I want you to notice that I have two
| | 00:35 |
InDesign files here with the file suffix
_h and _v.
| | 00:41 |
That's the horizontal and the vertical.
Those are the layouts that are part of
| | 00:45 |
this article and they're all sitting in a
parent folder, this is the Article folder.
| | 00:50 |
And that's going to be important in a few
minutes.
| | 00:53 |
Now, I'm going to open both, the H and V
layouts, and let's take a look at these.
| | 00:59 |
And what you're going to notice right off
the bat is, these documents were not
| | 01:03 |
built at your standard 1024x768
dimension, which is what I typically use
| | 01:07 |
when I design for an iPad and DPS.
Instead, these two files have been built
| | 01:14 |
so that the width of the file matches one
of the dimensions of the iPad.
| | 01:19 |
If we take a look at my _h or the
horizontal document, and we take a look
| | 01:24 |
at the Document Setup, we're going to see
the width matches the width of the iPad
| | 01:29 |
when it's held horizontally.
The height can be just about anything you want.
| | 01:37 |
Of course, if you make it really huge,
your files are going to be really huge, too.
| | 01:41 |
So work within a little bit of control
here.
| | 01:45 |
Now, this is the Horizontal Layout and
when I say horizontal, I'm talking about
| | 01:50 |
the orientation of the device when I read
it.
| | 01:56 |
Let's take a look at the other document.
If we look at the vertical document and
| | 02:00 |
look at Document Setup, we're going to
notice the width matches the width of the
| | 02:05 |
iPad when it's held vertically.
And then, the height can be whatever I want.
| | 02:12 |
The designs for these two layouts might
be similar, they might be very different.
| | 02:17 |
They could be completely different if you
really wanted.
| | 02:20 |
And the cool thing about a Smooth Scroll
experience is it's a different way of
| | 02:25 |
telling a story that you find in a
article.
| | 02:29 |
It's a continuous experience as supposed
to a snapped page type of experience.
| | 02:36 |
So, let's go ahead and build the folio.
I can go to the Folio Builder panel.
| | 02:43 |
I'm going to build a New Folio, I'm going to
call this one, Smooth Scroll.
| | 02:49 |
The size of this folio is going to be
1024x768, that's the dimensions of the
| | 02:53 |
device that I'm targeting.
I'm going to go with the Default Options for
| | 02:59 |
the others.
And now, it's important to know that in
| | 03:02 |
the articles level, if I attempted to add
this current active document as an
| | 03:07 |
article, the Folio Builder wouldn't let
me.
| | 03:12 |
And that's because the aspect ratio of
this file does not match the 4x3 aspect
| | 03:17 |
ratio of an iPad.
And that's the basis of this folio.
| | 03:21 |
So, the way you bring Smooth Scrolling
content in is by importing.
| | 03:25 |
So, I'm going to go ahead and close both of
these files, so it's really clean and
| | 03:31 |
clear that we're now going to go and
import an article.
| | 03:38 |
Let's call this one, Smooth Scroll.
And we're bringing in a single article.
| | 03:46 |
Let's talk about the location.
And now, I go to the Desktop on my
| | 03:50 |
machine, Digital Publishing > Article
Start > Pages, and I select that Smooth
| | 03:55 |
Scroll article folder.
We can see the underscore h and v in the side.
| | 04:01 |
Those suffixes are critical for the
import.
| | 04:05 |
That way, the Folio Builder knows which
file to use for which orientation.
| | 04:11 |
I click Open and OK.
And now, the contents of those two files
| | 04:16 |
is being uploaded into the DPS system.
The folio is being built, the articles
| | 04:22 |
are being built, and because of the
dimension matching, one of the dimensions
| | 04:27 |
of the folio and the underscore h and
v's, we're going to get the right layout
| | 04:32 |
when the device is oriented one
particular way.
| | 04:39 |
Now, I'm going to go ahead and click the
Preview button here and we're going to take
| | 04:43 |
a look at this in the Desktop Content
Viewer.
| | 04:46 |
In the Content Viewer, we're going to see
a different experience within the page.
| | 04:51 |
Instead of snapping and jumping to a
page, we get this nice Smooth Scrolling experience.
| | 04:58 |
I'm going to scroll all the way back up to
the top and now when I press R on the
| | 05:03 |
keyboard, I see the other orientation.
And again, I've got this nice smooth
| | 05:09 |
experience as I move down through the
content and read the article.
| | 05:16 |
So, that's what Smooth Scrolling does for
you and that's how you build the
| | 05:20 |
documents and import them, add them to a
folio.
| | 05:24 |
It's also important to know that if I
come back to the Folio Builder and select
| | 05:28 |
that Smooth Scroll article, I can go take
a look at the properties for it.
| | 05:34 |
Of course, this is where I could add the
title but a thing I want you to notice
| | 05:37 |
is, there's a Smooth Scrolling option
here.
| | 05:41 |
And the Folio Builder was smart enough to
realize that because the dimensions of
| | 05:45 |
the horizontal and verticals had one
dimension that matched the qualities of
| | 05:50 |
the iPad that I was designing for, it's
decided to Smooth Scroll in both dimensions.
| | 05:58 |
But you could design it so that you only
get smooth scrolling when the device is
| | 06:02 |
held horizontally or only vertically.
And it's important to note that the
| | 06:09 |
directions referred to in this Drop Down
menu are the orientation of the device,
| | 06:14 |
not the document.
So, if you were to choose horizontal
| | 06:19 |
only, that would only give you smooth
scrolling when a device was being held horizontally.
| | 06:26 |
So, there you go.
That's how you can work with a different
| | 06:30 |
type of page construction.
Instead of multiple pages that snap, you
| | 06:35 |
use a single page that's long, and you
tell the story in a different way using
| | 06:40 |
Smooth Scrolling systems.
Give it a whirl, it's really sort of fun
| | 06:47 |
to work with and the key is the naming
structure and using the Import feature in
| | 06:52 |
the Folio Builder.
| | 06:56 |
| | Collapse this transcript |
| Horizontal swipe layouts| 00:02 |
Let's take a look at how readers can move
through an article.
| | 00:06 |
To do this, we're going to look at a
couple of InDesign files and then make
| | 00:10 |
some choices.
I'm going to open up the Digital
| | 00:14 |
Publishing folder, Articles Start > Pages
> Swipe.
| | 00:19 |
And I'm going to select and open both of
these InDesign files.
| | 00:24 |
And let's start by just taking a look at
these files.
| | 00:28 |
If I take a look at Pages Swipe Normal,
that's the file that says standard
| | 00:32 |
navigation has the blue arrow.
If I zoom out, we see that I have a
| | 00:37 |
series of pages here, good old standard
InDesign file.
| | 00:42 |
And I've just planed designed the way I
like it.
| | 00:45 |
Now, if I take a look at the other file,
we're going to see the arts a little bit different.
| | 00:51 |
There's this big long horizontal arrow.
And if I zoom out, lo and behold, I have
| | 00:56 |
exactly the same approach to how I've
laid out this document.
| | 01:01 |
I'm using the single page quality of
InDesign instead of spreads, and I've got
| | 01:06 |
six pages in both of these publications.
Now, let's shift over to Pages Swipe Normal.
| | 01:15 |
I'm going to go to to the Folio Builder
panel, and we're going to see that I've
| | 01:18 |
built a folio.
It only has a preview image built into
| | 01:22 |
it, and if we go into the Article level,
we're going to see there are no articles yet.
| | 01:28 |
So, let's take this active file, Pages
Swipe Normal.
| | 01:33 |
And let's add this as a new article.
Let's call this Swipe Normal, and click OK.
| | 01:41 |
And now, the active document is brought
in as an article.
| | 01:44 |
Now, in this particular folio, we're only
going to work with single orientation files.
| | 01:51 |
So, there's no _h and there's no _v.
We've now loaded Swipe Normal.
| | 01:58 |
And if we take a look at the metadata, so
I go to the Flyout menu and choose Properties.
| | 02:02 |
Let's give this a name.
I'm going to put Swipe Normal in there,
| | 02:07 |
and I'm not going to change anything else
going on in this particular article.
| | 02:14 |
Now let's switch over to the other
design.
| | 02:17 |
In the Folio Builder panel, I'm going to
come to the bottom, select New, and I'm
| | 02:22 |
going to change this name to Swipe
Horizontal.
| | 02:27 |
We're going to go ahead and click OK, and
this page is brought in.
| | 02:32 |
Both of these files were built at 1024 by
768, and they both match the dimensions
| | 02:38 |
of the folio.
Now, we're going to take a look at the
| | 02:42 |
properties for the Swipe Horizontal
article.
| | 02:46 |
So, we go to the Flyout menu, and choose
Properties.
| | 02:50 |
Let's put the name in here, (UNKNOWN)
And the thing that we're going to change
| | 02:56 |
is, we're going to check Horizontal Swipe
only.
| | 03:01 |
And what this option does is it takes
those six pages, which we see in the
| | 03:05 |
background, vertically set in InDesign.
And instead of moving down, instead of
| | 03:12 |
pulling the page up, in the Viewer, we're
going to swipe our fingers sideways to go
| | 03:18 |
to the next page.
So, this changing how an article is
| | 03:24 |
presented, and how a reader interacts
with the article inside of the viewer.
| | 03:31 |
So, with that one change, Horizontal
Swipe only, I now click OK.
| | 03:37 |
Now, it's time to preview our work.
The challenge is that, the Desktop
| | 03:41 |
Previewer doesn't show a Horizontal Swipe
navigation system So we need to shift
| | 03:45 |
over to a device.
And let's go ahead and pickup.
| | 03:50 |
I'm going to go with iPad now, and I've
loaded the same folio onto it.
| | 03:55 |
And when we open it up, we now can see,
here's the normal layout.
| | 04:00 |
And as I swipe down through these blue
arrows, we see each of the pages.
| | 04:05 |
So, that's the normal navigation for an
article.
| | 04:08 |
Let's go sideways.
Let's go to the second article.
| | 04:12 |
And now we see our horizontal system.
And now if I try to go down, nothing happens.
| | 04:18 |
But if I swipe to the left, I can now
pull those pages through and see the
| | 04:23 |
progression through this second article
that uses a Horizontal Swipe navigation system.
| | 04:32 |
So, why would you chose to do this?
It may be how you prefer to tell your
| | 04:36 |
story, how you want your readers to
interact with your content.
| | 04:40 |
The nifty thing is, I keep using InDesign
the same way I normally do.
| | 04:44 |
But this is an option at an Article level
for how navigation works.
| | 04:51 |
Give it a whirl.
It's a fascinating thing to mess with.
| | 04:57 |
| | Collapse this transcript |
| Loading HTML articles| 00:02 |
An HTML article is a special type of
layout and content in a DPS workflow.
| | 00:09 |
Now, let's take a look at this type of
article, and how you work with it.
| | 00:15 |
In the Digital Publishing folder,
articles start.
| | 00:18 |
You're going to find a folder called HTML
Neighborhood Guide.
| | 00:23 |
If you open this folder up, you're going
to find a folder full of images and an
| | 00:27 |
HTML file and a style about CSS, the
cascading style sheet for this.
| | 00:34 |
If you open the HTML file, you see the
content of this.
| | 00:37 |
There are links in here to navigate up or
down.
| | 00:40 |
You can scroll through the content, see
the layout, and this is what's going to
| | 00:46 |
go into the layout for an article.
So, rather than converting this to an
| | 00:53 |
InDesign document, importing it, doing
the layout, we're going to take advantage
| | 00:58 |
of a feature of the folio system which
will present this HTML dynamically.
| | 01:04 |
When you're writing the HTML, use content
and use coding that works with Webkit.
| | 01:12 |
And you're probably going to want to
restrict yourself to the type of web
| | 01:16 |
commands that work well on an iPad or a
tablet device.
| | 01:20 |
So that means no Swift content, and
occasionally being a little conservative
| | 01:25 |
in your design.
Now this folder, the HTML Neighborhood
| | 01:30 |
Guide folder, is what we're going to load
into a folio as an article.
| | 01:37 |
So, I'm going to shift over to InDesign.
And we'll go into the Folio Builder panel
| | 01:43 |
and build a folio to hold this HTML
article.
| | 01:47 |
So, let's give it a name.
I'm going to call it Web Article.
| | 01:51 |
And because an HTML article doesn't have
a dimension, the dimensions of this folio
| | 01:57 |
are not particularly critical.
So, I'm just going to work with these
| | 02:03 |
defaults as I'm designing for the iPad.
I'm going to click OK.
| | 02:08 |
And now, I'm at the Articles level.
Now I'm going to be a little neat here,
| | 02:12 |
and let's give this a publication name.
This is going to be my HTML article and
| | 02:16 |
I'm going to load some previews.
So, I'm going to the desktop of my
| | 02:23 |
machine, Digital Publishing > Folio
Covers, and then I'm going to load the
| | 02:28 |
CoverHtmlArticle_v for the vertical, and
h for the horizontal.
| | 02:35 |
Once those two covers previews are
loaded, I'm going to click OK.
| | 02:40 |
And now, we're going to go down into the
Article level and we're going to import
| | 02:44 |
that HTML folder.
So, the article name will be HTML
| | 02:49 |
Article, and we're going to point to the
folder that contains it.
| | 02:57 |
That's the Desktop > Digital Publishing >
Articles Start.
| | 03:01 |
And I'm going to select the HTML
Neighborhood Guide folder.
| | 03:06 |
I click Open and OK.
And while the Folio Builder is working, I
| | 03:11 |
probably need to be patient and let it do
its work.
| | 03:16 |
Build the preview as it needs, and it's
done now.
| | 03:19 |
So, now you might notice in the Folio
Builder panel the HTML article is sort of
| | 03:23 |
grayed out a little bit, the text is not
black.
| | 03:28 |
And that's because an HTML article
doesn't have layouts.
| | 03:33 |
So, there isn't another level to go down
into to see a vertical and a horizontal layout.
| | 03:39 |
Because it's all HTML code, it's going to
reorganize itself on the fly.
| | 03:45 |
So, I can't go deeper, that's why we see
it as gray here.
| | 03:49 |
To see the outcome, what I need to do is
pick up the device, and here's my iPad,
| | 03:54 |
and I'm going to download the data to my
device.
| | 03:59 |
And once that download is done, I can
simply open up this publication.
| | 04:03 |
And now I can see the HTML here, and I
can scroll down through the page.
| | 04:09 |
I can see that I've controlled the layout
a bit with some larger text, smaller text
| | 04:13 |
and alignments.
And if I rotate the device, we see the
| | 04:17 |
layout adjust to the new orientation of
my device.
| | 04:22 |
So, the cool thing about an HTML article
is, it's one source file, which is only
| | 04:27 |
code, there's no design.
And it adapts automatically to both
| | 04:32 |
orientations of my device.
So, maybe some of the articles in your
| | 04:38 |
publication make more sense to be
HTML-based than they are to be designed.
| | 04:44 |
So, experiment with this technology a
little bit.
| | 04:48 |
If you do a lot of HTML articles, also
consider what pieces of artwork and
| | 04:53 |
content are shared between these
articles.
| | 04:58 |
And if you have a DPS subscription, you
can upload these shared assets for all of
| | 05:04 |
the article in your folio.
| | 05:08 |
| | Collapse this transcript |
| Creating custom TOC images| 00:01 |
When you add an article to a folio, the
Folio Builder generates a default TOC image.
| | 00:09 |
An example of this here is the article
cover.
| | 00:12 |
And if I go to Preview this, we're going to
see the content viewers rendition of this.
| | 00:18 |
And if I click, I get the navigation
system.
| | 00:21 |
And now, if I pull the TOC down, this
little thumbnail has been generated
| | 00:25 |
automatically by the Folio Builder
System.
| | 00:29 |
Now, you can tell this is not based upon
this layout.
| | 00:33 |
In fact, it's based upon the vertical
layout.
| | 00:37 |
So, the Folio Builder has made the choice
to generate a thumbnail based on the
| | 00:41 |
vertical system.
What if you want to have a customized and
| | 00:47 |
controlled TOC image?
That's what we're going to take a look at generating.
| | 00:52 |
Now, I think what I'm going to do is go into
that cover article.
| | 00:56 |
I think I want to build a TOC image based
on the landscape layout.
| | 01:01 |
So, I'll going to go ahead and double-click.
And I think I am just going to export a JPEG.
| | 01:08 |
Now, let's control the name a little bit.
This is the cover park.
| | 01:12 |
And what I'm building is a TOC.
So, I'm going to change the name up just a
| | 01:17 |
little bit.
I'm going to go put this on the desktop of
| | 01:20 |
my machine, so it's nice and easy to
find.
| | 01:24 |
Let's generate it like so.
And now, let's go over to Photoshop and
| | 01:29 |
go ahead and open that file on the
desktop.
| | 01:33 |
Here is the JPEG.
And what I really want to do is crop the
| | 01:37 |
image down.
And since the TOC is square, I'm going to go
| | 01:41 |
ahead and use a fixed ratio for the
selection tool with a width and height of one.
| | 01:48 |
Now, when I click and drag, I'm always
going to get a square.
| | 01:51 |
And I could do something like just select
the word local, make that the big part of
| | 01:56 |
this TOC image.
Just about like so.
| | 02:00 |
Maybe nudge it over a touch.
And I'm going to crop the image.
| | 02:04 |
Image > Crop.
Excellent.
| | 02:07 |
And I want to make this file a specific
size.
| | 02:11 |
So, let's go ahead and go Image > Image
Size.
| | 02:15 |
Something around 70 to 100 pixels on a
side is appropriate.
| | 02:20 |
So, I'm going to type 100 in here.
It's probably a little bit bigger than I
| | 02:25 |
need, but I'm happy with it.
So, I'm going to go 100% zoom on this.
| | 02:29 |
I like the way this TOC icon is going to
look, pretty cool.
| | 02:34 |
Now, let's make it a nice sized JPEG.
So, I'm going to go to File and Save for Web
| | 02:41 |
and Devices.
And that's looking pretty cool, 4.3K,
| | 02:45 |
JPEG, high quality, 60, excellent.
I'll click Save.
| | 02:50 |
I'm going to save it as a JPEG in exactly
the same place and replace what's there.
| | 02:55 |
Close it and don't save it.
So, a little bit of Photoshop work helps
| | 03:00 |
me build the custom icon that I want for
the table of contents.
| | 03:06 |
I'm going to return to InDesign now.
I'm going to return to the cover article.
| | 03:10 |
And in the Flyout menu, when I choose
Properties, I can edit the metadata and I
| | 03:15 |
can load a custom TOC image.
So, I'm going to click the folder here and
| | 03:21 |
go to the desktop of my machine.
Now, I can load that particular image and
| | 03:27 |
have it serve as the table of contents
preview.
| | 03:32 |
So, when I click OK and return to the
article and Preview it, the layouts are
| | 03:37 |
going to look the same.
That's splendid.
| | 03:43 |
There we are, here's the rotated view to
the vertical layout.
| | 03:46 |
And if I click and take a look at the
TOC, it's the custom image that I built.
| | 03:53 |
So, a little bit of control goes a long
way to me, being happy.
| | 03:57 |
Now, to make this even cooler, if you're
going to import articles, you can
| | 04:02 |
automatically have TOC images added that
you control.
| | 04:08 |
And the way this works, let's go ahead
and hide InDesign for a moment and close
| | 04:14 |
this document.
I'm going to go take a look at my Digital
| | 04:19 |
Publishing Folder > Articles Start.
I'm going to use the Cover Park iPad folder.
| | 04:25 |
And this is what I'm going to import into
a brand new folio.
| | 04:30 |
And I'm going to take the JPEG we just built
and add it to the folder.
| | 04:34 |
So, I'm now expanding the idea of having
a horizontal and a vertical InDesign file
| | 04:40 |
and I'm adding an image.
This can be a JPEG or it can be a PNG.
| | 04:47 |
If you have more than one image in this
folder, what I'm about to do will use the
| | 04:52 |
first image alphabetically.
So, let's switch back over to InDesign.
| | 04:58 |
I'm going to create a new folio.
This is going to be Demo TOC.
| | 05:04 |
And let's add the article by importing.
So, if I choose Import > Single Article.
| | 05:13 |
This is going to be the My TOC.
And we'll point to the folder where we
| | 05:19 |
just built that system.
So, Digital Publishing > Article Start >
| | 05:25 |
Cover Park iPad, there's the JPEG we just
built.
| | 05:29 |
I click Open, and OK.
And the files are brought in.
| | 05:34 |
They're ingested by the DPS system.
The folio and the article is constructed
| | 05:39 |
for me.
And because the TOC image is there, it's
| | 05:42 |
going to be pulled in as the custom TOC.
So, let's take a peek at that now.
| | 05:50 |
By selecting my TOC and previewing the
article.
| | 05:55 |
We'll now see in the Content Viewer, the
layouts.
| | 05:59 |
And when I click and go to the TOC,
there's the custom image, added
| | 06:03 |
automatically, based purely on the fact
that it was in the folder when I imported
| | 06:08 |
the content.
So, a beautiful way of controlling TOCs
| | 06:13 |
and the representation of content in your
publication.
| | 06:18 |
Play around with this one, it's quite
powerful.
| | 06:25 |
| | Collapse this transcript |
| Updating designs in folios| 00:02 |
Let's consider one of those ongoing tasks
we all face as designers, and that's changes.
| | 00:08 |
When I take a look at an InDesign file
and I have to make a correction, if I'm
| | 00:12 |
working in print, it's really easy.
Make the change, generate a new ePub, or
| | 00:18 |
generate a new PDF, and away we go.
It's a little bit more involved in a DPS workflow.
| | 00:25 |
So, let's take a look at how to update a
file, and then update the article as well.
| | 00:32 |
I'm going to shift over to InDesign to do
this.
| | 00:34 |
And the reason I'm doing this is so that
I can look at a Folio, and go into the
| | 00:38 |
Article Level.
I notice that on the cover, there is a
| | 00:42 |
piece of information that I want to edit.
So, I'm going down and finding the layout
| | 00:48 |
for the cover article, and now I'm going
to select and double-click to open up the
| | 00:52 |
file that is the cover.
And the little change I want to make is
| | 00:58 |
over here on the right-hand side, and I
don't really need this little word that
| | 01:01 |
says iPad.
So, I'm going to select the Object and
| | 01:05 |
Delete it.
I'm going to Save the InDesign file, and
| | 01:09 |
close it.
And now, I'm going to open the Portrait
| | 01:11 |
Layout as well.
So, select it, then double-click it in
| | 01:14 |
the Folio Builder panel.
And again, I've got that little piece of
| | 01:18 |
text up there.
We're going to delete that.
| | 01:22 |
Save the InDesign file and close it, and
it seems like everything is great and wonderful.
| | 01:27 |
The challenge is that we haven't updated
the article.
| | 01:32 |
And the way we update an article is by
making the changes in the designed files
| | 01:37 |
used to make the article.
And then, going to the article itself, in
| | 01:43 |
the Folio Builder panel and choosing
Update.
| | 01:47 |
When I do this, the article is uploaded
again.
| | 01:50 |
It's regenerated and the content is going
to be updated for us.
| | 01:55 |
So, that's how you update content.
And it's really important to do this and
| | 02:01 |
be aware of whether or not you've updated
an article.
| | 02:05 |
The reason being is, there's no
pre-flighting of an article or a folio.
| | 02:11 |
there's no indication that you've made an
update to the files that are used to
| | 02:15 |
build the article, so you have to be
aware of what's going on.
| | 02:21 |
The other way you can find out whether or
not you've done the updating is, go and
| | 02:25 |
take a look at this in the Preview.
And if you don't see the change that you
| | 02:30 |
thought that you put in, that means you
need to do the update again.
| | 02:34 |
So, there you go.
Updating article content in a DPS workflow.
| | 02:43 |
| | Collapse this transcript |
| Previewing your work| 00:02 |
When you're working in DPS publications,
you need to Preview your design and there
| | 00:06 |
are a number of ways of previewing the
design.
| | 00:10 |
Let's take a look at those ways and what
they mean to you.
| | 00:13 |
I'm going to start by opening the Digital
Publishing folder > Articles Start.
| | 00:18 |
I'm going to go to the Cover Park iPad
folder, and then Select and Open both of
| | 00:23 |
these files.
When I'm working with a layout, when I'm
| | 00:28 |
working with a single file, there are a
couple of ways I can preview this content.
| | 00:34 |
One technique is to go to the File menu
and choose Folio Preview.
| | 00:39 |
This command is going to generate a folio
of only the active file.
| | 00:44 |
So now, I can see only the Horizontal
layout, if it had multiple pages or if it
| | 00:49 |
had interactivity, I would be able to
preview them here in the Content Viewer
| | 00:55 |
on my desktop.
So, the command File > Folio Preview
| | 01:01 |
deals with only the active document.
If you open the Overlay Creator panel,
| | 01:07 |
you also notice at the bottom, there's a
Preview button.
| | 01:12 |
Clicking this button does exactly the
same thing as the File command, it
| | 01:15 |
generates a preview of the current and
active document.
| | 01:20 |
If there is any interactivity in here, we
would be able to test it.
| | 01:24 |
If I press the R key on the keyboard in
here, we would be able to rotate the view
| | 01:27 |
from Vertical to Horizontal or vice
versa, it doesn't work.
| | 01:31 |
And that's because the preview from the
Overlay Creator panel, just like the
| | 01:39 |
command for Folio Preview, only tests the
current active file.
| | 01:47 |
If you want to take a look at how the
combinations of files, the Vertical and
| | 01:51 |
the Horizontal look and how they
function, you need to use the Folio
| | 01:55 |
Builder panel.
Now, the way the Preview command or
| | 02:00 |
button in the bottom of the Folio Builder
panel works, is going to be different
| | 02:04 |
based upon what is selected in this
panel.
| | 02:09 |
What I mean by this is, right now, the
Folio Builder Intro Folio is targeted.
| | 02:15 |
And that's different than going in and
selecting a single article inside of the folio.
| | 02:22 |
If I select just the Cover article and
Preview this, I'm going to see both
| | 02:27 |
layouts of only the article.
And now, we see in the Content Viewer,
| | 02:34 |
here is the same file but used in a
article, so I can see and interact with
| | 02:39 |
the content but I can also type R on the
keyboard and rotate to the other view.
| | 02:49 |
I type R and I come back.
So, by targeting an article, I can see
| | 02:55 |
both orientations of that article.
If I select the Two Wheels article and
| | 03:02 |
click Preview, we're going to see all of
the pages in the article and all of the
| | 03:08 |
interactivity in the Content Viewer.
So, here's that article inside the
| | 03:15 |
Content Viewer.
If I type R, we see the Alternate Layout.
| | 03:20 |
I'm going to type R again to come back to
the Horizontal Layout, and we see each of
| | 03:24 |
the pages and all of the interactivity
that's been built into this publication.
| | 03:32 |
If I come back to the Folio level and
target the Folio Builder Intro and choose
| | 03:38 |
Preview, now we generate a preview of the
entire folio.
| | 03:45 |
So now, we can see the cover.
I rotate it back.
| | 03:48 |
And now, I can swipe horizontally to see
the ad.
| | 03:52 |
I can swipe horizontally again to see the
2 Wheels Good article, and then move down
| | 03:57 |
through this article.
If I click, I can also see the Cascade or
| | 04:02 |
the Browse mode, and pick up different
articles this way.
| | 04:06 |
I can use the TOC and see the content
this way.
| | 04:10 |
And if I had access to my Scrubber bar in
the bottom, I could scrub left and right
| | 04:15 |
to move through.
Unfortunately, my monitor is a little low
| | 04:20 |
on the resolution for that.
So, there you are, these are the ways you
| | 04:26 |
can preview a DPS publication either as a
single file or as articles or for folios.
| | 04:34 |
So, remember the options, remember the
impact of selections when you want to preview.
| | 04:44 |
| | Collapse this transcript |
| Sharing folios| 00:02 |
Sharing design folios is a really
important part of the DPS workflow.
| | 00:07 |
If I take a look at the Folio Builder
panel, you can see a, a couple of folios
| | 00:11 |
here have an icon looks like a couple of
people.
| | 00:14 |
These folios are being shared.
And one of the interesting things is I'm
| | 00:20 |
sharing this web content folio with
somebody.
| | 00:24 |
You can see that I'm the owner, and up
here, at the top the thing called Best is
| | 00:29 |
being shared with me by somebody else.
So, we're going to take a look at how to
| | 00:36 |
share and what sharing means for the DPS
workflow.
| | 00:40 |
So, the way you share a folio is select
it, and then use the Flyout menu here,
| | 00:46 |
and choose Share.
You then fill in the email address for
| | 00:53 |
the person you want to share this with.
And you might add a subject line to this,
| | 01:08 |
and then add a message.
So, the interesting thing about sharing a
| | 01:20 |
folio is what we're doing, is making the
information about my folio available to
| | 01:25 |
another user.
So, if once I click Share, a piece of
| | 01:31 |
email is generated with information about
how to access that shared folio.
| | 01:38 |
You might notice now there's a new
Sharing icon on the Folio Builder Intro folio.
| | 01:44 |
So, that indicates that this is being
shared and it shows me with one user
| | 01:47 |
right now.
If we take a look at a folio which is
| | 01:52 |
being shared with me, I'm going to go
into the Best folio, and I can see that
| | 01:57 |
there's one article in here.
You might notice that the article name is
| | 02:03 |
grey, it's not black.
And this is a visual indication saying
| | 02:08 |
that this is something that I don't have
the rights to change.
| | 02:12 |
But if I select this article, I can
preview it.
| | 02:16 |
So the nice thing here is, somebody else
is sharing their work with me and I can
| | 02:21 |
now see what the work is since I'm
working at the Folio Builder level.
| | 02:26 |
If this has both a vertical and
horizontal layout, I can switch back and
| | 02:30 |
forth between them and see the two
layouts.
| | 02:34 |
And if there was any interactivity in
this folio, I would be able to work with
| | 02:37 |
the interactivity.
I'm going to go ahead and close that viewer.
| | 02:42 |
And let's come on back to the Folio
Builder.
| | 02:44 |
So, if this folio which has been shared
with me had more than one article, I
| | 02:48 |
would see each of the articles.
Now, let's go back up to the top of the
| | 02:53 |
Folios area.
And one thing to note about a shared
| | 02:56 |
folio is, while you can share it, as of
today, I cannot un-share.
| | 03:02 |
And this is surely going to be fixed.
And I look forward to the point where
| | 03:07 |
I'll be able to control whether or not
somebody still has access to the content.
| | 03:15 |
Now, the folio called Best is currently
being shared with me.
| | 03:20 |
If I delete this, and I remove it, let's
go take a peek at what the other person sees.
| | 03:28 |
So, I'm going to quickly Sign Out, and
I'm going to Sign In with that other name.
| | 03:38 |
And now, we're going to see the Folio
Builder from that other persons point of view.
| | 03:43 |
Now, it's a little funny because I'm
sharing folio's with myself.
| | 03:49 |
But you remember, I deleted the Best
folio from the first user.
| | 03:54 |
Now we're looking at the user who owns it
and who shared it.
| | 03:59 |
And because the person who received the
share deleted, they only lose the view of
| | 04:05 |
it, but the original is still here.
So, when I click on Best and go into it,
| | 04:12 |
not only can I see the article that was
there, but notice the label for the
| | 04:16 |
article is black, not gray.
And that's because this user owns the file.
| | 04:24 |
So, if somebody is sharing something with
you, feel free to delete it if you don't
| | 04:29 |
want to look at it anymore.
And it's still going to be out there for
| | 04:34 |
everybody else.
So, those are the basics of sharing.
| | 04:38 |
And it's important to consider that this
is the basis of contributing content to
| | 04:44 |
somebody else's production folio.
If I was building an ad that I wanted to
| | 04:50 |
put into somebody else DPS publication, I
would build a Design folio, and then
| | 04:55 |
share it with them.
They then can access and pull my ad out
| | 05:01 |
of my folio, and add it to their
production piece.
| | 05:05 |
So, that's the core of sharing.
| | 05:13 |
| | Collapse this transcript |
| Building covers| 00:02 |
When you're working with a DPS
publication and you move it to a device,
| | 00:05 |
it's important to build a cover image,
which is visible inside the library of
| | 00:09 |
your Content Viewer.
So, let's take a look at how I build
| | 00:14 |
cover images for my publications.
I'm going to open the Digital Publishing folder.
| | 00:21 |
Articles > Start > Cover > Spring.
And I'm going to select and open both the
| | 00:26 |
horizontal and vertical in Design files.
So, this is what I want to have as the
| | 00:32 |
cover image in the library in my Content
Viewer.
| | 00:38 |
And I need to build both the vertical
layout and the horizontal layout or
| | 00:43 |
version of this cover image that we see
in the library.
| | 00:48 |
Now, the way I do this is sort of fun
it's a matter of building an image of a
| | 00:52 |
certain size and a certain way.
And what I'd like to do is use InDesign
| | 00:58 |
to build the layout, the look and the
feel of what the cover is, so there is a
| | 01:01 |
combination of graphics and text frames
up here.
| | 01:06 |
So all of the standard things that make
InDesign so wonderful, but I just need to
| | 01:11 |
generate a JPEG out of this.
So if I choose File > Export, if I choose
| | 01:17 |
the JPEG format.
And let's go to the desktop of the machine.
| | 01:23 |
Let's go into Digital Publishing Folio
covers.
| | 01:27 |
And this is where I'm storing all of my
cover images that I use in all of my
| | 01:30 |
other folios.
I'm going to change the file name of this
| | 01:35 |
JPEG a little bit.
So, I'm going to remove the Design
| | 01:39 |
conotation, there.
And at the very beginning, I'm going to put
| | 01:43 |
cvr underscore.
This is just some coding that I use so
| | 01:47 |
that things sort in ways that make sense
to me.
| | 01:51 |
Feel free to name your files the way
you'd like.
| | 01:54 |
So I'm going to save this as
cvr_coverspring_h.jpg, and I'm going to this
| | 01:59 |
out at Medium format.
I'm going to go out at 150 PPI, cuz that's
| | 02:05 |
going to give me enough content for me to
downsample this to an appropriate size.
| | 02:14 |
A color space of RGB is great for the
devices we're working with.
| | 02:18 |
So I'm going to click Export.
Now, I'm going to go ahead and close this file.
| | 02:24 |
I'm not going to need to save changes.
And I'm going to do the same thing for
| | 02:27 |
the vertical one.
So I'm going to choose Export, the JPEG
| | 02:32 |
option is selected, and let's go back to
the Folio Covers folder and change the
| | 02:39 |
file name like so.
And go ahead and Save it.
| | 02:45 |
InDesign remembers the settings you just
applied to the other one.
| | 02:48 |
So ready to go with that export and there
we are.
| | 02:53 |
All right, I'm going to go ahead and hide
InDesign now and let's go find the thing
| | 02:57 |
that we just built.
So, in the Digital Publishing folders,
| | 03:02 |
I'm going to instead go into the folio
covers.
| | 03:05 |
And I'm looking for the CVR cover spring
files that we just built.
| | 03:11 |
I'm going to go ahead and open these up in
Photoshop.
| | 03:14 |
And now, it's a matter of adjusting
these.
| | 03:17 |
So there are a couple things I want to do
in Photoshop.
| | 03:20 |
One is going to be to resize these images
so they look good in the Library view of
| | 03:23 |
the Content Viewer, in both the One-Up
and Gallery modes.
| | 03:27 |
The One-Up is nearly fullscreen.
That means I want images that are about
| | 03:35 |
1000 pixels or at least that seems to be
working nicely for me.
| | 03:40 |
So I'm going to start by going to the
Image menu, choose Image Size, and I'm
| | 03:45 |
going to change the maximum dimension.
So for the vertical file, it's going to be
| | 03:51 |
the height to a 1000 pixels.
Now, a couple of things happened here,
| | 03:56 |
one is the file gets a whole lot smaller
and that's pretty good I'm going to keep the
| | 04:00 |
resolution at about a 150 PPI, I click
okay and the next thing I want to do is
| | 04:04 |
save this image in a format that going to be
really nice and small.
| | 04:12 |
So the way I'm going to do that cuz it's
nice and easy, is choose save for web and devices.
| | 04:19 |
So in this dialog box I can choose the
format.
| | 04:22 |
I think JPEG is appropriate for this
image.
| | 04:25 |
I can choose the compression values and
qualities.
| | 04:28 |
I could blur it if I really wanted to and
this is looking pretty good to me.
| | 04:33 |
I can see in the bottom left-hand corner
That this is going to be JPEG at about 165k.
| | 04:37 |
That seems like a nice image size for
what we're up to.
| | 04:40 |
So I'm going to click save, and let's
save this back into exactly the same
| | 04:46 |
place, with exactly the same name, and
we're ready to go.
| | 04:53 |
So we just build the vertical one.
I'm going to go ahead and close that file.
| | 04:58 |
Let's do the same thing to the
horizontal, so I'm going to start by going
| | 05:02 |
Image > Image Size, and make the large
dimension 1,000 pixels, and then I'm
| | 05:07 |
going to use the Save For Web And Devices
command.
| | 05:12 |
JPEG, High, 60 is looking good to me.
Click OK, and I'm going to save it with the
| | 05:19 |
same name into the same folder,
overriding what's already there and closing.
| | 05:26 |
So, that's how I'm building cover images
and those cover images will be loaded in
| | 05:31 |
as part of the metadata for a design
folio.
| | 05:36 |
Take a look at what I did.
Experiment with your own.
| | 05:39 |
You might find there's slightly different
settings that make you happier.
| | 05:43 |
Rock on with it.
Thanks.
| | 05:49 |
| | Collapse this transcript |
|
|
4. Creating Interactive OverlaysDPS tools and workspace| 00:02 |
So, let's take a look at where to find
the DPS tools.
| | 00:05 |
You take a look at InDesign, you go to
the Window menu, there aren't any new
| | 00:09 |
tools here that are really evident.
But if you open up the Extensions area,
| | 00:14 |
this is where you see the brand new Folio
Builder and Overlay Creator panels.
| | 00:20 |
Now, the Overlay Creator panel is where
we build in our activity for the DPS workflow.
| | 00:25 |
We'll do a lot of work with this.
The Folio Builder is where you start to
| | 00:29 |
compile different articles together into
larger publications.
| | 00:33 |
The Folio Builder also communicates to
Adobe services online, and that's where
| | 00:39 |
the content is shared with devices.
Now, the first time that you open up the
| | 00:45 |
Folio Builder panel, it's not going to
look like this.
| | 00:48 |
A fresh install of inDesign CS5.5, Folio
Builder is going to ask you to update
| | 00:53 |
that software.
Please go ahead and do that.
| | 00:57 |
That way you get the current set of tools
for Folio Builder and the Overlay
| | 01:00 |
Creator, very important step in the
process.
| | 01:04 |
Now, I'm not getting tired of moving
these panels around and swapping the
| | 01:08 |
panels a lot, so I tend to work with work
spaces a good deal.
| | 01:13 |
I've built the special work space and I
am going to share with you.
| | 01:18 |
Let's go ahead and install that.
Now, I'm going to go ahead and quit InDesign.
| | 01:23 |
And what I need to do is find two
specific folders now, one of them is in
| | 01:26 |
the Digital Publishing folder set, and
these are the files for this course.
| | 01:33 |
And I'm going to go into the video to
bring bonus files this is where I find
| | 01:36 |
the V2B DPS XML file.
This is the workspace I'm sharing.
| | 01:41 |
Now, I'm going to open up another window.
And what I need to find is my User
| | 01:45 |
Library area, then I find Preferences for
InDesign.
| | 01:51 |
And then, I'm going to look into the
version 7.5, if I'm working with InDesign
| | 01:56 |
CS5.5, or version 7.0 if I'm working with
InDesign CS5.
| | 02:02 |
In the English US for me, because that's
the language I'm working with.
| | 02:09 |
I click the folder Work Spaces, and this
is were I'm going to drag and drop that
| | 02:15 |
V2B DPS XML file.
I'm going to hold the option or Alt key
| | 02:19 |
that copies the content in there.
And now, if I go and launch InDesign,
| | 02:23 |
we're going to see a brand new work space
available for me right there at the top.
| | 02:29 |
There's the V2B DPS work space, and now
the Overlay Creator panel is right here
| | 02:34 |
in a little pop-out system, and the Folio
Builder is right beneath it.
| | 02:41 |
So, this is a set of and a arrangement of
panels that I like to work with when I am
| | 02:45 |
working DPS.
I hope you will enjoy this well. Thanks.
| | 02:50 |
| | Collapse this transcript |
| Hyperlink types| 00:02 |
A hyperlink allows a reader to move
around inside of a DPS document, or
| | 00:06 |
outside of it.
Let's take a look at how to build hyperlinks.
| | 00:11 |
I'm going to open the Digital Publishing
Folder > Articles Start > Overlays.
| | 00:16 |
And now I'm going to select and open
overlayhyperlinks_h.
| | 00:20 |
This is the document that we're going to
talk about.
| | 00:23 |
The types of links you can build and the
actions that you can use.
| | 00:28 |
Let's zoom in on the left-hand side and
talk about the type of links first.
| | 00:32 |
So we're going to talk about three different
types.
| | 00:35 |
A text based link, an object based link
and a button based link.
| | 00:41 |
So let's start with text.
I'm going to select the text frame here, and
| | 00:45 |
double-click on it.
This switches InDesign from the text
| | 00:49 |
tool, and now I'm going to select and copy
the destination URL that I want to use in
| | 00:53 |
a few moments.
A text-based hyperlink is going to be
| | 00:58 |
based on a selection of text.
So I'm going to select DPS gallery and, I'm
| | 01:04 |
now going to go to the Interactive flyout
and choose Hyperlinks.
| | 01:10 |
The Hyperlinks panel is where I build
hyperlinks.
| | 01:13 |
And on a normal day there are a number
of ways to build hyperlinks, but in a DPS
| | 01:18 |
workflow there's one way that works
really well.
| | 01:23 |
The way you do this is go to the bottom
of the hyperlinks panel, click create new
| | 01:28 |
hyperlink, and now in the new hyperlink
panel, do the 3 following things.
| | 01:34 |
You're choosing to link to a URL, you
then enter the URL.
| | 01:40 |
I'm going to paste The destination that I
copied a moment ago, and uncheck shared
| | 01:45 |
link destination.
It's very important you do this 3rd thing.
| | 01:50 |
This will work in a DPS document if you
do not turn the shared destination off,
| | 01:54 |
the link will not work.
Now I'm going to add a little bit of
| | 01:59 |
visual to it as well.
I'm going to apply a character style
| | 02:02 |
called link blue.
That's going to make my text which is
| | 02:05 |
serving as the link visible.
And that's important to tell your user
| | 02:10 |
that they can do something right there.
So if I click into that portion I can see
| | 02:15 |
that this is part of the link system in
the hyperlinks panel.
| | 02:20 |
And if I press the left-facing arrow,
this will select the link source.
| | 02:26 |
If I press the right arrow, this will
take me to the link destination.
| | 02:31 |
And doing this is a good way to make sure
that you typed the correct URL in here.
| | 02:35 |
This particularly URL takes us to the
digital publishing gallery at Adobe and I
| | 02:40 |
can see how many documents are currently
published and publicly available using
| | 02:45 |
the DSP workflow tools.
Let me go ahead and close this, and let's
| | 02:50 |
come on back and build the second type of
link.
| | 02:55 |
The second is an object based hyperlink,
so I'm going to select the frame that I have
| | 02:59 |
here, this frame happens to have a
graphic in it, and again I'm going to use
| | 03:02 |
the Hyperlinks panel to build this.
I go to the bottom, click Create new
| | 03:08 |
hyperlink, and I follow the same set of
rules Link to URL.
| | 03:13 |
Enter the destination and deselect Shared
Hyperlink Destination.
| | 03:18 |
Click Okay and you've just made the
second type.
| | 03:23 |
The third type of link is a button based
link.
| | 03:26 |
I've built a button here based on one of
the sample buttons you can find in the
| | 03:31 |
sample buttons library in End Design.
We get to this by using the fly out menu
| | 03:37 |
in the buttons panel.
Now this particular button needs an event.
| | 03:43 |
In DPS we use the on release event and we
add an action.
| | 03:48 |
It's going to be go to URL and just like
the two other examples, we insert the
| | 03:53 |
destination, press Enter.
So we've just built 3 types of links a
| | 04:00 |
text-based, an object-based and a
button-based link.
| | 04:07 |
Let's zoom out, take a look at the whole
document and to test these links I need
| | 04:11 |
to go beyond just previewing this in the
desktop content viewer.
| | 04:18 |
I need to actually build a folio to see
these work.
| | 04:22 |
So I'm going to go to the folio builder
panel.
| | 04:24 |
I'm going to create a New Folio, and let's
call this Folio Hyperlinks.
| | 04:31 |
It's going to be 1024 by 768.
I'm going to work with the other defaults
| | 04:36 |
and we've got a folio.
What we need to do is add the current
| | 04:41 |
active document as an article.
So I'm going to come back to the bottom
| | 04:46 |
of that Folio Builder panel, click New
and this article name is going to be hyperlinked.
| | 04:52 |
I'm using a lower case here, and let's go
ahead and save the content.
| | 04:57 |
So when we add the document as an
article, we get the current state of the document.
| | 05:07 |
So the article has been added to the
folio.
| | 05:10 |
We probably should add a little bit of
additional metadata.
| | 05:13 |
So let's go to the properties for the
hyperlinks article, and let's put a
| | 05:18 |
title, right, and let's go back up to the
Hyperlinks Folio.
| | 05:25 |
And again use the Flyout menu, choose
Properties.
| | 05:28 |
Let's give the publication a name.
Let's call this link types and actions.
| | 05:38 |
And we should load some cover previews
here.
| | 05:40 |
I'm going to choose and click on loading
the vertical.
| | 05:43 |
I'm going to go to the Digital Publishing
folder > Folio Covers > coverhyperlink_v
| | 05:48 |
and load that one.
And I'll click the load icon for the horizontal.
| | 05:57 |
I'm going to choose cvrhyperlink_h and
load that one in.
| | 06:04 |
So we've now constructed a folio with a
single article and to see the outcome of
| | 06:08 |
these links I would need to open this
document up on my device to see the links work.
| | 06:15 |
So I'm going to turn to and launch my
device.
| | 06:20 |
Log in to the viewer and download this
New Folio.
| | 06:31 |
So, now when I take a look at this
publication on my device, we see the
| | 06:34 |
layout, we can see the blue underscored
text which is the text based hyperlink
| | 06:39 |
and when I click on that, it's going to
open the website destination inside of
| | 06:43 |
the DPS publication.
So now I can see and scroll through this
| | 06:50 |
content, let's come on back.
The object based hyperlink goes to
| | 06:55 |
exactly the same place and works the same
way.
| | 06:58 |
So that one's working great and the
button based link is also going to open
| | 07:03 |
up and take us to the destination.
So all three of those types of links are
| | 07:09 |
working great, so there you go.
Building three different link types for DPS.
| | 07:19 |
| | Collapse this transcript |
| Hyperlink actions| 00:02 |
When you're working with hyperlinks,
there are a couple of different actions
| | 00:05 |
you can use.
Let's take a look at what's possible.
| | 00:08 |
When opening the digital publishing
folder, Articles > Start > Overlays, and
| | 00:13 |
I'm going to select open the
overlaylinkactions_h file.
| | 00:19 |
Now this is going to be one-half of a folio
system, so we can see how some of these
| | 00:24 |
links work.
I need to create a folio and add some
| | 00:29 |
content, so we have destinations.
So let's go ahead and do that.
| | 00:34 |
I'm opening the folio builder panel,
going to click New and create a new folio.
| | 00:39 |
This is going to be link actions.
I'm going to add the current file as a an article.
| | 00:47 |
So this is going to be called Hyperlinks.
And now I'm going to go and open up a
| | 00:54 |
different InDesign file that's going to
act as as set of destinations.
| | 01:00 |
So let's switch from InDesign back over.
And I'm going to look in the same folder,
| | 01:05 |
and I'm going to select and open
overlaylinkdestination_h.
| | 01:10 |
This is going to serve as the destination
for some of our links.
| | 01:15 |
So on the Folio Builder panel, I'm going to
click New, again.
| | 01:18 |
For an article name, let's use
Destinations.
| | 01:24 |
I'm being very specific about this name
because I need to know this for when I
| | 01:28 |
build the linking system.
So I'm going to click Okay.
| | 01:34 |
This document is now added as an article
and we'll need to add meta data now to
| | 01:37 |
make sure this looks good when we preview
it.
| | 01:41 |
So with the hyperlinks article targeted
I'm going to choose Properties.
| | 01:45 |
Let's put just titles in.
And let's go with hyperlinks, great.
| | 01:53 |
Let's come on down and select the
destinations article and look at properties.
| | 01:58 |
Let's give it a name as well.
And now let's go up a level, out of the
| | 02:05 |
articles, to a folio called Link Actions.
And again, look at Properties.
| | 02:11 |
Add a publication name, and we need to
add a vertical and horizontal cover image.
| | 02:19 |
So I'm going to click the load icon.
I'm going to go to the desktop.
| | 02:23 |
Digital publishing folio covers.
And now I'm going to select the CVR
| | 02:28 |
hyperlink vertical.
And load it for the vertical.
| | 02:33 |
And I'm going to load the horizontal version
as well.
| | 02:38 |
So that's adding a little bit of
metadata, and a little bit of information
| | 02:42 |
about this folio so that we can do the
next thing correctly.
| | 02:47 |
I'm going to switch back over to the
overlays action document.
| | 02:50 |
And now let's talk about the types of
actions we can use.
| | 02:55 |
When we talked about building links we
talked about using go to URL commands I'm
| | 02:59 |
going to use a button for all of these
examples if I select the DPS gallery
| | 03:03 |
button first what I should do is come on
over here and select the text that I want
| | 03:08 |
to use for this link copy it.
Now let's come one back over.
| | 03:17 |
Select the DPS gallery button.
In the buttons panel, we need to add an action.
| | 03:24 |
This action will by, goto URL.
And then, we simply paste the destination
| | 03:29 |
into the space here.
So that's the first of three types of
| | 03:33 |
actions that we can add.
The second type of action allows you to
| | 03:38 |
move from one article to another inside
of a DPS document.
| | 03:44 |
The way you build this is very similar.
You select the button.
| | 03:47 |
You add an action.
Go to URL, and then you change HTTP to
| | 03:54 |
NAV2:// and the name of the article,
Destinations.
| | 04:04 |
I'm using the D that I had when I named
the article, and the name of the article
| | 04:09 |
that we see in the folio builder panel is
what I use for this type of linking.
| | 04:17 |
So that's how I move to the first page of
a particular article.
| | 04:22 |
If I want to go to a particular page, I
might use something very similar.
| | 04:27 |
Go to URL.
Change this to NAV2:// the name of the
| | 04:35 |
article and then #, and I put the page
number minus 1 that I want to go to.
| | 04:49 |
So this button says page two.
I want to go to page 2, so I say number one.
| | 04:57 |
The first page of an article is referred
to as zero, the second page as number one.
| | 05:04 |
So with that little piece of nav two url
goodness, this is going to take us to the
| | 05:09 |
second page.
of the article.
| | 05:14 |
The third type of action, is a mail to
action.
| | 05:18 |
If a user clicks on this, it'll trigger
the email system on their device, and
| | 05:22 |
will start writing a piece of email.
To do this, you use a MailTo designation.
| | 05:30 |
So I selected go to URL, and then I
replaced the http with mailto:// the
| | 05:38 |
destination for this, so we're going to say
user@email.com, and away you go.
| | 05:51 |
To find out more about what you can do
with a Mailto URL, take a look online.
| | 05:54 |
There are a number of things like
automatically adding the subject line for instance.
| | 06:02 |
So I've just built four new buttons
showing three different types of actions,
| | 06:07 |
and this is in one particular document
that's part of a folio.
| | 06:12 |
So, what I need to do at this point is
save the InDesign document, because I've
| | 06:17 |
made changes to it come to the folio
builder panel, and select the matching
| | 06:22 |
article hyperlinks and tell the folio
builder to update what's on the server.
| | 06:31 |
So now the information is uploaded again,
for this particular article.
| | 06:36 |
And now, once that's done, I can go and
turn to my device, and we'll take a look
| | 06:42 |
at how this all works.
Now, the reason why we're testing this on
| | 06:48 |
a device is DWB content viewer for the
desktop, doesn't show these type of
| | 06:52 |
actions correctly today.
So on my device we can see that we can
| | 06:59 |
now view the Link Actions Folio.
When I click the button to take us to the
| | 07:05 |
DPS Gallery, that works.
We've seen that before.
| | 07:09 |
But now if I slide to the right you can
see that we have the second article.
| | 07:14 |
And if I swipe down you can see I can
move down through this article to go back
| | 07:18 |
up to the top, that way you can see that
when I click Nav 2 Destinations, we jump
| | 07:23 |
to the first page of that article.
Let's come on back to our hyperlink page.
| | 07:30 |
And if I click on page 2 it takes us
back, not to the first, but to the second
| | 07:34 |
page of that article.
So our nav to system is all working
| | 07:41 |
nicely, and the last one is the mail to
system.
| | 07:44 |
When I click on that, it opens up my
email system, and I could start typing
| | 07:49 |
email here.
So there you go, the three types of
| | 07:53 |
actions you can build in DPS, and how
they look on the device
| | 07:58 |
| | Collapse this transcript |
| Image sequence overlays| 00:02 |
So, let's build an image sequence this
time.
| | 00:04 |
Let me go to the desktop of my machine,
open up the Digital Publishing folder,
| | 00:09 |
then open the Articles Start, and Overlay
Folder.
| | 00:13 |
The file we're going to start with is the
overlayimagesequence_h file.
| | 00:17 |
Go ahead and double-click that to open it
up.
| | 00:20 |
Now, what we're going to do is build a
type of interactivity between the image
| | 00:25 |
sequence word and the lower portion this
layout.
| | 00:29 |
And what we want to put in there is a
series of images so that the Reader can
| | 00:33 |
play them back, flip through them, and
see a type of interactivity.
| | 00:39 |
There are a lot of different ways you can
use this.
| | 00:42 |
But let's take a look at the images that
we're going to use.
| | 00:44 |
I'm going to use the bridge to do this.
I'm going to navigate to the sources.
| | 00:48 |
So, le'ts go take a look at the shared
links for two wheels.
| | 00:53 |
And inside of here, I have a Hub Bike 360
folder.
| | 00:57 |
And inside of this folder, I have a whole
bunch of images, 150 of them.
| | 01:02 |
And if I were to press the Space Bar, we
can see one image, and I'm using the
| | 01:06 |
arrow keys.
And as I flip through these images, you
| | 01:11 |
can see that I can get an idea of
rotating that bicycle.
| | 01:15 |
So, this is an example of what an image
sequence could do.
| | 01:20 |
Now, what I'm working with, again, is a
set of 150 still images.
| | 01:24 |
In this situation, it's this bicycle
rotating around.
| | 01:29 |
And every once in awhile, we added a call
out.
| | 01:32 |
Talk about a certain feature of the bike.
So, that folder of 150 images is what
| | 01:37 |
we're going to build into this image
sequence and allow the user to swipe back
| | 01:41 |
and forth with their finger to flip
through them.
| | 01:46 |
So, let's go back over to InDesign and
build it.
| | 01:49 |
So, this is a super easy interactivity to
build.
| | 01:53 |
I'm picking up the Frame tool cuz that's
how I build frames, and I'm just going to
| | 01:57 |
draw a shape.
Doesn't really matter what it is.
| | 02:01 |
It's probably got to be a square, and
then I'm going to go to the Overlay
| | 02:04 |
Creator panel.
Now in my work space, it's the second one down.
| | 02:09 |
You can feel free to go to the Window
menu, choose Extensions and open up the
| | 02:12 |
Overlay Creator here.
And when you select a Frame, notice in
| | 02:17 |
the Overlay Creator panel, some words are
not italicized and some words are.
| | 02:23 |
Anything which is not italicized can be a
type of overlay with a currently selected thing.
| | 02:31 |
So, I want that frame to hold an image
sequence.
| | 02:34 |
I click Image Sequence, and now I'm going
to load that folder of images.
| | 02:39 |
And now I navigate to it.
So, that was in my Digital Publishing
| | 02:43 |
folder, Shared Links > Links to Wheels >
Hub Bike 360.
| | 02:49 |
And with an image sequence, you point to
the folder that holds the graphics.
| | 02:54 |
I'm going to click Open now, and you see
that the frame was just resized.
| | 02:57 |
The first image is shown initially, that
turns on automatically when you load the
| | 03:02 |
images in and then you have additional
features that you can turn on.
| | 03:07 |
You can autoplay the sequence after a
delay of a certain number of seconds.
| | 03:12 |
And you can determine the frame rate and
how many times it plays or loops.
| | 03:17 |
I'm going to want the user to click and
drag with their fingers .So, I'm going to
| | 03:21 |
turn Autoplay off, that also means I
don't have to use the tap to play and pause.
| | 03:28 |
But I am going to use Swipe to change
images.
| | 03:30 |
So, that's how easy it is.
Build the frame, load the images.
| | 03:35 |
And now I want to come down and preview
this type of interactivity.
| | 03:39 |
The full layer was built for me, and it's
over on the other screen.
| | 03:43 |
Here it is.
There it is.
| | 03:44 |
I'm clicking now and dragging with my
cursor left and right.
| | 03:49 |
We see every once in a while one of those
pop-ups jumps out as we get to the image
| | 03:52 |
or two that has that call out.
And we might even be able to throw it if
| | 03:57 |
I was on an iPad.
So, that's how you build an image sequence.
| | 04:01 |
In this example, I'm rotating the
bicycle.
| | 04:04 |
But an image sequence could be time lapse
photography.
| | 04:07 |
Time lapse could be still images
generated from photo shop extended, but
| | 04:11 |
I'm working with a 3D object, and I
rotate the object or move the camera.
| | 04:18 |
And I generate a sequence of images.
There are all kinds of possibilities for
| | 04:23 |
how you use this type of overlap.
So, go ahead and save your file, and
| | 04:29 |
we'll take a look at other types of
interactive overlays.
| | 04:34 |
| | Collapse this transcript |
| Slideshow overlay| 00:00 |
Okay, let's take a look at building a
slideshow.
| | 00:04 |
We're going to start with one of these Start
articles.
| | 00:07 |
Open up your Digital Publishing Folder,
go to Article Start > Overlays.
| | 00:12 |
We're going to start with the Overlay
Slideshow_H file.
| | 00:15 |
Go ahead, double-click, open it up.
We're going to build some interactivity that
| | 00:19 |
goes into the large, white space here on
the page.
| | 00:22 |
We're going to use a couple of really cool
tricks in InDesign to do this.
| | 00:26 |
All good production tricks.
We need to pull content in.
| | 00:30 |
So I'm going to go File > Place, and now I'm
going to surf through and select Digital
| | 00:36 |
Publishing > Shared Links > Links to
Wheels.
| | 00:41 |
I'm going to select the Friers Market
slideshow folder.
| | 00:45 |
We're going to select all five of these
images.
| | 00:48 |
Go ahead and Shift+Click or click and
drag to select all five.
| | 00:52 |
And we're doing something called
multi-files plates.
| | 00:56 |
So with all those selected, click the
Open button, and you now get a cursor
| | 00:59 |
loaded with all five of those files.
I'm going to start by clicking at the
| | 01:03 |
intersection of the margin and the guides
here on the page.
| | 01:07 |
And then, if I click and drag, I'm
placing one frame or one image.
| | 01:12 |
But if I press the right arrow key, I'm
now building two columns, two frames, or
| | 01:16 |
two images.
Press the right arrow key a second time,
| | 01:20 |
a third time.
Finally, a fourth time, so I'm building
| | 01:24 |
five frames simultaneously.
I'm going to click and drag over here to
| | 01:28 |
the margin.
I'm sorry, to the guide over here.
| | 01:32 |
And I've built the five frames.
Now, let's go ahead and fill the frames
| | 01:36 |
with the content, and go into my Options
Bar at the top of my screen.
| | 01:40 |
And just above where it says Autofit, I'm
going to click once.
| | 01:43 |
Now, those images fill those five frames.
Now, what I want to do is build one
| | 01:49 |
slideshow with five different images.
And the way we build one thing out of
| | 01:55 |
five is by building something called a
multi-state object.
| | 01:59 |
Now, I want these images to appear in the
same place, so I need to align them.
| | 02:04 |
Let's go to the Window menu, let's come
on down to Object.
| | 02:08 |
Choose a line, and then a line, a left
edge.
| | 02:11 |
So now, we see one of the five selected
objects.
| | 02:15 |
We're going to go ahead and click and drag
them up over here.
| | 02:18 |
And now, we're going to stretch all of
them.
| | 02:21 |
Now, I'm going to use my keyboard a little
bit here as I do this.
| | 02:24 |
This is going to toggle a couple of
preferences or options as I do this.
| | 02:28 |
I'm going to click on the corner and hold
the Command or Ctrl key.
| | 02:33 |
This is going to scale the frame and the
content.
| | 02:35 |
I'm also going to hold the Shift key, that
maintains the proportion.
| | 02:39 |
So, with those two keys pressed, I now
releas.
| | 02:41 |
And now, all five of those images have
been scaled simultaneously.
| | 02:45 |
Now, I'm going to click away and prove that
to you, and see, I can pull those images away.
| | 02:50 |
You don't need to pull them away.
I'm going to undo those two and select all
| | 02:54 |
five of them again.
And now, let's go to the Objects State
| | 02:58 |
panel over on the right-hand side of my
screen if you're using my work space.
| | 03:03 |
Or, you can go to the Window menu, choose
Interactive, and then choose Objects States.
| | 03:09 |
So with five things selected here, I'm
going to click the New button, and I've
| | 03:13 |
just built a new multi-state object.
Let's go ahead and be good here.
| | 03:19 |
Let's name this, call it slides.
Just like that.
| | 03:22 |
That'll help a little bit later when we
do some additional things.
| | 03:25 |
And now, we need to make this an
Interactive Overlay, so let's open up
| | 03:29 |
that Interactive Overlay panel.
And this is what really makes me happy,
| | 03:35 |
there's only one thing that a multi-state
object can be and that's a slideshow.
| | 03:41 |
Now, sometimes, we call a multi-state
object an MSO, so that's what you hear
| | 03:44 |
sometimes when we're talking really fast.
Now, a slideshow could autoplay.
| | 03:48 |
And then, I could choose to start playing
after a delay and progress through the
| | 03:50 |
slides at a certain rate.
Or I, I choose to allow users to swipe to
| | 03:53 |
change the image and stop at the first or
last.
| | 03:57 |
I can add a cross-fade here.
Nice little subtle quality to it and
| | 04:05 |
other options that make you a really
happy design person.
| | 04:15 |
So, I'm going to click Preview now.
Let's take a look at this in the Adobe
| | 04:19 |
Content Viewer.
So now, we can see the first image, and
| | 04:23 |
if I click and drag, we switch between
them and you see the cross-fade.
| | 04:27 |
We're going to go ahead and close that Folio
and let's select this again.
| | 04:33 |
Let's go with an auto play.
Let's do a delay 1 second.
| | 04:38 |
I'm sorry, an interval of 1 second, and
let's preview and see how that's different.
| | 04:45 |
So the Content Viewer comes back up and
we see the images switch automatically
| | 04:49 |
with no user input required either.
So, those are a couple of basics for how
| | 04:55 |
to build a slideshow.
Really nice, really simple to build.
| | 05:05 |
| | Collapse this transcript |
| Slideshow buttons| 00:02 |
So, let's go a bit deeper into a
multistate object-based slideshow and
| | 00:06 |
open up one of the start files, this is
going to be in the Articles Start folder.
| | 00:13 |
In the Overlays folder, I'm going to open up
overlayslideshow02_h.
| | 00:18 |
Now, what we have here already is a
multistate object.
| | 00:22 |
If I go and take a look at the Multistate
Objects panel, we can see the object has
| | 00:26 |
a name, the states have generic names.
What I want to do is convert the squares,
| | 00:32 |
the the artwork on the left-hand side of
this layout into buttons that make the
| | 00:36 |
multistate object change states.
So, super easy to do.
| | 00:43 |
All I've done here is drawn a little
piece of artwork, sort of a, a shape
| | 00:46 |
inside of a square.
The two things are grouped together,
| | 00:49 |
that's how easy it is to build artwork.
Now, with the buttons panel, I click New
| | 00:54 |
button and I've converted this art to a
button.
| | 00:58 |
Let's give it a good name.
This is going to go to the previous state.
| | 01:02 |
So, let's call it Previous.
Naming your buttons is always good
| | 01:05 |
because it's going to help you remember what
they are supposed to do later on.
| | 01:09 |
Now, let's take this button, the Events
with DPS work on release.
| | 01:14 |
The action we want to add is to go to the
previous state.
| | 01:19 |
When you select that action, you see a
list of the multistate objects that are
| | 01:23 |
in this document.
Slides is the only MSO, so that's the one
| | 01:27 |
we want to work on.
By the way, MSO is multistate object,
| | 01:31 |
it's a piece of slang a lot of us use.
And now, let's build the second button.
| | 01:37 |
So, I'm going to select the group, click the
New button command.
| | 01:41 |
Let's call this one Next, and on release,
the action will be go to the next state
| | 01:46 |
of the object called slides.
That's how easy it is to build a button
| | 01:52 |
that makes a Slideshow function.
So, let's go to the Overlay Creator
| | 01:57 |
panel, let's click Preview, and let's see
how those work.
| | 02:01 |
So, here we are in the Content Viewer and
when I click on the buttons, the states change.
| | 02:07 |
We go to the previous or the next one,
and because of the options that I set in
| | 02:11 |
the Overlay Creator panel, I can go right
around through the whole stack of slides
| | 02:14 |
and come on back around to the first one
again.
| | 02:19 |
So, that's an example of building nice
simple button actions to go to the
| | 02:23 |
previous and next states.
But let's go a little bit deeper this time.
| | 02:28 |
Let's go a little bit farther into this
idea and let's build some additional programming.
| | 02:33 |
So, I'm going to go to the Object States
panel.
| | 02:36 |
I'm going to change the names of these
states, so what I'm going to do is
| | 02:39 |
triple-click, and the first image is
Beets.
| | 02:43 |
Let's rename that one.
Let's go to State 2, I'm going to triple-click.
| | 02:48 |
Let's change this one to Tomatillos.
Let's go to State 3 and triple-click.
| | 02:56 |
This is Asparagus.
Let's go to State 4, triple-click the name.
| | 03:04 |
This is Leeks.
And the final state, State 5.
| | 03:09 |
I go up triple-click and this is
Radishes.
| | 03:12 |
All right, so now, we've named the states
of a multistate object.
| | 03:17 |
Which ever state is currently selected in
the Object States panel is what we see here.
| | 03:22 |
It's always good to know that you go to
the Flyout menu, let me pull this panel
| | 03:26 |
on screen so we can see the Flyout menu.
There's a Flyout menu command called
| | 03:31 |
Reset All Multistate Objects To First
State.
| | 03:34 |
This is a really good command to reset
your view of the document to show you
| | 03:38 |
what people will see initially.
I'm going to move that Multistate Object
| | 03:43 |
panel back over to the right-hand side,
and it'll keep working.
| | 03:46 |
So, what I really want to do is add up a
little bit of a cherry on top here.
| | 03:51 |
What I want to do is build a series of
buttons that are the images and let
| | 03:55 |
people switch to the image they want to
by clicking on a little thumbnail.
| | 04:01 |
So, to do this, what we're going to do is
go ahead File > Place.
| | 04:05 |
We're going to go find the same file we used
for the main slideshow, going to select all
| | 04:09 |
five of those, and remember the trick
about doing multifile place.
| | 04:15 |
This time, I'm going to Click and Drag and
I'll press the Up arrow.
| | 04:17 |
The Up arrow adds rows.
I'm going to click the Up arrow four times.
| | 04:22 |
This is going to give me all five of the
images placed in these little frames and
| | 04:26 |
let's make sure they're the width of that
space.
| | 04:30 |
And now, let's fill them again.
So, that was really easy to do.
| | 04:35 |
Now, let's build the buttons.
I'm going to select the first frame at
| | 04:38 |
the top.
This is the Radishes.
| | 04:39 |
Let's go to the buttons panel, create a
New button, and on release, we want to go
| | 04:44 |
to a state.
Now, we see the states, the objects slides.
| | 04:50 |
The state for this is going to be Radishes.
So, what you do is plain select an
| | 04:55 |
object, convert it to a button, add the
action, go to a state, the second one is
| | 05:00 |
the Leaks, let me go ahead and chose
that.
| | 05:05 |
I'm going to select the third one, button on
Click.
| | 05:10 |
We're going to go ahead and Go To State,
this is the Asparagus.
| | 05:15 |
There we go.
We build a fourth button.
| | 05:18 |
Go to the Tomatillos, excellent.
And now, the fifth button.
| | 05:28 |
This button is going to go to the state,
Beets.
| | 05:34 |
All right, so we've built five buttons.
And if we were to go to the Overlay
| | 05:39 |
Creator panel and click Preview, when we
look at this in the Content Viewer, now
| | 05:43 |
we see the five icons and the five
graphics over here.
| | 05:48 |
And when I click on one of these, we go
to exactly that state of the multistate object.
| | 05:55 |
So, this is sort of a nice way of giving
people a way to look through the content
| | 05:59 |
and go to the place that they want to.
Now, we're going to go one step deeper a
| | 06:04 |
little bit longer here, and let's add a
little bit of Feedback to this.
| | 06:09 |
Now, the way we're going to build the
Feedback is select each of these buttons
| | 06:12 |
one at a time.
We're going to select the Radishes first.
| | 06:16 |
I'm going to add a Click State to this
button.
| | 06:20 |
And now, I'm going up to the top edge of
my screen and we're going to build a Stroke.
| | 06:24 |
Let's put a four-point stroke.
Let's make that stroke Solid, and let's
| | 06:29 |
make that stroke Red, that's nice and
visible.
| | 06:33 |
So, by adding a Click State, it's now
going to pick up the second one, add the
| | 06:39 |
Click State, let's put a stroke 4 pixels
and make it red.
| | 06:46 |
We're changing the visible feedback on
the object and add the Click State, the
| | 06:51 |
width, and the color, excellent.
Fourth one, here we go, Click State, 4
| | 06:58 |
pix, Red, and so on.
What's cool about the Click State is when
| | 07:03 |
the multistate object is showing that
state, it will also show the Click State
| | 07:08 |
of the matching button.
So, I'm going to press W on the keyboard,
| | 07:14 |
you can see the red border on all five of
those buttons.
| | 07:19 |
If, remember how we had the reset the
multistate object?
| | 07:24 |
We can also go to the buttons panel,
let's pull it over to center screen and
| | 07:28 |
let's Reset All buttons To Their Normal
State, no red edge, excellent.
| | 07:33 |
And now, let's go to the Overlay Creator
panel and Preview.
| | 07:37 |
What's cool about this little trick at
the Click State is it gives feedback.
| | 07:42 |
So now, if a user clicks on the Leeks, we
see the red edge to the Leek button, then
| | 07:46 |
go to the Tomatillos, we see the red edge
here, or go to the Asparagus, like so.
| | 07:53 |
This also works if you use the buttons.
So now, as I click the arrows at the top,
| | 07:58 |
we see which of the images is active.
So, those are the tricks, and that's how
| | 08:04 |
you build multistate objects into
slideshows, add buttons to help with the
| | 08:07 |
navigation and add buttons to go to the
specific parts of the slideshow.
| | 08:13 |
I love building this stuff.
It's so easy.
| | 08:16 |
Thanks.
| | 08:20 |
| | Collapse this transcript |
| Intro to panoramas| 00:02 |
So, let's take a look at building
Panoramic Images.
| | 00:04 |
Now, what we're going to build is this
Overlay.
| | 00:08 |
And if I go into the Overlay Creator and
preview this, I want to give you a sense of
| | 00:12 |
what this panorama experience is like.
Here's my document, here's my layout.
| | 00:19 |
And if I click on this piece of
interactivity, I go full screen on the
| | 00:23 |
device and now by Clicking and Dragging,
I can look in most any direction.
| | 00:28 |
Now at the moment, this Overlay has a
limitation, I can't go up or down in it,
| | 00:33 |
that's because I've restricted how the
user can experience space.
| | 00:39 |
So, let's take a look at what goes into
this, and then we'll take a look at
| | 00:43 |
building it.
So, let's leave the Content Viewer, let's
| | 00:47 |
come on back over to InDesign, let's
close the example file, and let's take a
| | 00:50 |
look at what goes into this.
I'm going to show you what goes in by going
| | 00:55 |
to the Bridge and show you some source
documents for this.
| | 00:59 |
In the video2brain Bonus Files Folder,
there's a Panogarden JPEG.
| | 01:06 |
This is the image which is the source of
that panorama.
| | 01:10 |
This was shot with a tripod, a camera,
nice wide-angled lens, a shot at all
| | 01:14 |
Manual Exposure so that the images would
blend together nicely.
| | 01:19 |
And then, I brought those multiple images
in using Photoshop and stitched them altogether.
| | 01:26 |
Eventually, I crop them so the left and
the right edge of this image are the same
| | 01:30 |
place, and I save the JPEG.
Now, this file, all by itself, doesn't
| | 01:35 |
make that panel work.
What I need to do is convert this image
| | 01:40 |
into a series of six smaller images.
Those images would be the, the projection
| | 01:46 |
of this environment on the inside of a
box.
| | 01:50 |
And that box is where the user is
standing.
| | 01:53 |
So, this is the basis for a series of
files, and let's take a look at those files.
| | 01:59 |
Then we'll talk about building them.
So, I'm going to go into the Shared Links
| | 02:03 |
folder in the Link Overlays.
And there's a folder in here called Panorama.
| | 02:09 |
Inside of this folder, you see those six
files.
| | 02:13 |
I take a look at these full screen, we
can see this is one face of that box that
| | 02:16 |
I'm standing inside of, and if I turn to
the right, here's the next face of that box.
| | 02:22 |
Now, I'm looking in the opposite
direction of the first image and finally,
| | 02:26 |
at the fourth side of the box.
If I look up, that's what I see above me
| | 02:31 |
and if I look down, here's the ground
beneath me.
| | 02:35 |
So, these six images are what's required
for a Panoramic Overlay in the DPS tool set.
| | 02:42 |
So, how do I get to these six images?
Well, what I do, is I start with that JPEG.
| | 02:48 |
And what I do is I run a piece of
software that converts images into Panoramas.
| | 02:54 |
Now, this particular piece of software
that I use, is called Pano2VR.
| | 02:59 |
And this piece of software which is not
an Adobe product and it's not part of the suite.
| | 03:04 |
I found it's a really nice tool to do
these conversions.
| | 03:07 |
So, I select a file for input and then go
and choose that Gardenpano JPEG.
| | 03:13 |
Open it up.
And what we see here is a file ready to
| | 03:17 |
go, and what I need to do is convert this
from the stitched panoramic into a
| | 03:21 |
different format.
The format I need is Hume Faces.
| | 03:27 |
Those are the six faces, I'm going to change
the width and the height, maybe make it
| | 03:32 |
about a 1,000 pixels tall.
I'm going to work in JPEGs, and I'm going to
| | 03:37 |
save this as an example, the desktop of
my machine in a folder called Pano Images.
| | 03:43 |
So, I click Save, I click Convert.
And now, Pano2VR has just built that new
| | 03:48 |
set of images, let's go take a look at
them on the desktop, Pano Images, and
| | 03:53 |
here are the six images.
Now, you can tell that I had patched the
| | 03:59 |
sky and the grass in my fifth and sixth
image in the Example Files.
| | 04:04 |
So, that's how I build the materials that
go into a panel.
| | 04:08 |
We'll take a look at building a panel in
a moment.
| | 04:14 |
| | Collapse this transcript |
| Building a panorama overlay| 00:02 |
Okay, let's take a look at building
panorama overlay.
| | 00:05 |
I'm going to open the digital publishing
folder and go to Articles > Start >
| | 00:08 |
Overlays, and let's double-click to open.
Overlay panorama_h.
| | 00:15 |
This is the InDesign document where I'm
going to build this panoramic overlay.
| | 00:19 |
We're going to start by building a
container.
| | 00:21 |
I'm using the Frame tool.
I'm going to click and drag, and build a
| | 00:24 |
frame right here in the middle of the big
white space.
| | 00:27 |
This frame is going to serve as the
container for this overlay.
| | 00:30 |
Let's move over to the Overlay creator
panel now, and you'll notice that
| | 00:34 |
panorama is one of the options available
for an empty frame.
| | 00:38 |
The word Panorama is not italicized.
We're going to click Panorama to go into the
| | 00:43 |
Panorama dialog.
And now we need to load the images that
| | 00:46 |
we've created for the six faces of the
cube, which is what the Panorama uses for
| | 00:50 |
the interactivity.
We're going to click the folder here to load
| | 00:55 |
the images, and now I'm going to go to the
desktop of my machine.
| | 00:59 |
Into the Digital publishing folder >
Shared links > Links > Overlays.
| | 01:03 |
I'm going to choose the Panorama folder.
When you load files, in this particular
| | 01:08 |
case, you point to the folder which holds
the images.
| | 01:12 |
So with Panorama selected, click Open,
and now we've got first image as the
| | 01:16 |
poster frame and some initial settings
for how this Panorama works.
| | 01:22 |
Let's take a look at what this gives us.
I'm going to click the Preview button, at
| | 01:26 |
the bottom of the Overlay Creator panel,
and now I see the layout in the content viewer.
| | 01:31 |
I see that initial image, and if click on
it, now I get the interactive overlay,
| | 01:36 |
which allows a user, to look in any
direction they want within this environment.
| | 01:42 |
We are taking a look at the Adobe Campus
right here, you can look up in the sky
| | 01:47 |
you can also look down at the ground.
On a tablet, I can use a pinch gesture to
| | 01:55 |
zoom in or zoom out.
Now, when I'm working in the content
| | 01:59 |
viewer, I can't gesture that way.
But I can press the+key to zoom in and
| | 02:04 |
I can use the - key to zoom out when I'm
using this panorama overlay.
| | 02:09 |
So, let's close this and let's take a
look back in inDesign at some of the
| | 02:12 |
options for this type of overlay.
The initial zoom is the initial focal
| | 02:18 |
lenght or how zoomed in you are when the
overlay is initially triggered.
| | 02:23 |
It's not going to afffect what I see in
the layout of this first image poster.
| | 02:29 |
Now I can also specify a vertical and
horizontal position for the intial view.
| | 02:35 |
Now we just saw how when I triggered the
panorama, we were looking at this
| | 02:40 |
particular view that we see in the first
image poster.
| | 02:45 |
As an example, let's look in the opposite
direction.
| | 02:48 |
I'm going to change this to 180, that's
going to be 180 degrees, or the opposite
| | 02:52 |
direction of this, and now let's go ahead
and preview this.
| | 02:57 |
And we'll see the results of that change.
So, here we are in the content viewer I'm
| | 03:02 |
going to click to trigger this and now I'm
looking the opposite direction.
| | 03:06 |
Now normally I wouldn't consider using
that as the first way to introduce
| | 03:10 |
somebody into the panorama.
I think it's a whole lot nicer to have
| | 03:14 |
them trigger the panorama and be looking
the same direction as the initial image.
| | 03:19 |
But this is an example of one of the
options that you have.
| | 03:24 |
Now one of the nice tricks you can pull
is limiting the vertical pan values.
| | 03:29 |
I was able to look all the way up in the
sky, or look all the way down on the
| | 03:32 |
ground, there was no limit to where I
could look vertically in this image.
| | 03:38 |
If I don't have a sky image, or I don't
want people to look at the ground, one of
| | 03:42 |
the cool tricks you can pull is to limit
how people can look.
| | 03:47 |
So this could be limiting the vertical
range, or limiting the horizontal range
| | 03:51 |
for they're panning.
For instance, maybe you don't have an
| | 03:55 |
image of the sky, or you don't have an
image of the ground, so you don't want
| | 03:58 |
people to look too far up or down You
could limit the vertical pan.
| | 04:03 |
So, I'm going to put 1 in both the up and
down values of the vertical limit.
| | 04:09 |
The result, if we take a look at the
preview, is going to be the panorama
| | 04:13 |
where people can look in any direction as
long as it's horizontal.
| | 04:18 |
So I can spin in any of these directions,
I cannot go up or down.
| | 04:22 |
I can still zoom, I can zoom out a bit,
but this is one way to avoid a hole in
| | 04:28 |
the sky, or a hole in the ground.
You might also note that in the Overlay
| | 04:35 |
creator you can limit the horizontal pan.
So this is one way for you to limit the
| | 04:40 |
direction that people look in so that
they don't see the unsightly construction
| | 04:44 |
site behind the builiding or behind the
photographer.
| | 04:49 |
So that's how easy it is to build the
panorama.
| | 04:52 |
Simply build a frame, load the images for
the panorama into it.
| | 04:57 |
And then choose how the user can interact
with the graphic.
| | 05:00 |
There you go.
| | 05:05 |
| | Collapse this transcript |
| Building an audio skin| 00:02 |
When you use audio files in a DPS
publication, you can have a standard icon
| | 00:06 |
or you can build custom icons to show or
represent the fact that there's an audio
| | 00:10 |
file that can be played.
You have a third option, which is to
| | 00:15 |
build a custom audio skin, and that's
what we're going to talk about building in
| | 00:18 |
this video.
So, let's open up the Digital Publishing
| | 00:22 |
folder where all of our assets are.
Let's go into the video to bring bonus
| | 00:26 |
files folder, and this is where you find
the audio skin start file.
| | 00:32 |
Go ahead and open this up.
I'm working with Photoshop Extended, and
| | 00:35 |
that's because I want to animate the
output of this file.
| | 00:40 |
Extended includes things like the
animation panel, which is what I'm going
| | 00:45 |
to use to build the animation, and the
ability to export video.
| | 00:51 |
I'm going to export a series of still images
using that command for our custom skin.
| | 00:57 |
So, if we take a look at the Photoshop
file, you'll see that there's an object,
| | 01:00 |
which is the Play button.
I have a separate layer, which is the
| | 01:04 |
Pause button.
And then, I have a third layer with some
| | 01:07 |
graphics going across the bottom in this
canvas.
| | 01:10 |
And this is going to be the Progress Bar.
So, what I need to do is work in the
| | 01:14 |
Animation panel, and build the animation.
With the Animation panel open, I can use
| | 01:20 |
the Flyout menu here.
And what I want to do is control qualities
| | 01:24 |
of the document, so that I get the right
number of images for my animation.
| | 01:29 |
So, if I go to Document Settings, I can
choose the duration and the frame rate to
| | 01:34 |
help control the output.
I like the frame rate of 30 frames per
| | 01:39 |
second, that'll give me some nice smooth
animation.
| | 01:42 |
But if I use 1 seconds worth of time,
that means when I export, I'll get those
| | 01:47 |
30 frames, and only those 30 frames.
That sounds like a really good idea to me.
| | 01:53 |
So, I'm going to click OK.
And now, as I take a look at the Timeline
| | 01:57 |
if I move the current time indicator, we
can go as far back as zero.
| | 02:02 |
And I can scrape it all the way up to 29
frames or one seconds worth of time.
| | 02:08 |
I'm going to take that current time
indicator all the way back to zero.
| | 02:12 |
And you can see, the three objects from
my Layers panel here.
| | 02:16 |
And the bottom most object, that Progress
Bar, is currently twirled open.
| | 02:22 |
What I want to do is animate the position
of that lowest vector object.
| | 02:27 |
So, I click the little stopwatch here.
And that adds the diamond, which is a keyframe.
| | 02:32 |
Now, I need to move that object into a
place which would be a start position.
| | 02:37 |
So, I'm going to hold the Shift key.
Just plain move that artwork off screen,
| | 02:42 |
off the canvas, at the time zero.
Now, let's move that current time
| | 02:47 |
indicator all the over to the right and
what I want to do is animate the position
| | 02:51 |
of the object, that layer.
And hold the Shift key down again, drag
| | 02:57 |
it on over.
And now, when I scrub the play head or
| | 03:00 |
move that current time indicator, you can
see the animation of that bar.
| | 03:06 |
So, that's how I build a little bit of
animation using Photoshop Extended.
| | 03:11 |
We see the position with two keyframes,
one at the beginning, one at the end.
| | 03:16 |
Now, it's a matter of exporting this
animation.
| | 03:19 |
I'm going to do this by going to the File
menu, choose to Export, and Render Video.
| | 03:24 |
Again, this is a command from Photoshop
Extended.
| | 03:28 |
Now, let's build a New Folder.
We're going to go to the Desktop of the
| | 03:32 |
machine, and let's build one.
Let's call this Audio Skin.
| | 03:38 |
So, the output will go into this folder,
what do we want to call this?
| | 03:43 |
Well, this is going to be the Pause
Piece, so we're going to go audioSkin_Pause.
| | 03:48 |
And what I want to build is an image
sequence of PNG files.
| | 03:52 |
I'm choosing PNG, so that I can have
transparency and my icons could sit on
| | 03:56 |
any colored background.
Now, it's going to go out as the document
| | 04:00 |
size of 60 by 79 pixels.
And we're going to go ahead and use a
| | 04:04 |
straight unmatted alpha channel.
So now, I click Render, and Photoshop has
| | 04:09 |
just built those 30 files.
If I go to the bridge and I take a look
| | 04:13 |
at the Desktop on my machine, here's the
new audio skin folder, and here are all
| | 04:18 |
the icons.
Notice the Progress Bar moving from the
| | 04:23 |
left to the right as we go through those
icons.
| | 04:26 |
Excellent.
So, that's half of the Skin.
| | 04:30 |
Go back over to Photoshop.
Let's turn off the Pause and turn on the
| | 04:34 |
Play layer.
And Export again.
| | 04:38 |
Render the video.
Settings are sticky.
| | 04:40 |
Let's just change the file name.
This is going to be audioSkin_play.
| | 04:46 |
We're going to export those.
And now, if I hide Photoshop and I take a
| | 04:49 |
look at the bridge we're going to see here
are all the play icons as well.
| | 04:54 |
So I now have 60 frames, 60 images, with
very specific names.
| | 05:00 |
But I need to have really specific names
for this audio skin to work.
| | 05:05 |
Let's make the icons a little bit
smaller, and let's rename these files.
| | 05:10 |
I'm going to select all of the pause
icons first So I Shift clicked here in
| | 05:14 |
Bridge, select all of these and in Bridge
I use the Batch Rename command.
| | 05:21 |
And what I want to do is Insert Text.
I'm going to insert audio.
| | 05:24 |
I want to insert a sequence number, let's
start with the number one.
| | 05:29 |
The sequence number is critical.
It's part of the name to make the skin work.
| | 05:34 |
Now, these are the Pause icons, so I need
to insert the text, underscore pause.
| | 05:40 |
So a combination of the number and the
word, pause, will indicate that the skin
| | 05:45 |
does a certain thing.
So the new filename system is going to be
| | 05:50 |
Audio, a number, underscore pause, PNG.
Let's go ahead and rename all of those.
| | 05:56 |
And now, let's go ahead and rename all of
the Play icons.
| | 06:00 |
Go back over into Bridge, select them
all, go to Batch Renam.
| | 06:04 |
And now, we're going to go out with
starting with number one, but we're going
| | 06:09 |
to change this from pause to play.
So now, I have a series of files with a
| | 06:16 |
number and a word, pause or play, in
order.
| | 06:21 |
And this is the custom playback skin.
We'll use this in the audio section and
| | 06:28 |
you'll see the results.
| | 06:32 |
| | Collapse this transcript |
| Audio overlays| 00:02 |
Including audio in a DPS publication
really adds an extra value to the reading experience.
| | 00:08 |
It might be an author reading a portion
of the publication, or it might be an
| | 00:12 |
environmental sound that gives ambiance
to an experience.
| | 00:16 |
Let's take a look at adding audio to a
DPS publication.
| | 00:19 |
Let's go into the digital publishing
folder.
| | 00:22 |
Articles > Start > Overlays, and we're
going to open overlayaudio_h.
| | 00:29 |
This is the file I'm using for both audio
and video, but we're just going to focus on
| | 00:33 |
the audio.
Now adding audio is really easy.
| | 00:37 |
It's simply a matter of File > Place You
then go find you assets, I'm going to go
| | 00:41 |
into the Digital publishing folder >
Shared links > Links overlays > Audio.
| | 00:48 |
This is where we see the three mp3 files
we're going to use.
| | 00:52 |
And today in DPS you use an mp3 file for
audio.
| | 00:56 |
I'm going to select baseline.mp3, click
Open, and then click and release my mouse
| | 01:00 |
at the intersection of guides here in my
layout.
| | 01:04 |
Now, one of the funny things about sound
in a design environment is sound does not print.
| | 01:10 |
Sound isn't visible.
So, if I go into Preview mode There's no
| | 01:14 |
indication that there's a sound here no
indication of interactivity.
| | 01:19 |
And as a designer I should be polite and
thoughtful about my readership and
| | 01:23 |
indicate something is going on here.
So if I select that sound and go to the
| | 01:27 |
Media panel over on the right-hand side
of my screen or by going Window >
| | 01:31 |
Interactive and choosing Media.
This is where I can control the poster.
| | 01:37 |
I'm going to switch this from none to
standard.
| | 01:40 |
And now I get the standard icon of a
speaker and some sound waves coming out.
| | 01:45 |
Back into preview mode, now I have an
indication of something going on here for
| | 01:49 |
my reader.
Let's take a look at another set of options.
| | 01:53 |
Let's File > Place, and I'm going to choose
medium.mp3 this time.
| | 01:57 |
I'm going to click and release the second
intersection of guides here and let's
| | 02:02 |
change the poster from None to Choose
Image.
| | 02:06 |
This allows me to select and load a
custom graphic.
| | 02:10 |
I'm going to go to the Digital publishing >
Shared links > Links overlays > Audio >
| | 02:14 |
Audio skin folder.
And this is where I've build a series of
| | 02:19 |
graphics for the custom playback skin
that we're going to use in a couple of minutes.
| | 02:25 |
I'm going to select audio01play.png this
graphic is going to represent the idea
| | 02:30 |
that there is a sound here.
My custom design rather than the generic poster.
| | 02:37 |
I'm going to select and open it.
And now I get a representation using line
| | 02:41 |
design work instead of the generic design
work.
| | 02:45 |
It's built into InDesign.
So, let's go and add the third sound.
| | 02:51 |
Click file, place one more time.
I'm going to select all tracks.mp3.
| | 02:55 |
I'm going to click Open, and I'm going to click
at the third intersection down here.
| | 02:59 |
Now if you take a moment and you peek up
at the Options bar, you're going to notice
| | 03:03 |
the width and height are both 60 pixels.
This is the generic or default dimension
| | 03:08 |
of audio files when they're placed into
InDesign.
| | 03:12 |
That works great if you know that and you
design to it, or you use the standard poster.
| | 03:18 |
The audio skin that I want to put on this
third sound is 60x79 pixels.
| | 03:25 |
So I need to adjust the dimensions here.
I'm going to do this by going to the Height
| | 03:30 |
value, and I type 79 pixels in there, and
now we see the frame has been extended downward.
| | 03:36 |
But the audio object inside is not 79
pixels.
| | 03:41 |
It's still 60 pixels.
So my skins which match the dimension of
| | 03:45 |
the object, not the container, would be
squished.
| | 03:49 |
So I need to adjust this.
I'm going to do that by going up into the
| | 03:53 |
Options bar again, and I'm going to click
the Fit Content to Frame button, and now
| | 03:57 |
the content is also 79 pixels.
So, so far I've been adding these poster
| | 04:03 |
frames in the Media panel.
Since I'm adding a Custom Controller, and
| | 04:08 |
this is a unique quality of DPS, I need
to control this by going to the Overlay Creator.
| | 04:15 |
Since an Audio Object is selected, the
only thing it could be in the way of
| | 04:18 |
overlays is Audio.
And that's why we're already in at the
| | 04:23 |
Audio and Video portion.
This is Audio, I want to load controller
| | 04:27 |
files or a custom skin.
So I click the folder, and now I navigate
| | 04:31 |
to my assets.
So I go Digital publishing > Shared links
| | 04:35 |
> Links overlays > Audio, and now I point
to the folder that contains the assets.
| | 04:42 |
This is a series of .png files.
They're numbered sequentially, and they
| | 04:47 |
have both the words Play and Pause to
indicate the two modes of, you can play
| | 04:52 |
this, or this is currently paused.
So I click Open.
| | 04:57 |
Those controllers are now loaded.
I can choose to auto-play here as well
| | 05:01 |
after a delay.
So now let's go take a look at the
| | 05:05 |
preview and see what we've built.
So here in the content viewer we see all
| | 05:10 |
three of the audio icons.
We see the standard one at the top.
| | 05:15 |
If I click it will play, if I click again
it will pause.
| | 05:19 |
(music playing) So here is the audio playing.
(music playing) I'm going to go ahead and click on
| | 05:24 |
it now, and pause it.
It entices users to click.
| | 05:28 |
In the second area I'm using a custom
icon.
| | 05:31 |
(music playing) And again, I can click to play,
and when I click a second time, it pauses
| | 05:35 |
the audio.
Now on the third example, this is the
| | 05:39 |
custom skin.
So, when I click to play (music playing) we get
| | 05:42 |
the switch over to a different graphic,
It tells people that they could click
| | 05:46 |
again to pause.
You see the progress bar moving forward
| | 05:51 |
and if I go ahead and click again.
We end up getting the indication that we
| | 05:55 |
can play this and we're part way through
this already so if I click again.
| | 06:00 |
(music playing) it continues from where I had
paused it a moment ago.
| | 06:05 |
So there's an example of how you can use
audio in a DPS publication.
| | 06:10 |
And how you build standard graphics, work
with custom graphics and build custom
| | 06:16 |
controllers for your audio.
| | 06:20 |
| | Collapse this transcript |
| Video overlays| 00:02 |
Including video in a DPS publication adds
extra value to the experience.
| | 00:07 |
Let's take a look at how easy it is to
add video.
| | 00:10 |
I'm going to open the Digital Publishing
folder > rticle Start > Overlays, and
| | 00:15 |
let's go ahead and select and open
overlayvideo_h.
| | 00:19 |
This is the layout I'm using for both
audio and video.
| | 00:23 |
But we're just going to focus on the video
part.
| | 00:26 |
Adding video is super easy in InDesign.
It's simply a matter of choosing File >
| | 00:31 |
Place, and then navigating to and finding
your content.
| | 00:35 |
So I'll go to Digital Publishing > Shared
Links > Links to Wheels.
| | 00:40 |
I'll scroll on down, I'm going to find the
folder called Paladin Video.
| | 00:45 |
Inside this folder is an MP4 file, this
video was encoded using H.264.
| | 00:52 |
This is the current video standard
supported by DPS.
| | 00:55 |
So I choose the MP4 file, I click Open.
I have a loaded cursor now, and now, it's
| | 01:02 |
simply a matter of clicking at the
intersection of those guides and the
| | 01:05 |
video is placed.
InDesign takes a look at the video and it
| | 01:09 |
picks up the the first frame by default
to represent the video in the Design Layout.
| | 01:15 |
Now, this skyline isn't particularly
inspiring to me.
| | 01:18 |
It doesn't tell me about the video.
So I think I want to choose a different
| | 01:22 |
image to represent the video.
The way you do this is by using the Media
| | 01:27 |
panel in InDesign.
The video is selected.
| | 01:31 |
I'm going to go to the Media panel on the
right-hand side of my screen.
| | 01:34 |
(UNKNOWN) on over there if you're using
my V2B DPS workspace or you can go to the
| | 01:39 |
Window menu, choose Interactive, and
select Media.
| | 01:44 |
In the Media panel, you can play the
video, you can watch the video, pause it
| | 01:48 |
and scrub it.
I can move forward a little bit, start to
| | 01:52 |
play it again.
If I want to, I can turn the audio back on.
| | 01:57 |
> > A hero is more than.
> > And I'll mute it.
| | 02:00 |
And I can scrub and I can play this until
I find the part of the video where the
| | 02:04 |
words come together.
This is right up around 57 seconds, maybe
| | 02:09 |
58 seconds.
And I think this is a really nice
| | 02:12 |
representation of the video from the
Design Layout.
| | 02:16 |
So, with the cursor, with the time
indicator, pulled the forward to about 58 seconds.
| | 02:22 |
I'm going to change the poster frame.
It's currently set to Current Frame, and
| | 02:26 |
I'm going to reload the Current Frame as
the poster, we see the change in the Layout.
| | 02:32 |
So some qualities of what video looks
like are controlled in the Media panel,
| | 02:38 |
primarily the poster frame.
In DPS, there are a couple of additional
| | 02:43 |
controls that are offered in the Overlay
Creator panel.
| | 02:47 |
This is where I can turn Autoplay on,
force full-screen playback, and allow the
| | 02:52 |
user to tap to view a controller.
Any control options offered in the
| | 02:57 |
Overlay Creator panel for video supersede
any choices that are similar in the media panel.
| | 03:04 |
So, in the DPS workflow, the Overlay
Creator panel wins.
| | 03:09 |
So, I've turned Tap to view controller
on.
| | 03:12 |
Let's go ahead and preview this and see
what video looks like in the Content Viewer.
| | 03:17 |
So there is the poster frame, tells me
what the video is about.
| | 03:21 |
And if I click, the video plays.
If I pause, that video controller
| | 03:26 |
disappears, and if I click again, it
comes back up.
| | 03:31 |
I can go ahead and mute the video and I
can scrub the video forward or backward
| | 03:37 |
if I want.
So that's how easy it is to add video to
| | 03:43 |
a DPS publication.
Simply a matter of having the asset and a
| | 03:49 |
H.264 MP4 encoded file and place it.
Have fun with this.
| | 03:55 |
It's super easy.
| | 03:59 |
| | Collapse this transcript |
| Pan and zoom overlays| 00:02 |
A Pan and Zoom Overlay allows your reader
to pinch and zoom gestures on a tablet to
| | 00:07 |
move into an image and then to move
around inside of the image.
| | 00:12 |
This is an experience with a flat image.
It's a way to explore a graphic.
| | 00:18 |
And it's very different than a panoramic
image which allows people to look in
| | 00:21 |
different directions.
Let's take a look at building Pan and Zooms.
| | 00:26 |
I'm going to open the Digital Publishing
Folder > Articles > Start > Overlays, and
| | 00:31 |
I'm going to need to choose and open
OverlayPanZoom_h.
| | 00:36 |
So, the first thing we need to do is
place a graphic.
| | 00:40 |
I'm going to choose File > Place, and
then navigate to the asset.
| | 00:44 |
This is in the Digital Publishing Folder
> Shared links > Links to Wheels.
| | 00:51 |
And I'm going to choose Corner Pan and
Scan, and this is where we find a JPEG,
| | 00:56 |
and this JPEG is 2000 by 1331 pixels.
It's a 72 DPI JPEG as well.
| | 01:05 |
What's important to understand is the
full dimension and size of the graphic is
| | 01:10 |
going to impact the overall file size of
your DPS document.
| | 01:15 |
The other thing to consider is you can
zoom in as far as 100% on the graphic.
| | 01:21 |
You can't zoom further than that, but you
can zoom back.
| | 01:26 |
And so, you play this balancing act
between the size of the document and the
| | 01:30 |
size of the frame that holds it in the
InDesign document.
| | 01:35 |
So, with this document, Frugal Ground Pan
Scan 72 DPI JPEG selected.
| | 01:40 |
We're going to choose File and Open, and
I now have a loaded cursor.
| | 01:45 |
Now, if I simply clicked and released the
mouse, we'd see this is a very large graphic.
| | 01:51 |
What I want to do is create a smaller
frame to hold a portion of the graphic.
| | 01:57 |
So, I'm going to undo that place.
What I'm going to do is click and drag.
| | 02:02 |
And in InDesign CS4 and higher, we are
now building a frame which is the
| | 02:06 |
proportions of the graphic.
And you can see the scaling factor right now.
| | 02:11 |
And this would create a frame that shows
the entire graphic scaled down in this
| | 02:15 |
case to 25%.
That's not quite what I want either.
| | 02:19 |
So, I'm going to undo that and I'm going
to use some keyboard toggles.
| | 02:23 |
I'm going to come on up here.
I'm going to click.
| | 02:26 |
I'm going to start to drag.
On the Mac, I'm pressing Cmd+Shift.
| | 02:31 |
On Windows, this should be Ctrl+Shift.
This allows me to make a frame that's any
| | 02:36 |
dimension and any proportion that I like.
And when I release the mouse, the graphic
| | 02:41 |
is placed and fills the frame
proportionally.
| | 02:45 |
So, the graphic is now in here.
I can see the full graphic.
| | 02:50 |
And remember how I said you can zoom in
as far as 100%.
| | 02:53 |
Now, we're not at a 100% right now.
If I click in the center, this picks up
| | 02:58 |
the content grabber and I've now targeted
the contents of the frame.
| | 03:04 |
We can see that this graph is currently
scaled down to 28.7%.
| | 03:07 |
If I click to select one of these scaling
factors and type 100 in here.
| | 03:13 |
Since they're linked together in the
options bar, when I press Return, Enter
| | 03:18 |
or Tab, we now zoom both the horizontal
and vertical scaling values to 100%.
| | 03:26 |
And we can start to see how far I can
zoom in at 100%.
| | 03:30 |
Now, the image is currently a little on
the chunky side.
| | 03:33 |
I'm going to go ahead and right-click
over here on the Paceboard, this gives me
| | 03:37 |
a Contextual menu where I can choose
Display Performance.
| | 03:41 |
I'm going to switch up to High Quality
Display so I can see the full resolution
| | 03:44 |
of that JPEG.
Now, it's looking pretty nice here at 100%.
| | 03:49 |
This is, as far as the Pan and Zoom
system, will allow a user to move into an image.
| | 03:56 |
So, what we need to do is sort of balance
the experience of the image with what
| | 04:00 |
they see initially.
So, let's change the scaling factor on
| | 04:05 |
the content of this graphic, and let's
come on up to the Options Bar and choose
| | 04:09 |
to fill the frame proportionally.
Now, the height of the graphic inside of
| | 04:15 |
the frame matches the vertical dimension.
And if I wanted to, I could click and
| | 04:21 |
drag and move which portion of the image
is visible inside of the frame.
| | 04:27 |
So, I might set an initial position like
this, and we're going to allow people to
| | 04:31 |
zoom in from this point on.
So, what I've basically done is placed a
| | 04:37 |
graphic and cropped it.
That's all that goes into setting up for
| | 04:42 |
building the interactivity, we just
haven't turned it on yet.
| | 04:48 |
So right now, it's just a graphic that's
cropped.
| | 04:51 |
But to make it interactive, I open the
Overlay Creator panel.
| | 04:55 |
I'm going to go ahead and select the
frame.
| | 04:58 |
And Pan and Zoom is one of the options
available to me.
| | 05:01 |
Select Pan Zoom.
And now, I can choose to only Pan, which
| | 05:05 |
would allow people to only move left to
right, sort of scrolling left or right,
| | 05:10 |
or I can choose to include zooming.
So, I'm going to turn Pan and Zoom on.
| | 05:17 |
And now, I simply preview.
In the Content Viewer, we see the layout.
| | 05:22 |
And if I click on the graphic, it's been
activated.
| | 05:26 |
And I now can pan left or right.
I can't go up or down.
| | 05:30 |
And that's because the height of the
graphic matches the height of the frame.
| | 05:36 |
No problem here.
To zoom on a tablet, I would use a
| | 05:39 |
two-finger gesture.
Because I'm not working with a tablet,
| | 05:43 |
I'm going to press the Plus key to zoom
in, and I can zoom in as far as 100%.
| | 05:48 |
The Minus key lets me zoom out.
Once I've zoomed in, I can move up or
| | 05:53 |
down, left or right, and explore the
image.
| | 05:58 |
So, this is what a Pan and Zoom allows a
reader to do to interact with your publication.
| | 06:04 |
This is a great way maybe to allow people
to explore a map, go closer into the
| | 06:08 |
details of an image, just about anything
you're like.
| | 06:13 |
So, it's super easy to build.
Simply place a graphic, crop it, and then
| | 06:17 |
turn the Overlay Features on.
That's it.
| | 06:21 |
Have fun.
| | 06:25 |
| | Collapse this transcript |
| Web content overlays and HTML articles| 00:02 |
Let's take a look at what you can do with
web-based content in a DPS publication.
| | 00:07 |
Let's take a look inside the Digital
Publishing folder > Article Start >
| | 00:11 |
Overlays, and let's go ahead and select
the Overlay Web Content_H file, and open
| | 00:16 |
it up.
Now, we're going to talk about a couple
| | 00:20 |
types of web content and what's sort of
fun is the range of things you can use.
| | 00:27 |
So for instance, one thing I can do is
just plain select this frame.
| | 00:31 |
This is a standard text frame right now.
I'm only using it as a placeholder for
| | 00:35 |
the layout.
And by selecting the frame, and then
| | 00:38 |
coming over to the Overlay Creator panel,
you can see one thing I can do with this.
| | 00:43 |
The one and only thing right off the bat
is convert this into web content.
| | 00:49 |
So I click.
This is converting it into web content.
| | 00:52 |
And now, I can either type a URL or load
a file in here.
| | 00:56 |
We're going to start by loading a file.
So, I click, Load Icon.
| | 01:00 |
And now, I go to the Desktop > Digital
Publishing > Shared Links > Links Two Wheels.
| | 01:07 |
And there's a folder in here called HTML.
Inside of the folder, you find a single
| | 01:12 |
HTML document.
And this is web code written to pull in a
| | 01:17 |
Twitter feed about the hub bike.
This is the bicycle we use in one of the
| | 01:23 |
image sequence examples.
So, when I click Open that means the
| | 01:28 |
contents of the local folder are going to
be displayed inside of this space.
| | 01:35 |
Now, when I take a look at the other
options in here, one is to auto play.
| | 01:38 |
That would load it automatically or after
a certain delay using a transparent background.
| | 01:45 |
And whether or not we allow user
interaction, this would either allow
| | 01:49 |
people to link out or only allow them to
see what's in this one web document.
| | 01:55 |
You can also scale the content to fit the
space.
| | 01:58 |
So, that's one example of what you can
build.
| | 02:01 |
The other example, we're going to use the
other frame here.
| | 02:04 |
We're going to link to Wikipedia.
So, simply click in the URL field in here.
| | 02:10 |
The Web Content Overlay Creator area and
type http://www.wikipedia.com.
| | 02:24 |
It's that simple.
And simply pointing to a website that's
| | 02:28 |
out in the world, let's set this one to
auto play and let's load it immediately.
| | 02:33 |
Let's also put a transparent background
in here because you might notice there's
| | 02:36 |
a little piece of artwork in the bottom
right-hand corner of the page.
| | 02:40 |
So, we'll be able to see that through the
page.
| | 02:43 |
We're going to allow user interaction, so
they could choose to go and look on
| | 02:46 |
Wikipedia and we don't really need to
scale the content to fit.
| | 02:51 |
Now, a couple of tips for when you link
to URLs.
| | 02:56 |
You may wish to use a mobile website.
This is going to help produce and represent
| | 03:01 |
the data in a smaller space inside of the
screen.
| | 03:05 |
So, for instance in this situation, I
have a web portal, shall we say, which is
| | 03:10 |
651 pixels wide.
You can see that up here in the width attribute.
| | 03:15 |
And it may be that the website doesn't
work well at 651, if I'm going for the
| | 03:20 |
full-blown browser experience.
But by routing to a mobile version, I
| | 03:26 |
might get a more pleasing experience.
Another thing to keep in mind is you need
| | 03:31 |
to use a URL that is not redirected.
The web content system inside of a DPS
| | 03:37 |
publication, inside of the viewer is not
going to follow or redirect this time.
| | 03:43 |
So, a little care, a little concern as
you do this is really helpful.
| | 03:48 |
So, let's go ahead and Preview this and
see what we've got.
| | 03:52 |
So, in the Content Viewer, we can see
Wikipedia loaded up immediately inside here.
| | 03:58 |
Nothing loaded here, so let's go talk
about what we could do there.
| | 04:03 |
What's important in the design is maybe
to allude to the fact that there's
| | 04:06 |
something there if it doesn't load
automatically.
| | 04:10 |
One way you could do this is to select
this frame and place an image into it.
| | 04:16 |
So, I'm going to choose File > Place.
Now, I'm going to go to the Desktop >
| | 04:20 |
Digital Publishing > Shared Links > Links
Overlays > Web Content, and this is where
| | 04:25 |
you're going to find and illustrator file.
I'm simply placing that Illustrator file
| | 04:31 |
which is the same dimension as that
frame.
| | 04:34 |
And now, when we go and Preview this
there's a nicer representation inviting
| | 04:38 |
people to click here for the latest Hub
Bike, Twitter feed.
| | 04:42 |
And sure enough, there it is.
So, this is a Twitter feed which scrolls.
| | 04:47 |
And I could click on any of these links
and follow those.
| | 04:51 |
So, it's a live piece of information.
When you're writing the HTML code that
| | 04:55 |
goes into this space, it's also important
to experiment or consider the width of
| | 04:59 |
the space that you're writing for and the
code.
| | 05:04 |
Also remember, about six pixels of extra
space or, or less space for the scroll
| | 05:09 |
bar that you get automatically.
So, experiment a little bit with that.
| | 05:15 |
For the most part, HTML 5 content, which
is supported by WebKit, is going to work
| | 05:21 |
just fine in these web content overlays.
| | 05:26 |
| | Collapse this transcript |
| Scrolling frames| 00:02 |
So we're going to take a look at, sort of a
cool trick inside of the DPS workflow.
| | 00:07 |
What we're going to look at is how to
build a scrollable frame.
| | 00:11 |
Now, Adobe had some customers who were
pretty happy with DPS, but they had
| | 00:14 |
certain content where they wanted their
users to be able to scroll through part
| | 00:18 |
of the layout, without moving the rest of
the layout.
| | 00:24 |
Maybe this is for showing a recipe or a
series of instructions, it could also be
| | 00:28 |
applied to an image.
So here I'm allowing the user to scroll
| | 00:32 |
through and examine just a portion of the
image, as opposed to the whole image, or
| | 00:36 |
working with a pan and zoom overlay.
Now, this is all on a single page.
| | 00:43 |
So we're going to take a look at what it
takes to build scrollable frames.
| | 00:46 |
Now the whole process is based upon some
very specific layer naming conventions
| | 00:52 |
and object names.
So if we take a look at they Layers panel
| | 00:56 |
we can see there are two layers here that
I want you to pay attention to.
| | 01:00 |
One is scrollabel content, that layer
name is critical.
| | 01:06 |
That's the basis of this process.
Inside the scrollable content layer,
| | 01:11 |
let's zoom out just a little bit, I have
a couple of objects.
| | 01:16 |
If I click and select one of these
objects you can see the radishes is the
| | 01:19 |
image on the right-hand side of my
layout.
| | 01:23 |
The object called Story is the thing over
on the left.
| | 01:27 |
So these are named objects in a very
specific layer.
| | 01:31 |
Now in a different layer, that I have
decided to call Containers, so you're
| | 01:35 |
free to name the Container layer anything
you want.
| | 01:40 |
I have two objects that match the names
of the things in the scrollable content layer.
| | 01:46 |
Here's radishes, you see there's a frame
on the right-hand side of the page, and I
| | 01:50 |
have a frame called Story on the left
hand side of the frame.
| | 01:55 |
So the named objects in the scrollable
Content layer will appear inside the
| | 02:00 |
containers with the same name on the
Container layer.
| | 02:05 |
So let's build it.
I'm going to go ahead and close this file,
| | 02:09 |
this is the ending file.
And now let's go ahead and open the start file.
| | 02:18 |
So on the desktop of my machine, in the
Digital Publishing Folder > Articles
| | 02:24 |
Start > Overlays, we're looking for
overlayscrollframe_h.
| | 02:31 |
Go ahead and open that up and you can see
the layer system doesn't have the naming
| | 02:35 |
system yet.
So let's start by creating two new layers.
| | 02:41 |
If I hold the Option or Alt key down when
I click on the New layer button, I can
| | 02:44 |
name it.
So, one of these has to be named,
| | 02:48 |
Scrollable Content.
All right, and the things that go into the
| | 02:53 |
Scrollable Content layer, are going to be
the things on the paste board.
| | 02:59 |
Now they're off on the paste board, so
they don't appear in the layout before
| | 03:03 |
they go into the containers.
So I'm going to select the story that's over
| | 03:07 |
on the left-hand-side of the layout and
in the layers panel I'm going to grab that
| | 03:11 |
proxy dot on the right-hand side, drag it
up into the scrollable content layer.
| | 03:17 |
I open this up, you can see there is a
generic name.
| | 03:19 |
To change the name of an object, select
it and triple click.
| | 03:24 |
Now I can call this Story.
All right.
| | 03:29 |
Over on the right-hand side of my layout,
I have radishes.
| | 03:33 |
I'm going to select the object and I'm
going to move this into the Scrollable
| | 03:38 |
Content layer as well and let's select it
and then triple click and change this
| | 03:43 |
name to Radishes.
So now I have named things in this
| | 03:49 |
Scrollable Content layer, let's build a
new layer.
| | 03:54 |
I'm going to hold the Option or Alt key down
as I click New, this allows me to name it.
| | 04:00 |
I'm going to call this one Containers.
Now let's create a couple of frames to
| | 04:04 |
serve as containers.
I'll pick up the frame tool and in the
| | 04:07 |
upper right-hand side of this layout,
inside of the guides, I'm going to click and
| | 04:11 |
drag and this built a frame.
Let's make sure we have that in the
| | 04:16 |
containers layer, let's open the
containers layer up.
| | 04:19 |
We can see it's generically called
rectangle.
| | 04:22 |
I'm going to select and triple click, and
let's give it the same name as the
| | 04:27 |
Radishes object, like so.
Let's scroll on over, and let's build
| | 04:32 |
another frame, I'm going to put this over on
the left-hand side of the layout and, I'm
| | 04:36 |
being a little careful about the
dimensions here.
| | 04:40 |
The frame that I just built, using the
guides has a width of 320 pixels.
| | 04:47 |
Now right now, this is just a generic
rectangle, and it's in the Containers
| | 04:51 |
layer, which is great.
I'm going to select and triple click on
| | 04:57 |
it, and let's call this Story.
So I have object in both the Containers
| | 05:03 |
and sSrollable content layers with
identical names.
| | 05:09 |
The things in the Scrollable Content
layer are on the pasteboard, whereas the
| | 05:14 |
containers are in my layout.
The object called Story in the Containers
| | 05:19 |
layer is 320 pixels wide.
The text that goes into it should be a
| | 05:25 |
little bit more narrow than that.
So right now it's way too wide, though.
| | 05:31 |
I said that was 320 pixels wide, let's
change the width of this frame to 315.
| | 05:40 |
So I'm giving myself a little bit of
extra area, a little bit extra narrow,
| | 05:44 |
that's because a scroll bar will be
inserted for me automatically.
| | 05:49 |
So if I now preview this, let's go File >
Folio Preview, we're going to see the
| | 05:54 |
results of the scrollable frames.
The content that was in the pasteboard is
| | 06:02 |
now the layout.
Check out how that scroll bar intersects
| | 06:06 |
just a little bit of the text, we might
want to tweak that a little and the
| | 06:09 |
radishes let me scroll around as well.
Now, since the frame with on the Radishes
| | 06:16 |
and the frame on the Container layer are
different sizes, this allows the image to
| | 06:21 |
move around in both the X and Y axis.
So, let's go back and tweak this a little
| | 06:27 |
bit more, and have a little bit more fun.
One way for me to adjust the width of the
| | 06:33 |
contents of the text frame would be to
use text frame options, and then unlock
| | 06:37 |
the inset spacing and add a couple of
pixels.
| | 06:42 |
Let's go with about eight pixels on the
right-hand side so that pushes the
| | 06:45 |
content in a little ways from the edge of
the frame and that's going to probably fit
| | 06:49 |
better over here.
Now the other thing that I think would be
| | 06:54 |
cool to do would be to insert the picture
of the asparagus inside of the scrolling content.
| | 06:59 |
So InDesign CS5 5 I can see the blue
square when I select an object.
| | 07:05 |
By clicking and dragging this makes an
anchored object.
| | 07:09 |
If you hold the Shift key down when you
click and drag, you insert the object,
| | 07:13 |
and now I drag that down through the
content, with Text Wrap turned on to it,
| | 07:17 |
it's going to push the content following
paragraphs down.
| | 07:23 |
So, couple of extra new tweaks, and now
let's go preview it again, and see how
| | 07:27 |
this adjusted the output.
So now over in the content viewer when I
| | 07:34 |
scroll I've got a nice amount of space
between the scroll bar and the content here.
| | 07:39 |
The asparagus picture is in exactly where
I told it to go, the radishes still move
| | 07:43 |
around nicely.
So, there's your introduction to how a
| | 07:48 |
scrolling text frame works.
It's really easy to build.
| | 07:52 |
you just have to be really careful and
specific in your use of object names and
| | 07:57 |
the layer names.
Have fun with this one it's really wild.
| | 08:04 |
| | Collapse this transcript |
| Advanced: Scrolling frames| 00:01 |
All right.
Let's take a look at an example of some
| | 00:04 |
Advanced Scrolling Frame techniques.
Now, the really interesting thing is the
| | 00:10 |
normal approach to DPS Publications is a
piece of interactivity is always in the
| | 00:15 |
Overlay above everything else in the
document.
| | 00:20 |
So, you can't layer interactivity on top
of other interactivity.
| | 00:25 |
And yet, here's an example of me having a
scrolling text frame and something is in
| | 00:30 |
front of it.
I can see it.
| | 00:33 |
Now, normally in InDesign, we can set the
transparency of an object.
| | 00:38 |
In essence, that's what I've done here
with the glasses.
| | 00:41 |
But if that's part of the layout, it
would appear underneath the Scroll System.
| | 00:47 |
So, we're going to take a look at how to
sort of force the issue and take
| | 00:51 |
advantage of a trick of Advanced
Scrolling Frames.
| | 00:56 |
So, let's take a look at an InDesign
document.
| | 01:00 |
I'm going to go into the Digital Publishing
Folder > Articles Start > Overlays.
| | 01:05 |
And I am going to select the
OverlayAdvancedScrollframe_h file.
| | 01:10 |
Now, this file has some content in it
already and what we need to do is build
| | 01:14 |
the Scrolling Frame System.
So, you might recall that we need a layer
| | 01:20 |
with a very specific name.
Let's go ahead and build a new layer and
| | 01:26 |
name it Scrollable Content.
There we are.
| | 01:32 |
And we need to move the things which will
be inside of these scrolling fields to
| | 01:36 |
that layer.
So, I'm going to select the Text Frame over
| | 01:40 |
here on the left.
I'm going to drag that up and into the
| | 01:43 |
Scrollable Content layer and over on the
right-hand side of this page, on the pace
| | 01:47 |
board, I have a Photoshop document.
Also in layer one, this needs to also be
| | 01:53 |
in the Scrollable Content layer.
So, in the Scrollable Content layer, we
| | 01:57 |
can see the two objects.
Let's go ahead and give these good names.
| | 02:02 |
So, I'm going to select and then
triple-click on the PSD name.
| | 02:06 |
Let's call this, Frames.
Because what we're going to do is only
| | 02:12 |
show the black part of these glasses in
this particular copy of this object.
| | 02:18 |
Now, we're going to come back and talk about
how to do that in a few minutes.
| | 02:21 |
Let's move on over to the left-hand side,
select this one, and in the Scrollable
| | 02:27 |
Content Layer, select and triple-click
and rename this, Story.
| | 02:34 |
So, nice controlled words to talk about
the things in the Scrollable Content layer.
| | 02:40 |
Now, we need a home for the story.
I'm going to pick up the Frame tool and in
| | 02:45 |
my layout, between these red guides, I'm
going to drop a frame in here.
| | 02:50 |
This object should not be in the
Scrollable Content layer.
| | 02:54 |
So, let's build a new layer.
This is going to be called Containers.
| | 02:59 |
Now, this layer name is not critical but
Scrollable Content is.
| | 03:03 |
And in the Layers panel, I'm going to click
at the Proxy Doc on the right and drag
| | 03:08 |
that frame into the Containers layer.
Now, when I open the Containers layer, I
| | 03:13 |
can see the rectangle here.
I'm going to select and triple-click and
| | 03:17 |
name this Story.
All right.
| | 03:20 |
So now, we have a home and an object.
Both named Story in the Correct layers so
| | 03:26 |
we know that the text is going to flow into
this area.
| | 03:29 |
What we need to start doing though is
pull the trick.
| | 03:33 |
The trick is turning the glasses into
Scrollable Frames, which is going to
| | 03:38 |
force the glasses above the Scrolling
Content.
| | 03:42 |
So, there are a couple of things that are
going to happen here.
| | 03:45 |
First off, let's Select the object called
Frames, great.
| | 03:50 |
I'm going to Option or Alt+Drag to
duplicate this.
| | 03:55 |
And let's change the name of this lower
one.
| | 03:58 |
So, we can see that now that's the one
that's highlighted right now.
| | 04:01 |
I'm going to select and triple-click.
This is going to be glasses.
| | 04:07 |
All right.
Now, the glasses part, the lenses is what
| | 04:10 |
we're going to see through.
So, what we need to do is drop the Opacity.
| | 04:17 |
I'm going to use the slider in the Options
bar up here.
| | 04:19 |
Let's drop down to about 50% Opacity.
Splendid.
| | 04:23 |
Now, I can see through the lenses.
In the upper portion, in the frames, I
| | 04:28 |
only want to see the black part, not the
glasses.
| | 04:32 |
And I've built a file here which allows
us to pull a really cool InDesign trick.
| | 04:37 |
This is a Photoshop document that has
separate layers.
| | 04:41 |
So, if I select the glasses object and go
Object > Object Layer Options, this is
| | 04:46 |
where we can see the layers in the
Photoshop file and let's move this over
| | 04:50 |
to the side.
I'm going to turn the Glasses Layer off.
| | 04:56 |
Now, I just happen to know the names of
these layers, so they're really similar
| | 05:00 |
to the names of the objects, so don't get
confused by that.
| | 05:03 |
I'm just trying to be easy with my
explanation.
| | 05:07 |
So, I'm going to turn the glasses part off
of the object that's called Frames, like so.
| | 05:14 |
All right.
So now, we've got three things, the
| | 05:17 |
Story, the Frames, and the Glasses.
And I need to put Frames, the Containers,
| | 05:24 |
in the Layout to hold these two objects.
Now, I'm going to pull a really cool little
| | 05:31 |
trick and that is by selecting them, I've
selected them in the Layers panel.
| | 05:37 |
If I Option or Alt+Drag, this is going
to duplicate the objects and those
| | 05:41 |
objects are going to have exactly the same
names.
| | 05:45 |
Those duplicates are also currently
selected and I need to move these two
| | 05:50 |
things into that Containers layer.
So, I simply drag the Proxy Doc from the
| | 05:55 |
Scrollable Content area to the Containers
layer, and I've just moved these objects
| | 06:00 |
to a new layer.
What's also nice about this trick is that
| | 06:05 |
now the Glasses and the Frames are
stacked in front of the Story in the
| | 06:09 |
Containers layer.
All right, so I've got frames that have names.
| | 06:15 |
Some of those frames have content.
The object that I'm going to use as
| | 06:20 |
containers for the Glasses don't need any
content.
| | 06:24 |
So, I'm going to simply hover over them, I'm
going to click on the Content Grabber and
| | 06:29 |
delete the content.
This leaves the frame behind, and that
| | 06:33 |
frame is exactly the same dimension as
the things over on the storyboard in the
| | 06:37 |
Scrollable Content layer.
And the last trick is to select these two
| | 06:43 |
objects, and I'm going to align the edges.
Let's align left and let's align the top.
| | 06:49 |
So now, those two frames sit exactly on
top of each other.
| | 06:53 |
And now I'm going to position where I think
I want those glasses to be in front of
| | 06:57 |
the scrolling text.
And let's go see the outcome.
| | 07:02 |
So, I'm going to go File > Folio Preview,
and now this page which has the
| | 07:06 |
Scrollable Content is looking good.
The text feeds into this frame and now
| | 07:13 |
you can see the text scrolling behind the
content.
| | 07:18 |
So, this is a fun little trick having to
with stacking scrollable frames on top of
| | 07:23 |
each other, and then setting Transparency
to create this effect.
| | 07:29 |
It's sorta breaking a couple of rules,
but as long as it works, I think I like
| | 07:33 |
the way it does.
So, there you go.
| | 07:36 |
Have fun with this one and experiment
with it.
| | 07:42 |
| | Collapse this transcript |
| Advanced: Masked video| 00:02 |
All right.
In this video we're going to take a look at
| | 00:04 |
sort of a trick.
Every once in awhile, people in the
| | 00:08 |
pre-release forums have cooked up some
interesting solutions to problems you
| | 00:12 |
normally are not able to address in DPS.
And this is an example of one of those
| | 00:18 |
very interesting tricks.
So, we're going to look at masking video.
| | 00:22 |
I can open the digital publishing folder,
articles, start, overlays, and I'm going
| | 00:27 |
to select the overlay advanced video mask
and design file.
| | 00:32 |
Now let's go ahead and double-click it,
and let's take a look at what's in this file.
| | 00:37 |
So far, the setup is really pretty basic.
I have a movie that's been placed in
| | 00:42 |
here, and that's all there is to that
one.
| | 00:45 |
I selected a custom poster frame just
'cause I felt like it.
| | 00:49 |
Over here on the right, I have a text
frame, and I have two buttons.
| | 00:53 |
The buttons are not programmed yet, but
they do have a red click state, and this
| | 00:57 |
is going to be a cool little trick later on,
just a little detail To make the feedback
| | 01:02 |
on this process, really pretty nice.
So, normally, because video is an
| | 01:08 |
overlay, it's always in front of anything
in the layout.
| | 01:13 |
And while InDesign can put curved corners
on things, and you can edit the shape of
| | 01:18 |
a frame for print, video is square, or
rectangular.
| | 01:22 |
And there isn't a way to plop in an odd
shape, but there's a trick you can pull.
| | 01:28 |
The trick that I'm going to pull has to do
with building some frames that are going to
| | 01:32 |
serve as overlays in front of the video.
And what I've built over here on the left
| | 01:38 |
hand side of the pasteboard are two
compound paths.
| | 01:41 |
Now a compound path is really simply a
shape that cuts out of another shape.
| | 01:47 |
So if I build two rectangles, one inside
of the other.
| | 01:51 |
If I select the two rectangles, and then
go to the object menu and come down to paths.
| | 01:57 |
And make this a compound path.
The cool thing about a compound path is
| | 02:01 |
if you put a fill color inside, let's
target the fill color, let's put a color
| | 02:06 |
in here, you see through the interior
shape.
| | 02:11 |
So basically what I did was drew a
rectangle and then I drew a rounded
| | 02:15 |
rectangle, selected the two of them,
turned them into a compound path, and
| | 02:19 |
then used a blue fill color.
In the lower example I put rounded
| | 02:25 |
corners on two of the corners and in one
corner I applied a pathfinding operation
| | 02:30 |
to join a flourish from Illustrator with
the vector qualities of this path and
| | 02:35 |
turned into a compound path.
So, these are two shapes.
| | 02:43 |
You can see through them.
Now's it's a matter of joining them in a
| | 02:47 |
really cool way to make them interactive
so they can mask the movie.
| | 02:54 |
Now eventually what I want to do is mask
that movie and have it sort of appear in
| | 02:57 |
the page.
So I'm going to change the fill color from
| | 03:01 |
blue, which is nice and easy to see, to
white, which is going to mask the color of
| | 03:05 |
my background.
I am going to take the two objects and I am
| | 03:09 |
going to align them, I am going to align the
left edges and the top edges so now they
| | 03:14 |
are right on top of each other and they
happen to be the same dimension as my
| | 03:17 |
movie, so the two objects are selected
Now it's a matter of making them one thing.
| | 03:26 |
And the way we do that in InDesign for
this trick is go to the Object States
| | 03:30 |
panel and turn them into a multi-state
object.
| | 03:34 |
So now it's simple for me to say, okay,
state number one has the flourish in it.
| | 03:39 |
State number two has the rounded corners.
Now I think to make it a little bit
| | 03:44 |
easier, let's change the name of state
two to round.
| | 03:50 |
And let's change the name of state one to
flourish.
| | 03:55 |
Like so.
Let's also give the multi-state object
| | 03:57 |
its own name.
Call this one mask.
| | 04:00 |
All right, so now it's simply a matter of
taking this multistate object and putting
| | 04:05 |
it in front of the video.
Because a multistate object is a type of
| | 04:11 |
overlay, and because it's in front of the
video this mask is really just a mat
| | 04:15 |
shall we say is going to be in front of
that video.
| | 04:22 |
What I'm watching for is to make sure
that the edges, the boundaries of the
| | 04:26 |
multistate object are where I expect them
to be and not falling off over here to
| | 04:30 |
the left where the other state is.
So now I'm going to click on the 2 states to
| | 04:36 |
make sure that both are in the correct
location.
| | 04:39 |
We're going to go back to the flourish Let's
drag flourish down so that the round
| | 04:44 |
state is the default state.
And now let's make these buttons, over on
| | 04:50 |
the right, do something cool.
I'm going to select the first one, and in
| | 04:54 |
the buttons panel, I'm going to say make
this one on release go to a state of the
| | 04:59 |
object called mask.
And this is going to go to the round state.
| | 05:05 |
Really easy.
The second button is going to go to a
| | 05:09 |
state of the object called mask.
And this will go to flourish.
| | 05:14 |
So there you go.
We've built video.
| | 05:17 |
We put an a multi-state object in front
of the video.
| | 05:21 |
And we programmed a couple of buttons to
change the multi-state object.
| | 05:28 |
| | Collapse this transcript |
| Advanced: Remote buttons| 00:02 |
So let's take a look at shall we say
pulling some tricks with buttons.
| | 00:07 |
We're going to look at using remote or
advanced button techniques.
| | 00:12 |
We're going to go into the Digital
Publishing Folder > Articles Start >
| | 00:15 |
Overlays and I'm going to select
overlayadvancedbuttons.
| | 00:20 |
And open this one up.
Now the trick that we're going to pull on
| | 00:24 |
our readers is they're going to expect
that because there's certain icons in
| | 00:28 |
certain places of the publication It's
going to lead them to beleive that
| | 00:32 |
clicking there is going to do something
special.
| | 00:37 |
And normally you can't do that sort of
thing.
| | 00:41 |
You can't have a button inside of
something else.
| | 00:45 |
You can't have interactivity inside of
another overlay.
| | 00:49 |
But by layering some things and by
building visual clues, you can start to
| | 00:54 |
lead people to the belief that you've got
a really cool interaction.
| | 01:01 |
And what we're going to do is stack and
layer a couple of buttons and a
| | 01:05 |
multi-state object together.
So let's take a quick peek at the
| | 01:10 |
graphics that are involved.
I'm going to Zoom In here on the smaller graphic.
| | 01:14 |
This is going to be the teaser that's in
our publication.
| | 01:17 |
And you can see, let's go ahead and right
click.
| | 01:19 |
And go for a high quality display.
I've got a photograph and I put a couple
| | 01:23 |
of gears in the corner.
This might serve as an indicator or an
| | 01:26 |
icon that interactivity is possible if
you click here.
| | 01:30 |
Now, over in the margin, or on the pace
board, you could see in the upper
| | 01:34 |
left-hand corner of our graphic, over
here on the pace board, I put a blue
| | 01:39 |
circle and an X.
And people are going to expect that to
| | 01:44 |
close the object.
So I've built graphics that lead people
| | 01:49 |
to the belief that there's a certain type
of interactivity if they click in a very
| | 01:54 |
special place.
Now it's a matter of building that interactivity.
| | 02:01 |
So the first thing I'm going to do is I'm
going to take the large graphic.
| | 02:05 |
I'm going to slide it over into position.
This is where I want the graphic to show
| | 02:09 |
up when it's activated.
Now remember, the small and the large
| | 02:13 |
graph are going to be a single thing, and
that's going to be a single, multi-state object.
| | 02:19 |
So let's go ahead and build that.
I'm going to hold the shift key down, and
| | 02:23 |
I'm going to select the two graphics.
I want to make sure I don't have anything
| | 02:26 |
else selected, cool.
And with the two objects selected, I go
| | 02:30 |
to the object states panel, I click new,
and let's call this one Detail.
| | 02:37 |
All right, so we've named the object and
let's go name the states, just so it's
| | 02:42 |
nice and easy.
And so we understand what's going on.
| | 02:47 |
This is going to be the small image.
And let's go take a look at state 2.
| | 02:52 |
And let's rename state 2 large, like so.
All right so, now we can see the appearance
| | 03:00 |
of the large state, and the small state
in the layout.
| | 03:05 |
Excellent, let's go back and target the
whole MSO, I click the little icon in the
| | 03:08 |
upper right-hand corner of the Object
States panel.
| | 03:12 |
That targets the whole multi-state
object.
| | 03:15 |
That's always a good habit to have.
And if we think about where the small
| | 03:19 |
image is, what we're going to do is pick
up this frame here that's on the
| | 03:23 |
(UNKNOWN), we're going to turn this into
a button.
| | 03:27 |
The way you build a button is super easy.
Just go to the buttons panel, the object
| | 03:32 |
selected, click create a button, and now
we add an action.
| | 03:38 |
On release, you're going to go to a state
of the object called detail, and this
| | 03:43 |
button, is on the small thing, so that
means, that clicking here should expose
| | 03:49 |
the large image.
There you go, now it's a matter of moving
| | 03:56 |
that button In front of where you want
people to touch.
| | 04:01 |
Now the stacking order is nice so that
button is in a layer which is above.
| | 04:07 |
I'm going to go to the object menu,
choose arrange and I'm going to bring
| | 04:11 |
this to the front.
So that button is in front of the image
| | 04:15 |
for the multistate object.
Now when the multistate object, I'm going
| | 04:21 |
to select it now by Cmd clicking through
the button and in the object states panel
| | 04:26 |
I go in to show the large image, the
close button which really is not a button
| | 04:30 |
it's just an icon up there.
We know this needs to be in the upper
| | 04:38 |
right-hand corner of where that large
image is so I'm going to select the frame
| | 04:42 |
over here on the left-hand side of my
layout I'm going to turn this into a
| | 04:46 |
button go into the buttons panel I create
a new button and I add the action go to state.
| | 04:57 |
The object is called detail I want this
button to take us to these small state of
| | 05:01 |
the multi state object and I'm going to
bring this object over I'm going to align it
| | 05:06 |
on top of where that close button is and
I'm going to make sure that this is all the
| | 05:10 |
way in the front.
So now what we've done is layered two
| | 05:18 |
buttons in front of the multistate
object.
| | 05:22 |
And if I select the multistate object and
take this back to the default.
| | 05:27 |
I'm going to do it this way, reset all
multistate objects to the first state.
| | 05:32 |
What you notice is, the two buttons are
still hanging out here.
| | 05:35 |
And that's because they're just holding
the place, so that when I now go File >
| | 05:40 |
Folio Preview, and we take a look at this
interactivity, those two buttons hang out
| | 05:45 |
there the whole time.
And it just so happens that when I click
| | 05:50 |
here, it exposes the multistate object
with the large image.
| | 05:55 |
And when I just happen to click where
that close indicator is.
| | 05:59 |
There's a button there, and that
triggered the change in the MSL.
| | 06:03 |
Where the multi state object.
If you know that that small button is
| | 06:07 |
about where the TH is.
Your going to notice if you click here,
| | 06:11 |
there's no visual feedback.
The navigation system doesn't show up at
| | 06:15 |
the top and at the bottom of the screen.
If I move someplace else in the layout
| | 06:19 |
and click, now we see the navigation
system at the top.
| | 06:23 |
So this is a small indicator to me that
there's a button here and it's invisible.
| | 06:30 |
But likewise, if I come here and click
the button here, we see the change.
| | 06:35 |
But when I click here, there's no
navigation.
| | 06:37 |
If I click someplace where there is no
button, I see the navigation system triggered.
| | 06:43 |
So, this is a really cool way of working
with buttons, to expose and hide and
| | 06:48 |
change your layout.
And it's a matter of building a button
| | 06:53 |
that hangs out and it's invisible, that
makes something else change to play
| | 06:57 |
around with this idea.
It's a really cool and dynamic one, and
| | 07:02 |
can be used in a lot of different ways.
Have fun with it.
| | 07:10 |
| | Collapse this transcript |
| Advanced: Slideshow| 00:02 |
When you build a slide show in a dps
document, you're using the states of a
| | 00:06 |
multi-state object for each of those
slides.
| | 00:10 |
We're going to take a look at having
multiple objects in each of those states
| | 00:14 |
so that we can combine text and graphics
inside of each slide.
| | 00:20 |
I'm going to open the digital publishing
folder, Articles > Start > Overlays.
| | 00:25 |
And now I'm going to select and open
overlayadvancedslideshow_h.
| | 00:31 |
In the publication we see here, I have
some things out on the pasteboard.
| | 00:36 |
And each of these is a group of graphics
and text.
| | 00:41 |
So we're going to be looking at working with
using groups, in this exercise.
| | 00:46 |
Let's take a look at the main layout
here.
| | 00:49 |
And what we see is I have a graphic, line
it up here, I have a text frame, it says
| | 00:53 |
Green Light District, and I have a text
frame with the content about the green
| | 00:58 |
light district.
Now these three elements are arranged the
| | 01:04 |
way that I like them.
They're aligned with the way I expect for
| | 01:08 |
my design, and what I want to do is
select all three of these, and we're
| | 01:11 |
going to make these three things together
one state of the multi-state object.
| | 01:17 |
So I'm going to go ahead and group them,
going to choose Object and Group.
| | 01:22 |
So now it's one group with three things
in it.
| | 01:25 |
We'll take a look at the layers panel.
You can see these are in the overlays layers.
| | 01:29 |
And if I open the overlays layer up, you
see the group is currently selected, sure
| | 01:33 |
enough, and it has a generic name, group.
I'm going to select that generic name,
| | 01:39 |
and this is how I can rename a group.
Let's call this one Green Light.
| | 01:44 |
The cool thing about naming a group is
that when we use this group to build the
| | 01:49 |
multistate object, the group name becomes
the state name.
| | 01:56 |
So this labeling process is a whole lot
easier because I put a little bit of
| | 02:00 |
thought into this at the beginning.
So, I really advise you consider doing
| | 02:05 |
that take advantage of the new layers
panel in InDesign CS5 and 55 and the
| | 02:09 |
powers it gives you.
So, let's zoom out just a little bit and
| | 02:14 |
let's start moving content around I'm
going to be really loose with this I'm
| | 02:18 |
just pulling these other groups onto the
page.
| | 02:23 |
I'm pulling them around like so.
I'm basically moving all five of these
| | 02:27 |
groups onto the page so they're slightly
to the right and below our green light
| | 02:32 |
district group.
That way I can select all five of the
| | 02:36 |
groups really easily and use the align
panel to align the left edges and the top edges.
| | 02:44 |
So now, all five groups, which are all
the same size and have the same position
| | 02:48 |
qualities, and they now sit on top of
each other perfectly.
| | 02:53 |
So the five things are currently
selected, I can see five layers selected
| | 02:58 |
in the layers panel.
And now, I'm going to move to the object
| | 03:01 |
states panel and click the New button.
So I got a new multi-state object.
| | 03:07 |
Let's give the object a name, let's call
this Slides.
| | 03:12 |
And you can see each of the Slide states
has picked up the name of the group that
| | 03:16 |
went into it.
So a really nice, easy way of teaming up
| | 03:21 |
text and graphics, maybe design elements
in addition to those features, and then
| | 03:26 |
presenting one of those states at a time
as you work through a slideshow.
| | 03:34 |
So to make this a slideshow for DPS,
simply a matter of going to the overlay creator.
| | 03:39 |
And what I want to do is select the
multi-state object.
| | 03:43 |
Rather than selecting one of the states.
With the object selected, you see a heavy
| | 03:49 |
dashed line around the edges.
Now we look at the Overlay Creator panel.
| | 03:54 |
This can only be a slideshow.
Let's allow Swipe to Change, and we've
| | 03:58 |
just built the slideshow.
Now one of the things to watch out for,
| | 04:03 |
be considerate about, is when you're
working in a multistate object and you're
| | 04:07 |
working with groups being very aware of
what is selected and what is active is
| | 04:12 |
critical for you happiness.
What I mean by this is if you wanted to
| | 04:19 |
maybe adjust the position of the Text
Frame down here, I can target the Green
| | 04:23 |
Light State.
Then I see the group here, and I can
| | 04:28 |
double-click to go into the group, and
I've now selected the Text Frame that
| | 04:32 |
holds this text.
Now, I can do something like go to the
| | 04:37 |
Object Demand, choose Text Frame Options,
and I can change the Insets Basing if I wanted.
| | 04:45 |
So, making those choices being aware that
I could double-click go into this group
| | 04:50 |
and then move something, is really
important for you to be aware of, because
| | 04:54 |
if you're not you can start causing
yourself a little bit of stress.
| | 05:01 |
What I mean by this is, with a multistate
object selected, if you were to target a
| | 05:05 |
different state.
Now we see the other state.
| | 05:10 |
You could move that entire state out of
alignment of the other things, and when
| | 05:14 |
you come back to the other states,
they're all in position but old town is
| | 05:18 |
now out of position.
So being aware of what's targeted, what's
| | 05:24 |
active, is going to be super critical to
your happiness.
| | 05:29 |
I'm just going to undo to the point where
old town is in the correct position.
| | 05:34 |
You want to move the entire multi-state
object you need to click Away.
| | 05:38 |
Notice the heavy dashed line.
This tells me the entire multi-state
| | 05:43 |
object is selected as opposed to when I
select a state it's a very small dashed line.
| | 05:50 |
So that's your visual indicator of what
you're working with.
| | 05:53 |
One of my favorite things is up in the
upper right-hand corner the objects
| | 05:57 |
states panel.
You have this little square which you can
| | 06:01 |
click and that will target the multi
state object.
| | 06:05 |
Something else you might consider doing
is turning the little push pins or
| | 06:09 |
objects in this right-hand side of the
layout into buttons which would then
| | 06:14 |
activate specific states of the
slideshow.
| | 06:19 |
So there you go.
A couple of things to keep in mind as
| | 06:22 |
you're working with a multi-state object,
built up of groups of objects.
| | 06:27 |
Play around with this one, explore the
file a bit, and have fun with this.
| | 06:35 |
| | Collapse this transcript |
|
|
5. DPS Services: Folio Production and PublishingDPS services for production| 00:02 |
When you have a DPS subscription, you get
access to the DPS website, which allows
| | 00:07 |
you to use additional tools to create
production folios and publish.
| | 00:13 |
Let's take a quick overview at what some
of those tools are that you get with a
| | 00:17 |
DPS subscription.
Those tools really are going to be found in
| | 00:22 |
this area of the workflow.
So, I've logged into the DPS website here
| | 00:27 |
and I'm using a browser.
I'm looking at the dashboard for DPS.
| | 00:33 |
On the left-hand side of the dashboard we
see a couple of services.
| | 00:38 |
Let's take a quick peak at what we've find
in the Analytics area.
| | 00:42 |
So, I'm going to switch over to Analytics
and you can see that one type of data I
| | 00:46 |
see is the number of applications that
were installed over time.
| | 00:52 |
This allows me to see when the interest
in my publication peaks.
| | 00:56 |
Maybe this coincides with a piece of
news.
| | 00:58 |
Maybe this coincides with the publishing
of my print version.
| | 01:03 |
So, you can see where the patterns occur
and see how many people installed the application.
| | 01:08 |
Now, I can also take a look at things
like the number of folios that were downloaded.
| | 01:14 |
We see here two different folios.
The 1901 and the 1812 version of a publication.
| | 01:23 |
We get information on the folio
downloads, any cancelled downloads, and
| | 01:27 |
any download errors.
Along with folio download data, I get
| | 01:33 |
information on folio purchasing.
So, occasionally people will start the
| | 01:39 |
process but then cancel.
And those would be the purchase starts.
| | 01:44 |
But purchased folios are the ones where
the transaction was completed.
| | 01:50 |
We have data on this along with data on
the consumption of the content.
| | 01:55 |
So, which articles are the most popular?
And I can come on over here and scroll
| | 02:00 |
down through the content and see what was
popular, what was less popular, et cetera.
| | 02:07 |
Now, taking a look at the content of one
particular folio.
| | 02:11 |
Now, I could switch over to the other
folio and see data here as well.
| | 02:16 |
Along with content, I also have access to
track info on ads.
| | 02:21 |
So now, I can see the ads that are most
popular and then we can consider what to
| | 02:25 |
do with that data.
Again, I can switch which folio I'm
| | 02:31 |
looking at and I can click the calendar
here.
| | 02:35 |
And I could adjust or tune what period of
time that this report is giving me.
| | 02:41 |
So, those are the basics of what the
Analytics dashboard gives me.
| | 02:46 |
So, let's switch on back to the
Dashboard.
| | 02:49 |
And now, let's take a look at what the
Folio Producer gives me.
| | 02:53 |
The Folio Producer is going to show me
all of the design and production folios
| | 02:58 |
that I'm working on.
I see the folio names, I see metadata
| | 03:03 |
about them as well.
And if I select anyone, I can then open
| | 03:07 |
and edit the contents of that folio.
There's plenty to do with folio
| | 03:12 |
production, and we'll get into that a
little later.
| | 03:15 |
Now, let's come on back to the dashboard.
And the last area we're going to mention is
| | 03:21 |
the Viewer Builder.
If you have not downloaded the Viewer
| | 03:25 |
Builder application, once you click here,
you'll be prompted to download it.
| | 03:31 |
It's an Adobe integrated runtime
application or AIR application that runs
| | 03:35 |
on both Macintosh and Windows systems.
If you've already downloaded it, when you
| | 03:40 |
click here, the viewer builder launches
for you and asks for you to sign in.
| | 03:45 |
The other things we'll see on the
dashboard are access to download updates
| | 03:49 |
to these tools and access to learning
resources on DPS topics and additional
| | 03:54 |
Adobe topics.
So, there's our little introduction to
| | 04:00 |
what the DPS subscription gives you as we
move into the production phase, and
| | 04:05 |
eventually we'll get to publishing.
| | 04:10 |
| | Collapse this transcript |
| Folio production workflow| 00:02 |
Let's start talking about what a DPS
Subscription gives you, and what you can
| | 00:06 |
do on the website which is available with
that subscription.
| | 00:11 |
We're going to start with a quick glance
over in InDesign.
| | 00:14 |
In InDesign, I've logged into the Folio
Builder panel with an Adobe ID.
| | 00:21 |
And you can see a couple of Design Folios
here that I've worked on.
| | 00:25 |
The Local Spring and Local Summer folios
are in production, and the University
| | 00:29 |
Program Ads folio has been shared with
me.
| | 00:33 |
Now, to get into the Folio Producer
tools, you're going to go and open up a browser.
| | 00:40 |
And go to digitalpublishing.acrobat.com,
and then login with your Adobe credentials.
| | 00:47 |
Once you login to the Digital Publishing
Suite, you get to the Dashboard.
| | 00:53 |
This is where you can see the services
for Analytics and the Folio Producer,
| | 00:57 |
download the Desktop Application, Viewer
Builder, and Grab Updates and Learning Resources.
| | 01:05 |
Let's go into the Folio Producer and take
a peek at what's available.
| | 01:09 |
So, this is the Folio Producer Organizer.
This is where I can see the current
| | 01:14 |
Active Design Folios that I'm working on,
as well as any Production Folios.
| | 01:19 |
Now, the things that you can do here are
things like making a folio active by
| | 01:23 |
checking the Active option, and then
switching back over to InDesign.
| | 01:29 |
We see the green banner in the upper
left-hand corner of that particular folio.
| | 01:35 |
Let's come on back to the Organizer.
If we go in and change the folio name,
| | 01:40 |
this is going to change the name that we
see in the Folio Builder panel and InDesign.
| | 01:46 |
So, what we see here is the folio name is
the name that we see in the Folio Builder
| | 01:51 |
panel in InDesign.
Moving further to the right when we get
| | 01:55 |
two things like the Publication Name and
Folio Number, we're looking at metadata
| | 01:59 |
about the folio.
You can add this metadata in InDesign
| | 02:04 |
using the Folio Builder panel and looking
at the Properties of the folio.
| | 02:09 |
I find it's easier to edit this data here
because I can see all of it.
| | 02:14 |
So, let's go ahead and add the
Publication Name, the Folio Number and
| | 02:19 |
the Description for this particular
magazine.
| | 02:24 |
Now, the Description is going to appear
in the Viewer, and this is just good
| | 02:28 |
communication with your reader.
We can also see that neither the vertical
| | 02:34 |
nor horizontal folio covers have been
added, so let's go ahead and add those.
| | 02:39 |
I simply browse for the files, on the
desktop of my machine, Digital Publishing
| | 02:45 |
Folio Covers.
And now I can scroll to the bottom, and I
| | 02:50 |
find the Summer V and Summer H files.
If I load up one, and then I select the
| | 02:59 |
other and load it up.
So now, you can see I've completed all
| | 03:07 |
the metadata for this particular folio.
When I'm working with folios here in the
| | 03:12 |
Producer Organizer, I typically look at
these and consider these to be Design
| | 03:16 |
Folios, even though I'm inside of the
Folio Producer.
| | 03:22 |
This is where I look at and edit content
about metadata.
| | 03:27 |
And if I select one of these folios and
open it, I can see the contents of the folio.
| | 03:35 |
I can also delete a folio if I want to.
It's interesting to note that there is no
| | 03:40 |
way to add a new folio.
Adding folios is always done using
| | 03:44 |
InDesign and the Folio Builder panel.
Now, I typically talk about Design Folios
| | 03:51 |
and Production Folios.
And what I do in the Folio Producer
| | 03:55 |
Organizer's pretty much the same for both
of those.
| | 04:00 |
Except that, a Production Folio might
combine elements of a couple of Design Folios.
| | 04:07 |
Eventually, that production folio needs
to be published.
| | 04:11 |
And once I cross this barrier here in the
upper edge and I go over to the
| | 04:15 |
Distribution Service side, now we start
talking about published folios.
| | 04:21 |
And once I click the Publish button, this
has now become a Published Folio.
| | 04:28 |
We'll talk about that more later on.
So, there's your quick introduction to
| | 04:34 |
the Folio Producer Organizer, and what I
can do with editing metadata.
| | 04:39 |
And a little bit of communication
between users.
| | 04:45 |
| | Collapse this transcript |
| Editing production folios| 00:02 |
The Folio Producer Organizer is where I
can see the design and production folios
| | 00:06 |
that I have access to.
But to go a little bit deeper, to edit
| | 00:11 |
the contents and the arrangement of
articles in a folio, we need to go to the
| | 00:15 |
Editor mode.
You do this by selecting a Folio and then
| | 00:20 |
clicking the Open button.
And we now see the Folio Producer Editor.
| | 00:27 |
Now, right now I'm looking at this in a
list view, but I can also switch over to
| | 00:31 |
a Thumbnail view.
In the Thumbnail view, I see each
| | 00:35 |
article's layout.
Right now we're looking at the horizontal
| | 00:39 |
layouts, and since I've built a vertical
arrangement as well, here are the
| | 00:42 |
vertical layouts.
Now I can change the size of the
| | 00:46 |
Thumbnail, and you notice I get one page
for one page articles.
| | 00:50 |
And the neighborhood guide is an HTML
based article, so I get one page to
| | 00:54 |
preview it.
But if I had a multiple page article, I
| | 00:59 |
would see those stacked vertically here,
and I could get a sense of what's going
| | 01:02 |
on with that article.
Now, if I hover over one of these, I get
| | 01:07 |
a pop-up that shows me the name and the
metadata associated with this article.
| | 01:13 |
And if I select this article, now you see
the blue highlight, I can see all the
| | 01:17 |
metadata properties over here on the
right-hand side.
| | 01:22 |
So this is a nice place for me to edit
any of the metadata, turn on the
| | 01:26 |
advertisement option so that this
particular article doesn't show in the
| | 01:30 |
table of contents.
And change things like smooth scrolling,
| | 01:36 |
horizontal swipe, and to load a custom
TOC preview Image.
| | 01:40 |
It's important to note that the article
properties are the information you see in
| | 01:44 |
the navigation system in the reader.
The name of article is different, and we
| | 01:50 |
see the name of the article at the top
here.
| | 01:53 |
This is also why we see both a name and a
title in the pop-up here.
| | 01:59 |
If I switch over to the list view, we're
going to see the article name and title here
| | 02:04 |
as well.
It's important to understand that the
| | 02:08 |
article name is what you use in Nav 2
links.
| | 02:11 |
So if you've already built these that
link to particular article, be very
| | 02:15 |
cautious about changing the article name.
The article title however is what I see
| | 02:21 |
in the reader, it's what I see in the
table of contents and other places where
| | 02:25 |
metadata about the article is displayed.
So my fixing the typo that's here, for
| | 02:33 |
the article title is fine and it will not
affect any of the links.
| | 02:39 |
Likewise any of the other metadata fields
can be changed here if I want.
| | 02:43 |
Now over on the left-hand side, we see a
couple of columns including the Order, a
| | 02:48 |
Lock and a Download Priority.
The Download Priority is how you can tell
| | 02:54 |
the Folio Producer that this particular
article should be downloaded first,
| | 02:59 |
somewhere in the middle or at a low
priority.
| | 03:05 |
An article must be completely downloaded
to the Viewer, for your consumer to read.
| | 03:11 |
So that really big important article on
the first page of the magazine is
| | 03:15 |
probably a high priority download,
whereas an advertisement is probably a
| | 03:19 |
low priority download.
The Lock option turns off the ability for
| | 03:25 |
me to edit any of the metadata, including
the article name.
| | 03:31 |
This is a good way to reduce the risk of
something accidentally being changed
| | 03:34 |
while you're working on a folio.
Now, in this particular folio, I have two
| | 03:39 |
articles, but one of the cool things the
Folio Producer can do is to add another article.
| | 03:46 |
If I Click the Add button, I now can see
the folios that I have access to.
| | 03:51 |
I'm going to switch to local spring and I'm
going to select the Two Wheels article and
| | 03:57 |
add it.
The Two Wheels article is now part of
| | 04:01 |
this production folio, and you can see
that it came in as the second article in
| | 04:05 |
the folio.
Let's go ahead and add one more.
| | 04:10 |
I'm going to go to the University Program
ads, and I'm going to select the University
| | 04:15 |
MFA article.
We'll Click Add and now that's inserted
| | 04:21 |
as well.
Since this is an advertisment, we're
| | 04:25 |
going to check the Ad option here, that way
it doesn't show up in the TOC.
| | 04:31 |
I think I also want to move the unviersity
ad to the second position.
| | 04:36 |
So if I click the Order field here and
type a 2, that moves this to the second
| | 04:40 |
position and it moves everything else
down through the article order.
| | 04:45 |
We can see the outcome of this by
switching over to the Thumbnail view.
| | 04:49 |
And now we can see, sure enough, the
university MFA ad, is the second position.
| | 04:55 |
Another way for me to change the order of
content is just scale the Thumbnails down
| | 04:59 |
a little bit, maybe I want the
neighborhood guy to be the fourth.
| | 05:04 |
I'm going to select it and now simply drag
it to change the order.
| | 05:09 |
I watch for the little blue bar on the
right-hand side and then I release the mouse.
| | 05:14 |
And I've just changed the order by
dragging articles horizontally.
| | 05:19 |
And the last topic about the Folio
Producer Editor to note is this bracket
| | 05:24 |
icon up here.
This is where I can load shared HTML
| | 05:29 |
article resources.
And what this means is, there are some
| | 05:34 |
magazine production workflows where most
of the articles, or may of them are HTML articles.
| | 05:43 |
They're written in HTML code, the
graphics are part of the code, and these
| | 05:47 |
articles may very well share things like
a common style sheet, fonts, or even images.
| | 05:55 |
Instead of having duplicates of assets,
it's easier and more efficient for you to
| | 06:01 |
have shared assets.
So you can zip up those shared assets,
| | 06:06 |
and then a Folio Producer can load the
shared assets using this button.
| | 06:12 |
That helps to make the overall size of
the folio smaller.
| | 06:17 |
So there you go.
That's what the Folio Producer Editor
| | 06:20 |
does for me.
It's a way to look at and edit metadata,
| | 06:24 |
the order of content and then to assemble
folios from other folios.
| | 06:30 |
So, take a look at it, have fun with it
and start dragging stuff around.
| | 06:40 |
| | Collapse this transcript |
| Testing production folios on devices| 00:02 |
Now, let's take a look at our work on a
device.
| | 00:05 |
We've being working in InDesign.
We've created design folios.
| | 00:09 |
We've manipulated those design folios in
the DPS web site and we've added metadata.
| | 00:18 |
Once I create a folio, even a design
folio, it's going to be visible on any
| | 00:23 |
device that's logged in using the same
Adobe ID.
| | 00:28 |
Right now, I'm taking a look at this
particular set of folios in a Grid mode.
| | 00:33 |
So I see the cover image, I see some
metadata down here, and I can choose to
| | 00:37 |
view any of these publications, because
I've already downloaded them.
| | 00:43 |
I can also take a look at this content in
a Cover mode, and now, I see the folio
| | 00:48 |
cover artwork that I loaded into these
publications.
| | 00:53 |
Across the bottom edge, I see a little
bit of metadata.
| | 00:56 |
I get a Viewing button and an Archive
button.
| | 01:00 |
The Archive button is going to delete the
local copy on my device.
| | 01:05 |
But the file is still on the website.
So archive is delete local.
| | 01:14 |
And if you look really carefully, right
beneath title, there's an asterisk.
| | 01:19 |
That asterisk indicates that this is
folio, which has not been published.
| | 01:25 |
Once you publish a folio, that asterisk
disappears.
| | 01:29 |
So, those are some of the things you can
do with the Viewer.
| | 01:33 |
And let's go back to that Grid mode now.
And I want you to notice, there's both a
| | 01:38 |
Library and a Viewer button across the
bottom.
| | 01:42 |
Let's take a look at a couple of these
Layouts.
| | 01:44 |
And we're going to take a look for the types
of things that I try to find and test for.
| | 01:50 |
So, we're going to view one particular
folio.
| | 01:52 |
And what's important is to make sure
everything works the way you expect.
| | 01:56 |
The cover is a single page.
Likewise, the ad was a single page.
| | 02:01 |
And then, when we get to the article, we
can move down through the article.
| | 02:06 |
I'm going to click to connect to the Hub
Bike information.
| | 02:10 |
Sure enough, that all works just fine.
I'm going to swipe and test the
| | 02:14 |
interactivity of the image sequence.
I'll move down and test the video.
| | 02:25 |
Within place and full-screen.
I'm going to test the features for dealing
| | 02:31 |
with that, and closing it, manipulating
it.
| | 02:35 |
That's also piloted by the operating
system of the device.
| | 02:38 |
I'll tap to play, to test this Overlay
system.
| | 02:43 |
That's all working great.
So these are the sorts of things that I
| | 02:46 |
always go in and test.
I want to make sure that everything's
| | 02:50 |
looking good.
Nifty.
| | 02:52 |
Now, it's important to consider testing
on a variety of devices.
| | 02:57 |
Because, there're some types of content
that aren't going to work everywhere, and
| | 03:02 |
that's because, right now and today,
different viewers for different devices
| | 03:06 |
have slightly different capabilities.
So I've just brought in my Xoom tablet,
| | 03:13 |
and I can see most of the same
publications here.
| | 03:16 |
And if we take a look at some of the
contents.
| | 03:19 |
So for instance, the same publication
what I can do is flip through and check
| | 03:24 |
all of this.
And everything is working the way I would
| | 03:28 |
expect it to work, so that's all good.
Since this publication was built for the
| | 03:33 |
iPad we get a little bit of letterboxing
here, and that's okay with me.
| | 03:39 |
Otherwise, I would end up designing a
Xoom-based orientation aspect ratio.
| | 03:45 |
So I'm going to double check what works in
here.
| | 03:47 |
I'm going to click on the video, and one of
the things we're going to notice is, as of
| | 03:52 |
today, the video is not functioning on
the Android tablet.
| | 03:57 |
That's one of the types of things that I
check for and I know that that's an issue
| | 04:01 |
right now.
But as the Viewer improved, we'll get
| | 04:07 |
that functionality here.
The button system is working just fine on
| | 04:12 |
this slideshow, likewise the horizontal
swipe to swap the images is working well
| | 04:17 |
as well.
I'm going to go back over to the Library.
| | 04:21 |
It's important to understand there's some
things that just plain don't work on this
| | 04:26 |
particular platform, things like swipe
direction.
| | 04:30 |
So, I end up getting an error, because
this is the publication which had a
| | 04:35 |
horizontal swipe built in to it.
And if I go over to the iPad, and take a
| | 04:42 |
look at that publication, we're going to
find out that that one works out just fine.
| | 04:48 |
So there's the standard navigation system
and here's the horizontal swipe system
| | 04:54 |
that's built in to a single article.
So that's an example of what will and
| | 05:00 |
what will not work.
Sometimes, it's a matter of the fancy
| | 05:04 |
things not working.
So, understanding when to, basically,
| | 05:09 |
recognize that a certain type of design
work isn't going to function on a tablet
| | 05:14 |
is much more valuable than getting
frustrated over it.
| | 05:21 |
So I've got video in here.
I have audio and we had an example of
| | 05:25 |
masked movies.
And let me just turn the volume down a
| | 05:30 |
little bit.
And in this particular situation, on the
| | 05:34 |
iPad, the mask change works just fine and
the video plays just fine.
| | 05:40 |
But as of today, as I'm working with
this particular content, the video work
| | 05:45 |
doesn't work on the Android, and so, I'm
not going to get upset about that.
| | 05:53 |
So it's always a matter of test,
everything that's important and critical
| | 05:56 |
to you.
Test to make sure that your links out to
| | 05:59 |
a site work and function the way you
expect them.
| | 06:03 |
And that they pop up in your Viewer the
way you expect them, whether it's in the
| | 06:08 |
viewer or outside in a browser on the
device.
| | 06:12 |
And then taking a look at things like Nav
2, so you go to the intended destination
| | 06:17 |
and if you're going to a particular page,
test that linkage as well.
| | 06:23 |
So that's the sort of thing that I always
work on testing.
| | 06:26 |
And it's important to understand and
realize that the viewer on the desktop is
| | 06:31 |
going to show me most things correctly,
but the true test is the particular
| | 06:35 |
device that you're designing for.
So test it and test it again.
| | 06:44 |
Have fun with it.
| | 06:47 |
| | Collapse this transcript |
| Publishing a folio| 00:02 |
So now, let's take a look at what is
probably the final step in the DPS
| | 00:06 |
publishing process.
And that's shifting a folio from a
| | 00:10 |
production state to a published state.
Now, we've used the Folio Producer
| | 00:16 |
Organizer to take a look at Design and
Production folios, work with metadata,
| | 00:20 |
and then go deeper to look at metadata
about articles and the order of content.
| | 00:27 |
We've done all the work to create the
publication over all.
| | 00:31 |
And we've previewed our folios using a
couple of devices to make sure that
| | 00:34 |
everything is working the way that we
intended it.
| | 00:39 |
And the design is working well.
Now it's a matter of publishing the folio
| | 00:44 |
so that it is visible to our content
viewer out in the wild.
| | 00:50 |
So, this is super easy to do.
It's a matter of selecting one of your
| | 00:54 |
folios in the Folio Producer Organizer
and then coming up and clicking on the
| | 00:58 |
Publish button.
Now you have a couple of choices.
| | 01:02 |
For instance, the status.
Status can either be public or private.
| | 01:08 |
If a published folio is private, that
means that it's not visible in your
| | 01:13 |
Custom Viewer that people have downloaded
to their devices.
| | 01:18 |
The nice thing about a private release
is, it allows the distribution servers
| | 01:22 |
and service to take a look at the
content, sort of as a final technical look.
| | 01:29 |
And if everything passes, then you're
ready to go.
| | 01:33 |
The other nice thing about private is
it's a way to hold the publication until
| | 01:38 |
the day that you need to release it.
And the day it goes live is the day that
| | 01:43 |
you change the status to public.
Once you switch to public, that means
| | 01:49 |
every one of your readers using your
Custom Viewer can see and now purchase or
| | 01:54 |
download the content.
The second choice is whether your content
| | 01:59 |
is free or retail.
If you choose retail, then the pricing is
| | 02:03 |
going to be set either in an App Store
for inept purchases, or through a
| | 02:08 |
subscription service.
And the last choice is the product ID.
| | 02:15 |
If you're working with commercial
content, if you're going to be charging
| | 02:19 |
for it, the product ID of the folio has
to match the product ID of your viewer.
| | 02:25 |
So, I'm going out as free content and one
of the recommendations for the product ID
| | 02:31 |
would something like a reverse DNS
address.
| | 02:35 |
So, I might go something like Come,
Adobe, colon, and then Summer, because
| | 02:41 |
I'm talking about the Summer publication.
Once I click Publish, the folio changes
| | 02:49 |
from a Production Folio to a Published
Folio.
| | 02:53 |
And you now can see the distribution
service looking at and creating the final
| | 02:57 |
folio and manifest information, which is
what will be downloaded to the Custom
| | 03:02 |
Viewer once I make this public.
So, that's how easy it is to hit the Go
| | 03:10 |
Switch, shall we say.
Once the upload is complete, you can see
| | 03:15 |
that the buttons for the distribution
service have changed.
| | 03:19 |
So, we now get an Update button, which is
going to be important if there are any
| | 03:23 |
changes to the content or any updates to
the materials inside of the folio.
| | 03:30 |
Or Removed, to pull something out of
circulation.
| | 03:34 |
So, that's how you generate and control a
Published Folio in the DPS workflow.
| | 03:42 |
| | Collapse this transcript |
| Designing for multiple devices: Renditions| 00:00 |
So in a DPS workflow, we typically design
for the dimensions of the device we
| | 00:06 |
intend to show our stuff on.
One of the challenges though, is there
| | 00:13 |
are multiple devices.
And many of these devices have different
| | 00:18 |
resolutions and screen aspects ratios.
So, how do you design for different devices?
| | 00:25 |
Do you design for different devices?
We're going to take a quick look at
| | 00:29 |
what's called Renditions, which is a way
of designing and building separate folios
| | 00:34 |
for different dimensions and devices.
Which is then automatically downloaded
| | 00:41 |
correctly to the device.
So, let's open up the Digital Publishing
| | 00:46 |
Folder, go into Articles > Start.
And we've been working a lot with a
| | 00:52 |
series of files called Cover Park iPad.
These files are built at 1024 by 768.
| | 01:01 |
In another folder, I have a set of files
for an Android-based device.
| | 01:08 |
So, these are built at by 1280 by 800
pixels.
| | 01:12 |
They both are supposed to do the same
thing.
| | 01:14 |
They're both covers for the same
publication.
| | 01:17 |
But we want them to look right on each
device automatically.
| | 01:22 |
So, what we're going to do is build two
separate folios, and then connect them in
| | 01:27 |
some ways involving the DPS Subscription
System.
| | 01:33 |
So, let's go ahead and shift over to
InDesign.
| | 01:35 |
In the Folio Builder panel, I'm going to
create a new folio.
| | 01:40 |
This folio will be cover for iPad.
It's 1024 by 768 pixels.
| | 01:44 |
We click OK.
And now at the Article Level, we're going
| | 01:46 |
to go ahead and import that article.
So, this is going to be the cover.
| | 01:51 |
And now we point to the location.
So, that's the Desktop > Digital
| | 02:04 |
Publishing > Article Start > Cover Park
iPad.
| | 02:09 |
And here's where we see the _h and _v
files.
| | 02:14 |
Let's click Open and OK.
And those two documents are now brought
| | 02:18 |
in as the cover article for this folio.
So, this deals with the iPad.
| | 02:25 |
Everything is cool with there.
If we go back up to the Folio Level and
| | 02:31 |
build a new folio, we're going to call
this one Cover Android.
| | 02:41 |
Instead of working with 1024 by 768, I
need to make the width and height different.
| | 02:49 |
This is going to be 1280 by 800.
Those are the dimensions of the documents
| | 02:53 |
that I'm going to be importing as an
article.
| | 02:56 |
It's important that the dimensions and
the aspect ratios match.
| | 03:01 |
I'm going to click OK.
And we're now at the Article Level inside
| | 03:05 |
the cover Android Folio.
Again, we're going to go in Import.
| | 03:11 |
We're going to call this Cover, and then
point to the location with the files.
| | 03:17 |
This time, I'm going into the Cover Alt
folder, and choosing the Cover Park
| | 03:23 |
Android 800 folder which has an _h and _v
document.
| | 03:29 |
We'll import these two files, and then
we're going to go back and take a look at
| | 03:36 |
the folios and picking it up.
Let's go back up to the top.
| | 03:43 |
We see the two folios here.
And to build a rendition, this is really
| | 03:47 |
a feature of a publication which is going
to go into distribution.
| | 03:53 |
To go into distribution to sell it, to
put it into a custom viewer, you need to
| | 03:59 |
have a DPS Subscription.
Part of what that subscription gives you
| | 04:04 |
is access to a website which allows you
to work with the Folio Producer Organizer.
| | 04:11 |
And you can see here in the Organizer,
the cover Android Folio and the Cover
| | 04:17 |
iPad Folio.
The folio name is what we build in the
| | 04:22 |
Folio Builder over an InDesign.
These are two different sets of
| | 04:27 |
dimensions and representations.
But they should be used in the same
| | 04:32 |
publication, but using the correct one on
the correct device.
| | 04:38 |
And the way the correct one on the
correct device is indicated is by having
| | 04:43 |
matching Publication Names and Folio
Numbers.
| | 04:47 |
So, let's come on in here and say this is
Local Summer.
| | 04:54 |
I'm going to press Tab, the Folio Number
is going to be L for local.
| | 05:00 |
I'm going to call this 010.
So, by having identical information in
| | 05:06 |
both the Publication Name and Folio
Number fields, these two folio's work as
| | 05:11 |
separate renditions.
So, that's what it takes to build
| | 05:21 |
renditions and your Custom Viewer then
delivers the correct rendition to the
| | 05:26 |
correct device.
So, there you go.
| | 05:31 |
An introduction to renditions.
And you probably should review the
| | 05:35 |
information in the documentation for DPS.
Because aspects of this part of the
| | 05:40 |
workflow are likely to change a little
bit over time.
| | 05:44 |
So, go do a little reading, play around
with this, and have fun.
| | 05:51 |
| | Collapse this transcript |
| Preparing for Viewer Builder| 00:02 |
Throughout this workshop, I've talked
about things like the Adobe Content
| | 00:06 |
Viewer and Custom Viewers.
We're going to start talking about what it
| | 00:11 |
takes to prepare to start building a
Custom Viewer.
| | 00:15 |
Now, this is going to start over in the
Digital Publishing Suite dashboard.
| | 00:19 |
You'll use a DPS subscription to log into
the account, and then select and download
| | 00:24 |
the Viewer Builder.
This is a desktop application, it's an
| | 00:29 |
AIR application, which means Adobe
Integration Runtime, and this one
| | 00:33 |
application works on both Macintosh and
Windows.
| | 00:37 |
So, this application, once you launch it
and log in, looks like this.
| | 00:44 |
You can see I've already built an android
based application and we'll build an iPad
| | 00:49 |
based app in a little while.
Now, the Viewer Builder is going to need
| | 00:54 |
to have a couple of pieces of information
and I need to prepare files ahead of time.
| | 01:00 |
These types of files are going to include
things like My Content.
| | 01:05 |
A production folio or published folio is
going to be important content to inject into this.
| | 01:11 |
I also need my developer credentials and
certificates ,so that I can generate the application.
| | 01:18 |
And the third thing I need to build is
artwork, which is used for both the
| | 01:21 |
application icon and the splash screen
that you see when you launch the app.
| | 01:27 |
So, we're going to talk a little bit about
that artwork now.
| | 01:31 |
I'm going to open the Digital Publishing
folder.
| | 01:34 |
Then select and open the video to brain
bonus files.
| | 01:38 |
And at the bottom, select and open the
Viewer Builder Artwork folder.
| | 01:42 |
Now, I really get along with InDesign,
which means I tend to use it whenever I can.
| | 01:48 |
And let's take a quick peak at a couple
of these files.
| | 01:52 |
So, I'm going to select a couple of these,
open them on up.
| | 01:55 |
And let's see what I've built.
Now, there's a series of icons I need to
| | 01:59 |
make, at a couple of different sizes.
Some are used when I generate an Android
| | 02:05 |
app, and some of them are used when I
generate an iPad app.
| | 02:10 |
So, here's an example of a 72 pixel
square InDesign document which I'll use
| | 02:15 |
to generate a JPEG.
And then, process into the correct file format.
| | 02:21 |
You can see I've built both horizontal
and vertical splash screens or launch
| | 02:26 |
screens for the iPad as well.
It's important when you construct these,
| | 02:32 |
to keep your artwork close to the center
of the screen in case any cropping occurs.
| | 02:37 |
And this art is only going to be visible for
a couple of seconds as you launch.
| | 02:42 |
I recommend that your Splash Screens, not
be your Folio Covers because that would
| | 02:47 |
just make it look like your launch time
is too long.
| | 02:52 |
So, I'm going to take each of these InDesign
files, which is a Splash Screen or
| | 02:57 |
Application Icon, and export these as a
JPEG.
| | 03:02 |
So, let's simply come on down, Export.
Choose the JPEG file format.
| | 03:08 |
And then, I've exported into this folder
of content.
| | 03:13 |
I then need to open each of these JPEGs
up, and save these JPEGs as PNG files,
| | 03:18 |
which is what we find in the VB icons for
local folder.
| | 03:25 |
So, I've built all of my Splash Screens,
all of my Application Icons at various sizes.
| | 03:33 |
And now, I'm prepared to start using the
Viewer Builder to build my custom application.
| | 03:40 |
| | Collapse this transcript |
| Viewer Builder| 00:02 |
Now it's time for the final step in the
dps process, that's building your custom viewer.
| | 00:09 |
We're going to use the viewer builder to
do this, and I've prepared all my files.
| | 00:13 |
I have my credentials and certificates.
And I've built all the splash screens and
| | 00:19 |
application icons required to do this So
absolutely everything is prepared, to do
| | 00:25 |
the final thing.
I'm going to use the Viewer Builder to do this.
| | 00:30 |
And I've signed in using my DPS
credentials.
| | 00:34 |
I'm going to come to the bottom edge, and
click New.
| | 00:37 |
And it's probably good to note that, the
really cool thing about the Viewer
| | 00:41 |
Builder is This is going to build the
application for me and I've got this
| | 00:45 |
choice today of going to either Android
or Ipad.
| | 00:51 |
As time goes on we're likely to see
additional viewer builders here.
| | 00:56 |
So today we're going to go in the Ipad
direction.
| | 01:00 |
And I click to select it.
And now click the next button.
| | 01:04 |
Now I was pretty explicit about preparing
a bunch of things up front, before you go
| | 01:09 |
into the Viewer Builder, and that's
because we have a lot of things to choose
| | 01:13 |
here and a lot of selections to make.
So first off, which Viewer version do you want?
| | 01:22 |
The newer versions are going to have more
support for more of the modern things.
| | 01:27 |
Version 12 is what's matched to the DPS
tools that I'm using.
| | 01:33 |
Version 11 is still pre-release tooling.
So, I'm going to go with version 12.
| | 01:40 |
Then you can choose a viewer type.
This can range from an Adobe hosted
| | 01:45 |
multi-issue application.
Which would allow periodic updates to the
| | 01:50 |
content new folios added.
And updating a folio that's already been released.
| | 01:57 |
A built in single issue publication would
be a single application icon with a
| | 02:02 |
single piece of content.
The intention of a single issue is you're
| | 02:07 |
not going to be adding monthly updates,
quarterly updates.
| | 02:12 |
It's a solitary, self-standing
publication.
| | 02:16 |
The entitlement and subscription options
are oging to be detailed in the help
| | 02:19 |
system and are going to vary slightly as
time goes on.
| | 02:24 |
Any time you want a little extra
information, hover over one of the
| | 02:27 |
information icons, and a popup will give
you a bit more info.
| | 02:32 |
Now if we move down to the viewer name,
this is the name of the application that
| | 02:36 |
we'll be seeing on my device.
You're going to want to keep this name
| | 02:40 |
rather short, so it doesn't get
truncated.
| | 02:44 |
I'm going to call this one local the viewer
title is what I see in the library view
| | 02:49 |
it's the title of my publication and the
entire library.
| | 02:55 |
So, I might go with local magazine the
Adobe id for the title.
| | 03:03 |
Is the log on information you use with
your DPS subscription.
| | 03:08 |
And the password is the matching password
for that Adobe ID.
| | 03:14 |
On the iPad you have the optoin of using
PDF zooming.
| | 03:18 |
This is only available on the iPad today.
And in an article which uses PDF as the
| | 03:24 |
compression method this would allow
readers to use pinch and zoom gestures to
| | 03:29 |
Zoom In on any page in an article that
does not have any interactivity.
| | 03:37 |
So be aware of the option and don't get
frustrated by the limitations at this point.
| | 03:43 |
We're going to move on to the next screen
now, and this is where we're going to start
| | 03:48 |
loading content for the icons and the
splash screen.
| | 03:53 |
So if you hover over any of the
information icons it gives you
| | 03:56 |
specifications and information about the
type of image.
| | 04:00 |
That's what I've already built.
So if I go to the desktop on my machine,
| | 04:05 |
digital publishing, video to brain bonus
files, viewer builder art, VB icons for local.
| | 04:12 |
Now it's a matter of looking at the title
in this dialog box and selecting the
| | 04:16 |
matching icon.
So I'm loading the 29 pixel square image.
| | 04:22 |
Now we find the 50 pixel square image and
finally the 72 pixel square image.
| | 04:31 |
We've just loaded the application icons.
Now, the IOS system is going to do things
| | 04:37 |
like round the corners for us, and we
have the option to add shine to our icons.
| | 04:44 |
This will give it a little highlight
across the upper edge and make it look a
| | 04:47 |
little bit more three dimensional.
Now we move on and load the landscape and
| | 04:53 |
portrait splash screens.
We also generated those for the iPad
| | 04:58 |
we'll choose the 1024 labels.
I'm choosing the landscape first, that's
| | 05:05 |
the horizontal and then, the vertical.
Those are the things that are required.
| | 05:11 |
And I can see each of the icons here on
the left-hand side.
| | 05:15 |
And whichever one of the splash screens I
choose.
| | 05:19 |
So now I move on enterprise subscribers
have options for using some custom
| | 05:28 |
toolbar icons.
This is a technology that's currently
| | 05:33 |
developing, so we're not going to delve to
deeply into this at all.
| | 05:37 |
Now it's a matter of loading the
certificates.
| | 05:41 |
You can see for a IOS development, I have
distribution and developer credentials
| | 05:46 |
that I need to load.
So now it's a matter of pointing to my credentials.
| | 05:53 |
I'm going to go and look at my certificates.
I'm looking for the distribution file first.
| | 05:57 |
Here are my (UNKNOWN) certificates and
the password, then I need to load the
| | 06:04 |
Distribution Mobile Provisioning File.
Again, it's in that same folder.
| | 06:14 |
And there's the Distribution Mobile
Provisioning file.
| | 06:18 |
The Developer Certificates need to go in
next.
| | 06:21 |
So there are the dev certificates and the
password.
| | 06:32 |
Then the Developer Mobile Provisioning
file.
| | 06:39 |
When I'm working with a developer build,
it's going to be important for me to allow
| | 06:43 |
my developer testers to side-load my
application.
| | 06:48 |
This means I can give them the IPA file
and the Provisioning file, and they can
| | 06:52 |
drag and drop them into iTunes to load
this particular testing build onto their
| | 06:57 |
iPads to test.
The Application ID Override system is
| | 07:02 |
going to be important for people working
with an interprise distribution, which is
| | 07:07 |
a private and internal thing that's
possible if you are an interprise
| | 07:11 |
developer for iOS.
You also have options, the trigger or
| | 07:17 |
turn on, push notifications and how those
work.
| | 07:21 |
You push the Next button and now we see
build details, which really has to do
| | 07:25 |
with the analytics data collection
information.
| | 07:30 |
I don't have the provisioning that
includes this data so it's not filled in
| | 07:34 |
here and this is information that is just
plain inserted automatically if you have
| | 07:39 |
those credentials.
So there's nothing here for me to type.
| | 07:44 |
Now it's simply a matter of me clicking
Submit Build.
| | 07:48 |
And now that build request has been sent
to the servers and Viewer Builder is now
| | 07:54 |
going to watch for and offer to manage
it.
| | 08:00 |
Once the build is complete, for instance
like this android build, I can click the
| | 08:04 |
download button and get a local copy of
the installer to work with.
| | 08:10 |
I can also click the approval status.
And this is a dialog where I can tell
| | 08:15 |
the system the status of my application.
Has it been approved?
| | 08:19 |
And what the app URL is.
Once the app is complete you can also
| | 08:23 |
change the approval status.
Once you've submitted your application
| | 08:29 |
for approval by a marketplace or app
store, and once it's been approved you'd
| | 08:34 |
change the status here and include the
app's URL so that this can now be posted
| | 08:38 |
in the digital publishing gallery at
Adobe.com.
| | 08:44 |
So now we've finished the process of
building the custom app.
| | 08:49 |
It's a matter of submitting it to an app
store or marketplace.
| | 08:53 |
And now people around the world can
download your content, install it and
| | 08:56 |
start reading and experiencing your
interactive and highly immersive magazines.
| | 09:02 |
I hope you had fun with this, it's pretty
mind bending how cool this stuff is and
| | 09:06 |
it's changing on an ongoing basis.
So have fun with it.
| | 09:14 |
| | Collapse this transcript |
|
|
