Blancer.com Tutorials and projects

Tablets are today’s Big Thing. Sure, the iPad can’t do Flash, but it’s just the first of a wave. Adobe InDesign CS5 can do a ton of interactive stuff that’s perfect for the large screen space of a tablet, then kick it over to Flash for tweaking and improvement. In this tutorial, we’ll see how to work with the InDesign side of things.

---

Introduction

When Adobe floated its iPhone Compiler for Flash at Max last year I have to admit I was, briefly, blown away. Then I turned to the guy next to me in the audience and said: “This is going to be great until Apple finds a way to shut it down.” Which sort of explains why Apple’s “April Shock” really didn’t surprise me. How they did it was a surprise but shutting it down was not unexpected.

A couple of weeks later Richard Galvan the Flash Product Manager was on the stage at FlashintheCan showing off some rather “whizzy” stuff that Flash CS5 can do. During the course of his presentation he demoed how InDesign CS5 can now do a ton of Interactive stuff which can then be easily swung over to Flash CS5 as a .fla or simply shot out of InDesign as a fully interactive swf. I am going to admit I had the same reaction as many of you are having: “Gimme a break. There is no way a Flash developer/designer worthy of the title is going to create one big, honking swf from InDesign.”

After Richard’s presentation I cornered him and asked why he was demoing something that was tantamount to giving a crazy man a gun. His one-word answer rocked me back.

Tablets.

he said.

If there is one fundamental rule I try to beat into my students’ heads it is that when it comes to grappling with issues “start with the obvious and work back to the obscure.” Richard’s response was so darn obvious that I felt a little sheepish.

Even though the iPad is one seriously cool device we tend to forget that tablets are an emerging technology. Google, HP and others are going to be coming out with a regular cornucopia of these things and they will all be Flash enabled. Tack onto this the Flash Player 10.1 release which is going to start popping up on every mobile device except Apple’s offerings and it isn’t much of a stretch to assume it is only a matter of time before our clients climb on to the mobile bandwagon.

Just because Apple was first out of the block with its “toy for cool kids”, does not mean it is the benchmark. If these things take off it just might be Apple that has produced a “niche” product.

Which brings me to this tutorial. Tablets have a lot of screen space, which is pretty darn close to the size of a regular sheet of paper kicked out of your laser printer. It makes sense, (and Wired is already showing this off,) to regard print publications as nothing more than pages of “content” and to use the Flash Player to turn a rather passive medium into a rich media experience.

Over the next several months, there will be a number of new Android mobiles and tablets hitting the market this summer. The line up includes Notion Ink’s ADAM, but there are others as well, including the Marvell Moby, WePad and the Dell Mini 5, to mention a few.

Over the course of this two-part series you are going to discover why Flash CS5 had its molecules turned inside out and rearranged with the new XFL format; how InDesign CS5 has suddenly changed from a static layout app to one with a plethora of interactive features and how the new TextLayout Framework in Flash is a lot more than a rather curious addition to the line up. Naturally, we’re going to start assembling the assets in InDesign. By the end of this piece I hope many of you will discover just how "cool" the Interactive features of InDesign really are and, more importantly, why they are there in the first place. Let’s get started:

---

Step 1: Come Up With a Concept

OK. I’m lazy. I let my iPhone handle that one. Brendan Dawes out of MagneticNorth in the U.K. turned me on to a rather interesting iPhone app – addLib – that takes an image you feed it and kicks out some rather interesting variations of how it can be used. Seeing as how I wanted to demo some of the features of InDesign CS5 I thought a trip I made to a small village in China – Huo Guo – would fit the bill and the photo of the old guy peering over the wall at me is one of my favorites from that trip. I fed the image into addLib and I really liked the last treatment.

Based on that design I just knew the tool for the job was Illustrator CS5 and that the imaging was best done in … get set for it … Fireworks CS5.

---

Step 2: Resize the Image

When the image opened the first thing to be done was to get it to a more manageable size. The original image from my Nikon D200 was 2896 by 1944 pixels which wasn’t going to work either in Illustrator CS5 or Fireworks CS5. I selected the image on the Fireworks canvas, selected Modify>Canvas>Image Size and changed the pixel dimensions to those shown in the Figure. With the image resized I clicked the Fit Canvas button in the Properties panel to ensure there was no extra canvas in the final image.

---

Step 3: Color Correction

The image is rather dark and could use a bit of color correction. I selected the image on the Canvas and, in the Properties panel selected Filters >Adjust Colors> Levels. The histogram told me I needed to clip some of the white on the right side of the graph. Moving the White Point, as shown in the figure, brightened up the image. The image was saved as CoverColor.jpg.

Creating a grey scale version was also a snap. With the image selected on the Canvas I selected Filters >Adjust Colors> Hue /Saturation and set the saturation value to -100 which removed the color from the image. This image was then saved as CoverGrey.jpg.

---

Step 4: Resize Images for Slideshow

I thought heaving a photo gallery into InDesign was a no brainer and would demo this feature of the application. Of course 12 images, the same size as the cover image wasn’t going to fly and scaling them, by hand, is not fun.

One of my favorite features of Fireworks CS5 is Batch Processing: File > Batch Process… It’s a very simple workflow. Identify the photos, determine the scaling amount and let Fireworks stick the scaled down versions into a separate folder. This took less than 30 seconds to accomplish.

---

Step 5: Create Cover in Illustrator CS5

The addLib design was remarkably easy to replicate in Illustrator CS5. Using a combination of simple shapes, masks and type I was able to pull this together in under 30 minutes. The major decision involved output format. I went with the ai format because both Flash and InDesign allow me to round trip back to Illustrator to make changes. If this was destined for a web app with a stop in Catalyst or Flex, I would have gone with FXG across the board in Fireworks, Flash and Illustrator.

With the assets assembled it was time to get to work in InDesign.

---

Step 6: Why InDesign CS5?

I though I would take a minute or two to get a bit deeper into this subject before I roll into the project because, quite frankly, like many of you, I saw it as a print layout tool that sat on the tool bench rather than one in my interactive tool box. Still, being a bit of a type junkie, nothing frustrated me more than being able to use fine typography techniques on the print side of the fence while we sort of had to “fake it” on the interactive side. Not to mention that attempting to get a multicolumn layout or grid system to work in Flash was something my graphics colleagues on the print side of the street never failed to mention to me.

InDesign CS5 sort of stops this friendly needling. Among the features of InDesign CS5 that I just dig are:

• The ability to add audio and video to the document.
• The ability to incorporate animation into the document.
• The ability to add interactivity – buttons, navigation elements and so on – to the document.
• Typography is now available thanks to the fact both InDesign and Flash share the new TextLayoutFramework. This is huge.

Make no mistake about it folks. These things are not whizz bang, gratuitous eye candy features added to the app to garner choruses of “Cool” from the Fan Boyz at demos and conferences. These are, as you are about to discover, industrial-grade features that move seamlessly into a SWF or to Flash. In fact, for you codies, you don’t even have to touch Flash or Catalyst. InDesign docs can be output as good old XML.

Having said that, this is an emerging workflow that will, especially for the Flash crew, require extra work on your part. I regard this as a “good thing” because, as you are about to see, kicking out a Flash document from InDesign does not make one a Flash artist. You get the bare bones and if your Flash skills are minimal you are, essentially, dead in the water.

Finally, this is not an InDesign tutorial. It’s purpose is to show you how the Interactive features of InDesign are added to a page and how a doc is output to the SWF and Fla formats.

Let’s get on with it…

---

Step 7: Interactivity

Open InDesign CS5 and select Window > Workspace > Interactive to open the Interactivity panel.

Here, in broad terms, is what each item in the panel does:

• Animation: use this panel to put things in motion. If you are a Flash user, the default settings are the ones used in the Flash Motion Presets panel.
• Timing: This panel is used to determine “when” stuff happens, in what order and for how long.
• Preview: This is a really interesting panel. It builds a SWF inside the panel and allows you to take the project for a test run.
• Media: This panel not only allows you to preview video and audio but to also add it and assign it such properties as poster frames and controllers.
• Object States: Typical buttons have three, maybe four, states. Think of these things as button states on steroids. This panel is ideal for things like the slide show.
• Buttons: This panel allows you to turn anything into a button (think clickable) and then add what happens when the object is clicked.

---

Step 8: Fly in From Top

Now we’re going to apply an animation effect to the caption. Select the object that will animate, open the Animation panel and select the animation from the Preset pop down. When you do that a few things happen:

The motion path, in green, is shown on the page and a preview of the animation is applied to the butterfly in the panel’s Preview window. These Motion Paths can be edited with the Pen Tool and one really neat aspect of this is any Custom Paths you may create in Flash can be used here and vice versa. Use the name area to give the animation a name and select when the event – On Page Load, On Page Click, On Click (Self), On Roll Over (Self) – will occur from the Event(s) pop down.

You also get to choose the duration and how often it occurs and even if the animation is to loop. The Speed pop down is where you get to apply Easing.

The Properties, if you are a Flash designer, look quite familiar. The Animate pop down allows you to determine how the animation works – from or To Current Appearance or To Current Location. And the Animate To area allows you to apply rotation and scaling to the final state of the object in motion.

---

Step 9: Test the Animation

Testing animations or interactivity in previous versions of InDesign was painful. You would create the animation, compile the SWF and leave InDesign to preview your work in the Flash Player. The Preview panel puts all of those steps in one spot.

When you finish with your Animation, simply click the Preview panel button and the panel will appear. It will, at first be blank. This is because InDesign is creating a swf that will play in the panel. When the page appears, click the Play button in the bottom left corner and the caption slides in.

If the panel seems too small, simply drag out a corner to enlarge it the view.

---

Step 10: Create a Slideshow

The 12 images we prepared earlier using Batch processing in Fireworks CS5 can now be brought into the document and used in a slide show. This is a two-step process: Bring in the images and align them on the page and then convert them to a Multi State object. Here’s how:

Select Edit>Place, locate the folder containing the scaled images and, with the Shift key held down, select them all and click OK. You will see a small “gun” containing a thumbnail of an image. Click it and the image in the thumbnail is dropped on to the page and the “gun” shows you the next image in the stack. Roughly move all of the images into where the slides will appear and, with all of the images selected, open the Align panel by pressing the F7 key. Align the images by their top and left edges.

---

Step 11: Convert to Object

Having created the “stack”, open the Object States panel and click the “Convert selection to multi-state object” button – the page with the turned up corner at the bottom of the panel – and all of the images will appear in the panel. Give the object a name and, if you wish, rearrange the images by dragging them, in the panel, to different “layers” in the stack.

---

Step 12: Navigation Buttons

A stack is useless if you don’t put it to work. In this case Forward and Back buttons created in Fireworks CS5 are imported for the task at hand. InDesign, like many of the CS5 apps contains a Library of “pre-rolled” buttons – Window > Sample Buttons – but none fit the design. They were brought in using File>Place and moved into their final positions on the page.

---

Step 13: Adding Button Functionality

To create a button you open the Buttons panel and, with the object selected, click the “Convert Object to a Button” button – it’s right beside the Trash Can on the Buttons panel. When this happens the panel lights up and you can assign the button some properties.

The first thing to be done is to give the button a name. Next, attach an Event to the button. There are six events, two of which are strictly for PDF projects, to choose from. “On Release” is a safe bet. The next step is to assign an Action to an Event. Click the + sign in the actions area and a pop down list will appear. This is a slide show so it makes sense to assign a “Go To Next State” action. The important thing to note here is that Actions are grouped according to final use. In this case we are going to SWF and Flash so the choice will work.

When the Action is selected the Buttons panel will change to ask you which Object is to be controlled by the button. In this case, it will be the Village stack. You can also click the “Stop at Last State” radio button to ensure the user actually stops at the last image in the stack.

Repeat this process for the Back button and test the slide show in the Preview panel.

---

Step 14: Add an Audio Track

Adding an audio track to a page is dead simple. You can either use the File>Place menu or click once on the Media panel and use the Place an audio or video file button – the one in the bottom right corner of the panel – which will open the Place media dialog box. Just keep in mind the only audio format you can use is mp3.

Once the file is imported a small audio container appears on the stage. In many respects this container is similar to how Flash manages audio on the stage. The container can be placed anywhere because it is more of a placeholder than anything else.

The Audio panel lets you test the sound by clicking the Play button and the Options are somewhat self-explanatory. Your best bet, if you are going the interactive route, is to select the first two options. If you don’t your audio file will continue to play even when you leave the page.

---

Step 15: Audio Control Buttons

Simple UX design principles state that if you are playing an audio file, you should give the user the opportunity to kill it. In this case a Pause and a Play button were created in Fireworks CS5 and converted to buttons in InDesign CS5. As soon as you link the button to a source, it recognizes an audio file and you are presented with the audio control options shown in the Figure. One really neat feature of the Buttons panel is the icon in the bottom left corner. Click it and the Preview panel opens to let you determine if the button does what you want it to do.

---

Step 16: Adding Video to the Document

Video – FLV, F4V, MP4 – can be added to InDesign as easily as an audio file and the video properties are set in the media panel. Still there are some aspects of this that you need to know.

Though you are given two playback options, if you are going to give the user a controller, leave them deselected. The Poster option lets you choose a frame from the video or even another image to appear in the document. In this example, I used the scrubber in the panel to identify the frame that will appear in the layout. You can also choose a controller – the SkinOver skins from Flash are your only choices – and whether or not the controller will appear when the cursor rolls over the video on the page. You can also add cue points – InDesign calls them Navigation Points – to the video or they can be added using Adobe Media Encoder CS5.

The other thing you need to know about this video feature, especially if you use video in Flash, is the video needs to be clicked on the stage for it to start playing or to reveal the skin. It might not be a bad idea, if you are going to be outputting only a swf, to add a small caption or icon telling the user to click the image to start video playback.

Finally, use the Preview panel to test the video.

---

Conclusion

In this article I showed you how to use all of the features in InDesign CS5’s Interactive panel. I showed you how to create buttons, add audio and video and how to turn a stack of imported images into a slide show. You were also shown how to use buttons to control audio and how to add a skin to a video.

I also included how many of the assets were created in Fireworks CS5 and Illustrator CS5 and prepared for placement in the InDesign CS5 project.

In the next installment of this series I will walk you through the steps necessary to output an interactive InDesign document for playback in a browser or for further “tweaking” in Flash. Thanks for reading!