Webページでの利用

Flashで作成したアニメーションをWebページで利用するには、パブリッシュという操作を行います。

パブリッシュ

フラッシュで作成したムービーをブラウザで読み込める形(SWF形式)で書き出します。

ブラウザ表示用にHTMLファイルとSWFファイルの両方を出力することができます。

パブリッシュ設定

  1. 「ファイル」メニューから「パブリッシュ設定」を選択します。
  2. 必要に応じて、以下を設定します。
    • 「形式」タブで出力ファイルの種類とファイル名を設定します。
    • 「Flash」タブで出力するSWFファイルの設定を行います。
    • 「HTML」タブで出力するHTMLの設定を行います。
  3. 「OK」をクリックして設定を終了します。

パブリッシュプレビュー

「ファイル」メニューから「パブリッシュプレビュー」を選択し、さらにプレビューする形式(HTML、Flashなど)を選択します。デフォルトを指定した場合、ブラウザが起動してパブリッシュで出力するものがプレビューされます。

パブリッシュ

「ファイル」メニューから「パブリッシュ」を選択してファイルの出力を行います。FLA形式のファイルを保存した場所にファイルが作成されます。パブリッシュを行う前に、FLA形式のファイルを保存しておきましょう。

Webでの公開をする際には、ファイル名は半角英数字にする必要があるため、FLA形式のファイル名が全角の場合には、上記のパブリッシュ設定でSWFファイルのファイル名を半角に変更しておきましょう。

作成されたHTMLファイルをダブルクリックして開き、確認してみましょう。

例 hito.flaをパブリッシュ

  1. Flashのファイルを「hito.fla」(.flaはファイル拡張子)として保存します。
  2. パブリッシュ設定の「形式」タブで、HTMLとSWFにチェックをつけておきます。
  3. パブリッシュを行います。「hito.htm」と「hito.swf」が作成されます。
  4. 「hito.htm」をブラウザで開いて確認します。

Webページでの利用−HTMLの編集−

パブリッシュで出力したHTMLソースを参考にして、Flashムービーを入れたいWebページを編集します。SWFファイルの読み込みを行う<OBJECT>タグ部分をコピーして、使用したいWebページに貼り付けて利用するのが良いでしょう。

HTMLを貼り付けて使う場合には、SWFファイルのファイル名を半角にしてパブリッシュするよう、注意してください。

例 hito.swfをWebページで利用

  1. 「hito.htm」をブラウザーで開き、「表示」メニューから「ソース」でHTMLのソースを開きます。
  2. <OBJECT>要素を選択し、コピーします。

    <OBJECT>要素の例

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="250" height="305" id="hito" align="middle">
    	<param name="movie" value="hito.swf" />
    	<param name="quality" value="high" />
    	<param name="bgcolor" value="#ffffff" />
    	<param name="play" value="true" />
    	<param name="loop" value="true" />
    	<param name="wmode" value="window" />
    	<param name="scale" value="showall" />
    	<param name="menu" value="true" />
    	<param name="devicefont" value="false" />
    	<param name="salign" value="" />
    	<param name="allowScriptAccess" value="sameDomain" />
    	<!--[if !IE]>-->
    	<object type="application/x-shockwave-flash" data="hito.swf" width="250" height="305">
    		<param name="movie" value="hito.swf" />
    		<param name="quality" value="high" />
    		<param name="bgcolor" value="#ffffff" />
    		<param name="play" value="true" />
    		<param name="loop" value="true" />
    		<param name="wmode" value="window" />
    		<param name="scale" value="showall" />
    		<param name="menu" value="true" />
    		<param name="devicefont" value="false" />
    		<param name="salign" value="" />
    		<param name="allowScriptAccess" value="sameDomain" />
    	<!--<![endif]-->
    		<a href="http://www.adobe.com/go/getflash">
    			<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player を取得" />
    		</a>
    	<!--[if !IE]>-->
    	</object>
    	<!--<![endif]-->
    </object>
    
  3. 利用したいWebページをメモ帳などで編集し、挿入したい箇所に貼り付けます。

Webページでの利用−ホームページビルダーで編集−

  1. 「ファイルの挿入」ボタンから「Flashファイル」を選択します。
  2. 「開く」ウィンドウが表示されるので、挿入するSWFファイルを選択して「開く」ボタンを押します。
  3. ページ画面上に代用の画像が表示されるので、ドラッグして大きさや場所を変更します。

Webページを保存する際に、使用したSWFファイルも保存するように指示が出ます。SWFファイル名が半角でなかった場合には、半角にしてください。

ホームページビルダーの「プレビュー」表示で確認すると、Flashの部分が正しく再生されないので、Flashの動作を確認したい場合には、 保存したHTMLファイルをブラウザで開いて確認してください。

課題

Flashアニメーションを制作し、Qs棟サーバーで公開せよ。

  • 背景を作ること。写真などの画像を取り込んでもかまわない。
  • シンボルを作成し、モーショントゥイーンで動かすこと。
  • シンボル内にも動きをつけるのが望ましい。
  • シェイプトゥイーンで形を変化させたものを入れること。
  • ただ映像を作るのではなく、何かを表現すること。
  • SWFファイルを入れるページ内に何を表現したのかを文章で記述すること。