By Cyndie Shaffstall

If you are reading this, you are probably a designer or production person. You probably create stunning brochures, annual reports, or maybe in-house promotional products — but someone is confused. Maybe it's you. Why is it that your boss (AKA, the customer) thinks you can just whip up some ultra-cool, animated creation that actually moves the customer to click here?

Whether you are a die-hard InDesign® or QuarkXPress® fan, you probably have a box of QuarkXPress 3 or 4 being used as a bookend on some long-forgotten software-closet shelf. You're probably thinking that it makes a perfect bookend, but here's why — whether you use InDesign, Flash®, or QuarkXPress — you should be dusting it off.

Quick links:

• Exercise 1: Getting your animations off the ground
• Exercise 2: Making an event of it
• Exercise 3: Adding in automation
• Exercise 4: Creating an image sequence layout
• Exercise 5: Creating a multi-state button

Author's note: Every animation in this article was created entirely in QuarkXPress. Some of the images were altered in Photoshop, but that is the extent to which I used other applications.

Let's do a bit of math. I just checked MacMall® and Adobe® Flash is going for about $675 and an upgrade for just a hair under 200 bucks. A three-day class I found online is about $1000. Throw in the couple of books you'd buy and the templates you might download and you can get started animating ads and interactive projects for something less than $2,000 — sometime after you've taken the course.

Let's say that you used have used QuarkXPress for five years; even if you've switched, you still have all that experience stored up and if you're still using it, you probably have 10 or more years' at it. An upgrade to QuarkXPress 8 from 3, 4, 5, 6, or 7 is $299, and you don't need any training, any books, any templates, or any downtime for learning. You may have added InDesign and Flash skills to your repertoire, but you haven't forgotten how to use QuarkXPress.

What's the answer? Spend $2K so that you can get up and running in Flash or spend $299 to upgrade your big box of an early version of QuarkXPress and get started right now.

If you've already upgraded to QuarkXPress 8, you're loaded and ready for bear. Let's get started.

Figure 1 Click on this image. I created this animation as my second project in QuarkXPress 8's interactive layout. It's not the most glamorous example, but it does include the basic components of an animation: layers, objects. events, and scripts. Don't be put off, I wrote not one single line of code, no timelines, and have just barely enough Flash knowledge to launch the application on a dare.

 

Using layouts

As simplistic as the project shown in figure 1 is, it did take me a couple of hours. By the time I was done with this article, I could have cranked it out in about 30 mintues and that includes the time I spent in Photoshop.

The project would have been far easier, had I actually been working with a well-conceived plan. As it was, I drew boxes and added events for quite awhile — just to get a sense for how things worked.

When you first launch QuarkXPress 8, you have to define a project. Documents are called projects in QuarkXPress 8 because they are actually containers — containers for layouts (new feature release in QuarkXPress 6.5). Now, with QuarkXPress 8, layouts can be print, web, or interactive. You can have lots of layouts in a single project and the layouts can be all the same type, or a mix of the different types.

If you create an interactive layout, there are three different types from which to choose:

• Presentation: a layout that you can export as a Flash SWF animation.
• Button: a multi-state button that can start and stop your animation, for instance.
• Image sequence: a sequence of images that when played present an animation.

If you want to create, for instance, a balloon that floats to the sky, this is a presentation. If you want to create a sequence of images in a box, for instance blinking shapes or a rolling ball, you would create a series of pages where each page represents a frame in the animation. If you want to create a button or a multi-state button (as an example, think about a menu along the top of a web page that when clicked, the menu option turns grey), then you would create a button layout. You can combine these layout types.

In addition to being able to combine the different types of interactive layouts, you could also create a print or web layout and duplicate it for use as an interactive layout. You could, for instance, create an ad campaign in a print layout, duplicate the layout for posting as HTML, and then duplicate the layout to use for interactive (Flash) use. Since all three of the campaign components use the same assets, duplicating a finished layout of one type and resizing or repurposing the content is a wonderful shortcut.

Exercise 1: Getting your animations off the ground

Here's a quick run down of my prep work:

• I started at BigStockPhoto.com (where I always start) and grabbed a green balloon and the field and sky image.
• In Photoshop, I used hue and saturation to save the balloon in six different shades. I also flipped horizontally and added a bit of rotation to a couple of them.
• I added text to each balloon with the text tool, rasterized the text, then used a warp transform to simulate wrapping the text around the balloon. (There's probably a simpler way, but I'm not particularly advanced in Photoshop skills.)
• I saved all of the images as native, layered PSD files (because QuarkXPress 8 supports native PSD).

Had I actually had that project plan about now, I would have saved one PSD file with layers and used the PSD Import palette to turn off and on the layers as needed...

Next

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16