このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第76回

iPhoneでも動くアニメが作れるSencha Animatorの使い方

2011年11月14日 11時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

グラデーション背景の設定

 タイトル画面の背景をグラデーションにします。Sencha Animatorではステージの背景色(単色)を設定できますが、グラデーションにはできません。そこで、四角形を作成して、塗り色にグラデーションを設定します。

 四角形ツールを選択してステージ上でクリックします。

【図】fig9.png
ステージ上に四角形を作成する

 四角形はこれまでのように適当に配置しても構いませんが、今回はステージにぴったり配置したいので、座標を正確に指定します。画面右側のプロパティパネルにあるDimensionsの文字をクリックすると、以下のように図形の位置やサイズが表示されます。

【図】fig10.psd
Dimensionsの文字をクリックすると展開される。すでに展開表示されている場合にクリックすると折りたたまれる

 ここで、X,YとW, Hに座標と幅を入力すると正確な位置とサイズになります。

【図】fig11.psd
X,Y,W,Hの値を設定

 四角形が配置できたのでグラデーションを設定します。プロパティパネルのBackgroundの文字をクリックして展開します。

【図】fig12.psd
Backgroundの文字をクリックすると展開される。すでに展開表示されている場合にクリックすると折りたたまれる

 Backgroundのカテゴリ内にある「Gradient:」がグラデーションの設定部分です。カラーランプ(最初の状態では白黒のバー)の下にある■がカラー設定用のボタンになっています。クリックするとカラーピッカーが表示され、カラーピッカー内をクリックするとリアルタイムにグラデーションが変化します。

【図】fig13.png
グラデーションを設定する

 同様に、グラデーションの終了色も設定します。

【図】fig14.png
終了色を設定する

 新たにグラデーションポイント(位置)を追加したい場合には、カラーランプの下にあるどちらかの■をドラッグします。

【図】fig15.png
左右どちらかの■をドラッグするとカラーポイントを追加できる

 これでグラデーションの背景が設定できました。このまま再生すると前に作成した文字が背景に隠れてしまい表示されませんので、タイムラインで重なり順を変更します。グラデーションを設定した四角形は「New Square」という名前で作成されています(ダブルクリックすると名称を変更できます)。このオブジェクトをドラッグ&ドロップで一番下に移動させます。

【図】fig16.png
重なり順が悪いため背景の下に文字が表示され見えなくなっている。タイムラインでNew Square(背景)をドラッグして一番下に移動する
【図】fig17.png
重なり順が変更されグラデーション背景の上に文字が表示されるようになった

ライブラリへの登録

 作成したグラデーションの背景(四角形)は、説明文のテロップでも利用します。Sencha Animatorには図形を再利用できるライブラリ機能がありますので、先ほどの四角形を登録しておきましょう。

 ライブラリへの登録は、あらかじめ作成した図形をクリックして選択した状態で、画面右側のライブラリ(Library)タブをクリックします。

【図】fig18.psd
Libraryタブをクリック

 ライブラリパネルの左下にある「+」ボタンをクリックすると、選択した図形がライブラリに登録されます。

【図】fig19.psd
ライブラリに図形が登録される

ライブラリへの登録は図形の形状や色だけ

 ライブラリに登録できるのは図形の形状や色だけで、アニメーション(動き)は登録できません。アニメーションも含む状態で再利用したい場合は、既存のオブジェクトをコピー&ペーストする必要があります。

 また、アップルの「Motion」のようにアニメーションを手軽に処理できるプリセット(ビヘイビアやライブラリ)はありませんので、動きをコツコツと手動で設定する必要があります。このあたりは今後の改良に期待したいところです。

【図】fig20.png
「Motion 5」。ビヘイビアをテキストにドラッグ&ドロップするだけで手軽に複雑なアニメーションを設定できる
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く