Adobe Education Technologies

XFL,Adobe InDesign CS4,Adobe Flash CS4 Professional

In a previous Adobe Education Technologies blog article we examined how to use Adobe InDesign CS4 to create a visually rich layout, add interactivity with hyperlinks, buttons, and page transitions, and then export to SWF. We were able to do all of this without using Adobe Flash Professional and Actionscript programming. The downside of this direct-to-SWF export is that there isn't an easy way to edit the SWF file should we want to further modify it.

Now, Adobe InDesign CS4 allows designers to create multi-page layouts and then export to the new XFL (XML for Flash) file format. The XFL file can be opened directly in Adobe Flash CS4 Professional preserving layout and typographic fidelity. Then developers can enhance the file with animation, interactivity, and video. Let's take a look at the workflow:

We start in Adobe InDesign CS4. In this example we have a 9 page document which is purposely built for viewing on screen with its landscape orientation. When you create a new document using Adobe InDesign, there are a list of document sizes which match up with standard monitor/browser displays - like 1024 x 768, 800 x 600, etc.

Once we are done with our design, we would choose File > Export and select XFL from the file format list. After defining a name and location, we click Save which would then open the Export to Adobe Flash CS4 Professional (XFL) dialog box.

From here we can choose to resize the the dimensions of our overall design as well as define which pages to export. By default, Rasterize Pages and Flatten Transparency checkboxes are deselected to ensure the XFL file's maximum editabilty. Finally, we can keep our text editable by selecting InDesign Text to Flash Text. Other options in the Text list include InDesign Text to Vector Paths (converting text to editable outlines) and InDesign Text to Raster Paths (converting the text into bitmaps).

When we click OK, the file is saved to our computer. We then launch Adobe Flash CS4 Professional and open the XFL file. Each Adobe InDesign page is converted to a movie clip symbol and represented sequentially on the timeline as keyframes (black dots). To work on a specific page, drag the CTI on the timeline to the appropriate keyframe and then double-click the page on the stage with the selection tool to enter into symbol editing mode.

At this point we will be able to select page elements to reposition, animate, delete, etc. Also, if we had chosen InDesign Text to Flash Text from our XFL export options, the text will be editable as demonstrated below:

There is a lot more that we can do to this file using the Adobe Flash interface or with Actionscript. To see examples of further Flash development, check out Paul Burnett's video tutorial on Adobe TV.

Posted by Patrick Koster at 5:21 PM | Permalink | Comments (2)

While there are many new outstanding features in Flash CS4 that are cool and flashy (e.g. Object-based animation model, 3D transformations, Inverse kinematics with the Bones tool, Adobe Media Encoder with H.264 support, and much more) don’t overlook a very simple feature that will save you a significant amount of time during the animation process: the Motion Presets panel.

The Motion Presets panel allows you to save as a preset your animation and apply it to an object on the Stage. Additionally, we’ve provided a library of prebuilt animations that you can preview before applying.

You can easily define a motion preset by simply right-clicking on any object that has a tween applied to it, and choose Save As Motion Preset. To use a motion preset, simply select any symbol on the stage, choose a preset from the Motion Presets panel, and click Apply.

I like to create complex Flash animations that involve numerous layers and staggered timelines. Having the ability in Flash CS4 to quickly apply a motion preset to multiple layers increases my productivity significantly.

Here are the steps I use when applying a motion preset to multiple layers:

Step One: Select the layer that has the motion that you’d like to create a preset from
(View image) and from the Motion Presets panel (Window>Motion Presets) click the Save selection as preset icon (View image). Name your preset.

Step Two: Select the layers that you’d like to apply a preset to (View image) (Shift-Click to select a range of layers, Control/Command-click to cherry-pick a non-contiguous selection of layers). Select the preset and click the Apply button (View image).

Here's what the final step should look like: (View image).

Next week I’ll discuss distributing motion presets and creating a preview for a custom preset.

Cheers!
Rick Miller

Posted by Rick Miller at 8:00 PM | Permalink | Comments (4)

When it comes to creating and sharing your personal or professional digital photo creations with the world there is no better tool or place to do so than with an Adobe tool or Adobe web based service. In this post on the Adobe Education Technologies Blog I'll cover some of our easy to use tools to get you started!

In fact, there is no shortage of creating professional looking and unique web and even Acrobat PDF based photo galleries either: Adobe Bridge, Dreamweaver, Photoshop (with an optional plug -in), Photoshop Elements 7, Lightroom, Flash (with over seventy examples on the Adobe Flash Exchange), and Adobe's terrific new web based service, Photoshop.com (formally PhotoExpress.com) all have great built-in or optional web/photo galleries that are super easy to create and share with your world.

Each of the tools mentioned above outputs to the web in some fashion. Of note Photoshop Elements 7 even has an album template that shows where photos were taken on Yahoo Maps which includes multiple thumbnails of your pictures on the maps.

New kid on the block Photoshop.com (www.Photoshop.com) will even upload the images you take on popular cell phones to Photoshop.com in just under thirty seconds. Photoshop.com also contains a slew of cool and easy to use image editing tools too.

Adobe Bridge's unique “Output to PDF" even lets you share your photo album creations within an Acrobat PDF which can be viewed with the free Acrobat Reader. You can even add a watermark, password to protect your PDF photo album to open it, or allow printing or not.

For the most part all of the tools above contain built in templates, styles, gallery titles, optional captions, customizable color schemes, appearances and sizes of thumbnails, slide durations, transitions and effects for slide shows. A few allow the inclusion of Meta data (such as adding a copyright notice) and export to either HTML, Flash or even as an Acrobat PDF. You can save your albums directly to disk and some tools allow uploading to your very own web server; all you need is your FTP server name, User Name and Password.

Do I have a personal favorite? For years I have loved Dreamweaver's Create Web Photo Album. It has always amazed me that Dreamweaver (working in conjunction with Fireworks) can create all this HTML code, navigation, links, image thumbnails and full size images in less than a minute! Lately I'm really enjoying Bridge's easy to use Output to Web or Acrobat PDF feature. I've also become a big fan of Photoshop.com and its many cool features. Frankly I'd be hard pressed to pick just one!

Give these tools a test drive if you can and let me know here on the Adobe Education Technologies Blog if you favor one over any of the others and why. I'll be happy to post your comments here on the blog for any good input or critiques into our Photo/Web Gallery creation tools!

Warmest,

Richard John Jenkins

Posted by Richard John Jenkins at 5:10 PM | Permalink | Comments (1)

With each new release of Adobe Creative Suite there are features so fantastic that they warrant special mention on the Adobe Education Technologies blog. For this article I would like to focus on Adobe InDesign CS4 and its ability to quickly create and export interactive Flash (SWF) files.

In case you aren't familiar with Adobe InDesign, it is the leading page layout application enabling creative freedom along with precise control over graphics, typography, color, transparency, effects, and placed images. Though Adobe InDesign provides direct-to-print capabilities, many have used it to create PDF files which capture all design elements and can be shared and viewed with the free Adobe Reader. What has been missing was an easy way to create rich interactive content that could be viewed with the Adobe Flash Player. Click this link to view an example of what we can now build with Adobe InDesign CS4 (at 2MB it takes a few seconds to load, but is worth the wait - move your cursor over one of the page corners, click, and drag to turn the page): http://education.acrobat.com/idcs4toswf/

Let's examine how to create this Flash file!

First, we would build our document (a brochure, newsletter, magazine, etc.). In the example above I am using a multi-page document intended for print which I also wanted to provide as a lightweight preview on my web site. If you are creating a document solely for viewing on the web, then I would recommend a page size and orientation better suited for viewing with a monitor.

Next, I created navigation graphics in Adobe InDesign (red triangles) and placed them at the bottom middle of each spread. If you are using master pages, it would be quicker to add them there. I then converted these graphics into buttons by right-clicking (Windows) or Ctrl-clicking (Mac) to bring up the context menu and chose Interactive > Convert to Button.

I can now use the Buttons panel to define what action I want the buttons to perform. I selected Go to Previous Page for the left-facing triangle and Go To Next Page for the right-facing triangle.

If I want an image or a selection of text to take the viewer to a URL, to create an email, or to jump elsewhere in the file, I can use the Hyperlinks panel. I set text in the caption on page 8 to go to a URL.

I added a little pizzazz by applying Page Turn transitions to all pages in the document. Notice that there are many more page transitions to choose from and these can be used for both PDF and Flash (SWF) export.

  

Lastly, I chose File > Export and selected SWF from the list of output options. A dialog box will open allowing me to define the size and quality of the Flash file along with other settings.

Posted by Patrick Koster at 1:49 PM | Permalink | Comments (3)

Have you ever wanted to create a custom loader screen for an Adobe Presenter project? You can and it's well-documented in the Adobe Presenter online help. However, there is a subtle typo in the documentation that we here at the Adobe Education Technologies blog read about over at the forum on the Acrobat Users web site, and we wanted to share it with you. Read on. . .

The help documentation states that
In the <language id=”en”> section, add the line <uitext name=”ADOBE_PRESENTER” value=”Your_Text”/>, substituting the text you want for “Your_Text.”

Note that the help documentation uses the special open(“) and close(”) quote characters. However if these characters are copy-pasted into the xml file - Presenter will fail to parse it.

Solution - Use the simple double quote character " " (ASCII - 0x22) by manually typing it in.

Posted by Timothy Plumer Jr at 5:56 AM | Permalink