These days I’m all about integration and there seems to be endless creative possibilities available when working across Adobe’s graphic, video, and animation tool sets. In this tutorial we’ll create a slick-looking Flash video piece by combining the power of Photoshop masks, After Effects 3D, and Flash video. Something like this could technically be put together using Flash alone but the quality will be far superior if we leverage the entire family of Adobe products, letting each application do what it’s best at.

STEP 1 Mask Out the Flat Panel
In Photoshop, open the flatPanel.psd file. The file consists of a living room graphic and an empty Background layer. Choose the Polygonal Lasso tool and make a selection around the screen of the flat panel TV. Then hold down the Option (PC: Alt) key and click the Add Layer Mask icon at the bottom of the Layers palette to mask out the screen.

CREDIT: ©ISTOCKPHOTO/SAMI SUNI

STEP 2 Add a Drop Shadow
To more realistically create the illusion that the video is a part of our scene, add a drop shadow by double-clicking to the right of the Layer 0 name to open the Layer Style dialog. In the dialog, click on Drop Shadow on the left. We want to add an even amount of shadow around the inside of the TV, so reduce the Distance to 0. Enter the rest of the parameters for the drop shadow to match what’s shown above.

STEP 3 Export as a PNG File
Now our photo is ready to be exported. Choose File>Save for Web to open the Save for Web dialog. When it comes to choosing a format for images that will be used inside of Flash, PNG-24 should be your only choice. Make sure that you turn on the Transparency checkbox so that the alpha channels will be preserved once we get into Flash. Save the image to your project folder as flatPanel.png.

STEP 4 Open the After Effects Composition
Launch After Effects and open the flatPanel.aep file that’s included with the exercise files. The file consists of a one-minute QuickTime clip of the guys from Adobe Photoshop TV. This 320×240 video file has been turned into a Composition by dragging it onto the New Composition icon at the bottom of the Project panel. Next, we need to import our PNG file to arrange the scene.

STEP 5 Add the PNG File to the Scene
Double-click in the Project panel and import the flatPanel.png file. Now drag the image into the Timeline and arrange the scene so that the TV is approximately in the center of the composition. Next, we’ll need to skew and rotate the video clip so that it looks like it’s actually playing on the TV. This type of thing could be accomplished inside of Flash but it would require a huge amount of complex ActionScript and would never look as good as what we’ll produce here in After Effects.

STEP 6 Place the Video in 3D Space
Now turn the video into a 3D layer by clicking on the 3D Layer switch in the Switches column of the photoshopTV.mov layer. This enables us to move or rotate the layer in 3D space. Twirl down the arrow to the left of the layer name and then twirl down the Transform properties. To correctly rotate and position the video, enter the settings as shown above. We don’t need to create a camera because we’ll just be using the default composition camera.

STEP 7 Final Tweaks before Exporting
Your composition should now look similar to the one shown here. From here you can make more adjustments to the video to make it fit seamlessly into the scene. Try playing around with the video’s saturation and contrast to achieve different effects. The last thing we need to do is to turn off the visibility of the PNG layer because we don’t want it to be exported with the video. Just click on the Eye icon at the left of the layer to remove its visibility.

STEP 8 Export as a Flash Video (FLV) File
Now we need to export our 3D-positioned video as a Flash Video (FLV) file. Go to the File menu and choose Export>Flash Video (FLV). This opens the Flash Video Encoding Settings dialog. In the encoding profiles pull-down menu choose Flash 8 – High Quality (700kbps). This will export a high-quality FLV file using the new On2 VP6 video codec. If your video will need to play in Flash Player 7, then you can choose one of the lower quality Flash Player 7 profiles.

STEP 9 Open the Flash Movie
In Flash, open the flatPanel.fla file that’s included in the exercise files. This file has the same dimensions as our PNG file and is set to 30 fps, which matches our FLV file’s frame rate. You’ll notice that the flatPanel.png file has been imported onto a layer in the Timeline called Living Room. We also created a blank layer named Video below this that will hold our video.

STEP 10 Import the FLV File
Select the first keyframe in the Video layer then go to the File menu and choose Import>Import Video. This opens the Import Video dialog. Click the Browse button and navigate to where you saved your FLV file from After Effects. After selecting the FLV file, click Continue (PC: Next) to go to the Deployment options page.

STEP 11 Choose a Deployment Method
When it comes to choosing a deployment method for your Flash video files, there are many factors to consider. But if the video is longer than 30 seconds, you’ll want to keep it as an external file and stream it into the Flash Player when it’s needed. Because our video is one minute in length, we’ll choose Progressive Download from a Web Server since it’s the best method for this type of video clip. Click Continue (PC: Next).

STEP 12 Select a Playback Skin
You’ll now be asked to choose a playback skin for the video component. We can choose None from the menu since we won’t need any playback controls for our video. Click Continue (PC: Next) and then Finish to complete the video import process. This will create a video component and place it onto the Stage.

STEP 13 Position the Video Under the Flat Panel
Now you should see the video component sitting somewhere under the PNG file. Move it into position under the flat panel using either the Selection tool or by nudging it with the Arrow keys. There will be a little bit of trial and error here since we don’t actually get a preview of the video when we import it. We found that positioning it at an X position of 516 and a Y position of 64 in the Properties panel does the job nicely.

STEP 14 Grab a Seat and Watch the Show
Once you have finished positioning the video, simply go to the Control menu and choose Test Movie to see the finished results. Maybe someday there will be an HD version of Adobe Photoshop TV, but until then you’ll just have fake it using Photoshop, After Effects, and Flash. The integration possibilities are endless when it comes to these applications, so get integrating!