Flex 4の最近のブログ記事

　今回は、Adobe Illustrator CS5で作成したデザインを、Flash Catalyst CS5を使用してFlashBuilder4にインポートする方法を紹介致します。

初めに、Adobe Illustrator CS5でアプリケーションのデザインを作成します。サンプルでは以下の様なデザインを作成しました。

デザインが完成したら、ファイル(F)＞保存(S)から.aiの形式で保存します。

次に、Flash Catalyst CS5を起動し、TOP画面のウィザードの「デザインファイルから新規プロジェクトを作成」からAdobe Illustratorファイル(AI)から・・・を選択し、先ほどAdobe Illustratorで作成した.aiファイルを選択します。

Flash Catalystでは、Adobe Illustrator(CS4以降)で作成したデザインを、簡単にコンポーネントに変換する事が可能です。
先ほど作成したデザイン内の矢印のグループを選択し、ボタンに変換を行います。

ボタンへの変換後、ボタンのステート（up,over,down,disabled)毎にデザインを設定する事が可能です。
ここでは、マウスオーバー時とマウスダウン時にボタンの周りが光るようなフィルタを適用しました。

右上のパネルの「ワイヤーフレームコンポーネント」タブからコンポーネントを追加する事も可能です。

Flash Catalystでの編集中に、元のデザインに修正を加える事も可能です。
右上のパネルの「レイヤー」タブで右クリックし、「Adobe Illustrator CS5で編集(L)」を選択します。

以下のポップアップが表示され、Adobe Illustrator CS5が起動します。

デザインを修正し、完了したら「○完了」ボタンをクリックします。今回は新たにグループを追加しました。

完了ボタンクリック後、デザインは保存され、修正内容は自動的にFlash Catalyst側にも反映されます。既にFlash Catalyst側で設定した内容はそのままなので安心です（再度設定し直す必要はありません）

Flash Catalystではステート変更時のアニメーション（トランジション）を簡単に設定する事が可能です。 先ほど追加したグループをボタンに変換し、「Up→Down」時に3D回転するエフェクトを設定してみました。 エフェクトの追加は「アクションの追加」ボタンから選択を行います。

編集が完了したら、ファイル(F)＞保存(S)でFXP形式で保存を行います。

次に、FlashBuilder4を起動します。パッケージエクスプローラーで右クリックし、インポート(I)を選択します。

FlashBuilder>FlashBuilderプロジェクトを選択し、次へ(N)ボタンをクリックします。

プロジェクトを読み込み＞ファイル(F)で、Flash Catalystで作成したFXPファイルを選択し、終了(E)ボタンをクリックします。

FXPからFlashBuilderプロジェクトが生成されます。 default packageのMain.mxmlを開くとFlash Catalystで編集したデザイン通りインポートされた事が確認できます。 更に、componentsパッケージではFlash Catalystで変換を行ったコンポーネントのmxmlが生成されている事が確認できます。

ボタンにコンポーネント変換したものは、sparkコンポーネントのボタンに変換がおこなわれます。

componentsパッケージ配下のmxmlで各部品の修正・編集を行う事も可能です。

最後に、プログラムロジックを実装して完成です。 Flash Catalystでボタンに変換した矢印ボタンですが、ボタン内の画像部分のみコンポーネントとして認識されます。（ちゃんと空白部分をくり抜いたコンポーネントとなります） このようにFlash Catalystとの連携を行う事により、より高度なデザインのアプリケーションを作成する事が可能です。

＜完成したサンプルアプリ＞

SAMPLE

※サンプルは別ウインドウで開きます
※サンプルの再生はFlashPlayer10.1が必要となります。

FlashBuilder4から簡単にアイテムレンダラーの設定を行う事が可能となりました。
今回はその方法の紹介として、データグリッドにカスタムレンダラー部品を埋め込んだサンプルを作成してみます。

最初に、メインアプリケーションを作成します。 サンプルでは、<s:Panel>内 に<mx:DataGrid>を配置しました。
メインアプリケーションのcreationCompleteハンドラでデータグリッドの表示データを設定します。

[実行結果]

上記データグリッドのチェック列にチェックボタンを表示し、チェックボタンが選択された場合、チェックボタンの横に「選択済」と文字列が表示されるようにアイテムレンダラーを設定しようと思います。

mxmlのデザインビューでデータグリッドを選択し、プロパティにて「列の構成」ボタンをクリックします。

ここでは、ヘッダーテキストの値や幅などのプロパティの設定をはじめ、詳細ビューでは詳細な設定をおこなう事が可能です。データバインディングの欄にアイテムレンダラーの設定欄がありますので、横の紫のボタンをクリックし「アイテムレンダラーを作成」をクリックします。

パッケージとコンポーネント名を入力し終了ボタンをクリックします。

終了ボタンをクリックすると「列の構成」設定画面に戻ってくるので、先ほど作成したコンポーネントがアイテムレンダラー欄に設定されている事を確認しＯＫボタンをクリックします。

設定が完了するとパッケージエクスプローラー上に、先ほどアイテムレンダラーで設定したコンポーネントが作成されている事が確認できると思います。更に先ほどの設定で自動的に<mx:DataGridColumn>にitemRendererが設定されます。

次にアイテムレンダラーの部品を編集します。
<s:CheckBox>を配置しクリックハンドラ内でチェックボックスが選択された場合、チェックボックスのlabelプロパティの値に”選択済”を設定します。

デザインビューでサクサク設定を行えるので、多彩な表現を簡単に設定できるのは非常に嬉しいです。
以下はコードになります。

以上で設定は完了です。実際に実行したイメージは以下の様になります。

ＧＵＩで簡単にアイテムレンダラーの設定を行う事が可能となったのでFlexに慣れていない方もサクサク色々な事ができるようになったのではないでしょうか？

つい先日、FlashBuilder4が発売となりました。

今回は、FlashBuilder4にて簡単なFlexアプリケーションを作成し、新機能などを紹介したいと思います。

Flash Builder4は公式サイトより体験版が入手可能です。

http://www.adobe.com/jp/products/flashbuilder/?view=topnew

まずはじめに、Flexプロジェクトを作成します。

１．パッケージエクスプローラーで右クリックし「Flexプロジェクト」を選択しプロジェクトを作成します。

2.　アプリケーションの種類は「Web(Adobe Flash Playerで実行)」を選択し終了ボタンをクリックします。

作成されたプロジェクト内のmxmlを見てみると、<s:Application>のようにsparkコンポーネントベースでApplicationが作成されます。
従来（Flex3まで）はFlex標準コンポーネントは、ネームスペースmxで始まるHaloコンポーネントで構成されておりましたが、FlashBuilder4からネームスペースsで始まるSparkコンポーネントが追加されました。
Flex標準コンポーネントの<TextInput>や<Panel>などのおなじみの部品もHaloコンポーネントとSparkコンポーネントでそれぞれ存在します。
プロジェクト作成時に自動的に作成されるmxmlのソースを見てみると<fx:Declarations>など、従来になかった表記がされています。
これらmxml2009に関する詳細は、「Flex4マスターシリーズ」で詳しく説明されておりますのでそちらもご参照ください。

http://www.adobe.com/jp/devnet/flex/articles/flex4_tutorials.html

次にデザインビューにて、コンポーネントを配置し画面を作成します。
サンプルでは以下のログインフォームの様な画面を作成しました。

<?xml version="1.0" encoding="utf-8"?>

	
		
	
	
		
			
				
					
					
				
					
					
						
					
					
        		
			
		
	

ここから、デザインビューでデザインの詳細設定を行っていこうと思います。
まず、ログインフォーム内(s:Panel)に配置されたVGroupのパディングを設定します。
FlashBuilder4からは、デザインビューのプロパティからパディングの設定も行う事が可能となりました。
以下の通り、全て10で設定します。

次にログインボタンをクリックするとアラートを表示する機能を実装します。
<s:Button>にclick=""と入力するとコードアシストの候補に「Clickハンドラーを作成」と表示されます。

「Clickハンドラーを作成」を選択すると、mxml内に「部品id+イベントハンドラ」と命名されたイベントハンドラが自動生成されます。
これもFlashBuilder4から追加された機能となりますがなかなか便利です。

作成されたイベントハンドラにアラートを実装します。

サンプルでは以下の通り実装しました。

;


	
		
	


	
		
	
	
		
			
				
					
				
				
					
				
			
			
		
	

次に、今回から追加された、「Flexテーマの変更」を行ってみようかと思います。
Flexプロジェクトを右クリックし、「Flexテーマ」を選択します。

FlashBuilder4からは「Flexテーマ」の変更によって簡単に外観を変更する事が可能です。
デフォルトは「Adobeテーマ － Spark」が選択されているので、他のテーマを選択しOKボタンをクリックします。

[デフォルト:Spark]

[Arcade]

以上でサンプルは完成です。

今回は、ボタンをクリックするとアラートが表示されるだけという非常に簡単なサンプルでしたが、それだけのアプリケーションを作成するに当たって、色々な変更点を紹介する事が出来ました。
もちろんこれだけではなく非常に多くの変更点がありますので
早めに、FlashBuilder4をいじり倒してみる事をお勧めします。