1 Reply Latest reply on Jun 30, 2010 3:58 PM by rtalton

    Marquee Freezing

    Wannabe67

      I know marquees are ugly and old news, but this client wants it and I could not talk them out of it

       

      Anyway, I have a mxml page setup to scroll text across the screen. The text is built from a database and starts out ok, but the marquee periodically freezes. Can someone look at my page and offer any suggestions as to how I can improve it so the marquee does not freeze? Thank you.

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" backgroundColor="#697D96" creationComplete="onCreationComplete()">
          <mx:Script>
              <![CDATA[
                  import mx.managers.PopUpManager;
                  import utils.Util;
                  import vo.Enums;
                  import mx.rpc.events.ResultEvent;
                  import mx.controls.Label;
                  import mx.effects.easing.Linear;
                  import vo.AnnouncementVO;
                  import vo.ListItemVO;
                  import mx.collections.ArrayCollection;
                  import mx.controls.Alert;
                 
                  private var _marqueeArray:ArrayCollection = new ArrayCollection();
                  private var _announcements:ArrayCollection = new ArrayCollection();
                  private var currentIndex:int = 0;
                  private var marqueeWidth:int;
             
                  private function onCreationComplete():void
                  {
                      getAnnouncements();
                  }
                 
                  public function getAnnouncements():void
                  {
                      //When a regular user is viewing the announcements, we only want the active ones.
                      roAnnouncements.getAnnouncements(Enums.GET_ACTIVE_ANNOUNCEMENTS);   
                  }
                 
                  private function handleGetAnnouncements(event:ResultEvent):void
                  {
                      _announcements = event.result as ArrayCollection;
                      loadMarquee();
                  }
             
                  private function loadMarquee():void
                  {
                      var label:Label;
                         
                      for (var x:int = 0; x < _announcements.length; x++)
                      {
                          label = new Label();
                          _marqueeArray.addItemAt(_announcements[x], x);
                          label.id = "marquee_" + x.toString();
                         
                          if (x < _announcements.length - 1)
                              label.text = _announcements[x].title + "   •";
                          else
                              label.text = _announcements[x].title;
                         
                          label.addEventListener(MouseEvent.CLICK, clickHandler, true);
                          hboxMarqueeString.addChild(label);
                          label.validateNow();
                          marqueeWidth += label.textWidth;
                      }
                     
                      if (label != null)
                          marqueeWidth = marqueeWidth + (this.width - label.textWidth) / 2
                         
                      runMarquee();
                  }
                 
                  private function clickHandler(event:MouseEvent):void
                  {
                      var currentIndex:int = int(Label(event.currentTarget).id.substr(8));
                      var popup:AnnouncementPopup = AnnouncementPopup(PopUpManager.createPopUp(this, AnnouncementPopup, true));
                      popup._title = _marqueeArray[currentIndex].title;
                      popup._description = _marqueeArray[currentIndex].description;
                      positionPopup(popup);
                  }
                 
                  private function positionPopup(window:AnnouncementPopup):void
                  {
                         var point1:Point = new Point();
                        
                      //Calculate position of TitleWindow in Application's coordinates.
                      point1.x = cs.x - 70;
                      point1.y = cs.y - 100;               
                      point1 = cs.localToGlobal(point1);
                      window.x = point1.x + 5;
                      window.y = point1.y + 15;
                  }
                 
                  private function runMarquee():void
                  {
                      moveLeft.xFrom = marqueeWidth - 6; 
                      moveLeft.xTo = 0 - marqueeWidth + 15;
                      moveLeft.repeatCount = 0;
                      moveLeft.repeatDelay = 100;
                      moveLeft.easingFunction = mx.effects.easing.Linear.easeNone;
                      moveLeft.play();
                  }      

       

                  //Add  mouseOver="pauseMarquee()" to the cs HBox to pause the announcement     
                  private function pauseMarquee():void
                  {
                      moveLeft.pause();  //pause
                  }
               
                  private function moveMarquee():void
                  {
                      moveLeft.resume(); //start from the pause position
                  }
              ]]>
          </mx:Script>
         
          <mx:RemoteObject id="roAnnouncements" destination="fluorine" source="services.AnnouncementService" fault="Util.handleFault(event)">
              <mx:method name="getAnnouncements" result="handleGetAnnouncements(event)" />
          </mx:RemoteObject>
         
          <mx:Move id="moveLeft" target="{hboxMarqueeString}" duration="22000" />
          <mx:HBox id="cs" mouseOut="moveMarquee()" mouseOver="pauseMarquee()" horizontalScrollPolicy="off" horizontalAlign="center" verticalAlign="middle" height="55" paddingRight="5" verticalScrollPolicy="off" width="100%">
              <mx:Label text="Announcements:" fontWeight="bold" color="#FFFFFF"  fontSize="14" fontFamily="Arial" />
              <mx:Canvas borderStyle="none" width="100%" height="25" borderColor="#3B82C8" paddingLeft="2" paddingRight="2" verticalScrollPolicy="off" horizontalScrollPolicy="off" paddingTop="2">
                  <mx:HBox id="hboxMarqueeString" verticalGap="0" color="#FFFFFF" width="100%" verticalAlign="middle" fontSize="12" fontWeight="bold"  horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingTop="3"/>
              </mx:Canvas>
          </mx:HBox>
      </mx:HBox>