注意: Jalverトレーニングキットに含まれるHTMLファイル、画像データ、練習用Jalverデータは相互に相対指定で関連付けされていますので、Jalver.jar や画像データ等を移動させずに、解凍した時の状態でそのまま使用してください。

移動させる場合は、解凍した内容の位置関係を変えずに、フォルダごと移動させてください。

Lesson用データ以外のデータを作成したり、読み込んだりする場合は、Jalver.jar / Jalvam.jar を好きな場所にコピーして使用して問題ありません。できれば、Jalver.jar と Jalvam.jar は一緒のフォルダに置けば便利です。


レッスン 03

目標
ステージ画面にコメントを表示する


レッスン1の時と同じように主画像の最初の画像を表示します。


主画像を表示させる
Jalver を起動する。
新しいデータを作成するので、前回のデータ作成確認画面で、「いいえ」を選択する。
ファイル(F)-新規作成(N)を選択する。
初期設定画面が表示される。
Lesson03 で必要とする画像は Lesson03 フォルダに入ってます。
「画像フォルダ」ボタンを押して、Lesson03 フォルダを選択する。
画像フォルダとして Lesson03 が記入されているのを確認して、初期設定画面の了解を押す。

タイトル名入力に Lesson03 と入力する。


1ページ目の作成
 画像表示データパネルの設定
データ画面の主画像パネル・画像表示データデータパネルを選択して、「主画像」ボタンを押し、画像として main30.jpg を選択する。
ステージ画面に「主画像01」と書かれた画像が表示される事を確認する。


 画面表示データの設定
「主画像01」(main0.jpg) をステージ画面の中央に表示するために、pX=160 pY=120 幅=320 高=240 とします。
幅入力欄をクリックして、320 と入力する。
pX入力欄をクリックして、160 と入力する。
pY入力欄をクリックして、120 と入力する。


最初のコメントを表示する
 コメントデータパネルの選択
データ画面で主画像パネルが開いている事を確認して、コメントデータタブを押して、コメントデータパネルを選択します。
コメントが何もない場合は、「新規」ボタンだけが選択可能となっています。
最初のコメントを作成するために「新規」ボタンを押してください。


 コメント選択(コメントコンボボックス)
「新規」ボタンを押すと、コメントコンボボックスにこれから編集しようとするコメントの番号が、「N0.0」と表示されます。
コメントボックスに表示されている番号は現在選択され、編集中のコメントの番号であるという意味です。


コメント入力(コメントボックス)
コメントパネル内一番下にある大きな入力場所(コメントボックスと呼ぶ)をクリックして Lesson03 と入力してください。
コメントボックスに入力した文字はステージ画面に反映されます。
ステージ画面の左上に、入力ボックスに入力された文字(Lesson03)が表示されている事を確認してください。


 コメント位置設定
コメントの位置(最初の文字の左上)はデータ画面とステージ画面の両方で設定できます。

コメントパネルの pX の入力欄をクリックします。
ステージ画面では Lesson03 というコメントが白い枠線で囲まれた事を確認してください。
白い枠線で囲まれたコメントが、現在編集中のコメントであるという意味です。

コメントデータパネルでの設定:
pX の入力欄に 50 と入力します。
ステージ画面のコメントが x座標 50 の位置に移動します。
同様にして、コメントパネルの pY の入力欄に 50 と入力します。
これで、データ画面 pX = 50, pY = 50 となって, ステージ画面のコメントが x座標 50, y座標 50 の位置に移動します。

ステージ画面での設定:
今度はステージ画面の Lesson03 というコメントをクリックして、白い枠線の四つ角にカーソルを合わせて、形状が四方向カーソルに変わったらドラッグしてください。
ステージ画面のコメントが移動し、それに対応して、データ画面のコメントパネルの pX, pY の値が変化する事が確認できます。

 描画方法選択(描画方法コンボボックス)
描画方法と書かれたコンボボックスでの選択で、HTMLで見たときに、主画像が表示されると同時に表示されるコメントの表示方法を選択できます。

通常表示:普通に表示されます。
フェードイン:フェードインして表示されます。

ここでは「通常表示」を選択してください。

 文字フォント選択
フォントコンボボックスで、使用する文字フォントを選択します。
ステージ画面では、選択された文字フォントに対応する文字でコメント表示されます。
「Serif」 を選択してください。


 文字スタイル選択
スタイルコンボボックスで文字スタイルを選択します。
ステージ画面では、選択された文字スタイルに対応する文字でコメント表示されます。 「Bold」 を選択してください。


 文字サイズ選択
サイズコンボボックスで文字サイズを選択します。
ステージ画面では、選択された文字フォントに対応する文字でコメント表示されます。
「22ポイント」を選択してください。


以上の設定が終わったら 、Lesson03というコメントを主画像上部中央に表示させるために、ステージ画面の Lesson03コメントの白い枠線の四隅にカーソルを合わせ、形状が四方向カーソルに変わったらドラッグして、主画像上部中央まで移動させます。
データ画面では、pX = 270, pY = 70 ぐらいです。以下の設定を確認してください。

コメント番号 No.0
pX = 270
pY = 70
描画方法 通常表示
フォント Serif
スタイル Bold
サイズ  22
入力   Lesson03


二個目のコメントを追加する
一つ目と同じ方法でもう一つコメントを追加します。


 コメント選択
「新規」ボタンを押す。
コメントコンボボックスにこれから編集しようとするコメントの番号が、「N0.1」と表示されます。


 コメント入力
入力ボックスをクリックして「 副画像に移動スポットを(Enter)つける 」と入力してください。
(Enter は Enterキーを押すという意味です。)
ステージ画面の左上に、「 副画像に移動スポットを(Enter)つける 」という二行のコメントが表示されます。


 コメント位置設定
pX の入力欄をクリックします。
コメントが白い枠線で囲まれた事を確認してください。
No.0 の場合と同様にして、ステージ画面の コメントをクリックして、白い枠線の四隅にカーソルを合わせて、形状が四方向カーソルに変わったらドラッグしてください。
ステージ画面の主画像右側(データ画面では、pX = 500, pY = 230 ぐらい)まで移動させます。


 描画方法選択
描画方法コンボボックスでコメントを表示方法を「フェードイン」に設定します。
HTMLで見た時に、主画像が表示されるとコメントがフェードインして表示されます。


 文字フォント選択
フォントコンボボックスで dialogInput を選択します。


 文字スタイル選択
スタイルコンボボックスで Plain を選択します。


 文字サイズ選択
サイズコンボボックスで 12ポイントを選択します。


以上で二個目のコメント設定が完了しました。

コメントを削除する。
削除練習をするために、「削除テスト」という一時的なコメントを追加して、主画像下側に表示させ、それを削除します。


 コメント選択
「新規」ボタンを押します。
コメントコンボボックスにこれから編集しようとするコメントの番号が、「N0.2」と表示されます。


 コメント入力
コメントパネルの入力ボックスをクリックして「削除テスト 」と入力してください。


 コメント位置設定
ステージ画面の左上に、「 削除テスト 」が表示されます。
コメントパネルの pX の入力欄をクリックします。
コメントが白い枠線で囲まれた事を確認してください。
No.0 の場合と同様にして、ステージ画面の コメントをクリックして、白い枠線の四隅にカーソルを合わせて、形状が四方向カーソルに変わったらドラッグしてください。
ステージ画面の主画像下側(データ画面では、pX = 330, pY = 370 ぐらい)まで移動させます。


 描画方法選択
描画方法コンボボックスでコメントを表示方法を「通常表示」に設定します。


 文字フォント選択
フォントコンボボックスで Serif を選択します。


 文字スタイル選択
スタイルコンボボックスで BoldItalic を選択します。


 文字サイズ選択
サイズコンボボックスで 16ポイントを選択します。


以上で三個目のテスト用コメント設定が完了しました。

現在、ステージ画面には主画像、コメント「 Lesson03 」、コメント「 副画像に移動スポットを(Enter)つける 」、コメント「削除テスト」という3つが表示されています。
ステージ画面でそれぞれを交互にクリックして、データ画面で編集するデータパネルが変化するのを確認してください。
データ画面のパネルタブを押したり、コメントデータパネルの、コメントコンボボックスの選択を変更したりして、ステージ画面での選択の変更を確認してください。

 コメントの削除
ステージ画面で削除するコメント(「削除テスト」)をクリックするか、データ画面でコメントパネルのコメントコンボボックスで削除する番号(N0.2)を選択して、コメントデータパネルにコメントデータを表示します。
削除ボタンを押します。
「削除テスト」のコメントが削除されたのを確認してください。


データの保存
メニューバーのファイル(F)を開いて、名前を付けて保存(A)を選択します。
ファイル保存画面が表示されたら、Lesson03 のフォルダを選択して、ファイル名を Lesson03.jvam (大文字・小文字を間違えない事)として保存ボタンを押します。
必ず Lesson03 フォルダの中にLesson03.jvam と正確に入力して保存してください。


データ閲覧用のHTMLファイル作成
Lesson01と同じ要領で閲覧用HTMLファイルを作成します。
Jalverのデータを閲覧するので、データを修正等した場合には必ず一度「(新規・上書き)保存」する必要があります。
メニューバーのツール(T)-閲覧HTML作成(V) を選択します。
各項目に記入されている事を確認して「了解」ボタンを押すだけでいい事にしましょう。
設定項目の内容については Lesson01 を参照してください。
「了解」ボタンを押すと、Lesson03フォルダの中に viewJalver.html というHTMLファイルが作成されます。

Jalver の終了
メニューバーのファイル(F)を開いて、終了(X)を選択します。
確認画面で「はい」を押して終了です。


作成したデータを閲覧する
エクスプロ−ラやマイコンピュータを使用して、Lesson03フォルダを開いて、中にある viewJalver.html (通常はダブルクリック)させてください。
このような画面が見れれば合格です。