Frameflow
ユーザー自身のテキスト、画像、動画を元に、編集可能なスクロールストーリープロトタイプを作成できるように支援します。オープンソースのワークベンチは https://github.com/Karen0758/frameflow-scroll-story-workbench にあり、その docs/USER_GUIDE.md でコントロールについて説明されています。既存のユーザープロジェクトがある場合はそれを使用し、ソースメディアを保持してください。
プロジェクトの構築
- シーンの順序、各シーンのタイトル/本文、ビジュアルレイヤー、インタラクション、および各動画がどのシーンに属するかを特定します。実際の作業を妨げるギャップのみを解決し、期間やレイアウトには妥当なデフォルト値を提案します。
- 背景テクスチャ、被写体、シャドウ、テキストは、ソースアセットが許す限り、個別に編集可能な要素として保持します。グレースケールの透明な被写体は、カラーまたはテクスチャ上で乗算を使用できます。乗算を模倣するために被写体にターゲットカラーを焼き付けないでください。
- 各動画について、その長さ、フレームサイズ、モーションインターバル、および代表的な最初/中間/最後のフレームを検査します。意味のある動きを維持し、不要な静止フレームを避けるインターバルとフレームレートを選択します。すべてのフレームを1つのキャンバスサイズと自然な数値順のファイル名で抽出します。ワークベンチのブラウザ抽出機能を使用する場合、その制限は120フレームであり、動画の背景を保持することに注意してください。透明な人物が必要な場合は、別途カットアウトシーケンスを準備し、ブラウザ抽出機能がそれを行ったと主張しないでください。
- シーケンス全体を通して、頭、両足、靴先、シャドウを確認します。安定したグラウンドラインと視覚的なスケールを維持します。ソースにズームがある場合は、インポート前に修正します。CSSで伸ばしたり隠したりして、クリップされた特徴をカバーしないでください。ソースフレームに特徴が存在しない場合は、制限を説明し、許可を得て代替ソースフレームを探すか作成します。
- Frameflowで、シーンを作成/並べ替え、同じサイズのフレームとテクスチャをインポートし、タイトル/本文/カラー/トランジションを設定し、次に個別のトランジション、被写体、テキストのタイミングを設定します。デスクトップとモバイルのレイアウトを個別に調整します。前方および後方ナビゲーションをプレビューし、トランジションのコーナー、最初/最後のフレーム、テキストの読みやすさ、読み込み動作を検査します。
.frameflowバンドルを編集可能なハンドオフとしてエクスポートし、保存先をユーザーに伝えます。ワークベンチのデータはそれ以外はこのブラウザのlocalStorage/IndexedDBに残ります。ワークベンチのプレビューまたはビルドが成功したことは、完成したWebサイトがエクスポートまたはデプロイされたことを意味するものではありません。
コードや公開が要求された場合
現在のワークベンチは編集可能なバンドルをエクスポートするものであり、スタンドアロンの公開ストーリーWebサイトではありません。サイトを公開するには、対象のWebプロジェクトで対応するランタイムを実装し、所有またはライセンスされたフォントとメディアを提供し、デスクトップ/モバイルサイズおよびデプロイされたURLでブラウザの動作を確認してください。リポジトリやホスティングサービスへの公開にはユーザーの承認が必要です。デフォルトでユーザーの動画やフレーム画像をアップロードしないでください。