背景色の設定
まずは、背景色の設定をします。ここだけちょっとコードを追加します。いったん［ソース］ビューに戻り、白い背景画像を黒くしてみます。
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Tweee">
上記コード部分を下記のように書き換えます。
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Tweee" backgroundColor="#333333">
backgroundColor="#333333"と入力するとき、補完が出るのがわかります。
補完の表示
テキストや画像の配置・調整
続いて、再度［デザイン］ビューにして［コンポーネント］パネルよりステージに［Label］をドラッグ＆ドロップして配置します。
［Label］をドラッグ＆ドロップ
中身には「FOLLOW ME!!（改行）自分のTwitter名（今回は@kara_d）」を入れてみましょう。プロパティパネルから、色などの変更もできます。
テキストの入力
続いて［コンポーネント］パネルよりステージに［Image］をドラッグ＆ドロップします。
［コンポーネント］パネル
［Image］をドラッグ＆ドロップ
［プロパティ］パネルの［ソース］の右側のフォルダアイコンをクリックして、ローカルに保存してあった自分のTwitterのアイコンを選択しましょう。もしローカルにTwitterのアイコンがない場合は、Twitterからダウンロードしておきましょう。
また、［シングル解像度ビットマップ］か［マルチ解像度ビットマップ］かを聞かれるので、［シングル解像度ビットマップ］を選択します（本当はTwitterのアイコンもネットから取得したいところですが、今回は割愛します）。
自分のTwitterのアイコンを入力
配置する画像について、プロジェクトフォルダー外にある旨が聞かれるはずなので、［アセットのコピー］を選択して、プロジェクト内にコピーしておきます。
［アセットのコピー］を選択
［デザイン］ビューにアイコンが読み込まれるので、適切な大きさにしておきましょう。
画像のリサイズ
次に、［コンポーネント］パネルより、ステージに［TextArea］をドラッグ＆ドロップします。
［TextArea］をドラッグ＆ドロップ
アイコンの下あたりに置くことにします。
アイコンの下に配置
サイズを調節して配置すると図のようになる
