Changing the position of a Scroller container programmatically (by HGroup index)

Question

I am trying to change the visible index of a Scroller container on an event. The Scroller contains an HGroup with Images, so on an event I want to change which of the Images is visible in the Scroller by specifying an HGroup index. Is this possible?

Container code:

<s:Scroller id="test" includeIn="startState" x="53" y="20" width="170"
            height="200" depth="2" scrollSnappingMode="leadingEdge">
    <s:HGroup gap="0" width="170" height="200">
        <s:Image id="BrigadeEmblem1" width="170" height="200" smooth="true"
                 smoothingQuality="high" source="assets/1st Stryker Brigade.png"
                 verticalAlign="middle"/>
        <s:Image id="BrigadeEmblem4" width="170" height="200" smooth="true"
                 smoothingQuality="high" source="assets/4th Stryker Brigade.png"
                 verticalAlign="middle"/>
    </s:HGroup>
</s:Scroller>

So, for example, if "BrigadeEmblem1" is visible in the Scroller, I want to programmatically change the visible image to "BrigadeEmblem4" if a specific event is heard.

score 0 · Answer 1 · answered Sep 13 '12 at 10:11

Yes, actually this is possible.

I've done it by extending the Scroller-class and creating this method:

public function ensureIndexIsVisible(index:int):void {

        if (!viewport || !(viewport is GroupBase) || !(viewport as GroupBase).layout) {
            return;
        }

        var spDelta:Point = GroupBase(viewport).layout.getScrollPositionDeltaToElement(index);

        // if spDelta is null, no scrolling is required.
        if (spDelta) {
            GroupBase(viewport).horizontalScrollPosition += spDelta.x;
            GroupBase(viewport).verticalScrollPosition += spDelta.y;
        }
    }

So when you want the second image:

myScroller.ensureIndexIsVisible(1);

score 0 · Answer 2 · answered Oct 10 '14 at 07:46

It is a little bit late for the answer but I hope this could be useful for someone. I have written some code that automatically scrolls the Scroller so the focused component is completely visible. You can use it to solve your problem

 private var _focusedComponentPaddingTop:int = 10;
 private var _focusedComponentPaddingBottom:int = 10;
 private var _focusedComponentPaddingLeft:int = 5;
 private var _focusedComponentPaddingRight:int = 5;

 public function makeFocusedItemVisible(event:FocusEvent):void {
    // Target is the actual object that has focus.
    var target:DisplayObject = DisplayObject(event.target);

    if (target != null && contains(target)) {
       // The container's viewable area
       var visibleArea:Rectangle = getVisibleArea();
       var changed:Boolean = false;

       // Calculate the position of the target in the container.
       var topLeft:Point = new Point(0, 0);
       topLeft = target.localToGlobal(topLeft);
       topLeft = globalToLocal(topLeft);

       var bottomRight:Point =
             new Point(target.width, target.height);
       bottomRight = target.localToGlobal(bottomRight);
       bottomRight = globalToLocal(bottomRight);

       // Check if the component is visible and move the scrollbars if not
       if (bottomRight.x > visibleArea.right) {
          var deltaX:Number = bottomRight.x - visibleArea.right;
          viewport.horizontalScrollPosition += deltaX + _focusedComponentPaddingRight;
          topLeft.x -= deltaX;
          changed = true;
       }

       if (topLeft.x < visibleArea.left) {
          viewport.horizontalScrollPosition -=
                visibleArea.left - topLeft.x + _focusedComponentPaddingLeft;
          changed = true;
       }

       if (bottomRight.y > visibleArea.bottom) {
          var deltaY:Number = bottomRight.y - visibleArea.bottom;
          viewport.verticalScrollPosition += deltaY + focusedComponentPaddingBottom;
          topLeft.y -= deltaY;
          changed = true;
       }

       if (topLeft.y < visibleArea.top) {
          viewport.verticalScrollPosition -=
                visibleArea.top - topLeft.y + focusedComponentPaddingTop;
          changed = true;
       }

       // Call validateNow() to get the container move the component 
       if (changed) {
          validateNow();
       }
    }
 }

 private function getVisibleArea():Rectangle {
    var area:Rectangle = new Rectangle();

    area.x = x;
    area.y = y;
    area.width = width;
    area.height = height;

    return area;
 }

score 0 · Accepted Answer · answered Mar 06 '12 at 13:35

0

Exactly That!

    setTimeout(image1,3000); // in 3 seconds this event will call for the function(image1)

    function image1(){
    myMovieClip .visible = false;
    }

answered Mar 06 '12 at 13:35

joshua

676
1
5
19

Changing the position of a Scroller container programmatically (by HGroup index)

3 Answers3