DVD Title Menu with Text Links

This topic describes a DVDBuilder project for a DVD with a title menu. The menu buttons are designed as text links, and the selection and activation effects are done by changing the color of the text.

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 (Text_Menu_NTSC.jpg, Text_Menu_NTSC_Mask.bmp):

Text_Menu_NTSC.jpg Text_Menu_NTSC_Mask.bmp

See Create Text-only 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'>
                <background file='Text_Menu_NTSC.mpg' />
                <button left='120' top='150' width='200' height='150' navigate='Title=1;' />
                <button left='370' top='150' width='200' height='150' navigate='Title=2;' />
                <mask
                    file='Text_Menu_NTSC_Mask.bmp'
                    backgroundColor ='#000000'
                    patternColor    ='#FFFFFF'
                    emphasisColor1  ='#00FF00'
                    emphasisColor2  ='#000000' />
                <display
                    backgroundColor='#000000' backgroundContrast='0'
                    patternColor   ='#00FFFF' patternContrast   ='15'
                    emphasis1Color ='#000000' emphasis1Contrast ='0'
                    emphasis2Color ='#000000' emphasis2Contrast ='0'/>
                <selection
                    backgroundColor='#0000FF' backgroundContrast='3'
                    patternColor   ='#FFFF00' patternContrast   ='15'
                    emphasis1Color ='#FFFF00' emphasis1Contrast ='15'
                    emphasis2Color ='#000000' emphasis2Contrast ='15'/>
                <action
                    backgroundColor='#0000FF' backgroundContrast='5'
                    patternColor   ='#FF00FF' patternContrast   ='15'
                    emphasis1Color ='#FF00FF' emphasis1Contrast ='15'
                    emphasis2Color ='#000000' emphasis2Contrast ='15'/>
            </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 required DVD schema version.

The following <dvd> element specifies a DVD markup that requires 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='Text_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='Text_Menu_NTSC_Mask.bmp'
                    backgroundColor ='#000000'
                    patternColor    ='#FFFFFF'
                    emphasisColor1  ='#00FF00'
                    emphasisColor2  ='#000000' />
                ...
            </menu>
        </menus>
        ...
    </videoManager>
</dvd>

The attributes of the <mask> element map “pattern” to the white text (patternColor=’#FFFFFF’), and “emphasis1″ to the green line below the text (emphasisColor1=’#00FF00′). We do not have a 3rd pattern in the mask image, so “emphasis2″ is not used in this menu (emphasisColor2=’#000000′).

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   ='#00FFFF' patternContrast   ='15'
                    emphasis1Color ='#000000' emphasis1Contrast ='0'
                    emphasis2Color ='#000000' emphasis2Contrast ='0'/>
                ...
            </menu>
        </menus>
    </videoManager>
    ...
</dvd>

In this particular case, the pattern color is set to cyan (patternColor=’#00FFFF’) and the pattern contrast to 15 (patternContrast=’15’). The result is a solid cyan text painted on the deselected buttons. The cyan shape is text, because the “pattern” shape defined by the <mask> element and the mask image is text (i.e. the white text in the mask image above).

This is how it looks during playback:

Selection 1

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='#0000FF' backgroundContrast='3'
                    patternColor   ='#FFFF00' patternContrast   ='15'
                    emphasis1Color ='#FFFF00' emphasis1Contrast ='15'
                    emphasis2Color ='#000000' emphasis2Contrast ='15'/>
                ...
            </menu>
        </menus>
    </videoManager>
    ...
</dvd>

The background color is set to blue (patternColor=’#0000FF’) and the pattern contrast to 3 (patternContrast=’3′). Given that 15 is the highest possible contrast value, the result is a semi-transparent blue background for the deselected buttons. For each button, the background fills a rectangle as set in the <button> element.

The pattern color is set to yellow (patternColor=’#FFFF00′) and the pattern contrast to 15 (patternContrast=’15’). The result is a solid yellow text painted on the selected button. The yellow shape is text, because the “pattern” shape identified by the <mask> element and the mask image is text (i.e. the white text in the mask image above).

The emphasis1 color is also set to yellow (emphasis1Color=’#FFFF00′) and the emphasis1 contrast to 15 ( emphasis1Contrast=’15’). The result is a solid yellow line painted under the text for the selected button. The yellow line matches the “emphasis1″ shape as defined by the <mask> element and the mask image (i.e. the green line in the mask image above).

This is how it looks during playback. Notice that the selected buttons have a semi-trasparent blue background:

Selection 1 Selection 2

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='#0000FF' backgroundContrast='5'
                patternColor   ='#FF00FF' patternContrast   ='15'
                emphasis1Color ='#FF00FF' emphasis1Contrast ='15'
                emphasis2Color ='#000000' emphasis2Contrast ='15'/>
            ...
        </menu>
        </menus>
    </videoManager>
    ...
</dvd>

The background color is set to blue (patternColor=’#0000FF’) and the pattern contrast to 5 (patternContrast=’5′). The result is a little less transparent blue background for the activated buttons. For each button, the background fills a rectangle as set in the <button> element.

The pattern color is set to magenta (patternColor=’#FF00FF’) and the pattern contrast to 15 (patternContrast=’15’). The result is a solid magenta text painted on the activated button. The magenta shape is text, because the “pattern” shape defined by the <mask> element and the mask image is text (i.e. the white text in the mask image above).

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

This is how it looks during playback:

Action 1


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