DVDBuilder

DVD Title Menu with Thumbnail Images

This topic describes a DVDBuilder project for a DVD with a title menu. The menu buttons are designed as thumbnail images, and the selection and activation effects are done with a color frames around the buttons.

This topic discusses only the DVDBuilder project’s XML elements and XML attributes. For steps to create the actual DVD, see the DVD with a Title Menu topic in the DVDBuilder Programming section.

Background and Mask

For this project we will use the following background and mask images (Menu_NTSC.jpg, Menu_NTSC_Mask.bmp):

Menu_NTSC.jpg Menu_NTSC_Mask.bmp

See Create Thumbnail Menu Background and Mask in GIMP for the steps to create the background and mask images.

DVDBuilder Project

This is the complete DVDBuilder project. It defines a title menu, and a title set with two titles.


<?xml version='1.0' encoding='utf-8'?>
<dvd version='2.3' xmlns='http://www.primosoftware.com/dvdbuilder/2.3'>
    <videoManager firstPlayNavigate='Menu=1001;'>
        <menus>
            <menu id='1001' entry='title'>
                <button left='130' top='150' width='200' height='150' navigate='Title=1;' />
                <button left='370' top='150' width='200' height='150' navigate='Title=2;' />
                <background file='Menu_NTSC.mpg' />
                <mask
                    file='Menu_NTSC_Mask.bmp'
                    backgroundColor ='#000000'
                    patternColor    ='#FF0000'
                    emphasisColor1  ='#00FF00'
                    emphasisColor2  ='#0000FF' />
                <display
                    backgroundColor='#000000' backgroundContrast='0'
                    patternColor   ='#FFFFFF' patternContrast   ='3'
                    emphasis1Color ='#000000' emphasis1Contrast ='0'
                    emphasis2Color ='#000000' emphasis2Contrast ='0'/>
                <selection
                    backgroundColor='#000000' backgroundContrast='0'
                    patternColor   ='#000000' patternContrast   ='0'
                    emphasis1Color ='#FF00FF' emphasis1Contrast ='15'
                    emphasis2Color ='#000000' emphasis2Contrast ='0'/>
                <action
                    backgroundColor='#000000' backgroundContrast='0'
                    patternColor   ='#000000' patternContrast   ='0'
                    emphasis1Color ='#FF00FF' emphasis1Contrast ='15'
                    emphasis2Color ='#FFFF00' emphasis2Contrast ='10'/>
            </menu>
        </menus>
    </videoManager>
    <titleSet>
        <titles>
            <title id='1' chapters='00:00:00;'>
                <videoObject file='Elephant.mpg'/>
            </title>
            <title id='2' chapters='00:00:00;'>
                <videoObject file='Hippo.mpg'/>
            </title>
        </titles>
    </titleSet>
</dvd>

The <dvd> Element

The <dvd> element is the root element of the DVD xml project. The <dvd> tag may contain one <videoManager> elements and one or more <titleSet> elements. The <dvd> element also specifies the supported DVD schema version.

The following <dvd> element specifies a DVD markup that conforms to DVD schema version 2.3.


<?xml version='1.0' encoding='utf-8'?>
<dvd version='2.3' xmlns='http://www.primosoftware.com/dvdbuilder/2.3'>
    ...
</dvd>

The <videoManager> Element

The <videoManager> element specifies a top-level menu, also known as a title menu, and a first-play navigation command. The first-play navigation command is executed when a disc is inserted in a player.

The following <videoManager> element defines a first-play command that navigates to a top-level ‘title’ menu. When this DVD is inserted in a player, the player will show the ‘title’ menu first.


<?xml version='1.0' encoding='utf-8'?>
<dvd version='2.3' xmlns='http://www.primosoftware.com/dvdbuilder/2.3'>
    <videoManager firstPlayNavigate='Menu=1001;'>
        ...
    </videoManager>
    ...
</dvd>

The <menus> Element

The <menus> element can be in the <videoManager> element or in the <titleSet> element. The <menus> element can have one or more child <menu> elements.


<?xml version='1.0' encoding='utf-8'?>
<dvd version='2.3' xmlns='http://www.primosoftware.com/dvdbuilder/2.3'>
    <videoManager firstPlayNavigate='Menu=1001;'>
        <menus>
        ...
        </menus>
    </videoManager>
    ...
</dvd>

The <menu> Element

The <menu> element defines a DVD menu background and mask, position and size of all buttons, and the display, selection, and action properties of each button.


<?xml version='1.0' encoding='utf-8'?>
<dvd version='2.3' xmlns='http://www.primosoftware.com/dvdbuilder/2.3'>
    <videoManager firstPlayNavigate='Menu=1001;'>
        <menus>
        <menu id='1001' entry='title'>
            ...
        </menu>
        </menus>
    </videoManager>
    ...
</dvd>

The <button> Element

The <button> element defines a rectangular area on a DVD menu that can be selected and activated.

A DVD <button> is selected when a viewer moves through the menu by pressing arrow buttons on a DVD player remote control.

A DVD <button> is activated when a viewer presses Enter or OK button on a DVD player remote control. When a <button> is activated the DVD player executes the navigation command associated with the <button>.

There can be up to 36 <button> elements in one <menu> element.


<?xml version='1.0' encoding='utf-8'?>
<dvd version='2.3' xmlns='http://www.primosoftware.com/dvdbuilder/2.3'>
    <videoManager firstPlayNavigate='Menu=1001;'>
        <menus>
        <menu id='1001' entry='title'>
            <button left='130' top='150' width='200' height='150' navigate='Title=1;' />
            <button left='370' top='150' width='200' height='150' navigate='Title=2;' />
            ...
        </menu>
        </menus>
    </videoManager>
    ... 
</dvd>

The <background> Element

The <background> element specifies the DVD menu background. This can be a static background created from an image, or a moving background created from a video clip.


<?xml version='1.0' encoding='utf-8'?>
<dvd version='2.3' xmlns='http://www.primosoftware.com/dvdbuilder/2.3'>
    <videoManager firstPlayNavigate='Menu=1001;'>
        <menus>
        <menu id='1001' entry='title'>
            <background file='Menu_NTSC.mpg' />
            ...
        </menu>
        </menus>
    </videoManager>
    ...
</dvd>

An image cannot be used as a DVD menu background directly. It must be converted to MPEG-2 video first.

The <mask> Element

The <mask> element identifies up to three graphical patterns that can be used for selection and activation effects. The three graphical patterns are defined by three different colors, which are set with the patternColor, emphasisColor1, and emphasisColor2 attributes. The fourth attribute, the backgroundColor specifies which parts of the mask should leak the background specified with the <background> element.


<?xml version='1.0' encoding='utf-8'?>
<dvd version='2.3' xmlns='http://www.primosoftware.com/dvdbuilder/2.3'>
    <videoManager firstPlayNavigate='Menu=1001;'>
        <menus>
        <menu id='1001' entry='title'>
            ...
            <mask
            file='Menu_NTSC_Mask.bmp'
            backgroundColor ='#000000'
            patternColor    ='#FF0000'
            emphasisColor1  ='#00FF00'
            emphasisColor2  ='#0000FF' />
            ...
        </menu>
        </menus>
        ...
    </videoManager>
</dvd>

The attributes of the <mask> element map the “pattern” to the red rectangle (patternColor=’#FF0000′), the “emphasis1″ to the green frame (emphasisColor1=’#00FF00′), and the “emphasis2″ to the blue frame (emphasisColor2=’#0000FF’).

Note that the mask colors are not shown anywhere. They simply help DVD players identify different shapes in the mask.

The <display> Element

The <display> element determines the color and the contrast of the “background”, “pattern”, “emphasis1″ and “emphasis2″ mask shapes for the whole video frame. The rectangles specified by the <button> elements are ignored when painting the “display” patterns.


<?xml version='1.0' encoding='utf-8'?>
<dvd version='2.3' xmlns='http://www.primosoftware.com/dvdbuilder/2.3'>
    <videoManager firstPlayNavigate='Menu=1001;'>
        <menus>
        <menu id='1001' entry='title'>
            ...
            <display
            backgroundColor='#000000' backgroundContrast='0'
            patternColor   ='#FFFFFF' patternContrast   ='3'
            emphasis1Color ='#000000' emphasis1Contrast ='0'
            emphasis2Color ='#000000' emphasis2Contrast ='0'/>
            ...
        </menu>
        </menus>
    </videoManager>
    ...
</dvd>

In this particular case, the pattern color is set to white (patternColor=’#FFFFFF’) and the pattern contrast to 3 (patternContrast=’3′). Given that 15 is the highest possible contrast value, the result is a semi-transparent white rectangle painted over deselected buttons. That essentially creates a fade out effect for deselected buttons. The white shape is a rectangle, because the “pattern” shape defined by the <mask> element and the mask image is a rectangle (i.e. the red rectangle in the mask image above).

This is how it looks during playback. Notice that when not selected the buttons look a little washed out:

Thumbnail Selection 1 Thumbnail Selection 2

The <selection> Element

The <selection> element determines the color and the contrast of the “background”, “pattern”, “emphasis1″ and “emphasis2″ mask shapes when a menu button is selected. The rectangle of each <button> element is used as a clipping area when painting the “selected” patterns, i.e. patterns are painted only inside the button rectangle.


<?xml version='1.0' encoding='utf-8'?>
<dvd version='2.3' xmlns='http://www.primosoftware.com/dvdbuilder/2.3'>
    <videoManager firstPlayNavigate='Menu=1001;'>
        <menus>
        <menu id='1001' entry='title'>
            ...
            <selection
            backgroundColor='#000000' backgroundContrast='0'
            patternColor   ='#000000' patternContrast   ='0'
            emphasis1Color ='#FF00FF' emphasis1Contrast ='15'
            emphasis2Color ='#000000' emphasis2Contrast ='0'/>
            ...
        </menu>
        </menus>
    </videoManager>
    ...
</dvd>

The emphasis1 color is set to magenta (emphasis1Color=’#FF00FF’) and the emphasis1 contrast to 15 ( emphasis1Contrast=’15’). The result is a magenta frame painted around the selected button. The magenta frame shape and size matches the “emphasis1″ shape as defined by the <mask> element and the mask image (i.e. the green frame in the mask image above).

This is how it looks during playback:

Thumbnail Selection 1

The <action> Element

The <action> element determines the color and the contrast of the “pattern”, “emphasis1″ and “emphasis2″ mask shapes when a menu button is activated. The rectangle of each <button> element is used as a clipping area when painting the “activated” patterns, i.e. patterns are painted only inside the button rectangle.


<?xml version='1.0' encoding='utf-8'?>
<dvd version='2.3' xmlns='http://www.primosoftware.com/dvdbuilder/2.3'>
    <videoManager firstPlayNavigate='Menu=1001;'>
        <menus>
        <menu id='1001' entry='title'>
            ...
            <action
            backgroundColor='#000000' backgroundContrast='0'
            patternColor   ='#000000' patternContrast   ='0'
            emphasis1Color ='#FF00FF' emphasis1Contrast ='15'
            emphasis2Color ='#FFFF00' emphasis2Contrast ='10'/>
            ...
        </menu>
        </menus>
    </videoManager>
    ...
</dvd>

The emphasis1 color is set to magenta (emphasis1Color=’#FF00FF’) and the emphasis1 contrast to 15 ( emphasis1Contrast=’15’). The result is a magenta frame painted around the activated button. The magenta frame shape and size matches the “emphasis1″ shape as defined by the <mask> element and the mask image (see the green frame in the mask image above).

The emphasis2 color is set to yellow (emphasis2Color=’#FFFF00′) and the emphasis2 contrast to 10 ( emphasis2Contrast=’10’). Given that 15 is the highest possible contrast value, the result is a semi-transparent yellow frame painted around the magenta frame. That essentially creates a glow effect for activated buttons. The yellow shape is a frame, because the “emphasis2″ pattern identified by the <mask> element and the mask image is a frame (i.e. the blue rectangle in the mask image above).

This is how it looks during playback:

Thumbnail Action 2

Last updated on May 10th, 2015 12:00:00 AM