Flashtuning - Files - Flash Components - User Interface - Advanced Scroll Bar AS 2.0 Component for Flash

Advanced Scroll Bar AS 2.0

The Flashtuning Scroll Bar component provides extended scrolling control over any content type within movie clip and adapts automatically for both static and dynamic types of content.

The Scroll Bar can be configured to work in either free or snapped to content modes. You can use it in either vertical or horizontal modes and you can configure two component instances to create a Scroll Pane.

The component features extensive visual customization option which include support for custom skins and color overlays.

FEATURES:

* Scroll any Movie Clip and layout components (eg. HTML Table Renderer, Adobe Flash Datagrid etc)
* Horizontal/Vertical orientation
* Switch scrolling targets during runtime
* Choice and adjustment of scroll easing types (basic,bounce,elastic,inertia)
* Choice of scrollbar layouts (buttons and slider, buttons only, slider only)
* Run-time resizible visible area
* Free/Snap to visible area modes support
* Autohide/disable mechanism
* Mouse wheel support
* Customizable skins on per instance or global basis
* Skin elements color overlays
* Dynamic control through Actionscript API
* Fixed Track Body option
* Fixed Slider Body option
* Use Invisible Mask option
* Scroll Percentage option
* Built in Help Book that can be accessed via the Flash Help Panel

The commercial download package includes comprehensive usage example covering all your Flash scrolling needs.

This component is available for:
Flash MX 2004, Flash Mx Professional 2004, Flash 8, Flash CS3, Flash CS4 / ActionScript 2.0

Check the online QUICK START GUIDE tutorial for a simple, generic use scenario that you may wish to perform to get familiarized with the component.

Download the FREE TRIAL version package below to try the component before you buy.

Check also the ActionScript 3.0 version:
Advanced Scroll Bar AS 3.0

NOTE: The trial version has a limit of max 350 X 200 pixels for the visible area size and watermark attached, as a trial limitation. There are no restrictions on the full version.

You can also download the HTML Help Books from the following location: DOWNLOAD HELP BOOKS

Check the general Tips & Tricks page regarding all FT products.

This product is included in the following promotional package:
FT Special Pack PRO

Free Download:

Preview Examples:

The Scroll Bar adjust itself dynamically

Set two component instances to build a Scroll Pane

Label	Regular	Special
Amount:	$ 7	$ 15
Title:	Personal License	Commercial License
Description:	By purchasing a "Personal License" you are entitled to use this product in one website or other multimedia project, personal or non-commercial client work. If you want to use it in multiple personal websites you'll have to purchase a license for each personal website or you can contact us for a Special License. You may not redistribute but you may modify its contents.	By purchasing a "Commercial License" you are entitled to use this product in one commercial project (website, DVD, offline presentation etc). If you want to use it in multiple commercial websites you'll have to purchase a license for each commercial website or you can contact us for a Special License. You may not redistribute but you may modify its contents.
	By clicking Add to Cart button you will complete the payment via PayPal.

	You can also pay via Credit Card by purchasing from our FlashComponents.net account.

Comments for User Interface >> Advanced Scroll Bar AS 2.0
Flashtuning 05-06-09	How can I use MouseWheel on MAC OS? To use MouseWheel on MAC OS check this article from pixelbreaker and also the custom mouseWheel function creation listed below in this faq.
Flashtuning 04-13-09	How can I set the scroll bar to a certain position? You'll use the scrollPercentage property for this. The scrollPercentage property works only after the content is fully loaded ( if you're loading dynamic content you need to count the bytesLoaded and bytesTotal and when it is completed you can set the scrollPercentage property ) or your content must be completely rendered if it is static content on the stage ( you can create a timer function for this and set the scrollPercentage property after a certain time interval or variable counter like in the example below ). Code: Select all`this.onEnterFrame = setPercentage; var count = 0; function setPercentage() { if (count==2) { myScrollBar.scrollPercentage = 50; delete this.onEnterFrame; } count++ } // END SET PERCENTAGE //` The above code sample is used when you have static content on the stage, for dynamic loaded content you need to create a preloader function. Also this kind of code is used only when the content is loaded first time and you want to initialize the scroller to a certain postion. After the content was fully loaded you can use the scrollPercentage property anytime you need to set / reset the scroller position.
Flashtuning 04-13-09	How can I skin the component in Flash CS4? To skin the component in Flash CS4 you'll include and use the setSkin(sbInstance) function: Code: Select all// SET SKIN FUNCTION // function setSkin(sbInstance) { //set a custom skin using the symbols included in the Assets folder //change scroller up button sbInstance.upIdle = "up_Idle1"; sbInstance.upPressed = "up_Pressed1"; sbInstance.upDisabled = "up_Disabled1"; sbInstance.upOver = "up_Over1"; //change scroller down button sbInstance.downIdle = "down_Idle1"; sbInstance.downPressed = "down_Pressed1"; sbInstance.downDisabled = "down_Disabled1"; sbInstance.downOver = "down_Over1"; //change scroller slider sbInstance.sliderTopIdle = "sliderTop_Idle1"; sbInstance.sliderTopOver = "sliderTop_Over1"; sbInstance.sliderTopPressed = "sliderTop_Pressed1"; sbInstance.sliderBottomIdle = "sliderBottom_Idle1"; sbInstance.sliderBottomOver = "sliderBottom_Over1"; sbInstance.sliderBottomPressed = "sliderBottom_Pressed1"; sbInstance.sliderBodyIdle = "sliderBody_Idle1"; sbInstance.sliderBodyOver = "sliderBody_Over1"; sbInstance.sliderBodyPressed = "sliderBody_Pressed1"; sbInstance.sliderDragIdle = "sliderDrag_Idle1"; sbInstance.sliderDragOver = "sliderDrag_Over1"; sbInstance.sliderDragPressed = "sliderDrag_Pressed1"; //change scroller track sbInstance.trackTopEndIdle = "trackTop_Idle1"; sbInstance.trackTopEndOver = "trackTop_Over1"; sbInstance.trackTopEndPressed = "trackTop_Pressed1"; sbInstance.trackTopEndDisabled = "trackTop_Disabled1"; sbInstance.trackBottomEndIdle = "trackBottom_Idle1"; sbInstance.trackBottomEndOver = "trackBottom_Over1"; sbInstance.trackBottomEndPressed = "trackBottom_Pressed1"; sbInstance.trackBottomEndDisabled = "trackBottom_Disabled1"; sbInstance.trackIdle = "track_Idle1"; sbInstance.trackOver = "track_Over1"; sbInstance.trackPressed = "track_Pressed1"; sbInstance.trackDisabled = "track_Disabled1"; } // END SET SKIN FUNCTION // where the up_Idle1, up_Pressed1 etc represents the scroll bar symbols linkage ids from the library ( you need to set the scroll bar symbols linkage ids from the library in this form or similar ). Also it is a good practice to make sure the scrolling content is fully loaded first and after that call this function having the scroll bar instance name as parameter.
Flashtuning 04-13-09	How can I set a custom mouseWheel function? To create your own simple mouse wheel function you can use the scrollPercentage property to scroll similar to this: Code: Select all`var signum = -1; var percentStep = 5; var mouseListener:Object = new Object(); mouseListener.onMouseWheel = function(delta) { if (delta<0) signum = -1; else signum = 1; myScrollBar.scrollPercentage += (percentStep * signum); } Mouse.addListener(mouseListener);` The mouse wheel listener can have 2 parameters - delta and target clip ( more details are available in Flash help files ) and you can make a test to know over which symbol your wheel is used and scroll only that symbol at a time.
Flashtuning 08-26-08	FREQUENTLY ASKED QUESTIONS How can I access the component's Flash Help Book? The component comes with a built in Help Book with all the supported methods/properties and events explained and you can access the files via the Flash Help Panel. You will find the book under the name Flashtuning Scroll Bar or you can perform a search under the flashtuning or adjacent keyword and the documentation files will be automatically displayed. How can I activate the advanced scroll easing option? For more advanced scroll speed control you can activate the easing property included in the Component Inspector Panel / Advanced Options Group and set a custom scroll easing type. How can I change the skin elements? Where can I find them? The skin elements can be found in either the full or trial package / Skin folder or as individual download package available in the Downloads section of the Scroll Bar component. You will find more details how you can change the skin elements in the Help Book / Customizing the FlashtuningScrollBar section or . How can I dynamically add a Scroll Bar instance using ActionScript? Check the sample included in the Scroll Bar / Downloads section showing you how to dynamically add a Scroll Bar instance to your project using ActionScript and customize it using either library skin elements or colors. How can I set the scroll amount using ActionScript? You can set the scroll amount using the scrollPercentage property. Example: Code: Select all`myScrollBar.scrollPercentage = 40;` I'm trying to get the scroll bars to appear only when the browser window shrinks smaller than the content. Does the product allow for this? You can check the sample included in the Scroll Bar / Downloads section showing you how to achieve this using two Scroll Bar instances, one in vertical mode and the other in horizontal mode. What does dynamic/run-time customization means? The customization of the component is either skin or color based and you can dynamically alter the look of the components at runtime using these properties to get one or more component instances having a different look. If you are using the skin properties you need to have the scroller assets symbols in the library exported for ActionScript. You can find what skin and color properties are supported in the Help Book / Customizing the FlashtuningScrollBar component section. What is the sliderOffset property? The sliderOffset property is a numeric value representing the distance between the Scroll Bar slider and the top/bottom ends of the Scroll Bar track. It works only when the component is used in Scroll Bar mode. The default value for this property is 4px. When I return to a frame wich has the scroller via a button action the scroller no longer works. Would you be able to help me out? The Scroll Bar component and the target movie clip need to be placed inside their own movie clip. Where can I find a Quick Start Guide for the component? You can check the Advanced Scroll Bar for Flash - Getting Started Guide available in the Tutorials area. This guide is also available in the component download package.

Add Comments on User Interface >> Advanced Scroll Bar AS 2.0
Please login to post comments