ホームページビルダー・グレート初心者講座

Yahoo!ブックマークに登録

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座 FAQへグレート初心者講座 質問掲示板へ





 スクロールを使ってみましょう

スクロールイメージは大きな画像を小さな表示領域でずらしながら見えます。
大きな紙を手でずらして見るように、マウスでドラッグする事で画像を移動しながら見る事ができます。



 スクロールとは

サンプルで確認
スクロール・イメージは小さなスペースで大きな画像を動かしながら見たり出来る効果を与える事ができます。

スクロール・イメージサンプル


スクロールしている画面をクリックすると移動が停止し、画像をドラッグすると画面を動かし、画面を見渡す事ができます。




 作成手順

1. スクロール効果を加える画像を用意
重くなりすぎないようにあまり巨大な画像でなければOKです。

2. HotMedia ウィザードを使う
ここでは簡単な HotMedia ウィザードを使ってやってみます。
まず、マウスで挿入したい部分をクリックし、カーソルを表示させます。

その後、メニューバーの 「挿入」 → 「HotMediaアプレット」 → 「スクロール・イメージ」 を選択します。

3. 効果を加える画像を選択・設定
次にウィザードに従って効果を加える画像を選択します。
「拡大率」 が100パーセントだと、画像はアプレットの表示サイズに縮小されて表示されてしまうので、画像のサイズに合わせて拡大して表示します。

サンプルでは、幅400ピクセルの画像を、幅200ピクセルのアプレット表示サイズで表示しているので、拡大率は200パーセントにしてあります。
これも後で変更できるので、とりあえずは大体で設定しておけばいいと思います。

あとは 「アプレットの表示サイズ」 を決めますが、これもページ編集画面で通常の画像と同様に表示サイズを変更する事ができるので、大体で設定しておいても構いません。

この辺の設定だけ確認して、とりあえず完了してプレビューしてみます。

4. HotMedia クリエイターで修正
スクロール効果を入れたアプレットの上で右クリックすると、「HotMediaクリエイターで編集」 という項目がありますので選択します。 このソフトで修正などをしていくのですが、初めからこのソフトで作ってしまっても結構です。

また、サンプルでは初めから自動で動いていますが、静止している状態にする事も可能です。

5. HotMedia クリエイターの編集とプレビュー
動きを編集するときは、プロパティから設定できます。 また、これにはプレビュー機能がついているので、いちいちページ編集画面に戻る事なくソフト上で効果を見る事ができます。

プレビューをするには 「ファイル」 → 「プレビュー」 で見えます。
効果は設定を変えながらプレビューで確認するのが分かりやすいと思いますので、色々設定を変えて試してみましょう。





 スクロールの一部にリンクを設定する

サンプルで確認
スクロール画像の一部にリンクを設定する事ができます。
手順、サンプル共に 「パノラマ」 と同じなので、サンプルはそちらを参照してみて下さい。

リンクの設定
これをするには、挿入したアプレットを右クリックし、HotMedia クリエイターを選択し、表示された画像をダブルクリックします。 するとリンクに設定する所を指定する画面になりますので、リンクとして設定したい部分をドラッグして指定します。

また、一度設定したリンクなどは、四角い赤枠や四角い緑枠(音声ファイルなどで表示され、それをダブルクリックする事で修正する事ができます。

次にマウスクリックの部分の「編集」 を選択し、「外部リンク」で、リンクしたいページの「URL」 と 「ターゲット」を指定します。

ターゲットで、同一ページにリンク先を表示する時は 「 _self 」 と入れます。
その後、「OK」すればリンクの設定は完了です。

リンクを設定したらプレビューで確認し、保存しましょう。





 マウスオーバーで音を鳴らす

サンプルで確認
スクロールに設定した画像の一部にマウスが上に来た時に音を鳴らす設定をする事ができます。 
手順、サンプル共に 「パノラマ」 と同じなので、サンプルはそちらを参照してみて下さい。

サンプルの 「初心者の私が..」 の 「初心者」文字の上にマウスを乗せてみて下さい。 「ブピッ」 と変な音が出たと思います...

1. サウンドファイルを用意する
HotMediaで利用できるサウンドファイルは、ファイルのサイズが64KB未満のAU、WAV、AIF、AIFF、AVI、MOVファイルで、ファイルの形式が8kHz、8 ビット1チャネル(モノラルと言う事です)の CCITT mu-Lawでコーディングされたファイルとされているので、これに変換する必要があります。

2. サウンドファイルの形式変換
サウンドファイルはWAV形式ならWindows標準の 「サウンドレコーダー」 で変換する事ができます。

変換したいサウンドファイルを右クリックし、「記録」 を選択、その後、「ファイル」→ 「プロパティ」 から「変換」 を選択し、上記の設定に合わせ「OK」すれば変換されます。 変換したファイルは保存しておきます。

3. スクロール画像に音を設定
作ったスクロール画像を右クリックし、「HotMedia クリエイター」 を選択しリンクの時と同じように音を設定したい画像をダブルクリックします。

音を鳴らしたい部分をドラッグし、選択します。 すると、リンクのときと同じ画面が出てきますので、今度は マウスオーバーアクションの 「編集」 をクリックし、サウンド再生タブを選択し、その中の「サウンドファイル」 に用意したサウンドファイルを選び、設定します。

サウンドファイルはページが保存されているフォルダと別のフォルダに保存されていても、ページ保存時メッセージに合わせて選択していけばページが保存されているフォルダに自動的に保存されるのでOKです。

設定が完了したらプレビューで音がなるかを確認してみましょう!





 アプレット同士をリンクさせる

サンプルで確認
手順、サンプル共に 「パノラマ」 と同じなので、サンプルはそちらを参照してみて下さい。
ページにリンクさせたり、サウンドファイルを再生したりする他にも、アプレット同士をリンクさせる事もできます。
サンプルのアヒルの吹き出し 「えへっ♪」 をクリックしてみて下さい。

これはアニメーションのアプレットにリンクするようになっています。
これを使えば、色んなアプレット同士をリンクさせ、より効果的なアプレットを作成することができます。

リンクを設定
作ったアプレットを右クリックし、「 HotMedia クリエイター」 を選択し、リンクの時と同じように 作成しておいたスクロールに設定した画像をダブルクリックします。

リンクを設定したい部分をドラッグし、選択します。 設定画面が出てきますのでマウスクリックの 「編集」 を選択し、「外部リンク」で 「HotMedia ファイルの置き換え」 を選択、リンクさせたいほかのアプレットを選択して完了です。

保存してプレビューで確認してみましょう。

※ リンクさせるアプレット同士は同じフォルダに置く必要があります。
  動作しない時やアプレットの画面が灰色に表示される時は置かれている
  フォルダを確認してみましょう!

  また、切り替えるフレーム (切り替える一つずつの画面) は同じサイズ
  である必要がある所にも注意して作成していきましょう。

  動作しない時などはこれらを確認してみましょう。






| トップページへ | 小技集 | FAQ | 質問掲示板 | 免責事項  | リンクについて  | お問い合わせ  |
ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved