TextInput コンポーネントのカスタマイズ

TextInput コンポーネントのスタイルは、コンポーネントが描画されるときのスキン、パディングおよびテキストフォーマットの値を指定します。 texFormat スタイルおよび disabledTextFormat スタイルにより、コンポーネントに表示されるテキストのスタイルが制御されます。スキンのスタイルプロパティについて詳しくは、 スキンと TextInput コンポーネント を参照してください。

次の例では、 textFormat スタイルを設定して、TextInput コンポーネントに表示されるテキストのフォント、サイズおよびカラーを設定します。同じプロセスが、コンポーネントが無効になってきるときに適用される disabledTextFormat スタイルの設定に適用されます。

1. 新しい Flash ドキュメント (ActionScript 3.0) を作成します。

2. TextInput コンポーネントをステージまでドラッグし、インスタンス名を myTi にします。

3. メインタイムラインのフレーム 1 のアクションパネルに次のコードを追加します。

   var tf:TextFormat = new TextFormat(); 
   tf.color = 0x0000FF; 
   tf.font = "Verdana"; 
   tf.size = 30; 
   tf.align = "center"; 
   tf.italic = true; 
   myTi.setStyle("textFormat", tf); 
   myTi.text = "Enter your text here"; 
   myTi.setSize(350, 50); 
   myTi.move(100, 50);

4. 制御／ムービープレビューを選択します。

TextInput コンポーネントでは次のスキンを使用します。これらのスキンは編集して外観を変更することができます。

TextInput のキャプション

次の手順では、TextInput コンポーネントの境界線と背景のカラーを変更します。

1. Flash ファイルを新規作成します。

2. TextInput コンポーネントをステージにドラッグし、ダブルクリックしてスキンのパネルを開きます。

3. Normal スキンをダブルクリックします。

4. ズームコントロールを 800% に設定して、編集のためにアイコンを大きくします。

5. Normal スキンの境界線の端を 1 つずつ選択し、そのカラーを #993399 に設定して適用します。

6. プロパティインスペクターの塗りカラーピッカーにカラーが表示されるまで、背景をダブルクリックします。 カラー #99CCCC を選択して背景に適用します。

7. ステージの上の編集バーの左側にある「戻る」ボタンをクリックし、ドキュメント編集モードに戻ります。

8. 制御／ムービープレビューを選択します。

   TextInput コンポーネントは次の図のように表示されます。