注意:
Jalverトレーニングキットに含まれるHTMLファイル、画像データ、練習用Jalverデータは相互に相対指定で関連付けされていますので、Jalver.jar や画像データ等を移動させずに、解凍した時の状態でそのまま使用してください。
移動させる場合は、解凍した内容の位置関係を変えずに、フォルダごと移動させてください。
Lesson用データ以外のデータを作成したり、読み込んだりする場合は、Jalver.jar / Jalvam.jar を好きな場所にコピーして使用して問題ありません。できれば、Jalver.jar と Jalvam.jar は一緒のフォルダに置けば便利です。
レッスン 02
- 目標
- 主画像の描画開始位置を設定する。
主画像のスポット移動
- 主画像を表示させる
- レッスン1の時と同じように主画像の最初の画像を表示させます。
Jalver を起動する。
新しいデータを作成するので、前回のデータ作成確認画面で、「いいえ」を選択する。
ファイル(F)-新規作成(N)を選択する。
初期設定画面が表示される。
Lesson02 で必要とする画像は Lesson02 フォルダに入ってます。
「画像フォルダ」ボタンを押して、Lesson02 フォルダを選択してください。
画像フォルダとして Lesson02 が記入されているのを確認して、初期設定画面の了解をクリックする。
タイトル名入力に Lesson02 と入力する。
- 画像表示パネルの設定
-
- Lesson01 の場合と同じようにして、今度は Lesson02 フォルダに入っている samp20.jpg の画像を主画像として選択します。
データ画面の主画像タブを押して主画像パネルを表示させる。
画像表示データパネルタブを押して画像表示パネルを表示させる。
「主画像」ボタンをクリックし、ファイル選択画面で、Lesson02 フォルダの samp20.jpg を選択する。
samp20.jpg はパノラマ画像なので幅が長く表示されます。
ここまでは、Lesson01 で練習した内容です。
うまく一枚の画像が表示されなかったら Lesson01 をもう一度練習してください。
- 画面表示データの設定
- samp20.jpg をステージ画面の中央に表示するために、pX=160 pY=120 幅=320 高=240 とします。
幅入力欄をクリックして、320 と入力する。
pX入力欄をクリックして、160 と入力する。
pY入力欄をクリックして、120 と入力する。
数値入力する際に、幅を先に入力して調整してください。幅をそのままで pX を先に入力すると、画像がステージ画面から出てしまう設定になるので、エラーになります。
幅の調節は、ステージ画面で画像の左右縦線中央にカーソルを合わせ、ドラッグしてもできます。
表示位置(pX pY)の調節は、ステージ画面で画像の四つ角にカーソルを合わせてドラックしてもできます。
画像の表示領域が画像の幅よりも小さい場合は、画像をドラックすると表示領域内で左右に移動します。
ステージ画面の画像の内部にカーソルを合わせてをドラッグして、画像が左右に移動するのを確認してください。
- 描画開始位置の設定
- パノラマ画像(描画領域の幅を画像の幅よりも小さく設定した場合)の時は、画像が最初に表示される時の表示位置を指定する事ができます。
普通の画像(画像の幅と描画領域の幅の設定が同じ)場合は、描画開始位置は 0 に固定されます。
データ画面の描画開始位置をクリックして、60 と入力します。
ステージ画面で画像に書かれている描画開始位置線が表示領域の左端に移動しているのを確認してください。
ステージ画面の画像内をドラッグして、描画開始位置(開始線)を描画領域の左端に合わせてもできます。
- スポットデータパネルの設定(スポット移動)
- スポットを使って次の画像へ移動する事を「スポット移動」と言い、その時のスポットを「移動スポット」と言います。
また、ステージ画面に表示されるスポットを表す四角枠をステージスポットと言います。
- スポットを使って、次の画面に移動する。
- ここでは、スポット移動を使って、次の主画像へ移動する方法を練習します。
主画像・スポットデータタブを押して、スポットデータパネルを選択します。
ステージ画面では、主画像に茶色の枠が付きます。茶色の枠の時はスポットのデータを設定しているという意味です。
- スポット番号選択
- スポットデータパネルにはスポットボタンが三つ付いてます。
スポットは一つの画像に3つまで設定できて、このスポットボタンを使ってどのスポットを使うか選択します。
ここでは「スポット0」だけを使用します。
「スポット0」ボタンを押します。
ステージ画面に水色の四角(中央に+印)のスポットが表示されます。
(ステージ画面に表示されるスポットをステージスポットと言います)
- 移動方法の選択
- 次の主画像へ移動する時の移動方法をコンボボックスで選択します。
ここでは「前進」のままにしておきます。
- 移動スポットの位置設定
- 移動スポットの位置設定はデータ画面・ステージ画面の両方でできますが、ここではステージ画面を使用します。
ステージスポットの四角の角にカーソルを合わせて(形状が四方向カーソルなる)ドラッグするとスポットが移動します。
目的の場所にスポット中央の+印を合わせてください。
この時、データ画面でpX pY の数値がステージスポットに合わせて変化している事を見てください。
- 移動スポットの領域設定
- 移動スポットの領域(大きさ)を設定します。
ステージスポットの左右上下線の中央部分にカーソルを合わせて(形状が上下・左右カーソルになる)ドラッグするとステージスポットの領域(大きさ)を変化させる事ができます。
この時、データ画面で幅・高さ の数値がステージスポットに合わせて変化している事を見てください。
- 一言説明(ツールチップ)
- ここに、短い説明文を書くと、ステージスポットにカーソルを乗せた時に表示されます。
一言説明の入力欄をクリックして、ここでは、「主画像01へ移動する」と入力してEnterを押します。
- 移動先指定
- 以上の設定が終わったら、次に移動先画像を設定します。
メニューバーの編集(E)-主画像(L)-ファイル選択(F)か、ステージ画面でのポップアップメニューを使用します。
ここではステージ画面のポップアップメニューを使用する事にします。
ステージ画面でステージスポット内にカーソルを合わせると、カーソルが「+」カーソルになります。
「+」カーソルの状態でポップアップメニューを表示させます。(windowsならばマウスの右ボタンをクリックする)
「ファイル選択移動」「タイトル選択移動」というメニューが表示されます。
- 「ファイル選択移動」
- ファイルを選択して移動先画像を設定します。
- 「タイトル選択移動」
- 既に設定されているタイトルを選択して移動先画像を設定します。
- ここでは「ファイル選択移動」を使って次の画像へ移動します。
メニューを選択するとファイル選択画面が表示されますので、samp21.jpg を選択してください。
「主画像01」と書かれた画像が表示されたらスポット移動は完了です。
移動後は、新しい画面の設定に入ります。
移動後は、移動前の情報を可能な限り引き継ぎますので、画像表示位置・領域は移動前のデータをそのままになっています。
間違えた画像を選択してしまったら、主画像パネルの画像表示データパネルを開いて、「主画像」ボタンを押して samp21.jpg を選択してください。
- 移動元へ戻る
- 移動元(主画像00)へ戻る時は、データ画面にある「戻る」ボタンを押します。
「戻る」ボタンを押して一度戻ってください。
ステージ画面中央に「主画像00」と書かれた画像が表示されたら戻り完了です。
- 設定済の移動先への移動
- 「主画像00」のスポットデータタブを押してスポットデータパネルを表示してください。
スポット0には移動先として「主画像01(samp21.jpg)」が指定されています。
既に設定済の移動先へ移動するためには、メニューバーの編集(E)-主画像(L)-スポット移動(M)か、ステージ画面でのポップアップメニューを使用します。
ステージ画面の水色のステージスポット内(カーソル形状が「+」に変わる)でポップアップメニューを表示させます。
既に移動先が設定してある場合は、「移動」というメニューだけが表示される事を確認してください。
未だ移動先が指定されていない移動スポットでは、移動先画像を指定するポップアップメニューが表示され、既に移動先が設定されている移動スポットでは「移動」のポップアップメニューが表示される違いを見てください。
「移動」を選択します。
画面に「主画像01」と書かれた画像が表示されたら移動は完了です。
- スポットを2つ設定して2つの移動ルートを作る。
- 2ページ目には2つの移動スポットを設定します。
ステージ画面中央に「主画像01」と書かれた画像が表示されている事を確認してください。
もし「主画像00」と書かれた画像が表示されていたら、「設定済の移動先への移動」の方法で次の画像(主画像01)へ移動してください。
- スポットデータパネル選択
- スポットデータタブを押して、スポットデータパネルをひらいてください。
一つの画像に対して3つまでの移動スポットを設定する事ができます。
「主画像01」には、スポット0 と スポット1 の 二つのスポットを設定します。
- 一つ目のスポット・「スポット0」の設定
- スポット番号選択
- スポットボタン0を押して、水色のステージスポットを表示させます。(規定値ではスポット0ボタンが選択されている)
- スポット位置領域設定
- ステージスポットの四隅にカーソルを乗せ、形状が四方向カーソルに変わったらドラッグして中央の+印を目的の場所(スポット0の点)まで移動します。
pX = 83 , pY = 110 , 幅 = 48, 高さ= 26 ぐらいです。
- 移動方法選択
- 「移動方法」は「前進」のままにしておきます。
- 一言説明入力
- 一言説明入力欄をクリックして、「スポット0移動」と入力してEnterを押します。
- スポット移動
- 水色のステージスポット内でポップアップメニューを表示させ、「ファイル選択移動」を選択して次の移動先を指定します。
ファイル選択画面で samp22.jpg を選択します。
ステージ画面中央に「主画像01-0」という画像が表示されたのを確認します。
- 戻る
- 以前の画面にもう一つのスポットを設定するために一度戻ります。
データ画面の「戻る」ボタンを押してください。
- 二つ目のスポット・「スポット1」の設定
- ステージ画面に「主画像01」という画像が表示されている事を確認してください。(「主画像01-0」という画像が表示されている場合は「戻る」ボタンを押して前に戻ってください。)
- スポットデータパネル選択
- 主画像パネルでスポットデータタブを押して、スポットデータパネルを開きます。
- スポット番号選択
- スポット0ボタンが押された状態で、以前に設定したスポット0のデータがそのまま残っています。
新しいルートで移動するので、スポット1のボタンを押します。
ステージ画面に緑色のステージスポットが表示されます。
- スポット位置領域設定
- ステージスポットの四隅にカーソルを乗せ、形状が四方向カーソルに変わったらドラッグして中央の+印を目的の場所(スポット1の点)まで移動します。
pX = 186 , pY = 107 , 幅 = 36 , 高 = 32 ぐらいです。
- 移動方法選択
- 「移動方法」は「前進」のままにしておきます。
- 一言説明入力
- 一言説明入力欄をクリックして、に「スポット1移動」と入力してEnterを押します。
緑色のステージスポット内でポップアップメニューを表示させ、「ファイル選択移動」を選択して次の移動先を指定します。
ファイル選択画面で samp23.jpg を選択します。
ステージ画面中央に「主画像01-10」という画像が表示されたのを確認します。
データ画面のデータは新しい画像に対応した新しいデータになっています。
- 移動方法の違いを見る
- ここからは、移動方法の違いを体験するために、移動方法を変更しながら、さらに進みます。
- ステージ画面中央に「主画像01-10」という画像が表示されたのを確認してください。
- スポットデータパネル選択
- データ画面でスポットデータパネルを開きます。
- スポット番号選択
- スポット0ボタンを押します。(規定値ではスポット0ボタンが選択されている)
ステージ画面に水色のステージスポットが表示されます。
- 移動方法選択
- 移動方法のコンボボックスを「前進」に設定します。
- スポット位置領域設定
- ステージスポットの四隅にカーソルを乗せ、形状が四方向カーソルに変わったらドラッグして中央の+印を目的の場所(スポット0の点)まで移動します。
pX = 97, pY = 115 , 幅= 46 , 高さ= 38 ぐらいです。
- 一言説明入力
- 一言説明入力欄をクリックして、に「前進移動」と入力してEnterを押します。
- スポット移動
- 水色のステージスポット内でポップアップメニューを表示させ、「ファイル選択移動」を選択して次の移動先を指定します。
ファイル選択画面で samp23-0.jpg を選択します。
ステージ画面中央に「主画像01-11」という画像が表示されたのを確認します。
- 以下、同様にして移動方法と一言説明を変えながら移動していきます。
- 拡大フェード設定
- スポット0を使用。
移動方法のコンボボックスを「拡大フェード」に設定
スポット位置を設定
一言説明に「拡大フェード移動」と記入。
移動先としてsamp23-1.jpg を選択。
「主画像01-12」という画像の確認
- 前進フェード設定
- スポット0を使用。
移動方法のコンボボックスを「前進フェード」に設定
スポット位置を pX=224, pY=224, 幅=48, 高=20 ぐらいに設定
一言説明に「前進フェード移動」と記入。
移動先としてsamp23-2.jpg を選択。
「主画像01-13」という画像の確認
- フェード設定
- スポット0を使用。
移動方法のコンボボックスを「フェード」に設定
スポット位置を pX=126, pY=97, 幅=73, 高=27 ぐらいに設定
一言説明に「フェード移動」と記入。
移動先としてsamp23-3.jpg を選択。
「主画像01-14」という画像の確認
- なし設定
- スポット0を使用。
移動方法のコンボボックスを「なし」に設定
スポット位置を設定
一言説明に「なし移動」と記入。
移動先としてsamp23-4.jpg を選択。
「主画像01-15」という画像の確認
- データの保存
- メニューバーのファイル(F)を開いて、名前を付けて保存(A)を選択します。
ファイル保存画面が表示されたら、Lesson02 のフォルダを選択して、ファイル名を Lesson02.jvam (大文字・小文字を間違えない事)として保存ボタンを押します。
必ず Lesson02 フォルダの中にLesson02.jvam と正確に入力して保存してください。
- データ閲覧用のHTMLファイル作成
- Lesson01と同じ要領で閲覧用HTMLファイルを作成します。
Jalverのデータを閲覧するので、データを修正等した場合には必ず一度「(新規・上書き)保存」する必要があります。
メニューバーのツール(T)-閲覧HTML作成(V) を選択します。
各項目に記入されている事を確認して「了解」ボタンを押すだけでいい事にしましょう。
設定項目の内容については Lesson01 を参照してください。
「了解」ボタンを押すと、Lesson02フォルダの中に viewJalver.html というHTMLファイルが作成されます。
- Jalver の終了
- メニューバーのファイル(F)を開いて、終了(X)を選択します。
確認画面で「はい」を押して終了です。
- 作成したデータを閲覧する
エクスプロ−ラやマイコンピュータを使用して、Lesson02フォルダを開いて、中にある viewJalver.html (通常はダブルクリック)させてください。
表示されるまで、ちょっと時間がかかるかもしれませんが、
このような画面が見れれば合格です。
- 主画像の描画位置を変えてみる
- Lesson02 では、スポット移動した時の移動先の画像描画位置を移動元と同じに設定して、同じ場所に描画されるようにしました。
移動先の描画位置を変えると、移動方法として「フェード」を指定した時以外は、まず移動元の描画領域の中心がが移動先の描画領域の中心に位置移動してからスポット移動します。
サンプルを作りましたので、「論より証拠」でその動作を見てください。