Ornamenterは、SNSにアップする動画を飾り付ける為のアニメーションWebPを作成するアプリです。

Ornamenterでは、作成したアニメーションWebPと画像（写真や動画）を合成して、アニメーション動画を作成する事が出来ます。

最終的に出力出来る動画は、主にSNSにアップすることを目的としています。その為、作成出来るアニメーションWebPもSNSにアップロード出来る動画のサイズ（アスペクト比）を前提にしています。また、作成出来るアニメーションの長さも短めですが、アニメーションWebPの作り方次第でループ再生時に途切れなく再生出来る様な仕組みを設けています。

1.全体像

Ornamenterは、写真や動画に重ねるアニメーション素材を作り、それを動画として書き出すための編集アプリです。基本の考え方は ストーリーボード → シーン → アートワーク の3段構造です。

全体の流れ

1-1. 作成（編集）の流れ

ストーリーボード
アイテム（画像/シェイプ等）に動きを与えます（軌道パス、回転、サイズ、透明度など）。
シーン
複数のストーリーボードを重ね合わせ、「どれをいつ動かすか（タイミング）」と「前後関係（重ね順）」を決めて、1つの場面を作ります。
アートワーク
複数のシーンをまとめて1つの作品にします。作品のアスペクト比や全体の構成（シーンの並び）もここで整理します。

1-2. 出力（書き出し）の流れ

出力は2段階です。まずアートワークからアニメーションWebPを生成し、次にそのWebPを外部の写真/動画と合成して動画を作成します。

アートワーク → アニメーションWebP
透過付きのアニメ素材を作ります。
アニメーションWebP ＋写真/動画 → 動画
外部から選択した写真/動画の上に重ねて合成し、動画として書き出します。
(注意：動画と合成する際は、動画の音声は消去されて合成されます）

動きの調整はストーリーボード、重ね順とタイミングはシーン、 作品としてのまとまりと出力はアートワーク、という切り分けで考えるとスムーズです。

2.クイックスタート

一番簡単なのは、サンプルを選んで複製してから出力する方法です。ここでは「最短ルート」と「新規作成ルート」をまとめます。

2-1. 最短ルート：サンプルから選んで複製

先ずは、アプリで用意してあるサンプルデータから複製をしてアニメーションWebPや動画を作成する方法が一番簡単です。

ホームで「新規作成」をタップして「アートワークの新規作成」画面を開きます。
「サンプルを選択して複製」を選ぶとサンプル一覧が表示されます。選択したアートワークをダブルタップするとプレビュー画面が開くので動作を確認出来ます。画面右上の「✓確定」をタップするとサンプルの複製を開始します。
サンプルの複製時にアートワーク名の修正が出来ます。再生時間や透明度、シートサイズは、後からアートワーク編集画面で変更出来ます。
アートワークの編集画面の右上にある「WebP」アイコンをタップするとアニメーションWebPの生成画面へ移動します。
アニメーションWebP画面では、まず「Webp生成」アイコンをタップしてアニメーションWebPを生成を開始します。
アニメーションWebPの生成の際には、再生時間と出力サイズを設定出来ます。再生時間は秒を整数値で入力出来ます。
アニメーションWebPの生成が完了したら、画面右上の「動画」アイコンがタップ出来る様になります。アニメーションWebPと画像（写真や動画）を合成する為には、「動画」画面へ移動します。
動画画面では、「写真選択」又は「動画選択」をタップします。
合成したい画像（写真又は動画）を選択します。
（注意：動画を選択した場合、合成した動画には元の動画の音声は含まれません）
動画の再生時間を指定して動画の生成を開始します。繰り返し途切れなくループ出来るアニメーションWebPの場合は、「アニメーションの後半部分のみ使用」と言う表示がされます。これを✓するとアニメーションWebPの後半部分をループさせながら動画合成が行われます。
動画が生成出来たら共有アイコンをタップします。
アニメーションを合成した動画をSNSに投稿したり、「ビデオを保存」を選択して保存したり出来ます。

2-2. 新規作成ルート：“十字”アニメで確認

新規作成では、初期状態として十字のアイテムが移動するアートワークが入っています。まずはこの状態で出力まで通して、流れを掴みます。

新規作成でアートワークを作成（比率などは一旦デフォルトでOK）。

アートワークの新規作成画面で「新規作成」を選択して「✓確定」をタップします。
アートワーク名や再生時間、透明度、シートサイズを設定して「作成」をタップします。
初期データとして十字のアイテムが動くデータがアートワークの編集画面に表示されます。
アニメーションWebPや動画の作成方法は、2-1 の項目4以降と手順は同じです。

3. アートワーク

アートワークは、複数のシーンで構成されます。アニメーションWebPは、アートワークを元に生成されます。

アートワークで編集出来る内容は、プロパティ、シーン・タイムライン、シーン・レイヤーです。アートワークの設定ファイルは、拡張子.ornとして共有機能により外部出力が可能です。

3-1. プロパティ

アートワークのプロパティでは、アートワーク名、再生時間、透明度、シート比率を設定出来ます。

アートワーク名
アートワークの名前を入力します。重複した名称でも入力は可能ですが、出来るだけ他のアートワークと区別が出来る様に名称を付けた方が良いです。既存の作成済みのアートワークを複製する機能のあるので、その際にアートワーク名で区別がつく方が判別しやすいです。
再生時間
再生時間は、最小で5秒、最大で30秒まで指定が可能です。推奨は、10秒から16秒程度の値です。WebPファイルはPNGファイルとは違い圧縮機能がありますが、Ornamenterでは画質優先にしているので圧縮率は高くありません。あまり大きな再生時間を設定すると生成されるファイルサイズが途方もまく巨大になります。
透明度
基本的に、透明度はストーリーボードでアイテム単位で設定出来ます。最終的に全体的な透明度を変更したい場合にこの設定で調整します。但し、アートワーク全体に透明度を設定するとアニメーションWebPの生成速度は遅くなり、生成されるファイルサイズも大きくなりがちです。
シート比率
アートワーク自体では、シートサイズを直接設定はしません。シートサイズは、アニメｰションWebPを生成する際に指定します。デザイン完了後(ストーリーボード生成後)に頻繁にシート比率の変更を行うとアイテムの軌道パスが乱れたり、アイテムサイズのアスペクト比が乱れる可能性があるので気を付けて下さい。

3-2. シーン・タイムライン

ツールバーの「タイムライン」アイコンをタップすると「シーン・タイムライン編集」画面が表示されます。「シーン・タイムラインの設定」画面では、各シーンを再生するタイミングの設定を行います。また、シーンをドラッグ＆ドロップしてレイヤーの順位を変更する事も可能です。

シーンの再生時間と再生タイミング
シーン自体の再生時間は各シーンのプロパティで設定されますが、タイムラインではアートワークの再生時間内においてどの様なタイミングでどのくらい再生するかを開始時間と終了時間の入力により設定します。従って、シーン自体で設定されている再生時間より短く設定する事も可能です。但し、長めに設定する事は出来ません、一度再生した後に継続してループ再生する指定も可能です。
レイヤー順位の変更
シーンをドラッグ＆ドロップする事よりレイヤーの順位を変更出来ます。リストの上位の位置にあるシーンほど前面に表示されます。レイヤーは、シーン・レイヤーでも修正可能です。
オーバーレイ
すべてのシーンを同時に再生させる場合はシーンを１つずつ設定するよりも、設定画面の下部にある「オーバーレイ」をタップすると簡単に設定出来ます。このコマンドを実行すると、全てのシーンが開始時間０秒から再生されます。各シーンの再生終了後にループ再生させる指示も一括で行えます。
オーバーラップ
オーバーラップを実行すると「アートワークの再生時間の半分をシーン数で割った時間」だけ、それぞれのシーンの開始をずらして再生させます。例えば、アートワークの再生時間が16秒で4つのシーンがある場合、最下層のレイヤーのシーンから順に、0秒、2秒、4秒、6秒とずれて各シーンの再生が開始される設定になります。
条件付きですが、「全てのシーンの再生時間がアートワークの再生時間の半分」であり、「ループ再生する」設定になっていれば、アニメーションWebPの後半半分は、切れ目無くループ再生する事が可能になります。

3-3. シーン・レイヤー

シーン・レイヤーには、シーンの一覧が表示されます。シーンを選択した状態でもう一度タップするとシーンの編集画面に移動出来ます。

シーン追加
シーンを新規に追加する場合は、シーン・レイヤー下部にあるツールバーの＋アイコンをタップします。追加方法は、「新規追加」、「サンプルから複製」、「既存から複製」の3つあります。新規追加を選択すると「十字アイテムのシーン」が1つ追加されます。「サンプルから複製」を選択すると、サンプルアートワークのシーンから1つ選択して複製されます。「既存から複製」を選択すると、自身が今まで作成したワートワークのシーンから1つ選択して複製を行います。
シーン複製
同一アートワーク内のシーンを複製する場合は、コピー対象となるシーンを選択した状態でサブメニューを開き、「シーン複製」を実行します。
シーン削除
シーンを削除する場合は、先ず削除対象のシーンを選択します。その次にサブメニューから「シーン削除」をタップするか、ツールバーの「ー」アイコンをタップします。確認メッセージが表示され、「はい」を選択してから削除が実行されます。
レイヤー順位変更
最下部にあるツールバーをタップする事で、現在選択中のシーンのレイヤー順位を最前面、上、下、最後尾に移動させる事ができます。シーンを直接ドラッグ＆ドロップしてレイヤーの順位を入れ替えることも可能です。
シーン表示／非表示切替
シーンの左上の目のアイコンをタップすると表示／非表示を切り替える事が出来ます。一時的にシーンを表示させたくない場合に利用出来ます。
シーンの編集画面への移動
選択中のシーンをもう一度タップするか、サブメニューを表示してシーン編集を実行するとシーンの編集画面へ移動出来ます。

3-4. プレビューとサムネイル

アートワーク画面の上部自体が、ワートワークのプレビューを表示していますが、iPhoneでアプリを起動している場合は、画面が非常に小さいので別途、全画面でプレビュー表示出来る様に、上部ツールバーには「プレビュー」アイコンを用意してあります。

背景色
「パレット」アイコンをタップするとプレビュー時の背景色を設定出来ます。この背景色は、アニメーションWebPには出力されません。作品の透明度等を確認しやすい色を指定して下さい。
サムネイル
「カメラ」アイコンをタップするとアートワークのスナップショットを作成出来ます。サムネイルを作成しておかないとアートワークの一覧表示時に何も表示されない状態になるので、アートワーク修正時には小まめに「カメラ」アイコンをタップしてサムネイルを作成して下さい。背景色を設定しただけではサムネイルは生成されないので背景色を変更した時もサムネイルを更新することをお勧めします。サムネイルを作成する際は、カメラアイコンの左側にあるスライダーを手動で移動させてベストショットで撮影して下さい。

4. シーン

シーンは、アートワークの構成要素であり、複数のストーリーボードを内包します。シーンで編集出来る内容は、プロパティ、ストーリーボード・タイムライン、ストーリーボード・レイヤーです。

4-1. プロパティ

シーンのプロパティでは、シーン名と再生時間を設定出来ます。

シーン名
シーンの名前を入力します。重複した名称でも入力は可能ですが、出来るだけ他のシーンと区別が出来る様に名称を付けた方が良いです。既存の作成済みのシーンを複製する機能のあるので、その際にシーン名で区別がつく方が判別しやすいです。
再生時間
再生時間は、最小で5秒、最大で30秒まで指定が可能です。アートワークよりも大きい値を設定することも出来ますが、アートワークにおける再生ではアートワークの再生時間よりも長く再生することは出来ません。新規作成時は、ワートワークの再生時間の半分の値が初期値として設定されます。

4-2. ストーリーボード・タイムライン

上部ツールバーの「タイムライン」アイコンをタップすると「ストーリーボード・タイムライン編集」画面が表示されます。「ストーリーボード・タイムラインの設定」画面では、各ストーリーボードを再生するタイミングの設定を行います。また、ストーリーボードをドラッグ＆ドロップしてレイヤーの順位を変更する事も可能です。

ストーリーボードの再生時間と再生タイミング
タイムラインではシーンの再生時間内においてどの様なタイミングでどのくらい再生するかを開始時間と終了時間の入力により設定します。再生時間と再生タイミングは、ストーリーボード自体の編集画面でも設定出来ます。アートワークやシーンの再生時間は1秒単位（整数値）で入力しますが、ストーリーボードの再生時間は少数点2桁（例えば6.75秒など）まで入力出来ます。
レイヤー順位の変更
ストーリーボードをドラッグ＆ドロップする事よりレイヤーの順位を変更出来ます。リストの上位の位置にあるストーリーボードほど前面に表示されます。レイヤーは、ストーリーボード・レイヤーでも修正可能です。
オーバーレイ
すべてのストーリーボードを同時に再生させる場合はストーリーボードの再生時間を１つずつ設定するよりも、設定画面の下部にある「オーバーレイ」をタップすると簡単に設定出来ます。このコマンドを実行すると、全てのストーリーボードが開始時間０秒から再生されます。再生時間もシーンの再生時間に統一されます。

4-3. ストーリーボード・レイヤー

ストーリーボード・レイヤーには、ストーリーボードの一覧が表示されます。ストーリーボードを選択した状態でもう一度タップするとストーリーボードの編集画面に移動出来ます。

ストーリーボード追加
ストーリーボードを新規に追加する場合は、ストーリーボード・レイヤー下部にあるツールバーの＋アイコンをタップします。追加方法は、「新規追加」、「サンプルから複製」、「既存から複製」の3つあります。新規追加を選択すると「十字アイテムのストーリーボード」が1つ追加されます。「サンプルから複製」を選択すると、サンプルアートワークのストーリーボードから1つ選択して複製されます。「既存から複製」を選択すると、自身が今まで作成したワートワークのストーリーボードから1つ選択して複製を行います。
ストーリーボード複製
同一シーン内のストーリーボードを複製する場合は、コピー対象となるストーリーボードを選択した状態でサブメニューを開き、「ストーリーボード複製」を実行します。
ストーリーボード削除
ストーリーボードを削除する場合は、先ず削除対象のストーリーボードを選択します。その次にサブメニューから「ストーリーボード削除」をタップするか、ツールバーの「ー」アイコンをタップします。確認メッセージが表示され、「はい」を選択してから削除が実行されます。
レイヤー順位変更
最下部にあるツールバーをタップする事で、現在選択中のストーリーボードのレイヤー順位を最前面、上、下、最後尾に移動させる事ができます。ストーリーボードを直接ドラッグ＆ドロップしてレイヤーの順位を入れ替えることも可能です。
ストーリーボードの編集画面の表示
選択中のストーリーボードをもう一度タップするか、サブメニューを表示してストーリーボード編集を実行するとストーリーボードの編集画面を表示出来ます。

5. ストーリーボード

ストーリーボードでは、表示するアイテムの編集やアイテムを移動させる際の軌道パスを編集します。

5.1 タイトルと再生時間

ストーリーボードのタイトルと再生時間を入力するには、「▼タイトルと再生時間」の部分をタップしてから入力します。

タイトル
ストーリーボードは、他のストーリーボードを複製出来るので、その際にタイトルで区別出来ると便利です。
再生時間
ストーリーボードの再生時間は少数点2桁（例えば6.75秒など）まで入力出来ます。

5.2 サイズと軌道パス

「サイズと軌道パス」をタップすると軌道パスの編集やアイテムのサイズ変更が出来る様になります。編集モードがオンになると「編集制御盤」が表示されます。編集制御盤で「軌道パス」か、「サイズ」を選択し、編集対象を決定します。

編集対象：軌道パス
編集対象が軌道パスの場合、アイテムが移動する軌道パスを構成するポイントを追加、削除、移動させることが出来ます。アイテムが移動しない場合は、ポイントは1つとなります。ポイントを無しにすることは出来ません。パスを構成するポイントは緑色で表示されます。ポイントをタップすると選択中の色（黄色）として表示されます。ポイントをダブルタップするとポイントを削除出来ます。軌道パス編集中は、ドラッグ操作でのアイテムのサイズ変更は出来ません。
編集対象：サイズ
編集対象がサイズの場合、アイテムのサイズを変更出来ます。サイズは、アイテムの編集画面内でも修正出来ますが、ここで修正した方が全体に対するサイズ感を把握しやすいです。サイズ編集中は、パスの修正は出来ません。

5.3 アイテム

アイテム本体は、効果と素材で構成されます。また、アイテムに対して、サイズ、透明度、回転、ぼかしなどの設定が可能です。

効果
効果には、「スチル」、「バースト」、「グリッド」、「スパイラル」、「アーチ」、「レーン」、「パースペクティブ」、「フレア」があります。
素材
素材は、シェイプ（星型、円型、涙型、ハート型、多角形）、アプリが内包しているイラスト、テキスト、外部ファイルから選択出来ます。自分で作成したＰＮＧファイルなどを読み込む場合は、外部ファイルを選択します。