IntroductionWelcome| 00:05 | Hello. I'm James Lockman and welcome to Up and
Running with the Adobe Digital Publishing Suite or DPS.
| | 00:11 | Advertisers, publishers and corporations are
all using this emerging publishing platform.
| | 00:16 | This course requires an
understanding of how to use InDesign.
| | 00:19 | We'll see how to add movies and interactivity to
InDesign documents and then publish them as tablet applications.
| | 00:28 | I'll begin by comparing DPS to print and EPUB
and we'll see how to set up a document for DPS.
| | 00:34 | Then we'll see how to use the DPS tools to
add interactivity to our InDesign projects.
| | 00:40 | Next, we'll see how to turn our InDesign documents into
interactive folios that can be viewed on tablet devices.
| | 00:46 | Lastly, I'll show you how to bundle
that document with others to create an
| | 00:50 | interactive experience through
Adobe's Digital Publishing service.
| | 00:55 | Now let's get up and running with
the Adobe Digital Publishing Suite.
| | Collapse this transcript |
| Prerequisites| 00:00 | This course has a number of prerequisites.
| | 00:02 | For designing DPS documents
you're going to need the following:
| | 00:06 | Working knowledge of InDesign CS5 or CS5.5.
| | 00:09 | you're going to need to know how to make the
following types of interactive elements inside of InDesign:
| | 00:14 | multistate objects, hyperlinks. You're going
to need to know how to import audio and video.
| | 00:20 | You're also going to want to have one or more of the
following tablet devices available for testing your projects:
| | 00:25 | an iPad, an Android tablet
or a Blackberry PlayBook.
| | 00:28 | You're definitely going to want to have whichever
device you're going to be targeting for your projects.
| | 00:33 | For publishing your projects,
you're going to need the following:
| | 00:36 | a DPS service subscription, either at the
developer or the enterprise account level.
| | 00:41 | If you want to publish to the Apple
App Store, then you are going to need
| | 00:44 | developer certificates from Apple and
you're going to need an App Store account.
| | 00:49 | You can start that
process at developer.apple.com.
| | 00:52 | For publishing to the Android Marketplace,
you're going to need either self-signed certificates
| | 00:56 | or third-party
certificates for your Android devices.
| | 01:00 | You're also going to need an
Android Marketplace account.
| | 01:02 | You can start that
process at market.android.com.
| | 01:06 | If you're going to target the
Blackberry PlayBook, then you're going to need
| | 01:09 | a RIM developer account and a
Blackberry App world account.
| | 01:13 | You can start that process
at appworld.blackberry.com.
| | 01:17 | Once you have all of these in place, you're ready to get
up and running with the Adobe Digital Publishing Suite.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you re a premium member of the
lynda.com Online Training Library,
| | 00:04 | or if you're watching this tutorial on a DVD-ROM, you will have
access to the Exercise Files that are used throughout this title.
| | 00:10 | The Exercise Files are organized by chapter.
| | 00:12 | Inside of each chapter folder, there's going to be the
InDesign document that you need to be able to complete those lessons.
| | 00:18 | These InDesign files refer to assets that
are going to be located in the Assets folder.
| | 00:23 | These are common to all of the InDesign files.
| | 00:26 | Those InDesign files look for links
that are in the Links folder here.
| | 00:30 | In addition, we've included some icons
for building the Viewer applications and
| | 00:34 | some additional articles that
will be used for building our folios.
| | 00:38 | In addition, for folks who are using InDesign
CS5 versus CS5.5, we've included some IDML files.
| | 00:45 | These IDML files are exactly the same as the InDesign
CS5.5 files that are included in the chapter files above.
| | 00:51 | Whether you're using InDesign CS5, or InDesign
CS5.5, you'll be able to follow along with me.
| | 00:57 | If you're a monthly subscriber or
an annual subscriber to lynda.com,
| | 01:01 | you won't have access to the Exercise Files, but you
can follow along from scratch with your own Assets.
| | 01:07 | Let's get started.
| | Collapse this transcript |
|
|
1. Getting to Know Digital Publishing Suite (DPS)Reviewing the DPS workflow| 00:00 | The Adobe Digital Publishing Suite is a new way to
create content and then deliver it to mobile devices.
| | 00:06 | The workflow is a little bit different than
what you might expect from traditional print,
| | 00:09 | and so I want to go over how
things work in the DPS workflow.
| | 00:13 | First of all you're going to
be creating content in InDesign.
| | 00:17 | You can use InDesign CS5, or InDesign CS5.5.
| | 00:20 | You will use some tools that will be provided by the DPS
toolkit and this is the Overlay Creator in the Folio Builder.
| | 00:28 | The Overlay Creator is where you create interactive content that
will display as interactive overlays in your publication on your device.
| | 00:35 | The Folio Builder is where you bind
together various chunks of content.
| | 00:40 | The chunks of content are put together into this thing called a
Folio and we'll talk about how to build folios in another movie.
| | 00:47 | The folios themselves contain articles.
| | 00:50 | If you think about how a magazine is
constructed, this makes a lot of sense.
| | 00:53 | A magazine will have many articles that
are bundled together into the magazine.
| | 00:57 | In the DPS world, each of those articles becomes
its own chunk and therefore its own InDesign file.
| | 01:03 | This means that unlike a traditional
print workflow where you might have had
| | 01:07 | one InDesign file that was
your entire print publication,
| | 01:10 | in the DPS workflow there will be multiple
InDesign files that will become your DPS publication.
| | 01:17 | In addition, each article could be in
the portrait or the landscape orientation.
| | 01:20 | Of course this is dependent upon
how the user holds their device.
| | 01:24 | In the DPS workflow you have to create
both a horizontal and a vertical orientation,
| | 01:28 | in order for the user to be able to see
your publication in both orientations.
| | 01:33 | It's not required that you build a
horizontal and a vertical orientation, however;
| | 01:37 | you could pick one or the
other for your publication.
| | 01:40 | The restriction is that your publication has to
have the same orientations for the entire publication.
| | 01:46 | Once you bundle these articles together in the Folio Builder,
you then use the Viewer Builder to create a Custom Viewer.
| | 01:52 | This Custom Viewer then gets deployed through the DPS system onto
devices such as an iPad, a Blackberry PlayBook or an Android tablet.
| | 02:01 | Also involved in this workflow is rights management that
gets handled by Adobe and also by your distribution channel.
| | 02:08 | If that distribution channel happens to be Apple,
then you'll need to set up an account with them.
| | 02:12 | If you choose to distribute with Android or Blackberry PlayBook then,
you'll have to make arrangements with those distribution channels as well.
| | 02:19 | Regardless of how you choose to
distribute, you will have to make an arrangement
| | 02:22 | with one or more of those distribution channels
in order to distribute your content using DPS.
| | 02:29 | Another aspect of the DPS
service is that it includes analytics.
| | 02:33 | This means that the Adobe Online
Marketing Suite, otherwise knows as Omniture,
| | 02:36 | is keeping track of how your users are
using and reading those digital publications.
| | 02:42 | This can be very valuable information
for your advertisers if you're a magazine,
| | 02:47 | or for you as a content creator as you're looking to
create new content that might be appealing to the market.
| | 02:53 | When you put all of this together you have a complete
system that allows you to create content in tools that you know,
| | 02:58 |
add interactivity within that toolset, create the digital
publication and then finally deliver it to your end-user.
| | 03:06 | In order to make that happen, you've got to have your Digital Publishing
Suite subscription and your relationship with your distribution channels.
| | Collapse this transcript |
| Comparing DPS with print| 00:00 | Many publishing companies have an entrenched
print workflow and they very much understand
| | 00:04 | not only the economics of a print workflow, but also
what are the rationales for continuing in a print workflow.
| | 00:10 | They're thinking about DPS and they want
to understand why we might want to do that.
| | 00:14 | You've probably seen examples of DPS
publications in the news. That's great!
| | 00:19 | I do want to take a moment
though to compare print in DPS output.
| | 00:23 | First of all your print
publication is going to be static.
| | 00:27 | This means that all of the content is going to be
fixed on the page and isn't going to change over time.
| | 00:32 | In a DPS publication that isn't always the case. You
can have content that will in fact change over time.
| | 00:39 | In this case for instance, this area is connected to the Internet. Its
content changes based on the content on the net. That's pretty amazing!
| | 00:47 | Another thing that's important to note is that a
print publication is completely self-contained.
| | 00:51 | When we're looking at a print publication, all of
its contents are within the confines of its bindings.
| | 00:56 | This means that the reader knows that all of
what they need to get is within this document.
| | 01:00 | In the case of a DPS publication, we can
refer to content outside of the document.
| | 01:06 | As I just showed, we have the ability to go out to the web and
bring in content that would be up-to-date in areas of the publication.
| | 01:13 | This enables you as a publisher to be able to bring your
content up-to-date without having to re-issue new printed versions.
| | 01:21 | Another aspect of a print publication
is that there isn't any interactivity.
| | 01:25 | It's true that if you have a puzzle book or
something along those lines, there is some interactivity,
| | 01:29 | and then you have got to fill in the blanks or fill in the
holes, but that in itself is destructive to the publication.
| | 01:34 | In the case of a DPS publication, there
is a lot of interactivity that can go on.
| | 01:39 | As we look at different parts of DPS, there are many
different interactive elements that can be employed.
| | 01:45 | This one allows us to touch
and move a stack of images.
| | 01:48 | We've seen earlier that we can interact
with the Web directly, we can watch movies,
| | 01:55 | we can have slide shows, and we can look at images a
little bit more closely by using our Pan and Zoom options.
| | 02:04 | We will see in other movies how
to build all of this interactivity.
| | 02:08 | The important thing to note is that a DPS publication
is by nature highly engaging and highly interactive.
| | 02:15 | This is very appealing not only to
publishers, but also to advertisers.
| | 02:19 | If you're a magazine publisher, this is a great way
for you to add value for your advertisers, because
| | 02:25 | your advertisers will know that your user is going to be far more deeply
engaged in the publication than they might have been with the print version.
| | 02:33 | Another thing to note is that if you have references
to other publications within your print publication,
| | 02:38 | it's going to require physical access to those
other publications to be able to understand the content.
| | 02:45 | If you look at a book and at the end of the book
there's a bibliography for instance, that bibliography
| | 02:50 | is really an invitation to go to the library and check out all of
those other books so that you can read and understand the references.
| | 02:56 | In the case of DPS, I can have hyperlinks
that go directly to that linked content,
| | 03:01 | that will allow me to view that content
within the context of the DPS publication.
| | 03:08 | This allows you, the publisher, to retain
the focus of the reader on your publication.
| | 03:13 | If a reader has to go to an outside publication to be able to look at
that reference, you've lost their attention and they might not come back.
| | 03:21 | In the case of DPS, your user stays
within the context of the publication,
| | 03:25 | so they're always reminded, this is
where I am, this is where I come back to.
| | 03:29 | I'm not saying the DPS is better than print.
| | 03:32 | These are different media, and so, when you're making your
business decisions about how to produce your publications,
| | 03:38 | it matters that you understand the
differences between these two media.
| | 03:43 | Another important factor is
the economics of your reader.
| | 03:46 | In the case of a print publication, a print
publication is usually accessible to the reader.
| | 03:50 | They don't have to shell out a lot of money
to be able to get that book in most cases.
| | 03:55 | However, for a DPS publication, while the publication itself
might not be expensive, the device on which it will be read is.
| | 04:03 | This absolutely provides a
division between your readers.
| | 04:06 | In a print world, your books are accessible; they can be read both
by a person who will purchase it or by someone who goes to a library.
| | 04:13 | In the case of a DPS publication, the reader
has to have a device to consume that publication;
| | 04:19 | they have to be able to afford that device, so that
they can then take advantage of that interactivity.
| | 04:25 | This sets up a natural division, so you have to be thinking
about who you want to reach and how big you want your market to be.
| | 04:32 | More and more publishers of many different types
of content are looking towards digital versions.
| | 04:37 | In some cases it's reactionary; they're just saying,
hey, I've got to do this, because I was told to do this.
| | 04:42 | In other cases, they're really
thinking about the business and understanding
| | 04:46 | that there's some real value and some real
opportunity for them to make some money in this new media.
| | 04:50 | While it may seem like I've been saying that DPS is the way to go and
that you should abandon your print publications, that's not the case at all.
| | 04:58 | Many companies choose to augment their print
publications with DPS and that's a great strategy going forward.
| | 05:05 | You'll be the one to make that
business decision for yourself,
| | 05:08 | but understand that having a blended approach
makes it possible for you to reach a larger audience
| | 05:13 | and to build more engaging content that's
going to be very appealing for your advertisers.
| | Collapse this transcript |
| Comparing EPUB with DPS| 00:00 | Many people wonder about the
difference between EPUB and DPS.
| | 00:05 | An EPUB is a document that is designed
to be viewed on any number of eReaders.
| | 00:09 | DPS publications are often designed to
be viewed on a single type of device.
| | 00:14 | In addition to that, there are some
other factors that separate EPUB from DPS.
| | 00:19 | An EPUB is going to have limited interactivity.
| | 00:22 | The EPUB specification is based on a very old
HTML spec and therefore, it's not going to be able to
| | 00:28 | to incorporate many of the types of interactive features
that you might expect from today's digital publications.
| | 00:35 | A DPS publication is going to
afford you broad interactivity.
| | 00:38 | This interactivity might come from the built-in overlay tools, or it
could be referred web content that's being shown in a web content overlay.
| | 00:45 | Regardless, the DPS version is going to be
a much more interactive type of publication.
| | 00:51 | In EPUB there is a limited support for video
. There aren't many devices that can play it.
| | 00:56 | iBooks, as one of the readers
on an iPad, can play some video.
| | 01:01 | In the case of DPS, mp4 video is going
to be supported on all the platforms.
| | 01:06 | In the case of EPUB, your layout
is going to depend on the device.
| | 01:10 | Each device is going to have different
dimensions, and as you go through an EPUB document,
| | 01:15 | you'll find that the layout will
change based on the shape of the device.
| | 01:21 | In this case, I'll make my reader smaller and you can see
that my content is reflowing to fit the new shape of my reader.
| | 01:28 | This means that you can't depend on how a
reader is going to be looking at your content.
| | 01:33 | You can help control how the
content appears and so you can test it.
| | 01:37 | For instance, I can ensure that these two images are always
side-by-side and that they fill the space that's provided.
| | 01:44 | However, I can only have one column, and in that
case all of my copy is going to read from top to bottom.
| | 01:51 | I need to very carefully design how my content is going to change from being,
say a multi-column layout in InDesign, to a single column layout in an EPUB.
| | 02:00 | To learn more about EPUB design, you might want to
take a look at one of the EPUB courses at lynda.com.
| | 02:06 | In the case of DPS, your layout is going
to exactly match the layout in InDesign.
| | 02:11 | When we're designing our DPS publications, we're designing
it with the viewing window of the specific device in mind.
| | 02:18 | This means that when I'm
designing my publication for DPS,
| | 02:21 | I'm thinking specifically about how it's going to
appear on an iPad, on a PlayBook, or on an Android Tablet.
| | 02:27 | Another thing that's important to note is that
content inside of an EPUB is going to be accessible.
| | 02:33 | This means that as I'm looking at copying an EPUB, I'm going to
be able to select it, copy it, and then use it in other places.
| | 02:39 | With DPS that isn't possible. In DPS your
content gets turned into images in the background.
| | 02:45 | That will look great on screen, but they just
aren't selectable in the same way that an EPUB is.
| | 02:51 | Another thing that you can do with an EPUB is
to create Bookmarks and other types of Notations.
| | 02:56 | This is not going to be
possible in a DPS publication.
| | 03:00 | Another aspect of EPUB is that it is going to have digital rights
management that's going to be provided either by you or by a third party.
| | 03:08 | This means that at the end of the day you're going to be using the
Adobe Digital Editions technology, and we're looking at that right here.
| | 03:15 | The Adobe Digital Editions technology
allows you to take EPUB and PDF content
| | 03:20 | and then either lend it to somebody for a limited
period of time or to grant them rights in perpetuity.
| | 03:25 | For DPS you're going to be using one of a few
rights managed channels, this might be the Apple store,
| | 03:33 | this might be the Blackberry App World,
it might be the Android Marketplace,
| | 03:37 | in either case the rights are going to be
managed by that particular distribution channel.
| | 03:42 | Another thing to consider is
the installed base of devices.
| | 03:46 | In the case of EPUB, there are many, many,
many devices out there that can read EPUB.
| | 03:51 | These include all the devices built by Apple, it
includes devices on the Android and the BlackBerry platforms,
| | 03:56 | as well as many, many other mobile devices.
| | 03:59 | It also includes desktop products.
| | 04:02 | In the case of DPS, the endpoint is always going to be either an
iOS device, an Android device, and eventually a Blackberry PlayBook.
| | 04:10 | Other platforms are likely to be included in the
future, however Adobe has made no announcement about that.
| | 04:16 | So at the end of the day the real question is
EPUB or DPS, what's most appropriate for my business?
| | 04:21 | In the educational or technical publishing
arenas, EPUB has been around for a long time.
| | 04:26 | It's a great platform and allows
publishers access to many many, many students.
| | 04:30 | In the case of DPS though,
it's a very different paradigm.
| | 04:33 | However, the interactive features are making that to
be a very attractive platform for those publishers.
| | 04:39 | There are challenges in both cases, and you'll want to explore
EPUB and DPS before you jump in and start to plan your documents.
| | 04:47 | If you're already using EPUB, take a look
at DPS as a way to augment your workflows.
| | 04:52 | If you're not using either EPUB or DPS, then think
very carefully about where your consumer base is,
| | 04:58 | what types of content that you're creating, and how do
you want your user to be able to interact with that content.
| | Collapse this transcript |
| Setting up the DPS InDesign tools| 00:00 | In order to use the Digital Publishing Suite,
you've got to have the appropriate tools installed.
| | 00:05 | If you're using Creative Suite 5.5, then the
tools are installed when you install InDesign.
| | 00:09 | Those tools are out-of-date
however and they do need to be updated.
| | 00:13 | If using InDesign CS5, you're going to have to
download the tools from Adobe.com and then install them.
| | 00:19 | To update the tools in InDesign CS5.5; go
to Window > Extensions and Folio Builder.
| | 00:26 | This is the default state for
the folio builder InDesign CS5.5.
| | 00:31 | You can click on Learn More to be taken
to the Digital Publishing Suite web site,
| | 00:35 | or click on Download Update
to download the latest tools.
| | 00:39 | I'm going to download the latest tools now.
| | 00:41 | You'll want to grab the latest
version that's available for your platform.
| | 00:47 | If you're downloading the producer
tools for CS5 for the first time,
| | 00:51 | you'll want to get the Folio Producer tools for
InDesign CS5 - all languages, that should be listed at the top.
| | 00:56 | Then go and get the
latest update and apply that.
| | 00:59 | In my case, I'm going to grab the latest
update version 1.1.1 for InDesign CS5.5.
| | 01:10 | This has now downloaded the patch. I need to
open and run the patch in order to fix InDesign.
| | 01:15 | You'll need to quit InDesign
before you can load the patch.
| | 01:25 | While I'm loading Digital Publishing 1.1.1.
352, you may be installing a later version.
| | 01:32 | That's ok. Make sure that you have the latest
version when you download that from the web site.
| | 01:37 | The second install is the Content Viewer.
| | 01:39 | It's an AIR application that allows you to view your
folios while you're working on them on your computer.
| | 01:44 | I've already got it installed,
so I'm seeing this window.
| | 01:47 | If you don't have the Content Viewer installed, or if you have an older
version of the Content Viewer installed, then go ahead and update it now.
| | 01:56 | Now that the updating process is complete, you can click Quit
and then restart InDesign to begin working with your DPS projects.
| | Collapse this transcript |
| Determining your digital publishing market| 00:00 | You might be wondering whether the Digital
Publishing Suite is right for your publications.
| | 00:04 | I want you to think about the
types of publications that you make
| | 00:07 | and also the number of publications that you make, and
finally, the number of readers for those particular publications.
| | 00:16 | With Adobe's Digital Publishing Suite, you need
to be thinking about your content in the aggregate.
| | 00:20 | I know that many companies isolate
different titles as different business units.
| | 00:24 | This means that each of those titles is going
to be responsible for its own profit and loss.
| | 00:29 | However, when you look at the Digital Publishing
Suite, it considers your usage in the aggregate.
| | 00:34 | Today, Adobe considers four
different publishing segments:
| | 00:38 | there are Magazine publishers, Newspaper publishers, and
Book publishers, and then finally, Business publishers.
| | 00:44 | Looking at the magazine publishers, there
are many many, many consumers of magazines.
| | 00:49 | The frequency of issues isn't going to be
as frequent as you might see for a newspaper.
| | 00:53 | We'll talk about newspapers later.
| | 00:55 | In the magazine case perhaps the magazine
is published quarterly or perhaps monthly.
| | 00:59 | The expectation though is that that
magazine is going to be consumed by many people.
| | 01:04 | At the end of the day, the number
of total downloads is what matters.
| | 01:08 | For a monthly publication, they'll end up 12
times 100,000 downloads over the course of the year.
| | 01:14 | Looking at newspaper
publishers they tend to be local.
| | 01:18 | This means that the total pool of subscribers is
smaller, but the frequency of publication is often daily.
| | 01:24 | In the case of a daily publication with weekend distribution
as well, you've got 365 days times the number of subscribers.
| | 01:32 | Depending on the metropolitan area that number of subscribers could be
as small as a few thousand, it could be as large as tens of thousands.
| | 01:40 | At the end of the year, you need to look
at 365 times the number of subscribers,
| | 01:45 | which will be your total number
of downloads for the publication.
| | 01:49 | A book publisher will often have many, many, many
titles that will be produced during the course of the year.
| | 01:54 | Those titles may not have as many consumers as you
would see for, say a newspaper or for a magazine.
| | 02:00 | However, the number of titles
produces the multiplying effect.
| | 02:04 | For a book publisher that's producing 12 or 50 or
100 different titles during the course of a year,
| | 02:09 | that's obviously going to multiply the number of clicks
by the number of users for that particular publication.
| | 02:15 | In the education world, where we have many thousands of
books that are going to be produced over hundreds of titles,
| | 02:20 | this produces a large download click costs.
| | 02:23 | Business publishers are often creating
content that might be annual reports,
| | 02:27 | manuals, or other types of information
that they need to get out to consumers.
| | 02:31 | In that case, the number of
downloads is often going to be small.
| | 02:35 | If the company is not a products company, then
the number of publications might also be small.
| | 02:41 | In that case the aggregate is going to
be a very limited number of downloads.
| | 02:45 | When you're beginning to engage
with Adobe about Digital Publishing,
| | 02:49 | be sure that you know the total number of
downloads that you might have in the course of a year.
| | 02:54 | This is going to be an important factor
when you're beginning that negotiation,
| | 02:57 | so that you can fully understand what your
cost is going to be over the course of the year.
| | Collapse this transcript |
| Establishing your distribution channels| 00:00 | An important part of the DPS
workflow is the distribution channel.
| | 00:04 | Once you've created your DPS publications, you need a
distribution channel to be able to expose your customers to that content.
| | 00:11 | There are three different
distribution channels that are available today.
| | 00:14 | That number may grow, but we don't
have any insight into that at this time.
| | 00:18 | Currently, you can deploy on
iOS devices and Android devices.
| | 00:22 | While there's a reader for BlackBerry PlayBook, there is no means
of building a branded reader for the BlackBerry PlayBook platform.
| | 00:29 | Regardless, I want to talk about how
to engage with the iOS Developer Center,
| | 00:33 | with the Android Developer Center, and
with the BlackBerry Developer Center.
| | 00:36 | You'll need to have a relationship with each of these
developer centers in order to publish to that specific platform.
| | 00:43 | For the Apple Developer Center, you'll want to visit this
URL here to begin the process of creating a developer account.
| | 00:50 | Your company can do that, or
you can do that as an individual.
| | 00:54 | You'll need to Register first by clicking this link,
and then once you've registered, you can log in.
| | 01:00 | In order to develop your DPS applications for iOS, you're going to need
some certificates that are going to come from the iOS Developer Center.
| | 01:08 | These certificates will be available after you make
your application and after you pay your annual fee.
| | 01:14 | So there's a two-step process: first you have to
register for the developer center, which is free,
| | 01:20 | then you have to go through the process of
joining the Apple developer program as a paid developer.
| | 01:26 | Once you pay that fee then you'll have access to the
certificates that you need to be able to deploy your application to iOS.
| | 01:34 | The Android Marketplace is a
much easier place to develop.
| | 01:37 | To learn more about that relationship, you'll need
to go into the Android Marketplace. That link is here.
| | 01:43 | You'll need to create a Google Account
and then log in to the Android Marketplace.
| | 01:47 | If you're not an Android developer, then you'll be taken
through the process of signing up to become an Android developer.
| | 01:53 | In order to publish to Android devices, you don't need
to have a certificate that is signed by a third party.
| | 01:59 | You can create a self-signed certificate, and there's
some great documentation in Adobe.com about how to do that.
| | 02:06 | The last of these
Marketplaces is the BlackBerry App World.
| | 02:09 | I said before that currently there isn't a means of
publishing to the BlackBerry device from the DPS system.
| | 02:15 | However, you can preview your DPS
publications on a BlackBerry device.
| | 02:20 | At some point in the future there will be a means of
producing content that will play correctly on the BlackBerry device;
| | 02:26 | I don't have any insight as
to when that's going to be.
| | 02:30 | First you need to sign up for an account at the
BlackBerry App World, and you'd Register here.
| | 02:35 | Secondly, there is a documentation process you have to go through
with RIM, which is the company that manages the BlackBerry system.
| | 02:42 | This registration process is more complex than you
might be used to if you're from the United States.
| | 02:47 | They're a Canadian company, and there are some specific business rules that
have to be followed when you're registering as a developer for BlackBerry.
| | 02:54 | Once you've completed that process
| | 02:56 | you'll have access to the certificates that you need to be able to
publish to that platform when DPS is ready to publish to that platform.
| | 03:04 | Once you've determined which of the
marketplaces you want to use as a distribution channel,
| | 03:08 | and you've gone through the process of
registering as a developer with those channels,
| | 03:13 | you'll then be able to produce your branded
publications that you can distribute inside of those channels.
| | 03:18 | Once you've got those certificates in
place, DPS will do the heavy lifting
| | 03:22 | and build those applications that you
can very easily deploy to those platforms.
| | Collapse this transcript |
|
|
2. Understanding the Thought Processes Around DPSLayout considerations| 00:01 | When you're planning your DPS publication, it's important to note
that users might be reading your content in one of two orientations.
| | 00:08 | In this case we're looking at the vertical orientation, but I
have the same publication as a horizontal presentation as well.
| | 00:15 | When we build the DPS publication and
we want to support both orientations,
| | 00:19 | it's the best practice to use the _h for
horizontal and _v for vertical at the end of your file name.
| | 00:26 | You can save these files in the same folder, which will
make it easy for them to refer to the same set of assets later.
| | 00:32 | We build multiple orientations because our devices
can be held in a portrait or a landscape orientation.
| | 00:38 | The user decides and by giving them a
horizontal and vertical presentation,
| | 00:43 | it makes it much easier or much more
natural for the user to consume your content.
| | 00:47 | I do understand though, that not everyone is going to want to
build both a horizontal and a vertical layout for their publication.
| | 00:54 | That's a decision that you'll have to
make with your customer, or your employer.
| | 00:58 | Let's create a new layout now inside of InDesign,
and make it so that it's appropriate for DPS.
| | 01:04 | In the File menu choose New and Document.
| | 01:08 | The first thing we need to do is to
change our Intent from Print to Web.
| | 01:12 | Having made that change,
this shuts off Facing Pages,
| | 01:15 | because they don't have any relevance that we're talking
about a web publication. It also gives us dimensions in pixels.
| | 01:22 | Our devices when we're thinking
about DPS are going to be tablet devices.
| | 01:26 | The tablet device dimensions are
included in the Page Size dropdown.
| | 01:31 | You'll see them here: 1024x768, 1280x800.
| | 01:36 | Whether you're working in the 16:9 or 4:3
orientations, you can choose the appropriate resolution.
| | 01:42 | For now I'm going to pick 1024x768, because I'm
targeting an iPad, which happens to be 1024x768.
| | 01:49 | Be sure that you know the
resolution of your target device.
| | 01:52 | If you're targeting a PlayBook for instance,
then 1280x800 is the appropriate resolution.
| | 01:57 | Again, I'm going to pick iPad,
so I'll choose that for now.
| | 02:00 | You might be wondering what happens if I pick a
resolution say 1024x768, and then I try to view it on a PlayBook.
| | 02:07 | The result is that I'll end up with letterboxing, either
horizontal or vertical letterboxing depending on how I hold the publication.
| | 02:13 | At the same time, if I choose the 16:9 aspect ratio,
then I'll get letterboxing when I look at 1024x768 device.
| | 02:20 | You can build your DPS
publications to target say 1024x768,
| | 02:24 | and then know that there'll be letterboxing, or build
separate publications for those different screen sizes.
| | 02:30 | You also need to choose an orientation.
| | 02:32 | In this case I'm going to choose a landscape or
horizontal orientations,s o that's already chosen for me.
| | 02:37 | I can use my normal layout types of controls, such as setting up
a default number of columns and how big I want the margins to be.
| | 02:44 | When you think about DPS publications, you want to
consider that the user may interact with the entire surface;
| | 02:50 | You may want to set the margins then to 0.
| | 02:52 | This is a design consideration that you'll want to
think about when you're planning your DPS publication.
| | 02:57 | You may want to Save this as a
preset in your Custom Presets.
| | 03:01 | Having made that choice, I'll be able to choose this
again when I'm building a new DPS publication for iPad.
| | 03:08 | Now we have a blank layout ready to be
filled in with content for our DPS publication.
| | 03:13 | We'll look at design considerations for
that DPS publication in another movie.
| | Collapse this transcript |
| Design considerations| 00:01 |
When we're designing for DPS, it's important
to think about the fact that the user's going to
| | 00:05 | interact with this publication differently than
they're going to interact with a print publication.
| | 00:10 | I know that many designers are coming from a print heritage, and so
they need to switch gears when they're thinking about digital publications.
| | 00:17 | I want to talk about some of the design considerations that you
need to think about when you're planning your DPS publications.
| | 00:24 | First of all, know that your user is
going to be consuming this content vertically.
| | 00:28 | Let's scroll down in InDesign and
you can get a sense of what I mean.
| | 00:32 | In InDesign it's very clear that
there's a division between each of the pages.
| | 00:37 | In DPS each of those pages becomes a stopping point
as you're scrolling through the document vertically.
| | 00:43 | This gap that you can see right now is going
to go away when we view the document in DPS.
| | 00:50 | It's important then to think about your design,
so that it will be continuous from top to bottom.
| | 00:56 | You can see on this page we have some design
elements that are these green and red lines.
| | 01:01 | These green and red lines
continues through the publication,
| | 01:04 | so as we go down, you can see that they
break here, but then they pick up at this point.
| | 01:09 | When the user views this publication in
DPS these two pages are going to be joined.
| | 01:14 | Remember there's no gap when
you're looking at the document in DPS.
| | 01:17 | This means that you can take advantage of that continuous nature
by building design elements that flow through the entire document.
| | 01:25 | In this case you're going to see these red and
green lines repeat themselves all the way through.
| | 01:30 | There they are again and they join up.
| | 01:35 | They flow all the way down to the bottom
of the document, but they stop on page 6.
| | 01:39 | On page 6, this is the end of the reading
portion of the publication and at the bottom
| | 01:44 | there's a map page that isn't
part of the flow of the article.
| | 01:48 | You can use these visual elements to help control
the way that the user flows through the publication,
| | 01:53 | and also to guide how
they are going to be reading.
| | 01:57 | I want to show you what this document
looks like when it's published to DPS.
| | 02:01 | I can do that by
previewing in the Overlay Creator.
| | 02:04 | You can find the Overlay Creator by
choosing Window > Extensions and Overlay Creator.
| | 02:10 | I'm going to dock my Overlay
Creator underneath my Interactive panel.
| | 02:18 | At the very bottom of the Overlay
Creator panel I can see Preview.
| | 02:22 | When I click Preview, it's going to preview
the active document in the Adobe Content Viewer.
| | 02:27 | The Adobe Content Viewer is an AIR application
that was installed when you installed your DPS tools.
| | 02:32 | Click Preview to preview the document.
| | 02:35 | It may take some time for the document to load.
| | 02:37 | What's happening under the hood is
that it's going off to Adobe servers
| | 02:41 | where it's getting bundled and
then sent back as a folio file.
| | 02:45 | Now we can see the
document in the Content Viewer.
| | 02:49 | You can see that there's no gap between
the pages when we view in the Content Viewer.
| | 02:54 | When I let go of the mouse, the content
will snap to the page views and there it goes.
| | 03:00 | You can see those lines that
are joined in between the pages.
| | 03:06 | There are some visual elements that will help guide you
as you're looking at your content in the Content Viewer.
| | 03:12 | Over on the right there is a very faint gray bar here,
which gives you a sense of how far into the publication you are.
| | 03:18 | As we move up and down, pay attention to
that as it will move up and down as we browse.
| | 03:24 | The Content Viewer allows us to simulate the experience that a
user might have if they were viewing this content on a device.
| | 03:30 | This will mean that they would have some gestures that wouldn't be
available on your desktop computer, unless you happen to have a multi-touch pad.
| | 03:36 | It's a good idea to have a multi-touch
pad available for testing DPS publications
| | 03:41 | if you're going to be using the
Content Viewer for that testing.
| | 03:45 | Now that we know the flow of
pages in the Content Viewer,
| | 03:47 | we have a good sense of what's going to happen
when we put that publication onto our device.
| | 03:52 | When you're designing your publication, be aware that
all of the pages are going to butt up against each other,
| | 03:57 | but that provides an opportunity for you
to be able to design with that in mind.
| | 04:01 | When you're designing your DPS publications, remember
that this is going to be an interactive digital experience.
| | 04:06 | This is not the same as print, so be sure
to change gears and be designing for digital.
| | Collapse this transcript |
|
|
3. Creating HyperlinksCreating buttons| 00:00 | Hyperlinks are a great way for you to
add interactivity to your DPS publications.
| | 00:04 | A hyperlink could refer to a location inside of
your document, to a location in another document,
| | 00:10 | or to a location completely outside
of your documents on the Internet.
| | 00:14 | Hyperlinks have been around since the Web began, so
people are very familiar with hyperlinks and how they work.
| | 00:18 | We're going to look now at how we can use
a button to go to an external destination.
| | 00:23 | Let's go down to page 6.
| | 00:26 | On page 6, there is a space underneath,
"A real city is never homogeneous."
| | 00:30 | I would like to add a button
that's going to take us to Google Maps.
| | 00:34 | We can use our Button panel to
get one of the pre-built buttons.
| | 00:39 | Open the Button panel and
then choose Sample Buttons.
| | 00:43 | The button that I want is this green one.
| | 00:46 | To use it, we'll simply
drag it on to the layout.
| | 00:48 | Once you have it on the layout you can
release and then we'll close up the Sample Buttons.
| | 00:53 | I want to move the button down into this area
and then we'll make it a little bit bigger. Great!
| | 01:01 | You can see that the button has been assigned a name automatically and
that it's been pre-built to go to a specific page in the publication.
| | 01:07 | I'm going to change its name and what it does.
| | 01:11 | I want to call its name, Go
to Google Maps and hit Enter.
| | 01:15 | I want to remove the Go To Page
event. So select it and then remove it.
| | 01:20 | Next we're going to define
a new action for On Release.
| | 01:23 | We're going to Go To URL destination.
| | 01:28 | The URL destination in this case
is going to be maps.google.com.
| | 01:32 | Hit Enter to commit.
| | 01:33 | Now I've got a button that will
take me to the URL maps.google.com.
| | 01:39 | We'll determine how that web content is going
to be presented to the user in another movie.
| | 01:44 | Let's look at another application
of buttons. This will be on page 7.
| | 01:48 | Here I have a number of buttons that
are controlling multi-state objects.
| | 01:52 | Each one of these areas is indeed a button.
| | 01:56 | If I selected this button, it's going to
change it to the state called Green Light District.
| | 02:01 | This button will change that same object, which again,
is called, "If You Go" to the "Le Bon Mot" state.
| | 02:07 | This is the multi-state
object to which it's referring.
| | 02:12 | This multi-state object has
a number of states available.
| | 02:15 | When you use buttons to control multi-state objects that
interactivity is also going to be preserved inside of your DPS publication.
| | 02:24 | This means that buttons are very
flexible tool for you to build interactivity
| | 02:27 | and to make objects that will change their
appearance in response to user interactions.
| | 02:33 | A lot of times we'll use buttons to build multi-state
objects that will either provide further information about products
| | 02:40 | or in this case will provide
more detail about areas of a map.
| | 02:44 | Buttons can do more than change the states
of multi-state objects and go to hyperlinks.
| | 02:49 | Select that button again and
go back to the Button panel.
| | 02:52 | You can see that there are a number of
actions that you could apply to buttons in InDesign,
| | 02:55 | but not all of them are
applicable in a DPS publication.
| | 03:00 | You can use the one that's called
Go To First Page or Go To Last Page.
| | 03:04 | You can also use Go To URL.
| | 03:07 | You could also go to a specific page by
choosing Go To Page down in the SWF Only area.
| | 03:11 | In addition you can control state behaviors by using
Go To State, Go To Next State and Go To Previous State.
| | 03:18 | Other button behaviors aren't going to
work correctly inside of your DPS publication.
| | 03:22 | If you'd like to learn more technical
details about buttons and how to configure them,
| | 03:26 | then you can look at the Adobe help system
under the Adobe Digital Publishing Suite area.
| | 03:31 | This can be found in the community help and then when
you get in there you can look for Digital Publishing Suite.
| | 03:37 | However you choose to use
buttons in your DPS publication,
| | 03:40 | your publication is going to become more
interactive and therefore, more engaging for your reader.
| | Collapse this transcript |
| When is a hyperlink not a hyperlink?| 00:00 | I can create hyperlinks in my text
in InDesign using the Hyperlink panel.
| | 00:06 | Let's do that right now.
| | 00:08 | I want to create a hyperlink on this page, so
that when the user taps on a particular location
| | 00:12 | it's going to take him to another
location inside of the document.
| | 00:16 | I've got to do this in an orderly way and that means that
I've got to set up my destinations before I build my hyperlinks.
| | 00:23 | Let's go to the last page of the document.
| | 00:27 | I want to build a
hyperlink destination for page 7.
| | 00:30 | Open up your Hyperlinks panel.
| | 00:32 | Open the flyout menu and
choose New Hyperlink Destination.
| | 00:36 | Since we have nothing selected, I'll have two
options for the type of the hyperlink destination.
| | 00:42 | The first one is going to be a Page. Right now, by
default it's called Page 7 because we're going to page 7.
| | 00:49 | For DPS publications the Zoom Setting will
have no effect, since they're always full screen.
| | 00:56 | Since I don't have a text selection,
the other option that I'd have is a URL.
| | 01:01 | A URL of course is an external destination.
| | 01:04 | In this case I want to use a Page destination, so that when the
user touches the hyperlink they'll go to the appropriate location.
| | 01:09 | I want to give it a name other than
Page 7. I want to call it Map Page.
| | 01:15 | When I am done click OK.
| | 01:18 | Another type of
destination would be a Text Anchor.
| | 01:21 | If you've ever written an HTML page,
these concepts will be very familiar to you.
| | 01:26 | A Text Anchor is going to be a specific named
destination inside of some copy in your publication,
| | 01:32 | whereas the URL of course is
going to be external to it.
| | 01:35 | You can create named destinations by simply making a
text selection and then creating your named destination.
| | 01:41 | Once you have the destinations
configured, you can refer to them in hyperlinks.
| | 01:46 | Let's go back to the first page of
this publication to create our hyperlink.
| | 01:50 | I want to make this entire phrase, "A local takes us on a
pedaling journey through the Meridian she loves," into a hyperlink.
| | 01:58 | I can select all of the text in the paragraph and then
in my Hyperlinks panel, I can create a new hyperlink.
| | 02:05 | I could do that by clicking the New
Hyperlink button here or by pulling down the flyout.
| | 02:11 | Then I'll choose New Hyperlink.
| | 02:14 | In this case I don't want to link to a URL
. I want to link to a Shared Destination.
| | 02:20 | Note that I could also choose a
Text Anchor or a Page from this menu.
| | 02:24 | If I want the user to be able to send an email I could
choose Email, or to download a File I could choose File.
| | 02:31 | Note that in the DPS context not
all of these are going to work.
| | 02:35 | You'll particularly want to test out the file
delivery if you want to try and deliver file to a user.
| | 02:42 | It's probably best to
avoid that option within DPS.
| | 02:45 | We're going to a Shared Destination, so we'll pick that, and then
you'll see that I can choose a Document, as well as the destination.
| | 02:53 | We've previously built a
destination, that's a URL destination.
| | 02:57 | This is this maps.google.com, but also in my
list you'll see Map Page that we just created.
| | 03:03 | Now when someone clicks on that text,
they'll be taken to page 7, which is the Map Page.
| | 03:10 | You'll note that I can
choose other documents as well.
| | 03:12 | Any document that I have
open, will be selectable here.
| | 03:16 | I could also browse to additional
documents that might be related to each other.
| | 03:21 | This will be a very common practice when you're
building publications that consist of many chapters,
| | 03:26 | and you want to be able to refer back and
forth to content inside of those chapters.
| | 03:31 | If I want, I can attach a character style to the hyperlink
that might make it look different from the text around it.
| | 03:37 |
I can also choose how to style the
appearance of the hot zone around that link.
| | 03:42 | I am going to leave that
as an Invisible Rectangle.
| | 03:46 | My other option is a Visible
Rectangle, which I could then style.
| | 03:49 | A Visible Rectangle tends to be distracting, so I'm
going to again, leave this as an Invisible Rectangle.
| | 03:56 | Having made these choices, I'll click
OK to finish configuring my hyperlink.
| | 04:00 | Once again you can build hyperlinks that
refer to content inside of your document,
| | 04:04 | inside of additional documents or to
places outside of the document altogether.
| | 04:10 | Use hyperlinks to add not only
interactivity to your publications,
| | 04:14 | but also to bind those publications
together to provide more relevance to the reader.
| | Collapse this transcript |
| Setting DPS options for hyperlinks| 00:00 | Once we've built our Hyperlinks, we want to configure what's
going to happen when a user clicks them in your DPS publication.
| | 00:07 | To do so, we'll use the Overlay Creator in the Hyperlink area
and then select the big button that we built here on page 6.
| | 00:15 | Once you select it, the Overlay Creator will
automatically switch to the Hyperlink configuration options.
| | 00:22 | The Overlay Creator panel is contextual; when
you select an object the Overlay Creator panel
| | 00:27 | will only show the options that
are appropriate for that object.
| | 00:30 | In this case there's only one thing that this
button can do, and that is to be a Hyperlink.
| | 00:35 | I have two choices in DPS as to how I am
going to view the destination for the Hyperlink.
| | 00:40 | It's either going to open within the Folio,
which means within the DPS publication itself,
| | 00:44 | or within the context of that DPS publication,
or it's going to open in the devices browser.
| | 00:51 | Each of your devices is going
to have different capabilities.
| | 00:54 | This means that if you're referring to external
content, you'll want to test that content on a device
| | 00:59 | to make sure that it will
do what you expect it to do.
| | 01:03 | Another consideration is whether you want to take
advantage of device specific behaviors in that external content.
| | 01:10 | Many web sites today will
respond to mobile behaviors.
| | 01:14 | They might be using the jQuery Mobile
framework to allow accelerometers to work
| | 01:19 | or other types of behaviors like
geolocation or dialing a device.
| | 01:24 | If you want to enable those behaviors, then you
probably will want to open in a device browser,
| | 01:28 | because that's going to give you all
of the features of the device's browser.
| | 01:32 | In this case the button is
going to take us to maps.google.com.
| | 01:36 | I can choose to view it in the
Folio or in the Device Browser.
| | 01:40 |
Let's have it open in the Device Browser.
| | 01:43 | As a courtesy, I'm going to enable Ask
First. This will ensure that the user knows
| | 01:48 | that they're going out of the DPS publication and
into the Device Browser when they click on that link.
| | 01:53 | Now that we've set up what we want this
Hyperlink to do, let's go ahead and preview.
| | 02:01 | Now that it's loaded, we can click on the Hyperlink
here that will take us to page 7, which is our map page.
| | 02:07 | Let's go back to page 6
to see the other Hyperlink.
| | 02:11 | There it is. Clicking on this link
will open the Hyperlink in the Browser.
| | 02:16 | I'll click Ok just so we can see it. My default
browser is Firefox and now it's showing us Google maps.
| | 02:24 | Let's go back and reconfigure that to see
what it looks like in the DPS publication.
| | 02:28 | We'll change this to open in
Folio, and then we'll preview again.
| | 02:34 | Now that it's loaded, let's go take a look
. We'll go back one and then click again.
| | 02:41 | Now we're viewing Google maps in
the context of the DPS publication.
| | 02:48 | One of the great features of DPS is
that it does have this built-in browser.
| | 02:52 | This allows you to keep the attention of your audience and
present external content as if it was inside of your DPS publication.
| | 03:00 | Of course, if you want to take advantage of
other features that may be device-related,
| | 03:04 | then you can send them to an external browser
and then use all the features of that device.
| | Collapse this transcript |
|
|
4. Making SlideshowsOverview of multi-state objects| 00:00 | One of the interactive overlays is a slideshow. We
build a slideshow by first making a Multi-state object.
| | 00:07 | I have a group of images that I
have placed onto the page already.
| | 00:11 | They're here on page 5, so you need to
go ahead to page 5 in your Exercise File.
| | 00:16 | Of course if you're using your own files, then you can build your own
Multi-state object by simply stacking up images, one on top of the other.
| | 00:24 | I'll select the top one and then
take a look in my Layers panel.
| | 00:29 | In my Layers panel, you can see all of the
images that are stacked one on top of the other,
| | 00:33 | and if I turn them off we can see
them down the stack, and here they are.
| | 00:40 | Let's select them all now by using my Click to select items
button. Hold down your Shift key and then just go down the stack.
| | 00:49 | Now I have them all selected and I'll
convert them to a Multi-state object.
| | 00:54 | Close up the Layers
panel and open Object States.
| | 00:58 | To create my new Multi-state object I can
click on the Fly-out menu, then click New State.
| | 01:04 | All of those selected images will now
be added to the Multi-state object.
| | 01:09 | Let's give this a name. How
about we call it Slideshow?
| | 01:14 | Hit Enter and that will commit the name. We can go through
the states by clicking on them in the Object States panel.
| | 01:24 | This is not the only application
of Multi-state objects however.
| | 01:28 | Let's go down to the map page on page 7. Here
a Multi-state object has been created already.
| | 01:35 | This Multi-state object is
controlled by buttons over on the right.
| | 01:39 | Click anywhere on the image to
select this Multi-state object.
| | 01:43 | This one is called If You Go
and it has a number of states.
| | 01:47 | You can see them listed here, every
one of these green dots is a button.
| | 01:51 | Let's select 1 to see what it does. You'll have to close up the
Object States panel and open the Buttons panel to see what it does.
| | 02:01 | When you click this button,
it will show the state:
| | 02:04 | If You Go: Le Bon Mot. Other buttons will change the
state of this Multi-state object when you click on them.
| | 02:11 | In the DPS context, Multi-state objects
therefore have two different functions;
| | 02:16 | one is to have information that will change in response to
stimulus on the page, that stimulus of course being a button.
| | 02:22 | Another is to build this Slideshow overlay. The slideshow object,
unlike a button-controlled Multi-state object, will only respond to one tap.
| | 02:29 | A Multi-state object might have a
number of stimuli that make it change.
| | 02:36 | With two different behaviors for Multi-state objects there
are a lot of options for you inside of a DPS publication.
| | 02:43 | Don't think about one or the other; use them both
to make the most interactive experience that you can.
| | Collapse this transcript |
| Converting to a slideshow| 00:01 | In order to convert this Multi-state object into a
slideshow, we've got to use the Overlay Creator panel.
| | 00:06 | If you don't have it open, open it now
and then select the Multi-state object here.
| | 00:12 | You can see that the Overlay Creator will
automatically choose the Slideshow option.
| | 00:16 | This is because the Overlay
Creator is indeed contextual.
| | 00:19 | The Overlay Creator will show you all of the
options that are available for that object.
| | 00:24 | If there's only one, it will go directly
to that type and allow you to configure it.
| | 00:29 | In this case we want this to be a slideshow.
| | 00:31 | We have a number of options for
slideshows. We can have them Auto Play.
| | 00:35 | When the user gets to this page in the
publication, we'd just turn on Auto Play.
| | 00:40 | I want the user to start the
slideshow, so I'll enable Tap to Play/Pause.
| | 00:46 | You can adjust how long each slide is
going to play by adjusting the interval here.
| | 00:51 | I'm going to leave it at 2 seconds because that
will allow us to see it in the course of this movie.
| | 00:55 | If you want it to be longer, then of course you
can set that duration to be anything you want.
| | 01:00 | I'm going to choose to loop
this particular slideshow.
| | 01:03 | I've only got 5 slides, so when I get to the end, it
will go right back to the beginning and continue to play.
| | 01:09 | InDesign allows you to use the built-in
Cross Fade feature by enabling that here.
| | 01:14 | This is turned on by default and of course, you can adjust the
speed at which the change takes place by adjusting the speed here.
| | 01:21 | I'm going to leave it alone. I'm
going to enable swiping to change image.
| | 01:26 | This allows the user to simply
swipe to go to the next slide.
| | 01:30 | This is a handy navigational tool,
if you've got long-duration slides.
| | 01:34 | I'm going to enable Hide
before playing. Let me explain why.
| | 01:39 | Overlays that we build with the Overlay Creator, sit on top
of all of the content that we might have built in InDesign.
| | 01:47 | This means that if I put any other content on top of the
slideshow, it will be obscured by the slideshow when we go to DPS.
| | 01:55 | If I Hide Before Playing, it gives me
the option to put in some instructions,
| | 02:00 | and then when the user taps on the area, the
slideshow will cover up those instructions. Let's do that now.
| | 02:07 | Scroll up and copy the block says Play here, select it,
copy it, we'll go back to the slideshow and then Paste.
| | 02:17 | Let's move this down
into lower left-hand corner.
| | 02:21 | I want to change the text to say Tap to Play.
| | 02:24 | Of course, that's not enough
room, so I'll have to expand that.
| | 02:34 | And then I need to expand the background.
| | 02:37 | This is inside of a group so I need to go down into it, and
I want this frame right here, and then I'll expand that one.
| | 02:51 | There we go. So now I have my visual indicator.
| | 02:54 | The last thing that I need to do is to put a poster frame
in place that will show before we activate the slideshow.
| | 02:59 | I'm going to borrow the
first slide in the slideshow.
| | 03:04 | If I open up the slideshow and go into to
state one, I can grab that JPEG image right there,
| | 03:09 | With it selected, I'll copy it,
deselect and then paste in place.
| | 03:15 | I need to move it down into this group.
| | 03:19 | So from Overlays, I need to move it so that it ends up
in the appropriate position underneath this text frame.
| | 03:24 | Now I've got everything all built, and let's take a look
at the Layers panel so we understand the stacking order.
| | 03:33 | First, I have my controls here. Underneath, I
have my poster frame. That's all in a group.
| | 03:40 | Underneath that, I have my
slideshow which is the Multi-state object.
| | 03:45 | The Multi-state object has been told,
don't appear until you're activated.
| | 03:49 | With all this in place, let's
go ahead and preview this now.
| | 03:56 | Remember our slideshow is on page 5,
so we've got to scroll down to it.
| | 04:00 | You can use your mouse to simulate dragging by click and drag as
opposed to touch and drag like you do on a device. And there we are.
| | 04:10 | If I tap in this area, it's going to start the slideshow
and it will cover up my poster frame and my instructions.
| | 04:16 | There's my click and off it goes.
Alright let's go back to InDesign.
| | 04:25 | We've seen how we can create a
slideshow from a Multi-state object.
| | 04:28 | We've also seen how we can create a control
that will disappear once the slideshow starts.
| | 04:34 | Since your slideshow will obscure any
content that's on top of it in your publication,
| | 04:39 | just make sure that you hide it if
you include an instruction layer.
| | 04:43 | Also remember that you have
got to include a poster frame,
| | 04:46 | otherwise your slideshow will appear like
there's nothing on the page until someone taps it.
| | 04:51 | Slideshows can be a great way
to enhance your publications.
| | 04:55 | In a static publication, you can only have one
image to help convey some part of your story.
| | 05:00 | With the Multi-state object in a DPS
publication, you can build an interactive slideshow
| | 05:04 | that allows your reader to
get right inside the story.
| | Collapse this transcript |
|
|
5. Using the Image Sequence FeatureOverview of the Image Sequence feature| 00:00 | One of the new interactive features of
DPS is an object called an Image Sequence.
| | 00:05 | An Image Sequence is an object that allows
your users to scrub through a stack of images
| | 00:10 | as if they were scrubbing
through a timeline in a movie.
| | 00:12 | I want to show you what this means so you can
get a sense of how a user might interact with it.
| | 00:17 | Then in another movie we'll
show you how to actually build one.
| | 00:21 | I have one already created in this
document, and we'll simply Preview to show it.
| | 00:27 | The instructions are to
Swipe to view 360 degrees.
| | 00:31 | In this case we have an image of a bicycle and as we swipe
left to right, we're allowed to view the bicycle from all angles.
| | 00:38 | If you click and then drag, you can see that the bicycle moves and
I'm also given some additional information that's on the bicycle.
| | 00:47 | This additional information has been added to the image in
the stack of images that was used to create this image sequence.
| | 00:54 | This is something that you will have to take
care of in Photoshop or another Image Editor,
| | 00:58 | in order to get that
content onto the Image Sequences.
| | 01:01 | In a lot of cases though, you don't need to
provide additional information such as these.
| | 01:05 | You might want to use an image sequence to
allow a user to perhaps scrub through a movie.
| | 01:10 | This is a great way for you to
leverage video in your instructional content,
| | 01:14 | because it would allow your user to be able to scrub through and
then stop quite cleanly on a frame that might teach them some skill.
| | 01:21 | Now we understand what the user's
expectations will be of an Image Sequence.
| | 01:25 | In another movie we'll show how
we can create that Image Sequence.
| | Collapse this transcript |
| Creating an image sequence| 00:00 | Before we can use the Image Sequence,
we've got to gather our images into a folder.
| | 00:04 | I want to show you an example of
what that folder might look like now.
| | 00:08 | Inside of your Assets folder, in the Links
folder, you'll see a folder called HUBBike_360.
| | 00:14 | You can see how these are
organized from 0 all the way down to 149.
| | 00:19 | There are 150 images, each representing a
portion of that full rotation of the bicycle.
| | 00:24 | In this case, this was made in the 3-D rendering
application. But you know what, you don't have to do that.
| | 00:29 | You can choose any image sequence you like. It
could be individual frames output from a movie,
| | 00:34 | you could go out with your digital camera
and simply turn around and take some images.
| | 00:38 | However, you would like to do it, the
important thing is that the names are sequential.
| | 00:42 | Take a look at the naming convention.
| | 00:44 | In this case, everything starts with "final spin" and
then underscore (_) and then there's a sequential number.
| | 00:51 | The sequential number is critical for
the image sequence to operate correctly.
| | 00:55 | It needs to see those images in order so that it can
display them appropriately as the user swipes across.
| | 01:01 | When you collect your images, you
need to get them into a single folder.
| | 01:05 | The Image Sequence Overlay is going to look for a
folder of images. We'll see that in another movie.
| | 01:11 | Recapping: As you're organizing your images,
make sure that you have sequential ordering
| | 01:15 | so that when the user swipes their finger across it,
they'll end up with the images in the right order.
| | 01:20 | Now that we understand how our images are organized,
let's create our Image Sequence back in InDesign.
| | 01:25 | In InDesign go to page 3 and
then select this bicycle image.
| | 01:30 | You'll see that the Overlay Creator
has provided us with some options.
| | 01:33 | It shows the Image Sequence,
Panorama and Web Content.
| | 01:37 | It also shows Pan and Zoom
at the bottom of the list.
| | 01:40 | We're interested in the Image Sequence option.
| | 01:42 | So let's choose that. The first thing that we need to do
is to load the folder of images into the image sequence.
| | 01:50 | We do that by clicking on this folder icon right here
. Browse to the location of the HUBBike_360 folder.
| | 01:58 | This is going to be in your
Assets folder, in the Links folder.
| | 02:01 | You do not select an image inside of the folder
. Remember we need to pick the entire folder,
| | 02:06 | so there's no means of
choosing the images within the folder.
| | 02:10 | I've got the folder selected
that I want and I'll choose open.
| | 02:13 | This will now load the entire stack of
images into the Image Sequence overlay.
| | 02:17 | You'll notice that there's
nothing displayed on my screen now.
| | 02:22 | I need to tell the Image Sequence to load the
first image and show that as the poster frame.
| | 02:27 | Now I've done that, the first
image in the sequence is going to load.
| | 02:31 | My other options include Auto Play, which
will allow the sequence to begin playing.
| | 02:36 | If I do that, then I'll probably need to
indicate exactly what's going to happen.
| | 02:40 | So if I turn that on, I now need to
determine how long am I going to wait,
| | 02:45 | what the frame speed is going to be, and
finally how many times it's going to play.
| | 02:49 | I don't want this to take place
because I want the user to interact with it.
| | 02:53 | I would use Auto Play or Tap to Play/Pause,
if I was going to present this as a movie.
| | 02:58 | You can think about the animation in an image
sequence, the way that we'd build an animated gif.
| | 03:04 | It's simply a sequence of frames, but in this case it would be a sequence
of frames broken out into individual files that are sequentially numbered.
| | 03:12 | Let's turn off Auto Play for now.
| | 03:15 | I do want the user to be able
to interact with the object.
| | 03:18 | To do that the Overlay Creator
automatically enables Swipe to Change Image.
| | 03:22 | This means that as I drag my finger across the image, the
image is going to change but it's going to remain in place.
| | 03:27 | This will be similar to an experience that you
would have if you were scrubbing on a timeline.
| | 03:32 | If you were using a movie, then you might
want to stop at the first and last image.
| | 03:38 | You can enable that option here.
| | 03:39 | In this case, we're talking
about a view of a product.
| | 03:43 | We want to be able to go all the way around the product as
if we were walking or perhaps the product were on a turntable.
| | 03:48 | In that case we don't want to
enable Stop at First and Last Image,
| | 03:51 | and this will create a seamless experience as
the user moves all the way around the bicycle.
| | 03:56 | The last choice is Play in Reverse.
| | 03:58 | I've made the choices that I want, so now let's go ahead
and preview how this is going to look in my publication.
| | 04:03 | We will swipe through to page 3 and then
once I tap it, I can begin to interact with it.
| | 04:11 | Again, these little callouts have been
provided for me already inside of the image sequence.
| | 04:15 | You will have to do that in Photoshop or another
Image Editor to be able to get them into the sequence.
| | 04:21 | An Image Sequence is a great way for you to provide the
user with a means of going all the way around a product.
| | 04:26 | It's also a way for you to provide insight into a process by
taking a video and then breaking that out into individual steps.
| | 04:32 | However you choose to use the image sequence, I know that it's
going to make your DPS publications much more engaging for your readers.
| | Collapse this transcript |
|
|
6. Making PanoramasOverview of the Panorama feature| 00:00 | One of the items in the Overlay
Creator is called the Panorama.
| | 00:04 | A Panorama can sometimes be a
little difficult to understand,
| | 00:06 | so we've decided to show you what a Panorama
is, and then we will show you how to make one.
| | 00:11 | I'm looking at my Content viewer and I have
a Panorama object on the screen right now.
| | 00:16 | If I click it, it's going
to open the Panorama player.
| | 00:19 | The Panorama player allows you
to scroll around the content.
| | 00:23 | As I drag left and right, you can see there's some
momentum scrolling and also I can see all the way around.
| | 00:30 | If I had made my Panorama
to have an up and down view,
| | 00:33 | I'd be able to see all the way up to the sky
and all the way down to the ocean below my feet.
| | 00:38 | Another feature of the Panorama is
that you can zoom in and zoom out on it.
| | 00:42 | I happen to have a multi-touchpad,
so I can zoom in by pinching out,
| | 00:46 | and then I can zoom back out by
pinching. Of course I can move around again.
| | 00:50 | Again if I had up and down view
then I could see up and down as well.
| | 00:54 | Making these panoramas require some skill and
we will be looking at that in another movie.
| | 00:59 | A Panorama is a great way for you to provide additional
visual context for the content inside of your DPS publication.
| | Collapse this transcript |
| Preparing assets| 00:00 | In order to create that panoramic
effect that we like inside of DPS,
| | 00:04 | we've got to have a very
specifically structured set of images.
| | 00:07 | I'm going to begin with a
panorama that I've built in Photoshop.
| | 00:11 | We're looking at it here and I'll scroll
through it so you can see what I've got.
| | 00:15 | As I work from the left to the right, you can
see that I have an image that starts at the pier,
| | 00:20 | goes all the way around, and
then ends up at the same spot.
| | 00:24 | I've been very careful at how I trimmed it.
| | 00:27 | There is half of a pole there, and on the other
side, the other half of that pole or that railing.
| | 00:36 | It's very important that we have images that
go from one end to the other of our panorama.
| | 00:41 | Otherwise when we wrap all the way around, we may end up
with a jarring contrast between the beginning and the end.
| | 00:47 | In this case, because of the way the sun was setting, I do
end up with a noticeable scene when we go to the 360 viewer.
| | 00:54 | Again, I used Photoshop in this case and
what I actually did was to stand on the pier
| | 00:57 | and turn around with my camera and
then stitch all those images together.
| | 01:01 | Now that I have this 360 degree panorama, I need
to turn it into that appropriate file structure.
| | 01:07 | To do that I am going to
use a tool called Pano2VR.
| | 01:11 | Now this is not the only way that you can do this, just know that
within the documentation for DPS this particular tool is recommended.
| | 01:19 | In order to use the output for commercial
purposes, you will need to purchase a license.
| | 01:25 | While this copy is running in trial mode the actual panorama that I
built was built with a licensed copy so it doesn't have a watermark.
| | 01:32 | In order to use this tool for our purposes, we need to take that
TIFF file that I built before, and then put it into this panorama area.
| | 01:40 | In the Assets folder it's called Beach_
Pano.tiff, and we will drag it right here.
| | 01:47 | Having loaded it, we can
then adjust some parameters.
| | 01:50 | I need to understand what the viewing area is.
| | 01:52 | Pano2VR is pretty smart in that it can read
out exactly what type of a panorama this is.
| | 01:59 | It knows for instance, that this is a cylindrical panorama and that my
expectation is to go all the way around the cylinder and not to look up and down.
| | 02:06 | Let's look at our parameters here because we
want to take some of this information over to DPS.
| | 02:11 | You can see that, out of the box, it assumes that we can
go all the way to the sky and all the way to the floor.
| | 02:16 | We also have the built-in image
limitations that are indicated here.
| | 02:20 | I can only go up 19 degrees and down 19 degrees, and so what I'd
like to do is to set my limits to 19 degrees up and 19 degrees down.
| | 02:29 | If you've built a panorama with a wide-angle lens then
you've probably got a much larger field of view up and down.
| | 02:35 | The tool will detect the upper
and lower limits of your image.
| | 02:39 | Remember those numbers because
you'll need them later on in DPS.
| | 02:44 | You can also set other limits. At the moment this particular viewing
pane shows me only -12.8 degrees and 12.8 degrees left and right of center.
| | 02:53 | I want to set my starting point
to be looking right down the pier.
| | 02:57 | So having moved my image around, I want
to set this as my starting point today.
| | 03:01 | Click the Set button to apply my
default view. Having done that I will say Ok.
| | 03:06 | Yes I would like to save my current
view as a default view for the panorama.
| | 03:10 | Next I need to tell it what I want to manufacture
with the tool. To do that I'll pick Convert Input.
| | 03:16 | The resultant that we want is going to be a JPEG
file, so we'll say our format is going to be JPEG.
| | 03:23 | Secondly we need to have a cube faces output.
| | 03:27 | Having made these choices I can now produce
the six images that I need for my DPS panorama.
| | 03:33 | These images that I've made will
now fit into the Panorama overlay.
| | 03:36 | We will see how to actually apply
them to the overlay in another movie.
| | 03:40 | Remember that unless you register your copy
of Pano2VR, your images will have a watermark.
| | 03:46 | While Pano2VR is an effective tool for building these
types of overlays, it's not the only tool that's available.
| | 03:53 | You may have additional tools at your disposal. Go ahead and
use them so long as it can produce the inside faces of a cube.
| | 04:00 | That's what DPS needs in order
to make its panorama overlay.
| | 04:03 | We'll see how to take that Panorama overly that we've
made and put it in into our DPS publication in another movie.
| | Collapse this transcript |
| Creating the viewer| 00:00 | Once you have your assets in place you're ready to now
create the viewer for the panorama in the Overlay Creator.
| | 00:06 | Go to page 8 which is the
last page of the document.
| | 00:09 | You will see that there are a few
things that are pre-prepared on this page.
| | 00:12 | I have a large gray box onto which
we are going to put the panorama,
| | 00:17 | and then I also have a little overlay that's our
instruction that says, Click to explore the pier.
| | 00:21 | This is simply an overlayed instruction that's going to disappear when
the user clicks on the panorama to activate it in the DPS publication.
| | 00:28 | What we care about right
now is this box right here.
| | 00:31 | So select it and then go to the Overlay Creator.
| | 00:34 | You'll see that there are a number of choices, but
the one that we care about right now is the panorama.
| | 00:38 | We need to load up the set of images, and then we
can configure the various options for those images.
| | 00:44 | Click the folder to load the set of images.
| | 00:46 | We're going to be going in to the Beach_Pano folder,
that is in the Links folder in your Assets folder.
| | 00:51 | All you have got to do is browse to the folder and then the
Overlay Creator will select all of the items inside of that folder.
| | 00:57 | You can see that it takes
up an awful lot of space.
| | 01:00 | It takes up a lot of space because
I've provided a high-resolution panorama.
| | 01:04 | This allows us to zoom in and out of
it to be able to see greater detail.
| | 01:08 | We need to resize it, so I'm going to
simply type in 30% for the size up here.
| | 01:14 | This will scale the panorama.
| | 01:16 | There's something you need to be
aware of when working with panoramas.
| | 01:18 | The Overlay Creator works by
running scripts in the background.
| | 01:22 | This means that when we've resized this frame,
in fact the number of scripts have kicked off
| | 01:27 | to be able to continue to hook up
this object to the panorama files.
| | 01:32 | This means that if you try to Undo
you may have to undo several times.
| | 01:36 | For instance, if I look under Edit,
you will see Undo Set Scripting Tag.
| | 01:41 | I don't want to do that right now, I just
want you to be aware that some of these tools
| | 01:45 | will behave differently than you
expect from other tools inside of InDesign.
| | 01:49 | Let's crop this image, and then we'll set
it on the page in the appropriate place.
| | 01:52 | Alright, I just want to
zoom in on that a little bit.
| | 02:01 | So we will select the image
itself and we will expand it.
| | 02:05 | There we go. So now I've got it centered in the frame,
and it looks like it's in the shape that I want it to be.
| | 02:11 | Now let's take a look at some of the
settings that we have for the panorama.
| | 02:15 | I need to select the frames so
hit Escape to select the frame.
| | 02:19 | Having done that, let's go ahead and
look at some of the options in the panorama.
| | 02:23 | First of all, you can see that our initial zoom has been
set as well as our initial vertical and horizontal rotation.
| | 02:30 | When we start the panorama viewer, I
want the image to be looking down the pier.
| | 02:35 | I happen to know that that is a 41 degree rotation to the
left, so enter the number -41 for the horizontal rotation.
| | 02:43 | You also see that I can limit my
Vertical Pan. If I don't limit my vertical pan,
| | 02:48 | then the user's going to be able to
see up all the way to black nothingness,
| | 02:52 | and then down all the way to black nothingness,
because this image doesn't have a top and bottom.
| | 02:59 | I want to limit so that
there's no rotation up and down,
| | 03:02 | and the user's going to be looking at
the full field of view all the time.
| | 03:05 | I will turn on Limit Vertical Pan and set my
Up and Down values to -1 and 1 appropriately.
| | 03:14 | I could also limit the amount of
horizontal rotation that a user could do.
| | 03:18 | If I wanted to limit the field of view,
then I could enter those values and
| | 03:21 | then the user would only be able to see to
the left and to the right just to those numbers.
| | 03:26 | The number that you are looking
here are all portions of a circle.
| | 03:29 | There are 360 degrees in a circle and a full up
is 90 degrees up and full down is 90 degrees down.
| | 03:38 | In the case of the horizontal panning, you can go all the
way to the left, say 180 degrees and you'll looking behind you,
| | 03:44 | or you could go all the way to the right,
180 degrees, and you'll be looking behind you.
| | 03:49 | You can set those limits so that a user could go all the
way around the circle maybe once, maybe twice and then stop.
| | 03:56 | I'm going to limit once again my Vertical
Pan so that the user can't go up or down,
| | 04:00 | but I don't want to limit the number of times
that they can go all the way around the circle.
| | 04:05 | Some of these numbers will be supplied when you
build your cube faces inside of your 3-D application.
| | 04:11 | Others you will just to
use Trial and Error to get.
| | 04:14 | Let's preview our results.
| | 04:18 | And here's our pier. If I click it, it will
activate the Viewer and I can scroll around.
| | 04:24 | There is my Momentum, and then if
I pinch I can zoom in and zoom out.
| | 04:33 | Using the panoramic viewer is a great way for
you to provide additional information to your user.
| | 04:39 | This could be a visual
scape, like we've got here.
| | 04:42 | It could also be a way to provide frames of reference
when discussing particular features in the landscape.
| | 04:48 | Don't be afraid to explore some of
the tools for building panoramas.
| | 04:52 | Grab yourself a camera, go out and take
some shots and experiment with panoramas today.
| | Collapse this transcript |
|
|
7. Adding Audio and VideoAdding and configuring audio| 00:00 | One of the things that people expect
from interactive publications is audio.
| | 00:04 | Let's add some audio now.
| | 00:05 | In order to place audio into InDesign, all you have got to
do is to select File > Place and then browse to an audio file.
| | 00:12 | The audio file type that DPS will accept is mp3.
| | 00:15 | It is not a very big option but it's something that
everybody can make and you can do it with lots of different tools.
| | 00:21 | We're not going to talk about making mp3s
here; you can approach that on your own.
| | 00:25 | I have supplied an mp3 file
however and it's in your Assets folder.
| | 00:30 | The file is called Ocean_
soundscape, select it and then open it.
| | 00:34 | Click to place it in the area
underneath Click to hear an ocean soundscape.
| | 00:38 | You can see that it makes a very small box. We'll make a
little bit larger, and then we'll center it in this area.
| | 00:44 | Now if you've been using sound in
InDesign before, you know that you need to have
| | 00:47 | some type of trigger to make it go that
usually involves placing the sound on the pasteboard
| | 00:53 | and then applying a button that
would then turn on or turn off the sound.
| | 00:58 | DPS provides all of that
infrastructure in the Overlay.
| | 01:01 | Open the Overlay Creator to see the controls for sound. You
can see that you have the option to choose Controller files.
| | 01:08 | Controller files are a group of files in
a folder that have a specific structure.
| | 01:13 | They define what's going to be displayed whether
we are in the Pause state or in the Play state.
| | 01:19 | I've provided a Pause and a
Play controller with five states.
| | 01:23 | They are sequentially numbered from 001 to 005.
| | 01:27 | The overlay will display these images in
order as the control, as the audio plays through.
| | 01:33 | The more images you provide, the more
granular that control is going to look.
| | 01:37 | You can imagine building a thermometer for instance,
that would go from left to right as the audio played out.
| | 01:43 | In my case, I've a built a circle that
goes through the quarters of a clock.
| | 01:46 | Let's browse to the Controller files now,
and then we'll Preview it to see how it works.
| | 01:51 | The files are in the folder called
Audio_Controls. You can see them here.
| | 01:56 | They're called audio_controls_001 pause and then play,
all the way down to audio_controls_005 pause to 005 play.
| | 02:05 | I made them in Illustrator and exported to PNG.
| | 02:08 | The control does require a PNG graphic.
| | 02:11 | So if you're going to build your own controller make
sure that you are using PNGs that are sequentially numbered.
| | 02:16 | They also have to have the suffix
Pause or Play in order to work correctly.
| | 02:21 | In any publication, you can have any number of audio controls,
so long as each audio object is pointing to that set of controls.
| | 02:29 | I also have the option to tell this
audio to auto play when we go to this page.
| | 02:33 | I'm not going to enable this, this way
the user will have the option to turn it on.
| | 02:39 | You can see that it doesn't look
like anything has happened here.
| | 02:42 | Know that when the overlay gets built, my images are
going to sit in that space instead of the empty square
| | 02:48 | and then the user will be
able to interact with the sound.
| | 02:51 | Let's Preview to see what happens. That
will take us to page 7 and then here's page 8.
| | 03:01 | You can see my controller there.
If I click it, I can hear the audio.
| | 03:07 | And there's my clock beginning to go
around the quarter. When I pause, it stops.
| | 03:12 | Many people use audio to
enhance their DPS publications.
| | 03:15 | Now that you know how to put audio into
your DPS publications, start using it today.
| | Collapse this transcript |
| Setting video playback options| 00:00 | One of the great benefits of using DPS is
that we can use video in those publications.
| | 00:05 | In print a picture may be worth a thousand words, but it
could be worth a million words with a video in a DPS publication.
| | 00:11 | One of the things you've got to think about is what
type of video you can use in your DPS publication.
| | 00:16 | As of today, we can use the mp4 file format. That's
going to be a QuickTime encoded with an H.264 codec.
| | 00:24 | You'll need to provide any video in that
format to be able to play it inside of DPS.
| | 00:30 | That limitation is determined
by the iPad and what it can play.
| | 00:33 | Other devices may be able to play other formats. I recommend that
you test that if you're going to be developing video for other devices.
| | 00:40 | However, you know that an iPad and the
other machines can always play an mp4,
| | 00:45 | so I'd recommend that you
use that encoding for now.
| | 00:48 | Let's put a video into this publication now.
| | 00:51 | I want to put my video into this space
right here. I already have a box drawn for it,
| | 00:55 | so let's select it, and then we'll
place the video into that container.
| | 00:59 | The video is located in the PaladinVideo
folder in your Links folder, in the Assets folder.
| | 01:04 | Select this video, you can see that it's mp4
encoded, and then tell it to replace the selected item.
| | 01:09 | It doesn't look like anything has happened, so we need
to set our poster frame. We do that in the Media panel.
| | 01:15 | In the Media panel we can scrub through the
video and choose a frame for our poster frame.
| | 01:19 | Otherwise we could load one up if we
had one that we had created earlier.
| | 01:23 | Scroll ahead to about 15 seconds and then
set my poster frame to the current frame.
| | 01:30 | Note that there are a number of other
controls here that are related to SWF playback.
| | 01:35 | We're not going to be using SWF playback. We're
going to be using the Overlay Creator playback.
| | 01:40 | So once we've chosen the poster frame, this
is all we need to do in the Media Controller.
| | 01:45 | Let's go and take a look
at the Overlay Creator now.
| | 01:48 | In the Overlay Creator you can see
down here that I have three options.
| | 01:52 | The first is to Auto Play. When we went to this page, if we
had Auto Play selected, then the video would begin to play.
| | 01:59 | We also can choose to Play at Full Screen.
| | 02:01 | I'm going to enable that now, because at
this tiny view this video might not be so clear.
| | 02:07 | Remember, that because you can use video in
location, it can be a great way to enhance content
| | 02:13 | by putting video right in the
place where it needs to be viewed.
| | 02:17 | The last option is to
Tap to View the Controller.
| | 02:20 | If I tap the video then my controller will come up from the
bottom, and then I'll be able to pause and restart the video.
| | 02:25 | There's also a scrubber control to allow me to move
through the video and the ability to turn the audio off.
| | 02:31 | Now that I've set up my video,
let's go ahead and Preview it.
| | 02:34 | We'll just go down to that page, here it
is and once I click, the video will play.
| | 02:43 | [Video Playing]
| | 02:43 | So you can see that the video is playing, I
have my controller here where I can, if I tap it,
| | 02:52 | it will wake up, and then I can
move to other parts of the video.
| | 02:58 | (Video Playing)
| | 02:58 | I can also shut the sound on and off.
| | 03:01 | If I had not enabled Full Screen, then the
video would simply play in that box right there.
| | 03:07 | Let's see what that looks like.
| | 03:09 | All we have to do is disable
this option and then preview again.
| | 03:13 | (Video Playing)
| | 03:13 | So you can see that the
video is playing in location.
| | 03:26 | You can imagine having several
videos on one screen at a time.
| | 03:30 | Video is a great way to provide additional information to your
users without having to take up tons and tons of vertical real estate.
| | Collapse this transcript |
|
|
8. Using the Web ViewerOverview of the web viewer| 00:00 | One of the things that we can
take advantage of in our designs
| | 00:03 | is that people who are using these Tablet
devices are usually connected to the Internet.
| | 00:07 | Because they're connected to the Internet, we can take
advantage of content that's located out of our device.
| | 00:13 | This content can be displayed
in DPS in a Web content object.
| | 00:18 | That web content object can display content that is either
local, that means it's on the device, or out in the Internet.
| | 00:24 | This provides some really interesting ideas when you're thinking
about developing content and keeping your DPS Publication current.
| | 00:31 | A lot of educational developers will
often have a link to more current content
| | 00:36 | that might be available on the Web site, in
addition to the book that a student might be reading.
| | 00:41 | If I have a magazine, I might want to update
that content more frequently than every day,
| | 00:46 | or more frequently than every week
. I can do that in a Web window.
| | 00:50 | In this example here, I've got
two different Web windows running.
| | 00:53 | This one happens to be a Twitter feed. When we click it, it
activates and we can see some live content coming from Twitter.
| | 00:59 | At the bottom of the Publication, I have another Web window.
This one happens to be a contract form for Two Trees Olive Oil.
| | 01:06 | If I click it, it will activate, and
now I'm looking at the Web site itself.
| | 01:10 | The hyperlinks are not only active, but
the content itself is active in this frame.
| | 01:14 | If I would like to send an email to
somebody for instance, I can click on the name.
| | 01:19 | It's going to open up in my browser in DPS,
and I can begin to interact with the service.
| | 01:25 | I can fill in that information, send an email,
and let them know how I think about the product.
| | 01:30 | This provides a lot of opportunity for
you to integrate your DPS Publication,
| | 01:34 | which you might think of as being fixed once it gets on
to the device, with the content that's out on the Internet.
| | 01:39 | There are some things to note though about the
content that you can show in your DPS Publication.
| | 01:45 | One of the limitations is that the content
has to be able to view on the device itself.
| | 01:50 | When we're thinking about devices, the
most prominent one today is the iPad.
| | 01:54 | It can show HTML content and HTML5 content
and does respond to CSS3 directives as well.
| | 02:01 | This means that you can take
advantage of frameworks like jQuery Mobile,
| | 02:05 | and use it to develop content that will
display quite interestingly inside of the iPad.
| | 02:10 | Other devices will display that content as well,
but they don't all have the same capabilities.
| | 02:15 | You'll definitely want to test this content on
devices when you're developing local content that's HTML.
| | 02:23 | What's the difference then between local
content and content that's on the Internet?
| | 02:26 | This frame is completely
being served from the Internet.
| | 02:30 | The other frame is some HTML content that is loading
here and then referring to content on the Internet.
| | 02:37 | This is that Webpage that I'm looking at right now
and you can see that it's got my CSS reference up top,
| | 02:42 | and then it's all
defined within the publication.
| | 02:45 | As I scroll down, I can see
that I've got my script here.
| | 02:49 | These are the things that are actually going
to call out to Twitter and provide that content.
| | 02:53 | Obviously, my device needs to be connected
to the Internet in order for this to work.
| | 02:57 | The important thing to note here is
that this provides a way for you to extend
| | 03:00 | what your DPS Publication can do beyond the
tools that are provided by the DPS framework.
| | 03:07 | We'll see how we can set up a Web
content viewer in another movie.
| | Collapse this transcript |
| Creating a web viewer portal| 00:01 | When we build a Web Content Overlay, remember
we've got two different kinds that we can make.
| | 00:05 | We can make one that refers to
content that's local to the DPS Publication,
| | 00:09 | or we can make one that refers to
content that is solely located on the Internet.
| | 00:13 | First we're going to build one that refers to
content that's local in the DPS Publication.
| | 00:18 | Go to page 3 and then click on this box
right here. This box has an image in it.
| | 00:24 | It reminds us to connect to the
Internet in order to get to the Twitter feed.
| | 00:28 | The Twitter feed will be provided by the Overlay and
the Overlay won't be active until we actually touch it.
| | 00:34 | Let's look at the Overlay Creator panel now.
| | 00:36 | In the Overlay Creator panel, I want to browse
to some content that will display in this Overlay.
| | 00:42 | Click on the folder to browse.
| | 00:43 | We're going to the HTML folder that's
located in the Links folder in the Assets folder.
| | 00:50 | Select Index2.html and then click Open.
| | 00:54 | This will load that HTML
file into the DPS Publication.
| | 00:58 | Any content that's in that folder
that's referred to by that HTML file,
| | 01:03 | will then get bundled and will be
available to the DPS Publication.
| | 01:06 | This is important as you're
designing that self-contained content.
| | 01:10 | You might use Dreamweaver, you might use
any other Web editor to build that content.
| | 01:15 | Just know that that content must be able to
display on the device that you're targeting.
| | 01:20 | This means that if you're building Flash content
for instance, it's not going to play on an iPad.
| | 01:25 | It might play on a PlayBook but you definitely
want to test that before you go ahead and deploy it.
| | 01:31 | In this case, my HTML is very basic. It's
just a Tweeter feed containing ome JavaScripts
| | 01:36 | that are going to go out to Twitter and
bring in some content and place it here.
| | 01:40 | The content in the window will always be
based in the upper left-hand corner of the frame.
| | 01:45 | This is important as you're
designing that HTML content.
| | 01:49 | You can make it respond to
the size of the display window.
| | 01:52 | If you want it to do that then you
may want to Scale Content to Fit.
| | 01:56 | Clicking Scale Content to Fit will inform the renderer that we
need to make sure that the window is exactly the size of the frame,
| | 02:03 | otherwise we're only going to see the upper left-
hand corner of the rendered content in that window.
| | 02:09 | You most likely will want
to allow User Interaction.
| | 02:12 | If you do then the user's going to be
able to scroll up and down in the content,
| | 02:16 | they're going to be able to click on
Hyperlinks, and so on and so forth.
| | 02:19 | If for some reason you don't want the
user to be able to affect that content,
| | 02:23 | then you want to disable Allow User Interaction.
| | 02:26 | Allowing user interaction
is the default behavior.
| | 02:29 | You also have the ability to
make the background transparent.
| | 02:32 | This presents some interesting
design opportunities for you.
| | 02:35 | That referred Web Content can fit
within the confines of that background image.
| | 02:40 | When you do that, you can create graphics that
are going to be local to the DPS Publication,
| | 02:44 | but the content that may flow around or inside
of those images will be coming in from the Web.
| | 02:50 | That allows you to create some really interesting,
interactive, and up-to-date content inside of your DPS Publication.
| | 02:58 | You can have the HTML content Auto
Play by clicking the Auto Play button.
| | 03:02 | I want the user to touch this before it will go and grab
that content by itself. So I'm going to leave that off.
| | 03:08 | In this example, we're
referring to content that's local.
| | 03:11 | There is another place where
we've got some content that is remote.
| | 03:14 | Let's go down to the last page
of this document. This is page #9.
| | 03:18 | Here I want to take the user to
this contact form at that Web site.
| | 03:23 | I'll create an Overlay by selecting the
image and then clicking on Web Content.
| | 03:30 | From here, I can type in
the URL to that location.
| | 03:34 | Again, I don't want to Auto Play because I want
the user to touch the form to start up the browser.
| | 03:40 | I'm going to leave the background Opaque because I
want the Web content to cover up this screenshot.
| | 03:46 | I absolutely want User Interaction because
the user needs to be able to fill out the form.
| | 03:52 | Lastly, that form is built to fit on this
1024x768 window, so I'm going to leave that alone.
| | 03:59 | Now that we've made all these changes,
let's go ahead and preview our results.
| | 04:02 | Now let's go down to page
3 to view the Twitter feed.
| | 04:07 | We have to click it to activate
it and that will activate the feed.
| | 04:11 | You'll see something different than is displayed here
because this Twitter feed does update from time to time.
| | 04:17 | You can also scroll through the content.
| | 04:20 | In addition, these links are active.
| | 04:23 | This is now opening up to this particular post
in Twitter, in my browser, in the DPS Publication.
| | 04:29 | Let's go back to the DPS Publication.
| | 04:31 | Now we'll go down to the last page of the document,
and here we are. When I click this page it will activate.
| | 04:38 | Now I'm looking at Live Web Content on
this page. That fade was provided by DPS.
| | 04:44 | As I hover over the various links,
you can see that they are active.
| | 04:48 | We can use the contact form by
clicking on Kurt James's name.
| | 04:53 | This will open up that web form in
my browser, in the DPS Publication.
| | 04:57 | Imagine building a DPS Publication that
includes not only interactivity but also live feedback.
| | 05:03 | Using Web forms is a way
that you can achieve that.
| | 05:06 | We've seem two examples of using Web
content inside of our DPS Publication.
| | 05:11 | We've seen the ability to use Local
HTML Content and Remote HTML Content.
| | 05:16 | In either case, you've got to make sure that
that content will display correctly on your device.
| | 05:21 | Also if you're referring to content that's on
the Web, you've got to make sure that that content
| | 05:26 | is going to be persistent and that there'll
always be something for the DPS Publication to look at.
| | 05:32 | If you're going to mix Local and
Web content that same advice applies.
| | 05:36 | In our Twitter feed we're depending upon Twitter
to provide that content to the DPS Publication.
| | 05:42 | Once again, test on all of your devices to ensure
that your Web content is going to work correctly.
| | Collapse this transcript |
|
|
9. Using Pan and ZoomPlanning for pan and zoom| 00:00 | When we place images onto a print publication or into
a layout in InDesign in general, we often crop them.
| | 00:06 | This means that there is content that's outside of our field
of view, and the Print Viewer will never be able to see that.
| | 00:12 | If you use a Pan and Zoom Overlay in DPS, you can
allow the user to be able to see that cropped content.
| | 00:19 | In addition you can allow the user to Zoom in
on content and see close detail of that image.
| | 00:25 | Let me show you, what I mean.
| | 00:27 | I have a page open in my Content Viewer and
it happens to have a Pan and Zoom object on it.
| | 00:33 | You can see, I get the advice, look a
little closer. Alright I'm game, I will tap it.
| | 00:38 | Once I tap it, it loads
the image into the frame.
| | 00:41 | Now, I can move it around by
touching it and dragging it.
| | 00:45 | You can see that there's some more
content to the left and to the right.
| | 00:48 | I would like to zoom in on this wall.
| | 00:52 | I can do that up to a point.
| | 00:55 | The Pan and Zoom overlay allows you to
invite viewers to explore images more deeply.
| | 01:02 | Since they can move around, they can get a better
sense of the entire image and unlike a print publication,
| | 01:07 | you can really give them a complete view into a
subject by giving them the ability to zoom in.
| | 01:13 | In a print publication we might have a call-
out that might focus in on a specific area.
| | 01:18 | In DPS, you can ask the
user to do that themselves.
| | 01:22 | It provides great interactivity and
gets the users deep into your content.
| | 01:26 | We will see how we can build one of
these Pan and Zoom overlays in another movie.
| | Collapse this transcript |
| Configuring the viewer| 00:00 | When planning your Pan & Zoom, you
need to be thinking about several things.
| | 00:04 | First of all, the resolution of the image
that you're going to place into the frame
| | 00:08 | will determine the maximum
amount of zoom that's available.
| | 00:12 | The Pan & Zoom will only allow you to zoom down to 100% of
the graphic's actual size as determined by its resolution.
| | 00:20 | This means that you want to be working with 72
dpi images, when you're working in Photoshop.
| | 00:25 | Secondly, your images can be no larger
than 2000 pixels in either dimension.
| | 00:31 | Last, the tool can't display
transparency, so you have got to be working with
| | 00:35 | JPEG images or PNG images that are opaque.
| | 00:38 | Now that we have that, let's put
together our Pan & Zoom overlay.
| | 00:42 | I would like to fill this box with an image.
| | 00:46 | Select it then choose File >
Place or Command+D or Ctrl+D.
| | 00:49 | Browse to the folder called CornerPanScan
that's in your Links folder in your Assets folder.
| | 00:56 | Select the FrugalGroundPanScan-
72dpi.jpg, and then choose Open.
| | 01:02 | This will fill this frame and what you're looking at
right now will become the poster frame for the image.
| | 01:07 | By default, the image is
placed at 100% of its size.
| | 01:12 | We can determine this by using the
content grabber and then looking at the scale.
| | 01:16 | This image is at the maximum
dimensions allowed, which is 2000 pixels wide.
| | 01:21 | It could be higher, if we wanted it to be.
| | 01:24 | Right now, we are zoomed
in as close as we can get.
| | 01:26 | I would like to zoom-out some, so that we can have an
opportunity to zoom-in when we're using the Pan & Zoom.
| | 01:34 | Right-click and go to Fitting and
choose Fill Frame Proportionally.
| | 01:40 | What's happened now is that our content
is exactly filling the frame top to bottom.
| | 01:44 | You can see that it's at half of its
original size when it's in this frame.
| | 01:48 | There is more content, and we can
see that by clicking and holding.
| | 01:52 | You can see to the left and to
the right there is more content.
| | 01:57 | The user is going to be able to see this
content when we start up the Pan & Zoom overlay.
| | 02:03 | We will just center this in the frame.
Now we need to set up the Pan & Zoom.
| | 02:09 | To do so, I need to select the frame
itself and then go over to my Overlay Creator.
| | 02:15 | Click on Pan & Zoom, and
then choose the Pan & Zoom mode.
| | 02:20 | Normally, I choose Pan & Zoom, and this
will allow the user to be able to slide
| | 02:24 | back and forth and up and down,
and to zoom in on content.
| | 02:27 | You could however choose Pan Only, and what would
happen then, is that the user would only be able
| | 02:32 |
to move side to side or up and
down, but wouldn't be able to zoom.
| | 02:36 | Now that we've made the choice to allow
panning and zooming, let's preview our result.
| | 02:50 | And we'll go down here and when we select it, we'll see
that it changes a little bit, because now it's the overlay.
| | 02:56 | You'll notice something else, in our InDesign stacking
order we have that invitation to touch to explore more.
| | 03:03 | That's simply some text that's
sitting on top of this overly.
| | 03:07 | When we activate the overlay, it
will cover up in the existing content.
| | 03:11 | Now that I'm here I can zoom, I can scroll
around and I can see all that content here.
| | 03:16 | When I'm done, I can double tap or
double-click and then the frame will reset.
| | 03:21 | The Pan & Zoom is an easy way to provide
interactivity in your DPS publications.
| | 03:26 | You can take any image that you would normally
crop, and allow your users to see more of it,
| | 03:30 | simply by turning it into a Pan & Zoom overlay.
| | Collapse this transcript |
| Building a scrolling text box| 00:00 | Related to the Pan & Zoom overlay
is the Scrollable Content overlay.
| | 00:05 | This is an overlay that's not
available inside of your Ooverlay Creator,
| | 00:08 | instead you've got to build it by hand and
I'd like to take you through that process now.
| | 00:12 | Go to page 3 and look over on the right.
| | 00:15 | You have got Recent Tweets and a white
box with a drop shadow underneath it.
| | 00:19 | I want that white box to show me
some content that I can scroll through.
| | 00:23 | The content that we are using is
going to be a pull from a Twitter feed.
| | 00:26 | We'll begin by setting up the layer
structure for this Scrollable Content overlay.
| | 00:33 | Select this object and
then open up the Layers panel.
| | 00:37 | Over in the Layers panel, you'll see
that this exists on the Overlays layer.
| | 00:41 | It's down here and its called rectangle.
| | 00:44 | We need to change its name because when
we build the Scrollable Content overlay
| | 00:49 | there needs to be an object that will be the container
and an object that's going to be the Scrolling Content.
| | 00:54 | We need to change its name because when
we build the Scrollable Content overlay
| | 00:59 | there needs to be an object that's the
portal and an object that's the content.
| | 01:04 | These two objects need to have
exactly the same name in the Layers panel.
| | 01:08 | Let's rename this rectangle RecentTweets.
| | 01:16 | Now, this frame is called RecentTweets.
| | 01:19 | It's going to be the portal for the
Scrollable Content that we are going to build next.
| | 01:23 | Copy this object. While it's not necessary to
duplicate this object on the Scrollable Content layer,
| | 01:30 | it does make it handy for
matching up the size appropriately.
| | 01:34 | We need to create a new layer and we
will call this new layer Scrollable Content.
| | 01:39 | It has to have exactly that name
with a capital S and a capital C.
| | 01:51 | With Scrollable Content
selected, paste the copied block.
| | 01:54 | We are going to fill this
block with some content.
| | 01:58 | Before we do that I want you to take a look
at what's in Scrollable Content right now.
| | 02:03 | In the Scrollable Content layer
there's an object called RecentTweets.
| | 02:07 | It has exactly the same name as
the object in the Overlays panel.
| | 02:10 | This is essential for this wiring to work.
| | 02:13 | Now that we've built our Recent Tweets frame in the
Scrollable Content layer, let's fill it up with some content.
| | 02:20 | Place the following file from your
Links folder that's in your Assets folder.
| | 02:23 | There's a file there called
RecentTweets.txt. Select it and then choose Open.
| | 02:32 | You may also want to
enable Replace Selected Item.
| | 02:37 | That text file now flows into this flame.
| | 02:40 | We need to remove the drop shadow from the frame and
extend the content so that we can see all of the content.
| | 02:47 | First, we'll clear the effects.
| | 02:52 | Next, we'll extend the frame so that we
can see all of the content in the frame.
| | 03:03 | You want a frame to end at
the bottom of the content.
| | 03:06 | The last thing I'd like to do is to insert the copy in the
frame so that the text won't butt up against the container.
| | 03:13 | We need to modify the Text Frame Options.
| | 03:15 | You can right-click and
choose Text Frame Options here.
| | 03:18 | We need to set the text Inset
. Let's set it to 4 pixels.
| | 03:26 | This will provide just enough padding so that
the portal doesn't interfere with the content.
| | 03:30 | Now that we have all the pieces in place,
we are ready to preview our publication.
| | 03:36 | Before I do that I just want to point out
that the content that's going to go into
| | 03:39 | the Scrollable Content container will
not appear in the layout when we publish.
| | 03:45 | You might be wondering about this text frame that seems
to be taking up an awful lot of real estate on my page.
| | 03:50 | When we publish, this text frame is going to
appear inside the Scrollable Content portal.
| | 03:55 | It will not be sitting on top of the
bicycle or any other content that we can see.
| | 04:00 | If you don't want to be distracted by this content while
you're doing your design, you can move it onto the pasteboard.
| | 04:06 | If you have links that are going to
be in the Scrollable Content object,
| | 04:10 | for instance you might have graphics that are
in line, or it's a completely graphical object.
| | 04:15 | If you have links then you've got to make sure that that
frame touches the visible area of the page at some point.
| | 04:21 | That way all the links will get
bundled when the folio gets published.
| | 04:25 | I'm just going to set this off to the right so it
doesn't distract me when I'm doing other design work.
| | 04:33 | Now, we are ready to Preview.
| | 04:48 | You can see our Scrollable Content here.
| | 04:52 | If you've got a sharp eye,
you'll notice this indent right there.
| | 04:55 | What's happening is that the content is being
indented by a wraparound area that's defined there.
| | 05:01 | This means that we've got to be careful about
where we put the Scrollable Content before we publish,
| | 05:06 |
or you can change the Text Wrap
Options for the object or the layer.
| | 05:10 | Unlike a Pan & Zoom overlay, which relies
on an image that the user can interact with,
| | 05:15 | a Scrollable Content overlay allows you to take any type of
InDesign content and then put that inside of a scrolling window.
| | 05:23 | If the content is bigger than the
scrolling window either vertically or horizontally,
| | 05:26 | then the user is going to be able to scroll
around that content to be able to explore more.
| | 05:32 | Take advantage of these Scrollable Content
overlays when a Pan & Zoom overlay isn't enough.
| | Collapse this transcript |
|
|
10. Structuring Your DocumentIntroducing the Folio Builder panel| 00:00 | DPS publications are built
out of chunks called articles.
| | 00:03 | These articles are aggregated into
what's called a Folio, and the Folio, is the
| | 00:07 | thing that you distribute to devices.
| | 00:10 | Let's take a look at how
we can build folios now.
| | 00:12 | To do so, you need to open the Folio Builder.
| | 00:15 | From Window > Extensions > Folio Builder.
| | 00:23 | This opens the Folio Builder panel.
| | 00:25 | I'm going to dock it
underneath my Overlay Creator.
| | 00:30 | When you open the Folio Builder panel,
you will be asked to sign in to the
| | 00:34 | Digital Publishing Service.
| | 00:35 | If you don't have an Adobe ID, you
won't be able to sign into the service.
| | 00:40 | If you have a provisioned account,
when you sign in, you will be connected to
| | 00:44 | that provisioned account.
| | 00:46 | Account provisioning happens when you
subscribe as an enterprise subscriber or
| | 00:50 | as a professional subscriber.
| | 00:51 | You're going to want to talk to
Adobe about making that arrangement.
| | 00:56 | If you don't have a provisioned account,
then you can still sign in to the Folio
| | 01:00 | Builder and create one folio.
| | 01:02 | This one folio again, will be able to
contain multiple articles. Let's sign-in now.
| | 01:09 | I'm going to sign-in with
my fully provisioned account.
| | 01:12 | This will enable me to
build more than one folio.
| | 01:15 | Again, if you're signing in with your
basic Adobe ID that isn't provisioned, you
| | 01:19 | will only be able to create one folio.
| | 01:31 | Once you sign-in, your Folio Builder
panel will show you all of the folios that
| | 01:35 | you've created up to now.
| | 01:37 | Mine is empty, because I
haven't created any folios yet.
| | 01:40 | From the Folio Builder,
we can create a new folio.
| | 01:44 | You can do that from the flyout
menu or by clicking New at the bottom.
| | 01:48 | Your folio is going to take on the
size of the currently open document.
| | 01:53 | You can see that I have a document
open and that it's set to 1024x768.
| | 01:59 | There are a number of other
sizes that are available as well.
| | 02:02 | These correspond to some of the
typical sizes for mobile devices.
| | 02:06 | If you're going to be targeting a Zoom
or a PlayBook, then you'll need to enter
| | 02:10 | those resolutions here directly.
| | 02:13 | A Motorola Zoom or a Blackberry
PlayBook is 1280x800, so you are going to have
| | 02:17 | to enter that as a Custom resolution.
| | 02:20 | You set up the resolution to
match the publishing device.
| | 02:23 | This will be your only opportunity to
establish the resolution that the folio will be.
| | 02:28 | Currently, I'm targeting an iPad,
so I'm going to leave it at 1024x768.
| | 02:33 | Another consideration is that all of
the articles that you put into the folio
| | 02:37 | will have to match this resolution.
| | 02:39 | That means that as you are building
chapters for your book, for instance, all of
| | 02:43 | them will have to have the very same
dimensions that you choose for your folio.
| | 02:47 | We need to give the folio a name.
| | 02:49 | In this case I'm going to
call it Meridian Magazine.
| | 02:57 | I have several other options here as well.
| | 02:59 | Under our Default Image Format,
I'm going to leave it as Automatic.
| | 03:03 | You can see that there are three choices.
| | 03:05 | A JPEG would make a smaller folio;
| | 03:08 | however, the quality of the images
might be degraded due to compression.
| | 03:13 | The PNG option will result in a
folio with nice, crisp, readable content.
| | 03:18 | The PDF option exists to help with
accessibility and some other design features.
| | 03:23 | The PDF option is a moving target.
| | 03:25 | To learn more about how you'd
use the PDF option, consult the
| | 03:28 | Help documentation.
| | 03:30 | As a best practice, leave this as
Automatic and that way you'll get great
| | 03:33 | quality results in your publication.
| | 03:36 | You can tune the JPEG quality here.
| | 03:39 | This is very similar to any other output
that you might get from an Adobe publication.
| | 03:44 | High is a good mix of compression and quality.
| | 03:48 | If you choose Maximum quality, there
will be no compression, which means that
| | 03:51 | you will end up with a fairly
large product in the end of the day.
| | 03:55 | Once you've made these choices,
click OK to create the folio.
| | 04:00 | At the top of the panel you'll see
that now we are in the Meridian Magazine
| | 04:03 | folio and it's ready to
have articles added to it.
| | 04:07 | We'll be adding articles in another movie.
| | Collapse this transcript |
| Organizing your project| 00:00 | Once you've created your Folio in the
Folio Builder, it's time to add some articles.
| | 00:04 | Before you add articles, you need to
think about the structure of your document.
| | 00:09 | When you put articles into the Folio
Builder panel, you won't be able to reorder them.
| | 00:14 | If you do have a provisioned account,
there is a method to do that online,
| | 00:18 | however, in the Folio Builder there's no
means of moving content up and down in the order.
| | 00:24 | Once again, plan well.
| | 00:26 | In your AdditionalArticles folder, in
your Assets folder, there are three articles.
| | 00:32 | There's an article called 2WheelsGood,
there's an article called Cover, and
| | 00:37 | there's an article called University_Ad.
| | 00:40 | Each of these are self-
contained in these folders.
| | 00:44 | If we look at the Cover, you'll see
that there are two InDesign files;
| | 00:47 | there's Cover_horizontal (Cover_h) and
Cover_vertical (Cover_v), as well as the
| | 00:51 | fonts and links required
to generate that content.
| | 00:54 | The same applies for
2WheelsGood and for University_Ad.
| | 01:00 | In this publication then, the order
should be the Cover and then the Ad and then
| | 01:06 | the 2WheelsGood magazine.
| | 01:08 | You can add articles into
your Folio one of two ways.
| | 01:11 | You can have a document open, which I
have here, or you can bring in articles
| | 01:16 | into the Folio through an Importer.
| | 01:19 | Let's begin by importing the Cover.
| | 01:23 | You need to be in the
Articles area of your Folio;
| | 01:26 | I'm in the Meridien Magazine Folio and
you can see that it says Articles, which
| | 01:30 | means it's ready for me to import an article.
| | 01:35 | First, we need to give the article a name.
| | 01:39 | In this case, I'm going to call it Cover.
| | 01:42 | You'll note that there are some
options for bringing in that article.
| | 01:45 | First of all, I have to
determine the Image Format;
| | 01:47 | I'm going to leave it Automatic.
| | 01:49 | Secondly, I need to determine the
JPEG Quality and I'm going to leave it on
| | 01:53 | the default setting.
| | 01:54 | Lastly, I need to point to the
folder that contains the article content.
| | 02:04 | In this case, we need to browse to
the Cover folder, and the Cover folder
| | 02:07 | contains both the horizontal and
vertical versions of this article.
| | 02:12 | One of the things that's important
to note is that your articles need to
| | 02:15 | have the same name.
| | 02:16 | This is going to bind them together when
the Folio Builder imports those articles.
| | 02:21 | The names will differ by the
horizontal or vertical extensions.
| | 02:26 | Having made that choice, we
can now import the article.
| | 02:29 | Now you might be thinking this
isn't a single article, I've got two
| | 02:32 | InDesign files there.
| | 02:34 | Well, in the DPS world, these two InDesign
files are representations of the same content.
| | 02:41 | They'll appear as the same article
whether it's in the horizontal or the
| | 02:45 | vertical orientation.
| | 02:47 | If you don't have horizontal or
vertical oriented documents, that's okay;
| | 02:52 | you can bring in one or the other at this stage.
| | 02:55 | Just to know that you're entire Folio
is going to have to have all the articles
| | 02:58 | with the same orientations.
| | 03:01 | Once you click OK, DPS will go through
the process of uploading the articles and
| | 03:06 | then downloading the Folios that
have been built by the service.
| | 03:12 | This process is complete.
| | 03:14 | We can now look at the
contents of the Cover article.
| | 03:19 | You can see that automatically we've
brought in the Landscape and the Portrait Layout.
| | 03:25 | We also need to bring in the advertisement
and also the main content for the publication.
| | 03:31 | Import again.
| | 03:33 | Call this University MFA, and then
browse to the appropriate folder.
| | 03:45 | In this case, it's called University_Ad.
| | 03:53 | This will again send the Folios off
to the service and then bring back the
| | 03:57 | appropriate content.
| | 04:03 | The last thing that we'll do is to
add the main content of the magazine.
| | 04:08 | These files are open now and if you
don't have 2WheelsGood_h and 2WheelsGood_v
| | 04:12 | opened from the Chapter 10 folder, go
ahead and do that before proceeding.
| | 04:17 | If you don't have the assets, that's alright.
| | 04:20 | you can open your own project
and then import those files now.
| | 04:24 | Since I have a document open,
I can click New Article.
| | 04:28 | This will automatically choose the open
document and it will add it to the Folio.
| | 04:35 | We'll call it Main Content.
| | 04:40 | This may take some time as there's
a lot of content in this article.
| | 04:44 | If you get an error at this stage about
creating the article, then you may need
| | 04:48 | to reconfigure a couple of
the elements in the document.
| | 04:52 | There's an image sequence that
you'll have to point at your assets.
| | 04:55 | There's also this panorama that will need
to be pointed at your assets as well. Super!
| | 05:01 | Let's go take a look at
what's in Main Content right now.
| | 05:04 | Double-click it to open and you'll
see that there's only the Portrait
| | 05:07 | Layout that's been added.
| | 05:09 | We can add the Horizontal Layout or the
Landscape Layout simply by switching to
| | 05:13 | the Landscape Layout and then adding it here.
| | 05:22 | If you experience errors while
packaging this provided content, you may need to
| | 05:26 | rewire three of the
elements that are on these pages.
| | 05:30 | The first of these is the Web Content
Overlay that refers to embedded content.
| | 05:35 | You'll need to point that
at your local Assets folder.
| | 05:38 | Secondly, the Panorama Overlay will
need to be pointed at local content.
| | 05:43 | And lastly, the Image Sequence Overlay
will have to be pointed at local content.
| | 05:48 | Once you've done that, save your
document and then package again.
| | 05:51 | Let's go back out so we
can see all three articles.
| | 05:54 | There's a breadcrumb trail here and
we can move out to Meridian Magazine.
| | 05:58 | We can see the order of our
publication will be Cover, followed by University
| | 06:03 | MFA ad, followed by Main Content.
| | 06:06 | There are some additional options that we
can set up for the Folio and for the articles.
| | 06:10 | We'll cover those in other movies.
| | 06:13 | You can preview any specific article
by clicking the Preview button here.
| | 06:17 | If you'd like to preview the entire
Folio, then we can go back and we can
| | 06:21 | preview the entire Folio.
| | 06:24 | Now we can preview the entire
Folio because we have it selected.
| | 06:28 | Click the Preview button
to load the Content Viewer.
| | 06:36 | This is our cover, and if we
swipe, we can get to the ad.
| | 06:40 | There's our ad, and then
lastly, here's our long article.
| | 06:45 | You can rotate the view between the
two orientations by using Command+R on a
| | 06:49 | Macintosh or Ctrl+R on a Windows computer.
| | 06:53 | Here's the Vertical
Orientation and now we're back in the
| | 06:55 | Horizontal Orientation.
| | 06:57 | This allows you to check how the
publication views on the different
| | 07:00 | orientations on your device.
| | 07:03 | It's important to note that if you have
a provisioned account, you'll be able to
| | 07:06 | build more than one Folio in this Folio Builder.
| | 07:09 | If you only have a free Adobe ID, then
you'll only be able to build one Folio.
| | 07:15 | The last thing we'll talk about here is
the fact that these Folios will also end
| | 07:18 | up on your device automatically.
| | 07:21 | When you start your Viewer on your
device and you log in with your Adobe ID,
| | 07:25 | all of the content that's in your Folio Builder
here will show up automatically on that device.
| | 07:31 | If you want to preview on the device
therefore, all you've got to do is to start
| | 07:35 | the device and then open the Viewer.
| | 07:37 | You'll be able to see your
content right there in context.
| | Collapse this transcript |
| Setting folio options| 00:00 | There are several features of Folios that
you can configure from the Folio Builder.
| | 00:04 | Let's look at those now.
| | 00:06 | If you're inside an article, go out
until you're looking at your Folio list.
| | 00:11 | Once you're looking at the Folio list, select a Folio,
and then from the fly-out menu, choose Properties.
| | 00:19 | You might think that we gave the
publication a name when we named the Folio.
| | 00:22 | In fact, all we did was name the Folio.
| | 00:25 | We didn't provide any information about
the publication itself other than its size.
| | 00:29 | You need to name your publication.
| | 00:31 | The name of the publication is what's going to appear when you
publish your content into a Content Viewer or to a stand-alone viewer.
| | 00:38 | Let's call this one Meridien Magazine.
| | 00:43 | The size of the Folio will be
inherited from when you created it initially.
| | 00:47 | Do not change the size of the Folio.
| | 00:50 | Even though it looks like you can by pulling that
dropdown menu, do not change the size of the Folio.
| | 00:56 | You'll end up with some very strange results and you will be very
unhappy later on, so just don't mess with this pull-down right here.
| | 01:03 | When you're looking at your Folio on the device, you
won't see any preview of it until you add one here.
| | 01:08 | You can browse to files that will represent
the vertical and horizontal views of the cover.
| | 01:15 | I've provided those in the Thumbnail
images folder which is in your Assets folder.
| | 01:20 | We're browsing for the vertical cover now, pick
Cover_v.jpg. These cover images should be JPEGs.
| | 01:29 | Once it uploads, you'll be able to see it there.
| | 01:32 | Let's add the horizontal preview
as well; that would be Cover_h.
| | 01:39 | You can create these previews by exporting the
cover page of your InDesign document to JPEG.
| | 01:45 | You can also create a different JPEG
image using Photoshop or another editor.
| | 01:50 | If you want to remove the preview, then
you can click the Trashcan here or here.
| | 01:55 | Note that if your publication is
only going to have a single orientation,
| | 01:59 | that is only Vertical or only Horizontal, then you
only need to provide one of those cover previews.
| | 02:04 | Now that you've got the
cover preview set, click OK.
| | 02:08 | Now that you've named your
publication and you've provided cover previews,
| | 02:12 | when you go to your content viewer on your device, you'll be able to see a
preview of your publication and the name of the publication appropriately.
| | 02:20 | If you want to share this Folio with another
person, you can do that from the fly-out menu as well.
| | 02:27 | Click on the fly-out menu and choose Share.
| | 02:31 | You can enter in the email address of any
person that you want to share the Folio with.
| | 02:36 | Note that this person will have to have an
Adobe ID in order to be able to see the folio.
| | 02:42 | In addition, they're going to need to have the Folio
Viewer installed on their device to be able to see it.
| | 02:48 | They can get the Folio Viewer
from the various marketplaces.
| | 02:51 | The Folio Viewer is called the Adobe Content Viewer and it's
available on the iOS, the Android, and the BlackBerry marketplaces.
| | 02:59 | I'll share this Folio with somebody now, and
you can enter a personal message if you like.
| | 03:12 | This is a great way for you
to work with your clients.
| | 03:14 | You can share a Folio with your client in this method
without having to go through the full publishing process.
| | 03:20 | When they open up their device,
they're going to see that Folio,
| | 03:24 | they can download it, and then they can use it
as if it were something that they had purchased.
| | 03:28 | Note that only the people with whom you share the
Folio will be able to view it using this method.
| | 03:34 | Once you've entered in the
address and the message, click Share.
| | 03:38 | The icon now changes to
indicate that this is a shared Folio.
| | 03:41 | You have some filters that can
be applied to the Folios as well.
| | 03:45 | There's a dropdown menu here. There are four selectors. There's
All the Folios, there's Active Folios, there's Private, or Shared.
| | 03:53 | This Folio is now a Shared Folio, and so if I
choose Private, it won't show up in the list.
| | 03:59 | Active and Inactive Folios are going to be defined using a different
tool that's part of the DPS system and we'll cover that in another movie.
| | 04:08 | Let's show all of the Folios again.
| | 04:10 | If you want to remove Folios, then you
can do that though the fly-out menu as well.
| | 04:15 | Simply select it and choose Delete or click
the Trashcan in the lower right-hand corner.
| | 04:20 | Lastly, you can create a New
Folio or Rename an existing Folio.
| | 04:25 | Renaming the Folio will only
change its name in this display.
| | 04:28 | It won't have any effect on the name of
the publication when it's finally produced.
| | 04:34 | We've seen all the options that
we can use in the Folio Builder.
| | 04:38 | Take advantage of the Folio Builder to share your Folios with other people
so that they can review your content, or just enjoy the work that you've done.
| | Collapse this transcript |
| Setting article options| 00:00 | There are a number of options for
configuring articles and their metadata.
| | 00:04 | In order to do that, you've got to open up
a Folio and then see the list of articles.
| | 00:08 | To configure metadata for a given article select it,
and then from the fly-out menu and choose Properties.
| | 00:15 | You'll notice that there is no Title,
Description or any other metadata that's been applied.
| | 00:20 | You need to provide this
information before you publish your content.
| | 00:24 | You'll need to provide this information
for every article within your publication.
| | 00:29 | In this case this is our
cover, so I will call it Cover.
| | 00:32 | The description might be
something simple like Our Magazine.
| | 00:38 | There are some other options below.
| | 00:40 | You can see that the Table of Contents Preview has been
automatically generated when the article was uploaded.
| | 00:45 | You can upload a different cover,
if you like, by choosing one here.
| | 00:49 | I'm going to leave this thumbnail alone.
| | 00:51 | Of course you can put any image you like in
there and it will be scaled to 70x70 pixels.
| | 00:56 | You have some options with respect to scrolling.
| | 00:59 | If you look here you have the option to create
both a horizontal and a vertical publication.
| | 01:04 | By default, your publication is going to
snap to pages as you slide from side to side.
| | 01:09 | It's also going to snap the pages as you
move up and down throughout the article.
| | 01:13 | Remember that articles
are presented top to bottom.
| | 01:16 | This means that you have the first
page of the InDesign document at the top
| | 01:19 | and then all of the other pages are going to be
butted up against it as you scroll down in the document.
| | 01:25 | If you want to enable Smooth Scrolling, you can do that
by enabling Smooth Scrolling in the vertical direction.
| | 01:32 | This will allow you to go
anywhere within the article.
| | 01:35 | As you're designing your document you may
not want to do it in terms of individual pages.
| | 01:40 | If you're going to use a Smooth Scrolling document, then you
would probably want to define it as a very tall single page.
| | 01:47 | When you use a very tall single page, this allows you to put
content that will flow down to the margin and then be clipped off.
| | 01:54 | When you publish it, you don't have to worry about that content
matching correctly between the pages because you've only got one page.
| | 02:01 | There is some more guidance about using Smooth
Scrolling within the Adobe help system for digital publishing.
| | 02:07 | You could cause this document to only go
horizontally by enabling Horizontal Swipe Only.
| | 02:13 | This would mean that you can only go side to
side through the document or within the document.
| | 02:18 | If the article has a Byline,
then you would enter it here.
| | 02:21 | In addition, the Kicker is used to identify which
section of the magazine this article belongs in.
| | 02:27 | If this article were a cooking article for instance,
it might go in the Cooking section of the magazine.
| | 02:33 | All of this information is going to be used to inform the Table
of Contents which will be automatically generated for the Folio.
| | 02:40 | If this article were an advertisement
then you would click Advertisement here.
| | 02:44 | This would mean that no Table of Contents
entry would be generated for this article.
| | 02:48 | I've included all of the information
that I want to include, so I'll say OK.
| | 02:53 | To create an ad let's tag this
University MFA article as an advertisement.
| | 02:59 | We will Select it, open up
Properties and then enter the information.
| | 03:06 | There we've got some Description, a
Title and we've called it an Advertisement.
| | 03:09 | Remember if we enable Advertisement then this will not
show up in the table of contents when we publish the Folio.
| | 03:17 | You can fill in additional
information for Main Content on your own.
| | 03:21 | Once you have all the metadata applied, you can
go ahead and preview your content on your device.
| | 03:25 | When you're looking at the Table of Contents
you'll see that metadata that you've just applied.
| | 03:30 | There are some other things
that you can do with articles.
| | 03:34 | You can import an article and
we covered that in another movie.
| | 03:37 | In addition, if you've made changes to the InDesign document
to which this article is attached, then you could choose Update.
| | 03:44 | This will automatically grab the InDesign file, create a new folio and
then publish that to replace the existing piece that's up in the server.
| | 03:53 | If you want to rename the
article then you could use Rename.
| | 03:56 | Renaming an article does not change
the metadata that you see in Properties.
| | 04:00 | Of course, you could also delete an article by using the Delete
option or using the Trash can in the lower right corner of the panel.
| | 04:08 | Another thing that's important to note is that if you have an
article that's in a folio, you can copy it to an additional folio.
| | 04:14 | This is a great feature of DPS and
it allows you as a content producer
| | 04:19 | to produce advertising content for instance
that a publisher might use in another publication.
| | 04:25 | To do that, you'd take your one folio,
you'd share it with that customer,
| | 04:29 | and then your customer could copy that
article and use it in their publication.
| | 04:34 | At a minimum you want to ensure you include
a Title and a Cover Image for your articles.
| | 04:39 | This will make it much easier for your reader to be able
to find the content that they want within your publication.
| | Collapse this transcript |
| Using the Folio Producer panel| 00:00 | The Adobe Digital Publishing Suite dashboard
has some advanced options available for folios.
| | 00:06 | If you're using the Folio Builder panel in InDesign, you will
notice that you can't move the folios up and down within the stack.
| | 00:12 | To do that you'll need the Folio producer and to get at the Digital
Publishing Suite dashboard you'll need to have a provisioned account.
| | 00:19 | If you're using your free Adobe ID
account you won't have access to these tools.
| | 00:24 | You can login to the dashboard at digitalpublishing.
acrobat.com. Once you login, go to the Folio Producer.
| | 00:39 | Once the Folio Producer loads, you'll see all the
folios that either you own or that have been shared with you.
| | 00:45 | You can see that you have some
additional options that are presented in this bar.
| | 00:49 | First you can lock or deactivate a folio.
| | 00:53 | If you lock a folio then you won't
be able to make any changes to it.
| | 00:56 | In a shared group it might make some sense for you to lock the folio
if you don't want other people to be able to monkey with your work.
| | 01:04 | If you deactivate a folio it
will remove it from publication.
| | 01:08 | It will not remove it from the Folio
Builder however, or from the Folio Organizer.
| | 01:13 | In order to Remove a folio,
you will need to Delete it.
| | 01:16 | Select the Folio and then
choose Open to see its contents.
| | 01:24 | In this folio, we have three articles.
| | 01:26 | We have a Cover article, our
Advertisement and we have our Main Content.
| | 01:30 | As we hover over, we get some of
the metadata that will show up here.
| | 01:34 | To make adjustments to metadata on an article, you can select it and then
use the Article Properties panel over on the right to Add or Change metadata.
| | 01:43 | In this case, I will put in a Title.
| | 01:47 | This was written by Franklin M., so we will put his name in
here, and this is in the Lifestyle section of the publication.
| | 01:56 | I am going to include a description because I want
people to have access to a summary of the article.
| | 02:03 | You could of course Copy and Paste this from
the publication, if this text existed there.
| | 02:08 | You may also want to Tag your content.
| | 02:11 | When you're looking at a publishing company,
many times there will be more than one magazine that
| | 02:15 | they're going to be making or more
than one book or any other title.
| | 02:20 | It's important to apply tags to that content, so
that you can very quickly organize that content
| | 02:25 | and also allow your readers to discover
additional similar content through the use of tagging.
| | 02:34 | I've included two Tags: Bicycles and Tours.
| | 02:38 | You might include any other tags
that you see fit for the publication.
| | 02:41 | If you're working for a larger company, then there is
probably a pre-existing taxonomy that you'll want to apply here.
| | 02:47 | This is not an advertisement, so I won't enable that
and I'm going to leave these other options the same.
| | 02:52 | If I wanted to change the Table of Contents Preview then I
could click this link and I could then upload a new image.
| | 02:59 | The Article Properties panel is active so as
you make changes they will be applied immediately.
| | 03:05 | Looking at the University ad and then going back to Main Content, you
can see that all of the changes that I made have been applied already.
| | 03:12 | I could add additional articles
by clicking the Add button here.
| | 03:17 | This would allow me to
browse to an additional folio.
| | 03:20 | I don't have any other folios that I have
created and no one has shared a folio with me.
| | 03:25 | When customers are sharing folios with you, you will
have access to the articles in those shared folios,
| | 03:30 | so that you could apply them to your
larger folio that might be your magazine.
| | 03:35 | Think about the advertising workflow, where advertisers are
going to hire agencies to provide that content to you, the publisher.
| | 03:43 | In that case you will get a folio from the agency,
and then you'll get that content from that folio,
| | 03:48 | use the Add Article button here to bring it
into your larger folio that is the magazine.
| | 03:54 | If you want to see what your content looks like in different
orientations, then you can do that using these buttons here.
| | 04:00 | This will load up the Horizontal Orientation Content, and
then we can go back to the Vertical Orientation Content.
| | 04:06 | In addition you can change the Thumbnail
size by dragging to the right and to the left.
| | 04:13 | If you want to Delete, Lock or Rename the folio, you can
click the fly-out, and then you'll have those options there.
| | 04:19 | These are the same options that you will
find in the Folio Builder panel in InDesign.
| | 04:24 | You can also copy this article to another
folio if you wanted to move it that way.
| | 04:28 | There is one more way to view this content,
and that is to view it using the List view.
| | 04:33 | The List view presents all of your
articles as if they were on a spreadsheet.
| | 04:37 | If you have a publication that consists of many, many articles, this
is a very convenient way for you to see all of that content at once.
| | 04:44 | If you want to reorder content, you
can type in a new order number here.
| | 04:48 | There is no means of doing that in
the Folio Builder panel in InDesign.
| | 04:52 | So if you want to reorder content, you've
got to do it here in the Folio Producer.
| | 04:56 | Let's say I want this one to be
at the end of the publication.
| | 04:59 | We will set it to 3 and it
moves it down to the bottom.
| | 05:02 | Now obviously we are not going to keep it there because that
would make no sense to have the Cover at the end of the publication.
| | 05:08 | We will go back and show you another way that you can
reorder content by going back to the Thumbnail view.
| | 05:13 | You can Click and Drag articles to
reorganize them here in the Thumbnail view.
| | 05:18 | Click and drag Cover before University and now
Cover is before the ad which is before the main content.
| | 05:25 | The left to right reading order is how this content will appear in
the Table of Contents when you look at your publication in your device.
| | 05:33 | The last option that's available is to
import an article that's an HTML article.
| | 05:37 | You can do that by clicking this button here.
| | 05:40 | An HTML article is a way for you to
build an article not using InDesign,
| | 05:45 | but rather to use HTML code and
then import that into your project.
| | 05:50 | The HTML file and its resources needs to be put
into a zip file by the name of HTMLResources.zip.
| | 05:56 | It has to be exactly called HTMLResources
.zip with capital letters as shown here.
| | 06:03 | That can be imported as
an article into your Folio.
| | 06:07 | Building that HTML file is not within the
scope of this course; we won't be covering it here.
| | 06:11 | Now that we have made our adjustments to the
articles, we can go back to look at the folio as a whole.
| | 06:17 | The folio producer gives you some advanced options for
editing and for re-ordering content inside of your folios.
| | 06:24 | This is also the place where
you'll be publishing content.
| | 06:27 | We will cover that in another movie.
| | 06:29 | Once you make any changes in the Folio Producer panel,
it's a good idea to preview that folio on your device.
| | 06:36 | If you make changes and
then new log into your device,
| | 06:38 | you device will tell you that the folio has changed
and it needs to be downloaded so that you can see it.
| | 06:44 | Download the folio, and then
you'll be able to see those changes.
| | Collapse this transcript |
|
|
11. Assembling Your ProjectIntroducing Viewer Builder| 00:00 | Once you finish your folio and publish it, you need to
then build a viewer, so that users can access that content.
| | 00:07 | Most companies want to have a custom viewer. That
means the viewer is going to be branded for them,
| | 00:11 | and this process that we're going to see
here is going to shows us how to do that.
| | 00:15 | The Viewer Builder is an AIR application that
you'll get from the Digital Publishing Dashboard.
| | 00:19 | The dashboard is at
digitalpublishing.acrobat.com.
| | 00:22 | You'll login with your credentials and then click on
the Viewer Builder icon to download the Viewer Builder.
| | 00:27 | Once you Install it, Open it, provide your DPS
credentials, and then you'll be looking at this empty page.
| | 00:33 | The Viewer Builder shows you
all of viewer that you've created.
| | 00:36 | This will allow you to
configure those viewers as well.
| | 00:39 | To create a new viewer
click on the New button here.
| | 00:42 | At this point you have to make a choice as to
whether you're going to build an Android or an iPad viewer.
| | 00:48 | In the future, Adobe plans to
release not only Android and iPad viewers.
| | 00:51 | but also viewers for the BlackBerry PlayBook platform
. That option will appear here sometime in the future.
| | 00:57 | In order to create a viewer you need to
select the platform and then click Next to proceed.
| | 01:03 | There are some items that you need to
have in hand before you can proceed however.
| | 01:06 | These include your provisioning certificates that
you'd have from Apple if you're going to make an iPad app,
| | 01:11 | or your self-signed or third-party
certificate that you'd use for building an Android app.
| | 01:16 | You need to get these
certificates together before you can proceed.
| | 01:20 | Another item that you're going to want
are custom icons for your application.
| | 01:24 | While a lot of companies are choosing to
target both iPad and Android platforms,
| | 01:29 | it's a good idea to have a
complete set of icons ready to go.
| | 01:32 | These icons are going to be square.png files.
| | 01:35 | They're going to be at different resolutions ranging
from 29x29 pixels all the way up to 512x512 pixels.
| | 01:42 | I've included a full set of
icons with your Exercise Files.
| | 01:45 | They include 29x29, 36x36, 48x48,
50x50, 72x72, 128x128, and 512x512.
| | 01:55 | You can build these icons
very quickly from Photoshop.
| | 01:57 | Make a square document that's at least 512x512 and then use your
Save For Web & Devices repeatedly to get it to the size you want.
| | 02:06 | Another item that you need are Splash Screens.
| | 02:08 | The splash screens will be used for each of the
orientations of your device when the application starts.
| | 02:14 | This means that you need a
horizontal and vertical splash screen.
| | 02:17 | The other thing that's important to note is that the
splash screen has to be the resolution of the device's screen.
| | 02:23 | This means that for iOS, it's going to be
1024x768, and for Android it's going to be 1280x800.
| | 02:32 | Now that you have all these assets in place,
you can choose your platform and then click Next.
| | 02:36 | We'll proceed with building
a viewer in another movie.
| | Collapse this transcript |
| Publishing your work| 00:00 | To make your folios appear in the
applications that will run on your devices,
| | 00:04 | you've got to login to the Folio
Producer and then Publish the folio.
| | 00:08 | Login to your DPS account and then click on
the Folio Producer icon in the dashboard,.
| | 00:14 | You will need a provisioned DPS
account in order to publish your folio.
| | 00:18 | There are several items inside of the folio
metadata that need to be filled in, in order to publish.
| | 00:24 | Any of the fields that have a
blue star need to be filled in.
| | 00:27 | Let's provide that information now.
| | 00:37 | We'll Open the folio and
check for other missing metadata.
| | 00:44 | Switch to List View to see all the metadata.
| | 00:49 | I don't see any blue stars that are
missing information, so I'm all set to publish.
| | 00:54 | Return to the Folio Producer by
clicking in the upper left-hand corner.
| | 00:58 | Now we're ready to make our folio
available to the viewers on devices.
| | 01:01 | We have only one folio to
choose from; it's already selected.
| | 01:05 | With it selected I'll click Publish. I need to determine
the Status of this folio. I can choose Private or Public.
| | 01:15 | A private folio will be available to me only.
| | 01:17 | A public folio will be available to
anyone who has that reader on their device.
| | 01:22 | For now, I'm going to choose Private,
so it'll only show up on my viewer.
| | 01:27 | I can choose whether this is a
Free or a Retail publication.
| | 01:31 | Retail publications will require an
arrangement with the stores to be able to set pricing.
| | 01:35 | For now let's call it Free.
| | 01:38 | I need to enter a product ID.
| | 01:41 | The product ID is used to identify
the product in the purchasing process.
| | 01:45 | This information will be invisible to the user but it will
be used to make sure that all of the entitlements are correct.
| | 01:51 | The product ID is best
entered in the reverse DNS format.
| | 01:55 | I'm going to enter in a product ID
now using my jameslockman.com ID.
| | 02:04 | The reverse DNS format requires that com is last
and then the domain name followed by the product ID.
| | 02:11 | If there were multiple issues of this magazine,
then I would follow this by the issue number.
| | 02:16 | Now that I have my product ID
established, I can publish it.
| | 02:21 | The publishing process can
take some time, be patient.
| | 02:24 | Now that our folio has been published it will appear in all of the
entitled viewers that I will have built using the Viewer Builder.
| | 02:31 | We cover using the Viewer Builder to build
those entitlement applications in other movies.
| | 02:36 | If you want to take this finished folio and use it to build
a stand-alone viewer then you'd click the Export button here.
| | 02:44 | The Export button will export your
folio to your Desktop as a zip file.
| | 02:48 | You'll need to unzip that file, and then you'll be
able to see the individual folios included there.
| | 02:54 | We cover building a stand-
alone viewer in another movie.
| | 02:58 | Now that you have your
publication available in the viewers,
| | 03:02 | go ahead and start up your viewer on your iPad or in
your Android device and begin reading your publication.
| | Collapse this transcript |
| Building an entitlement viewer for iPad| 00:00 | Let's build an entitlement viewer for iPad.
| | 00:03 | From the Viewer Builder choose New,
select the iPad platform, and then click Next.
| | 00:13 | You have to determine what type
of Viewer we're going to build.
| | 00:17 | At the moment, I'd like to build
an Adobe Hosted Multi Issue Viewer.
| | 00:21 | This means that Adobe is hosting the
content and that the expectation of the user
| | 00:27 | is that the publication will have
multiple issues that will appear over time.
| | 00:31 | You can think about the way that magazines
publish and the way that magazines distribute using DPS.
| | 00:36 | There's typically one
application that's involved.
| | 00:39 | It will have a custom icon and when the user opens it, they'll be
able to see all of the issues of the magazine that are available.
| | 00:46 | They can make a choice at that point; Do I want to purchase this
one? Do I not want to purchase that one? That's up to the user.
| | 00:52 | The Viewer then is the
library for that publication.
| | 00:56 | That's what we're going to build now.
| | 00:58 | There are some other options here though.
| | 01:00 | There's the Adobe Hosted Multi Issue, but there's also several options that
involve either an entitlement server or a subscription service using iTunes.
| | 01:08 | You'll have to make an arrangement with that entitlement
server or with iTunes to be able to use these three options.
| | 01:16 | The other option that's available is the Built-in
Single Issue and we'll cover that in another movie.
| | 01:21 | For now, we'll choose Adobe Hosted Multi Issue.
| | 01:24 | You need to fill in all
of the fields in this form.
| | 01:28 | When you choose the Viewer Name, you want to make sure that the
Viewer Name is going to fit on your iPad without any type of contraction.
| | 01:36 | If the name gets contracted, there will be an ellipsis
that will show up in the middle of the name on the iPad.
| | 01:42 | You can check the name on your iPad by opening up the
browser, going to a web site, and then saving it as a Web App.
| | 01:49 | Type in the name that you want to use for your
Viewer and see if it gets contracted on your iPad.
| | 01:53 | I'm going to use a Viewer called LocalMag.
| | 01:58 | This is short enough and it won't contract.
| | 02:00 | I need to put in a library Title.
| | 02:02 | You can see that this form is quite a bit larger and
this is what's going to show when you open up the Viewer.
| | 02:10 | An entitlement viewer is going to show content
that's been uploaded by an individual or a company.
| | 02:16 | You need to enter the Adobe ID that's
attached to the title that you want to publish.
| | 02:21 | I'm going to use my Adobe ID; you would use your
Adobe ID, or your company's Adobe ID at that point.
| | 02:33 | This information ends up getting keyed to
the Viewer, so that when the Viewer opens,
| | 02:37 | it's going to look for content that's
been uploaded by this particular user.
| | 02:42 | If you've built your folios to use the PDF
option for images, then you could enable PDF Zooming.
| | 02:47 | I haven't done that, so I'm not
going to enable this option now.
| | 02:51 | With these fields filled in, I can click Next.
| | 02:57 | The next thing you need to do is to
load up your Icons and your Splash Screens.
| | 03:01 | I've supplied some icons for you that are
in the Icons folder in your Assets folder.
| | 03:12 | I've labeled the icons with
their appropriate resolutions.
| | 03:15 | This is a good practice for you,
so that you won't get them confused.
| | 03:21 | You can see that as I select the icons, they fill in the
appropriate holes in my preview at the bottom of the screen.
| | 03:28 | You can see that there's an
option for the Shine on app icon;
| | 03:31 | this will put that iOS Shine onto
the app icon if you want it there.
| | 03:36 | I'll allow it; we'll see the results later.
| | 03:38 | Here's where I need to choose my Splash Screens.
| | 03:42 | I've also supplied those
in that same Icons folder.
| | 03:53 | Remember, your Splash Screens need to be
1024x768 or 768x1024, depending on orientation.
| | 04:01 | These Splash Screens will show briefly when
we open the application as content is loading.
| | 04:06 | For high-res devices, it might make sense to
include a 512x512 icon, and I've done that as well.
| | 04:15 | I'm not going to embed any fonts, because I
don't have any HTML resources that require fonts.
| | 04:21 | If you did have fonts that you needed to
embed into the document, you could do that here.
| | 04:25 | It's important to note however that you have to secure the
license to be able to distribute those fonts on the devices.
| | 04:32 | Please check with your font vendor to ensure that
you have the appropriate permissions to do that.
| | 04:38 | The next configuration option is
to include a Navigation Toolbar.
| | 04:42 | The Navigation Toolbar appears at the bottom of the screen
and gives you some additional options for putting in content.
| | 04:49 | You can add up to three custom
icons in the Navigation Toolbar.
| | 04:53 | These icons will take you to
embedded HTML resources folders.
| | 04:57 | These HTML resources folders are in
fact articles that can run on the device.
| | 05:02 | A lot of companies choose to have that as their opening
screen and so they'll enable the Auto Launch option here.
| | 05:08 | When the application starts, this HTML resources folder
will open and the contents will be displayed to the user.
| | 05:14 | A lot of companies use that for additional
information or for guidance about how to use the application.
| | 05:20 | I'm not going to build a custom navigation
bar right now, but I do want to turn it on.
| | 05:26 | The Navigation Toolbar will allow my customer to
go back to the library or to the Custom Viewer.
| | 05:32 | I could choose to show it in all of
the Views except for the Folio View.
| | 05:36 | The Folio View is where all of the various
issues are going to show up for my publication.
| | 05:41 | I'm going to use this option, which means that the
custom navigator won't show when I'm in the Folio View.
| | 05:47 | You'll want to enable or disable options based on
how you want to control your branded experience.
| | 05:53 | Perhaps you want to hide the Home
button. That's fine, go right ahead.
| | 05:57 | Make sure that you enable the user to be able to go back to
the library, so that they can purchase additional publications.
| | 06:03 | Having made your choices, click Next.
| | 06:05 | This is where we have to put in the
Certificates that we will have gotten from Apple.
| | 06:09 | There are two sets of
certificates that are required.
| | 06:12 | There is the Distribution P12 certificate
and then there's the Developer P12 certificate.
| | 06:17 | I'm going to use my own certificates here.
| | 06:20 | You're going to need to get your own certificates and mobile
provisioning files in order to be able to go past to this screen.
| | 06:27 | This means that you're going to have to set up your developer
account with Apple, pay their fee, and then build these certificates.
| | 06:34 | There's documentation at Apple and also at Adobe to be able to
help you build the certificates and then have them available for DPS.
| | 06:43 | Once you've filled in your certificates and the mobile
provisioning files, then you need to enter the passwords for the certificates.
| | 06:50 | Once again, I'm using my own certificates; you'll
have to use your own certificates to go past this screen.
| | 06:56 | There are two additional options.
| | 06:58 | One is to produce an Enterprise signed
build and the Enterprise signed build is
| | 07:02 | an advanced feature that's going to
bypass some of the validation for certificates.
| | 07:07 | In most cases, unless you're using an
enterprise account, you don't want to do that.
| | 07:12 | The next option is to Enable Push Notifications.
| | 07:15 | The Push Notification
service is an Apple service;
| | 07:18 | you'll need to provision your application for Push
Notification and then get the certificates for that to work.
| | 07:24 | Again, you're going to take care of
that at the Apple Developer web site.
| | 07:28 | Once you have those in place, you can load them up here, and
then your application badge will show notices that you push down.
| | 07:35 | I'm not going to enable Push
Notification for my application at this point.
| | 07:39 | Now that I've entered all my
information, I can proceed.
| | 07:44 | Because I'm building an entitlement package,
Omniture Tracking is going to be enabled automatically.
| | 07:49 | This will allow me to look at how people are using and
how people are reading their articles within my publication.
| | 07:55 | This is very valuable information that you'll be able to
gather as part of your professional or enterprise account with DPS.
| | 08:04 | When you click Submit Build, your project is going to be sent
to the Adobe servers where it will produce an iPad application.
| | 08:12 | It will produce an IPA file that you'll be
able to load locally on your iPad for testing.
| | 08:17 | It will also produce a ZIP file that
you'll be able to upload to iTunes Connect.
| | 08:21 | It can take some time for the status to update.
| | 08:26 | You can click the Refresh
button to force that to happen.
| | 08:29 | You'll see that after a little
while, our status will change.
| | 08:34 | We end up with some information being filled in to
the Bundle Version as well as the Market version.
| | 08:38 | In addition, we can download our
Developer Viewer and our Distribution Viewer.
| | 08:43 | These things are ready
to be tested on your iPad.
| | 08:46 | Once you've gone through your complete testing, then you
can push it up to the Apple Store through iTunes Connect.
| | 08:52 | Once you've gotten approval from Apple to distribute your Viewer,
go ahead and come back here and then set your Approval Status.
| | 09:00 | This will allow Adobe to help promote
your product in their publishing gallery.
| | 09:05 | The Viewer Builder is the only way for
you to build these entitlement applications.
| | 09:09 | You've got to have your active DPS subscription,
| | 09:12 | you've got to have your Apple Developer subscription
current, and have all the certificates that you need.
| | 09:18 | You've got to have your icons ready to go and you've got to be able to
have a device to test it before you can send it up to the Apple service.
| | 09:26 | Once you have all those things in hand,
build your Viewer and get it into iTunes.
| | Collapse this transcript |
| Building an entitlement viewer for Android| 00:00 | In this movie we are going to build
an Entitlement viewer for Android.
| | 00:04 | Log in to the Viewer Builder
using your DPS credentials.
| | 00:07 | Once you are here, click
New, to create a new viewer.
| | 00:10 | We are going to choose Android as the platform.
| | 00:17 | There are two options available to you here;
| | 00:19 | there is the Adobe Hosted Multi
Issue and the Entitlement option.
| | 00:22 | The Adobe Hosted Multi Issue is what
we are going to make here and that means
| | 00:25 | that my content is going to be hosted at Adobe
and then delivered to customers through the viewer.
| | 00:30 | For the Entitlement option, there is going to be an Entitlement server
and that arrangement you'll have to make with that entitlement service.
| | 00:38 | The next thing I need to
do is to set my Viewer Name.
| | 00:40 | If the Viewer Name is too
long, it maybe truncated.
| | 00:44 | You'll need to check with your particular device to
determine what exactly that length is going to be that you can use.
| | 00:50 | I'm going to pick a fairly short name,so I know
that it won't be truncated in the Device's view.
| | 00:57 | This is the name that's going to
appear under the icon on the device.
| | 01:01 | The Viewer Title will show in
the title bar of the application.
| | 01:04 | I need to enter the Adobe ID of the person who
uploads the content to the server within your company.
| | 01:14 | In my case, I'm going to use my Adobe ID,
| | 01:18 | however, you're going to want to use either
your Adobe ID or the Adobe ID of your company,
| | 01:23 | where you're producing content
that's going up to that Adobe service.
| | 01:32 | The Viewer is going to use this Adobe ID to figure out what
content it should be displaying when it opens on the device.
| | 01:39 | Any content that's been uploaded by me for instance,
is going to be shown in the device once I publish it.
| | 01:45 | Having filled in those options, click Next.
| | 01:48 | Now we have to load up our icons.
| | 01:50 | The icon requirements for
Android are listed here.
| | 01:53 | I've supplied those icons in an
Icons folder in your Assets folder.
| | 02:11 | The icons are easy to make.
| | 02:13 | You can create a square image in Photoshop and then use
Save for Web & Devices to create the various versions.
| | 02:19 | I've named the Icons with their
resolutions to make it easy to find later.
| | 02:24 | The next thing you need to
include is a Splash Screen.
| | 02:27 | This screen shows when the application
starts and before any of the content loads.
| | 02:32 | The Splash Screen needs to
match the device resolution.
| | 02:35 | For Android Tablets we're choosing 1280x800.
| | 02:48 | As you fill in the options on the screen you will
see that the holes get filled in in the previews below.
| | 02:53 | When they are all filled
in you are ready to proceed.
| | 02:55 | If you have any fonts that are required by
embedded HTML content, you might want to load them here.
| | 03:01 | When you load fonts you need to bundle them into a
Zip file and then they'll available to HTML content.
| | 03:07 | You need to determine whether or not you
have the right to do that with your fonts.
| | 03:12 | Not all fonts are
approved for use in applications.
| | 03:15 | So you've got to ensure that you have the right, through your
end user license agreement, to put those fonts onto an application.
| | 03:22 | Check with your font vendor before you put them into
a folder and then upload them into the application.
| | 03:28 | The next option is to set
up a Navigation Toolbar.
| | 03:31 | The Navigation Toolbar shows at the bottom of the screen and it
helps the user to go back to the library or look at some other content.
| | 03:39 | I'll enable it now.
| | 03:41 | I want the Navigation Toolbar only to show when I'm in my
content and not when I'm in the Folio View or in my library.
| | 03:48 | So I am going to turn that off.
| | 03:50 | I could also choose to Hide
the Viewer icon if I wanted to.
| | 03:54 | When I do that you see
that it goes away in the bar.
| | 03:57 | Another option is to shut off the Home button.
| | 04:00 | I want the user to be able to go home,
so I am going to leave that enabled.
| | 04:04 | The next option is to customize the
toolbar by adding some custom icons.
| | 04:09 | Custom icons are a way for you to provide additional
articles that are going to show when the user taps on those icons.
| | 04:16 | To create an additional icon, you would need to click the +
sign here and then begin to upload content for that custom icon.
| | 04:25 | You need to generate some files that are going to
be the Up, Down, and Disabled state for that icon,
| | 04:31 | as well as the content that will be
displayed when the user clicks on that icon.
| | 04:35 | You can also determine whether or
not the icon will launch automatically.
| | 04:40 | The custom icon is going to show
contents in an HTML resources folder.
| | 04:44 | That HTML resources
folder is in fact an article.
| | 04:48 | You'll need to build that and then upload it and then
that content will be available through the Custom icon.
| | 04:54 | This article will not be shown
in the rest of your navigation.
| | 04:57 | So it's not part of the entitlement;
in fact, it's part of the application.
| | 05:01 | Many publishers use this to provide additional information to readers or
to get them to go to other content, perhaps, on the publisher's web site.
| | 05:09 | I'm actually not going to use a custom icon, so I
am not going to fill in any of this information here.
| | 05:15 | Now that I have made my
choices, I can click Next.
| | 05:18 | At this point I need to load up my
Android Application Digital Certificate.
| | 05:23 | This is going to be a P12 Certificate.
| | 05:25 | You can build a self-signed
certificate using Flash Pro or Flash Builder.
| | 05:30 | You can also buy a
certificate from a third party.
| | 05:34 | However, you choose to produce that certificate, you'll need
to have your own certificate to be able to go past this screen.
| | 05:40 | I am using my own certificate; I will not
be providing it with the Exercise Files.
| | 05:57 | The next field is the Application ID and
you enter this in reverse DNS notation.
| | 06:03 | I'm going to enter an Application ID
here, but yours is going to be different.
| | 06:08 | It should reflect your Internet domain in
reverse order, followed by the name of the application.
| | 06:18 | I've given the application the name dpstest in the jameslockman
.com domain. Having filled in the Application ID, click Next.
| | 06:30 | My application is ready to be
built so I will Submit the Build.
| | 06:36 | Once the Build is sent to the DPS servers,
it will become available to us after a while.
| | 06:42 | Once the Build is sent click Finish.
| | 06:45 | Now from time to time click
Refresh to see the status change.
| | 06:54 | Once the process is finished, you can download the
Android installer by clicking the Android Installer link here.
| | 07:00 | This will download an apk to your Desktop.
| | 07:02 | You can submit that apk to the Android Marketplace, but before
you do, I'd recommend that you test it on your Android device.
| | 07:09 | In order to build these custom viewers, you got
to remember to have your various assets in place.
| | 07:14 | You've got to have your DPS subscription, you've got to
have a self-signed or a third-party signed certificate,
| | 07:20 | you've got to have your icons and your splash screens
together and the ability to test the installer on an Android tablet.
| | 07:28 | Once you have got all that in place, make your viewer,
test it on your device and get it up into the Android store.
| | 07:34 | Once you've tested your viewer and you've approved that
internally, you can go ahead and put it into the marketplace.
| | 07:40 | Once it's there change the status here, so that Adobe can
let other people know about it in its Adobe Publishing Gallery.
| | Collapse this transcript |
| Building a single issue viewer for iPad| 00:00 | Let's build a single issue viewer for iPad.
| | 00:03 | You need to open up the Viewer Builder
and then log in with your DPS credentials.
| | 00:08 | Once you have logged in,
click New to start the process.
| | 00:11 | We're going to target the iPad
platform, so select it and then click Next.
| | 00:17 | In this case the Viewer Type is going
to be a Built-in Single Issue viewer.
| | 00:23 | This means that all of the content that's going to show in
this particular viewer is going to be embedded in the viewer.
| | 00:29 | The Built-in Single Issue model is
different from the Hosted Multi Issue model
| | 00:33 | in that in the Hosted Multi Issue model, the
content is stored on a server outside of the application.
| | 00:39 | In the Built-in Single Issue model, all of
the content lives inside of the application.
| | 00:45 | You have to provide a Viewer Name. You need to pick a name short
enough, so that it doesn't get truncated when it's viewed on the iPad.
| | 00:52 | I'm going to pick a nice short name
here, LocalMagSI for single issue.
| | 00:59 | If I had Enabled PDF as my default image type when I
built my Folio, then I'd be able to turn on PDF Zooming.
| | 01:07 | I haven't done that so I'm
not going to enable it now.
| | 01:10 | Next you need to browse to a Folio file.
| | 01:12 | You will get your folio file by logging
into the Digital Publishing Folio Producer,
| | 01:16 | and then clicking Export after
you've published your project.
| | 01:20 | I've supplied a folio in the Assets folder here.
| | 01:30 | Select it, browse to your own
folio or choose the supplied one.
| | 01:34 | Once these fields are filled in, click next.
| | 01:37 | Now you need to load up your Icons.
| | 01:39 | I've supplied the icons in the
Icons folder in the Assets folder.
| | 01:42 | They are named with their resolutions.
| | 01:57 | You also need to decide whether you want to
have that Apple Shine on your application icon.
| | 02:01 | I'm going to leave that enabled here.
| | 02:04 | Next, I need to load up my Splash Screens.
| | 02:06 | The splash screens will show when you start
your application and before the content loads.
| | 02:11 | They need to be 1024x768 in Landscape mode,
and they need to be 768x1024 in Portrait mode.
| | 02:18 | I have supplied those in
the Icons folder as well.
| | 02:28 | You can also include a high-res icon.
| | 02:34 | If you have some HTML content that requires
custom fonts, you could load those fonts here.
| | 02:40 | Be aware however, that your font licensing may not
allow that font to be embedded in an application.
| | 02:45 | You are going to want to check with your font vendor to
ensure that you do have the appropriate license in place
| | 02:50 | to be able to embed that
font inside of an application.
| | 02:53 | My folio doesn't refer to any special
fonts, so I'm not going to put anything here.
| | 02:59 | Now I need to load up my Certificates.
| | 03:01 | You are going to need to get these
certificates from the iOS developer site.
| | 03:05 | You need to supply your own certificates.
| | 03:08 | I have got my own certificates, but I have
not provided them as part of the Assets folder.
| | 03:15 | Now that I have loaded up my
certificates, I need to enter their passwords.
| | 03:18 | If I had an Enterprise account I might
want to build an Enterprise signed Build.
| | 03:22 | That's an advanced topic that we
will be covering in this course.
| | 03:27 | Now that my Build in is
configured, I can Submit the Build.
| | 03:30 | It will take some time for the
app to be sent in the build queue.
| | 03:35 | Once it's been sent to the
build queue, I can click Finish.
| | 03:38 | This will return me to my Viewer Builder window.
| | 03:41 | I need to click Refresh from time to
time, to be able to get my Status changed.
| | 03:45 | It will take a couple of minutes
for the applications to be built.
| | 03:52 | Now that the Build process is complete, I will be able to
download my Developer Viewer and my Distribution Viewer.
| | 03:58 | The Developer Viewer can be loaded onto my iPad,
because that's the credentials that I gave the certificate,
| | 04:03 | and then I can test it to make sure
that it does what I need it to do.
| | 04:07 | Once I have proven that it does what it needs to do then I can
send it up to iTunes Connect for publishing on the App Store.
| | 04:13 | Once you have got an approval from the App
Store return here and change the Approval Status.
| | 04:18 | You want to change the Approval Status to Approved, so that
Adobe can begin to promote your app in the Adobe Publishing Gallery.
| | 04:27 | In order to build that Single Issue Viewer, you've got
to make sure you have got the following things in hand.
| | 04:31 | You've got to have your Folio that
you've exported from the Folio Producer,
| | 04:35 | you've got to have your Certificates,
your Icons and your Splash Screens.
| | 04:39 | You've also got to have your device for testing.
| | 04:42 | Once it is approved, let Adobe know about it,
so that they can begin to promote it too.
| | Collapse this transcript |
|
|
12. Testing Your ProjectTesting a folio locally| 00:00 | When we are testing our projects,
we have several ways to do it.
| | 00:03 | In this movie we are going to see how
we can test our DPS publications locally.
| | 00:07 | In order to test your Folio locally,
you can do it through the Folio Builder.
| | 00:11 | You'll need to Sign In with your
Adobe ID to be able to see your folios.
| | 00:15 | Once you have Signed In, you
can select the Folio to Preview.
| | 00:31 | Once it's selected, click
Preview in the lower left-hand corner.
| | 00:34 | You don't have to have any InDesign
document open in order to use this Preview method.
| | 00:46 | This will open your document in
the Content Viewer on your Desktop.
| | 00:50 | You can scroll through the content
and interact with the overlays here.
| | 00:53 | This is the cover, so we need to scroll to
the right to see the ad and then the article.
| | 01:00 | Now we have our article and we can scroll down.
| | 01:05 | We have some interactive content to test, click and
drag to make that go, click here to see the Twitter Feed.
| | 01:13 | I can see that my Twitter Feed doesn't hook up correctly,
so I know that I've got to go back and make some adjustments,
| | 01:17 | and then I'll be able to preview it again.
| | 01:21 | I can play my movie, I can
play my slideshows, and so on.
| | 01:25 | This is the Landscape orientation;
| | 01:27 | I can also see what my content will look like
in Portrait mode by switching to Portrait mode,
| | 01:31 | by using Command+R or Ctrl+R
. Now I am in Portrait mode.
| | 01:36 | In Portrait mode you may need to make your screen
taller to be able to see the entirety of the publication.
| | 01:41 | The window does not scale, which means that you need the
full 1280 plus the menu height to be able to make it work.
| | 01:49 | Now that I've done my preview, I know that I've got a
little bit of work to do, to get my folio working correctly.
| | 01:54 | The Content Viewer on your Desktop should be your first line of
defense in making sure that your content works the way that you wanted to.
| | Collapse this transcript |
| Testing on an iPad| 00:01 | To test your content on an iPad, you'll need to
download the Adobe Content Viewer from the App Store.
| | 00:06 | It's free. Simply search for Adobe Content
Viewer and then download and install it on your iPad.
| | 00:12 | Tap in the upper left-hand corner where it
says Sign-in and then enter your Adobe ID.
| | 00:17 | This needs to be the same Adobe ID
that you used when you built your Folios.
| | 00:21 | Once you Sign In you will
get some notices from DPS.
| | 00:24 | If you've published content using the Folio Producer,
you'll get a notice saying that it's available for your iPad.
| | 00:30 | You may be noticing that we have two
versions of what look like the same content.
| | 00:34 | On the left you can see one with a
ribbon in the upper left-hand corner.
| | 00:38 | This tells you that this is some content that's coming from the
DPS service and not from your local folio that you're working on.
| | 00:45 | The content on the right
does not have the ribbon.
| | 00:48 | This is the one that's local and
this is the one that we want to test.
| | 00:51 | Tap Download to download
the content to your iPad.
| | 00:56 | Once the content is installed
you can view it by tapping View.
| | 01:01 | Now you can test your content on the device.
| | 01:03 | Swipe to the right to see the advertisement and
then swipe again to see the Portrait orientation.
| | 01:10 | Swipe down to see the content on the device.
| | 01:15 | Other content works as expected. Got my movie.
| | 01:26 | (Video Playing)
| | 01:26 | Moving on, I can play my slideshow, and I
can look at my other interactive content.
| | 01:36 | To test in the Landscape
orientation, simply turn the device.
| | 01:43 | This is opening Google
Maps in the Content Viewer.
| | 01:45 | On the device, we can take
advantage of mobile features.
| | 01:49 | In this case, Google wants to know our location.
| | 01:51 | I'm going to allow it, so that we can
see the appropriate location on the map.
| | 01:57 | I know that this works, so I will say
Done, and I can proceed with other testing.
| | 02:02 | Start your Content Viewer to see the
folios that you're working on InDesign.
| | 02:06 | It's a very easy way to test on the device that
requires no installation other than the Content Viewer.
| | 02:11 | Now that you have used the device to prove your concepts,
then you can go ahead and publish using the Folio Producer.
| | Collapse this transcript |
| Testing on an Android tablet| 00:01 | To test your Folio on your Android device you'll need to
get the Adobe Content Viewer from the Android Marketplace.
| | 00:06 | It's a free application.
| | 00:08 | You can find by searching
for Adobe Content Viewer.
| | 00:11 | Once you have it installed, start
it up and you will need to Sign-in.
| | 00:14 | Tap Sign-in the upper left-hand
corner and then use your Adobe ID to login.
| | 00:19 | This needs to be the same Adobe ID
that you used to build the Folio.
| | 00:24 | Once you login, you will
be able to see your folio.
| | 00:26 | You'll notice that there are two folios displayed here,
that's because I've published one through the Folio Producer Panel.
| | 00:33 | That one has a ribbon in
the upper left-hand corner.
| | 00:36 | We will not be looking at that one right now.
| | 00:38 | The one that I want to use is the one without the
ribbon, because that's the one that's local on my computer.
| | 00:44 | To get the content, tap Download.
| | 00:46 | The application will now be
downloaded and installed on your device.
| | 00:49 | Once it's installed, tap View to test the folio.
| | 00:53 | Your folio will now display on the device.
| | 00:56 | Since I built this folio at 1024x768, it displays with
letterboxing on the top and bottom in the Portrait orientation.
| | 01:04 | In order to see my content,
I need to swipe to the right.
| | 01:07 | Now I see my advertisement,
and now I see the long article.
| | 01:11 | I can swipe down to see the
content in the long article.
| | 01:15 | You can begin to test interactive
features by tapping on them on the device.
| | 01:22 | Got my movie, that movie plays.
| | 01:27 | (Video Playing)
| | 01:31 | On an Android device, movies play full-screen.
| | 01:33 | To get out of the movie you need to tap the Back
button, this will take you back to the publication.
| | 01:38 | To view the publication in
Landscape mode, simply rotate the device.
| | 01:44 | Now your content appears in Landscape mode.
| | 01:48 | You can go back and forth or up
and down to test additional content.
| | 01:57 | You can see that our
Internet connection is working fine.
| | 01:59 | I'm able to view Google Maps.
| | 02:01 | Once you are done doing viewing that Web
content, click Done to return to the device.
| | 02:05 | Once you've tested your content to prove that
all of the overlays do what they're supposed to do,
| | 02:09 | you can publish your content to a
wider audience in the Folio Producer.
| | Collapse this transcript |
| Testing on a BlackBerry PlayBook| 00:01 | To test your content on a Blackberry PlayBook,
you'll need to install the Adobe Content Viewer.
| | 00:05 | This is available for free
from the Blackberry App World.
| | 00:08 | Launch your App World Application on your device, search for
Adobe Content Viewer and then download and install the application.
| | 00:14 | Once you've installed the Content Viewer, you can
Sign-in by tapping in the upper left-hand corner.
| | 00:19 | You need to enter your Adobe ID here.
| | 00:22 | Use the ID that you used when you
created your folio that you want to test.
| | 00:26 | Once you sign-in your content
will load in the Content Viewer.
| | 00:30 | You can see that I have two versions
of what look like the same application.
| | 00:33 | One of them has been published locally; the
other has been published with the Folio Producer.
| | 00:38 | The one with the blue ribbon in the upper left-hand
corner has been published with the Folio Producer.
| | 00:42 | I want to test the one that is local on my
computer, which is the one that doesn't have the ribbon.
| | 00:47 | To download it, tap Download. This
will download the folio to your PlayBook.
| | 00:52 | Once the folio downloads, it will install,
and then you can click View to view the Folio.
| | 00:58 | Here's my Folio on the PlayBook.
| | 01:00 | You will notice that it has
black bars on the top and the bottom.
| | 01:03 | That's because the folio was built at 1024x768.
| | 01:07 | The PlayBook has a different
resolution, so it will letterbox.
| | 01:10 | Swipe to the side to see the
advertisement and then again, to see the full article.
| | 01:16 | Scroll down into the
article to view the contents.
| | 01:19 | You can test the interactive
features simply by tapping on the device.
| | 01:23 | The version on the Blackberry PlayBook is
different from the versions that are on Android and iOS.
| | 01:28 | It's still a work in progress, so you may find
that some content just doesn't work on the PlayBook.
| | 01:33 | This Web content overlay is an example of some
content that may have trouble running on the PlayBook.
| | 01:38 | Another thing you will notice is
that the PlayBook is quite small.
| | 01:41 | When you are designing your content for the Playbook, you're
going to want to make your text larger than you would for an iPad.
| | 01:47 | I have got my movie.
| | 01:53 | (Video Playing)
| | 01:56 | You can begin to test interactive
features by tapping on them on the device.
| | 02:01 | This is the Portrait orientation.
| | 02:03 | To view on the Landscape
orientation, simply rotate the device.
| | 02:07 | If you have access to a PlayBook it's a
good idea to start testing your content there.
| | 02:12 | While you can't currently build a custom viewer for
the PlayBook, that is slated to happen sometime soon.
| | 02:17 | If you test on the PlayBook now, your content will
be ready to go as soon as that viewer is available.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | Thanks for following along with me as we
explored the Adobe Digital Publishing Suite.
| | 00:05 | If you would like to find out more information, a great
starting point is the Adobe Digital Publishing Suite Dashboard.
| | 00:10 | This is available to people
who have the DPS subscription.
| | 00:14 | From here, you'll be able
to look at your Analytics.
| | 00:17 | You'll be able to do that once
you set up your Omniture account,
| | 00:20 | and that's something that you
can do and then come back to here.
| | 00:23 | You also have access to the online Help system.
| | 00:25 | You can access that by
clicking any one of these links here.
| | 00:29 | This Help system is searchable and it will provide you
with detailed instructions from folks at Adobe and beyond.
| | 00:36 | In addition, there's also
content on the Adobe TV.
| | 00:39 | You can get there from TV.adobe.com, or
you can click on this link to go to Adobe TV.
| | 00:46 | If you don't have a DPS subscription
you can still get to much of this content.
| | 00:51 | Go to www.adobe.com/
support/digitalpublishingsuite.
| | 00:56 | This is a great launching point
for you to get started with DPS.
| | 01:01 | There are a number of Blog postings, articles, additional
web sites, and more content that are changing all the time.
| | 01:07 | So check back for the current listings.
| | 01:09 | I hope that you've enjoyed exploring Adobe's
Digital Publishing Suite as much as I have.
| | 01:13 | I look forward to seeing the
products that you make on an App Store soon.
| | Collapse this transcript |
|
|
