Rufus Deuchler | Travelogue

Create an Interactive PDF/Flash Gallery with Adobe InDesign

2009-11-03T12:00:43Z

The goal of this tutorial is to create an interactive Flash gallery using the tools available in Adobe InDesign CS4. What? InDesign? Isn't InDesign for print layout? Well, hmm... no, not only, not any more. What you'll be doing here is to create a Flash image gallery in InDesign to be deployed on a web page. Although this whole procedure also works for creating very cool interactive PDFs (see my example here: ID_PDF_Gallery.pdf [657KB]). Imagine that technique used in a book, or magazine layout!
This idea came to me when I saw the "Show/Hide Buttons" action in the Buttons Panel... Why on earth would you want to hide your buttons? Well, what if the buttons were in fact not buttons?
Very often designers (or their Clients) have more images than will fit into a layout. So here's a quick way to publish them all to an interactive PDF or SWF.

]]> 1. Open the necessary files
To follow this tutorial, you can download the necessary files here: ID_Flash_Gallery.zip [2.8MB]. Save them somewhere on your machine, decompress the ZIP file, and open Adobe Bridge to locate them.
You can also download a PDF of the following procedure here: ID_Flash.pdf [917KB].

Open ParadiseIsland.indd
Locate the image files in Bridge, select them all, and drag and drop them onto the InDesign document. (If you hold down both the Command and Shift key while doing so, you'll be able to place them in a grid. At this point it is important that we see them all, and that they all have the same size.

2. Leveraging the new Buttons Panel

Transform each of your images into a button by applying a [Normal] state from within the Buttons Panel (Window > Interactive > Buttons). Name the buttons: Image1, Image2, Image3, etc...
Select all and copy paste them somewhere else on the page and rename the buttons: ButtonImage1, ButtonImage2, ButtonImage3, etc...
You can now also add cool rollover effects. What I did here is set the [Normal] state of the ButtonImage instances to 50% transparent, and [Rollover] to 100%.
This is a good time to use the Event "On Rollover", so that when your user will move the cursor over the button (with no need to click) the main images will change. Apply this Event to all ButtonImage instances.
For Action choose "Show/Hide Buttons" and for each ButtonImage choose to Show the Image that should be showing, and Hide all others.
Resize the button images to the size need for them to act as buttons.
Now you can enlarge all Image instances and place them so that they exactly overlap each other (the top most image will be the first image your users will see when opening the PDF or the SWF file).

Interesting fact: if you now go check your Links Panel, you'll see that each image is actually being used three times (the large image, the [Normal] state, and the [Rollover] state).

3. Getting to know the Flash export dialog

Choose File > Export and select SWF as your format.
The only thing that we want to be careful about is that "Include Buttons" is selected. Otherwise all of our effort would have been in vain.
If you also select "View SWF after Exporting" your browser will open and show you how your web gallery works.
This is a very simple procedure, which will unleash far more creative designs than the one demonstrated here. Personally, I used this technique to create rollover tool tips in some of my publications where the user would hover over a text and other information would appear in a separate box, which allowed me to put much more information onto the page itself.

Extra tip: if you are designing for the Web in InDesign, be aware that you cannot choose Pixels as Ruler Units, but in InDesign 1 Point (pt) equals 1 Pixel (px).

CSInsider | Design - Adobe Bridge CS4

2009-10-22T15:13:07Z

In this tenth episode of CSInsider|Design, I will show you how to use Bridge as a content management system to help organize and deploy your files.

I always call Adobe Bridge "the control center for all of my assets"; and this is truly it. There I can preview all sorts of files, add metadata, watch movie clips, control image quality and create order out of chaos. Another thing I love about Bridge, is that you can create collections of files in a tidy folder, no matter where the files are on your hard drive. But, there is more, and I just realized I did not talk about it in this episode of CSInsider...

]]> Not only can you create Collections with files you choose to keep in Review Mode (Cmd + B), or files which you drag into a Collection folder, you can also create a search and gather the resulting files into a Collection.

By clicking the "New Smart Collection" button in the Collections Panel, you get this:

This window allows you to search for specific keywords or metadata, automatically gather all matches, and create a collection... Well, if you ask me, that's pretty cool!

John Warnock and Chuck Geschke awarded National Medal of Technology and Innovation

2009-09-18T13:03:06Z

"These scientists, engineers and inventors are national icons, embodying the very best of American ingenuity and inspiring a new generation of thinkers and innovators," President Obama said. "Their extraordinary achievements strengthen our nation every day--not just intellectually and technologically but also economically, by helping create new industries and opportunities that others before them could never have imagined." (Source)

"Dr. John E. Warnock and Dr. Charles M Geschke for their pioneering contributions that spurred the desktop publishing revolution and for changing the way people create and engage with information and entertainment across multiple mediums including print, Web and video." (Source)

Wow! Congratulations!

Creative Suite Live! in Mexico City

2009-09-14T10:35:06Z

On September 28 and 29, Greg Rewis and myself will be talking at the Creative Suite Live! conference in Mexico City. This is the first time for me in Mexico, so I am really excited!

Creative Suite Live! is the most complete conference for designers using and wanting to master the Adobe Creative Suite. Covering sessions from Illustrator to InDesign, Photoshop, Bridge and Acrobat Professional, all the way to Dreamweaver, Flash and Fireworks. Further information in English.

Creative Suite Live! es la conferencia más completa para diseñadores que utilizan y quieren dominar las aplicaciones de Adobe Creative Suite. Con sesiones que cubren desde Illustrator a InDesign, Photoshop, Bridge y Acrobat Professional. Más información en español.

One Time CS4 Event in Zürich

2009-09-14T10:07:51Z

As part of the Adobe Masters Tour 2009 throughout Germany and Austria, together with Greg Rewis and Jason Levine, there will also be a one time special event in Zürich: Adobe Cracks @ Publicis - Friday, September 18 2009 from 11am to 6pm at Theater Stadelhofen.
During three 90 minute sessions we'll be showing how to best leverage the new features of Adobe Creative Suite 4 Master Collection, and how to create content that will be published to various media such as print, web, and video.
Register for the event on Facebook!

Adobe CS4 Tour 2009 (Nordics)

2009-09-14T09:26:23Z

This is going to be so cool! Touring the Nordics with my buddies Jason Levine and Paul Burnett. One of the features of this tour is that, when registering for any of the events, you can vote for the content you'd like to learn about (the image on the right represents the percentages that have been voted for each theme).Here are the final dates and locations:

12/10/09 - Oslo (Klingenberg)
13/10/09 - Göteborg (Bergakungen)
14/10/09 - Malmö (Royal)
15/10/09 - Stockholm (Skandia)
20/10/09 - Helsinki (Tennispalatsii)
21/10/09 - Århus (CinemaXx)
22/10/09 - Kopenhagen (CinemaXx)

Read on for more detailed information in Norwegian, Swedish, Finnish and Danish.

]]> Norway - Velkommen til fire fullstappede timer der du kan være med på å bestemme dagsordenen
Hjertelig velkommen til fire timer fullstappet med inspirasjon, prosjektstudier, tips og triks. Alt sammen med våre "evangelister" Rufus Deuchler, Jason Levine og Paul Burnett, som viser deg hvordan du kan trylle med CS4-programpakkene. De viser også hvordan du lager engasjerende innhold som får fart på forretningene. Dessuten kan du være med på å bestemme innholdet i den siste timen!

Sweden - Välkommen till 4 fullmatade timmar där du påverkar agendan!
Varmt välkommen till 4 fullmatade timmar med inspiration, case, tips och tricks. Allt tillsammans med våra evangelister Rufus Deuchler, Jason Levine och Paul Burnett, som på plats visar hur du kan trolla med CS4 Suiterna. De visar också hur du skapar engagerande innehåll som får fart på affärerna. Dessutom kan du vara med och sätta agendan för den sista timmen!

Finland - Tervetuloa täyteen ladattuun nelituntiseen, jonka ohjelmaan voit itse vaikuttaa!
Lämpimästi tervetuloa inspiraatiolla, asiakascaseillä, vinkeillä ja nikseillä ladattuun nelituntiseen. Paikalla ovat evankelistamme Rufus Deuchler, Jason Levine ja Paul Burnett, jotka näyttävät, miten säväytät CS4:llä. He näyttävät myös, kuinka luodaan vangitsevaa sisältöä, joka vauhdittaa liiketoimintaa. Voit lisäksi vaikuttaa viimeisen tunnin sisältöön!

Denmark - Velkommen til 4 timer, hvor du har rig lejlighed til at påvirke dagsordenen!
Velkommen til 4 timer, der er spækket med inspiration, case, tips og tricks. Alt sammen med vores eksperter Rufus Deuchler, Jason Levine og Paul Burnett, som her viser, hvordan du kan trylle med CS4 Suiterne. De viser også, hvordan du opretter engagerende indhold, der sætter gang i forretningen. Desuden kan du være med til at sætte dagsordenen for den sidste time!

Adobe Masters Tour 2009 (Germany/Austria)

2009-09-02T22:51:40Z

Ah well, it is this time of year again. Mid September I'll be touring Germany and Austria together with my colleagues Greg Rewis and Jason Levine. In almost 6 hours, we'll be showing what's new in Adobe Creative Suite 4 and how to best organize cross-application and cross-media workflows. Thanks to Cancom and Adobe Germany for organizing this free series of events.
Greg and I will most likely be speaking German, and I am sure Jason will be using is "bestest" English.

16/09/09 - Munich (CinemaxX Isartor)
17/09/09 - Hamburg (CinemaxX Dammtor)
22/09/09 - Düsseldorf (UCI Kinowelt Medienhafen)
23/09/09 - Berlin (CineStar CUBIX am Alexanderplatz)
24/09/09 - Wien (Village W3 Cinema Vienna Mitte)

For further information and to register for an event in your city go here.

CSInsider | Design - The Designer to Developer Workflow with XFL

2009-09-01T21:19:10Z

In this ninth episode of CSInsider|Design, I will show how you can leverage your knowledge of InDesign to create designs that will be forwarded to Flash developers for adding advanced interactivity, and animation. Paul Burnett from Flash Downunder will be joining me to show what a developer would then do with the content I was able to export as XFL from InDesign.

This is all very interesting because it allows for creating true Designer to Developer workflows. In the past Designers would design, and print their publications, then developers have to start from scratch and place graphics and text, to approximate the designer's intent.

Enjoy!

10 Years of InDesign

2009-08-30T19:29:57Z

Well, who would have guessed? It's been ten years now, since InDesign 1.0 shipped (read the original press release). InDesign 1 included many groundbreaking features unmatched in page-layout products that were available at the time. Such as:

Multi-line Text Composer
Optical Margin Alignment
Hierarchical Master Pages
Extensive Multi-lingual support
Optical Kerning
High-resolution EPS and PDF display
Multiple Redo & Undo
Zooming from 5% to 4000%

I remember being very excited at that announcement, and could not wait to investigate it. The tag line was: "Page layout and design for the future of professional publishing", now how accurate and forward looking was that?
Sadly, version 1.0 did not answer the immediate needs of my fast paced production environment, so I let it go, and went back back to my usual workflow (and we can all guess what that was).
Just over two years later, on September 24, 2001, Adobe announced InDesign 2.0 (Press Realease), and I got all excited again. So when Adobe Italy started touring the country showcasing it's features in 2002, I took a day off my daily routine to attend one of their events; and this time they had me 100% convinced.
Come on! I mean stuff like:

Transparency (drop shadows, feathering, and opacity settings to objects)
Support of native files and transparency (transparent Photoshop, Illustrator and PDF files)
Table creation features
Long document support
Etc...

I got myself InDesign 2.0, worked on a rather complex project of 300 pages involving maps, transparencies, multiple languages on layers, and so on... I then took it to the printer, and it did print like a charm. A few weeks later, I sold my licenses of Brand X, got Certified (ACE), and never looked back.
Thank you InDesign, and Happy Birthday, or would one call this an Anniversary? How much you have grown, and how much my life has changed thanks to you.

Feel free to share your experiences of InDesign here.

CSInsider | Design - Conditional Text and Smart Text Reflow in InDesign CS4

2009-07-31T09:22:12Z

In this Eighth episode of CSInsider|Design, I will show how you can leverage the power of Conditional Text and Smart Text Reflow in InDesign CS4 to create modular layouts. For example what if I need text to change in certain situations, like prices for different currencies? What if my document needs to be flexible enough to adapt to more or less pages? Well, all of this is possible with these two very cool features.

Enjoy!

3D in Flash CS4 Professional, a breeze!

2009-07-29T12:34:44Z

I have just come across a new extension for Flash CS4 that allows to import of 3D files to be animated (3DS or FL3D). It literally took minutes to understand, and before I knew it, I was able to animate a 3D object and create a SWF. Remember that I am a designer, and don't know the last thing about code. Simply by using the new Motion Tween feature, or the provided behaviors you can interact directly with the object itself.
Another awesome point is that the guys at Revolver have created an AIR application that allows to convert and import a 3DS file (3D Studio Max) directly into the Library Panel in Flash. Oh joy!

This extension, called FreeSpin3D for Adobe Flash CS4, is a leap forward for interactive designers, eliminating lengthy development processes by enabling the display and management of 3D objects within the Adobe Flash workspace as Flash Movie Clip objects. The result is a superior workflow, minimal learning curve, low file sizes and extremely fast creation of interactive 3D elements. FreeSpin3D is an Adobe Flash Extension that is installed in seconds using the Adobe Flash Extension Manager.

Features of FreeSpin3D for Adobe Flash CS4 include:

Native 3D geometric shape modeling and texturing from the Control Panel.
Predefined and customizable interactive 3D behavior/physics libraries.
Improved usability and updated user interface.
Simplified 3D animation using Adobe Flash CS4's Motion Tween functionality.
New 3D optimization presets in the model conversion engine.
Direct 3D model import through the FreeSpin3D control panel.
Vastly improved performance with a higher polygon count.

Revolver offers a 15-day free trial of the CS3 and CS4 versions of FreeSpin3D at www.freespin3d.com. Make sure to give it a try!

Cross-Hatch Drawing with Adobe Illustrator

2009-07-24T14:21:01Z

I just stumbled across Saurabh's great tutorial on "How to Convert a Photograph into Abstract Line Art" over at VectorTuts. Quite a nice effect there, but it got me thinking about the fact that there must be an easier way rather than duplicating paths and manually resizing each line to match the underlying image. Here I will show you how you can transform any image into a cross-hatch drawing in minutes.

Step 1
Create a new document and place the image you want to transform into a cross-hatch drawing (File>Place, or drag and drop from Adobe Bridge).

]]> Step 2
Select the placed image and choose Object > Live Trace > Tracing Options... I prefer opening this window because it allows me to make changes and see them applied immediately (provided that the "Preview" check box is selected).
Feel free to try out your own options, or copy those shown in the screen shot. Changing the "Blur" options makes the trace smoother. Commit by pressing the Trace button.

Step 3
With the resulting vector art selected choose Object > Live Trace > Expand. Because now we need to access the newly created paths.

Step 4
Now you could create your own Patter Swatches (see below for links on how to that) or simply open one of the many, many libraries already available in Adobe Illustrator. I chose: Window > Swatch Libraries > Patterns > Basic Graphics > Basic Graphics_Lines
That's a pretty good collection of line patterns. If you want to see how one is made, simply drag it out of the Swatches Panel onto the Art Board.
(From the Adobe Illustrator CS4 Online Help: Create pattern swatches, Guidelines for constructing pattern tiles).

Step 5
The magic of the Appearance Panel is that you can apply multiple fills, strokes, and even effects to any selected vector shape. And this is just what I'll use it for. Select any tone with the direct selection tool (the white arrow pointer) in your traced image and choose Select > Same > Fill & Stroke and then click on any pattern in the Swatches Panel (or the secondary Swatches panel which was opened from the Swatch Libraries). Then, within the Appearance Panel, click on the "Add New Fill" button, and choose another pattern. You will see that the two fills now overlap.

Miscellaneous tips
For a more painterly effect select any fill and apply an effect such as the "Roughen" effect. Also, you can easily control how many lines you want in your drawing just by tweaking the Scaling Options (double-click on the Scale tool). Try scaling your illustration with the Patterns Option not selected, until you have exactly what you need; then check the Patterns Option and scale the illustration back down to the size you need it. Check out my original Adobe Illustrator file [Zip compressed, 1.1 MB].

You can do this type of illustration with any kind of pattern! Imagine diagonal lines, dots, stars, triangles, colors, *whatever*. Hmm... getting carried away here ;-)

Adobecadabra!

Adobe MAX 2009 in Los Angeles - October 4-7 2009

2009-07-20T16:40:20Z

Here are sessions I will be doing at MAX this year, but there are many more for you to check out. Historically MAX has always been an event for developers, but in the past few years we've started adding content for designers as well, going into the depth of our creative solutions (read Adobe Master Collection) adding content around designing for Print, Web, Interactivity, and Video. Well then, in a reality where Designers and Developers increasingly collaborate (or should be), it is necessary, if not critical, to mix and match both worlds and discover what each can do to accelerate business through alliance.

InDesign CS4 In Depth
Leave my hands-on lab with the power to harness InDesign for both print and digital publishing projects. Whether you're a novice or an intermediate InDesign user, this lab will walk you through creating and publishing a document from start to finish. Learn how to set up a new document, import text and graphics, create styled tables, keep track of links, apply creative effects to your design, preflight using custom profiles, and ultimately publish your document for print or the web. This comprehensive session will include tips and tricks to help you deliver documents in less time, with fewer clicks. [Skill: General Audience; When: Monday, October 5th at 5pm, and Tuesday, October 6th at 8:30am]

]]> Using Your Skills in Photoshop and Illustrator to Create Content for Flash Player
In this hands-on lab you'll learn how to take the skills you already have in Photoshop, Illustrator, and InDesign to quickly create content that can be viewed with Flash Player. Discover many new techniques that don't involve code and that allow you to add unique, visually interesting elements to your online projects. For example, learn how to create an animated marquee rather than just a static visual. [Skill: Advanced; When: Tuesday, October 6th at 1:00pm, Wednesday, October 7th at 9am and at 1:30pm]

Creative Suite 4 Evangelists' Shootout
Join in the fun for one of the most entertaining hours at MAX. This session pits the worldwide evangelists for Creative Suite (me, Greg Rewis, Jason Levine, and Paul Burnett) against each other in a creative "cage match". From Flash to Dreamweaver, After Effects to Encore, InDesign to Photoshop, there's no telling what amazing tips, tricks, and inspiring techniques these folks will share with you -- all in an effort to out-do each other! Your votes will determine the winner. [Skill: General Audience; When: Monday, October 5th at 2pm, and Wednesday, October 7th at 11am]

CSInsider | Design - The improved Links Panel in InDesign CS4

2009-07-20T12:08:15Z

In this seventh episode of CSInsider|Design, I go through the improvements of the Links panel in InDesign CS4. Working with InDesign has much to do with linking to external files (Illustrator files, Photoshop files, etc...) that are being placed into the document itself. In this new version it has become easier to view your links and see important information about them; information such as the color space, effective and original PPI, scaling ratio, where they are located, and so much more. One feature I particularly like is that when a file is linked to more than once in my layout, these links get grouped together in the Links panel so as not to clutter it visually, also, each link has a hyperlink that lets you navigate to where the link is being used in your file. So much easier!

Enjoy!

Heads up: Acrobat.com webinar

2009-06-24T16:02:47Z

Meet Erik Larson the visionary leader behind Acrobat.com. Erik will share how Acrobat.com provides a fundamentally different and better way to work through stories and real-world examples. Come hear about the future of Acrobat.com and the vision behind the product. This will be an interactive session; Bring your questions and thoughts.

Date: Wednesday, June 24, 2009, 12-1pm PDT
Meeting URL: http://my.adobe.acrobat.com/comseminars
No registration is required. Just click on the URL above or enter it into your browser.

Make sure to also read my articles about Acrobat.com: