dev.convexstyle.net

ActionSctipt 3.0 アーカイブ

MouseEvent in ActionScript 3.0

del.icio.us hatena bookmark

数週間前からようやく最新バージョンの ActionScript 3 を個人的に勉強し始めました。
手始めに、ActionScript というよりは、Object Oriented Programming の基本概念や Java などの本をこの数週間読みこんでいた。今後も引き続きこんな日々が続くと思う。結構、面白い。

Adobe の ActionScript に対する打ち出し方は ActionScript 1, 2 は従来の Flash Designer、ActionScript 3 はプログラム重視の Flash Developer らしいですが、確かに使ってみて、ActionScript 3 はデザインや表現などと絡める場合にはあまり適さず、ActionScript 2 の方が flexibility が 高いような気がする。(少なからず、今までのところ。)もともと売りは大規模なアプリケーションを UI でリッチな形で提供したい場合とか、これまで Java などで開発してたプログラマーの人が Flex で mxml と ActionScript 3 を使用して簡単に Rich Internet Application 開発出来る様にすることだと思うので、ActionScript 3 の流れは実際、理にはかなっているのかと思う。それでも、Adobe のセミナーなどで見て Flash Player 9 の新しい Virtual Machine の処理速度がかなり向上しているようだったので、ActionScript 3 のこれからの可能性は大きく感じる。何より、新しい言語スタイルに触れることは楽しい。

当分、自分への ActionScript 3 の整理を兼ねて、blog を定期更新していこうと思う。



まずは、MouseEvent。

続きを読む "MouseEvent in ActionScript 3.0" »

E4X in ActionScript 3.0

del.icio.us hatena bookmark

従来の ActionScript 2.0 でサポートされていた XML Class は XML Document と名前を変更し flash.xml package 内に移行され、ActionScript 3.0 からは XML データを処理するために、ECMAScript for XML (E4X) specification がサポートされた。
E4X とは ECMA-357 standard の ECMA International によって標準化された XML を処理する ECMAScript 拡張言語。このクラス導入により、Flash 内での XML parse 処理が格段に容易になっただけではなく、標準化された言語仕様に基づくことで、Javascript 等の他言語へのノウハウのバイパスがスムーズになりそう。


ECMAScript for XML


今回は、現在個人制作で Flickr を使った簡単ツールを作っているため、この制作過程のものをサンプルとして使用し、Zend Framework で Flickr API から取得した情報を XML 形式で書き出し、この XML を E4X で parse する様にする。

【サンプルファイル】
http://www.convexstyle.net/samplefiles/E4X/test.xml
http://www.convexstyle.net/samplefiles/E4X/E4X.zip

続きを読む "E4X in ActionScript 3.0" »

ActionScript 2.0 と ActionScript 3.0 における名前空間処理

del.icio.us hatena bookmark

Flickr の個人アカウントページにある RSS Feed(RSS 2.0)は api.flickr.com 上に置かれており、http://api.flickr.com/crossdomain.xml で確認できるように、<allow-access-from domain="*"/> 設定なので、別サーバからでも crossdomain 問題を回避してこの XML を Flash 内で利用できる。Flickr では便利な API が準備されているので特に RSS を使用しなくても様々な事ができるが、簡単にブログパーツを作る際などはこの RSS が結構便利。

ということで、これを ActionScript 2.0 で解析し、同様な事を ActionScript 3.0 で行った。
サンプルの RSS Feed は下記の自分のモノを利用した。今回は、この RSS の構造から各 item ノード内のノード値と media:text ノード内のノード値を取得してみる。


Flickr screenshot
Flickr account screenshot


ActionScript 2.0(以下、AS 2.0) ではこの解析はすんなり行うことができる。
AS 2.0 の解析プログラムの例は以下の通りである。

【サンプルファイル】
download AS 2.0 file



stop();

// 初期設定
var path:String = "http://api.flickr.com/services/feeds/photos_public.gne?id=53418554@N00&
format=rss_200";
var xmlObj:XML = new XML();
xmlObj.ignoreWhite = true;

function parseXML(xml:XML):Void {
var mainNode:XMLNode = xml.firstChild.firstChild;
var channelNodesNum:Number = mainNode.childNodes.length;
for(var i:Number = 0; i < channelNodesNum; i ++) {
if(mainNode.childNodes[i].nodeName.toLowerCase() == "item") {
var itemNodesNum:Number = mainNode.childNodes[i].childNodes.length;
for(var j:Number = 0; j < itemNodesNum; j ++) {
if(mainNode.childNodes[i].childNodes[j].nodeName.toLowerCase() == "link") {
// link ノード のノード値取得
var linkNodeValue:String =
mainNode.childNodes[i].childNodes[j].firstChild.nodeValue;

trace(linkNodeValue);
}
if(mainNode.childNodes[i].childNodes[j].nodeName.toLowerCase() == "media:text") {
// media:text ノード のノード値取得
var mediaNodeValue:String =
mainNode.childNodes[i].childNodes[j].firstChild.nodeValue;

trace(mediaNodeValue);
}
}
}
}
}

xmlObj.onLoad = function(success:Boolean):Void {
if(success) {
parseXML(this);
} else {
trace("XML 解析エラー");
}
}
xmlObj.load(path);


しかしながら E4X に完全準拠した ActionScript 3.0 (以下、AS 3.0)では上記の様に単純に media:text をノード名に見立てて RSS を解析することは出来ない。なぜなら、AS 3.0 では名前空間という概念を含んでおりmedia:text は media という名前空間に属しているとみなされ、同様に、media:content、media:title、media:thumbnail、media:credit、media:category 等も同じ名前空間に属しているためである。

名前空間を使用した要素名・属性名の書き方
名前空間の識別子:要素名
名前空間の識別子:属性名

そのため、まず、取得したいノードがどの名前空間に属しているか設定する必要がある。
今回は media:text は media という名前空間の text という要素名なので、これを E4X に基づいて記述する。link ノードのノード値に関しては通常の E4X の RSS 解析で簡単に取得できる。
AS 3.0 の解析プログラムの例は以下の通りである。

【サンプルファイル】
download AS 3.0 file



stop();

// クラスファイル読み込み
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.xml.XML;
import flash.events.*;
import flash.error.*;

// URLLoader 設定
var ULoader:URLLoader = new URLLoader();
configureListeners(ULoader);

function configureListeners(dispatcher:IEventDispatcher):void {
dispatcher.addEventListener(Event.COMPLETE, completeHandler);
}

// complete イベントハンドラ 設定
function completeHandler(event:Event):void {
var xmlObj:XML = new XML(ULoader.data);
var nodeNum:Number = xmlObj..item.length();
for(var i:Number = 0; i < nodeNum; i ++) {
// link のノード値取得
var linkNodeValue:String = xmlObj..item[i].link.text();
trace(linkNodeValue);
// media:text のノード値取得
var ns:Namespace = xmlObj..item[i].namespace("media");
var mediaNodeValue:String = xmlObj..item[i].ns::text;
trace(mediaNodeValue);
}
}

// URLRequest 設定
var path:String = "http://api.flickr.com/services/feeds/photos_public.gne?id=53418554@N00&
format=rss_200";
var URequest:URLRequest = new URLRequest();
URequest.url = path;
try {
ULoader.load(URequest);
} catch(e) {
trace(e.message);
}

まず、AS 3.0 では複数ある item ノードを childNodes などを使わず、「..」を使用することにより Array として取得できる。(元の XML オブジェクト)..item で簡単に取得可能。その Array の length は(元の XML オブジェクト)..item.length である。また、item ノードの子ノードである media:text は namespace 関数によって名前空間を取得し、「::」でその要素名を特定できる。そのため、(元の XML オブジェクト)..item[incrementの数].namespace("名前空間")::要素名、つまり、(元の XML オブジェクト)..item[incrementの数].namespace("media")::text で取得できる。


E4X 準拠の XML 解析は最初は多少戸惑ったが、仕様さえ理解すれば AS 2.0 より数倍簡単に解析できてしまう事が素晴らしい!また他の言語でも E4X に準拠していく流れからすると、ActionScript 単体で完結するのではなく、他の言語に応用できるのが個人的には無駄が無く納得した。なお、今回は説明中心のため、あえて link と media:text を取得して trace だけしているが、この情報を Array に格納して
Flash 内で表示さえさせればブログパーツは簡単にできてしまう。また、media:text もしくは description のノード値はコレだけでは使えないのでさらに String を解析するし必要な部分を取得する必要がある。ここでも AS 2.0 と AS 3.0 では処理的に大きな違いがある。何故なら AS 3.0 から正規表現が使えるようになり、より効率よくなっているからである。次はここについて説明しようと思う。

最後に RSS 2.0 が面倒な場合は Feed URL の最後の「&format=rss_200」を消してしまえばよりシンプルな形になるのでこっちを解析した方が多少楽。


【使用環境】
Flash 8 Professional、Flash 9 Public Alpha

ActionScript 3.0 での objectEncoding 概念

del.icio.us hatena bookmark

実家に里帰りして、桜祭りで AE-1 で写真撮影。リラックス出来ました。


ActionScript 3.0 でヘテムルのインフラを使い FMS アプリケーションに接続するテストをしてみた。接続の考え方は ActionScript 3.0 以前と同じなので ActionScript 3.0 の記述形式さえ書ければ特に問題ないが、objectEncoding の概念を理解していなくて接続に少し手間取ってしまった。理解されている方は特に問題ないのですが、自分は知らなかったのと検索してもあまり詳しく書いていなかったのでメモ。

ActionScript 3.0 での objectEncoding 概念
ActionScript 3.0 での objectEncoding 概念概略図


アプリケーションサーバと Flash アプリケーションの通信のデータフォーマットは Action Message Format(AMF)でバイナリデータを送受信しているのだが、Flash Player 9 リリース以前はアプリケーションサーバへの接続には AMF のバージョンが 0(AMF0)を使用していたが、Flash Player 9 リリース以降の Flex 2.0 の様なアプリケーションサーバへの接続にはデフォルトで AMF のバージョンが 3(AMF3)が使用されている。Flash Player 9 は ActionScript 3.0 用の VM を搭載している様に、AS 3.0 ではすでにデフォルトで AMF3 がサポートされているので、ヘテムルでプレインストールしている Flash Media Server 2.0 や Flex 1.5 の様な Flash Player 9 以前にリリースされたアプリケーションサーバは AMF0 のみをサポートしているという矛盾から、今回接続が上手くいかなかった。

対応策は簡単で、ActionScript 3.0 内で明示的に NetConnection オブジェクトで FMS アプリケーションに接続する際の AMF のバージョンを objectEncoding プロパティで AMF0 に変更することで接続は出来るようになる。これは最近結構使っている RED 5 でのアプリケーション接続時も同様。

以下、簡単なサンプルソース(fmsEx.as)。


package {

import flash.display.*;
import flash.net.*;
import flash.events.*;

public class fmsEx extends Sprite {

private var _nc:NetConnection;

// コンストラクタ
public function fmsEx() {
_nc = new NetConnection();
_nc.objectEncoding = ObjectEncoding.AMF0;
_nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
_nc.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
_nc.connect(rtmp://******.fms.heteml.jp/アプリケーション名/[任意]インスタンス名);
}

// NetConnection の NetStatusEvent 用関数
private function netStatusHandler(evt:NetStatusEvent):void {
switch(evt.info.code) {
case "NetConnection.Connect.Success":
// FMS アプリケーションへの接続に成功
break;
case "NetConnection.Connect.Failed":
// FMS アプリケーションの接続に失敗
break;
case "NetConnection.Connect.Rejected":
// FMS アプリケーション接続権限がありません
break;
case "NetConnection.Connect.Closed":
// FMS アプリケーションが無事に閉じました
break;
default:
// その他
}
}

// NetConnection の SecurityError 用関数
private function securityErrorHandler(evt:SecurityErrorEvent):void {
// セキュリティエラー
}
}
}


【開発環境】
Flex Builder 2.01、ActionScript 3.0、Flash Media Server 2.0、Flex SDK
*テストでは Red5 使用。


【参考サイト】
livedocs.adobe.com

FlashVars in ActionScript 3.0

del.icio.us hatena bookmark

ActionScript 3.0 で開発中、何気に FlashVars の変数を取得しようと思ったんだけど、そういえば!

従来のActionScript 2.0 で FlashVars で渡ってきた変数を _root からアクセスして簡単に取得するやり方は ActionScript 3.0 だったら_root が removed されてるから当てはまらないですよね。どうするんだっけと思い検索したらやっぱり変更していたのでメモ。

Shape, Sprite, Bitmap, SimpleButton, TextField, MovieClip class 等は DisplayObject(display list に見なされるすべてのクラスの基盤クラス)の subclass に当たり、この DisplayObject が読み込まれる大本の swf の loaderInfo プロパティ から FlashVars は取得できる出来る。正確に言うならば extends して作った自分のクラスから辿って、 "Myclass.root.loaderInfo.parameters" から取得できる。

サンプルファイルは下記の通り。


// HTML 側
<object>
<param name="FlashVars" value="myname=convexstyle" />
<embed src="***.swf" FlashVars="myname=convexstyle" *** />
</object>


// ActionScript 側
package {
import flash.display.Sprite;
public class test extends Sprite {
private var myname:String;
public function test() {
var flashVars:Object = this.root.loaderInfo.parameters;
myname = flashVars['myname'];
trace("my name is" + myname);// my name is convexstyle と trace される。
}
}
}

KeyboardEvent in ActionScript 3.0

del.icio.us hatena bookmark

キーボードのイベントって AS 1.0~2.0 は何気に swf を html 上でクリックしてアクティブにしていましたが、AS 3.0 ってきっちり明示しないとだめでしたね。この本には普通に書いてましたが、洋書を参考にビジュアライズしてたら見逃して、ちょっと悩んでしまったのでメモ。

swf コンテンツをクリック(自分は stage をクリックしたイベントを取得)したイベント内で stage の focus プロパティで動かしたいオブジェクト(interactiveObject)を"stage.focus = interactiveObject" してキーボードイベントを interactiveObject に対してアクティブにする。今回は interactiveObject 用に square class を設定しました。


参考スクリプトは下記に。

続きを読む "KeyboardEvent in ActionScript 3.0" »

Lightweight Remoting Framework

del.icio.us hatena bookmark

Lightweight Remoting Frameworkdanny patterson さんがリリースした ActionScript 3.0 のみで使用できる Remoting Framework で、サーバへの Remoting 接続が容易にできる。
ActionScript Project しか試してないけど、swc もあるんで、おそらく Flex Project 内でも使用できるではないだろうか。

使い方は凄い簡単で osflash を確認してもらえばすぐに使い方が理解できると思うんですが、この Framework というか Design Pattern を理解すれば、Custom Event とか Event Dispatcher の流れが分かるのでソースは目を通したら結構為になる。メインクラスで管理したい addEventListener で設定する任意のイベント(イベントハンドラ系)をどの様に独自にカスタマイズして dispatch するとかきっちり理解できた。

最新版は直接ブラウザからファイルを保存するか、svn checkout で取得できる。


*彼の著書 "Advanced ActionScript 3 with Design Patterns"

Flickr RSS 解析 in AS 3.0

del.icio.us hatena bookmark

個人の Flickr RSS って便利になりましたね。
最近ふとFlickr の RSS を見たら、以前は M サイズ画像情報のみだったので URL の規則性ですべての画像データ情報を取得していたけど、今はサムネール画像・M サイズ画像・オリジナル画像のパーマリンク、幅、高さがすべて表記されてるんですね。これだと簡単に個人のブログパーツやスライドショーや photogallery くらいはすぐ作れるし、E4X で簡単に XML を解析できるようになったので再利用をかねて個人用に ActionScript 3.0 の解析 class(ParseFlickrXML)を作ってみた。Flickr API を使うならこのクラスがいいと思うけど、自分の RSS を解析するだけだとこれでいいかなと。

ちなみに結構前に作ったので今思うのは、XML の解析用のクラス(ParseFlickrXML)自体が EventDispatcher クラスを extends したら他のイベントクラスは必要なかったし汎用性があると思うけど、作成時はこんなもんだったんで今後直します。

続きを読む "Flickr RSS 解析 in AS 3.0" »

SQLite in AIR

del.icio.us hatena bookmark

Apollo Mini Camp で Apollo for Adobe Flex Developers 等の著者の Mike Chambers さんが AIR から SQLite を導入すると話していましたが、AIR より実際に導入されたので、現在開発中の AIR アプリケーションに実際に実装してみた。もともと必要な情報を FileStream クラスでローカルに xml の様なファイル書き出ししようかと考えていたが、データをもっと Secure に扱いかったので SQLite を使用。まだまだもっと使えて欲しいなあ…という部分もけっこうあるんですが、まあ、Beta の段階だしね。

使用方法は、基本的な SQL 構文の知識と AIR で実装されている SQLConnection class、
SQLStatement class、SQLResult class、File 系の class 辺りを連携させることで、至って簡単に使用することで実現できる。

続きを読む "SQLite in AIR" »

VideoDisplay では NetStream.seek 機能は実現出来ないのか?

del.icio.us hatena bookmark

アプリケーションサーバ(今回は Red 5 を使用)から streaming 配信で flv ファイルを Flex Framework の VideoDisplay Component に表示しようと思ったが、イベントドリブン的なプログラム内で、任意のタイミングにより FLV を seek させて動画の PlayHead を管理しようと思ったがうまく処理が動かなかった。(上手くいくかもしれないですが、自分ではどうにも出来なかった。)

例えば、下記の様なクリックイベントで flv の streaming 配信させる簡単なスクリプトを組んでみる。これでも streaming 配信は可能なのだが、NetStream.seek の様な PlayHead の移動をさせる機能を持ち得ていないので、最初から再生させるには flv の再生が終了するのを待って再度クリックしないと先頭から再生しない模様。もっとも VideoDisplay の仕様的に、AutoRewind も streaming には対応してないみたいだし、試した限りでは、再生中はクリックしても特に何も変化せず動画は普通に再生し続けた。

▽ MXML ソース


<mx:Script>
<![CDATA[
private function playVideo():void {
var flvname:String = "rtmp://hogehoge.com/app/sample.flv";
local_video.source = flvname;
local_video.play();
}
]]>
</mx:Script>

<mx:VBox>
<mx:VideoDisplay id="local_video" width="320" height="320" />
<mx:Button label="再生" click="playVideo()" />
</mx:VBox>


続きを読む "VideoDisplay では NetStream.seek 機能は実現出来ないのか?" »

for each in

del.icio.us hatena bookmark

数ヶ月前に個人的に一発奮起して Canon 30D を購入したのですが、それ以来写真の面白さにのめり込んでしまいました。Flickr を写真サイトのメインとして使っているんですが、今までのベスト写真アーカイブを表示する photoViewer を自前で作成しようと思い、その前に Flickr のベストフォトを取得する flickr.interestingness.getList API をベースに基本ロジックを作成しています。

ActionScript 3.0 から for each in が追加されて XML の解析が凄い簡単かつ明瞭になりました。従来は XML の処理は firstChild や childNodes など毎回冗長的に記述していかなければならなかったですが、E4X と for each in の連携によって XMLList オブジェクトを解析するのは PHP でいう foreach 的な使い勝手で今更ながら感動です。


続きを読む "for each in" »

独自 showBusyCursor 表示方法

del.icio.us hatena bookmark

RPC 処理や HTTPService 処理中に表示される busy カーソル。
s2flex2-componentsRemoteObject を使用して Flex(AIR)アプリケーションとサーバプログラムを Remoting で連携して何かを処理する場合、showBusyCursor="true" にすることで、サーバプログラムが任意の処理を行っている際にデフォルトのくるくる回るカーソルを表示することができるが、独自のカーソルやプログレスバーを表示したい場合があるので、その独自のカーソルやプログレスバーを表示する方法をメモ。

続きを読む "独自 showBusyCursor 表示方法" »

JUGEM Desktop

del.icio.us hatena bookmark

JUGEM Desktop

Adobe Integrated Runtime Beta 3 上で動作する JUGEM Desktop というアプリケーションの開発に携わり 1/29 にリリースしました。ウェブカメラの動画を記憶ストリームとしてアプリケーションサーバー上に一時的に保存し、ユーザーアクションによって動画をウェブディレクトリに保存し、JUGEM 各ユーザーのブログコンテンツとして使用できるという仕様。今回は最近動画に力を入れている ASK.jp と連携しデコワクを使用するため、ASK で提供された API を使用し、最終的に記憶ストリーム(.flv)を ASK 側に POST する形を取りました。(ローカルの DV ファイルをアップロードするウェブ版は去年末に開発しました。)

JUGEM Desktop の現状の機能自体は Flash Developer や Flex Developer の方にはいたって基本の機能で、すでにウェブ上のアプリケーションでもウェブカメラの動画投稿ができるものを多くみているし、個人的にもウェブでは3度程、記憶ストリームを利用したアプリケーションを仕事や個人ワークで開発しているので、目立って新しいことをしたという訳ではないですが、とにかく、JUGEM というブログサービス(対何十万人)を相手にするための対サービス型のアプリケーション開発は結構シビアで目に見えない部分で苦労しました。後、AIR アプリケーションは"既存のスキルをローカルアプリケーションに使用でき簡単に開発できる"という風に聞いていましたが、やってみると Flex Framework をきっちり理解していないと難しいなと痛感。自分見たくゼロから Flex を始めた方はまずは Flex で詰まりそう。特に、Flash 完結したアプリケーションを AIR 書き出しするために Flex Framework を使用する場合と違い、ユーザーインタラクションがある場合はなおさらかなと思います。MVC 設計を意識し今後の開発での汎用性を意識していたけど、自分のスキルがまだまだです。でも思いました。今まで企業サイト・サービス・個人ワークで目的は違えど何とか新しいクリエイティビティを表現したい!と開発やデザインしてきましたが、AIR アプリケーションの様に、決まった動作を論理的に考えて開発するのも気持ちいい!なあと。一発ギャグ的なアプリケーションもいいけれど、「ウェブライフをより便利に!」って考えて作った方が AIR はより最適かなと思います。例えば、teknision が開発した Finetune Desktop は自分には凄い使い勝手がよく、I-Pod Shuffle 的にいい音楽を偶然探すには最適です。

ということで、使っていただくと分かると思いますが機能的には全くまだまだです。
開発は1人作業なので時間が限られているのですが、引き続き Flex を勉強しながら時間がある限り新しい機能を追加していきます。Flex Beta 3 もまだまだ問題点とかが多いけれど、正式版が出る時に fix されているのを期待したい!


【使用技術】
Flex Builder 3 Beta 3, Flash CS 3 Professional, Flex Component Kit, AIR API, ActionScript 3.0, PHP 4, AMFPHP, ASK API, Smarty, PEAR, MySQL, SQLite, Application server on Linux, Photoshop CS 3


【担当領域】
Flex Builder 3 Beta 3, Flash CS 3 Professional, Flex Component Kit, AIR API, ActionScript 3.0, PHP 4, AMFPHP, ASK API, Smarty, PEAR, MySQL, SQLite, Application server

マルチアプリケーションを1つの AIR アプリケーションで管理

del.icio.us hatena bookmark

AIR アプリケーションで大きく分類して1つの機能のみを保持する場合は、特に意識せずに開発すればいいんですが、ふと、機能が横並び的に拡張して、親アプリケーション(mx:WindowedApplication や mx:Application)ではそのレイアウトのみを管理し、各子クラスがそれぞれ1つのアプリケーションの単位として考えられる場合はどうやるんだろう・・・と思ったので、調査してみた。
要は、各アプリケーションを表すアイコンがズラッと並んでいるだけで、各アイコンをクリックした時点で、各アプリケーションが起動する感じにしたい。

mx:Window 概略図
mx:Window 概略図

続きを読む "マルチアプリケーションを1つの AIR アプリケーションで管理" »

H.264 動画を Flash Media Server 3 より Streaming 再生

del.icio.us hatena bookmark

Flash Media Server 3 の Streaming 配信
Flash Media Server 3 の Streaming 配信

会社で Flash Media Server 3 を触る機会があり、H.264 のストリーミング再生を試してみたのでメモ。
H.264 は従来の On2 VP6 コーデックよりもパフォーマンスと効率が向上した動画圧縮規格で、Flash Player 最新版(Flash Player 9.0.115)であれば、従来の .flv や .mp3 に加え、H264 を使用した他の動画フォーマット(.mov、.avi、.mp4 など)を Streaming 再生させることが可能。Adobe Flash on で HD 画質の動画を普通に見れますが、この画質は恐ろしく奇麗過ぎる!もはや映画レベルの画質をウェブでコンテンツとして普通に配信出来ますね。Flash Media Streaming Server 3 はそこまで高くはなく購入出来るレベルなので、専用サーバ立てて portfolio サイトのコンテンツ配信ぐらいなら十分ですね。どこかの記事で読みましたが、H.264 を Red5 もサポート予定らしいので、ライセンス購入なしに高画質動画配信が可能になる可能性がありますね。

といういことで、Flash Media Server 3 の動画の Streaming 配信の際は、従来の NetConnection.connect の記述がフォーマットの違いによって微妙に異なるので下記に記述します。

続きを読む "H.264 動画を Flash Media Server 3 より Streaming 再生" »

H.264 動画の Progressive 配信

del.icio.us hatena bookmark

H.264 動画の Progressive 配信


前回のエントリーで、Flash Media Server 3 を使用した Streaming 配信に関して記述しましたが、今度はウェブディレクトリより通常の Progressive 再生をしてみたのでメモ。

前回は NetStream.play の記述は ns.play("mp4:sample.mp4"); や ns.play("mp4:sample.mov"); の様な形式で記述し Streaming 再生させていたが、Progressive 再生では NetConnection.connect(null) にして同様な記述では H.264 の動画コーデックで作成された MPEG-4 や MOV を再生できないようだ。

もろもろ調べていたら flashcomguru の記事に同様な問題で、下記の様な記述が。
"That did the trick and my mp4 files now use a naming convention of Rendition.mov.flv, even though it complained that the file can't be opened. trust me it can once you run it in a browser."

要は、.mp4 や .mov も .flv として見立てて、ファイルの拡張子を例えば sample.mp4.flv や sample.mov.flv に変更し、NetStream.play の記述を ns.play("sample.mp4.flv"); やns.play("sample.mov.flv"); に変更し、サーバにアップロードすれば動作する。
*ただし .flv の時は 拡張子を削除して ns.play("sample.mp4"); や ns.play("sample.mov"); の様に記述したいところだが、ns.play("sample.mp4"); では動作したが、ns.play("sample.mov"); では 404 エラーが返ってきた。ここら辺の挙動はどうなのか。

flashcomguru からはサンプル fla をダウンロードでき、そちらでは FLVPlayback を使用しているので、source プロパティに拡張子を変更したファイルの絶対パス(例:http://hogehoge.com/flv/sample.mov.flv)を指定して動作させている。

次の Flash Player 辺りで改善されそうな内容ですが、一時的な改善策としてこんな感じらしい。念のため、ソースは下記に。

続きを読む "H.264 動画の Progressive 配信" »

JUGEM Desktop x Flickr

del.icio.us hatena bookmark

社内のブログサービス(JUGEM)で、以前開発していた JUGEM Desktop を 1.2 より 2.0 にアップデートしました。

Flickr 機能を追加し、自分の Flickr スクリーンネームでログインすれば、ブラウザ経由ではなく、AIR アプリケーションから直接ブログに最大8枚までの Flickr 写真とともに記事をエントリーすることができます。インタフェース的にはドラッグ&ドロップで写真を記事に追加する感じです。

写真好きな人とか、Flickr は Englishで JUGEM は日本語で切り分けたい人とか、ブラウザ経由が面倒な人はどうぞ。

詳細:http://jugem.jp/fun/jugemdesktop/

JUGEM Desktop 2.0
JUGEM Desktop 2.0


【使用技術&環境】
Flex Builder 3.0、Flash CS 3 Professional、ActionScript 3.0、AMFPHP 1.9、PHP、PEAR、Smarty、MySQL、Linux、Flickr API、PhotoShop CS 3


【担当領域】
Flash、プログラム、データベース、サーバ、デザイン(AIR アプリ側)
*JUGEM の紹介ページデザイン&コーディングは野原君が担当。色々どーもでした!