連載インデックスへ
WebとUIをつなぐトリックスター(3)

画像とコードの触媒
Flash Catalystについて語りますと

@IT編集部
平田 修
2008/12/26

コンポーネントにインタラクションを付ける

 追加したコンポーネントやコンポーネント化した画像にはインタラクションを付けることも可能だ。

 例えば、ボタンとして定義付けられた画像は、マウスオーバーやマウスアップ、マウスダウン時などのインタラクションや独自のものを付けられるようだ。

 

図13 ボタンにインタラクションを付けるときのダイアログ
図13 ボタンにインタラクションを付けるときのダイアログ

図14 ボタンだけで新たにMXMLファイルが作成され、インタラクションのコードも追加される(赤い囲みの部分)
図14 ボタンだけで新たにMXMLファイルが作成され、インタラクションのコードも追加される(赤い囲みの部分)

アニメーション制作の必需品、タイムライン機能

 タイムライン機能を使ってみると、オブジェクトを移動するトランジション(移り変わり、遷移)や徐々に消すトランジション、レイヤのうす赤い画像が縮むトランジションを加えるなど、アニメーションがGUIだけで簡単に作成できた。

図15 赤い画像が移動するトランジションを作成
図15 赤い画像が移動するトランジションを作成

図16 トランジション作成ダイアログ
図16 トランジション作成ダイアログ

図17 作成できるトランジションの種類
図17 作成できるトランジションの種類

 タイムライン機能ではある時点からある時点までの管理を画面上部でPage単位(コードでは<State(状態の意)>タグ)で行っている。

図18 PAGES/STATES単位で管理
図18 PAGES/STATES単位で管理

図19 ボタンのインタラクションもPAGES/STATES単位で管理できる
図19 ボタンのインタラクションもPAGES/STATES単位で管理できる

 そのPage間の動きは画面下位のTransition単位(コード上も<Transition>タグ)で管理される。

図20 タイムラインでトランジションを管理
図20 タイムラインでトランジションを管理(画像をクリックすると、拡大します)

図21 移動するトランジションのコード
図21 移動するトランジションのコード

FXPやSWFで保存

 プロジェクトは、Flexプロジェクトを一まとめにした新しいファイル形式「FXPFleX Project)」で保存される。

図22 Catalystの[File]メニュー
図22 Catalystの[File]メニュー

図23 FXP形式で保存
図23 FXP形式で保存

 また、[File]で[Publish to SWF]を選択すると、SWF形式で保存もできる。Web表示用のHTMLやJavaScriptも一緒に自動生成された。

図24 SWF形式で保存
図24 SWF形式で保存

 Catalyst保存したSWFファイル自体もCatalystで読み込むことができるが、レイヤ構造は失われ、1つの画像として扱われていた。

Flex Builder 4も使ってみた

 次に、Catalystとの連携や新機能を中心にGumbo(Flex Builder 4)も使ってみた。

FXPを読み込む

 Catalystで保存したFXP形式のファイルをGumboで読み込んでみると、やはりCatalystで保存したとおりのデザインが表示された。

図25 Catalystで保存したFXPをGumboで読み込んだ結果
図25 Catalystで保存したFXPをGumboで読み込んだ結果(画像をクリックすると、拡大します)

 もちろん、Gumboでもプログラムのコードを見ることができる。Catalystで作成したUIに新たにMXMLやActionScriptのコードを作成するのはこれまでのFlex Builderと同様だ。

図26 読み込んだMXMLをコードで表示
図26 読み込んだMXMLをコードで表示(画像をクリックすると、拡大します)

3/5

 INDEX
WebとUIをつなぐトリックスター (3) 
画像とコードの触媒Flash Catalystについて語りますと
  Page1
あらためて、「Flash Catalyst」とは何か?
いままでのFlashプラットフォームの協業ワークフロー
  Page2
Flash Catalystを使ってみた
Page3
Flex Builder 4も使ってみた
  Page4
Flex Builder 4の新機能3つ
  Page5
タイムラインとレイヤを備えたFlash制作用Eclipse
スキンの進化形? FXGとは何か?

[an error occurred while processing this directive]
「デザインハック」コーナーへ



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間