By joseph root

Some time ago, Quark released a new QuarkXTensions™ called Quark Interactive Designer and recently began bundling the product in the new premium pack. Quark Interactive Designer, for QuarkXPress 7.02 or higher, takes QuarkXPress layouts and converts them into real Macromedia® Flash®!

There may be several thoughts running through your head right now: It's going to be hard to learn a whole new application, or making Flash requires programming, or how can QuarkXPress make real Flash files?

Well, I had my reservations too — especially given that I've been using Macromedia Flash to create Flash content for many years. To make noteworthy Flash files, you have to get pretty deep into the application. For a QuarkXPress user, that could mean acquiring a whole new skill set and language. You'll be introduced to some new terms such as timelines, and you'll probably need some light-programming expertise. If you have the time and the energy, Flash is a wonderful thing.

Sterling Ledet offers training on a variety of applications such as Photoshop, Illustrator, and QuarkXPress. Click here for info.

Most days though — as designers — we don't need the entirety of the Flash universe. Typically, we aren't building high-end, online, interactive programs. Usually, we are repurposing our print designs or designing new work for both print and web. That's why Quark now bundles the product with the core application. Quark Interactive Designer is a way to take your QuarkXPress print projects to the multimedia format without having to learn a whole new application, language, or hardcore scripting.

What that doesn't mean, however, is that Quark Interactive Designer magically turns layouts into Flash — there will be some user intervention required. To get you started, this article is comprised of six short exercises that provide some of the basic building blocks necessary to create real Flash — for nearly any purpose — directly from Quark Interactive Designer.

In this article we will start with the basics for:

• Creating a new interactive layout
• Making things move based on user action
• Previewing an interactive layout
• Animation on a path
• Making things move based on a script
• Export as SWF

Exercise 1: Creating an Interactive Layout

I am assuming here that you have already installed Quark Interactive Designer (QuID) and that you have used QuarkXPress a bit. That said, let's start from scratch by launching QuarkXPress 7 and choosing file > new > project. This will prompt the new project dialogue box shown in figure 1. Here are the set up basics.

As you can see, I named the layout My First Interactive Layout. We must first define this as an interactive layout. Look at the setting layout type. If you have properly installed QuID, this drop-down menu will have an option titled interactive.

Once you choose the interactive option for layout type, the rest of this dialogue box will change. Instead of prompting for print options, interactive options are listed. Set up your new project dialogue box just as it is shown in figure 1. While you are doing that, I'll explain what each of these options is for. Once complete, hit the ok button.

Figure 1 Starting a new interactive design from QuarkXPress. Make sure that layout type is set to interactive.

Interactive Type: The available options here are presentation, image sequence, or button.

Presentation: This is the option that you will use most of the time. Think of it as the primary landscape where your interactive designs take shape. The presentation layout is to interactive as page is to print design.

Image sequence: This is a special type of layout where interactive designer treats each page as a frame in the animation. When you need frame-by-frame design, this option is a great way to do it.

Button: This is a special type of layout, much like an image sequence, but in this case each page has a special behavior. A simple button layout, for example, is how you could create a multi-state rollover button.

Frame rate: The number of frames that will play in one second. 30 frames is plenty in most cases, but does depend on the type of motion you incorporate. For the sake of getting started, let's leave the default of 30.

Dimensions: This is the canvas size, or the actual page size of the animation. The thing to keep in mind here, especially if you decide to put your animation on the web, is the screen size of your audience. Some people still use 800 X 600, but many have gone to 1024 X 768 or higher.

BG Color: This is the background color of the canvas.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | PDF Version