Video Training – Tutorials

Flash CS3 Tutorial – Create a Custom Scrollbar with ActionScript

October 27, 2008

For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Flash CS3 Tutorial Videos .

Would you like to be able to create your own cool, custom Flash Scroll Bar. This Flash Tutorial shows you how, with a little bit of ActionScript 3 you’ll be on your way.

Flash CS3 Tutorial – Create a Custom Scrollbar with ActionScript

In this tutorial we’ll look at how to create a custom scrollbar using Flash and Actionscript 3.0. In the download file (To download right click and save target as ) we have 3 main graphics, two arrows and a rectangle. The two arrows will act as our scrollbar navigation allowing us to scroll up or down. The rectangle will act as the slider and will work in the same way as the scrollbar in your browser window. We’ll create a TextField and connect it to the movie clips using actionscript allowing the text to scroll with the scrollbar.

Downloads for this Flash Tutorial
Example SWF File
Download FLA File
(To download right click and save target as )

Lesson 1 – Setting Up The Movie-Clips

First we need to convert the arrow and rectangle graphics into Flash Movie-Clips, and give them each unique instance names.

Select the rectangle, press F8, choose Movie-Clip from the type options and click Ok.

Click the new Movie-Clip to make sure it’s selected and go down to the properties inspector and type “slider” inside the text box. This will give the Movie-Clip the instance name “slider” and allow us to control the Movie-Clip with Flash Actionscript.

Repeat this step for the up and down arrow graphics but give them the instance names upArrow and downArrow respectively.
Step 2 Setting Up The Text Field

In this step we’ll create the text that will be controlled by the scrollbar, instead of using the basic text tool to create the text we’re going to dynamically create it using actionscript. We’ll use the TextField and TextFormat classes to create, format and position the text on the stage. Below we’ll break the code down line by line to see what it all does.

If you haven’t already done so select the first keyframe on the timeline and press F9 to open up the actions panel.

First we create a new TextField object called theText. This creates a new instance of the TextField class giving us access to all the properties, methods and events inside that class.

var theText:TextField = new TextField();
Next we create a TextFormat object called theFormat, again giving us access to all the properties, methods and events available to that class. The TextFormat class will allow us to change the size and font properties.

var theFormat:TextFormat = new TextFormat();

At the moment our TextField is empty so we fill it with some text using the text property.

theText.text = “This is a custom made scrollbar. At quod soleat voluptua pri, congue copiosae vulputate ea vel, sit solum facer dicta ne. Sit vide singulis voluptatum cu, est et porro nominati iudicabit, ius et dicit perfecto volutpat. Altera iriure incorrupte est eu, et usu graece fuisset, pri libris epicurei neglegentur an. Usu nibh velit accusata cu, pro ad graecis phaedrum indoctum. Facilis nusquam id ius, ut sonet legimus has. Veniam eruditi graecis sed ei, est id alterum dolorum omittantur. Libris semper quo cu, ius rationibus delicatissimi signiferumque ut, in enim elit corpora sit. Et ius aliquam bonorum ancillae, vix ei quis atqui. Debet dicunt senserit ne sed, solum ponderum persecuti eos et, ullum antiopam expetenda usu eu. Eu nec doming everti nominavi, eu mea falli utroque facilis. An quot quas sonet sit, id vim laudem dolorum, ne vel veritus denique constituto.”;

Sets the text size to 15px.

theFormat.size = 15;

Using the setTextFormat()method sets the font property to the theText object’s theFormat property. In simple terms it combines the TextFormat properties to the TextField.

theText.setTextFormat(theFormat);

Setting the wordWrap value to true will word wrap the text inside the TextField.

theText.wordWrap = true;

Currently all of the text sits on a single line, setting the multiline value of the TextField to true will ensure that the text will appear on multiple lines.

theText.multiline = true;

We want to position the TextField alongside the scrollbar, so we change the X and Y positions of the TextField to 100px respectively.

theText.x = 100;
theText.y = 100;

At the moment our TextField size is really small, we resize it by changing the width and height values to 300px and 160px respectively.

theText.width = 300;
theText.height = 160;

The addChild method adds the TextField to the stage, making it visible when you preview the file.

addChild(theText);

Step 2 – Setting Up The Scroll Arrows

In this step we’ll give the up and down arrows some MouseEvents and functions, enabling us to manipulate the position of the text inside the TextField.
When you hover over a link on the Internet the cursor state changes from an arrow to a hand pointing, to create the same effect with Actionscript we set the buttonMode value to true. Setting the buttonMode value of the up and down arrows to true gives us the hover state effect.

upArrow.buttonMode = true;
downArrow.buttonMode = true;

The arrows on the stage need to listen for mouse clicks, we use the addEventListener()method to achieve this. The addEventListener()methods below each have three parameters class type, property and unique name. The main parameters in our code are MouseEvent and CLICK, selecting MouseEvent gives us access to the MouseEvent class and inside that class we choose the CLICK property. Finally we name them scrollUP and scrollDown respectively.
upArrow.addEventListener(MouseEvent.CLICK, scrollUP);
downArrow.addEventListener(MouseEvent.CLICK, scrollDown);
At the moment nothing happens when we click the up and down arrows, we need to create some functions for the scrollUP and scrollDown event listeners. We want the text in the TextField to scroll up or down depending on which arrow is clicked, with the use of the scrollV property and a little math this can be accomplished. The scrollV property allows us to manipulate the vertical position of the text inside the TextField; it’s measured in lines making it easy to change the text’s position inside the TextField. Inside the scrollUP function we subtract the scrollV value by one each time the function fires, essentially subtracting one line of text each time the up arrow is clicked. For the scrollDown function the opposite is required and we add one each time.
function scrollUP(event:MouseEvent):void {

theText.scrollV -=1;

}
function scrollDown(event:MouseEvent):void {

theText.scrollV += 1;
}
Step 3 – Controlling The Slider
The final and most difficult step of this Flash tutorial is controlling the slider. We’ll create boundaries to control where the slider can and cant scroll too. We’ll then create some eventListener()methods and functions to attach the TextField to the slider.
First we create a new Rectangle object called area to create some boundaries for the slider. The arguments for the Rectangle object are x position, y, position, width and height. In our case we want the boundaries to start at the same position as the slider position, we do this by declaring the x and y positions as slider.x and slider.y. For the width and height of the Rectangle argument we specify 0 and 90 respectively, 0 because we don’t want to be able to move the slider horizontally and 90 because the height of our slider background on the stage is 90px.

var area:Rectangle = new Rectangle(slider.x, slider.y,0,90);

The next step is to create some mouse events for the slider so that we’re able to drag the slider. We’ll use MOUSE_UP and MOUSE_DOWN events from the MouseEvent class that’ll allow us to drag and drop the slider. One noticeable difference between the 2 methods is that the sliderOut event listener is attached to the stage and not the slider, if we attached it to the slider the scrollbar would continue to scroll even when we click away from the slider. Attaching it to the stage gets around this problem.

slider.addEventListener(MouseEvent.MOUSE_DOWN, sliderDrag);
stage.addEventListener(MouseEvent.MOUSE_UP, sliderOut);

As stated before we want to be able to drag and drop the slider, creating functions with the methods startDrag() and stopDrag makes this simple. startDrag() you’ll notice has 2 parameters false and area, the first parameter is a Boolean value called lockCentre. The lockCenter value is set to false, locking to the point where you first click. The second parameter bounds is a Rectangle value that allows us to specify a rectangle boundary area, we’ve already created the boundary inside the area Rectangle object so we call that by typing “area” for the second parameter. The stopDrag() method doesn’t require any parameters as it just cancels the drag.

function sliderDrag(event:MouseEvent):void {
slider.startDrag(false,area);
}

function sliderOut(event:MouseEvent):void{
slider.stopDrag();

}

Next we have to create some EventListeners() to listen for a SCROLL event and an ENTER_FRAME event. The SCROLL event will listen for when the text inside theText TextField is being scrolled. The ENTER_FRAME fires constantly at the same rate as the frame rate. We’ll name these EventListeners() textScrolled and theSlider respectively. In the next step we’ll create some functions for these EventListeners.

theText.addEventListener(Event.SCROLL, textScrolled);
theText.addEventListener(Event.ENTER_FRAME, theSlider);
At the moment the slider drags up and down within the boundaries specified earlier but it doesn’t actually scroll the text. To scroll the text with the slider we create a function with a small calculation that attaches the text position to the slider position.  First we set the vertical position of theText TextField equal to Math.round making sure the calculation gives us a whole number, remember we want to scroll down line by line otherwise we’d end up having some lines getting cut off. Inside the brackets we create the calculation, we’re looking for how far the slider has scrolled so we subtract the sliders y position by the area’s y position and multiply that by the maximum scroll value of the TextField, then finally divide that value by the height of our area (90).

function theSlider(event:Event):void
{
theText.scrollV = Math.round ((slider.y – area.y)* theText.maxScrollV/90)
}

When we click either the up or down arrows the slider doesn’t move position. To make this scrollbar complete we want the slider to move in conjunction with the text when we scroll with the arrow buttons. Inside the function we’ll create a small calculation so that the slider follows the text position. First we set the slider.y position to the y position of our area rectangle. We add that to the calculation inside the brackets. The calculation adds the vertical position of our text (theText.ScrollV), multiplied by the height of the of our boundary area (90) and divides it by theText Textfields maximum ScrollV position.
function textScrolled(event:Event):void
{
slider.y = area.y + (theText.scrollV * 90/theText.maxScrollV);
}

Entry Filed under: ActionScript. Tags: ActionScript, Adobe Flash CS3, AS3, Custom ScollBar, Flash Tutorial, Training Video.