AS3 用の Google 公式 YouTube 埋め込みプレイヤー API が公開されました。いままでは AVM1 用プレイヤーか、JavaScript 経由で操作するクロムレスプレイヤーしか無かったので、これでかなり簡単に Flash サイト内で YouTube プレイヤーを埋め込むことができるようになりました。ただし Flash Player 10 以上。（一応 Player 9 でも動くけどエラー出ます）]]>
EmbedYoutubePlayerTest.html。
Flash Player 10 用にパブリッシュされた、専用 YouTube プレイヤー SWF（http://www.youtube.com/apiplayer?version=3）をロードして、初期化（Event.INIT → "onReady" 後）再生用ファンクションをコールするだけのお手軽仕様。
YouTube ActionScript 3.0 Player API Reference - YouTube APIs and Tools - Google Code
http://code.google.com/intl/en/apis/youtube/flash_api_reference.html
再生用ファンクションは自動再生するかどうかと、ビデオ ID を指定するか URL を指定するかで、合計四種類あります。
指定する映像のサムネイルをロードし、映像再生の準備をする（スタートボタンが画面中央に表示したまま停止する）ファンクション。
// Video ID を指定
player.cueVideoById(videoId:String, startSeconds:Number, suggestedQuality:String):Void
// URL を指定
player.cueVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
指定する映像をロードして自動的に再生開始するファンクション。
// Video ID を指定
player.loadVideoById(videoId:String, startSeconds:Number, suggestedQuality:String):Void
// URL を指定
player.loadVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
というわけで上記サンプルのソース。
package
{
import flash.display.DisplayObject;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLRequest;
import flash.system.Security;
/**
* Embded YouTube Player Test
*/
public class EmbedYoutubePlayerTest extends MovieClip
{
private var _youtubePlayer:Object;
public function EmbedYoutubePlayerTest()
{
Security.allowDomain("*");
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, initHandler);
loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
}
private function initHandler(event:Event):void
{
_youtubePlayer = Loader(LoaderInfo(event.currentTarget).loader).content as Object;
addChild(_youtubePlayer as DisplayObject);
_youtubePlayer.addEventListener("onReady", onReadyHandler);
_youtubePlayer.addEventListener("onError", onErrorHandler);
_youtubePlayer.addEventListener("onStateChange", onStateChangeHandler);
_youtubePlayer.addEventListener("onPlaybackQualityChange", onPlaybackQualityChangeHandler);
}
private function onReadyHandler(event:Event):void
{
trace("ready", Object(event).data);
_youtubePlayer.setSize(320, 240);
// キューする（スタートボタンが画面中央に表示したまま停止）
//_youtubePlayer.cueVideoById("6hzrDeceEKc");
// すぐさまロードして自動再生
_youtubePlayer.loadVideoById("6hzrDeceEKc");
}
private function onErrorHandler(event:Event):void
{
// error 150 となる場合は、指定した映像が「埋め込み拒否」されている。（どうしようもない）
trace("error", Object(event).data);
}
private function onStateChangeHandler(event:Event):void
{
// state -1 未スタート（SWFが読み込まれたときは -1 の onStateChange イベントが発行される）
// state 0 終了
// state 1 再生中
// state 2 一時停止
// state 3 バッファリング中
// state 5 停止（SWF が読み込まれ、キューに追加されて、再生可能になったら 5 の onStateChange イベントが発行される）
trace("state", Object(event).data);
}
private function onPlaybackQualityChangeHandler(event:Event):void
{
// クオリティを変更した場合
trace("quality", Object(event).data);
}
}
}
公式ページではより詳しく解説していますので、要熟読。
コントローラー（再生ボタンやシークバー）を作るときは player.playVideo() や player.seekTo(seconds, allowSeekAhead) をコールするわけですね。
昔作ったサイトでは AVM1 用のクロムレスプレイヤーを JavaScript で操作するというかなりめんどくさくてクセがあった方法じゃないと埋め込めなかったので、いい時代になったなぁとしみじみ。]]>
例えば Macintosh HD 直下においていたら、
1. TextLayoutFramework beta を Adobe Lab からダウンロード。
※：学習用に Text Layout Component Examples というサンプルファイルもダウンロードしましょう。
2. Extension Manager CS4 でインストール。
3. Flash CS4 を開いて Flash ドキュメント作成。
4. コンポーネントパネルの「標準コンポーネント」Text Layout をステージにドラッグ。
5. 「TextLayout Sample Text.」と書かれた Text Layout インスタンスが配置される。
6. Window > その他のパネル > Text Layout パネルを開く。
7. 配置したインスタンスを選択したまま、パネル左下「Get from Stage」ボタンを押してステージのインスタンスを同期する。
8. テキストエリアに何か適当に書いた後、「Send to Stage」すると、ステージのインスタンスに編集が反映される。
9. テキストを選択した状態で、パネル右側の操作パネルで色々設定できる。
10. CHARATER の Font を 小塚明朝、 Size を 18、Leading を 200%。Paragraph の Alignment を一番右のアイコン：均等揃え、Just.Rule を East Asian、 ADVANCED CHARACTER の Local を JAPANESE 、Dominant Baseline を Ideographic Center か Ideographic Bottom。そして FLOW の Orientation を Vertical という感じで設定していくと、結構いい感じに。
で、その完成サンプルはこちら。
「/」（半角スラッシュ）は使わないとか、段落の頭は一文字下げるとかの基本も押さえていけば、よりいい感じになっていきそうです。
ただ操作性はまだイマイチ。ルビが振れないのは正直ガッカリ。CS5 で乗るとされる正式版に期待です。
Action Script 3.0 編 I とりあえず表示
AS からも制御可能。HTML でつかう <body> や <p> 、<span> などと同じようなイメージでテキストを階層構造化していくことで文章にします。
<body> は TextFlow インスタンス、 <p> は ParagraphElement インスタンス、 <span> は SpanElement インスタンスに置き換えて、上位のインスタンス（TextFlow）に下位のインスタンス（ParagraphElement、SpanElement）を addChild() することで指定できます。
テキストを入れていったら、TextFlow.flowComposer.addController() で DisplayObejctContainer のツリーに参加させて、TextFlow.flowComposer.updateAllContainers() で内容を更新します。
上の Flash CS4 上で作成したサンプルでは、「縦書き」「日本語禁則処理」「均等揃え」「英語/日本語ベースライン揃え」などを使用しています。これらは formats パッケージなどに用意されている定義クラスを用いることで実現できます。
というわけで、上の Flash CS4 で作った文字組サンプルを再現してみます。
iPhone Core Audio プログラミングを読み終えました。 iPhone オーディオプログラミングの全てといっても過言ではない内容が詰まった本書。間違いなく iPhone アプリ制作者必読の書です。ちなみに C 言語、Objective-C の知識は多少必要です。]]>
」を目指したとのことですが、実際素晴らしい内容です。しばらく手放せません。
iPhone OS は Mac OS X との共有部分も多いため、 Mac OS X オーディオプログラミングの基礎固めにもなった気がします。というわけで「Mac Core Audio プログラミング」も書いてほしー。
---
ちなみに僕の iPhone SDK オススメ書籍一覧のページはこちら。
入門、初級、中級、上級としてみました。
]]>
というわけで本題で、eclipse 3.5 Galileo + Flex Builder 3 eclipse plugin を導入してみましたのでそのメモ。
1. まずは eclipse 3.5 Galileo を手に入れる。
eclipse の公式サイト（ここ http://www.eclipse.org/downloads/packages/）からか、日本人用に最適化されたパッケージ版を（ここ http://mergedoc.sourceforge.jp/）ダウンロードする。
オススメは日本語化されてフル機能が付いた Ultimate (JRE あり) をこちらから。
http://mergedoc.sourceforge.jp/
2. 適当なディレクトリに設置。
eclipse を起動してみる。初回起動はまぁまぁ時間がかかるんですよね確か。
ワークスペースが聞かれるので、eclipse の作業ディレクトリとしたいディレクトリを指定する。
workspace って名前にはしといた方が良いかも。workspace は後から追加したり変更できます。
3. Adobe Flex Builder 3 Eclipse Plugin をダウンロード。
とりあえず体験ばーん。
https://www.adobe.com/cfusion/tdrc/index.cfm?product=flex_eclipse
Flash Builder 4 ならこっち。
http://labs.adobe.com/technologies/flashbuilder4/
4. Adobe Flex Builder Plugin をインストール。
このときに eclipse を設置しているディレクトリを聞いてきますが、3.2 または 3.3 でないと、インストーラーが認識できないようで、変なダイアログとエラーが出ますが「注意して続行する」という不思議な文言のボタンをクリックして続行。
5. eclipse と Flex Builder を関連づける
eclipse をインストールしたディレクトリに links というフォルダが出来る（なければ自分で作る）。
その中にある com.adobe.flexbuilder.feature.core.link というファイル（なければテキストファイルを作ってリネームをしたりして作成）をテキストエディタで開き、中身を、
右の方にあるパースペクティブを開くボタンから「その他」「Flex 開発」を入れて、パースペクティブを追加する。
ハイ、ドーーーン！！
ほんと開発向けの見た目だよなぁ。慣れてないだけかもしれないけど、Flash CS4 とか立ち上げるとデザイン心がくすぐられるというか、モーションとかインタラクションでアートしたい感がするもん。これはこれでスクリプトガリガリ書こう、って気になるけど。
そんなわけで、とりあえず SWC 作成ツールにしてみようと思いました。
八角研究所 : Adobe Flex コンポーネントの作り方（4） - SWC形式での配布
http://www.hakkaku.net/articles/20080812-259]]>
Flash CS4 の新モーショントゥイーンではリニューアルしてその辺の仕様を再考されたのか、大丈夫なようになりました。
Flash CS4 新モーショントゥイーンで上のものとキーフレームのプロパティは同じにしています。
Flash CS4 の新モーショントゥイーンは、Flash Player 10 以上のみが対象ではなく、Flash Player 6 用（もちろんこれ未満も）、Flash Lite 用とかにも使えるので、モーショントゥイーンを頻繁に使う方は CS4 にアップデートされると幸せになれると思います。]]>