Technote

<!– more –>現在、オブジェクト倶楽部のメールマガジンで連載している「Flexで体験するリッチクライアント」を補足するTechnoteです。

第三回は、Flashコンポーネント内に画像を表示する手順を整理します。

■今回サンプルの完成イメージ

単純に画像が表示されるだけですが、まずはじめの一歩として取り組んでみましょう。

■ファイルの準備

プロジェクトファイルをダウンロードして、任意のディレクトリで解凍します。

• reflector.as3proj
• reflector.mxml
• ImageReflector.as

reflector.as3projをダブルクリックすると、FlashDevelopが実行されます。

■動かしてみよう！

細かい解説は後にして、ひとまずソースコードを記述したら、コンパイルです。 ツールバーの再生ボタンをクリックするとコンパイルが始まり、下ペインにコンパイルメッセージが出力されます。 「reflector.swf」ができあがると、自動的に再生がはじまり、
amazon.comから取得したWeb2.0ビギナーズバイブル[*1]の書籍画像が表示できましたね。

■カスタムコントロールを作るなら、UIComponent

Flex2でカスタムコントロールを作るには、いくつか方法がありますが、本サンプルのように、UIComponentクラスを継承するのが最も簡単です。UIComponentはPlayerからのイベントを制御してくれるので、カスタムコントロールを作る場合、特定のメソッドのみオーバライドすれば良い事になります。また、表示する画像自体は、_contentという属性に持たせることにします。UIComponentは表示要素のスーパークラスです。

■コントロールの値を変更する、commitProperties

commitProperties()メソッドをオーバライドして、このカスタムコントロールが持つ値を設定します。FlashPlayerがmxml上の

<local:ImageReflector />

を解析すると、内部的にはaddChild() メソッドを使用してコンポーネントが追加されまず。するとFlexはinvalidateProperties()を自動的に呼び出します。

つまり、必ず１度は最初にcommitProperties()が呼び出されるのです。カスタムコントロールの場合、コンストラクタでなく、ここで描画情報を初期化します。

まず、画像(Imageクラス)を実体として、UIComponentを作成します。

_content = UIComponent(new Image());

Amazonの画像を指定します。IDataRenderer.dataに画像のパスを指定すると、実際の描画はImageクラスが担当してくれます。

IDataRenderer(_content).data = "http://ec1.images-amazon.com/images/P/4839923221.09._SL200_SCZZZZZZZ_.jpg";

カスタムコントロールの要素として、自身の子エレメントとして追加します。

addChild(_content);

つまり、mxml上では、

      <local:ImageReflector >
        <Image />
      </local:ImageReflector >

と書いたのと同じような状態となります。

最後に、invalidateDisplayList()メソッドを呼びます。 invalidateDisplayList()を呼び出すと、画像の描画サイズを調整するため、updateDisplayList()が呼ばれる仕組みとなっています。

■コントロールのサイズを指定する、measure

invalidateProperties()では、commitProperties()の後にmeasure()メソッドの呼び出されます。このメソッドではFlashPlayer上に表示するサイズを設定する必要があるので、_contentから実際の画像サイズを取得して、measuredHeightとmeasuredWidthのプロパティに値を設定します。

■画像サイズを調整する、updateDisplayList

commitProperties()の最後で、子要素の描画を行うためにinvalidateDisplayList()を呼び出しています。ここでは主に子要素の表示サイズ、位置を調整します。

親要素のどの辺に、どのくらいの大きさで表示するか指定するのです。今回は画像を表示するだけなので、画像サイズを取得して、UIComponentのサイ ズに設定します。

_content.setActualSize(contentWidth,contentHeight);

■まとめ

今回は画像を表示するだけだったので、これほどコードを記述しなくても、もっと簡単な方法もあったのですが、この過程は鏡面効果画像を表示するまでに重要なものです。いよいよ次回は画像を鏡面加工しますので、楽しみに待っていてください。

[1]:Web2.0ビギナーズバイブル

著者名：伊藤 浩一、大津 真、岸田 健一郎、まえだ ひさこ、安井 力

Web2.0に不可欠なオープンソース技術にはどのようなものがあるのか、そして、それらを使用して具体的にどのようなWebアプリケーション作成ができるのかということを一冊の書籍としてまとめたものです。

http://www.amazon.co.jp/exec/obidos/ASIN/4839923221/xpjp-22

<!– more –>現在、オブジェクト倶楽部のメールマガジンで連載している「Flexで体験するリッチクライアント」を補足するTechnoteです。

第二回は、FlexでFlashコンポーネントを開発するのに便利なIDEを導入する手順を整理します。

■FlashDevelopとは

FlashDevelopは、フリーで利用可能なFlashの統合開発環境です。Flex Builderは有償版なので、タダで開発したいという人は、このツールを使うのがオススメです。Flex2,Flex3に必要なmxmlやActionScriptのコード補完機能などプログラミングをするには十分な機能を持っています。メニューなどすべて英語表記ですが、Eclipse IDEと操作性は似ているので、大きな問題はないでしょう。

■ダウンロードする

FlashDevelopのサイトへアクセスします。 最新版を入手するには、Releasesを選択します。
現時点の最新版は3.0.0 Beta7です。まだBetaですが3系を使うことを推奨します。
ダウンロードのリンクをクリックすると、ダウンロードが始まります。ダウンロードが終わるまでしばらく待ちましょう。

■インストールする

ダウンロードしたファイル(現時点ではFlashDevelop-3.0.0-Beta7.exe)を実行します。
画面の指示にしたがって進んで行くとインストールが始まります。
こちらはFlex本体と違って、それほど時間もかからずに終了します。

■はじめにすること

FlashDevelopはFlex SDKの環境は含んでいないので、パスを設定する必要があります。
まずインストールしたFlashDevelopを実行します。
Tools - Program Settings… （もしくはF10）を選択します。
左側のタブで「AS3Context」を選択し、Flex SDK Locationの値を設定します（デフォルトはc:flex_sdkなどになっています）。もしFlex Builderをデフォルトインストールしたなら、C:Program FilesAdobeFlex Builder 3sdks2.0.1 になってると思うので、Flex2のトップディレクトリを選択します。今回はメルマガがFlex2で先行しているので、Flex2で進めます。設定したらCloseで設定画面を閉じます。特に保存とかないのですが、設定は無事保存されるので気にしないことにします。

■次回

Flex2を使って画像を表示する簡単なサンプルからスタートしていきます。

<!– more –>現在、オブジェクト倶楽部のメールマガジンで連載している「Flexで体験するリッチクライアント」を補足するTechnoteです。

今回は第一回として、FlexでFlashコンポーネントを開発するための環境を整える手順を整理します。

■Flexとは

Flexは、プログラミング言語を使ってFlashアプリケーションを作るための製品群を表すもので、Flex製品ラインナップには、以下のようなものがあります。

• Adobe Flex SDK (ソフトウェア開発キット)
• Adobe Flex Builder
• Adobe Flex Data Services
• Adobe Flex Charting メルマガ執筆時点の正式版はFlex 2でしたので、このシリーズはFlex2でテストされたコードで記述されていますが、現在Flex 3がAirとして正式公開されています。おそらくFlex3でも動きます。
  

■ダウンロードする

早速Flexで開発する環境を作っていきましょう。本シリーズではWindows XP Proを使った手順を説明をしていきます。

Adobe Flexのサイトへアクセスします。

Flex2の頃、ダウンロードページには

• Flex Builderを30日間無償で試用（SDK込み）
• Flex 2 SDKを利用して、無償でFlexアプリケーションの開発・実装をスタート
• Flex Data Services 2 Expressエディションをダウンロード（無償） の3つのコンテンツがあったのですが、現在は、以下のようなページに変わっています。
  

なお、ダウンロードページへ行くには、Adobe IDでログインを求められます。Adobe ID自体の登録は無料ですので、まだな人は登録をしてからログインしてください。仕方がないので、日本語 | Windows | 425.0MB を選択して、ダウンロードします。またSDKだけダウンロードできるようになってほしいですね。。。

■インストールする

おそろしく大きいファイルFB3_WWEJ.exeのダウンロードが終了したら、ファイルを実行します。 インストールプログラムの実行にしばらく時間がかかります。。。。。。
日本語を選択してインストールを開始します。その後、ライセンスに同意とか、インストールする場所とか聞いてくるので、お好みで進んでいきます。インストールを開始すると、以下のような画面になります。
ボクのマシンは結構スペックが良いと思っているのですが、それでも20分近く時間がかかりました。気長に待ちましょう。。。。
インストールが完了すると、自動的にインストールしたディレクトリ（デフォルトだとC:Program FilesAdobeFlex Builder 3）が開きます。よくみると、ディレクトリ名にsdksというフォルダがあるのに気が付きます。ディレクトリを移動すると、
のようになっていて、なんだFlex2もあるじゃないですか。それぞれのバージョンディレクトリの下、たとえば2.0.1frameworkslocaleには日本語のファイルも入っているようで、コンパイルメッセージも無事日本語で表示できそうです。しかしそうなると、やっぱり個別にインストールさせてほしい。。。。とにかくダウンロードとインストールは辛抱です・・・

■次回は

Flex Builderは便利だし使いやすいのですが、有償なので仕事以外では使うのをためらいます。そんなときはフリーの開発環境FlashDevelopを使うと良いと思います。次回はこのFlashDevelopのインストール方法を紹介したいと思います。

<!– more –>昨日開催されたOpera Backstage Tokyoへ参加してきました。

あいにくの雨の中、ライトニングトークスをやるので、ものすごく重いＰＣを抱えてノルウェー大使館へ。

時間が読めなかったので、現地でランチでいいや、と思ったのですが、良く考えるとそこはセレブな街。ランチがすごく高いです。。。。。

まぁなんかあるだろう、とお気楽モードで歩いていたら、ラーメン香月がありました。なんとかなるもんです。いつもながらの出たとこ勝負。

後はEZナビウォークの力を借りて、無事大使館へ到着です。

そういえば大使館はスウェディッシュスタイルで、スウェーデン大使館に入った以来、というかそれ以外では初めて。なんだかプールがあったりして良い感じでした。ホールはスウェーデン大使館の方が広いかな？

アジェンダを見たら、ＬＴが先頭バッターじゃないですか・・・

いくらＬＴ慣れているとはいえ、最初は緊張感が違いました。まぁそんなこんなで時間がたっぷりおして、イベントは終了。その後、広尾の土間土間で懇親会でしたが、翔泳社のかたと神田で飲み会が入っていたので、19:30に抜け出てしまいました。そういえばグループディスカッションの結果は発表したのかなぁ～？

名刺交換していただいた皆様、ありがとうございました。今後ともよろしくお願いいたします。

| View | Upload your own

その後、神田から帰る頃には、ほとんど記憶がないくらい呑んでしまい・・・