Start learning with our library of video tutorials taught by experts. Get started

InDesign CS4: Interactive Documents and Presentations

InDesign CS4: Interactive Documents and Presentations

with Michael Ninness

Video: Introduction

(Music playing.) Hello! I'm Michael Ninness, a Product Manager and Product Designer at Adobe. In my role at Adobe, I get to spend a lot of time with designers and one of the questions I hear them ask over and over is how can they apply their print design skills to create digital and interactive content. Perhaps you are a traditional print designer who struggled to learn how to use Flash or have been frustrated with the lack of typography in design to in typical presentation software. If so then this course, InDesign CS4 Interactive Documents and Presentations is for you. We will use InDesign, by itself and in conjunction with Acrobat and Flash Professional to layout and design a variety of digital documents including a Slide Presentation, complete with Navigation buttons, Slide Transitions and Hyperlinks, an Interactive Movie board or Style guide, an Interactive Digital Portfolio that the viewer can turn the pages of to see your work and a digital magazine that includes animation and video.
Expand all | Collapse all
  1. 2m 41s
    1. Introduction
      1m 34s
    2. Using the exercise files
      1m 7s
  2. 52m 22s
    1. From print to web
      3m 0s
    2. From web to print
      3m 31s
    3. Print plus digital: Newspapers
      5m 6s
    4. Print plus digital: Magazines
      3m 42s
    5. Digital print replicas
      6m 31s
    6. User-generated content
      2m 54s
    7. Self-publishing: Print
      5m 4s
    8. Self-publishing: Digital
      3m 41s
    9. Digital catalogs
      1m 40s
    10. Digital magazines: iGIZMO and iMOTOR
      5m 22s
    11. Digital magazines: VIVmag
      6m 33s
    12. Digital magazines: FLYP
      3m 40s
    13. Digital portfolios: Studio Q
      1m 38s
  3. 11m 43s
    1. Customizing the workspace
      4m 15s
    2. Working in pixels
      1m 51s
    3. Other helpful preference changes to make
      1m 45s
    4. Creating an RGB color palette
      3m 52s
  4. 57m 19s
    1. What we're going to build
      1m 43s
    2. Choosing a document size
      1m 21s
    3. Adding layers to stay organized
      2m 46s
    4. Creating a title slide master page
      2m 57s
    5. Adding placeholder text
      2m 44s
    6. Creating auto page numbers
      3m 51s
    7. Adding placeholder slide navigation buttons
      3m 39s
    8. Creating a content slide master page
      5m 39s
    9. Creating paragraph styles
      6m 2s
    10. Overriding master page items
      2m 56s
    11. Duplicating and moving pages
      1m 44s
    12. Redefining a paragraph style
      3m 3s
    13. Creating navigation buttons
      5m 22s
    14. Customizing the buttons for the first and last slide
      2m 29s
    15. Applying page transitions
      2m 23s
    16. Adding hyperlinks
      2m 39s
    17. Testing hyperlinks before exporting
      1m 34s
    18. Exporting to PDF
      4m 27s
  5. 35m 22s
    1. Setting initial view options with Acrobat Professional
      3m 20s
    2. Adding a button to enter Full Screen mode
      6m 52s
    3. Adding a tool tip to a button in Acrobat Professional
      2m 21s
    4. Creating bookmarks in InDesign
      7m 46s
    5. Making a button to go to a specific page in a PDF
      8m 16s
    6. Creating "remote rollovers" with Show/Hide Button
      6m 47s
  6. 13m 29s
    1. Adding a drop shadow
      2m 7s
    2. Creating a reflection effect for placed images
      5m 23s
    3. Creating the sense of a timeline with page transitions
      5m 59s
  7. 41m 18s
    1. What we're going to build
      3m 43s
    2. Using Proportional Place to scale images while placing them
      2m 26s
    3. Placing multiple files as a grid of images
      3m 33s
    4. Adding the URL hyperlink
      1m 26s
    5. Assigning actions to the navigation buttons
      2m 4s
    6. Using groups to create different button state appearances
      5m 44s
    7. Creating a button that hides itself when clicked
      4m 48s
    8. Toggling the visibility of multiple objects with one button
      4m 0s
    9. Creating buttons to hide and show strokes
      6m 24s
    10. Creating buttons to hide and show color values
      3m 27s
    11. Adding the Interactive Page Curl option for Flash (SWF) Export
      3m 43s
  8. 33m 9s
    1. What we're going to build
      1m 17s
    2. Starting a document with a double page spread
      6m 41s
    3. Creating the illusion of a book with a cover
      5m 38s
    4. Adding the spiral-bound image to the edges
      4m 27s
    5. Adding the illusion of a gap between the open pages
      4m 8s
    6. Creating a clipped button to close the book
      6m 39s
    7. Applying a subtle drop shadow Object Style
      4m 19s
  9. 35m 19s
    1. Exporting a SWF prototype for a Flash developer
      3m 51s
    2. Handing off the InDesign layout by exporting to XFL
      2m 52s
    3. Opening the XFL file in Flash CS4 Professional
      3m 23s
    4. Adding a stop action to the first frame
      2m 37s
    5. Animating the masthead with a Motion Preset
      3m 24s
    6. Testing the animation and preventing it from looping
      1m 59s
    7. Creating an invisible button to go to another page
      4m 19s
    8. Creating a button to return to the first page
      2m 52s
    9. Creating the remaining buttons
      4m 29s
    10. Adding a video to the digital magazine
      3m 46s
    11. Exploring the final "developer" version of the digital magazine
      1m 47s
  10. 14m 37s
    1. The Combine Textfields extension
      5m 39s
    2. Avoid ligatures if you want to edit text later in Flash
      4m 0s
    3. Using JPEG pass-through for better image quality
      4m 58s
  11. 37s
    1. Goodbye
      37s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
InDesign CS4: Interactive Documents and Presentations
4h 57m Intermediate Aug 11, 2009

Viewers: in countries Watching now:

In InDesign CS4: Interactive Documents and Presentations, Adobe product manager and designer Michael Ninness shows print designers how to use InDesign by itself and in conjunction with Acrobat and Flash Professional to lay out and design a wide range of digital documents. Michael provides a tour of digital publishing trends, showing real-world examples of what can be achieved through InDesign. He creates a slide presentation with transitions and live hyperlinks, and then builds an interactive portfolio that can be used with prospective clients. Exercise files accompany the course.

Topics include:
  • Configuring a custom InDesign workspace for designing digital documents
  • Building slide navigation buttons for interactive presentations
  • Adding reflection effects to images within a presentation
  • Using InDesign to build an interactive mood board
  • Creating an interactive digital spiral-bound portfolio
  • Using InDesign and Flash Professional to build and animate a digital magazine
  • Adding a video file to an interactive document
Subjects:
Business Presentations Design Web Digital Publishing PDF Projects
Software:
InDesign
Author:
Michael Ninness

Introduction

(Music playing.) Hello! I'm Michael Ninness, a Product Manager and Product Designer at Adobe. In my role at Adobe, I get to spend a lot of time with designers and one of the questions I hear them ask over and over is how can they apply their print design skills to create digital and interactive content. Perhaps you are a traditional print designer who struggled to learn how to use Flash or have been frustrated with the lack of typography in design to in typical presentation software. If so then this course, InDesign CS4 Interactive Documents and Presentations is for you. We will use InDesign, by itself and in conjunction with Acrobat and Flash Professional to layout and design a variety of digital documents including a Slide Presentation, complete with Navigation buttons, Slide Transitions and Hyperlinks, an Interactive Movie board or Style guide, an Interactive Digital Portfolio that the viewer can turn the pages of to see your work and a digital magazine that includes animation and video.

Before you jump in and start the course, you should know that the first chapter is a bit different than the rest of the chapters. I'll begin by taking you through a tour of digital publishing trends, showing you real world examples of what kinds of digital documents and experiences designers and publishers are creating today. Almost all the examples you will see began their creation in InDesign. These examples are meant to inspire you and get you to think about the kinds of documents you might want to start creating yourself. Note that if you just want to get to the how to part of this course, then feel free to skip chapter 1 or come back to it when you are ready to take a break from the step-by-step projects.

My goal for you is that by the end of this course you have expanded your document production capabilities beyond print. Now, let's get started with InDesign CS4: Interactive Documents and Presentations.

Find answers to the most frequently asked questions about InDesign CS4: Interactive Documents and Presentations.


Expand all | Collapse all
Please wait...
Q: After exporting a portfolio in InDesign, as instructed in the tutorials, the portfolio items appear fuzzy. The letters typed into the InDesign document look fine, and the PDFs placed into InDesign look as they should, but once the items are exported, the type is fuzzy. What could be causing this?
A: The problem described occurs when a PDF is placed into an InDesign document and then scaled on the page. When the final SWF file is then exported from InDesign, the PDF graphics end up looking “soft and fuzzy” because they are being downsampled to a lower resolution.
First, be sure to update InDesign to the latest CS4 dot-release from Adobe. There was a bug in the shipping version of InDesign CS4 that caused images in SWFs to always go out as low-quality JPEGs regardless of the settings chosen in the SWF Export dialog. This issue was addressed in a subsequent release. To initiate the update from within InDesign, choose Help > Updates.

To increase the image quality of the images that end up in the final exported SWF, follow one of three options.

1. Choose PNG instead of JPEG
When images, including PDFs, are placed into an InDesign document and then exported to SWF, the images will all be downsampled to 72dpi and saved in one of two file formats, JPEG or PNG. The JPEG file format is a "lossy" file format, and depending on the image quality setting chosen, the final images quality could vary wildly. The PNG file format is "lossless", in that it does not add distracting and ugly artifacts to images.

In the SWF Export dialog, the default setting for Image Compression is set to Auto. Change this setting to "Lossless (Do Nothing)". It is unfortunate that this option is named this way. The three choices should be listed as Auto, JPEG and PNG. Adobe has changed in this in InDesign CS5, but for CS4, one has to know that "Lossless (Do Nothing)" really means “save the images as PNGs.”
The plus to using PNGs is that the images will end up looking great. The minus to using PNGs is that the file size of the SWFs will be larger because the images are not being compressed.

2. Choose High or Maximum JPEGs
If file size is a concern, then switch the Image Compression option to JPEG, but choose a higher quality setting from the JPEG Quality pop-up. The default is set to Medium. Choose High or Maximum instead. The higher the quality setting, the better the images will look, but their file sizes will be larger. That said, the file size of a maximum quality JPEG is usually smaller than a PNG.

3. Resample in Photoshop and Import JPEGs
The method that gives the user the most control over image quality and file size is to downsample the images in Photoshop to the exact pixel dimensions desired before placing them into InDesign. Open the PDFs (or any other image file formats) in Photoshop and size them to the desired pixel dimensions. If opening a PDF, Photoshop will display an Import PDF dialog first where the pixel dimensions can be set. If other file formats are used, resize them in Photoshop by choosing Image > Image Size. Then make sure the Resample Image checkbox is turned on, choose Bicubic Sharper from the pop-up menu at the bottom, and enter the pixel dimensions in the Pixel Dimensions section of the dialog box (not the Document Size section).
Once the images are the correct size, save them as JPEGs, and set the quality desired level.

After the final JPEGs are placed in the InDesign document, do NOT scale them. Place them at actual size (100%). If a JPEG goes into InDesign at 100% and nothing else is done to them, they will "pass through" to the final SWF untouched. Meaning, they'll go out exactly as they came in. This also means the JPEGs cannot be altered in any way that would cause them to be resampled during SWF Export. Examples are applying transparency effects, drop shadows, etc., to the JPEGs in InDesign.

See the examples below, where a PDF was placed into InDesign, scaled to 50% of its original size, and then various SWFs were exported, changing the Image Compression and JPEG Quality options as described in items 1 and 2 above.

Original image:



Maximum:



High:



Medium:

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed InDesign CS4: Interactive Documents and Presentations.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked