Using After Effects to enhance menus



    About creating menus in After Effects

    Encore and Adobe After Effects contain several integrated features to help you create dynamic motion menus. Using After Effects, you can animate elements of a menu so that, for example, the button images fly into position or fade in over an image or video. The composition you create can then act as a video background to the actual menu in the project. This advanced technique requires an understanding of After Effects, video backgrounds, and the use of the loop point to initially disable buttons.

    In After Effects you can also create a menu from a composition and then import it as a menu into Encore. The After Effects Create Button command lets you assign button subpicture layers and a video thumbnail layer for each button set. It adds the appropriate layer-name prefixes to them. The Save Frame As command lets you save a frame as a layered Photoshop file. For information on creating buttons or layered Photoshop files in After Effects, see Working with Adobe Encore and After Effects in After Effects Help.

    For a tutorial on using After Effects to create a motion menu, see www.adobe.com/go/vid0258.

    Overview of animating a menu

    If you have After Effects 7.0 or later, you can use the Create After Effects Composition command in Encore to quickly start a menu animation. This command converts a menu into an After Effects composition and opens it in After Effects.

    The basic steps to animate a menu using this command are as follows:

    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.)

    Create an After Effects composition from a menu

    1. In Encore, select the menu that you want to animate in the Project panel.

    2. Choose Menu > Create After Effects Composition.

      The menu saves as a PSD file and opens as a project in After Effects. The layer sets and buttons convert to nested compositions.

    3. In After Effects, animate the menu elements as desired. Set keyframes for position, scale, rotation, or any effects at the times when you want the animation to start and stop. For example, you can have each of three buttons rotate for 5 seconds at staggered intervals. Don’t make the button subpicture layers visible in the composition because they must remain part of the menu in Encore. Convert text layers to editable text if desired.

    4. Render the movie as a video file. Choose Embed Project Link from the output module settings in the Render Queue panel. You can return to After Effects directly from Encore to make adjustments if necessary.

    5. In Encore, double-click the original menu to open it.

    6. Choose File > Import As > Asset, select the video you created in After Effects, and click Open.

    7. In the Layers panel in Encore, hide any layer that is visible in the composition by clicking the Eye icon next to the layer. If you animated the button images, open their button sets and hide the visible layers.

    8. With the menu selected in the Project panel, click the Motion tab in the Properties panel, and drag the Video pick whip to the After Effects-produced video clip in the Project panel.

      Because the menu is in animation, the video clip takes the place of the actual menu in Encore while still maintaining its original properties such as the button highlights.

    9. Specify Loop Point and Loop # values. (See About menu display time and looping.)

    For more information on using After Effects, see After Effects Help.