Monday, 16 May 2011

News ticker in Actionscript 3

In this tutorial you will learn how to create a news ticker in Actionscript 3. The news ticker contains multiple rotating blocks that hold images and text. The text and images will be loaded using XML. You will need some images for this tutorial as well as the LoaderMax plugin which can be downloaded from

News ticker in Actionscript 3

Step 1

Open up your favourite text editor and copy the following xml and save it with the file name Ticker.xml. You will need to save your images in a folder called ‘Images’.

<ticker img = "images/image1.jpg" text = "text1"  link ="" />
<ticker img = "images/image2.jpg" text = "text2"  link ="" />
<ticker img = "images/image3.jpg" text = "text3"  link ="" />
<ticker img = "images/image2.jpg" text = "text4"  link ="" />

Step 2

Open up a new AS3 flash file with the stage dimensions 200x200. Then save the file with the name ‘Ticker’ in the same directory as your xml file.

Step 3

Select the Rectangle tool and drag a rectangle shape on the stage with dimensions 200x40. Convert the rectangle shape into a movie clip (F8) and tick the Export to ‘Actionscript checkbox’ and give the class name: ‘TickerBox’.

Double click on the movie clip to go inside in and select the Text tool with dynamic text and drag a dynamic text field with the instance name: ‘output_txt’. You will need to embed the characters glyphs you intend to use. I have embedded the lowercase and numerical glyphs. Now place an empty movie clip at the top left of the rectangle with a 2 pixel offset with the instance name: ‘container’. Then return to the main timeline and delete the movie clip from the stage. The movie clip will be added dynamically, so will not be needed on the stage.

Step 4

Open up an AS3 class with name Ticker and add the following code.

package {
    import flash.display.MovieClip;
    import com.greensock.loading.ImageLoader;

    public class Ticker extends MovieClip {

        private var speed:uint = 1;
        private var numOfBoxes:uint = 4;
        private var counter:uint = 0;
        private var xmlArray:Array      = new Array();
        private var tickerArray:Array   = new Array();

        public function Ticker() {
            //Creates a new instance of the URLoader and loads the Ticker xml.                                
            var uloader:URLLoader = new URLLoader();
            uloader.addEventListener(Event.COMPLETE, xmlLoaded);
            uloader.load(new URLRequest("Ticker.xml"));

        private function xmlLoaded(e:Event):void {
            var xml:XML = new XML(;
            //Parses the xml in the xmlArray and fires the init function.
            for (var i:uint = 0; i < numOfBoxes; i++) {
                 xmlArray.push({   image: xml.ticker.attribute("img")[i],
                                   txt:   xml.ticker.attribute("text")[i],
                                   url:   xml.ticker.attribute("link")[i]});                               
        private function init():void {
            //Creates four instances of the TickerBox with an vertical offset of 60 pixels.
            //Adds the click, roll over and roll out events to the TickerBox.
            //Sets the mouseChildren property to false, so anything inside the TickerBox can't be selected.
            //Adds the dynamic property index which is used to target the array index to get the url.
            for (var i:uint = 0; i < numOfBoxes; i++) {
                var t:TickerBox = new TickerBox();
                t.y = 0 + (i * 60);
                t.addEventListener(MouseEvent.CLICK, mouseHandler);
                t.addEventListener(MouseEvent.ROLL_OVER, mouseHandler);
                t.addEventListener(MouseEvent.ROLL_OUT, mouseHandler);
                stage.addEventListener(Event.ENTER_FRAME, enterHandler);

          private function loadImage():void {
              //Loads the images in there respective containers in order using the counter
              //and resizes the width and height of the images.
              var loader:ImageLoader = new ImageLoader(xmlArray[counter].image, {autoDispose:true,

           private function onImageLoad(event:LoaderEvent):void {
                //This function will keep calling the loadImage() function until
                //all the images have been loaded.
                if (counter < numOfBoxes) loadImage();

            private function mouseHandler(e:MouseEvent):void {
            //Removes and adds the event frame listener when you rollover and rollout.
            //Goes to the respective url when you click on a box.
                 switch (e.type) {
                     case "rollOver" : stage.removeEventListener(Event.ENTER_FRAME, enterHandler); break;
                     case "rollOut"  : stage.addEventListener(Event.ENTER_FRAME, enterHandler);     break;
                     case "click"    : navigateToURL( new URLRequest(xmlArray[e.currentTarget.index].url), "_blank"); break;

            //Moves the the tickerBoxs vertically. If the boxes go over the stage height
            //then it will get re-added at the top of the stage with an offset of a
            //ticker box height.
            private function enterHandler(e:Event):void {
                for (var j:uint = 0; j < tickerArray.length; j++) {
                    if (tickerArray[j].y>stage.stageHeight) {

Step 5

Export your movie Ctrl + Enter. Try moving your mouse over and out of the box and it should stop and start. And trying clicking on a box and it will take you to the respective url.

Any questions leave a comment below. You can download the source files here.


kwalkin 30 November 2011 at 04:52  

Great job! Is it a simple case of changing the height and vertical attributes to get it to scroll horizontally? Can't fin any tutorials online that describe how to do that. Am I missing something very simple?

Either way nice work.

iliketo 1 December 2011 at 03:35  


If you understand the code you can easily change from vertical to horizontal. - You don't need to find any tutorial online!

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP