アドビ Flash を 使 用 した Web アニメーション 1.1 Fl と 書 かれた 赤 いアイコンをダブルクリックします 2 Flash の 基 本 ( 代 表 例 のみ) 2.1 ツール 画 面 1 選 択 ツール 物 体 などを 選 択 する 2 自 由 変 形 ツール 拡 大 縮 小 回 転 など 幾 何 学 変 換 を 行 う 4テキストツール 文 字 を 挿 入 する 種 類 静 止 テキスト: 通 常 アニメーションを 作 成 する 際 これを 選 択 ダイナミックテキスト:Action Script 内 で 変 数 として 扱 うことが 可 能 = 代 入 する テキスト 入 力 :インタラクティブな Web サイトを 作 る 際 に 使 用 する 3 鉛 筆 ツール 鉛 筆 で 描 画 することができる 5 矩 形 ツール マウスボタン 長 押 しで 以 下 の 図 形 が 使 えます 6 線 の 色 面 の 色 5などで 図 形 を 描 く 際 線 の 色 と 面 の 色 を 指 定 することができる バケツツール 線 と 線 で 囲 まれた 閉 じた 線 形 に 対 して 面 の 色 をつけることができる Flash での 簡 単 なアニメーション 操 作 編 クラシックトゥイーン と モーショントゥイーン Flash CS4 からのモーショントゥイーン( 直 線 的 なアニメ ーション)は, 旧 バージョンまでのモーショントゥイー ンとは 違 っています 旧 バージョンまでのモーショント ゥイーンは クラシックトゥイーン と 言 い,CS4 での 新 モーショントゥイーンとは 区 別 されています Flash CS4 からは 必 ず 物 体 を 作 成 したあとにシンボ ル 化 インスタンス 名 をつける 手 間 が 増 えました これは ActionScript3.0 によって 完 全 Object 志 向 型 プログ ラムへと 変 わったためです 今 回 は 時 間 の 関 係 で Flash CS5.5 を 使 った ActionScript2.0 を 使 用 します 下 記 に2つのモーショントゥイーンの 作 成 方 法 と 違 いについて 簡 単 に 説 明 します クラシックトゥイーンが 適 用 できるのは, グラフィック インスタンス, ボタンインスタンス, ムービークリ ップインスタンス の3 種 類 のインスタンスです *クラシックトゥイーンではどのインスタンスでも 基 本 的 に 同 じ 操 作 です クラシックトゥイーン 操 作 編 *クラシックトゥイーンが 適 用 できるのは1レイヤー1 1
インスタンスです *まずステージ 上 にムービークリップを 配 置 します ムービークリップが 20 フレームでステージの 左 上 から 右 下 に 動 くアニメーションを 作 成 します まず,ムービークリップを 配 置 したレイヤーの フレーム 2~フレーム 20 を 選 択 し, [ 挿 入 ] [タイムライン] [フレーム]で,フレーム 20 まで のフレームを 挿 入 します * 右 クリック [フレームを 挿 入 ]など 他 の 方 法 で 挿 入 してもかまいません 次 にクラシックトゥイーンを 始 めたいレイヤーである フレーム 1 を 選 択 した 状 態 で, [ 挿 入 ] [クラシックトゥイーン]を 選 択 します その 指 定 をすると,フレーム 1 から フレーム 20 にかけ てレイヤーの 色 が 変 わり, 矢 印 が 表 示 されます フレーム 20 のムービークリップを 選 択 して,ステージの 右 下 の 方 にドラッグで 移 動 させます 次 に,クラシックトゥイーンを 終 了 させたいフレームで ある フレーム 20 を 選 択 した 状 態 で, [ 挿 入 ] [タイムライン] [キーフレーム]を 選 択 し, フレーム 20 をキーフレーム にします これで,ムービークリップがステージの 右 上 から 左 下 に 移 動 する 簡 単 なアニメーションができます 2
クラシックトゥイーンとはこういう 機 能 です インスタ ンスの, 動 かしたい 最 初 の 状 態 と 最 後 の 状 態 をトゥイー ンで 結 べば,その 間 のフレームでの 位 置 や 色 や 大 きさな どの 状 態 が 補 完 されて,アニメーションが 簡 単 に 作 成 で きます ムービークリップが 20 フレームでステージの 左 上 から 右 下 に 動 くアニメーションを 作 成 したいと 思 いますから, まず,ムービークリップを 配 置 したレイヤーの フレーム 2~フレーム 20 を 選 択 し,[ 挿 入 ] [タイムライン] [フ レーム]で,フレーム 20 までのフレームを 挿 入 します FlashCS4での 新 しい モーショントゥイーン モーショントゥイーンの 適 用 で 補 完 されるプロパティは, 2D X-Y 座 標,3D Z 座 標,2D 回 転 ( Z 軸 周 り),3D X-Y-Z 回 転, 傾 斜 X-Y, 伸 縮 X-Y,カラー 効 果,フィルタプロ パティです また 3D モーションでは,パブリッシュ 設 定 で FLA ファイルのターゲットが Action Script 3.0 お よび Flash Player 10 になっている 必 要 があります モーショントゥイーン が 適 用 できるのは, グラフィッ クインスタンス, ボタンインスタンス, ムービ ークリップインスタンス の3 種 類 と 静 止 テキストを 含 む テキストフィールド です モーショントゥイーンでは,X-Y 座 標 などに 加 えて, 擬 似 Z 座 標 プロパティや, 擬 似 3D 回 転 プロパティも 補 完 されたアニメーションが 作 成 できます ( 中 級 編 にな ります)これら 3D 的 なプロパティはムービークリップイ ンスタンスにしか 適 用 されないため, 今 回 は 省 略 します 作 成 の 最 初 はモーショントゥイーンもクラシックトゥイ ーンとほぼ 同 様 です 次 にキーフレームは 作 らずに, [ 挿 入 ] [モーショントゥイーン]を 選 択 して,フレームに モーショントゥイーンを 設 定 します そして, 最 後 のフレームである フレーム 20 を 表 示 させ て,ムービークリップをステージの 右 下 の 方 にドラッグ 3
で 移 動 させます すると 自 動 的 に フレーム 20 にキーフ レームのようなものが 作 成 されますが,これはキーフレ ームではありません これは プロパティキーフレーム と 呼 ばれるもので, Flash CS4 に 新 たに 導 入 されたものであり,モーショント ゥイーンの 特 定 の 時 間 またはフレームのプロパティのた めに 定 義 された 値 を 指 します また,それと 同 時 に 最 初 のフレームのインスタンスと 最 後 のフレームのインスタンスをつなぐような 線 が 表 示 さ れますが,これを モーションパス と 言 います ムに 表 示 されるインスタンスを 違 う 場 所 にドラッグで 移 動 させると, 自 動 的 にそのフレームに プロパティキーフ レーム が 挿 入 され 途 中 で 変 化 するトゥイーンが 作 成 さ れます また 同 時 に,モーションパスも 変 更 されます この 状 態 で,クラシックトゥイーンと 同 じようなアニメ ーションができます このモーションパスは 選 択 ツールで 変 形 することができ ます クラシックトゥイーン でのモーションガイドに 近 い 物 ですが,モーションガイドとは 違 って, 線 を 交 差 させる ことなどもできます トゥイーンスパンは,ステージ 上 のオブジェクトのプロ パティを 何 度 も 変 更 できるタイムライン 内 のフレームの グループです クラシックトゥイーンと 同 じようにフレーム 1 と フレ ーム 20 との 間 辺 りのフレームを 表 示 させて,そのフレー 4
下 のようなアニメーションが 簡 単 に 作 成 できます 1.フレーム 1 で 矩 形 ツールを 使 用 して 正 方 形 を 描 画 し ます 2. 同 じレイヤーのフレーム 30 を 選 択 し 挿 入 /タイムラ イン/ 空 白 キーフレームを 選 択 するか F7 キーを 押 して 空 白 キーフレームを 追 加 します 3.ステージで 楕 円 ツールを 使 用 してフレーム 30 に 円 を 描 画 します これで フレーム 1 には 正 方 形 で 表 示 さ れたキーフレームが 作 成 され フレーム 30 には 円 で 表 示 されたキーフレームが 作 成 されます 4.タイムラインで 2 つのシェイプが 含 まれるレイヤー 内 にある 2 つのキーフレーム 間 のフレームの 1 つを 選 択 参 考 引 用 サイト http://www.1art.jp/flash9/index.html http://suzupara.iinaa.net/mixi/cs4_motiontween/index.html *モーショントゥイーン (Motion Tween) モーショントゥイーンアニメーションはタイムラインの アニメーションの 開 始 点 と 終 了 点 のキーフレームを 作 成 するだけで 中 間 の 処 理 はすべて Flash によって 作 成 され る 非 常 に 効 率 の 良 い 方 法 です モーショントゥイーンを 設 定 できるのはシンボルなどのグループ 化 された 要 素 の みで そのオブジェクトを 移 動 回 転 伸 縮 透 明 度 明 度 カラーの 変 更 等 はできますが まったく 違 う 形 状 のものに 変 化 させることはできません シェイプトゥイーン シェイプトゥイーンは 開 始 点 終 了 点 とも 対 象 がシェイ プ 画 像 である 場 合 に 適 用 できる 効 果 で 開 始 点 のシェイ プから 終 了 点 のシェイプにモーフィング 的 な 効 果 で 変 化 させることができます シェイプトゥイーンの 作 成 次 の 手 順 に タイムラインのフレーム 1 からフレーム 30 の 間 にシェイプを 作 成 する 方 法 を 示 します ただし 選 択 するタイムラインの 任 意 の 部 分 にトゥイーンを 作 成 します 5. 挿 入 /シェイプトゥイーンを 選 択 します Flash によって 2 つのキーフレーム 間 にあるすべてのフ レーム 内 のシェイプが 補 間 されます 6.トゥイーンをプレビューするには タイムライン 内 のフ レームに 再 生 ヘッドをスクラブするか Enter キーを 押 し ます 7.シェイプに 加 えてモーションをトゥイーンするには フ レーム 30 のシェイプを フレーム 1 のシェイプの 位 置 とは 異 なるステージ 上 の 位 置 に 移 動 します Enter キーを 押 してアニメーションをプレビューします 8.シェイプのカラーをトゥイーンするには フレーム 1 のシェイプをフレーム 30 のシェイプとは 異 なるカラー にします 9.トゥイーンにイージングを 追 加 するには 2 つのキーフ レーム 間 にあるフレームの 1 つを 選 択 し プロパティイ ンスペクタのイージングフィールドに 値 を 入 力 します 負 の 値 を 入 力 すると トゥイーンの 先 頭 がイージングさ れます 正 の 値 を 入 力 すると トゥイーンの 末 尾 がイー ジングされます できます 5
( シェイプトゥイーンのイメージ 画 面 ) ファイルの 保 存 ファイル ドキュメントの 保 存 方 法 にはいくつかの 方 法 があります 主 な 保 存 方 法 は 以 下 の 通 りです 保 存 名 前 を 付 けて 保 存 全 て 保 存 保 存 して 最 適 化 ドキュメントを 保 存 する 場 合 はメニューの[ ファイ ル]-[ 保 存 ]を 選 択 すると 保 存 を 行 う 事 ができます 下 記 に 簡 単 な 保 存 方 法 を 説 明 します ショートカットキー:Ctrl + S キー (Windows) 最 初 に 新 規 ファイルを 開 きメニューの[ファイル]-[ 保 存 ] を 選 択 します 名 前 を 付 けて 保 存 の 場 合 は 今 現 在 開 いているファイルの 他 に 別 のファイル 名 で 保 存 する 場 合 に 使 用 します 使 用 方 法 はメニューの[ファイル]-[ 名 前 を 付 けて 保 存 ]を 選 択 します 保 存 して 最 適 化 Flash で 作 業 を 行 っている 時 にインスタンスやコンポーネ ントなどのオブジェクトをステージに 配 置 するとその 分 ファイルのサイズが 大 きくなります この 時 すでに 配 置 したものを 削 除 してもファイルのサイズはそれに 伴 って 小 さくはなりません そういった 場 合 に 最 適 化 を 行 い 余 分 なデータを 削 除 します 保 存 して 最 適 化 を 行 うにはメ ニュー[ファイル]-[ 保 存 して 最 適 化 ]を 選 択 します ファイルの 種 類 と 拡 張 子 について Flash ではパブリッシュ( 書 き 出 し) 機 能 により 様 々なデ ータを 書 き 出 してくれます.fla FLA ファイルは 主 に Flash で 使 用 されるファイルです 元 データで 再 編 集 が 可 能 です CS5.5 では 古 いバージョ ンのデータは 開 けますが 古 いバージョンではCS5.5 デ ータを 開 くことができません.swf SWF ファイルは 作 成 した FLA ファイルを Web ページで 表 示 する 事 ができる 様 にコンパイラでコンパイルしたフ ァイルです ( 圧 縮 データのため 再 編 集 できません).as AS ファイルは Action Script が 記 述 されたファイルで FLA ファイルの 外 部 に 置 いて 使 用 します HTML ファイル 内 で 外 部 の css や js ファイルを 呼 びだす 時 に 使 用 する 方 法 に 似 ています ファイル 名 及 び 拡 張 子 は 全 て 半 角 英 数 の 小 文 字 で 統 一 してください 次 に 下 のパネルが 開 くので[ 保 存 ]ボタンを 押 せば 保 存 す る 事 ができます 今 回 の 様 に 新 規 のファイルを 編 集 して 保 存 の 場 合 は 下 の 様 な 名 前 を 付 けて 保 存 のパネルが 開 き ますが 次 回 からはメニューの[ファイル]-[ 保 存 ]を 押 すだ けで 保 存 する 事 が 可 能 です 6
7