Introduction

There have been many discussions about Flash and its unsuitability for content rich websites, recent releases such as the new online presence for the FWA have attempted to change this.

Unlike typical Flash websites that use a scrollbar to display large amounts of text, FWA’s interview and article sections are separated out over multiple pages. This article will show you how to achieve this with dynamic content of any length. You will need to be fairly familiar with ActionScript to continue.

Theory

Despite the performance enhancements introduced in Flash 8, text fields containing a large amount of text will prove difficult to scroll efficiently. An appropriate alternative would be to break the text up into a sequence of pages.

To achieve this, a method that can determine how much text will fit into a textfield of a particular width and height is required. Flash has no built in functionality to accomplish this, which leaves 3 possible alternatives:

• Set the textfield to expand to fit its contents (auto size), increasing the number of words / sentences a text field contains at regular intervals, each time examining the height of the textfield to ensure that it does not exceed a particular value.

• Employ a pixel-based solution that determines how much space a block of text occupies by counting the widths of each character. This technique is faster than the previous method, however can prove complicated when trying to implement accurate support for HTML text.

• The fastest and simplest method involves calculating the total number of lines the text will occupy and altering the scroll property of the dynamic text field to move between the various pages. This article will be covering this particular solution.

Start by creating a new FLA document containing a multi-line dynamic text field with the instance name “textfield”. Then create a new layer with the name “actions”, Lock the layer by clicking the padlock to prevent any visual assets from being placed within it. Select the first key frame of this new layer and open the actions panel (Window > Actions). Below is a detailed explanation of the code that should be entered into this panel.

// Assigns the dynamic text field to a variable.
var field = this.textfield;

// Assigns the text field’s text format to a variable
var format = field.getNewTextFormat();

To find the total number of lines that the text will occupy the height of a single line needs to be determined. The depreciated function “getTextExtent” can be used to obtain additional measurement information about the formatted text

// Assigns the text extent object to a variable
var extent = format.getTextExtent(" ");

var ascent = extent.ascent;
var descent = extent.descent;
var leading = int(format.leading);

// Calculates the line height
var lineHeight = ascent + descent + leading;

Now the line height is known we can determine how many lines of text the text field can display at any one time (the number of lines per page).

By dividing the height of the textfield by the height of a single line you can determine the number of lines of text that will appear on each page.

var linesPerPage = field._height / lineHeight;

var linesPerPage = (field._height – 4) / lineHeight;

var linesPerPage = (field._height + leading – 4) / lineHeight;

var linesPerPage = Math.floor((field._height + leading – 4) / lineHeight);

The vertical position of the text in a text field can be altered using the “scroll’ property. The scroll property starts from 1 and can be incremented to move through the various lines of text.
           The “maxscroll” property represents the maximum “scroll” value a text field may have. When the “scroll” equals the “maxscroll” the very last line of text will be visible. Using the “maxscroll” we can determine the number of lines of text that are not currently visible and by adding this to the number of lines per page we can determine the total number of lines.

var lineCount = (field.maxscroll - 1) + linesPerPage;

var pageCount = Math.ceil(lineCount / linesPerPage);

The “ceil” function is used to round the number up to the nearest integer that is of equal or greater value. If the line count divided by the lines per page came out as 3.2, this would be rounded up to 4, as 4 pages are required to display the content.

To allow the user to navigate between the different pages the “scroll” property can be used to alter the vertical position of the text. By multiplying the page number (1, 2, 3, etc) by the number of lines per page the scroll value required to view a particular page can be determined.
By creating a table showing the page number and its corresponding scroll value we can determine an equation to calculate the scroll value for any page.

Page        Scroll Value
1             1
2             linesPerPage + 1
3             2 x linesPerPage + 1
4             3 x linesPerPage + 1
n             (n – 1) x linesPerPage + 1

function setPage(page:Number):Void
{
           field.scroll = (page - 1) * linesPerPage + 1;
}

var offset = (linesPerPage * pageCount) - lineCount + 1;

var lineBreak = field.html ? "<br />" : “\r\n”;

for (var i = 0; i < offset; i++)
{
           text += lineBreak;
}

That concludes all the theory behind this technique, accompanying this article is a source file with a working example of this method in action.

DEMO