Use slider controls to adjust the effect's properties : Slider « Components « Flex






Use slider controls to adjust the effect's properties

Use slider controls to adjust the effect's properties
       
<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".

This user guide is licensed for use under the terms of the Creative Commons Attribution 
Non-Commercial 3.0 License. 

This License allows users to copy, distribute, and transmit the user guide for noncommercial 
purposes only so long as 
  (1) proper attribution to Adobe is given as the owner of the user guide; and 
  (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. 
The best way to provide notice is to include the following link. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

-->
<!-- charts/ApplyEffectsWithActionScriptSlider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="init()">
    <mx:Script>
        import mx.collections.ArrayCollection;
        import mx.charts.effects.SeriesInterpolate;
        import mx.binding.utils.BindingUtils;
        public var rearrangeData:SeriesInterpolate;
        [Bindable]
        public var items:ArrayCollection = new ArrayCollection([
            {item: 2000},
            {item: 3300},
            {item: 3000},
            {item: 2100},
            {item: 3200}
            ]);
        public function init():void {
            // Specify the effect's target in the constructor.
            rearrangeData = new SeriesInterpolate(mySeries);
            // Bind effect properties to slider controls
            BindingUtils.bindProperty(rearrangeData,
            "duration", durationSlider, "value");
            BindingUtils.bindProperty(rearrangeData,
            "minimumElementDuration",
            minimumElementDurationSlider, "value");
            BindingUtils.bindProperty(rearrangeData,
            "elementOffset", elementOffsetSlider, "value");
        }
        public function addDataItem():void {
            // Add a randomly generated value to the data provider.
            var n:Number = Math.random() * 3000;
            var o:Object = {item: n};
            items.addItem(o);
        }
        public function resetSliders():void {
            durationSlider.value = 1000;
            minimumElementDurationSlider.value = 200;
            elementOffsetSlider.value = 0;
        }
      </mx:Script>
    <mx:Panel title="Column Chart with Series Interpolate Effect">
        <mx:ColumnChart id="myChart" dataProvider="{items}">
            <mx:series>
                <mx:ColumnSeries id="mySeries" yField="item"
                    displayName="Quantity" showDataEffect="rearrangeData" />
            </mx:series>
        </mx:ColumnChart>
    </mx:Panel>
    <mx:Button id="b1" click="addDataItem()" label="Add Data Item" />
    <mx:Panel>
        <mx:Form>
            <mx:FormItem label="Duration">
                <mx:HSlider id="durationSlider" minimum="1" maximum="10000"
                    value="1000" dataTipPlacement="top" tickColor="black"
                    snapInterval="500" tickInterval="500" labels="['0','10000']"
                    allowTrackClick="true" liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="Minimum Element Duration">
                <mx:HSlider id="minimumElementDurationSlider" minimum="0"
                    maximum="1000" value="200" dataTipPlacement="top"
                    tickColor="black" snapInterval="50" tickInterval="50"
                    labels="['0','1000']" allowTrackClick="true"
                    liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="Element Offset">
                <mx:HSlider id="elementOffsetSlider" minimum="0" maximum="1000"
                    value="0" dataTipPlacement="top" tickColor="black"
                    snapInterval="50" tickInterval="50" labels="['0','1000']"
                    allowTrackClick="true" liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>
    <mx:Button id="b2" label="Reset Sliders" click="resetSliders()" />
</mx:Application>

   
    
    
    
    
    
    
  








Related examples in the same category

1.Formatting data tips in a SliderFormatting data tips in a Slider
2.Set snap interval value to 1 for horizontal sliderSet snap interval value to 1 for horizontal slider
3.Set tick interval value for horizontal sliderSet tick interval value for horizontal slider
4.Set value for horizontal sliderSet value for horizontal slider
5.Set minimum value to 1 for horizontal sliderSet minimum value to 1 for horizontal slider
6.Set Horizontal slider to live draggingSet Horizontal slider to live dragging
7.Use HSlider to choose valueUse HSlider to choose value
8.Use VSlider to choose valueUse VSlider to choose value
9.Two thumbs with thumbCount = 2Two thumbs with thumbCount = 2
10.Use a change event to show slider value in a TextArea controlUse a change event to show slider value in a TextArea control
11.Call setThumbValueAt() method of HSlider to change the slider valueCall setThumbValueAt() method of HSlider to change the slider value
12.Horizontal slider Label settingsHorizontal slider Label settings
13.HSlider, snap and tick intervalHSlider, snap and tick interval
14.VSlider maximum, snap and tick intervalVSlider maximum, snap and tick interval
15.Bind slider value to a Text controlBind slider value to a Text control
16.change event for HSliderchange event for HSlider
17.Slider values property is a two-element array that contains the current value of the thumbsSlider values property is a two-element array that contains the current value of the thumbs
18.Get thumb index for two-thumb sliderGet thumb index for two-thumb slider
19.Use Slider to control the image width, height and alphaUse Slider to control the image width, height and alpha
20.Bind Slider value to a LabelBind Slider value to a Label
21.Set minimum, maximum, tickInterval, snapInterval and Labels for SliderSet minimum, maximum, tickInterval, snapInterval and Labels for Slider
22.Rotating Fonts With SliderRotating Fonts With Slider
23.change width with sliderchange width with slider
24.Use Slider to control the width and height of ConstraintColumnUse Slider to control the width and height of ConstraintColumn
25.Use Slider to control the background color for a BoxUse Slider to control the background color for a Box
26.Set Slider tip functionSet Slider tip function
27.Show a horizontal slider and a vertical slider with different properties set.Show a horizontal slider and a vertical slider with different properties set.
28.HSlider BindingHSlider Binding
29.HSlider EventHSlider Event
30.HSlider Data TipHSlider Data Tip
31.Set alpha of DisplayObject when you move the sliderSet alpha of DisplayObject when you move the slider
32.Specify an offset used when adding a data child to the canvas for the labels with an HSlider control.Specify an offset used when adding a data child to the canvas for the labels with an HSlider control.
33.Use Slider to change vertical Scroll PositionUse Slider to change vertical Scroll Position
34.Use dataTipFormatFunction to format the data tip textUse dataTipFormatFunction to format the data tip text
35.Invoke adjustThumb() method when the user clicks the buttonInvoke adjustThumb() method when the user clicks the button
36.Bind Panel width to HSliderBind Panel width to HSlider