Adobe Flash上級講座 -2ページ目

Flash Player 10.2 正式リリース

Adobe社から、米国時間で2月9日に、「Flash Player 10.2」が正式リリースされました。

新たな動画技術である「Stage Video」が目玉のようです。

プロダクトマネージャーであるトムグエン氏から詳細の説明がされているので、和訳してみました。
中学レベルの英語ですので、直訳が頻繁していますが、、、内容は伝わると思いますので、お仕事の参考にどうぞ。

オリジナル記事はコチラ
—–

Flash Player 10.2到来。 Windows, Mac, そしてLinuxで利用できます。

今日、Windows, Mac, そしてLinux用に「Flash Player 10.2」をリリースします。
特に、このリリースで、ビデオパイプライン全体で、フルハードウェアアクセレレーションによるクラス最高の美しい動画再生が行えるマルチプラットフォーム技術「Stage Video」を紹介できることに興奮しています。加えて、10.2ではβ版で検証していた沢山の新機能を提供します。例えば、「カスタムネイティブマウスカーソル」、「マルチモニターでのフルスクリーンサポート」、「IE9でのハードウェアアクセレレーションレンダリング」そして、テキストの視認性を向上させる「拡張サブピクセルレンダリング」などです。

「The City That Knows How」とは、動画の歴史です

ここサンフランシスコでは、人々の絵に対する思いがどう変わっていったかについて、僅かながら歴史があります。1870年代、サンフランシスコの写真家、エドワードマイブリッジは、世界に先駆けて、動画を撮っていました。フィリオファーンズワースは202グリーンストリートにある彼の研究所で、世界初のテレビ映像電波を送りました。

そして、2002年、サンフランシスコの小さなチームは、Flash Player上で9～10台繋がれたコンピューターへなめらかな動画を送り出す映像を紹介しました。そして、インターネット全体での動画再生ができるようになりました。３年前、そのチームは臨場感たっぷりのH.264ビデオを紹介しました。Flash Playerは美しいweb動画作成の手助けをしています。そして、Flash Player 10.2は「Stage Video」技術によって、この伝統を引き継いでいきます。

「美しい動画をステージへ呼び込みます」

「Stage Video」はウェブサイト上で、全てのビデオパイプラインに渡って、フルハードウェアアクセレレーションを可能にします。これは、Flash Player 10.1のH.264ハードウェアアクセレレーションの成果を元にしたものです。Stage Videoハードウェアアクセレレーションによって、Flash Playerが高画質動画を再生してても、劇的にCPU負荷を下げつつ、より良いパフォーマンスを発揮でき、バッテリーを長く持たせられます。我々の環境下でのテストでは、最高で34倍のパフォーマンスアップがみうけられました。

言い換えると、Stage Videoを搭載したFlash Playerでは、1080pのHD動画を、一般的なMacやWindowsコンピューターにおいて、僅か1～15%のCPU使用率で難なく再生できます。 – しかもあらゆるプラットフォーム、ブラウザーにおいて、つまり、最高のビデオ体験をあらゆる人々に可能とさせるのです。ネットブックからデスクトップまで、何百万とあるPCが今、滑らかなweb HDホームシアターとなります。

注釈として、Stage Videoのパフォーマンスはすぐには目に見えないでしょう。webサイトやコンテンツプロバイダーがサイトにあるビデオを、Stage Videoに対応した動画に更新する必要があるからです。開発者に分かりやすく言うと、swfファイルを更新するということです。しかし、既存のビデオライブラリーやインフラでは互換性のために、現状を維持する必要もあるでしょう。しかし、新しいFlash Playerの普及は加速しており、10億以上の人々はFlash Player 10.2のStage Videoによる恩恵を受ける準備がもうじき整うでしょう。

VimeoやBridgtcove、Epixそして、YouTubeなどの会社では既にStage Videoによる素晴らしい動画体験のをお届けする準備に取りかかっています。近々、Stage Videoのパフォーマンスを体験できるでしょう。Flash Player10.2へアップデートをすれば、Stage Videoのサンプルを今すぐ体験できます。何万とあるサイトではブライトコーブ社のプレイヤーが利用でき、ブライトコーブ社のスタッフであるジェフワコットは、”ブライトコーブ社は引き続き技術革新を行い、素晴らしい動画体験をお届けします。我々はStage Videoのパフォーマンスと効率の良さに圧倒されており、本当に興奮しながら、この技術の飛躍的な進歩をお客様へお届けします。”と説明しています。また、Vimeo社のライアンヘフナーは、”Vimeoのユーザーは沢山のHD動画コンテンツをアップロードしているので、弊社のサイトではHDが標準画質となっており、Stage Video利用の決断は考えるまでもないことでした。我々は、最新のテクノロジーに精通することを推奨しており、そしてこれらのテクノロジーによってユーザー体験が広がり、win-winの関係を築くものと思います。”。もっと沢山の人に、豪華で、滑らかなHDビデオを届けたい人々はなおいっそう興奮するはずです。そしてより多くのサイトでStage Videoがお目見えすることでしょう。

その他のFlash Player 10.2での新機能

新技術Stage Videoと共に、Flash Playerではより磨き抜かれたユーザー体験を追加しています。

・最高のビデオでは人は没入するものです。そこで、ワンクリックで、真のフルスクリーン再生を可能にしました。Flash Player 10.2ではマルチディスプレイでのフルスクリーンをサポートし、1つのモニターで大好きな動画をフルスクリーン再生しつつ、もう１つのモニターで作業をすることが出来ます。

・カスタムネイティブマウスカーソルをサポートし、デザイナーや開発者が、ゲームやアプリケーション用に、滑らかに反応する、静的もしくは動的なカーソルを作れます。

・新しい拡張サブピクセルテキストレンダリングは、特に複雑な文字を使う言語での視認性を向上させます。

・マイクロソフトからまもなく登場するInternet Explorer9でのGPUレンダリング技術のサポートも含まれています。

今日そして未来に至るまで

今日からFlash Player 10.2をインストールできます。我々は、開発者、一般ユーザーにかかわらず、皆さんにおすすめします。そして、どう感じたか教えて下さい。モバイルのアップデートも迫っています。次週に開催されるMobile World Congressで、Flash PlayerとAIR を含む電話やタブレット端末用の、次期Flashプラットフォーム実行環境についてもお知らせします。
我々は今日のリリースにぞくぞくしています。そしてお楽しみいただけることを願っております。

トムグエン
Flashプラットフォーム実行環境のプロダクトマネージャー

as3isolib 解説4 「IsoView」

さて、ActionScript3.0(as3)を使ってアイソメトリックな世界を簡単に作れるライブラリー「as3isolib」の解説4回目。
概要やインストール方法については解説第一回目を見てみてください。

今回は、「IsoView」クラスについて説明します。
IsoViewクラスはIsoSceneを使って作ったグリッド世界の表示の仕方をサポートしてくれるクラスです。
3Dソフトなどでおなじみの、カメラのような役割をもっているようです。

まずは、IsoViewクラスを使って、おなじみの箱を表示してみましょう。
　

package
{
　　　　　　　　import as3isolib.display.IsoView;
　　　　　　　　import as3isolib.display.primitive.IsoBox;
　　　　　　　　import as3isolib.display.scene.IsoGrid;
　　　　　　　　import as3isolib.display.scene.IsoScene;

　　　　　　　　import flash.display.Sprite;
　　　　　　　　import flash.display.StageAlign;
　　　　　　　　import flash.display.StageScaleMode;

　　　　　　　　public class IsoViewSample extends Sprite
　　　　　　　　{
　　　　　　　　　　　　　　　　public function IsoViewSample()
　　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　　　　　　　stage.align = StageAlign.TOP_LEFT;
　　　　　　　　　　　　　　　　　　　　　　　　stage.scaleMode = StageScaleMode.NO_SCALE;

　　　　　　　　　　　　　　　　　　　　　　　　var scene:IsoScene = new IsoScene();
　　　　　　　　　　　　　　　　　　　　　　　　var isoView:IsoView = new IsoView();
　　　　　　　　　　　　　　　　　　　　　　　　// IsoSceneをIsoViewに追加
　　　　　　　　　　　　　　　　　　　　　　　　isoView.addScene( scene );
　　　　　　　　　　　　　　　　　　　　　　　　// IsoViewをdisplayListに追加
　　　　　　　　　　　　　　　　　　　　　　　　addChild( isoView );

　　　　　　　　　　　　　　　　　　　　　　　　// 箱を追加
　　　　　　　　　　　　　　　　　　　　　　　　var box:IsoBox = new IsoBox();
　　　　　　　　　　　　　　　　　　　　　　　　scene.addChild( box );

　　　　　　　　　　　　　　　　　　　　　　　　// 分かりやすいようにグリッドも追加
　　　　　　　　　　　　　　　　　　　　　　　　var grid:IsoGrid = new IsoGrid();
　　　　　　　　　　　　　　　　　　　　　　　　scene.addChild( grid );

　　　　　　　　　　　　　　　　　　　　　　　　// IsoSceneではなく、IsoViewでレンダリング(IsoSceneでやっても問題はありません)
　　　　　　　　　　　　　　　　　　　　　　　　isoView.render( true );
　　　　　　　　　　　　　　　　}
　　　　　　　　}
}

自動的に枠線がついて、IsoSceneを真ん中に表示してくれます。
特にサイズを指定しない場合は表示領域は400 x 250となります。
今までは、IsoSceneのrenderメソッドを呼んでいたところを、IsoViewのrenderを呼んでいます。

IsoViewでは複数のsceneに対応しているので、IsoViewに複数のIsoSceneをaddSceneした後、IsoViewのrenderを呼ぶことで、まとめて全てのシーンをレンダリングすることが出来ます。
　
ちなみに、IsoScene単独で表示させると左上の原点を中心に表示されましたよね。
参考までIsoSceneだけの場合のソースとスクリーンショットは次の通り。
　

package
{
　　　　　　　　import as3isolib.display.primitive.IsoBox;
　　　　　　　　import as3isolib.display.scene.IsoGrid;
　　　　　　　　import as3isolib.display.scene.IsoScene;

　　　　　　　　import flash.display.Sprite;
　　　　　　　　import flash.display.StageAlign;
　　　　　　　　import flash.display.StageScaleMode;

　　　　　　　　public class IsoViewSample2 extends Sprite
　　　　　　　　{
　　　　　　　　　　　　　　　　public function IsoViewSample2()
　　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　　　　　　　stage.align = StageAlign.TOP_LEFT;
　　　　　　　　　　　　　　　　　　　　　　　　stage.scaleMode = StageScaleMode.NO_SCALE;

　　　　　　　　　　　　　　　　　　　　　　　　var scene:IsoScene = new IsoScene();
　　　　　　　　　　　　　　　　　　　　　　　　// IsoSceneをdisplayListに追加
　　　　　　　　　　　　　　　　　　　　　　　　scene.hostContainer = this;

　　　　　　　　　　　　　　　　　　　　　　　　// 箱を追加
　　　　　　　　　　　　　　　　　　　　　　　　var box:IsoBox = new IsoBox();
　　　　　　　　　　　　　　　　　　　　　　　　scene.addChild( box );

　　　　　　　　　　　　　　　　　　　　　　　　// 分かりやすいようにグリッドも追加
　　　　　　　　　　　　　　　　　　　　　　　　var grid:IsoGrid = new IsoGrid();
　　　　　　　　　　　　　　　　　　　　　　　　scene.addChild( grid );

　　　　　　　　　　　　　　　　　　　　　　　　// レンダリング
　　　　　　　　　　　　　　　　　　　　　　　　scene.render( true );
　　　　　　　　　　　　　　　　}
　　　　　　　　}
}

　

　
おもいっきり見切れていますが左上が原点なので合っています。
　
　
それでは、IsoViewが備えている表示サポート機能について纏めて説明しちゃいます。
とはいえまだ発展途上なのか主要なメソッドは2つだけ。

・zoom ( zoomRate:Number ):void
文字通りズームさせます。(clickでズームイン、Alt+Clickでズームアウトします）

// ソース末尾に追加
addEventListener( MouseEvent.CLICK, _onClick );
function _onClick( e:MouseEvent ):void
{
　　　　　　　　if ( e.altKey )
{
　　　　　　　　isoView.zoom( isoView.currentZoom - 0.1 );
}
else
{
　　　　　　　　isoView.zoom( isoView.currentZoom + 0.1 );
}

・pan ( px:Number, py:Number ):void
IsoViewをカメラに見立てて、「カメラを」どれだけ動かすか。という移動量を指定します。
目的座標じゃなくて、「移動量」です。
どう使うのか、ちょっとナゾです。
　
　
最後にIsoViewの表示状態を変えるプロパティを紹介します。
・setSize( width:Number, height:Number):void
表示するシーンのサイズを指定できます。デフォルトは400 x 250です。
　
・set showBorder( value:Boolean ):void
falseをセットすると枠線を消せます。
　
・set clipContent( value:Boolean ):void
setSizeで指定したサイズにマスクされて表示されますが、clipContentにflaseを指定するとマスクが解除されます。
　
　
IsoViewの説明はこれでおしまいです！
次回は、自分で用意した好きな画像をas3isolib上で表示させる方法について説明します。

as3isolib 解説3 「イベント処理」

さて、ActionScript3.0(as3)を使ってアイソメトリックな世界を簡単に作れるライブラリー「as3isolib」の解説3回目。
概要やインストール方法については解説第一回目を見てみてください。

今回は、「as3isobliでのEvent処理」について説明します。
Flashの貼り付け方が分からないので、実際のサンプルは外部ブログの同一記事を参考にしてください。すいません。

さっそく、箱を作って、ドラッグしてみます。
普通に書くとこうなると思います。

package
{
import as3isolib.core.IsoDisplayObject;
import as3isolib.display.primitive.IsoBox;
import as3isolib.display.scene.IsoScene;

import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;

public class IsoLibEventSample extends Sprite
{
private var _scene:IsoScene;
private var _box:IsoBox;
public function IsoLibEventSample()
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

_scene = new IsoScene();
_scene.hostContainer = this;

// 箱を作る
_box = new IsoBox();
_box.x = 100;
_scene.addChild( _box );

// クリックイベントをセット　
_box.addEventListener( MouseEvent.MOUSE_DOWN, _dragEvent );
_box.addEventListener( MouseEvent.MOUSE_UP, _dragEvent );

// ドラッグ中、連続的に描画されるようにする
addEventListener( Event.ENTER_FRAME, _render );
}

private function _dragEvent( e:MouseEvent ):void
{
switch ( e.type )
{
case MouseEvent.MOUSE_DOWN:
e.currentTarget.startDrag();
break;
case MouseEvent.MOUSE_UP:
e.currentTarget.stopDrag();
break;
}
}

// 描画
private function _render( e:Event ):void
{
_scene.render();
}
}
}

しかし、箱をドラッグしてみると、次の様なエラーが起こってしまいます。

TypeError: Error #1034: 強制型変換に失敗しました。eDpLib.events::ProxyEvent@2c659f91 を flash.events.MouseEvent に変換できません。

勝手にMouseEventがProxyEventに書き換えられちゃいました。
　
実はas3isolibでは、イベントは全てProxyEventに変換されます。
この処理は、as3isolibのルートクラスとなるNodeクラスが継承しているEventDispatcherProxyが行っています。
この中で全てのイベントを1つの関数で全てハンドリングして、せっせとProxyEventを作って送り返しています。
興味がある人はソースをのぞいてみて下さい。イベントを伝達する仕組みが見れて興味深いです。
　
送られてくるProxyEventには３つのパラメータがあります。
　

・proxy:IEventDispatcher　クリックされたIsoDisplayObject(ここでは箱)
・proxyTarget:IEventDispatcher　クリックされたView要素(ここでは箱のグラフィック(Sprite))
・targetEvent:Event　本来ハンドリングしたかったイベント
　

それでは、これらを元にイベントハンドリング部分のソースを書き換えてみます。

// ProxyEventでハンドリングをする
private function _dragEvent( e:ProxyEvent ):void
{
// 本来送りたかったMouseEventとクリックを受け取った本体を取得する
var event:MouseEvent = e.targetEvent as MouseEvent;
var target:Sprite = e.proxyTarget as Sprite;

switch ( event.type )
{
case MouseEvent.MOUSE_DOWN:
target.startDrag();
break;
case MouseEvent.MOUSE_UP:
target.stopDrag();
break;
}
}

これで問題無くドラッグが出来るように見えます。
(※画像をクリックすると外部のブログの同一記事が開きます。動くサンプルがみたい人はどうぞ)

しかし、これでは、IsoBox(箱)を動かすのではなく、箱の中に入っているグラフィックだけを動かす事になってしまいます。traceしてみると、ドラッグしても、IsoBoxの座標は最初に設定した( 100, 0 )のままです。
そこで、IsoBox自体を動かすようにソースを書き換えてみます。

// _dragEventを書き換えて、新しく、_dragBoxを追加
private function _dragEvent( e:ProxyEvent ):void
{
var event:MouseEvent = e.targetEvent as MouseEvent;
switch ( event.type )
{
case MouseEvent.MOUSE_DOWN:
// ステージ上でのマウスの動きを追う
stage.addEventListener( MouseEvent.MOUSE_MOVE, _dragBox );
break;
case MouseEvent.MOUSE_UP:
stage.removeEventListener( MouseEvent.MOUSE_MOVE, _dragBox );
break;
}
}

private function _dragBox( e:MouseEvent ):void
{
_box.x = e.stageX;
_box.y = e.stageY;
}

(※画像をクリックすると外部のブログの同一記事が開きます。動くサンプルがみたい人はどうぞ)

分かりづらいですが、今度はちゃんとIsoBoxの座標が変わります。
しかし動きが変です。
これは、MouseEventから取得できる直交座標と、as3isolibで使われるグリッド座標が違うからです。
IsoMathクラスを使うと直交座標系を簡単にグリッド座標系に変換できるので、上で追加した_dragBoxメソッドを次の様に書き換えてみます。

private function _dragBox( e:MouseEvent ):void
{
// 直交座標系をグリッド座標系に変換する
// PtはPointクラスを継承した、as3isolibの座標系を表すためのクラス
// IsoMathはas3isolibでのグリッド座標系とFlashの直交座標系を行き来させるための計算クラス
var pt:Pt = new Pt( e.stageX, e.stageY );
IsoMath.screenToIso( pt );
_box.x = pt.x;
_box.y = pt.y;
}

(※画像をクリックすると外部のブログの同一記事が開きます。動くサンプルがみたい人はどうぞ)

ちゃんとドラッグできるようになりました。
こんな感じで他のイベントも問題無く処理ができると思います。
　
　
as3isolibのイベント処理の説明はこれでおしまいです！
次回は、表示を簡単にしてくれるIsoViewクラスについて説明したいと思います。