Flash Gauges, how do you build them?!?!?

As in a speedometer or tacometer of a car? something like this will make it spin according to a measure - but you need to be able to convert your measurements into 180 + or - to do it. Is it going up and down on the dial or just up, How is this happening, (user, variables from your action script? I would say we need more info on what you have to help:)

onClipEvent(enterFrame){
      
      if(_rotation<xspeed){
      _rotation +=10;
      }
}

Billystyx

Here is the way I would suggest solving your problem, this method realies heavily on ActionScripting so you don't have tons of tweens or additional objects you don't need.

See Demos and source at:
gauge/">http://www.XXdream.com/EE/gauge/

First though you need to solve the math part of this which will make the programming and implementation pretty simple.

So your dial is going to rotate based on a value from 0-100, you need an expression that will convert 0-100 into a valid angle for the needle to point to. For instance if you want to have 0-100 represent a dial that goes from 0 all the way around to 360 degrees you need a simple formula like "angle = value * 3.6" Where angle is the direction to point the needle and value is the text field variable. On the other hand a more realistic gauge could be like the oil gauge in your car which usually point -30 to +30 degrees from vertical, if you wanted to move a needle in a gauge like that you would first find the total range of the needle, in this case it's 60 degrees, so now your formula would be "angle = value * 0.6" resulting in a angle range of 0-60 for value inputs of 0-100. Hopefully now you can see the first part which is converting your values to an appropriate angle range. To keep this part simpler however, I'm going to imagine the needle range is 100 degrees, going from an angle of -50 to 50.

Now to start creating this make a movie clip which is your indicator arrow, make sure the registration point is the spot the needle will rotate around. Set the rotation of the needle in the movie clip to left most point the needle will start from, i.e., 0 on the gauge, in this case I'm using -50 degree rotation. It's very important you rotate the needle in the movie clip and that you do not rotate the actual movie clip.

Now in your movie clip make another layer on top of your art for the actions. In the first frame you will need the following actions:
If (/:value > _rotation)
      Set Variable: "angle" = (/:value - _rotation) * .2 + _rotation + 1
      Set Property ("", Rotation) = Int(angle)
Else If (/:value < _rotation - 1)
      Set Variable: "angle" = _rotation - ((_rotation - /:value) * .2) - 1
      Set Property ("", Rotation) = Int(angle)
End If

In the second frame you just need one action:
Go to and Play (1)


The basis of what is going is that the script calculates how far it has to go and than applies a fraction of that to the current angle. I've made samples available for download and viewing at:
gauge/">http://www.XXdream.com/EE/gauge/

needle1 uses the above method with a angle range of 100 and accelerated movement based on distance.

needle2 uses a 180 degree range and linear movement.

Both set a variable in the main timeline called value to a random number between 0-100 to test the movement. It is very important that you uses a variable text field called value in your main timeline in order for the gauge to respond.

here is a question asked before...

https://www.experts-exchange.com/questions/21205075/Create-a-Speedometer-Gauge-Fed-by-a-Database.html?query=Flash+Gauge&clearTAFilter=true

might give you some guide to your problem

Sean

Thank you for the reply, I have been busy so havn't been able to respond. I tried that site listed above and it doesn't seem to resolve. If I could see the example I think it may help me more. You can email me it at spam at ipforge dot com.

Also does this only work in Flash 7?

I have tried this over and over with no such luck, I think seeing the fla will help me greatly.

Thanks again for all your help and I look forward to hearing from you!!

Anyone else care to take a crack at this.........maybe something that was written in Flash MX or MX2004 and not from the flash 4 days?

Points increased to 400!!!

What problems did you have with ellandrd code?
And what have you got? IE how far have you got?
If you can post your fla we canmaybe take a look and fix it/manipulate it.

Billystyx

Well I can't post the code since it's at home right now, but it's what he said to do and it doesn't work. I know this code was written in mid-2000 so I'm wondering if Flash 7 is having a problem with it. I play the movie and the needle never moves when I feed it diffrent values. I put a input text field on the page that holds the value which I type in and it should change but it doesn't. I even tried it his way and set the values within the script and it still doesn't work. A posted working .fla of this would really be helpful since I can't seem to get it to work even when I just try to mess with the _rotation property. Thanks guys!

I don't have one of those, but if you post yours I will be happy to try to fix it:) I cannot do it until this evening either - so I am happy to wait.

Billystyx

I have messed with this for a few day now, still not getting it. I can't ever seem to get ANYTHING to rotate. What I have posted is very simple. I am taking a dynamic text field.........assigning it a var so I can type in the angle I want........then it will display that var, then it's suppose to turn the needle movie that many degrees off it's starting point. It does not...........enjoy the madness.........please help, if I get the desired result I'll double the points!

http://ipforge.ath.cx/RWX/needle.zip

try this one to get you started:)
http://members.lycos.co.uk/billystyx/download.htm

top left corner of htm is a link controler 2, this has several example files - yours is needle1

Billystyx

Hmmm ok finally getting movment so that is good :) However it just spins in a circle. I need to be able to set a range, and have it go to that degree and stop. You know like a gauge in your car. I will be playing around wtih this tonight........lets keep on it. Thank you for your help so far, look forward to hearing more responces.

instead of _rotation -=var1;
do
if(_rotation!=var1){
_rotation +=1;
}

so it goes there and stops

then your next step to figure out is how to convert that to some rotation vs speed, vs where on the dial type thing. But I would say that was up to you to figure out:)

I/we can help with the details - like how to make flash do things, you need to come up with the inspiration!

Billystyx

I have no problem with inspiration, I do that through making this program look and function easily. As in the coding aspect it's little difficult to go against what it must be to work. I am however messing with this code from here also along with what you have shown me so far......

https://www.experts-exchange.com/questions/21205075/Create-a-Speedometer-Gauge-Fed-by-a-Database.html?query=Flash+Gauge&clearTAFilter=true

However I am rotating the whole movie and not just the needle.......any suggestions?

Also when you say........

instead of _rotation -=var1;
do
if(_rotation!=var1){
_rotation +=1;
}

I'm sure exactly what you mean.........I do understand however the code.........which I believe is flawed.........since the gauge will be in constant motion since it's set to +1 when not equal to var1. Playing with this now......suggestions welcome!

Update.......

if (NEEDLE._rotation>var1) {
      _rotation += 1;
} else if (NEEDLE._rotation<var1) {
      _rotation -= 1;
}

I wrote this and it works fine however I'm still rotating the whole movie........anyhelp on how to get it to target just the needle?

do NEEDLE._rotation +=1;
unless the code is in the needle clip.

Sorry, I can't remember (it was all that time ago - last night or something).

This will rotate the needle anyway, referencing it with NEEDLE._rotation rather than just _rotation

Billystyx

With the code I supplied above it was with the intention that you set the value of var1, and then the needle spins until it reaches that var1 value.
Thus you would need only to set a calculation  that coverts a text field value (like 100 as in mph), to covert it to a rotation value where 100 might be = approx 30 on the dial...
Do you see what I mean?

Billystyx

If still no luck tonight and I have time I will try to create a dial as an example

Yea I am not worried about the math part to much, I have read the _rotation function works on a -180 to 180 degree method........I can figure out a equation for this no prob. It's the rotating of the whole movie vs just the needle part I'm fighting now. I think I am just not correctly targeting the needle movie somehow. I have tried to put the code in the needle clip also and it does not work. I think it may be because the value var1 is not referenced correctly down to the root stage or whatever that is called. Still toying with this now.......if you get a functioning gauge please do post it, I learn best from seeing the code in action then modifing it accordingly. Trust me......I have ALOT to modify!! ;) Thanks again for your help so far, let me know what you come up with and I'll do the same.

no worries - can you post your up to date file and I will pick it up tonight:)

if (var1>NEEDLE._rotation) {
        angle=(var1 - NEEDLE._rotation)*.2+NEEDLE._rotation+1;
        this.NEEDLE._rotation=int(angle);
} else if (var1<NEEDLE._rotation - 1) {
        angle=NEEDLE._rotation-(( NEEDLE._rotation-var1)*.2)-1;
        this.NEEDLE._rotation=int(angle);
}

This ended up working, I was just mistargeting my movie. Now I just need to figure out the math part. Billy you get the points for your help........if you'd like to continue to help with the math part please do.

Here is the new problem..........the gauge is set up to rotate from -180 to +180. So say i need a range f a gauge to be 100 to 320? What would be the correct math to be able to transverse from neg to piositive and fit in that range?

Also think about a gauge that may go from say 100 to 3000...........

Using the method I gave I just converted the number of degrees of rotation into rotation=speed*3 - because if speed was 10 mutliplied by 3 would be 30 degrees of rotation, based on dial from 0 to 110, this left a gap of 30 degrees as there is (approx) on a usual speedo, between the 0 mark and the 110 mark.

So same would be applicable for a dial from 100 to 320 - the marks are not so important as how far around the needle is pointing according to the speed you choose.

Maths, however, is not my strongest point - I find math sites more helpful whenever doing stuff like this than actual flash/programming related sites...

but, if I calculated mine by going I want the speedo to go to 120 (when allowing for the whole circle), then if you want a range of 220 (from 100 to 320), then you go 360/220 which gives 1.636 as the number to multiple your var1 by.
like this:
(var1-100)*1.63636363636= degrees rotation

hope this helps a bit:)

Billystyx

Ok no worries I'll find out a equation.........the issue it it's not /360.........the rotation is based on a -180 to 180 degree range.........this is where it gets complicated.

Thanks anyway Billy!