Nice!!

First!!!!

great tutorial !
and I want you icon set !

add easing?

Excactly what i was looking for. Thanks!

second

Magnífico!!!

Segundo!!!

Nice Tut.

Argh Second

Nice tutorial !

Thanks Shane.

You should probably add an event listener for MOUSE_LEAVE (or possibly MOUSE_UP) on the stage so if you release the mouse outside the flash area, the scrollbar won’t be stuck to the x coord of the mouse cursor.

Otherwise, decent tut.

Nice tutorial !

Thanks shane, hope to see more coming !

How do add easing effects with this scroll bar?

its good bubby.
can i show some first five lines in my site linking/redirect to your full tutorial page.i like to spread the word, i already tweet this.and cos , i cant clearly understand this:
Copyright & Usage: -> You cannot copy whole tutorials, either in English or translated to another language

can i , i need your permission., cos i dont want to ruin anything. i like this site.
reply me, or any one outside-can we do like this, i have seen many blog tping some text and linkng to the original site. so i also like to spread the word.

You neglected to include an AS3 alternative for the AS2 [b]onReleaseOutside[/b]!!

Otherwise, nicely done.

I hope I can find some time to create some tutorials, because this is my area of expertise.

A scrollbar! There’s a lot of tuts of scrollbars, but this one is with a perfect design. Congratulations!

Very clean and simple. Great tut!

Nice, but you need to add the MOUSE_UP listener to the stage, not to the scrollbar itself. Some easing would also be nice. Nice tut though

I see that one of the images were removed from the final product that was in the movie… hahaha. This is a great tutorial – I’m excited to be learning Flash!

Pretty Cool.

Slow tut…

Still nice…but slow

Could you guys offer a text tut, or low quality tut…not all of us have speeds capable of streaming 258MB Video files..
Otherwise a fantastic quality tut…shame I need to wait so long to do it..[approx 45-50 mins..]

There is no easing, why ?
With a tweening engine you could really enhance the “smoothness” of the scroll.

you can actually FULLY costumize the built in components for action script 3 – very easy just dubble click on them and change the graphics

great tut keep up the great work!!!

Please next time include the FLA for download. Yeah, little improvement could be done like easing and mouse up function that limits the contril within the scrollbar.

Great tut.
thanx alot mate.
now u’r getting serious guys … keep up

anyone any idea what would need to be added/changed for easing with TweenMax, please?

good tutorial !!!

Thanks in advance…

Hey guys,

First of all, thanks for the great comments. This was my first ever video tutorial so there are def a few things I will do a but differently next time and with regards to the MOUSE_LEAVE listener, true could of been done and very easy to implement. As for the easing and in reply to noonoo, in the moveBox – enter_frame function you would change the script I have put to:

TweenMax.to(scrollingContent, 1, {x: -((contentX – startX) + scrollHandle.x) * ((scrollingContent.width – masker.width) / (scrollBar.width – scrollHandle.width))});

You could then apply any easing that you wish, to the TweenMax tween.

Thanks and happy Flashing!

Shane

Thanks so much Shane.

why i can’t watch full tutorial. i just can watch less than 30s…

Nice tut, 2Bad it doesn’t work with the scrollwheel.

ty!

I’m getting a few errors in my compiler “1013:The private attribute may be used only on class property definitions.”

any ideas? – bit of a novice/intermediate, but i promise I’ve looked through my code for spelling mistakes

not so nice bcz when u rollout the scrollbar not release

I followed this tutorial, but i get an error. im not sure what i did wrong.
it would be great if you posted the code already typed out, i was hard to follow it in the video.
other than that good video, im new to using action script’s with flash and came here to learn.

I did send the source files to Flash.tutsplus when I submitted the tute, so I’ll ask Skellie to post it here like I thought he would.

Shane

please do post the code!

the video is 258MB

plz post the code. not working here…

OK as Skellie hasn’t replied to me and Flash.tutsplus have not posted my source files here is a link to the files on my server:

http://blog.ultravisual.co.uk/sourceFiles/video_src_files.zip

Shane

You will need to have TweenMax in your library paths as I have not included it with the source and I am assuming that you guys already know how to do this, if not look it up on google. The files are also in CS3 so that all can see.

Shane

As you can now see, |Skellie has posted the source also.

Shane

When I compile the source fla in flash CS3 it gives a few errors.

‘Acces of undefined property Tweener’
‘Acces of undefined property Tweenmax’
‘Definition caurina.transitions:Tweener could not be found.’
‘Definition gs:Tweenmax coulc not be found’

Do I really need Flash CS4 to do this tutorial?

Great tutorial thanks

nice tutorial mine din’t move at all tho

package
(
import flash.display.MovieClip;
import flash.events.events;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
public class main extends MovieClip
(
)
private bound:Rectangle
private var start:X Number;
private var content:Namespace;
public function main() :void
(
)
addEventListener(event.ADDED_TO_STAGE init );
)
private function init(e:Event):void
)
removeEventListener(event.ADDED_TO_STAGE init);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
startX = scrollHandle.x;
contentX = scrollingContent.x;
bounds = new Rectangle(scrollHandle.x. scrollHandle.y,scrollBar.width – (scrollHandle.width. +4),0);
)
private function drag(e:MouseEvent);void
(
scrollHandle.startDrag(false, bounds);
scrollHandle.gotoandstop(2);
scrollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
addEventListener(MouseEvent.MOUSE_UP, stopdrag);
addEventListener (Event.ENTER_FRAME, movebox);
)
private function stopdrag(e:MouseEvent):void
(
scrollHandle.stopDrag();
scrollHandle.gotoandstop(1);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
removeEventListener (Event.ENTER_FRAME, movebox);
)
private function moveBox(e:Event):void
(
scrollingContent.x = -1 (contentx -startX) + scrollHandle.x) * ((scrollingContent.x.width – masker.width /scrollBar.width – scrollHandle.width));
)
)
)

……………. can anyone help tell me what im doing wrong new to flash

Thanks Shane, I really enjoyed this tutorial and found watching you make mistakes and then correct them was excellent, because I learn’t from them! Would this work for the new mobile phone touch screens eg Nokia 5800 and could you use your finger to flick to next page?

Hi
laurie…..what are your error messages?
lou……thanks….errors are part of the game, you can’t type everything perfectly ….with regards to the Nokia 5800 – no as the flash player on that phone is flash lite 3.0 which doesn’t support actionscript 3.0
Thanks
Shane

Actually laurie….I can see a lot of errors……
You’ve closed your class braces at the beginning, bound isn’t declared as a variable, startX is declared incorrectly, your constructor is closed so that nothing else can happen…….also you are using parenthesis () instead of braces {}……check your source against mine in the source files and see where you have gone wrong……
Shane

Thanks Shane!!

Hey I really thought that your tutorial was interesting, but it won’t work and to be honest i know sod all about flash, im currently in my second year at uni and our brief was to design a portfolio for a chosen artist/designer, and i’ve been looking at the screen for too long and i can’t tell what i’ve done wrong for my file not to work :’(. You said about tweener and tweenermax but i have no idea about any of them. I’d be really grateful if you could help, if you could dumb it down because i really am a noob when it comes to flash xD.

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;

public class Main extends MovieClip
{
private var bounds:Rectangle;
private var startX:Number;
private var contentX:Number;

public function Main ():void
{
addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e;Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
startX = scrollHandle.x;
contentX = scrollingContent.x;
bounds = new Rectangle(scrollHandle.x, scrollHandle.y, scrollBar.width – (scrollHandle.width + 4), 0);
}
private function drag(e:MouseEvent):void
{
scrollHandle.startDrag(false, bounds);
scrollHandle.gotoAndStop(2);
scrollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
addEventListener(MouseEvent.MOUSE_UP, drag);
addEventListener(Event.ENTER_FRAME, movebox);
}
private function stopdrag(e:MouseEvent):void
{
scrollHandle.stopDrag();
scrollHandle.gotoAndStop(1);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
removeEventListener(Event.ENTER_FRAME, moveBox);
}
private function moveBox(e:Event)void
{
scrollingContent.x = – ((contentX – startX) + scrollHandle.x) * ((scrollingContent.width – masker.width / (scrollBar.width – scrollHandle.width));

}
}

Thank you!

how do you add, MOUSE_LEAVE?

When I tried to open flash file and test movie I get “1037: Packages cannot be nested.” and it’s not working. Can you someone tell me why it’s doing that.
I can’t make it work in flash cs4 as3.0

When I tried to open flash file and test movie I get “1037: Packages cannot be nested.” and it’s not working. Can you someone tell me why it’s doing that.
I can’t make it work in flash cs4 as3.0. The flash file that came with files working great, but when you try test flash movie without changing anything it’s not working.

Hey nice tut but I have a porblem
well first I have no tween
so I have´nd but it in but I get an 1114error and I dont get it??
NEED HELP thanks!!!

packege
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;

public class Main extends MovieClip
{
private var bounds:Rectangle;
private var startX:Number;
private var contentX:Number;

public function Main():void
{
addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
srollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
startX = srollHandle.x;
contentX = srollingContent.x;
bounds = new Rectangle(srollHandle.x, srollHandle.y, srollBar.width – (srollHandle.width + 4), 0);
}
private function drag(e:MotionEvent):void
{
srollHandle.startDrag(false, bounds);
srollHandle.gotoAndStop(2);
srollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
addEventListener(MouseEvent.MOUSE_UP, stopdrag);
addEventListener(Event.ENTER_FRAME, moveBox);
}
private function stopdrag(e:Event):void
{
srollHandle.stopDrag();
srollHandle.gotoAndStop(1);
srollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
removeEventListener(Event.ENTER_FRAME, moveBox);
}
private function moveBox(e:Event):void
{
srollingContent.x = -((contentX – startX) + srollHandle.x) * ((srollingConten.width – masker.width) / (srollBar.width – srollHandle.width));
}
}
}

Thanks =)

Hi,

Really nice Tut!

however, I am trying to change it so the scroller and content is vertical instead. Have been at it for hours now, and I would appreciate some help greatly!

My code currently looks like this, but nothing happens when I test!!:

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;

import gs.TweenMax;

public class Main extends MovieClip
{
private var bounds:Rectangle;
private var startY:Number;
private var contentY:Number;

public function Main():void
{
addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
scrollBar.addEventListener(MouseEvent.CLICK, tween);
addEventListener(Event.ENTER_FRAME, moveBox);
startY = scrollHandle.y;
contentY = scrollingContent.y;
bounds = new Rectangle(scrollHandle.y, scrollHandle.x, scrollBar.length – (scrollHandle.length + 4), 0);
}
private function tween(e:MouseEvent):void
{
var mousePos:Number = mouseY;
if(mousePos > (scrollBar.y + scrollBar.length) – (scrollHandle.length + 4)){
mousePos = (scrollBar.y + scrollBar.length) – (scrollHandle.length + 4);
}
TweenMax.to(scrollHandle, 1, {y: mousePos});
}
private function drag(e:MouseEvent):void
{
scrollHandle.startDrag(false, bounds);
scrollHandle.gotoAndStop(2);
scrollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
addEventListener(MouseEvent.MOUSE_UP, stopdrag);

}
private function stopdrag(e:MouseEvent):void
{
scrollHandle.stopDrag();
scrollHandle.gotoAndStop(1);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
}
private function moveBox(e:Event):void
{
TweenMax.to(scrollingContent, 2, {y: -((contentY – startY) + scrollHandle.y) * ((scrollingContent.length – masker.length) / (scrollBar.length – scrollHandle.length))});
//scrollingContent.x = -((contentX – startX) + scrollHandle.x) * ((scrollingContent.width – masker.width) / (scrollBar.width – scrollHandle.width));
}
}
}

Help??

Thanks

I liked this tutorail, but it gives me these error messages.

If I open your files in CS4, they dont run, so I am not so
sure what is happening with both of them.

I also copied the content of your MAIN.as to replace the
one I followed to make sure I did not have something typed
wrong.

1120: Access of undefined property Tweener.
1120: Access of undefined property TweenMax.
1172: Definition caurina.transitions:Tweener could not be found.
1172: Definition gs:TweenMax could not be found.

Thanks – Tim

very thanks

Yea how do you add the Mouse_Leave? Where would you put that in the code? Also, I want to use a scroll bar vertically too. Would you just change all the x’s to y’s and y’s to x’s in the code?

hey this was a really good tut, but I keep coming up with Syntax Errors, I tired to copy and paste the code from the site but I get the same errors what the?

this is my code:

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;

public class main extends MovieClip
{
private var boundsX:Rectangle;
private var startX:Number;
private var contentX:Number;

public function Main():void
{
addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
startX = scrollhandle.x;
contentX = scrollingcontent.x;
bounds = new Rectangle(scrollHandle.x, scrollHandle.y, scrollBar.width – (scrollHandle.widht + 4), 0),
}
private function drag (e:MouseEvent):void
{
scrollHandle.startDrag(false, bounds);
scrollHandle.gotoAndStop(2);
scrollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
addEventListener(MouseEvent.MOUSE_UP, stopdrag);
addEventListener(Event.ENTER_FRAME, moveBox);
}
private function stopdrag(e:MouseEvent):void
{
scrollHandle.stopDrag();
scrollHandle.gotoAndStop(1);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
removeEventListener(Event.ENTER_FRAME, moveBox);
}
private function moveBox(e:Event):void
{
scrollingContent.x = -((contentX – startX) + scrollHandle.x) * ((scrollingContent.width – masker.width) / (scrollBar.width – scrollHandle.width);
}
}
}

if anyone could help me out it would be awesome ’cause I’m going nuts over here!

hey shane. ive accidentally thought this was used with as2.0.. n now that ive completed everything(except the as),do you have any solutions for as2?

looks nice, but does not work at all ((((((((((((((

1120: Access of undefined property Tweener.
1120: Access of undefined property TweenMax.
1172: Definition caurina.transitions:Tweener could not be found.
1172: Definition gs:TweenMax could not be found.

any comments, Shane?

hello
I have a problem too.
Everything was fine until I added the code for the tween and the Listener for the Bar. Now nothing is moving anymore and I can drag the Handle all over my swf.

Can maybe someone figure out where the mistake lies?
My Compiler shows no misktakes at all only my OutPut say that something with the “init” function is wrong… and that addEventListener isn´t a function?

here´s a screenshot of my code (just ignore the german comments): https://dl.getdropbox.com/u/1619370/code-screen.jpg
and my swf: https://dl.getdropbox.com/u/1619370/ScrollingBar.swf

I am a noob trying to learn as3 – I know some baiscs but I just can´t see any problem…

Great!!!