STEP 1: Create a comp
Start by creating a comp, which you’ll animate and link to a company’s homepage as a Web advertisement. In After Effects, choose File > New > New Project, and import a vector logo. Choose Composition > New Composition, name the composition Linked_Logo, and from the Preset menu, choose Web Banner 468 x 60. Enter a duration of 05:00 (for a duration of five seconds), and then click OK. Move the current-time indicator <> to the start of the composition, and then drag the logo file from the project panel to the timeline.
STEP 2: Adjust the logo size and color
Scale the logo so it fits the Web banner. Select the logo file in the timeline, press S to reveal its scale property, and enter a scale value of 25%. Adjust the color of the logo so you can better view its alpha channel later on. Choose Effect > Color Correction > Change To Color. In the Effect Controls panel, click the color swatch for To and then enter values of R=239, G=9, B=9 to create a bright red. Click OK, and then select Hue, Lightness & Saturation from the Change menu. Select the Linked_Logo comp in the Project panel and choose Composition > Background Color. Click the color swatch and enter values of R=0, G=88, B=238 to create a bright blue. Click OK twice to apply the new color.
STEP 3: Animate the logo
Select the logo file in the timeline, and choose Animation > Browse Presets. In Adobe Bridge, choose Presets from the navigation menu at the top. Open the Behaviors folder, and select the first behavior, Autoscroll – horizontal.ffx. Double-click Autoscroll – horizontal.ffx to apply it to the layer in After Effects, and then close Bridge. Press the spacebar to preview the animation. To adjust the movement, go to the Effect Controls panel, locate the Autoscroll – horizontal effect, and set Speed (pixels/second) to 25. Save the project.
STEP 4: Add a marker and link
In the timeline, move the current-time indicator to 4:00 (four seconds). Select the logo file and choose Layer > Add Marker. A layer-time marker is added at the four-second mark. Double-click the marker. In the Marker dialog box, type Company link in the Comment text box, type http://www.adobe.com in the URL text box, and type _blank in the Frame Target to specify a new browser window. Click OK.
With the marker in place, the link is embedded and invoked automatically at the four-second mark. If you prefer the link to be invoked by the user, simply add the link to the file after placing it on a Web page.
STEP 5: Export to FLV
View the alpha channel by choosing Alpha from the Show Channel menu <> at the bottom of the Composition panel. Then choose RGB from the Show Channel menu and choose File > Export > Flash Video (FLV). In the Flash Video Encoding Settings dialog box, choose Flash 8 – Medium Quality (400 kbps) from the Please Select A Flash Video Encoding Profile menu. Click Show Advanced Settings, and in the Encode Video section, select Encode Alpha Channel. Deselect Encode Audio since the animation doesn’t include any audio, and click OK. Specify a name and location for the FLV file, and click Save. To view the resulting FLV file, add it to a Web page, and then open the Web page in a browser with Flash Player 7.0 or later installed. Alternatively, open the file in a third-party standalone FLV player. A quick search on the Internet should locate several standalone players available for download.
Senior Marketing Manager
Digital Video & Audio
Adobe Systems Inc.
Bob is an award-winning editor, animator and musician whose credits include Late Night with Conan O’Brien and Beavis and Butt-Head. A recent transplant to the West Coast from New York, he is also a co-author of the book, Avid Xpress Pro and DV on the Spot.
Bob Says Keep in Mind…
Flash Video (FLV) is a popular format for interactive Web content. FLV even supports alpha channels, helping to combine multiple files over a consistent background. Now you can output FLV files directly from Adobe After Effects 7.0 and bring them into your Flash authoring software without having to recompress them. You’ll also need QuickTime 6.5.2 or later.
In this tutorial, I’m using Adobe After Effects 7.0 to animate a vector logo, add an alpha channel and export the animation in Flash Video format. To follow along, you’ll need After Effects 7.0 and a vector logo, such as an Adobe Illustrator file, that measures 229 x 201 pixels.
Though you can export FLV (and SWF) files from After Effects, incorporating these files into Web content and adding interactivity is typically done through a Flash authoring application. FLV files contain only video. They don’t allow interactivity themselves, but they may be embedded into SWF files, which do.
Two codecs are available in After Effects for FLV export. You must use the On2 VP6 codec to include an alpha channel.
Adobe Systems Inc.
345 Park Avenue
San Jose, CA 95110-2704