3 Replies Latest reply on Jun 29, 2007 6:03 AM by peterent

    Create a "stock ticker" in Flex 2.0 ?

    Level 7
      Hi all,

      I've been a Windows developer for many years, most recently using.NET
      technology. I took the plunge into Flex 2 development with the ultimate goal
      of converting one of my major Windows applications to Flex. If I can pull it
      off I'll be a hero since my application would be available in users'
      browsers, even on non-Windows platforms.

      Take a look at the header for my Flex-based application [the data isn't
      real -- it's just a prototype]. The URL is:


      I'm a bit disappointed by my scrolling stock ticker at the top of the page.
      I wasn't really sure how to design a ticker so I just created a Label inside
      a black Canvas and moved the Label one pixel to the left on each screen

      But the results are mediocre. The text seems to flash while moving. It's
      hard on my eyes. I'd like it to be smooth like what one might see on CNBC.

      The one downside to using Flex instead of .NET WinForms is the lack of third
      party components. I've looked everywhere for a "ticker" component for Flex
      2.0 and can't find one. There are plenty of Flash-based ticker components
      out there, but according to my Flex 2.0 introductory book, a Flex 2.0
      project using ActionScript 3.0 cannot control another flash component that
      was built using an earlier version of ActionScript -- so alas, these
      flash-based ticker components are useless to me.

      I've only been using Flex for a week now so I'm still going through the
      learning curve. Perhaps there's a more efficient approach to building this
      ticker? Or perhaps there's a Flex 2.0 ticker component out there that I've
      just missed?

      Any advice would be appreciated.



        • 1. Re: Create a "stock ticker" in Flex 2.0 ?
          peterent Level 2
          First off, you CAN use ActionScript 2.0 Flash SWFs in Flex 2 applications (see my blog: http://weblogs.macromedia.com/pent and search for LocalConnection).


          Here's one way to do it. First put your text into a Canvas because you can position a Canvas's children by (x,y):

          <mx:Canvas id="frame" x="111" y="436" width="307" height="56" creationComplete="moveText1()" horizontalScrollPolicy="off">
          <mx:Label x="253" y="10" text="Move Me" id="ticker"/>

          When write the moveText1() code:
          private function moveText1() : void
          ticker.x -= 5; // move 5 pixels at a time
          if( ticker.x+ticker.width < 0 ) ticker.x = frame.width;

          Using callLater allows the text to be moved when the Flex framework gets a chance. This will be smoother than the way you are doing it. You can experiment with the amount too.

          Move Effect

          Another way to move the text is using the Move effect (using the same Canvas and Label, but changing the Canvas's creationComplete event handler):

          <mx:Move id="moveText" target="{ticker}" xFrom="{frame.width}" xTo="{0-ticker.width}" duration="2000"
          effectEnd="moveText.play()" />

          To get the effect to start:
          <mx:Canvas id="frame" x="111" y="436" width="307" height="56" creationComplete="moveText.play()" horizontalScrollPolicy="off">

          I personally like the Move effect because you can write it all in MXML tags and is simpler.
          • 2. Re: Create a &quot;stock ticker&quot; in Flex 2.0 ?
            Level 7
            Hi Peterent,

            Thanks for the tips. I ended up using the Move effect in a fashion
            similar to what you described below. Another thing that really helped me out
            was embedding the font. For what ever reason, embedded fonts are much easier
            to read when being scrolled.

            I'd also like to ask a followup question to this comment:

            > First off, you CAN use ActionScript 2.0 Flash SWFs in Flex 2 applications
            > (see
            > my blog: http://weblogs.macromedia.com/pent and search for
            > LocalConnection).

            My introductory Flex 2.0 book makes the same point. The problem is that
            a third party components rarely listen on a LocalConnection. Had I designed
            the legacy component myself, sure, I could add an interface accessible via
            LocalConnection -- but for a "black box" third party component, I'm not sure
            how to pull it off. Perhaps I'm missing something.


            • 3. Re: Create a &quot;stock ticker&quot; in Flex 2.0 ?
              peterent Level 2
              I failed to take into account that you might not be the author of the Flash SWF. You can put the 3rd party Flash SWF into a Flash SWF wrapper of your own making and that could have LocalConnection. Use the Flash loadMovie function to bring in the 3rd party SWF or embed it directly into your SWF.

              This will only work if you know how to control the 3rd party SWF. For example, if you know there is a root level symbol instance called "tick" then you can address it. Otherwise this solution won't work either.