注意:
Jalverトレーニングキットに含まれるHTMLファイル、画像データ、練習用Jalverデータは相互に相対指定で関連付けされていますので、Jalver.jar や画像データ等を移動させずに、解凍した時の状態でそのまま使用してください。
移動させる場合は、解凍した内容の位置関係を変えずに、フォルダごと移動させてください。
Lesson用データ以外のデータを作成したり、読み込んだりする場合は、Jalver.jar / Jalvam.jar を好きな場所にコピーして使用して問題ありません。できれば、Jalver.jar と Jalvam.jar は一緒のフォルダに置けば便利です。
レッスン 06
- 目標
- 主画像のタイトル設定と主画像貼り付け
Lesson06 では予め基本となるデータ(base06.jvam)作成されていますので、それを読み込んで、追加で学習するデータを作成してください。
- base06.jvam を読み込む。
- Jalver を起動する。
新しいデータを作成するので、前回のデータ作成確認画面で、「いいえ」を選択する。
メニューバーのファイル(F)-「新規に開く(O)」を選択し、ファイル選択画面で Lesson06 フォルダに入っている base06.jvam を選択する。
予めどのようなデータが作成されているかを見るためにスポット移動させて「主画像06」まで行って戻って来てください。
主画像と主画像01の副画像にスポット移動が付いています。
「主画像01」には Lesson06 というタイトルが付けられています。
- 主画像「新規作成」
- 既に作成されている主画像ルートとは別に、新しく追加の主画像ルートを作ります。
手順は最初の主画像ルートを作る場合と同じです。
主画像ルートの最初のページに副画像も設定します。
- 編集(E)-新規作成(N) を選択する。
- タイトル名入力で、これから作成しようとする主画像のタイトルを入力します。
「主画像貼付」と入力する。
データ画面のタイトル欄に「主画像貼付」と表示されている事を確認する。
- 1ページ目の作成
- 画像表示データの設定
- ここからは今まで何回も練習してきたところです。
- 主画像選択
- 主画像データ画像表示データパネルの「主画像」ボタンを押す。
ファイル選択画面を表示させ、main6-10.jpg を選択する。
ステージ画面に「主画像貼付01」と書かれた画像が表示されている事を確認する。
- 描画位置領域設定
- pX = 160, pY = 120, 幅 = 320 ぐらいにする。
- 副画像の設定
- 副画像新規作成
- 編集(E)-副画像(S)-新規作成(N)-ファイル選択(F) を選択する。
ファイル選択画面で、sub62-00.jpg を選択する。
- 出現方法
- 内部自動
- 出現位置
- pX = 80, pY = 181 ぐらいにする。
- 中間表示
- pX = 50, pY = 50, 幅 = 160 とする。
- 最大表示
- pX = 5, pY = 5, 幅 = 320 とする。
- 主画像移動スポットの設定
- スポットデータパネル表示
- ステージ画面で主画像をクリックするか、データ画面で、主画像データタブを押し、スポットデータタブを押して、スポットデータパネルを表示させる。
- スポット番号選択
- スポット0ボタンを押して(既定で選択されている)移動スポット0を選択する。
- 移動方法
- 移動方法コンボボックスで「前進」を選択
- スポット位置領域
- pX = 130, pY = 130, 幅 = 34, 高 = 36 ぐらいに設定する。
- 一言説明
- 「主画像貼付02へ」と入力する。
- スポット移動
- ステージ画面の水色スポット内でポップアップメニューを表示させ、ファイル選択を選ぶ。
ファイル選択画面で、main6-11.jpg を選択する。
ステージ画面に「主画像貼付02」と書かれた画像が表示されている事を確認する。
- 2ページ目
- スポットデータパネル表示
- ステージ画面で主画像をクリックするか、主画像データタブを押し、スポットデータタブを押して、スポットデータパネルを表示させる。
- スポット番号選択
- スポット0ボタンを押して(既定で選択されている)移動スポット0を選択する。
- 移動方法
- 移動方法コンボボックスで「前進」を選択
- スポット位置領域
- pX = 120, pY = 114, 幅 = 34, 高 = 36 ぐらいに設定する。
- 一言説明
- 「主画像貼付03へ」と入力する。
- スポット移動
- ステージ画面の水色スポット内でポップアップメニューを表示させ、ファイル選択を選ぶ。
ファイル選択画面で、main6-12.jpg を選択する。
ステージ画面に「主画像貼付03」と書かれた画像が表示されている事を確認する。
これで「主画像貼付」タイトルの主画像ルートの完成です。
このデータには「主画像01」ルートと「主画像貼付」ルートの2つの主画像ルートが存在する事になります。
- タイトル選択
- 現在設定されているタイトルは「Lesson06」と「主画像貼付」の2つです。
タイトルを持つ主画像は「タイトル選択」を行って画面に表示させる事ができます。
編集(E)-主画像(L)-タイトル選択(T)とするとタイトル選択画面が表示されます。
現在、画面に表示されているの「主画像貼付」ですので、タイトル選択コンボボックスで「Lesson06」を選択して、ステージ画面に「主画像01」と書かれた画像が表示されるのを確認してください。
同様にして、タイトル選択で「主画像貼付」を選択すると、「主画像貼付01」と書かれた画像を表示させる事ができます。
- タイトル設定
- 「主画像02」にタイトルを付けます。
- 「主画像02」への移動
- タイトル選択で「Lesson06」を選択してステージ画面に「主画像01」と書かれた画像を表示させてください。
データ画面の主画像パネル・スポットデータパネルを選択する。
ステージ画面に表示される水色のステージスポット(スポット0)内でポップアップメニューを表示させ、移動を選択する。
「主画像02」と書かれた画像をが表示されます。
- 「主画像02」タイトル設定
- この「主画像02」にタイトルを設定します。
メニュバーの編集(E)-主画像(L)-タイトル設定(E)を押して、タイトル名入力欄に「主画像02」と入力します。
「タイトル設定」では現在、画面に表示されている主画像に対してタイトルを付ける事ができます。
編集(E)-主画像(L)-タイトル選択(T)でタイトル選択コンボボックスを表示させ、タイトル名に「主画像02」が追加されている事を確認してください。
- タイトル削除
- 既に設定されているタイトルを削除する事ができます。
設定した「主画像02」を削除します。
「主画像02」の画像がステージ画面に表示されている事を確認してください。
編集(E)-主画像(L)-タイトル削除(D)とするとタイトル削除コンボボックスが表示されます。
削除したいタイトル(「主画像02」)を選択して了解を押してください。
編集(E)-主画像(L)-タイトル選択(T)としてタイトル選択コンボボックスを表示させ、「主画像02」が削除されている事を確認してください。
- 主画像貼付
- Jalvamでは主画像は副画像を持つ事はできますが、副画像が副画像を持つ事はできません。
そこで、副画像を持つ事の出来る主画像を副画像として設定し、副画像と主画像を取替えるという事で対処されています。
Jalvam では、副画像として貼り付けられた主画像は、それをクリックすると、最大表示した時に主画像に変わります。
この主画像貼付を利用すると、同一のページからいくつもの主画像グループを引き出す事ができるようになって、Jalvamでの画像によるタイトル一覧のような使い方ができて便利です。
話がややこしいですが、「論より証拠」で主画像貼付というのをやってみます。
主画像貼付にはタイトルを指定する方法と主画像のファイル名を指定する方法の2つがあります。
- タイトル選択による主画像貼付
- ステージ画面に「主画像01」と書かれた画像が表示されている事を確認してください。
表示されていない場合はタイトル選択で「Lesson06」を選択( 編集(E)-主画像(L)-タイトル選択(T)で「Lesson06」を選択)します。
編集(E)-副画像(S)-新規作成(N)-主画像貼付(P)を選択します。
主画像貼付タイトル選択画面が表示されます。
この時、データ画面では新しい副画像データパネルが追加されている事を確認してください。
この新しく追加された副画像にタイトル選択で選択した(タイトル付きの)主画像を貼り付けます。
タイトル選択画面で「主画像貼付」を選択して了解を押します。
主画像貼付を行うかどうかの確認画面で「はい」を選択します。
ステージ画面中央に「主画像貼付01」と書かれた画像が赤枠で表示されている事を確認してください。
最大表示領域が赤枠の時は主画像貼付が行われているという意味です。
ステージ画面に表示された「主画像貼付01」は副画像ですから、普通の副画像設定を行います。
- 出現方法設定
- 内部自動を選択する。
- 出現位置設定
- 「主画像01」の画面左側 pX = 33, pY = 101 ぐらいに設定する。
- 中間表示設定
- pX = 50, pY = 50, 幅 = 160 ぐらいに設定する。
- 重線設定
- スポット移動があるので、複数の画像が存在する意味を示すために重線コンボボックスに「重線左上」を設定する。
- 最大表示設定
- pX = 5, pY = 5, 幅 = 320 を設定する。
これで主画像貼付の設定は完了です。
JALVAM で見た場合には、「主画像貼付」とかかれた副画像(No.1)をクリックした時に、副画像として一度最大表示してから、貼り付けられた主画像位置に移動して、主画像としての設定を実行します。
- ファイル選択による主画像貼付
- ステージ画面に「主画像01」と書かれた画像が表示されている事を確認してください。
表示されていない場合は、主画像パネルを表示させて、編集(E)-主画像(L)-タイトル選択(T)で「Lesson06」を選択します。
副画像の最初のページに、主画像として設定済の画像を選択すると「主画像貼付」が実施されます。
ファイル選択による主画像貼付は、タイトルの設定されていない主画像を貼り付ける時に使用します。
- 副画像作成
- 編集(E)-副画像(S)-新規作成(N)-ファイル選択(F)を選択して、新しい副画像(N0.2)を作成します。
ファイル選択画面で、主画像として既に設定されている「main6-03.jpg」を選択します。
主画像貼付確認の画面が表示されたら、「はい」を選択して主画像貼付を実行します。
ステージ画面中央に「主画像貼付04」と書かれた画像が赤枠表示されている事を確認してください。
ステージ画面に表示された「主画像貼付02」は副画像ですから、普通の副画像設定を行います。
- 出現方法設定
- 内部自動を選択する。
- 出現位置設定
- 「主画像01」の画面右側 pX = 260, pY = 110 ぐらいに設定する。
- 中間表示設定
- pX = 430, pY = 50, 幅 = 160 ぐらいに設定する。
- 重線設定設定
- スポット移動があるので、複数の画像が存在する意味を示すために重線コンボボックスに「重線右上」を設定する。
- 最大表示設定
- pX = 315, pY = 5, 幅 = 320 を設定する。
これで主画像貼付の設定は完了です。
JALVAM で見た場合には、副画像(No.2)をクリックした時に、副画像として一度最大表示してから、貼り付けられた主画像位置に移動して、主画像としての設定を実行します。
主画像貼付は、移動スポットを持たない副画像の先頭ページに設定できます。
これで Lesson06 は終了です。
- データの保存
- メニューバーのファイル(F)を開いて、名前を付けて保存(A)を選択します。
ファイル保存画面が表示されたら、Lesson06 のフォルダを選択して、ファイル名を Lesson06.jvam (大文字・小文字を間違えない事)として保存ボタンを押します。
必ず Lesson06 フォルダの中にLesson06.jvam と正確に入力して保存してください。
- データ閲覧用のHTMLファイル作成
- Lesson01と同じ要領で閲覧用HTMLファイルを作成します。
Jalverのデータを閲覧するので、データを修正等した場合には必ず一度「(新規・上書き)保存」する必要があります。
メニューバーのツール(T)-閲覧HTML作成(V) を選択します。
各項目に記入されている事を確認して「了解」ボタンを押すだけでいい事にしましょう。
設定項目の内容については Lesson01 を参照してください。
「了解」ボタンを押すと、Lesson06フォルダの中に viewJalver.html というHTMLファイルが作成されます。
- Jalver の終了
- メニューバーのファイル(F)を開いて、終了(X)を選択します。
確認画面で「はい」を押して終了です。
- 作成したデータを閲覧する
エクスプロ−ラやマイコンピュータを使用して、Lesson06フォルダを開いて、中にある viewJalver.html (通常はダブルクリック)させてください。
このような画面が見れれば合格です。