Flashエクスポートの技術的探求 その3

カスタムテンプレートによる書き出し

書き出しの実行

実際にこのテンプレート(「cdr_flash.htm」ファイル)を使用するには、以下の手順でFlashを書き出します。

「cdr_flash.htm」によるFlashの書き出し
  1. 「cdr_flash_template.zip」ファイルをダウンロードし解凍、「cdr_flash.htm」ファイルを取り出す
  2. メニューバー「ファイル」-「Webへの書き出し」-「HTMLFlash形式で埋め込み」をクリック、「エクスポート」ダイアログを開く
  3. 「保存する場所」リストボックスで保存先フォルダを指定
  4. 「ファイル名」テキストボックスにファイル名を半角英数字で入力(註4
    ファイル名の入力
  5. 「エクスポート」をクリック、「Flashのエクスポート」ダイアログを開く
    「一般」タブのオプションについての手順は省略します。それぞれ、必要な設定を行ってください。
  6. HTML」タブをクリック
    「HTML」タブ
  7. Flash HTMLのテンプレート」の「参照」ボタンをクリック、「ファイルを開く」ダイアログを開く
    「参照」ボタン
  8. 「ファイルの場所」リストボックスから「cdr_flash.htm」ファイルを解凍したフォルダを選択
  9. 「cdr_flash.htm」を選択
  10. 「開く」をクリック
    「イメージサイズ」や他のオプションについての手順は省略します。それぞれ、必要な設定を行ってください。
  11. 「OK」をクリック、SWFファイルとHTMLファイルを書き出し

書き出されたHTMLファイルでは、Flashが表示されるかどうかを確認できるように、scriptタグを使っているのですが、このままでは、Internet Explorerの仕様変更を回避できません。スクリプトは、HTMLファイルとは別のファイルに書き込まなければならないからです。

スクリプトファイルの作成

そこで、スクリプト自体のソースを切り取り、JavaScriptファイル(jsファイル)に保存します。

外部スクリプトファイルの作成
  1. 書き出されたHTMLファイルをメモ帳で開く(註5
  2. 14行目(function loadSwf$TI() {)から31行目(})までの文字列をドラッグして選択
    切り取り部分
  3. [Ctrl]+[X]キーを押して選択部分を切り取る
  4. 12行目(<script type="text/javascript"> //←このタグは削除する)から16行目(//このタグは削除する→ </script>)までの文字列をドラッグして選択
    削除部分
  5. [Delete]キーを押して選択部分を削除
  6. [Ctrl]+[S]キーを押してHTMLファイルを上書き保存
  7. [Ctrl]+[N]キーを押して新規文書を作成
  8. [Ctrl]+[V]キーを押して、手順3で切り取った文字列を貼り付け
    貼り付けられたテキスト
  9. [Ctrl]+[S]キーを押して「名前を付けて保存」ダイアログを開く
  10. 「保存する場所」でHTMLファイルと同じフォルダを指定
  11. 「ファイルの種類」リストボックスをクリック、「すべてのファイル」を選択
  12. ファイル名に「○○○.js」と拡張子まで入力
    「ファイルの種類」を指定してファイル名を入力
    「○○○」はHTMLファイルと同じ名前を入力します。HTMLファイルが「sample.htm」なら「sample.js」と入力してください。
  13. 「保存」をクリック、JavaScriptファイルを保存
手順2~3でスクリプトファイル用に切り取る範囲

function loadSwfsample() {
	var tag1 ='<object ';
	var cId = 'classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000"';
	var cBase = 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"';
	var ti = 'id="sample"'; //parameter for ID
	var wi = 'width="760"'; //parameter for weight
	var he = 'height="420"'; //parameter for height
	var odt = 'data="sample.swf"'; //parameter for data in object tag
	var tag2 = '>';
	var po = '<PARAM name=movie value="sample.swf"><PARAM name=wmode value=transparent><PARAM name=align value=default><PARAM name=quality value=best>'; //parameter for object tag
var tag3 = '<embed '; var pe = 'src= "sample.swf" quality=best wmode=transparent align=default'; //parameter for embed tag var tp = 'type="application/x-shockwave-flash"'; var pgn = 'pluginspage="http://www.macromedia.com/go/getflashplayer"'; var tag4 = '</embed>'; var tag5 = '</object>'; document.getElementById("loadSwfsample").innerHTML = tag1 + cId + cBase + ti + wi + he + tag2 + po + tag3 + pe + wi + he + tp + pgn + tag4 + tag5 }

緑字CorelDRAWによって書き込まれた部分

手順5~6でHTMLファイルに残る部分

<html> 
<head>
<title>sample</title>
<style type="text/css">
body {
	background-color: #FFFFFF; 
}
</style>
<script type="text/javascript" src="sample.js"></script>
</head>
<body onLoad="loadSwfsample();">

<div id="loadSwfsample"></div>

</body>
</html>
					

緑字CorelDRAWによって書き込まれた部分

たとえば、CorelDRAWで「sample」という名前を付けた文書から、Flashの書き出しを行った場合、上記手順を終えると、同じフォルダ内に次の3つのファイルが揃うことになります。

  • sample.swf
    Flash画像ファイル。CorelDRAWが作成
  • sample.htm
    HTMLファイル。CorelDRAWが作成、書き出し後にユーザーが編集
  • sample.js
    JavaScriptファイル。ユーザーがHTMLファイルから作成

この三位一体で、ActiveX仕様変更問題を回避したFlash画像の表示が実現されます。

なお、HTML内には、上記手順4~5で削除したscriptタグの他に、もうひとつのscriptタグをあらかじめ書き込んであります。


<script type="text/javascript" src="$TI.js"></script>
					

この部分で、外部スクリプトファイルとリンクされます。src属性値の中に「$TI.js」という記号を使っているので、HTMLファイルと同じ名前でJavaScriptファイルを保存しさえすれば、リンクは確立されます。

まとめ

3つのファイルが初めから生成される、という芸当は、さすがに私にはできません。しかし、このテンプレートを使うことで、ある程度は、スクリプト作成作業を簡略化できるのではないかと思います。

CorelDRAWはさまざまなカスタマイズができますが、こうしたテンプレートなども、少し機能を探求していけば、手を加えられるようになります。そこが、CorelDRAWの素晴らしいところでもあります。

もちろん、この記事の内容を理解するには、ある程度、JavaScriptの知識が必要になります。手っ取り早く、このテンプレートファイルを使用して中身については考えない――という方法もありますが、これを機会に、JavaScriptHTMLCSS等にも探求の手を伸ばしてみてください。

関連ファイルのダウンロード

解説で使用したFlash HTMLテンプレートファイルは、以下のリンクからダウンロードできます(註6)。ファイルは、ZIP形式で「cdr_flash_template.zip」ファイルに圧縮してあります。

Flash HTMLテンプレートファイルのダウンロード

上記のファイル名をクリックすると、ダウンロードできます。

なお、DOMを使用せず、「doument.write」メソッドで記述したテンプレートファイルも作成してみました。ファイル名は

  • cdr_flash2.htm

です。このファイルも、「cdr_flash_template.zip」ファイルに同梱してあります。

「cdr_flash2.htm」ファイルの使用方法は、「cdr_flash.htm」とほぼ同じです(註7)。外部ファイル用に切り取る部分は、テンプレートファイル内のコメント文を参考にしてください。


記事内のナビゲーション
記事中の各見出しは、クリックすると「目次」(Contents)に戻ることができます。「目次」の各項目は、クリックすると記事内の見出しに移動できます。
目次とそのリンクは、JavaScriptによって自動的に生成しているため、JavaScriptを無効にしている場合、機能しなくなります。

脚注
註4
ファイル名は、必ず半角英数字を使用してください。また、全角/半角を問わず、スペースを入れないでください。一般的なInternetベースの制限の他に、このファイル名をJavaScriptの関数名にも使用するので、この規則に準じていないとJavaScriptが動作しなくなります。
註5
HTMLファイルをメモ帳で開く場合には、①メモ帳を起動し、そのウインドウ上にHTMLファイルのアイコンをドラッグする、②HTMLファイルのアイコンを右クリックし、コンテキストメニューの「プログラムから開く」-「Notepad」をクリックする、といった方法があります。
註6
当サイトの利用規則を承諾された方にのみ、ダウンロードを許可します。ファイルの再配布は、お断りします。また、これらのスクリプトは各自の責任でご利用ください。これらのスクリプトによって発生したいかなる損害に対しても、当サイトおよび制作者(黒住浩司)は責任を負いません。
註7
「cdr_flash2.htm」の場合、書き出されたHTMLファイルを開いてもFlash画像は表示されません。JavaScriptファイルを保存した後に、表示されるようになります。