Flash Builder4が出てからのコーディング方法をまとめようと思っているうちに月日は流れ…。

先日からまたFlex4／Flash Builder4でコーディングしているので、忘れないうちに現在の方法をまとめます。

実は、最初は試しにFlash Catalystでちょっと画面遷移の効果も入れて制作してみたのですが、プログラマにダメ出しされてしまいました。
確かに、ソース見ても全てのステートがMain.mxmlにごちゃっと入っていて整理されていない…。
また、Flash Catalystに読み込んだPhotoshopのレイヤ名に日本語を使っていたらソースにそのまま入っているし…　こらーやりにくいやろうな、とは思いました。

Catalyst→Builder4へスムーズに渡せるデータを作る知識がないこともあって、やっぱりFlash Builder4でコーディングし直すことにしました。

Flex3（Flex Builder3）で制作していたときに一番時間がかかった「コントロールごとにcssで変更出来る要素を探すこと」は、「Adobe® Flash® Platform 用 ActionScript® 3.0 リファレンスガイド」で検索できるようになってだいぶ効率アップ。（2011-06-27　ページタイトル／リンク先が変更されていたのに合わせ修正）
ただし、外部cssファイルに書いて反映されるかどうかは、相変わらずやってみないとわかりませんが…。

以下、前回と同じく全くの自己流ですので、間違い・勘違いの部分やもっと効率的な方法をご存知の方はご指摘いただければ幸いです。

前提

htmlのように要素を並べたレイアウトを作ります。
今回はポップアップ画面のような単純なレイアウトだったので、ヘッダやフッタはコンポーネント化しませんでした。

準備

前回と同じくFireworksでレイアウトしたものから背景などを切り出しておきます。
ボタンについては後述します。

1.　コーディング開始

Flash Catalystから書き出したプロジェクトから使えるところは使います。
ボタンコンポーネントはそのまま使えそうなので削除せずに、プロジェクトルート/src/components　に置いておきます。
Main.mxmlもとりあえず置いておいて、別名で保存して編集します。

2.　ブロックのレイアウト

背景やボーダーをつけたい部分はBorderContainer、単純なレイアウト用にはVGroup／HGroup／Groupを使います。

相変わらずwidth／heightはインラインで直接mxmlに書かないと反映されません。
その他、外部cssに書いても利かないのはVGroup／HGroup／GroupのPadding。BorderContainerはできます。
BorderContainerはその名の通りデフォルトで枠の線が表示されるので、不要な場合は以下の指定が必要です（めんどくさ…）。

1
2
3

.className{
	borderVisible: false;
}

最初、縦に並べた要素の間にできた隙間がどうやっても消えなくてムキーッってなっていたら、なんと親切なサイトが。
これでOK。

1
2
3

<s:layout>
	<s:VerticalLayout gap="0"/>
</s:layout>

3.　テキスト

リンクや部分的な修飾がいらない場合は、LabelもしくはRichTextコントロールで。
途中で改行するには改行コード「＆＃13；」を入れます。

1

<s:RichText text="1行目&#13;改行しました。"/>

今回は本文中にリンクや画像を入れる必要があったのでRichEditableTextを使いました。
改行やパラグラフも指定できます。

1
2
3
4
5

<s:RichEditableText width="300" height="100%" editable="false">
	この文章の<s:a href="http://www.spongedesign.jp">ここ</s:a>をクリックすると遷移します。
	<s:br/>改行しました。<s:br/>本文中に画像も入るし<s:img source="assets/images/image.png" width="xxx" height="xxx" baselineShift="-10%"/>
	<s:span color="#ff0000">色も変えられます。</s:span>
</s:RichEditableText>

デフォルトで編集できる状態なので、表示だけの場合は「editable=”false”」が必要です。

4.　画像

こんな感じでさらっと（？）配置。

1

<s:BitmapImage source="@Embed('/assets/images/image.png')"/>

これでおおまかなレイアウトはできた…。

次回はボタンのカスタマイズについて。

• 
• Tweet