Sencha Animatorの導入とツールの紹介

ついにCSS AnimationをFlashの様に作成することができる「Sencha Animator」というツールが出ました。
早速、Sencha Animatorを触って使い方をまとめてみました。

まずSencha Animatorで作られたサンプルがこちらにあります。
アニメーションは全てCSS3のみで書かれており、webkit系ブラウザやiPhone・iPad、一部のAndroidケータイでも動作を確認することが可能です。

Sencha Animatorをインストール

まずは「Sencha Animator」よりファイルをダウンロードしてきてインストールします。
Windows・Mac・Linuxの環境でSencha Animatorを使うことが可能です。
使用にあたり、アカウントが必要なのでこの段階でアカウントを作成しておくと楽でしょう。
アカウントの作成はこちらからできます。

Sencha Animatorを起動してみる

初回起動時にユーザー名・パスワードの入力を求められますので、先程のアカウント情報を入力します。以降はアカウント入力する必要がありません。

初回起動時に利用規約が出ますのでちゃちゃっと読んで同意(I agree)します。

まず起動時にSencha Animatorの使い方のProjectが開きますが、使い方はデモビデオを見て学んだほうが速いと思います。

新しいプロジェクトを作成するには、メニューのFile→New Project(Command+N)。
ファイルを保存するかどうか求められますので、いいえ(No)にします。

するとステージのサイズを求められます。

「Type」のリストには

  • Large(960*640)
  • Medium(640*480)
  • Small(480*320)
  • Tiny(100*100)

の4項目があります。

「or custom size」では、好きな横・縦の数値を入力して作成することができます。

いずれかを選択すると真っ白なステージが作成されます。

Sencha Animatorのツール紹介

英語解説は全く無視して勝手なツール名をつけてます。

【上段のツールバー】

■Squareツール
四角のオブジェクトを作成します。

■Circleツール
丸のオブジェクトを作成します。

■Lineツール
線のオブジェクトを作成します。

■Textツール
テキストオブジェクトを作成します。
右側のプロパティパネルから文字の変更が可能です。HTMLタグを使った装飾も可能です。
日本語も使用することが可能です。

■Imageツール
画像オブジェクトを作成します。
最初にぐにゃぐにゃのオブジェクトが作成されますが右側のプロパティパネルからイメージの選択ができます。
ちなみにイメージの変更にはあらかじめプロジェクトを保存しておく必要があります。
プロジェクトを保存するとassetsフォルダができるので、そこに画像パーツを置いておくといいでしょう。
※Imageの変更ができません(Windows XP・Mac OS X Snow Leopardで動作していません)。たぶんスタンダードバージョンでの広告素材の作成が、ライセンス規約上許可されてないためだと思います。必要な方は広告制作者向けバージョンを検討してみましょう。
10/30:Select Imageが使えるようになったみたいです。

■Containerツール
コンテナオブジェクトを作成します。
Sencha Animatorではオブジェクトを入れ子にして扱うことができますので、Containerツールは上記のツールたちの入れ子の親として使うといいでしょう。
マークアップで言うところの#container、#header、#sidebarみたいなものです。

【中段のボタン群】
ここはボタンと表現したほうが合ってそうなのでボタンと表現します。

■Overflowボタン
ステージ外にはみ出したオブジェクトを表示するかしないかの設定です。
アニメーション作成時は、はみ出したオブジェクト表示・チェック時には、はみ出したオブジェクト非表示のような使い方ができて便利ですね。

■Reverseボタン
タイムラインの頭(0s)に戻ります。

■Playボタン
アニメーションの再生をします。
アニメーション再生時には一時停止ではなく停止になりますので、クリックすると頭(0s)に戻ります。

■forwardボタン
タイムラインの最後までスキップします。

■Repeatボタン
アニメーションをループさせます。

■Zoom Slider
タイムラインの拡大・縮小ができます。

Sencha AnimatorのProperty Panelの紹介

右側にある様々なパネル群の紹介をします。

■Projecft Properties

プロジェクトに関するプロパティができます。
ファイルをエクスポートしたときに出てくる「AN-sObj-stage」というIDに関する情報が変わります。

■Object Properties

オブジェクトに関するプロパティの設定ができます。

Name:オブジェクト名が変更できます。レイヤー名みたいなものです。
Text/HTML:テキスト入力ができます。HTMLタグを使った装飾も可能です。
CSS ID:オブジェクトにID名を付けることができます。名前をつけなければ「AN-sObj1」のように連番で名前がつきます。
Click Action:クリックした時のアクションを設定します。

  • Link(same window):同ウィンドウでリンク先に飛ぶ。
  • Link(new window):新規ウィンドウでリンク先に飛ぶ。
  • Play Animation:アニメーションの再生。
  • Restart Animation:再びアニメーションを再生させることが可能です。

■Keyframe Properties

キーフーレームの位置を数値入力で設定することができます。
あらかじめ設定したいキーフーレームを選択しておきましょう。

■Animation

アニメーションの設定をします。

Position:位置の設定です。座標を入力するのではなく、移動距離を入力します。オブジェクトを動かすだけで変更可能です。
Scale:伸縮量の設定です。
Opacity:透明度の設定です。0~1の間で指定します。
Rotation:回転の設定です。軸を基準に回転します。
Skew:歪みの設定です。
Origin:RotaionやScaleの基準点の設定です。デフォルトではX:50%、Y:50%となっていますが、これは基準点がオブジェクトの中心にあることになります。左上にしたい場合はX:0%、Y:0%にします。Flashのムービークリップと同じようにキーフーレームの始まりと終わりで基準点の設定が違うと思わぬ動きをするので気をつけましょう。
Easing:アニメーションの加速・減速を設定します。

■Dimensions,Positions & Flow

オブジェクトの大きさや位置情報の設定です。これがオブジェクトの初期設定になります。
アニメーション後のオブジェクトの設定は、よっぽどのことがない限りAnimation側で行ったほうがいいでしょう。

■Borders

オブジェクトのボーダーに関する設定です。
Squareオブジェクトを角丸四角にしたい場合はRadiusプロパティを使用しましょう。

■Background

オブジェクトの背景に関する設定です。
画像を使用する場合はImageツールの様にあらかじめプロジェクトファイルを保存しておく必要があります。

Box Shadow:オブジェクトに影をつけます。
Reflection:オブジェクトの反射の設定です。

■Type

フォントに関する設定です。
特に難しいことはないと思いますがCSS3で追加されたプロパティのものは解説しておきます。

Text Stroke:文字のアウトライン(ふちどり)の設定です。Photoshopでいうところの境界線です。
Fill Color:アウトライン描画の(内側の)塗りつぶしの色の設定です。Colorで指定した色があっても、こちらが優先されます。
Shadow:影の設定です。

■Custom CSS

プロパティパネルで指定できなかったCSSを記述することができます。
色に関するグラデーションの設定がないので個別に指定する。
Object Propertiesで記述したhtmlタグやクラスについての装飾。
といった使い方ができますね。

Sencha Animatorの使い方

使い方についてはこのデモビデオをご覧になったほうが速いと思います。

最低限のポイントを記述しておきます。

  • キーフーレームの追加はタイムラインをダブルクリックすることで可能。クリックした位置にキーフーレームが追加されます。
  • オブジェクトはドラッグして動かすことが可能。Shift押しながら動かせば、水平・垂直移動が可能かと思いきやそうではないので、プロパティパネルで調整が必要です。
  • オブジェクトを消すにはオブジェクトを選択してDeleteボタン。
  • オブジェクトを入れ子にするには、タイムラインで入れ子にしたいオブジェクトとオブジェクトを重ねあわせる。
  • できたアニメーションのコードを見るには、メニューのFile→Export Project。Export FileボタンをクリックするとHTMLファイルの書き出しが可能。

かなり使いどころは限られていますが、使う案件があれば使ってみたいですね!

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ