akihiro kamijo: Flash Archives

March 26, 2008

Flash オーサリングのセキュリティ情報

Flash CS3 および Flash 8 関連のセキュリティ情報が公開されました。（Flash CS3 Professional、Flash Professional 8およびFlash Basic 8における潜在的な脆弱性）

Windows 版に fla ファイルを利用した攻撃に悪用できる脆弱性が見つかったという報告です。怪しい fla ファイルを受け取ったら開かないよう注意してください。この問題は時期メジャーリリースで修正予定とのことです。

Posted by ackie at 06:15 PM | Comments (0)

December 17, 2007

Adobe AIR ベータ 3 対応の Flash CS3 Professional アップデート

Adobe AIR ベータ 3 に対応した Flash CS3 Professional のアップデートがちょっと遅れて公開されました。（AIR:Flash_CS3_Professional_Update@Labs）

今回サポートされるプラットフォームは以下の通りです。

  • Windows® XP sp2
  • Windows® Vista Home Premium, Business, Ultimate, Enterprise (certified for 32-bit) editions.
  • Mac OS X 10.4.x (Intel or PPC)

インストールの際は、まず AIR ベータ 3 の実行環境をインストールします。 （AIR download@Labs）

AIR ベータ 3 用アップデータをインストールする前には Flash CS3 Professional (9.0.2) 用の Flash Player アップデートもインストールする必要があります。Adobe の Flash サポートサイトから日本語版をダウンロードしてください （Adobe Flash Support Center）。この数日に Adobe Update Manager からの自動更新でアップデート済の方はこの手順をスキップできます。

事前準備が環境したら、以下のファイルをダウンロードします。

Macintosh: flashcs3 air extension p3 jp 121407.dmg (49 MB)

Windows: flashcs3 air extension p3 jp 121407.exe (16 MB)

なお、今回のアップデータを適用する前に以前のバージョンをアンインストールすることをお勧めします。ベータ 1 を削除せずにベータ 3 をインストールした場合は、必ず以下のスクリプトをダウンロードして実行してください。

ベータ 1 削除用スクリプト: （右クリックまたは ctrl クリックして jsfl ファイルとして保存します）
flashcs3_air_extension_p1cleanup_jp_100107.jsfl (1KB)

アンインストールの手順は以下の通りです。

Macintosh

  • /Applications/Adobe Flash CS3/ を開き AIK フォルダーを削除します
  • /Applications/Adobe Flash CS3/First Run/Commands を開き以下のファイルを（存在すれば）削除します
    • - AIR - Application and Package Settings.jsfl
    • - AIR - Package AIR File.jsfl
  • /Users/<username>/Library/Application Support/Adobe/Flash CS3/<lang>/Configuration/Commands/ を開き以下のファイルを（存在すれば）削除します
    • - AIR - Application and Package Settings.jsfl
    • - AIR - Package AIR File.jsfl

Windows

  • \Program Files\Adobe\Adobe Flash CS3\ を開き AIK フォルダーを削除します
  • \Program Files\Adobe\Adobe Flash CS3\<lang>\First Run\Commands\ を開き以下のファイルを（存在すれば）削除します
    • - AIR - Application and Package Settings.jsfl
    • - AIR - Package AIR File.jsfl
  • \Document and Settings\<username>\Local Settings\Application Data\Adobe\Flash CS3\<lang>\Configuration\Commands\ を開き以下のファイルを（存在すれば）削除します
    • - AIR - Application and Package Settings.jsfl
    • - AIR - Package AIR File.jsfl

まだ、日本語に対応していないため、パス名等に日本語が含まれると動作しません。他にもいくつもバグがあります。主なものだけいくつか挙げてみると、

Mac and Win:

  • 最初のコンパイル時に定義が見つからない旨のコンパイルエラーが表示されることがあります
  • トレースの出力がデバッグ時にしか表示されません。
  • flash.net クラスを使用するには ServiceMonitorShim コンポーネントをコンポーネントパネル内の AIR Service Monitor からライブラリにドラッグします
  • 以前のバージョンで作成した AIR 用の fla をそのまま使用する場合はアプリケーション記述ファイルを明示的に作り直す必要があります

Mac のみ:

  • パッケージ作成に失敗してもエラーが表示されません

英文になりますが、ドキュメントが以下のリンクから参照できます。

Posted by ackie at 10:01 AM | Comments (0)

December 05, 2007

Flash Media Server 3 発表と Flash Player アップデート公開

Flash Media Server 3 が発表されました。また、あわせて Flash Player 9 のアップデートも公開されました。新しい Flash Player のバージョンは 9.0.115.0 です。Flash オーサリング用のデバッグプレーヤも近々公開予定です。

今回の発表により H.264 ビデオと HE-AAC オーディオが正式にサポートされます。以前にもお知らせしたようにフル HD の再生も可能です。その他に、新しく暗号化したストリーミングを実現する RTMPE プロトコルの追加や、再生用の SWF を勝手に利用されないためのチェック機能などコンテンツ保護機能も拡張されています。

今回のバージョンから FMS は2 種類のサーバが提供されるようになります。1 つ目は従来の FMS のバージョンアップにあたる Flash Media Interactive Server 3 (FMIS3) です。2 つ目はビデオストリーミングに特化した新しいパッケージの Flash Media Streaming Server 3 (FMSS3) です。

FMSS は小規模な一方向のコンテンツ配信に使用するためのサーバという位置づけで、双方向のインタラクティブな通信やエッジサーバーを使用した構成等には FMIS が必要になります。その分価格も異なり、US 価格では FMIS が $4,500 からに対して FMSS は $995 （約 10 万円） という発表がされています。

Flash Media Server 3 (FMS3) の出荷は US では来年1月予定とのことです。例によって日本語版は無いため、日本での発売もほぼ同時期になるのではないかと思います。

Posted by ackie at 09:18 AM | Comments (2)

July 31, 2007

Adobe Flash Ajax Video (FAVideo) コンポーネント

新しく Adobe Flash Ajax Video (FAVideo) コンポーネントが Adobe Labs に公開されました。（Flash-Ajax Video Component@Labs） FAVideo は Ajax アプリケーションから Flash ビデオを利用するためのコンポーネントで、JavaScript からビデオの表示位置や大きさを指定したり再生をコントロールすることができます。Flash Player 8 以降がインストールされている環境であればビデオを表示できるようになります。

FAVideo コンポーネントはソースコードが BSD ライセンスの元で (Flash-Ajax Video Component:License) 公開されています。サンプルを含む zip ファイルが Labs よりダウンロードできます。 （ favideo_072707.zip : 2.19MB　－　FAVideo コンポーネント自体は 15KB 程です。念のため。）

使い方は、下の一行を追加して、

<script src="FAVideo.js" type="text/javascript"></script>

スクリプトブロック内で、下のように記述します。

videoPlayer = new FAVideo("id", "name.flv");

スキンの変更も可能です。Dreamweaver に Flash ビデオ埋め込み機能がありますが、これと同じようなものだと考えてよさそうです。

Posted by ackie at 04:58 PM | Comments (0)

April 27, 2007

Flash CS3 で UIMovieClip を拡張して Flex コンポーネントを作成

Flash CS3 ではコンポーネントの親クラスを指定できます。指定する親クラスには提供されているクラス （MovieClip など） だけでなく、それらのクラスを自分で拡張したものも利用できます。今回は Flash Integration Kit が提供する UIMovieClip を拡張して利用するケースを紹介します。

カスタムイベントの利用

UIMovieClip は標準的な Flex コンポーネントのイベントが一通り定義されています。そのため Flash CS3 で作成したコンポーネントでも特別な追加作業なしで大きさや位置の変化をイベントを発行して Flex フレームワークに通知することができます。

もし、それ以外のカスタムイベントが必要な場合には、UIMovieClip を拡張して新しいクラスを作成し、そこに必要なカスタムイベントを定義します。そしてこの新しく作成したクラスを Flash コンポーネントの親クラスとして定義するとカスタムイベントが利用可能になります。

以下に簡単な例を紹介します。AlarmClock というクラスが、設定された時刻になると alarmEvent をディスパッチするという設定です。

まず Event メタデータをクラス定義に追加します。 

[Event("alarmEvent")]
public class AlarmClock extends UIMovieClip
{
  // ここに必要なクラス定義を記述
}

AlarmClock クラスは UIMovieClip のサブクラスになっています。

次にムービークリップを作成し、実際にイベントをディスパッチするコードを記述します。（もちろんイベントをディスパッチするコードはクラス定義の中に記述するということにしてもかまいません）

// 例えばムービークリップのタイムラインのフレーム内に
if (currentTime == alarmTime)
{
  dispatchEvent(new Event("alarmEvent"));
}

これでムービークリップの親クラスとして AlarmClock を指定すれば Flash 側の作業は完了です。Flex 側では下のようにして alarmEvent を他のイベントと同様に利用できます。

<myComps:Clock alarmEvent="showAlarm()" />

スクリプトによるサイズ設定

measuredWidth と measuredHeight は”標準値として使用される” Flex コンポーネントの幅と高さをしめす属性です。UIMovieClip にもこの属性があります。Flash コンポーネントの親コンポーネントが十分な大きさを持っていれば Flash コンポーネントの幅と高さは大抵 measuredWidth と measuredHeight の値になります。

measuredWidth と measuredHeight の get を上書きすると親コンポーネントに通知する大きさを設定することができます。下の例のようにそれぞれの属性の get を上書きします。 

package {
  import mx.flash.UIMovieClip;
 
  public dynamic class UIMCChild extends UIMovieClip
  {
    override public function get measuredWidth():Number
    {
      return _widthOfMyWish;
    }
    override public function get measuredHeight():Number
    {
      return _heightOfMyWish;
    }
  }
}

さて、Flex では親コンポーネントが子コンポーネントの大きさを設定する際 setActualSize() メソッドを呼びます。その際に設定される大きさはコンポーネントが期待していた大きさになるとは限りません。

このような場合 setActualSize() メソッドを上書きすることで Flash コンテンツ側の大きさが変更された際に対応するロジックを記述することができるようになります。

package {
  import mx.flash.UIMovieClip;
 
  public dynamic class UIMCChild extends UIMovieClip
  {
    override public function setActualSize(newWidth:Number, newHeight:Number):void
    {
      if (newWidth != _width || newHeight != _height)
      {
        _width = newWidth;
        _height = newHeight;
 
        // ここで必要な処理があれば記述
        // 例えば子オブジェクトの再配置など
      }
    }
  }
}

Posted by ackie at 05:54 PM | Comments (0)

April 25, 2007

Flex Component Kit for Flash CS3 を使った Flex コンポーネントの開発

以下は、Flex Component Kit for Flash CS3 を使った Flex コンポーネントの開発における注意点です。

基準点

基準点はシンボルの左上の角である必要があります。もし他の箇所が基準点になっている場合は別のシンボルでくるんで外側のシンボルの基準点が左上になるようにすれば OK です。

フレームレート

Flash コンポーネントのフレームレートと Flex のフレームレートは同じでないと正しく動作しません。Flex のフレームレートはデフォルトで 24 fps になっていますのでそれにあわせるのがお勧めです。Flex 側のフレームレートを変えることも可能ですが、これは非常用の手段くらいの位置づけと考えた方がよさそうです。特に 24 fps より遅くするとと UI の表示がもたつくことがあるようです。

コンテンツのサイズ

通常のケースでは Flash コンテンツの大きさはそのまま Flex フレームワークに認識されます。アニメーションにより Flash コンテンツの大きさが変わる場合、その大きさの変化も認識されるため、変化にあわせたコンテンツのレイアウト変更も自動的に行われます。

以下のコードは BlueBox という Flash のコンポーネントを Flex アプリケーション内に表示する例です。 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:myComps="*" width="300" height="250">
    <myComps:BlueBox />
  <mx:Button />
</mx:Application>

このとき BlueBox コンポーネントがモーショントゥイーンなどで大きさの変わるアニメーションを表示すると、アニメーションにあわせて Flex アプリケーションのレイアウトも変化します。今回の例では、BlueBox の大きさに合わせてボタンの位置が上下に移動することになります。

大きさの自動認識に関してはいくつかの注意事項があります。例えば、シェイプトゥイーンを使うとキーフレームのタイミングだけでしか大きさが認識されません。また、マスクされたコンテンツの大きさは、マスクされた結果として表示されている領域ではなく、コンテンツ全体の大きさになります。

その他にもレイアウトを固定したい場合など、自動認識されるコンテンツの大きさでは都合の悪い場合には、代理のオブジェクトを指定することが可能です。コンテンツ制作時、ステージに "boundingBox" という名前のオブジェクトを作成すると、そのオブジェクトの位置と大きさがコンテンツ自体の位置と大きさとして使用されるようになります。

boundingBox の visible 属性を false にしておけば boundingBox オブジェクトが表示されることはありません。"Make Flex Component" でも自動的にこの属性設定が行われます。

少し分かりにくいですが、下の図のステージ領域の青い線だけの長方形が boundingBox という名前のオブジェクトになっています。これで、実際に画面上に表示されるのが boundingBox 内の青い四角いオブジェクトでも Flex からは boundingBox の位置と大きさが認識されるようになります。

boundingbox.jpg

なお、"boundingBox" という名前は UIMovieClip の boundingBoxName 属性に設定されています。この属性値を変えることで、別の名前のオブジェクトを代理オブジェクトとして指定することも可能です。

ラベルとステート

Flex にはアプリケーションのビューの状態を "ステート" として定義する機能があります。UIMovieClip はラベル名の付いたフレームを Flex のステートと対応付けることができます。

Flex アプリケーション内で Flash コンポーネントの currentState 属性を指定すると （指定された名前のラベルが存在すれば） 同じラベル名のフレームに移動します。gotoAndStop(currentState) のように使えるわけです。

下の図ではタイムラインに "ellipse", "rectangle", "triangle" の３つのラベルが定義されています。

timelinestates.jpg

これらのラベルをステートとして Flex のコードから指定しているサンプルです。ボタンを押すと Shapes コンポーネントが該当するラベルのフレームに移動します。 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:myComps="*" width="300" height="250">
  <mx:HBox>
    <mx:Button label="Ellipse" click="s.currentState='ellipse'" />
    <mx:Button label="Rectangle" click="s.currentState='rectangle'" />
    <mx:Button label="Triangle" click="s.currentState='triangle'" />
  </mx:HBox>
  <myComps:Shapes id="s" />
</mx:Application>

トランジション

トランジションはあるステートから別のステートへの移行時に視覚的な表現を加える Flex の機能です。Flash コンテンツを使った場合、トランジションをタイムライン上のアニメーションとして作成することができます。

トランジションの開始フレームと終了フレームはラベル名を使って指定します。例えば、state1 という名前のステートから state2 というステートに移行する場合、UIMovieClip はアニメーションの開始フレームとして "state1-state2:start" という名前のフレームを探します。同様に終了フレームとして "state1-state2:end" というフレームを探します。

下の図では "state1" がフレーム 1 のラベル名、トランジション開始になる "state1-state2:start" がフレーム 7 のラベル名になっています。隠れていますが、トランジション終了のラベルになる "state1-state2:end" がフレーム 22 にありますので、コンポーネントが state1 のステートのときに state2 にステートを変更するとフレーム 7 からフレーム 22 が再生されてから "state2" のフレームが表示されます。

timelinetransitions.jpg

反対に、ステートが state2 から state1 に変更された場合にはタイムラインが 22 フレームから 7 フレームに逆に再生されます。ただし、"state2-state1:start" と "state2-state1:end" が明示的に定義されていればそちらが優先されます。

トランジションのラベルには "*" も使用することができます。例えば "state1-*:start" のようにして、state1 から全てのステートへの移行開始という意味に使うことができます。同様に "*-state1:start" はどんなステートからでも state1 に移行開始する場合という意味になります。"*" で指定したラベルは逆再生の指定にも有効です。

トランジションのラベルに使用できるパターンは以下の通りです。最後の *-* 以外は逆再生にも使用されます。

  • from-to
  • from-*
  • *-to
  • *-*

ツールチップ

UIMovieClip には toolTip という属性があります。この属性に値を設定しておくと、コンテンツ上にマウスが移動したときに Flex 標準のツールチップが表示されます。 

<myComps:BlueBox toolTip="MXML Tooltip"/>

Posted by ackie at 04:44 PM | Comments (0)

April 24, 2007

Flex Component Kit for Flash CS3

Flex Component Kit for Flash CS3 が公開されました。 （Flex Component Kit for Flash CS3@Labs） この kit を使うと Flash CS3 で作成した AS3 のムービークリップをそのまま Flex のコンポーネントとして使用できるようになります。まだベータ版ですのでお試し用の環境でのみご使用ください （日本ではまだ CS3 が発売されていませんが念のため）。

Flex Component Kit for Flash CS3 とドキュメントは Adobe Labs からダウンロードできます。

前提となるソフトウェアは以下のとおりです。

また、Flash CS3 と使用する際に必要になる Flex 2.0.1 用のパッチも提供されています。詳細はテックノートをご参照ください。（Flex 2.0.1 patch for Flash CS3 Professional compatibility）

以下がパッチへのリンクです。

ダウンロードして解凍すると以下の3つのファイルが含まれています。

  • swfkit.jar
  • mxmlc.jar
  • fdb.jar

これらのファイルを \plugins\com.adobe.flexbuilder.flex_2.0.155577\lib ディレクトリにコピーして使用します。念のためもとのファイルはバックアップしておきましょう。SDK を使用している場合は lib の下にコピーします。

詳細は下にありますが、このキットの大まかな使用手順は、

  1. Flash CS3 で AS3 のムービークリップを作成
  2. Commands メニューから Make Flex Component を実行
  3. 作成した fla を SWC として書き出す （パブリッシュすると生成される）
  4. Flex Builder 2 で対象となるプロジェクトのライブラリに SWC を追加する

です。Flex 用に書き出すムービークリップが予め提供されている標準のイベントやメソッド以外を使用しないばあいなら、必要な作業は以上のステップだけです。

Flash CS3 ではムービークリップに対して親クラスを指定するパネルが用意されています。手順の２の後にライブラリパネルからムービークリップの likage パネルを開くと base class つまり親クラスとして UIMovieClip クラスが指定されていると思います。この UIMovieClip クラスが Flex で Flash コンポーネントを使用するために必要な機能を実装しています。

linkagepropertiespanel.jpg

Flash 側の設定

Flash で Flex 用のコンポーネントを作成するにはいくつかの設定が必要です。この作業は "Make Flex Component" コマンドから自動で行うことができますが、手動で行う場合は以下の手順になります。

まず、Publish Settings のダイアログ内の以下の設定を確認します。

  • "Version" を "Flash Player 9" に設定（デフォルト値です）
  • "ActionScript version" を "ActionScript 3.0" に設定（これもデフォルト地です）
  • （後でデバッグが必要であれば） "Permit Debugging" を true に設定
  • "Export SWC" オプションをチェック

次にフレームレートを 24fps に設定します。これは Flex の標準フレームレートです。Flex 側のフレームレートを変えると Effect 等に影響が出るためフレームレートは Flex 側にあわせるようにします。

最後に UIMovieClip コンポーネントをコンポーネントパネルからライブラリにドラッグしたら、SWC に書き出すムービークリップの Linkage Properties パネルで以下の設定をします。（注： "Make Flex Component" コマンドを使用した場合以下の設定はライブラリ内で選択されたムービークリップに対してのみ行われます）

  • "Export for ActionScript" を選択
  • Select "Export in First Frame" も選択
  • "Base Class" に "mx.flash.UIMovieClip" を設定

Flex Builder 側の設定

上記の設定後 Flash 側でパブリッシュすると SWC ファイルが作成されますので、次は Flex Builder で Flash コンポーネントの読み込みを行います。

  1. FlexBuilder 側では Project Properties ダイアログを開き "Flex Build Path" を選択し "Library Path" タブを押す
  2. "Add SWC..." ボタンを押してダイアログを開く
  3. "Browse..." ボタンを押してステップ1で作成した SWC ファイルを指定する
  4. Project Properties ダイアログを閉じる
  5. 必要な xmlns 属性を追加する。例えば、
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:myComps="*">
  1. コンポーネントを使用する。上の例に従えば "<myComps:" と入力することでコードヒントが表示される

開発に関する注意点等はまた次回。

Posted by ackie at 11:55 AM | Comments (0)