Flex をデザイン~スキンアートワークの作成Adobe Flexプログラムの、外観をデザインしたい方に

Adobe Flex Builder 3(アドビ フレックス ビルダー3)で使用するFlex Skinの制作方法について、Fireworks CS4(ファイアーワークスCS4)でFlex Skin画像を制作し、Flex Builder 3に取り込むまでの流れをご紹介します。

このページのポイント
  • Adobe Flex Skinの制作方法が、だいたいわかります。
こんな方におすすめ
  • とりあえずFlex Skinのことについて、さらっと知りたい。

Flex Skinとは

Adobe Flex Skinは、Flexコンポーネントのデザインを設定します。同じSkinをいろいろなFlexプログラムに使用することができます。

などでFlex Skinを制作できます。

Extensionsのダウンロード方法

制作するためには上記の各アプリケーションに、Extensions(エクステンション)をインストールする必要があります。Extensionsはアプリケーションの拡張機能です。今回はFireworksで制作するので、 FireworksのExtensions、Flex Skin Design Extension for Fireworksをインストールします。Extensionsは下記サイトからダウンロードができます(別途、Adobe IDを取得する必要があります。)

Flex MX Skin Design Extensions & Flex Component Kit for Flash Professional

リンク先からファイルをダウンロードします。

Extensionsのダウンロード

Extensionsファイルファイルがダウンロードされました。

Extensionsのインストール方法

ダウンロードしたファイルをダブルクリックすると、EXTENSION MANAGERが起動します。EXTENSION MANAGERは各アプリケーションのExtensionsを管理するものです。

Fireworksを選択して、Flex Skinningが有効になっているかを確認し、EXTENSION MANAGERを終了します。

EXTENSION MANAGER

Flex Skinを作ってみる

ではさっそく、FireworksでFlex Skinを作ってみましょう。

Fireworksを起動します。

メニューから、コマンド > Flex スキン > 新規 Flex スキン を選びます。

新規 Flex スキン

ダイアログが表示されます。

新規Flex スキン ダイアログ

今回はボタンのデザインだけ制作しますので、specific componentsを選択し、Buttonを選択して[OK]ボタンを押します。

特定のコンポーネントからボタンを選択

ボタンのスキンテンプレートが作成されました。

ボタン スキンテンプレートレイヤー

Up(アップ)、Over(オーバー)、Down(ダウン)、Disabled(不可)とボタンの状態でテンプレートが表示されています。

ボタンの状態ごとにレイヤーも分かれています。が、なぜかOverのところにDown用の画像がはいっていたため、Downのレイヤーに画像を移動します。そうしないと、画像を書き出す際に、Down用の画像が書き出されなくなってしまいます。

それぞれグループ化されているので解除して色やグラデーションなどを変更してみましょう。

以下のように変更してみました。

テンプレート変更後

ではこれを書き出してみましょう。

コマンド > Flex スキン > Flex スキンを書き出し を選択し、特定の場所を選んで保存します。

Flexスキンの書き出し

それぞれUp(アップ)、Over(オーバー)、Down(ダウン)、Disabled(不可)とボタンの状態ごとに画像が書き出されました。

書き出された画像

Flexへの取り込み

それでは書き出された画像をFlex Builderに取り込んでみましょう。

Flex Builderを起動します。

Flexスキンのインポート

メニューから、ファイル >インポート > スキンアートワーク を選びます。

スキンアートワークのインポート

[参照]を選択して、書き出したファイルの保存場所を選択し、[次へ]ボタンを選択します。

画像の確認

インポートする画像を確認し、[終了]ボタンを選択します。

cssが作成される

cssファイルが作成されました。[デザイン]に切り替えると、

デザイン

ボタンのデザインが確認できます。大まかな流れは以上です。

同じアプリケーションでもデザインが変わるだけで印象もぐっと違ったものになります。いろいろ変更して試してみてください。

ファイアーなのかファイヤーなのかそれが問題だ。

この記事を書いていると、『Fireworksってファイアーワークスなのか、ファイヤーワークスなのか』という疑問がわきおこり、コーヒーのFireはどっちか、Firewallはどっちなんだと、逆に疑問が増えてしまいました。。。 Adobeストアの方に聞いたところ、どうやらファイアーワークスが正解のようです。

Flexの最新バージョン

Adobe Flash Builder 4(アドビ フラッシュ ビルダー4)

現在の最新バージョンは、Adobe Flash Builder 4(アドビ フラッシュビルダー4)です。Flex BuilderからFlash Builderへと、名前が変わりました。

の2種類があります。

Flexの講座

m-Schoolでは下記のFlexの講座を開催しています。

Flex 4: Developing Rich Internet Applications

Flex 4: Developing Rich Internet Applications 講座は、Adobe Flex 4(アドビ フレックス4:旧名Adobe Flex Builder)によるRIA(リッチインターネットアプリケーション)開発にあたり、知っておくべき基礎事項が凝縮されているAdobe認定トレーニングプログラムです。

Flex 4の概要からFlash Builder 4の使い方、動的なデータ操作まで、Flexアプリケーション開発の基礎を4日間でしっかりと習得します。これからFlex開発に挑戦する方に最適の講座です。

Flex 4 and LiveCycle Data Services 3: Data Driven Development

Flex 4 and LiveCycle Data Services 3: Data Driven Development 講座は、FlexアプリケーションとLiveCycle Data Services間のデータ通信方法を2日間で習得できる、Adobe認定トレーニングプログラムです。

データ通信の方法から、モデル駆動開発におけるテクニックなど、Flex開発におけるステップアップトレーニングとして最適です。

関連リンク

RSSフィードで
最新情報を購読