Flash Builder4 と FlashCatalyst を使ってみた

( ベータ版 )

Flash Builder4( ベータ版 )
と
Flash Catalyst を
使ってみた

発表者 :bamboo

各所で話題の FlashBuilder4 と
Flash Catalyst がどんなものなの
か
使ってみました

もくじ

• 各種 Adobe 製ツールについて
• Flash Builder 4 の機能紹介
• Flash Catalyst の機能紹介

Adobe 製ツール CS4 シリー
ズ 2008 年 12 月日本発売開始

Flash® Flash を作成するためのソフト

Illustrator® ベクターグラフィックスを作成・編集するソフ
ト

Photoshop® 画像加工を行うためのソフト

After Effects® CS4
その他 InDesign® CS4
Dreamweaver® CS4 　など・・・

今回の目玉
Flash Builder 4 (Gumbo) 現在ベータ
版
旧 Flex Builder
Flex コンポーネントを使用した開発ができる
Eclipse ベースの IDE
コード補完機能・デバッグ機能が充実

Flash Catalyst (Thermo)

プログラマーとデザイナー間の開発をサポートするツール
コーディング無しで Flex の UI 作成ができる
Flash Builder と Illustrator などの画像加工ソフトとの連携機能

2008 年 11 月 17 日 AdobeMax 　アルファ版
リリース
2009 年６月１日　　　ベータ版リリー
ス

Flash Builder 4 & Flash Catalyst beta 版は
現在、ＡｄｏｂｅＬａｂｓからダウンロードができま
す。
URL:http://labs.adobe.com/

Flash Catalyst
と
Flash Builder4
を使った連携の例

作業の流れ

デザイナー
.fxp 形式でプロジェク
トファイルを出力する

h
デザインファイル作
blis
成
Flash Catalyst に取り込み
Pu Flash Catalyst で作成した
、インターフェイスを作インターフェイスにスクリ
成プトを組み込む
lish
P ub

.fxp 形式で
FlashBuilder4 に
読み込むプログラマー

Flash Catalyst の機能紹
介

Flash Catalyst を使って
何をするのか？

今回すること

デザインファイルの取り込み

コンポーネントをカスタマイズ

エフェクトを使用したページ切り替
え

Flash Catalyst を使ってみよ
う
新規プロジェクトを作成

プロジェクト名

サイズ

デザインファイルの取り込み
「アートワークを読み込み」を
選択

取り込むファイルを決定

読み込んだファイルが表示され
る

Flash Catalyst で読み込み可能な
デザインファイル

• Adobe Illustrator ファイル (.ai)
• Adobe PhotoShop ファイル (.psd)
• GIF ファイル (.gif)
• JPEG ファイル (.jpg, .jpeg)
• PNG ファイル (.png)
• SWF ファイル (.swf)
• FlashProject ファイル (.fxg)

コンポーネントをカスタマイズ

コンポーネントとして使いたいボタンやテキストボ
ックスなどを自作できる

FlashCatalyst で作成可能なコンポーネント

ボタン
テキストボックス
スクロールバー
データリスト
カスタム / 汎用コンポーネント

コンポーネント作成方法

コンポーネントにし
たい画像を選択

作成するコンポーネントを選
択

今回は画像をボタンにしてみまし
た

マウスダウン時の見た目を変えて
みる

変更するボタンイベントを
選択

変更するイベントを選択

マウスダウン時のデザインを自由に作成
する

作成したコンポーネントに名前をつけ
てあげる

名前を
btn_catalyst としま
した

コンポーネントの名前を変更する

変更→編集を終了で
元の画面に戻ります

エフェクトを使用したページ切り替え
新しいステートを作成する

このような画像をいっぱい散らかしたようなものを作成しました

ステートについて

・ Flex4 からは MXML を使って簡単に表示状態の変化
を扱えるようになりました

Flex2 からステートという機能があったそうですが、こ
の機能は知らなかったのですが、便利そうです

そこで、新しいステートについて調べてみました

ステートを使ったサンプルコード

ステートの定義
ボタンをクリックしたら
指定されたステートに変
更

プロパティ．ステート名 =“ 値”

Flash Catalyst でエフェクトをつけて
みる

矢印をドラッグで変更
動作のプレビュー

タイムラインを編集して Page1 ステートから
Page2 ステートへ切り替わるときのエフェク
トを
作成しました

エフェクトを細かく設定

「アクションを追加」で効果の追加・変更などがで
きます

プロパティ

プロパティを変更することで、細かく動きを調整することも
できます

ステートの切り替えをボタンのイベントに追
加
はじめに作成したボタンを選択
「カスタムインタラクション」を追
加する

OnClick イベントを選
択

スクリプトを書かずにボタンイベントが作成できます

ボタンイベントの設定の説明

設定の説明
ステートが Page1 のとき
ボタンをクリックしたら
Page2 のステートへ移動する

今回作成したものを動かしてみる

「プロジェクトを実行」でプレビューが
できる

「 SWF にパブリッシュ」で .swf ファイ
ルを作成

保存する

ファイル→保存で保存できます
ファイル保存形式は「 .fxp 」形式となっています

感想
比較的簡単に動きのあるＦｌａ sh が出来上がった

FlashCatalyst を使うと実用的なインターフェ
イスも簡単に作成できる

Flash Catalyst 単体でも十分に使えそうなのだが
、他のソフトと連携させることにより更なる効果
が期待される

次は Flash Builder4

Flash Builder 4 の機能紹介

Flash Builder4 で新しく追加された機能

コンポーネントのリニューアル

Ｆ xp ファイルのインポート

ネットワークモニター

テストケースクラスの作成

コンポーネントのリニューアル

FlexBuilder3 のデフォルトの name space

mx :http://www.adobe.com/2006/mxml

FlashBuilder4 のデフォルトの name
space fx :http://ns.adobe.com/mxml/2009
増えた s :library://ns.adobe.com/flex/spark
mx:library://ns.adobe.com/flex/halo

コンポーネントの使い方が結構変わったように感じま
した。

fx ・ s ・ mx はどう使う？

ｆ mxml 関連のコンポーネント
ｘ
<mx:script> <fx:script> mxml 内にアクションスクリ
プトを記述する

<mx:style> <fx:style> mxml 内にスタイルシート
を記述する

など

mx mx.Components
halo コンポーネント
レイアウト、ナビゲータなどのコンテナがある
mx にあるもの
DataGrid
Label
Canvas
Alert
TabNavigator など

Flex3 の mx とだいたい同じだと思いますが、
使ってみると結構変わっていると感じてきます

Ｓ spark.components

よく使いそうなコンポーネントが多くある
Spark は Halo がベースとなっている

入っているもの
・各種コントロール用コンポーネント
(Button,textInput など )
・エフェクト関連
・描画関連 ( 図形 ,3 Ｄ )
など

Spark が SparkProject と関係があるかは不明です。

見つけたもの複数似たようなものがあ
るが使い分け方がわから
ラベル系ない
mx:label s:RichText s:SimpleText
<mx:label text=“ ここに記述” 　 <s:RichText> 　 <s:SimpleText>
　 />
ここにテキスト記述可　　　　ここにテキスト記
能述可能
</s:RichText> 　 </s:SimpleText>

ボタン系

s:ButtonBarButton s:ToggleButton s:Button
トグルボタン？トグルボタン普通のボタン

見つけたものその 2

mx:Canvas 　
なぜかコード補完には出現しません。

s:group 、ｓ： DataGroup
が代わりにあるからか？

見つけたものその 3

addChild の変更
Spark コンテナへエレメントの追加
New addElement(element:IVisualElement)
remobiElement(element:IVisualElement)

Halo コンテナへエレメントの追加
addChild(child:DisplayObject)
removeChild(child:DisplayObject)

addChild と addElement を使い分けましょ
う
ということみたいです

その他
コンポーネントのイベント設定時のコード補完が追加
された
この機能があると結構便利です

ｆｘｐファイルのインポ
ート
メニューから、ファイル → Import Flex Project(fxp) で
Flash Builder 4 に .fxp ファイルをプロジェクトとしてインポートでき
ます
インポートしてからは通常
の
MXML ファイルとして扱え
る
ので、 MXML ファイルを修
正
したり、アクションスクリ
プト
を追加したりすることがで
き
ます。

Flex プロジェクトを .fxp にエクスポ
ート
Flex で作成したプロジェクトを .fxp に出力する機能。
出力したファイルを FlashCatalyst で開き修正をするこ
とができるはずですが、

Flash Builder 4 で作成したプロジェクトをエクスポートし
て Flash Catalyst で読み込ませようとすると、エラーが出
て
読み込みできませんでした。。。

ネットワークモニター

Flash ファイルが通信した情報をデバッグできる機能

RTMP を使った Netstream は記録できませんでした。

HTTPService を使用してデータを取得したもの
は記録されました。

mx.Netmon クラスを使用する？

ネットワークモニターに表示されるもの

リクエストレスポンス
・送信ヘッダ情報 •ステータス
•レスポンスサイズ
•レスポンス Body( 受信した内容 )

受信データが英字のみだと正常
に表示できましたが、日本語が
混ざっていると文字化けが起こ
っていました

テストケースクラスの作成

flexUnitTests でのテンプレートを作成する機能が追加され
、
テストが書けるようになりました

感想
•FlexBuilder3 から FlashBuilder4 になって多くの新機能が追
加され、とても便利な機能も増えてたが、まだ動作が不安
定なものもあるので、今後に期待したい
•Flex4 コンポーネントは前のＦｌｅｘ 3 からは結構変わっ
てるので、移行するには影響が多そう

ということで

現在まだベータ版なので、これからさらに変化
するかもしれないので、正式版登場まで期待し
て待ちながらツールを使い込んでみましょう

ご静聴ありがとうございました。

Flash Builder4 と FlashCatalyst を使ってみた

More Related Content

Viewers also liked

Similar to Flash Builder4 と FlashCatalyst を使ってみた

Flash Builder4 と FlashCatalyst を使ってみた