はじめに

Studio

Studio はエディターです。あなたのマシンで動き（npx openfilm open）、ブラウザーで開きます。パネルは 5 つあります。素材、レイヤー、ビューアー、インスペクター、タイムラインです。

素材

プロジェクトのすべて。assets/ の中のフォルダーと、すべての映像ページです。ファイルは + ボタンかドロップで読み込みます。ファイルをタイムラインにドラッグすると使えます。ファイルの名前を変えたり移動したりすると、film.html も一緒に更新されます。

レイヤー

再生ヘッドの位置で画面に何があるかを、Figma や Photoshop と同じく一番上のレイヤーから並べます。ページのクリップは、それが描く要素に展開できます。行をクリックすると選択、目のアイコンで非表示、ロックすると動かせなくなり、上下にドラッグすると重なり順を変えられます。

ビューアー

再生中の映像です。画面の中の要素をクリックすると選択できます。ホバーすると何が選択されるかが見えます。ドラッグで移動、角を引いてサイズ変更。テキストをダブルクリックすると、その場で打ち直せます。

インスペクター

選択したものの属性です。

• ページの要素の場合：テキスト、位置、サイズ、回転、不透明度、タイポグラフィ、塗り。色をクリックするとカラーピッカーが開き、彩度、色相、不透明度、スポイト、最近使った色があります。
• クリップの場合：いつ始まるか、どれだけ続くか、元の素材のどこから始まるか、フェード、トランスフォーム。

変更はドラッグ中に画面に表示され、手を離すと保存されます。

タイムライン

トラックごとに 1 行です。一番上のトラックが一番手前に描かれます。クリップをドラッグして移動し、端をドラッグしてトリムします。端はカット位置と再生ヘッドにスナップします。はさみで分割、矢印で取り消しとやり直し。

あなたの編集とエージェントの編集

Studio はページを書き換えません。要素への変更は、そのクリップのオーバーライドとして film.html に保存されます。セレクターと、何を変えるかです。エージェントは同じ film.html を読むので、映像の作業をするときもあなたの編集を残します。そしてすべての変更をファイルの履歴で確認できます。