In this tutorial is presented a class that you can use it to add text in a text field with buttons and a Scroll bar. The text can be loaded from an external file or added directly in the script. The result will be like in the following presentation.

- To create this text field, with buttons and a scroll bar, there are 3 main steps:
            1. The design, create on the stage a text area, the buttons and the scroll bar.
            2. Create and save a class with the ActionScript code.
            3. Applying the class in the Flash document.

1. Creating the text field, the buttons and the scroll bar

Create an empty text field on the stage (with "Text tool"). In the "Properties panel" you can define properties for this text field (font, size, background color, border, ... etc.).
For the Scroll buttons, draw a triangle (with the "PolyStar Tool"), or a circle with a triangle in it; the shape doesn't matter so much, but it is important to convert it into a Button Symbol (by selecting the drawing, click on the menu Modify -> Convert to Symbol, and choose Button from "Type" option).
After you have created the Button symbol, open the Library panel, drag with the mouse another instance of the button on the stage. To indicate the opposite direction, you can rotate it with the "Free Transform Tool".
Place the two buttons on a vertical edge of the text field, and draw a rectangle between them. This rectangle represents the scroll bar, but to be able to use it, you must convert it into a Movie Clip Symbol (by selecting the rectangle, click on the menu Modify -> Convert to Symbol, and choose Movie Clip from "Type" option).
- The text field, the buttons, and the rectangle should be placed like in the following image:
Scroll text
- Important, each of these elements: the text field, the two buttons, and the scroll bar; must have an instance name added in the Properties panel, in the box with "<Instance Name>".

2. The Class for adding text and Scroll


The class must be created in a special document. Click File -> New and choose "ActionScript 3.0 Class". Flash will open a small dialog box in which it must be specified the name of the class; write the name ScrollTxt, then delete any existing code in the ActionScript Class document, and add the following code.
      - More explanations are in the class code.
package  {
  // Import native AS3 classes whose functions are used in this class
  import flash.display.SimpleButton;        // For Button Symbol objects
  import flash.display.MovieClip;           // For the scroll bar (which is a Movie Clip)
  import flash.display.Sprite;              // For Dragg
  import flash.events.*;                    // For events
  import flash.net.*;                       // For loading external data
  import fl.text.TLFTextField;              // For the text field
  import flash.geom.Rectangle;              // For the Rectangle area of the Dragg area

  
  public class ScrollTxt
  {
    // Define properties for the objects on the Stage: area_text, button_up, button_down and scroll_bar
    public var areaTxt:TLFTextField;
    public var btnUp:SimpleButton;
    public var btnDown:SimpleButton;
    public var scrollBar:MovieClip;

    public var textul:String = 'coursesweb.net';           // for storing text
    public var nrLines:uint = 1;         // Defines the number of lines to jump when clicking the scroll buttons

    private var luScroll:Number;        // Retains the jump length of the scroll bar

    private var bounds:Rectangle;                // to define the Dragg area
    private var dragging:Boolean = false;        // to enable /disable Dragg

    // Constructor
    public function ScrollTxt(areaTxt, btnUp, btnDown, scrollBar, fileUrl=null)
    {
      // Transfer values from parameters to properties
      this.areaTxt = areaTxt;
      this.btnUp = btnUp;
      this.btnDown = btnDown;
      this.scrollBar = scrollBar;
      this.scrollBar.buttonMode = true;         // to display a hand for the mouse pointer on the scroll bar

      // get the distance between the scroll bar and the bottom button
      this.luScroll = this.btnDown.y-this.btnUp.y-this.btnUp.height-this.scrollBar.height;

      // Define the object that set the allowed area for the movement of the scroll bar
      bounds = new Rectangle(this.scrollBar.x, this.scrollBar.y,0,luScroll);

      // Register event listeners for the two scroll buttons
      this.btnUp.addEventListener(MouseEvent.MOUSE_DOWN, scrollUp);
      this.btnDown.addEventListener(MouseEvent.MOUSE_DOWN, scrollDown);

      // Register event listeners for the scroll bar (detects when it is pressed, released, moved)
      this.scrolBar.addEventListener(MouseEvent.MOUSE_DOWN, draBar);
      this.scrolBar.stage.addEventListener(MouseEvent.MOUSE_UP, dropBar);
      this.scrolBar.stage.addEventListener(Event.ENTER_FRAME, checkBar);

      // Register event listener for the text area, when it is scrolled to move the scroll bar
      this.areaTxt.addEventListener(Event.SCROLL, textScrolled);
    }

    // The method that loads and adds text in the text field
    public function addTxt(file_url:String=null):void
    {
      // If the parameter 'file_url' is not null, it loads the text from the URL added in it
      if(file_url!=null)
      {
        // Define objects for the URL adress and loading data
        var obj_url:URLRequest = new URLRequest(file_url);
        var loader:URLLoader = new URLLoader();

        loader.load(obj_url);        // loads the data from the URL added in 'file_url'

        // Register an event listener that detects when the data was completely loaded
        loader.addEventListener(Event.COMPLETE, onComplete);

        // Function called by the COMPLETE event
        function onComplete(event:Event):void
        {
          areaTxt.text = event.target.data;        // Add the loaded data in the text area
          loader.removeEventListener(Event.COMPLETE, onComplete);       // Delete the COMPLETE event
        }
      }
      // Or else uses the text content added in the property 'textul'
      else { this.areaTxt.text = this.textul; }
    }

            /* Define the functions called by the registered events in the constructor */

    // Function called by the event for 'btnUp'
    private function scrollUp(event:MouseEvent):void
    {
      this.areaTxt.scrollV -= this.nrLines;       // Lowers the text with the number of lines given at 'nrLines';
    }

    // Function called by the event for 'btnDown'
    function scrollDown(event:MouseEvent):void
    {
      this.areaTxt.scrollV += this.nrLines;       // move up the text with a number of lines defined in the 'nrLines'
    }

    // Function called by the event for dragging the scroll bar
    function draBar(event:MouseEvent):void
    {
      // Enables to drag the scroll bar in the allowed area
      this.scrolBar.startDrag(false,bounds);
      dragging = true;
    }
    

    // Function called by the event dispatched when the scroll bar is released
    function dropBar(event:MouseEvent):void
    {
      // Disable the possibility to drag the scroll bar
      this.scrolBar.stopDrag();
      dragging = false;
    }

    // Function called by the ENTER_FRAME event, for scrollbar
    function checkBar(event:Event):void
    {
      // Moves the text up or down in 'areaTxt', depending on the movement of the scroll bar
      this.areaTxt.scrollV = Math.round ((this.scrolBar.y - bounds.y)* this.areaTxt.maxScrollV/this.luScroll)
    }


    // Function called by the SCRLL event, when the text is scrolled
    function textScrolled(event:Event):void
    {
      // Changes the position of the scroll bar, depending on the scrolling of the text
      this.scrolBar.y = bounds.y + (this.areaTxt.scrollV * this.luScroll/this.areaTxt.maxScrollV);
    }
  }
}
- Save the document with this class (with the name ScrollTxt.as).

3. Using the ScrollTxt class in the Flash document

After the class is saved, in the same folder as the Flash document, you can use it.
To use the ScrollTxt class, you must create a ScrollTxt instance in the "Actions panel" of the Flash document, by using this syntax:
var ins_name:ScrollTxt = new ScrollTxt(txt_area, btn_up, btn_down, scroll_bar);
- The attributes (txt_area, btn_up, btn_down, scroll_bar) are the instance names of the objects on the stage: the text area, the top scroll button, the bottom scroll button and the scroll bar (when calling the class, these attributes must be added in this exact order).
Once the ScrollTxt instance is defined, call the addTxt() method to add the text in the text field on the stage.
If you want to use a text from an external file, add its URL address as an argument to this method:
ins_name.addTxt('extern_file.txt');
- The text can also be written directly in the script, in the property "textul" as follows:
ins_name.textul = "Any string content";
- In this case, the "addTxt()" method must be called without argument, because the data from the external file replaces the text added in the "textul" property.
The "nrLines" property define the number of scrolled lines when the scroll buttons are clicked (initially it is set to 1).

- As an example of applying these functions, you can use the following script:
// Create an instance of the ScrollTxt class
var setScrol:ScrollTxt = new ScrollTxt(txt_area, btn_up, btn_down, scroll_bar);
setScrol.nrLines = 2;         // Optionally, changes the number of lines scrolled (initially it's 1)

// Text added directly (in this case, the method "addTxt()" must be called without an argument)
setScrol.textul =  'Any string content ...';

// OR, call the method "addTxt()", with the URL of the file which contains the text that must be displayed
setScrol.addTxt('extern.txt');

- To download the archive with the FLA document and the "ScrollTxt.as" file with the examples from this tutorial, click: A class for Scroll text.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Click on the HTML tag which creates an horizontal line in web page.
<br /> <em> <hr />
Some content ...
<hr />
Content under line ...
Which CSS property defines the text color?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Click on the function which searches if a character, or text exists in a string.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// isn`t in string");
else alert("http:// is in string");
Which function splits a string into an array of strings based on a separator?
array_merge() explode() implode()
$str = "apple,banana,melon,pear";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"apple", 1=>"banana", 2=>"melon", 3=>"pear")
A class for Scroll text

Last accessed pages

  1. Zoo Amigos (6958)
  2. jQuery ajax() method (13427)
  3. Selection Tools (4056)
  4. Texarea with buttons to format text, colors and smiles (2773)
  5. Using file_put_contents, file_get_contents, readfile and file() (5435)

Popular pages this month

  1. Qwop (3462)
  2. Drag Racer V3 (1707)
  3. Flash Games - Free online Games (810)
  4. Bubbles3 (810)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (758)