注意:
Jalverトレーニングキットに含まれるHTMLファイル、画像データ、練習用Jalverデータは相互に相対指定で関連付けされていますので、Jalver.jar や画像データ等を移動させずに、解凍した時の状態でそのまま使用してください。
移動させる場合は、解凍した内容の位置関係を変えずに、フォルダごと移動させてください。
Lesson用データ以外のデータを作成したり、読み込んだりする場合は、Jalver.jar / Jalvam.jar を好きな場所にコピーして使用して問題ありません。できれば、Jalver.jar と Jalvam.jar は一緒のフォルダに置けば便利です。
レッスン 04
- 目標
- 副画像出現と表示
出現表示確認
- 主画像を表示させる
- レッスン1の時と同じように主画像の最初の画像を表示します。
- Jalver を起動する。
新しいデータを作成するので、前回のデータ作成確認画面で、「いいえ」を選択する。
ファイル(F)-新規作成(N)を選択する。
初期設定画面が表示される。
Lesson04 で必要とする画像は Lesson04 フォルダに入ってます。
「画像フォルダ」ボタンをクリックして、Lesson04 フォルダを選択する。
画像フォルダとして Lesson04 が記入されているのを確認して、初期設定画面の了解を押す。
タイトル名入力に Lesson04 と入力する。
- 1ページ目の作成
- 画像表示データパネルの設定
- データ画面の主画像・画像表示データパネルを選択して、「主画像」ボタンを押し、画像として main40.jpg を選択する。
ステージ画面に「主画像01」と書かれた画像が表示されるのを確認する。
- 画面表示データの設定
- 「主画像01」(main0.jpg) をステージ画面の中央に表示するために、pX=160 pY=120 幅=320 高=240 とします。
幅入力欄をクリックして、320 と入力する。
pX入力欄をクリックして、160 と入力する。
pY入力欄をクリックして、120 と入力する。
- 副画像の新規作成
- メニューバーの「編集(E)」を押して、副画像(S)-新規作成(N)-ファイル選択(F) を選択します。
ファイル選択画面で sub40.jpg を選択します。
ステージ画面に 「副画像01」と書かれた画像が表示され、データ画面には「No.0」という副画像パネルが表示されます。
副画像を新規作成した場合の初期状態では、副画像No.0 の画像表示データパネルが開きます。
開いていない場合は、副画像No.0タブを押して副画像No.0パネルを表示させ、「画像表示データ」タブを押してください。
「副画像」ボタンの横に sub40.jpg と書かれているのを確認してください。
- 主画像設定と副画像設定の変更
- ステージ画面には「主画像01」と書かれた主画像(中央表示)と「副画像01」と書かれた副画像(左上表示)の2枚の画像が表示されています。
主画像と副画像を交互にクリックして、表示の上下が入れ替わる事を確認してください。
この時、データ画面ではステージ画面での変更に対応して主画像パネルと副画像パネルが入れ替わっている事も確認してください。
データ画面で主画像タブと副画像タブを交互に押して、主画像パネルと副画像パネルが入れ替わる事を確認してください。
この時、ステージ画面では主画像と副画像の上下表示が入れ替わっている事も確認してください。
主画像と副画像のいずれかを選択してデータを作成します。
副画像のデータを作成しますので、ステージ画面で副画像の画像をクリックするか、データ画面で副画像タブを押して、副画像パネルを表示させてください。
- 出現方法の設定
- 副画像は(出現方法が内部手動を除いて)最初に一度表示されて(これを中間表示といいます)、その後クリック操作で最大の表示(これを最大表示といいます)がなされます。
出現方法のコンボボックスでは、既定値の「内部自動」になっているので、そのままにしておきます。
内部自動というのは、主画像内の指定された位置から副画像が自動で出現して拡大しながら中間表示される方法です。
- 出現位置の指定
- 出現位置を指定するために、「出現位置」ボタンを押します。
ステージ画面に中央に「+」印のある肌色のマークが表示されます(これを出現スポットと呼びます)ので、周りの四角にカーソルを合わせて(形状が四方向カーソルに変わる)ドラッグして動かしてみてください。
ステージ画面の「+」印の位置がデータ画面の pX,pY に表示されます。
中央の「+」印を目的の場所(副画像を出現させる位置)まで移動します。
HTMLで見た場合には、指定された位置から副画像が出現します。
- 中間表示の設定
- 中間表示とは副画像が最初に表示される位置・領域をいいます。
HTMLで見た場合は、副画像の中間表示部分をクリックすると拡大します。
中間表示ボタンを押します。
ステージ画面に緑色枠で表示された副画像が表示されているのを確認してください。
緑色枠の時は、現在、中間表示の設定中であるという意味です。
- 中間表示位置の設定
- 中間表示の位置(画像左上)の指定はステージ画面とデータ画面の両方でできます。
副画像の緑色枠の四隅にカーソルを合わせて、カーソル形状が四方向カーソルに変わったらドラッグしてください。
表示位置を変える事ができます。
緑色の左上の値がデータ画面の pX, pY に表示されている事も確認してください。
今度は、データ画面で中間表示ボタンの横にある pX pY の入力欄をクリックして数値を入力してみてください。
入力された数値に対応して、ステージ画面の緑枠の副画像の表示位置が変化している事を確認できます。
中間表示副画像の表示がステージ画面を越えるような数値は入力できません。
- 中間表示領域(大きさ)の設定
- 中間表示の表示領域(幅と高さ)の指定はステージ画面とデータ画面の両方でできます。
ステージ画面で副画像の緑色枠線の左右の縦線中央部分にカーソルを合わせて、カーソル形状が左右カーソルに変わったら、左右にドラッグして横幅を変更します。
横幅を変更すると縦は自動で計算されて拡大したり縮小したりします。
この時、データ画面では中間表示の幅・高さの変化を数値で確認できます。
中間表示をステージ画面左上に小さく表示させるために、データ画面の中間表示ボタン横に次のように数値を入力してください。
pX = 50 , pY = 50 , 幅 160
これはx座標50、y座標50 の位置に、幅160ピクセルに設定するという意味です。
- 最大表示の設定
- 副画像が最大に表示された場合の表示位置・領域を設定します。設定の方法は主画像の場合と同じです。
副画像の最大表示ボタンを押します。
ステージ画面で黄色の枠線で画像が表示されます。黄色の枠線の時は、最大表示の設定をしているという意味です。
最大表示位置・領域はステージ画面・データ画面の両方で設定できます。
- 最大表示位置の設定
- 最大表示位置は、ステージ画面・データ画面の両方で設定できます。
ステージ画面で黄色枠の四隅部分にカーソルを合わせて、カーソル形状が四方向カーソルに変わったらドラッグしてください。
表示位置を変える事ができます。
黄色枠の左上の位置がデータ画面の最大表示 pX, pY の入力欄に表示る事を確認してください。
- 最大表示領域(大きさ)の設定
- 最大表示領域の設定は、ステージ画面・データ画面の両方で設定できます。
ステージ画面で黄色枠の左右縦線の中央にカーソルを合わせて、カーソル形状が左右カーソルに変わったらドラッグしてください。
表示幅を変更する事ができます。
この時データ画面で最大表示の 幅の数値が変更に応じて変化する事を確認してください。
データ画面で最大表示の幅の入力欄に表示する幅を数値入力します。
入力された数値に応じてステージ画面の表示幅が変更する事を確認してください。
黄色の枠がステージ画面を越える場合や副画像の幅を超える場合は設定できません。
- 色々と確かめた後は、副画像の最大表示をステージ左上に画像の大きさ(幅320)で表示するために、データ画面の最大表示ボタンの横に次のように入力します。
pX = 5, pY = 5, 幅 = 320
これはx座標 5, y座標 5 の位置に幅320ピクセルで表示するという意味です。
- 2ページ目の作成
- 2ページ目では副画像の出現方法を「内部手動」に設定してその動作を確認します。
「内部手動」は、HTMLで見た場合に、出現スポットをクリックすると副画像が出現位置から拡大しながら出現し、(中間表示をせずに)最大表示する出現方法です。
- 主画像のスポット移動
- 次のページを作成するために、Lesson02 で実施したように、主画像に移動スポットを設定します。
ステージ画面で主画像をクリックするか、データ画面の主画像タブを押す。
主画像のスポットデータパネルを表示するために、スポットデータタブを押す。
ステージ画面では主画像スポットデータ設定の意味で主画像に茶色の枠がつきます。
データ画面でスポット0ボタンを押してスポット0を選択する(既定で選択されています)。
データ画面で一言説明に「主画像02へ」と入力する。
ステージ画面で(水色)ステージスポットの四隅にカーソルを合わせ、形状が四方向カーソルに変わったらドラッグして中央の「+」印を目標まで移動させます。
(水色)ステージスポットの枠内でカーソルが「+」印になったらポップアップメニューを表示させ、ファイル選択を選択しファイル選択画面で、main41.jpg を選択する。
ステージ画面中央に「主画像02」と書かれた新しい主画像が表示されているのを確認する。
- 副画像の新規作成
- 主画像のデータはそのままにして、新しい副画像を作成します。
メニューバーの「編集(E)」を押して、副画像(S)-新規作成(N)-ファイル選択(F) を選択します。
ファイル選択画面で sub41.jpg を選択します。
ステージ画面に 「副画像02」と書かれた画像が表示され、データ画面には「No.0」という副画像パネルが表示されます。
副画像No.0の「画像表示データ」ボタンの横に sub41.jpg と書かれているのを確認してください。
- 出現方法の設定
- 出現方法コンボボックスで「内部手動」を選択します。
- 出現位置の指定
- 出現位置ボタンを押して、ステージ画面に(肌色の)出現スポットを表示させ、四隅をドラッグして位置(中央の+印)を調整し、上下左右線の中央をドラッグして領域(大きさ)目標に設定する。(pX = 220, py = 180, 幅 = 45, 高 = 42 ぐらいです)
- 中間表示の設定
- 中間表示の設定はありません。
- 最大表示の設定
- 最大表示ボタンを押して、入力欄に pX = 50, pY = 50, 幅 = 320 として副画像をステージ画面左上に最大表示させるように設定します。
これで「内部手動」の設定は完了です。
これ以降6ページ目まで、出現方法を取り替えるだけで同じ手順でページを進めて行きます。
各ページでの作成の要点を書きますので、自力でやってみてください。
- 3ページ目の作成
- 主画像のスポット移動
- 一言説明に「主画像03へ」と入力する。
主画像のスポット0を使用して、移動先として main42.jpg を指定する。
ステージ画面中央に「主画像03」と書かれた新しい主画像が表示されているのを確認する。
3ページ目では副画像の出現方法を「内部上乗」に設定してその動作を確認します。
内部上乗」は、HTMLで見た場合に、出現スポットにカーソルを乗せると副画像が中間表示し、中間表示した状態で出現スポットをクリックすると副画像が最大表示する出現方法です。
- 副画像の新規作成
- 副画像として sub42.jpg を選択する。
- 出現方法の設定
- 出現方法コンボボックスで「内部上乗」を選択する。
- 出現位置の指定
- (pX = 224, py = 169, 幅 = 45, 高 = 42 ぐらいです)
内部上乗せの場合の移動スポット位置は、左上になります。
- 中間表示設定
- 中間表示ボタン横に pX = 50, pY = 50, 幅 = 160 と入力する。
- 最大表示の設定
- 最大表示ボタン横に pX = 5, pY = 5, 幅 = 320 と入力する。
- 4ページ目の作成
- 主画像のスポット移動
- 一言説明に「主画像04へ」と入力する。
主画像のスポット0を使用して、移動先として main43.jpg を指定する。
ステージ画面中央に「主画像04」と書かれた新しい主画像が表示されているのを確認する。
4ページ目では副画像の出現方法を「外部拡大」に設定してその動作を確認します。
「外部拡大」は、HTMLで見た場合に、主画像が表示されると、拡大しながら画像が中間表示する出現方法です。
- 副画像の新規作成
- 副画像として sub43.jpg を選択する。
- 出現方法の設定
- 出現方法コンボボックスで「外部拡大」を選択する。
- 出現位置の指定
- 外部拡大では操作せずに直接中間表示されるため、出現位置の設定はありません。
- 中間表示設定
- 中間表示ボタン横に pX = 50, pY = 50, 幅 = 160 と入力する。
- 最大表示の設定
- 最大表示ボタン横に pX = 5, pY = 5, 幅 = 320 と入力する。
これで「内部拡大」の設定は完了です。
- 5ページ目の作成
- 主画像のスポット移動
- 一言説明に「主画像05へ」と入力する。
主画像のスポット0を使用して、移動先として main44.jpg を指定する。
ステージ画面中央に「主画像05」と書かれた新しい主画像が表示されているのを確認する。
5ページ目では副画像の出現方法を「外部フェード」に設定してその動作を確認します。
「外部拡大」は、HTMLで見た場合に、主画像が表示されると、拡大しながら画像が中間表示する出現方法です。
- 副画像の新規作成
- 副画像として sub44.jpg を選択する。
- 出現方法の設定
- 出現方法コンボボックスで「外部フェード」を選択する。
- 出現位置の指定
- 外部拡大では操作せずに直接中間表示されるため、出現位置の設定はありません。
- 中間表示設定
- 中間表示ボタン横に pX = 50, pY = 50, 幅 = 160 と入力する。
- 最大表示の設定
- 最大表示ボタン横に pX = 5, pY = 5, 幅 = 320 と入力する。
これで「外部拡大」の設定は完了です。
- 6ページ目の作成
- 主画像のスポット移動
- 一言説明に「主画像06へ」と入力する。
主画像のスポット0を使用して、移動先として main45.jpg を指定する。
ステージ画面中央に「主画像06」と書かれた新しい主画像が表示されているのを確認する。
6ページ目では副画像の出現方法を「外部普通」に設定してその動作を確認します。
「外部普通」は、HTMLで見た場合に、主画像が表示されると同時に画像が中間表示する出現方法です。
- 副画像の新規作成
- 副画像として sub45.jpg を選択する。
- 出現方法の設定
- 出現方法コンボボックスで「外部拡大」を選択する。
- 出現位置の指定
- 外部拡大では操作せずに直接中間表示されるため、出現位置の設定はありません。
- 中間表示設定
- 中間表示ボタン横に pX = 50, pY = 50, 幅 = 160 と入力する。
- 最大表示の設定
- 最大表示ボタン横に pX = 5, pY = 5, 幅 = 320 と入力する。
これで「外部拡大」の設定は完了です。
- 最初のページに戻る
- 全ての設定を終わりましたので、最初のページに戻る練習をしてみましょう。
戻るのは主画像パネルなので、主画像パネルを選択するために、ステージ画面で主画像をクリックするか、データ画面の主画像タブを押す。
「戻る」ボタンは、主画像パネルの表示データパネルとスポットデータパネルについています。
最初のページになるまで、「戻る」ボタンを押して1ページづつ戻ってください。
- データの保存
- メニューバーのファイル(F)を開いて、名前を付けて保存(A)を選択します。
ファイル保存画面が表示されたら、Lesson04 のフォルダを選択して、ファイル名を Lesson04.jvam (大文字・小文字を間違えない事)として保存ボタンを押します。
必ず Lesson04 フォルダの中にLesson04.jvam と正確に入力して保存してください。
- データ閲覧用のHTMLファイル作成
- Lesson01と同じ要領で閲覧用HTMLファイルを作成します。
Jalverのデータを閲覧するので、データを修正等した場合には必ず一度「(新規・上書き)保存」する必要があります。
メニューバーのツール(T)-閲覧HTML作成(V) を選択します。
各項目に記入されている事を確認して「了解」ボタンを押すだけでいい事にしましょう。
設定項目の内容については Lesson01 を参照してください。
「了解」ボタンを押すと、Lesson04フォルダの中に viewJalver.html というHTMLファイルが作成されます。
- Jalver の終了
- メニューバーのファイル(F)を開いて、終了(X)を選択します。
確認画面で「はい」を押して終了です。
- 作成したデータを閲覧する
エクスプロ−ラやマイコンピュータを使用して、Lesson04フォルダを開いて、中にある viewJalver.html (通常はダブルクリック)させてください。
このような画面が見れれば合格です。