41
150
Digital Publishing with aDobe inDesign Cs6
and browse to the HTML file. 周e HTML file should be in its own folder,
along with any resources, including images or scripts, that the HTML
file refers to.
You can use this feature to display things like a Google map or Twitter
widgets. Copy the code from the Google or Twitter page, save it in a file,
and point to the file in the Folio Overlays panel.
A local HTML file should be in a folder with any assets or scripts the file refers to.
As shown in the table on page 131, InDesign animations are not currently
supported in DPS. Animations in DPS can play only if they are converted
to HTML5 files. You can start with InDesign’s native animation features,
discussed in Chapter 2, but then you must convert them HTML5 files.
One way to do this is to export your InDesign animations as Flash files
(FLA format) and convert them using Adobe’s experimental application
Wallaby, available from Adobe Labs (http://labs.adobe.com/technologies/
wallaby/). Watch a video overview of this process on Adobe TV, at http://
adobe.ly/jWXPD8.
Alternatively, you can create the animations in Adobe’s Edge software
and save them to HTML5 in Edge’s OAM file format.
Once the files have been converted to HTML5, the Web Content overlay
option is used to display and play the animation.
Panel settings
Once you’ve set the URL or local file that the user will view in the view
area frame, several settings can be adjusted in the Web Content overlay:
Auto Play:
周is setting will cause the webpage to load when the user turns
to the page, without any tap necessary. You can also set a delay; it’s a
good idea to set a small delay so the page doesn’t load before the rest of
the app page appears.
Transparent Background:
Select this option to set that the transparent
background in a webpage be preserved. If this option is deselected, the
web content background is used.
Allow User Interaction:
周is option lets the children play; that is, it lets the
user interact with the displayed webpage, allowing them, for example, to
click links and go to another page.
Scale Content to Fit:
周is option will cause the webpage to fit to the dimen-
sions of the view area frame that you created. Be sure the frame is large
30
Chapter 5: tablet appliCations
151
enough that the webpage is still readable when it’s inside the frame. If
you do not select this option, the webpage will be displayed at actual size
and will be cut off if the frame is not large enough to view the page, and
in most cases users will need to scroll in both directions to view the page.
Pan & Zoom overlays allow your users to explore an image beyond what
is displayed in the static view. Specifically, it makes a large image available
in a small view area, allowing the user to tap the image and then pinch
to zoom in or out, and move to parts of the image that are not seen in
the static view.
To create an image for Pan & Zoom, make sure the image has the exact
dimensions you want to use. For example, if you want users to be able
to pan a 1024 x 1024 pixel image in a 300 x 300 pixel view area, create a
PNG or JPEG image that is 1024 x 1024 pixels in 72 dpi. You can do this
using Photoshop or Illustrator: Choose File> Save for Web & Devices,
then specify the dimensions.
Draw a frame that will define the dimensions of the view area, and
then place the image inside the frame. 周e image should be larger than
the view area frame. Position the image so the view area contains the
appropriate part of the image. Try to select a focal point or some part of
the image that is interesting on its own. 周e image in the view area will
essentially become the poster image.
View area frame
周e view area (left) and the full image (right), which the user will be able to experience with
Pan & Zoom enabled.
Once the image is positioned, select the image, including the view
area frame. Use the Pan & Zoom section of the Folio Overlays panel to
turn Pan & Zoom on.
Pan & Zoom overlays
22
152
Digital Publishing with aDobe inDesign Cs6
周e Pan & Zoom settings simply allow you to turn Pan & Zoom on or off for a selected image.
With Pan & Zoom, it’s particularly important to let the user know
that the images are not static images. Clear instructions or icons should
be included on the page.
Once the user taps an image, the image can be scrolled or panned.
周e user can also pinch the image to see it reduced in the view area and
visible in its entirety.
In this example, all three images are set to Pan & Zoom, and each image has been pinched and
zoomed out to show the entire image.
Scrollable frames are unique to tablet apps. 周ey allow the user to view
more content on the same page by scrolling that content within a fixed
area. Scrollable frames can contain text, images, other overlays, or any
combination of content.
Scrollable frames are created using a container frame and a content
frame. 周e content is positioned in the container frame using the Edit>
Paste Into command.
For example, to create a scrollable text frame, place the text you wish
to scroll in its own frame on the page. Draw another frame that is the
size of the area you wish to be visible.
Scrollable frames
20
Chapter 5: tablet appliCations
153
Content
frame
Container
frame
Scrollable frames require both a container frame, which will be the viewing area, and a con-
tent frame, which contains the content that will scroll.
Next, position the content frame so it displays the part of the text that
you want to be visible when the page opens, and position it where you
want it to appear in the container frame. Select the content frame, and
use Edit> Cut to move it to the clipboard. Select the container frame, and
use Edit> Paste Into to position the content frame inside the container
frame. You can adjust the size of the container frame, which determines
how much of the content frame will display before the text scrolls.
Cut the content frame, select the container frame, and use Edit> Paste Into to position the
content inside the container frame.
Now you’re ready to select the container frame, with the content inside,
and use the Scrollable Frame section of the Folio Overlays panel to change
settings for the behavior of the content.
PDF Image Viewer| What is PDF with advanced capabilities, such as text extraction, hyperlinks, bookmarks and NET Imaging SDK, you may add it on you to quickly convert your PDF images into
chrome pdf from link; pdf link open in new window .NET PDF SDK | Read & Processing PDF files by this .NET Imaging PDF Reader Add-on. Include extraction of text, hyperlinks, bookmarks and metadata; Annotate and redact in PDF documents; Fully support all
adding links to pdf in preview; adding hyperlinks to a pdf
24
154
Digital Publishing with aDobe inDesign Cs6
周e Scrollable Frame section of the Folio Overlays panel with default settings.
Panel settings
Scroll Direction:
周ese settings determine the scrolling action of the enabled
frames. Auto Detect determines the scroll direction based on the height
and width of the container frame and content frame. For example, if
the heights of the frames are the same but the widths are different, the
content scrolls only horizontally. To make sure that the content scrolls in
only one direction — even if the container frame is narrower and shorter
than the content frame — choose Horizontal or Vertical. Choosing the
Horizontal & Vertical option allows the content to scroll in both direc-
tions, assuming the content frame is larger than the container frame.
周e direction options for scrollable frames.
Scroll Indicators:
Select Hide if you don’t want scroll bars displayed as the
user scrolls the content.
Initial Content Position:
Use this setting to determine the initial position
of the content on the page. Select Upper Left to align the content frame
to the upper-left corner of the container frame as the initial view. Select
Use Document Position to use the location of the content frame as the
initial view.
27
Chapter 5: tablet appliCations
155
The “sliding drawer” effect
Because scrollable frames can have any kind of content, you can do all sorts
of fun things with them. One of our favorite tricks is to make a sliding
drawer, or pull tab, effect. 周is lets you make tabs that users can drag out
to reveal additional content. 周e following steps show just one example
of the kinds of things that can be created using this general technique.
It has the advantage, too, of allowing you to include more content in the
relatively small amount of screen real estate available on tablets.
1.
Create and group the objects that will make up the tab content. In
this example, we have the tab graphic, some text, and an image.
周e content of the tab is created, in this case, with the gray tab graphic, some text, and an
image (left). 周e objects are positioned and grouped (right).
2.
Draw the container frame. Since our tab will pull out from the right
side of the page, the height of the container frame should be the
same as, or a little greater than, the content group. With a typical
scrollable frame, at this point the content group would be cut and
pasted into the container frame. But if we do that, the tab will not
have a pullout effect. 周ere just won’t be that much room for the
content to slide back and forth.
3. 周e trick to this technique is to draw an invisible rectangle that is
positioned so that when it is grouped with the other content, the
tab sits in just the right location in the container frame. 周is is
illustrated on the following page.
24
156
Digital Publishing with aDobe inDesign Cs6
Container
frame
Invisible
rectangle
Content
group
Draw an invisible rectangle and group it with the other content, which positions the gray tab
in the correct closed position. You can adjust the position later if necessary.
4.
Group the rectangle with the other content, then select Edit > Cut
to move it to the clipboard. Select the container frame and choose
Edit> Paste Into to create the scrollable frame. You can click the
content group and position it as needed once it’s pasted into the
container frame. If the invisible rectangle is not in the correct
position, double-click it to select it within the group and move it
to the appropriate location.
Use Edit> Paste Into to position the content group in the container frame. If the tab location
needs to be adjusted, double-click the rectangle to select it within the group and reposition it.
5.
In the Folio Overlays panel, choose Horizontal from the Scroll
Direction menu. And finally, select the Hide check box so that a
scroll bar doesn’t appear when the user slides the tab out.
36
Chapter 5: tablet appliCations
157
周e result, as viewed in the Desktop Viewer, is a pull tab, or drawer, that the user taps and
pulls out to reveal the content. 周e tab can be moved back and forth at will by the user.
The Folio Builder Panel
周e Folio Builder panel in InDesign is an essential part of creating a DPS
app. 周e purpose of the Folio Builder panel is to assemble your documents
into a folio file that can be converted into an app. 周e panel allows you to
set properties for the folio; preview your work, including the interactive
components; and share your folios with others for review.
周e Folio Builder panel is used to create a folio file that will ultimately
become a standalone app, such as a book or a single issue in a multi-issue
app (as in a monthly magazine). Folios are made up of articles, which in
turn are made up of layouts. Each folio may contain multiple articles.
Each article may contain a layout that is horizontal only, vertical only,
or one of each, depending on how the folio is set up.
Folio
Articles
Articles
Article
Articles
Articles
Articles
Articles
Vertical
layout
Horizontal
layout
A folio consists of articles, which are made up of InDesign layout files.
周e Folio Builder panel is a multi-level panel. It displays folios when
you are working on folios, articles when you are working on articles, and
layouts when you are working on layouts. 周e key to using the panel is to
pay attention to the label at the top of the panel, which tells you which
level is being displayed.
Exploring the Folio
Builder panel
20
158
Digital Publishing with aDobe inDesign Cs6
周e key to using the multi-level Folio Builder panel is to keep an eye on the top of the panel,
which shows you if you are viewing folios (left), articles (center), or layouts (right).
To navigate to the next level, click the arrow to the right of the folio
or article, or double-click the folio or article name. To go back up from a
layout or article, click the left-facing arrow at top.
When you are viewing folios and articles, the bottom of the panel will
have a Preview button, a New or Add button, and a Trash Can icon to
delete folios or articles. When viewing layouts, you can Add a layout only
if you are missing either the horizontal or vertical version.
周e buttons at the bottom of the Folio Builder panel let you preview the entire folio (left), an
article (center), or an individual layout (right).
When you have a list of multiple folios, you can filter which ones are
displayed. At the top of the panel, click the black triangle next to Folios:
All. You’ll see a list of the various kinds of folios that can be listed. 周e
default setting is In the Cloud (that is, uploaded to the Acrobat.com web
host), but there are other options that are discussed later in this chapter.
Regardless of how you filter the list, you can also sort the list of folios
alphabetically, by most recently modified, or by publication date.
35
Chapter 5: tablet appliCations
159
You can filter the kinds of folios that are displayed in the Folio Builder panel, and sort the
filtered list.
周e first step to creating a folio is to open the Folio Builder panel (Win-
dow> Folio Builder) and log in with your Adobe ID. If you already have an
Adobe ID you wish to use, choose Sign In from the panel’s flyout menu;
choose Sign Up if you don’t have an Adobe ID or want to create a new one.
DPS and your Adobe ID
If you’ve ever registered your Adobe software, you have an Adobe ID. It’s free and is
your usual “identifier” to Adobe. Most people have just one Adobe ID.
However, be aware that the Adobe ID you use in the Folio Builder panel will be tied
to a specific custom viewer app that is created later in the process. 周is means that if
you have different publications, you’ll want to sign in using different Adobe IDs. 周e
folio you create may be a standalone app, such as a book, or it may be a single issue in
a multi-issue app, such as a monthly magazine. Either way, the steps to create a folio
are the same, but only one Adobe ID can be associated with a publication’s viewer app.
Next, click the New button at the bottom of the Folio Builder panel
to display the New Folio dialog box. Here you will set various important
attributes of the folio, including the Name of the folio. 周e name of the
folio will be used for production purposes, and is not the name users will
see in the final app.
You can also specify the Viewer Version. 周e viewer version is associated
with the version of any viewer app you’ve previously built, or the Adobe
Content Viewer on your device used to preview your work. To change the
version for the folio, click on the version number in the New Folio dialog
box; the Viewer Version dialog box will display, then select the appropri-
ate choice. You’ll want to make sure that your folio is an equal version or
lower than any viewer app you’ll want the folio viewed in.
TIP
To determine the version of the Adobe Content Viewer on your tablet
device, go to any app in the Library. Tap once to display the navigation controls,
then tap twice on the name of the publication at the top of the screen. The
version and build number will display.
Creating a folio
Documents you may be interested
Documents you may be interested
