12 Replies Latest reply on Oct 20, 2010 1:15 PM by Flex harUI

    Continuous News Ticker

    GDH123 Level 1

      I am having incredible problems with a news ticker I am trying to create. I can get the text to scroll and I can get the data to change when I click the appropriate buttons. The text will scroll accross the canvas, depending where I put the start and stop. Is it possible to get the text to scroll continuously until I press another button? For example, can I get the text to start scrolling accross the screen, and when the whole line has shown up on the screen, it repeats itself and shows up again, while the first line is scrolling off the screen, the new one is scrolling on the screen. And once that line is all the way on the screen another of the same line pops up.

       

      Once I press another button (which is currently taking data feed from an rss site) then the next line that pops on the screen is that data, and then once that is all the way on the screen then it shows up again, and continues.

       

      I have looked everywhere and tried to figure out code for this for weeks and all I have come accross is plenty of different code, but It only shows the data line once before it exits the screen, then shows up again. My goal is to not have any white space in between the lines.

       

      I know it's ugly but this is the code I have so far. I put it here so I can get some feedback. I have been keeping it clean every day and today I got so frustrated I didn't feel like cleaning it up. The three website buttons are the different rss feeds, and the go button starts up the other line. I was trying to get it to play continuously and if I could then I was going to set a command to get it to begin scrolling at the appropriate time.

       

      ****************************************************************************************** *****************************

       

      <?xml version="1.0" encoding="utf-8" ?>

      <mx:Application

       

       

      xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="complete()" layout="absolute" clipContent="true">

       

       

      <mx:Script>

      <![CDATA[

       

       

      import mx.events.ListEvent;

      [

      Bindable] var website:String;

      [

      Bindable] var rss:String = "Information displayed here.";

      [

      Bindable] var len:int;

      [

      Bindable] var time:int;

      [

      Bindable] var repeatTime:int;

       

      //wrapped up in a function so you can call it whenever you want

       

       

       

       

       

      import mx.rpc.events.ResultEvent;

       

       

      import mx.effects.easing.Linear; // from test 5 for scolling

       

      [

      Bindable] private var fullXML:XML;

       

       

      private function init()

      {

      }

       

       

      private function contentHandler(evt:ResultEvent):void{

      fullXML = evt.result

      as XML;

       

      rss = fullXML.channel.description;

       

      }

       

       

      function setWebSite1()

      {

      website =

      "http://rss.cnn.com/rss/cnn_topstories.rss";

      siteData.send();

       

      }

       

      function setWebSite2()

      {

      website =

      "http://forums.adobe.com/community/feeds/threads?containerType=14&container=2197";

      siteData.send();

      }

       

      function setWebSite3()

      {

      website =

      "http://sports.espn.go.com/espn/rss/news";

      siteData.send();

      }

       

       

      //created to try to put the rss feed into the scroll

       

      function putInFeed(txt)

      {

      website = txt;

      }

       

       

      // next 3 functions are from test 5 for scrolling (onCrtComplete, startSrcoll, and onResized)

       

       

      /* private function onCrtComplete():void

      {

      startScroll();

      }

      */

       

      /* private function startScroll():void

      {

      moved.duration = 4000;

       

      moved.xTo = 200;

       

       

      hbox.x = 700;

      hbox.y = 500;

      moved.play();

      }

       

      private function onResized(evt:Event):void

      {

      if (!this.initialized)

      {

      return;

      }

      moved.stop();

       

      startScroll();

      } */

       

       

      private function complete():void

      {

      adjustVariables();

      move_left.xFrom=250;

       

      move_left.xTo= 0-len;

       

      move_left.repeatCount=0;

      //loop

       

      move_left.repeatDelay=-1000;

      //loop time

       

      move_left.duration=time;

      //the time of scroll once

       

      move_left.play();

       

      }

       

       

      private function startNextLine():void

      {

       

      move_left2.xFrom=250;

      move_left2.xTo= 0-len;

      move_left2.repeatCount=0;

      //loop

      move_left2.repeatDelay=-1000;

      //loop time

      move_left2.duration=time;

      //the time of scroll once

      move_left2.play();

      }

       

       

      private function adjustVariables():void

      {

       

      len = rss.length;

       

      time = len * 6 * 40;

      repeatTime = time;

      len = len * 6;

       

      trace(rss);

       

      trace(time);

       

      trace(len);

       

      }

       

       

      private function addString():void

      {

       

      if(1)

      {

       

      }

      }

       

       

      /* private function addString():void

      {

      while{

      } */

       

       

       

       

      // from test4

       

       

       

       

       

      /*http://www.buildinternet.com/live/datagrids/assets/content.xml

       

      mouseDown="onItemClick( event );"

       

      itemClick="onItemClick( event );"

       

      dataChange="onItemClick( event );"

      */

       

        

      ]]>

       

      </mx:Script>

       

      <mx:HTTPService url="{website}" id="siteData" result="contentHandler(event)" resultFormat="e4x" />

       

      <mx:Button id="button1" label="website1" click="setWebSite1(), adjustVariables()" x="70" y="70"/>

       

      <mx:Button label="website2" click="setWebSite2()" x="70" y="100"/>

       

      <mx:Button label="website3" click="setWebSite3()" x="70" y="130"/>

       

      <mx:Button label="go" click = " startNextLine()" x="70" y="160"/>

       

       

        

        

        

       

      <!-- from test 5 -->

       

      <mx:Move id="move_left" target="{tt}" easingFunction="mx.effects.easing.Linear.easeIn"/>

       

      <mx:Move id="move_left2" target="{ttt}" easingFunction="mx.effects.easing.Linear.easeIn"/>

       

      <mx:Panel width="250" height="70" layout="absolute" title="Anouncement" fontSize="12" horizontalCenter="0" verticalCenter="0">

       

      <mx:Canvas id="cs" width="100%" height="100%" left="0" top="10" horizontalScrollPolicy="off">

       

      <mx:Text id="tt" text="{rss}" >

       

      </mx:Text>

       

      <mx:Text id="ttt" text="{rss}" >

       

      </mx:Text>

       

      </mx:Canvas>

       

      </mx:Panel>

       

      <!-- end of code from test 5 -->

       

      </mx:Application>

        • 1. Re: Continuous News Ticker
          Flex harUI Adobe Employee

          Might be easier with Spark and subclass of Label component.  Each line will

          be a child TextLine

          • 2. Re: Continuous News Ticker
            rtalton Level 4

            Here's a cheap way of doing it.

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                creationComplete="initApp()"
                width="280"
                layout="absolute">

             

                <mx:Script>
                    <![CDATA[
                        import mx.events.TweenEvent;
                        import mx.effects.easing.Linear;

             

                        private function initApp():void {
                            playTxtAnimation()
                        }

             

                        private function playTxtAnimation():void {
                            moveLeft1.play();
                        }

             

                        private function handleTweenUpdate(event:TweenEvent):void {
                            if (txt1.x <= 0 && !moveLeft2.isPlaying) {
                                trace();
                                moveLeft2.play();
                            }
                        }
                    ]]>
                </mx:Script>

             

                <mx:Move
                    id="moveLeft1"
                    duration="10000"
                    easingFunction="mx.effects.easing.Linear.easeNone"
                    repeatCount="0"
                    target="{txt1}"
                    tweenUpdate="handleTweenUpdate(event)"
                    xFrom="300"
                    xTo="{txt1.width * -1}"/>

             

                <mx:Move
                    id="moveLeft2"
                    duration="10000"
                    easingFunction="mx.effects.easing.Linear.easeNone"
                    target="{txt2}"
                    xFrom="300"
                    xTo="{txt1.width * -1}"/>

             

                <mx:Canvas
                    id="cvs"
                    width="100%"
                    height="100%"
                    horizontalScrollPolicy="off">

             

                    <mx:TextArea
                        id="txt1"
                        text="This is a line of text moving across the screen..."
                        width="280"
                        height="18"
                        x="280"
                        borderColor="0x000000"
                        borderThickness="1"
                        verticalCenter="0"/>

             

                    <mx:TextArea
                        id="txt2"
                        text="This is a line of text moving across the screen..."
                        width="280"
                        height="18"
                        x="280"
                        borderColor="0x000000"
                        borderThickness="1"
                        verticalCenter="0"/>
                </mx:Canvas>
            </mx:Application>

            1 person found this helpful
            • 3. Re: Continuous News Ticker
              Devtron Level 3

              rtalton, that was a great example!! this is exactly what I am looking for in my app, to use RSS feeds. I am going to modify this to "move" vertically instead of horizontal. this is really sweet, thanks for sharing this!

              • 4. Re: Continuous News Ticker
                GDH123 Level 1

                that is exactly what I am looking for! just with out the boarder. That is similar to what I had already, except that I had to press the go button in order to make it play next to each other to keep a continuous thread coming. Also just to make it more complicated, now I just have to get the rss feed I choose to play through there. And not only chang eit, but when the line goes off the screen, the time it coems back on the screen it has to be the one i chose. It can't just change all together once I click it. But the text.width thing helps a lot! I didn't know you could do that. Is there a list of commands somewhere that I can look at, like from java in a nutshell or something? That was a great help btw!

                • 5. Re: Continuous News Ticker
                  GDH123 Level 1

                  I had this same problem with mine when I set the two lines going at the same speed for a while, If i let the code run for a few minutes that you gave me

                  the lines begin to overlap each other. Is it possible to reset them every time the go off the screen?

                  • 6. Re: Continuous News Ticker
                    GDH123 Level 1

                    Is there a manual or something about these that I can read about? I don't know what spark is, and I don't know the functions of the label component.

                    • 7. Re: Continuous News Ticker
                      rtalton Level 4

                      You can see the help docs online:

                      http://www.adobe.com/devnet/flex/documentation.html

                       

                      The example is pretty bare-bones, so it really needs a lot of work brfore you use it. Check into the effect events to see what handlers you can use while an effect is runnning, begins, ends, etc. Also look into the TweenUpdate event. You may be able to use those events to control what is happening in the app.

                      • 8. Re: Continuous News Ticker
                        rtalton Level 4

                        In the example, the two text areas will be slightly out of position because they are two separate objects and the effect instance's speeds will vary somewhat over time, causing them to either get closer or farther apart. Only thing I might suggest is to put them into a container and just move that, but where it gets problematic is when you require one to "trail" the other and BOTH be visible at all times.

                         

                        If you can live with a Fade effect at the end of the Move effect, you'd have a lot more control over positioning because you could fade out, re-position, then fade back in. For an example of this look here: https://www.anaheimjobs.com/.

                        1 person found this helpful
                        • 9. Re: Continuous News Ticker
                          GDH123 Level 1

                          Yes! That's what I am looking for! Fade in and out is okay. I am working with the code you gave me now, I think that if somehow I continually change and reset the words coming into the ticker than of they only display for a minute or two then overlapping will not be a problem. I got the rss feeds to display, now I am trying to get them to display after I click them and they come back into the ticker, not right as I click them so the words change immediately. Also it will help decide the length of the string before it enters the screen so the next one coming in does not overlap the end of it, or so there is no big gap.

                          • 10. Re: Continuous News Ticker
                            Devtron Level 3

                            I implemented this into my app, as well. It looks really cool. I too need to get RSS feeds tied into this.

                             

                            The big complaint is that the text scrolls right to left. How can I get it to scroll down to up? Any ideas?

                            • 11. Re: Continuous News Ticker
                              GDH123 Level 1

                              wherever the code says to move left, type moveUp. The move left is just a name i believe. The text is moving left because of the starting point and the finishing point. It is all relevant to the x and y position you chose.

                               

                              <mx:Move
                                id="moveLeft1"
                                duration="10000"
                                easingFunction="mx.effects.easing.Linear.easeNone"
                                repeatCount="0"
                                target="{txt1}"
                                tweenUpdate="handleTweenUpdate(event)"
                                xFrom="300"
                                xTo="{txt1.width * -1}"/>

                               

                              can be changed to

                               

                              <mx:Move
                                id="moveUp1"
                                duration="10000"
                                easingFunction="mx.effects.easing.Linear.easeNone"
                                repeatCount="0"
                                target="{txt1}"
                                tweenUpdate="handleTweenUpdate(event)"
                                yFrom="300"
                                yTo="-10"/>

                               

                              i only changed the ID, and the xFrom and xTo at the end to yFrom and yTo, and the corrdinates can be changed to any number depending on where you want the text to scroll to.

                              • 12. Re: Continuous News Ticker
                                Flex harUI Adobe Employee

                                Spark is the components in Flex 4.  There isn't much doc on the internals of

                                the component, but all of its children should be TextLines.