ShowTrackHighlight in spark Slider component

how to use showTrackHighlight in spark slider component in flex 4

Thanks for posting your solution to this. I used it successfully with Flash Pro CS5.5. It's necessary for a slider that might be used with a touchscreen. Other links that I found stated that thumb width and height could not be changed and that it was necessary to extend the Slider component to access these properties.
MB

Similar Messages

Any sources for styling \ skinning the Slider component?

Any sources for styling \ skinning the Slider component?
ie setting the background invisible or using another graphic in place of the line/rectangle graphic. using another graphic for the thumb. replacing the current graphic thumb has restrictions in dimensions,

: http://flash.sikotiko.com/2009/05/05/as3-skinning-slider-component/

[svn:fx-trunk] 8024: Fixed an injection where setting the 'content' property of Spark text component to a TextFlow would cause you to get a TextFlow nested inside a TextFlow .

Revision: 8024
Author:   [email protected]
Date:     2009-06-19 16:59:25 -0700 (Fri, 19 Jun 2009)
Log Message:
Fixed an injection where setting the 'content' property of Spark text component to a TextFlow would cause you to get a TextFlow nested inside a TextFlow.
QE Notes: None
Doc Notes: None
Bugs: SDK-21906
Reviewer: Carol to review
Ticket Links:
    http://bugs.adobe.com/jira/browse/SDK-21906
Modified Paths:
    flex/sdk/trunk/frameworks/projects/flex4/src/spark/primitives/RichEditableText.as
    flex/sdk/trunk/frameworks/projects/flex4/src/spark/primitives/RichText.as

Well, I've already solved one of the two issues
In order to display the icons on my buttonbar buttons, I just needed to point at {hostComponent.data.data} instead of {hostComponent.data}. I'm not sure why, but {hostComponent.data} in my skin class is a handle on my instance of ButtonBarButton, not its "data" property. Any explanation is welcomed
I still have got the first issue though. Oddly enough my design works if I put an mx Image instead of the spark BitmapImage for the client logo. That will do the trick for the moment but I'd prefer to deliver a 100% pure spark component in my prototype, and I can see no reason why BitmapImage works inside my ButtonBarButtons and doesn't otherwise...

Paging data in Spark list component

I'm wondering if paging data for Spark list components will be available in the final release of FB 4 / Flex SDK 4? Currently you will get an error when trying to bind a paged service method to a Spark list component: "Paged operations are not supported by this component".
I'm asking this because of some problems we currently have with paging data in a Flex 3 TileList. See Jira issue: http://bugs.adobe.com/jira/browse/SDK-18758
The suggested solution in this issue is to use a Gumbo Spark TileLayout instead of a TileList. That's currently not a suitable solution since the list doesn't support paging...

Hi Jacob and Ram,
Thank you for the information. Not the type of info I was hoping for of course . Do you guys know what I have to do to re-open my bug report (http://bugs.adobe.com/jira/browse/SDK-18758)? I'd really like to have the Halo TileList fixed so we are able to use it properly.
Thanks,
Jaap

Sound position and length on Slider Component AS3

Hello:
I have the following working great:
stop_btn.setStyle("icon", square_mc);
player_btn.setStyle("icon", next_mc);
import flash.events.Event
import flash.events.MouseEvent;
import flash.media.SoundTransform;
var alreadyDefined:Boolean;
volumen.value = 1;
if(!alreadyDefined){
alreadyDefined=true;
var isPlaying:Boolean = new Boolean();
var pausePosition:Number = new Number();
var soundClip:Sound = new Sound();
var sndChannel:SoundChannel;
soundClip.load(new URLRequest("audio/music.mp3"));
soundClip.addEventListener(Event.COMPLETE, onComplete, false, 0, true);
player_btn.addEventListener(MouseEvent.MOUSE_DOWN, btnPressController, false, 0, true);
stop_btn.addEventListener(MouseEvent.MOUSE_DOWN, btnPressStop, false, 0, true);
function onComplete(evt:Event):void {
    sndChannel = soundClip.play();
    isPlaying = true;
function btnPressController(evt:MouseEvent):void
    switch(isPlaying)
        case true:
            //controller.text ="Sound Paused";
            player_btn.setStyle("icon", pause_mc);
            pausePosition = sndChannel.position;
            sndChannel.stop();
            isPlaying = false;
        break;
        case false:
            //controller.text ="Sound Playing";
            player_btn.setStyle("icon", next_mc);
            sndChannel = soundClip.play(pausePosition);
            isPlaying = true;
        break;
function btnPressStop(evt:MouseEvent):void
    pausePosition = 0;
    sndChannel.stop();
    //controller.text ="Play Sound";
    player_btn.setStyle("icon", next_mc);
    isPlaying = false;
volumen.addEventListener(Event.CHANGE, sliderChanged);
function sliderChanged(evt:Event):void {
var vol:Number = volumen.value;
volumen.liveDragging = true;
var st:SoundTransform = new SoundTransform(vol);
if(sndChannel != null){
    sndChannel.soundTransform = st;
exit_btn.addEventListener(MouseEvent.CLICK, fexit);
function fexit(event:MouseEvent):void{
    SoundMixer.stopAll();
    Loader(this.parent).unloadAndStop();
I have another slider component on the movie with instance name PROGRESO
I would like for PROGRESOnto indicate (update) the sounds progress as it plays and be able to scrub through the sound.
Any idea how I can achieve this? Thanks for any help

Thanks Andrei.
But I really dont understand. You see, I am not too good (actually pretty bad) with Ationscript 3.
Att.,
Edwin
I managed to get it to move each second though with this:
var myTimer:Timer = new Timer(1000);
myTimer.addEventListener(TimerEvent.TIMER, runTimer);
myTimer.start();
function runTimer(event:TimerEvent):void {
trace("Hello");
progreso.value = progreso.value+1;

Using A Slider Component As A Button

Hi
I've got what to small problems when using my slider component.
I'm building a small quiz and I am using the slider component to let the user rate their opinion. It'd be great if I could make the slider play the movieclip (to the next quiz questio) when the user has cast their opinion - on mouse up. Is this possible.
Also I'm using a 'score' uint variable to collect the polling results but I need this variable to reside on the root of my flash file so that I can add to it from various diffrent movieclips. How can I target the variable from a movieclip.
Heres my code:
import fl.events.SliderEvent;
voteSlider.value = 5;
voteSlider.addEventListener(SliderEvent.CHANGE, voteCast);
function voteCast (event:SliderEvent):void {
          score += event.target.value;
          trace(score);
This is what i would like to target in the root
var score:uint = 0;
Thanks

your voteCast() function executes after a mouseup. add your code there:
import fl.events.SliderEvent;
voteSlider.value = 5;
voteSlider.addEventListener(SliderEvent.CHANGE, voteCast);
function voteCast (event:SliderEvent):void {
          score += event.target.value;
          trace(score);
gotoAndStop("label"); // assuming the current timeline is the one you want to direct.

How to code spark custom component with variable number of (skin)parts?

Hello. I'm trying to code a complex Spark custom component that may have a variable number of parts. To help you understand the requirements, the component can be visualized as an HSlider with a unlimited number of thumbs (as opposed to one).
How do I, in general, represent these thumbs in the host component as well as the skin? If I had a fixed number of thumbs, say 5, I could easily represent them as 5 button SkinParts declaratively. However, it's not immediately clear to me how to deal with a variable number of them.
I've studied the HSlider implementation as well as other components and can't find an example that fits this pattern. The closest thing that I can think of is to represent the thumbs as a DataGroup and provide a custom item renderer to render them. Couple that with the general HSlider behaviors that I need to preserve, such as the fairly involved local/global coordinate translations, I don't know whether the approach will work.
Any better ideas? Thanks.

#2 sounds utterly strange to me. How would I utilize the phase id?The code below shows my idea whereas I never validate it in any real projects:
public class MyPhaseListener implements PhaseListener {
     private static final String IDKEY = "PHASEID";
     public static PhaseId getCurrentPhaseId() {
          return (PhaseId) FacesContext.getCurrentInstance().getExternalContext().getRequestMap().get(IDKEY);
     public void beforePhase(PhaseEvent event) {
event.getFacesContext().getExternalContext().getRequestMap().put(IDKEY,event.getPhaseId());
     public PhaseId getPhaseId() {
          return PhaseId.ANY_PHASE;
}You can write your constructor like as:
if (MyPhaseListener.getCurrentPhaseId().equals(PhaseId.RENDER_RESPONSE ) {
     /* create children because this is the first time to create the component */
}

Change Volume using Slider Component

I am trying to use the slider component (aSlider) to control the volume of mySound which is a class called PlaySound. Created an addEventListener for aSlider with a SlideEvent.CHANGE executing a function called changeVolume. Everything else works but I can't seem to get the slider to control the volume of mySound. Need some help. Here is the current code. TY in advance.
import flash.events.Event;
import fl.controls.Slider;
import fl.events.SliderEvent;
import fl.controls.Label;
var mySound:PlaySound = new PlaySound ;
stage.addEventListener(Event.ENTER_FRAME, clock);
var OFF:Boolean = true;
function clock(event:Event):void
var currentdate:Date = new Date();
arc_mc.visible = false;
secondHand_mc.rotation = currentdate.seconds * 6;
minuteHand_mc.rotation = currentdate.minutes * 6 + currentdate.seconds / 10;
hourHand_mc.rotation = currentdate.hours * 30 + currentdate.minutes / 2;
if (secondHand_mc.rotation > -60 && secondHand_mc.rotation < 0)
arc_mc.visible = true;
if (OFF)
   OFF = false;
   mySound.play();
else
arc_mc.visible = false;
SoundMixer.stopAll();
OFF = true;
aSlider.addEventListener(SliderEvent.CHANGE, changeVolume);
function changeVolume(event:SliderEvent):void
   // var volumeLevel:Number = 5;
   //volumeLevel = event.target.value / 100;
valueLabel.text = event.target.value + "percent";

yes, if someone uses your slider before you start playing your sound, you should prevent that error:
import flash.events.Event;
import fl.controls.Slider;
import fl.events.SliderEvent;
import fl.controls.Label;
import flash.media.SoundTransform;
import flash.media.SoundChannel;
var mySound:PlaySound = new PlaySound() ;
var mySoundChannel:SoundChannel;
stage.addEventListener(Event.ENTER_FRAME, clock);
var OFF:Boolean = true;
function clock(event:Event):void
var currentdate:Date = new Date();
arc_mc.visible = false;
secondHand_mc.rotation = currentdate.seconds * 6;
minuteHand_mc.rotation = currentdate.minutes * 6 + currentdate.seconds / 10;
hourHand_mc.rotation = currentdate.hours * 30 + currentdate.minutes / 2;
if (secondHand_mc.rotation > -60 && secondHand_mc.rotation < 0)
arc_mc.visible = true;
if (OFF)
   OFF = false;
   mySoundChannel = mySound.play(); // delcare mySoundChannel outside all functions
   //mySound.play();
else
arc_mc.visible = false;
SoundMixer.stopAll();
OFF = true;
aSlider.addEventListener(SliderEvent.CHANGE, changeVolume);
function changeVolume(event:SliderEvent):void
valueLabel.text = event.target.value + "percent";
if(mySoundChannel){
var st:SoundTransform = mySoundChannel.soundTransform;
st.volume =(event.target.value - event.target.minimum) / (event.target.maximum - event.target.minimum);
mySoundChannel.soundTransform = st;

How to Position Thumb on Slider Component

Hi all:
I am relearning ActionScript after 6 years away, so please
excuse what may be a really stupid question. I am trying to use the
built-in Slider Component to resize a graphic in my movie. I've
used the Code example from the Flash online documentation and got
it to work. Trouble is, the thumb on the slider is starting at 10
percent when the movie loads, and I want it to start in the middle
(50%).
I tried setting the aSlider.value = 50; And that works,
except as soon as I finish dragging the slider, the thumb snaps
back to 50. I tried resetting it within the ChangeHandler function
to the new event.value, but that doesn't work. I tried assigning it
to a variable called thumbpos and setting that, also doesn't work.
How can I make the new event.value persist outside of the
function? See attached code. Thanks!!!
**************************************************

1. To set focus to a component, we call the Item.Specific.Click method on the component
2. I think that the order that fields are added to the form determines the tab index. I'm not aware of any property that would change this
3. Handle the ItemEvent event and check pVal.EventType to see if its type is et_VALIDATE. This means that the field specified by pVal.ItemUID is about to lose focus. If you set BubbleEvent to False, you can cancel the action and force the user to enter a new value without leaving the field.

Spark Video Component Playing issue

Hi,
I want to play a MP4 large size video (500+ MB) using spark video component, But unable to see the video it only play the voice, but video not displaying
I will send you the video link on your request, but not share on forum
Thanks
Anees

I did not think so.
I am also getting this with IE 9 and its a long documented issue although nothing in the last few months. All 2011 posts.
This is a new image I got done at Lenovo so eveything was fresh.
Problem signature:
Problem Event Name: APPCRASH
Application Name: iexplore.exe
Application Version: 9.0.8112.16421
Application Timestamp: 4d76255d
Fault Module Name: nvwgf2um.dll
Fault Module Version: 8.17.12.7658
Fault Module Timestamp: 4f53bc01
Exception Code: c0000005
Exception Offset: 0005ad3d
OS Version: 6.1.7601.2.1.0.768.3
Locale ID: 1033
Additional Information 1: 8b6d
Additional Information 2: 8b6d235a555f35a3ed0bd60e5521c68c
Additional Information 3: 3248
Additional Information 4: 324805dfa1463962b35de7833a40d76a
T520 Model 4239 Intel(R) Core(TM) i7-2860QM CPU @ 2.50GHz
Intel Sandy Bridge & Nvidia NVS 4200M graphics Intel N 6300 Wi-Fi adapter
Windows 7 Home Prem - 64bit w/8GB DDR3

Dragging Slider Component

How can I alter the Slider Component so that it slides
horizontally, left or right, by simply mousing over and moving the
mouse WITHOUT clicking and holding down the mouse (as is the
default behavior of the Slider)... just simply touching the Slider
and rolling the mouse left or right.
What I am trying to accomplish: I would like the ability to
mouse over invisible buttons while using the Slider Component. The
mouse over effect does not function on the buttons beneath the
Slider because the mouse button is held down when passing over
them.
Thanks so much in advance for any help on this.

I figugured it out I had to put mc.play(); instead of:
mc.frameTxt.text = aSlider.value;

Wrap long lines in a Spark List component?

I have a Spark List.
The text for each entry is on one line, and is too long to fit.
Can I get it to break to as many lines as needed without a custom item renderer?

If you define an explicit width on the SimpleText in the DefaultItemRenderer you can get this behavior.
Here is an example of this using an inline ItemRenderer:
<s:Application
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:List width="50" height="200">
        <s:ArrayList>
            <fx:String>a</fx:String>
            <fx:String>b</fx:String>
            <fx:String>c c c c c c c c c c c c</fx:String>
            <fx:String>d</fx:String>
            <fx:String>e</fx:String>
        </s:ArrayList>
        
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer focusEnabled="false">
                    <fx:Script>
                        <![CDATA[
                            override public function set label(value:String):void
                                super.label = value;
                                labelDisplay.text = label;
                        ]]>
                    </fx:Script>
                    <s:states>
                        <s:State name="normal" />
                        <s:State name="hovered" />
                        <s:State name="selected" />
                        <s:State name="normalAndShowsCaret"/>
                        <s:State name="hoveredAndShowsCaret"/>
                        <s:State name="selectedAndShowsCaret"/>
                    </s:states>
                    <s:Rect left="0" right="0" top="0" bottom="0">
                        <s:stroke.normalAndShowsCaret>
                            <s:SolidColorStroke
                                color="{selectionColor}"
                                weight="1"/>
                        </s:stroke.normalAndShowsCaret>
                        <s:stroke.hoveredAndShowsCaret>
                            <s:SolidColorStroke
                                color="{selectionColor}"
                                weight="1"/>
                        </s:stroke.hoveredAndShowsCaret>
                        <s:stroke.selectedAndShowsCaret>
                            <s:SolidColorStroke
                                color="{selectionColor}"
                                weight="1"/>
                        </s:stroke.selectedAndShowsCaret>
                        <s:fill>
                            <s:SolidColor
                                color.normal="{contentBackgroundColor}"
                                color.normalAndShowsCaret="{contentBackgroundColor}"
                                color.hovered="{rollOverColor}"
                                color.hoveredAndShowsCaret="{rollOverColor}"
                                color.selected="{selectionColor}"
                                color.selectedAndShowsCaret="{selectionColor}"
                                />
                        </s:fill>
                    </s:Rect>
                    
                    <s:SimpleText id="labelDisplay" verticalCenter="0" width="48" top="6" bottom="4"/>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:Application>

EdgeMetrics or viewMetrics from a Spark Container/Component?

Is there a way to get the edgeMetrics or viewMetrics from a spark container like there was in Flex 3?
Thanks,
- Cliff

The only way I've found to pass properties or styles to a skin is through CSS or extending the host component and adding the styles or properties onto it. However this seems like a hack. Shouldn't the skin expose it's configuration to the host component? I think that is what Flex themes are doing.

Dual Slider Component for Flash

Hi!
I need dual slider for flash. I found for flex but my project
is in Flash.
Dual Slider is something like this
example
Thanks

Interesting! You should be able to make one pretty easily,
what do you need it to control? And does it have to be a Component?
(although this can also be constructed).

Can you disable the spark list component?

i need to disable the spark list in my application when the user clicks on new story... is that possible?

Set the Boolean enabled property to false.
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:CheckBox id="ch" label="enabled" selected="true" />
    </s:controlBarContent>
    <s:List id="lst" enabled="{ch.selected}" horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight]" />
        </s:dataProvider>
    </s:List>
</s:Application>
Peter

ShowTrackHighlight in spark Slider component

Similar Messages

Maybe you are looking for