DaVinci Animator とは

DaVinci Animator(ダビンチ アニメータ)は、HTML5、CSS3、Javascriptにより、グラフィックやアニメーション中心のリッチメディアコンテンツを制作できるツールです。
様々なコンテンツを手軽に制作できるよう、最適化したインターフェースを用意。

シェアウェアですが、試用期間が60日間あるため、思う存分使うことができます。

- 2016年3月26日配布終了を確認。以下、過去記事となります。 -

 

DaVinci Animator のダウンロード、インストール

DaVinci Animator のダウンロード、インストール方法の流れを解説します。

<ダウンロード>


提供元サイトのダウンロードページよりダウンロードできます。
http://www.davincisdk.com/?page_id=5626

下図赤枠の「Windows」ボタンをクリックしてダウンロードします。
※ Mac の場合は「Mac」ボタンをクリックしてダウンロードします。

<インストール>


ダウンロードしたセットアップファイル(DaVinciAnimatorSetup.exe)をダブルクリックすると、インストールが始まります。 インストール言語の選択画面が表示されるので、「Japanese」を選択して「OK」ボタンをクリックします。
インストール言語選択

セットアップウィザード画面が表示されます。「次へ」ボタンをクリックします。
ライセンス契約書画面が表示されます。「このライセンス契約書に同意します」にチェックを入れ、「次へ」ボタンをクリックします。

インストール先フォルダを変更できます。変更不要の場合は、そのまま「インストール」ボタンをクリックします。
インストール中です。
インストール完了です。「完了」ボタンをクリックすると、ALYac が起動します。
 

ユーザー登録

DaVinci Animator を利用するには、ユーザー登録が必要です。

インストール完了するとソフトが起動しますが、無料ユーザー登録しないとソフトが終了してしまい、利用することができません。
そこで、下記URLの DaVinci Animator のフォーラムページへアクセスし、ユーザー登録を行います。
http://forum.davincisdk.com/

下図赤枠の「Register」リンクをクリックします。

「DaVinci Forum Register」画面が表示されます。メールアドレスを入力して「Send」ボタンをクリックします。

「An authorization email has been sent.(認証メールが送信されました)」というポップアップウィンドウが表示されるので、×ボタンをクリックして閉じます。

下図のようなメールが届きます。「Email authorization complete」ボタンをクリックします。
※ メールの件名が韓国語、本文が英語のため、迷惑メールに振り分けられてしまう可能性があります。

ブラウザで「DaVinci Forum Register」画面が表示されます。 「Agree to the Terms and Conditions.(利用規約に同意する)」にチェックを入れ、Nickname(ニックネーム)、Password(パスワード) 等を入力して「Member registration complete(会員登録完了)」ボタンをクリックします。
※ ニックネームは2文字以上、英数字のみ。パスワードは6文字以上16文字以下、英字と数字を含めること。

「Your membership registration has been completed.(会員登録が完了しました)」画面が表示され、会員登録が完了します。


DaVinci Animator の使い方

会員登録が完了したら、ソフトを起動しましょう。
ソフトを起動すると、「Sign In」ウィンドウが表示されます。
Forum ID(先ほど会員登録時に設定したメールアドレス)を入力して、「Trial」ボタンをクリックして試用版を開始します。
※ トライアルバージョンは60日間無料で試用できます。


【DaVinci Animator を使ってみる】


具体的なステップで実際に DaVinci Animator を動かしてみましょう。

■プロジェクトの作成、保存


プロジェクトの作成
メニューの「File」⇒「New」をクリックするか、ツールバーの New アイコンをクリックして新規プロジェクトを作成します。
プロジェクトの作成

プロジェクトの設定
最初に Stage(ステージ)の設定を行います。ステージとは、アニメーションの動作で見える範囲を指定するものです。ステージ外でも動作を指定できますが、最終的に画面上で見えるのはステージ内の範囲だけです。
画面右の Properties(プロパティ) タブの Name(名前)を「Sparkling」とし、Width 640px、Hight 100px と入力します。すると、画面中央のレイアウトエディタの大きさも変更されます。

プロジェクトの保存
プロジェクトを保存してみます。
メニューの「File」⇒「Save」をクリックするか、ツールバーの Save アイコンをクリックしてプロジェクトを保存します。保存するファイル名を「Sparkling」とします。
プロジェクトの保存

■アニメーションレイヤーの作成


レイヤー生成&編集
画面上部の「rectangle layer(四角レイヤー)」をクリックし、レイアウトエディタ状でマウスでドラッグして四角レイヤーを設置します。

画面右の Properties(プロパティ)内の Dimension(ディメンション)の Size(サイズ)の W(幅)を 142、 H(高さ)を 467 と入力して、設置したレイヤーのサイズを変更します。このとき、Location(ロケーション)の Lを 520、Tを -90 としておきます。

画像の読み込み
設置した四角レイヤーに画像を読み込みます。
Properties(プロパティ)内の Background(背景)の Image(イメージ)横のフォルダアイコンをクリックして、画像を選択します。
画像は、DaVinci Animator のインストールフォルダ内の「sampele」⇒「sparkling」⇒「images」フォルダ内にある、0000048.png を設定します。
※ C:¥Program Files (x86)¥DaVinciAnimator¥samples¥sparkling¥images
64bit版の場合は、Program Files (x86)


画像の不要な部分の透過処理を行います。
Properties(プロパティ)内の Background(背景)の Fill(フィル)のチェックを外します。

■アニメーション制作


キーフレームを使ったアニメーション制作
ツールバーの Animation(アニメーション)が選択されていることを確認し、Properties(プロパティ)内の Transform(トランスフォーム)の Rotate(回転)の値を -60 に設定します。

画像上に表示される「Add new frame(新しいフレームを追加する)」アイコンをクリックすると、画面下の Timeline(タイムライン)に1秒のキーフレームが追加されます。

今度は、Transform(トランスフォーム)の Rotate(回転)の値を -60 から -50 に設定します。

「Add new frame(新しいフレームを追加する)」アイコンをクリックして Timeline(タイムライン)に2秒のキーフレームを追加し、Transform(トランスフォーム)の Rotate(回転)の値を -50 から -70 に設定します。

同様に、「Add new frame(新しいフレームを追加する)」アイコンをクリックして Timeline(タイムライン)に3秒のキーフレームを追加し、Transform(トランスフォーム)の Rotate(回転)の値を -70 から -60 に設定します。

Timeline(タイムライン)の現在の時間を調節してアニメーションを確認したら、現在の時間を0秒に設定するか、アニメーションのスタート位置に戻すボタンをクリックした後、アニメーションの再生ボタンをクリックして内容を確認できます。

現在の設定では4つのキーフレームを3秒間かけて再生しているため、少し間延びしたかのようになってしまっています。
Timeline(タイムライン) のキーフレームグループをクリックし、右側の紫色の▼をクリックして1秒間に縮めます。

ツールバー右上の Preview(プレビュー)ボタンをクリックしてブラウザでの動作を確認するか、Emulator(エミュレータ)ボタンをクリックして動作を確認します。
IEの場合、ブロックされてしまう場合があるので、「ブロックされているコンテンツを許可」ボタンをクリックすると確認できるようになります。

■プリセットを使用して簡単にアニメーションを制作


画像の読み込みで利用したフォルダを開き、フォルダにある画像をレイアウト上にドラッグ&ドロップして落とします。
※ C:¥Program Files (x86)¥DaVinciAnimator¥samples¥sparkling¥images
64bit版の場合は、Program Files (x86)


一つの画像をクリックして選択し、ツールバーの Motion(モーション)ボタンをクリックし、「Bounce」をクリックします。

Bounce の動作の画像経路の最初の点となる緑色の点と、最終目的地となる青い点が表示されます。

青い点をドラッグ&ドロップして瓶の上に配置します。

他のドラッグ&ドロップした画像レイヤーも、同様に Motion(モーション)を設定します。

次に、瓶が揺れてから各画像のレイヤーが動くように、Timeline(タイムライン)でキーフレームグループを動かします。

効果を与えるレイヤーがステージ外では見えないように、ステージを設定します。
レイヤーのない空いているところをクリックし、Properties(プロパティ)の Overflow(オーバーフロー)を Hidden(隠す)にします。

■クリックによるアニメーション再生


レイアウトエディタの瓶のレイヤーをクリックして選択し、画面右側の Actions(アクション)タブをクリックします。
Click の左側にある矢印をクリックし、none をクリック。「Animation」をクリックします。

これで瓶がクリックされると、アニメーションがもう一度再生される、という設定となります。プレビューで確認できます。

クリック時のURL移動
レイアウトエディタの任意のレイヤーをクリックして選択し、画面右側の Actions(アクション)タブをクリックします。
Click の左側にある矢印をクリックし、none をクリック。「Navigate」をクリックします。

URLを入力すると、このレイヤークリック時にURLに移動します。プレビューで確認できます



ソフトウェア情報
● 提供元 : http://www.davincisdk.com/
スクリーンショット
DaVinci Animator の評価・レビュー
Davinci Animator のダウンロード・使い方
● 対応OS : Windows Vista/7/8, Mac OS X
● 提供元 : Davinci Software Lab. Inc.,