SimpleScrollBar + Question (USEFULL FOR NOOBS)

Share your knowledge in a tutorial, or post code snippets and classes that might be useful to the community

SimpleScrollBar + Question (USEFULL FOR NOOBS)

Postby edo » Sat Jun 20, 2009 2:57 pm

Everyone,
(if you're interested in the scrollBar not the question just download the file or copy/paste the code NO HARD FEELING AT ALL! :D)

I have a (custom) SimpleScrollBar package/script that I found to be very usefull, it's based on Lee's tutorial and other pieces of code i found on the web.

Here's my question since i learned everything about as3 that i know from the web I was hoping someone could tell if my way of coding is bad, what i could do better/different, maybe more efficient ways of scripting, ...

Any hints/tips/comments are welcome...
This is a weird question perhaps but i need some feedback to see if i'm not following the wrong path.

So if it's not to much to ask take a look and let me know what i'm doing wrong or good.

Here's the script for people who dont like to download but prefer to copy/paste:
Code: Select all
package
{
   import flash.display.Sprite;
   import flash.display.DisplayObjectContainer;
   import flash.events.*;
   import caurina.transitions.*;
   
   public class SimpleScrollBar extends Sprite
   {
      private var _thumb:Sprite;
      private var _track:Sprite;
      private var _sb:Sprite;
      private var _masker:Sprite;
      private var _yOffset:Number;
      private var _yMin:Number;
      private var _yMax:Number;
      private var _height:Number;
      private var _value:Number;
      private var _isScrolling:Boolean;
      private var _added:Boolean = false;
      private var _content:DisplayObjectContainer;
      
      public function ScrollBar()
      {
      
      }
      
      public function createScrollBar(c:DisplayObjectContainer, h:Number):void
      {
         _content = c;
         _height = h;
         init();
      }
      
      private function init():void
      {
         createMasker();
         createSb();
         
         addChild(_masker);
         
         _sb.addEventListener(Event.ADDED_TO_STAGE, addedHandler);
         addChild(_sb);
      }
      
      private function addedHandler(e:Event):void
      {
         _sb.removeEventListener(Event.ADDED_TO_STAGE, updateSize);
         _added = true;
         
         updateSize();
         
         _thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumbDown);
         stage.addEventListener(MouseEvent.MOUSE_UP, thumbUp);
      }
      

      private function thumbDown(e:MouseEvent):void
      {
         stage.addEventListener(MouseEvent.MOUSE_MOVE, thumbMove);
         _yOffset = mouseY - _thumb.y;
      }

      private function thumbUp(e:MouseEvent):void
      {
         stage.removeEventListener(MouseEvent.MOUSE_MOVE, thumbMove);
      }
      
      private function thumbMove(e:MouseEvent):void
      {
         _thumb.y = mouseY - _yOffset;
         if(_thumb.y <= _yMin)
            _thumb.y = _yMin;
         if(_thumb.y >= _yMax)
            _thumb.y = _yMax;
         var sp:Number = _thumb.y / _yMax;
         Tweener.addTween(_content, {y:_masker.y+(-sp*(_content.height-_masker.height)),
                              time:0.5});
         e.updateAfterEvent();
      }
      
      private function createMasker():void
      {
         _masker = new Sprite();
         _masker.graphics.beginFill(0x000000, 0.5);
         _masker.graphics.drawRect(0, 0, 10, 10);
         _masker.graphics.endFill();
      }
      
      private function createSb():void
      {
         _sb = new Sprite();
         _thumb = createThumb();
         _track = createTrack();
         _sb.addChild(_track);
         _sb.addChild(_thumb);
         _thumb.buttonMode = true;
      }
      
      private function createThumb():Sprite
      {
         // Adjust graphics to what suits your project
         var th:Sprite = new Sprite();
         th.graphics.beginFill(0x000000);
         th.graphics.drawRect(0, 0, 6, 6);
         th.graphics.endFill();
         return th;
      }
      
      private function createTrack():Sprite
      {
         // Adjust graphics to what suits your project
         var tr:Sprite = new Sprite();
         tr.graphics.beginFill(0x000000);
         tr.graphics.drawRect(2, 0, 2, 100);
         tr.graphics.endFill();
         return tr;
      }
      
      public function updateSize():void
      {
          if (_added) {
             _masker.x = _content.x;
             _masker.y = _content.y;
             _masker.width = _content.width;
             _masker.height = _height;
            
             _content.mask = _masker;
            
            _sb.x = _masker.x + _masker.width + 10;
            _sb.y = _masker.y;
               _track.height = _masker.height;
                _thumb.height = Math.ceil((_masker.height / _content.height) * _masker.height);
            
            _yMin = 0;
            _yMax = _track.height - _thumb.height;
            
                 if ((_thumb.y + _thumb.height) > _masker.height) _thumb.y = _masker.height - _thumb.height;
            
               _thumb.y = (_content.height < _masker.height) ? 0 : _thumb.y;
               _sb.visible = (_content.height > _masker.height);
               _value = _masker.height - _thumb.height;
               _content.y = _masker.y -((_content.height - _masker.height) * (_thumb.y / _value));
            }
      }
   }
}

And here's an example on how you could use it:
Code: Select all
import SimpleScrollBar;
var _ssb:SimpleScrollBar;
var contentArray:Array = [{c:cont, h:200}, {c:cont2, h:400}];

for (var i:int = 0; i < contentArray.length; i++){
   _ssb = new SimpleScrollBar();
   _ssb.createScrollBar(contentArray[i].c, contentArray[i].h);
   addChild(_ssb);
}


The example has 2 displayObjectContainers.
Instance names: 'cont' & 'cont2'.

Thanks for taking a look. I also hope someone will be able to use/learn from it.
Else i shouldn't of have posted it here :)

Thanks or you're welcome whatever suits the situation
xxx
Attachments
scrollbar.zip
SimpleScrollBar
(21.54 KiB) Downloaded 162 times
One iron in the fire, let's hit while it's hot.
He worked so hard to keep from working that he got a long vacation.
edo
 
Posts: 135
Joined: Fri Dec 05, 2008 1:21 am
Flash Version: Adobe Flash CS5

Re: SimpleScrollBar + Question (USEFULL FOR NOOBS)

Postby melon » Wed Jun 24, 2009 1:07 pm

great i would love to use this, as i am a noob :P however after i downloaded it doesn't open. i get an error message failed to open. could this be because of the version of flash i use? CS3
melon
 
Posts: 9
Joined: Wed Jun 24, 2009 12:13 pm
Flash Version: Adobe Flash CS5

Re: SimpleScrollBar + Question (USEFULL FOR NOOBS)

Postby edo » Wed Jun 24, 2009 2:57 pm

That's ok you can copy/paste the cod. What you have to do is the folowing:

1. Create new "Actionscript file".
- copy/past the first block of code into it
- save it to a folder and name it "SimpleScrollBar.as"

2. Create new .FLA file.
- 2 layers: 1 for content MC's and 1 for code
- create 2 "MovieClips" (mc's you want to scroll)
- give them instances names of: "cont" & "cont2"
- copy paste the second bloc of code into the actions panel.
- save it in the same folder as "SimpleScrollBar.as"
- TEST IT! it should work else send me private message or post reply and i'll talk you trough

Hope it helps
One iron in the fire, let's hit while it's hot.
He worked so hard to keep from working that he got a long vacation.
edo
 
Posts: 135
Joined: Fri Dec 05, 2008 1:21 am
Flash Version: Adobe Flash CS5

Re: SimpleScrollBar + Question (USEFULL FOR NOOBS)

Postby melon » Fri Jun 26, 2009 5:25 pm

i followed your instructions. for the second .fla i guessed you meant SimpleScrollBar.fla and not "SimpleScrollBar.as" unfortunately its not working, i get syntax errors. is there some way my document should be set up? or is there a particular size the content needs to be?
melon
 
Posts: 9
Joined: Wed Jun 24, 2009 12:13 pm
Flash Version: Adobe Flash CS5

Re: SimpleScrollBar + Question (USEFULL FOR NOOBS)

Postby edo » Fri Jun 26, 2009 5:48 pm

What errors are you getting and i actually ment SimpleScrollBar.as (you have to save it in the same folder as this file)
, the name of the fla file doesn't mather.

I have little time now but post your erros and i'll see what i can do
One iron in the fire, let's hit while it's hot.
He worked so hard to keep from working that he got a long vacation.
edo
 
Posts: 135
Joined: Fri Dec 05, 2008 1:21 am
Flash Version: Adobe Flash CS5

Re: SimpleScrollBar + Question (USEFULL FOR NOOBS)

Postby melon » Fri Jun 26, 2009 6:40 pm

oh right lol you can see were i got confused there. :lol:

heres a screen of the errors i also sent you a pm,
http://i39.photobucket.com/albums/e153/jimmytheweed/errors.jpg
melon
 
Posts: 9
Joined: Wed Jun 24, 2009 12:13 pm
Flash Version: Adobe Flash CS5

Re: SimpleScrollBar + Question (USEFULL FOR NOOBS)

Postby edo » Fri Jun 26, 2009 8:09 pm

My gues is that you put a file in a wrong folder or you don't have Tweener installed.

- Make sure the .as file and the .fla file are in the same folder.
- Do you have Tweener installed? (else check the Tweener tutorials on main gotoAndlearn page)

If the problem isn't one of these 2, then i sugest you upload a .zip file of your files (just compress the folder wich contains the files), so i can see where the problem lies.

Good luck
One iron in the fire, let's hit while it's hot.
He worked so hard to keep from working that he got a long vacation.
edo
 
Posts: 135
Joined: Fri Dec 05, 2008 1:21 am
Flash Version: Adobe Flash CS5

Re: SimpleScrollBar + Question (USEFULL FOR NOOBS)

Postby melon » Sun Jun 28, 2009 3:32 pm

here you go, please tell me if it works for you
Attachments
simple scrollbar.zip
(824.46 KiB) Downloaded 132 times
melon
 
Posts: 9
Joined: Wed Jun 24, 2009 12:13 pm
Flash Version: Adobe Flash CS5

Re: SimpleScrollBar + Question (USEFULL FOR NOOBS)

Postby edo » Sun Jun 28, 2009 6:04 pm

Here's the fixed file with an explanation of what i fixed:

- first of all you're files had very weird extensions as '.fla.as' and '.as.fla'
What u had to do was: (what i now did for u)
--> create one actionscript file => .as (no timeline), containing the package
--> create one flash file => .fla, containing the mc's and little bit of code.

- one more thing...
the mc's (first second) content should be aligned top left as in the fixed file i've posted.

- if you have Tweener installed this should work now!

Good luck
Attachments
simple scrollbar.zip
Fixed CS3
(21.43 KiB) Downloaded 154 times
One iron in the fire, let's hit while it's hot.
He worked so hard to keep from working that he got a long vacation.
edo
 
Posts: 135
Joined: Fri Dec 05, 2008 1:21 am
Flash Version: Adobe Flash CS5

Re: SimpleScrollBar + Question (USEFULL FOR NOOBS)

Postby melon » Mon Jun 29, 2009 2:23 pm

hmm very strange, i don't see the files as having weird file extensions if i did i would change them. the files you sent back work, so i guess tweener is doing what it should. maybe its a mac thing i just can't get my original to work!!
melon
 
Posts: 9
Joined: Wed Jun 24, 2009 12:13 pm
Flash Version: Adobe Flash CS5


Return to Shared User Content

Who is online

Users browsing this forum: No registered users and 2 guests

cron