画像、動画、アイコン
フロー & ペイウォールビルダーのMediaカテゴリには、Image、Video、Iconの3種類のメディア要素があります。
画像や動画をノッチやホームインジケーターの背後も含めた画面全体に表示するには、すべてのオフセットを0にして固定配置し、Ignore safe areaを選択してください。詳細はレイアウトと配置を参照してください。
画像
.JPG、.PNG、または .WEBP ファイルを最大 20 MB までアップロードできます。
アニメーション GIF や WEBP はサポートされていません。動きを加えたい場合は、ビデオ要素を使用してください。
- Aspect — 画像をコンテナに合わせる方法を設定します：
- Fit — コンテナ内に収まるよう、画像をクロップせずにスケーリングします。
- Fill — コンテナ全体を埋めるよう、画像を引き伸ばします。
- Cover — コンテナ全体をカバーするよう画像をスケーリングし、必要に応じてクロップします。デフォルト。
- Use custom media ID — 以下のカスタムメディア ID を参照してください。
ビデオ
.MP4 または .WEBM ファイルをアップロードできます。ファイルサイズは最大50 MB、長さは最大30秒です。最小解像度は640x640ピクセルです。
- Aspect — Fit、Fill、またはCover。デフォルトはFillです。
- Loop — ビデオをループ再生します。デフォルトでオンです。
- Use custom media ID — 下記のカスタムメディアIDを参照してください。
ビデオはエディタのプレビューでは再生されません。キャンバスには静止フレームが表示されます。デバイス上での実行時、ビデオはデフォルトでミュートで再生されます。Loopがオンの場合、無限に繰り返されます。
動画終了時にアクションをトリガーする
メイン記事：アクション
Video 要素は、動画が末尾に達したときに発火する On playback finished トリガーをサポートしています。Interactions パネルで設定して、別の画面へ遷移したり、CTAを表示したり、その他のアクションを実行できます。
アイコン
バンドルされている Tabler Icons ライブラリから、2種類のビジュアルスタイルで数千のアイコンを選択できます：
- Stroke — アウトラインのみ。
- Filled — 塗りつぶし。
ピッカーでキーワード検索してアイコンを探せます。アイコンの色は Color ピッカーで設定します。保存済みのカラースタイルを選択するか、カスタムカラーを設定してください。
メディアのローカライズ
関連記事：ロケールを追加する
ImageおよびVideo要素は、ロケールごとに異なるファイルを持つことができます。対象のロケールを有効にし、要素を選択して、プロパティパネルでローカライズされたファイルをアップロードしてください。独自のファイルが設定されていないロケールには、デフォルトロケールのファイルが表示されます。
制限事項
以下の項目はローカライズできません：
- アイコン
- スクリーンまたはコンテナの Fill — これはスクリーンの背景と、Fill セクションから設定するコンテナ独自の背景画像や動画を指します。画像や動画をロケールごとに変えるには、スタンドアロンの Image または Video 要素として追加してください — それらは メディアのローカライズ で説明するように、ロケール固有のファイルに対応しています。
- カスタムメディア ID
カスタムメディアID
画像や動画の背景にもカスタムメディアIDを設定できます。
画像や動画の要素にカスタムメディアIDを付けておくと、アプリのコードから実行時に差し替えることができます。これを使えばパーソナライズされたビジュアル（例：ユーザーが選んだアバターを表示するなど）を実現できます。
フロー＆ペイウォールビルダーでアップロードしたメディアはフォールバックとして機能します。実行時にコードがそのIDに対してメディアを提供しなかった場合、フォールバックが表示されます。
画像または動画要素でカスタムメディアIDを有効にする方法：
- アップロードエリアの下にある Use custom media ID チェックボックスを選択します。
- メディア ID を入力します。
- フォールバック画像または動画をアップロードします。
アプリのコードでは、メディア ID を使ってメディアを取得します。SDK API の詳細については、アセットのカスタマイズ を参照してください。