Using After Effects to enhance menus

1. Create a complete version of the menu.

Using either Encore or Photoshop, design the menu that contains the elements you want to animate, as well as the final resting position of the text and button images. You use this menu as the basis for both the animation and the final menu. Place each element on its own layer so that you can animate the elements separately. Creating the composition from a complete version of the menu ensures that the button subpictures correctly overlay the buttons.

2. Create an After Effects composition from the menu.

If you created the menu in Photoshop, import it as a menu. Choose Menu > Create After Effects Composition in Encore to start After Effects and automatically convert the menu into a layered composition.

Each button set becomes a nested composition within the master menu composition. Because it is based on the actual menu, the composition contains the elements you want to animate and their correct ending position on the screen. If you animate the button images or delay their display initially, it is important to keep them visible for the remainder of the composition, because the image of the menu in the movie file acts as the visual menu in the project. In other words, the background video you create, not the menu, contains the button images. When the animation is complete, you create a rendered file from the composition.

A good practice is to create a layer marker in After Effects at the frame where you want the animation to end and the menu looping to begin. Name this marker “Loop Point,” and set an ending keyframe at this same location for each attribute you plan to animate. Doing this ensures that your button highlights line up correctly when you bring the finished animation into Encore.

3. Hide the animated layers in the original menu.

Using the Layers panel in Encore, hide all the layers that you animated so that they do not appear over the background video.

4. Import the video file and link it as a video background to the menu.

Import the video background you created as an asset into your Encore project. Then, using the Properties panel, link the video to the menu so that it replaces the menu background.

5. Set the menu Loop Point.

In Encore, use the menu property Loop Point to designate at what point in the display of the menu the buttons appear. Buttons cannot be selected or activated by the viewer until the Loop Point frame is reached. Once the menu starts looping, the buttons are enabled. The loop begins at the loop point and ends at the end of the movie file. The initial animation plays only when the menu first starts. (See About menu display time and looping.)

View full size graphic

Animating menus using Create After Effects Composition command

A.

Create complete version of menu.

B.

In After Effects, animate menu.

C.

In Encore, hide layers so that they don’t appear over background video (only button subpictures should remain visible).

D.

Link menu in Encore with animated background from After Effects.

Encore lets you import and work with menus that aren’t standard sizes. For example, you can import a 720 x 534‑pixel menu (created using square pixels) into an NTSC project (frame size: 720 x 480 pixels). However, if you create a composition from a menu of these dimensions, you need to scale the layers in After Effects. To ensure that the menu in the project aligns precisely with the pixels in the background animation, it is best to resize nonstandard menus in Photoshop before you create the composition. For standard definition (SD), resize an NTSC menu to 720 x 480 pixels and a PAL menu to 720 x 576 pixels. For high definition, resize square-pixel menus to 1280 x 720 or 1920 x 1080 pixels, and resize nonsquare anamorphic menus to 1440 x 1080 pixels. (In Photoshop, you can also specify the pixel aspect ratio for the menu: For a SD NTSC menu, choose 0.9 for fullscreen or 1.2 for widescreen; for a SD PAL menu, choose 1.066 for fullscreen and 1.42 for widescreen. For HD square-pixel menus, choose the 1.0 pixel aspect ratio and for HD anamorphic menus, choose 1.333.)