Sencha Animatorはプロのコンテンツ制作者向けのアニメーション制作ツールです。Sencha Animatorを使えばモバイル端末に搭載されているブラウザ向けに、特別なプラグインなしで動くリッチなアニメーションの制作が可能となります。Sencha Animatorではマウスの操作だけで、簡単にそして迅速にWebアニメーションを生成できます。このツールではCSS3技術を使っていて、この技術を使って生成されたアニメーションは、Apple社のiPhone、iPad、iPod TouchのようなiOS端末上で極めてスムーズに動作します。
１. オブジェクトツールバー
オブジェクトツールバー上のアイコンをクリックすると、アニメーション用のオブジェクトが新しく追加されます。ここで選択されたオブジェクトは現在のオブジェクトツリー（後述）の一番上に追加されます。追加したオブジェクトのプロパティはプロパティインスペクター（後述）を使って編集することができ、オブジェクトの並び順や親子関係についてはオブジェクトツリー内で変更できます。
２. オブジェクトツリー
オブジェクトツールバーでクリックしたオブジェクトはこのオブジェクトツリーの一番上に追加されます。このオブジェクトツリーに追加されたオブジェクトに対してのみ編集作業が可能となります。
- マウスでドラッグドロップすることでオブジェクトのツリー内での並び順を変更できます。
- オブジェクトは他のオブジェクトの上にドラッグドロップすることで親子関係（ドロップされたオブジェクトの中にドラッグしていったオブジェクトを配置）にすることができます。
- 逆に子オブジェクトを現在の場所からオブジェクトツリーの一番上にドラッグドロップすることで親子関係を解消することも可能です。
- 親子関係にあるオブジェクトは、すぐ横に表示される三角形のアイコンをクリックして閉じたり開いたりもできます。
オブジェクトツリーのツールバー部分に表示される「破線」アイコンは、各オブジェクトが移動する導線の表示をオン・オフします（アニメーション設定後）。ツールバー上のアイコンをクリックすると全てのオブジェクトの導線が、そして各オブジェクト毎に表示されるアイコン（マウスオーバーで表示）のクリックでそれぞれの導線がオン・オフされます。
「目」のアイコンはステージ（後述）上のオブジェクト表示をオン・オフします。親オブジェクトを非表示にすると、その子オブジェクトも全て非表示になります。
大切なポイント：親オブジェクトのプロパティやアニメーション設定を編集すると、その結果の多くはは子オブジェクトに継承されます。アニメーションを作る際にはこのCSSの性質に注意してください。アニメーションが想定外の挙動をする場合、その原因のほとんどは親子孫関係にあるオブジェクト間での間違ったプロパティ継承にあります。
キーボードショートカット
オブジェクトツリー内での移動や操作にはキーボードショートカットも用意されています。
- "A" ：現在選択されているオブジェクトの一つ上のオブエジェクトに移動・選択します。
- "Z" ：現在選択されているオブジェクトの一つ下のオブエジェクトに移動・選択します。
- "X" ：オブジェクトと（最初の）キーフレーム間を移動します
オブジェクトのコピー
オブジェクトを選択した状態で、アプリケーションメニュー（画面上部）の「Edit」から「Duplicate Object」を選択することで、オブジェクトのコピーができます。この操作を行うと、選択したオブジェクトの完全なコピーがステージ上の同じ場所に生成され、オブジェクトツリー内ではコピー元オブジェクトのすぐ下に新しいオブジェクトが現れます。
３. フレームビュー
新しく作ったプロジェクトではフレームビューは当初何も表示されていません。キーフレームをプロジェクトに追加するには、対象となるオブジェクトが配置されている行のどこでもいいのでダブルクリックしてください。最初のキーフレームのペアを設定したら、そこから色々なアクションの設定を始められます：
- キーフレームのペアどこかをクリックしてドラッグするだけでタイムライン全体を左右に移動できます。
- タイムラインの中でも外側でも、ダブルクリックすることでキーフレームを追加することができます。
- 個々のキーフレームはクリックした後に"delete"または"backspace"キーを押すことで削除できます。
- 個々のキーフレームの移動については、クリックした後にマウスで左右にドラッグするだけです。
タイムラインの上に表示される黒い「針」のアイコンをマウスで移動することで、特定のタイミングでのアニメーションの状態を表示させることができます。
4. プロパティインスペクタ
プロパティインスペクタには基本的な2つのモードがあります：オブジェクト選択モードとキーフレーム選択モードです。それぞれのモードは現在選択されている対象（キーフレームまたはオブジェクト）で自動的に切り替わります（ただしキーフレーム全体を選択した場合は、その対象オブジェクトを選択したことになります）。
- プロジェクトプロパティ（Project Properties）
このパネルではステージの背景色、枠線の色、そしてステージのサイズが変更できます。ここで設定した値については、出力されたファイルの「stage」オブジェクトを直接編集することで上書きすることも可能です。Sencha Animatorはbodyタグのスタイルは設定しませんので、ブラウザのデフォルト設定を変更したい場合は、出力されたファイルを直接編集してください。
- オブジェクトプロパティ（Object Properties）
オブジェクトツリーに追加されたオブジェクトのプロパティはここで設定できます。"Text/HTML"には任意のHTMLを入力することができますが、スタイル情報についてはここに入力しないように注意してください。カスタムのスタイル情報の入力には後述の"Custom CSS"フィールドを利用してください。
オブジェクトにはCSS IDをオプションで付加できます。IDを指定することで、出力されたコードの中でオブジェクトを特定しやすくなるため（デフォルトでは自動採番されたIDが付与）、JavaScript等で処理を追加する場合や、後で直接コード編集する場合に便利です。
Click Actionはどのオブジェクトにも設定可能です。設定可能なアクションは「リンク（Link）」と「再生（PlayとRestart）」の2種類です。
- リンク: Linkを設定すると、オブジェクトをクリックした際に指定したURLが表示されます（別Window、または同一Windowを指定）
- 再生：PlayまたはRestartを設定すると、オブジェクトをクリックした際にアニメーションを再生します
繰り返し（Iterations）：デフォルトの設定ではアニメーションの再生回数は1回です。ここで回数を設定すると、設定した回数だけこのオブジェクトのアニメーションが繰り返し再生されます。 "Alternate Direction"を選択すると1回おきにアニメーションが逆再生されます。
大切なポイント：すべてのオブジェクト（Square、Circle、Text等）はHTMLのDIVタグです。DIVタグはそもそもページコンテンツの一部分（DIVision）を表すためのタグです。四角（Square）や丸（Circle）等の形状はDIVタグに様々なスタイルを設定することで生成しています。
キーフレーム選択モード
- キーフレームプロパティ（KeyFrame Properties）
ここのキーフレームを選択すると、キーフレームパネルが表示されます。キーフレームの正確なタイミングをここで入力しUpdateボタンを押すことで、タイミングが更新されます。他のプロパティと異なり、Updateボタンを押さないと値が設定・更新されないことに注意してください。値を入力しただけでは、キーフレームの位置は変更されません。
キーフレーム/オブジェクト選択モード（共通）
以下のパネルはどちらのモードにおいても利用可能です。
- アニメーションプロパティ（Animation Properties）
このパネルでは個々のキーフレームの位置、透明度、スケール、等を設定できます。これらのプロパティはオブジェクトに対して設定することも可能ですが、混乱を避けるためにも位置以外についてはオブジェクトではなく最初のキーフレームに設定することを推奨します。
位置（Position）：キーフレームが移動するX、Y、Z座標（単位はピクセル、Dimensionで設定したオブジェクトの最初の位置からの相対位置）です。 Z座標については、3D CSSアニメーションの設定を追加しない限り有効になりません。2Dのアニメーションでは無視されます。注意：Z座標はオブジェクトのz-indexと同じものではありません。オブジェクトのz-indexはオブジェクトツリー内でのオブジェクトの位置によって決定されます。
スケール（Scale）：この値はベースとなるオブジェクトのサイズに対して変化させるキーフレームのスケールを設定します。スケールの変化は起点（Origin）に相対的に行われます（Positionと同様にZ値は3D CSSアニメーションの設定を追加していない場合、無視されます。
回転（Rotate）：この値はベースとなるオブジェクトの位置に相対的にオブジェクトを回転させます。2Dアニメーションでは、多くの場合Z軸に対して回転を設定することになります。回転は起点（Origin）に相対的に行われます。デフォルトの起点はオブジェクトの中心に設定されています。
歪み（Skew）：この設定はオブジェクトをXおよびY軸に沿って変形させます。Skewはオブジェクトを回転させるのではなく、単純に元の平面上でオブジェクトを変形させるだけです。変形は起点（Origin）に相対的に行われます。デフォルトの起点はオブジェクトの中心に設定されています。
大切なポイント：親オブジェクトを歪み、回転、スケールさせた際には、内包されている子オブジェクトの座標も同じく歪み、回転、スケールしています。この結果として予想外の挙動が発生する場合があります。例えば、子オブジェクトを右に10ピクセル移動するアニメーションを設定した後に、親オブジェクトを1.5倍にスケールさせる設定を行ったとします。この結果、子オブジェクトの座標も1.5倍に拡大されてしまっているため、右への移動は15ピクセルとなってしまいます。こういった理由から、スケールの設定は親オブジェクトではなく、一番低いレベルのオブジェクトに設定することを推奨します。
起点（Origin）：この設定はスケール、回転、歪みの起点となる値です。この値にはマイナス値からプラス値まで任意の数字を設定可能です。値はオブジェクトのサイズに対するパーセントで（デフォルト値は中心を表す50,50）、例えばオブジェクトの左上を起点にしたい場合は0,0と設定します。
実際の使い方
起点（Origin）の設定はキーフレームではなく、ベースとなるオブジェクトに対して行う方が効率的かもしれません。ただし、起点は個々のキーフレームに対してももちろん設定可能なので、例えばフレーム毎に異なる起点で回転させることも可能です。もし想定と違う回転をする場合、個々のキーフレームの起点設定が正しいか確認してください。
イージング（Easing）：イージング関数はアニメーションの各部分における実行速度を設定します。
- イージングを指定しない場合、デフォルトのアニメーションは、ゆっくり始まり、スピードアップして、終わりに向けてゆっくりとなります。これはease-in/ease-outのイージング関数を指定したのと同じものです。
- Ease-In: アニメーションはゆっくり始まり、その後スピードアップします。
- Ease-Out: アニメーションは終わりにかけてゆっくりとなります。
- Linear: アニメーションは最初から最後まで一定速度で実行されます。
イージング関数はキーフレーム単位で指定可能です。設定されたイージング関数は、設定されたキーフレームに続くセグメントに対して適用されます。イージング関数をオブジェクトに対して設定した場合、全てのキーフレームに対して適用されることになります。
- サイズ、位置、オーバーフロー（Dimension, Positions & Flow）
サイズおよび位置はオブジェクトかキーフレームのいずれかに設定されます。オブジェクトの位置はステージに対してrelative、または親オブジェクトがある場合は、親オブジェクトに対してrelativeとなります。
実際の使い方
画像オブジェクトのサイズはここでは設定できません。画像オブジェクトのサイズを変化させたい場合は、AnimationのScaleを設定してください（この挙動については変更されるかもしれません）。
オーバーフロー（Overflow）：オブジェクト内のコンテンツがオブジェクトの領域外に移動した場合（アニメーションの最中など）に表示するかどうかを指定できます。Visible（表示）とHidden（隠す）については文字通りの意味です。Scroll（スクロール）と設定した場合スクロールバーが付加され、Auto（自動）が設定された場合にスクロールバーが付加されますが、コンテンツが領域外に溢れた場合に限ります。
反射（Reflections）：オブジェクトとその全ての子オブジェクトの反射を表示します。反射のアルファグラデーションについては自動的に設定されます。反射はオブジェクトの「外」と認識され、オブジェクトが隠された場合、反射も同じく隠されます（訳者注：0.9βでは、このフィールドは背景（Background)パネルに移動しています。）
- 枠線（Borders）
枠線パネルではオブジェクトの枠線の幅や色等のスタイルを設定できます。一部の枠線スタイル（例：double）はwidthの値が特定の閾値を超えないと適用されません（報告されているWebKitのバグとして、widthを3以上に設定しないとdottedが適用されない、とったものがあります）。
- 背景（Background）
背景パネルではオブジェクトの背景画像または色を設定できます。ColorフィールドにはCSSの色指定フォーマットを直接入力可能です（主要な色（greyやblackなど）、16進数、RGB、RGBA、そしてHSL値）。また、グラデーション値についてもここで設定可能なのですが、グラデーションの設定はカスタムスタイルパネル（後述）で設定することを推奨します。背景画像は連続的には変化しません（グラデーションについても画像と同じ扱いとなるため連続的に変化しません）。
- タイプ（Type）
ここではオブジェクト内の文字列のスタイルを設定します。文字列のスタイルは1つのオブジェクトに対して1種類しか設定できませんが、これはHTMLに直接スタイルを埋めこむことで上書き可能です。ステージでのプレビューは現在Text Stroke（袋文字）とText Shadow（文字の影）をサポートしていますが、両方同時に設定した場合正しく表示できません（出力結果についてはChrome、Safari、そしてAndroid、iOS上のブラウザでは正しく表示されます）。ここで設定できるプロパティについてはキーフレーム毎に設定可能です。ただし、フォントサイズを変化させたい場合は、Font Sizeを変更させるのではなく、AnimationのScaleの値を設定する方を推奨します。
実際の使い方
フォントサイズを変化させる場合、文字列が最大となる場合のサイズをオブジェクトのFont Sizeに設定してください。ほとんどのブラウザのフォントはベクターとしてではなくビットマップとして処理されるため、サイズを小さく設定しておいて大きく変化させると、ギザギザ表示されてしまいます。
- カスタムスタイル（Custom CSS）
Custom CSSフィールドを使って、その他多くのCSSプロパティやエフェクトをキーフレームおよびオブジェクトに対して設定することができます
- リニアグラデーションおよびラジアルグラデーション
- イメージマスク
- 文字間のスペーシング
- 異なる枠線半径の指定、枠線用画像やグラデーション
今後リリースするAnimatorでは、こういったエフェクトについてもサポートしていく予定です。
オブジェクト選択モード
オブジェクトが選択されている場合、次の2つのパネルが利用可能です。
５. ステージ
ステージでは作成中のアニメーションの再生ができます。ステージにもいくつかのコントロールが用意されています。ツールバー一番左のオーバーフローアイコンは、ステージの外に移動するオブジェクトを表示するかどうかを設定します。中央には、アニメーションの先頭に戻るボタン、再生ボタン、アニメーション最後尾に移動するボタン、繰り返し再生ボタンがあります。[一番右のズームコントールはフレームビューのズームをコントールするものでありステージとは関係ありません] ステージのズーム操作はできません。
ステージでのドラッグドロップ：オブジェクトツリーにおいてオブジェクトまたはキーフレームが選択されている場合、そのオブジェク（および子オブジェクト）をステージ内でドラッグすることができます。ただし、逆にステージ内においてオブジェクトを選択することはできないことに注意してください。アニメーションは通常多くのオブジェクトで構成されていて、またそれらのオブジェクトは相互に重なりあっていたり、透明度や表示状態が異なっていたりするため、仕様としてこのような設計となっています。また、オブジェクトをステージ内で移動した場合、設定されている遷移の設定（スケール、回転、等）によっては、マウスのカーソルと離れたところにオブジェクトが表示される場合がありますが、これは想定された挙動です。
アプリケーションメニューのコマンド
これまで説明してきたGUIコントロール以外に、その他の機能がアプリケーションメニューから利用可能です。
ファイル（File） -> エクスポート（Export）：プロジェクトを完全なHTMLページとして、あるいはCSSだけ、HTMLだけ出力します。この他にもアニメーション全体をJavaScriptコードとして出力するオプションがあります。このオプションはアニメーション全体を一個のJavaScriptファイルにまとめてくれるので、CSSオブジェクトの宣言やCSSアニメーションを個々に組み込む代わりに、ファイルを一つ読み込むだけで済みます。ただし、このオプションはCSSアニメーションをJavaScriptアニメーションに変換するものではないことに注意してください。アニメーションはあくまでもCSSベースのままです（訳者注：0.9ではこのJavaScriptオプションは搭載されていないようです）。
取り消し/やり直し（Undo/Redo）：「取り消し」と「やり直し」は最後にプロジェクトが保存された箇所まで可能です。
時間追加（Insert Time）：タイムラインの「針」の場所に指定した時間（秒）を追加します。
時間削除（Remove Time）：タイムラインの「針」の場所から指定した時間（秒）を削除します。削除する時間の中に存在するキーフレームは削除されます。