Note : This is Japanease translation of WaltP's DVD Flick Menu Editing, by felidlabo. All rights around this document belong to WaltP.

注意： これはWaltP氏のDVD Flickのメニューテンプレート作成チュートリアルの、猫科研究所による日本語訳です。 この文書に関わる全ての権利はWaltP氏に帰属します。

テンプレートファイルの編集

最初にすべきことはあなたの好きな既存のメニューの形式を選択することです。 私はこのチュートリアルでMosaicを使用します。 いくつかのテンプレートではPlay / ResumeやSelect titleというテキストを出力しますが、 その他の物ではそれらのラベルが実際には画像であり、容易に移動・変更することができないことに気づくでしょう。 これらの選択肢がどのように扱われるかを簡単に知るには、.bmpを見てください。

取りかかりたいテンプレートを選択したら、DVDflickのテンプレートフォルダを見ます。 通常それは以下の場所にあります。
         C:\Program Files\DVD Flick\templates
DVDFlickで表示されるテンプレートの名前が付いたフォルダが並んでいるのがわかるでしょう。

このフォルダの全てのファイルを、templates以下の新規フォルダにコピーします。例えば以下のように。
         C:\Program Files\DVD Flick\templates\NewMenu
詳細：
   • templatesフォルダ内で
      » コピーするフォルダ(Mosaic)を右クリック
      » コピー(C)をクリック
      » ウィンドウの空白部分（フォルダではない）を右クリック
      » 貼り付け(P)をクリック
      » 新しいフォルダ(コピー ～ Mosaic)を右クリック
      » 名前の変更(M)をクリック
      » 新しいフォルダの名前(NewMenu)を入力

この新しいフォルダの中を見ると、以下のファイルがあります。

	arrowselect.bmp		ユーザの選択を示すのに使用される（カーソル）画像。
	background_blue.bmp		メインとタイトルのページの背景画像。
	background_green.bmp		音声ページの背景画像。
	background_yellow.bmp		字幕ページの背景画像。
	example.bmp		DVDflickでテンプレートを選択するとき表示される画像。
	template.cfg		メニュー構造の定義。

template.cfgのコピーを作成しtemplate.savとします。 これでメニューの変更時に間違って壊してしまった時、動作するバージョンに戻れます。 template.savをtemplate.cfgにコピーし、壊れたメニューを置き換えるだけです。 付け加えると、変更を加える際に、テンプレートファイルを好きなだけ（かつ異なる名前で）コピーできるので、 壊れてしまった時には全てをやり直さずに済みます。

次のステップはテンプレートファイルの変更です。テキストエディタでファイルを開かねばなりません。 もし既にどうやるのかを知っているなら素晴らしいです。そうではないなら、以下のようにしましょう。
   • template.cfgを右クリック
   • プログラムから開く(H)を選択
   • Notepad（メモ帳）を選択

進めるに従って、馴染みのない表現（ピクセル、RGBカラーのような）が現れるでしょう。 問題ありません。その言葉が使われている文脈を考えて、その設定で遊んでみてください。 目で見て理解できるはずです。

メニューの画面サイズは768x576ピクセルです。 メニューに物を配置するにあたって、この数値をよく承知しておいてください。 また、メニューのプレビュー時には、"S"を押せばテンプレートの可視領域を表すボックスが表示されます。 全てのテキスト、ボタン、そしてその他の物はこのボックスに収めてください。

transColorの行は、今のところ無視して構いません。 これは選択肢画像の節で説明します。

ファイルの残りの部分は4つの節になります：audioMenu, subtitleMenu, mainMenu, titleMenuです。 これらはそれぞれ別のメニュー画面を定義します。 これらの節の中でメニューのページで表示されるコンポーネントを記述します。

これらのチュートリアルではメインとタイトルのメニューに集中します。 これらがどのように動作するか理解したなら、音声と字幕で同じテクニックが使用できます。 指定された名前に付随する節をまとめるために{ }が使用されます。例えば以下のように。

mainMenu
{
    Title
    {
    }
    playText
    {
    }
}

mainMenu
{
    backgroundImage = "background_blue.bmp";
    highlightColor = "192,0,0";
    selectColor = "255,0,0";

    Title
    {
        Type = "text";
        
        X = 85;
        Y = 120;
        Width = 595;
        Height = 70;
        xAlign = "left";
        yAlign = "center";
        
        Text = "%projectTitle%";
        Font = "Arial Black";
        fontSize = 56;
        Outline = 4;
        outlineColor = "0,0,0";
        textColor = "255,255,255";
        Bold = 1;
    }

    playText
    {
        Type = "text";
        X = 147;
        Y = 382;
        Width = 200;
        Height = 40;
        Text = "Play \\ Resume";
        Font = "Arial";
        fontSize = 38;
        Outline = 2;
        outlineColor = "0,0,0";
        Bold = 1;
        textColor = "255,255,255";
    }

    selectText
    {
        Type = "text";
        X = 147;
        Y = 430;
        Width = 200;
        Height = 40;
        Text = "Select title";
        Font = "Arial";
        fontSize = 38;
        Outline = 2;
        outlineColor = "0,0,0";
        Bold = 1;
        textColor = "255,255,255";
    }

    buttonPlay
    {
        Type = "button";
    
        X = 120;
        Y = 396;
        
        selectMethod = "image";
        selectImage = "arrowselect.bmp";
    }
    
    buttonTitleSelect
    {
        Type = "button";
    
        X = 120;
        Y = 444;
        
        selectMethod = "image";
        selectImage = "arrowselect.bmp";
    }
}

Mosaicメニューのメイン画面は以上のように定義されています。

タイトルメニュー

    defaultThumb
    {
        Type = "image";
        Parent = 1;
		
        Width = 170;
        Height = 128;
		
        Outline = 4;
        outlineColor = "0,0,0";
		
        selectMethod = "outline";
    }

Parentを除いて、これらの各値は前出の物と同じです。 Parentはこの項目を継承項目として定義します。 これはこの項目が直接画面に表示されるわけではなく、別の項目が表示される際にそれらを 修飾することを意味します。継承項目は多くの表示項目に同じ設定値をコピーせずとも、 1カ所で定義することを可能にします。 このケースでは、この定義を継承する各サムネイルは、サイズが170x128ピクセルで、 選択時にアウトラインが赤(255,0,0)に変わります。

    defaultThumbCaption
    {
        Type = "text";
        Parent = 1;
        Width = 288;
        Height = 34;
        xAlign = "center";
		
        Font = "Arial";
        fontSize = 18;
        textColor = "255,255,255";
        Outline = 2;
        Bold = 1;
        outlineColor = "0,0,10";
		
        selectMethod = "text";
    }

    defaultBottomButton
    {
        Type = "button";
        Parent = 1;
		
        Y = 512;
        Width = 128;
        xAlign = "center";
		
        Font = "Arial";
        fontSize = 20;
        Bold = 1;
        textColor = "255,255,255";
        Outline = 2;
        outlineColor = "0,0,10";
		
        selectMethod = "text";
    }

これらの属性定義がどのように使用されるかちょっと見てみます。

    Title
    {
        Type = "text";
		
        X = 64;
        Y = 48;
        Width = 640;
        Height = 48;
        yAlign = "center";
        xAlign = "center";
		
        Text = "%projectTitle%";
        Font = "Arial Black";
        fontSize = 56;
        Outline = 4;
        outlineColor = "0,0,10";
        textColor = "255,255,255";
        Bold = 1;
    }

    Thumb1
    {
        Inherit = "defaultThumb";
        thumbID = 1;
        X = 144;
        Y = 128;
    }
	
    Thumb2
    {
        Inherit = "defaultThumb";
        thumbID = 2;
        X = 464;
        Y = 128;
    }
	
    Thumb3
    {
        Inherit = "defaultThumb";
        thumbID = 3;
        X = 144;
        Y = 326;
    }

    thumbCaption1
    {
        Inherit = "defaultThumbCaption";
        thumbID = 1;
        X = 86;
        Y = 264;
    }
	
    thumbCaption2
    {
        Inherit = "defaultThumbCaption";
        thumbID = 2;
        X = 404;
        Y = 264;
    }
	
    thumbCaption3
    {
        Inherit = "defaultThumbCaption";
        thumbID = 3;
        X = 86;
        Y = 462;
    }

buttonMainMenu
    {
        Inherit = "defaultBottomButton";
		
        Text = "Main Menu";
        X = 320;
        xAlign = "center";
    }
	
    buttonNext
    {
        Inherit = "defaultBottomButton";
		
        Text = "Next page";
        X = 576;
        xAlign = "right";
    }
	
    buttonPrevious
    {
        Inherit = "defaultBottomButton";
		
        Text = "Previous page";
        X = 64;
        xAlign = "left";
    }

これらはdefaultBottomButtonの設定を継承することから始まります。 次にTextボタンの定義です。最後に位置とアラインメント（寄せ）です。

Main Menuボタンはメインメニューに戻ります。
PreviousとNextはタイトルページで定義された数より多いビデオがあるときに表示されます。 このため今回のケースでは、もし2つのビデオが読み込まれているならば、Main Menuのみが表示されます。 しかし5つのビデオが読み込まれているならば、3つのビデオがMain MenuとNext と共に1ページ目に表示されます。2ページ目に残りの2つのビデオがMain MenuとPrevious と共に表示されます。6つ以上では、もうお判りでしょう。

テストは単に変更を加えた後、そのメニューを読み込むだけです。

DVDFlickでは、ビデオの読み込み後、メニュー設定を選択します。 左側のリストからあなたのメニューを選択し、メニューを有効にするにチェックを入れます。 そしてプレビューをクリックすればあなたのメニューが表示されます。 マウスで選択肢のハイライトと選択ができます。 変更したい箇所を見つけた場合には以下のようにします。
1) テンプレートを編集
2) 変更を保存
3) メニューから抜けて（ESCを押すか右クリック）設定画面に戻る
4) もう一度プレビューを選択

エラーになる変更をした場合には、DVDFlickが消えます（訳注：クラッシュする）。 エラー箇所を見つけて修正しても良いですし、保存していた設定をtemplate.cfgにコピーして 戻しても構いません。 これが、いくつか変更を行ったら、ファイルの別のコピーを作成した方がよい理由です。 そうすれば復帰用のコピーから大きく離れずに済みます。

各メニューページのサイズは768x576ピクセル、または4:3の比率です。 どんな画像でも使用可能で、それらは必ずしもこのサイズちょうどである必要はありません。 あなたが選んだ画像はフィットするように拡大・縮小されます。 しかし画像が4:3の比率でないと、背景が壊れるかも知れません。 同様に、それらは.bmpファイルである必要はありません。 .jpgや.gif画像も使用できます。

背景以外の全てに使用する画像は2色で定義されるのがベストです。

1. 明るい前景色（白がよいでしょう）。 この色はselectColorで指定される色に置き換えられます。
2. 暗い背景色。 ファイル先頭のtransColorで定義されている色を使用してください。

transColorは画像の透過を行うのに使用され、背景画像が透けて見えるようにします。 例えば、arrowselect.bmpの画像を見てみましょう。 白(0,0,0)とマゼンタ(255,0,255)の2つの色に注目してください。 そしてtransColorはマゼンタとして定義されています。 これにより矢印の画像が表示される時、マゼンタが消えて背景が透けて見えます。 こうして、矢印のみが見えるのです。 しかし、.jpgの画像は圧縮によって画像の輪郭がにじんでしまい、 正しく「消え」ないため、使用してはいけません。 透過が必要な項目の画像は.bmpファイルで作成することを推奨します。 .gif又は.pngファイルも使用できるでしょうが、画像はよく確認してください。

全てのキーワードは大文字・小文字を区別します。 各キーワードがこの表に示されているそのままに指定されるようにしてください。

キーワード	値	概要
Inherit	定義されている項目	この表示項目で使用する追加の書式定義を持った別の項目を読み込む。
Parent	1	表示しないが、継承できる項目を定義する。
highlightColor	RGBカラー	メニューで選択肢にカーソルがある場合の色。
outlineColor	RGBカラー	項目表示のアウトライン色。
selectColor	RGBカラー	選択肢が選択された時の色。
textColor	RGBカラー	項目に表示されるテキストの色。
transColor	RGBカラー	画像が表示される時の透過色。
audioID	ビデオ番号	ビデオと関連づけられた音声チャンネルの番号。
subID	ビデオ番号	ビデオと関連づけられた字幕の番号。
thumbID	ビデオ番号	このメニュータイトル選択肢のビデオ番号
Bold	0=非太字 1=太字	テキストは標準または太字。
Font	フォント名	テキスト選択肢のフォントには、何らかのプログラムで表示される その通りのフォント名を使用してください。
fontSize	数値	表示されるフォントサイズ。
Height	ピクセル単位でのサイズ	表示される項目に関連づけられた領域の高さ。
Width	ピクセル単位でのサイズ	表示される項目に関連づけられた領域の幅。
X and Y	ピクセル単位での位置	表示領域の左上の角。
xAlign	center left right	定義された領域内での項目の水平方向のアラインメント（寄せ位置）。
yAlign	center top bottom	定義された領域内での項目の垂直方向のアラインメント（寄せ位置）。
Type	button image text	定義される項目のタイプ。
Outline	ピクセル数	項目を囲むアウトラインのサイズ。
Text	%projectTitle% メニュータイトル	テキストTypeとして定義された項目に表示されるテキスト。
backgroundImage	画像ファイル名	メニューページの背景に表示される画像。
Image	画像ファイル名
selectMethod	image outline text	メニュー選択肢の表示種別。
selectImage	画像ファイル名	selectMethodが"image"と定義されている場合に使用される画像。

色はRGB(Red, Green, Blue)形式で指定します。 最初の数は赤、2番目は緑、最後は青がそれぞれどの程度の強さかを示します。 これらの数は0から255の範囲です。

例えば、黒は 0,0,0 (赤なし, 緑なし, 青なし)で、白は 255,255,255 (赤最大, 緑最大, 青最大)です。

テンプレート中の各色の値は好きなRGB値に設定できます。 例えば、各項目はhighlightColor (192,0,0 -- 中間的な赤)と selectColor (255,0,0 -- 強い赤)を持ちます。

このファイルの最後にカラーチャートがあります。 特定の色を調整したい場合には、その値を少し調整しましょう。 テンプレート中の色で遊んでみてください。