書き出し

作成したアニメーションの書き出し方法について説明します。

HTML5形式で書き出す

以下の手順で制作したアニメーションを書き出すことができます。

  1. メインメニュー > 「書き出し」>「HTML5 形式で書き出す」を選択する

    メインメニュー 書き出し HTML5

  2. 書き出し先を選択し「OK」をクリックする

制作したアニメーションをHTML5形式で書き出すと、HTMLファイルとリソースファイルが作成されます。HTMLファイルとリソースファイルをWebサーバーにアップロードすることで、Webブラウザでアニメーションを閲覧できるようになります。

例えば

sampleというプロジェクトをHTML5形式で書き出すと、以下のファイルとフォルダが作成されます。

  • sample.html
    このファイルを、書き出したアニメーションの「HTMLファイル」と呼びます。
  • sample_resources フォルダ
    このフォルダを「リソースフォルダ」と呼びます。
    また、このフォルダ内にはアニメーション再生に必要なファイルが複数含まれており、これらを総称して「リソースファイル」と呼びます。

※アップロード先のWebサーバーはお客様ご自身でご用意ください。

※Webサーバーへのアップロード方法はご使用中のWebサーバー提供業者にご確認ください。

書き出したファイルをそのままアップロードする

HTML形式で書き出したアニメーションをそのままWebサーバーにアップロードすれば、Webブラウザ上でアニメーションを見ることができます。

例えば

以下のような場合

公開予定の「サイトのURL」http://yourdomain.com
HTMLファイル/リソースフォルダのアップロード先 「サイトのURL」のルートディレクトリに作成した「sub」ディレクトリ内
つまり、http://yourdomain.com/sub
アップロードしたHTMLファイルのファイル名sample.html

以下のURLにアクセスすれば、アップロードしたアニメーションを見ることができます。

http://yourdomain.com/sub/sample.html

書き出したアニメーションを既存のWebページに組み込む

既存のWebページにアニメーションを組み込むには以下の手順をご覧ください。

  1. 書き出したHTMLファイル（例：sample.html）を、任意のHTMLエディタ/テキストエディタなどで開く

  2. 開いたhtmlファイルのheadタグ内の以下のようなコードをコピーし、組み込み先HTMLファイルのheadタグ内に貼り付ける

    <script type="text/javascript" charset="utf-8" src="sample_resources/jquery-1.7.min.js"></script>

  3. 書き出したHTMLファイル内のbodyタグ内にある以下のような3行のコードをコピーし、組み込み先のhtmlファイル等の任意の場所に貼り付ける

    <div id="sampleStage" class="wascript">
  <script type="text/javascript" charset="utf-8" src="sample_resources/WA_SCRIPT.js"></script>
</div>

  4. 編集した組み込み先HTMLファイルをWebサーバー上にアップロードし、同じフォルダ内に書き出したリソースフォルダ（例：sample_resources）をアップロードする

上記は、組み込み先HTMLファイルと、リソースフォルダが同じ階層の場合の例です。

リソースフォルダ（例：sample_resources）を任意の場所にアップロードする場合、上記手順2と3の「src」属性のパスを該当パス（絶対パス、または、組み込み先HTMLファイルから見た相対パス）に変更してください。

また、リソースフォルダ内の WA_SCRIPT.js をテキストエディタで開き、WA_SCRIPT.js 内に記載されている全リソースフォルダのパスについても該当パスに変更してください。

複数のアニメーションを1つのWebページに組み込むこともできます。この場合、上記の手順2のコードはheadタグ内に1度のみ貼り付けてください。組み込むアニメーションと同数のタグを貼り付ける必要はありません。

Chrome Frame を使用している場合

以下のコードを組み込み先のheadタグ内に貼り付けてください。

<meta http-equiv="X-UA-Compatible" content="chrome=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chromeframe/ 1/CFInstall.min.js"></script>

また、bodyタグ内に以下のタグを貼り付けてください。

<script type="text/javascript">
/* <![CDATA[ */
if ($.browser.msie && $.browser.version < 10) {
CFInstall.check({
mode: "overlay"
});
}
/* ]]> */
</script>

アニメーションGIF形式で書き出し

制作したアニメーションは、アニメーションGIF形式で書き出すこともできます。

  1. メインメニューの「書き出し」>「アニメーションGIF形式で書き出す」を選択する

    メインメニュー 書き出し アニメーションGIF

  2. 「書き出し先」欄の「参照」ボタンをクリックし、書き出し先フォルダとファイル名を指定する

    アニメーションGIF書き出し 書き出し先指定

  3. 「1秒あたりの画像数」、「画質」を選択後、「OK」をクリックする

    アニメーションGIF書き出し 開始

    「OK」をクリックすると書き出しが開始されます。書き出し完了すると「書き出し先」で指定したフォルダが開きます。