注意:
Jalverトレーニングキットに含まれるHTMLファイル、画像データ、練習用Jalverデータは相互に相対指定で関連付けされていますので、Jalver.jar や画像データ等を移動させずに、解凍した時の状態でそのまま使用してください。
移動させる場合は、解凍した内容の位置関係を変えずに、フォルダごと移動させてください。
Lesson用データ以外のデータを作成したり、読み込んだりする場合は、Jalver.jar / Jalvam.jar を好きな場所にコピーして使用して問題ありません。できれば、Jalver.jar と Jalvam.jar は一緒のフォルダに置けば便利です。
レッスン 05
- 目標
- 副画像に移動スポットを設定する
副画像移動と副画像の主画像へのリンクを理解する。
副画像に枠線を付ける。
Lesson05 は後半の「副画像の主画像リンク」の部分の説明がうまく出来ていないので、もう一度作り直してみます。
後半がよく分らないという場合も気にせずに先に進んでください。
Lesson05 では予め作成されているデータ(base05.jvam)を読み込んで、追加データを作成する方法をします。
base05.jvam は Lesson02 で練習した主画像のスポット移動が作成されています。
副画像のスポット移動完成後に一度保存して、データを追加して、Lesson05 を完成させます。
- 新規でファイルを読み込む
- Jalver を起動する。
新しいデータを作成するので、前回のデータ作成確認画面で、「いいえ」を選択する。
ファイル(F)-新規で開く(O)を選択する。
ファイル選択画面で Lesson05 フォルダを開いて、base05.jvam を選択する。
画像フォルダとタイトルはデータの中に入ってますから、すぐに作成画面になります。
ステージ画面中央に「主画像01」とかかれた画像が表示されるのを確認する。
どのようなデータが作成されているのかを見るために、主画像をスポット移動させて「主画像06」まで行って、「主画像01」へ戻ってください。
スポット移動の仕方はLesson02で練習しましたが、もう一度書いておきます。
主画像パネルのスポットデータパネルを開く。
ステージ画面でステージスポット内でポップアップメニューを表示させ、移動を選択する。
- 副画像のスポット移動
- 副画像のスポット移動は新しい練習です。
新しいと言っても主画像のスポット移動と同じだと言う事がわかります。
- 副画像設定(Lesson04 の復習)
- Lesson04で学習したように、副画像を設定します。
- 副画像の作成
- ステージ画面に「主画像01」と書かれた画像が表示されているのを確認してください。
新しい副画像を作成する。
メニューバーの「編集(E)」を押して、副画像(S)-新規作成(N)-ファイル選択(F) を選択する。
ファイル選択画面で sub50.jpg を選択します。
ステージ画面に 「副画像01」と書かれた画像が表示され、データ画面には「No.0」という副画像パネルが表示される事を確認する。
副画像No.0の「画像表示データ」ボタンの横に sub50.jpg と書かれているのを確認する。
- 出現方法設定
- 出現方法コンボボックスで「自動出現」を選択する。
- 出現位置設定
- 出現位置ボタンを押して、ステージ画面に(肌色の)出現スポットを表示させ、pX = 39, pY = 70 ぐらいに設定する。
- 中間表示設定
- 中間表示ボタンを押して、ステージ画面で画像が緑色の枠で囲まれた事を確認し、左上に最大表示の半分の大きさで中間表示させる。
中間表示ボタン横に pX = 50, pY = 50, 幅 = 160 と入力する。
- 最大表示設定
- 最大表示ボタンを押して、画像の枠線が黄色になっている事を確認して、ステージ画面でステージ左上に画像の大きさ(幅320)で表示させます。
データ画面の最大表示ボタンの横に pX = 5, pY = 5, 幅 = 320 と入力する。
これで最初の副画像の設定は完了です。
ここまでは、Lesson04 で練習した内容です。
うまく出来なかったら、Lesson04 へ戻ってください。
- 副画像に移動スポットを設定する。
- 副画像スポット移動
- 副画像のスポット移動の設定の仕方は、主画像の場合と同じですので、主画像スポット移動(Lesson02)が習得できていれば細かい説明は必要ありません。違うのは主画像スポット移動が主画像パネルのスポットデータパネルを使用するのに対し、副画像スポット移動は副画像パネルのスポットデータパネルを使用する事です。
Lesson05 では三つのスポットを使用しますが、ここでは「副画像01」の左下スポット0を使用して副画像スポット移動を設定します。
- 副画像パネルを開く
- ステージ画面で副画像をクリックするか、データ画面の副画像タブ(No.0)を押して副画像パネルを表示させます。
副画像パネルのスポットデータタブを押してスポットデータパネルを表示させます。既定でスポット0ボタンが押されています。
ステージ画面では副画像が茶色枠で表示され、水色の移動スポットが表示されています。
- スポットデータパネルの設定
- 副画像パネル・スポットデータタブを押して、スポットデータパネルを選択する。
- スポット番号選択
- 「スポット0」ボタンを押す。
- 移動方法の選択
- 移動方法コンボボックスで「前進」を選択する。
- ステージスポットの位置・領域設定
- ステージスポットをドラッグして移動し、大きさを設定する。
データ画面では pX = 89, pY = 124, 幅 = 64, 高 = 26 ぐらいになっていれば完了です。
- 一言説明(ツールチップ)
- 一言説明の入力欄に「副画像02へ(前進)移動」と入力してEnterを押す。
- 移動先指定
- 以上の設定が終わったら、ステージスポット内でポップアップメニューを表示させ、ファイル選択を選ぶ。
ファイル選択画面で、sub51.jpg を選択する。
「副画像02」と書かれた画像が表示されているのを確認する。
- 副画像2ページ目の作成
- スポットデータパネルの設定
- 副画像パネル・スポットデータタブを押して、スポットデータパネルを選択する。
- スポット番号選択
- 「スポット0」ボタンを押す。
- 移動方法の選択
- 移動方法コンボボックスで「拡大フェード」を選択する。
- ステージスポットの位置・領域設定
- ステージスポットをドラッグして移動し、大きさを設定する。
データ画面では pX = 89, pY = 115, 幅 = 46, 高 = 34 ぐらいになっていれば完了です。
- 一言説明(ツールチップ)
- 一言説明の入力欄に「副画像03へ(拡大フェード)移動」と入力してEnterを押す。
- 移動先指定
- 以上の設定が終わったら、ステージスポット内でポップアップメニューを表示させ、ファイル選択を選ぶ。
ファイル選択画面で、sub52.jpg を選択する。
「副画像02」と書かれた画像が表示されているのを確認する。
- 副画像3ページ目の作成
- スポットデータパネルの設定
- 副画像パネル・スポットデータタブを押して、スポットデータパネルを選択する。
- スポット番号選択
- 「スポット0」ボタンを押す。
- 移動方法の選択
- 移動方法コンボボックスで「前進フェード」を選択する。
- ステージスポットの位置・領域設定
- ステージスポットをドラッグして移動し、大きさを設定する。
データ画面では pX = 185, pY = 112, 幅 = 50, 高 = 26 ぐらいになっていれば完了です。
- 一言説明(ツールチップ)
- 一言説明の入力欄に「副画像04へ(前進フェード)移動」と入力してEnterを押す。
- 移動先指定
- 以上の設定が終わったら、ステージスポット内でポップアップメニューを表示させ、ファイル選択を選ぶ。
ファイル選択画面で、sub53.jpg を選択する。
「副画像03」と書かれた画像が表示されているのを確認する。
- 副画像4ページ目の作成
- スポットデータパネルの設定
- 副画像パネル・スポットデータタブを押して、スポットデータパネルを選択する。
- スポット番号選択
- 「スポット0」ボタンを押す。
- 移動方法の選択
- 移動方法コンボボックスで「フェード」を選択する。
- ステージスポットの位置・領域設定
- ステージスポットをドラッグして移動し、大きさを設定する。
データ画面では pX = 148, pY = 104, 幅 = 48, 高 = 38 ぐらいになっていれば完了です。
- 一言説明(ツールチップ)
- 一言説明の入力欄に「副画像05へ(フェード)移動」と入力してEnterを押す。
- 移動先指定
- 以上の設定が終わったら、ステージスポット内でポップアップメニューを表示させ、ファイル選択を選ぶ。
ファイル選択画面で、sub54.jpg を選択する。
「副画像05」と書かれた画像が表示されているのを確認する。
- 副画像5ページ目の作成
- スポットデータパネルの設定
- 副画像パネル・スポットデータタブを押して、スポットデータパネルを選択する。
- スポット番号選択
- 「スポット0」ボタンを押す。
- 移動方法の選択
- 移動方法コンボボックスで「なし」を選択する。
- ステージスポットの位置・領域設定
- ステージスポットをドラッグして移動し、大きさを設定する。
データ画面では pX = 172, pY = 102, 幅 = 77, 高 = 34 ぐらいになっていれば完了です。
- 一言説明(ツールチップ)
- 一言説明の入力欄に「副画像06へ(なし)移動」と入力してEnterを押す。
- 移動先指定
- 以上の設定が終わったら、ステージスポット内でポップアップメニューを表示させ、ファイル選択を選ぶ。
ファイル選択画面で、sub55.jpg を選択する。
「副画像06」と書かれた画像が表示されているのを確認する。
これで副画像のスポット移動設定は完了です。
「副画像01」まで「戻る」ボタンを押して戻ってください。
- 副画像に枠線をつける
- 副画像が一枚ではなくて、その先に複数枚重なっている事を示すために、副画像の先頭ページの中間表示時に重線をつけます。
「副画像01」(先頭ページ)が表示されている事を確認してください。
データ画面で副画像タブ(No.0)を押して、副画像パネルを表示させ、画像表示データタブを押して画像表示パネルを表示させます。
中間表示ボタンの横にある重線コンボボックスをクリックして「重線左上」を選択します。ステージ画面で重線の表示位置を確認してください。
続けて Lesson05 を完成させる前に、仮のファイル名(test01.jvam)で一度保存して、コメント表示と副画像のスポット移動の動作を確認します。
- データの保存
- メニューバーのファイル(F)を開いて、名前を付けて保存(A)を選択します。
ファイル保存画面が表示されたら、Lesson05 のフォルダを選択して、ファイル名を test01.jvam (すべて小文字)として保存ボタンを押します。
必ず Lesson05 フォルダの中に test01.jvam と正確に入力して保存してください。
- データ閲覧用のHTMLファイル作成
- Lesson01と同じ要領で閲覧用HTMLファイルを作成します。
メニューバーのツール(T)-閲覧HTML作成(V) を選択します。
各項目に記入されている事を確認して「了解」ボタンを押すだけでいい事にしましょう。
設定項目の内容については Lesson01 を参照してください。
「了解」ボタンを押すと、Lesson05フォルダの中に viewJalver.html というHTMLファイルが作成されます。
- Jalver の終了
- メニューバーのファイル(F)を開いて、終了(X)を選択します。
確認画面で「はい」を押して終了です。
Lesson05フォルダのHTMLファイルを起動して副画像のスポット移動を確認してください。
test01 では副画像の移動先の描画位置と移動元の描画位置が同じになってますが、描画位置が異なる場合には、主画像の場合と同様に移動します。
移動方法がフェード以外は移動元の中心が移動先の中心に一致するように描画位置を移動してから、次の画像に移動します。
サンプルを作りましたので、その様子をみてください。
- 副画像の主画像へのリンクを確認する。
- 副画像から副画像へ、主画像から主画像へのスポット移動した時の動作は確認しました。
ここでは主画像から(既に設定済みの)副画像にスポット移動した場合、逆に、副画像から(既に設定済みの)主画像にスポット移動した場合の動作を確認します。
少しややこしいですけど、「論より証拠」で実際にやってみれば分かります。
結論を先に言うと、「副画像の先頭ページからのみ、主画像へスポット移動できる」と覚えておいて貰えれば十分です。
ディスクに保存されている text01.jvam を読み込みます。
Jalver を起動して、メニューバーのファイル(F)-「新規に開く(O)」を選択し、ファイル選択画面で Lesson05 フォルダに入っている test01.jvam を選択します。
- 副画像の移動スポットに主画像を設定する。
- ステージ画面中央に main01 と表示されている(つまり主画像1ページ目である)のを確認してください。
- 副画像選択
- ステージ画面の副画像をクリックするか、データ画面で副画像タブ(No.0)を押して、副画像パネルを表示させます。
- 副画像スポット移動
- 副画像パネルのスポットデータタブを押して、副画像スポットパネルを表示させます。
スポット0は既に設定済みである事を確認して、スポット1ボタンを押します。
ステージ画面では緑色のステージスポット(スポット1の意味)が表示されます。
- 移動方法選択
- 移動方法コンボボックスで「前進」を選択する。
- 移動位置・領域選択
- 緑色のステージスポットを「スポット1 主画像リンク」と書かれた目標までドラッグして移動し、大きさを設定する。
データ画面では pX = 233, pY = 108, 幅 = 36, 高 = 40 ぐらいになっていれば完了です。
- 一言説明(ツールチップ)
- 一言説明の入力欄に「主画像04へ 主画像リンク」と入力してEnterを押す。
- 移動先指定
- 以上の設定が終わったら、緑色のステージスポット内でポップアップメニューを表示させ、ファイル選択を選ぶ。
ファイル選択画面で、主画像として既に設定済みの main53.jpg を選択する。
確認のパネルが表示されますので、「はい:主画像へリンクする」を選択します。
ステージ画面中央に 「主画像04」 と表示される事、データ画面で主画像パネルが選択されている事を確認してください。
主画像の先頭ページ(主画像01)から、主画像02・主画像03を通り越して主画像04へ移動しました。
副画像ルートから主画像ルートへ移動した事を意味します。
主画像04に設定されている緑色のステージスポット内でポップアップメニューを表示させ「移動」を選択すると、以前に主画像として設定した「主画像05」に設定していた通り移動します。
戻るボタンを押して、主画像04へ戻ります。もう一度戻るボタンを押すと主画像3・主画像2を無視して先頭ページに戻ります。
主画像ルートから副画像ルートに戻った事を意味します。
- 副画像の移動スポットに設定済の主画像と同じ画像を副画像としてリンクする。
- ステージ画面中央に main01 と表示されている(つまり主画像1ページ目である)のを確認してください。
- 副画像選択
- ステージ画面の副画像をクリックするか、データ画面で副画像タブ(No.0)を押して、副画像パネルを表示させます。
ステージ画面左上に「副画像01」と書かれた画像が表示されているのを確認する。
- 副画像スポット移動
- 副画像パネルのスポットデータタブを押して、副画像スポットパネルを表示させます。
スポット0・スポット1は既に設定済みである事を確認して、スポット2ボタンを押します。
ステージ画面ではピンクのステージスポット(スポット2の意味)が表示されます。
- 移動方法選択
- 移動方法コンボボックスで「前進」を選択する。
- 移動位置・領域選択
- ステージスポットを「スポット2 副画像リンク」と書かれた目標までドラッグして移動し、大きさを設定する。
データ画面では pX = 150, pY = 54, 幅 = 34, 高 = 36 ぐらいになっていれば完了です。
- 一言説明(ツールチップ)
- 一言説明の入力欄に「主画像04へ 副画像としてリンク」と入力してEnterを押す。
- 移動先指定
- 以上の設定が終わったら、ピンクのステージスポット内でポップアップメニューを表示させ、ファイル選択を選ぶ。
ファイル選択画面で、主画像として既に設定済みの main53.jpg(スポット1と同じ画像) を選択する。
確認のパネルが表示されますので、「いいえ:副画像としてリンクする」を選択します。
ステージ画面左上の副画像領域に 「主画像04」 と表示される事、データ画面で副画像パネルが選択されている事を確認してください。
このスポット移動では、既に主画像として設定されている画像が副画像としてリンクされ、主画像としての設定がキャンセルされて、新しい画像にリンクしたという意味です。
副画像の中で設定済みの主画像を副画像として利用する場合に使います。
それでは、この「主画像04」と表示されている副画像に、更に移動スポットをつけます。
- 副画像選択
- ステージ画面の副画像をクリックするか、データ画面で副画像タブ(No.0)を押して、副画像パネルを表示させます。
ステージ画面左上に「主画像04」と表示されている画像がある事を確認します。
- 副画像スポット移動
- 副画像パネルのスポットデータタブを押して、副画像スポットパネルを表示させます。
スポット0ボタンを押します。
ステージ画面では水色のステージスポット(スポット0の意味)が表示されます。
- 移動方法選択
- 移動方法コンボボックスで「前進」を選択する。
- 移動位置・領域選択
- ステージスポットを「副画像01 スポット0」と書かれた目標までドラッグして移動し、大きさを設定する。
データ画面では pX = 211, pY = 43, 幅 = 34, 高 = 36 ぐらいになっていれば完了です。
- 一言説明(ツールチップ)
- 一言説明の入力欄に「副画像01-0へ移動」と入力してEnterを押す。
- 移動先指定
- 以上の設定が終わったら、水色のステージスポット内でポップアップメニューを表示させ、ファイル選択を選ぶ。
ファイル選択画面で、主画像として既に設定済みの sub50-0.jpg を選択する。
設定が終わったら「戻る」ボタンを押して先頭ページまで戻ってください。戻る過程も主画像リンクとは違っているのが分ります。
まとめると「副画像の先頭ページ」で、既に主画像として設定されている画像にスポット移動しようとした時に次の選択ができます。
- 主画像リンク
- 確認画面で「はい:主画像へリンクする」を選択すると設定された主画像に移動する。
移動後のデータ画面では主画像パネルが選択される。
主画像リンクは、副画像の先頭ページでのみ設定ができ、2ページ目以降では主画像に移動できない。
- 副画像リンク
- 「いいえ:副画像としてリンクする」を選択すると、その移動では主画像としての設定は解除されて副画像として取り扱われる。
移動後のデータ画面では副画像パネルが選択される。
副画像の2ページ目以降に主画像として設定されている画像へスポット移動しようとした時の動作をみるために、2ページ目の「副画像02」から、主画像として設定されている画像へスポット移動してみます。
- 副画像01に移動スポットを設定する。
- 副画像スポットデータパネルの選択
- ステージ画面中央に「主画像01」と書かれた画像が表示されている事を確認し、データ画面で副画像タブ(No.0)を押して副画像パネルを表示させる。
「主画像01」でない場合は「戻る」ボタンを押して、主画像の先頭ページまで戻ってください。
副画像パネルのスポットデータタブを押して、スポットデータパネルを表示させる。
- スポット移動
- ステージ画面の左上に「副画像01」と書かれている画像が大きく表示され、茶色の枠で囲まれて、水色(スポット0)・緑色(スポット1)・ピンク(スポット2)のステージスポットが表示されている事を確認する。
2ページ目にスポット移動するために水色(スポット0)のステージスポット内でポップアップメニューを表示させ移動を選択する。
- スポットボタン選択
- 「副画像02」と書かれた画像が表示され、水色(スポット0)のステージスポットが表示されている事を確認する。
水色のステージスポットが確認できない場合は、データ画面のスポットデータタブを押してスポットデータパネルを表示させてください。
スポットデータパネルでスポット1ボタンを押す。
ステージ画面に緑色のステージスポットが表示されます。
- スポット位置設定
- スポット1と指定されたスポット位置までドラッグして、スポット1の位置・領域を設定する。
pX = 245, pY = 73, 幅 = 48, 高 = 52 ぐらいです。
- 一言説明設定
- 一言説明に「主画像04へ移動」と入力する。
- ステージ画面の緑色のステージスポット内でポップアップメニューを表示させ、ファイル選択を選ぶ。
ファイル選択画面で main53.jpg を選択する。
ステージ画面左上に「主画像04」と書かれた画像が表示されるのを確認する。
今度は主画像リンクかどうかの確認画面が出ませんでした。
副画像の2ページ目以降では主画像リンクはできず、副画像扱いでスポット移動します。
主画像ルートへは移動できないという事です。
- 主画像から既に設定済みの副画像へスポット移動する。
- 結論から言うと、主画像のどのページからも既に設定済みの副画像ルートへはリンクできません。
主画像のスポット移動として設定され、副画像として既に設定済みであっても主画像として扱われます。
つまり、副画像の先頭ページから主画像ルートへは行けるけど、主画像のどのページからも副画像ルートへは行けないという事です。
「主画像01」から既に副画像として設定済みの「副画像03」へスポット移動してみましょう。
ステージ画面に「主画像01」が表示されている事を確認してください。
表示されていない場合、データ画面の主画像タブを押して主画像パネルを表示させ、主画像を先頭ページに戻してください。
主画像パネルのスポットタブを押してスポットデータパネルを表示させます。
- スポット番号選択
- スポットデータパネルの「スポット1」ボタンを押して、ステージ画面に緑色のステージスポットを表示させます。
- 移動方法の選択
- 移動方法コンボボックスで「前進」を選択する。
- ステージスポットの位置・領域設定
- 「スポット1」と書かれたスポット位置にドラッグして移動スポットを設定します。
pX = 244, pY = 57, 幅 = 36, 高 = 34 ぐらいです。
- 一言説明(ツールチップ)
- 「副画像03へ移動」と入力する。
- 移動先指定
- 緑色のステージスポット内でポップアップメニューを表示させ、ファイル選択を選ぶ。
ファイル選択画面で sub52.jpg を指定します。
主画像リンク・副画像リンクの選択画面が現れずに、「副画像03」の画像が表示されます。副画像ルートへは行けないという意味です。
これで「副画像03」は主画像として設定されましたので、以降作成の副画像の先頭で「副画像03」へスポット移動しようとすると主画像リンクの選択画面が現れます。
これで Lesson05 は終了です。
Lesson05 は少し複雑でしたが、実際にアルバムを作ってみた時にでも「あれっ?」と思ったらここを見てください。
- データの保存
- メニューバーのファイル(F)を開いて、名前を付けて保存(A)を選択します。
ファイル保存画面が表示されたら、Lesson0 のフォルダを選択して、ファイル名を Lesson05.jvam (大文字・小文字を間違えない事)として保存ボタンを押します。
必ず Lesson05 フォルダの中にLesson05.jvam と正確に入力して保存してください。
- データ閲覧用のHTMLファイル作成
- Lesson01と同じ要領で閲覧用HTMLファイルを作成します。
Jalverのデータを閲覧するので、データを修正等した場合には必ず一度「(新規・上書き)保存」する必要があります。
メニューバーのツール(T)-閲覧HTML作成(V) を選択します。
各項目に記入されている事を確認して「了解」ボタンを押すだけでいい事にしましょう。
設定項目の内容については Lesson01 を参照してください。
「了解」ボタンを押すと、Lesson05フォルダの中に viewJalver.html というHTMLファイルが作成されます。
- Jalver の終了
- メニューバーのファイル(F)を開いて、終了(X)を選択します。
確認画面で「はい」を押して終了です。
- 作成したデータを閲覧する
エクスプロ−ラやマイコンピュータを使用して、Lesson05フォルダを開いて、中にある viewJalver.html (通常はダブルクリック)させてください。
このような画面が見れれば合格です。