注意:
Jalverトレーニングキットに含まれるHTMLファイル、画像データ、練習用Jalverデータは相互に相対指定で関連付けされていますので、Jalver.jar や画像データ等を移動させずに、解凍した時の状態でそのまま使用してください。
移動させる場合は、解凍した内容の位置関係を変えずに、フォルダごと移動させてください。
Lesson用データ以外のデータを作成したり、読み込んだりする場合は、Jalver.jar / Jalvam.jar を好きな場所にコピーして使用して問題ありません。できれば、Jalver.jar と Jalvam.jar は一緒のフォルダに置けば便利です。
Lesson 07
- 目標
- 主画像スポット反応を体験する。
Lesson7 では、副画像の主画像スポット反応を練習します。
主画像スポット反応は、主画像でスポット移動が行われた時の副画像の反応いいます。
分りやすく言うと、主画像でスポットがクリックされた時に、副画像も一緒に動くという事です。
予め基礎的なデータは入力済みなので、それを読み込んで練習します。
- 副画像が一つで、相手先の副画像が二つの場合
- 目標
- base70.jvam を読み込む。
- Jalver を起動する。
新しいデータを作成するので、前回のデータ作成確認画面で、「いいえ」を選択する。
メニューバーのファイル(F)-「新規に開く(O)」を選択し、ファイル選択画面で Lesson07 フォルダに入っている base70.jvam を選択する。
1ページ目には、主画像「主画像01」と副画像「副画像0」という1枚の副画像が表示されます。
主画像パネルのスポットデータパネルを選択して、スポット0でスポット移動してください。
2ページ目には、主画像「主画像02」と副画像(No.0)「副画像1-0」・副画像(No.1)「副画像1-1」という2枚の副画像が表示されます。
1ページ目の「主画像01」と2ページ目の「主画像02」はスポット移動でリンクされていますが、1ページ目の副画像と2ページ目の画像はリンクされていません。
主画像のスポット移動が行われると主画像から出現して、主画像へ戻るだけです。
副画像の主画像スポット反応を設定すると、主画像のスポット移動に合わせて、1ページ目の副画像と2ページ目の画像をリンクする事ができます。
- 副画像データパネルの表示
- ステージ画面中央に「主画像01」と書かれた画像が表示されている事を確認してください。
「主画像02」が表示されていたら「戻る」ボタンを押して戻ってください。
データ画面の副画像(No.0)データタブを押すか、ステージ画面で「副画像0」をクリックして、副画像(No.0)データパネルを開きます。
- 主画像スポット反応パネルの表示
- 副画像(No.0)の主画像スポット反応タブを押して、主画像スポット反応パネルを表示します。
ステージ画面では副画像の表示領域が水色になっている事を確認してください。副画像が水色枠で囲まれている時は「主画像スポットパネル」が選択されているという意味です。
- 主画像スポット番号選択
- 副画像を反応させる主画像のスポット番号を選択します。
現在は、主画像にはスポット0の一つしかスポット移動が設定されていませんので、「主スポット0」を選択します。(既定で選択状態になってる)
- 副画像移動先設定
- 「副画像移動先」ボタンを押してください。
相手先選択パネルが開いて、主画像スポット0の移動先ページの画像一覧が表示されます。
一覧の上から、主画像・副画像(No.0)・副画像(No.1)の順番に画像が表示されます。
ここでは、(縮小されて少し分りにくいですが)「副画像1-0」と書かれた副画像(No.0)の画像を選択して「了解」を押してください。
- 副画像移動先コンボボックスの確認
- 副画像移動先ボタンの横にあるコンボボックスに「副画像-0」と表示されます。
- 移動先画像の確認
- 左側の画像表示パネルに、さっき選択した「副画像1-0」という画像が表示されているのを確認してください。
- 反応スポット位置の設定
- 移動先を選択すると、ステージ画面には主画像スポット0に対する反応である意味で、水色のスポット(反応スポットと呼ぶ)が表示されます。
通常のスポット移動と同じようにして、移動位置を設定します。
pX = 126, pY = 106 ぐらいに設定してください。
- 移動方法の設定
- 通常のスポット移動と同じようにして移動方法を設定します。
ここでは「前進」を選択します。「フェード」と「なし」に設定すると反応スポット位置の設定はありません。
以上の設定で、「主画像01」のスポット0がクリックされた時に、「副画像0」が移動先の「副画像1-0」に移動します。
ここで、設定した動作を確認するために Lesson07-0.jvam というファイル名で保存します。
- データの保存
- メニューバーのファイル(F)を開いて、名前を付けて保存(A)を選択します。
ファイル保存画面が表示されたら、Lesson07 のフォルダを選択して、ファイル名を Lesson07-0.jvam (大文字・小文字を間違えない事)として保存ボタンを押します。
必ず Lesson07 フォルダの中にLesson07-0.jvam と正確に入力して保存してください。
- 閲覧HTMLファイルの作成
- 閲覧用のHTMLファイル作成
ステージ画面に「 Lesson07 」と書かれた画像が表示されている事を確認して、
メニューバーの ツール(T)-閲覧HTML作成(V) を選択し、
閲覧HTML設定画面を表示させます。
- 「HTML保存フォルダ選択」(ボタン)
- 初期値で指定されたまま、作成したデータ(Lesson07-0.jvam) が保存されているフォルダ(Lesson07)を指定しておきます。
- 「HTMLファイル名入力」(テキスト入力)
- 以前の Lesson では初期値の viewJalver.html のままでしたが、今回はちょっと変えてみましょう。
view07-0.html と入力してください。
拡張子を必ず「.html」としてください。
- 「Jalvam.jar選択」(ボタン)
-
- ここは既定値のままにしておきます。
了解ボタンを押すと、Lesson07フォルダの中に view07-0.html というHTMLファイルが作成されます。
- Jalver の終了
- メニューバーのファイル(F)を開いて、終了(X)を選択します。
確認画面で「はい」を押して終了です。
- 作成したデータを閲覧する
エクスプロ−ラやマイコンピュータを使用して、Lesson07フォルダを開いて、中にある view07-0.html を起動(通常はダブルクリック)させてください。
このような画面が見れれば合格です。
- 移動先を変更してみる
主画像の2ページ目には3枚の画像がありました。
副画像の主画像スポット反応パネルの副画像移動先を変えると、移動の様子も変わります。
サンプルを用意しましたが、自分でもやってみてください。
「副画像1-1」へ移動
「主画像」へ移動
- 副画像が二つで、相手先の副画像が一つの場合
- 目標
Lesson07-0 では、移動元の副画像が一つで移動先の副画像が二つの場合でしたが、今度は、逆に移動元が二つで移動先が一つの場合を見てみます。
- base71.jvamを読み込む
- Jalver を起動する。
メニューバーのファイル(F)-「新規に開く(O)」を選択し、ファイル選択画面で Lesson07 フォルダに入っている base71.jvam を選択する。
1ページ目には、主画像「主画像01」と副画像「副画像0-0」と副画像「副画像0-1」という2枚の副画像が表示されます。
主画像パネルのスポットデータパネルを選択して、スポット0でスポット移動してください。
2ページ目には、主画像「主画像02」と副画像(No.0)「副画像1-0」という1枚の副画像が表示されます。
1ページ目と2ページ目は主画像がリンクされているだけで、副画像はリンクされていません。
- 主画像スポット反応パネルを開く
- ステージ画面中央に「主画像01」と書かれた画像が表示されている事を確認してください。
「主画像02」が表示されていたら「戻る」ボタンを押して戻ってください。
主画像スポット反応は、移動元の複数の副画像を移動先の同一の副画像に対して同時にリンクする事はできません。
ここでは、「副画像0-0」を2ページ目の「副画像1-0」へ、「副画像0-1」を2ページ目の「主画像02」へそれぞれリンクさせます。
- 「副画像0-1」を「副画像1-0」にリンクする。
- 主画像スポット反応パネルの表示
- ステージ画面で「副画像0-1」をクリックするか、データ画面で副画像(No.0)タブを押して副画像(No.0)パネルを表示させる。
副画像(No.0)の主画像スポット反応タブを押して、主画像スポット反応パネルを表示させる。
ステージ画面で「副画像0-0」が水色になっているのを確認してください。
- 主画像スポット番号選択
- 「主スポット0」ボタンが選択状態で、ステージ画面に水色の反応スポットが表示されているのを確認する。
- 副画像移動先設定
- 副画像移動先ボタンを押して、「副画像1-0」を選択する。
- 副画像移動先コンボボックスの確認
- 副画像移動先コンボボックスに「副画像-0」と表示されているのを確認する。
- 反応スポット位置の設定
- 反応スポット位置を pX = 126, pY = 106 ぐらいに設定する。
- 移動方法の設定
- 「前進」にする。
これで、「主画像01」のスポット0がクリックされた時に、「副画像0-0」が移動先の「副画像1-0」に移動します。
- 「副画像0-1」を「主画像01」にリンクさせる。
- 主画像スポット反応パネルの表示
- ステージ画面で「副画像1-1」をクリックするか、データ画面で副画像(No.1)タブを押して副画像(No.1)パネルを表示させる。
副画像(No.1)の主画像スポット反応タブを押して、主画像スポット反応パネルを表示させる。
ステージ画面で「副画像0-1」が水色になっているのを確認してください。
- 主画像スポット番号選択
- 「主スポット0」ボタンが選択状態で、ステージ画面に水色の反応スポットが表示されているのを確認する。
- 副画像移動先設定
- 副画像移動先ボタンを押して、既に設定済みの「副画像1-0」を選択してみてください。
「選択できない」と表示される事を確認してください。
次に、副画像移動先ボタンを押して、「主画像02」を選択します。
- 副画像移動先コンボボックスの確認
- 副画像移動先コンボボックスに「主画像」と表示されているのを確認する。
- 反応スポット位置の設定
- 反応スポット位置を pX = 126, pY = 106 ぐらいに設定する。
- 移動方法の設定
- 「前進」にする。
この設定で、「主画像01」のスポット0がスポット移動する時に、「副画像0-1」は「主画像02」へ移動します。
最終的に、「主画像01」のスポット0には、「副画像0-0」と「副画像0-1」の両方に主画像スポット反応が設定されている事になりますので、「主画像01」のスポット0がクリックされた時には「副画像0-0」は「副画像1-0」へ、「副画像0-1」は「主画像02」へ移動する事になります。
- データの保存
- メニューバーのファイル(F)を開いて、名前を付けて保存(A)を選択します。
ファイル保存画面が表示されたら、Lesson07 のフォルダを選択して、ファイル名を Lesson07-1.jvam (大文字・小文字を間違えない事)として保存ボタンを押します。
必ず Lesson07 フォルダの中にLesson07-1.jvam と正確に入力して保存してください。
- 閲覧HTMLファイルの作成
- 閲覧用のHTMLファイルを作成します。
ステージ画面に「 Lesson07 」と書かれた画像が表示されている事を確認(1ページ目に副画像が二つ)して、
メニューバーのツール(T)-閲覧HTML作成(V) を選択し、
閲覧HTML設定画面を表示させます。
- 「HTML保存フォルダ選択」(ボタン)
- 初期値で指定されたまま、作成したデータ(Lesson07-1.jvam) が保存されているフォルダ(Lesson07)を指定しておきます。
- 「HTMLファイル名入力」(テキスト入力)
- 初期値の viewJalver.html を変えて、view07-1.html と入力してください。
拡張子を必ず「.html」としてください。
- 「Jalvam.jar選択」(ボタン)
-
- 既定値のままにしておきます。
了解ボタンを押すと、Lesson07フォルダの中に view07-1.html というHTMLファイルが作成されます。
- Jalver の終了
- メニューバーのファイル(F)-終了(X)を選択します。
確認画面で「はい」を押して終了です。
- 作成したデータを閲覧する
エクスプロ−ラやマイコンピュータを使用して、Lesson07フォルダを開いて、中にある view07-1.html を起動(通常はダブルクリック)させてください。
このような画面が見れれば合格です。
- 移動先を変えて見る
Lesson07-1 の設定を変えて、「副画像0-0」を主画像に、「副画像0-1」を「副画像1-0」へリンクさせるように自分でやってみてください。
- 複数の副画像に設定する
- Lesson7-0 Lesson7-1 では移動元・移動先のいずれかに副画像1つの場合でしたが、双方に複数の副画像が存在して同時に何枚も反応させるケースを見て見ましょう
- base72.jvamを読み込む
- Jalver を起動する。
- メニューバーのファイル(F)-「新規に開く(O)」を選択し、ファイル選択画面で Lesson07 フォルダに入っている base72.jvam を選択する。
1ページ目には、主画像「主画像01」と「副画像0-0」「副画像0-1」「副画像0-2」という3枚の副画像が表示されます。
スポット0は2ページ目の「主画像02」にリンクしています。
2ページ目では(スポット移動させると)、主画像「主画像02」と「副画像1-0」「副画像1-1」「副画像1-2」という3枚の副画像が表示されます。
Lesson7-2 では次のような設定をします。
1ページ目の主画像スポットをクリックすると、3枚の副画像に2ページ目の3枚の副画像を反応させるという設定です。
- 主画像スポット反応 「主スポット0」を設定する。
- 主画像のスポット0をクリックした時に、「主画像01」を2ページ目の「主画像02」に、同様に「副画像0-0」→「副画像1-0」、同様に「副画像0-1」→「副画像1-1」、「副画像0-2」→「副画像1-2」にリンクさせます。
- 主画像スポット反応パネルの表示
- 「副画像0-0」→『副画像0-1」を設定します。
リンク元となる副画像は「副画像0-0」なので、副画像「副画像0-0」のデータパネルを開く。
ステージ画面に「主画像01」と書かれた画像が中央にある事を確認して(「主画像02」が表示されている場合は戻るボタンを押してください)、ステージ画面で「副画像0-0」をクリックするか、データ画面で副画像Np.0タブを押して、副画像データパネルを開く。
(副画像No.0)の主画像スポット反応タブを押して、主画像スポット反応パネルを開く。
ステージ画面で「副画像0-0」の画像に水色枠が付いて、水色のステージスポットがある事を確認する。
- 主画像スポット番号選択
- 副画像0-0を反応させる主画像のスポットはスポット0ですから、「主スポット0」ボタンを選択します。
ステージ画面に水色のステージスポットが付いている事を確認してください。
- 副画像移動先設定
- 副画像移動先ボタンを押して、「副画像1-0」を選択する。
- 副画像移動先コンボボックスの確認
- 副画像移動先コンボボックスに「副画像1-0」と表示されているのを確認する。
- 反応スポット位置の設定
- 反応スポット位置を pX = 126, pY = 106 ぐらいに設定する。
- 移動方法の設定
- 「前進」にする。
これで、「主画像01」のスポット0がクリックされた時に、「副画像0-0」が主画像移動先(主画像02)の「副画像1-0」に移動します。
同様にして他の二つの副画像についても設定します。
手順は「副画像0-0」の場合と同じですので、「副画像0-1」を「副画像1-1」に、「副画像0-2」を「副画像1-2」に設定してみて下さい。
- データの保存
- メニューバーのファイル(F)を開いて、名前を付けて保存(A)を選択します。
ファイル保存画面が表示されたら、Lesson07 のフォルダを選択して、ファイル名を Lesson07-2.jvam (大文字・小文字を間違えない事)として保存ボタンを押します。
必ず Lesson07 フォルダの中にLesson07-2.jvam と正確に入力して保存してください。
- 閲覧HTMLファイルの作成
- 閲覧用のHTMLファイルを作成します。
Jalverのデータを閲覧するので、データを修正等した場合には必ず一度「(新規・上書き)保存」する必要があります。
ステージ画面に「 Lesson07 」と書かれた画像が表示されている事を確認して、
メニューバーのツール(T)-閲覧HTML作成(V) を選択し、
閲覧HTML設定画面を表示させます。
- 「HTML保存フォルダ選択」(ボタン)
- 初期値で指定されたまま、作成したデータ(Lesson07-2.jvam) が保存されているフォルダ(Lesson07)を指定しておきます。
- 「HTMLファイル名入力」(テキスト入力)
- 初期値の viewJalver.html を変えて view07-2.html と入力してください。
拡張子を必ず「.html」としてください。
- 「Jalvam.jar選択」(ボタン)
-
- 既定値のままにしておきます。
了解ボタンを押すと、Lesson07フォルダの中に view07-2.html というHTMLファイルが作成されます。
- Jalver の終了
- メニューバーのファイル(F)-終了(X)を選択します。
確認画面で「はい」を押して終了です。
- 作成したデータを閲覧する
エクスプロ−ラやマイコンピュータを使用して、Lesson07フォルダを開いて、中にある view07-2.html を起動(通常はダブルクリック)させてください。
このような画面が見れれば合格です。
副画像の移動先の設定を変えた場合を作ってみましたので参考にしてください。
Lesson07 は少し長かったですが、これで終了です。