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

オーサリング時および実行時には、TextInput インスタンスのサイズを変更できます。 オーサリング時には、ステージ上でコンポーネントを選択して、自由変形ツールを使用するか、修正/変形でいずれかのコマンドを使用します。実行時には、 setSize() メソッドを使用するか、TextInput クラスの適切なプロパティ( height width scaleX scaleY など)を使用します。

TextInput コンポーネントのサイズを変更すると、境界線は新しい境界ボックスのサイズに合わせて変更されます。 TextInput コンポーネントでは、スクロールバーは使用されませんが、ユーザーがテキストを操作すると挿入ポインターが自動的にスクロールします。テキストフィールドのサイズは残りの領域内で変更されます。TextInput コンポーネントには、固定サイズのエレメントはありません。 TextInput コンポーネントが小さすぎてテキスト全体を表示できない場合は、テキストが切り詰められます。

スタイルと 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 のキャプション

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

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

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

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

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

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

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

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

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

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

    境界線と背景のカラーが変更された TextInput コンポーネント