OpenGraphs とは
ブラウザだけで動く、キー可能モーション・グラフィックス編集ツール。コンポジション・タイムライン・25 種類以上のエフェクト・3D シーン・カメラトラッキングまで備えています。
クイックスタート (5 分)
- アプリ (
app.kobajin.com) を開くと、デフォルトの "Main" コンポジションが表示されます。 - 左サイドバーでレイヤーを追加 (Add Layer)、またはデフォルトの "Objects Layer" を選んで上部のツールバーからオブジェクトを追加します。
- プレビューを見ながらトランスフォーム (位置・スケール・回転) をプロパティパネルで調整。Space で再生/Shift+ クリックでタイムライン上の任意フレームへジャンプ。
- 左下の Add Effect からエフェクトを追加、または Add 3D Primitive で 3D オブジェクトを配置。
- 満足したら右上の Export MP4 で書き出し。プロジェクトを保存 (Save Project) すると
.opengraphsファイルが手元に残ります。
迷ったら
上部ツールバーの Load Demo を押すと "Web Demo" が読み込まれ、青と赤のシェイプ・背景の 3 レイヤー構成を確認できます。エフェクトやタイムライン操作の練習台にどうぞ。
画面構成
トップツールバー (中央上)
プロジェクト管理 (新規 / 保存 / 開く)、Undo / Redo、エクスポート、デモ読込、コンソール、カメラトラッカー、Render Queue、Smart Preview、テーマ切替など。
左サイドバー (1 段目)
レイヤー一覧。レイヤーの追加・削除・複製、表示 / 非表示の切替、親子関係を行います。
左サイドバー (2 段目) — オブジェクトツールバー
現在選択中のレイヤーへ追加できるオブジェクトのボタン群。Image, Video, Audio, Text, 2D Shape, Shader, Group, Adjustment, Cloner, 3D Primitive, 3D Light, 3D Camera (Composition 単位)。
中央 — プレビュー
コンポジションの最終結果。スクラブ・再生は下部のタイムラインから。
右下 — プロパティパネル
4 つのタブ: Properties (Transform / Layer / Masks), Effects, Expressions, Presets。
下部 — タイムライン
左にシーン (レイヤー)、右にキーフレームと現在時刻。
コンポジションとは
OpenGraphs のプロジェクトは、1 つ以上の コンポジション (composition) から成ります。コンポジションは「映像 1 本分の入れ物」で、解像度・尺・背景色・レイヤーのリストを持ちます。
ツールバー左上のドロップダウンでコンポジションを切替え、隣のボタンで新規作成 / 削除できます。コンポジションを入れ子にしたり、他のオブジェクトから参照したりすることも可能です。