Adobe LiveMotionは、Web愛好家やプロのデザイナーにとって素晴らしいツールです。使い慣れたAdobeインターフェースにより、静止画やモーショングラフィックスを簡単に作成できます。
LiveMotionは個々の画像を個別に変更するため、リモートロールオーバーなどの高度なエフェクトの作成も比較的簡単です。あるグラフィックを別のグラフィックと入れ替えるだけの標準的なロールオーバーとは異なり、リモートロールオーバーでは、あるグラフィックが別のグラフィックの動作をトリガーできます。例えば、動物愛好家のサイトのページで、左側に「Pet The Cat」ボタンがあり、右側に空白があるとします。マウスをボタンの上に置くと、満足そうな猫の画像が空白に表示されます。マウスをボタンから離すと（マウスアウトと呼ばれます）、猫の画像は消えます。
リモートロールオーバーは、サイトにインタラクティブ性とちょっとした楽しさを加えます。基本的なリモートロールオーバーを作成し、ほぼすべてのWebユーザーが表示できる形式でエクスポートする方法をご紹介します。ご購入前にお試しになりたい場合は、https://www.adobe.com/products/livemotion から30日間の無料体験版をダウンロードしてください。
Molly E. Holzschlagは、『Teach Yourself Adobe LiveMotion in 24 Hours』（Sams、2000年）の著者です。彼女の著書、記事、セミナーの詳細については、https://www.molly.comをご覧ください。
1. トリガーオブジェクトのデザイン 最初のタスクは、トリガー（ページを読み込んだ際に表示されるオブジェクト）を作成することです。LiveMotionでトリガーを作成するかインポートしたら、標準的なロールオーバーステート（通常、オーバー、アウト）を追加します。
キャンバスを作成するには、「ファイル」メニューから「新規」を選択します。「OK」をクリックして、デフォルトのコンポジション設定を確定します。プログラム内でトリガーオブジェクトを作成するか、既製のオブジェクトを配置します。私は文字ツール （A）を使って テキストトリガーを作成しました。
次に、トリガーオブジェクトに標準的なロールオーバーを作成します。ポインタツール（B）でオブジェクトを選択します 。ロールオーバーパレット（ウィンドウ：ロールオーバーを選択）で、「新規ロールオーバーステート」ボタン（C）をクリックします 。パレットに「オーバーステート」が表示されます。
「オーバー」状態を選択し、トリガーオブジェクトの外観を変更します。マウスオーバー時にオブジェクトが黒から茶色に変化するようにしたかったので、オブジェクトを選択し、スポイトツール （D） とカラーピッカー（ウィンドウ：カラーを選択）を使って別の色を選択します。
「新規ロールオーバーステート」ボタンをもう一度クリックして、アウトステートを作成します。アウトカラーは、ノーマルカラーと同じ黒に設定しました。
2. リモートオブジェクトの作成 リモートオブジェクト（トリガーオブジェクトにマウスオーバーしたときに表示されるオブジェクト）は、単純なものから複雑なものまで、ページ上の任意の場所に配置できます。トリガーオブジェクトと同様に、リモートオブジェクトにも「通常」、「オーバー」、「アウト」の3つの状態を個別に作成します。
リモートオブジェクト （A）を配置します （ファイル：配置）。選択すると、ロールオーバーパレットに「通常」状態が表示されます。
最初はリモート オブジェクトを非表示にしたかったので、[不透明度] パレット ([ウィンドウ: 不透明度]) の [オブジェクト レイヤーの不透明度] スライダー (B)を 0 に移動して、通常状態の不透明度 を 0 に設定しました。
「新規ロールオーバーステート」ボタンをクリックします。デフォルトの「オーバーステート」が表示されたら、ポップアップメニューから「カスタムステート」を選択します。表示されるダイアログボックス （C）で、ステートの名前を入力します。私の画像には「リモート」という名前を付けました。このステートでは、マウスオーバー時にリモートオブジェクトが表示されるようにするため、オブジェクトレイヤーの不透明度スライダーを100%に設定しました。
「新規ロールオーバーステート」ボタンをもう一度クリックします。ポップアップメニューから「アウト」を選択します。これで、マウスがオブジェクトから離れたときの見え方を制御できます。オブジェクトレイヤーの不透明度スライダーを0に設定し、マウスが離れたときにオブジェクトが消えるようにしました。
3. トリガーとリモートオブジェクトの接続 トリガーオブジェクトとリモートオブジェクトのロールオーバーは作成されましたが、オブジェクト間のロールオーバー状態はまだ接続されていません。接続するには、「ロールオーバー」パレットで対応するロールオーバー状態をターゲットにします。
トリガーオブジェクトを選択します。「ロールオーバー」パレットで、ロールオーバーが発生する最初の状態をハイライト表示します。この例では、「オーバー」状態です。パレットからターゲットボタン（「ロールオーバー」サムネイルのすぐ左にあるボタン (A) ）をリモートオブジェクトにドラッグします。リモートオブジェクトの境界ボックスが表示されたら (B)、ターゲットをドロップします。
リモートオブジェクトがロールオーバーパレットの「オーバー」状態の下に表示されます。ポップアップメニュー （C）から 、リモートオブジェクトに対応するロールオーバー状態（ここでは「Image Remote」）を選択します。
同じ方法で Out 状態を接続します。
操作内容をプレビューするには、ツールパレット （D）の「プレビュー」ボタンをクリックし、トリガーオブジェクトにマウスを移動します。リモートイベントがトリガーされれば、正しい手順です。
4. エクスポートの準備 このリモートロールオーバーをFlashファイルとして保存し、HTMLページに埋め込むことができます。ただし、ユーザーがFlashプラグインをインストールしていない可能性が高い場合は、ロールオーバーをHTMLとJavaScriptとして保存することをお勧めします。
まず、画像に名前を付けます。トリガーオブジェクトを選択します。Webパレットを開きます（ウィンドウ：Web）。ファイル名フィールドが表示されない場合は、パレットの右上にある矢印 （A）をクリックして詳細表示を選択します。ファイル名フィールド （B）にトリガー画像の名前を入力します。私はtext_overという名前を付けました。リモートオブジェクトをクリックし、同じ方法で名前を付けます。
次に、「編集」→「コンポジション設定」を選択します。ダイアログボックスが表示されたら、「エクスポート」ポップアップメニュー （C）から「自動レイアウト」を選択します。「HTMLを作成」オプションを選択します。「OK」をクリックします。
書き出しパレットを開きます（「ファイル」→「書き出し設定」を選択）。ポップアップメニュー （D）からGIFまたはJPEGを選択します。どちらの形式を使用するか迷う場合は、「プレビュー」チェックボックス （E）をクリックして 、さまざまな設定でデザインをテストしてください。Webアダプティブオプション （F）を使用すると 、コンポジション内の色数を制限できます。これにより、グラフィックファイルのサイズが小さくなります。
5. HTMLとJavaScriptの エクスポート エクスポートは、リモートロールオーバー作成の最終段階です。ファイルはHTML、GIF、JPEG、またはFlashファイルとしてエクスポートできます。Flashのエクスポート手順については、http://www.macworld.com/2000/10/howto/rollover1.htmlをご覧ください。
エクスポート設定が完了したら、「ファイル」→「名前を付けてエクスポート」を選択します。エクスポートファイルの保存場所とHTMLファイル名を指定します。「OK」をクリックすると、LiveMotionが必要なグラフィックとコードをすべてレンダリングします。結果を確認するには、WebブラウザでHTMLファイルを開いてください （A）、 （B）。
