One thing is for certain - Flash has come a long way in a very short time. From the mind of Jonathan Gay at FutureWave Software, Flash started as a standalone application called SmartSketch in the mid '90s, and it eventually evolved into an application for creating vector-based animations to leverage the rise of a new medium called the Internet. (For some cool reading on the back history of the development of Flash, check out "Flash Tenth Anniversary" at (www.adobe.com/products/flash/special/flashanniversary.)
Fast-forward to 2008 and it's almost impossible to visit the Web without coming across Flash in some form. It has become the de facto standard of the new user experience on the Internet. Designers and photographers use Flash to present their creative visions in an animated form; and musicians and video professionals take advantage of its current toolset to stream compelling content to the largest possible audience. In fact, the penetration of Flash in the market stands at more than 98% of Internet-enabled machines - surpassing Java, QuickTime, and Windows Media Player.
In December of 2005 Adobe acquired Macromedia and ushered in a new union of print and Web design applications by placing the most popular tools under one roof. Then, in 2007, Adobe launched one of its most ambitious upgrades to date - the Adobe Creative Suite 3. The most anticipated feature of this upgrade was the inclusion of Flash - and Adobe didn't disappoint. And the best part was just how well the Adobe applications integrated with Flash.
Illustrator and Flash
Illustrator CS3 has gone through some changes that create a tighter fit between itself and Flash CS3. Flash is, after all, a vector-based animation program, so it would only seem natural that Illustrator would be the first program to benefit from the Macromedia acquisition. I have to say, I was pleasantly surprised with the new integration. Working with Illustrator designs in Flash couldn't be easier!
The first thing that you'll notice when working with both Illustrator and Flash is that copying-and-pasting artwork has been greatly improved. When pasting into Flash, anchor points, paths, colors, gradients, and clipping paths now come in flawlessly. This is a boon to designers who have libraries of vector creations and want to make the jump to online multimedia development.
Illustrator is also a great place for you to work with text, and with recent changes, you can now copy-and-paste text right into the Flash interface and the text remains editable.
If you happen to make changes to the text that Flash doesn't support, it will automatically turn the text into a series of drawing objects collected into a group. You're guaranteed to see in Flash what you've created in Illustrator.
Symbols have also been modified to maximize the compatibility between the applications. Select an object in Illustrator, drag it into the Symbols panel, and you'll be prompted with a dialog where you can name the symbol, specify whether it's a Graphic or a Movie Clip, set the Flash Registration point, and Enable Guides for 9-Slice Scaling. Now when you copy-and-paste the symbol into Flash, all of the legwork for creating a symbol is automatically done for you.
Photoshop and Flash
While Flash CS3 continues to be a vector-based animation program, bitmap images have long been a staple of interactive multimedia experiences. To that end, Flash and Photoshop needed a way to work together in a more organized manner. Adobe succeeded in this is by allowing Flash to import the layer structure of a PSD file and create movie clips of the elements.
When you import a Photoshop document into Flash (File>Import>Import to Stage) that contains layers, layer groups, and text layers, you'll notice in the Import dialog that all of the layers and layer groups have been preserved. You have the option to import individual layers, as well the ability to select multiple layers and merge them. You can import each layer as either a bitmap image that holds supported layer styles or import them as a flattened bitmap image. You can also double-click on the layer names directly in this dialog and rename them.
Another great timesaver in this import process is the option to create movie clips for each layer, and the ability to give each a specific instance name. It's also a good idea to check the box to Set Stage Size to Same Size As Photoshop Canvas because it takes away the guesswork of setting up the Stage. When you click OK, all of your assets will be imported into the Flash file, and you're ready to begin coding.
Importing an Illustrator file into Flash will also prompt a similar dialog. One difference is an extra checkbox offering the option to import any unused symbols you may have in the Illustrator file.
If you're currently using Photoshop CS3 Extended, you have the option to create animations using the Animations Timeline panel and saving those files as video. After creating the animation, click on File>Export>Render Video, and you'll be presented with a dialog to save your video file. Select the Flash Video (FLV) format and click Render. You'll then have an FLV file that you can import back into Flash CS3.
After Effects and Flash
After Effects may not necessarily be the first application that comes to mind when you think of Flash development, but it may surprise you just how much it's used to create compelling effects. After Effects supports FLV and SWF, among other popular formats. This is beneficial when you need to create quick animations but don't want to invest the time creating them using ActionScript.
For example, let's say that you want to create a quick text animation for use in Flash. Rather than work with the Timeline in Flash, take advantage of the multitude of text animation presets available in After Effects CS3. Choosing Browse Presets from the Effects & Presets panel's flyout menu in After Effects launches Bridge, where you can select from premade effects.
Double-click on the effect you're looking for and it will be automatically loaded into After Effects.
When you're done editing your text, click on File>Export>Adobe Flash (SWF) to save your animation. The dialog that appears allows you to choose how you want Flash to handle unsupported features - Rasterize or Ignore. You can also specify whether or not to loop the movie clip.
After making those changes, import the file into an FLA project in Flash CS3 and then work with the movie clip in the same manner you'd work on any other imported clip. This not only saves you time when working on a composition, but also lessens the learning curve by using effects that are already created for you.
After Effects also has the option to export your compositions with keyframes as cue points when you export as Flash Video (FLV). This makes it easier to set up events based on a specific time in the composition. You can also import SWF files into After Effects as vector images with alpha channels - a boon for quickly creating engaging content based on your existing content.
All Together Now
Now that we spent some time talking about how the different pieces of the puzzle interact with one another, let's take a look at a project that incorporates all four applications to produce a quick movie in Flash. (If you'd like to follow along, you can download the project files from the Magazine section at www.layersmagazine.com.)
Step 1: Create a new 800x400 composition in After Effects. Set the Frame Rate to 30 Frames Per Second and the Pixel Aspect Ratio to Square Pixels. While you won't be using the entire Stage, this will allow you the option to ease text in and out if you choose to do so.
Step 2: Click on the flyout menu in the Effects & Presets panel, and select Browse Presets to open Bridge. Open the Text folder then the Lights and Optical folder. Double-click on the Bubble Pulse effect and click OK. At this point, all you need to do is double-click on the text and replace it with the text you want to use.
Export this file as a SWF file in the project directory. Our beginning text has been created. If you don't have After Effects CS3, I exported a file for you to use in the download files called if_intro_finished.swf.
Step 3: Open the Illustrator file, if_logo.ai. You'll notice that there's a shape already set up for you. We want to convert that shape to a symbol. Select the shape and drag it into the Symbols panel, giving it a name of "if_logo," type of Movie Clip, and a center registration point. Click OK.
Step 4: Without closing the Illustrator file, open Flash CS3 and create a new ActionScript 3.0 file. In the Property inspector, set the Stage to 800x400 pixels and the Frame Rate to 30. This will match the settings that you've made in After Effects and ensure you have a smooth graphic animation. Go back to you Illustrator file and copy the symbol. Back in Flash CS3, paste the logo into frame 1 of Layer 1. Double-click the name Layer 1 and change it to "if_logo."
Step 5: To bring in your After Effects content, click the Insert Layer icon to create a new layer for the element, then choose File>Import>Import to Library. Select the file you want to import (in this case, if_intro_finished.swf) and click Import to Library. This will bring the clip into the Library, allowing you to drag it out to the Stage. Once you drag it to the Stage, rename Layer 2 to "if_text."
Step 6: The Photoshop file (moon.psd) can be imported in the same manner, but you don't need to create a new layer for it. When you choose File>Import>Import to Stage and select the Photoshop file, you can select the layer(s) that you want to import and Flash will automatically place it on its own individual layer. Double-click on the layer you want to import (in this case, the middle layer) and rename it "if_background." Creating a movie clip of if_background and setting a center registration point would also be convenient here in this Step. Be sure to turn off the checkboxes for any layers you don't want to import. After you import your background image, drag it to the bottom of the layer stack.
Step 7: Once you've completed the imports, go to Control>Test Movie. Now you're ready to work with the individual components on the Flash Stage, animating each, or manipulating them with ActionScript.
More Flash & Swish: 
