Sliding Calculator Tutorial request

[pbryd]

Hi Guys

I have a simple php calculator when users enter length and width of a room and the result is displayed (the square area).

I'd like to do the same thing with a flash sliding calculator.

Does anyone know of any basic tutorial for a sliding calculator using Flash CS 3/4 and AS3?

Here's a simple mock up of what I'm talking about.

Phil

[pbryd]

Hi Guys

I've been working on a slider calculator this morning and I'm pretty pleased with the fact I've got a couple of sliders and I'm getting their values to display.

However, whenever I try to multiply the variables from the slider output I'm getting NaN.

I believe it because the outputs aren't numbers but no matter what I try I can't get them to multiply.

I have three variables: len, wid and calc.

I'm trying to get

calc = len * wid
trace calc

But I can't work out the correct syntax.

Can anyone solve this?

here's the sliding calculator (http://tynesidegraphics.co.uk/slider/slider1.html)

and here's the code...

stop();
//import slider classes;
import fl.controls.Slider;
import fl.events.SliderEvent;

var len:Number;
var wid:Number;
var calc:Number;


length_mc.addEventListener(SliderEvent.CHANGE, lengthChange);

width_mc.addEventListener(SliderEvent.CHANGE, widthChange);

function lengthChange(e:SliderEvent):void {
lengthTxt.text = e.target.value;
len = e.target.value;
trace(len);
}

function widthChange(e:SliderEvent):void {
widthTxt.text = e.target.value;
wid = e.target.value;
trace(wid);
}

Can anyone point me in the right direction?

[snickelfritz]

Add another textfield to the stage.
Name it calcText.

stop();
import fl.controls.Slider;
import fl.events.SliderEvent;

var len:Number = 0;
var wid:Number = 0;

width_mc.addEventListener(SliderEvent.CHANGE, widthChange);
length_mc.removeEventListener(SliderEvent.CHANGE, lengthChange);

function widthChange(e:SliderEvent):void
{
length_mc.addEventListener(SliderEvent.CHANGE, lengthChange);
widthText.text = e.target.value;
wid = e.target.value;
trace(wid);
}

function lengthChange(e:SliderEvent):void
{
lengthText.text = e.target.value;
len = e.target.value;
calcText.text = (len * wid).toString();
trace(len);
calc(len * wid);
}

function calc(product:Number):void
{
calcText.text = product.toString();
}

[pbryd]

Wow many thanks, that's working.

I'll sit and work through the additions to try to understand them.

Many Thanks

Phil

[pbryd]

Well I've had a bit of a play with it and found it's not quite working right.

Because the lengthChange function is called in the widthChange function, means the calculator doesn't up date

You can see it's not quite right here (http://tynesidegraphics.co.uk/slider/slider2.html)

There must be way to get this working while keeping the functions seperate.

[snickelfritz]

actually, a single function that handles everything is probably the way to do it.

stop();
import fl.controls.Slider;
import fl.events.SliderEvent;

var len:Number = 0;
var wid:Number = 0;

width_mc.addEventListener(SliderEvent.CHANGE, calc);
length_mc.addEventListener(SliderEvent.CHANGE, calc);

function calc(e:SliderEvent):void
{
wid = width_mc.value;
len = length_mc.value;

widthText.text = wid.toString();
lengthText.text = len.toString();
calcText.text = (wid * len).toString();
}

[pbryd]

Thanks

I couldn't get that to work straight off but I'll have another look tomorrow.

I've got it working so far with this.. (http://tynesidegraphics.co.uk/slider/slider3.html)

stop();
import fl.controls.Slider;
import fl.events.SliderEvent;

length_mc.addEventListener(SliderEvent.CHANGE, lengthChange);
width_mc.addEventListener(SliderEvent.CHANGE, widthChange);
stage.addEventListener(MouseEvent.MOUSE_MOVE, multip);

function lengthChange(e:SliderEvent):void
{
lengthTxt.text = e.target.value;
}

function widthChange(e:SliderEvent):void
{
widthTxt.text = e.target.value;
}

function multip(e:MouseEvent):void
{
var widN:Number = Number(widthTxt.text);
var lenN:Number = Number(lengthTxt.text);
calcTxt.text = (("the area is ") + (widN*lenN) + (" m/2"));
}

It would be good to get it smaller into one, but I've got another couple of things to add too.

I'll just keep chipping away 'till it's right.

Thanks for your help

Phil

[snickelfritz]

Here's a script that dynamically updates the values displayed in the textfields.

stop();
import fl.controls.Slider;
import fl.events.SliderEvent;

var len:Number = 0;
var wid:Number = 0;

addEventListener(Event.ENTER_FRAME, onLoop);

function onLoop(e:Event):void
{
wid = width_mc.value;
len = length_mc.value;

widthText.text = wid.toString();
lengthText.text = len.toString();
calcText.text = (wid * len).toString();
}