alivepdf – Project Hosting on Google Code

AIRなら単体でのPDF出力も可能なようですが、SWFファイルからだと単体では無理で、サーバー側にファイル出力用（？）のphpプログラムを設置する必要があるようです。ただ、そのphpプログラムも提供されていたので、とりあえず単純なプログラムを組んで試してみました。

試しに組んでみたファイルのドキュメントクラスは以下の通り。

package  {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import org.alivepdf.colors.RGBColor;
	import org.alivepdf.display.Display;
	import org.alivepdf.fonts.CoreFont;
	import org.alivepdf.fonts.FontFamily;
	import org.alivepdf.fonts.Style;
	import org.alivepdf.images.ImageFormat;
	import org.alivepdf.layout.Layout;
	import org.alivepdf.layout.Orientation;
	import org.alivepdf.layout.Size;
	import org.alivepdf.layout.Unit;
	import org.alivepdf.pdf.PDF;
	import org.alivepdf.saving.Download;
	import org.alivepdf.saving.Method;
	import utils.Utils;

	/**
	 * ...
	 * @author bricoleur.inc / Tonpoo.com
	 */
	public final class AlivePDFSample extends MovieClip{

		public function AlivePDFSample() {
			this.stage.addEventListener(MouseEvent.MOUSE_DOWN, onClick, false, 0, true);
		}
		private function onClick(e:MouseEvent):void {
			//PDFインスタンスを生成
			var myPDF:PDF = new PDF(Orientation.PORTRAIT, Unit.MM, Size.A4);
			//PDFの表示モードを指定
			myPDF.setDisplayMode(Display.FULL_PAGE, Layout.SINGLE_PAGE);
			//PDFのページを追加
			myPDF.addPage();

			//文字色を設定
			myPDF.textStyle ( new RGBColor ( 0xFF0000 ) );
			//フォントサイズを指定
			myPDF.setFontSize ( 18 );
			//ページの位置（？）を指定
			myPDF.setXY( 10, 40 );
			//マルチセルの追加
			myPDF.addMultiCell ( 300, 1, "This is my PDF Headline" );

			//PDFの出力
			myPDF.save(Method.REMOTE, "http://www.tonpoo.com/_test/create.php", Download.ATTACHMENT, "sample.pdf");
		}
	}
}

PDFインスタンスを生成

//PDFインスタンスを生成
var myPDF:PDF = new PDF(Orientation.PORTRAIT, Unit.MM, Size.A4);

まずはnew演算子でPDFインスタンスを生成。引数には「印刷方向」「単位」「印刷サイズ」「印刷角度」を指定できます。何も指定しなくてもいいようですが、サンプルでは「印刷角度」以外を指定してます。

印刷方向

• Orientation.LANDSCAPE：横向き
• Orientation.PORTRAIT：縦向き

単位

• Unit.CM：センチメートル
• Unit.INCHES：インチ
• Unit.MM：ミリメートル
• Unit.POINT：ポイント

印刷サイズ

• Size.A3：A3
• Size.A4：A4
• Size.A5：A5
• Size.LEGAL：リーガル
• Size.LETTER：レター
• Size.TABLOID：タブロイド

「印刷サイズ」でA4やA5の他にレターやリーガルがあるあたりは欧米の紙サイズが基準になってるためですね。B4やB5など上記に無いサイズを指定する場合は・・・どうしたらいいんでしょ。

PDFの表示モードを指定

//PDFの表示モードを指定
myPDF.setDisplayMode(Display.FULL_PAGE, Layout.SINGLE_PAGE);

次に出力したPDFファイルを開いたときの表示モードをPDF.setDisplayModeで指定。引数には「ズーム」「レイアウト」「モード」「拡大率」を指定できます（サンプルでは「ズーム」と「レイアウト」のみ指定）。

ズーム

• Display.DEFAULT：デフォルト
• Display.FULL_PAGE：ページ全体を表示
• Display.FULL_WIDTH：ページ幅を基準に表示
• Display.REAL：よくわからない。100%表示ってこと？

レイアウト

Layout.SINGLE_PAGEが「単一ページ」のことだろうと思うんですが、他の値（Layout.ONE_COLUMN / Layout.TWO_COLUMN_LEFT / Layout.TWO_COLUMN_RIGHT / Layout.TWO_COLUMN_RIGHT / Layout.TWO_PAGE_LEFT）については試してないのでよく分かりません。おそらく複数ページ同時表示とかだと思うんですが・・・。

拡大率

数値で拡大率を指定できるようです。

PDFのページを追加

//PDFのページを追加
myPDF.addPage();

次に、PDF.addPage()メソッドを使ってページを追加します。単純にこのaddPageメソッドを例えば10回繰り返すと、空のページ10ページで構成されるPDFファイルができます。

テキストの追加

//文字色を設定
myPDF.textStyle ( new RGBColor ( 0xFF0000 ) );
//フォントサイズを指定
myPDF.setFontSize ( 18 );
//ページの位置（？）を指定
myPDF.setXY( 10, 40 );
//マルチセルの追加
myPDF.addMultiCell ( 300, 1, "This is my PDF Headline" );

まずはPDF.textStyleメソッドで文字色を指定。引数には色指定の他にも下記のオプションが指定できますが、今回は割愛。

文字色

colors.IColorクラスというのがあって、そのクラスオブジェクトを指定するようです。とりあえずサンプルに従ってcolors.RGBColorインスタンスを指定してみました。

透過率

0～1の数値（Number）で文字の透過率を指定できます。

レンダリングモード

整数値（int）を指定する事でテキストレンダリングモードを指定できるそうですが、なんのことやら・・・。

単語間スペース

数値（Number）で単語間のスペースの値を指定できます。

文字間スペース

数値（Number）で文字間のスペースの値を指定できます。

スケール

数値（Number）で、Text scalingが指定できます。Text scalingって何でしょう・・・

行間

数値（Number）で行間を指定できます。

次にPDF.setFontSizeメソッドでフォントサイズを設定します。引数には整数値（int）が入ります。

次にPDF.setXYメソッドでページ内のX,Y位置を指定します。これって、要はこの後に配置するマルチセルの配置位置、って認識でいいんですかね・・・。

でもってその後にPDF.addMultiCellメソッドでテキストを含むセルを配置します。まだよくわかってないんですが、どうやらこの「セル」というのがPDFのページ内にいろいろ配置する単位のような感じなんですかね。引数には「幅」「高さ」「テキスト」「ボーダー」「横揃え」「塗り（？）」を指定できるようです。

PDFの出力

//PDFの出力
myPDF.save(Method.REMOTE, "http://www.tonpoo.com/xxxxxxxxx/create.php", Download.ATTACHMENT, "sample.pdf");

最後に、PDF.saveメソッドを使って内容を出力します。引数に指定できるのは「データ送信形式」「送信先URL」「ダウンロード形式」「ファイル名」「表示フレーム名」です。

データ送信形式

サーバー側にデータを送信してPDFを生成する場合はMethod.REMOTE、AIRを使った場合などでローカル側のみでPDFを生成する場合はMethod.LOCALを指定するようです。

送信先URL

Method.REMOTEの場合に、送信先のphpファイルのURLをここで指定します。

ダウンロード形式

PDFをブラウザ内で表示する場合はDownload.INLINE、保存ダイアログを出して保存させる場合はDownload.ATTACHMENTを指定します。

ファイル名

pdfファイルのファイル名を指定します。

表示フレーム名

フレーム内で展開されているコンテンツの場合に、PDFを開く先のフレーム名を指定する、ようです。

ちなみにサーバー側に設置するphp（create.php）のサンプルファイルは、前バージョンのAlivePDFのソースコード一式の中に入っていたものを流用しました。

<?php

$method = $_GET['method'];
$name = $_GET['name'];

if ( isset ( $GLOBALS["HTTP_RAW_POST_DATA"] )) {

	// get bytearray
	$pdf = $GLOBALS["HTTP_RAW_POST_DATA"];

	// add headers for download dialog-box
	header('Content-Type: application/pdf');
	header('Content-Length: '.strlen($pdf));
	header('Content-disposition:'.$method.'; filename="'.$name.'"');
	echo $pdf;

}  else echo 'An error occured.';

?>

とりあえず実際にアップして確認した所、PDFファイルが生成されてダウンロードできることを確認できました。次は任意のMovieClipの内容などをそのまま出力する方法とかですね。

feb19.jp blog – SWFWheelを使う

導入したライブラリはSWFWheelです。実際の導入フローは以下の通り：

SWFWheel.asのダウンロード

まずはasファイルのダウンロード。Spark projectのSWFWheelのページの「ソースコードはこちら」または「リポジトリブラウザで閲覧」からディレクトリを掘っていってSWFWheel.asを見つけてダウンロード。めんどくさい人は以下のリンクを右クリック→「名前を付けて保存」で。

http://www.libspark.org/svn/as3/SWFWheel/trunk/src/org/libspark/ui/SWFWheel.as

SWFWheel.asの配置

ダウンロードしてきたSWFWheel.asはそのまま配置するのではなく、適切なフォルダを作ってその中に配置する。例えば以下のようなフォルダ構成になっていた場合：

/project/fla/

flaファイルの格納フォルダ

/project/as/

クラスファイル（asファイル）の格納フォルダ

/project/deploy/

swfファイルやhtmlファイルの格納フォルダ

/project/as/フォルダの中に「org」フォルダを作成。その中に「libspark
」フォルダを作成。その中にさらに「ui」フォルダを作成し、その中に配置する。実際に作業するflaファイルやそのドキュメントクラス、公開用のhtmlファイルやjsファイルも含めると、全体の構成は以下のようになる。

/project/fla/

flaファイルの格納フォルダ

/project/fla/main.fla

メインのflaファイル

/project/as/

クラスファイル（asファイル）の格納フォルダ

/project/as/Main.as

main.flaのドキュメントクラス

/project/as/org/libspark/ui/SWFWheel.as

SWFWheel.asの配置場所

/project/deploy/

swfファイルやhtmlファイルの格納フォルダ

/project/deploy/main.swf

main.flaの出力ファイル

/project/deploy/main.html

main.swfを表示するhtmlファイル

/project/deploy/js/swfobject.js

swfファイルをhtmlファイルに埋め込むためのJavaScriptライブラリ

HTML側の調整

今回はSWFObject2を使った想定なので、SWFObject 2 HTML and JavaScript ジェネレーター v1.2を使って埋め込みコードを生成。その際、以下の点をチェックする。

• 「Flashコンテンツのid」と「属性：name」を設定する。
• 「Flashコンテンツのid」と「属性：name」の値は同一のものにする。
• allowscriptaccessの値をalwaysにする。

できたサンプルソースは以下の通り。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta http-equiv="Content-Script-Type" content="text/javascript;" />
		<script type="text/javascript" src="js/swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {};
			params.allowscriptaccess = "always";
			var attributes = {};
			attributes.id = "flashAreaContent";
			attributes.name = "flashAreaContent";
			swfobject.embedSWF("main.swf", "myAlternativeContent", "800", "600", "9.0.0", false, flashvars, params, attributes);
		</script>
	</head>
	<body>
		<div id="myAlternativeContent">
			<a href="http://www.adobe.com/go/getflashplayer_jp">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</body>
</html>

SWFWheelクラスのインポートと初期化

ではドキュメントクラスMain.asの記述開始。まずはSWFWheelのインポートと初期化。初期化に使うのはSWFWheel.initializeメソッドで、引数としてステージへの参照を渡す。

package  {
	import flash.display.MovieClip;
	import org.libspark.ui.SWFWheel;

	public class Main extends MovieClip{
		public function Main() {
			SWFWheel.initialize(this.stage);	//SWFWheelの初期化。引数としてステージへの参照を渡す。
		}
	}

}

マウスホイールイベントの検出

次に実際にマウスホイールイベントを検出してみる。マウスホイールイベントのハンドラメソッドで受け取るMouseEventのdeltaプロパティというのがマウスホイールを 1 目盛り回すごとにスクロールする行数を示すそうなので、試しにtraceさせてみる。

package  {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import org.libspark.ui.SWFWheel;

	public class Main extends MovieClip{
		public function Main() {
			SWFWheel.initialize(this.stage);
			this.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel, false, 0, true);
		}
		private function onMouseWheel(e:MouseEvent):void {
			trace("onMouseWheel:", e.delta);
		}
	}
}

出た出た。あとはこの値を使って具体的な処理を追加するだけですね。Macで動くかどうかは一通りのファイルをサーバーにアップして確認。で、きちんと動きました。これで問題ありません！

が、フィルターやグラデーションマスクといった機能、サイズ（ファイルサイズではなく、width x heightのサイズ）の大きな画像やオブジェクトに対しては効きません。具体的には、対象となるオブジェクトのwidthまたはheightが2880ピクセルを超過すると、こうした機能が無効になります。

で、その詳しい理由については下記のURLが詳しい：

Flash 8 のイメージ API の概要 | デベロッパーセンター

該当する部分の引用：

メモ : Flash Player では、ビットマップの最大サイズは幅、高さいずれも 2880 ピクセルに制限されています。この制約よりも大きい BitmapData インスタンスを作成しようとすると、ビットマップは作成されません。これは、クライアントの RAM を使い切るような Flash ムービーを作成できないようにするために設定されています。2880 × 2880 ピクセルのビットマップには、約 32 MB 程度の RAM が必要です。

残念ながらFlashPlayer10でもまだこの点についての変更は無い模様。なぜこの記事を書いてるかというと、今現在この問題で引っかかってるため。さて、どうして回避したものか・・・。

＜追記＞

kaedeさんからコメントで情報いただきましたが、FlashPlayer10からはBitmapDataサイズの制限が拡大されていますね。

BitmapData – ActionScript 3.0 言語およびコンポーネントリファレンス

当該部分を引用：

AIR 1.5 および Flash Player 10 では、BitmapData オブジェクトの最大サイズは幅または高さが 8,192 ピクセルで、ピクセルの総数は 16,777,216 を超えないようにする必要があります（したがって、BitmapData オブジェクトの幅が 8,192 ピクセルの場合、高さは 2,048 ピクセル以下にする必要があります）。Flash Player 9 以前および AIR 1.1 以前では、高さの制限は 2,880 ピクセル、幅の制限は 2,880 ピクセルです。幅または高さに 2880 より大きい値を指定すると、新しいインスタンスは作成されません。

なるほど、8192 x 8192ピクセル、ってのはダメなんですね。で、改めて今回作業してるファイルを見ると、cacheAsBitmapかけようと思ったインスタンスの横幅が9600ピクセル・・・。そ、そりゃあダメですよね。

as3で他ページへのリンクを実装する場合、通常はnavigateToURLメソッドが使われます。

package {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.net.navigateToURL;
	import flash.net.URLRequest;

	public class Main extends MovieClip {
		btn.addEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);
	}

	public var btn:MovieClip;

	public function onBtnClick(e:MouseEvent):void {
		var url:String = "http://www.tonpoo.com/";
		var req:URLRequest = new URLRequest(url);
		navigateToURL(req, "_self");
	}
}

上記はリンク先を同じウィンドウで表示する場合の例。別ウィンドウで表示させる場合は、navigateToURLの行が以下のようになります。

navigateToURL(req, "_blank");

さて、通常であればこれで問題ないのですが、swfファイルをhtml上に埋め込むための設定で、wmodeの値を“transparent”や“opaque”にしていた場合、この方法でリンクボタンの設定をすると、IEで実行した時にポップアップブロックの警告が出てしまい、すんなりリンク先を開く事ができなくなります。

※wmode=”window”の場合は問題ないようです。

さてどうするかということで参考になるのが下記の記事。

IEのポップアップブロックのブロック | エントリー | _level0.KAYAC

ExternalInterfaceを使って、JavaScriptのwindow.openを直接実行するわけですね。となると当然、wmode=”transparent”の他に、allowscriptaccess=”always”にする必要が出てきます。

ということで出来たHTML側のテンプレ（swfobject使用）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>サンプル</title>
		<meta http-equiv="Content-Script-Type" content="text/javascript;" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {};
			params.wmode = "transparent";
			params.allowscriptaccess = "always";
			var attributes = {};
			swfobject.embedSWF("sample.swf", "myAlternativeContent", "800", "600", "9.0.0", false, flashvars, params, attributes);
		</script>
	</head>
	<body>
		<div id="myAlternativeContent">
			<a href="http://www.adobe.com/go/getflashplayer_jp">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</body>
</html>

SWF側のドキュメントクラスの例：

package {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.external.ExternalInterface;

	public class Main extends MovieClip {
		btn.addEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);
	}

	public var btn:MovieClip;

	public function onBtnClick(e:MouseEvent):void {
		var url:String = "http://www.tonpoo.com/";
		ExternalInterface.call("window.open",url,"");
	}
}

URLRequestの設定をする必要がない分、navigateToURLを使った場合よりも記述がシンプルになっているのが面白いですね。個人的にはwmode=”transparent”はあまり使いたくない設定なのですが、コンテンツの仕様上使わざるを得ない事も多いので、忘れないでいたいと思います。

var obj1:Object = new Object();
obj1.name = "John";
obj1.birth = 1940;
obj1.part = "guitar";
trace(obj1.name);	//出力：John

次に、このオブジェクトのコピーを作成し、一部のプロパティを変更するために、以下のスクリプトを実行する。

var obj2:Object = obj1;
obj2.name = "George";
obj2.birth = 1943;
trace(obj1.name, obj2.name);	//出力：George George

すると、コピー先（obj2）だけでなく、コピー元（obj1）のプロパティまでも変更されてしまっている。

これは、obj2 = obj1; としたとき、obj1をコピーしているのではなく、obj1への参照を作成しているにすぎないためである。

・・・というのは実は配列でも同じ事がおこる。で、配列の場合はArray.sliceメソッドを使う事でコピーを作る事ができる（参考：TONPOOBLOG » 配列の（浅い）コピー）んだけど、オブジェクトのコピーを作る時はどうするか？

これまではfor…inを使ってプロパティをコピーしていました。

var obj2:Object = new Object();
for (var name:String in obj1) {
	obj2[name] = obj1[name];
}
obj2.name = "George";
obj2.birth = 1943;
trace(obj1.name, obj2.name);	//出力：John George

ところが、flash-jpの以下のスレッドでByteArrayクラスというのがあることを発見。

FLASH-JP.COM – フォーラム Re: SharedObjectで任意のデータを保存したい

早速ヘルプを参照。

ByteArray – ActionScript 3.0 コンポーネントリファレンスガイド

よくわからないけど、こういうことかな？

//ByteArrayインスタンスを生成
var myByteArray:ByteArray = new ByteArray();
//コピー元ObjectのバイナリデータをByteArrayインスタンスに書き込み
myByteArray.writeObject(obj1);
//ByteArrayインスタンスのデータをコピー先Objectに読み込み
var obj2:Object = myByteArray.readObject();

と思ったら、以下のエラーが。

Error: Error #2030: ファイルの終端 (EOF) が検出されました。
at flash.utils::ByteArray/readObject()
at Sample()

どうやら、先のflash-jpのnekoyukiさんの投稿にもあったように、一度ByteArray.compress→ByteArray.uncompressしないとダメなようですね。

わざわざ圧縮→解凍などという手間をかけずとも、ByteArray.positionプロパティの値を0にし、ByteArrayのファイルポインタの位置を先頭に戻すことで対応できました！（flash-jpのスレッドでの野中先生のレスから判明しました。野中先生ありがとうございます！）

//ByteArrayインスタンスを生成
var myByteArray:ByteArray = new ByteArray();
//コピー元ObjectのバイナリデータをByteArrayインスタンスに書き込み
myByteArray.writeObject(obj1);
//ByteArrayのファイルポインタの位置を先頭に移す
myByteArray.position = 0;
//ByteArrayインスタンスのデータをコピー先Objectに読み込み
var obj2:Object = myByteArray.readObject();

trace(obj2.name, obj2.birth, obj2.part);	//出力：John 1940 guitar

となると、同じくflash-jpのnekoyukiさんの書いたように、メソッドにしてしまったほうが楽そうです。配列のコピーにも使えますしね。ということでできあがったサンプル用のドキュメントクラス（Sample.as）は以下の通り。

package  {
	import flash.display.MovieClip;
	import flash.utils.ByteArray;

	public class Sample extends MovieClip{

		public function Sample() {
			var obj1:Object = new Object();
			obj1.name = "John";
			obj1.birth = 1940;
			obj1.part = "guitar";

			var obj2:Object = byteCopy(obj1);
			obj2.name = "George";
			obj2.birth = 1942;
			trace(obj1.name, obj2.name);	//出力：John George

			var array1:Array = ["John", "Paul", "George", "Ringo"];
			var array2:Array = byteCopy(array1);
			array2[3] = "Stuart";
			trace(array1);	//出力：John,Paul,George,Ringo
			trace(array2);	//出力：John,Paul,George,Stuart
		}

		//バイナリデータのコピーメソッド
		public function byteCopy(objFrom:*):*{
			//ByteArrayインスタンスを生成
			var myByteArray:ByteArray = new ByteArray();
			//コピー元ObjectのバイナリデータをByteArrayインスタンスに書き込み
			myByteArray.writeObject(objFrom);
			//ByteArrayのファイルポインタの位置を先頭に移す
			myByteArray.position = 0;
			//ByteArrayインスタンスのデータを返す
			return myByteArray.readObject();
		}
	}
}

Lightboxを入手

まず使用するLightboxのバージョンは2.04。Lokesh Dhakar氏によるLightbox 2の公式サイトで入手。

ベースHTMLの作成

次にベースとなるHTMLを作成。今回はとりあえずSWFObject 2 HTML and JavaScript ジェネレーターを使ってサクっと作りました。ポイントとしては、「SWFの定義」のオプションを一部変更すること。

まず、Lightboxを表示した際に、swfコンテンツが上に来てしまうのを避けるため、wmodeをtransparentに設定。また、ExternalInterfaceクラスを使うので、allowscriptaccessをalwaysに設定。できあがったHTMLは下記の通り：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta http-equiv="Content-Script-Type" content="text/javascript;" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {};
			params.wmode = "transparent";
			params.allowscriptaccess = "always";
			var attributes = {};
			swfobject.embedSWF("sample.swf", "myAlternativeContent", "800", "600", "9.0.0", false, flashvars, params, attributes);
		</script>
	</head>
	<body>
		<div id="myAlternativeContent">
			<a href="http://www.adobe.com/go/getflashplayer_jp">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</body>
</html>

Lightbox用のライブラリを組み込み

上記のベースHTMLのheadセクションに、Lightbox動作のためのjsファイルとcssファイルを組み込む下記の記述を追加。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Lightboxを起動させるJavaScriptメソッドを追加

Lightboxを直接起動させるJavaScriptのメソッドがないので、下記ページを参考にそのためのメソッドを追加。

Execute Lightbox Scripts From Flash at Codefidelity
（情報元：Flash から Lightbox を起動する方法 – minorio のプログラミング・メモ）

具体的に追加する内容は下記の通り。

<script type="text/javascript">
function LightboxDelegate(url,caption) {
	var objLink = document.createElement('a');
	objLink.setAttribute('href',url);
	objLink.setAttribute('rel','lightbox');
	objLink.setAttribute('title',caption);
	Lightbox.prototype.start(objLink);
}
</script>

最終的にできあがったhtmlは下記の通り。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta http-equiv="Content-Script-Type" content="text/javascript;" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript" src="js/prototype.js"></script>
		<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
		<script type="text/javascript" src="js/lightbox.js"></script>
		<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
		<script type="text/javascript">
			//swfobject関係
			var flashvars = {};
			var params = {};
			params.wmode = "transparent";
			params.allowscriptaccess = "always";
			var attributes = {};
			swfobject.embedSWF("sample.swf", "myAlternativeContent", "600", "400", "9.0.0", false, flashvars, params, attributes);
			//LightboxDelegate関係
			function LightboxDelegate(url,caption) {
				var objLink = document.createElement('a');
				objLink.setAttribute('href',url);
				objLink.setAttribute('rel','lightbox');
				objLink.setAttribute('title',caption);
				Lightbox.prototype.start(objLink);
			}
		</script>
	</head>
	<body>
		<div id="myAlternativeContent">
			<a href="http://www.adobe.com/go/getflashplayer_jp">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</body>
</html>

ExternalInterfaceで呼び出し

次はFlash側の用意。sample.flaというファイル（ActionScript3）を用意、ステージ上にボタン用のMovieClipインスタンスを３つ配置し、それぞれbtn0, btn1, btn2という名前を付ける。sample.flaのドキュメントクラスとしてSampleクラスを指定。Sample.asの内容は下記の通り。

package {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.external.ExternalInterface;

	public class Sample extends MovieClip{
		public function Sample() {
			//Lightbox用の設定
			lightboxArray = new Array();
			lightboxArray[0] = {
				src:"images/photo0.jpg",
				caption:"写真その0"
			};
			lightboxArray[1] = {
				src:"images/photo1.jpg",
				caption:"写真その1"
			};
			lightboxArray[2] = {
				src:"images/photo2.jpg",
				caption:"写真その2"
			};
			//ボタンの設定
			for (var i:uint = 0; i < 3; i++) {
				var btn:MovieClip = this["btn" + i];
				btn.id = i;
				btn.buttonMode = true;
				btn.addEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);
			}
		}

		public var lightboxArray:Array;
		public var btn0:MovieClip;
		public var btn1:MovieClip;
		public var btn2:MovieClip;

		//ボタン用メソッド
		public function onBtnClick(e:MouseEvent):void {
			var btn:MovieClip = e.target as MovieClip;
			var id:uint = btn.id;
			var src:String = lightboxArray[id].src;
			var caption:String = lightboxArray[id].caption;
			//LightboxDelegateメソッドを呼び出し
			ExternalInterface.call("LightboxDelegate",src,caption );
		}
	}
}

これで完成！

オマケ：IE7～8でのLightboxの表示バグフィックス

Lightboxを使った縦に長いページをIEで閲覧した場合、ページをスクロールしてからLightboxを起動すると、Lightboxの背景（黒い透過）部分が途中で切れてしまう。これを回避するためにとりあえずやったのがlightbox.cssの改造。具体的には#overlayのpositionをabsoluteからfixに変更（+IE6ではおかしくなってしまうので、スターハックを使ってabsoluteのまま）部分を下記のようにしました。

#overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
}
* html #overlay {
	position: absolute;
}

以上、備忘録もかねて参考までに。

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
	<allow-access-from domain="*" secure="true" />
</cross-domain-policy>

でもって、swfの方から上記サーバーのrss（http://www.sample.server/rss.php）を読み込んだ所、問題ナシ！

続けて、JPEGファイルを読み込み、BitmapData.draw()で描画しようと思った所：

セキュリティサンドボックス侵害 : BitmapData.draw:http://www.tonpoo.com/hogehoge/foobar.swf は http://www.sample.server/images/photo.jpg にアクセスできません。ポリシーファイルが必要ですが、このメディアがロードされたとき、checkPolicyFile フラグが設定されませんでした。

あれえええええ？

おかしいなと思って調べてみたら、出てきた：

AS で別ドメインの画像を読み込むときの注意点 – てっく煮ブログ

クロスドメインポリシーファイルは設置してるけどなあ、と思いながら読んでいると下記の記述：

これ以外に、Security.loadPolicyFile() メソッドを使って、事前に読み込んでおく方法もある。

これだこれだ！というわけで早速リファレンスを参照。

Security – ActionScript 3.0 コンポーネントリファレンスガイド

でもって下記の記述を追加（www付きの場合とナシの場合と両方対応するように両方を併記）。

Security.loadPolicyFile("http://sample.server/crossdomain.xml");
Security.loadPolicyFile("http://www.sample.server/crossdomain.xml");

そしたら無事解決！

crossdomain.xmlを用意しただけで安心してちゃいかんですね・・

・ECMAScript 第5版 承認 – スラッシュドット・ジャパン
・InfoQ: ECMAScript 5リリース

上記ページを読んでも正直よくわかんないんですが、前者の記事では

Microsoft/Yahooが主導するマイナーチェンジとバグフィックスが主のECMAScript 3.1と、 Adobe/Mozilla/Opera/Googleが主導する野心的な機能拡張である ECMAScript 4の間で対立があったが、 ECMAScript Harmonyと呼ばれる統合計画によって ES3.1をベースに ES4のサブセットを取り込む形で両者が合意した経緯がある。

・・・と書かれている一方、後者の記事では

ECMAScript 4を合理化しようという初期の試みは大失敗に終わった。結局、Adobe社のActionScriptだけが提案された変更点に対応しただけだった。

・・・と書かれています。これはつまり、
●ECMAScript本体の方は3.1をベースにES4の一部機能（仕様）を取り込むにとどまった。
●ES4に対応したのはActionScriptだけだった。
・・・というようなことなんでしょうか？

とりあえず、ActionScript次期バージョンへの影響が心配されます。AS3にやっと慣れてきた手前、この学習資産が無駄にならなきゃいいんだけど・・・。

btn_mc.addEventListener(MouseEvent.CLICK, onBtnClick);

これを、addEventListenerの5つめの引数をtrueにする（3つめはfalse、4つめは0）ことで、より効率的なメモリ管理を実現出来ます。

btn_mc.addEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);

詳しくは上条氏の下記記事を参照下さい。

イベントリスナ （AS3） とガーベジコレクション – akihiro kamijo

今回は「ステージのインスタンスを自動宣言」について。

例えばtest.flaのステージ上にmy_mcというインスタンス名のMovieClipインスタンスと、my_txtというTextFieldインスタンスがあったとします。

で、test.flaのドキュメントクラスとして、Testというクラスを設定しているとします。ステージ上にMovieClipとTextFieldを配置しているので、これらのクラスもimportしています。

package{
	import flash.display.MovieClip;
	import flash.text.TextField;

	class Test extends MovieClip {
		var my_mc:MovieClip;
		var my_txt:TextField;

		function Test() {

		}
	}
}

上記の状態でプレビューすると、以下のエラーが出ます。

1151: 定義 my_mc (名前空間 internal) にコンフリクトが存在します。
1151: 定義 my_txt (名前空間 internal) にコンフリクトが存在します。

この点についての説明は、野中先生の下記ページが詳しいです。

F-site | [AS3] オーサリング時に配置されたインスタンスの型指定

さて、上記に従って、クラスそのものと、ステージに配置済みのmy_mc、my_txtに対してpublic指定してみます。

package{
	import flash.display.MovieClip;
	import flash.text.TextField;

	public class Test extends MovieClip {
		public var my_mc:MovieClip;
		public var my_txt:TextField;

		function Test() {

		}
	}
}

「おお、これでＯＫ！」と思ってプレビューしてみると・・・

1151: 定義 my_mc (名前空間 internal) にコンフリクトが存在します。
1151: 定義 my_txt (名前空間 internal) にコンフリクトが存在します。

えええ！？まだかよ！？きちんとpublic指定してるのに！なんで？そう言えば前にもこんな事あったな。どうやったっけ・・・？？

・・・とパニクるなかれ、KAYACさんのブログの下記記事に書いてあります。

ステージのインスタンスを自動宣言するかどうか | エントリー | _level0.KAYAC

そう、諸悪の根源は「ステージのインスタンスを自動宣言」のオプションでした。

ここのチェックを外して、改めてプレビュー。すると・・・

エラーが無くなります！

ああよかった。それにしてもクラスベースで開発する場合、このオプションは邪魔ですね。KAYACさんのブログにあるように、宣言のないものだけ補完してくれたらいいのに・・・。