アニメエディター未完成版 (10/05/15)

更新履歴


目次

操作方法

画面右のテキストエリアにxmlを入れ、テキストエリア上部の送信ボタンを押すと
xmlに応じたアニメーションが画面左に表示されます。
画面左下のシークバーでシーク可能です。

xmlを編集するとアニメーションの動き方を設定できます。

setting.xml の中にxmlを書いておくと、最初にそれを自動的に読み込みます。
保存する際は文字コードを「UTF-8」にしてください。「UTF-8」でないと日本語が文字化けします。

xml編集(基本編)

xmlタグの説明です。実用例は応用編をご覧下さい。

アニメーションを作る

アニメーションを作るには<anime>タグを書きます。
サンプル
<anime>
</anime>
これだけだと何も出ません。ここから画像を読み込んだり動かしたりします。

画像を読み込む

画像を読み込むには<img>タグを書きます。
コメントは<!--コメント-->と書きます。
サンプル
<anime>
  <!-- 画像1 -->
  <img name="one.png"></img>
</anime>
画像が表示されます。

画像をアニメーションさせる

画像をアニメーションさせるには<img>タグを続けて複数書きます。
サンプル
<anime>
  <!-- 画像1→2→3 素早く -->
  <img name="one.png"></img>
  <img name="two.png"></img>
  <img name="three.png"></img>
</anime>

各画像の表示時間を設定するには duration アトリビュートを設定します。
サンプル
<anime>
  <!-- 画像1→2→3 ゆっくり -->
  <img name="one.png" duration="30"></img>
  <img name="two.png" duration="20"></img>
  <img name="three.png" duration="10"></img>
</anime>

画像の表示開始フレームを変えるには frame アトリビュートを設定します。
サンプル
<anime>
  <!-- 画像1→2→3 1文字ずつ -->
  <img name="one.png" frame="10" duration="20"></img>
  <img name="two.png" frame="40" duration="20"></img>
  <img name="three.png" frame="70" duration="20"></img>
</anime>

画像の表示位置を変えるには x, y アトリビュートを
画像を回転させるには angle アトリビュートを
表示位置と回転の基準座標を変えるには cx, cy アトリビュートを設定します。
サンプル
<anime>
  <!-- 画像1が移動 -->
  <img name="one.png" duration="30"></img>
  <img name="one.png" duration="30" x="100"></img>
  <img name="one.png" duration="30" x="100" y="100"></img>
  <!-- 画像2が左上を中心に回転 -->
  <img name="two.png" duration="30" x="100" y="100" angle="0"></img>
  <img name="two.png" duration="30" x="100" y="100" angle="90"></img>
  <img name="two.png" duration="30" x="100" y="100" angle="180"></img>
  <img name="two.png" duration="30" x="100" y="100" angle="270"></img>
  <!-- 画像3が真ん中を中心に回転 -->
  <img name="three.png" duration="30" x="100" y="100" angle="0" cx="50" cy="50"></img>
  <img name="three.png" duration="30" x="100" y="100" angle="90" cx="50" cy="50"></img>
  <img name="three.png" duration="30" x="100" y="100" angle="180" cx="50" cy="50"></img>
  <img name="three.png" duration="30" x="100" y="100" angle="270" cx="50" cy="50"></img>
</anime>

画像の一部分だけを切り取って表示させるには tx, ty, tw, th アトリビュートを設定します。
サンプル
<anime>
  <!-- 画像2を4分の1ずつ -->
  <img name="two.png" duration="30" tx="0" ty="0" tw="50" th="50"></img>
  <img name="two.png" duration="30" tx="50" ty="0" tw="50" th="50"></img>
  <img name="two.png" duration="30" tx="50" ty="50" tw="50" th="50"></img>
  <img name="two.png" duration="30" tx="0" ty="50" tw="50" th="50"></img>
  <!-- 画像3を4分の1ずつ 位置も変えて -->
  <img name="three.png" duration="30" x="0" y="0" tx="0" ty="0" tw="50" th="50"></img>
  <img name="three.png" duration="30" x="50" y="0" tx="50" ty="0" tw="50" th="50"></img>
  <img name="three.png" duration="30" x="50" y="50" tx="50" ty="50" tw="50" th="50"></img>
  <img name="three.png" duration="30" x="0" y="50" tx="0" ty="50" tw="50" th="50"></img>
</anime>

画像の表示サイズを変えるには scaleX, scaleY アトリビュートを設定します。
サンプル
<anime>
  <img name="one.png" duration="30" scaleX="1" scaleY="1"></img>
  <img name="one.png" duration="30" scaleX="2" scaleY="1"></img>
  <img name="one.png" duration="30" scaleX="2" scaleY="2"></img>
  <img name="one.png" duration="30" scaleX="1" scaleY="2"></img>
</anime>

画像のアルファ値を変えるには alpha アトリビュートを設定します。
サンプル
<anime>
  <img name="one.png" duration="30" alpha="1"></img>
  <img name="one.png" duration="30" alpha="0.75"></img>
  <img name="one.png" duration="30" alpha="0.5"></img>
  <img name="one.png" duration="30" alpha="0.25"></img>
  <img name="one.png" duration="30" alpha="0"></img>
</anime>

画像を動かす

画像を動かすには<img>タグの中に<trans>タグを入れます。
<trans>タグに変化させたいアトリビュートを設定すると、durationの分だけ時間をかけてゆっくり変化していきます。
サンプル
<anime>
  <!-- 画像1が時計回りに移動 -->
  <img name="one.png" duration="30" x="0" y="0">
    <trans x="100" y="0"></trans>
  </img>
  <img name="one.png" duration="30" x="100" y="0">
    <trans x="100" y="100"></trans>
  </img>
  <img name="one.png" duration="30" x="100" y="100">
    <trans x="0" y="100"></trans>
  </img>
  <img name="one.png" duration="30" x="0" y="100">
    <trans x="0" y="0"></trans>
  </img>
</anime>

<trans>タグに設定できるのは x, y, angle, cx, cy, tx, ty, tw, th, scaleX, scaleY, alpha です。
サンプル
<anime>
  <!-- 画像2のマスクが時計回りに移動してる感じ -->
  <img name="two.png" duration="30" x="0" y="0" tx="0" ty="0" tw="50" th="50">
    <trans x="50" y="0" tx="50" ty="0"></trans>
  </img>
  <img name="two.png" duration="30" x="50" y="0" tx="50" ty="0" tw="50" th="50">
    <trans x="50" y="50" tx="50" ty="50"></trans>
  </img>
  <img name="two.png" duration="30" x="50" y="50" tx="50" ty="50" tw="50" th="50">
    <trans x="0" y="50" tx="0" ty="50"></trans>
  </img>
  <img name="two.png" duration="30" x="0" y="50" tx="0" ty="50" tw="50" th="50">
    <trans x="0" y="0" tx="0" ty="0"></trans>
  </img>
</anime>

<trans>タグに type アトリビュートを設定すると動き方が変化します。
type="0" … 普通
type="1" … ゆっくり→速い
type="2" … 速い→ゆっくり
type="3" … ゆっくり→速い→ゆっくり
type="4" … ゆっくり→速いパート2
type="5" … 速い→ゆっくりパート2
サンプル
<anime>
  <!-- 画像1が時計回りに移動 -->
  <img name="one.png" duration="60" x="0" y="0">
    <trans type="0" x="100" y="0"></trans>
  </img>
  <img name="one.png" duration="60" x="100" y="0">
    <trans type="1" x="100" y="100"></trans>
  </img>
  <img name="one.png" duration="60" x="100" y="100">
    <trans type="2" x="0" y="100"></trans>
  </img>
  <img name="one.png" duration="60" x="0" y="100">
    <trans type="3" x="0" y="0"></trans>
  </img>
  <!-- 画像1が中央に移動して戻る -->
  <img name="one.png" duration="60" x="0" y="0">
    <trans type="4" x="100" y="100"></trans>
  </img>
  <img name="one.png" duration="60" x="100" y="100">
    <trans type="5" x="0" y="0"></trans>
  </img>
</anime>

画像を重ねる

画像を2つ以上表示するには<layer>タグの中に<img>タグを入れて
<layer>タグを複数作ることで画像を2つ以上表示します。
<layer>タグが書かれた順番で重ねていくので、最初の<layer>タグが重ねたときの一番下になります。
サンプル
<anime>
  <!-- 画像2,3が交互に -->
  <layer>
    <img name="two.png" duration="60" scaleX="2" scaleY="2"></img>
    <img name="three.png" duration="60" scaleX="2" scaleY="2"></img>
  </layer>
  <!-- 画像1が半透明で時計回りに移動 -->
  <layer>
    <img name="one.png" duration="30" x="0" y="0" alpha="0.5">
      <trans x="100" y="0"></trans>
    </img>
    <img name="one.png" duration="30" x="100" y="0" alpha="0.5">
      <trans x="100" y="100"></trans>
    </img>
    <img name="one.png" duration="30" x="100" y="100" alpha="0.5">
      <trans x="0" y="100"></trans>
    </img>
    <img name="one.png" duration="30" x="0" y="100" alpha="0.5">
      <trans x="0" y="0"></trans>
    </img>
  </layer>
</anime>

xml編集(応用)

xmlタグの実用例です。xmlタグ自体の説明は基本編をご覧下さい。

目パチ

基本となる画像の上に一部分だけ画像を重ねてアニメーションさせます。
目の場合は目パチ(まばたき)、口だと口パクになります。
サンプル
<anime>
  <layer>
    <img name="face.png" duration="60"></img>
  </layer>
  <layer>
    <img name="eye.png" frame="55" duration="5"></img>
  </layer>
</anime>

ふきだし

別画像でセリフ入りのふきだしを用意して表示します。
サンプル
<anime>
  <layer>
    <img name="face.png" duration="120"></img>
  </layer>
  <!-- あ→う -->
  <layer>
    <img name="text.png" frame="30" duration="5" x="10" y="20" tx="0" tw="32" alpha="0">
      <trans alpha="1"></trans>
    </img>
    <img name="text.png" frame="35" duration="20" x="10" y="20" tx="0" tw="32"></img>
    <img name="text.png" frame="55" duration="5" x="10" y="20" tx="0" tw="32" alpha="1">
      <trans alpha="0"></trans>
    </img>
    <img name="text.png" frame="90" duration="5" x="10" y="40" tx="32" tw="32" alpha="0">
      <trans alpha="1"></trans>
    </img>
    <img name="text.png" frame="95" duration="20" x="10" y="40" tx="32" tw="32"></img>
    <img name="text.png" frame="115" duration="5" x="10" y="40" tx="32" tw="32" alpha="1">
      <trans alpha="0"></trans>
    </img>
  </layer>
</anime>

実用例

様々なものを組み合わせた例です。
サンプル
<anime>
  <!-- キャラクターと背景 -->
  <layer>
    <img name="base00.jpg" duration="360"></img>
  </layer>
  <!-- 手が動く -->
  <layer>
    <img name="hand0.gif" x="85" y="219" duration="30">
       <trans type="cos180" x="89" y="202"></trans>
    </img>
    <img name="hand0.gif" x="89" y="202" duration="30">
       <trans type="cos180" x="85" y="219"></trans>
    </img>
    <img name="hand0.gif" x="85" y="219" duration="30">
       <trans type="cos180" x="89" y="202"></trans>
    </img>
    <img name="hand0.gif" x="89" y="202" duration="30">
       <trans type="cos180" x="85" y="219"></trans>
    </img>
    <img name="hand0.gif" x="85" y="219" duration="30">
       <trans type="cos180" x="89" y="202"></trans>
    </img>
    <img name="hand0.gif" x="89" y="202" duration="30">
       <trans type="cos180" x="85" y="219"></trans>
    </img>
    <img name="hand0.gif" x="85" y="219" duration="30">
       <trans type="cos180" x="89" y="202"></trans>
    </img>
    <img name="hand0.gif" x="89" y="202" duration="30">
       <trans type="cos180" x="85" y="219"></trans>
    </img>
    <img name="hand0.gif" x="85" y="219" duration="30">
       <trans type="cos180" x="89" y="202"></trans>
    </img>
    <img name="hand0.gif" x="89" y="202" duration="30">
       <trans type="cos180" x="85" y="219"></trans>
    </img>
    <img name="hand0.gif" x="85" y="219" duration="30">
       <trans type="cos180" x="89" y="202"></trans>
    </img>
    <img name="hand0.gif" x="89" y="202" duration="30">
       <trans type="cos180" x="85" y="219"></trans>
    </img>
  </layer>
  <!-- 効果音テキスト -->
  <layer>
    <img name="sound.png" x="80" y="180" tx="0" ty="0" tw="48" th="64" frame="20" duration="20">
      <trans alpha="0"></trans>
    </img>
    <img name="sound.png" x="100" y="170" tx="0" ty="64" tw="48" th="64" frame="80" duration="20">
      <trans alpha="0"></trans>
    </img>
    <img name="sound.png" x="80" y="180" tx="0" ty="0" tw="48" th="64" frame="140" duration="20">
      <trans alpha="0"></trans>
    </img>
    <img name="sound.png" x="100" y="170" tx="0" ty="64" tw="48" th="64" frame="200" duration="20">
      <trans alpha="0"></trans>
    </img>
    <img name="sound.png" x="80" y="180" tx="0" ty="0" tw="48" th="64" frame="260" duration="20">
      <trans alpha="0"></trans>
    </img>
    <img name="sound.png" x="100" y="170" tx="0" ty="64" tw="48" th="64" frame="320" duration="20">
      <trans alpha="0"></trans>
    </img>
  </layer>
  <!-- フキダシ -->
  <layer>
    <img name="text.png" x="125" y="90" tx="0" ty="0" tw="48" th="64" frame="10" duration="30" alpha="0.7">
      <trans type="pow" alpha="0"></trans>
    </img>
    <img name="text.png" x="110" y="100" tx="0" ty="0" tw="48" th="64" frame="40" duration="30" alpha="0.7">
      <trans type="pow" alpha="0"></trans>
    </img>
    <img name="text.png" x="65" y="100" tx="48" ty="0" tw="48" th="64" frame="110" duration="40" alpha="0.7">
      <trans type="pow" alpha="0"></trans>
    </img>
    <img name="text.png" x="140" y="80" tx="0" ty="64" tw="48" th="64" frame="150" duration="40" alpha="0.7">
      <trans type="pow" alpha="0"></trans>
    </img>
    <img name="text.png" x="65" y="90" tx="48" ty="64" tw="48" th="64" frame="280" duration="40" alpha="0.7">
      <trans type="pow" alpha="0"></trans>
    </img>
  </layer>
</anime>
inserted by FC2 system