作成したアニメーションの書き出し方法について説明します。
HTML5形式で書き出す
以下の手順で制作したアニメーションを書き出すことができます。
メインメニュー > 「書き出し」>「HTML5 形式で書き出す」を選択する
書き出し先を選択し「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ページにアニメーションを組み込むには以下の手順をご覧ください。
書き出したHTMLファイル(例:sample.html)を、任意のHTMLエディタ/テキストエディタなどで開く
開いたhtmlファイルのheadタグ内の以下のようなコードをコピーし、組み込み先HTMLファイルのheadタグ内に貼り付ける
<script type="text/javascript" charset="utf-8" src="sample_resources/jquery-1.7.min.js"></script>
書き出したHTMLファイル内のbodyタグ内にある以下のような3行のコードをコピーし、組み込み先のhtmlファイル等の任意の場所に貼り付ける
<div id="sampleStage" class="wascript"> <script type="text/javascript" charset="utf-8" src="sample_resources/WA_SCRIPT.js"></script> </div>
編集した組み込み先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形式で書き出すこともできます。
メインメニューの「書き出し」>「アニメーションGIF形式で書き出す」を選択する
「書き出し先」欄の「参照」ボタンをクリックし、書き出し先フォルダとファイル名を指定する
「1秒あたりの画像数」、「画質」を選択後、「OK」をクリックする
「OK」をクリックすると書き出しが開始されます。書き出し完了すると「書き出し先」で指定したフォルダが開きます。