UIScrollbar with MovieClip.scrollRect

I have an article with text, images, and buttons that I want to scroll.

The site uses UI components for this type of thing already, so I don’t want to build my own (like LiveDocs recommends), I want to use the same skins as the rest of the site.

I’ve searched Google and LiveDocs and can’t find a good example of using the UIScrollbar with MovieClip.scrollRect. Though one guys comments say it can be done.

This is what I have so far:


import fl.events.ScrollEvent;
import flash.geom.Rectangle;
import flash.geom.Point;

var totalHeight:Number = mcArticle.height;
var croppedHeight:Number = 418;

var rect:Rectangle;
rect = new Rectangle(0, 0, mcArticle.width, croppedHeight);

// Cache the MovieClip as a bitmap to improve performance.
mcArticle.cacheAsBitmap = true;

mcArticle.scrollRect = rect;

cmpntScrollBar.setScrollProperties(croppedHeight, 0, totalHeight - croppedHeight);
cmpntScrollBar.setSize(cmpntScrollBar.width, croppedHeight);
cmpntScrollBar.update();

Then, to handle the UIScrollBar event:


//set scrollbar event
cmpntScrollBar.addEventListener(ScrollEvent.SCROLL , scrollArticle);

function scrollArticle(evt:ScrollEvent){
    //I got this from comments on LiveDocs, but it doesn't seem to work.
    mcArticle._y = -cmpntScrollBar.scrollPosition;
}

So when the SWF loads, it does crop my article and the UIScrollBar seems to be setup correctly, but dragging the scrollbar doesn’t move the MovieClip.

Thanks for any advice!

Brandon

go figure… as soon as I post and re-read what I sent, I see one of my main errors.

The code I got from LiveDocs was AS2, so it needed to be updated to AS3:


function scrollArticle(evt:ScrollEvent):void{
    mcArticle.y = -cmpntScrollBar.scrollPosition;
}

And it does scroll the MovieClip, I just need to find the right settings now, because as soon as the UIScrollBar is clicked on, it jumps way up and scrolls the wrong portion…it also seems to be scrolling the clipping mask rectangle as well.

So… a little fine tuning is needed.

Alright… I think I’ve narrowed it down to a math problem – that I’m struggling with.

If anyone’s good at math, please give me some pointers.


var totalHeight:Number = mcListing.height;
var croppedHeight:Number = 418;
var startingY:Number = mcListing.y;

var rect:Rectangle;
rect = new Rectangle(0, 0, mcListing.width, croppedHeight);

// Cache the MovieClip as a bitmap to improve performance.
mcListing.cacheAsBitmap = true;

mcListing.scrollRect = rect;

cmpntScrollBar.setScrollProperties( croppedHeight, startingY, totalHeight - croppedHeight );
cmpntScrollBar.setSize(cmpntScrollBar.width, croppedHeight);
cmpntScrollBar.update();

with event handling of:


//set scrollbar event
cmpntScrollBar.addEventListener(ScrollEvent.SCROLL , scrollArticle);

function scrollArticle(evt:ScrollEvent):void{
    trace("mcListing.y =", mcListing.y);
    trace("cmpntScrollBar.scrollPosition =", cmpntScrollBar.scrollPosition);
    
    //mcListing.y = mcListing.y - (mcListing.y - cmpntScrollBar.scrollPosition);
    mcListing.y = cmpntScrollBar.scrollPosition;
    trace("mcListing.y =", mcListing.y);
    trace("--------------");
}

In the above event handler, I have two methods of coming up with the same number… The more complex one is commented out. Problem is, it scrolls THE WRONG WAY.

I’ve tried everything I can think of to get the difference and invert the movement, but usually what happens is that it moves UP regardless of which direction the scrollbar is dragged. So, up up and away, is not good.

Still having a problem with it not respecting my cropping rectangle either…

Well, how’s this for a one-sided conversation? :confused:

I have found the problem, fairly simple to do but definitely not easy to figure out. If you ask me the logic seems backwards…

Anyway, I had to compile ideas from three different places, so I hope this thread helps someone out.

The answer:


import fl.events.ScrollEvent;
import flash.geom.Rectangle;
import flash.geom.Point;

var totalHeight:Number = mcListing.height;
var croppedHeight:Number = 418;

var rect:Rectangle;
rect = new Rectangle(0, 0, mcListing.width, croppedHeight);

// Cache the MovieClip as a bitmap to improve performance.
mcListing.cacheAsBitmap = true;

mcListing.scrollRect = rect;

cmpntScrollBar.setScrollProperties(croppedHeight, 0, totalHeight - croppedHeight);
cmpntScrollBar.setSize(cmpntScrollBar.width, croppedHeight);
cmpntScrollBar.update();

With events:


//set scrollbar event
cmpntScrollBar.addEventListener(ScrollEvent.SCROLL , scrollArticle);

function scrollArticle(evt:ScrollEvent):void{
    // Get access to the current scroll rectangle.
    var rect:Rectangle = mcListing.scrollRect;
    
    rect.y = cmpntScrollBar.scrollPosition;
    // Reassign the rectangle to the TextField to "apply" the change.
    mcListing.scrollRect = rect;
}

I thought I’s sign up to say thanks, this saved me a bit of time fiddling around with the UIScrollbar :slight_smile:

not such a one sided conversation now I hope

Thanks again
Matt

Hey Brandon I just made this account here on sitepoint so I could tell you how much that code helped me. I want to thank you so much…you are a great life saver. I was searching the internet for an hour trying to figure out how to apply a scrollbar to a movieclip without building the scrollbar yourself. I applied it to my own flash and it works wonders.

Glad it’s of use to you guys! It took me quite some hours to figure that out. I always try to make sure I post the final answer for everyone too… I hate it when I find threads of people asking a question and never knowing if they found the answer.