Accessibility

Flash Remoting TechNote

Dynamic text fields in ScrollPanes display out of bounds

Dynamic text fields may display outside of a ScrollPane component's bounding box in the Macromedia Flash MX authoring environment and in the Macromedia Flash Player versions prior to 6,0,40,0. This occurs because device fonts don't mask correctly when text fields are dynamically added to a ScrollPane component using the createTextField() function without embedding the fonts. Text fields within other components, such as ListBoxes, do not exhibit the same problem.

The movie below shows how dynamic text fields in ScrollPanes display when fonts are not embedded.

The movie below shows how dynamic text fields in ScrollPanes display when fonts are embedded.

This problem has been identified and is fixed in the current version of the Macromedia Flash Player. However, you will continue to see this display issue in the Macromedia Flash MX authoring environment unless you modify your application to embed the fonts.

This TechNote describes how to work with text fields that are dynamically added to ScrollPane components.

Ensuring that fonts display in text field ScrollPanes

Use one of the following two methods to ensure that text fields display properly in your movies:

Method 1

Require users to play movies with the Macromedia Flash Player 6,0,40,0 version or above.

Although the fonts still won't display in the authoring environment, they will display using the current Macromedia Flash Player version.

Method 2

Ensure that the font is embedded in the text field and always displays in the ScrollPane by:

  1. Including the font in the movie's library.

    Select the font and give it a name within the library in order to embed it in the text field.
  2. Describing the font's linkage properties.

    Export the font identifier name to the movie's ActionScript.
  3. Creating a ScrollPane component instance in the authoring environment.

    Name the instance so that you can reference it in ActionScript.
  4. Adding the text field format information in ActionScript.

    Define the text field contents, properties as well as a movie clip instance to hold the data. You'll reference the font's linkage identifier name to set the text field's embedFonts property to True.
  5. Adding the movie clip to the ScrollPane in ActionScript.

    Attach the movie clip to the ScrollPane instance.

The step-by-step procedure is detailed below.

Creating dynamic text fields with embedded fonts

Set up dynamic text fields and ensure that fonts display properly within a ScrollPane using the following procedure:

  1. Choose Window > Open to open the library for your current file (or Press F11).
  2. Select New Font... from the drop down menu in the upper right corner of the Library panel.

    The Font Symbol Properties window displays below.
  3. Name and select the font for the text field.

    For example, use the name MyArial and select the Arial font.
  4. Enable Style options as needed and click OK to save the font in the library.

    MyArial is now listed in the Library pane. You are ready to define the linkage information for the font.
  5. Right click on the MyArial symbol to open the Linkage Properties window for that font.
  6. Select Export for ActionScript and ensure that Export in First Frame is selected. Take note of the linkage name in the Identifier field, then click OK to export the linkage information for ActionScript.

    Note: The identifier defaults to the name assigned to the font in the Library. You'll reference the identifier name to assign the font to the text field.
  7. Add a ScrollPane component to the Stage and give it an instance name.

    For example, name the instance myscrollpane.
  8. In ActionScript, create a dynamic text field by defining its contents and properties and a movie clip instance to hold it (myscroll). Set the text field's embedFonts property to True so that the text field will display correctly.

    // DEFINE DATA RETURNED FROM A FLASH REMOTING QUERY
          limit = 12;
              fakedata = "yadda";
    
    // TEXT FORMAT INCLUDING REFERENCE TO THE LINKAGE IDENTIFIER (MyArial)
              myy = 30;
              myTextFormat = new TextFormat();
              myTextFormat.font = "MyArial";
    
    // CREATE AN EMPTY MOVIE CLIP TO HOLD THE TEXT FIELD
              _root.createEmptyMovieClip("myscroll",500);
    
    // CREATE THE TEXT FIELD IN THE MOVIE CLIP, EMBED 
              THE FONT, POPULATE WITH QUERY DATA
              for(i=0; i<limit; i++){
              mytextfield = ("mytextfield" + i);
              // createTextField (instanceName,depth,x,y,width,height)
              _root.myscroll.createTextField(mytextfield,i,30,myy,304,18);
              _root.myscroll[mytextfield].embedFonts 
              = true;
              _root.myscroll[mytextfield].setNewTextFormat(myTextFormat);
              _root.myscroll[mytextfield].setTextFormat(myTextFormat);
              _root.myscroll[mytextfield].border = true;
              _root.myscroll[mytextfield].text = ("Yadda"+i);
              myy+=18;
              }
  9. Add the movie clip to the ScrollPane instance that you created on the Stage.

    myscrollpane.setScrollContent(_root.myscroll);

    View a sample of the final ActionScript below.

Sample code

The sample ActionScript below defines text field contents and properties, adds the text field to a movie clip and adds the movie clip to a ScrollPane instance.

// EXAMPLE OF HOW TO DEFINE DATA RETURNED FROM A FLASH REMOTING QUERY
  limit = 12;
  fakedata = "yadda";
        
// TEXT FORMAT INFORMATION INCLUDING REFERENCE TO THE 
  LINKAGE IDENTIFIER (MyArial)
  myy = 30;
      myTextFormat = new TextFormat();
  myTextFormat.font = "MyArial";
        
// CREATE AN EMPTY MOVIE CLIP FOR THE TEXT FIELD (myscroll)
  _root.createEmptyMovieClip("myscroll",500);
        
// CREATE THE TEXT FIELD IN THE MOVIE CLIP,EMBED THE 
  FONT, POPULATE WITH QUERY DATA
  for(i=0; i<limit; i++){
  mytextfield = ("mytextfield" + i);
  // createTextField (instanceName,depth,x,y,width,height)
  _root.myscroll.createTextField(mytextfield,i,30,myy,304,18);
  _root.myscroll[mytextfield].embedFonts = true;
  _root.myscroll[mytextfield].setNewTextFormat(myTextFormat);
  _root.myscroll[mytextfield].setTextFormat(myTextFormat);
  _root.myscroll[mytextfield].border = true;
  _root.myscroll[mytextfield].text = ("Yadda"+i);
  myy+=18;
  }
  
// ADD THE MOVIE CLIP TO THE SCROLLPANE INSTANCE ON THE 
  STAGE (myscrollpane)
  myscrollpane.setScrollContent(_root.myscroll);

Sample files

Download the following files to see the text field with and without the fonts embedded.

Text field without fonts embedded (FLA format, 285 K).

Text field with fonts embedded (FLA format, 144K).

Note: Macromedia Flash MX must be installed on your computer in order to open the FLA files.

Last updated: August 28, 2002
Created: August 2, 2002
ID: 16521
Product: Flash Remoting
Versions: All
OS: All
Browser: All
Server: None
Database: None
Former ID: N/A
 

Provide Feedback

less more

1

2

3

4

5

(300 characters or less - you will not receive a reply.)