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">
    <mx:Script>
        <![CDATA[

            import mx.effects.easing.Linear;

            private function onCrtComplete():void
            {
                startScroll();
            }

            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;
                moved.play();
            } 

            private function onResized(evt:Event):void
            {
                if (!this.initialized)
                {
                    return;
                }
                moved.stop();

                startScroll();
            }

        ]]>
    </mx:Script>

    <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" />
    </mx:HBox>

</mx:Application>

Advertisements

Actions

Information

3 responses

2 02 2009
Martin

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

Martin,

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.

j

30 06 2009
A.Pinto

Hi Justin,

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

AP

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s




%d bloggers like this: