注意: Jalverトレーニングキットに含まれるHTMLファイル、画像データ、練習用Jalverデータは相互に相対指定で関連付けされていますので、Jalver.jar や画像データ等を移動させずに、解凍した時の状態でそのまま使用してください。

移動させる場合は、解凍した内容の位置関係を変えずに、フォルダごと移動させてください。

Lesson用データ以外のデータを作成したり、読み込んだりする場合は、Jalver.jar / Jalvam.jar を好きな場所にコピーして使用して問題ありません。できれば、Jalver.jar と Jalvam.jar は一緒のフォルダに置けば便利です。


Lesson09


目標
音を出す
アニメーションを作る

Jalverには簡易アニメーション作成ツールがついています 。
アニメーションと言っても、複数の連続した画像を一定の時間間隔で順番に表示させてアニメーションのような機能を持たせたもので、内容的にはスライドショーですね。
基礎的なデータは Lesson09 フォルダの base09.jvam に入ってますから、それを最初に読み込んで使います。


  base09.jvamを読み込む。
base09.jvam は、2枚の主画像(「主画像01」「主画像02)と「主画像02」に付いている一枚の副画像(「副画像01」)から成るデータです。
1ページ目の「主画像01」と2ページ目の「副画像01」にアニメーションを付けます。

Jalver を起動する。
新しいデータを作成するので、前回のデータ作成確認画面で、「いいえ」を選択する。
ファイル(F)-「新規に開く(O)」を選択し、ファイル選択画面で Lesson09 フォルダに入っている Lesson09.jvam を選択する。
ステージ画面で、「Lesson09 主画像01」という画像が表示されたのを確認してください。
データ画面では、画像表示データパネルを選択します。


サウンドとアニメーション設定

主画像にサウンドを付ける
 サウンドの設定
画面表示データのサウンドと書かれたコンボボックから「一回」を選択します。
音の出るファイル(サウンドファイル)を一回だけ実行するという意味です。
サウンド「なし」の時は右側にあるサウンドファイル選択ボタンが選択できませんでしたが、「一回」にすると選択可能になります。 「なし」と「一回」を交互に選びながら確かめてください。


 サウンドファイルを選択する
サウンドコンボボックスで「一回」に設定した事を確認してサウンドファイル選択ボタンを押してください。
ファイル選択画面で「main.au」ファイルを選択します。
これで音の設定が完了しました。
Jalvam で見た場合に、主画像が表示されるのと同時に音が鳴ります。


主画像にアニメーションを付ける
 アニメーション設定
アニメ設定コンボボックスを「あり」に設定します。
右のアニメファイル選択ボタンを押してください。
アニメーションエディタが表示されます。

このエディタで画像を表示する順番を設定します。


 画像ファイル選択
「開く」ボタンを押します。
ファイル選択画面が表示されますので、アニメーション用に作成した画像ファイルを選択してください。
複数のファイルが選択できますので、Ctrl + 画像ファイル として必要な画像を選択してください。
「main90-0.jpg」「main90-1.jpg」「main90-2.jpg」「main90-3.jpg」「main90-4.jpg」「main90-5.jpg」という6枚のファイルを選択してください。
エディタ画面には「主画像0・1・2・3・4・5」という6枚の画像が表示されます。


 画像の入替え
「主画像5」と「主画像1」を入替えます。
「主画像5」を押してドラッグし(主画像5に赤枠が付く)て、「主画像1」の上でドロップします。
「主画像5」でマウスを押して、押したままズルズル引っ張って、「主画像1」の上でパッと放すと言った方が分り易いかもしれませんね。
「主画像5」と「主画像1」が入れ替わった事を確認してください。
同じ方法で「主画像5」と「主画像1」の位置を元に戻してください。


 画像の挿入
特定の画像を、画像と画像の間に入れたい場合も「取替え」と同じ方法を取ります。
ドラッグした画像を挿入したい画像と画像の間でドロップします。
主画像4」をドラッグして「主画像1」と「主画像2」の間に移動してみます。
「主画像4」を押して(主画像4が赤枠になる)、「主画像1」と「主画像2」の間までズルズル引っ張ります。
カーソルの形状が左右カーソルに変わったのを確認して、パッとマウスを放してください。
「主画像1」「主画像4」「主画像2」という順番になったのを確認してください。
同様にして「主画像4」の位置を元に戻してください。


 画像の削除
削除したい画像をゴミ箱にドラッグします。
「主画像3」をゴミ箱までドラッグして、ゴミ箱の上でドロップします。
「主画像3」が画面から消えた事を確認してください。


 画像の追加
削除した「主画像3」は捨ててしまったので元に戻りません。
もう一度ファイルを読み込みます。
「開く」ボタンを押して、ファイル選択ボタンを押して、ファイル選択画面で「main90-3.jpg」を一枚だけ選択してください。
「主画像3」という画像が最後に追加されたのを確認してください。
新しく読み込んだ画像は最後に付け加えられます。
「主画像3」を「主画像2」と「主画像4」の間に挿入して、正しい順番になっている事を確認してください。


 表示間隔の設定
画像と次の画像を表示するまでの表示間隔を設定します。


5/20秒 から 40/20秒 までの間で、1/20 秒単位で設定できます。
10 ぐらい(10/20秒で、つまり 0.5 秒毎に画像を取り替える)にしてください。


 エディタ終了
画像が順番に「主画像0・1・2・3・4・5」と並んでいる事と、間隔が「20」になっている事を確認してください。
何か違う所があったら、足りない画像を読み込んだり、順番を入替えたりしてください。
「新規」ボタンを押すと全ての画像を消して最初からやり直す事もできます。
確認したら「終了」ボタンを押します。
アニメーションの設定を終えて、元のデータ画面に戻ります。
これでアニメーションの設定が完了です。
Jalvam で見た場合に、主画像が表示されると直ぐにアニメーションが実行されます。




副画像にサウンドを付ける
2ページ目に移動して、副画像にサウンドを付けます。


 主画像のスポット移動
主画像のスポット移動は何度もやってる事ですので大丈夫だと思います。


2ページ目に移動してください。
ステージ画面中央に「主画像02」と表示されたら移動完了です。

 副画像にサウンドを付ける
副画像のサウンド設定も主画像と同じです。
今度は同じ音を何度も繰り返す設定にします。


 サウンドの設定
サウンドコンボボックスを「繰返し」に設定します。
サウンドファイルを何回も繰り返すという意味です。


 サウンドファイルの選択
サウンドコンボボックで「繰返し」に設定した事を確認してサウンドファイル選択ボタンを押してください。
ファイル選択画面で「sub.au」ファイルを選択します。
これで音の設定が完了しました。


 副画像にアニメーションを付ける
副画像のアニメーションの設定も主画像の場合と同じです。


 アニメーション設定
アニメーションコンボボックスを「あり」に設定します。


 アニメーションの作成
アニメーションファイル選択ボタンを押して、アニメーションエディタを選択してください。


 アニメーションエディタを使う
 画像ファイル選択
「開く」ボタンを押して、「sub90-0.jpg」「sub90-1.jpg」「sub90-2.jpg」「sub90-3.jpg」「sub90-4.jpg」「sub90-5.jpg」を選択してください。
エディタ画面には「主画像0・1・2・3・4・5」という6枚の画像が表示されます。


 表示間隔の設定
表示間隔は20に設定します。
主画像の時よりも遅く(1秒に一回)画像の表示替えがなされます。


 エディタ終了
終了ボタンを押します。


データの保存
メニューバーのファイル(F)を開いて、名前を付けて保存(A)を選択します。
ファイル保存画面が表示されたら、Lesson09 のフォルダを選択して、ファイル名を Lesson09.jvam (大文字・小文字を間違えない事)として保存ボタンを押します。
必ず Lesson09 フォルダの中に Lesson09.jvam と正確に入力して保存してください。


閲覧HTMLファイルの作成
データ閲覧用のHTMLファイル作成
Lesson01と同じ要領で閲覧用HTMLファイルを作成します。
Jalverのデータを閲覧するので、データを修正等した場合には必ず一度「(新規・上書き)保存」する必要があります。

メニューバーのツール(T)-閲覧HTML作成(V) を選択します。
各項目に記入されている事を確認して「了解」ボタンを押すだけでいい事にしましょう。
設定項目の内容については Lesson01 を参照してください。
「了解」ボタンを押すと、Lesson09フォルダの中に viewJalver.html というHTMLファイルが作成されます。

Jalver の終了
メニューバーのファイル(F)を開いて、終了(X)を選択します。
確認画面で「はい」を押して終了です。


作成したデータを閲覧する
エクスプロ−ラやマイコンピュータを使用して、Lesson09フォルダを開いて、中にある viewJalver.html (通常はダブルクリック)させてください。
このような画面が見れれば合格です。