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