かんたんWebアニメーション２を使う（アイテムの追加）

１．パーツと背景以外は・・・

かんたんWebアニメーション２には、最初から用意されている部品として「パーツ」と「背景」があり、これは画面上からサムネイルを選択する事によって使用する事が出来ます。

しかし、それ以外のイメージなどを部品として利用したい場合は、「アイテム」メニューから追加する事になります。

「アイテム」メニューから追加する事によって、任意の図形や画像、サウンドなどを使用する事ができます。各々のアイテムを追加すると、初期サイズや形を調整する事ができ、さらにアニメーションを追加する事によって、登場エフェクト、退場エフェクト、移動エフェクト、効果のみの動作を行わせる事が出来ます。

登場エフェクトは、アイテムの無い状態からアイテムの追加位置に現れるまでのエフェクトを指定できます。
退場エフェクトは、アイテムの最後の位置からアイテムが消えるまでのエフェクトを指定できます。
移動エフェクトは、直前のアイテム位置から指定位置への移動パターンを指定する事ができます。この時、最終位置のサイズなどを変形しておくと途中のフレームは自動的に補ってくれます。
効果のみの場合は、指定のアイテムに対して選択したアニメーションパターンを適用する事ができます。

移動エフェクトに効果を追加すると、任意の移動をさせながら指定のアニメーションを行う事もできます。
動作の開始タイミングはタイムラインで調整する事が出来ます。

ページをまたがる事はできないようなので、複数ページを扱う場合は、ページ単位でアイテムを追加する必要があります。

２．アイテムを追加してみる

かんたんWebアニメーション２でアイテムとして選択できるタイプは以下の通りです。

1	長方形	長方形をアイテムとして追加します。位置・サイズ・回転を調整できます。
2	円	円をアイテムとして追加します。位置・サイズ・回転を調整できます。サイズにより楕円になります。
3	多角形	多角形をアイテムとして追加します。位置・サイズ・回転を調整できます。
4	星型	星型をアイテムとして追加します。位置・サイズ・回転を調整できます。
5	直線	２点間を結ぶ直線をアイテムとして追加します。位置・サイズを調整できます。
6	ペン	カーソルで描画した自由曲線をアイテムとして追加します。位置・サイズ・回転を調整できます。
7	文字	任意の文字列をアイテムとして追加します。位置・サイズ・回転を調整できます。
8	画像	任意のイメージをアイテムとして追加します。位置・サイズ・回転を調整できます。
9	サウンド	任意のサウンドをアイテムとして追加します。
10	ビデオ	ＦＬＶ形式のビデオをアイテムとして追加します。

「アイテム」メニューから「長方形」を追加してみます。


操作ポイントの付いた長方形が追加されました。ポイントを操作するとサイズの変更や回転を行う事が出来ます。


右クリックのコンテキストメニューからアニメーションを追加する事もできます。


同様に「円」を追加してみます。


同様に「多角形」を追加してみます。右側のプロパティで頂点数を変更出来ます。


同様に「星型」を追加してみます。右側のプロパティで頂点数や凹みの程度を変更出来ます。


「直線」を追加してみます。頂点を操作して場所を変更出来ます。


「ペン」を選択するとマウスカーソルで描いた自由曲線がアイテムになります。


「文字」を選択すると指定した文字列がアイテムになります。




「画像」を選択すると任意のイメージをアイテムとして使用する事が出来ます。JPEG/BMP/PNG/GIF/TIFF形式が指定できます。
自作のパーツとして使用したい場合は、これらの形式で画像を作成する事になります。パーツのファイルはPNG形式で背景を透明にして作成されているようなので、自作の場合も同じ形式にしておいた方が良いかもしれません。


サウンドは、フレームの長さに調整されないので、開始位置から全て再生されます。残念ながらボリュームのコントロールもできないようでフェードインやフェードアウトも指定できません。


ビデオは、任意に指定した動作によって再生を開始する事ができます。

３．アイテムの動作を指定する

長方形や円などの図形はマスクに指定する事ができ、他の画像と重ねる事で表示領域を調整できます。

例えば、以下のように適当な背景に画像アイテムを配置し、マスクにするアイテム（ここでは「円」）を配置します。


円アイテムに移動アニメーションを設定します。もちろん、画像イメージ自体にもアニメーションを設定する事ができます。


円が画像の前を移動するように移動先を指定します。


円アイテムをマスクに指定します。


マスクが画像の前を移動する時だけ、画像が表示されるようになります。


文字はアニメーションを指定する事によって、アニメーションの選択画面と同じように一文字ごとに動作させる事ができます。


画像は、「パーツ」と同様に使用する事ができます。

関連ページ -> かんたんWebアニメーション２を使う（ページの切り替え）