コーディング(プログラミング)の知識不要で、誰でも簡単に使えるHTML5アニメーション作成ソフト。用意されたテンプレートを利用して、スライドショウなども作成できる。「WebAnimator Plus 2」は、動きのあるWebページやインタラクティブな操作に対応したWebページを、マウス中心の簡単操作で作成できるソフト。編集画面上に背景やキャラクタなどの素材を配置し、タイムライン上で動きを指定するだけで、見栄えのするアニメーションが完成する。HTML5アニメーションなので、Flashには対応していないスマートフォン/タブレットのブラウザでも──特別なアプリケーションを使うことなく──問題なく表示することが可能。動きのあるバナーやボタンも作成できる。開発元は、独・soft-evolution社、伊・INCOMEDIA社。
基本的なアニメーションの作成手順は、
- 「プロジェクト」の作成
- プロジェクト内の「シーン」に画像やテキストなどのオブジェクトを追加
- オブジェクトへのアニメーション効果の適用
- プレビューおよび書き出し
といった流れ。オブジェクトは、画面下部の「タイムライン」を使い、時間軸上での位置を指定できる。新規プロジェクトには空のシーンがひとつ含まれ、通常はそのまま作業を進めればよいが、さらにシーンを追加すれば、場面転換をともなう長いアニメーションを作成することも可能。アニメーション効果には、ボールが弾むような動きの「バウンス」やフェードイン/アウト、ズームイン/アウト、回転などのテンプレートが用意され、オブジェクト上にドラッグ&ドロップするだけで指定できる。動きを指定したオブジェクトを選択すると、キーフレーム上の位置を示すマーカーや、移動経路を示すパスが表示される。動きをイメージしやすく、修正も手軽に行える。パスを編集して曲線的な動きを指定したり、速度の変化をつけるイージング効果を適用したりすることも可能。「マイアニメーション」に登録しておけば、再利用も簡単に行える。
アニメーションのサイズや各シーンの背景色、オブジェクトの色、位置情報などは「プロパティ」パレットに表示される。アニメーションの大きさ(縦×横のpixel値)は任意に設定できるほか、フルHDやSVGAなどの画面サイズ、バナーサイズなどから選択することも可能だ。
テキストは、文字間隔・行間隔や位置揃え、シャドウなどをパラメータで調整できるだけでなく、HTMLタグを直接書き込んで装飾を施すことも可能。Webフォントも利用できる。
シーンの読み込みやアニメーションの終了時、マウス操作といったイベントに対してアクションや切り替え効果(トランジション)を割り当てることで、さらに凝ったアニメーションを作成することも可能。JavaScript用編集エディタも備え、直接スクリプトを記述することができる。
そのほかにも、
- サムネイル選択式の画像ギャラリーやカルーセル型のスライドショウなどを簡単に作成できる「テンプレート」
- Webページの背景や前景に表示した画像を動かせる「エフェクト」
といった機能が用意されている。作成したアニメーションの保存先には、プロジェクトファイル本体に加え、同名のサブフォルダ内に、描画したオブジェクトや使用した背景などの素材、自動生成されたJavaScriptファイルが格納される。
最終的な出力はHTML5形式で行われ、HTMLファイルとJavaScript、スタイルシートなどの付随ファイル一式が生成される。ファイル一式をWebサーバへアップロードすれば、アニメーションを含むページとして表示される仕組み。もちろん既存のWebページにアニメーションを組み込んで表示させることも可能だ。HTML5形式以外に、アニメーションGIF形式、Website X5形式で書き出すこともできる。