webｺﾝﾃﾝﾂ - 東海大学 · 2005-06-03 · 6．マウスカーソルの動き（part1）...
TRANSCRIPT
Web ｺﾝﾃﾝﾂ ～アニメーション編～
総合情報センター
第３版
１．アニメーションを作る前に
１．１ ホームページが表示される仕組み
１．２ HTML とは
２．アニメーション作成
３．完成イメージと作業の流れ
３．１ 完成イメージ
３．２ 操作の流れ
４．図形・文字の作成
４．１ 表示する大きさを決定
４．２ 図形の作成
４．３ 文字入力の操作
５．ファイル形式
５．１ ファイルの保存
５．２ ファイルを開く
５．３ ファイルの読み込み方法
５．４ ファイルの書出し方法（エクスポート）
６．マウスカーソルの動き（Part1）
６．１ ロールオーバーパレット
６．２ ロールオーバーの作成
６．３ 複数のステートのあるロールオーバー
６．４ グループ化されたロールオーバー
７．オブジェクトの編集
７．１ エイリアスの作成と解除
７．２ オブジェクトの整列
７．３ オブジェクトの切り抜き
８．スタイルとレイヤー
８．１ スタイルとは
８．２ レイヤーとは
８．３ レイヤーの操作
８．３．１ 新規レイヤー
８．３．２ カラーの変更
８．３．３ レイヤーの不透明度
８．３．４ レイヤーの削除
８．３．５ レイヤーの重なり順の変更
８．３．６ レイヤーの変更
８．３．７ レイヤーの表示/非表示の変更
１ １ ２ ３ ３ ３ ４ ５ ５ ５ ６ ６ ６ ６ ７ ７ ９ ９ ９ １０ １０ １１ １１ １１ １２ １２ １２ １３ １３ １３ １３ １４ １４ １４ １５ １５ １５ １５ １５ １６
８．３．８ レイヤーの立体化
９．マウスカーソルの動き（Part2）
９．１ リモートのオブジェクト作成
９．２ ロールオーバーの関連付け
１６ １６ １６ １７ １７ １７ １８ １８ １９ ２０ ２１ ２２ ２４ ２６ ２６ ２６ ２８ ２８ ２８ ２８ ２９ ２９ ２９ ３０ ３０ ３１ ３２ ３３ ３５
１０．アニメーション
１０．１ アニメーションとは
１０．２ アニメーションの作成
１０．３ 図形を作成し動かす
１０．４ 背景色を指定する
１０．５ 図形の作成
１０．６ 図形を動かす
１０．７ シーケンス
１０．８ キーフレーム
１０．９ スケール
１０．１０ オブジェクトの不透明度
１０．１１ シーケンス・キーフレームの編集
１１．文字を動かす（Part1）
１２．文字を動かす（Part2）
１２．１ 「Tokai」のアニメーション
１２．２ 「University」のアニメーション
１３．Web ページの作成
１３．１ 起動
１３．２ ページ作成（完成図①）
１３．３ フレーム作成
１３．４ 新規ページ
１３．５ 文字の作成・配置
１３．６ 文字に色をつける
１３．７ レイアウトプレビュー
１３．８ SWF ファイルの追加、配置と設定
１３．９ 完成
１４．ホームページを公開するにあたっての注意事項
付録
補足資料
１．アニメーションを作る前に ホームページ上に、アニメーションを作成する前に簡単にホームページの仕組みについて説明します。
１.１ ホームページが表示される仕組み
ＷＷＷ（World Wide Web）によって情報を発信するコンピュータを「ＷＷＷサーバ」と呼び、情報を参照す
るコンピュータを「ＷＷＷクライアント」と呼んでいます。コンピュータをＷＷＷサーバにするためにはサ
ーバソフトが必要です。サーバソフトには、Apache や Windows 用の IIS(Internet Information Server)など
があります。コンピュータをＷＷＷクライアントにするためにはブラウザソフトが必要です。ブラウザソフ
トには、Internet Explorer や Netscape Navigator などがあります。情報を発信するには、ＨＴＭＬ(Hyper
Text Markup Language)と呼ばれる形式で記述した情報をＷＷＷサーバに保存します。この情報はテキスト（文
字情報）だけでなく、画像や音声といったマルチメディア情報を扱うこともできます。ＷＷＷサーバはＷＷ
Ｗクライアントからの要求によってこれらの情報を送信します。
ＷＷＷクライアントから情報を参照するには、ブラウザソフトでＷＷＷサーバのアドレスを指定します。
このアドレス表記にはＵＲＬ(Uniform Resource Locator)を使用します。例えば東海大学総合情報センター
のホームページのＵＲＬは、http://www.cc.u-tokai.ac.jp/です。先頭の http は相手のコンピュータとの
通信方法を指示するもので、ＷＷＷサーバとＨＴＴＰ(Hyper Text Transfer Protocol)によって通信をおこ
なうことを指示しています。
HTML
URL
WWWサーバ WWW クライアント
ホームページが表示される仕組み
- 1 -
１.２ ＨＴＭＬとは
ＨＴＭＬ（Hyper Text Markup Language）はＷＷＷサーバのドキュメントを記述するための言語です。ま
たこの言語は、画像や音声、動画などをドキュメント内に埋め込むことや単語、文章、画像にリンクを持た
せ、クリックすることで関連項目を表示できるのが最大の特徴です。
以下に簡単なＨＴＭＬ形式で記述されたドキュメントを例として紹介します。
<>で囲まれた部分がタグです。
・ ・ 続く ・
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ……＞
<html>
<script language="JavaScript">
function popUp(url) {
sealWin=window.open(url,"win",'toolbar=0,location=0,directories=0,status=1,menubar=1,
scrollbars=1,resizable=1,width=500,height=450');
self.name = "mainWin"; }
</script>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>東海大学 総合情報センター</title>
</head>
Internet Explorer で表示すると以下のようになります。
またＨＴＭＬはテキストエディタでタグを直接記述してもかまいませんが、ワープロソフト（Microsoft
Word 等）を利用する方法もあります。作成したドキュメントを保存するときに「ＨＴＭＬ形式」で保存方法
を選択し保存します。すると自動的にＨＴＭＬ形式に変換し保存します。
ＨＴＭＬ形式で記述されたドキュメントファイルを閲覧する代表的なソフトウェアとして Microsoft
Internet Explorer、Netscape Navigator 等があります。
- 2 -
２．アニメーション作成 今回の講座で、利用するソフト「Live Motion」は、画像の加工やアニメーションなどを作成し、1ランク上
のホームページを作成するソフトウェアです。 特徴は、以下のようなものがあります。
１） 画像編集ソフトの Photoshopのファイル・Illustratorのファイルを読み込める。
２） Photoshop、Illustratorとの連携により、ファイルの編集ができる。
３） 文字、図形、ビットマップ画像、EPS画像の４種類のオブジェクトをすべて扱える。
４） オブジェクトそれぞれにレイヤーを持てる。
（レイヤーは、複数のレイヤーを同時に表示できる）
５） アニメーションの操作を簡単におこなえる。
６） マウスカーソルの動きに反応するインタラクティブなデザインも簡単に作成できる。
７） ホームページですぐに公開できるように、HTML形式で保存できる。
３．完成イメージと作業の流れ ３．１ 完成イメージ
③
②
①
ボタンの操作を行う 正常な状態 マウスが重なったとき クリックしたとき
- 3 -
① ボタンにマウスカーソルが重なると、写真が切り替わります。
② アニメーション … 大きさや不透明度の変更、回転しながら文字を表示します
３．２ 操作の流れ
１）デザインする
1.1) 素材の収集
1.2) 表示サイズの決定
1.3) 画像・文字の配置
1.4) 画像・図形の編集
２）ナビゲーションを作成
2.1) マウスの動きに合わせて画像を変える
2.2) マウスの動きに合わせて別の位置の画像を変える
３）アニメーションを作成
3.1) 時間の流れで動くようにする
3.2) 何度も繰り返す動きを付ける
４）ファイルを保存する
4.1) Flash（Web アニメーションの標準ファイル）のファイルにする
4.2) ブラウザで表示する
- 4 -
４．図形・文字の作成 ４．１ 表示する大きさを決定
LiveMotionを起動し、メニューバー [ファイル] → [新規]を選択すると、以下の「コンポジション設定」の
ウィンドウが表示されます。LiveMotionでは作成する領域のことを「コンポジション」と呼んでいます。
幅を[180]
高さ[310]
フレームレート[12]
フレームレート：１秒間に利用するコマ数です。コマ数が大きいほど素早く切り替わり滑らかな動きになり
ますが、作成されるファイルサイズが大きくなります。
以上の値を入力し[OK]ボタンを押すと上のコンポジションウィンドウを表示します。
４．２ 図形の作成
図形は、ツールバーのツールボタンを利用して作成します。
ツールボタンには、「四角形」「角丸四角形」「楕円形」「多角形」
「ペン」「ペン選択」ツール等が用意されています。図形は、塗
り・線で描くことができます。塗りの場合は、図形の内部が描画
色で塗りつぶされます。
線の場合は、図形の外枠が線で描かれます。線の場合は、線の太さも変更ができます。
作成後、変更したいときには［プロパティパレット］で変更ができます。
それでは、図形を作成してみましょう。
はじめに、図形を作成します。ツールバーの「角丸四角形」ツール を選択し、マウスのドラ
ッグを利用して描きます。カラーは、R：１９０ G：１９０ B：１９０です。
他にも、 Shift キーを押しながら描画すると縦横の長さが同じになり、
Alt キーを押しながらドラッグすると図形の中心から描画す
ることができます。
次に、図形の大きさを設定します。［変形パレット］ツールで設
定することができます。ここでは、幅「106」高さ「30」に設定
をします。
補足：「ペン」ツールでは、直線・曲線を描画することができます。
「ペン」選択ツールは四角形や楕円の図形などを編集ができます。
- 5 -
．３ 文字入力の操作
中に文字を入力して配置することができます。
用します。コンポジションの入力位置でクリックすると、カーソ
字作成後に編集をおこないたい場合は、「選択」ツール を選択し、文字 ion」）
．ファイル形式
でファイルを保存します。ただし、LiveMotion の独自形式の保存ファイルは、他
．２
を説明しましょう。
］→［開く］をクリックします。ファイルの場所を Z ドラ
４
文字は、コンポジションの
それでは、文字を入力してみましょう。
テキストの入力は、「文字」ツール を利
ルが表示され文字を入力します。
文 の上（ここでは、「LiveMot
でダブルクリックします。すると、カーソルが表示され編集することができます。
他にも、プロパティパレットで編集をすることができます。
５
５．１ ファイルの保存
LiveMotion は、独自の形式
のソフトで開いたり編集することはできませんが、さまざまな画像ファイルやサウンドファイルを読み込む
ことはできます。また、いろいろな画像ファイルの形式に書き出すことも可能です。ここでは、LiveMotion
形式の保存をおこないましょう。メニューバーの［ファイル］→［保存］を開きます。保存する場所を Z ド
ライブにし、ファイル名を記入して［保存］ボタンをクリックしてください。
５ ファイルを開く
次に、ファイルを開く方法
保存したファイルは、メニューバーの［ファイル
イブにし、ファイルを選択し、［開く］ボタンをクリックしてください。開くときの機能としてファイルを選
択したときに、ウィンドウ内のプレビュー画面で参照することができます。
設定項目を変更
- 6 -
．３ ファイルの読み込み方法
iveMotion では、さまざまなファイル形式の画像を読み込むことができます。（ここでは画像ファイルのみ
r などで編集をおこなえるベクター画像は、線と塗りから構成されていて、拡大縮小しても画質
集ま
作成できます。
５
L
の説明）
画像ファイルは、大きく２つに分けてベクター画像とビットマップ画像の２つのタイプがあります。
Illustrato
は変わりません。PhotoShop などで編集をおこなえるビットマップ画像は、ピクセルという小さな点の
りから構成されていて、拡大するとギザギザした感じになります。
EPS形式（拡張子「.eps」） Encapsulated Post Scriptという形式。ドロータイプのグラフ
ィックソフトで
ベクタータイプのファイル形式
Illustrator形式（拡張子「.ai」） Illustrator独自のファイル形式。レイヤーごとに分解すること
ができます。
TIFF形式（拡張子「.tif」） タグ付きのイメージファイルです。収録している画像の形式を
タグに記述してあります。
GIF（拡張子「.gif」） ホームページのロゴやアニメーションなどに利用されている
ファイルです。
JPEG（拡張子「.jpg」）
整することができる。
写真などに利用されています。圧縮率を指定して画像の室とフ
ァイルサイズを調
PNG（拡張子「.png」） アルファチャンネルを利用して徐々に透明化することができる
BMP（拡張子「.bmp」） イル Windowsで標準的に利用されているファ
DIB（拡張子「.dib」） デバイスに存在しない BMPファイル
ビットマップタイプのファイル形式
」）
にレイヤーごとに分解
PhotoShop（拡張子「.psd PhotoShopの独自ファイル形式
レイヤー付きの画像の場合、読み込み後
することができる
画像ファイルを読み込むときには、パソコンに保存してあ
ルカメラから読み込む場合とあります。読み込む方法は、 ［ファイル］→［配置］を選択し
み込ん ［オリジナル が
きます。
イルの書き出し方法（エクスポート）
こでは、エクスポートを利用してファイルの書き出しをおこないます。LiveMotion で作成したコンポジシ
ーとして書き出すこともでき、同時に HTML ファイル
るファイルを読み込む場合と、スキャナやデジタ
メニューバーの
ます。（下図）ファイルの種類によってはプレビューされます。これについては、「７．３ オブジェクトの
切り抜き」で説明します。
読 だファイルは、［編集］→ の編集］を選んで読み込んだファイルの形式によって編集
で
５．４ ファ
こ
ョンまたはオブジェクトを、Web 用画像・Flash ムービ
も書き出せ、そのままブラウザで表示もできます。
- 7 -
- 8 -
オブジェクト設定の作成：
クリックすると、コンポジションウィ
ンドウで選択したオブ
出すファイルの形式および画質設定は、エクスポート設定で行います。メニューバーの[ファイル]
定]を選択します。エクスポートの種類は、PhotoShop・GIF・JPEG・PNG・SWF・レイ
て書き出します。
不透明度０の部分を透明にして書き出せます。
タイムラインで指定した動きをアニメーション GIF 画像として書き出せます。
できます。
める：不透明度０の部分を透明にして書き出します。
ィザ：複数の色の点を組み合わせてパレットにない色を表現します。
インタレース：モザイク状から徐々に画像が表示される
＜MacromediaFlash(SWF)＞ ームページ用の動画ファイルとして利用されます。
通常は JPEG が指定されていて「圧縮率」「不透明度」設定が指定
クスカラーを選択したときには、GIF の書き出しと同じ
したときには、カラー設定と不透明度設定が指定
ス＞ 。
ブ用に圧縮：
低解像度の画像をブラウザで表示することができます
カラーテーブルを使用して圧縮する
出すファイルの形式および画質設定は、エクスポート設定で行います。メニューバーの[ファイル]
定]を選択します。エクスポートの種類は、PhotoShop・GIF・JPEG・PNG・SWF・レイ
て書き出します。
不透明度０の部分を透明にして書き出せます。
タイムラインで指定した動きをアニメーション GIF 画像として書き出せます。
できます。
める：不透明度０の部分を透明にして書き出します。
ィザ：複数の色の点を組み合わせてパレットにない色を表現します。
インタレース：モザイク状から徐々に画像が表示される
＜MacromediaFlash(SWF)＞ ームページ用の動画ファイルとして利用されます。
通常は JPEG が指定されていて「圧縮率」「不透明度」設定が指定
クスカラーを選択したときには、GIF の書き出しと同じ
したときには、カラー設定と不透明度設定が指定
＜レイアウト付きでスライス＞ 。
ブ用に圧縮：
低解像度の画像をブラウザで表示することができます
カラーテーブルを使用して圧縮する
エクスポート設定
書き
エクスポート設定
書き
→[エクスポート設→[エクスポート設
アウト付きでスライスがあります。
＜Photoshop＞ PhotoShop 用のファイルとして書き出します。コンポジション全体、選択したオブジェク
トを背景レイヤーとし
アウト付きでスライスがあります。
＜Photoshop＞ PhotoShop 用のファイルとして書き出します。コンポジション全体、選択したオブジェク
トを背景レイヤーとし
ジェクトを書き出す設定を保存 保存
＜GIF＞ LiveMotion では＜GIF＞ LiveMotion では
カラー：利用する色数を、２～２５６まで指定カラー：利用する色数を、２～２５６まで指定
透明度情報を含透明度情報を含
デデ
ホホ
画像： 画像：
されています。 されています。
インデッ インデッ
オプションを指定できます。 オプションを指定できます。
TrueColor を選択TrueColor を選択
できます。 できます。
書類のエクスポート設定
クリックすると、コンポジションウィンドウで選択したオブ
除 ジェクトに指定した設定を削
オブジェクト設定の削除：
コンポジションのレイアウトどおりに画像を分割して書き出します コンポジションのレイアウトどおりに画像を分割して書き出します ＜レイアウト付きでスライ
プログレッシプログレッシ
最適化：
この画像に合わせて最適化した
最適化：
この画像に合わせて最適化した
彩度を下げる： 彩度を下げる：
圧縮率を上げるために色数を減らす 圧縮率を上げるために色数を減らす
６．マウスカーソルの動き（Ｐａｒｔ１） マ オーバーといいますが簡単に作成
で オーバーは、よくホームページのボタンなどに利用されています。ステートパレット
を ト）を作成できます。
ムネール
● オブ
テート名
● norm
変
ス
選択
６
ブジェ
ールオー
ウスカーソルの動きに合わせてオブジェクトを変化させることをロール
きます。このロール
利用し、簡単にロールオーバーの状態（ステー
６．１ ステートパレット
サ
ス
● over
● down
● out …
更
● 標準
● 表示
テートの
●
．２ ロ
オ ク
ロ
ると、新
タ
ビ
す
ジェク
al …
オ
オブ
して
を
バーに
…
… オ
のステ
した内
削除
他の
ールオ
ロト
しいス
ーゲットアイコン
サ
ステート名
ヘイビ
変更
ト・グループを縮小表示
オブジェクトにマウスカーソルが重なったときの状
ブジェクトにマウスカーソルが重なった状態です。
ソルが重なってマウスボタ
ジェクトに重なっていたマウスカーソルがオブジェ
いるステートや表示内容の変更を削除（但し、nor
いきます
するオブジェクトを作成します。次に、ステートパ
- 9 -
ブジェクトにマウスカー
ートと違いがある表示や動作の内容を表示
容を選択して削除する
、内容については文章の中で随時説明して
ーバーの作成
ールオーバーするには、まずステートパレットでス
テートが作成されます。作成後カラーパレットで色
ムネール
アの編集
画像の置き換え サウンド ステートの複製
ス
新規ス
テートの削除
テート作成
態です。通常は、この状態です。
ンを押している状態です。
クトから離れたときの状態です。
malのステートの削除はできません）
。
トを作成します。
レットの
テー
をクリックします。
を変えてみましょう。
成したロールオーバーをプレビューしてみましょう。ツールバーの「プレビューモード」ボタン をク
ックし、マウスカーソルをオブジェクトに合わせて確認をします。確認後、「編集モード」ボタン をク
ックして、編集できるようにします。
．３ 複数のステートのあるロールオーバー
が「ステートの複製」
作
リ
リ
６
ロールオーバーパレットでは、マウスカーソルに合わせて４つのステートがあります。ここでは、上で作成
したロールオーバーに、downのステートを追加する方法を説明します。
まず、文字の down ステートを作成します をクリックすると、over ステートと同
表示で作成されます。説明した「新規ステート」じ では、標準と同じ表示で作成されます。
に、図形オ 図形 。
ブジェクトを選択し、overステートを「ステートの複製」します。ここでは、レイヤーの３D効果を使用
ます。３D効果を［波紋］を選択し、各数字を記入 ーで確認してください。
照明「１００」
ましょう。
６．４ グループ化されたロールオーバー
ートを作成してから、オブジェク
それでは、文字と図形をグループ化します。２つのオブジェクトを
Shift」キーを押したまま選択して、メニューバーの［オブジェクト］→［グループ化］をクリックします。
次 ブジェクトをクリックしたときに、 がへこんで見えるように変更します
オ
し します。作成後、プレビュ
３D「波紋」 深さ「３」
ぼかし「１」
作成後、プレビューしてみ
ボタンのように文字と図形がグループ化されているとき、グループでステ
トの表示を変化させるようにします。
「
- 10 -
の後、「新規ロールオーバーステート」で新規ステートを作 るオブジェクトを「ダ
レクト選択ツール」
そ 成します。次に、変化させ
イ で選択します。ここでは、図形を変化させます。（前述と同じ）
レビューをおこなう
．オブジェク
常、コピーや複製などを利用して編集を行いますが、それ以外にも編集方法があります。
．１ エイリアスの作成と解除
ェクトにも反映されます。ボタンなど複数のオブジェクトを
く同じように作成するときなどに利用します。
るオブジェクトを選択します。
したオブジェクトを下に移
します。レイヤ
を反映しないよう
させます。整列させるオブ
す。次に、メニューバーの［編集］→［すべてを選択］を選択します。（または、SHIFT
プ と、図形の上にマウスを合わせると図形の色が変化します。
７ トの編集 通
７
エイリアスは、１つのオブジェクトに変更をかけると他のオブ
ジ
全
はじめに、エイリアスを作成す
次に、メニューバーの［編集］→［エイリアスの作成］を選択
します。作成後、ドラッグして作成
動させます。
次に、１つオブジェクトを「ダイレクト選択ツール」 で選択
ーの３D効果で［べべル］を選択します。
次は、このエイリアスを解除する方法です。
選択したオブジェクトのエイリアスを解除して、お互いの変更
に変更できます。
解除するには、［編集］→［エイリアスの解除］を選択します。
７．２ オブジェクトの整列
ここでは、作成したオブジェクトを上下左右だけでなく等間隔に並ぶように整列
ジェクトを選択しま
キーを押したまま、オブジェクト選択）ここで、［オブジェクト］→［整列］→［水平方向中央に整列］を選
します。
に、同じようにオブジェクトを選択し［オブジェクト］→［均等配列］→［垂直方向］を選択します。
択
次
- 11 -
こでは、ライブラリパレットの画像で切り抜きをおこないます。
説明したとおり、画像「sea.jpg」を配置します。次に、この画像を選
きには、プ ャンネル」
「アルファチャンネルなし」か「アルファチャンネルを使用」にします。
アルファチャンネルとは、RGB各チャンネルのほかに画像ファイルを
成後、メニューバーの[ファイル]→[エクスポート]で、「ＧＩＦ」を選択し、
＜
．スタイルとレイヤー ．１ スタイルとは
タイルとは、オブジェクト（Web ページの構成要素のデザインや作成するための基本部品）に指定す
表示効果のことをいいます。この表示効果には、レイヤーに指定したもの、ロールオーバー効果があ
種類があります。
７．３ オブジェクトの切り抜き
コンポジションにあるオブジェクトは、一部だけ切り抜くことができます。オブジェクトの元の情報は維持
されているので、全体の表示に戻せるほかに、切り抜く範囲や形を変更することもできます。
こ
「５．３ファイルの読み込み方法」で
択しライブラリから切り抜くオブジェクト を選択し、 をクリックします。
切り抜きを元に戻すと ロパティパレットの「アルファチ
を
＊
持っているグレースケールのチャンネル（不透明度の情報）のことです。
完
Ｚドライブにエクスポートします。。「５．４ ファイルの書き出し方法」
ＧＩＦ＞
８
８
ス
る
るもの、アニメーションなどの
- 12 -
８．２ レイヤーとは
PhotoShop や Illustrator でのレイヤーは、1枚 1枚の画像や文字・背景など 1つのレイヤーとなりその集ま
りで 1 つオブジェクトとして表示されます。これにより、各レイヤーに対して個別に移動、変形、色調整、
フィルタリング
- 13 -
などの対象となるひとつの画像をもち、その下にある
レイヤーに対しての透明度や描画モードを指定したり、重なる順番を
は
クトを作成すると対応する１つのレイ
のオブジェクトと同じ形状のレイヤー
レイヤーは独立していると考えてください。LiveMotion では、オブジェクトごとに最
用意されている図形を
ラリパレットを表示し
を選択し、 をクリックしてください。
８．３．１ 新規レイヤー
新しいレイヤーを作成しま パレットで ー」ボタン をクリック
します。
．３．２
ラーの変更は、カラーパレットやツ できます。変更するレイヤ し、
ラーパレット（ＲＧＢ）で変更をおこないます。
変えることで、画像に様々な効果を与えます。作業は、常に複数のレ
イヤーを保持したままの状態で作業をおこなうため、複雑な効果を簡
単に作成できたり、作業途中に簡単に戻ったり、同じ変更を別の画像
に加えたり、個々に修正をおこなったりするときに非常に便利です。
、前述のレイヤーとは異なり、１つのオブジェ
ヤーが作成され、レイヤーを増すごとに選択中
が作成されます。つまり、オブジェクトごとに
大９９までレイヤーを作成ができます。
ただし、LiveMotion でのレイヤー
８．３ レイヤーの操作
新規コンポジションを作成し図形を配置します。ここでは、LiveMotion にあらかじめ
利用します。メニューバーの「ウィンドウ」→「ライブラリ」をチェックし、ライブ
ます。ここでは、木の形の図形を配置します。
１．クリック
２．クリック
「新規レイヤす。オブジェクトレイヤー
８ カラーの変更
カ ールバーで変更することが ーを表示
カ
黒でぬりつぶされたレイヤー
が下に追加されます。
変更する レイヤーを選択
Ｒ：１００
Ｂ：０ Ｇ：５０
す。
３ レイヤーの不透明度
また、グ す。
不透明にするレイヤーを選択します。不透明度パレットの「グラデーショ
リックし、「左から右」を選択します。
除されます。
順の変更
次に、背景色を変更しま
８．３．
不透明度パレットを利用すると、オブジェクトやレイヤーを透明化できます。
ラデーションのように徐々に変化させることもできま
ンなし」の項目の右の矢印をク
８．３．４ レイヤーの削除
必要でないレイヤーを削除するには、オブジェクトレイヤーパレットでレイヤーを選択し、「レイヤーの削
除」ボタン をクリックすると、レイヤーが削
８．３．５ レイヤーの重なり
オブジェクトが複数のレイヤーで構成されている場合、レイヤーの重なり順を変更するとオブジェクト
の表示が変わります。
カラー色を左のような値に設定します。
この部分をクリックします。
オブジェクトを選択
削除するレイヤーを選択 クリックします
ドラッグします
- 14 -
８．３．６ レイヤー名の変更
レイヤーを新規作成した場合、レイヤー名は「レイヤー２」と表示されます。変更をおこなう場合には、
変更するレイヤーを選択し、ダブルクリックして変更をおこないます。
８．３．７ レイヤー
イヤーの表示/非表示の切り替えによってレイ
ヤーの表示が変更されます。
８．３．８ レイヤーの立体化
レイヤーには、盛り上がりやへこみなどの立体効果をつけられます。
ここでは、３Ｄパレットを利用し、「エンボス」という立体効果に変更
します。まず、変更するレイヤーを選択します。３Ｄパレットで「エ
ンボス」を選択し、「深さ」「ぼかし」「照明」を調整します。
９
「
が の動きに反応するオブジェクトと、変化するオブ
ジェクトを組み合わせたものです。この関連付けは、ドラッグ＆ドロップでおこなうことができます。
９
こ 真が切り替わるオ
ブ 」で作成した木を
３ ァイルを開きます。
次に、「７．３オブジェクトの切り抜き」で作成したオブジェクトを木の下に配置します。
を選択し、ファイルを読み込みます。
メニューバーの「ファイル」→「置き換え」をクリックします。
。
の表示/非表示の変更
複数のレイヤーを作成した場合、レ
ヤー１つ１つの効果を変更できます。オブジェクトレイヤーパレットの をクリ
ックするたびに、レイ
．マウスカーソルの動き（Ｐａｒｔ２） ６．マウスカーソルの動き（Ｐａｒｔ１）」で説明したロールオーバー以外に、「リ
あります。リモートロールオーバーは、マウスカーソル
モートロールオーバー」
．１ リモートのオブジェクト作成
こでは、マウスポインタを３つの木の画像にカーソルが重なると、写
ジェクト（完成図②）を作成します。「８．３．８ レイヤーの立体化
つ「sample2.liv」ファイルとして用意してありますの、このフ
配置方法は、メニューバーの「ファイル」→「配置」
これが通常表示の状態になります。
次に、オブジェクトの入れ替えをおこなう方法について説明します。
① 「新規ステート」 をクリックします。
②
③ 「desert.gif」を選択し読み込みます
④ ステート名を変更します。右の矢印をクリックし、「カスタム」を選択
します。「desert」と名前を付けてください。
⑤ 同じように「ice.gif」も置き換え、ステート名（ice） に変更してください。
- 15 -
のオブジェクトと関連付けます。
し、
もおこなってください。
れで完成で おこ ）
０．
０．１ アニメーションとは
単に説明すると文字、図形、画像を効果的に移動させたり、
として、教科書などに人間が歩くような絵を何ページにも渡り書き、素早くページをめくると人間が
いているように見えます。原理はこれと同じです。静止画を１枚、１枚動きを入れながら作成し素早
動かすことによって「動き」を表現します。
ので１枚１枚コ
を作成する手間は省けます。
０．２ アニメーションの作成
ンを作成します。
９．２ ロールオーバーの関連付け
３色の木に overのステートを作成し、リモート
① ３色の木に対して「新規ロールオーバーステート」 をクリック
overステートを作成してください。
② 緑色の木の overステートの左にあるボタン を「sea」オブジェクトに
ドラッグします。
③ 「desert」「ice」オブジェクトに関して
なってください。（「sample3.liv」こ す。プレビューモード で確認を
アニメーション １
１
簡 スタイルを変えたりすることをいいます。
例
歩
く
LiveMotion では、変化の始まりと終わりを指定すると中間の変化を自動的に作成します
マ
１
以下のようなアニメーショ
- 16 -
[楕円形] [四角形]
n
Tokai University
oler:黒 Font:Times New Roman
図形 ：楕円形、四角
１０．３ 図形 し動かす
楕円形を中央に作成し左斜め下に移動するアニメーションを作成します。
新規に、コンポジションを作成します。
フレーム：１２
アニメーション効果は中心に楕円 に表示さ
れ、なおかつ大きさを変 る。
１０．４ 背景色を指
背景色を、「R 0 : G 12
[角円四角形]
文字：Live Motio
（coler :白 Font :Impact Size:80）
(c Size42)
背景色：R 0 : G 122 : B 223
形、角丸四角形、多角形
を作成
コンポジション幅：４００ 高さ：４００
があるときは何も表示されない状態から徐々
化させるような動きを設定す
定する
2 : B 223」に設定します。 １０．５ 図形の作成
[多角形]
①ツールボックスの「楕円形ツール」をクリックします。
②コンポジションウィンドウ上に楕円を書きます。
プロパティパレッ
「楕円形」となっ
トで図形の形が
ていることを確認
カラーパレットで「赤」
(R:255 G:0 B:0)となっていること確認
- 17 -
１０．６ 図形を動かす
ムラ
イン上で変化の始まりと終わりを指定すると、中間の変化は自動的に生成さ
タイムラインウィンドウはメニューバーの[タイムライン]から[タイムライン／コンポジションウィンドウ]
をクリックします。
オブジェクトに対してアニメーション効果を設定するときは、タイムラインウィンドウを利用します。タイ
ムラインとは、オブジェクトをどのタイミングで変化させるかを指定することができます。また、タイ
れます。
１０．７ シーケンス
オブジェクトを表示する時間の範囲をシーケンスといいます。シーケンスの開始点、終了点を設定しオブジ
ェクトを動かします。また、開始点を動かすことによりオブジェクトを表示するタイミングをずらしたり、
了点を動かすことによりオブジェクトが表示されないようにすることができます。
メーション作成し
ます。
シーケンス開始点 シーケンス終了
終
以下のオブジェクト（楕円）をタイムラインウィンドウにて中央から左端に移動するアニ
- 18 -
０．８ キーフレーム
インウィンドウのＣＴＭ （現在時間マーカー）がある時点にキーフレームをつけることができま
。また、キーフレームには位置の移動のように開始点と終了点を指定すれば中間の動きを自動的に作成し
変化するものと、文字の入れ替えのように指定した時点で突然変化するものもあります。
始点の設定
１
オブジェクトのスタイルや位置等を記憶するポイントをキーフレームといいます。
タイムラ
①ドラッグしてウィンドウを広げます。
②オブジェクトをクリックし選択します。
す
て
開
⑤ 移動を終了する時間までドラッグします ⑥ 移動を終了する位置までドラッグします
①クリッ ② クリックします
③ クリックします ④ 開始点のキーフレームが作成されます
クします
- 19 -
終了点の設定
ニメーションの再生
ィンドウの「再生」ボタン
ア
タイムラインウ をクリックするとアニメーションの動きが確認できます。
ブジェクトの縦横サイズを変えてアニメーショ
⑦ れます 終了点のキーフレームが作成さ
１０．９ スケール
ンにします。 オ
①オブジェクトをクリックし選択します。
③開始点のキーフレームが作成されます ②クリックします
④ドラッグしオブジェクトを縮小します ⑤移動を終了する時間までドラッグします
⑥クリックします ⑦終了点のキーフレームが作成されます
- 20 -
⑧ドラッグしオブジェクトを拡大します
ニメーションの再生
イムラインウィンドウの「再生」ボタン
ア
タ をクリックするとアニメーションの動きが確認できます。
０．１０ オブジェクトの不透明度
ブジェクトの不透明度は指定したオブジェクトにたいして不透明度の変化をアニメーションにします。
も表示されない状態からオブジェクトが徐々に表示されるようなアニメーションを作成できます。
１
オ
何
④不透明度パレットの値を「０」にする ⑤オブジェクトが透明になりました。
①オブジェクトをクリックし選択します。
③開始点のキーフレームが作成されます②クリックします
- 21 -
アニメーションの再生
タイムラインウィンドウの「再生」ボタン をクリックするとアニメーションの動きが確認できます。
れで、楕円のアニメーションの設定が終了しました。
課題： それぞれ、四角形、角丸四角形、多角形を作成し楕円と同じアニメーション効果を設定する。
最後には各オブジェクトは消えるように設定してください。
カラーは自由に指定してください。
０．１１ シーケンス・キーフレ
イムラインウィンドウにはコンポジション上のオブジェクト単位のシーケンスが表示されます。シーケン
はタイムラインウィンドウ上で、長さを調節・移動・削除もできます。先ほど課題で作成した図形を時間
で表示するようにシーケンスの編集を行います。シーケンスの長さは両端をドラッグすると調節できます。
ーフレームも同様にドラッグすると移動やコピー（+ATL キー）を行うことができます。
こ
⑥移動を終了する時間までドラッグします
⑦クリック ⑧終了点のキーフレームが作成されます
⑨不透明度パレットの値を「１００」にする
ームの編集 １
タ
ス
差
キ
- 22 -
フレーム]
移動 ・・・ドラッグす ーム
コピー・・・ALTキー すると選択したキーフレームを
キーフレームをドラッグして移動します
シーケンスをドラッグして移動します
[キー
ると選択したキーフレ の位置を移動することができます。
を押しながらドラッグ
することができます。
削除 ・・・キーフレームを選択して Deleteキーをクリックするとキーフ
コピー
削除でき
ア メーションの再生
タイムラインウィンドウの「再生」ボタン
レームを ます。
ニ
をクリックするとアニメ ます。 完成後、メニューバーの[ファイル]→[エクスポート]で、Ａドライブの sample4フォルダにＳＷＦ形式でエク
ス ５．４．２ エクスポート設定」＜ＳＷＦ＞参照）
（
ーションの動きが確認でき
ポートします。「
完成ファイルは「sample4.liv」として用意してあります。）
- 23 -
１ ） ニューバー[ファイル]→[新規]で、新しいコンポジ
に、文字「Live Motion」を プロパティ[ color :白 Font :Impact Size:80 ]
LiveMotion』文字が回転しながら表示するアニメーションを作成します。
状態からで徐々に表示され、なおかつ回転
、大きさを変化させるような動きを設定する。
③１文字ごとのオブジェクトになります
を表示する
） ニューバー[ファイル]→[新規]で、新しいコンポジションを開きます。
に、文字「Live Motion」を プロパティ[ color :白 Font :Impact Size:80 ]
LiveMotion』文字が回転しながら表示するアニメーションを作成します。
状態からで徐々に表示され、なおかつ回転
、大きさを変化させるような動きを設定する。
③１文字ごとのオブジェクトになります
④タイムラインウィンドウを表示する
１．文字を動かす（Part１．文字を動かす（Part１メメ ションを開きます。
次次
でコンポジション上に入力します。 でコンポジション上に入力します。
『『
アニメーション効果は中心に文字があるときは何も表示されないアニメーション効果は中心に文字があるときは何も表示されない
しし
②メニューバーの[オブジェクト]から
[レイヤー分割][オブジェクト]を選択す①クリックします
④タイムラインウィンドウ
- 24 -
⑤ 終了点の設定 すべての文字を選択します。
プロパティストップウォッチの
ボタンをクリックする
キーフレームが作成されます
＊ 位置
＊ オブジェクトの不透明
＊ 回転 ＊ スケール
⑥ 回転の設定
変形パレットで変更をおこないます。 回転：７２０ ⑦ 開始点の設定
キーフレームの追加チャックボタンを
クリックします。
＊ 位置
＊ オブジェクトの不透明度
＊ 回転
＊ スケール
⑧ 文字を中心に集める メニューバーの「オブジェクト」→「整列」→「中心揃え」をクリックします。 コンポジションの中心に文字を集合させます。 ⑨ オブジェクトの不透明度・回転・スケールを変更します。
アニメーションの再生
タイムラインウィンドウの「再生」ボタン をクリックするとアニメーションの動きが確認できます。
- 25 -
１２． 文字を動かす（Part２） 文字「Tokai」と「University」を プロパティ[color:黒 Font:Arial Size：42]でコンポジション上に入
力します。
１２．１ 「Tokai」のアニメーション
Tokai の文字が上部から指定した場所に降りてくるアニメーションを作成します。
アニメーション効果は上部に文字があるときは表示されている状態で、途中表示が消えます。再度徐々に下
に降りながら指定した場所に表示されるような動きを設定する。
課題：上記のアニメーションを作成してください（文字を通過したときに一度文字の表示が消える）
タイムラインは上図を参考にします。
１２．２ 「University」のアニメーション
University 文字は中央から右斜め下に一度移動し、指定した場所に移動するアニメーションを作成します。
アニメーション効果は中央に文字があるときは何も表示されない状態からで徐々に斜め下に降りながら指定
した場所に表示されるような動きを設定する。
- 26 -
① 「University」を選択します ②終了点の設定
＊位置
＊オブジェクトの
不透明度
＊スケール
③ 開始点を設定
④ 次に、斜めに降りてくる設定をします （中間点の設定）
ドラッグします
５秒のときに壁に ぶつかるように
④ ⑤
設定します。
⑤ 「１２．１」で作成した方法で、「University」を一度表示が消えるように設定します
＊４秒のときに表示が消えるように不透明度を０にします。
アニメーションの再生
タイムラインウィンドウの「再生」ボタン をクリックするとアニメーションの動きが確認できます。 これで、図形と文字のアニメーションが完成しました。この２つをまとめたものを「Sample5.liv」として用
意してあります。確認してみましょう。
- 27 -
１３． Web ページの作成
LiveMotion と同社の Web デザインツール GoLive6.0 では、スマートオブジェクトという機能が装備されてい
るので、LiveMotion と連携させると大変便利に Web 作成がおこなえます。LiveMotion では、PhotoShop や
Illustrator のファイルをドラック＆ドロップするだけで配置でき、配置したものをダブルクリックすると
編集がおこなえますが、GoLive でも同じ感覚でレイアウトにドラック＆ドロップで自動生成され配置されま
す。特に、Falsh（.swf）ファイルをレイアウトするには便利です。
ここでは、図１のページを作成してみます。
１３．１ 起動
はじめに、[スタート]→[プログラム]→[マルチメディア]→[Adobe GoLive6.0]を起動します。
像ファイルを作成します。そこで、
１３．２ 新規作成
新規にホームページを作成する場合には複数の HTML ファイル、画
これらのファイルを１つのディレクトリに収めてこれからの作業を
おこないます。
メニューバーから、「ファイル(F)」→「新規サイト」を選択します。
「サイトウィザード」が起動します。次に、[シングルユーザ]を選択し次へを、[ブランクサイト]を選択
し、次へをクリックします。次に、[新規サイト名]を入力します。各自で名前をつけてください。[プロ
ジェクトフォルダを作成する]には、チャックボックスにチェックをつけてください。最後にフォルダを
格納する場所を指定します。[参照]ボタンをクリックし、Ｚドライブを指定してください。
以上で、新規サイトの作成は終了です。Ｚドライブにフォルダが作成されているか、またフォルダの中
に『index.html』ファイルが作成されているかを確認してください。
１３．３ フレームの作成
Web を作成しているときに、いくつものリンクを設定した場合は、Web ページの表示に時間がかかります。
これをスムーズにおこなうためにフレーム機能をここでは使用します。フレームは、フレーム情報を管
理する HTML ファイル、それぞれのフレームに表示する HTML ファイルから構成されます。
フレームを作成するには、[フレーム]タブをクリックします。そこで、オブジェクトパレットの[フレー
ム]タブをクリックします。フレームの基本形からフレームを選択しフレームエディタへドラッグ＆ドロ
ップします。ここでは、３分割されているものを使用します。
次に、フレームの設定をおこないます。
- 28 -
を付けます。
レーム)
ください。
３．４ 新規ページ
する HTML ページを作成します。メニューバー[サイト]→[新規]→[ページ]をクリッ
３．５ 文字の作成・配置
します。
学部××学科3abc1234東海太郎」
１３．６ 文字に色をつける
、色の変更は可能です。文字に
まず、３分割されたフレームそれぞれに名前
フレーム名は、リンクを設定するときに重要になります。
名前をつけるフレームを選択し、フレームインスペクタ
パレットを開いてファイル名を記入します。
名前：mokuji(左フレーム)、animation(右上フ
gazou(右下フレーム)
次に、このファイルを保存します。メニューバー[ファイル]→[保存]をクリックして
サイズ：２００
サイズ：２３２
サイズ：３８８
１
各フレームに表示
クします。作成されたファイル名を「mokuji.html」に変更します。
次に、「mokuji.html」をダブルクリックして編集をおこないます。
１
図の○のボタンをクリック
図のようにレイアウトに「東海大学××
と記入します。ここで、注意するべきことは改行の方法です。通常のリ
ターンキーによる改行は、１行空いた形になり段落改行になります。一
方、シフトキーを押しながらリターンキーを押すと、空きの行を作らず
に次の行からはじまります。この際には図のような矢印が表示されます。
通常の文字の色は黒ですが
色をつけるためにはカラーパレットを使用します。はじめ
に、文字色を変更したい部分をドラッグ選択します。その
後カラーパレットで色を選択します。選択された色（ここ
では、「青」）をドラッグして選択した文字に色を付けます。
＜様々なカラーパレット＞
- 29 -
３．７ レイアウトプレビュー
に見えるかを確認し
１３．８ SWF ファイルの追加、配置と設定
るファイルを追加します。
クリックし、[サイトに追加]ダ
１
実際に、Web ブラウザでどのよう
ます。確認をおこなうには、[プレビュー]タブをク
リックします。プレビューモードでは、編集はおこ
なえませんが、改行マークなどが表示されず Web ペ
ージに近いイメージを確認することができます。
はじめに、My HomePage フォルダに使用す
メニューバーの[ファイル]→[読み込み]→[ファイルをサイトに追加]を
イアログボックスで、[3.5 インチ FD]内の「sample1.swf」ファイルを選択し、追加 ボタンをクリック
します。続いて 終了 ボタンをクリックします。
次に、 、レイ シュート」ボ
完成したら、
[パレット]から[プラグイン]を選択し アウトにドラッグします。「ポイント＆
タン から先ほど追加したファイルにドラッグします。また、幅 180pixel・高さ 500pixel を設定します。
これで、[プレビュー]タブをクリックしてみましょう。
「mokuji.html」名で保存しましょう。
- 30 -
１３
最後に「index.html」ファイルを完成させましょう。各フレームにファイルをリンクさせます。
以上で完 ビュ 確認しましょ
．９ 完成
う。 成です。プレ ータブをクリックし、
- 31 -
４．ホームページを公開するにあたっての注意点 ホームページを公開することは良いことばかりではなく、思わぬ問題を起こす可能性を秘めています。 他
「外部から見られる状態」にしただけ
個人情報の漏洩
繁に事件の報道がなされています。
報を受け取る側も注意が必要です。出版物や各種の報道は組織的に情報を提供しているため、ある程度の
ージはあくまで個人が発信している情報であり、信憑
１
のページからリンクをしていなくても、URL を人に教えていなくても
で、だれかが偶然発見したり、自動検索されたりして、知らぬ間に色々な人が見ている可能性もあります。
また、今までは自分の考えを多くの人に伝えることは、本を出版したり雑誌や新聞の記事にでもならない限
り不可能でした。しかし、ＷＷＷでは誰でも簡単に実現できてしまう可能性があります。
その結果、個人が簡単に不特定多数の人に対して情報を提供できるようになり、その内容によっては以下
のような社会的問題に発展する可能性があります。
・ 著作権および肖像権の問題
・
・ 誹謗中傷
・ 詐欺事件
など最近では頻
情
信憑性が確保されています。しかし、個人のホームペ
性は全く保証されていません。
- 32 -
録 イムラインウィンドウの表示項目
在時間
CT
付
タ
現在時間
再生コントロール
サウンドボタン CTM（現在時間マーカー）
タイムラインナビゲーター
階層表示
拡張/折り込み
ベヘイビアボタン
時間フレーム表示
シーケンス
キーフレーム
プロパティストップウォッチ
ループボタン
延長ボタン キーフレームの追加／削除
チェックボックス
時間表示の拡大／縮小
現
M （現在時間マーカー）のある時間を分・秒の単位で表示します。
ションウィンドウには、現在時間のオブジェクトの状態が報じされます。
再
アニメーションの再生や停止、コマ送りなどを操作するボタンです。
コンポジ
生コントロール
クリックするとアニメーションの開始時間に CMT を移動します。
クリックすると、１フレーム前に CMT を移動します。
クリックすると現在の CMT の位置からアニメーションを開始します。CMT の位置がアニメー
間 アニメーションの再生中はションの終了時間にあるときは開始時 から再生します。 に表示
が変わり、クリックするとアニメーションが停止します。
クリックすると１フレーム先に CMT を移動します。
クリックするとアニメーションの終了時間に CMT を移動します。
サウンドボタン
クリックするたびにサウンド全体のオン／オフを切り替えます。
- 33 -
ＣＴＭ（現在時間マーカー）
現在表示しているアニメーションのフレームを示します。CMT はドラッグしたり再生コントロールで位
時
時間とフレームにメモリを表示します。数値の後ろにある「s」は秒を、「f」はフレームを示します。秒と
ムの数値はコンポジション設定や表示時間の拡大／縮小
置を動かすことができます。
間・フレーム表示
秒の間にあるフレー によって変わ
タ ナビゲータ
ります。
イムライン
タイムラインナビゲータをクリックするとタイムラインウィンドウに表示する内容を１つ上の階層に切り
階
替えます。
層表示
クリックするとメニューが表示され階層を切り替えられます。
拡張／折り畳み
クリックするたびに下の階層にある項目の表示／非表示を切り替えます。
プロパティストップウォッチ
オン にすると現在の時間にキーフレームを作成して、項目の設定を記録します。別の時間で設定すると
り す オフその間がアニメーションにな ま 。 にすると項目のキーフレームが削除されます。
「
キーフレームの削除と追加」チェックボックス
プロパティストップウォッチがオン のとき表示されます。チェックすると現在の時間にキーフレームを
キーフレームを削除します。チェックボックス横には現追加します。チェックを外すと現在の時間にある
在の時間のアニメーションの動作を示す三角が表示されます。
右だけに三角 ・・・現在の時間から項目の変化が始まります。
両方に三角 ・・・変化の途中を表します。
・・・項目の変化が終了します。 左だけに三角
ループボタン
オンにするとアニメーションの動きを何度も繰り返します。コンポジション全体、または独立したタイム
できます。
自
ラインに指定
動延長ボタン
オンにするとシーケンスの終了点が になり、コンポジションのアニメーションの長さによって自動的に
オフ すると終了点が延長されます。 に になりその時点でグループやオブジェクトの表示を終了します。
- 34 -
示時間の拡大／縮小
時間・フレーム表示の目盛りを表示する間隔を拡大／縮小します。
表
クリックするたびに目盛りの表示が１段小さくなります。
クリックするたびに目盛りの表示が１段大きくなります。
ドラッグすると目盛りを表示する大きさを各段階に変更できます。
通常の表 示
目盛り大
目盛り小
シー
アニメーションを表示する時間の長さです。コンポジション全体のシーケンスは薄い灰色表示されます。
クトやグループのシーケンスはピンク色で表示されます。独立したタイムラインのシーケンス
キー
オブジェクトのスタイルや位置などを記憶するポイントです。位置の移動のように開始点と終了点を指
間の動きを自動的に作成して滑らかに変化するのものと文字の入れ替えのように指定した時
ビヘ
ケンス
オブジェ
は薄い灰色でサウンドのシーケンスは水色で表示されます。
フレーム
定すれば中
点で突然変化するものもあります。
イビアボタン
クリックするとコンポジションや独立したタイムラインにビヘイビアを指定できます。
- 35 -
足資料：各用語（めも：必要であれば常時追加可能） ホームページを作成する上でいくつかの用語が出てきます。代表的な用語を以下に説明します。
直訳すると「世界中に張り巡らされた蜘蛛の巣」という意味になります。インターネット上に分散してい
クによって関連づけることによって、自由自在にコンピュータ間を移動して情
bページ上でインタラクティブ（情報の送り手と受け手が相互に情報をやりとりできる状態。対話型。）な
像を表示させたり、イラストを回しながら弾ま
プリケーションに機能を追加する機能拡張ファイル。「plug in」は「プラグに接続する」という意味。「エ
sion）」、「アドイン(add in)」などともいう。
により簡単に機能を追加することが
補
ＷＷＷ(World Wide web)
るコンピュータ資源を、リン
報を参照することができることを意味します。
つまり､インターネットでの情報検索システム、サービスシステムのひとつ。 Dynamic HTML(ダイナミック エイチティーエムエル)
We
表現を可能にする技術。ポインタをあてることで指定した画
せたり、背景色をフェイドイン・フェイドアウトさせたり、といった動的な Web コンテンツを実現できる。
処理はクライアント側の Web ブラウザで行なう。
Plug in(プラグイン)
ア
クステンション（exten
例えば､WWW ブラウザに組み込むことで、WWW ブラウザが処理できないデータを処理したりする拡張モジュ
ールをこう呼ぶ。プラグインのファイルを特定のフォルダに入れること
できる。プラグインは単体で動作せず、必要に応じて組み込んだり取り外したりできる。
これによって、HTML 文書の一部として配置された特殊なデータ（通常の www の機能では処理しきれないデ
ータ）を、あたかもページの一部として表示させる事が出来る。
ブラウザ用のプラグインとしては Shockwave が有名。 (一口メモ)
Adobe Illustrator や PageMaker もプラグインをサポートしている。また、Macromedia FreeHand など
社の製品は Xtra という名前で統一されている。
Macromedia
- 36 -