Tutorial 1: Quick tutorial overview

If you want a quick overview of the folio-creation process, go through this tutorial. For more detailed tutorials, skip to the next tutorial.

Create a folio and article

Use the Folio Builder panel to create a folio and add articles to that folio. There are two ways to create articles. One method is to open the InDesign document and use the Add Article option. The other method is to import the article from InDesign files. Importing articles requires specific folder or file naming conventions.

  1. Install the Folio Producer tools for InDesign CS5 or later.

  2. In InDesign, open the Folio Builder panel. For InDesign CS5 or CS5.5, choose Window > Extensions > Folio Builder. For InDesign CS6, choose Window > Folio Builder.

    Signing in to the panel is optional.

    Signing in to the panel is not required. If you don’t sign in, you can create offline folios and preview them on a connected iPad (Mac OS only). One advantage of signing in is that you can upload folios to an acrobat.com server and download them to an iPad or other device by signing in to the Adobe Content Viewer app. If you’re a Professional or Enterprise subscriber, signing in is also required to create folios for a multi-folio viewer app.

  3. Click Create New Folio to create a new folio, and set the following options: Click OK.

    • Specify a folio name such as “Tutorial.”

    • Click the Viewer Version number, and then specify the most recent version.

    • Leave the Orientation set to both portrait and landscape. You will create both horizontal and vertical layouts for all the articles in the folio.

    • Click the folder icons in the Cover Preview section and specify the cover_v.jpg and cover_h.jpg images in the TutorialAssets > CityGuide_Folio folder.

    Create a new folio

    Next, create a new document and add it as an article.

  4. Create a new 1024x768 landscape document with the Intent set to Web (InDesign CS5 or CS5.5) or Digital Publishing (InDesign CS6). Save the document as “test_h.indd.” Add text or graphics.

    It isn’t necessary to save documents with _h and _v suffixes unless you want to import them. However, we recommend that you add _h and _v suffixes to InDesign documents so that you can import them later.

  5. In the Folio Builder panel, choose Add Article from the panel menu to create an article. Specify the article name, such as “test,” and click OK.

  6. In the Folio Builder panel, double-click the “test” article, or click the arrow to the right of the article to display layout view.

    Notice that only the landscape layout appears.

    Landscape view of the Folio Builder panel
  7. Do either of the following:

    • (InDesign CS5/CS5.5) Create a new 768x1024 portrait document using a Web Intent. Save it as “test_v.indd.” Add text or graphics.

    • (InDesign CS6) Create a new 768x1024 portrait document using a Digital Publishing Intent, or create a 768x1024 portrait alternate layout. The drawback to creating alternate layouts is that you cannot import documents with alternate layouts at this time; you can only use the Add Article method.

  8. In the Folio Builder panel, make sure that you are in layout view, and click Add Layout to add the portrait layout.

    Layout view should now include both landscape and portrait layouts.

Change folio and article properties

The Folio Builder panel includes three views: folio view, article view, and layout view.

  1. Experiment with navigating through the three panel views.

  2. Click the upper left arrow twice to return to folio view. Select the folio, and choose Folio Properties from the Folio Builder panel.

  3. Specify a Publication Name, such as “Sample Folio.”

    The Publication Name is different from the Folio Name. The Publication Name is what appears in the viewer. The Folio Name is what appears in the Folio Builder panel and in the Folio Producer.

    Folio Properties dialog box.
  4. If you have not already done so, specify images for the Cover Preview (located in the CityGuide_Folio folder), and the click OK.

    The cover preview appears in the viewer library. Cover previews are required to publish the app.

  5. In the Folio Builder panel, double-click the folio to browse to article view. Select the test article and choose Article Properties from the Folio Builder panel menu.

    Notice that the Articles Properties dialog box includes a Title field. The article title appears in the viewer. The article name appears in the Folio Builder panel and in the Folio Producer. When you create links to other articles, use the article name, not the article title.

    Article Properties dialog box
  6. Specify the article properties, and click OK.

Import articles

You just created an article by opening the source document and choosing New Article. An alternate method is to import articles. You can import a single article or multiple articles if you use the required folder structure and filenaming conventions. For importing, each article folder should have InDesign documents with _v or _h suffixes to indicate whether they are vertical or horizontal.

When you import an article, point to an article folder. When you import multiple articles, point to a folio folder that contains article subfolders.

Note: Before you import articles, open the source documents in the TutorialAssets folder to make sure that all the links are updated and the files are saved. See Tutorial setup.
  1. In article view, choose Import Article from the Folio Builder panel menu.

  2. For Article Name, type Meridien Ad.

  3. Click the Location folder icon, and navigate to the TutorialAssets > Meridien_Folio > WiFi_Ad folder. Click Open.

    Importing a single article
  4. Click OK to import and upload the article.

    Next, import multiple articles in a folio folder. When you import an entire folio, each subfolder in the folio folder is imported as a separate article.

  5. In article view, choose Import Article from the Folio Builder panel menu.

  6. Select Import Multiple Articles.

  7. Click the Location folder icon, and navigate to the TutorialAssets > CityGuide_Folio. Click Open.

  8. Click OK to import the articles in the folio folder.

    Folio Builder panel after importing articles

    The articles are imported. If your folio folder includes a sidecar.xml file, the article properties are populated.

  9. Navigate to folio view, select the tutorial folio, and click Preview.

If you edit the source document of any article, the changes are not reflected in the preview until you update the article. Select the article, and choose Update from the Folio Builder panel.

Preview content

You can preview articles and folios using either the Desktop Viewer or the Adobe Content Viewer on a mobile device. The Desktop Viewer is a good way to quickly preview a layout, but you want to make sure that you preview on the iPad or other mobile device at some point.

The Desktop Viewer does not preview articles with the PDF image format. Instead, you can preview the current layout.

  1. With one of the layouts open, choose File > Folio Preview.

    The Desktop Viewer displays the article. If you create articles with a PNG or JPG image format, you can use the Desktop Viewer to preview either articles or folios.

  2. Exit the Desktop Viewer.

  3. If you have an iPad, install the Adobe Content Viewer and connect your iPad to your Mac OS computer (Preview on Device isn’t supported in Windows). Start Adobe Content Viewer on the iPad.

  4. In the Folio Builder panel, select the Tutorial folio you created, click the Preview option at the button of the panel, and then choose Preview on [device name].

If you’re using a Windows computer or prefer to preview folios through uploading and downloading, you can sign in to the Folio Builder panel and upload your folio to the acrobat.com server. Then sign in to the Adobe Content Viewer on your iPad using the same Adobe ID you used to sign in to the Folio Builder panel. Make sure that your mobile device is connected to the internet.

To delete the folio and all its articles, select the folio in the Folio Builder panel and click the Trash button.