Custom scrolller - issue with multiple objects....

[Chipleh]

Hi,

I'm developing a very simple custom scroller as a proof of concept. The idea is to have a background image(content_mc), lay multiple objects(myContent) on top of the image, and scroll them all as a cohesive unit. However, I can not scroll myContent appropriately; each object has a unique position and when I try to scroll them, they all assume one position(in which everything overlaps), move to that position and then scroll(see the ### comment below). Does anyone know how to accomplish this?(or does any of this not make the slightest bit of sense?)

Thx for any help,

Chipleh

var rect:Rectangle;
var scrollerMinY:Number = scrollbar_mc.scroller_mc.y;
var contentMaxY:Number = content_mc.y;
var padding:Number = 40;
scrollbar_mc.scroller_mc.buttonMode = true;
scrollbar_mc.scroller_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragIt);
function dragIt(e:MouseEvent):void {
    rect = new Rectangle(4, 3, 0, 180);
    scrollbar_mc.scroller_mc.startDrag(false, rect);
    stage.addEventListener(MouseEvent.MOUSE_UP, dropIt);
    scrollbar_mc.scroller_mc.addEventListener(Event.ENTER_FRAME, scrollIt);
}
function dropIt(e:MouseEvent):void {
    scrollbar_mc.scroller_mc.stopDrag();
    scrollbar_mc.scroller_mc.removeEventListener(Event.ENTER_FRAME, scrollIt);
}
function scrollIt(e:Event):void 
{
    var scrollerRange:Number = rect.height;
    var contentRange:Number = content_mc.height - mask_mc.height + padding;
    var percentage:Number = (scrollbar_mc.scroller_mc.y - scrollerMinY) / scrollerRange;
    var targetY:Number = contentMaxY - percentage * contentRange;
    content_mc.y = targetY;
    //###Herein lies the problem; I can not get multiple clips to align consistently like content_mc
    for(var i:int = 0;i<myContentArray.length;i++)
    {        
        var myContent:Object = MovieClip(root).getChildByName(myContentArray);
        myContent.y = targetY - myContent.y;    
    }
}

[moccamaximum]

define

to align consistently

and show a screenshot how your content is behaving during the scrolling

[Chipleh]

Hiyas moccamaximum,

Thx for the reply. Below are the screenshots, where the "align consistently" issue is apparent. When I instantiate the objects, the objects align per the "Before scrolling" screenshot. As soon as I start to scroll, the objects all align to one position(targetY)i.e.: "After scrolling" screenshot. I understand why that is happening, what i don't understand is how to maintain the layout of the objects while scrolling, per:

for(var i:int = 0;i<myContentArray.length;i++)    {                var myContent:Object = MovieClip(root).getChildByName(myContentArray);        myContent.y = targetY;        }

Before scrolling:

During scrolling:

[moccamaximum]

What happens if you scroll down? Do the contents at the top vanish behind the negative of a mask? If so, do you set your mask via code or directtly in the Layer?

[Chipleh]

When I scroll down, the objects from screenshot 2 do indeed move up and scroll appropraitely, aside from the objects being completely clumped together. I'm not using a mask just yet while I'm trying to get things to scroll properly, but I will be setting the mask via code. I could throw all the objects into a container, scroll the container and be done with it, which is an obvious solution; I won't go into details as to why I'm not taking that approach, but I'm hoping to resolve this based off my previous posts. I'll continue investigating today, so if you have any ideas, I'd love to hear them.

Cheers mocca.

[moccamaximum]

1st thing you could do is move this

stage.addEventListener(MouseEvent.MOUSE_UP, dropIt);

out of the dragIt function

it might be not the cause of the problem, but it makes no sense to add this EventlIstener more than once if you never remove it.

[Chipleh]

Fair enough and duely noted; that definitely could have caused some kind of memory leak down the road. I moved it out of the function and am only adding it once now upon instantiation of the application.

[Chipleh · Accepted solution]

hey mocca,

So, I kinda resolved my issue,

function scrollIt(e:Event):void

{

    var scrollerRange:Number = rect.height;

    var contentRange:Number = Container1.height - mask_mc.height + padding;

    var percentage:Number = (scrollbar_mc.scroller_mc.y - scrollerMinY) / scrollerRange;

    var targetY:Number = contentMaxY - percentage * contentRange;

    Container1.y = targetY;

   for(var i:int = 0;i<myContentArray.length;i++)

   {       

        var myContent:Object = MovieClip(root).getChildByName("aCb" + i);

        if(myContent != null)

        {

            myContent.y = Container1.y + int(interFace_XML.comboBox.@yPosition);

        }

    }

}

I had the intial positions stored in an xml doc; applying those to the container position did the trick. Still not completely happy, but it works for now and allows me to progress. Thanks for your help, I'm marking this as correct.

~Chipleh