Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)
Since the early release of the Adobe Creative Suite, integration between its products has been one of the key features. After Adobe's merger with Macromedia, Creative Suite integration extended to cover products such as Flash, Dreamweaver and Fireworks. This tutorial demonstrates how we can use Flash, Photoshop, Illustrator and After Effects together to build a single project.
Integration between Adobe Creative Suite products improves your workflow through these applications by giving you the ability to move between each of them easily and efficiently. This is down to compatibility between them and the CS products' ability to read common formats and objects. The unified interface is another side of the integration between products; once you learn how to work with one product, you will be familiar with the rest of the family.
Integration takes many forms in Adobe Creative Suite. The ability to take your work to mobile devices and test using Adobe Device Central is another form of integration as you can use the same application you run on computers on different types of devices. The third form of integration is the integration between designers and developers who work in the same environment, becoming familiar with the workflow of one other and the tools they both use.
This article will cover the integration between Flash and other Adobe Creative Suite products such as Photoshop, Illustrator and After Effects to give an idea of how these products efficiently integrate between each other. We will simulate a project to create an animated banner in Flash that uses resources from Photoshop and Illustrator. Also, we will use After Effects to enhance the Flash animation using the After Effects presets.
While this article jumps between Adobe Creative Suite 5 applications, you do not have to have much experience with these applications as we will only cover how to integrate workflow between each of these applications through our example.
Final Result Preview
Let's take a look at the final result we will be working towards:
Step 1: Create new FLA
The first step is to create the base Flash banner file which will be the center point to integrate with Flash and Photoshop, Illustrator and After Effects.
Let's create a document for the banner with 336px x 280px and with 30 fps speed. And set the background color to black from the Document Setting dialog box.
This document size will be the standard size for all the documents that we will create in Photoshop and After Effects, just to keep things neat.
After creating the flash document, we will produce the first animation in the banner using the Deco tool. Before going through the following steps, you can review a previous article that covers the Deco tool Using the New Deco Drawing Tool in Flash CS5. Now, let's see the first steps of the animation:
Step 2: Select Grid Fill with Deco Tool
Select the Deco tool and from the Deco tool options in the Properties panel, choose Grid Fill.
Step 3: Set Grid Options
In the Grid options, set its properties as following:
- Check the four tiles options and set its color with different white and gray colors
- In the Advanced Option, uncheck the Paint over edge and check the Random order checkbox
- Set the Horizontal and vertical spacing to 5px
- Set the Pattern scale to 10%
Step 4: Create Grids
Select the first frame in the Timeline panel and click with the mouse on the stage to create a random grid. In frame number 3, press F7 to create a blank frame and repeat the above step to create another random grid.
Step 5: Create Grid Animations
Repeat the above step every two frames for 20 frames to create an animation for random grid animation.
At this point, we will move to Photoshop to prepare the resources that we will use in the further banner animation.
Importing Photoshop Resources
In previous versions of Flash, there was only one method to import bitmap resources to Flash, it was through importing image formats such as JPG for best image compression and PNG for transparent images. However, importing multiple layered Photoshop files took much time to save each layer as a separate image and import it to Flash separately. The new PSD importer in Flash enables you import PSD files directly into Flash with a variety of options as we will see later.
In the following steps, we will import the Photoshop file Banner.psd to Flash using the Flash PSD import dialog box:
Step 6: Import PSD File
In the File menu, choose Import > Import to stage and choose PSD file. We will use the
psd_banner.psd file from the Source download (link at top of the tutorial).
Let's take a look over the PSD import dialog box and its available properties. The dialog box consists of the following parts:
The layers section, you can preview in this section the PSD layers in the document and check or uncheck the layers that you would like to import to Flash. Also, it gives a preview to the type of the layer. For example, the editable text layer has a T letter on the layer to identify that the layer is editable.
On the other hand, the bitmap layer includes a bitmap icon to show that the layer is not editable. And you can merge between two layers by selecting them using Shift key and pressing the Merge layers button.
Under the layers section, you can convert the layers to either Flash layers or keyframes. And, you can choose to place the layers in their original position and change the Flash stage to be as the same as the Photoshop file.
In the right section, you can set the properties of each of the selected layers in the layers' section. At the top area, you can choose how to import the layers. For example, in the text layer, you can choose to import the layer as either editable text, vector paths or flattened bitmap image. Additionally, you can choose to import the bitmap layers merged with its styles or separated from it.
You can cover the imported layer to movie clip and give it an instance name directly from the PSD import dialog box without the need to convert it after importing it. At the end of this section, you can set the publishing settings for the imported layer such as the compression type and quality.
Now, let's get back to our example and set the import options.
Step 7: Finish the Import
Set the PSD Import dialog box to import all the PSD layers as Flash layers and convert the imported layers to movie clips. Notice that the imported layers appear above the Flash layer that we previously created. Move the background layer to appear at the frame number 10 in the Timeline and the man layer to appear at frame 15
Step 8: Extend the Animation
Extend all layers of the animation to frame 50, right-click the first layer and choose Motion tweening
Step 9: Create Alpha Tween
Select the background image in the first frame of the motion and set its alpha to 0%, then go to the frame 15 and set the background alpha to 100%. Repeat the above alpha animation to the man layer movie clip to appear after the full appearance of the background.
At this stage, we have integrated Photoshop resources with a Flash project using the PSD Import dialog box. In the next stage, we will import resources from Adobe Illustrator.
Importing Adobe Illustrator Resources
While Photoshop is more specialized in bitmap and image editing, Adobe Illustrator is the best choice to build vector and illustration resources for your project. In this part, we will import vector resources to Flash using the AI import dialog box that will import the Adobe Illustrator file content as an editable vector layer.
During the following steps, we will import the Illustrator file
Flora.ai from Illustrator to Flash and use it in the banner animation.
Step 10: Import the File
From the File menu, choose Import > Import to Stage and select the
Flora.ai file. The AI import dialog box appears. Although it is similar to the PSD import dialog box, it has some additional features to give more options working with the Illustrator files such as the ability to choose specific Artboard and choosing to import the unused symbols or import the layers as single bitmap image.
Step 11: Create a Movie Clip from the AI
In the AI import dialog box, make sure that the AI layer is selected and check the movie clip check box to create a movie clip based on the imported layer.
Step 12: Rearrange Layers
The imported vector is placed on a new layer, move the new layer behind the man layer.
Step 13: Create a Mask
Create a new mask layer and set the vector layer as the masked layer. In the mask layer, create a small movie clip for a cycle which will work as the mask for the vector floral and will be animated to reveal it.
Step 14: Create a Motion Tween
Right-click the mask layer and choose motion tweening. In the first frame of the motion reduce the cycle movie clip in the center of the floral. In the last frame resize it to cover all the floral and reveal it under the mask.
Here, we saw how Flash integrates easily with Illustrator to bring vector resources to the Flash stage. We used the AI import dialog box which provides customized options based on the Illustrator imported file structure.
After this stage, we will create the text in Adobe After Effects and add it to the banner as the last stage in our integration example.
Creating Text Effects in After Effects
Whilst you can create text animation and effects in Flash, Adobe After Effects provides extended ability to create more effects either using the effects presets or create custom effects using the effects menu. In this example, we will see how to create text effects easily without knowledge of After Effect and export these effects to the Flash banner animation.
Step 15: Create New AE Composition
Open Adobe After Effects. Right-click the project panel (If it is not there, you can reveal it from the Window menu), and choose New Composition
Step 16: Set up Composition
Set the composition dimension and fps as the same as the original Flash size we created at the beginning of this tutorial
Step 17: Add Text and Text Effect
Use the Text tool to write the text on the stage and select it using the Arrow tool. Choose the Effects and presets panel on the right, if it is not there, you can reveal it from the Window menu.
In the Effects and presets panel, navigate for Animation presets > Text > 3D Text and choose 3D Fall Back Scramble & Blur
Step 18: Preview the Animation
Press the space bar to preview the animation on the timeline. You can view the animation details by clicking the arrow next to the text layer in the Timeline. You can view the animation keyframes as well.
Step 19: Crop the Timeline
Before exporting the animation to Flash, we need to crop the area that will be exported from the timeline to only have the text animation. To crop the animation timeline, drag the Work Area End bracket at the far right of the timeline under the frame numbers and position it after the animation ends.
Step 20: Export AE as SWF
From the File menu choose Export > Adobe Flash Player (SWF). In the options menu, set the JPG quality to Maximum and Unsupported features to Rasterize.
The After Effects animation is not limited to text animation, as you can use it to create other animation effects and export them to use in Flash projects.
Importing After Effects resources in Flash
After exporting the After Effect as SWF, the next stage is to import the animation to Flash as animated frames. After Effects can support exporting content as a vector, but in some cases, it can't read the vector information (such as when importing 3D content). To avoid problems, After Effects rasterizes the exported content as a bitmap sequence. In the coming steps, we will import the After Effect animation to Flash.
Step 21: Import the AE SWF
In the Flash animation, choose File > Import > Import to Stage and choose the text animation SWF that we previously created in After Effects.
Step 22: Rearrange the Animation
The SWF is imported to Flash as a sequence of images; move the sequence images to start appearing after the man layer animation finishes.
We've seen that you can import the After Effect resources to Flash, but you can also import the Flash animation to After Effects as a SWF and apply effects to the Flash animation directly. You can then export it as a SWF or Flash FLV video from After Effects. In this case, you can apply the After Effects animation effects to the whole Flash SWF animation.
The purpose of this tutorial is in understanding the integration workflow between Flash and other Adobe Creative Suite products such as Photoshop, Illustrator and After Effects. By the end of this tutorial, you should be familiar with the cross workflow between applications in the Adobe Creative Suite.
I hope you liked this tutorial, thanks for reading!