briccolog » Brightcoveの動画再生ができるけどUIが効かない？

briccolog » Brightcoveの動画をFlashコンテンツに読み込む

まだ制作用のPCにFlash CS5が入っていない（というか、CS4も入っていない。使ってるのはCS3です）ので、このままだとTLFが使えない。CS5はそのうち導入する予定だけど、取り急ぎFlashDevelop + Flex4SDKの組み合わせでなんとかならんか試してみます。

サンプルの入手

SourceForgeにAdobeがTLFのページを作っているので、そこからサンプルファイルをゲット。

Text Layout Framework / Dashboard

上記のページの上の方にある「Download examples.」というリンクをクリックして、サンプルファイル一式の詰まったzipファイルをダウンロード。解凍して出てくるのは「actionscript」「flex」という2つのフォルダ。「flex」の方はmxmlでの開発用なので、今回使うのは「actionscript」フォルダの方かな。

FlashDevelopで開く

FlashDevelopを立ち上げ、上部メニューから「プロジェクト＞プロジェクトをインポート」を選択。ダウンロードした「actionscript」フォルダの中にある「TextLayout¥.actionScriptProperties」を選択。

すると無事にプロジェクトが開いた！やった～。

早速Ctrl+Enterでプロジェクトをテスト。あれ？エラーが出る？？

C:¥Program Files¥FlashDevelop¥Tools¥flexsdk¥frameworks¥flex-config.xml(53): Error: unable to open ‘libs/player/9.0/playerglobal.swc’

む。FlashPlayerの書き出しバージョンの問題か？というわけで、FlashDevelopのプロジェクト設定の「書き出し」タブでプレーヤーのバージョンをFlashPlayer10に変更。

改めてプロジェクトをテスト。すると・・・おお、ビルド成功！！

swcの読み込み

さてさていろいろいじってみるか。・・・と思ったものの、あれ？TLF関係のクラスのコード補完が出ない？調べてみると、どうやらTLF関連のswcファイルを設定しないとコード補完などが使えない様子。というわけで、swcファイルを読み込みます。

FlashDevelopのインストール時にFlexSDKも一緒にインストールした場合、TLF関連のswcであるtextLayout.swcは、以下の場所にあります。

C:¥Program Files¥FlashDevelop¥Tools¥flexsdk¥frameworks¥libs¥textLayout.swc

というわけで、プロジェクト設定の「コンパイラー設定」タブを開きます。

で、「Advanced | 高度な設定」の中にあるSWC Librariesの行をクリックし、右端に表示されるボタンをクリックして出てくる「文字列コレクション　エディタ」のウィンドウに上記のパスをペースト。

すると、TLF関係のクラスに色がついて、コード補完も使えるようになりました！

ちなみにこのswcファイル、先程のSourceForgeのサイトからも落とせる模様。

File Manager – SourceForge Downloads

上記のDownload textLayout_build.zipと書いてある箇所をクリックすると、swcやらasやらドキュメントやらまとめて入ってるzipファイルがゲットできます。Looking for the latest version?と書いてあるから、ひょっとするとSDK付属のものとバージョンが違うのかな？

縦書きの表示

次に縦書き表示に挑戦。参考にしたのは下記のページ

feb19.jp blog – Flash CS5 を予習　～Text Layout Framework (TLF) 編～

先程のAdobeのサンプルに、feb19さんのコードを参考にしてコードを追加してみました。とりあえず縦書き表示させるために、TextFlow.directionプロパティとTextFlow.blockProgressionプロパティを設定。

////////////////////////////////////////////////////////////////////////////////<br />
//<br />
//  ADOBE SYSTEMS INCORPORATED<br />
//  Copyright 2008-2009 Adobe Systems Incorporated<br />
//  All Rights Reserved.<br />
//<br />
//  NOTICE: Adobe permits you to use, modify, and distribute this file<br />
//  in accordance with the terms of the license agreement accompanying it.<br />
//<br />
//////////////////////////////////////////////////////////////////////////////////</p>
<p>package {<br />
	import flash.display.Sprite;<br />
	import flash.text.engine.TextBaseline;<br />
	import flashx.textLayout.formats.BlockProgression;</p>
<p>	import flashx.textLayout.compose.StandardFlowComposer;<br />
	import flashx.textLayout.container.ContainerController;<br />
	import flashx.textLayout.elements.ParagraphElement;<br />
	import flashx.textLayout.elements.SpanElement;<br />
	import flashx.textLayout.elements.TextFlow;<br />
	import flashx.textLayout.formats.Direction;</p>
<p>	/** Simplest possible &quot;Hello, World&quot; text example */<br />
	public class HelloWorld extends Sprite<br />
	{<br />
		public function HelloWorld()<br />
		{<br />
			var textFlow:TextFlow = new TextFlow();<br />
			textFlow.locale = &quot;ja&quot;;<br />
			textFlow.direction = Direction.LTR;<br />
			textFlow.blockProgression  = BlockProgression.RL;</p>
<p>			var p:ParagraphElement = new ParagraphElement();<br />
			textFlow.addChild(p);</p>
<p>			var span:SpanElement = new SpanElement();<br />
			span.text = &quot;当帝の外戚の大臣一派が極端な圧迫をして源氏に不愉快な目を見せることが多くなって行く。つとめて冷静にはしていても、このままで置けば今以上な禍いが起こって来るかもしれぬと源氏は思うようになった。&quot;;<br />
			span.fontSize = 24;<br />
			p.addChild(span);</p>
<p>			textFlow.flowComposer.addController(new ContainerController(this, this.stage.stageWidth, this.stage.stageHeight));<br />
			textFlow.flowComposer.updateAllControllers();<br />
		}<br />
	}<br />
}

feb19さんのコードと比べると、一部のクラス名が変わっている模様（DisplayObjectContainerController → ContainerControllerとか）
んでテストしてみたのがこちら。

おお～。縦書きになってる！・・・けど、文末の句読点の位置おかしくね？ということで、その後feb19さんのページを参考にさらにコードをいくつか追加みたんですが、まだ解決せず。今後の課題ですな。とりあえず、縦書きが表示できたので今日のところは良しとします。
追記：解決しました。textFlow.directionの値がDirection.RTLだったのをDirection.LTRにしたら直りました。

ちょっと戸惑ったのはTextFlowインスタンス。これ、DisplayObjectじゃないんですね。じゃあどうやってステージ（など）に表示させてるんだろう？と思ったら、feb19さんの記事に書いてありました。

テキストを入れていったら、TextFlow.flowComposer.addController() で DisplayObejctContainer のツリーに参加させて、TextFlow.flowComposer.updateAllContainers() で内容を更新します。

なるほどー。TextFieldとは全く扱い方が違うんですね。これは早く慣れねば。

swfを埋め込んだhtmlページについて、サーバにアップしてIEでアクセスする分には問題ないが、ローカル環境でIEで開くとオブジェクトの位置が大幅にずれる。

・・・というご指摘。調べてみると確かにそうなっていることを確認。さらに調べてみると、サーバにアップしたものについても

1. IEでswfの埋めこんであるhtmlページ（A）を表示。
2. そのまま別のURLに遷移。
3. ブラウザの「戻る」ボタンで（A）に戻る。
4. するとswf内のオブジェクトの位置が大幅にずれる。

・・・という現象を発見（汗）。「ななな、なんじゃこりゃあああああ！」と思ってさらにさらに調べてみると、下記の記事を発見。

• stageWidth is zero in IE | Blog | Jodie O’Rourke
• IEでstage.stageWidthとstageHeightの値が０になる – フリーで活動するWeb屋のメモ帳
• SWFObjectのDynamic Publishingを使うとIEとかでStage.stageWidthとheightが一瞬ゼロになるという都市伝説は実在した！ | Katapad Design
• IEでstage.stageWidth及びstage.stageHeightが取得できない？

・・・みなさん、苦労されてきたんですね。とりあえず、上記のみなさんの記事と今回の実際のファイルから、自分なりに発生条件や不具合の内容から解決方法までまとめてみました。

発生条件

• SWFObjectを使っていること（「フリーで活躍するWeb屋のメモ帳」さんの記事では、SWFObjectを使っていなくても同じ現象に遭遇してるようなので、SWFObject非使用でも発生するのかもしれません）。
• 動的パブリッシュ（Dynamic Publishing）を使っている。
• IEで表示（Katapad Designさんの記事では、Mac版のFirefoxでも発生するという記述があります）。
• 同一swfファイルの2回目以降の読み込み時に不具合が発生（私がローカル環境で検証した際には、初回の読み込み時から発生していました）。

発生する不具合

コンテンツの開始時にstage.stageWidthとstage.stageHeightの値がゼロになる。

この不具合が発生する原因そのものについてはよくわかりません。IEそのものかIE版FlashPlayerなどの潜在的なバグではないかと思いますが、それはMicrosoftなりAdobeなりが対応してくれるのを待つしか無い。

ポイントとしては、ドキュメントクラスのEvent.ADDED_TO_STAGEイベントが発生したタイミングでも、stageWidthとstageHeightの値がゼロだということ。さらに、Event.RESIZEで監視しても、初回のイベント発生時にはやはりstageWidthとstageHeightの値がゼロになりました。

対処法

「HAYASAKA修行ブログ」さんで述べられているように、解決策はいろいろあります。自分としては、「Event.ADDED_TO_STAGEの発生時にstageWidthとstageHeightの値がゼロだった場合、Event.ENTER_FRAMEでstageWidthとstageHeightの値を監視し、両方の値がゼロではなくなったら処理を継続する」という方法を採用し、汎用のユーティリティクラスメソッド（Utils.stageSizeWaiter）としてまとめてみました。

Utils.as

package {
	import flash.display.Stage;
	import flash.events.Event;

	public class Utils {
		private static var _nextFunction:Function;	//ステージサイズ取得後に実行する継続処理
		private static var _targetStage:Stage;	//ステージへの参照
		public static function stageSizeWaiter(targetStage:Stage, nextFunction:Function):void {
			if ((targetStage.stageWidth * targetStage.stageHeight) == 0) {
				//stageWidthとstageHeightの値がゼロの場合はENTER_FRAMEで監視
				_nextFunction = nextFunction;
				_targetStage = targetStage;
				targetStage.addEventListener(Event.RESIZE, stageSizeListener, false, 0, true);
			}else {
				//stageWidthとstageHeightの値が取得済みの場合はそのまま継続処理を続行
				nextFunction();
			}
		}
		private static function stageSizeListener(e:Event = null):void {
			if ((_targetStage.stageWidth * _targetStage.stageHeight) != 0) {
				_nextFunction();	//継続処理を実行
				_targetStage.removeEventListener(Event.RESIZE, stageSizeListener);	//不要になったイベントリスナを削除
				_nextFunction = null;	//不要な参照を破棄
				_targetStage = null;	//不要な参照を破棄
			}
		}
	}
}

実際に利用する場合には、ドキュメントクラスで以下のように使います。

Main.as

package  {
	import flash.events.Event;
	import Utils;

	public final class Main extends Sprite{
		public function Main() {
			this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true);
		}
		private function onAddedToStage(e:Event):void {
			this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			/*
			* ADDED_TO_STAGEイベントが発生したら、ステージへの参照と
			* ステージサイズ確定後に実行するファンクションを引数に
			* して、Utils.stageSizeWaiterを実行。
			*/
			Utils.stageSizeWaiter(this.stage, onStageSizeObtained);
		}
		private function onStageSizeObtained():void {
			/*
			* このファンクションの実行時には確実にstageWidthと
			* stageHeightの値が確定している。
			*/
			sw = this.stage.stageWidth;
			sh = this.stage.stageHeight;
		}
	}
}

Katapad DesignさんのようにEventDispatcherにしたほうがスマートかなと思ったりもしてますが、こういう方法もあるってことで・・・。

ああ、疲れました（汗）。

処理の流れとしては、

（1）main.swfからSSLサーバのcrossdomain.xmlを読み込み。
（2）main.swfからdata_output.phpにアクセスし、読み込む画像のURL一覧を記載したXMLデータを取得。
（3）（2）で取得したXMLデータをもとに、個別の画像を読み込み。

・・・という、割とよくあると言えばよくある構成です。ポイントはやっぱりSSL領域とのクロスドメイン通信があること。ドメイン名が同じでも、非SSLのサーバとSSLサーバとでは別ドメインと判断されるんですよね。

で、一通り作ってサーバにアップしたところ、FirefoxやChromeやSafariでは動くのになぜかIEだけ画像が表示されない！crossdomain.xmlはきちんと記述できてるし、XMLデータを非SSL側のサーバに設置すればIEでも動くので、どこで止まってるんだろうと調べたところ、（2）のXMLデータ取得のところでポシャってることが判明。で、Google先生に尋ねて出てきたのが以下の記事：

• クロスドメインポリシーファイル(crossdomain.xml)設定について | さわいじり
• Internet Explorer が SSL 経由によるファイルのダウンロードで “No-Cache” ヘッダーを処理できない
• FLASH + SSL +WinIE（FLASH-JP.COM – フォーラム）
• tyoro.exe: no-cacheとSSLとIEとファイルダウンロード

つまりこれはIEに起因する問題で、非SSL領域のSWF（に限らず、Ajax通信などでも同じでしょう）からSSL領域のデータをリクエストした際、サーバからのレスポンスヘッダにPragma: no-cacheが含まれているとIE側で正しく処理ができないんだそうです。なんとご無体な・・・。

FirefoxでHttpFox使ってdata_output.phpのレスポンスヘッダを調べてみたところ、あったあったありましたよPragma:no-cacheが。ということで、php側に対応を依頼しました。

しかしこれ随分と前から存在する問題のようですけど、IE側では修正（変更？）する予定は無いんでしょうか・・・。

製作中のとあるフルFlashサイト。ブラウザで普通に確認してる分には問題なく動作していたため全く気がつかなかったが、Firefoxのエラーコンソールを開いてみると「Error calling method on NPObject」というJavaScriptエラーが頻発！「なんじゃこりゃ」ということで早速調べてみたところ、原因がわかりました。

まず、今回のサイトは以下のような条件が揃っていました。

• SWFファイルのドメインと、そのSWFファイルを埋め込んで表示するHTMLファイルのドメインが異なっている（SWFは http://www.hogehoge.home/movie.swf にあり、HTMLファイルは http://user.hogehoge.home/index.html にある、というような感じ）
• マウスホイール対応のためにSWFWheelを使用
• SWFファイルの埋め込みにSWFObjectを使用

そしてSWFWheelのサイトを見ていたところ、以下のような注意書きが：

その他

外部ドメインからの読み込み

SWFWheelを使ったswfファイルを、外部ドメインから読み込む場合、HTML側とActionScript側の両方でExternalInterfaceの動作を明示的に許可する必要があります。

1. HTML側にて、paramタグ及びembedタグでallowScriptAccessの値にalwaysを指定する。
2. ActionScript側にて、Security.allowDomain等で許可するドメインを指定する。

ビンゴですね。1.の方は対応済みだったんですが、2.の方が未対応でした。ところで今回のサイト、サブドメインの数が一定でなく、運用後に随時追加される可能性があります。ので、ワイルドカードを使って以下のようなコードを追加。

Security.allowDomain("*.hogehoge.home");

結果は・・・？ダメでした。まだエラーが出ます。うーん、もしかしてワイルドカードでサブドメインを指定するのは無理なのか？ということで、今度は以下のコードで実験。

Security.allowDomain("*");

成功！エラーがでなくなりました。全ドメインを対象にしてしまうのは危険といえば危険ですが、現時点ではこれが最善の策でしょうか。

Macromedia – Developer Center : Tunneling Macromedia Flash Communications through Firewalls and Proxy Servers. Page 3

例によって文書自体が古い上に意訳・適当な訳文ですが、HTTPトンネリングと同じく何かの参考までに。

※注：HTTPトンネリングの記事同様、こちらもリンク先が無くなってしまいました。アドビサイトにどこかに原文残ってないのかな・・・。

プロキシサーバに関する問題

内部のネットワークとインターネットとの中継役としてプロキシサーバを利用することで、組織のネットワーク環境をより安全にすることができる。WEBプロキシサーバというのは通常、ネットワークの通信料を削減するためのキャッシングサーバとして利用される。とはいえ、プロキシサーバの使い道は他にもある。

ネットワークレイヤーのファイヤーウォールとプロキシサーバを組み合わせることで、WEBへのアクセス自体は確保した上で、組織のネットワーク内にあるワークステーションから外部のネットワークに対して直接アクセスする必要がなくなる。ブラウザはリモートのサーバに対してWEBページのデータを直接要求するのではなく、プロキシサーバに対して要求しなければならない。ページのデータがキャッシュされていなかった場合には、プロキシサーバがリモートのサーバに対してリクエストを行ない、返ってきたデータをブラウザに戻すことになる。プロキシサーバが中継役として存在する場合、ファイヤーウォールは基本的にネットワーク内部から外部に対して直接送出されるリクエストは全てブロックするように設定されていることが多い―――たとえそれが80番ポートに対するものであったとしても。プロキシサーバだけが80番ポートを通じて外側の世界との接続を許されているのだ（図8を参照）。

HTTPトンネリングを使わない場合、プロキシサーバの内側にいて、インターネットへの直接接続が許可されていない環境にあるユーザーはコミュニケーションサーバへの接続ができない。HTTPトンネリングを使えばできるようになることがしばしばある。プロキシサーバからしてみれば、RTMPTを使った接続要求というのは通常のHTTPリクエストと同様に捉えられる。コミュニケーションサーバからのレスポンスもHTTPレスポンスと同様に判断される。このため、プロキシサーバはRTMPTリクエストの送出もコミュニケーションサーバからのデータ受信についても対応できるはずである。ところが、HTTPトンネリングがうまくいくかどうかは保証されていないのだ。プロキシサーバにはWEBページをキャッシュする中継役以上の機能がある。それは、外部のネットワークリソースに対するアクセスの制御ということだ。例えば、プロキシの管理者はアクセス禁止サイトのリストを作成し、プロキシサーバ内の全ユーザーに対して、それらのサイトへのアクセスを拒否することができる。プロキシサーバの中には、さらに詳細にデータの調査やフィルタリングが可能なものもある。例えば、特定のコンテンツや、text/thmlのようなMIMEタイプのみを許可することもできる。WEBサーバがWEBページのデータをブラウザに対して返す際、HTTPヘッダにはContentTypeというデータが含まれる。WEBサーバがWEBページのデータを送出する場合のHTTPヘッダの書式は以下のようになる：

HTTP/1.1 200 OK
Server: Netscape-Enterprise/6.0
Date: Sat, 24 May 2003 01:09:43 GMT
Content-type: text/html
Etag: "c96066c3-1-0-1e8"
Last-modified: Tue, 25 Jun 1996 19:11:18 GMT
Content-length: 488
Accept-ranges: bytes

また、画像データを送出する場合のHTTPヘッダの書式は以下のようになる：

HTTP/1.1 200 OK
Server: Netscape-Enterprise/6.0
Date: Sat, 24 May 2003 01:51:17 GMT
Content-type: image/gif
Etag: "782311ca-126-0-f1ae"
Last-modified: Mon, 06 May 2002 21:10:38 GMT
Content-length: 61870
Accept-ranges: bytes

Macromedia Flash Communication Serverが返すデータはテキストデータではないが、HTTPヘッダにはContent-typeの記述が含まれない。そして、Content-typeが記述されていない場合にはtext/htmlと判断されてしまう。このため、RTMPTのトラフィックであっても、全てのプロキシサーバを通過できるという保証は無いのである。プロキシサーバとアプリケーションレイヤのファイヤーウォールというものが、システムアドミニストレータの設定した幅広いバリエーションのルールに従ってコンテンツのフィルタリングを行うように作られているということを考慮すれば、これはおかしなことではない。ITセキュリティの部署が正規のHTML文書といくつかの画像フォーマット（image/GIFなど）のみを許可すると決定したならば、それを実現するための精巧なツールが開発されるということだ。もしRTMPT接続さえも通さないプロキシサーバの場合は、組織のファイヤーウォール担当の管理者に連絡を取り、プロキシサーバの例外設定が可能かどうか確認するといい。

図8.プロキシサーバとファイヤーウォール

注：各端末（Workstation）はインターネットに直接接続することはできず、必ずプロキシサーバを通してリソース要求を行うことになる。プロキシサーバはインターネットからリソースを取得し、それを各端末に転送する。各端末がファイヤーウォールを越えて外部のシステムにアクセスすることは決してない。

一度に複数のポートを利用する

Macromediaは先日、Flash Communication Server バージョン1.5のリリースとともに、Flash Communication Serverコンポーネントのアップデート版をリリースした。このアップデートの目玉のひとつが、Simple Connectコンポーネント内部に新規に追加されたコードである。このアップデートによって、デフォルトのRTMPポート（1935）経由で到達できないサーバへの接続時間を短縮するための機能が追加された。Simple Connectコンポーネントのアプリケーションディレクトリのパラメーターに「rtmp」が指定されていて、かつポート番号が指定されていない場合、Simple Connectコンポーネントは次のように動作する：

1. NetConnectionオブジェクトを生成し、指定されたアドレスに対して、1935番ポートを使って通常の接続を試みる。
2. 2つめのNetConnectionオブジェクトを生成し、250ミリ秒待機した後、サーバに対して80番ポートを使ったRTMPT接続を試みる。
3. 先に接続が成功した方を受け入れ、もう片方のNetConnectionオブジェクトは接続を閉じてから破棄する。

厳密に言えばこのようなやり方は必要ない。FlashPlayerはデフォルトでまず1935番ポートを使ったRTMP接続を試み、その後443番ポート、80番ポートを試みる。その後、80番ポートを使ったRTMPT接続を試みるからだ。ただしこれらの試みは時間がかかる。はじめのRTMP接続が失敗した場合、250ミリ秒後に80番ポートを使ったRMTPT接続を試みることで、接続プロセスにかかる時間は劇的に短縮されるのだ。このコンポーネントの作りを理解するため、FCSimpleConnectClassのactualConnect()メソッドを見てみよう。すべての人がSimple Connectコンポーネントを使うわけではないので、以下に示すコードは本来のコードを少々編集したものになっている。ただし行っている処理はほぼ同じだ。筆者はこのコードをメインのタイムラインに記述したが、よりオブジェクト指向的なアプローチで書き換えることも可能である。

//接続に成功するとonConnectファンクションが実行される
function onConnect(nc) {
	_global.main_nc = nc;// グローバル変数に接続成功済みのNetConnectionオブジェクトを記録
	// 確認のためURIをtraceし、使用中のプロトコルを確認
	trace("onConnect> "+nc.uri);
	// 接続に成功したNetConnectionオブジェクトのためのonStatusハンドラを生成
	main_nc.onStatus = function(info) {
		//ここに各種のイベントをハンドルするためのコードを記述
		//以下のコードはinfoオブジェクトの内容を出力するもの
		trace("----main_nc.onStatus----");
		for (var p in info) {
			trace(p+": "+info[p]);
		}
	};
	//あとは他のコンポーネントに接続したりプログラムを初期化するなど・・・
}

//接続に失敗するとonConnectFailedファンクションが実行される
function onConnectFailed(info) {
	//infoオブジェクトを検証し、接続失敗の原因についてレポートする
	//以下のコードは単にinfoオブジェクトの内容をtraceしているだけなので、
	//各自でエラーハンドリングコードを書き換えること
	trace("----onConnectFailed----");
	//infoオブジェクトの全プロパティの分ループ処理
	for (var p in info) {
		trace(p+": "+info[p]);
		// If the application rejects the connection and passes back
		// and application object loop through all its properties too.
		if (p == "application") {
			var appObj = info.application;
			for (var q in appObj) {
				trace("   "+q+": "+appObj[q]);
			}
		}
	}
}

//RTMP接続用のNetConnectionオブジェクトを生成
rtmp_nc = new NetConnection();
//こちらの接続が先に成功した場合に、rtmpt_ncオブジェクトを破棄するための
//onStatusハンドラを生成
rtmp_nc.onStatus = function(info) {
	this.pending = false;
	if (info.code == "NetConnection.Connect.Success") {
		if (rtmpt_nc.pending) {
			rtmpt_nc.onStatus = null;
			rtmpt_nc.close();
			rtmpt_nc = null;
			clearInterval(connectionID);
		}
		onConnect(this);
	} else if (!rtmpt_nc.pending) {
		onConnectFailed(info);
	}
};

//RTMPT接続用のNetConnectionオブジェクトを生成
rtmpt_nc = new NetConnection();
//こちらの接続が先に成功した場合に、rtmp_ncオブジェクトを破棄するための
//onStatusハンドラを生成
rtmpt_nc.onStatus = function(info) {
	this.pending = false;
	if (info.code == "NetConnection.Connect.Success") {
		if (rtmp_nc.pending) {
			rtmp_nc.onStatus = null;
			rtmp_nc.close();
			rtmp_nc = null;
		}
		onConnect(this);
	} else if (!rtmp_nc.pending) {
		onConnectFailed(info);
	}
};

//どちらのNetConnectionオブジェクトについてもペンディングフラグを立てておく
rtmp_nc.pending = true;
rtmpt_nc.pending = true;

//rtmp接続を試みる
rtmp_nc.connect("rtmp://host.domain.com/myApp/myInstance",userName,password);

//rtmpt接続を400ミリ秒後に行うように設定
connectionID = setInterval(connectRTMPT, 400);

//このファンクションが実行されたらインターバルを破棄してRTMPT接続を試みる
function connectRTMPT() {
	clearInterval(connectionID);
	rtmpt_nc.connect("rtmpt://host.domain.com/myApp/myInstance",userName,password);
}
//80番ポートが使えず、8080番ポートを使う場合などのconnectRTMPTメソッドの記述例は以下のとおり
function connectRTMPT() {
	clearInterval(connectionID);
	rtmpt_nc.connect("rtmpt://myHost.myDomain.com:8080/myApp/myInstance",userName,password);
}

HTTP Tunneling protocols

※注：リンク先が無くなってしまいました・・・。げ、原文まだどっかに残ってないかな・・・。

旧Macromedia時代の文書で、例によってかなり意訳・適当な訳文ですが、何かの参考までに。

HTTPトンネリングプロトコル

RTMP、RTMPT、RTMPS

FlashPlayerはFlashCommunicationServerと通信する際、デフォルトではRTMPプロトコルを使い、1935番ポートに接続する。 失敗したら443番ポートと80番ポートでの接続を試みる。 ファイヤーウォールが設定されている場合、非標準のポートを経由したTCP/IP通信が許可されていないことがあるため。 これらの手法で、およそ96%のユーザーをカバーすることができるはず。

100%に近いユーザーをカバーするためには（もしあれば）プロクシを通すか、ファイヤーウォールのためにHTTP通信しかできない場合などはHTTPトンネリングを使ってHTTPプロトコル越しにRTMPパケットを送信することになる。

以前のFlashPlayerでは、サーバへの通信要求は常にRTMPプロトコルで行われ、オプションとしてポート番号を指定することが可能であった。以下のコードでは、RTMPを利用し、1935番、443番、80番の3つのポートを使った計3回の接続を試みる。

nc.connect("rtmp://mysite.com/myapp");

以下のようにしてポート番号を指定した場合には、指定されたポート番号を使った1回の接続のみを試みる。

nc.connect("rtmp://mysite.com:PORT/myapp");

現在のFlashPlayerでは、以下の3つのうちどれか一つのプロトコルを使った接続がサポートされるようになった。

• RTMP（デフォルトポート：1935）
• RTMPT（HTTPを経由したトンネリング。デフォルトポート：80）
• RTMPS（HTTPSを経由したトンネリング。デフォルトポート：443）

コードの書式は以下のようになる。

• nc.connect("rtmpt://flashteam.macromedia.com/myapp");

• nc.connect("rtmps://flashteam.macromedia.com/myapp");

上記の場合、各プロトコルのデフォルトポートに対しての計1回の接続のみを試みる。

ポート番号を指定する場合の書式は以下の通り。

• nc.connect("rtmp://flashteam.macromedia.com:PORT/myapp");

• nc.connect("rtmpt://flashteam.macromedia.com:PORT/myapp");

• nc.connect("rtmps://flashteam.macromedia.com:PORT/myapp");

上記の場合は、指定されたポートに対しての計1回の接続を試みる。

また、以下のような特殊な接続方法もある。

• nc.connect("rtmp://flashteam.macromedia.com/myapp");

この場合、RTMP:1935を試みたあとにRTMPT:80（昔のHTTP:80に代わるもの）を試みる。

新しいFlashPlayerでは、これは「万が一の場合の代替手法」として機能している。もしデフォルトの方法が失敗した場合、FlashPlayerは80番ポートでの接続を試みる。おそらくこれがHTTPトンネリングのための最も一般的な手法であろう。

メモ：HTTPトンネリングはリアルタイムな音声・映像配信のパフォーマンスに影響をおよぼすことがある。

・・・結論としては、以下の方法がベスト、っていう認識でいいのかな。

nc.connect("rtmp://flashteam.macromedia.com/myapp");

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で動くかどうかは一通りのファイルをサーバーにアップして確認。で、きちんと動きました。これで問題ありません！