Skip to main content
Chipleh
Inspiring
May 6, 2013
Answered

Custom scrolller - issue with multiple objects....

  • May 6, 2013
  • 1 reply
  • 2028 views

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;   

    }

}

This topic has been closed for replies.
Correct answer Chipleh

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.


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

1 reply

Inspiring
May 6, 2013

define

to align consistently

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

Chipleh
ChiplehAuthor
Inspiring
May 6, 2013

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:

Inspiring
May 7, 2013

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?