Setting the slide duration on a Spark HScrollBar control in Flex 4

By Peter deHaan On February 28, 2010 · 6 Comments

In a previous example, “Setting the slide duration on a Spark HSlider control in Flex 4″, we saw how you could set the slide duration on a Spark HSlider control in Flex 4 by setting the slideDuration style.

The following example shows how you can set the slide duration on a Spark HScrollBar control in Flex 4 by setting the slideDuration style to control the animated thumb scroll when Ctrl+clicking on the scroll bar track.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/28/setting-the-slide-duration-on-a-spark-hscrollbar-control-in-flex-4/ -->
<s:Application name="Spark_HScrollBar_slideDuration_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|ScrollBarBase {
            slideDuration: 8000; /* ms */
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
 
            [Bindable]
            private var dp:ArrayList;
 
            private function init():void {
                var arr:Array = new Array();
                var idx:uint = 0;
                const LEN:uint = 1000;
 
                for (idx = 0; idx < LEN; idx++) {
                    arr.push({label:"item " + idx.toString()});
                }
                dp = new ArrayList(arr);
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            dataProvider="{dp}"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout requestedRowCount="10" horizontalAlign="contentJustify" gap="0" />
        </s:layout>
    </s:List>
 
</s:Application>

View source is enabled in the following example.

You can also set the slideDuration style on a VScrollBar instance (in this case via the List control’s slider skin part) using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/28/setting-the-slide-duration-on-a-spark-hscrollbar-control-in-flex-4/ -->
<s:Application name="Spark_HScrollBar_slideDuration_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.events.FlexEvent;
 
            [Bindable]
            private var dp:ArrayList;
 
            private function init():void {
                var arr:Array = new Array();
                var idx:uint = 0;
                const LEN:uint = 1000;
 
                for (idx = 0; idx < LEN; idx++) {
                    arr.push({label:"item " + idx.toString()});
                }
                dp = new ArrayList(arr);
            }
 
            protected function lst_creationCompleteHandler(evt:FlexEvent):void {
                lst.scroller.verticalScrollBar.setStyle("slideDuration", 8000 /* ms */);
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            dataProvider="{dp}"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="lst_creationCompleteHandler(event);">
        <s:layout>
            <s:VerticalLayout requestedRowCount="10" horizontalAlign="contentJustify" gap="0" />
        </s:layout>
    </s:List>
 
</s:Application>

Or you can globally set the slideDuration style via the StyleManager in ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/28/setting-the-slide-duration-on-a-spark-hscrollbar-control-in-flex-4/ -->
<s:Application name="Spark_HScrollBar_slideDuration_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        creationComplete="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.events.FlexEvent;
 
            [Bindable]
            private var dp:ArrayList;
 
            private function init():void {
                var arr:Array = new Array();
                var idx:uint = 0;
                const LEN:uint = 1000;
 
                for (idx = 0; idx < LEN; idx++) {
                    arr.push({label:"item " + idx.toString()});
                }
                dp = new ArrayList(arr);
 
                var sbbCSS:CSSStyleDeclaration = styleManager.getStyleDeclaration("spark.components.supportClasses.ScrollBarBase");
                if (!sbbCSS) {
                    sbbCSS = new CSSStyleDeclaration("spark.components.supportClasses.ScrollBarBase");
                }
                sbbCSS.setStyle("slideDuration", 8000 /* ms */);
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            dataProvider="{dp}"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout requestedRowCount="10" horizontalAlign="contentJustify" gap="0" />
        </s:layout>
    </s:List>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

Tagged with: Gumbo • slideDuration

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

6 Responses to Setting the slide duration on a Spark HScrollBar control in Flex 4

wojiao shenme says:

March 5, 2010 at 2:28 am

I’m having trouble compiling, which compiler version are you using?

Reply
- Peter deHaan says:
  
  March 5, 2010 at 6:33 am
  
  @wojiao shenme,
  
  I typically use a semi-recent build of Flash Builder 4 and the most recent Flex 4 nightly SDK build.
  
  Peter
  
  Reply
azhar shah says:

March 7, 2010 at 10:08 am

As I am a newbie to flex. Please guide me as I am trying to make an application which would stream live video from sites like justin.tv, etc. Kindly guide me or give me sample code to make such kind of application.
Thanks in advance!!!

Reply
fox says:

March 10, 2010 at 6:06 am

Umm, so when I click somewher on the slider it supposed to slide to that location like on the previous example?:
http://blog.flexexamples.com/2009/05/28/setting-the-slide-duration-on-a-spark-hslider-control-in-flex-gumbo/

It doesnt ?

Reply
- Peter deHaan says:
  
  March 10, 2010 at 8:02 am
  
  @fox,
  
  You have to Ctrl+click on the track.
  
  Peter
  
  Reply
Beth Medemar says:

January 18, 2011 at 9:13 am

Have their been any updates to this theme since this post or is this spot on?

Reply