Click on any phrase to play the video from that point.
[Adobe Digital Publishing Suite]
[Colin Fleming - Digital Publishing Evangelist] Now let's go a little bit deeper on the design phase.
This is where I use InDesign to create the publication and to create the interactivity.
I really enjoy this part because I get to work with InDesign a whole lot.
What I'm going to be building is content that goes onto a tablet.
One thing to keep in mind is that your readers may pick a tablet up;
they might read it this way or they might read it this way.
You need to consider how you're going to design your application and your content
so that you can support the option of rotating what they're reading.
What you need to consider is that if you build only vertical, they can only read vertical,
and that's 1 InDesign file.
If you want to support both orientations, that's going to be 2 InDesign files
for what we call an article.
So think about the files that you need to build and start mapping out a plan for it.
When you build your InDesign files, you want to build them the proportions,
the dimensions of the tablet device that you're targeting.
That's a really good best practice.
So for instance, for an iPad I build it 1024x768 pixels.
That folio, that article, that dimension is going to look great on an iPad,
and it will look okay on other devices.
It may scale a little bit, or you may choose to build an additional set of files
for other devices that are other dimensions or aspect ratios.
So let's take a look at what I've built on the iPad
so you have an idea of where I'm going with this.
I'm taking a look at the iPad, and what I'm looking at is a folio.
The folio is a set of articles, and as I move sideways through this,
I see I have 3 articles.
Some articles may be 1 page, some may be longer than 1 page.
This is a multiple-page article which I then can scroll down through and read.
Some of these pages have interactivity.
For instance, on this particular page I can scrub this bicycle and make it spin.
Another example of interactivity might be building a pinch and zoom experience.
So if I click on this image, I've activated it and now I can use a zoom gesture on my tablet
and move around inside of this particular piece of interactive content.
I can zoom back out, tap it again, and that turns the interactivity off.
So these are the types of interactivity that I'm going to show you how to build in InDesign.
I've built a vertical version, but I also have a horizontal version.
So if I rotate the iPad, here is the horizontal, and it reads in a very similar fashion
but with very different layouts.
So let's go to InDesign and build these pieces up.
I'm taking a look at the vertical file in InDesign CS5.5,
and I have already installed the Folio Builder and Overlay Creator panel.
These are the panels I'm going to use for building the interactivity
and to construct the folio.
This InDesign file is multiple pages, and as I scroll down through the content here,
you see each of those designed pages,
and you can see I've already built the interactivity into the vertical orientation.
We're going to go over to the horizontal so I can show you how to build this interactivity.
I'm going to switch files.
Here's the horizontal layout. It has a similar set of pages.
As I scroll down, we can see each of these pages.
I've got a nice space here ready for that bicycle that I want to rotate.
So how do I build this interactivity? Super easy.
I simply draw a frame.
I'm picking up the Frame tool, I'm drawing a shape, a box, a container,
which is going to hold this interactive element.
What I've already constructed is interactive content and material.
Let me show you that content.
If I go into my Links folder, I've got a folder of images.
These images are a sequence of the bicycle,
and as I flip through the images, we can see each of these separate shots.
When I take a look at the files, they're all JPEGs and they're numbered sequentially.
I did a little preparation to build these files.
Now you know what I'm working from.
Back over in InDesign I drew the frame,
and now I open up one of those new panels, the Overlay Creator.
The Overlay Creator panel is aware of what you have selected,
and it lets you know what you can build.
Right now I have a frame selected.
It's empty, and it tells me that this could be an image sequence, a panorama,
or a web content frame.
This is going to be an image sequence, so I click Image Sequence
and now I browse for that folder of content.
So I go point to the HUBBike_360--this is the folder that holds all those images--
I click Open, and automatically we show the first image as a placeholder.
Now to build the interactivity, it's simply a matter of choosing your options.
I could choose to have this auto play; I could have tap to play and pause.
I really like swiping to change the image.
This allows your user to use their finger and gesture on the device
to interact with this series of images.
So simply by choosing the options, I've now built this type of interactivity,
and the next thing I want to do is preview it.
At the bottom of the Overlay Creator panel is a button that says Preview.
When I click this, the active file is moved to the Adobe Content Viewer on my machine,
and I can preview the experience.
Now I'm taking a look at the folio that I'm building,
and I can move through this document.
Here's the interactivity that I just built.
If I click and drag with my mouse or on a trackpad,
I now can interact with this particular piece of content.
So that's how easy it was to build this type of interactivity.
The other type of interactivity I'm going to build is the pinch zoom.
I'm going to go down a couple of pages down to page 6,
and I want to put this pinch zoom area here into the blank space.
This one is also really easy.
I simply choose File and Place, I then navigate to a JPEG or a PNG file,
and I place the content.
I'm going to build a frame to hold the content,
and I'm going to scale the content.
I'm going to make it larger.
The maximum value for this scale is going to be about 100%.
You can see right now that my scale factor is much less than 100%,
so I'm going to get good interaction here.
Basically, I've placed and cropped a picture.
To add the interactivity, again I just shift on over to the Overlay Creator panel.
I'm going to select the frame that holds that image,
and I'm going to open up the Pan & Zoom option.
By choosing Pan & Zoom, I've built the interactivity. That's all there is to it.
If I come on down to Preview, now we generate a preview,
and again I'm going to see all the pages in this particular layout ready to go and ready to test.
Here in the Adobe Content Viewer I can move down through the pages.
There's the bicycle I built a few moments ago,
and now we get to the pan zoom.
I'm going to click to activate it.
I don't have a touchpad right now, but if I use the plus or minus keys
I can zoom in or out.
Once I've zoomed in a little bit, I can click and drag with my mouse
and I can move around inside of this graphic and explore the experience a bit more.
So that's how easy it is to use InDesign to combine text and graphics
and then go a little step further to build this interactivity.
Building the interactivity all occurs inside the Overlay Creator panel.
And I'm working in 1 file of a pair for the horizontal and the vertical.
The next step would be to start to construct a folio.
This is the larger arrangement of articles that I flipped through on my tablet a moment ago.
So how do I do this?
I use that other new panel, the Folio Builder panel.
If I don't have an Adobe ID, I can sign up for one here,
but you already did that when you prepared for this.
If I click Sign In, now I can sign in with my Adobe ID.
Once I've signed in, I can see all of the folios that I've been working on.
You can see I've been pretty active here.
If I want to build a new folio, I simply come to the bottom of the panel and click New.
I give it a name. This is sort of a structural name that refers to the publication that I'm building.
It's not going to be visible inside of the viewer on a tablet though.
This is going to be LOCAL fall.
I set the dimensions of this particular piece.
I'm building for the iPad, so it's going to be 1024x768.
And I click OK.
When I look at the Folio Builder panel, I've now changed what I see.
Once you build a new folio, the Folio Builder panel moves down 1 level and shows articles.
This is the basic element of a folio.
Articles may have 1 or 2 layouts--horizontal and vertical--
and one way to add layouts to an article is simply have an InDesign file open
and then click Add at the bottom of the Folio Builder panel.
Now I specify the name for the article.
I'm going to call this 2Wheels. And I click OK.
I'm going to go ahead and save my file.
The current saved version of this InDesign file is now pulled into this article
as one of the layouts, and it moves the content up to the cloud.
Once the process is done, I have 1 layout in my article.
I've just finished adding 1 layout to this article.
Let's go down into that article.
I'm going to press the arrow on the right-hand side of that article,
and I can see the landscape layout is here.
I also want to add the vertical or portrait layout.
I simply switch over to the other document and make it active,
and at the bottom of the Folio Builder panel I click Add.
Now this file is being uploaded, and it's being added as the other layout in the article.
All right.
I've now added the vertical layout to this article.
We can see the landscape and portrait layouts here in the Folio Builder panel.
I'm going to move from the 2Wheels article view back up to the LOCAL fall folio,
and this is where I see that 1 article that I've built.
Articles contain layouts, and articles also contain metadata.
The metadata is going to include things like the name of the article and the author.
So let's add that now.
If I target the article and use the menu for the panel,
I can now choose Properties and fill this information in.
This is going to be called 2 Wheels Good,
A tour in the city, and Frederick wrote it.
So a little bit of metadata about the article is going to be visible in my viewer
when the reader reads it.
If I want to add another article, I could do it the manual way I just did
or I can take advantage of importing.
If I use the Menu command for the Folio Builder panel and choose Import,
this is where I can choose to import single or multiple articles.
What's important here is the way I name my InDesign files
and the way I build a folder structure.
The folder structure is an article folder inside of which are 1 or 2 InDesign files.
That's the horizontal and the vertical.
The file names are very important.
They need to end in _h for the horizontal and _v for the vertical layout.
So the combination of the folder with 2 InDesign files
with really specific file endings allows you to import.
So what I'm going to do is bring a cover in,
and I'm now going to point to the resource.
I'm now going to point to my cover.
You see that there are 2 InDesign files in there with those names.
I click OK, and those 2 files are now uploaded and added to the folio.
So now you can see that second article has been added.
We're going to add the metadata later over in the production system
just to give you an idea of another place to edit the metadata.
I'm going to move up a level now.
I'm going to move to the view of all of my folios.
You see LOCAL fall is at the top, and the folio also carries metadata.
So if I go take a look at Properties, this is where I can give the publication a name.
I'm going to call this one LOCAL. And this is where I can load cover images.
These are important in the Library view inside of the viewer system.
I click the Load icon and go find some PNG or JPEG files.
I usually make these about 1000 pixels on the long side. That seems to work for me.
And I'm going to load the vertical and horizontal cover images.
You can see them come on in.
When I'm all done, I'm going to go ahead and click OK.
I've opened InDesign files, added some interactivity,
then started to construct a folio.
Now it has 2 articles.
The next thing I probably want to do is preview the folio.
In the Folio Builder panel, if I target the folio LOCAL fall
and come to the bottom of my screen, I can now preview on my desktop,
and we're going to see these 2 articles in a folio on my desktop.
The last time I previewed, I was only looking at 1 file.
But since I'm working with the folio, I'm going to get 2 articles,
and I have 2 orientations.
So we'll take a peek at that now.
Here I am inside the Adobe Content Viewer on my machine,
and if I click and drag down, I move down through that multiple-page publication,
and I'm moving back up.
If I drag to the right, we see the second article.
This is a single-page article, so I don't scroll down through it.
I'm looking at the horizontal layout right now, but if I want to see the vertical
I press Command or Control R.
I've now rotated the display.
And when I click and drag to look at the other article, I see the other layout.
I'm working on a slightly smaller screen today,
which is why I don't see the bottom of each of these pages,
but I can move through, see, and test what I've done on my desktop.
I've built it. Now I'm testing it.
There are probably 2 more things I want to do with this in the design phase.
One of those things is I might want to share my work with somebody else to get their opinion.
Sharing a folio is really, really easy.
I do this in the Folio Builder panel.
I select the folio and then I use the panel menu and I choose Share.
Now I type in the email address of the person I want to share this with,
and they get a piece of email and they can open up InDesign,
log in with their Adobe ID, and they can see my folio.
The other thing they can do is log on to a tablet device with the same ID
and they'll see your folio on their device.
The last type of test process I probably want to work on in the design phase
is making sure that my piece looks good on a tablet device.
Over in the Folio Builder panel I've created this folio,
and part of the process included uploading content.
When we upload the content, that means it's up in the cloud.
So if I pick up my tablet device and go ahead and launch the free Adobe Viewer application,
I'm now looking at the library of what I've built using the Folio Builder panel.
What I see here matches what the Folio Builder panel in InDesign shows me.
And I can see LOCAL is available and I've downloaded it.
If I want to take a look at it, I simply click View.
Here's that first page in the horizontal orientation.
There's the second article.
A little bit later we'll switch the position.
And as I move down through the publication, there's the interactivity that I built,
and we'll come on down to the pinch zoom and there we go.
So there's your example of how easy it is to build this type of interactivity
using the DPS process.
It's a little bit of planning ahead and using InDesign to great effect
and a couple of new panels.
So give it a shot. It's a blast. Thanks for watching.
[Adobe Digital Publishing Suite - tv.adobe.com]
