?
Solved

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

Posted on 2005-03-20
24
Medium Priority
?
675 Views
Last Modified: 2012-05-05
I am a pretty verse Flash guy and am currently building a program that requires gauges that are like the ones you find in a car. I found this site........http://www.dundas.com which has some .NET/FLASH based gauges for a idea of what I am looking to code. I have the hard part done, I am feeding the data from a MYSQL backend via PHP into FLash which works perfect, now I just need to animate those numbers. I have fooled with the x_scale feature in actionscripting but I can't get it to do anything like a circle gauge OR get it to read anything other then 0-100 as a var. I need to be able to make the gauge read from anywhere from like 0-300 to like 300-500 and 100-10000 and such..........I can hardocde these gauges no problem but they need that kind of range.

Really I'm just looking on HOW to do these I can do the hard part and perfect them into what I need and share it here.

Thanks in advanced!
0
Comment
Question by:LORD_MINION
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 12
  • 10
  • 2
24 Comments
 
LVL 18

Expert Comment

by:Billystyx
ID: 13589138
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
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13590122
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.
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13590133
here is a question asked before...

http://www.experts-exchange.com/Web/WebDevSoftware/Flash/Q_21205075.html?query=Flash+Gauge&clearTAFilter=true

might give you some guide to your problem

Sean
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:LORD_MINION
ID: 13627566
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?
0
 

Author Comment

by:LORD_MINION
ID: 13627727
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!!
0
 

Author Comment

by:LORD_MINION
ID: 13648898
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!!!
0
 
LVL 18

Expert Comment

by:Billystyx
ID: 13650051
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
0
 

Author Comment

by:LORD_MINION
ID: 13652661
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!
0
 
LVL 18

Expert Comment

by:Billystyx
ID: 13652774
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
0
 

Author Comment

by:LORD_MINION
ID: 13703735
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
0
 
LVL 18

Expert Comment

by:Billystyx
ID: 13704497
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
0
 

Author Comment

by:LORD_MINION
ID: 13706921
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.
0
 
LVL 18

Expert Comment

by:Billystyx
ID: 13707091
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
0
 

Author Comment

by:LORD_MINION
ID: 13707970
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......

http://www.experts-exchange.com/Web/WebDevSoftware/Flash/Q_21205075.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!
0
 

Author Comment

by:LORD_MINION
ID: 13708070
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?
0
 
LVL 18

Expert Comment

by:Billystyx
ID: 13708114
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
0
 
LVL 18

Expert Comment

by:Billystyx
ID: 13708157
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

0
 

Author Comment

by:LORD_MINION
ID: 13708250
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.
0
 
LVL 18

Expert Comment

by:Billystyx
ID: 13708302
no worries - can you post your up to date file and I will pick it up tonight:)
0
 
LVL 18

Accepted Solution

by:
Billystyx earned 1600 total points
ID: 13712278
ok look here-

http://members.lycos.co.uk/billystyx/download.htm

top left corner of htm page controler 2

clickon that - there are severalflas in 1 zip file but yours is needle3

Billystyx

you type in the text field a number between 1 and 110 and the speedo moves up, take it out and it moves back down to 0. Far from perfect but hopefully enough to work with - good luck with it. (the lines aren't marked properly - sort of like a speedo in an old car:)

 
0
 

Author Comment

by:LORD_MINION
ID: 13713444
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?
0
 

Author Comment

by:LORD_MINION
ID: 13713569
Also think about a gauge that may go from say 100 to 3000...........
0
 
LVL 18

Expert Comment

by:Billystyx
ID: 13714549
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

0
 

Author Comment

by:LORD_MINION
ID: 13716381
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!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I know the transition can be hard. We got used to the ease of use ActionScript 2 had, but honestly, it became problematic later on, especially if designers were involved in the project and found it easy to add code as they saw fit. So, this artic…
This article describes a solution to a problem of subloading one movie into another when they have different SWF versions. Sometime back, I was working on an ActionScript project while I came across an interesting fact which I would like to share…
The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question