( ベータ版 )

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

          発表者 :bamboo
各所で話題の FlashBuilder4 と
Flash Catalyst がどんなものなの
か
使ってみました
もくじ

• 各種 Adobe 製ツールについて
• Flash Builder 4 の機能紹介
• Flash Catalyst の機能紹介
Adobe 製ツール CS4 シリー
ズ               2008 年 12 月 日本発売開始

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


  Illustrator®   ベクターグラフィックスを作...
今回の目玉
   Flash Builder 4 (Gumbo)         現在ベータ
                                     版
旧 Flex Builder
Flex コンポーネントを使用した開発がで...
Flash Builder 4 & Flash Catalyst beta 版は
現在、AdobeLabsからダウンロードができま
す。
      URL:http://labs.adobe.com/
Flash Catalyst
       と
 Flash Builder4
を使った連携の例
作業の流れ

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

                         ...
Flash Catalyst の機能紹
介
Flash Catalyst を使って
    何をするのか?
今回すること

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


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


 エフェクトを使用したページ切り替
 え
Flash Catalyst を使ってみよ
             う
新規プロジェクトを作成



              プロジェクト名

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




                     取り込むファイルを決定




 読み込んだファイルが表示...
Flash Catalyst で読み込み可能な
       デザインファイル

 •   Adobe Illustrator ファイル (.ai)
 •   Adobe PhotoShop ファイル (.psd)
 •   GIF ファイル ...
コンポーネントをカスタマイズ

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

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

 ボタン
 テキストボックス
 スクロールバー
 データリスト
 カス...
コンポーネント作成方法

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




   作成するコンポーネントを選
   択
今回は画像をボタンにしてみまし
       た
マウスダウン時の見た目を変えて
みる


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




               変更するイベントを選択
マウスダウン時のデザインを自由に作成
        する
作成したコンポーネントに名前をつけ
       てあげる




                    名前を
                    btn_catalyst としま
                    した


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




  このような画像をいっぱい散らかしたようなものを作成しました
ステートについて

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


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



そこで、新しいステート...
ステートを使ったサンプルコード



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




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




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



タイムラインを編集して Page1 ステートから
Page2 ステートへ切り替わるときのエフェク...
エフェクトを細かく設定




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




                 プロパティ




    プロパティを変更することで、細かく動きを調整することも
    できます
ステートの切り替えをボタンのイベントに追
         加
             はじめに作成したボタンを選択
              「カスタムインタラクション」を追
              加する




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




設定の説明
 ステートが Page1 のとき
  ボタンをクリックしたら
 Page2 のステートへ移動する
今回作成したものを動かしてみる




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

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




ファイル→保存 で保存できます
ファイル保存形式は「 .fxp 」形式となっています
感想
比較的簡単に動きのあるFla sh が出来上がった


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


Flash Catalyst 単体でも十分に使えそうなのだが
、他のソフトと連携させることにより...
Flash Builder 4 の機能紹介
Flash Builder4 で新しく追加された機能

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

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

      ネットワークモニター

      テストケースクラスの作成
コンポーネントのリニューアル

FlexBuilder3 のデフォルトの name space

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



FlashBuilder4 のデ...
fx ・ s ・ mx はどう使う?

f    mxml 関連のコンポーネント
x
    <mx:script>   <fx:script> mxml 内にアクションスクリ
                              プトを...
mx   mx.Components
     halo コンポーネント
      レイアウト、ナビゲータなどのコンテナがある
 mx にあるもの
          DataGrid
          Label
          ...
S     spark.components

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



     入っているもの
     ・各種コントロール用コンポーネント...
見つけたもの                                    複数似たようなものがあ
                                            るが使い分け方がわから
    ラベル系    ...
見つけたものその 2

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

 s:group 、s: DataGroup
 が代わりにあるからか?
見つけたものその 3

  addChild の変更
         Spark コンテナへエレメントの追加
    New addElement(element:IVisualElement)
          remobiElement...
その他
 コンポーネントのイベント設定時のコード補完が追加
 された
   この機能があると結構便利です 
fxpファイルのインポ
       ート
メニューから、ファイル → Import Flex Project(fxp) で
Flash Builder 4 に .fxp ファイルをプロジェクトとしてインポートでき
ます
インポートしてからは通...
Flex プロジェクトを .fxp にエクスポ
  ート
Flex で作成したプロジェクトを .fxp に出力する機能。
出力したファイルを FlashCatalyst で開き修正をするこ
とができるはずですが、

Flash Builder ...
ネットワークモニター

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


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

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



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

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

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




flexUnitTests でのテンプレートを作成する機能が追加され
、
テストが書けるようになりました
感想
•FlexBuilder3 から FlashBuilder4 になって多くの新機能が追
加され、とても便利な機能も増えてたが、まだ動作が不安
定なものもあるので、今後に期待したい
•Flex4 コンポーネントは前のFlex 3 からは結構...
ということで

現在まだベータ版なので、これからさらに変化
するかもしれないので、正式版登場まで期待し
て待ちながらツールを使い込んでみましょう
ご静聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

Flash Builder4 と FlashCatalyst を使ってみた

14,912 views
14,823 views

Published on

Fxug勉強会in富山プレゼン資料

Published in: Self Improvement
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
14,912
On SlideShare
0
From Embeds
0
Number of Embeds
320
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Flash Builder4 と FlashCatalyst を使ってみた

  1. 1. ( ベータ版 ) Flash Builder4( ベータ版 ) と Flash Catalyst を 使ってみた 発表者 :bamboo
  2. 2. 各所で話題の FlashBuilder4 と Flash Catalyst がどんなものなの か 使ってみました
  3. 3. もくじ • 各種 Adobe 製ツールについて • Flash Builder 4 の機能紹介 • Flash Catalyst の機能紹介
  4. 4. Adobe 製ツール CS4 シリー ズ 2008 年 12 月 日本発売開始 Flash® Flash を作成するためのソフト Illustrator® ベクターグラフィックスを作成・編集するソフ ト Photoshop® 画像加工を行うためのソフト After Effects® CS4 その他 InDesign® CS4 Dreamweaver® CS4  など・・・
  5. 5. 今回の目玉 Flash Builder 4 (Gumbo) 現在ベータ 版 旧 Flex Builder Flex コンポーネントを使用した開発ができる Eclipse ベースの IDE コード補完機能・デバッグ機能が充実 Flash Catalyst (Thermo) プログラマーとデザイナー間の開発をサポートするツール コーディング無しで Flex の UI 作成ができる Flash Builder と Illustrator などの画像加工ソフトとの連携機能 2008 年 11 月 17 日 AdobeMax  アルファ版 リリース 2009 年6月1日    ベータ版リリー ス
  6. 6. Flash Builder 4 & Flash Catalyst beta 版は 現在、AdobeLabsからダウンロードができま す。 URL:http://labs.adobe.com/
  7. 7. Flash Catalyst と Flash Builder4 を使った連携の例
  8. 8. 作業の流れ デザイナー .fxp 形式でプロジェク トファイルを出力する h デザインファイル作 blis 成 Flash Catalyst に取り込み Pu Flash Catalyst で作成した 、インターフェイスを作 インターフェイスにスクリ 成 プトを組み込む lish P ub .fxp 形式で FlashBuilder4 に 読み込む プログラマー
  9. 9. Flash Catalyst の機能紹 介
  10. 10. Flash Catalyst を使って 何をするのか?
  11. 11. 今回すること デザインファイルの取り込み コンポーネントをカスタマイズ エフェクトを使用したページ切り替 え
  12. 12. Flash Catalyst を使ってみよ う 新規プロジェクトを作成 プロジェクト名 サイズ
  13. 13. デザインファイルの取り込み 「アートワークを読み込み」を 選択 取り込むファイルを決定 読み込んだファイルが表示され る
  14. 14. Flash Catalyst で読み込み可能な デザインファイル • Adobe Illustrator ファイル (.ai) • Adobe PhotoShop ファイル (.psd) • GIF ファイル (.gif) • JPEG ファイル (.jpg, .jpeg) • PNG ファイル (.png) • SWF ファイル (.swf) • FlashProject ファイル (.fxg)
  15. 15. コンポーネントをカスタマイズ コンポーネントとして使いたいボタンやテキストボ ックスなどを自作できる FlashCatalyst で作成可能なコンポーネント ボタン テキストボックス スクロールバー データリスト カスタム / 汎用コンポーネント
  16. 16. コンポーネント作成方法 コンポーネントにし たい画像を選択 作成するコンポーネントを選 択
  17. 17. 今回は画像をボタンにしてみまし た
  18. 18. マウスダウン時の見た目を変えて みる 変更するボタンイベントを 選択 変更するイベントを選択
  19. 19. マウスダウン時のデザインを自由に作成 する
  20. 20. 作成したコンポーネントに名前をつけ てあげる 名前を btn_catalyst としま した コンポーネントの名前を変更する 変更→編集を終了で 元の画面に戻ります
  21. 21. エフェクトを使用したページ切り替え 新しいステートを作成する このような画像をいっぱい散らかしたようなものを作成しました
  22. 22. ステートについて ・ Flex4 からは MXML を使って簡単に表示状態の変化 を扱えるようになりました Flex2 からステートという機能があったそうですが、こ の機能は知らなかったのですが、便利そうです そこで、新しいステートについて調べてみました
  23. 23. ステートを使ったサンプルコード ステートの定義 ボタンをクリックしたら 指定されたステートに変 更 プロパティ.ステート名 =“ 値”
  24. 24. Flash Catalyst でエフェクトをつけて みる 矢印をドラッグで変更 動作のプレビュー タイムラインを編集して Page1 ステートから Page2 ステートへ切り替わるときのエフェク トを 作成しました
  25. 25. エフェクトを細かく設定 「アクションを追加」で効果の追加・変更などがで きます プロパティ プロパティを変更することで、細かく動きを調整することも できます
  26. 26. ステートの切り替えをボタンのイベントに追 加 はじめに作成したボタンを選択 「カスタムインタラクション」を追 加する OnClick イベントを選 択 スクリプトを書かずにボタンイベントが作成できます
  27. 27. ボタンイベントの設定の説明 設定の説明 ステートが Page1 のとき ボタンをクリックしたら Page2 のステートへ移動する
  28. 28. 今回作成したものを動かしてみる 「プロジェクトを実行」でプレビューが できる 「 SWF にパブリッシュ」で .swf ファイ ルを作成
  29. 29. 保存する ファイル→保存 で保存できます ファイル保存形式は「 .fxp 」形式となっています
  30. 30. 感想 比較的簡単に動きのあるFla sh が出来上がった FlashCatalyst を使うと実用的なインターフェ イスも簡単に作成できる Flash Catalyst 単体でも十分に使えそうなのだが 、他のソフトと連携させることにより更なる効果 が期待される 次は Flash Builder4
  31. 31. Flash Builder 4 の機能紹介
  32. 32. Flash Builder4 で新しく追加された機能 コンポーネントのリニューアル F xp ファイルのインポート ネットワークモニター テストケースクラスの作成
  33. 33. コンポーネントのリニューアル 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 コンポーネントの使い方が結構変わったように感じま した。
  34. 34. fx ・ s ・ mx はどう使う? f mxml 関連のコンポーネント x <mx:script> <fx:script> mxml 内にアクションスクリ プトを記述する <mx:style> <fx:style> mxml 内にスタイルシート を記述する など
  35. 35. mx mx.Components halo コンポーネント レイアウト、ナビゲータなどのコンテナがある mx にあるもの DataGrid Label Canvas Alert TabNavigator など Flex3 の mx とだいたい同じだと思いますが、 使ってみると結構変わっていると感じてきます
  36. 36. S spark.components よく使いそうなコンポーネントが多くある Spark は Halo がベースとなっている 入っているもの ・各種コントロール用コンポーネント (Button,textInput など ) ・エフェクト関連 ・描画関連 ( 図形 ,3 D ) など Spark が SparkProject と関係があるかは不明です。
  37. 37. 見つけたもの 複数似たようなものがあ るが使い分け方がわから ラベル系 ない mx:label s:RichText s:SimpleText <mx:label text=“ ここに記述”   <s:RichText>   <s:SimpleText>   /> ここにテキスト記述可     ここにテキスト記 能 述可能 </s:RichText>   </s:SimpleText> ボタン系 s:ButtonBarButton s:ToggleButton s:Button トグルボタン? トグルボタン 普通のボタン
  38. 38. 見つけたものその 2 mx:Canvas   なぜかコード補完には出現しません。 s:group 、s: DataGroup が代わりにあるからか?
  39. 39. 見つけたものその 3 addChild の変更 Spark コンテナへエレメントの追加 New addElement(element:IVisualElement) remobiElement(element:IVisualElement) Halo コンテナへエレメントの追加 addChild(child:DisplayObject) removeChild(child:DisplayObject) addChild と addElement を使い分けましょ う ということみたいです
  40. 40. その他 コンポーネントのイベント設定時のコード補完が追加 された この機能があると結構便利です 
  41. 41. fxpファイルのインポ ート メニューから、ファイル → Import Flex Project(fxp) で Flash Builder 4 に .fxp ファイルをプロジェクトとしてインポートでき ます インポートしてからは通常 の MXML ファイルとして扱え る ので、 MXML ファイルを修 正 したり、アクションスクリ プト を追加したりすることがで き ます。
  42. 42. Flex プロジェクトを .fxp にエクスポ ート Flex で作成したプロジェクトを .fxp に出力する機能。 出力したファイルを FlashCatalyst で開き修正をするこ とができるはずですが、 Flash Builder 4 で作成したプロジェクトをエクスポートし て Flash Catalyst で読み込ませようとすると、エラーが出 て 読み込みできませんでした。。。
  43. 43. ネットワークモニター Flash ファイルが通信した情報をデバッグできる機能 RTMP を使った Netstream は記録できませんでした。 HTTPService を使用してデータを取得したもの は記録されました。 mx.Netmon クラスを使用する?
  44. 44. ネットワークモニターに表示されるもの リクエスト レスポンス ・送信ヘッダ情報 •ステータス •レスポンスサイズ •レスポンス Body( 受信した内容 ) 受信データが英字のみだと正常 に表示できましたが、日本語が 混ざっていると文字化けが起こ っていました
  45. 45. テストケースクラスの作成 flexUnitTests でのテンプレートを作成する機能が追加され 、 テストが書けるようになりました
  46. 46. 感想 •FlexBuilder3 から FlashBuilder4 になって多くの新機能が追 加され、とても便利な機能も増えてたが、まだ動作が不安 定なものもあるので、今後に期待したい •Flex4 コンポーネントは前のFlex 3 からは結構変わっ てるので、移行するには影響が多そう
  47. 47. ということで 現在まだベータ版なので、これからさらに変化 するかもしれないので、正式版登場まで期待し て待ちながらツールを使い込んでみましょう
  48. 48. ご静聴ありがとうございました。

×