[flexcoders] Scrolling Image Component

[Dan Vega]

I built a custom component that allows me to scroll an image up the screen.
When you mouse over the image the animation stops and when you mouse out it
resumes. I also built in a click handler to open up a url. Here is the code
as well as the code I am using to instantiate it. My question is how could
I go about nesting another component?  You will see my want example > I want
to be able to pass any number of images into the component. I am a newb so I
am not sure how I can keep nesting.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical"
xmlns:components="components.*" paddingTop="0" paddingBottom="0">
    <components:ScrollingImage height="100%" width="500"
img="assets/cf_appicon.jpg" speed="10"/>

    <!--- want it to work like this --->
    <components:ScrollingImage height="100%" width="500" speed="10">
        <components:img source="source_of_image" url="www.abc.com"/>
        <components:img source="source_of_image" url="www.abc.com"/>
        <components:img source="source_of_image" url="www.abc.com"/>
        <components:img source="source_of_image" url="www.abc.com"/>
    </components:ScrollingImage>
</mx:Application>


*ScrollingImage.mxml
*
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml";
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    creationComplete="init()"
    borderStyle="solid" borderColor="#ffffff" borderThickness="2">

    <mx:Script>
        <![CDATA[
            import mx.controls.Image;

            [Bindable] public var img:String;
            [Bindable] public var speed:uint;

            private var myTimer:Timer;

            public function start():void {
                myTimer.start();
            }
            public function stop():void {
                myTimer.stop();
            }
            private function pause(event:MouseEvent):void {
                stop();
            }
            private function resume(event:MouseEvent):void {
                start();
            }
            private function init():void {
                myTimer = new Timer(speed);
                myTimer.addEventListener(TimerEvent.TIMER,moveImage);
                start();

scrollingImage.addEventListener(MouseEvent.MOUSE_OVER,pause);

scrollingImage.addEventListener(MouseEvent.MOUSE_OUT,resume);
                scrollingImage.addEventListener(MouseEvent.CLICK,openURL);
            }
            private function moveImage(event:TimerEvent):void {
                if(scrollingImage.y < (0-scrollingImage.height)){
                    scrollingImage.y = this.height;
                } else {
                    scrollingImage.y --;
                }
            }
            private function openURL(event:MouseEvent):void {
                navigateToURL(new URLRequest("
http://www.adobe.com/products/coldfusion";),"_blank");
            }

        ]]>
    </mx:Script>

    <mx:Image id="scrollingImage" source="{img}" y="{this.height}"/>

</mx:Canvas>

-- 
Thank You
Dan Vega