Flex: horizontal scrolling banner

27 10 2008

OK, so I’m not advocating advertising, but we all deal with it from time to time.

Below is a simple solution to get some container (in this case a HBox) to scroll horizontally across the screen.

Note the clipContent on the absolute container (in this case the Application container). This prevents the container from putting up scrollbars.

The duration sets the speed of movement, below I’ve set it to approximately 15ms per pixel.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application resize="onResized(event)" creationComplete="onCrtComplete()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" clipContent="false">

            import mx.effects.easing.Linear;

            private function onCrtComplete():void

            private function startScroll():void
                moved.duration = 15 * this.width + (15 * hbox.width);

                moved.xTo = -hbox.width;  

                hbox.x = this.width;
                hbox.y = this.height - hbox.height;

            private function onResized(evt:Event):void
                if (!this.initialized)



    <mx:Move id="moved" target="{hbox}" repeatCount="0" easingFunction="mx.effects.easing.Linear.easeIn" />

    <mx:HBox id="hbox" backgroundColor="#5F3013" fontSize="12" fontFamily="courier" color="#86DF2D" >
        <mx:Label text="this is" />
        <mx:Label text="shameless" fontWeight="bold" />
        <mx:Label text="advertising" />





3 responses

2 02 2009

Hi Justin,

Wonderful job. I tried it and it is very nice. Is it possible to get the text from file or sql db ?

2 02 2009
Justin J. Moses


of course you can – the HBox component I’ve used could be replaced with any component really. The same is true for it’s children. I’ve just used a HBox with three static Label’s as an example.


30 06 2009

Hi Justin,

add mouseOver = “moved.stop ();” mouseOut = “moved.play ();” on labels to start and stop events with the mouse


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: