Content Scrollbar (Revised)

vini · April 24, 2006, 4:16am

Really wonderful

cw17s0n · April 24, 2006, 5:22am

[COLOR=Gray][COLOR=Black]Nevermind I managed to figure it out.[/COLOR]

“Hi everyone, great site, I’ve just started using flash and a friend told me to check out this site, which has already been of much help. I have an issue where when I have two scrollbars on a page, when I update the content of one, it updates the content for every other scrollbar, I have tried changing the instance names but no luck. If anyone could hint at what I could change that would be great.
Thanks
Charles”[/COLOR]

jbailey · October 24, 2006, 12:13am

For dynamic content with the Kirupa ScrollBar, we just need to load a new MC or image into the contentMain MC every time an action occurs (e.g. a button is clicked). I’m accomplishing this using the MovieClipLoader class that is standard with Flash 7 and above. I use this class because it lets use know (both visually and scriptally) when the item is loaded into contentMain. Thus, the first step explains setting up the stage for us. I have added some animation and resizing to the source files, which I know is very messy. Hopefully, the mess won’t make things confusing. Just ask if you have questions. Furthermore, adjustments to the functionality are explained at the bottom (e.g. rollover effects for the dragger).
This may be a sloppy “tutorial” :). If so, let me know what I can clarify or what revisions to make. Thanks!!

Let’s get started.

**Set the Stage**

*Note: You can skip step zero. This step just helps keep the scrollbar MC smaller in size.
0. Remove all content from contentMain, so it is an empty MC.

Add a loader MC to your stage, so the user can tell the progress of the loading. I used the loader that Lee Brimelow did a tutorial about on his site – www.gotoandlearn.com. Check out his site and watch the tutorial on preloading or check out my source files.
Place MCs on your stage that you will set onRelease and Roll functions to in the AS (you can also use BTNs but I don’t recommend using them).
Don’t forget to give your button MCs instance names (I’m naming them bt1, bt2, and so on).

Set the ActionScript
4. Setup the AS for the MCloader.


  var contentMC:MovieClipLoader = new MovieClipLoader();
  var contentMCListener:Object = new Object();
   
  contentMCListener.onLoadProgress = function(target,loaded,total){
                    loader.percent.text = Math.round((loaded/total) * 100) + "%";
        }
  contentMC.addListener(contentMCListener);
   
  contentMCListener.onLoadInit = function(){
                    loader._visible = false;
                    loader.percent.text = "";                        
  }

*Notice we have not yet added what SWF to load, yet.

Within the contentMCListener.onLoadInit = function(), place scrolling(). This means that when the swf (or image) loads into the contentMain, . It looks like


  contentMCListener.onLoadInit = function(){
                    loader._visible = false;
                    loader.percent.text = "";
                    scrolling();
                    contentMain.setMask(maskedView);
                    
  }

note I am setting the mask using AS, as you can see. I do this for more control via AS commands.

Now, we’ll use a function to load an image or a swf into the contentMain.


  function launchPage(){
                    contentMC.loadClip(hold.selectedPage+"?uniqueID=" + getTimer(),contentMain);
  }

*This let’s you call the function and simply change the “item” you want to load before calling the function. Let me explain.

Create a new layer above the scrolling actions layer. Setup an object (called hold) in that layer and a subitem of that object (called selectedPage)


  var hold:Object = new Object();
  hold.selectedPage = "object01.swf";

As you can see, I set the default item to be a swf (object01.swf), but you can use

Call the launchPage function when the swf loads. *Make sure you place this right before the launchPage function but after the contentMCLoader (I’m not sure why this is. Maybe some body knows why).
This all looks like


  contentMCListener.onLoadInit = function(){
                    loader._visible = false;
                    loader.percent.text = "";
                    loadedContent();
                    contentMain.setMask(maskedView);
                    
  }
  **this.launchPage(); // <----- See?**
  function launchPage(){
                    contentMC.loadClip(hold.selectedPage+"?uniqueID=" + getTimer(),contentMain);
  }

*If you’re using content contained in the contentMain and just want to update the image, then you don’t have to call this function onload like this.

Use the ActionScript
9. To change the content of the contentMain, we simply change the subitem of the hold object and then call the launchPage function.


  bt1.onRelease = function(){
  hold.selectedPage = "object01.swf";
  launchPage();
  }

*This should do it for you. Let me know if I missed something or messed something up in this explanation, and I’ll correct it.

Adjustments
The first adjustment is giving the dragger rollover effects.

Stage

Go into the dragger MC and add a keyframe, so you can create some sort of effect for the rollover. Make sure you add a layer and two keyframes above each of the previous keyframes with stop(); commands. *You could actually do many different things but this is just what I’m using for a simple explanation. You could use AS to do effects or all sorts of things.

AS
2. Now just tell the dragger MC to goto the next frame in accordance with the state


  dragger.onRollOver = function(){
                    dragger.gotoAndStop(2);
                    this.onRollOut = function(){
                                dragger.gotoAndStop(1);
                    }
        }

*Again, I do recommend using AS to control the effect (e.g. a simple _alpha effect would do). I did it this way to show you can do it with the timeline (some peeps don’t like just using AS. I know)

You’re done with that.

The other adjustments I’ve made are simply for effect. It’s very messy, but you should be able to see what’s going on. Feel free to comment. I might clean it up and repost. Comments are very welcome or reposting. Take Care and feel free to ask anymore questions! Most of these guys around here are super keen at responding with helpful info and guidance!

John Bailey

SOURCE FILES
http://www.kairosworld.com/posting/DynamicContentwithKirupasScrollBar.zip

jack_splat · October 24, 2006, 10:54am

why is it that if there are input text fields in the content of this scroller they don’t work?

jbailey · October 24, 2006, 3:43pm

Jack Splat, can you be a bit more specific? I don’t see any input fields in the AS or on the stage of the source files.

Thanks

jack_splat · October 24, 2006, 10:20pm

sorry that was vague!..but just open the fla and put an input text field into the contentMain movie clip…then test the movie…the input text box doesnt work!

jbailey · October 25, 2006, 2:22am

JackSplat, I can’t generate that problem on my end. What exactly do you mean “the input text box doesnt work”? I put an input box into the contentMain and stiked-out the this.launchPage, and the input text box works permits text typed. Input fields also work on my end when contained within a swf and loaded into contentMain via the methods I described.

jack_splat · October 25, 2006, 8:07am

hmm strange, when I try the input text box does not appear, although the mouse turns into a cursor when you go over where it should be, yet you cannot type anything in…

jbailey · October 25, 2006, 4:36pm

JaskSplat, where exactly are you placing the input text field? Are you placing it on the main stage? Are you placing it within the contentMain MC? If you are placing it on the main stage, where on the main stage are you placing it? If you are placing the inputTF inside the contentMain MC and want to use that MC onload, then you must mark out this.launchPage or create a SWF with the inputTF within that SWF and load it into the contentMain.

If you want, you can post a link to a screenshot. I just can’t replicate that same problem on my end. I’ve tried a few things and the ITF works fine. It seems like I’m not placing it where you are placing it.

Thanks

streambuffer · July 13, 2008, 12:34pm

hello,
I tried using your code, changed all the MC instance names to the ones you are using in this code (scrollbg, dragger etc…) but when I tested my movie, nothing happend upon clicking the buttons, scrollbar or the dragger. It wasn’t responsive. I checked the output window and even that eas empty…no errors reported. It worked ok before when i followed the tutorial…can you please help? Is there some other adjustment needed?

[quote=28bit;1770409]Put in a few lines to enable scrollbar clicking + mousewheel support. Didn’t clean up the code, but oh well.

ActionScript Code:
[LEFT]
 
scrolling = [COLOR=#000000]function[/COLOR] COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#000000]var[/COLOR] moveSpeed:[COLOR=#0000ff]Number[/COLOR] = [COLOR=#000080]1[/COLOR];
 [COLOR=#000000]var[/COLOR] easingSpeed:[COLOR=#0000ff]Number[/COLOR] = [COLOR=#000080]7[/COLOR];
 [COLOR=#000000]var[/COLOR] scrollHeight:[COLOR=#0000ff]Number[/COLOR] = scrollbg.[COLOR=#0000ff]_height[/COLOR];
 
 [COLOR=#808080]// how much of the movie can be scrolled[/COLOR]
 [COLOR=#000000]var[/COLOR] scrollable:[COLOR=#0000ff]Number[/COLOR] = contentMain.[COLOR=#0000ff]_height[/COLOR] - maskedView.[COLOR=#0000ff]_height[/COLOR];
 [COLOR=#000000]var[/COLOR] initContentPos:[COLOR=#0000ff]Number[/COLOR] = contentMain.[COLOR=#0000ff]_y[/COLOR];
 
 [COLOR=#808080]// the drag positions that are possible for the dragger[/COLOR]
 [COLOR=#000000]var[/COLOR] [COLOR=#0000ff]left[/COLOR]:[COLOR=#0000ff]Number[/COLOR] = scrollbg.[COLOR=#0000ff]_x[/COLOR];
 [COLOR=#000000]var[/COLOR] top:[COLOR=#0000ff]Number[/COLOR] = scrollbg.[COLOR=#0000ff]_y[/COLOR];
 [COLOR=#000000]var[/COLOR] [COLOR=#0000ff]right[/COLOR]:[COLOR=#0000ff]Number[/COLOR] = scrollbg.[COLOR=#0000ff]_x[/COLOR];
 [COLOR=#000000]var[/COLOR] bottom:[COLOR=#0000ff]Number[/COLOR] = scrollbg.[COLOR=#0000ff]_height[/COLOR] - dragger.[COLOR=#0000ff]_height[/COLOR] + scrollbg.[COLOR=#0000ff]_y[/COLOR];
 [COLOR=#000000]var[/COLOR] mouseListener:[COLOR=#0000ff]Object[/COLOR] = [COLOR=#000000]new[/COLOR] [COLOR=#0000ff]Object[/COLOR]COLOR=#000000[/COLOR];
 [COLOR=#000000]var[/COLOR] scrollWheelSpeed:[COLOR=#0000ff]Number[/COLOR] = [COLOR=#000080]20[/COLOR];
 
 [COLOR=#808080]// before we do anything make sure the content is even scrollable, if it isn’t hide everything and return[/COLOR]
 [COLOR=#0000ff]if[/COLOR] [COLOR=#000000]([/COLOR]scrollable < [COLOR=#000080]0[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
 dragger.[COLOR=#0000ff]_visible[/COLOR] = [COLOR=#000000]false[/COLOR];
 btnUp.[COLOR=#0000ff]enabled[/COLOR] = [COLOR=#000000]false[/COLOR];
 btnUp.[COLOR=#0000ff]_alpha[/COLOR] = [COLOR=#000080]50[/COLOR];
 btnDown.[COLOR=#0000ff]_alpha[/COLOR] = [COLOR=#000080]50[/COLOR];
 scrollbg.[COLOR=#0000ff]_alpha[/COLOR] = [COLOR=#000080]50[/COLOR];
 btnDown.[COLOR=#0000ff]enabled[/COLOR] = [COLOR=#000000]false[/COLOR];
 [COLOR=#0000ff]return[/COLOR];
 [COLOR=#000000]}[/COLOR]
 scrollbg.[COLOR=#0000ff]useHandCursor[/COLOR] = dragger.[COLOR=#0000ff]useHandCursor[/COLOR] = [COLOR=#000000]false[/COLOR];
 [COLOR=#808080]// Updates the contents position [/COLOR]
 [COLOR=#000000]function[/COLOR] updateContentPosCOLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#000000]var[/COLOR] percent_scrolled:[COLOR=#0000ff]Number[/COLOR] = [COLOR=#000000]([/COLOR]dragger.[COLOR=#0000ff]_y[/COLOR] - top[COLOR=#000000])[/COLOR] / [COLOR=#000000]([/COLOR]scrollHeight - dragger.[COLOR=#0000ff]_height[/COLOR][COLOR=#000000])[/COLOR];
 [COLOR=#808080]// instead of setting the _y property directly, we simple set newY[/COLOR]
 [COLOR=#808080]// that way we can adjust how we handle the new Y coordinate we’d like to move to[/COLOR]
 contentMain.[COLOR=#000080]newY[/COLOR] = [COLOR=#0000ff]Math[/COLOR].[COLOR=#0000ff]round[/COLOR][COLOR=#000000]([/COLOR]initContentPos - [COLOR=#000000]([/COLOR]percent_scrolled * scrollable[COLOR=#000000])[/COLOR][COLOR=#000000])[/COLOR];
 [COLOR=#000000]}[/COLOR]
 
 [COLOR=#808080]// here we will just always adjust to the position that we would like to move to…[/COLOR]
 contentMain.[COLOR=#0000ff]onEnterFrame[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#0000ff]if[/COLOR] [COLOR=#000000]([/COLOR]!easing || easing == [COLOR=#0000ff]undefined[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_y[/COLOR] = [COLOR=#0000ff]this[/COLOR].[COLOR=#000080]newY[/COLOR];
 [COLOR=#000000]}[/COLOR]
 [COLOR=#0000ff]else[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_y[/COLOR] += [COLOR=#0000ff]Math[/COLOR].[COLOR=#0000ff]round[/COLOR][COLOR=#000000]([/COLOR][COLOR=#000000]([/COLOR][COLOR=#0000ff]this[/COLOR].[COLOR=#000080]newY[/COLOR] - [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_y[/COLOR][COLOR=#000000])[/COLOR] / easingSpeed[COLOR=#000000])[/COLOR];
 [COLOR=#000000]}[/COLOR]
 [COLOR=#000000]}[/COLOR];
 scrollbg.[COLOR=#0000ff]onPress[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#0000ff]if[/COLOR] [COLOR=#000000]([/COLOR][COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_parent[/COLOR].[COLOR=#0000ff]_ymouse[/COLOR] > [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_y[/COLOR] + [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_height[/COLOR] - dragger.[COLOR=#0000ff]_height[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
 dragger.[COLOR=#0000ff]_y[/COLOR] = [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_parent[/COLOR].[COLOR=#0000ff]_ymouse[/COLOR];
 dragger.[COLOR=#0000ff]_y[/COLOR] = [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_y[/COLOR] + [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_height[/COLOR] - dragger.[COLOR=#0000ff]_height[/COLOR];
 [COLOR=#000000]}[/COLOR]
 [COLOR=#0000ff]else[/COLOR] [COLOR=#000000]{[/COLOR]
 dragger.[COLOR=#0000ff]_y[/COLOR] = [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_parent[/COLOR].[COLOR=#0000ff]_ymouse[/COLOR];
 [COLOR=#000000]}[/COLOR]
 updateContentPosCOLOR=#000000[/COLOR];
 [COLOR=#000000]}[/COLOR];
 
 dragger.[COLOR=#0000ff]onPress[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#0000ff]startDrag[/COLOR][COLOR=#000000]([/COLOR][COLOR=#0000ff]this[/COLOR], [COLOR=#000000]false[/COLOR], [COLOR=#0000ff]left[/COLOR], top, [COLOR=#0000ff]right[/COLOR], bottom[COLOR=#000000])[/COLOR];
 [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]onMouseMove[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 updateContentPosCOLOR=#000000[/COLOR];
 [COLOR=#0000ff]updateAfterEvent[/COLOR]COLOR=#000000[/COLOR];
 [COLOR=#000000]}[/COLOR];
 [COLOR=#000000]}[/COLOR];
 dragger.[COLOR=#0000ff]onMouseUp[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#0000ff]stopDrag[/COLOR]COLOR=#000000[/COLOR];
 [COLOR=#0000ff]delete[/COLOR] [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]onMouseMove[/COLOR];
 [COLOR=#000000]}[/COLOR];
 
 btnUp.[COLOR=#0000ff]onPress[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]onEnterFrame[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 dragger.[COLOR=#0000ff]_y[/COLOR] = [COLOR=#0000ff]Math[/COLOR].[COLOR=#0000ff]max[/COLOR][COLOR=#000000]([/COLOR]top, dragger.[COLOR=#0000ff]_y[/COLOR] - moveSpeed[COLOR=#000000])[/COLOR];
 updateContentPosCOLOR=#000000[/COLOR];
 [COLOR=#000000]}[/COLOR];
 [COLOR=#000000]}[/COLOR];
 
 btnUp.[COLOR=#0000ff]onDragOut[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#0000ff]delete[/COLOR] [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]onEnterFrame[/COLOR];
 [COLOR=#000000]}[/COLOR];
 
 btnUp.[COLOR=#0000ff]onRelease[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#0000ff]delete[/COLOR] [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]onEnterFrame[/COLOR];
 [COLOR=#000000]}[/COLOR];
 
 btnDown.[COLOR=#0000ff]onPress[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]onEnterFrame[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 dragger.[COLOR=#0000ff]_y[/COLOR] = [COLOR=#0000ff]Math[/COLOR].[COLOR=#0000ff]min[/COLOR][COLOR=#000000]([/COLOR]bottom, dragger.[COLOR=#0000ff]_y[/COLOR] + moveSpeed[COLOR=#000000])[/COLOR];
 updateContentPosCOLOR=#000000[/COLOR];
 [COLOR=#000000]}[/COLOR];
 [COLOR=#000000]}[/COLOR];
 
 btnDown.[COLOR=#0000ff]onRelease[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#0000ff]delete[/COLOR] [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]onEnterFrame[/COLOR];
 [COLOR=#000000]}[/COLOR];
 
 btnDown.[COLOR=#0000ff]onDragOut[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#0000ff]delete[/COLOR] [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]onEnterFrame[/COLOR];
 [COLOR=#000000]}[/COLOR];
 
 [COLOR=#808080]// Create onMouseWheel function[/COLOR]
 mouseListener.[COLOR=#0000ff]onMouseWheel[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR]:[COLOR=#0000ff]Void[/COLOR] [COLOR=#000000]{[/COLOR]
 [COLOR=#000000]var[/COLOR] d:[COLOR=#0000ff]Number[/COLOR];
 
 [COLOR=#0000ff]if[/COLOR] [COLOR=#000000]([/COLOR]delta > [COLOR=#000080]1[/COLOR][COLOR=#000000])[/COLOR] delta = [COLOR=#000080]1[/COLOR];
 [COLOR=#0000ff]if[/COLOR] [COLOR=#000000]([/COLOR]delta < -[COLOR=#000080]1[/COLOR][COLOR=#000000])[/COLOR] delta = -[COLOR=#000080]1[/COLOR];
 d = -delta * scrollWheelSpeed;
 [COLOR=#0000ff]trace[/COLOR]COLOR=#000000[/COLOR];
 [COLOR=#0000ff]if[/COLOR] [COLOR=#000000]([/COLOR]d > [COLOR=#000080]0[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
 dragger.[COLOR=#0000ff]_y[/COLOR] = [COLOR=#0000ff]Math[/COLOR].[COLOR=#0000ff]min[/COLOR][COLOR=#000000]([/COLOR]bottom, dragger.[COLOR=#0000ff]_y[/COLOR] + d[COLOR=#000000])[/COLOR];
 [COLOR=#000000]}[/COLOR]
 [COLOR=#0000ff]if[/COLOR] [COLOR=#000000]([/COLOR]d < [COLOR=#000080]0[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
 dragger.[COLOR=#0000ff]_y[/COLOR] = [COLOR=#0000ff]Math[/COLOR].[COLOR=#0000ff]max[/COLOR][COLOR=#000000]([/COLOR]top, dragger.[COLOR=#0000ff]_y[/COLOR] + d[COLOR=#000000])[/COLOR];
 [COLOR=#000000]}[/COLOR]
 updateContentPosCOLOR=#000000[/COLOR];
 [COLOR=#000000]}[/COLOR];
 
 [COLOR=#808080]// makes the first update to scroll in case the user offset the dragger[/COLOR]
 updateContentPosCOLOR=#000000[/COLOR];
 
 [COLOR=#808080]// Registering the listener[/COLOR]
 [COLOR=#0000ff]Mouse[/COLOR].[COLOR=#0000ff]addListener[/COLOR]COLOR=#000000[/COLOR];
[COLOR=#000000]}[/COLOR];
 

[/LEFT]

[/quote]

Topic		Replies	Views
Help with simple scrollbar issue flash	0	115	February 1, 2008
Kirupa Scroll needs an anchor (code by Kirupa Chinnathambi) flash	0	76	March 6, 2008
Scrollbar Issue flash	1	57	June 25, 2008
Simple scroll bar example	0	100	November 15, 2007
Dynamic Content MovieClip Scroller flash	0	120	May 10, 2011

Content Scrollbar (Revised)

Follow:

Popular

Loose Ends

Content Scrollbar (Revised)

Related topics

Follow:

Popular

Loose Ends