Motion Builder Flash Light ─ インストール不要で始めるWebアニメーション制作ツール
「ホームページにアニメーションを付けたいけど、難しそう…」と思っていませんか？
Motion Builder Flash Light なら、プログラミングの知識がなくても、ドラッグ操作だけで本格的なアニメーションが作れます。
しかも完成したアニメーションは HTML・CSS・JavaScript のコードとして出力できるので、そのままホームページに組み込めます。
この記事では、Motion Builder Flash Light の基本的な使い方を、初めての方にもわかりやすく紹介します。
Motion Builder Flash Light は、昔懐かしい Flash や Dreamweaver のタイムライン機能 のように、画面上にオブジェクトを並べてキーフレームを設定するだけでアニメーションが作れるツールです。
最大の特徴は次の4つです。
- インストール不要 ─ HTMLファイルをブラウザで開くだけで、すぐに使い始められます
- コードをそのまま持ち帰れる ─ 完成したアニメーションはHTMLとCSSで出力されるので、ホームページへの組み込みが簡単です
- 部品として使える ─ ヒーロー画像・バナー・ボタンなど、サイトのパーツとして書き出せます
- CGIと連携できる ─ PerlやPython、PHPのCGIと組み合わせて、クリックで情報を送信するボタンも作れます
ツールを開くと、画面は大きく3つのエリアに分かれています。
- 中央：ステージ ─ ここに画像や文字を配置します。ドラッグで自由に動かせます
- 右側：プロパティパネル ─ 選択中のオブジェクトの位置・サイズ・色・アニメーションを細かく設定できます
- 下部：タイムライン ─ アニメーションの時間軸です。再生・停止もここから操作します
上部のツールバーには「画像を追加」「文字を追加」「保存」「読み込み」などのボタンが並んでいます。まずはこの3エリアの場所を覚えておけば十分です。
実際に手を動かしてみましょう。「WELCOME」という文字が弾みながら登場するアニメーションを5ステップで作ります。
ステップ1：文字レイヤーを追加する
画面上部の 「Text Layer追加」 ボタンをクリックします。ステージの中央に「TEXT」という文字が現れます。
ステップ2：文字の内容を変える
右側のパネルで 「Selected Layer」 を開き、Text欄に WELCOME と入力します。ステージ上の文字がリアルタイムで変わります。
ステップ3：文字を好きな場所に移動する
文字をドラッグして画面の中央あたりへ移動します。X・Y欄に数字を直接入力して位置を揃えることもできます。
ステップ4：Motion Preset でアニメーションを設定する
右パネルの 「Motion Preset」 を開き、一覧から Bounce In を選んで 「Preset適用」 をクリックします。これだけで、キーフレームが自動的に生成されます。
ステップ5：再生して確認する
タイムラインの左にある ▶ ボタン を押してみてください。文字がバウンドしながら登場するアニメーションが確認できます。
たったこれだけです。慣れれば本当に5分以内に完成します。
Motion Builder の核心機能が キーフレーム です。難しく聞こえますが、考え方はシンプルです。
「0秒のときはここにいて、2秒後にはあそこにいる」という2点を記録するだけで、その間の動きが自動で補完されます。
具体的な手順はこうです。
- タイムラインを 0秒 の位置に移動し、オブジェクトを左端に置いて「Key追加」をクリック
- タイムラインを 2秒 の位置に移動し、オブジェクトを右端に移動して「Key追加」をクリック
- ▶ 再生すると、2秒かけて左から右に滑らかに移動します
この「記録→記録→再生」の繰り返しで、どんな複雑な動きも作れます。
先ほど使った Bounce In をはじめ、Motion Builder には21種類のプリセットが用意されています。どれもワンクリックで適用できます。
- Fade In / Fade Out ─ じわっと現れる・消える定番の演出
- Slide Up / Down / Left / Right ─ 上下左右からスライドして登場
- Zoom In / Zoom Out ─ 拡大・縮小しながら登場・退場
- Bounce In ─ 弾みながら登場。見出しやボタンに向いています
- Floating ─ ふわふわと浮遊し続ける動き。ロゴや装飾に
- Neon Blink ─ ネオンサインのように点滅する演出
- Camera Shake ─ 画面が揺れる迫力のある演出
まずはいろいろ試して、気に入ったものを使えばOKです。
文字だけでなく、画像もまったく同じ方法でアニメーションさせられます。
対応形式は JPG・PNG・GIF・WEBP です。「画像Layer追加」ボタンからファイルを選択すると、ステージに配置されます。あとは文字のときと同じように、Presetを適用するだけです。
オブジェクトには視覚的なフィルターをかけることもできます。
- Blur（ぼかし）─ 背景のぼかし演出に
- Brightness（明るさ）─ 発光しているような演出に
- Grayscale（白黒）─ ホバー前はモノクロ、ホバーでカラーに、といった演出に
- Hue（色相）─ 同じ画像を色違いで使い回せます
これらはCSSの filter プロパティとして出力されるので、生成されたコードを見るとCSSの勉強にもなります。
Motion Builder で作ったオブジェクトには、クリック時の動作を設定できます。
- URL ─ クリックで別ページへ移動する通常のリンク
- GET送信 ─ クリックでCGIにGETパラメータを送信（例：
detail.py?id=1） - POST送信 ─ hiddenの変数を含めてPOSTで送信（例：
send.pyにuid=001を送る）
PerlやPython、PHPで作ったCGIと組み合わせることで、動きのあるフォームボタンやナビゲーションが作れます。
作ったアニメーションは3つの形式で書き出せます。
- 完成HTML ─ そのままブラウザで表示できる単独のHTMLファイル。動作確認や配布に便利です
- 部品のみ ─ 既存のページに貼り付けるためのコード。SDMやSESへの読み込みに使います
- SDM/SES用 ─ META情報付きの部品コード。部品管理ツールとの連携に最適です
書き出したコードの中にある @keyframes の記述を見ると、「ああ、こうやってCSSアニメーションは書くんだ」とわかります。ツールを使いながらCSSを学べるのも、このツールの隠れた魅力です。
作業途中のデータは JSONファイルとして保存 できます。「設定保存」で書き出し、次回「設定読込」で続きから編集できます。大切なプロジェクトは必ず保存しておきましょう。
Motion Builder は単体でも十分使えますが、以下のような流れで使うとさらに効果的です。
- Motion Builder でアニメーションパーツを作る
- SES（エフェクト追加ツール）でさらに演出を加える
- SDM（レイアウト構築ツール）でページ全体を組み立てる
- 完成サイトとして公開する
Motion Builder Flash Light は、「アニメーションを作りたいけど難しそう」というハードルをぐっと下げてくれるツールです。
まずは覚えることはたった4つだけです。
- レイヤーを追加する
- ドラッグで位置を決める
- キーフレームを追加する
- Presetを適用する
この4ステップを一度やってみると、あとは自然と使い方がわかってきます。まずは「文字を動かすだけ」から試してみてください。5分で最初のアニメーションが完成します。
マニュアルはこちら
マニアルはこちら
Instant manual
Follow me!
