If it sounds a bit like magic, well, it is.
There are, however a few tips to make the process run a little more smoothly.

Install the FXG Plugin for Photoshop
The FXG Plugin for Photoshop allows you to round-trip your design between Flash Catalyst and Photoshop should you need to change the photo used in a button, modify text or change the color of a design element. You’ll need to download and install this plugin to ensure the trip between Flash Catalyst and Photoshop is a smooth one.

Simplify Your Designs
There are a few areas where Flash Catalyst fails when importing your layered Photoshop document. Layer Effects, Smart Objects and text using non-Web standard fonts are a few examples. I recommend saving a simplified, second copy of your Photoshop document for importing into Flash Catalyst.

You can simplify the layers in your design manually, or, use the Simplify Layers for FXG script found in the File>Scripts>Simplify Layers for FXG menu. The script will automatically sort through your document’s layers, removing anything that could cause problems importing into Flash Catalyst.

Simply save your color-corrected video files as layered .PSDs and open them into the Adobe Media Encoder queue. Here, you can batch encode your videos and be able to work in Photoshop.

Note: The source video files are linked to by the layered .PSD document (just like your NLE). In Photoshop, if you attempt to open a file and Photoshop cannot find the source video, it will give you a warning. In Adobe Media Encoder, that warning doesn’t exist. Instead of getting a completed video, you’ll have a full-length video generated from the video thumbnail frame.

So, the moral of the story is . . . Make sure the hard drives with your source videos are available when using this method; otherwise, you may spend time rendering videos that are useless in your workflow.

1) Open your video clip into Photoshop Extended (CS3 & later) and open the Animation panel (Window>Animation).

2) Adjust the Work area start and end to trim any extraneous frames from the beginning or end of the clip. Although this step isn’t strictly necessary, it will save you processing time.

3) From the Animation flyout menu, select Document Settings and set your frame rate to 1 frame per second.

4) Return to the Animation flyout menu and select Flatten Frames to Layers. This creates a separate layer for each frame in your video clip.

5) In the Layers panel, select the layers by clicking on the top layer in the stack and Shift-clicking to select the last layer. (Ignore the video layer at the bottom of the stack).

6) Align the images in the panorama using the Edit>Auto Align Layers command. The Auto alignment option works well for most images. If you’ve created a 360-degree panorama, be sure to select the Spherical option.

Note: Depending upon the speed of your computer and the number of images in your panorama, this process can take a long time. If it’s taking exceptionally long, make sure you’ve dropped your frame rate from 30 fps to 1 fps (step 3) and have trimmed the ends of your project (Step 2).

7) To blend the images together, either flatten the document or select Edit>Auto-Blend Layers. When using the Auto-Blend Layers commend be sure the Panorama option is checked.

You may also be surprised to learn that 30 days was not nearly enough time to cover all the applications in CS5. Soundbooth, Encore, Contribute, and OnLocation received nary a mention, while other top features in Photoshop like repousee and puppet warp. Hopefully we can address those over the summer.








Looking forward
As I compare the state of visual communication (photography, design, technology) today to the launch of CS4 just 18 months ago, much has changed. Obviously, the economy has negatively impacted the publishing industry, but looking longer-term, I see a renewed interest in long-form journalism, exciting new methods of publishing photos and videos and a willingness from the publishing industry to try new things.

On the technology side, I see two main trends, simplification and convergence—they are emerging. Software tools are becoming more sophisticated and new improvements aim to simplify the experience rather than add new capabilities. The Code Snippets in Flash, Animation features in InDesign and CMS integration in Dreamweaver are examples of this trend. Outside the Creative Suite, successes like WordPress for inexpensive blog and site creation, Sorenson 360 and Ooyala make it simple and affordable to publish high-quality video content, and the iPad, whose instruction manual is really no more than one business-card sized sheet of paper showing the On/Off and Home buttons.

This trend toward simplification is a double-edged sword. Some professionals built their business on things being hard to learn, with a technical skill being the primary divider between amateur and professional. As these barriers are eliminated, these professionals will have to adapt or suffer as their market disappears. For professionals who focus on providing the creative process, the imagination that fuels business growth, these new technological tools amplify these individual’s ability to serve their clients. And for amateurs, being able to do more with less expensive tools in a shorter period of time will be a boon for them.

The second trend, convergence, is embodied in the hybrid SLR camera and the iPad. Hybrid SLRs allow photographers and videographers to use one tool that can effectively perform two jobs. These cameras have gone from clunky to quite mature in a remarkably short period of time. So much so, that the season finale of House M.D. was shot on hybrid SLRs, less than two years after the technology was first introduced.

The iPad is a convergence technology in that it wraps together the best features for consuming content and Web browsing, into a simple, booklike form factor. Although today, it is a bit of a platypus when compared to laptops (keyboard is too small) or printed books (battery life doesn’t compare), I suspect that the iPad, and devices like it will increasingly displace these other technologies.

What I’ve found most remarkable about writing this series is how well Adobe has anticipated these trends and is providing tools to accommodate this evolution. Aside from the Flash vs. HTML5 episode, most of the technologies I’ve covered in this series address convergence, interoperability and simplification. As creative professionals are asked to do more and create for new mediums, it helps to have tools designed by those who are anticipating the steps and helping ease the way.

Well, SiteCatalyst NetAverages is just that, data aggregated from Omniture’s SiteCatalyst customers. As part of the CS Live suite of online tools, Omniture, now an Adobe company, provides a peek onto the dashboard of site analytics data to help users of Creative Suite software make better decisions about their Web sites. Now, as I’m planning my mobile site, I can dive into the Mobile statistics, select Screen Resolution and learn that more than half of all smartphone visitors are using a 320×480 pixel display. Bingo! Data I can use to make educated decisions.

With SiteCatalyst NetAverages, you can look at usage trends and key metrics without having to gather or sift through statistical data. This is a useful supplement to your own site analytics. By comparing NetAverages to Google Analytics for your site, you can begin to see how your site visitors compare to Web users as a whole and you can make business decisions based on this information. For example, looking at the mobile statistics for one of our consulting clients revealed that 90% of mobile visitors are using the Apple mobile platform. This is much higher than the Web average of 43% as reported by NetAverages and confirms that we need to be careful to test any site changes on both mobile and desktop versions of Safari since they are such a large portion of our audience. We may also pair this analytical data with demographic data from other sources to begin to paint a snapshot of our client’s site visitor’s likes and dislikes and can begin to tailor the design, colors, type and photos to better meet our client’s needs.

As you can see, information is powerful and as a part of the CS Live services, SiteCatalyst NetAverages is a valuable tool for making informed business decisions about the Web.

This may be the bridge that many print designers are looking for to begin developing iPad- or tablet-based magazine layouts and designs as it allows for fine-grained control over vector and bitmap images. Also, positioning elements feels familiar to InDesign or Photoshop, rather than specifying a layout using tags in Dreamweaver.

To help us view Web sites from a PC perspective, Adobe BrowserLab allows you to preview the appearance of your Web pages on a number of different browsers quickly and easily. To do so, you need to first register for and login to Adobe CS Live, a collection of online services that extend the functionality of Creative Suite applications. Your purchase of the Creative Suite provides one year of free access to the CS Live Services. Adobe has not yet provided estimated costs for the CS Live services beyond the current free year’s subscription.

After logging in, you can preview Web pages through two methods—use the Dreamweaver Plugin or the browser, both display the page within the Adobe BrowserLab Web page.

Along the left column, the black drop-down menu immediately below the View button provides access to the list of supported browsers. Clicking on any of the browsers previews your current Web page within the designated browser configuration.

The View menu allows you to choose between three different preview configurations, 1-up, 2-up or Onion Skin, which overlays two previews of the Web page to detect shifts in the positioning of elements within a page. This is my favorite view as I can easily see the platform-specific substitution of fonts and the change in layout that occurs as a result.

Of course, desktop Web browsers aren’t the only screens you need to consider for compatibility. The rise in popularity of the iPhone, Droid and other smartphones are finally bringing the US mobile internet audience in line with the rest of the world. Adobe’s Device Central, bundled with Adobe Photoshop, Illustrator, Flash, Dreamweaver, Premiere Pro, After Effects and Fireworks CS5, allows you to preview graphics on a number of mobile devices or create new documents based on common screen sizes.

Noticeably absent from the Device Central test devices is the Apple iPhone and iPad. Should you need to test your site on these devices, you’re best served by using the iPhone/iPad simulator developed by Apple and distributed as part of the iPhone Developer program.

Each of these three testing applications can be used in much greater depth than can be discussed in this short post, but my hope is you at least have an idea of how you can begin testing your online creations on a number of different devices and begin developing a workflow to troubleshoot browser/device inconsistencies and begin developing content optimized to reach both desktop and mobile browsers.

The biggest problem with these open source CMS applications is that while they’re easy to use, they aren’t necessarily easy to install, modify or customize using a Web development tool like Dreamweaver because they’re written in a PHP, a language used for Web databases. Unlike HTML, where all the contents of the page are contained in a single file, a given page on a WordPress blog might be comprised of dozens of different files.

Adobe worked to simplify this problem by developing the Live View feature within Dreamweaver CS5. Live View automatically assembles all the .php, .xml, javascript and other files that make up your WordPress blog or Drupal site, allowing you to make changes to your site and see them updated on the fly.

As the old saying goes, a little knowledge is dangerous and being able to perform changes on the live site can be destructive indeed, so if you intend to perform major surgery on your CMS site, I highly recommend setting up a testing server where you can safely work on your site without fear of wrecking your live site. Doing so is quite a bit more complicated as it requires you to setup a remote testing server, or configure your computer to act like a local testing server using either MAMP or XAMPP. Instructions for setting up the local testing server can be found in the December 2009 issue of the Edge Newsletter.

To get up to speed quickly on the new Live View features in Dreamweaver CS5, check out the tutorial video embedded below.

<object width=”425″ height=”256″><param name=”movie” value=”http://images.tv.adobe.com/swf/player.swf”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><param name=”FlashVars” value=”fileID=6040&context=428&embeded=true&environment=production”></param><embed src=”http://images.tv.adobe.com/swf/player.swf” flashvars=”fileID=6040&context=428&embeded=true&environment=production” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”256″></embed></object>

What are Code Snippets?
Code Snippets are a library of easy to use commands written in ActionScript, Flash’s robust programming language. Code Snippets won’t replace the need for advanced designers to master ActionScript, but they will reduce the need for those of us who dabble in Flash to really dive deeply into the ActionScript programming language. For an analogy, Code Snippets are to ActionScript what a Content Management system is to HTML. With a content management system, a user can easily bold the text on their Web site by clicking on the Bold icon rather than entering tags around their content.

Using Code Snippets, I can create a button in InDesign or Flash then drag the “Click and Go To Web Page” snippet onto the button and type the correct URL into the designated line in the Actions panel to create an interactive button. This replaces the need to create a dedicated Actions layer, assign an instance name for the button and remember the correct set of commands in ActionScript to get the button to work.

To use Code Snippets effectively it still helps to have a rudimentary understanding of the ActionScript language, particularly the core portions of the syntax. You should, for example, know what an Instance is and how it is used by ActionScript. These concepts are relatively simple to learn and implement, particularly when you compare it to the difficulty in learning how to hand code, even elementary ActionScript.

TLF can be utilized one of two ways. First, by creating a page within InDesign and exporting the page as an FLA file. This file, once opened in Flash Professional, retains all of the typographic attributes of the original InDesign document and retains the editability of the original text.




The second path is to create text directly within Flash Professional. If you choose this route, be sure the Text tool properties are set to  TLF text instead of Classic text.

Graphic designers should feel at home with the new text options available in Flash Professional CS5, and, I suspect, that’s the point. Much of Adobe’s focus in the Web Collection suite is to make it easier for print designers to quickly get up to speed with Web publishing tools. The tight integration between InDesign and Flash Pro, the creation of Flash Catalyst, the Code Snippets panel in Flash and several features in Dreamweaver all aim to take the sting out of retooling for this new medium. These are most certainly welcome additions and point toward greater integration throughout print, Web and mobile publishing workflows and the increased need for content creators (photographers, videographers, designers) to be versatile by combining their core visual communication skills with at least a rudimentary understanding of each of the publishing platforms.