この情報は、米国アドビシステムズ社が提供している情報をもとにローカライズし、作成したものです。 

日本語環境での動作保証はしておりませんのでご了承ください。

内容 (What's Covered)

この文書では、Adobe Flash Catalyst CS5 でカスタムスキンを使用したコンポーネントのサイズを変更する際に発生する問題について説明します。

Flash Catalyst CS5 では、カスタムスキンを使用したコンポーネントを、ワイヤーフレームコンポーネントと同じようにサイズ変更することはできません。例えば、ワイヤーフレームボタンのアピアランスを編集した後(5 ピクセルのカスタムストロークを追加)、ボタンのラベルに入力した文字数に応じて自動的に伸縮しなくなります。

カスタムスキンを使用したコンポーネントは、ワイヤーフレームとは異なる方法でリサイズすることができます。まずはじめに、ワイヤーフレームコンポーネントに関して簡単に説明している A. をお読みいただいてから、 B. ~ D. を参照してください。

A. ワイヤーフレームコンポーネントのサイズ変更と修正

B. カスタムスキンを使用したコンポーネントのサイズ変更

C. カスタムスキンを使用したコンポーネントのインスタンスを個別にサイズ変更

D. Flash Catalyst から生成されたコンポーネントを Flash Builder でサイズ変更 

D-1. パスのサイズ変更

D-2. リキッドレイアウトの作成、または Flash Catalyst アプリケーションのサイズ変更

A. ワイヤーフレームコンポーネントのサイズ変更と修正

ワイヤーフレームコンポーネントには、プロトタイプをすばやく作成する特別な機能があり、一般的なアピアランス(スキン)が適用されます。ワイヤーフレームは、アートボードの編集時に自動的にサイズが変更されます。例えば、ワイヤーフレームボタンは、ラベルに入力された文字数に応じて幅が変化します。また、アートボード上のワイヤーフレームコンポーネントを直接選択し、ハンドルをドラッグして拡大/縮小することもできます。

ワイヤーフレームコンポーネントの一般的なアピアランスは、コンポーネントを選択した際の [プロパティ] パネルオプションから変更することができますが、パネルから指定可能なオプション以外のカスタマイズを行うには(例えば、ボタンの線をより太くするなど)、はじめにワイヤーフレームコンポーネントをカスタムスキンが適用されたコンポーネントに変換する必要があります。

ワイヤーフレームコンポーネントを右クリックして [コンポーネントを編集] を選択するか、または単純にダブルクリックすることで、これを行うことができます。この操作を行うと、コンポーネントの編集モードに切り替わり、ワイヤーフレームコンポーネントは自動的に変換され、新しいカスタムスキンが割り当てられます。

B. カスタムスキンが適用されたコンポーネントのサイズ変更

コンポーネントの編集モードでは、カスタムスキンが適用されたコンポーネントを選択し、ハンドルをドラッグすることで、すべてのパーツをサイズ変更することができます。コンポーネントの編集モード実行中は、コンポーネントの定義を効率的に編集することができます。以下のサンプル(ラベル付きのボタン)では、ボタンの長方形とは別に、テキストラベルのパーツを個別にサイズ変更する必要があります。

コンポーネントの編集モードで、カスタムスキンを使用したアートワークとテキストラベルのサイズ変更例

詳細については、Flash Catalyst CS5 ヘルプ「コンポーネントの編集モード」を参照してください。

C. カスタムスキンが適用されたコンポーネントのインスタンスを個別にサイズ変更

Q. カスタムスキンが適用されたコンポーネントを作成し、アプリケーション内でそのインスタンスを複数使用しています。すべてのインスタンスではなく、その中の一つだけをサイズ変更する場合はどうすればよいですか?

A. 初期設定では、コンポーネントに適用された編集はすべてのステートにおけるすべてのインスタンスに適用されます。いずれか一つのインスタンスのみに編集を行う場合、以下の操作を行ないます。

  1. [ライブラリ] パネルの [コンポーネント] セクションを選択します。
  2. 対象のコンポーネントを右クリックして [複製] を選択します。
  3. 複製されたコンポーネントをアートボードにドラッグ&ドロップして配置します。
  4. オリジナルのコンポーネントとインスタンスに影響を及ぼすことなく、編集を行うことができます。

D. Flash Catalyst から生成されたコンポーネントを Flash Builder でサイズ変更 

Adobe Flash Builder で Flash Catalyst プロジェクトの開発を行う場合は、サイズ変更を行うヒントがいくつかあります。

D-1. 線のサイズ変更

Q. 例えば Flash Catalyst でスクロールバーにカスタムスキンを適用し、異なるレイアウトに適合するよう Flash Builder でリサイズする場合、Flash Builder でソースコードにアクセスして width/height = 100% の属性を付加することができますが、線のサイズを変更するにはどうすればよいですか?

A. 線のサイズを変更するにはいくつかの方法があります。

  1. Flash Catalyst 内で作業を継続する場合、パス(必要に応じてその他のアートワークも)を最適化されたグラフィックに変換します。最適化されたグラフィックはグラフィックを格納する個別のファイルです。(コンポーネントのようなものですが、グラフィックです。)Flex では全てのオブジェクトを個別に生成する必要が無いため、最適化されます。Flash の描画コマンドを使用して、ファイルはすばやく処理され、描画されます。必要に応じて、[レイヤー] パネルでダブルクリックして、名前を指定することもできます。

    次に Flash Builder で、最適化されたグラフィックのサイズを指定します。最適化されたグラフィックのインスタンスは、Flex におけるその他のすべてのコンポーネントと同様に動作します。例えば、 width を 100% に指定することができます。

     
  2. Flash Builder で線をグループ化し、グループサイズを指定して、グループ上で resizeMode = "scale" を設定します。(初期モードではグループ上に追加のスペースが生成されます。)

     
  3. Flash Builder で、線に直接 scaleX/scaleY を設定します。

D-2. リキッドレイアウトの作成、または Flash Catalyst アプリケーションのスケール作成

現時点では、Flash Catalyst は固定幅のアプリケーションのみをサポートしています。Flash Catalyst で作成されたカスタムコンポーネントのサイズは絶対指定です。

可変幅のアプリケーションを構築する必要がある場合、Flash Builder で、Flash Catalyst の FXP を読み込み、制約を適用します。この操作により、アプリケーションのサイズに応じてコンポーネントのサイズが変更されます。 

詳細については、Flash Builder 4 ヘルプ「制約ベースのレイアウトの使用」を参照してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー