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

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

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

Flash Catalystを使ってみた

図2 Catalystの起動画面
図2 Catalystの起動画面

Catalystでファイルを読み込む

 まずCatalystに取り込むアセットの作成。Catalystで読み込めるファイル形式はFXGFleX Graphics)形式を中心に、Illustratorのai形式、Fireworksのpng形式、Photoshopのpsd形式、ほかにGIFJPEGSWFなども読み込めるようだ。

 せっかくなので、新しいFXG形式で読み込みたいところだが、手元にCS4はない(日本語版は12月19日に発売開始された)。しかし、GIFやJPEGの画像を読み込むのでは芸がない。

図3 Catalystで取り込めるファイル形式
図3 Catalystで読み込めるファイル形式

 せめてデザインツールならではのファイル形式で読み込みたいところだ。そこで、記者の手元にあるAdobe Photoshop Elements 4.0で、@ITの記事アイコンに赤いグラデーションのレイヤを重ねる、ごく簡単なpsd形式の画像を作成することにした。

図4 Photoshop Elements 4.0で作成したpsd形式の画像
図4 Photoshop Elements 4.0で作成したpsd形式の画像

重なり具合もそのままレイヤ機能

 作成したpsd形式のファイルをCatalystに読み込んでみると、レイヤの重なり具合までちゃんと再現して表示された。

図4 Photoshop Elements 4.0で作成したpsd形式の画像
図5 Catalystに取り込んだpsd形式の画像

図4 Photoshop Elements 4.0で作成したpsd形式の画像
図6 レイヤの重なり具合も再現

 表示を[DESIGN]から[CODE]に切り替えてみると、取り込んだ時点でMXMLのコードにも変換されているが、画像ファイル自体は別で保管されている。

図4 Photoshop Elements 4.0で作成したpsd形式の画像
図7 コード表示に切り替え

図8 コード表示
図8 コード表示(画像をクリックすると、拡大します)

コンポーネントやベクタ画像も追加できる

 画像を選択すると、青い枠で囲まれてそれ自体をコンポーネントに変えるウィザードが現れる。コンポーネント化もコーディングだけでなくGUIのマウス操作でも可能のようだ。

図9 画像をコンポーネント化するダイアログ
図9 画像をコンポーネント化するダイアログ

 また、追加でコンポーネントや図形を作成することもできる。

図10 コンポーネントや図形を作成
図10 コンポーネントや図形を作成

図11 作成できる主なコンポーネントや図形
図11 作成できる主なコンポーネントや図形

図12 コンポーネントや図形を作成した結果、自動で追加されたソースコード
図12 コンポーネントや図形を作成した結果、自動で追加されたソースコード

2/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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

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

本日 月間