Skip to main content
Known Participant
November 26, 2009
Question

Scrollbar for a Sprite?

  • November 26, 2009
  • 1 reply
  • 395 views

Hello,

I'm currently having trouble on integrating a scrollbar that I downloaded from Warm Forest Flash. I built a XML gallery that is going out of the boundary of height of 466 pixels. The thumbnails that are out of the boundary are still visible. On top of that, I tried to add the scrollbar to the sprites inside and outside the for loop, but sadly it doesn't appear. What am I doing wrong? For the height thing, can I set the size of the ULLoader? Or should I just use a mask or something?

Main.as

import flash.net.URLLoader;
import flash.net.URLRequest;
import fl.containers.UILoader;
import gs.*;
import gs.easing.*;
import caurina.transitions.*;
import org.libspark.ui.SWFWheel;
import com.warmforestflash.ui.FullScreenScrollBar;


SWFWheel.initialize(stage);

var urlRequest:URLRequest = new URLRequest("xml/pics.xml");
var urlLoader:URLLoader = new URLLoader();
var myXML:XML = new XML();
var xmlList:XMLList;
myXML.ignoreWhitespace = true;

urlLoader.addEventListener(Event.COMPLETE,fileLoaded);
urlLoader.load(urlRequest);

var arrayURL:Array = new Array();
var arrayName:Array = new Array();
var holderArray:Array = new Array();

var nrColumns:uint = 4;

var sprite:Sprite = new Sprite();
addChild(sprite);
var thumb:Thumbnail;

var thumbsHolder:Sprite = new Sprite();
sprite.addChild(thumbsHolder);

var loaderHolder:Sprite = new Sprite();
loaderHolder.graphics.beginFill(0xffffff,1);
loaderHolder.graphics.drawRect(0,0,550,330);
loaderHolder.graphics.endFill();
loaderHolder.x = 2000;
loaderHolder.y = 10;
sprite.addChild(loaderHolder);

var photoLoader:UILoader = new UILoader();
photoLoader.width = 540;
photoLoader.height = 320;
photoLoader.x = 5;
photoLoader.y = 5;
photoLoader.buttonMode = true;
photoLoader.addEventListener(MouseEvent.CLICK,onClickBack);
loaderHolder.addChild(photoLoader);

function fileLoaded(event:Event):void {
    myXML = XML(event.target.data);
    xmlList = myXML.children();
    for (var i:int=0; i<xmlList.length(); i++) {
        var picURL:String = xmlList.url;
        var picName:String = xmlList.big_url;
        var _scrollBar:FullScreenScrollBar;
        _scrollBar = new FullScreenScrollBar(photoLoader, 0x000000, 0xff4400, 0x05b59a, 0xffffff, 15, 15, 4, true);

        arrayURL.push(picURL);
        arrayName.push(picName);
        holderArray = new Thumbnail(arrayURL,i,arrayName);
        holderArray.addEventListener(MouseEvent.CLICK,onClick);
        holderArray.name = arrayName;
        holderArray.buttonMode = true;
        if (i<nrColumns) {
            holderArray.y = 116;
            holderArray.x = i*256;
        } else {
            holderArray.y = holderArray[i-nrColumns].y+110;
            holderArray.x = holderArray[i-nrColumns].x;
        }
        thumbsHolder.addChild(holderArray);
        thumbsHolder.addChild(_scrollBar);
    }
}

function onClick(event:MouseEvent):void {
    photoLoader.source = event.currentTarget.name;
    Tweener.addTween(thumbsHolder, {x:-650, time:1, transition:"easeOutExpo"});
    //Tweener.addTween(loaderHolder, {x:10, time:1, transition:"easeOutExpo"});
    Tweener.addTween(thumbsHolder, {alpha:0, time:1, transition:"linear"});
    //Tweener.addTween(loaderHolder, {alpha:1, time:1, transition:"linear"});
}

function onClickBack(event:MouseEvent):void {
    Tweener.addTween(thumbsHolder, {x:0, time:1, transition:"easeOutExpo"});
    //Tweener.addTween(loaderHolder, {x:1000, time:1, transition:"easeOutExpo"});
    Tweener.addTween(thumbsHolder, {alpha:1, time:2, transition:"linear"});
    //Tweener.addTween(loaderHolder, {alpha:0, time:2, transition:"linear"});
}

Thumbnail.as

package {
   
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import fl.containers.UILoader;
    import caurina.transitions.*;
    import gs.*;
    import gs.easing.*;

    public class Thumbnail extends Sprite {
       
        private var nume:String;
        private var url:String;
        private var id:int;
        private var loader:UILoader;

        function Thumbnail(source:String,itemNr:int,numeThumb:String):void {
           
            url = source;
            id = itemNr;
            this.nume = numeThumb;
            drawLoader();
            addEventListener(MouseEvent.MOUSE_OVER,onOver);
            addEventListener(MouseEvent.MOUSE_OUT,onOut);
            scaleThumb();
           
        }
       
        private function drawLoader():void {
           
            loader = new UILoader();
            loader.source = url;
            loader.mouseEnabled = false;
            //loader.x = -50;
            //loader.y = -50;
            addChild(loader);

        }
       
        private function onOver(event:MouseEvent):void {
            TweenLite.to(this, 0.5, {alpha:1, ease:Quad.easeOut});
        }
       
        private function onOut(event:MouseEvent):void {
            TweenLite.to(this, 0.5, {alpha:0.7, ease:Quad.easeOut});
        }

        private function scaleThumb():void {
            TweenLite.to(this, 0, {scaleX:0.9, scaleY:0.9, alpha:0.7});
        }
       
    }
}

This topic has been closed for replies.

1 reply

kglad
Community Expert
Community Expert
November 26, 2009

that scrollbar is scrolling a textfield.  it's not clear it's designed to scroll anything else.  check the code.