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.
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:
- 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.