InDesign CS4 users were capable of using Flash elements in their design, but the implementation of Flash in InDesign CS4 was very basic and rudimentary. There was little or no support for video, animation, and interactive elements. QuarkXPress 8, on the other hand, can be used as an independent interactive design tool.
With the release of InDesign CS5 Adobe has improved Flash support considerably, giving users the ability to embed video and create animations in InDesign. However, there still is a lot left to be desired, and some of the features are implemented in ways that are inexplicable. As a result, an InDesign CS5 user will not be able to create a fully functional interactive web page from within InDesign —not even a simple static one— without having to edit the page in Dreamweaver CS5 and in Flash Professional CS5 as well.
This is in stark contrast with the implementation of Web page design and development in InDesign’s major competitor, QuarkXPress 8 (from now on, when we write “QuarkXPress” we are referring to version 8.x.x only). Even if QuarkXPress has not been upgraded for over a year now (although it has gained features with each point update), its web and interactive document features are still ahead of the CS5 iteration of InDesign.
This first article in our series gives a rundown of the major features in each application.
InDesign CS5
The main difference between SWF and FLA files are that the former are ready to be viewed and cannot be edited, whereas the latter must be edited in Adobe Flash Professional first before they can be viewed in Adobe Flash Player. Other companies such as Quark are allowed to create and read SWF files but no one apart from Adobe supports the native FLA format which can be opened and edited in Adobe Flash. This is the main restriction that has caused some in the industry to describe Flash as being proprietary and not open and therefore providing Adobe right now with a competitive advantage.
In InDesign CS5, SWF file export can include animation, video, audio, and remote rollovers. In addition, several new options let users control the final SWF file output. To create slideshow-type content, users can export to either SWF or FLA.
When a user exports to SWF, they create an interactive file that’s ready for viewing in Adobe Flash Player or in a web browser. The SWF file can include buttons, page transitions, movies and audio files, animation, and hyperlinks added in InDesign. Adobe itself points out that exporting to SWF is a good way to create an interactive slideshow or a flip book.
When users export their InDesign document to FLA file format, they can open the file in Adobe Flash CS5 Professional to edit the contents. Although Adobe ships its Design Premium Creative Suite bundle with Flash Catalyst, InDesign’s Flash output is not recognised by Catalyst at all. We found this strange and perplexing, especially so as Catalyst does recognise Illustrator and Photoshop files to make them interactive.
Movies and sound clips added to a document can be played when the document is exported to Adobe PDF or SWF, or when the document is exported to XML and the tags are repurposed.
Users can import video files in Flash Video format (.FLV and .F4V), H.264-encoded files (such as MP4), and SWF files. Audio files can be imported in MP3 format.
Media file types such as QuickTime (.MOV), AVI, and MPEG are supported in exported interactive PDF files but for some strange reason not in exported SWF or FLA files.
InDesign CS4 exported to XFL format, of which Adobe now says it offers limited support for rich media content and text handling. Nevertheless, XFL has one distinct advantage: it is an open source XML-based format while FLA is proprietary. InDesign CS5 exports to FLA format only when the file needs further editing —which then will have to be done in Flash Professional. The FLA export options support rich media content and offer ways to handle text.
Print designers commonly create the design elements that are also used in web pages in order to ensure design consistency. It seems however that Adobe considers InDesign CS5 an inferior tool compared to any IDE (Integrated Development Environment) hence the print designers being pushed out of the design process for the Web, very early on.
InDesign CS5 enhancements with regards to Web page export functionality include the ability to match the attributes of InDesign text formatting, preserve local formatting, and control the order of content.
InDesign Tables are now assigned unique IDs, allowing them to be referenced as Spry data sets in Dreamweaver CS5, as well as in other Javascript frameworks, we should imagine.
To repurpose InDesign content for the web, users have several options:
- Export a selection or the entire document to a basic, unformatted HTML document. Users can link to images on a server or create a separate folder for images. They must then use an HTML editor to format the content for the web.
- Copy text or images from the InDesign document and paste it into the HTML editor.
- Export a document or book as a reflowable XHTML-based eBook that is compatible with the EPUB standard.
QuarkXPress
In addition to print and interactive layouts, QuarkXPress 8 supports Web layouts, which users can export to create HTML or XHTML Web pages. We will discuss the web features of QuarkXPress 8 first and the Flash capabilities later as Quark’s approach focuses on a print design to web design workflow, all within QuarkXPress itself.
QuarkXPress offers a set of tools for constructing Web pages, including rollovers, image maps, forms, menus, and CSS styling, as well as more standard Web page components.
To understand how different Quark’s approach is from Adobe’s, it is worthwhile looking at how InDesign’s interface compares to QuarkXPress’. In QuarkXPress, a user creates projects which can have multiple layouts: Print, Web, Interactive, which can be maintained entirely separately or have various levels of synchronization between them e.g. text, images or entire layouts within layouts i.e. Composition Zones.
In InDesign, a user creates a document and can export this document to several output media.
The consequences of this difference of approach are twofold. First of all, QuarkXPress 8 enables users to treat Print, Web and Interactive layouts as equally important sub-projects with the output format playing a subsidiary role.
Secondly, by offering an interface that underlines the equal importance of sub-projects, users can create Web layouts from print layouts by duplicating them, with QuarkXPress automatically managing the conversion.
The resulting Web pages in QuarkXPress can closely resemble the print layout without the user having to make additional adjustments.
Once a Web page has been created by QuarkXPress (with the duplicate command) the page can be further customized within QuarkXPress itself. For example, to change a static, fixed page width to a width that will vary with that of the browser window, the user can easily create a Variable Width Page by checking a box in a dialogue window and entering values for Width (which controls where the vertical guide indicating the end of the page is placed) and Minimum (which controls the minimum allowed width of the page).
When constructing the page, the user must also indicate which text boxes should be resized to fit the browser window. Behind the scenes, QuarkXPress will automatically generate the code necessary to create the page the way the user wants it.
QuarkXPress 8 fully supports CSS (Cascading Style Sheets) to style the Web page. Its CSS support standard makes it possible to create font families that can be associated with text in HTML text boxes.
In addition to importing pictures in a Web layout in all of the formats that are supported in Print layouts, users can also import files in Flash (SWF) format. When exporting a layout containing an imported Flash file, the Flash file is copied to the export location and displays as part of the exported HTML page.
QuarkXPress supports HTML/CSS rollovers. A rollover is a picture in an HTML page that changes when the visitor moves the mouse pointer over it. Rollovers are commonly used as “buttons” that link to a different page or that download a file.
The Web layout system in QuarkXPress 8 offers two types of rollovers:
- A basic rollover that swaps the image when the mouse pointer is over the rollover box.
- A two-position rollover that swaps the image in one or more other boxes when the mouse pointer is over the rollover box.
Furthermore, QuarkXPress’ Web features include the design and coding of HTML forms. Forms can contain text fields, buttons, check boxes, drop-down menus, and lists.
Meta tags are supported by QuarkXPress’ Web layout system. Meta tags are stored in meta tag sets. Users can associate a meta tag set with a Web layout page, and when that page is exported as HTML, the exported page will include all the tags in the set.
Finally, QuarkXPress exports Web pages in three formats. HTML exports the page in HTML 4.0 Transitional format. The XHTML 1.1 option exports the page in XHTML 1.1 format. The XSLT option generates XSL transformations in an XSL file containing XML nodes. These XSL transformations, when applied to XML using an XSLT processor, can produce an HTML file (XHTML 1.1 compliant) representing the XML data in a Web browser window.
Approximately four years before Adobe outfitted InDesign with some basic Flash capabilities, QuarkXPress was capable of Flash output via an XTension. Three years ago, the XTension’s functionality became part of the core application.
The Flash capabilities in QuarkXPress 8 follow the same approach as the Web page functionality: it is a layout (in this case, actually three separate layout types — Presentation, Animation, and Button) within a QuarkXPress project that is regarded as equally important as the two other available layout types.
Adding interactivity to a QuarkXPress layout therefore is quite easy. The user needs to follow three concepts.
- An object is a text box, a picture box, or a line that has been given a name using the Interactive palette. Examples are a Text Box object and an Animation object.
- A user event is something the end user does with the mouse. Examples are Click Down and Mouse Enter.
- An action is what happens when the end user triggers one of an object’s user events. Examples are Play Animation and Display Next Page.
The process of creating an Interactive layout is a little different from the two other layouts because interactive Flash elements are usually not created with the same type of content (especially text) as is the case with Print and Web layout.
Interactive layout therefore focuses more on drawing and defining events or triggers. Users draw objects in the layout using the same QuarkXPress tools and features used in Print layouts, including text and picture boxes, style sheets, etc. Then these objects are selected and made interactive using a dialogue window that contains all the actions, scripts, triggers and events an object can be fitted out with.
As briefly touched upon earlier, there are three types of Interactive layouts:
- Presentation layout: An Interactive layout that can be exported to create an SWF file.
- Button layout: An Interactive layout where a multi-state button is created.
- Image Sequence layout: An Interactive layout where a sequence of images is created —aka flipbook animation— that is playable in an Animation object.
QuarkXPress 8 has a full range of objects for users to work with without touching Flash code. Some of these objects are surprising in a sense that one would not normally expect to find these in a layout program:
- Basic objects.
- Button objects.
- Animation objects
- Video objects (QuarkXPress converts Quicktime (MOV) and AVI into FLV/SWFV).
- SWF objects.
- Text Box objects, including a List object that enables the end user to select each line as a separate item.
- Menu objects, including Menu Bar objects and Pop-Up Menu objects.
- Window objects that can be displayed and hidden in their own windows, such as a dialogue box or palette.
- Button groups, which are grouped sets of On/Off buttons that act as a group of radio buttons.
The Object tab of the Interactive palette is context-aware and changes depending on what kind of object is selected.
QuarkXPress 8 supports two types of animation:
- An interactive object moving along a path.
- An image sequence in a box such as a spinning wheel, a blinking character, a running hourglass.
The two approaches can be combined to create an image sequence in a box that moves along a path.
When users add an image sequence or multi-state button to a Presentation layout, QuarkXPress 8 uses its Composition Zones technology to place a copy of the target Image Sequence layout or Button layout into a box in the Presentation layout.
Like all composition layouts, Image Sequence layouts and Button layouts are synchronized with their corresponding boxes in the Presentation layout. Consequently, any Image Sequence layouts or Button layouts used are displayed in the Shared Content palette, and animations and buttons have distinctive box handles that identify synchronized items.
Composition Zones can be used to embed an Interactive layout in a Web layout, and then export the Web layout to create an HTML page with an embedded SWF presentation.
In essence, QuarkXPress can be used to create complex Web pages with Flash elements that range from simple animations to menus, dialogue windows, multimedia players, multimedia galleries, and even animated text boxes or rabbits popping up out of a hat as shown on their own Flash marketing site (http://www.flash8magic.com).
Last but by no means least, in 2010 QuarkXPress will have Digital Publishing 2.0 capabilities through new functionality that is being added to QuarkXPress. In addition to QuarkXPress’ interactive capabilities, this functionality will enable users to simply add rich media to a print layout using default controls (e.g. for a video player) and export the project to the new BLIO format (based on XPS) that can be read on any BLIO Reader enabled device (see www.blioreader.com).
Second part: Limitations of InDesign CS5
Related:
