Categories

Flash/XML Flash. How to create a scroll using AS3

Ray Taylor October 14, 2011
Rating: 4.5/5. From 2 votes.
Please wait...

This tutorial will teach you how to add a Scroll in Flash and/or XML Flash template in Action Script 3.

1. Open the .FLA file, located in the ‘sources/flash’ folder of your downloaded archive.

2. Locate the ‘pages’ movie clip and navigate to the Page in to which you need to add a scroll function.

NOTE: if you are editing the XML Flash template, you need to remove the dynamic text script, as we will not need it. Then Navigate to the action script layer (layer 3, frame 3 in this example), press F9 key to open the action script panel and remove the dynamic text script.

3. Click on the text box on the Scene to select and change the Dynamic Text to Input Text in the properties panel.

4. Name this text field ‘scrollText’

5. Navigate to the timeline and insert a new layer. We will name it ‘line’

6. On the Scene, draw a line and convert it into a movie clip.

7. Insert another layer in the timeline. We will name it ‘scrollMC’

8. Draw a rectangle and convert the rectangle into a movie clip. Give it an instance name of ‘scrollMC’ .

9. Insert another layer in the time line for the Action Script. Press F9 key to open the AS panel, so we can add script.

10. We will assign some text to the scrollText text field. We want it to be multiline and wrap text:

	var someText:String = "New Text Here," + "Another New Text here";
  
	scrollText.text = someText;
	scrollText.multiline = true;
	scrollText.wordWrap = true;

NOTE: insert your text in this manner: “ Your text here” + “ Another new text here ” ;

11. Now, we will add the scrolling functionality to the scrollbar:

var bounds:Rectangle = new Rectangle(scrollMC.x, scrollMC.y, 0, 200);
var scrolling:Boolean = false;
 
function startScroll (e:Event):void {
	scrolling = true;
	scrollMC.startDrag (false,bounds);
}
 
function stopScroll (e:Event):void {
	scrolling = false;
	scrollMC.stopDrag ();
}
 
scrollMC.addEventListener (MouseEvent.MOUSE_DOWN, startScroll);
stage.addEventListener (MouseEvent.MOUSE_UP, stopScroll);

12. Now, we will make the scrollMC to scroll the text:


 addEventListener (Event.ENTER_FRAME, enterHandler);
 
       function enterHandler (e:Event):void {
	if (scrolling == true) {
	scrollText.scrollV = Math.round(((scrollMC.y - bounds.y)/200)*scrollText.maxScrollV);
	}
}

13. Press CTRL+ENTER or File->Publish Preview->Flash

 

Feel free to check the detailed video tutorial below:

Flash/XML Flash. How to create a scroll using AS3

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket