RESOLVED: OO Scrollbar : Button Navigation

Since I'm very new to ActionScript 3.0, I really appreciated the tutorial in the project I was assigned to complete. However, there's one extra element that I would like to include that is missing in the tutorial, and that is navigating the scrollbar with button "bookmarks".

My task given to me by the company for which I work is to design a company history timeline. The goal was for me to make one long scrollable timeline, with a series of decade buttons that would bookmark positions along the scrollbar/timeline, so that the user could skip ahead or backward to the decade about which he or she wanted to read.

The scrollbar tutorial was a big help, but I'm lost as to how to get the buttons to point to different parts of the scrollbar's position on the scrollbox, and to make the content move to match that positioning. I figure I should be able to tell the button to tell the scrollbar thumb to move to a new position, but again, I'm very new to ActionScript 3.0 and Flash in general.

Does what I want to do sound possible, or should I let my boss know that plans need to change?

Thank you all in advance for any help you may be able to provide. I greatly appreciate it.

EDIT: The working version of this project is available at http://rw100.persecution.com/

[James]

It is certainly possible, could you post the code? An obvious approach would be to use the x or y (depending on the orientation of the scrollbar) position of the beginning of each section then use the appropriate formula (based on the length of the scrolling track and the length of the entire timeline) to give the desired x or y position of the scrollbar handle.

Sure, but I admit I didn't do much different from what was presented in the gotoAndLearn tutorial. Some of that was from inexperience, and some of it was due to a mixture of laziness, time constraints, and the current level of progress in completing this project. This isn't a last-minute project I'm doing here, so I'm not going to explode in anger or bump this constantly; but I do appreciate how quickly you responded to my original post.

ScrollBar.as

Code: Select all

package ActionScript.com.dhepworth.ui
{
   import flash.display.*;
   import flash.events.*;
   
   public class ScrollBar extends MovieClip
   {
      private var xOffset:Number;
      private var xMin:Number;
      private var xMax:Number;
      
      public function ScrollBar():void
      {
         xMin = 0;
         xMax = track.width - thumb.width;
         thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumbDown);
         stage.addEventListener(MouseEvent.MOUSE_UP, thumbUp);
      }
      
      private function thumbDown(e:MouseEvent):void
      {
         stage.addEventListener(MouseEvent.MOUSE_MOVE, thumbMove);
         xOffset = mouseX - thumb.x;
      }

      private function thumbUp(e:MouseEvent):void
      {
         stage.removeEventListener(MouseEvent.MOUSE_MOVE, thumbMove);
      }

      private function thumbMove(e:MouseEvent):void
      {
         thumb.x = mouseX - xOffset;
         if(thumb.x <= xMin)
            thumb.x = xMin;
         if(thumb.x >= xMax)
            thumb.x = xMax;
         dispatchEvent(new ScrollBarEvent(thumb.x / xMax));
         e.updateAfterEvent();
      }
   }
}


ScrollBarEvent.as

Code: Select all

package ActionScript.com.dhepworth.ui
{
   import flash.events.*;
   
   public class ScrollBarEvent extends Event
   {
      public static const VALUE_CHANGED = "valueChanged";
      public var scrollPercent:Number;
      
      public function ScrollBarEvent(sp:Number):void
      {
         super(VALUE_CHANGED);
         scrollPercent = sp;
      }
      
   }
}


ScrollBox.as

Code: Select all

package ActionScript.com.dhepworth.ui
{
   import flash.display.*;
   import flash.events.*;
   import caurina.transitions.*;
   
   public class ScrollBox extends MovieClip
   {      
      public function ScrollBox():void
      {
         sb.addEventListener(ScrollBarEvent.VALUE_CHANGED, sbChange);
      }
      
      private function sbChange(e:ScrollBarEvent):void
      {
         Tweener.addTween(content, {x:(-e.scrollPercent*(content.width-masker.width)),
                        time:1});
      }
   }
}


[James]

1) Give the scrollbox an instance name on the stage (scrollbox_mc).
2) Update ScrollBox.as and ScrollBar.as files with extra functions:

ScrollBox.as

Code: Select all

package ActionScript.com.dhepworth.ui {
   import flash.display.*;
   import flash.events.*;
   import caurina.transitions.*;

   public class ScrollBox extends MovieClip {
      public function ScrollBox():void {
         sb.addEventListener(ScrollBarEvent.VALUE_CHANGED, sbChange);
      }

      private function sbChange(e:ScrollBarEvent):void {
         Tweener.addTween(content, {x:(-e.scrollPercent*(content.width-masker.width)), time:1});
      }

      public function goToPosition(scrollPercent:Number):void {
         Tweener.addTween(content, {x:(-scrollPercent*(content.width-masker.width)), time:1});
         sb.goToPosition(scrollPercent);
      }
   }
}

ScrollBar.as

Code: Select all

package ActionScript.com.dhepworth.ui {
   import flash.display.*;
   import flash.events.*;
   import caurina.transitions.*;

   public class ScrollBar extends MovieClip {
      private var xOffset:Number;
      private var xMin:Number;
      private var xMax:Number;

      public function ScrollBar():void {
         xMin=0;
         xMax=track.width-thumb.width;
         thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumbDown);
         stage.addEventListener(MouseEvent.MOUSE_UP, thumbUp);
      }

      private function thumbDown(e:MouseEvent):void {
         stage.addEventListener(MouseEvent.MOUSE_MOVE, thumbMove);
         xOffset=mouseX-thumb.x;
      }

      private function thumbUp(e:MouseEvent):void {
         stage.removeEventListener(MouseEvent.MOUSE_MOVE, thumbMove);
      }

      private function thumbMove(e:MouseEvent):void {
         thumb.x=mouseX-xOffset;
         if (thumb.x<=xMin) {
            thumb.x=xMin;
         }
         if (thumb.x>=xMax) {
            thumb.x=xMax;
         }
         dispatchEvent(new ScrollBarEvent(thumb.x / xMax));
         e.updateAfterEvent();
      }

      internal function goToPosition(scrollPercent:Number):void {
         Tweener.addTween(thumb, {x: xMin+scrollPercent*(xMax-xMin), time:1});
      }
   }
}

3) Add button event listeners and functions to the timeline/Document class:

Timeline:

Code: Select all

btn_1909.addEventListener(MouseEvent.CLICK, clicked1909);

function clicked1909(ev:MouseEvent):void
{
   scrollbox_mc.goToPosition(0.5); // Number between 0 and 1.
}

//etc...

Thank you very much for your help. I really appreciate it. If you're willing, I still could use just a little bit more help.

I updated ScrollBox.as and ScrollBar.as, and added the document class with the first button code as you suggested, but I can't seem to find the right place to put the Instance name on the object in the stage to get the new document class to be recognized properly.

When I try to run the Flash file, the error #5007 appears in the Compiler Errors dialog:

"An ActionScript file must have at least one externally visible definition."

That makes sense, and it seems that it means that I'm not naming the right object with the Instance name of "scrollbox_mc".

The combined thumb and track element in the Flash file I posted was already named "sb". The thumb and the track each have the names "thumb" and "track" respectively. I've tried naming a variety of objects that didn't have already have a name, and the error still appears.

I totally understand if you want to slap me around for being so stupid. Thank you again for the help you've already provided. Would it be possible to help me out a little more?

[James]

I posted Timeline code, if you are using a document class rather than adding the code to the timeline, make sure your document class looks similar to:

Code: Select all

package {
    public class DocumentClass extends MovieClip {
        public function DocumentClass() {
            btn_1909.addEventListener(MouseEvent.CLICK, clicked1909);
        }

        private function clicked1909(ev:MouseEvent):void {
            scrollbox_mc.goToPosition(0.5);
        }
    }
}

The symbol that needs to be given an instance name of "scrollbox_mc" is the instance of scrollbox (containing the images and the scrollbar).

Thank you very much for your help. I misunderstood what you meant when you referred to "timeline/Document class" and instead researched "Document class", which is another thing entirely. Your latest post was a big help, and the code now works as you said it would.

Thank you very much for your help. I would not have been able to finish this project without your assistance. You were very kind.

[James]

You're welcome