Skip to main content
Known Participant
September 28, 2012
Question

Change Text from a Slider

  • September 28, 2012
  • 1 reply
  • 1180 views

I have created a slider.  (see code below)  I want the slider to change the text in the textbox to display the numbers 0-360 as the slider is moved up or down.  I have slider and the textbox but unsure of how to get the text to change in the box.  I dont think I can use sliderChanged since I am not using the component.  can anyone help me with this?  Thanks.

CODE:

//Main Slider MovieClip

var tempSlider_MC:MovieClip = new MovieClip();

//Slider MovieClip

var slider_MC:MovieClip = new MovieClip();

//Slider Knob MovieClip

var sliderKnob_MC:MovieClip = new MovieClip();

//Slider Track MovieClip

var sliderTrack_MC:MovieClip = new MovieClip();

//Digital Temperature Readout

var txtOutput:TextField = new TextField();

tempSlider_MC.x = 300;

tempSlider_MC.y = 300;

tempSlider_MC.name = "TemperatureSlider";

//Create slider background rectangle

var sbkg:Sprite = new Sprite();

sbkg.graphics.beginFill(0xCCCCCC);

sbkg.graphics.drawRoundRect(0,0, 372, 24, 20, 20);

sbkg.graphics.endFill();

//Create Slider Track;

var strack:Sprite = new Sprite();

var fMatr:Matrix = new Matrix  ;

fMatr.createGradientBox(360, 14, ((Math.PI/2)), 0, 0);

strack.graphics.beginGradientFill(GradientType.LINEAR, [0x000000,0x999999 ], [1,1], [0,255], fMatr, "pad");

strack.graphics.drawRoundRect(5,5,360, 14, 20, 20);

strack.graphics.endFill();

//Create Track Line

var strackline:Sprite = new Sprite();

strackline.graphics.lineStyle(1,0XFFFFFF);

strackline.graphics.moveTo(11,11);

strackline.graphics.lineTo(strack.width, 11);

var trackWidth:Number = strack.width;

var trackX:Number = strack.x;

//Create Slider Knob;

var sknob:Sprite = new Sprite();

sknob.graphics.beginGradientFill(GradientType.RADIAL, [0xFF0000, 0x999999], [1,1], [0,255], null, "pad");

sknob.graphics.drawCircle(11,11,7);

sknob.graphics.endFill();

var knobWidth:Number = sknob.width;

var boundWidth = trackWidth - knobWidth;

var boundRect:Rectangle = new Rectangle(trackX,0,boundWidth,0);

//Create SubMovie Clips for the Slider Track and Knob

sliderTrack_MC.addChild(strack);

sliderTrack_MC.addChild(strackline);

slider_MC.addChild(sbkg);

//Turn MC into button

sliderKnob_MC.addChild(sknob);

sliderKnob_MC.buttonMode = true;

sliderKnob_MC.useHandCursor = true;

sliderKnob_MC.mouseChildren = false;

//Set Maximum, Minimum, and Starting values of the slider

sliderKnob_MC.minimum = 0;

sliderKnob_MC.maximum = 360;

sliderKnob_MC.value = 10;

//Set Snap Interval to make the slider values always be multipliers of 2

sliderKnob_MC.snapInterval = 2;

//Enable Drag

sliderKnob_MC.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);

function startDragging(event:MouseEvent)

{

          sliderKnob_MC.startDrag(false, boundRect);

          txtOutput.htmlText = "Temp is"+unescape("%B) F");

}

//Stop Drag;

sliderKnob_MC.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

//sliderKnob_MC.addEventListener(MouseEvent.MOUSE_OUT, stopDragging);

function stopDragging(event:MouseEvent)

{

          sliderKnob_MC.stopDrag();

}

//Create Text Backdrop;

var txtOutputbkg:Sprite = new Sprite();

// Black Gray color;

txtOutputbkg.graphics.beginFill(0X000000);

// x, y, width, height, ellipseW, ellipseH;

txtOutputbkg.graphics.drawRoundRect(0, 0, 334, 74, 0, 0);

txtOutputbkg.graphics.endFill();

txtOutputbkg.y = -95;

//Create Text Formatting

var textTempfont:Font = new Digital();

var tempFormat:TextFormat = new TextFormat();

tempFormat.font = textTempfont.fontName;

tempFormat.size = 36;

txtOutput.defaultTextFormat = tempFormat;

txtOutput.width = 334;

txtOutput.textColor = 0xFF0000;

txtOutput.htmlText = "TEMP IS";

txtOutput.y = -85;

txtOutput.x = 10;

slider_MC.addChild(txtOutputbkg);

slider_MC.addChild(txtOutput);

slider_MC.addChild(sliderTrack_MC);

slider_MC.addChild(sliderKnob_MC);

//Place Slider on Stage;

tempSlider_MC.addChild(slider_MC);

addChild(tempSlider_MC);

This topic has been closed for replies.

1 reply

Ned Murphy
Legend
September 28, 2012

In your startDragging function you want to assign a MOUSE_MOVE event listener (remove it later in the stopDragging function - could also use an ENTER_FRAME listener instead).  In the event handler for this listener is where you will detect the ratio of the knob position versus it range of positions and determine the 0-360 value from that ratio.

Known Participant
October 1, 2012

Ok That worked.  I have it working except I am trying to update the text field and it is telling it is undefined.  Do you see any reason as to why it is that way?

CODE:

//Main Slider MovieClip

var tempSlider_MC:MovieClip = new MovieClip();

//Slider MovieClip

var slider_MC:MovieClip = new MovieClip();

//Slider Knob MovieClip

var sliderKnob_MC:MovieClip = new MovieClip();

//Slider Track MovieClip

var sliderTrack_MC:MovieClip = new MovieClip();

//Digital Temperature Readout

var txtOutput:TextField = new TextField();

tempSlider_MC.x = 300;

tempSlider_MC.y = 300;

tempSlider_MC.name = "TemperatureSlider";

//Create slider background rectangle

var sbkg:Sprite = new Sprite();

sbkg.graphics.beginFill(0xCCCCCC);

sbkg.graphics.drawRoundRect(0,0, 372, 24, 20, 20);

sbkg.graphics.endFill();

//Create Slider Track;

var strack:Sprite = new Sprite();

var fMatr:Matrix = new Matrix  ;

fMatr.createGradientBox(360, 14, ((Math.PI/2)), 0, 0);

strack.graphics.beginGradientFill(GradientType.LINEAR, [0x000000,0x999999 ], [1,1], [0,255], fMatr, "pad");

strack.graphics.drawRoundRect(5,5,360, 14, 20, 20);

strack.graphics.endFill();

//Create Track Line;

var strackline:Sprite = new Sprite();

strackline.graphics.lineStyle(1,0XFFFFFF);

strackline.graphics.moveTo(11,11);

strackline.graphics.lineTo(strack.width, 11);

var trackWidth:Number = strack.width;

var trackX:Number = strack.x;

//Create Slider Knob;

var sknob:Sprite = new Sprite();

sknob.graphics.beginGradientFill(GradientType.RADIAL, [0xFF0000, 0x999999], [1,1], [0,255], null, "pad");

sknob.graphics.drawCircle(11,11,7);

sknob.graphics.endFill();

var knobWidth:Number = sknob.width;

var boundWidth = trackWidth - knobWidth;

var boundRect:Rectangle = new Rectangle(trackX,0,boundWidth,0);

//Create SubMovie Clips for the Slider Track and Knob

sliderTrack_MC.addChild(strack);

sliderTrack_MC.addChild(strackline);

slider_MC.addChild(sbkg);

//Turn MC into button;

sliderKnob_MC.addChild(sknob);

sliderKnob_MC.buttonMode = true;

sliderKnob_MC.useHandCursor = true;

sliderKnob_MC.mouseChildren = false;

//Set Maximum, Minimum, and Starting values of the slider

sliderKnob_MC.minimum = 0;

sliderKnob_MC.maximum = 360;

sliderKnob_MC.value = 10;

//Set Snap Interval to make the slider values always be multipliers of 2

sliderKnob_MC.snapInterval = 2;

//Enable Drag

sliderKnob_MC.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);

function startDragging(event:MouseEvent)

{

          sliderKnob_MC.startDrag(false, boundRect);

          sliderKnob_MC.addEventListener(Event.ENTER_FRAME, ontempChange);

}

function ontempChange(event:Event):void

{

          //trace("Entering Frame");

          txtOutput.htmlText = "Temp is " + (slider_MC.value )+ unescape("%B0 F");

}

//Stop Drag;

sliderKnob_MC.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

//sliderKnob_MC.addEventListener(MouseEvent.MOUSE_OUT, stopDragging);

function stopDragging(event:MouseEvent)

{

          sliderKnob_MC.stopDrag();

}

//Create Text Backdrop;

var txtOutputbkg:Sprite = new Sprite();

// Black Gray color;

txtOutputbkg.graphics.beginFill(0X000000);

// x, y, width, height, ellipseW, ellipseH;

txtOutputbkg.graphics.drawRoundRect(0, 0, 334, 74, 0, 0);

txtOutputbkg.graphics.endFill();

txtOutputbkg.y = -95;

//Create Text Formatting

var textTempfont:Font = new Digital();

var tempFormat:TextFormat = new TextFormat();

tempFormat.font = textTempfont.fontName;

tempFormat.size = 36;

txtOutput.defaultTextFormat = tempFormat;

txtOutput.width = 334;

txtOutput.textColor = 0xFF0000;

txtOutput.htmlText = "TEMP IS";

txtOutput.y = -85;

txtOutput.x = 10;

slider_MC.addChild(txtOutputbkg);

slider_MC.addChild(txtOutput);

slider_MC.addChild(sliderTrack_MC);

slider_MC.addChild(sliderKnob_MC);

//Place Slider on Stage;

tempSlider_MC.addChild(slider_MC);

addChild(tempSlider_MC);

Ned Murphy
Legend
October 1, 2012

What is the complete error message?  Before you provide it, go into your Flash Publish Settings and select the option to Permit Debugging.  This can enahnce the error message by indicating a line number of the offending code next to the frame number.